:root {
  color-scheme: light;
  /* OKLCH, not hex: color-mix() and the oklch(from ...) derivations are perceptually
     even in this space, where the sRGB equivalents go muddy through the midpoint.
     Every value below round-trips to the exact hex it replaced - this conversion is
     deliberately zero-change; the point is what can now be derived from it. */
  --bg: oklch(0.9670 0.0029 264.54);            /* was #f3f4f6 */
  --panel: oklch(1 0 0);                        /* was #ffffff */
  --panel-soft: oklch(0.9846 0.0017 247.84);    /* was #f9fafb */
  --text: oklch(0.2101 0.0318 264.66);          /* was #111827 */
  --muted: oklch(0.5510 0.0234 264.36);         /* was #6b7280 */
  --border: oklch(0.9276 0.0058 264.53);        /* was #e5e7eb */
  --accent: oklch(0.5461 0.2152 262.88);        /* was #2563eb */
  /* Derived, so changing the brand is one edit instead of two that can drift apart.
     Lands on #1350d7 where the hand-picked value was #1d4ed8 - a hover state, and the
     only intentional colour change in this phase. */
  --accent-dark: oklch(from var(--accent) calc(l - 0.058) c h);
  --mine: oklch(0.5461 0.2152 262.88);          /* was #2563eb */
  --theirs: oklch(0.9619 0.0179 272.31);        /* was #eef2ff */
  --danger: oklch(0.5054 0.1905 27.52);         /* was #b91c1c */
  --shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
  /* Corner scale. Radii were 8/9/10/12/14/16/18/999 scattered with no logic. These
     are the four that actually repeat, mapped like-for-like so nothing moves today
     but corner style becomes one dial instead of 79 edits. */
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top left, #dbeafe 0, transparent 34%), var(--bg);
  color: var(--text);
}
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.app-shell { min-height: 100vh; padding: 24px; display: grid; place-items: center; }
.auth-card {
  width: min(460px, 100%);
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 24px;
  padding: 30px;
  box-shadow: var(--shadow);
}
.brand-block { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.logo { width: 52px; height: 52px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--accent); color: white; font-size: 24px; font-weight: 800; }
h1, h2, p { margin-top: 0; }
.brand-block h1 { margin-bottom: 5px; font-size: 26px; }
.brand-block p { color: var(--muted); margin-bottom: 0; font-size: 14px; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--panel-soft); border-radius: var(--r-md); padding: 4px; margin-bottom: 22px; }
.tab { border: 0; background: transparent; padding: 10px; border-radius: 9px; color: var(--muted); font-weight: 600; }
.tab.active { background: var(--panel); color: var(--text); box-shadow: 0 2px 8px rgba(15,23,42,.08); }
.form-stack { display: grid; gap: 16px; }
label span, .new-chat-box label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; }
input, textarea { width: 100%; border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 13px; background: white; color: var(--text); outline: none; }
input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.primary-btn, .send-btn, .inline-form button { border: 0; border-radius: var(--r-md); background: var(--accent); color: white; font-weight: 700; padding: 12px 16px; }
.primary-btn:hover, .send-btn:hover, .inline-form button:hover { background: var(--accent-dark); }
button:disabled { cursor: not-allowed; opacity: .55; }
.helper-text { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 16px 0 0; }
.chat-layout { width: min(1180px, 100%); height: min(820px, calc(100vh - 48px)); background: var(--panel); border-radius: 24px; box-shadow: var(--shadow); overflow: hidden; display: grid; grid-template-columns: 340px 1fr; border: 1px solid rgba(255,255,255,.75); }
.sidebar { border-right: 1px solid var(--border); background: var(--panel-soft); display: flex; flex-direction: column; min-width: 0; }
.sidebar-header, .chat-header { min-height: 82px; padding: 18px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: white; }
.eyebrow { margin-bottom: 4px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; font-weight: 700; }
.sidebar-header h2, .chat-header h2 { margin: 0; font-size: 18px; }
.icon-btn, .mobile-back { border: 1px solid var(--border); background: white; border-radius: var(--r-sm); padding: 8px 10px; }
.new-chat-box { padding: 16px; border-bottom: 1px solid var(--border); }
.inline-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.inline-form button { padding-inline: 14px; }
.conversation-heading { padding: 14px 16px 9px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.text-btn { border: 0; background: transparent; color: var(--accent); font-size: 12px; font-weight: 700; padding: 0; }
.conversation-list { overflow-y: auto; padding: 0 10px 14px; }
.conversation-item { width: 100%; border: 0; background: transparent; border-radius: 13px; display: flex; align-items: center; text-align: left; position: relative; overflow: hidden; }
.conversation-open { flex: 1; min-width: 0; border: 0; background: transparent; padding: 12px 4px 12px 12px; display: flex; align-items: center; gap: 11px; text-align: left; cursor: pointer; }
.conversation-more { flex: 0 0 42px; align-self: stretch; border: 0; background: transparent; color: var(--muted); font-size: 23px; cursor: pointer; border-radius: var(--r-sm); }
.conversation-more:hover { background: #f1f5f9; color: #0f172a; }
.conversation-item:hover, .conversation-item.active { background: white; box-shadow: 0 4px 16px rgba(15,23,42,.06); }
.avatar { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; background: #dbeafe; color: #1e40af; display: grid; place-items: center; font-weight: 800; text-transform: uppercase; }
.conversation-meta { min-width: 0; flex: 1; }
.conversation-name { font-weight: 700; margin-bottom: 3px; }
.conversation-preview { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-panel { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; background: white; }
.mobile-back { display: none; }
.message-list { overflow-y: auto; padding: 24px; background: linear-gradient(180deg, #f8fafc 0, #ffffff 100%); display: flex; flex-direction: column; gap: 11px; }
.message-row { display: flex; }
.message-row.mine { justify-content: flex-end; }
.message-bubble { max-width: min(72%, 560px); padding: 10px 13px; border-radius: var(--r-lg); background: var(--theirs); color: var(--text); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-row.mine .message-bubble { background: var(--mine); color: white; border-bottom-right-radius: 5px; }
.message-row:not(.mine) .message-bubble { border-bottom-left-radius: 5px; }
.message-time { display: block; margin-top: 5px; font-size: 10px; opacity: .7; text-align: right; }
.message-composer { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 16px; border-top: 1px solid var(--border); background: white; align-items: end; }
.message-composer textarea { resize: none; min-height: 46px; max-height: 140px; }
.send-btn { min-height: 46px; }
.empty-state { margin: auto; color: var(--muted); text-align: center; padding: 24px; font-size: 14px; }
.empty-state.small { margin: 20px 0; }
.toast { position: fixed; top: 18px; left: 50%; transform: translate(-50%, -20px); opacity: 0; pointer-events: none; z-index: 20; background: #111827; color: white; padding: 11px 15px; border-radius: var(--r-sm); font-size: 13px; transition: .2s ease; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: var(--danger); }
@media (max-width: 760px) {
  .app-shell { padding: 0; }
  .chat-layout { height: 100dvh; border-radius: 0; grid-template-columns: 1fr; }
  .sidebar { border-right: 0; }
  .chat-panel { display: none; }
  .chat-layout.mobile-chat-open .sidebar { display: none; }
  .chat-layout.mobile-chat-open .chat-panel { display: grid; }
  .mobile-back { display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0; font-size: 26px; font-weight: 700; line-height: 1; }
  .message-bubble { max-width: 84%; }
  .auth-card { min-height: 100dvh; border-radius: 0; display: flex; flex-direction: column; justify-content: center; }
}

.attach-btn { min-width: 46px; min-height: 46px; border: 1px solid var(--border); border-radius: var(--r-md); background: white; font-size: 25px; line-height: 1; color: var(--accent); }
.message-composer { grid-template-columns: auto 1fr auto; }
.attachment-preview { padding: 10px 16px 0; border-top: 1px solid var(--border); background: white; }
.attachment-preview-card { display: flex; align-items: center; gap: 10px; padding: 9px 11px; background: var(--panel-soft); border: 1px solid var(--border); border-radius: var(--r-md); }
.attachment-preview-card span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.remove-attachment { border: 0; background: transparent; color: var(--danger); font-weight: 700; }
.chat-media { display: block; max-width: 100%; max-height: 360px; border-radius: var(--r-md); margin-bottom: 7px; background: #000; }
.media-link { display: inline-block; font-size: 12px; margin-bottom: 5px; color: inherit; }
.upload-progress { font-size: 12px; color: var(--muted); padding: 0 16px 8px; background: white; }
.name-label{font-size:11px;font-weight:700;opacity:.72;margin-bottom:4px}.status-text{margin:3px 0 0;color:var(--muted);font-size:12px}.status-text.online{color:#16a34a}.chat-person{display:flex;align-items:center;gap:11px}.header-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#ede9fe;color:#6d28d9;font-weight:800}.online-dot{width:9px;height:9px;border-radius:50%;background:#22c55e;display:inline-block;margin-right:5px}.record-btn{min-width:46px;min-height:46px;border:1px solid var(--border);border-radius:var(--r-md);background:white;font-size:18px}.record-btn.recording{background:#fee2e2;border-color:#ef4444}.recording-bar{display:flex;align-items:center;gap:9px;padding:10px 16px;border-top:1px solid var(--border);background:#fff7f7;font-size:13px}.recording-bar strong{margin-left:auto}.recording-bar button{border:0;background:transparent;color:var(--danger);font-weight:700}.recording-dot{width:10px;height:10px;border-radius:50%;background:#ef4444;animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.35}}.voice-note{width:min(280px,65vw);height:38px}.message-composer{grid-template-columns:auto 1fr auto auto}.conversation-status{font-size:11px;color:var(--muted);margin-top:2px}.conversation-status.online{color:#16a34a}@media(max-width:420px){.send-btn{padding-inline:12px}.message-composer{gap:7px;padding:11px}.attach-btn,.record-btn{min-width:42px}}

.login-heading{font-size:1rem;font-weight:800;margin:1.4rem 0 .9rem;color:#182033}

/* ===== FIX: keep the composer visible when photos/videos are present ===== */
.chat-layout,
.sidebar,
.chat-panel {
  min-height: 0;
}

.chat-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-header,
.recording-bar,
.attachment-preview,
.message-composer {
  flex: 0 0 auto;
}

.message-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.conversation-list {
  flex: 1 1 auto;
  min-height: 0;
}

.chat-media {
  width: auto;
  max-width: 100%;
  max-height: min(360px, 45vh);
  object-fit: contain;
}

@media (max-width: 760px) {
  .chat-panel {
    display: none;
  }

  .chat-layout.mobile-chat-open .chat-panel {
    display: flex;
  }

  .chat-media {
    max-height: 42vh;
  }
}

/* Message actions, replies and clear-chat controls */
.chat-header{position:relative}.header-menu-btn{margin-left:auto;border:0;background:transparent;font-size:30px;line-height:1;padding:8px 12px;border-radius:var(--r-md);cursor:pointer;color:#334155}.header-menu-btn:hover{background:#eef2ff}.header-menu-btn:disabled{opacity:.35;cursor:not-allowed}
.message-row{position:relative}.message-wrap{display:flex;align-items:flex-start;gap:6px;max-width:min(78%,560px)}.message-row.mine .message-wrap{flex-direction:row-reverse}.message-more{border:0;background:transparent;color:#94a3b8;font-size:20px;line-height:1;padding:5px;border-radius:50%;cursor:pointer;opacity:0;transition:opacity .15s}.message-row:hover .message-more,.message-more:focus{opacity:1}.message-bubble{max-width:100%}
.reply-quote{border-left:3px solid #6366f1;background:rgba(255,255,255,.55);padding:7px 9px;margin:0 0 7px;border-radius:8px;font-size:12px;overflow:hidden}.message-row.mine .reply-quote{background:rgba(255,255,255,.2)}.reply-quote strong,.reply-quote span{display:block}.reply-quote span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.8;margin-top:2px}
.reply-preview{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 16px;border-top:1px solid #e2e8f0;background:#f8fafc}.reply-preview>div{min-width:0;border-left:3px solid #6366f1;padding-left:10px}.reply-preview strong,.reply-preview span{display:block}.reply-preview span{font-size:13px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55vw}.reply-preview button{border:0;background:transparent;font-size:25px;cursor:pointer;color:#64748b}
.message-menu,.clear-menu,.conversation-menu{position:fixed;z-index:1000;min-width:180px;padding:6px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;box-shadow:0 18px 50px rgba(15,23,42,.18)}.message-menu button,.clear-menu button,.conversation-menu button{width:100%;border:0;background:transparent;text-align:left;padding:11px 13px;border-radius:9px;font:600 14px system-ui,sans-serif;cursor:pointer;color:#1e293b}.message-menu button:hover,.clear-menu button:hover,.conversation-menu button:hover{background:#f1f5f9}.message-menu button.danger,.clear-menu button.danger,.conversation-menu button.danger{color:#dc2626}.message-menu.hidden,.clear-menu.hidden,.conversation-menu.hidden{display:none!important}
.message-bubble.action-highlight{outline:3px solid rgba(99,102,241,.2)}
@media(max-width:760px){.message-wrap{max-width:88%}.message-more{opacity:1;font-size:18px}.header-menu-btn{font-size:27px}.reply-preview span{max-width:65vw}}

/* ===== Performance and responsive enhancements ===== */
:root { color-scheme: light; }
* { -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; }
button { touch-action: manipulation; }
.app-shell { min-height: 100dvh; }
.chat-layout { height: min(860px, calc(100dvh - 32px)); }
.message-list {
  contain: layout paint;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
}
.message-row {
  content-visibility: auto;
  contain-intrinsic-size: 72px;
}
.chat-media {
  image-rendering: auto;
  transform: translateZ(0);
}
.message-composer textarea {
  field-sizing: content;
  overflow-y: auto;
}
.icon-btn, .mobile-back, .attach-btn, .record-btn, .send-btn, .header-menu-btn {
  min-height: 44px;
}
.loading-messages {
  margin: auto;
  color: var(--muted);
  font-size: 14px;
}
@media (max-width: 760px) {
  html, body { width: 100%; }
  .chat-layout { height: 100dvh; min-height: 100dvh; }
  .sidebar-header, .chat-header {
    padding-top: max(12px, env(safe-area-inset-top));
  }
  .message-composer {
    padding-bottom: max(11px, env(safe-area-inset-bottom));
  }
  .message-list { padding: 14px 12px; gap: 8px; }
  .message-bubble { font-size: 15px; }
  .chat-media { max-width: min(78vw, 380px); }
}
@media (max-width: 420px) {
  .sidebar-header, .chat-header { min-height: 68px; padding-inline: 12px; }
  .new-chat-box { padding: 12px; }
  .conversation-list { padding-inline: 6px; }
  .message-wrap { max-width: 94%; }
  .message-composer textarea { min-width: 0; }
  .send-btn { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Stable composer: prevents movement after each send */
.message-composer textarea {
  field-sizing: fixed !important;
  height: 46px;
  min-height: 46px;
  max-height: 46px;
  overflow-y: auto;
}
.message-list { overflow-anchor: none; }
.message-composer, .reply-preview, .attachment-preview { overflow-anchor: none; }

/* Final send stability: the new message is appended instead of rebuilding the list. */
.message-list { scroll-snap-type: none !important; }
.message-row { overflow-anchor: none; }
.message-composer { position: relative; z-index: 5; }

/* Secure close / logout controls */
.header-actions{margin-left:auto;display:flex;align-items:center;gap:4px;flex:0 0 auto}
.close-tab-btn{width:40px;height:40px;border:0;background:transparent;border-radius:var(--r-md);font-size:30px;line-height:1;color:#475569;cursor:pointer;display:grid;place-items:center}
.close-tab-btn:hover{background:#fee2e2;color:#b91c1c}
.closed-screen{min-height:100dvh;display:grid;place-items:center;padding:24px;background:#f8fafc;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#0f172a}
.closed-screen section{width:min(420px,100%);text-align:center;background:#fff;border:1px solid #e2e8f0;border-radius:24px;padding:36px 26px;box-shadow:0 20px 60px rgba(15,23,42,.10)}
.closed-screen .closed-icon{width:58px;height:58px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;background:#dcfce7;color:#15803d;font-size:28px;font-weight:800}
.closed-screen h1{margin:0 0 8px}.closed-screen p{margin:0 0 20px;color:#64748b}
.closed-screen button{border:0;border-radius:var(--r-md);padding:12px 18px;background:#4f46e5;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.closed-screen small{display:block;margin-top:16px;color:#94a3b8;line-height:1.45}
@media(max-width:760px){.close-tab-btn{width:38px;height:38px;font-size:27px}.header-actions{gap:0}}

/* UPSC coaching portal inspired login */
.coaching-login{
  width:min(960px,calc(100% - 32px));
  max-width:960px;
  padding:0;
  display:grid;
  grid-template-columns:minmax(320px,1.05fr) minmax(320px,.95fr);
  overflow:hidden;
  border-radius:22px;
  border:1px solid #dbe4ef;
  box-shadow:0 24px 70px rgba(15,35,68,.18);
  background:#fff;
}
.coaching-banner{
  min-height:520px;
  padding:54px 48px;
  background:linear-gradient(145deg,#102a56 0%,#173d76 62%,#1d4f91 100%);
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.coaching-banner::before,.coaching-banner::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.12)}
.coaching-banner::before{width:330px;height:330px;right:-120px;top:-100px}
.coaching-banner::after{width:220px;height:220px;left:-90px;bottom:-85px}
.academy-mark{width:78px;height:78px;border-radius:18px;background:#f59e0b;display:grid;place-items:center;margin-bottom:28px;box-shadow:0 12px 28px rgba(0,0,0,.18);position:relative;z-index:1}
.academy-wheel{font-size:38px;color:#102a56;line-height:1}
.portal-kicker{text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:800;color:#fcd34d;margin:0 0 10px;position:relative;z-index:1}
.coaching-banner h1{font-size:clamp(32px,4vw,48px);line-height:1.08;margin:0 0 14px;max-width:480px;position:relative;z-index:1}
.portal-subtitle{margin:0;max-width:430px;color:#dbeafe;font-size:16px;line-height:1.65;position:relative;z-index:1}
.login-panel{padding:58px 48px;display:flex;flex-direction:column;justify-content:center;background:#fff}
.coaching-login .login-heading{font-size:26px;margin:0 0 26px;color:#102a56;letter-spacing:-.02em}
.coaching-login .form-stack{gap:19px}
.coaching-login label>span{display:block;margin-bottom:8px;color:#334155;font-size:13px;font-weight:800}
.input-shell{display:flex;align-items:center;gap:10px;border:1px solid #cbd5e1;border-radius:var(--r-sm);padding:0 13px;background:#f8fafc;transition:.18s ease}
.input-shell:focus-within{border-color:#1d4f91;background:#fff;box-shadow:0 0 0 4px rgba(29,79,145,.10)}
.input-shell>span{font-size:15px;opacity:.65}
.input-shell input{border:0!important;background:transparent!important;box-shadow:none!important;padding:14px 0!important;width:100%;outline:0;color:#0f172a}
.coaching-submit{margin-top:4px;background:#f59e0b;color:#102a56;border-radius:var(--r-sm);min-height:50px;font-weight:900;box-shadow:0 8px 20px rgba(245,158,11,.24)}
.coaching-submit:hover{background:#fbbf24;transform:translateY(-1px)}
.coaching-login .helper-text{text-align:center;color:#64748b;margin:18px 0 0;font-size:12px}
.login-footer{grid-column:1/-1;background:#0b1f40;color:#bfdbfe;text-align:center;padding:12px 18px;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.close-tab-btn{font-size:22px;font-weight:800}
.close-tab-btn:disabled{opacity:.45;cursor:wait}
@media(max-width:760px){
  .coaching-login{width:100%;max-width:none;min-height:100dvh;border-radius:0;grid-template-columns:1fr;align-content:stretch}
  .coaching-banner{min-height:auto;padding:34px 24px 28px;justify-content:flex-start}
  .academy-mark{width:58px;height:58px;border-radius:14px;margin-bottom:18px}.academy-wheel{font-size:28px}
  .coaching-banner h1{font-size:30px}.portal-subtitle{font-size:14px}
  .login-panel{padding:34px 24px 30px;justify-content:flex-start}
  .coaching-login .login-heading{font-size:23px;margin-bottom:22px}
  .login-footer{align-self:end}
}

/* ===== UPSC coaching dashboard theme (inside login) ===== */
:root{
  --upsc-navy:#102a56;
  --upsc-blue:#173d76;
  --upsc-gold:#f59e0b;
  --upsc-paper:#f5f7fb;
}
body{background:#e9eef6}
.chat-layout{
  width:min(1240px,100%);
  height:min(850px,calc(100dvh - 40px));
  grid-template-columns:360px 1fr;
  border-radius:18px;
  border:1px solid #cfd9e7;
  box-shadow:0 22px 65px rgba(16,42,86,.16);
}
.dashboard-brand{
  min-height:92px;
  padding:18px 20px;
  display:flex;
  align-items:center;
  gap:13px;
  color:#fff;
  background:linear-gradient(135deg,var(--upsc-navy),var(--upsc-blue));
  border-bottom:3px solid var(--upsc-gold);
}
.dashboard-emblem{
  flex:0 0 48px;
  width:48px;height:48px;
  border-radius:13px;
  display:grid;place-items:center;
  background:var(--upsc-gold);
  color:var(--upsc-navy);
  font-size:25px;font-weight:900;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}
.dashboard-brand p{margin:0 0 3px;color:#bfdbfe;text-transform:uppercase;letter-spacing:.12em;font-size:9px;font-weight:800}
.dashboard-brand h1{margin:0;font-size:19px;line-height:1.15;letter-spacing:-.01em}
.sidebar{background:#f5f7fb;border-right-color:#dbe4ef}
.sidebar-header{min-height:74px;background:#fff;padding:14px 18px}
.sidebar-header h2{color:var(--upsc-navy)}
.icon-btn{border-color:#d6dfeb;color:var(--upsc-navy);font-weight:800;background:#fff}
.icon-btn:hover{background:#fff7e6;border-color:#f5c45f}
.new-chat-box{margin:14px 14px 5px;padding:14px;background:#fff;border:1px solid #dbe4ef;border-radius:13px;box-shadow:0 7px 20px rgba(16,42,86,.05)}
.new-chat-box label{color:var(--upsc-navy);font-weight:800}
.inline-form button{background:var(--upsc-gold);color:var(--upsc-navy);font-weight:900}
.inline-form button:hover{background:#fbbf24}
.conversation-heading{padding:16px 18px 9px;color:#52647d}
.text-btn{color:var(--upsc-blue)}
.conversation-item{border:1px solid transparent}
.conversation-item:hover,.conversation-item.active{background:#fff;border-color:#dbe4ef;box-shadow:0 6px 18px rgba(16,42,86,.07)}
.conversation-item.active{border-left:4px solid var(--upsc-gold)}
.avatar,.header-avatar{background:#e8eef8;color:var(--upsc-navy);border:1px solid #cfdaea}
.chat-panel{background:#fff}
.chat-header{background:linear-gradient(180deg,#fff,#fbfcfe);border-bottom-color:#dbe4ef}
.chat-header h2{color:var(--upsc-navy)}
.message-list{background:linear-gradient(rgba(245,247,251,.93),rgba(255,255,255,.96)),repeating-linear-gradient(0deg,transparent,transparent 31px,rgba(16,42,86,.035) 32px)}
.message-row.mine .message-bubble{background:var(--upsc-blue)}
.message-row:not(.mine) .message-bubble{background:#eef3fa;border:1px solid #dbe4ef}
.message-composer{border-top-color:#dbe4ef;background:#fbfcfe}
.send-btn{background:var(--upsc-gold);color:var(--upsc-navy);font-weight:900}
.send-btn:hover{background:#fbbf24}
.attach-btn{color:var(--upsc-blue)}
.record-btn{color:var(--upsc-blue)}
@media(max-width:760px){
  .chat-layout{height:100dvh;border-radius:0;grid-template-columns:1fr}
  .dashboard-brand{min-height:78px;padding:13px 15px}
  .dashboard-emblem{width:42px;height:42px;flex-basis:42px}
  .dashboard-brand h1{font-size:17px}
  .new-chat-box{margin:10px}
}

/* End-to-end encryption unlock */
.e2ee-modal{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:20px;background:rgba(5,15,35,.72);backdrop-filter:blur(10px)}
.e2ee-modal.hidden{display:none}
.e2ee-card{width:min(440px,100%);padding:30px;border-radius:20px;background:#fff;box-shadow:0 28px 90px rgba(0,0,0,.34);text-align:center;border-top:5px solid var(--upsc-gold,#f59e0b)}
.e2ee-lock{width:68px;height:68px;margin:0 auto 14px;display:grid;place-items:center;border-radius:20px;background:#edf3fb;font-size:34px}
.e2ee-card h2{margin:5px 0 9px;color:var(--upsc-navy,#102a56)}
.e2ee-card p:not(.portal-kicker){margin:0 auto 20px;max-width:360px;color:#5b687c;line-height:1.55}
.e2ee-card form{display:grid;gap:12px}.e2ee-input-row{display:flex;border:1px solid #cbd6e5;border-radius:var(--r-md);overflow:hidden;background:#fff}
.e2ee-input-row input{min-width:0;flex:1;border:0;padding:14px;font:inherit;outline:0}.e2ee-input-row button{border:0;background:#edf3fb;color:#173d76;padding:0 14px;font-weight:800;cursor:pointer}
.e2ee-card .primary-btn{width:100%}.e2ee-logout{margin:14px 0 8px;border:0;background:none;color:#52647d;font-weight:700;cursor:pointer}.e2ee-card small{display:block;color:#8792a3;line-height:1.45}

/* Reliable initial positioning at the newest message. */
.message-row {
  content-visibility: visible !important;
  contain: none !important;
}
.message-list {
  contain: none !important;
}
/* ===== Phase 4 Typing Indicator Polish: Three-Dot Bubble & Conversation List ===== */

/* 1. Header Typing Status & Animated 3-Dot Bubble */
.status-text.typing{display:inline-flex;align-items:center;gap:5px;color:#2563eb;font-weight:700}
.typing-header-bubble{display:inline-flex;align-items:center;gap:3px;background:rgba(37,99,235,0.12);padding:3px 6px;border-radius:99px;vertical-align:middle}
.typing-header-bubble .typing-dot{width:4.5px;height:4.5px;border-radius:50%;background-color:#2563eb;animation:typingDotBounce 1.3s infinite ease-in-out both}
.typing-header-bubble .typing-dot:nth-child(1){animation-delay:0s}
.typing-header-bubble .typing-dot:nth-child(2){animation-delay:0.2s}
.typing-header-bubble .typing-dot:nth-child(3){animation-delay:0.4s}

/* 2. Message Stream 3-Dot Typing Bubble Row */
.message-row.typing-row{margin:4px 0;animation:typingFadeIn 0.2s cubic-bezier(0.16,1,0.3,1);pointer-events:none}
@keyframes typingFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.message-bubble.typing-bubble{display:inline-flex!important;align-items:center;justify-content:center;gap:4.5px;padding:10px 14px!important;min-width:48px;min-height:36px;border-radius:18px 18px 18px 4px!important;box-shadow:0 1px 2px rgba(0,0,0,0.04)}
.typing-bubble .typing-dot{width:7px;height:7px;border-radius:50%;background-color:#64748b;opacity:0.45;animation:typingDotBounce 1.4s infinite ease-in-out both}
.typing-bubble .typing-dot:nth-child(1){animation-delay:0s}
.typing-bubble .typing-dot:nth-child(2){animation-delay:0.22s}
.typing-bubble .typing-dot:nth-child(3){animation-delay:0.44s}

@keyframes typingDotBounce{0%,80%,100%{transform:translateY(0);opacity:0.4}40%{transform:translateY(-5px);opacity:1}}
@keyframes typingPulse{0%,100%{opacity:1}50%{opacity:.55}}

/* 3. Conversation List (Sidebar) Typing Indicator */
.conversation-item.peer-typing .conversation-status{color:#2563eb!important;font-weight:700}
.conversation-preview.typing-preview{color:#2563eb!important;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.conversation-preview .typing-dots-bubble{display:inline-flex;align-items:center;gap:2.5px}
.conversation-preview .typing-dots-bubble .dot{width:4px;height:4px;border-radius:50%;background-color:#2563eb;animation:typingDotBounce 1.2s infinite ease-in-out both}
.conversation-preview .typing-dots-bubble .dot:nth-child(1){animation-delay:0s}
.conversation-preview .typing-dots-bubble .dot:nth-child(2){animation-delay:0.2s}
.conversation-preview .typing-dots-bubble .dot:nth-child(3){animation-delay:0.4s}

/* 4. Dark Theme Support for Typing Elements */
html[data-theme="dark"] .status-text.typing{color:#60a5fa}
html[data-theme="dark"] .typing-header-bubble{background:rgba(96,165,250,0.16)}
html[data-theme="dark"] .typing-header-bubble .typing-dot{background-color:#60a5fa}
html[data-theme="dark"] .typing-bubble .typing-dot{background-color:#94a3b8}
html[data-theme="dark"] .conversation-item.peer-typing .conversation-status{color:#60a5fa!important}
html[data-theme="dark"] .conversation-preview.typing-preview{color:#60a5fa!important}
html[data-theme="dark"] .conversation-preview .typing-dots-bubble .dot{background-color:#60a5fa}

/* ===== Device-persistent dark mode ===== */
html[data-theme="dark"] {
  color-scheme: dark;
  /* Same exact-OKLCH conversion as :root, so color-mix() is perceptually even in the
     theme most people actually use. Every value round-trips to its old hex. */
  --bg:oklch(0.1500 0.0208 264.34);            /* was #070b14 */
  --panel:oklch(0.2101 0.0318 264.66);         /* was #111827 */
  --panel-soft:oklch(0.1831 0.0309 263.38);    /* was #0b1220 */
  --text:oklch(0.9276 0.0058 264.53);          /* was #e5e7eb */
  --muted:oklch(0.7107 0.0351 256.79);         /* was #94a3b8 */
  --border:oklch(0.3145 0.0364 258.32);        /* was #263244 */
  --accent:oklch(0.7137 0.1434 254.62);        /* was #60a5fa */
  /* Left hand-picked, unlike the light one: against this accent it is not a plain
     lightness step (chroma +0.045, hue +5.2 degrees), and inventing two magic numbers
     to derive a single hover state would be worse than one honest constant. */
  --accent-dark:oklch(0.6231 0.1880 259.81);   /* was #3b82f6 */
  --mine:oklch(0.4882 0.2172 264.38);          /* was #1d4ed8 */
  --theirs:oklch(0.2795 0.0368 260.03);        /* was #1e293b */
  --danger:oklch(0.7106 0.1661 22.22);         /* was #f87171 */
  --shadow:0 20px 60px rgba(0,0,0,.48);
  --upsc-navy:oklch(0.9319 0.0316 255.59);     /* was #dbeafe */
  --upsc-blue:oklch(0.7137 0.1434 254.62);     /* was #60a5fa */
}
html[data-theme="dark"] body{background:radial-gradient(circle at top left,#172554 0,transparent 35%),#070b14;color:var(--text)}
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .chat-layout,
html[data-theme="dark"] .chat-panel,
html[data-theme="dark"] .sidebar-header,
html[data-theme="dark"] .chat-header,
html[data-theme="dark"] .new-chat-box,
html[data-theme="dark"] .message-composer,
html[data-theme="dark"] .attachment-preview,
html[data-theme="dark"] .upload-progress{background:#111827!important;border-color:#263244!important;color:#e5e7eb}
html[data-theme="dark"] .sidebar{background:#0b1220!important;border-color:#263244!important}
html[data-theme="dark"] .dashboard-brand{background:linear-gradient(135deg,#111c35,#172554)}
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .e2ee-input-row{background:#0b1220!important;color:#e5e7eb!important;border-color:#334155!important}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:#64748b}
html[data-theme="dark"] .message-list{background:linear-gradient(rgba(11,18,32,.96),rgba(15,23,42,.98)),repeating-linear-gradient(0deg,transparent,transparent 31px,rgba(148,163,184,.035) 32px)!important}
html[data-theme="dark"] .message-row:not(.mine) .message-bubble{background:#1e293b!important;border-color:#334155!important;color:#e5e7eb}
html[data-theme="dark"] .conversation-item:hover,
html[data-theme="dark"] .conversation-item.active{background:#172033!important;border-color:#334155!important;box-shadow:none}
html[data-theme="dark"] .conversation-more:hover{background:#1e293b;color:#e5e7eb}
html[data-theme="dark"] .avatar,html[data-theme="dark"] .header-avatar{background:#1e293b;color:#bfdbfe;border-color:#334155}
html[data-theme="dark"] .icon-btn,html[data-theme="dark"] .mobile-back,html[data-theme="dark"] .attach-btn,html[data-theme="dark"] .record-btn,html[data-theme="dark"] .close-tab-btn,html[data-theme="dark"] .header-menu-btn{background:#111827!important;color:#dbeafe!important;border-color:#334155!important}
html[data-theme="dark"] .message-menu,
html[data-theme="dark"] .clear-menu,
html[data-theme="dark"] .conversation-menu{background:#111827;border-color:#334155;box-shadow:0 18px 50px rgba(0,0,0,.5)}
html[data-theme="dark"] .message-menu button,
html[data-theme="dark"] .clear-menu button,
html[data-theme="dark"] .conversation-menu button{color:#e5e7eb}
html[data-theme="dark"] .message-menu button:hover,
html[data-theme="dark"] .clear-menu button:hover,
html[data-theme="dark"] .conversation-menu button:hover{background:#1e293b}
html[data-theme="dark"] .message-menu button.danger,
html[data-theme="dark"] .clear-menu button.danger,
html[data-theme="dark"] .conversation-menu button.danger{color:#f87171}
html[data-theme="dark"] .reply-preview,html[data-theme="dark"] .attachment-preview-card,html[data-theme="dark"] .recording-bar{background:#0f172a!important;border-color:#334155!important;color:#e5e7eb}
html[data-theme="dark"] .sidebar-header h2,html[data-theme="dark"] .chat-header h2{color:#e5e7eb!important}
html[data-theme="dark"] .helper-text{color:#94a3b8!important}
html[data-theme="dark"] .e2ee-card{background:#111827;color:#e5e7eb}
html[data-theme="dark"] .e2ee-lock,html[data-theme="dark"] .e2ee-input-row button{background:#1e293b;color:#bfdbfe}
html[data-theme="dark"] .e2ee-card h2{color:#e5e7eb}
html[data-theme="dark"] .e2ee-card p:not(.portal-kicker),html[data-theme="dark"] .e2ee-card small{color:#94a3b8}

/* ===== Full-interface theme toggle beside Student account ===== */
.student-account-copy{min-width:0}
.account-actions{margin-left:auto;display:flex;align-items:center;gap:9px;flex:0 0 auto}
.account-theme-btn{
  min-height:44px;padding:0 12px;border:1px solid #d6dfeb;border-radius:var(--r-md);
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:#fff;color:#102a56;font:inherit;font-weight:800;cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}
.account-theme-btn:hover{background:#fff7e6;border-color:#f5c45f;transform:translateY(-1px)}
.account-theme-btn .theme-icon{font-size:16px;line-height:1}
.account-theme-btn .theme-label{font-size:13px}

.iphone-page-btn{
  min-height:44px;padding:0 12px;border:1px solid #d6dfeb;border-radius:var(--r-md);
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:#fff;color:#102a56;text-decoration:none;font:inherit;font-weight:800;cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}
.iphone-page-btn:hover{background:#eef6ff;border-color:#60a5fa;transform:translateY(-1px)}
html[data-theme="dark"] .iphone-page-btn{background:#172235!important;border-color:#34445f!important;color:#e8eef8!important}
html[data-theme="dark"] .iphone-page-btn:hover{background:#22304a!important;border-color:#60a5fa!important;color:#fff!important}
@media (max-width:720px){
  .account-actions{gap:6px}
  .account-theme-btn,.iphone-page-btn{padding:0 10px}
  .account-theme-btn .theme-label,.iphone-page-btn span:last-child{display:none}
}

/* Full dashboard dark theme */
html[data-theme="dark"] body,
html[data-theme="dark"] main{background:#050914!important;color:#e8eef8!important}
html[data-theme="dark"] .chat-layout{background:#090f1c!important;border-color:#253249!important;box-shadow:0 26px 80px rgba(0,0,0,.62)!important}
html[data-theme="dark"] .sidebar{background:#090f1c!important;border-right-color:#26344a!important}
html[data-theme="dark"] .dashboard-brand{background:linear-gradient(135deg,#07152f,#102a56)!important;border-bottom-color:#f59e0b!important}
html[data-theme="dark"] .sidebar-header{background:#0f1726!important;border-bottom-color:#26344a!important}
html[data-theme="dark"] .sidebar-header .eyebrow{color:#93a4bd!important}
html[data-theme="dark"] .sidebar-header h2{color:#f8fafc!important}
html[data-theme="dark"] .account-theme-btn,
html[data-theme="dark"] .icon-btn{background:#172235!important;border-color:#34445f!important;color:#e8eef8!important}
html[data-theme="dark"] .account-theme-btn:hover,
html[data-theme="dark"] .icon-btn:hover{background:#22304a!important;border-color:#f59e0b!important;color:#fff!important}
html[data-theme="dark"] .new-chat-box{background:#111b2c!important;border-color:#2b3a52!important;box-shadow:none!important}
html[data-theme="dark"] .new-chat-box label{color:#f1f5f9!important}
html[data-theme="dark"] .inline-form input{background:#09111f!important;border-color:#33445f!important;color:#f8fafc!important}
html[data-theme="dark"] .inline-form input::placeholder{color:#718199!important}
html[data-theme="dark"] .inline-form button,
html[data-theme="dark"] .send-btn{background:#f59e0b!important;color:#102a56!important}
html[data-theme="dark"] .inline-form button:hover,
html[data-theme="dark"] .send-btn:hover{background:#fbbf24!important}
html[data-theme="dark"] .conversation-heading{color:#aebbd0!important;border-color:#26344a!important}
html[data-theme="dark"] .text-btn{color:#7db4ff!important}
html[data-theme="dark"] .conversation-list{background:#090f1c!important}
html[data-theme="dark"] .conversation-item{background:transparent!important;border-color:transparent!important;color:#e8eef8!important}
html[data-theme="dark"] .conversation-item:hover,
html[data-theme="dark"] .conversation-item.active{background:#142035!important;border-color:#31425e!important;box-shadow:none!important}
html[data-theme="dark"] .conversation-item.active{border-left-color:#f59e0b!important}
html[data-theme="dark"] .conversation-name{color:#f8fafc!important}
html[data-theme="dark"] .conversation-preview,
html[data-theme="dark"] .conversation-status,
html[data-theme="dark"] .empty-state{color:#93a4bd!important}
html[data-theme="dark"] .conversation-more{color:#aebbd0!important}
html[data-theme="dark"] .conversation-more:hover{background:#22304a!important;color:#fff!important}
html[data-theme="dark"] .avatar,
html[data-theme="dark"] .header-avatar{background:#182641!important;border-color:#375071!important;color:#bfdbfe!important}
html[data-theme="dark"] .chat-panel{background:#070d18!important}
html[data-theme="dark"] .chat-header{background:#0f1726!important;border-bottom-color:#26344a!important}
html[data-theme="dark"] .chat-header h2{color:#f8fafc!important}
html[data-theme="dark"] .status-text{color:#93a4bd!important}
html[data-theme="dark"] .status-text.typing{color:#60a5fa!important}
html[data-theme="dark"] .header-menu-btn,
html[data-theme="dark"] .close-tab-btn,
html[data-theme="dark"] .mobile-back{background:transparent!important;border-color:transparent!important;color:#cbd5e1!important}
html[data-theme="dark"] .header-menu-btn:hover,
html[data-theme="dark"] .close-tab-btn:hover,
html[data-theme="dark"] .mobile-back:hover{background:#1b2940!important;color:#fff!important}
html[data-theme="dark"] .message-list{
  background:linear-gradient(rgba(6,12,23,.97),rgba(9,15,28,.98)),repeating-linear-gradient(0deg,transparent,transparent 31px,rgba(148,163,184,.035) 32px)!important;
}
html[data-theme="dark"] .message-row.mine .message-bubble{background:#1d4f91!important;color:#fff!important}
html[data-theme="dark"] .message-row:not(.mine) .message-bubble{background:#172235!important;border-color:#30415c!important;color:#edf2f7!important}
html[data-theme="dark"] .message-name{color:inherit!important}
html[data-theme="dark"] .message-time,
html[data-theme="dark"] .seen-time{color:#a8b5c8!important}
html[data-theme="dark"] .quoted-message{background:rgba(5,10,20,.32)!important;border-left-color:#60a5fa!important;color:#dbeafe!important}
html[data-theme="dark"] .message-composer{background:#0f1726!important;border-top-color:#26344a!important}
html[data-theme="dark"] .message-composer textarea{background:#09111f!important;border-color:#34445f!important;color:#f8fafc!important;caret-color:#60a5fa!important}
html[data-theme="dark"] .message-composer textarea:focus{border-color:#60a5fa!important;box-shadow:0 0 0 3px rgba(96,165,250,.14)!important}
html[data-theme="dark"] .message-composer textarea::placeholder{color:#718199!important}
html[data-theme="dark"] .attach-btn,
html[data-theme="dark"] .record-btn{background:#111b2c!important;border-color:#34445f!important;color:#bfdbfe!important}
html[data-theme="dark"] .attach-btn:hover,
html[data-theme="dark"] .record-btn:hover{background:#1b2940!important}
html[data-theme="dark"] .reply-preview,
html[data-theme="dark"] .attachment-preview,
html[data-theme="dark"] .recording-bar{background:#101b2d!important;border-color:#30415c!important;color:#e8eef8!important}
html[data-theme="dark"] .message-menu,
html[data-theme="dark"] .clear-menu,
html[data-theme="dark"] .conversation-menu{background:#111b2c!important;border-color:#30415c!important;box-shadow:0 22px 58px rgba(0,0,0,.62)!important}
html[data-theme="dark"] .message-menu button,
html[data-theme="dark"] .clear-menu button,
html[data-theme="dark"] .conversation-menu button{color:#edf2f7!important}
html[data-theme="dark"] .message-menu button:hover,
html[data-theme="dark"] .clear-menu button:hover,
html[data-theme="dark"] .conversation-menu button:hover{background:#1d2a40!important}
html[data-theme="dark"] .message-menu button.danger,
html[data-theme="dark"] .clear-menu button.danger,
html[data-theme="dark"] .conversation-menu button.danger{color:#fca5a5!important}
html[data-theme="dark"] .toast{background:#172235!important;color:#f8fafc!important;border-color:#34445f!important}
html[data-theme="dark"] .upload-progress{background:#111b2c!important;border-color:#30415c!important;color:#e8eef8!important}
html[data-theme="dark"] ::-webkit-scrollbar{width:10px;height:10px}
html[data-theme="dark"] ::-webkit-scrollbar-track{background:#090f1c}
html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#35445c;border:2px solid #090f1c;border-radius:var(--r-pill)}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:#4b5f7c}
@media(max-width:760px){
  .account-actions{gap:6px}.account-theme-btn{padding:0 10px}.account-theme-btn .theme-label{display:none}
}

/* Small iPhone shortcut in dashboard branding */
.dashboard-brand{display:flex;align-items:center;gap:12px}
.dashboard-brand-copy{min-width:0;flex:1 1 auto}
/* A slimmer "UPSC Learning Portal / Coaching Dashboard" header, so chats get the room */
.dashboard-brand{min-height:0;padding:10px 14px;gap:10px}
.dashboard-emblem{flex-basis:34px;width:34px;height:34px;border-radius:var(--r-sm);font-size:18px;box-shadow:0 5px 12px rgba(0,0,0,.16)}
.dashboard-brand p{font-size:8px;margin-bottom:2px}
.dashboard-brand h1{font-size:15px}
.iphone-page-icon{
  flex:0 0 30px;width:30px;height:30px;min-height:30px;padding:0;border-radius:9px;
  font-size:15px;line-height:1;gap:0;background:rgba(255,255,255,.14);
  color:#fff;border:1px solid rgba(255,255,255,.3);box-shadow:none;
}
.iphone-page-icon:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.55);transform:none}
html[data-theme="dark"] .iphone-page-icon{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.25)!important;color:#fff!important}
@media(max-width:720px){
  .iphone-page-icon{width:28px;height:28px;min-height:28px;flex-basis:28px;border-radius:8px;font-size:14px;padding:0}
}

/* Admin badge for the Abhijit account */
.admin-badge{
  display:inline-flex;
  align-items:center;
  gap:3px;
  margin-left:7px;
  padding:2px 6px;
  border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--admin-badge-color, #f59e0b) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--admin-badge-color, #f59e0b) 42%, transparent);
  color:var(--admin-badge-color, #f59e0b);
  font-size:10px;
  font-weight:800;
  line-height:1.2;
  vertical-align:middle;
  white-space:nowrap;
}
body.dark-mode .admin-badge,
html[data-theme="dark"] .admin-badge{
  background:color-mix(in srgb, var(--admin-badge-color, #fbbf24) 14%, transparent);
  border-color:color-mix(in srgb, var(--admin-badge-color, #fbbf24) 38%, transparent);
  color:var(--admin-badge-color, #fbbf24);
}
.name-label .admin-badge{font-size:9px;padding:1px 5px;margin-left:5px}
@media (max-width:520px){
  .admin-badge{font-size:9px;padding:1px 5px;margin-left:5px}
}

/* Settings */
.account-settings-btn{width:42px;height:42px;border:1px solid var(--line,#d9e2f0);border-radius:var(--r-md);background:transparent;color:inherit;font-size:18px;display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.account-settings-btn:hover{transform:translateY(-1px);background:rgba(127,127,127,.08)}
.settings-overlay{position:fixed;inset:0;z-index:10000;background:rgba(3,12,28,.58);backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px}
.settings-overlay.hidden{display:none}
.settings-card{width:min(430px,100%);background:#fff;color:#10264a;border-radius:22px;box-shadow:0 28px 80px rgba(0,0,0,.35);overflow:hidden;border:1px solid rgba(130,151,183,.25)}
.settings-header{display:flex;align-items:center;justify-content:space-between;padding:22px 22px 16px;border-bottom:1px solid #e2e8f1}
.settings-header h2{margin:2px 0 0;font-size:25px}.settings-header p{margin:0}.settings-header button{border:0;background:#eef3fa;width:38px;height:38px;border-radius:50%;font-size:25px;cursor:pointer;color:#10264a}
.settings-list{padding:8px 18px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 4px;border-bottom:1px solid #edf1f6;cursor:pointer}.settings-row:last-child{border-bottom:0}.settings-row span{display:grid;gap:4px}.settings-row strong{font-size:15px}.settings-row small{font-size:12px;color:#6d7c92;line-height:1.35}.settings-row input{width:44px;height:24px;accent-color:#f59e0b;cursor:pointer}

.settings-coming-soon{padding:34px 24px 38px;text-align:center;display:grid;place-items:center;gap:12px}.settings-coming-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;font-size:28px;background:#f3f7fc}.settings-coming-soon strong{font-size:21px;line-height:1.3}html[data-theme="dark"] .settings-coming-icon,body.dark-mode .settings-coming-icon{background:#17243a}

.settings-account{margin:8px 18px 20px;padding:15px;border-radius:14px;background:#f3f7fc;display:grid;gap:3px}.settings-account span,.settings-account small{font-size:12px;color:#6d7c92}.settings-account strong{font-size:16px}
html[data-theme="dark"] .settings-card,body.dark-mode .settings-card{background:#101b2d;color:#f5f7fb;border-color:#293a54}html[data-theme="dark"] .settings-header,body.dark-mode .settings-header{border-color:#293a54}html[data-theme="dark"] .settings-header button,body.dark-mode .settings-header button{background:#1b2a42;color:#fff}html[data-theme="dark"] .settings-row,body.dark-mode .settings-row{border-color:#24344e}html[data-theme="dark"] .settings-row small,body.dark-mode .settings-row small,html[data-theme="dark"] .settings-account span,html[data-theme="dark"] .settings-account small,body.dark-mode .settings-account span,body.dark-mode .settings-account small{color:#9eabc0}html[data-theme="dark"] .settings-account,body.dark-mode .settings-account{background:#17243a}
html.compact-messages .message-bubble{padding-top:8px;padding-bottom:7px;margin-top:3px;margin-bottom:3px}html.compact-messages .message-row{margin-block:3px}html.hide-message-times .message-time,html.hide-message-times .message-meta,html.hide-message-times [class*="seen"]{display:none!important}
@media(max-width:600px){.account-settings-btn{width:38px;height:38px;border-radius:11px}.settings-overlay{align-items:end;padding:0}.settings-card{border-radius:22px 22px 0 0;padding-bottom:max(8px,env(safe-area-inset-bottom))}.settings-header{padding-top:18px}}

/* Compact account action icons */
.account-icon-btn{
  width:42px;
  height:42px;
  min-width:42px;
  padding:0!important;
  border:1px solid var(--line,#d9e2f0);
  border-radius:var(--r-md);
  background:#fff;
  color:var(--upsc-navy,#173b70);
  display:grid;
  place-items:center;
  cursor:pointer;
  font-size:18px;
  font-weight:800;
  line-height:1;
  transition:transform .16s ease,background .16s ease,border-color .16s ease;
  flex:0 0 auto;
}
.account-icon-btn:hover{transform:translateY(-1px);background:#fff7e6;border-color:#f5c45f}
.account-icon-btn:active{transform:translateY(0) scale(.96)}
.account-theme-btn .theme-icon{font-size:17px;line-height:1}
.account-logout-btn span{font-size:22px;transform:translateX(1px)}
html[data-theme="dark"] .account-icon-btn{background:#172235!important;border-color:#34445f!important;color:#e8eef8!important}
html[data-theme="dark"] .account-icon-btn:hover{background:#22304a!important;border-color:#f59e0b!important;color:#fff!important}
@media(max-width:600px){
  .account-icon-btn{width:38px;height:38px;min-width:38px;border-radius:11px;font-size:16px}
  .account-logout-btn span{font-size:20px}
}

/* Cloud display-name settings */
.settings-name-form{padding:22px;display:grid;gap:10px;border-bottom:1px solid #e7edf5}
.settings-name-form label{font-weight:800;font-size:15px}
.settings-help{margin:0 0 4px;color:#6d7c92;font-size:12px;line-height:1.45}
.settings-name-form input{width:100%;min-height:46px;border:1px solid #ccd7e7;border-radius:var(--r-md);padding:0 14px;background:#fff;color:#10264a;font:inherit;font-size:16px;outline:none}
.settings-name-form input:focus{border-color:#2f6fed;box-shadow:0 0 0 3px rgba(47,111,237,.14)}
.settings-name-form button{min-height:44px;border:0;border-radius:var(--r-md);background:#163d78;color:#fff;font-weight:800;font-size:14px;cursor:pointer}
.settings-name-form button:disabled{opacity:.65;cursor:wait}
.compact-coming-soon{padding:20px 22px 24px;grid-template-columns:auto 1fr;text-align:left;justify-items:start}
.compact-coming-soon .settings-coming-icon{width:42px;height:42px;border-radius:13px;font-size:21px}
.compact-coming-soon strong{font-size:15px}
html[data-theme="dark"] .settings-name-form,body.dark-mode .settings-name-form{border-color:#293a54}
html[data-theme="dark"] .settings-help,body.dark-mode .settings-help{color:#9eabc0}
html[data-theme="dark"] .settings-name-form input,body.dark-mode .settings-name-form input{background:#17243a;color:#f5f7fb;border-color:#344762}
html[data-theme="dark"] .settings-name-form button,body.dark-mode .settings-name-form button{background:#2f6fed}
@media(max-width:600px){.settings-name-form{padding:20px}.compact-coming-soon{padding:18px 20px 24px}}

/* Online presence + emoji picker */
.emoji-btn{min-width:46px;min-height:46px;border:1px solid var(--border);border-radius:var(--r-md);background:#fff;font-size:20px;line-height:1;cursor:pointer}
.emoji-btn:disabled{opacity:.48;cursor:not-allowed}
.emoji-picker{position:fixed;z-index:1200;width:min(292px,calc(100vw - 16px));padding:10px;border:1px solid var(--border);border-radius:var(--r-lg);background:#fff;box-shadow:0 18px 50px rgba(15,23,42,.22)}
.emoji-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.emoji-grid button{border:0;background:transparent;border-radius:9px;min-height:38px;font-size:23px;cursor:pointer}
.emoji-grid button:hover,.emoji-grid button:focus-visible{background:#eef2ff;outline:none}
html[data-theme="dark"] .emoji-btn,html[data-theme="dark"] .emoji-picker{background:#111c2f!important;border-color:#34445f!important;color:#f8fafc!important}
html[data-theme="dark"] .emoji-grid button:hover,html[data-theme="dark"] .emoji-grid button:focus-visible{background:#24324a!important}
@media(max-width:420px){.emoji-btn{min-width:40px;min-height:42px;font-size:18px}.emoji-picker{width:min(280px,calc(100vw - 12px));padding:8px}.emoji-grid button{font-size:21px;min-height:36px}}

/* Presence reliability + compact inline emoji button */
.message-composer{grid-template-columns:auto minmax(0,1fr) auto auto!important;}
.message-input-wrap{position:relative;min-width:0;width:100%;}
.message-input-wrap textarea{width:100%;padding-right:38px!important;}
.emoji-btn-inline{position:absolute;right:7px;bottom:7px;width:30px;height:30px;min-width:30px!important;min-height:30px!important;padding:0;border:0!important;border-radius:50%;background:transparent!important;font-size:17px;display:grid;place-items:center;z-index:2;}
.emoji-btn-inline:hover,.emoji-btn-inline:focus-visible{background:rgba(99,102,241,.10)!important;outline:none;}
html[data-theme="dark"] .emoji-btn-inline{background:transparent!important;border:0!important;}
html[data-theme="dark"] .emoji-btn-inline:hover,html[data-theme="dark"] .emoji-btn-inline:focus-visible{background:rgba(96,165,250,.14)!important;}
@media(max-width:420px){.emoji-btn-inline{right:6px;bottom:6px;width:28px;height:28px;min-width:28px!important;min-height:28px!important;font-size:16px}.message-input-wrap textarea{padding-right:35px!important}}

/* Expanded mobile-style emoji library */
.emoji-picker{width:min(360px,calc(100vw - 16px));padding:0;overflow:hidden}
.emoji-picker-head{height:42px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
.emoji-picker-head strong{font-size:14px}
.emoji-picker-close{border:0;background:transparent;font-size:22px;line-height:1;cursor:pointer;color:inherit}
.emoji-tabs{display:flex;gap:2px;padding:6px 7px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.emoji-tabs::-webkit-scrollbar{display:none}
.emoji-tab{flex:0 0 31px;width:31px;height:31px;padding:0;border:0;border-radius:8px;background:transparent;font-size:17px;cursor:pointer}
.emoji-tab:hover,.emoji-tab:focus-visible,.emoji-tab.active{background:#e9eefc;outline:none}
.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;max-height:280px;overflow-y:auto;padding:8px}
.emoji-grid .emoji-item{border:0;background:transparent;border-radius:8px;min-width:0;height:38px;padding:0;font-size:24px;cursor:pointer;font-family:Apple Color Emoji,Segoe UI Emoji,Noto Color Emoji,sans-serif}
.emoji-grid .emoji-item:hover,.emoji-grid .emoji-item:focus-visible{background:#eef2ff;outline:none}
.emoji-btn-inline{font-family:Arial,sans-serif;font-weight:500;color:#667085;font-size:19px!important}
html[data-theme="dark"] .emoji-picker-head,html[data-theme="dark"] .emoji-tabs{border-color:#34445f}
html[data-theme="dark"] .emoji-tab:hover,html[data-theme="dark"] .emoji-tab:focus-visible,html[data-theme="dark"] .emoji-tab.active{background:#24324a}
html[data-theme="dark"] .emoji-grid .emoji-item:hover,html[data-theme="dark"] .emoji-grid .emoji-item:focus-visible{background:#24324a}
html[data-theme="dark"] .emoji-btn-inline{color:#cbd5e1!important}
@media(max-width:420px){.emoji-picker{width:calc(100vw - 12px)}.emoji-grid{grid-template-columns:repeat(7,1fr);max-height:260px;padding:7px}.emoji-grid .emoji-item{font-size:23px;height:37px}.emoji-tab{width:30px;flex-basis:30px}}

/* Instagram-style unread message preview */
.conversation-open{position:relative}
.unread-preview{color:#6d28d9!important;font-weight:800!important}
.unread-count-badge{flex:0 0 auto;min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;background:#7c3aed;color:#fff;font-size:11px;font-weight:900;line-height:1;box-shadow:0 4px 10px rgba(124,58,237,.25);margin-left:8px}
.conversation-item.has-unread .conversation-name{font-weight:900}
html[data-theme="dark"] .unread-preview{color:#c4b5fd!important}
html[data-theme="dark"] .unread-count-badge{background:#8b5cf6;color:#fff;box-shadow:none}
@media(max-width:600px){.unread-count-badge{min-width:20px;height:20px;font-size:10px;padding:0 5px;margin-left:5px}}

/* In-app photo preview */
.photo-preview-trigger{display:block;border:0;padding:0;margin:0;background:transparent;border-radius:14px;overflow:hidden;cursor:zoom-in;max-width:100%;line-height:0}
.photo-preview-trigger .chat-media{display:block}
.photo-preview{position:fixed;inset:0;z-index:10000;background:rgba(3,8,20,.94);display:flex;align-items:center;justify-content:center;padding:max(18px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.photo-preview.hidden{display:none!important}
.photo-preview img{max-width:min(96vw,1200px);max-height:90dvh;object-fit:contain;border-radius:var(--r-md);box-shadow:0 20px 70px rgba(0,0,0,.45);user-select:none;-webkit-user-drag:none}
.photo-preview-close{position:absolute;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));width:42px;height:42px;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(0,0,0,.5);color:#fff;font-size:30px;line-height:1;display:grid;place-items:center;cursor:pointer}
body.preview-open{overflow:hidden}
@media(max-width:760px){.photo-preview{padding:calc(env(safe-area-inset-top) + 10px) 8px calc(env(safe-area-inset-bottom) + 10px)}.photo-preview img{max-width:100%;max-height:84dvh;border-radius:8px}.photo-preview-close{width:38px;height:38px;font-size:27px}}

/* Theme control now lives inside Settings */
.settings-theme-list{padding-top:8px;padding-bottom:0;border-bottom:1px solid #e7edf5}
.settings-theme-list .settings-row{border-bottom:0}
.settings-theme-list input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:48px;height:28px;border-radius:var(--r-pill);background:#cbd5e1;position:relative;transition:.2s ease;flex:0 0 auto}
.settings-theme-list input[type="checkbox"]::after{content:"";position:absolute;width:22px;height:22px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.28);transition:.2s ease}
.settings-theme-list input[type="checkbox"]:checked{background:#2f6fed}
.settings-theme-list input[type="checkbox"]:checked::after{transform:translateX(20px)}
html[data-theme="dark"] .settings-theme-list,body.dark-mode .settings-theme-list{border-color:#293a54}

/* Fixed settings dropdown */
.settings-overlay{
  position:fixed;
  inset:0;
  z-index:10000;
  background:transparent;
  backdrop-filter:none;
  display:block;
  padding:0;
}
.settings-overlay.hidden{display:none}
.settings-card{
  position:fixed;
  top:var(--settings-top,78px);
  left:var(--settings-left,22px);
  right:auto;
  width:min(380px,calc(100vw - 28px));
  max-height:calc(100dvh - 96px);
  overflow:auto;
  border-radius:18px;
  box-shadow:0 18px 55px rgba(0,0,0,.28);
  animation:settingsDropIn .16s ease-out;
  transform-origin:top left;
}
@keyframes settingsDropIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
.settings-header{padding:17px 18px 12px}
.settings-header h2{font-size:21px}
.settings-theme-list{padding:4px 16px 0}
.settings-name-form{padding:17px 18px}
.compact-coming-soon{display:none!important}
@media(max-width:700px){
  .settings-card{
    top:var(--settings-top,68px);
    left:var(--settings-left,10px);
    right:auto;
    width:min(380px,calc(100vw - 20px));
    max-height:calc(100dvh - 82px - env(safe-area-inset-bottom));
    border-radius:17px;
    padding-bottom:max(4px,env(safe-area-inset-bottom));
  }
  .settings-overlay{align-items:initial;padding:0}
}

/* Settings refresh action */
.settings-refresh-list{padding:0 16px;border-bottom:1px solid #e7edf5}
.settings-refresh-btn{width:100%;border:0;background:transparent;color:inherit;display:flex;align-items:center;gap:12px;text-align:left;padding:14px 4px;cursor:pointer;font:inherit}
.settings-refresh-btn:hover{background:rgba(47,111,237,.06);border-radius:var(--r-sm)}
.settings-refresh-btn span:last-child{display:grid;gap:3px}
.settings-refresh-btn strong{font-size:15px}
.settings-refresh-btn small{font-size:12px;color:#6d7c92;line-height:1.35}
.settings-refresh-icon{width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;background:#eef3fa;color:#163d78;font-size:21px;font-weight:800;flex:0 0 auto}
html[data-theme="dark"] .settings-refresh-list,body.dark-mode .settings-refresh-list{border-color:#293a54}
html[data-theme="dark"] .settings-refresh-btn small,body.dark-mode .settings-refresh-btn small{color:#9eabc0}
html[data-theme="dark"] .settings-refresh-icon,body.dark-mode .settings-refresh-icon{background:#1b2a42;color:#8db4ff}

.media-loading-placeholder{
  padding:10px 12px;
  border:1px solid rgba(148,163,184,.28);
  border-radius:var(--r-md);
  font-size:.82rem;
  opacity:.72;
  margin:5px 0;
}

.edited-label{opacity:.72;font-style:italic}.message-menu .hidden{display:none!important}

/* Secure password reset inside Settings */
.settings-password-form{display:grid;gap:10px;padding:20px 22px;border-top:1px solid var(--border)}
.settings-password-form>label{font-weight:800;font-size:16px}
.settings-password-form input{width:100%;min-height:46px;padding:11px 13px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--panel,#fff);color:inherit;font:inherit;box-sizing:border-box}
.settings-password-form input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.14)}
.settings-password-form button{min-height:48px;border:0;border-radius:var(--r-md);background:#dc2626;color:#fff;font-weight:800;cursor:pointer}
.settings-password-form button:disabled{opacity:.65;cursor:wait}
html[data-theme="dark"] .settings-password-form{border-color:#334155}
html[data-theme="dark"] .settings-password-form input{background:#0b1220;border-color:#334155;color:#e5edf7}
@media(max-width:600px){.settings-password-form{padding:16px}}

/* Realtime audio call and top-bar logout */
.header-call-btn,.header-logout-btn{width:42px;height:42px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--panel,#fff);color:inherit;font-size:19px;display:grid;place-items:center;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.header-call-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.header-call-btn:not(:disabled):hover{background:var(--theme-accent,#2563eb);border-color:transparent;color:#fff}
.header-call-btn:disabled{opacity:.4;cursor:not-allowed}.header-call-btn:not(:disabled):hover,.header-logout-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(15,23,42,.12)}
.call-overlay{position:fixed;inset:0;z-index:3000;background:radial-gradient(900px 520px at 50% -12%,var(--theme-glow,rgba(56,102,229,.26)),transparent 62%),var(--call-scrim,rgba(3,8,20,.86));backdrop-filter:blur(14px) saturate(1.15);display:grid;place-items:center;padding:20px;animation:callFade .2s ease both}
.call-overlay.hidden{display:none!important}
@keyframes callFade{from{opacity:0}to{opacity:1}}
@keyframes callRise{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes callRing{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.9);opacity:0}100%{transform:scale(1.9);opacity:0}}
/* The card had no styling of its own: no background, width, radius or position.
   That also left .call-device-modal anchoring to the viewport. */
.call-card{position:relative;width:min(486px,calc(100vw - 28px));padding:32px 26px 26px;border-radius:28px;text-align:center;color:var(--theme-text,#eaf1ff);background:linear-gradient(168deg,var(--theme-panel,#202d44),var(--theme-bg,#090f1e));border:1px solid var(--theme-line,rgba(255,255,255,.13));box-shadow:0 30px 80px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.06);animation:callRise .26s cubic-bezier(.22,1,.36,1) both}
/* Jet Black is a true-black OLED theme, so the call drops the lift and the glow
   and goes flat black too, exactly like the chat surfaces. */
html[data-app-theme="jet-black"]:not([data-app-theme="default"]) .call-card{background:var(--theme-panel,#0b0b0b);border-color:var(--theme-line,#1c1c1c);box-shadow:0 24px 70px rgba(0,0,0,.85)}
html[data-app-theme="jet-black"]:not([data-app-theme="default"]) .call-overlay{--call-scrim:rgba(0,0,0,.92)}
html[data-app-theme="jet-black"]:not([data-app-theme="default"]) .call-card:has(.call-video-stage:not(.hidden)),
html[data-app-theme="jet-black"]:not([data-app-theme="default"]) .call-video-stage{background:#000}
html[data-app-theme="jet-black"]:not([data-app-theme="default"]) .call-avatar{background:linear-gradient(145deg,#2a2a2a,#101010);box-shadow:0 14px 34px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.08)}
html[data-app-theme="jet-black"]:not([data-app-theme="default"]) .call-avatar::before{border-color:var(--theme-accent,#c3c7cc);opacity:.5}
.call-avatar{width:104px;height:104px;margin:6px auto 20px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,var(--theme-accent,#3b82f6),var(--theme-accent-dark,#1e3a8a));color:#fff;font-size:40px;font-weight:800;letter-spacing:.5px;transition:transform .2s ease,box-shadow .2s ease;position:relative;box-shadow:0 14px 34px rgba(29,78,216,.45),inset 0 2px 0 rgba(255,255,255,.22)}
.call-avatar::before{content:'';position:absolute;inset:-3px;border-radius:50%;border:2px solid rgba(96,165,250,.6);animation:callRing 2.4s cubic-bezier(.2,.6,.3,1) infinite;pointer-events:none}
.call-avatar.speaking{box-shadow:0 0 0 5px rgba(34,197,94,.35),0 0 34px rgba(34,197,94,.6);transform:scale(1.05)}
.call-avatar.speaking::before{border-color:rgba(34,197,94,.7);animation-duration:1.4s}
.call-avatar.speaking::after{content:'';position:absolute;bottom:2px;right:2px;width:14px;height:14px;background:#22c55e;border:2px solid #0f1b30;border-radius:50%;animation:pulse 1.2s infinite}
.call-head{display:flex;flex-direction:column;align-items:center;gap:0}
.call-head-copy{min-width:0}
.call-card h2{margin:0 0 6px;font-size:26px;font-weight:800;letter-spacing:-.02em}
.call-card p{margin:0 0 14px;color:var(--theme-muted,#a9bcd8);font-size:14.5px;font-weight:600}
.call-duration{margin:0 auto 20px;display:inline-block;padding:5px 14px;border-radius:var(--r-pill);background:rgba(255,255,255,.08);border:1px solid var(--theme-line,rgba(255,255,255,.1));font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--theme-text,#dbe7fb)}
.call-actions{display:flex;justify-content:center;align-items:flex-start;gap:16px;flex-wrap:wrap}
.call-actions.hidden{display:none!important}
/* Round icon buttons, Instagram-style: the icon carries the meaning, the label
   lives in aria-label/title so screen readers and tooltips still work. */
.call-btn{position:relative;width:56px;height:56px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);transition:transform .16s ease,background .16s ease,box-shadow .16s ease}
.call-btn svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.call-btn:hover{background:rgba(255,255,255,.28);transform:translateY(-2px)}
.call-btn:active{transform:translateY(0) scale(.94)}
.call-btn:focus-visible{outline:2px solid #93c5fd;outline-offset:3px}
.call-btn .icon-off{display:none}
.call-btn.muted .icon-on,.call-btn.active .icon-on{display:none}
.call-btn.muted .icon-off,.call-btn.active .icon-off{display:block}
.call-btn .icon-hangup{transform:rotate(135deg)}
/* On = filled white, the way Instagram shows an engaged control. */
.call-actions .call-mute.muted,.call-actions .call-video-toggle.active{background:#fff;color:#0f172a}
.call-actions .call-mirror.active,.call-actions .call-speaker.active{background:linear-gradient(#a855f7,#7c3aed);color:#fff;box-shadow:0 10px 24px rgba(124,58,237,.45)}
.call-actions .call-accept{background:#22c55e;box-shadow:0 10px 26px rgba(34,197,94,.45)}
.call-actions .call-accept:hover{background:#16a34a}
.call-actions .call-reject,.call-actions .call-end{background:#ef4444;box-shadow:0 10px 26px rgba(239,68,68,.45)}
.call-actions .call-reject:hover,.call-actions .call-end:hover{background:#dc2626}
/* Accept/Decline keep a word under them: getting those two wrong is costly. */
.call-btn-label{position:absolute;top:64px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:600;color:#dbe7fb;white-space:nowrap}
#incomingCallActions{padding-bottom:26px}
.call-diag-btn{margin:18px auto 0;width:38px;height:38px;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#93a7c4;border-radius:50%;cursor:pointer;transition:color .15s,background .15s}
.call-diag-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.call-diag-btn:hover{color:#fff;background:rgba(255,255,255,.18)}
@media(prefers-reduced-motion:reduce){.call-overlay,.call-card{animation:none}.call-avatar::before{animation:none;opacity:0}}
html[data-theme="dark"] .header-call-btn,html[data-theme="dark"] .header-logout-btn{background:#111827;border-color:#334155;color:#e5eefc}
@media(max-width:600px){.header-call-btn,.header-logout-btn{width:38px;height:38px;border-radius:var(--r-sm)}.header-actions{gap:6px}
  .call-overlay{padding:0}
  .call-overlay .call-card{width:100%;height:100dvh;max-width:none;border-radius:0;border:0;padding:44px 20px 30px;display:flex;flex-direction:column;justify-content:center}
  .call-overlay .call-actions{margin-top:auto}
  .call-card:has(.call-video-stage:not(.hidden)){padding:0;justify-content:flex-start}}

/* Visible call control beside the active chat name */
.chat-person-copy{min-width:0}
.chat-name-row{display:flex;align-items:center;gap:10px;min-width:0}
.chat-name-row h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-name-row .header-call-btn{width:34px;height:34px;min-width:34px;border-radius:var(--r-sm);font-size:16px;flex:0 0 auto}
.header-actions .header-logout-btn{display:grid!important}
@media(max-width:600px){.chat-name-row{gap:6px}.chat-name-row .header-call-btn{width:32px;height:32px;min-width:32px;font-size:15px}.chat-person{min-width:0}.chat-person-copy{min-width:0}}

/* Call controls, duration, and history */
.call-device-modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(380px,calc(100% - 32px));background:#0f172a;border:1px solid rgba(255,255,255,.18);border-radius:var(--r-lg);padding:18px 20px;box-shadow:0 20px 40px rgba(0,0,0,.6);z-index:20;text-align:left;color:#e2e8f0}
.call-device-modal.hidden{display:none!important}
.call-device-head{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:15px;margin-bottom:14px;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:8px}
.call-device-close{background:none;border:none;color:#94a3b8;font-size:20px;cursor:pointer;padding:0 4px;line-height:1}
.call-device-close:hover{color:#fff}
.call-device-row{margin-bottom:12px}
.call-device-row label{display:block;font-size:12px;font-weight:600;color:#94a3b8;margin-bottom:4px}
.call-device-row select{width:100%;padding:8px 10px;border-radius:8px;background:#1e293b;border:1px solid rgba(255,255,255,.15);color:#f8fafc;font-size:13px;outline:none}
.call-device-row select:focus{border-color:#6366f1}

/* Call Event Pill inside Chat History (Batch 4) */
.call-event-pill{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.08);margin:2px 0;min-width:220px;max-width:100%}
.call-pill-icon-wrap{position:relative;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:16px;flex-shrink:0}
.call-pill-arrow{position:absolute;bottom:-2px;right:-2px;font-size:12px;font-weight:900;line-height:1}
.call-pill-completed .call-pill-icon-wrap{background:#dcfce7;color:#15803d}
.call-pill-completed .call-pill-arrow{color:#16a34a}
.call-pill-missed .call-pill-icon-wrap{background:#fee2e2;color:#b91c1c}
.call-pill-missed .call-pill-arrow{color:#dc2626}
.call-pill-declined .call-pill-icon-wrap,.call-pill-cancelled .call-pill-icon-wrap{background:#f1f5f9;color:#64748b}
.call-pill-declined .call-pill-arrow,.call-pill-cancelled .call-pill-arrow{color:#94a3b8}
.call-pill-info{flex:1;min-width:0}
.call-pill-title{font-size:13.5px;font-weight:700;line-height:1.25;color:var(--text, #0f172a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.call-pill-missed .call-pill-title{color:#dc2626}
.call-pill-sub{font-size:11px;color:var(--muted, #64748b);margin-top:2px}
.call-pill-action-btn{background:transparent;border:1px solid var(--border, #cbd5e1);border-radius:8px;padding:5px 10px;font-size:11px;font-weight:700;color:var(--text, #334155);cursor:pointer;flex-shrink:0;transition:all .15s ease}
.call-pill-action-btn:hover{background:var(--primary, #6366f1);color:#fff;border-color:transparent}
html[data-theme="dark"] .call-event-pill{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
html[data-theme="dark"] .call-pill-completed .call-pill-icon-wrap{background:rgba(34,197,94,.2);color:#4ade80}
html[data-theme="dark"] .call-pill-missed .call-pill-icon-wrap{background:rgba(239,68,68,.2);color:#f87171}
html[data-theme="dark"] .call-pill-missed .call-pill-title{color:#f87171}
html[data-theme="dark"] .call-pill-declined .call-pill-icon-wrap,.call-pill-cancelled .call-pill-icon-wrap{background:rgba(148,163,184,.15);color:#cbd5e1}
html[data-theme="dark"] .call-pill-title{color:#f1f5f9}
html[data-theme="dark"] .call-pill-action-btn{border-color:rgba(255,255,255,.2);color:#e2e8f0}

/* Audio + video calling */
.call-video-stage{position:relative;width:100%;aspect-ratio:4/3;margin:0 0 18px;border-radius:18px;overflow:hidden;background:var(--theme-soft,#020617);border:1px solid var(--theme-line,rgba(255,255,255,.14));box-shadow:inset 0 0 60px rgba(0,0,0,.5)}
.call-video-stage.hidden,.remote-call-video.hidden,.local-call-video.hidden,.call-avatar.hidden{display:none!important}
.remote-call-video{width:100%;height:100%;object-fit:contain;background:#000}
/* Shown in place of the remote video when the other camera is off. */
.remote-video-off{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:14px;background:var(--theme-soft,#0b1220);color:var(--theme-muted,#94a3b8);z-index:2}
.remote-video-off.hidden{display:none!important}
.remote-video-off p{margin:0;font-size:13.5px;font-weight:600}
.remote-video-off-avatar{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;font-size:36px;font-weight:800;color:#fff;background:linear-gradient(145deg,var(--theme-accent,#3b82f6),var(--theme-accent-dark,#1e3a8a))}
html[data-app-theme="jet-black"]:not([data-app-theme="default"]) .remote-video-off{background:#000}
html[data-app-theme="jet-black"]:not([data-app-theme="default"]) .remote-video-off-avatar{background:linear-gradient(145deg,#2a2a2a,#101010)}
.local-call-video{position:absolute;right:14px;bottom:14px;width:26%;max-width:190px;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg);border:0;background:#111827;box-shadow:0 12px 34px rgba(0,0,0,.55);transition:transform .2s ease,box-shadow .2s ease;z-index:3}
.local-call-video:hover{transform:scale(1.06);box-shadow:0 14px 38px rgba(0,0,0,.6)}
/* Mirror toggle. The class is set on our own preview locally and on the remote
   element by the peer's mirror-state signal, so both sides see the same picture. */
.local-call-video.mirrored{transform:scaleX(-1)}
.local-call-video.mirrored:hover{transform:scaleX(-1) scale(1.06)}
.remote-call-video.mirrored{transform:scaleX(-1)}
.call-actions .call-video-toggle.active{background:linear-gradient(#2563eb,#1d4ed8);border-color:transparent;box-shadow:0 10px 22px rgba(37,99,235,.4)}
.call-actions .call-mirror.active,.call-actions .call-speaker.active{background:linear-gradient(#8b5cf6,#6d28d9);border-color:transparent;box-shadow:0 10px 22px rgba(109,40,217,.4)}
.nudge-overlay{position:fixed;inset:0;z-index:3200;background:rgba(3,8,20,.72);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px}
.nudge-overlay.hidden{display:none!important}
.nudge-card{width:min(420px,calc(100vw - 32px));background:var(--card,#111827);color:var(--text,#e5edf9);border-radius:18px;padding:20px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.nudge-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.nudge-head strong{font-size:17px}
.nudge-close{border:0;background:transparent;color:inherit;font-size:26px;line-height:1;cursor:pointer;opacity:.7}
.nudge-close:hover{opacity:1}
.nudge-sub{margin:0 0 14px;font-size:13px;opacity:.7}
.nudge-presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.nudge-presets button{border:1px solid rgba(148,163,184,.35);background:transparent;color:inherit;border-radius:var(--r-pill);padding:7px 13px;font-size:13px;cursor:pointer;transition:background .15s,border-color .15s}
.nudge-presets button:hover,.nudge-presets button.selected{background:rgba(37,99,235,.18);border-color:#2563eb}
.nudge-label{display:block;font-size:12px;font-weight:700;opacity:.65;margin-bottom:6px}
.nudge-input{width:100%;box-sizing:border-box;resize:vertical;border-radius:var(--r-md);border:1px solid rgba(148,163,184,.3);background:rgba(148,163,184,.08);color:inherit;padding:11px 12px;font:inherit;font-size:14px}
.nudge-input:focus{outline:2px solid #2563eb;outline-offset:1px}
.nudge-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.nudge-count{font-size:12px;opacity:.55}
.nudge-send{border:0;border-radius:var(--r-pill);background:#25d366;color:#04240f;font-weight:800;padding:11px 20px;cursor:pointer;font-size:14px}
.nudge-send:disabled{opacity:.55;cursor:not-allowed}
.call-quality{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:0 auto 18px;padding:5px 13px;border-radius:var(--r-pill);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-size:12.5px;font-weight:700}
.call-quality[hidden]{display:none!important}
.call-quality-bars{display:inline-flex;align-items:flex-end;gap:3px;height:14px}
.call-quality-bars i{width:4px;border-radius:2px;background:currentColor;opacity:.22}
.call-quality-bars i:nth-child(1){height:6px}.call-quality-bars i:nth-child(2){height:10px}.call-quality-bars i:nth-child(3){height:14px}
.call-quality.quality-good{color:#22c55e}.call-quality.quality-good .call-quality-bars i{opacity:1}
.call-quality.quality-fair{color:#f59e0b}.call-quality.quality-fair .call-quality-bars i:nth-child(-n+2){opacity:1}
.call-quality.quality-poor{color:#ef4444}.call-quality.quality-poor .call-quality-bars i:nth-child(1){opacity:1}
/* Video mode, Instagram-style: video edge to edge, identity top-left, round
   controls floating over the bottom, self-view as a card in the corner. */
.call-card:has(.call-video-stage:not(.hidden)){width:min(880px,calc(100vw - 24px));height:min(560px,calc(100dvh - 40px));padding:0;overflow:hidden;background:var(--theme-bg,#050b18);
  /* Drag the bottom-right corner to resize. This is the browser's own handle,
     which is why there is no drag code anywhere in this project. */
  resize:both;min-width:340px;min-height:260px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}
.call-card:has(.call-video-stage:not(.hidden)) .call-video-stage{position:absolute;inset:0;width:auto;height:auto;aspect-ratio:auto;margin:0;border:0;border-radius:0;box-shadow:none}
.call-card:has(.call-video-stage:not(.hidden))::before{content:'';position:absolute;top:0;left:0;right:0;height:130px;z-index:3;background:linear-gradient(rgba(2,6,23,.75),transparent);pointer-events:none}
.call-card:has(.call-video-stage:not(.hidden)) .call-head{position:absolute;top:14px;left:16px;right:112px;z-index:4;flex-direction:row;align-items:center;gap:10px;text-align:left;pointer-events:none}
.call-card:has(.call-video-stage:not(.hidden)) .call-avatar{display:grid;width:38px;height:38px;margin:0;font-size:16px;box-shadow:none;flex:0 0 auto}
.call-card:has(.call-video-stage:not(.hidden)) .call-avatar::before{display:none}
.call-card:has(.call-video-stage:not(.hidden)) h2{font-size:16px;margin:0;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.call-card:has(.call-video-stage:not(.hidden)) .call-head p{font-size:12.5px;margin:1px 0 0;color:#cfdcf0;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.call-card:has(.call-video-stage:not(.hidden)) .call-duration,
.call-card:has(.call-video-stage:not(.hidden)) .call-quality{position:absolute;left:50%;transform:translateX(-50%);z-index:4;margin:0;background:rgba(2,6,23,.5);backdrop-filter:blur(8px)}
.call-card:has(.call-video-stage:not(.hidden)) .call-duration{top:16px}
.call-card:has(.call-video-stage:not(.hidden)) .call-quality{top:52px}
.call-card:has(.call-video-stage:not(.hidden)) .call-actions{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:60px 16px 22px;background:linear-gradient(transparent,rgba(2,6,23,.8) 60%)}
.call-card:has(.call-video-stage:not(.hidden)) .call-diag-btn{position:absolute;left:14px;bottom:22px;z-index:6;margin:0;background:rgba(2,6,23,.45);backdrop-filter:blur(8px)}
/* Keep the self-view clear of the floating control bar. */
.call-card:has(.call-video-stage:not(.hidden)) .local-call-video{bottom:96px}
.call-card:fullscreen{width:100vw;height:100dvh;max-width:none;max-height:none;border-radius:0;border:0;resize:none;animation:none;background:var(--theme-bg,#050b18)}
.call-card:fullscreen .local-call-video{max-width:280px;width:20%}
.call-card:-webkit-full-screen{width:100vw;height:100dvh;max-width:none;border-radius:0;border:0;resize:none}
.call-actions .call-fullscreen.active{background:#fff;color:#0f172a}
/* The resize handle sits where the self-view is, so nudge it clear. */
.call-card:has(.call-video-stage:not(.hidden))::after{content:'';position:absolute;right:0;bottom:0;width:18px;height:18px;z-index:7;pointer-events:none;background:linear-gradient(135deg,transparent 50%,rgba(255,255,255,.35) 50%,rgba(255,255,255,.35) 60%,transparent 60%)}
.call-card:fullscreen::after{display:none}
@media(max-width:600px){.call-video-stage{aspect-ratio:3/4;max-height:58dvh}.local-call-video{width:28%;right:8px;bottom:8px}.call-actions{flex-wrap:wrap}
  .call-card:has(.call-video-stage:not(.hidden)){width:100%;height:100dvh;max-width:none;max-height:none;min-width:0;border-radius:0;resize:none}
  /* The plain-stage rule above caps height at 58dvh; in video mode the stage is
     absolutely positioned and must fill the card instead. */
  .call-card:has(.call-video-stage:not(.hidden)) .call-video-stage{max-height:none;aspect-ratio:auto}
  .call-card:has(.call-video-stage:not(.hidden))::after{display:none}
  .call-card:has(.call-video-stage:not(.hidden)) .call-actions{padding-bottom:30px;gap:12px}
  .call-card:has(.call-video-stage:not(.hidden)) .call-diag-btn{display:none}
  .call-card:has(.call-video-stage:not(.hidden)) .local-call-video{bottom:172px;width:32%}
  .call-btn{width:52px;height:52px}
  .call-btn svg{width:23px;height:23px}
}

/* Minimised call: a small window the user can drag anywhere, with the chat usable
   underneath. The #callOverlay id outranks the video-mode rules above, which
   otherwise size and absolutely position every part of the card. */
#callOverlay.call-minimized{inset:auto;right:16px;bottom:16px;padding:0;display:block;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;animation:none}
#callOverlay.call-minimized .call-card{width:252px;height:auto;min-width:0;min-height:0;max-width:calc(100vw - 16px);max-height:none;padding:10px;border-radius:18px;resize:none;overflow:hidden;display:block;text-align:left;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;animation:none;box-shadow:0 18px 50px rgba(0,0,0,.55)}
#callOverlay.call-minimized .call-card.dragging{cursor:grabbing}
#callOverlay.call-minimized .call-card::before,#callOverlay.call-minimized .call-card::after{display:none}
#callOverlay.call-minimized .call-video-stage:not(.hidden){position:relative;inset:auto;width:100%;height:auto;aspect-ratio:4/3;max-height:none;margin:0 0 8px;border-radius:var(--r-md)}
#callOverlay.call-minimized .local-call-video{width:34%;right:6px;bottom:6px;border-radius:8px}
#callOverlay.call-minimized .call-head{position:static;flex-direction:row;align-items:center;gap:8px;margin:0 0 8px;padding-right:62px;text-align:left}
#callOverlay.call-minimized .call-avatar{width:32px;height:32px;margin:0;font-size:14px;flex:0 0 auto;box-shadow:none}
#callOverlay.call-minimized .call-avatar::before,#callOverlay.call-minimized .call-avatar::after{display:none}
#callOverlay.call-minimized .call-head-copy{flex:1;min-width:0}
#callOverlay.call-minimized .call-card h2{font-size:14px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#callOverlay.call-minimized .call-head p{font-size:11.5px;margin:0}
#callOverlay.call-minimized .call-duration{position:absolute;top:10px;right:10px;left:auto;transform:none;z-index:4;margin:0;padding:2px 8px;font-size:11px}
#callOverlay.call-minimized .call-quality,#callOverlay.call-minimized .call-diag-btn,#callOverlay.call-minimized .call-device-modal,
#callOverlay.call-minimized .call-fullscreen,#callOverlay.call-minimized .call-mirror,#callOverlay.call-minimized .call-speaker,#callOverlay.call-minimized .call-settings-btn{display:none!important}
#callOverlay.call-minimized .call-actions{position:static;padding:0;margin:0;gap:10px;background:none;flex-wrap:nowrap;justify-content:center}
#callOverlay.call-minimized .call-btn{width:42px;height:42px}
#callOverlay.call-minimized .call-btn svg{width:19px;height:19px}

/* Phones: seven call controls (full screen, mute, video, mirror, settings, minimise,
   end) must fit one row. At 56/52 px they wrapped End call onto a second row on a
   390 px screen. 40 px buttons with 6 px gaps need 316 px, which fits the 320 px an
   audio call leaves inside its padding on a 360 px phone (checked at 360 and 390 px). */
@media(max-width:600px){#activeCallActions{gap:6px}#activeCallActions .call-btn{width:40px;height:40px}#activeCallActions .call-btn svg{width:18px;height:18px}}

/* Notes button: a shared note changed since you last looked (count badge + accent ring). */
.login-sessions-btn.has-note-updates{border-color:var(--theme-accent,#60a5fa);box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-accent,#60a5fa) 22%,transparent)}
.login-sessions-btn .notes-update-badge{margin-left:2px}

/* Stickers and message reactions */
.message-input-wrap textarea{padding-right:76px!important}
.sticker-btn-inline{position:absolute;right:39px;bottom:7px;width:30px;height:30px;min-width:30px!important;min-height:30px!important;padding:0;border:0!important;border-radius:50%;background:transparent!important;font-size:18px;display:grid;place-items:center;z-index:2;color:#667085;cursor:pointer}
.sticker-btn-inline:hover,.sticker-btn-inline:focus-visible{background:#eef2ff!important}
.sticker-btn-inline:disabled{opacity:.45;cursor:not-allowed}
.sticker-picker{position:fixed;z-index:1250;width:min(310px,calc(100vw - 16px));padding:10px;border:1px solid var(--border);border-radius:var(--r-lg);background:#fff;box-shadow:0 18px 50px rgba(15,23,42,.22)}
.sticker-picker.hidden,.reaction-picker.hidden{display:none!important}
.sticker-picker-head{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 9px}
.sticker-picker-head button{border:0;background:transparent;font-size:25px;cursor:pointer}
.sticker-picker-tabs{display:flex;gap:6px;margin-bottom:8px}
.sticker-picker-tabs button{border:1px solid var(--border);background:#f8fafc;border-radius:var(--r-pill);padding:6px 13px;font-weight:700;cursor:pointer}
.sticker-picker-tabs button.active{background:#ede9fe;border-color:#c4b5fd;color:#6d28d9}
.sticker-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;max-height:290px;overflow:auto}
.sticker-choice{border:1px solid transparent;background:#f8fafc;border-radius:14px;min-height:61px;font-size:34px;cursor:pointer;display:grid;place-items:center}
.sticker-choice:hover{background:#ede9fe;border-color:#c4b5fd;transform:scale(1.04)}
.no-saved-stickers{grid-column:1/-1;padding:25px 10px;text-align:center;color:var(--muted)}
.chat-sticker{font-size:58px;line-height:1.1;padding:3px 2px;filter:drop-shadow(0 3px 5px rgba(15,23,42,.14));user-select:none}
.message-reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.reaction-chip{border:1px solid #dbe3ef;background:#fff;border-radius:var(--r-pill);padding:2px 7px;font-size:14px;cursor:pointer;line-height:1.25}
.reaction-chip.mine{border-color:#8b5cf6;background:#f3e8ff}
.reaction-chip span{font-size:11px;font-weight:800;margin-left:2px}
.reaction-picker{position:fixed;z-index:1300;display:flex;gap:3px;padding:7px;background:#fff;border:1px solid var(--border);border-radius:var(--r-pill);box-shadow:0 16px 42px rgba(15,23,42,.22)}
.reaction-picker button{border:0;background:transparent;border-radius:50%;width:38px;height:38px;font-size:22px;cursor:pointer}
.reaction-picker button:hover{background:#f1f5f9;transform:scale(1.15)}
html[data-theme="dark"] .sticker-picker,html[data-theme="dark"] .reaction-picker{background:#111827;border-color:#334155}
html[data-theme="dark"] .sticker-choice,html[data-theme="dark"] .sticker-picker-tabs button{background:#172033;color:#e5e7eb;border-color:#334155}
html[data-theme="dark"] .reaction-chip{background:#111827;border-color:#475569;color:#e5e7eb}
html[data-theme="dark"] .reaction-chip.mine{background:#312e81;border-color:#8b5cf6}
html[data-theme="dark"] .sticker-btn-inline:hover{background:rgba(96,165,250,.14)!important}
@media(max-width:520px){.sticker-grid{grid-template-columns:repeat(4,1fr)}.chat-sticker{font-size:52px}.reaction-picker button{width:35px;height:35px;font-size:20px}}

/* Visible sticker control beside Emoji */
.message-input-wrap textarea{padding-right:126px!important}
.sticker-btn-inline{
  right:41px!important;bottom:7px!important;width:auto!important;min-width:78px!important;height:32px!important;
  padding:0 9px!important;border:1px solid #b8c7dc!important;border-radius:10px!important;
  background:#eef4ff!important;color:#244a7c!important;font-size:13px!important;font-weight:800!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;
  box-shadow:0 1px 3px rgba(15,23,42,.12)!important;z-index:4!important;
}
.sticker-btn-inline:hover,.sticker-btn-inline:focus-visible{background:#dfeaff!important;border-color:#7ea5d8!important}
.sticker-btn-inline:disabled{opacity:.42!important}
.sticker-btn-label{display:inline!important}
.emoji-btn-inline{right:7px!important;z-index:5!important}
html[data-theme="dark"] .sticker-btn-inline{background:#17263d!important;border-color:#3e5c80!important;color:#dbeafe!important}
html[data-theme="dark"] .sticker-btn-inline:hover{background:#213653!important}
@media(max-width:520px){
  .message-input-wrap textarea{padding-right:104px!important}
  .sticker-btn-inline{min-width:61px!important;padding:0 6px!important;font-size:0!important}
  .sticker-btn-inline span:first-child{font-size:18px!important}
  .sticker-btn-label{display:none!important}
}

/* Compact sticker button + desktop import */
.message-input-wrap textarea{padding-right:76px!important}
.sticker-btn-inline{right:39px!important;bottom:8px!important;width:27px!important;min-width:27px!important;height:27px!important;min-height:27px!important;padding:0!important;border:0!important;border-radius:50%!important;background:transparent!important;color:#8290a6!important;box-shadow:none!important;display:grid!important;place-items:center!important}
.sticker-btn-inline:hover,.sticker-btn-inline:focus-visible{background:#eef2ff!important;color:#315b95!important}
.sticker-symbol{font-size:17px;line-height:1;transform:rotate(45deg);display:block}
.sticker-btn-label{display:none!important}
.import-sticker-btn{margin-left:auto!important;background:#e8f1ff!important;color:#24558d!important;border-color:#a9c3e5!important}
.imported-sticker-choice{overflow:hidden;padding:4px!important}
.imported-sticker-choice img,.imported-sticker-choice video{display:block;width:100%;height:58px;object-fit:contain;border-radius:var(--r-sm);pointer-events:none}
.chat-media-sticker{display:block;width:min(170px,42vw)!important;max-height:170px!important;object-fit:contain!important;border-radius:8px!important;background:transparent!important;border:0!important;box-shadow:none!important}
html[data-theme="dark"] .sticker-btn-inline{background:transparent!important;border:0!important;color:#9fb0c8!important}
html[data-theme="dark"] .sticker-btn-inline:hover{background:rgba(96,165,250,.14)!important}
html[data-theme="dark"] .import-sticker-btn{background:#1c3351!important;color:#dbeafe!important;border-color:#3d5f86!important}
@media(max-width:520px){.message-input-wrap textarea{padding-right:76px!important}.sticker-btn-inline{width:27px!important;min-width:27px!important;height:27px!important;padding:0!important}.imported-sticker-choice img,.imported-sticker-choice video{height:54px}.chat-media-sticker{width:min(145px,47vw)!important;max-height:145px!important}}

/* iPhone-style combined Emoji + Sticker picker */
.composer-picker-modes{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px 10px;border-bottom:1px solid var(--border);background:#f8fafc}
.composer-picker-mode{min-height:34px;border:0;border-radius:var(--r-sm);background:transparent;color:#64748b;font-weight:800;cursor:pointer}
.composer-picker-mode.active{background:#fff;color:#4f46e5;box-shadow:0 1px 5px rgba(15,23,42,.12)}
.sticker-picker.sticker-picker-embedded{position:static!important;width:auto!important;max-width:none!important;padding:10px!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;z-index:auto!important}
.sticker-picker-embedded .sticker-picker-tabs{margin-bottom:8px}
html[data-theme="dark"] .composer-picker-modes{background:#0f172a;border-color:#34445f}
html[data-theme="dark"] .composer-picker-mode{color:#9fb0c8}
html[data-theme="dark"] .composer-picker-mode.active{background:#1e293b;color:#bfdbfe;box-shadow:none}
.message-input-wrap textarea{padding-right:44px!important}
@media(max-width:520px){.message-input-wrap textarea{padding-right:44px!important}.composer-picker-modes{padding:7px 8px}.composer-picker-mode{min-height:32px;font-size:13px}}

/* Drag-and-drop attachments */
html.file-drag-active::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:3000;
  background:rgba(37,99,235,.12);
  backdrop-filter:blur(2px);
  pointer-events:none;
}
html.file-drag-active::after{
  content:"Drop photo, video, or voice note to attach";
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:3001;
  width:min(440px,calc(100vw - 36px));
  padding:28px 22px;
  border:2px dashed #2563eb;
  border-radius:20px;
  background:rgba(255,255,255,.96);
  color:#1d4ed8;
  box-shadow:0 24px 70px rgba(15,23,42,.28);
  text-align:center;
  font:800 16px/1.35 system-ui,sans-serif;
  pointer-events:none;
}
html[data-theme="dark"].file-drag-active::after{
  background:rgba(15,23,42,.96);
  color:#93c5fd;
  border-color:#60a5fa;
}

/* Chat themes and wallpapers */
.message-list.custom-chat-appearance{background-color:var(--chat-bg)!important;background-image:var(--chat-wallpaper)!important;background-size:auto,cover!important;background-position:center!important;background-attachment:local!important}
.message-list.custom-chat-appearance .message-row.mine .message-bubble{background:var(--chat-mine)!important}
.message-list.custom-chat-appearance .message-row:not(.mine) .message-bubble{background:var(--chat-other)!important}
.chat-theme-overlay{position:fixed;inset:0;z-index:1800;background:rgba(15,23,42,.46);display:grid;place-items:center;padding:16px}
.chat-theme-overlay.hidden{display:none!important}
.chat-theme-card{width:min(620px,100%);max-height:min(760px,92dvh);overflow:auto;background:#fff;border-radius:22px;padding:20px;box-shadow:0 24px 80px rgba(15,23,42,.28)}
.chat-theme-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.chat-theme-header h2{margin:2px 0 0}.chat-theme-header p{margin:0}.chat-theme-header>button{border:0;width:38px;height:38px;border-radius:50%;font-size:25px;cursor:pointer}
.chat-theme-section h3{font-size:14px;margin:18px 0 10px;color:#475569}.chat-theme-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.chat-theme-choices button,.wallpaper-choices button{border:1px solid #dbe2ea;background:#fff;border-radius:14px;padding:10px;cursor:pointer;color:#1e293b}.chat-theme-choices button.selected,.wallpaper-choices button.selected,#customWallpaperBtn.selected{border-color:#22c55e;box-shadow:0 0 0 2px rgba(34,197,94,.18)}
.theme-preview{display:block;height:66px;border-radius:var(--r-sm);margin-bottom:7px;border:1px solid rgba(15,23,42,.08);background:#f8fafc}.default-preview{background:linear-gradient(135deg,#fff 50%,#e8e7ff 50%)}.whatsapp-preview{background:linear-gradient(135deg,#efeae2 50%,#d9fdd3 50%)}.whatsapp-dark-preview{background:linear-gradient(135deg,#0b141a 50%,#005c4b 50%)}.ocean-preview{background:linear-gradient(135deg,#dff4ff 50%,#cce9ff 50%)}.rose-preview{background:linear-gradient(135deg,#fff0f4 50%,#ffdce7 50%)}.custom-preview{background:conic-gradient(#fca5a5,#fde68a,#86efac,#93c5fd,#c4b5fd,#fca5a5)}.sage-preview{background:linear-gradient(135deg,#eef5f0 50%,#dcefe3 50%)}.lavender-preview{background:linear-gradient(135deg,#f3f0fb 50%,#e7e0ff 50%)}.sand-preview{background:linear-gradient(135deg,#f5efe5 50%,#f2dfbf 50%)}.midnight-preview{background:linear-gradient(135deg,#0d1b24 50%,#24445c 50%)}
.custom-theme-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.custom-theme-controls.hidden{display:none!important}.custom-theme-controls label{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px;border:1px solid #e2e8f0;border-radius:var(--r-md);font-size:12px;font-weight:700}.custom-theme-controls input{width:36px;height:30px;border:0;background:transparent;padding:0}
.wallpaper-choices{display:flex;flex-wrap:wrap;gap:8px}.chat-theme-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.chat-theme-actions button{border:0;border-radius:var(--r-md);padding:11px 17px;background:#16a34a;color:#fff;font-weight:800;cursor:pointer}.chat-theme-actions button.secondary{background:#e2e8f0;color:#334155}
html[data-theme="dark"] .chat-theme-card{background:#111827;color:#e5edf7}html[data-theme="dark"] .chat-theme-section h3{color:#aebdd0}html[data-theme="dark"] .chat-theme-choices button,html[data-theme="dark"] .wallpaper-choices button,html[data-theme="dark"] .custom-theme-controls label{background:#172033;color:#e5edf7;border-color:#334155}html[data-theme="dark"] .chat-theme-header>button{background:#253047;color:#fff}
@media(max-width:600px){.chat-theme-card{padding:15px;border-radius:18px}.chat-theme-choices{grid-template-columns:repeat(2,1fr)}.custom-theme-controls{grid-template-columns:1fr}.theme-preview{height:52px}}

.chat-theme-actions .reset-original-theme{margin-right:auto;background:#fff!important;color:#334155!important;border:1px solid #cbd5e1!important}.chat-theme-actions .reset-original-theme:hover{background:#f8fafc!important}

/* Original app theme is the permanent default chat appearance. */
.message-list.custom-chat-appearance .message-row.mine .message-bubble{color:#fff!important}
.message-list.custom-chat-appearance .message-row:not(.mine) .message-bubble{color:#edf2f7!important;border-color:#30415c!important}
.message-list.custom-chat-appearance{color:#e8eef8}

/* Message multi-select */
.message-selection-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--panel,#0f1a2b);z-index:8}
.message-selection-bar>div{display:flex;gap:8px;flex-wrap:wrap}
.message-selection-bar button{border:1px solid var(--border);background:transparent;color:inherit;border-radius:var(--r-sm);padding:8px 11px;font-weight:700;cursor:pointer}
.message-selection-bar button.danger{color:#ef4444}.message-selection-bar button:disabled{opacity:.45;cursor:not-allowed}
.message-select-check{display:none;flex:0 0 24px;width:24px;height:24px;border-radius:50%;border:2px solid #7c8da8;background:transparent;color:#fff;font-weight:900;align-items:center;justify-content:center;margin-top:8px;cursor:pointer}
.message-list.selection-mode .message-select-check{display:flex}
.message-list.selection-mode .message-more{display:none!important}
.message-row.selected-message .message-select-check{background:#2563eb;border-color:#2563eb}
.message-row.selected-message .message-bubble{outline:2px solid #3b82f6;outline-offset:2px}
.header-actions{display:flex;align-items:center;gap:8px}.header-actions .header-call-btn{position:static;margin:0}
@media(max-width:640px){.message-selection-bar{align-items:flex-start;flex-direction:column}.message-selection-bar>div{width:100%}.message-selection-bar button{flex:1}.header-actions{gap:5px}}

/* Older-message pagination */
.older-messages-loader,.older-messages-end{width:max-content;max-width:calc(100% - 24px);margin:8px auto 14px;padding:8px 13px;border:1px solid var(--border);border-radius:var(--r-pill);background:rgba(15,23,42,.78);color:#cbd5e1;font-size:12px;font-weight:700;display:flex;align-items:center;gap:8px;box-shadow:0 6px 18px rgba(0,0,0,.16)}
.older-loader-spinner{width:13px;height:13px;border:2px solid rgba(255,255,255,.25);border-top-color:#f59e0b;border-radius:50%;animation:olderSpin .75s linear infinite}
@keyframes olderSpin{to{transform:rotate(360deg)}}
.older-messages-end{opacity:.72;font-weight:600}
html:not([data-theme="dark"]) .older-messages-loader,html:not([data-theme="dark"]) .older-messages-end{background:rgba(255,255,255,.94);color:#475569}
.message-date-separator{align-self:center;width:100%;display:flex;justify-content:center;clear:both;margin:13px 0 7px;pointer-events:none;user-select:none}
.message-date-separator span{display:inline-flex;align-items:center;min-height:31px;padding:5px 15px;border:1px solid rgba(100,116,139,.42);border-radius:var(--r-pill);background:rgba(15,23,42,.86);color:#dbe5f4;font-size:13px;font-weight:750;letter-spacing:.01em;line-height:1.25;box-shadow:0 4px 14px rgba(0,0,0,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
html:not([data-theme="dark"]) .message-date-separator span{background:rgba(255,255,255,.94);border-color:rgba(148,163,184,.52);color:#334155;box-shadow:0 4px 12px rgba(15,23,42,.08)}
html.compact-messages .message-date-separator{margin:8px 0 4px}

/* Realtime delivery receipts and instant recent-message opening */
.message-list.opening-chat{visibility:hidden}
.message-status{display:inline-block;margin-left:5px;font-weight:900;line-height:1;color:#cbd5e1;letter-spacing:-.18em;transform:translateY(-.02em)}
.message-status.sent{letter-spacing:0}
.message-status.delivered{color:#dbe3ee}
.message-status.seen{color:#38bdf8}
html:not([data-theme="dark"]) .message-status.sent,html:not([data-theme="dark"]) .message-status.delivered{color:#64748b}
html:not([data-theme="dark"]) .message-status.seen{color:#0284c7}

/* Message info is created by JavaScript so every app route shares one panel. */
.message-info-overlay{position:fixed;inset:0;z-index:1600;display:grid;place-items:center;padding:20px;background:rgba(2,6,23,.68);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.message-info-overlay.hidden{display:none!important}
.message-info-card{width:min(430px,100%);border:1px solid rgba(148,163,184,.28);border-radius:22px;background:#101b2d;color:#e7edf7;box-shadow:0 24px 80px rgba(0,0,0,.42);overflow:hidden}
.message-info-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:20px 20px 14px;border-bottom:1px solid rgba(148,163,184,.16)}
.message-info-header h2{margin:2px 0 0;font-size:22px}.message-info-kicker{margin:0;color:#94a3b8;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}
.message-info-header button{width:36px;height:36px;border:1px solid rgba(148,163,184,.28);border-radius:50%;background:transparent;color:inherit;font-size:25px;line-height:1;cursor:pointer}
.message-info-preview{margin:16px 20px 4px;padding:12px 14px;border-radius:13px;background:rgba(30,41,59,.78);color:#dbe5f2;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.message-info-timeline{padding:10px 20px 20px}.message-info-timeline>div{display:flex;align-items:center;gap:14px;padding:13px 2px;border-bottom:1px solid rgba(148,163,184,.13)}.message-info-timeline>div:last-child{border-bottom:0}
.message-info-icon{display:grid;place-items:center;width:42px;min-width:42px;height:42px;border-radius:50%;background:rgba(100,116,139,.2);color:#cbd5e1;font-size:16px;font-weight:900;letter-spacing:-.18em}.message-info-icon.sent{letter-spacing:0}.message-info-icon.read{background:rgba(14,165,233,.17);color:#38bdf8}
.message-info-timeline p{display:grid;gap:3px;margin:0}.message-info-timeline strong{font-size:14px}.message-info-timeline small{color:#94a3b8;font-size:12px}
html:not([data-theme="dark"]) .message-info-card{background:#fff;color:#172033;border-color:#dbe3ed}.message-info-overlay:not(.hidden) .message-info-card{animation:messageInfoIn .16s ease-out}
html:not([data-theme="dark"]) .message-info-preview{background:#f1f5f9;color:#334155}html:not([data-theme="dark"]) .message-info-timeline small,html:not([data-theme="dark"]) .message-info-kicker{color:#64748b}
@keyframes messageInfoIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}

/* Direct Settings return + clearly visible Student Account profile */
.student-account-profile{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.student-account-avatar{width:44px;height:44px;flex:0 0 44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#f59e0b,#fb923c);color:#102a56;font-weight:900;font-size:15px;letter-spacing:.02em;border:2px solid rgba(255,255,255,.8);box-shadow:0 4px 14px rgba(15,23,42,.2)}
html[data-theme="dark"] .student-account-avatar{background:linear-gradient(135deg,#fbbf24,#f97316);color:#07152f;border-color:#26344a;box-shadow:0 4px 16px rgba(0,0,0,.38)}
@media(max-width:720px){.student-account-profile{gap:9px}.student-account-avatar{width:38px;height:38px;flex-basis:38px;font-size:13px}}

.student-account-avatar img,.header-avatar img,.user-profile-large-photo img{width:100%;height:100%;object-fit:cover;display:block}.student-account-avatar,.header-avatar{overflow:hidden}.chat-profile-button{border:0;background:transparent;color:inherit;padding:0;text-align:left;cursor:pointer}.chat-profile-button:disabled{cursor:default}.user-profile-overlay{position:fixed;inset:0;z-index:1800;background:rgba(3,7,18,.72);display:grid;place-items:center;padding:20px;backdrop-filter:blur(8px)}.user-profile-card{position:relative;width:min(360px,calc(100vw - 28px));padding:34px 28px 28px;border-radius:24px;background:#fff;color:#172033;text-align:center;box-shadow:0 28px 80px rgba(0,0,0,.34)}.user-profile-close{position:absolute;right:14px;top:12px;width:38px;height:38px;border:0;border-radius:50%;background:#eef2f7;font-size:25px;cursor:pointer}.user-profile-large-photo{width:148px;height:148px;margin:0 auto 18px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#dbeafe;color:#1e40af;font-size:48px;font-weight:800;border:4px solid #fff;box-shadow:0 10px 34px rgba(15,23,42,.2)}.user-profile-card h2{margin:0 0 7px;font-size:25px}.user-profile-card p{margin:0;color:#667085;font-weight:600}html[data-theme="dark"] .user-profile-card{background:#101827;color:#eef4ff;border:1px solid #2d3d55}html[data-theme="dark"] .user-profile-close{background:#1e293b;color:#fff}html[data-theme="dark"] .user-profile-card p{color:#9eb0c9}.hidden{display:none!important}

/* Profile media, voice notes and encrypted text search */
.user-profile-info-card{width:min(760px,calc(100vw - 28px));max-height:min(820px,92dvh);overflow:auto;text-align:left;padding:26px}
.user-profile-summary{display:flex;align-items:center;gap:18px;padding-right:44px}.user-profile-summary .user-profile-large-photo{width:104px;height:104px;flex:0 0 104px;margin:0;font-size:34px}.user-profile-summary h2{margin:0 0 5px}.user-profile-summary p{margin:0}
.profile-info-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:22px 0 14px;padding:5px;background:#eef2f7;border-radius:14px}.profile-info-tab{border:0;border-radius:var(--r-sm);min-height:40px;background:transparent;color:#64748b;font-weight:800;cursor:pointer}.profile-info-tab.active{background:#fff;color:#2563eb;box-shadow:0 2px 8px rgba(15,23,42,.1)}
.profile-info-loading,.profile-info-empty{padding:22px;text-align:center;color:#64748b;font-weight:650}.profile-info-panel{min-height:180px}
.profile-media-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.profile-media-item{position:relative;border:1px solid #dbe2ea;border-radius:13px;background:#f8fafc;padding:6px;overflow:hidden;cursor:pointer;color:#475569;text-align:left}.profile-media-visual,.profile-media-placeholder{position:relative;width:100%;aspect-ratio:1/1;border-radius:9px;overflow:hidden;background:#e2e8f0;display:grid;place-items:center;font-size:28px}.profile-media-visual img,.profile-media-visual video{width:100%;height:100%;object-fit:cover;display:block}.profile-media-item small{display:block;padding:6px 2px 1px;font-size:10px}.profile-video-badge{position:absolute;inset:auto 7px 7px auto;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.65);color:#fff}
.profile-voice-list{display:grid;gap:10px}.profile-voice-item{display:grid;grid-template-columns:minmax(120px,1fr) minmax(220px,1.8fr);align-items:center;gap:14px;padding:12px;border:1px solid #dbe2ea;border-radius:14px;background:#f8fafc}.profile-voice-item strong,.profile-voice-item small{display:block}.profile-voice-item small{margin-top:4px;color:#64748b}.profile-voice-item audio{width:100%}
.profile-search-box{display:block}.profile-search-box span{display:block;margin-bottom:7px;font-weight:800}.profile-search-box input{width:100%;min-height:45px;border:1px solid #cbd5e1;border-radius:var(--r-md);padding:0 14px;font:inherit}.profile-search-results{display:grid;gap:8px;margin-top:12px}.profile-search-result{display:grid;gap:4px;border:1px solid #dbe2ea;border-radius:13px;background:#f8fafc;padding:12px;text-align:left;color:#172033;cursor:pointer}.profile-search-result span{white-space:normal;overflow-wrap:anywhere}.profile-search-result small{color:#64748b}.profile-search-result:hover{border-color:#60a5fa;background:#eff6ff}
html[data-theme="dark"] .profile-info-tabs{background:#172033}html[data-theme="dark"] .profile-info-tab{color:#9eb0c9}html[data-theme="dark"] .profile-info-tab.active{background:#253047;color:#bfdbfe;box-shadow:none}html[data-theme="dark"] .profile-media-item,html[data-theme="dark"] .profile-voice-item,html[data-theme="dark"] .profile-search-result{background:#172033;border-color:#334155;color:#eef4ff}html[data-theme="dark"] .profile-media-visual,html[data-theme="dark"] .profile-media-placeholder{background:#0b1220}html[data-theme="dark"] .profile-search-box input{background:#0b1220;border-color:#334155;color:#eef4ff}html[data-theme="dark"] .profile-search-result:hover{background:#1e293b;border-color:#60a5fa}
@media(max-width:680px){.user-profile-info-card{padding:20px 14px}.user-profile-summary .user-profile-large-photo{width:82px;height:82px;flex-basis:82px}.profile-info-tabs{font-size:12px}.profile-media-grid{grid-template-columns:repeat(3,1fr)}.profile-voice-item{grid-template-columns:1fr}.profile-voice-item audio{margin-top:4px}}

.profile-security-card{border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;background:rgba(255,255,255,.04)}.profile-security-heading{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.profile-security-heading p{margin:5px 0 0;color:var(--muted);font-size:13px}.security-status{padding:5px 9px;border-radius:var(--r-pill);font-size:12px;font-weight:800;white-space:nowrap}.security-status.unverified{background:#fef3c7;color:#92400e}.security-status.verified{background:#dcfce7;color:#166534}.profile-safety-number{display:block;margin:16px 0;padding:14px;border-radius:var(--r-md);background:#07101f;border:1px solid #2b3b54;color:#dbeafe;font-size:15px;line-height:1.8;word-spacing:5px;white-space:normal;user-select:all}.profile-security-actions{display:flex;gap:10px;flex-wrap:wrap}.profile-security-actions button{border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 13px;background:transparent;color:inherit;font-weight:700;cursor:pointer}.profile-security-actions .primary{background:#2563eb;color:#fff;border-color:#2563eb}.profile-security-help{color:var(--muted);font-size:12px;margin:12px 0 0}.iphone-security-card{margin-top:16px;text-align:left;width:100%}html[data-theme="dark"] .profile-security-card{background:#0d1728}

/* Emoji search and clipboard/drop attachment improvements */
.emoji-search-wrap{display:flex;align-items:center;gap:8px;margin:8px 10px 6px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface,#fff);color:var(--muted);}
.emoji-search-input{width:100%;border:0!important;outline:0!important;background:transparent!important;color:inherit;font:600 14px/1.2 system-ui,sans-serif;padding:0!important;box-shadow:none!important;}
.emoji-search-input::placeholder{color:var(--muted);font-weight:500;}
.emoji-no-results{grid-column:1/-1;padding:28px 10px;text-align:center;color:var(--muted);font-size:13px;}
html[data-theme="dark"] .emoji-search-wrap{background:#0b1322;border-color:#334155;color:#dbe7f6;}
html.file-drag-active .chat-main,html.file-drag-active .chat-panel{outline:2px dashed #60a5fa;outline-offset:-10px;}

/* Pinned chats */
.conversation-item.is-pinned{background:color-mix(in srgb,var(--accent,#7c3aed) 7%,transparent)}
.pin-chat-indicator{display:inline-flex;align-items:center;margin-left:6px;font-size:12px;opacity:.8;vertical-align:middle}
html[data-theme="dark"] .conversation-item.is-pinned{background:rgba(96,165,250,.08)}

.pinned-message-bar{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--border);background:rgba(30,64,175,.10);color:inherit}.pinned-message-bar.hidden{display:none!important}.pinned-message-bar>button{border:0;background:transparent;color:inherit;cursor:pointer}.pinned-message-bar>button:nth-child(2){flex:1;text-align:left;display:flex;flex-direction:column;min-width:0}.pinned-message-bar strong{font-size:12px}.pinned-message-bar small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.78}.pinned-message-bar>button:last-child{font-size:20px}.pinned-highlight .message-bubble{outline:2px solid #f59e0b;outline-offset:3px}

/* Pinned message preview directly below the chat header */
.pinned-message-bar{
  min-height:54px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  border-bottom:1px solid var(--border);
  background:color-mix(in srgb,var(--accent,#2563eb) 10%,var(--panel,#fff));
  color:inherit;
  flex:0 0 auto;
}
.pinned-message-bar.hidden{display:none!important}
.pinned-message-icon{font-size:16px;flex:0 0 auto}
.pinned-message-bar #pinnedMessageOpenBtn{
  flex:1;min-width:0;border:0;background:transparent;color:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:2px 0;
}
.pinned-message-bar #pinnedMessageOpenBtn strong{font-size:12px;line-height:1.2}
.pinned-message-bar #pinnedMessageOpenBtn small{
  width:100%;font-size:12px;line-height:1.35;opacity:.78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pinned-message-bar #pinnedMessageCloseBtn{
  width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:inherit;
  cursor:pointer;font-size:20px;display:grid;place-items:center;flex:0 0 auto;
}
.pinned-message-bar #pinnedMessageCloseBtn:hover{background:rgba(127,127,127,.14)}
html[data-theme="dark"] .pinned-message-bar{background:rgba(37,99,235,.14)}
@media(max-width:700px){.pinned-message-bar{padding-inline:10px}}

/* Home refresh button beside the signed-in user's name */
.student-account-name-row{display:flex;align-items:center;gap:7px;min-width:0}
.student-account-name-row h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-refresh-btn{width:29px;height:29px;min-width:29px;border:1px solid var(--border);border-radius:9px;background:rgba(255,255,255,.08);color:inherit;display:grid;place-items:center;font-size:17px;line-height:1;cursor:pointer;transition:transform .15s ease,background .15s ease}
.home-refresh-btn:hover{background:rgba(124,58,237,.16)}
.home-refresh-btn:active{transform:rotate(45deg) scale(.95)}
.home-refresh-btn:disabled{opacity:.55;cursor:wait}
html[data-theme="dark"] .home-refresh-btn{border-color:#334155;background:#142033;color:#dbeafe}
html[data-theme="dark"] .home-refresh-btn:hover{background:#1d2d47}
@media(max-width:720px){.home-refresh-btn{width:27px;height:27px;min-width:27px;font-size:16px}}

/* Refresh button beside Settings */
.account-actions .home-refresh-btn{width:38px;height:38px;min-width:38px;border-radius:var(--r-sm);font-size:19px;padding:0}
.account-actions .home-refresh-btn span{display:grid;place-items:center;line-height:1}
@media(max-width:720px){.account-actions .home-refresh-btn{width:36px;height:36px;min-width:36px;font-size:18px}}

/* Current account login-session history */
.login-sessions-btn{width:auto;max-width:180px;margin:0 12px 10px;padding:7px 10px;border:1px solid var(--line,#283955);border-radius:var(--r-sm);background:rgba(255,255,255,.035);color:inherit;display:inline-flex;align-items:center;gap:7px;text-align:left;cursor:pointer;font-size:12px;line-height:1;align-self:flex-start}
.login-sessions-btn:hover{background:rgba(255,255,255,.07)}
.login-sessions-btn>span:first-child{font-size:14px}.login-sessions-btn strong{display:block;font-size:12px;white-space:nowrap}
.login-sessions-overlay{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:18px;background:rgba(2,8,20,.68);backdrop-filter:blur(5px)}
.login-sessions-overlay.hidden{display:none}
.login-sessions-card{width:min(430px,100%);max-height:min(650px,88vh);overflow:auto;border:1px solid var(--line,#2b3d5d);border-radius:20px;background:var(--panel,#0d1728);color:var(--text,#eef4ff);box-shadow:0 24px 70px rgba(0,0,0,.45);padding:18px}
.login-sessions-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.login-sessions-header h2{margin:2px 0 0}.login-sessions-header button{width:36px;height:36px;border:0;border-radius:var(--r-sm);background:rgba(255,255,255,.08);color:inherit;font-size:24px;cursor:pointer}
.login-sessions-help{margin:10px 0 14px;color:var(--muted,#9aabc6);font-size:13px}.login-sessions-list{display:grid;gap:9px}.login-session-row{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid var(--line,#283955);border-radius:14px;background:rgba(255,255,255,.035)}
.login-session-number{display:grid;place-items:center;flex:0 0 32px;height:32px;border-radius:50%;background:rgba(96,165,250,.16);font-weight:800}.login-session-row strong,.login-session-row small{display:block}.login-session-row small{margin-top:3px;color:var(--muted,#9aabc6)}.login-sessions-empty{margin:8px 0;padding:14px;text-align:center;color:var(--muted,#9aabc6)}.login-sessions-empty.error{color:#ff9e9e}

.login-session-details{min-width:0}.login-session-location{color:var(--text,#eef4ff)!important}.login-session-network{font-size:11px;opacity:.78;overflow-wrap:anywhere}

/* 24-hour Stories / Status */

.hidden{display:none!important}

/* Story seen-state + story management controls */
.account-utility-row{display:flex;align-items:center;gap:7px;margin:0 12px 10px;flex-wrap:wrap}
.account-utility-row .login-sessions-btn{margin:0}

/* Bright ring means this account has at least one story you have not viewed yet. */

/* Own active story stays identifiable without using the unseen highlight. */

@media(max-width:600px){.account-utility-row{margin-left:10px;margin-right:10px;gap:6px}}

/* Story HD/original, text and pause controls */

/* Instagram-style story text transform tools */

/* Story video support */

/* Story likes + encrypted story replies */

/* Story Like stuck-disabled repair */

/* New-line button beside Emoji: inserts a line break without sending */
.message-input-wrap textarea{padding-right:78px!important}
.newline-btn-inline{position:absolute;right:39px;bottom:7px;width:30px;height:30px;min-width:30px;min-height:30px;padding:0;border:0;border-radius:50%;background:transparent;color:#667085;font-size:20px;line-height:1;display:grid;place-items:center;cursor:pointer;z-index:5}
.newline-btn-inline:hover,.newline-btn-inline:focus-visible{background:rgba(99,102,241,.10);outline:none}
.newline-btn-inline:disabled{opacity:.45;cursor:not-allowed}
html[data-theme="dark"] .newline-btn-inline{color:#cbd5e1}
html[data-theme="dark"] .newline-btn-inline:hover,html[data-theme="dark"] .newline-btn-inline:focus-visible{background:rgba(96,165,250,.14)}
@media(max-width:520px){.message-input-wrap textarea{padding-right:74px!important}.newline-btn-inline{right:36px;bottom:6px;width:28px;height:28px;min-width:28px;min-height:28px;font-size:19px}}

/* Instagram-style auto-growing message box: grows to ~5 lines, then scrolls */
.message-input-wrap textarea{
  height:46px;
  min-height:46px!important;
  max-height:132px!important;
  overflow-y:hidden;
  resize:none!important;
  field-sizing:fixed!important;
  transition:height .08s ease;
}
.message-input-wrap textarea::-webkit-scrollbar{width:5px}
.message-input-wrap textarea::-webkit-scrollbar-thumb{background:rgba(100,116,139,.45);border-radius:var(--r-pill)}

/* Pin / unpin activity shown as centered text-only chat notices (Instagram-style). */
.system-message-row{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:8px 12px;
  box-sizing:border-box;
  pointer-events:none;
}
.system-message-text{
  color:#8f939a;
  font-size:14px;
  font-weight:500;
  line-height:1.35;
  text-align:center;
  max-width:88%;
  overflow-wrap:anywhere;
}
html[data-theme="dark"] .system-message-text{color:#a7aab0;}
@media (max-width:700px){
  .system-message-row{padding:7px 10px;}
  .system-message-text{font-size:13px;}
}

/* All pinned messages preview */
.pinned-message-all-btn{height:30px;min-width:38px;padding:0 9px;border:1px solid color-mix(in srgb,currentColor 22%,transparent)!important;border-radius:999px!important;background:transparent!important;color:inherit!important;font-size:11px;font-weight:700;cursor:pointer;flex:0 0 auto}
.pinned-message-all-btn:hover{background:rgba(127,127,127,.12)!important}
.pinned-messages-overlay{position:fixed;inset:0;z-index:1900;background:rgba(0,0,0,.42);display:grid;place-items:center;padding:18px}
.pinned-messages-overlay.hidden{display:none!important}
.pinned-messages-card{width:min(460px,100%);max-height:min(68vh,560px);overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:18px;background:var(--panel,#fff);color:inherit;box-shadow:0 22px 70px rgba(0,0,0,.28)}
.pinned-messages-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 15px;border-bottom:1px solid var(--border)}
.pinned-messages-head>div{display:flex;flex-direction:column;gap:2px}.pinned-messages-head strong{font-size:15px}.pinned-messages-head small{font-size:11px;color:var(--muted)}
.pinned-messages-head>button{width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:inherit;font-size:22px;cursor:pointer}.pinned-messages-head>button:hover{background:rgba(127,127,127,.12)}
.pinned-messages-list{overflow:auto;padding:8px;overscroll-behavior:contain}
.pinned-message-preview-item{width:100%;display:block;text-align:left;border:0;border-radius:var(--r-md);background:transparent;color:inherit;padding:11px 12px;cursor:pointer}
.pinned-message-preview-item:hover{background:rgba(127,127,127,.10)}
.pinned-message-preview-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:5px}.pinned-message-preview-meta strong{font-size:12px}.pinned-message-preview-meta span{font-size:10px;color:var(--muted)}
.pinned-message-preview-body{font-size:13px;line-height:1.4;color:inherit;white-space:normal;overflow-wrap:anywhere}
.pinned-messages-loading,.pinned-messages-empty{padding:30px 16px;text-align:center;color:var(--muted);font-size:13px}
html[data-theme="dark"] .pinned-messages-card{background:#0f1724;border-color:#2a3a50}
@media(max-width:700px){.pinned-message-all-btn{min-width:34px;padding:0 7px}.pinned-messages-overlay{align-items:end;padding:0}.pinned-messages-card{width:100%;max-height:70vh;border-radius:18px 18px 0 0;border-bottom:0;padding-bottom:max(8px,env(safe-area-inset-bottom))}}

/* Reply-to navigation: tap the quoted preview to jump to and highlight the original message. */
.reply-quote.reply-jump{cursor:pointer;transition:filter .15s ease,transform .15s ease}
.reply-quote.reply-jump:hover{filter:brightness(.97)}
.reply-quote.reply-jump:active{transform:scale(.995)}
.reply-quote.reply-jump:focus-visible{outline:2px solid #6366f1;outline-offset:2px}
.reply-target-highlight .message-bubble{animation:replyTargetFlash 2.2s ease}
@keyframes replyTargetFlash{0%,100%{outline:0 solid rgba(99,102,241,0);box-shadow:none}12%,62%{outline:3px solid rgba(99,102,241,.9);outline-offset:3px;box-shadow:0 0 0 7px rgba(99,102,241,.16)}}

/* ===================================================================== */
/* Message receipts: one grey tick, two grey ticks, two highlighted blue  */
/* ticks. The blue state is deliberately louder than the delivered state  */
/* so "they have read it" is readable at a glance.                        */
/* ===================================================================== */
.message-status{transition:color .18s ease,background .18s ease}
.message-status.seen{
  color:#0ea5e9;
  background:rgba(14,165,233,.16);
  border-radius:6px;
  padding:1px 4px;
  margin-left:6px;
  letter-spacing:-.14em;
  box-shadow:0 0 0 1px rgba(14,165,233,.28) inset;
}
html:not([data-theme="dark"]) .message-status.seen{color:#0369a1;background:rgba(2,132,199,.14);box-shadow:0 0 0 1px rgba(2,132,199,.26) inset}
.message-status.status-flip{animation:status-flip-in .85s ease}
@keyframes status-flip-in{
  0%{transform:scale(.7);opacity:.35}
  38%{transform:scale(1.28);opacity:1}
  100%{transform:scale(1);opacity:1}
}
@media (prefers-reduced-motion: reduce){.message-status.status-flip{animation:none}}

/* Conversation-list photos. Without these the picture rendered at its own
   natural size and pushed the row apart, so it looked like no photo at all. */
.avatar{overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}

/* ===================================================================== */
/* Surprise button on the dashboard                                       */
/* ===================================================================== */
.surprise-open-btn{
  position:relative;width:auto;max-width:150px;margin:0;padding:7px 10px;
  border:1px solid var(--line,#283955);border-radius:var(--r-sm);
  background:rgba(255,255,255,.035);color:inherit;text-decoration:none;
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:12px;line-height:1;
}
.surprise-open-btn:hover{background:rgba(255,255,255,.07)}
.surprise-open-btn>span:first-child{font-size:14px}
.surprise-open-btn strong{font-size:12px;white-space:nowrap}
.surprise-count-badge{
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ef4444;color:#fff;
  font-size:11px;font-weight:800;display:inline-grid;place-items:center;line-height:1;
}
/* Blinks until the person actually opens what was left for them. */
.surprise-open-btn.has-surprise{
  border-color:#f472b6;
  animation:surprise-blink 1.1s ease-in-out infinite;
}
@keyframes surprise-blink{
  0%,100%{background:rgba(244,114,182,.10);box-shadow:0 0 0 0 rgba(244,114,182,0)}
  50%{background:rgba(244,114,182,.34);box-shadow:0 0 0 5px rgba(244,114,182,.16)}
}
@media (prefers-reduced-motion: reduce){
  .surprise-open-btn.has-surprise{animation:none;background:rgba(244,114,182,.24)}
}
@media(max-width:600px){.surprise-open-btn{padding:7px 9px;font-size:11px}}

/* ===================================================================== */
/* Opening a chat                                                        */
/* The list is held invisible while it settles on the newest message, but */
/* it must still be laid out for real, otherwise its height is measured   */
/* wrong and revealing it makes the view jump down through the history.   */
/* ===================================================================== */
.message-list.opening-chat{
  visibility: visible !important;
  opacity: 0;
  pointer-events: none;
}
.message-list{
  transition: opacity .16s ease;
  overflow-anchor: none;
  scroll-behavior: auto !important;
  overscroll-behavior: contain;
}
/* Height estimates for off-screen rows would make scrollHeight wrong while
   the chat is still opening, which is what produced the visible scroll. */
.message-row{
  contain-intrinsic-size: auto !important;
  content-visibility: visible !important;
}
@media (prefers-reduced-motion: reduce){
  .message-list{transition:none}
}


/* ===================================================================== */
/* Media placeholders                                                     */
/* A photo or video is downloaded and decrypted after the chat is already  */
/* on screen. The slot reserves height so filling it in barely moves the   */
/* layout, and never at all for someone sitting at the newest message.     */
/* ===================================================================== */
.chat-media-slot{
  min-height:120px;
  width:min(260px,60vw);
  border-radius:14px;
  display:grid;place-items:center;
  background:rgba(127,127,127,.12);
  margin:2px 0 6px;
}
.chat-media-slot .media-loading-placeholder{
  font-size:12px;font-weight:600;opacity:.7;background:none;padding:0;
}
.chat-media-slot[data-media-loading]{
  animation:media-slot-pulse 1.1s ease-in-out infinite alternate;
}
@keyframes media-slot-pulse{to{background:rgba(127,127,127,.2)}}
@media (prefers-reduced-motion: reduce){
  .chat-media-slot[data-media-loading]{animation:none}
}

/* ── Voice-note recording indicator ───────────────────────────────────────
   Rides the same realtime channel as the typing indicator; only the label and
   the animation differ. Red, because recording is a live capture, not typing. */
.rec-mic{width:13px;height:13px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rec-wave{display:inline-flex;align-items:center;gap:2px;height:13px}
.rec-wave i{width:2.5px;height:4px;border-radius:2px;background:currentColor;animation:recWave 1s ease-in-out infinite}
.rec-wave i:nth-child(2){animation-delay:.12s}
.rec-wave i:nth-child(3){animation-delay:.24s}
.rec-wave i:nth-child(4){animation-delay:.36s}
.rec-wave i:nth-child(5){animation-delay:.48s}
@keyframes recWave{0%,100%{height:4px;opacity:.55}50%{height:13px;opacity:1}}

.recording-header-bubble{display:inline-flex;align-items:center;gap:5px;background:rgba(220,38,38,.14);color:#dc2626;padding:3px 8px;border-radius:99px;vertical-align:middle}
.status-text.recording .typing-header-label{color:#dc2626}
.conversation-preview.recording-preview{color:#dc2626!important;font-weight:600;display:inline-flex;align-items:center;gap:5px}
.conversation-status.typing{color:inherit}
.recording-bubble{gap:7px!important;color:#dc2626}
.recording-bubble .rec-mic{width:16px;height:16px}
.recording-bubble .rec-wave{height:17px}
.recording-bubble .rec-wave i{width:3px}
@keyframes recWaveTall{0%,100%{height:5px;opacity:.55}50%{height:17px;opacity:1}}
.recording-bubble .rec-wave i{animation-name:recWaveTall}

html[data-theme="dark"] .recording-header-bubble{background:rgba(248,113,113,.18);color:#f87171}
html[data-theme="dark"] .status-text.recording .typing-header-label{color:#f87171}
html[data-theme="dark"] .conversation-preview.recording-preview{color:#f87171!important}
html[data-theme="dark"] .recording-bubble{color:#f87171}
@media(prefers-reduced-motion:reduce){.rec-wave i{animation:none;height:9px}}

/* ── Links inside messages ────────────────────────────────────────────────
   Produced by linkifyEscaped(); the text is escaped before the anchor is
   built, so nothing here can be injected by a sender. */
.message-bubble .chat-link{color:#1d4ed8;text-decoration:underline;text-underline-offset:2px;word-break:break-word}
.message-bubble .chat-link:hover{text-decoration-thickness:2px}
.message-row.mine .message-bubble .chat-link{color:#dbeafe}
html[data-theme="dark"] .message-bubble .chat-link{color:#7cb2ff}
html[data-theme="dark"] .message-row.mine .message-bubble .chat-link{color:#dbeafe}

/* ── "+" in the reaction picker, and the full emoji grid it opens ───────── */
.reaction-picker .reaction-more{font-size:20px;font-weight:700;opacity:.65}
.reaction-picker .reaction-more:hover{opacity:1;background:rgba(148,163,184,.18)}
.reaction-picker.expanded{display:block;width:min(322px,calc(100vw - 24px));border-radius:var(--r-lg);padding:8px}
.reaction-all-head{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;opacity:.7;padding:2px 2px 8px}
.reaction-picker.expanded .reaction-back{width:24px;height:24px;font-size:18px;line-height:1;border-radius:8px;flex:0 0 auto}
.reaction-all-body{max-height:264px;overflow-y:auto;overscroll-behavior:contain}
.reaction-group-label{font-size:11px;font-weight:700;opacity:.55;margin:8px 2px 4px;text-transform:capitalize}
.reaction-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.reaction-picker.expanded .reaction-grid button{width:100%;height:36px;font-size:20px}

/* The private notes dialog moved to its own page: notes/notes.css */
/* A voice note I sent, on screen while it uploads (showPendingVoiceNote). */
.message-row.pending-message .message-bubble{opacity:.8}
.message-row.pending-message .message-time{font-style:italic}

/* Forward a message (openForward). The dialog reuses the login-sessions card. */
#forwardAction [data-icon],#forwardAction svg{transform:scaleX(-1)}
.forward-preview{margin:10px 0 12px;padding:9px 12px;border-left:3px solid var(--line,#2b3d5d);border-radius:8px;background:rgba(255,255,255,.04);color:var(--muted,#9aabc6);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.forward-search{display:block;width:100%;box-sizing:border-box;margin:0 0 12px;padding:11px 13px;border:1px solid var(--line,#2b3d5d);border-radius:var(--r-md);background:rgba(255,255,255,.05);color:inherit;font:inherit}
.forward-list{display:grid;gap:8px}
.forward-row{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border:1px solid var(--line,#283955);border-radius:14px;background:rgba(255,255,255,.035);color:inherit;font:inherit;text-align:left;cursor:pointer}
.forward-row:hover,.forward-row:focus-visible{background:rgba(96,165,250,.12)}
.forward-row:disabled{cursor:default;opacity:.55}
.forward-row.sending{opacity:1;outline:2px solid rgba(96,165,250,.6)}
.forward-row strong,.forward-row small{display:block}
.forward-row small{margin-top:2px;color:var(--muted,#9aabc6)}
.forward-avatar{display:grid;place-items:center;flex:0 0 36px;height:36px;border-radius:50%;background:rgba(96,165,250,.16);font-weight:800}

/* ===== Phase 1 & Version 3 Reconciled: Chat Shell (plan.md Phase C) =====
   The Premium skin owns the shell frame and the message list's own gutters:
   #chatView .message-list{padding:24px clamp(16px,4vw,48px)} (premium.css:226).

   The 72ch reading measure that used to live here was REMOVED. It capped each
   row at 726px inside a 1140px panel, so 207px on each side sat empty - 36% of
   the pane - and the chat read as a narrow strip rather than the reference
   design. A reading measure is right for prose (Notes keeps one); a chat is
   short bubbles already bounded by .message-wrap's max-width:min(78%,560px),
   so capping the row as well only subtracts. */

/* ===== Phase 2 & Version 3 Reconciled: Login Screen (plan.md Phase B) =====
   Visual layer: Version 3 Premium Corporate Skin owns color and shapes
   (violet brand, gradient banner with fine grid mesh, pill badges, and elevated cards).
   Behaviour & accessibility: Version 2 wins are preserved
   (SVG data-icon="person"/data-icon="lock", #passwordToggle reveal button, pure CSS
   :disabled loading spinner, explicit grid-template-rows: 1fr auto, autofill fix). */
:root{
  --ease-spring: cubic-bezier(.3,1.5,.5,1);
  --login-bg: var(--p-bg,#000);
  --login-bg-deep: var(--p-panel,#0b0b0b);
  --login-accent: var(--p-brand,#5b6cff);
  --login-on-accent: var(--p-on-brand,#ffffff);
  --login-panel: var(--p-panel,#0b0b0b);
  --login-field: var(--p-lift,rgba(255,255,255,.04));
  --login-text: var(--p-text,#ededed);
  --login-muted: var(--p-muted,#8f8f8f);
  --login-line: var(--p-hair-strong,rgba(255,255,255,.14));
  --login-on-dark: #ffffff;
}

/* E2EE Assurance on banner */
.portal-assurance{
  display:flex;align-items:center;gap:9px;margin:16px 0 0;
  font-size:12.5px;line-height:1.5;
  color:rgba(255,255,255,.72);
}
.portal-assurance>.ico,[data-icon="shield"]{width:17px;height:17px;color:var(--p-brand-2,#8b5cf6)}

/* Field icons & password toggle */
.input-shell>.ico{width:18px;height:18px;color:var(--p-muted,#8f8f8f);transition:color .18s ease}
.input-shell:focus-within>.ico{color:var(--p-brand,#5b6cff)}
.coaching-login .input-shell input{background:transparent!important;color:var(--p-text,#ededed)}
.coaching-login .input-shell input::placeholder{color:var(--p-muted,#8f8f8f)}
.coaching-login .input-shell input:-webkit-autofill{
  -webkit-text-fill-color:var(--p-text,#ededed);
  box-shadow:0 0 0 60px var(--p-panel,#0b0b0b) inset!important;
  caret-color:var(--p-text,#ededed);
}
.pw-toggle{
  display:grid;place-items:center;flex:0 0 auto;
  width:32px;height:32px;padding:0;margin-right:-4px;
  border:0;border-radius:9px;background:transparent;
  color:var(--p-muted,#8f8f8f);cursor:pointer;
  transition:color .18s ease, background .18s ease;
}
.pw-toggle:hover{color:var(--p-text,#ededed);background:var(--p-lift-strong,rgba(255,255,255,.08))}
.pw-toggle>.ico{width:18px;height:18px}

/* Submit button with pure CSS :disabled loading spinner */
.coaching-submit{position:relative;display:grid;place-items:center}
.coaching-submit:disabled{
  opacity:1;cursor:progress;pointer-events:none;
  background:color-mix(in srgb,var(--p-brand,#5b6cff) 75%,#000)!important;
  box-shadow:none!important;transform:none!important;filter:none!important;
}
.coaching-submit:disabled .submit-label{visibility:hidden}
.coaching-submit:disabled::after{
  content:"";position:absolute;width:19px;height:19px;
  border:2.5px solid color-mix(in srgb,var(--p-on-brand,#fff) 30%,transparent);
  border-top-color:var(--p-on-brand,#fff);border-radius:50%;
  animation:login-spin .6s linear infinite;
}
@keyframes login-spin{to{transform:rotate(360deg)}}

/* Staggered entrance animation without drifting grid mask */
@media (prefers-reduced-motion: no-preference){
  .login-panel>*{animation:login-rise .55s var(--ease-spring) backwards}
  .login-panel>*:nth-child(2){animation-delay:.07s}
  .login-panel>*:nth-child(3){animation-delay:.14s}
  .coaching-banner>*{animation:login-rise .6s var(--ease-spring) backwards}
  .coaching-banner>*:nth-child(2){animation-delay:.08s}
  .coaching-banner>*:nth-child(3){animation-delay:.16s}
  @keyframes login-rise{from{opacity:0;transform:translateY(14px)}}
}

@media (max-width:760px){
  .portal-assurance{font-size:12px;margin-top:12px}
}

/* ===== Phase 4: interactive (plan.md) =====
   Cross-document view transitions. Every page shares this stylesheet, so one
   declaration opts the whole site in — /loggin/ -> /home/ -> /notes/ -> /settings/
   cross-fade instead of white-flashing. Chrome 126+ and Safari 18.2+; browsers
   without it simply navigate as before, so there is nothing to feature-detect. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference){
  /* The overlays toggle .hidden (display:none), and an animation re-runs every time
     an element goes from display:none to displayed. That is why this needs no
     @starting-style, no allow-discrete and no JS: the existing show/hide is the
     trigger. Each overlay wraps exactly one card, so "> *" avoids naming all nine. */
  .settings-overlay,.chat-theme-overlay,.nudge-overlay,.pinned-messages-overlay,
  .login-sessions-overlay,.user-profile-overlay,.call-overlay,.photo-preview{
    animation:overlay-fade .18s ease both;
  }
  .settings-overlay>*,.chat-theme-overlay>*,.nudge-overlay>*,.pinned-messages-overlay>*,
  .login-sessions-overlay>*,.user-profile-overlay>*,.call-overlay>*{
    animation:overlay-rise .26s var(--ease-spring) both;
  }
  @keyframes overlay-fade{from{opacity:0}}
  @keyframes overlay-rise{from{opacity:0;transform:translateY(12px) scale(.985)}}

  /* Menus are placed by positionPopup() with top/left; a transform only offsets the
     paint, so the measured position is untouched. */
  .message-menu,.clear-menu,.conversation-menu,.reaction-picker{
    animation:menu-pop .16s var(--ease-spring) both;
    transform-origin:top center;
  }
  @keyframes menu-pop{from{opacity:0;transform:translateY(-5px) scale(.96)}}
}