:root{
  --bg:#f0f2f5; --panel:#fff; --panel-2:#f7f8fa; --text:#111b21; --muted:#667781; --line:#e4e7ea;
  --brand:#0d9488; --brand-2:#2563eb; --brand-text:#fff;
  --bubble-me:#d9f5ef; --bubble-them:#fff; --chat-bg:#eaeef1; --danger:#dc2626; --badge:#0d9488;
  --radius:12px;
}
:root[data-theme="dark"]{
  --bg:#0b141a; --panel:#111b21; --panel-2:#1a262d; --text:#e9edef; --muted:#8696a0; --line:#222e35;
  --bubble-me:#0b4f49; --bubble-them:#202c33; --chat-bg:#0b141a; --brand:#14b8a6;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0b141a; --panel:#111b21; --panel-2:#1a262d; --text:#e9edef; --muted:#8696a0; --line:#222e35;
    --bubble-me:#0b4f49; --bubble-them:#202c33; --chat-bg:#0b141a; --brand:#14b8a6;
  }
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:15px}
.hidden{display:none!important}
.muted{color:var(--muted)} .small{font-size:12.5px}
.error{color:var(--danger);min-height:1.2em;margin:.5rem 0 0}
button{font:inherit;cursor:pointer}
input,textarea{font:inherit;color:var(--text)}

.btn{border:0;border-radius:999px;padding:10px 20px;background:var(--panel-2);color:var(--text)}
.btn.primary{background:var(--brand);color:var(--brand-text);font-weight:600}
.btn:disabled{opacity:.5;cursor:not-allowed}
.icon-btn{border:0;background:transparent;color:var(--muted);width:38px;height:38px;border-radius:50%;font-size:18px;display:inline-grid;place-items:center}
.icon-btn:hover:not(:disabled){background:var(--panel-2);color:var(--text)}
.icon-btn:disabled{opacity:.4;cursor:not-allowed}
:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px}

/* Login */
.login{min-height:100%;display:grid;place-items:center;padding:16px}
.login-card{width:100%;max-width:380px;background:var(--panel);padding:32px 28px;border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,.08);text-align:center}
.login-card h1{margin:.5rem 0 0}
.login-card label{display:block;text-align:left;margin:14px 0 0;font-size:13px;color:var(--muted)}
.login-card input{display:block;width:100%;margin-top:5px;padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2)}
.login-card .btn{width:100%;margin-top:20px}

/* App layout */
.app{height:100dvh;display:grid;grid-template-columns:minmax(300px,400px) 1fr;background:var(--panel);max-width:1600px;margin:0 auto}
.sidebar{display:flex;flex-direction:column;border-right:1px solid var(--line);min-height:0;background:var(--panel)}
.side-head,.chat-head{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--panel-2);min-height:60px}
.profile{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.me-text,.peer-text{display:flex;flex-direction:column;min-width:0;flex:1}
.me-text strong,.peer-text strong,.conv-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avatar{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-weight:700;background:var(--brand);overflow:hidden}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

.find{padding:8px 12px;border-bottom:1px solid var(--line)}
.find input{width:100%;padding:9px 14px;border:0;border-radius:8px;background:var(--panel-2)}
.find-result{padding:8px 12px;border-bottom:1px solid var(--line);background:var(--panel-2)}
.find-result .row{display:flex;align-items:center;gap:10px}
.find-result .row .btn{margin-left:auto;padding:7px 14px}

.conv-list{overflow-y:auto;flex:1;min-height:0}
.conv{display:flex;gap:12px;align-items:center;padding:11px 14px;cursor:pointer;border-bottom:1px solid var(--line);width:100%;background:none;border-left:0;border-right:0;border-top:0;text-align:left;color:inherit}
.conv:hover,.conv.active{background:var(--panel-2)}
.conv-body{flex:1;min-width:0}
.conv-top,.conv-bottom{display:flex;justify-content:space-between;gap:8px;align-items:center}
.conv-time{font-size:12px;color:var(--muted);flex:none}
.conv-prev{color:var(--muted);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{background:var(--badge);color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:1px 7px;min-width:20px;text-align:center;flex:none}
.empty{padding:36px 24px;text-align:center}

/* Chat */
.chat{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--chat-bg)}
.no-chat{margin:auto;text-align:center;padding:24px}
.chat-view{display:flex;flex-direction:column;height:100%;min-height:0}
.chat-head .actions{margin-left:auto;display:flex}
.back{display:none}
.messages{flex:1;overflow-y:auto;padding:16px 6%;display:flex;flex-direction:column;gap:3px;min-height:0}
.day{align-self:center;background:var(--panel);color:var(--muted);font-size:12px;padding:4px 12px;border-radius:8px;margin:10px 0}
.more{align-self:center;margin:6px 0}
.msg{max-width:min(75%,560px);padding:7px 10px 5px;border-radius:var(--radius);background:var(--bubble-them);box-shadow:0 1px 1px rgba(0,0,0,.08);overflow-wrap:anywhere;white-space:pre-wrap}
.msg.me{align-self:flex-end;background:var(--bubble-me)}
.msg.pending{opacity:.65}
.msg.failed{outline:1px solid var(--danger)}
.msg .meta{display:block;text-align:right;font-size:11px;color:var(--muted);margin-top:2px;white-space:normal}
.msg.deleted{font-style:italic;color:var(--muted)}

.composer{display:flex;align-items:flex-end;gap:6px;padding:10px 12px;background:var(--panel-2)}
.composer textarea{flex:1;resize:none;max-height:140px;padding:10px 14px;border:0;border-radius:20px;background:var(--panel);line-height:1.35}
.composer .send{padding:10px 18px}
.emoji-panel{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:2px;padding:8px 12px;background:var(--panel);border-top:1px solid var(--line);max-height:180px;overflow-y:auto}
.emoji-panel button{border:0;background:none;font-size:22px;border-radius:8px;padding:4px}
.emoji-panel button:hover{background:var(--panel-2)}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#1f2937;color:#fff;padding:10px 18px;border-radius:10px;z-index:50;max-width:90vw}
.loading{padding:20px;text-align:center;color:var(--muted)}

/* Sign-in screens */
.auth-form{text-align:left}
.auth-form p{margin:10px 0}
.auth-form label,.dev-box label{display:block;text-align:left;margin:12px 0 0;font-size:13px;color:var(--muted)}
.auth-form input,.dev-box input{display:block;width:100%;margin-top:5px;padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);color:var(--text)}
.auth-form .btn.primary{width:100%;margin-top:16px}
.pw{display:flex;align-items:center;position:relative}
.pw input{padding-right:64px!important}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-35%);border:0;background:none;color:var(--brand);font-size:13px;font-weight:600;padding:6px 8px}
.links{text-align:center;font-size:14px;margin:10px 0 0!important}
.links a,.link-btn{color:var(--brand);text-decoration:none;font-weight:600}
.link-btn{border:0;background:none;padding:0}
.link-btn:disabled{color:var(--muted);cursor:default}
.code-input{font-size:26px!important;letter-spacing:.4em;text-align:center;font-family:ui-monospace,Consolas,monospace}
.info{color:#15803d;min-height:1.2em;margin:.5rem 0 0}
.dev-box{margin-top:22px;padding:12px;border:1px dashed var(--line);border-radius:10px;text-align:left}
.dev-box .btn{width:100%;margin-top:12px}

/* Group calls */
.join-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#dcfce7;color:#14532d;font-weight:600}
:root[data-theme="dark"] .join-banner{background:#052e16;color:#bbf7d0}
.gscreen{position:fixed;inset:0;background:#0b141a;z-index:46;color:#fff;overflow:hidden}
.g-top{position:absolute;top:0;left:0;right:0;height:52px;display:flex;gap:14px;align-items:center;justify-content:center;font-size:15px;padding:0 12px}
.g-top #gMeta{color:#9ca3af;font-size:13px}
.g-grid{position:absolute;top:52px;bottom:110px;left:0;right:0;display:grid;gap:8px;padding:8px;grid-auto-rows:1fr}
.g-grid[data-n="1"]{grid-template-columns:1fr}
.g-grid[data-n="2"]{grid-template-columns:1fr 1fr}
.g-grid[data-n="3"],.g-grid[data-n="4"]{grid-template-columns:1fr 1fr}
.g-grid[data-n="5"]{grid-template-columns:repeat(6,1fr)}
.g-grid[data-n="5"] .gtile{grid-column:span 2}
.g-grid[data-n="5"] .gtile:nth-child(4){grid-column:2 / span 2}
.g-grid[data-n="5"] .gtile:nth-child(5){grid-column:4 / span 2}
@media (max-width:640px){
  .g-grid[data-n="2"]{grid-template-columns:1fr}
  .g-grid[data-n="5"]{grid-template-columns:1fr 1fr}
  .g-grid[data-n="5"] .gtile,.g-grid[data-n="5"] .gtile:nth-child(4),.g-grid[data-n="5"] .gtile:nth-child(5){grid-column:auto}
}
.gtile{position:relative;background:#1f2937;border-radius:12px;overflow:hidden;min-height:0;min-width:0}
.gtile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#111827}
.gtile.me video{transform:scaleX(-1)}
.gtile.no-video video{visibility:hidden}
.gtile .gav{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:none;margin:0}
.gtile.no-video .gav{display:grid}
.gtile .gname{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.55);padding:3px 9px;border-radius:8px;font-size:13px;max-width:85%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gtile .gstate{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.6);padding:3px 9px;border-radius:8px;font-size:12px;color:#fcd34d}
.gtile[data-status="failed"]{outline:2px solid var(--danger)}
.round.end{background:#7f1d1d}
.gscreen .call-controls{bottom:24px}

/* Settings, sign-in */
.profile{cursor:pointer}
.stack{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.field{margin:12px 0}
.field .inline-form{margin-top:4px}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.setting-row select{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);color:var(--text);max-width:55%}
.setting-row.check{justify-content:flex-start;align-items:flex-start;cursor:pointer}
.setting-row.check span{display:flex;flex-direction:column}
.setting-row.check small{margin-top:2px}

/* Files */
.att{margin:0 0 4px}
.att-image{width:min(320px,70vw);max-width:100%;border-radius:8px;overflow:hidden;background:rgba(0,0,0,.08)}
.att-img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.att-broken{display:grid;place-items:center;color:var(--muted);font-size:13px;min-height:80px}
.att-row{display:flex;align-items:center;gap:10px;min-width:220px}
.att-icon{width:42px;height:42px;border-radius:8px;background:var(--brand);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;flex:none}
.att-info{display:flex;flex-direction:column;min-width:0;flex:1}
.att-info strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.att audio{width:min(260px,70vw)}
.progress{height:4px;background:var(--line);border-radius:2px;margin-top:4px;overflow:hidden}
.progress>div{height:100%;background:var(--brand);width:0;transition:width .15s}
.lightbox{flex-direction:column;gap:10px;background:rgba(0,0,0,.88);z-index:70}
.lightbox:not(.hidden){display:flex;align-items:center;justify-content:center}
.lightbox img{max-width:94vw;max-height:80dvh;object-fit:contain;border-radius:6px}
.lightbox-bar{display:flex;gap:10px;align-items:center;color:#fff;max-width:94vw}
.lightbox-bar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.group-head{display:flex;gap:14px;align-items:center;margin-bottom:10px}
.group-head .avatar.big{margin:0}

/* Call log lines in a chat */
.calllog{align-self:center;max-width:90%;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;background:var(--panel);color:var(--muted);font-size:13px;padding:5px 14px;border-radius:999px;margin:6px 0}
.calllog.missed{color:var(--danger);font-weight:600}
.calllog .link-btn{font-size:13px}

/* Groups */
.avatar.group{background:var(--brand-2)}
.chat-head.clickable .avatar,.chat-head.clickable .peer-text{cursor:pointer}
.sys{align-self:center;max-width:85%;text-align:center;background:var(--panel);color:var(--muted);font-size:12.5px;padding:4px 12px;border-radius:8px;margin:6px 0}
.msg .sender{display:block;font-size:12.5px;font-weight:700;margin-bottom:2px}
.dialog-card{background:var(--panel);color:var(--text);border-radius:16px;padding:22px;width:min(480px,100%);max-height:90dvh;overflow-y:auto}
.dialog-card h2{margin:0 0 4px}
.dialog-card h3{margin:18px 0 6px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.dialog-card input[type=text]{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);margin:8px 0}
.dialog-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:16px}
.inline-form{display:flex;gap:8px;align-items:center}
.inline-form input{flex:1;margin:8px 0!important}
.checklist{max-height:200px;overflow-y:auto;border:1px solid var(--line);border-radius:10px}
.check-row{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--line)}
.check-row:last-child{border-bottom:0}
.check-row.policy{border:1px solid var(--line);border-radius:10px}
.check-row .avatar{width:32px;height:32px;font-size:12px}
.member-list .person{padding:8px 0}

/* Message requests */
.lock-bar.request{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;text-align:left;color:var(--text)}
.request-actions{display:flex;gap:8px}
.info-bar{padding:8px 14px;background:var(--panel-2);color:var(--muted);font-size:13px;border-top:1px solid var(--line);text-align:center}
.pill{background:#f59e0b;color:#111;font-size:11px;font-weight:700;border-radius:999px;padding:1px 8px;flex:none}

/* Tabs, contacts */
.tabs{display:flex;border-bottom:1px solid var(--line)}
.tabs button{flex:1;border:0;background:none;padding:11px 8px;color:var(--muted);font-weight:600;border-bottom:3px solid transparent;display:flex;gap:6px;justify-content:center;align-items:center}
.tabs button[aria-selected="true"]{color:var(--brand);border-bottom-color:var(--brand)}
.contacts-panel{overflow-y:auto;flex:1;min-height:0}
.contacts-panel h3{margin:0;padding:14px 14px 6px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.person{display:flex;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid var(--line)}
.person-text{display:flex;flex-direction:column;flex:1;min-width:0}
.person-text strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.person-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.small-btn{padding:6px 12px;font-size:13px}
.btn.danger-text{color:var(--danger)}
.find-result .person{border:0;padding:0}
.lock-bar{padding:14px;text-align:center;background:var(--panel-2);color:var(--muted);border-top:1px solid var(--line)}

/* Presence, receipts, replies, menu */
.peer-text .is-online{color:var(--brand)}
.avatar{position:relative}
.avatar.online{overflow:visible}
.avatar.online::after{content:"";position:absolute;right:1px;bottom:1px;width:11px;height:11px;border-radius:50%;background:#22c55e;border:2px solid var(--panel)}
.msg{position:relative}
.msg .body{display:block}
.msg .quote{border-left:3px solid var(--brand);background:rgba(0,0,0,.06);border-radius:6px;padding:4px 8px;margin:0 0 5px;font-size:13px;display:flex;flex-direction:column;overflow:hidden}
.msg .quote strong{color:var(--brand);font-size:12px}
.msg .quote span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ticks{letter-spacing:-2px;margin-left:3px}
.ticks.read{color:#2563eb}
.msg-menu-btn{position:absolute;top:2px;right:4px;border:0;background:var(--bubble-them);color:var(--muted);border-radius:6px;padding:0 6px;line-height:20px;opacity:0;font-size:15px}
.msg.me .msg-menu-btn{background:var(--bubble-me)}
.msg:hover .msg-menu-btn,.msg-menu-btn:focus-visible{opacity:1}
@media (hover:none){.msg-menu-btn{opacity:.7}}
.menu{position:fixed;z-index:55;background:var(--panel);border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.25);padding:6px;min-width:180px;display:flex;flex-direction:column}
.menu button{border:0;background:none;text-align:left;padding:9px 12px;border-radius:7px;color:var(--text)}
.menu button:hover,.menu button:focus-visible{background:var(--panel-2)}
.ctx-bar{display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--panel);border-top:1px solid var(--line);border-left:4px solid var(--brand)}
.ctx-text{display:flex;flex-direction:column;flex:1;min-width:0}
.ctx-text strong{color:var(--brand);font-size:13px}
.ctx-text span{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Calls */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;z-index:40;padding:16px}
.call-card{background:var(--panel);border-radius:18px;padding:28px 32px;text-align:center;min-width:280px;max-width:90vw}
.avatar.big{width:84px;height:84px;font-size:28px;margin:0 auto 10px}
.call-card h2{margin:6px 0 2px}
.call-actions{display:flex;gap:40px;justify-content:center;margin-top:22px}
.round{width:56px;height:56px;border-radius:50%;border:0;font-size:22px;background:#374151;color:#fff;display:grid;place-items:center}
.round.ok{background:#16a34a} .round.danger{background:var(--danger)}
.round[aria-pressed="true"]{background:#fff;color:#111}
.callscreen{position:fixed;inset:0;background:#0b141a;z-index:45;color:#fff;overflow:hidden}
.callscreen #remoteVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0b141a}
.callscreen.audio #remoteVideo{visibility:hidden}
.call-identity{position:absolute;top:18%;left:0;right:0;text-align:center;pointer-events:none}
.callscreen.has-remote-video .call-identity{display:none}
.call-status{position:absolute;top:16px;left:0;right:0;text-align:center;font-size:15px;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.callscreen #localVideo{position:absolute;right:16px;bottom:110px;width:min(28vw,180px);aspect-ratio:3/4;object-fit:cover;border-radius:12px;background:#1f2937;box-shadow:0 2px 12px rgba(0,0,0,.5);transform:scaleX(-1)}
.callscreen.audio #localVideo{display:none}
.callscreen:not(.hidden) ~ .toast,.gscreen:not(.hidden) ~ .toast,.overlay:not(.hidden) ~ .toast{bottom:auto;top:56px;z-index:60}
.call-controls{position:absolute;bottom:28px;left:0;right:0;display:flex;gap:22px;justify-content:center}
.callscreen.audio #camBtn{display:none}

/* Mobile: one pane at a time */
@media (max-width:760px){
  .app{grid-template-columns:1fr}
  .chat{display:none}
  .app.chat-open .sidebar{display:none}
  .app.chat-open .chat{display:flex}
  .back{display:inline-grid}
  .messages{padding:12px 10px}
  .msg{max-width:88%}
}
.stack.wide{align-items:stretch;width:100%}
.stack.wide input{padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);color:var(--text)}

/* ---- language: Bangla text needs a font that has the letters; the switch sits at the top of the sign-in card ---- */
html.lang-bn body, html.lang-bn button, html.lang-bn input, html.lang-bn select, html.lang-bn textarea {
  font-family: "Noto Sans Bengali", "Hind Siliguri", "Nirmala UI", "Shonar Bangla", "Vrinda", system-ui, sans-serif;
}
html.lang-bn body { line-height: 1.55; }
.lang-switch { display: flex; width: max-content; margin-left: auto; margin-right: auto; border: 1px solid var(--border, #d0d7de); border-radius: 999px; overflow: hidden; margin: 0 0 14px; }
.lang-switch button { border: 0; background: transparent; color: var(--muted); padding: 6px 14px; font-size: 13px; cursor: pointer; }
.lang-switch button.active { background: var(--accent, #0d9488); color: #fff; }
.lang-switch button:focus-visible { outline: 2px solid var(--accent, #0d9488); outline-offset: -2px; }

.ok-text{color:var(--accent,#0d9488)}

/* ---- file expiry: countdown under a file, warning note, deleted file ---- */
.att-expiry{margin-top:4px;font-size:11px;color:var(--muted)}
.att-expiry.warn{color:#c2410c;font-weight:600}
.att-expiry.gone{font-style:italic}
.att-broken{padding:8px 10px;border-radius:8px;background:rgba(0,0,0,.05)}
.expiry-note{margin:8px auto;max-width:90%;padding:6px 12px;border-radius:10px;background:#fff4e5;color:#9a3412;font-size:12px;text-align:center}
.older-loading{position:sticky;top:6px;height:0;z-index:2;text-align:center;overflow:visible}
.older-loading span{display:inline-block;background:var(--panel,#fff);color:var(--muted);font-size:12px;padding:3px 12px;border-radius:999px;box-shadow:0 1px 3px rgba(0,0,0,.15)}

/* ---- weak-internet notice during a call ---- */
.call-quality{position:absolute;left:50%;top:64px;transform:translateX(-50%);z-index:5;max-width:90%;padding:6px 14px;border-radius:999px;background:rgba(17,27,33,.82);color:#fff;font-size:13px;text-align:center}
.call-quality.hidden{display:none}