/* Chat page skin (2026-10 redesign) — DESIGN ONLY.
   The chat app (web/index.html + app.js + style.css) is the oldest page on the
   site; this file restyles it to match the rest of the site without touching
   its markup hooks or behaviour. Every rule here is visual. Colours of the old
   palette are swapped by chat-palette.css (generated); this file does the
   header, left menu, composer and layout. Light theme = default, dark theme =
   html.theme-dark (the chat page's own theme switch). */

:root {
  --c-night: #1c1210; --c-night-2: #2a1a16; --c-night-ink: #f5ebdf; --c-night-mute: #c7b3a1;
  --c-paper: #faf6ef; --c-paper-2: #f2e9dc; --c-ink: #2a1d16; --c-ink-2: #6e5c4e; --c-line: #e5d9c9;
  --c-card: #ffffff; --c-accent: #7b1113; --c-accent-ink: #ffffff; --c-accent-soft: #f6e5df; --c-ochre: #d98e2b;
  --c-display: "Tiro Devanagari Hindi", Georgia, "Times New Roman", serif;
  --c-ui: "Hind", system-ui, -apple-system, "Segoe UI", sans-serif;
  --c-read: "Spectral", Georgia, serif;
  --c-head-h: 64px;
}
html.theme-dark {
  --c-night: #120b0a; --c-night-2: #1f1411; --c-paper: #181210; --c-paper-2: #211814; --c-ink: #efe5d9; --c-ink-2: #b9a796;
  --c-line: #3a2d26; --c-card: #221915; --c-accent: #e3877b; --c-accent-ink: #1a1110; --c-accent-soft: #3b211d; --c-ochre: #e7a64f;
}

/* ---------- page ---------- */
body { font-family: var(--c-ui); background: var(--c-paper); color: var(--c-ink); }
html.theme-dark body { background: var(--c-paper); }
main { padding: 0 !important; max-width: none; }
#chat-section, html.theme-dark #chat-section {
  background: transparent; border: 0; border-radius: 0; padding: 0; gap: 0; min-height: 100dvh;
}
#messages { width: 100%; max-width: 920px; margin: 0 auto; padding: 18px 20px var(--composer-pad, 92px); }

/* ---------- header: the site's dark bar ---------- */
.chat-strip-header, .chat-strip-header.collapsed {
  position: sticky; top: 0; z-index: 600; height: var(--c-head-h); padding: 0 24px; margin: 0;
  background: var(--c-night); color: var(--c-night-ink); border-bottom: 1px solid rgb(255 255 255 / .06);
  display: flex; align-items: center; gap: 18px; overflow: visible; font-family: var(--c-ui);
}
.chat-strip-header .brand { display: flex; align-items: center; gap: 12px; flex: none; }
.chat-strip-header .brand-home { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--c-night-ink); }
.chat-strip-header .brand img, .chat-strip-header.collapsed .brand img {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1px solid rgb(255 255 255 / .25); background: #fff; display: block;
}
.chat-strip-header .brand img.logo.dark { display: none; }
.chat-strip-header .brand-title, .chat-strip-header.collapsed .brand-title {
  display: inline; font-family: var(--c-display); font-weight: 400; font-size: 22px; letter-spacing: 0; color: var(--c-night-ink);
}
#chatListBtn.icon-btn, html.theme-dark #chatListBtn.icon-btn {
  width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgb(255 255 255 / .18); background: transparent; color: var(--c-night-ink);
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
#chatListBtn.icon-btn:hover { border-color: var(--c-ochre); background: rgb(255 255 255 / .06); }
#chatListBtn.icon-btn-on { box-shadow: inset 0 -2px 0 var(--c-ochre); }

.chat-strip-header .actions { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.chat-strip-header .inline-actions, .chat-strip-header.collapsed .inline-actions {
  display: flex; flex: 1 1 auto; align-items: center; gap: 4px; min-width: 0; opacity: 1; visibility: visible; height: auto;
}
/* main nav = the site nav */
.chat-strip-header .nav-item { position: relative; }
.chat-strip-header .nav-item > .nav-link {
  display: block; margin: 0 !important; padding: 8px 12px; border-radius: 8px; color: var(--c-night-mute) !important;
  font-weight: 500 !important; font-size: 16px; white-space: nowrap; text-decoration: none;
}
.chat-strip-header .nav-item > .nav-link:hover, .chat-strip-header .nav-item.open > .nav-link, .chat-strip-header .nav-item > .nav-link:focus-visible { color: var(--c-night-ink) !important; background: rgb(255 255 255 / .07); }
.chat-strip-header .nav-caret { font-size: .75em; opacity: .8; }
#navCommunity { margin-right: auto; }
.chat-strip-header .nav-menu {
  position: absolute; top: calc(100% + 6px); left: 0; width: 310px; display: grid; padding: 8px; z-index: 1200;
  background: var(--c-card); color: var(--c-ink); border: 1px solid var(--c-line); border-radius: 14px; box-shadow: 0 18px 40px rgb(0 0 0 / .25);
  visibility: hidden; opacity: 0; transform: translateY(-4px);
  transition: opacity .15s ease .18s, transform .15s ease .18s, visibility 0s linear .33s;
}
.chat-strip-header .nav-menu::before { content: ""; position: absolute; left: -12px; right: -12px; top: -14px; height: 14px; }
.chat-strip-header .nav-item:hover > .nav-menu, .chat-strip-header .nav-item.open > .nav-menu {
  visibility: visible; opacity: 1; transform: none; transition: opacity .12s ease, transform .12s ease;
}
.chat-strip-header .nav-menu a { display: block; padding: 9px 12px; border-radius: 9px; text-decoration: none; font-weight: 600; font-size: 15px; color: var(--c-ink); }
.chat-strip-header .nav-menu a small { display: block; font-weight: 400; color: var(--c-ink-2); font-size: 13px; }
.chat-strip-header .nav-menu a:hover { background: var(--c-paper-2); }
.chat-strip-header .nav-menu hr { border: 0; border-top: 1px solid var(--c-line); margin: 6px; }
.chat-strip-header .nav-menu .nav-cta { color: var(--c-accent); }
.chat-strip-header .nav-menu .nav-connect { display: flex; align-items: center; gap: 9px; border-top: 1px solid var(--c-line); border-radius: 0 0 9px 9px; margin-top: 4px; padding-top: 11px; font-weight: 500; }
.chat-strip-header .nav-live { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; background: var(--c-accent-soft); color: var(--c-accent); padding: 1px 6px; border-radius: 999px; vertical-align: 2px; }
/* right side: language, login, settings, profile */
.chat-strip-header .lang-switch {
  margin: 0 !important; background: transparent !important; color: var(--c-night-mute) !important; border: 1px solid rgb(255 255 255 / .18) !important;
  border-radius: 8px !important; padding: 5px 8px !important; font: inherit !important; font-size: 14px !important; max-width: 120px; flex: none;
}
.chat-strip-header .lang-switch option { color: #222; background: #fff; }
#headerLoginBtn.maroon-btn, #mobile-login.maroon-btn {
  margin: 0 !important; background: var(--c-ochre); color: #1c1210; border: 0; border-radius: 999px; padding: 8px 18px; font: inherit; font-weight: 600;
  white-space: nowrap; flex: none; box-shadow: none;
}
#headerLoginBtn.maroon-btn:hover, #mobile-login.maroon-btn:hover { filter: brightness(1.06); background: var(--c-ochre); }
#chatSearchBtn.icon-btn { background: transparent; color: var(--c-night-ink); border: 1px solid rgb(255 255 255 / .18); border-radius: 10px; flex: none; }
#profileMenuWrap { flex: none; }
#profileAvatarBtn { border: 2px solid var(--c-ochre) !important; width: 38px !important; height: 38px !important; }
#profileDropdown { background: var(--c-card) !important; color: var(--c-ink); border-color: var(--c-line) !important; border-radius: 14px !important; padding: 6px !important; min-width: 220px !important; }
#profileDropdown a, #profileDropdown button { border-radius: 9px; font-family: var(--c-ui) !important; }
#profileDropdown a:hover, #profileDropdown button:hover { background: var(--c-paper-2); }
#profileMenuName { color: var(--c-ink-2) !important; border-color: var(--c-line) !important; }
.chat-strip-header .mobile-menu-toggle {
  width: 42px; height: 42px; border-radius: 10px; border: 1px solid rgb(255 255 255 / .2) !important; color: var(--c-night-ink); font-size: 20px; padding: 0; margin: 0 !important;
}

/* narrower desktops: let the nav breathe */
@media (max-width: 1240px) and (min-width: 901px) {
  .chat-strip-header .brand-title { display: none; }
  .chat-strip-header .nav-item > .nav-link { padding: 8px 9px; font-size: 15px; }
}
/* phones / tablets: the inline actions fold into the ☰ panel (existing behaviour) */
@media (max-width: 900px) {
  .chat-strip-header, .chat-strip-header.collapsed { padding: 0 14px; gap: 10px; }
  .chat-strip-header .inline-actions, .chat-strip-header.collapsed .inline-actions { display: none; }
  .chat-strip-header .inline-actions.show {
    display: flex !important; position: absolute; top: calc(100% + 6px); right: 12px; left: auto; width: min(320px, calc(100vw - 24px));
    max-height: calc(100dvh - 90px); overflow-y: auto; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px;
    background: var(--c-card) !important; color: var(--c-ink); border: 1px solid var(--c-line) !important; border-radius: 14px; box-shadow: 0 18px 40px rgb(0 0 0 / .3);
  }
  .chat-strip-header .inline-actions.show .nav-item > .nav-link { color: var(--c-ink) !important; padding: 10px 12px; font-weight: 600 !important; }
  .chat-strip-header .inline-actions.show .nav-caret { display: none; }
  .chat-strip-header .inline-actions.show .nav-menu { display: none; }
  .chat-strip-header .inline-actions.show .nav-community-menu {
    display: grid; position: static; visibility: visible; opacity: 1; transform: none; width: auto; box-shadow: none; border: 0; padding: 0 0 0 10px; background: none;
  }
  .chat-strip-header .inline-actions.show .nav-community-menu small { display: none; }
  .chat-strip-header .inline-actions.show .lang-switch { color: var(--c-ink) !important; border-color: var(--c-line) !important; margin: 8px 12px !important; max-width: none; }
  .chat-strip-header .inline-actions.show #headerLoginBtn { margin: 6px 12px !important; }
  .chat-strip-header .inline-actions.show #profileMenuWrap { margin: 6px 12px; }
}
@media (max-width: 420px) { .chat-strip-header .brand-title { display: none; } }

/* ---------- left menu (conversation drawer) ---------- */
.conv-drawer, html.theme-dark .conv-drawer {
  background: var(--c-paper-2); color: var(--c-ink); border-right: 1px solid var(--c-line); font-family: var(--c-ui);
}
.conv-drawer-head { height: var(--c-head-h); padding: 0 12px 0 18px; border-bottom: 1px solid var(--c-line); }
.conv-brand, html.theme-dark .conv-brand { font-family: var(--c-display); font-weight: 400; font-size: 1.35rem; color: var(--c-ink); letter-spacing: 0; }
.conv-collapse { color: var(--c-ink-2); }
.conv-collapse:hover { background: var(--c-line); color: var(--c-ink); }
.conv-drawer-body { padding: 14px 12px 12px; }
.conv-new-btn, html.theme-dark .conv-new-btn {
  background: var(--c-accent); color: var(--c-accent-ink); border: 0; border-radius: 999px; padding: 10px 14px; font: inherit; font-weight: 600; font-size: 15px;
  box-shadow: 0 6px 16px rgb(123 17 19 / .18);
}
.conv-new-btn:hover { filter: brightness(1.08); }
.conv-section-label, html.theme-dark .conv-section-label {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--c-ink-2); margin: 18px 6px 6px; padding: 0;
}
.conv-commune-label, html.theme-dark .conv-commune-label { color: var(--c-ink-2); }
.conv-list .conv-item, .conv-list > * { border-radius: 10px; }
.conv-list .conv-item, .conv-list > a, .conv-list > div { font-size: 15px; }
.conv-list .conv-item:hover, .conv-list > *:hover { background: rgb(0 0 0 / .045); }
html.theme-dark .conv-list .conv-item:hover, html.theme-dark .conv-list > *:hover { background: rgb(255 255 255 / .05); }
.conv-list .active, .conv-list [aria-current="true"], .conv-list .conv-item.active {
  background: var(--c-card) !important; box-shadow: inset 3px 0 0 var(--c-accent); font-weight: 600;
}
.conv-nav a, html.theme-dark .conv-nav a { color: var(--c-ink); border-radius: 8px; font-size: 15px; }
.conv-nav a:hover { background: rgb(0 0 0 / .045); color: var(--c-accent); }
html.theme-dark .conv-nav a:hover { background: rgb(255 255 255 / .05); }
.conv-commune, html.theme-dark .conv-commune { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.conv-commune-forum { color: var(--c-accent) !important; font-weight: 600; }
.conv-topics-chips a, .conv-topics .topic-chip, .conv-topics a.topic-chip {
  background: var(--c-card); border: 1px solid var(--c-line); color: var(--c-ink); border-radius: 999px;
}
.conv-topics-chips a:hover, .conv-topics .topic-chip:hover { border-color: var(--c-accent); color: var(--c-accent); }
.conv-foot { border-top: 1px solid var(--c-line); }
.conv-foot a { color: var(--c-ink); }
.conv-foot a:hover { color: var(--c-accent); }
.conv-avatar { background: var(--c-accent) !important; color: var(--c-accent-ink) !important; }
/* edge handle: a slim tab instead of the big red block */
.conv-edge-toggle {
  width: 20px; height: 56px; border-radius: 0 10px 10px 0; background: var(--c-night); color: var(--c-night-ink);
  box-shadow: 2px 0 10px rgb(0 0 0 / .18); animation: none;
}
.conv-edge-toggle:hover { background: var(--c-accent); width: 24px; }
.conv-edge-toggle svg { width: 14px; height: 14px; }

/* ---------- conversation ---------- */
.msg .bubble { font-family: var(--c-ui); border-color: var(--c-line); }
.msg.assistant .bubble, html.theme-dark .msg.assistant .bubble { background: var(--c-card); border: 1px solid var(--c-line); border-radius: 16px; }
.msg.assistant .answer-body { font-family: var(--c-read); font-size: 1.08rem; line-height: 1.75; color: var(--c-ink); }
.msg.user .bubble, html.theme-dark .msg.user .bubble { background: var(--c-accent-soft); border: 0; border-left: 3px solid var(--c-accent); border-radius: 14px; color: var(--c-ink); }
.user-msg-name { color: var(--c-accent); }
.passage, html.theme-dark .passage { background: var(--c-card); border-color: var(--c-line); border-radius: 14px; }
.passage .passage-text { font-family: var(--c-read); font-size: 1.04rem; line-height: 1.75; }
.cite-ref, html.theme-dark .cite-ref { border-radius: 999px; }

/* ---------- welcome ---------- */
.welcome-panel h1 { font-family: var(--c-display); font-weight: 400; color: var(--c-ink); letter-spacing: 0; }
.welcome-instruction { color: var(--c-ink); }
.welcome-quotes li, html.theme-dark .welcome-quotes li { background: var(--c-card); border-color: var(--c-line); font-family: var(--c-read); font-size: 15px; }

/* ---------- composer ----------
   One raised unit: Osho's image, the question box, mic and send all sit in a
   single rounded card on a solid bar (nothing scrolls through behind it). */
#chat-form.composer, html.theme-dark #chat-form.composer {
  background: var(--c-paper); border-top: 1px solid var(--c-line); padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 30px rgb(42 29 22 / .06);
}
#chat-form .composer-inner, html.theme-dark #chat-form .composer-inner {
  max-width: 900px; margin: 0 auto; gap: 8px; align-items: flex-end;
  background: var(--c-card); border: 1.5px solid var(--c-line); border-radius: 24px; padding: 8px 8px 8px 10px;
  box-shadow: 0 10px 30px rgb(42 29 22 / .10), 0 1px 2px rgb(42 29 22 / .06);
  transition: border-color .15s, box-shadow .15s;
}
#chat-form .composer-inner:focus-within { border-color: var(--c-accent); box-shadow: 0 0 0 4px var(--c-accent-soft), 0 12px 32px rgb(42 29 22 / .12); }
#chat-form .input-wrap, html.theme-dark #chat-form .input-wrap { background: transparent; border: 0; box-shadow: none; border-radius: 0; gap: 10px; align-items: flex-end; }
#chat-form .input-left-icon, html.theme-dark #chat-form .input-left-icon {
  width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--c-ochre); background: #fff; flex: none; margin-bottom: 2px;
}
#question, html.theme-dark #question {
  font-family: var(--c-ui); font-size: 17.5px; line-height: 1.45; color: var(--c-ink); background: transparent;
  border: 0 !important; box-shadow: none !important; outline: none; padding: 11px 6px; min-height: 46px; resize: none;
}
#question::placeholder { font-family: var(--c-ui); color: var(--c-ink-2); opacity: 1; }
#chat-form .actions-right { gap: 6px; align-items: flex-end; }
#chat-form .icon-square, html.theme-dark #chat-form .icon-square {
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--c-paper-2); color: var(--c-ink); box-shadow: none;
}
#chat-form .icon-square:hover { background: var(--c-line); }
#chat-form .maroon-btn-square, html.theme-dark #chat-form .maroon-btn-square,
#chat-form button#btn-detailed, html.theme-dark #chat-form button#btn-detailed {
  width: 48px; height: 48px; border-radius: 50%; background: var(--c-accent); color: var(--c-accent-ink); border: 0;
  box-shadow: 0 6px 16px rgb(123 17 19 / .28);
}
#chat-form button#btn-detailed:hover { filter: brightness(1.1); transform: translateY(-1px); }
#chat-form button#btn-detailed svg { width: 21px; height: 21px; }
@media (max-width: 640px) {
  #chat-form.composer { padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); }
  #chat-form .composer-inner { border-radius: 20px; padding: 6px 6px 6px 12px; }
  #question { font-size: 16px; padding: 10px 4px; }
  #chat-form .icon-square { width: 40px; height: 40px; }
  #chat-form button#btn-detailed { width: 44px; height: 44px; }
}

/* ---------- footer + discovery strip (logged-out home) ---------- */
footer { font-family: var(--c-ui); color: var(--c-ink-2); background: transparent; }
.home-discovery, html.theme-dark .home-discovery { background: var(--c-paper-2); border-top-color: var(--c-line); }
.home-discovery-label, html.theme-dark .home-discovery-label { color: var(--c-accent); }

/* "scroll to the question box" cue on the welcome screen */
#chatCue, #chatCue svg { color: var(--c-ochre) !important; stroke: var(--c-ochre); }
#chatCue { filter: drop-shadow(0 4px 12px rgb(217 142 43 / .35)); }

/* links that were maroon-on-white read poorly on the dark theme */
.conv-topics > a, .welcome-quotes a { color: var(--c-accent) !important; }
html.theme-dark .conv-topics > a, html.theme-dark .welcome-quotes a { color: var(--c-accent) !important; }

/* skip link (first Tab stop) */
.c-skip { position: absolute; left: 12px; top: -60px; z-index: 2000; background: var(--c-accent); color: var(--c-accent-ink); padding: 10px 16px; border-radius: 10px; font-weight: 600; text-decoration: none; }
.c-skip:focus { top: 10px; }
/* screen-reader page heading once the welcome (which has the visible h1) is gone */
.c-sr-h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
body:not(.in-chat) .c-sr-h1 { display: none; }
/* chat citation position chips ("Question 4"): readable contrast + a real tap target */
.passage-pos { color: var(--c-ink-2) !important; border-bottom-color: var(--c-line) !important; display: inline-block; padding: 4px 2px; }
@media (max-width: 600px) { .passage-pos { padding: 10px 4px; } }
.chat-strip-header .nav-menu .nav-mh { display: block; padding: 8px 12px 2px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-ink-2); font-weight: 600; }
.chat-strip-header .nav-menu .nav-mh:not(:first-child) { border-top: 1px solid var(--c-line); margin-top: 6px; padding-top: 10px; }
/* dark theme: the page's inline dark rule for .maroon-btn-square must not win; mic needs its own surface */
html.theme-dark #chat-form button#btn-detailed.maroon-btn-square { background: var(--c-accent) !important; color: var(--c-accent-ink) !important; }
html.theme-dark #chat-form .icon-square:not(#btn-detailed) { background: var(--c-line) !important; color: var(--c-ink) !important; }

/* Topics mega menu: top guides (EN + हिं), comparisons, people — each with "all" links */
.chat-strip-header .nav-menu.nav-mega { width: min(720px, calc(100vw - 40px)); }
.chat-strip-header .mm-topics { display: grid !important; grid-template-columns: 1.25fr 1fr 1fr; gap: 6px 22px; padding: 16px 18px 14px !important; }
.mm-col { min-width: 0; display: flex; flex-direction: column; }
.mm-list { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.mm-list.mm-one { grid-template-columns: 1fr; }
.mm-list li { display: flex; align-items: center; gap: 4px; min-width: 0; }
.mm-list a { padding: 6px 8px !important; border-radius: 8px; font-weight: 600 !important; font-size: 14.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-list a i { font-style: normal; font-weight: 400; color: var(--c-ink-2); padding: 0 2px; }
.mm-list a small { display: inline !important; margin-left: 6px; font-weight: 400; font-size: 12px !important; }
.mm-list .mm-hi { flex: none; font-size: 12px !important; font-weight: 600 !important; padding: 2px 7px !important; border: 1px solid var(--c-line); border-radius: 999px; color: var(--c-ink-2) !important; }
.mm-list .mm-hi:hover { border-color: var(--c-accent); color: var(--c-accent) !important; }
.mm-all { margin-top: auto; font-size: 13.5px !important; font-weight: 700 !important; color: var(--c-accent) !important; padding: 6px 8px !important; }
.mm-hiall { margin-top: 0; font-weight: 600 !important; }
@media (max-width: 900px) { .chat-strip-header .inline-actions.show .nav-mega { display: none; } }
.chat-strip-header .nav-menu.nav-mega { left: 50%; transform: translate(-50%, -4px); }
.chat-strip-header .nav-item:hover > .nav-menu.nav-mega, .chat-strip-header .nav-item.open > .nav-menu.nav-mega { transform: translate(-50%, 0); }

/* ---------- conversation controls in the header (scrolled into a chat) ---------- */
.chat-tools { display: none; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; }
.chat-strip-header.chatmode .chat-tools:not([hidden]) { display: flex; animation: ctIn .22s ease; }
.chat-strip-header.chatmode .nav-item { display: none; }
@keyframes ctIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ct-title { flex: 1 1 auto; min-width: 0; max-width: 34ch; text-align: left; background: none; border: 0; padding: 0 6px; color: var(--c-night-ink);
            font: inherit; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.ct-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; min-width: 36px; padding: 0 9px;
          border-radius: 999px; border: 1px solid rgb(255 255 255 / .2); background: transparent; color: var(--c-night-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.ct-btn:hover { border-color: var(--c-ochre); background: rgb(255 255 255 / .06); }
.ct-text { padding: 0 13px; }
.ct-aa { font-family: var(--c-display); font-size: 16px; line-height: 1; } .ct-aa small { font-size: 11px; }
.chat-strip-header.chatmode #navCommunity { margin-right: 0; }
.chat-strip-header.chatmode .chat-tools { margin-right: auto; }
@media (max-width: 900px) {
  .chat-strip-header.chatmode .brand-title { display: none; }
  .ct-title { display: none; }
  .ct-text span { display: none; } .ct-text { padding: 0 9px; }
}
@media (max-width: 420px) { #ctSize { display: none; } }

/* ---------- side menu, bottom: compact explore grid, one connect/app row, inline account ---------- */
.conv-explore, html.theme-dark .conv-explore { display: grid !important; grid-template-columns: 1fr 1fr; gap: 2px 6px; padding: 0 !important; background: none !important; border: 0 !important; }
.conv-explore a { padding: 6px 8px !important; font-size: 14.5px !important; border-radius: 8px; }
.conv-mini { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 4px; padding: 0 2px; }
.conv-mini .conv-cx { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; font-size: 14px; font-weight: 500; padding: 6px 6px; border-radius: 8px; }
.conv-mini .conv-cx:hover { background: rgb(0 0 0 / .045); }
.conv-mini .conv-app { text-decoration: none; font-size: 13px; font-weight: 600; color: var(--c-ink); padding: 4px 11px; border-radius: 999px; border: 1px solid var(--c-line); }
.conv-mini .conv-app:hover { border-color: var(--c-accent); color: var(--c-accent); }
.conv-foot { margin-top: 10px !important; padding-top: 10px !important; display: block !important; }
.conv-me { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.conv-me .conv-user { margin: 0 !important; padding: 0 !important; min-width: 0; align-items: center; gap: 9px; }
.conv-me .conv-user-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12ch; }
.conv-me-actions { display: flex; gap: 4px; flex: none; }
.conv-me-actions .conv-ic { width: 34px; height: 34px; padding: 0 !important; border-radius: 50%; align-items: center; justify-content: center; color: var(--c-ink-2) !important; border: 1px solid var(--c-line); }
.conv-me-actions .conv-ic[style*="block"] { display: inline-flex !important; }
.conv-me-actions .conv-ic:hover { color: var(--c-accent) !important; border-color: var(--c-accent); }
.conv-foot #convLoginLink { font-weight: 600; color: var(--c-accent); }

/* ---------- phone menu panel (mirrors the site phone menu) ---------- */
.c-mnav { display: none; position: fixed; left: 0; right: 0; top: var(--c-head-h); bottom: 0; z-index: 1250; overflow-y: auto; background: var(--c-night); color: var(--c-night-ink);
          padding: 14px 16px 28px; font-family: var(--c-ui); flex-direction: column; gap: 18px; border-top: 1px solid rgb(255 255 255 / .08); }
.c-mnav.open { display: flex; animation: ctIn .22s ease; }
@media (min-width: 901px) { .c-mnav, .c-mnav.open { display: none; } }
.c-mnav a { color: var(--c-night-ink); text-decoration: none; }
.cm-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 8px; color: var(--c-ochre); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.cm-h a { color: var(--c-ochre) !important; font-size: 12.5px; letter-spacing: 0; text-transform: none; font-weight: 600; }
.cm-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.cm-pill { padding: 8px 14px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .18); font-size: 15px; background: rgb(255 255 255 / .04); }
.cm-chip { display: inline-flex; align-items: center; border: 1px solid rgb(255 255 255 / .18); border-radius: 999px; overflow: hidden; background: rgb(255 255 255 / .04); }
.cm-chip a { padding: 8px 11px; font-size: 15px; }
.cm-chip .cm-hi { border-left: 1px solid rgb(255 255 255 / .18); color: var(--c-night-mute) !important; font-size: 13px; padding: 8px 10px; }
.cm-more { margin-top: 8px; gap: 4px 16px; }
.cm-more a { padding: 4px 0; font-size: 14px; color: var(--c-night-mute) !important; }
.cm-any { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.cm-anyb { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 6px; border-radius: 12px; border: 1px solid rgb(255 255 255 / .16); font-size: 14px; text-align: center; background: rgb(255 255 255 / .04); }
.cm-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: #ef4444; }
.c-mnav [data-cx-connect] { color: var(--c-night-ink) !important; }
.cm-you { border-top: 1px solid rgb(255 255 255 / .1); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.cm-you-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.cm-you-links a { font-size: 16px; padding: 4px 0; }
.cm-you-links [hidden] { display: none !important; }
.cm-lang, .cm-theme { font: inherit; font-size: 15px; background: transparent; color: var(--c-night-ink); border: 1px solid rgb(255 255 255 / .2); border-radius: 10px; padding: 6px 10px; }
.cm-lang option { color: #222; }
/* the old dropdown panel is replaced by #cMnav on phones */
@media (max-width: 900px) { .chat-strip-header .inline-actions.show { display: none !important; } }
.c-mnav .nav-live { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; background: var(--c-accent-soft); color: var(--c-accent); padding: 1px 6px; border-radius: 999px; margin-left: 4px; vertical-align: 2px; }

/* Phone menu sections (structured): icon rows that expand into grouped cards */
.pm-list { display: flex; flex-direction: column; gap: 8px; }
.pm-sec { border: 1px solid rgb(255 255 255 / .09); border-radius: 16px; background: rgb(255 255 255 / .025); overflow: hidden; }
.pm-sec[open] { background: rgb(255 255 255 / .045); border-color: rgb(255 255 255 / .14); }
.pm-sec summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.pm-sec summary::-webkit-details-marker { display: none; }
.pm-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--c-ochre); background: rgb(217 142 43 / .14); }
.pm-t { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 17px; font-weight: 600; color: var(--c-night-ink); line-height: 1.25; }
.pm-t small { font-size: 13px; font-weight: 400; color: var(--c-night-mute); margin-top: 2px; }
.pm-chev { flex: none; color: var(--c-night-mute); transition: transform .18s; }
.pm-sec[open] .pm-chev { transform: rotate(180deg); color: var(--c-ochre); }
.pm-body { display: flex; flex-direction: column; gap: 10px; padding: 2px 12px 14px; animation: pmIn .18s ease; }
@keyframes pmIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pm-card { background: rgb(0 0 0 / .18); border: 1px solid rgb(255 255 255 / .07); border-radius: 14px; padding: 10px 10px 12px; }
.pm-ch { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 8px; }
.pm-ch span { color: var(--c-night-mute); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.pm-cardall { color: var(--c-ochre) !important; font-size: 13px !important; font-weight: 600; text-decoration: none; padding: 0 !important; display: inline !important; }
.pm-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pm-tile, .pm-vs, .pm-person, .pm-itile { display: flex !important; flex-direction: column; gap: 2px; padding: 10px 12px !important; border-radius: 12px; text-decoration: none;
  background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .08); color: var(--c-night-ink) !important; min-width: 0; }
.pm-tile:hover, .pm-vs:hover, .pm-person:hover, .pm-itile:hover { border-color: var(--c-ochre); }
.pm-tile b, .pm-person b, .pm-itile b { font-size: 15.5px; font-weight: 600; line-height: 1.25; }
.pm-tile small, .pm-person small { font-size: 12.5px; color: var(--c-night-mute); line-height: 1.3; }
.pm-wide { grid-column: 1 / -1; }
.pm-feature { background: linear-gradient(120deg, rgb(123 17 19 / .55), rgb(217 142 43 / .18)) !important; border-color: rgb(217 142 43 / .35) !important; }
.pm-vs { flex-direction: row !important; flex-wrap: wrap; align-items: baseline; gap: 2px 5px; }
.pm-vs b { font-size: 14.5px; font-weight: 600; } .pm-vs i { font-style: italic; color: var(--c-ochre); font-size: 12.5px; }
.pm-itile { flex-direction: row !important; align-items: center; gap: 10px; }
.pm-itile svg { flex: none; color: var(--c-ochre); }
.pm-soft { background: rgb(217 142 43 / .08) !important; }
.pm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pm-chip { display: inline-flex; align-items: center; border: 1px solid rgb(255 255 255 / .16); border-radius: 999px; overflow: hidden; background: rgb(255 255 255 / .04); }
.pm-chip a { padding: 7px 11px !important; font-size: 15px !important; color: var(--c-night-ink) !important; text-decoration: none; display: inline-block; }
.pm-chip .pm-hi { border-left: 1px solid rgb(255 255 255 / .16); color: var(--c-night-mute) !important; font-size: 13px !important; padding: 7px 9px !important; }
.pm-foot { align-self: flex-start; color: var(--c-ochre) !important; font-size: 14px !important; font-weight: 600; text-decoration: none; padding: 2px 4px !important; }
.pm-link { display: flex !important; align-items: center; gap: 12px; padding: 12px 14px !important; text-decoration: none; }
.pm-link:hover { border-color: rgb(217 142 43 / .45); }