/* =========================================================================
   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);
  --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;
  --font: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
          sans-serif;
}

/* 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);
    --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);
  --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); }

.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 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"] { 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. */
#chat.empty #composer {
  border-top: none;
  background: none;
  backdrop-filter: none;
  width: min(680px, 100%);
  margin: 0 auto;
}
#chat.empty .composer-box { margin-left: 22px; margin-right: 22px; }

.landing {
  display: flex; flex-direction: column; align-items: center;
  width: min(680px, 100%);
  margin: 0 auto;
  padding: 6px 22px 32px;
}
.welcome .mark { margin-bottom: 18px; }
.welcome h2 {
  margin: 0 0 6px; font-size: 29px; letter-spacing: -.03em; font-weight: 700;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.welcome p { margin: 0; max-width: 48ch; }

/* ----------------------------------------------------------------- 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: 12px;
  margin-top: 22px;
  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: 16px 18px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: var(--blur);
  text-align: left;
  transition: transform .14s ease, border-color .14s ease,
              box-shadow .14s ease;
}
/* A thin bar of the accent along the top edge, which is what stops a panel
   reading as a plain box. */
.panel::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--gradient);
  opacity: .9;
}
.panel:hover {
  transform: translateY(-2px);
  border-color: var(--accent-line);
  box-shadow: var(--shadow);
}

.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. */
.panel-action::before {
  background: linear-gradient(90deg, #f0a32a, #ef6a4b);
}
.panel-action .panel-value { color: var(--warn-ink); }

/* Critical and high. Takes the whole row so it is read, not counted. */
.panel-wide { flex: 1 1 100%; }
.panel-urgent::before {
  background: linear-gradient(90deg, #e5484d, #ef6a4b);
}
.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(210px, 1fr));
  gap: 11px;
  margin-top: 12px;
  width: 100%;
  text-align: left;
}
.suggestion {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--glass);
  border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 13px 15px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: var(--blur);
  text-align: left;
  transition: transform .14s ease, border-color .14s ease,
              box-shadow .14s ease;
}
.suggestion:hover {
  transform: translateY(-2px);
  border-color: var(--accent-line);
  box-shadow: var(--shadow);
}
.suggestion .emoji { font-size: 17px; line-height: 1.3; flex: none; }
.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);
  border: none; border-radius: var(--radius-sm);
  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; }

.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; }