/* The dashboard's modules in the dark UI (account.html, linked right after ui.css).

   What the scripts under assets/pages/account/ build and nothing else: the parts no static markup of
   account.html uses (cards, rows, chips, bubbles, drawers' contents, the integrations' marks), drawn the
   way the reference package draws the dashboard in its homepage stage and four feature sections:

   - inner cards on --raised with a 1px --line hairline and 12px corners (16px for a whole card);
   - compact rows: 40px tall, a hairline under each, words in the caption role, names at 600;
   - chips as the reference's small pills: 24px, Manrope 12px 600 in sentence case, the status colour on
     its soft fill, a dot before a state that is on or waiting;
   - figures in Sora 600 (--type-figure), words in Manrope on the type roles, every gap and padding on
     the 4px grid from the spacing roles;
   - a chosen row: a soft wash of the light cobalt and a 2px light-cobalt edge at its inline start.

   The account page's own inline styles keep the older rules for the same classes; this file loads after
   them, so for these classes its rules win (same selectors, or the same weight). Behaviour stays where it
   was: the role gating, [hidden] and layout rules of account.html are not repeated here. The customer's
   own look is never drawn here (the Appearance preview, a logo circle's colour, the widget). */

/* ==== Overview: the live card, the requests, the plan, the stat tiles ==== */
.item-card, .live-card { padding: var(--in-s); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--raised); box-shadow: none; }
.live-card + .live-card { margin-top: var(--stack); }
.item-top { gap: var(--row) var(--split); }
.item-title { color: var(--text); font: var(--type-subtitle); letter-spacing: var(--track-subtitle); }
.item-meta { margin: var(--pair) 0 0; color: var(--text-2); font: var(--type-caption); }
.item-card.is-highlight { border-color: var(--cobalt-2); box-shadow: 0 0 0 4px rgba(42,91,224,.32); }
html[lang="ar"] .item-title { font-family: var(--font-arabic), var(--display); letter-spacing: 0; }

/* A request's timeline: a dot on a hairline per step. */
.timeline-row { grid-template-columns: var(--sp-16) minmax(0, 1fr); gap: var(--row); color: var(--text-2); font: var(--type-caption); }
.timeline-row::before { width: var(--row); height: var(--row); margin-top: var(--row); border: 0; border-radius: 50%; background: var(--cobalt-2); box-shadow: 0 0 0 4px var(--cobalt-soft); }
.timeline-row strong { color: var(--text); font-weight: 600; }

/* Chips: the reference's .m-pill. The word says the state; the colour only helps. */
.conn-chip, .readiness-badge {
  display: inline-flex; align-items: center; gap: var(--pair); min-height: var(--h-xs); padding: 0 var(--row);
  border: 0; border-radius: var(--r-pill); background: var(--lift); color: var(--text-2);
  font: var(--type-micro); font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.conn-chip[data-state="connected"], .readiness-badge[data-status="pass"] { border: 0; background: var(--ok-soft); color: var(--ok); }
.readiness-badge[data-status="warn"] { border: 0; background: var(--warn-soft); color: var(--warn); }
.conn-chip[data-state="expired"], .readiness-badge[data-status="fail"] { border: 0; background: var(--err-soft); color: var(--err); }
.conn-chip[data-state="off"] { background: var(--lift); color: var(--text-2); }
.conn-chip[data-state="connected"]::before, .conn-chip[data-state="expired"]::before,
.readiness-badge[data-status]::before { width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; content: ''; }
html[lang="ar"] :where(.conn-chip, .readiness-badge) { font-family: var(--font-arabic), var(--body); letter-spacing: 0; }

/* The invoices of a request and its total. */
.pay-lines { gap: var(--row); }
/* The amount (with its state and the invoice number) stays whole; on a narrow screen it moves under its label. */
.pay-line { flex-wrap: wrap; gap: var(--pair) var(--stack); color: var(--text); font: var(--type-caption); font-weight: 600; }
.pay-amount { font-family: var(--display); font-variant-numeric: tabular-nums; }

/* The plan under a live assistant. */
.plan-block { margin-top: var(--split); padding-top: var(--split); border-top: 1px solid var(--line); }
.plan-line { color: var(--text); font: var(--type-caption); font-weight: 600; }
.plan-alert { margin: var(--row) 0 0; padding: var(--row) var(--stack); border: 0; border-radius: var(--r-md); background: var(--warn-soft); color: var(--warn); font: var(--type-caption); font-weight: 600; }
.plan-block .item-actions { margin-top: var(--stack); }
/* Sweep 5, A17: each connected tool's switch and Disconnect (settings.js). */
#integrations-list .item-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--row); margin-top: var(--stack); }
.snippet-hint { margin: var(--row) 0 0; color: var(--text-2); font: var(--type-micro); }

/* What it could not answer, what it was taught, how its knowledge stands. */
.gap-block { margin-top: var(--split); padding-top: var(--split); border-top: 1px solid var(--line); }
.gap-title { color: var(--text); font: var(--type-caption); font-weight: 600; letter-spacing: 0; }
.gap-item { margin-top: var(--row); padding: var(--stack) var(--in-s); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); box-shadow: none; }
.gap-q { color: var(--text); font: var(--type-small); font-weight: 600; }
.gap-meta { margin: var(--pair) 0 0; color: var(--text-2); font: var(--type-caption); }
.gap-meta a { color: var(--cobalt-2); font-weight: 600; text-underline-offset: 3px; }
/* The answer box and its buttons on one row; where the row is too narrow, the box takes a row of its own. */
.gap-fix { flex-wrap: wrap; gap: var(--row); margin-top: var(--stack); }
.gap-fix textarea {
  flex: 1 1 240px; min-width: 0; height: var(--h-md); min-height: var(--h-md); padding: var(--row) var(--stack);
  border: 1px solid var(--field-line); border-radius: var(--r-md); background: var(--ground); color: var(--text); font: var(--type-body);
}
.gap-fix textarea::placeholder { color: var(--text-2); }
.gap-fix textarea:focus-visible { outline: 2px solid transparent; border-color: var(--cobalt-2); box-shadow: 0 0 0 4px rgba(42,91,224,.32); }
.stale-note { margin-top: var(--stack); padding: var(--row) var(--stack); border: 0; border-radius: var(--r-md); background: var(--warn-soft); color: var(--warn); font: var(--type-caption); font-weight: 600; }
/* Knowledge health: one line each, the mark in its colour (overview.js sets ok or warn on the line). */
.health-list { display: grid; gap: var(--row); margin-top: var(--stack); font: var(--type-caption); }
.health-list p { margin: 0; color: var(--text); }
.health-list p[data-ok="false"] { color: var(--warn); }
.health-list .health-mark { color: var(--ok); font-weight: 600; }
.health-list p[data-ok="false"] .health-mark { color: var(--warn); }
.gap-title.is-after { margin-top: var(--split); }
.gap-meta.gap-topic { margin: var(--row) 0 0; }

/* Stat tiles (Overview and Analytics): the reference's counters. */
.stat-card { padding: var(--stack) var(--in-s); border: 1px solid var(--line); border-radius: var(--r-md); background: transparent; box-shadow: none; }
.stat-value {
  color: var(--text); font: var(--type-figure); letter-spacing: var(--track-figure); font-variant-numeric: tabular-nums;
  background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor;
}
[dir="rtl"] .stat-value { background-image: none; }
.stat-label { margin: var(--pair) 0 0; color: var(--text-2); font: var(--type-caption); }
@media (max-width: 560px) {
  .overview-stats .stat-value { font: var(--type-figure); }
}
html[lang="ar"] .stat-value { font-family: var(--font-arabic), var(--display); line-height: 1.3; }

/* The assistant switcher's chips and the classic inbox's filters (inbox.js). */
.inbox-filter {
  min-height: var(--h-sm); padding: 0 var(--stack); border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: transparent; color: var(--text-2); font: var(--type-caption); font-weight: 600;
}
.inbox-filter:hover { color: var(--text); }
.inbox-filter[aria-pressed="true"] { border-color: var(--pill); background: var(--pill); color: var(--pill-ink); }
.inbox-filter .count { margin-inline-start: var(--pair); color: inherit; font-variant-numeric: tabular-nums; opacity: .72; }
#bot-switcher .inbox-filter { gap: var(--row); }
/* A paused assistant's chip says so (the founder, 2026-10-16: Pause), in words as well as colour. */
#bot-switcher .bot-chip-state { color: var(--warn); font: var(--type-micro); font-weight: 600; }
#bot-switcher .inbox-filter[aria-pressed="true"] .bot-chip-state { color: inherit; opacity: .72; }
/* The logo circle keeps the colour its owner picked (the customer's look): only its frame is the site's. */
#bot-switcher .bot-logo-circle { width: var(--h-xs); height: var(--h-xs); box-shadow: 0 0 0 1px var(--line-2); }
#bot-switcher .bot-logo-circle img { width: var(--sp-16); height: var(--sp-16); }

/* The classic inbox (the Helpdesk's switch off): one row a conversation. */
.inbox-row { gap: var(--pair); padding: var(--stack) var(--in-s); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--raised); box-shadow: none; transition: border-color var(--dur-fade) var(--ease-fade); }
.inbox-row:hover { border-color: var(--line-2); transform: none; }
.inbox-row-top { gap: var(--row) var(--stack); }
.inbox-row .lead-flag { color: var(--cobalt-2); font: var(--type-micro); font-weight: 600; letter-spacing: 0; }
.inbox-row-preview { color: var(--text-2); font: var(--type-caption); }
.inbox-row-when { color: var(--text-2); font: var(--type-micro); font-variant-numeric: tabular-nums; }
/* The correction loop in a conversation's drawer: "Mark as incorrect", then the question and the right answer. */
/* 32 tall, 40 on a phone or a touch screen (--h-sm): a control, so a tap target. */
.conv-mark-incorrect {
  display: flex; align-items: center; min-height: var(--h-sm); margin-top: var(--pair); padding: 0; border: 0; background: none;
  color: var(--cobalt-2); font: var(--type-micro); font-weight: 600; text-align: start; cursor: pointer;
}
.conv-mark-incorrect:hover { text-decoration: underline; text-underline-offset: 3px; }
.conv-fix { display: grid; gap: var(--row); margin-top: var(--row); }
.conv-fix :is(input, textarea) {
  min-height: var(--h-md); padding: 0 var(--stack); border: 1px solid var(--field-line); border-radius: var(--r-sm);
  background: var(--ground); color: var(--text); font: var(--type-caption);
}
.conv-fix textarea { min-height: var(--h-lg); padding-block: var(--row); resize: vertical; }
.conv-fix :is(input, textarea)::placeholder { color: var(--text-2); }
.conv-fix :is(input, textarea):focus-visible { outline: 2px solid transparent; border-color: var(--cobalt-2); box-shadow: 0 0 0 4px rgba(42,91,224,.32); }
.conv-fix-note { margin: 0; font: var(--type-micro); font-weight: 600; }

/* ==== A conversation's thread (Inbox, Helpdesk, Leads, All conversations): the reference's bubbles ==== */
.conv-msg { max-width: 82%; padding: var(--row) var(--stack); border: 1px solid transparent; border-radius: var(--r-lg); color: var(--text); font: var(--type-small); }
.conv-msg[data-actor="visitor"] { border-color: var(--line); background: var(--raised); border-end-start-radius: var(--pair); }
.conv-msg[data-actor="ai"] { border-color: color-mix(in srgb, var(--cobalt-2) 16%, transparent); background: var(--cobalt-soft); border-end-end-radius: var(--pair); }
.conv-msg[data-actor="human"] { border-color: color-mix(in srgb, var(--ok) 24%, transparent); background: var(--ok-soft); border-end-end-radius: var(--pair); }
.conv-msg .msg-tag { margin-bottom: var(--pair); color: var(--text-2); font: var(--type-micro); font-weight: 600; letter-spacing: 0; text-transform: none; }
.conv-msg .msg-sources { margin-top: var(--row); color: var(--text-2); font: var(--type-micro); }
.conv-msg .ui-pill { margin-block-start: var(--row); }
/* A line between the bubbles (a handoff, a close): the reference's centred note. */
.conv-note {
  align-self: center; display: inline-flex; align-items: center; min-height: 28px; padding: var(--pair) var(--stack);
  border-radius: var(--r-pill); background: rgba(157,184,255,.12); color: var(--cobalt-2);
  font: var(--type-micro); font-weight: 600; text-align: center; text-wrap: balance;
}
html[lang="ar"] :where(.conv-msg .msg-tag, .conv-note) { font-family: var(--font-arabic), var(--body); }

/* ==== Settings > Conversations > Alerts (alerts.js): who hears about it ==== */
.alerts-person { display: inline-flex; align-items: center; gap: var(--row); }
.alerts-address { color: var(--text); font-weight: 600; }
select.ui-input.alerts-locale { min-height: var(--h-md); min-width: 160px; padding-inline-start: var(--stack); font: var(--type-caption); }

/* ==== Hours: the week (settings.js) and the closed dates (hours.js) ==== */
.hours-row { gap: var(--row); color: var(--text); font: var(--type-caption); font-weight: 600; }
.hours-row input[type="time"] {
  min-height: var(--h-md); padding: 0 var(--row); border: 1px solid var(--field-line); border-radius: var(--r-sm);
  background: var(--ground); color: var(--text); font: var(--type-caption); font-variant-numeric: tabular-nums;
}
.hours-row input[type="time"]:focus-visible { outline: 2px solid transparent; border-color: var(--cobalt-2); box-shadow: 0 0 0 4px rgba(42,91,224,.32); }
/* A day's box: drawn 24px, ticked in cobalt with a white tick (the reference's .m-check), in the middle of a
   40px square that takes the tap (WCAG 2.5.8 and the phone's 40px rule) while the negative margin keeps the
   row's 24px place for it. The edge is the field edge's grey (#62666D, 3.3:1). Forced colours: the browser's box. */
.hours-row input[type="checkbox"] {
  flex: none; width: var(--h-md); height: var(--h-md); margin: calc((var(--h-xs) - var(--h-md)) / 2);
  border: 0; border-radius: var(--r-sm); background: center / var(--h-xs) var(--h-xs) no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='.75' y='.75' width='22.5' height='22.5' rx='6' fill='none' stroke='%2362666D' stroke-width='1.5'/%3E%3C/svg%3E");
  cursor: pointer; -webkit-appearance: none; appearance: none;
}
.hours-row input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='6' fill='%232A5BE0'/%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.hours-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: -6px; }
@media (forced-colors: active) {
  .hours-row input[type="checkbox"] { width: var(--h-xs); height: var(--h-xs); margin: 0; background: none; -webkit-appearance: auto; appearance: auto; }
}
@media (max-width: 420px) {
  .hours-row { gap: var(--row) var(--pair); }
  .hours-row input[type="time"] { padding: 0 var(--pair); }
}

/* ==== Settings > Channels > Website: where the chat may run ==== */
.origin-list { gap: var(--row); margin-top: var(--stack); }
.origin-row {
  gap: var(--stack); min-height: var(--h-md); padding-block: var(--pair); padding-inline: var(--stack) var(--row);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); color: var(--text); font: var(--type-caption);
}
.origin-row code { color: var(--text); font: var(--type-caption); font-family: var(--mono); }
.origin-row.is-blocked { border-color: color-mix(in srgb, var(--warn) 32%, transparent); background: var(--warn-soft); }
.origin-add { gap: var(--row); margin-top: var(--stack); }
.origin-add input {
  min-height: var(--h-md); padding: 0 var(--stack); border: 1px solid var(--field-line); border-radius: var(--r-md);
  background: var(--ground); color: var(--text); font: var(--type-body);
}
.origin-add input::placeholder { color: var(--text-2); }
.origin-add input:focus-visible { outline: 2px solid transparent; border-color: var(--cobalt-2); box-shadow: 0 0 0 4px rgba(42,91,224,.32); }
.origin-note { margin: var(--row) 0 0; color: var(--text-2); font: var(--type-micro); }

/* ==== Leads and contacts ==== */
.lead-name-cell .link-action, .lead-link { font: var(--type-caption); font-weight: 600; }
/* A name breaks between its words, never inside one (the kit's cells may break anywhere): on a phone
   the column keeps its longest word and the table scrolls sideways in its own frame. */
.lead-name-cell .link-action, .contact-name-cell .link-action { overflow-wrap: break-word; }
.lead-name-cell .link-action { font-family: var(--body), var(--font-arabic); }
.lead-muted { color: var(--text-2); }
.lead-field-label { gap: var(--pair); }
.lead-field-label small { color: var(--text-2); font: var(--type-micro); }
.lead-field-actions { gap: var(--pair) var(--stack); }
.contact-name-cell { gap: var(--stack); }
.contact-name-cell .link-action { font: var(--type-caption); font-weight: 600; font-family: var(--body), var(--font-arabic); }
.contact-empty-value { color: var(--text-2); font-weight: 400; }
.contact-attribute-remove { min-width: var(--h-sm); min-height: var(--h-sm); }
.contact-memory-item { gap: var(--pair); }
.contact-memory-item ul { padding-inline-start: var(--split); font: var(--type-caption); }
.contact-memory-item small { color: var(--text-2); font: var(--type-micro); font-weight: 600; }
#contact-timeline .ui-timeline-item p, #lead-bookings .ui-timeline-item p { color: var(--text); }

/* ==== Inbox > All conversations (conversations.js) ==== */
.conv-log-open { gap: var(--pair); min-height: var(--h-sm); align-content: center; padding: var(--pair) 0; border-radius: var(--r-sm); }
.conv-log-open strong { color: var(--text); font: var(--type-caption); font-weight: 600; }
.conv-log-open span { color: var(--text-2); font: var(--type-micro); }
.conv-log-open:hover strong { color: var(--cobalt-2); }
.conv-log-cellrow { gap: var(--row); }
.conv-log-transcript .conv-msg { max-width: 88%; }
.conv-log-confidence { color: var(--text-2); font: var(--type-micro); }
.conv-utm-tag { gap: var(--row); }
.conv-utm-key { color: var(--text-2); font-weight: 600; }

/* ==== The Helpdesk (helpdesk.js and its helpers) ==== */
/* The ticket list: the reference's queue, a row a ticket under a hairline, the open one washed and edged. */
.hd-row {
  gap: var(--pair); padding: var(--stack) var(--in-s); border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--text); box-shadow: none;
  transition: background-color var(--dur-fade) var(--ease-fade);
}
.hd-row:hover { background: var(--raised); border-color: var(--line); }
.hd-row[aria-current="true"] { border-color: var(--line); background: rgba(157,184,255,.06); box-shadow: inset 2px 0 0 var(--cobalt-2); }
[dir="rtl"] .hd-row[aria-current="true"] { box-shadow: inset -2px 0 0 var(--cobalt-2); }
.hd-row:focus-visible { outline: 2px solid var(--cobalt-2); outline-offset: -2px; }
.hd-row-top, .hd-row-foot { gap: var(--row); }
.hd-row-when { color: var(--text-2); font: var(--type-micro); font-weight: 400; font-variant-numeric: tabular-nums; }
.hd-row-subject { color: var(--text); font: var(--type-caption); font-weight: 600; }
.hd-row-preview { color: var(--text-2); font: var(--type-micro); }
.hd-row-who { gap: var(--row); color: var(--text-2); font: var(--type-micro); font-weight: 600; }
.hd-row-who .ui-avatar { width: var(--h-xs); height: var(--h-xs); font: var(--type-micro); font-family: var(--display); font-weight: 700; }
.hd-row.hd-row-paused .hd-row-subject { color: var(--text-2); }
.hd-required { margin-inline-start: var(--pair); color: var(--text-2); font: var(--type-micro); font-weight: 600; }
.hd-view-row { gap: var(--pair); }

/* The thread of the open ticket. */
.hd-thread .conv-msg { max-width: 88%; }
.hd-thread .conv-msg[data-actor="note"] { border: 1px dashed color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-soft); border-end-end-radius: var(--pair); }
.hd-thread .conv-msg[data-actor="note"] .msg-tag { color: var(--warn); }
.hd-thread .conv-msg .hd-ai-act { min-height: var(--h-sm); margin-block-start: var(--pair); margin-inline-start: calc(-1 * var(--row)); padding: 0 var(--row); }
.hd-ai-translation { margin-block-start: var(--row); padding-block-start: var(--row); border-block-start: 1px dashed var(--line-2); }
#hd-earlier .hd-earlier-none { color: var(--text-2); }

/* AI for the person answering: Draft, Compose, and what a draft was built from. */
.hd-ai-tools { gap: var(--row); }
.hd-ai-meta { gap: var(--row); }
.hd-ai-badge { height: var(--h-xs); padding: 0 var(--row); font: var(--type-micro); font-weight: 600; letter-spacing: 0; }
.hd-ai-sources { gap: var(--row); color: var(--text-2); font: var(--type-micro); font-weight: 600; }

/* Who is on: the presence row at the top of the views. */
.hd-presence-person { gap: var(--pair) var(--row); }
.hd-presence-name { color: var(--text); font-weight: 600; }
.hd-presence-state { color: var(--text-2); font: var(--type-micro); font-weight: 600; }

/* "Set up the helpdesk": teams and macros in a list. */
.hd-setup-name { color: var(--text); font: var(--type-caption); font-weight: 600; }
.hd-setup-name small { color: var(--text-2); font: var(--type-micro); font-weight: 400; }
.hd-setup-tools { gap: var(--pair); }
.hd-setup-empty { color: var(--text-2); font: var(--type-caption); }

/* A procedure running in the ticket, and the approvals it waits for. */
.hd-procedure:not([hidden]) { gap: var(--split); margin-block-end: var(--stack); }
.hd-procedure-run { gap: var(--stack); padding: var(--stack) var(--in-s); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--raised); }
.hd-procedure-head { gap: var(--pair) var(--stack); }
.hd-procedure-eyebrow { color: var(--text-2); font: var(--type-micro); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; }
:lang(ar) .hd-procedure-eyebrow { font-family: var(--font-arabic); letter-spacing: 0; text-transform: none; }
.hd-procedure-title { color: var(--text); font: var(--type-caption); font-weight: 600; }
.hd-procedure-steps { gap: var(--stack); }
.hd-procedure-person { margin-block-start: var(--pair); }
.hd-approval .hd-approval-inputs { font: var(--type-micro); font-family: var(--mono); }
.hd-approval .hd-approval-after { color: var(--text); font: var(--type-micro); }
.hd-approval .hd-approval-expires { color: var(--text-2); font: var(--type-micro); }
.hd-approval .hd-approval-buttons { gap: var(--row); margin-block-start: var(--row); }

/* An email ticket: how it reached the team, and the address the reply goes from. */
.hd-email { gap: var(--stack); margin-block: var(--stack); padding: var(--stack) var(--in-s); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--raised); }
.hd-email-title { color: var(--text); font: var(--type-caption); font-weight: 600; font-family: var(--display); }
.hd-email-meta { color: var(--text-2); font: var(--type-micro); }
.hd-email code { font: var(--type-micro); font-family: var(--mono); }

/* ==== Settings > Helpdesk rules ==== */
.hd-rule { gap: var(--stack); padding: var(--stack) var(--in-s); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--raised); }
/* The rule's place in the order: the reference's numbered square. */
.hd-rule-place { width: var(--h-xs); height: var(--h-xs); border-radius: var(--r-xs); background: var(--lift); color: var(--text-2); font: var(--type-micro); font-weight: 600; font-variant-numeric: tabular-nums; }
.hd-rule-main { gap: var(--pair); }
.hd-rule-name { color: var(--text); font: var(--type-caption); font-weight: 600; }
.hd-rule-words { color: var(--text-2); font: var(--type-caption); }
.hd-rule-tools { gap: var(--row); }
.hd-rule-on { color: var(--text-2); font: var(--type-micro); font-weight: 600; }
.hd-rule-row { gap: var(--stack); padding: var(--stack); padding-inline-end: 48px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--raised); }
.hd-rule-row .ui-tag-input { background: var(--ground); }
.hd-rule-out { inset-block-start: var(--row); inset-inline-end: var(--row); }

/* ==== Settings > Channels: the chat page, Slack, voice, email, install, a domain ==== */
#hosted-card .hosted-toggle { margin-block-start: var(--stack); }
#hosted-card .hosted-note[data-tone="error"] { color: var(--err); }
#hosted-card .hosted-note[data-tone="ok"] { color: var(--ok); }
#hosted-card .hosted-share { margin-block-start: var(--split); }
#hosted-card .hosted-share-body { gap: var(--stack); }
#hosted-card .hosted-share-grid { gap: var(--split); }
#hosted-card .hosted-share-main { gap: var(--stack); }
#hosted-card .hosted-actions { gap: var(--row); }
#hosted-card .hosted-open { color: var(--text); }
#hosted-card .hosted-qr-figure { gap: var(--row); }
/* The QR code stays dark on white: a phone's camera reads it that way. */
#hosted-card .hosted-qr { padding: var(--row); border: 1px solid var(--line-2); border-radius: var(--r-md); background: #fff; }
#hosted-card .hosted-titles { gap: var(--stack); margin: var(--split) 0 0; }
#hosted-card .hosted-legend { margin-block-end: var(--row); }
#hosted-card .hosted-title-row { gap: var(--stack); }
#hosted-card .hosted-embed { margin-block-start: var(--split); }

#slack-card .slack-note[data-tone="error"] { color: var(--err); }
#slack-card .slack-note[data-tone="ok"] { color: var(--ok); }
#slack-card .slack-callout { margin-block-start: var(--split); }
#slack-card .slack-callout .ui-callout-body { gap: var(--row); }
#slack-card .slack-add-row { margin: var(--split) 0 0; }
#slack-card .slack-teams-wrap { gap: var(--row); margin-block-start: var(--split); }
#slack-card .slack-teams { gap: var(--stack); }
#slack-card .slack-team { gap: var(--row); padding: var(--stack) var(--in-s); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); }
#slack-card .slack-team-head { gap: var(--row); }
#slack-card .slack-team-name { color: var(--text); font-weight: 600; }

#voice-card .voice-toggle { margin-block-start: var(--stack); }
#voice-card .voice-note[data-tone="error"] { color: var(--err); }
#voice-card .voice-note[data-tone="ok"] { color: var(--ok); }
#voice-card .voice-plan, #voice-card .voice-demo { margin-block-start: var(--stack); }
#voice-card .voice-form { gap: var(--split); margin-block-start: var(--split); }
#voice-card .voice-groups { gap: var(--split); }
#voice-card .voice-group { gap: var(--row); }
#voice-card .voice-legend { margin-block-end: var(--pair); }
#voice-card .voice-cards { gap: var(--row); }
#voice-card .voice-choice { gap: var(--row); }
.voice-pop .voice-sample { margin-block: var(--pair) var(--stack); color: var(--text); }
.voice-pop .voice-pop-row { gap: var(--stack); }
.voice-pop .voice-pop-status { margin: var(--row) 0 0; }

#email-channel-card .email-sub { margin: var(--row) 0 0; color: var(--text); font: var(--type-subtitle); letter-spacing: var(--track-subtitle); }
#email-channel-card .email-flush code, .hd-email code { font: var(--type-micro); font-family: var(--mono); }
#email-channel-card .email-code-head { gap: var(--row); }
#email-channel-card :where(.email-domain, .email-settings) { gap: var(--stack); padding-block-start: var(--split); }
#email-channel-card .email-domain-form { gap: var(--stack); }
#email-channel-card .email-at { padding-block-end: var(--stack); color: var(--text-2); font: var(--type-small); font-family: var(--mono); }
/* The address form's "@domain" (the sweep of 2026-10-16, A15): a long domain wraps on a phone, never past the card. */
#email-channel-card .email-address-form .email-at { min-width: 0; overflow-wrap: anywhere; }
#email-channel-card .email-checks { gap: var(--row); }
#email-channel-card .email-check { gap: var(--row) var(--stack); min-height: var(--h-md); padding: var(--pair) var(--stack); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); }
#email-channel-card .email-check-name { color: var(--text); font: var(--type-caption); font-weight: 600; }
#email-channel-card .email-actions { gap: var(--stack) var(--split); }
#email-channel-card .email-signatures { gap: var(--stack); }
:where(#email-channel-card, .hd-email) .email-status { color: var(--text-2); font: var(--type-caption); font-weight: 600; }
:where(#email-channel-card, .hd-email) .email-status[data-tone="ok"] { color: var(--ok); }
:where(#email-channel-card, .hd-email) .email-status[data-tone="error"] { color: var(--err); }

#install-card .install-card-steps { margin-block-start: var(--pair); }
#install-card .install-reason-body { gap: var(--row) var(--split); }
#install-card .install-reason-text code { font: var(--type-micro); font-family: var(--mono); font-weight: 600; }
#install-card .install-card-sub { margin: var(--row) 0 0; color: var(--text); font: var(--type-subtitle); letter-spacing: var(--track-subtitle); }
#install-card .install-dev { gap: var(--stack); padding-block-start: var(--split); }
#install-card .install-dev-row { gap: var(--stack); }
#install-card .install-dev-status { color: var(--text-2); font: var(--type-caption); font-weight: 600; }
#install-card .install-dev-status[data-tone="ok"] { color: var(--ok); }
#install-card .install-dev-status[data-tone="error"] { color: var(--err); }
html[lang="ar"] #install-card .install-card-sub, html[lang="ar"] #email-channel-card .email-sub { font-family: var(--font-arabic), var(--display); letter-spacing: 0; }
.install-drawer .ui-dialog-body { color: var(--text); }

.domain-card .domain-list { gap: var(--split); margin-block-start: var(--split); }
.domain-block { gap: var(--stack); padding-block-start: var(--split); }
.domain-head { gap: var(--stack); }
.domain-host { color: var(--text); font: var(--type-subtitle); font-family: var(--mono); letter-spacing: 0; }
.domain-sub { margin: var(--pair) 0 0; color: var(--text); font: var(--type-caption); font-weight: 600; }
.domain-records { gap: var(--stack); }
.domain-record-rows { gap: var(--row); }
.domain-record-rows dt { color: var(--text-2); font: var(--type-micro); font-weight: 600; }
.domain-checks { gap: var(--pair); padding-inline-start: var(--split); font: var(--type-caption); }
.domain-checks li[data-ok="true"] { color: var(--ok); }
.domain-checks li[data-ok="false"] { color: var(--err); }
.domain-add-row { gap: var(--row); }
.domain-card .domain-steps { margin-block: var(--pair); }

/* Settings > Conversations > Instructions per channel: the count in each summary. */
#channel-rules .channel-rules-count { color: var(--text-2); font: var(--type-micro); }

/* ==== Settings > Integrations: the directory, the catalogue, a handoff's ticket tool ==== */
/* A tool's mark: a tile in the soft fill of its group's colour, the glyph in the colour itself (the
   light cobalt, green, amber or plain), on the dark panel instead of the light pastels. */
#directory-panel .ui-radio-card-icon { width: 40px; height: 40px; border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); }
#directory-panel [data-group="website"] .ui-radio-card-icon { background: var(--cobalt-soft); color: var(--cobalt-2); }
#directory-panel [data-group="channels"] .ui-radio-card-icon { background: var(--cobalt-soft); color: var(--cobalt-2); }
#directory-panel [data-group="knowledge"] .ui-radio-card-icon { background: var(--warn-soft); color: var(--warn); }
#directory-panel [data-group="actions"] .ui-radio-card-icon { background: var(--warn-soft); color: var(--orange); }
#directory-panel [data-group="booking"] .ui-radio-card-icon { background: var(--ok-soft); color: var(--ok); }
#directory-panel [data-group="handoff"] .ui-radio-card-icon { background: var(--lift); color: var(--text); }
#directory-panel [data-group="automation"] .ui-radio-card-icon { background: var(--lift); color: var(--text-2); }
/* A tool's card: a row of the list until it is chosen, then washed in cobalt with a light ring. */
#directory-panel .ui-radio-cards { column-gap: var(--block); row-gap: var(--pair); }
#directory-panel .ui-radio-card { column-gap: var(--split); row-gap: var(--pair); padding: var(--stack); border-radius: var(--r-md); }
#directory-panel .ui-radio-card:hover { background: var(--raised); }
#directory-panel .ui-radio-card:has(input:checked) { background: var(--cobalt-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cobalt-2) 40%, transparent); }
/* The round control: a + to add it, a tick once it is connected. */
#directory-panel .ui-radio-card input { width: var(--h-sm); height: var(--h-sm); background-size: 14px 1.5px, 1.5px 14px; }
#directory-panel .ui-radio-card:hover input, #directory-panel .ui-radio-card input:checked { background-color: var(--lift); }
#directory-panel .ui-radio-card:is([data-status="connected"], [data-status="installed"]) input {
  background-color: var(--ok-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%234CC38A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 10.5 3.2 3.2L15 7'/%3E%3C/svg%3E");
  background-size: 16px 16px;
}
/* The plan it comes with and its state: the reference's small pills. */
#directory-panel .dir-figure { gap: var(--row); padding-inline-start: 56px; }
#directory-panel .ui-badge {
  display: inline-flex; align-items: center; min-height: var(--h-xs); padding: 0 var(--row); border-radius: var(--r-pill);
  background: rgba(157,184,255,.12); color: var(--cobalt-2); font: var(--type-micro); font-weight: 600;
}
#directory-panel .ui-badge[data-plan-badge="needed"] { background: var(--warn-soft); color: var(--warn); }
#directory-panel .ui-pill { gap: var(--pair); min-height: var(--h-xs); padding: 0 var(--row); border-radius: var(--r-pill); color: var(--text-2); font: var(--type-micro); font-weight: 600; }
#directory-panel .ui-pill[data-status="ok"] { background: var(--ok-soft); color: var(--ok); }
#directory-panel .ui-pill[data-status="warn"] { background: var(--warn-soft); color: var(--warn); }
@media (max-width: 760px) {
  #directory-panel .ui-radio-cards { row-gap: var(--pair); }
}
#directory-panel :is(.dir-connected-title, .dir-group-title) {
  margin: var(--group) 0 var(--row); padding-block-end: var(--stack); border-bottom: 1px solid var(--line);
  color: var(--text); font: var(--type-subtitle); letter-spacing: var(--track-subtitle);
}
#directory-panel .dir-connected-mark { border-radius: var(--r-md); transition: none; }
#directory-panel .dir-connected-mark:hover { transform: none; }
#directory-panel .dir-card-main { gap: var(--split); }
#directory-panel .dir-card-main strong { color: var(--text); font: var(--type-small); font-weight: 600; }
#directory-panel .dir-card-main small { margin-block-start: var(--pair); color: var(--text-2); font: var(--type-caption); }
#directory-panel .dir-figure { gap: var(--row); }
#esc-cards .esc-card-main { gap: var(--stack); }
#cat-drawer .cat-action { gap: var(--row); padding: var(--stack) var(--in-s); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--raised); }
#cat-drawer .cat-action .ui-switch + .ui-switch { padding-inline-start: var(--split); }

/* ==== Knowledge ==== */
.kn-source { gap: var(--pair); }
.kn-source strong { color: var(--text); font-weight: 600; }
.kn-source small { color: var(--text-2); font: var(--type-micro); }
.kn-source small[data-kind="error"] { color: var(--err); font-weight: 600; }
.kn-actions { gap: var(--row); }
.kn-actions .ui-btn { white-space: nowrap; }
/* Suggestions: a conflict or a new answer, the excerpts it is read from. */
.kn-suggest-list { gap: var(--stack); }
.kn-suggest-list .ui-callout-body { gap: var(--row); }
.kn-suggest-list h4 { color: var(--text); font: var(--type-caption); font-weight: 600; }
.kn-excerpts { gap: var(--stack); }
.kn-excerpt { gap: var(--pair); padding: var(--stack) var(--in-s); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--raised); }
.kn-excerpt figcaption { color: var(--text-2); font: var(--type-micro); font-weight: 600; }
.kn-excerpt blockquote { color: var(--text); font: var(--type-caption); }
.kn-suggest-actions { gap: var(--row); }
.kn-suggest-list .ui-segment { min-height: var(--h-md); }
.kn-suggest-meta { color: var(--text-2); font: var(--type-micro); }

/* ==== Actions and procedures ==== */
.ac-labels { gap: var(--row); margin-block-start: var(--row); }
.ac-label-row { gap: var(--row); }
.ac-label-value { font: var(--type-micro); }
.ac-input-row { gap: var(--stack); padding: var(--stack) var(--in-s); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--raised); }
.ac-header-row { gap: var(--stack); }
.ac-cell-name { gap: var(--pair); }
.ac-cell-name code, .ui-table td .ac-cell-name code { color: var(--text); font: var(--type-caption); font-family: var(--mono); font-weight: 600; }
.ac-cell-name span { color: var(--text-2); font: var(--type-micro); }
.ac-row-actions { gap: var(--row); flex-wrap: wrap; }

/* An action's Activity (the founder, 2026-10-17): its calls in a Drawer, each a card on --raised. */
.ac-activity-body { display: grid; gap: var(--stack); align-content: start; }
.ac-activity-body > p { margin: 0; }
.ac-activity-list { display: grid; gap: var(--row); margin: 0; padding: 0; list-style: none; }
.ac-activity-list[hidden] { display: none; }
.ac-call { display: grid; gap: var(--pair); min-width: 0; padding: var(--stack) var(--in-s); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--raised); }
.ac-call-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pair) var(--row); }
.ac-call-when, .ac-call-took { color: var(--text-2); font: var(--type-caption); }
.ac-call-line { margin: 0; color: var(--text); font: var(--type-caption); overflow-wrap: anywhere; }
.ac-call-asked, .ac-call-gone { margin: 0; color: var(--text-2); font: var(--type-micro); overflow-wrap: anywhere; }
.ac-call-request { justify-self: start; max-width: 100%; color: var(--text-2); font: var(--type-micro); font-family: var(--mono); overflow-wrap: anywhere; }
.ac-call-open { justify-self: start; font: var(--type-caption); }
.hd-blocks { gap: var(--row); margin-block-start: var(--row); }
.hd-blocks-label { color: var(--text-2); font: var(--type-micro); font-weight: 600; }

.pr-item { gap: var(--stack) var(--split); padding: var(--stack) var(--in-s); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--raised); box-shadow: none; }
.pr-item-main { gap: var(--pair); }
.pr-item-title { color: var(--text); font: var(--type-caption); font-weight: 600; }
.pr-item-meta, .pr-item-problem { color: var(--text-2); font: var(--type-micro); }
.pr-item-problem { color: var(--warn); }
.pr-item-tools { gap: var(--row) var(--stack); }
.pr-step-body { gap: var(--row); }
.pr-step-words { color: var(--text); font: var(--type-caption); font-weight: 600; }
.pr-step-when { gap: var(--pair) var(--row); color: var(--text-2); font: var(--type-micro); font-weight: 600; }
.pr-step-controls { gap: var(--row) var(--split); }
.pr-action-field { gap: var(--row); }
.pr-step-moves { gap: var(--pair); }

/* ==== Analytics ==== */
.an-stats .stat-label, .csat-section .stat-label { gap: var(--row); }
.an-stats .stat-label .ui-icon-btn, .csat-section .stat-label .ui-icon-btn { width: var(--h-sm); min-height: var(--h-sm); color: var(--text-2); }
.an-stats .ui-sparkline { margin-block-start: var(--stack); }
.an-stats .an-skeleton { min-height: 104px; border-radius: var(--r-md); }
/* What visitors ask about: a conversation under the map. */
.topics-conv { gap: var(--pair); padding: var(--stack) var(--in-s); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--raised); }
.topics-conv-text { color: var(--text); font: var(--type-caption); font-weight: 600; }
.topics-conv-meta { gap: var(--pair) var(--stack); color: var(--text-2); font: var(--type-micro); }

/* ==== Ask bidi (Backstage): a proposed change ==== */
.bs-proposal .ui-callout-body { gap: var(--row); }
.bs-proposal-meta { gap: var(--row); color: var(--text-2); font: var(--type-micro); font-weight: 600; }
.bs-proposal-reason, .bs-proposal-note { color: var(--text); font: var(--type-caption); }
.bs-proposal-note { color: var(--text-2); }
.bs-proposal-actions { gap: var(--row); }
.bs-proposal-error { color: var(--err); font: var(--type-caption); font-weight: 600; }
/* A change suggested after reading what customers wrote: said in words, on the warning colour. */
.bs-proposal-caution { color: var(--warn-text); font: var(--type-caption); font-weight: 600; }
/* A place in the dashboard an answer names: a link in the kit's link dress, underlined, never colour alone. */
.bs-log .ui-chat-bubble a { color: var(--cobalt-2); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* ==== + New bot: the menu's choices ==== */
.new-bot-full { color: var(--text-2); font: var(--type-caption); }
.new-bot-full a { color: var(--cobalt-2); font-weight: 600; }
.new-bot-menu .ui-menu-item { gap: var(--pair); padding-block: var(--stack); }
.new-bot-menu .new-bot-name { color: var(--text); font: var(--type-caption); font-weight: 600; font-family: var(--display); }
.new-bot-menu .new-bot-hint { color: var(--text-2); font: var(--type-micro); }

/* ==== Settings > Developers and webhooks ==== */
.dev-tags { gap: var(--pair); }
/* A row's own action keeps its word whole (the kit's cells may break anywhere, and a squeezed last column
   read "Rev / oke"). */
.link-action[data-action="revoke"] { overflow-wrap: normal; white-space: nowrap; }
.wh-row-url { gap: var(--pair); }
.wh-row-url small { color: var(--text-2); font: var(--type-micro); }

/* ==== Charts (assets/charts.js) ==== */
/* The reference's palette lives in ui.css's charts and treemap regions, so the kit and the dashboard
   draw the same charts. */