html, body {
height: 100%;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* LC-194: readability baseline. A comfortable body line-height + antialiasing
applied app-wide (Tailwind's preflight leaves line-height to per-element
utilities; this sets a sane default for prose-y blocks that don't pin one). */
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* LC-194 / LC-218: compact density. Templates opt in with
`data-lc-density-tight="row|row-dense|header|composer"` on the small
set of stable container hooks that should respond. Attribute-driven
(not class-string-coupled) so future utility-class swaps in templates
do not silently un-compact a surface. The `data-density` attribute
is set no-flash by the base.html bootstrap from the lc-density
cookie/localStorage.
- `row` halves a tall row's vertical padding. Used by non-follow-up
message rows (comfortable `py-2` = 0.5 rem -> compact
0.25 rem, the LC-194 chosen ratio).
- `row-dense` halves a short row's vertical padding. Used by sidebar
room/peer rows (comfortable `py-1` = 0.25 rem -> compact
0.125 rem so the change is visible at all on rows that
were already tight).
- `header` shrinks header padding + drops base font ~0.9em. Used by
the room topbar.
- `composer` halves the composer's TOP padding only (preserves the
iOS safe-area bottom inset from LC-199's `lc-pb-safe`).
Markdown paragraph spacing inside a message also tightens. */
[data-density="compact"] [data-lc-density-tight="row"] {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
[data-density="compact"] [data-lc-density-tight="row-dense"] {
padding-top: 0.125rem;
padding-bottom: 0.125rem;
}
[data-density="compact"] [data-lc-density-tight="header"] {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
font-size: 0.9em;
}
[data-density="compact"] [data-lc-density-tight="composer"] {
padding-top: 0.25rem;
}
[data-density="compact"] .lc-md > p + p,
[data-density="compact"] .lc-md > * + * {
margin-top: 0.3rem;
}
/* LC-327: message text size (reading scale). Device-local; the
attribute is set no-flash by the base.html bootstrap from lc-textsize.
Scoped to .lc-md (the message body) so chrome / timestamps / sidebar are
unaffected; .lc-md code/pre are em-relative and scale with the base. The
default ("normal") carries no attribute and inherits the 1rem body size. */
[data-lc-textsize="small"] .lc-md {
font-size: 0.875rem;
}
[data-lc-textsize="large"] .lc-md {
font-size: 1.125rem;
}
/* LC-329: copy button on fenced code blocks. The button is icon-only in the
(locale-independent) cached markdown; layout.html applies its accessible
name + handles the click. Revealed on hover / keyboard focus so it does not
clutter the block at rest. */
.lc-codeblock {
position: relative;
}
/* LC-550: mermaid diagram container. Before the vendored bundle renders (or with
JS off / on a parse error) the .lc-mermaid-src
shows the raw source as a
readable fallback; on success mermaid.js replaces the container with an SVG. */
.lc-mermaid {
margin: 0.5rem 0;
text-align: center;
}
.lc-mermaid svg {
max-width: 100%;
height: auto;
}
.lc-mermaid-src {
margin: 0;
padding: 0.75rem;
overflow-x: auto;
text-align: left;
white-space: pre;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.8125rem;
border-radius: 0.375rem;
border: 1px solid var(--border);
background: var(--surface-sunken);
color: var(--content-muted);
}
/* A failed render keeps the source but flags it so it does not read as a
deliberate code block. */
.lc-mermaid[data-lc-mermaid-error] .lc-mermaid-src {
border-color: var(--danger);
}
.lc-code-copy {
position: absolute;
top: 0.375rem;
right: 0.375rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
padding: 0;
border: 1px solid var(--border);
border-radius: 0.375rem;
background-color: var(--surface-elevated);
color: var(--content);
opacity: 0;
transition: opacity 0.12s ease-in-out;
cursor: pointer;
}
.lc-code-copy svg {
width: 0.95rem;
height: 0.95rem;
}
.lc-codeblock:hover .lc-code-copy,
.lc-code-copy:focus-visible {
opacity: 1;
}
.lc-code-copy.lc-code-copied {
opacity: 1;
}
/* Visible confirmation for sighted users: swap the icon for a checkmark. The
glyph is locale-independent; the accessible name is updated to the localized
"Copied" string in layout.html. */
.lc-code-copy.lc-code-copied svg {
display: none;
}
.lc-code-copy.lc-code-copied::after {
content: "\2713";
font-size: 0.95rem;
line-height: 1;
}
/* LC-308: unread-only sidebar filter. Device-local; the attribute is
set no-flash by the base.html bootstrap. A row / section is kept only when
it :has() a non-empty unread or mention badge, or the currently-open room
(aria-current="page"). Because the badge spans OOB-swap live
(ws/unread_badge.html), :has()/:empty re-evaluate automatically - a new
message re-reveals a row and reading it re-hides it, with no JS. The
read-state badge spans are empty elements, so :not(:empty) is false. */
html[data-lc-unread-only] [data-lc-sb-row]:not(:has([data-lc-unread]:not(:empty), [data-lc-mention]:not(:empty), [aria-current="page"])) {
display: none;
}
html[data-lc-unread-only] [data-lc-sb-section]:not(:has([data-lc-unread]:not(:empty), [data-lc-mention]:not(:empty), [aria-current="page"])) {
display: none;
}
/* LC-96 branding hooks. Default values mirror the project's existing
blue-600 / blue-700 pair so a deployment with no operator-set
branding looks identical to the pre-LC-96 build. Layout templates
override these via an inline `` block at
render time so the colors propagate without a Tailwind rebuild. */
:root {
--brand-primary: #2563eb;
--brand-accent: #1d4ed8;
}
.brand-bg { background-color: var(--brand-primary); }
.brand-bg:hover { background-color: var(--brand-accent); }
.brand-text { color: var(--brand-primary); }
.brand-border { border-color: var(--brand-primary); }
/* LC-190: semantic design tokens (theming foundation for LC-189).
*
* These layer ABOVE the LC-96 brand vars and are the single source of truth
* for surface / text / border / state colors. Tailwind maps utilities onto
* them (see tailwind.config.js theme.extend.colors), so `bg-surface`,
* `text-content`, `border-border`, `bg-accent`, etc. recolor automatically
* when `` (palette) or `data-mode` (light/dark/hc-light/
* hc-dark) changes.
*
* The `:root` (light) values are the slate/white palette the templates
* already hardcode, so introducing the tokens is visually a no-op; LC-193
* migrates templates onto them, and LC-191/LC-192 add the
* `[data-mode="dark"]` / high-contrast palettes here. */
:root {
/* LC-554 (Blue Harbor): the neutral ramp is blue-tinted rather than the
old cool slate. The accent stays #2563eb (the pre-existing brand
default) so this is a surface/text/border retune, not an accent change.
Muted/subtle text and borders are a touch darker than the old slate,
which also nudges contrast up (muted #52657a ~5.6:1 on --surface vs the
old #64748b ~4.6:1). */
/* Surfaces */
--surface: #f7fbff; /* app background (blue-tinted near-white) */
--surface-elevated: #ffffff; /* cards, panels, dialogs */
--surface-sunken: #edf6ff; /* inputs, code, inset rows */
/* Text */
--content: #071426; /* primary text (near-black navy) */
--content-muted: #52657a; /* secondary text */
--content-subtle: #8193a8; /* tertiary / placeholder */
/* Lines */
--border: #d8e6f5; /* default borders */
--border-strong: #b9cde3; /* emphasized borders */
/* Accent (chases the operator brand color) */
--accent: var(--brand-primary);
--accent-hover: var(--brand-accent);
--accent-content: #ffffff; /* text/icon on an accent fill */
/* LC-222: soft-accent callout. Mirrors LC-215's --danger-surface for
the "tinted accent" surfaces (active sidebar row, mention popover
avatar, voted poll bar, settings device chip, reply-count chip).
`--accent-surface-content` is the foreground text color paired with
it: light themes use `--accent` (preserves blue affordance, ~4.5:1
on blue-100); dark themes flip to `--content` so text stays
readable against the dim blue-900 surface (text-accent on dark
accent-surface fails WCAG AA). */
--accent-surface: #dbeafe; /* blue-100 */
--accent-surface-content: #1d4ed8;
/* Semantic state colors (each with a readable foreground) */
--success: #16a34a;
--success-content: #ffffff;
--warning: #d97706;
--warning-content: #ffffff;
--danger: #dc2626;
--danger-content: #ffffff;
/* LC-215: soft-danger callout panel (delete-account, error banners).
Surface + border that sit visibly against the page bg as "warning
zone" without the loud full-fill of `--danger`. Heading + body copy
on these panels use `--danger` as text color. */
--danger-surface: #fef2f2; /* red-50 */
--danger-border: #fca5a5; /* red-300 */
/* LC-224: soft-success + soft-warning callouts (parallel to
--danger-surface). `*-surface-content` is the foreground text color
paired with the soft surface; light themes use the saturated text
color for affordance, dark themes flip to `--content` to keep text
readable against the dim surface (same posture as LC-222 fixed
the accent contrast issue). */
/* Both `*-surface-content` values are hardcoded darker shades (emerald-700,
amber-700) instead of `var(--success)` / `var(--warning)`. Saturated
--success (green-600 #16a34a) and --warning (amber-600 #d97706) on
the soft green-50 / amber-50 surfaces are ~3:1 contrast - fail WCAG
AA for normal text. The darker emerald-700 / amber-700 shades give
~5.5:1 / ~5:1 and pass AA. */
--success-surface: #f0fdf4; /* green-50 */
--success-border: #86efac; /* green-300 */
--success-surface-content: #047857; /* emerald-700 */
--warning-surface: #fffbeb; /* amber-50 */
--warning-border: #fcd34d; /* amber-300 */
--warning-surface-content: #b45309; /* amber-700 */
/* LC-225: message-actor badges. Three soft-surface families so the
webhook / email-ingress / protocol-bridge badges dim together in
dark and hc-dark instead of staying bright. Per-kind hue preserves
the visual identity ("this is from a webhook" vs "from a bridge");
all three follow the LC-224 darker-text posture so contrast on the
soft surface passes WCAG AA. */
--webhook-surface: #d1fae5; /* emerald-100 */
--webhook-content: #047857; /* emerald-700 */
--email-surface: #e0f2fe; /* sky-100 */
--email-content: #0369a1; /* sky-700 */
--bridge-surface: #ede9fe; /* violet-100 */
--bridge-content: #6d28d9; /* violet-700 */
/* Keyboard-focus ring */
--ring: var(--brand-primary);
/* LC-366: enclave rail. The leftmost app rail reads as a dark Discord/Slack
chrome surface independent of the page theme; these tokens give it a
theme-aware identity (idle tile, hover tile, icon color) instead of the
hardcoded slate-* it used before. Active state reuses --accent. */
/* LC-560: aligned to the Blue Harbor navy family so the rail + the navy
sidebar read as one cohesive dark chrome. The rail sits darkest (#041326),
left of the #071a2f sidebar. */
--rail-surface: #041326; /* darkest navy */
--rail-tile: #0b2542; /* navy idle tile */
--rail-tile-hover: #123e73; /* navy hover tile */
--rail-content: #ffffff;
--rail-content-muted: #9fb6d0; /* navy-muted */
/* LC-554 (Blue Harbor) phase 1b: room sidebar (the w-64 nav column, distinct
from the w-16 enclave rail above). These tokens give the sidebar its own
dark-navy chrome identity so it reads as a dark shell over the light page
- the signature Blue Harbor look. In LIGHT mode these mirror the dark
theme's navy surfaces on purpose. DEFINED here but not yet consumed; the
sidebar templates still use bg-surface-sunken until LC-560 wires raw
`.lc-sidebar { background: var(--sidebar-surface) }` rules onto them (same
pattern as the rail's .lc-rail-tile). Adding the vars is a visual no-op. */
--sidebar-surface: #071a2f; /* dark navy chrome over the light page */
--sidebar-elevated: #0b2542; /* raised / hover rows */
--sidebar-sunken: #041326; /* search field, inset */
--sidebar-content: #eaf4ff; /* primary text on navy */
--sidebar-muted: #9fb6d0; /* section headers, secondary text */
--sidebar-border: #17395c; /* dividers on navy */
}
/* LC-191: dark palette. Same token contract as :root, slate-based dark.
Applies app-wide once LC-193 migrates templates onto the tokens; until then
only token-using surfaces (body, and anything already migrated) recolor.
LC-192 adds the high-contrast variants. */
[data-mode="dark"] {
/* LC-541 Phase 1: palette-CONSTANT status + actor-badge tokens (keyed by mode only, shared across every palette). Values unchanged. */
--success: #22c55e;
--success-content: #052e16;
--warning: #f59e0b;
--warning-content: #451a03;
--danger: #ef4444;
--danger-content: #450a0a;
/* LC-215: dim red-tinted panel that recedes against slate-900 surface
but reads as danger zone. Surface sits just darker than the
red-950 used by `--danger-content` so the two never compose
silently invisible if anyone writes `bg-danger-surface
text-danger-content` by accident. */
--danger-surface: #3a0808;
--danger-border: #7f1d1d; /* red-900 */
/* LC-224: dim green / amber tinted panels for soft-success / soft-warning
on dark surface. Foreground flips to `--content` so text reads on the
dim surface (saturated success/warning text color would fail AA).
Surfaces sit just darker than `--success-content` / `--warning-content`
(which are also green-950 / amber-950 in dark) so the two never
compose silently invisible if anyone writes `bg-success-surface
text-success-content` by accident - same posture as LC-215 fixed
for danger. */
--success-surface: #031b0d;
--success-border: #14532d; /* green-900 */
--success-surface-content: var(--content);
--warning-surface: #2d1003;
--warning-border: #78350f; /* amber-900 */
--warning-surface-content: var(--content);
/* LC-225: dim emerald / sky / violet tinted badges for the webhook /
email / bridge actor chips. Content flips to `--content` so text
reads on the dim per-hue surface. */
--webhook-surface: #022c1b;
--webhook-content: var(--content);
--email-surface: #082f49; /* sky-950 */
--email-content: var(--content);
--bridge-surface: #2e1065; /* violet-950 */
--bridge-content: var(--content);
color-scheme: dark; /* native form controls + scrollbars go dark */
}
[data-theme="blue-harbor"][data-mode="dark"] {
/* LC-541 Phase 1: palette-VARYING surface/text/border/accent/ring/rail/sidebar tokens for the Blue Harbor palette. Values unchanged. */
/* LC-554 (Blue Harbor): navy dark theme, replacing the old slate-900 base.
Same token contract; surfaces step from #071a2f (page) up to #0b2542
(elevated) and down to #041326 (sunken). Text ramp is blue-tinted white.
Accent still tracks --brand-primary; --ring stays blue-400 for contrast
on the navy ground. */
--surface: #071a2f; /* navy page background */
--surface-elevated: #0b2542; /* cards, panels, dialogs */
--surface-sunken: #041326; /* inputs, code, inset rows */
--content: #eaf4ff; /* primary text */
--content-muted: #9fb6d0; /* secondary text */
--content-subtle: #6f89a5; /* tertiary / placeholder */
--border: #17395c; /* default borders */
--border-strong: #24517c; /* emphasized borders */
--accent: var(--brand-primary);
--accent-hover: var(--brand-accent);
--accent-content: #ffffff;
/* LC-222: dim brand-tinted panel that sits visibly against the navy
surface; LC-554 retints it to Blue Harbor's #123e73. `--accent-surface-content`
flips to `--content` (#eaf4ff) so text reads against the dim blue
surface; using --accent (blue-600) here would fail WCAG AA. */
--accent-surface: #123e73;
--accent-surface-content: var(--content);
--ring: #60a5fa; /* lighter ring for contrast on dark */
/* LC-366: rail sits one step darker than the page surface (slate-950 vs
slate-900) so it still reads as distinct chrome in dark mode. */
--rail-surface: #020617; /* slate-950 */
--rail-tile: #1e293b; /* slate-800 */
--rail-tile-hover: #334155; /* slate-700 */
--rail-content: #e2e8f0; /* slate-200 */
--rail-content-muted: #94a3b8; /* slate-400 */
/* LC-554 phase 1b: in dark mode the sidebar sits one step darker than the
#071a2f page (same posture as the rail above) so it still reads as
distinct chrome; text ramp matches the page. */
--sidebar-surface: #041326; /* one step darker than the navy page */
--sidebar-elevated: #16283b; /* raised / hover rows */
--sidebar-sunken: #020c18; /* search field, inset */
--sidebar-content: #eaf4ff;
--sidebar-muted: #9fb6d0;
--sidebar-border: #17395c;
}
/* LC-192: high-contrast palettes. Maximal text/surface contrast (AAA for body
text), pure-black/white borders (always visible, no low-contrast greys), and
a thicker focus ring (see the `[data-mode="hc-light"]` / `[data-mode="hc-dark"]`
:focus-visible rules below). State colors use the darker/lighter 700-ish
shades so they pass AA against the surface. Auto-selected on
`prefers-contrast: more` when theme = System (resolved in the base.html
bootstrap).
LC-554 (Blue Harbor): the hc themes are DELIBERATELY left un-retinted. High
contrast is a contrast-first, brand-hue-neutral posture (pure black/white
surfaces + borders); blue-tinting them the way :root and the dark-mode
block were retuned would lower contrast and defeat their purpose. Their accent is
blue (blue-800 on hc-light after the LC-541 Task 11 AAA nudge - blue-700 was
6.70:1, below the 7:1 AAA floor - and blue-300 on hc-dark) and AAA. */
[data-mode="hc-light"] {
/* LC-541 Phase 1: palette-CONSTANT status + actor-badge tokens (keyed by mode only, shared across every palette). Values unchanged. */
--success: #15803d; /* green-700 */
--success-content: #ffffff;
--warning: #b45309; /* amber-700 */
--warning-content: #ffffff;
--danger: #b91c1c; /* red-700 */
--danger-content: #ffffff;
/* LC-215: hc-light keeps panel surface bright (red-100) with a strong
red-800 outline; matches the "everything has a hard outline" hc
posture. */
--danger-surface: #fee2e2; /* red-100 */
--danger-border: #991b1b; /* red-800 */
/* LC-224: hc-light keeps bright success / warning surfaces with
strong outlines; success-700 / amber-700 text reads on green-100 /
amber-100 at ~6:1 contrast. */
--success-surface: #dcfce7; /* green-100 */
--success-border: #15803d; /* green-700 */
--success-surface-content: var(--success);
--warning-surface: #fef3c7; /* amber-100 */
--warning-border: #b45309; /* amber-700 */
--warning-surface-content: var(--warning);
/* LC-225: hc-light keeps bright actor-badge surfaces with darker
content text for AA contrast. */
--webhook-surface: #d1fae5; /* emerald-100 */
--webhook-content: #047857; /* emerald-700 */
--email-surface: #e0f2fe; /* sky-100 */
--email-content: #0369a1; /* sky-700 */
--bridge-surface: #ede9fe; /* violet-100 */
--bridge-content: #6d28d9; /* violet-700 */
color-scheme: light;
}
[data-theme="blue-harbor"][data-mode="hc-light"] {
/* LC-541 Phase 1: palette-VARYING surface/text/border/accent/ring/rail/sidebar tokens for the Blue Harbor palette. Values unchanged. */
--surface: #ffffff;
--surface-elevated: #ffffff;
--surface-sunken: #f5f5f5;
--content: #000000;
--content-muted: #1f2937; /* gray-800: AAA on white, not a faint grey */
--content-subtle: #374151; /* gray-700 */
--border: #000000;
--border-strong: #000000;
--accent: #1e40af; /* LC-541 T11: blue-800, AAA on white (blue-700 was 6.70:1) */
--accent-hover: #1e3a8a; /* blue-900 */
--accent-content: #ffffff;
/* LC-222: hc-light accent surface keeps the bright blue-100 tint with
maximal-contrast on top via --accent (blue-700, ~6.5:1 on blue-100). */
--accent-surface: #dbeafe; /* blue-100 */
--accent-surface-content: var(--accent);
--ring: #000000;
/* LC-366: hc-light rail stays black-chrome with maximal-contrast white
icons; idle tiles use a dark grey so they separate from the surface
without relying on a border. */
--rail-surface: #000000;
--rail-tile: #1f2937; /* gray-800 */
--rail-tile-hover: #374151; /* gray-700 */
--rail-content: #ffffff;
--rail-content-muted: #ffffff;
/* LC-554 phase 1b: hc-light sidebar is pure-black chrome with white text +
white dividers, matching the hc rail. Contrast-first, not blue-tinted. */
--sidebar-surface: #000000;
--sidebar-elevated: #1f2937; /* gray-800 hover row */
--sidebar-sunken: #000000;
--sidebar-content: #ffffff;
--sidebar-muted: #ffffff;
--sidebar-border: #ffffff;
}
[data-mode="hc-dark"] {
/* LC-541 Phase 1: palette-CONSTANT status + actor-badge tokens (keyed by mode only, shared across every palette). Values unchanged. */
--success: #4ade80; /* green-400 */
--success-content: #000000;
--warning: #fbbf24; /* amber-400 */
--warning-content: #000000;
--danger: #f87171; /* red-400 */
--danger-content: #000000;
/* LC-215: hc-dark keeps the panel surface near-black with a maximal-
contrast red-200 outline; the border does the visual heavy lifting
on pure-black ground. Surface uses the same near-black as
`--surface-elevated` (#0a0a0a) for parity with other hc-dark
elevated panels; the previous #0a0000 was indistinguishable from
pure black on most displays. */
--danger-surface: #0a0a0a;
--danger-border: #fecaca; /* red-200 */
/* LC-224: hc-dark near-black surface + maximal-contrast green-200 /
amber-200 borders. --success (green-400) / --warning (amber-400)
text reads on near-black at ~9:1 contrast. */
--success-surface: #0a0a0a;
--success-border: #bbf7d0; /* green-200 */
--success-surface-content: var(--success);
--warning-surface: #0a0a0a;
--warning-border: #fde68a; /* amber-200 */
--warning-surface-content: var(--warning);
/* LC-225: hc-dark uses near-black surfaces with bright per-kind text
colors (emerald-400 / sky-300 / violet-400) for ~9:1 contrast. */
--webhook-surface: #0a0a0a;
--webhook-content: #34d399; /* emerald-400 */
--email-surface: #0a0a0a;
--email-content: #7dd3fc; /* sky-300 */
--bridge-surface: #0a0a0a;
--bridge-content: #c4b5fd; /* violet-300 */
color-scheme: dark;
}
[data-theme="blue-harbor"][data-mode="hc-dark"] {
/* LC-541 Phase 1: palette-VARYING surface/text/border/accent/ring/rail/sidebar tokens for the Blue Harbor palette. Values unchanged. */
--surface: #000000;
--surface-elevated: #0a0a0a;
--surface-sunken: #000000;
--content: #ffffff;
--content-muted: #e5e7eb; /* gray-200 */
--content-subtle: #d1d5db; /* gray-300 */
--border: #ffffff;
--border-strong: #ffffff;
--accent: #93c5fd; /* blue-300: high contrast on black */
--accent-hover: #bfdbfe; /* blue-200 */
--accent-content: #000000;
/* LC-222: hc-dark accent surface uses the same near-black as
--surface-elevated for parity; --accent (blue-300) on it gives
~9.5:1 contrast. */
--accent-surface: #0a0a0a;
--accent-surface-content: var(--accent);
--ring: #ffffff;
/* LC-366: hc-dark rail is pure black with white icons; idle tiles use a
dark grey so they read against the black surface. */
--rail-surface: #000000;
--rail-tile: #1f2937; /* gray-800 */
--rail-tile-hover: #374151; /* gray-700 */
--rail-content: #ffffff;
--rail-content-muted: #ffffff;
/* LC-554 phase 1b: hc-dark sidebar is pure-black chrome with white text +
white dividers, matching the hc rail. Contrast-first, not blue-tinted. */
--sidebar-surface: #000000;
--sidebar-elevated: #1f2937; /* gray-800 hover row */
--sidebar-sunken: #000000;
--sidebar-content: #ffffff;
--sidebar-muted: #ffffff;
--sidebar-border: #ffffff;
}
/* LC-541 Phase 1: five non-default palettes. Each defines the palette-VARYING
surface/text/border/accent/ring/rail/sidebar tokens for its four modes
(light / dark / hc-light / hc-dark). The palette-CONSTANT status + actor-badge
tokens come from the [data-mode="..."] blocks above and are NOT redefined here.
These blocks follow :root (same specificity) so they win when data-theme is set.
The hc-light / hc-dark surface/text/border/rail/sidebar tokens are inherited
verbatim from Blue Harbor's contrast-first HC blocks (near-white / near-black,
already AAA and palette-neutral); only the accent family carries palette
identity. Accent/accent-content pairs are AAA-verified by
server/scripts/contrast-check.mjs and nudged where needed (LC-541 Task 11). */
/* Cobalt */
[data-theme="cobalt"] {
--surface:#f5f9ff; --surface-elevated:#ffffff; --surface-sunken:#eaf3ff;
--content:#08111f; --content-muted:#53657c; --content-subtle:#7f8ea3;
--border:#d4e3f7; --border-strong:#aec8eb;
--accent:#0f62fe; --accent-hover:#0043ce; --accent-content:#ffffff;
--accent-surface:#d0e2ff; --accent-surface-content:#0043ce; --ring:#4589ff;
--sidebar-surface:#061932; --sidebar-elevated:#0a2750; --sidebar-sunken:#031022;
--sidebar-content:#eff6ff; --sidebar-muted:#9db4d1; --sidebar-border:#143d70;
--rail-surface:#031022; --rail-tile:#0a2750; --rail-tile-hover:#0043ce;
--rail-content:#ffffff; --rail-content-muted:#9db4d1;
}
[data-theme="cobalt"][data-mode="dark"] {
--surface:#061932; --surface-elevated:#0a2750; --surface-sunken:#031022;
--content:#eff6ff; --content-muted:#9db4d1; --content-subtle:#6f86a3;
--border:#143d70; --border-strong:#1e5a9e;
--accent:#4589ff; --accent-hover:#78a9ff; --accent-content:#031022;
--accent-surface:#003a6d; --accent-surface-content:#d0e2ff; --ring:#78a9ff;
--sidebar-surface:#061932; --sidebar-elevated:#0a2750; --sidebar-sunken:#031022;
--sidebar-content:#eff6ff; --sidebar-muted:#9db4d1; --sidebar-border:#143d70;
--rail-surface:#031022; --rail-tile:#0a2750; --rail-tile-hover:#78a9ff;
--rail-content:#ffffff; --rail-content-muted:#9db4d1;
}
[data-theme="cobalt"][data-mode="hc-light"] {
--surface:#ffffff; --surface-elevated:#ffffff; --surface-sunken:#f5f5f5;
--content:#000000; --content-muted:#1f2937; --content-subtle:#374151;
--border:#000000; --border-strong:#000000;
--accent:#0043ce; --accent-hover:#002d9c; --accent-content:#ffffff;
--accent-surface:#d0e2ff; --accent-surface-content:#0043ce; --ring:#000000;
--sidebar-surface:#000000; --sidebar-elevated:#1f2937; --sidebar-sunken:#000000;
--sidebar-content:#ffffff; --sidebar-muted:#ffffff; --sidebar-border:#ffffff;
--rail-surface:#000000; --rail-tile:#1f2937; --rail-tile-hover:#374151;
--rail-content:#ffffff; --rail-content-muted:#ffffff;
}
[data-theme="cobalt"][data-mode="hc-dark"] {
--surface:#000000; --surface-elevated:#0a0a0a; --surface-sunken:#000000;
--content:#ffffff; --content-muted:#e5e7eb; --content-subtle:#d1d5db;
--border:#ffffff; --border-strong:#ffffff;
--accent:#78a9ff; --accent-hover:#a6c8ff; --accent-content:#031022;
--accent-surface:#003a6d; --accent-surface-content:#d0e2ff; --ring:#ffffff;
--sidebar-surface:#000000; --sidebar-elevated:#1f2937; --sidebar-sunken:#000000;
--sidebar-content:#ffffff; --sidebar-muted:#ffffff; --sidebar-border:#ffffff;
--rail-surface:#000000; --rail-tile:#1f2937; --rail-tile-hover:#374151;
--rail-content:#ffffff; --rail-content-muted:#ffffff;
}
/* Ink + Ice */
[data-theme="ink-ice"] {
--surface:#f8fbfd; --surface-elevated:#ffffff; --surface-sunken:#eef5fa;
--content:#0b1623; --content-muted:#586879; --content-subtle:#8491a0;
--border:#dce7ef; --border-strong:#bfccd8;
--accent:#1e40af; --accent-hover:#1e3a8a; --accent-content:#ffffff;
--accent-surface:#dbeafe; --accent-surface-content:#1e3a8a; --ring:#2563eb;
--sidebar-surface:#07111f; --sidebar-elevated:#142233; --sidebar-sunken:#030914;
--sidebar-content:#edf6ff; --sidebar-muted:#9aaec4; --sidebar-border:#1b334f;
--rail-surface:#030914; --rail-tile:#0d1b2d; --rail-tile-hover:#1e3a8a;
--rail-content:#ffffff; --rail-content-muted:#9aaec4;
}
[data-theme="ink-ice"][data-mode="dark"] {
--surface:#07111f; --surface-elevated:#0d1b2d; --surface-sunken:#030914;
--content:#edf6ff; --content-muted:#9aaec4; --content-subtle:#687f98;
--border:#1b334f; --border-strong:#2b4d72;
--accent:#60a5fa; --accent-hover:#93c5fd; --accent-content:#06101f;
--accent-surface:#172554; --accent-surface-content:#dbeafe; --ring:#60a5fa;
--sidebar-surface:#07111f; --sidebar-elevated:#142233; --sidebar-sunken:#030914;
--sidebar-content:#edf6ff; --sidebar-muted:#9aaec4; --sidebar-border:#1b334f;
--rail-surface:#030914; --rail-tile:#0d1b2d; --rail-tile-hover:#93c5fd;
--rail-content:#ffffff; --rail-content-muted:#9aaec4;
}
[data-theme="ink-ice"][data-mode="hc-light"] {
--surface:#ffffff; --surface-elevated:#ffffff; --surface-sunken:#f5f5f5;
--content:#000000; --content-muted:#1f2937; --content-subtle:#374151;
--border:#000000; --border-strong:#000000;
--accent:#1e40af; --accent-hover:#1e3a8a; --accent-content:#ffffff;
--accent-surface:#dbeafe; --accent-surface-content:#1e3a8a; --ring:#000000;
--sidebar-surface:#000000; --sidebar-elevated:#1f2937; --sidebar-sunken:#000000;
--sidebar-content:#ffffff; --sidebar-muted:#ffffff; --sidebar-border:#ffffff;
--rail-surface:#000000; --rail-tile:#1f2937; --rail-tile-hover:#374151;
--rail-content:#ffffff; --rail-content-muted:#ffffff;
}
[data-theme="ink-ice"][data-mode="hc-dark"] {
--surface:#000000; --surface-elevated:#0a0a0a; --surface-sunken:#000000;
--content:#ffffff; --content-muted:#e5e7eb; --content-subtle:#d1d5db;
--border:#ffffff; --border-strong:#ffffff;
--accent:#60a5fa; --accent-hover:#93c5fd; --accent-content:#06101f;
--accent-surface:#172554; --accent-surface-content:#dbeafe; --ring:#ffffff;
--sidebar-surface:#000000; --sidebar-elevated:#1f2937; --sidebar-sunken:#000000;
--sidebar-content:#ffffff; --sidebar-muted:#ffffff; --sidebar-border:#ffffff;
--rail-surface:#000000; --rail-tile:#1f2937; --rail-tile-hover:#374151;
--rail-content:#ffffff; --rail-content-muted:#ffffff;
}
/* Arctic Messenger */
[data-theme="arctic"] {
--surface:#fbfdff; --surface-elevated:#ffffff; --surface-sunken:#f0f7ff;
--content:#0f172a; --content-muted:#5f7288; --content-subtle:#8493a4;
--border:#d8e4ee; --border-strong:#c4d7eb;
--accent:#0369a1; --accent-hover:#075985; --accent-content:#ffffff;
--accent-surface:#e0f2fe; --accent-surface-content:#0369a1; --ring:#0ea5e9;
--sidebar-surface:#062033; --sidebar-elevated:#0a2c47; --sidebar-sunken:#031522;
--sidebar-content:#ecfeff; --sidebar-muted:#9bc4d6; --sidebar-border:#174764;
--rail-surface:#031522; --rail-tile:#0a2c47; --rail-tile-hover:#0369a1;
--rail-content:#ffffff; --rail-content-muted:#9bc4d6;
}
[data-theme="arctic"][data-mode="dark"] {
--surface:#062033; --surface-elevated:#0a2c47; --surface-sunken:#031522;
--content:#ecfeff; --content-muted:#9bc4d6; --content-subtle:#6f9aad;
--border:#174764; --border-strong:#246487;
--accent:#38bdf8; --accent-hover:#7dd3fc; --accent-content:#031522;
--accent-surface:#075985; --accent-surface-content:#e0f2fe; --ring:#38bdf8;
--sidebar-surface:#062033; --sidebar-elevated:#0a2c47; --sidebar-sunken:#031522;
--sidebar-content:#ecfeff; --sidebar-muted:#9bc4d6; --sidebar-border:#174764;
--rail-surface:#031522; --rail-tile:#0a2c47; --rail-tile-hover:#7dd3fc;
--rail-content:#ffffff; --rail-content-muted:#9bc4d6;
}
[data-theme="arctic"][data-mode="hc-light"] {
--surface:#ffffff; --surface-elevated:#ffffff; --surface-sunken:#f5f5f5;
--content:#000000; --content-muted:#1f2937; --content-subtle:#374151;
--border:#000000; --border-strong:#000000;
--accent:#075985; --accent-hover:#0c4a6e; --accent-content:#ffffff;
--accent-surface:#e0f2fe; --accent-surface-content:#0369a1; --ring:#000000;
--sidebar-surface:#000000; --sidebar-elevated:#1f2937; --sidebar-sunken:#000000;
--sidebar-content:#ffffff; --sidebar-muted:#ffffff; --sidebar-border:#ffffff;
--rail-surface:#000000; --rail-tile:#1f2937; --rail-tile-hover:#374151;
--rail-content:#ffffff; --rail-content-muted:#ffffff;
}
[data-theme="arctic"][data-mode="hc-dark"] {
--surface:#000000; --surface-elevated:#0a0a0a; --surface-sunken:#000000;
--content:#ffffff; --content-muted:#e5e7eb; --content-subtle:#d1d5db;
--border:#ffffff; --border-strong:#ffffff;
--accent:#38bdf8; --accent-hover:#7dd3fc; --accent-content:#031522;
--accent-surface:#075985; --accent-surface-content:#e0f2fe; --ring:#ffffff;
--sidebar-surface:#000000; --sidebar-elevated:#1f2937; --sidebar-sunken:#000000;
--sidebar-content:#ffffff; --sidebar-muted:#ffffff; --sidebar-border:#ffffff;
--rail-surface:#000000; --rail-tile:#1f2937; --rail-tile-hover:#374151;
--rail-content:#ffffff; --rail-content-muted:#ffffff;
}
/* Deep Sea Cyan */
[data-theme="deep-sea"] {
--surface:#f5fcff; --surface-elevated:#ffffff; --surface-sunken:#e8f7fb;
--content:#071b24; --content-muted:#56707a; --content-subtle:#7f949c;
--border:#d3eaf0; --border-strong:#afd1dc;
--accent:#0e7490; --accent-hover:#155e75; --accent-content:#ffffff;
--accent-surface:#cffafe; --accent-surface-content:#0e7490; --ring:#06b6d4;
--sidebar-surface:#041923; --sidebar-elevated:#082836; --sidebar-sunken:#020f15;
--sidebar-content:#ecfeff; --sidebar-muted:#9bc6d0; --sidebar-border:#164150;
--rail-surface:#020f15; --rail-tile:#082836; --rail-tile-hover:#0e7490;
--rail-content:#ffffff; --rail-content-muted:#9bc6d0;
}
[data-theme="deep-sea"][data-mode="dark"] {
--surface:#041923; --surface-elevated:#082836; --surface-sunken:#020f15;
--content:#ecfeff; --content-muted:#9bc6d0; --content-subtle:#6f98a3;
--border:#164150; --border-strong:#236173;
--accent:#22d3ee; --accent-hover:#67e8f9; --accent-content:#021014;
--accent-surface:#164e63; --accent-surface-content:#cffafe; --ring:#22d3ee;
--sidebar-surface:#041923; --sidebar-elevated:#082836; --sidebar-sunken:#020f15;
--sidebar-content:#ecfeff; --sidebar-muted:#9bc6d0; --sidebar-border:#164150;
--rail-surface:#020f15; --rail-tile:#082836; --rail-tile-hover:#67e8f9;
--rail-content:#ffffff; --rail-content-muted:#9bc6d0;
}
[data-theme="deep-sea"][data-mode="hc-light"] {
--surface:#ffffff; --surface-elevated:#ffffff; --surface-sunken:#f5f5f5;
--content:#000000; --content-muted:#1f2937; --content-subtle:#374151;
--border:#000000; --border-strong:#000000;
--accent:#155e75; --accent-hover:#164e63; --accent-content:#ffffff;
--accent-surface:#cffafe; --accent-surface-content:#0e7490; --ring:#000000;
--sidebar-surface:#000000; --sidebar-elevated:#1f2937; --sidebar-sunken:#000000;
--sidebar-content:#ffffff; --sidebar-muted:#ffffff; --sidebar-border:#ffffff;
--rail-surface:#000000; --rail-tile:#1f2937; --rail-tile-hover:#374151;
--rail-content:#ffffff; --rail-content-muted:#ffffff;
}
[data-theme="deep-sea"][data-mode="hc-dark"] {
--surface:#000000; --surface-elevated:#0a0a0a; --surface-sunken:#000000;
--content:#ffffff; --content-muted:#e5e7eb; --content-subtle:#d1d5db;
--border:#ffffff; --border-strong:#ffffff;
--accent:#22d3ee; --accent-hover:#67e8f9; --accent-content:#021014;
--accent-surface:#164e63; --accent-surface-content:#cffafe; --ring:#ffffff;
--sidebar-surface:#000000; --sidebar-elevated:#1f2937; --sidebar-sunken:#000000;
--sidebar-content:#ffffff; --sidebar-muted:#ffffff; --sidebar-border:#ffffff;
--rail-surface:#000000; --rail-tile:#1f2937; --rail-tile-hover:#374151;
--rail-content:#ffffff; --rail-content-muted:#ffffff;
}
/* Royal Navy */
[data-theme="royal-navy"] {
--surface:#f6f8ff; --surface-elevated:#ffffff; --surface-sunken:#edf2ff;
--content:#0b1026; --content-muted:#5c6680; --content-subtle:#858ea6;
--border:#dae2f5; --border-strong:#bbc8e5;
--accent:#1d4ed8; --accent-hover:#1e3a8a; --accent-content:#ffffff;
--accent-surface:#dbeafe; --accent-surface-content:#1e3a8a; --ring:#2563eb;
--sidebar-surface:#080f2a; --sidebar-elevated:#101b45; --sidebar-sunken:#050a1a;
--sidebar-content:#eff3ff; --sidebar-muted:#a3aed0; --sidebar-border:#23306a;
--rail-surface:#050a1a; --rail-tile:#101b45; --rail-tile-hover:#1e3a8a;
--rail-content:#ffffff; --rail-content-muted:#a3aed0;
}
[data-theme="royal-navy"][data-mode="dark"] {
--surface:#080f2a; --surface-elevated:#101b45; --surface-sunken:#050a1a;
--content:#eff3ff; --content-muted:#a3aed0; --content-subtle:#737fa5;
--border:#23306a; --border-strong:#35479a;
--accent:#60a5fa; --accent-hover:#93c5fd; --accent-content:#050a1a;
--accent-surface:#1e3a8a; --accent-surface-content:#dbeafe; --ring:#60a5fa;
--sidebar-surface:#080f2a; --sidebar-elevated:#101b45; --sidebar-sunken:#050a1a;
--sidebar-content:#eff3ff; --sidebar-muted:#a3aed0; --sidebar-border:#23306a;
--rail-surface:#050a1a; --rail-tile:#101b45; --rail-tile-hover:#93c5fd;
--rail-content:#ffffff; --rail-content-muted:#a3aed0;
}
[data-theme="royal-navy"][data-mode="hc-light"] {
--surface:#ffffff; --surface-elevated:#ffffff; --surface-sunken:#f5f5f5;
--content:#000000; --content-muted:#1f2937; --content-subtle:#374151;
--border:#000000; --border-strong:#000000;
--accent:#1e40af; --accent-hover:#1e3a8a; --accent-content:#ffffff;
--accent-surface:#dbeafe; --accent-surface-content:#1e3a8a; --ring:#000000;
--sidebar-surface:#000000; --sidebar-elevated:#1f2937; --sidebar-sunken:#000000;
--sidebar-content:#ffffff; --sidebar-muted:#ffffff; --sidebar-border:#ffffff;
--rail-surface:#000000; --rail-tile:#1f2937; --rail-tile-hover:#374151;
--rail-content:#ffffff; --rail-content-muted:#ffffff;
}
[data-theme="royal-navy"][data-mode="hc-dark"] {
--surface:#000000; --surface-elevated:#0a0a0a; --surface-sunken:#000000;
--content:#ffffff; --content-muted:#e5e7eb; --content-subtle:#d1d5db;
--border:#ffffff; --border-strong:#ffffff;
--accent:#60a5fa; --accent-hover:#93c5fd; --accent-content:#050a1a;
--accent-surface:#1e3a8a; --accent-surface-content:#dbeafe; --ring:#ffffff;
--sidebar-surface:#000000; --sidebar-elevated:#1f2937; --sidebar-sunken:#000000;
--sidebar-content:#ffffff; --sidebar-muted:#ffffff; --sidebar-border:#ffffff;
--rail-surface:#000000; --rail-tile:#1f2937; --rail-tile-hover:#374151;
--rail-content:#ffffff; --rail-content-muted:#ffffff;
}
/* Amethyst - the violet palette (LC mockup pixel-match). Same token contract as
cobalt; hc-light/hc-dark inherit blue-harbor's contrast-first neutral surfaces
and only carry violet identity in the accent family. */
[data-theme="amethyst"] {
--surface:#faf8ff; --surface-elevated:#ffffff; --surface-sunken:#f3eeff;
--content:#160f24; --content-muted:#5b5270; --content-subtle:#8a80a3;
--border:#e6ddf7; --border-strong:#cebfec;
--accent:#7c3aed; --accent-hover:#6d28d9; --accent-content:#ffffff;
--accent-surface:#ede4ff; --accent-surface-content:#6d28d9; --ring:#8b5cf6;
--sidebar-surface:#1a1030; --sidebar-elevated:#2b1d46; --sidebar-sunken:#120a22;
--sidebar-content:#f3eeff; --sidebar-muted:#b6a9d1; --sidebar-border:#33245a;
--rail-surface:#120a22; --rail-tile:#241640; --rail-tile-hover:#6d28d9;
--rail-content:#ffffff; --rail-content-muted:#b6a9d1;
}
[data-theme="amethyst"][data-mode="dark"] {
--surface:#1a1030; --surface-elevated:#241640; --surface-sunken:#120a22;
--content:#f3eeff; --content-muted:#b6a9d1; --content-subtle:#8776a3;
--border:#33245a; --border-strong:#4a3680;
--accent:#a78bfa; --accent-hover:#c4b5fd; --accent-content:#120a22;
--accent-surface:#3a2a6b; --accent-surface-content:#ede4ff; --ring:#c4b5fd;
--sidebar-surface:#120a22; --sidebar-elevated:#2b1d46; --sidebar-sunken:#0d0719;
--sidebar-content:#f3eeff; --sidebar-muted:#b6a9d1; --sidebar-border:#33245a;
--rail-surface:#0d0719; --rail-tile:#241640; --rail-tile-hover:#c4b5fd;
--rail-content:#ffffff; --rail-content-muted:#b6a9d1;
}
[data-theme="amethyst"][data-mode="hc-light"] {
--surface:#ffffff; --surface-elevated:#ffffff; --surface-sunken:#f5f5f5;
--content:#000000; --content-muted:#1f2937; --content-subtle:#374151;
--border:#000000; --border-strong:#000000;
--accent:#6b21a8; --accent-hover:#581c87; --accent-content:#ffffff;
--accent-surface:#ede4ff; --accent-surface-content:#6b21a8; --ring:#000000;
--sidebar-surface:#000000; --sidebar-elevated:#1f2937; --sidebar-sunken:#000000;
--sidebar-content:#ffffff; --sidebar-muted:#ffffff; --sidebar-border:#ffffff;
--rail-surface:#000000; --rail-tile:#1f2937; --rail-tile-hover:#374151;
--rail-content:#ffffff; --rail-content-muted:#ffffff;
}
[data-theme="amethyst"][data-mode="hc-dark"] {
--surface:#000000; --surface-elevated:#0a0a0a; --surface-sunken:#000000;
--content:#ffffff; --content-muted:#e5e7eb; --content-subtle:#d1d5db;
--border:#ffffff; --border-strong:#ffffff;
--accent:#d8b4fe; --accent-hover:#e9d5ff; --accent-content:#000000;
--accent-surface:#2e1065; --accent-surface-content:#d8b4fe; --ring:#ffffff;
--sidebar-surface:#000000; --sidebar-elevated:#1f2937; --sidebar-sunken:#000000;
--sidebar-content:#ffffff; --sidebar-muted:#ffffff; --sidebar-border:#ffffff;
--rail-surface:#000000; --rail-tile:#1f2937; --rail-tile-hover:#374151;
--rail-content:#ffffff; --rail-content-muted:#ffffff;
}
/* Global keyboard-focus indicator. Applies on Tab / arrow / programmatic
focus but NOT on plain mouse clicks (`:focus-visible` heuristic). Pinned
to blue-600 so it matches the per-component `focus:ring-blue-500` already
used in `notify_dropdown.html`, `sidebar.html`, and `own_avatar_oob.html`.
Those three elements keep their custom ring: their `focus:outline-none`
utility has higher specificity than this selector and wins. */
:focus-visible {
outline: 2px solid var(--ring, #2563eb);
outline-offset: 2px;
border-radius: 2px;
}
/* LC-192: thicker, offset focus ring in high-contrast themes. */
[data-mode="hc-light"] :focus-visible,
[data-mode="hc-dark"] :focus-visible {
outline-width: 3px;
outline-offset: 3px;
}
#main {
/* LC-199: with the LC-199 viewport-fit=cover meta in base.html, plain
* 100vh on iOS Safari includes the URL bar / dynamic-toolbar area, so
* content extends behind the chrome and scrolls under it. `100dvh`
* (dynamic viewport height) excludes the URL bar - it shrinks/grows as
* the toolbar shows/hides. Falls back to `100vh` on browsers that don't
* yet understand `dvh` (Safari < 15.4, Firefox < 110). */
height: 100vh;
height: 100dvh;
}
/* LC-569: UI scaling. The whole app is rem-based (Tailwind utilities + the .lc-*
layer), so scaling the root font-size scales type AND spacing together, which
is what the "Scaling" appearance setting does. Stamped on before paint
by the base.html bootstrap (data-scale), so there is no flash. */
html[data-scale="compact"] { font-size: 14.5px; }
html[data-scale="default"] { font-size: 16px; }
html[data-scale="large"] { font-size: 18px; }
html[data-scale="xl"] { font-size: 20px; }
/* Thin, button-less, thumb-only scrollbars that appear on hover of the scroll
area. Neutral translucent grey so they read on any palette + mode. */
* { scrollbar-width: thin; scrollbar-color: transparent transparent; }
*:hover { scrollbar-color: rgba(128,128,128,.42) transparent; }
::-webkit-scrollbar {
width: 11px;
height: 11px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-button { display: none; width: 0; height: 0; } /* no up/down triangles */
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
background: transparent;
border: 3px solid transparent;
border-radius: 999px;
background-clip: content-box;
}
:hover::-webkit-scrollbar-thumb { background: rgba(128,128,128,.42); background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(128,128,128,.68); background-clip: content-box; }
/* Message body rendered as markdown.
*
* `whitespace-pre-wrap` is intentionally not applied at the container level
* because pulldown_cmark already emits explicit ` ` for newlines (we map
* SoftBreak -> HardBreak server-side). The rules below restore minimal
* typography for elements Tailwind's preflight strips. Single-paragraph
* messages (the common case) render with no extra vertical margin so the
* row height matches what plain-text rendering used to produce. */
.lc-md > p {
margin: 0;
}
.lc-md > p + p,
.lc-md > * + * {
margin-top: 0.5rem;
}
.lc-md strong { font-weight: 600; }
.lc-md em { font-style: italic; }
/* LC-221: tokenized so strike + link recolor with the active theme and
follow the operator's branded accent. Pre-LC-221 used hardcoded
`#64748b` (slate-500) and `#2563eb` (blue-600) which stayed constant
across all four themes. */
.lc-md del { text-decoration: line-through; color: var(--content-muted); }
/* LC-290: spoiler. `||text||` renders as a filled box; the inner text is
transparent until revealed (one-way, on click / Enter / Space via the
layout.html delegated handler). Box recolors with the active theme. */
.lc-spoiler {
background: var(--content-muted);
border-radius: 0.25rem;
padding: 0 0.2rem;
cursor: pointer;
transition: background 0.12s ease;
}
.lc-spoiler-inner { opacity: 0; }
.lc-spoiler-revealed { background: transparent; cursor: text; }
.lc-spoiler-revealed .lc-spoiler-inner { opacity: 1; }
.lc-md a { color: var(--accent); }
.lc-md a:hover { color: var(--accent-hover); text-decoration: underline; }
.lc-md ul, .lc-md ol { padding-left: 1.5rem; margin: 0.25rem 0; }
.lc-md ul { list-style: disc; }
.lc-md ol { list-style: decimal; }
.lc-md li { margin: 0.125rem 0; }
.lc-md blockquote {
border-left: 3px solid var(--border-strong);
padding: 0.125rem 0.75rem;
margin: 0.25rem 0;
color: var(--content-muted);
}
.lc-md h1, .lc-md h2, .lc-md h3, .lc-md h4, .lc-md h5, .lc-md h6 {
font-weight: 700;
margin: 0.5rem 0 0.25rem;
line-height: 1.25;
}
.lc-md h1 { font-size: 1.25rem; }
.lc-md h2 { font-size: 1.15rem; }
.lc-md h3 { font-size: 1.05rem; }
.lc-md h4, .lc-md h5, .lc-md h6 { font-size: 1rem; }
.lc-md table { border-collapse: collapse; margin: 0.25rem 0; }
.lc-md th, .lc-md td {
border: 1px solid var(--border);
padding: 0.25rem 0.5rem;
}
.lc-md th { background: var(--surface-sunken); font-weight: 600; }
.lc-md hr {
border: none;
border-top: 1px solid var(--border);
margin: 0.5rem 0;
}
.lc-md-code,
.lc-md code:not(pre code) {
background: var(--surface-sunken);
color: var(--content);
padding: 0.05rem 0.3rem;
border-radius: 0.25rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 0.9em;
}
.lc-md pre {
background: var(--surface-elevated);
color: var(--content);
border: 1px solid var(--border);
border-radius: 0.375rem;
padding: 0.5rem 0.75rem;
margin: 0.25rem 0;
overflow-x: auto;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 0.85em;
line-height: 1.4;
/* syntect emits inline `background-color` on the
; override so the
app's neutral surface wins. The token colours inside still apply. */
background-color: var(--surface-elevated) !important;
}
.lc-md pre code { background: transparent; padding: 0; }
/* LC-284: self-mention highlight. A message that @-mentions the viewer gets a
layout-neutral left accent bar (inset box-shadow, so the row box is
unchanged) plus a faint accent wash. Theme-aware via --accent; hover still
shows the sunken background (the Tailwind :hover utility wins). */
.lc-mentioned {
box-shadow: inset 3px 0 0 0 var(--accent);
/* LC-558: wash tracks the palette's --accent-surface token (was a hard-coded
accent 8% mix that ignored the token and read too faint). ~55% keeps it
obvious without going radioactive; the 3px bar stays the primary signal,
and hover still wins with the sunken background. */
background: color-mix(in srgb, var(--accent-surface) 55%, transparent);
}
/* LC-553: consecutive mentioned messages (a run of pings, e.g. follow-ups from
the same author) read as separate notched brackets because each keeps its own
rounded corners. Square the corners where two mentioned rows touch so the
accent bar + wash merge into one continuous block for the whole run. */
.lc-mentioned:has(+ .lc-mentioned) {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.lc-mentioned + .lc-mentioned {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
/* LC-272: copy button on code blocks. The enhancer (layout.html) wraps each
in .lc-code-wrap and drops a .lc-code-copy button in the top-right,
revealed on hover/focus. */
.lc-code-wrap {
position: relative;
}
.lc-code-copy {
position: absolute;
top: 0.35rem;
right: 0.35rem;
padding: 0.1rem 0.4rem;
font-size: 0.7rem;
line-height: 1.2;
border: 1px solid var(--border);
border-radius: 0.25rem;
background: var(--surface-sunken);
color: var(--content-muted);
opacity: 0;
transition: opacity 0.15s ease;
cursor: pointer;
}
.lc-code-wrap:hover .lc-code-copy,
.lc-code-copy:focus {
opacity: 1;
}
.lc-code-copy:hover {
color: var(--content);
}
/* Quote-reply UI.
*
* The chip is rendered inline above a message body to show the message it
* is responding to. A separate "reply bar" variant lives inside the
* composer; both share the same color palette but the in-message chip is
* compact and clickable while the composer bar adds an "x" to cancel.
*/
/* LC-461: inline quote-reply reference. A QUIET, muted context line - thin
neutral left-border, no fill, small low-contrast text - so it stays
subordinate to the message body below it. Deliberately NOT accent-tinted:
the accent treatment is reserved for the thread-entry pill (the interactive
door to the side panel), keeping the two reply concepts visually distinct. */
.lc-quote-chip {
display: flex;
align-items: center;
gap: 0.3125rem;
margin-bottom: 0.1875rem;
padding: 0.0625rem 0.5rem;
border-left: 2px solid var(--border-strong);
background: transparent;
border-radius: 0;
font-size: 0.8em;
color: var(--content-subtle);
text-decoration: none;
max-width: 100%;
width: fit-content;
}
.lc-quote-chip:hover {
background: var(--surface-sunken);
color: var(--content-muted);
}
.lc-quote-ico {
height: 0.8em;
width: 0.8em;
flex: none;
color: var(--content-subtle);
}
.lc-quote-label {
color: var(--content-subtle);
white-space: nowrap;
}
.lc-quote-author {
font-weight: 600;
color: var(--content-muted);
white-space: nowrap;
}
.lc-quote-excerpt {
color: var(--content-subtle);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.lc-quote-deleted {
font-style: italic;
color: var(--content-subtle);
}
/* LC-460: thread-entry chip under a message (replaces the speech-balloon emoji
pill). Branch icon + count + chevron read as "open the thread", visually
distinct from the quoted-reply pointer above. */
.lc-thread-entry {
display: inline-flex;
align-items: center;
gap: 0.375rem;
margin-top: 0.25rem;
padding: 0.1875rem 0.5rem 0.1875rem 0.4375rem;
border: 1px solid var(--accent-border, var(--border));
border-radius: 9999px;
background: var(--accent-surface);
color: var(--accent-surface-content);
font-size: 0.75rem;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition: background-color 0.12s ease, border-color 0.12s ease;
}
.lc-thread-entry:hover { background: var(--surface-sunken); border-color: var(--accent); }
.lc-thread-entry:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring); }
.lc-thread-entry-ico { height: 0.9rem; width: 0.9rem; flex: none; color: var(--accent); }
.lc-thread-entry-count { white-space: nowrap; }
.lc-thread-entry-chevron { height: 0.8rem; width: 0.8rem; flex: none; color: var(--content-subtle); margin-left: -0.125rem; }
/* LC-460: thread panel hierarchy. A count divider labels the replies section and
a left rail nests replies beneath the root message. */
.lc-thread-count {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 0.75rem 0.125rem;
}
.lc-thread-count-rule { height: 1px; flex: 1; background: var(--border); }
.lc-thread-count-label {
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--content-subtle);
white-space: nowrap;
}
/* LC-462: the replies list. The earlier heavy accent rail down the left edge
read as a "wall"; the parent block + count divider already convey hierarchy,
so the rail is gone and the panel just scrolls.
LC-576: this used to also pin its own always-visible 8px --border-strong
scrollbar here, which outlived the global switch to thin, button-less,
hover-only scrollbars and left the thread panel as the one surface still
showing a resting bar. It now inherits the global rule; no override needed. */
.lc-quote-bar {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.25rem;
padding: 0.25rem 0.5rem;
border-left: 3px solid var(--accent);
background: var(--accent-surface);
border-radius: 0.25rem;
font-size: 0.8em;
color: var(--accent-surface-content);
}
.lc-quote-bar-inner {
display: flex;
gap: 0.4rem;
overflow: hidden;
align-items: baseline;
min-width: 0;
flex: 1;
}
.lc-quote-bar-label {
color: var(--content-muted);
}
.lc-quote-bar-author {
font-weight: 600;
white-space: nowrap;
}
.lc-quote-bar-excerpt {
color: var(--content-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lc-quote-bar-clear {
color: var(--content-muted);
padding: 0 0.25rem;
line-height: 1;
}
.lc-quote-bar-clear:hover {
color: var(--content);
}
/* Voice-message player (partials/attachment.html). Wired by the voice IIFE
in layout.html. */
.lc-voice {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.6rem;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
background: #fff;
}
.lc-voice-play {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 9999px;
background: #2563eb;
color: #fff;
flex: none;
}
.lc-voice-play:hover {
background: #1d4ed8;
}
/* Brief buffering state between the play click and canplaythrough. */
.lc-voice[data-loading] .lc-voice-play {
opacity: 0.5;
cursor: progress;
}
.lc-voice-play svg {
width: 1.1rem;
height: 1.1rem;
}
/* Play / pause icon swap is driven by the [data-playing] attribute the IIFE
toggles on the container. */
.lc-voice-icon-pause {
display: none;
}
.lc-voice[data-playing] .lc-voice-icon-play {
display: none;
}
.lc-voice[data-playing] .lc-voice-icon-pause {
display: inline;
}
.lc-voice-wave {
width: 320px;
max-width: 50vw;
height: 40px;
cursor: pointer;
}
.lc-voice-time {
font-size: 0.75rem;
color: #64748b;
font-variant-numeric: tabular-nums;
flex: none;
}
/* LC-499: voice-message composer states (recording card, preview, errors). */
.lc-composer-btn.is-recording {
background-color: color-mix(in srgb, var(--danger) 14%, transparent);
color: var(--danger);
box-shadow: inset 0 0 0 1.5px var(--danger);
}
.lc-composer-btn.is-recording:hover {
background-color: color-mix(in srgb, var(--danger) 22%, transparent);
color: var(--danger);
}
/* Recording-in-progress card, anchored just above the composer input. */
.lc-rec {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.5rem 0.75rem;
border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border));
border-radius: 0.625rem;
background: color-mix(in srgb, var(--danger) 7%, var(--surface-elevated));
}
.lc-rec-dot {
flex: none;
width: 0.6rem;
height: 0.6rem;
border-radius: 9999px;
background: var(--danger);
animation: lc-rec-pulse 1.4s ease-in-out infinite;
}
.lc-rec-label {
font-size: 0.8125rem;
font-weight: 600;
color: var(--danger);
flex: none;
}
.lc-rec-time {
font-size: 0.875rem;
font-variant-numeric: tabular-nums;
color: var(--content);
flex: none;
}
/* Live mic-level meter: each bar is scaled vertically by the analyser. */
.lc-rec-level {
display: flex;
align-items: center;
gap: 2px;
height: 1.5rem;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
}
.lc-rec-level i {
display: block;
flex: 1 1 0;
min-width: 2px;
max-width: 4px;
height: 100%;
border-radius: 9999px;
background: color-mix(in srgb, var(--danger) 55%, var(--content-subtle));
transform: scaleY(0.12);
transform-origin: center;
transition: transform 90ms linear;
}
.lc-rec-actions {
display: flex;
align-items: center;
gap: 0.375rem;
flex: none;
}
.lc-rec-stop {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.3rem 0.7rem;
border-radius: 0.5rem;
font-size: 0.8125rem;
font-weight: 600;
background: var(--danger);
color: #fff;
}
.lc-rec-stop:hover { background: color-mix(in srgb, var(--danger) 85%, #000); }
.lc-rec-cancel {
padding: 0.3rem 0.6rem;
border-radius: 0.5rem;
font-size: 0.8125rem;
color: var(--content-muted);
}
.lc-rec-cancel:hover { background: var(--surface-sunken); color: var(--content); }
/* Upload-in-progress variant: neutral card + spinner. */
.lc-rec--busy {
border-color: var(--border);
background: var(--surface-elevated);
color: var(--content);
}
.lc-rec--busy .lc-rec-label { color: var(--content-muted); }
.lc-rec-spinner {
flex: none;
width: 0.9rem;
height: 0.9rem;
border-radius: 9999px;
border: 2px solid var(--border);
border-top-color: var(--accent);
animation: lc-rec-spin 0.7s linear infinite;
}
/* Recorded-and-attached preview: the inline player + re-record / remove. */
.lc-recpreview {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
padding: 0.5rem 0.625rem;
border: 1px solid var(--border);
border-radius: 0.625rem;
background: var(--surface-elevated);
color: var(--content);
}
.lc-recpreview-actions {
display: flex;
align-items: center;
gap: 0.375rem;
flex: none;
}
.lc-recpreview-btn {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.3rem 0.6rem;
border-radius: 0.5rem;
font-size: 0.8125rem;
color: var(--content-muted);
}
.lc-recpreview-btn svg { width: 0.95rem; height: 0.95rem; }
.lc-recpreview-btn:hover { background: var(--surface-sunken); color: var(--content); }
.lc-recpreview-btn--danger:hover {
background: color-mix(in srgb, var(--danger) 12%, transparent);
color: var(--danger);
}
/* Voice error card (mic denied / unsupported / upload failed + retry). */
.lc-rec-error {
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border));
border-radius: 0.625rem;
background: color-mix(in srgb, var(--danger) 8%, var(--surface-elevated));
color: var(--danger);
}
.lc-rec-error-icon { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.05rem; }
.lc-rec-error-body { display: flex; flex-direction: column; gap: 0.1rem; flex: 1 1 auto; min-width: 0; }
.lc-rec-error-help { color: var(--content-muted); font-size: 0.75rem; }
.lc-rec-error-retry {
flex: none;
align-self: center;
padding: 0.25rem 0.6rem;
border-radius: 0.5rem;
font-size: 0.8125rem;
font-weight: 600;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 45%, transparent);
color: var(--danger);
}
.lc-rec-error-retry:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }
@keyframes lc-rec-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.35; transform: scale(0.8); }
}
@keyframes lc-rec-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.lc-rec-dot { animation: none; }
.lc-rec-spinner { animation-duration: 1.4s; }
.lc-rec-level i { transition: none; }
}
/* LC-480: announcement-channel banner (above the timeline) + the read-only
composer notice shown to members who cannot post. */
.lc-announce-strip {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 1rem;
font-size: 0.8125rem;
color: var(--content-muted);
background: color-mix(in srgb, var(--accent) 8%, var(--surface-elevated));
border-bottom: 1px solid var(--border);
}
.lc-announce-strip svg { width: 1rem; height: 1rem; flex: none; color: var(--accent); }
.lc-announce-strip-label {
font-weight: 600;
color: var(--accent);
text-transform: uppercase;
font-size: 0.6875rem;
letter-spacing: 0.04em;
flex: none;
}
.lc-readonly-notice {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
border-top: 1px solid var(--border);
padding: 0.75rem 1rem;
font-size: 0.875rem;
color: var(--content-muted);
}
.lc-readonly-notice svg { width: 1rem; height: 1rem; flex: none; color: var(--content-subtle); }
/* LC-500: composer file-attachment chip (matches the .lc-recpreview voice
card). Image thumbnail or file-type icon + truncated name + size + Remove. */
.lc-attach {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.5rem 0.625rem;
border: 1px solid var(--border);
border-radius: 0.625rem;
background: var(--surface-elevated);
color: var(--content);
}
.lc-attach-thumb {
flex: none;
width: 2.75rem;
height: 2.75rem;
border-radius: 0.5rem;
object-fit: cover;
background: var(--surface-sunken);
}
.lc-attach-icon {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 0.5rem;
background: color-mix(in srgb, var(--accent) 10%, var(--surface-sunken));
color: var(--accent);
}
.lc-attach-icon svg { width: 1.4rem; height: 1.4rem; }
/* Spinner overlay while the upload is in flight. */
.lc-attach-thumbwrap { position: relative; flex: none; display: inline-flex; }
.lc-attach-spin {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.5rem;
background: color-mix(in srgb, var(--surface-elevated) 55%, transparent);
}
.lc-attach-meta {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1 1 auto;
}
.lc-attach-name {
font-size: 0.8125rem;
font-weight: 500;
color: var(--content);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lc-attach-size {
font-size: 0.75rem;
color: var(--content-muted);
}
/* LC-500: timeline download card for non-image attachments (file_card-style
icon + truncated name + size), upgrading the old plain bordered link. */
.lc-filecard {
display: inline-flex;
align-items: center;
gap: 0.5rem;
max-width: 22rem;
padding: 0.5rem 0.7rem;
border: 1px solid var(--border);
border-radius: 0.625rem;
background: var(--surface-elevated);
color: var(--content);
color: inherit;
text-decoration: none;
}
.lc-filecard:hover { background: var(--surface-sunken); }
.lc-filecard-icon {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
border-radius: 0.5rem;
background: color-mix(in srgb, var(--accent) 10%, var(--surface-sunken));
color: var(--accent);
}
.lc-filecard-icon svg { width: 1.25rem; height: 1.25rem; }
.lc-filecard-meta { display: flex; flex-direction: column; min-width: 0; }
.lc-filecard-name {
font-size: 0.8125rem;
font-weight: 500;
color: var(--content);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lc-filecard-size { font-size: 0.75rem; color: var(--content-muted); }
/* LC-660: image alt-text control. The badge anchors to the image corner (the
parent `.lc-img-attach` is the positioning context) and reads as an image
action, replacing the old floating "Add alt text" link. State: `--missing` is
a muted amber nudge kept visible so undescribed images stand out; `--set` is a
filled/checked confirmation revealed on hover/focus to keep the timeline calm. */
.lc-img-attach { position: relative; display: inline-block; max-width: 24rem; }
.lc-alt { position: absolute; top: 0.375rem; right: 0.375rem; }
.lc-alt-badge {
display: inline-flex;
align-items: center;
gap: 0.1875rem;
padding: 0.125rem 0.375rem;
border-radius: 9999px;
border: 1px solid var(--border-strong);
background: color-mix(in srgb, var(--surface-elevated) 88%, transparent);
backdrop-filter: blur(2px);
color: var(--content-muted);
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.04em;
line-height: 1;
cursor: pointer;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.lc-alt-badge::-webkit-details-marker { display: none; }
.lc-alt-badge { list-style: none; }
.lc-alt-ico, .lc-alt-check { width: 0.75rem; height: 0.75rem; flex: none; }
.lc-alt-tag { font-variant: small-caps; }
/* Missing: amber, always visible - the accessibility nudge. */
.lc-alt-badge--missing {
color: var(--warning-surface-content);
border-color: var(--warning-border);
background: color-mix(in srgb, var(--warning-surface) 92%, transparent);
opacity: 1;
}
.lc-alt-badge--missing:hover,
.lc-alt-badge--missing:focus-visible {
color: var(--warning-content);
background: var(--warning);
border-color: var(--warning);
}
/* Present: filled/checked, revealed on hover/focus of the image or the badge. */
.lc-alt-badge--set {
color: var(--success-surface-content);
border-color: var(--success-border);
background: color-mix(in srgb, var(--success-surface) 92%, transparent);
opacity: 0;
}
.lc-img-attach:hover .lc-alt-badge--set,
.lc-img-attach:focus-within .lc-alt-badge--set { opacity: 1; }
.lc-alt-badge--set:hover,
.lc-alt-badge--set:focus-visible {
color: var(--success-content);
background: var(--success);
border-color: var(--success);
}
.lc-alt-badge--ro { cursor: default; }
.lc-alt-check { color: inherit; }
/* Popover editor, anchored under the badge. `.lc-alt[open]` reveals it. */
.lc-alt-pop {
position: absolute;
top: calc(100% + 0.375rem);
right: 0;
z-index: 20;
width: 18rem;
max-width: min(18rem, 80vw);
padding: 0.625rem;
border: 1px solid var(--border);
border-radius: 0.5rem;
background: var(--surface-elevated);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
cursor: default;
}
.lc-alt-pop-label {
display: block;
font-size: 0.6875rem;
font-weight: 600;
color: var(--content-muted);
margin-bottom: 0.3125rem;
}
.lc-alt-pop-input {
width: 100%;
resize: vertical;
min-height: 3.5rem;
padding: 0.375rem 0.5rem;
font-size: 0.8125rem;
color: var(--content);
background: var(--surface-sunken);
border: 1px solid var(--border);
border-radius: 0.375rem;
}
.lc-alt-pop-input:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -1px;
border-color: var(--accent);
}
.lc-alt-pop-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-top: 0.4375rem;
}
.lc-alt-count { font-size: 0.6875rem; color: var(--content-subtle); font-variant-numeric: tabular-nums; }
.lc-alt-actions { display: inline-flex; gap: 0.375rem; }
.lc-alt-cancel, .lc-alt-save, .lc-alt-draft {
padding: 0.25rem 0.625rem;
font-size: 0.75rem;
font-weight: 600;
border-radius: 0.375rem;
border: 1px solid var(--border);
cursor: pointer;
}
.lc-alt-cancel { background: var(--surface-elevated); color: var(--content-muted); }
.lc-alt-cancel:hover { background: var(--surface-sunken); color: var(--content); }
/* LC-667: "Auto-draft" (vision alt text). Sits on the left of the actions row;
hidden unless an operator vision endpoint is configured ([data-lc-vision]
page root). */
.lc-alt-draft {
display: none;
margin-right: auto;
background: var(--surface-elevated);
color: var(--accent);
}
[data-lc-vision] .lc-alt-draft { display: inline-flex; }
.lc-alt-draft:hover { background: var(--surface-sunken); }
.lc-alt-draft:disabled { opacity: 0.5; cursor: default; }
.lc-alt-save { background: var(--accent); color: var(--accent-content); border-color: var(--accent); }
.lc-alt-save:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
/* LC-486: inline message translation. The Translate menu item is CSS-gated on
an LLM being configured - revealed only under a [data-lc-llm] page root (which
also covers live-swapped message fragments, since the rule is ancestor-based).
LC-686: the hide rule MUST include `.lc-menu-item` so it is (0,2,0), not (0,1,0).
The item always carries both classes, and `.lc-menu-item { display: flex }`
(defined later in this file) is also (0,1,0) - a bare `.lc-llm-only { display:
none }` loses the source-order tie and never hides, so the item leaked through
with the flag off. (0,2,0) beats `.lc-menu-item`; the reveal rule below is
(0,3,0) and still wins. Same cascade trap as LC-678. */
.lc-menu-item.lc-llm-only { display: none; }
[data-lc-llm] .lc-menu-item.lc-llm-only { display: flex; }
/* LC-532: composer AI writing-assistant button, revealed only when an LLM is
configured (same [data-lc-llm] page-root gate as the translate item). */
.lc-composer-ai { display: none; }
[data-lc-llm] .lc-composer-ai { display: inline-flex; }
/* LC-549: "Find related" menu item, revealed only when an operator embeddings
endpoint is configured ([data-lc-embeddings] page root, ancestor-based so it
covers live-swapped message fragments). Independent of the LLM gate.
LC-686: `.lc-menu-item` prefix so the hide rule is (0,2,0) and actually beats
`.lc-menu-item { display: flex }` - see the note on `.lc-llm-only` above. */
.lc-menu-item.lc-embeddings-only { display: none; }
[data-lc-embeddings] .lc-menu-item.lc-embeddings-only { display: flex; }
/* LC-549: the room-search "Semantic" toggle, shown only when embeddings are
configured (same page-root gate). */
.lc-semantic-toggle { display: none; }
[data-lc-embeddings] .lc-semantic-toggle { display: flex; }
/* LC-699: room-header search polish - a clean leading-icon input with a clear
button + in-flight indicator, a labelled semantic toggle with a hint, and
richer result rows (author avatar + byline + highlighted snippet). Authored
here so the styling renders without a Tailwind rebuild. */
.lc-search-field { position: relative; display: block; }
.lc-search-field-icon {
position: absolute;
left: 0.5rem;
top: 1rem;
transform: translateY(-50%);
height: 0.875rem;
width: 0.875rem;
color: var(--content-subtle);
pointer-events: none;
}
.lc-search-input {
width: 100%;
height: 2rem;
border-radius: 0.375rem;
border: 1px solid var(--border);
background-color: var(--surface-elevated);
padding-left: 1.75rem;
padding-right: 1.75rem;
font-size: 0.75rem;
line-height: 1rem;
color: var(--content);
}
.lc-search-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent);
}
.lc-search-clear {
position: absolute;
right: 0.375rem;
top: 1rem;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
height: 1.25rem;
width: 1.25rem;
border-radius: 9999px;
color: var(--content-subtle);
}
.lc-search-clear:hover { color: var(--content); background-color: var(--surface-sunken); }
/* Hidden while the field is empty (the placeholder is showing). */
.lc-search-input:placeholder-shown ~ .lc-search-clear { display: none; }
.lc-search-indicator {
display: none;
margin-top: 0.375rem;
font-size: 0.6875rem;
color: var(--content-muted);
}
.htmx-request.lc-search-indicator { display: block; }
/* Semantic toggle: a labelled row with a short hint, not a bare checkbox. */
.lc-semantic-toggle {
align-items: flex-start;
gap: 0.5rem;
margin-top: 0.5rem;
cursor: pointer;
}
.lc-semantic-checkbox {
height: 0.875rem;
width: 0.875rem;
margin-top: 0.125rem;
border-radius: 0.25rem;
border: 1px solid var(--border);
accent-color: var(--accent);
flex: none;
}
.lc-semantic-text { display: flex; flex-direction: column; line-height: 1.2; }
.lc-semantic-label { font-size: 0.75rem; color: var(--content); }
.lc-semantic-hint { font-size: 0.6875rem; color: var(--content-muted); }
/* Results popover. */
.lc-search-panel {
background-color: var(--surface-elevated);
border: 1px solid var(--border-strong);
border-radius: 0.5rem;
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.2);
overflow: hidden;
}
.lc-search-head {
display: flex;
align-items: center;
padding: 0.375rem 0.75rem;
border-bottom: 1px solid var(--border);
}
.lc-search-scope {
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--content-muted);
}
.lc-search-row {
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--border);
}
.lc-search-row:last-child { border-bottom: 0; }
.lc-search-row:hover,
.lc-search-row[aria-selected="true"] { background-color: var(--surface-sunken); }
.lc-search-avatar {
height: 1.5rem;
width: 1.5rem;
border-radius: 9999px;
object-fit: cover;
flex: none;
margin-top: 0.125rem;
}
.lc-search-snippet {
font-size: 0.8125rem;
color: var(--content);
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.lc-search-snippet mark {
background-color: var(--accent-subtle, rgb(250 204 21 / 0.35));
color: inherit;
border-radius: 0.125rem;
padding: 0 0.0625rem;
}
.lc-search-foot {
padding: 0.375rem 0.75rem;
border-top: 1px solid var(--border);
text-align: right;
}
.lc-search-save {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.75rem;
color: var(--content-muted);
}
.lc-search-save:hover { color: var(--accent); }
/* LC-528: hide the "Read aloud" item when the browser has no SpeechSynthesis.
live.js sets .lc-no-tts on once at load; the ancestor rule also covers
live-swapped message fragments. */
.lc-no-tts .lc-read-aloud { display: none; }
/* LC-694: give the translated text its own quiet container - a rounded,
accent-tinted surface with the accent left border - so it reads as distinct
from the original message rather than as a plain indented paragraph. */
.lc-translation-block {
margin-top: 0.375rem;
border-left: 2px solid color-mix(in srgb, var(--accent) 55%, var(--border));
border-radius: 0.375rem;
background: color-mix(in srgb, var(--accent) 5%, var(--surface-sunken));
padding: 0.375rem 0.625rem;
}
.lc-translation-head {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.25rem;
font-size: 0.6875rem;
color: var(--content-muted);
}
/* LC-694: the language picker as a proper compact control, matching the app's
other small inputs. */
.lc-translation-select {
border: 1px solid var(--border);
border-radius: 0.375rem;
background: var(--surface-elevated);
color: var(--content);
padding: 0.125rem 1.25rem 0.125rem 0.375rem;
font-size: 0.6875rem;
line-height: 1.2;
cursor: pointer;
}
.lc-translation-select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent);
}
.lc-translation-hide {
color: var(--accent);
}
.lc-translation-hide:hover { text-decoration: underline; }
/* LC-694: "Translate" confirm button in the picker-only state - a small accent
button that reads as the primary action without a heavy full-size button. */
.lc-translation-go {
border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
border-radius: 0.375rem;
background: color-mix(in srgb, var(--accent) 12%, var(--surface-elevated));
color: var(--accent);
padding: 0.125rem 0.5rem;
font-size: 0.6875rem;
font-weight: 600;
cursor: pointer;
}
.lc-translation-go:hover {
background: color-mix(in srgb, var(--accent) 20%, var(--surface-elevated));
}
/* LC-491: event-card header above the RSVP options (poll_block.html). */
.lc-event-head {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.6rem;
margin-bottom: 0.25rem;
border-radius: 0.5rem;
background: color-mix(in srgb, var(--accent) 8%, var(--surface-elevated));
border: 1px solid var(--border);
}
.lc-event-head svg { flex: none; width: 1.25rem; height: 1.25rem; color: var(--accent); }
.lc-event-when { font-weight: 600; font-size: 0.875rem; color: var(--content); }
.lc-event-loc { font-size: 0.75rem; color: var(--content-muted); }
/* LC-488: GIF picker result grid (gif_modal.html / gif_results.html). */
.lc-gif-results { max-height: 22rem; overflow-y: auto; }
.lc-gif-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.375rem;
}
.lc-gif-cell {
border-radius: 0.5rem;
overflow: hidden;
background: var(--surface-sunken);
aspect-ratio: 1 / 1;
padding: 0;
}
.lc-gif-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-gif-cell:hover { outline: 2px solid var(--accent); }
.lc-gif-cell[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.lc-gif-empty {
padding: 1rem;
text-align: center;
color: var(--content-muted);
font-size: 0.875rem;
}
.lc-gif-attribution {
margin-top: 0.5rem;
font-size: 0.6875rem;
color: var(--content-subtle);
text-align: right;
}
/* LC-506: AI action shown to admins as a disabled teaser (LLM unconfigured). */
.lc-action-disabled { opacity: 0.5; cursor: default; }
.lc-header-action.lc-action-disabled:hover { background-color: transparent; color: var(--content-muted); }
/* LC-511: same teaser posture for the composer GIF button (Giphy unconfigured). */
.lc-composer-btn.lc-action-disabled:hover { background-color: transparent; color: var(--content-muted); }
/* LC-59 server-rendered math. pulldown-latex emits `