/* app.css: the one stylesheet. Fleet tokens (00-overview, Page shell),
   self-hosted type, the type steps, the token utilities and the classes the
   shell and the auth pages use. The palette is the VoKol design system's:
   teal is brand and interaction, never state; state is the muted ok/warn/off
   hues, always beside a word or glyph. */

/* Fonts ------------------------------------------------------------------- */

@font-face { font-family: "Nunito"; src: url("fonts/Nunito-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/Nunito-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/Nunito-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/Nunito-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/Nunito-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/Nunito-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/Nunito-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/Nunito-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Syncopate"; src: url("fonts/Syncopate-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Syncopate"; src: url("fonts/Syncopate-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* Tokens ------------------------------------------------------------------ */

/* VoKol: one brand teal, cool blue-teal greys, teal-tinted shadows. The
   --fleet-* names are the app's; the values are the design system's, with the
   contrast adjustments its bridge worked out (a brand a hair deeper than
   teal-600, status inks deepened for text, one muted grey that clears 4.5:1). */
:root {
  color-scheme: light;
  --radius: 16px;

  --teal-50: #f0f8fa;
  --teal-100: #d9edf1;
  --teal-200: #b3dbe3;
  --teal-300: #7fc1cc;
  --teal-400: #4ba0b0;
  --teal-500: #2b8598;
  --teal-600: #11758c;
  --teal-700: #0d5e71;
  --teal-800: #0c4b5a;
  --teal-900: #0b3d49;
  --teal-950: #072731;

  --gray-0: #ffffff;
  --gray-50: #f7f9fa;
  --gray-100: #eef2f4;
  --gray-200: #e0e6e9;
  --gray-300: #cbd4d8;
  --gray-400: #9aa8ae;
  --gray-500: #6b7a80;
  --gray-600: #4d5a60;
  --gray-700: #384247;
  --gray-800: #262e32;
  --gray-900: #171d20;

  --fleet-bg: var(--gray-0);
  --fleet-bg-1: var(--gray-50);
  --fleet-bg-2: var(--gray-50);
  --fleet-bg-3: var(--teal-50);
  --fleet-bg-4: var(--gray-100);
  --fleet-page: var(--gray-50);
  --fleet-card: var(--gray-0);
  --fleet-selected: var(--teal-50);
  /* A read row sits back a full step from the white of an unread one. */
  --fleet-row-read: var(--gray-100);

  --fleet-line: var(--gray-200);
  --fleet-line-bright: var(--gray-300);
  --fleet-line-strong: var(--gray-400);

  --fleet-fg: var(--gray-900);
  --fleet-fg-1: var(--gray-700);
  --fleet-fg-2: var(--gray-600);
  --fleet-muted: #5c6b71;
  --fleet-faint: #5c6b71;
  --fleet-dim: var(--gray-300);

  /* between teal-600 and teal-700, so teal on its own soft wash clears 4.5:1 at label sizes */
  --fleet-brand: #0f6a80;
  --fleet-brand-hover: var(--teal-700);
  --fleet-brand-active: var(--teal-800);
  --fleet-brand-soft: var(--teal-100);
  --fleet-brand-soft-hover: var(--teal-200);
  --fleet-brand-ink: var(--gray-0);
  --fleet-accent: var(--teal-300);
  /* a lighter teal than the brand, which reads near-black in running text; 4.6:1 on gray-50 */
  --fleet-link: #0e7c90;

  --fleet-ok: #1b6455;
  --fleet-warn: #7f5d1d;
  --fleet-off: #9e3141;
  --fleet-info: #2f6a8b;

  --fleet-ok-wash: #dcefe9;
  --fleet-warn-wash: #f1ebdb;
  --fleet-off-wash: #f4e3e6;
  --fleet-info-wash: #dce8f0;

  --fleet-ok-solid: #1f7a63;
  --fleet-warn-solid: #8f6420;
  --fleet-off-solid: #b5414f;
  --fleet-off-solid-hover: #9e3141;
  --fleet-info-solid: #2d6f96;

  /* the inverse surface (toasts): deep teal on light, white on dark */
  --fleet-inverse: var(--teal-950);
  --fleet-inverse-ink: var(--gray-50);
  --fleet-inverse-muted: #a8c3ca;
  --fleet-inverse-ok: #7fcdb6;
  --fleet-inverse-off: #ec9aa7;

  --fleet-wash: var(--teal-50);
  --fleet-scrim: rgba(7, 39, 49, 0.45);
  /* focus: a 1.5px teal edge and a 3px teal-300 halo */
  --fleet-focus-ring: rgba(127, 193, 204, 0.55);
  --fleet-focus: 0 0 0 1.5px var(--fleet-brand), 0 0 0 4.5px var(--fleet-focus-ring);
  --fleet-focus-field: 0 0 0 0.5px var(--fleet-brand), 0 0 0 3.5px var(--fleet-focus-ring);

  /* elevation is teal-tinted, never black */
  --fleet-shadow-xs: 0 1px 2px rgba(11, 61, 73, 0.06);
  --fleet-shadow-sm: 0 2px 6px rgba(11, 61, 73, 0.08);
  --fleet-shadow-md: 0 6px 16px rgba(11, 61, 73, 0.1);
  --fleet-shadow-lg: 0 14px 32px rgba(11, 61, 73, 0.12);
  --fleet-shadow-xl: 0 24px 56px rgba(11, 61, 73, 0.16);
  --fleet-shadow-brand: 0 10px 28px rgba(17, 117, 140, 0.28);
  --fleet-shadow-card: var(--fleet-shadow-xl);
  --fleet-shadow-lift: var(--fleet-shadow-md);

  --fleet-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --fleet-ease-emphasis: cubic-bezier(0.2, 0.9, 0.1, 1);
  --fleet-duration-fast: 120ms;
  --fleet-duration-base: 200ms;
  --fleet-duration-slow: 320ms;

  /* Nunito does everything; Syncopate is the wordmark only */
  --font-sans: "Nunito", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Syncopate", "Nunito", ui-sans-serif, sans-serif;
  --font-mono: "Nunito", ui-sans-serif, system-ui, sans-serif;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: var(--radius);
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-control: 8px;
  --radius-input: 12px;
  --radius-button: 12px;
  --radius-card: 16px;

  /* generic component names, all aliases of the Fleet tokens */
  --background: var(--fleet-bg);
  --foreground: var(--fleet-fg);
  --card: var(--fleet-bg-2);
  --popover: var(--fleet-bg-2);
  --primary: var(--fleet-brand);
  --primary-foreground: var(--fleet-brand-ink);
  --secondary: var(--fleet-bg-3);
  --muted: var(--fleet-bg-3);
  --muted-foreground: var(--fleet-muted);
  --accent: var(--fleet-bg-3);
  --destructive: var(--fleet-off);
  --border: var(--fleet-line);
  --input: var(--fleet-bg-4);
  --ring: var(--fleet-focus-ring);
  --chart-1: var(--fleet-brand);
  --chart-2: var(--fleet-accent);
  --chart-3: var(--fleet-info);
  --chart-4: var(--fleet-ok);
  --chart-5: var(--fleet-warn);
  --sidebar: var(--fleet-bg-1);
  --sidebar-foreground: var(--fleet-fg);
  --sidebar-primary: var(--fleet-brand);
  --sidebar-primary-foreground: var(--fleet-brand-ink);
  --sidebar-accent: var(--fleet-brand-soft);
  --sidebar-border: var(--fleet-line);
  --sidebar-ring: var(--fleet-focus-ring);
}

/* dark is VoKol's own inverse surface, teal-950, not a grey inversion */
.dark-theme,
.dark {
  color-scheme: dark;

  --fleet-bg: var(--teal-950);
  --fleet-bg-1: #0a333f;
  --fleet-bg-2: var(--teal-900);
  --fleet-bg-3: var(--teal-800);
  --fleet-bg-4: #0e4453;
  --fleet-page: var(--teal-950);
  --fleet-card: var(--teal-900);
  /* lighter than teal-800, so a status pill on a selected row keeps 4.5:1 */
  --fleet-selected: rgba(127, 193, 204, 0.08);
  --fleet-row-read: var(--fleet-bg-1);

  --fleet-line: rgba(127, 193, 204, 0.16);
  --fleet-line-bright: rgba(127, 193, 204, 0.3);
  --fleet-line-strong: rgba(127, 193, 204, 0.48);

  --fleet-fg: var(--gray-0);
  --fleet-fg-1: #d7e6ea;
  --fleet-fg-2: #a8c3ca;
  --fleet-muted: #9dbcc4;
  --fleet-faint: #a8c3ca;
  --fleet-dim: #2b5a68;

  --fleet-brand: var(--teal-300);
  --fleet-brand-hover: #9bd3dc;
  --fleet-brand-active: var(--teal-200);
  --fleet-brand-soft: var(--teal-800);
  --fleet-brand-soft-hover: var(--teal-700);
  --fleet-brand-ink: var(--teal-950);
  --fleet-accent: var(--teal-300);
  --fleet-link: var(--teal-300);

  --fleet-ok: #7fcdb6;
  --fleet-warn: #e2bb7c;
  --fleet-off: #ec9aa7;
  --fleet-info: #8fc3e0;

  --fleet-ok-wash: rgba(127, 205, 182, 0.16);
  --fleet-warn-wash: rgba(226, 187, 124, 0.16);
  --fleet-off-wash: rgba(236, 154, 167, 0.16);
  --fleet-info-wash: rgba(127, 190, 222, 0.16);

  --fleet-inverse: var(--gray-0);
  --fleet-inverse-ink: var(--teal-950);
  --fleet-inverse-muted: var(--gray-600);
  --fleet-inverse-ok: #1b6455;
  --fleet-inverse-off: #9e3141;

  --fleet-wash: rgba(127, 193, 204, 0.08);
  --fleet-scrim: rgba(3, 18, 23, 0.7);
  --fleet-focus-ring: rgba(127, 193, 204, 0.28);

  --fleet-shadow-xs: 0 1px 2px rgba(3, 18, 23, 0.4);
  --fleet-shadow-sm: 0 2px 6px rgba(3, 18, 23, 0.45);
  --fleet-shadow-md: 0 8px 20px rgba(3, 18, 23, 0.45);
  --fleet-shadow-lg: 0 14px 32px rgba(3, 18, 23, 0.5);
  --fleet-shadow-xl: 0 24px 56px rgba(3, 18, 23, 0.55);
  --fleet-shadow-brand: 0 10px 28px rgba(127, 193, 204, 0.22);
  --fleet-shadow-card: var(--fleet-shadow-xl);
  --fleet-shadow-lift: var(--fleet-shadow-md);
}

/* Base -------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; border-color: var(--fleet-line); }

html { height: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--fleet-bg);
  color: var(--fleet-fg);
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.3;
}

h1, h2, h3, h4, h5, h6 { font-weight: 500; letter-spacing: -0.01em; margin: 0; }

a { color: var(--fleet-link); }
/* a text link: a bare anchor in running text, or .link on anything; anchors
   styled as controls carry their own class and colour */
a:not([class]), .link { color: var(--fleet-link); text-decoration: underline; text-underline-offset: 2px; }
a:not([class]):hover, .link:hover { color: var(--fleet-brand-hover); text-decoration-thickness: 2px; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

input, textarea, select {
  font: inherit;
  color: var(--fleet-fg);
  background: var(--fleet-bg);
  border: 1px solid var(--fleet-line-bright);
  border-radius: var(--radius-input);
  padding: 8px 10px;
  width: 100%;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  box-shadow: var(--fleet-focus-field);
  border-color: var(--fleet-brand);
}

:focus-visible { outline: none; box-shadow: var(--fleet-focus); }

svg.lucide { stroke-width: 1.25; width: 1em; height: 1em; }

[x-cloak] { display: none !important; }

/* Type steps -------------------------------------------------------------- */

.text-value { font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.text-prose { font-family: var(--font-sans); font-size: 13px; font-weight: 400; line-height: 1.45; }
.text-mono-label { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.text-mono-label-sm { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.text-display { font-family: var(--font-sans); font-size: 24px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.lowercase { text-transform: lowercase; }

/* Token utilities --------------------------------------------------------- */

.surface { background: var(--fleet-bg); }
.surface-1 { background: var(--fleet-bg-1); }
.surface-2 { background: var(--fleet-bg-2); }
.surface-3 { background: var(--fleet-bg-3); }
.surface-4 { background: var(--fleet-bg-4); }
.surface-wash { background: var(--fleet-wash); }
.line { border-color: var(--fleet-line); }
.line-bright { border-color: var(--fleet-line-bright); }
.line-strong { border-color: var(--fleet-line-strong); }
.ink { color: var(--fleet-fg); }
.ink-1 { color: var(--fleet-fg-1); }
.ink-2 { color: var(--fleet-fg-2); }
.ink-muted { color: var(--fleet-muted); }
.ink-faint { color: var(--fleet-faint); }
.ink-dim { color: var(--fleet-dim); }
.brand { color: var(--fleet-brand); }
.brand-ink { color: var(--fleet-brand-ink); }
.state-ok { color: var(--fleet-ok); }
.state-warn { color: var(--fleet-warn); }
.state-off { color: var(--fleet-off); }
.state-info { color: var(--fleet-info); }
.state-ok-wash { background: var(--fleet-ok-wash); }
.state-warn-wash { background: var(--fleet-warn-wash); }
.state-off-wash { background: var(--fleet-off-wash); }
.state-info-wash { background: var(--fleet-info-wash); }
.state-ok-solid { background: var(--fleet-ok-solid); color: #ffffff; }
.state-warn-solid { background: var(--fleet-warn-solid); color: #ffffff; }
.state-off-solid { background: var(--fleet-off-solid); color: #ffffff; }
.state-info-solid { background: var(--fleet-info-solid); color: #ffffff; }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Controls ---------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: var(--radius-button);
  border: 1px solid var(--fleet-line-bright);
  background: var(--fleet-bg);
  color: var(--fleet-fg);
  font-weight: 600;
  transition: background var(--fleet-duration-fast) var(--fleet-ease-standard), border-color var(--fleet-duration-fast) var(--fleet-ease-standard), color var(--fleet-duration-fast) var(--fleet-ease-standard);
}
/* secondary and ghost fill with the brand's soft wash; primary darkens one teal step */
.button:hover { background: var(--fleet-brand-soft); border-color: var(--fleet-brand); color: var(--fleet-brand); }
.button:active { background: var(--fleet-brand-soft-hover); border-color: var(--fleet-brand-active); color: var(--fleet-brand-active); }
.button-primary { background: var(--fleet-brand); border-color: var(--fleet-brand); color: var(--fleet-brand-ink); }
.button-primary:hover { background: var(--fleet-brand-hover); border-color: var(--fleet-brand-hover); color: var(--fleet-brand-ink); }
.button-primary:active { background: var(--fleet-brand-active); border-color: var(--fleet-brand-active); color: var(--fleet-brand-ink); }
/* a destructive button keeps its state hue: teal never stands in for state */
.button.state-off, .icon-button.state-off, .icon-button.touch.state-off { color: var(--fleet-off); }
.button.state-off:hover, .button.state-off:active { background: var(--fleet-off-wash); border-color: var(--fleet-off); color: var(--fleet-off); }
.button.state-off-solid { background: var(--fleet-off-solid); border-color: var(--fleet-off-solid); color: #ffffff; }
.button.state-off-solid:hover, .button.state-off-solid:active { background: var(--fleet-off-solid-hover); border-color: var(--fleet-off-solid-hover); color: #ffffff; }
.button-full { width: 100%; }

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-control);
  color: var(--fleet-faint);
  font-size: 16px;
}
.icon-button:hover { color: var(--fleet-brand); background: var(--fleet-brand-soft); }
.icon-button.state-off:hover { color: var(--fleet-off); background: var(--fleet-off-wash); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 600; font-size: 13px; color: var(--fleet-fg-1); }
.field-hint { font-size: 12px; color: var(--fleet-muted); font-weight: 400; }

/* Auth pages (outside the shell) ------------------------------------------ */

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--fleet-page);
}
.auth-card {
  width: 100%;
  max-width: 448px;
  padding: 32px;
  border-radius: var(--radius-card);
  background: var(--fleet-card);
  box-shadow: var(--fleet-shadow-card);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.auth-heading { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.auth-alert, .auth-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--fleet-line-bright);
  border-radius: var(--radius-control);
  background: var(--fleet-bg);
  font-size: 13px;
}
.auth-alert-glyph { font-weight: 700; color: var(--fleet-fg-2); }
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-form ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--fleet-fg-2); }
.auth-links { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }

/* Shell ------------------------------------------------------------------- */

.shell { display: flex; flex-direction: column; height: 100vh; background: var(--fleet-bg); color: var(--fleet-fg); }
.shell-row { display: flex; flex: 1; min-height: 0; }
/* the main column: the environment banner, when there is one, over the page */
.shell-col { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.shell-main { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; }
/* A state, not an action: the warn hue with a glyph and words, never teal.
   One quiet line that wraps on a phone and takes its own row, so no page
   under it moves sideways. */
.env-banner { display: flex; flex: none; align-items: flex-start; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--fleet-line); background: var(--fleet-warn-wash); color: var(--fleet-warn); }
.env-banner p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.env-banner a { color: inherit; text-decoration: underline; }
.env-banner-glyph { display: inline-flex; flex: none; font-size: 16px; line-height: 1; padding-top: 1px; }
.env-banner-missing { margin-left: 4px; }
.shell-main-padded { padding: 0; }

.sidebar {
  display: none;
  position: relative;
  z-index: 30;
  flex-shrink: 0;
  height: 100%;
  border-right: 1px solid var(--fleet-line);
  background: var(--fleet-bg-1);
  color: var(--fleet-fg);
}
.sidebar-panel { display: flex; flex-direction: column; height: 100%; }
.sidebar-full { width: 256px; }
.sidebar-rail { width: 64px; }
.sidebar-full[hidden], .sidebar-rail[hidden] { display: none; }
.sidebar-account { width: 264px; }

.brand-row {
  display: flex;
  align-items: center;
  height: 56px;
  flex-shrink: 0;
  padding: 0 16px;
  border-bottom: 1px solid var(--fleet-line);
}
.sidebar-rail .brand-row { justify-content: center; padding: 0; }
.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--fleet-brand);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.brand-link svg { width: 1em; height: 1em; color: var(--fleet-faint); }
/* the VoKol logo (partial logo): the teal one on light, its light recolouring on dark */
.logo { display: block; width: auto; height: 18px; }
.logo-on-dark, .dark-theme .logo-on-light { display: none; }
.dark-theme .logo-on-dark { display: block; }

.scope-card {
  margin: 12px 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--fleet-line);
  border-radius: var(--radius-control);
  background: var(--fleet-bg);
}
.scope-card-name { font-weight: 700; font-size: 13.5px; }
.scope-card-sub { margin-top: 2px; }

.nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  padding: 16px 12px;
}
.sidebar-rail .nav { padding: 16px 8px; }

.nav-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--radius-control);
  color: var(--fleet-fg-2);
  text-decoration: none;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
}
.nav-row:hover { background: var(--fleet-brand-soft); color: var(--fleet-brand); }
.nav-row[aria-current="page"] { background: var(--fleet-brand); color: var(--fleet-brand-ink); font-weight: 700; }
.nav-row[aria-current="page"]:hover { background: var(--fleet-brand); color: var(--fleet-brand-ink); }
.nav-row-icon { display: flex; width: 18px; height: 18px; flex-shrink: 0; align-items: center; justify-content: center; font-size: 18px; }
.nav-row-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-row-count { flex-shrink: 0; color: var(--fleet-faint); }
.nav-row[aria-current="page"] .nav-row-count { color: var(--fleet-brand-ink); }
.nav-row-chevron { display: flex; flex-shrink: 0; color: var(--fleet-faint); font-size: 16px; transition: transform var(--fleet-duration-fast) var(--fleet-ease-standard); }
.nav-row[aria-expanded="true"] .nav-row-chevron { transform: rotate(90deg); }
.sidebar-rail .nav-row { justify-content: center; gap: 0; padding: 8px 0; }

/* in a short window the rows keep their height and the nav scrolls */
.nav > .nav-row { flex-shrink: 0; }
.nav-group { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.nav-group-rows { display: flex; flex-direction: column; gap: 2px; margin-left: 21px; padding-left: 8px; border-left: 1px solid var(--fleet-line); }
.nav-group-rows[hidden] { display: none; }

.sidebar-footer {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 12px;
  border-top: 1px solid var(--fleet-line);
}
.sidebar-rail .sidebar-footer { flex-direction: column; padding: 12px 8px; }
.sidebar-footer-grow { flex: 1; min-width: 0; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--fleet-fg-2);
}
.theme-toggle:hover { background: var(--fleet-wash); color: var(--fleet-brand); }

.account-row { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 4px 8px; }
.account-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-email { color: var(--fleet-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 0 8px;
  border-bottom: 1px solid var(--fleet-line);
  background: var(--fleet-bg-1);
}
.topbar .icon-button { width: 44px; height: 44px; font-size: 20px; color: var(--fleet-fg-2); }

.mobile-bar {
  display: flex;
  flex-shrink: 0;
  justify-content: space-around;
  border-top: 1px solid var(--fleet-line);
  background: var(--fleet-bg-1);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.mobile-bar a {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  padding: 4px 0;
  border-radius: var(--radius-control);
  color: var(--fleet-fg-2);
  text-decoration: none;
  font-size: 20px;
}
.mobile-bar a[aria-current="page"] { color: var(--fleet-brand); font-weight: 700; }

.drawer {
  margin: 0;
  height: 100%;
  max-height: none;
  width: 256px;
  max-width: 85vw;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--fleet-line);
  background: var(--fleet-bg-1);
  color: var(--fleet-fg);
}
.drawer[open] { display: flex; flex-direction: column; }
/* the fallback is for a ::backdrop that does not inherit custom properties */
.drawer::backdrop { background: var(--fleet-scrim, rgba(7, 39, 49, 0.45)); }
.drawer-close { position: absolute; top: 6px; right: 4px; width: 44px; height: 44px; }
.drawer .brand-row { padding-right: 52px; } /* clear of the close button */

@media (min-width: 768px) {
  .sidebar { display: block; }
  .shell-main-padded { padding: 24px; }
  .nav-row, .theme-toggle { min-height: 0; }
  .md-hidden { display: none !important; }
}
@media (max-width: 767.98px) {
  .md-only { display: none !important; }
}

/* Toasts ------------------------------------------------------------------ */

.toasts {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  pointer-events: none;
}
@media (max-width: 767.98px) { .toasts { bottom: 88px; } }
.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 448px;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  background: var(--fleet-inverse);
  color: var(--fleet-inverse-ink);
  box-shadow: var(--fleet-shadow-lg);
  pointer-events: auto;
  font-size: 13px;
  line-height: 1.45;
}
.toast-error { border-color: var(--fleet-inverse-off); font-weight: 600; }
.toast .state-ok { color: var(--fleet-inverse-ok); }
.toast .state-off { color: var(--fleet-inverse-off); }
.toast-word { font-size: 10px; font-weight: 700; letter-spacing: 0.02em; text-transform: lowercase; }
.toast-text { flex: 1; }
.toast-dismiss { font-size: 10px; font-weight: 700; text-transform: lowercase; color: var(--fleet-inverse-muted); }
.toast-dismiss:hover { color: var(--fleet-inverse-ink); }

/* Placeholder pages ------------------------------------------------------- */

.notice-card {
  max-width: 560px;
  margin: 24px;
  padding: 20px 24px;
  border: 1px solid var(--fleet-line);
  border-radius: var(--radius-card);
  background: var(--fleet-bg-2);
}

/* Inbox (01-inbox: UI) ---------------------------------------------------- */

input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; flex: none; margin: 0; padding: 0; border: 0; border-radius: 4px; accent-color: var(--fleet-brand); }
input[type="checkbox"]:focus, input[type="radio"]:focus { box-shadow: none; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { box-shadow: var(--fleet-focus); }

.grow { flex: 1; }
.min-w-0 { min-width: 0; }
.block { display: block; }
.bold { font-weight: 700; }
.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.04em; }
.icon-button.touch { width: 44px; height: 44px; font-size: 20px; color: var(--fleet-fg-2); }
.button-small { min-height: 32px; padding: 4px 12px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; }

.inbox { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.inbox-top { position: relative; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; flex-shrink: 0; padding: 12px 28px; border-bottom: 1px solid var(--fleet-line); }
.inbox-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.stat { display: inline-flex; align-items: baseline; gap: 7px; padding: 6px 12px; border-radius: 999px; background: var(--fleet-bg-2); color: var(--fleet-fg-2); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.stat b { color: var(--fleet-fg); font-size: 14px; font-weight: 800; letter-spacing: 0; }
.inbox-search { flex: none; min-width: 0; }
.inbox-search-field { height: 32px; width: 192px; padding: 4px 10px; background: var(--fleet-bg-4); font-size: 13px; }
.inbox-phone-summary { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; padding: 0 16px 10px; border-bottom: 1px solid var(--fleet-line); background: var(--fleet-bg-1); }
.inbox-filters { position: relative; z-index: 20; flex-shrink: 0; padding: 10px 28px; border-bottom: 1px solid var(--fleet-line); }
.inbox-scroll { flex: 1; min-height: 0; overflow-y: auto; }

/* filter bar */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filter-bar-end { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-left: auto; }
/* the filters and the bulk actions share one cell, the one not in use hidden
   in place: the bar keeps its height, so ticking a row never moves the list */
.filter-bar-swap { display: grid; grid-template-columns: minmax(0, 1fr); flex: 1 1 auto; min-width: 0; }
.filter-bar-swap > * { grid-area: 1 / 1; }
.filter-bar-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filter-bar:not([data-selecting]) .filter-bar-actions, .filter-bar[data-selecting] .filter-bar-filters { visibility: hidden; }
.select-all { display: flex; flex: none; align-items: center; gap: 4px; }
.select-all input { width: 20px; height: 20px; }
.select-all-trigger { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-control); color: var(--fleet-faint); }
.select-all-trigger:hover, .select-all-trigger[aria-expanded="true"] { background: var(--fleet-brand-soft); color: var(--fleet-brand); }
.menu-panel-narrow { width: 160px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--fleet-brand-soft); color: var(--fleet-brand); }
.chip-remove { color: var(--fleet-brand); text-decoration: none; opacity: 0.7; }
.chip-remove:hover { opacity: 1; }
.pill-link, .pill-button { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; color: var(--fleet-fg-2); font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; text-decoration: none; text-transform: lowercase; white-space: nowrap; }
.pill-link:hover, .pill-button:hover { background: var(--fleet-brand-soft); color: var(--fleet-brand); }
.pill-button-sm { padding: 2px 8px; font-size: 10px; color: var(--fleet-muted); }
.pill-button:disabled { opacity: 0.5; cursor: default; }
.pill-link, .pill-button { gap: 5px; }
.pill-link svg, .pill-button svg { flex: none; font-size: 1.15em; }

/* dropdowns */
.menu { position: relative; }
.menu-trigger { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1px solid var(--fleet-line-bright); border-radius: var(--radius-sm); color: var(--fleet-fg-2); }
.menu-trigger .truncate { max-width: 176px; }
.menu-trigger:hover, .menu-trigger[aria-expanded="true"] { border-color: var(--fleet-brand); color: var(--fleet-brand); }
.menu-panel { position: absolute; top: 100%; left: 0; z-index: 50; width: 256px; margin-top: 4px; padding: 8px; border: 1px solid var(--fleet-line); border-radius: var(--radius-card); background: var(--fleet-bg-1); color: var(--fleet-fg); box-shadow: var(--fleet-shadow-md); }
.menu-panel-right { left: auto; right: 0; width: 240px; }
/* An open dropdown is floated by shell.js (efax.float): top layer, placed from
   its trigger, so no list, card or dialog it sits in can clip it. The
   absolute rules here are what it falls back to before the script runs. */
.menu-panel, .account-menu, .settings-picker-options { overflow-y: auto; overscroll-behavior: contain; }
/* held to the room there is, a menu keeps its search box and scrolls its options */
.menu-panel { display: flex; flex-direction: column; }
.menu-panel > * { flex-shrink: 0; }
.menu-panel > .menu-options { flex-shrink: 1; min-height: 32px; }
.menu-search { height: 32px; margin-bottom: 4px; padding: 4px 8px; background: var(--fleet-bg-4); font-size: 13px; }
.menu-options { display: flex; flex-direction: column; gap: 2px; max-height: 288px; overflow-y: auto; }
.menu-empty, .menu-heading, .menu-note { margin: 0; padding: 8px 10px; }
.menu-heading { padding: 0 10px 4px; }
.menu-note { padding: 8px 10px 0; }
.option-row { display: flex; flex-shrink: 0; align-items: center; gap: 10px; width: 100%; min-height: 32px; padding: 6px 10px; border-radius: var(--radius-control); text-align: left; text-decoration: none; cursor: pointer; }
.option-row[hidden], .contact-row[hidden] { display: none; }
.option-row:hover { background: var(--fleet-brand-soft); }
.option-row.state-off:hover { background: var(--fleet-off-wash); }
.option-row-active { background: var(--fleet-selected); }
.option-row-label { flex: 1; min-width: 0; }
.option-row-active .option-row-label { font-weight: 700; color: var(--fleet-fg); }

/* the sidebar, the phone's drawer */
.inbox-menu { display: flex; flex-direction: column; flex-shrink: 0; width: 264px; height: 100%; border-right: 1px solid var(--fleet-line); background: var(--fleet-bg-1); color: var(--fleet-fg); }
.inbox-menu-head { display: flex; align-items: flex-start; gap: 12px; flex-shrink: 0; padding: 16px 20px; border-bottom: 1px solid var(--fleet-line); }
.inbox-menu-brand { flex: 1; min-width: 0; }
.inbox-wordmark { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.inbox-wordmark .logo { height: 20px; }
.inbox-menu-body { display: flex; flex: 1; flex-direction: column; gap: 16px; min-height: 0; overflow-y: auto; padding: 12px; }
.inbox-menu-group { display: flex; flex-direction: column; gap: 2px; padding-top: 12px; border-top: 1px solid var(--fleet-line); }
.inbox-menu-group-label { margin: 0; padding: 0 10px 4px; }
.inbox-mailboxes { display: flex; flex-direction: column; gap: 2px; }
.nav-row-badge { flex-shrink: 0; padding: 1px 7px; border-radius: 999px; background: var(--fleet-brand); color: var(--fleet-brand-ink); }
.nav-row[aria-current="page"] .nav-row-badge { background: var(--fleet-brand-ink); color: var(--fleet-brand); }
.inbox-contacts { flex-shrink: 0; padding: 8px 12px; border-top: 1px solid var(--fleet-line); }
.inbox-contacts-toggle { min-height: 0; padding: 8px 12px; }
.inbox-contacts-toggle[aria-expanded="true"] .nav-row-chevron { transform: rotate(-90deg); }
.inbox-menu-foot { flex-shrink: 0; padding: 12px; border-top: 1px solid var(--fleet-line); }
.inbox-menu-foot-row { display: flex; align-items: center; gap: 8px; padding: 0 8px 6px; }
.inbox-menu-foot-row .theme-toggle { min-height: 0; padding: 4px 8px; }

.scope-switch { flex-shrink: 0; padding: 12px; border: 1px solid var(--fleet-line); border-radius: var(--radius-card); background: var(--fleet-bg-1); }
.scope-switch-head { display: flex; align-items: center; gap: 12px; width: 100%; border-radius: var(--radius-control); text-align: left; }
.scope-switch-head[aria-expanded="true"] .nav-row-chevron { transform: rotate(90deg); }
.scope-switch-items { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }

.contacts { display: flex; flex-direction: column; gap: 4px; min-height: 0; margin-bottom: 4px; }
.contacts-list { display: flex; flex-direction: column; gap: 2px; max-height: 224px; min-height: 0; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.contact-row { display: flex; align-items: center; gap: 2px; border-radius: var(--radius-control); }
.contact-main { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; padding: 6px 10px; border-radius: var(--radius-control); color: var(--fleet-fg-2); text-align: left; text-decoration: none; }
.contact-main:hover { background: var(--fleet-wash); color: var(--fleet-fg-1); }
.contact-main[aria-pressed="true"] { background: var(--fleet-brand-soft); color: var(--fleet-brand); font-weight: 700; }
.contact-act { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 26px; height: 28px; border-radius: var(--radius-control); color: var(--fleet-faint); font-size: 15px; }
.contact-act:hover { background: var(--fleet-brand-soft); color: var(--fleet-brand); }
.contact-act-danger:hover { background: var(--fleet-off-wash); color: var(--fleet-off); }
.contact-add { min-height: 0; padding: 8px 12px; }

/* account */
.account { position: relative; }
.account-trigger { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 8px; border-radius: var(--radius-control); text-align: left; }
.account-trigger:hover, .account-trigger[aria-expanded="true"] { background: var(--fleet-brand-soft); }
.account-trigger[aria-expanded="true"] .nav-row-chevron { transform: rotate(-90deg); }
.account-trigger-compact { justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 999px; }
.avatar { display: flex; flex: none; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; background: var(--fleet-brand-soft); color: var(--fleet-brand); font-size: 11px; font-weight: 800; letter-spacing: 0.02em; }
.account-detail { color: var(--fleet-muted); font-size: 11px; line-height: 1.35; }
.account-scrim { display: none; }
.account-menu { position: absolute; z-index: 50; min-width: 216px; padding: 6px; border: 1px solid var(--fleet-line); border-radius: var(--radius-button); background: var(--fleet-bg); color: var(--fleet-fg); box-shadow: var(--fleet-shadow-lg); }
.account-menu-up { right: 0; bottom: 100%; left: 0; margin-bottom: 6px; }
.account-menu-down { top: 100%; right: 0; margin-top: 6px; }
.account-menu-head { padding: 6px 12px 10px; border-bottom: 1px solid var(--fleet-line); }
.account-menu-head p { margin: 0; }
.account-items { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.account-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 10px; border-radius: var(--radius-control); color: var(--fleet-fg-2); font-size: 13px; font-weight: 600; text-align: left; text-decoration: none; }
.account-item svg { font-size: 16px; }
.account-item:hover { background: var(--fleet-brand-soft); color: var(--fleet-brand); }
.account-item-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 2px 12px; }
.account-item-last { padding-top: 4px; border-top: 1px solid var(--fleet-line); }

/* the list */
.list-row { position: relative; display: grid; grid-template-columns: 26px 10px minmax(0, 1fr) auto 68px; gap: 12px; align-items: center; padding: 15px 12px; border-bottom: 1px solid var(--fleet-line); }
.list-row-read { background: var(--fleet-row-read); }
/* Unread stands out three ways, none of them colour alone: the brand bar on
   its leading edge, the heavier sender, and the dot with its word. */
.list-row[data-read-state="unread"] { background: var(--fleet-bg); box-shadow: inset 3px 0 0 var(--fleet-brand); }
.list-row[data-read-state="unread"] .list-row-primary { font-weight: 800; }
.list-row:has(input:checked) { background: var(--fleet-selected); box-shadow: inset 2px 0 0 var(--fleet-brand); }
.list-row-cursor { outline: 1px solid var(--fleet-line-bright); outline-offset: -1px; }
.list-row-check, .list-row-action { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; }
.list-row-action { justify-content: flex-end; }
.list-row-check input { width: 20px; height: 20px; }
.list-row-dot { display: flex; justify-content: center; }
.list-row-content { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.list-row-line { display: flex; align-items: center; gap: 12px; min-width: 0; }
.list-row-line + .list-row-line { gap: 8px; }
.list-row-primary { text-decoration: none; }
.list-row-primary::after { content: ""; position: absolute; inset: 0; }
.list-row-primary:focus-visible { box-shadow: none; }
.list-row-primary:focus-visible::after { outline: 2px solid var(--fleet-brand); outline-offset: -2px; }
.list-row .pill-button { position: relative; z-index: 1; flex: none; }
.list-row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; white-space: nowrap; }
.dot { flex: none; width: 6px; height: 6px; border-radius: 50%; }
.dot-unread { width: 10px; height: 10px; background: var(--fleet-brand); }
.dot-ok { background: var(--fleet-ok); }
.dot-warn { background: var(--fleet-warn); }
.dot-off { background: var(--fleet-off); }
.chip-tag { display: inline-flex; flex: none; padding: 2px 8px; border-radius: 999px; background: var(--fleet-brand-soft); color: var(--fleet-brand); }
.pill-urgent { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--fleet-warn-wash); color: var(--fleet-warn); text-transform: uppercase; letter-spacing: 0.04em; }
.status-pill { display: inline-flex; flex: none; align-items: center; padding: 3px 9px; border-radius: 999px; text-transform: lowercase; }
.status-ok { background: var(--fleet-ok-wash); color: var(--fleet-ok); }
.status-warn { background: var(--fleet-warn-wash); color: var(--fleet-warn); }
.status-off { background: var(--fleet-off-wash); color: var(--fleet-off); }
.tag { display: inline-flex; flex: none; align-items: center; padding: 2px 7px; border-radius: var(--radius-xs); background: var(--fleet-bg-4); color: var(--fleet-fg-1); font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.02em; }
.tag.truncate { flex: 0 1 auto; min-width: 0; display: block; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 64px 24px; text-align: center; }
.empty-state p { max-width: 384px; margin: 0; }

.inbox-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; flex-shrink: 0; padding: 8px 16px; border-top: 1px solid var(--fleet-line); background: var(--fleet-bg-1); }
.inbox-shortcuts { display: flex; flex-wrap: wrap; gap: 12px; }
.inbox-shortcuts b { color: var(--fleet-fg-1); }
.inbox-shortcut-open { min-height: 24px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.inbox-shortcut-open:hover, .inbox-shortcut-open:hover b { color: var(--fleet-brand); }
.inbox-pager { display: flex; align-items: center; gap: 8px; }
.pager-step { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; padding: 2px 8px; border-radius: var(--radius-control); color: var(--fleet-fg-2); text-decoration: none; }
.pager-step:hover { background: var(--fleet-brand-soft); color: var(--fleet-brand); }
.pager-step[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.inbox-phone-pager { display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 16px; }
.inbox-phone-pager p { margin: 0; text-align: center; }
.inbox-phone-pager-row { display: flex; gap: 8px; }
.inbox-phone-pager .pager-step { flex: 1; min-height: 44px; }

/* phone cards */
.card-row { border-bottom: 1px solid var(--fleet-line); }
.card-row-read { background: var(--fleet-row-read); }
.card-row[data-read-state="unread"] { box-shadow: inset 3px 0 0 var(--fleet-brand); }
.card { display: flex; flex-direction: column; gap: 7px; width: 100%; min-height: 44px; padding: 14px 16px; text-align: left; text-decoration: none; color: inherit; }
.card:focus-visible { box-shadow: inset 0 0 0 3px var(--fleet-focus-ring); }
.card-line { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; }
.card-primary { flex: 1; min-width: 0; }
.card-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.card-tags { gap: 6px; }

/* the phone's bar and sheets */
.inbox .mobile-bar { min-height: 72px; align-items: center; padding: 8px 8px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--fleet-line); }
.mobile-bar .mobile-slot { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 44px; min-height: 48px; padding: 0; border-radius: var(--radius-control); color: var(--fleet-fg-2); font-family: var(--font-sans); font-size: 11px; font-weight: 500; line-height: 1.2; text-decoration: none; }
.mobile-bar .mobile-slot[aria-current="page"] { color: var(--fleet-brand); font-weight: 700; }
.mobile-slot-icon { position: relative; display: flex; font-size: 24px; }
.mobile-slot-dot { position: absolute; top: -1px; right: -3px; width: 7px; height: 7px; border-radius: 999px; background: var(--fleet-brand); }
.compose-tile { display: flex; align-items: center; justify-content: center; width: 56px; height: 40px; border-radius: var(--radius-button); background: var(--fleet-brand); color: var(--fleet-brand-ink); font-size: 22px; box-shadow: var(--fleet-shadow-sm); }

.sheet { position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; max-height: calc(100dvh - 2rem); margin: 0; padding: 18px 16px max(20px, env(safe-area-inset-bottom)); border: 0; border-radius: var(--radius-card) var(--radius-card) 0 0; background: var(--fleet-bg); color: var(--fleet-fg); box-shadow: var(--fleet-shadow-xl); flex-direction: column; gap: 6px; overflow: hidden; }
.sheet[open] { display: flex; animation: sheet-in 0.24s var(--fleet-ease-standard); }
.sheet::backdrop, .dialog::backdrop { background: var(--fleet-scrim, rgba(7, 39, 49, 0.45)); backdrop-filter: blur(3px); }
.sheet-handle { flex: none; align-self: center; width: 40px; height: 4px; border-radius: 999px; background: var(--fleet-bg-4); }
.sheet-rows { display: flex; flex-direction: column; gap: 2px; padding: 6px 4px 2px; }
.sheet-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 44px; padding: 14px 12px; border-radius: var(--radius-sm); text-align: left; }
.sheet-row:hover { background: var(--fleet-wash); }
.sheet-tile { display: flex; flex: none; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-button); background: var(--fleet-brand-soft); color: var(--fleet-brand); font-size: 20px; }
.sheet-tile-solid { background: var(--fleet-brand); color: var(--fleet-brand-ink); }
.sheet-title { display: block; margin: 0; color: var(--fleet-fg); font-family: var(--font-sans); font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.sheet-sub { display: block; margin: 2px 0 0; color: var(--fleet-fg-2); font-family: var(--font-sans); font-size: 12.5px; line-height: 1.35; }
.sheet-head { padding: 6px 8px 4px; }
.sheet-body { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow-y: auto; padding: 0 4px 4px; }
.sheet .contacts-list { max-height: none; }
.sheet .contact-main, .sheet .contact-add, .sheet .menu-search { min-height: 44px; }
.sheet .contact-act { width: 44px; height: 44px; }
.sheet-cancel { flex: none; min-height: 44px; margin: 4px 4px 0; padding: 13px; border-radius: var(--radius-sm); background: var(--fleet-bg-4); color: var(--fleet-fg-1); font-size: 14px; text-align: center; }

/* the dialog (contact form) */
.dialog { width: calc(100% - 2rem); max-width: 512px; max-height: calc(100dvh - 2rem); margin: auto; padding: 0; border: 0; border-radius: var(--radius-card); background: var(--fleet-bg-2); color: var(--fleet-fg); box-shadow: var(--fleet-shadow-xl); flex-direction: column; overflow: hidden; }
.dialog[open] { display: flex; }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-shrink: 0; padding: 24px 24px 12px; }
.dialog-body { display: flex; flex: 1; flex-direction: column; gap: 16px; min-height: 0; overflow-y: auto; padding: 0 24px 16px; }
.dialog-body p { margin: 0; }
.dialog-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; flex-shrink: 0; padding: 16px 24px; border-top: 1px solid var(--fleet-line); }
.dialog-errors { margin: 0; padding-left: 18px; font-weight: 600; }
.dialog-errors[hidden] { display: none; }

/* the spotlight (Ctrl/⌘+K, partials/spotlight.html): a translucent panel at
   the centre over a dimmed, blurred page; the field, the chips, the results */
.spotlight { width: calc(100% - 2rem); max-width: 640px; max-height: min(560px, calc(100dvh - 2rem)); margin: auto; padding: 0; border: 1px solid var(--fleet-line); border-radius: var(--radius-xl); background: color-mix(in srgb, var(--fleet-bg) 80%, transparent); color: var(--fleet-fg); box-shadow: var(--fleet-shadow-xl); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); flex-direction: column; overflow: hidden; }
.spotlight[open] { display: flex; animation: spotlight-in var(--fleet-duration-base) var(--fleet-ease-emphasis); }
.spotlight::backdrop { background: var(--fleet-scrim, rgba(7, 39, 49, 0.45)); backdrop-filter: blur(2px); }
@keyframes spotlight-in { from { opacity: 0; transform: scale(0.97); } }
@media (prefers-reduced-motion: reduce) { .spotlight[open] { animation: none; } }
.spotlight-field { display: flex; flex: none; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--fleet-line); }
.spotlight-glass { display: flex; flex: none; color: var(--fleet-brand); font-size: 22px; }
.spotlight .spotlight-input { flex: 1; min-width: 0; height: 40px; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 20px; font-weight: 500; }
.spotlight .spotlight-input:focus { box-shadow: none; }
.spotlight-input::placeholder { color: var(--fleet-muted); }
.spotlight-kbd { flex: none; padding: 2px 6px; border: 1px solid var(--fleet-line-bright); border-radius: var(--radius-xs); color: var(--fleet-faint); font-family: var(--font-sans); font-size: 11px; }
.spotlight-chips { display: flex; flex: none; gap: 6px; padding: 10px 18px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--fleet-line); }
.spotlight-chips::-webkit-scrollbar { display: none; } /* still scrolls, by wheel, touch or Tab */
.spotlight-chip { flex: none; padding: 4px 12px; border: 1px solid var(--fleet-line-bright); border-radius: 999px; color: var(--fleet-fg-2); font-size: 12.5px; font-weight: 600; }
.spotlight-chip:hover { border-color: var(--fleet-brand); color: var(--fleet-brand); }
.spotlight-chip[aria-pressed="true"] { border-color: var(--fleet-brand); background: var(--fleet-brand); color: var(--fleet-brand-ink); }
.spotlight-results { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 8px 8px; }
.spotlight-results:empty { display: none; }
.spotlight-group-label { display: block; padding: 10px 10px 4px; text-transform: uppercase; letter-spacing: 0.06em; }
.spotlight-item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 10px; border-radius: var(--radius-md); color: var(--fleet-fg); text-decoration: none; }
.spotlight-item[aria-selected="true"] { background: var(--fleet-brand-soft); }
.spotlight-item-icon { display: flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--fleet-bg-4); color: var(--fleet-fg-2); font-size: 17px; }
.spotlight-item[aria-selected="true"] .spotlight-item-icon { background: var(--fleet-brand); color: var(--fleet-brand-ink); }
.spotlight-item-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.spotlight-item-title { font-size: 14.5px; font-weight: 600; }
.spotlight-item-sub { color: var(--fleet-muted); font-size: 12.5px; }
.spotlight-item-meta { flex: none; color: var(--fleet-faint); }
/* a contact's send button beside its row; its Shift+Enter shows while the row is highlighted */
.spotlight-row { display: flex; align-items: center; gap: 6px; }
.spotlight-row .spotlight-item { flex: 1; min-width: 0; }
.spotlight-send { flex: none; width: 36px; height: 36px; font-size: 17px; }
.spotlight-send-kbd { display: none; }
.spotlight-row:has([aria-selected="true"]) .spotlight-send-kbd { display: inline; }
.spotlight-empty { margin: 0; padding: 20px 18px; text-align: center; }
.brand-row .spotlight-open { margin-left: auto; }
@media (max-width: 767.98px) {
  .spotlight { max-height: calc(100dvh - 2rem); margin: 1rem auto auto; }
  .spotlight-chip { min-height: 36px; }
  .spotlight-open, .spotlight-send { width: 44px; height: 44px; font-size: 20px; }
}

@keyframes sheet-in { from { transform: translateY(110%); } }

@media (max-width: 767.98px) {
  .inbox { overflow-x: hidden; }
  .inbox-top { gap: 8px; padding: 8px 12px; border-bottom: 0; background: var(--fleet-bg-1); }
  .inbox-search { flex: 1; }
  .inbox-search-field { height: 44px; width: 100%; }
  .option-row, .scope-switch-head, .contact-main, .contact-add { min-height: 44px; }
  .menu-search { height: 44px; }
  .contact-act { width: 40px; height: 44px; }
  .contacts-list { max-height: none; }
  .account-item { min-height: 44px; }
  .account-scrim { display: block; position: fixed; inset: 0; z-index: 49; }
  .account-trigger[aria-expanded="true"] { position: relative; z-index: 50; }
  /* the drawer: out of sight and out of the tab order until opened */
  .inbox-menu { position: fixed; inset: 0 auto 0 0; z-index: 50; width: 300px; max-width: 88%; border-right: 0; background: var(--fleet-bg); box-shadow: var(--fleet-shadow-xl); visibility: hidden; transform: translateX(-100%); transition: transform 0.26s var(--fleet-ease-standard), visibility 0s linear 0.26s; }
  .inbox-menu[data-open] { visibility: visible; transform: none; transition: transform 0.26s var(--fleet-ease-standard), visibility 0s; }
  .inbox-scrim { position: fixed; inset: 0; z-index: 40; background: var(--fleet-scrim); backdrop-filter: blur(3px); }
  .inbox-scrim[hidden] { display: none; }
}
@media (min-width: 768px) {
  .sheet { inset: 0; width: 384px; height: fit-content; margin: auto; border-radius: var(--radius-card); }
  .inbox-mailboxes .nav-row { min-height: 0; padding: 7px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet[open], .inbox-menu, .inbox-menu[data-open] { animation: none; transition: none; }
}

/* Reader (01-inbox: The reader) ------------------------------------------- */

.reader { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--fleet-bg); color: var(--fleet-fg); overflow-y: auto; overflow-x: hidden; }
.reader-head { display: flex; align-items: center; gap: 12px; flex-shrink: 0; padding: 6px 12px; background: var(--fleet-bg-1); border-bottom: 1px solid var(--fleet-line); }
.reader-back { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 10px 0 4px; border-radius: 999px; color: var(--fleet-fg); font-size: 13.5px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.reader-back:hover { color: var(--fleet-brand); background: var(--fleet-wash); }
.reader-back svg { font-size: 18px; }
.reader-title h1 { font-size: 13.5px; font-weight: 500; }
.reader-meta { margin: 2px 0 0; line-height: 1.4; }
.reader-summary { font-size: 11.5px; font-weight: 400; letter-spacing: normal; }
.reader-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.reader-panes { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.reader-pane { display: flex; flex-direction: column; min-width: 0; }
.reader-pane-review { flex: 1; border-top: 1px solid var(--fleet-line); }

.reader-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; flex-shrink: 0; min-height: 36px; padding: 2px 12px; background: var(--fleet-bg); border-bottom: 1px solid var(--fleet-line); }
.reader-page-labels { display: flex; align-items: center; min-height: 32px; min-width: 0; }
.reader-page-label { font-weight: 700; }
.reader-toggles { order: 3; display: flex; align-items: center; gap: 2px; width: 100%; overflow-x: auto; }
.reader-toggle { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; height: 28px; padding: 0 6px; border-radius: var(--radius-control); color: var(--fleet-fg-2); font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.02em; }
.reader-toggle:hover { background: var(--fleet-brand-soft); }
.reader-toggle-word { color: var(--fleet-faint); }
.reader-toggle[aria-pressed="true"], .reader-toggle[aria-pressed="true"] .reader-toggle-word { color: var(--fleet-brand); }
.reader-search-here { margin-left: auto; }
.reader-search-here[hidden] { display: none; }

/* the search in the head: a field, and under it the matches */
.reader-search { position: relative; flex: 1 1 320px; min-width: 0; max-width: 520px; }
.reader-search p { margin: 0; }
.reader-search-box { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 6px 0 10px; border: 1px solid var(--fleet-line-bright); border-radius: var(--radius-control); background: var(--fleet-bg); color: var(--fleet-fg-2); }
.reader-search-box:focus-within { border-color: var(--fleet-brand); box-shadow: var(--fleet-focus-field); }
.reader-search-box > svg { flex-shrink: 0; font-size: 16px; }
.reader-search-field { flex: 1; min-width: 0; height: 32px; padding: 0; border: 0; background: none; box-shadow: none; font-size: 13.5px; }
.reader-search-field:focus { outline: none; box-shadow: none; }
.reader-search-field::-webkit-search-cancel-button { cursor: pointer; }
.reader-search-pending, .reader-search-nav { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
.reader-search-pending[hidden], .reader-search-nav[hidden], .reader-search-key[hidden] { display: none; }
.reader-search-nav [data-search-position] { padding: 0 4px; color: var(--fleet-brand); font-weight: 700; white-space: nowrap; }
.reader-search-nav .icon-button { width: 28px; height: 28px; }
.reader-search-key { flex-shrink: 0; padding: 0 6px; border: 1px solid var(--fleet-line-bright); border-bottom-width: 2px; border-radius: var(--radius-xs); }
.reader-search-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--fleet-line); border-radius: var(--radius-card, 12px); background: var(--fleet-card); box-shadow: var(--fleet-shadow-lg); }
.reader-search-panel[hidden] { display: none; }
.reader-search-note { padding: 10px 14px; }
.reader-search-note[hidden] { display: none; }
.reader-search-results { display: flex; flex-direction: column; gap: 2px; padding: 0 6px 6px; }
.reader-search-results:empty { display: none; }
.reader-search-stale { opacity: 0.5; }
.reader-search-option { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 44px; padding: 6px 8px; border-radius: var(--radius-control); cursor: pointer; }
.reader-search-option[aria-selected="true"] { background: var(--fleet-selected); box-shadow: inset 0 0 0 1px var(--fleet-brand-soft-hover); }
.reader-search-pagenum { display: flex; flex-direction: column; align-items: center; padding: 3px 0; border-radius: var(--radius-xs); background: var(--fleet-bg-4); font-weight: 800; line-height: 1.1; }
.reader-search-text { display: flex; flex-direction: column; min-width: 0; font-size: 13.5px; }
.reader-search-tag { padding: 1px 8px; border-radius: 999px; background: var(--fleet-brand); color: var(--fleet-brand-ink); }
.reader-search-tag[hidden] { display: none; }
.reader-search-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 10px 6px 14px; border-top: 1px solid var(--fleet-line); background: var(--fleet-bg-1); }
.reader-search-foot[hidden], .reader-search-pager[hidden], .reader-search-chrome[hidden] { display: none; }
.reader-search-pager { display: inline-flex; align-items: center; gap: 4px; }
.reader-search-pager .icon-button { width: 28px; height: 28px; }
.reader-search-chrome { color: var(--fleet-link); text-decoration: underline; text-underline-offset: 2px; }
.reader-search-hint { margin-left: auto; }
mark.reader-hit { border-radius: 2px; background: var(--teal-200); color: var(--teal-950); font-weight: 700; }

.reader-stage { background: var(--fleet-bg-1); }
.reader-page { display: flex; flex-direction: column; }
.reader-page[hidden] { display: none; }
.reader-page-failed { margin: 0; padding: 8px 16px; border-bottom: 1px solid var(--fleet-line); background: var(--fleet-bg); }
.reader-page-frame { padding: 12px; }
.reader-stage-page { position: relative; width: 100%; max-width: 720px; margin: 0 auto; }
.reader-image { display: block; width: 100%; height: auto; border-radius: var(--radius-control); user-select: none; }
.reader-no-image { display: flex; align-items: center; justify-content: center; aspect-ratio: 17 / 22; width: 100%; border: 1px solid var(--fleet-line); border-radius: var(--radius-control); background: var(--fleet-bg-2); }
.reader-regions { position: absolute; inset: 0; pointer-events: none; }
.reader-regions[hidden] { display: none; }
/* literal teal and white, not tokens: the scan is white in both themes */
.reader-region { position: absolute; pointer-events: auto; cursor: pointer; border: 1px solid rgba(13, 94, 113, 0.45); border-radius: 1px; background: rgba(17, 117, 140, 0.04); }
.reader-region:hover { background: rgba(17, 117, 140, 0.12); }
.reader-region[aria-pressed="true"] { z-index: 10; border: 2px solid #0d5e71; background: rgba(17, 117, 140, 0.14); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9); }
.reader-region[hidden] { display: none; }
/* with Regions off only a page's matches show */
.reader-regions[data-only-matches] .reader-region:not([data-match]) { display: none; }
.reader-region[data-match="hit"] { border-color: rgba(13, 94, 113, 0.75); background: rgba(127, 193, 204, 0.22); }
.reader-region[data-match="current"] { z-index: 11; border: 2px solid #0f6a80; background: rgba(17, 117, 140, 0.1); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9); }
.reader-region[data-match-label]:not([data-match-label=""])::after { content: attr(data-match-label); position: absolute; bottom: 100%; left: -2px; margin-bottom: 2px; padding: 1px 6px; border-radius: 4px; background: #0f6a80; color: #fff; font-family: var(--font-mono); font-size: 10px; font-weight: 700; white-space: nowrap; }
.reader-region-pulse { animation: reader-land 0.9s ease-out 2; }
@keyframes reader-land { from { box-shadow: 0 0 0 0 rgba(15, 106, 128, 0.45); } to { box-shadow: 0 0 0 10px rgba(15, 106, 128, 0); } }
@media (prefers-reduced-motion: reduce) { .reader-region-pulse { animation: none; } }
/* a table row's band: an estimate, OCR gives no row coordinates */
.reader-band { position: absolute; z-index: 12; pointer-events: none; border: 2px dashed #0f6a80; border-radius: 2px; background: rgba(127, 193, 204, 0.18); }
.reader-band[hidden] { display: none; }

.reader-strip-row { flex-shrink: 0; padding: 8px 12px; border-top: 1px solid var(--fleet-line); background: var(--fleet-bg-1); }
.reader-strip { display: flex; align-items: center; gap: 12px; }
.reader-thumbs { display: flex; flex: 1; gap: 8px; min-width: 0; margin: 0; padding: 2px; overflow-x: auto; list-style: none; }
.reader-thumbs li { flex-shrink: 0; }
.reader-thumbs li[hidden] { display: none; }
.reader-thumb { position: relative; display: block; width: 36px; height: 47px; overflow: hidden; border-radius: var(--radius-xs); background: var(--fleet-bg-3); }
.reader-thumb:hover { background: var(--fleet-bg-2); }
.reader-thumb[aria-current="page"] { box-shadow: 0 0 0 2px var(--fleet-brand); }
.reader-thumb-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; user-select: none; }
.reader-thumb-dim { opacity: 0.5; }
.reader-thumb-number { position: absolute; inset: auto 0 0 0; background: color-mix(in srgb, var(--fleet-bg-1) 85%, transparent); color: var(--fleet-muted); font-family: var(--font-mono); font-size: 10px; line-height: 14px; text-align: center; }
.reader-thumb[aria-current="page"] .reader-thumb-number { color: var(--fleet-fg); font-weight: 700; }
.reader-strip-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; flex-shrink: 0; }

.reader-tabs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex-shrink: 0; padding: 8px 16px; border-bottom: 1px solid var(--fleet-line); }
.reader-tabs { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--radius-control); background: var(--fleet-bg-2); }
.reader-tab { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-control); color: var(--fleet-fg-2); font-size: 13.5px; font-weight: 500; }
.reader-tab[aria-selected="true"] { background: var(--fleet-bg); color: var(--fleet-brand); box-shadow: var(--fleet-shadow-xs); }
.reader-selection { margin-left: auto; }
.reader-panel { padding: 12px 16px; }
.reader-panel[hidden] { display: none; }
.reader-transcript { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.reader-blocks { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0; list-style: none; }
.reader-blocks[hidden], .reader-block[hidden], .reader-blocks-empty[hidden] { display: none; }
.reader-block { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border-left: 2px solid transparent; cursor: pointer; }
.reader-block:hover { background: var(--fleet-bg-2); }
.reader-block[data-state="matched"] { border-left-color: var(--fleet-warn); background: var(--fleet-warn-wash); }
.reader-block[data-state="selected"] { border-left-color: var(--fleet-brand); background: var(--fleet-selected); }
.reader-block[data-landed] { border-left-color: var(--fleet-brand); box-shadow: inset 0 0 0 2px var(--fleet-brand); }
.reader-block[data-landed] mark { border-radius: 2px; background: var(--fleet-brand); color: var(--fleet-brand-ink); }
.reader-block-name { display: flex; align-items: baseline; gap: 8px; align-self: flex-start; color: var(--fleet-muted); }
.reader-block-name[aria-pressed="true"] { color: var(--fleet-fg); }
.reader-block-html { min-width: 0; overflow-x: auto; overflow-wrap: anywhere; }
.reader-block-html p { margin: 0 0 4px; }
.reader-block-html table { border-collapse: collapse; }
.reader-block-html td, .reader-block-html th { border: 1px solid var(--fleet-line); padding: 2px 6px; }
.reader-image-note { font-style: italic; }
.reader-blocks-empty { margin: 0; }

/* pdf.js, for a fax without pages */
.pdf-viewer { display: flex; flex-direction: column; width: 100%; height: 75vh; min-height: 0; }
.pdf-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0; padding: 8px 12px; border-bottom: 1px solid var(--fleet-line); }
.pdf-toolbar-group { display: flex; align-items: center; gap: 8px; }
.pdf-page-input { width: 64px; padding: 4px 8px; background: var(--fleet-bg-4); }
.pdf-tool { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 8px; border: 1px solid var(--fleet-line-bright); border-radius: var(--radius-control); color: var(--fleet-fg-2); text-decoration: none; }
.pdf-tool:hover { background: var(--fleet-brand-soft); border-color: var(--fleet-brand); color: var(--fleet-brand); }
.pdf-error { margin: 40px 0 0; text-align: center; }
.pdf-error[hidden] { display: none; }
.pdf-pages { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 16px; padding: 16px; overflow-y: auto; }
.pdf-pages[hidden] { display: none; }
.pdf-canvas { border: 1px solid var(--fleet-line); box-shadow: var(--fleet-shadow-lg); }

/* the view-schema panel */
.vs-panel, .vs-state { display: flex; flex-direction: column; gap: 20px; }
.vs-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--fleet-line); }
.vs-bar [hidden] { display: none; }
.vs-unsaved { padding: 4px 10px; border-radius: 999px; background: var(--fleet-warn-wash); color: var(--fleet-warn); }
.vs-bar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.vs-state-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.vs-tabs-row { padding-bottom: 6px; border-bottom: 1px solid var(--fleet-line); overflow-x: auto; }
.vs-tabs { display: inline-flex; align-items: center; gap: 4px; height: 32px; }
.vs-tab { display: inline-flex; align-items: center; flex: none; height: 100%; padding: 0 12px; border-radius: var(--radius-control); color: var(--fleet-fg-2); }
.vs-tab[aria-selected="true"] { background: var(--fleet-brand-soft); color: var(--fleet-brand); }
.vs-tabpanel { display: flex; flex-direction: column; gap: 20px; }
.vs-tabpanel[hidden] { display: none; }
.vs-empty { margin: 0; padding: 48px 0; text-align: center; }
.vs-row { display: grid; grid-template-columns: 1fr; gap: 14px; }
.vs-span { grid-column: 1 / -1; }
.vs-stack { display: flex; flex-direction: column; gap: 16px; }
.vs-grid { display: flex; flex-direction: column; gap: 14px; }
.vs-header { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.vs-header-title { font-size: 14px; font-weight: 500; }
.vs-header-aside { flex-shrink: 0; margin-left: auto; }
.vs-card { display: flex; flex-direction: column; gap: 16px; padding: 16px; border-radius: var(--radius-card); background: var(--fleet-bg-2); }
.vs-card p { margin: 0; }
.vs-card-empty { align-items: center; padding: 24px 16px; }
.vs-array { display: flex; flex-direction: column; gap: 12px; }
.vs-entry { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid var(--fleet-line); }
.vs-entry:first-child { padding-top: 0; border-top: 0; }
.vs-entry-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vs-unknown { padding: 16px; border: 1px dashed var(--fleet-line-bright); border-radius: var(--radius-card); }
.vs-unknown p { margin: 0; }
.vs-nested-table { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vs-table-scroll { overflow-x: auto; border-radius: var(--radius-control); background: var(--fleet-bg-1); }
.vs-table { width: 100%; border-collapse: collapse; }
.vs-table thead tr { background: var(--fleet-bg-3); }
.vs-table th { height: 36px; min-width: 200px; padding: 0 8px; text-align: left; vertical-align: middle; font-weight: 700; }
.vs-table td { min-width: 200px; padding: 8px; vertical-align: top; border-top: 1px solid var(--fleet-line); }
.vs-table td.vs-table-empty { text-align: center; }
.vs-lines { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vs-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.vs-line-text { min-width: 0; overflow-wrap: anywhere; }
.vs-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vs-control { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vs-control-box { position: relative; }
.vs-input { height: 36px; padding: 0 12px; background: var(--fleet-bg-4); font-size: 13px; }
.vs-input-dense { height: 32px; }
.vs-textarea { height: auto; min-height: 72px; padding: 8px 12px; resize: vertical; }
.vs-checkbox { display: flex; align-items: center; gap: 10px; width: fit-content; height: 36px; padding: 0 12px; border-radius: var(--radius-control); background: var(--fleet-bg-4); }
.vs-edited-bar { position: absolute; inset: 0 auto 0 0; width: 2px; border-radius: 1px; background: var(--fleet-fg); pointer-events: none; }
.vs-edited-bar[hidden], .vs-model-said[hidden], [data-invalid-json][hidden] { display: none; }
.vs-model-said { overflow-wrap: anywhere; }
.vs-model-said-text { font-family: var(--font-sans); font-weight: 400; white-space: pre-line; }
/* field → source: read mode shows each value as a way to its source, edit mode the inputs */
.vs-panel[data-mode="read"] .vs-control-box, .vs-panel[data-mode="read"] [data-model-said], .vs-panel[data-mode="read"] [data-invalid-json], .vs-panel[data-mode="read"] .vs-bar .vs-mode-edit { display: none; }
.vs-panel[data-mode="edit"] .vs-value, .vs-panel[data-mode="edit"] [data-extraction-edit] { display: none; }
.vs-value { display: inline-flex; align-items: baseline; gap: 6px; min-height: 28px; max-width: 100%; padding: 4px 0; border-radius: var(--radius-xs); color: var(--fleet-fg); font-size: 13px; line-height: 1.4; text-align: left; white-space: pre-line; overflow-wrap: anywhere; }
button.vs-value { cursor: pointer; color: var(--fleet-brand); text-decoration: underline; text-decoration-color: var(--fleet-accent); text-underline-offset: 3px; }
button.vs-value::after { content: "⌖"; flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; color: var(--fleet-muted); text-decoration: none; }
button.vs-value:hover, button.vs-value:focus-visible { background: var(--fleet-brand-soft); color: var(--fleet-brand-hover); text-decoration-color: currentColor; }
.vs-value[data-source-state="none"]:hover { color: var(--fleet-fg-2); }
.vs-value[data-source-state="edited"]::after { content: "✎ edited"; flex-shrink: 0; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--fleet-warn); }

@media (min-width: 640px) {
  .reader-toggles { order: 0; width: auto; margin-left: auto; }
  .reader-search-here { margin-left: 0; }
}
@media (min-width: 768px) {
  .reader-head { padding: 6px 28px; }
  .reader-toolbar { padding: 2px 20px; }
  .reader-strip-row { padding: 8px 20px; }
  .reader-panel { padding: 16px 20px; }
  .vs-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vs-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .reader { overflow: hidden; }
  .reader-panes { flex-direction: row; }
  .reader-pane-pages { width: 52%; flex-shrink: 0; min-height: 0; }
  .reader-pane-review { min-height: 0; border-top: 0; border-left: 1px solid var(--fleet-line); }
  .reader-stage { flex: 1; min-height: 0; overflow: auto; }
  .reader-panel { min-height: 0; overflow: auto; }
  .pdf-viewer { flex: 1; height: auto; }
}
@media (max-width: 767.98px) {
  .reader-head { flex-wrap: wrap; }
  .reader-title { flex-basis: 100%; order: 3; }
  /* in the first row, between the way back and the actions; the matches
     open across the whole head, as the field alone is too narrow for them */
  .reader-head { position: relative; }
  .reader-search { position: static; flex: 1 1 0; }
  .reader-search-panel { left: 8px; right: 8px; top: calc(100% + 4px); }
  .reader-search-hint, .reader-search-key { display: none; }
}

/* the phone reader (01-inbox: Phone reader), over the inbox */
[data-phone-reader][hidden] { display: none; }
.phone-reader { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; background: var(--fleet-bg); color: var(--fleet-fg); overflow: hidden; }
.phone-reader-head { display: flex; align-items: center; gap: 4px; flex-shrink: 0; padding: 6px 8px; background: var(--fleet-bg-1); }
.phone-reader-back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px 0 4px; border-radius: 999px; color: var(--fleet-fg); }
.phone-reader-back svg { font-size: 18px; flex-shrink: 0; }
.phone-reader-back:hover { color: var(--fleet-brand); }
.phone-reader-body { display: flex; flex: 1; flex-direction: column; gap: 18px; min-height: 0; padding: 18px 16px 24px; overflow-x: hidden; overflow-y: auto; }
.phone-reader-body p { margin: 0; }
.phone-reader-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.phone-reader-tagline { display: flex; }
.phone-reader-title { font-size: 19px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.phone-reader-save { margin-top: 4px; min-height: 44px; }
.phone-reader-summary { overflow-wrap: anywhere; }
.phone-facts { display: flex; flex-direction: column; gap: 10px; margin: 0; padding-top: 18px; border-top: 1px solid var(--fleet-line); font-size: 12px; }
.phone-section .phone-facts { padding-top: 0; border-top: 0; }
.phone-fact { display: flex; align-items: baseline; gap: 12px; }
.phone-fact-label { flex-shrink: 0; width: 118px; font-weight: 700; color: var(--fleet-muted); overflow-wrap: anywhere; }
.phone-fact-value { flex: 1; min-width: 0; margin: 0; color: var(--fleet-fg); overflow-wrap: anywhere; }
.phone-section { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--fleet-line); }
.phone-page { display: flex; justify-content: center; border: 1px solid var(--fleet-line); border-radius: var(--radius-control); background: var(--fleet-bg-1); overflow: hidden; }
.phone-page-image { display: block; width: 100%; max-width: 360px; height: auto; }
.phone-page-image[hidden] { display: none; }
.phone-page-nav { display: flex; align-items: center; gap: 8px; }
.phone-page-step:disabled { opacity: 0.4; }
.phone-reader-foot { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); background: var(--fleet-bg-1); }
.phone-reader-foot .button { min-height: 44px; font-size: 11.5px; text-decoration: none; }
.phone-reader-open { flex: 2; }

/* Prompt editor (04-pipeline: LLM prompt editor) -------------------------- */

.prompts { display: flex; flex-direction: column; gap: 16px; max-width: 880px; }
.prompts-list { display: flex; flex-direction: column; gap: 12px; }
.prompt-card { border: 1px solid var(--fleet-line); border-radius: var(--radius-card); background: var(--fleet-bg-2); }
.prompt-card p { margin: 0; }
.prompt-template { margin: 0; padding: 14px 16px; border: 1px solid var(--fleet-line); border-radius: var(--radius-card); background: var(--fleet-bg-1); white-space: pre-wrap; overflow-wrap: anywhere; }
.prompt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.prompt-destroy { display: inline; margin-left: 8px; }
.prompt-textarea { width: 100%; min-height: 320px; font-family: inherit; font-size: inherit; resize: vertical; }

/* Send a Fax (02-outbound: UI) ---------------------------------------------- */

.send-dialog { max-width: 64rem; background: var(--fleet-bg); }
.send-head { align-items: flex-start; }
.send-head .text-prose { margin: 2px 0 0; }
.send-steps { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.send-step { display: flex; align-items: center; gap: 6px; color: var(--fleet-muted); font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.send-step-disc { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid var(--fleet-line-bright); border-radius: 999px; font-size: 10px; }
.send-step[aria-current="step"] { color: var(--fleet-fg); }
.send-step[aria-current="step"] .send-step-disc { background: var(--fleet-brand); border-color: var(--fleet-brand); color: var(--fleet-brand-ink); }
.send-step-done .send-step-disc { background: var(--fleet-brand-soft); border-color: transparent; color: var(--fleet-brand); }
.send-step-rule { flex: none; width: 24px; height: 1px; background: var(--fleet-line-bright); }
.send-body { gap: 20px; padding-top: 12px; }
.send-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.send-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px; min-height: 540px; }
.send-label { font-weight: 600; font-size: 13px; color: var(--fleet-fg-1); }
.send-to-field { display: flex; flex-direction: column; gap: 6px; width: 100%; min-height: 36px; padding: 6px 10px; border: 1px solid var(--fleet-line-bright); border-radius: var(--radius-input); background: var(--fleet-bg); color: var(--fleet-fg); }
.send-to-field:focus-within { border-color: var(--fleet-brand); }
.send-to-field .send-chips { max-height: 96px; overflow-y: auto; } /* about three rows of chips, then they scroll; the input below stays put */
.send-to-input { width: 100%; min-height: 24px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--fleet-fg); }
.send-results { max-height: 256px; overflow-y: auto; border: 1px solid var(--fleet-line); border-radius: var(--radius-card); background: var(--fleet-bg-1); box-shadow: var(--fleet-shadow-md); }
.send-results[hidden] { display: none; }
.send-option[aria-selected="true"] { background: var(--fleet-brand-soft); }
.send-group { border-bottom: 1px solid var(--fleet-line); }
.send-group:last-child { border-bottom: 0; }
.send-group-title { margin: 0; padding: 6px 10px; background: var(--fleet-bg-3); font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fleet-muted); }
.send-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 10px; border-radius: var(--radius-control); color: var(--fleet-fg); text-align: left; cursor: pointer; }
.send-option:hover { background: var(--fleet-brand-soft); }
.send-option-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.send-option-sub { color: var(--fleet-muted); }
.send-chips, .send-files { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.send-chips:empty, .send-files:empty { display: none; }
.send-files { flex-direction: column; flex-wrap: nowrap; }
.send-file { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 8px; border: 1px solid var(--fleet-line); border-radius: var(--radius-control); }
.send-file-name { flex: 1; min-width: 0; }
.send-select { width: 100%; min-height: 36px; padding: 6px 10px; border: 1px solid var(--fleet-line-bright); border-radius: var(--radius-input); background: var(--fleet-bg); color: var(--fleet-fg); }
.send-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 88px; padding: 16px; border: 1px dashed var(--fleet-line-strong); border-radius: var(--radius-card); background: var(--fleet-bg-1); text-align: center; cursor: pointer; }
.send-drop:hover, .send-drop[data-dragging] { border-color: var(--fleet-brand); background: var(--fleet-brand-soft); }
.send-card { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--fleet-line); border-radius: var(--radius-card); background: var(--fleet-bg); }
.send-card > .text-mono-label { margin: 0; color: var(--fleet-muted); text-transform: uppercase; }
.send-preview { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 240px; padding: 12px; border: 1px solid var(--fleet-line); border-radius: var(--radius-card); background: var(--fleet-bg-3); overflow-y: auto; }
.send-preview img { width: 100%; max-width: 612px; height: auto; background: #fff; box-shadow: var(--fleet-shadow-sm); }
.send-foot .button { display: inline-flex; align-items: center; gap: 6px; }
.send-foot .button:disabled { opacity: 0.5; cursor: default; }
[data-send-error][hidden], [data-send-refused][hidden], [data-send-review-note][hidden], [data-send-step][hidden], [data-send-back][hidden], [data-send-next][hidden], [data-send-submit][hidden] { display: none; }
@media (max-width: 767.98px) {
  .send-dialog { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
  .send-head { padding: 16px 16px 8px; }
  .send-body { padding: 0 16px 16px; }
  .send-foot { padding: 12px 16px max(12px, env(safe-area-inset-bottom)); }
  .send-columns { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .send-steps { flex-wrap: wrap; }
  .send-step-rule { width: 12px; }
  .send-to-field .send-chips { max-height: 168px; }
  .send-dialog .button, .send-dialog .icon-button, .send-to-field, .send-select, .send-option, .send-file, .send-dialog input, .send-chip-remove, .send-file-remove { min-height: 44px; }
  .send-dialog .icon-button, .send-chip-remove, .send-file-remove { min-width: 44px; }
}

/* Settings (07-org-settings: UI) --------------------------------------------- */

.settings-page { display: flex; flex-direction: column; gap: 16px; max-width: 1120px; }
.settings-head { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.settings-head-wrap { flex-wrap: wrap; }
.settings-head .text-display { margin: 0; }
.account-form { max-width: 420px; }
.settings-head .button, .settings-toolbar .button { gap: 6px; }
.settings-title-link { color: inherit; text-decoration: none; }
.settings-error { margin: 0; }
.settings-error[hidden] { display: none; }
.settings-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.settings-search { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 320px; }
.settings-search-icon { display: flex; color: var(--fleet-faint); }
.settings-input { width: 100%; min-height: 36px; padding: 6px 10px; border: 1px solid var(--fleet-line-bright); border-radius: var(--radius-input); background: var(--fleet-bg); color: var(--fleet-fg); font: inherit; font-size: 13px; }
.settings-select { min-height: 36px; padding: 6px 10px; border: 1px solid var(--fleet-line-bright); border-radius: var(--radius-input); background: var(--fleet-bg); color: var(--fleet-fg); font: inherit; font-size: 13px; }
.settings-select.touch { min-height: 44px; }
.settings-month { display: flex; align-items: center; gap: 8px; }

.settings-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--fleet-line); border-radius: var(--radius-card); background: var(--fleet-bg-2); overflow: hidden; }
.settings-row { border-bottom: 1px solid var(--fleet-line); }
.settings-row:target { background: var(--fleet-brand-soft); }
.settings-row:last-of-type { border-bottom: 0; }
.settings-row[hidden] { display: none; }
.settings-row-main { display: flex; align-items: center; gap: 4px; padding: 4px 8px 4px 4px; }
.settings-row-toggle { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; min-height: 44px; padding: 8px 12px; border-radius: var(--radius-control); color: var(--fleet-fg); text-align: left; font-size: 14px; }
button.settings-row-toggle:hover { background: var(--fleet-wash); }
.settings-row-toggle[aria-expanded="true"] .nav-row-chevron { transform: rotate(90deg); }
.settings-row-icon { display: flex; flex: none; color: var(--fleet-fg-2); font-size: 18px; }
.settings-row-name { flex: 0 1 auto; min-width: 0; font-weight: 600; }
.settings-row-sub { flex: none; }
.settings-row-details { display: flex; flex-direction: column; gap: 6px; padding: 4px 16px 12px 46px; }
.settings-row-details[hidden] { display: none; }
.settings-row-details p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; }
.settings-list .empty-state[hidden] { display: none; }

.settings-dialog > form { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; }
.settings-dialog-wide { max-width: 672px; }
.settings-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.settings-checklist { margin: 0; padding: 0; border: 0; }
.settings-checklist legend { padding: 0; margin-bottom: 6px; font-weight: 600; font-size: 13px; color: var(--fleet-fg-1); }
.settings-checklist-rows { display: flex; flex-direction: column; gap: 2px; max-height: 10rem; overflow-y: auto; padding: 4px; border: 1px solid var(--fleet-line); border-radius: var(--radius-control); }
.settings-picker-label { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; color: var(--fleet-fg-1); }
.settings-picker-box { position: relative; }
.settings-picker-options { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; display: flex; flex-direction: column; gap: 2px; max-height: 12rem; margin-top: 4px; padding: 4px; overflow-y: auto; border: 1px solid var(--fleet-line); border-radius: var(--radius-control); background: var(--fleet-bg-1); box-shadow: var(--fleet-shadow-md); }
.settings-picker-options[hidden], .settings-picker-options [hidden] { display: none; }
.settings-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.settings-chips:empty { display: none; }
.settings-chip { font-size: 12px; }
.settings-chip .chip-remove { min-width: 24px; min-height: 24px; }

.settings-multiselect { display: flex; flex-direction: column; gap: 8px; }
.settings-multiselect-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.settings-multiselect-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--fleet-line-bright); border-radius: var(--radius-input); color: var(--fleet-fg-1); font-size: 13px; font-weight: 600; text-align: left; }
.settings-multiselect-toggle[aria-expanded="true"] .nav-row-chevron { transform: rotate(90deg); }
.settings-multiselect-panel { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: var(--radius-control); }
.settings-multiselect-panel[hidden] { display: none; }
.settings-multiselect-rows { display: flex; flex-direction: column; gap: 2px; max-height: 12rem; overflow-y: auto; }
.settings-multiselect-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.settings-option-disabled { opacity: 0.5; cursor: default; }
.settings-option-disabled:hover { background: transparent; }

.settings-users .settings-user { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.settings-users .list-row-check input { width: 20px; height: 20px; }
.settings-avatar { width: 36px; height: 36px; font-size: 12px; }
.settings-user-main { display: flex; flex-direction: column; gap: 4px; }
.settings-user-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.settings-user-access { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.settings-access-toggle { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 2px 6px; border-radius: var(--radius-control); color: var(--fleet-fg-2); }
.settings-access-toggle:hover { background: var(--fleet-wash); }
.settings-access-toggle[aria-expanded="true"] .nav-row-chevron { transform: rotate(90deg); }
.settings-user .settings-row-details { padding: 4px 0 0; }
.settings-actions { width: 192px; }
.settings-actions .option-row { min-height: 36px; }
.settings-pager { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--fleet-line); }
.settings-pager .button[disabled] { opacity: 0.5; }

.settings-stats { display: grid; grid-template-columns: 1fr; gap: 1px; border: 1px solid var(--fleet-line); border-radius: var(--radius-card); background: var(--fleet-line); overflow: hidden; }
.settings-stat { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--fleet-bg-2); }
.settings-stat-big { font-family: var(--font-sans); font-size: 40px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.settings-stat-value { font-family: var(--font-sans); font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.settings-table-wrap { overflow-x: auto; border: 1px solid var(--fleet-line); border-radius: var(--radius-card); background: var(--fleet-bg-2); }
.settings-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.settings-table th { padding: 10px 12px; border-bottom: 1px solid var(--fleet-line); color: var(--fleet-muted); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-align: left; text-transform: lowercase; }
.settings-table td { padding: 10px 12px; border-bottom: 1px solid var(--fleet-line); }
.settings-table .num { text-align: right; }
.settings-idle-cell { padding: 0 !important; }
.settings-idle-toggle { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px 12px; color: var(--fleet-fg); text-align: left; }
.settings-idle-toggle[aria-expanded="true"] .nav-row-chevron { transform: rotate(90deg); }
.settings-idle-rows[hidden] { display: none; }
.settings-indent { padding-left: 40px !important; }

@media (min-width: 640px) { .settings-stats { grid-template-columns: 1fr 1fr; } .settings-stat:first-child { grid-column: 1 / -1; } }
@media (min-width: 1280px) { .settings-stats { grid-template-columns: repeat(5, 1fr); } .settings-stat:first-child { grid-column: auto; } }
@media (max-width: 767.98px) {
  .settings-page { padding: 12px 16px 16px; }
  .settings-head .button, .settings-toolbar .button { width: 100%; min-height: 44px; }
  .settings-head { flex-wrap: wrap; }
  .settings-toolbar { flex-direction: column; align-items: stretch; }
  .settings-search { max-width: none; }
  .settings-columns { grid-template-columns: 1fr; }
  .settings-input, .settings-select, .settings-multiselect-toggle, .settings-pager .button, .settings-chip .chip-remove, .pill-button, .option-row, .settings-access-toggle { min-height: 44px; }
  .settings-chip .chip-remove { min-width: 44px; }
  .settings-users .list-row-check { display: flex; align-items: center; min-width: 44px; min-height: 44px; }
  .settings-user-main .text-mono-label-sm { max-width: 100%; }
}
.settings-role { display: inline-flex; flex: none; align-items: center; padding: 2px 8px; border: 1px solid var(--fleet-line-bright); border-radius: 999px; color: var(--fleet-fg-2); }
/* the phone bar and drawer outside the inbox: the same 72px bar, a sliding drawer, 44px targets */
.shell > .mobile-bar { min-height: 72px; align-items: center; padding: 8px 8px max(16px, env(safe-area-inset-bottom)); }
@keyframes drawer-in { from { transform: translateX(-100%); } }
.drawer[open] { animation: drawer-in 0.26s var(--fleet-ease-standard); }
@media (max-width: 767.98px) {
  .drawer .brand-link, .inbox-menu .pill-link { display: inline-flex; align-items: center; min-height: 44px; }
  .dialog input:not([type="checkbox"]):not([type="radio"]), .dialog select, .dialog .button { min-height: 44px; }
  .dialog .icon-button { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .drawer[open] { animation: none; } }

/* --- numbers page (08-numbers: UI) --- */
/* the row is a settings-row disclosure; its details line up under the number */
.number-row .settings-row-details { padding-left: 64px; }
.number-row .tag { max-width: 100%; overflow-wrap: anywhere; }
.number-row a.tag { color: var(--fleet-link); text-decoration: none; }
.number-row a.tag:hover { text-decoration: underline; }
.number-row-icon { display: flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--fleet-brand-soft); color: var(--fleet-brand); font-size: 18px; }
.number-row-main { display: flex; flex-direction: column; gap: 2px; }
.number-badge { display: inline-flex; align-self: flex-start; padding: 1px 8px; border: 1px solid var(--fleet-line-bright); border-radius: 999px; color: var(--fleet-fg-2); }
.number-search-row { display: flex; gap: 8px; }
.number-search-row .settings-input { flex: 1; }
.number-results { display: flex; flex-direction: column; gap: 2px; max-height: 10rem; overflow-y: auto; padding: 4px; border: 1px solid var(--fleet-line); border-radius: var(--radius-control); }
.number-results[hidden], .number-selected[hidden], [data-numbers-buying][hidden] { display: none; }
.number-results [role="radio"][aria-checked="true"] { background: var(--fleet-brand-soft); }
.number-selected { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border: 1px solid var(--fleet-line); border-radius: var(--radius-control); color: var(--fleet-muted); }
@media (max-width: 767px) { .number-row .icon-button.touch { width: 44px; height: 44px; } }

/* --- flows (05-flows): templates, document types, extractors ------------- */
.flows-stack { display: flex; flex-direction: column; gap: 16px; }
.flows-head .text-display { margin: 0; }
.flows-unsaved { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--fleet-warn-wash); color: var(--fleet-warn); text-transform: uppercase; }
.flows-unsaved[hidden], .flows-alert[hidden] { display: none; }
.flows-alert { margin: 0; padding: 8px 12px; border-radius: var(--radius-control); background: var(--fleet-bg-3); color: var(--fleet-fg); font-weight: 600; overflow-wrap: anywhere; }
.flows-alert .bold { margin: 0 0 4px; }
.flows-generating { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 8px 12px; border-radius: var(--radius-control); background: var(--fleet-bg-3); color: var(--fleet-fg); }
.flows-generating svg { flex: none; }
.flows-problems { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-weight: 400; }
.flows-card { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: var(--radius-card); background: var(--fleet-bg-2); min-width: 0; }
.flows-card h2, .flows-card h3, .flows-card p { margin: 0; }
.flows-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.flows-card-head .button { gap: 6px; }
.flows-empty { padding: 32px 16px; }
.flows-empty .text-display { margin: 0; }
.flows-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--fleet-line); border-radius: var(--radius-control); overflow: hidden; }
.flows-list > li { border-bottom: 1px solid var(--fleet-line); }
.flows-list > li:last-child { border-bottom: 0; }
.flows-list[hidden] { display: none; }
.flows-list-link, .flows-dest-link { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; color: inherit; text-decoration: none; min-width: 0; flex: 1; }
.flows-list-link:hover, .flows-dest-link:hover { background: var(--fleet-wash); }
.flows-name { padding: 8px 12px; }
.flows-row-main { display: flex; align-items: center; gap: 4px; padding: 4px 8px 4px 4px; }
.flows-row-link { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; min-height: 44px; padding: 8px 4px; color: inherit; text-decoration: none; }
.flows-row-link:hover .text-value { text-decoration: underline; }
.flows-spacer { flex: none; width: 44px; height: 44px; }
.flows-indent { padding-left: calc(4px + 1.25rem * var(--depth, 0)); }
[data-depth="1"] .flows-indent { --depth: 1; } [data-depth="2"] .flows-indent { --depth: 2; } [data-depth="3"] .flows-indent { --depth: 3; } [data-depth="4"] .flows-indent { --depth: 4; }
.flows-dests { padding: 0; }
.flows-row > .flows-dests { margin: 0 8px 8px 52px; }
.flows-dest { display: flex; align-items: center; gap: 8px; padding-right: 8px; }
.flows-dest-main { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.flows-dest-state { flex: none; text-align: right; }
.flows-switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--fleet-line); border-radius: var(--radius-control); }
.flows-switch input { width: 20px; height: 20px; flex: none; }
.flows-flow-head { display: flex; align-items: center; gap: 2px; padding-right: 8px; }
.flows-flow-toggle { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; min-height: 44px; padding: 8px 12px; text-align: left; color: inherit; }
.flows-flow-toggle:hover { background: var(--fleet-wash); }
.flows-flow-toggle[aria-expanded="true"] .nav-row-chevron { transform: rotate(90deg); }
.flows-flow-toggle > .min-w-0 { flex: 1; }
.flows-flow-body { display: flex; flex-direction: column; gap: 16px; padding: 12px 12px 16px; border-top: 1px solid var(--fleet-line); }
.flows-flow-body[hidden] { display: none; }
.flows-picker { display: flex; flex-direction: column; gap: 8px; }
.flows-picker-list { max-height: 16rem; overflow-y: auto; padding: 4px 0; border: 1px solid var(--fleet-line); border-radius: var(--radius-control); }
.flows-pick-row { display: flex; align-items: center; padding-left: calc(16px * var(--depth, 0)); }
.flows-pick-row[hidden] { display: none; }
.flows-pick-row[data-depth="1"] { --depth: 1; } .flows-pick-row[data-depth="2"] { --depth: 2; } .flows-pick-row[data-depth="3"] { --depth: 3; }
.flows-pick { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding: 0 8px; border-radius: var(--radius-control); color: var(--fleet-muted); text-align: left; }
.flows-pick:hover { background: var(--fleet-wash); }
.flows-pick[aria-pressed="true"] { color: var(--fleet-fg); font-weight: 600; }
.flows-pick-check { width: 16px; flex: none; text-align: center; opacity: 0; }
.flows-pick[aria-pressed="true"] .flows-pick-check { opacity: 1; }
.flows-pick-meta { margin-left: auto; flex: none; }
.flows-picker-none { padding: 16px 12px; text-align: center; }
.flows-picker-none[hidden] { display: none; }
.flows-candidates { max-height: 18rem; overflow-y: auto; }
.flows-candidates > li { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: 0; }
.flows-candidates > li[hidden] { display: none; }
.flows-candidates input { width: 20px; height: 20px; flex: none; }
.flows-dialog .field textarea, .flows-dialog .field input { width: 100%; }
.flows-mono { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; }
/* codeeditor.js's host; the editor's own styles are in its shadow root */
.code-editor { min-height: 72px; overflow: hidden; resize: vertical; }
.flows-tabs-row { overflow-x: auto; }
.flows-tabs { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--radius-control); background: var(--fleet-bg-4); }
.flows-tab { display: inline-flex; align-items: center; gap: 4px; flex: none; min-height: 44px; padding: 0 12px; border-radius: var(--radius-control); color: var(--fleet-fg-2); white-space: nowrap; }
.flows-tab[aria-selected="true"] { background: var(--fleet-bg); color: var(--fleet-brand); box-shadow: var(--fleet-shadow-xs); }
.flows-tab [hidden] { display: none; }
.flows-subtabs { align-self: flex-start; }
.flows-modes { display: flex; flex-wrap: wrap; gap: 4px; }
.flows-mode { min-height: 44px; padding: 0 12px; border-radius: var(--radius-control); color: var(--fleet-fg-2); }
.flows-mode[aria-pressed="true"] { background: var(--fleet-brand-soft); color: var(--fleet-brand); }
.flows-fields { margin: 0; padding: 0; list-style: none; }
.flows-fields > li { border-bottom: 1px solid var(--fleet-line); padding: 2px 0; }
.flows-fields > li:last-child { border-bottom: 0; }
.flows-fields-nested { margin-left: 20px; padding-left: 8px; border-left: 1px solid var(--fleet-line); }
.flows-fields-nested > li { border-bottom: 0; }
.flows-field { display: flex; align-items: center; gap: 8px; min-height: 44px; list-style: none; cursor: default; }
.flows-field-details > summary { cursor: pointer; }
.flows-field-details > summary::-webkit-details-marker { display: none; }
.flows-field-details[open] .flows-field-disc { transform: rotate(90deg); }
.flows-field-disc { display: inline-flex; width: 28px; flex: none; justify-content: center; color: var(--fleet-muted); }
.flows-field-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flows-field-note { margin: 0 0 4px 36px; }
.flows-preview-intro { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.flows-preview-intro p { margin: 0; flex: 1 1 16rem; min-width: 0; }
/* the preview frame: form above the page on a phone, page beside it at 27% from md */
.schema-preview { display: flex; flex-direction: column; border: 1px solid var(--fleet-line); border-radius: var(--radius-card); background: var(--fleet-bg); overflow: hidden; min-width: 0; }
.schema-preview-doc { order: 2; min-width: 0; border-top: 1px solid var(--fleet-line); background: var(--fleet-bg-1); }
.schema-preview-form { order: 1; flex: 1; min-width: 0; padding: 16px; }
.schema-preview-scale { zoom: 0.62; display: flex; flex-direction: column; }
.schema-preview-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--fleet-line); background: var(--fleet-bg); }
.schema-preview-bar-end { margin-left: auto; flex: none; }
.schema-preview-stage { display: flex; justify-content: center; padding: 20px; }
.schema-preview-page { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 420px; aspect-ratio: 17 / 22; padding: 32px; border: 1px solid var(--fleet-line); border-radius: var(--radius-control); background: var(--fleet-bg-3); }
.schema-preview-line { display: block; height: 10px; border-radius: 1px; background: var(--fleet-line-strong); width: 60%; }
.schema-preview-line[data-w="40"] { width: 40%; } .schema-preview-line[data-w="50"] { width: 50%; } .schema-preview-line[data-w="66"] { width: 66%; } .schema-preview-line[data-w="75"] { width: 75%; } .schema-preview-line[data-w="80"] { width: 80%; } .schema-preview-line[data-w="90"] { width: 90%; }
.schema-preview-gap { margin-top: 24px; }
.schema-preview-caption { margin-top: auto; text-align: center; }
.schema-preview-thumbs { display: flex; gap: 6px; margin: 0; padding: 10px 16px; list-style: none; overflow-x: auto; border-top: 1px solid var(--fleet-line); background: var(--fleet-bg); }
.schema-preview-thumb { display: flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 48px; border-radius: 2px; background: var(--fleet-bg-3); color: var(--fleet-faint); font-family: var(--font-mono); font-size: 11px; }
.schema-preview-thumb-current { background: var(--fleet-bg-4); color: var(--fleet-fg); box-shadow: 0 0 0 2px var(--fleet-brand); }
@media (min-width: 768px) {
  .schema-preview { flex-direction: row; height: 720px; }
  .schema-preview-doc { order: 1; width: 27%; flex: none; border-top: 0; border-right: 1px solid var(--fleet-line); }
  .schema-preview-scale { height: 100%; }
  .schema-preview-stage { flex: 1; min-height: 0; overflow: auto; }
  .schema-preview-form { order: 2; overflow: auto; padding: 20px; }
  .flows-tab, .flows-mode, .flows-field { min-height: 32px; }
  .flows-pick { min-height: 36px; }
}
.flows-stack[hidden], .flows-card[hidden], [data-panel][hidden], [data-subpanel][hidden], [data-mode-panel][hidden], [data-tn-row][hidden], .schema-preview [hidden] { display: none; }

/* Integrations (06-integrations): the list's switch, the create panel's
   choices and the required-keys editor; the rest is the flows pages'. */
.integration-toggle { display: flex; flex: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; cursor: pointer; }
.integration-toggle input, .integration-check input { width: 20px; height: 20px; flex: none; }
.sm-only { display: none; }
@media (min-width: 640px) { .sm-only { display: inline; } }
.integration-choices { display: grid; gap: 8px; }
@media (min-width: 768px) { .integration-choices { grid-template-columns: 1fr 1fr; } }
.integration-choice { width: 100%; padding: 8px 12px; border: 1px solid var(--fleet-line); }
.integration-choice[aria-pressed="true"] { border-color: var(--fleet-brand); background: var(--fleet-selected); }
.integration-choice-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.integration-check { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 44px; }
.integration-check .field-hint { flex-basis: 100%; margin: 0; }
.integration-key { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px 0 12px; }
.integration-key-add { display: flex; gap: 8px; }
.integration-key-add .button { flex: none; gap: 6px; }
.integration-facts { margin: 0; }
.integration-facts > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 8px 12px; border-bottom: 1px solid var(--fleet-line); }
.integration-facts > div:last-child { border-bottom: 0; }
.integration-facts dd { margin: 0; }
.integration-sms-note:not([hidden]), .integration-sms { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.integration-sms-text { max-width: 40ch; margin: 0; padding: 10px 12px; border: 1px solid var(--fleet-line); border-radius: 12px 12px 12px 4px; background: var(--fleet-bg); font-size: 14px; overflow-wrap: anywhere; }

/* "Edit with AI" on a document type or extractor (05-flows): the note a proposal leaves */
.flows-ai-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; padding: 10px 14px; border: 1px solid var(--fleet-line); border-radius: var(--radius-control); background: var(--fleet-wash); }
.flows-ai-note[hidden] { display: none; }
.flows-ai-note > svg { flex-shrink: 0; color: var(--fleet-brand); }
.flows-ai-note [data-ai-note-text] { flex: 1; min-width: 12em; }

/* a personal access token, shown once when made */
.token-value { display: block; width: 100%; padding: 8px 10px; overflow-wrap: anywhere; border-radius: var(--radius-xs); background: var(--fleet-bg); font-family: var(--font-mono); font-size: 13px; user-select: all; }

/* the Ask chat (partials/assistant.html, js/assistant.js): a launcher in
   the bottom-right corner of every page and the window it opens there; on
   a phone the window fills the screen and the launcher clears the bar */
.assistant-launcher { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--fleet-brand); color: var(--fleet-brand-ink); font-size: 26px; box-shadow: var(--fleet-shadow-xl); cursor: pointer; transition: transform var(--fleet-duration-base) var(--fleet-ease-standard); }
.assistant-launcher:hover { background: var(--fleet-brand-hover); transform: scale(1.06); }
.assistant-launcher:focus-visible { outline: 2px solid var(--fleet-brand); outline-offset: 3px; }
.assistant-launcher[hidden] { display: none; }
/* the phone's full-screen reader keeps its own controls in that corner */
[data-phone-reader-open] .assistant-launcher { display: none; }
.assistant { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: flex; flex-direction: column; width: 380px; height: min(560px, calc(100dvh - 48px)); overflow: hidden; border: 1px solid var(--fleet-line); border-radius: 16px; background: var(--fleet-bg-2); color: var(--fleet-fg); box-shadow: var(--fleet-shadow-xl); animation: assistant-in var(--fleet-duration-base) var(--fleet-ease-emphasis); }
.assistant[hidden] { display: none; }
@keyframes assistant-in { from { opacity: 0; transform: translateY(12px); } }
.assistant-head { display: flex; flex: none; align-items: center; gap: 10px; padding: 12px 10px 12px 16px; background: var(--fleet-brand); color: var(--fleet-brand-ink); }
.assistant-head-icon { display: flex; font-size: 20px; }
.assistant-head-text { flex: 1; min-width: 0; }
.assistant-title { margin: 0; font-size: 15px; font-weight: 600; }
.assistant-subtitle { margin: 0; font-size: 12px; opacity: 0.85; }
.assistant-head-button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 18px; cursor: pointer; }
.assistant-head-button:hover { background: color-mix(in srgb, currentColor 16%, transparent); }
.assistant-body { display: flex; flex: 1; flex-direction: column; gap: 12px; min-height: 0; padding: 14px; overflow-y: auto; }
.assistant-intro, .assistant-status { margin: 0; color: var(--fleet-muted); font-size: 13px; }
.assistant-status:empty { display: none; }
.assistant-messages { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.assistant-message { max-width: 85%; padding: 8px 12px; overflow-wrap: anywhere; font-size: 14px; line-height: 1.45; }
.assistant-message p, .assistant-message ul, .assistant-message ol, .assistant-message blockquote, .assistant-message .assistant-table { margin: 0 0 6px; }
.assistant-message > :last-child { margin-bottom: 0; }
.assistant-message[data-role="user"] { align-self: flex-end; border-radius: 12px 12px 2px 12px; background: var(--fleet-brand); color: var(--fleet-brand-ink); }
.assistant-message[data-role="assistant"] { align-self: flex-start; border-radius: 12px 12px 12px 2px; background: var(--fleet-bg-3); }
.assistant-message[data-role="action"] { align-self: flex-start; padding: 0 4px; color: var(--fleet-muted); font-size: 12px; }
.assistant-thinking { color: var(--fleet-muted); font-style: italic; }
.assistant-message ul, .assistant-message ol { padding-left: 20px; }
.assistant-message blockquote { padding-left: 10px; border-left: 3px solid var(--fleet-line); color: var(--fleet-muted); }
.assistant-table { max-width: 100%; overflow-x: auto; }
.assistant-message table { border-collapse: collapse; font-size: 13px; }
.assistant-message th, .assistant-message td { padding: 4px 8px; border: 1px solid var(--fleet-line); text-align: left; vertical-align: top; }
.assistant-message code { font-family: var(--font-mono); font-size: 0.92em; }
.assistant-cite { color: var(--fleet-brand); text-decoration: underline; text-underline-offset: 2px; }
.assistant-message-file { display: inline-flex; margin-top: 6px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, currentColor 18%, transparent); font-family: var(--font-mono); font-size: 12px; }
.assistant-pending { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--fleet-warn); border-radius: 12px; background: var(--fleet-warn-wash); font-size: 14px; }
.assistant-pending p { margin: 0; }
.assistant-pending[hidden] { display: none; }
.assistant-pending-detail { color: var(--fleet-fg-1); overflow-wrap: anywhere; }
.assistant-pending-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.assistant-form { display: flex; flex: none; flex-direction: column; gap: 6px; padding: 10px; border-top: 1px solid var(--fleet-line); background: var(--fleet-bg-2); }
.assistant-file { display: flex; align-items: center; gap: 6px; align-self: flex-start; max-width: 100%; padding: 2px 4px 2px 10px; border: 1px solid var(--fleet-line); border-radius: 999px; font-size: 12px; }
.assistant-file[hidden] { display: none; }
.assistant-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assistant-file-remove { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--fleet-muted); cursor: pointer; }
.assistant-compose { display: flex; align-items: flex-end; gap: 6px; }
.assistant-attach, .assistant-send { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 50%; font-size: 18px; cursor: pointer; }
.assistant-attach { color: var(--fleet-muted); }
.assistant-attach:hover, .assistant-attach:focus-within { background: var(--fleet-brand-soft); color: var(--fleet-brand); }
.assistant-attach:focus-within { outline: 2px solid var(--fleet-brand); outline-offset: 1px; }
.assistant-send { background: var(--fleet-brand); color: var(--fleet-brand-ink); }
.assistant-send:disabled { opacity: 0.5; cursor: default; }
.assistant-input { flex: 1; min-width: 0; min-height: 40px; max-height: 160px; padding: 9px 12px; border: 1px solid var(--fleet-line); border-radius: 20px; background: var(--fleet-bg); color: var(--fleet-fg); font: inherit; font-size: 14px; resize: none; }
.assistant-input:focus { outline: none; border-color: var(--fleet-brand); box-shadow: 0 0 0 2px var(--fleet-brand-soft); }
@media (max-width: 767.98px) {
  .assistant-launcher { right: 16px; bottom: calc(88px + env(safe-area-inset-bottom)); }
  .assistant { inset: 0; width: auto; height: auto; border: 0; border-radius: 0; }
  .assistant-head { padding-top: max(12px, env(safe-area-inset-top)); }
  .assistant-form { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .assistant-head-button, .assistant-attach, .assistant-send { width: 44px; height: 44px; }
  .assistant-input { min-height: 44px; font-size: 16px; }
}