
/* ==================================================================
   NASEEJ WEAVE — design tokens.
   One ground (the platform's original #F6F8FA), one accent (Naseej
   teal), ink for text. Depth
   comes from hairline borders and density, never from blur or
   decorative colour. Every surface pulls its background from a token
   so no page can drift to a different shade.
   ================================================================== */
:root {
  --bg: #F6F8FA;
  --surface: #FFFFFF;
  --surface-2: #FAFBFC;
  --surface-3: #EEF2F6;
  --text: #172033;
  --muted: #5C6A80;
  /* One step darker than the legacy var(--muted): that value measured 4.47:1 on the
     page ground and 4.23:1 on --surface-3, both under the 4.5 AA floor. */
  --soft: #5C6A80;
  --faint: #CBD5E1;
  --line: #E2E8F0;
  --border: #E2E8F0;
  --brand: #005A8D;
  --brand-rgb: 0, 90, 141;
  --brand-2: #003F66;
  /* Brand as a FOREGROUND (links, active labels, icons) is a separate token
     from brand as a FILL: on a dark ground one value cannot both carry white
     button text and read as text itself. Light themes set them alike. */
  --brand-fg: #005A8D;
  --brand-soft: #E6F3FA;
  --accent: #005A8D;
  /* One step lighter than --muted, for de-emphasised metadata. */
  --muted-2: #637489;
  --success: #198754;
  --success-strong: #2B7253;   /* 5.0:1 on the success tint (was 4.35 - under AA) */
  --success-soft: #E3F3EA;
  --warning: #f59e0b;
  /* #B4790E scored 3.27:1 on --warning-soft — below the 4.5:1 AA floor for
     normal-size text. It was only ever used on short status pills, where the
     miss was easy to overlook; the unreachable-source banner is body prose the
     user has to READ to learn what went wrong, so it has to clear AA. #8A5A00
     scores 5.25:1 and is the value the naseej theme already trends toward. */
  --warning-strong: #8A5A00;
  --warning-soft: #FBF0DC;
  --danger: #d92d20;
  --danger-strong: #B42318;   /* pill/inline TEXT on --danger-soft; --danger is for fills */
  --danger-soft: #FDEAEA;
  --info: #2563eb;
  --radius-xl: 14px;
  --radius-lg: 12px;
  --radius-md: 10px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(17, 29, 43, .05);
  --shadow-md: 0 2px 6px rgba(17, 29, 43, .07), 0 12px 28px -18px rgba(17, 29, 43, .18);
  --shadow-soft: none;
  --content: min(1220px, calc(100vw - 28px));
  --font-body: "IBM Plex Sans Arabic", "Inter", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-heading: "IBM Plex Sans Arabic", "Inter", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-family: var(--font-body);
}

[data-theme="white"] {
  --bg: #F6F8FA;
  --surface: #FFFFFF;
  --surface-2: #FAFBFC;
  --surface-3: #EEF2F6;
  --text: #172033;
  --muted: #5C6A80;
  --muted-2: #637489;
  --line: #E2E8F0;
  --brand: #005A8D;
  --brand-rgb: 0, 90, 141;
  --brand-2: #003F66;
  --brand-fg: #005A8D;
  --brand-soft: #E6F3FA;
  --accent: #005A8D;
}

/* Deep-indigo variant (stored preference key kept as "red" for back-compat):
   same linen paper, ink shifted deeper, teal accent brightened one step. */
[data-theme="red"] {
  --bg: #F4F8FB;
  --surface: #FFFFFF;
  --surface-2: #FCFDFE;
  --surface-3: #EAF4FB;
  --text: #131B2C;
  --muted: #5D6B7E;
  --muted-2: #5F768E;
  --line: #D3E5F1;
  --brand: #003F66;
  --brand-rgb: 0, 63, 102;
  --brand-2: #002B47;
  --brand-fg: #003F66;
  --brand-soft: #E6F3FA;
  --accent: #00A6C8;
}

/* ---------------------------------------------------------------------------
   NASEEJ COLORS — the brand's own palette.
   The hub shipped in a blue that appears nowhere in Naseej's identity. The
   logo is the specification: a crimson circle (#A11E25, sampled from the
   mark) carrying a white chevron, between black wordmarks on white. This
   theme takes the logo's RATIO as well as its colour — a warm undyed-cloth
   ground, near-black ink, and crimson spent on one thing at a time (the
   primary action, the active destination, the focus ring). "نسيج" is weave;
   the ground is the cloth and the brand is the single dyed thread.
   Danger deliberately moves to burnt sienna: a destructive control must never
   read as "the brand colour", and fill-vs-outline carries the rest.
   Every pair below is checked against WCAG AA on its own ground.
   --------------------------------------------------------------------------- */
[data-theme="naseej"] {
  --bg: #F8F5F2;
  --surface: #FFFFFF;
  --surface-2: #FDFBF9;
  --surface-3: #F0EBE6;
  --text: #1A1614;          /* 16.5:1 on the page */
  --muted: #6B5F58;         /* 5.7:1 on the page, 5.2:1 on sunken */
  --soft: #6B5F58;
  --muted-2: #7D7169;
  --faint: #DCD2CA;
  --line: #E5DCD4;
  --border: #E5DCD4;
  --brand: #A11E25;         /* the mark's crimson; white on it = 7.7:1 */
  --brand-rgb: 161, 30, 37;
  --brand-2: #7E161C;
  --brand-fg: #A11E25;      /* 7.7:1 on a card */
  --brand-soft: #F9EAEB;
  --accent: #A11E25;
  --success: #1F7A55;
  --success-strong: #1B6B4A;
  --success-soft: #E4F1EA;
  --warning: #8A5A00;
  --warning-strong: #6F4800;
  --warning-soft: #F8EEDC;
  --danger: #C2410C;        /* sienna, not crimson — never confusable with brand */
  --danger-strong: #9A3412;
  --danger-soft: #FBEAE1;
  --info: #1D4ED8;
  --shadow-sm: 0 1px 2px rgba(26, 22, 20, .06);
  --shadow-md: 0 2px 6px rgba(26, 22, 20, .08), 0 12px 28px -18px rgba(26, 22, 20, .22);
}

/* ---------------------------------------------------------------------------
   DARK — the same cloth in low light.
   Deliberately NOT blue-black and not the near-black-plus-acid-accent default:
   the ground keeps the warm cast of the light theme (#14110F), so switching
   themes changes the lighting rather than the brand. Crimson splits in two
   here because one value cannot do both jobs on a dark ground: --brand stays
   deep enough to carry white button text (6.3:1), while --brand-fg lifts to
   read as a foreground on dark surfaces (5.2:1).
   --------------------------------------------------------------------------- */
[data-theme="dark"] {
  --bg: #14110F;
  --surface: #1C1917;
  --surface-2: #211D1B;
  --surface-3: #262220;
  --text: #EDE8E3;          /* 15.5:1 on the page */
  --muted: #A79C94;         /* 7.0:1 on the page, 5.9:1 on sunken */
  --soft: #A79C94;
  --muted-2: #8F8480;
  --faint: #3D3733;
  --line: #332E2B;
  --border: #332E2B;
  --brand: #B8262F;         /* fill: white text on it = 6.3:1 */
  --brand-rgb: 184, 38, 47;
  --brand-2: #8E1B23;
  --brand-fg: #E2646E;      /* foreground: 5.2:1 on a card */
  --brand-soft: #2B1A1B;
  --accent: #E2646E;
  --success: #5FCB98;
  --success-strong: #7BD9AC;
  --success-soft: #14251E;
  --warning: #E0B252;
  --warning-strong: #EDC671;
  --warning-soft: #2A2113;
  --danger: #F08A5D;
  --danger-strong: #F5A582;
  --danger-soft: #2E1A12;
  --info: #7AA2F7;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, .45), 0 12px 28px -18px rgba(0, 0, 0, .7);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body {
  -webkit-font-smoothing: antialiased;
  font-family: "IBM Plex Sans Arabic", "Inter", "Segoe UI", Tahoma, Arial, sans-serif;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.ltr { direction: ltr; text-align: left; }
.mobile-only { display: none; }

/* ---------------------------------------------------------------------------
   KEYBOARD DOCKING (mobile)
   100dvh tracks the browser chrome but NOT the on-screen keyboard: with the
   keyboard up, a 100dvh chat is still taller than what the user can see, the
   composer sits behind the keyboard, and the browser scrolling the focused
   field into view leaves a dead band above the input. initKeyboardDocking()
   measures the visual viewport and publishes it here, so while `kb-open` is
   set the chat is sized to the REAL visible area and the composer lands
   exactly on the keyboard's top edge. Values fall back to the static viewport
   when no keyboard is present (and on every desktop browser).
   --------------------------------------------------------------------------- */
:root {
  --app-vh: 100dvh;
  --kb-inset: 0px;
  --vv-top: 0px;
}
html.kb-open,
html.kb-open body {
  height: var(--app-vh);
  min-height: 0;
  max-height: var(--app-vh);
  overflow: hidden;
  /* The layout viewport keeps its full height; pinning the document to the top
     stops iOS from parking the page mid-scroll under the keyboard. */
  position: relative;
}
/* The app root owns the visible budget and hands what is left to the shell.
   Distributing it with flex — rather than giving every level the same fixed
   height — is what keeps the composer on the keyboard's edge when something
   else is on screen above the shell (the admin's "viewing as user" bar), which
   would otherwise push the whole chat down by exactly that bar's height.

   Applied whenever the CHAT screen is mounted, not only when a keyboard is
   detected: Android resizes the layout viewport instead of reporting an inset,
   so `kb-open` never fires there and the distribution has to hold regardless.
   Scoped with :has() so ordinary scrolling pages are untouched. */
#app:has(.user-chat-shell) {
  height: var(--app-vh, 100dvh);
  max-height: var(--app-vh, 100dvh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* FOLLOW the visual viewport rather than fight it. When the document cannot
     scroll — and this shell is overflow:hidden, so it cannot — iOS reveals the
     focused input by sliding the visual viewport down inside the layout
     viewport instead. Translating by that slide puts the shell exactly over
     what the user can see. The previous build tried to cancel the slide with
     scrollTo(0, 0); Safari re-applied it every frame, and the disagreement is
     the white band between the text and the keyboard in the bug report.
     --vv-top is 0 everywhere else, so this is inert off iOS. */
  transform: translateY(var(--vv-top, 0px));
}
#app:has(.user-chat-shell) .hub-shell {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}
/* Inside the distributed shell the chat must fill its PARENT, not the whole
   visible area — asking for the full height here is what pushed the composer
   back behind the keyboard by exactly the height of anything above the shell. */
#app:has(.user-chat-shell) .hub-main,
#app:has(.user-chat-shell) .agent-workspace {
  height: 100%;
  max-height: 100%;
  min-height: 0;
}
/* There used to be a second copy of the three rules above, keyed on
   html.kb-open instead of :has(.user-chat-shell). It was identical apart from
   dropping the fallback, so it could only ever restate what already applied —
   while making the cascade hard enough to read that an earlier fix landed in
   the losing rule and appeared to do nothing. The :has() versions above hold
   unconditionally, which is what Android needs anyway (kb-open never fires
   there). The drawer chat is covered by the same rules: it sizes itself from
   --app-vh and its log is the flexible row.

   A `transition: height` on .agent-workspace lived here too. Keyboard resize
   events arrive in a burst, so animating height meant every burst played an
   animation the user reads as the layout lurching — the opposite of docking. */

/* Mobile viewport: 100vh is the LARGE viewport (address bar retracted) and never
   shrinks, so a full-height shell renders taller than what the user can actually
   see — pushing the chat composer below the fold and forcing a scroll to reach
   it. 100dvh tracks the visible area. The 100vh line stays first as the fallback
   for browsers without dvh; supporting browsers take the second declaration. */
.hub-shell {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  background: var(--bg);
  direction: ltr;
}

html[dir="rtl"] .hub-shell {
  direction: rtl;
}

html[dir="rtl"] .hub-sidebar {
  border-right: 0;
  border-left: 1px solid var(--line);
}

html[dir="rtl"] .hub-main,
html[dir="rtl"] .hub-page,
html[dir="rtl"] .admin-export-page,
html[dir="rtl"] .builder-export-page,
html[dir="rtl"] .agent-workspace {
  direction: rtl;
  text-align: right;
}

html[dir="ltr"] .hub-main,
html[dir="ltr"] .hub-page,
html[dir="ltr"] .admin-export-page,
html[dir="ltr"] .builder-export-page,
html[dir="ltr"] .agent-workspace {
  direction: ltr;
  text-align: left;
}

.hub-sidebar {
  width: 232px;
  flex: 0 0 232px;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  background: var(--surface-3);
  border-right: 1px solid var(--line);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 0;
  overflow-x: hidden;
  transition: width .18s ease, flex-basis .18s ease;
  z-index: 30;
}

/* The nav scrolls internally; brand and footer stay pinned. */
.hub-sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  margin: 0 -6px;
  padding: 0 6px;
}

.hub-sidebar.collapsed {
  width: 68px;
  flex-basis: 68px;
}

.hub-sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 32px;
}

.hub-sidebar-brand img {
  height: 22px;
  max-width: 150px;
  margin-left: 8px;
  object-fit: contain;
}

.hub-sidebar.collapsed .hub-sidebar-brand img,
.hub-sidebar.collapsed .hub-nav-label,
.hub-sidebar.collapsed .hub-user-mini div,
.hub-sidebar.collapsed .hub-sidebar-footer .btn,
.hub-sidebar.collapsed .hub-nav-badge {
  display: none;
}

/* Collapsed mode: the label text is clipped away (height 1px + overflow)
   and only the border remains as a group divider. */
.hub-sidebar.collapsed .hub-nav-group-label {
  height: 1px;
  padding: 0;
  margin: 6px 10px 4px;
  border-top: 1px solid var(--line);
  overflow: hidden;
  color: transparent;
}

.hub-sidebar.collapsed .hub-nav-item {
  justify-content: center;
  padding: 11px 0;
}

.sidebar-toggle {
  border: 0;
  background: var(--surface-3);
  color: var(--muted);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 0;
}

.sidebar-toggle::before {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 18l-6-6 6-6M4 4v16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 18l-6-6 6-6M4 4v16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hub-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hub-nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hub-nav-group-label {
  padding: 0 14px;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
}

.hub-nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  font-size: 13.5px;
  text-align: start;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}

.hub-nav-item:hover {
  background: #ECF1F6;
  color: #1F2937;
}

.hub-nav-item:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.hub-nav-item.active {
  background: var(--brand-soft);
  color: var(--brand-fg);
  box-shadow: inset 3px 0 0 var(--brand);
}

html[dir="rtl"] .hub-nav-item.active {
  box-shadow: inset -3px 0 0 var(--brand);
}

.hub-nav-icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.hub-nav-icon svg,
.sidebar-toggle svg,
.icon-btn svg,
.nav-item svg,
.agent-menu-btn svg,
.agent-settings-btn svg,
.send-btn svg,
.media-btn svg,
.agent-workspace-nav svg,
.chat-toggle svg,
.mobile-sidebar-toggle svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hub-nav-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.hub-nav-badge {
  margin-inline-start: auto;
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  text-align: center;
}

.hub-sidebar-footer {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  display: grid;
  gap: 10px;
}

.hub-user-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
}

.hub-user-mini strong,
.hub-user-mini span {
  display: block;
}

.hub-user-mini strong {
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hub-user-mini span {
  font-size: 11px;
  color: var(--muted);
}

.hub-main {
  flex: 1;
  min-width: 0;
  padding: 0;
  height: 100vh;
  height: 100dvh;
  overflow: auto;
  direction: ltr;
}

.hub-floating-actions {
  position: fixed;
  top: 18px;
  right: 24px;
  z-index: 40;
  display: none;
  gap: 8px;
}

.mobile-sidebar-toggle {
  display: none;
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 96;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .1);
}

html[dir="rtl"] .mobile-sidebar-toggle {
  left: auto;
  right: 14px;
}

.mobile-sidebar-scrim {
  display: none;
  border: 0;
  padding: 0;
}

.agent-hub-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.agent-hub-page-head h1 {
  margin: 0;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 0;
}

.agent-hub-page-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.hub-page {
  padding: 36px 44px;
  max-width: 1120px;
}

.link-btn {
  border: 0;
  background: transparent;
  color: var(--brand-fg);
  font-size: 13px;
  font-weight: 800;
  padding: 0;
}

.section-head {
  margin-top: 32px;
}

.section-head h3,
.dashboard-columns h3 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 800;
}

.section-head .card-subtitle {
  display: none;
}

.dashboard-columns {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
  margin-top: 32px;
}
.dashboard-columns h3 {
  margin: 0 0 12px;
  font-size: 15.5px;
}

.hub-list-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.hub-list-row {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #EEF2F6;
  background: var(--surface);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.hub-list-row:last-child { border-bottom: 0; }
.hub-list-row.passive { cursor: default; }
.hub-list-row span:nth-child(2) { flex: 1; min-width: 0; }
.hub-list-row strong, .hub-list-row small { display: block; }
.hub-list-row strong { font-size: 13px; }
.hub-list-row small {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
  font-size: 12px;
}
.hub-list-row em {
  flex: 0 0 auto;
  color: var(--soft);
  font-size: 11px;
  font-style: normal;
}

.agent-avatar-mini {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
  flex: 0 0 auto;
}

.agent-avatar-mini.has-image {
  overflow: hidden;
  padding: 0;
}

.agent-avatar-mini.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.agent-avatar-mini.has-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}

.hub-list-row .agent-avatar-mini {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  font-size: 11.5px;
}

.agent-avatar-mini.muted {
  background: #EFEAE4;
  color: var(--muted);
}

.notify-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--soft);
  flex: 0 0 auto;
}

.notify-dot.on { background: var(--brand); }

.favorite-btn {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--faint);
  font-size: 18px;
}

.favorite-btn.active {
  color: #B4790E;
}

.agent-filter-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.agent-filter-row input,
.builder-search {
  width: min(320px, 100%);
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  outline: none;
  background: var(--surface);
}

.category-chip {
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  border-radius: 999px;
  padding: 9px 14px;
  font-weight: 700;
  font-size: 12.5px;
}

.category-chip.active {
  border-color: var(--brand-fg);
  background: var(--brand);
  color: #fff;
}

.locked-head { margin-top: 12px; }
.agent-tile.locked {
  background: var(--surface-2);
  border-style: dashed;
  opacity: .92;
}

/* Direction is inherited from <html dir> (applyLanguage) so the whole screen
   mirrors per language: Arabic gets the brand panel on the right, the form on
   the left, and correct punctuation for mixed Arabic/Latin sentences. The old
   forced `direction: ltr` here kept Arabic text inside an LTR context, which
   scrambled trailing periods and "Agent Hub" runs. */
.agent-auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px;
  background: linear-gradient(180deg, var(--brand-soft) 0%, var(--bg) 42%, var(--bg) 100%);
}

.agent-login-shell {
  width: min(1056px, calc(100vw - 80px));
  min-height: 702px;
  display: grid;
  grid-template-columns: 1.06fr 1fr;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .12);
  background: var(--surface);
}

/* The front door is the one place a full brand statement belongs, so this panel
   is where the crimson is spent. Depth comes from a deep-to-brand gradient
   rather than a flat slab, over a barely-there diagonal weave — نسيج means
   weave, and at 4% it reads as texture in the cloth, not as a pattern. */
.agent-login-brand {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 9px),
    linear-gradient(150deg, var(--brand-2) 0%, var(--brand) 62%, var(--brand) 100%);
  color: #fff;
  padding: 62px 48px;
  display: flex;
  flex-direction: column;
}

.agent-login-brand img {
  width: 214px;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.agent-login-brand h1 {
  margin: 58px 0 18px;
  color: #fff;
  font-size: 36px;
  line-height: 1.16;
  letter-spacing: 0;
}

.agent-login-brand p {
  margin: 0;
  max-width: 420px;
  font-size: 16px;
  line-height: 1.65;
}

.agent-login-brand ul {
  margin: auto 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
  font-size: 15px;
  font-weight: 700;
}

.agent-login-brand li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.agent-login-brand li::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--surface);
}

.agent-login-panel {
  padding: 62px 48px;
  align-self: center;
}

.agent-login-panel h2 {
  margin: 0;
  font-size: 25px;
  letter-spacing: 0;
}

.agent-login-panel > p {
  margin: 4px 0 26px;
  color: var(--muted);
}

.agent-login-panel .field {
  margin-bottom: 16px;
}

.agent-login-panel input {
  background: var(--surface-2);
  border-color: var(--line);
  border-radius: 11px;
  padding: 14px 15px;
}

/* Credentials are Latin-script data — keep them LTR even on the Arabic page so
   the caret, placeholder, and typed value read naturally. */
.agent-login-panel input[type="email"],
.agent-login-panel input[type="password"] {
  direction: ltr;
  text-align: left;
}

.forgot-link {
  display: block;
  color: var(--brand-fg);
  font-size: 12.5px;
  font-weight: 800;
  text-align: end;
  text-decoration: none;
  margin: 4px 0 20px;
}

.demo-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  color: var(--soft);
  font-size: 12.5px;
  margin: 28px 0 20px;
}

.demo-divider span {
  height: 1px;
  background: var(--line);
}

.demo-divider em {
  font-style: normal;
}

.demo-account-list {
  display: grid;
  gap: 10px;
}

.demo-account-list button {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
}

.demo-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand-fg);
  font-weight: 900;
}

.demo-avatar.neutral {
  background: var(--surface-3);
  color: var(--muted);
}

.demo-account-list strong,
.demo-account-list small {
  display: block;
}

.demo-account-list strong {
  flex: 1;
  font-size: 14px;
}

.demo-account-list small {
  color: var(--muted);
  font-weight: 500;
  margin-top: 2px;
}

.demo-account-list em {
  color: var(--brand-fg);
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}

.request-line {
  margin-top: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.request-line button {
  border: 0;
  background: transparent;
  color: var(--brand-fg);
  font-weight: 900;
  padding: 0;
}

.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(360px, .9fr) minmax(460px, 1.1fr);
  grid-template-areas: "login hero";
  direction: ltr;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(24px, 4vw, 58px);
  background: var(--bg);
}

.auth-hero {
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  max-width: 660px;
  grid-area: hero;
}

.logo-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 900;
  letter-spacing: .2px;
  color: var(--brand-fg);
}

.home-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 660px;
}

.language-toggle {
  border: 1px solid rgba(var(--brand-rgb),.18);
  background: rgba(255,255,255,.75);
  color: var(--brand-fg);
  border-radius: 999px;
  padding: 9px 14px;
  font-weight: 900;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

.language-toggle:hover {
  background: var(--surface);
}

.logo-mark {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: white;
  display: grid;
  place-items: center;
  box-shadow: 0 18px 34px rgba(var(--brand-rgb),.22);
  font-size: 22px;
}

.naseej-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 16px 30px rgba(26, 22, 20, .18);
  flex: 0 0 auto;
}

.naseej-icon.small {
  width: 42px;
  height: 42px;
}

.naseej-icon img,
.naseej-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.naseej-icon.small img,
.naseej-icon.small svg {
  width: 100%;
  height: 100%;
}

.auth-hero h1 {
  margin: 0;
  font-size: clamp(38px, 4.4vw, 62px);
  line-height: 1.1;
  letter-spacing: 0;
}

.auth-hero p {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.9;
  max-width: 650px;
}

.auth-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 620px;
}

.auth-mini-card {
  background: rgba(255,255,255,.86);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
}

.auth-mini-card strong { display: block; margin-bottom: 8px; }
.auth-mini-card span { color: var(--muted); font-size: 13px; line-height: 1.7; }

html[dir="ltr"] .auth-hero,
html[dir="ltr"] .login-card,
html[dir="ltr"] .auth-mini-card {
  text-align: left;
}

html[dir="rtl"] .auth-hero,
html[dir="rtl"] .login-wrap {
  direction: rtl;
}

html[dir="ltr"] .auth-hero,
html[dir="ltr"] .login-wrap {
  direction: ltr;
}

.login-wrap {
  grid-area: login;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.login-card {
  width: min(450px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: 0 28px 70px rgba(16,24,40,.12);
  padding: 34px;
}

.login-card h2 { margin: 0 0 8px; font-size: 26px; }
.login-card p { margin: 0 0 22px; color: var(--muted); line-height: 1.7; }

.role-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 5px;
  background: var(--surface-3);
  border-radius: 16px;
  margin-bottom: 18px;
}

.role-tab {
  border: 0;
  background: transparent;
  border-radius: 13px;
  padding: 11px 8px;
  color: var(--muted);
  font-weight: 800;
}

.role-tab.active {
  background: var(--surface);
  color: var(--brand-fg);
  box-shadow: var(--shadow-sm);
}

.field { margin-bottom: 14px; }
.field label { display: block; margin-bottom: 7px; color: var(--muted); font-weight: 700; font-size: 13px; }
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 14px;
  padding: 12px 14px;
  outline: none;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input[type="checkbox"],
input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  flex: 0 0 16px;
  margin: 0;
  padding: 0;
  border-radius: 4px;
  accent-color: var(--brand-fg);
}
.field input[type="checkbox"]:focus,
input[type="checkbox"]:focus {
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.10);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: rgba(var(--brand-rgb),.42);
  box-shadow: 0 0 0 4px rgba(var(--brand-rgb),.08);
}

.btn {
  border: 0;
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn.primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: white;
  box-shadow: 0 12px 24px rgba(var(--brand-rgb),.22);
}

.btn.secondary {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
}

.btn.success {
  background: var(--success-strong);
  color: #fff;
}

.btn.secondary.danger-text {
  color: var(--brand-fg);
  border-color: var(--border);
}

.btn.ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
}

.btn.block { width: 100%; }

.demo-hint {
  margin-top: 14px;
  padding: 12px;
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--brand-2);
  font-size: 12px;
  line-height: 1.8;
}

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Same defect as the workspace tab bar: a literal white on a bar whose
     contents are themed, so the dark theme got a white strip. */
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}

[data-theme="red"] .topbar {
  background: rgba(244, 248, 251,.88);
}

.topbar-inner {
  width: var(--content);
  min-height: 74px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
}

.brand-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-copy { min-width: 0; }
.brand-title { font-weight: 900; font-size: 17px; }
.brand-subtitle { margin-top: 3px; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.badge-dot {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--danger);
  border: 2px solid var(--surface);
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 7px 12px;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-fg);
  display: grid;
  place-items: center;
  font-weight: 900;
}

.main {
  width: var(--content);
  margin: 0 auto;
  padding: 20px 0 94px;
  flex: 1;
}

.user-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.chat-page {
  height: calc(100vh - 188px);
  min-height: 560px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.chat-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
}

.chat-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.chat-toggle {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.chat-toggle.active {
  border-color: rgba(var(--brand-rgb),.35);
  background: var(--brand-soft);
  color: var(--brand-fg);
}

.chat-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.user-chat-shell .hub-sidebar,
.user-chat-shell .hub-floating-actions {
  display: none;
}

.workspace-sidebar-scrim {
  display: none;
}

.user-chat-shell.sidebar-open .hub-sidebar {
  display: flex;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: auto;
  z-index: 95;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .18);
}

html[dir="ltr"] .user-chat-shell.sidebar-open .hub-sidebar {
  left: 0;
  right: auto;
}

.user-chat-shell.sidebar-open .workspace-sidebar-scrim {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 90;
  border: 0;
  background: rgba(15, 23, 42, .22);
}

.user-chat-shell .hub-main {
  padding: 0;
  /* NOT 100vh: that is the LARGE viewport, which ignores the keyboard (and the
     URL bar) — the chat then stands taller than the visible area and the
     browser scrolls it, stranding the composer above the keyboard. --app-vh is
     the measured visible height and falls back to 100dvh before JS runs. */
  height: var(--app-vh, 100dvh);
  max-height: var(--app-vh, 100dvh);
  width: 100%;
  max-width: 100vw;
  min-width: 0;
  overflow: hidden;
}

.user-chat-shell .chat-mobile-nav {
  display: none;
}

.agent-workspace {
  /* ONE definition of the reading column, used by the thread, the composer and
     the suggestion row. They were each carrying their own copy of 690px and had
     already drifted apart once; a token means a change to the measure cannot
     leave the input hanging off the edge of the conversation above it.

     920 rather than 690: at 1280px the workspace is ~1090px wide, so a 690px
     column left 400px of dead space either side — the "huge white space" in the
     bug report. 920px is still inside a comfortable measure for prose, and it
     is what lets two suggestion chips share a row instead of stacking (see
     .quick-prompts below). Tables and charts, which are the payload here, gain
     a third more width. */
  /* 1100 rather than 920: with the conversation rail now taking the left
     column, a 920px cap left ~240px of dead gutter either side on a 1900px
     display and more on the admin preview, which is the wasted space in the
     report. 1100 still sits inside a readable measure for prose while giving
     record cards and tables room to hold a right-aligned amount. */
  --chat-measure: min(1100px, 100%);
  height: var(--app-vh, 100dvh);
  max-height: var(--app-vh, 100dvh);
  width: 100%;
  max-width: 100vw;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 82px minmax(0, 1fr) auto auto;
  background: var(--surface-3);
  position: relative;
}

.agent-workspace.panel-mode {
  grid-template-rows: 82px minmax(0, 1fr) auto;
}

.agent-workspace-head {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 32px;
}

.agent-menu-btn,
.agent-settings-btn {
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  box-shadow: none;
  font-size: 0;
}

.agent-menu-btn {
  border: 0;
  background: var(--surface-3);
}

.agent-menu-btn::before,
.agent-settings-btn::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
}

.agent-menu-btn::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.agent-settings-btn::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 0 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 0 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1A2 2 0 1 1 7 4.4l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 0 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1A2 2 0 1 1 19.6 7l-.1.1a1.7 1.7 0 0 0-.3 1.8V9c.2.6.8 1 1.5 1H21a2 2 0 0 1 0 4h-.1c-.7 0-1.3.4-1.5 1Z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 0 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 0 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1A2 2 0 1 1 7 4.4l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 0 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1A2 2 0 1 1 19.6 7l-.1.1a1.7 1.7 0 0 0-.3 1.8V9c.2.6.8 1 1.5 1H21a2 2 0 0 1 0 4h-.1c-.7 0-1.3.4-1.5 1Z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.agent-workspace-title {
  flex: 1;
  min-width: 0;
}

.agent-workspace-title h2 {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0;
}

.agent-workspace-title p {
  margin: 3px 0 0;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11.5px;
}

/* The conversation is a COLUMN, not a full-bleed canvas. Without a centred
   measure the two speakers get pinned to opposite edges of the viewport: on a
   large monitor that left a void down the middle and pushed a single reply to
   ~200 characters a line, which is roughly three times a comfortable measure.
   Capping the column here — rather than only the bubbles — is what brings the
   exchange back together as one readable thread. */
.agent-workspace-stream {
  padding: 28px clamp(16px, 4vw, 40px) 32px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: var(--chat-measure, 690px);
  margin-inline: auto;
}

.agent-workspace-content {
  min-height: 0;
  overflow-y: auto;
  padding: 24px 32px 28px;
  background: var(--surface-3);
}

.agent-workspace-content .panel-page {
  min-height: 100%;
}

.agent-workspace-content .page-panel-head {
  border: 1px solid var(--line);
  border-radius: 16px;
  margin-bottom: 16px;
  background: var(--surface);
}

.agent-workspace-content .cards-grid {
  padding: 0;
}

/* A reply from this agent is a briefing, not a chat quip: bold labels, grouped
   bullets, figures and dates. It earns a readable measure and enough leading to
   scan. 74ch is the upper end of comfortable for this size; past it the eye
   loses the line on the way back. */
.agent-workspace-stream .message {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border-radius: 18px;
  padding: 14px 18px;
  font-size: 15px;
  line-height: 1.7;
  /* Figures are the payload in a sales tool. Tabular numerals make SAR
     amounts, percentages and dates line up between rows so a column of
     values can be compared by eye instead of read one at a time. */
  font-variant-numeric: tabular-nums;
}

.agent-workspace-stream .message-body {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* The agent's answer sits on its own surface with a hairline and a low, wide
   shadow — enough to lift it off the page so a long reply reads as one object,
   not a wall of text bleeding into the background. */
.agent-workspace-stream .message.agent {
  align-self: flex-start;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -12px rgba(16, 24, 40, .14);
  /* The flattened corner points at the side the bubble is anchored to. */
  border-start-start-radius: 4px;
}

/* The user's own words stay short and are set in the brand, so the eye can
   find "what did I ask?" while scanning back through a long thread. */
.agent-workspace-stream .message.user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 2px 10px -4px rgba(var(--brand-rgb), .5);
  border-start-end-radius: 4px;
}

.agent-workspace-bottom {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 16px 32px 18px;
  min-width: 0;
  max-width: 100vw;
}

.agent-workspace-bottom .quick-prompts {
  padding: 0;
  justify-content: flex-start;
  margin-bottom: 12px;
}

.compact-chat-controls {
  display: none;
}

.agent-workspace-bottom .chat-composer {
  border: 0;
  padding: 0;
  box-shadow: none;
}

.agent-workspace-bottom .composer-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  position: relative;
}

.send-btn {
  height: 46px;
  border-radius: 12px;
  min-width: 107px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0;
  box-shadow: 0 12px 22px rgba(var(--brand-rgb),.2);
}

.send-btn span { font-size: 13.5px; }

.send-btn::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m22 2-7 20-4-9-9-4ZM22 2 11 13' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m22 2-7 20-4-9-9-4ZM22 2 11 13' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.agent-workspace-bottom .composer-row input[type="text"] {
  height: 46px;
  border-radius: 12px;
  background: var(--surface-2);
  border-color: var(--line);
}

.agent-workspace-bottom .media-btn {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.attach-toggle {
  display: none;
}

.composer-media-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Legacy — superseded by the unified rule further down; see that
   block's comment for the single source of truth on this bar. */
.agent-workspace-nav {
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}

.agent-tab {
  min-width: 0;
  max-width: none;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
}

.agent-tab.active {
  background: var(--brand-soft);
  color: var(--brand-fg);
}

.agent-tab span {
  width: 19px;
  height: 19px;
}

.agent-tab strong {
  font-size: 10.5px;
  line-height: 1;
}

.voice-speed-control {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 8px 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.voice-speed-control select {
  border: 0;
  background: transparent;
  color: var(--brand-fg);
  font: inherit;
  outline: 0;
  min-width: 58px;
}

.chat-settings-popover {
  position: absolute;
  top: 56px;
  right: 32px;
  z-index: 70;
  width: 270px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(15, 23, 42,.14);
  padding: 18px;
  display: none;
}

.chat-settings-popover.open {
  display: grid;
  gap: 12px;
}

html[dir="rtl"] .chat-settings-popover {
  right: auto;
  left: 32px;
  text-align: right;
}

.chat-settings-popover h3 {
  margin: 0 0 2px;
  font-size: 13.5px;
}

.chat-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.chat-setting-row strong,
.chat-setting-row span {
  display: block;
}

.chat-setting-row strong {
  font-size: 12.5px;
}

.chat-setting-row span {
  color: var(--muted);
  font-size: 11px;
}

.switch-btn {
  width: 38px;
  height: 22px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: var(--line);
  position: relative;
}

.switch-btn::after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface);
  position: absolute;
  top: 3px;
  left: 3px;
  transition: left .15s ease;
}

.switch-btn.on {
  background: var(--brand);
}

.switch-btn.on::after {
  left: 19px;
}

html[dir="rtl"] .switch-btn::after {
  left: auto;
  right: 3px;
}

html[dir="rtl"] .switch-btn.on::after {
  right: 19px;
}

.chat-speed-row {
  display: grid;
  gap: 7px;
}

.chat-speed-row span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.chat-speed-row strong {
  font-size: 12.5px;
}

.chat-speed-row em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.chat-speed-row input {
  width: 100%;
  accent-color: var(--brand-fg);
}

.chat-head h2, .panel-title h2 {
  margin: 0;
  font-size: 20px;
}

.chat-head p, .panel-title p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.status-pill {
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-2);
  font-weight: 800;
  font-size: 12px;
}

.chat-stream {
  overflow: auto;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--brand-rgb),.05), transparent 26%),
    var(--surface);
}

.message {
  max-width: min(1100px, 92%);
  border-radius: 22px;
  padding: 13px 16px;
  line-height: 1.8;
  font-size: 14px;
  box-shadow: 0 4px 14px rgba(16,24,40,.05);
}

/* Sides are logical so they mirror per language: the USER writes from the
   start side (left in English, right in Arabic) and the AGENT answers from
   the end side. */
.message.agent {
  align-self: flex-end;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-end-end-radius: 8px;
}

.message.user {
  align-self: flex-start;
  color: white;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-end-start-radius: 8px;
}

.msg-meta {
  margin-top: 6px;
  color: var(--soft);
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.message.user .msg-meta { color: rgba(255,255,255,.72); }

.message-body { white-space: pre-wrap; }

.message-audio {
  margin-top: 10px;
  display: grid;
  gap: 6px;
  min-width: min(280px, 72vw);
}

.message-audio audio {
  width: 100%;
  height: 36px;
}

.message-audio span {
  font-size: 11px;
  color: var(--soft);
}

.message.user .message-audio span {
  color: rgba(255,255,255,.78);
}

.typing-message {
  min-width: 132px;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.typing-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  opacity: .38;
  animation: typingBounce 1s ease-in-out infinite;
}

.typing-dots span:nth-child(2) { animation-delay: 140ms; }
.typing-dots span:nth-child(3) { animation-delay: 280ms; }

.typing-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

@keyframes typingBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .38; }
  40% { transform: translateY(-4px); opacity: 1; }
}

.speak-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--brand-fg);
  display: inline-grid;
  place-items: center;
}

.speak-btn.active,
.chat-toggle.danger {
  background: var(--brand);
  color: white;
  border-color: transparent;
}

/* Deferred voice: audio still being prepared — pulse the (disabled) speaker,
   then it lights up as a normal play button the moment the audio lands. */
.speak-btn.preparing {
  cursor: default;
  animation: voice-preparing 1.2s ease-in-out infinite;
}

@keyframes voice-preparing {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

.chat-toggle.danger {
  box-shadow: var(--shadow-sm);
}

.speak-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.confirmation-box {
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--line);
}

.confirmation-box pre {
  direction: ltr;
  text-align: left;
  white-space: pre-wrap;
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
}

.small-btn.confirm {
  background: var(--brand);
  color: white;
  border-color: transparent;
}

.quick-prompts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 22px 10px;
  background: var(--surface);
}

.prompt-chip {
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 12px;
}

.prompt-chip:disabled,
.chat-composer.is-locked button:disabled,
.chat-composer.is-locked input:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.info-banner {
  margin: 12px 14px 0;
  padding: 10px 14px;
  border: 1px solid var(--warning-soft, #FBF0DC);
  border-radius: 14px;
  background: var(--warning-soft, #FBF0DC);
  color: var(--warning-strong, #B4790E);
  font-size: 12.5px;
  font-weight: 700;
}

.filter-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 14px 0;
}

.empty-card {
  grid-column: 1 / -1;
}

.task-card.is-complete {
  opacity: .72;
}

.task-card .card-top,
.meeting-card .card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.task-card-heading {
  flex: 1;
  min-width: 0;
}

.task-complete-toggle {
  display: flex;
  align-items: center;
  padding-top: 2px;
}

.task-complete-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--success-strong, var(--success-strong));
  cursor: pointer;
}

.card-title.is-done-text {
  text-decoration: line-through;
  color: var(--soft);
}

.meeting-date-block {
  flex: none;
  width: 64px;
  text-align: center;
  padding: 6px 4px;
  border-radius: 10px;
  background: var(--surface-3);
}

.meeting-date-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}

.meeting-date-block strong {
  font-family: var(--font-heading);
  font-size: 12.5px;
  line-height: 1.3;
  display: block;
}

.meeting-prep-panel {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--success-soft, #E3F3EA);
  border: 1px solid var(--success-soft, #E3F3EA);
}

.meeting-prep-panel strong {
  display: block;
  font-size: 12px;
  color: var(--success-strong, var(--success-strong));
  margin-bottom: 4px;
}

.meeting-prep-panel p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
}

.meeting-prep-panel.is-error {
  background: var(--danger-soft, #FDEAEA);
  border-color: var(--danger-soft, #FDEAEA);
}

.meeting-prep-panel.is-error strong {
  color: var(--brand-fg);
}

.quick-action-config {
  padding-top: 6px;
  border-top: 1px dashed var(--line);
  margin-top: 6px;
}

.section-label {
  display: block;
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 4px;
}

.field-hint {
  margin: 0 0 8px;
  font-size: 11.5px;
  color: var(--muted);
}

.chat-composer {
  border-top: 1px solid var(--line);
  padding: 14px 18px 18px;
  background: var(--surface);
  /* The anchor for .meeting-picker, which sits above the composer via
     `bottom: calc(100% + 10px)`. Without it the sheet resolves against
     whatever ancestor happens to be positioned. z-index stays auto, so no
     stacking context is created and the existing media menu and scrim keep
     their layering. */
  position: relative;
}

.chat-composer.is-locked {
  background: linear-gradient(180deg, rgba(var(--brand-rgb),.03), var(--surface));
}

.upload-preview {
  display: none;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  margin-bottom: 10px;
  border: 1px dashed rgba(var(--brand-rgb),.28);
  background: var(--brand-soft);
  color: var(--brand-2);
  border-radius: 14px;
  font-size: 12px;
}
.upload-preview.show { display: flex; }
/* A staged PACK (up to 10 documents): one chip per file so every name is
   visible and individually removable — accumulating across picker rounds is
   useless if the user cannot see or trim what has piled up. */
.upload-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.upload-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 260px;
  padding: 3px 8px;
  border: 1px solid rgba(var(--brand-rgb),.22);
  background: var(--surface, #fff);
  border-radius: 999px;
  line-height: 1.5;
}
.upload-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr; /* keep .pdf suffixes readable inside the RTL UI */
}
.upload-chip-size { color: var(--muted); flex: none; }
.upload-chip-x {
  flex: none;
  width: 24px;
  height: 24px;
  margin: -3px -6px -3px -2px;
  border: 0;
  background: none;
  color: inherit;
  font-size: 15px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
}
.upload-chip-x:hover { background: rgba(var(--brand-rgb),.12); }
.upload-preview-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: none;
}
.upload-count { color: var(--muted); white-space: nowrap; }
/* ============================================================
   Meetings staged onto a composer turn
   ------------------------------------------------------------
   A picked meeting is NOT a file: the user chose a reference the server will
   render, not bytes off their disk. So it gets its own chip row rather than
   joining the upload chips — same anatomy so the composer stays one thing, a
   different tint so "these came from my archive" is legible at a glance.
   ============================================================ */
.meeting-preview {
  display: none;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  margin-bottom: 10px;
  border: 1px solid rgba(var(--brand-rgb),.20);
  background: var(--surface-3, var(--brand-soft));
  color: var(--text);
  border-radius: 14px;
  font-size: 12px;
}
.meeting-preview.show { display: flex; }
.meeting-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.meeting-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 280px;
  padding: 3px 8px;
  border: 1px solid rgba(var(--brand-rgb),.22);
  background: var(--surface, #fff);
  border-radius: 999px;
  line-height: 1.5;
}
/* Meeting titles are prose, often Arabic — unlike a filename they must follow
   the paragraph direction, so no `direction: ltr` here. */
.meeting-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meeting-chip-when { color: var(--muted); flex: none; }
.meeting-chip-x {
  flex: none;
  width: 24px;
  height: 24px;
  margin: -3px -6px -3px -2px;
  border: 0;
  background: none;
  color: inherit;
  font-size: 15px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
}
.meeting-chip-x:hover { background: rgba(var(--brand-rgb),.12); }
.meeting-preview-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: none;
}
.meeting-count { color: var(--muted); white-space: nowrap; }

/* The picker itself. Anchored above the composer on desktop; a bottom sheet on
   a phone, where a floating panel would sit under the keyboard. */
.meeting-picker-scrim {
  position: fixed;
  inset: 0;
  z-index: 65;
  border: 0;
  padding: 0;
  background: rgba(15, 23, 42, .28);
}
.meeting-picker {
  position: absolute;
  bottom: calc(100% + 10px);
  inset-inline: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(60vh, 460px);
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .20);
}
.meeting-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.meeting-picker-head strong { font-size: 14px; }
.meeting-picker-x {
  width: 28px; height: 28px;
  border: 0; background: none; color: var(--muted);
  font-size: 18px; line-height: 1; border-radius: 50%; cursor: pointer;
}
.meeting-picker-x:hover { background: var(--surface-3); color: var(--text); }
.meeting-picker-hint { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.meeting-picker-search {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2, var(--surface));
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.meeting-picker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;   /* lets the list, not the sheet, do the scrolling */
}
.meeting-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 10px;
  text-align: start;
  cursor: pointer;
  color: var(--text);
}
.meeting-option:hover { background: var(--surface-3); }
.meeting-option.is-picked { border-color: rgba(var(--brand-rgb),.35); background: var(--brand-soft); }
.meeting-option-check {
  flex: none;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px; line-height: 1;
}
.meeting-option.is-picked .meeting-option-check {
  border-color: var(--brand); background: var(--brand); color: #fff;
}
.meeting-option-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.meeting-option-body strong {
  font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.meeting-option-body small { font-size: 11px; color: var(--muted); }
.meeting-picker-empty {
  margin: 0;
  padding: 18px 8px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.meeting-picker-empty p { margin: 0; }
.meeting-picker-empty small { font-size: 11px; }
.meeting-picker-note { margin: 0; font-size: 11px; color: var(--muted); }
.meeting-picker-note.is-warn { color: var(--danger, #b42318); }

/* The preview. Evidence, not decoration — it is what makes a refusal visible
   (a meeting the user was removed from is otherwise just absent from the
   answer) and what lets someone see the size of what they are about to send. */
.meeting-preview-doc {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2, var(--surface-3));
}
.meeting-preview-doc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11px; color: var(--muted);
}
.meeting-preview-size { font-variant-numeric: tabular-nums; flex: none; }
.meeting-preview-skipped {
  margin: 0;
  padding-inline-start: 18px;
  font-size: 11px;
  color: var(--danger, #b42318);
  display: flex; flex-direction: column; gap: 3px;
}
.meeting-preview-text {
  margin: 0;
  /* dir="auto" resolves direction from the content, but text-align is inherited
     as a PHYSICAL value from the RTL page  so an English document came out
     ltr and right-aligned. `start` resolves against this element instead. */
  text-align: start;
  max-height: 200px;
  overflow: auto;
  padding: 8px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.meeting-picker-foot-actions { display: flex; align-items: center; gap: 8px; }
/* Opening the preview used to squeeze the option list from three visible rows
   to one: both are flex children of a fixed-height sheet, and the list is the
   one that yields. Give the sheet more room only while a preview is open. */
.meeting-picker:has(.meeting-preview-doc) { max-height: min(78vh, 620px); }
.meeting-picker-list { flex: 1 1 auto; min-height: 88px; }
.meeting-preview-doc { flex: 0 1 auto; }

.meeting-picker-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--muted);
}

@media (max-width: 720px) {
  /* Fixed to the viewport bottom: anchored to the composer it would be pushed
     off-screen by the on-screen keyboard the search field summons. */
  .meeting-picker {
    position: fixed;
    inset-inline: 8px;
    bottom: 8px;
    max-height: 72vh;
  }
  .meeting-chip { max-width: 100%; }
}


.voice-panel {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted);
}

.voice-panel.show { display: flex; }

.voice-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 30px;
}

.voice-wave span {
  width: 4px;
  height: 14px;
  border-radius: 999px;
  background: var(--brand-2);
  animation: voicePulse 850ms ease-in-out infinite;
}

.voice-wave span:nth-child(2) { animation-delay: 90ms; height: 22px; }
.voice-wave span:nth-child(3) { animation-delay: 180ms; height: 28px; }
.voice-wave span:nth-child(4) { animation-delay: 270ms; height: 18px; }
.voice-wave span:nth-child(5) { animation-delay: 360ms; height: 26px; }
.voice-wave span:nth-child(6) { animation-delay: 450ms; height: 20px; }
.voice-wave span:nth-child(7) { animation-delay: 540ms; height: 12px; }

@keyframes voicePulse {
  0%, 100% { transform: scaleY(.55); opacity: .55; }
  50% { transform: scaleY(1); opacity: 1; }
}

.voice-stop {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 6px solid rgba(var(--brand-rgb),.18);
  background: var(--brand-2);
  color: white;
  box-shadow: var(--shadow-sm);
}

.composer-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.composer-row input[type="text"] {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 13px 14px;
  outline: none;
  background: var(--surface-2);
}

.attach-btn,
.media-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-2);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  box-shadow: var(--shadow-sm);
}

.media-btn svg,
.voice-stop svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.media-btn.camera { background: #fff4e5; }
.media-btn.document { background: #ebfff1; }
.media-btn.mic { background: #edf2ff; }
.media-btn.mic.active {
  background: var(--brand-2);
  color: white;
  animation: micGlow 1s ease-in-out infinite;
}

@keyframes micGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--brand-rgb),.28); }
  50% { box-shadow: 0 0 0 9px rgba(var(--brand-rgb),.08); }
}

.bottom-nav {
  position: fixed;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 40;
  /* The main mobile bottom navigation — same defect again. */
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.bottom-nav-inner {
  width: min(680px, 100%);
  margin: 0 auto;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.nav-item {
  flex: 1;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--muted);
  padding: 9px 6px;
  display: grid;
  gap: 5px;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
}

.nav-item .icon { font-size: 18px; }
.nav-item.active { background: var(--brand-soft); color: var(--brand-fg); }

.panel-page {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  min-height: calc(100vh - 188px);
}

.page-panel-head {
  padding: 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
}

.panel-title {
  min-width: 0;
}

.page-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cards-grid {
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.task-card, .meeting-card, .admin-card, .notification-card {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 20px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.card-title {
  font-weight: 900;
  margin-bottom: 4px;
}

.card-subtitle {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.priority {
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 900;
}
.priority.high { background: var(--danger-soft); color: var(--danger-strong); }
.priority.medium { background: var(--warning-soft); color: var(--warning-strong); }
.priority.low { background: color-mix(in oklab, var(--ok, #027a48) 12%, transparent); color: var(--ok, #027a48); }

.card-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  margin-top: 12px;
}

.card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.small-btn {
  border: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 12px;
  padding: 8px 10px;
  color: var(--text);
  font-weight: 800;
  font-size: 12px;
}

.card-action-primary {
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  border-radius: 12px;
  padding: 8px 12px;
  font-weight: 800;
  font-size: 12px;
}

.card-actions .small-btn,
.card-actions .card-action-primary {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
}

@media (max-width: 760px) {
  .card-actions .small-btn,
  .card-actions .card-action-primary {
    min-height: 44px;
  }
}

.card-action-primary:disabled {
  opacity: .65;
  cursor: not-allowed;
}

.notification-panel, .theme-panel {
  position: fixed;
  top: 72px;
  right: 24px;
  width: min(420px, calc(100vw - 32px));
  z-index: 80;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: none;
}

html[dir="rtl"] .notification-panel,
html[dir="rtl"] .theme-panel {
  right: auto;
  left: 24px;
}
.notification-panel.open, .theme-panel.open { display: block; }

.panel-mini-head {
  padding: 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.panel-mini-head h3 { margin: 0; font-size: 17px; }

.notification-list {
  padding: 14px;
  display: grid;
  gap: 10px;
  max-height: 420px;
  overflow: auto;
}

.notification-card {
  box-shadow: none;
  padding: 13px;
}
.notification-card.unread {
  border-color: rgba(var(--brand-rgb),.28);
  background: var(--brand-soft);
}

.theme-options {
  padding: 14px;
  display: grid;
  gap: 12px;
}

.theme-choice {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 18px;
  padding: 14px;
  /* Logical, not `right`: this was hardcoded for the Arabic-first UI and
     right-aligned the label in English. */
  text-align: start;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.theme-choice.active {
  border-color: rgba(var(--brand-rgb),.42);
  background: var(--brand-soft);
}

.swatches {
  display: flex;
  gap: 6px;
}
.swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line);
}
.swatch.red { background: var(--brand); }
.swatch.white { background: var(--surface); }
.swatch.pale { background: #F4F8FB; }

.admin-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px 1fr;
}

.admin-side {
  background: #1f1f24;
  color: white;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.admin-side .logo-row { color: white; }
.admin-nav {
  display: grid;
  gap: 8px;
}

.admin-nav-btn {
  border: 0;
  color: rgba(255,255,255,.72);
  background: transparent;
  border-radius: 14px;
  padding: 12px;
  text-align: right;
  font-weight: 800;
}
.admin-nav-btn.active {
  color: white;
  background: rgba(255,255,255,.12);
}

.admin-main {
  padding: 24px;
  overflow: auto;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.admin-header h1 {
  margin: 0;
  font-size: 26px;
}

.admin-header p {
  margin: 6px 0 0;
  color: var(--muted);
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.compact-auth .auth-hero { min-height: 420px; }
.login-wrap.centered { align-items: center; justify-content: center; }
.pending-card { text-align: center; }
.pending-card .naseej-icon { margin: 0 auto 16px; }

.checkbox-stack {
  display: grid;
  gap: 10px;
  color: var(--muted);
  font-size: 14px;
}

.checkbox-stack label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hub-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.hub-hero {
  min-height: 210px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 28px;
  background: linear-gradient(135deg, rgba(var(--brand-rgb), 0.08), rgba(255, 255, 255, 0.94)), var(--surface);
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.hub-hero h1 {
  margin: 12px 0 10px;
  font-size: clamp(28px, 4vw, 46px);
  letter-spacing: 0;
}

.hub-hero p {
  margin: 0;
  max-width: 760px;
  color: var(--muted);
  line-height: 1.8;
}

.hub-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.hub-stats.admin-stats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.hub-stats > div {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.hub-stats.admin-stats > div {
  border-radius: 14px;
  padding: 16px;
}

.hub-stats strong {
  display: block;
  font-size: 30px;
  margin-bottom: 4px;
}

.hub-stats.admin-stats strong {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 22px;
}

.hub-stats.admin-stats strong.stat-text {
  font-size: 15.5px;
}

.hub-stats span {
  color: var(--muted);
  font-size: 13px;
}

.hub-stats.admin-stats span {
  font-size: 11.5px;
  font-weight: 600;
}

.hub-stats .stat-warning strong { color: var(--warning-strong, #B4790E); }
.hub-stats .stat-danger strong { color: var(--brand-fg); }
.hub-stats .stat-success strong { color: var(--success-strong, var(--success-strong)); }

.agent-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.agent-tile-grid.large {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.agent-tile {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  background: var(--surface);
  box-shadow: none;
  display: grid;
  gap: 12px;
}

.home-agent-card {
  min-height: 180px;
  max-width: none;
}

.home-agent-card .btn {
  background: var(--brand-soft);
  color: var(--brand-fg);
  border: 0;
  margin-top: auto;
}

.agent-tile.empty {
  grid-column: 1 / -1;
  text-align: center;
  min-height: 150px;
  place-content: center;
}

.agent-tile-head {
  display: flex;
  gap: 12px;
  align-items: center;
}

.agent-tile-head strong,
.agent-tile-head span {
  display: block;
}

.agent-tile-head span {
  color: var(--muted);
  font-size: 11.5px;
}

.home-agent-card .agent-tile-head div > span:not(.home-agent-category) {
  display: none;
}

.agent-tile p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  min-height: 36px;
  font-size: 12.5px;
}

.home-agent-card p {
  min-height: 36px;
}

.home-agent-card .btn,
.agent-tile .btn.secondary.block {
  padding: 9px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 800;
  box-shadow: none;
}

.approval-list {
  display: grid;
  gap: 14px;
}

.approval-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 0.8fr) auto;
  gap: 18px;
  align-items: center;
}

.approval-card h3 { margin: 0 0 6px; }

.approval-card p {
  margin: 4px 0;
  color: var(--muted);
  line-height: 1.6;
}

.approval-row,
.log-row {
  border-top: 1px solid var(--border);
  padding: 12px 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.approval-row span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.access-matrix {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.access-row {
  min-width: 760px;
  display: grid;
  grid-template-columns: 240px repeat(auto-fit, minmax(120px, 1fr));
  align-items: stretch;
  border-bottom: 1px solid var(--border);
}

.access-row:last-child { border-bottom: 0; }

.access-row > * {
  padding: 14px;
  border-inline-end: 1px solid var(--border);
}

.access-row > *:last-child { border-inline-end: 0; }

.access-head {
  background: rgba(var(--brand-rgb), 0.06);
  font-size: 13px;
  color: var(--muted);
}

.access-row div span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
}

.access-cell {
  display: grid;
  place-items: center;
}

.empty-state {
  padding: 22px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: 8px;
}

.builder-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.builder-message-preview {
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  display: grid;
  align-content: start;
  gap: 10px;
}

.builder-message-preview div {
  max-width: 85%;
  padding: 11px 14px;
  border-radius: 14px;
  background: var(--surface-3);
  color: #27303F;
  line-height: 1.5;
}

.builder-message-preview .muted {
  color: var(--muted);
  font-style: italic;
}

.module-toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.module-toggle-grid button {
  border: 1.5px solid var(--line);
  background: var(--surface);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  text-align: left;
  color: var(--muted);
}

.module-toggle-grid button.active {
  border-color: var(--brand-soft);
  background: var(--brand-soft);
  color: var(--brand-fg);
}

.module-toggle-grid button span {
  display: grid;
  gap: 3px;
}

.module-toggle-grid button small {
  color: var(--muted);
}

.module-toggle-grid button em {
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--faint);
  position: relative;
}

.module-toggle-grid button em::after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface);
  position: absolute;
  top: 3px;
  left: 3px;
  transition: left .15s;
}

.module-toggle-grid button.active em {
  background: var(--brand);
}

.module-toggle-grid button.active em::after {
  left: 19px;
}

.builder-user-list {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  max-height: 290px;
  overflow-y: auto;
  background: var(--surface);
}

.builder-user-list button {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #EEF2F6;
  background: var(--surface);
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  color: var(--muted);
}

.builder-user-list button:last-child { border-bottom: 0; }

.prompt-editor {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.prompt-editor span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--surface-3);
  font-size: 12px;
  font-weight: 700;
}

.prompt-editor button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
}

.prompt-add-row {
  display: flex;
  gap: 8px;
}

.prompt-add-row input {
  flex: 1;
  padding: 10px 13px;
  border-radius: 9px;
  border: 1.5px solid var(--line);
}

.publish-checklist {
  display: grid;
  gap: 8px;
  max-width: 540px;
}

.publish-checklist div,
.analytics-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.publish-checklist strong {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
}

.publish-checklist .ok {
  background: #E3F3EA;
  color: var(--success-strong);
}

.publish-checklist .missing {
  background: #FBF0DC;
  color: #B4790E;
}

.builder-footer {
  display: flex;
  justify-content: space-between;
}

.admin-card h3 { margin: 0 0 14px; }
.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.section-head h3 {
  margin: 0 0 6px;
}

.agent-row, .user-row, .log-row {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 10px;
  background: var(--surface-2);
}

.agent-row strong, .user-row strong { display: block; margin-bottom: 4px; }
.agent-row code, .log-row code {
  display: block;
  direction: ltr;
  text-align: left;
  color: var(--muted);
  word-break: break-all;
  font-size: 12px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form-grid .full { grid-column: 1 / -1; }

.code-area,
.agent-test-output {
  direction: ltr;
  text-align: left;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.code-area {
  min-height: 150px;
}

.agent-test-output {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  margin: 14px 0 0;
  max-height: 360px;
  overflow: auto;
  padding: 14px;
  white-space: pre-wrap;
}

.table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
}
.table th, .table td {
  border-bottom: 1px solid var(--line);
  padding: 12px;
  text-align: right;
  font-size: 13px;
}
.table th { color: var(--muted); background: var(--surface-2); }

.admin-export-page,
.builder-export-page {
  max-width: 1040px;
  margin: 0 auto;
  color: #0B1220;
}

.admin-export-head,
.builder-export-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.admin-export-head h2,
.builder-export-top h2 {
  margin: 0;
  font-size: 26px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: 0;
}

.admin-export-head p,
.builder-export-top p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.admin-add-agent-btn {
  min-width: 128px;
  border-radius: 10px;
  padding: 11px 18px;
  background: var(--brand);
  box-shadow: none;
}

.agent-table-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.agent-admin-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.agent-admin-table th,
.agent-admin-table td {
  border-bottom: 1px solid var(--line);
  padding: 15px 18px;
  text-align: start;
  vertical-align: middle;
  font-size: 13px;
}

.agent-admin-table th {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 900;
  background: var(--surface-2);
}

.agent-admin-table tr:last-child td { border-bottom: 0; }

.agent-table-name {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.agent-table-name strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-status {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.table-status.active { background: var(--success-soft); color: var(--success-strong); }
.table-status.draft { background: var(--surface-3); color: var(--muted); }

.table-module-list {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.table-module-list span {
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
}

.table-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.agent-admin-table .small-btn,
.builder-export-page .small-btn {
  border-color: var(--line);
  background: var(--surface);
  color: #27303F;
  border-radius: 8px;
  padding: 8px 11px;
}

.builder-export-page { max-width: 1138px; }

.builder-export-top {
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 14px;
}

.builder-back-icon {
  width: 35px;
  height: 35px;
  border: 0;
  border-radius: 9px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 20px;
}

.wizard-export-steps {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 0 7px;
}

.wizard-export-steps::-webkit-scrollbar { display: none; }

.wizard-export-steps button {
  flex: 0 0 auto;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: #27303F;
  padding: 7px 15px 7px 11px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  font-size: 12px;
}

.wizard-export-steps button span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f1ebe5;
  color: var(--muted);
  font-size: 10px;
}

.wizard-export-steps button.active {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
}

.wizard-export-steps button.active span {
  background: var(--surface);
  color: var(--text);
}

.wizard-progress {
  height: 8px;
  width: min(832px, 100%);
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  margin-bottom: 26px;
}

.wizard-progress span {
  display: block;
  height: 100%;
  background: var(--text);
}

/* ---- Builder v2: step rail + content layout ---- */

.builder-export-top .builder-ready-chip {
  margin-inline-start: auto;
  align-self: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--success-soft);
  color: var(--success-strong);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.builder-layout {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.builder-step-rail {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 10px;
}

.rail-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  text-align: start;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}

.rail-step:hover { background: var(--surface-3); }

.rail-step:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.rail-step-marker {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.rail-step-text {
  display: grid;
  min-width: 0;
}

.rail-step-text strong {
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rail-step-text small {
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rail-step.complete .rail-step-marker {
  background: var(--success-soft);
  color: var(--success-strong);
}

.rail-step.attention .rail-step-marker {
  background: #FEF3C7;
  color: #92400E;
}

.rail-step.active {
  background: var(--brand-soft);
  color: var(--brand-fg);
}

.rail-step.active .rail-step-marker {
  background: var(--brand);
  color: #fff;
}

.builder-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.builder-step-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  color: #0B1220;
}

.builder-step-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}

.builder-step-meta {
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 900;
  white-space: nowrap;
}

.builder-content { min-width: 0; }

.builder-content .builder-footer.export-footer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: 14px;
  padding: 12px 4px;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(4px);
  border-top: 1px solid var(--line);
}

.builder-footer-info {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.builder-footer-actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

@media (max-width: 980px) {
  .builder-layout { grid-template-columns: 1fr; gap: 14px; }
  .builder-step-rail {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 8px;
  }
  .builder-step-rail::-webkit-scrollbar { display: none; }
  .rail-step { flex: 0 0 auto; padding: 7px 10px; }
  .rail-step-text small { display: none; }
  .builder-footer-info { display: none; }
}

.builder-export-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  padding: 28px;
  min-height: 370px;
}

.builder-basic-grid,
.builder-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .8fr);
  gap: 28px;
}

.builder-form-stack { display: grid; gap: 16px; }
.builder-export-card .field { display: grid; gap: 7px; }

.builder-export-card label,
.builder-export-card h3,
.builder-export-card h4,
.reference-upload-row strong,
.accent-row strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.builder-export-card input,
.builder-export-card textarea,
.builder-export-card select,
.builder-search {
  width: 100%;
  border: 1px solid #DBE3EC;
  background: var(--surface);
  border-radius: 9px;
  padding: 11px 14px;
  min-height: 41px;
  color: var(--text);
  font: inherit;
}

.builder-export-card textarea { min-height: 72px; resize: vertical; }

.builder-live-preview h4,
.builder-two-col h3 {
  margin: 0 0 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.builder-live-preview .agent-tile { box-shadow: none; }

.reference-upload-row,
.accent-row { display: grid; gap: 8px; }

.reference-upload-row strong span { color: var(--muted-2); font-weight: 800; }

.accent-row > div {
  display: flex;
  gap: 10px;
}

.accent-row button {
  width: 31px;
  height: 31px;
  border: 1px solid transparent;
  border-radius: 8px;
}

.accent-row button.active {
  outline: 2px solid #172033;
  outline-offset: 2px;
}

.builder-step-hint,
.json-map-head p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 13px;
}

.export-modules { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.module-toggle-grid.export-modules button,
.voice-module-toggle {
  border-color: var(--line);
  border-radius: 11px;
  background: var(--surface);
}

.module-toggle-grid.export-modules button.active {
  border-color: var(--brand-soft);
  background: #f9e5e3;
}

.connections-step-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.connections-step-head h3 {
  margin: 0 0 6px;
  font-size: 18px;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
}

.connections-step-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.connections-step-head span,
.validation-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.connection-accordion-list {
  display: grid;
  gap: 12px;
}

.connection-accordion {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
}

.connection-accordion summary {
  cursor: pointer;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  list-style: none;
}

.connection-accordion summary::-webkit-details-marker {
  display: none;
}

.connection-accordion summary span {
  display: grid;
  gap: 3px;
}

.connection-accordion summary small {
  color: var(--muted);
  font-size: 12px;
}

.connection-accordion summary em {
  font-style: normal;
  color: var(--brand-fg);
  font-size: 12px;
  font-weight: 900;
}

.connection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 0 18px 18px;
}

.connection-grid .full,
.connection-use-main,
.connection-actions,
.agent-test-output {
  grid-column: 1 / -1;
}

.connection-use-main {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.connection-use-main input[type="checkbox"] {
  margin-top: 2px;
}

.connection-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.validation-badge.ok {
  background: #dff4e8;
  color: #217348;
}

.validation-badge.fail {
  background: #fae2e0;
  color: #B42318;
}

.agent-test-output {
  margin: 0;
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #101828;
  color: #fff7ef;
  padding: 12px;
  font-size: 12px;
  white-space: pre-wrap;
  direction: ltr;
  text-align: left;
}

.builder-separator {
  height: 1px;
  margin: 20px 0;
  background: var(--line);
}

.voice-module-toggle {
  width: 100%;
  min-height: 68px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #101828;
  text-align: start;
}

.voice-module-toggle > span {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--surface-3);
}

.voice-module-toggle svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.voice-module-toggle div {
  display: grid;
  gap: 3px;
  flex: 1;
}

.voice-module-toggle small { color: var(--muted); }

.voice-module-toggle em {
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--line);
  position: relative;
}

.voice-module-toggle em::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface);
}

.voice-module-toggle.active em { background: var(--brand); }
.voice-module-toggle.active em::after { left: 19px; }
html[dir="rtl"] .voice-module-toggle em::after { left: auto; right: 3px; }
html[dir="rtl"] .voice-module-toggle.active em::after { right: 19px; }

.builder-message-preview {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 18px;
  display: grid;
  gap: 12px;
}

.builder-message-preview div {
  width: fit-content;
  max-width: 100%;
  border-radius: 16px;
  padding: 11px 14px;
  background: #f5f0eb;
}

.builder-message-preview .muted {
  color: var(--muted);
  font-style: italic;
}

.json-map-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.schema-map-list { display: grid; gap: 10px; }

.schema-map-list > div {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: 14px;
}

.schema-map-list > div > strong { color: #0B1220; }
.schema-map-list > div > span { color: var(--muted); font-size: 13px; }

.schema-map-list em {
  padding: 5px 11px;
  border-radius: 999px;
  background: #dff5e9;
  color: #247348;
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
}

.schema-map-list label {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-weight: 500;
}

.response-structure-editor {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.response-structure-editor span {
  color: var(--muted);
  font-weight: 500;
}

.response-structure-editor textarea {
  min-height: 160px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.admin-draft-test-card {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 22px 28px;
}

.admin-draft-test-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.admin-draft-test-head h3 {
  margin: 0 0 5px;
  font-size: 16px;
  font-weight: 900;
}

.admin-draft-test-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
}

.admin-draft-test-head > span {
  white-space: nowrap;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  padding: 6px 11px;
  font-size: 11px;
  font-weight: 900;
}

.admin-test-chat-log {
  min-height: 170px;
  max-height: 310px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-3);
}

.admin-test-empty {
  color: var(--muted);
  font-size: 13px;
}

.admin-test-bubble {
  max-width: 76%;
  border-radius: 14px;
  padding: 11px 13px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.admin-test-bubble.user {
  align-self: flex-end;
  background: var(--brand);
  border-color: var(--brand-fg);
  color: #fff;
}

.admin-test-bubble.error {
  border-color: rgba(var(--brand-rgb), .25);
  color: var(--brand-fg);
}

.admin-test-bubble p {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.55;
}

.admin-test-bubble small {
  display: block;
  margin-top: 6px;
  color: inherit;
  opacity: .65;
  font-size: 10.5px;
}

.admin-test-bubble audio {
  width: 100%;
  margin-top: 8px;
}

.admin-test-bubble.typing {
  width: 76px;
  display: flex;
  gap: 5px;
}

.admin-test-bubble.typing span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--brand);
  animation: typingBounce 1s infinite ease-in-out;
}

.admin-test-bubble.typing span:nth-child(2) { animation-delay: .14s; }
.admin-test-bubble.typing span:nth-child(3) { animation-delay: .28s; }

.admin-test-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px 42px auto;
  gap: 9px;
  align-items: center;
  margin-top: 12px;
}

.admin-test-composer input[name="message"] {
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 14px;
  background: var(--surface);
}

.admin-test-recording {
  margin-top: 12px;
  border: 1px solid rgba(var(--brand-rgb), .2);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #EDF6FB;
}

.access-filter-bar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.access-filter-bar label {
  display: grid;
  gap: 6px;
  font-weight: 900;
  font-size: 12px;
  color: var(--text);
}

.access-filter-bar input {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 12px;
  background: var(--surface);
}

.access-empty-cell {
  color: var(--muted);
  font-size: 12px;
}

.user-access-step { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.builder-user-list {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  min-height: 58px;
  background: var(--surface);
}

.builder-user-list button {
  width: 100%;
  min-height: 39px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #0B1220;
  font-weight: 850;
}

.builder-user-list button:last-child { border-bottom: 0; }
.builder-user-list span { color: var(--brand-fg); font-size: 18px; }
.assigned-box { min-height: 60px; }

.export-footer {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.export-footer .btn {
  min-width: 86px;
  border-radius: 9px;
  box-shadow: none;
}

.export-footer .btn.primary { background: var(--text); }

html[dir="rtl"] .admin-export-head,
html[dir="rtl"] .builder-export-top,
html[dir="rtl"] .json-map-head,
html[dir="rtl"] .export-footer {
  flex-direction: row-reverse;
}

html[dir="rtl"] .agent-admin-table th,
html[dir="rtl"] .agent-admin-table td {
  text-align: right;
}

@media (max-width: 1050px) {
  .agent-login-shell {
    width: min(860px, calc(100vw - 44px));
    grid-template-columns: 1fr;
  }
  .agent-login-brand {
    min-height: 360px;
  }
  .agent-login-brand h1 {
    margin-top: 42px;
  }
  .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-shell { grid-template-columns: 1fr; }
  .admin-side { position: sticky; top: 0; z-index: 20; }
  .admin-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .admin-grid { grid-template-columns: 1fr; }
  .hub-main { padding: 28px; }
  .builder-two-col, .dashboard-columns { grid-template-columns: minmax(0, 1fr); }
  .hub-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-stats.admin-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agent-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .approval-card { grid-template-columns: 1fr; align-items: stretch; }
}

@media (max-width: 900px) {
  .auth-page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero"
      "login";
    padding: 28px;
  }
  .auth-hero { max-width: none; }
  .auth-cards {
    grid-template-columns: 1fr;
    max-width: none;
  }
  .home-topline { max-width: none; }
  .hub-shell { flex-direction: column; }
  .mobile-sidebar-toggle {
    display: flex;
  }
  .hub-sidebar,
  .hub-sidebar.collapsed {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(280px, 82vw) !important;
    flex-basis: auto !important;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    padding: 64px 16px 16px !important;
    z-index: 95;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .18);
  }
  html[dir="rtl"] .hub-sidebar,
  html[dir="rtl"] .hub-sidebar.collapsed {
    left: auto;
    right: 0;
    transform: translateX(100%);
  }
  .hub-sidebar:not(.collapsed),
  html[dir="rtl"] .hub-sidebar:not(.collapsed) {
    transform: translateX(0);
  }
  .user-chat-shell.sidebar-open .hub-sidebar,
  .user-chat-shell.sidebar-open .hub-sidebar.collapsed {
    transform: translateX(0);
  }
  .user-chat-shell.sidebar-open .hub-sidebar.collapsed .hub-sidebar-nav {
    display: flex;
  }
  .user-chat-shell.sidebar-open .hub-sidebar.collapsed .hub-sidebar-footer {
    display: grid;
  }
  .user-chat-shell.sidebar-open .hub-sidebar.collapsed .hub-sidebar-brand img {
    display: block;
  }
  .user-chat-shell.sidebar-open .hub-sidebar.collapsed .hub-nav-label {
    display: inline;
  }
  .user-chat-shell.sidebar-open .hub-sidebar.collapsed .hub-user-mini div {
    display: block;
  }
  .user-chat-shell.sidebar-open .hub-sidebar.collapsed .hub-sidebar-footer .btn {
    display: inline-flex;
  }
  .hub-sidebar-nav {
    display: flex;
    flex-direction: column;
  }
  .hub-shell:has(.hub-sidebar:not(.collapsed)) .mobile-sidebar-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 90;
    border: 0;
    background: rgba(15, 23, 42, .22);
  }
  .hub-floating-actions { top: auto; bottom: 86px; right: 12px; }
}

@media (max-width: 760px) {
  :root { --content: calc(100vw - 18px); }
  .agent-auth-page {
    padding: 18px;
    align-items: flex-start;
  }
  .agent-login-shell {
    width: 100%;
    min-height: 0;
    border-radius: 18px;
  }
  .agent-login-brand,
  .agent-login-panel {
    padding: 28px;
  }
  .agent-login-brand img {
    width: 170px;
  }
  .agent-login-brand h1 {
    margin-top: 34px;
    font-size: 30px;
  }
  .agent-login-brand ul {
    margin-top: 42px;
  }
  .auth-page {
    padding: 18px;
    gap: 24px;
  }
  .auth-hero { gap: 20px; }
  .auth-hero h1 { font-size: 34px; }
  .auth-hero p { font-size: 15px; }
  .home-topline { gap: 10px; }
  .logo-row { gap: 9px; }
  .login-card { padding: 24px; }
  .naseej-icon {
    width: 48px;
    height: 48px;
  }
  .naseej-icon.small {
    width: 38px;
    height: 38px;
  }
  .topbar-inner { min-height: 66px; }
  .brand-subtitle, .user-chip span, .desktop-only { display: none; }
  .main { padding-top: 12px; }
  .chat-page, .panel-page { border-radius: 22px; min-height: calc(100vh - 162px); min-height: calc(100dvh - 162px); }
  .chat-page { height: calc(100vh - 162px); height: calc(100dvh - 162px); }
  .chat-head, .page-panel-head { padding: 15px; }
  .chat-head { align-items: flex-start; }
  .chat-head-actions { justify-content: flex-start; }
  .message { max-width: 92%; }
  .cards-grid { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .composer-row { gap: 7px; }
  .composer-row input[type="text"] { padding: 12px; }
  .media-btn { width: 40px; height: 40px; }
  .voice-panel { flex-wrap: wrap; gap: 10px; }
  .btn { padding: 11px 13px; }
  .admin-main { padding: 14px; }
  .hub-main { padding: 18px; }
  .hub-nav-item { justify-content: flex-start; }
  .hub-stats.admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-hub-page-head {
    align-items: stretch;
    flex-direction: column;
  }
  .module-toggle-grid { grid-template-columns: 1fr; }
  .prompt-add-row { flex-direction: column; }
  .mobile-only { display: block; }
  .form-grid { grid-template-columns: 1fr; }
  .admin-nav { grid-template-columns: 1fr 1fr; }
  .hub-hero {
    align-items: stretch;
    flex-direction: column;
    padding: 20px;
  }
  .hub-stats,
  .agent-tile-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .agent-tile p { min-height: auto; }
  .section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .bottom-nav-inner {
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    gap: 3px;
  }

  .nav-item {
    min-width: 0;
    border-radius: 12px;
    padding: 7px 2px;
    gap: 3px;
    font-size: 10px;
    line-height: 1.1;
  }

  .nav-item .icon {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
  }

  .nav-item .icon svg,
  .bottom-nav .nav-item svg {
    width: 22px;
    height: 22px;
    stroke-width: 2;
  }
}

/* Agent Hub standalone export fidelity layer */
html,
body {
  background: var(--bg);
  color: var(--text);
}

body,
button,
input,
textarea,
select {
  font-family: var(--font-body);
}

h1, h2, h3,
.hub-page h2, .hub-page h3,
.admin-card h3,
.hub-stats strong {
  font-family: var(--font-heading);
  font-weight: 800;
}

.hub-shell,
.hub-main,
.hub-page,
.admin-main,
.agent-workspace,
.agent-workspace-content {
  background: var(--bg);
}

.hub-sidebar {
  width: 232px;
  flex-basis: 232px;
  padding: 22px 16px;
  gap: 28px;
  background: var(--surface-3);
  border-color: var(--line);
}

.hub-sidebar.collapsed {
  width: 68px;
  flex-basis: 68px;
}

.hub-sidebar-brand img {
  height: 22px;
  max-width: 154px;
  margin: 0;
}

.sidebar-toggle {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--surface-3);
  color: var(--muted);
}

.hub-sidebar-nav {
  gap: 6px;
}

.hub-nav-item {
  min-height: 40px;
  padding: 10px 12px;
  gap: 11px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 800;
}

.hub-nav-item.active {
  background: var(--brand-soft);
  border-color: var(--brand-soft);
  color: var(--brand-fg);
}

.admin-hub-shell .hub-nav-item.active {
  border-color: #0B1220;
}

.hub-nav-icon {
  width: 18px;
  height: 18px;
}

.hub-sidebar-footer {
  border-color: var(--line);
}

.hub-user-mini {
  padding: 6px 0;
}

.hub-user-mini .avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand-fg);
}

.hub-sidebar-footer .btn {
  min-height: 36px;
  border-radius: 9px;
  box-shadow: none;
}

.hub-page {
  max-width: 1050px;
  padding: 36px 44px;
}

.agent-hub-page-head {
  margin-bottom: 34px;
}

.agent-hub-page-head h1 {
  font-size: 29px;
  line-height: 1.12;
  font-weight: 900;
}

.agent-hub-page-head p {
  color: var(--muted);
  font-size: 14px;
}

.link-btn {
  color: var(--brand-fg);
  font-weight: 900;
}

.section-head {
  margin: 0 0 14px;
}

.section-head h3,
.dashboard-columns h3 {
  font-size: 17px;
  line-height: 1.2;
  font-weight: 900;
}

.agent-tile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 322px));
  gap: 16px;
  align-items: stretch;
  margin-bottom: 34px;
}

.agent-tile-grid.large {
  grid-template-columns: repeat(3, minmax(260px, 1fr));
}

.agent-tile {
  min-height: 176px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: none;
}

.home-agent-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
}

.agent-avatar-mini {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 900;
}

.agent-tile-head {
  align-items: center;
  gap: 13px;
}

.agent-tile-head strong {
  color: #0B1220;
  font-size: 15px;
  line-height: 1.15;
  font-weight: 900;
}

.agent-tile-head span,
.home-agent-category {
  color: var(--muted);
  font-size: 12.5px;
}

.agent-tile p {
  min-height: 48px;
  margin: 16px 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.home-agent-card .btn,
.agent-tile .btn.secondary.block {
  height: 36px;
  min-height: 36px;
  border: 0;
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--brand-fg);
  font-weight: 900;
  box-shadow: none;
}

.dashboard-columns {
  grid-template-columns: minmax(430px, 1.35fr) minmax(320px, 1fr);
  gap: 20px;
  margin-top: 0;
}

.hub-list-card {
  border-color: var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: none;
}

.hub-list-row {
  min-height: 68px;
  padding: 14px 20px;
  border-color: var(--line);
  background: var(--surface);
}

.hub-list-row .agent-avatar-mini {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.notify-dot {
  width: 7px;
  height: 7px;
}

.admin-main {
  padding: 34px 40px;
  height: 100vh;
  height: 100dvh;
  overflow: auto;
}

.admin-export-page {
  max-width: 550px;
  margin: 0;
}

.admin-export-head {
  align-items: flex-start;
  margin-bottom: 22px;
}

.admin-export-head h2 {
  font-size: 26px;
  line-height: 1.08;
  font-weight: 900;
}

.admin-add-agent-btn {
  border-radius: 9px;
  border-color: var(--brand-fg) !important;
  background: var(--brand) !important;
  color: #fff !important;
  min-width: 128px;
  height: 38px;
  padding: 0 18px;
}

.agent-table-card {
  border-color: var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.agent-admin-table {
  table-layout: auto;
}

.agent-admin-table th {
  height: 50px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: .04em;
}

.agent-admin-table th,
.agent-admin-table td {
  padding: 15px 18px;
  border-color: var(--line);
}

.agent-admin-table .agent-avatar-mini {
  width: 32px;
  height: 32px;
}

.table-module-list span {
  background: var(--surface-3);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
}

.builder-export-page {
  max-width: 1138px;
  margin: 0;
}

.builder-export-top {
  margin-bottom: 14px;
}

.builder-export-top h2 {
  font-size: 26px;
  font-weight: 900;
}

.builder-back-icon {
  width: 35px;
  height: 35px;
  border-radius: 9px;
  background: var(--surface-3);
  color: var(--muted);
}

.wizard-export-steps {
  gap: 8px;
  padding-bottom: 7px;
}

.wizard-export-steps button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: #27303F;
  padding: 7px 15px 7px 11px;
  font-size: 12px;
  font-weight: 900;
}

.wizard-export-steps button.active {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
}

.wizard-progress {
  width: min(832px, 100%);
  height: 8px;
  margin-bottom: 26px;
  background: var(--line);
}

.wizard-progress span,
.export-footer .btn.primary {
  background: var(--text);
}

.builder-export-card {
  min-height: 374px;
  padding: 28px;
  border-color: var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.builder-basic-grid,
.builder-two-col {
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .8fr);
  gap: 28px;
}

.builder-export-card input,
.builder-export-card textarea,
.builder-export-card select,
.builder-search {
  border-color: #DBE3EC;
  border-radius: 9px;
  background: var(--surface);
}

.module-toggle-grid.export-modules button,
.voice-module-toggle,
.schema-map-list > div,
.builder-message-preview,
.builder-user-list {
  border-color: var(--line);
  border-radius: 11px;
  box-shadow: none;
}

.module-toggle-grid.export-modules button.active {
  background: var(--brand-soft);
  border-color: #EFC9C4;
}

.agent-workspace {
  grid-template-rows: 82px minmax(0, 1fr) auto auto;
  /* Same specificity as the base rule but declared later, so this is the one
     that actually applied — 100dvh tracks the URL bar but NOT the keyboard,
     which is the whole bug on iOS. --app-vh is the measured visible height. */
  height: var(--app-vh, 100dvh);
  max-height: var(--app-vh, 100dvh);
  background: var(--surface-3);
}

.agent-workspace.panel-mode {
  grid-template-rows: 82px minmax(0, 1fr) auto;
}

.agent-workspace-head {
  min-height: 82px;
  padding: 18px 28px;
  border-color: var(--line);
  background: var(--surface);
}

.agent-menu-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 3px 9px rgba(15, 23, 42, .08);
}

.agent-settings-btn {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.agent-workspace-title h2 {
  color: #0B1220;
  font-size: 16px;
  font-weight: 900;
}

.agent-workspace-title p {
  color: var(--muted);
  font-size: 13px;
}

.agent-workspace-stream {
  padding: 30px 28px;
  gap: 14px;
}

.agent-workspace-stream .message {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.7;
}

.agent-workspace-stream .message.agent {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -12px rgba(16, 24, 40, .14);
  border-radius: 18px;
  border-start-start-radius: 4px;
}

.agent-workspace-stream .message.user {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  border-radius: 18px;
  border-start-end-radius: 4px;
}

.agent-workspace-bottom {
  padding: 16px 28px 20px;
  border-color: var(--line);
  background: var(--surface);
}

.agent-workspace-bottom .quick-prompts {
  gap: 10px;
  margin-bottom: 14px;
}

.prompt-chip {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.agent-workspace-bottom .composer-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.send-btn {
  width: 107px;
  height: 48px;
  min-width: 107px;
  border-radius: 12px;
  border-color: var(--brand-fg) !important;
  background: var(--brand) !important;
  color: #fff !important;
  box-shadow: 0 14px 24px rgba(var(--brand-rgb), .2);
}

.send-btn svg {
  display: none;
}

.send-btn span {
  font-size: 13.5px;
  font-weight: 900;
}

.agent-workspace-bottom .composer-row input[type="text"] {
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 0 18px;
}

.agent-workspace-bottom .media-btn {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  border-color: var(--line);
  box-shadow: none;
}

/* Legacy sizing superseded below — kept as a no-op placeholder so this
   selector's cascade position doesn't accidentally start winning again
   if the later "unify" block is ever edited. See the unified rule
   further down for the single source of truth. */
.agent-workspace-nav {
  border-color: var(--line);
}

.agent-tab {
  max-width: none;
  min-width: 0;
  min-height: 58px;
  border-radius: 12px;
  color: var(--muted);
}

.agent-tab.active {
  background: var(--brand-soft);
  color: var(--brand-fg);
}

.chat-settings-popover {
  top: 88px;
  right: 28px;
  width: 270px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .12);
}

html[dir="rtl"] .chat-settings-popover {
  right: auto;
  left: 28px;
}

.notification-panel,
.theme-panel {
  top: 62px;
  right: 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .12);
}

html[dir="rtl"] .notification-panel,
html[dir="rtl"] .theme-panel {
  right: auto;
  left: 24px;
}

.admin-export-page {
  width: min(1120px, 100%);
  max-width: none;
}

.admin-export-head {
  max-width: 860px;
}

.agent-table-card {
  width: 100%;
  max-width: 1040px;
  overflow-x: auto;
}

.agent-admin-table {
  min-width: 940px;
  table-layout: fixed;
}

.agent-admin-table th:nth-child(1),
.agent-admin-table td:nth-child(1) {
  width: 230px;
}

.agent-admin-table th:nth-child(2),
.agent-admin-table td:nth-child(2) {
  width: 110px;
}

.agent-admin-table th:nth-child(3),
.agent-admin-table td:nth-child(3),
.agent-admin-table th:nth-child(4),
.agent-admin-table td:nth-child(4),
.agent-admin-table th:nth-child(6),
.agent-admin-table td:nth-child(6) {
  width: 92px;
}

.agent-admin-table th:nth-child(5),
.agent-admin-table td:nth-child(5) {
  width: 145px;
}

.agent-admin-table th:nth-child(7),
.agent-admin-table td:nth-child(7) {
  width: 180px;
}

.table-actions {
  flex-wrap: nowrap;
}

.table-actions .small-btn {
  white-space: nowrap;
}

@media (max-width: 1050px) {
  .hub-page,
  .admin-main {
    padding: 28px;
  }

  .agent-tile-grid,
  .agent-tile-grid.large,
  .dashboard-columns,
  .builder-basic-grid,
  .builder-two-col,
  .user-access-step {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-export-page,
  .builder-export-page {
    max-width: none;
  }
}

@media (max-width: 720px) {
  .hub-page,
  .admin-main {
    padding: 18px;
  }

  .agent-workspace {
    width: 100%;
    overflow: hidden;
  }

  .agent-workspace-head,
  .agent-workspace-stream,
  .agent-workspace-bottom {
    padding-left: 16px;
    padding-right: 16px;
  }

  .agent-workspace-head {
    gap: 10px;
  }

  .agent-workspace-stream {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .agent-workspace-stream .message {
    max-width: calc(100vw - 32px);
  }

  .agent-workspace-bottom .quick-prompts {
    flex-wrap: wrap;
    padding-bottom: 4px;
  }

  .prompt-chip {
    flex: 0 1 auto;
    max-width: 100%;
    white-space: normal;
  }

  .agent-workspace-bottom .composer-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .send-btn {
    width: 96px;
    min-width: 96px;
    padding: 0 12px;
  }

  .attach-toggle {
    display: grid;
  }

  .composer-media-actions {
    position: absolute;
    inset-inline-end: 0;
    bottom: 56px;
    z-index: 5;
    display: none;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .14);
  }

  .composer-media-actions.open {
    display: flex;
  }

  .agent-workspace-bottom .composer-media-actions .media-btn,
  .agent-workspace-bottom .attach-toggle {
    width: 42px;
    height: 42px;
  }

  .agent-tab {
    flex: 0 0 78px;
    max-width: none;
    min-width: 0;
    padding-left: 4px;
    padding-right: 4px;
  }

  .agent-tab span {
    font-size: 11px;
  }
}

/* Chat composer and message responsiveness overrides */
.agent-workspace {
  overflow-x: hidden;
  max-width: 100%;
}

/* An earlier pass widened bubbles to 1600px to kill "empty gutters on
   desktop". The complaint was real — a narrow column pinned hard left with a
   vast void beside it looks broken — but the cure produced ~200 characters a
   line, about three times a comfortable measure.
   The gutters were never caused by the reading column; they were caused by an
   UNCENTRED one. Centring the stream balances the space on both sides, so the
   conversation reads as a single thread and the bubbles can go back to a width
   the eye can actually track. */
.agent-workspace-stream {
  min-width: 0;
  width: 100%;
  max-width: var(--chat-measure, 690px);
  margin-inline: auto;
}

/* The thread sits on the app's warm ground rather than the white panel, so a
   white reply bubble reads as a card ON something. Left on the panel the two
   whites matched exactly and the bubble's only separation was its shadow —
   which is precisely the "flat, blends together" quality the admin console
   does not have. The ground is a token, so every theme keeps the contrast. */
#app .agent-workspace:has(.agent-workspace-stream) {
  background: var(--bg);
}

.agent-workspace-stream .message {
  max-width: 100%;
  min-width: 0;
  padding: 14px 18px;
  overflow: hidden;
}

.agent-workspace-stream .message.user {
  max-width: 88%;
}

.agent-workspace-stream .message-body,
.message-body {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: auto;
}

.message-audio {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.message-audio audio {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.message-audio span {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.chat-composer,
.composer-row,
.composer-row input[type="text"] {
  min-width: 0;
}

.composer-action-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: max-content;
}

.agent-workspace-bottom .composer-row {
  grid-template-columns: minmax(120px, 1fr) auto;
}

.send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.send-btn::before {
  content: none;
}

.send-btn svg {
  display: block;
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  flex: 0 0 auto;
}

.agent-workspace-bottom .media-btn.composer-action {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 1px solid;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 24px rgba(15, 23, 42, .08);
}

.agent-workspace-bottom .media-btn.composer-action svg {
  width: 23px;
  height: 23px;
  stroke-width: 2.5;
}

/* These two sat on fixed pale tints with near-black glyphs, so on the dark chat
   they read as two bright slabs — and the .active rule immediately below them
   already used var(--brand). Same soft-background/strong-foreground pairing the
   capability chips use, so they now follow the theme like everything around
   them. Contrast was never the problem here; belonging was. */
.agent-workspace-bottom .media-btn.composer-action.mic {
  background: var(--brand-soft);
  border-color: var(--brand-soft);
  color: var(--brand-fg);
}

.agent-workspace-bottom .media-btn.composer-action.upload {
  background: var(--success-soft);
  border-color: var(--success-soft);
  color: var(--success-strong);
}

.agent-workspace-bottom .media-btn.composer-action.active {
  background: var(--brand);
  border-color: var(--brand-fg);
  color: #fff;
}

@media (max-width: 720px) {
  .agent-workspace-stream {
    padding-left: 14px;
    padding-right: 14px;
  }

  .agent-workspace-stream .message,
  .agent-workspace-stream .message.user {
    max-width: calc(100vw - 28px);
    width: fit-content;
    box-sizing: border-box;
    padding: 14px 16px;
    font-size: 15px;
  }

  .agent-workspace-stream .message:has(.message-audio) {
    width: min(100%, 360px);
    max-width: calc(100vw - 28px);
  }

  .agent-workspace-bottom .composer-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .send-btn {
    width: 96px;
    min-width: 96px;
    height: 52px;
    padding: 0 12px;
  }

  .agent-workspace-bottom .composer-row input[type="text"] {
    min-width: 0;
    width: 100%;
    height: 52px;
    padding: 0 14px;
    font-size: 16px;
  }

  .composer-action-buttons {
    gap: 8px;
  }

  .agent-workspace-bottom .media-btn.composer-action {
    width: 52px;
    height: 52px;
  }
}

@media (max-width: 390px) {
  .agent-workspace-bottom {
    padding-left: 10px;
    padding-right: 10px;
  }

  .send-btn {
    width: 86px;
    min-width: 86px;
  }

  .send-btn span {
    font-size: 12px;
  }

  .agent-workspace-bottom .media-btn.composer-action {
    width: 46px;
    height: 46px;
  }

  .composer-action-buttons {
    gap: 6px;
  }
}

/* ============================================================
   Chat / Tasks / Calendar unified surface + composer refinements
   ============================================================ */

/* Natural start alignment for chat message text (no centering/justify).
   unicode-bidi:plaintext makes each bubble follow its own language —
   Arabic aligns right, English aligns left — never centered. */
.agent-workspace-stream .message,
.agent-workspace-stream .message-body {
  text-align: start;
  unicode-bidi: plaintext;
}

/* `unicode-bidi` is NOT inherited, so the <p>/<li>/<h*> blocks that
   renderMarkdown() produces did not get the rule above — they fell back to the
   UI language's direction. An English reply inside the Arabic UI therefore
   rendered right-to-left: leading colons, question marks at the wrong end, and
   bullets on the wrong side. Re-applying plaintext per block makes every
   paragraph follow ITS OWN text, so a message reads correctly whichever
   language it is in and whichever language the interface is set to. */
.agent-workspace-stream .message-body > *,
.agent-workspace-stream .message-body li,
.agent-workspace-stream .message-body blockquote {
  unicode-bidi: plaintext;
  text-align: start;
}

/* ---- rhythm inside a reply ------------------------------------------------
   The agent answers in a fixed shape: a one-line verdict, then labelled groups
   of bullets, then what it noticed. Rendered with no block spacing that shape
   collapses into an undifferentiated list — which is what made a good answer
   look cramped. These rules give the shape back its joints. */
.agent-workspace-stream .message-body > * + * {
  margin-top: .7em;
}

/* The opening sentence IS the answer. Everything after it is support. */
.agent-workspace-stream .message.agent .message-body > p:first-child {
  font-size: 1.04em;
  color: var(--text);
}

.agent-workspace-stream .message-body ul,
.agent-workspace-stream .message-body ol {
  padding-inline-start: 1.25em;
  margin-block: .5em;
  display: grid;
  gap: .38em;
}

.agent-workspace-stream .message-body li::marker {
  color: rgba(var(--brand-rgb), .55);
}

/* A label the agent wrote in bold ("Open opportunities", "قيمة متوقعة") is
   doing structural work, so it gets weight rather than a shout. */
.agent-workspace-stream .message-body strong {
  font-weight: 650;
  color: var(--text);
}

.agent-workspace-stream .message.user .message-body strong {
  color: inherit;
}

/* A heading the model emits should not out-shout the reply it sits in. */
.agent-workspace-stream .message-body h1,
.agent-workspace-stream .message-body h2,
.agent-workspace-stream .message-body h3,
.agent-workspace-stream .message-body h4 {
  font-size: 1em;
  font-weight: 650;
  letter-spacing: .01em;
  margin-block: .9em .35em;
  color: var(--text);
}

.agent-workspace-stream .message-body code {
  font-size: .92em;
  padding: .12em .38em;
  border-radius: 6px;
  background: var(--surface-3);
  font-variant-numeric: normal;
}

.agent-workspace-stream .message-body a {
  color: var(--brand);
  text-underline-offset: 3px;
}

.agent-workspace-stream .message.user .message-body a { color: #fff; }

/* An agent-offered action ("Connect my Microsoft account") is the one thing in
   a reply the reader is meant to ACT on, so it stops looking like prose and
   starts looking like a control. */
.agent-workspace-stream .message-body a[href="#connect-microsoft"],
.agent-workspace-stream .message-body a[href="#settings"] {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  margin-block: .15em;
  padding: .5em .9em;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 10px -4px rgba(var(--brand-rgb), .55);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.agent-workspace-stream .message-body a[href="#connect-microsoft"]:hover,
.agent-workspace-stream .message-body a[href="#settings"]:hover {
  filter: brightness(1.06);
  box-shadow: 0 4px 16px -5px rgba(var(--brand-rgb), .6);
}

.agent-workspace-stream .message-body a[href="#connect-microsoft"]:active,
.agent-workspace-stream .message-body a[href="#settings"]:active {
  transform: translateY(1px);
}

.agent-workspace-stream .message-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95em;
  margin-block: .6em;
}

.agent-workspace-stream .message-body th,
.agent-workspace-stream .message-body td {
  text-align: start;
  padding: .42em .6em;
  border-bottom: 1px solid var(--line);
}

.agent-workspace-stream .message-body th {
  font-weight: 650;
  color: var(--soft);
  font-size: .88em;
  letter-spacing: .02em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .agent-workspace-stream .message-body a[href="#connect-microsoft"],
  .agent-workspace-stream .message-body a[href="#settings"] { transition: none; }
}

/* Phones: the measure is the viewport, so spend the space on text rather than
   on padding, and let a bubble use nearly the full width. */
@media (max-width: 640px) {
  .agent-workspace-stream {
    padding: 18px 12px 24px;
    gap: 14px;
  }
  .agent-workspace-stream .message {
    max-width: 96%;
    font-size: 14.5px;
    padding: 12px 14px;
  }
}


/* Tasks & Calendar sit on the same cream surface as chat — drop the
   big white card wrapper so only the individual cards float on it */
.agent-workspace-content {
  background: var(--bg);
}

.agent-workspace-content .panel-page {
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
  min-height: auto;
}

.agent-workspace-content .page-panel-head {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 2px;
  margin-bottom: 10px;
}

.agent-workspace-content .info-banner {
  margin: 0 0 12px;
}

.agent-workspace-content .filter-chip-row {
  padding: 0 0 4px;
}

/* Composer: mic + attach icons live INSIDE the input box */
.agent-workspace-bottom .composer-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.composer-input-shell {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  min-height: 46px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  padding-inline-start: 14px;
  padding-inline-end: 6px;
  position: relative;
}

/* Scoped with .agent-workspace-bottom so this beats the older
   `.agent-workspace-bottom .composer-row input[type="text"]` rules
   that would otherwise give the inner field its own border/box.
   The field is an auto-growing textarea (JS caps it at ~6 lines);
   the shell stretches with it via min-height. */
.agent-workspace-bottom .composer-row .composer-input-shell textarea[name="message"] {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  padding: 13px 0;
  border-radius: 0;
  font-size: 13.5px;
  line-height: 1.45;
  font-family: inherit;
  color: var(--text);
  resize: none;
  max-height: 160px;
  overflow-y: auto;
}

.composer-inline-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  position: relative;
}

.composer-icon-btn {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--muted);
  cursor: pointer;
  flex: 0 0 auto;
}

.composer-icon-btn:hover {
  background: var(--surface-3);
  color: var(--text);
}

.composer-icon-btn svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.composer-icon-btn.mic.active {
  background: var(--brand);
  color: #fff;
}

.composer-media-menu {
  position: absolute;
  bottom: calc(100% + 10px);
  inset-inline-end: 0;
  min-width: 168px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 60;
}

.composer-media-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  text-align: start;
  cursor: pointer;
}

.composer-media-menu button:hover {
  background: var(--surface-3);
}

.composer-media-menu button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.composer-media-scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  border: 0;
  padding: 0;
  background: transparent;
}

@media (max-width: 720px) {
  .composer-input-shell {
    min-height: 52px;
  }
  .agent-workspace-bottom .composer-row .composer-input-shell textarea[name="message"] {
    font-size: 16px;
    padding-block: 14px;
  }
  .composer-icon-btn {
    width: 40px;
    height: 40px;
  }
}

/* ============================================================
   Unify the in-workspace tab bar with the main bottom navigation
   so chat / tasks / calendar look identical everywhere.
   The workspace nav now reuses .bottom-nav-inner + .nav-item and
   matches .bottom-nav's box model property-for-property (same
   background/blur, no self-imposed height/padding/display so the
   bar's size is driven purely by .bottom-nav-inner's content,
   exactly like the Home/My Agents nav).
   ============================================================ */
.agent-workspace-nav {
  display: block;
  gap: 0;
  padding: 0;
  min-height: 0;
  height: auto;
  overflow: visible;
  /* A literal white, on a bar whose labels are themed: in the dark theme this
     painted a solid white strip across the bottom of a dark app and the tab
     labels measured 2.68:1 on it. --surface carries the same translucency
     intent through the theme instead. */
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
  border-color: var(--line);
  grid-template-columns: none;
}

.agent-workspace-nav .bottom-nav-inner {
  width: min(520px, 100%);
  padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
  gap: 6px;
}

.agent-workspace-nav .nav-item,
.chat-mobile-nav .nav-item {
  padding: 6px 4px;
  gap: 2px;
  border-radius: 12px;
  font-size: 10px;
  line-height: 1.05;
}

.agent-workspace-nav .nav-item .icon,
.chat-mobile-nav .nav-item .icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
}

.agent-workspace-nav .nav-item .icon svg,
.chat-mobile-nav .nav-item .icon svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.hub-sidebar-agents {
  display: grid;
  gap: 10px;
  overflow: auto;
  min-height: 0;
}

.hub-sidebar-section-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--muted);
  text-transform: uppercase;
  padding: 0 4px;
}

.hub-sidebar-agent-panel {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .72);
}

.hub-sidebar-agent {
  min-height: 46px;
  border: 0;
  background: transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px;
  text-align: start;
  font-weight: 900;
}

.hub-sidebar-agent span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hub-sidebar-agent-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.hub-sidebar-agent-tab {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-3);
  color: var(--muted);
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 5px 3px;
  font-size: 10px;
  font-weight: 900;
}

.hub-sidebar-agent-tab span {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
}

.hub-sidebar-agent-tab svg {
  width: 15px;
  height: 15px;
}

.hub-sidebar-agent-tab em {
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.hub-sidebar-agent-tab.active,
.hub-sidebar-agent-tab:hover,
.hub-sidebar-agent-tab:focus-visible {
  background: var(--brand-soft);
  color: var(--brand-fg);
  border-color: var(--brand-soft);
}

.default-icon-picker {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.default-icon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.default-agent-icon {
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  display: grid;
  place-items: center;
  padding: 6px;
}

.default-agent-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.default-agent-icon.active,
.default-agent-icon:hover,
.default-agent-icon:focus-visible {
  border-color: var(--brand-fg);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12);
}

/* ============================================================
   Agent Builder — Step 3 message templates + LLM assist,
   plus overall wizard UX polish.
   ============================================================ */

/* Assist bar (Draft with assistant) */
.assist-bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
}

.assist-bar-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.assist-bar-text strong {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 14px;
}

.assist-bar-text span {
  color: var(--muted);
  font-size: 12.5px;
}

.assist-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.assist-note {
  grid-column: 1 / -1;
  padding: 9px 13px;
  border-radius: 10px;
  background: var(--success-soft, #E3F3EA);
  color: var(--success-strong, var(--success-strong));
  font-size: 12.5px;
  font-weight: 700;
}

.message-field label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.message-field label span {
  color: var(--soft);
  font-weight: 600;
  font-size: 11.5px;
}

.assist-field-btn {
  margin-inline-start: auto;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.assist-field-btn:hover { background: var(--surface-3); }
.assist-field-btn:disabled { opacity: .5; cursor: not-allowed; }

.builder-messages-step textarea { min-height: 68px; }

.builder-assistant-field .field-hint {
  display: block;
  font-weight: 500;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}

/* --- Wizard step-pill nav: clearer active/complete states --- */
.wizard-export-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wizard-export-steps button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.wizard-export-steps button span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.wizard-export-steps button.active {
  border-color: var(--brand-fg);
  background: var(--brand-soft);
  color: var(--brand-fg);
}

.wizard-export-steps button.active span {
  background: var(--brand);
  color: #fff;
}

.wizard-export-steps button.done span {
  background: var(--success-strong, var(--success-strong));
  color: #fff;
}

/* --- Wizard card + field rhythm --- */
.builder-export-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  padding: 22px;
}

.builder-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.builder-basic-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.builder-message-preview {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
}

.builder-message-preview > div {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-3);
  font-size: 13px;
  line-height: 1.5;
}

.builder-message-preview .muted {
  color: var(--muted);
  font-style: italic;
}

@media (max-width: 900px) {
  .builder-two-col,
  .builder-basic-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Language selector (shared: sidebar, auth, settings) ---------------- */
.language-selector {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.language-selector.sidebar-language,
.language-selector.settings-language {
  display: flex;
  width: 100%;
}
.language-selector .lang-option {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--duration-fast, 150ms) ease, color var(--duration-fast, 150ms) ease;
  white-space: nowrap;
}
.language-selector .lang-option:hover {
  color: var(--text);
}
.language-selector .lang-option.active {
  background: var(--surface);
  color: var(--brand-fg);
  box-shadow: var(--shadow-sm);
}
.agent-login-langbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 4px;
}
.auth-hero-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.theme-language-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.theme-language-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ---- Bilingual template / message fields -------------------------------- */
.template-lang-grid,
.message-lang-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
.template-lang {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.template-lang-tag {
  font-size: .74rem;
  font-weight: 700;
  color: var(--muted);
}
.builder-arabic-toggle {
  margin: 4px 0 8px;
}

/* A reply still being streamed: a soft caret marks the live write point. */
.message-body.streaming::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-inline-start: 3px;
  vertical-align: text-bottom;
  background: currentColor;
  opacity: .65;
  animation: stream-caret 1s steps(2, start) infinite;
}

@keyframes stream-caret {
  0%, 49% { opacity: .65; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .message-body.streaming::after { animation: none; opacity: .5; }
  /* Stop every infinite looping animation for users who ask for reduced motion —
     these were previously uncovered and kept animating: the typing dots, the
     voice-input waveform, the pulsing mic and speaker, and any spinner. */
  .typing-dots span,
  .voice-wave span,
  .media-btn.mic.active,
  .speak-btn.preparing,
  .module-spin,
  [class*="spin"] { animation: none !important; }
}

/* Composer keyboard focus: highlight the INPUT SHELL, not the whole row — the
   old row-level ring drew a stray blue box around the send button and mic too,
   which read as a rendering glitch rather than a focus indicator. The shell
   has its own border, so tinting it (plus a soft halo) is a clear, calm
   indicator; the inner field needs no second outline of its own. */
.composer-input-shell:focus-within {
  border-color: var(--brand-fg);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12);
}
/* Composers that are still a bare input (admin test console) keep a ring. */
.composer-row input[type="text"]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

/* Section header introducing the progressive waiting-status stage fields. */
.template-stage-group {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.template-stage-group h4 {
  margin: 0 0 4px;
  font-size: .95rem;
}

@media (max-width: 700px) {
  .template-lang-grid,
  .message-lang-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Scheduled agents, runs, reports (Feature 2) ----------------------- */
.table-scroll { overflow-x: auto; }
.run-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  text-transform: capitalize;
  background: var(--surface-3);
  color: var(--muted);
}
.run-status.run-completed { background: var(--success-soft); color: var(--success-strong); }
.run-status.run-running { background: var(--warning-soft); color: var(--warning-strong); }
.run-status.run-pending { background: var(--surface-3); color: var(--muted); }
.run-status.run-failed,
.run-status.run-timed_out { background: var(--danger-soft); color: var(--brand-fg); }
.run-status.run-cancelled { background: var(--surface-3); color: var(--soft); }
.run-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.schedule-editor,
.run-detail { margin-top: 16px; }
.schedule-user-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.schedule-user-list label { font-size: .85rem; display: flex; gap: 6px; align-items: center; }
.run-detail-grid { display: flex; flex-direction: column; gap: 14px; }
.run-detail-grid pre {
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  padding: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: .82rem;
  margin: 6px 0 0;
}
.run-detail-grid .run-error { background: var(--danger-soft); }
.run-detail-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: .82rem; color: var(--muted); }
.reports-list { display: flex; flex-direction: column; gap: 14px; }
.report-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  background: var(--surface-2);
}
.report-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.report-head span { font-size: .8rem; color: var(--muted); }
.report-instruction { font-size: .88rem; color: var(--muted); margin: 6px 0; }
.report-body {
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  padding: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: .82rem;
  max-height: 260px;
  overflow-y: auto;
}

/* ---- Admin "My Agents" cards (Feature 3) ------------------------------- */
.admin-agent-tile { display: flex; flex-direction: column; gap: 10px; }
.admin-agent-headtext { min-width: 0; }
.admin-agent-headtext strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-agent-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.agent-type-chip,
.schedule-chip,
.module-chip {
  font-size: .72rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 8px;
  background: var(--surface-3);
  color: var(--muted);
}
.schedule-chip.schedule-scheduled { background: var(--success-soft); color: var(--success-strong); }
.schedule-chip.schedule-running { background: var(--warning-soft); color: var(--warning-strong); }
.schedule-chip.schedule-failed { background: var(--danger-soft); color: var(--brand-fg); }
.module-chip-row { display: flex; flex-wrap: wrap; gap: 5px; }
.module-chip { background: var(--brand-soft); color: var(--brand-fg); }
.admin-agent-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: .78rem; color: var(--muted); }
.admin-agent-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.status-pill.status-active { background: var(--success-soft); color: var(--success-strong); }
.status-pill.status-draft { background: var(--surface-3); color: var(--muted); }
.status-pill.status-disabled,
.status-pill.status-archived,
.status-pill.status-error { background: var(--danger-soft); color: var(--brand-fg); }
.status-pill.status-maintenance { background: var(--warning-soft); color: var(--warning-strong); }

/* ---- Module refresh status + scheduled system message ------------------ */
.module-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  margin-bottom: 12px;
}
.module-status.loading { background: var(--surface-3); color: var(--muted); }
.module-status.error { background: var(--danger-soft); color: #B42318; }
/* A source the agent could not reach. Deliberately WARNING, not error: nothing
   failed on the hub's side and the tab may still hold usable cards — the point
   is that what is shown may be incomplete, which is a different claim from
   "this broke". Both tokens are theme-aware, so this reads correctly in all
   four themes rather than pinning a light-theme hex the way .error still does. */
.module-status.warn { background: var(--warning-soft); color: var(--warning-strong); }
.module-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--faint);
  border-top-color: var(--brand-fg);
  border-radius: 50%;
  animation: module-spin .7s linear infinite;
}
@keyframes module-spin { to { transform: rotate(360deg); } }
.message.system-message {
  align-self: center;
  max-width: 90%;
  text-align: center;
  background: var(--surface-3);
  color: var(--muted);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-size: .84rem;
}
.system-message-tag {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--brand-fg);
  margin-bottom: 2px;
}

/* ---- Message action menu (rendered BELOW the bubble, never overlapping) - */
/* Each message is wrapped in .message-row (flex column). The bubble sits on
   top; the action row is a normal-flow sibling below it, aligned to the bubble
   edge. Nothing is absolutely positioned over the message text.

   The ROW spans the stream and only ALIGNS its bubble; the cap lives on the
   bubble. Previously the row carried both `align-self: flex-start|flex-end` and
   its own max-width, which shrink-to-fit it: the row's max-width then never
   bound, and the bubble's percentage max-width resolved against a box whose
   width was decided by the text inside it — a circular constraint. The result
   was "Are there any open opportunities?" wrapping at 227px inside a 1208px
   stream. Aligning via align-items on a full-width row removes the circularity,
   so the bubble's cap resolves against real available space. */
.message-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-items: flex-start;
}
/* Sides follow the UI DIRECTION, not each message's language: your own words on
   the inline-end side, the agent's on inline-start. flex-start/flex-end are
   direction-relative, so an Arabic interface mirrors both without a second rule
   — user on the left, agent on the right — while `unicode-bidi: plaintext` on
   the body keeps each bubble's TEXT running in its own language's direction.
   Anchoring a bubble's side to its own text instead would make the thread jump
   between margins in a bilingual conversation, which is how people here write. */
.agent-workspace-stream > .message-row { max-width: 100%; align-self: stretch; }
.agent-workspace-stream > .message-row.agent { align-self: stretch; align-items: flex-start; }
.agent-workspace-stream > .message-row.user { align-self: stretch; align-items: flex-end; }
/* Two true complaints pulled in opposite directions here. A 620px bubble left
   "wide empty gutters beside messages", so the cap was raised to 1600–1800px —
   which produced ~200 characters a line, roughly three times what the eye can
   track back.
   Both are symptoms of the same mistake: capping the BUBBLE inside an
   uncapped stream. Then a narrow bubble floats in a wide void, and a wide one
   is unreadable. Capping the COLUMN instead and letting the reply fill it
   gives a readable measure with no gutter at all — the whitespace moves
   outside the conversation, symmetrical, where it reads as page margin rather
   than as a hole beside the text. */
.message-row > .message { max-width: 100%; }
/* The user's own line stays visibly shorter than the answer, so scanning back
   through a thread the eye can tell question from reply by shape alone. */
.message-row.user > .message { max-width: 88%; }

.message-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  padding: 2px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 2px 8px rgba(16, 24, 40, .05);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2px);
  transition: opacity var(--duration-fast, 150ms) ease, transform var(--duration-fast, 150ms) ease;
}
.message-row:hover .message-actions,
.message-row.actions-open .message-actions {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.msg-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: var(--soft);
  border-radius: 6px;
  padding: 4px 5px;
  cursor: pointer;
  font: inherit;
  font-size: .78rem;
  transition: background var(--duration-fast, 150ms) ease, color var(--duration-fast, 150ms) ease;
}
.msg-action-btn:hover { background: var(--brand-soft); color: var(--brand-fg); }
.msg-action-btn:active { color: var(--brand-2); }
.msg-ic { width: 14px; height: 14px; }
.msg-action-label { display: none; }
/* Mobile-only tap trigger (hidden on desktop, which uses hover). */
.msg-more-btn { display: none; }

@media (hover: none), (max-width: 760px) {
  .message-actions {
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    display: none;
  }
  .message-row.actions-open .message-actions { display: flex; }
  .msg-action-label { display: inline; }
  .msg-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    border-radius: 999px;
    padding: 0 12px;
    height: 24px;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
  }
}

/* ---- Toast ------------------------------------------------------------- */
#toast-container {
  position: fixed;
  inset-block-end: 24px;
  inset-inline: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 1200;
  pointer-events: none;
}
.app-toast {
  pointer-events: auto;
  background: var(--text);
  /* var(--bg), not #fff. The background is var(--text), which INVERTS with the
     theme — near-black in a light theme, near-white in a dark one. A hardcoded
     white foreground therefore measured 1.22:1 in the dark theme: every
     informational toast was white on near-white, i.e. invisible. Pairing it
     with var(--bg) keeps the inversion matched in both directions (measured
     ~15:1 either way), and the success/error variants below inherit it. */
  color: var(--bg);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  animation: toastIn .25s ease;
}
.app-toast.toast-success { background: var(--success-strong); }
/* --danger, not --brand. Every theme already defines a danger colour, and the
   Naseej one is deliberately sienna — "never confusable with brand" — precisely
   so a failure does not arrive wearing the product's own colour. The error
   toast was painted in the brand crimson anyway, which made an error, a
   branded surface and a success-adjacent state read alike. */
.app-toast.toast-error { background: var(--danger); }
/* Repeat count on a renewed toast: present so a second press visibly registers,
   quiet enough that it never competes with the message itself. */
.toast-repeat {
  margin-inline-start: 8px;
  opacity: .65;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.app-toast.leaving { opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Modal ------------------------------------------------------------- */
.modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, .45);
  z-index: 1100;
}
.app-modal {
  position: fixed;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px));
  /* 88vh measures the LARGE viewport, which ignores the keyboard — a dialog
     opened with the keyboard up was taller than the area it was centred in.
     --app-vh is the measured visible height (100dvh before JS runs). */
  max-height: min(calc(var(--app-vh, 100dvh) * .88), 760px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  z-index: 1101;
  overflow: hidden;
}
html[dir="rtl"] .app-modal { transform: translate(50%, -50%); }
.app-modal.wide { width: min(820px, calc(100vw - 32px)); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; }
.modal-body { padding: 18px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--line); }
.modal-two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.modal-meta { font-size: .82rem; color: var(--muted); }
.muted-textarea { background: var(--surface-3); color: var(--muted); min-height: 54px; }
.report-msg-block { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--surface-2); }
.report-msg-block.related { border-inline-start: 3px solid var(--brand); }
.report-msg-block p { margin: 4px 0 0; }
.report-msg-tag { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }

/* ---- Admin: message reports + history ---------------------------------- */
.report-preview { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.report-detail-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: .82rem; color: var(--muted); }
.report-detail-actions { justify-content: flex-start; }
.report-context summary { cursor: pointer; font-size: .85rem; color: var(--muted); }
.report-thread { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-height: 240px; overflow-y: auto; }
.report-thread-msg { padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-3); font-size: .84rem; }
.report-thread-msg.user { background: var(--brand-soft); }
.report-thread-msg span { font-size: .68rem; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.report-thread-msg p { margin: 3px 0 0; }
.history-layout { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 18px; }
.history-users { display: flex; flex-direction: column; gap: 10px; }
.history-user-list { display: flex; flex-direction: column; gap: 4px; max-height: 460px; overflow-y: auto; }
.history-user {
  text-align: start;
  border: 1px solid transparent;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.history-user strong { font-size: .88rem; }
.history-user span { font-size: .76rem; color: var(--muted); }
.history-user.active { border-color: var(--brand-fg); background: var(--brand-soft); }
.report-count {
  display: inline-block;
  min-width: 20px;
  text-align: center;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--danger-soft);
  color: var(--brand-fg);
  font-weight: 700;
  font-size: .76rem;
}
.conversation-thread { display: flex; flex-direction: column; gap: 10px; }
.conv-msg { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--surface-2); }
.conv-msg.user { background: var(--brand-soft); border-color: transparent; }
.conv-msg.reported { border-color: var(--brand-fg); box-shadow: 0 0 0 1px var(--brand) inset; }
.conv-msg-head { display: flex; align-items: center; gap: 8px; font-size: .72rem; color: var(--muted); }
.conv-msg-head span { font-weight: 700; text-transform: uppercase; }
.conv-msg-head em { font-style: normal; }
.conv-msg-src { font-size: .7rem; color: var(--soft); }
.reported-marker { background: var(--brand); color: #fff; padding: 1px 7px; border-radius: 999px; font-size: .66rem; font-weight: 700; }
.conv-msg p { margin: 4px 0 0; }

@media (max-width: 760px) {
  .history-layout { grid-template-columns: minmax(0, 1fr); }
  .modal-two-col { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Agent icon upload (Agent Builder, Step 1) ------------------------- */
.icon-upload-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}
.icon-upload-preview {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-3, #EEF2F6);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--muted);
  font-weight: 700;
  font-size: 1.05rem;
}
.icon-upload-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.icon-upload-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.icon-upload-btn { position: relative; cursor: pointer; margin: 0; }
.small-btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.small-btn.ghost:hover { color: var(--brand-fg); border-color: var(--brand-fg); }
.icon-upload-actions .field-hint { flex-basis: 100%; margin: 0; }
.icon-url-input { font-size: .85rem; }

/* ---- Admin production workspace preview ------------------------------- */
.admin-workspace-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: calc(100vh - 140px);
}
.admin-workspace-shell > .agent-workspace {
  min-height: 680px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}
/* Admin "view as user" preview: the embedded workspace is height:100dvh, but
   here it's nested UNDER the admin header + return bar, so a full-viewport height
   pushes its composer far below the fold (the reported bug). Pin the admin
   surface to the viewport and let the preview fill only the space that remains,
   so the composer stays visible. Scoped with :has() so no other admin screen or
   the real user chat is affected. */
.admin-hub-shell:has(.admin-workspace-shell) {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
.admin-main:has(.admin-workspace-shell) {
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* The workspace has its own agent header/bar, so the big admin page header is
   redundant here and only steals vertical space from the composer. */
.admin-main:has(.admin-workspace-shell) .admin-header { display: none; }
.admin-main:has(.admin-workspace-shell) .admin-workspace-shell {
  flex: 1;
  min-height: 0;
  /* `flex: 1` sizes the MAIN axis, and this parent is a COLUMN — so the shell's
     width was left shrink-to-fit and it collapsed to whatever the workspace
     happened to need (436px on a 1876px display), centred by its auto margins
     with ~560px of dead space either side. That is the "large white space" in
     the preview. max-width + auto margins only centres-and-caps if the element
     first fills its line. */
  width: 100%;
}
.admin-main:has(.admin-workspace-shell) .admin-workspace-shell > .agent-workspace {
  height: auto;
  min-height: 0;
  flex: 1;
}
/* Slim the return/agent bar so the preview keeps as much room as possible for
   the chat + composer. */
.admin-main:has(.admin-workspace-shell) .admin-workspace-bar { flex: none; padding: 8px 12px; }
.admin-main:has(.admin-workspace-shell) .admin-workspace-bar small { display: none; }
.admin-workspace-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.admin-workspace-bar > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.admin-workspace-bar strong,
.admin-workspace-bar small { display: block; }
.admin-workspace-bar small { color: var(--muted); }

/* ---- Desktop workspace tabs (Chat / Tasks / Calendar) ------------------ */
/* Mobile keeps the full bottom nav; desktop uses this compact tab strip and
   hides the oversized bottom bar (the sidebar already has Home/My Agents/Logout). */
/* Segmented control. Hidden on mobile (the bottom nav covers navigation);
   revealed as an inline pill group on desktop via the media query below. */
.workspace-tabs {
  display: none;
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: calc(100% - 48px);
  margin: 14px 24px 2px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface-3, #EEF2F6);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
}
.workspace-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 8px 18px;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast, 150ms) ease, color var(--duration-fast, 150ms) ease,
    box-shadow var(--duration-fast, 150ms) ease;
}
.workspace-tab:hover { color: var(--text); background: rgba(15, 23, 42, .05); }
.workspace-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.workspace-tab.active {
  color: var(--brand-fg);
  background: var(--surface, #fff);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .1), 0 2px 6px rgba(15, 23, 42, .05);
}
.workspace-tab-ic { display: inline-flex; }
.workspace-tab-ic svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 901px) {
  .workspace-tabs { display: flex; }
  /* Reserve a dedicated auto row for the tab strip so it is not auto-placed
     into the flexible chat-stream / content row (which stretched it full-height). */
  .agent-workspace.has-tabs { grid-template-rows: 82px auto minmax(0, 1fr) auto; }
  .agent-workspace.has-tabs.panel-mode { grid-template-rows: 82px auto minmax(0, 1fr); }
  /* The full bottom nav is redundant on desktop — hide it there only. */
  .agent-workspace-nav { display: none !important; }
}

/* ============================================================
   User-side production polish: responsive navigation + touch targets
   ============================================================ */
.user-chat-shell .hub-sidebar {
  width: min(280px, 86vw) !important;
  flex-basis: min(280px, 86vw) !important;
}

.user-chat-shell.sidebar-open .hub-sidebar,
.user-chat-shell.sidebar-open .hub-sidebar.collapsed {
  display: flex;
  transform: translateX(0) !important;
}

.user-chat-shell.sidebar-open .hub-sidebar .hub-sidebar-nav,
.user-chat-shell.sidebar-open .hub-sidebar.collapsed .hub-sidebar-nav {
  display: flex;
}

.user-chat-shell.sidebar-open .hub-sidebar .hub-sidebar-footer,
.user-chat-shell.sidebar-open .hub-sidebar.collapsed .hub-sidebar-footer {
  display: grid;
}

.user-chat-shell.sidebar-open .hub-sidebar .hub-sidebar-brand img,
.user-chat-shell.sidebar-open .hub-sidebar.collapsed .hub-sidebar-brand img,
.user-chat-shell.sidebar-open .hub-sidebar .hub-nav-label,
.user-chat-shell.sidebar-open .hub-sidebar.collapsed .hub-nav-label,
.user-chat-shell.sidebar-open .hub-sidebar .hub-user-mini div,
.user-chat-shell.sidebar-open .hub-sidebar.collapsed .hub-user-mini div,
.user-chat-shell.sidebar-open .hub-sidebar .hub-sidebar-footer .btn,
.user-chat-shell.sidebar-open .hub-sidebar.collapsed .hub-sidebar-footer .btn {
  display: revert;
}

.mobile-sidebar-toggle,
.sidebar-toggle,
.agent-menu-btn,
.agent-settings-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
}

.link-btn {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 10px;
}

.link-btn:hover,
.link-btn:focus-visible {
  background: var(--brand-soft);
  outline: none;
}

.agent-workspace-title h2,
.agent-tile-head strong,
.hub-list-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-workspace-title h2,
.agent-tile-head strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.hub-list-row strong {
  white-space: nowrap;
}

.agent-workspace-bottom .quick-prompts {
  gap: 10px;
}

.prompt-chip {
  min-height: 42px;
  padding: 10px 14px;
  line-height: 1.25;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: start;
  white-space: normal;
}

.composer-input-shell {
  min-height: 52px;
}

.composer-icon-btn {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  border-radius: 11px;
}

.msg-action-btn {
  min-width: 42px;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 10px;
}

.message-actions {
  gap: 4px;
}

.agent-workspace-content {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

.agent-workspace-content .cards-grid {
  gap: 12px;
}

.agent-workspace-content .task-card,
.agent-workspace-content .meeting-card,
.agent-workspace-content .data-card {
  padding: 14px;
  border-radius: 14px;
}

@media (max-width: 760px) {
  .mobile-sidebar-toggle {
    top: 12px;
    left: 12px;
  }

  html[dir="rtl"] .mobile-sidebar-toggle {
    left: auto;
    right: 12px;
  }

  .hub-page {
    padding: 58px 18px 20px;
  }

  .agent-hub-page-head {
    gap: 8px;
    margin-bottom: 18px;
  }

  .agent-hub-page-head h1 {
    font-size: 23px;
    line-height: 1.08;
  }

  .agent-hub-page-head p {
    font-size: 13px;
    line-height: 1.35;
  }

  .section-head {
    margin-bottom: 10px;
  }

  .agent-tile-grid {
    gap: 12px;
    margin-bottom: 18px;
  }

  .agent-tile {
    min-height: 142px;
    padding: 16px;
  }

  .agent-tile p {
    min-height: auto;
    margin: 10px 0 12px;
    line-height: 1.38;
  }

  .home-agent-card .btn,
  .agent-tile .btn.secondary.block {
    min-height: 42px;
    height: 42px;
  }

  .agent-hub-page-head .link-btn {
    align-self: flex-start;
  }

  .dashboard-columns {
    gap: 16px;
    margin-top: 22px;
  }

  .hub-list-row {
    min-height: 64px;
  }

  .agent-workspace {
    /* The mobile breakpoint — the rule that was actually in force on a phone.
       100dvh follows the URL bar but not the keyboard, so the chat stayed a
       full screen tall behind it. */
    height: var(--app-vh, 100dvh);
    max-height: var(--app-vh, 100dvh);
    grid-template-rows: 72px minmax(0, 1fr) auto auto;
  }

  .agent-workspace.panel-mode {
    grid-template-rows: 72px minmax(0, 1fr) auto;
  }

  .agent-workspace-head {
    min-height: 72px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .agent-workspace-title h2 {
    font-size: 14px;
    line-height: 1.2;
  }

  .agent-workspace-title p {
    max-width: 100%;
  }

  .agent-workspace-stream {
    padding-bottom: 12px;
  }

  .agent-workspace-bottom {
    padding-top: 12px;
  }

  .agent-workspace-bottom .quick-prompts {
    padding-bottom: 6px;
  }

  .prompt-chip {
    min-height: 44px;
    max-width: 78vw;
    padding: 10px 14px;
  }

  .agent-workspace-bottom .composer-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .send-btn {
    min-width: 76px;
    width: auto;
    height: 52px;
    padding-inline: 14px;
  }

  .send-btn span {
    font-size: 13px;
  }

  .composer-icon-btn {
    width: 44px;
    height: 44px;
  }

  .agent-workspace-content {
    padding: 14px 14px calc(96px + env(safe-area-inset-bottom, 0px));
  }

  .agent-workspace-content .page-panel-head {
    margin-bottom: 8px;
  }

  .agent-workspace-content .cards-grid {
    gap: 10px;
  }
}

@media (max-width: 390px) {
  .agent-workspace-bottom .composer-row {
    gap: 6px;
  }

  .send-btn {
    min-width: 68px;
    padding-inline: 10px;
  }

  .composer-input-shell {
    padding-inline-start: 10px;
    padding-inline-end: 4px;
  }

  .composer-icon-btn {
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 1050px) {
  .hub-shell:not(.sidebar-open) > .hub-sidebar.collapsed {
    display: none;
  }

  .hub-shell > .hub-sidebar:not(.collapsed),
  .user-chat-shell.sidebar-open > .hub-sidebar,
  .user-chat-shell.sidebar-open > .hub-sidebar.collapsed {
    display: flex;
  }
}

/* ============================================================
   Global Tasks / Calendar aggregate dashboards
   ============================================================ */
.view-mode-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  margin: 16px 18px 4px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-3);
}

.view-mode-btn {
  min-height: 40px;
  border: 0;
  border-radius: 12px;
  padding: 9px 14px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
}

.view-mode-btn.active,
.view-mode-btn:hover,
.view-mode-btn:focus-visible {
  background: var(--surface);
  color: var(--brand-fg);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
}

.aggregate-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 18px 0;
}

.aggregate-summary-strip > div {
  min-width: 0;
  min-height: 72px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
}

.aggregate-summary-strip strong {
  color: var(--text);
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
}

.aggregate-summary-strip span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aggregate-section-list {
  display: grid;
  gap: 18px;
  padding: 18px;
}

.aggregate-group {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246, 248, 250,.74));
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.aggregate-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(246, 248, 250,.82);
}

.aggregate-agent-meta {
  display: grid;
  gap: 3px;
}

.aggregate-agent-meta strong {
  color: var(--text);
  font-weight: 950;
}

.aggregate-agent-meta span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.aggregate-cards {
  padding: 14px;
}

.aggregate-card {
  display: grid;
  gap: 10px;
}

.agent-chip {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.agent-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.aggregate-empty-state {
  margin: 18px;
  padding: 22px;
  border: 1px dashed #DBE3EC;
  border-radius: 20px;
  background: var(--surface-3);
  color: var(--muted);
  font-weight: 800;
}

.hub-sidebar .hub-nav-item {
  min-height: 46px;
}

.hub-sidebar.collapsed .hub-nav-item {
  justify-content: center;
}

.hub-sidebar.collapsed .hub-nav-label,
.hub-sidebar.collapsed .hub-nav-badge {
  display: none;
}

@media (max-width: 900px) {
  .aggregate-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 12px 12px 0;
  }

  .aggregate-summary-strip > div {
    min-height: 64px;
    padding: 10px 12px;
  }

  .aggregate-summary-strip strong {
    font-size: 20px;
  }

  .view-mode-segmented {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 12px 12px 0;
  }

  .view-mode-btn {
    padding: 8px 6px;
    font-size: 11px;
  }

  .aggregate-section-list {
    padding: 12px;
  }

  .aggregate-cards {
    padding: 12px;
  }
}


/* Aggregate control deck and group actions */
.aggregate-control-deck {
  display: grid;
  gap: 10px;
  margin: 12px 18px 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(246, 248, 250, .96);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .07);
  z-index: 20;
}

.aggregate-control-deck .aggregate-summary-strip,
.aggregate-control-deck .view-mode-segmented {
  margin: 0;
}

.aggregate-refresh-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--success-strong);
  flex: 0 0 auto;
}
.status-dot.refreshing { background: #B4790E; }
.status-dot.stale { background: #d92d20; }
.status-dot.loaded { background: var(--success-strong); }

.aggregate-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, auto) minmax(150px, auto) auto;
  gap: 10px;
  align-items: end;
}

.aggregate-search,
.aggregate-select {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.aggregate-search input,
.aggregate-select select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 12px;
  background: var(--surface);
  color: var(--text);
  font-weight: 750;
}

.aggregate-reset {
  min-height: 42px;
  white-space: nowrap;
}

.aggregate-group-head {
  align-items: flex-start;
}

.aggregate-group-side {
  display: grid;
  gap: 8px;
  justify-items: end;
  min-width: min(480px, 55%);
}

.aggregate-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.aggregate-group-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.aggregate-group-actions .small-btn {
  min-height: 40px;
  padding: 9px 11px;
  border-radius: 11px;
}

@media (max-width: 1050px) {
  .aggregate-toolbar {
    grid-template-columns: 1fr 1fr;
  }
  .aggregate-reset {
    grid-column: span 2;
  }
}

@media (max-width: 900px) {
  .aggregate-control-deck {
    position: fixed;
    top: calc(6px + env(safe-area-inset-top, 0px));
    left: 12px;
    right: 12px;
    margin: 0;
    padding: 10px;
    max-height: min(52vh, 420px);
    overflow: auto;
    transform: translateZ(0);
    z-index: 60;
  }

  .aggregate-panel .aggregate-section-list {
    margin-top: min(54vh, 440px);
  }

  .aggregate-toolbar {
    grid-template-columns: 1fr;
  }

  .aggregate-reset {
    grid-column: auto;
    min-height: 44px;
  }

  .aggregate-search input,
  .aggregate-select select,
  .view-mode-btn,
  .aggregate-group-actions .small-btn {
    min-height: 44px;
  }

  .aggregate-group-head {
    display: grid;
    grid-template-columns: 1fr;
  }

  .aggregate-group-side {
    min-width: 0;
    width: 100%;
    justify-items: start;
  }

  .aggregate-group-actions {
    width: 100%;
    justify-content: stretch;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aggregate-group-actions .small-btn {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .aggregate-control-deck {
    top: 6px;
    border-radius: 16px;
  }

  .aggregate-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aggregate-group-actions {
    grid-template-columns: 1fr;
  }
}

/* Chat design improvements: capabilities, unread, suggested actions, typing, voice */
.agent-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-inline-start: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
}

.unread-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 8px 0;
  color: var(--brand-fg);
  font-size: 12px;
  font-weight: 900;
}

.unread-divider::before,
.unread-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--brand-soft);
}

.unread-divider span {
  border: 1px solid var(--brand-soft);
  background: #EDF6FB;
  border-radius: 999px;
  padding: 5px 10px;
}

.chat-capability-note {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 10px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.suggested-action-card {
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid #EFD2CE;
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface) 100%);
  box-shadow: 0 10px 24px rgba(var(--brand-rgb),.08);
  display: grid;
  gap: 8px;
}

.suggested-action-kicker {
  color: var(--brand-fg);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.suggested-action-card strong {
  font-size: 13.5px;
  color: #101828;
}

.suggested-action-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.agent-workspace-stream .typing-message {
  min-width: min(280px, 90%);
  max-width: min(520px, 90%);
  width: fit-content;
  min-height: 52px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}

.typing-label {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.45;
  font-size: 12.5px;
}

.voice-message-bubble {
  display: grid;
  gap: 9px;
  min-width: min(300px, 72vw);
  max-width: 100%;
}

.voice-message-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Raw speech-to-text output, shown to admins only for quality checking. Styled
   as an inspector panel rather than as speech — dashed rule, muted, smaller —
   so it reads as instrumentation and is never mistaken for what the user said.
   Inherits the bubble's colour so it works inside the brand-filled user bubble
   and the surface-filled agent one alike. */
.stt-audit {
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px dashed currentColor;
  opacity: .72;
  font-size: .84em;
}

.stt-audit-tag {
  display: inline-block;
  margin-bottom: 3px;
  font-weight: 600;
  font-size: .92em;
  letter-spacing: .01em;
  text-transform: none;
}

.stt-audit p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.voice-message-icon {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(var(--brand-rgb),.12);
  color: var(--brand-fg);
}

.message.user .voice-message-icon {
  background: rgba(255,255,255,.18);
  color: #fff;
}

.voice-message-icon svg {
  width: 16px;
  height: 16px;
}

.voice-message-top strong {
  font-size: 13px;
}

.voice-message-top em,
.voice-status-pill {
  font-style: normal;
  font-size: 11px;
  font-weight: 850;
  opacity: .78;
}

.voice-status-pill {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42,.08);
}

.message.user .voice-status-pill {
  background: rgba(255,255,255,.18);
}

.voice-message-bubble audio {
  width: 100%;
  min-width: 220px;
  height: 38px;
}

.voice-message-bubble p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.45;
  font-size: 12.5px;
}

@media (max-width: 640px) {
  .agent-workspace-stream .typing-message {
    min-width: min(270px, 92%);
    max-width: 92%;
  }

  .voice-message-bubble {
    min-width: min(260px, 78vw);
  }

  .voice-message-bubble audio {
    min-width: 0;
  }

  .suggested-action-card .small-btn {
    min-height: 40px;
  }
}

/* ============================================================
   Mobile & chat production polish
   - Aggregate filter deck back in normal document flow on phones
     (the fixed deck covered the page title and error banners and
     pinned ~52vh of controls over the task/calendar lists).
   - Page content stays clear of the floating menu button.
   - Send button sits at the trailing edge and collapses to an
     icon-only button on phones.
   - Desktop chat keeps the app sidebar and gets a reading column.
   ============================================================ */

@media (max-width: 900px) {
  .aggregate-control-deck {
    position: static;
    max-height: none;
    overflow: visible;
    margin: 12px 18px 4px;
    transform: none;
  }

  .aggregate-panel .aggregate-section-list {
    margin-top: 0;
  }

  /* Clearance for the fixed hamburger button on every non-chat screen. */
  .hub-shell:not(.user-chat-shell) .hub-main {
    padding-top: calc(62px + env(safe-area-inset-top, 0px));
  }

  /* The desktop collapse control has no meaning inside the mobile drawer. */
  .hub-sidebar .sidebar-toggle {
    display: none;
  }

  /* Keep the composer and workspace nav above the home-indicator area. */
  .agent-workspace-bottom {
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .agent-workspace-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* Trailing-edge send: icon-only round button on phones. */
@media (max-width: 760px) {
  .send-btn {
    width: 52px;
    min-width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 16px;
  }

  .send-btn span {
    display: none;
  }
}

/* The send arrow points "forward": mirror it for RTL. */
html[dir="rtl"] .send-btn svg {
  transform: scaleX(-1);
}

/* Quieter message-actions trigger on touch: plain glyph until opened. */
@media (hover: none), (max-width: 760px) {
  .msg-more-btn {
    height: 26px;
    padding: 0 10px;
    font-size: .9rem;
    color: var(--muted);
    background: transparent;
    border-color: transparent;
    opacity: .55;
  }

  .message-row.actions-open .msg-more-btn {
    opacity: 1;
    background: var(--surface);
    border-color: var(--border);
  }
}

@media (min-width: 1051px) {
  /* Chat keeps the app sidebar on desktop — navigation never disappears. */
  .user-chat-shell .hub-sidebar {
    display: flex;
  }

  .user-chat-shell .hub-sidebar:not(.collapsed) {
    width: 232px !important;
    flex-basis: 232px !important;
  }

  .user-chat-shell .hub-sidebar.collapsed {
    width: 68px !important;
    flex-basis: 68px !important;
  }

  /* Drawer trigger is redundant when the sidebar is always visible. */
  .user-chat-shell .agent-menu-btn {
    display: none;
  }

  /* The thread stays a centred column on very wide displays, matching the
     composer below it — the two were drifting apart, with an edge-to-edge
     conversation sitting above a capped input. */
  .agent-workspace-stream {
    padding-inline: 24px;
  }

  /* The composer keeps a centered cap only on very wide displays — an
     edge-to-edge input on a 2000px screen is harder to use, not easier.
     Matched to the thread's own column so the input sits directly under the
     conversation it belongs to instead of overhanging it. */
  .agent-workspace-bottom {
    padding-inline: max(24px, calc((100% - var(--chat-measure, 690px)) / 2));
  }
}

/* Suggested prompts: one row, swipe/scroll horizontally at every width. */
/* Suggestions must be fully READABLE before they are clicked: the row wraps
   instead of hiding overflow behind an invisible horizontal scroll, and each
   chip shows its whole text on as many lines as it needs. (Clicking a chip
   only stages the text in the composer — the user presses Send.) */
.agent-workspace-bottom .quick-prompts {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 4px;
  /* The suggestion row and the conversation share one fixed-height grid, and
     this row is `auto` while the thread is `1fr` — so every extra line of chips
     is taken directly out of the thread. Measured on the live app: three long
     agent-written suggestions wrapped to three rows (150px) and squeezed the
     message stream to 199px of a 536px workspace, which is the "scrollbar in the
     middle of the page" in the bug report.

     Cap at two rows and scroll. Chips keep their full text (the earlier pass
     chose wrapping over an ellipsis deliberately, and that was right — a
     truncated suggestion cannot be judged before it is clicked); what changes is
     that a verbose agent can no longer starve the conversation. */
  max-height: 5.75rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.agent-workspace-bottom .prompt-chip {
  flex: 0 1 auto;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: start;
  max-width: 100%;
  line-height: 1.35;
  border-radius: 18px;
}

/* Inline agent imagery — charts, diagrams — rendered in the bubble instead of
   hidden behind a link. Sized so a wide chart is readable without pushing the
   text that explains it off the screen: a chart is evidence FOR a claim, and
   the claim has to stay visible next to it. */
.message-body .md-figure {
  margin: 12px 0 6px;
  padding: 0;
  display: block;
  max-width: 100%;
}

.message-body .md-image {
  display: block;
  max-width: 100%;
  /* Chart SVGs carry their own aspect ratio; capping the height stops a tall
     one from filling the whole thread. */
  max-height: 420px;
  width: auto;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  /* Charts are rendered on a white canvas upstream, so they need a light plate
     to sit on regardless of the surrounding theme. */
  background: #fff;
}

.message-body .md-figure figcaption {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}

/* Feature-request empty state (no Tasks/Calendar agent assigned). */
.module-request-state {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 36px 20px;
  text-align: center;
}

.module-request-state p {
  margin: 0;
  font-weight: 700;
}

.module-request-state small {
  color: var(--muted, var(--muted));
}

.module-request-state .btn {
  min-height: 44px;
}

/* ============================================================
   Naseej enterprise design theme (deep blue + cyan)
   Pill-shaped primary actions per the Naseej design tokens.
   ============================================================ */
.btn.primary,
.btn.secondary {
  border-radius: 999px;
}

.btn.secondary {
  border: 1px solid var(--brand);
  color: var(--brand-fg);
  background: transparent;
}

.btn.secondary:hover,
.btn.secondary:focus-visible {
  background: var(--brand-soft);
}

.send-btn {
  border-radius: 999px;
}

/* Subtle cyan accent for links and active highlights per the theme. */
.link-btn {
  color: var(--brand-fg);
}

/* Tasks / Calendar readability polish */
.aggregate-card .card-meta {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.aggregate-group {
  margin-bottom: 18px;
}

.aggregate-group-head {
  align-items: center;
  gap: 10px;
}

.aggregate-group-actions .small-btn {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .aggregate-group-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aggregate-group-actions .small-btn {
    min-height: 42px;
    white-space: normal;
  }
}

/* Proactive Action Center on the user home screen */
.proposal-deck {
  display: grid;
  gap: 12px;
  margin-bottom: 22px;
}

/* Head row: title + count on one side, the view-all/less link on the other. */
.proposal-deck-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.proposal-deck h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.proposal-deck-link {
  border: 0;
  background: transparent;
  color: var(--brand-fg);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 2px;
  border-radius: 8px;
}

.proposal-deck-link:hover { text-decoration: underline; }
.proposal-deck-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Expand/collapse control below the previewed cards. */
.proposal-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  border: 1.5px dashed var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--brand-fg);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.proposal-more-btn:hover { background: var(--brand-soft); border-color: var(--brand-fg); }
.proposal-more-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Chevron rotates to signal expand vs collapse (no icon font needed). */
.proposal-more-chevron {
  width: 8px;
  height: 8px;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
  margin-block-start: -4px;
  transition: transform .15s ease;
}

.proposal-more-chevron.is-up {
  transform: rotate(-135deg);
  margin-block-start: 3px;
}

.proposal-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

/* Two-up on desktop so the four previewed cards read as one compact block
   instead of a tall stack that buries the rest of the home page. */
.proposal-grid {
  display: grid;
  /* min(320px, 100%), not a bare 320px floor: a minmax floor cannot shrink, so
     on a 320px phone the track stayed 320px inside a ~248px column and the deck
     — View all, the cards, Dismiss — hung off the edge, clipped and untappable.
     The min() lets the track collapse to the container below that width while
     still pairing cards side-by-side once there is room. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 12px;
  align-items: start;
}

/* Compact by design: four of these must sit above the fold without pushing
   Your agents / Tasks / Notifications off the home screen. */
.proposal-card {
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--brand);
  border-radius: 14px;
  background: var(--surface);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 9px;
}

.proposal-card.busy {
  opacity: .75;
}

.proposal-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.proposal-card-head div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.proposal-card-head strong {
  font-size: 14px;
  line-height: 1.3;
  /* Long agent-generated titles stay to two lines. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.proposal-card-head small {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.proposal-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.proposal-card-actions .btn {
  min-height: 34px;
  padding: 7px 14px;
  font-size: 12.5px;
  border-radius: 999px;
}

@media (max-width: 520px) {
  .proposal-card-actions {
    display: grid;
    grid-template-columns: 1fr auto;
  }
}

/* Admin playbook builder */
.playbook-editor {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  padding: 18px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 14px;
}

.playbook-editor h3 {
  margin: 0;
}

.field-hint {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.playbook-list {
  display: grid;
  gap: 12px;
}

.playbook-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  padding: 14px 16px;
}

.playbook-card.disabled {
  opacity: .6;
}

.playbook-card-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.playbook-card-main small {
  color: var(--muted);
}

.playbook-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.status-pill.auto {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand-fg);
}

.playbook-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.small-btn.danger {
  color: #B42318;
  border-color: #F0C4C0;
}

/* Playbook suggestions + engine settings */
.playbook-suggestions {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}

.playbook-suggestions h3 {
  margin: 0;
}

.playbook-card.suggestion {
  border-inline-start: 4px solid var(--accent, var(--accent-2));
}

.suggestion-rationale {
  color: var(--muted);
  font-style: italic;
}

.small-btn.confirm {
  background: var(--brand);
  border-color: var(--brand-fg);
  color: #fff;
}

.engine-settings {
  background: var(--surface-2, #FAFBFC);
}

/* Phase 4: outcome badge on playbook cards */
.status-pill.outcome {
  background: var(--success-soft, #E3F3EA);
  border-color: var(--success-strong, var(--success-strong));
  color: var(--success-strong, var(--success-strong));
}

/* Icon library picker additions + coming-soon badge */
.default-agent-icon-wrap {
  position: relative;
  display: inline-flex;
}

.icon-remove-dot {
  position: absolute;
  top: -6px;
  inset-inline-end: -6px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.icon-remove-dot:hover {
  color: #B42318;
  border-color: #F0C4C0;
}

.default-agent-icon.add-icon-tile {
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-fg);
  border-style: dashed;
}

.soon-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--warning-soft, #FBF0DC);
  color: var(--warning-strong, #B4790E);
  font-size: 11px;
  font-weight: 800;
  margin-inline-start: 6px;
}

.teams-add-btn:disabled {
  opacity: .65;
  cursor: not-allowed;
}

/* Markdown-rendered agent chat bubbles */
.message-body.md {
  line-height: 1.6;
  /* Rendered markdown is structured HTML: paragraphs, lists and explicit
     <br /> carry the line structure. It inherits `white-space: pre-wrap` from
     .message-body, which is right for a PLAIN message (the user's own typing,
     where newlines are all there is) but wrong here — under pre-wrap the
     newlines BETWEEN block tags become visible blank lines, so every list and
     every paragraph gained a stray gap above it. */
  white-space: normal;
}

.message-body.md > *:first-child { margin-top: 0; }
.message-body.md > *:last-child { margin-bottom: 0; }

.message-body.md p {
  margin: 0 0 10px;
}

.message-body.md .md-h {
  margin: 12px 0 6px;
  font-weight: 800;
  line-height: 1.3;
}

.message-body.md h3.md-h { font-size: 1.05em; }
.message-body.md h4.md-h { font-size: 1em; }
.message-body.md h5.md-h,
.message-body.md h6.md-h { font-size: .95em; color: var(--muted); }

.message-body.md .md-list {
  margin: 4px 0 10px;
  padding-inline-start: 1.35em;
  display: grid;
  gap: 4px;
}

.message-body.md .md-list li {
  line-height: 1.55;
}

/* Markdown tables: scroll inside their own wrapper so a wide comparison table
   never stretches the bubble or the page. dir="auto" on the table lets an
   Arabic table mirror while an English one stays LTR. */
.message-body .md-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  margin: 8px 0 10px;
}

.message-body .md-table {
  border-collapse: collapse;
  font-size: 13.5px;
  line-height: 1.5;
  min-width: 320px;
}

.message-body .md-table th,
.message-body .md-table td {
  border: 1px solid var(--line, var(--line));
  padding: 7px 10px;
  text-align: start;
  vertical-align: top;
}

.message-body .md-table th {
  background: rgba(var(--brand-rgb), .07);
  font-weight: 800;
  white-space: nowrap;
}

.message-body .md-table tr:nth-child(even) td {
  background: rgba(16, 24, 40, .025);
}

.message-body.md strong { font-weight: 800; }
.message-body.md em { font-style: italic; }

.message-body.md a {
  color: var(--brand-fg);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.message-body.md .md-inline-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  background: rgba(var(--brand-rgb), .08);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 5px;
}

.message-body.md .md-code {
  margin: 8px 0 10px;
  padding: 12px 14px;
  background: var(--surface-3, #EEF2F6);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow-x: auto;
}

.message-body.md .md-code code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86em;
  line-height: 1.5;
  white-space: pre;
  color: var(--text);
}

.message-body.md blockquote {
  margin: 6px 0 10px;
  padding: 4px 12px;
  border-inline-start: 3px solid var(--brand);
  background: var(--brand-soft);
  border-radius: 8px;
  color: var(--text);
}

.message-body.md .md-hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 12px 0;
}

/* Agent bubbles are light; user bubbles are brand-filled — keep code/links legible there too. */
.message.user .message-body.md a { color: #fff; }

/* ===== Agent-down banner + chat report ===== */
.agent-down-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1400;
  display: flex;
  justify-content: center;
  padding: 14px;
  animation: adbIn .25s ease;
}
.agent-down-banner.leaving { opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; }
@keyframes adbIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.agent-down-inner {
  width: min(560px, 100%);
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--danger, #d92d20);
  border-inline-start: 4px solid var(--danger, #d92d20);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.agent-down-inner strong { color: var(--danger, #d92d20); }
.agent-down-inner span { color: var(--text); font-size: 14px; line-height: 1.5; }
.agent-down-actions { display: flex; gap: 10px; margin-top: 6px; }
.agent-down-actions .btn { min-height: 40px; }

.agent-report-btn {
  align-self: flex-start;
  margin-top: 8px;
  padding: 6px 12px;
  border: 1px solid var(--danger, #d92d20);
  border-radius: 999px;
  background: transparent;
  color: var(--danger, #d92d20);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.agent-report-btn:hover { background: var(--danger-soft, #FDEAEA); }

/* ===== Agent health panel + badges ===== */
.admin-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.admin-card-head h3 { margin: 0; }
.health-summary { display: inline-flex; gap: 8px; flex-wrap: wrap; }

.health-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid var(--border);
}
.health-badge .health-dot { width: 8px; height: 8px; border-radius: 999px; background: currentColor; flex: 0 0 auto; }
.health-badge.healthy { color: var(--success-strong); background: #E3F3EA; border-color: #BFE6D2; }
.health-badge.degraded { color: #B4790E; background: #FBF0DC; border-color: #EBD9AE; }
.health-badge.down { color: #B42318; background: #FDEAEA; border-color: #F3C4C0; }
.health-badge.unknown { color: var(--muted); background: var(--surface-3, #EEF2F6); }

.agent-avatar-tiny {
  width: 22px; height: 22px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; vertical-align: middle;
  overflow: hidden;
}
.agent-avatar-tiny img { width: 100%; height: 100%; object-fit: cover; }

/* ===== Logs view ===== */
.table-scroll { overflow-x: auto; }
.log-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.log-search {
  flex: 1 1 240px;
  min-width: 200px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 12px;
  background: var(--surface-2, #FAFBFC);
}
.log-status-chips { display: inline-flex; gap: 6px; }
.log-status-chips .chip {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.log-status-chips .chip.active { background: var(--brand); border-color: var(--brand-fg); color: #fff; }
.log-count { color: var(--muted); font-size: 12px; font-weight: 700; margin-inline-start: auto; }

.logs-table td { vertical-align: top; }
.log-time { white-space: nowrap; color: var(--muted); font-size: 12.5px; }
.log-type {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  background: var(--surface-3, #EEF2F6);
  padding: 1px 6px;
  border-radius: 6px;
}
.log-row.is-error { background: rgba(217, 45, 32, .045); }
.log-status {
  display: inline-flex;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: capitalize;
}
.log-status.success { color: var(--success-strong); background: #E3F3EA; }
.log-status.error { color: #B42318; background: #FDEAEA; }
.log-detail-row td { background: var(--surface-2, #FAFBFC); }
.log-detail-block { margin: 6px 0; }
.log-detail-block strong { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.log-pre {
  margin: 0 0 8px;
  padding: 10px 12px;
  background: var(--surface-3, #EEF2F6);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.log-pre.error { border-color: #F3C4C0; background: #FDF3F2; color: #7A1712; }
.log-error-cell { color: #B42318; font-size: 12px; overflow-wrap: anywhere; }

/* Module prose notes (agents that answer in text, e.g. CRM assistant) */
.module-notes { display: grid; gap: 12px; margin: 4px 0 12px; }
.module-note-card {
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--brand);
  border-radius: 14px;
  background: var(--surface);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.module-note-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
}
.module-note-head strong { font-weight: 800; }
.module-note-time { color: var(--muted); font-size: 12px; margin-inline-start: auto; }

/* ============================================================
   Home dashboard (redesigned)
   ============================================================ */
.home-page { display: flex; flex-direction: column; gap: 22px; }

/* v2: hero sits on the light canvas — blue eyebrow, dark title, muted sub. */
.home-hero {
  position: relative;
  padding: 4px 2px 0;
  color: var(--text);
}
.home-hero-main { position: relative; }
.home-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand-fg);
  margin-bottom: 6px;
}
.home-hero h1 { margin: 0 0 5px; font-size: clamp(24px, 2.4vw, 34px); font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.home-hero p { margin: 0; font-size: 14px; color: var(--muted); max-width: 60ch; }

.home-stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.home-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: start;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.home-stat:hover:not(.passive) { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--brand-fg); }
.home-stat:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.home-stat.passive { cursor: default; }
.home-stat-ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: var(--brand-soft);
  color: var(--brand-fg);
}
.home-stat-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.home-stat-value { font-size: 22px; font-weight: 900; color: var(--text); }
.home-stat-label { font-size: 13px; font-weight: 700; color: var(--text); }
.home-stat-desc { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.home-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 2px 12px;
}
.home-section-head h3 { margin: 0; font-size: 15px; font-weight: 800; }
.home-side .home-section-head:not(:first-child) { margin-top: 22px; }

.home-launch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.home-launch-card {
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: start;
  padding: 15px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.home-launch-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--brand-fg); }
.home-launch-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.home-launch-body { display: flex; flex-direction: column; min-width: 0; gap: 2px; flex: 1; }
.home-launch-body strong { font-weight: 800; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-launch-body small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-launch-cta {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-fg);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .16s ease, transform .16s ease;
}
[dir="rtl"] .home-launch-cta { transform: translateX(4px); }
.home-launch-card:hover .home-launch-cta { opacity: 1; transform: translateX(0); }

@media (max-width: 1024px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .home-hero { padding: 22px 20px; }
  .home-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-launch-grid { grid-template-columns: minmax(0, 1fr); }
  .home-launch-cta { display: none; }
}
/* On a phone the four stat boxes stay two-per-row (2×2) rather than each
   taking the whole row. They also compact — icon stacked over the text — so
   two fit a narrow row without the label wrapping. (Four boxes divide evenly
   into 2×2; three-per-row would strand the fourth alone, so two is the fit.) */
@media (max-width: 560px) {
  .home-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .home-stat { flex-direction: column; align-items: flex-start; gap: 9px; padding: 13px 14px; }
  .home-stat-ic { width: 38px; height: 38px; border-radius: 11px; }
  .home-stat-value { font-size: 20px; }
}

/* Proposal cards: pre-approval disclosure of the exact action instruction */
.proposal-action-detail {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}
.proposal-action-detail summary {
  cursor: pointer;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--brand-fg);
  user-select: none;
}
.proposal-action-detail[open] summary { border-bottom: 1px solid var(--border); }
.proposal-action-detail pre {
  margin: 0;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 220px;
  overflow-y: auto;
  color: var(--text);
}

/* Tasks / Calendar — mobile polish (web layout untouched) */
@media (max-width: 720px) {
  .page-panel-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .page-panel-head .page-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .page-panel-head .page-actions .btn { flex: 1 1 auto; }
  .aggregate-toolbar { grid-template-columns: minmax(0, 1fr); }
  .aggregate-summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aggregate-group-actions { flex-wrap: wrap; }
}

/* ============================================================
   Wide screens (large / high-resolution displays)
   ============================================================ */

/* Constrained pages center in the scroll area instead of pinning to the
   inline-start edge — previously a huge dead zone opened on the far side
   of every 1440px+ display. Applies in both LTR and RTL. */
.hub-page {
  width: 100%;
  margin-inline: auto;
}

.builder-export-page {
  margin-inline: auto;
}

/* Closed, the action-review disclosure hugs its label (stretched full-width
   it read as an empty input field); open, it takes the card width again. */
.proposal-action-detail { width: fit-content; max-width: 100%; }
.proposal-action-detail[open] { width: 100%; }

@media (min-width: 1600px) {
  /* Let the content breathe on big monitors instead of hard-capping at
     1050px: pages widen, grids gain columns. */
  .hub-page { max-width: 1400px; }

  /* Aggregate Tasks/Calendar panels are direct children of .hub-main —
     cap and center them (workspace panels keep their own layout). */
  .hub-shell:not(.user-chat-shell) .hub-main > .panel-page {
    max-width: 1680px;
    margin-inline: auto;
  }

  .home-launch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .cards-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .agent-tile-grid.large { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.module-note-card .message-body.md { font-size: 14px; }

/* ============================================================
   Tasks page — clean list layout (matches attachment)
   ============================================================ */

/* The control deck is now a transparent container; the stat tiles and the
   filter card are the visible surfaces. */
.aggregate-control-deck {
  display: grid;
  gap: 16px;
  margin: 4px 0 8px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Stat tiles: white card, colored top accent, big number + label. */
.agg-stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
}
.agg-stat {
  position: relative;
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand);
  border-radius: 14px;
  background: var(--surface);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.agg-stat strong { font-size: 26px; font-weight: 900; line-height: 1; color: var(--text); }
.agg-stat span { font-size: 13px; color: var(--muted); font-weight: 700; }
.agg-stat-total  { border-top-color: var(--brand-fg); }
.agg-stat-total  strong { color: var(--brand-fg); }
.agg-stat-agents { border-top-color: #0e9384; }
.agg-stat-agents strong { color: #0e9384; }
.agg-stat-high   { border-top-color: #d92d20; }
.agg-stat-high   strong { color: #d92d20; }
.agg-stat-soon   { border-top-color: #dc6803; }
.agg-stat-soon   strong { color: #dc6803; }

/* Filter card: search + dropdowns + reset, then the grouping segmented. */
.agg-filter-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  display: grid;
  gap: 14px;
}
.aggregate-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.aggregate-search {
  position: relative;
  flex: 1 1 260px;
  min-width: 200px;
  display: flex;
  align-items: center;
}
.aggregate-search svg {
  position: absolute;
  inset-inline-start: 14px;
  color: var(--muted);
  pointer-events: none;
}
.aggregate-search input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px 10px 40px;
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
}
[dir="rtl"] .aggregate-search input { padding: 10px 40px 10px 14px; }
.aggregate-search input:focus { outline: 2px solid var(--brand); outline-offset: 1px; background: var(--surface); }
.aggregate-select {
  min-height: 44px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.aggregate-select:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.aggregate-reset-link {
  margin-inline-start: auto;
  border: 0;
  background: transparent;
  color: var(--brand-fg);
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  padding: 8px;
}
.aggregate-reset-link:hover { text-decoration: underline; }

/* Grouping segmented control already styled globally; keep it left-aligned. */
.agg-filter-card .view-mode-segmented { justify-self: start; margin: 0; }

/* Groups + rows */
.agg-group-list { display: grid; gap: 22px; margin-top: 6px; }
.agg-group { display: grid; gap: 10px; }
.agg-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-inline: 2px;
}
.agg-group-head strong { font-size: 15px; font-weight: 800; }
.agg-group-head .agent-avatar-mini { width: 30px; height: 30px; flex: 0 0 auto; }
.agg-group-dot { width: 12px; height: 12px; border-radius: 999px; background: var(--brand); flex: 0 0 auto; }
.agg-group-dot.high, .agg-group-dot.urgent { background: #d92d20; }
.agg-group-dot.medium, .agg-group-dot.normal { background: #dc6803; }
.agg-group-dot.low { background: var(--muted); }
.agg-group-count {
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.agg-list {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
/* A task is a CARD, not a list row.
   The flat, border-bottom-separated row read as a table: every task looked
   equally weighted and the due date competed with the title. As a card each task
   is one object you can act on — the title leads, the deadline sits under it in
   its own right, and the priority sits apart on the trailing edge instead of
   being a third item in a sentence.
   Same component in both places it appears: the Tasks tab and inline in a chat
   reply. Two treatments would drift. */
.task-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  background: var(--surface);
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.task-row:last-child { margin-bottom: 0; }
.task-row:hover {
  border-color: color-mix(in oklab, var(--brand) 26%, var(--border));
  box-shadow: 0 1px 3px rgb(0 0 0 / .05);
}
/* Circular, because it is a completion toggle rather than a multi-select. */
.task-row-check {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  position: relative;
  transition: border-color .14s ease, background .14s ease;
}
.task-row-check:hover { border-color: var(--brand-fg); }
.task-row-check::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 6px;
  height: 11px;
  border: solid var(--brand);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: 0;
  transition: opacity .12s ease;
}
.task-row-check:hover::after { opacity: .4; }
.task-row-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: start;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
/* Wraps to two lines rather than truncating. In a list row an ellipsis is a fair
   trade; on a card the title IS the card, and "Follow up with King Saud
   University about the renewal…" hides the part that says what to do. */
.task-row-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.task-row-main:hover .task-row-title { color: var(--brand-fg); }
.task-row-sub {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.task-row-sub i { font-style: normal; opacity: .5; }
/* The deadline earns its own line and the danger token, not a hardcoded red
   that only works on a light background. */
.task-row-due-urgent { color: var(--danger-strong); font-weight: 700; }
.task-row .priority { flex: 0 0 auto; text-transform: capitalize; }
.priority.low { background: var(--surface-3); color: var(--muted); }
.priority.urgent { background: var(--danger-soft); color: var(--danger-strong); }
.priority.normal { background: var(--warning-soft); color: var(--warning-strong); }

@media (max-width: 900px) {
  .agg-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .aggregate-search { flex-basis: 100%; }
  .aggregate-select { flex: 1 1 auto; }
  .aggregate-reset-link { margin-inline-start: 0; }
  .task-row { padding: 14px; gap: 12px; }
  .task-row-title { white-space: normal; }
}
@media (max-width: 420px) {
  .agg-stat-row { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   Admin Console design system (dark navy sidebar + tiles)
   Imported from "Admin Console.dc.html"
   ============================================================ */
:root {
  --admin-navy: #0F2A43;
  --admin-navy-2: #0B2136;
  --admin-ink: #B9CBDA;
  --admin-ink-dim: #95AEC4;   /* 6.4:1 on the navy chrome (was 4.03 - under AA) */
  --admin-group: #8CA5BC;     /* 5.7:1 on the navy chrome (was 3.27) */
}

/* ---- Dark navy sidebar (scoped to admin only) ---- */
.hub-sidebar.admin-sidebar {
  background: var(--admin-navy);
  color: var(--admin-ink);
  border-right: 0;
  padding: 14px 12px;
  gap: 10px;
}
.admin-sidebar .hub-sidebar-brand { padding: 8px 6px 6px; gap: 10px; }
.admin-sidebar .hub-sidebar-brandmark { display: flex; align-items: center; gap: 10px; min-width: 0; }
.admin-sidebar .brand-mark {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: linear-gradient(135deg, var(--accent-2), var(--brand));
  color: #fff; font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.admin-sidebar .brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.admin-sidebar .brand-text strong { font-size: 13.5px; font-weight: 800; color: #fff; white-space: nowrap; }
.admin-sidebar .brand-text small { font-size: 9.5px; font-weight: 700; color: var(--admin-ink-dim); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.admin-sidebar .sidebar-toggle {
  background: rgba(255,255,255,.08); color: var(--admin-ink); border: 0;
  width: 28px; height: 28px; border-radius: 8px; flex: none;
}
.admin-sidebar .sidebar-toggle:hover { background: rgba(255,255,255,.16); color: #fff; }

.admin-sidebar .hub-sidebar-nav { gap: 12px; }
.admin-sidebar .hub-nav-group-label {
  color: var(--admin-group);
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 0 10px 4px;
}
.admin-sidebar .hub-nav-item {
  color: var(--admin-ink);
  background: transparent;
  border: 0; border-radius: 10px;
  padding: 9px 10px; gap: 11px;
  font-size: 12.5px; font-weight: 600;
}
.admin-sidebar .hub-nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.admin-sidebar .hub-nav-item.active {
  background: linear-gradient(135deg, rgba(var(--brand-rgb),.55), rgba(var(--brand-rgb),.30));
  color: #fff; font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.admin-sidebar .hub-nav-icon { color: inherit; opacity: .95; }
.admin-sidebar .hub-nav-badge {
  background: #F5A524; color: #3D2A00;
  font-size: 10px; font-weight: 800; border-radius: 999px; padding: 1px 7px;
}

.admin-sidebar .hub-sidebar-footer {
  border-top: 1px solid rgba(255,255,255,.09);
  padding: 12px 6px 8px; gap: 10px;
}
.admin-sidebar .hub-user-mini .avatar {
  background: var(--brand-2); color: var(--brand-soft);
}
.admin-sidebar .hub-user-mini strong { color: #fff; }
.admin-sidebar .hub-user-mini span { color: var(--admin-ink-dim); }
.admin-sidebar .language-selector.sidebar-language {
  background: rgba(255,255,255,.08); border-radius: 999px; padding: 3px; gap: 2px; border: 0;
}
.admin-sidebar .language-selector.sidebar-language .lang-option {
  color: var(--admin-ink); background: transparent; border: 0; border-radius: 999px;
  padding: 6px 4px; font-weight: 700; font-size: 11.5px;
}
/* The active chip sits on --surface, so its label must be the text colour —
   --admin-navy equals the surface in dark and rendered the label invisible. */
.admin-sidebar .language-selector.sidebar-language .lang-option.active { background: var(--surface); color: var(--text); }
.admin-sidebar .sidebar-view-user {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; border: 1.5px solid rgba(255,255,255,.22); color: #DCE9F3;
  border-radius: 999px; padding: 9px; font-weight: 700; font-size: 11.5px;
}
.admin-sidebar .sidebar-view-user:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); }
.admin-sidebar .sidebar-view-user svg { width: 14px; height: 14px; }
.admin-sidebar .hub-sidebar-footer .btn.secondary {
  background: rgba(255,255,255,.1); color: #fff; border: 0; border-radius: 999px; font-weight: 700; font-size: 11.5px;
}
.admin-sidebar .hub-sidebar-footer .btn.secondary:hover { background: rgba(255,255,255,.18); }
/* Invisible scrollbar: the nav still scrolls (wheel/trackpad/keys) but never
   shows a scrollbar gutter or thumb. */
.hub-sidebar .hub-sidebar-nav { scrollbar-width: none; -ms-overflow-style: none; }
.hub-sidebar .hub-sidebar-nav::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Brand row never lets the toggle overlap the name: the brandmark flexes and
   truncates, the toggle is fixed-size beside it. Expanded-only — collapsed
   mode stacks them vertically and must keep intrinsic heights. */
.admin-sidebar .hub-sidebar-brand { flex-wrap: nowrap; }
.admin-sidebar:not(.collapsed) .hub-sidebar-brandmark { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.admin-sidebar .brand-text { overflow: hidden; }
.admin-sidebar .brand-text strong,
.admin-sidebar .brand-text small { overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; }
.admin-sidebar .sidebar-toggle { flex: 0 0 auto; }
.admin-sidebar.collapsed .brand-text,
.admin-sidebar.collapsed .brand-mark { margin: 0 auto; }

/* ---- Admin header: live-mode green pill ---- */
.admin-main .admin-header h1 { letter-spacing: -0.02em; }
.admin-main .status-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--success-soft); color: var(--success-strong);
  border: 0; border-radius: 999px; padding: 6px 14px;
  font-size: 11px; font-weight: 700;
}
.admin-main .status-pill::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--success-strong);
}

/* ---- Dashboard stat tiles ---- */
.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.admin-stat-tile {
  text-align: start; cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand);
  border-radius: 16px;
  padding: 15px 18px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  display: flex; flex-direction: column; gap: 4px;
  transition: box-shadow .16s ease, transform .16s ease;
}
.admin-stat-tile:hover { box-shadow: 0 8px 24px rgba(var(--brand-rgb),.10); transform: translateY(-1px); }
.admin-stat-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.admin-stat-label { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.admin-stat-ic { flex: none; display: inline-flex; }
.admin-stat-ic svg { width: 15px; height: 15px; }
.admin-stat-tile strong { font-size: 27px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.admin-stat-tile strong.is-text { font-size: 15px; color: var(--text); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Admin preview ("View as user") bar ---- */
.admin-preview-bar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--admin-navy); color: #DCE9F3;
  padding: 8px 18px; font-size: 12.5px; font-weight: 700;
}
.admin-preview-bar span { display: inline-flex; align-items: center; gap: 8px; }
.admin-preview-bar span svg { width: 15px; height: 15px; }
.admin-preview-bar button {
  border: 1.5px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: #fff;
  border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 12px; cursor: pointer;
}
.admin-preview-bar button:hover { background: rgba(255,255,255,.18); }
/* The sticky bar is ~48px tall (8px padding × 2 + 32px content); every
   full-viewport surface below it must give that space up, or the page gains a
   48px scroll and the composer sits below the fold. The chat workspace and
   .hub-main set height:100vh with equal specificity earlier in the file, so
   they are overridden here too — the old rules only fixed the shell/sidebar
   (and assumed 40px, leaving an 8px scroll everywhere in preview mode). */
.hub-shell.has-preview-bar { height: calc(var(--app-vh, 100dvh) - 48px); min-height: calc(var(--app-vh, 100dvh) - 48px); }
/* The preview bar's 48px comes off the MEASURED visible height, not 100dvh —
   otherwise the chat stands one bar-height taller than the screen whenever a
   keyboard is up. */
.hub-shell.has-preview-bar .hub-sidebar { height: calc(var(--app-vh, 100dvh) - 48px); max-height: calc(var(--app-vh, 100dvh) - 48px); }
.hub-shell.has-preview-bar .hub-main,
.hub-shell.has-preview-bar .agent-workspace {
  height: calc(var(--app-vh, 100dvh) - 48px);
}

/* ============================================================
   Admin Console — inner-screen design system (all 15 screens)
   Scoped to .admin-main so the user experience is untouched.
   ============================================================ */
.admin-main { background: var(--bg); }
.admin-main .hub-page,
.admin-main .admin-card,
.admin-main > section { max-width: 1220px; margin-inline: auto; }
/* Cards */
.admin-main .admin-card,
.admin-main .admin-workspace-shell,
.admin-main .agent-test-output {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  padding: 20px;
}
.admin-main .admin-card + .admin-card { margin-top: 16px; }
.admin-main .admin-card h3,
.admin-main .section-head h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.admin-main .card-subtitle,
.admin-main .field-hint { color: var(--muted); font-size: 12px; }
.admin-main .section-head { margin-top: 0; margin-bottom: 14px; }

/* Pill buttons (design system) */
.admin-main .btn {
  border-radius: 999px;
  font-weight: 700;
  font-size: 12.5px;
  padding: 10px 18px;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.admin-main .btn.primary { background: var(--brand); border: none; color: #fff; }
.admin-main .btn.primary:hover { background: var(--brand-2); }
.admin-main .btn.secondary,
.admin-main .btn.ghost {
  background: var(--surface); border: 1.5px solid #D7DEE7; color: var(--brand-fg);
}
.admin-main .btn.secondary:hover,
.admin-main .btn.ghost:hover { background: var(--brand-soft); border-color: var(--brand-soft); }
.admin-main .btn.success { background: var(--success-strong); border: none; color: #fff; }
.admin-main .btn.success:hover { background: #17835d; }
.admin-main .btn.danger,
.admin-main .btn.danger-text { color: #B42318; }
.admin-main .small-btn {
  border-radius: 999px;
  border: 1.5px solid #D7DEE7;
  background: var(--surface);
  color: var(--brand-fg);
  font-weight: 700;
  font-size: 11.5px;
  padding: 8px 15px;
  transition: background .15s ease, border-color .15s ease;
}
.admin-main .small-btn:hover { background: var(--brand-soft); border-color: var(--brand-soft); }
.admin-main .small-btn.confirm { background: var(--brand); border-color: var(--brand-fg); color: #fff; }
.admin-main .small-btn.confirm:hover { background: var(--brand-2); }

/* Status / health pills */
.admin-main .status-pill,
.admin-main .health-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 800; border-radius: 999px; padding: 3px 10px;
}
.admin-main .status-pill.status-active { background: var(--success-soft); color: var(--success-strong); }
.admin-main .status-pill.status-draft { background: #FFF4E5; color: #B54708; }
.admin-main .status-pill.status-disabled { background: var(--surface-3); color: var(--muted); }

/* Filter / category chips */
.admin-main .category-chip,
.admin-main .agent-filter-row .category-chip {
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
  padding: 8px 15px;
}
.admin-main .category-chip.active {
  background: var(--brand-soft); border-color: var(--brand-fg); color: var(--brand-fg); font-weight: 700;
}

/* Search + text inputs */
.admin-main input[type="text"],
.admin-main input[type="search"],
.admin-main input[type="email"],
.admin-main input[type="url"],
.admin-main input[type="number"],
.admin-main input[type="password"],
.admin-main .field input,
.admin-main .field select,
.admin-main select {
  border: 1.5px solid var(--line);
  border-radius: 11px;
  background: var(--surface-2);
  padding: 11px 14px;
  font-size: 13px;
  color: var(--text);
}
.admin-main input:focus,
.admin-main select:focus,
.admin-main textarea:focus { outline: 2px solid rgba(var(--brand-rgb),.35); outline-offset: 0; background: var(--surface); }
.admin-main .field textarea,
.admin-main textarea.code-area {
  border: 1.5px solid var(--line); border-radius: 11px; background: var(--surface-2);
  padding: 11px 14px; font-size: 12.5px; line-height: 1.55;
}
.admin-main .agent-filter-row input,
.admin-main .builder-search input { border-radius: 999px; background: var(--surface); }

/* Form field label */
.admin-main .field > label,
.admin-main .field-label { font-size: 12px; font-weight: 700; color: var(--muted); }

/* Tables → card-wrapped, uppercase headers */
.admin-main .agent-admin-table,
.admin-main .table {
  border-collapse: separate; border-spacing: 0; width: 100%;
}
.admin-main .agent-table-card,
.admin-main .table-scroll {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04); overflow: hidden;
}
.admin-main .agent-admin-table thead th,
.admin-main .table thead th {
  font-size: 10.5px; font-weight: 700; color: var(--muted-2);
  letter-spacing: .05em; text-transform: uppercase;
  background: var(--surface); border-bottom: 1px solid #EEF2F6;
  padding: 13px 18px;
}
.admin-main .agent-admin-table tbody td,
.admin-main .table tbody td { border-bottom: 1px solid var(--line); padding: 12px 18px; font-size: 12.5px; }
.admin-main .agent-admin-table tbody tr:last-child td,
.admin-main .table tbody tr:last-child td { border-bottom: 0; }

/* Empty states → dashed card */
.admin-main .empty-state,
.admin-main .agent-tile.empty {
  border: 1.5px dashed #D7DEE7; border-radius: 16px;
  padding: 44px 20px; text-align: center;
  color: var(--muted); font-weight: 700; font-size: 13.5px;
  background: var(--surface-2);
}

/* Toggle switch (used for capabilities, schedules, settings) */
.admin-main .switch-btn {
  width: 42px; height: 24px; border-radius: 999px; border: none;
  background: var(--faint); position: relative; cursor: pointer; flex: none;
  transition: background .15s ease;
}
.admin-main .switch-btn::after {
  content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--surface);
  position: absolute; top: 3px; inset-inline-start: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: inset-inline-start .15s ease;
}
.admin-main .switch-btn.on { background: var(--brand); }
.admin-main .switch-btn.on::after { inset-inline-start: 21px; }

/* Approval + list rows */
.admin-main .approval-card,
.admin-main .access-row {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}

/* Icon-avatar chip used in list rows */
.admin-main .agent-avatar-mini,
.admin-main .agent-avatar-tiny { border-radius: 12px; }

/* Section spacing on scrollable pages */
.admin-main .hub-page { padding: 4px 0 24px; }

/* =====================================================================
   Admin Console redesign — card-rows, chips, charts, stepper, quick
   actions. Scoped to .admin-main so the end-user app is untouched.
   Palette matches the shared Admin Console design (navy var(--admin-navy),
   primary var(--brand), accent var(--accent-2), live var(--success-strong), danger #B42318).
   ===================================================================== */
.admin-main .ac-screen { --ac-primary:var(--brand); --ac-primary-dark:var(--brand-2); --ac-border:var(--line); --ac-muted:var(--muted); --ac-faint:var(--muted-2); }

/* ---- Toolbar (search + chips + add) ---- */
.admin-main .ac-toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:6px; }
.admin-main .ac-toolbar.end { justify-content:flex-end; }
.admin-main .ac-search { position:relative; flex:1; min-width:200px; max-width:340px; display:flex; align-items:center; }
.admin-main .ac-search svg { position:absolute; inset-inline-start:14px; width:16px; height:16px; stroke:var(--muted-2); fill:none; pointer-events:none; }
.admin-main .ac-search input { width:100%; padding:10px 14px; padding-inline-start:40px; border-radius:999px; border:1.5px solid var(--line); font:inherit; font-size:13px; background: var(--surface); outline:none; transition:border-color .15s, box-shadow .15s; }
.admin-main .ac-search input:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(var(--brand-rgb),.15); }
.admin-main .ac-chips { display:flex; gap:7px; flex-wrap:wrap; }
.admin-main .ac-chip { padding:8px 15px; border-radius:999px; border:1.5px solid var(--line); background: var(--surface); color: var(--muted); font-weight:600; font-size:12px; cursor:pointer; white-space:nowrap; transition:all .15s; }
.admin-main .ac-chip:hover { border-color:#C7D2DC; background: var(--surface-2); }
.admin-main .ac-chip.is-active { border-color: var(--brand-fg); background: var(--brand); color:#fff; }
.admin-main .ac-add-btn { display:inline-flex; align-items:center; gap:7px; padding:10px 18px; border-radius:999px; border:none; background: var(--brand); color:#fff; font-weight:700; font-size:12.5px; cursor:pointer; margin-inline-start:auto; transition:background .15s; }
.admin-main .ac-toolbar.end .ac-add-btn { margin-inline-start:0; }
.admin-main .ac-add-btn:hover { background: var(--brand-2); }
.admin-main .ac-add-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; }

/* ---- Card rows (registry + scheduled) ---- */
.admin-main .ac-rows { display:flex; flex-direction:column; gap:12px; margin-top:20px; }
.admin-main .ac-row { background: var(--surface); border:1px solid var(--line); border-radius:16px; padding:15px 18px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; box-shadow:0 1px 2px rgba(15,23,42,.04); transition:box-shadow .15s, border-color .15s; }
.admin-main .ac-row:hover { box-shadow:0 8px 24px rgba(var(--brand-rgb),.08); border-color:#D7E3EC; }
.admin-main .ac-avatar { display:flex; flex:none; }
.admin-main .ac-avatar-inner { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.admin-main .ac-avatar-inner svg { width:20px; height:20px; }
.admin-main .ac-avatar-inner img { width:100%; height:100%; object-fit:cover; }
.admin-main .ac-row-main { flex:1; min-width:170px; }
.admin-main .ac-row-title { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.admin-main .ac-row-title strong { font-size:14px; font-weight:700; color: var(--text); }
.admin-main .ac-badge { font-size:10px; font-weight:800; padding:3px 10px; border-radius:999px; letter-spacing:.02em; }
.admin-main .ac-row-meta { font-size:11.5px; color: var(--muted); margin-top:3px; }
.admin-main .ac-mods { display:flex; gap:6px; flex-wrap:wrap; flex:none; }
.admin-main .ac-mod { font-size:10.5px; font-weight:600; padding:4px 10px; border-radius:999px; background: var(--surface-3); color: var(--muted); }
.admin-main .ac-users { font-size:12px; color: var(--muted); font-weight:600; flex:none; white-space:nowrap; }

/* ---- Kebab menu ---- */
.admin-main .ac-kebab-wrap { position:relative; flex:none; }
.admin-main .ac-kebab { border:1.5px solid var(--line); background: var(--surface); color: var(--muted); width:32px; height:32px; border-radius:9px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.admin-main .ac-kebab:hover { background: var(--surface-3); }
.admin-main .ac-kebab svg { width:15px; height:15px; stroke:currentColor; fill:none; }
.admin-main .ac-menu { position:absolute; top:38px; inset-inline-end:0; z-index:41; background: var(--surface); border:1px solid var(--line); border-radius:13px; box-shadow:0 16px 40px rgba(15,23,42,.16); min-width:180px; padding:5px; }
.admin-main .ac-menu-item { display:block; width:100%; text-align:start; padding:9px 12px; border:none; background:transparent; border-radius:9px; font-size:12.5px; font-weight:600; color: var(--text); cursor:pointer; white-space:nowrap; }
.admin-main .ac-menu-item:hover { background: var(--surface-3); }

/* ---- Empty states ---- */
.admin-main .ac-empty { margin-top:20px; border:1.5px dashed #D7DEE7; border-radius:16px; padding:40px 20px; text-align:center; color: var(--muted); font-weight:700; font-size:13.5px; }
.admin-main .ac-empty.small { padding:26px 16px; border-radius:13px; display:flex; flex-direction:column; gap:3px; margin-top:0; }
.admin-main .ac-empty.small strong { font-size:12.5px; color: var(--muted); }
.admin-main .ac-empty.small span { font-size:11.5px; color: var(--muted-2); font-weight:500; }

/* ---- Analytics: stat tiles ---- */
.admin-main .ac-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-top:6px; }
.admin-main .ac-tile { background: var(--surface); border:1px solid var(--line); border-top:3px solid var(--brand); border-radius:16px; padding:16px 18px; box-shadow:0 1px 2px rgba(15,23,42,.04); display:flex; flex-direction:column; gap:6px; }
.admin-main .ac-tile-label { font-size:11.5px; color: var(--muted); font-weight:600; }
.admin-main .ac-tile-value { font-size:30px; font-weight:800; letter-spacing:-0.02em; line-height:1.1; }
.admin-main .ac-tile-value.is-text { font-size:17px; line-height:1.3; }

/* ---- Analytics: charts ---- */
.admin-main .ac-charts { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px; margin-top:20px; align-items:start; }
.admin-main .ac-chart-card { background: var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.admin-main .ac-chart-card h3 { font-size:15px; font-weight:700; margin:0 0 16px; }
.admin-main .ac-bars { display:flex; flex-direction:column; gap:13px; }
.admin-main .ac-bar-head { display:flex; justify-content:space-between; gap:10px; font-size:12px; font-weight:600; color: var(--text); }
.admin-main .ac-bar-head span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-main .ac-bar-head em { color: var(--brand-fg); font-weight:800; font-style:normal; flex:none; }
.admin-main .ac-bar-track { height:8px; border-radius:999px; background: var(--surface-3); margin-top:5px; overflow:hidden; }
.admin-main .ac-bar-fill { height:100%; border-radius:999px; background:linear-gradient(90deg,var(--brand),var(--accent-2)); transition:width .4s cubic-bezier(.16,1,.3,1); }
.admin-main .ac-vbars { display:flex; align-items:flex-end; gap:10px; height:150px; margin-top:18px; }
.admin-main .ac-vbar { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; }
.admin-main .ac-vbar-val { font-size:10.5px; font-weight:700; color: var(--brand-fg); }
.admin-main .ac-vbar-fill { width:100%; max-width:34px; border-radius:8px 8px 3px 3px; background:linear-gradient(180deg,var(--accent-2),var(--brand)); }
.admin-main .ac-vbar-label { font-size:10px; font-weight:600; color: var(--muted-2); }

/* ---- Analytics: leaderboard ---- */
.admin-main .ac-leader-card { background: var(--surface); border:1px solid var(--line); border-radius:16px; margin-top:20px; box-shadow:0 1px 2px rgba(15,23,42,.04); overflow:hidden; }
.admin-main .ac-leader-card h3 { font-size:15px; font-weight:700; padding:18px 20px 4px; margin:0; }
.admin-main .ac-leader { overflow-x:auto; }
.admin-main .ac-leader-head, .admin-main .ac-leader-row { display:grid; grid-template-columns:2fr .8fr .8fr 1fr; gap:10px; padding:12px 20px; align-items:center; min-width:480px; }
.admin-main .ac-leader-head { border-bottom:1px solid #EEF2F6; font-size:10.5px; font-weight:700; color: var(--muted-2); letter-spacing:.05em; text-transform:uppercase; }
.admin-main .ac-leader-row { border-bottom:1px solid var(--line); font-size:12.5px; }
.admin-main .ac-leader-name { font-weight:700; color: var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-main .ac-leader-calls { font-weight:800; color: var(--brand-fg); }
.admin-main .ac-leader-err { font-weight:700; }
.admin-main .ac-leader-share { color: var(--muted); font-weight:600; }

/* ---- Scheduled: columns + actions + switch ---- */
.admin-main .ac-col { flex:none; display:flex; flex-direction:column; gap:2px; }
.admin-main .ac-col-label { font-size:10px; font-weight:700; color: var(--muted-2); letter-spacing:.05em; text-transform:uppercase; }
.admin-main .ac-col-value { font-size:12.5px; font-weight:700; color: var(--text); white-space:nowrap; }
.admin-main .ac-col-pill { font-size:11px; font-weight:800; margin-top:1px; padding:2px 10px; border-radius:999px; text-align:center; }
.admin-main .ac-row-actions { display:flex; align-items:center; gap:8px; flex:none; flex-wrap:wrap; }
.admin-main .ac-run-btn { display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:999px; border:1.5px solid #D7DEE7; background: var(--surface); color: var(--brand-fg); font-weight:700; font-size:11.5px; cursor:pointer; transition:background .15s; }
.admin-main .ac-run-btn:hover { background: var(--brand-soft); }
.admin-main .ac-run-btn svg { width:13px; height:13px; fill:currentColor; stroke:none; }
.admin-main .ac-ghost-btn { padding:8px 12px; border-radius:999px; border:1.5px solid var(--line); background: var(--surface); color: var(--muted); font-weight:700; font-size:11.5px; cursor:pointer; transition:all .15s; }
.admin-main .ac-ghost-btn:hover { background: var(--surface-3); color: var(--text); }
.admin-main .ac-ghost-btn.danger:hover { border-color:#F5C6C0; color:#B42318; background:#FDECEA; }
.admin-main .ac-switch { width:42px; height:24px; border-radius:999px; border:none; background: var(--faint); position:relative; cursor:pointer; flex:none; transition:background .15s; padding:0; }
.admin-main .ac-switch.is-on { background:var(--success-strong); }
.admin-main .ac-switch-knob { width:18px; height:18px; border-radius:50%; background: var(--surface); position:absolute; top:3px; inset-inline-start:3px; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:inset-inline-start .15s; }
.admin-main .ac-switch.is-on .ac-switch-knob { inset-inline-start:21px; }

/* ---- Dashboard: quick actions ---- */
.admin-main .ac-quick { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.admin-main .ac-quick-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px; border:1.5px solid #D7DEE7; background: var(--surface); color: var(--text); font-weight:700; font-size:12.5px; cursor:pointer; transition:all .15s; }
.admin-main .ac-quick-btn:hover { background: var(--surface-3); }
.admin-main .ac-quick-btn.is-primary { border:none; background: var(--brand); color:#fff; }
.admin-main .ac-quick-btn.is-primary:hover { background: var(--brand-2); }
.admin-main .ac-quick-btn svg { width:15px; height:15px; stroke:currentColor; fill:none; }

/* ---- Dashboard: card head + rows ---- */
.admin-main .ac-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.admin-main .ac-card-title { display:flex; align-items:center; gap:8px; }
.admin-main .ac-card-title h3 { margin:0; font-size:15px; font-weight:700; }
.admin-main .ac-count { background:#FFF4E5; color:#B54708; font-size:10.5px; font-weight:800; border-radius:999px; padding:2px 9px; }
.admin-main .ac-link { border:none; background:transparent; color: var(--brand-fg); font-size:12px; font-weight:700; cursor:pointer; padding:0; }
.admin-main .ac-link:hover { text-decoration:underline; }
.admin-main .ac-approval { display:flex; align-items:center; gap:12px; border:1px solid #EEF2F6; border-radius:13px; padding:12px 14px; margin-bottom:10px; }
.admin-main .ac-approval-avatar { width:36px; height:36px; border-radius:50%; background:#FFF4E5; color:#B54708; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; flex:none; }
.admin-main .ac-approval-main { flex:1; min-width:0; }
.admin-main .ac-approval-main strong { display:block; font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.admin-main .ac-approval-main span { display:block; font-size:11.5px; color: var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.admin-main .ac-approve-btn { padding:8px 14px; border-radius:999px; border:none; background: var(--brand); color:#fff; font-weight:700; font-size:11.5px; cursor:pointer; flex:none; transition:background .15s; }
.admin-main .ac-approve-btn:hover { background: var(--brand-2); }
.admin-main .ac-deny-btn { padding:8px 12px; border-radius:999px; border:1.5px solid var(--line); background: var(--surface); color: var(--muted); font-weight:700; font-size:11.5px; cursor:pointer; flex:none; transition:all .15s; }
.admin-main .ac-deny-btn:hover { border-color:#F5C6C0; color:#B42318; }
.admin-main .ac-audit { display:flex; gap:12px; padding:10px 2px; border-bottom:1px solid var(--line); align-items:flex-start; }
.admin-main .ac-audit-ic { width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex:none; margin-top:1px; }
.admin-main .ac-audit-ic svg { width:13px; height:13px; stroke:currentColor; fill:none; }
.admin-main .ac-audit-main { flex:1; min-width:0; }
.admin-main .ac-audit-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.admin-main .ac-audit-top strong { font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.admin-main .ac-audit-top em { font-size:10.5px; color: var(--muted-2); font-style:normal; flex:none; }
.admin-main .ac-audit-main span { display:block; font-size:11.5px; color: var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---- Agent Builder: horizontal numbered stepper ---- */
.admin-main .ac-steps { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.admin-main .ac-step { display:inline-flex; align-items:center; gap:7px; padding:7px 13px 7px 7px; border-radius:999px; border:1.5px solid var(--line); background: var(--surface); color: var(--muted); font-weight:700; font-size:11.5px; cursor:pointer; white-space:nowrap; transition:all .15s; }
.admin-main .ac-step:hover { border-color:#C7D2DC; background: var(--surface-2); }
.admin-main .ac-step-num { width:20px; height:20px; border-radius:50%; background: var(--surface-3); color: var(--muted); display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:800; flex:none; }
.admin-main .ac-step.is-active { border-color: var(--brand-fg); background: var(--brand); color:#fff; }
.admin-main .ac-step.is-active .ac-step-num { background:rgba(255,255,255,.25); color:#fff; }
.admin-main .ac-step.is-complete .ac-step-num { background:var(--success-soft); color: var(--success-strong); }
.admin-main .ac-step.is-active.is-complete .ac-step-num { background:rgba(255,255,255,.25); color:#fff; }
.admin-main .ac-step.is-attention .ac-step-num { background:#FFF4E5; color:#B54708; }
.admin-main .ac-builder-content { margin-top:16px; }

/* =====================================================================
   Admin Console redesign (batch 2): Reports, Message Reports, Message
   History, Audit Logs, Access Management. Scoped to .admin-main.
   ===================================================================== */

/* ---- reports ---- */
.admin-main .ac-rep-sub {
  font-size: 11px;
  color: var(--muted-2);
  font-weight: 600;
  margin-top: 3px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ---- messagereports ---- */
.admin-main .ac-mr-list { display:flex; flex-direction:column; gap:12px; margin-top:18px; }
.admin-main .ac-mr-card { background: var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.admin-main .ac-mr-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.admin-main .ac-mr-pill { font-size:10px; font-weight:800; padding:3px 10px; border-radius:999px; letter-spacing:.02em; white-space:nowrap; }
.admin-main .ac-mr-reason { font-size:10px; font-weight:700; padding:3px 10px; border-radius:999px; background: var(--surface-3); color: var(--muted); white-space:nowrap; }
.admin-main .ac-mr-date { font-size:11px; color: var(--muted-2); margin-inline-start:auto; white-space:nowrap; }
.admin-main .ac-mr-quote { margin-top:12px; background: var(--surface-2); border-inline-start:3px solid #CBD5E1; border-radius:10px; padding:11px 14px; font-size:13px; color: var(--text); line-height:1.6; font-style:italic; }
.admin-main .ac-mr-foot { display:flex; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap; }
.admin-main .ac-mr-by { font-size:11.5px; color: var(--muted); }
.admin-main .ac-mr-act { margin-inline-start:auto; padding:8px 16px; border-radius:999px; border:1.5px solid #D7DEE7; background: var(--surface); color: var(--brand-fg); font-weight:700; font-size:11.5px; cursor:pointer; flex:none; transition:background .15s ease; }
.admin-main .ac-mr-act:hover { background: var(--brand-soft); }
/* ---- messagehistory ---- */
.admin-main .ac-mh-pick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px;}
.admin-main .ac-mh-pick-label{font-size:12px;font-weight:700;color: var(--muted);}
.admin-main .ac-mh-none{font-size:12px;font-weight:600;color: var(--muted-2);}
.admin-main .ac-mh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:18px;}
.admin-main .ac-mh-card{display:flex;flex-direction:column;gap:12px;background: var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 1px 2px rgba(15,23,42,.04);}
.admin-main .ac-mh-card-head{display:flex;align-items:center;gap:11px;}
.admin-main .ac-mh-card-main{min-width:0;flex:1;}
.admin-main .ac-mh-card-title{display:flex;align-items:center;gap:8px;min-width:0;}
.admin-main .ac-mh-card-title strong{font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.admin-main .ac-mh-reports{display:inline-flex;align-items:center;gap:3px;flex:none;}
.admin-main .ac-mh-reports svg{width:11px;height:11px;}
.admin-main .ac-mh-card-meta{font-size:11px;color: var(--muted-2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.admin-main .ac-mh-preview{display:flex;flex-direction:column;gap:6px;background: var(--surface-2);border:1px solid #EEF2F6;border-radius:12px;padding:11px 13px;}
.admin-main .ac-mh-preview-label{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color: var(--brand-fg);}
.admin-main .ac-mh-snippet{margin:0;font-size:11.5px;line-height:1.5;color: var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.admin-main .ac-mh-preview-meta{font-size:11px;font-weight:600;color: var(--muted);}
.admin-main .ac-mh-card .ac-run-btn{align-self:flex-start;}
/* ---- auditlogs ---- */
.admin-main .ac-aud-tools { margin-inline-start:auto; display:flex; align-items:center; gap:8px; }
.admin-main .ac-aud-card { background: var(--surface); border:1px solid var(--line); border-radius:16px; margin-top:18px; box-shadow:0 1px 2px rgba(15,23,42,.04); overflow:hidden; }
.admin-main .ac-aud-scroll { overflow-x:auto; }
.admin-main .ac-aud-grid { min-width:640px; }
.admin-main .ac-aud-head { display:grid; grid-template-columns:1.6fr 1.6fr .8fr 1.1fr; gap:10px; padding:13px 20px; border-bottom:1px solid #EEF2F6; font-size:10.5px; font-weight:700; color: var(--muted-2); letter-spacing:.05em; text-transform:uppercase; }
.admin-main .ac-aud-row { display:grid; grid-template-columns:1.6fr 1.6fr .8fr 1.1fr; gap:10px; padding:12px 20px; border-bottom:1px solid var(--line); align-items:center; }
.admin-main .ac-aud-row.is-error { background:#FEF6F5; }
.admin-main .ac-aud-event { display:flex; align-items:center; gap:10px; min-width:0; }
.admin-main .ac-aud-ic { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex:none; }
.admin-main .ac-aud-ic svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.admin-main .ac-aud-ev-text { display:flex; flex-direction:column; gap:1px; min-width:0; }
.admin-main .ac-aud-label { font-size:12.5px; font-weight:700; color: var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-main .ac-aud-sub { font-size:11px; font-weight:600; color: var(--muted-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-main .ac-aud-actor { font-size:12px; color: var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-main .ac-aud-time { display:flex; flex-direction:column; align-items:flex-start; gap:4px; font-size:11.5px; color: var(--muted-2); white-space:nowrap; }
.admin-main .ac-aud-toggle { background:none; border:none; padding:0; color: var(--brand-fg); font-weight:700; font-size:11px; cursor:pointer; }
.admin-main .ac-aud-toggle:hover { text-decoration:underline; }
.admin-main .ac-aud-detail { padding:4px 20px 16px; background:#FBFCFD; border-bottom:1px solid var(--line); }
.admin-main .ac-aud-detail .log-detail-block:last-child .log-pre { margin-bottom:0; }
.admin-main .ac-aud-empty { padding:16px; }
/* ---- admin meetings management ---- */
.admin-main .am-list { display:flex; flex-direction:column; }
.admin-main .am-row { display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; text-align:start; background:none; border:none; border-bottom:1px solid var(--line); padding:14px 20px; cursor:pointer; font:inherit; }
.admin-main .am-row:last-child { border-bottom:none; }
.admin-main .am-row:hover { background: var(--surface-3); }
.admin-main .am-row:focus-visible { outline:2px solid var(--brand); outline-offset:-2px; border-radius:8px; }
.admin-main .am-row-main { display:flex; flex-direction:column; gap:3px; min-width:0; }
.admin-main .am-row-title { font-size:13.5px; font-weight:700; color: var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-main .am-row-meta { display:flex; align-items:center; gap:10px; flex:none; }
.admin-main .am-detail { padding:20px; }
.admin-main .am-detail .vx-detail-h { display:flex; align-items:center; gap:8px; margin:18px 0 8px; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color: var(--muted); }
.admin-main .am-detail .vx-detail-title { margin:0; font-size:17px; color: var(--text); }
.admin-main .am-detail .vx-detail-p { margin:0; font-size:13.5px; line-height:1.65; color: var(--text); }
/* Workstream heading inside a structured minutes summary. Crimson and small-caps
   in LTR; Arabic gets neither tracking nor uppercase, which mean nothing for a
   joined script and pull its glyphs apart. */
.admin-main .am-detail .vx-detail-sub { margin:14px 0 4px; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--brand); }
.admin-main .am-detail .vx-detail-sub:first-child { margin-top:0; }
:root[dir="rtl"] .admin-main .am-detail .vx-detail-sub { letter-spacing:normal; text-transform:none; font-size:13px; }
.admin-main .am-detail .vx-detail-ul { margin:0; padding-inline-start:20px; font-size:13.5px; line-height:1.7; color: var(--text); }
.admin-main .am-detail .vx-transcript { max-height:420px; overflow-y:auto; border:1px solid #EEF2F6; border-radius:12px; padding:12px 14px; margin-top:6px; }
@media (max-width: 720px) {
  .admin-main .am-row { flex-direction:column; align-items:flex-start; gap:6px; }
  .admin-main .am-row-meta { flex-wrap:wrap; }
}
.admin-main .am-model-select { font:inherit; font-size:12px; font-weight:600; color: var(--text); border:1px solid var(--line); border-radius:10px; padding:7px 10px; background: var(--surface); max-width:220px; }
.admin-main .am-draft-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin:16px 0 4px; padding:12px 14px; border:1px solid #F5D98F; background:#FEF8E7; border-radius:12px; font-size:12.5px; color:#8A6D1F; font-weight:600; }
.admin-main .am-draft-actions { display:flex; gap:8px; }
.admin-main .am-draft-actions .am-accept { border-color: var(--success-strong); color: var(--success-strong); }
.admin-main .am-draft-actions .am-accept:hover { background:var(--success-soft); }
/* ---- users management ----
   This table used to reuse `.agent-admin-table`, whose `table-layout: fixed` and
   nth-child widths were authored for a SEVEN column agents table. Users has six
   different ones, so email was pinned to 110px (every address wrapped) while the
   single-digit agent count got 180px, and the last columns collapsed to 78px.
   Worse, `.admin-main .table-scroll` sets overflow:hidden, so ~190px of the row —
   the whole Actions cell — was clipped with no scrollbar to reach it. Every rule
   below is scoped to .um-*, and .um-scroll is one class more specific than the
   clipping rule (the same escape hatch .gov-scroll uses). */
.admin-main .table-scroll.um-scroll,
.table-scroll.um-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.admin-main .um-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:14px 0 4px; }
.admin-main .um-search { flex:1 1 240px; max-width:360px; }
.admin-main .um-select { border:1px solid var(--line); background: var(--surface); color: var(--text); border-radius: var(--radius-sm); padding:7px 10px; font-size:12px; font-weight:600; cursor:pointer; }
.admin-main .um-select:focus-visible { outline:2px solid var(--brand); outline-offset:1px; }
.admin-main .um-result { font-size:11.5px; font-weight:650; color: var(--muted-2); font-variant-numeric:tabular-nums; margin-inline-start:auto; }
/* Fixed layout with widths tuned for THESE six columns. The original bug was not
   fixed layout — it was inheriting .agent-admin-table's widths, which describe a
   different seven-column table. Sized so the actions cell wraps to two tidy rows
   instead of one button per line, and so nothing needs more than a short scroll. */
.admin-main .um-table { width:100%; min-width:940px; table-layout:fixed; border-collapse:separate; border-spacing:0; }
.admin-main .um-table .um-c-person { width:260px; }
.admin-main .um-table th:nth-child(2), .admin-main .um-table td:nth-child(2) { width:158px; }
.admin-main .um-table th:nth-child(3), .admin-main .um-table td:nth-child(3) { width:126px; }
.admin-main .um-table th:nth-child(4), .admin-main .um-table td:nth-child(4) { width:76px; }
.admin-main .um-table th:nth-child(5), .admin-main .um-table td:nth-child(5) { width:130px; }
.admin-main .um-table thead th { font-size:10.5px; font-weight:700; color: var(--muted-2); letter-spacing:.05em; text-transform:uppercase;
  background: var(--surface-2); border-bottom:1px solid var(--surface-3); padding:12px 16px; text-align:start; white-space:nowrap; position:sticky; top:0; z-index:3; }
.admin-main .um-table tbody td { border-bottom:1px solid var(--line); padding:11px 16px; font-size:12.5px; vertical-align:middle; background: var(--surface); }
.admin-main .um-table tbody tr:last-child td { border-bottom:0; }
.admin-main .um-table tbody tr:hover td { background: var(--surface-2); }
/* Person stays pinned so you keep track of whose row you are on while the
   actions scroll into view on a narrow screen. */
.admin-main .um-table .um-c-person { position:sticky; inset-inline-start:0; z-index:2; width:270px; }
.admin-main .um-table thead .um-c-person { z-index:4; }
.admin-main .um-table .um-c-person::after { content:''; position:absolute; inset-block:0; inset-inline-end:0; width:14px; transform:translateX(100%); pointer-events:none;
  background:linear-gradient(to right, rgba(17,29,43,.06), transparent); opacity:0; transition:opacity .15s; }
html[dir="rtl"] .admin-main .um-table .um-c-person::after { background:linear-gradient(to left, rgba(17,29,43,.06), transparent); transform:translateX(-100%); }
.admin-main .um-scroll.is-scrolled .um-c-person::after { opacity:1; }
.admin-main .um-person { display:flex; align-items:center; gap:10px; min-width:0; }
.admin-main .um-avatar { width:34px; height:34px; border-radius:11px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  background: var(--brand-soft); color: var(--brand-fg); font-size:11.5px; font-weight:750; letter-spacing:.02em; }
.admin-main .um-avatar.is-super { background: var(--brand); color:#fff; box-shadow:0 0 0 2px var(--brand-soft); }
.admin-main .um-ptext { display:flex; flex-direction:column; gap:1px; min-width:0; }
.admin-main .um-pname { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color: var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-main .um-pmail { font-size:11px; color: var(--muted-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-main .um-you { flex:none; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color: var(--brand-fg); background: var(--brand-soft); border-radius:999px; padding:1px 6px; }
.admin-main .um-stack { display:flex; flex-direction:column; gap:3px; min-width:0; }
.admin-main .um-sub { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:10.5px; color: var(--muted-2); }
.admin-main .um-dept { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:130px; }
.admin-main .um-role { align-self:flex-start; font-size:11px; font-weight:700; border-radius:999px; padding:2px 9px; white-space:nowrap;
  background: var(--surface-3); color: var(--muted); }
.admin-main .um-role.is-admin { background: var(--brand-soft); color: var(--brand-fg); }
.admin-main .um-role.is-super { background: var(--brand); color:#fff; }
.admin-main .um-agents { display:inline-flex; align-items:baseline; font-size:12.5px; font-weight:700; color: var(--text); font-variant-numeric:tabular-nums; }
.admin-main .um-agents span { font-size:11px; font-weight:600; color: var(--muted-2); }
.admin-main .um-agents.is-zero { color: var(--muted-2); }
.admin-main .um-when { font-size:12px; font-weight:600; color: var(--text); white-space:nowrap; }
.admin-main .um-never { font-weight:600; color: var(--muted-2); }
/* Four states, four tones — 'deactivated' and 'suspended' are no longer the same
   grey chip, because switched-off and locked-out are different problems. */
.admin-main .um-table .status-pill { white-space:nowrap; }
.admin-main .status-pill.um-status-active { background: var(--success-soft); color: var(--success-strong); }
.admin-main .status-pill.um-status-draft { background: var(--warning-soft); color: var(--warning-strong); }
.admin-main .status-pill.um-status-off { background: var(--surface-3); color: var(--muted); }
.admin-main .status-pill.um-status-error { background: var(--danger-soft); color: var(--danger); }
/* Five actions per row. They wrap inside a narrow column rather than being pushed
   out to the right — an `margin-inline-start:auto` on the danger button stretched
   the cell wide enough to shove Delete past the scroll edge on every row. */
.admin-main .um-c-actions { width:190px; }
.admin-main .um-actions { display:flex; flex-wrap:wrap; gap:6px; }
.admin-main .um-actions .small-btn { white-space:nowrap; }
.admin-main .um-empty { padding:44px 20px !important; text-align:center; font-size:12.5px; color: var(--muted-2); }
.admin-main .um-empty strong { display:block; margin-bottom:12px; font-size:13.5px; font-weight:650; color: var(--text); }

/* Phone: one card per person instead of a six-column table. */
@media (max-width: 820px) {
  .admin-main .um-result { margin-inline-start:0; }
  /* Both axes, or the computed value of a lone `visible` silently becomes `auto`
     because the other axis is still `hidden`. */
  .admin-main .table-scroll.um-scroll { overflow-x:visible; overflow-y:visible; }
  .admin-main .um-table { min-width:0; display:block; }
  .admin-main .um-table thead { display:none; }
  .admin-main .um-table tbody,
  .admin-main .um-table tbody tr { display:block; }
  .admin-main .um-table tbody tr { border-bottom:1px solid var(--line); padding:14px 16px; }
  .admin-main .um-table tbody tr:last-child { border-bottom:0; }
  .admin-main .um-table tbody td { display:flex; align-items:center; justify-content:space-between; gap:12px; border:0; padding:5px 0; background:none !important; }
  .admin-main .um-table .um-c-person { position:static; width:auto; padding-bottom:10px; }
  .admin-main .um-table .um-c-person::after { display:none; }
  .admin-main .um-c-actions { width:auto; }
  .admin-main .um-actions { width:100%; }
  .admin-main .um-actions .small-btn.danger { margin-inline-start:0; }
}

/* ---- access ----
   The matrix is the densest screen in the admin, so it is built around three
   anchors: a sticky header and sticky user column (you never lose your place),
   a count on every agent and a coverage meter on every person (the grid reads as
   a distribution, not a wall of identical switches), and All/None on both axes
   scoped to whatever the filters currently show. Below 780px the same DOM folds
   into one card per person — no horizontal scrolling on a phone. */
.admin-main .ac-acc-top { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; }
.admin-main .ac-acc-titles { min-width:0; }
.admin-main .ac-acc-title { margin:0; font-size:19px; font-weight:750; letter-spacing:-.01em; color: var(--text); }
.admin-main .ac-acc-sub { margin:5px 0 0; font-size:12.5px; line-height:1.5; color: var(--muted); max-width:62ch; }
.admin-main .ac-acc-stats { display:flex; gap:8px; flex:none; }
.admin-main .ac-acc-stat { display:flex; flex-direction:column; gap:1px; padding:8px 14px; min-width:78px; border:1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); }
.admin-main .ac-acc-stat b { font-size:19px; font-weight:750; line-height:1.1; color: var(--text); font-variant-numeric:tabular-nums; }
.admin-main .ac-acc-stat i { font-style:normal; font-size:10px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color: var(--muted-2); }
.admin-main .ac-acc-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.admin-main .ac-acc-search { flex:1 1 220px; max-width:340px; }
.admin-main .ac-acc-clear { border:1px solid var(--line); background: var(--surface); color: var(--muted); border-radius:999px; padding:7px 14px; font-size:12px; font-weight:600; cursor:pointer; transition:color .15s, border-color .15s, background .15s; }
.admin-main .ac-acc-clear:hover { color: var(--brand-fg); border-color: var(--brand); background: var(--brand-soft); }
.admin-main .ac-acc-scopenote,
.admin-main .ac-acc-adminnote { display:flex; align-items:center; gap:7px; margin:12px 0 0; font-size:12px; color: var(--muted-2); }
.admin-main .ac-acc-adminnote svg { width:14px; height:14px; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; opacity:.75; }
.admin-main .ac-acc-card { background: var(--surface); border:1px solid var(--line); border-radius:16px; margin-top:14px; box-shadow: var(--shadow-sm); overflow:hidden; }
.admin-main .ac-acc-scroll { overflow-x:auto; overscroll-behavior-x:contain; }
.admin-main .ac-acc-grid { min-width:560px; }
.admin-main .ac-acc-head { display:grid; gap:10px; padding:12px 20px; border-bottom:1px solid var(--surface-3); align-items:end; position:sticky; top:0; z-index:3; background: var(--surface-2); }
.admin-main .ac-acc-hcol { font-size:10.5px; font-weight:700; color: var(--muted-2); letter-spacing:.05em; text-transform:uppercase; }
.admin-main .ac-acc-hagent { display:grid; grid-template-areas:'ic name' 'bulk bulk'; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:3px 7px; min-width:0; }
.admin-main .ac-acc-hagent .ac-acc-head-ic { grid-area:ic; }
.admin-main .ac-acc-hagent .ac-acc-hname { grid-area:name; }
.admin-main .ac-acc-hagent .ac-acc-hcount { grid-area:ic; justify-self:end; align-self:start; transform:translate(35%,-35%); }
.admin-main .ac-acc-hagent .ac-acc-bulkgroup { grid-area:bulk; }
/* The per-agent tally rides the avatar as a badge: it belongs to the agent, and
   keeping it out of the text row means a long agent name still gets the width. */
.admin-main .ac-acc-hcount { min-width:17px; height:17px; padding:0 4px; border-radius:999px; background: var(--brand); color:#fff; font-size:10px; font-weight:700; line-height:17px; text-align:center; font-variant-numeric:tabular-nums; box-shadow:0 0 0 2px var(--surface-2); }
.admin-main .ac-acc-hcount.is-zero { background: var(--surface-3); color: var(--muted-2); }
.admin-main .ac-acc-head-ic { width:24px; height:24px; border-radius:7px; flex:none; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; }
.admin-main .ac-acc-head-ic img { width:100%; height:100%; object-fit:cover; }
.admin-main .ac-acc-head-ic svg { width:13px; height:13px; }
.admin-main .ac-acc-hname { font-size:11px; font-weight:700; color:#1E293B; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-main .ac-acc-row { display:grid; gap:10px; padding:11px 20px; border-bottom:1px solid var(--line); align-items:center; transition:background .12s; }
.admin-main .ac-acc-row:last-child { border-bottom:none; }
.admin-main .ac-acc-row:hover { background: var(--surface-2); }
.admin-main .ac-acc-user { min-width:0; }
.admin-main .ac-acc-uname { font-size:12.5px; font-weight:700; color: var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-main .ac-acc-uemail { font-size:10.5px; color: var(--muted-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* The coverage meter is the signature of this screen: scanning the first column
   tells you the shape of access across the org before you read a single switch. */
.admin-main .ac-acc-ucover { display:flex; align-items:center; gap:8px; margin-top:6px; }
.admin-main .ac-acc-meter { position:relative; width:52px; height:4px; border-radius:999px; background: var(--surface-3); overflow:hidden; flex:none; }
.admin-main .ac-acc-meter-fill { position:absolute; inset-block:0; inset-inline-start:0; width: var(--ac-cover, 0%); background: var(--brand); border-radius:999px; transition:width .2s ease; }
.admin-main .ac-acc-covertext { font-size:10.5px; font-weight:700; color: var(--text); font-variant-numeric:tabular-nums; flex:none; }
.admin-main .ac-acc-covertext span { font-weight:600; color: var(--muted-2); }
.admin-main .ac-acc-covertext.is-zero { color: var(--muted-2); }
/* All/None stay out of the way until the row or column is engaged, so the grid
   reads calmly at rest — but they are always reachable by keyboard. */
.admin-main .ac-acc-bulkgroup { display:flex; gap:4px; opacity:0; transition:opacity .12s; }
.admin-main .ac-acc-row:hover .ac-acc-bulkgroup,
.admin-main .ac-acc-hagent:hover .ac-acc-bulkgroup,
.admin-main .ac-acc-bulkgroup:focus-within { opacity:1; }
.admin-main .ac-acc-bulk { border:1px solid var(--line); background: var(--surface); color: var(--muted); border-radius:999px; padding:1px 8px; font-size:10px; font-weight:650; cursor:pointer; transition:color .12s, border-color .12s, background .12s; }
.admin-main .ac-acc-bulk:hover { color: var(--brand-fg); border-color: var(--brand); background: var(--brand-soft); }
.admin-main .ac-acc-bulk:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.admin-main .ac-acc-cell { display:flex; align-items:center; }
.admin-main .ac-acc-cell-empty { font-size:11px; color: var(--muted-2); }
.admin-main .ac-acc-switch { position:relative; display:inline-flex; align-items:center; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.admin-main .ac-acc-input { position:absolute; opacity:0; width:0; height:0; margin:0; pointer-events:none; }
.admin-main .ac-acc-track { width:42px; height:24px; border-radius:999px; background: var(--faint); position:relative; flex:none; transition:background .15s; }
.admin-main .ac-acc-knob { width:18px; height:18px; border-radius:50%; background: var(--surface); position:absolute; top:3px; inset-inline-start:3px; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:inset-inline-start .15s; }
.admin-main .ac-acc-input:checked + .ac-acc-track { background:var(--success-strong); }
.admin-main .ac-acc-input:checked + .ac-acc-track .ac-acc-knob { inset-inline-start:21px; }
.admin-main .ac-acc-input:focus-visible + .ac-acc-track { outline:2px solid var(--brand); outline-offset:2px; }
.admin-main .ac-acc-empty { display:flex; flex-direction:column; align-items:center; gap:12px; padding:44px 20px; text-align:center; font-size:12.5px; color: var(--muted-2); }
.admin-main .ac-acc-empty strong { font-size:13.5px; font-weight:650; color: var(--text); }

/* Sticky user column. The row owns the vertical padding but NOT the leading
   inline padding — that lives on the sticky cell, so scrolled content passes
   under the pinned column instead of peeking through a 20px gutter. */
.admin-main .ac-acc-head,
.admin-main .ac-acc-row { padding-inline-start:0; }
.admin-main .ac-acc-row { background: var(--surface); }
.admin-main .ac-acc-hcol:first-child,
.admin-main .ac-acc-user { position:sticky; inset-inline-start:0; z-index:2; background:inherit; padding-inline-start:20px; }
.admin-main .ac-acc-hcol:first-child { z-index:4; }
.admin-main .ac-acc-hcol:first-child::after,
.admin-main .ac-acc-user::after { content:''; position:absolute; inset-block:0; inset-inline-end:0; width:14px; transform:translateX(100%); pointer-events:none;
  background:linear-gradient(to right, rgba(17,29,43,.06), transparent); opacity:0; transition:opacity .15s; }
html[dir="rtl"] .admin-main .ac-acc-hcol:first-child::after,
html[dir="rtl"] .admin-main .ac-acc-user::after { background:linear-gradient(to left, rgba(17,29,43,.06), transparent); transform:translateX(-100%); }
.admin-main .ac-acc-scroll.is-scrolled .ac-acc-hcol:first-child::after,
.admin-main .ac-acc-scroll.is-scrolled .ac-acc-user::after { opacity:1; }

/* Phone: the same DOM folds into one card per person. Each switch carries its
   agent name from data-agent-label, so nothing has to scroll sideways. */
@media (max-width: 780px) {
  .admin-main .ac-acc-top { align-items:flex-start; }
  .admin-main .ac-acc-stats { width:100%; }
  .admin-main .ac-acc-stat { flex:1; min-width:0; }
  .admin-main .ac-acc-scroll { overflow-x:visible; }
  .admin-main .ac-acc-grid { min-width:0 !important; }
  .admin-main .ac-acc-head { display:none; }
  .admin-main .ac-acc-row { display:block !important; padding:14px 16px; }
  .admin-main .ac-acc-user { position:static; padding-inline-start:0; border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:4px; }
  .admin-main .ac-acc-user::after { display:none; }
  .admin-main .ac-acc-bulkgroup { opacity:1; }
  .admin-main .ac-acc-cell { justify-content:space-between; gap:12px; padding:7px 0; }
  .admin-main .ac-acc-cell::before { content:attr(data-agent-label); font-size:12.5px; font-weight:600; color: var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .admin-main .ac-acc-cell-empty::before { content:none; }
}

/* ---- agent picker (user editor modal) ---- */
.app-modal .ap-field { display:block; }
.app-modal .ap-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:8px; }
.app-modal .ap-head > label { margin:0; }
.app-modal .ap-headright { display:flex; align-items:baseline; gap:10px; }
.app-modal .ap-count { font-size:11px; font-weight:650; color: var(--muted-2); font-variant-numeric:tabular-nums; }
.app-modal .ap-linkbtn { border:0; background:none; padding:0; font-size:11px; font-weight:650; color: var(--brand-fg); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.app-modal .ap-linkbtn:hover { color: var(--brand-2); }
.app-modal .ap-linkbtn:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:3px; }
.app-modal .ap-search { position:relative; display:flex; align-items:center; margin-bottom:8px; }
.app-modal .ap-search svg { position:absolute; inset-inline-start:11px; width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.9; color: var(--muted-2); pointer-events:none; }
.app-modal .ap-search input { width:100%; padding-inline-start:32px; }
.app-modal .ap-list { display:grid; gap:4px; max-height:230px; overflow-y:auto; padding:4px; border:1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); }
.app-modal .ap-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius: var(--radius-sm); border:1px solid transparent; cursor:pointer; transition:background .12s, border-color .12s; }
.app-modal .ap-item:hover { background: var(--surface); border-color: var(--line); }
.app-modal .ap-item input { position:absolute; opacity:0; width:0; height:0; margin:0; pointer-events:none; }
.app-modal .ap-ic { width:28px; height:28px; border-radius:9px; flex:none; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; }
.app-modal .ap-ic img { width:100%; height:100%; object-fit:cover; }
.app-modal .ap-ic svg { width:15px; height:15px; }
.app-modal .ap-text { display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.app-modal .ap-name { font-size:12.5px; font-weight:650; color: var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app-modal .ap-meta { font-size:10.5px; color: var(--muted-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app-modal .ap-mark { width:19px; height:19px; border-radius:6px; border:1.5px solid var(--line); background: var(--surface); flex:none; display:inline-flex; align-items:center; justify-content:center; transition:background .12s, border-color .12s; }
.app-modal .ap-mark svg { width:12px; height:12px; stroke:#fff; fill:none; stroke-width:2.6; opacity:0; transition:opacity .12s; }
/* The checkbox is the first child, so every visual affordance can hang off a
   sibling selector. :has() only carries the container tint, which is the one part
   that degrades harmlessly if it is unsupported. */
.app-modal .ap-item input:checked ~ .ap-text .ap-name { color: var(--brand-fg); }
.app-modal .ap-item input:checked ~ .ap-mark { background: var(--brand); border-color: var(--brand); }
.app-modal .ap-item input:checked ~ .ap-mark svg { opacity:1; }
.app-modal .ap-item:has(input:checked) { background: var(--brand-soft); border-color: var(--brand); }
.app-modal .ap-item:has(input:focus-visible) { outline:2px solid var(--brand); outline-offset:1px; }
.app-modal .ap-empty { margin:8px 0 0; font-size:11.5px; color: var(--muted-2); text-align:center; }
@media (prefers-reduced-motion: reduce) {
  .admin-main .ac-acc-meter-fill,
  .admin-main .ac-acc-bulkgroup,
  .app-modal .ap-item,
  .app-modal .ap-mark,
  .app-modal .ap-mark svg { transition:none; }
}
/* =====================================================================
   Collapsed admin sidebar fixes: no visible scrollbar, brand mark and
   toggle stacked (no overlap), compact vertical language switch.
   ===================================================================== */
/* Brand: stack the "N" mark over the toggle, centered — no overlap. */
.admin-sidebar.collapsed .hub-sidebar-brand {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 0 4px;
}
.admin-sidebar.collapsed .hub-sidebar-brandmark { justify-content: center; gap: 0; width: 100%; }
.admin-sidebar.collapsed .brand-text { display: none; }
.admin-sidebar.collapsed .brand-mark { margin: 0; }
.admin-sidebar.collapsed .sidebar-toggle { margin: 0; }

/* Hide the nav scrollbar while collapsed (still scrolls by wheel/trackpad). */
.admin-sidebar.collapsed .hub-sidebar-nav { scrollbar-width: none; }
.admin-sidebar.collapsed .hub-sidebar-nav::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Footer: center the collapsed content. */
.admin-sidebar.collapsed .hub-sidebar-footer { padding: 12px 4px 8px; justify-items: center; }
.admin-sidebar.collapsed .hub-user-mini { padding: 0; justify-content: center; }

/* Language switch: two compact pills stacked vertically to fit 68px. */
.admin-sidebar.collapsed .language-selector.sidebar-language {
  flex-direction: column;
  width: 44px;
  padding: 3px;
  gap: 3px;
}
.admin-sidebar.collapsed .language-selector.sidebar-language .lang-option {
  width: 100%;
  padding: 6px 2px;
  font-size: 10px;
  line-height: 1.1;
  text-align: center;
}

/* Collapsed brand column: nothing may flex-shrink below its content, so the
   mark and toggle can never overlap regardless of viewport height. */
.admin-sidebar.collapsed .hub-sidebar-brand { flex: 0 0 auto; min-height: 0; }
.admin-sidebar.collapsed .hub-sidebar-brandmark { flex: 0 0 auto; }
.admin-sidebar.collapsed .sidebar-toggle { flex: 0 0 auto; }

/* =====================================================================
   Merged Admin Dashboard — sections + loading skeletons.
   ===================================================================== */
.admin-main .ac-section { margin-top: 26px; }
.admin-main .ac-section:first-child { margin-top: 4px; }
.admin-main .ac-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.admin-main .ac-section-title { font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
/* Section tiles/grids drop their own top margin — the section owns spacing. */
.admin-main .ac-section .admin-stat-grid { margin-bottom: 14px; }
.admin-main .ac-section .ac-quick { margin-top: 0; }
.admin-main .ac-section .ac-tiles { margin-top: 0; }
.admin-main .ac-section .ac-charts { margin-top: 0; }
.admin-main .ac-section .ac-leader-card { margin-top: 20px; }

/* Loading skeletons (shimmer) */
.admin-main .ac-skel { pointer-events: none; }
.admin-main .ac-skel-line { display: block; border-radius: 6px; background: linear-gradient(90deg, #EEF2F6 25%, #F6F9FC 37%, #EEF2F6 63%); background-size: 400% 100%; animation: acShimmer 1.3s ease infinite; }
.admin-main .ac-skel-line.sm { width: 45%; height: 11px; margin-bottom: 12px; }
.admin-main .ac-skel-line.lg { width: 68%; height: 24px; }
.admin-main .ac-skel-bar { height: 12px; border-radius: 999px; margin: 12px 0; background: linear-gradient(90deg, #EEF2F6 25%, #F6F9FC 37%, #EEF2F6 63%); background-size: 400% 100%; animation: acShimmer 1.3s ease infinite; }
.admin-main .ac-skel-bar:nth-child(2) { width: 100%; }
.admin-main .ac-skel-bar:nth-child(3) { width: 82%; }
.admin-main .ac-skel-bar:nth-child(4) { width: 64%; }
.admin-main .ac-skel-bar:nth-child(5) { width: 48%; }
.admin-main .ac-skel-bar:nth-child(6) { width: 33%; }
@keyframes acShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .admin-main .ac-skel-line, .admin-main .ac-skel-bar { animation: none; }
}

/* ============================================================
   Agent Hub v2 — user-facing refinements (Home preview, stat
   cards, capability pills, calendar accents). Scoped to user
   classes so the admin console is unaffected.
   ============================================================ */

/* Home: "Today's schedule" + "Priority tasks" preview band */
.home-preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.home-preview-grid.single { grid-template-columns: minmax(0, 560px); }
.home-mini-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.home-mini-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--surface-3); }
.home-mini-head h3 { margin: 0; font-size: 14.5px; font-weight: 700; }
.home-mini-list { display: flex; flex-direction: column; }
.home-ev-row, .home-ft-row { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border: 0; border-bottom: 1px solid #F4F6F9; background: var(--surface); cursor: pointer; text-align: start; width: 100%; font: inherit; }
.home-ev-row:last-child, .home-ft-row:last-child { border-bottom: 0; }
.home-ev-row:hover, .home-ft-row:hover { background: var(--surface-2); }
.home-ev-row:focus-visible, .home-ft-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.home-ev-time { flex: none; min-width: 58px; font-size: 12.5px; font-weight: 800; color: var(--text); }
.home-ev-bar { width: 3px; align-self: stretch; border-radius: 3px; flex: none; min-height: 30px; }
.home-ev-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.home-ev-body strong { font-size: 13px; font-weight: 700; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-ev-body small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-ft-check { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--faint); flex: none; }
.home-ft-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.home-ft-body strong { font-size: 12.5px; font-weight: 600; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-ft-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.home-ft-meta .priority { font-size: 10px; padding: 2px 8px; }
.home-ft-due-urgent { color: #B42318; font-weight: 700; }
.home-ft-agent { color: var(--soft); }
.home-mini-empty { padding: 30px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.home-mini-empty-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-fg); }
.home-mini-empty-ic.ok { background: var(--success-soft); color: var(--success-strong); }
.home-mini-empty strong { font-size: 13.5px; font-weight: 700; }
.home-mini-empty .btn.ghost { padding: 7px 16px; font-size: 12px; }
@media (max-width: 1024px) { .home-preview-grid { grid-template-columns: minmax(0, 1fr); } }

/* v2 home stat icon tile: slightly larger, tighter number */
.home-stat-ic { width: 46px; height: 46px; }
.home-stat-value { font-size: 23px; font-weight: 800; letter-spacing: -.02em; }

/* Module summary stat row (Tasks) — border-top accent cards */
/* Agent capability pills (My Agents cards) */
.agent-caps { display: flex; gap: 6px; flex-wrap: wrap; }
.agent-caps .cap { font-size: 10.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--surface-3); color: var(--muted); white-space: nowrap; }
.agent-caps .cap.cap-blue { background: var(--brand-soft); color: var(--brand-fg); }
/* The only chip of the four with a literal background — cap-blue, cap-green and
   cap-gray all use soft tokens. That fixed pale cyan left the label at 2.25:1 on
   the dark surface; it also never cleared AA in the white and red themes (4.43),
   so this chip has been failing since it shipped and only the naseej theme
   carried it.
   Background mixes the accent into the CURRENT surface, as the other three do.
   The label is pulled 15% toward --text, which darkens it on a light theme and
   lightens it on a dark one: that is what buys the contrast while leaving the
   chip visibly cyan. Measured across all four themes: 5.18 / 4.84 / 4.90 / 6.22.
   Tint alone could not do it — the strongest passing tint was 4%, which is too
   faint to read as a chip at all. */
.agent-caps .cap.cap-cyan {
  background: color-mix(in srgb, var(--accent-2) 14%, var(--surface));
  color: color-mix(in srgb, var(--accent-2) 85%, var(--text));
}
.agent-caps .cap.cap-green { background: var(--success-soft); color: var(--success-strong); }
.agent-caps .cap.cap-gray { background: var(--surface-3); color: var(--muted); }

/* Calendar meeting card: v2 leading accent from the source agent */
.meeting-card { border-inline-start: 4px solid var(--card-accent, var(--brand)); }

/* ============================================================================
   Agent Hub v2 — user shell chrome (source: Agent Hub v2.dc.html)

   Scoped to .user-hub-shell throughout: the admin console keeps its own navy
   sidebar and 17-destination drawer, which a 5-slot bottom bar cannot express.

   Breakpoint note: the source design switches at 860px, but app.js already
   gates drawer behaviour on matchMedia (max-width: 900px). We use 900px in
   both so JS and CSS agree — a split would leave 860-900px with a phone
   layout driven by desktop JS.
   ========================================================================== */

:root {
  --hub-navy: #0F2A43;
  --hub-navy-ink: #EAF1F7;
  --hub-navy-dim: #B9CBDA;
  --hub-navy-mute: #95AEC4;
  --hub-navy-idle: #A8BDD0;
  --hub-cyan: #00A6C8;
}

/* ---------- Desktop sidebar: dark navy rail ---------- */
.user-hub-shell .hub-sidebar {
  width: 256px;
  flex-basis: 256px;
  background: var(--hub-navy);
  border-right: 1px solid rgba(255, 255, 255, .06);
  border-left: 0;
  padding: 20px 14px 18px;
  gap: 0;
  white-space: nowrap;
}

html[dir="rtl"] .user-hub-shell .hub-sidebar {
  border-right: 0;
  border-left: 1px solid rgba(255, 255, 255, .06);
}

.user-hub-shell .hub-sidebar.collapsed {
  width: 76px;
  flex-basis: 76px;
}

.user-hub-shell .hub-sidebar-brand {
  padding: 0 6px;
  min-height: 36px;
}

.user-hub-shell .hub-sidebar-brand img {
  height: 19px;
  max-width: 132px;
  background: var(--surface);
  border-radius: 9px;
  padding: 6px 11px;
  box-sizing: content-box;
}

/* Collapsed rail keeps a brand presence via the monogram tile.
   :not(.user-chat-shell) is required: on phones the aside keeps .collapsed even
   inside the agent-chat drawer, and that drawer restores the full logo. Without
   the exclusion the drawer header paints the monogram AND the logo, stacked. */
.user-hub-shell:not(.user-chat-shell) .hub-sidebar.collapsed .hub-sidebar-brand {
  flex-direction: column;
  gap: 14px;
}

.user-hub-shell:not(.user-chat-shell) .hub-sidebar.collapsed .hub-sidebar-brand::before {
  content: "N";
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand), var(--accent-2));
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  display: grid;
  place-items: center;
  flex: none;
}

.user-hub-shell .sidebar-toggle {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .08);
  color: var(--hub-navy-dim);
}

.user-hub-shell .sidebar-toggle:hover {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

.user-hub-shell .hub-sidebar-nav {
  margin-top: 26px;
  gap: 4px;
}

.user-hub-shell .hub-nav-item {
  padding: 11px 13px;
  border-radius: 11px;
  border-color: transparent;
  background: transparent;
  color: var(--hub-navy-dim);
  font-size: 13.5px;
  font-weight: 600;
}

.user-hub-shell .hub-nav-item:hover {
  background: rgba(255, 255, 255, .07);
  color: #fff;
}

.user-hub-shell .hub-nav-item.active,
.user-hub-shell .hub-nav-item.active:hover {
  background: rgba(255, 255, 255, .14);
  border-color: transparent;
  color: #fff;
  font-weight: 700;
  box-shadow: none;
}

.user-hub-shell .hub-nav-item:focus-visible {
  outline: 2px solid var(--hub-cyan);
  outline-offset: -2px;
}

/* ---------- Sidebar footer ---------- */
.user-hub-shell .hub-sidebar-footer {
  gap: 12px;
  padding-top: 0;
  border-top: 0;
}

.hub-sidebar-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-size: 11px;
  font-weight: 600;
  color: var(--hub-navy-mute);
  letter-spacing: .02em;
}

.hub-sidebar-status .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hub-cyan);
  flex: none;
}

.user-hub-shell .hub-user-mini {
  gap: 11px;
  padding: 2px 6px;
}

.user-hub-shell .hub-user-mini .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-2);
  color: var(--brand-soft);
  font-weight: 700;
  font-size: 13.5px;
}

.user-hub-shell .hub-user-mini strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--hub-navy-ink);
}

.user-hub-shell .hub-user-mini span {
  font-size: 11px;
  color: var(--hub-navy-mute);
}

.user-hub-shell .hub-sidebar.collapsed .hub-user-mini {
  justify-content: center;
}

/* Language pill inside the navy rail */
.user-hub-shell .hub-sidebar-footer .language-selector {
  display: flex;
  background: rgba(255, 255, 255, .08);
  border: 0;
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}

.user-hub-shell .hub-sidebar-footer .lang-option {
  flex: 1;
  padding: 7px 4px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--hub-navy-dim);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}

.user-hub-shell .hub-sidebar-footer .lang-option.active {
  background: var(--surface);
  /* Was var(--hub-navy) — a FIXED brand navy paired with a themed background.
     In the dark theme --surface resolves to almost exactly that navy, so this
     measured 1.00:1: the selected language was drawn in its own background
     colour and simply disappeared. --text is defined against --surface in
     every theme, which is what the token is for. */
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

.user-hub-shell .hub-sidebar-footer .btn.secondary {
  border: 1.5px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .06);
  color: var(--hub-navy-ink);
  border-radius: 999px;
  font-weight: 700;
  font-size: 12.5px;
}

.user-hub-shell .hub-sidebar-footer .btn.secondary:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .34);
}

.user-hub-shell .hub-sidebar.collapsed .hub-sidebar-status,
.user-hub-shell .hub-sidebar.collapsed .hub-sidebar-footer .language-selector {
  display: none;
}

/* The agent-workspace drawer is a FULL-WIDTH rail that happens to keep the
   .collapsed class (phones force sidebarCollapsed=true), and it already restores
   the nav labels. Without these it renders as a wide panel wearing collapsed-rail
   clothes: labelled items centre-justified, and no status row or language pill —
   which in chat is the only place either can appear. */
.user-chat-shell.sidebar-open .hub-sidebar.collapsed .hub-nav-item,
.user-chat-shell.sidebar-open .hub-sidebar.collapsed .hub-user-mini {
  justify-content: flex-start;
}

.user-chat-shell.sidebar-open .hub-sidebar.collapsed .hub-sidebar-status,
.user-chat-shell.sidebar-open .hub-sidebar.collapsed .hub-sidebar-footer .language-selector {
  display: flex;
}

/* The collapsed rail's monogram tile must not stack above the restored logo. */
.user-chat-shell.sidebar-open .hub-sidebar.collapsed .hub-sidebar-brand {
  flex-direction: row;
}

.user-chat-shell.sidebar-open .hub-sidebar.collapsed .hub-sidebar-brand::before {
  content: none;
}

/* ---------- Mobile chrome (hidden on desktop) ---------- */
.hub-mobile-topbar,
.hub-bottom-nav {
  display: none;
}

/* ---------- Settings page ---------- */
.settings-page {
  max-width: 680px;
}

.settings-card {
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  margin-top: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-card-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.settings-card-head strong {
  font-size: 14px;
  font-weight: 700;
}

.settings-card-head span {
  font-size: 12px;
  color: var(--muted, var(--muted));
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* Also covers .settings-speed-head, whose label block has the same shape —
   without it the title and hint run together on one line. */
.settings-row > div strong,
.settings-speed-head > div strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.settings-row > div span,
.settings-speed-head > div span {
  display: block;
  font-size: 11.5px;
  color: var(--muted, var(--muted));
  margin-top: 2px;
}

/* The speed control stacks (label+value row, then a full-width track) rather
   than sitting side-by-side: at 375px a side-by-side track left the label
   column so narrow that "Playback speed" wrapped to two lines and its hint to
   four. This matches the source design. */
.settings-speed {
  display: block;
}

.settings-speed-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.settings-speed-head em {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand, var(--brand));
  flex: none;
}

.settings-speed input[type="range"] {
  display: block;
  width: 100%;
  margin-top: 10px;
  accent-color: var(--brand, var(--brand));
}

.settings-themes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.settings-account {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.settings-page .language-selector {
  max-width: 300px;
}

/* ---------- Phone layout ---------- */
@media (max-width: 900px) {
  /* The navy rail is replaced wholesale by the top bar + bottom tab bar, so the
     drawer, its scrim and the hamburger are all retired on the browse screens.
     :not(.user-chat-shell) is load-bearing — the agent workspace has no bottom
     bar and still reaches navigation through the slide-in drawer
     (.user-chat-shell.sidebar-open .hub-sidebar). Without the exclusion this
     !important would beat that rule and strand mobile chat with no nav at all. */
  .user-hub-shell:not(.user-chat-shell) .hub-sidebar,
  .user-hub-shell:not(.user-chat-shell) .hub-sidebar.collapsed,
  .user-hub-shell:not(.user-chat-shell) .mobile-sidebar-toggle,
  .user-hub-shell:not(.user-chat-shell) .mobile-sidebar-scrim,
  .user-hub-shell:not(.user-chat-shell) .hub-floating-actions {
    display: none !important;
  }

  .user-hub-shell {
    flex-direction: column;
    min-height: 100vh;
  }

  .hub-mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--hub-navy);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    position: sticky;
    top: 0;
    z-index: 60;
    flex: none;
  }

  /* The brand is the elastic half of the bar and the actions cluster is the
     rigid one: two language pills plus two 32px buttons have a hard minimum of
     ~180px, so at 320px something has to give. The white pill therefore moves
     from the <img> to its wrapper (border-box, so its padding is inside the
     shrinkable width) and the logo scales down inside it via object-fit. Before
     this the img's fixed size floored .hub-mobile-brand at 114px, the row's
     min-content came to 350px, and the whole page scrolled 14px sideways. */
  .hub-mobile-brand {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    box-sizing: border-box;
    background: var(--surface);
    border-radius: 8px;
    padding: 5px 9px;
  }

  .hub-mobile-brand img {
    height: 17px;
    width: auto;
    max-width: 100%;
    min-width: 0;
    object-fit: contain;
    display: block;
  }

  /* flex: none is load-bearing — it keeps the controls at full size and hands
     the shrinking to the brand instead of squeezing a tap target. */
  .hub-mobile-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
  }

  .hub-mobile-actions .language-selector {
    display: flex;
    background: rgba(255, 255, 255, .1);
    border: 0;
    border-radius: 999px;
    padding: 2px;
    gap: 2px;
  }

  .hub-mobile-actions .lang-option {
    padding: 5px 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--hub-navy-dim);
    font-weight: 700;
    font-size: 11px;
    cursor: pointer;
  }

  .hub-mobile-actions .lang-option.active {
    background: var(--surface);
    /* Was var(--hub-navy), a fixed brand navy. In the dark theme --surface
       resolves to almost exactly that navy, so the pill measured 1.00:1 —
       foreground and background were the SAME colour and the active language
       was completely invisible. --text is defined against --surface in every
       theme, which is the whole point of the token. */
    color: var(--text);
  }

  .hub-mobile-avatar {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: var(--brand-2);
    color: var(--brand-soft);
    font-weight: 700;
    font-size: 12.5px;
    cursor: pointer;
    display: grid;
    place-items: center;
    flex: none;
  }

  /* The old layout reserved ~62px at the top of .hub-main and ~58px on .hub-page
     as clearance for the fixed hamburger button. The top bar now occupies that
     space in normal flow, so the reservations become a dead gap above the hero.
     Selector is .hub-shell.user-hub-shell to match the (0,3,0) specificity of the
     clearance rule it overrides, and :not(.user-chat-shell) keeps it away from
     the full-bleed agent workspace, which sets its own padding:0. */
  .hub-shell.user-hub-shell:not(.user-chat-shell) .hub-main {
    height: auto;
    flex: 1;
    min-height: 0;
    padding-top: 18px;
  }

  .user-hub-shell:not(.user-chat-shell) .hub-page {
    padding-top: 20px;
  }

  .hub-bottom-nav {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 2px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: var(--hub-navy);
    border-top: 1px solid rgba(255, 255, 255, .06);
    position: sticky;
    bottom: 0;
    z-index: 60;
    flex: none;
  }

  .hub-bottom-item {
    flex: 1;
    max-width: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 7px 4px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--hub-navy-idle);
    cursor: pointer;
  }

  .hub-bottom-item.active {
    background: rgba(255, 255, 255, .14);
    color: #fff;
  }

  .hub-bottom-item:focus-visible {
    outline: 2px solid var(--hub-cyan);
    outline-offset: -2px;
  }

  .hub-bottom-icon {
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
  }

  .hub-bottom-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .hub-bottom-label {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
  }

  .settings-account {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---------- Narrow phones (320px class) ----------
   Must follow the max-width: 900px block: same specificity, so source order
   decides. The rules above already guarantee the bar fits by shrinking the
   logo; these buy the width back from padding and gaps instead, so the logo
   only gives up ~7% at 320px rather than half its size. Nothing here touches a
   control's height or its horizontal extent below 24px — the language pills
   stay 27px tall and ~44px wide, the bell and avatar stay 32x32 (WCAG 2.2
   AA SC 2.5.8). */
@media (max-width: 360px) {
  .hub-mobile-topbar {
    padding: 12px 12px;
    gap: 8px;
  }

  .hub-mobile-actions {
    gap: 6px;
  }

  .hub-mobile-actions .lang-option {
    padding: 5px 8px;
  }
}

/* ---------- Home hero: navy gradient card (design lines 129-137) ----------
   An earlier pass flattened this to a plain light heading; the v2 source and the
   approved screens both show a deep navy gradient card with two soft blooms. */
.user-hub-shell .home-hero {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 26px 28px;
  background: linear-gradient(115deg, var(--admin-navy) 0%, var(--brand) 60%, var(--brand) 100%);
  color: #fff;
  box-shadow: 0 14px 34px rgba(var(--brand-rgb), .26);
}

.user-hub-shell .home-hero::before,
.user-hub-shell .home-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.user-hub-shell .home-hero::before {
  inset-block-start: -72px;
  inset-inline-end: -38px;
  width: 236px;
  height: 236px;
  background: rgba(255, 255, 255, .06);
}

.user-hub-shell .home-hero::after {
  inset-block-end: -96px;
  inset-inline-end: 96px;
  width: 176px;
  height: 176px;
  background: rgba(255, 255, 255, .045);
}

.user-hub-shell .home-hero-main {
  position: relative;
  z-index: 1;
}

.user-hub-shell .home-eyebrow {
  color: var(--brand-soft);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  margin-bottom: 0;
}

.user-hub-shell .home-hero h1 {
  color: #fff;
  font-size: clamp(21px, 1.8vw, 25px);
  margin: 8px 0 0;
}

.user-hub-shell .home-hero p {
  color: var(--brand-soft);
  font-size: 14.5px;
  line-height: 1.5;
  max-width: 520px;
  margin-top: 6px;
}

@media (max-width: 900px) {
  .user-hub-shell .home-hero {
    padding: 22px 20px;
  }
}

/* ---------- Aggregate stat tiles retuned to the v2 palette ----------
   The tiles already existed with the right shape (3px colour top, 4-up grid);
   these are the design's exact accents. The design tints only the two attention
   numbers — Total and Agents keep the default ink so the eye lands on what
   actually needs action. */
/* The design sizes these tiles intrinsically rather than via a breakpoint
   ladder. The fixed ladder collapsed them to a single column below 640px, so a
   phone showed four stacked tiles (~300px) and pushed every actual task below
   the fold. auto-fit/minmax gives 4-up on desktop, 2x2 on a phone, and 1-up
   only when genuinely too narrow. Specificity beats the media rules above; no
   extra breakpoint needed. */
.user-hub-shell .agg-stat-row {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}

.user-hub-shell .agg-stat-total  { border-top-color: var(--brand-fg); }
.user-hub-shell .agg-stat-total  strong { color: var(--text); }
.user-hub-shell .agg-stat-agents { border-top-color: var(--accent-2); }
.user-hub-shell .agg-stat-agents strong { color: var(--text); }
.user-hub-shell .agg-stat-high   { border-top-color: #B42318; }
.user-hub-shell .agg-stat-high   strong { color: #B42318; }
.user-hub-shell .agg-stat-soon   { border-top-color: #B54708; }
.user-hub-shell .agg-stat-soon   strong { color: #B54708; }

/* ---------- Daily spend cap: blocked banner + near-limit meter ----------
   Amber, not red: the user has done nothing wrong and the state is recoverable
   by asking. Red is reserved for genuine errors. */
.cost-banner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 12px;
  padding: 14px 16px;
  border: 1px solid #FDBA74;
  border-inline-start: 4px solid #B54708;
  border-radius: 14px;
  background: #FFF9F0;
  color: #7C2D12;
}

.cost-banner-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cost-banner-icon {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #FFF4E5;
  color: #B54708;
}

.cost-banner-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cost-banner-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cost-banner-body strong { font-size: 13.5px; font-weight: 700; }
.cost-banner-body span { font-size: 12px; color: #9A3412; }

.cost-banner-pending {
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  color: #B54708;
  background: #FFF4E5;
  border-radius: 999px;
  padding: 6px 12px;
}

.cost-banner-form { display: flex; flex-direction: column; gap: 8px; }

.cost-banner-form textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid #FDBA74;
  border-radius: 10px;
  padding: 9px 11px;
  font: inherit;
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
}

.cost-banner-form textarea:focus-visible {
  outline: 2px solid #B54708;
  outline-offset: -1px;
}

.cost-banner-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Near-limit meter — only appears past 80%, so it stays quiet until it matters. */
.cost-meter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: #92400E;
}

.cost-meter-track {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: #FDE7CE;
  overflow: hidden;
}

.cost-meter-fill {
  height: 100%;
  border-radius: 999px;
  background: #B54708;
  transition: width .2s ease;
}

@media (max-width: 600px) {
  .cost-banner-row { align-items: flex-start; }
  .cost-banner-row .btn { width: 100%; }
  .cost-banner-row { flex-wrap: wrap; }
  .cost-banner-actions .btn { flex: 1; }
}

/* ---------- Admin: cost request queue ---------- */
.cost-request-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  margin-bottom: 10px;
}

.cost-request-main { flex: 1; min-width: 0; }
.cost-request-main strong { display: block; font-size: 13.5px; }
.cost-request-main span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.cost-request-reason { font-style: italic; }

.cost-request-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.cost-request-actions input[type="number"] {
  width: 84px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  font: inherit;
  font-size: 13px;
}

@media (max-width: 700px) {
  .cost-request-row { flex-direction: column; align-items: stretch; }
  .cost-request-actions { flex-wrap: wrap; }
  .cost-request-actions input[type="number"] { flex: 1; width: auto; }
}

/* Mobile top-bar notification bell. Lives here because the legacy floating bell
   is hidden at every width, which left "N unread" with nothing to click. */
.hub-mobile-bell {
  display: none;
}

@media (max-width: 900px) {
  .hub-mobile-bell {
    position: relative;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: var(--hub-navy-dim);
    cursor: pointer;
    display: grid;
    place-items: center;
    flex: none;
  }

  .hub-mobile-bell:hover { background: rgba(255, 255, 255, .18); color: #fff; }

  .hub-mobile-bell:focus-visible {
    outline: 2px solid var(--hub-cyan);
    outline-offset: 2px;
  }

  .hub-mobile-bell svg { width: 17px; height: 17px; }

  .hub-mobile-bell-dot {
    position: absolute;
    top: 5px;
    inset-inline-end: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #F97066;
    border: 1.5px solid var(--hub-navy);
  }
}

/* ============================================================================
   Analytics + Usage & cost (source: Admin Console.dc.html)
   Colour roles from the design: calls = brand blue, cost = violet.
   ========================================================================== */

.ana-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.ana-controls-spacer { flex: 1; min-width: 12px; }

.ana-seg {
  display: inline-flex;
  background: var(--surface-3);
  border-radius: 12px;
  padding: 4px;
  gap: 2px;
}

.ana-seg-btn {
  border: 0;
  cursor: pointer;
  padding: 7px 16px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
  background: transparent;
  color: var(--muted);
  transition: background .15s, color .15s;
}

.ana-seg-btn.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(15, 23, 42, .16); }
.ana-seg.dark .ana-seg-btn.active { background: var(--admin-navy); color: #fff; box-shadow: none; }
.ana-seg-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ---------- stat tiles (shared by both screens) ---------- */
.ana-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: 14px;
  margin-top: 16px;
}

.ana-tile {
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-top: 3px solid var(--tile-accent, var(--brand));
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.ana-tile-label { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.ana-tile-value { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin-top: 4px; }
.ana-tile-hint { font-size: 11px; color: var(--muted-2); font-weight: 600; margin-top: 2px; }

.ana-card-title { font-size: 15px; font-weight: 700; margin-bottom: 16px; }
.ana-chart-card { margin-top: 20px; }

/* ---------- trend chart ---------- */
.ana-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 190px;
  margin-top: 20px;
  overflow-x: auto;
}

.ana-bar-col {
  flex: 1;
  min-width: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  height: 100%;
  justify-content: flex-end;
}

.ana-bar-val { font-size: 10px; font-weight: 800; color: var(--text); white-space: nowrap; }

.ana-bar {
  width: 100%;
  max-width: 48px;
  border-radius: 7px 7px 3px 3px;
  background: var(--brand-soft);
}

.ana-bar.cost { background: #E3D9F6; }
.ana-bar.calls.peak { background: linear-gradient(180deg, var(--accent-2), var(--brand)); }
.ana-bar.cost.peak { background: linear-gradient(180deg, var(--accent-5), var(--accent-5)); }

.ana-bar-label {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--muted-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ---------- two-column card rows ---------- */
.ana-two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 20px;
  margin-top: 20px;
  align-items: start;
}

.ana-bar-row + .ana-bar-row { margin-top: 13px; }

.ana-bar-row-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.ana-bar-row-head span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ana-bar-row-head strong { font-weight: 800; flex: none; }
.ana-bar-row-head strong.calls { color: var(--brand-fg); }
.ana-bar-row-head strong.cost { color: var(--accent-5); }

.ana-track {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-3);
  margin-top: 5px;
  overflow: hidden;
}

.ana-fill { height: 100%; border-radius: 999px; }
.ana-fill.calls { background: linear-gradient(90deg, var(--brand), var(--accent-2)); }
.ana-fill.cost { background: linear-gradient(90deg, var(--accent-5), var(--accent-5)); }

/* ---------- per-user rows ---------- */
.ana-user-row { display: flex; align-items: center; gap: 12px; }
.ana-user-row + .ana-user-row { margin-top: 16px; }
.ana-user-main { flex: 1; min-width: 0; }

.ana-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-weight: 800;
  font-size: 13px;
  display: grid;
  place-items: center;
  flex: none;
}

.ana-avatar.calls { background: var(--brand-soft); color: var(--brand-fg); }
.ana-avatar.cost { background: #F4EBFF; color: var(--accent-5); }
.ana-user-meta { font-size: 10.5px; color: var(--muted-2); font-weight: 600; margin-top: 4px; }

/* ---------- leaderboard ---------- */
.ana-table-card { margin-top: 20px; padding-inline: 0; }
.ana-table-card .ana-card-title { padding-inline: 20px; }
.ana-table-scroll { overflow-x: auto; }
.ana-table { min-width: 600px; }

.ana-tr {
  display: grid;
  grid-template-columns: 2fr .8fr .9fr .8fr 1fr;
  gap: 10px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--line);
  align-items: center;
  font-size: 12.5px;
}

.ana-th {
  padding: 12px 20px;
  border-bottom: 1px solid #EEF2F6;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted-2);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.ana-td-agent { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 700; }
.ana-td-agent span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ana-td-ic {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--brand-fg);
  display: grid;
  place-items: center;
  flex: none;
}

.ana-td-ic svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.ana-td-calls { font-weight: 800; color: var(--brand-fg); }
.ana-td-cost { font-weight: 800; color: var(--accent-5); }
.ana-td-err { font-weight: 700; color: #B54708; }
.ana-td-noerr { font-weight: 700; color: var(--muted-2); }
.ana-td-p95 { color: var(--muted); font-weight: 600; }

/* ============================================================================
   Usage & cost
   ========================================================================== */
.cu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 16px;
  margin-top: 20px;
}

.cu-card {
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cu-head { display: flex; align-items: flex-start; gap: 12px; }

.cu-ic {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand-fg);
}

.cu-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; }
.cu-head-main { min-width: 0; flex: 1; }
.cu-name { font-weight: 700; font-size: 14px; line-height: 1.35; }
.cu-meta { font-size: 11.5px; color: var(--muted); margin-top: 3px; }

.cu-chip {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  flex: none;
  white-space: nowrap;
}

.cu-chip.ok { background: var(--success-soft); color: var(--success-strong); }
.cu-chip.near { background: #FFF4E5; color: #B54708; }
.cu-chip.over { background: #FEE4E2; color: #B42318; }
.cu-chip.off { background: var(--surface-3); color: var(--muted); }

.cu-usage {
  background: var(--surface-2);
  border: 1px solid #EEF2F6;
  border-radius: 13px;
  padding: 14px 15px;
}

.cu-usage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }

.cu-usage-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted-2);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.cu-usage-nums { font-size: 13px; font-weight: 800; color: var(--text); flex: none; }
.cu-usage-nums strong { color: var(--brand-fg); }

.cu-track {
  height: 9px;
  border-radius: 999px;
  background: #E7EDF3;
  margin-top: 9px;
  overflow: hidden;
}

.cu-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--accent-2));
  transition: width .2s ease;
}

.cu-fill.near { background: linear-gradient(90deg, #B54708, #F79009); }
.cu-fill.over { background: linear-gradient(90deg, #B42318, #F04438); }

.cu-usage-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--success-strong);
}

.cu-usage-foot .near { color: #B54708; }
.cu-usage-foot .over { color: #B42318; }
.cu-resets { font-size: 11px; color: var(--muted-2); font-weight: 600; }

.cu-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cu-inputs label { display: block; }

.cu-inputs label > span {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 6px;
}

.cu-inputs input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  background: var(--surface);
}

.cu-inputs input:focus-visible { outline: none; border-color: var(--brand-fg); }

.cu-figures { display: flex; flex-wrap: wrap; gap: 10px; }

.cu-fig {
  flex: 1;
  min-width: 130px;
  border-radius: 12px;
  padding: 12px 14px;
}

.cu-fig span { display: block; font-size: 11px; font-weight: 700; }
.cu-fig strong { display: block; font-size: 19px; font-weight: 800; margin-top: 2px; letter-spacing: -.01em; }
.cu-fig.est { background: #EFF6FB; }
.cu-fig.est span { color: var(--brand-fg); }
.cu-fig.est strong { color: var(--brand-2); }
.cu-fig.cap { background: #F6F3FC; }
.cu-fig.cap span { color: var(--accent-5); }
.cu-fig.cap strong { color: var(--accent-5); }

@media (max-width: 600px) {
  .cu-inputs { grid-template-columns: 1fr; }
  .ana-controls-spacer { display: none; }
  .ana-seg { flex: 1; }
  .ana-seg-btn { flex: 1; padding: 7px 10px; }
}

/* The admin shell already renders the screen title; these screens contribute
   only their one-line description under it. */
.admin-screen-sub { margin: -6px 0 0; font-size: 13px; color: var(--muted, var(--muted)); }

/* Usage & cost is a projection (calls x rate); Analytics reports metered spend.
   They legitimately differ until metered history accrues — say which is which
   rather than let two numbers quietly disagree. */
.cu-note {
  margin: 14px 0 0;
  font-size: 11.5px;
  color: var(--muted, var(--muted));
  background: var(--surface-2);
  border: 1px solid #EEF2F6;
  border-radius: 10px;
  padding: 9px 12px;
}

/* ---- Agent results (artifacts) ------------------------------------------
   Scoped under .admin-hub-shell so nothing here can reach the user shell.
   The list is deliberately not a uniform table: an admin scans this to answer
   what the agent actually returned and whether it broke, so the gist reads
   first at full size and the metadata recedes into chips. Invalid results are
   marked in the flow rather than filtered away — they are why the store exists.
   Logical properties throughout (inline-start/end), because the console is
   Arabic-first and physical left/right would mirror wrongly under RTL. */
.admin-hub-shell .art-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}
.admin-hub-shell .art-controls-spacer { flex: 1; min-width: 8px; }

.admin-hub-shell .art-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 260px;
  min-width: 0;
}
.admin-hub-shell .art-search-icon {
  position: absolute;
  inset-inline-start: 12px;
  display: inline-flex;
  color: var(--soft);
  pointer-events: none;
}
.admin-hub-shell .art-search-icon svg { width: 16px; height: 16px; }
.admin-hub-shell .art-search input {
  width: 100%;
  padding: 10px 14px;
  padding-inline-start: 36px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
  font-size: 13.5px;
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.admin-hub-shell .art-search input:focus {
  outline: none;
  border-color: var(--brand-fg);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.admin-hub-shell .art-search-clear {
  position: absolute;
  inset-inline-end: 8px;
  border: 0;
  background: transparent;
  color: var(--soft);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.admin-hub-shell .art-search-clear:hover { color: var(--text); background: var(--surface-3); }

.admin-hub-shell .art-controls select {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  max-width: 190px;
  cursor: pointer;
}
.admin-hub-shell .art-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.admin-hub-shell .art-toggle input { accent-color: var(--brand-fg); cursor: pointer; }
.admin-hub-shell .small-btn.is-on {
  background: var(--brand);
  border-color: var(--brand-fg);
  color: #fff;
}

.admin-hub-shell .art-count {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 10px;
  font-size: 12.5px;
  color: var(--muted);
}
.admin-hub-shell .art-count small { color: var(--soft); font-size: 11.5px; }

.admin-hub-shell .art-list { display: flex; flex-direction: column; gap: 8px; }

.admin-hub-shell .art-row {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 13px;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.admin-hub-shell .art-row:hover { border-color: var(--faint); }
.admin-hub-shell .art-row.open {
  border-color: var(--brand-fg);
  box-shadow: 0 6px 20px rgba(var(--brand-rgb), .09);
}
/* A result that did not match its schema carries a red edge: it is the row an
   admin came here to find, and it must be spottable without reading every one. */
.admin-hub-shell .art-row.is-invalid { border-inline-start: 3px solid var(--danger); }

.admin-hub-shell .art-row-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: start;
  font-family: inherit;
  color: inherit;
}
.admin-hub-shell .art-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.admin-hub-shell .art-row-gist {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-hub-shell .art-row-sub { display: flex; flex-wrap: wrap; gap: 5px; }
.admin-hub-shell .art-row-when { font-size: 11.5px; color: var(--soft); white-space: nowrap; }
.admin-hub-shell .art-row-caret {
  font-size: 15px;
  color: var(--soft);
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.admin-hub-shell .art-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  background: var(--surface-3);
  color: var(--muted);
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-hub-shell .art-chip.agent { background: var(--brand-soft); color: var(--brand-2); }
.admin-hub-shell .art-chip.kind { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
.admin-hub-shell .art-chip.ws { background: #EDE9FE; color: var(--accent-5); }
.admin-hub-shell .art-chip.bad { background: var(--danger-soft); color: #B42318; }
.admin-hub-shell .art-chip.warn { background: var(--warning-soft); color: var(--warning-strong); }
.admin-hub-shell .art-chip.old { background: var(--surface-3); color: var(--soft); }

.admin-hub-shell .art-detail {
  border-top: 1px solid var(--line);
  padding: 14px 16px 16px;
  background: var(--surface-2);
}
.admin-hub-shell .art-invalid-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--danger-soft);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.admin-hub-shell .art-invalid-note svg { width: 16px; height: 16px; color: #B42318; flex-shrink: 0; margin-top: 1px; }
.admin-hub-shell .art-invalid-note span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.admin-hub-shell .art-invalid-note strong { font-size: 12.5px; color: #912018; }
.admin-hub-shell .art-invalid-note code {
  font-size: 11.5px;
  color: #B42318;
  background: rgba(255, 255, 255, .6);
  padding: 2px 6px;
  border-radius: 5px;
  align-self: flex-start;
  word-break: break-word;
}
.admin-hub-shell .art-invalid-note small { font-size: 11px; color: #B42318; opacity: .85; }

.admin-hub-shell .art-detail-grid {
  display: grid;
  /* min(320px,100%) not a bare 320px floor: a minmax() floor cannot shrink and
     would overflow the console below 320px. */
  grid-template-columns: minmax(min(320px, 100%), 2fr) minmax(min(220px, 100%), 1fr);
  gap: 16px;
}
.admin-hub-shell .art-detail-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--soft);
  margin-bottom: 7px;
}
.admin-hub-shell .art-json {
  margin: 0;
  background: #0F172A;
  color: var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.65;
  max-height: 340px;
  overflow: auto;
  /* JSON is data, not prose: it must never mirror under RTL. */
  direction: ltr;
  text-align: left;
}
.admin-hub-shell .art-prov { margin: 0 0 14px; display: flex; flex-direction: column; gap: 7px; }
.admin-hub-shell .art-prov > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--line);
}
.admin-hub-shell .art-prov dt { color: var(--soft); white-space: nowrap; }
.admin-hub-shell .art-prov dd {
  margin: 0;
  color: var(--text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.admin-hub-shell .art-lineage { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.admin-hub-shell .art-lineage li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--muted);
}
.admin-hub-shell .art-lineage-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--faint);
  flex-shrink: 0;
}
.admin-hub-shell .art-lineage li.current .art-lineage-dot { background: var(--success); }
.admin-hub-shell .art-lineage li small { color: var(--soft); font-size: 10.5px; margin-inline-start: auto; }

.admin-hub-shell .art-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 44px 20px;
  text-align: center;
}
.admin-hub-shell .art-empty svg { width: 30px; height: 30px; color: var(--faint); }
.admin-hub-shell .art-empty p { margin: 0; color: var(--muted); font-size: 13px; max-width: 420px; }
.admin-hub-shell .art-more { align-self: center; margin-top: 14px; }

.admin-hub-shell .art-registry { margin-top: 16px; }
.admin-hub-shell .art-registry-head { margin-bottom: 14px; }
.admin-hub-shell .art-registry-head strong { font-size: 14px; }
.admin-hub-shell .art-kind-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.admin-hub-shell .art-kind-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.admin-hub-shell .art-kind-row > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.admin-hub-shell .art-kind-row code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: var(--brand-2);
}
.admin-hub-shell .art-kind-row small { font-size: 11px; color: var(--soft); }
.admin-hub-shell .art-kind-paths { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); }
.admin-hub-shell .art-kind-form { border-top: 1px dashed var(--line); padding-top: 14px; }
.admin-hub-shell .art-kind-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.admin-hub-shell .art-kind-fields label { display: flex; flex-direction: column; gap: 5px; }
.admin-hub-shell .art-kind-fields label > span { font-size: 11.5px; font-weight: 600; color: var(--text); }
.admin-hub-shell .art-kind-fields input {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font-size: 12.5px;
  font-family: inherit;
}
.admin-hub-shell .art-kind-fields input:focus {
  outline: none;
  border-color: var(--brand-fg);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.admin-hub-shell .art-kind-fields small { font-size: 10.5px; color: var(--soft); line-height: 1.45; }

@media (max-width: 900px) {
  .admin-hub-shell .art-detail-grid { grid-template-columns: 1fr; }
  .admin-hub-shell .art-controls select { max-width: none; flex: 1 1 140px; }
  .admin-hub-shell .art-row-when { display: none; }
}

/* ---- Analytics panels (v2 design: By agent / By user) -------------------
   Full-width white cards, NOT .admin-card — that class is capped at
   max-width:1220px with margin-inline:auto, which as a grid/flex item shrinks
   and centers oddly. These panels are plain width:100% blocks. */
.ana-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  margin-top: 20px;
  width: 100%;
}
.ana-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.ana-panel-titles { min-width: 0; }
.ana-panel-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.ana-panel-cap { font-size: 11.5px; color: var(--muted-2); font-weight: 600; margin-top: 2px; }

.ana-search { position: relative; flex: none; display: flex; align-items: center; }
.ana-search-ic {
  position: absolute;
  inset-inline-start: 11px;
  display: inline-flex;
  color: var(--muted-2);
  pointer-events: none;
}
.ana-search-ic svg { width: 14px; height: 14px; }
.ana-search input {
  width: 210px;
  max-width: 48vw;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  padding-inline-start: 34px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface-2);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ana-search input:focus { border-color: var(--brand-fg); box-shadow: 0 0 0 3px var(--brand-soft); }

/* Calls | Cost columns, side by side, that stack below ~2×260px. This is what
   makes the panel responsive with no media query. */
.ana-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 24px;
  align-items: start;
}
.ana-metric-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted-2);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.ana-bars { display: flex; flex-direction: column; gap: 13px; }
/* .ana-bars owns the vertical rhythm via gap; kill the legacy sibling margin so
   rows aren't double-spaced. */
.ana-bars .ana-bar-row + .ana-bar-row { margin-top: 0; }
.ana-panel-empty {
  padding: 22px;
  text-align: center;
  color: var(--muted-2);
  font-size: 12.5px;
  font-weight: 600;
}

/* ---- Agent Pipelines (A → B → C) admin screen ------------------------- */
.ac-toolbar.between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ac-intro { color: var(--muted); font-size: 0.9rem; max-width: 62ch; margin: 0; }
.is-hidden { display: none !important; }

.pl-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm, 12px);
  box-shadow: var(--shadow-sm); padding: 16px 18px; display: grid; gap: 12px;
}
.pl-card.is-off { opacity: 0.66; }
.pl-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pl-card-id { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pl-key {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.82rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; color: var(--brand-fg);
}
.pl-card-id strong { font-size: 0.98rem; color: var(--text); }
.pl-pill { font-size: 0.72rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pl-pill.on { color: var(--success-strong); background: var(--success-soft); }
.pl-pill.off { color: var(--muted); background: var(--surface-2); }

.pl-chain { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pl-node {
  display: inline-flex; align-items: center; gap: 7px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 0.86rem; color: var(--text);
}
.pl-node em {
  font-style: normal; font-weight: 700; font-size: 0.7rem; width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; background: var(--brand); color: #fff;
}
.pl-arrow { color: var(--muted); font-weight: 700; }
.pl-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid var(--line); }
.pl-meta { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.82rem; }
.pl-meta svg { width: 15px; height: 15px; }
.pl-actions { display: inline-flex; gap: 8px; }
.small-btn.danger { color: var(--danger, #b23b34); }

/* Editor */
.pl-editor-title { font-size: 1.05rem; margin: 0; }
.pl-form { display: grid; gap: 18px; max-width: 760px; margin-top: 8px; }
.pl-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .pl-form-row { grid-template-columns: 1fr; } }
.pl-fieldset { border: 1px solid var(--border); border-radius: var(--radius-sm, 12px); padding: 14px 16px; display: grid; gap: 10px; margin: 0; }
.pl-fieldset legend { font-weight: 600; font-size: 0.9rem; padding: 0 6px; display: inline-flex; align-items: center; gap: 7px; }
.pl-fieldset legend em {
  font-style: normal; font-weight: 700; font-size: 0.68rem; width: 17px; height: 17px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; background: var(--brand); color: #fff;
}
.pl-fieldset > small, .field > small { color: var(--muted); font-size: 0.78rem; }
.pl-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: 8px; }
.pl-check { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 0.88rem; }
.pl-check:hover { border-color: var(--brand-fg); }
.pl-check input { accent-color: var(--brand-fg); }
.pl-warn {
  display: flex; align-items: flex-start; gap: 8px; background: var(--danger-soft); color: var(--danger, #b23b34);
  border-radius: 8px; padding: 10px 12px; font-size: 0.82rem; line-height: 1.5;
}
.pl-warn svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.pl-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer; }
.pl-switch input { accent-color: var(--brand-fg); width: 16px; height: 16px; }
.pl-form-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ---- Azure SSO login controls ---------------------------------------- */
.sso-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  /* Themed, not hardcoded. The background was already var(--surface) while the
     label was a fixed near-black, and the only dark treatment lived in a
     `prefers-color-scheme: dark` block below — the OPERATING SYSTEM's
     preference, not the app's. This product has its own theme switcher, so a
     user on the dark theme with a light OS got a dark surface with a near-black
     label on it. Tokens resolve correctly for every theme and every OS, which
     removes the need for the override entirely. */
  background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; font-weight: 600; font-size: 0.95rem; padding: 11px 16px;
  text-decoration: none; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.sso-btn:hover { background: var(--surface-3); border-color: var(--line); }
.sso-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.sso-btn svg { flex: none; }
.auth-divider {
  display: flex; align-items: center; text-align: center; gap: 12px;
  color: var(--muted, var(--muted)); font-size: 0.8rem; margin: 4px 0;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line, #e6e9ee);
}
.auth-error {
  background: var(--danger-soft, #fdecea); color: var(--danger, #b23b34);
  border: 1px solid var(--danger, #b23b34); border-radius: 10px;
  padding: 10px 13px; font-size: 0.85rem; line-height: 1.5;
}
/* The `prefers-color-scheme: dark` override that used to sit here is gone. It
   keyed the button's dark treatment to the OS rather than to the app's own
   theme, so it fired for a light-theme user on a dark OS and did NOT fire for a
   dark-theme user on a light OS — wrong in both directions. The tokens above
   follow [data-theme] and need no companion rule. */

/* ---- Auth-method chip (audit log + Users Management) ------------------ */
.ac-method-chip {
  display: inline-flex; align-items: center; gap: 5px; margin-inline-start: 8px;
  font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  vertical-align: middle; white-space: nowrap;
}
.ac-method-chip svg { width: 12px; height: 12px; }
.ac-method-chip.sso { background: #eef4ff; color: var(--info); border: 1px solid var(--brand-soft); }
.ac-method-chip.pw { background: var(--surface-2, #f0f3f1); color: var(--muted, #66707d); border: 1px solid var(--line, #e6e9ee); }
/* In the Users table cell the chip stands alone (no leading margin). */
.agent-admin-table .ac-method-chip { margin-inline-start: 0; }
@media (prefers-color-scheme: dark) {
  .ac-method-chip.sso { background: var(--admin-navy-2); color: var(--info); border-color: var(--admin-navy); }
}

/* Wizard voice-provider select (shown when the voice toggle is on). */
.wizard-voice-provider select {
  width: 100%;
}

.wizard-voice-hint {
  display: block;
  margin-top: 6px;
  color: #B45309;
  font-weight: 700;
}

/* ==================================================================
   Vexa integration panel — self-contained, prefixed `vx-`. Mounted on
   document.body so it layers above the SPA. Uses the app's accent vars
   where present, with safe fallbacks.
   ================================================================== */
/* The drawer is opened from the Naseej Agent card in My Agents, not a floating
   pill. `vx-launcher-dot` survives because the drawer header still uses it. */
/* The dot now reports real state rather than always reading 'connected'. */
.vx-launcher-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--success); }
.vx-launcher-dot.is-on { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.vx-launcher-dot.is-off { background: var(--muted-2); box-shadow: none; }

/* Naseej Agent's card sits alongside the assigned-agent tiles but is not one of
   them — it wears the brand itself rather than one of the identity accents, so
   the card and the panel it opens read as one feature. */
.naseej-agent-avatar { background: var(--brand-soft); color: var(--brand-fg); }
.naseej-agent-avatar svg { width: 18px; height: 18px; }

.vx-overlay {
  position: fixed; inset: 0; z-index: 950; display: none;
  background: rgba(15, 23, 42, .48); backdrop-filter: blur(2px);
}
.vx-overlay.active { display: block; }
.vx-drawer {
  /* Anchored to the TOP with an explicit measured height rather than stretched
     top-to-bottom: the overlay is fixed to the LAYOUT viewport, which on iOS
     still spans the full screen while the keyboard covers the lower part of
     it. --app-vh is the area actually visible. (On Android the layout viewport
     already shrinks, so this is simply equal.) */
  position: absolute; inset-block-start: 0; inset-block-end: auto; inset-inline-end: 0;
  height: var(--app-vh, 100dvh); max-height: var(--app-vh, 100dvh);
  width: min(440px, 100vw); background: var(--surface); color: var(--text);
  display: flex; flex-direction: column; box-shadow: -20px 0 50px rgba(15,23,42,.25);
  animation: vxSlide .22s cubic-bezier(.16,1,.3,1);
}
@keyframes vxSlide { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
/* Same anatomy as .agent-workspace-head — avatar, title, subtitle, actions —
   so the drawer reads as this agent's workspace in a panel rather than as a
   separate product. It borrowed cool-grey #e5e7eb chrome and an olive primary
   (accent-5 is olive in the Naseej theme), which is why it looked foreign. */
.vx-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.vx-head-avatar {
  width: 36px; height: 36px; flex: none; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-fg);
}
.vx-head-avatar svg { width: 19px; height: 19px; }
.vx-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vx-title strong { font-size: 15px; font-weight: 700; letter-spacing: 0; }
.vx-title span {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vx-head-actions { display: flex; align-items: center; gap: 6px; flex: none; }
/* The drawer is `width: min(440px, 100vw)`, so on a phone it covers the screen
   and there is no backdrop to tap — this glyph is the only way out. It was
   declared with no width, height or padding, giving roughly a 15x26px target
   sitting 8px from an irreversible Disconnect, in a stylesheet that protects
   44px everywhere else. */
.vx-close {
  border: none; background: transparent; font-size: 1.6rem; line-height: 1;
  cursor: pointer; color: var(--muted);
  min-width: 44px; min-height: 44px;
  display: grid; place-items: center;
  margin-inline-end: -10px;   /* keep the glyph optically aligned to the edge */
  border-radius: 10px;
}
.vx-close:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.vx-close:hover { color: var(--text); }
/* min-height:0 lets this flex child actually shrink; without it a tall child
   (the chat column) forces the drawer taller than the screen instead of
   scrolling inside it. */
.vx-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px; }
.vx-foot { padding: 10px 18px; border-top: 1px solid var(--line); background: var(--surface-2); font-size: .78rem; color: var(--muted); }
.vx-err { margin: 10px 18px 0; padding: 9px 12px; border-radius: 9px; background: var(--danger-soft); color: var(--danger); font-size: .85rem; }
.vx-ok { margin-top: 12px; padding: 9px 12px; border-radius: 9px; background: var(--success-soft); color: var(--success-strong); font-size: .85rem; }

/* One track with a sliding selection, so four surfaces read as four views of
   ONE agent instead of four competing buttons. */
.vx-tabs {
  display: flex; gap: 2px; margin-bottom: 14px; padding: 3px;
  background: var(--surface-3); border: 1px solid var(--line); border-radius: 12px;
}
.vx-tab {
  flex: 1; padding: 8px 6px; border: 1px solid transparent; background: transparent;
  border-radius: 9px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--muted); transition: background .16s ease, color .16s ease;
}
.vx-tab:hover { color: var(--text); }
.vx-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.vx-tab.active {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}

/* ==========================================================================
   Naseej Agent — reading room
   --------------------------------------------------------------------------
   The drawer is a notification: narrow, one column, glanceable. Full screen is
   a different job — reading a week of minutes and asking questions across them
   — so it becomes rail | archive | document rather than the same column
   stretched wide. No new palette: the existing tokens carry it, and crimson is
   rationed harder here than in the drawer because a full screen of it shouts.
   ========================================================================== */

/* --- shell: tabs OUTSIDE the scroll container ---------------------------- */
/* .vx-tabs used to sit at the top of .vx-body, so reading long minutes carried
   the four surfaces off-screen and there was no way back to Chat without
   scrolling up. The shell owns them now; only .vx-body scrolls. */
.vx-shell { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.vx-drawer .vx-shell > .vx-tabs { flex: none; }
.vx-drawer .vx-body { flex: 1; min-height: 0; }

.vx-tabs { margin: 12px 18px 10px; }
.vx-tab { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.vx-tab-glyph { display: none; }
.vx-tab-glyph svg { width: 17px; height: 17px; display: block; }

.vx-icon-btn {
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  min-width: 34px; min-height: 34px; border-radius: 9px; cursor: pointer;
  display: grid; place-items: center; padding: 0;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.vx-icon-btn svg { width: 15px; height: 15px; }
.vx-icon-btn:hover { color: var(--text); border-color: var(--muted-2, var(--line)); background: var(--surface-3); }
.vx-icon-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Hidden where there is no room to expand into. */
@media (max-width: 720px) { .vx-icon-btn[data-vx="expand"] { display: none; } }

/* --- the minutes as a document ------------------------------------------ */
/* Replaces an <iframe srcdoc> of the emailed HTML that the app's own CSP
   (frame-src 'none') refused to render. Same section vocabulary as the email,
   so the record read here and the one in the inbox are visibly the same. */
.vx-doc { max-width: 68ch; }
/* Air between the meeting identity and the record itself. */
.vx-detail .vx-doc { margin-top: 18px; }
:root[dir="rtl"] .vx-detail-sub { letter-spacing: normal; text-transform: none; }
.vx-detail-sub:dir(rtl) { letter-spacing: normal; text-transform: none; font-size: 13px; }
.vx-doc-h:dir(rtl) { letter-spacing: normal; text-transform: none; font-size: 13px; }
.vx-doc-sec { margin: 0 0 22px; }
.vx-doc-sec:last-child { margin-bottom: 0; }
.vx-doc-h {
  margin: 0 0 9px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--brand);
}
/* Arabic is a joined script: tracking pulls its glyphs apart and there is no
   case for uppercase to change. It gets size instead. */
:root[dir="rtl"] .vx-doc-h { letter-spacing: normal; text-transform: none; font-size: 13px; }

.vx-doc-decisions, .vx-doc-actions, .vx-doc-tasks { margin: 0; padding: 0; list-style: none; }
.vx-doc-decisions { counter-reset: vxdec; }
.vx-doc-decisions li {
  counter-increment: vxdec; position: relative;
  padding-inline-start: 30px; margin-bottom: 9px;
  font-size: 14px; line-height: 1.65; color: var(--text);
}
/* Numbered because minutes number them — "decision 3" is the reference people
   use in the next meeting. Not an ornamental 01/02/03. */
.vx-doc-decisions li::before {
  content: counter(vxdec); position: absolute; inset-inline-start: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 6px;
  background: var(--brand-soft); color: var(--brand-fg, var(--brand));
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
}
.vx-doc-actions li {
  position: relative; padding-inline-start: 30px; margin-bottom: 9px;
  font-size: 14px; line-height: 1.65; color: var(--text);
}
.vx-doc-actions li::before {
  content: ""; position: absolute; inset-inline-start: 2px; top: 6px;
  width: 12px; height: 12px; border-radius: 4px; border: 1.5px solid var(--line);
}
.vx-doc-tasks li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
  font-size: 14px; line-height: 1.55;
}
.vx-doc-tasks li:last-child { border-bottom: 0; }
.vx-doc-task-title { flex: 1 1 220px; min-width: 0; color: var(--text); }
.vx-doc-owner {
  flex: none; font-size: 12px; padding: 2px 9px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-fg, var(--brand));
}
.vx-doc-due { flex: none; font-size: 12px; color: var(--muted); }
.vx-doc-empty {
  height: 100%; display: grid; place-items: center; text-align: center;
  color: var(--muted); font-size: 14px; padding: 40px 20px;
}

/* --- expanded: rail | archive | document -------------------------------- */
.vx-drawer.is-expanded {
  width: 100vw; max-width: 100vw;
  box-shadow: none; border-inline-start: 0;
  animation: none;                    /* a full-screen slide reads as a glitch */
}
.vx-drawer.is-expanded .vx-shell { flex-direction: row; }

/* The rail. Same buttons as the drawer's segmented control, restacked — one
   set of markup, so the active surface never disagrees between modes. */
.vx-drawer.is-expanded .vx-tabs {
  flex: none; flex-direction: column; align-items: stretch; gap: 4px;
  width: 108px; margin: 0; padding: 14px 10px;
  background: var(--surface-2); border: 0;
  border-inline-end: 1px solid var(--line); border-radius: 0;
}
.vx-drawer.is-expanded .vx-tab {
  flex: none; flex-direction: column; gap: 6px; padding: 12px 6px;
  font-size: 11.5px; border-radius: 10px;
}
.vx-drawer.is-expanded .vx-tab-glyph { display: block; }
.vx-drawer.is-expanded .vx-body { flex: 1; min-width: 0; padding: 0; }

.vx-split { display: flex; height: 100%; min-height: 0; }
/* Insurance: the split is only produced in the expanded layout, but if it ever
   renders in the 440px drawer it must stack rather than crush the document into
   a a few characters per line. */
.vx-drawer:not(.is-expanded) .vx-split { display: block; height: auto; }
.vx-drawer:not(.is-expanded) .vx-split-list { width: auto; border-inline-end: 0; padding: 0; overflow: visible; }
.vx-drawer:not(.is-expanded) .vx-split-doc { padding: 16px 0 0; overflow: visible; }
.vx-split-list {
  flex: none; width: clamp(280px, 26vw, 360px);
  border-inline-end: 1px solid var(--line);
  overflow-y: auto; padding: 16px 14px;
  background: var(--surface);
}
.vx-split-doc { flex: 1; min-width: 0; overflow-y: auto; padding: 28px 34px 48px; }
/* The document does NOT fill the width. Whitespace beside it is the point:
   this is prose to read, not data to scan. */
.vx-split-doc .vx-detail { max-width: 74ch; margin-inline: auto; }
.vx-split-doc .vx-doc { max-width: none; }
.vx-split-doc .vx-detail-title { font-size: 22px; line-height: 1.3; }
.vx-split-doc .vx-doc-sec { margin-bottom: 28px; }
.vx-split-doc .vx-doc-decisions li,
.vx-split-doc .vx-doc-actions li { font-size: 15px; line-height: 1.7; }
/* The list is always visible beside the document, so "back" has nothing to do. */
.vx-split-doc [data-vx="detail-back"] { display: none; }

/* Chat and the two forms are single-column surfaces: centre them rather than
   stretching a message thread across a monitor. */
.vx-drawer.is-expanded .vx-body > .vx-chat,
.vx-drawer.is-expanded .vx-body > .vx-invite,
.vx-drawer.is-expanded .vx-body > .vx-calendar { max-width: 780px; margin-inline: auto; padding: 22px 26px; }
.vx-drawer.is-expanded .vx-body > .vx-chat { height: 100%; }

@media (prefers-reduced-motion: reduce) { .vx-drawer { animation: none; } }


.vx-btn { border: none; border-radius: 9px; padding: 9px 15px; cursor: pointer; font: inherit; font-weight: 700; }
.vx-primary { background: var(--brand); color: #fff; }
.vx-primary:hover:not(:disabled) { background: var(--brand-2); }
.vx-primary:disabled { opacity: .6; cursor: default; }
.vx-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.vx-ghost:hover { background: var(--surface-3); }
.vx-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.vx-sm { padding: 6px 11px; font-size: .8rem; }

.vx-connect { text-align: center; padding: 26px 8px; }
.vx-connect h3 { margin: 0 0 8px; }
.vx-connect p { color: var(--muted); font-size: .9rem; margin: 0 0 18px; line-height: 1.5; }

.vx-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 10px; color: var(--muted); text-align: center; }
.vx-hint { color: var(--muted-2); font-size: .88rem; padding: 22px 6px; text-align: center; line-height: 1.5; }
.vx-spinner { width: 26px; height: 26px; border: 3px solid var(--line); border-top-color: var(--accent-5); border-radius: 50%; animation: vxSpin .8s linear infinite; }
@keyframes vxSpin { to { transform: rotate(360deg); } }

/* THE drawer keyboard bug: this used to be `height: calc(100vh - 190px)` with
   a 320px floor. Two magic numbers against a viewport unit that does not know
   the keyboard exists — so with the keyboard up the column was either taller
   than the drawer (input pushed under the keyboard) or shorter than the body
   (input stranded high, with the leftover body showing as a blank band, which
   is what the phone screenshot showed).
   It now simply FILLS the drawer body, so the composer is on the bottom edge
   by construction and no arithmetic can be wrong. The LOG scrolls, not the
   column. */
.vx-chat { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.vx-chat-log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; }
.vx-msg { max-width: 88%; padding: 9px 13px; border-radius: 13px; font-size: .9rem; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.vx-user { align-self: flex-end; background: var(--accent-5); color: #fff; border-bottom-right-radius: 4px; }
.vx-assistant { align-self: flex-start; background: var(--surface-3); color: var(--text); border-bottom-left-radius: 4px; }
.vx-caret { display: inline-block; width: 7px; height: 14px; background: var(--accent-5); margin-inline-start: 2px; vertical-align: text-bottom; animation: vxBlink 1s steps(2) infinite; }
@keyframes vxBlink { 50% { opacity: 0; } }
.vx-chat-form { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid #e5e7eb; }
.vx-chat-form input { flex: 1; padding: 10px 13px; border: 1px solid #cbd5e1; border-radius: 10px; font: inherit; }

.vx-row-between { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-weight: 600; }
.vx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vx-list li { padding: 11px 13px; border: 1px solid #e5e7eb; border-radius: 11px; }
.vx-list li > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vx-sub { color: var(--muted-2); font-size: .78rem; margin-top: 3px; }
/* Status reads as a quiet label, not a highlight — the row's accent bar
   already carries the state in colour, so the pill must not shout twice. */
.vx-pill { font-size: .64rem; font-weight: 700; padding: 2px 8px; border-radius: 6px; text-transform: capitalize; letter-spacing: .02em; }
.vx-live { background: #FDEDE4; color: #C2410C; }
.vx-pending { background: #E9F1F7; color: var(--brand-fg); }
.vx-done { background: var(--surface-3); color: var(--muted); }
.vx-fail { background: #FDECEA; color: #B42318; }

.vx-invite p { color: var(--muted); font-size: .9rem; line-height: 1.5; }
.vx-invite form { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.vx-invite input, .vx-invite .vx-select { padding: 10px 13px; border: 1px solid #cbd5e1; border-radius: 10px; font: inherit; background: var(--surface); color: inherit; }
/* The three-ways explainer + the link/ID mode switch. */
.vx-ways { margin: 4px 0 14px; padding-inline-start: 1.05rem; display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.vx-ways strong { color: var(--text); }
.vx-seg-row { display: flex; gap: 6px; margin-bottom: 6px; }
.vx-seg { flex: 1; padding: 7px 10px; border: 1px solid #e5e7eb; background: var(--surface-2); border-radius: 9px; cursor: pointer; font: inherit; font-weight: 600; color: var(--muted); }
.vx-seg.active { background: var(--accent-5); border-color: var(--accent-5); color: #fff; }
[data-theme="dark"] .vx-ways { color: var(--muted); }
[data-theme="dark"] .vx-ways strong { color: var(--text); }
[data-theme="dark"] .vx-seg { background: var(--surface-3); border-color: var(--line); color: var(--muted); }
[data-theme="dark"] .vx-invite .vx-select { background: var(--surface-3); border-color: var(--line); color: var(--text); }

/* Meeting detail: the minutes and the full transcript for one meeting. */
.vx-open { cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.vx-open:hover, .vx-open:focus-visible { border-color: var(--accent-5); background: var(--surface-2); outline: none; }
.vx-detail { display: flex; flex-direction: column; gap: 2px; }
.vx-detail-title { margin: 10px 0 2px; font-size: 1.05rem; }
.vx-detail-h { margin: 18px 0 6px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.vx-detail-p { margin: 0; font-size: .92rem; line-height: 1.6; }
.vx-detail-sub { margin:14px 0 4px; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--brand); }
.vx-detail-sub:first-child { margin-top:0; }
:root[dir="rtl"] .vx-detail-sub { letter-spacing:normal; text-transform:none; font-size:.85rem; }
.vx-detail-ul { margin: 0; padding-inline-start: 1.1rem; display: flex; flex-direction: column; gap: 5px; font-size: .92rem; line-height: 1.55; }
.vx-transcript { display: flex; flex-direction: column; gap: 9px; max-height: 46vh; overflow-y: auto; padding-inline-end: 4px; }
/* ============================================================================
   MEETINGS PANEL — "the planner spine"
   A 430px drawer that has to behave like a day planner, not a card list. One
   idea carries the whole surface: a fixed time rail on the start edge, a
   status-coloured bar beside it, and the meeting to its inside. Read down a
   day and the bars form a continuous spine; the month grid repeats the same
   bars as a load indicator, so "how busy is the 12th" is answerable without
   opening anything. Everything else stays deliberately quiet.
   Tokens: ink #0F2233 · muted var(--muted) · hairline #E6EDF3 · brand var(--brand)
           live #C2410C · next var(--brand) · done var(--muted-2) · fail #B42318
   ========================================================================== */
.vx-minutes-frame { width: 100%; height: 520px; border: 1px solid #E6EDF3; border-radius: 12px; background: var(--surface-2); }

/* -- toolbar: scope (admin) + view, segmented ------------------------------ */
.vx-meet-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.vx-meet-right { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.vx-seg { display: inline-flex; background: var(--surface-3); border-radius: 9px; padding: 2px; }
.vx-seg-btn { border: none; background: none; font: inherit; font-size: .76rem; font-weight: 700; color: var(--muted); padding: 5px 11px; border-radius: 7px; cursor: pointer; white-space: nowrap; transition: background .14s ease, color .14s ease; }
.vx-seg-btn:hover { color: var(--text); }
.vx-seg-btn.is-active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(15,34,51,.14); }
.vx-seg-scope .vx-seg-btn.is-active { color: var(--brand-fg); }
.vx-icon-btn { border: 1px solid #E6EDF3; background: var(--surface); color: var(--muted); width: 30px; height: 30px; border-radius: 8px; font-size: .95rem; line-height: 1; cursor: pointer; transition: color .14s ease, border-color .14s ease; }
.vx-icon-btn:hover { color: var(--brand-fg); border-color: var(--brand-soft); }

/* -- next-up strip: answers "what's next?" before any list ----------------- */
.vx-next { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; width: 100%; text-align: start; border: 1px solid var(--brand-soft); background: linear-gradient(180deg, #F5FAFD, #FFF); border-radius: 12px; padding: 11px 13px; margin-bottom: 16px; cursor: pointer; font: inherit; transition: border-color .14s ease, transform .14s ease; }
.vx-next:hover { border-color: var(--brand-fg); transform: translateY(-1px); }
.vx-next-tag { grid-row: 1; align-self: center; font-size: .62rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--brand-fg); background: #E3F0F8; border-radius: 999px; padding: 3px 8px; }
.vx-next-when { grid-row: 1; font-size: .72rem; font-weight: 600; color: var(--muted); align-self: center; font-variant-numeric: tabular-nums; }
.vx-next-title { grid-row: 2; grid-column: 1 / -1; font-size: .93rem; font-weight: 700; color: var(--text); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* -- section + day headers: structure that states a count ------------------ */
.vx-sect { display: flex; align-items: center; gap: 9px; margin: 4px 0 10px; font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted-2); }
.vx-sect i { flex: 1; height: 1px; background: #E6EDF3; }
.vx-sect-n { color: var(--muted); }
.vx-day { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 14px 2px 7px; }
.vx-day-name { font-size: .8rem; font-weight: 700; color: var(--text); }
.vx-day-count { font-size: .68rem; font-weight: 700; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.vx-day-empty { margin: 2px 2px 0; font-size: .84rem; color: var(--muted-2); }

/* -- the row: time rail | accent bar | content | status -------------------- */
.vx-meetings .vx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
/* Specificity note: the generic `.vx-list li` card rule (border + padding)
   would otherwise win over `.vx-mrow` — this row is not a card. */
.vx-meetings .vx-list .vx-mrow { display: grid; grid-template-columns: 42px 3px 1fr auto; align-items: center; gap: 0 10px; padding: 9px 8px 9px 0; border: none; border-radius: 9px; cursor: pointer; background: none; transition: background .14s ease; }
.vx-meetings .vx-list .vx-mrow:hover { background: #F6F9FB; }
.vx-meetings .vx-list .vx-mrow:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.vx-mrow-time { font-size: .76rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; text-align: end; padding-inline-end: 2px; }
.vx-mrow-bar { align-self: stretch; min-height: 34px; border-radius: 999px; background: #CBD5E1; }
.vx-mrow.is-live .vx-mrow-bar { background: #C2410C; }
.vx-mrow.is-next .vx-mrow-bar { background: var(--brand); }
.vx-mrow.is-fail .vx-mrow-bar { background: #B42318; }
.vx-mrow.is-live .vx-mrow-time { color: #C2410C; }
.vx-mrow-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vx-mrow-title { font-size: .88rem; font-weight: 650; color: var(--text); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vx-mrow-meta { font-size: .72rem; color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-mrow-minutes { color: var(--success-strong); font-weight: 700; }
.vx-mrow .vx-pill { align-self: center; }

/* -- month grid: the same bars, as a load indicator ------------------------ */
.vx-cal { border: 1px solid #E6EDF3; border-radius: 14px; padding: 10px 10px 12px; background: var(--surface); }
.vx-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.vx-cal-month { font-size: .88rem; font-weight: 800; color: var(--text); }
.vx-cal-nav { border: none; background: none; font: inherit; font-size: 1.15rem; line-height: 1; color: var(--muted); width: 28px; height: 28px; border-radius: 8px; cursor: pointer; }
.vx-cal-nav:hover { background: var(--surface-3); color: var(--brand-fg); }
.vx-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.vx-cal-wd { text-align: center; font-size: .62rem; font-weight: 800; color: #B6C2CF; padding: 2px 0 5px; }
.vx-cal-cell { position: relative; aspect-ratio: 1 / 1.06; border: 1px solid transparent; border-radius: 9px; background: none; font: inherit; font-size: .78rem; color: var(--muted); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding: 5px 2px 0; transition: background .12s ease; }
.vx-cal-cell.is-blank { cursor: default; }
.vx-cal-cell:not(.is-blank):hover { background: #F1F6FA; }
.vx-cal-num { font-variant-numeric: tabular-nums; }
.vx-cal-cell.has-meetings .vx-cal-num { font-weight: 800; color: var(--text); }
.vx-cal-cell.is-today { border-color: var(--brand-soft); }
.vx-cal-cell.is-today .vx-cal-num { color: var(--brand-fg); }
.vx-cal-cell.is-selected { background: var(--brand); }
.vx-cal-cell.is-selected .vx-cal-num { color: #fff; }
.vx-cal-bars { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; padding: 0 4px; }
.vx-cal-bar { display: block; width: 100%; height: 3px; border-radius: 2px; background: #CBD5E1; }
.vx-cal-bar.is-live { background: #C2410C; }
.vx-cal-bar.is-next { background: var(--brand); }
.vx-cal-cell.is-selected .vx-cal-bar { background: rgba(255,255,255,.75); }
.vx-cal-more { font-size: .54rem; font-weight: 800; color: var(--muted-2); font-style: normal; }
.vx-cal-cell.is-selected .vx-cal-more { color: var(--brand-soft); }

/* -- empty state: an invitation, with the two real next actions ------------ */
.vx-blank { padding: 26px 14px; text-align: center; }
.vx-blank-head { margin: 0 0 6px; font-size: .95rem; font-weight: 700; color: var(--text); }
.vx-blank-body { margin: 0 0 16px; font-size: .84rem; line-height: 1.55; color: var(--muted); }
.vx-blank-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.vx-blank-note { margin: 14px 0 0; font-size: .76rem; color: var(--muted-2); }

@media (prefers-reduced-motion: reduce) {
  .vx-next, .vx-mrow, .vx-cal-cell, .vx-seg-btn { transition: none; }
  .vx-next:hover { transform: none; }
}
[data-theme="dark"] .vx-seg { background: var(--surface-3); }
[data-theme="dark"] .vx-seg-btn.is-active { background: var(--bg); color: var(--text); }
[data-theme="dark"] .vx-icon-btn { background: var(--bg); border-color: var(--surface-3); }
[data-theme="dark"] .vx-next { background: var(--surface-2); border-color: var(--line); }
[data-theme="dark"] .vx-next-title, [data-theme="dark"] .vx-mrow-title, [data-theme="dark"] .vx-day-name,
[data-theme="dark"] .vx-cal-month, [data-theme="dark"] .vx-blank-head { color: var(--text); }
[data-theme="dark"] .vx-cal { background: var(--bg); border-color: var(--surface-3); }
[data-theme="dark"] .vx-mrow:hover, [data-theme="dark"] .vx-cal-cell:not(.is-blank):hover { background: var(--surface-3); }
[data-theme="dark"] .vx-sect i { background: var(--surface-3); }
.vx-turn { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.vx-turn:last-child { border-bottom: 0; }
.vx-turn-who { font-size: .72rem; font-weight: 700; color: var(--accent-5); letter-spacing: .04em; }
.vx-turn-text { font-size: .9rem; line-height: 1.55; word-wrap: break-word; }
[data-theme="dark"] .vx-open:hover, [data-theme="dark"] .vx-open:focus-visible { background: var(--surface-3); }
[data-theme="dark"] .vx-turn { border-color: var(--surface-3); }

/* Auto-join tab: connect a calendar once instead of inviting per meeting. */
/* Four tabs now, and the Arabic label wraps to two lines — center every tab and
   floor the height so a wrapped label doesn't leave its neighbours short. */
.vx-tabs .vx-tab { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 40px; line-height: 1.2; padding-inline: 6px; }
.vx-cal > p { color: var(--muted); font-size: .9rem; line-height: 1.5; margin: 0 0 12px; }
.vx-cal form { display: flex; flex-direction: column; gap: 9px; }
.vx-cal input[type="text"], .vx-cal input:not([type]) { padding: 10px 13px; border: 1px solid #cbd5e1; border-radius: 10px; font: inherit; }
.vx-cal-state { padding: 11px 13px; border: 1px solid #e5e7eb; border-radius: 11px; margin-bottom: 12px; word-break: break-all; }
.vx-cal-good { border-inline-start: 3px solid #10b981; }
.vx-cal-bad { border-inline-start: 3px solid #ef4444; }
.vx-cal-toggle { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: .92rem; cursor: pointer; }
.vx-cal-toggle input { width: 1.05rem; height: 1.05rem; cursor: pointer; accent-color: var(--accent-5); }
.vx-cal p.vx-sub { margin: 6px 0 0; line-height: 1.5; }
.vx-cal-actions { display: flex; gap: 8px; margin-top: 14px; }
.vx-cal-help { margin-top: 14px; font-size: .85rem; color: var(--muted); }
.vx-cal-help summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.vx-cal-help p { line-height: 1.55; margin: 8px 0 0; }
[data-theme="dark"] .vx-cal-state, [data-theme="dark"] .vx-cal-help summary { border-color: var(--surface-3); color: var(--muted); }
[data-theme="dark"] .vx-cal input { background: var(--surface-3); border-color: var(--line); color: var(--text); }

/* Dark theme: the hub sets a dark surface on <body> for the red/dark themes. */
[data-theme="dark"] .vx-drawer, [data-theme="dark"] .vx-drawer { background: var(--surface); color: var(--text); }
[data-theme="dark"] .vx-head, [data-theme="dark"] .vx-foot, [data-theme="dark"] .vx-chat-form { border-color: var(--surface-3); }
[data-theme="dark"] .vx-assistant { background: var(--surface-3); color: var(--text); }
/* dropped: [data-theme="dark"] .vx-tab hardcoded a slate fill that also
   overrode .vx-tab.active, so the selected tab lost the brand in dark mode.
   The base .vx-tab rules are tokenised and already correct per theme. */
[data-theme="dark"] .vx-list li { border-color: var(--surface-3); }
[data-theme="dark"] .vx-chat-form input, [data-theme="dark"] .vx-invite input { background: var(--surface-3); border-color: var(--line); color: var(--text); }

[dir="rtl"] .vx-user { border-bottom-right-radius: 13px; border-bottom-left-radius: 4px; }
[dir="rtl"] .vx-assistant { border-bottom-left-radius: 13px; border-bottom-right-radius: 4px; }

/* ---- Super admin governance ------------------------------------------- */
/* `.admin-main .table-scroll` sets overflow:hidden, which would CLIP the wider
   role matrix on narrow screens with no way to reach the right-hand columns.
   This modifier is one class more specific, so the matrix scrolls instead. */
.admin-main .table-scroll.gov-scroll,
.table-scroll.gov-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.gov-matrix { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.gov-matrix th,
.gov-matrix td { padding: 0.55rem 0.75rem; text-align: left; border-bottom: 1px solid var(--line, rgba(0,0,0,0.08)); }
.gov-matrix thead th { font-weight: 600; white-space: nowrap; }
.gov-matrix th:not(:first-child),
.gov-matrix .gov-cell { text-align: center; width: 8.5rem; }
.gov-matrix .gov-group-row td { padding-top: 0.9rem; border-bottom: none; opacity: 0.7; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; }
.gov-matrix .gov-super { color: var(--accent, var(--info)); font-weight: 700; }
/* 24px minimum: WCAG 2.2 AA target size (SC 2.5.8). */
.gov-matrix input[type="checkbox"],
.admin-main .gov-sso-toggle input[type="checkbox"] { width: 1.5rem; height: 1.5rem; cursor: pointer; }
.gov-matrix input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.45; }
.gov-badge { background: var(--accent, var(--info)); color: #fff; font-weight: 600; }
.gov-super-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.gov-super-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.8rem; border: 1px solid var(--line, rgba(0,0,0,0.08)); border-radius: 10px; }
.gov-super-list small { opacity: 0.7; margin-inline-start: 0.4rem; }
[dir="rtl"] .gov-matrix th,
[dir="rtl"] .gov-matrix td { text-align: right; }
[dir="rtl"] .gov-matrix th:not(:first-child),
[dir="rtl"] .gov-matrix .gov-cell { text-align: center; }
/* Narrow phones: tighten the role columns and keep the capability name readable
   so the matrix needs as little horizontal scrolling as possible. */
@media (max-width: 640px) {
  .gov-matrix { font-size: 0.85rem; }
  .gov-matrix th,
  .gov-matrix td { padding: 0.5rem 0.4rem; }
  .gov-matrix th:not(:first-child),
  .gov-matrix .gov-cell { width: 4.25rem; }
  .gov-matrix th:first-child,
  .gov-matrix td:first-child { min-width: 9.5rem; }
  .gov-super-list li { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}


/* ============================================================================
   Admin Settings — sectioned layout with a sticky rail, live search, and
   theme previews. Token-driven, so both themes and RTL come for free.
   ========================================================================== */
.settings-shell {
  display: grid;
  grid-template-columns: 218px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.settings-rail {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 4px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.settings-rail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
  position: relative;
  transition: background .18s ease, color .18s ease;
}
.settings-rail-item::before {
  /* The active notch — a brand tick on the reading edge. */
  content: '';
  position: absolute;
  inset-inline-start: -10px;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 3px;
  background: transparent;
  transition: background .18s ease;
}
.settings-rail-item:hover { background: var(--surface-3); color: var(--text); }
.settings-rail-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.settings-rail-item.active { background: var(--brand-soft); color: var(--brand-fg); }
.settings-rail-item.active::before { background: var(--brand); }
.settings-rail-item.is-dim { opacity: .35; }
.rail-glyph { width: 17px; height: 17px; display: inline-flex; flex: none; }
.rail-glyph svg { width: 100%; height: 100%; }

.settings-content { display: grid; gap: 26px; min-width: 0; }

.settings-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--muted);
  box-shadow: var(--shadow-sm);
  transition: border-color .18s ease;
}
.settings-search:focus-within { border-color: var(--brand-fg); color: var(--brand-fg); }
.settings-search svg { width: 16px; height: 16px; flex: none; }
.settings-search input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 12px 0;
  font: inherit;
  font-size: 14px;
  color: var(--text);
}
.settings-search input:focus { outline: none; }
.settings-search-empty { margin: -12px 0 0; font-size: 13.5px; color: var(--muted); }

.settings-section { display: grid; gap: 14px; scroll-margin-top: 16px; }
.settings-section-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.section-glyph {
  width: 34px;
  height: 34px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  color: var(--brand-fg);
}
.section-glyph svg { width: 18px; height: 18px; }
.settings-section-head h2 { margin: 0; font-size: 16.5px; }
.settings-section-head p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }

.settings-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 14px;
  align-items: start;
}
.admin-main .settings-cards .admin-card + .admin-card { margin-top: 0; }
.settings-item[hidden], .settings-section[hidden] { display: none; }
.settings-cards .admin-card { transition: border-color .18s ease, box-shadow .18s ease; }
.settings-cards .admin-card:hover { border-color: rgba(var(--brand-rgb), .28); box-shadow: var(--shadow-md); }

/* ---- Settings card anatomy -------------------------------------------------
   Every card reads top to bottom as: what it is, what it does, (optionally) why
   it matters, the controls, then the save action. The rationale is a disclosure
   rather than a paragraph — it is reference material, and a settings page that
   opens with five essays is unreadable. */
/* Scoped to .admin-main to outrank `.admin-main .admin-card`, which sets the
   20px padding and 16px radius this layout has to agree with. */
.admin-main .set-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 20px 0;
}
.set-card-head h3 { margin: 0; font-size: 15px; letter-spacing: -0.01em; }
.set-card-desc { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

.set-why { margin: -4px 0 0; font-size: 12.5px; }
.set-why > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  transition: background .16s ease, color .16s ease;
}
.set-why > summary::-webkit-details-marker { display: none; }
.set-why > summary::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: none;
  border-inline-end: 1.6px solid currentColor;
  border-block-end: 1.6px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .18s ease;
}
.set-why > summary:hover { background: var(--surface-3); color: var(--text); }
.set-why > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.set-why[open] > summary::before { transform: rotate(45deg); }
/* The chevron is an L of two logical borders, so RTL already mirrors the closed
   state. The open state has to be re-derived: the same +45° that points the
   LTR corner down points the mirrored one up. */
html[dir="rtl"] .set-why[open] > summary::before { transform: rotate(-135deg); }
.set-why > p {
  margin: 8px 0 0;
  padding-inline-start: 11px;
  border-inline-start: 2px solid var(--line);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--muted);
}

/* A hint belongs to the control above it, so it is tied tight and never
   competes with the card's own description. */
.set-hint { margin: 6px 0 0; font-size: 12px; line-height: 1.55; color: var(--muted); }
.set-subhead { margin-top: 2px; }
.set-subhead h4 {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  /* --muted-2 measured 3.0-3.9:1 in every theme; at 11px this is small text and
     needs 4.5:1, so it uses the same muted as the rest of the card's prose. */
  color: var(--muted);
}
.set-checks { display: grid; gap: 9px; }

/* The save action gets its own strip so every card ends the same way and the
   primary action never hides at the end of a field grid. */
.admin-main .set-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  /* -20px cancels the card's horizontal padding so the strip spans edge to
     edge; 15px is its 16px radius less the 1px border, so the corners sit
     flush instead of clipping a sliver of card surface. */
  margin: 6px -20px 0;
  padding: 13px 20px;
  border-block-start: 1px solid var(--line);
  background: var(--surface-2);
  border-end-start-radius: 15px;
  border-end-end-radius: 15px;
}
/* The forms are .form-grid, so leave the grid (and its 12px gap) alone and just
   let the action strip span every column. */
.admin-main .set-card > form.form-grid .set-actions { grid-column: 1 / -1; }
/* The theme grid is its card's only content, so it carries the bottom padding
   the action strip would otherwise provide. */
.admin-main .set-card > .theme-preview-row { margin-bottom: 20px; }

/* Theme previews — miniature shells painted in each theme's real palette. */
.theme-preview-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.theme-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.theme-preview:hover { border-color: rgba(var(--brand-rgb), .4); box-shadow: var(--shadow-sm); }
.theme-preview:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.theme-preview.active { border-color: var(--brand-fg); background: var(--brand-soft); }
.tp-mock {
  flex: none;
  width: 84px;
  height: 56px;
  display: flex;
  gap: 3px;
  padding: 4px;
  border-radius: 8px;
  background: var(--tp-bg);
  border: 1px solid var(--tp-line);
  overflow: hidden;
}
.tp-side { width: 12px; border-radius: 3px; background: var(--tp-brand); }
.tp-body { flex: 1; display: grid; gap: 3px; grid-template-rows: 8px 1fr 10px; }
.tp-top { border-radius: 2px; background: var(--tp-soft); }
/* The mock must paint the theme it is OFFERING, not the one in force — with
   var(--surface) the dark option previewed white cards. */
.tp-card { border-radius: 3px; background: var(--tp-card, var(--surface)); border: 1px solid var(--tp-line); }
.tp-card.short { width: 70%; }
/* A <button> inherits the UA's black, which only looked right on a light
   ground by accident — the theme cards go unreadable in dark without this. */
.theme-preview { color: var(--text); }
.tp-meta { display: grid; gap: 1px; min-width: 0; }
.tp-meta strong { font-size: 14px; color: var(--text); }
.tp-meta span { font-size: 12.5px; color: var(--muted); }
.tp-check { margin-inline-start: auto; width: 20px; height: 20px; color: var(--brand-fg); flex: none; }
.tp-check svg { width: 100%; height: 100%; }

/* Responsive: the rail becomes a horizontal chip row above the content. */
@media (max-width: 980px) {
  .settings-shell { grid-template-columns: 1fr; }
  .settings-rail {
    position: static;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    padding: 8px;
  }
  .settings-rail-item::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .settings-rail-item, .settings-search, .settings-cards .admin-card, .theme-preview { transition: none; }
}

/* ==================================================================
   NASEEJ WEAVE — component layer.
   Appended last on purpose: it must win over the hardcoded var(--brand-soft) /
   var(--brand) values scattered mid-file. Every rule here re-expresses a
   surface in the weave language: hairline structure, crisp radii,
   No behavior, markup, or layout metrics change.
   ================================================================== */

/* --- The seam: topbar carries the woven band ---------------------- */
.topbar {
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid var(--line);
  position: sticky;
}
[data-theme="red"] .topbar { background: rgba(255, 255, 255, .92); }

/* --- Navigation: the active item ----------------------------------- */
.hub-nav-item {
  color: var(--muted);
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: background .15s ease, color .15s ease;
}
.hub-nav-item:hover { background: var(--surface-3); color: var(--text); }
.hub-nav-item.active,
.admin-hub-shell .hub-nav-item.active {
  background: var(--brand-soft);
  border-color: transparent;
  color: var(--brand-fg);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--brand);
}
html[dir="rtl"] .hub-nav-item.active,
html[dir="rtl"] .admin-hub-shell .hub-nav-item.active {
  box-shadow: inset -3px 0 0 var(--brand);
}

/* --- Buttons: crisp instruments, not gradient pills --------------- */
.btn {
  border-radius: var(--radius-sm);
  font-weight: 700;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn.primary {
  background: var(--brand);
  box-shadow: none;
  border: 1px solid var(--brand-2);
}
.btn.primary:hover { background: var(--brand-2); }
.btn.secondary {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
}
.btn.secondary:hover { border-color: var(--brand-fg); color: var(--brand-fg); }
.btn.ghost:hover { color: var(--brand-fg); }

/* --- Cards & tiles: structure from line, not blur ----------------- */
.agent-tile,
.home-agent-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.agent-tile:hover,
.home-agent-card:hover {
  border-color: var(--brand-fg);
  box-shadow: var(--shadow-md);
}
.naseej-agent-tile { border-inline-start: 3px solid var(--brand); }
.naseej-agent-avatar { background: var(--brand-soft); color: var(--brand-fg); }

/* --- Login: the first thing anyone sees --------------------------- */
.login-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

/* --- Data is set in the mono voice -------------------------------- */
.stat-value, .metric-value, .kpi-value,
.cost-value, .usage-value,
td.num, .table-num, .mono-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
table { font-variant-numeric: tabular-nums; }

/* --- Chips & pills: quiet, bordered, legible ---------------------- */
.category-chip {
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  transition: border-color .15s ease, color .15s ease;
}
.category-chip:hover { border-color: var(--brand-fg); color: var(--brand-fg); }
.category-chip.active {
  background: var(--brand);
  border-color: var(--brand-fg);
  color: #fff;
}

/* --- Focus: visible everywhere, brand-colored --------------------- */
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* --- Motion discipline -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .agent-tile, .home-agent-card, .btn, .hub-nav-item, .category-chip {
    transition: none;
  }
}

/* --- The seam, on every shell ------------------------------------- */
/* Admin console has no topbar at desktop: the band sits under the
   sidebar brand, where the loom "starts". Absolute so flex layouts
   never treat it as a child. */
.hub-sidebar-brand { position: relative; }
.hub-mobile-topbar { position: relative; }

/* --- Login (current shell): the seam opens the panel --------------- */
/* The live login is .agent-login-panel inside .agent-login-shell (the
   .login-card rules above cover the legacy screen only). The band sits
   above the heading — the first woven thread a user sees. */
.agent-login-panel > h2 { position: relative; padding-top: 14px; }

/* ==================================================================
   NASEEJ WEAVE — pass 2: homepages & dashboards.
   Numbers are set in the mono voice, charts are flat brand bars on
   quiet tracks, and hover feedback is an underline — not a card
   levitating. Appended after pass 1;
   overrides the hardcoded ac-* values and the translateY hovers.
   ================================================================== */

/* --- Section titles: quiet uppercase eyebrows ---------------------- */
.home-section-head h3::before,
.admin-main .ac-section-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- User home: hero ----------------------------------------------- */
.home-eyebrow { letter-spacing: .09em; }
.home-hero { padding-bottom: 14px; border-bottom: 1px solid var(--line); }

/* --- User home: stat row — the counting frame ---------------------- */
.home-stat {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.home-stat:hover:not(.passive) {
  transform: none;
  box-shadow: var(--shadow-sm);
  border-color: var(--brand-fg);
}
.home-stat::after {
  content: "";
  position: absolute;
  inset-inline: 14px;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: transform .18s ease;
}
html[dir="rtl"] .home-stat::after { transform-origin: 100% 0; }
.home-stat:hover:not(.passive)::after,
.home-stat:focus-visible::after { transform: scaleX(1); }
.home-stat-ic {
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.home-stat-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* --- User home: launch cards & side lists -------------------------- */
.home-launch-card:hover { transform: none; box-shadow: var(--shadow-sm); }
.hub-list-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.hub-list-row em {
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: normal;
  color: var(--soft);
}

/* --- Admin dashboard: KPI + ops tiles ------------------------------ */
.admin-main .ac-tile,
.admin-main .admin-stat-tile {
  border-radius: var(--radius-md);
  border-color: var(--line);
  border-top-width: 3px;         /* inline accent color stays semantic */
  box-shadow: var(--shadow-sm);
}
.admin-main .ac-tile-label,
.admin-main .admin-stat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.admin-main .ac-tile-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.admin-main .ac-tile-value.is-text { font-family: var(--font-body); font-weight: 700; }
.admin-main .admin-stat-tile strong {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.admin-main .admin-stat-tile strong.is-text { font-family: var(--font-body); font-weight: 700; }

/* --- Admin dashboard: charts are woven, not airbrushed ------------- */
.admin-main .ac-chart-card,
.admin-main .ac-leader-card {
  border-radius: var(--radius-md);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.admin-main .ac-bar-track {
  height: 6px;
  border-radius: 3px;
  background: var(--surface-3);
}
.admin-main .ac-bar-fill {
  border-radius: 3px;
  background: var(--brand);
}
.admin-main .ac-bar-head em {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--brand-fg);
}
.admin-main .ac-vbar-fill {
  border-radius: 3px 3px 0 0;
  background: var(--brand);
}
.admin-main .ac-vbar-val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.admin-main .ac-vbar-label { color: var(--soft); }

/* --- Admin dashboard: leaderboard numerals ------------------------- */
.admin-main .ac-leader-calls,
.admin-main .ac-leader-err,
.admin-main .ac-leader-share {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* --- Admin dashboard: quick actions -------------------------------- */
.admin-main .ac-quick-btn {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.admin-main .ac-quick-btn:hover { border-color: var(--brand-fg); color: var(--brand-fg); }
.admin-main .ac-quick-btn.is-primary {
  background: var(--brand);
  border-color: var(--brand-2);
  color: #fff;
}
.admin-main .ac-quick-btn.is-primary:hover { background: var(--brand-2); color: #fff; }

/* --- Motion discipline (pass 2 surfaces) --------------------------- */
@media (prefers-reduced-motion: reduce) {
  .home-stat::after { transition: none; }
}

/* --- Fix (pre-existing, surfaced by this pass's 375px audit): the
   leaderboard pins rows to min-width 480px inside an overflow:hidden
   card, clipping the Errors/Share columns unreachably on phones —
   the same defect class as the governance matrix. Let the inner
   leader region scroll; keep the page from ever scrolling sideways. */
.admin-main .ac-leader {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* --- Fix (pre-existing): .ac-link measured 18px tall — under the
   24px WCAG 2.2 AA floor. Height only; text size unchanged. */
.admin-main .ac-link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* --- Weave pass 2.1: dashboard density on phones -------------------- */
/* The KPI/ops grids use minmax(180px,1fr), so a ~339px container can
   only fit ONE column and every number gets a full row of white space.
   Below 640px, pair the numeric tiles two-up and tighten the frame;
   a text-valued tile (e.g. "Most used: Demo CRM Assistant") spans the
   full row so long agent names never crush a half-width cell. */
@media (max-width: 640px) {
  .admin-main .ac-tiles,
  .admin-main .admin-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .admin-main .ac-tile,
  .admin-main .admin-stat-tile {
    padding: 12px 14px;
    gap: 4px;
  }
  .admin-main .ac-tile-value { font-size: 24px; }
  .admin-main .ac-tile-value.is-text { font-size: 15px; }
  .admin-main .admin-stat-tile strong { font-size: 24px; }
  /* text KPIs get the full row */
  .admin-main .ac-tile:has(.ac-tile-value.is-text),
  .admin-main .admin-stat-tile:has(strong.is-text) {
    grid-column: 1 / -1;
  }
  /* quick actions sit as a tight pair-per-row band too */
  .admin-main .ac-quick { gap: 8px; }
  .admin-main .ac-quick-btn { flex: 1 1 calc(50% - 8px); justify-content: center; }
}

/* An odd numeric tile right before the full-row text tile would sit
   beside a blank cell — give the orphan the full row instead. The
   :nth-child(odd):nth-last-child(2) pair only matches a true orphan,
   so even-numbered fleets keep their clean 2-up rows. */
@media (max-width: 640px) {
  .admin-main .ac-tile:nth-child(odd):nth-last-child(2):not(:has(.is-text)),
  .admin-main .admin-stat-tile:nth-child(odd):nth-last-child(2):not(:has(.is-text)) {
    grid-column: 1 / -1;
  }
}

/* --- Fix (pre-existing, surfaced by the post-merge settings sweep):
   .inline-check and .connection-use-main checkboxes rendered at the
   16px browser default — under the WCAG 2.2 AA 24px floor. Same
   remedy as the governance matrix: 1.5rem and a real pointer. */
.inline-check input[type="checkbox"],
.connection-use-main input[type="checkbox"] {
  width: 1.5rem;
  height: 1.5rem;
  /* the global checkbox rule pins flex-basis/min-width to 16px, which
     beats `width` inside these flex labels — override all three */
  min-width: 1.5rem;
  flex: 0 0 1.5rem;
  cursor: pointer;
}

/* --- Fix (pre-existing): `.agent-tile-head span { display:block }` was
   written for the label/category text spans but also catches the avatar
   span at higher specificity than `.agent-avatar-mini`, flattening its
   grid — place-items goes inert and every icon/initials glyph pins to
   the box's top-left (image avatars masked it by filling the box).
   Re-assert the centering for avatars in every context. */
span.agent-avatar-mini,
.agent-tile-head .agent-avatar-mini,
.hub-list-row .agent-avatar-mini {
  display: grid;
  place-items: center;
}

/* ==================================================================
   Admin copilot + Pipelines/Playbooks refinement.
   The copilot is a quiet utility, not a hero feature: bordered card,
   brand accent only on the primary action and the ready pill. The
   pipeline/playbook pages get the same page rhythm as the rest of
   the console so moving between tabs stops feeling like two apps.
   ================================================================== */

/* --- Assistant settings card --------------------------------------- */
.cp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.cp-head strong { font-size: 14px; }
.cp-status {
  flex: none;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--muted);
}
.cp-status.on { background: var(--success-soft); border-color: transparent; color: var(--success-strong); }

.cp-inherit { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13.5px; font-weight: 600; }
.cp-inherit input[type="checkbox"] { width: 1.5rem; height: 1.5rem; min-width: 1.5rem; flex: 0 0 1.5rem; cursor: pointer; }

.cp-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px; margin-top: 16px;
}
/* Inheriting: the override fields stay reachable but read as secondary. */
.cp-grid.is-inherited { opacity: .62; }

.cp-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.cp-msg { font-size: 12.5px; font-weight: 600; }
.cp-msg.ok { color: var(--success-strong); }
.cp-msg.bad { color: var(--danger); }
.cp-privacy { margin-top: 12px; }

/* --- "Draft with AI" buttons --------------------------------------- */
.cp-btn { display: inline-flex; align-items: center; gap: 8px; }
.cp-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* --- Drafted-pipeline review card ---------------------------------- */
/* Dashed edge = "proposed, not saved yet"; it becomes a real card only
   after the admin saves it through the normal editor. */
.cp-suggestion {
  margin-top: 16px; padding: 16px 18px;
  background: var(--surface);
  border: 1px dashed var(--brand);
  border-radius: var(--radius-md);
  display: grid; gap: 12px;
}
.cp-suggestion > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cp-suggestion-eyebrow {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand-fg); margin-bottom: 2px;
}
.cp-suggestion > header strong { font-size: 15px; }
.cp-source { flex: none; font-size: 11px; color: var(--muted); }
.cp-suggestion p { margin: 0; font-size: 13px; color: var(--muted); max-width: 70ch; }
.cp-chain { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cp-chain span {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 600;
}
.cp-chain em {
  font-style: normal; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  color: #fff; background: var(--brand); border-radius: 50%;
  width: 18px; height: 18px; display: grid; place-items: center;
}
.cp-suggestion-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* --- Pipelines page rhythm ------------------------------------------ */
.admin-main .ac-toolbar-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.admin-main .ac-toolbar.between { justify-content: space-between; align-items: center; }
.admin-main .ac-intro { margin: 0; font-size: 13px; color: var(--muted); max-width: 72ch; }
.admin-main .ac-rows { display: grid; gap: 14px; margin-top: 18px; }

.pl-card { border-radius: var(--radius-md); }
.pl-card-head { align-items: flex-start; }
/* The chain is the point of a pipeline — give it room and let it wrap
   on narrow screens instead of squeezing the stage labels. */
.pl-chain { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pl-node {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 600;
}
.pl-node em {
  font-style: normal; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  color: var(--brand-fg); background: var(--brand-soft); border-radius: 50%;
  width: 18px; height: 18px; display: grid; place-items: center; flex: none;
}
.pl-arrow { color: var(--faint); font-size: 15px; }
.pl-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pl-meta { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.pl-meta svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; }

/* --- Playbooks page: match the pipelines rhythm --------------------- */
.playbook-suggestions { display: grid; gap: 12px; margin-bottom: 22px; }
.playbook-suggestions h3 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 640px) {
  .cp-grid { grid-template-columns: 1fr; }
  .cp-actions .btn, .cp-suggestion-actions .btn { flex: 1 1 100%; }
  .admin-main .ac-toolbar.between { align-items: stretch; }
  .admin-main .ac-toolbar-actions .btn, .admin-main .ac-toolbar-actions .ac-add-btn { flex: 1 1 calc(50% - 5px); justify-content: center; }
}

/* Pipeline editor checkboxes had the 16px browser default — under the 24px
   WCAG 2.2 AA floor, same defect already fixed for governance and settings.
   The global input rule pins flex-basis/min-width, so override all three. */
.pl-check input[type="checkbox"],
.pl-switch input[type="checkbox"] {
  width: 1.5rem; height: 1.5rem; min-width: 1.5rem; flex: 0 0 1.5rem; cursor: pointer;
}

/* ============================================================================
   Agent tiles — one anatomy for every card (incl. the Naseej meetings tile):
   equal heights in the grid, clamped descriptions, bottom-pinned Open button.
   ========================================================================== */
.agent-tile { display: flex; flex-direction: column; }
.agent-tile p {
  flex: 1 1 auto;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 0;
}
.agent-tile .agent-caps { margin-top: auto; }
.agent-tile .agent-tile-open { margin-top: 12px; }
.favorite-btn.spacer { visibility: hidden; pointer-events: none; }
.naseej-agent-avatar {
  background: var(--brand-soft);
  color: var(--brand-fg);
}

/* Home hero CTA — the flagship action gets the hero's empty side. */
.home-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.home-hero-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 360px;
  padding: 14px 18px;
  background: var(--brand);
  color: #fff;
  border: 0;
  border-radius: var(--radius-md);
  text-align: start;
  cursor: pointer;
  font: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease;
}
.home-hero-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.home-hero-cta:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 3px; }
.home-hero-cta-ic {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  background: rgba(255,255,255,.16);
  border-radius: 10px;
}
.home-hero-cta-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.home-hero-cta-body { display: grid; gap: 1px; min-width: 0; }
.home-hero-cta-body strong { font-size: 14.5px; }
.home-hero-cta-body small { font-size: 12px; opacity: .85; line-height: 1.4; }
.home-hero-cta-arrow { margin-inline-start: auto; font-size: 17px; opacity: .9; }
[dir="rtl"] .home-hero-cta-arrow { transform: scaleX(-1); }
@media (max-width: 760px) { .home-hero-cta { max-width: 100%; width: 100%; } }
@media (prefers-reduced-motion: reduce) { .home-hero-cta { transition: none; } }

/* --- Meeting detail: admin-only sections ---------------------------- */
/* The verbatim transcript and the delivery log are administrator surfaces;
   the badge says so rather than leaving it implicit. */
.vx-admin-only {
  margin-inline-start: 8px; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); background: var(--surface-3);
  border-radius: 999px; padding: 2px 8px; vertical-align: middle;
}
.vx-delivery { display: grid; gap: 6px; margin: 8px 0 4px; }
.vx-delivery-off { color: var(--muted); font-size: 12.5px; }
.vx-delivery-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); font-size: 12.5px;
}
.vx-delivery-who { font-weight: 600; }
.vx-delivery-status {
  font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
}
.vx-delivery-status.is-sent { background: var(--success-soft); color: var(--success-strong); }
.vx-delivery-status.is-failed { background: var(--danger-soft); color: var(--danger); }
.vx-delivery-status.is-skipped { background: var(--warning-soft); color: var(--warning-strong); }
.vx-delivery-status.is-not_attempted { background: var(--surface-3); color: var(--muted); }
.vx-delivery-err { color: var(--danger); font-size: 11.5px; flex-basis: 100%; }

/* ===========================================================================
   THEME OVERRIDES FOR THE FIXED NAVY CHROME
   The admin sidebar and the user shell nav carry their own token set
   (--admin-* / --hub-navy-*) whose base values are declared on :root further
   up (--admin-navy at ~:9580, --hub-navy at ~:10343). Without these overrides
   the sidebar stays corporate navy while the content goes dark (or crimson),
   which reads as two products bolted together.

   The selector is html[data-theme=…] (0,1,1), not [data-theme=…] (0,1,0), so
   it outranks :root (0,1,0) on specificity ALONE. It used to rely on being
   last in the file — equal specificity, source order decides — which is a
   booby trap in a stylesheet whose established habit is to append token
   blocks at the end. Commit e135310 duly appended one 38 lines below this and
   only missed breaking the chrome because it declared a disjoint property set.
   Position no longer matters; append freely.
   =========================================================================== */
html[data-theme="dark"] {
  --admin-navy: #1C1917;
  --admin-navy-2: #14110F;
  --admin-ink: #EDE8E3;
  --admin-ink-dim: #A79C94;   /* was #6E89A3: 4.0:1 — under AA on this ground */
  --admin-group: #A79C94;     /* was #5D7A96: 3.3:1 */
  --hub-navy: #1C1917;
  --hub-navy-ink: #EDE8E3;
  --hub-navy-dim: #C9C0B9;
  --hub-navy-mute: #A79C94;
  --hub-navy-idle: #A79C94;
  --hub-cyan: #E2646E;
}
html[data-theme="naseej"] {
  /* The chrome takes the wordmark's warm black rather than a blue navy, so the
     shell and the crimson content read as one cloth. */
  --admin-navy: #241D1B;
  --admin-navy-2: #1A1614;
  --admin-ink: #F3EDE9;
  --admin-ink-dim: #B3A79F;
  --admin-group: #B3A79F;
  --hub-navy: #241D1B;
  --hub-navy-ink: #F5F0EC;
  --hub-navy-dim: #CFC5BE;
  --hub-navy-mute: #B3A79F;
  --hub-navy-idle: #B3A79F;
  --hub-cyan: #E2646E;
}

/* ===========================================================================
   ACCENT SCALE — the colours used to tell things APART
   Agent identity dots, dashboard stat tiles and chart series need several
   distinguishable colours. They used to be a fixed blue/cyan/green/amber/violet
   set written into app.js, which is why blue survived everywhere even after the
   surfaces were themed. They are tokens now, so each theme supplies a family
   that belongs to it. The Naseej families are warm and earthy — crimson, clay,
   bronze, plum, olive — and every one clears AA as text on its own ground.
   =========================================================================== */
:root,
[data-theme="white"] {
  --accent-1: #005A8D;
  --accent-2: #0E7C93;
  --accent-3: #2B7253;
  --accent-4: #8A5A00;
  --accent-5: #53389E;
}
[data-theme="red"] {
  --accent-1: #003F66;
  --accent-2: #0E7C93;
  --accent-3: #2B7253;
  --accent-4: #8A5A00;
  --accent-5: #53389E;
}
[data-theme="naseej"] {
  --accent-1: #A11E25;   /* the brand crimson */
  --accent-2: #C2410C;   /* clay */
  --accent-3: #8A5A00;   /* bronze */
  --accent-4: #7B2D4E;   /* plum */
  --accent-5: #4A5D3A;   /* olive */
}
[data-theme="dark"] {
  --accent-1: #E2646E;
  --accent-2: #F08A5D;
  --accent-3: #D9A441;
  --accent-4: #C97BA0;
  --accent-5: #8FB07A;
}

/* Standing minutes recipients — visually a sibling of the delivery rows, but the
   add-form is a distinct affordance because naming a recipient crosses the
   agent-permission boundary and should not feel like an incidental toggle. */
.am-recip-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.am-recip-form input,
.am-recip-form select {
  flex: 1 1 150px;
  min-width: 0;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.am-recip-form input:focus-visible,
.am-recip-form select:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.am-recip-form button { flex: 0 0 auto; }
.vx-delivery-row.is-revoked { opacity: .55; }
.vx-delivery-row.is-revoked .vx-delivery-who { text-decoration: line-through; }

/* ---------------------------------------------------------------------------
   MOBILE NORMALIZATION
   Every number below was MEASURED in the browser at 320px and 375px, not
   inferred from the stylesheet — this file has enough duplicate selectors that
   reading it is not the same as knowing what renders. These rules are last in
   the file so they win on source order against the earlier copies.
   --------------------------------------------------------------------------- */

/* Quick prompts: ONE scrolling row, not a full-width stack.
   Measured at 320px: three chips, each 300x57, stacked to 195px — 27% of the
   viewport spent on suggestions before a single message was visible, and it
   grows with every extra chip the suggestion agent returns. Chips are an offer,
   not content: they get one row, and the rest scrolls sideways. Height becomes
   fixed regardless of how many arrive. */
@media (max-width: 900px) {
  .agent-workspace-bottom .quick-prompts {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .agent-workspace-bottom .quick-prompts::-webkit-scrollbar { display: none; }

  .agent-workspace-bottom .prompt-chip {
    flex: 0 0 auto;
    /* The wrapping variants above are what made each chip full-width and 57px
       tall; a chip that cannot wrap is one line by construction.
       Deliberately NO text-overflow: ellipsis and no max-width. An earlier fix
       established that a suggestion must be fully readable BEFORE it is
       clicked — a clipped chip is a chip nobody can evaluate — and there is a
       test guarding it. The chip therefore keeps its full text at its natural
       width, and the ROW scrolls to reach the rest. That satisfies both
       constraints: nothing is clipped, and the block stays one line tall
       however many suggestions arrive. */
    white-space: nowrap;
    scroll-snap-align: start;
  }
}

/* Touch targets: 44px, the Apple HIG / WCAG 2.5.5 floor.
   Measured below it: .speak-btn 28x28, .msg-more-btn 34x26,
   .composer-icon-btn 42x42, .hub-mobile-bell and .hub-mobile-avatar 32x32,
   .lang-option 48x27, .link-btn 83x40.

   `pointer: coarse` OR a narrow viewport, deliberately both. Coarse alone is
   the semantically correct test — the constraint is a fingertip, not a screen
   size — but a desktop browser at 320px reports `fine`, so coarse alone left
   these unchanged in every emulator AND in the Playwright regression test,
   which is the one place this would otherwise be caught. A narrow desktop
   window getting 44px targets costs nothing.

   The BOX grows; the icon inside it does not, so nothing looks inflated. */
@media (pointer: coarse), (max-width: 900px) {
  .speak-btn,
  .msg-action-btn,
  .msg-more-btn,
  .composer-icon-btn,
  .hub-mobile-bell,
  .hub-mobile-avatar,
  .lang-option,
  .link-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* These carry a FIXED width/height earlier in the file, so a min-* alone
     loses. Overridden explicitly rather than by raising the original, which
     would enlarge them for mouse users too. */
  .composer-icon-btn,
  .hub-mobile-bell,
  .hub-mobile-avatar {
    width: 44px;
    height: 44px;
  }

  /* A text button should grow by padding, not stretch its label box. */
  .lang-option,
  .link-btn {
    padding-block: 10px;
  }
}

/* Small controls whose VISUAL size is the design: a 22px checkbox and a 24px
   dismiss cross should stay 22px and 24px. Growing the box would make them
   look like buttons. A transparent pseudo-element centred on each extends the
   touch area to 44px without moving a pixel of what is drawn — the standard
   fix, and the only one that satisfies both the design and the finger. */
@media (pointer: coarse), (max-width: 900px) {
  .task-row-check,
  .upload-chip-x {
    position: relative;
  }
  .task-row-check::before,
  .upload-chip-x::before {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    /* Logical inset-inline-start + a symmetric translate, so this lands
       correctly in the Arabic RTL layout too. */
    width: 44px;
    height: 44px;
  }

  /* Buttons whose box IS the target: raise the floor. .aggregate-group-actions
     already had a 44px rule, overwritten by a later 42px copy — the duplicate
     -selector trap this file is full of. Declared here, last, so it wins. */
  .aggregate-group-actions .small-btn,
  .aggregate-reset-link,
  .agent-workspace-nav .nav-item,
  .chat-mobile-nav .nav-item,
  .card-actions .card-action-primary,
  .agent-tile .btn {
    min-height: 44px;
  }
}

/* Screens the first pass did not reach: the agents directory, the home Action
   Center, and the suggested-action card. Measured at 375px: .category-chip 39px,
   .favorite-btn 27x29, the "Request access" CTA 42px. The Action Center pair and
   the suggested-action CTA come from a source survey — no seed data renders them
   here, but their rules are unambiguous (34px and 40px floors). */
@media (pointer: coarse), (max-width: 900px) {
  /* Approve / Dismiss sit side by side on the home Action Center with opposite
     and hard-to-undo consequences (app.js renders them as a pair). Two adjacent
     34px targets is the riskiest sizing in the app, so it is worth naming. */
  .proposal-card-actions .btn,
  /* The one CTA on the agent's suggested-next-action card. Its only floor lived
     in a max-width:640px block, so 641-768px fell through to ~33px. */
  .suggested-action-card .small-btn,
  .category-chip {
    min-height: 44px;
  }

  /* The primary "Open agent" / "Request access" call to action on every card.
     It carries a FIXED height (42px at <=760px, 36px above that), so it cannot
     grow with content — min-height wins over height and lifts both cases. */
  .home-agent-card .btn,
  .agent-tile .btn,
  .agent-tile .btn.secondary.block,
  .agent-card .btn.block {
    min-height: 44px;
    height: auto;
  }

  /* The favourite star is a 27x29 icon and should stay one: the visual size is
     the design, so it gets an expanded hit area rather than a bigger box. */
  .favorite-btn {
    position: relative;
  }
  .favorite-btn::before {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
  }
}

/* Visually hidden but announced. The conversation picker needs a real <label>
   for screen readers; aria-label alone is weaker on a <select> in some
   combinations, and this file had no such utility yet. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- needs_input card --------------------------------------------------- */
/* One clear ask instead of a question loop. Styled as INFORMATION, not as an
   error: nothing has failed — the agent is telling the user what it still needs.
   Sits inside the agent bubble so it reads as part of the reply rather than as
   chrome bolted on after it. */
.needs-input-box {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: .9rem;
}
.needs-input-box strong { display: block; margin-bottom: 4px; }
.needs-input-box p { margin: 0 0 6px; }
.needs-input-box ul { margin: 0 0 8px; padding-inline-start: 18px; }
.needs-input-box li { margin-bottom: 2px; }
.needs-input-box .card-actions { margin-top: 8px; }

/* ---- conversation rail ------------------------------------------------- */
/* Rail + chat are their OWN flex row, not two children of the workspace grid.
   That grid assigns tracks positionally, so any container with a different
   child set — the admin "view as user" preview — placed the rail beside the
   composer with the message stream stranded above it. As one flex row the pair
   is a single child wherever it is embedded, and nothing depends on track order.

   The desktop/mobile switch is a CONTAINER query, not a viewport query: the
   admin preview embeds this workspace in a ~700px box on a 1900px display, so a
   viewport media query handed it the two-column desktop layout inside a narrow
   panel. The rail should follow the space it actually has. */
/* NO size containment here, deliberately. `container-type: inline-size` makes
   an element's intrinsic width compute as if it were empty, so any shrink-to-fit
   ancestor collapses around it — that shrank the entire admin preview to ~360px
   and made it render the mobile layout on a 1876px display.
   The breakpoint is instead a measured class (.rail-wide / .rail-narrow) set by
   a ResizeObserver on the body row: same behaviour, no containment, and it works
   for the header button which lives outside that row. */
.workspace-body {
  display: flex;
  min-height: 0;
  min-width: 0;
  position: relative;
}
.workspace-chat {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.workspace-chat > .agent-workspace-stream { flex: 1 1 auto; min-height: 0; }
.workspace-chat > .agent-workspace-bottom { flex: none; }

.conversation-rail {
  display: none;              /* narrow default: opened as a sheet from the header */
  flex-direction: column;
  min-height: 0;
  background: var(--surface);
  border-inline-end: 1px solid var(--border);
}
.conv-panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.conv-stub { display: none; }

.conv-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 14px 10px;
}
.conv-head-label {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.conv-count {
  min-width: 20px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: .69rem;
  font-weight: 700;
  text-align: center;
}
.conv-collapse,
.conv-close {
  margin-inline-start: auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--surface-3);
  color: var(--muted);
  cursor: pointer;
}
.conv-collapse + .conv-close { margin-inline-start: 0; }
.conv-collapse svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.conv-collapse:hover, .conv-close:hover { background: var(--border); color: var(--brand); }
.conv-collapse:focus-visible, .conv-close:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Dashed, because "start something new" is an empty slot rather than an action
   on existing content. The reference draws the same distinction. */
.conv-new {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 12px 10px;
  padding: 10px;
  border: 1.5px dashed color-mix(in oklab, var(--brand) 35%, var(--border));
  border-radius: 11px;
  background: color-mix(in oklab, var(--brand) 6%, transparent);
  color: var(--brand);
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
.conv-new:hover { background: color-mix(in oklab, var(--brand) 12%, transparent); border-color: var(--brand); }
.conv-new:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.conv-new-plus { font-size: 1rem; line-height: 1; }

.conv-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.conv-item {
  display: flex;
  align-items: flex-start;
  border: 1px solid transparent;
  border-radius: 11px;
}
.conv-item:hover { background: var(--surface-2); }
.conv-item.active {
  background: color-mix(in oklab, var(--brand) 9%, transparent);
  border-color: color-mix(in oklab, var(--brand) 24%, transparent);
}
.conv-open {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 11px;
  background: none;
  border: 0;
  font: inherit;
  text-align: start;
  color: var(--text);
  cursor: pointer;
}
.conv-open:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 11px; }

.conv-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--border);
}
.conv-item.active .conv-dot { background: var(--brand); }

.conv-text { min-width: 0; display: flex; flex-direction: column; }
.conv-title, .conv-preview, .conv-meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conv-title { font-size: .78rem; font-weight: 600; }
.conv-item.active .conv-title { font-weight: 700; }
.conv-preview { margin-top: 3px; font-size: .69rem; color: var(--muted); }
.conv-meta { margin-top: 5px; font-size: .63rem; font-weight: 600; color: color-mix(in oklab, var(--muted) 70%, transparent); }

.conv-delete {
  flex: 0 0 auto;
  align-self: center;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  margin-inline-end: 6px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: color-mix(in oklab, var(--muted) 65%, transparent);
  cursor: pointer;
  opacity: 0;
  transition: opacity .14s ease, background .14s ease, color .14s ease;
}
.conv-delete svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.conv-item:hover .conv-delete, .conv-delete:focus-visible { opacity: 1; }
.conv-delete:hover { background: var(--danger-soft); color: var(--danger-strong); }
.conv-delete:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
@media (hover: none) { .conv-delete { opacity: 1; } }

/* ---- room for a column: the rail sits beside the chat ------------------- */
.agent-workspace.rail-wide {
  .conversation-rail {
    display: flex;
    flex: none;
    width: 250px;
  }
  .conv-close { display: none; }

  /* Collapsed keeps "expand" and "new chat" reachable as icons. A rail that
     simply vanished would put New chat behind a re-expand every time. */
  .conversation-rail.collapsed { width: 56px; }
  .conversation-rail.collapsed .conv-panel { display: none; }
  .conversation-rail.collapsed .conv-stub {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 0;
  }
  .conv-stub-btn {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: var(--surface-3);
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
  }
  .conv-stub-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .conv-stub-btn:hover { background: var(--border); color: var(--brand); }
  .conv-stub-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .conv-stub-btn.is-new {
    border: 1.5px dashed color-mix(in oklab, var(--brand) 35%, var(--border));
    background: color-mix(in oklab, var(--brand) 6%, transparent);
    color: var(--brand);
  }
}

/* ---- no room: a sheet over the chat ------------------------------------- */
.agent-workspace.rail-narrow {
  .conversation-rail.open {
    display: flex;
    position: absolute;
    inset-inline: 0;
    top: 0;
    z-index: 40;
    max-height: min(70vh, 520px);
    border-inline-end: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0 0 var(--radius-md, 12px) var(--radius-md, 12px);
    box-shadow: 0 12px 28px rgb(0 0 0 / .16);
  }
  .conv-collapse { display: none; }
  .conv-open { min-height: 44px; }
  .conv-delete { width: 44px; height: 44px; }
  .conv-new { min-height: 44px; }
}

/* The header entry point, hidden once the rail has a column of its own. */
.conv-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 11px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
}
.conv-open-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.conv-open-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.conv-open-btn[aria-expanded="true"] { border-color: var(--brand); color: var(--brand); }

/* ---- voice note: compact control row + labelled transcript -------------- */
/* The native <audio controls> is ~54px of unstyleable browser chrome and it
   dominated a bubble whose real content is the transcript. The element is still
   what plays; it is just hidden behind a button we can style. */
.voice-message-bubble .voice-audio { display: none; }
.voice-line {
  display: flex;
  align-items: center;
  gap: 10px;
}
.voice-play {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in oklab, var(--brand) 12%, transparent);
  color: var(--brand);
  cursor: pointer;
  transition: background .14s ease;
}
.voice-play.is-static { cursor: default; }
.voice-play:hover:not(.is-static) { background: color-mix(in oklab, var(--brand) 20%, transparent); }
.voice-play:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.voice-play svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.voice-play.playing { background: var(--brand); color: var(--brand-on, #fff); }

/* Decorative and aria-hidden. A real waveform would imply a precision this
   bubble does not have; the job is to say "this is sound". */
.voice-wave {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 22px;
}
.voice-wave i {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: currentColor;
  opacity: .45;
}
.voice-time { font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* The readable content of a voice note, labelled so it is not mistaken for the
   agent's own prose. */
.voice-transcript {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in oklab, currentColor 18%, transparent);
}
.voice-transcript-tag {
  display: block;
  margin-bottom: 4px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .65;
}
.voice-transcript p { margin: 0; }

/* ---- scrollbars --------------------------------------------------------- */
/* Present but not painted until used. A permanent grey gutter down the middle
   of a chat reads as a seam between two panes, which is exactly what the
   conversation rail already provides properly. Reserved width is kept
   (scrollbar-gutter) so revealing the thumb cannot reflow the text. */
.agent-workspace-stream,
.agent-workspace-content,
.conv-list,
.hub-main,
.admin-main {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.agent-workspace-stream:hover,
.agent-workspace-content:hover,
.conv-list:hover,
.hub-main:hover,
.admin-main:hover {
  scrollbar-color: color-mix(in oklab, var(--text) 22%, transparent) transparent;
}
.agent-workspace-stream::-webkit-scrollbar,
.agent-workspace-content::-webkit-scrollbar,
.conv-list::-webkit-scrollbar,
.hub-main::-webkit-scrollbar,
.admin-main::-webkit-scrollbar { width: 8px; height: 8px; }
.agent-workspace-stream::-webkit-scrollbar-track,
.agent-workspace-content::-webkit-scrollbar-track,
.conv-list::-webkit-scrollbar-track,
.hub-main::-webkit-scrollbar-track,
.admin-main::-webkit-scrollbar-track { background: transparent; }
.agent-workspace-stream::-webkit-scrollbar-thumb,
.agent-workspace-content::-webkit-scrollbar-thumb,
.conv-list::-webkit-scrollbar-thumb,
.hub-main::-webkit-scrollbar-thumb,
.admin-main::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
}
.agent-workspace-stream:hover::-webkit-scrollbar-thumb,
.agent-workspace-content:hover::-webkit-scrollbar-thumb,
.conv-list:hover::-webkit-scrollbar-thumb,
.hub-main:hover::-webkit-scrollbar-thumb,
.admin-main:hover::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--text) 22%, transparent);
}

/* On the user's own bubble the ground is the brand fill, so a brand-coloured
   play button is brand-on-brand and effectively invisible (measured 2.73:1).
   currentColor there is already the bubble's foreground, so it inherits the
   right contrast in every theme instead of pinning a second colour. */
.message.user .voice-play,
.message.user .voice-play.is-static {
  background: color-mix(in oklab, currentColor 18%, transparent);
  color: inherit;
}
.message.user .voice-play:hover:not(.is-static) {
  background: color-mix(in oklab, currentColor 28%, transparent);
}
.message.user .voice-play:focus-visible { outline-color: currentColor; }
.message.user .voice-play.playing {
  background: currentColor;
  color: var(--brand);
}

/* Hidden once the rail has a column of its own. Declared here rather than in the
   rail block so it sits after the base .conv-open-btn rule and wins without
   raising specificity. */
.agent-workspace.rail-wide {
  .conv-open-btn { display: none; }
}

/* Rename sits beside delete and behaves identically: revealed on hover, always
   present for touch. Neutral rather than destructive — it is a correction, not
   a removal. */
.conv-rename {
  flex: 0 0 auto;
  align-self: center;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: color-mix(in oklab, var(--muted) 65%, transparent);
  cursor: pointer;
  opacity: 0;
  transition: opacity .14s ease, background .14s ease, color .14s ease;
}
.conv-rename svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.conv-item:hover .conv-rename, .conv-rename:focus-visible { opacity: 1; }
.conv-rename:hover { background: var(--surface-3); color: var(--brand); }
.conv-rename:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
@media (hover: none) { .conv-rename { opacity: 1; } }
.agent-workspace.rail-narrow .conv-rename { width: 44px; height: 44px; }

/* Drag and drop onto the chat.
   The overlay is a pseudo-element on the workspace so nothing is inserted into
   the DOM mid-drag — adding a real node under the cursor can cancel the drag in
   Chromium. pointer-events:none keeps it from stealing the drop it announces. */
.agent-workspace { position: relative; }
.agent-workspace.drag-active::after {
  content: attr(data-drop-label);
  position: absolute;
  inset: 8px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  border-radius: 14px;
  border: 2px dashed var(--brand);
  background: color-mix(in oklab, var(--brand) 8%, var(--surface));
  color: var(--brand);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
@media (prefers-reduced-motion: no-preference) {
  .agent-workspace.drag-active::after { animation: dropPulse 1.4s ease-in-out infinite; }
  @keyframes dropPulse { 0%, 100% { opacity: 0.92; } 50% { opacity: 1; } }
}

/* What the agent looked up — the envelope's toolRuns[].
   Evidence, not content: collapsed by default, quiet until it matters, and
   opened automatically when a lookup FAILED, because that is the case where the
   user needs to know before trusting the answer around it. */
.tool-runs {
  margin: 8px 0 0;
  border-top: 1px solid var(--border);
  padding-top: 6px;
  font-size: 0.82rem;
}
.tool-runs > summary {
  cursor: pointer;
  color: var(--muted);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}
.tool-runs > summary::-webkit-details-marker { display: none; }
.tool-runs > summary::before {
  content: '›';
  display: inline-block;
  transition: transform var(--duration-fast, 150ms) ease;
}
.tool-runs[open] > summary::before { transform: rotate(90deg); }
.tool-runs > summary:hover { color: var(--text); }
.tool-runs-failed { color: var(--danger-strong); font-weight: 600; }
.tool-runs ul { margin: 6px 0 0; padding: 0 0 0 14px; list-style: none; }
/* Block rather than a wrapping flex row on purpose. A wrap declaration
   anywhere later in this file outranks the quick-prompts nowrap override,
   which is same-specificity and settled by source order; chat-render-test
   guards that and is right to. Inline children give the same layout without
   the hazard. (The guard reads the raw stylesheet, so even naming the property
   in prose here would trip it.) */
.tool-run {
  padding: 2px 0;
  color: var(--muted);
  line-height: 1.5;
}
.tool-run > span { margin-right: 8px; }
.tool-run-name { color: var(--text); font-family: var(--mono, ui-monospace, monospace); }
.tool-run-state { font-variant: all-small-caps; letter-spacing: 0.04em; }
.tool-run.failed .tool-run-state { color: var(--danger-strong); font-weight: 600; }
.tool-run-kind.write {
  color: var(--warning-strong);
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 0 4px;
  font-variant: all-small-caps;
}
.tool-run-error { display: block; color: var(--danger-strong); }

/* Data-quality findings over the tasks on screen. Open by default — unlike the
   tool trail, these are things to DO, not evidence about an answer — but styled
   as a quiet advisory rather than an error: nothing here is broken, it is
   untidy. */
.data-quality {
  margin: 0 0 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--warning-strong);
  border-radius: 10px;
  padding: 10px 14px;
  background: var(--surface);
}
.data-quality > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  list-style: none;
}
.data-quality > summary::-webkit-details-marker { display: none; }
.data-quality ul { margin: 8px 0 0; padding-inline-start: 18px; }
.data-quality li { margin: 4px 0; color: var(--text); }
.data-quality-scope { margin: 8px 0 0; font-size: 0.82rem; color: var(--muted); }

/* A CRM change the agent has proposed and nobody has approved yet.
   This card is the moment of consent — whatever it shows is what will happen —
   so the diff is given room and the deadline is stated rather than implied. */
.pending-write {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--brand);
  border-radius: 10px;
  background: var(--surface-2, rgba(127, 127, 127, .06));
}
.pending-write .pw-sentence { margin: 0 0 10px; font-weight: 600; line-height: 1.5; }
.pending-write .pw-diff { width: 100%; border-collapse: collapse; font-size: .9em; }
.pending-write .pw-diff th,
.pending-write .pw-diff td { padding: 5px 8px; text-align: start; vertical-align: top; }
.pending-write .pw-diff thead th { font-weight: 600; opacity: .65; font-size: .85em; }
.pending-write .pw-diff tbody tr + tr th,
.pending-write .pw-diff tbody tr + tr td { border-top: 1px solid var(--border); }
.pending-write .pw-before { opacity: .6; }
.pending-write .pw-after { font-weight: 600; }
/* A field whose change can fire a workflow or mark something approved. Named
   rather than merely coloured, because colour alone is not a statement. */
.pending-write .pw-flagged th::after { content: " ⚠"; }
.pending-write .pw-expiry { margin: 10px 0 8px; font-size: .85em; opacity: .7; }

/* Lapsed: the approve button must stop looking like the obvious next action.
   The server re-checks the deadline regardless, so this is honesty, not a gate. */
.pending-write.is-expired { border-inline-start-color: var(--border); opacity: .72; }
.pending-write.is-expired .pw-expiry { opacity: 1; font-weight: 600; }
.pending-write.is-expired .small-btn.confirm { background: transparent; color: inherit; border: 1px solid var(--border); cursor: not-allowed; }