:root {
  /* ===== Theme-invariant accent family (Ink + Midnight share; Light overrides) ===== */
  --accent:        #2dd4bf;
  --accent-strong: #5eead4;
  --accent-deep:   #14b8a6;
  --accent-press:  #0d9488;
  --accent-glow:   rgba(45, 212, 191, .22);
  --accent-soft:   rgba(45, 212, 191, .12);

  /* Semantic text-accent (Light overrides for AA on white) */
  --accent-text:   var(--accent-strong);

  /* ===== Color — Ink (default) ===== */
  /* Background layers (deepest -> raised) */
  --bg:        #0b0f14;
  --bg-1:      #0d131a;
  --bg-2:      #111922;
  --bg-3:      #16202b;
  --bg-hover:  #19242f;
  --bg-active: #13241f;

  /* Surfaces & bubbles */
  --bubble-in:        #16212c;
  --bubble-in-border: #223040;
  --bubble-mine:      #14b8a6;
  --bubble-mine-2:    #0f9d8f;
  --bubble-mine-soft: rgba(45, 212, 191, .12);

  /* Text */
  --text:           #e7edf3;
  --text-soft:      #9fb0bf;
  --text-dim:       #5f7180;   /* decorative-dim only; text uses --text-meta */
  --text-meta:      #788b9b;   /* AA-safe dim for timestamps/file-size/edited */
  --text-on-accent: #04201c;
  --text-on-mine:   #04241f;
  --text-on-mine-meta: rgba(4, 36, 31, .72);

  /* Borders & lines */
  --border:      #060a0e;
  --border-soft: #1d2935;
  --hairline:    rgba(255, 255, 255, .055);

  /* Feedback — danger */
  --danger:        #f97066;
  --danger-bg:     #2a1614;
  --danger-border: rgba(249, 112, 102, .32);
  /* Feedback — success */
  --success:        #34d399;
  --success-bg:     #0e2620;
  --success-border: rgba(52, 211, 153, .30);
  /* Feedback — warning */
  --warn:        #fbbf24;
  --warn-bg:     #2a2110;
  --warn-border: rgba(251, 191, 36, .30);
  /* Feedback — info */
  --info: #60a5fa;

  /* Links */
  --link:         #5eead4;
  --link-hover:   #2dd4bf;
  --link-on-mine: #04241f;

  /* E2EE trust signals */
  --trust-verified:  #34d399;
  --trust-encrypted: #5eead4;
  --trust-warn:      #fbbf24;
  --trust-danger:    #f97066;
  --trust-soft:      rgba(52, 211, 153, .12);

  /* ===== Typography ===== */
  --font-brand: "Sora", "Plex", ui-sans-serif, sans-serif;
  --font-body:  "Plex", ui-sans-serif, system-ui, sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Line-heights */
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.6;

  /* Type roles — size / line-height / weight / tracking */
  --fs-display: 1.6875rem; --lh-display: 1.15; --fw-display: 700; --ls-display: -.02em; /* 27px */
  --fs-title-1: 1.3125rem; --lh-title-1: 1.25; --ls-title-1: -.01em;                    /* 21px */
  --fs-title-2: 1.1875rem; --lh-title-2: 1.3;  --ls-title-2: -.01em;                    /* 19px */
  --fs-title-3: 1.125rem;  --lh-title-3: 1.3;  --ls-title-3: -.01em;                    /* 18px */
  --fs-heading: 0.96875rem; --lh-heading: 1.35; --ls-heading: -.01em;                   /* 15.5px */
  --fs-body-lg: 1.0625rem; --lh-body-lg: 1.5;                                           /* 17px */
  --fs-body:    0.9375rem; --lh-body: 1.5;                                              /* 15px */
  --fs-msg:     0.90625rem; --lh-msg: 1.5;                                              /* 14.5px */
  --fs-body-sm: 0.84375rem; --lh-body-sm: 1.5; --fw-body-sm: 500;                       /* 13.5px */
  --fs-label:   0.75rem;   --lh-label: 1.4;  --fw-label: 600; --ls-label: .02em;        /* 12px */
  --fs-caption: 0.75rem;   --lh-caption: 1.4;                                           /* 12px */
  --fs-caption-sm: 0.71875rem; --lh-caption-sm: 1.3; --fw-caption-sm: 600; --ls-caption-sm: .02em; /* 11.5px */
  --fs-micro:   0.65625rem; --lh-micro: 1; --fw-micro: 600;                             /* 10.5px */
  --fs-mono:    0.8125rem; --lh-mono: 1.5;                                              /* 13px */

  /* ===== Spacing scale (4px base) ===== */
  --sp-0:  0;
  --sp-1:  0.125rem;  /* 2 */
  --sp-2:  0.25rem;   /* 4 */
  --sp-3:  0.375rem;  /* 6 */
  --sp-4:  0.5rem;    /* 8 */
  --sp-5:  0.625rem;  /* 10 */
  --sp-6:  0.75rem;   /* 12 */
  --sp-7:  0.875rem;  /* 14 */
  --sp-8:  1rem;      /* 16 */
  --sp-9:  1.125rem;  /* 18 */
  --sp-10: 1.25rem;   /* 20 */
  --sp-12: 1.5rem;    /* 24 */
  --sp-14: 1.75rem;   /* 28 */
  --sp-16: 2rem;      /* 32 */
  --sp-20: 2.5rem;    /* 40 */
  --sp-24: 3rem;      /* 48 */

  /* ===== Radii ===== */
  --radius-xs:          7px;
  --radius-sm:          11px;
  --radius:             16px;
  --radius-lg:          22px;
  --radius-bubble:      18px;
  --radius-bubble-tail: 6px;
  --radius-media:       12px;
  --radius-pill:        999px;
  --radius-circle:      50%;

  /* ===== Borders / rings ===== */
  --bw:      1px;
  --bw-rail: 2px;
  --ring-focus: 0 0 0 3px var(--accent-glow);
  --ring-rail:  inset 2px 0 0 var(--accent);

  /* ===== Elevation / shadow ===== */
  --shadow-sm:           0 1px 2px rgba(0, 0, 0, .3);
  --shadow-bubble-mine:  0 4px 14px -8px var(--accent-glow);
  --shadow:              0 18px 48px -12px rgba(0, 0, 0, .6);
  --shadow-pop:          0 24px 64px -16px rgba(0, 0, 0, .7), 0 0 0 1px var(--border-soft);
  --shadow-btn-primary:  0 6px 18px -8px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .25);
  --glow-accent:         0 8px 24px -10px var(--accent-glow);

  /* ===== Blur / glass ===== */
  --blur-xs: blur(3px);
  --blur-sm: blur(4px);
  --blur:    blur(6px);
  --blur-md: blur(12px);
  --blur-lg: blur(20px);
  --glass-fill:   rgba(13, 19, 26, .7);
  --scrim:        rgba(4, 8, 12, .62);
  --scrim-strong: rgba(2, 6, 9, .92);

  /* ===== Z-index ladder ===== */
  --z-base:            0;
  --z-chat-chrome:     5;
  --z-msg-actions:     6;
  --z-header:          20;
  --z-attach-menu:     30;
  --z-dragover:        40;
  --z-modal:           100;
  --z-reaction-picker: 120;
  --z-toast:           200;
  --z-lightbox:        200;
  --z-tooltip:         300;

  /* ===== Layout ===== */
  --sidebar-w:       340px;
  --header-h:        62px;
  --chat-head-h:     56px;
  --composer-min-h:  46px;
  --composer-max-h:  160px;
  --bubble-max-w:    min(74%, 580px);
  --safe-bottom:     env(safe-area-inset-bottom);

  /* ===== Motion ===== */
  --d-instant: 90ms;
  --d-fast:    140ms;
  --d-base:    200ms;
  --d-med:     240ms;
  --d-screen:  300ms;
  --d-slow:    420ms;
  --d-ambient: 1400ms;

  --ease:        cubic-bezier(.2, .8, .2, 1);
  --e-standard:  cubic-bezier(.2, .8, .2, 1);
  --e-out:       cubic-bezier(.16, 1, .3, 1);
  --e-in:        cubic-bezier(.4, 0, 1, 1);
  --e-inout:     cubic-bezier(.65, 0, .35, 1);
  --e-emphatic:  cubic-bezier(.34, 1.3, .64, 1);

  /* Back-compat aliases (existing names preserved) */
  --t-fast: var(--d-fast) var(--ease);
  --t:      var(--d-med) var(--ease);

  color-scheme: dark;
}

/* ============================================================
   Theme — Midnight (deeper layers + structural borders only)
   Accent, text, bubbles, feedback inherit from Ink.
   ============================================================ */
:root[data-theme="midnight"] {
  --bg:        #04070b;
  --bg-1:      #05090d;
  --bg-2:      #090f15;
  --bg-3:      #0e1620;
  --bg-hover:  #121d28;
  --bg-active: #0c211c;
  --border:      #02050a;
  --border-soft: #16222e;
  color-scheme: dark;
}

/* ============================================================
   Theme — Light
   ============================================================ */
:root[data-theme="light"] {
  /* Background layers */
  --bg:        #eef2f6;
  --bg-1:      #f5f8fb;
  --bg-2:      #ffffff;
  --bg-3:      #eef3f8;
  --bg-hover:  #e6edf3;
  --bg-active: #d8f1ec;

  /* Bubbles */
  --bubble-in:        #ffffff;
  --bubble-in-border: #d8e1ea;
  --bubble-mine:      #14b8a6;
  --bubble-mine-2:    #0f9d8f;
  --bubble-mine-soft: rgba(20, 184, 166, .12);

  /* Text */
  --text:           #0d1b26;
  --text-soft:      #44586a;
  --text-dim:       #7d909f;   /* decorative-dim only */
  --text-meta:      #677889;   /* AA-safe dim for text */
  --text-on-accent: #04201c;
  --text-on-mine:   #ffffff;
  --text-on-mine-meta: rgba(255, 255, 255, .82);

  /* Accent (darkened for AA on white) */
  --accent:        #0f9d8f;
  --accent-strong: #14b8a6;
  --accent-deep:   #0d9488;
  --accent-press:  #0b7d72;
  --accent-glow:   rgba(15, 157, 143, .20);
  --accent-soft:   rgba(15, 157, 143, .10);
  --accent-text:   #0b7d72;   /* AA-safe teal text on white */

  /* Feedback */
  --danger:        #d9534f;
  --danger-bg:     #fdeceb;
  --danger-border: rgba(217, 83, 79, .32);
  --success:        #0f9d76;
  --success-bg:     #e7f7f1;
  --success-border: rgba(15, 157, 118, .30);
  --warn:        #b8860b;
  --warn-bg:     #fcf4e1;
  --warn-border: rgba(184, 134, 11, .30);
  --info: #2563eb;

  /* Links */
  --link:       #0f9d8f;
  --link-hover: #0b7d72;

  /* Trust */
  --trust-verified:  #0f9d76;
  --trust-encrypted: #0f9d8f;
  --trust-warn:      #b8860b;
  --trust-danger:    #d9534f;
  --trust-soft:      rgba(15, 157, 118, .12);

  /* Borders & lines */
  --border:      #d3dde6;
  --border-soft: #dde5ec;
  --hairline:    rgba(13, 27, 38, .06);

  /* Elevation (lighter shadows on light surfaces) */
  --shadow-sm:  0 1px 2px rgba(13, 27, 38, .12);
  --shadow:     0 18px 48px -16px rgba(13, 27, 38, .22);
  --shadow-pop: 0 24px 64px -18px rgba(13, 27, 38, .28), 0 0 0 1px var(--border-soft);

  /* Glass + scrim */
  --glass-fill:   rgba(255, 255, 255, .7);
  --scrim:        rgba(13, 27, 38, .42);
  --scrim-strong: rgba(13, 27, 38, .82);

  color-scheme: light;
}

/* ============================================================
   Reset / base
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html { font-size: 100%; }
html, body { height: 100%; margin: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

button { font-family: inherit; }

.hidden { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* Numeric alignment for time/counts/codes */
.tabular { font-variant-numeric: tabular-nums; }

/* ============================================================
   Focus ring system (keyboard-only, AA non-text contrast)
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}
:root[data-theme="light"] :focus-visible { outline-color: var(--accent-deep); }

/* ============================================================
   Primitives / utility layer
   ============================================================ */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 40px;
  padding: var(--sp-4) var(--sp-8);
  border: var(--bw) solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--t-fast), border-color var(--t-fast),
              transform var(--d-instant) var(--ease), box-shadow var(--t-fast);
}
.btn:hover { background: var(--bg-hover); border-color: var(--accent-deep); }
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
  border-color: transparent;
  color: var(--text-on-accent);
  background: linear-gradient(180deg, var(--accent-strong), var(--accent-deep));
  box-shadow: var(--shadow-btn-primary);
}
.btn-primary:hover { transform: translateY(-1px); border-color: transparent; }
.btn-primary:active {
  transform: translateY(0) scale(.97);
  background: linear-gradient(180deg, var(--accent-deep), var(--accent-press));
}

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-soft); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text); border-color: transparent; }

.btn-danger { color: var(--danger); border-color: var(--danger-border); background: var(--danger-bg); }
.btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); }

.btn-sm { min-height: 40px; padding: var(--sp-2) var(--sp-7); font-size: var(--fs-body-sm); }

/* Icon-only button */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--t-fast), color var(--t-fast), transform var(--d-instant) var(--ease);
}
.icon-btn:hover { background: var(--bg-hover); color: var(--accent-strong); }
.icon-btn:active { transform: scale(.94); }

@media (pointer: coarse) {
  .icon-btn, .btn-sm, .modal-close, .reaction-choice { min-width: 44px; min-height: 44px; }
}

/* ---------- Inputs ---------- */
.input {
  width: 100%;
  min-height: var(--composer-min-h);
  padding: var(--sp-5) var(--sp-7);
  border: var(--bw) solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-3);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.input::placeholder { color: var(--text-dim); }
.input:hover { border-color: var(--accent-deep); }
.input:focus-visible {
  border-color: var(--accent-strong);
  outline: 2px solid var(--accent-strong);
  outline-offset: 1px;
  box-shadow: 0 0 0 4px var(--accent-glow);
}
.input[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-border);
}
.input-lg { font-size: var(--fs-body-lg); }
.input-code {
  font-variant-numeric: tabular-nums;
  letter-spacing: .35em;
  text-align: center;
  font-size: var(--fs-body-lg);
}

.field-label {
  display: block;
  margin-bottom: var(--sp-3);
  color: var(--text-soft);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* ---------- Avatar ---------- */
.avatar {
  --av: 200;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-circle);
  background: hsl(var(--av) 60% 42%); /* lightness clamped for white-text AA */
  color: #fff;
  font-family: var(--font-brand);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 28px; height: 28px; font-size: var(--fs-caption-sm); }
.avatar-lg { width: 62px; height: 62px; font-size: var(--fs-title-2); }

/* presence dot — shape carries meaning, not just color (CVD-safe) */
.avatar-presence {
  position: absolute;
  inset-block-end: 0; inset-inline-end: 0;
  width: 11px; height: 11px;
  border-radius: var(--radius-circle);
  border: 2px solid var(--bg-2);
  box-sizing: border-box;
}
.avatar-presence.is-online  { background: var(--success); }
.avatar-presence.is-away    { background: var(--warn); border-width: 3px; }      /* ring shape */
.avatar-presence.is-offline { background: transparent; border-color: var(--text-dim); } /* hollow */

/* ---------- Badge ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-width: 20px;
  height: 20px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: var(--fs-caption-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caption-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.badge-soft   { background: var(--accent-soft); color: var(--accent-text); }
.badge-danger { background: var(--danger); color: #fff; }

/* Trust badge — the only solid trust signal */
.badge-verified {
  background: var(--trust-verified);
  color: var(--text-on-accent);
  padding: 0 var(--sp-3);
}
.badge-encrypted { /* lock chip: frosted, quiet */
  background: var(--accent-soft);
  color: var(--accent-text);
  border: var(--bw) solid var(--accent-glow);
}
.badge-warn   { background: var(--warn-bg); color: var(--warn); border: var(--bw) solid var(--warn-border); }

/* ---------- Bubble ---------- */
.bubble {
  position: relative;
  max-width: var(--bubble-max-w);
  padding: var(--sp-5) var(--sp-7);
  border-radius: var(--radius-bubble);
  background: var(--bubble-in);
  border: var(--bw) solid var(--bubble-in-border);
  color: var(--text);
  font-size: var(--fs-msg);
  line-height: var(--lh-normal);
  box-shadow: var(--shadow-sm);
  /* incoming tail (bottom inline-start) */
  border-end-start-radius: var(--radius-bubble-tail);
  overflow-wrap: anywhere;
}
.bubble-mine {
  margin-inline-start: auto;
  border: 0;
  color: var(--text-on-mine);
  background: linear-gradient(180deg, var(--bubble-mine), var(--bubble-mine-2));
  box-shadow: var(--shadow-bubble-mine);
  /* outgoing tail (bottom inline-end) */
  border-end-start-radius: var(--radius-bubble);
  border-end-end-radius: var(--radius-bubble-tail);
}
.bubble-mine a { color: var(--link-on-mine); text-decoration: underline; }
.bubble a { color: var(--link); }
.bubble a:hover { color: var(--link-hover); }

.bubble-sender {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--accent-text);
  font-size: var(--fs-caption-sm);
  font-weight: var(--fw-semibold);
}
.bubble-time {
  display: inline-block;
  margin-inline-start: var(--sp-3);
  color: var(--text-meta);
  font-size: var(--fs-micro);
  font-weight: var(--fw-micro);
  font-variant-numeric: tabular-nums;
  vertical-align: baseline;
  float: inline-end;
}
.bubble-mine .bubble-time { color: var(--text-on-mine-meta); }

/* read-receipt ticks — distinguished by fill/weight + label, not hue alone */
.msg-tick { color: var(--text-meta); transition: color var(--d-fast) var(--ease); }
.msg-tick.read { color: var(--accent-strong); font-weight: var(--fw-bold); }
.bubble-mine .msg-tick { color: var(--text-on-mine-meta); }
.bubble-mine .msg-tick.read { color: var(--accent-strong); }

.bubble-failed { border-color: var(--danger-border); }
.bubble-failed .bubble-status { color: var(--danger); }

/* ---------- Sheet / Modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8);
  background: var(--scrim);
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
  animation: overlay-in 180ms ease;
}
.modal {
  width: 100%;
  max-width: 420px;
  max-height: calc(100% - var(--sp-16));
  overflow: auto;
  padding: var(--sp-10);
  border: var(--bw) solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--bg-2);
  box-shadow: var(--shadow-pop);
  animation: modal-in var(--d-med) var(--e-standard);
}
.modal-title {
  margin: 0 0 var(--sp-6);
  font-family: var(--font-brand);
  font-size: var(--fs-title-3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-title-3);
  line-height: var(--lh-title-3);
}
.modal-close {
  position: absolute;
  inset-block-start: var(--sp-6); inset-inline-end: var(--sp-6);
}

/* Bottom sheet (mobile) */
.sheet {
  position: fixed;
  inset-inline: 0; inset-block-end: 0;
  z-index: var(--z-modal);
  padding: var(--sp-8) var(--sp-8) calc(var(--sp-8) + var(--safe-bottom));
  border-start-start-radius: var(--radius-lg);
  border-start-end-radius: var(--radius-lg);
  background: var(--bg-2);
  border-top: var(--bw) solid var(--border-soft);
  box-shadow: var(--shadow-pop);
  animation: sheet-in var(--d-screen) var(--e-out);
}
.sheet-grip {
  width: 36px; height: 4px;
  margin: 0 auto var(--sp-6);
  border-radius: var(--radius-pill);
  background: var(--border-soft);
}

/* ---------- List row ---------- */
.list-row {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  width: 100%;
  padding: var(--sp-5) var(--sp-7);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  text-align: start;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--t-fast), box-shadow var(--t-fast);
}
.list-row:hover { background: var(--bg-hover); box-shadow: inset 2px 0 0 rgba(45, 212, 191, .4); }
.list-row[aria-current="true"],
.list-row.active {
  background: var(--bg-active);
  box-shadow: var(--ring-rail);
}
.list-row-main { flex: 1 1 auto; min-width: 0; }
.list-row-name {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-msg);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-row-preview {
  margin-top: var(--sp-1);
  color: var(--text-soft);
  font-size: var(--fs-caption);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-row-meta {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-2);
  color: var(--text-meta);
  font-size: var(--fs-caption-sm);
  font-variant-numeric: tabular-nums;
}
.room-lock { color: var(--trust-encrypted); }

/* ============================================================
   Glass / frosted panels
   ============================================================ */
.glass {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--blur-md);
  backdrop-filter: var(--blur-md);
}

/* ============================================================
   Keyframes
   ============================================================ */
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bubble-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes typing-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* ============================================================
   Accessibility media blocks
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .msg-tick, .badge-verified, .toast { transition-duration: 120ms !important; }
}

@media (prefers-contrast: more) {
  :root { --text-soft: var(--text); --text-dim: #9fb0bf; --border-soft: #3a4a5a; }
  .bubble, .bubble-mine { border-width: 1.5px; }
  :focus-visible { outline-width: 3px; }
}

@media (forced-colors: active) {
  .bubble, .bubble-mine, .list-row, .btn, .icon-btn, .badge { border: 1px solid CanvasText; }
  :focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
  .msg-tick.read { forced-color-adjust: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .modal-overlay, .glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .modal-overlay { background: var(--scrim-strong); }
  .glass { background: var(--bg-2); }
}

The CSS is complete and drop-in. Key implementation decisions:

- **Token layer** mirrors every value from the foundation exactly: full Ink `:root`, `[data-theme="midnight"]` (only the 8 layer/border overrides — accent/text/bubbles/feedback inherit), and full `[data-theme="light"]` including the new success/warn/info/trust families.
- **A11y fixes baked in as tokens**, not patched at component level: added `--text-meta` (AA-safe dim for timestamps/edited/file-size, since `--text-dim` fails 4.5:1 as text), `--text-on-mine-meta` at .72 alpha, and `--accent-text` (resolves to `--accent-strong` on dark, `#0b7d72` on light) so teal *text* passes AA on white. `--text-dim` is retained for decorative-only use per the spec.
- **Real focus rings** — `.input:focus-visible` keeps a solid 2px outline plus the glow halo (the glow alone fails non-text contrast); Light mode swaps the ring to `--accent-deep`.
- **Themes switch via `:root[data-theme="…"]`** on `<html>`; default (no attribute) is Ink, matching the live file.
- **Back-compat** preserved: `--t-fast`/`--t` kept as aliases over the new `--d-*`/`--ease` scale; existing keyframes (`bubble-in`, `modal-in`, `typing-pulse`) retained; `--accent`/`--accent-strong`/`--accent-deep`/`--accent-glow`/`--accent-soft`, `--font-brand`/`--font-body` unchanged.
- **CVD-safe primitives**: presence dot uses shape (filled/ring/hollow) + color; read ticks use `font-weight:700` + color, never hue alone; avatar lightness clamped to 42% for white-text AA.
- **Logical properties** throughout primitives (`inset-inline-*`, `border-end-start-radius`, `float: inline-end`) so RTL is a `dir` change; coarse-pointer hit-target bumps; `prefers-contrast` / `forced-colors` / `prefers-reduced-transparency` / `prefers-reduced-motion` blocks included.

Note: the foundation references `--shadow-bubble-mine`/`--glow-accent`/`--shadow-btn-primary` as "NEW alias names" — I included them as first-class tokens. Two NEW tokens I added beyond the foundation's explicit list to close the audited contrast bugs: `--text-meta` and `--text-on-mine-meta` (the foundation prescribes the fixed values `#788b9b`/`#677889`/`.72` but doesn't name them — I named them to keep them reusable rather than inlining literals).