/* ============================================================
   JACQUARD — shared component CSS.
   Every rule reads tokens; the same classnames render in all
   three directions, taking the personality of the active --dir.
   Where a direction needs a structural override, we use the
   [data-dir="..."] attribute selector.
   ============================================================ */

* { box-sizing: border-box; }

/* ---- a11y utilities ---- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--cream);
  color: #15020c;
  padding: 12px 20px;
  font-family: var(--f-sans);
  font-weight: 600;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.u-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* page scroll lock while the mobile nav overlay is open */
.u-scroll-lock, .u-scroll-lock body { overflow: hidden; }

/* full-bleed backdrops use 100vw, which includes the scrollbar on some
   platforms; clip instead of letting the page scroll sideways */
html { overflow-x: clip; }

.dir-root {
  /* Body defaults to the Text tier (Plex Sans). Brand-voice elements
     opt back into var(--f-sans) (Outfit) explicitly: buttons, composer,
     sidebar nav, brand chrome. Display headlines use var(--f-display). */
  font-family: var(--f-text);
  font-size: var(--t-body);
  color: var(--ink);
  background: var(--bg);
  height: 100%;
  overflow: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- TYPOGRAPHY ------------------------------------------------ */
.jq-display, .jq-h1, .jq-h2, .jq-h3 {
  font-family: var(--f-display);
  font-weight: 500;
  margin: 0;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  text-wrap: balance;
}
.jq-display { font-size: var(--t-display); line-height: 0.98; }
.jq-h1      { font-size: var(--t-h1);      line-height: 1.05; }
.jq-h2      { font-size: var(--t-h2);      line-height: 1.15; }
.jq-h3      { font-size: var(--t-h3);      line-height: 1.25; letter-spacing: -0.01em; }

.jq-body { font-size: var(--t-body); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.jq-small { font-size: var(--t-small); color: var(--ink-3); }
.jq-mono {
  font-family: var(--f-data);
  font-size: var(--t-mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.jq-eyebrow {
  font-family: var(--f-label);
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.jq-tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

/* Per brand book: headlines end with a full stop. The . is rendered
 * as part of the source content; this helper just nudges it tighter
 * to the word, the way real editorial typesetting does. */
.jq-stop::after { content: "."; color: var(--accent); margin-left: -0.04em; }

/* ============================================================
   GENERATED-TEXT HIGHLIGHT PILLS
   The signature Jacquard pattern — inline pills marking which
   words are AI-generated / personalised. Renders inline inside
   running text, supports three colour roles, and can be soft
   (transparent fill) or hard (solid fill, white text).
   ============================================================ */
.gen {
  display: inline;
  padding: 0.06em 0.4em;
  margin: 0 0.04em;
  border-radius: var(--radius-pill);
  background: var(--gen-pink);
  color: #15020c;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-style: normal;
}
.gen-coral  { background: var(--gen-coral);  color: #15020c; }
.gen-yellow { background: var(--gen-yellow); color: #15020c; }
.gen-cream  { background: var(--bg-cream);   color: #15020c; }

/* Caret bracket for generative live-edit moments */
.gen-bracket {
  border: 1px dashed var(--gen-pink);
  padding: 0.02em 0.32em;
  border-radius: var(--radius-pill);
  color: var(--gen-pink);
  background: transparent;
}

/* ---- BUTTONS — pill / rounded -------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-button);
  font: inherit;
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease);
  white-space: nowrap;
}
.btn:hover { background: var(--bg-elev-3); }

.btn-primary {
  background: var(--primary);
  color: var(--primary-ink);
  border-color: var(--primary);
  font-weight: 600;
  border-radius: var(--radius-pill);
  padding: 11px 22px;
  letter-spacing: 0.01em;
}
.btn-primary:hover { background: var(--primary); border-color: var(--primary); filter: brightness(1.08); }

.btn-ghost { border-color: transparent; color: var(--ink-2); padding: 8px 12px; }
.btn-ghost:hover { background: var(--bg-elev-3); color: var(--ink); }

.btn-icon {
  width: 36px; height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  color: var(--ink-3);
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  font-family: var(--f-sans);
  cursor: pointer;
}
.btn-icon:hover { color: var(--ink); background: var(--bg-elev-3); }

/* ---- TAGS / PILLS --------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-family: var(--f-label);
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  background: transparent;
  white-space: nowrap;
}
.tag-accent  { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.tag-success { border-color: var(--success); color: var(--success); background: var(--success-soft); }
.tag-warn    { border-color: var(--warn); color: var(--warn); background: var(--warn-soft); }
.tag-danger  { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
.tag-primary { border-color: var(--primary); color: var(--primary-ink); background: var(--primary); }

/* ---- CARDS — square -------------------------------------------- */
.card {
  background: var(--bg-elev-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.card-pad { padding: var(--pad-card); }

/* ---- LIVE DOT -------------------------------------------------- */
.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  display: inline-block;
  background: var(--success);
  vertical-align: middle;
}
.dot-live {
  box-shadow: 0 0 0 0 var(--success);
  animation: jq-pulse 1.8s infinite;
}
@keyframes jq-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklch, var(--success) 60%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---- INPUT / TEXTAREA ----------------------------------------- */
.field {
  background: var(--bg-input);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  font: inherit;
  font-size: var(--t-body);
  color: var(--ink);
  width: 100%;
  outline: none;
  transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease);
}
.field:focus { border-color: var(--primary); }
.field::placeholder { color: var(--ink-mute); }

/* ============================================================
   SIDEBAR VARIANT — opt-in via data-sidebar.
   Works on light theme; in dark mode the sidebar is already
   maroon so the override is a no-op.
   ============================================================ */

/* Dark sidebar — maroon-600. Carries the brand site's chrome
   weight without dropping all the way to rich black. Opt in by
   adding data-surface="sidebar-dark" to the .sidebar element. The
   token overrides sit on this single [data-*] scope so they register
   as theme tokens rather than buried under a component selector. */
[data-surface="sidebar-dark"] {
  background: #670041;
  border-right: 1px solid transparent;
  color: #f6efe0;
  --ink: #f6efe0;
  --ink-2: #e8c8dc;
  --ink-3: #ca99b7;
  --ink-4: #af6693;
  --rule: rgba(246,239,224,0.10);
  --rule-strong: rgba(246,239,224,0.22);
  /* Hover surfaces for the dark sidebar — translucent cream over
     maroon. Without these overrides, --bg-elev-2 fell back to the
     light theme's cream (#fbf7f0), making icon hovers cream-on-cream
     and the icon invisible against the hover state. */
  --bg-elev-2: rgba(246,239,224,0.10);
  --bg-elev-3: rgba(246,239,224,0.06);
  --bg-input: rgba(246,239,224,0.06);
  --accent: #ff7ae9;
  --accent-soft: rgba(255,122,233,0.16);
}
[data-surface="sidebar-dark"] .acct-avatar {
  background: var(--primary);
  color: var(--primary-ink);
}
[data-surface="sidebar-dark"] .nav-toggle button.is-active {
  background: var(--primary);
  color: var(--primary-ink);
}
[data-surface="sidebar-dark"] .avatar-sm {
  background: #f6efe0;
  color: #15020c;
}

/* ---- SHELL: app grid + columns --------------------------------- */
.app-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  height: 100%;
  overflow: hidden;
}

.col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ---- SIDEBAR -------------------------------------------------- */
.sidebar {
  background: var(--bg-elev-1);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.sidebar-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.sidebar-rule {
  height: 1px;
  background: var(--rule);
  margin: 8px 16px 4px;
}
.sidebar-eyebrow.with-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 16px;
}
.sidebar-eyebrow-link {
  background: transparent;
  border: 0;
  color: var(--ink-3);
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
}
.sidebar-eyebrow-link:hover { color: var(--ink); }

/* Nav items (icon · label · count) */
.thread-item.nav-item {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 22px 8px 20px;
  flex-direction: row;
}
.thread-item.nav-item .nav-icon {
  color: var(--ink-3);
  transition: color var(--duration) var(--ease);
}
.thread-item.nav-item .nav-label {
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  line-height: 1.2;
}
.thread-item.nav-item .nav-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--ink-3);
}
.thread-item.nav-item:hover .nav-icon { color: var(--ink-2); }
.thread-item.nav-item.is-active .nav-icon { color: var(--accent); }
.thread-item.nav-item.is-active .nav-label { color: var(--ink); font-weight: 600; }

.nav-live-dot {
  width: 6px;
  height: 6px;
  background: var(--success);
}

.nav-item-settings { margin-bottom: 4px; }
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--rule);
}
.brand-name {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.brand-tag {
  font-family: var(--f-label);
  font-size: 9px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 3px;
}

.acct-switcher {
  border-bottom: 1px solid var(--rule);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 36px 1fr 14px;
  gap: 12px;
  align-items: center;
}
.acct-avatar {
  width: 36px; height: 36px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--primary-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 500;
}
.acct-name { font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-crumb { font-family: var(--f-label); font-size: 9px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 2px; }

.nav-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 18px 16px 12px;
  padding: 3px;
  background: var(--bg-input);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  gap: 2px;
}
.nav-toggle button {
  background: transparent;
  border: 0;
  color: var(--ink-3);
  padding: 7px 8px;
  font: inherit;
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
.nav-toggle button.is-active { background: var(--ink); color: var(--bg); }

.thread-new {
  margin: 8px 16px 14px;
  padding: 10px 14px;
  background: transparent;
  border: 1px dashed var(--rule-strong);
  color: var(--ink-3);
  border-radius: var(--radius-pill);
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}
.thread-new:hover { color: var(--primary); border-color: var(--primary); }

.sidebar-eyebrow {
  padding: 18px 22px 6px;
  font-family: var(--f-label);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.thread-list { display: flex; flex-direction: column; }
.thread-item {
  text-align: left;
  padding: 10px 22px 10px 20px;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  cursor: pointer;
  font: inherit;
  font-family: var(--f-sans);
  color: var(--ink-2);
  transition: background var(--duration) var(--ease);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.thread-item:hover { background: var(--bg-elev-3); }
.thread-item.is-active { background: var(--bg-elev-3); border-left-color: var(--accent); }
.thread-item.is-active .thread-title { color: var(--ink); }
.thread-title {
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.thread-meta {
  font-family: var(--f-data);
  font-size: 10px;
  color: var(--ink-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sidebar-footer {
  margin-top: auto;
  padding: 18px 22px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  gap: 12px;
  align-items: center;
}
.avatar-sm {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-data);
  font-size: 11px;
  font-weight: 500;
}

/* ---- TOPBAR -------------------------------------------------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  min-height: 56px;
  gap: 16px;
}
.crumbs { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--ink-3); font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.12em; }
.crumbs strong { color: var(--ink); font-weight: 500; }
.topbar-actions { display: flex; gap: 8px; align-items: center; }

.seg {
  display: inline-flex;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  overflow: hidden;
  padding: 2px;
  gap: 2px;
}
.seg button {
  padding: 5px 14px;
  font: inherit;
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--ink-3);
  cursor: pointer;
}
.seg button.is-active { background: var(--ink); color: var(--bg); }

/* ---- MAIN (chat | artifact) ----------------------------------
   Chat column scales smoothly: floor 420px so it stays comfortable
   on small laptops, climbs to ~32% of the main area on standard
   screens, and caps at 620px on big monitors (beyond that chat
   doesn't get more readable — content stays bounded by
   .chat-inner max-width, and the artifact column gets the slack). */
.main {
  display: grid;
  grid-template-columns: clamp(420px, 32%, 620px) 1fr;
  grid-template-rows: 56px 1fr;
  grid-template-areas:
    "topbar topbar"
    "chat artifact";
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.main > .topbar { grid-area: topbar; }
.chat-col {
  grid-area: chat;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--rule);
  background: var(--bg);
  position: relative;
}
.artifact-col {
  grid-area: artifact;
  overflow-y: auto;
  background: var(--bg);
  padding: var(--pad-screen) calc(var(--pad-screen) + 8px) 64px;
}

.chat-scroll { flex: 1; overflow-y: auto; padding: 28px 36px 160px; }
.chat-inner { max-width: 580px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }

/* ---- MESSAGES ------------------------------------------------ */
.msg { display: grid; grid-template-columns: 32px 1fr; gap: 14px; }
.msg-who { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.msg-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.msg-time { font-family: var(--f-data); font-size: 10px; color: var(--ink-3); }
.msg-text { font-size: 14px; line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.msg-text strong { font-weight: 600; }
.msg-text + .msg-text { margin-top: 10px; }

/* ---- ATTACHMENT CARD ---------------------------------------- */
/* Shown above the message text (or above the composer input) when
   the user has uploaded a file alongside their prompt. Compact
   two-row card: filetype badge · filename · meta. Clicking opens
   a preview in the artifact panel. */
.msg-attach,
.composer-attach {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 10px;
  width: fit-content;
  max-width: 360px;
  min-width: 0;
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  background: var(--bg-elev-1);
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}
.msg-attach:hover,
.composer-attach:hover {
  border-color: var(--ink);
  background: var(--bg-elev-2);
}
.msg-attach-badge {
  width: 52px;
  flex: 0 0 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elev-2);
  border-right: 1px solid var(--rule);
  font-family: var(--f-data);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--primary);
}
.msg-attach-body {
  padding: 10px 14px 9px;
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.msg-attach-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.msg-attach-meta {
  font-family: var(--f-data);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  line-height: 1.3;
}

/* Composer variant: smaller, sits inside the composer above the input.
   Hugs its content (not full-row) and carries a tiny ✕ to detach. */
.composer-attach {
  margin: 0 0 10px;
  max-width: 320px;
}
.composer-attach-remove {
  border: 0;
  background: transparent;
  color: var(--ink-3);
  width: 28px;
  flex: 0 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-left: 1px solid var(--rule);
}
.composer-attach-remove:hover { color: var(--ink); background: var(--bg-elev-2); }

/* ---- HTML DETECTION CARD ----------------------------------- */
/* Inline agent artifact that shows what was parsed from the user's
   uploaded HTML. Two columns: a mini render with slot overlays, and
   a checklist of slots the agent identified. Sits inside an agent
   message bubble. */
.detect-card {
  margin-top: 12px;
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  background: var(--bg-elev-1);
  overflow: hidden;
}
.detect-eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  background: var(--bg-elev-2);
  border-bottom: 1px solid var(--rule);
  font-family: var(--f-label);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.detect-eyebrow-meta { color: var(--ink-3); letter-spacing: 0.04em; }

.detect-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 18px;
  padding: 16px 16px 18px;
}

.detect-render {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 6px;
  background: var(--bg-cream, var(--bg));
  border: 1px solid var(--rule);
}

.detect-slot {
  position: relative;
  border: 1px dashed var(--primary);
  padding: 8px 10px;
}
.detect-slot-label {
  position: absolute;
  top: -8px;
  left: 6px;
  padding: 1px 6px;
  font-family: var(--f-label);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--bg);
  text-transform: uppercase;
}
.detect-slot-body {
  display: block;
  min-width: 0;
}

.detect-slots {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.detect-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
}
.detect-row:last-of-type { border-bottom: 0; }
.detect-row-dot {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bg);
  margin-top: 2px;
}
.detect-row-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.detect-row-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}
.detect-row-hint {
  font-family: var(--f-data);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  line-height: 1.35;
}
.detect-summary {
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--bg-elev-2);
  border-left: 2px solid var(--primary);
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.45;
}
.detect-summary strong { color: var(--ink); font-weight: 600; }

/* ---- ICON-ONLY SIDEBAR -------------------------------------- */
/* A collapsed variant of the sidebar. Logo + icon-only nav items.
   Recent chat threads can't be reduced to icons, so when the user
   wants threads they expand back to the full sidebar via the
   chat-toggle button at the top. Hover any icon for its label
   in a small tooltip pinned to the right edge. */
.app-grid.has-icons-sidebar,
.app-grid:has(.sidebar.is-icons) { grid-template-columns: 64px 1fr; }
.sidebar.is-icons {
  align-items: stretch;
  padding: 0;
  overflow: visible;
}
.sidebar.is-icons .sidebar-brand {
  padding: 18px 0 12px;
  justify-content: center;
}
.sidebar.is-icons .sidebar-brand .brand-tag { display: none; }
.sidebar.is-icons .acct-switcher {
  grid-template-columns: 1fr;
  padding: 6px 0 10px;
  justify-items: center;
  background: transparent;
}
.sidebar.is-icons .acct-switcher > div:not(.acct-avatar),
.sidebar.is-icons .acct-switcher > svg { display: none; }
.sidebar.is-icons .sidebar-body {
  padding: 4px 0 0;
  overflow: visible;
  align-items: stretch;
}
.sidebar.is-icons .sidebar-rule { margin: 8px 16px; }

/* Icon row — uniform 40px tappable square, centred icon, badge/dot
   tucked into the top-right. */
.sidebar.is-icons .icon-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 2px auto;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.sidebar.is-icons .icon-row:hover { background: var(--bg-elev-2); color: var(--ink); }
.sidebar.is-icons .icon-row.is-active { background: var(--primary); color: var(--primary-ink, #fff); }
.sidebar.is-icons .icon-row.is-active:hover { background: var(--primary); color: var(--primary-ink, #fff); }
.sidebar.is-icons .icon-row.is-dim { opacity: 0.55; }

/* Tiny eyebrow rule between groups — same spacing rhythm as the
   expanded sidebar's section headers, but reduced to a hairline. */
.sidebar.is-icons .icon-group-rule {
  width: 24px;
  height: 1px;
  background: var(--rule);
  margin: 8px auto;
}

/* Badge (pending count) at top-right of an icon row. */
.icon-row-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--primary);
  color: var(--primary-ink, #fff);
  font-family: var(--f-data);
  font-size: 9px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
  line-height: 1;
  pointer-events: none;
}
.icon-row-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
}

/* Hover tooltip — appears to the right of the icon. CSS-only, no JS.
   Reads from data-tooltip on the icon-row element. A 300ms dwell
   delay prevents the tooltip from flashing when the cursor sweeps
   across multiple icons; on leave it hides instantly. */
.sidebar.is-icons .icon-row[data-tooltip]::after,
.sidebar.is-icons .sidebar-collapse-btn.is-icons[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  white-space: nowrap;
  padding: 5px 10px;
  /* Fixed dark tooltip — doesn't inherit the sidebar's overridden
     --ink/--bg tokens, so it stays legible against both pale-gold
     and dark-maroon sidebar themes. */
  background: #15020c;
  color: #f6efe0;
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  z-index: 30;
  transition: opacity 110ms ease 0ms, transform 110ms ease 0ms;
  box-shadow: 0 4px 14px -6px rgba(0,0,0,0.4);
}
.sidebar.is-icons .icon-row[data-tooltip]:hover::after,
.sidebar.is-icons .sidebar-collapse-btn.is-icons[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  /* Dwell delay so the cursor must rest on the icon before the
     tooltip fades in — sweeping across the rail stays clean. */
  transition-delay: 300ms;
}

/* Footer in icon mode — settings icon + user avatar stacked. */
.sidebar.is-icons .sidebar-footer {
  grid-template-columns: 1fr;
  padding: 12px 0 14px;
  justify-items: center;
  gap: 6px;
}
.sidebar.is-icons .sidebar-footer > div:not(.avatar-sm),
.sidebar.is-icons .sidebar-footer > button:not(.icon-row) { display: none; }

/* Collapse / expand toggle — shows in both rail layouts so the user
   can flip between expanded and icon-only at will. Inside the
   expanded rail it sits next to the brand tag; in the icon rail
   it lives just under the J mark and uses the same hover tooltip
   pattern as the other icon rows. */
.sidebar-collapse-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  margin-left: 6px;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 140ms ease, color 140ms ease;
}
.sidebar-collapse-btn:hover {
  background: var(--bg-elev-2);
  color: var(--ink);
}

.sidebar.is-icons .sidebar-collapse-btn.is-icons {
  position: relative;
  width: 40px;
  height: 40px;
  margin: 2px auto 6px;
  border-radius: 8px;
  color: var(--ink-3);
}
.sidebar.is-icons .sidebar-collapse-btn.is-icons:hover {
  background: var(--bg-elev-2);
  color: var(--ink);
}

.msg-event {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0;
  font-family: var(--f-label);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.msg-event-rule { flex: 1; height: 1px; background: var(--rule); }

.msg-avatar-agent {
  width: 32px; height: 32px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--primary);
  font-family: var(--f-display);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border: 1px solid var(--primary);
}

.msg-avatar-user {
  width: 32px; height: 32px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--f-data);
  font-size: 11px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- ENGINE LOADER animations ---------------------------------
   Two stacked columns of engine glyphs scroll upward, while a
   crossed-circle spins in the centre. Replaces all spinners. */
.engine-loader-col {
  display: inline-block;
  overflow: hidden;
  position: relative;
}
.engine-loader-stack {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0; left: 0;
  will-change: transform;
}
.engine-loader-a { animation: jq-eng-scroll-a 2.4s steps(4) infinite; }
.engine-loader-b { animation: jq-eng-scroll-b 2.4s steps(4) infinite; }
@keyframes jq-eng-scroll-a {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
@keyframes jq-eng-scroll-b {
  0%   { transform: translateY(-25%); }
  100% { transform: translateY(-75%); }
}
.engine-loader-spin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: jq-eng-spin 1.6s linear infinite;
}
@keyframes jq-eng-spin {
  to { transform: rotate(360deg); }
}

/* ---- TOOL TRACE — minimal one-liner ---------------------------
   Drops the boxed card chrome in favour of a quiet hairline row.
   The tool ran, it succeeded — it doesn't need a frame. */
.tool-trace {
  margin-top: 10px;
  border: 0;
  border-top: 1px dashed var(--rule);
  background: transparent;
  font-size: 12px;
  color: var(--ink-3);
}
.tool-trace:first-of-type { margin-top: 14px; }
.tool-trace-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
}
.tool-trace-icon {
  display: inline-flex;
  align-items: center;
  min-width: 14px;
}
.tool-trace-icon { font-family: var(--f-data); font-size: 9px; color: var(--success); }
.tool-trace-icon.running { color: var(--ink-3); }
.tool-name { font-family: var(--f-data); font-size: 11px; color: var(--ink-2); font-weight: 500; text-transform: lowercase; letter-spacing: 0.02em; }
.tool-desc { font-family: var(--f-data); font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tool-time { font-family: var(--f-data); font-size: 10px; color: var(--ink-3); }

/* ---- ARTIFACT CARD inline (in chat) --------------------------- */
.artifact-inline {
  margin-top: 16px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-card);
  background: var(--bg-elev-2);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--duration) var(--ease);
}
.artifact-inline:hover { border-color: var(--primary); }
.artifact-inline-head {
  padding: 11px 18px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--f-label);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  background: transparent;
}
.artifact-inline-body {
  padding: 18px 20px 20px;
}
.artifact-inline-title {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
}
.artifact-inline-sub { font-size: 12px; color: var(--ink-3); margin-top: 6px; }

/* ---- COMPOSER — floats over the chat→artifact seam ------------
   Lives at .main level (not inside .chat-col) so the pill can
   visually sit on top of the column hairline. Centered + wider —
   matches the persistent composer's lighter-maroon pill aesthetic
   so the language is consistent across compact and expanded states. */
.composer-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 32px 56px 28px;
  background: transparent;
  pointer-events: none;
  z-index: 20;
}
.composer {
  pointer-events: auto;
  max-width: 880px;
  margin: 0 auto;
  background: #540037;                /* lighter maroon — agent's voice */
  color: #f6efe0;
  border: 0;
  border-radius: 28px;
  padding: 16px 18px 14px;
  /* Aligned with the persistent composer — soft hairline + maroon
     glow above + ambient drop below. No hard border. */
  box-shadow:
    0 0 0 1px rgba(246, 239, 224, 0.08),
    0 -10px 48px -12px color-mix(in oklch, var(--primary) 40%, transparent),
    0 -2px 12px -4px color-mix(in oklch, var(--primary) 26%, transparent),
    0 24px 60px -24px rgba(20, 8, 12, 0.32);
}
[data-theme="dark"] .composer {
  box-shadow:
    0 0 0 1px rgba(246, 239, 224, 0.1),
    0 -10px 48px -12px color-mix(in oklch, var(--primary) 50%, transparent),
    0 -2px 12px -4px color-mix(in oklch, var(--primary) 30%, transparent),
    0 24px 60px -24px rgba(0, 0, 0, 0.6);
}

/* Persistent composer — placeholder + caret color in the maroon bar.
   Composer body is hardcoded to #540037 so its input placeholder
   needs an explicit cream-tinted color for legibility. */
.pc input::placeholder {
  color: rgba(246, 239, 224, 0.55);
  font-style: italic;
}
.pc input { caret-color: #f6efe0; }

/* Persistent composer reserves ~112px at the bottom of every page
   (28px gradient pad + 56px pill + 28px gradient pad). Without bottom
   padding on scroll regions, the last row of a table / last card of a
   list sits under the floating pill. This selector blanket-pads the
   common scroll containers across pages that mount the composer. */
.col:has(> .pc-wrap) .frag-frame,
.col:has(> .pc-wrap) .sends-frame,
.col:has(> .pc-wrap) > .col-scroll,
.col:has(> .pc-wrap) > .topbar ~ div[style*="overflow: auto"],
.col:has(> .pc-wrap) > .topbar ~ div[style*="overflow:auto"] {
  padding-bottom: 140px;
}

/* Approvals list + detail shell — clamp matches .main: list pane
   gets a comfortable floor on small screens and caps at 540px so
   the detail pane gets all the slack on wide monitors. */
.apv-shell {
  display: grid;
  grid-template-columns: clamp(380px, 28%, 540px) 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ============================================================
   APPROVALS — combined header (tabs + search + filters in one row)
   Tabs collapse to a dropdown and filters consolidate to a single
   "Filters · N" pill once the main column drops below ~960px.
   Uses a container query on .apv-controls so the layout reacts to
   its column width, not the viewport.
   ============================================================ */
.apv-controls {
  container-type: inline-size;
  container-name: apv;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 40px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-elev-1);
  flex-shrink: 0;
}
.apv-tabs { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.apv-tabs-collapsed { display: none; }
.apv-tab {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; background: transparent; cursor: pointer;
  padding: 10px 12px;
  font-family: var(--f-sans); font-size: 13.5;
  font-weight: 400; color: var(--ink-3);
  border-radius: 8px;
  letter-spacing: -0.005em;
  transition: background 120ms ease, color 120ms ease;
}
.apv-tab:hover { color: var(--ink); background: var(--bg-elev-2); }
.apv-tab.is-active { color: var(--ink); font-weight: 500; background: var(--bg); }
.apv-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 6px;
  border-radius: 10px;
  font-family: var(--f-data); font-size: 10px; font-weight: 500;
  line-height: 1;
}
.apv-tab-dropdown {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--rule); border-radius: 8px;
  background: var(--bg); color: var(--ink);
  font: inherit; font-size: 13;
  cursor: pointer;
}
.apv-tab-dropdown:hover { border-color: var(--ink); }

.apv-search { flex: 1 1 240px; max-width: 320px; margin-left: 6px; }
.apv-filters { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.apv-filters-collapsed { display: none; }
.apv-filter-combined {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--rule); border-radius: 999px;
  background: transparent; color: var(--ink);
  font: inherit; font-size: 12;
  cursor: pointer;
}
.apv-filter-combined:hover { border-color: var(--ink); }

/* Container query — when the main column drops below 960px,
   collapse tabs to a single dropdown and consolidate filter chips
   into a "Filters" multi-select + Sort. */
@container apv (max-width: 960px) {
  .apv-tabs-full     { display: none; }
  .apv-tabs-collapsed { display: inline-flex; }
  .apv-filters-full     { display: none; }
  .apv-filters-collapsed { display: inline-flex; }
  .apv-search { flex: 1 1 200px; max-width: none; }
}

/* Same treatment for the agent console's multi-line textarea. */
.composer .composer-input { color: #f6efe0; caret-color: #f6efe0; }
.composer .composer-input::placeholder { color: rgba(246, 239, 224, 0.55); font-style: italic; }

/* Attach card sitting inside the maroon composer — cream-tinted
   chrome to read against the dark body. */
.composer .composer-attach {
  border-color: rgba(246, 239, 224, 0.18);
  background: rgba(246, 239, 224, 0.06);
}
.composer .composer-attach:hover {
  border-color: rgba(246, 239, 224, 0.32);
  background: rgba(246, 239, 224, 0.1);
}
.composer .composer-attach .msg-attach-badge {
  background: rgba(255, 230, 97, 0.18);
  color: #ffe661;
}
.composer .composer-attach .msg-attach-name { color: #f6efe0; }
.composer .composer-attach .msg-attach-meta { color: #ca99b7; }
.composer .composer-attach-remove {
  color: #ca99b7;
  border-left-color: rgba(246, 239, 224, 0.14);
}
.composer .composer-attach-remove:hover {
  color: #f6efe0;
  background: rgba(246, 239, 224, 0.08);
}
.composer-input {
  font: inherit;
  font-size: 14px;
  background: transparent;
  border: 0;
  outline: 0;
  resize: none;
  width: 100%;
  color: var(--ink);
  line-height: 1.5;
}
.composer-input::placeholder { color: var(--ink-mute); }
.composer-tools { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.composer-tools .spacer { flex: 1; }

/* Context chips row — sits above the toolbar, wraps freely.
   Keeps the send button anchored even when chips don't fit. */
.composer-context {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.composer-context:empty { display: none; }

/* Toolbar — fixed grid: affordances (left) · model · send (right).
   Send never gets pushed; min-width:0 on the model label lets it
   ellipsis-truncate before squeezing the send button. */
.composer-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed rgba(246, 239, 224, 0.16);
}
.composer-toolbar .toolbar-spacer { flex: 1; min-width: 8px; }

/* Icon-only affordance buttons inside the composer — cream-tinted to
   sit against the lighter-maroon body. */
.composer-icon-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: #e8c8dc;
  cursor: pointer;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
  flex-shrink: 0;
}
.composer-icon-btn:hover { color: #f6efe0; background: rgba(246, 239, 224, 0.08); }

/* Send button — brand yellow against the maroon composer.
   Yellow is the brand accent; the contrast against maroon is
   maximum so the primary action is unmissable. */
.composer-send {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  background: #ffe661;
  color: #15020c;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 4px 14px -4px rgba(255, 230, 97, 0.45);
  transition: filter var(--duration) var(--ease);
}
.composer-send:hover { filter: brightness(1.08); }
.composer-send:disabled { opacity: 0.45; cursor: not-allowed; }

.chip-tool {
  padding: 5px 12px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-3);
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.chip-tool:hover { color: var(--ink); border-color: var(--ink); }

/* ---- FOLLOWUPS ---------------------------------------------- */
.followups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.followup {
  padding: 8px 16px;
  background: transparent;
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-pill);
  font-family: var(--f-sans);
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
}
.followup:hover {
  color: var(--primary);
  border-color: var(--primary);
  border-style: solid;
  background: var(--accent-soft);
}