/* ============================================================================
   CloudCX — Softphone PWA  ·  premium dark telecom UI
   Brand: Bricolage Grotesque (display) · Hanken Grotesk (body) · JetBrains Mono
   Signal gradient: #6366F1 → #4F7BF2 → #22D3EE on deep ink.
   ============================================================================ */

:root{
  --bg:#0A0F1C; --bg-2:#0E1424; --bg-3:#121A2B;
  --panel:rgba(255,255,255,.04); --panel-2:rgba(255,255,255,.065); --panel-3:rgba(255,255,255,.09);
  --ink:#E6EDFB; --ink-soft:#AEBBD6; --muted:#7C8AA8; --muted-2:#54617E;
  --line:rgba(255,255,255,.085); --line-2:rgba(255,255,255,.05);

  --c1:#6366F1; --c2:#4F7BF2; --c3:#22D3EE;
  --grad:linear-gradient(118deg,#6366F1 0%,#4F7BF2 54%,#22D3EE 100%);
  --grad-soft:linear-gradient(118deg,rgba(99,102,241,.18),rgba(34,211,238,.12));
  --glow:0 14px 40px -10px rgba(79,123,242,.55), 0 0 0 1px rgba(34,211,238,.25) inset;

  --ok:#19C28A; --warn:#E6A53A; --bad:#F1556C; --hold:#22D3EE;

  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --sans:"Hanken Grotesk",ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  --railw:248px; --topbarh:62px; --r:14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--sans); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(120% 90% at 100% -10%, rgba(79,123,242,.16), transparent 46%),
    radial-gradient(100% 80% at -10% 0%, rgba(99,102,241,.12), transparent 42%),
    radial-gradient(120% 120% at 50% 120%, rgba(34,211,238,.12), transparent 50%);
  background-attachment:fixed;
}
[hidden]{display:none!important}
button{font-family:inherit; color:inherit; cursor:pointer}
svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:.02em}
input,textarea{font-family:inherit}

/* faint grid texture overlay */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:56px 56px; mask-image:radial-gradient(130% 100% at 70% 0%,#000,transparent 78%);
}

/* ============================ LOGIN GATE ============================ */
.login-gate{position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:24px; background:radial-gradient(120% 90% at 50% -10%,#13203a,#0A0F1C 60%)}
.lg-aura{position:absolute; width:520px; height:520px; border-radius:50%; background:var(--grad); filter:blur(120px); opacity:.32; pointer-events:none}
.lg-card{position:relative; width:100%; max-width:380px; background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03)); border:1px solid var(--line); border-radius:22px; padding:34px 30px; backdrop-filter:blur(20px) saturate(140%); box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.lg-brand{display:flex; align-items:center; gap:11px}
.lg-orb,.brand-orb,.lg-foot::before{width:26px; height:26px; border-radius:9px; background:var(--grad); box-shadow:var(--glow); flex:none}
.lg-word,.brand-word{font-family:var(--display); font-weight:700; font-size:21px; letter-spacing:-.02em}
.lg-word b,.brand-word b{font-weight:800; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.lg-tag{margin:14px 0 22px; color:var(--muted); font-size:13.5px}
.fld{display:block; margin-bottom:14px}
.fld span{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:7px}
.fld input{width:100%; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:11px; padding:12px 14px; color:var(--ink); font-size:15px; transition:border-color .2s, background .2s}
.fld input:focus{outline:none; border-color:var(--c2); background:rgba(79,123,242,.08); box-shadow:0 0 0 3px rgba(79,123,242,.15)}
.btn-signal{width:100%; margin-top:6px; border:none; border-radius:12px; padding:13px; font-weight:700; font-size:14.5px; color:#fff; background:var(--grad); box-shadow:var(--glow); transition:transform .15s, filter .2s}
.btn-signal:hover{transform:translateY(-1px); filter:brightness(1.07)}
.btn-signal:active{transform:translateY(0) scale(.99)}
.btn-link{display:block; width:100%; margin-top:10px; background:none; border:none; color:var(--muted); font-size:13px}
.btn-link:hover{color:var(--ink)}
.lg-otp-hint{color:var(--ink-soft); font-size:13.5px; margin:0 0 18px}
.lg-err{margin-top:14px; color:var(--bad); font-size:13px; min-height:1em; text-align:center}
.lg-foot{position:relative; color:var(--muted-2); font-size:11.5px; font-family:var(--mono); letter-spacing:.04em}

/* ============================ APP LAYOUT ============================ */
.app{position:relative; z-index:1; display:grid; grid-template-columns:var(--railw) 1fr; height:100dvh}

/* ---- rail ---- */
.rail{position:relative; display:flex; flex-direction:column; padding:18px 14px; background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015)); border-right:1px solid var(--line); backdrop-filter:blur(8px)}
.rail-brand{display:flex; align-items:center; gap:11px; padding:6px 8px 22px}
.brand-word{font-size:19px}
.nav{display:flex; flex-direction:column; gap:3px}
.nav-item{position:relative; display:flex; align-items:center; gap:12px; padding:11px 13px; border:none; background:transparent; border-radius:11px; color:var(--ink-soft); font-weight:600; font-size:14.5px; text-align:left; transition:background .16s, color .16s}
.nav-item .ni{width:19px; height:19px; flex:none; opacity:.85}
.nav-item:hover{background:var(--panel); color:var(--ink)}
.nav-item.active{background:var(--grad-soft); color:#fff}
.nav-item.active::before{content:""; position:absolute; left:-14px; top:50%; transform:translateY(-50%); width:3px; height:22px; border-radius:0 3px 3px 0; background:var(--grad)}
.nav-item.active .ni{opacity:1; color:var(--c1)}
.nav-badge{margin-left:auto; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--bad); color:#fff; font-family:var(--mono); font-size:10.5px; font-style:normal; display:grid; place-items:center}

.rail-foot{margin-top:auto; padding-top:14px; position:relative}
.presence{display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:13px; background:var(--panel); transition:border-color .2s}
.presence:hover{border-color:var(--line); background:var(--panel-2)}
.pa{width:34px; height:34px; border-radius:10px; background:var(--grad); display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:13px; color:#fff; flex:none}
.pi{display:flex; flex-direction:column; gap:1px; min-width:0; text-align:left}
.pi b{font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pstatus{font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:var(--muted); display:flex; align-items:center; gap:5px}
.pstatus::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--muted)}
.pstatus[data-s="available"]::before{background:var(--ok); box-shadow:0 0 7px var(--ok)}
.pstatus[data-s="away"]::before{background:var(--warn)}
.pstatus[data-s="dnd"]::before{background:var(--bad)}
.pstatus[data-s="oncall"]::before{background:var(--c2); box-shadow:0 0 7px var(--c2)}
.caret{width:15px; height:15px; margin-left:auto; color:var(--muted); flex:none}
.presence-menu{position:absolute; bottom:62px; left:0; right:0; background:var(--bg-3); border:1px solid var(--line); border-radius:13px; padding:6px; box-shadow:0 24px 60px -20px rgba(0,0,0,.85); z-index:20}
.presence-menu button{display:flex; align-items:center; gap:9px; width:100%; padding:9px 11px; border:none; background:none; border-radius:9px; color:var(--ink-soft); font-size:13.5px; font-weight:600; text-align:left}
.presence-menu button:hover{background:var(--panel-2); color:var(--ink)}
.presence-menu hr{border:none; border-top:1px solid var(--line); margin:5px 4px}
.presence-menu .danger{color:var(--bad)}
.presence-menu .dot{width:9px; height:9px; border-radius:50%}
.dot.s-available{background:var(--ok)} .dot.s-away{background:var(--warn)} .dot.s-dnd{background:var(--bad)}

/* ---- main ---- */
.main{display:flex; flex-direction:column; min-width:0; height:100dvh}
.topbar{display:flex; align-items:center; gap:14px; height:var(--topbarh); padding:0 24px; border-bottom:1px solid var(--line-2); background:rgba(11,18,32,.6); backdrop-filter:blur(12px)}
.menu-btn{display:none; width:38px; height:38px; border:1px solid var(--line); border-radius:10px; background:var(--panel); align-items:center; justify-content:center}
.menu-btn svg{width:18px; height:18px}
.crumb .ttl{font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:-.01em}
.crumb .sub{font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; color:var(--muted)}
.sip-status{display:inline-flex; align-items:center; gap:8px; margin-left:auto; padding:7px 12px; border-radius:11px; border:1px solid var(--line); background:var(--panel)}
.sip-status .sd{width:8px; height:8px; border-radius:50%; background:var(--muted); flex:none; transition:background .25s, box-shadow .25s}
.sip-status .sl{font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; color:var(--ink-soft); white-space:nowrap}
.sip-status[data-state="connecting"]{border-color:rgba(230,165,58,.4); background:rgba(230,165,58,.08)}
.sip-status[data-state="connecting"] .sd{background:var(--warn); box-shadow:0 0 8px var(--warn); animation:pulse 1.4s infinite}
.sip-status[data-state="registered"]{border-color:rgba(25,194,138,.4); background:rgba(25,194,138,.08)}
.sip-status[data-state="registered"] .sd{background:var(--ok); box-shadow:0 0 8px var(--ok)}
.sip-status[data-state="incall"]{border-color:rgba(79,123,242,.45); background:rgba(79,123,242,.1)}
.sip-status[data-state="incall"] .sd{background:var(--c2); box-shadow:0 0 9px var(--c2); animation:pulse 1.2s infinite}
.sip-status[data-state="failed"]{border-color:rgba(241,85,108,.35)}
.sip-status[data-state="failed"] .sd{background:var(--bad); box-shadow:0 0 8px rgba(241,85,108,.6)}
.sip-status[data-state="off"]{opacity:.55}

/* ---- panes ---- */
.panes{position:relative; flex:1; min-height:0; overflow:hidden}
.pane{position:absolute; inset:0; overflow:auto; padding:26px; opacity:0; pointer-events:none; transition:opacity .22s}
.pane.active{opacity:1; pointer-events:auto}

/* ============================ PHONE PANE ============================ */
.dialer{max-width:360px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:18px; padding:8px 0 24px}

.callcard{position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; padding:6px 0 4px; width:100%}
.cc-ring{position:absolute; top:-6px; width:104px; height:104px; border-radius:50%; background:conic-gradient(from 0deg, var(--c1), var(--c2), var(--c3), var(--c1)); opacity:0; transition:opacity .3s; -webkit-mask:radial-gradient(closest-side, transparent 70%, #000 72%); mask:radial-gradient(closest-side, transparent 70%, #000 72%)}
.cc-avatar{position:relative; width:92px; height:92px; border-radius:50%; background:linear-gradient(180deg,var(--bg-3),var(--bg-2)); border:1px solid var(--line); display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:30px; color:var(--ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.cc-name{font-family:var(--display); font-weight:700; font-size:21px; letter-spacing:-.01em; margin-top:6px; text-align:center}
.cc-meta{display:flex; align-items:center; gap:10px; min-height:18px}
.cc-state{font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--muted)}
.cc-timer{font-size:13px; color:var(--c1); font-weight:600}

/* calling / ringing / on-call ring states (driven by data-call-state on #pane-phone) */
#pane-phone[data-call-state="calling"] .cc-ring,
#pane-phone[data-call-state="ringing"] .cc-ring{opacity:1; animation:spin 2.4s linear infinite}
#pane-phone[data-call-state="established"] .cc-ring{opacity:.9}
#pane-phone[data-call-state="established"] .cc-state{color:var(--ok)}

.numwrap{position:relative; width:100%}
#dialDisplay{width:100%; text-align:center; background:transparent; border:none; border-bottom:1px solid var(--line); color:var(--ink); font-size:27px; font-weight:500; padding:10px 36px; letter-spacing:.04em}
#dialDisplay::placeholder{color:var(--muted-2); font-family:var(--sans); font-size:17px; letter-spacing:0}
#dialDisplay:focus{outline:none; border-color:var(--c2)}
.bksp{position:absolute; right:0; top:50%; transform:translateY(-50%); width:34px; height:34px; border:none; background:none; color:var(--muted); display:grid; place-items:center; border-radius:9px}
.bksp svg{width:20px; height:20px}
.bksp:hover{color:var(--ink); background:var(--panel)}

.keypad{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; width:100%}
.key{aspect-ratio:1/.82; border:1px solid var(--line); border-radius:16px; background:var(--panel); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; transition:background .12s, transform .07s, border-color .15s}
.key:hover{background:var(--panel-2); border-color:var(--line)}
.key:active{transform:scale(.94); background:var(--grad-soft); border-color:rgba(79,123,242,.5)}
.key .d{font-family:var(--display); font-size:24px; font-weight:700; line-height:1; color:var(--ink)}
.key .l{font-family:var(--mono); font-size:8.5px; letter-spacing:.18em; color:var(--muted); height:10px}

.actions{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; width:100%; margin-top:4px}
.act-spacer{visibility:hidden}
.act-video{justify-self:end; width:54px; height:54px; border:1px solid var(--line); border-radius:50%; background:var(--panel); color:var(--ink-soft); display:grid; place-items:center; transition:all .18s}
.act-video svg{width:22px; height:22px}
.act-video:hover{border-color:var(--c2); color:#fff}
.act-video[aria-pressed="true"]{background:var(--grad-soft); border-color:var(--c2); color:var(--c1)}
.act-call{justify-self:center; display:grid; place-items:center; width:76px; height:76px; border:none; border-radius:50%; background:var(--ok); color:#fff; box-shadow:0 14px 34px -10px rgba(25,194,138,.65); transition:transform .15s, filter .2s}
.act-call svg{width:30px; height:30px; stroke-width:2}
.act-call:hover{transform:translateY(-2px) scale(1.03); filter:brightness(1.08)}
.act-call:active{transform:scale(.97)}

/* in-call controls grid */
.callctrls{display:grid; grid-template-columns:repeat(3,1fr); gap:14px 12px; width:100%; margin-top:2px}
.cc-btn{display:flex; flex-direction:column; align-items:center; gap:7px; padding:4px; border:none; background:none; color:var(--ink-soft)}
.cc-btn svg{width:24px; height:24px; padding:15px; box-sizing:content-box; border:1px solid var(--line); border-radius:50%; background:var(--panel); transition:all .16s}
.cc-btn i{font-style:normal; font-size:11.5px; font-weight:600; color:var(--muted)}
.cc-btn:hover svg{background:var(--panel-2); color:#fff}
.cc-btn.on svg{background:var(--grad-soft); border-color:var(--c2); color:var(--c1)}
.cc-btn.on i{color:var(--c1)}
.cc-btn[disabled]{opacity:.4; pointer-events:none}
/* In-call camera button: GREEN when my camera is on, RED with a diagonal slash when off. */
#ctlVideo{position:relative}
#ctlVideo.on svg{background:rgba(34,197,94,.16); border-color:#22c55e; color:#22c55e}
#ctlVideo.on i{color:#22c55e}
#ctlVideo.cam-off svg{background:rgba(239,68,68,.14); border-color:#ef4444; color:#ef4444}
#ctlVideo.cam-off i{color:#ef4444}
#ctlVideo.cam-off::after{content:""; position:absolute; top:28px; left:50%; width:46px; height:2.5px; background:#ef4444; border-radius:2px; transform:translate(-50%,-50%) rotate(45deg); box-shadow:0 0 0 1.5px var(--panel)}
.cc-hang{grid-column:1/-1; justify-self:center; display:grid; place-items:center; width:76px; height:76px; margin-top:10px; border:none; border-radius:50%; background:var(--bad); color:#fff; box-shadow:0 14px 34px -10px rgba(241,85,108,.65); transition:transform .15s, filter .2s}
.cc-hang svg{width:30px; height:30px; stroke-width:2}
.cc-hang:hover{filter:brightness(1.06)}
.cc-hang:active{transform:scale(.97)}

/* ============================ LISTS / SEARCH ============================ */
.list-head{display:flex; align-items:center; gap:10px; max-width:760px; margin:0 auto 18px}
.search{flex:1; background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:11px 14px; color:var(--ink); font-size:14px}
.search::placeholder{color:var(--muted)}
.search:focus{outline:none; border-color:var(--c2); background:rgba(79,123,242,.06)}
.empty{display:flex; flex-direction:column; align-items:center; gap:8px; padding:60px 20px; text-align:center; color:var(--muted)}
.empty.small{padding:34px 16px}
.empty p{font-family:var(--display); font-weight:700; font-size:17px; color:var(--ink-soft); margin:6px 0 0}
.empty span{font-size:13px; color:var(--muted)}
.empty-orb{width:54px; height:54px; border-radius:50%; background:var(--grad-soft); border:1px solid var(--line); position:relative}
.empty-orb::after{content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px; border-radius:50%; background:var(--grad); opacity:.6; box-shadow:0 0 22px var(--c2)}

/* directory rows */
.dir{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:4px}
.drow{display:flex; align-items:center; gap:13px; padding:11px 13px; border:1px solid transparent; border-radius:13px; transition:background .14s, border-color .14s}
.drow:hover{background:var(--panel); border-color:var(--line)}
.drow .pa{width:40px; height:40px; font-size:14px}
.drow .who{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.drow .who b{font-size:14.5px; font-weight:600}
.drow .who i{font-style:normal; font-size:12px; color:var(--muted)}
.drow .row-acts{display:flex; gap:6px}
.drow .row-acts button{width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:var(--panel); color:var(--ink-soft); display:grid; place-items:center}
.drow .row-acts button svg{width:18px; height:18px}
.drow .row-acts button:hover{color:#fff; border-color:var(--c2)}

/* ============================ CHAT PANE ============================ */
#pane-chat{padding:0}
.chat-wrap{display:grid; grid-template-columns:300px 1fr; height:100%}
.threads{display:flex; flex-direction:column; border-right:1px solid var(--line); min-height:0}
.threads .list-head{margin:0; padding:16px; border-bottom:1px solid var(--line-2)}
.new-chat{width:40px; height:40px; flex:none; border:1px solid var(--line); border-radius:11px; background:var(--grad-soft); color:var(--c1); display:grid; place-items:center}
.new-chat svg{width:18px; height:18px}
.new-chat:hover{border-color:var(--c2); color:#fff}
.thread-scroll{flex:1; overflow:auto; padding:8px}
.trow{display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:12px; cursor:pointer}
.trow:hover{background:var(--panel)}
.trow.active{background:var(--grad-soft)}
.trow .pa{width:42px; height:42px; font-size:14px}
.trow .tmeta{flex:1; min-width:0}
.trow .tmeta b{display:block; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.trow .tmeta i{font-style:normal; font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block}
.trow .tunread{min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--c2); color:#fff; font-family:var(--mono); font-size:10px; display:grid; place-items:center}

.convo{display:flex; flex-direction:column; min-height:0}
.convo-empty{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--muted)}
.convo-empty p{font-family:var(--display); font-weight:700; font-size:18px; color:var(--ink-soft); margin:6px 0 0}
.convo-empty span{font-size:13px}
.convo-active{display:flex; flex-direction:column; min-height:0; height:100%}
.convo-head{display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line)}
.ch-avatar{width:40px; height:40px; border-radius:11px; background:var(--grad); display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:14px; color:#fff}
.ch-id{display:flex; flex-direction:column; gap:1px; flex:1; min-width:0}
.ch-id b{font-size:15px; font-weight:700}
.ch-actions{display:flex; gap:7px}
.ch-actions button{width:40px; height:40px; border-radius:11px; border:1px solid var(--line); background:var(--panel); color:var(--ink-soft); display:grid; place-items:center}
.ch-actions button svg{width:19px; height:19px}
.ch-actions button:hover{color:#fff; border-color:var(--c2)}
.msgs{flex:1; overflow:auto; padding:20px 18px; display:flex; flex-direction:column; gap:10px}
.bubble{max-width:74%; padding:10px 13px; border-radius:15px; font-size:14px; line-height:1.45; word-wrap:break-word}
.bubble.in{align-self:flex-start; background:var(--panel-2); border:1px solid var(--line); border-bottom-left-radius:5px}
.bubble.out{align-self:flex-end; background:var(--grad); color:#fff; border-bottom-right-radius:5px}
.bubble .tstamp{display:block; margin-top:4px; font-family:var(--mono); font-size:9.5px; opacity:.6}
.bubble .file{display:flex; align-items:center; gap:9px; padding:8px; border-radius:10px; background:rgba(255,255,255,.08); margin-top:4px}
.bubble .file svg{width:18px; height:18px; flex:none}
.bubble img.att{max-width:100%; border-radius:10px; margin-top:4px; display:block}
.composer{display:flex; align-items:flex-end; gap:9px; padding:14px 16px; border-top:1px solid var(--line)}
.composer .attach,.composer .send{width:42px; height:42px; flex:none; border-radius:12px; border:1px solid var(--line); background:var(--panel); color:var(--ink-soft); display:grid; place-items:center}
.composer .attach svg,.composer .send svg{width:19px; height:19px}
.composer .send{background:var(--grad); color:#fff; border:none; box-shadow:var(--glow)}
.composer .attach:hover{color:#fff; border-color:var(--c2)}
#msgInput{flex:1; resize:none; max-height:120px; background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:11px 14px; color:var(--ink); font-size:14.5px; line-height:1.4}
#msgInput:focus{outline:none; border-color:var(--c2)}

/* ============================ HISTORY PANE ============================ */
.seg{display:inline-flex; gap:3px; padding:4px; background:var(--panel); border:1px solid var(--line); border-radius:12px}
.seg button{border:none; background:none; color:var(--muted); font-weight:600; font-size:13px; padding:7px 16px; border-radius:9px}
.seg button.on{background:var(--grad-soft); color:#fff}
.hist{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:3px}
.hrow{display:flex; align-items:center; gap:13px; padding:11px 13px; border-radius:12px}
.hrow:hover{background:var(--panel)}
.hrow .hic{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; border:1px solid var(--line); color:var(--muted)}
.hrow .hic svg{width:16px; height:16px}
.hrow.missed .hic{color:var(--bad); border-color:rgba(241,85,108,.3)}
.hrow .hwho{flex:1; min-width:0}
.hrow .hwho b{font-size:14px; font-weight:600}
.hrow .hwho i{font-style:normal; font-size:11.5px; color:var(--muted); font-family:var(--mono)}
.hrow .htime{font-family:var(--mono); font-size:11px; color:var(--muted)}

/* ============================ INCOMING OVERLAY ============================ */
.incoming{position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; background:radial-gradient(120% 90% at 50% -10%,rgba(19,32,58,.9),rgba(11,18,32,.96)); backdrop-filter:blur(8px)}
.inc-aura{position:absolute; width:420px; height:420px; border-radius:50%; background:var(--grad); filter:blur(110px); opacity:.34; animation:breathe 2.6s ease-in-out infinite}
.inc-card{position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center}
.inc-avatar{width:120px; height:120px; border-radius:50%; background:linear-gradient(180deg,var(--bg-3),var(--bg-2)); border:2px solid rgba(255,255,255,.1); display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:42px; color:#fff; box-shadow:0 0 0 0 rgba(79,123,242,.5); animation:ringpulse 1.6s ease-out infinite}
.inc-name{font-family:var(--display); font-weight:800; font-size:27px; margin-top:18px}
.inc-sub{font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase}
.inc-actions{display:flex; gap:64px; margin-top:46px}
.inc-decline,.inc-accept{display:flex; flex-direction:column; align-items:center; gap:9px; border:none; background:none; color:var(--ink-soft)}
.inc-decline svg,.inc-accept svg{width:30px; height:30px; padding:21px; box-sizing:content-box; border-radius:50%; color:#fff; stroke-width:2}
.inc-decline svg{background:linear-gradient(180deg,#F1556C,#D23A52); box-shadow:0 12px 30px -8px rgba(241,85,108,.6)}
.inc-accept svg{background:linear-gradient(180deg,#19C28A,#0E9E6E); box-shadow:0 12px 30px -8px rgba(25,194,138,.6); animation:jiggle 1.6s ease-in-out infinite}
.inc-decline i,.inc-accept i{font-style:normal; font-size:12.5px; font-weight:600}
.inc-decline:active svg,.inc-accept:active svg{transform:scale(.94)}

/* ============================ VIDEO STAGE ============================ */
.video-stage{position:fixed; right:24px; bottom:24px; z-index:120; width:300px; height:200px; border-radius:18px; overflow:hidden; background:#06080F; border:1px solid var(--line); box-shadow:0 30px 70px -20px rgba(0,0,0,.85); opacity:0; transform:translateY(12px) scale(.98); pointer-events:none; transition:opacity .25s, transform .25s}
.video-stage.on{opacity:1; transform:none; pointer-events:auto}
.video-stage.dragging{transition:none; cursor:grabbing}
.remote-vid{width:100%; height:100%; object-fit:cover; background:#06080F}
.vid-ph{position:absolute; inset:0; display:grid; place-items:center; gap:12px; grid-auto-flow:row; background:radial-gradient(circle at 50% 40%,#13203a,#06080F)}
.vid-ph-txt{font-size:12px; font-weight:600; letter-spacing:.02em; color:rgba(255,255,255,.68)}
.local-pip{position:absolute; right:10px; top:10px; width:84px; height:56px; border-radius:9px; object-fit:cover; border:1px solid rgba(255,255,255,.18); background:#0E1424; box-shadow:0 6px 18px -4px rgba(0,0,0,.7)}
.vid-bar{position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:linear-gradient(0deg,rgba(0,0,0,.6),transparent); font-size:12px}
.vid-name{font-weight:600} .vid-timer{font-size:11px; color:var(--c1)}

/* ============================ NOTICE / TOAST ============================ */
.notice{position:fixed; left:50%; top:18px; transform:translateX(-50%) translateY(-140%); z-index:400; display:flex; align-items:center; gap:12px; max-width:90vw; padding:12px 16px; border-radius:13px; background:var(--bg-3); border:1px solid var(--line); box-shadow:0 20px 50px -16px rgba(0,0,0,.8); font-size:13.5px; transition:transform .3s}
.notice.show{transform:translateX(-50%) translateY(0)}
.notice.warn{border-color:rgba(230,165,58,.45); background:rgba(230,165,58,.1)}
.notice button{border:none; background:none; color:var(--muted); font-size:20px; line-height:1}
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(140%); z-index:400; padding:11px 18px; border-radius:11px; background:var(--bg-3); border:1px solid var(--line); font-size:13.5px; box-shadow:0 16px 40px -14px rgba(0,0,0,.8); transition:transform .3s}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.err{border-color:rgba(241,85,108,.4)}

/* ============================ ANIMATIONS ============================ */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{opacity:.34}50%{opacity:.5}}
@keyframes ringpulse{0%{box-shadow:0 0 0 0 rgba(79,123,242,.5)}70%{box-shadow:0 0 0 26px rgba(79,123,242,0)}100%{box-shadow:0 0 0 0 rgba(79,123,242,0)}}
@keyframes jiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg)}75%{transform:rotate(9deg)}}

/* build badge — fixed, ID beats the preload-locked visibility:hidden so it shows pre-auth too */
#buildTag{position:fixed; right:8px; bottom:7px; z-index:99999; visibility:visible; pointer-events:none;
  font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; color:#9fc3e8; opacity:.7;
  background:rgba(11,18,32,.72); padding:3px 7px; border-radius:6px; border:1px solid rgba(159,195,232,.25)}
#wakeDbg{display:block; margin-top:2px; color:#ffd27d; white-space:normal; max-width:220px}
#wakeDbg:empty{display:none}

/* ============================ RESPONSIVE ============================ */
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  #buildTag{bottom:72px}   /* lift above the 64px bottom tab bar so it clears the History button */
  .rail{position:fixed; z-index:60; left:0; right:0; bottom:0; flex-direction:row; align-items:center; height:64px; padding:0 8px; border-right:none; border-top:1px solid var(--line); background:rgba(11,18,32,.92); backdrop-filter:blur(16px)}
  .rail-brand,.rail-foot{display:none}
  .nav{flex-direction:row; flex:1; gap:0; justify-content:space-around}
  .nav-item{flex-direction:column; gap:3px; padding:7px 10px; font-size:10px; font-weight:600; border-radius:10px}
  .nav-item span{font-size:10px}
  .nav-item.active::before{display:none}
  .nav-item .ni{width:21px; height:21px}
  .nav-badge{position:absolute; top:4px; right:14px; margin:0}
  .main{height:calc(100dvh - 64px)}
  .menu-btn{display:flex}
  .panes{padding-bottom:0}
  .pane{padding:18px 16px 78px}
  .chat-wrap{grid-template-columns:1fr}
  .chat-wrap.show-convo .threads{display:none}
  .chat-wrap:not(.show-convo) .convo{display:none}
  .video-stage{right:12px; bottom:78px; width:42vw; max-width:240px; height:30vh}
  .inc-actions{gap:48px}
}
@media (min-width:821px){
  /* presence menu sign-out also available; nothing extra */
}

/* ============================ COLLAB ADDITIONS ============================ */
/* presence dot on row avatars (only those carrying data-pres — not the rail/call avatars) */
.pa[data-pres]{position:relative}
.pa[data-pres]::after{content:""; position:absolute; right:-2px; bottom:-2px; width:11px; height:11px; border-radius:50%; border:2px solid var(--bg-2); background:var(--muted-2)}
.pa[data-pres="available"]::after{background:var(--ok); box-shadow:0 0 6px var(--ok)}
.pa[data-pres="away"]::after{background:var(--warn)}
.pa[data-pres="dnd"]::after{background:var(--bad)}

/* group sender name + multiline bodies inside bubbles */
.bubble .sender{display:block; font-size:11px; font-weight:700; color:var(--c1); margin-bottom:3px}
.bubble.out .sender{color:rgba(255,255,255,.85)}
.bubble .btext{white-space:pre-wrap}
.msg-load{margin:auto; color:var(--muted); font-size:13px; text-align:center; padding:40px 16px}

/* typing indicator (between the message scroll and the composer) */
.typing-line{height:0; overflow:hidden; padding:0 18px; font-size:12px; color:var(--muted); font-style:italic; transition:height .15s}
.typing-line.on{height:20px; padding:1px 18px 5px}

/* new-chat picker modal */
.picker{position:fixed; inset:0; z-index:320; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(6,8,15,.66); backdrop-filter:blur(6px)}
.picker-card{width:100%; max-width:420px; max-height:80vh; display:flex; flex-direction:column; gap:12px; background:var(--bg-3); border:1px solid var(--line); border-radius:18px; padding:20px; box-shadow:0 30px 80px -24px rgba(0,0,0,.85)}
.picker-head{display:flex; align-items:center; justify-content:space-between}
.picker-head b{font-family:var(--display); font-weight:700; font-size:18px}
.picker-x{border:none; background:none; color:var(--muted); font-size:24px; line-height:1; width:32px; height:32px; border-radius:8px}
.picker-x:hover{background:var(--panel); color:var(--ink)}
.picker-group{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink-soft); cursor:pointer; user-select:none}
.picker-group input{width:16px; height:16px; accent-color:var(--c2)}
.picker-list{flex:1; overflow:auto; display:flex; flex-direction:column; gap:3px; min-height:140px}
.picker-list .drow{cursor:pointer}
.picker-list .drow.sel{background:var(--grad-soft); border-color:var(--c2)}
.pick-check{width:22px; height:22px; flex:none; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:#fff; font-size:13px; font-weight:700}
.drow.sel .pick-check{background:var(--c2); border-color:var(--c2)}

/* mobile menu sheet (topbar burger -> presence + sign-out; shown only on mobile via the burger) */
.mobile-sheet{position:fixed; top:58px; left:12px; z-index:210; width:236px; background:var(--bg-3); border:1px solid var(--line); border-radius:14px; padding:7px; box-shadow:0 24px 60px -18px rgba(0,0,0,.85)}
.mobile-sheet .ms-id{display:flex; align-items:center; gap:10px; padding:7px 9px 10px; margin-bottom:5px; border-bottom:1px solid var(--line-2)}
.mobile-sheet .ms-id .pa{width:32px; height:32px; font-size:12px}
.mobile-sheet .ms-id b{font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mobile-sheet button{display:flex; align-items:center; gap:9px; width:100%; padding:10px 11px; border:none; background:none; border-radius:9px; color:var(--ink-soft); font-size:14px; font-weight:600; text-align:left}
.mobile-sheet button:hover{background:var(--panel-2); color:var(--ink)}
.mobile-sheet hr{border:none; border-top:1px solid var(--line); margin:5px 4px}
.mobile-sheet .danger{color:var(--bad)}
.mobile-sheet .dot{width:9px; height:9px; border-radius:50%}