/* Levia Sales Desk — app.css
 *
 * Layout concept: an accountant's desk with room on it. An ink rail holds the
 * brand and the day's queues; the paper workspace keeps one thing in focus at
 * a time, separated by space and hairlines rather than boxes.
 *
 * Brand (levia-accounting.com): ink #0E1726, indigo #3D5AFE, paper #F7F5F0,
 * Geist, 14px radius, the check-mark logo. Everything below extends it:
 * a Thai face, a dark theme, semantic state colours and the UI parts.
 * Fonts load in the page <head> from Google Fonts:
 *   Geist 400/500/600, Geist Mono 400/500, IBM Plex Sans Thai Looped 400/500/600.
 */

/* ---------- Tokens ---------- */
:root {
  --paper: #F7F5F0;          /* the desk: page background */
  --sheet: #FFFFFF;          /* the conversation in hand */
  --wash: #EDEAE3;           /* hover rows, inbound bubbles, wells */
  --rule: #E4E0D8;           /* hairlines */
  --ink: #0E1726;            /* text */
  --ink-2: #4A5568;          /* secondary text */
  --ink-3: #657082;          /* quiet text, still AA on paper */
  --accent: #3D5AFE;         /* Levia indigo: links, focus */
  --accent-fill: #3D5AFE;    /* primary buttons, the reply-now panel */
  --on-accent: #FFFFFF;
  --accent-soft: rgba(61, 90, 254, 0.09);
  --rail: #0E1726;           /* the rail stays ink in both themes */
  --rail-ink: #C8CDD5;
  --rail-ink-strong: #F7F5F0;
  --rail-hover: rgba(255, 255, 255, 0.06);
  --rail-current: rgba(99, 123, 254, 0.22);

  /* Semantic state, separate from the accent */
  --critical: #B42318;
  --critical-soft: rgba(180, 35, 24, 0.09);
  --warning: #9A5B00;
  --warning-soft: rgba(201, 125, 0, 0.13);
  --good: #17703F;
  --good-soft: rgba(23, 112, 63, 0.10);

  /* Channel identity: small dots only */
  --ch-gmail: #EA4335;
  --ch-zoho: #F9B21D;
  --ch-fb: #1877F2;
  --ch-line: #06C755;
  --ch-messenger: #A033FF;

  --shadow-sheet: 0 1px 2px rgba(14, 23, 38, 0.04), 0 12px 32px rgba(14, 23, 38, 0.06);
  --shadow-pop: 0 2px 6px rgba(14, 23, 38, 0.10);

  /* Type: Geist for Latin; Plex Sans Thai Looped picks up every Thai glyph */
  --font-ui: "Geist", "IBM Plex Sans Thai Looped", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", "IBM Plex Sans Thai Looped", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --fs-xs: 0.8125rem;   /* 13: labels, meta */
  --fs-sm: 0.875rem;    /* 14: secondary */
  --fs-md: 1rem;        /* 16: body */
  --fs-lg: 1.125rem;    /* 18: lead text */
  --fs-xl: 1.5rem;      /* 24: names, section titles */
  --fs-2xl: 2.25rem;    /* 36: page titles */
  --fs-stat: 2rem;      /* 32: plain numbers */
  --fs-hero: 5.5rem;    /* 88: the reply-now figure */

  /* Space: one scale, used everywhere */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;

  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 14px;     /* the brand mark's radius */
  --radius-xl: 22px;
  --rail-w: 15.5rem;
  --gutter: clamp(20px, 4vw, 56px);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0B1220;
    --sheet: #121B2C;
    --wash: #1A2436;
    --rule: #243049;
    --ink: #F2F0EA;
    --ink-2: #C8CDD5;
    --ink-3: #93A0B4;
    --accent: #8094FF;
    --accent-fill: #4A63FE;
    --on-accent: #FFFFFF;
    --accent-soft: rgba(128, 148, 255, 0.13);
    --rail: #070C16;
    --rail-ink: #AEB6C4;
    --rail-ink-strong: #F2F0EA;
    --rail-hover: rgba(255, 255, 255, 0.05);
    --rail-current: rgba(128, 148, 255, 0.20);
    --critical: #FF8A7A;
    --critical-soft: rgba(255, 138, 122, 0.13);
    --warning: #F5B54A;
    --warning-soft: rgba(245, 181, 74, 0.13);
    --good: #5BD69A;
    --good-soft: rgba(91, 214, 154, 0.12);
    --shadow-sheet: 0 1px 2px rgba(0, 0, 0, 0.45), 0 16px 36px rgba(0, 0, 0, 0.32);
    --shadow-pop: 0 2px 8px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #0B1220;
  --sheet: #121B2C;
  --wash: #1A2436;
  --rule: #243049;
  --ink: #F2F0EA;
  --ink-2: #C8CDD5;
  --ink-3: #93A0B4;
  --accent: #8094FF;
  --accent-fill: #4A63FE;
  --on-accent: #FFFFFF;
  --accent-soft: rgba(128, 148, 255, 0.13);
  --rail: #070C16;
  --rail-ink: #AEB6C4;
  --rail-ink-strong: #F2F0EA;
  --rail-hover: rgba(255, 255, 255, 0.05);
  --rail-current: rgba(128, 148, 255, 0.20);
  --critical: #FF8A7A;
  --critical-soft: rgba(255, 138, 122, 0.13);
  --warning: #F5B54A;
  --warning-soft: rgba(245, 181, 74, 0.13);
  --good: #5BD69A;
  --good-soft: rgba(91, 214, 154, 0.12);
  --shadow-sheet: 0 1px 2px rgba(0, 0, 0, 0.45), 0 16px 36px rgba(0, 0, 0, 0.32);
  --shadow-pop: 0 2px 8px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--fs-md)/1.6 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; color: var(--ink); text-wrap: balance; letter-spacing: -0.015em; }
p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }
.num, time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
[lang="th"] { line-height: 1.85; } /* stacked Thai vowels and tone marks need room */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Shell: ink rail + paper workspace ---------- */
/* The rail spans the shell's height; the workspace column holds the banner, when there is one, then the page. */
.shell { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100dvh; }
.shell > .rail { grid-row: 1 / -1; }
.shell > .banner { grid-column: 2; grid-row: 1; }
.shell > .main { grid-column: 2; grid-row: 2; }

.rail {
  position: sticky; top: 0; height: 100dvh;
  display: flex; flex-direction: column; gap: var(--sp-6);
  padding: var(--sp-5) var(--sp-4);
  background: var(--rail); color: var(--rail-ink);
}
.rail__brand {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-1) var(--sp-2); color: var(--rail-ink-strong); text-decoration: none;
}
.rail__mark { width: 32px; height: 32px; flex: none; }
.rail__name { display: grid; line-height: 1.2; }
.rail__name strong { font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.02em; }
.rail__name span { font-size: var(--fs-xs); color: var(--rail-ink); }
.rail__nav { display: flex; flex-direction: column; gap: var(--sp-1); }
.rail__link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: 0.625rem var(--sp-3); border-radius: var(--radius-m);
  color: var(--rail-ink); font-size: 0.9375rem; font-weight: 500; text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
}
.rail__link:hover { background: var(--rail-hover); color: var(--rail-ink-strong); }
.rail__link[aria-current="page"] { background: var(--rail-current); color: var(--rail-ink-strong); }
.rail__count {
  min-width: 1.625rem; padding: 0.125rem 0.5rem; border-radius: 999px; text-align: center;
  font: 500 var(--fs-xs)/1.4 var(--font-mono); font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, 0.08); color: var(--rail-ink-strong);
}
.rail__count--hot { background: var(--accent-fill); color: var(--on-accent); }
.rail__foot { margin-top: auto; display: grid; gap: var(--sp-1); padding: 0 var(--sp-2); font-size: var(--fs-sm); }
.rail__user { color: var(--rail-ink-strong); font-weight: 500; }
.rail__logout {
  justify-self: start; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--rail-ink); font: inherit;
}
.rail__logout:hover { color: var(--rail-ink-strong); text-decoration: underline; }

.main { min-width: 0; padding-block: var(--sp-7) 6rem; padding-inline: var(--gutter); }
/* Both columns are centred in the workspace, so on a wide screen every page sits the same way: the wide pages (briefing,
   inbox, firm) share one left edge at every width, and the narrow ones (queue, conversation, not sales) are
   centred on the same axis. */
.container { max-width: 73rem; margin-inline: auto; }
.container--narrow { max-width: 48rem; margin-inline: auto; }

/* Narrow screens: the rail is a bar across the top, the brand and Log out on the first row and every link, with its
   count, on the rows under them. Nothing scrolls sideways or hides. */
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; align-content: start; }
  .shell > .rail, .shell > .banner, .shell > .main { grid-column: auto; grid-row: auto; }
  .rail {
    position: static; height: auto;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-3);
    padding: var(--sp-2) var(--gutter);
  }
  .rail__name span, .rail__user { display: none; }
  .rail__brand { order: 1; }
  .rail__foot { order: 2; margin: 0 0 0 auto; padding: 0; }
  .rail__nav { order: 3; flex: 1 0 100%; flex-direction: row; flex-wrap: wrap; gap: 0 var(--sp-1); }
  .rail__link { white-space: nowrap; padding: var(--sp-2) var(--sp-3); }
  .main { padding-block-start: var(--sp-6); }
}

/* ---------- Page header ---------- */
.page-head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: var(--sp-4) var(--sp-6); margin-bottom: var(--sp-7);
}
.eyebrow {
  font: 600 var(--fs-xs)/1.4 var(--font-ui); text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--ink-3);
}
.page-title { margin-top: var(--sp-2); font-size: var(--fs-2xl); font-weight: 600; line-height: 1.1; letter-spacing: -0.035em; overflow-wrap: anywhere; }
.page-title[lang="th"] { line-height: 1.4; } /* Thai in large type: less than body text's 1.85, more than 1.1 */
.page-sub { margin-top: var(--sp-3); max-width: 40rem; font-size: var(--fs-lg); color: var(--ink-2); text-wrap: balance; }
.section { display: grid; gap: var(--sp-5); margin-top: var(--sp-8); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
.section-title { font-size: var(--fs-lg); font-weight: 600; }

/* ---------- Briefing: one figure, the next names, then quiet numbers ---------- */
.today { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--sp-7); align-items: stretch; }
.today__hero {
  position: relative; overflow: hidden;
  display: grid; align-content: space-between; gap: var(--sp-6);
  padding: var(--sp-6) var(--sp-6) var(--sp-6) 2.25rem;
  border-radius: var(--radius-xl); background: var(--accent-fill); color: var(--on-accent);
  box-shadow: var(--shadow-sheet);
}
.today__figure { display: grid; gap: var(--sp-1); }
.today__num {
  font: 600 var(--fs-hero)/0.95 var(--font-ui); letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.today__label { font-size: var(--fs-lg); color: rgba(255, 255, 255, 0.86); max-width: 16rem; }
.today__watermark { position: absolute; right: -24px; top: -20px; width: 200px; height: 200px; opacity: 0.12; pointer-events: none; }
.today__next { display: grid; align-content: start; gap: var(--sp-4); padding-block: var(--sp-2); }
.waits { border-top: 1px solid var(--rule); }
.waits a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-1); border-bottom: 1px solid var(--rule);
  color: var(--ink); text-decoration: none; transition: background-color 120ms ease;
}
.waits a:hover { background: var(--wash); }
.waits__who { display: grid; gap: 0.125rem; min-width: 0; }
.waits__name { font-weight: 600; overflow-wrap: anywhere; } /* an email address as a name wraps */
.waits__firm { font-size: var(--fs-sm); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today__aside { font-size: var(--fs-sm); color: var(--ink-3); }
@media (max-width: 900px) { .today { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); } }

.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6);
  margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--rule);
}
.stat { display: grid; gap: var(--sp-2); align-content: start; }
.stat dt { font-size: var(--fs-sm); color: var(--ink-3); }
.stat dd { font: 600 var(--fs-stat)/1.1 var(--font-ui); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat--critical dd { color: var(--critical); }
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Filing calendar (Thai statutory deadlines) ---------- */
.filing { display: grid; gap: var(--sp-4); margin-top: var(--sp-8); }
.filing__head { display: grid; gap: var(--sp-2); }
.filing__state { font-size: var(--fs-lg); font-weight: 600; }
.filing__state--busy { color: var(--warning); }
.filing__state--quiet { color: var(--good); }
.filing__note { color: var(--ink-2); max-width: 44rem; text-wrap: balance; }
.filing__track {
  position: relative; height: 8px; border-radius: 999px; background: var(--wash);
  margin-block: var(--sp-2) var(--sp-7); /* room for the tick labels and, under them, Today */
}
.filing__busy {
  position: absolute; inset-block: 0; left: 0; width: var(--busy-end);
  border-radius: 999px; background: var(--warning-soft);
}
.filing__tick { position: absolute; top: -4px; left: var(--at); width: 2px; height: 16px; background: var(--ink-3); border-radius: 1px; opacity: 0.7; }
.filing__tick-label {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font: 500 var(--fs-xs)/1.2 var(--font-mono); color: var(--ink-3);
}
.filing__today {
  position: absolute; top: 50%; left: var(--at); width: 16px; height: 16px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--accent-fill); box-shadow: 0 0 0 4px var(--paper);
}
/* "Today" under the marker, on a row of its own below the tick labels, which it would otherwise run into. */
.filing__today-label {
  position: absolute; top: calc(100% + 1.625rem); left: 50%; transform: translateX(-50%);
  white-space: nowrap; font: 500 var(--fs-xs)/1.2 var(--font-mono); color: var(--accent);
}
@media (max-width: 640px) { .filing__tick-label--minor { display: none; } }

/* ---------- Buttons and fields ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 2.75rem; padding: 0.625rem 1.125rem; border-radius: var(--radius-m);
  border: 1px solid var(--rule); background: var(--sheet); color: var(--ink);
  font: 500 0.9375rem/1.2 var(--font-ui); text-decoration: none; cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease, filter 120ms ease;
}
.btn:hover { background: var(--wash); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); font-weight: 600; }
.btn--primary:hover { background: var(--accent-fill); filter: brightness(1.08); }
.btn--quiet { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn--quiet:hover { background: var(--wash); color: var(--ink); }
.btn--danger { border-color: transparent; background: transparent; color: var(--critical); }
.btn--danger:hover { background: var(--critical-soft); }
/* The white button on the indigo panel. After .btn, so that its colours win. */
.btn--on-accent { background: var(--on-accent); border-color: var(--on-accent); color: #2A3FD0; font-weight: 600; justify-self: start; }
.btn--on-accent:hover { background: var(--on-accent); filter: brightness(0.96); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.btn-row__spacer { flex: 1; }

.field { display: grid; gap: var(--sp-2); }
.label { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); }
.hint { font-size: var(--fs-sm); color: var(--ink-3); }
.input, .textarea, .select {
  width: 100%; padding: 0.75rem 0.875rem; border-radius: var(--radius-m);
  border: 1px solid var(--rule); background: var(--sheet); color: var(--ink);
  font: 400 var(--fs-md)/1.5 var(--font-ui);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.textarea { min-height: 9rem; resize: vertical; line-height: 1.75; }
.select { min-height: 3.125rem; } /* an input's height (Chrome draws a select 1px shorter), so the two line up side by side */
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

.segmented { display: inline-flex; justify-self: start; padding: 4px; gap: 4px; border-radius: var(--radius-m); background: var(--wash); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
  padding: var(--sp-2) var(--sp-4); border-radius: calc(var(--radius-m) - 4px);
  font-size: 0.9375rem; font-weight: 500; color: var(--ink-2); cursor: pointer;
}
.segmented input:checked + label { background: var(--sheet); color: var(--ink); box-shadow: var(--shadow-pop); }
.segmented input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

.notice { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-m); font-size: 0.9375rem; }
.notice--error { background: var(--critical-soft); color: var(--critical); }
.notice--ok { background: var(--good-soft); color: var(--good); }
.notice a { color: inherit; } /* a link in a notice reads in the notice's colour: "Reconnect it in Settings" */

/* A banner: what the whole desk should know, across the top of the workspace, above every page (the shell holds it). */
.banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-4);
  padding: var(--sp-3) var(--gutter); background: var(--warning-soft); color: var(--ink);
  font-size: 0.9375rem; font-weight: 500;
}
.banner a { color: inherit; font-weight: 600; }

/* ---------- Chips, tags, channel dots ---------- */
.chip {
  display: inline-flex; align-items: center; flex: none;
  padding: 0.1875rem 0.625rem; border-radius: 999px;
  font: 500 var(--fs-xs)/1.4 var(--font-mono); font-variant-numeric: tabular-nums;
  background: var(--wash); color: var(--ink-2); white-space: nowrap;
}
.chip--warning { background: var(--warning-soft); color: var(--warning); }
.chip--critical { background: var(--critical-soft); color: var(--critical); }
.chip--good { background: var(--good-soft); color: var(--good); }
.chip--accent { background: var(--accent-soft); color: var(--accent); font-family: var(--font-ui); }
.tag {
  display: inline-flex; padding: 0.125rem var(--sp-2); border-radius: var(--radius-s);
  border: 1px solid var(--rule); font-size: var(--fs-xs); font-weight: 500; color: var(--ink-2);
  white-space: nowrap;
}
.tag--unsorted { border-style: dashed; color: var(--ink-3); }
.channel { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-3); white-space: nowrap; }
.channel::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.channel[data-channel="gmail"]::before { background: var(--ch-gmail); }
.channel[data-channel="zoho"]::before { background: var(--ch-zoho); }
.channel[data-channel="messenger_page"]::before { background: var(--ch-fb); }
.channel[data-channel="line_oa"]::before,
.channel[data-channel="line_personal"]::before { background: var(--ch-line); }
.channel[data-channel="messenger_personal"]::before { background: var(--ch-messenger); }
.dot-sep::before { content: "·"; margin-inline: var(--sp-2); color: var(--ink-3); }

/* ---------- Ledger list ---------- */
.ledger > li + li { border-top: 1px solid var(--rule); }
.row {
  display: grid; gap: var(--sp-1); padding: var(--sp-4) var(--sp-5);
  color: var(--ink); text-decoration: none;
  transition: background-color 120ms ease;
}
.row:hover { background: var(--wash); }
.row[aria-current="true"] { background: var(--accent-soft); }
/* The name keeps at least 8rem beside its chip: a long one (Snoozed until …) drops under it. */
.row__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-3); min-width: 0; }
.row__who { flex: 1 1 8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__firm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); color: var(--ink-2); overflow-wrap: anywhere; }
.row__snippet {
  margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row__snippet--empty { font-style: italic; } /* "No text in this message": the app's words, as in a bubble */
.ledger--plain .row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4); }
@media (max-width: 520px) {
  .ledger--plain .row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .ledger--plain .row form { justify-self: start; }
}
.ledger--card { background: var(--sheet); border-radius: var(--radius-l); box-shadow: var(--shadow-sheet); overflow: hidden; }

/* ---------- Sheet: the conversation in hand ---------- */
.sheet {
  min-width: 0; background: var(--sheet); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sheet);
}
.sheet__head {
  display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between;
  gap: var(--sp-3) var(--sp-5); padding: var(--sp-6) var(--sp-6) var(--sp-5);
}
/* The name block takes the room beside the chip and wraps inside it, so the chip stays top right; below 14rem of room
   (a phone) the chip goes under it. */
.sheet__who { display: grid; gap: var(--sp-1); flex: 1 1 14rem; min-width: 0; }
.sheet__name { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.025em; }
.sheet__name[lang="th"] { line-height: 1.4; }
.sheet__firm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-4); color: var(--ink-2); font-size: 0.9375rem; }
.sheet__body { display: grid; gap: var(--sp-6); padding: 0 var(--sp-6) var(--sp-6); }
/* The firm or the link form takes the free width and wraps inside itself; the actions stay on its right, level with its
   bottom, and drop under it, still on the right, only when they do not fit. */
.sheet__foot {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-3) var(--sp-5);
  padding: var(--sp-5) var(--sp-6); border-top: 1px solid var(--rule);
}
.sheet__foot > :first-child { flex: 1 1 20rem; min-width: 0; }
.sheet__foot > :last-child { margin-inline-start: auto; }
.sheet--enter { animation: rise 240ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes rise { from { transform: translateY(10px); } to { transform: none; } }

.summary { display: grid; gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--radius-l); background: var(--paper); }
.summary__label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.summary__text { font-size: var(--fs-lg); line-height: 1.55; }
.summary__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.summary__chips .chip { white-space: normal; flex: 0 1 auto; max-width: 100%; border-radius: var(--radius-m); } /* free text: it wraps */

/* Thread */
.thread { display: grid; gap: var(--sp-5); }
.bubble { display: grid; gap: var(--sp-2); max-width: min(34rem, 86%); }
.bubble__meta { display: flex; flex-wrap: wrap; gap: 0 var(--sp-3); font-size: var(--fs-xs); color: var(--ink-3); }
.bubble__meta strong { color: var(--ink-2); font-weight: 600; }
.bubble__meta time { white-space: nowrap; }
.bubble__text {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-l);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.bubble--in .bubble__text { background: var(--wash); border-top-left-radius: 4px; }
.bubble--out { justify-self: end; }
.bubble--out .bubble__meta { justify-content: flex-end; }
.bubble--out .bubble__text { background: var(--accent-soft); border-top-right-radius: 4px; }
.bubble__cleared { font-style: italic; color: var(--ink-3); }

/* Settings: one card per connector, one under the other; a card's form, and its confirmation checkbox. */
.sheet + .sheet { margin-top: var(--sp-6); }
.card-form { display: grid; gap: var(--sp-4); }
.check { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-2); }
.check input { flex: none; width: 1.125rem; height: 1.125rem; margin: 0.1875rem 0 0; accent-color: var(--accent-fill); }

/* Reply area */
.composer { display: grid; gap: var(--sp-4); }
.handoff { display: grid; gap: var(--sp-4); padding: var(--sp-5); border-radius: var(--radius-l); border: 1px dashed var(--rule); }
.handoff__title { font-weight: 600; font-size: var(--fs-lg); }

/* About the firm: one quiet line inside the sheet. Each fact after the firm carries its "·" in the 1rem before it, and
   the line is pulled 1rem to the left inside .about, which clips it: a fact that starts a wrapped line loses its dot, so
   no line starts with one. The 5px around .about keep the firm link's focus ring unclipped. */
.about { display: grid; gap: var(--sp-1); min-width: 0; overflow: hidden; padding: 5px; margin: -5px; }
.about__facts { display: flex; flex-wrap: wrap; align-items: center; margin-inline-start: -1rem; color: var(--ink-2); font-size: 0.9375rem; }
.about__facts > * { position: relative; padding-inline-start: 1rem; }
.about__facts > *::before { content: "·"; position: absolute; left: 0.375rem; color: var(--ink-3); }
.about__facts > :first-child { margin-inline-start: 1rem; padding-inline-start: 0; }
.about__facts > :first-child::before { content: none; }
@media (max-width: 520px) { .about__facts { display: grid; justify-items: start; } } /* a phone: one fact a line */
.link-form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sp-3); }
.link-form .field { flex: 1 1 9rem; }

/* Text that can be one long word (an email address as a name, a subject, a firm) wraps anywhere rather than widen the page. */
.sheet__name, .sheet__firm > span, .bubble__meta strong, .composer > .hint, .sheet__body > .hint, .about__facts > *, .confirm__body .hint { overflow-wrap: anywhere; }
/* The sheet's channel names the mailbox (Lee's Gmail · lee@…): unlike a row's, it wraps rather than run off a phone. */
.sheet__firm > .channel { white-space: normal; }

/* Inline confirm: <details class="confirm"><summary class="btn btn--danger">…</summary><form class="confirm__body">…</form></details> */
.confirm > summary { list-style: none; }
.confirm > summary::-webkit-details-marker { display: none; }
.confirm[open] > summary { display: none; }
.confirm__body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }

/* ---------- Queue ---------- */
.queue-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.queue-head__side { display: flex; align-items: center; gap: var(--sp-4); }
.progress { height: 4px; border-radius: 999px; background: var(--wash); overflow: hidden; margin-bottom: var(--sp-6); }
.progress__bar { height: 100%; width: var(--done); background: var(--accent-fill); border-radius: 999px; transition: width 300ms ease; }

/* ---------- Inbox: list | conversation ---------- */
.inbox { display: grid; grid-template-columns: 23rem minmax(0, 48rem); gap: var(--sp-6); align-items: start; }
.inbox__list { min-width: 0; position: sticky; top: var(--sp-5); max-height: calc(100dvh - 3rem); overflow-y: auto; }
.inbox__filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--sheet); z-index: 1; }
.filter { padding: 0.3125rem var(--sp-3); border-radius: 999px; font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); text-decoration: none; }
.filter:hover { background: var(--wash); }
.filter[aria-current="true"] { background: var(--ink); color: var(--paper); }
.inbox__empty { display: grid; place-items: center; min-height: 20rem; padding: var(--sp-7); color: var(--ink-3); text-align: center; }
/* A row opens its conversation at #sheet. Beside the list the page has no reason to move: the margin is as tall as the
   screen, so the scroll stays at the top. Under the list (narrow screens) the page opens on the sheet. */
.inbox > .sheet { scroll-margin-top: 100vh; }
@media (max-width: 1100px) {
  .inbox { grid-template-columns: minmax(0, 1fr); }
  .inbox__list { position: static; max-height: none; }
  .inbox__empty { display: none; }
  .inbox > .sheet { scroll-margin-top: var(--sp-4); }
}

/* ---------- Empty and waiting states ---------- */
.caught-up { display: grid; justify-items: center; gap: var(--sp-4); padding: 5rem var(--sp-6); text-align: center; }
.caught-up__mark { width: 80px; height: 80px; margin-bottom: var(--sp-2); }
.caught-up__title { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.025em; }
.caught-up__text { color: var(--ink-2); max-width: 30rem; font-size: var(--fs-lg); text-wrap: balance; }
.reading__bar { width: min(22rem, 100%); height: 4px; border-radius: 999px; background: var(--wash); overflow: hidden; }
.reading__bar::after { content: ""; display: block; width: 35%; height: 100%; border-radius: 999px; background: var(--accent-fill); animation: sweep 1.4s ease-in-out infinite; }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(290%); } }

/* ---------- Firm page ---------- */
.firm { display: grid; gap: var(--sp-8); }
.firm > .section { margin-top: 0; }
.firm__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-6); padding: var(--sp-6); }
.firm__form .field--wide { grid-column: 1 / -1; }
@media (max-width: 700px) { .firm__form { grid-template-columns: minmax(0, 1fr); } }
.danger-zone { display: grid; gap: var(--sp-3); padding-top: var(--sp-5); border-top: 1px solid var(--rule); }

/* ---------- Login ---------- */
.login { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100dvh; }
.login__brand {
  display: grid; align-content: space-between; gap: var(--sp-6); padding: var(--sp-7) var(--gutter);
  background: var(--rail); color: var(--rail-ink);
}
.login__mark { width: 56px; height: 56px; }
.login__line { font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.08; color: var(--rail-ink-strong); max-width: 16ch; }
.login__line span { color: #8094FF; }
.login__meta { font-size: var(--fs-sm); }
.login__form {
  display: grid; align-content: start; justify-items: start;
  padding: max(var(--sp-7), calc(50dvh - 10rem)) var(--gutter) var(--sp-7); /* the card's top where centring would put it */
}
.login__card { display: grid; gap: var(--sp-5); width: min(24rem, 100%); }
@media (max-width: 800px) {
  .login { grid-template-columns: minmax(0, 1fr); }
  .login__brand { align-content: start; padding-block: var(--sp-6); }
  .login__form { padding-block-start: var(--sp-7); }
}