/* ============================================================================
   Altgram calls — call window, incoming card, pills. Dark theme.
   ========================================================================== */

/* ------------------------------ overlay --------------------------------- */
/* The fullscreen call window is always dark — re-pin dark tokens inside it
   so the light theme does not make text unreadable on the dark backdrop. */
.call-overlay{
  --panel:#18181D; --panel-2:#1E1E24; --hover:#26262E;
  --text:#F5F4F1; --text-2:#A2A3AB; --muted:#74757D;
  --border:rgba(255,255,255,.07);
  position:fixed;inset:0;z-index:50;display:flex;
  background:rgba(12,12,15,.97);
  animation:callFadeIn .25s ease;
}
@keyframes callFadeIn{from{opacity:0}to{opacity:1}}
.call-overlay.minimized{
  opacity:0;pointer-events:none;
}
.call-main{flex:1;display:flex;flex-direction:column;min-width:0}

/* ------------------------------ head ------------------------------------ */
.call-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;gap:12px;flex-shrink:0;
}
.call-head-info{min-width:0}
.call-title{
  color:var(--text);font-weight:600;font-size:16px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.call-head-sub{display:flex;align-items:center;gap:10px;margin-top:2px}
.call-timer{color:var(--text-2);font-size:12.5px;font-variant-numeric:tabular-nums;
  font-family:var(--font-mono)}
.call-rec-badge{
  display:inline-flex;align-items:center;gap:5px;color:var(--danger);
  font-size:12px;font-weight:700;letter-spacing:.5px;
}
.call-rec-dot{
  width:8px;height:8px;border-radius:50%;background:var(--danger);
  animation:callBlink 1s infinite;
}
@keyframes callBlink{0%,100%{opacity:1}50%{opacity:.25}}
.call-min-btn{width:38px;height:38px}

/* ------------------------------ grid / tiles ---------------------------- */
.call-grid{
  flex:1;display:grid;gap:8px;padding:0 12px;min-height:0;
  grid-template-columns:1fr;align-items:stretch;
}
.call-grid[data-count="2"]{grid-template-columns:repeat(2,1fr)}
.call-grid[data-count="3"],
.call-grid[data-count="4"]{grid-template-columns:repeat(2,1fr)}
.call-grid[data-count="5"],
.call-grid[data-count="6"],
.call-grid[data-count="7"],
.call-grid[data-count="8"],
.call-grid[data-count="9"]{grid-template-columns:repeat(3,1fr)}

.call-tile{
  position:relative;background:var(--panel);border-radius:var(--radius);
  overflow:hidden;min-height:120px;
  transition:box-shadow .2s;
  animation:callTileIn .3s ease;
}
@keyframes callTileIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
.call-tile.reconnecting{box-shadow:inset 0 0 0 2px var(--danger)}
.call-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background:#000;
}
.call-video.mirror{transform:scaleX(-1)}
.call-tile.novideo .call-video{visibility:hidden}
.call-tile-ava{
  position:absolute;inset:0;display:none;place-items:center;
  background:var(--panel-2);
}
.call-tile.novideo .call-tile-ava{display:grid}
.call-tile-ava .call-ava{
  width:88px;height:88px;border-radius:50%;font-size:32px;
  display:grid;place-items:center;color:#fff;font-weight:600;
  position:relative;z-index:1;overflow:hidden;
}
.call-tile-ava .call-ava img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* pulse rings while ringing */
.call-pulse{position:absolute;width:88px;height:88px;border-radius:50%;pointer-events:none}
.call-tile.calling .call-pulse::before,
.call-tile.calling .call-pulse::after,
.call-overlay.ringing .call-tile.calling .call-pulse::before{content:''}
.call-tile.calling .call-pulse::before,
.call-tile.calling .call-pulse::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--accent);animation:callRing 1.8s ease-out infinite;
}
.call-tile.calling .call-pulse::after{animation-delay:.9s}
@keyframes callRing{
  0%{transform:scale(1);opacity:.9}
  100%{transform:scale(2.1);opacity:0}
}

.call-tile-label{
  position:absolute;left:8px;bottom:8px;z-index:2;max-width:calc(100% - 16px);
  display:flex;align-items:center;gap:6px;
  background:rgba(17,17,20,.72);border-radius:8px;padding:4px 9px;
  color:#F5F4F1;font-size:12.5px;backdrop-filter:blur(4px);
}
.call-tile-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.call-mute-ico{color:var(--danger);display:inline-flex;flex-shrink:0}
.call-share-badge{
  flex-shrink:0;background:var(--accent);color:#fff;border-radius:5px;
  padding:1px 5px;font-size:10.5px;font-weight:600;
}
.call-tile-state{color:var(--text-2);font-size:11.5px;white-space:nowrap}

/* 1:1 layout: remote full screen, local as PiP */
.call-overlay.duo .call-grid{display:block;position:relative}
.call-overlay.duo .call-tile{width:100%;height:100%}
.call-overlay.duo .call-tile[data-uid="me"]{
  position:absolute;right:24px;bottom:24px;width:26%;max-width:220px;
  min-width:130px;height:auto;aspect-ratio:4/3;min-height:0;
  box-shadow:0 6px 24px rgba(0,0,0,.5);border:1px solid var(--panel-2);
  z-index:3;
}
.call-overlay.duo .call-tile[data-uid="me"] .call-tile-ava .call-ava{
  width:52px;height:52px;font-size:20px;
}

/* ------------------------------ controls -------------------------------- */
.call-controls{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:16px 12px 20px;flex-wrap:wrap;flex-shrink:0;
}
.call-ctl{
  width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
  background:var(--panel-2);color:var(--text);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s,transform .1s,color .15s;position:relative;
}
.call-ctl:hover{background:var(--hover)}
.call-ctl:active{transform:scale(.93)}
.call-ctl.active{background:var(--accent);color:#FFF7F0}
.call-ctl.off{background:#F5F4F1;color:#111114}
.call-ctl.recording{background:var(--danger);color:#fff;animation:callRecPulse 1.6s infinite}
@keyframes callRecPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.5)}
  50%{box-shadow:0 0 0 8px rgba(229,72,77,0)}
}
.call-ctl-danger,.call-hangup{background:var(--danger);color:#fff}
.call-ctl-danger:hover,.call-hangup:hover{background:#c73a3f}
.call-chat-dot{
  position:absolute;top:6px;right:6px;width:10px;height:10px;border-radius:50%;
  background:var(--danger);border:2px solid var(--panel);
}

/* ------------------------------ in-call chat ---------------------------- */
.call-chat{
  width:320px;flex-shrink:0;display:none;flex-direction:column;
  background:var(--panel);border-left:1px solid var(--panel-2);
}
.call-overlay.chat-open .call-chat{display:flex;animation:callChatIn .2s ease}
@keyframes callChatIn{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.call-chat-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;color:var(--text);font-weight:600;
  border-bottom:1px solid var(--panel-2);flex-shrink:0;
}
.call-chat-close{width:34px;height:34px}
.call-chat-msgs{flex:1;overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:10px}
.call-msg{max-width:100%}
.call-msg-meta{display:flex;align-items:baseline;gap:8px}
.call-msg-name{color:var(--accent);font-size:12.5px;font-weight:600}
.call-msg.own .call-msg-name{color:var(--green)}
.call-msg-time{color:var(--muted);font-size:11px}
.call-msg-text{color:var(--text);font-size:13.5px;word-break:break-word;white-space:pre-wrap;margin-top:2px}
.call-msg-file{color:var(--text-2);font-size:13px;margin-top:2px}
.call-chat-form{
  display:flex;gap:8px;padding:10px;border-top:1px solid var(--panel-2);flex-shrink:0;
}
.call-chat-input{
  flex:1;min-width:0;background:var(--panel-2);border:none;border-radius:10px;
  padding:10px 12px;color:var(--text);font-size:14px;outline:none;
}
.call-chat-input:focus{box-shadow:0 0 0 2px var(--accent)}
.call-chat-send{
  width:42px;height:42px;border:none;border-radius:10px;cursor:pointer;
  background:var(--accent);color:#fff;display:grid;place-items:center;flex-shrink:0;
}
.call-chat-send:hover{filter:brightness(1.1)}

/* ------------------------------ incoming card --------------------------- */
.call-incoming{
  position:fixed;top:18px;right:18px;z-index:55;
  display:flex;align-items:center;gap:14px;
  background:var(--panel);border:1px solid var(--panel-2);
  border-radius:16px;padding:14px 16px;
  box-shadow:0 12px 40px rgba(0,0,0,.55);
  animation:callSlideIn .3s cubic-bezier(.2,.9,.3,1.2);
  max-width:min(400px,calc(100vw - 24px));
}
@keyframes callSlideIn{from{transform:translateY(-24px);opacity:0}to{transform:none;opacity:1}}
.call-incoming-ava{position:relative;width:52px;height:52px;flex-shrink:0;display:grid;place-items:center}
.call-incoming-ava .call-ava{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-weight:600;font-size:18px;overflow:hidden;position:relative;z-index:1;
}
.call-incoming-ava .call-ava img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.call-incoming-ava .call-pulse{width:52px;height:52px}
.call-incoming-ava .call-pulse::before,
.call-incoming-ava .call-pulse::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--green);animation:callRing 1.6s ease-out infinite;
}
.call-incoming-ava .call-pulse::after{animation-delay:.8s}
.call-incoming-info{min-width:0;flex:1}
.call-incoming-name{
  color:var(--text);font-weight:600;font-size:15px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.call-incoming-kind{color:var(--text-2);font-size:12.5px;margin-top:2px}
.call-incoming-btns{display:flex;gap:10px;flex-shrink:0}
.call-accept,.call-decline{
  width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  display:grid;place-items:center;color:#fff;
  transition:transform .1s,filter .15s;
}
.call-accept:hover,.call-decline:hover{filter:brightness(1.12)}
.call-accept:active,.call-decline:active{transform:scale(.92)}
.call-accept{background:var(--green);animation:callAcceptPulse 1.4s infinite}
@keyframes callAcceptPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(52,199,123,.55)}
  60%{box-shadow:0 0 0 10px rgba(52,199,123,0)}
}
.call-decline{background:var(--danger)}

/* ------------------------------ minimized pill -------------------------- */
.call-pill{
  position:fixed;right:18px;bottom:18px;z-index:55;cursor:pointer;
  display:flex;align-items:center;gap:10px;
  background:var(--panel);border:1px solid var(--accent);
  border-radius:999px;padding:10px 16px;color:var(--text);
  box-shadow:0 8px 28px rgba(0,0,0,.5);
  animation:callSlideUp .25s ease;
}
@keyframes callSlideUp{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}
.call-pill:hover{background:var(--hover)}
.call-pill-icon{color:var(--green);display:inline-flex;animation:callBlink 2s infinite}
.call-pill-title{font-weight:600;font-size:13.5px;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.call-pill-timer{color:var(--text-2);font-size:12px;font-variant-numeric:tabular-nums;
  font-family:var(--font-mono)}
.call-pill-rec{width:9px;height:9px;border-radius:50%;background:var(--danger);animation:callBlink 1s infinite}

/* ------------------------------ rejoin pill ----------------------------- */
.call-rejoin{
  position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:45;
  display:flex;align-items:center;gap:10px;cursor:pointer;
  background:var(--panel);border:1px solid var(--green);
  border-radius:999px;padding:9px 14px;color:var(--text);
  box-shadow:0 8px 28px rgba(0,0,0,.5);
  animation:callSlideUp .25s ease;
}
.call-rejoin:hover{background:var(--hover)}
.call-rejoin-text{display:flex;flex-direction:column;min-width:0}
.call-rejoin-title{font-weight:600;font-size:13.5px;color:var(--green)}
.call-rejoin-sub{color:var(--text-2);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.call-rejoin-x{
  width:28px;height:28px;border:none;border-radius:50%;background:transparent;
  color:var(--muted);cursor:pointer;display:grid;place-items:center;flex-shrink:0;
}
.call-rejoin-x:hover{background:var(--panel-2);color:var(--text)}
.call-rejoin-x svg{width:16px;height:16px}

/* ------------------------------ invite modal ---------------------------- */
.call-invite{display:flex;flex-direction:column;gap:10px;min-width:min(340px,72vw)}
.call-invite-input{
  background:var(--panel-2);border:none;border-radius:10px;padding:10px 12px;
  color:var(--text);font-size:14px;outline:none;width:100%;
}
.call-invite-input:focus{box-shadow:0 0 0 2px var(--accent)}
.call-invite-list{max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.call-invite-row{
  display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:10px;
}
.call-invite-row:hover{background:var(--hover)}
.call-invite-ava{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;display:grid;
  place-items:center;color:#fff;font-weight:600;font-size:14px;overflow:hidden;
}
.call-invite-ava img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.call-invite-name{flex:1;min-width:0;color:var(--text);font-size:14px}
.call-invite-name>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.call-invite-username{color:var(--muted);font-size:12px}
.call-invite-btn{
  border:none;border-radius:8px;background:var(--accent);color:#fff;
  padding:7px 12px;font-size:13px;cursor:pointer;flex-shrink:0;
}
.call-invite-btn:hover{filter:brightness(1.1)}
.call-invite-in{color:var(--muted);font-size:12.5px;flex-shrink:0}
.call-invite-empty{color:var(--muted);font-size:13.5px;text-align:center;padding:14px 0}

/* ------------------------------ join confirm ---------------------------- */
.call-join-confirm{color:var(--text)}
.call-join-q{font-size:15px;font-weight:600}
.call-join-sub{color:var(--text-2);font-size:13px;margin-top:6px}

/* ------------------------------ responsive ------------------------------ */
@media (max-width:760px){
  .call-chat{
    position:absolute;inset:0;width:100%;z-index:5;border-left:none;
  }
  .call-overlay.duo .call-tile[data-uid="me"]{right:12px;bottom:12px;width:34%}
  .call-grid[data-count="3"],
  .call-grid[data-count="4"]{grid-template-columns:1fr}
  .call-grid[data-count="5"],
  .call-grid[data-count="6"],
  .call-grid[data-count="7"],
  .call-grid[data-count="8"],
  .call-grid[data-count="9"]{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:420px){
  .call-controls{gap:8px;padding:12px 8px 16px}
  .call-ctl{width:44px;height:44px}
  .call-incoming{top:10px;right:10px;left:10px;max-width:none;padding:12px}
  .call-incoming-btns{gap:8px}
  .call-accept,.call-decline{width:40px;height:40px}
  .call-pill{right:10px;bottom:10px;padding:9px 13px}
  .call-pill-title{max-width:100px}
  .call-grid{padding:0 8px;gap:6px}
  .call-tile{min-height:96px}
}