:root {
  color-scheme: light;
  --bg: #f3f4f6;
  --panel: #ffffff;
  --panel-soft: #f9fafb;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --accent: #2563eb;
  --accent-dark: #1d4ed8;
  --mine: #2563eb;
  --theirs: #eef2ff;
  --danger: #b91c1c;
  --shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, 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: 16px; 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: 12px; 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: 12px; 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: 12px; 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: 10px; 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: 10px; }
.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: 16px; 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: 10px; 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: 100vh; 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-block; }
  .message-bubble { max-width: 84%; }
  .auth-card { min-height: 100vh; 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: 12px; 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: 12px; }
.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: 12px; 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:12px;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:12px;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 Inter,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: Inter, 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:12px;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:Inter,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:12px;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:10px;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:10px;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:12px;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;
}
.status-text.typing{color:#2563eb;font-weight:700;animation:typingPulse 1.1s ease-in-out infinite}
@keyframes typingPulse{0%,100%{opacity:1}50%{opacity:.55}}


/* ===== Device-persistent dark mode ===== */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg:#070b14;
  --panel:#111827;
  --panel-soft:#0b1220;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --border:#263244;
  --accent:#60a5fa;
  --accent-dark:#3b82f6;
  --mine:#1d4ed8;
  --theirs:#1e293b;
  --danger:#f87171;
  --shadow:0 20px 60px rgba(0,0,0,.48);
  --upsc-navy:#dbeafe;
  --upsc-blue:#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"] .login-panel,
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"] .input-shell,
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"] .coaching-login{background:#111827!important}
html[data-theme="dark"] .login-heading,html[data-theme="dark"] .coaching-login label span,html[data-theme="dark"] .sidebar-header h2,html[data-theme="dark"] .chat-header h2{color:#e5e7eb!important}
html[data-theme="dark"] .helper-text,html[data-theme="dark"] .login-footer,html[data-theme="dark"] .portal-subtitle{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:12px;
  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:12px;
  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:999px}
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}
.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:999px;
  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:12px;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:12px;
  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:12px;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:12px;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:12px;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:16px;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:999px;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:12px;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:999px;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:10px}
.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:10px;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:12px;
  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:12px;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:12px;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}}