/* Original Lives V0.29.3 — uploaded photographs, full-bleed microphone cards */
/* A square seat provides more room for photos on desktop AND mobile. */
.ol-voice-live-seats{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ol-voice-live-seat{
  position:relative;isolation:isolate;overflow:hidden;box-sizing:border-box;
  width:100%;min-width:0;aspect-ratio:1 / 1;min-height:176px;
  border-radius:18px;padding:12px 9px;gap:7px;
  background:#211539;
  transition:border-color .16s,box-shadow .16s;
}
/* Actual profile photo fills the ENTIRE seat; crop never distorts the image. */
.ol-voice-live-seat .ol-v293-seat-cover{
  position:absolute;z-index:-2;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 32%;display:block;pointer-events:none;
}
.ol-voice-live-seat.ol-v293-has-photo{background:#160e29}
.ol-voice-live-seat.ol-v293-has-photo::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,4,23,.86) 0%,rgba(13,5,26,.26) 31%,rgba(12,4,24,.18) 48%,rgba(10,4,19,.92) 100%);
}
.ol-voice-live-seat.ol-v293-has-photo.speaking::before{background:linear-gradient(180deg,rgba(11,4,23,.83),rgba(25,10,50,.10) 32%,rgba(13,5,30,.25) 54%,rgba(11,4,21,.94))}
.ol-voice-live-seat.ol-v293-has-photo.offline .ol-v293-seat-cover{filter:grayscale(.35) brightness(.72)}
/* Crown/number at top, name and mic state at the bottom. */
.ol-voice-live-seat .ol-voice-seat-number{
  position:relative;z-index:1;max-width:100%;
  display:inline-block;padding:5px 9px;border-radius:999px;
  background:rgba(23,11,44,.72);backdrop-filter:blur(5px);
  border:1px solid rgba(205,165,255,.30);color:#e6d2ff;
  font-size:11px;line-height:1.25;text-wrap:balance;
}
.ol-voice-live-seat.host .ol-voice-seat-number{border-color:rgba(255,217,145,.65);color:#ffe3a1}
.ol-voice-live-seat.ol-v293-has-photo .ol-voice-profile-action{margin-top:auto;width:100%;gap:4px;z-index:1}
.ol-voice-live-seat.ol-v293-has-photo .ol-voice-profile-action .ol-voice-avatar{display:none}
.ol-voice-live-seat .ol-voice-avatar{
  width:clamp(56px,7vw,78px);height:clamp(56px,7vw,78px);
  border-radius:17px;border-width:2px;font-size:30px;
}
.ol-voice-avatar img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.ol-voice-live-seat.ol-v293-has-photo .ol-voice-person-name{
  font-size:clamp(11px,1.3vw,15px);font-weight:850;
  overflow-wrap:anywhere;white-space:normal;line-height:1.2;
  color:#fff;text-shadow:0 2px 5px #08020ce0,0 0 12px #08020ccd;
}
.ol-voice-live-seat.ol-v293-has-photo .ol-voice-seat-status{
  font-size:10px;color:#fff;text-shadow:0 1px 5px #08020c,0 0 8px #08020c;
}
.ol-voice-live-seat .ol-voice-profile-action:focus-visible{outline:2px solid #ffdd93;outline-offset:2px}
.ol-voice-live-seat .ol-voice-seat-controls{position:relative;z-index:1;width:100%;gap:5px}
.ol-voice-live-seat.ol-v293-has-photo .ol-voice-seat-controls button{
  background:rgba(38,18,67,.87);backdrop-filter:blur(5px);
  border:1px solid rgba(233,206,255,.7);
}
.ol-voice-live-seat.ol-v29-seat-tap:hover{box-shadow:0 0 0 2px #b373e355 inset; border-color:#cd9cf9}
/* Square portraits on profile cards and user lists, fully filling their frames. */
.ol-contact-profile-head .ol-contact-avatar{aspect-ratio:1 / 1;overflow:hidden;border-radius:22px}
.ol-contact-profile-head .ol-contact-avatar img,
.ol-friend-avatar img,.ol-top8-avatar img{
  width:100%;height:100%;object-fit:cover;object-position:center 32%;display:block;
}
.ol-friend-avatar,.ol-top8-avatar{overflow:hidden;aspect-ratio:1/1}
.ol-friend-avatar{border-radius:13px}
.ol-top8-avatar{border-radius:12px}
/* The audience becomes a readable photo grid rather than tiny round icons. */
.ol-voice-listeners{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:11px}
.ol-voice-listeners .ol-voice-profile-action.listener{
  width:100%;max-width:none;min-width:0;display:flex;flex-direction:column;
  gap:7px;padding:7px 7px 9px;border-radius:16px;
  background:#28163f;border:1px solid #75519d;
  text-align:center;transition:border-color .16s,transform .16s;
}
.ol-voice-listeners .ol-voice-profile-action.listener:hover{border-color:#d2a1ff;transform:translateY(-2px)}
.ol-voice-listeners .ol-voice-avatar.small{
  width:100%;height:auto;aspect-ratio:1/1;border-radius:12px;
  font-size:34px;line-height:1;overflow:hidden;
}
.ol-voice-listeners .ol-voice-person-name{max-width:100%;font-size:11px;font-weight:750;overflow-wrap:anywhere}
/* Request list remains compact: square thumbnail with text and moderation buttons. */
.ol-voice-request-row .ol-voice-profile-action.listener{flex-direction:row;min-width:0}
.ol-voice-request-row .ol-voice-avatar.small{width:39px;height:39px;aspect-ratio:1/1;border-radius:10px;flex-shrink:0}
@media(max-width:680px){
  .ol-voice-live-seats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ol-voice-live-seat{aspect-ratio:auto;min-height:176px;padding:9px 7px}
  .ol-voice-live-seat .ol-voice-seat-number{font-size:10px;padding:4px 7px}
  .ol-voice-live-seat .ol-voice-avatar{width:61px;height:61px}
  .ol-voice-live-seat .ol-voice-person-name{font-size:11px}
  .ol-voice-live-seat .ol-voice-seat-controls button{font-size:10px;padding:5px 6px}
  .ol-voice-listeners{grid-template-columns:repeat(auto-fill,minmax(91px,1fr));gap:9px}
}
@media(max-width:370px){
  .ol-voice-live-seats{gap:7px}
  .ol-voice-live-seat{min-height:165px;padding:8px 5px}
  .ol-voice-live-seat .ol-voice-seat-controls button{font-size:9px;padding:5px}
}