/* =========================================================================
   IZT interface
   =========================================================================
   One stylesheet, no framework, no build step - it ships inside the same
   container as the API.

   A customer controls one value: their accent colour, from /v1/branding.
   Everything else is derived from it with color-mix, so one hex per customer
   produces a coherent theme rather than a recoloured button.

   Theming: light by default, dark when the system asks, and either when the
   person picks one. The pattern below is deliberate - the system preference
   applies only when the page has not been told otherwise, so a chosen theme
   survives the operating system changing its mind.
   ========================================================================= */

:root {
  /* Violet rather than the blue every IT tool defaults to, and a warm pink
     as the second stop so the gradient travels somewhere instead of sliding
     from one blue to another. A customer's own accent replaces the first
     value at runtime; the second is derived from it, so their theme stays
     theirs and still has somewhere to go. */
  --accent: #7c4dff;
  --accent-2: color-mix(in oklab, var(--accent) 60%, #ff5c8a);
  --accent-soft: color-mix(in oklab, var(--accent) 10%, transparent);
  --accent-line: color-mix(in oklab, var(--accent) 24%, transparent);
  --accent-ink: #fff;
  --gradient: linear-gradient(135deg, var(--accent), var(--accent-2));

  /* Surfaces are translucent: the ambient wash behind them shows through,
     which is what makes the glass read as glass rather than as grey. */
  /* Warm-grey rather than blue-grey: the whole surface used to sit on a
     cool cast that made everything feel like a dashboard from 2014. */
  --bg: #f4f2f7;
  --wash-1: color-mix(in oklab, var(--accent) 18%, transparent);
  --wash-2: color-mix(in oklab, #ff5c8a 12%, transparent);
  --glass: rgba(255, 255, 255, .72);
  --glass-strong: rgba(255, 255, 255, .86);
  --glass-soft: rgba(255, 255, 255, .5);
  /* Opaque surfaces, for the operator console. The chat interface is
     glass over an ambient wash; the console is dense configuration over
     a plain background, and a drawer sitting above a dimming overlay has
     to be solid or the page reads through it. `--line` follows
     `--hairline`, which is redefined per theme - custom properties
     resolve at use, so one definition tracks both. */
  --panel: #ffffff;
  --line: var(--hairline);
  --hairline: rgba(16, 20, 30, .09);
  --hairline-soft: rgba(16, 20, 30, .055);

  --ink: #16101d;
  --ink-2: #463d55;
  --muted: #716a80;

  --warn-bg: rgba(255, 184, 60, .16);
  --warn-ink: #8a5a00;
  --ok-ink: #0f7a51;
  --error: #b42318;

  --radius: 16px;
  --radius-sm: 10px;
  --blur: saturate(160%) blur(18px);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow: 0 2px 6px rgba(16, 24, 40, .05), 0 16px 40px rgba(16, 24, 40, .09);
  --glow: 0 0 0 4px var(--accent-soft);
  --sidebar: 278px;
  /* Plus Jakarta Sans rather than Inter. Inter is the house style of
     every developer tool, which makes a product look like a developer
     tool; this has more character in the headings while staying quiet
     enough at 13px for a dense table. The stack behind it matters as
     much - a font that has not loaded yet should not reflow the page. */
  --font: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, Helvetica,
          Arial, sans-serif;
  /* Numbers that line up in a column. Ticket counts, costs and dates sit
     in lists, and proportional digits make them jitter. */
  --font-numeric: "Plus Jakarta Sans", ui-monospace, "SF Mono", monospace;
}

/* The system's preference, unless the person has chosen light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0810;
    --wash-1: color-mix(in oklab, var(--accent) 30%, transparent);
    --wash-2: color-mix(in oklab, #ff5c8a 18%, transparent);
    --glass: rgba(33, 27, 43, .62);
    --glass-strong: rgba(33, 27, 43, .84);
    --glass-soft: rgba(33, 27, 43, .42);
    --panel: #171220;
    --hairline: rgba(255, 255, 255, .09);
    --hairline-soft: rgba(255, 255, 255, .05);

    --ink: #f0ecf5;
    --ink-2: #c7bed6;
    --muted: #948aa6;

    --warn-bg: rgba(255, 184, 60, .14);
    --warn-ink: #f3c876;
    --ok-ink: #5fd0a0;
    --error: #ff9b91;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 2px 6px rgba(0, 0, 0, .35), 0 18px 44px rgba(0, 0, 0, .45);
  }
}

/* An explicit choice, whatever the system says. */
:root[data-theme="dark"] {
  --bg: #0b0810;
  --wash-1: color-mix(in oklab, var(--accent) 30%, transparent);
  --wash-2: color-mix(in oklab, #ff5c8a 18%, transparent);
  --glass: rgba(33, 27, 43, .62);
  --glass-strong: rgba(33, 27, 43, .84);
  --glass-soft: rgba(33, 27, 43, .42);
  --panel: #171220;
  --hairline: rgba(255, 255, 255, .09);
  --hairline-soft: rgba(255, 255, 255, .05);

  --ink: #f0ecf5;
  --ink-2: #c7bed6;
  --muted: #948aa6;

  --warn-bg: rgba(255, 184, 60, .14);
  --warn-ink: #f3c876;
  --ok-ink: #5fd0a0;
  --error: #ff9b91;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 2px 6px rgba(0, 0, 0, .35), 0 18px 44px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

/* Keep the `hidden` attribute working: a `display` rule on an element
   overrides the browser default for `[hidden]`. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  color: var(--ink);
  font: 15px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The ambient wash everything else floats on. Fixed, so scrolling does not
   drag the light with it. */
body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(70rem 40rem at 12% -10%, var(--wash-1), transparent 60%),
    radial-gradient(60rem 36rem at 92% 8%, var(--wash-2), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--muted) 32%, transparent);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklab, var(--muted) 52%, transparent);
  background-clip: content-box;
}

button { font: inherit; cursor: pointer; border-radius: var(--radius-sm); }
button:focus-visible, textarea:focus-visible, select:focus-visible,
input:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.primary {
  background: var(--gradient);
  color: var(--accent-ink);
  border: 1px solid transparent;
  padding: 10px 18px;
  font-weight: 600;
  box-shadow: 0 4px 14px var(--accent-line);
  transition: filter .15s ease, transform .12s ease;
  /* The sign-in control is an anchor, because the browser has to follow a
     redirect and come back with a cookie - a fetch cannot do that. So it
     needs the things a button gets for free, or it renders as underlined
     link text wearing a button's background. */
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  line-height: 1.4;
  min-height: 42px;
}
.primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.primary:active { transform: none; }
.primary:disabled { opacity: .5; cursor: default; filter: none; transform: none; }

.ghost {
  background: var(--glass-soft);
  color: var(--ink);
  border: 1px solid var(--hairline);
  padding: 10px 18px;
  font-weight: 500;
  backdrop-filter: var(--blur);
  transition: background .15s ease, border-color .15s ease;
}
.ghost:hover { background: var(--glass); border-color: var(--accent-line); }

/* Some of these are anchors rather than buttons, because the browser has
   to follow a redirect: the ServiceNow sign-in, "Back to the assistant".
   They are buttons to look at, so they do not carry a link's underline. */
a.primary, a.ghost { text-decoration: none; }

.link {
  background: none; border: none; color: var(--muted);
  text-decoration: underline; padding: 0; font-size: 13px;
}
.link:hover { color: var(--ink); }

.icon {
  background: none; border: none; color: var(--muted);
  font-size: 17px; line-height: 1; padding: 6px 9px; border-radius: 8px;
  transition: background .14s ease, color .14s ease;
}
.icon:hover { background: var(--glass-soft); color: var(--ink); }

.muted { color: var(--muted); }
.error { color: var(--error); }
.small { font-size: 12.5px; }

/* ---------------------------------------------------------------- banners */

.banner {
  flex: none;
  background: var(--warn-bg);
  color: var(--warn-ink);
  padding: 10px 18px;
  font-size: 13px;
  border-bottom: 1px solid var(--hairline);
  backdrop-filter: var(--blur);
}
.banner code {
  font-size: 12px;
  background: rgba(127, 127, 127, .2);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ------------------------------------------------------- signin / blocked */

.centre { flex: 1 1 auto; display: grid; place-items: center; padding: 24px; }

.card {
  background: var(--glass-strong);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: var(--blur);
  padding: 32px;
  width: min(430px, 100%);
}
.card h1 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.02em; }
/* The sign-in card is the first thing anyone sees, and for most people the
   only thing they see before deciding whether this is a real system. It gets
   a little more room than a dialog would, and nothing in it competes with
   the one button. */
.signin-card { text-align: center; padding: 40px 36px 32px; }
.signin-card .mark {
  margin: 0 auto 18px;
  width: 68px; height: 68px; border-radius: 20px; font-size: 24px;
}
.signin-card h1 { font-size: 26px; margin-bottom: 8px; }
.signin-card .muted { margin: 0 0 24px; line-height: 1.5; }

/* Said quietly, under the button, where someone hesitating will look. */
.signin-assurance {
  margin: 16px 0 0;
  font-size: 12.5px; line-height: 1.5;
  color: var(--ink-2);
}

/* A customer's own logo, when they have supplied one. The badge drops its
   gradient and padding so the mark is theirs rather than ours in their
   colour. */
.mark.has-logo {
  background: none;
  box-shadow: none;
  padding: 0;
}
.mark.has-logo img {
  width: 100%; height: 100%;
  border-radius: inherit;
  object-fit: contain;
  display: block;
}
.card input[type="text"], .card input[type="password"], .card select {
  width: 100%; padding: 11px;
  border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  background: var(--glass-soft); color: var(--ink); font: inherit;
}
.card select { margin: 18px 0 10px; }
.card input[type="text"], .card input[type="password"] { margin: 0 0 12px; }
.card .primary { width: 100%; }

/* ------------------------------------------------------------------ shell */

main {
  display: grid;
  grid-template-columns: var(--sidebar) 1fr;
  flex: 1 1 auto;
  min-height: 0;
  transition: grid-template-columns .2s ease;
}
main.collapsed { grid-template-columns: 0 1fr; }

#sidebar {
  background: var(--glass);
  backdrop-filter: var(--blur);
  border-right: 1px solid var(--hairline);
  padding: 16px 13px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-height: 0;
  overflow: hidden;
}
main.collapsed #sidebar {
  padding-left: 0; padding-right: 0; border-right-color: transparent;
}
main.collapsed #sidebar > * { opacity: 0; pointer-events: none; }

.brand { display: flex; gap: 11px; align-items: center; padding: 0 4px; }
.brand-text { min-width: 0; flex: 1; }

.mark {
  width: 38px; height: 38px; border-radius: 12px;
  background: var(--gradient); color: var(--accent-ink);
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px; flex: none;
  letter-spacing: -.02em;
  box-shadow: 0 6px 16px var(--accent-line);
}
.mark.big { width: 60px; height: 60px; border-radius: 18px; font-size: 21px; }

.brand-name {
  font-weight: 650; line-height: 1.25; letter-spacing: -.015em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.brand-sub {
  font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.new-chat {
  display: flex; align-items: center; gap: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-line);
  padding: 10px 13px;
  font-weight: 600;
  text-align: left;
  transition: background .15s ease;
}
.new-chat:hover {
  background: color-mix(in oklab, var(--accent) 17%, transparent);
}
.plus { font-size: 17px; line-height: 1; }

.nav-label {
  font-size: 11px; font-weight: 650; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); padding: 0 6px;
}

#session-list {
  flex: 1; overflow-y: auto; min-height: 0;
  display: flex; flex-direction: column; gap: 1px;
}

.session {
  text-align: left; background: none; border: none; color: var(--ink-2);
  padding: 9px 11px; border-radius: var(--radius-sm); width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px;
}
.session:hover { background: var(--glass-soft); color: var(--ink); }
.session[aria-current="true"] {
  background: var(--accent-soft); color: var(--ink); font-weight: 600;
}
.session .dot { color: var(--warn-ink); }

.sidebar-foot {
  border-top: 1px solid var(--hairline-soft);
  padding-top: 13px;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 13px;
}
.who-row { display: flex; align-items: center; gap: 9px; min-width: 0; }
.who-text { min-width: 0; line-height: 1.3; flex: 1; }
.who-text > div {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--glass-soft); border: 1px solid var(--hairline);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 650; color: var(--muted);
}
.foot-row { display: flex; align-items: center; gap: 8px; }

.pill {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; width: fit-content;
}
.pill.warn { background: var(--warn-bg); color: var(--warn-ink); }

/* ------------------------------------------------------------------- chat */

#chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

#chat-head {
  display: flex; align-items: center; gap: 6px;
  padding: 13px 22px;
  border-bottom: 1px solid var(--hairline);
  background: var(--glass);
  backdrop-filter: var(--blur);
  font-weight: 650;
  letter-spacing: -.01em;
}
#chat-title {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.head-actions { display: flex; align-items: center; gap: 2px; flex: none; }

#messages {
  flex: 1; overflow-y: auto;
  padding: 28px 26px 12px;
  display: flex; flex-direction: column; gap: 20px;
  scroll-behavior: smooth;
}

.msg {
  display: flex; gap: 11px; align-items: flex-start;
  max-width: min(760px, 92%);
  animation: rise .2s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.bot-avatar {
  width: 30px; height: 30px; border-radius: 10px; flex: none;
  background: var(--gradient); color: var(--accent-ink);
  display: grid; place-items: center;
  box-shadow: 0 4px 12px var(--accent-line);
  margin-top: 2px;
}
.bot-avatar svg { width: 16px; height: 16px; }

.msg-body { min-width: 0; }

.msg .bubble {
  padding: 13px 16px;
  border-radius: var(--radius);
  overflow-wrap: anywhere;
}
.msg.user { align-self: flex-end; }
.msg.user .bubble {
  background: var(--gradient); color: var(--accent-ink);
  border-bottom-right-radius: 5px;
  box-shadow: 0 8px 22px var(--accent-line);
}
.msg.assistant .bubble {
  background: var(--glass-strong);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
  backdrop-filter: var(--blur);
  border-top-left-radius: 5px;
}
.msg.system .bubble {
  background: var(--warn-bg); color: var(--warn-ink);
  border: 1px solid transparent; font-size: 14px;
}

.bubble p { margin: 0 0 10px; }
.bubble p:last-child { margin-bottom: 0; }
.bubble ul { margin: 0 0 10px; padding-left: 20px; }
.bubble ul:last-child { margin-bottom: 0; }
.bubble li { margin: 4px 0; }
.bubble strong { font-weight: 650; }
.bubble code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  background: var(--glass-soft);
  border: 1px solid var(--hairline-soft);
  border-radius: 5px;
  padding: 1px 5px;
}
.msg.user .bubble code {
  background: rgba(255, 255, 255, .2);
  border-color: transparent; color: inherit;
}

.meta {
  display: flex; align-items: center; gap: 9px;
  margin-top: 7px; font-size: 12px; color: var(--muted);
}
.msg.user .meta { justify-content: flex-end; }
.copy {
  background: none; border: none; color: var(--muted);
  padding: 0; font-size: 12px; text-decoration: underline;
  opacity: 0; transition: opacity .12s ease;
}
.msg:hover .copy, .copy:focus-visible { opacity: 1; }

.tools { display: flex; gap: 6px; flex-wrap: wrap; }
.tool {
  background: var(--glass-soft); border: 1px solid var(--hairline-soft);
  border-radius: 999px; padding: 2px 10px; font-size: 11.5px;
  color: var(--muted);
}

.status {
  display: flex; align-items: center; gap: 10px;
  color: var(--muted); font-size: 13.5px;
  padding: 3px 0;
}
.spinner {
  width: 14px; height: 14px; flex: none;
  border: 2px solid var(--hairline);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- welcome */

.welcome {
  flex: 0 0 auto;
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 24px 10px;
}

/* -------------------------------------------------------- the empty state

   Not "the conversation with nothing in it" - a different layout. The
   greeting is at the top, the box is directly under it because the box is
   what someone came to use, and their tickets are below that.

   The column itself scrolls here, rather than the message list, because
   there is no message list yet and the content can easily be taller than
   the window. The previous version had two `flex: 1` siblings - an empty
   message list and the welcome block - so the empty list claimed half the
   height and the overflow had nowhere to go, which pushed the composer off
   the bottom of the screen with nothing to scroll.                        */

#chat.empty { overflow-y: auto; }
#chat.empty #chat-head { position: sticky; top: 0; z-index: 3; }
#chat.empty #messages { display: none; }
#chat.empty .welcome { padding-top: clamp(16px, 5vh, 56px); }

/* The composer stops being a bar pinned to the bottom and becomes part of
   the page, directly under the greeting - and on this screen it is the
   thing somebody came for, so it is allowed to look like it: taller,
   rounder, and lifted off the wash rather than ruled off from it. */
#chat.empty #composer {
  border-top: none;
  background: none;
  backdrop-filter: none;
  width: min(720px, 100%);
  margin: 0 auto;
}
#chat.empty .composer-box {
  margin: 4px 22px 0;
  padding: 11px 11px 11px 19px;
  border-radius: 20px;
  box-shadow: var(--shadow);
}
#chat.empty #input { font-size: 15.5px; padding: 9px 0; }
/* Small print stays small print: centred, quiet, and out of the path
   between the greeting and the box. */
#chat.empty .disclaimer {
  text-align: center; padding: 12px 34px 0;
  max-width: 58ch; margin: 0 auto; font-size: 11.5px;
}

.landing {
  display: flex; flex-direction: column; align-items: center;
  width: min(720px, 100%);
  margin: 0 auto;
  padding: 6px 22px 36px;
}

/* A line of type instead of another box. The prompts below are a second
   kind of thing - things to say rather than things you have - and
   without a label they read as four more cards in the same stack. */
.landing-label {
  width: 100%; margin: 26px 0 -2px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}
/* Solid ink, not gradient-clipped text.

   The greeting used to be painted with the same gradient as the stripe
   on every panel below it, so the first thing on the page competed with
   the six things under it and the eye had nowhere to land. One accent
   per screen, and on this screen it belongs to the box. */
.welcome h2 {
  margin: 0 0 8px;
  font-size: clamp(27px, 3.4vw, 34px);
  letter-spacing: -.035em; font-weight: 700; line-height: 1.12;
  color: var(--ink);
}
.welcome p {
  margin: 0; max-width: 46ch;
  font-size: 15px; line-height: 1.55; color: var(--ink-2);
}

/* ----------------------------------------------------------------- panels

   The landing page's own content: this person's position, before they have
   typed anything. A stat panel is mostly its number, because the number is
   the answer to the question they came here with; an urgent ticket spans
   the row, because it is the one thing on this screen that might need them
   to stop and read.                                                       */

/* Flex rather than grid, because the number of panels is whatever this
   person happens to have. A grid leaves a single stat panel sitting in the
   first of three columns looking abandoned; flex lets it grow to the width
   of the rest, which reads as deliberate. */
.panels {
  display: flex; flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
  width: 100%;
  text-align: left;
}

.panel {
  flex: 1 1 170px;
  position: relative;
  overflow: hidden;
  background: var(--glass);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 17px 19px;
  backdrop-filter: var(--blur);
  text-align: left;
  transition: border-color .14s ease, background .14s ease;
}
/* The accent stripe along the top edge is gone.

   It was on every panel, so it distinguished nothing - and a row of
   boxes each wearing a gradient bar is the house style of a 2019
   dashboard. What makes a panel readable is the number inside it, which
   the stripe was competing with. The two panels that mean something
   different say so in their own colour, below. */
.panel:hover {
  border-color: var(--accent-line);
  background: var(--glass-strong);
}

.panel-value {
  font-size: 30px; font-weight: 700; line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.panel-label {
  margin-top: 2px;
  font-weight: 600; font-size: 13.5px; color: var(--ink);
}
.panel-sub { margin-top: 3px; font-size: 12px; color: var(--muted); }

/* Something is waiting on this person, as opposed to merely being
   theirs. Said in the number's own colour rather than by a bar above it:
   the number is what they read. */
.panel-action .panel-value { color: var(--warn-ink); }

/* Critical and high. Takes the whole row so it is read, not counted, and
   carries a tint rather than a stripe - a panel that needs attention
   should look different all over, not along one edge. */
.panel-wide { flex: 1 1 100%; }
.panel-urgent {
  background: color-mix(in oklab, var(--error) 7%, var(--glass));
  border-color: color-mix(in oklab, var(--error) 22%, transparent);
}
.panel-urgent:hover {
  background: color-mix(in oklab, var(--error) 10%, var(--glass));
  border-color: color-mix(in oklab, var(--error) 32%, transparent);
}
.panel-head {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 5px;
}
.panel-flag {
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--error);
  background: color-mix(in oklab, var(--error) 13%, transparent);
  border-radius: 999px; padding: 3px 9px;
  white-space: nowrap;
}
.panel-number {
  font-size: 12px; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.panel-line {
  font-weight: 600; font-size: 14.5px; color: var(--ink);
  line-height: 1.35;
}

.suggestions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 10px;
  margin-top: 12px;
  width: 100%;
  text-align: left;
}
/* Lighter than a panel on purpose. These are things to say, not things
   this person has - and four cards with the same border, shadow and
   hover-lift as the tickets above them made the whole screen one
   undifferentiated grid of boxes. */
.suggestion {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--glass-soft);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius); padding: 13px 15px;
  text-align: left;
  transition: border-color .14s ease, background .14s ease;
}
.suggestion:hover {
  border-color: var(--accent-line);
  background: var(--glass);
}
.suggestion .line-icon {
  width: 19px; height: 19px; flex: none;
  margin-top: 1px; color: var(--accent);
}
.suggestion-title { font-weight: 600; color: var(--ink); font-size: 14.5px; }
.suggestion-sub { font-size: 12.5px; color: var(--muted); }

/* ------------------------------------------------------------------ cards */

.cards-row { max-width: min(760px, 92%); }
.bot-avatar-spacer { width: 30px; flex: none; }
.cards { display: flex; flex-direction: column; gap: 9px; }

.card-item {
  background: var(--glass-strong);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  backdrop-filter: var(--blur);
  padding: 14px 16px;
  transition: border-color .14s ease, box-shadow .14s ease,
              transform .14s ease;
}
.card-item:hover {
  border-color: var(--accent-line); box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.card-head-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
}
.card-titles { min-width: 0; }
.card-title { font-weight: 650; letter-spacing: -.01em; overflow-wrap: anywhere; }
.card-item.ticket .card-title {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px; color: var(--accent);
}
.card-subtitle { color: var(--ink-2); font-size: 14px; margin-top: 1px; }

.card-badge {
  flex: none; align-self: flex-start;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-line);
  border-radius: 999px; padding: 2px 10px;
  font-size: 12px; font-weight: 650; white-space: nowrap;
}

.card-fields {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 3px 12px; margin: 10px 0 0; font-size: 13px;
}
.card-fields dt { color: var(--muted); }
.card-fields dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }

.card-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.primary.small, .ghost.small { padding: 6px 13px; font-size: 13px; }

/* ----------------------------------------------------------- confirmation */

.confirm {
  margin: 0 26px 14px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  background: var(--glass-strong);
  backdrop-filter: var(--blur);
  box-shadow: var(--shadow);
  padding: 17px 19px;
  animation: rise .2s cubic-bezier(.2, .7, .3, 1) both;
}
.confirm-head {
  display: flex; align-items: center; gap: 10px;
  font-weight: 650; margin-bottom: 12px;
}
.confirm-icon {
  width: 21px; height: 21px; border-radius: 50%; flex: none;
  background: var(--gradient); color: var(--accent-ink);
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}

.draft {
  margin: 0 0 15px;
  display: grid;
  grid-template-columns: minmax(84px, max-content) 1fr;
  gap: 1px;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--hairline-soft);
}
.draft dt {
  background: var(--glass-soft);
  padding: 9px 12px;
  font-size: 12.5px; font-weight: 600; color: var(--muted);
}
.draft dd {
  background: var(--glass);
  padding: 9px 13px; margin: 0; overflow-wrap: anywhere;
}
.draft dd.is-note { color: var(--warn-ink); font-size: 13.5px; }

.confirm-actions { display: flex; gap: 9px; align-items: center; }
.confirm-hint { margin-left: auto; font-size: 12px; }

/* References */
button.ref, .ref {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em; font-weight: 650;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-line);
  border-radius: 6px; padding: 0 6px;
}
button.ref { cursor: pointer; transition: background .12s ease; }
button.ref:hover {
  background: color-mix(in oklab, var(--accent) 22%, transparent);
}
.msg.user button.ref, .msg.user .ref {
  background: rgba(255, 255, 255, .22); color: inherit;
  border-color: transparent; cursor: default;
}

/* --------------------------------------------------------------- composer */

#composer {
  background: var(--glass);
  backdrop-filter: var(--blur);
  border-top: 1px solid var(--hairline);
}

.composer-box {
  display: flex; align-items: flex-end; gap: 8px;
  margin: 15px 26px 0;
  padding: 7px 7px 7px 15px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--glass-strong);
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.composer-box:focus-within {
  border-color: var(--accent);
  box-shadow: var(--glow);
}

#input {
  flex: 1; resize: none; max-height: 170px;
  padding: 8px 0;
  border: none; background: none; color: var(--ink);
  font: inherit;
}
#input:focus { outline: none; }
#input::placeholder { color: var(--muted); }

.send {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  background: var(--gradient); color: var(--accent-ink);
  /* Round. A rounded square inside a rounded box repeated the same
     shape at two sizes and read as a button stuck to a panel; a circle
     is plainly the control rather than part of the container. */
  border: none; border-radius: 999px;
  box-shadow: 0 4px 14px var(--accent-line);
  transition: filter .15s ease, transform .12s ease;
}
.send:hover { filter: brightness(1.08); transform: translateY(-1px); }
.send:disabled {
  opacity: .4; cursor: default; filter: none; transform: none;
  box-shadow: none;
}

.disclaimer { margin: 0; padding: 10px 26px 14px; font-size: 12px; }

/* ------------------------------------------------------------------ small */

@media (max-width: 820px) {
  main, main.collapsed { grid-template-columns: 1fr; }
  #sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--sidebar);
    transform: translateX(-100%); transition: transform .2s ease;
    z-index: 5;
  }
  #sidebar.open { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.45); }
  main.collapsed #sidebar > * { opacity: 1; pointer-events: auto; }
  main.collapsed #sidebar { padding: 16px 13px; }
  #messages { padding: 20px 16px 8px; }
  .composer-box { margin: 12px 16px 0; }
  .confirm { margin: 0 16px 12px; }
  .disclaimer { padding: 8px 16px 12px; }
  .msg, .cards-row { max-width: 96%; }
  .suggestions { grid-template-columns: 1fr; }
  .welcome h2 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  #messages { scroll-behavior: auto; }
}
/* =========================================================================
   Operator console
   =========================================================================
   Shares the tokens above so the two surfaces look like one product. Denser
   than the chat interface on purpose: this is a working screen for someone
   who runs the service, not a conversation.
   ========================================================================= */

body.admin {
  display: block;
  overflow: auto;
  background: var(--bg);
}

body.admin #top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 3;
}

.top-right { display: flex; align-items: center; gap: 10px; }

.admin-body {
  display: block;
  max-width: 1040px;
  margin: 0 auto;
  padding: 22px 24px 60px;
}

.card.wide { width: auto; margin-bottom: 20px; padding: 20px 22px; }

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.card-head h2 { margin: 0; font-size: 16px; }
.card-head h3 { margin: 0; font-size: 14px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px 18px;
}

.field-label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 2px;
}
.field-value { font-size: 14px; font-weight: 550; }

.warn-text { color: var(--warn-ink); }
.ok-text { color: #1f7a4d; }
.small { font-size: 12px; }

.error-banner {
  background: #fdecea;
  color: var(--error);
  border-bottom: 1px solid var(--line);
}
@media (prefers-color-scheme: dark) {
  .error-banner { background: #3a1d1a; color: #ff9b91; }
}

/* ------------------------------------------------------------ kill switch */

.kill {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.danger { border-color: var(--error); color: var(--error); }

/* ---------------------------------------------------------------- tenants */

.tenant-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.tenant-row:last-child { border-bottom: none; }

.tenant-main { min-width: 0; }
.tenant-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-weight: 600;
}
.tenant-meta, .health { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.tenant-actions { display: flex; gap: 8px; flex: none; }
.ghost.small { padding: 5px 11px; font-size: 13px; }

body.admin .pill {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 600;
}
body.admin .pill.warn {
  background: var(--warn-bg);
  color: var(--warn-ink);
  border-color: transparent;
}

/* ----------------------------------------------------------------- drawer */

.drawer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  display: flex;
  justify-content: flex-end;
  z-index: 10;
}

.drawer-panel {
  background: var(--panel);
  width: min(560px, 100%);
  height: 100%;
  overflow-y: auto;
  padding: 20px 24px 40px;
  border-left: 1px solid var(--line);
}

.drawer-section {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.drawer-section h3 { margin: 0 0 10px; font-size: 14px; }

.input-row { display: block; margin-bottom: 12px; }
.input-row input, .input-row select {
  width: 100%;
  margin-top: 3px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
}
.input-row input:focus, .input-row select:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.stack > * + * { margin-top: 10px; }

.drawer-actions {
  display: flex;
  gap: 10px;
  padding: 18px 0 12px;
}

@media (max-width: 720px) {
  .tenant-row { flex-direction: column; }
  .drawer-panel { width: 100%; }
}

/* =========================================================================
   Refinements
   ========================================================================= */

/* The confirmation draft as a form. A monospace block reads like a log and
   gets skimmed; this is the moment someone decides whether a real thing
   happens, so each value gets a label and room to breathe. */
.draft {
  margin: 0 0 15px;
  display: grid;
  grid-template-columns: minmax(84px, max-content) 1fr;
  gap: 1px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--line-soft);
}
.draft dt {
  background: var(--panel-2);
  padding: 9px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.draft dd {
  background: var(--panel);
  padding: 9px 13px;
  margin: 0;
  overflow-wrap: anywhere;
}
.draft dd.is-note { color: var(--warn-ink); font-size: 13.5px; }

/* The two fields Izzy chose for them - category and subcategory. Marked
   because they are the only guesses in the draft: everything else is
   either what the person said or what their instance will do. A tinted
   row and a rule down the side, not a colour on the text, so it still
   reads as part of the same list. */
.draft dt.is-ours, .draft dd.is-ours {
  background: var(--accent-soft);
}
.draft dt.is-ours {
  color: var(--accent); font-weight: 650;
  box-shadow: inset 2px 0 0 var(--accent);
}
.draft dd.is-ours.is-note { background: var(--accent-soft); }

.confirm-hint { margin-left: auto; align-self: center; font-size: 12px; }

/* A ticket number is a thing you can ask about, so it behaves like one. */
button.ref {
  cursor: pointer;
  border: 1px solid var(--accent-line);
  font: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em; font-weight: 650;
  background: var(--accent-soft); color: var(--accent);
  border-radius: 6px; padding: 0 6px;
  transition: background .12s ease;
}
button.ref:hover { background: color-mix(in oklab, var(--accent) 22%, transparent); }
.msg.user button.ref {
  background: rgba(255, 255, 255, .22); color: inherit;
  border-color: transparent; cursor: default;
}

/* Jump back down after scrolling up mid-reply. */
.jump {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 14px; z-index: 2;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 15px;
  font-size: 13px; font-weight: 550; color: var(--ink);
  box-shadow: var(--shadow);
}
.chat-body { position: relative; flex: 1; min-height: 0; display: flex; }

/* -------------------------------------------------------------- cards ---
   Records the tools returned, laid out so they can be scanned and acted on.
   A list of three monitors with prices is a table, and prose is a poor way
   to read one. */

.cards-row { max-width: min(760px, 92%); }
.bot-avatar-spacer { width: 30px; flex: none; }

.cards { display: flex; flex-direction: column; gap: 9px; }

.card-item {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 13px 15px;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.card-item:hover { border-color: var(--accent-line); box-shadow: var(--shadow); }

.card-head-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
}
.card-titles { min-width: 0; }
.card-title {
  font-weight: 650; letter-spacing: -.01em; overflow-wrap: anywhere;
}
.card-item.ticket .card-title {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px; color: var(--accent);
}
.card-subtitle { color: var(--ink-2); font-size: 14px; margin-top: 1px; }

.card-badge {
  flex: none; align-self: flex-start;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-line);
  border-radius: 999px; padding: 2px 10px;
  font-size: 12px; font-weight: 650; white-space: nowrap;
}

.card-fields {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 3px 12px; margin: 10px 0 0; font-size: 13px;
}
.card-fields dt { color: var(--muted); }
.card-fields dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }

.card-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.primary.small, .ghost.small { padding: 6px 13px; font-size: 13px; }

/* ------------------------------------------------------- the next page --

   Not a record, so it does not look like one: no border, no hover lift,
   just the count and the button. It sits at the end of a row of tickets
   and should read as the end of the row rather than one more item in
   it.                                                                 */

.card-item.more {
  background: none; border: 1px dashed var(--line); box-shadow: none;
  display: flex; flex-direction: column; justify-content: center;
}
.card-item.more:hover { border-color: var(--accent-line); box-shadow: none; }
.card-item.more .card-title { font-size: 14px; color: var(--ink-2); }

/* ------------------------------------------------------- one form field --

   A catalogue request used to arrive as a numbered list in prose and had
   to be answered in one message, in order. This is the same question with
   its box attached, so somebody can see they are filling in a field and
   which one of how many.                                                */

.card-item.field {
  border-color: var(--accent-line);
  background: linear-gradient(var(--accent-soft), var(--accent-soft))
              var(--panel);
}
.card-item.field .card-title { font-size: 15px; }
.card-item.field .card-meta { font-size: 12.5px; }

.card-input { display: flex; gap: 8px; margin-top: 11px; align-items: flex-end; }
.card-input input, .card-input textarea {
  flex: 1; min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--ink);
  font: inherit; font-size: 14px; resize: vertical;
}
.card-input input:focus, .card-input textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.card-input button { flex: none; }
.card-input input:disabled, .card-input textarea:disabled { opacity: .6; }

/* A plain link inside a card. Without this it renders in the browser's
   default blue, which on a dark panel is about as readable as nothing -
   and the one link it was written for tells somebody where to go and
   get the key the page is asking them for.

   :not(.primary):not(.ghost) because a link is sometimes a button: the
   sign-in action is an <a class="primary"> so the browser can follow a
   redirect, and the first version of this rule painted it accent-on-
   accent and underlined it. The button was still there and still
   worked, and was very nearly invisible. */
.card a:not(.primary):not(.ghost),
.tile a:not(.primary):not(.ghost) {
  color: var(--accent); text-decoration: underline;
}
.card a:not(.primary):not(.ghost):hover,
.tile a:not(.primary):not(.ghost):hover { text-decoration: none; }

/* A switch nobody can use yet says so by looking unusable. */
.row-actions button:disabled {
  opacity: .5; cursor: not-allowed;
}

/* ------------------------------------------- console: address and storage */

.served-row { display: flex; align-items: center; gap: 9px; padding: 3px 0; }
.served-host {
  font-weight: 600; font-size: 14px;
  color: var(--accent); text-decoration: none;
}
.served-host:hover { text-decoration: underline; }

.tag-soft {
  font-size: 11.5px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  background: var(--glass-soft); border: 1px solid var(--hairline);
  color: var(--ink-2); white-space: nowrap;
}

.store-row { padding: 9px 0; border-bottom: 1px solid var(--hairline-soft); }
.store-row:last-child { border-bottom: none; }
.store-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 2px;
}
.store-what { font-weight: 600; font-size: 13.5px; }
/* Not stored is the reassuring answer, not the missing one - it should not
   read as a gap. */
.store-none .store-what { font-weight: 500; color: var(--ink-2); }

/* ------------------------------------------------- interface refinements */

/* One line of facts instead of three labelled rows. A ticket was 199px
   tall for four pieces of information; three of them filled a screen. */
.card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin-top: 6px;
  font-size: 12.5px; color: var(--muted);
}
.card-dot { opacity: .45; }

/* A short conversation belongs next to the box someone is typing in, not
   stranded at the top of an empty column. */
#messages > .msg:first-child { margin-top: auto; }

/* Signing out was an underlined link in the corner, which reads as an
   afterthought on the one control people look for deliberately. */
.link {
  background: none; border: 1px solid transparent;
  color: var(--muted); font: inherit; font-size: 12.5px;
  padding: 5px 9px; border-radius: var(--radius-sm);
  text-decoration: none; cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.link:hover { background: var(--glass-soft); color: var(--ink); }

/* Nothing in the interface showed focus, which makes a keyboard feel
   broken and fails anyone not using a mouse. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* An empty conversation list said "Recent" over a void. */
.sessions-empty {
  padding: 10px 2px; font-size: 12.5px; color: var(--muted); line-height: 1.5;
}

/* ----------------------------------------- renaming, and opening a ticket */

.session-row { display: flex; align-items: center; gap: 2px; }
.session-row .session { flex: 1; min-width: 0; }
.session-rename {
  flex: none; opacity: 0;
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 12px;
  padding: 4px 6px; border-radius: var(--radius-sm);
  transition: opacity .14s ease, background .14s ease;
}
.session-row:hover .session-rename,
.session-rename:focus-visible { opacity: 1; }
.session-rename:hover { background: var(--glass-soft); color: var(--ink); }

.session-name {
  flex: 1; min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--accent-line); border-radius: var(--radius-sm);
  background: var(--glass-soft); color: var(--ink);
  font: inherit; font-size: 13px;
}

/* A ticket opened where it already is, rather than by asking for it. */
.card-detail {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 7px;
}
.detail-row { display: flex; gap: 10px; align-items: baseline; font-size: 13px; }
.detail-label {
  flex: none; width: 104px;
  color: var(--muted); font-size: 12px;
}
.detail-value { flex: 1; min-width: 0; color: var(--ink); line-height: 1.5; }
.detail-heading {
  margin-top: 6px; font-size: 12px; font-weight: 650; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
}
.detail-comment {
  background: var(--glass-soft);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-sm);
  padding: 9px 11px; font-size: 13px; line-height: 1.5;
}
.detail-comment-who {
  font-size: 11.5px; color: var(--muted); margin-bottom: 3px;
}

.record-link {
  align-self: flex-start; margin-top: 4px;
  font-size: 12.5px; font-weight: 600;
  color: var(--accent); text-decoration: none;
}
.record-link:hover { text-decoration: underline; }

/* ------------------------------------------------ console: named admins */

.admin-rows { display: flex; flex-direction: column; gap: 7px; }
.admin-row { display: flex; gap: 6px; align-items: center; }
.admin-row input {
  flex: 1; min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--glass-soft); color: var(--ink); font: inherit;
  font-size: 13px;
}
.admin-row .admin-name { flex: 1.1; }
.admin-row .admin-email { flex: 1.3; }

/* ========================================================= manage page ===

   A customer's own administration. Tabs rather than one long scroll: the
   sections answer different questions and get visited for different
   reasons, and a settings page that makes someone scroll past their
   usage to change a colour is a page people stop opening.            */

.manage .tabs {
  display: flex; gap: 2px; flex-wrap: wrap;
  padding: 0 24px;
  border-bottom: 1px solid var(--hairline);
  background: var(--glass);
  backdrop-filter: var(--blur);
  position: sticky; top: 0; z-index: 5;
}
.manage .tab {
  background: none; border: none; cursor: pointer;
  padding: 13px 16px 11px;
  font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  transition: color .14s ease, border-color .14s ease;
}
.manage .tab:hover { color: var(--ink); }
.manage .tab.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.panel-page {
  display: flex; flex-direction: column; gap: 16px;
}

.lede-sm {
  margin: 0 0 16px; color: var(--ink-2); font-size: 14px; line-height: 1.55;
  max-width: 72ch;
}

/* One decision per row, with its cost next to it rather than in a
   footnote - choosing a model is a spending decision as much as a
   quality one. */
.choice-list { display: flex; flex-direction: column; gap: 8px; }
.choice {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 15px;
  border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.choice:hover { border-color: var(--accent-line); }
.choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.choice input { margin-top: 3px; accent-color: var(--accent); }
.choice-title { font-weight: 650; font-size: 14px; }
.choice-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

.field-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom: 14px;
}
.input-row textarea {
  width: 100%; margin-top: 3px;
  padding: 9px 11px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--glass-soft); color: var(--ink);
  font: inherit; font-size: 13.5px; resize: vertical;
}
.colour-row { display: flex; gap: 8px; align-items: center; margin-top: 3px; }
.colour-row input[type="color"] {
  width: 42px; height: 36px; padding: 2px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--glass-soft); cursor: pointer;
}
.colour-row input[type="text"] { flex: 1; margin-top: 0; }

/* Changing a colour without seeing it is guesswork, and the thing being
   changed is what their people look at all day. */
.brand-preview {
  display: flex; gap: 14px; align-items: center;
  padding: 18px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--glass-soft);
}
.preview-name { font-weight: 700; font-size: 17px; letter-spacing: -.02em; }

.row-actions {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px;
}

.tile {
  position: relative;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 17px;
  display: flex; flex-direction: column; gap: 7px; align-items: flex-start;
}
.tile-head { font-weight: 650; font-size: 14.5px; }
.tile p { margin: 0; }
/* The one that is real should not look like the ones that are not. */
.tile.connected { border-color: var(--accent-line); background: var(--accent-soft); }

.ok-banner {
  background: color-mix(in oklab, var(--ok-ink) 14%, transparent);
  color: var(--ok-ink);
  border: 1px solid color-mix(in oklab, var(--ok-ink) 30%, transparent);
}

/* A labelled row of names on the customer's own page. The label matters:
   three unlabelled rows of chips is a wall, and the question somebody
   has is which of these are categories and which are services. */
.chip-group { margin-top: 12px; }
.chip-group .field-label { margin-bottom: 5px; }
.chip-group .pill-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* The set-up steps under the bring-your-own-model form. Numbered,
   because they are in order and the order matters - a key is no use
   before there is a server to use it against. */
.steps { margin-top: 14px; }
.steps ol {
  margin: 6px 0 0; padding-left: 20px;
  color: var(--ink-2); font-size: 13px; line-height: 1.6;
}
.steps li { margin-bottom: 5px; }
.steps code, .steps li { overflow-wrap: anywhere; }

.ok-text { color: var(--ok-ink); }
.warn-text { color: var(--warn-ink); }