@font-face{font-family:'Bungalow';src:url('/fonts/bungalow-webfont.woff2') format('woff2'),url('/fonts/bungalow-webfont.woff') format('woff');font-weight:normal;font-style:normal}
/* OpenDyslexic (SIL OFL 1.1) — optional dyslexia-friendly reading/typing font. See licenses.html. */
@font-face{font-family:'OpenDyslexic';src:url('/fonts/opendyslexic-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'OpenDyslexic';src:url('/fonts/opendyslexic-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
/* Per-device reading preferences (Settings ▸ Appearance): text size scales the message text +
   composer via --chat-scale; font choice swaps the reading/typing surfaces via --chat-font.
   Classes are set on <html> by applyReadingPrefs() in app.js and persisted to localStorage. */
html.tsize-sm { --chat-scale: 0.88; }
html.tsize-lg { --chat-scale: 1.15; }
html.tsize-xl { --chat-scale: 1.32; }
html.font-dyslexic { --chat-font: 'OpenDyslexic', 'Comic Sans MS', var(--font-body, sans-serif); }

/* ── Design tokens ───────────────────────────────────────────────────────────
   Tabella brand is intentionally DARK + GOLD (see brand identity). These tokens
   name the values that repeated as literals throughout this file. Replacing the
   literals with var(--token) is a pure refactor: each token equals the exact
   shade it replaced, so the rendered result is unchanged.

   Note: the ALPHA variants of gold (#c9a24a15, #c9a24a33, ...) are intentionally
   left as literals — CSS custom properties can't carry an 8-digit alpha suffix.

   UI typography: system sans-serif for readable labels and compact controls.

   z-index ladder (intended ordering; existing values documented, not renumbered):
     base modals ......... 200        toasts/upload ....... 800-900
     menus / popovers .... 500-600    splash / app-load ... 9999
     critical lock ....... 10000+  (panic lock MUST out-rank splash)
────────────────────────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --gold: #c9a24a;            /* Tabella brand gold */

  /* Dark surfaces (base -> raised) */
  --bg: #111316;             /* app / chat background */
  --panel: #202328;          /* message and card surface */
  --panel-2: #262a30;        /* hovered surface */
  --panel-3: #181b1f;        /* sidebar / header rail */
  --sunken: #14171b;         /* recessed bars */
  --input: #20242a;          /* inputs */
  --raised: #202328;         /* modal surface */

  /* Hairline borders (referenced with a fallback elsewhere; now defined) */
  --line: rgba(201,162,74,0.15);

  /* Text */
  --text: #f2f3f5;
  --text-muted: #aeb4bf;
  --text-dim: #969eab;

  /* Semantic accents (deliberately NOT gold — left as literals in rules) */
  --danger: #ff6666;
  --role-admin: #6ab0f5;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 999px;

  /* Shared brand heading font stack */
  --font-body: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-heading: var(--font-body);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* Desktop (WebView2) safety net: never let media render past its container. A few assets render
   at their natural (large) size inside the Tauri WebView even though every browser respects their
   inline box -- which overflowed the narrow desktop window with giant graphics. Cap all media
   defensively so this can't happen again regardless of the engine. */
img, video, svg, canvas { max-width: 100%; }
html, body { height: 100%; font-family: var(--font-body); }
body { background: var(--bg); color: #fff; display: flex; height: 100vh; height: 100dvh; overflow: hidden; }
/* App shells: pin the page so it can never be scrolled out from under the fixed screens (iPhone
   2.2.2 bug: chat header slid off the top and taps on the message box missed). */
html.app-shell body { position: fixed; inset: 0; width: 100%; }
/* Messages this device has no key for: "Locked message" plus, until the device is unlocked, a bar on
   top. 2.3.4 review: no italics and no dimming (harder to read with dyslexia, and low contrast on the
   coloured "mine" bubbles); the bubble's own text colour (AA in every theme) and a small lock icon
   (1.8 stroke, currentColor) set it apart instead. */
.msg-body.msg-locked { font-style: normal; opacity: 1; }
.msg-body.msg-locked::before { content: ''; display: inline-block; width: 1.05em; height: 1.05em; margin-right: 0.35em; vertical-align: -0.17em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat; }
/* The bar (not unlocked / history not restored / opening). Theme tokens, so it is not a dark box in
   the light themes. The gold button is the app's gold in every theme, like the dialogs' OK. */
.tbl-locked-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 12px; margin: 0 auto 10px; padding: 8px 12px; max-width: 560px; box-sizing: border-box; border-radius: 12px;
  font-size: 14px; line-height: 1.4; text-align: center;
  background: var(--raised, #202328); border: 1px solid var(--line, rgba(201, 162, 74, 0.45)); color: var(--text, #f2f3f5);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }
.tbl-locked-bar button { background: #c9a24a; color: #14110b; border: 0; border-radius: 999px; padding: 6px 14px; max-width: 100%;
  font: inherit; font-weight: 700; cursor: pointer; }
/* Phones (also turned sideways): 17 px words and a 44 px button (review 2026-10-14: it was 12 px
   with a 30 px button, on the one bar that has the button that fixes the problem). */
@media (max-width: 760px), (pointer: coarse) and (max-height: 560px) {
  .tbl-locked-bar { font-size: 17px; padding: 8px 12px; gap: 8px 12px; }
  .tbl-locked-bar button { min-height: 44px; padding: 10px 18px; }
}
/* 2.3.4: on an unlocked device, locked messages over an hour old are hidden; a short line stands
   where each run of them was. Same pill as the day divider, muted text (AA in all five themes), no
   italics (harder to read with dyslexia), 17 px on phones. */
.tbl-hidden-note { display: flex; justify-content: center; margin: 4px 0 8px; flex-shrink: 0; }
.tbl-hidden-note span { max-width: min(560px, 100%); box-sizing: border-box; padding: 8px 16px; border-radius: 14px;
  background: var(--tb-day-bg, #1b1e23); color: var(--text-muted); border: 1px solid var(--tb-line, rgba(255,255,255,0.07));
  font-size: 15px; line-height: 1.45; text-align: center; overflow-wrap: anywhere; }
@media (max-width: 760px), (pointer: coarse) and (max-height: 560px) { .tbl-hidden-note span { font-size: 17px; padding: 8px 14px; } }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }
:focus:not(:focus-visible) { outline: none; }
.skip-link:focus { left: 8px; top: 8px; width: auto; height: auto; overflow: visible; }

/* -- Splash screen ---------------------------------------------------------- */
/* Panic-key lock screen */
/* z-index 10000: the panic lock is a SECURITY screen and MUST out-rank the
   splash (#splash-screen) and initial loader (#app-loading), both at 9999. */
#panic-lock-screen { position: fixed; inset: 0; background: #07070b; display: flex; align-items: center; justify-content: center; z-index: 10000; cursor: pointer; }
#panic-lock-screen.hidden { display: none; }
.pls-inner { text-align: center; pointer-events: none; }
.pls-logo { font-family: 'Palatino Linotype', Palatino, Georgia, serif; font-size: 28px; font-weight: 700; color: var(--gold); letter-spacing: 0.04em; margin-bottom: 12px; }
.pls-hint { color: var(--text-dim); font-size: 13px; margin-bottom: 24px; }
#pls-unlock-btn { pointer-events: all; }

/* Key-combo recorder button active state */
#panic-key-recorder.recording { background: #1e1a0f; border-color: var(--gold); color: var(--gold); animation: pulse-gold 1s ease-in-out infinite; }
@keyframes pulse-gold { 0%,100% { box-shadow: 0 0 0 0 rgba(201,162,74,0); } 50% { box-shadow: 0 0 0 4px rgba(201,162,74,0.25); } }

#splash-screen { position: fixed; inset: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; z-index: 9999; transition: opacity 0.5s ease; }
#splash-screen.fade-out { opacity: 0; pointer-events: none; }
#splash-screen.hidden { display: none; }
#splash-video { width: 100%; height: 100%; object-fit: contain; max-width: 420px; max-height: 300px; }

/* -- Sidebar ---------------------------------------------------------------- */
#sidebar { width: 260px; background: var(--panel-3); border-right: 1px solid #c9a24a15; display: flex; flex-direction: column; }
#sidebar-header { padding: 14px 12px 12px; border-bottom: 1px solid #c9a24a15; }
#sidebar-header-inner { display: flex; align-items: center; gap: 10px; }
#sidebar-user-avatar { width: 40px; height: 40px; border-radius: 50%; background: #3a2f14; color: var(--gold); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; flex-shrink: 0; cursor: pointer; overflow: hidden; }
#sidebar-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
#sidebar-user-info { flex: 1; min-width: 0; }
#app-title { font-size: 14px; font-weight: 700; color: #e8edf6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#user-info { font-size: 10.5px; color: var(--text-muted); margin-top: 1px; white-space: normal; word-break: break-all; line-height: 1.2; cursor: pointer; }
#sidebar-compose-btn, #sidebar-lock-btn, #sidebar-search-btn { width: 36px; height: 36px; border-radius: 50%; background: none; border: none; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s, color 0.15s; }
#sidebar-compose-btn:hover, #sidebar-lock-btn:hover, #sidebar-search-btn:hover { background: #c9a24a18; color: var(--gold); }
#sidebar-lock-btn svg, #sidebar-search-btn svg { width: 18px; height: 18px; }
/* Lock & Hide: full stealth — pure black, no branding, no unlock card until tapped. */
#applock-overlay.stealth { background: #000 !important; } /* beats the inline overlay bg */
#applock-overlay.stealth .settings-card { display: none; }
#room-list { flex: 1; overflow-y: auto; padding: 6px 0; }
/* Swipe actions: the row content slides over two action trays pinned to each edge. */
.room-item { position: relative; overflow: hidden; }
.room-swipe-content { display: flex; align-items: center; gap: 10px; width: 100%; will-change: transform; background: var(--panel-3); position: relative; z-index: 2; }
.room-swipe-tray { position: absolute; top: 0; bottom: 0; display: flex; align-items: stretch; z-index: 1; opacity: 0; }
.room-swipe-tray--left { right: 0; }   /* revealed by swiping the row LEFT */
.room-swipe-tray--right { left: 0; }   /* revealed by swiping the row RIGHT */
.room-swipe-btn { border: none; width: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #fff; font-size: 10.5px; font-weight: 600; cursor: pointer; }
.room-swipe-btn svg { width: 20px; height: 20px; }
/* Content sits opaque over the trays, so the hover/active highlight must live on IT, not the row. */
.room-item:hover .room-swipe-content { background: #1a160d; }
.room-item.active .room-swipe-content { background: #211b0f; }
.room-item { display: flex; align-items: center; padding: 8px 12px; cursor: pointer; border-radius: 10px; margin: 1px 6px; transition: background 0.15s; gap: 10px; }
.room-item:hover { background: #c9a24a12; }
.room-item.active { background: #c9a24a1e; }
.room-avatar { width: 42px; height: 42px; border-radius: 50%; background: #3a2f14; color: var(--gold); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; flex-shrink: 0; overflow: hidden; }
.avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.room-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.room-name { font-size: 14.5px; font-weight: 600; color: #e8edf6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
/* Telegram-style two-line chat row */
.room-toprow { display: flex; align-items: center; gap: 6px; }
.room-time { font-size: 11px; color: #8b867b; flex-shrink: 0; }
.room-pin { font-size: 11px; color: var(--gold); flex-shrink: 0; }
.room-botrow { display: flex; align-items: center; gap: 6px; }
.room-preview { flex: 1; min-width: 0; font-size: 12.5px; color: #9a958a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-item.unread .room-preview { color: #cfc9bb; font-weight: 500; }
.room-muted { font-size: 10px; opacity: 0.8; flex-shrink: 0; }
.room-badge--muted { background: #5a564d; color: #ddd; }
.room-badge { flex-shrink: 0; min-width: 19px; height: 19px; border-radius: 10px; background: var(--gold); color: #1a1408; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.room-sub { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
#sidebar-footer { padding: 8px 0 12px; border-top: 1px solid #c9a24a15; display: flex; justify-content: space-around; align-items: center; }
.sb-icon-btn { width: 44px; height: 44px; border-radius: 50%; background: none; border: none; color: var(--text-muted); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; transition: background 0.15s, color 0.15s; }
.sb-icon-btn:hover { background: #c9a24a15; color: var(--gold); }
.sb-icon-btn--danger:hover { background: rgba(255,68,68,0.1); color: #ff6666; }
.sb-icon-btn svg { width: 20px; height: 20px; }
.sb-icon-btn span { font-size: 10px; }

/* -- Main chat -------------------------------------------------------------- */
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#chat-header { padding: 10px 14px; border-bottom: 1px solid #c9a24a15; background: var(--bg); display: flex; align-items: center; gap: 10px; flex-shrink: 0; position: relative; }
#chat-peer-avatar { width: 38px; height: 38px; border-radius: 50%; background: #3a2f14; color: var(--gold); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex-shrink: 0; overflow: hidden; }
#chat-peer-avatar img { width: 100%; height: 100%; object-fit: cover; }
#chat-title-block { flex: 1; min-width: 0; display: flex; align-items: center; cursor: pointer; }
#chat-title-text-col { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
#chat-title { font-family: var(--font-heading); font-size: 17px; color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Founder Member: every current account is a closed-beta participant by definition (signup is
   100% allowlist-gated right now) -- shown as a fact, not a flex, so it's plain small caps gold,
   not a loud badge. Re-gate this once public signup ships and "founder" stops being universal. */
#chat-founder-label { font-size: 10px; color: var(--gold); letter-spacing: .04em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Tap-to-reveal quick actions -- replaces the name (not alongside it), so the header never
   gets crowded on a narrow phone screen. */
#chat-title-icons { display: flex; align-items: center; gap: 6px; }
/* Gold ring = Founder Member (every current user, closed beta). A ring rather than a filled
   badge so it doesn't fight the avatar's own gold-on-dark palette. */
.tbl-founder-ring { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--gold); }
/* Overflow (three-dot) menu: everything that isn't a call lives here */
#chat-overflow-menu { position: absolute; top: 56px; right: 10px; z-index: 260; background: #24262b; border: 1px solid rgba(201,162,74,0.2); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.55); min-width: 210px; padding: 6px; }
.chat-menu-row { display: flex; align-items: center; gap: 11px; width: 100%; background: none; border: none; color: #ddd8cc; font-size: 14px; padding: 10px 12px; border-radius: 8px; cursor: pointer; text-align: left; }
.chat-menu-row:hover { background: rgba(201,162,74,0.12); color: #fff; }
.chat-menu-row svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--gold); }
/* "Coming soon" (Leo 2026-10-14): a feature that does not work yet keeps its place with a small tag;
   a tap only says "Coming soon" (coming-soon.mjs). Only the row's icon is dimmed: the words and the
   tag keep full contrast (review 2026-10-15: the dimmed gold tag was 1.9:1 to 3.4:1, under the 4.5:1
   small text needs, and it is the only thing that says why the row does nothing). The tag is solid,
   in the theme's own text colour on its own surface colour, so it reads on any background. */
.tbl-coming-soon { cursor: default; }
.tbl-coming-soon > svg, .tbl-coming-soon > img { opacity: 0.5; }
.tbl-coming-soon:hover { background: none; }
.tbl-soon-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--text); background: var(--text); color: var(--raised); font-size: 11px; font-weight: 700; line-height: 1.5; white-space: nowrap; vertical-align: middle; flex-shrink: 0; opacity: 1; }
.chat-menu-row .tbl-soon-tag, .ctx-action .tbl-soon-tag, .comp-action .tbl-soon-tag { margin-left: auto; }
.tbl-soon-note { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.tbl-soon-note .tbl-soon-tag { margin: 0 6px 0 0; }
#e2ee-badge { font-size: 11px; background: #4caf5018; color: #4caf50; padding: 3px 10px; border-radius: 20px; border: 1px solid #4caf5030; }
/* Phase 1: contact verification shield in the chat header */
.chat-shield { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; border: 1px solid transparent; cursor: pointer; background: none; display: inline-flex; align-items: center; gap: 5px; }
.chat-shield.verified { color: var(--gold); background: #c9a24a18; border-color: #c9a24a44; }
.chat-shield.unverified { color: var(--text-muted); background: #ffffff0a; border-color: #ffffff1a; }
.chat-shield.changed { color: #ff6666; background: rgba(255,68,68,0.12); border-color: rgba(255,68,68,0.4); }
/* 2.5.0: why a contact is not verified (kt-publish.mjs contactShieldWords). Theme tokens only, so
   each reads in every theme. "Not on the key list yet" is a gentle nudge (accent), the other two
   stay quiet (muted). The ::after widens the tap area to 44 px without moving the header. */
.chat-shield { position: relative; }
.chat-shield::after { content: ''; position: absolute; inset: -12px -4px; }
.chat-shield.notlisted { color: var(--tb-text, var(--text)); background: var(--tb-accent-soft, #c9a24a18); border-color: var(--tb-accent, var(--gold)); }
.chat-shield.nokey, .chat-shield.unknown { color: var(--text-muted); background: transparent; border-color: var(--tb-pill-border, var(--line)); border-style: dashed; }
.chat-shield .chat-shield-hint { font-weight: 500; opacity: 0.85; }
.chat-shield .chat-shield-hint::before { content: '· '; }
/* Phones: the header is narrow, so the short words show and no hint (the tap still opens Picture
   Verify, which says what to do). The full label squeezed the contact's name down to "q...". */
.chat-shield .chat-shield-short { display: none; }
@media (max-width: 699px) {
  .chat-shield .chat-shield-hint, .chat-shield .chat-shield-text { display: none; }
  .chat-shield .chat-shield-short { display: inline; }
}
#keylist-action-btn { min-height: 44px; }
/* The two light themes: gold text (2.7:1 on cream) and #ff6666 (2.8:1 on white) were hard to read.
   Dark text on the same gold / red tint; the pill keeps its colour. */
html[data-theme="light-blue"] .chat-shield.verified, html[data-theme="cream-gold"] .chat-shield.verified { color: var(--tb-text, var(--text)); }
html[data-theme="light-blue"] .chat-shield.changed, html[data-theme="cream-gold"] .chat-shield.changed { color: #b3261e; }
#chat-header-right { margin-left: auto; display: flex; gap: 8px; }
.chat-icon-btn { background: none; border: none; color: #8a8f9a; width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.chat-icon-btn:hover { background: rgba(201,162,74,0.12); color: var(--gold); }
.chat-icon-btn svg { width: 18px; height: 18px; }
#chat-search-bar { display: none; align-items: center; gap: 8px; padding: 8px 16px; background: var(--sunken); border-bottom: 1px solid #c9a24a15; flex-shrink: 0; }
#chat-search-bar .form-input { flex: 1; margin: 0; padding: 8px 12px; }
#chat-search-count { font-size: 12px; color: #888; min-width: 38px; text-align: center; }
#messages mark.search-hit { background: rgba(201,162,74,0.35); color: inherit; border-radius: 3px; padding: 0 1px; }
#messages mark.search-hit.current { background: var(--gold); color: var(--bg); }

/* Pinned bar */
#pinned-bar { display: none; padding: 6px 20px; background: #1c1608; border-bottom: 1px solid #c9a24a22; flex-direction: row; align-items: center; gap: 8px; flex-shrink: 0; }
#pinned-count { font-size: 12px; color: var(--gold); }
.pinned-icon { color: var(--gold); font-size: 14px; }

/* Messages */
#messages { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; box-sizing: border-box; max-width: 100%; }
.msg-wrap { display: flex; align-items: flex-end; gap: 8px; position: relative; width: 100%; max-width: 100%; box-sizing: border-box; justify-content: flex-start; }
.msg-wrap.mine { flex-direction: row-reverse; justify-content: flex-start; }
.msg-wrap:hover .msg-ctx-btn, .msg-wrap:focus-within .msg-ctx-btn { display: flex; }
.msg-ctx-btn { display: flex; width: 44px; height: 44px; border-radius: 14px; background: var(--panel); border: 1px solid #c9a24a22; color: #888; font-size: 12px; cursor: pointer; align-items: center; justify-content: center; flex-shrink: 0; }
.msg-ctx-btn:hover { background: #c9a24a22; color: #fff; }
.msg-bubble {
  max-width: 76%; padding: 8px 12px 6px; border-radius: 16px; font-size: calc(14.5px * var(--chat-scale, 1)); line-height: 1.45;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  /* Chat-appearance experiment (settings-sec-chatstyle): every property that flat/auto-idle
     override below is transitioned here so switching modes — or auto mode fading from bubble
     to flat on idle — animates smoothly instead of snapping. */
  transition: max-width 0.5s ease, padding 0.5s ease, border-radius 0.5s ease, box-shadow 0.5s ease, background-color 0.5s ease;
}
.msg-wrap:not(.mine) .msg-bubble { background: var(--panel); color: #fff; border-bottom-left-radius: 5px; }
/* "Mine" bubble color is user-customizable (Settings > Appearance); gold is the default. */
.msg-wrap.mine .msg-bubble { background: var(--bubble-mine, #3a2f14); color: var(--bubble-mine-text, #fff); border-bottom-right-radius: 5px; }

/* Chat appearance: "Flat" mode (always) and "Auto" mode while idle — both drop bubble chrome and
   left-align every message like a log, distinguishing "mine" with a thin accent border instead of
   bubble color + reversed side. Auto mode fading back to bubbles on new activity is handled purely
   by the .msg-bubble transition above; JS only toggles the class (see markChatActive/app.js). */
#messages.density-flat .msg-wrap,
#messages.density-auto:not(.auto-active) .msg-wrap { flex-direction: row; justify-content: flex-start; }
#messages.density-flat .msg-bubble,
#messages.density-auto:not(.auto-active) .msg-bubble {
  max-width: 100%; padding: 2px 0 2px 10px; border-radius: 0; box-shadow: none;
  background: transparent !important; border-left: 3px solid transparent;
}
#messages.density-flat .msg-wrap.mine .msg-bubble,
#messages.density-auto:not(.auto-active) .msg-wrap.mine .msg-bubble { border-left-color: var(--gold); }
.msg-sender { font-size: 11px; color: var(--gold); font-weight: 700; margin-bottom: 4px; }
.msg-reply-badge { font-size: 11px; color: #c9a24a88; border-left: 2px solid #c9a24a44; padding-left: 6px; margin-bottom: 4px; }
.msg-reply-badge.clickable { cursor: pointer; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-reply-badge.clickable:hover { color: var(--gold); border-left-color: var(--gold); }
@keyframes msgFlash { 0% { background: rgba(201,162,74,0.38); } 100% { background: transparent; } }
.msg-flash .msg-bubble { animation: msgFlash 1.5s ease-out; }
.msg-body { color: #fff; word-break: break-word; font-family: var(--chat-font, inherit); }
.msg-body.emoji-only { font-size: calc(40px * var(--chat-scale, 1)); line-height: 1.15; }
.wallpaper-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
/* Hamburger menu accordion groups: labeled, collapsible categories so a 20-item menu reads as
   5 scannable sections instead of one long soup (Leo 2026-07-05). Same buttons/ids inside. */
.menu-group { border-top: 1px solid rgba(255,255,255,0.07); }
.menu-group:first-of-type { border-top: none; }
.menu-group-summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 9px 10px 7px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: #8a8576; font-weight: 700; user-select: none; }
.menu-group-summary::-webkit-details-marker { display: none; }
.menu-group-summary::after { content: '\203A'; color: #8a8576; font-size: 16px; transition: transform .18s; transform: rotate(90deg); }
.menu-group[open] > .menu-group-summary::after { transform: rotate(-90deg); }
/* Collapsible settings sub-section (native <details>). Summary is a tappable row with a gold
   chevron that rotates when open; the whole thing reads as a sub-menu, not inline clutter. */
.settings-disclosure { border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 2px 14px; margin: 8px 0; background: rgba(255,255,255,0.02); }
.settings-disclosure-summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 14px 0; margin: 0; }
.settings-disclosure-summary::-webkit-details-marker { display: none; }
.settings-disclosure-summary::after { content: '\203A'; color: var(--gold); font-size: 20px; transition: transform .18s; transform: rotate(90deg); }
.settings-disclosure[open] > .settings-disclosure-summary::after { transform: rotate(-90deg); }
/* View-once photo: locked card in the bubble + fullscreen self-destruct viewer. */
.msg-viewonce { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: rgba(201,162,74,0.10); border: 1px solid #c9a24a55; border-radius: 12px; color: #e8d9b0; font-size: 13.5px; cursor: pointer; width: 100%; text-align: left; }
.msg-viewonce img { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.msg-viewonce.spent { opacity: 0.55; cursor: default; color: #9a958a; }
.viewonce-overlay { position: fixed; inset: 0; z-index: 600; background: #000; display: flex; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.viewonce-overlay img { max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; }
.viewonce-count { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 18px; background: rgba(0,0,0,0.55); color: #fff; font-size: 15px; font-weight: 700; padding: 5px 12px; border-radius: 20px; }
/* Vanishing text: locked card + full-screen reveal overlay (mirrors view-once). */
.msg-vanish { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: rgba(201,162,74,0.10); border: 1px solid #c9a24a55; border-radius: 12px; color: #e8d9b0; font-size: 13.5px; cursor: pointer; width: 100%; text-align: left; }
.msg-vanish-icon { font-size: 18px; line-height: 1; flex-shrink: 0; }
.msg-vanish.spent { opacity: 0.55; cursor: default; color: #9a958a; }
.vanish-overlay { position: fixed; inset: 0; z-index: 600; background: #000; display: flex; align-items: center; justify-content: center; padding: 32px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.vanish-text { max-width: 640px; max-height: 80vh; overflow-y: auto; color: #f2e9cf; font-size: 21px; line-height: 1.5; text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; }
.vanish-count { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 18px; background: rgba(0,0,0,0.55); color: #fff; font-size: 15px; font-weight: 700; padding: 5px 12px; border-radius: 20px; }
.wallpaper-swatch { position: relative; height: 56px; border-radius: 10px; border: 2px solid rgba(255,255,255,0.08); cursor: pointer; overflow: hidden; padding: 0; }
.wallpaper-swatch.active { border-color: var(--gold); }
.wallpaper-swatch span { position: absolute; left: 0; right: 0; bottom: 0; font-size: 9px; color: #cfd3da; background: rgba(0,0,0,0.45); padding: 2px 0; text-align: center; }
#quickreply-panel { display: none; position: absolute; bottom: 64px; left: 16px; right: 16px; max-width: 420px; background: var(--input); border: 1px solid rgba(201,162,74,0.25); border-radius: 12px; box-shadow: 0 10px 34px rgba(0,0,0,0.55); padding: 8px; z-index: 120; }
#quickreply-list { max-height: 220px; overflow-y: auto; }
.quickreply-item { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.quickreply-item:hover { background: rgba(201,162,74,0.1); }
.quickreply-text { flex: 1; color: #e6e6ea; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quickreply-del { background: none; border: none; color: #777; cursor: pointer; font-size: 12px; flex: none; padding: 2px 4px; }
.quickreply-del:hover { color: #c98a8a; }
.quickreply-empty { color: #777; font-size: 13px; padding: 10px; text-align: center; }
#quickreply-add { width: 100%; margin-top: 4px; background: none; border: 1px dashed rgba(201,162,74,0.3); color: var(--gold); border-radius: 8px; padding: 9px; font-size: 13px; cursor: pointer; }
#quickreply-add:hover { background: rgba(201,162,74,0.08); }
#quickreply-btn { background: var(--panel); border: 1px solid #c9a24a33; color: var(--gold); border-radius: 8px; height: 36px; width: 36px; font-size: 16px; cursor: pointer; flex-shrink: 0; }
#quickreply-btn:hover { background: #1f1a10; }
.msg-body code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.92em; background: rgba(201,162,74,0.14); border: 1px solid rgba(201,162,74,0.22); border-radius: 5px; padding: 1px 5px; }
.msg-body pre { background: #11131a; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 10px 12px; margin: 6px 0; overflow-x: auto; }
.msg-body pre code { background: none; border: none; padding: 0; }
.msg-body blockquote { margin: 4px 0; padding: 2px 0 2px 12px; border-left: 3px solid #c9a24a66; color: #cfd3da; }
.msg-body a { color: var(--gold); text-decoration: underline; }
.msg-body ul, .msg-body ol { margin: 4px 0; padding-left: 22px; }
/* Timestamp INSIDE the bubble, bottom-right, subtle — like every mainstream messenger. */
.msg-meta { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 2px; }
/* Timestamps are hidden by default -- tap any message bubble to reveal every timestamp in the
   chat for a few seconds (see tblRevealTimestamps). #messages.tbl-ts-visible is the temporary
   reveal; html.tbl-ts-always is the permanent Settings ▸ Appearance opt-in -- both just toggle
   this one rule, no per-message state to track. */
.msg-time { font-size: 10.5px; color: rgba(255,255,255,0.55); opacity: 0; max-width: 0; overflow: hidden; white-space: nowrap; transition: opacity .4s ease; }
#messages.tbl-ts-visible .msg-time, html.tbl-ts-always .msg-time { opacity: 1; max-width: none; }
.msg-wrap.mine .msg-time::after { content: ' \2713'; color: rgba(255,255,255,0.6); }
.msg-ttl { font-size: 10px; color: #ff8c00; background: rgba(255,140,0,0.12); padding: 1px 5px; border-radius: 4px; }
.msg-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.reaction-chip { background: #2c2618; border-radius: 12px; padding: 2px 8px; font-size: 13px; cursor: pointer; border: 1px solid transparent; transition: border-color 0.15s; }
.reaction-chip:hover { border-color: #c9a24a44; }

/* Typing + reply bar */
#typing-indicator { display: none; padding: 4px 20px; font-size: 13px; overflow-wrap: anywhere; line-height: 1.35; color: var(--text-muted); font-style: italic; flex-shrink: 0; }
#reply-bar { display: none; padding: 6px 16px; background: #14110a; border-top: 1px solid #2c2618; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; flex-shrink: 0; }
#reply-label { font-size: 12px; color: var(--gold); font-weight: 600; }
/* 2.5.3: the chat menu row for who may delete others' messages: name, value, one plain sentence. */
.chat-menu-two { display: flex; flex-direction: column; gap: 2px; text-align: left; min-width: 0; }
.chat-menu-two small { font-size: 11.5px; line-height: 1.3; opacity: 0.8; white-space: normal; }
/* The message menu's delete line when the chat only lets admins delete others' messages. */
#ctx-delete.ctx-held { opacity: 0.75; white-space: normal; }
/* 2.5.3: the note under "Editing message". Own line, themed text colour (readable in all five themes), never takes a tap. */
#edit-note { order: 3; flex: 1 1 100%; font-size: 12.5px; line-height: 1.35; color: var(--tb-text-2, var(--text-muted)); pointer-events: none; }
#edit-note[hidden] { display: none; }
#reply-bar-cancel { background: none; border: none; color: #8a8576; font-size: 16px; cursor: pointer; padding: 0 4px; }

/* Input area */
#chat-view { position: relative; }
.chat-video-player { display:flex; align-items:center; gap:6px; flex:none; padding:6px 10px; background:var(--raised,var(--panel,#181b20)); color:var(--text,#eee); border-bottom:1px solid var(--line,#34383e); }
.chat-video-player[hidden] { display:none !important; }
.chat-video-title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.chat-video-player button { min-height:44px; min-width:44px; padding:6px 10px; border:1px solid var(--line,#34383e); border-radius:8px; background:transparent; color:inherit; cursor:pointer; font:inherit; font-size:13px; }
.chat-video-player button:focus-visible, .chat-video-volume:focus-visible { outline:2px solid var(--accent,#c9a24a); outline-offset:2px; }
.chat-video-volume { width:100px; min-width:64px; max-width:120px; accent-color:var(--tb-accent,var(--gold,#c9a24a)); }
.chat-video-volume-note { font-size:12px; color:inherit; }
@media(max-width:480px) {
  .chat-video-player { flex-wrap:wrap; }
  .chat-video-title { flex-basis:100%; }
  .chat-video-volume { flex:1; }
}

/* Drag-and-drop file send overlay (desktop only — see wireFileDropZone in app.js). Sits above
   the message list while a file is dragged over the open chat; large files route through the
   same encrypted transfer pipeline as the paperclip picker, cap-gated server-side by tier. */
#tbl-drop-zone {
  position: absolute; inset: 0; z-index: 700;
  background: rgba(10,10,15,0.88);
  border: 2px dashed var(--gold);
  border-radius: var(--radius-md);
  margin: 8px;
  align-items: center; justify-content: center;
  pointer-events: none; /* the drop target is #chat-view itself; this is purely visual */
}
#tbl-drop-zone.tbl-drop-zone-active { display: flex !important; }
#tbl-drop-zone-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--gold); }
#tbl-drop-zone-text { font-size: 15px; font-weight: 600; }
/* Live-location pulsing dot. */
@keyframes tblLivePulse { 0% { box-shadow: 0 0 0 0 rgba(224,69,58,0.6); } 70% { box-shadow: 0 0 0 7px rgba(224,69,58,0); } 100% { box-shadow: 0 0 0 0 rgba(224,69,58,0); } }
.msg-live-loc-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: #e0453a; margin-bottom: 3px; }
.msg-live-loc-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #e0453a; }
.msg-live-loc-badge.ended { color: #8a8576; }
.msg-live-loc-badge.ended .dot { background: #8a8576; animation: none; }
/* "Suggested now" / "Recent" group headers in the Contacts list. */
.contacts-group-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); padding: 10px 6px 4px; }
/* Word-suggestion strip (on-device learning) — a horizontal row of your own frequent words. */
#word-suggest-strip { display: none; gap: 6px; align-items: center; padding: 6px 12px 0; overflow-x: auto; flex-shrink: 0; scrollbar-width: none; }
#word-suggest-strip::-webkit-scrollbar { display: none; }
.word-chip { flex: none; background: rgba(201,162,74,0.12); border: 1px solid rgba(201,162,74,0.3); color: #e9e6df; font-size: 13.5px; padding: 6px 13px; border-radius: 16px; cursor: pointer; white-space: nowrap; font-family: inherit; }
.word-chip:hover, .word-chip:active { background: rgba(201,162,74,0.22); color: #fff; }
#input-area { position: relative; padding: 6px 16px; border-top: 1px solid #c9a24a15; background: var(--bg); display: flex; gap: 8px; align-items: flex-end; flex-shrink: 0; flex-wrap: nowrap; }
/* Composer actions: one gold "+" trigger opens a menu of the message actions, so the composer
   is just [+] [textarea] [send] and never overflows the phone width (Leo 2026-07-05). */
#comp-actions-btn { flex-shrink: 0; background: none; border: none; cursor: pointer; padding: 6px; display: flex; align-items: center; border-radius: 10px; }
#comp-actions-btn:active { background: rgba(201,162,74,0.14); }
#comp-actions-menu { position: absolute; bottom: 60px; left: 10px; right: 10px; max-width: 320px; background: #1a1608; border: 1px solid #c9a24a44; border-radius: 14px; z-index: 210; box-shadow: 0 8px 26px rgba(0,0,0,0.6); padding: 6px; max-height: 60vh; overflow-y: auto; }
.comp-action { width: 100%; display: flex; align-items: center; gap: 13px; padding: 12px 12px; background: none; border: none; color: #e9e6df; font-size: 14.5px; text-align: left; cursor: pointer; border-radius: 9px; }
.comp-action:active, .comp-action:hover { background: rgba(201,162,74,0.12); }
.comp-action img { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)); }
.comp-action svg { width: 22px; height: 22px; flex-shrink: 0; }
/* tbl-mic-btn / tbl-cam-btn / tbl-location-btn / tbl-schedule-btn / tbl-spoiler-btn / attach-btn /
   quickreply-btn kept their ids from the old inline toolbar (see "F1"/"S3-A"/"S3-C"/"F3"/"F10"
   sections below) so their click handlers still fire. Those old rules style them as standalone
   36-40px circular icon buttons (fixed width/height, justify-content:center) and, being id selectors,
   out-specificity .comp-action's width:100% row layout — squeezing the icon+label into a tiny box
   and wrapping the label into the row below. Re-assert the row layout with a selector specific enough
   (id + class) to win regardless of source order. */
#comp-actions-menu .comp-action {
  width: 100%;
  height: auto;
  border-radius: 9px;
  background: none;
  border: none;
  color: #e9e6df;
  font-size: 14.5px;
  font-weight: 400;
  justify-content: flex-start;
}
#comp-actions-menu .comp-action:hover,
#comp-actions-menu .comp-action:active {
  background: rgba(201,162,74,0.12);
  color: #e9e6df;
  border-color: transparent;
}
.comp-action-ttl { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-top: 1px solid rgba(255,255,255,0.07); margin-top: 4px; color: #9a958a; font-size: 13px; }
.comp-action-ttl select { background: #14110a; border: 1px solid #c9a24a33; border-radius: 8px; color: #e9e6df; font-size: 13px; padding: 6px 8px; }
#ttl-select { background: var(--panel); border: 1px solid #c9a24a22; color: #888; border-radius: 8px; padding: 0 4px; font-size: 13px; cursor: pointer; outline: none; height: 36px; width: 44px; text-align: center; }
#ttl-select:focus { border-color: #c9a24a55; }
#msg-input { flex: 1; background: var(--panel); border: 1px solid #c9a24a22; border-radius: 12px; padding: 10px 16px; color: #fff; font-size: calc(14px * var(--chat-scale, 1)); font-family: var(--chat-font, inherit); resize: none; min-height: 40px; max-height: 120px; outline: none; }
#msg-input:focus { border-color: #c9a24a55; }
/* 2.4.2: the message box always allows the iPhone's own text menu (Select, Select All, Paste), so
   a future no-select rule for bubbles or buttons can never hide it. */
#msg-input { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
#send-btn { width: 40px; height: 40px; border-radius: 20px; background: var(--gold); border: none; color: var(--bg); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; touch-action: none; user-select: none; -webkit-user-select: none; }
#send-btn:hover { background: #dab65a; }
/* Hold-the-paw menu (send later / send silently) — anchored to the composer. */
#send-hold-menu { position: absolute; bottom: 56px; right: 10px; background: #1a1608; border: 1px solid #c9a24a33; border-radius: 10px; padding: 6px; min-width: 180px; z-index: 220; box-shadow: 0 6px 22px rgba(0,0,0,0.55); }
.send-hold-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; background: none; border: none; color: #e9e6df; font-size: 14px; font-family: inherit; text-align: left; cursor: pointer; border-radius: 8px; }
.send-hold-opt:hover, .send-hold-opt:active { background: rgba(201,162,74,0.12); }
.send-hold-opt img, .send-hold-opt svg { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.send-hold-vanish { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; }
.send-hold-vanish-label { display: flex; align-items: center; gap: 10px; color: #e9e6df; font-size: 14px; }
.send-hold-durs { display: flex; gap: 5px; }
.send-hold-dur { padding: 5px 9px; background: rgba(201,162,74,0.10); border: 1px solid #c9a24a44; color: #e8d9b0; font-size: 12.5px; font-weight: 700; font-family: inherit; border-radius: 7px; cursor: pointer; }
.send-hold-dur:hover, .send-hold-dur:active { background: #c9a24a; color: #0a0a0f; border-color: #c9a24a; }

/* Empty state */
#empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #8a8576; }
#empty-title { font-family: var(--font-heading); font-size: 28px; font-weight: 800; color: var(--gold); margin-bottom: 8px; }
#empty-sub { font-size: 14px; color: #8a8576; }

/* Context menu */
#context-menu { display: none; position: fixed; background: var(--panel); border: 1px solid #c9a24a22; border-radius: 12px; padding: 8px; z-index: 500; box-shadow: 0 8px 32px rgba(0,0,0,0.6); min-width: 180px; max-width: min(90vw, 260px); max-height: 80vh; overflow-y: auto; }
#ctx-emoji-bar { display: flex; gap: 4px; padding: 4px 0 8px; border-bottom: 1px solid #2c2618; margin-bottom: 4px; }
.ctx-emoji-btn { background: none; border: none; font-size: 22px; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.ctx-emoji-btn:hover { background: #c9a24a22; }
.ctx-action { display: block; width: 100%; text-align: left; background: none; border: none; color: #ccc; font-size: 14px; padding: 8px 10px; cursor: pointer; border-radius: 6px; }
.ctx-action:hover { background: #c9a24a15; color: #fff; }
#ctx-delete { color: var(--menu-danger, #ff9292) !important; }
#ctx-delete:hover { background: rgba(255,68,68,0.1); }

/* Auth overlay */
#auth-view { position: fixed; inset: 0; background: radial-gradient(120% 80% at 15% 0%, #15110a 0%, var(--bg) 55%); display: grid; grid-template-columns: minmax(0, 520px) 380px; grid-template-rows: auto auto; column-gap: 56px; align-content: start; justify-content: center; z-index: 100; padding: 40px; overflow-y: auto; }
/* App shells (Tauri desktop / Capacitor mobile): compact, focused login — no website marketing
   splash. The whole card is sized to fit ONE screen on any phone: it is a full-height flex
   column, the hero art scales down with the viewport (so it never bleeds off the top/bottom),
   and the controls take the remaining space. Safe-area insets keep it clear of the notch and
   home indicator. This scales from iPhone SE up to 14/15/16 Pro Max with no scrolling. */
html.app-shell #auth-view {
  display: flex; flex-direction: column; grid-template-columns: none; column-gap: 0;
  height: 100vh; height: 100dvh; overflow: hidden; padding: 0;
  padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
  /* Full-screen gunmetal texture behind everything so the crest sits ON the background instead of
     floating on black — the safe-area padding area shows the texture too (no black bar up top). */
  background: #1c1d20 url('assets/tabella-bg-gunmetal.webp') center top / cover no-repeat;
}
/* Card is transparent in the app shell so the gunmetal shows around the hero (kills the letterbox
   bars) and behind the form; the controls carry their own dark fills for contrast. */
html.app-shell .auth-card { background: transparent; }
html.app-shell .auth-marketing, html.app-shell .mkt-maker { display: none; }
/* The WHOLE card scrolls as one unit (Leo 2026-07-05): the crest scrolls UP and away with the
   form instead of staying pinned while only the fields scrolled beneath it (which cut content
   off and confused the scroll). Natural block flow: hero on top, then the form, and the card
   itself is the single scroll container. */
html.app-shell .auth-card {
  grid-column: auto; grid-row: auto; align-self: stretch;
  flex: 1 1 auto; min-height: 0; display: block;
  width: 100%; max-width: 100%; border-radius: 0; border: none; padding: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
/* Hero is capped so it doesn't eat a whole small screen, but it now scrolls away with the rest
   of the card (no longer pinned). object-fit keeps the crest undistorted. */
html.app-shell .auth-hero {
  display: block; width: 100%; max-height: 40dvh;
  object-fit: contain; object-position: center top; margin-bottom: 0;
}
/* The form flows below the hero inside the scrolling card — it no longer has its own scroll
   region (that was what pinned the hero). Bottom padding clears the home indicator. */
html.app-shell .auth-card-body {
  overflow: visible;
  padding: 12px 22px calc(18px + env(safe-area-inset-bottom));
}
html.app-shell #auth-beta-notice { display: none !important; }
/* Native shells (iOS/Android WebView) run edge-to-edge (viewport-fit=cover), so the app's own
   top bars would slide UNDER the status bar / notch and the bottom tab bar under the home
   indicator. Inset them by the safe areas; each bar's own background fills the inset so there's
   no black gap. Higher specificity than the mobile media-query padding, so it wins. */
html.app-shell #sidebar-header { padding-top: calc(14px + env(safe-area-inset-top)); }
html.app-shell #chat-header    { padding-top: calc(12px + env(safe-area-inset-top)); }
html.app-shell .auth-logo { display: none; }
html.app-shell .auth-tagline { display: none; }
/* Slightly tighter control rhythm in the app shell so everything fits comfortably. */
html.app-shell .auth-tabs { height: 44px; margin-bottom: 11px; }
html.app-shell .form-input { height: 48px; margin-bottom: 9px; }
html.app-shell .auth-show { margin: 6px 2px; }
html.app-shell .auth-btn, html.app-shell .auth-fid { height: 54px; }
html.app-shell .auth-fid { width: 54px; }
/* Wide app windows (desktop app, tablets): the phone layout above stretched the form edge to edge
   (Leo 2026-10-13: "this looks very professional.... not!"). Centre a fixed-width column instead,
   like Telegram/Signal desktop, and fade the crest's square edges into the gunmetal. */
@media (min-width: 700px) {
  /* The WINDOW scrolls as one when it is short, never the column inside it (an inner column
     scrollbar showed as a gold line beside the form). */
  html.app-shell #auth-view { align-items: center; justify-content: flex-start; overflow-y: auto; }
  html.app-shell .auth-card {
    flex: 0 0 auto; width: 400px; max-width: calc(100% - 32px);
    align-self: center; margin: auto 0; padding: 20px 0;
    overflow: visible; min-height: auto;
  }
  html.app-shell .auth-hero {
    width: 200px; max-height: none; margin: 0 auto 10px; object-position: center;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
    mask-composite: intersect;
  }
  html.app-shell .auth-card-body { padding: 0 0 8px; }
  html.app-shell a.auth-server { display: block; text-align: center; font-size: 12px; color: #b9a46a; margin-top: 6px; }
}
.auth-marketing { grid-column: 1; grid-row: 1; color: #cfcabb; display: flex; flex-direction: column; align-self: stretch; }
.auth-card { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.mkt-maker { grid-column: 1; grid-row: 2; }
.auth-marketing .nowrap { white-space: nowrap; }
.mkt-wordmark { margin-bottom: 26px; }
.mkt-pak { font-family: 'Bungalow', 'Palatino Linotype', Palatino, Georgia, serif; font-size: 11px; font-weight: normal; letter-spacing: .28em; text-transform: uppercase; color: #8a8576; margin-bottom: 6px; }
.mkt-tb { display: block; width: 160px; height: auto; }
img.brand-t { height: .72em; width: auto; vertical-align: text-bottom; display: inline-block; margin: 0 .03em; }
/* Bungalow ships one weight only (see @font-face, font-weight: normal) — requesting 700 here
   made browsers synthesize a fake bold, distorting/thickening the glyphs. font-weight: normal
   renders the typeface as designed (matches the clean look of the Tabella wordmark SVG). */
.mkt-h1 { font-family: var(--font-heading); font-size: clamp(30px, 4vw, 46px); line-height: 1.08; color: #fff; margin: 0 0 16px; font-weight: normal; }
.mkt-sub { font-size: 16px; line-height: 1.6; color: #b3aea2; margin: 0 0 26px; }
.mkt-sub em { color: var(--gold); font-style: normal; }
.mkt-points { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 14px; }
.mkt-points li { position: relative; padding-left: 28px; font-size: 14.5px; line-height: 1.55; color: #b3aea2; }
.mkt-points li::before { content: "\2666"; position: absolute; left: 0; top: 0; color: var(--gold); font-size: 14px; }
.mkt-points b { color: #e9e6df; font-weight: 700; }
.mkt-tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(201,162,74,0.4); border-radius: 20px; padding: 6px 14px; margin-bottom: 22px; }
.mkt-nav { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.mkt-nav a { color: #b3aea2; font-size: 14px; text-decoration: none; border-bottom: 1px solid transparent; }
.mkt-nav a:hover { color: var(--gold); border-bottom-color: #c9a24a55; }
.mkt-footer { display: flex; gap: 16px; align-items: center; font-size: 12px; color: #8a8576; flex-wrap: wrap; }
.mkt-footer a { color: #8a8576; text-decoration: none; }
.mkt-footer a:hover { color: var(--gold); }
/* Vanishing maker mark: a dark silhouette that blends into the page, lighting up
   gold only when you hover the footer area. */
.mkt-maker { padding-top: 24px; }
.wps-mark-link { display: block; line-height: 0; margin-top: 16px; }
.wps-mark { display: block; margin: 0 auto; width: 78px; height: 78px; object-fit: contain;
  filter: brightness(0.22) saturate(0.5); opacity: 0.5; transition: filter .55s ease, opacity .55s ease; }
.mkt-maker:hover .wps-mark { filter: brightness(1) saturate(1); opacity: 1; }
/* Below the 2-column width (~1024px) use ONE clean stacked column all the way down to mobile,
   instead of the cramped/half-broken in-between layout. Natural DOM order puts the marketing
   first and the login card (with its shield video) below it; the marketing is reordered to
   wordmark -> headline -> logo -> body -> nav. The column is centered and capped so text is
   not jammed to one side, and the video is a full-width banner (not a letterboxed pill). */
@media (max-width: 1024px) {
  #auth-view {
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
  }
  .auth-marketing {
    display: flex;
    flex-direction: column;
    max-width: 560px;
    margin: 0 auto;
    text-align: left;
    order: unset;
    padding: 40px 28px 30px;
    border-bottom: 1px solid rgba(201,162,74,0.1);
  }
  .auth-marketing .mkt-wordmark   { order: 1; }
  .auth-marketing .mkt-h1         { order: 2; }
  .auth-marketing .mkt-sub        { order: 4; margin-top: 24px; }
  .auth-marketing .mkt-points     { order: 5; }
  .auth-marketing .mkt-tag        { order: 6; }
  .auth-marketing .mkt-nav        { order: 7; flex-wrap: wrap; gap: 14px; }
  .auth-card {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    order: unset;
    border-radius: 0;
    border: none;
    padding: 0 0 48px;
  }
  .auth-hero { width: 100%; }
  .auth-card-body { padding: 2px 28px 0; }
  .mkt-maker { text-align: center; padding: 24px; }
  .mkt-footer { justify-content: center; flex-wrap: wrap; }
}
/* ── Locked login design: dark metal card, gold-framed controls, hero art ── */
/* Screen continues in the hero art's own dark bottom-metal tone -> no seam under the art. */
.auth-card { border-radius: clamp(8px, 2vw, 16px); padding: 0 0 18px; width: 380px; border: 1px solid rgba(201,162,74,0.18); overflow: hidden;
  background: linear-gradient(180deg, #1d1e21 0%, #191a1d 50%, #121316 100%); }
/* The full crest + ribbon art -- edge to edge at the top, flowing into the metal. Same bug as
   the marketing crest: sized by WIDTH only (100% of the 380px card) with no viewport-height cap,
   so on a real laptop screen this one image alone could eat 350-450px before the sign-in fields
   even start. Cap by viewport height too (object-fit:cover keeps it edge-to-edge, no letterbox
   gaps, just crops the excess instead of forcing the whole card off-screen). */
/* object-fit:cover kept losing content no matter which edge we anchored to (crown cropped
   with center-anchor, ribbon banner cropped with top-anchor -- Leo hit both in a row). Switched
   to contain: the WHOLE crest+ribbon always renders, just shrunk to fit height-capped card --
   nothing is ever cropped again, at the cost of a little empty space on the sides if needed. */
.auth-hero { display: block; width: 100%; height: auto; max-height: 32vh; object-fit: contain; margin-bottom: -2px; }
.auth-logo { display: none; }
.auth-tagline { display: none; }
.auth-card-body { padding: 2px clamp(16px, 4vw, 22px) 0; }
.auth-server { font-size: 11px; color: #8a8576; text-align: center; margin-top: 6px; cursor: pointer; }
/* Live password-requirement rows: grey by default, gold when satisfied (.pwreq-ok). Class-based
   so the satisfied color is unambiguous (an inline color was being outcomputed in the WebView). */
#auth-pw-reqs > div { color: #8a8576; transition: color .15s; }
#auth-pw-reqs > div.pwreq-ok { color: #c9a24a; }
html.app-shell .auth-server { margin-top: 4px; }
html.app-shell #auth-version { display: none; }
html.app-shell #forgot-btn { padding: 4px 0; margin-top: 4px; }
.auth-server:hover { color: var(--gold); }

/* Segmented gold-framed tabs */
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; height: 48px; border: 1.5px solid #c9a24a; border-radius: 12px; overflow: hidden; background: rgba(8,13,20,0.74); margin-bottom: 13px; padding: 0; }
.auth-tab { display: flex; align-items: center; justify-content: center; border: none; border-radius: 0; background: none; color: #8f8a7d; font-size: 16px; font-weight: 600; cursor: pointer; }
.auth-tab.active { color: var(--gold); font-weight: 700; background: linear-gradient(180deg, rgba(31,43,57,0.95), rgba(10,16,24,0.95)); box-shadow: none; }

/* Gold-framed input, with an optional leading gold icon via the .auth-field wrapper */
.form-input { width: 100%; border: 1.5px solid #c9a24a; border-radius: 13px; padding: 0 14px; height: 50px; color: var(--text); font-size: 15px; font-family: inherit; margin-bottom: 10px; outline: none;
  background: linear-gradient(180deg, rgba(15,22,31,0.9), rgba(6,10,16,0.92));
  box-shadow: inset 0 1px 8px rgba(255,255,255,0.04), 0 6px 14px rgba(0,0,0,0.3); }
.form-input::placeholder { color: #847f72; }
.form-input:focus { border-color: #f0d98a; }
.auth-card .form-input { background: linear-gradient(180deg, rgba(15,22,31,0.9), rgba(6,10,16,0.92)); border: 1.5px solid #c9a24a; }
.auth-card .form-input:focus { border-color: #f0d98a; }
/* Field wrapper places the gold icon inside the gold frame; input stays real + typeable. */
.auth-field { position: relative; }
.auth-field .form-input { padding-left: 46px; padding-right: 14px; }
.auth-field:has(.auth-field-eye) .form-input { padding-right: 46px; }
.auth-field-ico { position: absolute; left: 12px; top: 11px; width: 28px; height: 28px; object-fit: contain; pointer-events: none; }
.auth-field-eye { position: absolute; right: 11px; top: 10px; width: 27px; height: 27px; object-fit: contain; cursor: pointer; opacity: 0.9; }
.auth-field-eye:hover { opacity: 1; }

/* Sign In: real button; brushed-gold bar is a 9-slice image skin, "Sign In" is real text on top */
.auth-signrow { display: flex; gap: 11px; align-items: stretch; margin-top: 4px; }
.auth-btn { flex: 1; height: 58px; width: auto; cursor: pointer; background: transparent;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Palatino Linotype', Palatino, Georgia, serif; font-weight: 700; font-size: 19px; color: #3a2a06;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
  border-style: solid; border-width: 12px 34px; border-radius: 0; padding: 0;
  border-image: url('assets/tabella-button-gold-blank.webp') 52 160 fill / 12px 34px / 0 stretch;
  filter: drop-shadow(0 7px 14px rgba(0,0,0,0.4)); }
.auth-btn:hover { background: transparent; filter: drop-shadow(0 7px 16px rgba(0,0,0,0.5)) brightness(1.04); }
/* Dialog OK button: same brushed-gold skin with the real label on it; red tint when destructive. */
.auth-btn.tbl-dlg-btn { flex: 0 0 auto; height: 46px; min-width: 120px; font-size: 16px; padding: 0 4px; white-space: nowrap; }
.auth-btn.tbl-dlg-btn.danger { filter: drop-shadow(0 7px 14px rgba(0,0,0,0.4)) hue-rotate(-38deg) saturate(1.8) brightness(0.9); color: #2a0606; }
/* A box with two choices and Cancel (showChoice, 2.4.0): the buttons stack, the first choice on top,
   Cancel last, each full width so long labels ("Approve from my other device") wrap inside it. */
#confirm-overlay.tbl-dlg-three .tbl-dlg-row { flex-direction: column-reverse; align-items: stretch; flex-wrap: nowrap; }
#confirm-overlay.tbl-dlg-three .tbl-dlg-row > button { width: 100%; max-width: 100%; box-sizing: border-box; }
#confirm-overlay.tbl-dlg-three .tbl-dlg-row > .tbl-dlg-btn { height: auto; min-height: 46px; white-space: normal; line-height: 1.2; text-align: center; }
/* A contact's security key changed (2.4.0): a quiet line above the chat until it is read. */
#tbl-key-notice { display: none; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 14px; font-size: 14px; line-height: 1.4;
  color: var(--text); background: var(--tb-accent-soft, #2a2210); border-bottom: 1px solid var(--tb-line, #c9a24a33); flex-shrink: 0; }
#tbl-key-notice.show { display: flex; }
#tbl-key-notice .tbl-key-notice-text { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
#tbl-key-notice button { min-height: 36px; padding: 6px 12px; font-size: 14px; border-radius: 8px; cursor: pointer; }
@media (pointer: coarse) { #tbl-key-notice button { min-height: 44px; } }
.auth-btn:disabled { filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)) grayscale(0.35); cursor: default; }
/* Gold-framed square biometric button next to Sign In */
.auth-fid { width: 58px; flex: none; border-radius: 14px; border: 1.5px solid #c9a24a; cursor: pointer;
  background: linear-gradient(180deg, rgba(15,22,31,0.92), rgba(6,10,16,0.94));
  display: flex; align-items: center; justify-content: center; padding: 0;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.5); }
.auth-fid:hover { border-color: #f0d98a; }
.auth-fid img { width: 34px; height: 34px; object-fit: contain; }

.auth-error { color: #ff8080; font-size: 13px; margin: 8px 0; text-align: center; min-height: 16px; }
.auth-show { display: flex; align-items: center; gap: 10px; color: #d8cfba; font-size: 14px; margin: 8px 2px; cursor: pointer; text-shadow: 0 1px 1px rgba(0,0,0,0.3); }
.auth-show input { width: 19px; height: 19px; cursor: pointer; accent-color: var(--gold); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--gold); }
.auth-hint { color: var(--text-dim); font-size: 11px; line-height: 1.4; margin: -2px 0 8px 2px; }

/* Settings modal */
#settings-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 200; align-items: center; justify-content: center; }
#settings-modal.open { display: flex; }
.settings-card { background: var(--raised); border-radius: 16px; padding: 32px; width: 420px; border: 1px solid rgba(255,255,255,0.08); max-height: 90vh; overflow-y: auto; }

/* App-shell (compact desktop): settings fills the window edge-to-edge and scrolls */
html.app-shell #settings-modal { align-items: stretch; justify-content: stretch; background: var(--raised); }
/* Native shell: settings fills the WHOLE screen (100dvh, not 100vh which iOS mis-measures),
   insets for the notch + home indicator, and no dead 80px gap at the bottom. */
html.app-shell .settings-card {
  width: 100%; max-width: 100%; border-radius: 0; border: none;
  height: 100dvh; max-height: 100dvh;
  padding: calc(14px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
}
/* Match the auth panel: one recessed input shade inside every modal */
.settings-card .form-input { background: var(--input); border: 1px solid rgba(255,255,255,0.09); }
.settings-card .form-input:focus { border-color: #c9a24a88; }
#newchat-modal, #contacts-modal, #qrscan-modal, #media-modal, #guardian-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 200; align-items: center; justify-content: center; }
#newchat-modal.open, #contacts-modal.open, #qrscan-modal.open, #media-modal.open, #guardian-modal.open { display: flex; }
.guardian-pick-row { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; }
.guardian-pick-row.sel { background: rgba(201,162,74,0.14); border-color: #c9a24a55; }
.guardian-pick-row .gp-check { width: 20px; height: 20px; border-radius: 5px; border: 2px solid #8a8576; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #1a1408; font-weight: 900; }
.guardian-pick-row.sel .gp-check { background: #c9a24a; border-color: #c9a24a; }
#contacts-list, #contacts-search-results { max-height: 40vh; overflow-y: auto; }
/* In-person QR buttons: mega button, few words -> the gold art gets to BE the button. */
.dash-qr-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; background: rgba(201,162,74,0.07); border: 1px solid rgba(201,162,74,0.28); border-radius: 16px; color: #e9e6df; font-size: 14.5px; font-weight: 600; cursor: pointer; padding: 18px 10px 14px; }
.dash-qr-btn:hover { background: rgba(201,162,74,0.14); }
.dash-qr-btn img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.5)); }
#forward-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 210; align-items: center; justify-content: center; }
#forward-modal.open { display: flex; }
#poll-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 210; align-items: center; justify-content: center; }
#poll-modal.open { display: flex; }
#timeline-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 210; align-items: center; justify-content: center; }
#timeline-modal.open { display: flex; }
#archive-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.78); z-index: 230; align-items: center; justify-content: center; padding: 24px; }
#archive-modal.open { display: flex; }
#archive-panel { background: var(--panel); border: 1px solid var(--line, rgba(201,162,74,0.2)); border-radius: 16px; width: 100%; max-width: 920px; height: 80vh; display: flex; flex-direction: column; overflow: hidden; }
#archive-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid rgba(201,162,74,0.15); }
#archive-title { font-family: var(--font-heading); font-weight: 700; font-size: 16px; flex: none; }
#archive-head .form-input { flex: 1; margin: 0; padding: 8px 12px; }
#archive-cols { flex: 1; display: flex; min-height: 0; }
#archive-chats { width: 260px; border-right: 1px solid rgba(201,162,74,0.12); overflow-y: auto; flex: none; }
.archive-chat { padding: 11px 14px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.04); }
.archive-chat:hover { background: rgba(201,162,74,0.06); }
.archive-chat.active { background: rgba(201,162,74,0.12); }
.ac-name { font-size: 14px; color: #eee; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-sub { font-size: 11px; color: #888; margin-top: 2px; }
#archive-messages { flex: 1; overflow-y: auto; padding: 14px 18px; }
.archive-msg { padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.archive-msg.sys { color: #888; font-style: italic; font-size: 12px; text-align: center; border: none; }
.am-meta { font-size: 12px; } .am-meta b { color: var(--gold); } .am-meta span { color: #888; margin-left: 8px; }
.am-body { white-space: pre-wrap; margin-top: 2px; color: #e9e6df; }
.archive-empty { color: #777; text-align: center; padding: 30px; }
/* Curated import wizard (Phase 0) */
#tgwiz-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.78); z-index: 240; align-items: center; justify-content: center; padding: 24px; }
#tgwiz-modal.open { display: flex; }
#tgwiz-panel { background: var(--panel); border: 1px solid rgba(201,162,74,0.2); border-radius: 16px; width: 100%; max-width: 560px; max-height: 84vh; display: flex; flex-direction: column; overflow: hidden; }
.tgwiz-head { padding: 18px 20px 10px; }
.tgwiz-bulk { display: flex; align-items: center; gap: 8px; padding: 6px 20px 10px; font-size: 12px; color: #9a9387; flex-wrap: wrap; }
.tgwiz-bulk-btn { background: var(--input); border: 1px solid rgba(201,162,74,0.2); color: var(--gold); border-radius: 8px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.tgwiz-bulk-btn:hover { background: rgba(201,162,74,0.1); }
#tgwiz-chats { overflow-y: auto; flex: 1; padding: 0 20px; }
.tgwiz-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.tgwiz-main { flex: 1; min-width: 0; }
.tgwiz-name { font-size: 14px; color: #eee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgwiz-sub { font-size: 11px; color: #888; }
.tgwiz-disp { background: var(--input); color: #ddd; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 5px 8px; font-size: 12px; flex: none; cursor: pointer; }
.tgwiz-disp.tgwiz-active { border-color: #3fae6a; color: #6fd394; }
.tgwiz-disp.tgwiz-archived { border-color: var(--gold); color: var(--gold); }
.tgwiz-disp.tgwiz-skip { border-color: #8a8576; color: #b3aea2; }
.tgwiz-contacts { display: flex; align-items: flex-start; gap: 10px; padding: 12px 20px; font-size: 13px; color: #cfd3da; cursor: pointer; }
.tgwiz-contacts input { margin-top: 2px; accent-color: var(--gold); }
.tgwiz-summary { padding: 4px 20px; font-size: 12px; color: #9a9387; }
.tgwiz-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid rgba(201,162,74,0.12); }
/* Unsecured framing */
#archive-unsecured-banner { display: none; align-items: center; gap: 10px; padding: 10px 16px; background: rgba(210,104,95,0.1); border-bottom: 1px solid rgba(210,104,95,0.35); color: #e6b3ad; font-size: 12px; line-height: 1.45; }
#archive-unsecured-banner .unlock-ic { font-size: 18px; flex: none; }
#archive-unsecured-banner b { color: #d2685f; }
.archive-cta { display: flex; align-items: center; gap: 12px; justify-content: space-between; background: rgba(201,162,74,0.08); border: 1px solid rgba(201,162,74,0.22); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; font-size: 13px; color: #cfd3da; }
.archive-cta-btn { background: var(--gold); color: var(--bg); border: none; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; flex: none; }
.archive-cta-btn:hover { filter: brightness(1.08); }
#room-filter-bar { display: none; gap: 6px; padding: 8px 10px 4px; overflow-x: auto; flex-shrink: 0; }
.room-filter-chip { background: var(--panel); border: 1px solid rgba(201,162,74,0.2); color: #9a9387; border-radius: 14px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; flex: none; }
.room-filter-chip.active { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.room-folder-tag { font-size: 10px; color: var(--gold); background: rgba(201,162,74,0.12); border-radius: 4px; padding: 1px 6px; display: inline-block; margin-top: 3px; }
.room-list-empty { color: #777; font-size: 13px; padding: 18px 14px; text-align: center; }
/* Chat-row actions menu — branded like the composer's "+" sheet (gold hairline on the dark
   raised panel) instead of the old anonymous gray popup. */
#room-menu { display: none; position: fixed; z-index: 260; background: #1a1608; border: 1px solid rgba(201,162,74,0.27); border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,0.6); min-width: 190px; padding: 6px; }
#room-menu .ctx-action { display: flex; align-items: center; gap: 11px; width: 100%; color: #e9e6df; font-size: 14px; padding: 9px 11px; border-radius: 9px; }
#room-menu .ctx-action svg { width: 17px; height: 17px; flex-shrink: 0; }
#room-menu .ctx-action:hover, #room-menu .ctx-action:active { background: rgba(201,162,74,0.12); color: #fff; }
#room-menu .ctx-sep { height: 1px; background: rgba(201,162,74,0.16); margin: 5px 8px; }
/* The "..." on every chat row — the visible door to pin/mute/archive. Hover-reveal where a mouse
   exists; always faintly present on touch screens (no hover to reveal it with). */
.room-kebab { flex: none; width: 30px; height: 30px; border: none; border-radius: 8px; background: none; color: var(--gold); font-size: 19px; line-height: 1; cursor: pointer; padding: 0; opacity: 0; transition: opacity 0.15s, background 0.15s; }
.room-item:hover .room-kebab, .room-item:focus-within .room-kebab { opacity: 0.85; }
.room-kebab:hover { background: rgba(201,162,74,0.15); opacity: 1; }
@media (pointer: coarse) { .room-kebab { opacity: 0.55; } }
.timeline-list { position: relative; padding-left: 6px; }
.timeline-row { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0; position: relative; }
.timeline-row:not(:last-child)::before { content: ""; position: absolute; left: 5px; top: 18px; bottom: -6px; width: 2px; background: rgba(201,162,74,0.2); }
.timeline-dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; flex: none; background: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,74,0.15); }
.timeline-dot.tl-edited { background: #b9863a; }
.timeline-dot.tl-read { background: #3fae6a; box-shadow: 0 0 0 3px rgba(63,174,106,0.15); }
.timeline-label { font-size: 14px; color: #eee; font-weight: 600; }
.timeline-when { font-size: 12px; color: #888; }
.msg-poll { min-width: 240px; max-width: 360px; }
.poll-q { font-weight: 700; color: #fff; margin-bottom: 8px; }
.poll-option { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: #14151a; border: 1px solid rgba(201,162,74,0.2); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; cursor: pointer; overflow: hidden; color: #e6e6ea; }
.poll-option.voted { border-color: var(--gold); }
.poll-fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(201,162,74,0.16); transition: width .3s ease; }
.poll-opt-label { position: relative; flex: 1; font-size: 14px; }
.poll-opt-tally { position: relative; font-size: 12px; color: var(--gold); font-variant-numeric: tabular-nums; }
.poll-foot { font-size: 11px; color: #8a8f9a; margin-top: 2px; }
#forward-list .settings-item:hover { border-color: #c9a24a55; }
.msg-forwarded { font-size: 11px; color: #8a8f9a; font-style: italic; margin-bottom: 3px; display: flex; align-items: center; gap: 4px; }
.msg-forwarded::before { content: "\21AA"; font-style: normal; color: #c9a24a99; }
#newchat-result { margin-top: 12px; }
.newchat-share-row { display: flex; gap: 8px; flex-wrap: wrap; }
.newchat-share-row .settings-save { flex: 1 1 140px; }
.newchat-myhandle-row { margin-top: 10px; }
.newchat-link-btn { background: none; border: none; color: var(--gold); text-decoration: underline; cursor: pointer; font-size: 12px; padding: 0 4px; }
.newchat-find-row { display: flex; gap: 8px; align-items: stretch; }
.newchat-find-row #newchat-username { flex: 1 1 auto; min-width: 0; }
.newchat-find-row #newchat-code { flex: 0 0 80px; width: 80px; }
.lookup-found { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #c9a24a55; border-radius: 10px; }
.lookup-found .ur-meta { flex: 1; }
.lookup-miss { color: #e8a0a0; font-size: 13px; padding: 10px 2px; }
.user-result { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.user-result:hover { background: #c9a24a1a; }
.ur-avatar { width: 36px; height: 36px; border-radius: 18px; background: #c9a24a33; color: var(--gold); display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; overflow: hidden; }
.ur-meta { display: flex; flex-direction: column; min-width: 0; }
.ur-name { color: #e8edf6; font-size: 14px; }
.ur-id { color: var(--text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.ur-empty { color: var(--text-muted); font-size: 13px; padding: 12px; text-align: center; }
#attach-btn { width: 40px; height: 40px; border-radius: 20px; background: var(--panel); border: 1px solid #c9a24a33; color: var(--text-muted); font-size: 17px; cursor: pointer; flex-shrink: 0; }
#attach-btn:hover { color: var(--gold); border-color: var(--gold); }
.msg-file { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: #c9a24a14; border: 1px solid #c9a24a33; border-radius: 10px; color: var(--gold); text-decoration: none; margin-top: 4px; }
.msg-audio { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; width: min(280px, 70vw); max-width: 100%; }
/* Review 2026-10-16: the voice bubble's own player: Play / Pause, a progress line (tap it to jump),
   and the time under it. The phone's built-in player is not shown: on the iPhone it could say
   "00:00 ---- 00:00" (Leo, 2.4.2). All in the bubble's own text colour, which reads at AA on both
   bubble colours in every theme; the round button is a 44px target. */
.msg-audio audio { display: none; }
.msg-voice { display: flex; align-items: center; gap: 10px; min-width: 0; }
.msg-voice[hidden] { display: none; }
.msg-voice-play { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: none; border: 1.5px solid currentColor; color: inherit; cursor: pointer; }
.msg-voice-play svg { width: 20px; height: 20px; fill: currentColor; }
.msg-voice-play .msg-voice-ic-pause, .msg-voice-play.playing .msg-voice-ic-play { display: none; }
.msg-voice-play.playing .msg-voice-ic-pause { display: block; }
.msg-voice-play:disabled { opacity: 0.55; cursor: default; }
.msg-voice-play:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.msg-voice-track { position: relative; flex: 1; min-width: 40px; height: 28px; cursor: pointer; }
.msg-voice-track::before { content: ''; position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 2px; background: currentColor; opacity: 0.35; }
.msg-voice-fill { position: absolute; left: 0; top: 12px; height: 4px; width: 0; border-radius: 2px; background: currentColor; transition: width 0.25s linear; }
@media (prefers-reduced-motion: reduce) { .msg-voice-fill { transition: none; } }
.msg-audio-save { color: var(--gold); text-decoration: underline; font-size: 13px; }
/* 2.4.3: the voice bubble's own length ("0:07", "0:02 / 0:07" while playing), an empty note, and
   "Couldn't load - tap to retry". In the bubble's own text colour, not dimmed: that colour reads at
   AA on both bubble colours in every theme (no opacity, no muted grey). */
.msg-audio-meta { display: flex; align-items: center; gap: 10px; min-width: 0; }
.msg-audio-meta .msg-transcribe-btn { margin-top: 0; }
.msg-audio-len { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: inherit; line-height: 1.3; padding: 0 2px; }
.msg-audio-len[hidden] { display: none; }
.msg-audio-note { font-size: 14px; color: inherit; line-height: 1.4; }
.msg-audio-retry { align-self: flex-start; min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1.5px solid currentColor; background: none; color: inherit; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.msg-audio-retry:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.msg-transcribe-btn, .msg-describe-btn { align-self: flex-start; background: none; border: 1px solid #c9a24a55; color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: 0.4px; padding: 3px 10px; border-radius: 10px; cursor: pointer; margin-top: 4px; }
.msg-transcribe-btn:hover:not(:disabled), .msg-describe-btn:hover:not(:disabled) { background: #c9a24a18; }
.msg-transcribe-btn:disabled, .msg-describe-btn:disabled { opacity: 0.5; cursor: default; }
.msg-transcribe-btn:focus-visible, .msg-describe-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.msg-transcript { font-size: 12px; color: #9aa6ba; line-height: 1.35; border-left: 2px solid #c9a24a66; padding-left: 8px; margin-top: 2px; font-style: italic; }
.msg-image { max-width: min(320px, 100%); max-height: 360px; height: auto; object-fit: contain; border-radius: 10px; margin-top: 4px; display: block; }
.msg-caption { max-width: min(320px, 100%); margin-top: 4px; font-size: 12px; line-height: 1.35; color: #9aa6ba; font-style: italic; }
.msg-largefile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; background: #c9a24a10; border: 1px solid #c9a24a33; border-radius: 10px; margin-top: 4px; max-width: min(360px, 100%); }
.msg-largefile .lf-meta { color: #e8edf6; font-size: 13px; flex: 1; min-width: 0; word-break: break-word; }
.msg-largefile .lf-download { background: var(--gold); color: var(--bg); border: none; border-radius: 8px; padding: 8px 16px; cursor: pointer; font-size: 13px; flex-shrink: 0; }
.msg-largefile .lf-download:hover { background: #dab65a; }
#profile-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 200; align-items: center; justify-content: center; }
#profile-modal.open { display: flex; }
.profile-avatar { width: 72px; height: 72px; border-radius: 36px; background: #c9a24a22; object-fit: cover; flex-shrink: 0; border: 1px solid #c9a24a33; }
#user-info { cursor: pointer; }
.settings-title { font-family: var(--font-heading); font-size: 18px; font-weight: 700; margin-bottom: 20px; }
.settings-label { font-size: 13px; color: #888; margin-bottom: 6px; }
.settings-row { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; }
.settings-row .form-input { flex: 1; margin-bottom: 0; }
/* Uniform action buttons: identical box metrics so a gold "primary" and an outline "secondary"
   are the same height/shape and each scales to its own label (no full-width stretching). */
.settings-save, .settings-close { border-radius: 10px; padding: 11px 20px; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; }
.settings-save { background: var(--gold); color: var(--bg); border: 1px solid var(--gold); }
.settings-close { background: none; border: 1px solid #5a564d; color: #b3aea2; }
/* 2.3.1 (Leo 2026-10-14: the "Make new key" box was pale grey on white and unreadable): the
   confirm/prompt text and Cancel used colours picked for the dark look only. Theme tokens now,
   and bigger text on phones. The text itself: .tbl-dlg-msg, with the chat list styles below. */
/* Only on themed cards: call bars and Driving Mode keep dark surfaces in every theme. */
html[data-theme="light-blue"] .settings-card .settings-close,
html[data-theme="cream-gold"] .settings-card .settings-close { color: var(--text-muted); border-color: var(--text-dim); }
/* Password box with an eye to see what you typed (Leo: "I can't see the password"). The box itself
   never changes type (2.3.1 did, and the iPhone app crashed while typing); the text shows below it. */
.tbl-pw-row { position: relative; margin-top: 8px; }
/* Beat .settings-card .form-input / html.app-shell .form-input margins. */
.settings-card .tbl-pw-row .form-input, html.app-shell .tbl-pw-row .form-input { margin: 0; }
.tbl-pw-row .form-input.has-eye { padding-right: 52px; }
.tbl-pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 10px;
  background: none; color: var(--text-muted); cursor: pointer; }
.tbl-pw-eye svg { width: 22px; height: 22px; }
.tbl-pw-eye[aria-pressed="true"] { color: var(--gold); }
html[data-theme="cream-gold"] .tbl-pw-eye[aria-pressed="true"] { color: #9c7322; } /* 3.8:1 on the cream box */
.tbl-pw-eye:hover { color: var(--text); }
.tbl-pw-eye:focus-visible { outline-offset: -4px; }
/* Gold themes: the eye is gold at rest, like the brushed-gold eye on the sign-in screen. */
html:not([data-theme]) .tbl-pw-eye, html[data-theme="dark-gold"] .tbl-pw-eye, html[data-theme="midnight-purple"] .tbl-pw-eye { color: var(--gold); }
/* The typed text, in a recessed read-only slot like the recovery-key box. Fixed-width letters so
   l / 1 / I and O / 0 are easy to tell apart. */
.tbl-pw-reveal { margin-top: 10px; padding: 10px 14px; border-radius: 10px; background: var(--sunken); border: 1px solid var(--line);
  color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 18px;
  letter-spacing: 0.06em; line-height: 25.2px; min-height: 25.2px; word-break: break-all; white-space: pre-wrap; }
/* Same height as the slot, so nothing moves when the eye is tapped. */
.tbl-pw-reveal.is-hint { background: none; border-color: transparent; color: var(--text-muted); font-family: var(--font-body);
  font-size: 14px; letter-spacing: 0; }
.tbl-pw-eye[hidden], .tbl-pw-reveal[hidden] { display: none; }
.settings-note { font-size: 12px; color: #b3aea2; line-height: 1.5; }
.settings-section-label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(201,162,74,0.18); }
.settings-section-label:first-of-type { margin-top: 4px; }
/* Jump index: sticky table-of-contents chip bar at the top of the (long) settings scroll. Built
   in JS from the visible sections; horizontally scrollable so it never wraps into a tall block. */
.settings-index { position: sticky; top: -4px; z-index: 5; display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 10px; margin-bottom: 4px; background: var(--raised); border-bottom: 1px solid rgba(201,162,74,0.14); scrollbar-width: none; }
.settings-index::-webkit-scrollbar { display: none; }
.settings-index-chip { flex: 0 0 auto; background: rgba(201,162,74,0.10); border: 1px solid rgba(201,162,74,0.28); color: var(--gold); font-size: 12px; font-family: inherit; padding: 5px 11px; border-radius: 20px; cursor: pointer; white-space: nowrap; }
.settings-index-chip:hover { background: rgba(201,162,74,0.20); }
.settings-index-chip.active { background: var(--gold); color: #0a0a0f; border-color: var(--gold); font-weight: 700; }
/* Why Tabella / Privacy Promise modal */
.why-h { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #c9a24a; border-bottom: 1px solid rgba(201,162,74,0.18); padding-bottom: 6px; margin-bottom: 15px; }
.why-list { display: flex; flex-direction: column; gap: 15px; }
.why-row { display: flex; align-items: flex-start; gap: 13px; }
.why-row img { width: 36px; height: 36px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.4)); }
.why-row b { display: block; color: #e9e6df; font-size: 14.5px; font-weight: 600; }
.why-row span { display: block; color: #9a958a; font-size: 12.5px; line-height: 1.5; margin-top: 2px; }
/* Dashboard hub — scalable sub-page tabs */
.dash-tab { flex: none; background: none; border: 1px solid rgba(201,162,74,0.28); border-radius: 999px; color: #9a958a; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 7px 15px; white-space: nowrap; }
.dash-tab--on { background: rgba(201,162,74,0.14); border-color: rgba(201,162,74,0.55); color: #c9a24a; }
.dash-page { display: none; }
.dash-page.dash-page--on { display: block; }
.settings-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 14px; color: #ddd; cursor: pointer; }
.settings-toggle span { flex: 1; }
.settings-toggle input[type="checkbox"], .settings-toggle input[type="radio"] { width: 18px; height: 18px; accent-color: var(--gold); cursor: pointer; flex: none; }
.settings-list { display: flex; flex-direction: column; gap: 8px; }
.settings-list:empty::after { content: "None"; color: #8a8576; font-size: 13px; padding: 4px 0; }
.settings-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--input); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 10px 12px; }
.settings-item-main { min-width: 0; }
.settings-item-name { font-size: 14px; color: #eee; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-item-sub { font-size: 11px; color: #777; margin-top: 2px; }
.settings-item-sub .this-device { color: var(--gold); font-weight: 600; }
.settings-item-action { background: none; border: 1px solid #5a564d; color: #c98a8a; border-radius: 7px; padding: 5px 11px; font-size: 12px; cursor: pointer; flex: none; }
.settings-item-action:hover { border-color: #c98a8a; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: #c9a24a33; border-radius: 3px; }

/* Toast notifications */
/* Notes sit ABOVE the message bar and let taps through (QA 2026-10-13: a note covered the send button). */
#toast-container { position: fixed; bottom: 96px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { background: #221e12; border: 1px solid #c9a24a33; border-radius: 10px; padding: 12px 18px; font-size: 13px; color: #e8edf6; max-width: 320px; opacity: 0; transform: translateX(20px); transition: opacity 0.25s, transform 0.25s; pointer-events: auto; box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
.toast.toast-show { opacity: 1; transform: translateX(0); }
.toast:not(:has(button, a)) { pointer-events: none; }
.toast.toast-error { border-color: #ff444466; background: #200a0a; color: #ff8888; }
.toast.toast-success { border-color: #4caf5066; background: #0a1a0a; color: #80e880; }
.toast.toast-warn { border-color: #ff8c0066; background: #1a1000; color: #ffb74d; }

/* Upload progress overlay */
/* Sending a file: a small strip above the message bar that never blocks the chat (it used to grey
   out the whole screen and swallow scrolling while a photo was read and sent -- Leo 2026-10-13). */
#upload-overlay { display: none; position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  z-index: 800; pointer-events: none; }
#upload-overlay.active { display: block; }
.upload-card { background: var(--panel); border-radius: 999px; padding: 8px 18px; text-align: center; border: 1px solid #c9a24a55;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35); display: flex; align-items: center; gap: 12px; }
.upload-title { color: var(--gold); font-size: 13px; font-weight: 600; margin: 0; white-space: nowrap; }
.upload-bar-wrap { width: 120px; height: 4px; background: #221e12; border-radius: 2px; margin: 0 auto; }
.upload-bar { height: 100%; background: var(--gold); border-radius: 2px; width: 0%; transition: width 0.3s; }

/* Loading button state */
.btn-loading { opacity: 0.7; cursor: wait !important; }

/* Hamburger app menu (replaces native File/Edit/View/Help bar) */
#hamburger-btn:hover { color: #fff; }
.app-menu-item { display: block; width: 100%; text-align: left; background: none; border: none;
  color: #e0e6f0; font-size: 14px; padding: 9px 12px; border-radius: 7px; cursor: pointer; }
.app-menu-item:hover { background: #2a2418; }
.app-menu-item--danger { color: #ff6b6b; }
.app-menu-item--danger:hover { background: #2a1f1f; }

/* -- Fluid typography --------------------------------------------------------
   "Responsive type": text grows with the window up to a ceiling and shrinks to a
   floor on small windows, keeping content in proportion at any size. clamp(min,
   fluid, max) -- the fluid term (calc with vw) tracks window width; the min/max
   are the thresholds. These override the fixed px sizes above (later rule wins). */
.msg-bubble  { font-size: clamp(13px, calc(10px + 0.42vw), 18px); }
.msg-sender  { font-size: clamp(10px, calc(8px  + 0.22vw), 13px); }
.msg-time    { font-size: clamp(9px,  calc(7px  + 0.18vw), 12px); }
.msg-ttl     { font-size: clamp(9px,  calc(7px  + 0.18vw), 12px); }
.reaction-chip { font-size: clamp(12px, calc(10px + 0.22vw), 15px); }
.room-name   { font-size: clamp(13px, calc(11px + 0.28vw), 16px); }
.room-sub    { font-size: clamp(11px, calc(9px  + 0.2vw),  13px); }
#app-title   { font-size: clamp(13px, calc(11px + 0.25vw), 15px); }
#user-info   { font-size: 10.5px; }
#chat-title  { font-size: clamp(15px, calc(12px + 0.45vw), 22px); }
#msg-input   { font-size: calc(clamp(13px, calc(10px + 0.42vw), 18px) * var(--chat-scale, 1)); }
.form-input  { font-size: clamp(14px, calc(12px + 0.3vw),  17px); }
#empty-title { font-size: clamp(22px, calc(14px + 1.3vw),  38px); }
#empty-sub   { font-size: clamp(13px, calc(11px + 0.25vw), 16px); }

/* ── Proof Studio & Safety (new lean-stack features panel) ───────────────────── */
#ps-launch { background: none; color: var(--text-muted); border: none; padding: 4px 6px; cursor: pointer;
  border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#ps-launch:hover { color: var(--gold); background: rgba(201,162,74,0.1); }
.ps-overlay { position: fixed; inset: 0; z-index: 9001; background: rgba(0,0,0,.55); display: flex;
  align-items: center; justify-content: center; padding: 20px; }
.ps-card { width: 100%; max-width: 540px; max-height: 88vh; overflow: auto; background: #15120b;
  border: 1px solid #262014; border-radius: 16px; color: #e8edf6; box-shadow: 0 16px 60px rgba(0,0,0,.6); }
.ps-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px;
  border-bottom: 1px solid #262014; font-size: 16px; }
.ps-x { background: #262014; color: #cfd6e4; border: 0; border-radius: 8px; width: 28px; height: 28px; cursor: pointer; }
.ps-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px; border-bottom: 1px solid #262014; }
.ps-tab { background: #100e08; color: #9aa6ba; border: 1px solid #262014; border-radius: 999px;
  padding: 6px 12px; font-size: 12px; cursor: pointer; }
.ps-tab.on { background: #c9a24a22; color: #e3c878; border-color: #c9a24a55; }
.ps-body { padding: 16px 20px 22px; }
.ps-sec h3 { margin: 4px 0 10px; font-size: 14px; color: #cfd6e4; }
.ps-f { display: block; margin: 8px 0; }
.ps-f span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 3px; }
.ps-f input, .ps-f select { width: 100%; padding: 10px 12px; background: #100e08; border: 1px solid #262014;
  border-radius: 9px; color: #e8edf6; font-size: 14px; }
.ps-go, .ps-go2, .ps-danger { margin-top: 10px; padding: 11px 16px; border: 0; border-radius: 10px;
  font-weight: 700; font-size: 14px; cursor: pointer; }
.ps-go { background: var(--gold); color: var(--bg); } .ps-go:hover { background: #dab65a; }
.ps-go2 { background: #262014; color: #cfd6e4; margin-left: 8px; }
.ps-danger { background: #b00020; color: #fff; }
.ps-out { margin-top: 14px; padding: 12px; background: #100e08; border: 1px solid #262014; border-radius: 10px;
  font-size: 12px; white-space: pre-wrap; word-break: break-word; color: #cfd6e4; }
.ps-out.ok { border-left: 3px solid #4ade80; } .ps-out.bad { border-left: 3px solid #f87171; }
.ps-note { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.ps-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #262014; font-size: 13px; }
.ps-row span { flex: 1; word-break: break-all; }
.ps-mini { background: #262014; color: #cfd6e4; border: 0; border-radius: 7px; padding: 6px 10px; font-size: 12px; cursor: pointer; }
.ps-list { margin-top: 10px; }

/* Per-room privacy shield (desktop only) */
#ps-shield { position: fixed; right: 12px; bottom: 12px; z-index: 9000; background: none;
  border: none; padding: 4px; cursor: pointer; line-height: 0; border-radius: 6px;
  box-shadow: none; opacity: 0.85; transition: opacity 0.15s, transform 0.15s; }
#ps-shield:hover { opacity: 1; transform: scale(1.12); }
#ps-shield.on { opacity: 1; }

/* Landing tagline under the growl hero */
.auth-tagline { text-align: center; color: #e3c878; font-size: 13px; letter-spacing: .09em;
  text-transform: uppercase; font-weight: 700; margin: 12px 0 2px; text-shadow: 0 0 10px rgba(201,162,74,.35); }

/* Don't render the broken-image icon when no avatar is set yet */
#profile-avatar:not([src]), #profile-avatar[src=""] { visibility: hidden; }

/* Privacy ribbon at the bottom of the auth card */
.auth-ribbon { display: block; width: 100%; height: auto; margin-top: 14px; border-radius: 8px; }

/* Subtle brand watermark at the bottom of the sidebar — present but out of the way. */
#brand-watermark { text-align: center; font-size: 9px; letter-spacing: .32em; font-weight: 700;
  color: #ffffff; opacity: .055; padding: 4px 0 8px; user-select: none; pointer-events: none;
  text-shadow: 0 1px 0 rgba(0,0,0,.7); white-space: nowrap; overflow: hidden; }
#app-title { cursor: pointer; }

/* About modal */
#about-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 200; align-items: center; justify-content: center; }
#about-modal.open { display: flex; }

/* Mobile back button — hidden on desktop, shown via mobile media query below */
#mobile-back-btn { display: none; }

/* ── App loading indicator ──────────────────────────────────────────────────────
   Shown immediately via CSS (no JS needed) while the 12 MB bundle downloads.
   JS calls document.getElementById('app-loading').remove() when init() runs.
   The @keyframes animation is a moving shimmer so users know it's alive.
────────────────────────────────────────────────────────────────────────────── */
#app-loading {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px;
  pointer-events: none;
}
#app-loading-bar {
  width: 200px; height: 3px; background: #1e1a12; border-radius: 4px; overflow: hidden;
}
#app-loading-bar::after {
  content: '';
  display: block; height: 100%; width: 60%; border-radius: 4px;
  background: var(--gold);
  animation: loading-slide 1.2s ease-in-out infinite;
}
@keyframes loading-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(267%); }
}
#app-loading-text {
  font-size: 13px; color: #5a5040; letter-spacing: .08em;
  font-family: 'Palatino Linotype', Palatino, Georgia, serif;
}

/* ── "Signing you in…" (2.3.1) ──────────────────────────────────────────────────
   While a saved sign-in starts, html.tbl-starting hides the sign-in card (nothing on it can be
   tapped: a tap there ran a second sign-in that wiped the phone's keys, 2026-10-14) and shows this
   cover in the user's theme colors. Above the app and its menus, below the VPN sheets (1100+),
   dialogs, app lock and toasts, which may still need to show while it starts.
────────────────────────────────────────────────────────────────────────────── */
html.tbl-starting #auth-view { display: none !important; }
#startup-cover {
  display: none; position: fixed; inset: 0; z-index: 1050;
  background: var(--bg); color: var(--text);
  align-items: center; justify-content: center;
  padding: calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
}
html.tbl-starting #startup-cover { display: flex; }
.startup-cover-inner {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  width: 100%; max-width: 360px; text-align: center;
}
.startup-cover-mark { width: 72px; height: 72px; border-radius: 16px; }
.startup-cover-text { font-size: 20px; font-weight: 600; line-height: 1.35; color: var(--text); }
.startup-cover-bar {
  width: 200px; max-width: 100%; height: 4px; border-radius: 4px; overflow: hidden;
  background: var(--line);
}
.startup-cover-bar::after {
  content: ''; display: block; height: 100%; width: 60%; border-radius: 4px;
  background: var(--tb-accent, var(--gold));
  animation: loading-slide 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .startup-cover-bar::after { animation: none; width: 100%; } }
.startup-cover-slow { font-size: 16px; line-height: 1.5; color: var(--text-muted); }
.startup-cover-retry {
  min-height: 48px; padding: 10px 28px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 17px; font-weight: 600;
  background: var(--panel); color: var(--text); border: 1px solid var(--text-muted);
}
.startup-cover-slow[hidden], .startup-cover-retry[hidden] { display: none; }

/* Picture Verify modal */
#pv-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 200; align-items: center; justify-content: center; }
#pv-modal.open { display: flex; }
#pv-crest svg { width: 100%; height: 100%; }

/* SAS emoji verification modal (C-2 fix) */
#sas-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 201; align-items: center; justify-content: center; }
#sas-modal.open { display: flex; }

/* ── Mobile layout (phones up to 640px) ────────────────────────────────────────
   On desktop: sidebar (260px fixed) + chat side-by-side, both always visible.
   On mobile:  sidebar OR chat fills the full screen — one at a time.
   Switching between them is handled by the .mobile-in-chat class on <body>.
   The back button (#mobile-back-btn) appears in the chat header on mobile only.
────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body { flex-direction: column; overflow: hidden; }

  /* Sidebar: full-screen room list by default */
  #sidebar {
    width: 100%;
    flex: 1;
    min-height: 0;
    border-right: none;
    border-bottom: 1px solid #c9a24a15;
  }

  /* Chat panel: hidden until a room is opened */
  #main {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10;
    background: var(--bg);
  }

  /* When body has .mobile-in-chat: show chat, hide sidebar */
  body.mobile-in-chat #sidebar { display: none; }
  body.mobile-in-chat #main    { display: flex; }

  /* Back button — only visible on mobile */
  #mobile-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--gold);
    cursor: pointer;
    padding: 4px 8px 4px 0;
    flex-shrink: 0;
  }
  #mobile-back-btn svg { width: 22px; height: 22px; }

  /* Tighten the chat header on small screens */
  #chat-header { padding: 12px 14px; gap: 8px; }
  #chat-title  { font-size: 15px; }

  /* Message bubbles can use more width on a phone */
  .msg-bubble { max-width: 82%; }

  /* ── Mobile auth: scrollable column — marketing on top, auth card below ── */
  #auth-view {
    position: fixed;
    inset: 0;
    display: block;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    background: radial-gradient(120% 80% at 15% 0%, #15110a 0%, var(--bg) 55%);
  }
  /* Marketing section: single column, REORDERED for mobile so the crest/logo sits right
     after the headline (per the mobile design): wordmark -> headline -> logo -> body text
     -> early-access -> nav. The login card's video crest is hidden below so only ONE crest
     stacks. */
  .auth-marketing {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    text-align: left;
    order: unset;
    padding: 36px 24px 28px;
    border-bottom: 1px solid rgba(201,162,74,0.1);
  }
  .auth-marketing .mkt-wordmark   { order: 1; }
  .auth-marketing .mkt-h1         { order: 2; font-size: clamp(26px, 7vw, 36px); }
  .auth-marketing .mkt-sub        { order: 4; margin-top: 24px; }
  .auth-marketing .mkt-points     { order: 5; }
  .auth-marketing .mkt-tag        { order: 6; }
  .auth-marketing .mkt-nav        { order: 7; flex-wrap: wrap; gap: 14px; }
  /* Auth card: full-width, no border radius, flush */
  .auth-card {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    border: none;
    overflow: visible;
    padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
  }
  .auth-hero {
    width: 100%;
  }
  .auth-card-body { padding: 2px 24px 0; }
  /* Footer at the very bottom after the auth card */
  .mkt-maker { padding: 28px 24px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(201,162,74,0.1); text-align: center; }
  .mkt-footer { flex-wrap: wrap; gap: 12px; justify-content: center; }

  /* ── All modals/cards: prevent overflow on 390px screens ── */
  .settings-card {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    padding: 24px 18px;
    border-radius: 12px;
  }

  /* ── Archive panel: stack sidebar over messages on mobile ── */
  #archive-panel {
    flex-direction: column;
    height: 90dvh;
    max-width: calc(100vw - 32px);
  }
  #archive-chats {
    width: 100%;
    flex: none;
    height: 180px;
    border-right: none;
    border-bottom: 1px solid rgba(201,162,74,0.12);
  }

  /* ── Safe-area insets: keep buttons above iPhone home bar ── */
  #driving-overlay { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  #ps-shield  { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  #toast-container { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); right: 12px; }

  /* ── Input/message area: don't hide behind keyboard ── */
  #msg-row { padding-bottom: env(safe-area-inset-bottom, 0px); }

  /* ── Composer: now just three items (hamburger menu · text field · paw send), so keep them
     on ONE row. The old flex:1 1 100% forced the text field to a full line and pushed the
     send button underneath it — that's what looked broken. ── */
  #input-area { flex-wrap: nowrap; gap: 6px; padding: 5px 10px calc(5px + env(safe-area-inset-bottom, 0px)); }
  #msg-input { min-width: 0; flex: 1 1 auto; }              /* text field grows, shares the row */

  /* ── Side panels: fixed 320px is wider than a 375px phone -> go full-width. ── */
  #tbl-ai-panel,
  #tbl-notes-panel {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
  }
  #tbl-notes-panel { right: 16px; left: 16px; }
}

/* ===== NEW FEATURES (24-pack) ===== */

/* F1: Voice messages */
#tbl-mic-btn { width: 40px; height: 40px; border-radius: 20px; background: var(--panel); border: 1px solid #c9a24a33; color: var(--text-muted); font-size: 17px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
#tbl-mic-btn:hover { color: var(--gold); border-color: var(--gold); }
#tbl-mic-btn.recording { color: #ff4444; border-color: #ff4444; animation: tbl-pulse 1s ease-in-out infinite; }
/* Voice message bar (2.4.2, two steps since 2.4.3): it takes the place of the message box, the menu
   button and the paw, so the person sees the microphone is on.
   RECORDING: [bin] (dot) Recording 0:05 ............ [square Stop]   (Stop sits where the paw is)
   REVIEW:    [bin] [play] ----progress---- 0:03 / 0:07 [Send]
   Colours: words and icons in the theme's text colour (AA in every theme). Send is an outline in
   the theme's accent with that text colour, like the chat list's button: a filled blue button with
   white text is under 4.5:1 in the blue themes. The red square / dot is over 3:1 on every theme's
   message-box colour. Every button is at least 44 px. */
#tbl-rec-bar { display: none; flex: 1; min-width: 0; align-items: center; gap: 6px; min-height: 48px; padding: 2px 3px; border-radius: 24px; background: var(--tb-input-bg, var(--panel)); border: 1.5px solid #ff4d4d88; color: var(--tb-text, #eef0f3); font-size: 15px; }
#input-area.tbl-recording #tbl-rec-bar { display: flex; }
#input-area.tbl-recording #tb-composer-pill, #input-area.tbl-recording #msg-input, #input-area.tbl-recording #comp-actions-btn,
#input-area.tbl-recording #comp-actions-menu, #input-area.tbl-recording #send-btn, #input-area.tbl-recording #send-hold-menu { display: none !important; }
#tbl-rec-bar [hidden] { display: none !important; }
#tbl-rec-bar[data-state="review"] { border-color: var(--tb-accent, var(--gold)); }
.tbl-rec-dot { width: 11px; height: 11px; border-radius: 50%; background: #ff3b30; flex: none; animation: tbl-pulse 1s ease-in-out infinite; }
#tbl-rec-bar[data-state="starting"] .tbl-rec-dot, #tbl-rec-bar[data-state="stopping"] .tbl-rec-dot { animation: none; opacity: 0.45; }
#tbl-rec-bar[data-state="review"] .tbl-rec-dot, #tbl-rec-bar[data-state="review"] #tbl-rec-label { display: none; }
#tbl-rec-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#tbl-rec-time { font-variant-numeric: tabular-nums; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; }
#tbl-rec-bar[data-state="review"] #tbl-rec-time { flex: none; }
#tbl-rec-delete, #tbl-rec-play { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; color: var(--tb-text, #eef0f3); cursor: pointer; }
#tbl-rec-play { border: 1.5px solid var(--tb-input-border, #c9a24a44); }
#tbl-rec-delete svg { width: 22px; height: 22px; }
#tbl-rec-play svg { width: 20px; height: 20px; fill: currentColor; }
#tbl-rec-play .tbl-rec-ic-pause, #tbl-rec-play.playing .tbl-rec-ic-play { display: none; }
#tbl-rec-play.playing .tbl-rec-ic-pause { display: block; }
/* The line: the track is the theme's faint text colour (the message-box border colour was almost
   invisible on the dark themes), the played part its strong text colour. */
#tbl-rec-progress { position: relative; flex: 1; min-width: 16px; height: 4px; border-radius: 2px; overflow: hidden; }
#tbl-rec-progress::before { content: ''; position: absolute; inset: 0; background: var(--tb-text-3, #8e939c); opacity: 0.45; }
#tbl-rec-progress-fill { position: relative; display: block; height: 100%; width: 0; border-radius: 2px; background: var(--tb-text-2, #c9ccd2); transition: width 0.25s linear; }
#tbl-rec-stop, #tbl-rec-send { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; min-width: 80px; padding: 0 14px; border-radius: 22px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; color: var(--tb-text, #eef0f3); }
#tbl-rec-stop { background: none; border: 1.5px solid var(--tb-input-border, #c9a24a44); }
#tbl-rec-stop svg { width: 16px; height: 16px; }
.tbl-rec-square { fill: #ff3b30; }
#tbl-rec-send { background: var(--tb-accent-soft, #c9a24a22); border: 1.5px solid var(--tb-accent, var(--gold)); }
#tbl-rec-send svg { width: 17px; height: 17px; fill: currentColor; }
#tbl-rec-stop[aria-disabled="true"], #tbl-rec-send:disabled { opacity: 0.5; cursor: default; }
#tbl-rec-bar button:focus-visible { outline: 2px solid var(--tb-accent, var(--gold)); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .tbl-rec-dot { animation: none; } #tbl-rec-progress-fill { transition: none; } }
@keyframes tbl-pulse { 0%,100%{ opacity:1; } 50%{ opacity:0.4; } }
.tbl-voice-bubble { display: flex; align-items: center; gap: 8px; padding: 8px; background: #c9a24a14; border: 1px solid #c9a24a33; border-radius: 10px; min-width: 200px; }
.tbl-voice-bubble audio { flex: 1; height: 32px; }

/* S3-A: Video message button */
#tbl-cam-btn { width: 36px; height: 36px; border-radius: 18px; background: var(--panel); border: 1px solid #c9a24a33; color: var(--text-muted); cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
#tbl-cam-btn:hover { color: var(--gold); border-color: var(--gold); }
#tbl-cam-btn.recording { color: #ff4444; border-color: #ff4444; animation: tbl-pulse 1s ease-in-out infinite; }

/* S3-B: Stories strip + circles */
#tbl-stories-strip { scrollbar-width: none; }
#tbl-stories-strip::-webkit-scrollbar { display: none; }
.tbl-story-circle { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--gold); background: var(--panel-2); cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; }
.tbl-story-circle.seen { border-color: #4b4540; }
.tbl-story-circle:hover { border-color: #e0b85a; }
.tbl-story-avatar { width: 44px; height: 44px; border-radius: 50%; background: #2a2218; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: var(--gold); }

/* S3-C: Location button */
#tbl-location-btn { width: 36px; height: 36px; border-radius: 18px; background: var(--panel); border: 1px solid #c9a24a33; color: var(--text-muted); cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
#tbl-location-btn:hover { color: var(--gold); border-color: var(--gold); }

/* S3-D: Summarize button in header */
#tbl-summarize-btn { color: var(--text-muted); }
#tbl-summarize-btn:hover { color: var(--gold); }

/* F3: Spoiler text */
.tbl-spoiler { background: #555; color: transparent; border-radius: 4px; cursor: pointer; padding: 0 3px; user-select: none; transition: color 0.2s, background 0.2s; }
.tbl-spoiler.tbl-spoiler-revealed { color: inherit; background: #c9a24a22; }
#tbl-spoiler-btn { background: var(--panel); border: 1px solid #c9a24a33; color: var(--text-muted); border-radius: 8px; height: 36px; width: 36px; font-size: 13px; font-weight: 700; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
#tbl-spoiler-btn:hover { color: var(--gold); border-color: var(--gold); }

/* F4: Stars panel */
#tbl-stars-panel { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 210; align-items: center; justify-content: center; }
#tbl-stars-panel.open { display: flex; }
#tbl-stars-inner { background: var(--raised); border-radius: 16px; padding: 28px; width: min(480px,calc(100vw - 32px)); max-height: 80vh; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,0.08); }
.tbl-starred-item { background: var(--input); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; position: relative; }
.tbl-starred-meta { font-size: 11px; color: var(--gold); margin-bottom: 4px; }
.tbl-starred-body { font-size: 14px; color: #e0e6f0; }
.tbl-unstar-btn { position: absolute; top: 8px; right: 8px; background: none; border: none; color: #666; cursor: pointer; font-size: 13px; }
.tbl-unstar-btn:hover { color: #ff6666; }
#tbl-stars-list { overflow-y: auto; flex: 1; margin-top: 12px; }

/* F6: Room folders */
.tbl-folder-section { padding: 4px 10px; }
.tbl-folder-header { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 4px 2px; color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.tbl-folder-count { background: rgba(201,162,74,0.18); border-radius: 10px; padding: 1px 7px; font-size: 11px; }
.tbl-folder-collapsed .tbl-folder-rooms { display: none; }
#tbl-new-folder-btn { display: block; width: calc(100% - 20px); margin: 4px 10px; background: none; border: 1px dashed rgba(201,162,74,0.25); color: #8a8576; border-radius: 8px; padding: 6px; font-size: 12px; cursor: pointer; text-align: center; }
#tbl-new-folder-btn:hover { border-color: #c9a24a55; color: var(--gold); }

/* F7: Notes panel */
#tbl-notes-panel { display: none; position: fixed; top: 60px; right: 16px; width: 320px; max-height: 460px; background: var(--raised); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; z-index: 220; flex-direction: column; box-shadow: 0 10px 40px rgba(0,0,0,0.6); }
#tbl-notes-panel.open { display: flex; }
#tbl-notes-head { padding: 12px 16px; border-bottom: 1px solid #2c2618; display: flex; align-items: center; justify-content: space-between; }
#tbl-notes-body { flex: 1; overflow-y: auto; }
#tbl-notes-textarea { width: 100%; background: transparent; border: none; color: #e0e6f0; font-family: inherit; font-size: 14px; padding: 12px 16px; resize: none; outline: none; min-height: 280px; }
#tbl-notes-foot { padding: 8px 12px; border-top: 1px solid #2c2618; display: flex; justify-content: flex-end; }
/* #tbl-my-notes-btn pill styles removed — the button moved into the hamburger menu and is
   styled by .app-menu-item (Leo 2026-07-06 sidebar cleanup). */

/* F8: Room lock */
/* 2.4.0: a solid cover (it was 92% see-through, so the chat showed through it), above the header too. */
#tbl-room-lock-overlay { display: none; position: absolute; inset: 0; background: #0a0a0f; z-index: 50; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; box-sizing: border-box; }
.tbl-room-lock-card { text-align: center; background: #1a1c21; border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 28px 32px; max-width: 360px; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; }
#tbl-room-lock-back { background: none; border: none; color: #aab3c2; font-size: 14px; margin-top: 10px; padding: 10px 16px; min-height: 44px; cursor: pointer; text-decoration: underline; }
#tbl-room-lock-back:hover { color: #e0e6f0; }
#tbl-room-lock-overlay.active { display: flex; }
/* "Lock chat" is a normal row of the chat menu (.chat-menu-row); its old header-icon look is gone. */

/* F9: Slow mode */
#tbl-slow-mode-banner { display: none; padding: 6px 20px; background: #1a0f00; border-bottom: 1px solid #c9a24a33; flex-direction: row; align-items: center; gap: 8px; flex-shrink: 0; font-size: 12px; color: var(--gold); }

/* F10: Schedule */
#tbl-schedule-btn { background: var(--panel); border: 1px solid #c9a24a33; color: var(--text-muted); border-radius: 8px; height: 36px; width: 36px; font-size: 14px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
#tbl-schedule-btn:hover { color: var(--gold); border-color: var(--gold); }
#tbl-schedule-picker { display: none; position: absolute; bottom: calc(100% + 6px); right: 0; background: var(--raised); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 14px 16px; z-index: 130; min-width: 240px; box-shadow: 0 8px 28px rgba(0,0,0,0.5); }
#tbl-scheduled-panel { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 210; align-items: center; justify-content: center; }
#tbl-scheduled-panel.open { display: flex; }

/* F11: View once */
.tbl-viewonce-overlay { position: relative; display: inline-block; }
.tbl-viewonce-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,0.75); border-radius: 6px; padding: 2px 7px; font-size: 11px; color: var(--gold); pointer-events: none; }
.tbl-viewonce-placeholder { font-size: 12px; color: var(--text-muted); font-style: italic; padding: 8px 0; }
#tbl-viewonce-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); cursor: pointer; }
#tbl-viewonce-toggle input { accent-color: var(--gold); }

/* F12: Role badges */
.tbl-role-badge { display: inline-block; font-size: 10px; font-weight: 700; border-radius: 4px; padding: 1px 6px; margin-left: 4px; }
.tbl-role-owner { background: rgba(201,162,74,0.2); color: var(--gold); }
.tbl-role-admin { background: rgba(70,130,180,0.2); color: #6ab0f5; }
.tbl-role-moderator { background: rgba(255,140,0,0.2); color: #ffa040; }
.tbl-role-member { background: rgba(255,255,255,0.1); color: #9aa6ba; }
.tbl-role-guest { background: rgba(255,255,255,0.06); color: #6a7484; }

/* F13: Admin console */
#tbl-admin-console { display: none; position: fixed; inset: 0; background: var(--sunken); z-index: 260; flex-direction: column; }
#tbl-admin-console.open { display: flex; }
#tbl-admin-head { padding: 14px 20px; background: var(--panel-3); border-bottom: 1px solid #c9a24a22; display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
#tbl-admin-tabs { display: flex; gap: 4px; flex: 1; }
.tbl-admin-tab { background: none; border: 1px solid transparent; border-radius: 8px; padding: 7px 14px; color: var(--text-muted); font-size: 13px; cursor: pointer; } /* theme token: the fixed grey was 2.4:1 in the light themes */
.tbl-admin-tab.active { background: rgba(201,162,74,0.12); color: var(--gold); border-color: rgba(201,162,74,0.3); }
#tbl-admin-body { flex: 1; overflow-y: auto; padding: 20px; }
.tbl-admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl-admin-table th { color: var(--text-muted); font-weight: 600; text-align: left; padding: 8px 10px; border-bottom: 1px solid #2c2618; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.tbl-admin-table td { padding: 10px 10px; border-bottom: 1px solid var(--input); color: #e0e6f0; vertical-align: middle; }
.tbl-admin-table tr:hover td { background: rgba(201,162,74,0.04); }
.tbl-admin-action { background: none; border: 1px solid #5a564d; color: #b3aea2; border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; margin-right: 4px; }
.tbl-admin-action:hover { border-color: #c9a24a55; color: #fff; }
.tbl-bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 100px; margin: 14px 0; }
.tbl-bar { flex: 1; background: rgba(201,162,74,0.25); border-radius: 4px 4px 0 0; position: relative; min-width: 20px; transition: background 0.2s; }
.tbl-bar:hover { background: rgba(201,162,74,0.45); }
.tbl-bar-label { font-size: 9px; color: #888; text-align: center; margin-top: 4px; }
.tbl-metric-cards { display: grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: 12px; margin-bottom: 20px; }
.tbl-metric-card { background: var(--input); border: 1px solid #2c2618; border-radius: 10px; padding: 14px 16px; }
.tbl-metric-val { font-size: 26px; font-weight: 700; color: var(--gold); }
.tbl-metric-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* F14: Room templates modal */
#tbl-template-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 210; align-items: center; justify-content: center; }
#tbl-template-modal.open { display: flex; }
.tbl-template-card { background: var(--input); border: 1px solid #2c2618; border-radius: 10px; padding: 14px 16px; cursor: pointer; transition: border-color 0.15s; }
.tbl-template-card:hover { border-color: #c9a24a55; }
.tbl-template-name { font-size: 14px; color: #e0e6f0; font-weight: 600; }
.tbl-template-desc { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* F15: GIF picker */
#tbl-gif-picker { display: none; position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; background: var(--input); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; z-index: 130; padding: 10px; box-shadow: 0 8px 28px rgba(0,0,0,0.5); max-height: 320px; overflow-y: auto; }
/* Reaction-style quick filters (Recent / Favorites / Trending / mood keywords) — a row of icon
   chips above the grid so browsing doesn't require typing a search term first. */
.tbl-gif-filters { display: flex; gap: 4px; overflow-x: auto; padding: 8px 2px 2px; scrollbar-width: none; }
.tbl-gif-filters::-webkit-scrollbar { display: none; }
.tbl-gif-filter { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: none; background: transparent; color: #8a94a6; font-size: 15px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tbl-gif-filter:hover { background: rgba(255,255,255,0.06); }
.tbl-gif-filter.active { background: var(--gold); color: #1a1608; }
/* Masonry grid: CSS columns so each GIF keeps its natural aspect ratio instead of being
   center-cropped into a uniform square (a real square grid loses the punchline of a lot of GIFs). */
.tbl-gif-grid { column-count: 3; column-gap: 6px; margin-top: 8px; }
.tbl-gif-item { position: relative; cursor: pointer; border-radius: 8px; overflow: hidden; break-inside: avoid; margin-bottom: 6px; }
.tbl-gif-item img { width: 100%; height: auto; display: block; }
.tbl-gif-item:hover { outline: 2px solid var(--gold); }
.tbl-gif-fav-btn { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tbl-gif-fav-btn.active { color: var(--gold); }
#tbl-gif-btn { background: var(--panel); border: 1px solid #c9a24a33; color: var(--text-muted); border-radius: 8px; height: 36px; width: 36px; font-size: 14px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
#tbl-gif-btn:hover { color: var(--gold); border-color: var(--gold); }

/* Global message search (Ctrl+Shift+F) */
.tbl-gsearch-result { display: flex; flex-direction: column; gap: 3px; padding: 10px 16px; cursor: pointer; border-bottom: 1px solid #2e3038; }
.tbl-gsearch-result:hover, .tbl-gsearch-result:focus { background: var(--raised); outline: none; }
.tbl-gsearch-result-header { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.tbl-gsearch-sender { font-weight: 600; color: var(--gold); }
.tbl-gsearch-room { color: var(--text-dim); }
.tbl-gsearch-time { margin-left: auto; color: #4b5563; }
.tbl-gsearch-body { font-size: 13px; color: #cfd3da; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl-gsearch-highlight { background: rgba(201,162,74,0.2); color: var(--gold); border-radius: 2px; padding: 0 2px; }

/* F16: Photo blur editor */
#tbl-photo-editor-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 300; align-items: center; justify-content: center; }
#tbl-photo-editor-modal.open { display: flex; }
#tbl-editor-canvas { border: 1px solid #c9a24a33; border-radius: 8px; cursor: crosshair; max-width: 100%; max-height: 60vh; }
.tbl-editor-tools { display: flex; gap: 8px; margin: 10px 0; }
.tbl-editor-tool { background: var(--input); border: 1px solid #2c2618; color: #9aa6ba; border-radius: 8px; padding: 7px 14px; font-size: 13px; cursor: pointer; }
.tbl-editor-tool.active { border-color: var(--gold); color: var(--gold); background: rgba(201,162,74,0.1); }

/* F17: Bonus/red packets */
.tbl-bonus-card { background: linear-gradient(135deg,#3a2208,#c9a24a22); border: 1px solid #c9a24a55; border-radius: 14px; padding: 16px 18px; max-width: 280px; }
.tbl-bonus-title { font-size: 16px; font-weight: 700; color: var(--gold); margin-bottom: 4px; }
.tbl-bonus-amt { font-size: 28px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.tbl-bonus-note { font-size: 12px; color: #b3aea2; margin-bottom: 10px; }
.tbl-bonus-claim { background: var(--gold); color: var(--bg); border: none; border-radius: 8px; padding: 8px 20px; font-size: 14px; font-weight: 700; cursor: pointer; }
.tbl-bonus-claim:hover { background: #dab65a; }
.tbl-bonus-claim:disabled { opacity: 0.5; cursor: default; }
.tbl-bonus-claimed { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
#tbl-bonus-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 210; align-items: center; justify-content: center; }
#tbl-bonus-modal.open { display: flex; }

/* F18: Slash command autocomplete */
#tbl-slash-popup { display: none; position: absolute; bottom: calc(100% + 4px); left: 0; background: var(--input); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; z-index: 140; min-width: 200px; padding: 4px; box-shadow: 0 6px 24px rgba(0,0,0,0.5); }
.tbl-slash-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 14px; color: #e0e6f0; }
.tbl-slash-item:hover, .tbl-slash-item.selected { background: rgba(201,162,74,0.12); color: #fff; }
.tbl-slash-cmd { color: var(--gold); font-weight: 700; min-width: 90px; }
.tbl-slash-desc { color: var(--text-muted); font-size: 12px; }
.tbl-cmd-result-bubble { background: rgba(201,162,74,0.08); border: 1px solid rgba(201,162,74,0.22); border-radius: 10px; padding: 10px 14px; font-size: 13px; color: var(--gold); margin-top: 4px; }

/* F19: Room color themes */
.tbl-room-color-btn { background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 4px; font-size: 13px; color: #9aa6ba; padding: 6px 10px; }
#tbl-room-color-picker { display: none; position: fixed; z-index: 270; background: var(--raised); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 10px; box-shadow: 0 8px 28px rgba(0,0,0,0.5); }
.tbl-color-swatch { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; display: inline-block; }
.tbl-color-swatch:hover, .tbl-color-swatch.selected { border-color: #fff; }

/* F20: Screenshot protection */
#tbl-screenshot-warn { display: none; padding: 6px 20px; background: #200a0a; border-bottom: 1px solid rgba(255,68,68,0.4); font-size: 12px; color: #ff8888; text-align: center; flex-shrink: 0; }

/* F21: Approval messages */
.tbl-approval-bubble { background: var(--input); border: 1px solid rgba(201,162,74,0.3); border-radius: 12px; padding: 12px 14px; max-width: 320px; }
.tbl-approval-q { font-size: 14px; color: #e0e6f0; margin-bottom: 10px; }
.tbl-approval-actions { display: flex; gap: 8px; }
.tbl-approval-approve { background: #27ae60; color: #fff; border: none; border-radius: 8px; padding: 7px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
.tbl-approval-deny { background: #7a1f1f; color: #fff; border: none; border-radius: 8px; padding: 7px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
.tbl-approval-result { font-size: 12px; color: var(--text-muted); margin-top: 8px; font-style: italic; }

/* F22: Communities */
#tbl-communities-section { border-top: 1px solid #c9a24a15; padding: 6px 0; }
#tbl-communities-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 14px 2px; }
#tbl-communities-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
#tbl-new-org-btn { background: none; border: none; color: var(--gold); font-size: 16px; cursor: pointer; padding: 0 4px; }
#tbl-communities-list { padding: 2px 6px 6px; }
.tbl-org-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.tbl-org-item:hover { background: rgba(201,162,74,0.08); }
.tbl-org-item.active { background: rgba(201,162,74,0.14); }
.tbl-org-avatar { width: 32px; height: 32px; border-radius: 8px; background: #3a2f14; color: var(--gold); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.tbl-org-name { font-size: 13px; color: #e0e6f0; }
.tbl-org-sub { font-size: 11px; color: var(--text-muted); }

/* F23: Broadcast */
#tbl-broadcast-banner { display: none; padding: 6px 20px; background: #0f1a0f; border-bottom: 1px solid rgba(39,174,96,0.4); font-size: 12px; color: #6fd394; align-items: center; gap: 8px; flex-shrink: 0; }
.tbl-broadcast-icon { flex-shrink: 0; }
#tbl-broadcast-icon-header { display: none; }

/* ============================================================
   SPRINT 2 FEATURES (A-I)
   ============================================================ */

/* FA: Animated Reactions */
@keyframes tblReactionPop { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } }
@keyframes tblParticleBurst { 0% { opacity: 1; transform: scale(0) translate(0,0); } 100% { opacity: 0; transform: scale(1) translate(var(--tx), var(--ty)); } }
.tbl-reaction-animated { animation: tblReactionPop 0.3s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.tbl-reaction-particle { position: absolute; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; animation: tblParticleBurst 0.4s ease-out forwards; }
.reaction-chip[data-emoji="fire"] { background: rgba(255,120,0,0.18); }
.reaction-chip[data-emoji="heart"] { background: rgba(220,50,50,0.18); }
.reaction-chip[data-emoji="clap"] { background: rgba(201,162,74,0.18); }
.reaction-chip[data-emoji="100"] { background: rgba(0,180,120,0.18); }
.reaction-chip[data-emoji="eyes"] { background: rgba(100,100,220,0.18); }
.tbl-reaction-wrap { position: relative; display: inline-flex; }

/* FB: Bookmarks Bar */
#tbl-bookmarks-bar { display: none; align-items: center; gap: 6px; padding: 5px 16px; background: var(--sunken); border-bottom: 1px solid #c9a24a15; flex-shrink: 0; overflow-x: auto; }
#tbl-bookmarks-bar.open { display: flex; }
.tbl-bm-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--input); border: 1px solid #c9a24a22; border-radius: 16px; padding: 3px 10px 3px 8px; font-size: 12px; color: #cfd3da; cursor: pointer; white-space: nowrap; flex-shrink: 0; position: relative; }
.tbl-bm-chip:hover { border-color: #c9a24a66; color: #fff; }
.tbl-bm-chip-del { background: none; border: none; color: #555; font-size: 11px; cursor: pointer; padding: 0 0 0 4px; line-height: 1; }
.tbl-bm-chip-del:hover { color: #ff6666; }
.tbl-bm-add-btn { background: none; border: 1px dashed #c9a24a44; border-radius: 16px; color: var(--gold); font-size: 12px; padding: 3px 10px; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.tbl-bm-add-btn:hover { background: rgba(201,162,74,0.08); }
#tbl-bm-add-form { display: none; align-items: center; gap: 6px; padding: 6px 16px 6px; background: var(--sunken); border-bottom: 1px solid #c9a24a15; flex-shrink: 0; }
#tbl-bm-add-form.open { display: flex; }
#tbl-bm-label-input, #tbl-bm-url-input { background: var(--panel); border: 1px solid #c9a24a33; border-radius: 8px; color: #fff; font-size: 12px; padding: 5px 10px; outline: none; }
#tbl-bm-label-input { width: 120px; }
#tbl-bm-url-input { flex: 1; }
#tbl-bm-save-btn { background: var(--gold); border: none; border-radius: 8px; color: var(--bg); font-size: 12px; font-weight: 700; padding: 5px 12px; cursor: pointer; }
#tbl-bm-cancel-btn { background: none; border: none; color: #888; font-size: 12px; cursor: pointer; }

/* FC: Forum Channels */
#tbl-forum-view { display: none; flex-direction: column; flex: 1; overflow-y: auto; padding: 16px 20px; gap: 10px; }
#tbl-forum-view.open { display: flex; }
.tbl-forum-post { background: var(--panel); border: 1px solid #c9a24a22; border-radius: 14px; padding: 14px 16px; cursor: pointer; transition: border-color 0.15s; }
.tbl-forum-post:hover { border-color: #c9a24a55; }
.tbl-forum-post-title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 5px; }
.tbl-forum-post-preview { font-size: 13px; color: #9a9387; line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tbl-forum-post-meta { display: flex; gap: 12px; margin-top: 8px; font-size: 11px; color: var(--text-dim); }
.tbl-forum-post-meta span { display: flex; align-items: center; gap: 4px; }
.tbl-forum-vote-btn { background: none; border: none; color: var(--text-muted); font-size: 11px; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.tbl-forum-vote-btn:hover { background: rgba(201,162,74,0.12); color: var(--gold); }
#tbl-forum-new-btn { align-self: flex-start; background: var(--gold); border: none; border-radius: 10px; color: var(--bg); font-size: 13px; font-weight: 700; padding: 8px 18px; cursor: pointer; margin-bottom: 4px; flex-shrink: 0; }
#tbl-forum-compose { display: none; background: var(--panel); border: 1px solid #c9a24a33; border-radius: 14px; padding: 14px 16px; flex-direction: column; gap: 8px; flex-shrink: 0; }
#tbl-forum-compose.open { display: flex; }
#tbl-forum-post-title-input { background: var(--sunken); border: 1px solid #c9a24a33; border-radius: 8px; color: #fff; font-size: 14px; font-weight: 700; padding: 8px 12px; outline: none; width: 100%; }
#tbl-forum-post-body-input { background: var(--sunken); border: 1px solid #c9a24a33; border-radius: 8px; color: #fff; font-size: 13px; padding: 8px 12px; outline: none; width: 100%; resize: vertical; min-height: 80px; font-family: inherit; }
.tbl-forum-compose-actions { display: flex; justify-content: flex-end; gap: 8px; }
.tbl-forum-expanded { background: #1a1208; border: 1px solid #c9a24a44; border-radius: 14px; padding: 14px 16px; }
.tbl-forum-reply { padding: 8px 0; border-top: 1px solid #c9a24a15; font-size: 13px; color: #cfd3da; }
.tbl-forum-reply-meta { font-size: 11px; color: var(--gold); font-weight: 700; margin-bottom: 3px; }

/* FD: Room Tabs */
#tbl-room-tabs-bar { display: none; align-items: center; gap: 6px; padding: 5px 16px; background: var(--bg); border-bottom: 1px solid #c9a24a15; flex-shrink: 0; overflow-x: auto; }
#tbl-room-tabs-bar.open { display: flex; }
.tbl-tab-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--input); border: 1px solid #c9a24a22; border-radius: 16px; padding: 3px 10px 3px 8px; font-size: 12px; color: #cfd3da; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.tbl-tab-chip:hover { border-color: #c9a24a66; color: #fff; }
.tbl-tab-chip-del { background: none; border: none; color: #555; font-size: 11px; cursor: pointer; padding: 0 0 0 4px; }
.tbl-tab-chip-del:hover { color: #ff6666; }
.tbl-tab-add-btn { background: none; border: 1px dashed #c9a24a44; border-radius: 16px; color: var(--gold); font-size: 12px; padding: 3px 10px; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.tbl-tab-add-btn:hover { background: rgba(201,162,74,0.08); }
#tbl-tab-iframe-overlay { display: none; position: absolute; inset: 0; background: var(--bg); z-index: 90; flex-direction: column; }
#tbl-tab-iframe-overlay.open { display: flex; }
#tbl-tab-iframe-header { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--panel-3); border-bottom: 1px solid #c9a24a22; flex-shrink: 0; }
#tbl-tab-iframe-title { flex: 1; font-size: 14px; font-weight: 600; color: #e0e6f0; }
#tbl-tab-iframe-close { background: none; border: none; color: var(--text-muted); font-size: 18px; cursor: pointer; }
#tbl-tab-iframe-close:hover { color: #ff6666; }
#tbl-tab-iframe-frame { flex: 1; border: none; background: #fff; }
#tbl-tab-add-form { display: none; align-items: center; gap: 6px; padding: 6px 16px; background: var(--bg); border-bottom: 1px solid #c9a24a15; flex-shrink: 0; }
#tbl-tab-add-form.open { display: flex; }
#tbl-tab-label-input, #tbl-tab-url-input { background: var(--panel); border: 1px solid #c9a24a33; border-radius: 8px; color: #fff; font-size: 12px; padding: 5px 10px; outline: none; }
#tbl-tab-label-input { width: 120px; }
#tbl-tab-url-input { flex: 1; }
#tbl-tab-save-btn { background: var(--gold); border: none; border-radius: 8px; color: var(--bg); font-size: 12px; font-weight: 700; padding: 5px 12px; cursor: pointer; }
#tbl-tab-cancel-btn { background: none; border: none; color: #888; font-size: 12px; cursor: pointer; }

/* FE: Custom Emoji */
#tbl-custom-emoji-panel { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 260; align-items: center; justify-content: center; }
#tbl-custom-emoji-panel.open { display: flex; }
#tbl-custom-emoji-card { background: var(--raised); border-radius: 16px; padding: 24px; width: min(420px, calc(100vw - 32px)); border: 1px solid rgba(255,255,255,0.08); }
.tbl-custom-emoji-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 12px 0; max-height: 200px; overflow-y: auto; }
.tbl-custom-emoji-item { position: relative; background: var(--input); border-radius: 8px; padding: 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.tbl-custom-emoji-item:hover { background: rgba(201,162,74,0.12); }
.tbl-custom-emoji-item img { width: 36px; height: 36px; object-fit: contain; border-radius: 4px; }
.tbl-custom-emoji-item span { font-size: 9px; color: var(--text-muted); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
.tbl-custom-emoji-del { position: absolute; top: 2px; right: 2px; background: none; border: none; color: #555; font-size: 10px; cursor: pointer; line-height: 1; padding: 0 2px; }
.tbl-custom-emoji-del:hover { color: #ff6666; }
#tbl-emoji-upload-area { border: 1px dashed #c9a24a44; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
#tbl-emoji-name-input { background: var(--input); border: 1px solid #c9a24a33; border-radius: 8px; color: #fff; font-size: 13px; padding: 6px 10px; outline: none; width: 100%; }
#tbl-emoji-file-input { font-size: 12px; color: #9a9387; }
#tbl-emoji-preview { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; display: none; background: var(--input); }
.tbl-emoji-upload-btn { background: var(--gold); border: none; border-radius: 8px; color: var(--bg); font-size: 13px; font-weight: 700; padding: 6px 14px; cursor: pointer; }
.tbl-ctx-emoji-custom { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 0; max-height: 80px; overflow-y: auto; }
.tbl-ctx-emoji-custom img { width: 24px; height: 24px; object-fit: contain; cursor: pointer; border-radius: 4px; }
.tbl-ctx-emoji-custom img:hover { background: rgba(201,162,74,0.2); }

/* FF: Business Inbox */
#tbl-inbox-section { border-top: 1px solid #c9a24a15; padding: 6px 0; }
#tbl-inbox-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 14px 2px; }
#tbl-inbox-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); cursor: pointer; }
#tbl-inbox-mark-read-btn { background: none; border: none; color: var(--text-muted); font-size: 10px; cursor: pointer; }
#tbl-inbox-mark-read-btn:hover { color: var(--gold); }
#tbl-inbox-list { padding: 2px 6px 6px; }
.tbl-inbox-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 8px; border-radius: 8px; cursor: pointer; }
.tbl-inbox-item:hover { background: rgba(201,162,74,0.08); }
.tbl-inbox-avatar { width: 32px; height: 32px; border-radius: 50%; background: #3a2f14; color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.tbl-inbox-info { flex: 1; min-width: 0; }
.tbl-inbox-name { font-size: 13px; color: #e0e6f0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl-inbox-preview { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.tbl-inbox-unread { background: var(--gold); color: var(--bg); border-radius: 10px; font-size: 10px; font-weight: 700; padding: 1px 6px; flex-shrink: 0; }
.tbl-client-tag-btn { display: block; width: 100%; text-align: left; background: none; border: none; color: #ccc; font-size: 14px; padding: 8px 10px; cursor: pointer; border-radius: 6px; }
.tbl-client-tag-btn:hover { background: #c9a24a15; color: #fff; }
#tbl-inbox-empty { color: var(--text-dim); font-size: 12px; text-align: center; padding: 12px 8px; }

/* FG: Multi-device Sync UI */
#settings-sec-devices { margin-top: 4px; }
.tbl-device-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid #c9a24a12; }
.tbl-device-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--input); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tbl-device-icon svg { width: 18px; height: 18px; color: var(--text-muted); }
.tbl-device-info { flex: 1; min-width: 0; }
.tbl-device-name { font-size: 13px; color: #e0e6f0; font-weight: 600; }
.tbl-device-sub { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.tbl-device-badge { display: inline-block; background: #c9a24a22; color: var(--gold); border: 1px solid #c9a24a44; border-radius: 10px; font-size: 10px; font-weight: 700; padding: 1px 7px; margin-left: 6px; }
.tbl-device-remove { background: none; border: 1px solid #4a2020; color: #ff8888; border-radius: 6px; font-size: 11px; padding: 3px 8px; cursor: pointer; flex-shrink: 0; }
.tbl-device-remove:hover { background: rgba(255,68,68,0.1); }
#tbl-remove-all-devices { background: none; border: 1px solid #4a2020; color: #ff8888; border-radius: 8px; font-size: 12px; padding: 6px 14px; cursor: pointer; margin-top: 8px; }
#tbl-remove-all-devices:hover { background: rgba(255,68,68,0.08); }
.tbl-login-history { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 8px; }
.tbl-login-history th { color: var(--text-muted); font-weight: 600; text-align: left; padding: 4px 6px; border-bottom: 1px solid #c9a24a18; }
.tbl-login-history td { color: #cfd3da; padding: 4px 6px; border-bottom: 1px solid #c9a24a0a; }

/* FH: AI Assistant Panel */
#tbl-ai-panel { display: none; width: 320px; border-left: 1px solid #c9a24a18; background: var(--sunken); flex-direction: column; flex-shrink: 0; overflow: hidden; }
#tbl-ai-panel.open { display: flex; }
#tbl-ai-panel-header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid #c9a24a15; flex-shrink: 0; }
#tbl-ai-panel-title { flex: 1; font-family: var(--font-heading); font-size: 14px; font-weight: 700; color: #e0e6f0; }
#tbl-ai-panel-close { background: none; border: none; color: var(--text-muted); font-size: 18px; cursor: pointer; }
#tbl-ai-panel-close:hover { color: #ff6666; }
.tbl-ai-tabs { display: flex; background: var(--input); border-radius: 8px; padding: 3px; margin: 10px 12px 0; flex-shrink: 0; }
.tbl-ai-tab { flex: 1; padding: 6px 4px; border: none; border-radius: 6px; background: none; color: var(--text-muted); font-size: 12px; font-weight: 600; cursor: pointer; }
.tbl-ai-tab.active { background: #30343b; color: var(--gold); }
.tbl-ai-content { flex: 1; overflow-y: auto; padding: 12px; }
.tbl-ai-tab-pane { display: none; flex-direction: column; gap: 10px; }
.tbl-ai-tab-pane.active { display: flex; }
.tbl-ai-result { background: var(--input); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: #cfd3da; line-height: 1.55; min-height: 60px; white-space: pre-wrap; word-break: break-word; }
.tbl-ai-result.empty { color: #555; font-style: italic; }
.tbl-ai-slider-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.tbl-ai-slider { flex: 1; accent-color: var(--gold); }
.tbl-ai-slider-val { color: var(--gold); font-weight: 700; min-width: 24px; text-align: right; }
.tbl-ai-send-btn { background: var(--gold); border: none; border-radius: 8px; color: var(--bg); font-size: 13px; font-weight: 700; padding: 8px 14px; cursor: pointer; }
.tbl-ai-send-btn:hover { background: #dab65a; }
.tbl-ai-insert-btn { background: var(--input); border: 1px solid #c9a24a44; border-radius: 8px; color: var(--gold); font-size: 12px; padding: 6px 12px; cursor: pointer; align-self: flex-start; }
.tbl-ai-insert-btn:hover { background: rgba(201,162,74,0.1); }
#tbl-ai-panel-footer { padding: 8px 12px; border-top: 1px solid #c9a24a15; font-size: 10px; color: #4a4a5a; text-align: center; flex-shrink: 0; }
.tbl-ai-question-input { background: var(--input); border: 1px solid #c9a24a33; border-radius: 8px; color: #fff; font-size: 13px; padding: 8px 10px; outline: none; width: 100%; resize: vertical; min-height: 60px; font-family: inherit; }
.tbl-ai-question-input:focus { border-color: #c9a24a66; }
.tbl-ai-thinking { color: var(--text-muted); font-size: 12px; font-style: italic; }

/* FI: Inline Translation */
.tbl-translation-box { background: #1a1208; border-left: 2px solid #c9a24a55; border-radius: 0 8px 8px 0; margin-top: 6px; padding: 6px 10px; font-size: 13px; color: #cfd3da; line-height: 1.5; position: relative; }
.tbl-translation-header { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--text-muted); margin-bottom: 4px; }
.tbl-translation-lang { font-weight: 700; color: var(--gold); }
.tbl-translation-toggle { background: none; border: none; color: var(--gold); font-size: 10px; cursor: pointer; padding: 0; text-decoration: underline; }
.tbl-translation-globe { font-size: 11px; color: var(--gold); vertical-align: middle; margin-left: 4px; }
#ctx-translate { color: #ccc; }
.ctx-translate-submenu { display: none; position: fixed; background: var(--panel); border: 1px solid #c9a24a22; border-radius: 10px; padding: 4px; z-index: 600; box-shadow: 0 8px 32px rgba(0,0,0,0.6); min-width: 160px; }
.ctx-translate-submenu.open { display: block; }
.ctx-translate-lang-btn { display: block; width: 100%; text-align: left; background: none; border: none; color: #ccc; font-size: 13px; padding: 7px 12px; cursor: pointer; border-radius: 6px; }
.ctx-translate-lang-btn:hover { background: #c9a24a15; color: #fff; }

/* ── V3.0 FEATURE A: Collaborative Canvas ── */
#tbl-canvas-panel { display: none; }
#tbl-canvas-panel.open { display: flex; }
#tbl-canvas-textarea { caret-color: var(--gold); }
#tbl-canvas-textarea.mono { font-family: 'Courier New', Courier, monospace; }
#tbl-canvas-textarea:focus { outline: none; }
#tbl-canvas-last-edited { font-style: italic; }
#tbl-canvas-append-toggle.active, #tbl-canvas-mono-toggle.active { color: var(--gold); border-color: #c9a24a55; }

/* ── V3.0 FEATURE B: Widgets ── */
#tbl-widget-modal { display: none; }
#tbl-widget-modal.open { display: flex; }
#tbl-widget-frame-overlay { display: none; }
#tbl-widget-frame-overlay.open { display: flex; }
.tbl-widget-preset-btn:hover { border-color: #c9a24a88; background: #1e2028; }
.tbl-room-tab-widget { background: linear-gradient(135deg, #c9a24a22, var(--input)); border-color: #c9a24a44; }
.tbl-room-tab-widget .tbl-tab-icon-bg { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; font-size: 11px; font-weight: 700; margin-right: 4px; }

/* ── V3.0 FEATURE C: Room Info Sidebar / Shifts ── */
#tbl-room-info-sidebar { display: none; }
#tbl-room-info-sidebar.open { display: flex; }
#tbl-add-shift-form.visible { display: flex; }
.tbl-shift-card { background: var(--input); border-radius: 10px; padding: 12px 14px; border-left: 3px solid var(--gold); }
.tbl-shift-card-title { font-size: 14px; font-weight: 700; color: #e0e6f0; margin-bottom: 4px; }
.tbl-shift-card-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.tbl-shift-countdown { font-size: 12px; font-weight: 700; color: var(--gold); margin-bottom: 8px; }
.tbl-shift-avatars { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.tbl-shift-avatar { width: 24px; height: 24px; border-radius: 50%; background: #c9a24a33; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--gold); border: 1px solid #c9a24a44; }
.tbl-shift-notify-btn { background: none; border: 1px solid #c9a24a44; border-radius: 6px; color: var(--gold); font-size: 11px; padding: 4px 10px; cursor: pointer; }
.tbl-shift-notify-btn:hover { background: #c9a24a15; }
/* #tbl-my-shifts-nav-btn pill styles removed — the button moved into the hamburger menu and is
   styled by .app-menu-item (Leo 2026-07-06 sidebar cleanup). */

/* ── V3.0 FEATURE D: Enterprise Admin Tab ── */
.tbl-enterprise-section { background: var(--input); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.tbl-enterprise-section-title { font-size: 13px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; }
.tbl-enterprise-field-label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.tbl-enterprise-copy-row { display: flex; align-items: center; gap: 8px; background: var(--sunken); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; }
.tbl-enterprise-copy-val { flex: 1; font-size: 12px; color: #cfd3da; font-family: monospace; word-break: break-all; }
.tbl-enterprise-copy-btn { background: #c9a24a22; border: 1px solid #c9a24a44; border-radius: 6px; color: var(--gold); font-size: 11px; padding: 3px 10px; cursor: pointer; white-space: nowrap; }
.tbl-enterprise-copy-btn:hover { background: #c9a24a33; }
.tbl-enterprise-note { font-size: 12px; color: #555; line-height: 1.5; margin-top: 6px; }
.tbl-enterprise-token-display { font-family: monospace; font-size: 12px; color: #cfd3da; background: var(--sunken); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; word-break: break-all; min-height: 36px; }
.tbl-scim-token-masked { color: #555; letter-spacing: 0.1em; }

/* ── V3.0 FEATURE E: Developer API Modal ── */
#tbl-dev-api-modal { display: none; }
#tbl-dev-api-modal.open { display: flex; }

/* ── V3.1 Privacy: Relay calls (TURN) + Sealed sender ── */
.tbl-privacy-section { background: var(--input); border-radius: 10px; padding: 14px 16px; margin: 16px 0; }
.tbl-privacy-section-title { font-size: 13px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; }
.tbl-privacy-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tbl-privacy-toggle-label { font-size: 14px; color: #e0e6f0; font-weight: 600; }
.tbl-privacy-toggle-note { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-top: 6px; }
.tbl-privacy-switch { position: relative; flex-shrink: 0; width: 42px; height: 24px; border-radius: 50px; background: #2c2f36; border: 1px solid #3a3e47; cursor: pointer; transition: background 0.15s ease; padding: 0; }
.tbl-privacy-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-muted); transition: transform 0.15s ease, background 0.15s ease; }
.tbl-privacy-switch.tbl-on { background: #c9a24a33; border-color: var(--gold); }
.tbl-privacy-switch.tbl-on::after { transform: translateX(18px); background: var(--gold); }
#tbl-sealed-indicator { display: none; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 50px; background: #c9a24a22; border: 1px solid #c9a24a44; color: var(--gold); font-size: 11px; font-weight: 700; }
#tbl-sealed-indicator.tbl-visible { display: inline-flex; }
#tbl-sealed-indicator svg { display: block; }


/* ════════════════════════════════════════════════════════════════════════
   TABLET + TOUCH PASS (2026-06-22)
   The two-pane shell already holds down to 641px (the single-pane collapse is
   <=640 only), so tablets get the iPad-style side-by-side automatically. These
   rules refine ergonomics: a roomier sidebar at tablet widths, plus finger-
   friendly tap targets and no iOS zoom-on-focus on ANY touch device. The
   tablet range is mutually exclusive with the <=640 phone block; the coarse-
   pointer block layers on top of both.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 641px) and (max-width: 1024px) {
  #sidebar     { width: 288px; }      /* a touch roomier than the 260px desktop rail */
  .msg-bubble  { max-width: 76%; }
}
@media (pointer: coarse) {
  .chat-icon-btn       { min-height: 44px; min-width: 44px; }  /* WCAG 2.5.5 AAA 44px tap target */
  #sidebar-compose-btn { width: 44px; height: 44px; }
  .app-menu-item       { min-height: 44px; }
  .room-item           { padding: 11px 12px; }            /* ~44px row for comfortable thumbing */
  #mobile-back-btn     { min-width: 44px; min-height: 44px; }
  .form-input          { font-size: 16px; }               /* 16px stops iOS Safari zooming in on focus */
  /* EVERY text box, the message box included: iOS zooms the whole page in on any field under
     16px and stays zoomed, which pushed the chat off both sides of the iPhone (audit 2026-10-12).
     !important beats the #msg-input size rules and the 2.1.0 theme scales. */
  input, textarea, select, #msg-input { font-size: 16px !important; }
}

/* Shared media gallery */
#media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-height: 46vh; overflow-y: auto; }
.media-tile { border: none; padding: 0; background: #101114; border-radius: 10px; overflow: hidden; aspect-ratio: 1; cursor: pointer; }
.media-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
#media-files { max-height: 22vh; overflow-y: auto; margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.media-file-row { text-align: left; background: rgba(201,162,74,0.06); border: 1px solid rgba(201,162,74,0.18); border-radius: 10px; color: #d6d1c4; font-size: 12.5px; padding: 10px 12px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Presence dot on the chat header avatar */
#chat-peer-avatar { position: relative; }
.presence-dot { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: #3fbf6b; border: 2px solid var(--bg); }

/* Telegram-style prominent New Message pill above the tab bar */
#new-msg-pill { margin: 8px 14px 6px; padding: 13px; border: none; border-radius: 24px; background: linear-gradient(180deg,#c9a24a,#a5842f); color: #1a1408; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(201,162,74,0.3); }
#new-msg-pill:hover { filter: brightness(1.06); }
/* VPN self-hosted licensing cards */
.tbl-lic-grid { display: flex; gap: 10px; }
.tbl-lic-card { flex: 1; background: rgba(255,255,255,0.03); border: 1px solid rgba(201,162,74,0.22); border-radius: 14px; padding: 14px 12px; position: relative; }
.tbl-lic-card--hero { border-color: rgba(201,162,74,0.55); background: rgba(201,162,74,0.08); }
.tbl-lic-badge { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: var(--gold); color: #1a1408; font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 8px; white-space: nowrap; }
.tbl-lic-name { font-family: var(--font-heading); font-size: 18px; font-weight: 700; color: #c9a24a; }
.tbl-lic-sub { color: #9a958a; font-size: 11.5px; margin-bottom: 8px; }
.tbl-lic-feat { list-style: none; padding: 0; margin: 0; }
.tbl-lic-feat li { color: #cbc6ba; font-size: 12px; line-height: 1.7; padding-left: 15px; position: relative; }
.tbl-lic-feat li::before { content: '\2713'; color: var(--gold); position: absolute; left: 0; }
/* Verified account badge (official Wolf Pak / staff) */
.verified-badge { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; margin-left:6px; border-radius:50%; background:var(--gold); color:#1a1408; font-size:10px; font-weight:900; vertical-align:middle; }

/* UI refresh: consistent controls and measured, bounded menus. No account or crypto changes. */
body { color: var(--text); line-height: 1.5; }
button, input, textarea, select { font-family: inherit; }
button { line-height: 1.35; }
button:disabled { cursor: not-allowed; }
#sidebar, #main { min-height: 0; }
#sidebar { flex-shrink: 0; border-color: rgba(255,255,255,.08); }
#sidebar-header { padding: 20px 16px 16px; border-color: rgba(255,255,255,.08); }
#sidebar-header-inner { gap: 12px; }
#app-title { font-size: 16px; font-weight: 650; line-height: 1.4; }
#user-info { font-size: 12px; color: var(--text-muted); }
#sidebar-compose-btn, #sidebar-lock-btn, #sidebar-search-btn,
.chat-icon-btn { border-radius: 10px; width: 40px; height: 40px; }
#room-list { padding: 8px 0; overflow-x: hidden; min-height: 0; }
.room-item { padding: 12px; margin: 3px 8px; border-radius: 12px; gap: 12px; }
.room-item.active, .room-item.active .room-swipe-content { background: #2a2924; }
.room-item:hover, .room-item:hover .room-swipe-content { background: #24282e; }
.room-info, .room-toprow, .room-botrow { min-width: 0; }
.room-name { font-size: 14px; font-weight: 600; line-height: 1.5; }
.room-preview, .room-sub { font-size: 12px; color: var(--text-muted); line-height: 1.6; }
.room-time { color: var(--text-muted); }
.room-kebab { flex: 0 0 auto; }
#sidebar-footer { padding: 12px 8px; border-color: rgba(255,255,255,.08); }
.sb-icon-btn { border-radius: 10px; }
#chat-header { padding: 16px 20px; gap: 12px; background: var(--panel-3); border-color: rgba(255,255,255,.08); }
#chat-title { font-size: 17px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#chat-title-block, #chat-title-text-col { min-width: 0; }
#chat-header-right { gap: 4px; flex: 0 0 auto; }
#messages { padding: 24px; gap: 12px; min-height: 0; overscroll-behavior: contain; }
.msg-bubble { padding: 12px 16px 10px; border-radius: 16px; line-height: 1.6; box-shadow: none; }
.msg-wrap:not(.mine) .msg-bubble { background: var(--panel); }
.msg-wrap.mine .msg-bubble { background: var(--bubble-mine, #393224); }
.msg-body { overflow-wrap: anywhere; }
.msg-time { font-size: 11px; color: #b3b6bd; }
#input-area { padding: 12px 20px; gap: 10px; background: var(--panel-3); border-color: rgba(255,255,255,.08); }
#msg-input { min-width: 0; min-height: 46px; padding: 12px 14px; border-radius: 12px; border-color: rgba(255,255,255,.12); }
#send-btn { width: 46px; height: 46px; border-radius: 14px; }
.form-input { min-width: 0; max-width: 100%; border-radius: 10px; line-height: 1.5; }
select.form-input { text-overflow: ellipsis; }

#room-menu, #context-menu, #chat-overflow-menu, #send-hold-menu, #app-menu, #comp-actions-menu,
.ctx-translate-submenu {
  background: var(--raised); border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px; padding: 6px; box-shadow: 0 16px 48px rgba(0,0,0,.45);
  min-width: min(220px, calc(100vw - 24px)); max-width: min(300px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px); overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain; scrollbar-width: thin;
}
/* These menus belong above the dialog that invoked them. Security overlays remain higher. */
#room-menu, #chat-overflow-menu, #comp-actions-menu, #send-hold-menu { z-index: 500; }
#chat-overflow-menu, #comp-actions-menu, #send-hold-menu, #app-menu {
  position: fixed !important; right: auto; bottom: auto;
}
.ctx-action, #room-menu .ctx-action, .chat-menu-row, .ctx-translate-lang-btn,
.app-menu-item, #comp-actions-menu .comp-action {
  min-height: 42px; padding: 10px 12px; font-size: 14px; line-height: 1.5;
  color: var(--text); white-space: normal; overflow-wrap: anywhere; border-radius: 8px;
}
.ctx-action span, .chat-menu-row span { min-width: 0; }
.ctx-action:hover, #room-menu .ctx-action:hover, .chat-menu-row:hover, .ctx-translate-lang-btn:hover {
  background: var(--tb-row-hover, var(--panel-2)); color: var(--text);
}
.ctx-action:focus-visible, .chat-menu-row:focus-visible { background: #c9a24a14; }
#ctx-delete { color: #ff9292; }
#ctx-emoji-bar { display: flex; flex-wrap: wrap; gap: 2px; max-width: 100%; padding: 4px; }
.ctx-emoji-btn { flex: 0 0 auto; width: 34px; height: 36px; font-size: 20px; }

#settings-modal { padding: 20px; background: rgba(8,10,13,.76); }
.settings-card, html.app-shell .settings-card {
  /* Overrides the legacy inline width/height which clipped cards in embedded windows. */
  width: min(680px, 100%) !important; max-width: 100%; height: auto;
  max-height: calc(100dvh - 40px) !important; padding: 24px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12); background: var(--raised);
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin;
}
html.app-shell #settings-modal { align-items: center; justify-content: center; background: rgba(8,10,13,.76); }
.settings-card > div:first-child { min-width: 0; }
#settings-modal .settings-card { padding-top: 0; }
.settings-header { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 64px; box-sizing: border-box; padding: 10px 0; margin-bottom: 10px; background: var(--raised); }
.settings-header-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.settings-dismiss { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: var(--raised); color: var(--text); cursor: pointer; }
.settings-dismiss:hover { background: var(--input); }
.settings-dismiss:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.settings-card .settings-index { top: 64px; }
.settings-title { font-size: 24px; font-weight: 650; line-height: 1.35; letter-spacing: -.4px; }
#settings-home-btn { min-height: 40px; color: var(--text) !important; border-color: rgba(255,255,255,.18) !important; }
#settings-home-btn img { width: 20px !important; height: 20px !important; }
.settings-index { top: -24px; gap: 4px; margin: 12px -4px 20px; padding: 10px 4px; scrollbar-width: thin; border-color: rgba(255,255,255,.1); }
.settings-index-chip { min-height: 40px; border: none; border-radius: 8px; background: transparent; color: var(--text-muted); padding: 8px 12px; font-size: 13px; }
.settings-index-chip.active { background: #c9a24a1a; color: #e5c370; box-shadow: inset 0 -2px var(--gold); }
.settings-index-select { display: none; width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; background: var(--input); color: var(--text); font-size: 14px; }
.settings-section-label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--text); text-transform: none; letter-spacing: 0; margin: 28px 0 8px; padding-bottom: 12px; border-color: rgba(255,255,255,.1); }
.settings-section-label img { width: 22px !important; height: 22px !important; margin-right: 0 !important; filter: none !important; object-fit: contain; }
.settings-toggle { padding: 14px 0; min-height: 54px; gap: 20px; border-bottom: 1px solid rgba(255,255,255,.06); color: var(--text); }
.settings-toggle span { min-width: 0; overflow-wrap: anywhere; }
.settings-toggle input[type=checkbox], .settings-toggle input[type=radio] { width: 22px; height: 22px; }
.settings-note { color: var(--text-muted); line-height: 1.65; overflow-wrap: anywhere; }
.settings-card [id^=settings-sec-] { scroll-margin-top: 140px; }
.settings-card button, .settings-card select { max-width: 100%; }
.settings-card input:not([type=checkbox]):not([type=radio]) { max-width: 100%; }
.settings-card pre { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
.settings-card .form-input { margin-top: 8px; }
.settings-card { overflow-wrap: anywhere; }
/* Security lock screens and the full-screen incoming call UI retain their own stacking. */

@media (min-width: 900px) { #sidebar { width: 320px; } }
@media (min-width: 641px) and (max-width: 899px) {
  #sidebar { width: 260px; }
  #chat-header { padding: 12px; gap: 8px; flex-wrap: wrap; }
  #chat-header-right { margin-left: auto; }
  #messages { padding: 16px; }
}
@media (max-width: 640px) {
  #sidebar { width: 100%; }
  #sidebar-header { padding: 16px; }
  #chat-header { padding: 12px; gap: 8px; flex-wrap: wrap; }
  #chat-title { font-size: 16px; }
  #messages { padding: 16px 12px; gap: 10px; }
  .msg-bubble { padding: 10px 12px 8px; max-width: 88%; }
  #input-area { padding: 10px 12px max(10px, env(safe-area-inset-bottom)); gap: 6px; }
  #send-btn { width: 42px; height: 42px; }
  #settings-modal { padding: 12px; }
  .settings-card, html.app-shell .settings-card {
    width: 100% !important; max-height: calc(100dvh - 24px) !important;
    padding: 18px; border-radius: 16px;
  }
  .settings-index { top: -18px; }
  .settings-index-chip { display: none; }
  .settings-index-select { display: block; }
  .settings-title { font-size: 22px; }
  .settings-toggle { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .msg-bubble, .room-item, button { transition: none; }
}

/* Message actions stay available without hover, including touch and keyboard input. */
.msg-ctx-btn { font: inherit; font-size: 22px; color: var(--gold); border-radius: 12px; }
.msg-ctx-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.msg-swipe-hint { position: absolute; inset-inline-end: 56px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--gold); pointer-events: none; opacity: 0; }
.msg-wrap:not(.mine) .msg-swipe-hint { inset-inline-end: auto; inset-inline-start: 12px; }
.message-swiping .msg-swipe-hint { opacity: 1; }
.message-swiping .msg-bubble { position: relative; z-index: 1; transition: none; }
.ctx-action.ctx-danger { color: var(--menu-danger, #f3aaa4); }
/* Touch Safari keeps :hover after a press. White hover text erased Reply/Edit on light menus. */
html[data-theme="light-blue"] #context-menu, html[data-theme="cream-gold"] #context-menu { --menu-danger: #b3261e; }
#context-menu .ctx-danger, #context-menu .ctx-danger:hover { color: var(--menu-danger, #f3aaa4); }

/* ── 2.0.8 Telegram-style messages (Leo 2026-10-12: "look how nice Telegram looks") ──────────
   Snug bubbles, time + check tucked inside bottom-right, and no "..." box beside every message:
   it appears only on mouse hover/keyboard focus. Touch screens show a quiet "..." beside every
   message (2.4.0, see below), and long-press still opens the same menu. */
#messages { padding: 14px 16px; gap: 3px; }
.msg-bubble { max-width: min(72%, 560px); padding: 6px 10px 5px; border-radius: 12px; line-height: 1.38; box-shadow: 0 1px 1px rgba(0,0,0,0.3); }
.msg-wrap:not(.mine) .msg-bubble { border-bottom-left-radius: 4px; }
.msg-wrap.mine .msg-bubble { border-bottom-right-radius: 4px; }
.msg-meta { margin-top: 1px; gap: 4px; }
.msg-time { opacity: 1; max-width: none; font-size: 11px; color: rgba(255,255,255,0.55); }
.msg-ctx-btn { display: none; width: 28px; height: 28px; font-size: 16px; border-radius: 50%; background: transparent; border: none; color: #8a8576; align-self: center; }
.msg-ctx-btn:hover { background: rgba(255,255,255,0.08); color: var(--gold); }
@media (hover: hover) { .msg-wrap:hover .msg-ctx-btn { display: flex; } }
.msg-wrap:focus-within .msg-ctx-btn { display: flex; }
/* Phones (2.4.0, Leo's decision 5, audit app2 #3 / layout-mobile #6): the "..." was hidden on every
   touch screen, so long-press was the only way to the menu (Copy, Reply, Delete), and nobody could
   see that. Now a quiet "..." sits beside each message. The tap area is a full 44 px square; the
   negative side margins pull it in, so it takes about 40 px of the row and never covers the
   bubble. Theme colours, so it reads in every theme. Text in it can't be selected, so a long press
   there never starts the phone's own text selection. */
@media (hover: none) {
  .msg-wrap .msg-ctx-btn {
    display: flex; flex: none; align-items: center; justify-content: center; align-self: center;
    width: 44px; height: 44px; margin: 0 -6px; padding: 0 0 4px;
    border: 0; border-radius: 50%; background: transparent; color: var(--tb-text-3, #8a8576);
    font-size: 22px; line-height: 1; letter-spacing: 0;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  .msg-wrap .msg-ctx-btn:hover { background: transparent; color: var(--tb-text-3, #8a8576); }
  .msg-wrap .msg-ctx-btn:active { background: var(--tb-accent-soft, rgba(201,162,74,0.13)); color: var(--tb-accent, var(--gold)); }
}

/* Read ticks (Leo 2026-10-12): single check = sent, double check = read by the other person. */
.msg-wrap.mine .msg-time.read::after {
  content: ''; display: inline-block; width: 16px; height: 10px; margin-left: 4px; vertical-align: -1px;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 11' fill='none' stroke='%23ffffff' stroke-opacity='0.75' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6l3.2 3.2L10.5 2.5'/%3E%3Cpath d='M6.5 6l3.2 3.2L16 2.5'/%3E%3C/svg%3E");
}

/* Status ring (Leo 2026-10-12): replaces the gold Founder ring on chat avatars. */
.room-avatar.ring-online, #chat-peer-avatar.ring-online { border: none !important; box-shadow: 0 0 0 2px var(--bg, #0f1013), 0 0 0 4px #3fb950 !important; }
.room-avatar.ring-away, #chat-peer-avatar.ring-away { border: none !important; box-shadow: 0 0 0 2px var(--bg, #0f1013), 0 0 0 4px #6e7681 !important; }
/* ══════════════════════════════════════════════════════════════════════════════════════════
   2.1.0 REDESIGN + COLOR THEMES (Leo 2026-10-12 redesign)
   Five themes as custom-property sets on html[data-theme]: dark-gold (default), light-blue,
   cream-gold, midnight-blue, midnight-purple. The <head> script sets data-theme before first
   paint (localStorage "tabella.theme"); Settings > Appearance > Theme switches it (app.js TB_THEMES).
   Wide screens (>=761px) get the top bar + left icon rail layout; phones keep their layout and
   only pick up the theme colors. Wallpapers are inline SVG (no external hosts).
   --tb-* = new theme tokens. The older tokens (--bg, --panel, --gold, ...) are re-pointed per
   theme so the rest of the app (menus, settings, dialogs) follows the theme too.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
:root, html[data-theme="dark-gold"] {
  --tbwp-dark-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='%23ffffff' fill-opacity='0.032'%3E%3Cg transform='translate(40 50) rotate(-18) scale(1.05) translate(-20 -20)'%3E%3Cellipse cx='20' cy='28' rx='9.5' ry='8'/%3E%3Cellipse cx='8.5' cy='16' rx='3.6' ry='4.8' transform='rotate(-22 8.5 16)'/%3E%3Cellipse cx='15.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='24.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='31.5' cy='16' rx='3.6' ry='4.8' transform='rotate(22 31.5 16)'/%3E%3C/g%3E%3Cg transform='translate(175 30) rotate(14) scale(0.8) translate(-20 -20)'%3E%3Cellipse cx='20' cy='28' rx='9.5' ry='8'/%3E%3Cellipse cx='8.5' cy='16' rx='3.6' ry='4.8' transform='rotate(-22 8.5 16)'/%3E%3Cellipse cx='15.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='24.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='31.5' cy='16' rx='3.6' ry='4.8' transform='rotate(22 31.5 16)'/%3E%3C/g%3E%3Cg transform='translate(120 140) rotate(8) scale(1.15) translate(-20 -20)'%3E%3Cellipse cx='20' cy='28' rx='9.5' ry='8'/%3E%3Cellipse cx='8.5' cy='16' rx='3.6' ry='4.8' transform='rotate(-22 8.5 16)'/%3E%3Cellipse cx='15.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='24.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='31.5' cy='16' rx='3.6' ry='4.8' transform='rotate(22 31.5 16)'/%3E%3C/g%3E%3Cg transform='translate(225 175) rotate(-24) scale(0.9) translate(-20 -20)'%3E%3Cellipse cx='20' cy='28' rx='9.5' ry='8'/%3E%3Cellipse cx='8.5' cy='16' rx='3.6' ry='4.8' transform='rotate(-22 8.5 16)'/%3E%3Cellipse cx='15.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='24.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='31.5' cy='16' rx='3.6' ry='4.8' transform='rotate(22 31.5 16)'/%3E%3C/g%3E%3Cg transform='translate(45 205) rotate(22) scale(0.85) translate(-20 -20)'%3E%3Cellipse cx='20' cy='28' rx='9.5' ry='8'/%3E%3Cellipse cx='8.5' cy='16' rx='3.6' ry='4.8' transform='rotate(-22 8.5 16)'/%3E%3Cellipse cx='15.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='24.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='31.5' cy='16' rx='3.6' ry='4.8' transform='rotate(22 31.5 16)'/%3E%3C/g%3E%3Cg transform='translate(250 85) rotate(30) scale(0.7) translate(-20 -20)'%3E%3Cellipse cx='20' cy='28' rx='9.5' ry='8'/%3E%3Cellipse cx='8.5' cy='16' rx='3.6' ry='4.8' transform='rotate(-22 8.5 16)'/%3E%3Cellipse cx='15.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='24.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='31.5' cy='16' rx='3.6' ry='4.8' transform='rotate(22 31.5 16)'/%3E%3C/g%3E%3Cg transform='translate(-10 85) rotate(30) scale(0.7) translate(-20 -20)'%3E%3Cellipse cx='20' cy='28' rx='9.5' ry='8'/%3E%3Cellipse cx='8.5' cy='16' rx='3.6' ry='4.8' transform='rotate(-22 8.5 16)'/%3E%3Cellipse cx='15.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='24.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='31.5' cy='16' rx='3.6' ry='4.8' transform='rotate(22 31.5 16)'/%3E%3C/g%3E%3Cg transform='translate(175 255) rotate(14) scale(0.8) translate(-20 -20)'%3E%3Cellipse cx='20' cy='28' rx='9.5' ry='8'/%3E%3Cellipse cx='8.5' cy='16' rx='3.6' ry='4.8' transform='rotate(-22 8.5 16)'/%3E%3Cellipse cx='15.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='24.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='31.5' cy='16' rx='3.6' ry='4.8' transform='rotate(22 31.5 16)'/%3E%3C/g%3E%3Cg transform='translate(175 -5) rotate(14) scale(0.8) translate(-20 -20)'%3E%3Cellipse cx='20' cy='28' rx='9.5' ry='8'/%3E%3Cellipse cx='8.5' cy='16' rx='3.6' ry='4.8' transform='rotate(-22 8.5 16)'/%3E%3Cellipse cx='15.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='24.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='31.5' cy='16' rx='3.6' ry='4.8' transform='rotate(22 31.5 16)'/%3E%3C/g%3E%3C/g%3E%3Cg stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1.6'%3E%3Cpath transform='translate(80 82) scale(1.0)' d='M0 22 L9 10 L14 15 L22 3 L31 15 L35 11 L44 22' fill='none' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath transform='translate(190 112) scale(0.9)' d='M0 22 L9 10 L14 15 L22 3 L31 15 L35 11 L44 22' fill='none' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath transform='translate(95 228) scale(1.1)' d='M0 22 L9 10 L14 15 L22 3 L31 15 L35 11 L44 22' fill='none' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath transform='translate(5 135) scale(0.8)' d='M0 22 L9 10 L14 15 L22 3 L31 15 L35 11 L44 22' fill='none' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath transform='translate(205 225) scale(0.7)' d='M0 22 L9 10 L14 15 L22 3 L31 15 L35 11 L44 22' fill='none' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  --tb-page: #101114; --tb-topbar: #111316; --tb-rail: #111316; --tb-list: #13151a;
  --tb-chat: #121418; --tb-header: #121418; --tb-composer: #121418;
  --tb-line: rgba(255,255,255,0.07);
  --tb-text: #eef0f3; --tb-text-2: #c9ccd2; --tb-text-3: #8e939c;
  --tb-accent: #e2b13c; --tb-accent-ink: #1a1406; --tb-accent-soft: rgba(226,177,60,0.13);
  --tb-send-bg: #e2b13c; --tb-send-ink: #1a1406;
  --tb-pill-bg: transparent; --tb-pill-border: rgba(255,255,255,0.13);
  --tb-pill-active-bg: #e2b13c; --tb-pill-active-ink: #1a1406;
  --tb-badge-bg: #e2b13c; --tb-badge-ink: #1a1406;
  --tb-row-hover: #1a1d22; --tb-row-active: #1f2228; --tb-row-active-bar: transparent;
  --tb-bubble-in: #23262c; --tb-bubble-in-text: #eef0f3; --tb-bubble-in-border: rgba(255,255,255,0.05);
  --tb-bubble-out: linear-gradient(180deg, #6b5627 0%, #594620 100%); --tb-bubble-out-text: #fbf5e6;
  --tb-tick: #f0c95e;
  --tb-day-bg: #1b1e23; --tb-day-text: #d8dbe0;
  --tb-input-bg: #16181c; --tb-input-border: rgba(255,255,255,0.11); --tb-search-bg: #181a1f;
  --tb-rail-cut: #2a2618; --tb-mark: #8d8a82;
  --tb-wallpaper: var(--tbwp-dark-gold) 0 0 / 260px 260px repeat, #121418;
}
html[data-theme="light-blue"] {
  --tbwp-light-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMax slice'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f4f7fa'/%3E%3Cstop offset='1' stop-color='%23e9eef3'/%3E%3C/linearGradient%3E%3ClinearGradient id='m' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f3f6f9' stop-opacity='0'/%3E%3Cstop offset='.55' stop-color='%23f3f6f9' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23f3f6f9' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1600' height='1000' fill='url(%23s)'/%3E%3Cpath d='M0 1000 L0 395 L37 304 L87 210 L141 293 L195 415 L245 351 L309 293 L380 356 L459 409 L538 334 L621 220 L656 266 L699 342 L746 287 L783 259 L845 312 L911 362 L945 336 L990 294 L1048 341 L1103 391 L1157 280 L1204 189 L1274 290 L1331 372 L1375 264 L1432 163 L1503 265 L1576 406 L1645 316 L1600 194 L1600 1000 Z' fill='%23e2e8ee'/%3E%3Cpath d='M0 1000 L0 522 L53 456 L104 392 L160 440 L217 477 L249 444 L277 381 L331 456 L389 521 L412 452 L446 406 L469 440 L505 489 L539 425 L587 363 L639 433 L681 481 L716 458 L755 411 L811 462 L877 530 L914 460 L949 404 L974 460 L1004 512 L1065 451 L1126 382 L1183 468 L1228 536 L1284 451 L1344 371 L1368 421 L1406 498 L1439 454 L1476 438 L1497 480 L1531 530 L1561 436 L1588 363 L1622 429 L1600 517 L1600 1000 Z' fill='%23dde4eb'/%3E%3Crect y='380' width='1600' height='200' fill='url(%23m)'/%3E%3Cpath fill='%23d9e0e7' d='M1372 578L1386 621L1380 621L1391 659L1383 659L1394 697L1351 697L1361 659L1353 659L1365 621L1358 621ZM773 603L781 626L778 626L784 647L780 647L785 668L762 668L767 647L763 647L769 626L766 626ZM542 650L551 678L547 678L554 702L549 702L556 726L528 726L535 702L530 702L537 678L533 678ZM245 675L252 697L249 697L254 716L251 716L256 736L234 736L239 716L235 716L241 697L238 697ZM846 635L854 659L851 659L857 681L853 681L859 703L834 703L840 681L835 681L842 659L838 659ZM24 647L35 680L30 680L39 709L33 709L41 738L8 738L16 709L10 709L18 680L14 680ZM1396 579L1408 616L1402 616L1412 648L1405 648L1414 681L1378 681L1386 648L1380 648L1389 616L1384 616ZM581 652L589 677L586 677L592 699L588 699L594 722L569 722L575 699L570 699L577 677L573 677ZM853 580L866 618L860 618L870 652L863 652L873 686L834 686L843 652L837 652L847 618L841 618ZM346 630L358 669L353 669L363 704L356 704L365 739L326 739L336 704L329 704L339 669L333 669ZM1378 617L1391 656L1385 656L1395 691L1388 691L1398 725L1359 725L1368 691L1361 691L1371 656L1366 656ZM1193 628L1202 654L1198 654L1205 678L1200 678L1207 701L1180 701L1187 678L1182 678L1189 654L1185 654ZM563 600L570 623L567 623L573 642L569 642L574 662L552 662L557 642L553 642L559 623L556 623ZM438 640L447 667L443 667L450 691L445 691L452 715L425 715L431 691L426 691L433 667L430 667ZM1549 648L1559 679L1554 679L1562 707L1557 707L1564 735L1533 735L1541 707L1535 707L1543 679L1539 679ZM1600 572L1614 614L1608 614L1619 652L1611 652L1621 689L1579 689L1589 652L1582 652L1593 614L1587 614ZM342 602L350 629L346 629L353 652L348 652L355 676L328 676L335 652L330 652L337 629L333 629ZM315 635L326 670L321 670L331 701L324 701L333 732L298 732L306 701L300 701L309 670L304 670ZM1358 623L1369 655L1364 655L1372 684L1367 684L1374 712L1342 712L1350 684L1344 684L1353 655L1348 655ZM1291 648L1299 671L1296 671L1302 692L1298 692L1303 713L1280 713L1285 692L1281 692L1287 671L1284 671ZM1472 613L1484 652L1479 652L1489 686L1482 686L1491 720L1453 720L1462 686L1455 686L1465 652L1460 652ZM764 652L772 678L769 678L775 701L771 701L777 723L751 723L757 701L753 701L759 678L756 678ZM525 630L538 669L532 669L542 703L535 703L545 738L506 738L515 703L508 703L518 669L513 669ZM629 652L639 682L635 682L642 709L637 709L644 736L614 736L621 709L616 709L624 682L619 682ZM1169 600L1177 625L1173 625L1180 648L1175 648L1181 670L1156 670L1162 648L1158 648L1164 625L1161 625ZM228 610L241 651L235 651L246 688L239 688L248 725L207 725L217 688L210 688L220 651L215 651ZM220 629L232 668L227 668L237 703L230 703L239 738L200 738L209 703L202 703L213 668L207 668ZM1058 623L1067 652L1063 652L1071 678L1066 678L1073 704L1043 704L1050 678L1045 678L1053 652L1049 652ZM195 677L202 699L199 699L204 718L201 718L206 738L184 738L189 718L185 718L191 699L188 699ZM1045 643L1056 676L1051 676L1060 705L1054 705L1062 735L1029 735L1037 705L1031 705L1040 676L1035 676ZM691 614L704 654L699 654L709 690L702 690L712 726L671 726L681 690L674 690L684 654L679 654ZM326 608L335 635L331 635L338 659L333 659L340 683L313 683L319 659L314 659L321 635L317 635ZM374 586L385 620L381 620L390 650L383 650L392 681L357 681L366 650L359 650L368 620L364 620ZM667 665L675 689L672 689L678 711L674 711L679 733L655 733L661 711L656 711L663 689L659 689ZM560 619L570 651L566 651L574 679L568 679L576 707L544 707L552 679L546 679L555 651L550 651ZM1463 648L1473 679L1469 679L1477 706L1471 706L1478 733L1448 733L1455 706L1450 706L1458 679L1453 679ZM803 610L813 643L809 643L817 672L811 672L819 702L786 702L794 672L788 672L797 643L792 643ZM11 588L21 619L16 619L24 647L19 647L26 675L-5 675L3 647L-3 647L5 619L1 619ZM-14 566L-1 605L-7 605L4 639L-3 639L6 674L-33 674L-24 639L-31 639L-21 605L-26 605ZM757 601L768 638L763 638L773 671L766 671L775 705L738 705L747 671L740 671L750 638L745 638ZM515 613L525 646L521 646L529 675L523 675L531 704L498 704L506 675L500 675L509 646L504 646ZM1266 638L1274 662L1271 662L1277 684L1272 684L1278 705L1254 705L1260 684L1256 684L1262 662L1259 662ZM388 645L396 673L392 673L400 697L395 697L401 722L374 722L380 697L375 697L383 673L379 673ZM813 627L823 661L819 661L827 691L821 691L830 721L796 721L804 691L798 691L807 661L802 661ZM1476 622L1486 654L1482 654L1490 681L1485 681L1492 709L1461 709L1468 681L1463 681L1471 654L1467 654ZM809 625L820 657L815 657L823 686L818 686L825 715L793 715L801 686L795 686L803 657L799 657ZM722 606L732 639L728 639L736 669L730 669L738 698L705 698L713 669L707 669L716 639L711 639ZM1524 628L1536 665L1531 665L1540 697L1534 697L1542 730L1506 730L1515 697L1508 697L1517 665L1512 665ZM1525 629L1534 656L1530 656L1537 681L1532 681L1539 705L1512 705L1518 681L1513 681L1520 656L1516 656ZM1527 561L1540 600L1534 600L1544 636L1537 636L1547 671L1507 671L1517 636L1509 636L1520 600L1514 600ZM179 579L189 610L185 610L193 638L188 638L195 666L164 666L171 638L166 638L174 610L169 610ZM375 649L382 672L379 672L385 693L381 693L386 714L363 714L369 693L364 693L370 672L367 672ZM1266 559L1279 600L1273 600L1284 636L1276 636L1286 672L1245 672L1255 636L1248 636L1258 600L1253 600ZM1154 572L1166 608L1161 608L1170 640L1164 640L1172 671L1137 671L1145 640L1139 640L1148 608L1143 608ZM1428 560L1441 602L1435 602L1447 640L1439 640L1449 678L1407 678L1417 640L1409 640L1420 602L1414 602ZM1542 615L1552 645L1548 645L1555 672L1550 672L1557 699L1527 699L1534 672L1529 672L1537 645L1532 645ZM1603 563L1616 603L1611 603L1621 638L1614 638L1623 673L1584 673L1593 638L1586 638L1596 603L1591 603ZM688 596L698 629L694 629L702 658L696 658L704 687L671 687L679 658L673 658L682 629L677 629ZM301 639L310 667L306 667L314 692L308 692L315 718L287 718L294 692L288 692L296 667L292 667ZM12 602L23 636L18 636L27 665L21 665L29 695L-5 695L3 665L-3 665L6 636L1 636ZM10 630L19 659L15 659L22 684L17 684L24 710L-5 710L2 684L-3 684L4 659L0 659ZM820 675L827 698L824 698L830 718L826 718L832 739L809 739L814 718L810 718L816 698L813 698ZM1273 550L1287 593L1281 593L1292 631L1284 631L1294 668L1252 668L1262 631L1254 631L1265 593L1259 593ZM416 660L423 682L420 682L425 702L421 702L427 722L404 722L410 702L406 702L411 682L408 682ZM424 626L431 650L428 650L434 672L430 672L436 694L411 694L417 672L413 672L419 650L416 650ZM1475 572L1487 611L1482 611L1492 646L1485 646L1494 681L1455 681L1465 646L1457 646L1468 611L1462 611ZM225 590L238 632L232 632L243 669L236 669L246 706L204 706L214 669L207 669L218 632L212 632ZM1129 599L1136 623L1133 623L1139 644L1135 644L1140 665L1117 665L1123 644L1118 644L1124 623L1121 623ZM1109 580L1119 611L1114 611L1122 638L1117 638L1124 666L1093 666L1101 638L1095 638L1103 611L1099 611ZM1519 626L1530 661L1525 661L1534 693L1528 693L1537 724L1501 724L1510 693L1503 693L1513 661L1508 661ZM117 554L130 594L125 594L135 630L128 630L137 665L97 665L107 630L100 630L110 594L105 594ZM1395 600L1405 631L1401 631L1409 659L1403 659L1411 687L1379 687L1387 659L1381 659L1389 631L1385 631ZM887 566L900 607L895 607L905 644L898 644L908 681L866 681L876 644L869 644L880 607L874 607ZM192 587L202 620L198 620L206 650L201 650L208 679L175 679L183 650L177 650L186 620L181 620ZM160 594L168 619L164 619L171 642L166 642L172 664L147 664L153 642L148 642L155 619L151 619ZM311 606L320 634L316 634L323 659L318 659L325 684L297 684L304 659L298 659L306 634L302 634ZM1226 623L1234 650L1231 650L1238 675L1233 675L1240 700L1212 700L1218 675L1213 675L1221 650L1217 650ZM272 581L281 610L277 610L285 636L279 636L286 661L257 661L264 636L259 636L267 610L262 610ZM391 658L398 680L395 680L400 699L396 699L402 719L380 719L385 699L381 699L387 680L384 680ZM884 627L892 652L888 652L895 675L890 675L897 698L871 698L877 675L872 675L879 652L875 652ZM1513 659L1520 683L1517 683L1523 704L1519 704L1525 726L1501 726L1507 704L1502 704L1509 683L1505 683ZM689 637L699 669L695 669L703 698L697 698L705 727L673 727L680 698L675 698L683 669L678 669ZM625 625L635 657L631 657L639 686L633 686L641 715L608 715L616 686L610 686L619 657L614 657ZM1591 646L1600 675L1596 675L1604 701L1599 701L1606 727L1577 727L1584 701L1578 701L1586 675L1582 675ZM1139 594L1150 630L1145 630L1155 661L1148 661L1157 692L1121 692L1130 661L1123 661L1133 630L1128 630ZM550 607L557 630L554 630L560 650L556 650L561 670L539 670L544 650L540 650L546 630L543 630ZM96 576L108 614L103 614L113 647L106 647L115 680L77 680L86 647L79 647L89 614L84 614ZM248 662L255 686L252 686L258 706L254 706L259 727L236 727L242 706L237 706L244 686L240 686ZM1408 582L1419 618L1414 618L1424 650L1417 650L1426 683L1390 683L1398 650L1392 650L1401 618L1396 618ZM377 619L386 647L382 647L390 672L384 672L391 697L363 697L370 672L365 672L372 647L368 647ZM238 594L248 626L244 626L252 653L246 653L254 681L223 681L230 653L225 653L233 626L228 626ZM1557 585L1571 628L1565 628L1576 666L1568 666L1579 704L1536 704L1546 666L1539 666L1550 628L1544 628ZM381 567L394 609L389 609L400 647L392 647L402 685L360 685L370 647L362 647L373 609L367 609ZM565 630L572 652L569 652L574 671L570 671L576 691L554 691L559 671L555 671L561 652L558 652ZM758 586L769 618L764 618L773 647L767 647L775 676L742 676L750 647L744 647L753 618L748 618ZM808 621L815 643L812 643L817 662L813 662L819 681L797 681L802 662L798 662L804 643L801 643ZM127 579L137 610L133 610L140 636L135 636L142 663L112 663L119 636L114 636L122 610L118 610ZM17 600L26 629L22 629L29 654L24 654L31 679L3 679L10 654L4 654L12 629L8 629ZM940 628L951 661L946 661L955 691L949 691L957 720L924 720L932 691L926 691L934 661L930 661ZM1058 627L1070 664L1065 664L1075 697L1068 697L1077 730L1040 730L1049 697L1042 697L1052 664L1047 664ZM619 659L628 688L624 688L631 713L626 713L633 739L604 739L611 713L606 713L614 688L610 688ZM225 608L237 645L232 645L242 678L235 678L244 711L206 711L215 678L209 678L218 645L213 645ZM52 621L64 661L59 661L69 696L62 696L72 731L32 731L42 696L34 696L45 661L39 661ZM1009 621L1021 658L1016 658L1025 692L1019 692L1028 725L990 725L999 692L992 692L1002 658L997 658ZM208 609L219 642L214 642L223 671L217 671L225 700L192 700L200 671L194 671L203 642L198 642ZM1349 618L1362 657L1356 657L1366 691L1359 691L1369 726L1330 726L1339 691L1332 691L1342 657L1337 657ZM938 601L951 642L945 642L956 678L948 678L958 715L917 715L927 678L920 678L931 642L925 642ZM1117 589L1126 615L1122 615L1129 639L1124 639L1130 662L1104 662L1110 639L1105 639L1112 615L1109 615ZM198 587L208 616L204 616L211 642L206 642L213 668L184 668L191 642L185 642L193 616L189 616ZM1351 617L1362 650L1357 650L1366 680L1359 680L1368 710L1334 710L1342 680L1336 680L1345 650L1340 650Z'/%3E%3Crect y='560' width='1600' height='160' fill='url(%23m)'/%3E%3Cpath fill='%23d3dbe3' d='M1007 744L1028 811L1019 811L1036 870L1024 870L1040 929L974 929L990 870L978 870L995 811L986 811ZM-15 752L8 823L-2 823L17 887L4 887L21 950L-50 950L-33 887L-46 887L-27 823L-37 823ZM805 774L824 835L816 835L832 889L821 889L835 943L774 943L789 889L778 889L794 835L785 835ZM88 719L110 788L101 788L119 849L106 849L123 910L54 910L70 849L58 849L76 788L66 788ZM102 809L118 859L111 859L124 904L115 904L127 948L77 948L89 904L80 904L93 859L86 859ZM317 777L339 846L329 846L347 907L334 907L351 968L282 968L299 907L286 907L304 846L295 846ZM790 776L808 831L800 831L814 880L804 880L817 928L763 928L776 880L766 880L780 831L773 831ZM1101 745L1124 815L1114 815L1132 877L1119 877L1136 939L1066 939L1083 877L1070 877L1089 815L1079 815ZM1034 783L1048 826L1042 826L1053 864L1045 864L1055 902L1013 902L1023 864L1015 864L1026 826L1020 826ZM396 723L419 792L409 792L427 853L414 853L431 914L362 914L379 853L366 853L384 792L374 792ZM911 783L924 824L918 824L929 859L922 859L931 895L891 895L901 859L893 859L904 824L898 824ZM421 761L442 828L433 828L450 887L438 887L454 945L388 945L404 887L392 887L409 828L400 828ZM1088 789L1105 840L1097 840L1111 886L1101 886L1114 931L1063 931L1075 886L1066 886L1079 840L1072 840ZM742 738L761 796L752 796L768 848L757 848L771 899L713 899L727 848L716 848L732 796L723 796ZM1446 836L1461 884L1454 884L1467 926L1458 926L1469 968L1422 968L1433 926L1425 926L1437 884L1430 884ZM1515 815L1528 855L1523 855L1533 891L1526 891L1536 927L1495 927L1505 891L1498 891L1508 855L1503 855ZM1325 709L1350 787L1339 787L1359 857L1345 857L1364 926L1286 926L1304 857L1290 857L1311 787L1300 787ZM421 833L436 880L429 880L442 923L433 923L445 966L397 966L408 923L400 923L412 880L405 880ZM326 727L346 790L337 790L353 846L342 846L357 901L294 901L309 846L298 846L314 790L306 790ZM839 686L864 763L853 763L873 832L860 832L878 901L801 901L819 832L805 832L826 763L815 763ZM1325 795L1344 855L1336 855L1351 908L1341 908L1355 961L1295 961L1310 908L1299 908L1314 855L1306 855ZM1133 826L1149 875L1142 875L1155 918L1146 918L1158 962L1109 962L1121 918L1112 918L1125 875L1118 875ZM777 778L790 818L785 818L795 854L788 854L798 890L757 890L767 854L759 854L770 818L764 818ZM786 755L805 812L797 812L812 863L801 863L815 914L758 914L771 863L761 863L776 812L768 812ZM211 767L228 821L220 821L234 868L225 868L237 915L184 915L197 868L187 868L201 821L194 821ZM1358 840L1371 880L1365 880L1375 915L1368 915L1378 950L1338 950L1348 915L1341 915L1351 880L1345 880ZM1356 841L1370 885L1364 885L1376 925L1368 925L1378 964L1334 964L1345 925L1337 925L1348 885L1342 885ZM1149 704L1173 779L1163 779L1182 846L1169 846L1187 913L1112 913L1130 846L1116 846L1136 779L1125 779ZM590 817L608 872L600 872L615 921L605 921L618 970L563 970L576 921L566 921L581 872L573 872ZM946 775L963 828L956 828L970 876L960 876L973 924L919 924L932 876L923 876L937 828L929 828ZM431 783L445 824L439 824L450 861L442 861L452 898L410 898L420 861L413 861L424 824L418 824ZM1349 823L1365 874L1358 874L1371 920L1362 920L1374 965L1323 965L1336 920L1326 920L1340 874L1333 874ZM389 792L405 842L398 842L411 886L402 886L414 931L364 931L376 886L367 886L380 842L373 842ZM291 815L309 870L301 870L315 918L305 918L319 966L264 966L277 918L267 918L282 870L274 870ZM1430 741L1453 813L1443 813L1462 877L1449 877L1466 940L1394 940L1412 877L1399 877L1417 813L1407 813ZM1478 720L1503 797L1492 797L1512 866L1498 866L1516 934L1440 934L1458 866L1444 866L1464 797L1453 797ZM1160 833L1173 875L1168 875L1178 912L1171 912L1181 949L1139 949L1149 912L1142 912L1153 875L1147 875ZM719 749L742 818L732 818L750 880L737 880L754 942L685 942L701 880L689 880L707 818L697 818ZM449 849L463 890L457 890L468 927L460 927L470 964L429 964L439 927L431 927L442 890L436 890ZM189 756L207 814L199 814L214 866L204 866L218 917L160 917L174 866L163 866L178 814L170 814ZM468 777L490 846L481 846L499 907L486 907L503 968L434 968L450 907L438 907L456 846L446 846ZM407 732L428 797L418 797L436 856L424 856L439 914L374 914L390 856L378 856L395 797L386 797ZM894 750L912 805L904 805L918 854L908 854L922 903L866 903L880 854L870 854L884 805L876 805ZM245 830L260 877L254 877L266 920L258 920L269 962L221 962L233 920L224 920L237 877L230 877ZM795 828L811 877L804 877L816 920L808 920L819 963L771 963L783 920L774 920L787 877L780 877ZM1614 742L1633 799L1625 799L1639 850L1629 850L1643 901L1586 901L1599 850L1589 850L1604 799L1596 799ZM296 797L309 841L303 841L315 879L307 879L317 917L274 917L284 879L277 879L288 841L282 841ZM129 774L145 823L138 823L151 867L142 867L154 911L105 911L117 867L108 867L121 823L114 823ZM914 742L938 817L928 817L947 884L934 884L952 950L877 950L895 884L881 884L901 817L890 817ZM657 776L675 832L667 832L682 882L672 882L685 932L629 932L642 882L632 882L647 832L639 832ZM598 748L615 801L608 801L621 848L612 848L625 895L572 895L584 848L575 848L589 801L581 801ZM435 684L460 762L449 762L469 831L455 831L474 900L396 900L415 831L401 831L421 762L410 762ZM806 780L826 844L817 844L834 902L822 902L838 959L773 959L789 902L777 902L794 844L785 844ZM334 770L350 820L343 820L356 865L347 865L359 910L309 910L321 865L312 865L325 820L318 820ZM636 807L654 865L646 865L661 915L650 915L664 966L607 966L621 915L610 915L625 865L617 865ZM1372 686L1396 760L1385 760L1404 826L1391 826L1409 892L1335 892L1353 826L1339 826L1358 760L1348 760ZM33 774L55 841L45 841L63 901L50 901L67 962L-1 962L15 901L3 901L21 841L11 841ZM756 715L776 778L767 778L784 834L773 834L788 890L725 890L740 834L729 834L745 778L736 778ZM622 744L647 820L636 820L656 888L642 888L660 956L584 956L602 888L589 888L608 820L598 820ZM1383 693L1408 771L1397 771L1417 840L1403 840L1422 910L1344 910L1363 840L1349 840L1369 771L1358 771ZM159 805L173 851L167 851L179 891L171 891L182 932L136 932L147 891L139 891L151 851L144 851ZM1099 734L1123 811L1112 811L1132 879L1119 879L1137 948L1060 948L1079 879L1065 879L1085 811L1074 811ZM1042 732L1064 802L1054 802L1072 864L1060 864L1077 927L1007 927L1023 864L1011 864L1029 802L1019 802ZM884 838L898 879L892 879L903 916L895 916L905 953L864 953L874 916L866 916L877 879L871 879ZM361 730L386 806L375 806L395 874L381 874L399 942L323 942L342 874L328 874L348 806L337 806ZM478 786L492 831L486 831L498 870L490 870L501 910L456 910L467 870L459 870L470 831L464 831ZM1024 712L1045 779L1036 779L1053 839L1041 839L1057 899L990 899L1006 839L994 839L1011 779L1002 779ZM95 769L115 829L106 829L122 883L111 883L126 937L65 937L80 883L69 883L85 829L76 829ZM616 803L632 852L625 852L638 895L629 895L641 938L592 938L604 895L595 895L608 852L601 852ZM-3 784L14 835L6 835L20 881L11 881L23 927L-29 927L-16 881L-26 881L-12 835L-19 835Z'/%3E%3C/svg%3E");
  --tbwp-light-blue-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='190' viewBox='0 0 360 190'%3E%3Cg fill='%23bcc6d1'%3E%3Cg transform='translate(180 52) rotate(0) scale(2.1) translate(-20 -20)'%3E%3Cellipse cx='20' cy='28' rx='9.5' ry='8'/%3E%3Cellipse cx='8.5' cy='16' rx='3.6' ry='4.8' transform='rotate(-22 8.5 16)'/%3E%3Cellipse cx='15.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='24.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='31.5' cy='16' rx='3.6' ry='4.8' transform='rotate(22 31.5 16)'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23b5bfcb' font-family='Segoe UI,Arial,sans-serif' font-weight='700' text-anchor='middle' letter-spacing='3.5' font-size='14'%3E%3Ctext x='180' y='150'%3EGOOD PEOPLE%3C/text%3E%3Ctext x='180' y='176'%3EBETTER CONVERSATIONS%3C/text%3E%3C/g%3E%3C/svg%3E");
  --bg: #f3f6fa; --panel: #ffffff; --panel-2: #eef2f7; --panel-3: #fbfcfd; --sunken: #eef2f6;
  --input: #f4f6f9; --raised: #ffffff; --text: #18202b; --text-muted: #5d6775; --text-dim: #7a8492;
  --gold: #2f7cf6; --line: #e3e8ee;
  --tb-page: #f3f6fa; --tb-topbar: #fbfcfd; --tb-rail: #fbfcfd; --tb-list: #ffffff;
  --tb-chat: #eef2f6; --tb-header: #ffffff; --tb-composer: #ffffff;
  --tb-line: #e3e8ee;
  --tb-text: #18202b; --tb-text-2: #3c4654; --tb-text-3: #7a8492;
  --tb-accent: #2f7cf6; --tb-accent-ink: #ffffff; --tb-accent-soft: #e7f0fe;
  --tb-send-bg: #2f7cf6; --tb-send-ink: #ffffff;
  --tb-pill-bg: #f1f4f8; --tb-pill-border: transparent;
  --tb-pill-active-bg: #2f7cf6; --tb-pill-active-ink: #ffffff;
  --tb-badge-bg: #2f7cf6; --tb-badge-ink: #ffffff;
  --tb-row-hover: #f4f7fb; --tb-row-active: #e8f0fd; --tb-row-active-bar: transparent;
  --tb-bubble-in: #ffffff; --tb-bubble-in-text: #18202b; --tb-bubble-in-border: #e6ebf1;
  --tb-bubble-out: #d6e6fd; --tb-bubble-out-text: #142034;
  --tb-tick: #2f7cf6;
  --tb-day-bg: #ffffff; --tb-day-text: #333d4a;
  --tb-input-bg: #ffffff; --tb-input-border: #dfe5ec; --tb-search-bg: #f1f4f8;
  --tb-rail-cut: #e7f0fe; --tb-mark: #7d8794;
  --tb-wallpaper: var(--tbwp-light-blue-mark) 50% 68% / 300px auto no-repeat, var(--tbwp-light-blue) 50% 100% / cover no-repeat, #eef2f6;
}
html[data-theme="cream-gold"] {
  --tbwp-cream-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='%23a88a4e' fill-opacity='0.1'%3E%3Cg transform='translate(40 50) rotate(-18) scale(1.05) translate(-20 -20)'%3E%3Cellipse cx='20' cy='28' rx='9.5' ry='8'/%3E%3Cellipse cx='8.5' cy='16' rx='3.6' ry='4.8' transform='rotate(-22 8.5 16)'/%3E%3Cellipse cx='15.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='24.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='31.5' cy='16' rx='3.6' ry='4.8' transform='rotate(22 31.5 16)'/%3E%3C/g%3E%3Cg transform='translate(175 30) rotate(14) scale(0.8) translate(-20 -20)'%3E%3Cellipse cx='20' cy='28' rx='9.5' ry='8'/%3E%3Cellipse cx='8.5' cy='16' rx='3.6' ry='4.8' transform='rotate(-22 8.5 16)'/%3E%3Cellipse cx='15.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='24.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='31.5' cy='16' rx='3.6' ry='4.8' transform='rotate(22 31.5 16)'/%3E%3C/g%3E%3Cg transform='translate(120 140) rotate(8) scale(1.15) translate(-20 -20)'%3E%3Cellipse cx='20' cy='28' rx='9.5' ry='8'/%3E%3Cellipse cx='8.5' cy='16' rx='3.6' ry='4.8' transform='rotate(-22 8.5 16)'/%3E%3Cellipse cx='15.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='24.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='31.5' cy='16' rx='3.6' ry='4.8' transform='rotate(22 31.5 16)'/%3E%3C/g%3E%3Cg transform='translate(225 175) rotate(-24) scale(0.9) translate(-20 -20)'%3E%3Cellipse cx='20' cy='28' rx='9.5' ry='8'/%3E%3Cellipse cx='8.5' cy='16' rx='3.6' ry='4.8' transform='rotate(-22 8.5 16)'/%3E%3Cellipse cx='15.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='24.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='31.5' cy='16' rx='3.6' ry='4.8' transform='rotate(22 31.5 16)'/%3E%3C/g%3E%3Cg transform='translate(45 205) rotate(22) scale(0.85) translate(-20 -20)'%3E%3Cellipse cx='20' cy='28' rx='9.5' ry='8'/%3E%3Cellipse cx='8.5' cy='16' rx='3.6' ry='4.8' transform='rotate(-22 8.5 16)'/%3E%3Cellipse cx='15.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='24.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='31.5' cy='16' rx='3.6' ry='4.8' transform='rotate(22 31.5 16)'/%3E%3C/g%3E%3Cg transform='translate(250 85) rotate(30) scale(0.7) translate(-20 -20)'%3E%3Cellipse cx='20' cy='28' rx='9.5' ry='8'/%3E%3Cellipse cx='8.5' cy='16' rx='3.6' ry='4.8' transform='rotate(-22 8.5 16)'/%3E%3Cellipse cx='15.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='24.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='31.5' cy='16' rx='3.6' ry='4.8' transform='rotate(22 31.5 16)'/%3E%3C/g%3E%3Cg transform='translate(-10 85) rotate(30) scale(0.7) translate(-20 -20)'%3E%3Cellipse cx='20' cy='28' rx='9.5' ry='8'/%3E%3Cellipse cx='8.5' cy='16' rx='3.6' ry='4.8' transform='rotate(-22 8.5 16)'/%3E%3Cellipse cx='15.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='24.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='31.5' cy='16' rx='3.6' ry='4.8' transform='rotate(22 31.5 16)'/%3E%3C/g%3E%3Cg transform='translate(175 255) rotate(14) scale(0.8) translate(-20 -20)'%3E%3Cellipse cx='20' cy='28' rx='9.5' ry='8'/%3E%3Cellipse cx='8.5' cy='16' rx='3.6' ry='4.8' transform='rotate(-22 8.5 16)'/%3E%3Cellipse cx='15.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='24.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='31.5' cy='16' rx='3.6' ry='4.8' transform='rotate(22 31.5 16)'/%3E%3C/g%3E%3Cg transform='translate(175 -5) rotate(14) scale(0.8) translate(-20 -20)'%3E%3Cellipse cx='20' cy='28' rx='9.5' ry='8'/%3E%3Cellipse cx='8.5' cy='16' rx='3.6' ry='4.8' transform='rotate(-22 8.5 16)'/%3E%3Cellipse cx='15.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='24.5' cy='9.5' rx='3.8' ry='5'/%3E%3Cellipse cx='31.5' cy='16' rx='3.6' ry='4.8' transform='rotate(22 31.5 16)'/%3E%3C/g%3E%3C/g%3E%3Cg stroke='%23a88a4e' stroke-opacity='0.12' stroke-width='1.6'%3E%3Cpath transform='translate(80 82) scale(1.0)' d='M0 22 L9 10 L14 15 L22 3 L31 15 L35 11 L44 22' fill='none' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath transform='translate(190 112) scale(0.9)' d='M0 22 L9 10 L14 15 L22 3 L31 15 L35 11 L44 22' fill='none' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath transform='translate(95 228) scale(1.1)' d='M0 22 L9 10 L14 15 L22 3 L31 15 L35 11 L44 22' fill='none' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath transform='translate(5 135) scale(0.8)' d='M0 22 L9 10 L14 15 L22 3 L31 15 L35 11 L44 22' fill='none' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath transform='translate(205 225) scale(0.7)' d='M0 22 L9 10 L14 15 L22 3 L31 15 L35 11 L44 22' fill='none' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  --bg: #f2ede2; --panel: #fffdf8; --panel-2: #f3ecdd; --panel-3: #f7f3ea; --sunken: #eee7d8;
  --input: #f6f1e6; --raised: #fffdf8; --text: #241d12; --text-muted: #6b604d; --text-dim: #8a7f6c;
  --gold: #b8892c; --line: #e4dccb;
  --tb-page: #f2ede2; --tb-topbar: #f7f3ea; --tb-rail: #f4efe4; --tb-list: #f7f3ea;
  --tb-chat: #efe9dc; --tb-header: #f7f3ea; --tb-composer: #f4efe5;
  --tb-line: #e4dccb;
  --tb-text: #241d12; --tb-text-2: #4a4030; --tb-text-3: #8a7f6c;
  --tb-accent: #c9982f; --tb-accent-ink: #2a1f08; --tb-accent-soft: #efe2c2;
  --tb-send-bg: #dfb04a; --tb-send-ink: #2a1f08;
  --tb-pill-bg: #ece5d6; --tb-pill-border: transparent;
  --tb-pill-active-bg: #e7c46e; --tb-pill-active-ink: #2a1f08;
  --tb-badge-bg: #e2b54f; --tb-badge-ink: #2a1f08;
  --tb-row-hover: #f0e9da; --tb-row-active: #efe3c9; --tb-row-active-bar: transparent;
  --tb-bubble-in: #fffdf8; --tb-bubble-in-text: #241d12; --tb-bubble-in-border: #e8e0cf;
  --tb-bubble-out: #f6e6bb; --tb-bubble-out-text: #2a2010;
  --tb-tick: #a87c22;
  --tb-day-bg: #f8f4ec; --tb-day-text: #3c3324;
  --tb-input-bg: #fffdf8; --tb-input-border: #e2d9c6; --tb-search-bg: #efe9dd;
  --tb-rail-cut: #efe2c2; --tb-mark: #8f8471;
  --tb-wallpaper: var(--tbwp-cream-gold) 0 0 / 260px 260px repeat, #efe9dc;
}
html[data-theme="midnight-blue"] {
  --tbwp-midnight-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMax slice'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%230e1729'/%3E%3Cstop offset='1' stop-color='%230c1322'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1600' height='1000' fill='url(%23s)'/%3E%3Cg fill='%23fff' fill-opacity='0.35'%3E%3Ccircle cx='381' cy='283' r='1.2'/%3E%3Ccircle cx='1466' cy='247' r='0.8'/%3E%3Ccircle cx='969' cy='473' r='1.5'/%3E%3Ccircle cx='415' cy='122' r='1.5'/%3E%3Ccircle cx='866' cy='286' r='1.5'/%3E%3Ccircle cx='1023' cy='78' r='1'/%3E%3Ccircle cx='1389' cy='272' r='0.8'/%3E%3Ccircle cx='1074' cy='33' r='0.8'/%3E%3Ccircle cx='482' cy='16' r='1.2'/%3E%3Ccircle cx='756' cy='374' r='1.5'/%3E%3Ccircle cx='1143' cy='479' r='1.5'/%3E%3Ccircle cx='1165' cy='300' r='1'/%3E%3Ccircle cx='1406' cy='51' r='1'/%3E%3Ccircle cx='792' cy='134' r='1.5'/%3E%3Ccircle cx='1246' cy='445' r='1.5'/%3E%3Ccircle cx='812' cy='201' r='1.2'/%3E%3Ccircle cx='855' cy='212' r='1'/%3E%3Ccircle cx='1447' cy='355' r='0.8'/%3E%3Ccircle cx='1370' cy='515' r='1'/%3E%3Ccircle cx='1118' cy='170' r='0.8'/%3E%3Ccircle cx='1142' cy='110' r='1.2'/%3E%3Ccircle cx='456' cy='33' r='1.5'/%3E%3Ccircle cx='142' cy='416' r='1.5'/%3E%3Ccircle cx='1435' cy='10' r='1.5'/%3E%3Ccircle cx='1230' cy='454' r='0.8'/%3E%3Ccircle cx='968' cy='396' r='1.5'/%3E%3Ccircle cx='1150' cy='172' r='1.2'/%3E%3Ccircle cx='809' cy='519' r='1.2'/%3E%3Ccircle cx='12' cy='56' r='0.8'/%3E%3Ccircle cx='1518' cy='505' r='1.2'/%3E%3Ccircle cx='977' cy='81' r='0.8'/%3E%3Ccircle cx='1568' cy='177' r='1.2'/%3E%3Ccircle cx='1534' cy='466' r='1.5'/%3E%3Ccircle cx='603' cy='452' r='1.5'/%3E%3Ccircle cx='1030' cy='310' r='0.8'/%3E%3Ccircle cx='992' cy='489' r='1.2'/%3E%3Ccircle cx='690' cy='375' r='1'/%3E%3Ccircle cx='1498' cy='227' r='1.2'/%3E%3Ccircle cx='834' cy='285' r='0.8'/%3E%3Ccircle cx='1261' cy='513' r='1.2'/%3E%3Ccircle cx='32' cy='320' r='1'/%3E%3Ccircle cx='96' cy='326' r='1.5'/%3E%3Ccircle cx='565' cy='477' r='1.2'/%3E%3Ccircle cx='1181' cy='12' r='0.8'/%3E%3Ccircle cx='1528' cy='11' r='1.2'/%3E%3Ccircle cx='402' cy='237' r='1.2'/%3E%3Ccircle cx='284' cy='96' r='1.2'/%3E%3Ccircle cx='1350' cy='137' r='1.5'/%3E%3Ccircle cx='168' cy='423' r='1'/%3E%3Ccircle cx='496' cy='116' r='1.2'/%3E%3Ccircle cx='382' cy='97' r='1.5'/%3E%3Ccircle cx='1039' cy='50' r='1.2'/%3E%3Ccircle cx='1519' cy='351' r='1'/%3E%3Ccircle cx='701' cy='445' r='1'/%3E%3Ccircle cx='128' cy='386' r='1'/%3E%3Ccircle cx='1416' cy='235' r='1'/%3E%3Ccircle cx='1259' cy='18' r='1'/%3E%3Ccircle cx='504' cy='435' r='1'/%3E%3Ccircle cx='1382' cy='177' r='0.8'/%3E%3Ccircle cx='1290' cy='180' r='1'/%3E%3Ccircle cx='674' cy='270' r='1.2'/%3E%3Ccircle cx='744' cy='330' r='1.2'/%3E%3Ccircle cx='672' cy='213' r='1.5'/%3E%3Ccircle cx='250' cy='2' r='1.5'/%3E%3Ccircle cx='894' cy='513' r='1'/%3E%3Ccircle cx='52' cy='237' r='1.2'/%3E%3Ccircle cx='870' cy='463' r='0.8'/%3E%3Ccircle cx='1373' cy='505' r='0.8'/%3E%3Ccircle cx='1296' cy='23' r='1'/%3E%3Ccircle cx='1435' cy='468' r='0.8'/%3E%3C/g%3E%3Ccircle cx='1250' cy='330' r='100' fill='%232a3958' fill-opacity='0.32'/%3E%3Cpath d='M0 1000 L0 599 L58 526 L122 437 L182 502 L227 557 L278 489 L318 423 L375 495 L443 563 L512 520 L571 437 L627 481 L698 514 L761 474 L830 457 L882 519 L935 556 L961 488 L998 456 L1038 457 L1067 498 L1115 448 L1170 413 L1225 461 L1284 538 L1330 502 L1374 445 L1415 512 L1467 592 L1520 478 L1578 336 L1632 445 L1600 555 L1600 1000 Z' fill='%23131d31'/%3E%3Cpath d='M0 1000 L0 678 L37 608 L75 554 L109 610 L157 671 L202 598 L233 533 L281 598 L337 665 L368 615 L394 541 L447 609 L492 673 L512 608 L547 565 L589 628 L645 717 L689 675 L748 610 L779 646 L805 661 L864 599 L913 566 L965 613 L1009 684 L1050 600 L1105 527 L1143 584 L1189 662 L1225 609 L1253 562 L1287 625 L1325 692 L1360 631 L1379 575 L1430 650 L1475 709 L1520 646 L1565 573 L1611 649 L1600 710 L1600 1000 Z' fill='%23111a2c'/%3E%3Cpath fill='%230f1828' d='M1483 694L1493 724L1488 724L1496 750L1491 750L1498 775L1469 775L1476 750L1470 750L1478 724L1474 724ZM1159 700L1166 722L1163 722L1169 742L1165 742L1170 761L1148 761L1153 742L1149 742L1155 722L1152 722ZM307 680L316 711L312 711L320 738L315 738L322 765L291 765L299 738L293 738L301 711L297 711ZM361 725L372 758L367 758L375 787L370 787L377 816L345 816L352 787L346 787L355 758L350 758ZM465 681L476 714L471 714L480 744L474 744L482 773L449 773L457 744L451 744L459 714L455 714ZM1380 676L1390 707L1385 707L1393 734L1388 734L1395 761L1365 761L1372 734L1366 734L1374 707L1370 707ZM337 727L343 745L340 745L345 762L342 762L346 778L328 778L332 762L329 762L334 745L331 745ZM608 709L615 730L612 730L617 750L613 750L619 769L597 769L602 750L598 750L604 730L601 730ZM508 655L519 690L514 690L523 721L517 721L526 751L491 751L499 721L493 721L502 690L497 690ZM1606 709L1615 738L1611 738L1618 763L1613 763L1620 788L1591 788L1598 763L1593 763L1600 738L1597 738ZM748 706L759 742L754 742L763 774L757 774L766 806L730 806L738 774L732 774L741 742L736 742ZM894 719L903 747L899 747L906 772L901 772L908 798L879 798L886 772L881 772L889 747L885 747ZM1385 725L1393 751L1390 751L1397 775L1392 775L1398 799L1372 799L1378 775L1373 775L1380 751L1376 751ZM1555 680L1564 708L1560 708L1567 733L1562 733L1569 758L1541 758L1548 733L1542 733L1550 708L1546 708ZM365 701L376 734L371 734L380 764L374 764L382 794L348 794L356 764L350 764L359 734L354 734ZM1552 658L1564 695L1559 695L1568 727L1562 727L1571 759L1534 759L1543 727L1536 727L1546 695L1541 695ZM291 689L299 713L295 713L301 734L297 734L303 755L279 755L285 734L281 734L287 713L283 713ZM1136 710L1147 747L1142 747L1152 779L1145 779L1154 812L1117 812L1126 779L1120 779L1129 747L1124 747ZM398 663L410 700L405 700L414 732L408 732L417 765L380 765L389 732L382 732L392 700L386 700ZM674 653L685 687L680 687L689 717L683 717L691 747L657 747L665 717L659 717L668 687L663 687ZM132 663L143 699L138 699L148 731L141 731L150 763L114 763L123 731L116 731L125 699L120 699ZM565 709L575 740L570 740L578 767L573 767L580 794L550 794L557 767L551 767L559 740L555 740ZM-9 705L-1 730L-4 730L2 752L-2 752L4 775L-21 775L-15 752L-20 752L-13 730L-17 730ZM777 724L784 747L781 747L787 767L783 767L788 787L766 787L771 767L767 767L773 747L770 747ZM1547 710L1555 737L1552 737L1558 760L1554 760L1560 784L1534 784L1540 760L1535 760L1542 737L1538 737ZM175 727L183 751L180 751L186 772L182 772L187 793L163 793L169 772L165 772L171 751L168 751ZM165 709L176 747L171 747L181 780L174 780L183 813L146 813L155 780L148 780L158 747L153 747ZM139 663L151 702L146 702L156 736L149 736L158 770L120 770L129 736L122 736L132 702L127 702ZM1247 668L1258 703L1253 703L1262 733L1256 733L1264 764L1230 764L1238 733L1232 733L1241 703L1236 703ZM1088 715L1099 747L1094 747L1103 776L1097 776L1105 804L1072 804L1080 776L1074 776L1083 747L1078 747ZM416 722L427 756L422 756L431 786L424 786L433 817L398 817L407 786L400 786L409 756L405 756ZM1083 667L1093 696L1089 696L1096 723L1091 723L1098 749L1069 749L1076 723L1070 723L1078 696L1074 696ZM790 726L798 752L795 752L801 775L797 775L803 797L777 797L783 775L779 775L785 752L782 752ZM1093 671L1102 701L1098 701L1106 728L1101 728L1108 755L1078 755L1085 728L1080 728L1087 701L1083 701ZM1039 666L1049 698L1045 698L1053 726L1047 726L1055 754L1023 754L1031 726L1025 726L1033 698L1029 698ZM1439 661L1450 693L1445 693L1454 721L1448 721L1456 750L1423 750L1431 721L1425 721L1434 693L1429 693ZM1508 708L1515 729L1512 729L1517 748L1514 748L1519 767L1498 767L1503 748L1499 748L1504 729L1501 729ZM1162 699L1171 729L1167 729L1175 757L1170 757L1177 784L1146 784L1154 757L1148 757L1156 729L1152 729ZM1042 688L1051 715L1047 715L1054 740L1049 740L1056 765L1028 765L1035 740L1030 740L1037 715L1033 715ZM269 743L275 763L273 763L278 780L274 780L279 797L260 797L264 780L261 780L266 763L263 763ZM1217 717L1227 746L1223 746L1230 773L1225 773L1232 799L1202 799L1210 773L1204 773L1212 746L1208 746ZM569 705L577 728L573 728L580 750L575 750L581 771L557 771L563 750L559 750L565 728L562 728ZM1411 728L1417 747L1414 747L1419 764L1416 764L1420 780L1402 780L1406 764L1403 764L1408 747L1405 747ZM385 672L396 707L392 707L401 738L394 738L403 768L368 768L376 738L370 738L379 707L374 707ZM526 709L534 736L531 736L538 760L533 760L539 783L513 783L519 760L514 760L521 736L517 736ZM1246 737L1254 762L1250 762L1257 785L1252 785L1258 808L1233 808L1239 785L1234 785L1241 762L1237 762ZM164 682L172 706L168 706L174 727L170 727L176 748L152 748L158 727L153 727L160 706L156 706ZM165 701L176 736L171 736L180 767L174 767L182 798L147 798L156 767L149 767L159 736L154 736ZM283 712L290 734L287 734L293 754L289 754L294 773L272 773L277 754L273 754L279 734L276 734ZM1199 701L1210 737L1205 737L1215 768L1208 768L1217 800L1181 800L1190 768L1183 768L1193 737L1188 737ZM951 713L958 734L955 734L960 753L956 753L961 772L940 772L945 753L941 753L947 734L944 734ZM298 704L307 733L303 733L311 759L305 759L312 785L283 785L290 759L285 759L292 733L288 733ZM311 738L319 761L316 761L322 782L317 782L323 803L300 803L305 782L301 782L307 761L304 761ZM29 713L41 748L36 748L45 780L39 780L47 811L12 811L20 780L14 780L23 748L18 748ZM1537 711L1545 737L1542 737L1548 761L1544 761L1550 784L1524 784L1530 761L1525 761L1532 737L1528 737ZM936 730L946 762L942 762L950 790L944 790L952 818L920 818L928 790L922 790L931 762L926 762ZM1106 741L1114 765L1110 765L1117 787L1112 787L1118 809L1094 809L1100 787L1095 787L1102 765L1098 765ZM774 712L784 743L779 743L788 771L782 771L789 798L758 798L766 771L760 771L768 743L764 743ZM-16 697L-5 731L-10 731L-1 762L-7 762L1 793L-33 793L-25 762L-31 762L-22 731L-27 731ZM787 695L796 725L792 725L800 751L794 751L801 777L772 777L779 751L774 751L781 725L777 725ZM297 661L307 691L303 691L310 717L305 717L312 743L283 743L290 717L284 717L292 691L288 691ZM801 687L811 719L806 719L815 747L809 747L817 776L785 776L792 747L787 747L795 719L791 719ZM908 704L921 743L915 743L925 777L918 777L928 811L889 811L898 777L891 777L901 743L896 743ZM202 692L214 727L209 727L218 759L211 759L220 790L185 790L193 759L187 759L196 727L191 727ZM63 687L71 713L68 713L74 736L70 736L76 759L50 759L56 736L52 736L58 713L55 713ZM108 732L117 762L113 762L121 788L115 788L122 814L93 814L100 788L95 788L102 762L98 762ZM510 693L522 730L517 730L526 763L519 763L528 796L492 796L500 763L494 763L503 730L498 730ZM200 687L212 723L207 723L216 756L210 756L219 788L182 788L191 756L184 756L194 723L189 723ZM1500 706L1511 740L1506 740L1515 769L1509 769L1517 799L1484 799L1492 769L1486 769L1494 740L1490 740ZM543 716L555 752L550 752L559 783L553 783L561 815L526 815L534 783L528 783L537 752L532 752ZM1393 724L1402 752L1398 752L1405 776L1400 776L1407 801L1379 801L1386 776L1381 776L1388 752L1384 752ZM775 687L782 707L779 707L784 725L781 725L786 743L765 743L770 725L766 725L772 707L769 707ZM108 691L115 713L112 713L118 733L114 733L119 753L97 753L102 733L98 733L104 713L101 713ZM795 691L806 724L801 724L810 754L804 754L812 783L779 783L787 754L781 754L789 724L785 724ZM672 675L683 707L678 707L686 736L681 736L688 764L656 764L664 736L658 736L666 707L662 707ZM742 677L753 711L748 711L757 742L751 742L759 772L724 772L733 742L727 742L735 711L731 711ZM276 694L288 731L283 731L293 764L286 764L295 798L257 798L266 764L260 764L269 731L264 731ZM582 710L590 736L586 736L593 759L589 759L595 782L569 782L575 759L570 759L577 736L573 736ZM958 677L966 700L962 700L968 720L964 720L970 740L947 740L952 720L948 720L954 700L951 700ZM323 654L334 689L329 689L338 720L332 720L340 751L305 751L314 720L307 720L316 689L312 689ZM734 695L741 717L738 717L744 737L740 737L745 757L723 757L729 737L725 737L730 717L727 717ZM260 679L269 706L265 706L272 730L267 730L273 753L247 753L253 730L248 730L255 706L252 706ZM25 697L32 717L29 717L34 735L30 735L35 753L15 753L20 735L16 735L21 717L19 717ZM784 688L790 708L788 708L793 725L789 725L794 742L774 742L779 725L776 725L781 708L778 708ZM715 722L723 749L720 749L727 772L722 772L728 796L701 796L708 772L703 772L710 749L706 749ZM64 698L72 724L69 724L76 748L71 748L77 772L50 772L57 748L52 748L59 724L55 724ZM24 650L36 688L31 688L41 723L34 723L43 758L4 758L14 723L7 723L17 688L11 688ZM135 675L144 703L140 703L147 728L142 728L149 753L120 753L127 728L122 728L130 703L126 703ZM1001 679L1009 705L1005 705L1012 727L1007 727L1014 750L988 750L994 727L990 727L996 705L993 705ZM65 668L76 702L71 702L80 732L74 732L82 762L48 762L56 732L50 732L59 702L54 702Z'/%3E%3Cpath d='M0 1000 L0 820 C300 800 700 830 1000 810 C1250 795 1450 805 1600 800 L1600 1000 Z' fill='%230d1524'/%3E%3Cpath fill='%230b121f' d='M1272 813L1289 868L1282 868L1296 916L1286 916L1299 965L1245 965L1258 916L1248 916L1262 868L1255 868ZM473 784L488 830L481 830L493 870L485 870L496 911L450 911L461 870L453 870L465 830L458 830ZM1316 748L1336 809L1327 809L1343 863L1332 863L1347 918L1286 918L1300 863L1289 863L1305 809L1297 809ZM134 792L154 856L145 856L161 912L150 912L165 968L102 968L117 912L106 912L122 856L114 856ZM951 792L963 828L958 828L967 860L961 860L969 892L933 892L942 860L935 860L945 828L940 828ZM128 774L142 817L136 817L147 855L140 855L150 893L107 893L117 855L110 855L121 817L115 817ZM68 790L88 852L80 852L96 907L85 907L99 962L38 962L52 907L41 907L57 852L49 852ZM309 721L333 796L323 796L342 862L329 862L346 928L272 928L290 862L276 862L296 796L285 796ZM1298 764L1321 837L1311 837L1330 901L1317 901L1334 965L1262 965L1279 901L1266 901L1285 837L1275 837ZM36 805L51 853L45 853L57 896L49 896L60 939L12 939L24 896L15 896L27 853L21 853ZM1532 804L1545 843L1539 843L1550 878L1543 878L1552 913L1513 913L1522 878L1515 878L1525 843L1520 843ZM1374 809L1387 849L1381 849L1392 885L1384 885L1394 921L1354 921L1363 885L1356 885L1367 849L1361 849ZM528 789L548 852L539 852L556 908L544 908L560 964L497 964L512 908L500 908L517 852L508 852ZM266 767L287 833L278 833L295 891L283 891L299 949L234 949L249 891L238 891L255 833L246 833ZM1350 803L1369 861L1361 861L1376 912L1366 912L1379 964L1322 964L1335 912L1325 912L1340 861L1332 861ZM575 763L592 815L584 815L598 862L589 862L601 908L549 908L561 862L552 862L566 815L558 815ZM1258 759L1276 814L1268 814L1283 863L1273 863L1286 912L1231 912L1244 863L1234 863L1248 814L1241 814ZM258 759L279 824L270 824L287 881L275 881L291 938L226 938L242 881L230 881L247 824L238 824ZM1145 786L1162 838L1155 838L1168 883L1159 883L1171 929L1120 929L1132 883L1123 883L1136 838L1129 838ZM232 714L253 778L244 778L261 835L249 835L264 892L200 892L216 835L204 835L221 778L212 778ZM746 761L767 827L758 827L775 885L763 885L779 944L713 944L729 885L717 885L734 827L725 827ZM139 831L154 877L147 877L159 917L151 917L162 957L117 957L127 917L119 917L131 877L125 877ZM1034 763L1056 834L1046 834L1065 897L1052 897L1069 960L998 960L1015 897L1002 897L1021 834L1011 834ZM718 750L741 821L731 821L749 885L736 885L754 949L682 949L699 885L686 885L705 821L695 821ZM527 755L543 806L536 806L550 851L540 851L553 896L502 896L514 851L505 851L518 806L511 806ZM635 693L659 767L648 767L667 833L654 833L672 898L598 898L616 833L602 833L622 767L611 767ZM913 784L926 825L920 825L931 861L923 861L933 896L893 896L902 861L895 861L906 825L900 825ZM1045 767L1059 813L1053 813L1065 853L1056 853L1067 894L1022 894L1033 853L1025 853L1036 813L1030 813ZM230 766L250 827L241 827L257 882L246 882L261 937L200 937L214 882L203 882L219 827L211 827ZM-1 842L14 887L7 887L19 927L11 927L22 967L-23 967L-13 927L-21 927L-9 887L-15 887ZM341 762L360 820L351 820L367 872L356 872L370 924L312 924L326 872L315 872L330 820L322 820ZM1261 787L1280 847L1272 847L1287 900L1277 900L1291 953L1231 953L1246 900L1235 900L1250 847L1242 847ZM858 784L872 827L866 827L877 866L869 866L879 904L836 904L846 866L839 866L850 827L844 827ZM110 708L132 777L122 777L140 838L128 838L144 899L75 899L92 838L80 838L97 777L88 777ZM19 700L43 774L33 774L52 840L39 840L56 906L-18 906L0 840L-13 840L6 774L-4 774ZM1445 818L1458 857L1452 857L1462 892L1455 892L1465 927L1425 927L1435 892L1428 892L1438 857L1432 857ZM345 748L367 817L358 817L376 878L363 878L380 939L311 939L327 878L315 878L333 817L323 817ZM1033 776L1054 842L1044 842L1062 901L1050 901L1066 960L999 960L1015 901L1003 901L1021 842L1011 842ZM548 759L567 819L558 819L574 872L563 872L577 926L518 926L532 872L521 872L537 819L528 819ZM162 746L184 815L174 815L192 876L180 876L196 938L127 938L144 876L132 876L150 815L140 815ZM1316 810L1330 855L1324 855L1336 894L1328 894L1338 933L1294 933L1305 894L1297 894L1308 855L1302 855ZM741 716L762 781L753 781L770 839L758 839L774 896L709 896L724 839L713 839L730 781L721 781ZM548 742L565 798L558 798L572 847L562 847L575 896L520 896L533 847L523 847L538 798L530 798ZM886 743L907 808L898 808L915 866L903 866L919 924L854 924L870 866L858 866L875 808L866 808ZM1043 740L1063 800L1054 800L1070 854L1059 854L1073 907L1013 907L1028 854L1017 854L1033 800L1024 800ZM555 707L579 783L568 783L588 850L575 850L593 917L517 917L535 850L522 850L541 783L531 783ZM687 798L699 838L694 838L704 872L697 872L706 907L667 907L676 872L669 872L679 838L674 838ZM251 746L274 819L264 819L283 883L270 883L287 948L215 948L232 883L219 883L238 819L228 819ZM1415 730L1439 806L1428 806L1448 872L1434 872L1452 939L1377 939L1395 872L1382 872L1401 806L1391 806ZM1507 765L1526 822L1518 822L1533 873L1522 873L1536 923L1479 923L1493 873L1482 873L1497 822L1489 822ZM1535 767L1558 838L1548 838L1566 902L1553 902L1571 966L1499 966L1516 902L1503 902L1522 838L1512 838ZM774 737L795 804L786 804L803 863L791 863L807 923L741 923L757 863L745 863L762 804L753 804ZM1616 712L1639 785L1629 785L1647 849L1634 849L1652 913L1579 913L1597 849L1584 849L1603 785L1592 785ZM1512 777L1526 821L1520 821L1531 859L1523 859L1534 898L1490 898L1501 859L1493 859L1504 821L1498 821ZM1165 799L1180 847L1173 847L1186 889L1177 889L1188 932L1141 932L1152 889L1144 889L1156 847L1149 847ZM1028 845L1040 883L1035 883L1045 916L1038 916L1047 950L1010 950L1019 916L1012 916L1022 883L1016 883ZM433 770L450 823L442 823L456 870L446 870L459 918L406 918L419 870L409 870L423 823L416 823ZM1197 731L1218 796L1209 796L1226 855L1214 855L1230 913L1164 913L1180 855L1168 855L1185 796L1176 796ZM150 790L165 838L158 838L171 880L162 880L173 923L126 923L137 880L128 880L141 838L134 838ZM107 834L121 876L115 876L126 914L118 914L128 951L86 951L96 914L89 914L100 876L94 876Z'/%3E%3Cpath d='M1150 1000 L1215 840 L1270 790 L1330 762 L1400 752 L1450 760 L1500 800 L1560 870 L1600 900 L1600 1000 Z' fill='%230a111d'/%3E%3Cpath transform='translate(1318 596) scale(1.05)' d='M112 158 C121 150 120 136 108 131 C102 122 100 104 95 88 C92 74 88 62 84 52 L86 36 L80 42 L76 30 L72 42 C66 40 60 36 54 30 L42 18 L35 9 L38 16 L44 24 L39 24 L47 33 C51 40 54 46 55 55 C53 68 52 82 54 96 C53 116 50 138 47 155 L44 160 L60 160 L59 150 C61 136 62 124 64 118 C66 130 68 142 67 152 L62 160 L98 160 C104 160 108 160 112 158 Z' fill='%23080e19'/%3E%3C/svg%3E");
  --bg: #0d1422; --panel: #1c2638; --panel-2: #233047; --panel-3: #0f1727; --sunken: #0c1320;
  --input: #141e30; --raised: #172134; --text: #e9eef7; --text-muted: #a4b0c4; --text-dim: #8592a8;
  --gold: #4a95f7; --line: rgba(140,170,220,0.12);
  --tb-page: #0d1422; --tb-topbar: #0f1626; --tb-rail: #0f1626; --tb-list: #111a2b;
  --tb-chat: #0d1422; --tb-header: #0f1727; --tb-composer: #0f1727;
  --tb-line: rgba(140,170,220,0.10);
  --tb-text: #e9eef7; --tb-text-2: #c3cddd; --tb-text-3: #8592a8;
  --tb-accent: #2f86f6; --tb-accent-ink: #ffffff; --tb-accent-soft: rgba(47,134,246,0.16);
  --tb-send-bg: #2f86f6; --tb-send-ink: #ffffff;
  --tb-pill-bg: transparent; --tb-pill-border: rgba(160,185,230,0.2);
  --tb-pill-active-bg: #2f86f6; --tb-pill-active-ink: #ffffff;
  --tb-badge-bg: #2f86f6; --tb-badge-ink: #ffffff;
  --tb-row-hover: #152035; --tb-row-active: #18243a; --tb-row-active-bar: #2f86f6;
  --tb-bubble-in: #1c2638; --tb-bubble-in-text: #e9eef7; --tb-bubble-in-border: rgba(255,255,255,0.04);
  --tb-bubble-out: linear-gradient(180deg, #2259ab 0%, #1b4a92 100%); --tb-bubble-out-text: #ffffff;
  --tb-tick: #9cc6ff;
  --tb-day-bg: #172134; --tb-day-text: #d5dceb;
  --tb-input-bg: #121b2c; --tb-input-border: rgba(160,185,230,0.16); --tb-search-bg: #141d2f;
  --tb-rail-cut: #13294a; --tb-mark: #7f8ba0;
  --tb-wallpaper: var(--tbwp-midnight-blue) 50% 100% / cover no-repeat, #0d1422;
}
html[data-theme="midnight-purple"] {
  --tbwp-midnight-purple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMax slice'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23121233'/%3E%3Cstop offset='1' stop-color='%230e0e25'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1600' height='1000' fill='url(%23s)'/%3E%3Cg fill='%23fff' fill-opacity='0.25'%3E%3Ccircle cx='997' cy='386' r='0.8'/%3E%3Ccircle cx='1345' cy='403' r='1'/%3E%3Ccircle cx='1038' cy='468' r='0.8'/%3E%3Ccircle cx='595' cy='452' r='1.5'/%3E%3Ccircle cx='870' cy='298' r='0.8'/%3E%3Ccircle cx='1170' cy='212' r='1'/%3E%3Ccircle cx='1466' cy='398' r='1'/%3E%3Ccircle cx='1219' cy='37' r='1.5'/%3E%3Ccircle cx='203' cy='1' r='0.8'/%3E%3Ccircle cx='335' cy='112' r='1'/%3E%3Ccircle cx='1396' cy='150' r='1'/%3E%3Ccircle cx='863' cy='352' r='1'/%3E%3Ccircle cx='291' cy='504' r='1'/%3E%3Ccircle cx='1547' cy='465' r='1.2'/%3E%3Ccircle cx='35' cy='216' r='1'/%3E%3Ccircle cx='422' cy='173' r='0.8'/%3E%3Ccircle cx='954' cy='368' r='0.8'/%3E%3Ccircle cx='496' cy='426' r='1.5'/%3E%3Ccircle cx='1114' cy='96' r='1.5'/%3E%3Ccircle cx='1127' cy='30' r='0.8'/%3E%3Ccircle cx='1519' cy='186' r='1.5'/%3E%3Ccircle cx='29' cy='410' r='1.2'/%3E%3Ccircle cx='602' cy='437' r='1.5'/%3E%3Ccircle cx='75' cy='94' r='1'/%3E%3Ccircle cx='190' cy='128' r='1.5'/%3E%3Ccircle cx='551' cy='184' r='1.2'/%3E%3Ccircle cx='1241' cy='56' r='1.2'/%3E%3Ccircle cx='1376' cy='19' r='0.8'/%3E%3Ccircle cx='334' cy='267' r='1.2'/%3E%3Ccircle cx='1469' cy='177' r='0.8'/%3E%3Ccircle cx='500' cy='165' r='1'/%3E%3Ccircle cx='1278' cy='326' r='1.2'/%3E%3Ccircle cx='1595' cy='84' r='0.8'/%3E%3Ccircle cx='130' cy='312' r='1.5'/%3E%3Ccircle cx='51' cy='385' r='1.2'/%3E%3Ccircle cx='1322' cy='237' r='1.5'/%3E%3Ccircle cx='233' cy='509' r='0.8'/%3E%3Ccircle cx='1283' cy='174' r='1'/%3E%3Ccircle cx='209' cy='380' r='1'/%3E%3Ccircle cx='1009' cy='410' r='0.8'/%3E%3Ccircle cx='270' cy='194' r='0.8'/%3E%3Ccircle cx='1352' cy='153' r='1.5'/%3E%3Ccircle cx='1475' cy='323' r='1'/%3E%3Ccircle cx='1562' cy='236' r='1.5'/%3E%3Ccircle cx='1102' cy='165' r='1.2'/%3E%3Ccircle cx='466' cy='210' r='1'/%3E%3Ccircle cx='180' cy='427' r='1'/%3E%3Ccircle cx='1003' cy='260' r='1.2'/%3E%3Ccircle cx='288' cy='256' r='1.2'/%3E%3Ccircle cx='101' cy='413' r='1.2'/%3E%3Ccircle cx='1111' cy='345' r='1.2'/%3E%3Ccircle cx='581' cy='366' r='1.2'/%3E%3Ccircle cx='1336' cy='138' r='1.2'/%3E%3Ccircle cx='1531' cy='177' r='1'/%3E%3Ccircle cx='929' cy='6' r='1.2'/%3E%3Ccircle cx='521' cy='142' r='1.2'/%3E%3Ccircle cx='1307' cy='337' r='1.2'/%3E%3Ccircle cx='557' cy='335' r='1.5'/%3E%3Ccircle cx='560' cy='438' r='1.5'/%3E%3Ccircle cx='1562' cy='497' r='1'/%3E%3Ccircle cx='847' cy='86' r='1.2'/%3E%3Ccircle cx='1500' cy='248' r='0.8'/%3E%3Ccircle cx='1151' cy='380' r='1'/%3E%3Ccircle cx='987' cy='487' r='1.5'/%3E%3Ccircle cx='484' cy='288' r='1.2'/%3E%3Ccircle cx='1153' cy='14' r='1'/%3E%3Ccircle cx='938' cy='325' r='1'/%3E%3Ccircle cx='350' cy='357' r='0.8'/%3E%3Ccircle cx='1578' cy='509' r='1'/%3E%3Ccircle cx='87' cy='69' r='1.2'/%3E%3C/g%3E%3Ccircle cx='820' cy='420' r='66' fill='%232e2c60' fill-opacity='0.55'/%3E%3Cpath d='M0 1000 L0 513 L49 437 L101 375 L155 494 L217 592 L271 517 L310 407 L377 490 L442 528 L492 472 L549 415 L616 474 L688 569 L736 469 L784 372 L821 451 L859 560 L901 513 L933 450 L986 510 L1026 566 L1071 440 L1115 320 L1185 444 L1256 548 L1297 441 L1349 324 L1407 423 L1472 568 L1548 474 L1600 414 L1600 1000 Z' fill='%2317163a'/%3E%3Cpath d='M0 1000 L0 719 L41 607 L90 524 L118 610 L147 693 L172 635 L211 578 L259 623 L313 669 L374 633 L423 573 L470 639 L528 719 L578 626 L621 563 L661 606 L692 672 L719 608 L741 569 L785 648 L832 707 L883 635 L918 554 L969 613 L1021 661 L1067 604 L1114 531 L1153 628 L1182 720 L1224 638 L1271 578 L1325 619 L1363 658 L1394 622 L1439 570 L1465 656 L1504 714 L1532 645 L1574 583 L1607 651 L1600 711 L1600 1000 Z' fill='%23141332'/%3E%3Cpath fill='%2312112d' d='M1332 755L1338 775L1336 775L1341 793L1337 793L1342 812L1322 812L1327 793L1323 793L1328 775L1325 775ZM1610 683L1621 716L1616 716L1625 745L1619 745L1627 775L1594 775L1602 745L1596 745L1604 716L1600 716ZM280 743L287 765L284 765L290 785L286 785L291 804L269 804L275 785L271 785L276 765L273 765ZM90 722L97 744L94 744L100 764L96 764L102 784L79 784L84 764L80 764L86 744L83 744ZM1063 668L1074 702L1069 702L1078 732L1072 732L1080 762L1046 762L1054 732L1048 732L1057 702L1052 702ZM917 715L923 735L920 735L926 754L922 754L927 772L906 772L911 754L908 754L913 735L910 735ZM1003 697L1009 715L1006 715L1011 731L1008 731L1012 747L994 747L998 731L995 731L1000 715L997 715ZM1104 689L1113 717L1109 717L1117 743L1112 743L1118 768L1090 768L1097 743L1092 743L1099 717L1095 717ZM1056 646L1068 684L1063 684L1073 717L1066 717L1075 751L1037 751L1046 717L1039 717L1049 684L1044 684ZM463 710L473 740L469 740L477 767L471 767L478 794L448 794L455 767L450 767L458 740L454 740ZM456 677L468 716L463 716L473 750L466 750L475 784L437 784L446 750L439 750L449 716L444 716ZM342 705L348 724L345 724L350 742L347 742L351 759L332 759L337 742L333 742L338 724L336 724ZM1345 751L1353 775L1350 775L1356 797L1352 797L1358 818L1333 818L1339 797L1335 797L1341 775L1338 775ZM1305 674L1317 711L1312 711L1321 744L1315 744L1323 776L1287 776L1296 744L1289 744L1299 711L1293 711ZM618 684L624 704L622 704L627 723L623 723L628 741L607 741L612 723L609 723L614 704L611 704ZM540 658L550 689L546 689L554 716L548 716L555 743L525 743L532 716L527 716L535 689L531 689ZM1396 696L1405 725L1401 725L1409 751L1403 751L1410 776L1381 776L1388 751L1383 751L1391 725L1387 725ZM619 739L628 767L624 767L632 792L627 792L633 817L605 817L612 792L607 792L614 767L610 767ZM156 702L166 731L162 731L169 757L164 757L171 783L142 783L149 757L143 757L151 731L147 731ZM611 715L622 751L617 751L627 783L620 783L629 816L593 816L601 783L595 783L604 751L599 751ZM684 702L695 737L690 737L700 769L693 769L702 800L667 800L675 769L669 769L678 737L673 737ZM117 675L129 712L124 712L134 746L127 746L136 779L99 779L108 746L101 746L111 712L105 712ZM327 678L337 711L333 711L341 741L335 741L343 770L310 770L318 741L312 741L321 711L316 711ZM1351 747L1359 771L1355 771L1361 793L1357 793L1363 814L1339 814L1344 793L1340 793L1346 771L1343 771ZM1137 672L1148 708L1143 708L1152 739L1146 739L1154 770L1119 770L1128 739L1121 739L1130 708L1125 708ZM1165 692L1174 718L1170 718L1177 741L1172 741L1178 764L1152 764L1159 741L1154 741L1161 718L1157 718ZM1015 661L1028 700L1022 700L1032 735L1025 735L1035 769L996 769L1005 735L998 735L1008 700L1003 700ZM40 648L52 687L47 687L57 722L50 722L59 757L20 757L29 722L22 722L33 687L27 687ZM276 689L282 709L280 709L285 726L281 726L286 743L266 743L271 726L268 726L273 709L270 709ZM286 717L293 740L290 740L295 759L291 759L297 779L274 779L280 759L276 759L282 740L278 740ZM1517 678L1527 710L1523 710L1531 739L1525 739L1533 768L1501 768L1508 739L1503 739L1511 710L1507 710ZM680 747L688 771L685 771L691 793L687 793L693 815L668 815L674 793L669 793L676 771L672 771ZM1492 708L1500 733L1496 733L1503 755L1498 755L1504 777L1479 777L1485 755L1481 755L1487 733L1484 733ZM294 656L305 689L300 689L308 717L303 717L310 746L278 746L286 717L280 717L288 689L284 689ZM1405 675L1417 712L1412 712L1421 745L1415 745L1424 778L1387 778L1396 745L1389 745L1399 712L1394 712ZM885 749L892 769L889 769L894 787L891 787L896 805L875 805L880 787L876 787L882 769L879 769ZM1211 652L1221 685L1216 685L1225 714L1219 714L1227 743L1194 743L1202 714L1196 714L1205 685L1200 685ZM1450 730L1458 755L1455 755L1461 778L1457 778L1463 800L1437 800L1443 778L1439 778L1445 755L1442 755ZM498 688L505 707L502 707L507 725L503 725L508 742L489 742L493 725L490 725L495 707L492 707ZM729 652L741 688L735 688L745 720L738 720L747 752L711 752L719 720L713 720L722 688L717 688ZM1268 707L1276 732L1272 732L1279 754L1274 754L1280 776L1255 776L1261 754L1257 754L1263 732L1260 732ZM374 633L386 673L381 673L391 708L384 708L393 743L354 743L363 708L356 708L366 673L361 673ZM1152 708L1162 738L1158 738L1166 765L1160 765L1167 793L1137 793L1144 765L1139 765L1147 738L1143 738ZM993 692L1005 730L1000 730L1009 763L1003 763L1012 797L974 797L983 763L976 763L986 730L981 730ZM1096 708L1103 730L1100 730L1106 749L1102 749L1107 769L1085 769L1090 749L1086 749L1092 730L1089 730ZM90 668L102 707L97 707L107 742L100 742L109 777L70 777L79 742L72 742L83 707L77 707ZM1252 696L1259 718L1256 718L1262 737L1258 737L1263 757L1241 757L1247 737L1243 737L1248 718L1245 718ZM52 712L62 743L58 743L66 770L60 770L68 798L36 798L44 770L38 770L46 743L42 743ZM424 699L433 727L429 727L436 751L431 751L438 776L410 776L417 751L412 751L419 727L415 727ZM1097 682L1104 704L1101 704L1107 723L1103 723L1108 743L1087 743L1092 723L1088 723L1093 704L1090 704ZM1350 685L1362 721L1357 721L1366 753L1360 753L1368 785L1332 785L1341 753L1334 753L1344 721L1339 721ZM1521 666L1532 699L1527 699L1536 729L1529 729L1538 759L1504 759L1512 729L1506 729L1515 699L1510 699ZM1297 722L1304 742L1301 742L1306 760L1302 760L1307 778L1287 778L1292 760L1288 760L1294 742L1291 742ZM1100 691L1110 723L1106 723L1114 751L1108 751L1116 780L1084 780L1091 751L1086 751L1094 723L1090 723ZM1262 754L1268 773L1265 773L1270 790L1267 790L1271 807L1252 807L1257 790L1253 790L1258 773L1256 773ZM711 722L721 753L717 753L725 782L720 782L727 810L695 810L703 782L697 782L706 753L701 753ZM1538 734L1545 756L1542 756L1548 776L1544 776L1549 796L1527 796L1532 776L1528 776L1534 756L1531 756ZM1031 697L1038 719L1034 719L1040 739L1036 739L1042 759L1019 759L1025 739L1021 739L1027 719L1023 719ZM1500 649L1511 685L1506 685L1516 716L1509 716L1518 747L1483 747L1491 716L1485 716L1494 685L1489 685ZM1596 686L1603 708L1600 708L1605 727L1601 727L1606 746L1585 746L1590 727L1586 727L1592 708L1589 708ZM1177 688L1188 719L1183 719L1191 747L1186 747L1193 775L1162 775L1169 747L1164 747L1172 719L1167 719ZM566 726L575 753L571 753L578 777L574 777L580 801L553 801L559 777L555 777L562 753L558 753ZM837 683L843 704L840 704L846 722L842 722L847 741L826 741L831 722L827 722L833 704L830 704ZM1220 720L1231 753L1226 753L1235 782L1229 782L1237 811L1204 811L1212 782L1206 782L1214 753L1210 753ZM1619 668L1629 698L1625 698L1633 724L1627 724L1634 751L1604 751L1612 724L1606 724L1614 698L1610 698ZM772 664L784 699L779 699L788 730L782 730L790 761L755 761L763 730L757 730L766 699L761 699ZM640 725L647 746L644 746L649 764L646 764L651 783L630 783L635 764L631 764L637 746L634 746ZM753 712L764 745L759 745L768 775L762 775L770 804L737 804L745 775L739 775L747 745L743 745ZM1567 672L1578 704L1573 704L1581 733L1576 733L1583 762L1551 762L1559 733L1553 733L1561 704L1557 704ZM788 731L795 755L792 755L798 776L794 776L800 796L776 796L782 776L778 776L784 755L780 755ZM1286 708L1298 745L1292 745L1302 778L1295 778L1304 811L1267 811L1276 778L1269 778L1279 745L1274 745ZM98 674L109 709L104 709L113 740L107 740L115 770L81 770L89 740L83 740L92 709L87 709ZM1242 713L1247 731L1245 731L1250 747L1246 747L1251 763L1233 763L1237 747L1234 747L1238 731L1236 731ZM1522 684L1529 705L1526 705L1531 724L1528 724L1533 742L1512 742L1517 724L1513 724L1518 705L1515 705ZM215 711L226 744L221 744L230 773L224 773L232 803L199 803L207 773L201 773L209 744L205 744ZM11 721L17 740L14 740L19 757L16 757L20 774L1 774L6 757L2 757L7 740L5 740ZM155 687L166 722L161 722L170 753L164 753L172 785L137 785L146 753L139 753L148 722L143 722ZM507 683L515 707L511 707L518 729L513 729L519 751L495 751L500 729L496 729L502 707L499 707ZM796 673L804 698L801 698L807 721L803 721L809 743L784 743L790 721L785 721L792 698L788 698ZM870 648L880 682L876 682L884 712L878 712L887 742L853 742L861 712L855 712L863 682L859 682ZM180 698L192 737L187 737L197 772L190 772L199 806L160 806L169 772L162 772L173 737L167 737ZM695 751L703 774L699 774L705 795L701 795L707 816L683 816L689 795L685 795L691 774L687 774ZM7 668L17 698L13 698L20 724L15 724L22 750L-7 750L-0 724L-6 724L2 698L-2 698ZM310 682L318 707L315 707L321 730L317 730L323 753L297 753L303 730L299 730L305 707L302 707ZM996 759L1002 780L999 780L1005 800L1001 800L1006 819L985 819L990 800L986 800L992 780L989 780ZM420 704L430 735L425 735L433 763L428 763L435 790L404 790L412 763L406 763L414 735L410 735ZM216 679L227 713L222 713L231 744L225 744L233 775L199 775L207 744L201 744L210 713L205 713ZM684 706L692 731L689 731L695 753L691 753L697 776L672 776L678 753L673 753L680 731L676 731ZM354 668L364 699L360 699L368 726L362 726L370 754L339 754L346 726L341 726L349 699L345 699ZM59 663L70 695L65 695L74 724L68 724L76 753L43 753L51 724L45 724L54 695L49 695Z'/%3E%3Cpath d='M0 1000 L0 820 C300 800 700 830 1000 810 C1250 795 1450 805 1600 800 L1600 1000 Z' fill='%230f0f27'/%3E%3Cpath fill='%230d0c22' d='M756 736L774 792L766 792L781 841L771 841L784 890L728 890L742 841L732 841L746 792L738 792ZM188 751L210 821L201 821L219 883L206 883L223 945L153 945L170 883L157 883L176 821L166 821ZM320 863L332 899L327 899L336 931L330 931L338 963L302 963L311 931L305 931L314 899L309 899ZM367 741L387 805L378 805L395 862L383 862L399 918L335 918L350 862L339 862L355 805L346 805ZM741 834L755 878L749 878L761 917L753 917L763 956L719 956L730 917L722 917L733 878L727 878ZM477 794L495 851L487 851L502 901L492 901L506 951L449 951L463 901L452 901L467 851L459 851ZM1268 814L1284 865L1277 865L1290 910L1281 910L1293 955L1243 955L1255 910L1246 910L1259 865L1252 865ZM1315 790L1335 852L1327 852L1343 907L1332 907L1346 963L1284 963L1299 907L1288 907L1304 852L1295 852ZM82 764L100 819L92 819L106 869L96 869L110 918L54 918L67 869L57 869L72 819L64 819ZM214 794L229 840L222 840L234 880L226 880L237 921L192 921L202 880L194 880L206 840L200 840ZM134 807L150 858L143 858L157 904L147 904L160 950L108 950L120 904L111 904L124 858L117 858ZM442 752L465 825L455 825L473 889L460 889L478 954L405 954L423 889L410 889L429 825L418 825ZM1218 775L1236 830L1228 830L1242 879L1233 879L1246 928L1191 928L1204 879L1194 879L1208 830L1201 830ZM855 796L868 836L863 836L873 871L866 871L875 906L836 906L845 871L838 871L848 836L843 836ZM1109 827L1122 867L1117 867L1127 903L1120 903L1129 938L1089 938L1099 903L1092 903L1102 867L1097 867ZM998 702L1020 771L1011 771L1028 831L1016 831L1032 892L964 892L981 831L968 831L986 771L977 771ZM1092 764L1111 824L1103 824L1118 878L1107 878L1122 931L1062 931L1076 878L1065 878L1081 824L1073 824ZM802 785L820 843L812 843L827 894L817 894L831 945L773 945L787 894L777 894L792 843L784 843ZM718 750L739 817L730 817L747 877L735 877L751 936L684 936L700 877L688 877L705 817L696 817ZM1513 734L1532 792L1523 792L1539 843L1528 843L1542 895L1484 895L1498 843L1487 843L1503 792L1494 792ZM220 821L237 873L230 873L244 920L234 920L247 967L194 967L207 920L197 920L211 873L204 873ZM13 722L34 788L25 788L42 847L30 847L46 907L-20 907L-4 847L-16 847L1 788L-8 788ZM450 849L462 886L456 886L466 919L459 919L468 952L431 952L440 919L433 919L443 886L438 886ZM982 770L1004 841L994 841L1012 903L1000 903L1017 965L946 965L963 903L951 903L969 841L959 841ZM657 685L681 759L671 759L690 825L677 825L695 891L620 891L638 825L625 825L644 759L634 759ZM1504 767L1518 813L1512 813L1524 853L1516 853L1527 893L1481 893L1492 853L1484 853L1496 813L1489 813ZM125 708L149 782L138 782L157 848L144 848L162 914L88 914L106 848L92 848L112 782L101 782ZM556 776L578 844L568 844L586 904L574 904L590 965L522 965L539 904L526 904L544 844L535 844ZM973 767L992 825L984 825L999 877L989 877L1003 929L944 929L958 877L948 877L963 825L955 825ZM131 804L144 845L138 845L149 881L141 881L151 917L110 917L120 881L113 881L123 845L118 845ZM1269 821L1285 874L1278 874L1292 921L1282 921L1295 968L1242 968L1255 921L1245 921L1259 874L1252 874ZM1081 808L1097 859L1090 859L1103 905L1094 905L1106 950L1055 950L1067 905L1058 905L1072 859L1064 859ZM846 821L861 866L854 866L866 905L858 905L869 944L824 944L835 905L827 905L839 866L832 866ZM507 822L523 871L516 871L529 914L520 914L532 957L483 957L494 914L486 914L498 871L491 871ZM1438 793L1459 856L1450 856L1466 912L1455 912L1470 969L1407 969L1422 912L1411 912L1427 856L1418 856ZM388 803L401 842L396 842L406 878L399 878L408 914L368 914L378 878L371 878L381 842L376 842ZM1288 709L1309 776L1300 776L1317 836L1305 836L1322 896L1254 896L1270 836L1258 836L1276 776L1266 776ZM1539 815L1551 854L1546 854L1556 888L1549 888L1558 923L1519 923L1529 888L1522 888L1532 854L1526 854ZM284 763L304 825L295 825L311 881L300 881L315 936L253 936L268 881L257 881L273 825L264 825ZM1007 763L1027 825L1018 825L1034 879L1023 879L1038 934L977 934L991 879L980 879L996 825L988 825ZM648 803L662 848L656 848L667 889L659 889L670 929L625 929L636 889L628 889L639 848L633 848ZM958 797L972 842L966 842L978 883L970 883L981 923L935 923L946 883L938 883L950 842L943 842ZM118 719L141 790L131 790L150 853L137 853L154 916L83 916L100 853L87 853L106 790L96 790ZM672 797L685 839L679 839L690 876L683 876L693 914L651 914L661 876L653 876L664 839L658 839ZM890 763L909 821L901 821L916 873L905 873L919 925L861 925L875 873L865 873L880 821L872 821ZM515 842L528 882L522 882L532 917L525 917L535 953L495 953L504 917L497 917L508 882L502 882ZM521 858L534 897L528 897L539 932L532 932L541 966L502 966L511 932L504 932L514 897L509 897ZM206 739L224 795L216 795L231 846L221 846L234 896L178 896L191 846L181 846L196 795L188 795ZM291 769L308 824L300 824L315 872L305 872L318 921L263 921L276 872L267 872L281 824L273 824ZM1459 741L1482 812L1472 812L1491 876L1478 876L1495 939L1423 939L1441 876L1428 876L1446 812L1436 812ZM1288 698L1311 767L1301 767L1319 829L1306 829L1323 890L1254 890L1270 829L1258 829L1276 767L1266 767ZM1083 805L1096 845L1090 845L1100 881L1093 881L1103 917L1062 917L1072 881L1065 881L1075 845L1070 845ZM583 752L604 818L595 818L612 877L600 877L616 936L550 936L566 877L554 877L571 818L562 818ZM703 816L719 865L712 865L725 908L716 908L728 952L679 952L691 908L682 908L695 865L688 865ZM280 736L303 807L293 807L312 870L299 870L316 934L244 934L262 870L249 870L267 807L257 807ZM932 764L954 834L945 834L963 897L950 897L967 960L897 960L914 897L901 897L919 834L909 834ZM579 716L601 784L591 784L609 845L597 845L613 906L545 906L561 845L549 845L567 784L557 784ZM512 842L525 885L519 885L531 923L523 923L533 961L490 961L501 923L493 923L504 885L498 885ZM1600 725L1621 792L1612 792L1629 851L1617 851L1633 910L1567 910L1583 851L1571 851L1588 792L1579 792ZM1524 739L1541 794L1534 794L1548 842L1538 842L1551 890L1497 890L1510 842L1500 842L1514 794L1507 794Z'/%3E%3Cpath d='M1150 1000 L1215 840 L1270 790 L1330 762 L1400 752 L1450 760 L1500 800 L1560 870 L1600 900 L1600 1000 Z' fill='%230c0b20'/%3E%3Cpath transform='translate(1318 596) scale(1.05)' d='M112 158 C121 150 120 136 108 131 C102 122 100 104 95 88 C92 74 88 62 84 52 L86 36 L80 42 L76 30 L72 42 C66 40 60 36 54 30 L42 18 L35 9 L38 16 L44 24 L39 24 L47 33 C51 40 54 46 55 55 C53 68 52 82 54 96 C53 116 50 138 47 155 L44 160 L60 160 L59 150 C61 136 62 124 64 118 C66 130 68 142 67 152 L62 160 L98 160 C104 160 108 160 112 158 Z' fill='%2309081a'/%3E%3C/svg%3E");
  --bg: #0e0f21; --panel: #1b1c35; --panel-2: #22233f; --panel-3: #101127; --sunken: #0c0d1e;
  --input: #15162e; --raised: #17182f; --text: #ecebf7; --text-muted: #a9a6c4; --text-dim: #8d8aa8;
  --gold: #d4a73f; --line: rgba(160,150,255,0.12);
  --tb-page: #0e0f21; --tb-topbar: #0f1023; --tb-rail: #0f1023; --tb-list: #111228;
  --tb-chat: #0e0f22; --tb-header: #101127; --tb-composer: #101127;
  --tb-line: rgba(160,150,255,0.09);
  --tb-text: #ecebf7; --tb-text-2: #c8c6e0; --tb-text-3: #8d8aa8;
  --tb-accent: #d4a73f; --tb-accent-ink: #1a1406; --tb-accent-soft: rgba(212,167,63,0.13);
  --tb-send-bg: #6f5fe6; --tb-send-ink: #ffffff;
  --tb-pill-bg: transparent; --tb-pill-border: rgba(170,160,255,0.18);
  --tb-pill-active-bg: #c99d3a; --tb-pill-active-ink: #1a1406;
  --tb-badge-bg: #e0b44a; --tb-badge-ink: #1a1406;
  --tb-row-hover: #16172f; --tb-row-active: #1b1c38; --tb-row-active-bar: transparent;
  --tb-bubble-in: #1b1c35; --tb-bubble-in-text: #ecebf7; --tb-bubble-in-border: rgba(255,255,255,0.04);
  --tb-bubble-out: linear-gradient(180deg, #3e38a3 0%, #332e8c 100%); --tb-bubble-out-text: #ffffff;
  --tb-tick: #cfc9ff;
  --tb-day-bg: #17182f; --tb-day-text: #d9d7ee;
  --tb-input-bg: #121329; --tb-input-border: rgba(170,160,255,0.16); --tb-search-bg: #15162e;
  --tb-rail-cut: #2b2412; --tb-mark: #8784a3;
  --tb-wallpaper: var(--tbwp-midnight-purple) 50% 100% / cover no-repeat, #0e0f22;
}
/* Sign-in, splash and lock screens keep the original dark + gold look in every theme. */
#auth-view, #splash-screen, #panic-lock-screen, #applock-overlay {
  --bg: #111316; --panel: #202328; --panel-2: #262a30; --panel-3: #181b1f; --sunken: #14171b;
  --input: #20242a; --raised: #202328; --text: #f2f3f5; --text-muted: #aeb4bf; --text-dim: #969eab;
  --gold: #c9a24a; --line: rgba(201,162,74,0.15);
  color: #f2f3f5;
}

/* ── Theme colors: every screen size ─────────────────────────────────────────────────────── */
body { background: var(--tb-page); color: var(--tb-text); }
#sidebar { background: var(--tb-list); border-right-color: var(--tb-line); }
#sidebar-header { border-bottom-color: var(--tb-line); }
#hamburger-btn { color: var(--tb-text-2) !important; }
#app-title { color: var(--tb-text); }
#user-info { color: var(--tb-text-3); }
#sidebar-search-btn, #sidebar-lock-btn { color: var(--tb-text-3); }
#app-menu { background: var(--raised) !important; border-color: var(--tb-line) !important; }
#sidebar-footer { border-top-color: var(--tb-line); background: var(--tb-list); }
.sb-icon-btn { color: var(--tb-text-3); }
.sb-icon-btn:hover { background: var(--tb-accent-soft); color: var(--tb-accent); }
#new-msg-pill { background: var(--tb-send-bg); color: var(--tb-send-ink); box-shadow: none; }
#tbl-communities-section { border-top-color: var(--tb-line); }
/* Pill tabs (All / Unread / Archived) */
#room-filter-bar { scrollbar-width: none; }
#room-filter-bar::-webkit-scrollbar { display: none; }
.room-filter-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--tb-pill-bg); border: 1px solid var(--tb-pill-border); color: var(--tb-text-2); }
.room-filter-chip:hover { border-color: var(--tb-accent); }
.room-filter-chip.active { background: var(--tb-pill-active-bg); color: var(--tb-pill-active-ink); border-color: transparent; }
.room-filter-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--tb-badge-bg); color: var(--tb-badge-ink); font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.room-filter-chip.active .room-filter-count { background: var(--tb-pill-active-ink); color: var(--tb-pill-active-bg); }
.room-list-empty { color: var(--tb-text-3); }
/* Chat list status (2.3.1): "Loading your chats…", "Your chats are in Archived" + its button.
   --tb-text-2 on the list reads at 9:1 or better in every theme (--tb-text-3 is under 4.5:1 in the
   light ones). The button is an outline with the theme text color: a filled blue button with white
   text is under 4.5:1 in the blue themes. */
#room-list .room-list-status { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 18px; }
#room-list .room-list-status-text { color: var(--tb-text-2); font-size: 15px; line-height: 1.45; }
#room-list .room-list-status-detail { color: var(--tb-text-2); font-size: 14px; line-height: 1.5; max-width: 300px; }
#room-list .room-list-status-bar {
  width: 140px; max-width: 80%; height: 4px; border-radius: 4px; overflow: hidden; background: var(--tb-line);
}
#room-list .room-list-status-bar::after {
  content: ''; display: block; height: 100%; width: 60%; border-radius: 4px;
  background: var(--tb-accent); animation: loading-slide 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { #room-list .room-list-status-bar::after { animation: none; width: 100%; } }
#room-list .room-list-status-btn {
  min-height: 44px; padding: 10px 22px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 600;
  background: var(--tb-accent-soft); color: var(--tb-text); border: 1.5px solid var(--tb-accent);
}
#room-list .room-list-status-btn:focus-visible { outline: 2px solid var(--tb-accent); outline-offset: 2px; }
@media (max-width: 640px), (pointer: coarse) {
  #room-list .room-list-status-text { font-size: 17px; }
  #room-list .room-list-status-detail { font-size: 16px; }
  #room-list .room-list-status-btn { font-size: 16px; }
}

/* Confirm / prompt boxes (2.3.1). The message text was a fixed pale grey (#e0e6f0, picked for the
   dark look): 1.25:1 on the white card of Light Blue and Cream Gold, unreadable. It now uses the
   theme's text color on the theme's card (--text on --raised: 13.8:1 or better in all five themes),
   and outline buttons on any card (Cancel, Copy, ...) use --text-muted (5.7:1 or better; the old
   #b3aea2 was 2.2:1 on white). A button with its own inline colors (red Decline, ...) keeps them.
   On phones the text is bigger, and the dyslexia font (Settings > Appearance) applies here too. */
.tbl-dlg-msg { color: var(--text); font-size: 15px; line-height: 1.5; font-family: var(--chat-font, inherit); overflow-wrap: anywhere; }
.settings-card .settings-close { color: var(--text-muted); border-color: #5a564d; border-color: color-mix(in srgb, var(--text-muted) 45%, transparent); }
@media (max-width: 640px), (pointer: coarse) {
  .tbl-dlg-msg { font-size: 17px; line-height: 1.55; }
  #confirm-overlay .settings-close, #prompt-overlay .settings-close { min-height: 46px; padding: 12px 22px; font-size: 16px; }
  /* The two buttons (2.3.5). On one line they ran off the LEFT edge of the card on a narrow phone
     (iPhone SE / 320 px, or any phone with Display Zoom): the long labels ("Set recovery password",
     "Remove and sign in") never wrap, so Cancel was cut off or hidden, and only the dark backdrop
     could cancel. Now, when both do not fit, they stack: the action on top, Cancel full width
     under it, and a long label wraps inside its button. */
  .tbl-dlg-row { flex-wrap: wrap-reverse; }
  .tbl-dlg-row > button { flex: 1 1 auto; max-width: 100%; box-sizing: border-box; }
  .tbl-dlg-row > .auth-btn { white-space: normal; text-align: center; }
  .tbl-dlg-row > .tbl-dlg-btn { flex: 1 1 auto; height: auto; min-height: 46px; line-height: 1.2; }
}
/* Chat rows */
.room-item, .room-item .room-swipe-content { background: var(--tb-list); }
.room-item:hover, .room-item:hover .room-swipe-content { background: var(--tb-row-hover); }
.room-item.active, .room-item.active .room-swipe-content { background: var(--tb-row-active); }
.room-item.active { box-shadow: inset 3px 0 0 var(--tb-row-active-bar); }
.room-name { color: var(--tb-text); }
.room-preview, .room-sub { color: var(--tb-text-2); }
.room-item.unread .room-preview { color: var(--tb-text-2); }
.room-time { color: var(--tb-text-3); }
.room-badge { background: var(--tb-badge-bg); color: var(--tb-badge-ink); }
.room-kebab { color: var(--tb-text-3); }
/* Avatars: gold-ringed founder avatar in every theme (as in all five mockups) */
.room-avatar, #chat-peer-avatar, #sidebar-user-avatar { background: #3b2d10; color: #e9b944; }
.tbl-founder-ring { box-shadow: 0 0 0 2px var(--tb-list), 0 0 0 3.5px #d4a63f; }
#chat-peer-avatar.tbl-founder-ring { box-shadow: 0 0 0 2px var(--tb-header), 0 0 0 3.5px #d4a63f; }
/* Chat header */
#chat-header { background: var(--tb-header); border-bottom-color: var(--tb-line); }
#chat-title { color: var(--tb-text); }
#chat-presence-label { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--tb-text-2); line-height: 1.3; }
/* 2.5.0: the line now also says "last seen ..."; the green dot only while the contact is online. */
#chat-presence-label.is-online::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #3fbf6b; flex: none; }
.chat-icon-btn { color: var(--tb-text-2); }
.chat-icon-btn:hover { background: var(--tb-accent-soft); color: var(--tb-accent); }
#mobile-back-btn { color: var(--tb-accent); }
#reply-bar, #pinned-bar { background: var(--tb-header); border-color: var(--tb-line); }
/* Messages + day divider */
#messages { background: var(--tb-wallpaper); }
.msg-day-divider { display: flex; justify-content: center; margin: 8px 0 10px; flex-shrink: 0; }
.msg-day-divider span { padding: 6px 20px; border-radius: 999px; background: var(--tb-day-bg); color: var(--tb-day-text); font-size: 13.5px; font-weight: 500; border: 1px solid var(--tb-line); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.msg-wrap:not(.mine) .msg-bubble { background: var(--tb-bubble-in); color: var(--tb-bubble-in-text); box-shadow: 0 0 0 1px var(--tb-bubble-in-border), 0 1px 2px rgba(0,0,0,0.12); }
.msg-wrap.mine .msg-bubble { background: var(--bubble-mine, var(--tb-bubble-out)); color: var(--bubble-mine-text, var(--tb-bubble-out-text)); }
.msg-body { color: inherit; }
.msg-time { color: inherit; opacity: 0.62; }
.msg-wrap.mine .msg-time::after { color: var(--tb-tick); }
.msg-sender { color: var(--tb-accent); }
.reaction-chip { background: var(--tb-day-bg); color: var(--tb-text); border-color: var(--tb-line); }
.poll-q { color: inherit; }
.poll-option { background: var(--tb-day-bg); color: var(--tb-text); }
.msg-largefile .lf-meta { color: inherit; }
.msg-body pre { color: #e6e6ea; }
#typing-indicator { color: var(--tb-text-3); }
/* Composer */
#input-area { background: var(--tb-composer); border-top-color: var(--tb-line); }
#msg-input { background: var(--tb-input-bg); border-color: var(--tb-input-border); color: var(--tb-text); }
#msg-input::placeholder { color: var(--tb-text-3); }
#comp-actions-btn svg { stroke: var(--tb-text-3); }
#send-btn { background: var(--tb-send-bg); }
#send-btn:hover { background: var(--tb-send-bg); filter: brightness(1.07); }
.tb-send-plane { display: none; width: 25px; height: 25px; fill: var(--tb-send-ink); margin-left: 3px; }
.send-hold-opt, .send-hold-vanish-label, .word-chip { color: var(--tb-text); }
/* Desktop-only chrome is hidden until the wide-screen block below shows it */
#tb-topbar, #tb-rail, #tb-compose-btn, #tb-clip-btn { display: none; }
#tb-listhead { display: flex; align-items: center; gap: 6px; }
#tb-listhead #room-filter-bar { flex: 1; min-width: 0; }
#tb-composer-pill { display: contents; }
/* Wolf Pak marks: paw + WOLF PAK TABELLA + version (Leo: the paw stays -- it's a Wolf Pak product) */
.tb-paw { fill: currentColor; display: block; }
#brand-watermark { display: flex; align-items: center; justify-content: center; gap: 7px; opacity: 1; color: var(--tb-mark); font-size: 10px; letter-spacing: .2em; font-weight: 700; text-shadow: none; padding: 8px 0 10px; }
#brand-watermark .tb-paw { width: 16px; height: 16px; }
#brand-watermark .tb-app-ver { letter-spacing: .06em; font-weight: 600; }
.tb-menu-mark { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 6px 6px; margin-top: 4px; border-top: 1px solid var(--tb-line); color: var(--tb-mark); font-size: 10px; letter-spacing: .2em; font-weight: 700; user-select: none; }
.tb-menu-mark .tb-paw { width: 16px; height: 16px; }
.tb-menu-mark .tb-app-ver { letter-spacing: .06em; font-weight: 600; }
/* Settings > Appearance > Theme swatches */
.tb-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin: 4px 0 12px; }
.tb-theme-swatch { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 12px; border: 2px solid var(--tb-line); background: none; cursor: pointer; color: var(--text); font-size: 12px; font-weight: 600; text-align: center; }
.tb-theme-swatch.active { border-color: var(--tb-accent); }
.tb-ts-prev { position: relative; display: block; height: 58px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(128,128,128,0.25); }
.tb-ts-prev i { position: absolute; left: 0; top: 0; bottom: 0; width: 34%; }
.tb-ts-prev b { position: absolute; left: 6%; top: 12px; width: 20%; height: 9px; border-radius: 5px; }
.tb-ts-prev em { position: absolute; right: 8%; bottom: 10px; width: 40%; height: 14px; border-radius: 7px; }

/* ── Wide screens: top bar + icon rail + roomy chat (>=761px) ───────────────────────────── */
@media (min-width: 761px) {
  body { padding-top: 72px; }
  #tb-topbar { display: flex; position: fixed; top: 0; left: 0; right: 0; height: 72px; z-index: 60; align-items: center; gap: 20px; padding: 0 22px; background: var(--tb-topbar); border-bottom: 1px solid var(--tb-line); }
  html.app-shell #tb-topbar { padding-top: env(safe-area-inset-top); }
  #tb-brand { display: flex; align-items: center; gap: 12px; width: 300px; flex: none; min-width: 0; }
  #tb-brand-logo { width: 44px; height: 44px; border-radius: 10px; flex: none; box-shadow: 0 0 0 1px rgba(201,162,74,0.25); }
  #tb-brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
  #tb-brand-name { font-family: 'Palatino Linotype', Palatino, Georgia, serif; font-size: 23px; font-weight: 700; color: var(--tb-text); letter-spacing: .01em; }
  #tb-brand-ver { font-size: 13px; color: var(--tb-text-3); margin-top: 2px; }
  #tb-search-box { display: flex; align-items: center; gap: 12px; width: min(460px, 36vw); height: 46px; padding: 0 16px; border-radius: 12px; background: var(--tb-search-bg); border: 1px solid var(--tb-input-border); color: var(--tb-text-3); font-size: 15px; cursor: text; text-align: left; }
  #tb-search-box:hover { border-color: var(--tb-accent); }
  #tb-search-box svg { width: 21px; height: 21px; flex: none; color: var(--tb-text-2); }
  #tb-top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
  .tb-top-btn { width: 46px; height: 46px; border-radius: 10px; border: none; background: none; color: var(--tb-text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
  .tb-top-btn:hover { background: var(--tb-accent-soft); color: var(--tb-accent); }
  .tb-top-btn svg { width: 26px; height: 26px; }
  .tb-top-sep { width: 1px; height: 30px; background: var(--tb-line); }

  #tb-rail { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100px; flex: none; padding: 22px 0 18px; background: var(--tb-rail); border-right: 1px solid var(--tb-line); overflow-y: auto; scrollbar-width: none; }
  .tb-rail-btn { position: relative; width: 84px; min-height: 84px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: none; border-radius: 12px; background: none; color: var(--tb-text-2); font-size: 14.5px; cursor: pointer; --tb-rail-icon-cut: var(--tb-rail); }
  .tb-rail-btn svg { width: 28px; height: 28px; }
  .tb-rail-btn:hover { background: var(--tb-row-hover); color: var(--tb-text); }
  .tb-rail-btn.active { background: var(--tb-accent-soft); color: var(--tb-accent); --tb-rail-icon-cut: var(--tb-rail-cut); }
  .tb-rail-btn.active::before { content: ''; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 4px; border-radius: 0 4px 4px 0; background: var(--tb-accent); }
  .tb-wolfpak-mark { margin-top: auto; padding-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--tb-mark); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-align: center; user-select: none; }
  .tb-wolfpak-mark .tb-paw { width: 36px; height: 36px; margin-bottom: 8px; }
  .tb-wolfpak-mark .tb-wp-ver { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; margin-top: 4px; }

  #sidebar { width: 360px; }
  @media (min-width: 1300px) { #sidebar { width: 400px; } }
  #sidebar-header { padding: 14px 16px 4px; border-bottom: none; }
  #sidebar-search-btn, #sidebar-footer, #new-msg-pill, #brand-watermark { display: none !important; }
  #tb-listhead { padding: 12px 16px 10px; gap: 10px; }
  #room-filter-bar { display: flex; padding: 0; gap: 9px; }
  .room-filter-chip { height: 40px; padding: 0 17px; border-radius: 999px; font-size: 15px; font-weight: 500; }
  .room-filter-count { min-width: 23px; height: 23px; border-radius: 12px; font-size: 13px; }
  #tb-compose-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: none; border: none; border-radius: 10px; background: none; color: var(--tb-text-2); cursor: pointer; }
  #tb-compose-btn:hover { background: var(--tb-accent-soft); color: var(--tb-accent); }
  #tb-compose-btn svg { width: 23px; height: 23px; }
  #room-list { padding: 2px 0 10px; }
  .room-item { margin: 3px 12px; padding: 14px; border-radius: 14px; gap: 14px; }
  .room-avatar { width: 58px; height: 58px; font-size: 22px; }
  .room-name { font-size: 17px; font-weight: 700; }
  .room-time { font-size: 13px; }
  .room-preview { font-size: 14.5px; }
  .room-badge { min-width: 24px; height: 24px; border-radius: 12px; font-size: 13px; }

  #chat-header { padding: 16px 28px; min-height: 100px; gap: 16px; }
  #chat-peer-avatar { width: 64px; height: 64px; font-size: 24px; }
  #chat-title { font-size: 22px; font-weight: 700; }
  #chat-title-text-col { gap: 2px; }
  #chat-presence-label { font-size: 15px; order: 2; }
  #chat-founder-label { order: 3; }
  #chat-header-right { gap: 10px; }
  #chat-header-right .chat-icon-btn { width: 48px; height: 48px; border-radius: 12px; }
  #chat-header-right .chat-icon-btn svg { width: 25px; height: 25px; }
  #group-call-btn { order: 1; }
  #group-call-btn.tb-dm { display: inline-flex !important; }
  #call-btn { order: 2; }
  #chat-overflow-btn { order: 3; }

  #messages { padding: 20px 32px; gap: 6px; }
  .msg-bubble { max-width: min(64%, 600px); padding: 10px 16px 9px; border-radius: 12px; font-size: calc(16px * var(--chat-scale, 1)); line-height: 1.45;
    display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 16px; }
  .msg-bubble > * { flex: 1 1 100%; min-width: 0; }
  .msg-bubble > .msg-body { flex: 0 1 auto; }
  .msg-bubble > .msg-meta { flex: 0 0 auto; margin: 0 0 1px auto; }
  .msg-time { font-size: 12.5px; }

  #input-area { padding: 16px 28px 20px; gap: 14px; align-items: center; }
  #tb-composer-pill { display: flex; flex: 1; min-width: 0; align-items: center; gap: 4px; min-height: 64px; padding: 6px 12px 6px 10px; border-radius: 18px; background: var(--tb-input-bg); border: 1px solid var(--tb-input-border); }
  #tb-composer-pill:focus-within { border-color: var(--tb-accent); }
  #tb-clip-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border: none; border-radius: 12px; background: none; color: var(--tb-text-2); cursor: pointer; }
  #tb-clip-btn:hover { color: var(--tb-accent); background: var(--tb-accent-soft); }
  #tb-clip-btn svg { width: 24px; height: 24px; }
  #tb-composer-pill #msg-input { background: transparent; border: none; border-radius: 0; padding: 10px 8px; min-height: 44px; font-size: calc(16px * var(--chat-scale, 1)); box-shadow: none; }
  #send-btn { width: 62px; height: 62px; border-radius: 50%; }
  /* 2.5.3 (Leo 2026-10-17): the send button is the Wolf Pak paw on every screen size, not Telegram's arrow. */
  #send-btn img { width: 40px !important; height: 40px !important; }
}
/* 761-1099px: same chrome, slimmer columns */
@media (min-width: 761px) and (max-width: 1099px) {
  #tb-brand { width: auto; }
  #sidebar { width: 300px; }
  #tb-listhead { padding: 10px 12px 8px; gap: 6px; }
  #room-filter-bar { gap: 6px; }
  .room-filter-chip { height: 36px; padding: 0 12px; font-size: 14px; }
  .room-item { margin: 3px 8px; padding: 12px; }
  .room-avatar { width: 50px; height: 50px; font-size: 20px; }
  #messages { padding: 16px 18px; }
  .msg-bubble { max-width: 78%; }
}


/* ── 2.1.0 phone fixes (audit 2026-10-12) ─────────────────────────────────────────────── */
/* Nothing may make the page wider than the phone. */
html, body { max-width: 100%; overflow-x: hidden; }
#messages, .msg-wrap, .msg-bubble { min-width: 0; }
.msg-bubble { overflow-wrap: anywhere; }
.msg-bubble img, .msg-bubble video { max-width: 100%; height: auto; }
/* Touch phones: a long-press opens the message menu (it has Copy text), so stop the iPhone's own
   text-selection callout from fighting it. */
@media (hover: none) {
  .msg-bubble { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}
/* The iPhone app now runs edge to edge (contentInset "never"), so pop-up windows keep clear of
   the notch and the home bar themselves. */
html.app-shell #settings-modal { padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
@media (max-width: 640px) {
  html.app-shell #settings-modal { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
}
/* 2.4.0 (audit layout-mobile #2): every other pop-up does the same. Each of these is a full-screen
   layer with a card in the middle. The layer gets the phone's safe areas as padding (at least
   12 px), and the card may only be as tall as the padded space. Before, the card was "screen
   height minus 24 px", so a long one (Settings, a long question) slid back up under the Dynamic
   Island, and short ones could touch the top 12 px of the screen. On a computer env() is 0, so
   only the plain 12 px applies. */
#newchat-modal, #contacts-modal, #guardian-modal, #media-modal, #qrscan-modal, #timeline-modal,
#poll-modal, #forward-modal, #profile-modal, #about-modal, #pv-modal, #sas-modal,
#tbl-template-modal, #tbl-photo-editor-modal, #tbl-bonus-modal, #tbl-new-org-modal, #tbl-widget-modal,
#tbl-my-shifts-modal, #tbl-dev-api-modal, #tbl-sum-modal-overlay, #gc-breakout-modal,
#confirm-overlay, #prompt-overlay, #recoverykey-overlay, #applock-overlay {
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
#archive-modal, #tgwiz-modal {
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}
.tbl-paste-overlay {
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
#settings-modal > .settings-card, #newchat-modal > .settings-card, #contacts-modal > .settings-card,
#guardian-modal > .settings-card, #media-modal > .settings-card, #qrscan-modal > .settings-card,
#timeline-modal > .settings-card, #poll-modal > .settings-card, #forward-modal > .settings-card,
#profile-modal > .settings-card, #about-modal > .settings-card, #pv-modal > .settings-card,
#sas-modal > .settings-card, #tbl-template-modal > .settings-card, #tbl-photo-editor-modal > .settings-card,
#tbl-bonus-modal > .settings-card, #tbl-new-org-modal > .settings-card, #tbl-widget-modal > .settings-card,
#tbl-my-shifts-modal > .settings-card, #tbl-dev-api-modal > .settings-card, #confirm-overlay > .settings-card,
#prompt-overlay > .settings-card, #recoverykey-overlay > .settings-card, #applock-overlay > .settings-card {
  max-height: 100% !important;
}
#archive-modal > #archive-panel { max-height: 100%; }
#tgwiz-modal > #tgwiz-panel { max-height: min(84vh, 100%); }
/* Small boxes pinned near the top (the incoming call, the call's waiting room) start below the
   status bar. !important beats their inline top/right. */
#incoming-call-overlay { top: max(20px, calc(env(safe-area-inset-top) + 8px)) !important; }
#gc-waiting-modal { top: max(60px, calc(env(safe-area-inset-top) + 12px)) !important; right: max(20px, env(safe-area-inset-right)) !important; }
/* Full-screen views with a bar at the top (group call, a widget, a story): the bar and its
   buttons sit below the status bar, and nothing sits under the home bar. */
#gc-overlay, #tbl-widget-frame-overlay {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#tbl-story-overlay-meta { top: calc(24px + env(safe-area-inset-top)) !important; }
#tbl-story-overlay-delete, #tbl-story-overlay-close { top: calc(16px + env(safe-area-inset-top)) !important; }
#tbl-story-overlay-close { right: max(20px, env(safe-area-inset-right)) !important; }

/* Dialog buttons answer the first tap on phones (no double-tap zoom delay). */
#confirm-overlay button, #prompt-overlay button, #confirm-overlay, #prompt-overlay { touch-action: manipulation; }
/* ── Mandatory VPN gate (2.2): full-screen "Turn on Tabella VPN" sheet + red "VPN is off" banner.
   Uses the theme tokens so it follows every theme. Sits under the app lock (z-index 1200). */
.vpn-gate-sheet { display: none; position: fixed; inset: 0; z-index: 1150; background: var(--bg); color: var(--text); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* Close stays in view while scrolling, below the iPhone status bar / notch: nothing in the sheet
   ever sits under the phone's own top bar. */
.vpn-gate-top { position: sticky; top: 0; z-index: 1; display: flex; justify-content: flex-end; padding: calc(8px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); background: var(--bg); }
.vpn-gate-x { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: transparent; color: var(--text); font-size: 16px; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.vpn-gate-inner { max-width: 460px; margin: 0 auto; padding: 4px 16px calc(28px + env(safe-area-inset-bottom)); }
.vpn-gate-title { font-size: 24px; font-weight: 800; margin: 6px 0 8px; color: var(--text); outline: none; }
.vpn-gate-lead { font-size: 16px; line-height: 1.6; color: var(--text-muted); margin: 0 0 16px; }
.vpn-gate-btn { display: block; width: 100%; min-height: 50px; border: none; border-radius: var(--radius-md); padding: 14px; font-size: 16px; font-weight: 700; cursor: pointer; background: var(--tb-accent, var(--gold)); color: var(--tb-accent-ink, #1a1406); touch-action: manipulation; }
.vpn-gate-btn:disabled { opacity: 0.6; cursor: default; }
.vpn-gate-btn--big { min-height: 58px; font-size: 18px; }
.vpn-gate-btn--ghost { background: transparent; color: var(--text); border: 1px solid var(--line); font-weight: 700; font-size: 16px; }
.vpn-gate-btn + .vpn-gate-btn { margin-top: 10px; }
.vpn-gate-steps .vpn-gate-btn { margin: 10px 0 4px; }
.vpn-gate-row { display: flex; flex-wrap: wrap; gap: 10px; }
.vpn-gate-row .vpn-gate-btn { flex: 1 1 160px; margin-top: 10px; }
.vpn-gate-row .vpn-gate-btn + .vpn-gate-btn { margin-top: 10px; }
.vpn-gate-config { display: none; margin-top: 16px; text-align: center; }
.vpn-gate-qrbox { display: inline-block; background: #fff; border-radius: 16px; padding: 12px; margin-top: 8px; }
.vpn-gate-qrbox img { width: 220px; height: 220px; display: block; }
.vpn-gate-note { display: block; font-size: 14px; color: var(--text-muted); margin-top: 10px; line-height: 1.55; }
.vpn-gate-status:empty { display: none; }
.vpn-gate-kept { display: none; margin: 0 0 16px; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--line); font-size: 15px; font-weight: 600; line-height: 1.5; }
.vpn-gate-tabs { display: flex; gap: 8px; margin: 18px 0 14px; }
.vpn-gate-tab { flex: 1; min-height: 46px; padding: 10px 6px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: transparent; color: var(--text-muted); font-size: 15px; font-weight: 700; cursor: pointer; }
.vpn-gate-tab--on { background: var(--tb-accent, var(--gold)); color: var(--tb-accent-ink, #1a1406); border-color: transparent; }
.vpn-gate-steps { margin: 0; padding-left: 24px; font-size: 16px; line-height: 1.6; color: var(--text); }
.vpn-gate-steps li { margin-bottom: 14px; }
.vpn-gate-steps b { color: var(--text); }
.vpn-gate-warn { padding: 8px 12px; border-left: 4px solid #c62828; border-radius: 6px; background: rgba(198, 40, 40, 0.10); font-weight: 600; }
.vpn-gate-alt { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.vpn-gate-alt-h { margin: 0 0 4px; font-size: 17px; font-weight: 800; color: var(--text); }
.vpn-gate-alt .vpn-gate-note { margin: 0 0 10px; }
.vpn-gate-result { display: none; margin: 16px 0 10px; font-size: 16px; font-weight: 700; line-height: 1.5; }
/* "Your voice message did not send. [Send again] [Delete]" -- shown once the VPN is on, in the
   banner's spot just above the message box, clear of the top bar. */
.vpn-gate-held { display: none; position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 1100; width: min(460px, calc(100vw - 32px)); flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--panel, #1b1d22); color: var(--text); border: 1px solid var(--tb-accent, var(--gold)); box-shadow: 0 6px 20px rgba(0,0,0,0.35); font-size: 15px; font-weight: 600; line-height: 1.4; }
.vpn-gate-held-text { flex: 1 1 100%; }
.vpn-gate-held-send, .vpn-gate-held-drop { min-height: 44px; padding: 10px 16px; border-radius: var(--radius-md); font-size: 16px; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.vpn-gate-held-send { flex: 1; border: none; background: var(--tb-accent, var(--gold)); color: var(--tb-accent-ink, #1a1406); }
.vpn-gate-held-drop { background: transparent; color: var(--text-muted); border: 1px solid var(--line); }
/* The red pill sits just above the message box (where the held "Send again" bar goes; the two
   never show together), not over the top bar: on iPhone it hid the chat name and back button. */
.vpn-gate-banner { display: none; position: fixed; bottom: calc(88px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 1100; align-items: center; gap: 8px; max-width: calc(100vw - 32px); min-height: 44px; padding: 10px 16px; border-radius: var(--radius-pill); background: #c62828; color: #fff; font-size: 15px; font-weight: 700; box-shadow: 0 4px 14px rgba(0,0,0,0.35); cursor: pointer; border: none; touch-action: manipulation; }
.vpn-gate-banner-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; flex: none; }

/* ── Built-in Tabella VPN (2.3) ─────────────────────────────────────────────────────────────
   The one-tap card is the same full-screen sheet as the gate (same z-index, under the app lock),
   so it reads the same on a phone and on Windows. */
.vpn-onboard { display: none; position: fixed; inset: 0; z-index: 1150; background: var(--bg); color: var(--text); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.vpn-onboard-disclosure { margin: 4px 0 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); font-size: 15px; line-height: 1.6; color: var(--text); }
.vpn-onboard-disclosure p { margin: 0 0 8px; }
.vpn-onboard-disclosure ul { margin: 0 0 8px; padding-left: 22px; }
.vpn-onboard-disclosure li { margin-bottom: 4px; }
.vpn-onboard-promise { font-weight: 700; }
.vpn-onboard-link { display: inline-block; min-height: 44px; padding: 8px 0; border: none; background: none; color: var(--tb-accent, var(--gold)); font-size: 15px; font-weight: 700; text-decoration: underline; cursor: pointer; touch-action: manipulation; }
.vpn-onboard-hint { margin: 14px 0 0; font-size: 16px; font-weight: 700; color: var(--text); }
.vpn-onboard .vpn-gate-btn--ghost { margin-top: 10px; }
/* Sheet: this device's own VPN, or "get the app", above the closed "Other ways". */
.vpn-gate-native { margin: 0 0 16px; }
.vpn-gate-native-status { font-size: 16px; font-weight: 700; line-height: 1.5; margin: 0 0 4px; }
.vpn-gate-native-status:empty { display: none; }
.vpn-gate-getapp { margin: 0 0 16px; }
.vpn-gate-getapp-lead { font-size: 16px; font-weight: 700; line-height: 1.5; margin: 0 0 4px; }
.vpn-gate-getapp .vpn-gate-btn { margin-top: 10px; }
.vpn-gate-advanced { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0 14px; }
.vpn-gate-advanced[open] { padding-bottom: 14px; }
.vpn-gate-advanced-sum { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 48px; font-size: 16px; font-weight: 700; color: var(--text); touch-action: manipulation; }
.vpn-gate-advanced-sum::-webkit-details-marker { display: none; }
.vpn-gate-advanced-sum::after { content: '\203A'; font-size: 22px; color: var(--text-muted); transform: rotate(90deg); transition: transform .18s; }
.vpn-gate-advanced[open] > .vpn-gate-advanced-sum::after { transform: rotate(-90deg); }
/* Header pill: green on, amber waiting, red off, grey paused. Text says it too (not colour only). */
.vpn-pill { display: none; align-items: center; gap: 6px; flex: none; min-height: 32px; padding: 4px 11px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: transparent; color: var(--text); font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; touch-action: manipulation; }
.vpn-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: #9e9e9e; flex: none; }
.vpn-pill[data-state="on"] .vpn-pill-dot { background: #2e9d4f; }
.vpn-pill[data-state="wait"] .vpn-pill-dot { background: #e0a800; }
.vpn-pill[data-state="off"] { border-color: #c62828; }
.vpn-pill[data-state="off"] .vpn-pill-dot { background: #c62828; }
@media (max-width: 380px) { .vpn-pill { padding: 4px 8px; font-size: 12px; } }
/* Settings > Tabella VPN */
.vpn-set-status { font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--text); margin: 0 0 10px; }
.vpn-set-status:empty { display: none; }
.vpn-set-btn { display: block; width: 100%; min-height: 46px; padding: 11px 14px; border-radius: var(--radius-md); border: none; background: var(--tb-accent, var(--gold)); color: var(--tb-accent-ink, #1a1406); font-size: 15px; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.vpn-set-btn:disabled { opacity: 0.6; cursor: default; }
.vpn-set-btn--ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.vpn-set-h { font-size: 13px; font-weight: 700; color: var(--text-muted); margin: 16px 0 6px; }
.vpn-set-devices { font-size: 14px; color: var(--text-muted); }
.vpn-set-device { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--text); }
.vpn-set-device-name { min-width: 0; overflow-wrap: anywhere; }
.vpn-set-device-free { flex: none; min-height: 36px; padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: transparent; color: var(--text); font-size: 14px; font-weight: 700; cursor: pointer; }

/* Question boxes ("End the group call for everyone?", recovery key...) must sit ABOVE the call
   screens (300-400) and the VPN sheet (1150), below only the app lock (1200). They were at 300,
   under the call screen, so "End call" did nothing visible (2.2 call test). */
#confirm-overlay, #prompt-overlay { z-index: 1180 !important; }

/* Message requests (2.2.2, authz M1): invites from non-contacts wait in the chat list. */
.room-item.room-request { cursor: default; }
.room-request-actions button { padding: 7px 12px; font-size: 13px; }

/* Paste preview (2026-10-13): pasted pictures wait for Send instead of sending on paste. */
.tbl-paste-overlay { position: fixed; inset: 0; z-index: 1180; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; padding: 16px; }
.tbl-paste-card { background: var(--panel, #1b1d22); border: 1px solid rgba(201, 162, 74, 0.35); border-radius: 16px; padding: 16px 18px 18px;
  width: min(440px, 100%); max-height: calc(100% - 32px); display: flex; flex-direction: column; gap: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }
.tbl-paste-head { display: flex; align-items: center; justify-content: space-between; color: #e8dfc6; font-size: 15px; font-weight: 600; }
.tbl-paste-x { background: none; border: 0; color: #cfcabb; cursor: pointer; line-height: 0; padding: 4px; border-radius: 6px; }
.tbl-paste-x:hover { background: rgba(255, 255, 255, 0.08); }
.tbl-paste-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; overflow-y: auto; min-height: 0; }
.tbl-paste-item { border-radius: 10px; overflow: hidden; background: rgba(0, 0, 0, 0.25); display: flex; align-items: center; justify-content: center; }
.tbl-paste-item img { display: block; width: 100%; max-height: 50vh; object-fit: contain; }
.tbl-paste-file { padding: 14px; color: #cfcabb; font-size: 13px; word-break: break-all; }
.tbl-paste-row { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.msg-video-save { display: inline-block; margin-top: 4px; padding: 8px 12px; border-radius: 8px; background: rgba(201, 162, 74, 0.15);
  border: 1px solid rgba(201, 162, 74, 0.45); color: #e8c56a; font-size: 13px; text-decoration: none; }

/* Photo/video space held before the picture loads (aspect-ratio box from the sender's w/h). */
.msg-media-frame { max-width: 100%; margin-top: 4px; border-radius: 10px; overflow: hidden; background: rgba(0, 0, 0, 0.25); }
.msg-media-frame > .msg-media-fill { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important;
  margin: 0 !important; object-fit: contain; display: block; border-radius: 0 !important; }

.tbl-choose-text { color: #d9d4c4; font-size: 14px; line-height: 1.5; }
.tbl-choose-row { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; }

/* Avatar "Move and zoom" (2.3.4, avatar-crop.mjs openAvatarCrop). Same layer as the question boxes (1180):
   above the profile window (200) and the VPN sheet (1150), under the app lock (1200). Theme tokens
   throughout. The square photo stage is sized by avatar-crop.mjs to the room left, so nothing scrolls. */
.tbl-crop-overlay { position: fixed; inset: 0; z-index: 1180; display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(0, 0, 0, 0.7); overscroll-behavior: contain; touch-action: manipulation; }
.tbl-crop-card { display: flex; flex-direction: column; gap: 14px; width: min(460px, 100%); max-height: 100%; padding: 22px 24px 20px;
  background: var(--raised); color: var(--text); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5); overflow: hidden; }
.tbl-crop-title { font-family: var(--font-heading); font-size: 21px; font-weight: 700; line-height: 1.3; color: var(--text); }
.tbl-crop-hint { font-size: 15px; line-height: 1.45; color: var(--text-muted); }
.tbl-crop-box { display: flex; align-items: center; justify-content: center; min-height: 0; }
.tbl-crop-stage { position: relative; flex: none; width: 280px; height: 280px; overflow: hidden; border-radius: 12px; background: var(--sunken);
  touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.tbl-crop-stage.is-dragging { cursor: grabbing; }
.tbl-crop-stage:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.tbl-crop-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; pointer-events: none; }
/* The window: a circle 88% of the square (CROP_FRAC in avatar-crop.mjs), everything outside it dimmed. */
.tbl-crop-ring { position: absolute; left: 6%; top: 6%; width: 88%; height: 88%; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(255, 255, 255, 0.92); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.35); }
.tbl-crop-wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--text); }
.tbl-crop-zoom { display: flex; align-items: center; gap: 6px; }
.tbl-crop-zbtn { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0;
  border-radius: 10px; background: none; color: var(--text-muted); cursor: pointer; touch-action: manipulation; }
.tbl-crop-zbtn:hover { color: var(--text); background: rgba(128, 128, 128, 0.14); }
.tbl-crop-zbtn svg { width: 24px; height: 24px; }
/* Zoom slider: a 44 px tall touch strip with a theme-coloured thumb on a track that reads in every theme. */
.tbl-crop-range { flex: 1 1 auto; min-width: 0; height: 44px; margin: 0; padding: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none; touch-action: manipulation; }
.tbl-crop-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--text-dim); }
.tbl-crop-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%;
  background: var(--gold); border: 3px solid var(--raised); box-shadow: 0 0 0 1px var(--text-dim), 0 2px 6px rgba(0, 0, 0, 0.35); }
.tbl-crop-range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--text-dim); }
.tbl-crop-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--gold); border: 3px solid var(--raised); box-shadow: 0 0 0 1px var(--text-dim); }
.tbl-crop-range:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 8px; }
.tbl-crop-row { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.tbl-crop-card .settings-close { min-height: 46px; font-size: 16px; color: var(--text-muted); border-color: var(--text-dim); touch-action: manipulation; }
.tbl-crop-card .auth-btn.tbl-dlg-btn { min-width: 140px; touch-action: manipulation; }
/* Phones: the whole screen, photo full width minus the 16 px gutters, buttons at the bottom
   within thumb reach, clear of the notch and the home bar. */
@media (max-width: 600px) {
  .tbl-crop-overlay { padding: 0; align-items: stretch; }
  .tbl-crop-card { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; box-shadow: none; gap: 12px;
    padding: calc(14px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .tbl-crop-title { font-size: 22px; }
  .tbl-crop-hint { font-size: 17px; }
  .tbl-crop-box { flex: 1 1 auto; }
  .tbl-crop-row > .settings-close, .tbl-crop-row > .auth-btn.tbl-dlg-btn { flex: 1 1 0; min-width: 0; font-size: 17px; }
}
/* Short landscape screens (a phone on its side, a small window): photo on the left, the rest on the right. */
@media (min-width: 601px) and (max-height: 560px) {
  .tbl-crop-card { width: min(780px, 100%); display: grid; grid-template-columns: auto minmax(260px, 1fr); grid-template-rows: auto auto 1fr auto;
    column-gap: 22px; row-gap: 12px; align-items: start; }
  .tbl-crop-box { grid-column: 1; grid-row: 1 / span 4; align-self: center; }
  .tbl-crop-title, .tbl-crop-hint, .tbl-crop-zoom, .tbl-crop-row { grid-column: 2; }
  .tbl-crop-zoom { grid-row: 3; align-self: end; }
  .tbl-crop-row { grid-row: 4; }
  /* A phone on its side lands here too (no orientation lock): keep the phone text sizes (review 2026-10-14). */
  .tbl-crop-hint { font-size: 17px; }
  .tbl-crop-row > .settings-close, .tbl-crop-row > .auth-btn.tbl-dlg-btn { font-size: 17px; }
}
/* While "Move and zoom" fills a phone screen, new messages sit above its zoom row and buttons, not on
   top of Zoom in (review 2026-10-14). body class set by avatar-crop.mjs (no :has() on iOS 15.0-15.3). */
@media (max-width: 600px) {
  body.tbl-crop-open #toast-container { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .tbl-crop-overlay * { transition: none !important; } }

/* "Tabella has been updated. Tap to refresh" (2.2.9, update-check.js). Web only. Sits just above the
   message box like the VPN pill (not over the top bar, where it hid the chat name on iPhone), under
   the app lock (1200), question boxes (1180) and the VPN sheet (1150). Theme tokens, so it follows
   every theme. Hidden while the message box has text. */
/* The announcer is position:fixed, so it is its own stacking layer: it carries the z-index (not just
   the card inside it), or the sign-in screen (z-index 100) would sit on top of the banner. */
.tbl-update-live { position: fixed; z-index: 1100; left: 0; bottom: 0; width: 0; height: 0; overflow: visible; }
.tbl-update { position: fixed; z-index: 1100; left: 16px; right: 16px; margin: 0 auto; width: fit-content; max-width: min(460px, calc(100vw - 32px));
  bottom: calc(96px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 2px; padding: 4px;
  border-radius: var(--radius-md, 12px); background: var(--panel, #202328); color: var(--text, #f2f3f5);
  border: 1px solid var(--tb-accent, var(--gold, #c9a24a)); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.38);
  font-family: var(--font-body); animation: tbl-update-in 0.22s ease-out; }
.tbl-update[hidden] { display: none !important; }
.tbl-update--above-pill { bottom: calc(144px + env(safe-area-inset-bottom, 0px)); }
.tbl-update--above-held { bottom: calc(200px + env(safe-area-inset-bottom, 0px)); }
.tbl-update-go { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 44px;
  padding: 6px 8px 6px 10px; border: 0; border-radius: calc(var(--radius-md, 12px) - 3px); background: transparent; color: inherit;
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1.3; text-align: left; cursor: pointer; touch-action: manipulation; }
.tbl-update-go:hover { background: var(--tb-accent-soft, rgba(201, 162, 74, 0.13)); }
.tbl-update-go:disabled { cursor: default; }
.tbl-update-ico { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--tb-accent, var(--gold, #c9a24a)); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tbl-update-msg { flex: 0 1 auto; }
.tbl-update-cta { flex: none; padding: 6px 14px; border-radius: var(--radius-pill, 999px); background: var(--tb-accent, var(--gold, #c9a24a));
  color: var(--tb-accent-ink, #1a1406); font-size: 14px; font-weight: 700; white-space: nowrap; }
.tbl-update-x { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-muted, #aeb4bf); cursor: pointer; touch-action: manipulation; }
.tbl-update-x:hover { background: rgba(128, 128, 128, 0.16); color: var(--text, #f2f3f5); }
.tbl-update-xico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
@keyframes tbl-update-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tbl-update { animation: none; } }
@media (max-width: 380px) { .tbl-update-go { font-size: 14px; } .tbl-update-cta { font-size: 13px; padding: 5px 12px; } }
@media print { .tbl-update { display: none !important; } }

/* ── Select several messages + bulk delete (Leo 2026-10-14) ───────────────────────────────────────
   Theme tokens only (all five themes); every control is at least 44px; the danger button is the
   same deep red with white text everywhere (6.6:1). Contrast is checked in test/bulk-delete.test.mjs. */
#chat-view.selecting #input-area, #chat-view.selecting #reply-bar, #chat-view.selecting #word-suggest-strip { display: none !important; }
#chat-view.selecting .msg-ctx-btn { display: none !important; }
#chat-view.selecting #messages { -webkit-user-select: none; user-select: none; } /* Shift+click ticks a range, it does not select text */
#chat-view.selecting .msg-wrap[data-event-id^="$"] { padding-inline-start: 48px; cursor: pointer; border-radius: 12px; }
#chat-view.selecting .msg-wrap.is-selected { background: var(--tb-accent-soft); }
.msg-select-tick { position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; background: none; border: none; cursor: pointer; z-index: 2; }
.msg-select-tick svg { width: 24px; height: 24px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--tb-text-2);
  background: var(--tb-composer); fill: none; stroke: transparent; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; padding: 2px; }
.msg-select-tick[aria-checked="true"] svg { background: var(--tb-accent); border-color: var(--tb-accent); stroke: var(--tb-accent-ink); }
.msg-select-tick:focus-visible { outline: 2px solid var(--tb-accent); outline-offset: -2px; border-radius: 12px; }
#select-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--tb-composer); border-top: 1px solid var(--tb-line); color: var(--tb-text); flex-shrink: 0; }
#select-bar[hidden], #bulk-delete-panel[hidden], .bulk-delete-btn[hidden] { display: none !important; }
#select-count { font-size: 16px; font-weight: 600; color: var(--tb-text); min-width: 7ch; }
.select-bar-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-inline-start: auto; }
.select-btn, .bulk-delete-btn { min-height: 44px; min-width: 44px; padding: 10px 16px; border-radius: 12px; font: inherit; font-size: 15px;
  font-weight: 600; line-height: 1.2; cursor: pointer; background: transparent; color: var(--tb-text); border: 1px solid var(--tb-text-3); }
.select-btn:hover, .bulk-delete-btn:hover { background: var(--tb-row-hover); }
.select-btn:focus-visible, .bulk-delete-btn:focus-visible { outline: 2px solid var(--tb-accent); outline-offset: 2px; }
.select-btn.select-btn-danger { background: #b3261e; border-color: #b3261e; color: #ffffff; }
.select-btn.select-btn-danger:hover { background: #9c1f18; }
.select-btn.select-btn-plain { border-color: transparent; color: var(--tb-text-2); }
.select-btn:disabled, .bulk-delete-btn:disabled { opacity: 0.45; cursor: not-allowed; }
#bulk-delete-panel { padding: 10px 16px; background: var(--tb-composer); border-top: 1px solid var(--tb-line); color: var(--tb-text); flex-shrink: 0; }
.bulk-delete-row { display: flex; align-items: center; gap: 12px; }
#bulk-delete-text { flex: 1 1 auto; min-width: 0; font-size: 15px; line-height: 1.45; color: var(--tb-text); overflow-wrap: anywhere; }
#bulk-delete-track { height: 6px; margin-top: 8px; border-radius: 999px; background: var(--tb-line); overflow: hidden; }
#bulk-delete-fill { height: 100%; width: 0; border-radius: 999px; background: var(--tb-accent); transition: width 0.2s ease; }
#bulk-delete-panel[data-state="done"] #bulk-delete-track { display: none; }
@media (max-width: 640px) {
  #select-bar { padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .select-bar-actions { width: 100%; margin-inline-start: 0; }
  .select-bar-actions .select-btn { flex: 1 1 auto; }
  #chat-view.selecting .msg-wrap[data-event-id^="$"] { padding-inline-start: 44px; }
}
@media (prefers-reduced-motion: reduce) { #bulk-delete-fill { transition: none; } }
/* ── The keyboard's down-arrow (2.4.3, Leo: "what about a small down arrow") ───────────────────────
   A round button over the chat, just above the right end of the message bar, while the phone keyboard
   is open (app.js tblInitKbArrow). 44px tap area around a 38px circle, theme colours: the arrow is
   --tb-text-2 on the composer colour (9:1 or more in all five themes). While it shows, the chat keeps
   48px more room under its newest message, so the arrow never covers a message. Hidden in select
   mode and while a voice message records (those bars take the message box's place). */
.tbl-kb-down { position: absolute; right: 8px; bottom: 64px; z-index: 40; width: 44px; height: 44px; margin: 0; padding: 0; border: 0;
  background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.tbl-kb-down[hidden], #chat-view.selecting .tbl-kb-down, #input-area.tbl-recording ~ .tbl-kb-down { display: none !important; }
.tbl-kb-down-dot { width: 38px; height: 38px; box-sizing: border-box; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--tb-composer, var(--panel)); color: var(--tb-text-2, var(--text-muted)); border: 1px solid var(--tb-input-border, var(--line));
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28); }
.tbl-kb-down-dot svg { width: 22px; height: 22px; }
.tbl-kb-down:active .tbl-kb-down-dot { background: var(--tb-accent-soft, var(--panel-2)); }
.tbl-kb-down:focus-visible { outline: none; }
.tbl-kb-down:focus-visible .tbl-kb-down-dot { outline: 2px solid var(--tb-accent, var(--gold)); outline-offset: 2px; }
#chat-view.tbl-kb-arrow-on #messages::after { content: ''; flex: 0 0 48px; }

/* ── Pinned messages (2.4.3, Leo: "no way to unpin it") ──────────────────────────────────────────
   The bar is a button that opens the pinned list (app.js tblOpenPinnedPanel): who, when, what, with
   Show and Unpin. Theme tokens only; every control is at least 44px. Phones get a bottom sheet,
   wider screens a centred card. */
#pinned-bar { width: 100%; min-height: 44px; margin: 0; padding: 6px 16px; border: 0; border-bottom: 1px solid var(--tb-line, rgba(201, 162, 74, 0.13));
  font: inherit; text-align: left; cursor: pointer; color: var(--tb-text, var(--text)); }
#pinned-bar:hover { background: var(--tb-row-hover, var(--panel-2)); }
#pinned-bar:focus-visible { outline: 2px solid var(--tb-accent, var(--gold)); outline-offset: -2px; }
#pinned-count { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: var(--tb-text, var(--text)); }
.pinned-open { width: 18px; height: 18px; flex: none; color: var(--tb-text-2, var(--text-muted)); }
.tbl-pins-overlay { position: fixed; inset: 0; z-index: 1170; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.tbl-pins-card { width: min(460px, 100%); max-height: min(80vh, 100%); display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel, #202328); color: var(--text, #f2f3f5); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); }
.tbl-pins-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 18px; border-bottom: 1px solid var(--line); }
.tbl-pins-title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--text); }
.tbl-pins-x { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-muted); cursor: pointer; }
.tbl-pins-x:hover { background: rgba(128, 128, 128, 0.16); color: var(--text); }
.tbl-pins-note { margin: 0; padding: 10px 18px; font-size: 14px; line-height: 1.45; color: var(--text-muted); border-bottom: 1px solid var(--line); }
.tbl-pins-note[hidden] { display: none; }
.tbl-pins-list { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.tbl-pins-row { display: grid; gap: 4px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.tbl-pins-row:last-child { border-bottom: 0; }
.tbl-pins-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; }
.tbl-pins-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--text); }
.tbl-pins-when { flex: none; color: var(--text-muted); }
.tbl-pins-text { font-size: 15px; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.tbl-pins-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.tbl-pins-btn { min-height: 44px; min-width: 72px; padding: 0 16px; border-radius: 12px; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
  cursor: pointer; background: transparent; color: var(--text); border: 1px solid var(--text-dim); touch-action: manipulation; }
.tbl-pins-btn:hover { background: rgba(128, 128, 128, 0.12); }
.tbl-pins-btn:disabled { opacity: 0.5; cursor: default; }
.tbl-pins-btn:focus-visible, .tbl-pins-x:focus-visible { outline: 2px solid var(--tb-accent, var(--gold)); outline-offset: 2px; }
.tbl-pins-empty { padding: 18px; font-size: 15px; color: var(--text-muted); }
@media (max-width: 640px) {
  .tbl-pins-overlay { align-items: flex-end; padding: 0; }
  .tbl-pins-card { width: 100%; max-height: 75vh; border-radius: 18px 18px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
}
/* "Message pinned." with Undo (app.js toastAction): the button is a real 44px target. */
.toast.toast-has-action { display: flex; align-items: center; gap: 12px; padding: 4px 6px 4px 16px; }
/* Only its button takes taps: the toast sits over the newest messages for 6 s, and a tap on its text
   must still reach a message's "..." button underneath. */
.toast.toast-has-action { pointer-events: none; }
.toast-has-action .toast-action { pointer-events: auto; }
.toast-has-action .toast-text { flex: 1 1 auto; min-width: 0; }
.toast-action { flex: none; min-height: 44px; min-width: 64px; padding: 0 14px; border-radius: 8px; border: 1px solid currentColor; background: transparent;
  color: inherit; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.toast-action:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* The "Send this?" box (pasted pictures, also tblChoose questions) follows the theme (2.4.3): its
   title and Cancel were fixed light colours, unreadable on the light themes' white card. The X is
   a 44px target. */
.tbl-paste-head { color: var(--text, #e8dfc6); }
.tbl-paste-x { color: var(--text-muted, #cfcabb); width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.tbl-paste-file { color: var(--text-muted, #cfcabb); }
.tbl-choose-text { color: var(--text-muted, #d9d4c4); }
.tbl-paste-card .settings-close { color: var(--text-muted); border-color: var(--text-dim); }

/* 2.4.2, phone app with the keyboard open: the message bar's bottom gap is room for the iPhone's
   home bar, but the keyboard covers that bar, so no gap is needed. One guess for the empty dark
   band above the keyboard, not proven: with the keyboard plugin's native resize the web view
   already ends at the keyboard, so env(safe-area-inset-bottom) may be 0 there and this rule may
   change nothing. Measure on a phone before calling the band fixed. html.kb-open comes from the
   keyboard plugin's keyboardWillShow / keyboardWillHide. */
html.app-shell.kb-open #input-area { padding-bottom: 10px; }

/* "Update available" + red light (2.5.1, Leo 2026-10-16; update-button.mjs, rules in update-rules.js).
   One pill for every app, in the chat list header strip and in Settings, shown only while a newer
   Tabella exists. Gold is the brand, so the pill never uses the theme accent (blue in two themes):
   gold border, a gold wash, the theme's own text colour, a red light. 44px high, 16px text. */
.tbl-upd-strip { padding: 10px 12px 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; border-bottom: 1px solid var(--tb-line, rgba(201, 162, 74, 0.2)); }
.tbl-upd-strip[hidden] { display: none; }
.tbl-upd-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; max-width: 100%; padding: 6px 18px 6px 14px; border-radius: 999px;
  border: 1.5px solid #c9a24a; background: rgba(201, 162, 74, 0.18); color: var(--tb-text, var(--text, #eef0f3));
  font: inherit; font-family: var(--font-body, inherit); font-size: 16px; font-weight: 700; line-height: 1.2; text-align: left; cursor: pointer; touch-action: manipulation; }
.tbl-upd-btn[hidden] { display: none; }
.tbl-upd-btn:hover { background: rgba(201, 162, 74, 0.30); }
.tbl-upd-btn:focus-visible { outline: 3px solid #c9a24a; outline-offset: 3px; }
.tbl-upd-btn:disabled { cursor: default; opacity: 0.85; }
.tbl-upd-dot { position: relative; flex: none; width: 12px; height: 12px; border-radius: 50%; background: #e5383b; box-shadow: 0 0 0 2px rgba(229, 56, 59, 0.28); }
.tbl-upd-text { min-width: 0; overflow-wrap: anywhere; }
@keyframes tbl-upd-pulse { 0% { transform: scale(1); opacity: 0.7; } 70%, 100% { transform: scale(2.3); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .tbl-upd-btn:not(:disabled) .tbl-upd-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #e5383b; animation: tbl-upd-pulse 2.2s ease-out infinite; }
}
.tbl-upd-status { font-size: 14px; line-height: 1.4; color: var(--tb-text-2, var(--text-muted, #c9ccd2)); }
.tbl-upd-status:empty { display: none; }
.tbl-upd-settings { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--tb-line, rgba(201, 162, 74, 0.2)); }
.tbl-upd-verline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 15px; color: var(--tb-text-2, var(--text-muted, #c9ccd2)); }
.tbl-upd-ver { font-weight: 700; color: var(--tb-text, var(--text, #eef0f3)); }
.tbl-upd-ver:empty, .tbl-upd-latest:empty { display: none; }
@media print { .tbl-upd-strip, .tbl-upd-settings .tbl-upd-btn { display: none !important; } }

/* 2.5.2: "edited" mark next to the time, always visible (proof that a message was changed). Tap = history. */
.msg-edited { font-size: 11px; opacity: .8; margin-right: 6px; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; min-height: 18px; }
.msg-edited:hover, .msg-edited:focus-visible { opacity: 1; }
.timeline-text { margin-top: 4px; padding: 6px 8px; border-radius: 6px; background: rgba(127,127,127,.16); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }

/* 2.5.2 (Leo 2026-10-17, option B): the quote above a reply sits on its own light box with black text, so it
   never gets lost against the bubble in any theme. Same colours in every theme; a thin dark edge keeps the box
   visible on light bubbles. Contrast: #14100a on #f1dca0 is about 14:1. */
.msg-bubble .msg-reply-badge {
  font-size: 13px; line-height: 1.35; color: #14100a; background: #f1dca0;
  border: 1px solid rgba(20, 16, 10, 0.28); border-left: 3px solid #14100a; border-radius: 6px;
  padding: 4px 8px; margin-bottom: 6px;
}
.msg-bubble .msg-reply-badge.clickable:hover, .msg-bubble .msg-reply-badge.clickable:focus-visible { color: #14100a; background: #f6e8bd; border-left-color: #14100a; }

/* ── 2.5.4 (Leo 2026-10-17): tidy + compact desktop chrome, matched to the dense desktop and mobile mock, and the real Wolf Pak Tabella logo ─
   Everything ABOVE this comment is byte-for-byte the 2.5.3 file (test/tidy-254.test.mjs hashes it); every new rule lives here.
   Layouts: >= 761 px = desktop (slim rail, no in-app top bar, list column with title / search / text tabs); <= 640 px = phone
   (header row, text tabs, flat rows, bottom navigation). 641-760 px keeps the old layout. Only chrome, spacing and icons change.
   Message text, chat-list names and previews are never made smaller, and the text-size setting still scales messages as before. */
/* 2.5.12: separate Lock & Hide button next to the padlock (Leo 2026-10-22). Same look as the padlock. */
#sidebar-lockhide-btn { width: 40px; height: 40px; border-radius: 10px; background: none; border: none; color: var(--tb-text-3, var(--text-muted)); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s, color 0.15s; }
#sidebar-lockhide-btn:hover { background: #c9a24a18; color: var(--gold); }
#tb-listtitle { display: none; }
#empty-logo { display: block; width: auto; height: auto; max-width: min(100%, 260px); max-height: min(280px, 40vh); object-fit: contain;
  aspect-ratio: 640 / 701; margin: 0 auto 18px; }
#empty-title { display: none; }
#empty-sub { font-size: 14px; padding-top: 16px; border-top: 1px solid var(--tb-line); min-width: 150px; text-align: center; }

/* Palette tokens. The generic ones fall back to the theme's own values; the dark-gold block carries the colours sampled from the reference mock. */
:root { --tb-rail-line: var(--tb-line); --tb-list-line: var(--tb-line); --tb-row-line: var(--tb-line); --tb-rail-text: var(--tb-text-2); --tb-rail-active: var(--tb-accent-soft); --tb-empty-text: var(--tb-text-3); }
html[data-theme="dark-gold"], :root:not([data-theme]) {
  --tb-page: #0f1318; --tb-topbar: #0e1116; --tb-rail: #0d1015; --tb-list: #0e1116; --tb-chat: #0f1318; --tb-header: #0f1318; --tb-composer: #0f1318;
  --tb-line: #1e2328; --tb-rail-line: #1b1f24; --tb-list-line: #1e2328; --tb-row-line: #171c22;
  --tb-text: #ffffff; --tb-text-2: #b9c5d3; --tb-text-3: #a6aeba; --tb-rail-text: #f4f7fa; --tb-empty-text: #8f9aa6;
  --tb-accent: #f9c943; --tb-accent-ink: #0f1318; --tb-accent-soft: rgba(249, 201, 67, 0.10); --tb-rail-active: #231e15;
  --tb-send-bg: #f9c943; --tb-send-ink: #0f1318; --tb-pill-active-bg: #f9c943; --tb-pill-active-ink: #0f1318; --tb-badge-bg: #f9c943; --tb-badge-ink: #0f1318;
  --tb-row-hover: #12171d; --tb-row-active: #161b22;
  --tb-input-bg: #161b21; --tb-input-border: #30363f; --tb-search-bg: #161b21;
  --bg: #0f1318; --panel-3: #0e1217;
}

/* Status colours (Leo 2026-10-17, "present but not seen"): the word VPN is the signal, no pill, no dot. Calm green when on, dull red (a bit
   bolder) when off, muted amber while waiting or paused. Per theme so the text always has enough contrast on the list background
   (test/tidy-254.test.mjs checks every theme: on >= 3:1, off and amber >= 4.5:1). Full state stays in aria-label and title. */
:root { --vpn-on: #5fbf7d; --vpn-off: #d9776f; --vpn-wait: #d6aa4a; --upd-dot: #b5483f; }
html[data-theme="light-blue"], html[data-theme="cream-gold"] { --vpn-on: #237f42; --vpn-off: #a8433c; --vpn-wait: #8a6200; }
.vpn-pill { position: relative; min-height: 0; padding: 0 2px; gap: 0; border: none; border-radius: 4px; background: transparent; font-size: 11px; font-weight: 500;
  letter-spacing: .04em; line-height: 14px; color: var(--vpn-on); }
.vpn-pill::after { content: ''; position: absolute; inset: -16px -10px; }
.vpn-pill-dot { display: none; }
.vpn-pill[data-state="on"] { color: var(--vpn-on); font-weight: 500; border-color: transparent; }
.vpn-pill[data-state="off"] { color: var(--vpn-off); font-weight: 700; border-color: transparent; }
.vpn-pill[data-state="wait"], .vpn-pill[data-state="paused"] { color: var(--vpn-wait); font-weight: 600; border-color: transparent; }
.vpn-pill:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* The "Update available" light: the same dull red, never candy-apple. The gentle pulse (motion allowed only) is the one animation in the chrome. */
.tbl-upd-dot { background: var(--upd-dot); box-shadow: 0 0 0 2px rgba(181, 72, 63, 0.28); }
@media (prefers-reduced-motion: no-preference) { .tbl-upd-btn:not(:disabled) .tbl-upd-dot::after { background: var(--upd-dot); } }
/* Message time: present, not seen. Tone on tone: the bubble's own text colour at 60 percent, 10.5 px (scales a little with the text-size setting),
   regular weight, on every bubble (text, files, voice, locked; sent and received). Contrast on the bubble is tested per theme (>= 3:1). */
.msg-time { font-size: clamp(10px, calc(10.5px * var(--chat-scale, 1)), 12px); font-weight: 400; text-decoration: none; opacity: 1;
  color: color-mix(in srgb, var(--tb-bubble-in-text) 60%, transparent); }
.msg-wrap.mine .msg-time { color: color-mix(in srgb, var(--bubble-mine-text, var(--tb-bubble-out-text)) 60%, transparent); }
.msg-edited { font-size: clamp(9.5px, calc(10px * var(--chat-scale, 1)), 11.5px); }

/* The sidebar becomes a grid on desktop AND phone: title row, profile row, search, tabs, list, update line (same elements, same ids). */
@media (min-width: 761px), (max-width: 640px) {
  #sidebar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-content: stretch; overflow: hidden; }
  #sidebar > * { min-width: 0; }
  #tb-listhead { display: contents; }
  #sidebar-header, #tbl-stories-strip, #room-list, #tbl-communities-section, #tbl-upd-strip { grid-column: 1 / -1; }
  #sidebar-search-btn, #sidebar-footer, #new-msg-pill, #brand-watermark { display: none !important; }
  #tb-listtitle { display: flex; align-items: center; gap: 10px; grid-column: 1; }
  #tb-listtitle .tt-brand { display: none; align-items: center; gap: 10px; font-family: 'Palatino Linotype', Palatino, Georgia, serif; font-weight: 700; color: var(--tb-text); }
  #tb-listtitle .tt-chats { font-size: 20px; font-weight: 700; color: var(--tb-text); }
  #tb-compose-btn { display: inline-flex; grid-column: 3; align-self: center; justify-self: center; }
  #room-filter-bar { display: flex; grid-column: 1 / 3; gap: 0; padding: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--tb-line); }
  #room-filter-bar::-webkit-scrollbar { display: none; }
  #tbl-story-add-btn { grid-column: 3; }
  /* All / Unread / Archived: text tabs with an underline on the active one (ids, handlers and counts unchanged) */
  .room-filter-chip { flex: 1 0 auto; justify-content: center; height: 38px; padding: 0 14px; border: none; border-bottom: 2px solid transparent; border-radius: 0;
    background: transparent; color: var(--tb-text-2); font-size: 14px; font-weight: 500; gap: 6px; }
  .room-filter-chip:hover { background: transparent; color: var(--tb-text); border-color: transparent; border-bottom-color: var(--tb-line); }
  .room-filter-chip.active { background: transparent; color: var(--tb-text); font-weight: 700; border-color: transparent; border-bottom-color: var(--tb-pill-active-bg); }
  .room-filter-count { min-width: 20px; height: 20px; border-radius: 10px; font-size: 12px; }
  .room-filter-chip.active .room-filter-count { background: var(--tb-pill-active-bg); color: var(--tb-pill-active-ink); }
  #tb-listhead #tbl-story-add-btn { box-sizing: border-box; width: 28px !important; height: 28px !important; border-width: 1.5px !important; font-size: 17px !important; line-height: 1; padding: 0;
    background: transparent !important; color: #c9a24a !important; align-self: center; justify-self: center; margin: 0 8px; position: relative; }
  #tb-listhead #tbl-story-add-btn::after { content: ''; position: absolute; inset: -8px; }
  #tbl-stories-strip { padding: 6px 12px !important; gap: 8px !important; }
  #tbl-stories-strip:not(:has(.tbl-story-circle)) { display: none !important; }
  #room-list { min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0; }
  .room-item { margin: 0; border-radius: 0; border-bottom: 1px solid var(--tb-line); gap: 12px; }
  .room-item.unread .room-preview { font-weight: 400; }
  .room-badge { min-width: 22px; height: 22px; border-radius: 11px; font-size: 12.5px; }
  #room-list .room-list-status { gap: 8px; padding: 18px 16px; }
  #room-list .room-list-status-btn { min-height: 36px; padding: 6px 18px; }
  /* "Update available": one slim line at the bottom of the list (red light + words + chevron); the whole line is the button */
  .tbl-upd-strip { padding: 0; gap: 0; border-top: 1px solid var(--tb-line); border-bottom: none; align-items: stretch; }
  .tbl-upd-btn { width: 100%; box-sizing: border-box; border: none; border-radius: 0; background: transparent; color: var(--tb-text-2); gap: 8px; padding: 0 14px; font-weight: 500; }
  .tbl-upd-btn:hover { background: var(--tb-row-hover); }
  .tbl-upd-btn::after { content: '\203A'; font-size: 20px; line-height: 1; opacity: .8; }
  .tbl-upd-dot { width: 9px; height: 9px; }
  .tbl-upd-status { padding: 0 14px 6px; }
}

/* ── Desktop (>= 761 px): measured from the reference mock (1087 px wide window = factor 1.0). See test/tidy-254.test.mjs for the pinned numbers. ── */
@media (min-width: 761px) {
  body { padding-top: 0; }
  #tb-topbar { display: none !important; }
  /* rail: 85 px incl. 1 px border; items 76 x 73, 13 px label, 24 px icon, 15 px apart, gold bar at the left of the active one */
  #tb-rail { box-sizing: border-box; width: 85px; gap: 15px; padding: 18px 5px 20px 1px; align-items: center; border-right: 1px solid var(--tb-rail-line); }
  .tb-rail-btn { width: 76px; min-height: 73px; height: 73px; flex: none; padding: 12px 0 0; gap: 5px; justify-content: flex-start; border-radius: 12px; font-size: 13px; font-weight: 500; line-height: 16px; color: var(--tb-rail-text); }
  .tb-rail-btn svg { width: 28px; height: 28px; }
  #tb-rail-contacts { margin-top: -7px; }
  #tb-rail-saved { margin-top: 3px; }
  .tb-rail-btn:hover { background: var(--tb-row-hover); color: var(--tb-rail-text); }
  .tb-rail-btn.active { background: var(--tb-rail-active); color: var(--tb-accent); }
  .tb-rail-btn.active::before { left: -1px; top: 0; bottom: 0; width: 3px; border-radius: 0 3px 3px 0; }
  .tb-wolfpak-mark { order: 7; margin-top: auto; padding: 0 0 10px; font-size: 9px; letter-spacing: .1em; color: var(--tb-mark); }
  .tb-wolfpak-mark .tb-paw { width: 22px; height: 22px; margin-bottom: 2px; }
  .tb-wolfpak-mark .tb-wp-ver { font-size: 10px; margin-top: 1px; }
  #tb-rail-profile { order: 8; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 76px; flex: none; }
  #tb-rail-profile #sidebar-user-avatar { width: 36px; height: 36px; font-size: 15px; }
  #tb-rail-profile #sidebar-user-info { flex: none; width: 76px; text-align: center; }
  #tb-rail-profile #app-title { font-size: 11px; font-weight: 500; line-height: 14px; color: var(--tb-text-2); }
  #tb-rail-settings { order: 9; flex: none; }

  /* list column: 391 px at 1087 (36 vw, never wider than 390, never narrower than 300) */
  #sidebar { box-sizing: border-box; width: clamp(300px, 36vw, 391px); grid-template-columns: auto auto minmax(0, 1fr) auto auto auto auto; grid-template-rows: 52px auto auto auto minmax(0, 1fr) auto auto;
    border-right: 1px solid var(--tb-list-line); background: var(--tb-list); }
  #sidebar-header, #sidebar-header-inner { display: contents; }
  #tb-listtitle { grid-row: 1; grid-column: 1; padding: 2px 0 0 18px; }
  #tb-listtitle .tt-chats { font-size: 21px; font-weight: 700; line-height: 28px; color: var(--tb-text); }
  #vpn-pill { grid-row: 1; grid-column: 2; align-self: center; margin: 4px 0 0 10px; }
  #hamburger-btn { grid-row: 1; grid-column: 4; align-self: center; width: 32px; height: 32px; margin-top: 4px; justify-content: center; padding: 0 !important; }
  #sidebar-lock-btn { grid-row: 1; grid-column: 5; align-self: center; width: 32px; height: 32px; margin-top: 4px; }
  #sidebar-lock-btn img { width: 26px !important; height: 26px !important; }
  #sidebar-lockhide-btn { grid-row: 1; grid-column: 6; align-self: center; width: 32px; height: 32px; margin-top: 4px; }
  #sidebar-lockhide-btn img { width: 26px !important; height: 26px !important; }
  #tb-compose-btn { grid-row: 1; grid-column: 7; align-self: center; justify-self: center; width: 32px; height: 32px; margin: 4px 17px 0 0; border-radius: 8px; color: var(--tb-text); }
  #tb-compose-btn svg { width: 23px; height: 23px; }
  #tb-search-box { grid-row: 2; grid-column: 1 / -1; box-sizing: border-box; width: auto; height: 39px; margin: 0 18px; padding: 0 12px; gap: 14px; border-radius: 10px;
    background: var(--tb-search-bg); border: 1px solid var(--tb-input-border); color: var(--tb-text-3); font-size: 15px; }
  #tb-search-box svg { width: 20px; height: 20px; color: var(--tb-text-3); }
  #room-filter-bar { grid-row: 3; grid-column: 1 / -1; box-sizing: border-box; height: 40px; margin: 4px 0 0 15px; width: 360px; padding: 0; border-bottom: none; }
  #tbl-story-add-btn { grid-row: 3; grid-column: 7; justify-self: end; margin: 4px 18px 0 0; z-index: 2; }
  #tb-listhead #tbl-story-add-btn { margin: 4px 18px 0 0; }
  .room-filter-chip { position: relative; flex: 0 0 auto; height: 40px; padding: 0; font-size: 13.5px; font-weight: 500; color: var(--tb-text-2); }
  .room-filter-chip[data-key="all"] { width: 95px; }
  .room-filter-chip[data-key="unread"] { width: 136px; }
  .room-filter-chip[data-key="archived"] { width: 125px; }
  .room-filter-chip:not([data-key="all"]):not([data-key="unread"]):not([data-key="archived"]) { padding: 0 16px; }
  .room-filter-chip.active { color: var(--tb-accent); font-weight: 600; border-bottom-color: transparent; }
  .room-filter-chip.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 1px; height: 2px; border-radius: 1px; background: var(--tb-accent); }
  #tbl-stories-strip { grid-row: 4; grid-column: 1 / -1; }
  #room-list { grid-row: 5; grid-column: 1 / -1; border-top: 1px solid var(--tb-list-line); }
  #tbl-communities-section { grid-row: 6; }
  #tbl-upd-strip { grid-row: 7; }

  /* chat rows: 57 px pitch, 44 px avatar, name 14.5 px semi-bold, preview 13.5 px, time 14 px, gold 22 px badge */
  .room-item { box-sizing: border-box; height: 57px; padding: 0 23px 0 15px; gap: 16px; align-items: center; border-bottom: none; }
  .room-item::after { content: ''; position: absolute; left: 63px; right: 6px; bottom: 0; height: 1px; background: var(--tb-row-line); z-index: 3; }
  .room-avatar { width: 44px; height: 44px; font-size: 18px; }
  .room-info { gap: 0; margin-top: -1px; }
  .room-name { font-size: 14.5px; font-weight: 600; line-height: 20px; color: var(--tb-text); }
  .room-preview { font-size: 13.5px; line-height: 19px; color: var(--tb-text-2); }
  .room-time { font-size: 14px; line-height: 20px; color: var(--tb-text-2); }
  .room-badge { min-width: 22px; height: 22px; border-radius: 11px; padding: 0; font-size: 13px; font-weight: 700; margin-right: -2px; position: relative; top: 1px; background: var(--tb-badge-bg); color: var(--tb-badge-ink); }
  .room-kebab { position: absolute; right: 2px; top: 50%; margin-top: -15px; }
  /* "Update available": slim 29 px line at the bottom of the list column */
  .tbl-upd-strip { border-top: 1px solid var(--tb-row-line); }
  .tbl-upd-btn { min-height: 28px; height: 28px; padding: 0 18px; gap: 10px; font-size: 11.2px; font-weight: 400; color: var(--tb-text-3); }
  .tbl-upd-btn::after { font-size: 16px; margin-left: -2px; }
  .tbl-upd-dot { width: 7px; height: 7px; }

  /* empty panel: the real logo 333 px tall at 1087 x 848 (scales with the window height), a 137 px divider, 19.5 px line */
  #empty-state { padding: 0 34px 18px 0; box-sizing: border-box; }
  #empty-logo { filter: saturate(1.35) brightness(1.12) drop-shadow(0 0 28px rgba(249, 201, 67, 0.10)); height: min(336px, 39.6vh); max-height: none; max-width: none; width: auto; margin: 0 0 65px; }
  #empty-sub { font-size: 19.5px; line-height: 26px; padding-top: 0; border-top: none; min-width: 0; color: var(--tb-empty-text); }
  #empty-sub::before { content: ''; display: block; width: 137px; height: 1px; margin: 0 auto 21px; background: var(--tb-row-line); }

  #chat-header { padding: 8px 20px; min-height: 64px; gap: 12px; }
  #chat-peer-avatar { width: 44px; height: 44px; font-size: 18px; }
  #chat-title { font-size: 20px; }
  #chat-presence-label { font-size: 14px; }
  #chat-header-right { gap: 6px; }
  #chat-header-right .chat-icon-btn { width: 38px; height: 38px; border-radius: 10px; }
  #chat-header-right .chat-icon-btn svg { width: 22px; height: 22px; }
  #messages { padding: 16px 24px; }

  #input-area { padding: 10px 20px 12px; gap: 10px; }
  #tb-composer-pill { min-height: 52px; padding: 4px 10px 4px 8px; border-radius: 16px; }
  #tb-clip-btn { width: 38px; height: 38px; border-radius: 10px; }
  #tb-clip-btn svg { width: 22px; height: 22px; }
  #tb-composer-pill #msg-input { padding: 8px 8px; min-height: 40px; }
  #send-btn { width: 48px; height: 48px; }
  #send-btn img { width: 32px !important; height: 32px !important; }
}
@media (min-width: 761px) and (max-width: 1099px) {
  #messages { padding: 12px 16px; }
  #input-area { padding: 8px 14px 10px; }
}

/* ── Phone (<= 640 px): measured from the reference mock's phone (screen 332 px wide in the picture = 390 CSS px, factor 1.175). ──
   Header (42 px T + Tabella + search + compose), text tabs, 72 px rows with a chevron, bottom navigation. Touch targets >= 44 px.
   The profile strip (menu, avatar, name, VPN word, Quick Hide) and the update line sit quietly at the bottom of the list, above the navigation. */
@media (max-width: 640px) {
  #sidebar { grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto; border-bottom: none; background: var(--tb-list); }
  #tb-listtitle { grid-row: 1; padding: 12px 0 0 17px; gap: 16px; height: 54px; box-sizing: border-box; }
  html.app-shell #tb-listtitle { padding-top: calc(12px + env(safe-area-inset-top)); height: calc(54px + env(safe-area-inset-top)); }
  #tb-listtitle .tt-brand { display: flex; gap: 16px; font-size: 26px; line-height: 42px; }
  #tb-listtitle .tt-brand img { width: 42px; height: 42px; border-radius: 9px; flex: none; box-shadow: 0 0 0 1px #6e5420; }
  #tb-listtitle .tt-chats { display: none; }
  #tb-search-box { grid-row: 1; grid-column: 2; align-self: flex-start; width: 44px; height: 44px; margin-top: 11px; padding: 0; border: none; background: transparent; justify-content: center; border-radius: 10px; color: var(--tb-text); }
  #tb-search-box span { display: none; }
  #tb-search-box svg { width: 24px; height: 24px; color: var(--tb-text); }
  #tb-compose-btn { grid-row: 1; grid-column: 3; align-self: flex-start; width: 44px; height: 44px; margin: 11px 11px 0 13px; border: none; background: transparent; border-radius: 10px; color: var(--tb-text); }
  #tb-compose-btn svg { width: 26px; height: 26px; }
  html.app-shell #tb-search-box, html.app-shell #tb-compose-btn { margin-top: calc(11px + env(safe-area-inset-top)); }
  /* tabs */
  #room-filter-bar { grid-row: 2; grid-column: 1 / -1; box-sizing: border-box; height: 46px; margin: 18px 52px 0 17px; border-bottom: none; }   /* the right 52 px are the slot of the story "+" (10 + 26 + 10 hit area + 6) */
  #room-filter-bar .room-filter-chip { position: relative; flex: 1 1 0; width: auto; height: 46px; padding: 0; font-size: 15px; font-weight: 500; color: var(--tb-text-2); }
  #room-filter-bar .room-filter-chip[data-key="all"] { flex-grow: 103; }
  #room-filter-bar .room-filter-chip[data-key="unread"] { flex-grow: 132; }
  #room-filter-bar .room-filter-chip[data-key="archived"] { flex-grow: 124; }
  #room-filter-bar .room-filter-chip.active { color: var(--tb-accent); font-weight: 600; border-bottom-color: transparent; }
  #room-filter-bar .room-filter-chip.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 3px; height: 3px; border-radius: 2px; background: var(--tb-accent); }
  #tbl-story-add-btn { grid-row: 2; grid-column: 3; justify-self: end; margin: 18px 10px 0 0; z-index: 2; }
  #tb-listhead #tbl-story-add-btn { width: 26px !important; height: 26px !important; margin: 18px 10px 0 0; }
  #tb-listhead #tbl-story-add-btn::after { inset: -10px; }
  #tbl-stories-strip { grid-row: 3; }
  #room-list { grid-row: 4; border-top: 1px solid var(--tb-list-line); }
  #tbl-communities-section { grid-row: 5; }
  #tbl-upd-strip { grid-row: 6; }
  #sidebar-header { grid-row: 7; display: block; padding: 0 8px; border-top: 1px solid var(--tb-list-line); border-bottom: none; }
  html.app-shell #sidebar-header { padding-top: 0; }
  #sidebar-header-inner { gap: 8px; min-height: 44px; }
  #hamburger-btn { width: 44px; height: 44px; justify-content: center; padding: 0 !important; }
  #sidebar-user-avatar { position: relative; width: 32px; height: 32px; font-size: 14px; }
  #sidebar-user-avatar::after { content: ''; position: absolute; inset: -6px; }
  #app-title { font-size: 15px; font-weight: 500; }
  #sidebar-lock-btn { width: 44px; height: 44px; }
  #sidebar-lock-btn img { width: 30px !important; height: 30px !important; }
  #sidebar-lockhide-btn { width: 44px; height: 44px; }
  #sidebar-lockhide-btn img { width: 30px !important; height: 30px !important; }
  /* rows: 72 px, 52 px avatar, name 17 px, preview 15 px, time 15 px, 26 px badge, chevron */
  .room-item { box-sizing: border-box; height: 72px; padding: 0 16px 0 17px; gap: 19px; align-items: center; }
  .room-item::after { content: ''; position: absolute; left: 17px; right: 14px; bottom: 0; height: 1px; background: var(--tb-row-line); z-index: 3; }
  .room-item .room-swipe-content { padding: 0; }
  .room-avatar { width: 52px; height: 52px; font-size: 21px; }
  .room-info { gap: 2px; margin-right: 24px; }
  .room-name { font-size: 17px; font-weight: 600; line-height: 24px; color: var(--tb-text); }
  .room-preview { font-size: 15px; line-height: 24px; color: var(--tb-text-2); }
  .room-time { font-size: 15px; line-height: 24px; color: var(--tb-text-2); }
  .room-badge { min-width: 26px; height: 26px; border-radius: 13px; padding: 0; font-size: 14px; font-weight: 700; background: var(--tb-badge-bg); color: var(--tb-badge-ink); }
  .room-kebab { display: none; }
  .room-item > .room-swipe-content::after { content: ''; position: absolute; right: 2px; top: 50%; width: 9px; height: 9px; margin-top: -5px;
    border-right: 1.6px solid var(--tb-text-3); border-top: 1.6px solid var(--tb-text-3); transform: rotate(45deg); pointer-events: none; }
  .room-item:not(:has(.room-swipe-content))::before { content: ''; position: absolute; right: 19px; top: 50%; width: 9px; height: 9px; margin-top: -5px;
    border-right: 1.6px solid var(--tb-text-3); border-top: 1.6px solid var(--tb-text-3); transform: rotate(45deg); pointer-events: none; }
  /* Update available: slim 44 px line above the profile strip */
  .tbl-upd-strip { border-top: 1px solid var(--tb-list-line); }
  .tbl-upd-btn { min-height: 44px; padding: 0 17px; font-size: 15px; font-weight: 400; color: var(--tb-text-3); gap: 12px; }
  .tbl-upd-dot { width: 9px; height: 9px; }

  /* bottom navigation (the rail's own buttons: Chats, Contacts, Groups, Saved, Settings) */
  #tb-rail { display: flex; flex-direction: row; order: 99; flex: none; box-sizing: border-box; width: auto; height: auto; padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    gap: 0; justify-content: space-around; align-items: stretch; border-right: none; border-top: 1px solid var(--tb-list-line); overflow: visible; background: var(--tb-list); }
  .tb-rail-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; flex: 1 1 0; width: auto; min-width: 44px; height: auto; min-height: 76px;
    padding: 22px 0 10px; gap: 10px; border: none; border-radius: 0; background: transparent; color: var(--tb-text); font-size: 14px; font-weight: 600; line-height: 16px; cursor: pointer; --tb-rail-icon-cut: var(--tb-rail); }
  .tb-rail-btn.active { background: transparent; color: var(--tb-accent); }
  .tb-rail-btn.active::before { display: none; }
  .tb-rail-btn svg { width: 28px; height: 28px; }
  #tb-rail-profile { display: none; }
  .tb-wolfpak-mark { display: none; }
  body.mobile-in-chat #tb-rail { display: none; }
}

/* ── Add friend + friend requests (2.6.0, Leo 2026-10-17) ─────────────────────────────────────
   One big, plain screen: 16 px+ text, 44 px+ targets. Colours are the theme tokens, so it follows
   dark-gold, light-blue and the others. The gold number on the Contacts buttons is gold in every
   theme on purpose (it has to be noticed). */
.addf-card { max-width: 440px; }
.addf-label { display: block; font-size: 17px; font-weight: 600; color: var(--tb-text, var(--text)); margin: 4px 0 8px; }
.addf-card .addf-input { height: 52px; font-size: 17px; margin-bottom: 12px; border-color: var(--tb-input-border, #c9a24a); background: var(--tb-input-bg, transparent); color: var(--tb-text, var(--text)); }
.addf-card .addf-input:focus { border-color: var(--tb-accent, var(--gold)); }
.addf-codewrap { margin-top: 2px; }
.addf-codewrap[hidden] { display: none; }
.addf-send { display: block; width: 100%; min-height: 52px; font-size: 17px; padding: 14px 20px; border-radius: 12px;
  background: var(--tb-accent, var(--gold)); color: var(--tb-accent-ink, #1a1406); border: 1px solid var(--tb-accent, var(--gold)); }
.addf-send:disabled { opacity: .6; cursor: default; }
#newchat-result { margin-top: 12px; min-height: 4px; }
.addf-result { font-size: 17px; line-height: 1.35; font-weight: 600; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--tb-line, #444); color: var(--tb-text, var(--text)); background: var(--tb-accent-soft, transparent); }
.addf-ok { border-color: #3a8f5a; }
.addf-miss { border-color: #c0503f; }
html[data-theme="light-blue"] .addf-miss, html[data-theme="cream-gold"] .addf-miss { color: #8f2a1d; }
.addf-hint { font-size: 16px; line-height: 1.4; color: var(--tb-text-2, #b3aea2); margin: 8px 2px 0; }
.addf-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--tb-text-3, #8e939c); font-size: 15px; }
.addf-or::before, .addf-or::after { content: ''; flex: 1; height: 1px; background: var(--tb-line, rgba(255,255,255,.12)); }
.addf-big { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; margin: 0 0 10px; padding: 12px 16px; font: inherit; font-size: 17px; font-weight: 600;
  border-radius: 12px; cursor: pointer; background: transparent; color: var(--tb-text, var(--text)); border: 1.5px solid var(--tb-accent, var(--gold)); }
.addf-big:hover { background: var(--tb-accent-soft, rgba(226,177,60,.13)); }
.addf-big:focus-visible, .addf-send:focus-visible { outline: 3px solid var(--tb-accent, var(--gold)); outline-offset: 2px; }
.addf-note { font-size: 16px; line-height: 1.4; color: var(--tb-text-2, #b3aea2); margin: 6px 2px 4px; text-align: center; }
.addf-card .newchat-myhandle-row { font-size: 14px; color: var(--tb-text-3, #8e939c); text-align: center; }
.addf-card .newchat-link-btn { min-height: 44px; font-size: 15px; padding: 0 8px; color: var(--tb-accent, var(--gold)); }
.addf-qrlink { display: block; margin: 0 auto; }
.addf-close { margin-top: 10px; display: flex; justify-content: flex-end; }
.addf-closebtn { min-height: 44px; font-size: 16px; padding: 0 22px; }
.addf-contacts-add { width: 100%; min-height: 52px; font-size: 17px; border-radius: 12px; background: var(--tb-accent, var(--gold)); color: var(--tb-accent-ink, #1a1406); border-color: var(--tb-accent, var(--gold)); }
.addf-empty-add { min-height: 52px; font-size: 17px; border-radius: 12px; }

/* The cards: "<name> wants to be your friend" with big Accept / Decline */
.friend-req-box { display: flex; flex-direction: column; gap: 10px; }
.friend-req-box[hidden], .friend-req-box:empty { display: none; }
#friend-req-list { padding: 10px 12px 6px; box-sizing: border-box; }
#room-list > .friend-req-box { flex: none; }
.friend-req-box[data-friend-req-box="contacts"] { margin-top: 12px; }
.friend-req-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; border: 1.5px solid #e2b13c; background: var(--tb-accent-soft, rgba(226,177,60,.13)); }
.friend-req-avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; background: var(--tb-accent, var(--gold)); color: var(--tb-accent-ink, #1a1406); overflow: hidden; }
.friend-req-body { flex: 1 1 auto; min-width: 0; }
.friend-req-title { font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--tb-text, var(--text)); overflow-wrap: anywhere; }
.friend-req-actions { display: flex; gap: 10px; margin-top: 10px; }
.friend-req-accept, .friend-req-decline { flex: 1 1 0; min-height: 46px; padding: 0 12px; font: inherit; font-size: 16px; font-weight: 700; border-radius: 12px; cursor: pointer; }
.friend-req-accept { background: #e2b13c; color: #1a1406; border: 1.5px solid #e2b13c; }
.friend-req-decline { background: transparent; color: var(--tb-text, var(--text)); border: 1.5px solid var(--tb-pill-border, #5a564d); }
.friend-req-accept:disabled, .friend-req-decline:disabled { opacity: .55; cursor: default; }
.friend-req-accept:focus-visible, .friend-req-decline:focus-visible { outline: 3px solid var(--tb-accent, var(--gold)); outline-offset: 2px; }

/* Gold number on the Contacts buttons (top bar, side rail, phone bottom bar, list footer) */
.friend-badge { position: absolute; top: 4px; right: 4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; box-sizing: border-box;
  background: #e2b13c; color: #1a1406; font-size: 12px; font-weight: 800; line-height: 20px; text-align: center; pointer-events: none; box-shadow: 0 0 0 2px var(--tb-list, #13151a); }
.tb-top-btn, .sb-icon-btn { position: relative; }
.tb-rail-btn .friend-badge { top: 14px; right: calc(50% - 30px); }
@media (min-width: 761px) { .tb-rail-btn .friend-badge { top: 8px; right: 6px; } }

/* ── Big photo / video card (2.5.6, media-card-ui.mjs): picture header, round play, length, label, Save ── */
.msg-lfmedia { margin-top: 4px; width: min(320px, 74vw); max-width: 100%; }
.lfm-stage { --lfm-maxh: 240px; position: relative; overflow: hidden; border-radius: 12px; background: #11141b; margin: 0 auto 0 0;
  aspect-ratio: var(--lfm-ar, 1.7778); width: min(100%, calc(var(--lfm-maxh) * var(--lfm-ar, 1.7778))); min-width: min(100%, 120px);
  box-shadow: 0 0 0 1px var(--tb-line, rgba(255,255,255,.12)); }
@media (min-width: 768px) { .lfm-stage { --lfm-maxh: 320px; } }
.lfm-poster, .lfm-tile, .lfm-video, .lfm-full { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; background: #0b0d12; }
.lfm-poster { object-fit: cover; }
.lfm-tile { background: linear-gradient(135deg, #2a2f3b 0%, #12151c 100%); }
.lfm-full { cursor: zoom-out; }
.lfm-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.85); background: rgba(10,12,18,.58); color: #fff; display: flex; align-items: center; justify-content: center;
  padding: 0 0 0 4px; cursor: pointer; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.lfm-play:hover, .lfm-play:focus-visible { background: rgba(10,12,18,.78); outline: 2px solid var(--gold, #c9a24a); outline-offset: 2px; }
.lfm-play.lfm-open { width: auto; height: auto; border-radius: 999px; padding: 8px 18px; font-size: 14px; font-weight: 600; }
.lfm-dur { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(10,12,18,.72); color: #fff;
  font-size: 12px; font-variant-numeric: tabular-nums; pointer-events: none; }
.lfm-ringbox { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: rgba(10,12,18,.55); color: #fff; }
.lfm-ringbox[hidden], .lfm-note[hidden], .lfm-play[hidden], .lfm-poster[hidden], .lfm-tile[hidden], .lfm-dur[hidden] { display: none; }
.lfm-ringwrap { position: relative; width: 64px; height: 64px; }
.lfm-ring-svg { width: 100%; height: 100%; }
.lfm-ring-bg { fill: none; stroke: rgba(255,255,255,.25); stroke-width: 5; }
.lfm-ring-fg { fill: none; stroke: var(--gold, #c9a24a); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset .2s linear; }
.lfm-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lfm-cancel { background: transparent; border: 1px solid rgba(255,255,255,.7); color: #fff; border-radius: 999px; padding: 4px 14px; font-size: 12px; cursor: pointer; }
.lfm-cancel:hover { background: rgba(255,255,255,.15); }
.lfm-note { margin-top: 6px; font-size: 13px; line-height: 1.35; color: inherit; }
.lfm-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.lfm-label { font-size: 13px; color: inherit; opacity: .85; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lfm-save { flex-shrink: 0; background: transparent; color: var(--tb-accent, var(--gold, #c9a24a)); border: 1px solid currentColor; border-radius: 999px;
  padding: 3px 14px; font-size: 12.5px; cursor: pointer; }
.lfm-save:hover { background: rgba(201,162,74,.14); }
html[data-theme="light-blue"] .lfm-save, html[data-theme="cream-gold"] .lfm-save { color: var(--tb-accent, #1b5fa8); }
html[data-theme="light-blue"] .lfm-save:hover { background: rgba(27,95,168,.1); }
/* ── Optional map picture on a shared-location card (map-preview.mjs; Settings > Privacy > Show map pictures) ── */
.tbl-loc-card--map { max-width: 320px !important; background: var(--tb-day-bg, #1b1e23); }
.tbl-loc-map { position: relative; height: 240px; background: #d8dde3; border-radius: 8px 8px 0 0; overflow: hidden; }
.tbl-loc-canvas { display: block; width: 100%; height: 240px; object-fit: cover; }
.tbl-loc-attrib { font-size: 10px; line-height: 1.3; padding: 3px 10px; color: var(--tb-text-3, #8e939c); background: var(--tb-day-bg, #1b1e23); }
.tbl-loc-card--map > div:not(.tbl-loc-map):not(.tbl-loc-attrib) { background: var(--tb-day-bg, #1b1e23) !important; color: var(--tb-text, #eef0f3) !important; font-size: 12px !important; }
.tbl-loc-card--map a { color: var(--tb-accent, #e2b13c) !important; display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
.tbl-loc-copy { display: block; width: 100%; min-height: 44px; border: 0; border-top: 1px solid var(--tb-line, rgba(255,255,255,0.1)); background: transparent; color: var(--tb-text, #eef0f3); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.tbl-loc-copy:hover, .tbl-loc-copy:focus-visible { background: var(--tb-row-hover, rgba(255,255,255,0.06)); }
.tbl-loc-note { font-size: 11px; padding: 4px 10px 6px; color: #8a8576; background: #1a1608; }

/* Notes from the Tabella admin (2026-10-29, admin-message.mjs): a banner at the very top, above
   every screen, so it shows even when no chat can be opened. */
#tbl-admin-msg { position: fixed; top: 0; left: 0; right: 0; z-index: 100000; box-sizing: border-box;
  padding: calc(10px + env(safe-area-inset-top)) 16px 12px; background: #1e1a0f; color: #f3ead2;
  border-bottom: 2px solid var(--gold); box-shadow: 0 4px 16px rgba(0,0,0,0.45); font-size: 15px; line-height: 1.45; }
#tbl-admin-msg .tbl-admin-msg-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 4px; }
#tbl-admin-msg .tbl-admin-msg-title { color: var(--gold); font-size: 14px; }
#tbl-admin-msg .tbl-admin-msg-when { color: #b9ad8f; font-size: 12px; }
#tbl-admin-msg .tbl-admin-msg-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 40vh; overflow-y: auto; }
#tbl-admin-msg .tbl-admin-msg-ok { margin-top: 8px; background: var(--gold); color: #0a0a0f; border: 0; border-radius: 8px;
  padding: 8px 18px; font-weight: 700; font-size: 14px; cursor: pointer; min-height: 40px; }
.tbl-adm-msg-to { display: flex; gap: 16px; margin: 4px 0 8px; font-size: 14px; }
.tbl-adm-msg-to label { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.tbl-adm-msg-hint { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin-top: 4px; }
.tbl-adm-msg-sent { font-size: 13px; }
.tbl-adm-msg-row { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.08); white-space: pre-wrap; overflow-wrap: anywhere; }
.tbl-adm-msg-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; }