/* === chat.css === */
/* ── GROUP CHAT ────────────────────────────────────────────────────────── */
#chat-tab{
  display:flex;flex-direction:row;
  height:calc(100vh - 66px);
  max-width:1200px;margin:0 auto;width:100%;
  position:relative;
}
/* Conversation list sidebar */
#chat-sidebar{
  width:280px;flex-shrink:0;border-right:1px solid var(--b);
  display:flex;flex-direction:column;background:var(--c);
  transition:width .25s cubic-bezier(.16,1,.3,1);
}
#chat-sidebar.collapsed{width:68px;}
#chat-sidebar.collapsed .chat-sb-hdr-ttl,
#chat-sidebar.collapsed .chat-sb-search,
#chat-sidebar.collapsed .chat-conv-body,
#chat-sidebar.collapsed .chat-sb-list > div[style*="text-transform:uppercase"]{display:none;}
#chat-sidebar.collapsed .chat-conv{justify-content:center;padding:8px 6px;}
#chat-sidebar.collapsed .chat-sb-hdr{justify-content:center;padding:14px 8px;}
#chat-sidebar.collapsed .chat-sb-new-btn{display:none;}
#chat-sidebar.collapsed .chat-sb-icon-btn svg{transform:rotate(180deg);}
.chat-sb-icon-btn{width:30px;height:30px;border-radius:50%;background:var(--c2);border:1px solid var(--b);color:var(--ink2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.chat-sb-icon-btn:hover{color:var(--gold);border-color:var(--gold);}
.chat-sb-icon-btn svg{transition:transform .25s;}
.chat-sb-hdr{padding:14px 16px;border-bottom:1px solid var(--b);display:flex;align-items:center;justify-content:space-between;}
.chat-sb-hdr-ttl{font-family:'Playfair Display',serif;font-size:18px;color:var(--ink);}
.chat-sb-new-btn{width:30px;height:30px;border-radius:50%;background:var(--gold);color:white;border:none;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:transform .15s;}
.chat-sb-new-btn:hover{transform:scale(1.08);}
.chat-sb-search{padding:10px 12px;border-bottom:1px solid var(--b);}
.chat-sb-search input{width:100%;padding:7px 12px 7px 30px;border-radius:100px;background:var(--c2);border:1px solid var(--b);font-size:12px;color:var(--ink);outline:none;font-family:inherit;box-sizing:border-box;background-image:url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:10px center;background-size:13px;}
.chat-sb-list{flex:1;overflow-y:auto;}
.chat-conv{display:flex;gap:10px;padding:10px 14px;cursor:pointer;border-left:3px solid transparent;transition:background .12s;align-items:center;}
.chat-conv:hover{background:var(--c2);}
.chat-conv.active{background:var(--c2);border-left-color:var(--gold);}
.chat-conv.hidden-by-search{display:none;}
.chat-conv-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold2));display:flex;align-items:center;justify-content:center;color:white;font-size:12px;font-weight:700;flex-shrink:0;overflow:hidden;border:2px solid var(--c);position:relative;}
.chat-conv-av img{width:100%;height:100%;object-fit:cover;}
.chat-conv-av.group{background:linear-gradient(135deg,#5B8DB8,#7BA5C8);}
.chat-conv-av .online-dot{position:absolute;bottom:0;right:0;width:11px;height:11px;border-radius:50%;background:#4CAF50;border:2px solid var(--c);}
.chat-conv-body{flex:1;min-width:0;}
.chat-conv-top{display:flex;align-items:center;justify-content:space-between;gap:6px;}
.chat-conv-name{font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-conv-time{font-size:10px;color:var(--ink3);flex-shrink:0;}
.chat-conv-bottom{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:2px;}
.chat-conv-preview{font-size:12px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;}
.chat-conv.unread .chat-conv-preview{color:var(--ink);font-weight:500;}
.chat-conv-badge{background:var(--gold);color:white;font-size:10px;font-weight:700;padding:1px 7px;border-radius:100px;flex-shrink:0;min-width:18px;text-align:center;}
.chat-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;color:var(--ink3);font-size:13px;flex:1;}
.chat-empty-state svg{width:48px;height:48px;color:var(--ink3);opacity:.4;margin-bottom:12px;}
/* Main pane */
#chat-main{flex:1;display:flex;flex-direction:column;min-width:0;}
#chat-main.no-conv #chat-header,#chat-main.no-conv #chat-msgs,#chat-main.no-conv #chat-input-area,#chat-main.no-conv #chat-reply-bar{display:none;}
#chat-main.no-conv .chat-empty-state{display:flex;}
.chat-empty-state{display:none;}
/* Back button (mobile) */
.chat-back-btn{display:none;background:none;border:none;color:var(--ink2);cursor:pointer;padding:6px;border-radius:8px;margin-right:4px;}
.chat-back-btn:hover{background:var(--c2);}
/* New DM picker overlay */
#chat-new-overlay{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;animation:fadeIn .15s;}
#chat-new-overlay.show{display:flex;}
.chat-new-box{background:var(--c);border-radius:16px;width:min(440px,92vw);max-height:75vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.25);}
.chat-new-hdr{padding:16px 20px;border-bottom:1px solid var(--b);display:flex;align-items:center;justify-content:space-between;}
.chat-new-hdr-ttl{font-family:'Playfair Display',serif;font-size:18px;color:var(--ink);}
.chat-new-search{padding:10px 16px;border-bottom:1px solid var(--b);}
.chat-new-search input{width:100%;padding:9px 12px;border-radius:9px;background:var(--c2);border:1px solid var(--b);font-size:13px;color:var(--ink);outline:none;font-family:inherit;box-sizing:border-box;}
.chat-new-list{flex:1;overflow-y:auto;}
.chat-new-user{display:flex;align-items:center;gap:12px;padding:10px 18px;cursor:pointer;transition:background .12s;}
.chat-new-user:hover{background:var(--c2);}
.chat-new-user.hidden-by-search{display:none;}
.chat-new-user .av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold2));display:flex;align-items:center;justify-content:center;color:white;font-size:12px;font-weight:600;overflow:hidden;}
.chat-new-user .av img{width:100%;height:100%;object-fit:cover;}
.chat-new-user .nm{font-size:14px;color:var(--ink);}

/* Mobile: collapsible sidebar */
@media(max-width:768px){
  #chat-sidebar{position:absolute;left:0;top:0;bottom:0;z-index:10;width:100%;}
  #chat-main{width:100%;}
  body.chat-conv-active #chat-sidebar{transform:translateX(-100%);}
  #chat-sidebar,body.chat-conv-active #chat-main{transition:transform .25s;}
  .chat-back-btn{display:flex;}
  body:not(.chat-conv-active) #chat-main{display:none;}
}
/* Messages list */
#chat-msgs{
  flex:1;overflow-y:auto;padding:16px 14px 8px;
  display:flex;flex-direction:column;gap:2px;
  scrollbar-width:thin;scrollbar-color:var(--b) transparent;
}
/* Date divider */
.chat-date{
  text-align:center;font-size:11px;
  color:rgba(0,0,0,.42);
  margin:18px 0 6px;font-weight:600;
  letter-spacing:0;text-transform:none;
  display:block;
}
.chat-date b{font-weight:700;color:rgba(0,0,0,.55);}
body.dark .chat-date{color:rgba(255,255,255,.4);}
body.dark .chat-date b{color:rgba(255,255,255,.6);}
.chat-date::before,.chat-date::after{display:none;}

/* Typing indicator bubble */
.typing-bubble{
  display:inline-flex;align-items:center;gap:4px;
  background:#E9E9EB;border-radius:18px;padding:11px 14px;
  margin:0 0 4px 6px;align-self:flex-start;
  animation:typingIn .3s cubic-bezier(.34,1.56,.64,1);
}
body.dark .typing-bubble{background:#262626;}
.typing-bubble span{
  width:7px;height:7px;border-radius:50%;background:#A0A0A6;
  animation:typingDot 1.3s infinite ease-in-out;
}
.typing-bubble span:nth-child(2){animation-delay:.15s;}
.typing-bubble span:nth-child(3){animation-delay:.3s;}
@keyframes typingDot{0%,60%,100%{transform:translateY(0) scale(.85);opacity:.4;}30%{transform:translateY(-5px) scale(1);opacity:.95;}}
@keyframes typingIn{from{opacity:0;transform:scale(.85) translateY(8px);}to{opacity:1;transform:none;}}
/* ── iMessage-style row & grouping ─────────────────── */
.chat-msg{
  display:flex;gap:8px;padding:0;
  position:relative;border-radius:0;
  align-items:flex-end;
  margin-top:2px;
}
.chat-msg:first-child{margin-top:0;}
/* Spacing between groups (first of a new group): more breathing room */
.chat-msg.grp-first,.chat-msg.grp-alone{margin-top:12px;}
/* Avatar (28px circle) — only on LAST in group, others' side; otherwise reserve space */
.chat-msg .chat-av{width:28px;height:28px;font-size:10px;flex-shrink:0;}
.chat-msg .chat-av{opacity:0;}
.chat-msg.grp-last:not(.mine) .chat-av,
.chat-msg.grp-alone:not(.mine) .chat-av{opacity:1;}
.chat-msg.mine .chat-av{display:none;}
/* Sender name: only on FIRST of group, others' side */
.chat-sender{display:none;font-size:11px;font-weight:500;color:rgba(0,0,0,.5);padding:0 0 2px 12px;}
body.dark .chat-sender{color:rgba(255,255,255,.5);}
.chat-msg.grp-first:not(.mine) .chat-sender,
.chat-msg.grp-alone:not(.mine) .chat-sender{display:block;}
/* Simple fade-in for historic messages */
.chat-msg.msg-load{animation:chatFadeIn .22s ease both;}
@keyframes chatFadeIn{from{opacity:0;}to{opacity:1;}}
/* iMessage-style spring on JUST the bubble (not the whole row — keeps grouping clean) */
.chat-msg.msg-pop .chat-bubble{animation:bubblePop .42s cubic-bezier(.34,1.56,.64,1) both;}
.chat-msg.msg-pop.mine .chat-bubble{transform-origin:bottom right;}
.chat-msg.msg-pop:not(.mine) .chat-bubble{transform-origin:bottom left;}
@keyframes bubblePop{
  0%{opacity:0;transform:scale(.6) translateY(18px);}
  60%{opacity:1;transform:scale(1.04) translateY(-2px);}
  100%{opacity:1;transform:scale(1) translateY(0);}
}
.chat-msg.hl-flash{animation:chatHL .9s ease;}
@keyframes chatHL{0%{background:rgba(184,146,74,.18);}100%{background:transparent;}}
/* Send button press animation */
#chat-send-btn{transition:transform .12s;}
#chat-send-btn.sending{animation:sendPop .42s cubic-bezier(.34,1.56,.64,1);}
@keyframes sendPop{
  0%{transform:scale(1);}
  35%{transform:scale(.78) rotate(-8deg);}
  70%{transform:scale(1.12) rotate(4deg);}
  100%{transform:scale(1) rotate(0);}
}
/* When user just pressed send, briefly highlight the input */
#chat-input-area.just-sent{animation:inputFlash .55s ease;}
@keyframes inputFlash{0%{background:rgba(184,146,74,.08);}100%{background:transparent;}}
.chat-msg:hover .chat-msg-actions{opacity:1;transform:translateY(0);}
.chat-msg.mine{flex-direction:row-reverse;}
.chat-msg.hidden-by-search{display:none;}
/* Chat header — restyled, balanced layout */
#chat-header{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--b);background:var(--c);}
.chat-hdr-id{display:flex;align-items:center;gap:10px;min-width:0;flex:1;}
.chat-hdr-meta{min-width:0;}
#chat-header #chat-hdr-av{width:38px;height:38px;font-size:13px;flex-shrink:0;}
#chat-header .ctitle{font-weight:600;font-size:15px;color:var(--ink);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#chat-header .csub{font-size:12px;color:var(--ink3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-hdr-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.chat-hdr-icon{width:32px;height:32px;border-radius:50%;background:none;border:none;color:var(--ink2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;}
.chat-hdr-icon:hover{background:var(--c2);color:var(--gold);}
#chat-search-wrap{position:relative;width:200px;}
#chat-search-wrap svg{position:absolute;left:10px;top:8px;color:var(--ink3);}
#chat-search-inp{width:100%;padding:6px 10px 6px 28px;border-radius:100px;background:var(--c2);border:1px solid var(--b);font-size:12px;color:var(--ink);outline:none;font-family:inherit;box-sizing:border-box;}
#chat-search-inp:focus{border-color:var(--gold);}
#chat-search-clear{background:none;border:none;color:var(--ink3);cursor:pointer;font-size:14px;padding:4px 8px;border-radius:8px;}
#chat-search-clear:hover{color:var(--ink);background:var(--c2);}
.chat-search-empty{padding:30px;text-align:center;color:var(--ink3);font-size:13px;}
.chat-bubble.editing{outline:2px solid var(--gold);outline-offset:1px;}
.chat-bubble .edit-textarea{width:100%;background:transparent;border:none;outline:none;resize:vertical;font:inherit;color:inherit;min-height:30px;}
.chat-edited-tag{font-size:10px;color:var(--ink3);opacity:.7;font-style:italic;margin-left:4px;}
.chat-msg.mine .chat-edited-tag{color:rgba(255,255,255,.7);}
.chat-receipts{display:flex;gap:0;margin-top:3px;padding:0 4px;justify-content:flex-end;}
.chat-receipt-av{width:13px;height:13px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;color:white;font-size:6px;font-weight:700;margin-left:-4px;border:1.5px solid var(--c);overflow:hidden;}
.chat-receipt-av img{width:100%;height:100%;object-fit:cover;}
.chat-status-label{font-size:11px;color:rgba(0,0,0,.4);padding:0 4px;margin-top:2px;font-weight:500;text-align:right;}
body.dark .chat-status-label{color:rgba(255,255,255,.4);}
/* Avatar */
.chat-av{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:white;
  flex-shrink:0;overflow:hidden;align-self:flex-end;margin-bottom:2px;
}
/* Bubble */
.chat-bubble-wrap{display:flex;flex-direction:column;max-width:75%;gap:0;}
.chat-msg.mine .chat-bubble-wrap{align-items:flex-end;}
.chat-bubble{
  background:#E9E9EB;border:none;
  border-radius:18px;
  padding:7px 13px 8px;font-size:15px;color:#000;
  line-height:1.32;word-break:break-word;
  position:relative;
  letter-spacing:-.01em;
}
body.dark .chat-bubble{background:#262626;color:#fff;}
.chat-msg.mine .chat-bubble{
  background:var(--gold);
  border-color:transparent;color:white;
  border-radius:18px;
}
/* Asymmetric corner radii — visually attach to neighboring bubbles in a group */
.chat-msg.mine.grp-first .chat-bubble{border-bottom-right-radius:5px;}
.chat-msg.mine.grp-middle .chat-bubble{border-top-right-radius:5px;border-bottom-right-radius:5px;}
.chat-msg.mine.grp-last .chat-bubble{border-top-right-radius:5px;}
.chat-msg:not(.mine).grp-first .chat-bubble{border-bottom-left-radius:5px;}
.chat-msg:not(.mine).grp-middle .chat-bubble{border-top-left-radius:5px;border-bottom-left-radius:5px;}
.chat-msg:not(.mine).grp-last .chat-bubble{border-top-left-radius:5px;}

/* No pseudo-element tail — the asymmetric border-radius above already reads as iMessage when grouped */
/* Reply preview inside bubble */
.chat-reply-preview{
  background:rgba(0,0,0,.06);
  border-radius:14px;padding:6px 11px 7px;margin-bottom:6px;
  font-size:13px;color:var(--ink2);cursor:pointer;
  position:relative;line-height:1.3;
  max-width:100%;
  display:flex;flex-direction:column;gap:1px;
  transition:background .15s;
}
.chat-reply-preview::before{
  content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:2px;background:var(--gold);
}
.chat-reply-preview{padding-left:14px;}
.chat-reply-preview:hover{background:rgba(0,0,0,.1);}
.chat-msg.mine .chat-reply-preview{background:rgba(255,255,255,.18);color:rgba(255,255,255,.92);}
.chat-msg.mine .chat-reply-preview:hover{background:rgba(255,255,255,.26);}
.chat-msg.mine .chat-reply-preview::before{background:rgba(255,255,255,.7);}
.chat-reply-name{font-weight:600;color:var(--gold);font-size:11px;letter-spacing:.1px;}
.chat-msg.mine .chat-reply-name{color:rgba(255,255,255,.95);}
.chat-reply-preview-text{font-size:13px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px;}
/* Photo in chat */
.chat-photo{
  max-width:260px;max-height:200px;border-radius:14px;
  object-fit:cover;cursor:pointer;display:block;
  border:1px solid var(--b);
}
/* Tapback-style reactions — small circular badges sitting on the bubble's outer-top corner */
/* WhatsApp-style reaction pill — bottom-outer corner of bubble */
.chat-reactions{
  position:absolute;bottom:-14px;
  display:inline-flex;align-items:center;
  background:#fff;border-radius:100px;
  padding:2px 7px;gap:2px;
  height:22px;
  box-shadow:0 1px 4px rgba(0,0,0,.18);
  z-index:2;cursor:pointer;
  transition:transform .15s;
  white-space:nowrap;
}
body.dark .chat-reactions{background:#2a2a2c;}
.chat-reactions:hover{transform:scale(1.06);}
.chat-msg.mine .chat-reactions{right:6px;}
.chat-msg:not(.mine) .chat-reactions{left:6px;}
.chat-reaction{
  background:none;border:none;padding:0;margin:0;cursor:pointer;
  font-size:13px;line-height:1;display:inline-flex;align-items:center;
}
.chat-reactions .chat-reaction+.chat-reaction{margin-left:-2px;}
.chat-reaction span{
  font-size:11px;font-weight:600;color:rgba(0,0,0,.6);
  margin-left:3px;
}
body.dark .chat-reaction span{color:rgba(255,255,255,.7);}
.chat-reaction span:empty{display:none;}
/* The bubble needs slight top-margin only when reactions are present, to avoid the badge overlapping content above */
.chat-bubble-wrap{position:relative;}
.chat-msg.has-reaction{margin-bottom:14px;}

/* WhatsApp-style hover chevron + dropdown menu */
.chat-bubble{position:relative;}
.chat-msg-chev{
  position:absolute;top:4px;right:6px;
  width:22px;height:22px;border:none;border-radius:50%;
  background:rgba(0,0,0,.18);color:white;
  opacity:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .15s,background .15s,transform .15s;
  z-index:5;
}
.chat-msg.mine .chat-msg-chev{background:rgba(255,255,255,.25);color:rgba(255,255,255,.95);}
.chat-msg:not(.mine) .chat-msg-chev{background:rgba(0,0,0,.15);color:rgba(0,0,0,.6);}
body.dark .chat-msg:not(.mine) .chat-msg-chev{background:rgba(255,255,255,.18);color:white;}
.chat-bubble:hover .chat-msg-chev,.chat-msg-chev.open{opacity:1;}
.chat-msg-chev:hover{transform:scale(1.1);background:var(--gold)!important;color:white!important;}
.chat-msg-chev svg{width:10px;height:10px;}

#chat-msg-menu{
  position:fixed;z-index:500;
  background:var(--c);border:1px solid var(--b);
  border-radius:12px;padding:6px;
  box-shadow:0 8px 30px rgba(0,0,0,.18);
  min-width:200px;
  animation:menuPopIn .15s cubic-bezier(.34,1.56,.64,1);
  font-family:'DM Sans',sans-serif;
}
@keyframes menuPopIn{from{opacity:0;transform:scale(.85) translateY(-4px);}to{opacity:1;transform:scale(1) translateY(0);}}
#chat-msg-menu button{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:9px 14px;border:none;background:none;
  color:var(--ink);font-size:14px;cursor:pointer;
  border-radius:7px;text-align:left;font-family:inherit;
  transition:background .12s;
}
#chat-msg-menu button:hover{background:var(--c2);}
#chat-msg-menu button.danger{color:#B03030;}
#chat-msg-menu button .ic{width:16px;height:16px;flex-shrink:0;color:var(--ink3);}
#chat-msg-menu button.danger .ic{color:#B03030;}
#chat-msg-menu .sep{height:1px;background:var(--b);margin:5px 0;}

/* Starred indicator on bubble */
.chat-msg.starred .chat-bubble::after{
  content:'★';position:absolute;bottom:-2px;right:6px;
  font-size:11px;color:#F2C84B;
  text-shadow:0 1px 2px rgba(0,0,0,.3);
}

/* Pinned message banner above chat */
#chat-pinned-banner{
  display:none;align-items:center;gap:10px;
  padding:8px 14px;background:var(--c2);
  border-bottom:1px solid var(--b);
  font-size:12px;color:var(--ink2);cursor:pointer;
  border-left:3px solid var(--gold);
}
#chat-pinned-banner.show{display:flex;}
#chat-pinned-banner svg{flex-shrink:0;color:var(--gold);}
#chat-pinned-banner .pin-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#chat-pinned-banner .pin-close{background:none;border:none;color:var(--ink3);cursor:pointer;font-size:14px;padding:2px 6px;}

/* Forward picker overlay */
#fwd-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
#fwd-overlay.show{display:flex;}
.fwd-box{background:var(--c);border-radius:16px;width:min(420px,92vw);max-height:70vh;display:flex;flex-direction:column;overflow:hidden;}
.fwd-hdr{padding:16px 20px;border-bottom:1px solid var(--b);display:flex;align-items:center;justify-content:space-between;}
.fwd-hdr-ttl{font-family:'Playfair Display',serif;font-size:17px;color:var(--ink);}
.fwd-list{flex:1;overflow-y:auto;padding:6px 0;}
.fwd-row{display:flex;align-items:center;gap:12px;padding:10px 18px;cursor:pointer;}
.fwd-row:hover{background:var(--c2);}
.fwd-row .av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold2));color:white;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;overflow:hidden;}
.fwd-row .av img{width:100%;height:100%;object-fit:cover;}
.fwd-row .nm{font-size:14px;color:var(--ink);}

/* Message info modal */
#msg-info-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;}
#msg-info-overlay.show{display:flex;}
.msg-info-box{background:var(--c);border-radius:16px;width:min(420px,92vw);max-height:80vh;overflow:auto;padding:22px;}
.msg-info-box h3{font-family:'Playfair Display',serif;font-size:18px;color:var(--ink);margin-bottom:14px;}
.msg-info-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--b);font-size:13px;}
.msg-info-row:last-child{border-bottom:none;}
.msg-info-row .lbl{color:var(--ink3);}
.msg-info-row .val{color:var(--ink);font-weight:500;}

/* Selection mode */
.chat-tab.select-mode .chat-msg{padding-left:30px;cursor:pointer;}
.chat-msg-sel-cb{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:18px;height:18px;border:2px solid var(--ink3);border-radius:50%;display:none;background:var(--c);}
.chat-tab.select-mode .chat-msg-sel-cb{display:block;}
.chat-msg.sel .chat-msg-sel-cb{background:var(--gold);border-color:var(--gold);}
.chat-msg.sel .chat-msg-sel-cb::after{content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:white;font-size:11px;font-weight:700;}
#chat-select-bar{position:fixed;bottom:0;left:0;right:0;background:var(--gold);color:white;padding:14px 20px;display:none;align-items:center;gap:10px;z-index:200;box-shadow:0 -4px 16px rgba(0,0,0,.15);}
#chat-select-bar.show{display:flex;}
#chat-select-bar .ct{flex:1;font-size:14px;font-weight:600;}
#chat-select-bar button{background:rgba(255,255,255,.2);color:white;border:none;padding:8px 14px;border-radius:100px;font-size:12px;cursor:pointer;font-family:inherit;}
#chat-select-bar button:hover{background:rgba(255,255,255,.3);}

/* Chat appearance: font-size + compact mode (set on body) */
body.chat-fs-sm .chat-bubble{font-size:13px;}
body.chat-fs-lg .chat-bubble{font-size:17px;}
body.chat-compact .chat-msg{padding:1px 0;}
body.chat-compact .chat-bubble{padding:5px 11px 6px;}
body.chat-compact .chat-msg.grp-first,body.chat-compact .chat-msg.grp-alone{margin-top:6px;}
/* Always-show timestamps */
body.chat-always-ts .chat-msg .chat-time{display:block!important;opacity:.6!important;}
/* Wallpaper hook */
#chat-msgs[data-wallpaper]{background-image:var(--chat-wallpaper);background-size:cover;background-position:center;background-attachment:local;}

/* ── Inline Site-Text edit mode ── */
body.st-edit-mode [data-st]{cursor:text !important;outline:1.5px dashed transparent;outline-offset:3px;border-radius:4px;transition:outline-color .15s,background .15s;}
body.st-edit-mode [data-st]:hover{outline-color:var(--gold);background:rgba(184,146,74,.12);}
body.st-edit-mode [data-st][contenteditable="true"]{outline:2px solid var(--gold) !important;background:rgba(184,146,74,.18);box-shadow:0 0 0 4px rgba(184,146,74,.15);}
#st-edit-banner{position:fixed;top:0;left:50%;transform:translateX(-50%);background:var(--gold);color:white;padding:10px 18px;z-index:9999;border-radius:0 0 14px 14px;display:none;align-items:center;gap:14px;font-family:'DM Sans',sans-serif;font-size:13px;box-shadow:0 4px 16px rgba(184,146,74,.4);animation:stBannerIn .3s cubic-bezier(.16,1,.3,1);}
#st-edit-banner.show{display:flex;}
@keyframes stBannerIn{from{transform:translate(-50%,-100%);}to{transform:translate(-50%,0);}}
#st-edit-banner .dot{width:8px;height:8px;border-radius:50%;background:white;animation:lcPulse 1.5s infinite;}
#st-edit-banner button{background:white;color:var(--gold);border:none;padding:6px 14px;border-radius:100px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;letter-spacing:.5px;}
#st-edit-banner button:hover{transform:scale(1.04);}
.chat-reaction-legacy{
  display:flex;align-items:center;gap:4px;
  background:var(--c2);border:1px solid var(--b);
  border-radius:100px;padding:3px 9px;
  font-size:13px;cursor:pointer;transition:all .15s;
  color:var(--ink2);
}
.chat-reaction:hover,.chat-reaction.mine{background:rgba(184,146,74,.1);border-color:var(--gold);}
.chat-reaction span{font-size:11px;font-weight:600;color:var(--ink3);}
/* Time */
.chat-time{font-size:10px;color:rgba(0,0,0,.4);padding:0 4px;align-self:flex-end;white-space:nowrap;display:none;}
body.dark .chat-time{color:rgba(255,255,255,.4);}
.chat-msg:hover .chat-time{display:block;}
.chat-msg.grp-last .chat-time,.chat-msg.grp-alone .chat-time{display:block;opacity:0;transition:opacity .15s;}
.chat-msg.grp-last:hover .chat-time,.chat-msg.grp-alone:hover .chat-time{opacity:1;}
/* iMessage chat background — slight neutral */
#chat-msgs{background:var(--c);}
body.dark #chat-msgs{background:var(--c);}
/* Hover action buttons */
.chat-msg-actions{
  position:absolute;right:8px;top:-16px;
  display:flex;gap:2px;
  background:var(--c);border:1px solid var(--b);
  border-radius:100px;padding:4px 6px;
  opacity:0;transform:translateY(4px);
  transition:opacity .18s cubic-bezier(.16,1,.3,1),transform .18s cubic-bezier(.16,1,.3,1);
  box-shadow:0 4px 16px rgba(0,0,0,.12);
  z-index:5;
}
.chat-msg.mine .chat-msg-actions{right:auto;left:8px;}
.chat-action-btn{
  background:none;border:none;cursor:pointer;
  color:var(--ink3);font-size:14px;padding:2px 4px;
  border-radius:6px;transition:all .15s;display:flex;align-items:center;
}
.chat-action-btn:hover{color:var(--gold);background:rgba(184,146,74,.08);}

/* ── iMessage Tapback popup ───────────────────────────────── */
#tapback-popup{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.04);backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);display:none;}
#tapback-popup.show{display:block;animation:tapbackBg .2s ease;}
@keyframes tapbackBg{from{opacity:0;}to{opacity:1;}}
.tapback-bubble{position:absolute;background:rgba(255,255,255,.98);border:1px solid rgba(0,0,0,.06);box-shadow:0 12px 40px rgba(0,0,0,.18),0 4px 12px rgba(0,0,0,.08);border-radius:100px;padding:6px 8px;display:flex;gap:2px;align-items:center;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transform-origin:bottom center;}
body.dark .tapback-bubble{background:rgba(40,32,24,.97);border-color:rgba(255,255,255,.08);}
#tapback-popup.show .tapback-bubble{animation:tapbackPopIn .35s cubic-bezier(.34,1.56,.64,1);}
@keyframes tapbackPopIn{0%{opacity:0;transform:scale(.55) translateY(20px);}60%{opacity:1;transform:scale(1.05) translateY(-2px);}100%{opacity:1;transform:scale(1) translateY(0);}}
.tapback-emoji{width:42px;height:42px;border:none;background:none;border-radius:50%;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:transform .15s cubic-bezier(.34,1.56,.64,1),background .12s;opacity:0;animation:tapbackEmojiIn .3s cubic-bezier(.34,1.56,.64,1) forwards;}
#tapback-popup.show .tapback-emoji:nth-child(1){animation-delay:.06s;}
#tapback-popup.show .tapback-emoji:nth-child(2){animation-delay:.09s;}
#tapback-popup.show .tapback-emoji:nth-child(3){animation-delay:.12s;}
#tapback-popup.show .tapback-emoji:nth-child(4){animation-delay:.15s;}
#tapback-popup.show .tapback-emoji:nth-child(5){animation-delay:.18s;}
#tapback-popup.show .tapback-emoji:nth-child(6){animation-delay:.21s;}
#tapback-popup.show .tapback-emoji:nth-child(7){animation-delay:.24s;}
@keyframes tapbackEmojiIn{0%{opacity:0;transform:scale(.4) translateY(8px);}60%{opacity:1;transform:scale(1.12);}100%{opacity:1;transform:scale(1) translateY(0);}}
.tapback-emoji:hover{transform:scale(1.2);background:rgba(0,0,0,.05);}
body.dark .tapback-emoji:hover{background:rgba(255,255,255,.08);}
.tapback-emoji.picked{background:rgba(184,146,74,.18);}
.tapback-emoji.picked:hover{background:rgba(184,146,74,.28);}
.tapback-more{font-size:22px;color:var(--ink2);position:relative;}
.tapback-more::after{content:'+';position:absolute;bottom:5px;right:5px;font-size:11px;font-weight:700;background:var(--gold);color:white;width:14px;height:14px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--c);box-sizing:border-box;}
body.dark .tapback-more::after{border-color:#332C20;}
/* Press feedback on bubbles */
.chat-bubble.pressing{transform:scale(.97);opacity:.85;transition:transform .15s,opacity .15s;}

/* Swipe-to-reply (WhatsApp style — always swipe right, icon appears on left) */
.chat-msg{position:relative;}
.chat-bubble-wrap{will-change:transform;transition:transform .14s cubic-bezier(.4,0,.2,1);}
.chat-msg.swiping .chat-bubble-wrap{transition:none;}
.chat-msg.committed .chat-bubble-wrap{transition:transform .22s cubic-bezier(.34,1.56,.64,1);}
.swipe-reply-icon{
  position:absolute;top:50%;left:8px;transform:translateY(-50%) scale(.4);
  width:34px;height:34px;border-radius:50%;background:var(--gold);color:white;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .15s,transform .2s cubic-bezier(.34,1.56,.64,1),background .15s;
  box-shadow:0 2px 8px rgba(184,146,74,.4);
}
.swipe-reply-icon.armed{background:#4CAF50;transform:translateY(-50%) scale(1.1);box-shadow:0 2px 12px rgba(76,175,80,.5);}

/* Reactors bottom sheet (WhatsApp style) */
#reactors-popup{position:fixed;inset:0;z-index:402;background:rgba(0,0,0,.45);display:none;align-items:flex-end;justify-content:center;animation:tapbackBg .2s ease;}
@media(min-width:900px){#reactors-popup{align-items:center;}}
#reactors-popup.show{display:flex;}
.reactors-box{background:var(--c);border-radius:18px 18px 0 0;width:100%;max-width:520px;max-height:70vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 -12px 40px rgba(0,0,0,.25);animation:sheetUp .28s cubic-bezier(.16,1,.3,1);position:relative;}
@media(min-width:900px){.reactors-box{border-radius:18px;animation:tapbackPopIn .25s cubic-bezier(.34,1.56,.64,1);}}
@keyframes sheetUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.reactors-box::before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:36px;height:4px;background:rgba(0,0,0,.18);border-radius:2px;}
@media(min-width:900px){.reactors-box::before{display:none;}}
.reactors-hdr{padding:22px 20px 0;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.reactors-hdr-ttl{font-size:18px;font-weight:600;color:var(--ink);}
.reactors-tabs{padding:14px 20px 10px;display:flex;gap:8px;border-bottom:1px solid var(--b);flex-shrink:0;overflow-x:auto;}
.reactors-tab{flex-shrink:0;padding:7px 12px;border-radius:100px;background:var(--c2);border:1px solid var(--b);font-size:13px;color:var(--ink2);cursor:pointer;display:inline-flex;align-items:center;gap:5px;font-family:inherit;transition:all .15s;}
.reactors-tab.active{background:var(--gold);color:white;border-color:var(--gold);}
.reactors-tab .em{font-size:15px;}
.reactors-tab .ct{font-size:12px;font-weight:500;}
.reactors-list{flex:1;overflow-y:auto;padding:6px 0;}
.reactors-row{display:flex;align-items:center;gap:12px;padding:10px 20px;cursor:pointer;transition:background .12s;}
.reactors-row:hover{background:var(--c2);}
.reactors-row .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold2));color:white;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;overflow:hidden;flex-shrink:0;}
.reactors-row .av img{width:100%;height:100%;object-fit:cover;}
.reactors-row .nm{flex:1;font-size:15px;color:var(--ink);}
.reactors-row .nm small{display:block;color:var(--ink3);font-size:12px;margin-top:2px;}
.reactors-row .em{font-size:24px;}
.reactors-row.remove-row{color:#B03030;border-top:1px solid var(--b);margin-top:6px;padding-top:14px;font-weight:500;}
.reactors-row.remove-row .av{background:transparent;color:#B03030;font-size:18px;}
/* Full emoji picker — when opened from tapback */
.emoji-picker.from-tapback{position:fixed!important;z-index:401;}
/* Reply bar */
/* WhatsApp-style reply bar — sits just above the input, compact card */
#chat-reply-bar{
  display:none;
  align-items:stretch;gap:0;
  background:var(--c2);
  border-radius:10px;
  margin:6px 12px 0;
  padding:8px 10px 8px 12px;flex-shrink:0;
  position:relative;
  overflow:hidden;
  animation:replyBarIn .25s cubic-bezier(.16,1,.3,1);
  border:1px solid var(--b);
}
@keyframes replyBarIn{from{opacity:0;transform:translateY(8px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}}
#chat-reply-bar.show{display:flex;}
#chat-reply-bar::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:4px;background:var(--gold);
}
#chat-reply-info{
  flex:1;min-width:0;
  padding:0 8px;display:flex;flex-direction:column;justify-content:center;line-height:1.3;
}
#chat-reply-info .rh{font-size:12px;color:var(--gold);font-weight:600;margin-bottom:1px;}
#chat-reply-name{font-weight:600;color:var(--gold);}
#chat-reply-info .rp{font-size:13px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
#chat-reply-cancel{
  background:none;border:none;color:var(--ink3);font-size:14px;
  cursor:pointer;line-height:1;padding:0;width:26px;height:26px;border-radius:50%;
  align-self:center;display:flex;align-items:center;justify-content:center;
  transition:all .15s;flex-shrink:0;
}
#chat-reply-cancel:hover{background:rgba(0,0,0,.08);color:var(--ink);}
body.dark #chat-reply-cancel:hover{background:rgba(255,255,255,.08);}
/* Input area */
#chat-input-area{
  display:flex;align-items:flex-end;gap:6px;
  padding:8px 12px 12px;
  border-top:1px solid var(--b);
  background:var(--c);flex-shrink:0;
}
#chat-inp{
  flex:1;background:var(--c);border:1.5px solid var(--b);
  border-radius:21px;padding:9px 14px;
  font-size:15px;color:var(--ink);outline:none;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','DM Sans',sans-serif;resize:none;
  max-height:120px;overflow-y:auto;line-height:1.35;
  transition:border-color .2s;
  letter-spacing:-.01em;
}
#chat-inp:focus{border-color:var(--gold);}
#chat-inp::placeholder{color:rgba(0,0,0,.35);}
body.dark #chat-inp::placeholder{color:rgba(255,255,255,.35);}
.chat-inp-btn{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:none;cursor:pointer;flex-shrink:0;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),opacity .15s,color .15s;
}
#chat-photo-btn{background:none;color:var(--ink2);}
#chat-photo-btn:hover{color:var(--gold);}
#chat-emoji-btn{background:none;color:var(--ink2);}
#chat-emoji-btn:hover{color:var(--gold);}

/* === Apple-style emoji picker (full panel) === */
#emoji-picker{
  position:absolute;bottom:62px;right:12px;
  width:340px;max-width:calc(100vw - 24px);
  height:340px;
  background:var(--c);border:1px solid var(--b);
  border-radius:18px;
  box-shadow:0 14px 42px rgba(0,0,0,.14),0 2px 8px rgba(0,0,0,.06);
  z-index:60;
  display:flex;flex-direction:column;
  overflow:hidden;
  animation:epFadeIn .12s ease;
}
#emoji-picker.hidden{display:none;}
@keyframes epFadeIn{from{opacity:0;transform:translateY(6px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}
body.dark #emoji-picker{background:#1c1c1e;border-color:rgba(255,255,255,.08);box-shadow:0 14px 42px rgba(0,0,0,.5);}

.ep-search{
  position:relative;padding:10px 12px 6px;flex-shrink:0;
  border-bottom:1px solid var(--b);
}
.ep-search svg{position:absolute;left:22px;top:18px;color:var(--ink3);}
#ep-search-inp{
  width:100%;
  background:var(--c2);border:none;outline:none;
  border-radius:10px;padding:8px 12px 8px 32px;
  font-size:13.5px;color:var(--ink);
  font-family:inherit;
}
#ep-search-inp::placeholder{color:var(--ink3);}
body.dark #ep-search-inp{background:#2c2c2e;color:#fff;}

#ep-grid{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:8px 8px 4px;
  display:grid;grid-template-columns:repeat(8,1fr);
  gap:2px;
  align-content:start;
}
.ep-cell{
  width:36px;height:36px;
  background:none;border:none;border-radius:8px;
  font-size:24px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  padding:0;transition:background .1s;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
.ep-cell:hover{background:var(--c2);}
.ep-cell:active{transform:scale(.88);}
body.dark .ep-cell:hover{background:rgba(255,255,255,.07);}

.ep-empty{
  grid-column:1/-1;text-align:center;
  padding:40px 20px;color:var(--ink3);font-size:13px;
}

#ep-tabs{
  display:flex;justify-content:space-around;align-items:center;
  padding:6px 8px;gap:2px;
  border-top:1px solid var(--b);
  background:var(--c);flex-shrink:0;
}
.ep-tab{
  width:30px;height:30px;border-radius:7px;
  background:none;border:none;cursor:pointer;
  font-size:17px;opacity:.55;
  display:flex;align-items:center;justify-content:center;
  transition:all .12s;padding:0;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
.ep-tab:hover{opacity:1;background:var(--c2);}
.ep-tab.active{opacity:1;background:var(--gold);}
body.dark .ep-tab:hover{background:rgba(255,255,255,.07);}

/* Mobile: full-width docked at bottom */
@media (max-width:600px){
  #emoji-picker{
    right:0;left:0;bottom:0;width:auto;max-width:none;
    height:48vh;border-radius:18px 18px 0 0;
  }
  #ep-grid{grid-template-columns:repeat(9,1fr);}
  .ep-cell{width:auto;height:38px;font-size:26px;}
}
#chat-send-btn{
  background:var(--gold);color:white;width:34px;height:34px;
}
#chat-send-btn svg{width:15px;height:15px;}
#chat-send-btn:hover{transform:scale(1.08);}
#chat-send-btn:active{transform:scale(.92);}
#chat-mic-btn{background:none;color:var(--ink2);}
#chat-mic-btn:hover{color:var(--gold);}
/* Mic ↔ Send swap (driven by JS, see updateSendMicSwap) */
#chat-send-btn{opacity:0;transform:scale(.4);pointer-events:none;width:0;padding:0;overflow:hidden;}
#chat-input-area.has-text #chat-send-btn{opacity:1;transform:scale(1);pointer-events:auto;width:34px;padding:initial;overflow:visible;}
#chat-input-area.has-text #chat-mic-btn{opacity:0;transform:scale(.4);pointer-events:none;width:0;overflow:hidden;}
/* Emoji picker */
.emoji-picker{
  position:absolute;bottom:calc(100% + 8px);
  background:var(--c);border:1px solid var(--b);
  border-radius:16px;padding:10px;
  display:flex;gap:6px;flex-wrap:wrap;max-width:220px;
  box-shadow:0 8px 24px rgba(0,0,0,.1);z-index:20;
  animation:lbSlideUp .15s ease;
}
.emoji-btn{
  width:36px;height:36px;border-radius:8px;
  background:none;border:none;font-size:18px;
  cursor:pointer;transition:background .12s;display:flex;align-items:center;justify-content:center;
}
.emoji-btn:hover{background:var(--c2);}
/* Mobile */
@media(max-width:600px){
  #chat-tab{height:calc(100vh - 66px - 56px);}
  .chat-bubble-wrap{max-width:82%;}
}


/* Comment emoji picker */
.cmt-emoji-picker{
  position:absolute;bottom:calc(100% + 6px);left:0;
  background:var(--c);border:1px solid var(--b);
  border-radius:14px;padding:8px;
  display:flex;flex-wrap:wrap;gap:4px;width:220px;
  box-shadow:0 8px 24px rgba(0,0,0,.15);z-index:50;
}
.cmt-emoji-opt{
  width:34px;height:34px;border-radius:8px;
  background:none;border:none;font-size:18px;
  cursor:pointer;transition:background .1s;
  display:flex;align-items:center;justify-content:center;
}
.cmt-emoji-opt:hover{background:var(--c2);}
#cmt-emoji-btn{
  background:none;border:none;cursor:pointer;
  font-size:18px;padding:4px 6px;border-radius:8px;
  color:var(--ink3);transition:all .15s;flex-shrink:0;
}
#cmt-emoji-btn:hover{color:var(--gold);background:rgba(184,146,74,.08);}
#lb-cmts-footer{position:relative;}

/* ─── Video / Audio call UI ─── */
#incall-incoming{
  position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-150%);
  z-index:1000;display:none;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
#incall-incoming.show{display:block;transform:translateX(-50%) translateY(0);}
.incall-card{
  background:var(--c);border:1px solid var(--b);border-radius:18px;
  padding:18px 22px;display:flex;flex-direction:column;align-items:center;gap:8px;
  box-shadow:0 8px 32px rgba(0,0,0,.25);
  width:300px;font-family:'DM Sans',sans-serif;
}
.incall-av{
  width:72px;height:72px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  display:flex;align-items:center;justify-content:center;color:white;font-size:24px;font-weight:600;overflow:hidden;
  animation:incomingPulse 1.5s infinite;
}
.incall-av img{width:100%;height:100%;object-fit:cover;}
@keyframes incomingPulse{0%,100%{box-shadow:0 0 0 0 rgba(184,146,74,.5);}50%{box-shadow:0 0 0 14px rgba(184,146,74,0);}}
.incall-name{font-family:'Playfair Display',serif;font-size:18px;color:var(--ink);}
.incall-sub{font-size:12px;color:var(--ink3);}
.incall-actions{display:flex;gap:14px;margin-top:8px;}
.incall-btn{width:52px;height:52px;border-radius:50%;border:none;color:white;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s;}
.incall-btn:hover{transform:scale(1.08);}
.incall-btn.accept{background:#4CAF50;animation:acceptPulse 1.5s infinite;}
.incall-btn.decline{background:#E53935;}
@keyframes acceptPulse{0%,100%{box-shadow:0 0 0 0 rgba(76,175,80,.5);}50%{box-shadow:0 0 0 12px rgba(76,175,80,0);}}

/* Full-screen active call */
#incall-active{
  position:fixed;inset:0;z-index:999;
  display:none;background:#000;color:white;
  font-family:'DM Sans',sans-serif;
  animation:fadeIn .25s;
}
#incall-active.show{display:block;}
#incall-remote-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#1a1a1a;}
#incall-remote-placeholder{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:linear-gradient(135deg,#1a1411,#2a2018);
}
.incall-big-av{width:130px;height:130px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold2));display:flex;align-items:center;justify-content:center;color:white;font-size:44px;font-weight:600;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.4);}
.incall-big-av img{width:100%;height:100%;object-fit:cover;}
.incall-big-name{font-family:'Playfair Display',serif;font-size:28px;color:white;}
.incall-status{font-size:14px;color:rgba(255,255,255,.6);letter-spacing:.5px;}
#incall-local-video{position:absolute;bottom:110px;right:20px;width:160px;height:120px;border-radius:14px;object-fit:cover;background:#111;box-shadow:0 4px 16px rgba(0,0,0,.4);border:2px solid rgba(255,255,255,.1);}
#incall-active.video-off #incall-remote-video,
#incall-active.audio-only #incall-remote-video{display:none;}
#incall-active:not(.video-off):not(.audio-only) #incall-remote-placeholder{display:none;}
#incall-active.cam-off #incall-local-video{display:none;}
#incall-active.audio-only #incall-local-video{display:none;}
/* ─── Premium call-control bar ─── */
#incall-controls{
  position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
  display:flex;gap:6px;
  background:linear-gradient(180deg,rgba(28,24,20,.78),rgba(14,10,7,.85));
  backdrop-filter:blur(28px) saturate(140%);-webkit-backdrop-filter:blur(28px) saturate(140%);
  padding:8px;border-radius:100px;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 20px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);
}
.incall-ctrl{
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.05);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s cubic-bezier(.2,.8,.3,1), background .15s, color .15s, box-shadow .15s, border-color .15s;
  position:relative;
}
.incall-ctrl svg{width:19px;height:19px;}
.incall-ctrl > *{pointer-events:none;} /* let the click land on the button itself */
.incall-ctrl::after{
  /* subtle inner highlight ring for that AirPods-pill feel */
  content:'';position:absolute;inset:1px;border-radius:50%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 45%);
}
.incall-ctrl:hover{background:rgba(255,255,255,.13);transform:translateY(-1px) scale(1.04);border-color:rgba(255,255,255,.12);}
.incall-ctrl:active{transform:translateY(0) scale(.96);}
.incall-ctrl.off{
  background:#f5f1ea;color:#1a1411;border-color:rgba(0,0,0,.06);
  box-shadow:0 4px 16px rgba(245,241,234,.18);
}
.incall-ctrl.off:hover{background:#fff;}
.incall-ctrl.hangup{
  background:linear-gradient(180deg,#ED4646,#C62828);color:white;border-color:transparent;
  box-shadow:0 6px 18px rgba(229,57,53,.45);
}
.incall-ctrl.hangup svg{transform:rotate(135deg);}
.incall-ctrl.hangup:hover{background:linear-gradient(180deg,#F25555,#D63232);box-shadow:0 8px 24px rgba(229,57,53,.6);}
/* Tooltips on hover */
.incall-ctrl[title]{position:relative;}
.incall-ctrl[title]:hover::before{
  content:attr(title);
  position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.85);color:white;font-size:11px;font-weight:500;letter-spacing:.2px;
  padding:5px 10px;border-radius:6px;white-space:nowrap;pointer-events:none !important;
  font-family:'DM Sans',sans-serif;
  animation:tipIn .15s ease-out;
  z-index:2;
}
@keyframes tipIn{from{opacity:0;transform:translateX(-50%) translateY(2px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}

/* (mobile call-UI block moved to end of file so it overrides desktop rules) */

/* Call-settings admin pane */
.cs-toggles{display:flex;flex-direction:column;padding:6px 0;}
.cs-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 18px;border-top:1px solid var(--b);
}
.cs-row:first-child{border-top:none;}
.cs-info{flex:1;min-width:0;}
.cs-name{font-size:14px;font-weight:500;color:var(--ink);}
.cs-desc{font-size:11.5px;color:var(--ink3);margin-top:2px;line-height:1.35;}
.cs-sel{width:180px;flex-shrink:0;margin:0;font-size:13px;padding:7px 10px;}
.cs-num{width:90px;flex-shrink:0;margin:0;text-align:right;font-variant-numeric:tabular-nums;font-size:13px;padding:7px 10px;}

#incall-timer{
  position:absolute;top:24px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  padding:6px 14px;border-radius:100px;font-size:13px;color:white;font-variant-numeric:tabular-nums;
}

/* ─── Group call grid (live room) ─── */
#incall-grid{display:none;}
#incall-active.group-call #incall-remote-video,
#incall-active.group-call #incall-remote-placeholder,
#incall-active.group-call #incall-local-video{display:none !important;}
#incall-active.group-call #incall-grid{
  display:grid;position:absolute;inset:0;
  padding:48px 16px 120px;gap:10px;
  grid-auto-rows:1fr;
  background:linear-gradient(135deg,#0e0a07,#1a1411);
}
#incall-grid.count-1{grid-template-columns:1fr;}
#incall-grid.count-2{grid-template-columns:1fr 1fr;}
#incall-grid.count-3,
#incall-grid.count-4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;}
#incall-grid.count-5,
#incall-grid.count-6{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;}
.incall-tile{
  position:relative;background:#1a1a1a;border-radius:18px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 18px rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.06);
  isolation:isolate;
}
/* WhatsApp/FaceTime style cam-off layer: centered circular avatar + full name beneath.
   The video element sits on top — when frames arrive, it covers this stage. */
.incall-tile .tile-stage{
  position:absolute;inset:0;z-index:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(14px, 3vh, 28px);
  background:linear-gradient(135deg,#1a1411,#2a2018);
  padding:6%;
}
.incall-tile .tile-pic{
  width:clamp(72px, 38%, 240px);aspect-ratio:1;
  border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  box-shadow:0 8px 32px rgba(0,0,0,.35);
  flex-shrink:0;
}
.incall-tile .tile-pic img{width:100%;height:100%;object-fit:cover;}
.incall-tile .tile-pic-initials{
  font-family:'Playfair Display',serif;
  font-size:clamp(22px, 6vw, 64px);font-weight:600;color:white;letter-spacing:.5px;
}
.incall-tile .tile-fullname{
  font-family:'Playfair Display',serif;
  font-size:clamp(14px, 2.4vw, 30px);color:white;letter-spacing:.2px;
  text-align:center;line-height:1.1;
  text-shadow:0 2px 12px rgba(0,0,0,.45);
}
.incall-tile video{
  position:relative;z-index:1;
  width:100%;height:100%;object-fit:cover;background:transparent;
}
.incall-tile.self video{transform:scaleX(-1);} /* mirror self preview */
/* Camera explicitly off or audio-only: hide video element so the stage layer is visible */
.incall-tile.cam-off video{display:none;}
/* The small bottom-left label is redundant when the big centered name is showing */
.incall-tile.cam-off .tile-name{display:none;}
#incall-active.group-call.audio-only .incall-tile .tile-name{display:none;}
/* Status icons in upper-right of tile (mic-off, cam-off) */
.incall-tile .tile-icons{
  position:absolute;top:8px;right:8px;z-index:2;
  display:flex;gap:5px;
}
.incall-tile .tile-icon{
  width:26px;height:26px;border-radius:50%;
  background:rgba(0,0,0,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  color:white;
}
.incall-tile .tile-icon svg{width:14px;height:14px;}
/* Active-speaker glow */
.incall-tile.speaking{
  outline:3px solid #4caf50;outline-offset:-3px;
  box-shadow:0 0 0 4px rgba(76,175,80,.25),0 4px 18px rgba(0,0,0,.3);
}
.incall-tile .tile-name{
  position:absolute;bottom:8px;left:8px;
  background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:white;font-size:11.5px;font-weight:500;letter-spacing:.2px;
  padding:4px 9px;border-radius:8px;pointer-events:none;
}
#incall-active.group-call.audio-only .incall-tile video{display:none;}

/* ─── Live-room banner in group chat ─── */
#chat-room-banner{
  display:none;align-items:center;gap:12px;
  margin:0 16px 8px;padding:10px 12px 10px 14px;
  background:linear-gradient(135deg,#fff8eb,#fff3d6);
  border:1px solid rgba(184,146,74,.25);
  border-radius:14px;
  font-family:'DM Sans',sans-serif;
  animation:fadeIn .2s;
}
#chat-room-banner.show{display:flex;}
body.dark #chat-room-banner{background:linear-gradient(135deg,#2a2014,#3a2a18);border-color:rgba(184,146,74,.35);}
#chat-room-banner .rb-left{display:flex;align-items:center;gap:11px;flex:1;min-width:0;}
#chat-room-banner .rb-dot{
  width:10px;height:10px;border-radius:50%;background:#E53935;flex-shrink:0;
  box-shadow:0 0 0 0 rgba(229,57,53,.55);
  animation:roomPulse 1.4s infinite;
}
@keyframes roomPulse{0%{box-shadow:0 0 0 0 rgba(229,57,53,.55);}70%{box-shadow:0 0 0 8px rgba(229,57,53,0);}100%{box-shadow:0 0 0 0 rgba(229,57,53,0);}}
#chat-room-banner .rb-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;}
#chat-room-banner .rb-txt b{font-size:13px;color:var(--ink);font-weight:600;letter-spacing:-.1px;}
#chat-room-banner .rb-txt span{font-size:11.5px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
body.dark #chat-room-banner .rb-txt b{color:#fff;}
body.dark #chat-room-banner .rb-txt span{color:rgba(255,255,255,.65);}
#chat-room-banner .rb-join{
  background:var(--gold);color:white;border:none;border-radius:100px;
  padding:7px 16px;font-size:12.5px;font-weight:600;font-family:'DM Sans',sans-serif;
  cursor:pointer;transition:all .15s;flex-shrink:0;
}
#chat-room-banner .rb-join:hover{background:var(--gold2);transform:scale(1.04);}

/* ─── Call-log message pill (centered in chat) ─── */
.chat-calllog{
  max-width:min(360px,80%);margin:8px auto;
  background:var(--c2,#f7f3ec);border:1px solid var(--b,rgba(0,0,0,.06));
  border-radius:18px;padding:10px 14px;
  font-family:'DM Sans',sans-serif;
  display:flex;flex-direction:column;gap:6px;
  animation:fadeIn .25s;
}
body.dark .chat-calllog{background:#2a2620;border-color:rgba(255,255,255,.08);}
.chat-calllog .cl-row1{
  display:flex;align-items:center;gap:7px;
  font-size:13px;color:var(--ink);
}
.chat-calllog .cl-row1 b{font-weight:600;}
body.dark .chat-calllog .cl-row1{color:#fff;}
.chat-calllog .cl-row1 svg{color:var(--gold);flex-shrink:0;}
.chat-calllog .cl-row2{
  display:flex;align-items:center;gap:8px;
  font-size:11.5px;color:var(--ink3);
}
.chat-calllog .cl-avs{display:flex;}
.chat-calllog .cl-av{
  width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:white;font-size:10px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--c,#fff);
  margin-left:-6px;overflow:hidden;
}
.chat-calllog .cl-av:first-child{margin-left:0;}
.chat-calllog .cl-av img{width:100%;height:100%;object-fit:cover;}
.chat-calllog .cl-av.cl-more{
  background:var(--ink3);color:white;font-size:9px;
}
body.dark .chat-calllog .cl-av{border-color:#2a2620;}
.chat-calllog .cl-names{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Custom confirm modal */
#confirm-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;}
#confirm-modal.show{display:flex !important;animation:fadeIn .15s;}
#confirm-modal .cm-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
#confirm-modal .cm-box{position:relative;background:var(--c);border-radius:16px;padding:24px;max-width:380px;width:90vw;box-shadow:0 24px 64px rgba(0,0,0,.4);font-family:'DM Sans',sans-serif;animation:tapbackPopIn .25s cubic-bezier(.34,1.56,.64,1);}
body.dark #confirm-modal .cm-box{background:#1f1a14;color:white;}
#confirm-modal .cm-title{font-family:'Playfair Display',serif;font-size:20px;font-weight:600;color:var(--ink);margin-bottom:8px;}
body.dark #confirm-modal .cm-title{color:#fff;}
#confirm-modal .cm-body{font-size:14px;color:var(--ink2);line-height:1.5;margin-bottom:20px;white-space:pre-wrap;}
body.dark #confirm-modal .cm-body{color:rgba(255,255,255,.75);}
#confirm-modal .cm-actions{display:flex;gap:10px;justify-content:flex-end;}
#confirm-modal .cm-btn{padding:8px 18px;border-radius:100px;border:none;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;}
#confirm-modal .cm-cancel{background:transparent;color:var(--ink3);}
#confirm-modal .cm-cancel:hover{background:rgba(0,0,0,.05);}
body.dark #confirm-modal .cm-cancel{color:rgba(255,255,255,.6);}
body.dark #confirm-modal .cm-cancel:hover{background:rgba(255,255,255,.08);}
#confirm-modal .cm-confirm{background:var(--gold);color:white;}
#confirm-modal .cm-confirm:hover{background:var(--gold2);}
#confirm-modal .cm-confirm.danger{background:#E53935;}
#confirm-modal .cm-confirm.danger:hover{background:#C62828;}

/* Auto-download OFF placeholder */
.chat-media-placeholder{
  width:200px;height:160px;border-radius:14px;
  background:rgba(0,0,0,.06);border:1px dashed rgba(0,0,0,.12);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;transition:background .15s;
}
.chat-media-placeholder:hover{background:rgba(0,0,0,.1);}
.chat-media-placeholder .cmp-ic{font-size:36px;opacity:.55;}
.chat-media-placeholder .cmp-lbl{font-size:12px;color:var(--ink3);font-weight:500;}
body.dark .chat-media-placeholder{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);}
.chat-calllog{position:relative;}
.chat-calllog .cl-del{
  position:absolute;top:6px;right:6px;
  width:20px;height:20px;border-radius:50%;border:none;
  background:rgba(0,0,0,.08);color:var(--ink3);
  font-size:10px;cursor:pointer;opacity:0;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .15s, background .15s, color .15s;
}
.chat-calllog:hover .cl-del{opacity:1;}
.chat-calllog .cl-del:hover{background:#E53935;color:white;}
body.dark .chat-calllog .cl-del{background:rgba(255,255,255,.1);color:rgba(255,255,255,.5);}

/* ─── Group-call extras: react picker, panels, FX, PiP, network bars ─── */
/* Hide group-only buttons in 1:1 calls */
#incall-active:not(.group-call) .group-only{display:none;}
#incall-controls{flex-wrap:nowrap;gap:10px;}
.incall-ctrl{width:48px;height:48px;}

/* Floating reaction animations */
#incall-fx{position:absolute;inset:0;z-index:600;pointer-events:none;overflow:hidden;}
.incall-fx-emoji{
  position:absolute;bottom:80px;font-size:48px;
  animation:fxFloat 3s ease-out forwards;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.4));
}
@keyframes fxFloat{
  0%{transform:translateY(0) scale(.6) rotate(-8deg);opacity:0;}
  10%{transform:translateY(-20px) scale(1.1) rotate(2deg);opacity:1;}
  80%{transform:translateY(-65vh) scale(1) rotate(-4deg);opacity:1;}
  100%{transform:translateY(-80vh) scale(.85) rotate(0);opacity:0;}
}

/* Reaction picker (pops above the react button) */
#incall-react-picker{
  position:fixed;display:none;z-index:1100;
  background:rgba(28,28,30,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.1);border-radius:100px;
  padding:8px 14px;gap:6px;
  box-shadow:0 12px 36px rgba(0,0,0,.5);
}
#incall-react-picker.show{display:flex;}
#incall-react-picker button{
  width:42px;height:42px;border-radius:50%;border:none;background:transparent;
  font-size:24px;cursor:pointer;transition:transform .1s;
}
#incall-react-picker button:hover{transform:scale(1.25);background:rgba(255,255,255,.1);}

/* Participants panel (right-side drawer) */
#incall-people-panel,#incall-chat-panel{
  position:absolute;top:0;right:0;bottom:0;width:300px;z-index:500;
  background:rgba(20,16,12,.94);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-left:1px solid rgba(255,255,255,.08);
  transform:translateX(100%);transition:transform .25s;
  display:flex;flex-direction:column;color:white;font-family:'DM Sans',sans-serif;
}
#incall-people-panel.show,#incall-chat-panel.show{transform:translateX(0);}
.ip-hdr,.ic-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,.06);
}
.ip-ttl,.ic-ttl{font-size:17px;font-weight:600;font-family:'Playfair Display',serif;}
.ip-close,.ic-close{
  background:rgba(255,255,255,.08);border:none;color:white;
  width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:14px;
}
.ip-list{flex:1;overflow-y:auto;padding:8px 0;}
.ip-row{
  display:flex;align-items:center;gap:11px;padding:9px 16px;
}
.ip-row:hover{background:rgba(255,255,255,.04);}
.ip-av{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  display:flex;align-items:center;justify-content:center;
  color:white;font-size:13px;font-weight:600;overflow:hidden;flex-shrink:0;
}
.ip-av img{width:100%;height:100%;object-fit:cover;}
.ip-info{flex:1;min-width:0;}
.ip-name{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ip-status{font-size:11px;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:6px;margin-top:2px;}
.ip-status .dot{width:5px;height:5px;border-radius:50%;background:#4CAF50;}
.ip-kick{
  background:transparent;border:1px solid rgba(255,255,255,.18);color:#ff8a80;
  padding:5px 10px;border-radius:100px;font-size:11px;cursor:pointer;font-family:inherit;
}
.ip-kick:hover{background:rgba(255,138,128,.15);}

/* In-call chat panel */
.ic-msgs{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:8px;}
.ic-msg{
  background:rgba(255,255,255,.08);border-radius:14px;padding:8px 12px;
  font-size:13px;line-height:1.4;max-width:90%;align-self:flex-start;
}
.ic-msg.mine{align-self:flex-end;background:var(--gold);color:white;}
.ic-msg .ic-from{font-size:11px;color:rgba(255,255,255,.6);margin-bottom:2px;font-weight:500;}
.ic-msg.mine .ic-from{display:none;}
.ic-input{
  display:flex;gap:8px;padding:12px 14px;
  border-top:1px solid rgba(255,255,255,.06);
}
.ic-input input{
  flex:1;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.05);color:white;
  border-radius:100px;padding:9px 14px;font-size:13px;font-family:inherit;outline:none;
}
.ic-input input::placeholder{color:rgba(255,255,255,.4);}
.ic-input input:focus{background:rgba(255,255,255,.12);}
.ic-send{
  width:36px;height:36px;border-radius:50%;background:var(--gold);color:white;border:none;
  cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.ic-send:hover{background:var(--gold2);}

/* Grid shrinks when a side panel is open */
#incall-active.panel-open #incall-grid{right:300px;}

/* Active-speaker auto-promote (counts 3+, with someone featured) */
.incall-grid.speaker-promoted.count-3,
.incall-grid.speaker-promoted.count-4{
  grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;
}
.incall-grid.speaker-promoted.count-3 .incall-tile.featured,
.incall-grid.speaker-promoted.count-4 .incall-tile.featured{
  grid-column:1;grid-row:1 / span 2;
}
.incall-grid.speaker-promoted.count-5,
.incall-grid.speaker-promoted.count-6{
  grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;
}
.incall-grid.speaker-promoted.count-5 .incall-tile.featured,
.incall-grid.speaker-promoted.count-6 .incall-tile.featured{
  grid-column:1;grid-row:1 / span 2;
}

/* Screen-share label on the sharer's tile */
.incall-tile.sharing::before{
  content:'🖥️ Sharing screen';
  position:absolute;top:8px;left:8px;z-index:3;
  background:rgba(0,0,0,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:white;font-size:11px;padding:5px 10px;border-radius:100px;font-weight:500;
}
.incall-tile.sharing video{transform:none !important;} /* no mirror for screens */

/* Background-blur preview on self tile */
.incall-tile.self.bg-blurred video{filter:blur(2px) saturate(1.1);}

/* Network-quality bars (top-left of remote tiles) */
.tile-nq{
  position:absolute;top:8px;left:8px;z-index:2;
  display:flex;align-items:flex-end;gap:2px;height:14px;
  background:rgba(0,0,0,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:3px 5px;border-radius:6px;
}
.tile-nq span{width:3px;background:rgba(255,255,255,.25);border-radius:1px;}
.tile-nq span:nth-child(1){height:4px;}
.tile-nq span:nth-child(2){height:7px;}
.tile-nq span:nth-child(3){height:10px;}
.tile-nq span:nth-child(4){height:13px;}
.tile-nq[data-bars="1"] span:nth-child(1){background:#E53935;}
.tile-nq[data-bars="2"] span:nth-child(-n+2){background:#F9A825;}
.tile-nq[data-bars="3"] span:nth-child(-n+3){background:#4CAF50;}
.tile-nq[data-bars="4"] span{background:#4CAF50;}

/* Minimized PiP — small floating window in bottom-right corner */
#incall-restore{
  display:none;position:absolute;top:8px;right:8px;z-index:10;
  width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.2);color:white;border:none;
  align-items:center;justify-content:center;cursor:pointer;
}
#incall-active.minimized{
  top:auto !important;left:auto !important;
  right:20px !important;bottom:20px !important;
  width:280px !important;height:200px !important;
  border-radius:18px;overflow:hidden;
  box-shadow:0 16px 48px rgba(0,0,0,.5);
  cursor:pointer;
  animation:fadeIn .2s;
}
#incall-active.minimized #incall-controls,
#incall-active.minimized #incall-timer,
#incall-active.minimized .tile-name,
#incall-active.minimized .tile-icons,
#incall-active.minimized .tile-nq,
#incall-active.minimized #incall-people-panel,
#incall-active.minimized #incall-chat-panel,
#incall-active.minimized #incall-react-picker{display:none !important;}
#incall-active.minimized #incall-grid{padding:0;gap:2px;}
#incall-active.minimized #incall-restore{display:flex;}

/* ═══════════════════════════════════════════════════════════
   MOBILE / TOUCH DEVICE LAYOUT  (≤ 900px) — must come AFTER
   the desktop call rules so it cascades correctly.
   ═══════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .incall-ctrl[title]:hover::before{display:none;}
  #incall-controls{
    bottom:calc(20px + env(safe-area-inset-bottom));
    gap:4px;padding:7px;max-width:calc(100vw - 24px);
  }
  .incall-ctrl{width:40px;height:40px;}
  .incall-ctrl svg{width:17px;height:17px;}
  .incall-ctrl.hangup{width:46px;height:46px;}

  #incall-active.group-call #incall-grid{
    padding:calc(56px + env(safe-area-inset-top)) 8px calc(96px + env(safe-area-inset-bottom));
    gap:6px;
  }
  #incall-grid.count-1{grid-template-columns:1fr;grid-template-rows:1fr;}
  #incall-grid.count-2{grid-template-columns:1fr;grid-template-rows:1fr 1fr;}
  #incall-grid.count-3,
  #incall-grid.count-4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;}
  #incall-grid.count-5,
  #incall-grid.count-6{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr;}
  .incall-grid.speaker-promoted.count-3,
  .incall-grid.speaker-promoted.count-4{grid-template-columns:1fr 1fr;grid-template-rows:2fr 1fr;}
  .incall-grid.speaker-promoted.count-3 .incall-tile.featured,
  .incall-grid.speaker-promoted.count-4 .incall-tile.featured{grid-column:1 / span 2;grid-row:1;}
  .incall-grid.speaker-promoted.count-5,
  .incall-grid.speaker-promoted.count-6{grid-template-columns:1fr 1fr 1fr;grid-template-rows:2fr 1fr;}
  .incall-grid.speaker-promoted.count-5 .incall-tile.featured,
  .incall-grid.speaker-promoted.count-6 .incall-tile.featured{grid-column:1 / span 3;grid-row:1;}

  .incall-tile{border-radius:14px;}
  .incall-tile .tile-name{font-size:10.5px;padding:3px 7px;bottom:6px;left:6px;}
  .incall-tile .tile-icons{top:6px;right:6px;gap:4px;}
  .incall-tile .tile-icon{width:22px;height:22px;}
  .incall-tile .tile-icon svg{width:11px;height:11px;}
  .incall-tile .tile-pic{width:clamp(60px, 32%, 140px);}
  .incall-tile .tile-fullname{font-size:clamp(12px, 4vw, 20px);}
  .tile-nq{top:6px;left:6px;height:12px;padding:2px 4px;}
  .tile-nq span{width:2.5px;}

  #incall-timer{top:calc(16px + env(safe-area-inset-top));padding:5px 11px;font-size:12px;}

  /* Side panels become BOTTOM SHEETS */
  #incall-people-panel,#incall-chat-panel{
    top:auto !important;left:0 !important;right:0 !important;bottom:0 !important;width:auto !important;
    height:75vh;max-height:600px;
    border-left:none !important;border-top:1px solid rgba(255,255,255,.08);
    border-radius:24px 24px 0 0;
    transform:translateY(100%);
    padding-bottom:env(safe-area-inset-bottom);
  }
  #incall-people-panel.show,#incall-chat-panel.show{transform:translateY(0) !important;}
  #incall-people-panel::before,#incall-chat-panel::before{
    content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);
    width:38px;height:4px;border-radius:2px;background:rgba(255,255,255,.25);
  }
  .ip-hdr,.ic-hdr{padding-top:24px;}
  #incall-active.panel-open #incall-grid{right:0 !important;}

  #incall-react-picker{
    left:8px !important;right:8px !important;bottom:calc(80px + env(safe-area-inset-bottom)) !important;
    top:auto !important;justify-content:space-around;padding:10px;
  }
  #incall-react-picker button{width:38px;height:38px;font-size:22px;}

  .ic-input{padding:14px;gap:10px;}
  .ic-input input{padding:11px 16px;font-size:15px;}
  .ic-send{width:42px;height:42px;}

  #chat-room-banner{margin:0 10px 8px;padding:9px 10px 9px 12px;}
  #chat-room-banner .rb-txt b{font-size:12px;}
  #chat-room-banner .rb-txt span{font-size:11px;}
  #chat-room-banner .rb-join{padding:6px 13px;font-size:12px;}

  #incall-incoming{padding:0 18px;}
}

@media (max-width:380px){
  #incall-controls{gap:2px;padding:6px;}
  .incall-ctrl{width:36px;height:36px;}
  .incall-ctrl svg{width:15px;height:15px;}
  .incall-ctrl.hangup{width:42px;height:42px;}
}

@media (max-width:900px) and (orientation:landscape) and (max-height:500px){
  #incall-active.group-call #incall-grid{padding:44px 8px 70px;}
  #incall-controls{bottom:10px;padding:5px;}
  .incall-ctrl{width:36px;height:36px;}
  .incall-ctrl.hangup{width:40px;height:40px;}
  #incall-timer{top:10px;}
  #incall-people-panel,#incall-chat-panel{
    top:0 !important;right:0 !important;bottom:0 !important;left:auto !important;
    width:280px !important;height:auto;max-height:none;
    border-radius:0;border-left:1px solid rgba(255,255,255,.08);border-top:none;
    transform:translateX(100%);
  }
  #incall-people-panel.show,#incall-chat-panel.show{transform:translateX(0) !important;}
  #incall-people-panel::before,#incall-chat-panel::before{display:none;}
}

/* In-call: "X is sharing screen" banner */
#incall-share-banner{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  background:rgba(20,180,90,.95);color:white;
  padding:7px 14px;border-radius:100px;
  font-size:12.5px;font-weight:500;letter-spacing:.2px;
  display:flex;align-items:center;gap:7px;
  z-index:60;
  box-shadow:0 4px 14px rgba(0,0,0,.28);
  animation:shareBannerIn .25s cubic-bezier(.16,1,.3,1);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',sans-serif;
}
@keyframes shareBannerIn{from{opacity:0;transform:translate(-50%,-8px);}to{opacity:1;transform:translate(-50%,0);}}
#incall-share-banner svg{flex-shrink:0;}

/* Screen-share button active state */
#incall-screen.active{
  background:#14B45A !important;color:white !important;
  box-shadow:0 0 0 3px rgba(20,180,90,.25);
}

/* ════════════════════════════════════════════════════════════════ */
/*  CHAT POLISH — bug fixes, refined typography, mobile UX          */
/* ════════════════════════════════════════════════════════════════ */

/* Make chat-main relative so the jump button can position inside it */
#chat-main{position:relative;}

/* Sticky header so you always see who you're talking to while scrolling */
#chat-header{
  position:sticky;top:0;z-index:5;
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  backdrop-filter:saturate(180%) blur(10px);
}

/* Date dividers tighter + with a subtle separator line */
.chat-date{
  position:relative;display:flex;align-items:center;justify-content:center;
  gap:14px;margin:22px 4px 8px;
  font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--ink3);font-weight:600;
}
.chat-date::before,.chat-date::after{
  content:'';flex:1;height:1px;display:block !important;
  background:linear-gradient(to right,transparent,var(--b),transparent);
  max-width:90px;
}
.chat-date b{font-weight:600;letter-spacing:.5px;color:var(--ink3);}

/* Timestamp under bubble — show on hover/last only, cleaner spacing */
.chat-time{
  font-size:10.5px;color:var(--ink3);
  padding:2px 4px 0;letter-spacing:.2px;
  opacity:0;height:0;overflow:hidden;
  transition:opacity .15s,height .15s;
}
.chat-msg.grp-last .chat-time,
.chat-msg.grp-alone .chat-time,
body.chat-always-ts .chat-time{
  opacity:.85;height:auto;padding-bottom:2px;
}
.chat-msg.mine .chat-time{text-align:right;}

/* Floating jump-to-bottom button */
#chat-jump-btn{
  position:absolute;bottom:78px;left:50%;
  transform:translate(-50%, 16px) scale(.9);
  background:var(--c);border:1px solid var(--b);
  color:var(--ink2);
  width:auto;min-width:38px;height:38px;
  border-radius:100px;padding:0 12px;
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:12px;font-weight:600;font-family:inherit;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(26,20,16,.14);
  opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s cubic-bezier(.16,1,.3,1);
  z-index:5;
}
#chat-jump-btn.show{
  opacity:1;pointer-events:auto;
  transform:translate(-50%, 0) scale(1);
}
#chat-jump-btn:hover{background:var(--gold);color:white;border-color:var(--gold);}
#chat-jump-btn #chat-jump-count{
  font-variant-numeric:tabular-nums;
}
#chat-jump-btn #chat-jump-count:empty{display:none;}
#chat-jump-btn.has-new{background:var(--gold);color:white;border-color:var(--gold);}
body.dark #chat-jump-btn{background:#2c2c2e;border-color:rgba(255,255,255,.08);color:#fff;}

/* Send button transition cleaner — single transition declaration */
#chat-send-btn{transition:transform .12s cubic-bezier(.34,1.56,.64,1);}
#chat-send-btn:active{transform:scale(.92);}

/* Chev menu — always visible on touch devices (no hover) */
@media (hover:none) and (pointer:coarse){
  .chat-msg-chev{opacity:.55 !important;}
}

/* Better empty state */
.chat-empty-state{
  padding:60px 20px;
}
.chat-empty-state svg{
  width:64px;height:64px;opacity:.18;
  margin-bottom:18px;
  color:var(--gold);
}
.chat-empty-state > div{
  font-size:14px;line-height:1.55;max-width:280px;
}
.chat-empty-state::after{
  content:'';display:block;height:0;
}

/* Fix mobile sidebar slide — was breaking because display:none kills transitions */
@media(max-width:768px){
  /* Don't hide chat-main while sliding, just move it offscreen */
  body:not(.chat-conv-active) #chat-main{
    display:flex !important;transform:translateX(100%);
  }
  body.chat-conv-active #chat-main{transform:translateX(0);}
  #chat-main{transition:transform .28s cubic-bezier(.16,1,.3,1);}

  /* Search input collapses to icon-trigger on mobile */
  #chat-search-wrap{width:34px;transition:width .2s;}
  #chat-search-wrap:focus-within{width:160px;}
  #chat-search-wrap:focus-within #chat-search-inp{padding-left:30px;}
  #chat-search-wrap:not(:focus-within) #chat-search-inp{
    padding:6px 0;background:transparent;border-color:transparent;
    cursor:pointer;color:transparent;
  }
  #chat-search-wrap:not(:focus-within) #chat-search-inp::placeholder{color:transparent;}

  /* Looser bubble width on phones */
  .chat-bubble-wrap{max-width:82%;}

  /* Chat input area — generous safe-area padding */
  #chat-input-area{
    padding:8px 10px calc(12px + env(safe-area-inset-bottom)) 10px;
  }

  /* Larger touch targets on input buttons */
  .chat-inp-btn{width:38px;height:38px;}
  #chat-inp{padding:11px 15px;font-size:16px;}  /* 16px prevents iOS zoom-on-focus */

  /* Jump button — clear of safe area */
  #chat-jump-btn{bottom:calc(86px + env(safe-area-inset-bottom));}

  /* Conv sidebar slides fully */
  #chat-sidebar{width:100%;}
}

/* Slightly tighter group spacing — less air between consecutive messages */
.chat-msg{margin-top:1px;}
.chat-msg.grp-first,.chat-msg.grp-alone{margin-top:10px;}
.chat-msg:first-child{margin-top:0;}

/* Bubble shadow — barely-there for "lift" off the page */
.chat-bubble{
  box-shadow:0 1px 1px rgba(0,0,0,.04);
}
body.dark .chat-bubble{box-shadow:0 1px 1px rgba(0,0,0,.2);}
.chat-msg.mine .chat-bubble{
  box-shadow:0 1px 1px rgba(184,146,74,.20);
}

/* Smoother bubble-pop on receive — gentler, less bounce */
@keyframes bubblePop{
  0%{opacity:0;transform:scale(.85) translateY(8px);}
  100%{opacity:1;transform:scale(1) translateY(0);}
}
.chat-msg.msg-pop .chat-bubble{animation-duration:.28s !important;}

/* Reply preview: bigger left bar, tighter text */
.chat-reply-preview{padding:7px 12px 8px 16px;border-radius:12px;}
.chat-reply-preview::before{width:3.5px;}
.chat-reply-name{font-size:11.5px;}
.chat-reply-preview-text{font-size:12.5px;color:var(--ink3);}
.chat-msg.mine .chat-reply-preview-text{color:rgba(255,255,255,.85);}

/* Photo in chat: nicer corners + smoother loading */
.chat-photo{
  max-width:280px;border-radius:16px;
  transition:transform .12s;
  border:none;
}
.chat-photo:hover{transform:scale(1.01);}

/* Reaction pill: tighter and floating just outside the bubble */
.chat-reactions{
  bottom:-12px;
  background:var(--c);border:1px solid var(--b);
  box-shadow:0 2px 6px rgba(0,0,0,.10);
  height:24px;padding:0 8px;
}
body.dark .chat-reactions{background:#2c2c2e;border-color:rgba(255,255,255,.06);}

/* Status label cleaner */
.chat-status-label{font-size:10.5px;color:var(--ink3);opacity:.65;letter-spacing:.2px;}

/* Conversation list row hover/active polish */
.chat-conv{transition:background .12s;}
.chat-conv.active{background:rgba(184,146,74,.10);}
body.dark .chat-conv.active{background:rgba(184,146,74,.18);}

/* ════════════════════════════════════════════════════════════════ */
/*  CALLS POLISH — refined visuals, mobile, states                  */
/* ════════════════════════════════════════════════════════════════ */

/* Incoming-call card: cleaner typography + safer mobile positioning */
#incall-incoming{top:max(20px, env(safe-area-inset-top, 0px));}
.incall-card{
  padding:22px 24px;width:320px;max-width:calc(100vw - 24px);
  border-radius:22px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 24px 60px rgba(0,0,0,.32),
    0 4px 12px rgba(0,0,0,.16);
}
.incall-card .incall-name{
  font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;
  font-size:22px;letter-spacing:-.005em;line-height:1.1;margin-top:4px;
}
.incall-card .incall-sub{font-size:12px;letter-spacing:.3px;margin-bottom:4px;}
.incall-card .incall-btn{width:56px;height:56px;}
.incall-card .incall-actions{gap:18px;margin-top:12px;}
.incall-btn.decline{background:linear-gradient(180deg,#F25555,#D63232);box-shadow:0 6px 18px rgba(229,57,53,.42);}
.incall-btn.decline:hover{box-shadow:0 8px 22px rgba(229,57,53,.55);}
.incall-btn.accept{background:linear-gradient(180deg,#4FC15A,#3D9748);box-shadow:0 6px 18px rgba(76,175,80,.42);}
.incall-btn.accept:hover{box-shadow:0 8px 22px rgba(76,175,80,.55);}

/* Big avatar pulse during calling/connecting */
#incall-active.calling .incall-big-av,
#incall-active.audio-only .incall-big-av{
  animation:bigAvPulse 2s infinite ease-in-out;
}
@keyframes bigAvPulse{
  0%,100%{box-shadow:0 8px 32px rgba(0,0,0,.4), 0 0 0 0 rgba(184,146,74,.5);}
  50%{box-shadow:0 8px 32px rgba(0,0,0,.4), 0 0 0 24px rgba(184,146,74,0);}
}

/* Call status text — typing-style ellipsis animation when connecting */
.incall-status{
  font-size:13.5px;color:rgba(255,255,255,.75);
  letter-spacing:.4px;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','DM Sans',sans-serif;
}
.incall-status::after{
  content:'';display:inline-block;width:0;
  animation:statusDots 1.5s infinite steps(4);
}
@keyframes statusDots{
  0%{content:'';}25%{content:'.';}50%{content:'..';}75%{content:'...';}100%{content:'';}
}
/* Only animate dots while the status reads "Calling" / "Connecting" / "Ringing" */
#incall-active:not(.calling):not(.audio-only) .incall-status::after{
  animation:none;content:'';
}

/* Local-video PiP: rounder, more polished, lift when hovering */
#incall-local-video{
  width:172px;height:128px;
  border-radius:16px;
  border:2px solid rgba(255,255,255,.12);
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  transition:transform .2s,border-color .2s;
}
#incall-local-video:hover{
  transform:scale(1.03);border-color:rgba(255,255,255,.25);
}

/* Control bar: pill more pronounced, lift on hover of any button */
#incall-controls{
  padding:9px;gap:7px;
  border-radius:100px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 1px 1px rgba(0,0,0,.1),
    0 22px 56px rgba(0,0,0,.5);
}
.incall-ctrl{width:48px;height:48px;}
.incall-ctrl svg{width:20px;height:20px;}

/* "Off" state for camera/mic — clearer red diagonal line */
.incall-ctrl.off{position:relative;}
.incall-ctrl.off::before{
  content:'';position:absolute;
  top:50%;left:6px;right:6px;height:2px;
  background:#E53935;border-radius:2px;
  transform:rotate(-45deg);transform-origin:center;
  pointer-events:none;
}

/* Active-state for blur, hand-raise (matches green screen-share button) */
.incall-ctrl.active:not(.hangup):not(#incall-screen){
  background:rgba(184,146,74,.85);color:white;
  border-color:transparent;
  box-shadow:0 0 0 3px rgba(184,146,74,.25), 0 4px 14px rgba(184,146,74,.4);
}

/* Hangup gets a bigger, more confident size */
.incall-ctrl.hangup{width:56px;}

/* In-call timer pill */
#incall-timer{
  position:absolute;top:max(20px, env(safe-area-inset-top, 0px) + 14px);
  left:50%;transform:translateX(-50%);
  background:rgba(28,24,20,.78);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  backdrop-filter:blur(20px) saturate(140%);
  color:white;padding:6px 14px;border-radius:100px;
  font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;
  letter-spacing:.5px;
  border:1px solid rgba(255,255,255,.08);
  z-index:60;
}

/* Participant tile — softer corners, clearer name pill */
.incall-tile{
  border-radius:16px;
  overflow:hidden;position:relative;
  background:#1a1411;
  transition:outline-offset .2s, outline-color .2s, box-shadow .2s;
}
.incall-tile.featured{
  outline:2.5px solid var(--gold);outline-offset:-2.5px;
  box-shadow:0 0 0 4px rgba(184,146,74,.18);
}
.incall-tile.speaking{
  outline:2.5px solid #4CAF50;outline-offset:-2.5px;
  box-shadow:0 0 0 4px rgba(76,175,80,.25);
}
.incall-tile .tile-name{
  background:rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-radius:8px;
  padding:4px 10px;font-size:11.5px;font-weight:500;
  letter-spacing:.2px;
}

/* In-call chat panel — match the participants panel polish */
#incall-chat-panel,
#incall-people-panel{
  background:rgba(28,24,20,.92);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  backdrop-filter:blur(24px) saturate(160%);
  border-left:1px solid rgba(255,255,255,.06);
  color:white;
}
.ic-msgs{padding:14px;}
.ic-input{padding:12px;gap:8px;border-top:1px solid rgba(255,255,255,.06);}
.ic-input input{
  flex:1;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.05);color:white;
  border-radius:100px;padding:10px 16px;font-size:14px;
  font-family:inherit;outline:none;transition:border-color .15s,background .15s;
}
.ic-input input:focus{
  background:rgba(255,255,255,.12);border-color:rgba(184,146,74,.5);
}
.ic-input input::placeholder{color:rgba(255,255,255,.4);}
.ic-send{
  width:40px;height:40px;border-radius:50%;
  background:var(--gold);color:white;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:transform .15s,background .15s;
}
.ic-send:hover{background:#A07F3F;transform:scale(1.05);}
.ic-send:active{transform:scale(.94);}

/* Reaction picker — Apple-style horizontal emoji bar */
#incall-react-picker{
  position:absolute;
  background:rgba(28,24,20,.92);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  backdrop-filter:blur(24px) saturate(160%);
  border:1px solid rgba(255,255,255,.06);
  border-radius:100px;padding:8px;
  display:none;gap:4px;
  box-shadow:0 12px 32px rgba(0,0,0,.5);
  z-index:50;
}
#incall-react-picker.show{display:flex;}
#incall-react-picker button{
  width:42px;height:42px;border-radius:50%;border:none;
  background:transparent;font-size:24px;cursor:pointer;
  transition:transform .12s,background .12s;
}
#incall-react-picker button:hover{
  background:rgba(255,255,255,.1);transform:scale(1.18);
}

/* Restore button (when minimized) */
#incall-restore{
  position:absolute;top:8px;right:8px;
  width:30px;height:30px;border-radius:50%;
  background:rgba(0,0,0,.5);color:white;border:none;cursor:pointer;
  display:none;align-items:center;justify-content:center;
  z-index:60;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.1);
}
#incall-active.minimized #incall-restore{display:flex;}
#incall-active.minimized #incall-controls,
#incall-active.minimized #incall-timer{display:none;}
#incall-active.minimized{
  width:280px !important;height:180px !important;
  border-radius:18px !important;overflow:hidden;
  box-shadow:0 14px 36px rgba(0,0,0,.45);
  cursor:pointer;
}

/* ── Mobile call polish ────────────────────────────────────── */
@media (max-width:600px){
  .incall-card{padding:20px;width:auto;}
  .incall-card .incall-btn{width:60px;height:60px;}
  .incall-big-av{width:110px;height:110px;font-size:38px;}
  .incall-big-name{font-size:24px;}
  #incall-local-video{
    width:108px;height:140px;
    bottom:calc(96px + env(safe-area-inset-bottom));right:14px;
    border-radius:14px;
  }
}