/* Dashboard layout. Every colour is a variable from /theme.css. */

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: max(8px, env(safe-area-inset-top)) 16px 8px;
  background: var(--color-surface);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}
.brand { margin-right: auto; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar nav { display: flex; gap: 2px; }
.topbar nav a { color: inherit; text-decoration: none; padding: 8px 10px; border-radius: 8px; }
.topbar nav a[aria-current="page"] { background: var(--color-accent); color: var(--color-on-accent); }

/* Room to breathe (Joel, 2026-09-19): "I like for people to be able to see things
   and focus on one thing at a time." Space separates sections; what belongs
   together stays together. */
/* width: 100% matters. The page is a grid item with auto margins, and without a
   width it shrinks to its content: Analyze was drawn a third of the screen wide. */
.page { width: 100%; max-width: 1100px; margin: 0 auto; padding: 28px 32px 56px; }
.page-narrow { max-width: 820px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.page-title { margin: 0 0 24px; font-size: 1.6rem; line-height: 1.25; }
.page-head .page-title { margin-bottom: 0; }
.hint { margin: 0; font-size: 0.875rem; line-height: 1.5; }
@media (max-width: 899px) {
  .page { padding: 20px 16px 48px; }
  .page-title { font-size: 1.4rem; margin-bottom: 18px; }
}
.empty { padding: 24px; text-align: center; color: var(--color-text-muted); }
.back { display: inline-block; margin-bottom: 8px; color: var(--color-accent); text-decoration: none; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row > input { flex: 1; min-width: 0; }

.inbox { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.conv {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  text-decoration: none;
}
.conv-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Who is on it, and how many times the customer has written with no answer
   (Joel, 2026-09-25). Both are round, small, and never the only signal: the
   status chip beside them says the same thing in words. */
.who-mark, .unanswered {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 13px;
  font-size: 0.78rem;
  font-weight: 600;
}
.who-mark { background: var(--color-accent-soft); color: var(--color-text); }
.unanswered { background: var(--color-bad); color: var(--color-surface); }
.conv time { font-size: 0.85rem; color: var(--color-text-muted); }

.tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.tabs button { flex: 1; background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.tabs button[aria-selected="true"] { background: var(--color-accent); color: var(--color-on-accent); border-color: transparent; }

.panes { display: grid; gap: 16px; }
.pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: calc(var(--view, 100dvh) - 190px);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}
.pane-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--color-border); }
.pane-head h2 { margin: 0; font-size: 1rem; }

.messages, .copilot {
  flex: 1;
  /* Without this a flex item refuses to shrink below its content, so a long
     conversation pushes the typing box off the pane instead of scrolling. */
  min-height: 0;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.msg { max-width: 85%; }
.msg p, .cp p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg p { padding: 9px 13px; border-radius: 16px; }
.msg-customer p { background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border); border-bottom-left-radius: 4px; }
.msg-bot, .msg-operator { align-self: flex-end; }
.msg-bot p { background: var(--color-surface); color: var(--color-text); border: 1px dashed var(--color-accent); border-bottom-right-radius: 4px; }
.msg-operator p { background: var(--color-accent); color: var(--color-on-accent); border-bottom-right-radius: 4px; }
.msg-system { align-self: center; max-width: 95%; }
.msg-system p { font-size: 0.85rem; color: var(--color-text-muted); text-align: center; }
.msg-bot .who, .msg-operator .who { text-align: right; }
.who { display: block; margin: 0 6px 2px; font-size: 0.75rem; color: var(--color-text-muted); }

/* What the customer needs. It is capped and scrolls inside itself, because on a
   phone three lines of it left the answer underneath about one line tall
   (Joel, 2026-09-21). */
.latest { flex: 0 1 auto; max-height: 9.5em; overflow-y: auto; margin: 10px 14px 4px; padding: 8px 12px; background: var(--color-bg); color: var(--color-text); border-left: 3px solid var(--color-accent); border-radius: 6px; }
.latest p { margin: 0; max-height: 7.5em; overflow-y: auto; white-space: pre-wrap; }

.cp-operator { align-self: flex-end; max-width: 85%; padding: 8px 12px; background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 14px; }
.cp-note { padding: 10px 12px; background: var(--color-bg); color: var(--color-text); border-radius: 14px; }
.cp-draft { padding: 12px; border: 2px solid var(--color-accent); border-radius: 14px; }
.cp-thinking { color: var(--color-text-muted); font-style: italic; }
/* Four boxes, one size and one colour, two by two on a phone (Joel, 2026-09-21):
   "they're all like out of whack on the phone... I want four good looking boxes." */
.draft-actions { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 8px; margin-top: 10px; }
/* Every box the same, however long its words: the rows share one height and each
   button fills its cell. Two of the four wrap onto a second line on a phone. */
.draft-actions button { width: 100%; height: 100%; min-height: 48px; padding: 8px 10px; font-size: 0.95rem; font-weight: 600; }
@media (min-width: 900px) {
  .draft-actions { grid-template-columns: repeat(4, 1fr); }
}

.composer { display: flex; align-items: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--color-border); }
/* A tall box must not outgrow what the keyboard leaves on screen, or it covers
   the conversation above it (Joel, 2026-09-21). */
.composer textarea { resize: none; max-height: calc(var(--view, 100dvh) * 0.3); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 12px; }
/* Waiting for a person: Accept and Decline, at the top where they cannot be missed. */
.waiting-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 14px 12px; padding: 12px 16px; border-radius: 10px; background: var(--color-accent-soft); color: var(--color-text); }
.waiting-bar[hidden] { display: none; }
.waiting-note { margin: 0; font-weight: 600; }
.mic { display: inline-flex; align-items: center; justify-content: center; padding: 10px 12px; }
/* Sized here rather than in the markup, so the drawn icon lines up with the text
   boxes beside it whatever the button padding becomes. */
.mic .icon { display: block; width: 22px; height: 22px; }
.mic.listening { background: var(--chip-red-bg); color: var(--chip-red-text); border-color: transparent; }

@media (min-width: 900px) {
  .tabs { display: none; }
  .panes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 899px) {
  .panes[data-active="customer"] .pane-copilot,
  .panes[data-active="copilot"] .pane-customer { display: none; }
  /* On a phone the typing bar is pinned to the bottom and the answers scroll
     behind it (Joel, 2026-09-21): "it's pushed to the top of the screen and it
     squeezes the screen. All that needs to be pushed back down."
     The list of what the customer needs is capped so the answers keep their room,
     which is what the whole pane scrolling was trying to fix. */
  /* The panes are sized in the script to the visible area, so a pane fills it. */
  .panes > .pane { height: 100%; }
  /* While the keyboard is up, everything that is not the conversation gets out of
     the way, or the typing box ends up under it. */
  body.typing .my-chats,
  body.typing .back,
  body.typing .pane-customer .pane-head,
  body.typing .pane-copilot .pane-head,
  body.typing .latest { display: none; }
  body.typing .page { padding-top: 8px; }
  .pane-copilot { overflow: hidden; }
  .pane-copilot .latest { max-height: 30%; overflow-y: auto; }
  .pane-copilot .copilot { flex: 1; min-height: 120px; overflow-y: auto; }
}

.card { margin-bottom: 24px; padding: 24px 28px; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 14px; }
.card > :last-child { margin-bottom: 0; }
.card h2 { margin: 0 0 10px; font-size: 1.2rem; line-height: 1.3; }
.card h3 { margin: 28px 0 8px; font-size: 1.02rem; }
.card p { margin: 0 0 14px; line-height: 1.55; }
.card .hint { margin-bottom: 16px; }
/* A note under a button or a row of buttons sits a little apart from it. */
.card button + .hint, .card .row + .hint, .card button + p { margin-top: 12px; }
.field { display: block; margin-bottom: 18px; }
.field > span { display: block; margin-bottom: 6px; font-size: 0.9rem; font-weight: 500; color: var(--color-text-muted); }
@media (max-width: 899px) {
  .card { padding: 20px 18px; margin-bottom: 18px; }
}

.articles { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.plain-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.plain-list li { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.chain { margin: 0 0 8px; padding-left: 1.4em; display: flex; flex-direction: column; gap: 8px; }
.chain-step { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.chain-step select { flex: 1; min-width: 12em; }
.minutes { display: flex; align-items: center; gap: 4px; }
.minutes input { width: 5.5em; }

/* Left-hand menu: a fixed column on wide screens, a slide-in drawer on phones. */
.layout { min-height: 100dvh; }
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: max(16px, env(safe-area-inset-top)) 12px 16px;
  overflow-y: auto;
  background: var(--color-surface);
  color: var(--color-text);
  border-right: 1px solid var(--color-border);
}
.sidebar-brand { padding: 4px 10px 12px; font-weight: 700; }
.nav-list, .nav-sub { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nav-sub { margin: 2px 0 6px 14px; padding-left: 8px; border-left: 1px solid var(--color-border); }
.nav-link, .nav-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.nav-link:hover, .nav-group:hover { background: var(--color-bg); }
.nav-link[aria-current="page"] { background: var(--color-accent); color: var(--color-on-accent); }
.nav-group.active { font-weight: 600; }
.chevron { font-size: 1.2rem; line-height: 1; transition: transform 0.15s; }
.nav-group[aria-expanded="true"] .chevron { transform: rotate(90deg); }
.menu-button { min-height: 40px; padding: 6px 12px; font-size: 1.1rem; }

/* Each entry is an icon and a label. On a phone the drawer is wide, so both show. */
.nav-icon { width: 22px; height: 22px; flex: none; }
.nav-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-link, .nav-group { gap: 10px; }
.sidebar-head { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.sidebar-brand { padding: 0; font-weight: 700; white-space: nowrap; overflow: hidden; }
.rail-toggle {
  display: none;
  align-items: center;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.rail-toggle:hover { background: var(--color-bg); }

@media (min-width: 900px) {
  /* ---- The menu on a computer -------------------------------------------
     A 68 pixel rail of icons that widens to 240 while the mouse is over it, or
     stays wide when the bars are clicked.

     Two separate jobs, two separate mechanisms, and confusing them is what broke
     this the first time round:
       - Room for the rail is PADDING on the layout. The sidebar is fixed, so it
         occupies no grid cell; giving it a column dropped the page into the 68
         pixel column and every screen rendered 143 pixels wide.
       - The layout stays a GRID, because the test panel is one of its columns.
         Switching it to display:block stacked the panel underneath the page.

     THE RULE THAT MATTERS: no row in the closed rail changes size. Every row keeps
     one box, so an icon centred in it lands on the same line as every other icon,
     by construction. `.nav-link[aria-current="page"]` above paints the current
     page with an accent background and matches links at any depth; four attempts
     to size a box around that pill (44, 32, 26 with a margin, a transparent
     border) each staggered the icons by 4 to 11 pixels. So in the closed rail the
     current page is shown by the COLOUR of its icon and nothing else.

     Sizes, once: rail 68, parent icon 22 on centre 34, child row indented 24 with
     an 18 icon on centre 46, joining line at 22 with 14 clear to the nearest
     child pixel.
     ---------------------------------------------------------------------- */
  .layout { display: grid; grid-template-columns: minmax(0, 1fr); padding-left: 68px; transition: padding-left 0.15s; }
  body.nav-pinned .layout { padding-left: 240px; }
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    width: 68px;
    overflow-x: hidden;
    transition: width 0.15s;
    /* A menu taller than the window still scrolls, with no bar. A visible bar takes
       its width out of the 68 pixel rail and knocks every icon off centre, which
       is what the second inbox did to a laptop screen on 2026-09-18. */
    scrollbar-width: none;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar:hover:not(.resting), .sidebar.pinned { width: 240px; }
  /* Resting: folded to icons straight after a page is picked, even though the
     mouse is still over the menu, until the mouse leaves it once. The page redraws
     under a still mouse, so without this the menu stayed wide over the new page
     until a click elsewhere (Joel, 2026-09-18: "I had to click on the whole page
     and then it all shrunk in"). */
  .rail-toggle { display: flex; }
  .mobilebar, .scrim { display: none; }

  /* Off screen but still named, for a screen reader. opacity would leave the label
     occupying its box and clip stray characters down the rail. */
  .sidebar:not(:hover:not(.resting)):not(.pinned) .nav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* Gone, not hidden: a hidden box still holds its width, and the chevron's width
     was what pushed Train and Settings off centre. Safe for these two only, since
     the chevron is decorative and the name is also in the phone bar. */
  .sidebar:not(:hover:not(.resting)):not(.pinned) .chevron,
  .sidebar:not(:hover:not(.resting)):not(.pinned) .sidebar-brand { display: none; }
  /* Every row: the same box, icon in the middle, the bars included. */
  .sidebar:not(:hover:not(.resting)):not(.pinned) .sidebar-head,
  .sidebar:not(:hover:not(.resting)):not(.pinned) .nav-link,
  .sidebar:not(:hover:not(.resting)):not(.pinned) .nav-group,
  .sidebar:not(:hover:not(.resting)):not(.pinned) .rail-toggle {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  /* The current page, on the icon rather than around it. No box, nothing to move. */
  .sidebar:not(:hover:not(.resting)):not(.pinned) .nav-link[aria-current="page"] {
    background: transparent;
    color: var(--color-accent);
  }
  /* A group's pages, indented to leave room for the line. The indent is on the
     list, so every row inside shifts together and they keep one centre. */
  .sidebar:not(:hover:not(.resting)):not(.pinned) .nav-sub {
    position: relative;
    margin: 0;
    padding: 0 0 0 24px;
    border-left: 0;
  }
  .sidebar:not(:hover:not(.resting)):not(.pinned) .nav-sub .nav-icon { width: 18px; height: 18px; }
  /* The line joining a group to its pages, as an overlay so it takes no space and
     cannot move an icon. The open menu draws the same line with a border. */
  .sidebar:not(:hover:not(.resting)):not(.pinned) .nav-sub::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 22px;
    width: 1px;
    background: var(--color-border);
  }
}
@media (max-width: 899px) {
  .mobilebar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: max(8px, env(safe-area-inset-top)) 16px 8px;
    background: var(--color-surface);
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
  }
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    width: min(280px, 85vw);
    transform: translateX(-100%);
    transition: transform 0.2s;
  }
  .drawer-open .sidebar { transform: none; }
  .scrim { position: fixed; inset: 0; z-index: 35; background: var(--color-text); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
  .drawer-open .scrim { opacity: 0.4; pointer-events: auto; }
}

input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; margin: 0; accent-color: var(--color-accent); }
.routing .chain { margin-bottom: 12px; }
.routing .field-short input { max-width: 8em; }
.routing .field-short { margin-top: 24px; }
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-right: 16px; }
/* The access checklist on the invite form. Thirteen boxes in five groups, so each
   group is its own panel and the grid goes two or three up on a wider screen and
   one up on a phone. One tick to a line inside a panel. */
.access-list { display: grid; gap: 12px; margin: 12px 0 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.access-group { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: 10px; padding: 10px 12px; }
.access-group-name { font-weight: 600; font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 4px; }
.access-list .check { margin-right: 0; min-height: 36px; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

.rules { list-style: none; margin: 0 0 8px; padding: 0; }
.rule { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-top: 1px solid var(--color-border); }
.rule:first-child { border-top: 0; }
.rule-text { flex: 1; min-width: 0; }
.rule-title { margin: 0; font-weight: 600; }
.rule-body { margin: 2px 0 0; font-size: 0.9rem; color: var(--color-text-muted); overflow-wrap: anywhere; }
.rule .row { flex: none; align-items: center; }

.article-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.article-row .article-name { flex: 1; min-width: 12em; font-weight: 600; }

.checklist { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.checklist li { display: flex; align-items: flex-start; gap: 10px; }
.checklist a { color: inherit; text-decoration: none; }
.checklist .rule-title { text-decoration: underline; text-decoration-color: var(--color-border); }
.step-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7em;
  height: 1.7em;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text-muted);
}
/* Five colours down a list of steps, so setting up reads as a sequence instead
   of a wall of teal. It cycles every five, so a longer list keeps going. The
   colour is decoration: each step still shows its number and its words, because
   these hues are too close together for a colour-blind viewer to tell apart. */
.checklist li:nth-child(5n + 1) .step-mark { background: var(--color-hue-blue); color: var(--color-on-accent); border-color: transparent; }
.checklist li:nth-child(5n + 2) .step-mark { background: var(--color-hue-sky); color: var(--color-on-accent); border-color: transparent; }
.checklist li:nth-child(5n + 3) .step-mark { background: var(--color-hue-teal); color: var(--color-on-accent); border-color: transparent; }
.checklist li:nth-child(5n + 4) .step-mark { background: var(--color-hue-sea); color: var(--color-on-accent); border-color: transparent; }
.checklist li:nth-child(5n + 5) .step-mark { background: var(--color-hue-green); color: var(--color-on-accent); border-color: transparent; }
/* After the colours, and at the same weight, so a finished step looks finished
   wherever it sits in the list. */
.checklist li .step-mark.done, .step-mark.done { background: var(--chip-green-bg); color: var(--chip-green-text); border-color: transparent; }
.progress { height: 6px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: var(--color-bg); }
.progress > span { display: block; height: 100%; background: var(--color-accent); }

/* Test preview panel: a right-hand column on computers, full screen on phones. */
.preview {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--color-surface);
  color: var(--color-text);
  border-left: 1px solid var(--color-border);
}
.preview .messages { flex: 1; }
.preview-tools { margin-left: auto; flex-wrap: nowrap; }
/* The one way into the test panel, top right of the page on every screen size.
   It was two buttons before, one at the bottom of the nav and one in the phone
   bar, and neither belonged in navigation. */
.page-top { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-bottom: 12px; }

/* Help and your account, top right of every page (Joel, 2026-09-19). On a phone
   they sit in the bar at the top instead, so the copy in the page is hidden. */
.top-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.help-button, .avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  flex: none;
}
.help-button {
  position: relative;
  border: 0;
  border-radius: 10px;
  background: var(--color-accent);
  color: var(--color-on-accent);
}
/* The mark leaves its own margin, so it fills the button (Joel, 2026-09-21). */
.help-button-mark { width: 40px; height: 40px; }
.help-button .bubble-dot, .help-dock-head .bubble-dot { fill: var(--color-accent); }
/* A hidden help chat is live: a green dot. A reply came while it was hidden: a
   red count and one pulse. The same signals as the chat button on a website
   (Joel, 2026-09-19). */
.help-button.has-chat::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-good);
}
.help-count { display: none; }
.help-button.unread .help-count {
  position: absolute;
  top: -8px;
  right: -8px;
  display: block;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border: 2px solid var(--color-surface);
  border-radius: 11px;
  background: var(--color-bad);
  color: var(--color-surface);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
@keyframes help-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
.help-button.pulse { animation: help-pulse 0.5s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) { .help-button.pulse { animation: none; } }
.avatar {
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.account { position: relative; }
.account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 240px;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 12px 32px color-mix(in oklab, var(--color-text) 18%, transparent);
}
.account-menu[hidden] { display: none; }
.account-who { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; padding: 8px 10px 12px; border-bottom: 1px solid var(--color-border); overflow-wrap: anywhere; }
.account-who span { color: var(--color-text-muted); font-size: 0.875rem; }
.account-item { padding: 10px; border-radius: 8px; color: var(--color-text); text-decoration: none; }
.account-item:hover, .account-item:focus-visible { background: var(--color-bg); }

/* The Help window drops down from the top right, over the test panel when that is
   open. A teal frame and a teal title bar set it apart from the panel, which is a
   plain white column. */
.help-dock {
  position: fixed;
  top: 64px;
  right: 16px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100vw - 32px));
  height: min(620px, calc(var(--view, 100dvh) - 80px));
  overflow: hidden;
  border: 2px solid var(--color-accent);
  border-radius: 16px;
  background: var(--color-surface);
  box-shadow: 0 16px 48px color-mix(in oklab, var(--color-text) 30%, transparent);
}
.help-dock[hidden] { display: none; }
.help-dock-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.help-dock-mark { width: 28px; height: 28px; flex: none; }
.help-dock-title { display: flex; flex-direction: column; min-width: 0; }
.help-dock-title h2 { margin: 0; font-size: 1rem; }
.help-dock-title span { font-size: 0.8rem; }
.help-dock-tools { margin-left: auto; flex-wrap: nowrap; }
.help-dock-frame { flex: 1; width: 100%; min-height: 0; border: 0; }
@media (max-width: 899px) {
  .page-top .top-actions { display: none; }
  .page-top:not(:has(.preview-open)) { display: none; }
  .mobilebar .top-actions .help-button, .mobilebar .top-actions .avatar { width: 36px; height: 36px; min-height: 36px; }
}
@media (max-width: 520px) {
  .help-dock { inset: 0; width: auto; height: auto; padding-top: env(safe-area-inset-top); border: 0; border-radius: 0; }
}

@media (min-width: 900px) {
  /* The page, then the panel. The leading 240px column used to be the menu, and
     the menu is a fixed rail now that reserves its own room with padding on the
     layout. Leaving that column here squeezed the page into it: measured at 240
     wide with the panel taking 512, which is the panel stacking bug's twin. */
  .layout.with-preview { grid-template-columns: minmax(0, 1fr) 380px; }
  .layout.with-preview.preview-wide { grid-template-columns: minmax(0, 1fr) min(680px, 45vw); }
  .preview { position: sticky; top: 0; height: var(--view, 100dvh); }
}
@media (max-width: 899px) {
  .preview { position: fixed; inset: 0; z-index: 50; padding-top: env(safe-area-inset-top); border-left: 0; }
  .preview-wide-toggle { display: none; }
}
.row > .field { flex: 1; min-width: 10em; }

/* Analyze: KPI tiles, one stacked bar chart, and its table-view twin. */
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.filters button { min-height: 36px; padding: 6px 14px; background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.filters button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-on-accent); border-color: transparent; }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
@media (max-width: 720px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile { padding: 14px 16px; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 12px; }
.tile-label { margin: 0; font-size: 0.85rem; color: var(--color-text-muted); }
.tile-value { margin: 4px 0 0; font-size: 1.6rem; font-weight: 600; line-height: 1.1; }
.tile-note { margin: 2px 0 0; font-size: 0.8rem; color: var(--color-text-muted); }

/* One colour per stat, so a row of numbers can be told apart at a glance.
   The label under each number still says what it is. */
.tiles > .tile:nth-child(5n + 1) { border-top: 3px solid var(--color-hue-blue); }
.tiles > .tile:nth-child(5n + 1) .tile-value { color: var(--color-hue-blue); }
.tiles > .tile:nth-child(5n + 2) { border-top: 3px solid var(--color-hue-sky); }
.tiles > .tile:nth-child(5n + 2) .tile-value { color: var(--color-hue-sky); }
.tiles > .tile:nth-child(5n + 3) { border-top: 3px solid var(--color-hue-teal); }
.tiles > .tile:nth-child(5n + 3) .tile-value { color: var(--color-hue-teal); }
.tiles > .tile:nth-child(5n + 4) { border-top: 3px solid var(--color-hue-sea); }
.tiles > .tile:nth-child(5n + 4) .tile-value { color: var(--color-hue-sea); }
.tiles > .tile:nth-child(5n + 5) { border-top: 3px solid var(--color-hue-green); }
.tiles > .tile:nth-child(5n + 5) .tile-value { color: var(--color-hue-green); }

.chart-card { padding: 16px; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 12px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 4px; padding: 0; list-style: none; font-size: 0.85rem; }
.chart-legend li { display: flex; align-items: center; gap: 6px; }
.legend-key { width: 12px; height: 12px; border-radius: 3px; }
.legend-key.series-1 { background: var(--color-series-1); }
.legend-key.series-2 { background: var(--color-series-2); }
.chart-scroll { overflow-x: auto; }
.chart svg { display: block; width: 100%; height: auto; }
.chart .grid { stroke: var(--color-border); stroke-width: 1; }
.chart .axis-text { fill: var(--color-text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .bar-1 { fill: var(--color-series-1); }
.chart .bar-2 { fill: var(--color-series-2); }
.chart .hit { fill: transparent; }
.chart .hit:hover + .bars, .chart .hit:focus-visible + .bars { opacity: 0.75; }
.chart-empty { padding: 32px 8px; text-align: center; color: var(--color-text-muted); }

.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.data-table caption { text-align: left; padding-bottom: 8px; color: var(--color-text-muted); }
.data-table th, .data-table td { padding: 6px 8px; border-bottom: 1px solid var(--color-border); text-align: left; }
.data-table td { font-variant-numeric: tabular-nums; }

.questions { list-style: none; margin: 8px 0 0; padding: 0; }
.question { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px; padding: 12px 0; border-top: 1px solid var(--color-border); }
.question:first-child { border-top: 0; }
.question-actions { flex: none; align-items: center; }
button.rating-good { background: var(--chip-green-bg); color: var(--chip-green-text); border-color: transparent; }
button.rating-poor { background: var(--chip-red-bg); color: var(--chip-red-text); border-color: transparent; }

/* Drop a document here. Dashed edge so it reads as somewhere to put a file. */
.dropzone {
  padding: 22px 18px;
  border: 2px dashed var(--color-border);
  border-radius: 12px;
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--color-accent); }
.dropzone.over { border-color: var(--color-accent); background: var(--color-accent-soft); }
.dropzone.busy { cursor: progress; opacity: 0.7; }
.dropzone-lead { margin: 0 0 2px; font-weight: 600; font-size: 1.05rem; }
.dropzone .plain-points { margin: 12px 0 0; font-size: 0.85rem; }

/* The numbered walkthrough for getting an AI key, and the worries under it. The
   tinted panel sets it apart from the plain cards around it. */
.guide-card { background: var(--color-accent-soft); color: var(--color-text); }
/* The links are the point of this panel, so they are underlined and weighted.
   A pale link that does not look clickable defeats the whole walkthrough. */
.guide-card a { color: var(--color-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.checklist.guide { margin-bottom: 4px; }
.checklist.guide li { align-items: center; }
.checklist.guide .rule-text { margin: 0; }
.worry { margin-bottom: 12px; }
.worry-q { margin: 0 0 2px; font-weight: 600; }

/* Recovery codes, shown once when they are generated. */
.codes {
  list-style: none;
  margin: 10px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9rem;
}

/* Workflows: the step editor and the ready-made template gallery. */
.steps { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.step { padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 10px; }
.step-extras:not(:empty) { margin-top: 6px; }
.template-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 12px; }
.template {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  height: 100%;
  padding: 12px 14px;
  text-align: left;
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}
.template-name { font-weight: 600; }
.template-blurb { font-size: 0.85rem; color: var(--color-text-muted); }

/* The paste-into-your-website snippet: code, so it reads as code. */
.snippet {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  resize: vertical;
}

.login { max-width: 380px; margin: 12vh auto; padding: 0 16px; }
.login h1 { font-size: 1.4rem; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 20;
  max-width: 90vw;
  padding: 10px 16px;
  background: var(--color-text);
  color: var(--color-surface);
  border-radius: 10px;
}

/* What happened to each email a customer was sent, under the conversation. */
.reply-hint { padding: 8px 14px 0; }

.conv-text .hint { font-size: inherit; }
.subject { margin: 0; padding: 10px 14px 0; font-weight: 600; }
.assign { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.assign select { width: auto; padding: 4px 8px; }

/* A teammate's mobile number for text alerts, inline in the team list. */
.phone { width: 11em; }

/* History's search and filter, side by side. */
.history-filters { margin-bottom: 12px; }
.history-filters input { flex: 2; }
.history-filters select { flex: 1; width: auto; }
/* A link that looks like the main button, for a reminder that goes somewhere. */
.button-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 600;
  text-decoration: none;
}
.reminder { margin-bottom: 12px; }

/* The note at the top of a sign-in style form, kept clear of the first box. */
.login form > .hint { margin-bottom: 12px; }

/* The chat button color picker (Settings, Chat Link). It opens on hover, on focus,
   and on a click or tap for phones, which have no hover. */
.color-picker { margin-top: 8px; }
.color-trigger { display: inline-flex; align-items: center; gap: 12px; }
.color-panel { display: none; margin-top: 12px; padding: 16px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.color-picker:hover .color-panel, .color-picker:focus-within .color-panel, .color-picker.open .color-panel { display: block; }
.color-panel-top { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.color-panel-top .field { margin: 0; }
.button-preview { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 56px; height: 56px; border-radius: 14px; }
.color-trigger .button-preview { width: 36px; height: 36px; border-radius: 9px; }
.preview-mark { width: 56px; height: 56px; }
.color-trigger .preview-mark { width: 36px; height: 36px; }
.honeycomb-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 12px; }
.honeycomb { width: min(100%, 300px); height: auto; }
.honeycomb polygon { cursor: pointer; stroke: var(--color-surface); stroke-width: 1.5; }
.honeycomb polygon:hover, .honeycomb polygon:focus { stroke: var(--color-text); stroke-width: 2.5; outline: none; }
.swatch-row { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.swatch { width: 22px; height: 22px; min-height: 0; padding: 0; border: 1px solid var(--color-border); border-radius: 6px; }

/* A step or rule reads as one unit: its title and description together, space
   between one step and the next. */
.card .checklist p, .card .rules p { margin: 0; }
.card .checklist .rule-body, .card .checklist .rule-text + .rule-body { margin-top: 3px; }
.checklist { gap: 16px; }
.card .checklist + button, .card .checklist + div, .card .rules + button, .card .rules + .row { margin-top: 20px; }
.card .progress { margin: 0 0 20px; }

/* Workflows and other listed rows: each row reads on its own. */
.workflow-row, .article-row { padding: 14px 0; }

/* Every inbox row lines up: the status label has one width, so the text after it
   starts at the same place on every row. */
.conv > .badge:first-child { min-width: 132px; justify-content: center; text-align: center; }
/* A short description under a page title belongs to the title. */
.page-title + .hint { margin: -14px 0 22px; }
.history-filters { margin-bottom: 20px; }

/* A team member: who they are on the left, what can be changed on the right. */
.plain-list li.person-row { padding: 14px 0; border-top: 1px solid var(--color-border); gap: 12px; }
.plain-list li.person-row:first-child { border-top: 0; padding-top: 4px; }
.person-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 14em; }
/* The conversation header: who has it sits on a line of its own. */
.pane-head .assign { flex-basis: 100%; margin-left: 0; }

/* The typing bar (Joel, 2026-09-19: on a phone "the microphone box was way too
   big and then the text box was way too small... and then the send box was way
   too big"). The text box takes the room; the microphone is a small round icon;
   Send and Draft are compact. Same on both sides of a conversation. */
.composer { align-items: center; gap: 8px; }
.composer textarea { flex: 1 1 0; min-width: 0; width: auto; min-height: 44px; }
/* A pane never grows past its column to fit a text box's built-in width. */
.panes > .pane { min-width: 0; }
.composer .mic { flex: none; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; }
.composer .mic .icon { width: 20px; height: 20px; }
.composer button[type="submit"] { flex: none; min-height: 44px; padding: 10px 16px; }
/* The two tabs of a conversation on a phone: one line each, never two. */
.tabs button { min-height: 40px; padding: 8px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The conversation's own menu: Return to the Agent, and Close chat, which asks
   first. Kept at the top, away from the thumb that is typing a reply. */
.more { position: relative; margin-left: auto; }
.more-button { min-width: 40px; font-size: 1.2rem; line-height: 1; }
.pop-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 12px 32px color-mix(in oklab, var(--color-text) 18%, transparent);
}
.pop-menu[hidden] { display: none; }
.menu-item {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text);
  font-weight: 500;
  text-align: left;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--color-bg); }
.menu-item[hidden] { display: none; }

/* Your open chats, above the conversation. */
.my-chats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.my-chats[hidden] { display: none; }
.my-chat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  padding: 6px 12px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.my-chat.current { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-text); }
.needs-you { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--color-bad); }

/* Who is in the chat, and what they have read (Joel, 2026-11-01). A dot on an
   inbox row, and a dot with a word on the conversation itself. Green means the
   customer has the chat open. Gray means they do not. */
.here-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--color-good); }
.here-dot.away { background: var(--color-text-muted); }
.presence { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--color-text-muted); }
/* One line above the message box. Typing on the left, Read or Sent on the right. */
.chat-state {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 14px 6px;
  min-height: 1.1em;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.chat-state .typing-note { margin-right: auto; }

/* What the customer needs, at the top of the assistant pane. */
.latest-head { display: flex; align-items: center; gap: 8px; }
.latest-head .who { margin-right: auto; }
.problem-list { margin: 8px 0 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; }
.problem-list li { line-height: 1.45; }
.problem-list li.empty { list-style: none; margin-left: -1.3em; color: var(--color-text); }
.copilot-row { margin: 8px 14px 14px; }
/* The same message in the operator's own language, under a draft. */
.gloss { margin-top: 6px; font-style: italic; }

/* The text alert agreement, beside the number. Its wording is what a carrier
   reviews, so it reads as one block rather than a stray tick box. */
.check.consent { align-items: flex-start; margin: 4px 0 8px; }
.check.consent span { line-height: 1.5; }
/* Big enough to see, and to photograph: a carrier reviewing the toll-free number
   is shown this box (Joel, 2026-09-21). */
.check.consent input[type="checkbox"] { width: 20px; height: 20px; margin-top: 3px; }

/* The typing bar, the way a phone does it (Joel, 2026-09-21): the box grows, the
   microphone steps aside once there are words, and Send is a round arrow that is
   dim until there is something to send. */
.send-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
}
.send-arrow .icon { width: 32px; height: 32px; }
.send-arrow:disabled { opacity: 0.4; }
.mic[hidden] { display: none; }
.mic.stop { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.mic.stop .icon { width: 18px; height: 18px; }

/* The assistant's typing bar is the customer's bar with two small boxes where the
   arrow would be (Joel, 2026-09-21): "in lieu of the circle there, there's just
   going to be two small boxes stacked on top of each other... Fix is the one on
   top." The same size as each other, and no bigger than they need to be. */
.stack-buttons { display: flex; flex-direction: column; flex: none; gap: 6px; }
/* Two squares, so the typing box keeps the width (Joel, 2026-09-21): "just make
   them two squares, not rectangles... I'd rather the chat box be bigger or wider."
   The composer sizes its own submit button, so this has to say it louder, or Fix
   comes out taller than Ask. */
.composer .stack-buttons button, .stack-buttons button {
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  font-size: 0.82rem;
}
.copilot-row { margin: 0 14px 10px; }