/* Company OS v0.7 — styles (spec §6 tokens, §7 components, §8 responsive)
   Vanilla CSS, logical properties only, no external resources. */

/* ------------------------------------------------------------------ */
/* 1. Tokens (§6.1)                                                    */
/* ------------------------------------------------------------------ */
html, html[data-theme="navy"] {
  color-scheme: dark;
  --bg: #0B1220; --surface: #111A2B; --surface-2: #17233A; --surface-3: #1D2B45;
  --border: #24324D; --border-strong: #34466A;
  /* --text-faint is one step lighter than §6.1's #64748B so 12 px captions clear 4.5:1 on --surface
     (3.7:1 → 5.0:1). §12.37 (contrast) wins over the token table; see the Stage 4 note. */
  --text: #E6EDF7; --text-muted: #94A3B8; --text-faint: #7A8AA3;
  --accent: #3B82F6; --accent-hover: #2563EB; --accent-fg: #FFFFFF;
  --info: #60A5FA; --success: #22C55E; --warning: #F59E0B; --danger: #EF4444; --rose: #FB7185;
  --neutral: #94A3B8; --level: #8B5CF6;
  --co-personal-office: #14B8A6; --co-media-growth: #EC4899; --co-it-solutions: #6366F1;
  --tint-alpha: .14; --focus: #7DD3FC;
  --shadow-pop: 0 8px 24px rgba(0,0,0,.28); --scrim: rgba(2,6,23,.6);
}
html[data-theme="midnight"] {
  color-scheme: dark;
  --bg: #000000; --surface: #0A0A0B; --surface-2: #141416; --surface-3: #1B1B1F;
  --border: #232326; --border-strong: #2E2E33;
  --text: #F4F4F5; --text-muted: #A1A1AA; --text-faint: #8A8A93;   /* 4.1:1 → 5.8:1 on --surface (§12.37) */
  --accent: #3B82F6; --accent-hover: #2563EB; --accent-fg: #FFFFFF;
  --info: #60A5FA; --success: #22C55E; --warning: #F59E0B; --danger: #EF4444; --rose: #FB7185;
  --neutral: #A1A1AA; --level: #8B5CF6;
  --co-personal-office: #14B8A6; --co-media-growth: #EC4899; --co-it-solutions: #6366F1;
  --tint-alpha: .16; --focus: #7DD3FC;
  --shadow-pop: 0 8px 24px rgba(0,0,0,.5); --scrim: rgba(0,0,0,.7);
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: #F6F8FB; --surface: #FFFFFF; --surface-2: #F1F5F9; --surface-3: #E9EEF5;
  --border: #E2E8F0; --border-strong: #CBD5E1;
  --text: #0F172A; --text-muted: #475569; --text-faint: #5A6B82;   /* 2.5:1 → 4.9:1 on --surface-2 (§12.37) */
  --accent: #1D4ED8; --accent-hover: #1E40AF; --accent-fg: #FFFFFF;
  --info: #2563EB; --success: #15803D; --warning: #B45309; --danger: #DC2626; --rose: #BE123C;
  --neutral: #64748B; --level: #6D28D9;
  --co-personal-office: #0F766E; --co-media-growth: #BE185D; --co-it-solutions: #4338CA;
  --tint-alpha: .12; --focus: #1D4ED8;
  --shadow-pop: 0 8px 24px rgba(15,23,42,.12); --scrim: rgba(15,23,42,.4);
}

/* Spacing, shape, motion (§6.4) */
:root {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r-sm: 6px; --r: 8px; --r-lg: 12px; --r-sheet: 20px; --r-pill: 999px;
  --ease: 150ms ease-out; --ease-sheet: 200ms ease-out;
  --font: "Segoe UI", "Noto Sans Arabic", "IBM Plex Sans Arabic", system-ui, Tahoma, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --sidebar-w: 240px; --topbar-h: 52px; --rail-w: 72px; --tabbar-h: 60px;
  --page-pad: 24px; --row-h: 44px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* The camera's strip at the top, and the rounded corners at the sides. Zero in a normal browser tab;
     on an iPhone with the app saved to the home screen it is the Dynamic Island, and anything drawn under
     it cannot be pressed (Ali, 2026-09-24: the header was behind the camera on an iPhone 17 Pro Max). */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  /*
   * How big the words are. Every font-size and px line-height in this sheet is a multiple of this, so one
   * setting moves all of them together. Boxes and spacing stay in plain px on purpose: scaling those too
   * would be browser zoom, and it breaks a layout full of fixed panels and viewport units.
   */
  --text-scale: 1;
}
html[data-text="large"] { --text-scale: 1.15; }
html[data-text="xlarge"] { --text-scale: 1.3; }
html[data-text="xxlarge"] { --text-scale: 1.5; }
/* Rows and controls have to grow with the text they hold, or big type in a 44px row clips. */
html[data-text="xlarge"], html[data-text="xxlarge"] { --row-h: 52px; }
html[data-density="compact"] { --row-h: 40px; }

/* ------------------------------------------------------------------ */
/* 2. Base & typography (§6.3)                                         */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100%; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: calc(14px * var(--text-scale)); line-height: 1.6; font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
html[lang="en"] body { line-height: calc(22px * var(--text-scale)); }
h1, h2, h3, p { margin: 0; }
h1 { font-size: calc(20px * var(--text-scale)); line-height: calc(28px * var(--text-scale)); font-weight: 600; }
h2 { font-size: calc(16px * var(--text-scale)); line-height: calc(24px * var(--text-scale)); font-weight: 600; }
h3 { font-size: calc(14px * var(--text-scale)); line-height: calc(22px * var(--text-scale)); font-weight: 600; }
.display { font-size: calc(24px * var(--text-scale)); line-height: calc(32px * var(--text-scale)); font-weight: 600; }
.small, .meta { font-size: calc(13px * var(--text-scale)); line-height: calc(18px * var(--text-scale)); color: var(--text-muted); }
/* Captions carry file paths, env var names and URLs. `anywhere` lets those break instead of widening the page. */
.caption { font-size: calc(12px * var(--text-scale)); line-height: calc(16px * var(--text-scale)); color: var(--text-muted); overflow-wrap: anywhere; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
ul, ol { margin: 0; padding-inline-start: 20px; }
code, .mono, kbd { font-family: var(--mono); font-size: calc(12px * var(--text-scale)); }
.num, .mono, bdi { unicode-bidi: isolate; }
.num { font-variant-numeric: tabular-nums; }
.prose { max-width: 72ch; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
[hidden] { display: none !important; }
.skip-link { position: absolute; inset-inline-start: 8px; top: -60px; z-index: 100; background: var(--accent); color: var(--accent-fg); padding: 8px 12px; border-radius: var(--r); }
.skip-link:focus, .skip-link:focus-visible, .skip-link:focus-within { top: 8px; }
.icon { width: 16px; height: 16px; flex: 0 0 auto; vertical-align: -3px; }
.icon--lg { width: 20px; height: 20px; }
.icon--xl { width: 32px; height: 32px; }
[dir="rtl"] .icon-dir { transform: scaleX(-1); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.divider { height: 1px; background: var(--border); margin-block: var(--s2); }
.row { display: flex; align-items: center; gap: var(--s2); }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: var(--s3); }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font-size: inherit; }
.link:hover { text-decoration: underline; }
.spin { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
[dir="rtl"] .spin { animation-direction: reverse; }

/* ------------------------------------------------------------------ */
/* 3. Shell (§2.2–2.5, §8)                                              */
/* ------------------------------------------------------------------ */
.app {
  display: grid; height: 100vh; height: 100dvh; width: 100%;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: var(--topbar-h) auto auto minmax(0, 1fr);
  grid-template-areas: "side top" "side hair" "side conn" "side page";
}
/* Collapsed sidebar = icon strip: icons, badges as corner counts, the live dot and the one toggle stay. */
@media (min-width: 1200px) {
  html[data-sidebar="hidden"] { --sidebar-w: 60px; }
  [dir="rtl"][data-sidebar="hidden"] .sidebar .nav-item-badge { transform-origin: top left; }
  html[data-sidebar="hidden"] .sidebar { overflow-x: hidden; }
  html[data-sidebar="hidden"] .sidebar .nav-item-label,
  html[data-sidebar="hidden"] .sidebar .nav-group-label,
  html[data-sidebar="hidden"] .sidebar .sidebar-hint,
  html[data-sidebar="hidden"] .sidebar-company .grow,
  html[data-sidebar="hidden"] .sidebar-company > .icon,
  html[data-sidebar="hidden"] .sidebar-status > :not(:last-child) { display: none; }
  html[data-sidebar="hidden"] .sidebar-company { justify-content: center; padding-inline: 0; }
  html[data-sidebar="hidden"] .sidebar .nav-group { padding-inline: 8px; }
  html[data-sidebar="hidden"] .sidebar .nav-group + .nav-group { border-top: 1px solid var(--border); }
  html[data-sidebar="hidden"] .sidebar .nav-item { justify-content: center; padding-inline: 0; height: 40px; }
  html[data-sidebar="hidden"] .sidebar .nav-item .icon { width: 18px; height: 18px; }
  html[data-sidebar="hidden"] .sidebar .nav-item-badge { position: absolute; top: -3px; inset-inline-end: -4px; transform: scale(.72); transform-origin: top right; pointer-events: none; }
  html[data-sidebar="hidden"] .sidebar-foot { padding-inline: 8px; }
  html[data-sidebar="hidden"] .sidebar-foot > .sidebar-toggle { justify-content: center; padding-inline: 0; }
  html[data-sidebar="hidden"] .sidebar-status { justify-content: center; }
}
.sidebar { grid-area: side; }
.rail { grid-area: side; display: none; }
.topbar { grid-area: top; }
.hairline { grid-area: hair; height: 3px; background: var(--border); }
.hairline.hairline--co-personal-office { background: var(--co-personal-office); }
.hairline.hairline--co-media-growth { background: var(--co-media-growth); }
.hairline.hairline--co-it-solutions { background: var(--co-it-solutions); }
#connBanner { grid-area: conn; border-radius: 0; margin: 0; }
.page { grid-area: page; overflow: auto; min-width: 0; padding: var(--page-pad); position: relative; overscroll-behavior: contain; }
.page--assistant { padding: 0; overflow: hidden; }
.tabbar { display: none; }
.fab { display: none; }

/* Sidebar (§2.2) */
.sidebar {
  display: flex; flex-direction: column; background: var(--surface); border-inline-end: 1px solid var(--border);
  border-top: 2px solid var(--border); overflow: auto; position: relative;
}
.sidebar[data-co="personal-office"] { border-top-color: var(--co-personal-office); }
.sidebar[data-co="media-growth"] { border-top-color: var(--co-media-growth); }
.sidebar[data-co="it-solutions"] { border-top-color: var(--co-it-solutions); }
.sidebar-company {
  display: flex; align-items: center; gap: var(--s3); width: 100%; padding: var(--s3) var(--s4); min-height: 64px;
  background: none; border: 0; border-bottom: 1px solid var(--border); text-align: start; color: inherit;
}
.sidebar-company-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); }
.sidebar-company-row .sidebar-company { border-bottom: 0; min-width: 0; }
.sidebar-company-row > .sidebar-toggle { flex: 0 0 auto; align-self: center; margin-inline-end: 8px; }
.sidebar-company:hover { background: var(--surface-3); }
.sidebar-company .name { font-weight: 600; display: block; }
.sidebar-company .type { font-size: calc(12px * var(--text-scale)); color: var(--text-muted); display: block; }
.sidebar-hint { padding: var(--s3) var(--s4); font-size: calc(13px * var(--text-scale)); color: var(--text-muted); border-bottom: 1px solid var(--border); }
.nav-group { padding: var(--s2) var(--s2); }
.nav-group-label { font-size: calc(12px * var(--text-scale)); line-height: calc(16px * var(--text-scale)); color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; padding: var(--s2) var(--s2) var(--s1); }
.nav-item {
  display: flex; align-items: center; gap: 10px; height: 36px; padding-inline: var(--s2); border-radius: var(--r-sm);
  color: var(--text); text-decoration: none; position: relative; width: 100%; background: none; border: 0; text-align: start; font-size: calc(14px * var(--text-scale));
}
.nav-item:hover { background: var(--surface-3); text-decoration: none; }
.nav-item .icon { width: 16px; height: 16px; color: var(--text-muted); }
.nav-item[aria-current="page"] { background: var(--surface-2); }
.nav-item[aria-current="page"]::before { content: ""; position: absolute; inset-inline-start: -8px; top: 8px; bottom: 8px; width: 2px; background: var(--accent); border-radius: 2px; }
.nav-item[aria-current="page"] .icon { color: var(--accent); }
.nav-item-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item-badge { margin-inline-start: auto; }
.sidebar-foot { margin-top: auto; padding: var(--s2); border-top: 1px solid var(--border); }
.sidebar-status { display: flex; align-items: center; gap: var(--s2); padding: var(--s2); font-size: calc(12px * var(--text-scale)); color: var(--text-muted); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--neutral); flex: 0 0 auto; }
.dot--ok { background: var(--success); } .dot--info { background: var(--info); } .dot--warn { background: var(--warning); } .dot--danger { background: var(--danger); } .dot--faint { background: var(--text-faint); }
.dot--pulse { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.8); } }

/* Tablet rail (§2.4) */
.rail { flex-direction: column; align-items: stretch; width: var(--rail-w); background: var(--surface); border-inline-end: 1px solid var(--border); overflow: auto; padding-block: var(--s2); }
.rail-company { display: flex; justify-content: center; padding: var(--s2) 0 var(--s3); background: none; border: 0; }
.rail-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; color: var(--text-muted); text-decoration: none;
  font-size: calc(11px * var(--text-scale)); line-height: calc(13px * var(--text-scale)); position: relative; border-radius: var(--r-sm); margin: 2px 6px; text-align: center; background: none; border: 0;
}
.rail-item .icon { width: 20px; height: 20px; }
.rail-item:hover { background: var(--surface-3); text-decoration: none; color: var(--text); }
.rail-item[aria-current="page"] { color: var(--accent); background: var(--surface-2); }
.rail-item .badge { position: absolute; top: 4px; inset-inline-end: 8px; }
.rail-foot { margin-top: auto; }

/* Top bar (§2.3) */
.topbar { display: flex; align-items: center; gap: var(--s3); padding-inline: var(--s4); background: var(--surface); border-bottom: 1px solid var(--border); min-width: 0; }
/* Settings › AI sign-in options, usage bars, and the desktop launcher steps. */
.option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
@media (max-width: 899px) { .option-grid { grid-template-columns: minmax(0, 1fr); } }
.option-card { padding: var(--s4); }
.option-card--active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cmd-row { display: flex; align-items: center; gap: var(--s2); justify-content: space-between; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px 8px; }
.cmd-row .cmd-text { font-size: calc(12px * var(--text-scale)); overflow-x: auto; white-space: nowrap; }
.stack--tight { gap: var(--s2); }
.cli-out { margin: 0; padding: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); font-size: calc(12px * var(--text-scale)); line-height: 1.5; max-height: 160px; overflow: auto; white-space: pre-wrap; word-break: break-word; direction: ltr; text-align: left; }
.daybars { display: flex; align-items: flex-end; gap: 4px; overflow-x: auto; padding-top: var(--s2); }
.daybar { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 22px; }
.daybar i { display: block; width: 14px; border-radius: 3px 3px 0 0; background: var(--accent); }
.daybar small { font-size: calc(12px * var(--text-scale)); color: var(--text-faint); }
.list-row--link { text-decoration: none; color: inherit; }
.list-row--link:hover { background: var(--surface-3); }
.steps { margin: 0; padding-inline-start: 1.2em; display: grid; gap: var(--s2); font-size: calc(13px * var(--text-scale)); color: var(--text-muted); }
.crumb { display: flex; align-items: center; gap: var(--s2); min-width: 0; font-size: calc(14px * var(--text-scale)); }
.crumb .crumb-co { font-weight: 500; white-space: nowrap; }
.crumb .crumb-sep { color: var(--text-faint); }
/* The page title is the top bar's own label on desktop, so it reads as primary text, not as a trailing crumb. */
.crumb .crumb-page { color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-title { display: none; font-size: calc(13px * var(--text-scale)); color: var(--text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Two classes so this always beats the bare .co-chip display rule, whatever the source order. */
.co-chip.topbar-co { display: none; }
.topbar-end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s2); flex: 0 0 auto; }
.topbar-profile { display: flex; flex-direction: column; align-items: center; gap: 1px; }
/* One search over the whole system, in the bar. The panel hangs under it rather than pushing anything. */
.gsearch { position: relative; display: flex; align-items: center; gap: 6px; height: 32px; width: clamp(180px, 22vw, 320px); padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface-2); }
/* Typing turns it into a window, not a glowing input: the box quietens down and the panel below carries it. */
.gsearch:focus-within { border-color: var(--border-strong, var(--border)); background: var(--surface); }
.gsearch.is-open { border-color: transparent; background: var(--surface); box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.gsearch-input:focus, .gsearch-input:focus-visible { outline: none !important; }
.gsearch-icon { flex: 0 0 auto; width: 16px; height: 16px; color: var(--text-muted); }
.gsearch-input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--text); font: inherit; font-size: calc(13px * var(--text-scale)); }
.gsearch-input::-webkit-search-cancel-button { cursor: pointer; }
.gsearch-panel {
  position: absolute; inset-inline-start: 50%; translate: -50% 0; top: calc(100% + 8px); z-index: 60; width: min(560px, 94vw);
  max-height: min(72vh, 620px); display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 18px 44px rgba(0, 0, 0, .26);
}
/* The filters stay put while the results scroll under them. */
.gsearch-filters { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; padding: var(--s3) var(--s3) var(--s2); border-bottom: 1px solid var(--border); background: var(--surface-2); }
.gsearch-filter-row { display: flex; flex-wrap: wrap; gap: 6px; }
.gsearch-chip {
  padding: 3px 10px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface);
  color: var(--text-muted); font: inherit; font-size: calc(12px * var(--text-scale)); cursor: pointer; white-space: nowrap;
}
.gsearch-chip:hover { background: var(--surface-3); color: var(--text); }
.gsearch-chip.is-on { border-color: transparent; background: var(--accent); color: var(--on-accent, #fff); font-weight: 600; }
.gsearch-results { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--s2); }
/* Narrow screens (the Fold included): a magnifier in the bar, and the search itself fills the screen. */
.gsearch-holder { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.gsearch-sheet {
  position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column;
  background: var(--surface); padding-top: env(safe-area-inset-top, 0px);
}
.gsearch-sheet .gsearch-filters { border-bottom: 1px solid var(--border); }
.gsearch-sheet .gsearch-results { padding: var(--s3); }
.gsearch-sheet-bar { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s2); padding: var(--s3); border-bottom: 1px solid var(--border); }
.gsearch-sheet-bar .gsearch-input { flex: 1 1 auto; height: 40px; font-size: calc(15px * var(--text-scale)); }
body.has-gsearch-sheet { overflow: hidden; }
.gsearch-group { padding: var(--s2) var(--s2) 2px; color: var(--text-faint); font-size: calc(11px * var(--text-scale)); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.gsearch-row { display: flex; gap: var(--s2); padding: 6px var(--s2); border-radius: var(--r-sm); color: var(--text); text-decoration: none; }
.gsearch-row:hover, .gsearch-row:focus-visible { background: var(--surface-2); outline: none; }
.gsearch-row-main { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.gsearch-row-title { font-size: calc(13px * var(--text-scale)); }
.gsearch-row-meta { color: var(--text-muted); font-size: calc(12px * var(--text-scale)); }
.gsearch-empty { padding: var(--s3) var(--s2); color: var(--text-muted); font-size: calc(13px * var(--text-scale)); }
.gsearch-ai { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: var(--s2); padding: 8px var(--s2); border: 0; border-top: 1px solid var(--border); border-radius: 0 0 var(--r-sm) var(--r-sm); background: transparent; color: var(--accent); font: inherit; font-size: calc(13px * var(--text-scale)); text-align: start; cursor: pointer; }
.gsearch-ai:hover, .gsearch-ai:focus-visible { background: var(--surface-2); outline: none; }
.co-chip { display: inline-flex; align-items: center; gap: var(--s2); background: none; border: 1px solid transparent; border-radius: var(--r); padding: 4px 8px 4px 4px; color: inherit; max-width: 46vw; }
.co-chip:hover { background: var(--surface-3); }
.co-chip .name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mode-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding-inline: 8px; border-radius: var(--r-pill); font-size: calc(12px * var(--text-scale)); font-weight: 500; border: 1px solid; white-space: nowrap; }
.mode-chip--demo { color: var(--warning); border-color: var(--warning); }
.mode-chip--live { color: var(--success); border-color: var(--success); }
.bell { position: relative; }
/* flex (not inline) so the wrapper's box is exactly the badge; corner-anchored so it never sits on the icon */
.bell-badge { position: absolute; display: flex; top: -2px; inset-inline-end: -2px; }
.lang-toggle { min-width: 36px; padding-inline: 7px; font-size: calc(12px * var(--text-scale)); }
.sidebar-toggle { min-width: 30px; padding-inline: 7px; font-size: calc(14px * var(--text-scale)); line-height: 1.1; white-space: nowrap; gap: 1px; }
/* The caret sits tight against the panel glyph and reads as one control, not two icons. */
.sidebar-toggle-caret { width: 13px; height: 13px; opacity: .75; }
.sidebar-toggle-label { margin-inline-start: 5px; font-size: calc(11px * var(--text-scale)); }
.sidebar-foot > .sidebar-toggle { width: 100%; justify-content: flex-start; margin-bottom: var(--s2); }
.sidebar-toggle--restore { font-size: calc(13px * var(--text-scale)); }
.btn-newmenu--compact { gap: 0; }
.btn-newmenu--compact .btn { padding-inline: 9px; font-size: calc(13px * var(--text-scale)); }
.btn-newmenu--compact .btn-caret { padding-inline: 6px; }

/* Mobile tab bar (§2.5) */
.tabbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 30; height: calc(var(--tabbar-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  background: var(--surface); border-top: 1px solid var(--border); grid-template-columns: repeat(5, minmax(0, 1fr));
}
.tabbar-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--text-muted); text-decoration: none; font-size: calc(11px * var(--text-scale)); line-height: calc(13px * var(--text-scale)); position: relative; background: none; border: 0; padding: 0; }
.tabbar-item .icon { width: 22px; height: 22px; }
/* A grid column will not shrink below its longest word, so "WhatsApp" pushed the bar past a 320px screen. */
.tabbar-item { min-width: 0; }
.tabbar-item > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar-item[aria-current="page"] { color: var(--accent); }
.tabbar-badge { position: absolute; top: 6px; inset-inline-start: calc(50% + 4px); }
.tabbar-item:hover { text-decoration: none; }

/* FAB (§2.5) */
.fab {
  position: fixed; inset-inline-end: 16px; bottom: calc(var(--tabbar-h) + 16px + var(--safe-b)); z-index: 31;
  height: 56px; min-width: 56px; border-radius: 28px; background: var(--accent); color: var(--accent-fg); border: 0; box-shadow: var(--shadow-pop);
  align-items: center; justify-content: center; gap: 8px; padding-inline: 16px; font-weight: 600; font-size: calc(14px * var(--text-scale));
}
.fab .icon { width: 24px; height: 24px; }
.fab:hover { background: var(--accent-hover); }
.fab:not(.fab--labelled) { padding-inline: 0; width: 56px; }
.fab:not(.fab--labelled) .fab-label { display: none; }
/*
 * "Ask" — the assistant from any page, on a desk as well as a phone (Ali, 2026-09-29). The New button
 * is a phone-only control; this one is always there, because the whole point is a quick question while
 * he is walking. It sits above New where both are on screen, and takes New's place when it is not.
 */
.fab--ask {
  display: inline-flex; width: 52px; min-width: 52px; height: 52px; padding-inline: 0;
  bottom: calc(16px + var(--safe-b));
  background: linear-gradient(135deg, #7c3aed, #2563eb); color: #fff; border: 0; box-shadow: var(--shadow-pop);
}
.fab--ask:hover { filter: brightness(1.08); }
.fab--ask .icon { width: 26px; height: 26px; }
.fab--ask[hidden] { display: none; }
/* On Email, WhatsApp and Drive it lifts clear of the message box rather than sitting on it. */
.fab--ask-high { bottom: calc(96px + var(--safe-b)); }
@media (max-width: 899px) {
  /* Above the New button when both are there; in its place when it is not. `-high` is only for the
     pages with a message box along the bottom, and must not beat `-alone` — it did, which is how the
     button ended up in the middle of the mail summary card. */
  /* Milou keeps ONE place on every page, and New steps up above it where both are shown (Ali, 2026-10-07:
     "milou icon bl brief gher 3an kell pages lesh?"). Two classes each, so the ≤600px `.fab { bottom }`
     rule further down can no longer pull Milou onto New — that is what stacked them on the Brief. */
  .fab.fab--ask, .fab.fab--ask.fab--ask-alone { bottom: calc(var(--tabbar-h) + 16px + var(--safe-b)); }
  .fab.fab--ask.fab--ask-high { bottom: calc(var(--tabbar-h) + 84px + var(--safe-b)); }
  .fab.fab--above-ask { bottom: calc(var(--tabbar-h) + 80px + var(--safe-b)); }
  /* Out of the way of whatever is under it until it is reached for. */
  .fab--ask { opacity: .92; }
}

/* ------------------------------------------------------------------ */
/* 4. Components (§7)                                                  */
/* ------------------------------------------------------------------ */
/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding-inline: 12px; border-radius: var(--r);
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font-size: calc(14px * var(--text-scale)); font-weight: 500; white-space: nowrap;
  transition: background var(--ease), border-color var(--ease); text-decoration: none; position: relative;
}
.btn:hover { background: var(--surface-3); text-decoration: none; }
.btn:active { background: var(--border-strong); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--primary:active { background: var(--accent-hover); }
.btn--secondary { background: var(--surface-2); }
.btn--ghost { background: transparent; border-color: transparent; }
.btn--ghost:hover { background: var(--surface-3); }
.btn--danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn--danger-outline { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn--danger-outline:hover { background: color-mix(in srgb, var(--danger) calc(var(--tint-alpha) * 100%), transparent); }
.btn--ok { background: var(--success); border-color: var(--success); color: #fff; }
.btn--ok:hover { background: color-mix(in srgb, var(--success) 85%, black); }
.btn--sm { height: 28px; padding-inline: 8px; font-size: calc(13px * var(--text-scale)); }
.btn--lg { height: 44px; padding-inline: 16px; }
.btn--xl { height: 48px; padding-inline: 16px; font-size: calc(15px * var(--text-scale)); }
.btn--icon { width: 36px; padding: 0; }
.btn--icon.btn--sm { width: 28px; }
.btn--icon.btn--lg { width: 44px; }
.btn--split { display: inline-flex; }
.btn--split > .btn:first-child { border-start-end-radius: 0; border-end-end-radius: 0; }
.btn--split > .btn-caret { border-start-start-radius: 0; border-end-start-radius: 0; margin-inline-start: -1px; width: 30px; padding: 0; }
.btn[data-loading] { color: transparent; pointer-events: none; }
.btn[data-loading]::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--text); border-inline-end-color: transparent; border-radius: 50%; animation: spin 700ms linear infinite; }
.btn--primary[data-loading]::after, .btn--ok[data-loading]::after, .btn--danger[data-loading]::after { border-color: #fff; border-inline-end-color: transparent; }

/* Pills (status) */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding-inline: 8px; border-radius: var(--r-pill); font-size: calc(12px * var(--text-scale)); font-weight: 500; white-space: nowrap; border: 1px solid transparent; --pc: var(--neutral); color: var(--pc); background: color-mix(in srgb, var(--pc) calc(var(--tint-alpha) * 100%), transparent); }
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pc); }
.pill--queued, .pill--pending { --pc: var(--neutral); }
.pill--running { --pc: var(--info); }
.pill--awaiting_approval { --pc: var(--warning); }
.pill--completed { --pc: var(--success); }
.pill--failed { --pc: var(--danger); }
.pill--cancelled, .pill--skipped { --pc: var(--neutral); background: transparent; border-color: var(--pc); }
.pill--rejected { --pc: var(--rose); background: transparent; border-color: var(--pc); }
.pill--open { --pc: var(--info); }
.pill--in_progress { --pc: var(--info); background: transparent; border-color: var(--pc); }
.pill--waiting_customer { --pc: var(--warning); }
.pill--resolved { --pc: var(--success); }
.pill--closed { --pc: var(--neutral); background: transparent; border-color: var(--pc); }
.pill--pulse .pill-dot { animation: pulse 1.4s ease-in-out infinite; }

/* Badges (count) */
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding-inline: 5px; border-radius: var(--r-pill); font-size: calc(12px * var(--text-scale)); line-height: 1; font-weight: 600; background: var(--neutral); color: var(--bg); }
.badge--warn { background: var(--warning); color: #111; }
html[data-theme="light"] .badge--warn { color: #fff; }
.badge--neutral { background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border-strong); }

/* Chips */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding-inline: 10px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface-2); font-size: calc(13px * var(--text-scale)); white-space: nowrap; color: var(--text); }
.chip .icon { width: 14px; height: 14px; }
button.chip { cursor: pointer; }
button.chip:hover { background: var(--surface-3); }
.chip--filter[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) calc(var(--tint-alpha) * 100%), transparent); }
.chip--count { gap: 8px; }
.chip--suggest { height: 32px; border-radius: var(--r-lg); background: var(--surface); }
.chip--category { color: var(--text-muted); }
.chip--level-executive { background: var(--level); border-color: var(--level); color: #fff; height: 22px; font-size: calc(12px * var(--text-scale)); font-weight: 600; }
.chip--level-manager { background: transparent; border-color: var(--level); color: var(--level); height: 22px; font-size: calc(12px * var(--text-scale)); }
.chip--level-specialist { background: transparent; border-color: var(--neutral); color: var(--text-muted); height: 22px; font-size: calc(12px * var(--text-scale)); }
.chip--priority-urgent { color: var(--danger); }
.chip--priority-high { color: var(--warning); }
.chip--priority-low { color: var(--text-faint); }
.chip--risk-high { color: var(--danger); border-color: var(--danger); background: transparent; height: 22px; font-size: calc(12px * var(--text-scale)); }
.chip--risk-medium { color: var(--warning); border-color: var(--warning); background: transparent; height: 22px; font-size: calc(12px * var(--text-scale)); }
.chip--risk-low { color: var(--text-muted); height: 22px; font-size: calc(12px * var(--text-scale)); }
.chip--ok { color: var(--success); border-color: transparent; background: color-mix(in srgb, var(--success) calc(var(--tint-alpha) * 100%), transparent); }
.chip--danger { color: var(--danger); border-color: transparent; background: color-mix(in srgb, var(--danger) calc(var(--tint-alpha) * 100%), transparent); }
.chip--tint-warn { color: var(--warning); border-color: transparent; background: color-mix(in srgb, var(--warning) calc(var(--tint-alpha) * 100%), transparent); }
.chip--tint-info { color: var(--info); border-color: transparent; background: color-mix(in srgb, var(--info) calc(var(--tint-alpha) * 100%), transparent); }
/* "+2" on a chat filed under several sections; the tooltip carries all of them (2026-09-21). */
.wa-tag-more { flex: none; margin-inline-start: 4px; opacity: .75; font-variant-numeric: tabular-nums; }
/* The little arrow that says "there is a choice behind this button" (2026-09-21). */
.ed-btn-caret { width: 12px; height: 12px; opacity: .6; margin-inline-start: -2px; }
/* Word, Excel and PowerPoint read in place, before he decides to download (2026-09-21). */
.office-pane { overflow: auto; background: var(--surface); padding: var(--s4); }
.office-doc { max-width: 78ch; margin: 0 auto; font-size: calc(14px * var(--text-scale)); line-height: 1.7; }
.office-doc h2, .office-doc h3, .office-doc h4 { margin: 1.2em 0 .4em; }
.office-doc p { margin: 0 0 .7em; }
.office-bullet { margin: 0 0 .4em; padding-inline-start: 1em; }
.office-slide { border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--s3); margin-bottom: var(--s3); background: var(--surface-2); }
.office-sheets { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.office-tabs { position: sticky; top: 0; z-index: 1; background: var(--surface); padding-bottom: var(--s2); }
.office-table { font-size: calc(12px * var(--text-scale)); }
.office-table td, .office-table th { white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
/* The picture a notification of this kind will carry, shown beside its row in Settings (2026-09-21). */
.notify-icon { flex: none; border-radius: 50%; align-self: flex-start; margin-inline-end: var(--s2); }
/* The rewrite beside what he wrote, before either replaces anything (2026-09-21). */
.enh-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.enh-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.enh-side .result-box { white-space: pre-wrap; max-height: 46vh; overflow: auto; font-size: calc(13px * var(--text-scale)); line-height: 1.6; }
.result-box--ok { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }
@media (max-width: 800px) { .enh-compare { grid-template-columns: 1fr; } }
/* Written to him, or only copied — the mark that says why a mail is in his list (2026-09-21). */
.mail-addr { flex: none; font-size: calc(10px * var(--text-scale)); line-height: 1; padding: 3px 6px; border-radius: 999px; border: 1px solid transparent; }
.mail-addr--to { color: var(--accent); background: color-mix(in srgb, var(--accent) calc(var(--tint-alpha) * 100%), transparent); }
.mail-addr--cc { color: var(--text-muted); background: var(--surface-2); border-color: var(--border); }
/* A row or a chip that came from the ERP rather than from here (2026-09-21). */
.chip--tint-accent { color: var(--accent); border-color: transparent; background: color-mix(in srgb, var(--accent) calc(var(--tint-alpha) * 100%), transparent); }
.row--erp .col-id { color: var(--accent); }
/* The folded "how it works" box in Settings › AI messages: the detail he asked for, out of the way until wanted. */
.aim-how { border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--s2) var(--s3); background: var(--surface-2); }
.aim-how > summary { cursor: pointer; font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.aim-how[open] > summary { margin-bottom: var(--s2); color: var(--text); }
.aim-steps { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: var(--s2); }
.aim-steps li { font-size: 13px; line-height: 1.55; }
.aim-steps strong { display: block; color: var(--text); }
.aim-steps span { color: var(--text-muted); }
.chip--agent { height: 30px; padding-inline-start: 4px; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip-row--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chip-row--scroll::-webkit-scrollbar { display: none; }

/* Avatars */
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-3); color: var(--text); font-weight: 600; flex: 0 0 auto; --co: var(--border-strong); box-shadow: 0 0 0 2px var(--co) inset; font-size: calc(12px * var(--text-scale)); }
/* 12px is the type floor (§6.3/§12.33); the 20px avatar keeps its two initials by tightening the tracking. */
.avatar--sm { width: 20px; height: 20px; font-size: calc(12px * var(--text-scale)); line-height: 1; letter-spacing: -0.5px; overflow: hidden; box-shadow: 0 0 0 1px var(--co) inset; }
.avatar--md { width: 28px; height: 28px; font-size: calc(12px * var(--text-scale)); }  /* 12px is the floor (§6.3 caption) */
.avatar--lg { width: 40px; height: 40px; font-size: calc(14px * var(--text-scale)); }
.avatar--xl { width: 48px; height: 48px; font-size: calc(16px * var(--text-scale)); }
.avatar--co-personal-office { --co: var(--co-personal-office); }
.avatar--co-media-growth { --co: var(--co-media-growth); }
.avatar--co-it-solutions { --co: var(--co-it-solutions); }
.avatar--square { border-radius: var(--r-sm); box-shadow: none; background: var(--co); color: #fff; }
.avatar--owner { background: var(--accent); color: var(--accent-fg); box-shadow: none; }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s4); }
.card-head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.card-head h2 { flex: 1 1 auto; min-width: 0; }
.card-body { display: flex; flex-direction: column; gap: var(--s3); }
.card-foot { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--border); display: flex; gap: var(--s2); align-items: center; }

/* Decision card (§4.2) */
.decision-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s4); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); border-inline-start: 3px solid var(--warning); }
.decision-card--failed { border-inline-start-color: var(--danger); grid-template-columns: minmax(0, 1fr); }
.decision-card--receipt { grid-template-columns: minmax(0, 1fr); border-inline-start-color: var(--success); color: var(--text-muted); }
.decision-card--receipt-elsewhere { border-inline-start-color: var(--border-strong, var(--border)); }
.decision-card .decision-check { align-self: start; padding-top: 2px; }
.decision-card input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; }
.decision-title { font-weight: 500; font-size: calc(14px * var(--text-scale)); }
.decision-line { font-size: calc(13px * var(--text-scale)); color: var(--text-muted); }
.decision-line strong { color: var(--text); font-weight: 500; }
.decision-error { font-size: calc(13px * var(--text-scale)); background: var(--surface-2); border-radius: var(--r); padding: var(--s2) var(--s3); font-family: var(--mono); white-space: pre-wrap; word-break: break-word; }
.decision-actions { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s2); flex-wrap: wrap; }
.decision-actions .btn--xl { flex: 1 1 140px; }
.bulk-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); padding: var(--s2) var(--s3); margin-bottom: var(--s3); box-shadow: var(--shadow-pop); }

/* Stat tile */
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: start; color: inherit; }
.stat-label { font-size: calc(13px * var(--text-scale)); color: var(--text-muted); }
.stat-value { font-size: calc(20px * var(--text-scale)); line-height: calc(28px * var(--text-scale)); font-weight: 600; }
.stat-value--warn { color: var(--warning); } .stat-value--info { color: var(--info); }
.stat-foot { font-size: calc(12px * var(--text-scale)); color: var(--text-faint); }
.stat-bar { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin-top: 4px; }
.stat-bar > i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.stat-bar--warn > i { background: var(--warning); } .stat-bar--danger > i { background: var(--danger); }
.stat--clickable { cursor: pointer; } .stat--clickable:hover { background: var(--surface-2); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s3); }

/* Table */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; min-width: 640px; }
.table th { position: sticky; top: 0; background: var(--surface-2); font-size: calc(12px * var(--text-scale)); font-weight: 500; color: var(--text-muted); text-align: start; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.table td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; height: var(--row-h); }
/* `.row` is also the flex utility, so table rows restore their table display explicitly. */
.table tr.row { display: table-row; cursor: pointer; }
.table tr.row:hover td { background: var(--surface-2); }
.table tr.row--selected td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.row-actions { display: inline-flex; gap: 4px; }

/* List row */
.list-row { display: flex; align-items: center; gap: var(--s3); min-height: var(--row-h); padding: var(--s2) 0; border-bottom: 1px solid var(--border); text-align: start; width: 100%; background: none; border-inline: 0; border-top: 0; color: inherit; }
.list-row:last-child { border-bottom: 0; }
button.list-row:hover, a.list-row:hover { background: var(--surface-2); text-decoration: none; }
.list-row-main { flex: 1 1 auto; min-width: 0; }
.list-row-title { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row-meta { display: block; font-size: calc(12px * var(--text-scale)); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row-end { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s2); }

/* Scope note — whose settings are these? ------------------------------------------------------------
   System settings and a company's own settings used to be indistinguishable once you were looking at a
   page, which is how three per-company connections ended up on a system-wide screen behind a "which
   company?" dropdown. Both places now say it once, at the top. Tinted and dashed so it reads as
   orientation rather than as one more card of controls. */
.card--scope { background: var(--surface-2); border-style: dashed; }
.scope-row { align-items: flex-start; gap: var(--s3); }
.scope-icon { flex: 0 0 auto; color: var(--text-muted); margin-top: 2px; }
.link-arrow { display: inline-flex; align-items: center; gap: 4px; }
.link-arrow svg { width: 14px; height: 14px; }

/* Connection rows -----------------------------------------------------------------------------------
   Email, WhatsApp, ERP and platform accounts share one row shape, so a company's integrations tab reads
   as a single list instead of four card designs that happen to sit on the same page. */
.conn-row { flex-wrap: wrap; }
.conn-end { flex-wrap: wrap; gap: var(--s2); justify-content: flex-end; }
.conn-status { gap: 6px; white-space: nowrap; }
.mini-select { max-width: 160px; }

/* The numbers bar under the CEO card ---------------------------------------------------------------
   Four figures, always in the same order and the same places, each one a link to where you act on it.
   Previously these were chips here and tiles in the side panel — the same number twice, in two shapes,
   while the panel had no room for the work itself. */
.stat-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
/* Two different things are called `.stat-bar`: the 3px progress line inside a tile (§ above, `height: 6px`)
   and this row of tiles. The 6px won, so every row of tiles in the app — Follow-ups, Tickets, Meetings —
   was drawing 6px tall with its numbers clipped away. The row of tiles is the one with tiles in it. */
.stat-bar:has(> .stat, > .stat-cell, > .stat-tile) { height: auto; grid-auto-rows: auto; }
.stat-cell { display: flex; flex-direction: column; gap: 1px; padding: var(--s2) var(--s3); background: var(--surface); min-width: 0; }
a.stat-cell:hover { background: var(--surface-2); text-decoration: none; }
.stat-cell-label { font-size: calc(11px * var(--text-scale)); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-cell-value { font-size: calc(18px * var(--text-scale)); font-weight: 600; line-height: 1.15; }
.stat-cell-foot { font-size: calc(10px * var(--text-scale)); color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Tinted only when it is actually asking for something, so colour still means something when it appears. */
.stat-cell--warn .stat-cell-value { color: var(--warning); }
.stat-cell--danger .stat-cell-value { color: var(--danger); }
.stat-bar-bar { grid-column: 1 / -1; height: 3px; background: var(--surface-2); }
.stat-bar-bar > span { display: block; height: 100%; background: var(--accent); }
@media (max-width: 600px) { .stat-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Five counts on one line rather than four and a wrap (Ali, 2026-09-27: "bash saghghirun w rattibun"). */
.stat-bar--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 899px) { .stat-bar--five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .stat-bar--five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* A count that filters: it is a button, so it says so on hover and when it is the one in force. */
button.stat-cell { border: 0; font: inherit; text-align: start; cursor: pointer; }
button.stat-cell:hover { background: var(--surface-2); }
.stat-cell.is-on { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); box-shadow: inset 0 -2px 0 var(--accent); }
/* The colour says what kind of number it is, not how alarming it is. */
.stat-cell--wa .stat-cell-value { color: #0f9d58; }
.stat-cell--mail .stat-cell-value { color: var(--info); }
.stat-cell--ok .stat-cell-value { color: var(--ok, #0f9d58); }

/* A single issue in the "needs you" panel: severity dot, what and where, kind. */
.issue-row { gap: var(--s2); align-items: flex-start; padding: 6px 0; }
.issue-row .dot { margin-top: 6px; flex: 0 0 auto; }
.issue-row .list-row-title { white-space: normal; overflow-wrap: anywhere; font-size: calc(13px * var(--text-scale)); line-height: 1.35; }

/* Per-connection on/off. Reads as a state you can press, not as a destructive action — the tint carries the
   state so it is scannable down a list of connections, and neither variant looks like Delete. */
.conn-toggle { gap: 6px; white-space: nowrap; }
.conn-toggle--on { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); color: var(--text); }
.conn-toggle--off { border-color: var(--border); color: var(--text-muted); background: var(--surface-2); }

/* Phone entry: a narrow dialling-code picker beside the national number, with the composed E.164 string
   shown underneath so what gets stored is never a surprise. */
.phone-row { gap: var(--s2); align-items: center; }
.dial-code { flex: 0 0 auto; width: 108px; }
.phone-row input { flex: 1 1 auto; min-width: 0; direction: ltr; text-align: start; }

/* WhatsApp linking: the QR needs a white quiet zone to scan reliably in every theme, so it keeps its own
   background rather than inheriting the dark surface. */
.wa-qr { display: block; width: 288px; max-width: 100%; height: auto; margin: 0 auto; background: #fff; padding: 8px; border-radius: var(--r-md, 8px); }
.wa-steps { margin: 0; padding-inline-start: 1.25em; display: flex; flex-direction: column; gap: 4px; color: var(--text-muted); }

/* Linked-and-running panel. A dot in a table row was not enough to answer "did my scan work?", so this is
   deliberately the loudest thing on the card: a tinted block, a large status dot, the number it paired to,
   and the three counts that show it is doing something. */
.wa-live { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s3); display: flex; flex-direction: column; gap: var(--s3); }
.wa-live--on { border-inline-start: 3px solid var(--success); background: color-mix(in srgb, var(--success) 7%, transparent); }
.wa-live--off { border-inline-start: 3px solid var(--warning); background: color-mix(in srgb, var(--warning) 7%, transparent); }
.wa-live-head { gap: var(--s3); align-items: center; }
.dot--lg { width: 12px; height: 12px; flex: 0 0 auto; }
.wa-stats { display: flex; flex-wrap: wrap; gap: var(--s4); }
.wa-stat { display: flex; flex-direction: column; gap: 2px; min-width: 96px; }
.wa-stat-value { font-size: calc(18px * var(--text-scale)); font-weight: 600; line-height: 1.1; }
.wa-stat-label { font-size: calc(12px * var(--text-scale)); color: var(--text-muted); }

/* Mentions: everything that named Ali, from any channel. The source badge leads each row because "where is
   this from" is what decides whether it can wait — a list of quotes with no channel is a list you have to
   go hunting through. */
.mention-list { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.mention-row { display: flex; align-items: flex-start; gap: var(--s2); padding: var(--s2); border-radius: var(--r); min-width: 0; }
.mention-row:hover { background: var(--surface-2); }
.mention-row--done { opacity: .55; }
.mention-source { flex: 0 0 auto; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-2); color: var(--text-muted); }
.mention-source .icon { width: 14px; height: 14px; }
.mention-source--whatsapp { background: color-mix(in srgb, var(--success) 22%, transparent); color: var(--success); }
.mention-source--email { background: color-mix(in srgb, var(--info) 22%, transparent); color: var(--info); }
.mention-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.mention-head { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: calc(12px * var(--text-scale)); color: var(--text-muted); }
.mention-who { font-weight: 600; color: var(--text); flex: 0 1 auto; }
.mention-where { flex: 0 1 auto; min-width: 0; }
.mention-at { margin-inline-start: auto; flex: 0 0 auto; white-space: nowrap; }
.mention-text { font-size: calc(13px * var(--text-scale)); line-height: 1.4; overflow-wrap: anywhere; }
.mention-issue { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; }
.mention-issue .icon { width: 13px; height: 13px; }
.mention-ack { flex: 0 0 auto; align-self: center; }
/* In the side panel the rows are three deep and must not push the column wider. */
.mention-list--compact .mention-row { padding: 6px 4px; }
.mention-list--compact .mention-text { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }

/* Replies and sending. Off, it is one quiet row; on, it opens into the composer. The tint follows the same
   convention as .wa-live — green means this connection is actually doing something outward. */
.wa-send { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s3); display: flex; flex-direction: column; gap: var(--s3); }
.wa-send--on { border-inline-start: 3px solid var(--success); }
.wa-send-head { gap: var(--s3); align-items: center; }
.wa-send textarea { width: 100%; resize: vertical; }
/* A <select> sizes itself to its longest option, and the group list holds 70+ names — left alone it pushed
   the whole page 135px wider than a phone screen. Nothing in this block may exceed its column. */
.wa-send, .wa-send > *, .wa-send .field { min-width: 0; }
.wa-send select, .wa-send input, .wa-send textarea { max-width: 100%; min-width: 0; }
.wa-send select { width: 100%; text-overflow: ellipsis; }
.wa-send .row { flex-wrap: wrap; gap: var(--s2); }
.wa-send .seg { flex-wrap: wrap; }
.wa-send .phone-row { flex-wrap: nowrap; }
/* The preview is the whole point of the block: it shows the bold signature the recipient reads first. */
.wa-preview { display: flex; flex-direction: column; gap: 4px; }
.wa-bubble {
  align-self: flex-start; max-width: min(420px, 100%);
  background: color-mix(in srgb, var(--success) 14%, var(--surface-2));
  border: 1px solid var(--border); border-radius: 12px; padding: var(--s2) var(--s3);
  font-size: calc(13px * var(--text-scale)); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
}
.wa-preview-body { color: var(--text-muted); }
.wa-sent summary { cursor: pointer; }

/* Group picker. One group per full-width row wasted most of the line and made 176 of them unscrollable;
   these are compact tiles that pack several to a line and reflow down to one column on a phone. */
.group-toolbar { gap: var(--s2); flex-wrap: wrap; }
.group-toolbar input[type="search"] { flex: 1 1 220px; min-width: 0; }
.group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s2); }
.group-tile {
  display: flex; align-items: flex-start; gap: var(--s2); min-width: 0;
  padding: var(--s2) var(--s3); border: 1px solid var(--border); border-radius: var(--r-md, 8px);
  background: var(--surface-2); cursor: pointer;
}
.group-tile:hover { border-color: var(--accent); }
/* A ticked group is being read. That is the state worth seeing across a grid of 176, so it is tinted. */
.group-tile--on { border-color: var(--success); background: color-mix(in srgb, var(--success) 9%, var(--surface-2)); }
.group-tile input { margin-top: 3px; flex: 0 0 auto; }
.group-tile-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* Group names run long and are often near-identical up to the last word, so two lines beat an ellipsis. */
.group-tile-name { font-size: calc(13px * var(--text-scale)); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.group-tile-meta { font-size: calc(11px * var(--text-scale)); color: var(--text-muted); }
@media (max-width: 600px) { .group-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .conn-row { align-items: flex-start; }
  /* The actions wrap under the title rather than squeezing it to nothing on a phone. */
  .conn-end { width: 100%; justify-content: flex-start; }
}

/* Tabs / segmented */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); }
.tabs--scroll { overflow-x: auto; scrollbar-width: none; }
.tab { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding-inline: 12px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.tab:hover { color: var(--text); }
/* Tab icons: muted until the tab is the current one, so the bar reads at a glance without shouting. */
.tab svg { width: 16px; height: 16px; flex: 0 0 auto; opacity: .7; }
.tab[aria-selected="true"] svg { opacity: 1; }
@media (max-width: 600px) {
  /* On a phone five labelled tabs do not fit; the icons carry them and the selected one keeps its word. */
  .tab span { display: none; }
  .tab[aria-selected="true"] span { display: inline; }
  .tab { padding-inline: 14px; }
}
.tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.tab-count { font-size: calc(12px * var(--text-scale)); color: var(--text-faint); }
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: 2px; gap: 2px; }
.seg-item { height: 30px; padding-inline: 12px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text-muted); font-weight: 500; white-space: nowrap; }
/* `aria-selected` as well as `aria-pressed`: a row of tabs uses role="tab", which carries
   aria-selected, and the Logistics tab row was therefore never highlighted at all — Ali, 2026-10-06:
   "lamma am bekhtar ayya tab, mafi metel highlight… am daye3 fihon." */
.seg-item[aria-pressed="true"], .seg-item[aria-checked="true"], .seg-item[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.2); font-weight: 600; }
.seg--full { display: flex; } .seg--full .seg-item { flex: 1 1 0; }
/* A channel that cannot send right now, marked on the tab rather than only after it is chosen. */
.seg-item--off { color: var(--text-faint); }
.seg-off { margin-inline-start: 5px; padding: 0 5px; border-radius: var(--r-pill); background: var(--surface-2); font-size: calc(10px * var(--text-scale)); text-transform: uppercase; letter-spacing: .02em; }

/* Users & roles rows: a role select plus several actions. On a phone they wrap under the name. */
.user-row-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.user-row-actions select { max-inline-size: 100%; }
@media (max-width: 720px) {
  .user-row { flex-wrap: wrap; }
  .user-row .list-row-main { flex: 1 1 100%; min-inline-size: 0; }
  .user-row-actions { flex: 1 1 100%; justify-content: flex-start; }
}

/* On/off switch (Settings > Operations). Logical properties so it flips with the RTL layout. */
.switch { inline-size: 44px; block-size: 26px; flex: 0 0 auto; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.switch .switch-knob { display: block; inline-size: 18px; block-size: 18px; border-radius: 50%; background: var(--text-faint); transition: transform .15s ease, background .15s ease; }
.switch--on { background: color-mix(in srgb, var(--success) 28%, transparent); border-color: var(--success); }
.switch--on .switch-knob { background: var(--success); transform: translateX(18px); }
:dir(rtl) .switch--on .switch-knob { transform: translateX(-18px); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch[disabled] { opacity: .45; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .switch, .switch .switch-knob { transition: none; } }

/* Banners */
.banner { display: flex; align-items: flex-start; gap: var(--s2); padding: 10px var(--s3); border-radius: var(--r); border: 1px solid; font-size: calc(13px * var(--text-scale)); line-height: calc(18px * var(--text-scale)); --bc: var(--info); color: var(--text); border-color: color-mix(in srgb, var(--bc) 40%, transparent); background: color-mix(in srgb, var(--bc) calc(var(--tint-alpha) * 100%), transparent); }
.banner .icon { color: var(--bc); margin-top: 1px; }
.banner--info { --bc: var(--info); } .banner--warn { --bc: var(--warning); } .banner--danger { --bc: var(--danger); } .banner--ok { --bc: var(--success); }
.banner--offline { --bc: var(--warning); border-radius: 0; border-inline: 0; }
.banner-text { flex: 1 1 auto; min-width: 0; }
.banner-action { flex: 0 0 auto; }
.banners { display: flex; flex-direction: column; gap: var(--s2); }

/* Menus (role=menu popovers) */
/*
 * A menu is opened BY something, so it has to sit above everything that can open one.
 *
 * At 40/41 it sat under `.compose-layer` (55): pressing "Enhance writing" in the mail composer
 * opened the tone menu *behind* the composer, where it could be neither seen nor clicked. The
 * feature looked completely dead — "enhance writing mch mesheye, ma bta3mel chi" (2026-10-06) —
 * while working perfectly, which is why the button that acts directly (Fix writing) was fine and
 * the one that needs a choice was not. Above the compose layer, the full-screen board (90), the
 * search sheet (90) and the toasts (60). A modal <dialog> still wins: it lives in the browser's
 * top layer, which no z-index can reach.
 */
.menu-layer { position: fixed; inset: 0; z-index: 96; }
.menu { position: fixed; z-index: 97; min-width: 220px; max-width: min(360px, calc(100vw - 16px)); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); padding: var(--s1); max-height: 70vh; overflow: auto; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; background: none; border-radius: var(--r-sm); color: var(--text); text-align: start; text-decoration: none; }
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-3); text-decoration: none; outline: none; }
.menu-item[aria-checked="true"] { color: var(--accent); }
.menu-item .icon { color: var(--text-muted); }
.menu-item-main { flex: 1 1 auto; min-width: 0; }
.menu-item-hint { font-size: calc(12px * var(--text-scale)); color: var(--text-muted); display: block; }
.menu-item-kbd { margin-inline-start: auto; }
.menu-sep { height: 1px; background: var(--border); margin: var(--s1) 0; }
.menu-label { font-size: calc(12px * var(--text-scale)); color: var(--text-faint); padding: 6px 10px 2px; }
.menu-item--muted { color: var(--text-muted); }
.menu-item--row56 { min-height: 56px; }
kbd.kbd { display: inline-block; min-width: 20px; padding: 1px 6px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--surface-2); font-size: calc(12px * var(--text-scale)); text-align: center; color: var(--text-muted); direction: ltr; }

/* Toasts */
.toasts { position: fixed; inset-inline-end: 16px; bottom: calc(16px + var(--safe-b)); z-index: 60; display: flex; flex-direction: column; gap: var(--s2); max-width: min(420px, calc(100vw - 32px)); }
/* 2026-10-18 (Ali: "notification am yehjo boss screen w am bia3la2o… icon ghrib bnoss screen"): since the toasts became a
   popover (2026-10-14) the browser's own popover style (inset:0, margin:auto, border, padding, Canvas background) centred
   them on the screen, and left an empty bordered box in the middle once they were gone. Undo that style, and hide the
   box when it holds nothing. */
.toasts { top: auto; inset-inline-start: auto; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: visible; width: auto; height: auto; }
.toasts:empty { display: none; }
.toast { display: flex; align-items: center; gap: var(--s3); background: var(--surface); border: 1px solid var(--border-strong); border-inline-start: 3px solid var(--accent); border-radius: var(--r-lg); padding: 10px 14px; box-shadow: var(--shadow-pop); font-size: calc(14px * var(--text-scale)); animation: toast-in var(--ease-sheet); }
.toast--ok { border-inline-start-color: var(--success); } .toast--warn { border-inline-start-color: var(--warning); } .toast--danger { border-inline-start-color: var(--danger); }
.toast-text { flex: 1 1 auto; min-width: 0; }
.toast-action { flex: 0 0 auto; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Empty / skeleton / progress */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); text-align: center; padding: var(--s6) var(--s4); color: var(--text-muted); }
.empty-icon { width: 32px; height: 32px; color: var(--text-faint); }
.empty-icon--ok { color: var(--success); }
.empty-title { color: var(--text); font-size: calc(16px * var(--text-scale)); font-weight: 600; }
.empty-actions { display: flex; gap: var(--s2); flex-wrap: wrap; justify-content: center; }
.skel { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; border-radius: var(--r-sm); }
.skel--row { height: 44px; margin-bottom: 8px; } .skel--tile { height: 84px; } .skel--card { height: 120px; } .skel--text { height: 14px; width: 60%; margin-bottom: 8px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.progress { height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.progress-bar { height: 100%; background: var(--accent); }

/* Fields */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s3); }
.field > label { font-size: calc(13px * var(--text-scale)); font-weight: 500; }
.field-help { font-size: calc(12px * var(--text-scale)); color: var(--text-muted); margin: 0; }
.field-error { font-size: calc(12px * var(--text-scale)); color: var(--danger); margin: 0; }
.field--inline { display: flex; gap: var(--s2); align-items: center; }
.field--inline input { flex: 1 1 auto; min-width: 0; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%; height: 40px; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r); color: var(--text); font-size: calc(14px * var(--text-scale));
}
textarea { height: auto; min-height: 80px; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: 2px solid var(--focus); outline-offset: 1px; }
.check { display: flex; align-items: center; gap: var(--s2); font-size: calc(14px * var(--text-scale)); }
.check input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.day-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Dialogs / sheets */
dialog.dlg { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--r-lg); padding: 0; box-shadow: var(--shadow-pop); width: min(560px, calc(100vw - 32px)); max-height: min(90vh, 90dvh); overflow: hidden; }
dialog.dlg::backdrop { background: var(--scrim); }
.dlg--sm { width: min(440px, calc(100vw - 32px)); } .dlg--md { width: min(480px, calc(100vw - 32px)); } .dlg--lg { width: min(560px, calc(100vw - 32px)); } .dlg--xl { width: min(1120px, calc(100vw - 32px)); }
.dlg-form, .dlg-inner { display: flex; flex-direction: column; max-height: min(90vh, 90dvh); }
.dlg-head { display: flex; align-items: center; gap: var(--s2); padding: var(--s4) var(--s5) var(--s3); }
.dlg-head h2 { flex: 1 1 auto; }
/*
 * Minimise, maximise and close on every dialog (2026-10-05), the same three the meeting window has.
 * They sit on the DIALOG, not inside its head, so a caller that rebuilds its head keeps them.
 * The head is padded on that side so a long title never runs under them.
 */
.dlg-win { position: absolute; top: 10px; inset-inline-end: 12px; display: flex; gap: 2px; z-index: 5; }
/* 140px, not 96: three 42px controls are 130px wide, and at 96 the minimise sat on top of the head's
   last button — the "download —" glitch in the file viewer (2026-10-07). */
dialog .dlg-head { padding-inline-end: calc(var(--s5) + 140px); }
dialog.dlg--nomin .dlg-head { padding-inline-end: calc(var(--s5) + 96px); }
.dlg-restore { display: none; }
/* Maximised: the whole viewport, no rounding, and the body takes the height it is given. */
dialog.dlg--full { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
dialog.dlg--full .dlg-inner { height: 100dvh; display: flex; flex-direction: column; }
dialog.dlg--full .dlg-body { flex: 1 1 auto; max-height: none; }
/*
 * Minimised: a title bar docked in the corner, and NOT modal — the page behind is usable again,
 * which is the whole point of minimising rather than closing.
 */
/* `dialog.dlg.dlg--min`, not `dialog.dlg--min`: the size classes (.dlg--xl and friends) set their
   own width and would otherwise keep a minimised window 1320px wide (measured 2026-10-05). */
dialog.dlg.dlg--min, dialog.dlg--min {
  inset: auto 16px 16px auto; width: min(340px, calc(100vw - 32px)); max-width: none; height: auto; max-height: none;
  padding: 0; overflow: hidden; box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,.28));
}
dialog.dlg--min .dlg-inner > *:not(.dlg-head) { display: none; }
dialog.dlg--min .dlg-head { padding: 10px 136px 10px 14px; }
dialog.dlg--min .dlg-head h2 { font-size: calc(14px * var(--text-scale)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
dialog.dlg--min .dlg-win { top: 8px; }
dialog.dlg--min::backdrop { background: transparent; }
/* The whole bar is pressable to bring it back, under the buttons. */
dialog.dlg--min .dlg-restore { display: block; position: absolute; inset: 0; inset-inline-end: 136px; background: none; border: 0; cursor: pointer; }
@media (max-width: 600px) {
  dialog .dlg-head { padding-inline-end: calc(var(--s5) + 90px); }
  dialog.dlg--min { inset: auto 8px 8px auto; width: calc(100vw - 16px); }
}
.dlg-body { padding: 0 var(--s5) var(--s4); overflow: auto; overscroll-behavior: contain; }
.dlg-foot { display: flex; gap: var(--s2); justify-content: flex-end; padding: var(--s3) var(--s5) var(--s4); border-top: 1px solid var(--border); background: var(--surface); }
.sheet-handle { display: none; width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 8px auto 0; }
.sheet-row { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 56px; padding: 8px 4px; background: none; border: 0; border-bottom: 1px solid var(--border); color: inherit; text-align: start; text-decoration: none; }
.sheet-row:last-child { border-bottom: 0; }
.sheet-row:hover { background: var(--surface-2); text-decoration: none; }
.sheet-row .icon { width: 20px; height: 20px; color: var(--text-muted); }
.sheet-row-main { flex: 1 1 auto; min-width: 0; }
.sheet-row-hint { display: block; font-size: calc(12px * var(--text-scale)); color: var(--text-muted); }
.sheet-group-label { font-size: calc(12px * var(--text-scale)); color: var(--text-faint); padding: var(--s3) 4px 4px; }
.sheet-foot { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding-top: var(--s3); font-size: calc(12px * var(--text-scale)); color: var(--text-muted); }

/* The Google walkthrough: numbered steps, the exact string to paste, and what the server already has. */
.setup-guide { border-inline-start: 3px solid var(--accent); }
.setup-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s4); }
.setup-step { display: flex; gap: var(--s3); align-items: flex-start; }
.setup-num {
  flex: 0 0 auto; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--accent); color: #fff; font-size: calc(12px * var(--text-scale)); font-weight: 700;
}
.setup-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; }
.setup-code {
  margin: 0; padding: var(--s3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r);
  font-family: var(--mono); font-size: calc(12px * var(--text-scale)); line-height: calc(19px * var(--text-scale));
  overflow-x: auto; white-space: pre;
}
.copy-row { gap: var(--s2); }
.copy-row input { flex: 1 1 auto; min-width: 0; direction: ltr; }
.setup-env { gap: var(--s2); align-items: center; }
/* The two mailbox routes, each introduced before its row so the choice reads as a choice. */
.route-head { display: flex; flex-direction: column; gap: 2px; margin-top: var(--s2); }
.route-head strong { font-size: calc(13px * var(--text-scale)); }
.setup-note { padding: var(--s2) var(--s3); background: var(--surface-2); border-radius: var(--r); }
.setup-body > .btn { align-self: flex-start; }

/* The one tooltip. Positioned by transform from the top-left corner, so it never has to fight RTL, and
   pointer-events: none so it can never sit between the cursor and the thing being hovered. */
.tip {
  /* Physical top/left on purpose: the position comes from getBoundingClientRect, which is physical too, so
     the same arithmetic is correct in both directions. A logical inset here would mirror it twice. */
  position: fixed; top: 0; left: 0; z-index: 90; pointer-events: none;
  max-width: 260px; padding: 5px 9px;
  background: var(--text); color: var(--bg);
  border-radius: var(--r-sm); box-shadow: var(--shadow-pop);
  font-size: calc(12px * var(--text-scale)); line-height: calc(16px * var(--text-scale)); font-weight: 500;
  white-space: normal; overflow-wrap: anywhere;
}

/* Panes.
 *
 * These used to slide in from the edge as a 560px column. Reading a task or a ticket in a strip pinned to
 * one side, with the page still showing behind it, is the thing Ali actually complained about: it opens at
 * the corner and it is narrow. They open in the middle now, wide enough to read, and the ⤢ makes one fill
 * the screen when that is still not enough. */
.pane-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 35; }
.pane {
  position: fixed; inset: 0; margin: auto;
  width: min(920px, 94vw); height: min(88dvh, 980px);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop); z-index: 36; display: flex; flex-direction: column;
  opacity: 0; transform: scale(.98); transition: opacity var(--ease), transform var(--ease-sheet);
}
.pane.pane--open { opacity: 1; transform: none; }
/* Full screen: nothing but the thing being read. */
.pane.pane--full { width: 100vw; height: 100dvh; max-width: none; border-radius: 0; border: 0; }
/* The ⤢ floats in the corner and the head is padded to leave room, so the close button lands just inside
   it and a long title never runs underneath either of them. */
.pane-head { display: flex; align-items: center; gap: var(--s2); padding: var(--s4); padding-inline-end: calc(var(--s4) + 42px); border-bottom: 1px solid var(--border); }
.pane-full-btn { position: absolute; inset-block-start: 10px; inset-inline-end: var(--s3); z-index: 2; }
.pane-body { flex: 1 1 auto; overflow: auto; padding: var(--s4); }
/* At full screen the text should not run the whole width of a wide monitor — that is harder to read, not easier. */
.pane--full .pane-body > * { max-width: 1100px; margin-inline: auto; }
.pane-foot { display: flex; gap: var(--s2); padding: var(--s3) var(--s4); border-top: 1px solid var(--border); flex-wrap: wrap; }
.pane-grow { margin-inline-start: auto; }
/* A live sample of the chosen text size, so the choice can be judged rather than guessed. */
.text-sample { padding: var(--s3); border: 1px dashed var(--border); border-radius: var(--r); background: var(--surface-2); }

/* Page header & toolbar (§4) */
.page-head { display: flex; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s4); flex-wrap: wrap; }
.page-head-main { flex: 1 1 auto; min-width: 0; }
.page-head h1 .count { color: var(--text-muted); font-weight: 400; }
.page-head-desc { font-size: calc(13px * var(--text-scale)); color: var(--text-muted); margin-top: 2px; }
.page-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.toolbar { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4); }
.toolbar input[type="search"] { min-width: 240px; width: auto; }
.toolbar select { width: auto; min-width: 150px; max-width: 220px; }
.toolbar--filters { margin-bottom: 0; justify-content: flex-end; }
.list-toolbar { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s4); }
.section-title { display: flex; align-items: center; gap: var(--s2); margin: var(--s4) 0 var(--s3); }
.section-title h2 { flex: 1 1 auto; }
.section-title .count { color: var(--text-muted); font-weight: 400; }
.page-section { margin-bottom: var(--s5); }
.card-list { display: flex; flex-direction: column; gap: var(--s3); }

/* ------------------------------------------------------------------ */
/* 5. Assistant (§3)                                                   */
/* ------------------------------------------------------------------ */
/* Three columns: the chat list, the conversation, the panel. Each one hides on its own and the grid
   re-flows, so the conversation always gets whatever the other two give back. */
.assistant { display: grid; grid-template-columns: 288px minmax(0, 1fr) 340px; height: 100%; min-height: 0; }
.assistant.assistant--no-glance { grid-template-columns: 288px minmax(0, 1fr); }
.assistant.assistant--no-rail { grid-template-columns: minmax(0, 1fr) 340px; }
.assistant.assistant--no-rail.assistant--no-glance { grid-template-columns: minmax(0, 1fr); }
.assistant.assistant--embedded { grid-template-columns: minmax(0, 1fr); }
/* With both side columns closed the conversation gets the room, but not the full width of a wide monitor. */
.assistant.assistant--no-rail.assistant--no-glance .assistant-main { padding-inline: clamp(16px, 5vw, 72px); }
.assistant.assistant--no-rail.assistant--no-glance .assistant-col { max-width: 1100px; }
.assistant-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: var(--s4) var(--s5) 0; }
.assistant-col { width: 100%; max-width: 720px; margin-inline: auto; }
.assistant-top { display: flex; flex-direction: column; gap: var(--s3); }
.thread-wrap { flex: 1 1 auto; min-height: 0; position: relative; display: flex; flex-direction: column; }
.thread { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: var(--s3) 0; display: flex; flex-direction: column; gap: var(--s3); }
.composer-wrap { position: sticky; bottom: 0; background: transparent; padding-block: var(--s2) var(--s3); }
/* 2026-10-24 (Ali, screenshot of the assistant: "background besh3 aswad, chil, khalli l field bas"): no dark band
   behind the composer — only the field itself shows; the field keeps its own surface */
.glance { border-inline-start: 1px solid var(--border); background: var(--surface); overflow: auto; padding: var(--s4); display: flex; flex-direction: column; gap: var(--s4); }
.glance h2 { font-size: calc(14px * var(--text-scale)); }
.glance-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.glance-tiles .stat { padding: var(--s2) var(--s3); }
.glance-tiles .stat-value { font-size: calc(18px * var(--text-scale)); line-height: calc(24px * var(--text-scale)); }
.status-row { display: none; gap: var(--s2); overflow-x: auto; scrollbar-width: none; }
.status-row::-webkit-scrollbar { display: none; }
.needs-fold { display: none; }

/* ---- conversation rail: the list of who you are talking to ---- */
.chat-rail { border-inline-end: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; min-height: 0; }
.chat-rail-head { padding: var(--s3); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--s2); flex: 0 0 auto; }
.chat-rail-title { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.chat-rail-title h2 { font-size: calc(15px * var(--text-scale)); margin: 0; }
.chat-rail-search { width: 100%; }
.chat-rail-list { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: var(--s2); display: flex; flex-direction: column; gap: 2px; }
.chat-rail-empty { padding: var(--s3); text-align: center; }
.chat-rail-row { display: flex; align-items: flex-start; gap: var(--s2); width: 100%; text-align: start; padding: var(--s2); border: 0; border-radius: var(--r); background: none; color: var(--text); min-height: 56px; }
/* 2026-10-18 (Ali's screenshot: "CLAUDE CODE" over the next chat's title): the list is a flex column, so rows shrank to their 56px
   min-height and the third line (the Claude Code badge) spilled onto the row below. Rows keep their full height. */
.chat-rail-row { flex-shrink: 0; }
.chat-rail-row:hover { background: var(--surface-2); }
.chat-rail-row.is-active { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.chat-rail-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.chat-rail-line { display: flex; align-items: baseline; gap: var(--s2); min-width: 0; }
.chat-rail-name { font-weight: 600; font-size: calc(14px * var(--text-scale)); flex: 1 1 auto; }
.chat-rail-time { flex: 0 0 auto; color: var(--text-muted); font-size: calc(11px * var(--text-scale)); }
.chat-rail-preview { flex: 1 1 auto; font-size: calc(12px * var(--text-scale)); color: var(--text-muted); }
.chat-rail-pin { flex: 0 0 auto; color: var(--text-muted); display: inline-flex; }
.chat-rail-pin .icon { width: 14px; height: 14px; }
.chat-rail-badge { align-self: flex-start; font-size: calc(10px * var(--text-scale)); letter-spacing: .02em; text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 0 6px; }
/* Archive / delete for one thread. Hidden until the row is hovered or focused; long-press reaches it on touch. */
.chat-rail-menu { flex: 0 0 auto; align-self: center; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--text-muted); opacity: 0; }
.chat-rail-row:hover .chat-rail-menu, .chat-rail-row:focus-within .chat-rail-menu, .chat-rail-menu:focus-visible { opacity: 1; }
.chat-rail-menu:hover { background: var(--border); color: var(--text); }
.chat-rail-menu .icon { width: 15px; height: 15px; }
@media (hover: none) { .chat-rail-menu { opacity: 1; } }
.sheet-row--danger { color: var(--danger); }
.sheet-row--danger .sheet-row-hint { color: color-mix(in srgb, var(--danger) 70%, var(--text-muted)); }

/* ---- who this thread is with: the name, and nothing else ---- */
.chat-head { display: flex; align-items: center; gap: var(--s3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s2) var(--s3); }
.chat-head-main { flex: 1 1 auto; min-width: 0; }
.chat-head-name { display: flex; align-items: center; gap: var(--s2); font-size: calc(17px * var(--text-scale)); font-weight: 600; line-height: calc(24px * var(--text-scale)); }
.chat-head-sub { display: flex; align-items: center; gap: var(--s2); font-size: calc(12px * var(--text-scale)); color: var(--text-muted); }
.chat-head-end { display: flex; align-items: center; gap: var(--s2); flex: 0 0 auto; }
.chat-head--slim { padding: var(--s2) var(--s3); }
/* The two view toggles sit together in the top bar, separated from the actions beside them. */
.topbar-views { display: inline-flex; align-items: center; gap: 2px; padding-inline-end: var(--s2); margin-inline-end: var(--s1); border-inline-end: 1px solid var(--border); }
.assistant { position: relative; }

/* ---- pinned messages ---- */
.pinned-strip { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.pinned-head { display: flex; align-items: center; gap: var(--s2); width: 100%; padding: 6px var(--s3); border: 0; background: none; color: var(--text-muted); font-size: calc(12px * var(--text-scale)); text-align: start; }
.pinned-head .icon:last-child { margin-inline-start: auto; }
.pinned-list { display: flex; flex-direction: column; }
.pinned-row { display: flex; align-items: center; gap: var(--s2); width: 100%; padding: 6px var(--s3); border: 0; border-top: 1px solid var(--border); background: none; color: var(--text); font-size: calc(12px * var(--text-scale)); text-align: start; min-width: 0; }
.pinned-list > .pinned-row:first-child { border-top: 0; }
.pinned-row:hover { background: var(--surface-2); }
.pinned-row .icon { flex: 0 0 auto; width: 14px; height: 14px; color: var(--text-muted); }
.pinned-unpin { margin-inline-start: auto; display: inline-flex; color: var(--text-muted); }
/* Per-message actions.
 *
 * One horizontal bar tucked under the bubble's bottom edge — five buttons stacked in a column ran down the
 * side of every message and looked like a ladder. It floats over the gap rather than taking a line of its
 * own, so the conversation does not grow a row of controls between every pair of messages. */
.msg-acts {
  position: absolute; inset-block-end: -15px; inset-inline-start: 8px; z-index: 3;
  display: flex; flex-direction: row; gap: 1px; padding: 2px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill);
  box-shadow: var(--shadow-pop); opacity: 0; transition: opacity .12s;
}
.msg--user .msg-acts { inset-inline-start: auto; inset-inline-end: 8px; }
.msg-act { width: 28px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--r-pill); background: none; color: var(--text-muted); }
.msg-act:hover { color: var(--text); background: var(--surface-2); }
.msg-act .icon { width: 14px; height: 14px; }
.msg-act--danger:hover { color: var(--danger); }
/* Delivery ticks, tucked against the timestamp. Coloured once the CEO has answered — the signal a chat app gives. */
.msg-ticks { display: inline-flex; align-items: center; margin-inline-start: 4px; vertical-align: -2px; color: var(--text-faint); }
.msg-ticks .icon { width: 13px; height: 13px; }
.msg-ticks--read { color: var(--accent); }
/* The reaction sits inline with the timestamp rather than floating, so it never fights the action bar. */
.msg-reaction {
  margin-inline-start: 6px; min-width: 22px; height: 20px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center; vertical-align: -4px;
  border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface-2);
  font-size: calc(12px * var(--text-scale)); line-height: 1;
}
.msg-reaction:hover { border-color: var(--danger); }
.reaction-menu {
  position: absolute; inset-block-start: -40px; inset-inline-end: 0; z-index: 6;
  display: flex; gap: 2px; padding: 4px; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-pill); box-shadow: var(--shadow-pop);
}
.msg--user .reaction-menu { inset-inline-end: auto; inset-inline-start: 0; }
.reaction-pick { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: none; font-size: calc(17px * var(--text-scale)); line-height: 1; }
.reaction-pick:hover { background: var(--surface-2); }
.reaction-pick.is-on { background: color-mix(in srgb, var(--accent) 25%, transparent); }
.reaction-clear { color: var(--text-muted); }
.reaction-clear .icon { width: 14px; height: 14px; }
.msg:hover .msg-acts, .msg:focus-within .msg-acts { opacity: 1; }
/* A pinned message keeps its control visible, because the pin is state and not just an offered action. */
.msg-acts:has(.is-pinned) { opacity: 1; }
.msg-pin.is-pinned { color: var(--accent); }
.msg--user .msg-acts { inset-inline-end: auto; inset-inline-start: -30px; }
.msg--pinned > .msg-body { box-shadow: inset 2px 0 0 var(--accent); }
.msg--flash > .msg-body { animation: msgFlash 1.4s ease-out; }
@keyframes msgFlash { 0%, 40% { background: color-mix(in srgb, var(--accent) 26%, transparent); } 100% { background: inherit; } }

/* ---- people picker ---- */
.picker-list { display: flex; flex-direction: column; gap: 2px; max-height: 48vh; overflow: auto; }
.picker-row { display: flex; align-items: center; gap: var(--s2); width: 100%; text-align: start; padding: var(--s2); border: 0; border-radius: var(--r); background: none; color: var(--text); }
.picker-row:hover { background: var(--surface-2); }
.picker-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.picker-name { font-weight: 600; font-size: calc(14px * var(--text-scale)); }
.picker-sub { color: var(--text-muted); }

.composer-lang { flex: 0 0 auto; align-self: flex-end; min-width: 44px; font-size: calc(12px * var(--text-scale)); }
.avatar img, .company-logo-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.company-logo-preview { width: 56px; height: 56px; flex: 0 0 auto; }

.chooser { display: flex; align-items: center; gap: var(--s2); }
.chooser-item { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding-inline: 8px 10px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); color: var(--text); --co: var(--border-strong); flex: 1 1 0; min-width: 0; justify-content: flex-start; }
.chooser-item .co-square { width: 20px; height: 20px; border-radius: 5px; background: var(--co); flex: 0 0 auto; }
.chooser-item .name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chooser-item:hover { background: var(--surface-2); }
.chooser-item[aria-checked="true"] { background: color-mix(in srgb, var(--co) 16%, transparent); border-color: var(--co); }
.chooser-count { margin-inline-start: auto; }
.chooser-all { flex: 0 0 auto; font-size: calc(13px * var(--text-scale)); color: var(--text-muted); white-space: nowrap; }
.chooser-emphasis { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s5); margin: var(--s4) 0; }
.chooser-emphasis h2 { font-size: calc(20px * var(--text-scale)); line-height: calc(28px * var(--text-scale)); margin-bottom: var(--s4); }
.chooser-emphasis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s3); }
.chooser-big { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); padding: var(--s4); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); text-align: start; color: inherit; --co: var(--border-strong); min-height: 160px; }
.chooser-big:hover { border-color: var(--co); background: color-mix(in srgb, var(--co) 10%, var(--surface-2)); }
.chooser-big .co-square { width: 48px; height: 48px; border-radius: var(--r); background: var(--co); }
.chooser-big .name { font-weight: 600; font-size: calc(16px * var(--text-scale)); }
.chooser-big .type, .chooser-big .goal, .chooser-big .count { font-size: calc(13px * var(--text-scale)); color: var(--text-muted); }
.chooser-big .goal { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Thread */
.thread-day { align-self: center; font-size: calc(12px * var(--text-scale)); color: var(--text-faint); padding: 2px 10px; background: var(--surface-2); border-radius: var(--r-pill); }
.thread-top { align-self: center; }
.msg { display: flex; gap: var(--s2); max-width: 82%; align-items: flex-start; position: relative; }
.msg--user { align-self: flex-end; flex-direction: row-reverse; }
.msg--user .msg-body { background: color-mix(in srgb, var(--co, var(--accent)) 12%, transparent); border: 1px solid color-mix(in srgb, var(--co, var(--accent)) 30%, transparent); border-radius: 14px; padding: 8px 12px; }
.msg--user[data-co="personal-office"] { --co: var(--co-personal-office); } .msg--user[data-co="media-growth"] { --co: var(--co-media-growth); } .msg--user[data-co="it-solutions"] { --co: var(--co-it-solutions); }
.msg--assistant { align-self: flex-start; }
.msg--assistant .msg-body { padding-top: 3px; }
.msg--system { align-self: center; max-width: 100%; color: var(--text-muted); font-size: calc(13px * var(--text-scale)); background: var(--surface-2); border-radius: var(--r); padding: 6px 12px; }
.msg--system .msg-body { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.msg--banner { align-self: stretch; max-width: 100%; }
.msg-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.msg-body p { margin: 0; overflow-wrap: anywhere; }
.msg-body p + p { margin-top: 6px; }
.msg-body ul, .msg-body ol { margin-block: 4px; }
.msg-body code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
/* The live board inside the Logistics page (2026-10-05: "lesh board mabayan kell zghir?").
   It takes the viewport minus the shell above it, and Full screen lifts it out of the page. */
/* Every pixel above the board is a pixel of board. The one-line summary, the tab row that also
   carries the board's buttons, and the board itself, each as tight as it can honestly be
   (2026-10-05: "the board kabbirle yeha"). */
.board-strip { padding: 7px 12px; margin-bottom: 8px; }
.board-head { margin-bottom: 14px; }
/* Below this the per-courier breakdown wraps onto a second line and costs the board another 28px;
   the totals and the date stay, and the breakdown is one tap away in the board itself. */
@media (max-width: 1440px) { .board-strip .board-strip-courier { display: none; } }
/* It is the page here, not a card on it, so it breaks out of the page's own gutter — those two
   paddings were the widest thing between him and the board. */
/* In line with the tabs above it, on the page's own background (2026-10-07: breaking out of the
   gutter put the board's filters flush against the sidebar while everything above sat 24px in). */
.board-wrap { position: relative; }
.board-frame {
  /* The height is MEASURED in boardFrame() — from the frame's own top to the bottom of the window,
     so whatever sits above it (a header, a tab row, the Delivery yesterday card) cannot shrink it.
     This is only the value before the first measurement and the one a print or a no-JS view gets. */
  display: block; width: 100%; height: calc(100dvh - 190px); min-height: 420px;
  border: 0; background: transparent;
}
/* Hidden until full screen: in the page the controls live in the row above, clear of the board. */
.board-wrap-bar { display: none; }
.board-wrap--full .board-wrap-bar { display: flex; gap: 6px; position: absolute; z-index: 3; }
.board-wrap-bar .btn { box-shadow: 0 2px 10px rgba(0,0,0,.22); }
.board-wrap--full {
  position: fixed; inset: 0; z-index: 90; background: var(--bg); padding: 0; margin: 0;
}
/* !important because the in-page height is set as an inline style by the measurement. */
.board-wrap--full .board-frame { height: 100dvh !important; min-height: 0; border: 0; border-radius: 0; }
.board-wrap--full .board-wrap-bar { top: 12px; inset-inline-end: 16px; }
/* Nothing behind a full-screen board should scroll under it. */
body.has-full-board { overflow: hidden; }
@media (max-width: 899px) { .board-frame { height: calc(100dvh - 230px); min-height: 420px; } }

/* An email the assistant named, as a button that opens it (2026-10-04). Sits inside a sentence, so it
   wraps with the text rather than forcing a line of its own. */
.cite { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; vertical-align: baseline;
  padding: 1px 7px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2);
  color: var(--accent); font: inherit; font-size: calc(13px * var(--text-scale)); text-align: start;
  cursor: pointer; transition: background var(--ease), border-color var(--ease); }
.cite:hover, .cite:focus-visible { background: var(--surface-3, var(--surface-2)); border-color: var(--accent); }
.cite .icon { flex: none; opacity: .8; }
.cite span { overflow-wrap: anywhere; }
.msg-time { font-size: calc(12px * var(--text-scale)); color: var(--text-faint); opacity: 0; transition: opacity var(--ease); }
.msg:hover .msg-time, .msg:focus-within .msg-time, .msg.msg--show-time .msg-time { opacity: 1; }
.msg-caption { font-size: calc(12px * var(--text-scale)); color: var(--text-faint); }
.msg-error { display: flex; align-items: center; gap: var(--s2); color: var(--danger); font-size: calc(13px * var(--text-scale)); }
.typing { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); font-size: calc(13px * var(--text-scale)); }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); animation: typing 1.2s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes typing { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.scroll-pill { position: absolute; bottom: 8px; inset-inline: 0; margin-inline: auto; width: max-content; z-index: 3; box-shadow: var(--shadow-pop); border-radius: var(--r-pill); }
.greeting { font-size: calc(24px * var(--text-scale)); line-height: calc(32px * var(--text-scale)); font-weight: 600; }
.coach { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); max-width: 100%; align-self: stretch; }
.coach ol { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.coach-foot { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.suggestions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.hint-line { font-size: calc(12px * var(--text-scale)); color: var(--text-faint); }

/* Action cards */
.action-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: 6px; min-width: min(100%, 320px); }
.action-card-head { display: flex; align-items: center; gap: 6px; font-size: calc(12px * var(--text-scale)); color: var(--text-muted); }
.action-card-head .icon { color: var(--success); }
.action-card-title { font-weight: 500; overflow-wrap: anywhere; }
.action-card-meta { font-size: calc(12px * var(--text-scale)); color: var(--text-muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.action-card-note { font-size: calc(12px * var(--text-scale)); color: var(--warning); }
.action-card-note--neutral { color: var(--text-muted); }
.action-card-actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: 2px; }
.action-card--stopped { opacity: .75; }

/* Composer */
.composer { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px; padding: 6px 6px 6px; display: flex; align-items: flex-end; gap: 4px; }
.composer:focus-within { border-color: var(--accent); }
.composer-input { flex: 1 1 auto; min-height: 36px; max-height: 156px; height: 36px; padding: 7px 8px; border: 0; background: transparent; resize: none; line-height: calc(22px * var(--text-scale)); overflow-y: hidden; }
.composer-input:focus { outline: none; }
.composer-input::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer-mic { position: relative; }
.composer-mic[data-listening="true"] { color: var(--danger); }
.composer-mic[data-listening="true"]::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--danger); animation: ring 1.2s ease-out infinite; }
@keyframes ring { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
.composer-send { min-width: 44px; }
.composer-hint { font-size: calc(12px * var(--text-scale)); color: var(--text-faint); padding: 4px 8px 0; display: flex; justify-content: space-between; gap: var(--s2); }
.composer-status { font-size: calc(12px * var(--text-scale)); color: var(--text-muted); padding: 2px 8px; }
/* The other dictation language, offered inside the "listening in…" line rather than as a standing setting. */
.voice-lang-switch { min-height: 0; margin-inline-start: 8px; padding: 2px 8px; border-radius: 999px; font-size: inherit; text-decoration: underline; }
.slash-menu { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); padding: var(--s1); margin-bottom: var(--s2); max-height: 260px; overflow: auto; }
.slash-item { display: flex; gap: var(--s3); align-items: baseline; width: 100%; padding: 6px 10px; border: 0; background: none; border-radius: var(--r-sm); text-align: start; color: inherit; }
.slash-item:hover, .slash-item[aria-selected="true"] { background: var(--surface-3); }
.slash-item code { min-width: 80px; color: var(--accent); background: none; }
.slash-item span { font-size: calc(13px * var(--text-scale)); color: var(--text-muted); }

/* Plan */
.plan { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: 6px; font-size: calc(13px * var(--text-scale)); }
.plan-steps { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.plan-step { display: inline-flex; align-items: center; gap: 4px; }
.plan-step .sep { color: var(--text-faint); }
.plan-estimate { color: var(--text-muted); font-size: calc(12px * var(--text-scale)); }
.plan-strip { margin-bottom: var(--s2); }
.plan-strip .plan-title { font-weight: 500; }

/* ------------------------------------------------------------------ */
/* 5b. Lists, task cards, inspector, drawers (§4.1–4.6)                */
/* ------------------------------------------------------------------ */
.cols-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }
.stat-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: var(--s4); }
.overview-band { margin-bottom: var(--s4); }
.overview-band h2 { font-size: calc(20px * var(--text-scale)); line-height: calc(28px * var(--text-scale)); }
.needs-block { border-inline-start: 3px solid var(--warning); padding-inline-start: var(--s3); }

/* Rows shared by tasks / projects / tickets */
.row-title { font-weight: 500; }
.row-sub { font-size: calc(12px * var(--text-scale)); line-height: calc(16px * var(--text-scale)); color: var(--text-muted); }
.row-sub-narrow { display: none; }
.row-chevron { padding-inline: 4px; }
.row-expand td { background: var(--surface-2); }
.handoffs { display: flex; flex-direction: column; gap: var(--s2); }
.handoff { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.handoff-who { font-size: calc(12px * var(--text-scale)); font-weight: 500; white-space: nowrap; }
/* Row actions say what they do, in words.
 *
 * They were icon-only on anything wider than a phone, which left a project row showing four unexplained
 * glyphs. A tooltip helps once you already suspect a button is there; the word is what makes it obvious. */
.btn-act .btn-label { display: inline; }
.row-actions .btn-act { white-space: nowrap; }
.list-foot { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s3); flex-wrap: wrap; }
.tab--warn[aria-selected="true"] { color: var(--warning); border-bottom-color: var(--warning); }
.work-seg { display: none; margin-bottom: var(--s3); }
.work-seg .seg-item { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.table--tickets select, .table--tasks select { max-width: 170px; }
.table--tasks .col-task { width: 44%; }
.table--tasks .col-agent { max-width: 170px; }
.table--tasks .col-agent .ellipsis { max-width: 120px; }
.table--tasks .col-workflow { max-width: 140px; }
.table--tasks .col-workflow .small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table--tasks .col-actions, .table--projects .col-actions { width: 1%; white-space: nowrap; }
/* Pagination. Sticky to the bottom of the list block so "next page" is reachable without scrolling back. */
.pager { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; padding: var(--s3) 0; }
.pager-count { color: var(--text-muted); }
.pager-size { width: auto; min-width: 120px; }
.pager-of { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pager-jump { width: 56px; text-align: center; }
.icon-flip { transform: scaleX(-1); }
[dir="rtl"] .icon-flip { transform: scaleX(1); }
[dir="rtl"] .icon-dir.icon-flip { transform: scaleX(-1) scaleX(-1); }

/* Ticket columns Ali could not see: where it came from and which part of the company owns it. */
.table--tickets .col-source, .table--tickets .col-section { max-width: 200px; }
.src-cell { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.src-cell .icon { width: 14px; height: 14px; flex: 0 0 auto; color: var(--text-muted); }
/* On a phone the columns collapse into this line, so it carries source, reporter, section and the date. */
.row-sub-part { display: inline-flex; align-items: center; gap: 3px; margin-inline-end: 8px; }
/* Said once, not twice (2026-09-21). Where the table still has its Source / Reported by / Section / Created
   columns, the sub-line does not repeat them; below 900px the columns fold away and these come back. */
.row-sub-part--dup { display: none; }
/* A date that wrapped onto three lines was most of what made the rows tall. */
.table--tickets .col-created, .table--tickets .col-status { white-space: nowrap; }
.row-sub-part .icon { width: 12px; height: 12px; color: var(--text-faint); flex: 0 0 auto; }
/* The section a group belongs to: a quiet line on the tile until it is set, not a dropdown shouting
   "Not assigned" on all 55 of them. */
.group-owner {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; margin-top: 4px;
  padding: 1px 6px 1px 4px; border: 1px dashed var(--border); border-radius: var(--r-pill);
  background: none; color: var(--text-faint); font-size: calc(11px * var(--text-scale)); line-height: calc(17px * var(--text-scale));
}
.group-owner .icon { width: 12px; height: 12px; flex: 0 0 auto; }
.group-owner:hover { border-color: var(--accent); color: var(--text); }
.group-owner.is-set { border-style: solid; border-color: var(--border-strong); color: var(--text-muted); }
.sheet-row--sub { padding-inline-start: var(--s6); }

.table--tickets .col-status { width: 124px; }
.table--tickets .col-status select { width: 100%; max-width: 100%; }
.table--projects .col-task { width: 50%; }
/*
 * Fixed layout, so the widths below are obeyed (2026-09-21).
 *
 * With the default automatic layout the browser hands space to whichever column has the longest words, and
 * on his board that was Source and Section — the title, which is the thing he reads, was squeezed to about
 * 140px and every row stood three lines tall. The title takes what is left over now.
 */
.table--tickets { table-layout: fixed; }
/* No min-width: under a fixed layout this column takes whatever the others leave, and a floor on it only
   pushes the table wider than its container. */
.table--tickets .col-task { width: auto; }
.table--tickets .col-id { width: 92px; white-space: nowrap; }
/* Cell padding is added on top of these, so they are kept a little under what the arithmetic allows —
   the table was ending up 16px wider than its container. */
.table--tickets .col-source { width: 12%; }
.table--tickets .col-customer { width: 10%; }
.table--tickets .col-section { width: 12%; }
.table--tickets .col-priority { width: 92px; }
/* Wide enough for "21 Sept 2026 · 14:06" in one line — it was being cut at the last digit. */
.table--tickets .col-created { width: 164px; }
/* Anything that would otherwise wrap in a narrow cell is cut with an ellipsis; the full text is the title. */
.table--tickets .col-source .src-cell, .table--tickets .col-customer bdi, .table--tickets .col-section bdi { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Task inspector (§4.4) and drawers */
.task-head { display: flex; align-items: center; gap: var(--s2); }
.task-body, .pane-body { display: flex; flex-direction: column; gap: var(--s3); }
.task-title { font-size: calc(20px * var(--text-scale)); line-height: calc(28px * var(--text-scale)); font-weight: 600; }
.task-progress { display: flex; flex-direction: column; gap: 4px; }
.meta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s3); }
.meta-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.meta-label { font-size: calc(12px * var(--text-scale)); color: var(--text-muted); }
.meta-value { font-size: calc(13px * var(--text-scale)); overflow: hidden; text-overflow: ellipsis; }
.tabpanel { min-height: 72px; }
.result-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: var(--s3); max-height: 320px; overflow: auto; font-size: calc(13px * var(--text-scale)); }
.result-box--error { font-family: var(--mono); white-space: pre-wrap; word-break: break-word; }
.timeline { list-style: none; display: flex; flex-direction: column; gap: var(--s3); margin: 0; padding: 0; }
.tl-step { display: flex; gap: var(--s3); }
.tl-index { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--border); font-size: calc(12px * var(--text-scale)); }
.tl-index .icon { width: 14px; height: 14px; }
.tl-step--completed .tl-index { border-color: var(--success); color: var(--success); }
.tl-step--running .tl-index { border-color: var(--info); color: var(--info); }
.tl-step--failed .tl-index { border-color: var(--danger); color: var(--danger); }
.disclosure > summary { cursor: pointer; font-size: calc(13px * var(--text-scale)); font-weight: 500; padding: 6px 0; }
.page--taskfull { display: flex; flex-direction: column; }
.page--taskfull .task-head { position: sticky; top: 0; z-index: 6; background: var(--bg); border-bottom: 1px solid var(--border); padding-block: var(--s2); margin-bottom: var(--s3); }
.task-actionbar { position: sticky; bottom: 0; z-index: 6; display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; background: var(--surface); border-top: 1px solid var(--border); padding: var(--s3) var(--page-pad); margin: var(--s4) calc(var(--page-pad) * -1) 0; }

/* ------------------------------------------------------------------ */
/* 5c. Team, agent editor, Company, Activity, Settings, Portfolio, Help */
/*     (§4.7–§4.13)                                                     */
/* ------------------------------------------------------------------ */
.prose-wide { max-width: 900px; }
.company-body { max-width: 800px; }   /* §4.9: single column of cards, max 800 */
.team-body { margin-top: var(--s4); }
.team-grid, .dept-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); align-items: start; }
.team-card { display: flex; flex-direction: column; gap: var(--s2); color: inherit; text-decoration: none; }
.team-card:hover { border-color: var(--border-strong); text-decoration: none; }
/* An AI worker is orange wherever it appears, so it never has to be told apart by reading (Ali, 2026-09-21).
   `color-mix` against the surface keeps it a tint in every theme rather than a block of orange. */
:root { --ai-orange: #f59e0b; }
.row--ai > td { background: color-mix(in srgb, var(--ai-orange) 12%, transparent); }
.row--ai:hover > td { background: color-mix(in srgb, var(--ai-orange) 20%, transparent); }
.row--ai > td:first-child { box-shadow: inset 3px 0 0 var(--ai-orange); }
[dir="rtl"] .row--ai > td:first-child { box-shadow: inset -3px 0 0 var(--ai-orange); }
.team-card--ai, .tree-node--ai { background: color-mix(in srgb, var(--ai-orange) 12%, var(--surface-2)); border-color: color-mix(in srgb, var(--ai-orange) 45%, transparent); }
.team-card--ai:hover, .tree-node--ai:hover { border-color: var(--ai-orange); }
.chip--ai { color: var(--ai-orange); border-color: color-mix(in srgb, var(--ai-orange) 45%, transparent); background: color-mix(in srgb, var(--ai-orange) 14%, transparent); }
/* A missing manager is a gap in the escalation chain, so it reads as a gap rather than as a dash. */
/* The AI Meeting Recorder's visits on the Meetings page (2026-09-22). */
.rec2-strip { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.rec2-strip .list-row { padding-inline: 0; }
/* The recorder's name and address must give way on a narrow phone rather than widen the card (320px, 2026-09-25). */
.rec2-strip strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec2-strip .caption { overflow-wrap: anywhere; }
.rec2-strip .list-row-title { flex-wrap: wrap; }
.rec2-st--in_waiting_room { color: var(--warning); background: color-mix(in srgb, var(--warning) calc(var(--tint-alpha) * 100%), transparent); border-color: transparent; }
.rec2-st--in_call_recording { color: var(--danger); background: color-mix(in srgb, var(--danger) calc(var(--tint-alpha) * 100%), transparent); border-color: transparent; }
.rec2-st--done_saved { color: var(--success); background: color-mix(in srgb, var(--success) calc(var(--tint-alpha) * 100%), transparent); border-color: transparent; }
.rec2-st--fatal, .rec2-st--not_admitted, .rec2-st--no_recording { color: var(--text-muted); }
.mtg-steps li.mtg-ok, .mtg-steps li.mtg-warn { list-style: none; }

/* A remove button inside a chip — the "senders never summarised" list. */
.chip-x { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-inline-start: 4px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; opacity: .6; cursor: pointer; }
.chip-x:hover { opacity: 1; background: var(--surface-3); }
.chip-x .icon { width: 12px; height: 12px; }
.chip--warn-soft { color: var(--warning); border-color: transparent; background: color-mix(in srgb, var(--warning) calc(var(--tint-alpha) * 100%), transparent); }
.table--team .col-manager { max-width: 160px; }
/* Where someone works (2026-09-22). Orange is taken — it means "AI worker" — so places use the other tints. */
.table--team .col-location { max-width: 190px; }
.table--team .col-location .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip--loc { border-color: transparent; background: var(--surface-3); color: var(--text-2, inherit); }
.chip--loc-warehouse_riyadh, .chip--loc-warehouse_jeddah { color: var(--info); background: color-mix(in srgb, var(--info) calc(var(--tint-alpha) * 100%), transparent); }
.chip--loc-central_kitchen, .chip--loc-bakery { color: var(--success); background: color-mix(in srgb, var(--success) calc(var(--tint-alpha) * 100%), transparent); }
.chip--loc-store { color: var(--accent); background: color-mix(in srgb, var(--accent) calc(var(--tint-alpha) * 100%), transparent); }
.table--team .col-task { width: 34%; }
.table--team .col-dept { max-width: 200px; }
.table--team .col-model { max-width: 210px; }
.table--team .col-done { width: 1%; text-align: end; white-space: nowrap; }
.dept-card { display: flex; flex-direction: column; gap: var(--s3); }
.dept-section { display: flex; flex-direction: column; gap: 6px; }
.account-card { display: flex; flex-direction: column; gap: var(--s3); }

/* Hierarchy (§4.7) — the container is dir="ltr" at every language. */
.tree-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); padding: var(--s4); }
.tree { transform-origin: top center; transition: transform var(--ease); width: max-content; margin-inline: auto; }
.tree-root, .tree-children { display: flex; justify-content: center; gap: var(--s3); list-style: none; margin: 0; padding: 0; position: relative; }
.tree-children { padding-top: 0; }
.tree-children::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 11px; background: var(--border-strong); }
.tree-root > .tree-branch { padding-top: 0; }
.tree-root > .tree-branch::before, .tree-root > .tree-branch::after { display: none; }
.tree-branch { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 22px; }
.tree-branch::after { content: ""; position: absolute; top: 11px; left: 0; right: 0; height: 1px; background: var(--border-strong); }
.tree-branch::before { content: ""; position: absolute; top: 11px; left: 50%; width: 1px; height: 11px; background: var(--border-strong); }
.tree-branch:first-child::after { left: 50%; }
.tree-branch:last-child::after { right: 50%; }
.tree-branch:only-child::after { display: none; }
.tree-node { width: 200px; min-height: 64px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: 8px 10px; text-align: start; color: inherit; }
.tree-node:hover { border-color: var(--border-strong); background: var(--surface-3); }
.tree-node .tree-name { font-weight: 500; max-width: 130px; }
.tree-node .tree-role { max-width: 178px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-node--owner { border-color: var(--accent); }
.tree-node--executive { border-inline-start: 3px solid var(--level); }
.tree-node--manager { border-inline-start: 3px solid color-mix(in srgb, var(--level) 60%, transparent); }
.tree-node--specialist { border-inline-start: 3px solid var(--border-strong); }
.tree--searching .tree-node { opacity: .35; }
.tree--searching .node--hit { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.tree-mobile { display: flex; flex-direction: column; gap: var(--s2); }
.tree-m-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.tree-m-row .tree-node { flex: 1 1 200px; width: auto; }
.tree-m-kids { list-style: none; margin: 0; padding-inline-start: var(--s4); width: 100%; display: flex; flex-direction: column; gap: 6px; }

/* Workroom */
.wr-feed { display: flex; flex-direction: column; gap: var(--s2); }
.wr-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s3); display: flex; flex-direction: column; gap: 4px; }
.wr-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wr-who { font-size: calc(13px * var(--text-scale)); font-weight: 500; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-text { font-size: calc(13px * var(--text-scale)); }

/* Sticky save bars, control cards, steppers (§4.9, §4.11) */
.sticky-save { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: var(--s2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s2) var(--s3); }
.card > .sticky-save, .card .sticky-save.card-foot { position: static; border: 0; border-top: 1px solid var(--border); border-radius: 0; padding-inline: 0; }
.radio-cards { display: flex; flex-direction: column; gap: var(--s2); }
.radio-card { display: flex; gap: var(--s3); align-items: flex-start; border: 1px solid var(--border); border-radius: var(--r); padding: var(--s3); cursor: pointer; }
.radio-card:hover { border-color: var(--border-strong); }
.radio-card:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) calc(var(--tint-alpha) * 100%), transparent); }
.radio-card input { margin-top: 3px; accent-color: var(--accent); width: 18px; height: 18px; }
.radio-card .row-title { display: block; }
.radio-card .caption { display: block; }
.tier-row { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; padding-block: var(--s2); border-bottom: 1px solid var(--border); }
.tier-row:last-of-type { border-bottom: 0; }
.tier-row select { width: auto; min-width: 260px; max-width: 100%; }
.stepper { gap: var(--s2); }
.stepper-value { min-width: 40px; text-align: center; font-size: calc(16px * var(--text-scale)); font-weight: 600; }

/* Activity (§4.10) */
.table--audit { min-width: 760px; }
.table--audit .col-time { width: 1%; white-space: nowrap; }
.table--audit .col-event { width: 1%; white-space: nowrap; }
.table--audit .col-details { width: 46%; }
.table--audit .col-co, .table--audit .col-open { width: 1%; white-space: nowrap; }
.table--audit tr.row { cursor: default; }
.audit-details { margin: 0; font-family: var(--mono); font-size: calc(12px * var(--text-scale)); line-height: calc(16px * var(--text-scale)); white-space: pre-wrap; word-break: break-word; max-height: 120px; overflow: hidden; color: var(--text-muted); }

/* Settings (§4.11) */
.settings-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s5); align-items: start; }
.settings-layout--sidebar-only { display: block; max-width: 1040px; }
.sidebar-hint--title { display: flex; flex-direction: column; gap: 3px; min-height: 62px; justify-content: center; }
.sidebar-title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.sidebar-title-row .sidebar-toggle { margin: 0; }
.sidebar-hint--title strong { font-size: calc(15px * var(--text-scale)); color: var(--text); }
.sidebar-hint--title .small { color: var(--text-muted); line-height: 1.3; }
.section-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; }
.section-nav-item { display: flex; align-items: center; min-height: 36px; padding-inline: var(--s3); border-radius: var(--r); color: var(--text-muted); }
.section-nav-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.section-nav-item[aria-current="page"] { background: var(--surface-2); color: var(--text); border-inline-start: 2px solid var(--accent); font-weight: 500; }
.settings-content { max-width: 960px; display: flex; flex-direction: column; gap: var(--s4); }
.settings-section-title { font-size: calc(16px * var(--text-scale)); }
.settings-acc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s3); }
.settings-acc > summary { cursor: pointer; font-weight: 500; min-height: 32px; display: flex; align-items: center; }
.theme-cards { display: flex; gap: var(--s3); flex-wrap: wrap; }
.theme-card { display: flex; flex-direction: column; gap: 6px; align-items: center; background: none; border: 1px solid var(--border); border-radius: var(--r); padding: var(--s2); color: inherit; }
.theme-card[aria-pressed="true"] { border-color: var(--accent); }
.theme-preview { display: flex; align-items: flex-end; gap: 4px; width: 96px; height: 56px; border-radius: var(--r-sm); border: 1px solid var(--border); padding: 8px; }
.theme-preview span { display: block; height: 16px; border-radius: 3px; }
.theme-preview span:first-child { flex: 1 1 auto; }
.theme-preview span:last-child { width: 22px; }

/* Portfolio (§4.12) */
.portfolio-card { display: flex; flex-direction: column; gap: var(--s3); }
.portfolio-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.portfolio-stat { display: flex; flex-direction: column; }
.portfolio-card--personal-office { border-top: 3px solid var(--co-personal-office); }
.portfolio-card--media-growth { border-top: 3px solid var(--co-media-growth); }
.portfolio-card--it-solutions { border-top: 3px solid var(--co-it-solutions); }

/* Help (§4.13) */
.help-section { margin-bottom: var(--s6); scroll-margin-top: 16px; }
.help-flow { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-inline-start: 20px; font-size: calc(13px * var(--text-scale)); }
.table--help { min-width: 720px; }
.table--help tr.row { cursor: default; }

/* ------------------------------------------------------------------ */
/* 5d. "What can I ask" block, tool trail, Ask-CEO drawer               */
/*     (§3.2 state B, §3.9)                                             */
/* ------------------------------------------------------------------ */
/* The capability strip that used to live here was removed with the CEO card: the header is now the name
   and nothing else, and "what can he do?" belongs to the ask block and the help page. */

.ask-block { align-self: stretch; max-width: 100%; display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s3) var(--s4); }
.ask-block h2 { font-size: calc(14px * var(--text-scale)); margin-bottom: 2px; }
.ask-row { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 40px; padding: 6px 8px; margin-inline: -8px; width: calc(100% + 16px); background: none; border: 0; border-radius: var(--r); color: inherit; text-align: start; }
.ask-row:hover { background: var(--surface-2); }
.ask-row-label { flex: 0 0 auto; min-width: 56px; font-size: calc(12px * var(--text-scale)); font-weight: 600; color: var(--accent); }
.ask-row-ex { flex: 1 1 auto; min-width: 0; font-size: calc(13px * var(--text-scale)); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-row .icon { flex: 0 0 auto; color: var(--text-faint); }
.ask-block--panel { margin-bottom: var(--s2); box-shadow: var(--shadow-pop); }
.ask-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: calc(12px * var(--text-scale)); }
.ask-toggle .icon { width: 14px; height: 14px; }

.msg-tools { display: inline-flex; align-items: center; gap: 6px; font-size: calc(12px * var(--text-scale)); line-height: calc(16px * var(--text-scale)); color: var(--text-faint); }
.msg-tools .icon { width: 14px; height: 14px; }

/* Ask-CEO drawer: 420 px slide-over ≥900 (page stays visible behind it), 92dvh sheet ≤899. */
.pane--ceo { width: min(560px, 94vw); }
.pane--ceo .pane-body--flush { padding: 0; display: flex; flex-direction: column; min-height: 0; }
.pane--ceo .assistant, .dlg--drawer .assistant { grid-template-columns: minmax(0, 1fr); height: 100%; min-height: 0; }
.assistant--embedded .assistant-main { padding: var(--s3) var(--s4) 0; }
.assistant--embedded .assistant-col { max-width: none; }
.ceo-asking { color: var(--text-muted); }
.drawer-full-link { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 6px; }
dialog.dlg--drawer { width: min(560px, 100vw); height: 92dvh; max-height: 92dvh; }
.dlg--drawer .dlg-inner { height: 100%; max-height: 100%; }
.dlg--drawer .pane-body--flush { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

/* ------------------------------------------------------------------ */
/* 6. Responsive (§8)                                                   */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .skel { background: var(--surface-2); }
}

/* ≤1439: pane overlays (default). ≥1440 pushes content — handled by Stage 4. */

/* On wide screens the company list already lives in the left sidebar; keep the assistant focused.
   It remains available below 1200px where that sidebar collapses for responsive navigation. */
@media (min-width: 1200px) {
  .assistant .chooser { display: none; }
}

/* 900–1199 tablet */
@media (max-width: 1199px) {
  :root { --page-pad: 16px; }
  .app { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .sidebar { display: none; }
  .rail { display: flex; }
  .crumb { display: none; }
  .topbar-title { display: block; }
  .co-chip.topbar-co { display: inline-flex; }
  /* Keep the top bar inside the viewport at this width: the Ask-CEO label and the language toggle
     (also reachable from the avatar menu) are dropped so the row cannot overflow. */
  .btn-askceo .btn-label { display: none; }
  /*
   * A folding phone opens at about 884px — wide enough to miss the phone rules, narrow enough that the bar's
   * right-hand group (571px of it) ran past the edge and the phone answered by zooming the whole page out.
   * Here the bar's items may shrink and the title gives up its space first.
   */
  .topbar-end { min-width: 0; flex-wrap: nowrap; }
  .topbar-title { flex: 1 1 auto; min-width: 0; }
  /* Both screens are height-capped against the live viewport, so neither can push the page taller than the
     phone and force a zoom-out. dvh, not vh: the address bar is part of the screen on a phone. */
  /* Only above phone width: at ≤600 these three already have their own heights (and the assistant scrolls the
     page there by design, with a sticky composer), and those rules were right — this band was the broken one. */
  @media (min-width: 601px) {
    .mail, .mail-grid, .wa { height: calc(100dvh - var(--topbar-h) - 108px); min-height: 0; }
    .mail-grid { max-height: calc(100dvh - var(--topbar-h) - 108px); }
    .assistant:not(.assistant--embedded) { height: calc(100dvh - var(--topbar-h) - 24px); }
  }
  .topbar-end .lang-toggle { display: none; }
  /* Narrow bar: the search shrinks to what still fits rather than pushing the row wider. */
  .gsearch { width: clamp(140px, 26vw, 220px); }
  .assistant { grid-template-columns: minmax(0, 1fr); }
  /* No third column at this width: the chat list stacks above the conversation, height-capped so the
     thread and composer stay on screen. */
  .chat-rail { border-inline-end: 0; border-bottom: 1px solid var(--border); max-height: 42dvh; }
  .glance { display: flex; }
  .status-row { display: flex; }
  .needs-fold { display: block; }
  .pane { width: min(720px, 94vw); height: min(90dvh, 900px); }
  .stat-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols-2 { grid-template-columns: minmax(0, 1fr); }
  .table--tasks .col-workflow, .table--tasks .col-cost { display: none; }
  /* 900–1199: eight ticket columns do not fit. The reporter goes first — it is already in the sub-line —
     and source and section stay, because those are the two Ali said he could not see. */
  .table--tickets .col-customer { display: none; }
  .table--tickets .col-source, .table--tickets .col-section { max-width: 150px; }
}

/* 600–899 */
@media (max-width: 899px) {
  dialog.dlg { position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: 100%; border-radius: var(--r-sheet) var(--r-sheet) 0 0; border-bottom: 0; max-height: 90dvh; }
  .dlg--sm, .dlg--md, .dlg--lg, .dlg--xl { width: 100%; }
  .sheet-handle { display: block; }
  .dlg-foot { padding-bottom: calc(var(--s4) + var(--safe-b)); position: sticky; bottom: 0; }
  .dlg-form, .dlg-inner { max-height: 90dvh; }
  .btn--lg, .btn--xl { min-height: 44px; }
  /* No room to centre anything on a phone: a pane simply is the screen. */
  .pane { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
  .assistant-main { padding-inline: var(--s4); }
  /* §6.4: touch targets ≥ 44 px below 900. Compact controls keep their visual box (so top-bar and card
     layouts do not change) and gain a transparent vertical hit area instead; horizontally adjacent
     controls are never overlapped. */
  .btn--icon, .co-chip, .btn--sm { position: relative; }
  .btn--icon:not([data-loading])::after,
  .co-chip::after,
  .btn--sm:not([data-loading])::after { content: ""; position: absolute; inset-inline: 0; border: 0; background: none; animation: none; }
  .btn--icon:not([data-loading])::after { inset-block: -4px; }   /* 36 → 44 */
  .co-chip::after { inset-block: -3px; }                          /* 38 → 44 */
  .btn--sm:not([data-loading])::after { inset-block: -8px; }      /* 28 → 44 */

  /* §4.3/§8: the task, project and ticket tables become two-line cards with a status bar on the start edge. */
  .table-wrap--tasks { border: 0; background: none; overflow: visible; }
  .table--cards { display: block; min-width: 0; }
  .table--cards thead { display: none; }
  .table--cards tbody { display: flex; flex-direction: column; gap: var(--s2); }
  .table--cards tr.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px var(--s2); position: relative; min-height: 56px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s3); padding-inline-start: calc(var(--s3) + 3px); }
  .table--cards tr.row::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--row-co, var(--neutral)); border-start-start-radius: var(--r-lg); border-end-start-radius: var(--r-lg); }
  .table--cards tr.row:hover td { background: none; }
  .table--cards td { display: block; border: 0; padding: 0; height: auto; width: auto; }
  .table--cards .row-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .table--cards .col-task { flex: 1 1 55%; min-width: 0; }
  .table--cards .col-status { flex: 0 0 auto; margin-inline-start: auto; }
  .table--cards .col-agent, .table--cards .col-workflow, .table--cards .col-cost, .table--cards .col-priority,
  .table--cards .col-customer, .table--cards .col-channel, .table--cards .col-created, .table--cards .col-id,
  .table--cards .col-source, .table--cards .col-section,
  .table--cards .col-open, .table--cards .col-total { display: none; }
  /* The sub-line is the only thing left carrying source, reporter, section and date here, so let it wrap
     to three lines instead of clamping at two — losing the date was the complaint. */
  .table--cards .row-sub { -webkit-line-clamp: 3; }
  .pager { gap: 6px; }
  .pager-count { flex: 1 1 100%; }
  .table--cards .col-actions { flex: 1 1 100%; white-space: normal; }
  .table--cards tr.row-expand { display: block; }
  .table--cards tr.row-expand td { display: block; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: var(--s3); }
  .row-sub-narrow { display: inline; }
  /* No columns here, so the sub-line is the only place these facts can live. */
  .row-sub-part--dup { display: inline-flex; }
  .btn-act .btn-label { display: inline; }
  .btn-act .icon { display: none; }
  .row-actions { display: flex; gap: var(--s2); width: 100%; flex-wrap: wrap; }
  .row-actions .btn-act { flex: 1 1 100px; min-height: 44px; justify-content: center; }
  .row-actions .btn--ghost.btn-act { flex: 0 1 auto; }
  .meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pane-body { gap: var(--s3); }
}

/* ≤600 mobile */
@media (max-width: 600px) {
  :root { --page-pad: 12px; }
  .app { display: block; height: auto; min-height: 100vh; min-height: 100dvh; }
  .rail { display: none; }
  .topbar { position: sticky; top: 0; z-index: 20; height: var(--topbar-h); }
  .hairline { position: sticky; top: var(--topbar-h); z-index: 20; }
  .page { overflow: visible; padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px); min-height: calc(100vh - var(--topbar-h) - 3px); }
  .page--assistant { padding: 0 0 calc(var(--tabbar-h) + var(--safe-b)); overflow: visible; }
  .tabbar { display: grid; }
  .fab { display: inline-flex; }
  .assistant { display: block; height: auto; }
  .assistant-main { padding: var(--s3) var(--s3) 0; min-height: calc(100vh - var(--topbar-h) - var(--tabbar-h) - 3px); min-height: calc(100dvh - var(--topbar-h) - var(--tabbar-h) - 3px); }
  .assistant--no-rail.assistant--no-glance .assistant-main { padding-inline: var(--s3); }
  .assistant--no-rail.assistant--no-glance .assistant-col { max-width: none; }

  .thread { overflow: visible; }
  .composer-wrap { position: sticky; bottom: calc(var(--tabbar-h) + var(--safe-b)); z-index: 10; }
  .scroll-pill { position: fixed; bottom: calc(var(--tabbar-h) + 88px + var(--safe-b)); }
  .chooser { overflow-x: auto; scrollbar-width: none; }
  .chooser-item { flex: 0 0 auto; }
  .chooser-emphasis-grid { grid-template-columns: 1fr; }
  .toasts { inset-inline: 12px; bottom: calc(var(--tabbar-h) + 12px + var(--safe-b)); max-width: none; }
  .msg { max-width: 92%; }
  .chat-head { padding: var(--s2) var(--s3); }
  .chat-head-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chat-head-end .mode-chip { display: none; }
  /* On a phone the list and the conversation cannot share the screen: the list becomes a full-width sheet
     above the thread, opened from the header button and closed by picking a chat. */
  .chat-rail { border-inline-end: 0; border-bottom: 1px solid var(--border); max-height: 55dvh; }
  .assistant--no-rail .chat-rail { display: none; }
  .page-head { flex-direction: column; }
  .toolbar input[type="search"] { min-width: 0; width: 100%; }
  .decision-card { grid-template-columns: auto minmax(0, 1fr); }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .suggestions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .suggestions .chip { flex: 0 0 auto; }
  /* §3.9 requires the Ask-CEO trigger at every width (≤899 it opens the full-height sheet), so on mobile it
     stays as an icon-only button; the language toggle, mode chip and + New menu move to the More sheet/FAB. */
  /* The search stays on a phone too — as the magnifier that opens the full-screen sheet (Ali asked for it
     back on 2026-09-18); it is the box that could not fit here, not the search. */
  .topbar-end .lang-toggle, .topbar-end .mode-chip, .topbar-end .btn-newmenu { display: none; }
  /* Ali, 2026-09-18: the page's name in the bar said "Email" while the tab bar underneath already showed
     Email lit up. One of the two had to go, and the one he navigates with stays. */
  .topbar-title { display: none; }
  .topbar-end .btn-askceo { width: 36px; padding: 0; min-height: 36px; position: relative; }
  .topbar-end .btn-askceo::after { content: ""; position: absolute; inset-inline: 0; inset-block: -4px; }
  /* The bar asked for ~487px on a 412px phone (company chip 151 + six controls 292 + padding), so the browser
     widened the whole page to fit it: every screen scrolled sideways and, in Arabic, the bell sat past the
     left edge (reported by the Meetings session, 2026-09-22). The company chip now gives way first — its
     name already ellipsizes, but a flex item never shrinks below its content unless told it may. */
  .topbar .co-chip { min-width: 0; flex: 0 1 auto; }
  .topbar .co-chip .name { min-width: 0; }
  .composer-hint { display: none; }
  .stat-grid--6 { grid-template-columns: 1fr 1fr; }
  .work-seg { display: flex; }
  .task-actionbar { bottom: calc(var(--tabbar-h) + var(--safe-b)); padding-bottom: var(--s3); }
  .page--taskfull { padding-bottom: calc(var(--tabbar-h) + var(--safe-b)); }
  .meta-grid { grid-template-columns: 1fr; }
}

/* Stage 3 responsive (§4.7–§4.13, §8) */
@media (max-width: 1199px) {
  .team-grid, .dept-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  /* tablet: the section nav becomes horizontal tabs */
  .section-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); position: static; gap: 2px; }
  .section-nav-item { white-space: nowrap; border-radius: 0; border-inline-start: 0; border-bottom: 2px solid transparent; min-height: 40px; }
  .section-nav-item[aria-current="page"] { background: none; border-inline-start: 0; border-bottom-color: var(--accent); color: var(--accent); }
  .table--team .col-dept, .table--team .col-schedule { display: none; }
}
@media (max-width: 899px) {
  .table--cards .col-level, .table--cards .col-dept, .table--cards .col-model, .table--cards .col-schedule, .table--cards .col-done { display: none; }
  .tier-row select { min-width: 0; width: 100%; }
  .tree-node { width: 172px; }
  .sticky-save { bottom: var(--s2); }
}
@media (max-width: 600px) {
  .team-grid, .dept-grid { grid-template-columns: minmax(0, 1fr); }
  /* the composer hint row keeps only the "what can I ask" affordance; the Enter hint is desktop-only advice */
  .composer-hint { display: flex; justify-content: flex-start; padding-bottom: 2px; }
  .composer-hint .hint-enter { display: none; }
  /* §4.9: on mobile the control cards stack full width and the segmented controls wrap */
  .seg--full { flex-wrap: wrap; }
  .seg--full .seg-item { flex: 1 1 120px; white-space: normal; min-height: 36px; line-height: calc(18px * var(--text-scale)); padding-inline: 8px; }
  /* Four destinations now (Tickets, Tasks, AI work, Projects): they scroll rather than wrap into a block. */
  .work-seg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .work-seg::-webkit-scrollbar { display: none; }
  .work-seg .seg-item { flex: 0 0 auto; white-space: nowrap; }
  .portfolio-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sticky-save { bottom: calc(var(--tabbar-h) + var(--safe-b) + 8px); }
  .theme-cards { justify-content: space-between; }
  .theme-preview { width: 84px; }
}

/* ------------------------------------------------------------------ */
/* 7. Stage 4 — responsive polish, RTL, themes, accessibility (§8, §6)  */
/* ------------------------------------------------------------------ */

/* The push layout that used to live here went with the side panes: a centred pane covers the page, it does
   not shove it aside, so there is nothing left to push at any width. */

/* The Ask-CEO drawer is explicitly non-modal (§3.9): the page behind it stays interactive, so it never dims
   and never pushes. It keeps clear of the top bar so the bell, + New, the avatar menu and the language
   toggle all stay usable while it is open. */
html.ceo-drawer-open #app { margin-inline-end: 0; }
.pane--ceo { inset-block-start: calc(var(--topbar-h) + var(--s3)); margin-block-start: 0; }

/* §8: no page-level horizontal scroll anywhere — the page's own children may never out-size it.
   (Deliberately NOT `overflow-x: clip` on html/body: that would hide real overflow from the QA audit.) */
.page > * { min-width: 0; max-width: 100%; }
/* `overflow: hidden` does nothing on a non-replaced inline box, so an `.ellipsis` span that is a bare child
   of a table cell never clipped: "Growth & Intelligence › Market Intelligence" ran across the Model column.
   Blockifying it inside cells makes the width constraint (`max-width` on the `col-*` class) bite. */
.table td > .ellipsis { display: block; min-width: 0; }
.tabs--scroll::-webkit-scrollbar { display: none; }

/* §6.14: a visible, consistent focus ring on things that paint their own background,
   and never an invisible one on a scrolling container that only receives programmatic focus. */
.page:focus:not(:focus-visible), .pane:focus:not(:focus-visible), .thread:focus:not(:focus-visible) { outline: none; }
.nav-item:focus-visible, .rail-item:focus-visible, .tabbar-item:focus-visible, .tab:focus-visible,
.chooser-item:focus-visible, .tree-node:focus-visible, .menu-item:focus-visible, .sheet-row:focus-visible,
.ask-row:focus-visible, .list-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* Radio / checkbox cards must show the ring around the card, not only around the 18 px control. */
.radio-card:has(input:focus-visible), .check:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

/* §12.37 — 4.5:1 for every label. The §6.1 palette is tuned for text and marks on dark surfaces, so some of
   its colours fail once they become a *fill* with white on top: --accent #3B82F6 → 3.68:1, --success #22C55E
   → 2.28:1, --danger #EF4444 → 3.78:1, and the three company hues behind white initials → 2.5–4.5:1. The hues
   and the token table are untouched; only the fill/label pairing changes, and only where it fails. The light
   theme's tokens are already the 700 shades and keep white as-is. */
:root { --accent-solid: var(--accent-hover); --ok-fg: #FFFFFF; --danger-solid: var(--danger); }
html[data-theme="light"] { --accent-solid: var(--accent); }
html[data-theme="navy"], html[data-theme="midnight"] {
  --ok-fg: #04160B;          /* near-black on the vivid green: 9.1:1, and the button stays unmistakably "go" */
  --danger-solid: #DC2626;   /* one step deeper than #EF4444 so white sits at 4.85:1 */
}
.btn--primary, .btn--primary:active { background: var(--accent-solid); border-color: var(--accent-solid); }
.btn--primary:hover { background: color-mix(in srgb, var(--accent-solid) 84%, #000); border-color: color-mix(in srgb, var(--accent-solid) 84%, #000); }
.fab { background: var(--accent-solid); }
.fab:hover { background: color-mix(in srgb, var(--accent-solid) 84%, #000); }
.skip-link, .avatar--owner { background: var(--accent-solid); }
.btn--ok { color: var(--ok-fg); }
.btn--ok[data-loading]::after { border-color: var(--ok-fg); border-inline-end-color: transparent; }
.btn--danger { background: var(--danger-solid); border-color: var(--danger-solid); }
/* Company initials sit on a filled hue square; the ring, hairline, bubble tint and portfolio accent keep the
   full-strength hue, so identity is unchanged — only the filled square is deepened enough to carry white. */
html[data-theme="navy"] .avatar--square, html[data-theme="midnight"] .avatar--square { background: color-mix(in srgb, var(--co) 70%, #000); }
/* Same story for the level badges: --level #8B5CF6 carries white at 4.23:1 as a fill and reads at 4.13:1 as
   outline text on --surface. The violet stays the level colour; only its shade moves by one step. */
html[data-theme="navy"] .chip--level-executive, html[data-theme="midnight"] .chip--level-executive { background: color-mix(in srgb, var(--level) 74%, #000); border-color: color-mix(in srgb, var(--level) 74%, #000); }
html[data-theme="navy"] .chip--level-manager, html[data-theme="midnight"] .chip--level-manager { color: color-mix(in srgb, var(--level) 72%, #fff); border-color: color-mix(in srgb, var(--level) 72%, #fff); }
/* A square avatar with no company hue falls back to --border-strong — a pale grey in the light theme, where
   white initials measured 1.48:1. Without a hue it uses the ordinary avatar pairing instead. */
.avatar--square:not([class*="avatar--co-"]) { background: var(--surface-3); color: var(--text); }
/* Dark themes: the two status/interactive colours that are used as *text* on their own tint sit just under
   4.5:1 (--danger 4.17–4.40, --accent on the pressed filter chip 4.33). One step toward white clears them. */
html[data-theme="navy"] .pill, html[data-theme="midnight"] .pill { color: color-mix(in srgb, var(--pc) 88%, #fff); }
html[data-theme="navy"] .chip--priority-urgent, html[data-theme="midnight"] .chip--priority-urgent { color: color-mix(in srgb, var(--danger) 82%, #fff); }
html[data-theme="navy"] .chip--filter[aria-pressed="true"], html[data-theme="midnight"] .chip--filter[aria-pressed="true"] { color: color-mix(in srgb, var(--accent) 78%, #fff); }

/* §6.2 light theme: tinted surfaces are pale, so tinted text uses the token colour (already the 700 shade)
   and tinted borders are strengthened so a pill/banner edge stays visible at ≥3:1. */
html[data-theme="light"] .banner { border-color: color-mix(in srgb, var(--bc) 55%, transparent); }
html[data-theme="light"] .pill { border-color: color-mix(in srgb, var(--pc) 35%, transparent); }
/* The 700-shade tokens carry white well but land at 3.8–4.4:1 as *text* on their own pale tint, so tinted
   labels go one shade deeper here (an 800 equivalent). The dot, border and background keep the status colour,
   so nothing changes about what the status looks like — only how readable its word is. */
html[data-theme="light"] .pill { color: color-mix(in srgb, var(--pc) 76%, #000); }
html[data-theme="light"] .chip--tint-info { color: color-mix(in srgb, var(--info) 76%, #000); }
html[data-theme="light"] .chip--tint-warn { color: color-mix(in srgb, var(--warning) 80%, #000); }
html[data-theme="light"] .chip--priority-urgent { color: color-mix(in srgb, var(--danger) 80%, #000); }
html[data-theme="light"] .chip--priority-high { color: color-mix(in srgb, var(--warning) 80%, #000); }
html[data-theme="light"] .chip--priority-low { color: var(--text-muted); }
/* A day separator is a real label, not decoration: --text-faint left it at 4.48:1 on --surface-2. */
.thread-day { color: var(--text-muted); }
html[data-theme="light"] .chip--filter[aria-pressed="true"],
html[data-theme="light"] .radio-card:has(input:checked) { background: color-mix(in srgb, var(--accent) 10%, #fff); }
html[data-theme="light"] .seg-item[aria-pressed="true"],
html[data-theme="light"] .seg-item[aria-selected="true"] { box-shadow: 0 1px 2px rgba(15,23,42,.14); }
html[data-theme="light"] .msg--user .msg-body { background: color-mix(in srgb, var(--co, var(--accent)) 14%, #fff); border-color: color-mix(in srgb, var(--co, var(--accent)) 45%, transparent); }
/* …but not the neutral badge: it is a pale --surface-3 pill, and white on it measured 1.17:1. */
html[data-theme="light"] .badge:not(.badge--neutral) { color: #fff; }
html[data-theme="light"] .kbd { background: #fff; }

/* §6.6 RTL: everything is laid out with logical properties, so only genuinely physical values are mirrored. */
[dir="rtl"] .btn--split > .btn:first-child { border-radius: var(--r); border-start-end-radius: 0; border-end-end-radius: 0; }
[dir="rtl"] .toast { border-inline-start-width: 3px; }
/* The hierarchy tree is dir="ltr" by design; keep its directional icons unmirrored inside it. */
[dir="rtl"] .tree .icon-dir { transform: none; }

@media (max-width: 899px) {
  /* §6.4: touch targets ≥ 44 px. Full-size buttons and form controls grow their real box; the compact
     variants (.btn--sm, .btn--icon, .co-chip) keep their visual box and use the transparent ::after
     hit area declared above, so dense rows and the 390 px top bar keep their layout. */
  .btn:not(.btn--sm):not(.btn--icon):not(.btn-caret) { min-height: 44px; }
  input:not([type="checkbox"]):not([type="radio"]), select, .seg-item, .tab { min-height: 44px; height: auto; }
  .chip { position: relative; }
  .chip::after { content: ""; position: absolute; inset-inline: 0; inset-block: -8px; }   /* 28 → 44 */
  .check input, .radio-card input, .decision-card input[type="checkbox"] { width: 22px; height: 22px; }
  /* §2.5: a bottom sheet may cover the tab bar only on short screens. */
  html.sheet-open-short .tabbar { display: none; }
  /* §8: dialogs are sheets here — the scroll belongs to the body, never to the page behind it. */
  dialog.dlg { overscroll-behavior: contain; }
  /* §3.9: the Ask-CEO sheet is the one sheet that is taller than the 90dvh house rule — it is a full
     conversation, not a form, and the spec fixes it at 92 dvh. */
  dialog.dlg--drawer { height: 92dvh; max-height: 92dvh; }

  /* Detail panes become full-page routes at this width, so a stray push must never survive a resize. */

}

@media (max-width: 600px) {
  /* §8: safe areas on every fixed layer. */
  dialog.dlg { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .fab { bottom: calc(var(--tabbar-h) + 16px + var(--safe-b)); }
  /* The FAB and the toasts share the inline-end corner above the tab bar, so toasts stack above the FAB
     (tab bar 60 + FAB offset 16 + FAB 56 + 12) instead of under it. */
  .toasts { bottom: calc(var(--tabbar-h) + 84px + var(--safe-b)); }
  /* Wide-content escape hatches: these are the only horizontal scrollers the page may contain. */
  .table-wrap, .tree-wrap, .result-box, .audit-details { max-width: 100%; }
  /* min-width: 0 is what makes the internal scroller actually scroll. Without it a flex/grid child keeps
     min-width:auto, so a row of long chips (the GOOGLE_* env names) grew the whole page instead of itself. */
  .chip-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; max-width: 100%; }
  .chip-row::-webkit-scrollbar { display: none; }
  .chip-row .chip { flex: 0 0 auto; }
  /* the accordion <summary> already names the section — don't print the title twice */
  .settings-acc .settings-section-title { display: none; }
  .page-actions { width: 100%; }
  .bulk-bar { position: sticky; top: 0; }
}

/* A person's free-form labels, next to their name in the team list. */
.chip--tag { margin-inline-start: 6px; background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); vertical-align: 1px; }

/* ==================================================================
   Email and WhatsApp — the two channel sections
   ==================================================================
   Both are three-column on a desktop and one column on a phone, and in both the middle column is a list
   that scrolls on its own. The page itself must not scroll: a mail client where the folder list slides
   away as you read is a mail client nobody can use. Hence the fixed height and the per-column overflow.

   The narrow variants swap columns instead of stacking them, the way every mail app on a phone does —
   list, then message, with a back button — because a stacked reading pane means scrolling past forty
   subject lines to reach the one you opened. */
.mail, .wa { display: flex; flex-direction: column; gap: var(--s3); min-height: 0; }
.mail-grid, .wa-grid {
  display: grid; gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
  /* Fills what is left under the page header rather than growing with the longest column. */
  height: calc(100vh - var(--topbar-h) - 150px); min-height: 420px;
}
.mail-grid { grid-template-columns: 210px minmax(280px, 380px) 1fr; }
.wa-grid { grid-template-columns: minmax(260px, 340px) 1fr; }
.mail-grid--narrow, .wa-grid--narrow { grid-template-columns: 1fr; height: calc(100vh - var(--topbar-h) - 120px); }
.mail-folders, .mail-list, .mail-read, .wa-list, .wa-thread { background: var(--surface); min-height: 0; display: flex; flex-direction: column; }
.mail-list, .mail-read, .wa-list, .wa-thread { overflow-y: auto; }

/* ---- folders ---- */
.mail-folders { padding: var(--s2); gap: 2px; overflow-y: auto; }
.mail-folders-label { font-size: calc(11px * var(--text-scale)); letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); padding: var(--s2) var(--s2) var(--s1); }
.mail-folders-sep { height: 1px; background: var(--border); margin: var(--s2) var(--s1); }
.mail-folder {
  display: flex; align-items: center; gap: var(--s2); width: 100%; text-align: start;
  padding: var(--s2) var(--s2); border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--text); font: inherit; font-size: calc(13px * var(--text-scale)); cursor: pointer;
}
.mail-folder:hover { background: var(--surface-2); }
.mail-folder[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); font-weight: 600; }
.mail-folder .icon { flex: 0 0 auto; width: 16px; height: 16px; color: var(--text-muted); }
.mail-folder[aria-pressed="true"] .icon { color: var(--accent); }
/* His own folders: the ⋯ shows on hover or focus; a mail dragged over a folder lights it. */
.mail-folder-wrap { position: relative; display: flex; align-items: center; }
.mail-folder-wrap .mail-folder { padding-inline-end: 34px; }
.mail-folder-more { position: absolute; inset-inline-end: 2px; opacity: 0; transition: opacity .12s; }
.mail-folder-wrap:hover .mail-folder-more, .mail-folder-more:focus-visible, .mail-folder-more[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .mail-folder-more { opacity: .7; } }
.mail-folder.is-drop { background: color-mix(in srgb, var(--accent) 26%, transparent); outline: 2px dashed var(--accent); outline-offset: -2px; }
.mail-folder--add { color: var(--text-muted); }
.mail-folder--add:hover { color: var(--text); }
/* The rule dialog: each choice shows its address on its own line, and the checkboxes sit with their words. */
.rule-seg { flex-wrap: wrap; height: auto; }
.rule-seg .seg-item { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; height: auto; padding-block: 6px; white-space: normal; text-align: start; }
.rule-seg .seg-item bdi { font-size: calc(12px * var(--text-scale)); overflow-wrap: anywhere; }
.rule-check { display: flex; align-items: center; gap: var(--s2); justify-content: flex-start; font-weight: 400; }
.rule-check input { margin: 0; width: auto; }
/* Main / Other above the Inbox list. */
.mail-tabs { display: flex; gap: var(--s4); padding: 0 var(--s3); border-bottom: 1px solid var(--border); }
.mail-tab { border: 0; background: none; padding: var(--s2) 2px; font: inherit; font-size: calc(13px * var(--text-scale)); color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mail-tab:hover { color: var(--text); }
.mail-tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* ---- the list column ---- */
.mail-list-head, .wa-list-head {
  display: flex; align-items: center; gap: var(--s2); padding: var(--s3);
  border-bottom: 1px solid var(--border); font-weight: 600; position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.mail-search, .wa-search { margin: var(--s2) var(--s3); width: calc(100% - var(--s3) * 2); }
.mail-hint { padding: 0 var(--s3) var(--s2); color: var(--text-muted); }
.mail-row {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: start;
  padding: var(--s3); border: 0; border-bottom: 1px solid var(--border); background: transparent;
  color: var(--text); font: inherit; cursor: pointer;
}
.mail-row:hover { background: var(--surface-2); }
.mail-row--on { background: color-mix(in srgb, var(--accent) 14%, transparent); }
/* Unread gets a weight change and a left bar — colour alone would not survive a colour-blind reader. */
.mail-row--unread { border-inline-start: 3px solid var(--accent); }
.mail-row--unread .mail-from, .mail-row--unread .mail-subject { font-weight: 700; }
.mail-row-top { display: flex; align-items: center; gap: var(--s2); }
.mail-from { flex: 1 1 auto; font-size: calc(13px * var(--text-scale)); }
.mail-at { flex: 0 0 auto; color: var(--text-faint); }
/* Sent: who it went to is the line; his own name trails, small and faint. */
.mail-from--to strong { color: var(--accent); font-weight: 700; }
.mail-to-word { color: var(--text-faint); font-size: calc(11px * var(--text-scale)); }
.mail-sent-by { color: var(--text-faint); font-size: calc(11px * var(--text-scale)); font-weight: 400; }
.mail-clip { width: 14px; height: 14px; color: var(--text-faint); }
.mail-subject { font-size: calc(13px * var(--text-scale)); }
.mail-snippet { font-size: calc(12px * var(--text-scale)); color: var(--text-muted); }
.mail-row-marks { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s1); }
.mail-more { margin: var(--s3); }

/* ---- the reading pane ---- */
.mail-read-head { display: flex; align-items: center; gap: var(--s2); padding: var(--s4); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.mail-read-subject { font-size: calc(16px * var(--text-scale)); font-weight: 650; }
.mail-read-meta { display: flex; flex-direction: column; gap: 2px; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); font-size: calc(12px * var(--text-scale)); }
.mail-read-actions { display: flex; flex-wrap: wrap; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); }
.mail-read-body { padding: var(--s4); line-height: calc(22px * var(--text-scale)); overflow-wrap: anywhere; }

/* ---- a prepared reply ----
   Marked out with the accent rather than a neutral card, because on a page full of other people's words
   this is the one block the machine wrote. */
.draft-card {
  margin: var(--s4); padding: var(--s4); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: var(--r-lg); background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  display: flex; flex-direction: column; gap: var(--s3);
}
.draft-head { display: flex; align-items: center; gap: var(--s2); font-weight: 650; }
.draft-icon { width: 18px; height: 18px; color: var(--accent); }
.draft-analysis { background: var(--surface); border-radius: var(--r); padding: var(--s3); font-size: calc(13px * var(--text-scale)); line-height: calc(20px * var(--text-scale)); }
.draft-analysis-label { display: block; font-size: calc(11px * var(--text-scale)); text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); margin-bottom: var(--s1); }
.draft-card textarea { width: 100%; font: inherit; line-height: calc(21px * var(--text-scale)); }
.draft-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.chip--urgency-urgent { background: color-mix(in srgb, var(--danger) 20%, transparent); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.chip--urgency-today { background: color-mix(in srgb, var(--warning) 22%, transparent); border-color: color-mix(in srgb, var(--warning) 45%, transparent); }
.chip--urgency-fyi { color: var(--text-muted); }

/* ---- WhatsApp ---- */
.wa-chat { display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: start; padding: var(--s3); border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.wa-chat:hover { background: var(--surface-2); }
.wa-chat--on { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.wa-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text-muted); font-size: calc(13px * var(--text-scale)); font-weight: 650; }
.wa-chat-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wa-chat-top { display: flex; align-items: baseline; gap: var(--s2); }
.wa-chat-name { flex: 1 1 auto; font-size: calc(14px * var(--text-scale)); font-weight: 600; }
.wa-chat-sub { font-size: calc(12px * var(--text-scale)); color: var(--text-muted); }
.wa-chat-marks { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s1); }
.wa-draft-mark { width: 15px; height: 15px; color: var(--accent); }
.wa-thread-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.wa-thread-name { display: block; font-size: calc(15px * var(--text-scale)); font-weight: 650; }
.wa-drafts { padding-bottom: var(--s2); }
.wa-msgs { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); }
.wa-msg { align-self: flex-start; max-width: min(78%, 620px); display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3); border-radius: var(--r-lg); background: var(--surface-2); }
/* A message that named him is the reason to open the chat at all, so it is marked, not merely present. */
.wa-msg--mention { background: color-mix(in srgb, var(--warning) 14%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent); }
.wa-msg-who { display: flex; align-items: center; gap: var(--s2); font-size: calc(12px * var(--text-scale)); font-weight: 650; color: var(--accent); }
.wa-msg-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: calc(21px * var(--text-scale)); }
.wa-msg-foot { display: flex; align-items: center; gap: var(--s2); }
/* The draft button hides until the message is hovered or focused — one per message would otherwise be a
   wall of buttons — but stays visible on touch, where there is no hover to reveal it. */
.wa-msg-foot .btn { opacity: 0; transition: opacity var(--ease); }
.wa-msg:hover .wa-msg-foot .btn, .wa-msg:focus-within .wa-msg-foot .btn { opacity: 1; }
@media (hover: none) { .wa-msg-foot .btn { opacity: 1; } }

@media (max-width: 899px) {
  .draft-card { margin: var(--s3); padding: var(--s3); }
  .mail-read-head, .mail-read-actions, .mail-read-body, .mail-read-meta { padding-inline: var(--s3); }
  .wa-msg { max-width: 92%; }
}
/* Tells the conversation rail apart from the two real channels, which now have sections of their own. */
.chat-rail-note { color: var(--text-muted); line-height: calc(17px * var(--text-scale)); margin: 0; }

/* ==================================================================
   Email, Outlook-style
   ==================================================================
   A command bar across the top, then folders | list | reading pane with drag handles between them. The
   column widths are custom properties the page sets from what he dragged, so resizing never rebuilds the
   grid. The reading pane can sit beside the list, under it (.mail-stack), or be off (one column at a time). */
.mail { gap: var(--s2); }
.mail-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  padding: var(--s2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.mail-bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.mail-bar-group { display: flex; align-items: center; gap: 2px; padding-inline-end: var(--s2); border-inline-end: 1px solid var(--border); }
.mail-bar-group:last-child { border-inline-end: 0; padding-inline-end: 0; }
.mail-bar-btn { gap: 6px; }
.mail-bar-btn .icon { width: 16px; height: 16px; }
.mail-bar-btn--ai .icon, .mail-ai-btn .icon { color: var(--accent); }
.btn.is-flagged .icon, .mail-flag-mark .icon { color: var(--danger); }
.btn.is-important .icon { color: var(--warning); }
.btn.is-active { color: var(--accent); }
.mail-bar-search {
  flex: 1 1 300px; min-width: 220px; display: flex; align-items: center; gap: var(--s1);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill);
  padding-block: 2px; padding-inline: 10px 3px;
}
.mail-bar-search:focus-within { border-color: var(--accent); }
.mail-search-icon { width: 16px; height: 16px; color: var(--text-faint); flex: 0 0 auto; }
.mail-search-input { flex: 1 1 auto; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 6px 4px; font-size: calc(13px * var(--text-scale)); }
.mail-search-scope { flex: 0 0 auto; border: 0; background: transparent; color: var(--text-muted); max-width: 130px; font-size: calc(12px * var(--text-scale)); }
.mail-ai-btn { border-radius: var(--r-pill); gap: 6px; }
.mail-bar-end { display: flex; align-items: center; gap: var(--s1); margin-inline-start: auto; }
.mail-sync { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; padding: 4px 8px; border-radius: var(--r-pill); font: inherit; }
.mail-sync:hover { background: var(--surface-2); }
/* Labels go before buttons do: on a narrower screen the bar becomes icons with tooltips, like Outlook's simplified ribbon. */
@media (max-width: 1500px) { .mail-bar-actions .mail-bar-label { display: none; } }
@media (max-width: 1100px) { .mail-bar-end .mail-bar-label, .mail-ai-btn .mail-bar-label, .mail-list-head .mail-bar-label { display: none; } }

.mail-grid { gap: 0; background: var(--surface); height: calc(100vh - var(--topbar-h) - 128px); min-height: 460px; }
.mail-grid--right { grid-template-columns: var(--mail-folders, 220px) 5px var(--mail-list, 400px) 5px minmax(320px, 1fr); }
.mail-grid--right.mail-grid--nofolders { grid-template-columns: var(--mail-list, 400px) 5px minmax(320px, 1fr); }
.mail-grid--bottom, .mail-grid--off { grid-template-columns: var(--mail-folders, 220px) 5px minmax(0, 1fr); }
.mail-grid--bottom.mail-grid--nofolders, .mail-grid--off.mail-grid--nofolders, .mail-grid--narrow { grid-template-columns: minmax(0, 1fr); }
.mail-grid--narrow { height: calc(100vh - var(--topbar-h) - 150px); }
.mail-stack { display: grid; grid-template-rows: var(--mail-list-h, 340px) 5px minmax(0, 1fr); min-height: 0; min-width: 0; }
.mail-folders, .mail-list, .mail-read { min-width: 0; }
.mail-list { overflow: hidden; }
.mail-list-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; outline: none; }
.mail-read { background: var(--surface-2); }

/* ---- drag handles ---- */
.mail-resizer { position: relative; background: var(--surface); touch-action: none; z-index: 2; outline: none; }
.mail-resizer::before { content: ""; position: absolute; background: var(--border); }
.mail-resizer--x { cursor: col-resize; }
.mail-resizer--x::before { top: 0; bottom: 0; inset-inline-start: 2px; width: 1px; }
.mail-resizer--y { cursor: row-resize; }
.mail-resizer--y::before { left: 0; right: 0; top: 2px; height: 1px; }
.mail-resizer:hover::before, .mail-resizer:focus-visible::before, .mail-resizer.is-dragging::before { background: var(--accent); }
.mail-resizer--x:hover::before, .mail-resizer--x:focus-visible::before, .mail-resizer--x.is-dragging::before { width: 3px; inset-inline-start: 1px; }
.mail-resizer--y:hover::before, .mail-resizer--y:focus-visible::before, .mail-resizer--y.is-dragging::before { height: 3px; top: 1px; }

/* ---- folders and list head ---- */
.mail-folders-head { display: flex; align-items: center; gap: var(--s2); padding-block: var(--s1); padding-inline: var(--s2) var(--s1); }
.mail-list-title { font-weight: 650; }
.mail-folder-select { max-width: 70%; }
.mail-filter-chips { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--border); }
.mail-filter-chips .chip .icon { width: 12px; height: 12px; }
.mail-ai-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s2); padding: var(--s2) var(--s3); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border-bottom: 1px solid var(--border); font-size: calc(12px * var(--text-scale)); }
.mail-ai-note > .icon { width: 14px; height: 14px; color: var(--accent); align-self: center; }
.mail-ai-queries { flex-basis: 100%; font-family: ui-monospace, Consolas, monospace; color: var(--text-faint); font-size: calc(11px * var(--text-scale)); overflow-wrap: anywhere; }
.mail-ai-busy { display: flex; align-items: center; gap: var(--s2); padding: var(--s3); color: var(--text-muted); }
.mail-ai-busy .icon { width: 16px; height: 16px; color: var(--accent); animation: mail-pulse 1.2s ease-in-out infinite; }
@keyframes mail-pulse { 50% { opacity: .35; } }

/* ---- rows ---- */
.mail-row {
  position: relative; flex-direction: row; align-items: flex-start; gap: var(--s3);
  padding: var(--s2) var(--s3); border-inline-start: 3px solid transparent; outline: none;
}
.mail-row:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.mail-row--unread { border-inline-start-color: var(--accent); }
.mail-row--flagged { background: color-mix(in srgb, var(--danger) 6%, transparent); }
.mail-row--on, .mail-row--on:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.mail-row--compact { padding-block: 5px; }
.mail-row-avatar { flex: 0 0 auto; width: 34px; height: 34px; margin-top: 2px; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--surface-3); color: var(--text-muted); font-size: calc(12px * var(--text-scale)); font-weight: 650; }
.mail-row-avatar .icon { width: 16px; height: 16px; color: var(--accent); }
.mail-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mail-row-top { align-items: baseline; }
.mail-row-sub { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mail-row-sub .mail-subject { flex: 1 1 auto; min-width: 0; }
.mail-count { flex: 0 0 auto; padding: 0 6px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text-muted); font-size: calc(11px * var(--text-scale)); }
.mail-row--unread .mail-at { color: var(--accent); font-weight: 600; }
.mail-high, .mail-flag-mark, .mail-draft-mark { display: inline-flex; flex: 0 0 auto; }
.mail-high .icon { width: 14px; height: 14px; color: var(--danger); }
.mail-flag-mark .icon, .mail-draft-mark .icon { width: 14px; height: 14px; }
.mail-draft-mark .icon { color: var(--accent); }
.mail-snippet { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; }
.mail-snippet--1 { -webkit-line-clamp: 1; }
.mail-snippet--2 { -webkit-line-clamp: 2; }
.mail-why { display: flex; align-items: center; gap: 4px; color: var(--accent); }
.mail-why .icon { width: 12px; height: 12px; flex: 0 0 auto; }
/* Flag, read and delete on the row itself, over the date, on hover — the way Outlook does it. */
.mail-row-quick { flex: 0 0 auto; display: none; align-items: center; margin-inline-start: 2px; }
.mail-row:hover .mail-row-quick, .mail-row:focus-within .mail-row-quick { display: inline-flex; }
.mail-row-quick .btn { width: 22px; min-width: 22px; height: 22px; min-height: 22px; padding: 0; border: 0; background: transparent; }
.mail-row-quick .icon { width: 15px; height: 15px; }
@media (hover: none) { .mail-row-quick { display: none !important; } }

/* ---- reading pane ---- */
.mail-read-head { align-items: flex-start; padding: var(--s3) var(--s4); }
.mail-read-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mail-read-subject { font-size: calc(18px * var(--text-scale)); line-height: 1.3; overflow-wrap: anywhere; }
.mail-read-sub { display: flex; flex-wrap: wrap; gap: var(--s1); }
.mail-read-sub:empty { display: none; }
.mail-read-tools { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.thread-list { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3); }
.thread-msg { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.thread-msg--open { box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.thread-head { display: flex; align-items: center; gap: var(--s1); padding-inline-end: var(--s2); }
.thread-head-toggle { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border: 0; background: transparent; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.thread-head-toggle:hover { background: var(--surface-2); }
.thread-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.thread-name { font-weight: 650; font-size: calc(14px * var(--text-scale)); }
.thread-at { flex: 0 0 auto; white-space: nowrap; }
.thread-acts { display: flex; gap: 2px; flex: 0 0 auto; }
.wa-avatar--me { background: color-mix(in srgb, var(--accent) 25%, var(--surface-3)); color: var(--text); }
/* Mail is written for a white page; showing it on the dark theme's surface would make half of it unreadable. */
.thread-body { padding: var(--s3) var(--s4); background: #fff; border-top: 1px solid var(--border); }
.thread-body.thread-text { background: var(--surface); color: var(--text); line-height: calc(22px * var(--text-scale)); overflow-wrap: anywhere; }
.thread-frame { display: block; width: 100%; min-height: 60px; border: 0; background: #fff; }
.thread-note { display: flex; align-items: center; gap: 6px; margin: 0; padding: var(--s2) var(--s4); color: var(--text-muted); background: var(--surface); border-top: 1px solid var(--border); }
.thread-note .icon { width: 14px; height: 14px; }
.mail-quick-reply { display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0 var(--s3) var(--s4); }
.mail-compose-wrap { padding: 0 var(--s3) var(--s4); }
.mail-read > .mail-compose-wrap { padding-top: var(--s3); }
.mail-ai-card { margin: var(--s3) var(--s3) 0; padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: var(--r-lg); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }

/* ---- the editor ---- */
.ed { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.ed-head { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--border); font-weight: 650; }
.ed-head > .icon { width: 16px; height: 16px; color: var(--accent); }
.ed-fields { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3); border-bottom: 1px solid var(--border); }
.ed-fields .field { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: var(--s2); margin: 0; }
.ed-fields .field[hidden] { display: none; }
.ed-fields .field > label { margin: 0; color: var(--text-muted); font-size: calc(12px * var(--text-scale)); }
.ed-fields .row { gap: var(--s2); flex-wrap: nowrap; }
.ed-fields .row > input { flex: 1 1 auto; min-width: 0; }
/* Not sticky: the body scrolls inside its own box, so the toolbar stays above it anyway, and a sticky bar slid over the reading pane's title. */
.ed-toolbar { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--s2); padding: 5px var(--s2); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.ed-group { display: flex; align-items: center; gap: 1px; padding-inline-end: var(--s2); border-inline-end: 1px solid var(--border); }
.ed-group:last-child { border-inline-end: 0; padding-inline-end: 0; }
.ed-btn { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.ed-btn:hover { background: var(--surface-3); }
.ed-btn--on, .ed-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.ed-btn .icon { width: 16px; height: 16px; }
.ed-head .ed-btn[aria-pressed="true"] .icon { color: var(--danger); }
.ed-select { height: 30px; padding: 0 6px; font-size: calc(12px * var(--text-scale)); }
.ed-pop-wrap { position: relative; display: inline-flex; }
.ed-pop { position: absolute; top: calc(100% + 4px); inset-inline-start: 0; z-index: 20; display: grid; grid-template-columns: repeat(4, 22px); gap: 6px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-pop); }
.ed-pop[hidden] { display: none; }
.ed-swatch { width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); cursor: pointer; }
.ed-swatch--on { box-shadow: 0 0 0 2px var(--accent); }
/* The writing surface is white, like the mail it becomes: a colour or highlight chosen here must look the way it will arrive. */
.ed-body { min-height: 220px; max-height: 60vh; overflow-y: auto; padding: var(--s4); background: #fff; color: #111827; outline: none; overflow-wrap: anywhere; font: calc(14px * var(--text-scale))/1.6 "Segoe UI", "Noto Sans Arabic", Arial, sans-serif; }
.ed-body:focus { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
.ed-body p { margin: 0 0 8px; }
.ed-body img { max-width: 100%; height: auto; }
.ed-body table { border-collapse: collapse; }
.ed-body blockquote { margin: 8px 0; padding-inline-start: 12px; border-inline-start: 3px solid #CBD5E1; color: #475569; }
.ed-body a { color: #2563EB; }
.ed-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s3); border-top: 1px solid var(--border); }
.ed-foot .icon { width: 14px; height: 14px; vertical-align: -2px; }
.ed--sig .ed-body--sig { min-height: 110px; max-height: 280px; }

/* The editor as a panel over the page: one clear box, everything else blurred, buttons always in view. */
.compose-layer { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; padding: 24px; }
.compose-backdrop { position: absolute; inset: 0; background: rgba(6, 10, 18, .5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); cursor: zoom-out; }
.compose-panel { position: relative; display: flex; flex-direction: column; gap: 0; width: min(960px, 100%); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: 0 24px 80px rgba(0, 0, 0, .45); overflow: hidden; }
.compose-panel > .mail-ai-card { flex: 0 0 auto; max-height: 26vh; overflow: auto; margin: 0; border-radius: 0; border: 0; border-bottom: 1px solid var(--border); }
.compose-panel > .ed { flex: 1 1 auto; min-height: 0; border: 0; border-radius: 0; }
.compose-panel .ed-head { flex: 0 0 auto; padding: 10px 14px; background: var(--surface-2); font-size: calc(15px * var(--text-scale)); }
.compose-panel .ed-body { flex: 1 1 auto; min-height: 200px; max-height: none; }
.compose-panel .ed-foot { flex: 0 0 auto; padding: 12px 16px; background: var(--surface-2); box-shadow: 0 -6px 16px rgba(0, 0, 0, .12); }
.compose-panel .ed-foot .btn { min-height: 38px; }
.compose-panel .ed-foot .btn--primary { padding-inline: 22px; font-weight: 650; }
.compose-layer.is-min { inset: auto 24px 16px auto; padding: 0; display: block; }
[dir="rtl"] .compose-layer.is-min { inset: auto auto 16px 24px; }
.compose-layer.is-min .compose-backdrop { display: none; }
.compose-layer.is-min .compose-panel { width: 380px; max-width: calc(100vw - 32px); }
.compose-layer.is-min .compose-panel > :not(.ed), .compose-layer.is-min .ed > :not(.ed-head) { display: none; }
.ed-title { display: inline-flex; align-items: center; gap: 4px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: default; }
.compose-layer.is-min .ed-title { cursor: pointer; }
.ed-title-who { font-weight: 500; color: var(--text-muted); min-width: 0; }
.ed-delete { color: var(--danger); }
.ed-delete[hidden] { display: none; }
.ed-keys { opacity: .8; }
@media (max-width: 700px) {
  .compose-layer { padding: 0; }
  .compose-panel { width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .ed-keys { display: none; }
}

/* The original folded away while writing; the files carried along. */
.ed-body--trimmed [data-quoted] { display: none; }
.ed-trim-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin: 6px 14px; padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-2); color: var(--text-muted); font: inherit; font-size: calc(12px * var(--text-scale)); cursor: pointer; }
.ed-trim-toggle:hover { color: var(--text); background: var(--surface-3); }
.ed-trim-dots { letter-spacing: 1px; font-weight: 700; }
.ed-atts { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 14px; border-bottom: 1px solid var(--border); }
.ed-atts-label { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); font-size: calc(12px * var(--text-scale)); margin-inline-end: 4px; }
.ed-atts-label .icon, .ed-att .icon { width: 14px; height: 14px; }
.ed-att { display: inline-flex; align-items: center; gap: 6px; max-width: 280px; padding: 3px 4px 3px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); font-size: calc(12.5px * var(--text-scale)); }
[dir="rtl"] .ed-att { padding: 3px 10px 3px 4px; }
.ed-att-x { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: none; color: var(--text-muted); cursor: pointer; }
.ed-att-x:hover { background: var(--surface-3); color: var(--danger); }

/* Profile pictures over initials. */
.has-photo { position: relative; overflow: hidden; }
.avatar-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Attached pictures as thumbnails. */
.mail-thumbs { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 8px; }
.mail-thumb { position: relative; width: 132px; height: 100px; padding: 0; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); overflow: hidden; cursor: zoom-in; }
.mail-thumb.has-photo .avatar-photo { border-radius: 0; }
.mail-thumb-name { position: absolute; inset-inline: 0; bottom: 0; z-index: 1; padding: 2px 6px; font-size: 11px; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .65)); text-align: start; }
.mail-thumb:hover { box-shadow: 0 0 0 2px var(--accent); }

/* Drive views: list/grid, sort, four sizes, previews. */
.drive-viewbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.drive-viewbar .seg-item { display: inline-flex; align-items: center; gap: 5px; }
.drive-viewbar .seg-item .icon { width: 15px; height: 15px; }
.drive-viewbar-field { display: inline-flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; }
.drive-list .drive-row { grid-template-columns: var(--thumb, 40px) minmax(0, 1fr) 90px 160px 34px; }
.drive-thumb { position: relative; display: grid; place-items: center; width: var(--thumb, 40px); height: var(--thumb, 40px); border-radius: 6px; overflow: hidden; background: var(--surface-2); flex: 0 0 auto; }
.drive-thumb--folder { background: transparent; }
.drive-thumb .drive-icon { width: min(60%, 40px); height: min(60%, 40px); }
.drive-thumb.has-photo .drive-icon { display: none; }
.drive-thumb .avatar-photo { border-radius: 0; }
.drive-play { position: absolute; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; }
.drive-play .icon { width: 13px; height: 13px; }
.drive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tile, 176px), 1fr)); gap: 12px; }
.drive-tile { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); color: var(--text); font: inherit; text-align: start; cursor: pointer; min-width: 0; }
.drive-tile:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.drive-tile .drive-thumb { --thumb: 100%; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: var(--r); }
.drive-tile .drive-thumb--folder { aspect-ratio: 4 / 3; background: var(--surface-2); }
.drive-tile .drive-thumb .drive-icon { width: 38%; height: 38%; max-width: 72px; max-height: 72px; }
.drive-tile-name { font-weight: 600; font-size: calc(13px * var(--text-scale)); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.drive-tile-meta { min-height: 1em; }
@media (max-width: 700px) { .drive-list .drive-row { grid-template-columns: var(--thumb, 40px) minmax(0, 1fr) auto; } .drive-list .drive-row > time, .drive-list .drive-row > .btn { display: none; } }

/* WhatsApp: emoji picker, attachments, info panel, status. */
.emoji-picker { position: fixed; z-index: 70; display: flex; flex-direction: column; width: min(420px, calc(100vw - 16px)); height: min(440px, calc(100vh - 80px)); background: var(--wa-panel, var(--surface)); color: var(--wa-text, var(--text)); border: 1px solid var(--wa-line, var(--border)); border-radius: 16px; box-shadow: var(--shadow-pop); overflow: hidden; }
.emoji-tabs { display: flex; justify-content: space-between; padding: 6px 8px 0; border-bottom: 1px solid var(--wa-line, var(--border)); }
.emoji-tab { flex: 1 1 0; display: grid; place-items: center; height: 36px; border: 0; border-bottom: 3px solid transparent; background: none; font-size: 18px; cursor: pointer; color: var(--wa-muted); }
.emoji-tab:hover { border-bottom-color: var(--wa-green, var(--accent)); }
.emoji-tab .icon { width: 18px; height: 18px; }
.emoji-search { margin: 8px 10px; border-radius: 999px !important; }
.emoji-body { flex: 1 1 auto; overflow: auto; padding: 0 8px 8px; }
.emoji-section-title { position: sticky; top: 0; padding: 6px 4px; font-size: 12px; font-weight: 600; color: var(--wa-muted); background: var(--wa-panel, var(--surface)); }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); }
.emoji-cell { display: grid; place-items: center; height: 36px; border: 0; border-radius: 8px; background: none; font-size: 24px; cursor: pointer; line-height: 1; }
.emoji-cell:hover { background: var(--wa-hover, var(--surface-3)); }
.emoji-empty { padding: 16px; text-align: center; }
.wa-thread.is-drop { outline: 3px dashed var(--wa-green, var(--accent)); outline-offset: -6px; }
.wa-send-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; max-height: 50vh; overflow: auto; }
.wa-send-preview { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wa-send-preview img, .wa-send-preview video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); background: #000; }
.wa-send-file { display: grid; place-items: center; gap: 6px; aspect-ratio: 1; padding: 8px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); text-align: center; }
.wa-send-file .icon { width: 36px; height: 36px; color: var(--text-muted); }
.wa-head-open { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.wa-thread { position: relative; }
.wa-info { position: absolute; inset-block: 0; inset-inline-end: 0; z-index: 30; width: min(400px, 100%); display: flex; flex-direction: column; background: var(--wa-panel, var(--surface)); color: var(--wa-text, var(--text)); border-inline-start: 1px solid var(--wa-line, var(--border)); box-shadow: -8px 0 24px rgba(0, 0, 0, .18); }
.wa-info-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--wa-line, var(--border)); background: var(--wa-head, var(--surface-2)); }
.wa-info-body { flex: 1 1 auto; overflow: auto; }
.wa-info-top { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px 16px; text-align: center; border-bottom: 8px solid var(--wa-chatbg, var(--surface-2)); }
.wa-info-avatar { width: 150px !important; height: 150px !important; font-size: 44px !important; }
.wa-info-avatar .icon { width: 64px; height: 64px; }
.wa-info-name { font-size: 20px; font-weight: 600; }
.wa-info-phone { color: var(--wa-muted); }
.wa-info-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.wa-info-action { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 70px; padding: 8px; border: 1px solid var(--wa-line, var(--border)); border-radius: 12px; background: none; color: var(--wa-green, var(--accent)); font: inherit; font-size: 12px; text-decoration: none; cursor: pointer; }
.wa-info-action .icon { width: 20px; height: 20px; }
.wa-info-sec { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-bottom: 8px solid var(--wa-chatbg, var(--surface-2)); }
.wa-info-label { font-size: 13px; color: var(--wa-muted); }
.wa-info-desc { white-space: pre-wrap; margin: 0; }
.wa-info-media { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.wa-info-thumb { position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: #000; cursor: zoom-in; }
.wa-info-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wa-info-doc { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 4px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.wa-info-doc:hover { background: var(--wa-hover, var(--surface-3)); }
.wa-info-doc .icon { width: 18px; height: 18px; color: var(--wa-muted); flex: 0 0 auto; }
.wa-info-link { color: var(--wa-link, var(--accent)); font-size: 13px; }
.wa-status-list { display: flex; flex-direction: column; gap: 2px; max-height: 70vh; overflow: auto; }
.wa-status-row { display: flex; align-items: center; gap: 12px; padding: 8px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.wa-status-row:hover { background: var(--surface-3); }
.wa-status-ring { display: grid; place-items: center; padding: 2px; border-radius: 50%; border: 2px solid #25d366; }
dialog.wa-story { width: min(460px, 100vw); height: min(820px, 100vh); max-height: 100vh; padding: 0; border: 0; border-radius: 12px; background: #111; color: #fff; overflow: hidden; }
dialog.wa-story::backdrop { background: rgba(0, 0, 0, .85); }
.wa-story-bars { position: absolute; top: 8px; inset-inline: 10px; z-index: 3; display: flex; gap: 4px; }
.wa-story-bar { flex: 1 1 0; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.wa-story-bar i { display: block; height: 100%; width: 0; background: #fff; }
.wa-story-bar.is-done i { width: 100%; }
.wa-story-bar.is-on i { animation: story-fill 6s linear forwards; }
@keyframes story-fill { to { width: 100%; } }
.wa-story-head { position: absolute; top: 18px; inset-inline: 12px; z-index: 3; display: flex; align-items: center; gap: 8px; font-weight: 600; text-shadow: 0 1px 3px #000; }
.wa-story-head .wa-icon-btn { color: #fff; }
.wa-story-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.wa-story-media { max-width: 100%; max-height: 100%; object-fit: contain; }
.wa-story-media.is-blur { filter: blur(6px); width: 100%; }
.wa-story-text { width: 100%; height: 100%; display: grid; place-items: center; padding: 32px; font-size: 26px; text-align: center; white-space: pre-wrap; }
.wa-story-caption { position: absolute; bottom: 0; inset-inline: 0; z-index: 3; padding: 16px; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); text-align: center; }
.wa-story-caption:empty { display: none; }
.wa-story-nav { position: absolute; top: 50%; z-index: 4; display: grid; place-items: center; width: 40px; height: 40px; margin-top: -20px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .4); color: #fff; cursor: pointer; }
.wa-story-nav--prev { inset-inline-start: 8px; }
.wa-story-nav--next { inset-inline-end: 8px; }

/* WhatsApp: history from the phone, and the message analysis. */
.wa-history-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.wa-history-btn .icon { width: 13px; height: 13px; }
.wa-act--summary .icon { color: #0ea5e9; }
dialog.dlg.wa-analysis-dlg { width: min(920px, calc(100vw - 32px)); }
.wa-analysis { display: flex; flex-direction: column; gap: 12px; max-height: 76vh; overflow: auto; }
.wa-analysis-head h3 { margin: 0 0 6px; font-size: calc(17px * var(--text-scale)); }
.wa-analysis-summary { margin: 0; line-height: 1.6; font-weight: 500; }
.wa-analysis-sec ul, .wa-analysis-sec ol { margin: 0; padding-inline-start: 18px; display: grid; gap: 4px; line-height: 1.55; }
.wa-analysis-sec p { margin: 0; line-height: 1.55; }
.wa-analysis-sec.is-ask { padding: 8px 12px; border-radius: var(--r); background: color-mix(in srgb, #f59e0b 12%, transparent); }
.wa-analysis-sec.is-decision li::marker { color: #16a34a; }
.wa-analysis-sec.is-issue { padding: 8px 12px; border-radius: var(--r); background: color-mix(in srgb, var(--danger) 8%, transparent); }
.wa-analysis-status--recurring { color: #b45309; background: color-mix(in srgb, #f59e0b 18%, transparent); }
.wa-analysis-status--resolved { color: #15803d; background: color-mix(in srgb, #22c55e 16%, transparent); }
.wa-analysis-foot { gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 10px; }

/* The search panel under the email search box. */
.mail-search-pop { position: fixed; z-index: 58; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; max-height: calc(100vh - 140px); overflow: auto;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); }
.mail-search-head { gap: 8px; }
.mail-search-tabs .seg-item { display: inline-flex; align-items: center; gap: 6px; }
.mail-search-tabs .icon { width: 14px; height: 14px; }
.mail-search-grid { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 10px; align-items: center; }
.mail-search-label { color: var(--text-muted); font-size: calc(12px * var(--text-scale)); margin: 0; }
.mail-search-grid input, .mail-search-grid select { width: 100%; min-width: 0; }
.mail-search-grid .row { gap: 6px; flex-wrap: nowrap; }
.mail-search-checks { gap: 14px; flex-wrap: wrap; }
.mail-search-check { margin: 0; }
.mail-search-foot { gap: 8px; border-top: 1px solid var(--border); padding-top: 10px; }
.mail-search-people { display: flex; flex-direction: column; gap: 2px; }
.mail-search-people:empty { display: none; }
.mail-search-person { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--r-sm); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.mail-search-person:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.mail-search-person .contact-main { flex: 1 1 auto; }
@media (max-width: 600px) { .mail-search-grid { grid-template-columns: 1fr; } }

.teach-person { border: 1px solid var(--border); border-radius: var(--r); padding: 8px 12px; }
.teach-person > summary { cursor: pointer; font-weight: 600; }
.teach-person[open] > summary { margin-bottom: 8px; }
.learn-row.is-off { opacity: .55; }

/* Company structure: departments → sections → sub-sections → people, editable by drag and drop. */
.org-root.org-full { position: fixed; inset: 0; z-index: 45; margin: 0; padding: 16px 20px calc(16px + var(--safe-b, 0px)); overflow: auto; background: var(--bg); }
.org-toolbar { flex-wrap: wrap; gap: 8px; }
.org-toolbar input[type=search] { min-width: 220px; flex: 0 1 300px; }
.org-hint { display: inline-flex; align-items: center; gap: 4px; }
.org-hint .icon { width: 13px; height: 13px; }
.org-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; align-items: start; }
.org-full .org-board { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.org-dept { padding: 0; overflow: hidden; }
.org-dept-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); cursor: grab; }
.org-dept-head h2 { margin: 0; font-size: calc(15px * var(--text-scale)); }
.org-dept-title { min-width: 0; }
.org-dept-body { display: flex; flex-direction: column; gap: 6px; padding: 10px; min-height: 44px; }
.org-grip { color: var(--text-faint); cursor: grab; user-select: none; font-size: 14px; line-height: 1; }
.org-count { min-width: 24px; padding: 1px 7px; border-radius: 999px; background: var(--surface-3); font-size: 12px; text-align: center; }
.org-sec { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.org-sec-head { display: flex; align-items: center; gap: 4px; padding: 4px 6px 4px 8px; cursor: grab; border-radius: var(--r) var(--r) 0 0; }
.org-sec-head:hover { background: var(--surface-3); }
.org-sec-name { min-width: 0; font-size: calc(13.5px * var(--text-scale)); }
.org-twisty { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--text-muted); cursor: pointer; }
.org-twisty .icon { width: 14px; height: 14px; }
.org-sec-body { display: flex; flex-direction: column; gap: 5px; padding: 4px 8px 8px; margin-inline-start: 10px; border-inline-start: 2px solid color-mix(in srgb, var(--accent) 25%, var(--border)); min-height: 30px; }
.org-sec-body[hidden] { display: none; }
.org-person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 4px 4px 4px 6px; border-radius: var(--r-sm); background: var(--surface-2); cursor: grab; }
.org-person .avatar { grid-row: 1 / span 2; }
.org-person-name { font-weight: 600; font-size: calc(13px * var(--text-scale)); color: var(--text); text-decoration: none; border: 0; background: none; padding: 0; text-align: start; font-family: inherit; cursor: pointer; }
.org-person-name:hover { text-decoration: underline; }
.org-person-role { grid-column: 2; font-size: calc(11.5px * var(--text-scale)); }
.org-more { grid-row: 1 / span 2; grid-column: 3; opacity: .55; }
.org-person:hover .org-more { opacity: 1; }
.org-empty { padding: 8px; border: 1px dashed var(--border); border-radius: var(--r-sm); text-align: center; }
.is-dragging { opacity: .45; }
body.org-dragging .org-dept-body, body.org-dragging .org-sec-body { outline: 1px dashed color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: -2px; }
.is-over { background: color-mix(in srgb, var(--accent) 12%, transparent) !important; outline: 2px solid var(--accent) !important; }
.is-before { box-shadow: inset 0 3px 0 var(--accent); }
.org-dept-head.is-before { box-shadow: inset 4px 0 0 var(--accent); }
.is-hit { background: color-mix(in srgb, #f59e0b 22%, transparent) !important; }
.org-unassigned { border-style: dashed; }
/* Chart view: boxes in a tree (the connectors are the hierarchy tab's), wider than a person card so a
   section's people fit inside. */
.org-tree-wrap { padding: var(--s4) var(--s3) var(--s5); min-height: 420px; }
.org-full .org-tree-wrap { min-height: calc(100vh - 120px); }
.org-tree { transform-origin: top center; }
.org-tree .tree-root, .org-tree .tree-children { gap: var(--s4); align-items: flex-start; }
.org-node { width: 250px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06)); text-align: start; }
.org-node-head { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 6px 6px 6px 8px; border-bottom: 1px solid var(--border); cursor: grab; }
.org-node-head > .icon { width: 16px; height: 16px; color: var(--accent); flex: 0 0 auto; }
.org-node-title { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.org-node-name { flex: 1 1 auto; min-width: 0; font-size: calc(13.5px * var(--text-scale)); }
.org-node-title .org-node-name { flex: none; }
.org-node-people { display: flex; flex-direction: column; gap: 4px; padding: 6px; max-height: 320px; overflow: auto; }
.org-node .org-empty { margin: 6px; padding: 6px; }
.org-node-folded { padding: 4px 10px 6px; }
.org-node--company { width: 280px; border-color: var(--accent); border-width: 2px; }
.org-node--company .org-node-head { border-bottom: 0; cursor: default; }
.org-node--dept { border-top: 3px solid var(--accent); }
.org-node--dept .org-node-head { background: var(--surface-2); }
.org-node--section { border-top: 3px solid color-mix(in srgb, var(--accent) 45%, var(--border)); }
.org-node--unassigned { border-style: dashed; }
.org-node.is-over { outline: 2px dashed var(--accent); outline-offset: 2px; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.org-node.is-hit { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
.org-zoom .btn { min-width: 32px; }
/* Money and headcount above the team: what this company spends, what it has left, how many people. */
.cost-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); padding: var(--s2) var(--s3); margin-bottom: var(--s2);
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.cost-cell { display: flex; flex-direction: column; min-width: 0; }
.cost-label { color: var(--text-muted); }
.cost-value { font-size: calc(15px * var(--text-scale)); font-weight: 600; }
.cost-cell.is-low .cost-value { color: var(--danger); }

/* ---- One issue, whole: the brief, the clock, the message, the photos ---- */
.ticket-story { display: flex; flex-direction: column; gap: var(--s3); }
.ticket-brief { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid color-mix(in srgb, #8b5cf6 45%, var(--border));
  border-inline-start: 3px solid #8b5cf6; border-radius: var(--r-lg); background: color-mix(in srgb, #8b5cf6 7%, var(--surface)); }
.ticket-headline { margin: 0; font-weight: 600; line-height: 1.5; }
.ticket-reply { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.ticket-reply-text { white-space: pre-wrap; line-height: 1.55; }
.ticket-clock { flex-wrap: wrap; }
.ticket-fields label { display: flex; flex-direction: column; gap: 4px; font-size: calc(12.5px * var(--text-scale)); color: var(--text-muted); }
.ticket-source { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); }
.ticket-source-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: calc(12.5px * var(--text-scale)); }
.ticket-source-head .icon { width: 15px; height: 15px; color: var(--wa-green, #00a884); }
.ticket-source-body { padding: 8px 10px; white-space: pre-wrap; line-height: 1.55; max-height: 220px; overflow: auto; }
.ticket-media { display: flex; flex-wrap: wrap; gap: 6px; }
.ticket-media-item { position: relative; display: grid; place-items: center; width: 92px; height: 92px; padding: 0; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--surface-2); cursor: zoom-in; }
.ticket-media-item img { width: 100%; height: 100%; object-fit: cover; }
.ticket-media-item .icon { width: 26px; height: 26px; color: var(--text-muted); }
.ticket-reports summary { cursor: pointer; padding: 4px 0; font-weight: 600; }
.ticket-filters { flex-wrap: wrap; gap: 6px; }
.ticket-filter { min-width: 120px; max-width: 200px; }
.chip--filter.is-on { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent); }
/* Who a mail is from, to and copied to — open it and every address is there, wrapped and selectable. */
.mail-details { margin: 0 var(--s4) var(--s2); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); }
.mail-details > summary { display: flex; align-items: center; gap: 6px; padding: 6px 10px; cursor: pointer; font-size: calc(12.5px * var(--text-scale)); color: var(--text-muted); }
.mail-details > summary .icon { width: 14px; height: 14px; }
.mail-details[open] > summary { border-bottom: 1px solid var(--border); }
.mail-people { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; }
.mail-people-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; align-items: start; }
.mail-people-label { font-size: calc(12px * var(--text-scale)); color: var(--text-muted); padding-top: 3px; }
.mail-people-values { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.mail-person { display: inline-flex; flex-direction: column; padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); max-width: 100%; }
.mail-person-name { font-size: calc(12.5px * var(--text-scale)); font-weight: 600; overflow-wrap: anywhere; }
.mail-person-mail { font-size: calc(11px * var(--text-scale)); color: var(--text-muted); overflow-wrap: anywhere; }
.mail-person.is-me { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
@media (max-width: 600px) { .mail-people-row { grid-template-columns: 1fr; gap: 2px; } .mail-details { margin-inline: var(--s3); } }

/* The month's spend in the top bar: the number, the budget behind it, and a thin bar under both. */
.spend-chip { display: inline-flex; align-items: baseline; gap: 5px; position: relative; padding: 4px 10px 6px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text); text-decoration: none; white-space: nowrap; }
.spend-chip:hover { border-color: var(--border-strong); text-decoration: none; }
/* On a phone the pill is the one thing in the bar that repeats something shown elsewhere (Budget, and the
   top of Team), and without it the company name has room to be read. */
@media (max-width: 520px) { .topbar-end .spend-chip { display: none; } }
.spend-main { font-weight: 700; font-size: calc(13px * var(--text-scale)); }
.spend-of { font-size: calc(11.5px * var(--text-scale)); color: var(--text-muted); }
.spend-bar { position: absolute; left: 10px; right: 10px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.spend-bar > i { display: block; height: 100%; background: var(--accent); }
.spend-chip.is-near { border-color: var(--warning); } .spend-chip.is-near .spend-bar > i { background: var(--warning); }
.spend-chip.is-over { border-color: var(--danger); } .spend-chip.is-over .spend-main { color: var(--danger); } .spend-chip.is-over .spend-bar > i { background: var(--danger); }
@media (max-width: 720px) { .spend-chip .spend-of { display: none; } }

/* "Waiting on you": one glance, nine numbers, each one a link to the thing itself. */
.desk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.desk-cell { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--surface); color: var(--text); text-decoration: none; }
.desk-cell:hover { background: var(--surface-2); text-decoration: none; }
.desk-value { font-size: calc(22px * var(--text-scale)); font-weight: 700; line-height: 1.1; }
.desk-label { font-size: calc(12px * var(--text-scale)); color: var(--text-muted); }
.desk-cell.is-danger .desk-value { color: var(--danger); }
.desk-cell.is-warn .desk-value { color: var(--warning); }
.is-ok { color: var(--ok, var(--success)); }
.is-warn { color: var(--warning); }
/* "is-bad" was written in four places in app.js and styled in none: the late and cancelled counts
   were black like everything else. One rule, the same colour as .is-danger. */
.is-bad, .is-danger { color: var(--danger); }
.table td.num, .table th.num { text-align: end; font-variant-numeric: tabular-nums; }

/* A mention is a button now, so pressing it can say who the person is — but it must still read as a name
   in a sentence, not as a control (Ali, 2026-09-27). */
.mention-chip {
  color: #2563EB; font-weight: 600; white-space: nowrap;
  background: none; border: 0; padding: 0; margin: 0; font-size: inherit; font-family: inherit;
  line-height: inherit; cursor: pointer;
}
.mention-chip:hover, .mention-chip:focus-visible { text-decoration: underline; }
[data-theme="navy"] .mention-chip, [data-theme="midnight"] .mention-chip { color: #60a5fa; }
/* The same blue inside the editor, where a mention is an <a> so the sent mail stays ordinary HTML. */
.ed-body a[data-mention], .ed-body a[data-mention-email] { cursor: pointer; }

/* Who the mention is: photo, job title, where they sit, how to reach them. */
.mention-pop {
  position: fixed; z-index: 60; width: min(320px, calc(100vw - 16px));
  display: flex; flex-direction: column; gap: 6px; padding: 12px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .28);
}
.mention-pop-head { display: flex; align-items: center; gap: 10px; }
.mention-pop-name { font-weight: 650; overflow-wrap: anywhere; }
.mention-pop-role { color: var(--text-muted); overflow-wrap: anywhere; }
.mention-pop-line { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .92em; }
.mention-pop-line a, .mention-pop-line bdi { overflow-wrap: anywhere; min-width: 0; }
.mention-pop-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* The conversation summary, at the top of the reading pane. */
.mail-summary { margin: 8px var(--s3) 10px; padding: 10px 14px 12px; border: 1px solid color-mix(in srgb, #0ea5e9 40%, var(--border)); border-inline-start: 3px solid #0ea5e9;
  border-radius: var(--r-lg); background: color-mix(in srgb, #0ea5e9 7%, var(--surface)); }
.mail-summary[hidden] { display: none; }
.mail-summary-head { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.mail-summary-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.mail-summary-toggle .icon { width: 15px; height: 15px; color: #0ea5e9; }
.mail-summary-status--waiting_on_me { color: #b45309; background: color-mix(in srgb, #f59e0b 18%, transparent); }
.mail-summary-status--resolved { color: #15803d; background: color-mix(in srgb, #22c55e 16%, transparent); }
.mail-summary-status--waiting_on_others { color: #6d28d9; background: color-mix(in srgb, #8b5cf6 14%, transparent); }
.mail-summary-headline { margin: 6px 0 4px; font-weight: 600; line-height: 1.55; }
/* The closed card: one line of headline, so the whole thing is a header and nothing more. */
.mail-summary-headline--peek { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; margin-bottom: 0; }
.mail-summary-sec { margin-top: 8px; }
.mail-summary-label { font-size: calc(11.5px * var(--text-scale)); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin-bottom: 3px; }
.mail-summary-sec ul, .mail-summary-sec ol { margin: 0; padding-inline-start: 18px; display: grid; gap: 3px; line-height: 1.5; }
.mail-summary-sec p { margin: 0; line-height: 1.5; }
.mail-summary-sec.is-ask li::marker { color: #d97706; }
.mail-summary-sec.is-ask { padding: 6px 10px; border-radius: var(--r); background: color-mix(in srgb, #f59e0b 12%, transparent); }
.mail-summary-sec.is-issue li::marker { color: var(--danger); }
.mail-summary-sec.is-decision li::marker { color: #16a34a; }
.mail-summary-timeline { list-style: none; padding-inline-start: 0 !important; border-inline-start: 2px solid color-mix(in srgb, #0ea5e9 40%, var(--border)); }
.mail-summary-timeline li { position: relative; padding-inline-start: 12px; }
.mail-summary-timeline li::before { content: ""; position: absolute; inset-inline-start: -5px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: #0ea5e9; }
.mail-summary-when { display: inline-block; min-width: 78px; margin-inline-end: 6px; color: var(--text-muted); font-size: calc(12px * var(--text-scale)); }
.mail-summary-line { color: var(--text); }
.mail-summary-line .icon { width: 12px; height: 12px; color: #0ea5e9; vertical-align: -1px; margin-inline-end: 4px; }
.google-apis { display: flex; flex-wrap: wrap; gap: 6px; }
.google-apis-box { border: 1px solid var(--border); border-radius: var(--r); padding: 8px 12px; }
.google-apis-box > summary { cursor: pointer; font-weight: 600; font-size: calc(13px * var(--text-scale)); }
.google-apis-box[open] > summary { margin-bottom: 8px; }
.mail-order { cursor: pointer; }
.mail-order .icon { width: 13px; height: 13px; }

/* WhatsApp voice notes, played in place. */
.wa-voice { display: flex; align-items: center; gap: 8px; min-width: min(300px, 100%); padding: 4px 2px; }
.wa-voice-play { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--wa-green); color: #fff; cursor: pointer; }
.wa-voice-play .icon { width: 18px; height: 18px; }
.wa-voice-play .spin { width: 16px; height: 16px; }
.wa-voice-main { flex: 1 1 auto; min-width: 120px; display: flex; flex-direction: column; gap: 2px; }
/* A drawn track: filled up to the thumb, empty after it, and the thumb sits flush at the start at 0:00 —
   the browser's default range made an unplayed note look a quarter played. */
.wa-voice-bar { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; margin: 4px 0 0; padding: 0; background: transparent; cursor: pointer; direction: ltr; --fill: 0%; --voice-on: var(--wa-green); --voice-off: color-mix(in srgb, var(--wa-muted) 35%, transparent); }
.wa-voice-bar::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--voice-on) var(--fill), var(--voice-off) var(--fill)); }
.wa-voice-bar::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; background: var(--voice-on); border: 0; }
.wa-voice-bar::-moz-range-track { height: 4px; border-radius: 2px; background: var(--voice-off); }
.wa-voice-bar::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--voice-on); }
.wa-voice-bar::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--voice-on); border: 0; }
.wa-voice-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--wa-muted); direction: ltr; }
.wa-voice-speed { min-width: 38px; padding: 1px 7px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--wa-muted) 22%, transparent); color: var(--wa-text); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.wa-voice-speed:hover { background: color-mix(in srgb, var(--wa-green) 30%, transparent); }
.wa-voice-stop[hidden] { display: none; }
.wa-voice-square { display: block; width: 11px; height: 11px; border-radius: 2px; background: currentColor; }
.wa-row--out .wa-voice-play { background: rgba(255, 255, 255, .92); color: #075e54; }
.wa-row--out .wa-voice-bar { --voice-on: #075e54; --voice-off: rgba(7, 94, 84, .25); }
.wa-voice.is-playing .wa-voice-play { box-shadow: 0 0 0 3px color-mix(in srgb, var(--wa-green) 35%, transparent); }

/* WhatsApp: a prepared reply as a card under the conversation, not a fake outgoing bubble. */
.wa-row--card { display: block; padding: 6px 8%; }
.wa-ai-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid color-mix(in srgb, #8b5cf6 45%, var(--wa-line, #ccc)); border-inline-start: 3px solid #8b5cf6;
  border-radius: 12px; background: color-mix(in srgb, #8b5cf6 8%, var(--wa-panel, #fff)); color: var(--wa-text, inherit); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.wa-ai-card .wa-draft-head { display: flex; align-items: center; gap: 8px; }
.wa-ai-card .wa-text { padding: 8px 10px; border-radius: 8px; background: var(--wa-out); }
.wa-ai-card .wa-draft-acts { display: flex; flex-wrap: wrap; gap: 6px; }

/* People from his mail, under an address field or at the caret for @mentions. */
.contact-pop { position: fixed; z-index: 80; display: flex; flex-direction: column; padding: 4px; max-height: 320px; overflow: auto;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r); box-shadow: var(--shadow-pop); }
.contact-pop[hidden] { display: none; }
/* In the top layer since 2026-10-18: undo the browser's popover style (inset:0, margin:auto, border, padding). */
.contact-pop { margin: 0; right: auto; bottom: auto; color: var(--text); }
.contact-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--r-sm); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.contact-opt.is-on, .contact-opt:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.contact-av { width: 30px; height: 30px; font-size: 12px; flex: 0 0 auto; }
.contact-main { display: flex; flex-direction: column; min-width: 0; }
.contact-name { font-weight: 600; font-size: calc(13px * var(--text-scale)); }
.contact-mail { font-size: calc(12px * var(--text-scale)); color: var(--text-muted); }

/* An AI-prepared reply: marked as the AI's in the list and shown in its conversation. */
.mail-ai-chip { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; padding: 1px 7px; border-radius: 999px; font-size: calc(11px * var(--text-scale)); font-weight: 600;
  color: #7c3aed; background: color-mix(in srgb, #8b5cf6 16%, transparent); white-space: nowrap; }
.mail-ai-chip .icon { width: 12px; height: 12px; }
.ai-draft-card { margin: 8px var(--s3) 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, #8b5cf6 45%, var(--border)); border-inline-start: 3px solid #8b5cf6; border-radius: var(--r-lg);
  background: color-mix(in srgb, #8b5cf6 7%, var(--surface)); display: flex; flex-direction: column; gap: 8px; }
.ai-draft-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* The card is a <details> now; its head is the summary, so it needs a pointer and a marker that fits. */
summary.ai-draft-head { cursor: pointer; list-style: none; }
summary.ai-draft-head::-webkit-details-marker { display: none; }
summary.ai-draft-head::after { content: "›"; flex: 0 0 auto; color: var(--text-muted); transform: rotate(90deg); transition: transform .15s ease; }
.ai-draft-card:not([open]) > summary.ai-draft-head::after { transform: none; }
.ai-draft-badge { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: #7c3aed; white-space: nowrap; }
.ai-draft-badge .icon { width: 15px; height: 15px; }
.ai-draft-body { white-space: pre-wrap; line-height: 1.6; padding: 10px 12px; background: var(--surface); border-radius: var(--r); border: 1px solid var(--border); }
.ai-draft-note { margin: 0; }
.ai-draft-note .icon { width: 13px; height: 13px; vertical-align: -2px; }
.ai-draft-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-draft-badge .spin { width: 14px; height: 14px; }
/* Overtaken by a newer message: it must not read like a reply that is ready to go. */
.ai-draft-card--stale { border-color: color-mix(in srgb, var(--warning, #b8860b) 55%, var(--border)); border-inline-start-color: var(--warning, #b8860b); background: color-mix(in srgb, var(--warning, #b8860b) 7%, var(--surface)); }
.ai-draft-card--stale .ai-draft-body { opacity: .68; }
.ai-draft-badge.is-stale { color: var(--warning, #b8860b); }
/* "Change it": a note to the AI and a language, under every prepared reply. */
.rewrite-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; padding: 6px; border: 1px dashed color-mix(in srgb, #8b5cf6 45%, var(--border)); border-radius: var(--r); background: color-mix(in srgb, #8b5cf6 4%, transparent); }
.rewrite-note { flex: 1 1 220px; min-width: 0; min-height: 34px; max-height: 140px; resize: none; padding: 6px 8px; font: inherit; font-size: calc(13px * var(--text-scale)); line-height: 1.4; }
.rewrite-bar-end { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.rewrite-lang { width: auto; min-height: 32px; padding-block: 4px; font-size: calc(12.5px * var(--text-scale)); }
.wa-ai-card .rewrite-bar { background: transparent; }

/* ---- pen pad and table picker ---- */
.draw-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.draw-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.draw-width-wrap { display: inline-flex; align-items: center; gap: 6px; }
.draw-width-wrap .icon { width: 14px; height: 14px; }
.draw-width { width: 110px; }
.draw-wrap { overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: var(--r); }
.draw-canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }

/* ---- Settings › My email ---- */
.mail-settings .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s3); }
.mail-settings .card-head h2 .icon { width: 18px; height: 18px; vertical-align: -3px; color: var(--accent); }
.mail-settings .list-row-title .icon { width: 16px; height: 16px; vertical-align: -3px; }
.input--narrow { max-width: 120px; }
.sig-row { overflow: hidden; border: 1px solid var(--border); border-radius: var(--r); }
.sig-row-head { align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); background: var(--surface-2); }
.sig-preview { padding: var(--s3); background: #fff; color: #111827; font: calc(13px * var(--text-scale))/1.5 "Segoe UI", "Noto Sans Arabic", Arial, sans-serif; }
.sig-preview p { margin: 0 0 6px; }
.sig-edit { padding: var(--s3); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: var(--r); }

/* ==================================================================
   WhatsApp, laid out like the app
   ==================================================================
   Its own palette, in light and dark, because the point is that it reads like the WhatsApp he has open all
   day: beige chat background, white incoming and green outgoing bubbles, green badges. The classes are new
   (wa-bub, wa-card, wa-send-btn) so the older WhatsApp cards in the company settings keep their look. */
.wa {
  --wa-panel: #ffffff; --wa-head: #f0f2f5; --wa-chatbg: #efeae2; --wa-in: #ffffff; --wa-out: #d9fdd3;
  --wa-text: #111b21; --wa-muted: #667781; --wa-green: #00a884; --wa-line: #e9edef; --wa-hover: #f5f6f6;
  --wa-on: #f0f2f5; --wa-day: #ffffff; --wa-quote: rgba(11, 20, 26, .05); --wa-draft: #fff6dc; --wa-dots: rgba(11, 20, 26, .05);
  --wa-link: #027eb5;
  gap: 0; height: calc(100vh - var(--topbar-h) - 40px); min-height: 480px;
}
html:not([data-theme="light"]) .wa {
  --wa-panel: #111b21; --wa-head: #202c33; --wa-chatbg: #0b141a; --wa-in: #202c33; --wa-out: #005c4b;
  --wa-text: #e9edef; --wa-muted: #8696a0; --wa-line: #222d34; --wa-hover: #202c33; --wa-on: #2a3942;
  --wa-day: #182229; --wa-quote: rgba(255, 255, 255, .07); --wa-draft: #332d1b; --wa-dots: rgba(255, 255, 255, .03); --wa-link: #53bdeb;
}
/* The list's width is his, not ours: --wa-col is set by dragging the divider and remembered per browser. */
.wa .wa-grid { display: grid; grid-template-columns: var(--wa-col, 380px) 5px minmax(0, 1fr); gap: 0; height: 100%; min-height: 0; background: var(--wa-line); border: 1px solid var(--wa-line); border-radius: var(--r-lg); overflow: hidden; }
.wa .wa-grid--narrow { grid-template-columns: minmax(0, 1fr); }
.wa-resizer { position: relative; background: var(--wa-line); cursor: col-resize; touch-action: none; }
.wa-resizer::after { content: ""; position: absolute; inset-block: 0; inset-inline: -3px; }
.wa-resizer:hover, .wa-resizer:focus-visible, .wa-resizer.is-dragging { background: var(--wa-green); outline: none; }
.wa .wa-list, .wa .wa-thread { display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; background: var(--wa-panel); color: var(--wa-text); }
.wa .wa-list { border-inline-end: 1px solid var(--wa-line); }
.wa-loading { padding: var(--s4); }

/* ---- chat list ---- */
.wa .wa-list-head { position: static; display: flex; align-items: center; gap: 6px; padding: 12px 14px 8px 18px; border: 0; background: var(--wa-panel); font-weight: 400; }
.wa-list-title { margin: 0; font-size: calc(22px * var(--text-scale)); font-weight: 700; color: var(--wa-text); }
.wa-icon-btn { flex: 0 0 auto; display: inline-grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: var(--wa-muted); cursor: pointer; }
.wa-icon-btn:hover { background: var(--wa-hover); color: var(--wa-text); }
.wa-icon-btn .icon { width: 20px; height: 20px; }
.wa-icon-btn--solid, .wa-icon-btn--solid:hover { background: var(--wa-text); color: var(--wa-panel); }
.wa-icon-btn.is-on, .wa-icon-btn--ai .icon { color: var(--wa-green); }
.wa-icon-btn.is-fav .icon { color: #f5b50a; }
.wa-icon-btn[data-loading] { opacity: .5; pointer-events: none; }
/* ---- Spend: the month as a row of days, so a spike has a shape ---- */
/* `spend-bar` was already taken by the chip in the top bar — and that one is `position: absolute`, so these
   bars inherited it, escaped their column and painted the whole page blue (Ali, 2026-09-20). Own names now. */
.spend-days { display: flex; align-items: flex-end; gap: 6px; overflow-x: auto; padding: var(--s3); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.spendday { flex: 1 0 44px; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 44px; }
.spendday-wrap { position: relative; display: flex; align-items: flex-end; height: 90px; width: 100%; }
.spendday-bar { position: static; width: 100%; min-height: 3px; border-radius: var(--r-sm) var(--r-sm) 0 0; background: var(--accent); opacity: .85; }
.spendday-label { color: var(--text-faint); font-size: calc(10px * var(--text-scale)); }
.spendday-usd { color: var(--text-muted); font-size: calc(10px * var(--text-scale)); }

/* ---- The meeting recorder: a live transcript that keeps its own pace ---- */
.rec-bar { display: flex; align-items: center; gap: var(--s2); }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong, var(--text-faint)); flex: 0 0 auto; }
.rec-dot.is-live { background: var(--danger); animation: rec-pulse 1.4s ease-in-out infinite; }
@keyframes rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .rec-dot.is-live { animation: none; } }
.rec-state { color: var(--text-muted); font-size: calc(13px * var(--text-scale)); }
.rec-timer { font-size: calc(16px * var(--text-scale)); font-weight: 700; font-variant-numeric: tabular-nums; }
.rec-transcript {
  min-height: 180px; max-height: 42vh; overflow-y: auto; padding: var(--s3);
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2);
  font-size: calc(14px * var(--text-scale)); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere;
}
.rec-transcript--read { min-height: 0; max-height: 34vh; }
.rec-interim { color: var(--text-faint); }

/* ---- Meetings: who, the mic check, the live room, and what came out of it (2026-09-22) ---- */
.mtg-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }
.mtg-mic { position: sticky; top: var(--s4); }
.mtg-mic .card-head select { width: auto; max-width: 55%; height: 32px; padding-block: 4px; font-size: calc(13px * var(--text-scale)); }
.mtg-waves {
  display: block; width: 100%; height: 120px; border-radius: var(--r-lg);
  background: radial-gradient(ellipse 60% 70% at 50% 50%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 75%), var(--surface-2);
}
.mtg-waves--live { height: 180px; background: radial-gradient(ellipse 55% 75% at 50% 50%, color-mix(in srgb, #a855f7 14%, transparent), transparent 75%), var(--surface-2); }
.mtg-status { display: flex; align-items: center; gap: var(--s2); min-height: 32px; font-weight: 500; }
.mtg-status-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--text-faint); transition: background .2s, box-shadow .2s; }
.mtg-status--good { color: var(--success); }
.mtg-status--good .mtg-status-dot { background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 22%, transparent); }
.mtg-status--quiet { color: var(--warning); }
.mtg-status--quiet .mtg-status-dot { background: var(--warning); }
.mtg-status--blocked { color: var(--danger); }
.mtg-status--blocked .mtg-status-dot { background: var(--danger); }
.mtg-stt-result { margin: 0; padding: 8px 10px; border-radius: var(--r); background: var(--surface-2); }
.mtg-stt-result.is-ok { color: var(--success); }
.mtg-stt-result.is-warn { color: var(--warning); }
.mtg-kinds { flex-wrap: wrap; }
.mtg-kinds .seg-item { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; }
.mtg-label { font-size: calc(13px * var(--text-scale)); font-weight: 500; }
.mtg-warn { color: var(--warning); }
.mtg-form-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s3); }
.mtg-form-row .field { margin-bottom: 0; }
.mtg-guest-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: var(--s2); align-items: center; }
.mtg-start { width: 100%; height: 50px; font-size: calc(16px * var(--text-scale)); font-weight: 600; }
.mtg-people { display: flex; flex-wrap: wrap; gap: 6px; }
.mtg-person {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 10px 4px 4px;
  border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface-2);
}
[dir="rtl"] .mtg-person { padding: 4px 4px 4px 10px; }
.mtg-person .avatar { flex: 0 0 auto; }
.mtg-person-main { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.mtg-person-name { font-weight: 600; font-size: calc(13px * var(--text-scale)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtg-person-meta { font-size: calc(11.5px * var(--text-scale)); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.mtg-person-x { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: none; color: var(--text-muted); }
.mtg-person-x:hover { background: var(--surface); color: var(--danger); }
.mtg-list .list-row { padding-inline: 0; }
.mtg-list-icon { display: inline-grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); color: var(--accent); }

.mtg-live { display: flex; flex-direction: column; gap: var(--s3); }
.mtg-live-head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.mtg-live-title { margin: 0; font-size: calc(20px * var(--text-scale)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtg-live-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); font-weight: 700; font-size: calc(12px * var(--text-scale)); text-transform: uppercase; letter-spacing: .04em;
}
.mtg-live-badge.is-paused { background: var(--surface-2); color: var(--text-muted); }
.mtg-live-badge.is-paused .rec-dot { animation: none; background: var(--text-faint); }
.mtg-timer { font-size: calc(28px * var(--text-scale)); font-weight: 700; font-variant-numeric: tabular-nums; }
.mtg-live-state { margin: 0; text-align: center; color: var(--text-muted); font-weight: 500; }
.mtg-live.is-paused .mtg-waves { opacity: .5; }
.mtg-transcript {
  min-height: 200px; max-height: 42vh; overflow-y: auto; padding: var(--s3) var(--s4);
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2);
  font-size: calc(15px * var(--text-scale)); line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere;
}
.mtg-controls { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.mtg-processing { align-items: center; text-align: center; padding-block: var(--s6); }
.mtg-processing h2 { margin: 0; }

.mtg-detail-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); margin-bottom: var(--s4); }
.mtg-detail-head h1 { margin: 0; }
.mtg-detail-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }
.mtg-summary { margin: 0; line-height: 1.65; }
.mtg-ul { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 4px; line-height: 1.55; }
.mtg-tasks { display: flex; flex-direction: column; }
.mtg-task { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s2); align-items: start; padding: var(--s2) 0; border-bottom: 1px solid var(--border); }
.mtg-task > input[type="checkbox"] { margin-top: 12px; width: 18px; height: 18px; }
.mtg-task.is-off .mtg-task-fields { opacity: .5; }
.mtg-task-fields { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 150px auto; gap: var(--s2); align-items: center; }
.mtg-task-fields .mtg-remind { grid-column: 1 / -1; }
.mtg-email-body { min-height: 280px; font-family: inherit; line-height: 1.6; }
.mtg-email .field { margin-bottom: 0; }

/* Round two: the speech engine, the recording upload, speakers, turns, agenda */
.mtg-engine { display: flex; align-items: flex-start; gap: var(--s2); padding: 10px 12px; border-radius: var(--r); background: var(--surface-2); border: 1px dashed var(--border-strong); font-size: calc(13px * var(--text-scale)); line-height: 1.45; }
.mtg-engine.is-on { border-style: solid; border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }
.mtg-engine.is-on > .icon { color: var(--success); }
.mtg-engine .btn { flex: 0 0 auto; }
.mtg-upload.is-ok { color: var(--success); }
.mtg-upload.is-warn { color: var(--warning); }
.mtg-preview-note { margin: 0; }
.mtg-agenda-live summary { cursor: pointer; font-weight: 500; }
.mtg-working { align-items: center; }
.mtg-spinner { width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto; border: 2px solid color-mix(in srgb, var(--info) 30%, transparent); border-top-color: var(--info); animation: mtg-spin .9s linear infinite; }
@keyframes mtg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mtg-spinner { animation-duration: 3s; } }
.mtg-project-pick { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px 0 8px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-muted); }
.mtg-project-pick select { width: auto; height: 26px; padding: 0 6px; border: 0; background: transparent; font-size: calc(12px * var(--text-scale)); }
.mtg-speaker { display: flex; flex-direction: column; gap: 6px; padding: var(--s2) 0; border-bottom: 1px solid var(--border); }
.mtg-speaker:last-of-type { border-bottom: 0; }
.mtg-speaker-head { display: flex; align-items: center; gap: var(--s2); }
.mtg-speaker-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.mtg-speaker-sample { margin: 0; color: var(--text-muted); }
.mtg-speaker-assign { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s2); }
.mtg-turns { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; padding: var(--s2); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); }
.mtg-turn { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: calc(14px * var(--text-scale)); line-height: 1.6; }
.mtg-turn-time { border: 0; background: none; padding: 0; color: var(--text-faint); font-size: calc(11.5px * var(--text-scale)); font-variant-numeric: tabular-nums; cursor: pointer; }
.mtg-turn-time:disabled { cursor: default; }
.mtg-turn-time:not(:disabled):hover { color: var(--accent); text-decoration: underline; }
.mtg-turn-who { font-weight: 600; white-space: nowrap; }
.mtg-turn-text { overflow-wrap: anywhere; }
.mtg-agenda { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.mtg-agenda li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; }
.mtg-agenda li > .icon { margin-top: 3px; flex: 0 0 auto; }
.mtg-agenda .is-covered > .icon { color: var(--success); }
.mtg-agenda .is-missed > .icon { color: var(--warning); }
.mtg-voice-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mtg-voice-chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.mtg-voice-chip .mtg-speaker-dot { width: 9px; height: 9px; }
.mtg-voice-chip.is-named { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }
.mtg-voice-tag { font-size: calc(10.5px * var(--text-scale)); padding: 0 5px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--warning) 22%, transparent); color: var(--warning); }
.mtg-transcript .mtg-turn { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 3px 0; white-space: normal; }
.mtg-live-who { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; white-space: nowrap; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.mtg-live-who:hover { text-decoration-style: solid; }
.mtg-lang-auto { margin: 0; padding: 8px 10px; border-radius: var(--r); background: var(--surface-2); color: var(--text-muted); font-size: calc(13px * var(--text-scale)); line-height: 1.45; }
.mtg-lang-auto .icon { color: var(--success); }
.mtg-remind { display: inline-flex; align-items: center; gap: 5px; font-size: calc(12.5px * var(--text-scale)); color: var(--text-muted); white-space: nowrap; cursor: pointer; }
.mtg-remind input { width: 16px; height: 16px; margin: 0; }
.mtg-timeline { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; border-inline-start: 2px solid color-mix(in srgb, var(--accent) 45%, var(--border)); }
.mtg-timeline-item { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: var(--s2); align-items: center; padding: 6px 0 6px 12px; position: relative; }
[dir="rtl"] .mtg-timeline-item { padding: 6px 12px 6px 0; }
.mtg-timeline-item::before { content: ""; position: absolute; inset-inline-start: -6px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--accent); }
.mtg-timeline-item.is-late::before { background: var(--warning); }
.mtg-timeline-date { font-weight: 600; font-size: calc(13px * var(--text-scale)); }
.mtg-timeline-what { line-height: 1.45; }
.mail-task-suggest { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px dashed var(--border); }
.mail-task-suggest:first-of-type { border-top: 0; }
.mtg-open-tasks { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); }
.mtg-open-list { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 4px; }
.mtg-open-list li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mtg-open-list a { color: inherit; }
.mtg-tu.is-undone { opacity: .6; }

/* The Tasks tab, by person */
.tt-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); margin-bottom: var(--s3); }
.tt-search { margin-bottom: var(--s3); }
.tt-list { gap: var(--s2); }
.tt-row { display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: start; color: inherit; cursor: pointer; padding: var(--s3) var(--s4); }
.tt-row:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.tt-row.is-me { border-color: color-mix(in srgb, var(--success) 50%, var(--border)); }
.tt-avatar { width: 44px; height: 44px; flex: 0 0 auto; display: inline-grid; place-items: center; border-radius: 50%; background: var(--surface-2); font-weight: 600; font-size: calc(15px * var(--text-scale)); }
.tt-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tt-row-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; }
.tt-row-stats { display: flex; align-items: center; gap: var(--s4); flex: 0 0 auto; }
.tt-num { display: inline-flex; flex-direction: column; align-items: center; min-width: 52px; }
.tt-num strong { font-size: calc(18px * var(--text-scale)); line-height: 1.2; }
.tt-num span { font-size: calc(11.5px * var(--text-scale)); color: var(--text-muted); }
.tt-num.is-ok strong { color: var(--success); } .tt-num.is-info strong { color: var(--info); } .tt-num.is-bad strong { color: var(--danger); }
.tt-rate { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; min-width: 110px; }
.tt-bar { display: block; width: 110px; height: 6px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.tt-bar i { display: block; height: 100%; background: var(--success); border-radius: inherit; }
.tt-person { display: flex; flex-direction: column; gap: var(--s3); margin: var(--s2) 0 var(--s3); }
.tt-person-head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.tt-person-head h1 { margin: 0; display: flex; align-items: center; gap: 8px; }
.tt-person-stats { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.tt-task { display: flex; flex-direction: column; gap: 6px; padding: var(--s3); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.tt-task.is-late { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.tt-task.is-done { opacity: .8; }
.tt-task-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tt-task-title { font-weight: 600; color: inherit; text-decoration: none; flex: 1 1 260px; min-width: 0; }
.tt-task-title:hover { text-decoration: underline; }
.tt-src { text-decoration: none; color: inherit; }
.tt-resolution { margin: 0; color: var(--success); }
.tt-timeline summary { cursor: pointer; color: var(--text-muted); font-size: calc(13px * var(--text-scale)); }
.tt-timeline .mtg-timeline { margin-top: 6px; }
.tt-timeline .mtg-timeline-item { grid-template-columns: 110px minmax(0, 1fr); }
.tt-task-actions { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 899px) {
  .tt-row { flex-wrap: wrap; }
  .tt-row-stats { width: 100%; justify-content: space-between; gap: var(--s2); }
}

/* ---------- The ticket board: tabs, one filter row, cards ----------
 *
 * Ali, 2026-09-23: the tasks screen reads well and the tickets screen did not — the filters said the same
 * thing twice and a wide table left six empty columns on every row. One card per issue: where it is on the
 * left (the first thing he looks for), what it is in the middle, its state on its tags line.
 */
.tk-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 0; }
.tk-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: var(--text-muted); font: inherit; font-size: calc(14px * var(--text-scale));
  font-weight: 600; cursor: pointer; border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.tk-tab:hover { background: var(--surface-2); color: var(--text); }
.tk-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--tk-tab-co, var(--accent)); }
.tk-tab--active { --tk-tab-co: var(--info); }
.tk-tab--hold { --tk-tab-co: var(--warning); }
.tk-tab--done { --tk-tab-co: var(--success); }
.tk-tab-n { padding: 1px 8px; border-radius: 999px; background: var(--surface-2); font-size: calc(12px * var(--text-scale)); }
.tk-tab[aria-selected="true"] .tk-tab-n { background: color-mix(in srgb, var(--tk-tab-co, var(--accent)) 18%, transparent); color: var(--text); }
.tk-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tk-search { flex: 1 1 260px; }
.tk-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Nine filters that fit: each one as wide as its longest option needs and no wider, so the row wraps once
   instead of standing three deep. */
.tk-filters .ticket-filter, .tk-filters select { min-width: 0; max-width: 180px; flex: 0 1 auto; }

.tk-list { display: flex; flex-direction: column; gap: 8px; }
.tk-card {
  display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--border); border-inline-start: 3px solid var(--tk-co, var(--info));
  border-radius: var(--r-lg); background: var(--surface); cursor: pointer;
}
.tk-card:hover, .tk-card:focus-visible { border-color: var(--accent); border-inline-start-color: var(--tk-co, var(--info)); }
.tk-card.is-done { opacity: .78; }
.tk-card.is-picked { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
.tk-place { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: calc(12px * var(--text-scale)); }
.tk-place .icon { width: 13px; height: 13px; flex: 0 0 auto; color: var(--text-faint); }
.tk-place > span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.tk-place bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-brand { font-weight: 700; color: var(--text); }
.tk-branch { color: var(--text-muted); }
.tk-by { color: var(--text-faint); }
.tk-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tk-title-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tk-ref { color: var(--text-faint); font-size: calc(12px * var(--text-scale)); }
.tk-title { font-weight: 600; font-size: calc(15px * var(--text-scale)); overflow-wrap: anywhere; }
.tk-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tk-meta { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; color: var(--text-faint); font-size: calc(12px * var(--text-scale)); }
.tk-meta > span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.tk-meta .icon { width: 12px; height: 12px; }
.tk-status { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; font: inherit; }
.tk-status:hover { border-color: var(--accent); }
.tk-chev { color: var(--text-faint); flex: 0 0 auto; }
/* The narrow layout for these cards lives in the responsive section at the foot of this file — it was a
   container query here, and nothing in the app declares a container, so it never applied. */
/* Follow-ups and reminders, in the same card as a ticket — the buttons sit at the end of the card. */
.fu-card { cursor: default; }
.fu-card .tk-title { color: inherit; text-decoration: none; }
.fu-card .tk-title:hover { text-decoration: underline; }
.fu-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
/* The working half of a ticket: its story and the four things he does to it. */
.tk-work { display: flex; flex-direction: column; gap: 8px; padding: var(--s3); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); }
.tk-work-head { display: flex; align-items: center; gap: 6px; color: var(--text-muted); }
.tk-work-acts { display: flex; gap: 6px; flex-wrap: wrap; }
/* ---------- One mail on the whole screen ----------
 *
 * The reading pane itself moves in here on a double-click, so there is one pane in the app and not two. Full
 * screen by default (what he asked for); the button in the head puts it back to a normal window.
 */
.mailwin { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; }
.mailwin-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, #000 55%, transparent); backdrop-filter: blur(2px); }
.mailwin-panel {
  position: relative; display: flex; flex-direction: column; width: min(1400px, 96vw); height: 94dvh;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .45); overflow: hidden;
}
.mailwin-panel.is-normal { width: min(860px, 92vw); height: 76dvh; }
.mailwin-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.mailwin-title { font-weight: 600; min-width: 0; }
.mailwin-panel > .mail-read { flex: 1 1 auto; min-height: 0; overflow: auto; }
/* Minimised: a bar at the foot of the screen, and the page behind it usable again (2026-10-06). */
.mailwin.is-min { place-items: end start; pointer-events: none; }
.mailwin.is-min .mailwin-backdrop { display: none; }
.mailwin.is-min .mailwin-panel, .mailwin.is-min .mailwin-panel.is-normal {
  pointer-events: auto; width: min(380px, 92vw); height: auto; margin: 0 0 14px 14px; border-radius: var(--r-md);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
.mailwin.is-min .mailwin-head { cursor: pointer; border-bottom: 0; }
.mailwin.is-min .mailwin-panel > .mail-read { display: none; }
@media (max-width: 720px) { .mailwin-panel, .mailwin-panel.is-normal { width: 100vw; height: 100dvh; border-radius: 0; } }

/* One date filter, the same control everywhere it is used. */
.date-range { display: inline-flex; align-items: center; gap: 6px; }
.date-range-icon { color: var(--text-faint); }
.date-range-day { height: 36px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); color: var(--text); font: inherit; padding: 0 8px; }

/* The analysis before approving a purchase request */
.erp-analysis { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); margin-bottom: var(--s3); }
.erp-analysis-wait { display: flex; align-items: center; gap: var(--s2); color: var(--text-muted); font-size: calc(13px * var(--text-scale)); }
.erp-analysis-head { display: flex; align-items: center; gap: var(--s2); padding: 8px 10px; border-radius: var(--r); background: color-mix(in srgb, var(--vc, var(--info)) 14%, transparent); }
.erp-analysis-head > .icon, .erp-analysis-head > strong { color: var(--vc, var(--info)); }
.erp-verdict--approve { --vc: var(--success); }
.erp-verdict--check { --vc: var(--warning); }
.erp-verdict--hold { --vc: var(--danger); }
.chip.erp-verdict { color: var(--vc); border-color: color-mix(in srgb, var(--vc) 45%, var(--border)); }
.erp-change.is-up { color: var(--danger); font-weight: 700; }
.erp-change.is-down { color: var(--success); font-weight: 700; }
.erp-analysis-lines td { vertical-align: top; }
.erp-analysis-lines .erp-aline td { border-bottom: 0; font-weight: 500; }
.erp-analysis-lines .erp-anote td { padding-top: 0; }
/* The whole warning reads as a warning — the bullet was amber and the words beside it plain black,
   so the section did not look like anything (Ali, 2026-09-30: "chi lon aswad, het lon yellow"). */
.erp-flags li { color: var(--warning); }
.erp-flags li::marker { color: var(--warning); }
/* Cash or credit, at the top of the analysis. Cash is red: money out today, no terms behind it. */
.erq-pay { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 2px 9px; border-radius: var(--r-pill); font-size: calc(12px * var(--text-scale)); font-weight: 650; }
.erq-pay .icon { width: 14px; height: 14px; }
.erq-pay--cash { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); }
.erq-pay--credit { color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); }
/* The conversion column: the factor, what a unit is, and the price per piece under it. */
.erq-conv { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* The rolling glance in the top bar: one line, desktop only, a link into Needs you. */
.glance-strip { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 34vw; margin-inline-start: var(--s3);
  padding: 4px 11px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-muted); font-size: calc(12.5px * var(--text-scale)); text-decoration: none; }
.glance-strip:hover { border-color: var(--accent); color: var(--text); }
.glance-strip .icon { width: 14px; height: 14px; flex: 0 0 auto; }
.glance-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: glance-in .35s ease; }
@keyframes glance-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.glance-strip--urgent { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  background: color-mix(in srgb, var(--danger) 10%, transparent); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .glance-line { animation: none; } }
/* A meeting about to start, at the top of Needs you. */
.soon-card { border-inline-start: 3px solid var(--warning); }
.soon-card--now { border-inline-start-color: var(--danger); }

/* The 472-chat roll on Settings › WhatsApp, folded so the switches above it stay the page. */
.waset-list-fold > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; padding: 8px 0; font-size: calc(13.5px * var(--text-scale)); color: var(--text-muted); }
.waset-list-fold > summary::-webkit-details-marker { display: none; }
.waset-list-fold > summary::after { content: "▾"; margin-inline-start: auto; color: var(--text-faint); }
.waset-list-fold[open] > summary::after { content: "▴"; }
.waset-list-fold .icon { width: 15px; height: 15px; }
.mtg-steps { margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 6px; line-height: 1.55; }
.mtg-steps a { font-weight: 600; }
.mtg-ok { color: var(--success); }
.chip--project { cursor: pointer; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); }

@media (max-width: 1100px) {
  .mtg-task-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mtg-task-fields > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
  /* `1fr` still has a min-content floor, so a card that cannot shrink widens the page. `minmax(0, 1fr)` lets
     it shrink and the card's own contents wrap instead (320px phones, 2026-09-25). */
  .mtg-grid, .mtg-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .mtg-kinds { flex-wrap: wrap; }
  .mtg-kinds .seg-item { flex: 1 1 auto; min-width: 0; }
  .mtg-mic { position: static; order: -1; }
}
@media (max-width: 600px) {
  .mtg-form-row { grid-template-columns: 1fr; }
  .mtg-guest-row { grid-template-columns: minmax(0, 1fr) auto; }
  .mtg-guest-row > input[type="email"] { grid-column: 1; grid-row: 2; }
  .mtg-kinds .seg-item { flex: 1 1 45%; }
  .mtg-timer { font-size: calc(22px * var(--text-scale)); }
  .mtg-waves--live { height: 140px; }
  .mtg-transcript { max-height: 36vh; }
  .mtg-controls .btn--lg { flex: 1 1 auto; }
  .mtg-speaker-assign { grid-template-columns: 1fr; }
  .mtg-turn { grid-template-columns: auto minmax(0, 1fr); }
  .mtg-turn-text { grid-column: 1 / -1; }
}

/* ---- Calendar: a day at a time, with the source of each meeting on its face ---- */
.cal-day { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; margin-bottom: var(--s3); }
.cal-day.is-today { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.cal-day-head { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: calc(13px * var(--text-scale)); }
.cal-row { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: var(--s3); align-items: start; padding: var(--s3); border-bottom: 1px solid var(--border); }
.cal-row:last-child { border-bottom: 0; }
.cal-row.is-today { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.cal-time { padding-top: 2px; color: var(--text-muted); font-size: calc(13px * var(--text-scale)); font-variant-numeric: tabular-nums; }
.cal-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-title-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cal-title { color: var(--text); font-weight: 600; font-size: calc(14px * var(--text-scale)); text-decoration: none; }
a.cal-title:hover { text-decoration: underline; }
.cal-meta { color: var(--text-muted); font-size: calc(12px * var(--text-scale)); }
.cal-note { color: var(--text-faint); }
/* The three sources are three different kinds of fact, so they do not look alike. */
.cal-chip--calendar { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.cal-chip--email { background: color-mix(in srgb, var(--info, #2563EB) 14%, transparent); }
.cal-chip--whatsapp { background: color-mix(in srgb, #25D366 20%, transparent); }
.cal-count { margin-inline-start: 5px; padding: 0 5px; border-radius: 999px; background: var(--surface-3); font-size: calc(11px * var(--text-scale)); }
@media (max-width: 600px) {
  .cal-row { grid-template-columns: 54px minmax(0, 1fr); }
  .cal-end { grid-column: 2; }
}

/* ---- ERP console: modules on the left, one board or one table on the right ---- */
.erp-status { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); min-width: 0; }
.erp-status .caption { min-width: 0; }
.erp-shell { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: var(--s4); align-items: start; }
/* Pinned beside the table, and scrollable on its own: the list is taller than a laptop screen, so without a
   height of its own the last modules (Monthly orders, Master data) could not be reached at all — the page
   scroll moves the table, not the pinned rail (Ali, 2026-09-23: "fi meshkle bl scrolling la side bar"). */
.erp-rail {
  position: sticky; top: var(--s3); display: flex; flex-direction: column; gap: 2px; padding: var(--s2);
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
  max-height: calc(100dvh - var(--s4) * 2); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.erp-rail-label { padding: var(--s3) var(--s2) 4px; color: var(--text-faint); font-size: calc(11px * var(--text-scale)); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.erp-rail-item {
  display: flex; align-items: center; gap: var(--s2); width: 100%; padding: 7px var(--s2); border: 0;
  border-radius: var(--r-sm); background: transparent; color: var(--text); font: inherit;
  font-size: calc(13px * var(--text-scale)); text-align: start; cursor: pointer;
}
.erp-rail-item .icon { width: 15px; height: 15px; flex: 0 0 auto; color: var(--text-muted); }
.erp-rail-item:hover { background: var(--surface-2); }
.erp-rail-item.is-on { background: color-mix(in srgb, var(--accent) 14%, transparent); font-weight: 600; }
.erp-rail-item.is-on .icon { color: var(--accent); }
.erp-rail-count { margin-inline-start: auto; padding: 0 7px; border-radius: 999px; background: var(--warning); color: #1b1300; font-size: calc(11px * var(--text-scale)); font-weight: 700; }
.erp-main { min-width: 0; display: flex; flex-direction: column; gap: var(--s3); }
.erp-main-head { display: flex; align-items: center; gap: var(--s2); }
.erp-main-head h2 { margin: 0; font-size: calc(17px * var(--text-scale)); }
.erp-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.erp-search { display: flex; align-items: center; gap: 6px; flex: 1 1 240px; min-width: 200px; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); }
.erp-search input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0 !important; background: transparent !important; box-shadow: none !important; font-size: calc(13px * var(--text-scale)); }
.erp-paging { display: flex; align-items: center; gap: var(--s2); }
/* A denser table than the rest of the app: ERP rows are short and there are hundreds of them. */
.table--tight td, .table--tight th { padding: 7px var(--s3); font-size: calc(13px * var(--text-scale)); }
.table--tight th { white-space: nowrap; }
.row--click { cursor: pointer; }
.row--click:hover { background: var(--surface-2); }
.row--click:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* The document behind a row: its fields as pairs, then its lines. */
.erp-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s2) var(--s4); }
.erp-fact { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.erp-fact-label { color: var(--text-faint); font-size: calc(11px * var(--text-scale)); text-transform: uppercase; letter-spacing: .04em; }
.erp-fact-value { font-size: calc(13px * var(--text-scale)); overflow-wrap: anywhere; }
/* An icon sitting inside a line of text, sized to it rather than to a button. */
.icon-inline { width: 13px; height: 13px; vertical-align: -2px; }
/* The money, read first: net, total, tax, discount as one row of figures. */
.erp-totals { display: flex; flex-wrap: wrap; gap: var(--s4); padding: var(--s3); border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); }
.erp-total { display: flex; flex-direction: column; gap: 1px; }
.erp-total-value { font-size: calc(16px * var(--text-scale)); font-weight: 700; font-variant-numeric: tabular-nums; }
.erp-lines { max-height: 40vh; overflow: auto; }
@media (max-width: 899px) {
  .erp-shell { grid-template-columns: minmax(0, 1fr); }
  .erp-rail { position: static; flex-direction: row; flex-wrap: wrap; }
  .erp-rail-label { display: none; }
  .erp-rail-item { width: auto; }
}

/* The suggestion that sits after the caret while he types: grey, unselectable, gone on the next keystroke. */
/* "Team pending": who wrote it and since when, on one line above the people it is waiting on. */
.tkp-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tkp-who { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--text-muted); font-size: calc(13px * var(--text-scale)); }
.tkp-who .icon { width: 14px; height: 14px; }
.tkp-wait-label { align-self: center; margin-inline-end: 2px; }
/* The one the mail is addressed to reads as the owner; the people merely copied are quieter. */
.chip--cc { color: var(--text-muted); border-style: dashed; }
/* Who owes it: two dropdowns, each listing only what is actually on the list, with its count. */
.tkp-filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s3); margin-block: 2px 6px; }
.tkp-pick { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tkp-pick select { max-width: min(320px, 70vw); }
/* A filled button beside the other two, not a faint word floating at the edge of the card. */
.tkp-drop { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); }
.tkp-drop:hover { background: var(--danger-soft, #fdecec); border-color: var(--danger, #b4232a); color: var(--danger, #b4232a); }
/* What they said they would do and did not — the reason a quiet thread is on the list at all. */
.tkp-promise { display: flex; align-items: flex-start; gap: 6px; padding: 6px 10px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--warning) 12%, transparent); font-size: calc(13px * var(--text-scale)); }
.tkp-promise .icon { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px; color: var(--warning); }

/* Taking a whole set of a mail's attachments at once, above the files themselves. */
.mail-atts-bar { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin: 8px 14px 0; padding-bottom: 6px; border-bottom: 1px dashed var(--border); }
.mail-atts-bar .icon { width: 14px; height: 14px; }

/*
 * The live meeting in a window of its own (Ali, 2026-09-27: "ykun pop window w fini minimize w full
 * screen aw medium size").
 *
 * No backdrop and no scrim: a modal would defeat the point, which is that he can read a request or a
 * task while the meeting records. Three sizes, and minimised it is a pill he can tap to bring back.
 */
.mtgwin {
  position: fixed; z-index: 45; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .34);
}
.mtgwin-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.mtgwin-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); flex: 0 0 auto; animation: ring 1.6s ease-out infinite; }
.mtgwin-label { font-weight: 650; min-width: 0; }
.mtgwin-clock { color: var(--text-muted); font-variant-numeric: tabular-nums; margin-inline-end: auto; }
.mtgwin-acts { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.mtgwin-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 10px; }

/* Medium: a panel in the corner, out of the way of the page. */
.mtgwin.is-med { inset-inline-end: 18px; bottom: 18px; width: min(460px, calc(100vw - 32px)); height: min(620px, 72dvh); }
/* Full: the screen, for when the meeting is the work. */
.mtgwin.is-full { inset: 12px; width: auto; height: auto; }
/* Minimised: the header alone, a pill with the clock. */
.mtgwin.is-min { inset-inline-end: 18px; bottom: 18px; width: auto; max-width: calc(100vw - 32px); border-radius: 999px; }
.mtgwin.is-min .mtgwin-body { display: none; }
.mtgwin.is-min .mtgwin-head { border-bottom: 0; background: var(--surface); cursor: pointer; padding-inline: 14px; }
.mtgwin.is-min .mtgwin-clock { margin-inline-end: 8px; }
.mtgwin.is-min .mtgwin-finish { display: none; }

@media (max-width: 600px) {
  /* On a phone the corner panel is the width of the screen, and it clears the tab bar. */
  .mtgwin.is-med { inset-inline: 8px; width: auto; bottom: calc(var(--tabbar-h) + var(--safe-b) + 8px); height: min(62dvh, 520px); }
  .mtgwin.is-full { inset: 0; border-radius: 0; border: 0; }
  .mtgwin.is-full .mtgwin-body { padding-bottom: calc(var(--safe-b) + 12px); }
  .mtgwin.is-min { inset-inline-end: 8px; bottom: calc(var(--tabbar-h) + var(--safe-b) + 8px); }
  .mtgwin-finish .btn-label { display: none; }
}

/* The suggestion is tappable: on a phone there is no Tab key, so the grey text itself is the button
   (Ali, 2026-09-27). It was `pointer-events: none`, which is what made it unreachable by finger. */
.ed-ghost { color: var(--text-faint); opacity: .75; user-select: none; white-space: pre-wrap; cursor: pointer; }
.ed-ghost-key { display: inline-flex; align-items: center; margin-inline-start: 6px; padding: 1px 6px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text-muted); font-size: calc(11px * var(--text-scale)); white-space: nowrap; vertical-align: baseline; }
@media (hover: none) and (pointer: coarse) { .ed-ghost-key { padding: 3px 10px; border-color: var(--accent); color: var(--accent); } }
.ed-btn--ai { color: var(--accent); }
.ed-btn--ai[data-loading] { opacity: .5; pointer-events: none; }

/* A person field with a search in it: the input stays a field, the matches hang under it. */
.psel { position: relative; display: flex; align-items: center; width: 100%; }
.psel-input { width: 100%; padding-inline-end: 30px; }
.psel-clear {
  position: absolute; inset-inline-end: 4px; display: grid; place-items: center; width: 24px; height: 24px;
  border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer;
}
.psel-clear:hover { background: var(--surface-3); color: var(--text); }
.psel-clear .icon { width: 14px; height: 14px; }
.psel-list {
  position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 30; max-height: 280px; overflow-y: auto;
  padding: 4px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
}
.psel-row { display: flex; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.psel-row:hover, .psel-row.is-marked { background: var(--surface-2); }
.psel-row.is-on { background: color-mix(in srgb, var(--accent) 16%, transparent); font-weight: 600; }
.psel-row--none { color: var(--text-muted); }
.psel-row-main { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.psel-name { font-size: calc(13px * var(--text-scale)); }
.psel-role { color: var(--text-muted); font-size: calc(12px * var(--text-scale)); }
.psel-empty { padding: 8px; color: var(--text-muted); font-size: calc(13px * var(--text-scale)); }

/* Follow-ups: a row is a small card — title, the facts as chips, the written reminder, and who has it. */
.list--followups { gap: 6px; }
.fu-row { align-items: flex-start; gap: var(--s3); padding-block: var(--s3); }
.fu-title { color: var(--text); font-weight: 600; text-decoration: none; }
.fu-title:hover { text-decoration: underline; }
.fu-draft { display: block; margin-top: 4px; color: var(--text-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Collapsed by default, so the bar is a magnifier and not a field taking a third of it. */
.mail-bar-search--mini { flex: 0 0 auto; min-width: 0; width: auto; border: 0; background: none; padding: 0; }
/* The magnifier was 28×36 — too small to hit, and the only way into search (2026-09-28). A finger needs
   44; a pointer does not, so the desk keeps its compact bar and only touch pays for the room. */
@media (pointer: coarse) {
  .mail-search-open { min-width: 44px; min-height: 44px; }
}
/* Ali, 2026-09-18: the search box was too tall for what it holds — same shape, less of it. */
.wa .wa-search { display: flex; align-items: center; gap: 7px; width: auto; height: 32px; margin: 2px 12px 8px; padding: 0 11px; border-radius: 999px; background: var(--wa-head); }
.wa .wa-search:focus-within { box-shadow: inset 0 0 0 2px var(--wa-green); }
.wa-search-icon { flex: 0 0 auto; width: 16px; height: 16px; color: var(--wa-muted); }
.wa-search-input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--wa-text); font-size: calc(13px * var(--text-scale)); }
/* Where a chat is filed, in the company's green — the answer to "who does this belong to" without opening it. */
/* Small enough to be a label and not a second line of the row (Ali, 2026-09-20: "zagher hyda, ktir kbir"). */
.wa-tag {
  /* align-self, or the column stretches it the width of the row and the "small label" is a green band. */
  display: inline-flex; align-self: flex-start; align-items: center; gap: 3px; max-width: 100%; margin-top: 1px; padding: 0 5px;
  border-radius: 999px; background: color-mix(in srgb, var(--wa-green) 12%, transparent);
  color: color-mix(in srgb, var(--wa-green) 82%, var(--wa-text)); font-size: calc(9.5px * var(--text-scale));
  font-weight: 600; line-height: 1.5; opacity: .9;
}
.wa-tag .wa-mini-icon { width: 9px; height: 9px; flex: 0 0 auto; }
.wa-tag bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The conversation's ⋯: three dots standing up, no heavy circle around them. */
.wa-thread-head .wa-head-more { width: 30px; height: 30px; }
.wa-thread-head .wa-head-more .icon { width: 17px; height: 17px; }
.wa-chat-more .icon { width: 16px; height: 16px; }
.wa-filters { display: flex; gap: 8px; padding: 0 12px 10px; overflow-x: auto; scrollbar-width: none; }
.wa-filter { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--wa-line); border-radius: 999px; background: transparent; color: var(--wa-muted); font: inherit; font-size: calc(13px * var(--text-scale)); white-space: nowrap; cursor: pointer; }
.wa-filter:hover { background: var(--wa-hover); }
.wa-filter[aria-pressed="true"] { border-color: transparent; background: color-mix(in srgb, var(--wa-green) 20%, transparent); color: var(--wa-text); font-weight: 600; }
.wa-filter-count { opacity: .75; font-size: calc(12px * var(--text-scale)); }
.wa-list-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 8px; }
.wa-section-label { padding: 12px 18px 6px; color: var(--wa-green); font-size: calc(13px * var(--text-scale)); font-weight: 600; }
.wa-list-empty { padding: 36px 20px; text-align: center; color: var(--wa-muted); }
.wa .wa-chat { display: flex; align-items: center; gap: 12px; width: calc(100% - 16px); margin: 0 8px; padding: 10px; border: 0; border-radius: 10px; background: transparent; color: var(--wa-text); font: inherit; text-align: start; cursor: pointer; }
.wa .wa-chat:hover { background: var(--wa-hover); }
.wa .wa-chat--on, .wa .wa-chat--on:hover { background: var(--wa-on); }
.wa .wa-chat--off { opacity: .6; }
.wa .wa-avatar { width: 49px; height: 49px; background: var(--wa-muted); color: #fff; font-size: calc(15px * var(--text-scale)); font-weight: 600; }
.wa .wa-chat-main { gap: 3px; }
.wa .wa-chat-top { align-items: baseline; }
.wa .wa-chat-name { font-size: calc(16px * var(--text-scale)); font-weight: 500; }
.wa-chat-time { flex: 0 0 auto; color: var(--wa-muted); font-size: calc(12px * var(--text-scale)); }
.wa-chat--unread .wa-chat-time { color: var(--wa-green); font-weight: 600; }
.wa-chat--unread .wa-chat-name { font-weight: 700; }
.wa-chat-bottom { display: flex; align-items: center; gap: 6px; min-width: 0; }
.wa-chat-preview { display: block; flex: 1 1 auto; min-width: 0; color: var(--wa-muted); font-size: calc(14px * var(--text-scale)); }
.wa-chat-preview--wrap { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wa-mini-icon { width: 15px; height: 15px; margin-inline-end: 3px; vertical-align: -3px; color: var(--wa-muted); }
.wa-draft-word { color: var(--wa-green); font-weight: 600; }
.wa-preview-who { color: var(--wa-muted); }
.wa .wa-chat-marks { gap: 6px; }
.wa .wa-draft-mark { color: var(--wa-green); }
.wa-fav { color: #f5b50a; }
.wa .wa-draft-mark { display: inline-flex; align-items: center; }
.wa .wa-draft-mark .icon { width: 15px; height: 15px; }
.wa-waiting { display: inline-flex; align-items: center; gap: 2px; color: #d97706; }
.wa-waiting .icon { width: 15px; height: 15px; }
/* The duration in words beside the clock, so the mark explains itself without a hover. */
.wa-waiting-text { font-size: calc(11px * var(--text-scale)); font-weight: 600; white-space: nowrap; }
.wa-at { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--wa-green); color: #fff; font-size: 12px; font-weight: 700; }
.wa-unread { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--wa-green); color: #fff; font-size: calc(12px * var(--text-scale)); font-weight: 600; }
/* A muted chat's count is grey, as on the phone. */
.wa-unread--muted { background: color-mix(in srgb, var(--wa-muted) 60%, transparent); }
.wa-muted-icon, .wa-pin-icon { color: var(--wa-muted); }
/* The ⋯ on a chat row: quiet until the row is touched, then everything the chat can do. */
.wa-chat { position: relative; }
.wa-chat-more { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; color: var(--wa-muted); background: var(--wa-panel); opacity: 0; transition: opacity .12s; cursor: pointer; }
.wa-chat:hover .wa-chat-more, .wa-chat--on .wa-chat-more, .wa-chat-more:focus-visible { opacity: 1; }
.wa-chat-more:hover { background: var(--wa-hover); color: var(--wa-text); }
@media (hover: none) { .wa-chat-more { opacity: .6; } }
.assign-sections { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow: auto; padding: 4px; border: 1px solid var(--border); border-radius: var(--r); }
.assign-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: var(--r-sm); font-weight: 400; }
.assign-row:hover { background: var(--surface-2); }
.assign-row input { margin: 0; width: auto; }
/* The chat's summary, a thin bar under the header that opens into the full picture. */
.rewrite-note::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-summary { flex: 0 0 auto; border-bottom: 1px solid var(--border); background: color-mix(in srgb, #8b5cf6 6%, var(--surface)); padding: 4px var(--s3); max-height: 45vh; overflow: auto; }
.wa-summary-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wa-summary-toggle { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.wa-summary-toggle > .icon:first-child { color: #7c3aed; flex: 0 0 auto; width: 15px; height: 15px; }
.wa-summary-toggle > .icon:last-child { flex: 0 0 auto; width: 14px; height: 14px; color: var(--text-muted); }
.wa-summary-headline { flex: 1 1 auto; min-width: 0; font-size: calc(13px * var(--text-scale)); }
.wa-summary .spin { width: 14px; height: 14px; }
.wa-summary-body { padding: 4px 0 8px; display: flex; flex-direction: column; gap: 6px; font-size: calc(13px * var(--text-scale)); }

/* ---- conversation ---- */
.wa .wa-thread-head { position: static; display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 16px; background: var(--wa-head); border-bottom: 1px solid var(--wa-line); }
.wa .wa-thread-head .wa-avatar { width: 40px; height: 40px; font-size: calc(13px * var(--text-scale)); }
.wa-thread-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.wa .wa-thread-name { font-size: calc(16px * var(--text-scale)); font-weight: 500; }
.wa-thread-sub { color: var(--wa-muted); font-size: calc(13px * var(--text-scale)); }
.wa-chat-search { display: flex; align-items: center; gap: 8px; padding: 6px 16px; background: var(--wa-head); border-bottom: 1px solid var(--wa-line); }
.wa-chat-search[hidden] { display: none; }
.wa-chat-search input { flex: 1 1 auto; min-width: 0; padding: 6px 10px; border: 0; border-radius: 8px; background: var(--wa-panel); color: var(--wa-text); }
.wa .wa-msgs {
  position: relative; display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 6% 14px;
  background-color: var(--wa-chatbg);
  background-image: radial-gradient(var(--wa-dots) 1.2px, transparent 1.4px), radial-gradient(var(--wa-dots) 1.2px, transparent 1.4px);
  background-size: 26px 26px; background-position: 0 0, 13px 13px;
}
.wa-msgs-inner { display: flex; flex-direction: column; max-width: 1000px; margin: 0 auto; }
.wa-day-row, .wa-older { display: flex; justify-content: center; margin: 12px 0 6px; }
.wa-day { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 0; border-radius: 8px; background: var(--wa-day); color: var(--wa-muted); font: inherit; font-size: calc(12.5px * var(--text-scale)); box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
button.wa-day { cursor: pointer; }
.wa-day .icon { width: 14px; height: 14px; }
.wa-day--drafts { color: var(--wa-green); font-weight: 600; }
.wa-system { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 8px; background: #ffeecd; color: #54656f; font-size: calc(12px * var(--text-scale)); }
html:not([data-theme="light"]) .wa-system { background: #182229; color: #ffd279; }
.wa-system .icon { width: 13px; height: 13px; }
.wa-unread-line { display: flex; justify-content: center; margin: 12px 0; padding: 6px 0; background: color-mix(in srgb, var(--wa-panel) 55%, transparent); }
.wa-unread-line span { padding: 4px 14px; border-radius: 999px; background: var(--wa-day); color: var(--wa-text); font-size: calc(12.5px * var(--text-scale)); font-weight: 600; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }

.wa-row { position: relative; display: flex; align-items: flex-start; gap: 6px; margin-top: 10px; }
.wa-row--cont { margin-top: 2px; }
.wa-row--out { flex-direction: row-reverse; }
.wa-row-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; margin-top: 2px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 600; }
.wa-row-avatar--blank { visibility: hidden; }
.wa-bub-stack { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: min(65%, 640px); }
.wa-row--out .wa-bub-stack { align-items: flex-end; }
.wa-bub { position: relative; min-width: 96px; max-width: 100%; padding: 6px 9px 8px; border-radius: 8px; background: var(--wa-in); color: var(--wa-text); box-shadow: 0 1px .5px rgba(11, 20, 26, .13); font-size: calc(14.2px * var(--text-scale)); line-height: 1.45; overflow-wrap: anywhere; }
.wa-row--out .wa-bub { background: var(--wa-out); }
.wa-row--in:not(.wa-row--cont) .wa-bub { border-start-start-radius: 0; }
.wa-row--out:not(.wa-row--cont) .wa-bub { border-start-end-radius: 0; }
.wa-bub--mention { box-shadow: 0 0 0 2px rgba(245, 181, 10, .75), 0 1px .5px rgba(11, 20, 26, .13); }
.wa-bub--sticker { background: transparent !important; box-shadow: none; }
.wa-bub-menu { position: absolute; top: 2px; inset-inline-end: 2px; z-index: 1; display: grid; place-items: center; width: 26px; height: 22px; border: 0; border-radius: 6px; background: inherit; color: var(--wa-muted); opacity: 0; cursor: pointer; }
.wa-bub:hover .wa-bub-menu, .wa-bub-menu:focus-visible { opacity: 1; }
@media (hover: none) { .wa-bub-menu { opacity: .7; } }
.wa-bub-menu .icon { width: 18px; height: 18px; }
.wa-sender { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; padding-inline-end: 22px; font-size: calc(13px * var(--text-scale)); font-weight: 600; }
.wa-sender-num { color: var(--wa-muted); font-size: calc(12px * var(--text-scale)); font-weight: 400; }
.wa-forwarded { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; color: var(--wa-muted); font-size: calc(12.5px * var(--text-scale)); font-style: italic; }
.wa-forwarded .icon { width: 14px; height: 14px; }
.wa-quote { display: block; width: 100%; margin: 2px 0 5px; padding: 5px 8px; border: 0; border-inline-start: 4px solid var(--q, var(--wa-green)); border-radius: 6px; background: var(--wa-quote); color: var(--wa-text); font: inherit; text-align: start; cursor: pointer; }
.wa-quote-name { color: var(--q, var(--wa-green)); font-size: calc(12.5px * var(--text-scale)); font-weight: 600; }
.wa-quote-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; color: var(--wa-muted); font-size: calc(13px * var(--text-scale)); }
.wa-media { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; padding: 10px 12px; border-radius: 6px; background: var(--wa-quote); }
.wa-media .icon { flex: 0 0 auto; width: 22px; height: 22px; color: var(--wa-muted); }
.wa-media-label { font-weight: 500; overflow-wrap: anywhere; }
.wa-media-hint { margin-inline-start: auto; padding-inline-start: 8px; color: var(--wa-muted); font-size: calc(11.5px * var(--text-scale)); white-space: nowrap; }
.wa-media--image, .wa-media--video, .wa-media--gif { min-width: min(240px, 100%); min-height: 64px; }
.wa-card { display: block; margin: 2px 0 6px; padding: 8px 10px; border-radius: 6px; background: var(--wa-quote); color: var(--wa-text); text-decoration: none; }
.wa-card-title { font-size: calc(13.5px * var(--text-scale)); font-weight: 600; }
.wa-card-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--wa-muted); font-size: calc(12.5px * var(--text-scale)); }
.wa-card-domain { margin-top: 2px; color: var(--wa-muted); font-size: calc(12px * var(--text-scale)); }
.wa-text { white-space: normal; }
.wa-link { color: var(--wa-link); text-decoration: underline; overflow-wrap: anywhere; }
.wa-mention { color: var(--wa-link); font-weight: 500; }
.wa-hit { border-radius: 3px; background: #ffd279; color: #111b21; }
.wa-hit--now { background: #f59e0b; }
.wa-deleted { display: flex; align-items: center; gap: 6px; padding-inline-end: 22px; color: var(--wa-muted); font-style: italic; }
.wa-deleted .icon { width: 15px; height: 15px; }
.wa-ticket { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; margin-top: 5px; padding: 2px 8px; border-radius: 999px; background: rgba(241, 92, 109, .16); color: inherit; font-size: calc(12px * var(--text-scale)); text-decoration: none; }
.wa-ticket--resolved, .wa-ticket--closed { background: color-mix(in srgb, var(--wa-green) 20%, transparent); }
.wa-ticket .icon { width: 13px; height: 13px; }
.wa-meta { position: relative; top: 4px; float: inline-end; display: inline-flex; align-items: center; gap: 4px; margin: 6px 0 -4px; margin-inline-start: 12px; color: var(--wa-muted); font-size: calc(11px * var(--text-scale)); }
.wa-meta .icon { width: 15px; height: 15px; }
.wa-meta .wa-meta-star { width: 12px; height: 12px; }
.wa-reactions { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 2px; margin-top: -6px; margin-inline: 8px; padding: 2px 7px; border: 1px solid var(--wa-line); border-radius: 999px; background: var(--wa-panel); color: var(--wa-text); font: inherit; font-size: calc(13px * var(--text-scale)); box-shadow: 0 1px 2px rgba(11, 20, 26, .12); cursor: pointer; }
.wa-reactions--mine { border-color: color-mix(in srgb, var(--wa-green) 65%, transparent); }
.wa-reactions-count { margin-inline-start: 3px; color: var(--wa-muted); font-size: calc(11.5px * var(--text-scale)); }
.wa-row-side { display: flex; flex-direction: column; gap: 2px; align-self: center; opacity: 0; transition: opacity .12s; }
.wa-row:hover .wa-row-side, .wa-row:focus-within .wa-row-side { opacity: 1; }
@media (hover: none) { .wa-row-side { display: none; } }
.wa-icon-btn--round { width: 30px; height: 30px; background: color-mix(in srgb, var(--wa-panel) 85%, transparent); }
.wa-icon-btn--round .icon { width: 17px; height: 17px; }
@keyframes wa-flash { 0%, 55% { box-shadow: 0 0 0 3px rgba(0, 168, 132, .75); } 100% { box-shadow: 0 1px .5px rgba(11, 20, 26, .13); } }
.wa-row--flash .wa-bub { animation: wa-flash 1.8s ease-out; }

/* ---- drafts, in the conversation, until he decides ---- */
.wa-row--draft .wa-bub-stack { max-width: min(80%, 680px); }
.wa-bub--draft { min-width: min(360px, 100%); border: 1.5px dashed rgba(0, 168, 132, .7); background: var(--wa-draft) !important; box-shadow: none; }
.wa-draft-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; color: var(--wa-green); font-size: calc(12.5px * var(--text-scale)); font-weight: 600; }
.wa-draft-head .icon { width: 15px; height: 15px; }
.wa-draft-analysis { margin: 2px 0 6px; font-size: calc(13px * var(--text-scale)); }
.wa-draft-analysis summary { display: flex; align-items: center; gap: 4px; color: var(--wa-muted); cursor: pointer; }
.wa-draft-analysis .icon { width: 14px; height: 14px; }
.wa-draft-missing { margin: 4px 0; }
/* Which feature wrote this draft, and where its switch is — he should never have to guess. */
.wa-draft-origin { margin: 2px 0 6px; line-height: 1.45; }
.wa-draft-origin a { text-decoration: underline; }
.wa-draft-edit { width: 100%; min-height: 96px; padding: 8px; border: 1px solid var(--wa-line); border-radius: 6px; background: var(--wa-panel); color: var(--wa-text); font: inherit; resize: vertical; }
.wa-draft-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wa-draft-foot { display: flex; align-items: center; gap: 5px; margin-top: 6px; color: var(--wa-muted); font-size: calc(11.5px * var(--text-scale)); }
.wa-draft-foot .icon { width: 13px; height: 13px; }
.wa-empty-chat { padding: 40px 0; text-align: center; color: var(--wa-muted); }
.wa-jump { position: sticky; bottom: 10px; float: inline-end; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--wa-panel); color: var(--wa-muted); box-shadow: 0 1px 3px rgba(11, 20, 26, .3); cursor: pointer; }
.wa-jump[hidden] { display: none; }
.wa-jump .icon { width: 22px; height: 22px; }
.wa-jump[data-count]:not([data-count="0"])::after { content: attr(data-count); position: absolute; top: -6px; inset-inline-end: -4px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--wa-green); color: #fff; font-size: 11px; }
/* The way back up to the unread mark, since a chat now opens on the newest message (Ali, 2026-09-28).
   It carries its count as words, not a dot, because "6 unread" is the reason to press it. */
.wa-jump--up { bottom: auto; top: 10px; width: auto; height: 34px; padding: 0 12px; grid-auto-flow: column; gap: 6px; border-radius: 999px; color: var(--wa-text); font: inherit; font-size: calc(12.5px * var(--text-scale)); }
.wa-jump--up .icon { width: 16px; height: 16px; }
.wa-jump-label { white-space: nowrap; }

/* ---- the message box ---- */
.wa-compose { padding: 8px 14px 6px; background: var(--wa-head); border-top: 1px solid var(--wa-line); }
.wa-compose-row { display: flex; align-items: flex-end; gap: 4px; padding: 5px 6px; border-radius: 26px; background: var(--wa-panel); }
.wa-input { flex: 1 1 auto; min-width: 0; max-height: 160px; padding: 9px 4px; border: 0 !important; outline: none; background: transparent !important; box-shadow: none !important; color: var(--wa-text); font: inherit; font-size: calc(15px * var(--text-scale)); line-height: 1.4; resize: none; }
.wa-send-btn { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--wa-green); color: #fff; cursor: pointer; }
.wa-send-btn .icon { width: 20px; height: 20px; }
.wa-send-btn[data-loading] { opacity: .6; pointer-events: none; }
.wa-compose-note { display: flex; align-items: center; justify-content: center; gap: 5px; padding-top: 5px; color: var(--wa-muted); font-size: calc(11.5px * var(--text-scale)); }
.wa-compose-note .icon { width: 12px; height: 12px; }
.wa-reply-bar { display: flex; align-items: center; gap: 6px; margin: 0 4px 6px; padding: 6px; border-radius: 12px; background: var(--wa-panel); }
.wa-reply-bar[hidden] { display: none; }
.wa-reply-bar .wa-quote { margin: 0; cursor: default; }

/* ---- empty states ---- */
.wa-welcome { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100%; padding: 40px; background: var(--wa-head); color: var(--wa-muted); text-align: center; }
.wa .wa-msgs .wa-welcome { background: transparent; }
.wa-welcome h2 { margin: 0; color: var(--wa-text); font-size: calc(26px * var(--text-scale)); font-weight: 400; }
.wa-welcome p { max-width: 460px; margin: 0; }
.wa-welcome-icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: rgba(0, 168, 132, .15); color: var(--wa-green); }
.wa-welcome-icon .icon { width: 36px; height: 36px; }
svg.wa-welcome-icon { padding: 18px; }
.wa-welcome-lock { display: flex; align-items: center; gap: 6px; font-size: calc(13px * var(--text-scale)); }
.wa-welcome-lock .icon { width: 14px; height: 14px; }

/* ---- emoji ---- */
.wa-emoji-pop { position: fixed; z-index: 1000; display: grid; grid-template-columns: repeat(9, 36px); gap: 2px; padding: 6px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-pop); }
.wa-emoji-pop--full { grid-template-columns: repeat(8, 36px); max-height: 280px; overflow-y: auto; border-radius: 12px; }
.wa-emoji { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; transition: transform .1s; }
.wa-emoji:hover { background: var(--surface-2); transform: scale(1.15); }
.wa-emoji--on { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.wa-emoji--more .icon { width: 18px; height: 18px; }

@media (max-width: 899px) {
  /* dvh, not vh: on a phone 100vh is the height with the address bar hidden, so the page ran taller than the
     screen and both the page and the list scrolled — the jumpy scrolling Ali reported. */
  .wa { height: calc(100vh - var(--topbar-h) - 96px); height: calc(100dvh - var(--topbar-h) - 96px); }
  .wa-compose-note { display: none; }
  .wa .wa-input::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wa-thread-head { gap: 2px; padding: 6px 6px; }
  .wa-head-search, .wa-head-star, .wa-head-muted, .wa-call-btn { display: none; }
  /* Email on a phone: the whole screen below one compact bar is the mail, with a single scroll. */
  .mail { display: flex; flex-direction: column; height: calc(100vh - var(--topbar-h) - 96px); height: calc(100dvh - var(--topbar-h) - 96px); }
  .mail > .mail-bar { flex: 0 0 auto; transition: margin-top .18s ease, opacity .12s ease; }
  /*
   * Out of the way while he is reading down the list, back on the first flick up. `margin-top` rather
   * than `display:none` so the list does not jump and the scroll position is kept.
   */
  .mail.is-chrome-hidden > .mail-bar { margin-top: calc(-1 * var(--mail-bar-h, 160px)); opacity: 0; pointer-events: none; }
  /* Smaller to begin with: the compose row was 102px of icons above a 46px search. */
  .mail-bar { gap: 3px; padding: 3px 6px; }
  .mail-bar .btn--icon, .mail-bar .mail-bar-btn { min-height: 38px; }
  /* The Inbox picker and the Main/Other tabs scroll away with the list instead of being pinned to the
     top of it — he asked for both to go, not only the bar. */
  .mail-list-head { padding: 6px var(--s3); position: static; }
  /*
   * ONE line, all of it (Ali, 2026-09-30, second pass: "hoton kelon line whad… icon new email ma2tuch…
   * field taba3 inbox lesh kbir hal add… wl filter kamen hoto had search").
   *
   * Inbox · search · filter · compose · sync · layout · settings, nothing wrapping and nothing clipped.
   * The picker was 46% of the screen for the word "Inbox"; the actions strip was `flex: 1 1 100%`, which
   * forced everything after it onto a second line, and its `overflow-x: auto` cut the compose pencil in
   * half. Both are undone here — this block comes after them, so it wins.
   */
  .mail-bar { flex-wrap: nowrap; }
  /* New email FIRST, then Inbox, then search and the filter (Ali, 2026-09-30: "wl icon new email hoto
     abel inbox field bl awal"). The actions strip leads with the compose pencil, so ordering it first
     puts the pencil at the very start of the row. */
  .mail-bar > .mail-bar-actions { order: 0; flex: 1 1 0; min-width: 0; }
  .mail-bar > .mail-folder-select { order: 1; flex: 0 1 auto; width: auto; min-width: 84px; max-width: 30%; min-height: 36px; padding-inline: 8px; font-size: calc(13px * var(--text-scale)); }
  .mail-bar > .mail-search-open { order: 2; }
  .mail-bar > .mail-filter-btn { order: 3; }
  .mail-bar > .mail-bar-end { order: 4; flex: 0 0 auto; }
  /* Every icon in the row the same size, so none of them is the odd one that gets squeezed. */
  .mail-bar > .mail-bar-actions .btn, .mail-bar > .mail-bar-end .btn, .mail-bar > .btn { flex: 0 0 auto; }
  /* Inside a thread the row carries no search at all, so it can be one short line. */
  .mail-bar--reading { padding-block: 2px; }
  /* The thread's own header slides away as he reads down, and returns on the first flick up. */
  .mail-read-head { transition: transform .18s ease, opacity .18s ease; }
  .mail-read.is-head-away > .mail-read-head { transform: translateY(-105%); opacity: 0; pointer-events: none; }
  /*
   * And it is far smaller to begin with. Measured on a 412x915 phone: 397px, nearly half the screen,
   * before a word of the mail — an 18px subject over three lines with four chips stacked one per line.
   * A smaller subject and the chips on one scrolling row bring it to about 130px. The subject is not
   * clamped — he has to be able to read the whole of it.
   */
  .mail-read-head { padding: 6px var(--s3); }
  .mail-read-subject { font-size: calc(15px * var(--text-scale)); line-height: 1.25; }
  .mail-read-sub { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .mail-read-sub::-webkit-scrollbar { display: none; }
  .mail-read-sub > * { flex: 0 0 auto; }
  .mail-list-head .mail-folder-select { min-height: 38px; }
  .mail-tabs { padding: 0 var(--s3); }
  .mail-tab { padding: 6px 2px; }
  .mail-grid.mail-grid--narrow { height: auto; flex: 1 1 0; min-height: 0; }
  .mail-bar { gap: 4px; padding: 4px 6px; }
  .mail-bar-actions { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; gap: 2px; scrollbar-width: none; }
  .mail-bar-actions::-webkit-scrollbar { display: none; }
  .mail-bar-group { flex: 0 0 auto; }
  /*
   * Mail search on a phone: its own full-width line, always a real field (Ali, 2026-09-28).
   *
   * It used to share the bar with the action icons and shrink to nothing, and before that it was a 28px
   * magnifier. `order` puts it under the actions rather than fighting them for the same line.
   */
  .mail-bar-search {
    flex: 1 1 100%; order: 5; min-width: 0; flex-wrap: wrap;
    padding-block: 4px; padding-inline: 12px 6px;
  }
  .mail-bar-search .mail-search-input { flex: 1 1 60%; min-height: 34px; }
  /* Scope and the AI button sit beside the field while there is room, and drop below it when there is not. */
  .mail-bar-search .mail-search-scope { max-width: 46%; }
  .mail-bar-end { order: 4; }
  /* The sync control stays on a phone too — only its wording folds away (2026-09-21). */
  .mail-bar-end .mail-sync .mail-bar-label { display: none; }
  .wa-bub-stack, .wa-row--draft .wa-bub-stack { max-width: 86%; }
  .wa .wa-msgs { padding: 8px 10px 12px; }
}

/* ---- calendar dialog, email drafts in place ---- */
.cal-when { flex-wrap: wrap; align-items: flex-end; gap: var(--s2); }
.cal-when .field { margin: 0; }
.thread-msg--draft { border: 1.5px dashed color-mix(in srgb, var(--danger) 55%, var(--border)); }
.mail-draft-word { flex: 0 0 auto; color: var(--danger); font-size: calc(12.5px * var(--text-scale)); font-weight: 600; }
.ed-saved { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-size: calc(12.5px * var(--text-scale)); }
.ed-saved[hidden] { display: none; }
.ed-saved .icon { width: 14px; height: 14px; }
/* The list's top rows keep their height; only the chat list below them scrolls. */
.wa .wa-list-head, .wa .wa-search, .wa-filters { flex: 0 0 auto; }
.wa-row-side .wa-icon-btn { border: 0; }
/* No blue box inside the WhatsApp search, the message box, or the mail search. The general rule outlines every
   focused field; these already show focus on their rounded container, and the second, square outline inside it
   was the "zra2 border" Ali asked to remove. The message box starts one line tall, as WhatsApp's does. */
.wa .wa-search-input, .wa .wa-search-input:focus,
.wa .wa-input, .wa .wa-input:focus,
.wa .wa-chat-search input, .wa .wa-chat-search input:focus,
.mail-search-input, .mail-search-input:focus { border: 0 !important; outline: none !important; box-shadow: none !important; }
.wa .wa-input { min-height: 0; height: 40px; resize: none; }
.wa .wa-compose-row:focus-within { box-shadow: inset 0 0 0 1.5px var(--wa-green); }
.wa .wa-chat-search:focus-within input { box-shadow: inset 0 0 0 1.5px var(--wa-green) !important; }
.mail-bar-search:focus-within { box-shadow: inset 0 0 0 1px var(--accent); }

/* ==================================================================
   WhatsApp: type filters, actions on a message, media, meetings
   ================================================================== */
.wa-filter-sep { flex: 0 0 1px; align-self: stretch; margin: 4px 2px; background: var(--wa-line); }
/* Two rows instead of a hidden horizontal scroll: what the chat is, then the states (unread, prepared, waiting…). */
.wa-filters { flex-wrap: wrap; overflow-x: visible; row-gap: 6px; }
.wa-filters .wa-filter-sep { flex: 0 0 100%; height: 0; margin: 0; background: none; }
.wa-filter--type[aria-pressed="true"] { background: var(--wa-text); color: var(--wa-panel); }
.wa .wa-avatar--person .icon { width: 24px; height: 24px; }
/* The action bar beside a message: one row of round buttons, shown on hover. */
.wa .wa-row-side { flex-direction: row; gap: 1px; align-self: center; padding: 3px; border-radius: 999px; background: var(--wa-panel); box-shadow: 0 1px 3px rgba(11, 20, 26, .18); }
.wa-act { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--wa-muted); cursor: pointer; }
.wa-act:hover { background: var(--wa-hover); color: var(--wa-text); }
.wa-act .icon { width: 17px; height: 17px; }
.wa-act--ai .icon { color: var(--wa-green); }
/* Photos at WhatsApp's own size: about 330 px wide, whatever the bubble's text would have made it. */
.wa-thumb { position: relative; display: block; width: 330px; max-width: 100%; margin: 2px 0 4px; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: var(--wa-quote); cursor: zoom-in; }
.wa-bub:not(.wa-bub--sticker):has(> .wa-thumb) { width: min(346px, 78vw); max-width: 100%; }
.wa-thumb--sticker img { min-height: 0; }
.wa-thumb img { display: block; width: 100%; height: auto; min-height: 120px; max-height: 420px; object-fit: cover; transition: filter .25s ease; }
.wa-thumb img.is-loading { filter: blur(6px); transform: scale(1.03); }
.wa-thumb--video img, .wa-thumb--gif img { max-height: 340px; }
.wa-thumb--sticker { width: 140px; background: transparent; }
.wa-thumb-play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .18); color: #fff; }
.wa-thumb-play .icon { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: rgba(0, 0, 0, .45); }
.wa-file { display: flex; align-items: center; gap: 8px; min-width: min(260px, 100%); margin: 2px 0 4px; padding: 8px 6px 8px 10px; border-radius: 6px; background: var(--wa-quote); }
.wa-file-icon { flex: 0 0 auto; width: 28px; height: 28px; color: var(--wa-muted); }
.wa-file-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.wa-file-name { font-weight: 500; }
.wa-file-meta { color: var(--wa-muted); font-size: calc(12px * var(--text-scale)); text-transform: uppercase; }
.wa-meeting { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 6px; padding: 6px 10px; border: 1px solid rgba(0, 168, 132, .45); border-radius: 8px; background: rgba(0, 168, 132, .08); color: var(--wa-text); font: inherit; font-size: calc(13px * var(--text-scale)); cursor: pointer; text-align: start; }
.wa-meeting:hover { background: rgba(0, 168, 132, .16); }
.wa-meeting .icon { width: 16px; height: 16px; color: var(--wa-green); }
.wa-meeting--strong { border-color: var(--wa-green); font-weight: 600; }
.wa-meeting-when { margin-inline-start: auto; color: var(--wa-muted); font-weight: 400; }

/* ---- the media viewer ---- */
.media-dlg .dlg-head { gap: var(--s2); }
.media-view { display: grid; place-items: center; min-height: 240px; }
.media-img { max-width: 100%; max-height: 72vh; border-radius: var(--r); }
.media-video { width: 100%; max-height: 72vh; border-radius: var(--r); background: #000; }
.media-audio { width: 100%; }
.media-pdf { width: 100%; height: 72vh; border: 0; border-radius: var(--r); background: #fff; }
.media-caption { margin: var(--s3) 0 0; }

/* File viewer: zoom, pan, rotate, full screen (email attachments and WhatsApp media). */
dialog.dlg.viewer { width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
.viewer .dlg-inner { display: flex; flex-direction: column; max-height: calc(100vh - 32px); }
.viewer-head { gap: 4px; flex-wrap: wrap; }
.viewer-head h2 { min-width: 0; flex: 0 1 auto; }
.viewer-tools { display: inline-flex; align-items: center; gap: 2px; padding-inline-end: 6px; margin-inline-end: 4px; border-inline-end: 1px solid var(--border); }
.viewer-pct { min-width: 54px; justify-content: center; font-size: calc(12px * var(--text-scale)); }
.viewer-body { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.viewer-stage { display: grid; overflow: auto; height: min(74vh, 820px); min-height: 240px; background: #0b0f17; border-radius: var(--r); user-select: none; overscroll-behavior: contain; direction: ltr; }
.viewer-stage > * { margin: auto; }
.viewer-stage--pan { cursor: grab; }
.viewer-stage--drag { cursor: grabbing; }
.viewer-box { position: relative; flex: 0 0 auto; }
.viewer-img { position: absolute; left: 50%; top: 50%; max-width: none; transform-origin: center; image-rendering: auto; }
.viewer-fill { width: 100%; height: 100%; border: 0; }
/* A video keeps its own shape (Ali, 2026-09-21: "lezem nafes side, ma yghayer dimension"). `.viewer-fill`
   stretches to the stage, which is right for a PDF frame and wrong for a picture or a film: a portrait phone
   recording was being pulled out to the width of the dialog. It fits inside instead, centred, uncropped. */
/* The stage is a scrolling grid, so `max-height: 100%` resolves against the content and lets a portrait
   phone video grow to 2275px inside a 703px frame — measured. It is capped against the same window the
   stage itself uses. */
.viewer-video { background: #000; width: auto; height: auto; max-width: 100%; max-height: min(74vh, 820px); object-fit: contain; }
.viewer-pdf { background: #fff; }
.viewer .empty { color: #e5e7eb; }
dialog.dlg.viewer:fullscreen, dialog.dlg.viewer.viewer--max { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; border-radius: 0; border: 0; }
.viewer:fullscreen .dlg-inner, .viewer.viewer--max .dlg-inner { height: 100vh; max-height: 100vh; }
.viewer:fullscreen .viewer-stage, .viewer.viewer--max .viewer-stage { height: auto; flex: 1 1 auto; }
/* Full screen gives it the whole window, still without changing its shape. */
.viewer:fullscreen .viewer-video, .viewer.viewer--max .viewer-video { max-height: calc(100vh - 140px); }
dialog.dlg.viewer.viewer--max { position: fixed; inset: 0; }

/* Email attachments under a message. */
.mail-atts { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 8px; }
.mail-att { display: inline-flex; align-items: center; max-width: 100%; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); }
.mail-att-open { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 300px; padding: 6px 4px 6px 10px; background: none; border: 0; color: inherit; text-align: start; cursor: pointer; border-radius: var(--r) 0 0 var(--r); }
[dir="rtl"] .mail-att-open { padding: 6px 10px 6px 4px; border-radius: 0 var(--r) var(--r) 0; }
.mail-att-open:hover { background: var(--surface-3); }
.mail-att-open .icon { width: 16px; height: 16px; color: var(--text-muted); flex: 0 0 auto; }
.mail-att-name { min-width: 0; font-size: calc(13px * var(--text-scale)); }

/* ---- Settings › WhatsApp ---- */
.waset-mode { flex-wrap: wrap; }
.waset-actions { flex-wrap: wrap; gap: var(--s2); }
.waset-toolbar { flex-wrap: wrap; gap: var(--s2); align-items: center; }
.waset-toolbar input[type="search"] { flex: 1 1 220px; min-width: 0; }
.waset-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.waset-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--border); }
.waset-row:last-child { border-bottom: 0; }
.waset-row--hidden { background: color-mix(in srgb, var(--danger) 6%, transparent); }
.waset-row--hidden .waset-name { color: var(--text-muted); }
.waset-avatar { flex: 0 0 auto; width: 36px !important; height: 36px !important; color: #fff; font-size: calc(12px * var(--text-scale)); }
.waset-avatar .icon { width: 18px; height: 18px; }
.waset-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.waset-name { font-weight: 600; }
.waset-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.waset-meta .icon { width: 12px; height: 12px; vertical-align: -2px; }
.waset-filter { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.waset-filter + .waset-filter { padding-inline-start: 10px; border-inline-start: 1px solid var(--border); }
.waset-vis { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; min-width: 188px; justify-content: space-between; padding: 5px 6px 5px 10px; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--danger) 8%, transparent); color: var(--danger); font: inherit; font-size: calc(13px * var(--text-scale)); font-weight: 500; cursor: pointer; }
[dir="rtl"] .waset-vis { padding: 5px 10px 5px 6px; }
.waset-vis.is-on { border-color: color-mix(in srgb, var(--success) 50%, var(--border)); background: color-mix(in srgb, var(--success) 10%, transparent); color: var(--success); }
.waset-vis:hover { filter: brightness(1.08); }
.waset-vis-text { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.waset-vis-text .icon { width: 15px; height: 15px; }
.waset-vis .switch { pointer-events: none; }
.waset-vis:not(.is-on) .switch .switch-knob { background: var(--danger); }
.waset-toggle { flex: 0 0 auto; min-width: 128px; justify-content: center; }
.waset-toggle.is-on { border-color: color-mix(in srgb, var(--ok) 50%, var(--border)); color: var(--ok); }
.waset-toggle:not(.is-on) { color: var(--danger); }
.waset-empty { padding: var(--s4); text-align: center; }
.waset-preview { display: flex; flex-direction: column; gap: 4px; }
.waset-bubble { align-self: flex-start; max-width: min(420px, 100%); padding: 8px 12px; border-radius: 8px; background: #d9fdd3; color: #111b21; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
@media (max-width: 600px) { .waset-row { flex-wrap: wrap; } .waset-toggle, .waset-vis { min-width: 0; } .waset-row .btn-label { display: none; } }

/* ---- Drive ---- */
.drive { display: flex; flex-direction: column; gap: var(--s3); }
.drive-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.drive-tabs { flex: 1 1 auto; }
.drive-tabs .tab { display: inline-flex; align-items: center; gap: 6px; }
.drive-tabs .dot { width: 7px; height: 7px; }
.drive-search { flex: 0 1 320px; min-width: 200px; }
.drive-content { display: flex; flex-direction: column; gap: var(--s2); }
.drive-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.drive-crumb { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--accent); font: inherit; cursor: pointer; }
.drive-crumb:hover { background: var(--surface-2); }
.drive-crumb .icon { width: 15px; height: 15px; }
.drive-sep { color: var(--text-faint); }
.drive-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.drive-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 90px 160px; align-items: center; gap: var(--s3); width: 100%; padding: 10px var(--s3); border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; text-align: start; text-decoration: none; cursor: pointer; }
.drive-row:last-child { border-bottom: 0; }
.drive-row:hover { background: var(--surface-2); text-decoration: none; }
.drive-icon { width: 22px; height: 22px; color: var(--text-muted); }
.drive-icon--folder { color: #f5b50a; }
.drive-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.drive-name { font-weight: 500; }
.drive-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--text-muted); font-size: calc(12px * var(--text-scale)); }
.drive-size { color: var(--text-muted); font-size: calc(12.5px * var(--text-scale)); text-align: end; }
@media (max-width: 700px) { .drive-row { grid-template-columns: 28px minmax(0, 1fr) auto; } .drive-row > time { display: none; } }
/* ---- ERP requests, the way the ERP shows them (2026-09-22) ---- */
.btn--amber { background: var(--warning); border-color: var(--warning); color: #1a1100; }
.btn--amber-outline { background: transparent; border-color: var(--warning); color: var(--warning); }
.btn--amber-outline:hover { background: color-mix(in srgb, var(--warning) 12%, transparent); }
.erq-list { display: flex; flex-direction: column; gap: 10px; }
.erq-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); cursor: pointer; }
.erq-card:hover, .erq-card:focus-visible { border-color: var(--accent); box-shadow: 0 1px 0 var(--border); outline: none; }
.erq-card-icon { flex: 0 0 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-muted); }
.erq-card-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.erq-card-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.erq-card-title { font-size: calc(16px * var(--text-scale)); font-weight: 600; overflow-wrap: anywhere; }
.erq-card-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--text-muted); font-size: calc(13px * var(--text-scale)); }
.erq-amount { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.erq-ref { font-family: var(--font-mono, ui-monospace, monospace); font-size: calc(12px * var(--text-scale)); color: var(--text-muted); background: var(--surface-2); border-radius: 6px; padding: 2px 7px; }
.erq-who { font-size: calc(14px * var(--text-scale)); }
.erq-quick { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
/* The "Needs you" card decides in place, so the whole card is not a link and its buttons read left to
   right under the request rather than being pushed to the far edge (Ali, 2026-09-27). */
.erq-card--acts { cursor: default; align-items: flex-start; }
.erq-card--acts .erq-quick { justify-content: flex-start; margin-top: 2px; }
.erq-card--acts:hover { border-color: var(--border-strong); box-shadow: none; }
/* The month's ceiling, beside the amount. */
.erq-budget { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.erq-budget .icon { width: 13px; height: 13px; }
.erq-budget.is-none { color: var(--text-faint); }
.erq-budget.is-heavy { color: var(--danger); font-weight: 600; }
/* A purchase on one line: its PO and its payment request, each with its own status. */
.erq-pair { gap: 10px; }
.erq-stages { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; }
.erq-stage { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit; }
button.erq-stage:hover { border-color: var(--accent); }
.erq-stage-ref { font-family: var(--font-mono, ui-monospace, monospace); font-size: calc(11px * var(--text-scale)); opacity: .75; }
/* The request he already has open, sitting in its own purchase's line: outlined, not a link to itself. */
.erq-stage.is-self { cursor: default; outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 1px; }
.erq-stage-self { font-size: calc(10.5px * var(--text-scale)); opacity: .8; }
/* The half that does not exist yet — dashed, so "approved but never paid" is visible at a glance. */
.erq-stage.is-none { padding: 2px 9px; border: 1px dashed var(--border-strong); border-radius: 7px; color: var(--text-faint);
  font-size: calc(12px * var(--text-scale)); white-space: nowrap; cursor: default; }

/* The wait that is actually his — the request's own age sits beside it, greyed. */
.erq-waited { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--text); }
.erq-waited .icon { width: 13px; height: 13px; }
.erq-waited.is-late { color: var(--danger); }
/* The ceiling under the request's total, in the document window. */
.erq-budget-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding-top: 8px; margin-top: 6px; border-top: 1px dashed var(--border); }
.erq-budget-line > strong { text-align: end; font-variant-numeric: tabular-nums; }
.erq-budget-line .erq-sar { display: block; font-weight: 400; color: var(--text-muted); font-size: calc(12px * var(--text-scale)); }
.erq-budget-line .erq-over { color: var(--danger); }
.erq-chev { color: var(--text-faint); flex: 0 0 auto; }
.erq-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 7px; border: 1px solid var(--border-strong); font-size: calc(12px * var(--text-scale)); font-weight: 600; line-height: 1.5; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--text); background: transparent; }
.erq-tag--type { border-color: var(--text); }
.erq-tag--cat { color: #6741d9; border-color: #b197fc; background: color-mix(in srgb, #7950f2 10%, transparent); }
.erq-tag--pay { color: #087f5b; border-color: #63e6be; background: color-mix(in srgb, #12b886 12%, transparent); }
/* Cash, in red wherever the method is shown. */
.erq-tag--cash { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.erq-tag--dark { background: var(--text); border-color: var(--text); color: var(--surface); }
.erq-tag--danger { color: var(--danger); border-color: var(--danger); }
.erq-tag--amber { color: #a15c00; border-color: #fcc419; background: color-mix(in srgb, #fcc419 18%, transparent); }
.erq-tag--amber-solid { background: #f59f00; border-color: #f59f00; color: #1a1100; }
.erq-tag--muted { color: var(--text-faint); border-color: var(--border); }
.erq-tag--st-approved, .erq-tag--st-paid, .erq-tag--st-closed { background: #2b8a3e; border-color: #2b8a3e; color: #fff; }
.erq-tag--st-pending_payment, .erq-tag--st-pending_invoice { background: #f76707; border-color: #f76707; color: #fff; }
.erq-tag--st-returned { background: transparent; border-color: var(--text); color: var(--text); }
.erq-tag--st-rejected, .erq-tag--st-cancelled { background: var(--danger); border-color: var(--danger); color: #fff; }
.erq-tag--st-draft { color: var(--text-muted); }
.erq-tag--st-pending { background: var(--text); border-color: var(--text); color: var(--surface); }
.erq-select { height: 36px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); color: var(--text); padding: 0 10px; font: inherit; font-size: calc(13.5px * var(--text-scale)); max-width: 220px; }
.erq-range { display: inline-flex; align-items: center; gap: 6px; color: var(--text-faint); }
.erq-amount-in { width: 96px; height: 36px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); color: var(--text); padding: 0 10px; font: inherit; font-size: calc(13.5px * var(--text-scale)); }
/* the request itself */
dialog.dlg.erq-dlg { width: min(1320px, calc(100vw - 32px)); max-width: none; max-height: 94vh; }
.erq-dlg .dlg-inner { max-height: 94vh; }
@media (max-width: 700px) { dialog.dlg.erq-dlg { width: 100%; max-height: 94dvh; } }
.erq-dlg .dlg-head h2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.erq-body { background: var(--surface-2); }
.erq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 16px; align-items: start; }
.erq-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.erq-box { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.erq-box > h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: calc(16px * var(--text-scale)); }
.erq-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 20px; }
.erq-facts--rule { border-top: 1px solid var(--border); padding-top: 12px; }
.erq-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.erq-fact-label { color: var(--text-muted); font-size: calc(13px * var(--text-scale)); }
.erq-fact-value { font-weight: 600; overflow-wrap: anywhere; }
.erq-fact-sub { color: var(--text-faint); font-size: calc(12px * var(--text-scale)); }
.erq-sub { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: calc(13.5px * var(--text-scale)); }
.erq-summary { margin: 0; }
.erq-files { display: flex; flex-wrap: wrap; gap: 8px; }
.erq-file { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface-2); max-width: 100%; }
.erq-file--slip { border-color: #63e6be; background: color-mix(in srgb, #12b886 10%, var(--surface)); }
.erq-file-open { display: inline-flex; align-items: center; gap: 6px; padding: 5px 4px 5px 10px; border: 0; background: none; color: var(--text); font: inherit; font-size: calc(13px * var(--text-scale)); cursor: pointer; min-width: 0; max-width: 320px; }
.erq-file-open:hover bdi { text-decoration: underline; }
.erq-slip-tag { font-size: calc(11px * var(--text-scale)); color: #087f5b; font-weight: 600; }
.erq-lines td, .erq-lines th { vertical-align: top; }
.erq-line-name { color: var(--accent); font-weight: 600; }
.erq-totals { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding: 12px 4px 2px; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.erq-totals > div { display: flex; gap: 18px; align-items: baseline; }
.erq-totals > div > span { color: var(--text-muted); }
.erq-grand strong { font-size: calc(18px * var(--text-scale)); display: flex; flex-direction: column; align-items: flex-end; }
.erq-sar { font-size: calc(12px * var(--text-scale)); color: var(--text-faint); font-weight: 400; }
.erq-note { width: 100%; min-height: 70px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); color: var(--text); padding: 9px 11px; font: inherit; resize: vertical; }
.erq-action-row { display: flex; flex-wrap: wrap; gap: 10px; }
.erq-warn { color: var(--danger); margin: 0; }
.erq-confirm-doc { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 9px; background: var(--surface-2); }
.erq-pay.is-paid { border-color: #69db7c; background: color-mix(in srgb, #40c057 7%, var(--surface)); }
.erq-pay-record { border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; background: var(--surface); display: flex; flex-direction: column; gap: 3px; }
.erq-total { align-items: center; text-align: center; gap: 4px; background: var(--surface-2); }
.erq-total > strong { font-size: calc(26px * var(--text-scale)); font-variant-numeric: tabular-nums; }
.erq-total-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 6px; }
.erq-step { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; }
.erq-step--upcoming { opacity: .6; }
.erq-step--pending { border-color: #fcc419; }
.erq-step-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.erq-step-head { display: flex; justify-content: space-between; gap: 8px; width: 100%; }
.erq-avatar { flex: 0 0 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); font-size: 12px; font-weight: 700; color: var(--text-muted); }
.erq-quote { margin: 4px 0 0; padding-inline-start: 10px; border-inline-start: 3px solid var(--border-strong); color: var(--text-muted); font-style: italic; font-size: calc(13.5px * var(--text-scale)); }
.erq-event { display: flex; gap: 12px; padding: 4px 4px 4px 2px; }
.erq-event-dot { flex: 0 0 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--text-muted); }
.erq-event--comment .erq-event-dot { color: var(--accent); }
.erq-comment { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 10px; background: var(--surface-2); }
/* One column below 980, and the side column stays *after* the request — it used to be hoisted above it
   (`order: -1`), which is why a phone opened on the approval chain and the total while the request itself,
   its items and the analysis were somewhere below (Ali, 2026-09-24). The grand total is at the foot of the
   items anyway, so nothing is lost by reading it in order. */
@media (max-width: 980px) { .erq-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .erq-card { flex-wrap: wrap; } .erq-quick { width: 100%; justify-content: flex-start; } .erq-select { max-width: 100%; flex: 1 1 140px; } }
/* brands on the Team chart */
.org-node--section.has-color { border-top: 3px solid var(--org-color); }
.org-node--brand { border-color: var(--org-color, #e8590c); background: color-mix(in srgb, var(--org-color, #e8590c) 7%, var(--surface)); }
.org-node--brand .org-node-name, .org-sec--brand .org-sec-name { color: var(--org-color, #e8590c); display: inline-flex; align-items: center; gap: 5px; }
.org-sec--brand { border-inline-start: 3px solid var(--org-color, #e8590c); }
.org-brand-star { width: 14px; height: 14px; }
.org-brand-tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 5px; background: var(--org-color, #e8590c); color: #fff; }
/* A unit is a quieter mark than a brand: it says which level this is, not whose it is. */
.org-unit-tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--border-strong); color: var(--text-muted); }
.org-swatches { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.org-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border-strong); cursor: pointer; padding: 0; }
.org-color-in { width: 34px; height: 28px; padding: 0; border: 1px solid var(--border-strong); border-radius: 6px; background: none; }
.org-color-row { display: flex; flex-direction: column; gap: 6px; }
.org-node--brand .org-brand-tag { display: none; }

/* ---- supply chain explorer (2026-09-22) ---- */
.erq-body { container-type: inline-size; }
@container (max-width: 960px) { .erq-grid { grid-template-columns: minmax(0, 1fr); } }
.sc-status { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 7px; font-size: calc(12px * var(--text-scale)); font-weight: 600; text-transform: capitalize; white-space: nowrap; border: 1px solid transparent; }
.sc-status--ok { background: color-mix(in srgb, #2b8a3e 16%, transparent); color: #2f9e44; border-color: color-mix(in srgb, #2b8a3e 40%, transparent); }
.sc-status--amber { background: color-mix(in srgb, #f59f00 18%, transparent); color: #e67700; border-color: color-mix(in srgb, #f59f00 45%, transparent); }
.sc-status--danger { background: color-mix(in srgb, #e03131 14%, transparent); color: #e03131; border-color: color-mix(in srgb, #e03131 40%, transparent); }
.sc-status--muted { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); }
.sc-pill { display: inline-flex; padding: 1px 8px; border-radius: 999px; font-size: calc(11.5px * var(--text-scale)); border: 1px solid var(--border-strong); color: var(--text-muted); white-space: nowrap; }
.sc-pill--teal { color: #0c8599; border-color: #66d9e8; background: color-mix(in srgb, #15aabf 10%, transparent); }
.sc-pill--green { color: #2b8a3e; border-color: #8ce99a; background: color-mix(in srgb, #40c057 10%, transparent); }
.sc-link { color: var(--accent); }
.sc-linkbtn { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; text-align: start; color: var(--accent); }
.sc-linkbtn:hover { text-decoration: underline; }
.sc-table thead th { background: #1e3a8a; color: #fff; font-weight: 600; }
.sc-lines thead th { background: #334155; color: #fff; }
.sc-amber { color: #e67700; } .sc-green { color: #2f9e44; } .sc-blue { color: #4263eb; }
.sc-tabs-wrap { display: flex; flex-direction: column; gap: 12px; }
.sc-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 10px; background: var(--surface-2); }
.sc-tab { border: 0; background: none; padding: 7px 14px; border-radius: 8px; font: inherit; font-size: calc(13.5px * var(--text-scale)); color: var(--text-muted); cursor: pointer; }
.sc-tab[aria-selected="true"] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.sc-rowline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; font-size: calc(13.5px * var(--text-scale)); }
.sc-rowline--btn { width: 100%; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; text-align: start; }
.sc-rowline--btn:hover { border-color: var(--accent); }
.erq-history-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 9px; font-weight: 600; }
.erq-history-sum.is-known { background: color-mix(in srgb, #2b8a3e 12%, transparent); color: #2f9e44; }
.erq-history-sum.is-new { background: color-mix(in srgb, #f59f00 14%, transparent); color: #e67700; }
.erq-history-list { display: flex; flex-direction: column; gap: 6px; }
.erq-history-item { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
.ny-filter { margin-bottom: 14px; flex-wrap: wrap; }
a.erq-card { color: inherit; text-decoration: none; }
.org-person.is-inactive { opacity: .5; text-decoration: line-through; text-decoration-color: var(--text-faint); }

/* Tasks board and the suggested reason (2026-09-23) */
.tt-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; align-items: start; }
.tt-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.tt-col-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: calc(14px * var(--text-scale)); }
.tt-col--open { border-top: 3px solid var(--warning); }
.tt-col--in_progress { border-top: 3px solid var(--info); }
.tt-col--done { border-top: 3px solid var(--success); }
.tt-bcard { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: inherit; text-decoration: none; }
.tt-bcard:hover { border-color: var(--accent); }
.tt-bcard.is-late { border-inline-start: 3px solid var(--danger); }
.tt-bcard-title { font-weight: 600; }
.tt-bcard-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--text-muted); font-size: calc(12.5px * var(--text-scale)); }
.tt-bcard-meta .is-late { color: var(--danger); }
.erq-suggest { border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; }
/* The daily brief (2026-09-23) */
/* The whole width of the page, like every other page (Ali, 2026-10-07: "lesh bl web ma3 el brief full screen"). */
.brief { display: flex; flex-direction: column; gap: 16px; }
.brief-hero { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; padding: 22px 24px; border-radius: 16px; border: 1px solid var(--border-strong); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface)); }
.brief-hero--evening { background: linear-gradient(135deg, color-mix(in srgb, #7048e8 14%, var(--surface)), var(--surface)); }
.brief-hero-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.brief-hero-main h1 { margin: 0; font-size: calc(24px * var(--text-scale)); }
.brief-when { margin: 0; color: var(--text-muted); font-size: calc(13px * var(--text-scale)); text-transform: capitalize; }
.brief-headline { margin: 0; font-size: calc(15px * var(--text-scale)); color: var(--text-muted); max-width: 60ch; }
.brief-hero-side { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.brief-weather { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 10px 16px; border-radius: 12px; background: var(--surface-2); min-width: 120px; }
.brief-weather strong { font-size: calc(26px * var(--text-scale)); }
.brief-weather .caption { text-transform: capitalize; }
.brief-budget { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border-radius: 12px; background: var(--surface-2); min-width: 150px; color: inherit; text-decoration: none; border: 1px solid transparent; }
.brief-budget strong { font-size: calc(22px * var(--text-scale)); }
.brief-budget.is-ok { border-color: color-mix(in srgb, var(--success) 45%, transparent); }
.brief-budget.is-warn { border-color: color-mix(in srgb, var(--warning) 55%, transparent); }
.brief-budget.is-danger { border-color: var(--danger); }
.brief-budget-bar { display: block; height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin-top: 4px; }
.brief-budget-bar > span { display: block; height: 100%; background: var(--success); }
.brief-budget.is-warn .brief-budget-bar > span { background: var(--warning); }
.brief-budget.is-danger .brief-budget-bar > span { background: var(--danger); }
.brief-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.brief-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.brief-box { border: 1px solid var(--border); border-radius: 14px; padding: 16px 20px; background: var(--surface); }
.brief-box h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: calc(16px * var(--text-scale)); }
.brief-box--today { border-inline-start: 3px solid var(--accent); }
.brief-box--needs { border-inline-start: 3px solid var(--warning); }
.brief-box--watch { border-inline-start: 3px solid var(--danger); }
.brief-list { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 8px; line-height: 1.55; }
.brief-closing { margin: 0; font-style: italic; color: var(--text-muted); padding-inline-start: 4px; }
.brief-foot { margin: 0; }
@media (max-width: 700px) { .brief-hero { padding: 16px; } .brief-hero-side { width: 100%; } .brief-weather, .brief-budget { flex: 1 1 140px; } }.wa-ai-replied { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 6px; font-size: calc(10.5px * var(--text-scale)); font-weight: 600; color: #7048e8; background: color-mix(in srgb, #7048e8 14%, transparent); white-space: nowrap; }
.wa-ai-replied svg { width: 11px; height: 11px; }

/* Task cards: importance, notes with lists, files (2026-09-23) */
.tt-prio { flex: 0 0 auto; width: auto; max-width: 120px; height: 26px; border-radius: 7px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-muted); font: inherit; font-size: calc(12px * var(--text-scale)); padding: 0 6px; }
.tt-prio--urgent { color: var(--danger); border-color: var(--danger); font-weight: 600; }
.tt-prio--high { color: #e67700; border-color: #f59f00; font-weight: 600; }
.tt-prio--low { opacity: .75; }
.tt-note { width: 100%; min-height: 96px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); color: var(--text); padding: 9px 11px; font: inherit; resize: vertical; }
.tt-note-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tt-files { display: flex; flex-wrap: wrap; gap: 6px; }
.tt-file { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface-2); padding: 2px 4px 2px 8px; font-size: calc(12.5px * var(--text-scale)); max-width: 260px; }
.tt-file-open { border: 0; background: none; color: var(--text); font: inherit; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; min-width: 0; }
.tt-file-open bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-file-x { border: 0; background: none; color: var(--text-muted); cursor: pointer; display: inline-flex; padding: 2px; }
.tt-file-x:hover { color: var(--text); }
.tt-tl-head { display: block; }
.tt-note-body { margin: 4px 0 2px; }
.tt-note-line { margin: 0 0 4px; }
.tt-ul, .tt-ol, .tt-checks { margin: 4px 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 3px; }
.tt-checks { list-style: none; padding-inline-start: 2px; }
.tt-checks label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.tt-checks .is-done { text-decoration: line-through; color: var(--text-muted); }
/* The recorder banner on Calendar and Meetings (2026-09-23) */
.rec-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); margin-bottom: 14px; flex-wrap: wrap; }
.rec-banner.is-ready { border-color: color-mix(in srgb, var(--success) 45%, transparent); background: color-mix(in srgb, var(--success) 6%, var(--surface)); }
.rec-banner > svg:first-child { width: 22px; height: 22px; color: var(--text-muted); flex: 0 0 auto; }
/* Read and unread, told apart at a glance (2026-09-23) */
.mail-row--unread { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.mail-row--seen .mail-from, .mail-row--seen .mail-subject { font-weight: 400; color: var(--text-muted); }
.mail-unseen-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; margin-inline: 4px; }

/* ==========================================================================
   Phone and tablet, measured and fixed (Ali, 2026-09-23: "mobile view and
   ipad view is not good at all")
   --------------------------------------------------------------------------
   Every rule here answers something measured in a real browser at 390×844
   (iPhone), 820×1180 (iPad upright) and 1180×820 (iPad on its side), not a
   guess. What was wrong, in the order it hurt:

   1. On an iPad upright the top bar's right-hand group was 447px wide and
      ended 2px past the screen — on every single page — so the profile
      button sat under the edge and the whole page could be dragged sideways.
   2. The ERP page scrolled 332px sideways on a phone: a 216px module rail
      beside the table left 174px for the table, and a segmented control
      342px wide sat inside that.
   3. The new ticket cards never collapsed: their rule was a container query
      and nothing in the app declares a container, so it could not fire.
   4. Tables sat in a scroller that had no width of its own (a grid child is
      `min-width: auto`), so instead of scrolling inside, they pushed the page.
   5. The org chart is 6,634px wide and pushed the page with it.
   6. Touch targets: the tree's twisty is 17px, filter chips 28px.
   ========================================================================== */

/* The camera's strip, at every width and not only on a phone — it measures zero everywhere it does not
   apply, and a rule that only exists inside a media query is a rule that can fail to match (2026-09-24).
   With `apple-mobile-web-app-status-bar-style: default` iOS already keeps that strip to itself, so this is
   the belt to that pair of braces: it also covers Android's cut-outs and a phone held on its side. */
.topbar {
  height: calc(var(--topbar-h) + var(--safe-t));
  padding-top: var(--safe-t);
  padding-inline: calc(var(--s4) + var(--safe-l)) calc(var(--s4) + var(--safe-r));
}
.hairline { top: calc(var(--topbar-h) + var(--safe-t)); }
.pane, .mailwin-panel, .gsearch-sheet { padding-top: var(--safe-t); }

/* A scroller only scrolls if it is allowed to be narrower than what is in it. */
.table-wrap, .org-tree-wrap { min-width: 0; max-width: 100%; }
.org-tree-wrap { overflow-x: auto; }
/* A long name in a chip ellipsizes instead of standing the row open. */
.tk-tags .chip, .tk-tags .pill { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* No chip may be wider than what holds it. A job title like "Transportation Officer and logistics
   coordinator" made a 450px chip on a 390px phone, and the whole page — tab bar and all — widened to fit
   it (Ali, 2026-09-24). On a narrow screen the words wrap inside the chip instead. */
.chip { max-width: 100%; min-width: 0; }
@media (max-width: 899px) {
  .tt-row-name .chip, .team-card .chip, .org-node .chip, .list-row .chip { white-space: normal; }
}

/* ---- Up to 1199: the iPad upright, and the band above the phone ---- */
@media (max-width: 1199px) {
  /* The bar's right-hand group may now give up space, and asks for less of it. */
  .topbar { gap: var(--s2); padding-inline: var(--s3); }
  .topbar-end { flex: 0 1 auto; min-width: 0; }
  .gsearch { width: clamp(120px, 20vw, 220px); }
  /* Rows of controls become swipeable rather than wider than the screen. */
  /* One row that swipes, not two rows that wrap: four tabs over two lines reads as two sets of tabs. */
  .tabs { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
  .tabs::-webkit-scrollbar { display: none; }
  /* A strip that swipes must say so, or a tab past the edge simply does not exist to him — which is what
     happened to "Team pending" (2026-09-27). `data-more` is set by revealTabs() only when it overflows,
     and both edges fade so it reads the same in Arabic. */
  .tabs[data-more] {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 26px), transparent 100%);
  }
  /*
   * The board tabs wrap instead of swiping.
   *
   * They carry counts, so three of them are ~560px and the third sat entirely off a 390px screen — he
   * could not find "Team pending" at all, and "Resolved" on the ticket board was clipped the same way.
   * Two short rows where every choice is visible beats one row that hides one, whatever it does to the
   * line. This is the case the "one row that swipes" rule above got wrong.
   */
  .tk-tabs { flex-wrap: wrap; overflow-x: visible; row-gap: 0; }
  /* Tight enough that two fit on a line: at the desk padding each was ~187px and three went one per row,
     which is three rows of tabs before the list even starts. */
  .tk-tab { padding: 8px; gap: 6px; }
  .tk-tab-n { padding-inline: 6px; }
  .tab, .tk-tab { flex: 0 0 auto; }
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg-item { flex: 0 0 auto; }
}

/* ---- Up to 900: the iPad upright and the phone ---- */
@media (max-width: 899px) {
  /* The spend chip is a desktop luxury — the Brief carries the same number, larger. */
  .topbar-end .spend-chip { display: none; }
  /* The ERP's module rail sits above its table instead of stealing half a phone's width — and on a phone it
     is a dropdown (see `railMobile`), one line instead of twenty-two. */
  .erp-shell { grid-template-columns: minmax(0, 1fr); }
  .erp-rail { position: static; max-height: 44dvh; }
  .erp-rail--mobile { padding: 0; border: 0; background: none; max-height: none; }
  .erp-rail--mobile select { width: 100%; min-height: 44px; }
  .erp-main { min-width: 0; }
  /* The ticket and follow-up cards: where it is moves to its own line above the title. */
  .tk-card { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px; }
  /* Brand · branch · who reported it, on one wrapping line — each part able to shrink, so the last one
     ellipsizes instead of running off the card. */
  .tk-place { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 4px 12px; }
  .tk-place > span { flex: 0 1 auto; min-width: 0; }
  /* Wide enough to read, not so wide that the last one on a row stretches across the screen. */
  .tk-filters .ticket-filter, .tk-filters select { flex: 1 1 150px; max-width: 320px; }
  /* A long approver's name ellipsizes instead of running past the card's edge. */
  .erq-tag, .erq-card .chip { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .fu-acts { grid-column: 1 / -1; justify-content: flex-start; }
  /* A row whose end group is 323px wide (Meetings) puts that group on its own line. */
  .list-row { flex-wrap: wrap; }
  .list-row-end { min-width: 0; }
}

/* The filter sheet: one control per line, full width, thumb-sized. */
.tk-sheet { gap: var(--s3); }
.tk-sheet > * { width: 100%; max-width: none; }
.tk-sheet select, .tk-sheet .ticket-filter, .tk-sheet .date-range-select { width: 100%; min-height: 44px; }
.tk-sheet .date-range { flex-wrap: wrap; }
.tk-sheet .chip--filter { align-self: flex-start; min-height: 40px; }
.tk-filters--mobile { margin-block: 2px; }

/* ---- The phone ---- */
@media (max-width: 600px) {
  /* A page's name, not a sentence: "Tickets — technical and maintenance · 163" was three lines of heading
     before anything else on the screen. */
  .page-head h1 { font-size: calc(22px * var(--text-scale)); line-height: 1.25; }
  .page-head { gap: var(--s2); }
  .page-actions { flex-wrap: wrap; gap: 6px; }
  /* A page's explanation is desktop reading — three lines of it before the work is not (2026-09-23). */
  .page-head-desc { display: none; }
  .erp-status .caption { display: none; }
  /*
   * The mail bar on a phone: the actions on one line, the search field on its own beneath them.
   *
   * It was `nowrap` because an empty wide search box once left a row holding one pencil button and 300px
   * of nothing. The answer then was to collapse the search; the cost was that searching meant hitting a
   * 28px magnifier first, and searching is most of why he opens mail on a phone at all (Ali, 2026-09-28:
   * "aswa2 tajroba"). So the bar wraps again — but deliberately, into two useful rows, with the field at
   * full width on the second. `order` keeps the actions first whatever order the DOM is in.
   */
  /*
   * 2026-09-30: back to ONE line, and this time it can be. The second row existed to carry a full-width
   * search FIELD; there is no field on a phone any more, only a magnifier that opens a sheet, so there
   * is nothing left that needs its own row. "hoton kelon line whad."
   */
  .mail-bar { flex-wrap: nowrap; gap: 4px; padding: 5px 6px; min-width: 0; }
  /* With a conversation open the bar gains delete, archive, folder, flag, unread and ⋯ — 406px of icons that
     `flex: 0 0 auto` refused to shrink, so the whole PAGE became 579px wide on a 390px phone and every screen
     scrolled sideways (Ali's iPhone, 2026-09-25). The icons now shrink and scroll inside the bar instead. */
  /* The actions are the only thing allowed to shrink and scroll sideways; everything else keeps its size,
     which is what stops the compose pencil being sliced in half at the edge of the strip. */
  .mail-bar-actions { flex: 1 1 0; min-width: 0; order: 3; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .mail-bar-actions::-webkit-scrollbar { display: none; }
  .mail-bar-end { flex: 0 0 auto; gap: 0; min-width: 0; order: 4; }
  /* 100% of the basis is what forces the second line; the bar has nothing else wide enough to join it. */
  /*
   * One line, not a block. Wrapping put the folder scope and the ✨ button on a second row INSIDE the
   * pill, which made a 44px control about 110px tall and swallowed the top of the screen — the thing he
   * photographed on 2026-09-28 ("search ktir besh3, ktir kbire w saghir"). The field keeps its 16px font
   * so iOS does not zoom; the scope shrinks instead.
   */
  .mail-bar-search { flex: 1 1 100%; min-width: 0; order: 3; flex-wrap: nowrap; padding-block: 0; padding-inline: 10px 4px; }
  .mail-bar-search .mail-search-input { flex: 1 1 auto; min-width: 0; min-height: 40px; padding-block: 0; }
  .mail-bar-search .mail-search-scope { flex: 0 0 auto; max-width: 96px; font-size: calc(11.5px * var(--text-scale)); }
  .mail-bar-search .mail-ai-btn { flex: 0 0 auto; padding-inline: 8px; }
  .mail-bar-search .mail-ai-btn .mail-bar-label { display: none; }
  /* The Tasks page on a phone: six tiles the size of cards filled half the screen before the first person,
     and a person's row of five statistics could not shrink, so it pushed the page (Ali, 2026-09-24). */
  .tt-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .tt-tiles .stat { padding: 8px; }
  .tt-tiles .stat-label { font-size: calc(11px * var(--text-scale)); }
  .tt-tiles .stat-value { font-size: calc(18px * var(--text-scale)); }
  .tt-row { flex-wrap: wrap; gap: var(--s2); padding: 12px; }
  .tt-row-stats { flex: 1 1 100%; min-width: 0; gap: var(--s3); flex-wrap: wrap; justify-content: space-between; }
  .tt-rate { min-width: 84px; }
  .tt-person-stats { gap: var(--s3); }
  .tabbar { padding-inline: var(--safe-l) var(--safe-r); }
  /* Cards and tiles on a phone: the same information, less furniture around it. A request card spent a whole
     row on a decorative icon, and every statistic was the size of a card (Ali, 2026-09-24: the phone is
     "very very bad" — most of it was this). */
  .erq-card { padding: 12px; gap: 8px; }
  .erq-card-icon { display: none; }
  .stat-grid .stat, .stat-grid--6 .stat, .stat-bar .stat, .stat-bar .stat-cell { padding: 10px; }
  .stat-grid .stat-value, .stat-bar .stat-value { font-size: calc(20px * var(--text-scale)); }
  /* Three across, not two: five numbers in two columns is three rows and an empty corner. */
  .stat-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tk-tab { padding-inline: 10px; }
  .tk-card { padding: 10px; }
  .tk-title { font-size: calc(14px * var(--text-scale)); }
  .tk-meta { gap: 2px 10px; }
  /* Both halves of a split row become full width rather than fighting over 390px. */
  .list-row-end { width: 100%; justify-content: flex-start; }
  .erq-quick, .fu-acts { width: 100%; }
  /* The window a double-click opens is the screen on a phone. */
  .mailwin-panel, .mailwin-panel.is-normal { width: 100vw; height: 100dvh; border-radius: 0; }
  /* A dialog's buttons stack instead of squeezing to nothing. */
  .dlg-foot { flex-wrap: wrap; }
  .dlg-foot .btn { flex: 1 1 140px; justify-content: center; }
}

/* ---- Anything driven by a finger, at any width (an iPad on its side too) ----
   The visual box is left alone — these add a transparent hit area around the
   small controls so they can be hit at all. */
@media (hover: none) and (pointer: coarse) {
  button.chip, a.chip, .chip--filter, .seg-item, .tk-tab, .org-twisty, .org-person-name, .tt-file-x,
  .mail-sync, .wa-filter, a.spend-chip { position: relative; }
  button.chip::after, a.chip::after, .chip--filter::after, .seg-item::after, .org-person-name::after,
  .tt-file-x::after, .mail-sync::after, .wa-filter::after, a.spend-chip::after {
    content: ""; position: absolute; inset-inline: -4px; inset-block: -8px;
  }
  .org-twisty::after { content: ""; position: absolute; inset: -12px; }
  .org-twisty::after { inset: -12px; }
  .tk-tab { min-height: 44px; }
  .btn, a.btn { min-height: 36px; }
  /* Nothing hover-only may be the only way to reach something. */
  .tk-card:hover { border-color: var(--border); }

  /*
   * Why every field here is at least 16px (Ali's iPhone, 2026-09-26).
   *
   * Writing an email "went outside the frame": the compose panel was cut off on the right and the screen
   * panned sideways. The panel's layout was never wrong — measured on a 390px iPhone it is exactly
   * 0..390 with no overflow anywhere. What moved was the SCREEN. iOS Safari zooms the page in whenever it
   * focuses a text field whose font-size is under 16px, and it never zooms back out. The editor focuses
   * the To field the moment it opens, that field was 14px, so Safari zoomed to 16/14 — about 14% — and
   * from then on a 390px-wide fixed panel no longer fit the 341px the screen was showing.
   *
   * Every field in the app was 14px (some 13.5px, the size select 12px), so this happened on every search
   * box, every filter and every date field, not only in mail. The floor is only applied to a finger, so
   * the desk keeps its denser fields; `max()` keeps it a floor when he picks a larger text size.
   */
  html:root body :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
    textarea, select, [contenteditable="true"]) {
    font-size: max(16px, calc(14px * var(--text-scale)));
  }
  /* 16px inside a 26–30px control has nowhere to sit; these are the three that were built shorter. */
  .ed-select, .mtg-project-pick select, .mtg-mic .card-head select { min-height: 34px; }
}

/* ---- The window over the page (2026-09-27) -----------------------------
 * "ma bde redirection, eno bnafes screen dal" — opening a mail or a task from
 * Follow-ups must not throw him out of the list. Same shape as the meeting
 * window: three sizes, no backdrop, and minimised it is a pill. It sits one
 * layer above that window's z-index so a mail opened during a meeting is on
 * top of the meeting, not behind it.
 */
.popwin {
  position: fixed; z-index: 46; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .34);
}
.popwin-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.popwin-title { font-weight: 650; min-width: 0; }
.popwin-acts { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.popwin-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
/* The row of things he can do with what is open: wraps rather than scrolls sideways. */
.popwin-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.popwin.is-med { inset-inline-end: 18px; bottom: 18px; width: min(560px, calc(100vw - 32px)); height: min(720px, 80dvh); }
.popwin.is-full { inset: 12px; width: auto; height: auto; }
.popwin.is-min { inset-inline-end: 18px; bottom: 18px; width: auto; max-width: calc(100vw - 32px); border-radius: 999px; }
.popwin.is-min .popwin-body { display: none; }
.popwin.is-min .popwin-head { border-bottom: 0; background: var(--surface); cursor: pointer; padding-inline: 14px; }
/* Draggable by the header (2026-09-29): each kept landing on top of the other. Both windows, same rule. */
@media (min-width: 601px) {
  .popwin.is-med .popwin-head, .mtgwin.is-med .mtgwin-head { cursor: grab; touch-action: none; }
}
.popwin.is-dragging .popwin-head, .mtgwin.is-dragging .mtgwin-head { cursor: grabbing; }
.popwin.is-dragging, .mtgwin.is-dragging { user-select: none; transition: none; }
/* Once he has moved it, its own left/top wins over the bottom-right anchor. */
.popwin.is-med.is-placed, .mtgwin.is-med.is-placed { inset-inline-end: auto; bottom: auto; }

@media (max-width: 600px) {
  /* On a phone it is the width of the screen and clears the tab bar, like the meeting window. */
  .popwin.is-med { inset-inline: 8px; width: auto; bottom: calc(var(--tabbar-h) + var(--safe-b) + 8px); height: min(72dvh, 620px); }
  .popwin.is-full { inset: 0; border-radius: 0; border: 0; }
  .popwin.is-full .popwin-body { padding-bottom: calc(var(--safe-b) + 12px); }
  .popwin.is-min { inset-inline-end: 8px; bottom: calc(var(--tabbar-h) + var(--safe-b) + 8px); }
}

/* The card title opens a window now instead of following a link, but it must still read and behave as
   the title of the card, not as a control. */
.tk-title--btn {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit;
  text-align: start; cursor: pointer; width: 100%; min-width: 0;
}
.tk-title--btn:hover { text-decoration: underline; }

/* What to look twice at on an approval card — above the buttons, never in place of them. */
.erq-flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.erq-flags:empty { display: none; }
.erq-flag { border: 0; font: inherit; cursor: pointer; }

/* ---- Window controls (2026-09-28) --------------------------------------
 * "ghayer hol icons la ykuno metel screenshot" — the meeting and pop-out
 * windows now carry the three controls every desktop window has: minimise,
 * restore, close, with close going red under the pointer. Square, flush and
 * edge to edge, because that is what makes them read as a title bar rather
 * than as three more buttons in the app.
 */
.winbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 30px; padding: 0; margin: 0; flex: 0 0 auto;
  background: none; border: 0; border-radius: 0; color: var(--text-muted); cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.winbtn svg { width: 16px; height: 16px; }
.winbtn:hover { background: color-mix(in srgb, currentColor 12%, transparent); color: var(--text); }
.winbtn:focus-visible { outline: 2px solid var(--focus, #2563EB); outline-offset: -2px; }
/* The one control that is destructive is the one that looks it, and only on approach. */
.winbtn--close:hover, .winbtn--close:focus-visible { background: #e81123; color: #fff; }

/* The controls sit flush in the corner of the bar, not inset like toolbar buttons. Dropping the head's
   end padding is enough on its own — a negative margin as well pushed the close button 10px past the
   window's own edge, where `overflow: hidden` clipped it (measured on a 390px phone, 2026-09-28). */
.mtgwin-acts, .popwin-acts { gap: 0; }
.mtgwin-head, .popwin-head { padding-inline-end: 0; }
/* Minimised, the window is a pill — square corners on the last control would break it. */
.mtgwin.is-min .winbtn:last-child, .popwin.is-min .winbtn:last-child { border-end-end-radius: 999px; border-start-end-radius: 999px; }

@media (max-width: 600px) {
  /* A finger needs more than a pointer does. */
  .winbtn { width: 46px; height: 38px; }
}

/* ---- Chase on WhatsApp (2026-09-27) ------------------------------------
 * The reminder is editable in place, because he changes the wording before
 * it goes — and it only ever goes on his own Send plus a confirmation.
 */
.chase-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: .92em; }
/* "It has gone" — quiet, green, beside the button rather than replacing it. */
.chase-sent { display: inline-flex; align-items: center; gap: 4px; color: var(--success); font-size: .9em; }
.chase-text {
  width: 100%; min-height: 96px; resize: vertical; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-2); color: inherit; font: inherit; line-height: 1.5;
}

/* ---- Finance (2026-09-27) ----------------------------------------------
 * Supplier money. The amount is the thing the eye should land on, so it sits
 * right-aligned and heavier than the name; everything qualifying it is small
 * and grey underneath. Nothing here is coloured green: a figure on this page
 * is only ever certain when SAP is connected, and the page says so in words.
 */
/* A supplier row opens their report, so it is a button — but it must still read as a card, not a control. */
.fin-row--open {
  width: 100%; text-align: start; font: inherit; color: inherit; cursor: pointer;
  border: 1px solid var(--border);
}
.fin-row--open:hover { background: var(--surface-2); }
.fin-row--open .icon-dir { color: var(--text-muted); flex: 0 0 auto; }
/* "Open report", beside the amount — the affordance has to be where his eye already is. */
/* The search above the supplier list: a supplier's name, or an item, to see who sells it. */
.fin-find { flex: 1 1 260px; min-width: 160px; max-width: 420px; }
.sapset-form .field { margin-top: 6px; }
.sapset-form input { width: 100%; }
.fin-row-open { flex: 0 0 auto; color: var(--accent, #1a73e8); white-space: nowrap; }
.fin-row--open:hover .fin-row-open { text-decoration: underline; }
@media (max-width: 560px) { .fin-row-open { display: none; } }
.fin-row-top { display: flex; align-items: baseline; gap: 12px; }
.fin-row-top .grow { min-width: 0; }
.fin-row-top strong { overflow-wrap: anywhere; }
.fin-amount { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; flex: none; }
.fin-amount--warn { color: var(--danger, #b4232a); }
.fin-late { color: var(--danger, #b4232a); }
.fin-row-meta { overflow-wrap: anywhere; }
/* Every file in the conversation, under the summary — so a file is never hunted through forty bubbles. */
.mail-files { margin: 8px var(--s3); padding: 8px 12px; }
.mail-files > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-size: calc(13px * var(--text-scale)); }
.mail-files > summary::-webkit-details-marker { display: none; }
.mail-files > summary::after { content: "▾"; margin-inline-start: auto; color: var(--text-faint); }
.mail-files[open] > summary::after { content: "▴"; }
.mail-files-body { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
/* The same fold around ONE message's own files, on a phone only. */
.mail-atts-fold { padding: 4px var(--s3) 0; }
.mail-atts-fold > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; padding: 6px 0; font-size: calc(13px * var(--text-scale)); color: var(--text-muted); }
.mail-atts-fold > summary::-webkit-details-marker { display: none; }
.mail-atts-fold > summary::after { content: "▾"; margin-inline-start: auto; color: var(--text-faint); }
.mail-atts-fold[open] > summary::after { content: "▴"; }
.mail-atts-fold .icon { width: 15px; height: 15px; }
/* On a phone the message header squeezed "a.magdi" down to "a" over "T." on two lines — the reply icons
   beside it would not give up a pixel. The name gets the room and ellipsises instead. */
@media (max-width: 760px) {
  .thread-head-toggle { padding: 8px var(--s2); gap: var(--s2); }
  .thread-who { flex: 1 1 auto; min-width: 0; }
  .thread-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .thread-at { font-size: calc(11.5px * var(--text-scale)); }
  .thread-acts { gap: 0; }
  .thread-acts .btn { width: 30px; min-width: 30px; padding: 0; }
}
/* Two lines per file: its name, then who sent it and when — neither one squeezing the other. */
.mail-files .mail-att-lines { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; flex: 1 1 auto; }
.mail-files .mail-att-name { max-width: 100%; }
.mail-files .mail-att-who { max-width: 100%; }
.fin-note { border-inline-start: 3px solid var(--warn, #b8860b); }
/* Folded to one line: the explanation is worth having, not worth a banner above every visit. */
.fin-nosap { padding: 8px 12px; }
.fin-nosap > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-size: calc(13px * var(--text-scale)); }
.fin-nosap > summary::-webkit-details-marker { display: none; }
.fin-nosap > summary::after { content: "▾"; margin-inline-start: auto; color: var(--text-faint); }
.fin-nosap[open] > summary::after { content: "▴"; }
.fin-nosap[open] > summary { margin-bottom: 8px; }
.fin-sched-line {
  display: flex; align-items: baseline; gap: 10px;
  padding: 6px 0; border-top: 1px solid var(--line, rgba(128, 128, 128, 0.18));
}
.fin-sched-line .grow { min-width: 0; overflow-wrap: anywhere; }
.fin-sched-line .num { font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
.stat-value.is-muted, .is-muted { opacity: 0.55; }

@media (max-width: 560px) {
  /* The amount keeps its own line rather than squeezing a long Arabic supplier name to one word per row —
     the collapse that .tk-card's grid caused on the ticket board (2026-09-24). */
  .fin-row-top { flex-wrap: wrap; }
  .fin-row-top .grow { flex: 1 1 100%; }
}

/* ==========================================================================
   Milou by voice (2026-10-01) — full screen, black, the orb in the middle, the
   way ChatGPT's voice mode looks (he sent a screenshot of it). Dark in both
   themes on purpose: it is a moment, not a page.
   ========================================================================== */
html.mv-open { overflow: hidden; }
/* Toasts stay readable over the voice screen, but at the TOP: at the bottom the "Install app" toast sat
   exactly on the Confirm / Cancel buttons of a read-back (seen in a 412px screenshot, 2026-10-01). */
html.mv-open #toasts {
  z-index: 1200; bottom: auto; top: calc(76px + env(safe-area-inset-top, 0px));
  inset-inline: 0; margin-inline: auto; max-width: min(560px, calc(100vw - 32px));
}
.mv {
  --lvl: 0;
  position: fixed; inset: 0; z-index: 1100;
  display: flex; flex-direction: column;
  background: #000; color: #f5f7fb;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 16px calc(16px + var(--safe-b));
  animation: mv-in .18s ease-out;
}
.mv--leaving { animation: mv-out .18s ease-in forwards; }
@keyframes mv-in { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
@keyframes mv-out { to { opacity: 0; } }
.mv-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mv-name { font-weight: 600; letter-spacing: .02em; opacity: .85; }
.mv-corner {
  display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: #262626; color: #fff; text-decoration: none;
}
.mv-corner:hover, .mv-corner:focus-visible { background: #333; }
.mv-corner .icon { width: 22px; height: 22px; }
.mv-stage {
  /* "safe": when a long reply plus a read-back is taller than the screen, overflow goes DOWN where it can
     be scrolled to, never above the top where the orb and the first lines would be unreachable. */
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; justify-content: safe center;   /* the first line is for browsers without "safe" */
  gap: 14px; text-align: center; overflow-y: auto; padding: 12px 0;
}
.mv-orb {
  position: relative; flex: none; width: min(56vw, 260px); aspect-ratio: 1; border-radius: 50%; border: 0; padding: 0;
  overflow: hidden; cursor: pointer; background: #5b7fe6;
  transform: scale(calc(1 + var(--lvl) * .14));
  transition: transform .08s linear, width .28s ease;
  box-shadow: 0 0 calc(20px + var(--lvl) * 70px) rgba(110, 150, 255, calc(.18 + var(--lvl) * .4));
}
.mv-orb:focus-visible { outline: 3px solid #9db7ff; outline-offset: 6px; }
.mv-orb-sky {
  position: absolute; inset: 0;
  background: linear-gradient(170deg, #4f72e3 0%, #5c80ea 34%, #a9bdf5 58%, #eef2ff 72%, #b9c8f6 100%);
}
.mv-orb-cloud {
  position: absolute; width: 150%; height: 70%; left: -25%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,.55) 45%, rgba(255,255,255,0));
  filter: blur(12px); opacity: .85;
}
.mv-orb-cloud--a { top: 34%; animation: mv-drift 9s ease-in-out infinite alternate; }
.mv-orb-cloud--b { top: 58%; opacity: .6; animation: mv-drift 13s ease-in-out infinite alternate-reverse; }
@keyframes mv-drift { from { transform: translateX(-12%) rotate(-8deg); } to { transform: translateX(12%) rotate(-4deg); } }
.mv[data-phase="thinking"] .mv-orb-cloud { animation-duration: 2.4s, 3.2s; }
.mv[data-phase="thinking"] .mv-orb { animation: mv-pulse 1.4s ease-in-out infinite; }
.mv[data-phase="muted"] .mv-orb { filter: saturate(.35) brightness(.7); }
.mv[data-phase="idle"] .mv-orb { filter: saturate(.75) brightness(.9); }
.mv[data-phase="connecting"] .mv-orb { opacity: .6; }
@keyframes mv-pulse { 50% { transform: scale(.94); } }
@media (prefers-reduced-motion: reduce) {
  .mv-orb-cloud, .mv[data-phase="thinking"] .mv-orb { animation: none; }
  .mv-orb { transition: none; }
}
.mv-status { margin: 4px 0 0; font-size: calc(14px * var(--text-scale)); color: #a8b0c2; min-height: 1.4em; }
.mv-who { min-height: 0; }
.mv-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px;
  background: #1d2a44; color: #c9d6ff; font-size: calc(12.5px * var(--text-scale));
}
.mv-chip--warn { background: #3a2a10; color: #ffd28a; }
.mv-caption, .mv-reply { margin: 0; max-width: 640px; width: 100%; overflow-wrap: anywhere; white-space: pre-wrap; }
.mv-caption { color: #8d96a8; font-size: calc(15px * var(--text-scale)); }
.mv-reply { color: #f5f7fb; font-size: calc(17px * var(--text-scale)); line-height: 1.55; }
.mv-notice { margin: 0; max-width: 560px; color: #ffd28a; font-size: calc(13px * var(--text-scale)); }
.mv-pending {
  width: 100%; max-width: 560px; text-align: start; background: #111827; border: 1px solid #2b3a5c; border-radius: 16px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
}
.mv-pending-head { color: #9db7ff; font-weight: 600; font-size: calc(13px * var(--text-scale)); display: flex; align-items: center; gap: 4px; }
/* Each line of the card opens the whole thing, large ("kabbir", 2026-10-02). */
.mv-pending-row {
  margin: 0; color: #e7ecf7; overflow-wrap: anywhere; text-align: start; font: inherit; background: transparent;
  border: 1px solid transparent; border-radius: 10px; padding: 6px 8px; margin-inline: -8px; cursor: pointer;
}
.mv-pending-row:hover, .mv-pending-row:focus-visible { background: #18223a; border-color: #2b3a5c; outline: none; }
.mv-pending-open {
  display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 999px; padding: 6px 12px; min-height: 32px;
  background: #1d2a44; color: #c9d6ff; font: inherit; font-size: calc(12.5px * var(--text-scale)); cursor: pointer;
}
.mv-pending-open:hover, .mv-pending-open:focus-visible { background: #263760; color: #fff; }
.mv-pending-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mv-btn-ghost { background: transparent; color: #e7ecf7; border-color: #3a4560; }
.mv-bar { display: flex; align-items: center; gap: 10px; }
.mv-ask {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 6px; height: 56px; padding-inline: 18px 6px;
  border-radius: 999px; background: #262626;
}
.mv-input {
  flex: 1 1 0; min-width: 0; background: transparent; border: 0; outline: 0; color: #fff;
  font-size: max(16px, calc(16px * var(--text-scale)));
}
/* The global field rule sets color: var(--text), which in the light theme is navy — invisible on the
   near-black pill. Everything the field looks like is restated here, at the specificity that wins. */
html:root body .mv-input, html:root body .mv-input:focus, html:root body .mv-input:focus-visible {
  background: transparent; border: 0; box-shadow: none; outline: none;
  color: #fff; caret-color: #fff; height: auto; padding: 0; min-height: 0;
}
.mv .mv-btn-ghost:hover, .mv .mv-btn-ghost:active { background: #1f2937; color: #fff; }
.composer-voice { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 4px; }
.composer-voice[hidden] { display: none; }
/* The focus ring belongs to the whole pill, not to a box drawn inside it. */
.mv-ask:focus-within { box-shadow: 0 0 0 2px #4f72e3; }
.mv-input::placeholder { color: #9aa0aa; }
.mv-send { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: #cfd6e4; display: inline-grid; place-items: center; cursor: pointer; }
.mv-round {
  flex: none; width: 56px; height: 56px; border-radius: 50%; border: 0; display: inline-grid; place-items: center;
  background: #262626; color: #fff; cursor: pointer;
}
.mv-round .icon, .mv-send .icon { width: 22px; height: 22px; }
.mv-round.is-off { background: #3b1d1d; color: #ffb4b4; }
.mv-round--close { background: #fff; color: #000; }
.mv-passage {
  margin: 0; padding: 12px 14px; border-inline-start: 3px solid var(--accent, #2563eb); background: var(--surface-2, rgba(128,128,128,.08));
  border-radius: 8px; line-height: 1.7; font-size: calc(15px * var(--text-scale));
}
.mv-train-clock { font-variant-numeric: tabular-nums; }

/* ---- 2026-10-02 night: the conversation as a chat, the circle small in the top bar ---- */
.mv-log { display: none; }
.mv-orb--mini { display: none; width: 40px; flex: none; box-shadow: 0 0 calc(6px + var(--lvl) * 24px) rgba(110, 150, 255, calc(.2 + var(--lvl) * .45)); }
.mv-orb--mini .mv-orb-cloud { filter: blur(4px); }
.mv-view { min-width: 40px; padding: 0 10px; display: inline-grid; place-items: center; }
.mv-view .icon { width: 18px; height: 18px; }
.mv[data-view="chat"] .mv-orb--mini { display: block; }
/* The board and draft rules shrink ".mv-orb" to 96/64 px — never the small one in the top bar. */
.mv[data-view] .mv-mid .mv-orb.mv-orb--mini { width: 40px; }
.mv[data-view="chat"] .mv-name { display: none; }
.mv[data-view="chat"] .mv-stage > .mv-orb, .mv[data-view="chat"] .mv-stage > .mv-caption, .mv[data-view="chat"] .mv-stage > .mv-reply { display: none; }
.mv[data-view="chat"] .mv-stage { justify-content: flex-start; align-items: stretch; gap: 8px; padding: 6px 0 8px; overflow: hidden; }
.mv[data-view="chat"] .mv-status { margin: 0; text-align: center; font-size: calc(12.5px * var(--text-scale)); }
.mv[data-view="chat"] .mv-who { text-align: center; }
.mv[data-view="chat"] .mv-notice, .mv[data-view="chat"] .mv-pending { align-self: center; flex: none; }
.mv[data-view="chat"] .mv-log {
  display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  width: 100%; max-width: 760px; margin: 0 auto; padding: 4px 2px; scroll-padding-bottom: 12px;
}
.mv-msg {
  max-width: 85%; padding: 9px 13px; border-radius: 16px; line-height: 1.55; font: inherit; font-size: calc(15.5px * var(--text-scale));
  white-space: pre-wrap; overflow-wrap: anywhere; text-align: start; border: 0; unicode-bidi: plaintext;
}
.mv-msg--me { align-self: flex-end; background: #1d2a44; color: #eef3ff; border-end-end-radius: 6px; }
.mv-msg--milou { align-self: flex-start; background: #161a22; color: #f5f7fb; border-end-start-radius: 6px; }
.mv-msg--card { align-self: stretch; max-width: none; background: #111827; color: #dfe6f5; border: 1px solid #2b3a5c; cursor: pointer; }
.mv-msg--card:hover, .mv-msg--card:focus-visible { border-color: #4f72e3; outline: none; }
.mv-msg--live { opacity: .6; font-style: italic; }
.mv-msg--typing { letter-spacing: .2em; animation: mv-typing 1.2s ease-in-out infinite; }
@keyframes mv-typing { 50% { opacity: .35; } }
/* What Milou is doing while it thinks — "Searching your email…" — with a dot breathing in time with the sound. */
.mv-msg--step { display: inline-flex; align-items: center; gap: 10px; color: #b9c4dc; font-size: .94em; font-style: italic; }
.mv-msg--step::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #7c9cff;
  box-shadow: 0 0 10px rgba(124, 156, 255, .7); animation: mv-step-dot 1.8s ease-in-out infinite;
}
@keyframes mv-step-dot { 0%, 100% { transform: scale(.7); opacity: .45; } 30% { transform: scale(1.15); opacity: 1; } }
.mv-msg--past { opacity: .78; }
.mv-msg--error { background: #3b1d1d; color: #ffb4b4; }
.mv-msg--done { background: #12301f; color: #c8f5d8; }
.mv-msg--tap { font-size: calc(13px * var(--text-scale)); padding: 5px 11px; }
.mv-msg-who { display: block; margin-bottom: 2px; font-size: calc(11.5px * var(--text-scale)); font-weight: 600; color: #9db7ff; font-style: normal; }
.mv[data-phase="standby"] .mv-orb { filter: saturate(.4) brightness(.75); }
@media (prefers-reduced-motion: reduce) { .mv-msg--typing, .mv-msg--step::before { animation: none; } }
/* ---- 2026-10-02: speed, the large draft, the meeting board, the wake word ---- */
.mv-mid { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.mv-speed {
  min-width: 52px; height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: #262626; color: #fff;
  font: inherit; font-weight: 650; font-variant-numeric: tabular-nums; cursor: pointer;
}
.mv-speed:hover, .mv-speed:focus-visible { background: #333; outline: none; box-shadow: 0 0 0 2px #4f72e3; }
/* The speaker test next to the speed chip: an icon, so the row stays short on a phone (2026-10-04). */
.mv-test { min-width: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.mv-test[disabled] { opacity: .55; cursor: progress; }
/* While a board or a draft is open the circle steps aside: small, and the stage above the panel shrinks. */
.mv[data-board] .mv-orb, .mv[data-draft] .mv-orb { width: 96px; box-shadow: 0 0 calc(8px + var(--lvl) * 30px) rgba(110, 150, 255, calc(.18 + var(--lvl) * .4)); }
.mv[data-board] .mv-orb-cloud, .mv[data-draft] .mv-orb-cloud { filter: blur(5px); }
.mv[data-board] .mv-stage, .mv[data-draft] .mv-stage { flex: 0 1 auto; justify-content: flex-start; gap: 6px; padding: 4px 0 10px; max-height: 42vh; }
.mv[data-board] .mv-caption, .mv[data-draft] .mv-caption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: calc(13px * var(--text-scale)); }
.mv[data-board] .mv-reply, .mv[data-draft] .mv-reply { font-size: calc(15px * var(--text-scale)); max-height: calc(3 * 1.55em); overflow-y: auto; overscroll-behavior: contain; }
.mv[data-draft] .mv-pending { display: none; }
@media (max-width: 600px) {
  .mv[data-board] .mv-orb, .mv[data-draft] .mv-orb { width: 64px; }
}
/* The panels carry their own dark tokens, so chips and buttons read right on the black screen in every theme. */
.mv-board, .mv-draft {
  color-scheme: dark;
  --surface: #0f1522; --surface-2: #161e2e; --surface-3: #1f2937; --border: #243049; --border-strong: #3a4560;
  --text: #f5f7fb; --text-muted: #a8b0c2; --text-faint: #8d96a8; --accent: #4f72e3; --accent-hover: #3f60cc; --accent-solid: #4f72e3; --accent-fg: #fff;
  --info: #60A5FA; --success: #22C55E; --warning: #F59E0B; --danger: #EF4444; --neutral: #94A3B8; --tint-alpha: .16; --focus: #9db7ff;
  color: var(--text); text-align: start;
}
.mv .chip { color: #dfe6f5; border-color: #2b3a5c; background: #172036; }
.mv .chip--danger { color: #ffb4b4; background: #3b1d1d; border-color: transparent; }
.mv .chip--ok { color: #a7f3c0; background: #12301f; border-color: transparent; }
.mv-board {
  flex: 1 1 auto; min-height: 0; width: 100%; max-width: 760px; margin: 0 auto 12px; display: flex; flex-direction: column; gap: 10px;
  background: #0b0f17; border: 1px solid #1f2a40; border-radius: 18px; padding: 12px;
}
.mv-board-head { flex: none; display: flex; align-items: center; gap: 8px; min-width: 0; }
.mv-board-title { flex: 1 1 auto; min-width: 0; font-weight: 650; font-size: calc(16px * var(--text-scale)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-board-role { font-weight: 400; color: var(--text-muted); }
.mv-board-counts { flex: none; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mv-board-note { margin: 0; color: var(--text-muted); font-size: calc(12.5px * var(--text-scale)); }
.mv-board-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; }
.mv-board-item {
  display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 10px 12px; text-align: start; font: inherit; color: inherit;
  background: var(--surface); border: 1px solid var(--border); border-inline-start: 3px solid var(--mvb-co, var(--info)); border-radius: 12px; cursor: pointer;
}
.mv-board-item:hover, .mv-board-item:focus-visible { border-color: #4f72e3; outline: none; }
.mv-board-item.is-late { --mvb-co: var(--danger); }
.mv-board-item.is-hold { --mvb-co: var(--neutral); opacity: .8; }
.mv-board-item-title { font-weight: 600; font-size: calc(15px * var(--text-scale)); overflow-wrap: anywhere; }
.mv-board-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--text-muted); font-size: calc(12.5px * var(--text-scale)); }
.mv-board-item-meta .chip { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mv-board-item-note { color: #c3cbe0; font-size: calc(13px * var(--text-scale)); overflow-wrap: anywhere; white-space: pre-wrap; }
.mv-board-late { color: #ffb4b4; font-weight: 600; }
.mv-draft {
  --draft-fs: 16px;
  flex: 1 1 auto; min-height: 0; width: 100%; max-width: 760px; margin: 0 auto 12px; display: flex; flex-direction: column;
  background: #0f1522; border: 1px solid #2b3a5c; border-radius: 18px; overflow: hidden;
}
.mv-draft-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; border-bottom: 1px solid #1f2a40; }
.mv-draft-title { flex: 1 1 auto; min-width: 0; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-draft-nav { display: inline-flex; align-items: center; gap: 2px; color: var(--text-muted); }
.mv-draft-icon {
  flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: transparent; color: #dfe6f5; cursor: pointer;
}
.mv-draft-icon:hover, .mv-draft-icon:focus-visible { background: #1f2937; outline: none; }
.mv-draft-icon[disabled] { opacity: .35; cursor: default; }
.mv-draft-meta {
  flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; margin: 0; padding: 10px 14px;
  border-bottom: 1px solid #1f2a40; font-size: calc(13px * var(--text-scale)); color: #a8b0c2; align-items: center;
}
.mv-draft-meta dt { white-space: nowrap; }
.mv-draft-meta dd { margin: 0; color: #e7ecf7; overflow-wrap: anywhere; min-width: 0; }
.mv-draft-body {
  flex: 1 1 auto; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px;
  font-size: calc(var(--draft-fs) * var(--text-scale)); line-height: 1.7; color: #f5f7fb; white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext;
}
/* Fields restated at a specificity that beats the global field rules (navy text on a pale field in the light theme). */
html:root body .mv textarea.mv-draft-body {
  width: 100%; height: auto; margin: 0; resize: none; border: 0; border-radius: 0; outline: none; box-shadow: none;
  background: transparent; color: #f5f7fb; caret-color: #fff; font-size: max(16px, calc(var(--draft-fs) * var(--text-scale)));
}
html:root body .mv textarea.mv-draft-body:focus { box-shadow: inset 0 0 0 2px #4f72e3; }
html:root body .mv .mv-draft-input, html:root body .mv .mv-draft-select {
  width: 100%; min-height: 38px; background: #161e2e; color: #f5f7fb; border: 1px solid #2b3a5c; border-radius: 8px; padding: 6px 10px;
  font-size: max(16px, calc(14px * var(--text-scale))); box-shadow: none;
}
html:root body .mv .mv-draft-input:focus, html:root body .mv .mv-draft-select:focus { border-color: #4f72e3; outline: none; }
.mv-draft-extra { flex: none; padding: 0 14px 10px; display: flex; flex-direction: column; gap: 8px; }
.mv-draft-warn { margin: 0; color: #ffd28a; font-size: calc(13px * var(--text-scale)); }
.mv-draft-quoted summary { cursor: pointer; color: #a8b0c2; font-size: calc(13px * var(--text-scale)); }
.mv-draft-quote {
  margin-top: 6px; max-height: 24vh; overflow-y: auto; padding: 8px 12px; border-inline-start: 3px solid #2b3a5c;
  color: #c3cbe0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: calc(13.5px * var(--text-scale));
}
.mv-draft-hint { flex: none; margin: 0; padding: 0 14px 8px; color: #8d96a8; font-size: calc(12px * var(--text-scale)); }
.mv-draft-foot { flex: none; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 10px 12px; border-top: 1px solid #1f2a40; background: #0b0f17; }
/* "kabbir": the draft fills the screen above the bar. */
/* width: auto — with width: 100% beside both insets the box kept the screen's full width from its left
   edge, and on a computer its Close and Shrink buttons sat off the right of the screen (caught in test). */
.mv[data-draft="large"] .mv-draft {
  position: absolute; z-index: 2; margin: 0; width: auto; max-width: none; --draft-fs: 20px;
  inset: calc(14px + env(safe-area-inset-top, 0px)) 16px calc(16px + var(--safe-b) + 66px);
}
@media (min-width: 1200px) { .mv[data-draft="large"] .mv-draft { inset-inline: calc((100vw - 1100px) / 2); } }
@media (max-width: 600px) {
  .mv-board, .mv-draft { border-radius: 14px; margin-bottom: 10px; }
  .mv-board { padding: 10px; }
  .mv-draft-meta { padding: 8px 12px; }
  .mv-draft-body { padding: 12px; }
  .mv-draft-foot .btn { flex: 1 1 120px; min-height: 44px; }
  .mv[data-draft="large"] .mv-draft {
    inset: 0 0 calc(16px + var(--safe-b) + 66px) 0; padding-top: env(safe-area-inset-top, 0px);
    border-radius: 0; border-inline: 0; border-top: 0; --draft-fs: 19px;
  }
}
/* Over the large draft a toast sits on its text — never on the header (Close) nor on the buttons (Confirm). */
html.mv-open.mv-draft-large #toasts { top: auto; bottom: calc(16px + var(--safe-b) + 66px + 130px); }
/* The draft is what waits for him: while it is open the board steps away, and comes back when it closes. */
.mv[data-draft] .mv-board { display: none; }
/* Settings › Milou voice: the ways to call Milou hands-free, one block per device, his own marked. */
.hf-way { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.hf-way--here { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.hf-way-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hf-way-head h3 { margin: 0; font-size: calc(15px * var(--text-scale)); flex: 1 1 auto; min-width: 0; }
.hf-way .mtg-steps { margin: 0; }
.hf-way .mtg-steps li { margin-bottom: 4px; line-height: 1.6; }
/* "How do I allow it?" inside the voice screen's notice, and the help dialog's steps. */
.mv-notice-btn {
  margin-inline-start: 8px; border: 0; border-radius: 999px; padding: 4px 12px; min-height: 30px; cursor: pointer;
  background: #3a2a10; color: #ffd28a; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px;
}
.mv-notice-btn:hover, .mv-notice-btn:focus-visible { background: #4a3714; outline: none; }
.perm-steps li { margin-bottom: 6px; line-height: 1.6; }
.perm-url { padding: 6px 10px; border-radius: 6px; background: var(--surface-2); font-size: calc(13px * var(--text-scale)); overflow-wrap: anywhere; }
/* The widget script, shown when the browser refuses the clipboard (iPhone widgets, 2026-10-02). */
.wd-code { width: 100%; min-height: 160px; font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; overflow: auto; }
/* A task opened from the board appears over the voice screen, not hidden behind it. */
html.mv-open .popwin--front { z-index: 1150; }
/* The Ask button says when it is listening for its name. */
.fab--wake::after {
  content: ""; position: absolute; top: 6px; inset-inline-end: 6px; width: 9px; height: 9px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 0 2px var(--surface, #fff); animation: wake-dot 2.4s ease-in-out infinite;
}
@keyframes wake-dot { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .fab--wake::after { animation: none; } }
/* ==========================================================================
   The checks under a purchase approval (2026-10-02): monthly orders, stock
   now, recipes, and what is attached. Read from the ERP, drawn as figures.
   ========================================================================== */
.erq-check-row > td { padding-top: 0; border-top: 0; background: var(--surface-2, rgba(128,128,128,.05)); }
.erq-checks { display: flex; flex-direction: column; gap: 6px; padding: 6px 4px 8px; }
.erq-chk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; font-size: calc(12.5px * var(--text-scale)); }
.erq-chk-label { color: var(--text-muted); min-width: 150px; display: inline-flex; align-items: center; gap: 4px; }
.erq-bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 24px; padding: 0 2px; }
.erq-bar { display: inline-block; width: 8px; min-height: 2px; border-radius: 2px 2px 0 0; background: var(--accent, #2563eb); opacity: .55; }
.erq-bar--this { opacity: 1; background: transparent; border: 1.5px dashed var(--accent, #2563eb); width: 7px; }
.erq-chk-chip { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: calc(11.5px * var(--text-scale)); border: 1px solid var(--border); white-space: nowrap; }
.erq-chk-chip.is-high { color: var(--danger, #dc2626); border-color: currentColor; }
.erq-chk-chip.is-low { color: var(--text-muted); }
.erq-chk-chip.is-ok { color: var(--success, #16a34a); border-color: currentColor; }
.erq-chk-chip.is-warn { color: var(--warning, #d97706); border-color: currentColor; }
.erq-places { display: inline-flex; gap: 10px; flex-wrap: wrap; }
.erq-place-group { display: inline-flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.erq-place { font-variant-numeric: tabular-nums; }
.erq-boms { display: inline-flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.erq-bom { padding: 1px 8px; border-radius: 6px; background: var(--surface-3, rgba(128,128,128,.12)); max-width: 100%; overflow-wrap: anywhere; }
.erq-doccheck { margin: 4px 0 10px; display: flex; flex-direction: column; gap: 6px; }
.erq-docverdict { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 10px; border-radius: 8px; border-inline-start: 3px solid var(--border); background: var(--surface-2, rgba(128,128,128,.06)); }
.erq-docverdict--ok { border-inline-start-color: var(--success, #16a34a); }
.erq-docverdict--warn { border-inline-start-color: var(--warning, #d97706); }
.erq-docverdict--danger { border-inline-start-color: var(--danger, #dc2626); color: var(--danger, #dc2626); }
.erq-doclist { display: flex; flex-direction: column; gap: 4px; }
.erq-docrow { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: calc(12.5px * var(--text-scale)); }
.erq-docrow .ellipsis { min-width: 0; }
.erq-doctype { flex: none; padding: 1px 8px; border-radius: 999px; font-size: calc(11px * var(--text-scale)); border: 1px solid var(--border); }
.erq-doctype--quotation { color: var(--success, #16a34a); border-color: currentColor; }
.erq-doctype--invoice, .erq-doctype--tax_invoice { color: var(--danger, #dc2626); border-color: currentColor; }
@media (max-width: 600px) { .erq-chk-label { min-width: 0; width: 100%; } }

/* The Assistant page's two sections, and who spoke a line. */
.chat-rail-tabs { margin-top: 8px; width: 100%; }
.chat-rail-tabs .seg-item { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.chat-rail-count { font-size: calc(11px * var(--text-scale)); opacity: .7; }
.avatar--milou { background: linear-gradient(135deg, #4f72e3, #a9bdf5); color: #fff; display: inline-grid; place-items: center; }
.avatar--milou .icon { width: 15px; height: 15px; }
.msg-speaker { display: flex; align-items: center; gap: 4px; font-size: calc(11.5px * var(--text-scale)); opacity: .75; margin-bottom: 2px; }

/* App orders, per brand — the courier company under measurement (Ali, 2026-10-03). */
.ord-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; }
.ord-kpi { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2, rgba(127,127,127,.07)); }
.ord-kpi-value { font-size: calc(21px * var(--text-scale)); font-weight: 650; line-height: 1.1; }
.ord-kpi-label { font-size: calc(11.5px * var(--text-scale)); opacity: .72; }
/* Red only where something is actually wrong: a cancellation, and a cancellation with no driver. */
.ord-kpi--bad .ord-kpi-value, .ord-bad { color: var(--danger, #dc2626); }
.ord-waiting { border-inline-start: 3px solid var(--warn, #d97706); }
.ord-wait-row { padding: 4px 0; border-top: 1px solid var(--line, rgba(127,127,127,.18)); }
.ord-table td, .ord-table th { white-space: nowrap; }
.ord-table td:nth-child(3), .ord-table td:last-child { white-space: normal; max-width: 220px; }
.ord-row--cancelled td { background: color-mix(in srgb, var(--danger, #dc2626) 7%, transparent); }
.ord-row--waiting td { background: color-mix(in srgb, var(--warn, #d97706) 10%, transparent); }
.ord-row--late td { background: color-mix(in srgb, var(--danger, #dc2626) 5%, transparent); }
.ord-row--click { cursor: pointer; }
.ord-row--detail td { background: var(--surface-2, rgba(127,127,127,.06)); }
.ord-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 6px 2px; }
.ord-bill-line, .ord-step { gap: 8px; align-items: baseline; padding: 2px 0; }
.ord-bill-sum { border-top: 1px solid var(--line, rgba(127,127,127,.18)); opacity: .8; }
.stack-0 { display: flex; flex-direction: column; line-height: 1.25; }
.ord-sla-row { padding: 4px 0; border-top: 1px solid var(--line, rgba(127,127,127,.14)); }
.ord-pager { padding-top: 6px; }
/* The one switch in the system that sends without him. It looks like what it is. */
/* "12 messages" is a button: it lists the conversation so one message can be jumped to. */
.mail-count-btn { cursor: pointer; border: 1px solid var(--line, rgba(127,127,127,.25)); }
.mail-count-btn:hover { background: var(--surface-2, rgba(127,127,127,.12)); }
/* His emoji on an email. Faint until he puts one on, so the row is not noisy with offers. */
.mail-react { background: none; border: 1px solid transparent; border-radius: 999px; padding: 1px 6px; font-size: 15px; line-height: 1.4; cursor: pointer; opacity: .45; }
.mail-react:hover { opacity: 1; background: var(--surface-2, rgba(127,127,127,.1)); }
.mail-react--on { opacity: 1; border-color: var(--line, rgba(127,127,127,.3)); background: var(--surface-2, rgba(127,127,127,.1)); }
/* [Draft] in the list is a button now: it opens the conversation and scrolls to the unsent reply. */
.mail-draft-btn { background: none; border: 0; padding: 0 4px 0 0; font: inherit; color: inherit; cursor: pointer; }
.mail-draft-btn:hover { text-decoration: underline; }
.thread-flash { animation: thread-flash 1.6s ease-out; }
@keyframes thread-flash { from { background: color-mix(in srgb, var(--accent, #3b82f6) 22%, transparent); } to { background: transparent; } }
/* The stop-everything switch: it should look like the thing it is, and unmistakable once thrown. */
.halt-card--on { border-color: var(--danger, #dc2626); background: color-mix(in srgb, var(--danger, #dc2626) 8%, transparent); }
/* Our own delays: a different colour from the courier's, because they go nowhere near them. */
.ord-ours { border-inline-start: 3px solid var(--accent, #3b82f6); }
.ord-auto { padding: 10px; border-radius: 10px; border: 1px dashed var(--line, rgba(127,127,127,.3)); }
.ord-auto--on { border-style: solid; border-color: var(--warn, #d97706); background: color-mix(in srgb, var(--warn, #d97706) 7%, transparent); }
/* A phone and an iPad: the table scrolls sideways on its own, the filters stack, and nothing is cut.
   (Ali, 2026-10-03: "t2akkad mobile view tkoun mniha, al iPad w al iPhone".) */
@media (max-width: 1024px) {
  .ord-detail { grid-template-columns: 1fr; }
  .ord-kpis { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
}
@media (max-width: 600px) {
  .ord-filters { gap: 6px; }
  .ord-filters select, .ord-filters input[type="date"] { flex: 1 1 140px; min-width: 0; }
  .ord-kpi-value { font-size: calc(17px * var(--text-scale)); }
  .ord-table { font-size: calc(12.5px * var(--text-scale)); }
  .ord-table td, .ord-table th { padding-inline: 6px; }
}

/*
 * A minimised dialog, last word (2026-10-05).
 *
 * Individual dialogs set their own width with the same specificity as the minimised rule —
 * `dialog.dlg.erq-dlg` is 1320px — and being later in the file they won, so the ERP window
 * "minimised" to a 1320px-wide bar. These live at the end so nothing can out-order them.
 */
dialog.dlg.dlg--min {
  inset: auto 16px 16px auto; width: min(340px, calc(100vw - 32px)); max-width: none;
  height: auto; max-height: none; border-radius: 12px;
}
dialog.dlg.dlg--min .dlg-inner { max-height: none; height: auto; }
dialog.dlg.dlg--full { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; inset: 0; }
@media (max-width: 600px) { dialog.dlg.dlg--min { inset: auto 8px 8px auto; width: calc(100vw - 16px); } }
/* The author's own ✕, hidden once the window controls have put one in the corner. It is only ever
   marked from inside addWindowControls, so a dialog without the controls keeps its own button. */
.dlg-own-close { display: none !important; }
/* Asking about one email thread (2026-10-06): a short conversation beside the mail, not a page. */
.ask-log { display: flex; flex-direction: column; gap: 10px; max-height: 46vh; overflow: auto; padding: 4px 2px; }
.ask-turn { display: flex; flex-direction: column; gap: 2px; }
.ask-turn--user { align-items: flex-end; }
.ask-turn--user > div { background: var(--accent); color: var(--accent-fg); border-radius: 12px 12px 2px 12px; padding: 7px 11px; max-width: 86%; }
.ask-turn--assistant > div { background: var(--surface-2); border-radius: 12px 12px 12px 2px; padding: 7px 11px; max-width: 94%; }
.ask-turn > div p { margin: 0 0 6px; }
.ask-turn > div p:last-child { margin-bottom: 0; }
.ask-who { font-size: 11px; color: var(--text-muted); }
.ask-box { flex: 1; min-height: 44px; resize: vertical; }
/* A minimised window sits in the bottom corner and must stay there — nothing is above it to push
   it, and the page behind it must remain reachable (2026-10-05: "hott taht 3a janab"). */
dialog.dlg.dlg--min { position: fixed; margin: 0; }
/* Logistics settings as sections with a menu (2026-10-07: "ktiir kbir w bidaye3"). */
.lset .section-nav-item { gap: 10px; width: 100%; background: none; border: 0; border-inline-start: 2px solid transparent; font: inherit; text-align: start; cursor: pointer; }
.lset .section-nav-item svg { width: 16px; height: 16px; flex: 0 0 auto; }
.lset .settings-content { max-width: 1000px; gap: var(--s3); }
.lset .settings-content > .card { padding: var(--s4); }
.lset .settings-content > .card .card-head h2 { font-size: calc(15px * var(--text-scale)); }
@media (max-width: 899px) {
  .lset .lset-nav { flex-direction: row; overflow-x: auto; position: static; gap: 4px; padding-bottom: 4px; }
  .lset .section-nav-item { width: auto; white-space: nowrap; border-inline-start: 0; border-bottom: 2px solid transparent; }
  .lset .section-nav-item[aria-current="page"] { border-inline-start: 0; border-bottom-color: var(--accent); }
}

/* A request's links: the MR a PO came from, the POs an MR produced (2026-10-07). */
.erq-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--border); }
.erq-links-label { font-size: calc(12.5px * var(--text-scale)); color: var(--text-muted); }
.erq-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: calc(13px * var(--text-scale));
}
.erq-link:hover { border-color: var(--accent); color: var(--accent); }
.erq-link svg { width: 14px; height: 14px; }

/* "Ask AI" about what is on screen (2026-10-07): the ✨ beside — □ ×, and the "Looking at" chip. */
.winbtn--ai { color: var(--accent); }
.winbtn--ai:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
dialog.dlg--ai .dlg-head { padding-inline-end: calc(var(--s5) + 182px); }
dialog.dlg--ai.dlg--nomin .dlg-head { padding-inline-end: calc(var(--s5) + 140px); }
dialog.dlg--ai.dlg--min .dlg-head { padding-inline-end: 178px; }
dialog.dlg--ai.dlg--min .dlg-restore { inset-inline-end: 178px; }
.askai-ctx {
  display: flex; align-items: center; gap: 8px; margin: 0 var(--s4) var(--s2); padding: 6px 6px 6px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: var(--r);
  background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--text); font-size: calc(13px * var(--text-scale));
}
.askai-ctx[hidden] { display: none; }
.askai-ctx > svg { width: 15px; height: 15px; color: var(--accent); flex: 0 0 auto; }
.wa-head-ai { color: var(--accent); }

/* Floating windows (2026-10-07): moved by the title bar, resized from the corner, side by side. */
dialog.dlg--float, dialog.dlg.dlg--float, dialog.dlg.erq-dlg.dlg--float, dialog.dlg.viewer.dlg--float { position: fixed; margin: 0; inset: auto; max-width: none !important; max-height: none !important; min-width: 320px; min-height: 160px; resize: both; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.45); }
dialog.dlg--float .dlg-inner { height: 100%; display: flex; flex-direction: column; min-height: 0; }
dialog.dlg--float .dlg-body { flex: 1 1 auto; max-height: none; min-height: 0; }
dialog.dlg--float .viewer-stage { height: auto; flex: 1 1 auto; }
dialog.dlg--float .dlg-head, dialog.dlg--float .pane-head, dialog.dlg--float .sheet-head { cursor: move; user-select: none; }
dialog.dlg .dlg-head, dialog.dlg .pane-head { cursor: grab; }
dialog.dlg .dlg-head :is(button, a, input), dialog.dlg .pane-head :is(button, a, input) { cursor: pointer; }
html.is-dragging-win, html.is-dragging-win * { cursor: move !important; user-select: none !important; }
/* While dragging, a frame or PDF under the pointer would swallow the moves. */
html.is-dragging-win iframe { pointer-events: none; }
/* Maximised and minimised beat the place he dragged it to. */
dialog.dlg--float.dlg--full { left: 0 !important; top: 0 !important; width: 100vw !important; height: 100dvh !important; resize: none; }
dialog.dlg--float.dlg--min { left: auto !important; top: auto !important; right: 16px !important; bottom: 16px !important; width: min(340px, calc(100vw - 32px)) !important; height: auto !important; min-height: 0; resize: none; }
@media (max-width: 700px) { dialog.dlg--float { resize: none; } }

/* Settings on a phone: a small heading per group, and each section a row with its icon (2026-10-07). */
.settings-group-label { margin: 14px 4px 2px; font-size: calc(11px * var(--text-scale)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.settings-acc-list > .settings-group-label:first-child { margin-top: 0; }
.settings-acc > summary { display: flex; align-items: center; gap: 10px; }
.settings-acc-icon { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; }
/* The three themes side by side, same size (2026-10-07: they wrapped two and one, unevenly spaced). */
.theme-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.theme-card .theme-preview { max-width: 100%; }
/* A link row inside a phone's settings section stays a row: icon, words, chevron. */
.settings-acc .card.list-row { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 12px; }
.settings-acc .card.list-row .list-row-main { min-width: 0; flex: 1 1 0; }

/* ======================================================================================================
 * Touch and the Milou iOS app (Ali, 2026-10-07: "zabet mobile UX/UI… design Apple iOS… kel system bdo
 * rteb view men jdid", iPhone and iPad).
 * ==================================================================================================== */

/* Windows are a desktop idea: on a finger there is only close. The ✦, minimise and maximise are gone, and
   the head no longer reserves room for them. */
html[data-touch] .dlg-win .winbtn:not(.winbtn--close):not(.winbtn--ai) { display: none; }
html[data-touch] dialog .dlg-head, html[data-touch] dialog.dlg--nomin .dlg-head { padding-inline-end: calc(var(--s4) + 48px); }
html[data-touch] .dlg-win { top: 8px; inset-inline-end: 8px; }

/* The assistant sheet: the conversation scrolls inside, the composer stays at the bottom. Its messages
   were running on underneath the composer, which is what made it look cut off. */
.dlg--drawer .dlg-inner { display: flex; flex-direction: column; overflow: hidden; }
.dlg--drawer .pane-body--flush > .assistant { flex: 1 1 auto; min-height: 0; }
.dlg--drawer .assistant-main { height: 100%; min-height: 0; overflow: hidden; }
.dlg--drawer .thread-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.dlg--drawer .composer-wrap { position: static; flex: 0 0 auto; padding-bottom: calc(var(--s3) + var(--safe-b)); }

/* WhatsApp's back button: the text colour, a real target. */
.wa-back { color: var(--wa-text, var(--text)); width: 40px; height: 40px; margin-inline-start: -6px; }
.wa-back .icon { width: 24px; height: 24px; stroke-width: 2.4; }

/* Fingers: 44pt targets, no grey flash on tap, and a press that shows. */
html[data-touch] { -webkit-tap-highlight-color: transparent; }
html[data-touch] .btn, html[data-touch] .winbtn, html[data-touch] .tabbar-item, html[data-touch] .sheet-row { min-height: 40px; }
html[data-touch] .btn:active, html[data-touch] .sheet-row:active, html[data-touch] .list-row--link:active, html[data-touch] .tabbar-item:active { opacity: .6; }
/* iOS zooms into any field under 16px the moment it is focused. */
html[data-touch] input, html[data-touch] select, html[data-touch] textarea, html[data-touch] [contenteditable] { font-size: max(16px, 1em); }

/* --- The iOS app itself ------------------------------------------------------------------------------- */
html[data-ios], html[data-ios] body, html[data-ios] button, html[data-ios] input, html[data-ios] select, html[data-ios] textarea {
  font-family: -apple-system, "SF Pro Text", "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
}
html[data-ios] body { -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; }
/* Lighter, rounder lines, closer to SF Symbols than the web's 2px strokes. */
html[data-ios] symbol { stroke-width: 1.7; }
/* Bars of frosted glass, as in every iOS app. */
html[data-ios] .tabbar {
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: 0.5px solid color-mix(in srgb, var(--text) 18%, transparent);
}
html[data-ios] .tabbar-item { font-size: 10px; font-weight: 500; gap: 3px; }
html[data-ios] .tabbar-item .icon { width: 25px; height: 25px; }
html[data-ios] .tabbar-item[aria-current="page"] .icon { stroke-width: 2.1; }
html[data-ios] .topbar {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid color-mix(in srgb, var(--text) 14%, transparent);
}
/* Grouped, rounded cards with a hairline instead of a drawn border. */
html[data-ios] .card { border-radius: 14px; border-color: color-mix(in srgb, var(--text) 9%, transparent); }
html[data-ios] .btn { border-radius: 10px; }
html[data-ios] .btn--primary { font-weight: 600; }
/* Sheets that rise from the bottom with the iOS radius and grabber. */
html[data-ios] dialog.dlg { border-radius: 14px; }
@media (max-width: 600px) { html[data-ios] dialog.dlg:not(.dlg--min) { border-radius: 14px 14px 0 0; } }
html[data-ios] .sheet-handle { width: 36px; height: 5px; border-radius: 3px; opacity: .35; }
/* The floating buttons a little smaller and clear of the home bar. */
html[data-ios] .fab { box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
html[data-chat-open] #askFab { display: none; }
/* The summary's state pill keeps its whole word; the title gives way instead. */
.wa-summary-head > * { min-width: 0; }
.wa-summary-head .chip, .wa-summary-head .pill, .wa-summary-head [class*="state"] { flex: 0 0 auto; white-space: nowrap; }
.wa-summary { box-sizing: border-box; max-width: 100%; }
/* On a phone, New is a round button like Milou's, not a wide pill over the content (2026-10-07). */
@media (max-width: 600px) {
  .fab:not(.fab--ask).fab--labelled { width: 52px; min-width: 52px; height: 52px; padding-inline: 0; }
  .fab:not(.fab--ask).fab--labelled .fab-label { display: none; }
  .fab.fab--above-ask { bottom: calc(var(--tabbar-h) + 78px + var(--safe-b)); }
}
/* On a touch screen the chat row's ⋯ is always shown, so the row leaves room for it instead of putting it
   on top of the unread count and the time (2026-10-07). */
@media (hover: none) { .wa-chat { padding-inline-end: 40px; } .wa-chat-more { opacity: .75; } }
html[data-touch] .wa-chat { padding-inline-end: 40px; }

/* New email on a phone, the way Mail does it (Ali, 2026-10-07: "create new email mano zabet ktiir view al
   iPhone"): clear of the notch and the home bar, the formatting tools in ONE row that scrolls sideways instead
   of four rows over the message, smaller labels, and the actions on one line with Send first. */
@media (max-width: 600px) {
  .compose-layer:not(.is-min) { padding: 0; }
  .compose-layer:not(.is-min) .compose-panel { width: 100%; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .compose-panel .ed-head { padding: calc(10px + var(--safe-t)) 12px 10px; }
  .compose-panel .ed-fields { padding: 8px 12px; gap: 6px; }
  .compose-panel .ed-fields .field { grid-template-columns: 56px minmax(0, 1fr); }
  .compose-panel .ed-toolbar { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 2px; padding: 4px 8px; }
  .compose-panel .ed-toolbar::-webkit-scrollbar { display: none; }
  .compose-panel .ed-toolbar > * { flex: 0 0 auto; }
  .compose-panel .ed-body { min-height: 160px; }
  .compose-panel .ed-foot { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; overflow-x: auto; padding: 10px 12px calc(10px + var(--safe-b)); box-shadow: 0 -1px 0 var(--border); }
  .compose-panel .ed-foot .btn { flex: 0 0 auto; min-height: 40px; padding-inline: 12px; white-space: nowrap; }
  .compose-panel .ed-foot .btn--primary { padding-inline: 18px; }
}
/* Full screen: the whole window for the message. On a phone it already is, so the button is not offered there. */
.compose-layer.is-full { padding: 0; }
.compose-layer.is-full .compose-panel { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; }
@media (max-width: 600px) {
  .ed-btn--full { display: none; }
  /* Hidden on a phone: a bar above the tab bar, so the mail underneath can be read. */
  .compose-layer.is-min { inset: auto 12px calc(var(--tabbar-h) + 10px + var(--safe-b)) 12px; }
  .compose-layer.is-min .compose-panel { width: 100%; max-width: none; height: auto; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
  .compose-layer.is-min .ed-head { padding: 12px 14px; }
}
/* A request line's vehicle and driver, as chips under its name (2026-10-08). */
.erq-line-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.erq-line-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); font-size: calc(12px * var(--text-scale)); font-weight: 600; white-space: nowrap; }
.erq-line-tag .icon { width: 14px; height: 14px; color: var(--text-muted); }
.erq-line-tag--person { background: transparent; }

/* Smooth before pretty (Ali, 2026-10-08: "fi lags w metel shaking"): a blurred fixed bar over a scrolling page
   is redrawn on every frame in a web view and makes scrolling judder, so the bars are solid again. */
html[data-ios] .tabbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); }
html[data-ios] .topbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); }
html[data-ios] .compose-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Toasts slide in from the top like iOS banners and can be swiped away. */
html[data-touch] .toast { touch-action: pan-y; will-change: transform; border-radius: 14px; }

/* New email on a phone: room to breathe, not squeezed (Ali, 2026-10-08: "jeye ktiir compact"). */
@media (max-width: 600px) {
  .compose-panel .ed-fields { padding: 10px 16px; gap: 10px; }
  .compose-panel .ed-fields .field { grid-template-columns: 64px minmax(0, 1fr); }
  .compose-panel .ed-fields input { min-height: 44px; padding-inline: 12px; border-radius: 10px; }
  .compose-panel .ed-fields .field > label { font-size: calc(14px * var(--text-scale)); }
  .compose-panel .ed-toolbar { padding: 6px 10px; gap: 4px; border-top: 1px solid var(--border); }
  .compose-panel .ed-toolbar .ed-btn { min-width: 40px; min-height: 40px; }
  .compose-panel .ed-body { padding: 16px; line-height: 1.55; font-size: max(16px, 1em); }
}

/* ---- The dock (2026-10-08): hidden windows wait here as icons, like the Mac's ---------------------------- */
.dock {
  position: fixed; z-index: 80; left: 50%; transform: translateX(-50%); bottom: calc(14px + var(--safe-b));
  display: flex; align-items: flex-end; gap: 6px; padding: 7px 9px; max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none;
  background: color-mix(in srgb, var(--surface) 72%, transparent); border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: 20px; box-shadow: 0 10px 34px rgba(0, 0, 0, .22); -webkit-backdrop-filter: saturate(170%) blur(18px); backdrop-filter: saturate(170%) blur(18px);
  animation: dock-in .25s cubic-bezier(.2, .9, .3, 1.2);
}
.dock::-webkit-scrollbar { display: none; }
.dock[hidden] { display: none; }
@keyframes dock-in { from { transform: translate(-50%, 24px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.dock-item { position: relative; flex: 0 0 auto; }
.dock-open { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 76px; padding: 4px 2px 2px; background: none; border: 0; color: var(--text); cursor: pointer; border-radius: 12px; }
.dock-open:hover .dock-icon { transform: translateY(-4px) scale(1.08); }
.dock-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; color: #fff; transition: transform .15s ease; box-shadow: 0 3px 10px rgba(0, 0, 0, .18); }
.dock-icon .icon { width: 24px; height: 24px; }
.dock-icon--blue { background: linear-gradient(145deg, #3b82f6, #2563eb); }
.dock-icon--violet { background: linear-gradient(145deg, #8b5cf6, #2563eb); }
.dock-icon--amber { background: linear-gradient(145deg, #f59e0b, #ea580c); }
.dock-label { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(10.5px * var(--text-scale)); font-weight: 600; color: var(--text-muted); }
.dock-x { position: absolute; top: -4px; inset-inline-end: 6px; display: none; place-items: center; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 0; background: var(--text); color: var(--surface); cursor: pointer; }
.dock-x .icon { width: 12px; height: 12px; }
.dock-item:hover .dock-x, html[data-touch] .dock-x { display: grid; }
/* What sits in the dock is not drawn anywhere else. */
dialog.dlg.dlg--min, dialog.dlg--min { display: none !important; }
.compose-layer.is-min { display: none !important; }
/* On a phone it floats above the tab bar, and the round buttons step aside. */
@media (max-width: 899px) { .dock { bottom: calc(var(--tabbar-h) + 10px + var(--safe-b)); } }
/* Milou sits on the dock's line, not above it (Ali, 2026-10-08: "hiding tabs wl Milou icon lezem ykuno 3ala nafes
   line"): the dock is 78px tall, Milou 52, so Milou's bottom is the dock's plus 13. New goes above Milou. */
@media (min-width: 900px) {
  html[data-dock] #askFab.fab { bottom: calc(27px + var(--safe-b)); }
  html[data-dock] .dock { max-width: calc(100vw - 220px); }
}
@media (max-width: 899px) {
  html[data-dock] #askFab.fab { bottom: calc(var(--tabbar-h) + 23px + var(--safe-b)); }
  html[data-dock] #fab.fab { bottom: calc(var(--tabbar-h) + 88px + var(--safe-b)); }
  /* The dock keeps to the left of Milou so the two never overlap. */
  html[data-dock] .dock { left: 12px; transform: none; max-width: calc(100vw - 92px); animation: none; }
}
.strip-num { background: none; border: 0; padding: 2px 6px; border-radius: 6px; font: inherit; cursor: pointer; color: inherit; }
.strip-num:hover { background: var(--surface-2); text-decoration: underline; }
/* Scrolling on a phone (2026-10-08: "lags… emails byerjfo lama 3am ba3mel scroll"): each list scrolls on its own
   layer, momentum and all, without the page behind it rubber-banding, and a row's hover styles never run. */
html[data-touch] .mail-list-scroll, html[data-touch] .mail-read, html[data-touch] .thread, html[data-touch] .wa-chats, html[data-touch] .wa-messages {
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; transform: translateZ(0);
}
html[data-touch] .mail-row:hover, html[data-touch] .wa-chat:hover { background: inherit; }
html[data-touch] .mail-row { transition: none; }

/* ---- Milou Live (2026-10-08) ------------------------------------------------------------------------------ */
.ml { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; color: #eef2ff;
  background: radial-gradient(120% 80% at 50% 30%, #2a1f6b 0%, #0f1330 55%, #070914 100%);
  padding: calc(14px + var(--safe-t)) 18px calc(18px + var(--safe-b)); opacity: 0; transform: scale(1.02); transition: opacity .25s ease, transform .25s ease; }
.ml.is-in { opacity: 1; transform: none; }
.ml-top { display: flex; align-items: center; justify-content: space-between; }
.ml-brand { font-weight: 700; letter-spacing: .02em; font-size: 17px; opacity: .9; }
.ml-close { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: inherit; display: grid; place-items: center; cursor: pointer; }
.ml-close .icon { width: 20px; height: 20px; }
.ml-center { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; min-height: 0; }
.ml-orb { --lvl: 0; position: relative; width: 168px; height: 168px; display: grid; place-items: center; }
.ml-orb-core { width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #a5b4fc, #7c3aed 45%, #2563eb 100%);
  box-shadow: 0 0 calc(30px + 60px * var(--lvl)) rgba(124, 58, 237, .65); transform: scale(calc(1 + .22 * var(--lvl))); transition: transform .08s linear, box-shadow .08s linear; }
.ml-orb-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(165, 180, 252, .35); animation: ml-ring 2.4s ease-out infinite; }
.ml-orb[data-state="speaking"] .ml-orb-core { background: radial-gradient(circle at 35% 30%, #c4b5fd, #8b5cf6 40%, #0ea5e9 100%); }
.ml-orb[data-state="connecting"] .ml-orb-core, .ml-orb[data-state="off"] .ml-orb-core { filter: grayscale(.6) brightness(.8); }
.ml-orb[data-state="off"] .ml-orb-ring, .ml-orb[data-state="connecting"] .ml-orb-ring { animation-duration: 1.2s; }
@keyframes ml-ring { from { transform: scale(.75); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
.ml-status { font-size: 16px; font-weight: 600; opacity: .85; text-align: center; }
.ml-log { flex: 0 1 34vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 6px 2px; mask-image: linear-gradient(to bottom, transparent 0, #000 22px); }
.ml-line { max-width: 86%; padding: 9px 13px; border-radius: 16px; font-size: 15px; line-height: 1.45; }
.ml-line--user { align-self: flex-end; background: rgba(255,255,255,.14); border-bottom-right-radius: 5px; }
.ml-line--ai { align-self: flex-start; background: rgba(124, 58, 237, .32); border-bottom-left-radius: 5px; }
.ml-bottom { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 10px; }
.ml-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ml-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: inherit; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.ml-chip .icon { width: 17px; height: 17px; }
.ml-hold { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: min(320px, 100%); min-height: 64px; border-radius: 999px; border: 0;
  background: linear-gradient(135deg, #7c3aed, #2563eb); color: #fff; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  box-shadow: 0 10px 28px rgba(37, 99, 235, .4); transition: transform .12s ease; }
.ml-hold .icon { width: 22px; height: 22px; }
.ml-hold.is-on { transform: scale(.96); background: linear-gradient(135deg, #ef4444, #f97316); }
.ml-hold[hidden] { display: none; }
@media (min-width: 900px) { .ml { inset: auto 24px 24px auto; width: 380px; height: min(640px, calc(100vh - 48px)); border-radius: 24px; box-shadow: 0 30px 80px rgba(0,0,0,.45); } }
.ml-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
.ml-seg-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 16px; border-radius: 999px; border: 0; background: none; color: rgba(238,242,255,.7); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.ml-seg-btn .icon { width: 16px; height: 16px; }
.ml-seg-btn[aria-pressed="true"] { background: rgba(255,255,255,.92); color: #1e1b4b; }

/* ---- An ERP request on a phone (Ali, 2026-10-08: "need you, lama eftah request bl mobile app mano zabet") ---- */
@media (max-width: 600px) {
  /* The head: the reference small on top, the title across the whole width (three lines at most). */
  .erq-dlg .dlg-head h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: calc(16px * var(--text-scale)); line-height: 1.3; }
  .erq-dlg .dlg-head h2 > bdi { flex: 1 1 100%; order: 2; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .erq-dlg .dlg-head h2 > .erq-ref { order: 1; font-size: calc(12px * var(--text-scale)); }
  .erq-dlg .dlg-head h2 > .erq-open-erp { order: 1; margin-inline-start: auto; }
  /* Expense lines as cards: the line on top, its figures underneath with their names. */
  .erq-lines, .erq-lines tbody { display: block; width: 100%; }
  .erq-lines thead { display: none; }
  .erq-lines tbody tr { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px 10px; padding: 12px 2px; border-bottom: 1px solid var(--border); }
  .erq-lines tbody td { display: block; padding: 0; border: 0; text-align: start !important; min-width: 0; }
  .erq-lines tbody td:nth-child(1) { grid-column: 1 / -1; }
  .erq-lines tbody td:nth-child(2) { grid-column: 1 / -1; }
  .erq-lines tbody td:nth-child(3) { grid-column: 1 / -1; color: var(--text-muted); font-size: calc(12.5px * var(--text-scale)); }
  .erq-lines tbody td:nth-child(n+4)::before { display: block; font-size: calc(10.5px * var(--text-scale)); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); margin-bottom: 1px; }
  .erq-lines tbody td:nth-child(4)::before { content: "Conversion"; }
  .erq-lines tbody td:nth-child(5)::before { content: "Unit price"; }
  .erq-lines tbody td:nth-child(6)::before { content: "Qty"; }
  .erq-lines tbody td:nth-child(7)::before { content: "No VAT"; }
  .erq-lines tbody td:nth-child(8)::before { content: "VAT"; }
  .erq-lines tbody td:nth-child(9)::before { content: "Total"; }
  .erq-lines tbody td:nth-child(9) { font-weight: 700; }
  :lang(ar) .erq-lines tbody td:nth-child(4)::before { content: "التحويل"; }
  :lang(ar) .erq-lines tbody td:nth-child(5)::before { content: "سعر الوحدة"; }
  :lang(ar) .erq-lines tbody td:nth-child(6)::before { content: "الكمية"; }
  :lang(ar) .erq-lines tbody td:nth-child(7)::before { content: "بدون ضريبة"; }
  :lang(ar) .erq-lines tbody td:nth-child(8)::before { content: "الضريبة"; }
  :lang(ar) .erq-lines tbody td:nth-child(9)::before { content: "المجموع"; }
  .erq-lines tbody tr:has(td[colspan]) { display: block; }
  .erq-dlg .table-wrap:has(.erq-lines) { overflow: visible; }
  .erq-lines .erq-line-tags, .erq-lines .erq-file { max-width: 100%; }
  .erq-lines .erq-file { display: flex; }
  /* Document checks and the analysis: one under the other, never squeezed side by side. */
  .erq-doccheck, .erq-docverdict, .erp-analysis-head, .erp-analysis { flex-wrap: wrap; }
  .erq-doccheck > *, .erq-docverdict > * { min-width: 0; max-width: 100%; }
  .erp-analysis-head { flex-direction: column; align-items: stretch; }
  .erp-analysis-head > img, .erp-analysis img { max-width: 100%; height: auto; }
  .erq-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
html[data-ios] .erq-open-erp { display: none; }
@media (max-width: 600px) {
  .erq-lines.table { min-width: 0; }
  .erq-lines.table tbody td { height: auto; white-space: normal; }
  .erq-dlg .table-wrap:has(.erq-lines) { border: 0; background: none; }
  /* The document checks under Attachments: chip, file and verdict wrap instead of four squeezed columns. */
  .erq-doccheck { flex-direction: column; align-items: stretch; }
  .erq-doccheck > * { display: flex; flex-wrap: wrap; gap: 4px 8px; }
}
@media (max-width: 600px) { .erq-docrow { flex-wrap: wrap; gap: 4px 8px; max-width: 100%; } .erq-docrow > * { min-width: 0; } }
.ml-pending { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 2px; }
.ml-pending[hidden] { display: none; }
.ml-pending-card { padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); animation: dock-in .2s ease; }
.ml-pending-text { font-size: 15px; line-height: 1.4; margin-bottom: 10px; }
.ml-pending-acts { display: flex; gap: 8px; justify-content: flex-end; }
.ml-pending-yes, .ml-pending-no { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 18px; border-radius: 999px; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.ml-pending-yes { background: #22c55e; color: #052e16; }
.ml-pending-yes .icon { width: 17px; height: 17px; }
.ml-pending-no { background: rgba(255,255,255,.14); color: inherit; }
.friendly-row { cursor: pointer; gap: 12px; align-items: center; } .friendly-row input[type=checkbox] { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--accent); } .friendly-list { max-height: 460px; overflow-y: auto; }

/* Mail's folders, hidden: a rail of icons (2026-10-09). */
.mail-grid--right.mail-grid--rail { grid-template-columns: 58px var(--mail-list, 400px) 5px minmax(320px, 1fr); }
.mail-grid--bottom.mail-grid--rail, .mail-grid--off.mail-grid--rail { grid-template-columns: 58px minmax(0, 1fr); }
.mail-folders--rail { padding: 8px 6px; align-items: center; overflow-x: hidden; }
.mail-folders--rail .mail-folders-head { justify-content: center; padding: 0 0 6px; }
.mail-folders--rail .mail-folders-head strong, .mail-folders--rail .mail-folders-label, .mail-folders--rail .mail-folder-more { display: none; }
.mail-folders--rail .mail-folder { position: relative; justify-content: center; width: 44px; min-height: 42px; padding: 0; margin: 1px auto; border-radius: 12px; }
.mail-folders--rail .mail-folder .icon { width: 20px; height: 20px; margin: 0; }
.mail-folders--rail .mail-folder > bdi { display: none; }
.mail-folders--rail .mail-folder .badge { position: absolute; top: 2px; inset-inline-end: 0; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; }
.mail-folders--rail .mail-folder-wrap { display: block; }
.mail-folders--rail .mail-folders-sep { margin: 6px 8px; }
.mail-folders--rail .mail-folder--add > span { display: none; }
.picker-row--ai { border: 1px solid color-mix(in srgb, var(--accent, #3b5bdb) 35%, transparent); background: color-mix(in srgb, var(--accent, #3b5bdb) 7%, transparent); border-radius: 12px; }
.avatar--ai { background: linear-gradient(135deg, #6d5dfc, #3b82f6); color: #fff; display: grid; place-items: center; }
.avatar--ai .icon { width: 18px; height: 18px; }

/* ---- Sign in, redesigned (Ali, 2026-10-09: "sign page bl awwal tkun better UX/UI, ktiir say2a") ---- */
dialog.auth-screen { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: #0b1020; color: #f8fafc; display: none; overflow: hidden auto; }
dialog.auth-screen[open] { display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom)); }
dialog.auth-screen::backdrop { background: #0b1020; }
.auth-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(120% 80% at 50% 0%, #1e1b4b 0%, #0b1020 60%); }
.auth-blob { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(70px); opacity: .55; mix-blend-mode: screen; animation: auth-float 18s ease-in-out infinite alternate; }
.auth-blob--a { background: #6d5dfc; top: -25vmax; left: -15vmax; }
.auth-blob--b { background: #06b6d4; bottom: -30vmax; right: -20vmax; animation-duration: 22s; animation-delay: -6s; }
.auth-blob--c { background: #ec4899; top: 30%; left: 40%; width: 35vmax; height: 35vmax; opacity: .3; animation-duration: 26s; animation-delay: -12s; }
@keyframes auth-float { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6vmax, 4vmax) scale(1.12); } 100% { transform: translate(-4vmax, 7vmax) scale(.95); } }
.auth-card { position: relative; width: min(420px, 100%); padding: 30px 26px 22px; border-radius: 28px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); animation: auth-in .7s cubic-bezier(.2, .9, .25, 1.1) both; }
@keyframes auth-in { from { opacity: 0; transform: translateY(26px) scale(.96); } to { opacity: 1; transform: none; } }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 8px; }
.auth-logo { width: 72px; height: 72px; border-radius: 20px; box-shadow: 0 12px 30px rgba(109, 93, 252, .55); animation: auth-logo 3.2s ease-in-out infinite; }
@keyframes auth-logo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.auth-name { font-size: 26px; font-weight: 800; letter-spacing: -.02em; background: linear-gradient(90deg, #c4b5fd, #67e8f9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-card .dlg-head { justify-content: center; border: 0; padding: 0 0 4px; background: none; }
.auth-card .dlg-head h2 { color: #f8fafc; font-size: 20px; text-align: center; }
.auth-card .dlg-body { padding: 0; gap: 14px; color: #e2e8f0; }
.auth-card #authLead { text-align: center; color: rgba(226, 232, 240, .75); }
.auth-card .field label { color: rgba(226, 232, 240, .85); font-size: 13px; }
.auth-card input[type="text"], .auth-card input[type="password"] { background: rgba(15, 23, 42, .55); border: 1px solid rgba(255, 255, 255, .18); color: #f8fafc;
  height: 50px; border-radius: 14px; font-size: 16px; padding: 0 14px; transition: border-color .2s, box-shadow .2s, background .2s; }
.auth-card input:focus { outline: none; border-color: #a78bfa; box-shadow: 0 0 0 4px rgba(167, 139, 250, .25); background: rgba(15, 23, 42, .75); }
.auth-card .field--inline { position: relative; }
.auth-card #authToggle { color: #c4b5fd; }
.auth-card .check, .auth-card .field-help { color: rgba(226, 232, 240, .7); }
.auth-card .field-error { color: #fecaca; background: rgba(239, 68, 68, .15); border: 1px solid rgba(239, 68, 68, .35); padding: 8px 12px; border-radius: 12px; animation: auth-shake .4s; }
@keyframes auth-shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
.auth-card .dlg-foot { border: 0; padding: 18px 0 0; background: none; }
.auth-card #authSubmit { width: 100%; height: 52px; border: 0; border-radius: 16px; font-size: 16px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #7c3aed, #2563eb 60%, #06b6d4); background-size: 200% 200%; animation: auth-sheen 6s ease infinite;
  box-shadow: 0 14px 34px rgba(37, 99, 235, .45); transition: transform .15s, box-shadow .2s; }
.auth-card #authSubmit:active { transform: scale(.97); }
@keyframes auth-sheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .auth-blob, .auth-logo, .auth-card, .auth-card #authSubmit { animation: none; } }

/* ---- The app, alive (2026-10-09: "app UX/UI btheos old fashion, mesh trendy, ma fi animation") ---- */
html[data-ios] .page.page--enter > * { animation: app-page-in .38s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes app-page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
html[data-ios] .card, html[data-ios] .list-row, html[data-ios] .mail-row, html[data-ios] .picker-row { transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, background-color .2s; }
html[data-ios] .card:active, html[data-ios] .list-row:active, html[data-ios] .mail-row:active, html[data-ios] .picker-row:active, html[data-ios] .btn:active { transform: scale(.975); }
html[data-ios] .card { border-radius: 20px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06); }
html[data-ios] .page--enter .stack > .card, html[data-ios] .page--enter .stack > .list-row, html[data-ios] .page--enter .mail-list .mail-row { animation: app-rise .45s cubic-bezier(.2, .8, .2, 1) both; }
html[data-ios] .page--enter .stack > :nth-child(2) { animation-delay: .04s; } html[data-ios] .page--enter .stack > :nth-child(3) { animation-delay: .08s; }
html[data-ios] .page--enter .stack > :nth-child(4) { animation-delay: .12s; } html[data-ios] .page--enter .stack > :nth-child(5) { animation-delay: .16s; }
html[data-ios] .page--enter .stack > :nth-child(n+6) { animation-delay: .2s; }
@keyframes app-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
html[data-ios] .btn--primary { background-image: linear-gradient(135deg, #6d5dfc, #2563eb); border-color: transparent; box-shadow: 0 6px 18px rgba(37, 99, 235, .3); }
html[data-ios] dialog.dlg[open] { animation: app-sheet-up .36s cubic-bezier(.2, .9, .25, 1) both; }
@keyframes app-sheet-up { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
html[data-ios] dialog.dlg::backdrop { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
html[data-ios] .topbar { backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); background: color-mix(in srgb, var(--surface, #fff) 78%, transparent); }
html[data-ios] .toast { animation: app-toast .4s cubic-bezier(.2, .9, .25, 1.15) both; border-radius: 16px; }
@keyframes app-toast { from { opacity: 0; transform: translateY(16px) scale(.95); } to { opacity: 1; transform: none; } }
html[data-ios] .skel { background-size: 200% 100%; animation: app-shimmer 1.3s linear infinite; }
@keyframes app-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { html[data-ios] * { animation: none !important; transition: none !important; } }
/* Mail search on a phone: what was searched, how many found, tap to change (2026-10-09). */
.mail-search-pillrow { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.mail-search-pill { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: 15px; text-align: start; }
.mail-search-pill .icon { width: 18px; height: 18px; color: var(--accent, #2563eb); flex: none; }
.mail-search-count { flex: none; min-width: 24px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--accent, #2563eb); color: #fff; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; }
.mail-search-clear { flex: none; color: var(--accent, #2563eb); font-weight: 600; }
/* A reply opened from the mail's window comes up over that window, large (2026-10-09). */
.compose-layer.compose-layer--over { z-index: 80; }
.compose-layer.compose-layer--over .compose-panel { width: min(1100px, 96vw); max-height: 92vh; }
.toasts { z-index: 95; }
.compose-layer.compose-layer--over.is-min .compose-panel { width: 380px; max-width: calc(100vw - 32px); }

/* ---- Milou Live, the ChatGPT/Claude-voice feel (2026-10-09) ---- */
.ml { background: #05060f; overflow: hidden; }
.ml::before, .ml::after { content: ""; position: absolute; width: 90vmax; height: 90vmax; border-radius: 50%; filter: blur(90px); opacity: .45; pointer-events: none; z-index: 0; animation: ml-aurora 16s ease-in-out infinite alternate; }
.ml::before { background: radial-gradient(circle, #6d28d9, transparent 60%); top: -45vmax; left: -30vmax; }
.ml::after { background: radial-gradient(circle, #0891b2, transparent 60%); bottom: -50vmax; right: -35vmax; animation-delay: -8s; }
@keyframes ml-aurora { from { transform: translate(0, 0) scale(1); } to { transform: translate(8vmax, 6vmax) scale(1.15); } }
.ml > * { position: relative; z-index: 1; }
.ml-orb { width: min(64vw, 260px); height: min(64vw, 260px); cursor: pointer; }
.ml-orb-core { width: 78%; height: 78%; background: conic-gradient(from 0deg, #a78bfa, #60a5fa, #22d3ee, #f0abfc, #a78bfa); animation: ml-spin 9s linear infinite;
  box-shadow: 0 0 calc(50px + 90px * var(--lvl)) rgba(139, 92, 246, .55), inset 0 0 40px rgba(255, 255, 255, .35);
  filter: saturate(1.2) blur(.3px); transform: scale(calc(1 + .28 * var(--lvl))); }
.ml-orb-core::after { content: ""; position: absolute; }
@keyframes ml-spin { to { rotate: 360deg; } }
.ml-orb[data-state="listening"] .ml-orb-core { animation-duration: 14s; }
.ml-orb[data-state="speaking"] .ml-orb-core { animation-duration: 4s; background: conic-gradient(from 0deg, #c4b5fd, #38bdf8, #34d399, #f472b6, #c4b5fd); }
.ml-orb[data-state="connecting"] .ml-orb-core { animation-duration: 2s; filter: grayscale(.5) brightness(.85); }
.ml-orb-ring { border-width: 1.5px; border-color: rgba(196, 181, 253, .3); }
.ml-status { font-size: 15px; font-weight: 500; letter-spacing: .01em; color: rgba(238, 242, 255, .7); }
.ml-log { flex: 0 1 30vh; gap: 10px; }
.ml-line { font-size: 17px; line-height: 1.5; padding: 0; background: none !important; border-radius: 0; max-width: 100%; }
.ml-line--user { color: rgba(238, 242, 255, .6); text-align: end; }
.ml-line--ai { color: #fff; font-weight: 500; }
.ml-line:last-child { animation: ml-caption .35s ease both; }
@keyframes ml-caption { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ml-close { width: 44px; height: 44px; background: rgba(255, 255, 255, .1); backdrop-filter: blur(12px); }
/* Ask AI: wider on demand (2026-10-09). */
#ceoPane.askai--wide { width: min(760px, 70vw) !important; }
#ceoDrawerSheet.askai--wide { width: min(1000px, 96vw) !important; max-width: none !important; height: 90vh; }
.dock-icon--violet { background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff; }
.avatar--claude { background: linear-gradient(135deg, #d97757, #c15f3c); color: #fff; font-weight: 800; }

/* ---- The assistant on a phone (Ali, 2026-10-09: "bel mobile view lal AI assistant ktiir saye2, ma fi chat wala
   Milou voice la shuf kel shi sar abel") — the header with the chat list button and the new chat stays on top. ---- */
@media (max-width: 899px) {
  .page .assistant-top { position: sticky; top: var(--topbar-h, 56px); z-index: 6; padding: 6px 0;
    background: color-mix(in srgb, var(--bg, #f6f7fb) 86%, transparent); backdrop-filter: blur(16px) saturate(170%); -webkit-backdrop-filter: blur(16px) saturate(170%); }
  .page .assistant-top .stat-bar, .page .assistant-top .needs-fold { display: none; }
  .page .assistant-top .chat-head { border-radius: 16px; }
}
/* Milou Live: tools, the whole conversation scrolling, and the lists it puts on screen (2026-10-09). */
.ml { --ml-text: 1; }
.ml-tools { display: flex; gap: 6px; margin-inline-start: auto; margin-inline-end: 8px; }
.ml-mini { min-width: 40px; height: 36px; padding: 0 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: inherit; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.ml-center { flex: 0 0 auto; gap: 14px; padding: 6px 0; }
.ml-orb { width: min(42vw, 180px); height: min(42vw, 180px); }
.ml-log { flex: 1 1 auto; min-height: 120px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 8px 4px 16px; }
.ml-line { font-size: calc(17px * var(--ml-text)); }
.ml-card { align-self: stretch; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 12px 16px; font-size: calc(15px * var(--ml-text)); line-height: 1.55; color: #f1f5ff; animation: ml-caption .35s ease both; }
.ml-card ul { margin: 0; padding-inline-start: 18px; } .ml-card li { margin: 6px 0; } .ml-card strong { color: #fff; }
.ml-card a, .ml-card .mention { color: #a5b4fc; }
/* Ask AI's head: one tidy row on every screen (2026-10-09). */
.askai-head { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
.askai-head h2 { min-width: 0; font-size: 17px; margin: 0; }
.askai-head .btn--icon { flex: none; width: 36px; height: 36px; }
@media (max-width: 600px) { .askai-tochat > span { display: none; } }
.askai-empty { text-align: center; padding: 28px 12px; }
@media (max-width: 899px) { .page .assistant-top { background: var(--bg, #f6f7fb); } }
/* Milou thinking: the orb turns fast and glows amber-violet; the status line pulses (2026-10-09). */
.ml-orb[data-state="thinking"] .ml-orb-core { animation-duration: 1.6s; background: conic-gradient(from 0deg, #fbbf24, #a78bfa, #60a5fa, #f472b6, #fbbf24); }
.ml-orb[data-state="thinking"] .ml-orb-ring { animation-duration: .9s; }
.ml-orb[data-state="thinking"] ~ .ml-status { animation: ml-pulse-text 1.4s ease-in-out infinite; color: #fde68a; }
@keyframes ml-pulse-text { 50% { opacity: .55; } }
/* Brief lines that open what they are about (2026-10-09). */
.brief-li--link { list-style: none; margin-inline-start: -14px; }
.brief-link { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; color: inherit; text-decoration: none; transition: background .15s; }
.brief-link:hover, .brief-link:active { background: color-mix(in srgb, var(--accent, #2563eb) 9%, transparent); }
.brief-link .icon { flex: none; width: 16px; height: 16px; color: var(--accent, #2563eb); opacity: .8; }

/* ---- A mail on the phone (Ali, 2026-10-09: "el buttons bel email messages w el sorting mesh zahrin mni7") ---- */
@media (max-width: 600px) {
  /* The actions: one row that scrolls sideways, not three rows of boxes over the mail. */
  .mail-quick-reply { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 0 12px 12px; gap: 8px; scroll-snap-type: x proximity; }
  .mail-quick-reply::-webkit-scrollbar { display: none; }
  .mail-quick-reply .btn { flex: none; white-space: nowrap; border-radius: 999px; min-height: 36px; padding: 0 14px; scroll-snap-align: start; }
  /* Each message's own reply icons are the row above's job on a phone; the sender's name gets the room. */
  .thread-acts .btn { display: none; }
  .thread-msg .thread-head, .thread-msg > div:first-child { min-width: 0; }
  /* The summary's head: chips wrap under the title instead of piling onto it. */
  .mail-summary-head { flex-wrap: wrap; row-gap: 6px; }
  .mail-summary-head .chip, .mail-summary-head [class*="badge"] { max-width: 100%; }
}
@media (max-width: 600px) {
  .mail-quick-reply { align-items: center; min-height: 54px; padding-top: 6px; padding-bottom: 10px; overflow-y: hidden; flex-shrink: 0; height: auto; box-sizing: content-box; }
  .mail-quick-reply .btn { height: 38px; }
}
/* The week's weather (2026-10-09). */
button.brief-weather { font: inherit; color: inherit; border: 0; cursor: pointer; text-align: inherit; transition: transform .15s, box-shadow .2s; }
button.brief-weather:hover, button.brief-weather:active { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15, 23, 42, .08); }
.wx-now { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; background: linear-gradient(135deg, #e0f2fe, #ede9fe); color: #0f172a; margin-bottom: 12px; }
.wx-now-icon { font-size: 44px; line-height: 1; }
.wx-now-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.wx-now-temp { font-size: 34px; line-height: 1; font-weight: 800; }
.wx-now-side { display: flex; flex-direction: column; gap: 3px; text-align: end; }
.wx-days { display: flex; flex-direction: column; }
.wx-day { display: grid; grid-template-columns: minmax(70px, 1.2fr) 32px 58px 34px minmax(60px, 2fr) 34px; align-items: center; gap: 8px; padding: 10px 2px 4px; border-top: 1px solid var(--border); }
.wx-day:first-child { border-top: 0; }
.wx-day-name { font-weight: 600; }
.wx-day-icon { font-size: 22px; text-align: center; }
.wx-rain { font-size: 12px; color: var(--text-muted); } .wx-rain.is-wet { color: #0284c7; font-weight: 700; }
.wx-low { color: var(--text-muted); text-align: end; } .wx-high { font-weight: 700; }
.wx-bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; display: flex; }
.wx-bar > span { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #38bdf8, #f59e0b, #ef4444); }
.wx-day-more { grid-column: 1 / -1; padding-bottom: 6px; }
/* An email opened from Milou comes up over Milou (2026-10-09). */
.popwin { z-index: 140; }

/* ==================================================================
   Liquid Glass (Ali, 2026-10-09: "theme option metel normal aw Liquid Glass metel iOS… professional, la el web w
   el mobile"). Apple's iOS 26 material: a soft colour field behind everything, and every surface a sheet of frosted
   glass over it — translucent, blurred and saturated, with a bright rim on top and a soft shadow under. Tokens
   first, so every component that uses --surface turns to glass; then the big surfaces get the blur itself.
   ================================================================== */
html[data-style="glass"] {
  --glass-blur: blur(26px) saturate(185%);
  --glass-rim: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(255, 255, 255, .12);
  --r: 12px; --r-lg: 20px; --r-sheet: 28px;
}
html[data-style="glass"][data-theme="light"] {
  --bg: #eef2f9;
  --surface: rgba(255, 255, 255, .58); --surface-2: rgba(255, 255, 255, .42); --surface-3: rgba(255, 255, 255, .32);
  --border: rgba(255, 255, 255, .7); --border-strong: rgba(15, 23, 42, .12);
  --glass-shadow: 0 10px 30px rgba(15, 23, 42, .08), 0 1px 3px rgba(15, 23, 42, .06);
  --glass-field: radial-gradient(60vmax 60vmax at 8% -10%, #c7d7ff 0%, transparent 60%), radial-gradient(55vmax 55vmax at 100% 10%, #f5d0fe 0%, transparent 55%),
    radial-gradient(60vmax 60vmax at 60% 110%, #bae6fd 0%, transparent 60%), linear-gradient(180deg, #f3f6fc, #eaf0fa);
}
html[data-style="glass"]:not([data-theme="light"]) {
  --surface: rgba(30, 41, 64, .48); --surface-2: rgba(36, 50, 78, .42); --surface-3: rgba(44, 60, 92, .38);
  --border: rgba(255, 255, 255, .12); --border-strong: rgba(255, 255, 255, .2);
  --glass-rim: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(255, 255, 255, .04);
  --glass-shadow: 0 12px 34px rgba(0, 0, 0, .35);
  --glass-field: radial-gradient(60vmax 60vmax at 5% -10%, #3730a3 0%, transparent 60%), radial-gradient(55vmax 55vmax at 100% 15%, #831843 0%, transparent 55%),
    radial-gradient(60vmax 60vmax at 55% 110%, #0e7490 0%, transparent 60%), linear-gradient(180deg, #070b16, #0b1220);
}
html[data-style="glass"] body { background: var(--glass-field) fixed; background-color: var(--bg); }
/* The big panes: glass with the blur. */
html[data-style="glass"] .card, html[data-style="glass"] .sidebar, html[data-style="glass"] .topbar, html[data-style="glass"] .tabbar,
html[data-style="glass"] dialog.dlg, html[data-style="glass"] .popwin, html[data-style="glass"] .chat-head, html[data-style="glass"] .mail-grid,
html[data-style="glass"] .mail-bar, html[data-style="glass"] .compose-panel, html[data-style="glass"] .menu, html[data-style="glass"] .toast,
html[data-style="glass"] .brief-box, html[data-style="glass"] .stat-tile, html[data-style="glass"] .composer, html[data-style="glass"] #ceoPane {
  background-color: var(--surface); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-color: var(--border); box-shadow: var(--glass-rim), var(--glass-shadow);
}
html[data-style="glass"] .card, html[data-style="glass"] .brief-box, html[data-style="glass"] .mail-grid { border-radius: var(--r-lg); }
html[data-style="glass"] .topbar { border-bottom-color: transparent; }
html[data-style="glass"] .sidebar { border-inline-end-color: transparent; }
/* Buttons: little pills of glass; the primary one a lit, tinted glass. */
html[data-style="glass"] .btn { border-radius: 999px; }
/* Plain buttons turn to glass; a button with a colour (approve, reject, return, danger…) keeps its colour (2026-10-10). */
html[data-style="glass"] .btn:not(.btn--primary):not(.btn--ghost):not([class*="btn--ok"]):not([class*="btn--amber"]):not([class*="btn--danger"]):not([class*="btn--success"]):not([class*="btn--warn"]) { background: var(--surface-2); border-color: var(--border); box-shadow: var(--glass-rim); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
html[data-style="glass"] .btn--primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent)); border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent); }
html[data-style="glass"] .seg { background: var(--surface-2); border-radius: 999px; box-shadow: var(--glass-rim); }
html[data-style="glass"] .seg-item[aria-pressed="true"], html[data-style="glass"] .seg-item[aria-selected="true"] { background: var(--surface); border-radius: 999px; box-shadow: var(--glass-rim), 0 2px 8px rgba(15, 23, 42, .1); }
html[data-style="glass"] input, html[data-style="glass"] select, html[data-style="glass"] textarea { background-color: var(--surface-2); border-color: var(--border); }
html[data-style="glass"] .nav-item[aria-current="page"] { background: var(--surface); box-shadow: var(--glass-rim), 0 4px 14px rgba(15, 23, 42, .08); border-radius: 14px; }
/* The phone's tab bar floats as a glass pill above the bottom edge, as on iOS 26. */
@media (max-width: 899px) {
  html[data-style="glass"] .tabbar { left: 12px; right: 12px; bottom: calc(8px + var(--safe-b)); height: var(--tabbar-h); padding-bottom: 0; border-radius: 28px; border: 1px solid var(--border); }
  html[data-style="glass"] .tabbar-item[aria-current="page"] { background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 22px; }
}
/* The two style choices in Settings. */
.style-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.style-preview { position: relative; display: block; width: 100%; height: 64px; border-radius: 14px; overflow: hidden; margin-bottom: 4px; }
.style-card--standard .style-preview { background: #f1f5f9; }
.style-card--standard .style-preview span { position: absolute; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; }
.style-card--glass .style-preview { background: radial-gradient(80% 120% at 10% 0%, #c7d7ff, transparent 60%), radial-gradient(80% 120% at 100% 30%, #f5d0fe, transparent 60%), radial-gradient(80% 120% at 50% 120%, #bae6fd, transparent 60%), #eef2f9; }
.style-card--glass .style-preview span { position: absolute; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.8); border-radius: 12px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.style-preview span:first-child { inset: 10px 40% 10px 10px; } .style-preview span:last-child { inset: 18px 10px 18px 64%; }
/* Arrange the menu. */
.menu-order { display: flex; flex-direction: column; gap: 6px; }
.menu-order-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.menu-order-row.is-dragging { opacity: .85; box-shadow: 0 10px 28px rgba(15, 23, 42, .18); transform: scale(1.02); z-index: 2; position: relative; }
.menu-order-handle { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; font-size: 20px; color: var(--text-faint); padding: 0 4px; }
/* Glass, readable: the bars and the windows hold their own words (review, 2026-10-09). */
html[data-style="glass"][data-theme="light"] .topbar { background-color: rgba(255, 255, 255, .82); }
html[data-style="glass"]:not([data-theme="light"]) .topbar { background-color: rgba(17, 26, 43, .82); }
html[data-style="glass"][data-theme="light"] dialog.dlg, html[data-style="glass"][data-theme="light"] .popwin, html[data-style="glass"][data-theme="light"] .compose-panel { background-color: rgba(255, 255, 255, .86); }
html[data-style="glass"]:not([data-theme="light"]) dialog.dlg, html[data-style="glass"]:not([data-theme="light"]) .popwin, html[data-style="glass"]:not([data-theme="light"]) .compose-panel { background-color: rgba(17, 26, 43, .88); }
html[data-style="glass"] dialog.dlg::backdrop { background: rgba(15, 23, 42, .25); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* The window, on a phone: a full screen that slides up, with a back arrow, scrolling (2026-10-09). */
.popwin.popwin--phone { inset: 0 !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; max-height: none !important; max-width: none !important;
  border-radius: 0; border: 0; display: flex; flex-direction: column; transform: translateY(100%); transition: transform .32s cubic-bezier(.2, .9, .25, 1); padding-top: var(--safe-t); }
.popwin.popwin--phone.is-in { transform: none; }
.popwin--phone .popwin-head--phone { display: flex; align-items: center; gap: 6px; padding: 8px 10px; min-height: 52px; border-bottom: 1px solid var(--border); cursor: default; flex: none; }
.popwin--phone .popwin-head--phone .popwin-title { font-size: 17px; font-weight: 700; }
.popwin--phone .popwin-back { width: 40px; height: 40px; }
.popwin--phone .popwin-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: calc(24px + var(--safe-b)); max-height: none; }
/* His photo (2026-10-09). */
.avatar--owner { position: relative; overflow: hidden; }
.avatar-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.profile-photo-btn { position: relative; border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; }
.profile-photo-cam { position: absolute; inset-inline-end: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; border: 2px solid var(--surface); }
.profile-photo-cam .icon { width: 14px; height: 14px; }
.sheet-row--profile { gap: 12px; }

/* ==================================================================
   Genie (2026-10-09) — the Mac's minimise effect, both ways. A window opening rises out of a narrow point at the
   bottom and widens as it climbs; closing, it narrows at the bottom and is pulled down into it. Pages swirl in.
   "simple" keeps a plain fade; "off" moves nothing.
   ================================================================== */
@keyframes genie-in {
  0% { opacity: .3; transform: translateY(42vh) scale(.12, .08); clip-path: polygon(0 0, 100% 0, 58% 100%, 42% 100%); }
  45% { opacity: 1; transform: translateY(10vh) scale(.62, .62); clip-path: polygon(0 0, 100% 0, 78% 100%, 22% 100%); }
  100% { opacity: 1; transform: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes genie-out {
  0% { opacity: 1; transform: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  50% { opacity: 1; transform: translateY(12vh) scale(.6, .6); clip-path: polygon(0 0, 100% 0, 76% 100%, 24% 100%); }
  100% { opacity: 0; transform: translateY(46vh) scale(.08, .05); clip-path: polygon(0 0, 100% 0, 56% 100%, 44% 100%); }
}
@keyframes genie-page {
  0% { opacity: 0; transform: perspective(900px) translateY(18px) rotateX(7deg) scale(.95); filter: blur(4px); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; }
}
@keyframes simple-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes simple-out { to { opacity: 0; transform: translateY(8px); } }
html[data-motion="genie"] dialog.dlg[open]:not(.dlg--min):not(.is-closing), html[data-motion="genie"] .popwin:not(.popwin--phone):not(.is-min):not(.is-closing),
html[data-motion="genie"] .compose-layer:not(.is-min) .compose-panel, html[data-motion="genie"] .mailwin-panel { transform-origin: 50% 100%; animation: genie-in .42s cubic-bezier(.22, .8, .25, 1) backwards; }
html[data-motion="genie"] dialog.dlg.is-closing, html[data-motion="genie"] .popwin.is-closing:not(.popwin--phone) { transform-origin: 50% 100%; animation: genie-out .26s cubic-bezier(.55, 0, .75, .3) both; }
html[data-motion="genie"] .popwin--phone.is-closing { transform: translateY(100%); }
html[data-motion="genie"] .page.page--enter > * { animation: genie-page .36s cubic-bezier(.2, .8, .2, 1) both; }
html[data-motion="simple"] dialog.dlg[open]:not(.is-closing), html[data-motion="simple"] .popwin:not(.popwin--phone):not(.is-closing) { animation: simple-in .2s ease-out backwards; }
html[data-motion="simple"] dialog.dlg.is-closing, html[data-motion="simple"] .popwin.is-closing:not(.popwin--phone) { animation: simple-out .2s ease-in both; }
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { html[data-motion="genie"] * { animation-duration: .01ms !important; } }

/* ==================================================================
   Window buttons as Apple draws them (Ali, 2026-10-09: "icon metel Apple — la minimize, hide, close — MacBook
   experience 3al web, iPhone experience 3al iPhone"). On a computer: the three traffic lights, red close, yellow
   minimise, green full screen, the glyph appearing as the pointer comes over them. On the phone: one round glass ✕.
   ================================================================== */
html:not([data-touch]):not([data-win="windows"]) .dlg-win, html:not([data-touch]):not([data-win="windows"]) .popwin-acts, html:not([data-touch]):not([data-win="windows"]) .mtgwin-acts { display: flex; align-items: center; gap: 8px; }
html:not([data-touch]):not([data-win="windows"]) .winbtn--close, html:not([data-touch]):not([data-win="windows"]) .winbtn--min, html:not([data-touch]):not([data-win="windows"]) .winbtn--max {
  width: 13px !important; height: 13px !important; min-height: 0 !important; padding: 0; border-radius: 50%; border: .5px solid rgba(0, 0, 0, .16);
  display: inline-grid; place-items: center; color: transparent; flex: none; box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .5); transition: filter .12s; }
html:not([data-touch]):not([data-win="windows"]) .winbtn--close { background: #ff5f57; order: 1; }
html:not([data-touch]):not([data-win="windows"]) .winbtn--min { background: #febc2e; order: 2; }
html:not([data-touch]):not([data-win="windows"]) .winbtn--max { background: #28c840; order: 3; }
html:not([data-touch]):not([data-win="windows"]) .winbtn--ai { order: 4; margin-inline-start: 6px; }
html:not([data-touch]):not([data-win="windows"]) .winbtn--close svg, html:not([data-touch]):not([data-win="windows"]) .winbtn--min svg, html:not([data-touch]):not([data-win="windows"]) .winbtn--max svg { width: 8px; height: 8px; stroke-width: 3; }
html:not([data-touch]):not([data-win="windows"]) :is(.dlg-win, .popwin-acts, .mtgwin-acts):hover :is(.winbtn--close, .winbtn--min, .winbtn--max) { color: rgba(0, 0, 0, .55); }
html:not([data-touch]):not([data-win="windows"]) :is(.winbtn--close, .winbtn--min, .winbtn--max):hover { background-image: none; filter: brightness(.92); }
html:not([data-touch]):not([data-win="windows"]) .winbtn--close:hover, html:not([data-touch]):not([data-win="windows"]) .winbtn--close:focus-visible { background: #ff5f57; color: rgba(0, 0, 0, .55); }
/* The phone: a single round, frosted ✕ (iOS sheets). */
html[data-touch] .winbtn--close, html[data-touch] .popwin-back { width: 30px !important; height: 30px !important; min-height: 0 !important; border-radius: 50%; padding: 0; display: inline-grid; place-items: center;
  background: rgba(120, 120, 128, .16); color: var(--text-muted); border: 0; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
html[data-touch] .winbtn--close svg, html[data-touch] .popwin-back svg { width: 14px; height: 14px; stroke-width: 2.6; }
html[data-touch] .popwin-back { width: 34px !important; height: 34px !important; }
/* Settings with nothing opened: the groups side by side (2026-10-09). */
.settings-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.settings-index .list-row { border-radius: 10px; }
/* The switch at the top of a merged tab (2026-10-09). */
.page-switch { display: inline-flex; margin: 0 0 16px; padding: 3px; border-radius: 999px; }
.page-switch .seg-item { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 999px; text-decoration: none; color: var(--text-muted); font-weight: 600; }
.page-switch .seg-item[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.page-switch .seg-item .icon { width: 16px; height: 16px; }
@media (max-width: 600px) { .page-switch { display: flex; margin: 4px 0 12px; } .page-switch .seg-item { flex: 1; justify-content: center; } }
/* Settings: columns that pack, with room under the note (review, 2026-10-09). */
.settings-index { display: block; columns: 3 320px; column-gap: 16px; margin-top: 16px; }
.settings-index > .card { break-inside: avoid; margin: 0 0 16px; display: inline-block; width: 100%; }
.settings-index { columns: 2 380px; }

/* The lights on the LEFT, as on a Mac (Ali, 2026-10-09: "Apple bet7otton 3al shmel mesh yamin"). The start side,
   so an Arabic window mirrors them the way macOS does. */
.mac-lights { display: inline-flex; align-items: center; gap: 8px; flex: none; margin-inline-end: 12px; }
html:not([data-touch]):not([data-win="windows"]) .dlg-win { inset-inline-end: auto; inset-inline-start: 16px; top: 17px; gap: 8px; align-items: center; }
html:not([data-touch]):not([data-win="windows"]) dialog .dlg-head { padding-inline-end: var(--s5); padding-inline-start: calc(var(--s5) + 66px); }
html:not([data-touch]):not([data-win="windows"]) dialog.dlg--ai .dlg-head { padding-inline-start: calc(var(--s5) + 92px); }
html:not([data-touch]):not([data-win="windows"]) .mtgwin-head .mtgwin-acts { order: -1; margin-inline-end: 10px; }
html:not([data-touch]):not([data-win="windows"]) .askai-head :is(.winbtn--close, .winbtn--min, .winbtn--max) { order: -1; }
html:not([data-touch]):not([data-win="windows"]) .askai-head .winbtn--close { margin-inline-start: 2px; } html:not([data-touch]):not([data-win="windows"]) .askai-head .winbtn--max { margin-inline-end: 10px; }
html:not([data-touch]):not([data-win="windows"]) .askai-head { gap: 8px; }
html:not([data-touch]):not([data-win="windows"]) .ed-head .mac-lights .ed-btn { padding: 0; }
html:not([data-touch]):not([data-win="windows"]) .askai-head .winbtn--close { order: -3; } html:not([data-touch]):not([data-win="windows"]) .askai-head .winbtn--min { order: -2; } html:not([data-touch]):not([data-win="windows"]) .askai-head .winbtn--max { order: -1; }
/* Back to Settings, above a section's title. */
.settings-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 6px; color: var(--accent); font-weight: 600; text-decoration: none; font-size: 14px; }
.settings-back .icon { width: 16px; height: 16px; }
/* "+ New ⌄" is one rounded pill, its two halves meeting in the middle (2026-10-09: "ma2tou3a, lezem tkun round"). */
.btn--split { display: inline-flex; border-radius: 999px; overflow: hidden; }
.btn--split > .btn { border-radius: 0; }
.btn--split > .btn:first-child { border-start-start-radius: 999px; border-end-start-radius: 999px; padding-inline-start: 14px; }
.btn--split > .btn:last-child { border-start-end-radius: 999px; border-end-end-radius: 999px; padding-inline-end: 10px; border-inline-start: 1px solid rgba(255, 255, 255, .28); }
html:not([data-touch]):not([data-win="windows"]) dialog.dlg--ai .dlg-head { padding-inline-start: calc(var(--s5) + 112px); }
html:not([data-touch]):not([data-win="windows"]) .dlg-win .winbtn--ai { margin-inline-start: 8px; }
.page-header:has(> .settings-back), .page-head:has(> .settings-back) { flex-wrap: wrap; }
.settings-back { flex-basis: 100%; width: max-content; }
html:not([data-touch]):not([data-win="windows"]) .mac-lights > :is(.winbtn--close, .winbtn--min, .winbtn--max) { min-width: 0 !important; max-width: 13px; padding: 0 !important; flex: none; line-height: 0; }
html:not([data-touch]):not([data-win="windows"]) dialog.dlg--ai .dlg-head { padding-inline-start: calc(var(--s5) + 66px); padding-inline-end: calc(var(--s5) + 40px); }
.dlg-ai { position: absolute; top: 9px; inset-inline-end: 12px; z-index: 5; }
dialog.dlg--min .dlg-ai { display: none; }
/* The note at the top of Settings keeps its distance from what follows (2026-10-10). */
.card--scope { margin-bottom: 16px; }

/* Every window resizes from its corner on a computer (Ali, 2026-10-10: "bade kel pop-up bel system e2dar a3mel
   resize men el zawye, kabbir w zagghir — kénet mawjude"). The content grows with it. */
html:not([data-touch]) dialog.dlg:not(.dlg--min):not(.dlg--full):not(.dlg--drawer) { resize: both; overflow: hidden; min-width: 320px; min-height: 160px; max-width: 98vw; max-height: 96vh; }
/* The window is a column: its head stays, its body scrolls inside whatever height the window has — the one it
   opened at or the one it was resized to. (The first version let the content outgrow the window, so an ERP request
   could no longer be scrolled and its analysis, approvals and GRPO were cut off — 2026-10-10.) */
html:not([data-touch]) dialog.dlg[open]:not(.dlg--min) { display: flex; flex-direction: column; }
html:not([data-touch]) dialog.dlg[open]:not(.dlg--min) > .dlg-inner, html:not([data-touch]) dialog.dlg[open]:not(.dlg--min) > .dlg-form { flex: 1 1 auto; min-height: 0; max-height: 100%; }
html:not([data-touch]) dialog.dlg > .dlg-inner > .dlg-body, html:not([data-touch]) dialog.dlg > .dlg-form > .dlg-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
html:not([data-touch]) .popwin:not(.is-min):not(.is-full):not(.popwin--phone), html:not([data-touch]) .mailwin-panel, html:not([data-touch]) .compose-panel { resize: both; overflow: hidden; min-width: 340px; min-height: 200px; max-width: 98vw; max-height: 96vh; }
.crumb-back { margin-inline-end: 10px; color: var(--accent); font-weight: 600; } @media (min-width: 601px) { html:not([data-ios]) .crumb { display: flex; align-items: center; } }
html:not([data-touch]):not([data-win="windows"]) dialog .pane-head { padding-inline-start: calc(var(--s4) + 70px); }
.popwin .chatpop { display: flex; flex-direction: column; height: 100%; min-height: 360px; }
.popwin:has(.chatpop) .popwin-body { padding: 0; display: flex; flex-direction: column; }
.chat-rail-tabs .seg-item { padding-inline: 8px; font-size: 13px; min-width: 0; white-space: nowrap; } .chat-rail-tabs .chat-rail-count { margin-inline-start: 2px; }

/* An opening animation must leave nothing behind: a held transform would pin the window and it could no longer be
   dragged (2026-10-10: "abel kenet 7arrek ay pop window yamin aw shmel, hala2 la2"). */
html[data-ios] dialog.dlg[open] { animation-fill-mode: backwards; }
.sidebar-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px; color: var(--accent); font-weight: 600; font-size: 13px; text-decoration: none; }
.sidebar-back .icon { width: 15px; height: 15px; }
.sidebar-title-row { display: flex; align-items: center; gap: 8px; }
.sidebar-title-row .sidebar-back { margin: 0; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* The green light's menu (macOS "Move & Resize / Fill & Arrange"). */
.zoom-menu { position: fixed; z-index: 400; width: 236px; padding: 10px; border-radius: 14px; background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border: 1px solid var(--border); box-shadow: 0 18px 44px rgba(15, 23, 42, .22); animation: simple-in .14s ease-out; }
.zoom-menu-label { font-size: 11px; color: var(--text-faint); margin: 2px 4px 6px; }
.zoom-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.zoom-tile { height: 40px; border: 0; border-radius: 8px; background: transparent; display: grid; place-items: center; cursor: pointer; }
.zoom-tile:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.zoom-tile-frame { position: relative; width: 34px; height: 24px; border: 1.6px solid var(--text-muted); border-radius: 4px; }
.zoom-tile-fill { position: absolute; background: var(--text-muted); border-radius: 1px; }
.zoom-tile:hover .zoom-tile-frame { border-color: var(--accent); } .zoom-tile:hover .zoom-tile-fill { background: var(--accent); }
.zoom-sep { height: 1px; background: var(--border); margin: 2px 0 6px; }
.zoom-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; background: none; border-radius: 8px; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; text-align: start; }
.zoom-item:hover { background: var(--accent); color: #fff; }
.zoom-item .icon { width: 16px; height: 16px; }
/* A placed mail window or editor floats where it was put. */
.mailwin-panel.is-placed, .compose-panel.is-placed { position: fixed; margin: 0; }
.mailwin-head, .ed-head { cursor: default; user-select: none; }

/* A page inside a window of this app (embed=1): only the page. */
html[data-embed] .sidebar, html[data-embed] .rail, html[data-embed] .topbar, html[data-embed] .hairline, html[data-embed] .tabbar,
html[data-embed] .fab, html[data-embed] #connBanner, html[data-embed] .install-banner { display: none !important; }
html[data-embed] .app { display: block; }
html[data-embed] .page { padding: 0; max-width: none; height: 100vh; }
.wa-pop-frame { width: 100%; height: 100%; min-height: 520px; border: 0; display: block; }
.popwin:has(.wa-pop-frame) .popwin-body { padding: 0; height: calc(100% - 44px); }
.popwin:has(.wa-pop-frame) { width: min(560px, 92vw); height: min(760px, 88vh); }

/* WhatsApp as a grid of bubbles (2026-10-10). */
.wa-bubbles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px 8px; padding: 14px 10px; align-content: start; }
.wa-bubble { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border: 0; background: none; border-radius: 16px; cursor: pointer; color: var(--text); }
.wa-bubble:hover { background: var(--surface-2); }
.wa-bubble-pic { position: relative; }
.wa-bubble-avatar { width: 62px !important; height: 62px !important; font-size: 20px; box-shadow: 0 4px 14px rgba(15, 23, 42, .12); }
.wa-bubble.is-unread .wa-bubble-avatar { box-shadow: 0 0 0 3px #25d366, 0 4px 14px rgba(15, 23, 42, .12); }
.wa-bubble-badge { position: absolute; top: -4px; inset-inline-end: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; border: 2px solid var(--surface); }
.wa-bubble-group { position: absolute; bottom: -2px; inset-inline-end: -2px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: 0 1px 4px rgba(15, 23, 42, .2); }
.wa-bubble-group .icon { width: 13px; height: 13px; color: var(--text-muted); }
.wa-bubble-name { max-width: 100%; font-size: 12.5px; font-weight: 600; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-bubble.is-unread .wa-bubble-name { font-weight: 800; }
.wa-bubble-time { font-size: 11px; color: var(--text-faint); }
.wa-bubble-status { position: absolute; top: -8px; z-index: 2; padding: 2px 8px; border-radius: 999px; background: #25d366; color: #fff; font-size: 10.5px; font-weight: 700; white-space: nowrap; animation: ml-pulse-text 1.4s ease-in-out infinite; }
.wa-bubble { min-width: 0; width: 100%; }
.wa-bubble-name { display: block; width: 100%; max-width: 104px; white-space: normal; line-height: 1.25; max-height: 2.5em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* The phone's top bar: the page's name, big and clear, and his photo (2026-10-10). */
.topbar-phone-title { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-phone-me { border: 0; background: none; padding: 0; border-radius: 50%; flex: none; }

/* The assistant on the phone, tidied (2026-10-10): a clear "‹ Chats", no big avatar, clean bubbles, actions on long press. */
html[data-ios] .chat-back-btn { gap: 2px; padding-inline: 6px 10px; color: var(--accent); font-weight: 600; flex: none; }
html[data-ios] .page .assistant-top .chat-head { padding: 6px 8px; gap: 8px; }
html[data-ios] .page .assistant-top .chat-head > .avatar { display: none; }
html[data-ios] .page .assistant-top .chat-head-name { font-size: 17px; justify-content: center; }
html[data-ios] .msg-acts { display: none !important; }
html[data-ios] .msg.msg--acts-open .msg-acts { display: flex !important; }
html[data-ios] .msg--assistant > .avatar, html[data-ios] .msg--assistant > .ceo-avatar-sm, html[data-ios] .msg--assistant > [class*="avatar"] { display: none; }
html[data-ios] .msg--assistant .msg-body { background: var(--surface); border: 1px solid var(--border); border-radius: 18px 18px 18px 6px; padding: 10px 14px; max-width: 92%; }
html[data-ios] .msg--user .msg-body { border-radius: 18px 18px 6px 18px; }
html[data-ios] .thread { gap: 10px; }
html[data-ios] #moreSheet .sheet-foot { display: none; }

/* WhatsApp grid, full screen, floating (2026-10-10). */
.wa .wa-grid.wa-grid--bubbles { grid-template-columns: minmax(0, 1fr); }
.wa-grid--bubbles .wa-bubbles { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 26px 14px; padding: 26px 24px 40px; }
.wa-bubbles.is-entering { animation: wa-grid-in .45s cubic-bezier(.2, .9, .25, 1.05) backwards; }
.wa-grid--bubbles .wa-bubble-avatar { width: 78px !important; height: 78px !important; font-size: 24px; }
.wa-grid--bubbles .wa-bubble-name { max-width: 130px; font-size: 13.5px; }
@keyframes wa-grid-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes wa-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.wa-bubble .wa-bubble-pic { animation: wa-float 5.5s ease-in-out infinite; }
.wa-bubble:nth-child(3n) .wa-bubble-pic { animation-duration: 6.4s; animation-delay: -1.2s; }
.wa-bubble:nth-child(3n+1) .wa-bubble-pic { animation-duration: 4.9s; animation-delay: -2.6s; }
.wa-bubble:nth-child(4n+2) .wa-bubble-pic { animation-delay: -3.8s; }
.wa-bubble:hover .wa-bubble-pic { animation-play-state: paused; transform: scale(1.06); transition: transform .2s; }
/* The chat inside its window fills it: messages above, the box to write in at the very bottom. */
html[data-embed] .wa { height: 100vh; height: 100dvh; min-height: 0; }
html[data-embed] .wa .wa-grid { border-radius: 0; border: 0; }
html[data-embed] body, html[data-embed] .page { overflow: hidden; }
.popwin-head .popwin-title { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.popwin-head .popwin-title { display: block; text-align: start; unicode-bidi: plaintext; }
/* Liquid Glass must not turn a red button into a white one (2026-10-10: "Delete abyad, 7otta bel a7mar"). */
html[data-style="glass"] .btn.btn--danger, .dlg--confirm .btn--danger { background: var(--danger, #dc2626) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 6px 16px rgba(220, 38, 38, .3); }
html[data-style="glass"] .btn:not(.btn--primary):not(.btn--ghost):not([class*="btn--ok"]):not([class*="btn--amber"]):not([class*="btn--danger"]) { color: var(--text); }
/* The dock, smaller (2026-10-10: "el icon ktiir kbire"): 36 px icons, a photo when the window has one. */
.dock { padding: 5px 7px; gap: 4px; border-radius: 16px; }
.dock-open { width: 58px; gap: 2px; }
.dock-icon { position: relative; width: 36px; height: 36px; border-radius: 10px; overflow: hidden; }
.dock-icon .icon { width: 18px; height: 18px; }
.dock-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.dock-label { font-size: 10.5px; max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-icon--green { background: linear-gradient(145deg, #25d366, #128c7e); }
/* Floating chat windows. */
.popwin.popwin--float { position: fixed; display: flex; flex-direction: column; resize: both; overflow: hidden; min-width: 340px; min-height: 260px; }
.popwin.popwin--float[hidden] { display: none; }
.popwin.popwin--float .popwin-body { flex: 1 1 auto; min-height: 0; padding: 0; }
.popwin.popwin--float.is-full { inset: 8px !important; width: auto !important; height: auto !important; }
/* A Logistics board popup in a window (2026-10-24): the frame fills the window edge to edge, and on the phone it sits
   above a board that was put full screen. */
.board-pop-frame { flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; border: 0; display: block; background: transparent; }
.popwin:has(.board-pop-frame) .popwin-body { padding: 0; overflow: hidden; gap: 0; }
.popwin--phone:has(.board-pop-frame) { z-index: 95; }
.popwin--phone:has(.board-pop-frame) .popwin-body { padding: 0 0 var(--safe-b, 0px); }
.menu-item--danger, .menu-item--danger .icon { color: var(--danger, #dc2626) !important; } .menu-item--danger:hover { background: color-mix(in srgb, var(--danger, #dc2626) 10%, transparent); }

/* Buttons point like a Mac: the ordinary arrow, not a hand (2026-10-10: "ma tkun id, tkun mouse cursor"). Links in
   text keep the hand, because they are text. */
button, .btn, .winbtn, [role="button"], .seg-item, .menu-item, .chip, .tab, .nav-item, .sheet-row, .list-row--link, .dock-open, .zoom-tile, .wa-bubble, .wa-chat, .mail-row { cursor: default; }
/* Hidden is hidden: the window leaves the screen and only its icon waits in the dock (2026-10-10). */
.compose-layer.is-min, .mailwin.is-min, dialog.dlg.dlg--min, .popwin[hidden] { display: none !important; }
.mv-advanced > summary { list-style: none; display: flex; align-items: center; gap: 10px; font-weight: 700; cursor: default; }
.mv-advanced > summary::-webkit-details-marker { display: none; }
.mv-advanced[open] > summary .icon:last-child { transform: rotate(180deg); }
.theme-card--auto { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.theme-preview--split { display: flex !important; overflow: hidden; }
.theme-preview--split > span { flex: 1; height: 100%; position: static !important; inset: auto !important; }

/* ================================================================== The Notepad (2026-10-10) */
.nb { --nb-amber: #e8a400; display: grid; grid-template-columns: 220px 320px minmax(0, 1fr); height: calc(100vh - 110px); min-height: 520px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); }
.nb > * { min-height: 0; }
.nb-loading { display: grid; place-items: center; padding: 60px; }
.nb-side { background: var(--surface-2); border-inline-end: 1px solid var(--border); overflow: auto; padding: 12px 8px; }
.nb-side-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 8px 10px; }
.nb-side-head h2 { font-size: 17px; margin: 0; }
.nb-side-head .btn .icon + .icon { width: 11px; height: 11px; margin-inline-start: -6px; margin-top: 8px; }
.nb-folders { display: flex; flex-direction: column; gap: 2px; }
.nb-folder { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; border: 0; background: none; color: var(--text); font: inherit; font-size: 14px; text-align: start; }
.nb-folder .icon { color: var(--nb-amber); width: 17px; height: 17px; flex: none; }
.nb-folder:hover { background: var(--surface-3); }
.nb-folder[aria-current="true"] { background: color-mix(in srgb, var(--nb-amber) 22%, transparent); font-weight: 600; }
.nb-count { color: var(--text-faint); font-size: 12.5px; }
.nb-side-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); padding: 14px 10px 4px; }
.nb-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 8px; }
.nb-tag[aria-pressed="true"] { background: var(--nb-amber); color: #111; }
.nb-list { display: flex; flex-direction: column; border-inline-end: 1px solid var(--border); background: var(--surface); }
.nb-list-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 6px; }
.nb-list-title { flex: 1; min-width: 0; }
.nb-list-title h2 { font-size: 17px; margin: 0; }
.nb-list-tools { display: flex; gap: 4px; }
.nb-new { background: var(--nb-amber) !important; border-color: var(--nb-amber) !important; color: #111 !important; }
.nb-search-wrap { position: relative; margin: 4px 12px 8px; }
.nb-search-wrap > .icon { position: absolute; inset-inline-start: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-faint); }
.nb-search { width: 100%; padding: 8px 10px !important; padding-inline-start: 34px !important; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: 14px; }
.nb-rows { flex: 1; overflow: auto; padding: 0 8px 16px; }
.nb-group { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--text-muted); padding: 12px 8px 4px; }
.nb-group .icon { width: 13px; height: 13px; color: var(--nb-amber); }
.nb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t i" "m i"; width: 100%; gap: 2px 8px; padding: 9px 10px; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--text); font: inherit; text-align: start; border-radius: 0; }
.nb-row[aria-current="true"] { background: color-mix(in srgb, var(--nb-amber) 24%, transparent); border-radius: 9px; border-bottom-color: transparent; }
.nb-row-title { grid-area: t; font-weight: 650; font-size: 14.5px; }
.nb-row-meta { grid-area: m; display: flex; gap: 8px; min-width: 0; font-size: 13px; color: var(--text-muted); }
.nb-row-date { flex: none; color: var(--text); opacity: .8; }
.nb-row-snip { min-width: 0; }
.nb-row-icons { grid-area: i; display: flex; gap: 4px; align-self: center; color: var(--text-faint); }
.nb-row-icons .icon { width: 13px; height: 13px; }
.nb-rows--gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px 10px; padding: 8px 12px 20px; align-content: start; }
.nb-card { display: flex; flex-direction: column; gap: 4px; border: 0; background: none; padding: 0; text-align: center; color: var(--text); font: inherit; }
.nb-card-page { display: block; height: 150px; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); padding: 10px; font-size: 9.5px; line-height: 1.35; text-align: start; white-space: pre-wrap; color: var(--text-muted); }
.nb-card-title { font-weight: 650; font-size: 13px; }
.nb-card-date { font-size: 11.5px; color: var(--text-faint); }
.nb-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 50px 20px; color: var(--text-muted); text-align: center; }
.nb-empty > .icon { width: 40px; height: 40px; color: var(--nb-amber); }
.nb-empty--big { height: 100%; justify-content: center; }
.nb-deleted-hint { padding: 8px 10px; }
.nb-note { display: flex; flex-direction: column; min-width: 0; background: var(--surface); }
.nb-editor { display: flex; flex-direction: column; height: 100%; min-height: 0; position: relative; }
.nb-note-head { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.nb-toolbar { display: flex; align-items: center; gap: 2px; padding: 6px 10px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.nb-toolbar::-webkit-scrollbar { display: none; }
.nb-tool { display: inline-grid; place-items: center; width: 36px; height: 34px; flex: none; border: 0; border-radius: 9px; background: none; color: var(--nb-amber); position: relative; }
.nb-tool:hover { background: var(--surface-2); }
.nb-tool .icon { width: 19px; height: 19px; }
.nb-tool--ai { color: #8b5cf6; }
.nb-tool.is-recording { color: #dc2626; width: auto; padding: 0 10px; gap: 6px; display: inline-flex; animation: nb-rec 1.2s ease-in-out infinite; }
@keyframes nb-rec { 50% { background: color-mix(in srgb, #dc2626 16%, transparent); } }
.nb-rec-time { font-size: 13px; font-variant-numeric: tabular-nums; }
.nb-tool-sep { width: 1px; height: 22px; background: var(--border); margin: 0 6px; flex: none; }
.nb-scroll { flex: 1; overflow: auto; position: relative; -webkit-overflow-scrolling: touch; }
.nb-doc { max-width: 820px; margin: 0 auto; padding: 22px 28px 120px; outline: none; font-size: 16px; line-height: 1.55; color: var(--text); min-height: 100%; word-wrap: break-word; caret-color: var(--nb-amber); }
.nb-doc--small { font-size: 14.5px; } .nb-doc--large { font-size: 18px; } .nb-doc--xlarge { font-size: 20.5px; }
.nb-doc:empty::before { content: attr(data-placeholder); color: var(--text-faint); }
.nb-doc > * { margin: 0 0 .45em; }
.nb-doc h1 { font-size: 1.75em; font-weight: 800; line-height: 1.2; margin-bottom: .4em; }
.nb-doc h2 { font-size: 1.35em; font-weight: 750; margin-top: .6em; }
.nb-doc h3 { font-size: 1.1em; font-weight: 700; margin-top: .5em; }
.nb-doc pre { font-family: ui-monospace, Menlo, monospace; font-size: .9em; background: var(--surface-2); padding: 10px 12px; border-radius: 8px; white-space: pre-wrap; }
.nb-doc blockquote { border-inline-start: 3px solid var(--nb-amber); padding-inline-start: 12px; color: var(--text-muted); margin-inline: 0; }
.nb-doc ul, .nb-doc ol { padding-inline-start: 1.5em; }
.nb-doc ul.nb-dash { list-style: none; } .nb-doc ul.nb-dash > li::before { content: "–"; display: inline-block; width: 1.1em; margin-inline-start: -1.1em; }
.nb-doc ul.nb-check { list-style: none; padding-inline-start: 0; }
.nb-doc ul.nb-check > li { position: relative; padding-inline-start: 32px; min-height: 26px; margin: 3px 0; }
.nb-doc ul.nb-check > li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .15em; width: 20px; height: 20px; border-radius: 50%; border: 1.7px solid var(--text-faint); box-sizing: border-box; cursor: default; }
.nb-doc ul.nb-check > li[data-check="1"] { color: var(--text-faint); }
.nb-doc ul.nb-check > li[data-check="1"]::before { background: var(--nb-amber); border-color: var(--nb-amber); }
.nb-doc ul.nb-check > li[data-check="1"]::after { content: ""; position: absolute; inset-inline-start: 9px; top: calc(.15em + 4px); width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.nb-doc a { color: var(--accent); text-decoration: underline; }
.nb-doc img.nb-img { max-width: 100%; border-radius: 10px; display: block; margin: 8px 0; }
.nb-doc table.nb-table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: .95em; }
.nb-doc table.nb-table td, .nb-doc table.nb-table th { border: 1px solid var(--border-strong); padding: 6px 9px; min-width: 60px; vertical-align: top; }
.nb-doc table.nb-table th { background: var(--surface-2); font-weight: 700; text-align: start; }
.nb-doc mark.nb-find { background: #fde047; color: #111; border-radius: 3px; }
.nb-paper--lines { background-image: repeating-linear-gradient(to bottom, transparent 0 calc(1.55em - 1px), color-mix(in srgb, var(--text-faint) 25%, transparent) calc(1.55em - 1px) 1.55em); background-position: 0 22px; }
.nb-paper--grid { background-image: linear-gradient(color-mix(in srgb, var(--text-faint) 18%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--text-faint) 18%, transparent) 1px, transparent 1px); background-size: 24px 24px; }
.nb-paper--dots { background-image: radial-gradient(color-mix(in srgb, var(--text-faint) 45%, transparent) 1.1px, transparent 1.3px); background-size: 22px 22px; }
.nb-sketch, .nb-hand { margin: 12px 0 !important; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); position: relative; user-select: none; -webkit-user-select: none; }
.nb-canvas { display: block; width: 100%; -webkit-touch-callout: none; }
.nb-ink-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; padding: 6px 8px; border-top: 1px solid var(--border); background: var(--surface-2); }
.nb-ink-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--text-muted); }
.nb-ink-btn[aria-pressed="true"] { background: var(--surface-3); color: var(--nb-amber); }
.nb-ink-btn .icon { width: 17px; height: 17px; }
.nb-ink-color { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--surface); background: var(--c); box-shadow: 0 0 0 1px var(--border-strong); margin: 0 2px; }
.nb-ink-color[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--nb-amber); }
.nb-ink-w { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 7px; background: none; }
.nb-ink-w > span { width: var(--w); height: var(--w); border-radius: 50%; background: var(--text); }
.nb-ink-w[aria-pressed="true"] { background: var(--surface-3); }
.nb-ink-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.nb-hand { background: color-mix(in srgb, var(--nb-amber) 5%, var(--surface)); }
.nb-hand-status { padding: 6px 12px; border-top: 1px dashed var(--border); }
.nb-file, .nb-audio { border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; margin: 10px 0 !important; background: var(--surface-2); user-select: none; }
.nb-file-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nb-file-head > .icon { color: var(--nb-amber); flex: none; }
.nb-file-name { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; }
.nb-file-actions { display: flex; gap: 2px; flex: none; }
.nb-pdf { width: 100%; height: 420px; border: 0; border-radius: 8px; margin-top: 8px; background: #fff; }
.nb-audio audio { width: 100%; margin-top: 6px; }
.nb-transcript-box summary { font-size: 13px; color: var(--text-muted); margin-top: 6px; }
.nb-transcript { font-size: 14px; white-space: pre-wrap; }
.nb-table-bar { position: absolute; z-index: 5; display: flex; gap: 4px; flex-wrap: wrap; padding: 4px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 6px 20px rgba(0,0,0,.14); }
.nb-fm { font-weight: 500; width: 26px; text-align: center; }
.nb-fm--title { font-weight: 800; font-size: 18px; } .nb-fm--h2 { font-weight: 750; font-size: 16px; } .nb-fm--h3 { font-weight: 700; } .nb-fm--mono { font-family: ui-monospace, Menlo, monospace; }
.nb-swatches { display: flex; gap: 6px; }
.nb-swatch { width: 20px; height: 20px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px var(--border-strong); }
.nb-swatch--text { background: none; box-shadow: none; display: inline-grid; place-items: center; }
.nb-swatch--text::after { content: "A"; color: var(--c); font-weight: 800; }
.nb-swatch--none:not(.nb-swatch--text) { background: linear-gradient(135deg, transparent 45%, #dc2626 45% 55%, transparent 55%); }
.nb-ai-out { max-height: 55vh; overflow: auto; white-space: pre-wrap; line-height: 1.55; }
.nb-ai-out table { border-collapse: collapse; white-space: normal; } .nb-ai-out td, .nb-ai-out th { border: 1px solid var(--border); padding: 4px 8px; }
.nb-task-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.nb-full { position: fixed; inset: 0; z-index: 9000; background: var(--surface); display: flex; flex-direction: column; }
.nb-full-canvas { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; }
.nb-ink-bar--full { border-top: 0; border-bottom: 1px solid var(--border); padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); }
.nb-print { background: #fff; color: #111; padding: 0; }
.nb-doc--print { color: #111 !important; padding: 0 !important; max-width: none; background: none !important; }
.nb-doc--print table.nb-table td, .nb-doc--print table.nb-table th { border-color: #bbb; }
.nb-back { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; color: var(--nb-amber); font: inherit; font-size: 16px; padding: 6px 4px; }
.nb-done { border: 0; background: none; color: var(--nb-amber); font: inherit; font-weight: 700; font-size: 16px; padding: 6px 8px; }
.nb-note-head .btn--ghost { color: var(--nb-amber); }

/* The phone: one screen at a time — folders, the list, the note — with the tools over the keyboard. */
.nb--phone { display: block; height: auto; min-height: 0; border: 0; border-radius: 0; background: transparent; }
.nb--phone .nb-side, .nb--phone .nb-list { border: 0; background: transparent; padding: 0; }
.nb--phone .nb-folder { padding: 13px 12px; font-size: 16px; border-bottom: 1px solid var(--border); border-radius: 0; background: var(--surface); }
.nb--phone .nb-folders { border-radius: 14px; overflow: hidden; border: 1px solid var(--border); }
.nb--phone .nb-side-label { padding-top: 18px; }
.nb--phone .nb-tags { padding: 8px 0; }
.nb--phone .nb-list-head { padding: 4px 2px 8px; flex-wrap: wrap; }
.nb--phone .nb-list-head .nb-back { width: 100%; }
.nb--phone .nb-list-title h2 { font-size: 28px; font-weight: 800; }
.nb--phone .nb-search-wrap { margin: 2px 0 10px; }
.nb--phone .nb-rows { padding: 0; overflow: visible; }
.nb--phone .nb-row { background: var(--surface); padding: 12px 14px; }
.nb--phone .nb-row:first-of-type { border-radius: 12px 12px 0 0; }
.nb--phone .nb-new { width: 40px; height: 40px; border-radius: 50%; background: transparent !important; border-color: transparent !important; color: var(--nb-amber) !important; box-shadow: none !important; }
.nb--phone .nb-new .icon { width: 20px; height: 20px; }
.nb--phone .nb-date { display: block; text-align: center; padding: 4px 0 0; }
.nb--phone .nb-note { position: fixed; inset: 0; z-index: 60; background: var(--surface); padding-top: env(safe-area-inset-top); }
.nb--phone .nb-editor { height: 100%; }
.nb--phone .nb-note-head { border-bottom: 0; padding: 6px 10px; }
.nb--phone .nb-date { text-align: center; padding: 4px 0 0; }
.nb--phone .nb-doc { padding: 10px 18px 140px; }
.nb--phone .nb-toolbar { position: absolute; left: 0; right: 0; bottom: var(--nb-kb, 0px); justify-content: space-between; border-top: 1px solid var(--border); border-bottom: 0; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); z-index: 3; }
.nb--phone .nb-editor.nb-kb-open .nb-toolbar { padding-bottom: 6px; }
.nb--phone .nb-tool { width: 40px; height: 38px; }
.nb--phone .nb-tool-sep { display: none; }
html[data-nb-note] .tabbar, html[data-nb-note] .mobile-tabbar, html[data-nb-note] .bottom-nav { display: none !important; }
@media (max-width: 1100px) and (min-width: 601px) { .nb { grid-template-columns: 190px 270px minmax(0, 1fr); } }

/* ===== Assistant, 2026-10-10: three sections, Milou's face, one action each; the phone shows the list OR the chat. */
.avatar--milou { background: #fff; padding: 0; overflow: hidden; }
.avatar--milou img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.avatar--xs { width: 18px; height: 18px; min-width: 18px; border-radius: 50%; font-size: 9px; }
.avatar-wrap { position: relative; display: inline-flex; flex: none; }
.avatar-badge { position: absolute; inset-inline-end: -3px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; border: 2px solid var(--surface); }
.avatar-badge .icon { width: 9px; height: 9px; }
.chat-rail-tabs .seg-item .avatar--xs { margin-inline-end: 2px; }
.chat-rail-actions { display: flex; gap: 8px; margin-top: 10px; }
.chat-rail-actions .btn { justify-content: center; }
.chat-rail-actions .btn .avatar--xs { margin-inline-end: 4px; }
@media (max-width: 1199px) {
  /* Narrower than three columns: the list replaces the conversation instead of sitting on top of it. */
  .assistant:not(.assistant--no-rail):not(.assistant--embedded) > .assistant-main { display: none; }
  .assistant:not(.assistant--no-rail) > .chat-rail { max-height: none; border-bottom: 0; min-height: calc(100dvh - var(--topbar-h) - var(--tabbar-h, 0px) - 3px); }
}
@media (max-width: 600px) {
  /* The bar over the conversation stays put while the messages scroll under it. */
  .page--assistant .assistant-top { position: sticky; top: calc(var(--topbar-h) + var(--safe-t, 0px) + 3px); z-index: 15; background: var(--bg); margin: calc(-1 * var(--s3)) calc(-1 * var(--s3)) 0; padding: var(--s3) var(--s3) var(--s2); }
  .page--assistant .chat-rail-head { position: sticky; top: calc(var(--topbar-h) + var(--safe-t, 0px) + 3px); z-index: 15; background: var(--surface); padding-bottom: 8px; }
}

/* ✨ Ask AI stays on the phone (2026-10-10: "bl mobile ma fi ask AI bl ERP requests… bde ask AI bi kelchi"): a round
   button beside the ✕, the same size, tinted. */
html[data-touch] .dlg-win { gap: 8px; align-items: center; }
html[data-touch] .winbtn--ai { width: 30px !important; height: 30px !important; min-height: 0 !important; border-radius: 50%; padding: 0; display: inline-grid !important; place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); border: 0; }
html[data-touch] .winbtn--ai svg { width: 15px; height: 15px; }
html[data-touch] dialog.dlg--ai .dlg-head { padding-inline-end: calc(var(--s4) + 86px); }
.popwin-head .winbtn--ai { margin-inline-start: auto; flex: none; }
.mailwin-head .winbtn--ai { flex: none; }
.zoom-menu[popover] { margin: 0; inset: auto; position: fixed; overflow: visible; }
.chat-rail-tabs .seg-item { min-width: 0; overflow: hidden; gap: 5px; }
.chat-rail-tabs .seg-item .avatar--xs { flex: none; margin: 0; }
.chat-rail-tabs .seg-item:first-child { flex: 1.5 1 0; }
/* Notepad sharing (2026-10-10) */
.nb-share-btn { color: var(--nb-amber, #e8a400) !important; gap: 5px; }
.nb-share-n:not(:empty) { min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--nb-amber, #e8a400); color: #111; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.nb-share-search { width: 100%; }
.nb-share-results { display: flex; flex-direction: column; }
.nb-share-hit { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; text-align: start; }
.nb-share-hit:hover { background: var(--surface-2); }
.nb-share-hit .grow, .nb-share-who { display: flex; flex-direction: column; min-width: 0; }
.nb-share-name { font-weight: 600; font-size: 14px; }
.nb-share-label { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 6px; }
.nb-share-list { display: flex; flex-direction: column; }
.nb-share-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.nb-share-role { font-size: 13px; padding: 4px 6px; }
.nb-shared-banner { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: color-mix(in srgb, var(--nb-amber, #e8a400) 14%, var(--surface)); font-size: 13.5px; }
.nb-shared-banner .icon { color: var(--nb-amber, #e8a400); }
.brief-launches > li { padding: 4px 0; }
.brief-launch .stack-tight { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.brief-launch-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.brief-launch-wait { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #b45309; }
.brief-launch-wait .icon { width: 13px; height: 13px; }
.brief-launch-line { color: var(--text-muted); }
.chip--ok { background: color-mix(in srgb, #16a34a 16%, transparent); color: #15803d; border-color: transparent; }
.chip--warn { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; border-color: transparent; }
.chip--info { background: color-mix(in srgb, #2563eb 14%, transparent); color: #1d4ed8; border-color: transparent; }

/* Chat list tools: filters by source and sorting (2026-10-10). */
.chat-rail-tools { display: flex; align-items: center; gap: 6px; }
.chat-rail-filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; padding: 2px 0; }
.chat-rail-filters::-webkit-scrollbar { display: none; }
.chat-rail-filter { flex: none; cursor: default; }
.chat-rail-filter[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.chat-rail-sort { flex: none; }
/* The Notepad's open note is the whole screen on the phone: the app's own bar and tabs step aside so the two headers
   never overlap (2026-10-10: "header taba3 notepad feye bl header taba3 application"). */
html[data-nb-note] .topbar, html[data-nb-note] .hairline { visibility: hidden; }
.nb--phone .nb-note { padding-top: max(env(safe-area-inset-top), var(--safe-t, 0px)); z-index: 1000; }
.brief-launch-wait { display: block; } .brief-launch-wait .icon { vertical-align: -2px; margin-inline-end: 4px; }

/* Assistant list: + and Milou small, on the filters' line (2026-10-10). */
.chat-rail-new, .chat-rail-milou { flex: none; width: 34px !important; height: 34px !important; min-height: 0 !important; padding: 0 !important; border-radius: 50% !important; }
.chat-rail-milou { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.chat-rail-milou .avatar--sm { width: 30px; height: 30px; min-width: 30px; }
/* The Notepad's open note on the phone is a solid page — the glass style made it see-through, and the list behind it
   showed through the note's words (2026-10-10: "background blue, kel shi kalem feyet bi ba3do"). */
.nb-host .nb-note { background: #ffffff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html[data-theme="navy"] .nb-host .nb-note { background: #0B1220 !important; }
html[data-theme="midnight"] .nb-host .nb-note { background: #000000 !important; }
html[data-nb-note] .fab, html[data-nb-note] #askFab { display: none !important; }
html[data-style="glass"] .nb--phone .nb-row, html[data-style="glass"] .nb--phone .nb-folder { background: color-mix(in srgb, var(--surface) 92%, transparent); }

/* The Notepad's tools on the phone: a floating Liquid Glass bar over the note, as in iOS 26 (2026-10-10). */
.nb--phone .nb-toolbar {
  left: 12px; right: 12px; bottom: calc(var(--nb-kb, 0px) + max(10px, env(safe-area-inset-bottom)));
  padding: 6px 8px !important; border-radius: 26px; border: 0.5px solid color-mix(in srgb, #fff 55%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, #fff 62%, transparent), color-mix(in srgb, #fff 40%, transparent)) !important;
  -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .16), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.nb--phone .nb-editor.nb-kb-open .nb-toolbar { bottom: calc(var(--nb-kb, 0px) + 8px); }
html[data-theme="navy"] .nb--phone .nb-toolbar, html[data-theme="midnight"] .nb--phone .nb-toolbar {
  border-color: color-mix(in srgb, #fff 14%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, #1e293b 72%, transparent), color-mix(in srgb, #0f172a 58%, transparent)) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.nb--phone .nb-tool { border-radius: 50%; }
.nb--phone .nb-tool:active { background: color-mix(in srgb, var(--nb-amber, #e8a400) 18%, transparent); }
.nb--phone .nb-doc { padding-bottom: 160px; }

/*
 * Glass, readable — everything that floats over the page (2026-10-10: "search email… bytla3 popup mesh mbayan chi…
 * chufa raje3 system kello"). The panes may show what is behind them; a popup the eye has to read must not: the AI
 * search, menus, contact and emoji pickers, the editor's pop-ups, toasts, the zoom menu, sheets and windows are
 * nearly solid, keeping only the blur and the rim.
 */
html[data-style="glass"] :is(.mail-search-pop, .menu, .contact-pop, .ed-pop, .emoji-picker, .wa-emoji-pop, .wa-bub-menu, .zoom-menu, .toast, .slash-menu, .compose-panel, .popwin, .mailwin-panel, #ceoPane, .gsearch-panel, [role="listbox"], [role="menu"]) {
  background-color: rgba(255, 255, 255, .985) !important;
}
html[data-style="glass"]:not([data-theme="light"]) :is(.mail-search-pop, .menu, .contact-pop, .ed-pop, .emoji-picker, .wa-emoji-pop, .wa-bub-menu, .zoom-menu, .toast, .slash-menu, .compose-panel, .popwin, .mailwin-panel, #ceoPane, .gsearch-panel, [role="listbox"], [role="menu"]) {
  background-color: rgba(17, 26, 43, .985) !important;
}
html[data-style="glass"] dialog.dlg { background-color: rgba(255, 255, 255, .96) !important; }
html[data-style="glass"]:not([data-theme="light"]) dialog.dlg { background-color: rgba(17, 26, 43, .97) !important; }
html[data-style="glass"][data-theme="midnight"] :is(.mail-search-pop, .menu, .contact-pop, .ed-pop, .emoji-picker, .wa-emoji-pop, .zoom-menu, .toast, .popwin, dialog.dlg) { background-color: rgba(10, 10, 11, .97) !important; }
/* The Notepad on the phone: navy stays navy (the note was white in the navy theme). */
html:not([data-theme="light"]) .nb-host .nb-note { background: #0B1220 !important; }
html[data-theme="midnight"] .nb-host .nb-note { background: #000 !important; }
/* All the Notepad's tools fit the glass bar on a phone — the last one was cut at the edge. */
.nb--phone .nb-toolbar { justify-content: space-between; gap: 0; }
.nb--phone .nb-tool { width: 33px !important; height: 36px; }
.nb--phone .nb-tool .icon { width: 18px; height: 18px; }
.mail-details--phone > summary { display: none; } .mail-details--phone { margin: 4px 0 8px; } .mail-details-btn[aria-expanded="true"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.mail-details-btn { display: inline-flex; align-items: center; gap: 4px; flex: none; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); border-radius: 999px; padding: 3px 9px; font: inherit; font-size: 12px; margin-inline-start: 6px; }
.mail-details-btn .icon { width: 13px; height: 13px; }
.mail-details-btn[aria-expanded="true"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
/* Email search: the page behind it blurs (2026-10-10). */
.mail-search-scrim { position: fixed; inset: 0; z-index: 57; background: rgba(15, 23, 42, .18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: simple-in .15s ease-out; }
/* The reading header on the phone is solid: in the glass style the message text showed through it. */
html[data-style="glass"] .mail-read-head { background-color: rgba(255, 255, 255, .97) !important; }
html[data-style="glass"]:not([data-theme="light"]) .mail-read-head { background-color: rgba(17, 26, 43, .97) !important; }
/* Momentum scrolling and no scroll chaining inside the mail columns on touch. */
.mail-list-scroll, .mail-read { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.erq-fail { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--danger, #dc2626) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger, #dc2626) 35%, transparent); color: var(--text); font-size: 13.5px; } .erq-fail > .icon { color: var(--danger, #dc2626); }
.mail-row--pressed { background: color-mix(in srgb, var(--accent) 12%, transparent) !important; transition: background .15s; } @media (max-width: 600px) { .mail-row { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } }
/* The AI assistant's button reads as AI: the sparkle, in Milou's colours (2026-10-10). */
.btn-askceo .ai-glyph { width: 20px; height: 20px; color: #7c3aed; filter: drop-shadow(0 1px 3px rgba(124, 58, 237, .3)); }
html:not([data-theme="light"]) .btn-askceo .ai-glyph { color: #a78bfa; }

/* ---- What the emails say about a request, and the mail opened with its quoted words in yellow (2026-10-11) ---- */
.erp-mailnote { border: 1px solid var(--border, rgba(127,127,127,.25)); border-radius: 12px; padding: 10px 12px; margin: 8px 0; background: color-mix(in srgb, var(--accent, #4f46e5) 5%, transparent); }
.erp-mailnote .mail-summary-label { display: flex; align-items: center; gap: 6px; }
.erp-mailnote .mail-summary-label svg { width: 14px; height: 14px; }
.erp-mailfinds { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.erp-mailfinds li { display: flex; flex-direction: column; gap: 4px; }
.erp-mailref { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; align-self: flex-start; border: 1px solid var(--border, rgba(127,127,127,.3)); background: var(--surface, transparent); color: inherit; border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.erp-mailref:hover { border-color: var(--accent, #4f46e5); }
.erp-mailref svg { width: 13px; height: 13px; flex: none; }
.erp-mailref bdi { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailquote-dlg { width: min(760px, calc(100vw - 32px)); }
.mailquote-dlg .dlg-body { display: flex; flex-direction: column; gap: 10px; }
.mailquote-meta { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.mailquote-subject { font-weight: 600; }
.mailquote-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.55; max-height: 62vh; overflow: auto; padding: 10px 12px; border-radius: 10px; background: var(--surface-2, rgba(127,127,127,.07)); }
.mailquote-mark { background: #fde047; color: #111; border-radius: 3px; padding: 0 2px; }
.mailquote-mark.is-focus { background: #facc15; box-shadow: 0 0 0 2px #eab308; }
.mailquote-miss { margin-bottom: 6px; }
@media (max-width: 640px) { .mailquote-body { max-height: 58vh; } }
/* A long sender · subject chip must shorten itself, never widen the request window on the phone. */
.erp-analysis, .erp-mailnote, .erp-mailfinds, .erp-mailfinds li { min-width: 0; max-width: 100%; box-sizing: border-box; }
.erp-mailnote { overflow: hidden; }
.erp-mailref { overflow: hidden; }
.erp-mailref .caption { flex: none; }

/* Panes move by their title bar on the web (2026-10-12) — Ask AI, task, project, ticket, agent. */
.pane-head--drag { cursor: grab; }
.pane.is-placed { margin: 0; }
.pane.is-dragging { opacity: 1; transition: none; user-select: none; }
.pane.is-dragging .pane-head--drag { cursor: grabbing; }
html[data-ios] .pane-head--drag { cursor: auto; }
/* ✨ pressed inside the mail's own window (or the reply editor) opened Ask AI behind it — it comes on top. */
body:has(> .mailwin:not(.is-min), > .compose-layer:not(.is-min)) #ceoPane { z-index: 90; }
/* Web: Details sits in the header after the emoji; the box opens under the header (2026-10-13). */
.mail-details--web > summary { display: none; } .mail-details--web { margin: 4px var(--s4) 8px; }
.thread-acts { align-items: center; } .thread-acts .mail-details-btn { margin-inline: 2px 4px; }
/* A narrow reading pane keeps the sender's name: Details shrinks to its icon (tooltip says "Details"). */
html:not([data-ios]) .thread-msg { container-type: inline-size; }
@container (max-width: 620px) { .thread-acts .mail-details-btn > span { display: none; } .thread-acts .mail-details-btn { padding: 3px 7px; } }
/* Writing suggestion: a small bubble pointing at the caret, gone after 3 s (2026-10-13). */
.ed-suggest { position: fixed; z-index: 2000; max-width: min(420px, calc(100vw - 16px)); display: flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 12px; border-radius: 12px; background: var(--surface, #fff); color: var(--text); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: 0 6px 20px rgba(15, 23, 42, .14); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: calc(13px * var(--text-scale, 1)); line-height: 1.4; cursor: pointer; user-select: none;
  animation: ed-suggest-in .14s ease-out; }
.ed-suggest::after { content: ""; position: absolute; left: var(--tail, 16px); width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg);
  border: inherit; border-width: 0 1px 1px 0; bottom: -6px; }
.ed-suggest[data-side="below"]::after { bottom: auto; top: -6px; border-width: 1px 0 0 1px; }
.ed-suggest-text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ed-suggest-key { flex: none; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); font-size: 11px; font-weight: 600; }
.ed-suggest:hover { border-color: var(--accent); }
@media (hover: none) and (pointer: coarse) { .ed-suggest-key { color: var(--accent); border-color: var(--accent); } }
@keyframes ed-suggest-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
/* To / Cc: one line that wraps to more as addresses are added (2026-10-13). */
textarea.ed-addr { min-height: 40px; height: 40px; max-height: 132px; resize: none; overflow-y: auto; line-height: 1.5; padding-block: 8px; overflow-wrap: anywhere; white-space: pre-wrap; }
.ed-fields .row > textarea.ed-addr { flex: 1 1 auto; min-width: 0; }
@media (max-width: 600px) { .compose-panel .ed-fields textarea.ed-addr { min-height: 44px; padding-inline: 12px; border-radius: 10px; } }
/* ---- Khayrat After Sales (2026-10-13) ---- */
.as-page .tk-tabs { margin-bottom: var(--s3); }
.as-select { width: auto; height: 34px; padding: 4px 10px; font-size: calc(13px * var(--text-scale)); }
.as-filters { flex-wrap: wrap; gap: var(--s2); }
.as-filters .fin-find { flex: 1 1 200px; min-width: 160px; height: 34px; }
.as-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s4); }
.as-grid--3 { margin-top: var(--s4); gap: var(--s3); }
.as-h2 { font-size: calc(14px * var(--text-scale)); margin: 0; }
.as-h3 { font-size: calc(12px * var(--text-scale)); margin: 0; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.as-bars { display: flex; flex-direction: column; gap: 6px; }
.as-bar { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(60px, 1fr) auto; align-items: center; gap: 8px; padding: 2px 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; }
button.as-bar { cursor: pointer; border-radius: var(--r-sm); } button.as-bar:hover { background: var(--surface-2); }
.as-bar-label { font-size: calc(13px * var(--text-scale)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-bar-track { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.as-bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.as-bar-n { font-size: calc(12px * var(--text-scale)); white-space: nowrap; }
.as-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); align-items: start; }
.as-split.has-detail { grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); }
.as-split-list { min-width: 0; }
.as-list { display: flex; flex-direction: column; gap: 6px; }
.as-row { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: inherit; font: inherit; text-align: start; cursor: pointer; }
.as-row:hover { border-color: var(--border-strong); } .as-row.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.as-row-top { display: flex; align-items: center; gap: 6px; }
.as-row-what { font-weight: 600; font-size: calc(13.5px * var(--text-scale)); }
.as-more { align-self: center; margin-top: var(--s2); }
.as-detail { min-width: 0; position: sticky; top: var(--s3); max-height: calc(100vh - 120px); overflow-y: auto; padding-bottom: var(--s4); }
.as-detail-head { display: flex; align-items: flex-start; gap: var(--s2); }
.as-ticket-no { margin: 0; font-size: calc(18px * var(--text-scale)); }
.as-phone { text-decoration: none; }
.as-headline { font-weight: 600; margin: 0; }
.as-story, .as-ul { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 3px; font-size: calc(13px * var(--text-scale)); }
.as-next { padding: 8px 10px; border-radius: var(--r); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.as-brief { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.as-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.as-fact { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; border-radius: var(--r-sm); background: var(--surface-2); }
.as-fact-k { font-size: calc(11.5px * var(--text-scale)); color: var(--text-muted); }
.as-fact-v { font-size: calc(13.5px * var(--text-scale)); font-weight: 600; }
.as-fact--over { background: color-mix(in srgb, var(--danger) 12%, transparent); } .as-fact--over .as-fact-v { color: var(--danger); }
.as-timeline { display: flex; flex-wrap: wrap; gap: 4px 0; padding-top: 4px; }
.as-step { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1 1 90px; position: relative; text-align: center; }
.as-step::before { content: ""; position: absolute; top: 5px; inset-inline: 0; height: 2px; background: var(--border); z-index: 0; }
.as-step-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); position: relative; z-index: 1; }
.as-step.is-missing .as-step-dot { background: var(--surface-3); border: 2px solid var(--border-strong); }
.as-step-label { font-size: calc(11.5px * var(--text-scale)); color: var(--text-muted); }
.as-step-at { font-size: calc(12.5px * var(--text-scale)); font-weight: 600; }
.as-fold > summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.as-fold[open] > summary { margin-bottom: var(--s2); }
.as-chat { display: flex; flex-direction: column; gap: 6px; max-height: 520px; overflow-y: auto; padding: 4px; }
.as-msg { max-width: 82%; padding: 6px 10px; border-radius: 12px; background: var(--surface-2); }
.as-msg--out { align-self: flex-end; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.as-msg-text { white-space: pre-wrap; font-size: calc(13.5px * var(--text-scale)); }
.as-comp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--border); } .as-comp:last-child { border-bottom: 0; }
.as-note { padding: 6px 0; border-bottom: 1px solid var(--border); } .as-note:last-child { border-bottom: 0; }
@media (max-width: 900px) { .as-split.has-detail { grid-template-columns: minmax(0, 1fr); } .as-detail { position: static; max-height: none; } }

/* After Sales — the quick review on the Overview (2026-10-13). */
.as-review { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.as-review .as-ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 4px; }
.as-review .as-ul.as-next { padding-inline-start: 28px; }
.as-chase { display: grid; gap: 6px; }
.as-chase-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.as-chase-row:last-child { border-bottom: 0; }
.as-chase-row .small { flex: 1 1 220px; }

/* Search on the phone, readable (Ali, 2026-10-16: "search bl top bar bl milou al android mano wadeh … feyet bl
   background … khale kelchi ysir tahto blue"): the magnifier is a clear blue button, and the search opens on a
   solid page under a blue bar — never on the see-through glass surface. */
.gsearch-trigger { background: linear-gradient(135deg, #2563eb, #4f46e5) !important; color: #fff !important; border-radius: 999px !important;
  width: 38px; height: 38px; box-shadow: 0 4px 14px rgba(37, 99, 235, .35); }
.gsearch-trigger .icon { color: #fff; }
.gsearch-sheet { background: #0b1220 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html[data-theme="light"] .gsearch-sheet { background: #f6f8fb !important; }
.gsearch-sheet-bar { background: linear-gradient(135deg, #1d4ed8, #4f46e5); border-bottom: 0 !important; padding: calc(var(--safe-t, 0px) + 12px) 12px 12px; }
.gsearch-sheet-bar .gsearch-icon, .gsearch-sheet-bar .btn .icon { color: #fff !important; }
.gsearch-sheet-bar .gsearch-input { background: #fff !important; color: #0f172a !important; border-radius: 12px !important; padding: 0 14px !important; height: 44px; }
.gsearch-sheet-bar .gsearch-input::placeholder { color: #64748b; }
.gsearch-sheet .gsearch-filters { background: transparent !important; }
.gsearch-sheet .gsearch-chip { background: #17233a; border: 1px solid #243049; color: #e5ecf6; }
html[data-theme="light"] .gsearch-sheet .gsearch-chip { background: #fff; border-color: #dbe3ef; color: #0f172a; }
.gsearch-sheet .gsearch-chip.is-on { background: #2563eb !important; color: #fff !important; border-color: transparent; }
.gsearch-sheet .gsearch-row { background: #111a2b; color: #e5ecf6; margin-bottom: 6px; border-radius: 12px; }
html[data-theme="light"] .gsearch-sheet .gsearch-row { background: #fff; color: #0f172a; }

/* ==== 2026-10-18: styles written 2026-10-13/14 that never reached the server (the JS for them was live, so these
   screens ran unstyled — e.g. the ⟳ refresh button showed on every window, over the attachment viewer's download).
   Copied from the local styles.css as they stand. ==== */
/* One calendar for a from–to window (2026-10-13). */
.range-btn { gap: 6px; }
.range-btn .small { margin-inline-start: 2px; }
.range-pop { position: fixed; z-index: 70; display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: 0 12px 32px rgba(0,0,0,.18); }
.range-presets { display: flex; flex-direction: column; gap: 2px; border-inline-end: 1px solid var(--border); padding-inline-end: 10px; }
.range-preset { text-align: start; padding: 7px 10px; border: 0; background: none; border-radius: var(--r-sm); color: var(--text); cursor: pointer; font: inherit; font-size: calc(13px * var(--text-scale)); }
.range-preset:hover { background: var(--surface-2); }
.range-preset.is-on { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 600; }
.range-cal { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.range-top { display: flex; align-items: center; gap: 6px; }
.range-top strong { text-align: center; }
.range-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; }
.range-wd { text-align: center; font-size: 11px; color: var(--text-muted); padding: 4px 0; }
.range-day { height: 34px; border: 0; background: none; font: inherit; font-size: calc(13px * var(--text-scale)); color: var(--text); cursor: pointer; border-radius: 0; }
.range-day:hover:not(:disabled) { background: var(--surface-2); border-radius: var(--r-sm); }
.range-day:disabled { color: var(--text-muted); opacity: .4; cursor: default; }
.range-day.is-in { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.range-day.is-start, .range-day.is-end { background: var(--accent); color: #fff; font-weight: 600; }
.range-day.is-start { border-start-start-radius: 8px; border-end-start-radius: 8px; }
.range-day.is-end { border-start-end-radius: 8px; border-end-end-radius: 8px; }
.range-day.is-today:not(.is-start):not(.is-end) { box-shadow: inset 0 0 0 1px var(--accent); border-radius: 8px; }
@media (max-width: 560px) { .range-pop { grid-template-columns: 1fr; } .range-presets { flex-direction: row; flex-wrap: wrap; border-inline-end: 0; border-bottom: 1px solid var(--border); padding: 0 0 8px; } }

/* After Sales — the tickets behind a number (2026-10-13). */
.as-pop .as-pop-body { padding-top: 0; }
.as-pop-scroll { max-height: min(60vh, 560px); overflow: auto; border: 1px solid var(--border); border-radius: var(--r-sm); }
.as-table { width: 100%; border-collapse: collapse; font-size: calc(13px * var(--text-scale)); }
.as-table th { position: sticky; top: 0; background: var(--surface-2); text-align: start; font-weight: 600; padding: 8px 10px; white-space: nowrap; z-index: 1; }
.as-table td { padding: 7px 10px; border-top: 1px solid var(--border); vertical-align: top; }
.as-trow { cursor: pointer; }
.as-trow:hover, .as-trow:focus-visible { background: var(--surface-2); outline: none; }
.as-bar[type="button"] { cursor: pointer; }
dialog.dlg.as-pop { width: min(1120px, calc(100vw - 32px)); max-width: none; }
.as-td-when { white-space: nowrap; }
.as-table td:first-child { white-space: nowrap; }

/* Gddam (2026-10-13). */
.gd-actions { display: grid; gap: 6px; }
.gd-action { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-2); }
.gd-action-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; border: 0; background: none; padding: 0; font: inherit; color: var(--text); text-align: start; cursor: pointer; }
.gd-action-main:hover strong { text-decoration: underline; }
.gd-scroll { max-height: none; }
.gd-scroll .as-table td a { text-decoration: none; }
.gd-event { padding: 6px 0; border-bottom: 1px solid var(--border); }
.gd-event:last-child { border-bottom: 0; }
.gd-scroll .as-table td { padding: 7px 8px; }
.gd-scroll .as-table td:last-child, .gd-scroll .as-table th:last-child { white-space: nowrap; }
.gd-ints { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.gd-int { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--r-sm); background: var(--surface-2); }
.gd-int .seg-item.gd-seg--on[aria-pressed="true"] { background: color-mix(in srgb, var(--ok, #16a34a) 18%, transparent); color: var(--ok, #16a34a); }
.gd-int .seg-item.gd-seg--progress[aria-pressed="true"] { background: color-mix(in srgb, #d97706 18%, transparent); color: #b45309; }
.gd-int .seg-item.gd-seg--off[aria-pressed="true"] { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.gd-note { padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-2); display: flex; flex-direction: column; gap: 4px; }
.gd-note--issue { border-inline-start: 3px solid var(--danger); }
.gd-note.is-done { opacity: .65; border-inline-start-color: var(--border); }
.gd-live { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--border); background: none; font: inherit; color: var(--text); text-align: start; cursor: pointer; }
.gd-live:hover { background: var(--surface-2); }
.gd-live:last-child { border-bottom: 0; }
.gd-name { border: 0; background: none; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-align: start; }
.gd-name:hover { text-decoration: underline; }
dialog.dlg.gd-store-dlg { width: min(960px, calc(100vw - 32px)); max-width: none; }
.as-link { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: start; cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 3px; }
.as-link:hover { color: var(--accent); }
button.as-chase-row { width: 100%; border: 0; border-bottom: 1px solid var(--border); background: none; font: inherit; color: var(--text); text-align: start; cursor: pointer; }
button.as-chase-row:hover { background: var(--surface-2); }
.as-chase-go { margin-inline-start: auto; color: var(--text-muted); }
.as-items summary { cursor: pointer; color: var(--text-muted); }
.gd-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.gd-member { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); }
.gd-member p { margin: 0; }
/* The assistant's designs (2026-10-13). */
.action-card--design { display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.design-open { padding: 0; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); cursor: zoom-in; overflow: hidden; }
.design-thumb { display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; }

/* Behind open windows (2026-10-13): the page blurred and still; the windows sharp above. */
.win-blur { position: fixed; inset: 0; z-index: 45; background: color-mix(in srgb, var(--bg) 22%, transparent); backdrop-filter: blur(7px) saturate(.9); -webkit-backdrop-filter: blur(7px) saturate(.9); animation: win-blur-in .18s ease-out; }
@keyframes win-blur-in { from { opacity: 0; } to { opacity: 1; } }
html.win-open, html.win-open body { overflow: hidden; }
html.win-open dialog.dlg::backdrop { background: transparent; }
html.win-open #ceoPane { z-index: 90; }

/* Milou: slide up to lock (2026-10-14). */
.ml-hold-wrap { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; }
.ml-lock-hint { position: absolute; bottom: calc(100% + 10px + var(--lift, 0px)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 12px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--text); box-shadow: 0 6px 20px rgba(0,0,0,.25); font-size: 12px; white-space: nowrap; pointer-events: none; }
.ml-lock-hint[hidden] { display: none; }
.ml-lock-hint .icon { width: 18px; height: 18px; }
.ml-lock-arrow { line-height: .8; font-size: 16px; animation: ml-lock-nudge 1s ease-in-out infinite; }
@keyframes ml-lock-nudge { 0%, 100% { transform: translateY(2px); opacity: .5; } 50% { transform: translateY(-3px); opacity: 1; } }
.ml-hold { touch-action: none; }
.ml-hold.is-locked { background: linear-gradient(135deg, #16a34a, #22c55e); }
.ml-hold-ico { display: inline-flex; }
.brief-box h2 .brief-open { margin-inline-start: auto; font-weight: 500; }

/* ERP checks (2026-10-14). */
.chk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.chk-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); font: inherit; text-align: start; cursor: pointer; min-width: 0; }
.chk-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.chk-card .chk-count { font-size: 22px; font-weight: 700; color: var(--ok, #16a34a); }
.chk-card.is-bad .chk-count { color: var(--danger); }
.chk-card .ellipsis { display: block; max-width: 100%; }
.chk-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); margin-inline-start: 6px; vertical-align: middle; }
.sc-row--bad td { background: color-mix(in srgb, var(--danger) 7%, transparent); }
.sc-row--warn td { background: color-mix(in srgb, #f59e0b 9%, transparent); }
/* Milou: big while he talks, back when he lets go (2026-10-14). */
.ml-orb { transition: transform .25s ease; }
.ml-orb.is-recording { transform: scale(1.35); }
.ml-orb.is-recording .ml-orb-core { animation-duration: 2.5s; filter: saturate(1.3) brightness(1.1); }
.ml-cancel-hint { font-size: 11px; opacity: .7; }
/* Send by WhatsApp — always green (2026-10-14). */
.btn--wa { background: #22c55e; border-color: #16a34a; color: #fff; }
.btn--wa:hover:not(:disabled) { background: #16a34a; color: #fff; }
.btn--wa:disabled { opacity: .55; }
.msg-act--wa { color: #16a34a; }
.wa-send-list { max-height: 220px; overflow: auto; border: 1px solid var(--border); border-radius: var(--r-sm); margin-top: 6px; }
.wa-send-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.wa-send-row:hover { background: var(--surface-2); }
.wa-send-row.is-on { background: color-mix(in srgb, #22c55e 16%, transparent); font-weight: 600; }
.wa-send-chosen { margin-top: 6px; }
/* Toasts in the top layer (2026-10-14): undo the popover's own box so they sit where they always did. */
#toasts[popover] { margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: visible; width: auto; height: auto; inset: auto; inset-inline-end: 16px; bottom: calc(16px + var(--safe-b)); }
#toasts[popover]:not(:popover-open) { display: none; }
#toasts[popover]:popover-open { display: flex; }
@media (max-width: 899px) { #toasts[popover] { inset-inline: 12px; bottom: calc(var(--tabbar-h) + 12px + var(--safe-b)); } }
html.mv-open #toasts[popover] { bottom: auto; top: calc(76px + env(safe-area-inset-top, 0px)); inset-inline: 0; margin-inline: auto; }
.wa-send-result { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-sm); font-weight: 600; }
.wa-send-result.is-ok { background: color-mix(in srgb, #22c55e 16%, transparent); color: #15803d; }
.wa-send-result.is-bad { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
/* The calendar is solid, whatever the theme (2026-10-14: "calendar tkun wadha, full color — nos mane chayef"). */
.range-pop { background-color: var(--bg); background-image: linear-gradient(var(--surface), var(--surface)); opacity: 1; backdrop-filter: none; z-index: 2500; }
/* Glass: floating panels are solid so what is under them never shows through (2026-10-14). The cards keep the glass. */
html[data-style="glass"] :is(.range-pop, .menu, .mail-search-pop, .contact-pop, .ed-pop, .mention-pop, .reaction-menu, .ed-suggest, .ml-lock-hint) {
  background-color: var(--bg); background-image: linear-gradient(var(--surface), var(--surface)); backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-style="glass"]:not([data-theme="light"]) :is(.range-pop, .menu, .mail-search-pop, .contact-pop, .ed-pop, .mention-pop, .reaction-menu, .ed-suggest) { background-color: #0d1424; }
html[data-style="glass"] dialog.dlg { background-color: var(--bg); }
/* Send by WhatsApp stays green in every theme (2026-10-14). */
html .btn.btn--wa, html[data-style="glass"] .btn.btn--wa { background: #22c55e !important; border-color: #16a34a !important; color: #fff !important; box-shadow: 0 6px 16px rgba(34, 197, 94, .28); -webkit-backdrop-filter: none; backdrop-filter: none; }
html .btn.btn--wa:hover:not(:disabled) { background: #16a34a !important; }
html .btn.btn--wa:disabled { opacity: .55; }
.ny-find .ny-amount { width: 96px; flex: 0 0 96px; padding-inline: 8px; }
.wa-tag { cursor: pointer; opacity: .55; }
.wa-tag.is-on { opacity: 1; background: color-mix(in srgb, #22c55e 18%, transparent); border-color: #16a34a; color: #15803d; font-weight: 600; }
.tag-rule { display: grid; grid-template-columns: 180px 1fr; gap: 6px 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); }
.tag-rule .tag-add { grid-column: 2; max-width: 280px; }
.chip .chip-x { border: 0; background: none; padding: 0 0 0 4px; cursor: pointer; color: inherit; display: inline-flex; }
@media (max-width: 560px) { .tag-rule { grid-template-columns: 1fr; } .tag-rule .tag-add { grid-column: 1; } }

/* Item window: unit cost trend + photo (Ali, 2026-10-14) */
.sc-chart { width: 100%; height: auto; max-height: 260px; display: block; }
.sc-chart-grid { stroke: var(--border); stroke-width: 1; }
.sc-chart-axis { fill: var(--text-3, var(--muted)); font-size: 11px; }
.sc-chart-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.sc-chart-avg { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 4; opacity: .5; }
.sc-chart-dot { fill: var(--surface-solid, #fff); stroke: var(--accent); stroke-width: 2; cursor: default; }
.sc-item-img { width: 112px; height: 112px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }
.sc-identity > .erq-facts { flex: 1 1 320px; min-width: 0; }

/* Supplier price matrix (2026-10-14) */
.pm-bar { height: 6px; border-radius: 99px; background: var(--border); overflow: hidden; }
.pm-bar > span { display: block; height: 100%; background: var(--accent); transition: width .4s ease; }
.pm-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.pm-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-solid, var(--surface)); }
.pm-stat strong { font-size: 18px; }

/* ⟳ Refresh beside ✨ in every window (2026-10-14) */
.winbtn--refresh { display: none; }
dialog.dlg--refresh .winbtn--refresh, .popwin.popwin--refresh .winbtn--refresh { display: inline-flex; }
.dlg-ai { display: flex; gap: 4px; align-items: center; }
.winbtn--refresh[data-loading] svg { animation: spin .8s linear infinite; }
/* Touch: ⟳ is kept, round like ✨, when the window can reload itself. */
html[data-touch] dialog.dlg--refresh .dlg-win .winbtn--refresh, html[data-touch] .popwin.popwin--refresh .winbtn--refresh {
  display: inline-grid !important; place-items: center; width: 30px !important; height: 30px !important; min-height: 0 !important; border-radius: 50%; padding: 0;
  background: var(--surface-2, rgba(0,0,0,.05)); }
html[data-touch] .winbtn--refresh svg { width: 15px; height: 15px; }
.popwin-head .winbtn--refresh { margin-inline-start: auto; flex: none; }
.popwin-head .winbtn--refresh + .winbtn--ai { margin-inline-start: 4px; }

/* @mention picker under a request's comment box (2026-10-14) */
.mention-menu { position: relative; z-index: 30; margin-top: 4px; max-height: 240px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-solid, #fff); box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 4px; }
.mention-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; background: transparent; border-radius: 6px; text-align: start; cursor: pointer; font: inherit; color: inherit; }
.mention-item:hover, .mention-item.is-active { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.avatar--xs { width: 22px; height: 22px; font-size: 10px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--border); flex: none; }
.pm-change { font-weight: 600; white-space: nowrap; }
.pm-change.is-up { color: var(--danger, #c0392b); }
.pm-change.is-down { color: var(--ok, #1e8e3e); }
.pm-table tr.pm-sub td { border-top-style: dashed; }
.pm-table td { vertical-align: top; }
.pm-filters .input { max-width: 240px; }
.mention-menu--pop { position: fixed; margin: 0; inset: auto; z-index: 2147483000; }
.mention-menu--pop[hidden] { display: none; }
button.pm-stat { cursor: pointer; text-align: start; font: inherit; color: inherit; }
button.pm-stat:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface-solid, var(--surface))); }
.pm-filters .pm-num { width: 96px; }
.pm-filters .pm-uom { width: 120px; }
.pm-filters .ticket-filter, .pm-filters .input { width: auto !important; max-width: 220px; flex: 0 1 auto; }
.pm-filters .pm-num { width: 104px !important; }
.pm-filters .pm-uom { width: 110px !important; }
.pm-filters .pm-search { width: 200px !important; }
@media (max-width: 600px) { .pm-filters .ticket-filter, .pm-filters .input, .pm-filters .pm-search { max-width: 100%; flex: 1 1 140px; } }
/* AI search note: one line of what it understood; the queries folded and capped (2026-10-15) */
.mail-ai-note { flex: none; max-height: 40vh; overflow-y: auto; }
.mail-ai-qs summary { cursor: pointer; list-style: revert; margin-top: 2px; }
.mail-ai-qs .mail-ai-queries { display: block; max-height: 140px; overflow-y: auto; margin-top: 4px; }
.mail-ai-qs { flex-basis: 100%; }
/* CRM by section (2026-10-15) */
.as-section-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: transparent; cursor: pointer; font: inherit; color: inherit; text-align: start; }
.as-section-head:hover { border-color: var(--accent); }
.as-section-head .as-section-n { margin-inline-start: auto; font-size: 18px; font-weight: 700; }
/* CRM overview section switch (2026-10-15) */
.as-secbar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.as-secseg { align-self: flex-start; flex-wrap: wrap; }
.as-seg-n { margin-inline-start: 6px; font-size: 11px; opacity: .7; }
.as-cat { cursor: pointer; border: 1px solid var(--border); background: transparent; font: inherit; }
.as-cat.is-on { background: var(--accent); color: #fff; border-color: var(--accent); }
.as-cat-open { color: var(--danger, #c0392b); }
.as-cat.is-on .as-cat-open { color: inherit; }
.as-sub-row .as-cat { font-size: 12px; }
/* Gddam status (2026-10-15) */
.gd-journey { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.gd-jtile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: transparent; text-align: start; cursor: pointer; font: inherit; color: inherit; }
.gd-jtile strong { font-size: 20px; }
.gd-jtile:hover { border-color: var(--accent); }
.gd-jtile--ghost { opacity: .75; border-style: dashed; }
.gd-jtile--live { border-color: color-mix(in srgb, var(--ok, #1e8e3e) 50%, var(--border)); }
.gd-jtile--expired { border-color: color-mix(in srgb, var(--danger, #c0392b) 50%, var(--border)); }
/* New Android version: a "1" on his picture (2026-10-15) */
.topbar-phone-me, [data-avatar] { position: relative; }
.app-update-badge { position: absolute; top: -2px; inset-inline-end: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--surface-solid, #fff); pointer-events: none; }
/* A message's header on a phone (2026-10-15, the Android screenshots): chips and time keep their width and wrap to a
   second line, instead of squeezing until "Prepared replies" ran over "2 days ago". */

/* 2026-10-18 (Ali: "lama eftah email men ai assistant as reference mch am ytale3le attachment"): the mail window from an
   AI answer is a flex column, and its messages (overflow hidden) shrank to 3px — body and attachments gone. */
.popwin-body > .thread-msg, .popwin-body > .card { flex-shrink: 0; }

/* Edit & resubmit / Cancel on a request returned to him (2026-10-19). */
.erq-resub-in { width: 100%; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); color: var(--text); padding: 8px 11px; font: inherit; }
@media (min-width: 800px) { .erq-resub-dlg.dlg--lg { width: min(760px, calc(100vw - 32px)); } }
.erq-resub-num { width: 96px; text-align: end; padding: 5px 8px; }
.erq-resub-dlg .dlg-body > label { margin-bottom: -6px; }
.erq-returned-box .erq-action-row { flex-wrap: wrap; }

/* ---- ERP › Expenses (2026-10-20) ---- */
.exp .exp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.exp-kpi { display: flex; flex-direction: column; gap: 4px; text-align: start; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-lg, 14px); background: var(--surface); cursor: pointer; }
.exp-kpi strong { font-size: 1.45rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.exp-kpi:hover { border-color: var(--accent); }
.exp-kpi--teal { border-inline-start: 4px solid #0d9488; }
.exp-kpi--amber { border-inline-start: 4px solid #d97706; }
.exp-tabs { flex-wrap: wrap; }
.exp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }
.exp-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.exp-card-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.exp-card-head h3 { margin: 0; font-size: 1rem; }
.exp-bars { display: flex; flex-direction: column; gap: 8px; }
.exp-barrow { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: start; background: none; border: 0; padding: 4px 6px; border-radius: 8px; color: inherit; font: inherit; }
button.exp-barrow { cursor: pointer; }
button.exp-barrow:hover { background: var(--surface-2); }
.exp-barlabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.exp-barval { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.exp-bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.exp-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.exp-months { display: flex; align-items: flex-end; gap: 6px; height: 190px; overflow-x: auto; padding-bottom: 2px; }
.exp-month { flex: 1 0 34px; max-width: 72px; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.exp-month-bar { flex: 1; width: 70%; display: flex; align-items: flex-end; }
.exp-month-bar > span { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--accent); min-height: 2px; }
.exp-month:hover .exp-month-bar > span { filter: brightness(1.15); }
.exp-month-val, .exp-month-lbl { font-size: 11px; color: var(--text-2, var(--muted)); white-space: nowrap; }
.exp-table th, .exp-table td { white-space: nowrap; }
.exp-table td:first-child { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.exp-types-pop { position: fixed; z-index: 200; max-height: 70vh; overflow: auto; padding: 12px 14px; }
@media (max-width: 640px) { .exp-grid { grid-template-columns: 1fr; } .exp-kpi strong { font-size: 1.2rem; } }
/* 2026-10-20: the decision lives in the side column under the approval chain; keep that column in view while the main one scrolls. */
@media (min-width: 981px) { .erq-side { position: sticky; top: 0; max-height: calc(100vh - 140px); overflow-y: auto; } }
/* ERP tickets / tasks overview tiles + trend (2026-10-20, like the ERP's own overview) */
.tk-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.tk-tile { display: flex; flex-direction: column; gap: 6px; text-align: start; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; }
.tk-tile strong { font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tk-tile-label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.tk-tile--teal { background: color-mix(in srgb, #14b8a6 8%, var(--surface)); } .tk-tile--teal .tk-tile-label, .tk-tile--teal strong { color: #0f766e; }
.tk-tile--amber { background: color-mix(in srgb, #f59e0b 9%, var(--surface)); } .tk-tile--amber .tk-tile-label, .tk-tile--amber strong { color: #b45309; }
.tk-tile--blue { background: color-mix(in srgb, #3b82f6 8%, var(--surface)); } .tk-tile--blue .tk-tile-label, .tk-tile--blue strong { color: #1d4ed8; }
.tk-tile--green { background: color-mix(in srgb, #22c55e 8%, var(--surface)); } .tk-tile--green .tk-tile-label, .tk-tile--green strong { color: #15803d; }
.tk-tile--violet { background: color-mix(in srgb, #8b5cf6 8%, var(--surface)); } .tk-tile--violet .tk-tile-label, .tk-tile--violet strong { color: #6d28d9; }
.tk-tile--red { background: color-mix(in srgb, #ef4444 8%, var(--surface)); } .tk-tile--red .tk-tile-label, .tk-tile--red strong { color: #b91c1c; }
.tk-tile:hover { border-color: var(--accent); }
.tk-trend-wrap svg { width: 100%; height: auto; display: block; }
.tk-trend .tk-grid { stroke: var(--border); stroke-width: 1; }
.tk-trend .tk-axis { fill: var(--text-2, #64748b); font-size: 11px; }
.tk-trend .tk-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.tk-line--a { stroke: #3b82f6; } .tk-line--b { stroke: #22c55e; }
.tk-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; } .tk-dot--a { background: #3b82f6; } .tk-dot--b { background: #22c55e; }
/* Expenses pivots: clearer rows (Ali, 2026-10-20: "zabbet table row bi colour, more clear UX/UI") */
.exp-table-wrap { max-height: 70vh; overflow: auto; border: 1px solid var(--border); border-radius: 12px; }
.exp-table { border-collapse: separate; border-spacing: 0; width: 100%; }
.exp-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); }
.exp-table th:first-child, .exp-table td:first-child { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--surface); }
.exp-table thead th:first-child { z-index: 3; background: var(--surface-2); }
.exp-table tbody tr.exp-row:nth-child(even) td { background-color: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.exp-table tbody tr.exp-row:nth-child(even) td:first-child { background-color: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.exp-table tbody tr.exp-row:hover td { box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--accent) 7%, transparent); }
.exp-table tr.exp-row--parent td { font-weight: 600; border-top: 1px solid var(--border); }
.exp-table tr.exp-row--parent.is-open td { background-color: color-mix(in srgb, var(--accent) 9%, var(--surface)) !important; }
.exp-table tr.exp-row--child td { font-size: 13px; color: var(--text-2, inherit); }
.exp-table tr.exp-row--child td:first-child { padding-inline-start: 46px; border-inline-start: 3px solid var(--accent); }
.exp-table td.exp-total { font-weight: 700; background-color: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.exp-table tfoot td { position: sticky; bottom: 0; background: var(--surface-2); font-weight: 700; border-top: 2px solid var(--border); }
.exp-table td, .exp-table th { padding: 9px 12px; }
.exp-cat { background: none; border: 1px dashed transparent; border-radius: 6px; padding: 2px 6px; color: inherit; font: inherit; cursor: pointer; text-align: start; }
.exp-cat:hover { border-color: var(--accent); background: var(--surface-2); }
.exp-cat .icon { width: 12px; height: 12px; opacity: .5; }
.exp-cat.is-edited { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.exp-cat { border-color: color-mix(in srgb, var(--accent) 25%, transparent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.exp-cat .icon { opacity: .8; }
.erq-line-cat { margin-top: 6px; }
.erq-line-cat .exp-cat { font-size: 12px; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; max-width: 100%; }
/* 2026-10-24 (Ali, PMT-1372 screenshot): "Maintenance & repairs › Signage cleaning & repair" was squeezed into a
   one-letter column — the sub-category wraps as words under the category, and the description column keeps a sane width */
.erq-line-cat .exp-cat > span { min-width: 0; overflow-wrap: normal; word-break: normal; white-space: normal; }
@media (min-width: 601px) { .erq-lines td:nth-child(2) { min-width: 200px; } }
/* Supplier price matrix, the ERP's layout (2026-10-20): one row per item, suppliers side by side */
.pm-wrap { max-height: 72vh; overflow: auto; border: 1px solid var(--border); border-radius: 12px; }
.pm-grid { border-collapse: separate; border-spacing: 0; min-width: 1500px; }
.pm-grid thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); white-space: nowrap; }
.pm-grid th:first-child, .pm-grid td:first-child { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--surface); min-width: 220px; max-width: 280px; }
.pm-grid thead th:first-child { z-index: 3; background: var(--surface-2); }
.pm-grid td { vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.pm-grid tr.pm-row:nth-child(even) td { background-color: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.pm-grid tr.pm-row:nth-child(even) td:first-child { background-color: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); }
.pm-grid tr.pm-row:hover td { box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--accent) 6%, transparent); }
.pm-supcell { min-width: 190px; border-inline-start: 1px solid var(--border); }
.pm-supname { font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.pm-perbase { font-size: 12px; color: var(--accent); font-weight: 600; margin-top: 2px; }
.pm-level { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.pm-level--high { background: color-mix(in srgb, #22c55e 18%, transparent); color: #15803d; }
.pm-level--medium { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; }
.pm-level--low { background: color-mix(in srgb, #94a3b8 22%, transparent); color: #475569; }
/* ERP module list folded to icons (2026-10-20) */
.erp-shell.is-small { grid-template-columns: 56px minmax(0, 1fr); }
.erp-rail.is-small { padding: 6px 4px; align-items: center; }
.erp-rail.is-small .erp-rail-label, .erp-rail.is-small .erp-rail-item > .ellipsis { display: none; }
.erp-rail.is-small .erp-rail-item { justify-content: center; padding: 8px; position: relative; }
.erp-rail.is-small .erp-rail-count { position: absolute; top: 0; inset-inline-end: 0; padding: 0 4px; font-size: 10px; }
.erp-rail-toggle { display: flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--text-muted); padding: 6px 8px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 12px; }
.erp-rail-toggle:hover { background: var(--surface-2); color: inherit; }
/* Checkbox drop-downs (2026-10-20) */
.multi-btn { display: inline-flex; align-items: center; gap: 6px; justify-content: space-between; min-width: 160px; max-width: 260px; text-align: start; }
.multi-btn.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.multi-pop { width: 300px; padding: 10px; z-index: 300; }
.multi-list { max-height: 300px; overflow-y: auto; margin-top: 8px; display: flex; flex-direction: column; }
.multi-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 6px; cursor: pointer; }
.multi-row:hover { background: var(--surface-2); }
/* Compact search and rows inside the checkbox drop-down (2026-10-20: "search kbir, msh saleh") */
.multi-pop { width: 260px; padding: 8px; }
.multi-pop .input[type="search"] { height: 30px; min-height: 30px; padding: 4px 10px; font-size: 13px; border-radius: 8px; width: 100%; }
.multi-pop .multi-list { max-height: 260px; margin-top: 6px; }
.multi-pop .multi-row { padding: 4px 4px; font-size: 13px; }
.multi-pop .multi-row input { width: 15px; height: 15px; margin: 0; }
.multi-pop .btn--sm { padding: 3px 8px; font-size: 12px; }
.multi-btn { height: auto; }
.multi-pop { display: block !important; grid-template-columns: none !important; }
.multi-pop .multi-list, .multi-pop .multi-row { width: 100%; }
.multi-pop .multi-row span { flex: 1; white-space: normal; }
/* Sticky table headers and first columns are solid, so rows never show through them (2026-10-20, glass theme). */
.pm-grid thead th, .exp-table thead th, .exp-table tfoot td { background: #e9eef7 !important; }
.pm-grid td:first-child, .exp-table td:first-child { background-color: #ffffff !important; }
.pm-grid tr.pm-row:nth-child(even) td:first-child, .exp-table tbody tr.exp-row:nth-child(even) td:first-child { background-color: #f6f8fc !important; }
.pm-grid thead th { box-shadow: 0 1px 0 var(--border-strong, rgba(15,23,42,.12)); color: var(--text, #0f172a); }
html:not([data-theme="light"]) .pm-grid thead th, html:not([data-theme="light"]) .exp-table thead th, html:not([data-theme="light"]) .exp-table tfoot td { background: #1c2740 !important; }
html:not([data-theme="light"]) .pm-grid td:first-child, html:not([data-theme="light"]) .exp-table td:first-child { background-color: #131c2e !important; }
html:not([data-theme="light"]) .pm-grid tr.pm-row:nth-child(even) td:first-child, html:not([data-theme="light"]) .exp-table tbody tr.exp-row:nth-child(even) td:first-child { background-color: #172238 !important; }
/* Every table header has a solid background, in every theme incl. glass (Ali, 2026-10-20: "even if glass theme, for all
   header tables please add background") — sticky headers no longer show the rows through them. */
table thead th, .table thead th, .as-table thead th { background-color: #e9eef7; color: var(--text, #0f172a); }
html:not([data-theme="light"]) table thead th, html:not([data-theme="light"]) .table thead th, html:not([data-theme="light"]) .as-table thead th { background-color: #1c2740; color: var(--text, #e5e7eb); }
html[data-theme="midnight"] table thead th, html[data-theme="midnight"] .table thead th, html[data-theme="midnight"] .as-table thead th { background-color: #18181c; }
.as-table thead th, .table-wrap thead th { position: sticky; top: 0; z-index: 2; }
/* Wrong GRPO alerts in the matrix (2026-10-20) */
.pm-alert { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 2px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, #dc2626 35%, transparent); background: color-mix(in srgb, #dc2626 10%, transparent); color: #b91c1c; font-size: 11px; font-weight: 700; cursor: pointer; }
.pm-alert .icon { width: 12px; height: 12px; }
.pm-bad { color: #b91c1c; } .pm-low { color: #1d4ed8; }
.pm-wrong-toggle.is-on { color: #b91c1c; font-weight: 600; }

/* Item master check (2026-10-20) */
.ic-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; margin-top: 5px; }
.ic-dot--high { background: #e03131; } .ic-dot--medium { background: #f08c00; } .ic-dot--low { background: #adb5bd; }
.ic-table td { vertical-align: top; }
.ic-table td:first-child { min-width: 190px; }
.ic-table tr.ic-main td { border-bottom: 0; }
.ic-table tr.ic-issue-row td { padding-top: 0; white-space: normal; }
.ic-issues { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 6px 18px; }
.ic-issue { display: flex; gap: 8px; align-items: flex-start; }
.ic-issue { padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--border) 25%, transparent); }
.ic-group { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface-solid, var(--surface)); display: flex; flex-direction: column; gap: 8px; }
.ic-keep td { background: color-mix(in srgb, #40c057 7%, transparent); }
.ic-pill-bad { color: #c92a2a; border-color: #ffa8a8; background: color-mix(in srgb, #fa5252 10%, transparent); }
button.pm-stat.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* 2026-10-21 (Ali: "highlight l cost per base unit of measure… background m3ayan ta chufa"): the price per base unit in
   a request's lines and in "Paid before › Items: last receipts" stands out on its own background. */
.erq-perbase { display: inline-block; margin-top: 3px; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; white-space: nowrap;
  color: #0b4fa8; background: color-mix(in srgb, #60A5FA 22%, transparent); border: 1px solid color-mix(in srgb, #60A5FA 55%, transparent); }
:root[data-theme="dark"] .erq-perbase { color: #bcd8ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .erq-perbase { color: #bcd8ff; } }

/* 2026-10-21 (Ali: "option normal view aw Mac view… Windows w button close minimize metel Windows 3ade… default
   Windows lal kel"): Settings › Appearance › Window buttons. Windows (the default) keeps the square minimise, maximise
   and close at the end of the title bar, close going red under the pointer; Mac keeps the three lights at the start. */
html[data-win="windows"]:not([data-touch]) .dlg-win { inset-inline-start: auto; inset-inline-end: 0; top: 0; gap: 0; align-items: stretch; }
html[data-win="windows"]:not([data-touch]) .dlg-win .winbtn { height: 36px; }
html[data-win="windows"]:not([data-touch]) dialog .dlg-win .winbtn--close { border-start-end-radius: 12px; }
html[data-win="windows"]:not([data-touch]) :is(.dlg-win, .mac-lights, .popwin-acts, .mtgwin-acts) .winbtn--min { order: 1; }
html[data-win="windows"]:not([data-touch]) :is(.dlg-win, .mac-lights, .popwin-acts, .mtgwin-acts) .winbtn--max { order: 2; }
html[data-win="windows"]:not([data-touch]) :is(.dlg-win, .mac-lights, .popwin-acts, .mtgwin-acts) .winbtn--close { order: 3; }
html[data-win="windows"]:not([data-touch]) .mac-lights { order: 99; margin-inline-start: auto; margin-inline-end: 0; gap: 0; }
html[data-win="windows"]:not([data-touch]) dialog .dlg-head { padding-inline-end: calc(var(--s5) + 130px); }
html[data-win="windows"]:not([data-touch]) dialog.dlg--ai .dlg-head { padding-inline-end: calc(var(--s5) + 200px); }
html[data-win="windows"]:not([data-touch]) .dlg-ai { inset-inline-end: 136px; top: 3px; }
html[data-win="windows"]:not([data-touch]) dialog.dlg--nomin .dlg-ai { inset-inline-end: 94px; }

/* 2026-10-22 (Ali: "bel email fi Other w Main… ma 3aref adde fi… highlight bel Other lezem tchufon"): unread counts on
   the Main / Other tabs, the important ones in Other counted apart, and those rows marked in the list. */
.mail-tab-count { display: inline-flex; align-items: center; margin-inline-start: 6px; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text); }
.mail-tab-count.is-main { background: var(--danger); color: #fff; }
.mail-tab-count.is-important { background: color-mix(in srgb, var(--warning) 22%, transparent); color: var(--warning); }
.mail-row--other-important { box-shadow: inset 3px 0 0 var(--warning); background: color-mix(in srgb, var(--warning) 9%, transparent); }

/* 2026-10-22 (Ali: "bde kell popup ma ykun blur"): nothing behind a window is blurred any more — the windows below
   stay sharp and readable; a light shade only, so the front one still reads as in front. */
.win-blur { display: none !important; }
dialog.dlg::backdrop, html[data-ios] dialog.dlg::backdrop, html[data-style="glass"] dialog.dlg::backdrop { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(15, 23, 42, .12); }
.mailwin-backdrop, .compose-backdrop, .mail-search-scrim { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* Store request lines, one item per row (2026-10-22). */
.su-table td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.su-gap { display: inline-block; padding: 2px 8px; border-radius: 999px; font-weight: 700; font-size: 12px; color: var(--warning); background: color-mix(in srgb, var(--warning) 16%, transparent); }
.su-gap.is-crit { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }

/* ERP analysis: problems above, the AI's solutions below (2026-10-22). */
.chk-section { margin: 8px 0 0; font-size: 18px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.chk-sol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.chk-sol { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: inset 3px 0 0 var(--success); }
.chk-sol p { margin: 0; color: var(--text-muted); }
.chk-sol-fix { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; }

/* CRM cards, redrawn (2026-10-22): wider cards, full names, counts as chips, the bar under its name. */
.as-grid--3 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.as-grid--3 > .card { padding: 16px 18px; border-radius: 14px; }
.as-h2 { font-size: calc(15px * var(--text-scale)); font-weight: 700; margin: 0 0 4px; }
.as-bars { gap: 10px; }
.as-bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label n" "track track"; row-gap: 5px; column-gap: 10px; padding: 6px 8px; margin: 0 -8px; border-radius: 10px; }
.as-bar-label { grid-area: label; white-space: normal; overflow: visible; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.as-bar-n { grid-area: n; display: inline-flex; align-items: center; gap: 6px; }
.as-bar-count { font-weight: 700; font-size: calc(13px * var(--text-scale)); }
.as-bar-open { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.as-bar-track { grid-area: track; height: 6px; }
.as-bar-fill { background: color-mix(in srgb, var(--accent) 80%, transparent); }
.as-bar-fill.has-open { background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--danger) 70%, var(--accent))); }
button.as-bar:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
/* CRM: room between the cards (2026-10-22, Ali: "mafi space bayneton, k2ennon laz2in"). */
.as-page { display: flex; flex-direction: column; gap: 16px; }
.as-page > .card, .as-page > .as-grid, .as-page > .stat-bar { margin: 0 !important; }
.as-grid, .as-grid--3 { gap: 16px !important; }
.as-grid--3 > .card { box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 14px rgba(15, 23, 42, .05); border: 1px solid var(--border); }
.stat-bar { gap: 12px; }
/* SOPs (2026-10-22): the list beside the page, the page drawn like paper. */
.sop-page { display: flex; flex-direction: column; gap: 14px; }
.sop-split { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 860px) { .sop-split { grid-template-columns: 1fr; } }
.sop-list { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 12px; }
.sop-item { display: flex; flex-direction: column; gap: 4px; text-align: start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: inherit; font: inherit; cursor: pointer; }
.sop-item.is-on { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.sop-st { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }
.sop-st--approved { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.sop-st--archived { background: var(--surface-2); color: var(--text-muted); }
.sop-cm { font-size: 11px; color: var(--accent); display: inline-flex; align-items: center; gap: 2px; } .sop-cm svg { width: 12px; height: 12px; }
.sop-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sop-bar { gap: 8px; align-items: center; }
.sop-ask { gap: 8px; align-items: center; padding: 8px 10px; border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--accent) 5%, transparent); }
.sop-paper { background: #fff; color: #161b19; border: 1px solid var(--border); border-radius: 6px; padding: 40px 48px; box-shadow: 0 8px 30px rgba(15, 23, 42, .08); max-width: 880px; }
:root[data-theme="dark"] .sop-paper { background: #f7f8f7; }
@media (max-width: 600px) { .sop-paper { padding: 22px 18px; } }
.sop-doc h1 { font-size: 24px; margin: 0 0 12px; } .sop-doc h2 { font-size: 16px; margin: 22px 0 8px; padding-bottom: 4px; border-bottom: 1px solid #d9dedb; }
.sop-doc h3 { font-size: 14px; margin: 14px 0 6px; } .sop-doc p { margin: 6px 0; line-height: 1.65; } .sop-doc ol, .sop-doc ul { margin: 6px 0; padding-inline-start: 22px; line-height: 1.6; }
.sop-table { overflow-x: auto; margin: 8px 0; } .sop-table table { border-collapse: collapse; width: 100%; font-size: 13px; }
.sop-table th, .sop-table td { border: 1px solid #cfd6d2; padding: 6px 9px; text-align: start; vertical-align: top; } .sop-table th { background: #eef2f0; }
.sop-edit { font-family: ui-monospace, Menlo, monospace; font-size: 13px; line-height: 1.5; min-height: 420px; }
.sop-comments { padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); max-width: 880px; }
.sop-comment { padding: 8px 10px; border-radius: 8px; background: var(--surface-2); } .sop-comment.is-done { opacity: .55; } .sop-comment p { margin: 4px 0 0; }
.sop-versions { max-width: 880px; } .sop-versions ul { margin: 6px 0; padding-inline-start: 18px; }

/* Sortable headers everywhere, and solid option lists (2026-10-22). */
th.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
th.th-sort:hover { color: var(--text); }
th.th-sort::after { content: "⇅"; opacity: .3; margin-inline-start: 4px; font-size: 10px; }
th.th-sort[data-sort="asc"]::after { content: "▲"; opacity: .8; } th.th-sort[data-sort="desc"]::after { content: "▼"; opacity: .8; }
select option, select optgroup { background-color: var(--surface, #fff) !important; color: var(--text, #111) !important; }
.su-find { max-width: 280px; }

button.chk-sol { text-align: start; font: inherit; color: inherit; cursor: pointer; transition: transform .12s, box-shadow .12s; }
button.chk-sol:hover { transform: translateY(-1px); box-shadow: inset 3px 0 0 var(--success), 0 6px 18px rgba(15, 23, 42, .08); }
.chk-sol-more { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--accent); }

/* A mail being sent waits in the dock with a turning ring (2026-10-22). */
.dock-item.is-busy .dock-icon { position: relative; }
.dock-item.is-busy .dock-icon::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid transparent; border-top-color: var(--accent); border-right-color: var(--accent);
  animation: spin .9s linear infinite; pointer-events: none; }
.dock-item.is-busy .dock-label { opacity: .85; }
/* New ERP request form (2026-10-22). */
.nr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; align-items: end; }
.nr-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nr-lines .input { min-width: 80px; } .nr-lines td:first-child .input { min-width: 220px; } .nr-num { max-width: 110px; }

.nr-summary { font-size: 15px; line-height: 1.7; min-height: 150px; resize: vertical; }
.nr-grid .input { font-size: 14px; }

/* New requests as cards, and the request to read (2026-10-22). */
.nr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.nr-card { display: flex; flex-direction: column; gap: 6px; text-align: start; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: inherit; font: inherit; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.nr-card:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(15, 23, 42, .08); }
.nr-card-title { font-size: 15px; line-height: 1.4; }
.nr-card-total { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.nr-view { font-size: 15px; }
.nr-view-total { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.nr-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 18px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.nr-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .nr-fact strong { overflow-wrap: anywhere; font-size: 14.5px; }
.nr-summary-view { padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); line-height: 1.75; font-size: 15px; }
.nr-summary-view p { margin: 0 0 6px; } .nr-sum-item { padding: 3px 0 3px 10px; border-inline-start: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); margin: 2px 0; } .nr-sum-gap { height: 8px; }
/* Test ERP (2026-10-22). */
.sh-kind { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--surface-2); }
.sh-kind--grpo { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.sh-kind--item-cost { color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); }
.sh-kind--item-master, .sh-kind--duplicate { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sh-kind--store-request, .sh-kind--transfer { color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); }
.sh-before { text-decoration: line-through; color: var(--text-muted); } .sh-after { font-weight: 600; }
.sh-conf { font-size: 11px; color: var(--text-muted); } .sh-conf--high { color: var(--danger); font-weight: 700; }
.sh-table td { vertical-align: top; }
.sh-on-ok { background: var(--success) !important; color: #fff !important; border-color: var(--success) !important; }
.sh-on-no { background: var(--danger) !important; color: #fff !important; border-color: var(--danger) !important; }
.shr { display: flex; flex-direction: column; gap: 14px; max-width: 1100px; }
.shr-sec { padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; }
.shr-sec h3 { margin: 0; } .shr-count { color: var(--text-muted); font-weight: 600; } .shr-list { margin: 0; padding-inline-start: 20px; line-height: 1.8; }
.cd-grp { text-align: center !important; border-bottom: 1px solid var(--border); } .cd-sub { font-size: 11px; }
.cd-fixed td { background: color-mix(in srgb, var(--warning) 9%, transparent); }

/* ERP analysis waves (2026-10-22): soft, slow, behind everything. */
.erp-main--wave { position: relative; isolation: isolate; }
.erp-waves { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; border-radius: 18px; }
.erp-wave { position: absolute; left: 0; bottom: 0; width: 200%; height: 240px; display: flex; animation: erp-wave-move linear infinite; }
.erp-wave svg { width: 50%; height: 100%; flex: none; }
.erp-wave--1 path { fill: color-mix(in srgb, var(--accent) 10%, transparent); }
.erp-wave--2 { height: 300px; } .erp-wave--2 path { fill: color-mix(in srgb, #7c3aed 7%, transparent); }
.erp-wave--3 { height: 360px; animation-direction: reverse; } .erp-wave--3 path { fill: color-mix(in srgb, #06b6d4 6%, transparent); }
.erp-glow { position: absolute; width: 520px; height: 520px; top: -160px; inset-inline-end: -120px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%); animation: erp-glow 18s ease-in-out infinite; }
@keyframes erp-wave-move { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes erp-glow { 0%, 100% { transform: translate(0, 0) scale(1); opacity: .7; } 50% { transform: translate(-60px, 40px) scale(1.15); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .erp-wave, .erp-glow { animation: none; } }
.erp-waves { position: fixed; inset: 0; border-radius: 0; }
.erp-wave--1 path { fill: color-mix(in srgb, var(--accent) 13%, transparent); }
.erp-wave--2 path { fill: color-mix(in srgb, #7c3aed 9%, transparent); }
.erp-wave--3 path { fill: color-mix(in srgb, #06b6d4 8%, transparent); }
/* The Test ERP report uses the whole width (Ali, 2026-10-22: "lesh mano full view, bel noss"). */
.shr { max-width: none; width: 100%; }
.shr .table-wrap { width: 100%; } .shr table { width: 100%; }
/* Clearer (Ali, 2026-10-22: "wen l waves, mana tal3a"). */
.erp-wave--1 { height: 330px; } .erp-wave--1 path { fill: color-mix(in srgb, var(--accent) 26%, transparent); }
.erp-wave--2 { height: 420px; } .erp-wave--2 path { fill: color-mix(in srgb, #7c3aed 18%, transparent); }
.erp-wave--3 { height: 520px; } .erp-wave--3 path { fill: color-mix(in srgb, #06b6d4 16%, transparent); }
.erp-glow { opacity: 1; width: 680px; height: 680px; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%); }
.erp-main--wave .card, .erp-main--wave .shr-sec, .erp-main--wave .stat-bar { background: color-mix(in srgb, var(--surface) 84%, transparent); backdrop-filter: blur(6px); }
/* Now that they draw: back to soft. */
.erp-wave--1 path { fill: color-mix(in srgb, var(--accent) 12%, transparent); }
.erp-wave--2 path { fill: color-mix(in srgb, #7c3aed 9%, transparent); }
.erp-wave--3 path { fill: color-mix(in srgb, #06b6d4 9%, transparent); }

/* ---- Gallery (ERP › Gallery, 2026-10-24): photos and videos saved from WhatsApp ---- */
.gl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.gl-tile { margin: 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; display: flex; flex-direction: column; }
.gl-open { position: relative; display: block; padding: 0; border: 0; background: var(--surface-2); aspect-ratio: 1 / 1; cursor: zoom-in; }
.gl-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-soft { filter: blur(6px); }
.gl-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; pointer-events: none; }
.gl-play .icon { width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: rgba(0, 0, 0, .55); }
.gl-cap { display: flex; align-items: center; gap: 6px; padding: 6px 4px 6px 10px; font-size: calc(12px * var(--text-scale)); min-width: 0; }
.gl-cap > .ellipsis { flex: 1; min-width: 0; }
@media (max-width: 600px) { .gl-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; } }

/* Logistics: while the board is scrolled, its page title and delivery strips fold away so the board gets the room (2026-10-25). */
html[data-board-scrolled] .page:has(iframe.board-frame) .page-head,
html[data-board-scrolled] .page:has(iframe.board-frame) .board-strip { display: none; }

/* ---- Assistant, 2026-10-25 (Ali: "byektob bl ma2lub… rattible yehon ahla w a7san… e2dar a3mel search aya word") ----
   1. Messages: the words sit in a bubble sized to the text, anchored next to the avatar; each paragraph and list takes
      its own direction (set in renderRichText), so Arabic lines start at the bubble's right edge with bullets on the
      right, and English ones at the left. 2. The chat list header: one switch, the main action, search, the filter.
   3. Search results with the matching words marked. 4. The dock never covers the composer. */
.msg--assistant { max-width: min(88%, 680px); }
.msg--user { max-width: min(82%, 600px); }
.msg--assistant > .msg-body { min-width: 0; align-items: flex-start; }
.msg-text { min-width: 0; max-width: 100%; display: flex; flex-direction: column; gap: 6px; line-height: 1.6; overflow-wrap: anywhere; }
.msg--assistant .msg-text {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; border-start-start-radius: 5px;
  padding: 10px 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.msg-text [dir="rtl"] { text-align: right; line-height: 1.8; }
.msg-text [dir="ltr"] { text-align: left; }
.msg-text p { margin: 0; }
.msg-text ul, .msg-text ol { margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 3px; }
.msg-text li::marker { color: var(--text-muted); }
.msg-text bdi { unicode-bidi: isolate; }
/* The time and the reaction follow the reading side of the message, under the bubble. */
.msg-body--rtl > .msg-time { align-self: flex-end; }
.msg--user .msg-body--rtl { text-align: right; }
/* The hidden time used to keep a blank line inside the user's bubble; it now floats just under it. */
.msg--user > .msg-body { position: relative; }
.msg--user > .msg-body > .msg-time { position: absolute; top: calc(100% + 1px); inset-inline-end: 4px; white-space: nowrap; pointer-events: none; }
.msg--user:hover > .msg-body > .msg-time, .msg--user:focus-within > .msg-body > .msg-time, .msg--user.msg--show-time > .msg-body > .msg-time { pointer-events: auto; }
.msg--user > .msg-body:has(> .msg-time .msg-reaction) { margin-bottom: 18px; }
/* The phone app keeps its own bubbles (the body is the bubble there), so the inner one steps back. */
html[data-ios] .msg--assistant .msg-text { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
html[data-style="glass"] .msg--assistant .msg-text { background: color-mix(in srgb, var(--surface) 82%, transparent); border-color: var(--border); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.msg--flash .msg-text { animation: msgFlash 1.6s ease-out; }
mark.msg-hit { background: color-mix(in srgb, #facc15 55%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; box-shadow: 0 0 0 1px color-mix(in srgb, #eab308 45%, transparent); }
html:not([data-theme="light"]) mark.msg-hit { background: color-mix(in srgb, #facc15 38%, transparent); }

/* Chat list header. */
.chat-rail-head { gap: 10px; padding: 12px; }
.chat-rail-tabs { margin-top: 0; }
.chat-rail-tabs .seg-item, .chat-rail-tabs .seg-item:first-child { flex: 1 1 0; height: 32px; padding-inline: 6px; gap: 6px; font-size: calc(13px * var(--text-scale)); }
.chat-rail-tabs .seg-item .avatar--xs { width: 18px; height: 18px; min-width: 18px; }
.chat-rail-primary { display: flex; gap: 8px; }
.chat-rail-primary .btn { height: 36px; border-radius: 10px; font-weight: 600; min-width: 0; }
.chat-rail-primary .chat-rail-new { flex: 1 1 auto; width: auto !important; height: 36px !important; padding: 0 12px !important; border-radius: 10px !important; justify-content: center; }
.chat-rail-primary .chat-rail-new .icon { width: 16px; height: 16px; flex: none; }
.chat-rail-primary .chat-rail-milou { flex: 0 0 auto; width: auto !important; height: 36px !important; padding: 0 12px 0 8px !important; border-radius: 10px !important;
  background: var(--surface-2) !important; border: 1px solid var(--border) !important; box-shadow: none !important; gap: 6px; }
.chat-rail-primary .chat-rail-milou:hover { background: var(--surface-3) !important; }
.chat-rail-primary .chat-rail-milou .avatar--xs { width: 20px; height: 20px; min-width: 20px; }
.chat-rail-searchrow { display: flex; align-items: center; gap: 6px; }
.chat-rail-searchbox { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; height: 36px; padding-inline: 10px 4px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; color: var(--text-muted); cursor: text; transition: border-color var(--ease), box-shadow var(--ease); }
.chat-rail-searchbox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.chat-rail-searchbox > .icon { width: 15px; height: 15px; flex: none; }
.chat-rail-searchbox input.chat-rail-search-input { flex: 1 1 auto; min-width: 0; height: 34px; padding: 0; border: 0 !important; background: transparent !important; outline: none !important; box-shadow: none !important; font-size: calc(13.5px * var(--text-scale)); }
.chat-rail-search-input::-webkit-search-cancel-button { display: none; }
.chat-rail-search-clear { flex: none; width: 26px; height: 26px; display: inline-grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); padding: 0; }
.chat-rail-search-clear:hover { background: var(--surface-3); color: var(--text); }
.chat-rail-search-clear .icon { width: 13px; height: 13px; }
.chat-rail-sort { flex: none; width: 36px; height: 36px; border-radius: 10px; position: relative; color: var(--text-muted); }
.chat-rail-sort.is-on { color: var(--accent); }
.chat-rail-sort.is-on::after { content: ""; position: absolute; top: 7px; inset-inline-end: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.chat-rail-tools { display: flex; align-items: center; gap: 6px; }
.chat-rail-filters.seg { flex: 1 1 auto; min-width: 0; overflow: visible; padding: 2px; gap: 2px; }
.chat-rail-filters .seg-item.chat-rail-filter { flex: 1 1 0; min-width: 0; height: 28px; padding-inline: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-size: calc(12.5px * var(--text-scale)); cursor: pointer; background: none; border: 0; color: var(--text-muted); }
.chat-rail-filters .seg-item.chat-rail-filter[aria-pressed="true"] { background: var(--surface); color: var(--text); border: 0; }
.chat-rail-filters .seg-item .icon { width: 13px; height: 13px; flex: none; }
.chat-rail-extra { flex: 0 1 auto; min-width: 0; max-width: 45%; height: 30px; gap: 4px; padding-inline: 10px 8px; background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); cursor: pointer; }
.chat-rail-extra .icon { width: 12px; height: 12px; flex: none; }
/* While searching, the filters step back: the results cover every section. */
.chat-rail-head.is-searching .chat-rail-tools { opacity: .55; }

/* Search results. */
.chat-rail-searchnote { display: flex; align-items: center; gap: 6px; padding: 4px 8px 6px; color: var(--text-muted); }
.chat-rail-searchnote .icon { width: 13px; height: 13px; }
.chat-rail-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--accent); animation: spin .8s linear infinite; flex: none; }
.chat-rail-snippet { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: calc(12.5px * var(--text-scale)); line-height: 1.45; color: var(--text-muted); overflow-wrap: anywhere; }
.chat-rail-snippet[dir="rtl"] { text-align: right; }
.chat-rail-snippet mark.msg-hit { color: var(--text); font-weight: 600; }
.chat-rail-where { flex: none; font-size: calc(10.5px * var(--text-scale)); padding: 0 6px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); line-height: 16px; }
.chat-rail-line:empty { display: none; }

/* The dock (hidden windows) floats over the bottom of the screen; the composer now sits above it instead of under it. */
html[data-dock] .page--assistant .assistant:not(.assistant--embedded) .composer-wrap { padding-bottom: calc(var(--s3) + 74px); }
@media (max-width: 899px) {
  html[data-dock] .page--assistant .assistant:not(.assistant--embedded) .composer-wrap { padding-bottom: calc(var(--s2) + 66px); }
}
.thread { row-gap: 16px; }
/* 2026-10-25 review fixes: room for "Milou AI", long section actions fit, snippets show the match. */
.chat-rail-tabs .seg-item:first-child { flex: 1.45 1 0; }
.chat-rail-primary .btn { font-size: calc(13.5px * var(--text-scale)); }
.chat-rail-primary .chat-rail-new:not(.btn--primary) { font-weight: 500; }
.chat-rail-snippet { -webkit-line-clamp: 3; }
@media (max-width: 899px) {
  html[data-dock] .page--assistant .assistant:not(.assistant--embedded) .composer-wrap { padding-bottom: calc(var(--s2) + 88px); }
}

/* Test ERP › Push to ERP (2026-10-25) */
.sp-chip { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--surface-2); color: var(--text-muted); }
.sp-chip--ok { color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); }
.sp-chip--warn { color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); }
.sp-chip--bad { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.sp-res { all: unset; cursor: pointer; display: block; max-width: 260px; }
.sp-res:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.sp-act { font-weight: 600; }
.sp-manual { color: var(--text-muted); }
.sp-warn { color: var(--warning); }
.sp-done td { opacity: .7; }
.sp-bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.sp-bar > span { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.sp-table td { vertical-align: top; }