/* Terminal Night — master theme.
   Everything themable is a CSS custom property so global settings (font, spacing,
   palette) can be changed instantly from state later, with no re-render. */

/* The `hidden` attribute must always win over component display rules. Without this, a rule like
   `.rail-btn { display: flex }` overrides `[hidden]`'s default `display:none`, so JS toggling the
   attribute silently fails. Keep this global so that bug can never recur (bit us 3× before). */
[hidden] { display: none !important; }

/* Themed scrollbars everywhere (Firefox + WebKit). Components that hide/override their own
   scrollbar (e.g. .chat-input-field, .cmp-thumbs) win via higher specificity. */
* { scrollbar-width: thin; scrollbar-color: #2b3d52 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #2b3d52; border: 2px solid transparent; border-radius: 7px; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #3a5170; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }

:root {
  /* Palette — "Shelf Layout" navy system (cool near-black, sky-blue accent, green for unread).
     Neon blue/cyan are kept for the game panels, transitions, and the front door. */
  --bg-0: #0b0e14;
  --bg-1: #0d2043;
  --neon-blue: #2b6bff;
  --neon-cyan: #22e6ff;
  --accent: #57b6e8;         /* chrome accent — logo dot, active rows, links */
  --accent-bright: #9ad4f2;  /* hover-bright accent */
  --good: #4bbf7a;           /* connected / unread green */
  --unread-bg: #1c3f2b;      /* unread pill background */
  --unread-fg: #7fe0a8;      /* unread pill text */
  --ink: #c7d6e4;            /* primary text */
  --ink-dim: #6d8099;        /* secondary text */
  --ink-faint: #556677;      /* tertiary / timestamps */
  --label: #5c6b7d;          /* mono section labels */
  --white: #dbe6f2;

  /* Surfaces — sampled from the mockup. */
  --chat-stage: #080b11;   /* behind the panel strip */
  --panel-side: #0a0e15;   /* sidebar + right rail */
  --panel-bg:   #0d1421;   /* panel body */
  --panel-head: #0e131c;   /* panel header */
  --panel-field:#0a1017;   /* composer / input box */
  --panel-line: #1a2130;   /* separators / borders */
  --hover-bg:   #111925;   /* row hover */
  --hover-bg-2: #16202e;   /* stronger hover / avatar tile */

  /* Typography — Barlow Semi Condensed for UI, JetBrains Mono for labels/badges/timestamps. */
  --font-ui: "Barlow Semi Condensed", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --font-display: "Russo One", var(--font-ui);                   /* wordmark / game headings */
  --font-size: 16px;
  --line: 1.5;
  --tracking: 0.3px;

  /* Motion */
  --t-fast: 140ms;
  --t-med: 320ms;
}

/* Blue panel template (game canvas panels). A hair bluer than the base panel. */
.panel-blue {
  --panel-bg:   #0c1524;
  --panel-head: #10192a;
  --panel-field:#0a1220;
  --panel-line: #1d2c44;
}
/* Purple panel template (game CHAT rooms — lobby + private). Matches the purple game frame. */
.panel-purple {
  --panel-bg:   #0c0b16;
  --panel-head: #171130;
  --panel-field:#13101d;
  --panel-line: #2e2544;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;              /* single-screen, no vertical scroll */
  background: var(--bg-0);       /* the blue glow lives on .bg-glow so it can animate */
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--font-size);
  line-height: var(--line);
  letter-spacing: var(--tracking);
}

/* Text isn't selectable anywhere by default — dragging panels around no longer highlights the whole
   UI. Selection is re-enabled only inside form fields (and anything explicitly opted back in). */
body { user-select: none; -webkit-user-select: none; }
input, textarea, select, [contenteditable="true"], .allow-select { user-select: text; -webkit-user-select: text; }

/* Faint scanlines over everything — arcade/terminal vibe */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background: repeating-linear-gradient(0deg,
    rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.16) 3px);
  mix-blend-mode: multiply;
}

/* Swaying blue light source — fades in with the neon, sways like a pushed hanging bulb.
   Oversized and centered so the sway never exposes an edge. */
.bg-glow {
  position: fixed;
  top: 0; left: 50%;
  width: 170vw; height: 125vh;
  pointer-events: none;
  z-index: 0;                    /* above the solid bg, below content (.door is z-index 1) */
  opacity: 0;                    /* starts invisible; fades in as the neon flickers */
  background: radial-gradient(circle 72vh at 50% 4%,
    rgba(43,107,255,.42) 0%,
    rgba(43,107,255,.21) 36%,
    rgba(43,107,255,.08) 58%,
    transparent 76%);
  transform: translateX(-50%);
  will-change: transform, opacity;
  animation:
    bg-fade-in 3.5s ease 1s both,
    bg-sway 12s 1.2s infinite;
}
@keyframes bg-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* Pendulum arc: rises at each extreme, dips lowest through the middle; fast at the
   bottom, slow at the ends (per-keyframe easing = accelerate down, decelerate up). */
@keyframes bg-sway {
  0%   { transform: translateX(-50%) translateX(-9vw) translateY(-7vh) rotate(-1.4deg); animation-timing-function: ease-in; }
  25%  { transform: translateX(-50%) translateX(0)     translateY(0)    rotate(0deg);    animation-timing-function: ease-out; }
  50%  { transform: translateX(-50%) translateX(9vw)   translateY(-7vh) rotate(1.4deg);  animation-timing-function: ease-in; }
  75%  { transform: translateX(-50%) translateX(0)     translateY(0)    rotate(0deg);    animation-timing-function: ease-out; }
  100% { transform: translateX(-50%) translateX(-9vw)  translateY(-7vh) rotate(-1.4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .bg-glow { animation: bg-fade-in 1s ease both; transform: translateX(-50%); }
}

/* Grid backdrop — revealed ONLY where the swaying light passes over it.
   The grid pattern is static; a radial mask (matching the glow) sways across it. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(43,107,255,.40) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,107,255,.40) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0;                    /* fades in with the glow */
  -webkit-mask: radial-gradient(circle 72vh at 50% 5vh,
    #000 0%, rgba(0,0,0,.45) 48%, transparent 74%) no-repeat;
  mask: radial-gradient(circle 72vh at 50% 5vh,
    #000 0%, rgba(0,0,0,.45) 48%, transparent 74%) no-repeat;
  animation:
    bg-fade-in 3.5s ease 1s both,
    grid-sway 12s 1.2s infinite;
}
/* The mask sways with the same pendulum arc as the glow (mask-position, not transform,
   so the grid lines themselves stay put and the light appears to move over them). */
@keyframes grid-sway {
  0%   { -webkit-mask-position: -9vw -7vh; mask-position: -9vw -7vh; animation-timing-function: ease-in; }
  25%  { -webkit-mask-position: 0 0;       mask-position: 0 0;       animation-timing-function: ease-out; }
  50%  { -webkit-mask-position: 9vw -7vh;  mask-position: 9vw -7vh;  animation-timing-function: ease-in; }
  75%  { -webkit-mask-position: 0 0;       mask-position: 0 0;       animation-timing-function: ease-out; }
  100% { -webkit-mask-position: -9vw -7vh; mask-position: -9vw -7vh; }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: bg-fade-in 1s ease both; -webkit-mask-position: 0 0; mask-position: 0 0; }
}

/* While a game is open, freeze the swaying background: the grid's mask-position animation forces a
   full-screen repaint every frame (very costly on weak GPUs) and steals the game's frame budget.
   Pausing holds a static frame — the light just stops sweeping during play. */
body.in-game::before, body.in-game .bg-glow { animation-play-state: paused; }
.neon-blue { color: var(--neon-blue); }
.neon-cyan { color: var(--neon-cyan); }
.glow { text-shadow: 0 0 8px currentColor, 0 0 20px currentColor; }

/* ---- Stage & scenes ---- */
#stage { position: fixed; inset: 0; overflow: hidden; z-index: 1; }
.scene { position: absolute; inset: 0; }

/* Door slides out to the left; chat slides in from the right. */
.scene-door { transition: transform var(--t-med) ease, opacity var(--t-med) ease; }
.scene-door.leaving { transform: translateX(-100%); opacity: 0; pointer-events: none; }

/* Chat scene FADES in (sidebar appears); the default room panel slides in after. */
.scene-chat {
  opacity: 0; pointer-events: none;
  transition: opacity .5s ease;
}
.scene-chat.active { opacity: 1; pointer-events: auto; }

/* ---- Welcome flash ---- */
.welcome {
  position: fixed; inset: 0; z-index: 55;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg-0);
  text-align: center;
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease, visibility .5s ease;
}
.welcome.show { opacity: 1; visibility: visible; }
.welcome-hi {
  font-family: var(--font-display); font-size: clamp(24px, 4vw, 46px);
  letter-spacing: 6px; color: var(--ink);
}
.welcome-handle {
  margin-top: 10px; font-size: clamp(16px, 2.2vw, 26px); letter-spacing: 2px;
  color: var(--neon-cyan); text-shadow: 0 0 14px rgba(34,230,255,.5);
}

/* ---- Reusable custom tooltip (elements with data-tip) — spine-peek style ---- */
.tooltip {
  position: fixed; z-index: 60000; pointer-events: none;   /* above image popups (z 40000+) */
  transform: translateX(-50%) translateY(-6px);
  background: #111a26; color: #a9bacd;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; white-space: nowrap;
  padding: 6px 10px; border-radius: 4px;
  border: 1px solid #2b4f6b; box-shadow: 0 18px 40px -18px #000;
  opacity: 0; transition: opacity .16s ease, transform .16s ease;
}
.tooltip.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Up-arrow that matches the tooltip: an outline triangle (border colour) with a fill triangle
   (bg colour) nested 1px inside — one clean arrow, no stray grey. */
.tooltip-arrow {
  position: absolute; top: -6px; left: 50%; margin-left: -6px;
  width: 0; height: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-bottom: 6px solid #2b4f6b;   /* tooltip border colour */
}
.tooltip-arrow::after {
  content: ""; position: absolute; top: 1px; left: -5px;
  width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 5px solid #111a26;   /* tooltip fill colour */
}
/* Purple variant — used for tooltips on game + game-chat panels. */
.tooltip.tt-purple { background: #171130; color: #c8bce8; border-color: #4a3a7a; }
.tooltip.tt-purple .tooltip-arrow { border-bottom-color: #4a3a7a; }
.tooltip.tt-purple .tooltip-arrow::after { border-bottom-color: #171130; }
/* Cool-rose-on-navy variant — used for tooltips on Extras (site) panels. */
.tooltip.tt-magenta { background: #12111e; color: #d9c6d4; border-color: #40365a; }
.tooltip.tt-magenta .tooltip-arrow { border-bottom-color: #40365a; }
.tooltip.tt-magenta .tooltip-arrow::after { border-bottom-color: #12111e; }

/* Left variant — used for the far-right rail: tooltip sits to the LEFT of the icon with a
   right-pointing chevron on its right edge. */
.tooltip.tt-left { transform: translateX(6px); }
.tooltip.tt-left.show { transform: none; }
.tooltip.tt-left .tooltip-arrow {
  top: 50%; left: auto; right: -6px; margin-left: 0; transform: translateY(-50%);
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  border-left: 6px solid #2b4f6b; border-right: 0;
}
.tooltip.tt-left .tooltip-arrow::after {
  content: ""; top: -5px; left: auto; right: 1px;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-left: 5px solid #111a26; border-right: 0;
}

/* Up variant — tooltip sits ABOVE the element (composer tools at the bottom of the screen), with a
   down-pointing chevron on its bottom edge. JS sets left explicitly, so no horizontal centering. */
.tooltip.tt-up { transform: translateY(6px); }
.tooltip.tt-up.show { transform: none; }
.tooltip.tt-up .tooltip-arrow {
  top: auto; bottom: -6px; left: 50%; margin-left: -6px;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-bottom: 0; border-top: 6px solid #2b4f6b;
}
.tooltip.tt-up .tooltip-arrow::after {
  content: ""; top: auto; bottom: 1px; left: -5px;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 0; border-top: 5px solid #111a26;
}

/* ---- Optional "new build" notice — amber top-bar chip (design 3a from PSD/Update Notice) ----
   Amber, never blue: an advisory in its own lane next to presence. Ghost REFRESH, ✕ to dismiss.
   Styles live with the top bar in chat.css; keyframe here so it's available app-wide. */
@keyframes nb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* Left-rail "more below" cue — a circle+arrow tinted per-section (--rail-rgb), shown only at the very
   top of an overflowing list; it fades on scroll and returns at the top. Toggled via .side-sec.cue-on. */
.sec-scroll-cue { position: absolute; left: 50%; bottom: 5px; z-index: 4; width: 21px; height: 21px; padding: 0; transform: translateX(-50%) translateY(5px); border-radius: 50%; border: 1px solid rgba(var(--rail-rgb), .55); background: rgba(10, 14, 22, .9); color: rgba(var(--rail-rgb), .95); display: grid; place-items: center; font-size: 10px; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease, border-color .14s ease, color .14s ease; }
.side-sec.cue-on .sec-scroll-cue { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.side-sec.collapsed .sec-scroll-cue { opacity: 0; pointer-events: none; }
.sec-scroll-cue:hover { border-color: rgb(var(--rail-rgb)); color: #fff; box-shadow: 0 0 8px rgba(var(--rail-rgb), .4); }
.sec-scroll-cue.cue-unread { border-color: var(--good); color: var(--good); background: rgba(10,14,22,.95); font-family: var(--font-mono); font-weight: 700; font-size: 9.5px; box-shadow: 0 0 7px rgba(75,191,122,.35); }   /* unread hidden below → green outline + count */
.sec-scroll-cue.cue-unread:hover { border-color: var(--good); color: #fff; }

/* Minimal view: media collapsed to tiny inline icon chips (image/YouTube/video/audio/link + link title). */
/* 16colo.rs TV — synced ANSI stream panel: a scrollable art stage over a neon credit bar. */
.site-body:has(.tv-stage) { position: relative; }
.tv-stage { position: absolute; inset: 34px 0 42px 0; overflow: hidden; background: #05070c; }   /* live TV: no scrollbar — the stream auto-scrolls via JS (programmatic scrollTop still works) */
.tv-topbar { position: absolute; left: 0; right: 0; top: 0; height: 34px; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: linear-gradient(#0a1420, #060c14); border-bottom: 1px solid var(--hair, #1e2a3a); font-size: 12px; color: var(--ink-dim, #8aa); white-space: nowrap; }
.tv-topbar .tv-src-lbl { letter-spacing: .3px; }
.tv-topbar .tv-src { display: inline-block; padding: 2px 8px; margin-left: 2px; border: 1px solid rgba(87,182,232,.4); border-radius: 5px; color: #57b6e8; font-weight: 600; text-decoration: none; transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.tv-topbar .tv-src:hover { background: #57b6e8; color: #04121d; border-color: #57b6e8; box-shadow: 0 0 12px rgba(87,182,232,.5); }
.tv-topbar .tv-count { margin-left: auto; opacity: .85; }
.tv-reel { display: block; }
.tv-art { display: block; width: 100%; height: auto; image-rendering: pixelated; cursor: zoom-in; }
/* Admin → 16colo.rs TV: collapsible packs with a per-file thumbnail grid + include checkbox. */
/* Admin → Default View: pick + order the panels a new member first sees. */
.adm-dv-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.adm-dv-h { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-dim, #8aa); margin: 4px 0 8px; }
.adm-dv-avail .adm-dv-h:not(:first-child) { margin-top: 16px; }
.adm-dv-pit, .adm-dv-back { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-dv-add-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; background: #0e1622; border: 1px solid var(--hair, #1e2a3a); border-radius: 6px; color: var(--ink, #dfe6f2); font-size: 12px; cursor: pointer; }
.adm-dv-add-chip:hover:not(:disabled) { border-color: #57b6e8; color: #57b6e8; }
.adm-dv-add-chip:disabled { opacity: .4; cursor: default; }
.adm-dv-add-chip i { font-size: 9px; }
.adm-dv-sel { background: #0b1220; border: 1px solid var(--hair, #1e2a3a); border-radius: 8px; padding: 10px; }
.adm-dv-list { display: flex; flex-direction: column; gap: 6px; min-height: 40px; }
.adm-dv-row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; background: #0e1622; border: 1px solid var(--hair, #1e2a3a); border-radius: 6px; }
.adm-dv-row.adm-tv-dragging { opacity: .5; border-color: #57b6e8; }
.adm-dv-grip { color: var(--ink-dim, #8aa); cursor: grab; opacity: .6; }
.adm-dv-nm { flex: 1; color: var(--ink, #dfe6f2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-dv-kind { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-dim, #8aa); opacity: .7; }
.adm-dv-state { padding: 3px 9px; border-radius: 5px; border: 1px solid var(--hair, #1e2a3a); background: #0b1220; color: var(--ink-dim, #8aa); font-size: 11px; cursor: pointer; }
.adm-dv-state.on { color: #4fd08a; border-color: rgba(79,208,138,.4); }
.adm-dv-rm { background: none; border: none; color: var(--ink-dim, #8aa); cursor: pointer; padding: 2px 4px; }
.adm-dv-rm:hover { color: #e88; }
.adm-tv-add { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; flex-wrap: wrap; }
.adm-tv-add input { flex: 1; min-width: 260px; padding: 8px 10px; background: #0b1220; border: 1px solid var(--hair, #1e2a3a); border-radius: 6px; color: var(--ink, #dfe6f2); font-size: 13px; }
.adm-tv-msg { font-size: 12px; color: var(--ink-dim, #8aa); }
.adm-tv-msg.busy { color: #57b6e8; }
.adm-tv-msg.ok { color: #4fd08a; }
.adm-tv-msg.err { color: #e88; }
.adm-tv { display: flex; flex-direction: column; gap: 8px; }
.adm-tv-head { cursor: pointer; padding: 8px 10px; background: #0e1622; border: 1px solid var(--hair, #1e2a3a); border-radius: 6px; display: flex; align-items: center; gap: 8px; }
.adm-tv-head .adm-tv-grip { color: var(--ink-dim, #8aa); cursor: grab; opacity: .6; }
.adm-tv-head .adm-tv-grip:hover { opacity: 1; }
.adm-tv-pack.adm-tv-dragging { opacity: .5; }
.adm-tv-pack.adm-tv-dragging .adm-tv-head { border-color: #57b6e8; }
.adm-tv-head b { color: var(--ink, #dfe6f2); }
.adm-tv-head .adm-tv-yr { color: var(--ink-dim, #8aa); font-size: 12px; }
.adm-tv-head .adm-tv-cnt { margin-left: auto; color: #57b6e8; font-size: 12px; }
.adm-tv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 8px 2px 4px; }
.adm-tv-cell { position: relative; display: block; background: #05070c; border: 1px solid var(--hair, #1e2a3a); border-radius: 6px; overflow: hidden; }
.adm-tv-cell img { display: block; width: 100%; height: 180px; object-fit: cover; object-position: top; image-rendering: pixelated; cursor: zoom-in; }
.adm-tv-cell img:hover { outline: 1px solid #57b6e8; outline-offset: -1px; }
.adm-tv-cell.off { opacity: .4; }
.adm-tv-cell input { position: absolute; top: 6px; left: 6px; width: 16px; height: 16px; z-index: 2; cursor: pointer; }
.adm-tv-cell .adm-tv-name { display: block; padding: 4px 6px; font-size: 11px; color: var(--ink-dim, #8aa); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 42px; display: flex; align-items: center; gap: 12px; padding: 0 12px; background: linear-gradient(#0a1420, #060c14); border-top: 1px solid var(--hair, #1e2a3a); font-size: 12px; color: var(--ink-dim, #8aa); white-space: nowrap; overflow: hidden; }
.tv-bar .tv-live { color: #e0533f; font-weight: 700; letter-spacing: 1px; display: inline-flex; align-items: center; gap: 5px; }
.tv-bar .tv-live i { font-size: 8px; animation: tvpulse 1.4s infinite; }
@keyframes tvpulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.tv-bar .tv-title { color: var(--ink, #dfe6f2); font-weight: 600; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
.tv-bar .tv-info { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; opacity: 0; transition: opacity .35s ease; }
.tv-bar .tv-author { color: #7fc8f0; font-weight: 600; max-width: 30%; overflow: hidden; text-overflow: ellipsis; }
.tv-bar .tv-meta { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.mm-media { display: inline; margin-left: 6px; }   /* plain inline wrapper — chips flow inline with the message text and wrap naturally, no reserved block below */
.msg-re-line { display: block; margin: 0; padding-left: 10px; color: var(--ink-dim); font-size: 12px; line-height: 1.3; font-style: italic; white-space: normal; }   /* minimal-mode reply: "Re: Name › message" on its own tight line, italic, part of the typed stream */
.msg-re-line .msg-re-chev { margin-right: 5px; font-weight: 600; color: var(--ink-dim); opacity: .8; }   /* "Re:" marker, ~10px in from the left (line padding) */
.msg-re-line .msg-re-name-min { opacity: .7; }   /* colours come from paintName's inline spans; dimmed a touch */
.msg-re-line .msg-c-sep { margin: 0 5px; }   /* space around the › separator (no literal spaces in the DOM) */
.msg-re-line .msg-re-body-min { color: var(--ink-dim); }
.msg-re-line .msg-re-body-min.mm-clamp { cursor: pointer; }
.msg-re-line .msg-re-body-min.mm-clamp:hover { color: var(--ink); }
.mm-chip { display: inline-flex; align-items: center; gap: 4px; margin: 0 4px 0 0; vertical-align: middle; background: none; border: none; padding: 0; cursor: pointer; color: var(--ink-dim); font-size: 13px; line-height: 1.2; transition: color .12s ease; }
.mm-chip:hover .mm-title { color: var(--ink); }
.mm-chip i { transition: filter .12s ease; }
.mm-chip:hover i { filter: brightness(1.35) drop-shadow(0 0 5px currentColor); }   /* glow on hover, no zoom */
/* icon tints match the full descriptive cards */
.mm-chip .fa-youtube { color: #e0533f; }                                   /* YouTube red */
.mm-chip .fa-video, .mm-chip .fa-volume-high, .mm-chip .fa-images, .mm-chip .fa-image, .mm-chip .fa-link { color: #57b6e8; }   /* video, audio, album, image, link → blue */
.mm-chip .fa-file-code, .mm-chip .fa-file-alt, .mm-chip .fa-file-pdf { color: #9fd8f5; }   /* ANSI/TXT/PDF file card cyan */
.mm-title { font-style: italic; font-size: 11.5px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }