:root {
  --wbs-red: #76132A;
  --wbs-red-mid: #53192B;
  --wbs-dark-red: #461C1D;
  --wbs-gray: #716B62;
  --wbs-mid-gray: #595750;
  --wbs-light: #F6EEEA;   /* plum wash — selection/hover */
  --wbs-blush: #DECCD0;
  --ink: #24201E;         /* warm ink */
  --ink-soft: #5C5550;
  --line: #E9E3DE;        /* warm hairline */
  --bg: #FAF8F6;          /* warm paper canvas — the product surface */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --white: #ffffff;
  --ok: #2e7d32;
  --warn: #b5710b;
  --danger: #b3261e;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  /* Plum-tinted, layered elevation — warmer and more premium than flat black shadows */
  --shadow-xs: 0 1px 2px rgba(40,15,25,.06);
  --shadow-sm: 0 1px 3px rgba(40,15,25,.07), 0 1px 2px rgba(40,15,25,.04);
  --shadow: 0 2px 8px rgba(40,15,25,.07), 0 1px 2px rgba(40,15,25,.04);
  --shadow-md: 0 8px 24px rgba(40,15,25,.09), 0 2px 6px rgba(40,15,25,.05);
  --shadow-lg: 0 20px 56px rgba(40,15,25,.18), 0 6px 18px rgba(40,15,25,.08);
  --ring: 0 0 0 3px rgba(118,19,42,.16);
  --ease: cubic-bezier(.4, 0, .2, 1);
  font-family: 'Roboto', system-ui, sans-serif;
  /* The warm-paper light theme IS the product — pin it. Without this, devices set to dark
     mode render native widgets (selects, scrollbars, inputs) dark inside our light UI. */
  color-scheme: light;
}

* { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  /* var(--app-h) is set from visualViewport so the composer stays above the iOS keyboard */
  height: 100vh; height: 100dvh; height: var(--app-h, 100dvh);
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  overscroll-behavior: none;
  display: flex; flex-direction: column;
}
button, a, label, input, textarea, select, .seg { touch-action: manipulation; }
/* Ensure the [hidden] attribute wins over display:flex/grid rules (send/stop toggle, views) */
[hidden] { display: none !important; }
button { font-family: inherit; cursor: pointer; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Premium polish: motion, focus, scrollbars ── */
.new-chat, .ghost-btn, .convo-item, .seg, .tool, .send, .btn, .suggestion, .source-chip,
.art-btn, .link-btn, .icon-btn, .convo-act, .msg-actions button, .be-open, .tpl-item, .picker-row,
.user-chip, .stat-card { transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), transform .12s var(--ease); }
/* Keyboard focus only — crisp plum ring, never on mouse click */
:focus-visible { outline: none; box-shadow: var(--ring); }
button:focus:not(:focus-visible), select:focus:not(:focus-visible) { outline: none; }
#input:focus-visible, #input:focus { box-shadow: none; } /* the composer row shows the ring instead */
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Refined thin scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--wbs-blush) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(118,19,42,.18); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(118,19,42,.32); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* On touch devices, hover styles can "stick" after a tap — don't lift on hover there. */
@media (hover: none) {
  .new-chat:hover, .send:hover, .btn.primary:hover, .suggestion:hover, .stat-card:hover, .user-chip:hover, .tool:hover { transform: none; }
}

/* ── Top bar — "Quiet Premium": hairline translucent header; plum moves to accents.
   (Also honors the brand rule that the lockup sits on white, never on a colored field.) ── */
.topbar {
  flex: 0 0 auto;
  height: calc(56px + env(safe-area-inset-top));
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  position: relative; z-index: 10;
  display: flex; align-items: center; gap: 14px;
  padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  color: var(--ink);
}
@supports not (backdrop-filter: blur(1px)) { .topbar { background: #FFFFFF; } } /* Safari-old / fallback */
.menu-toggle { display: none; }
.icon-btn { background: transparent; border: 0; color: var(--ink-soft); padding: 6px; border-radius: 8px; display: inline-flex; }
.icon-btn:hover { background: var(--wbs-light); color: var(--wbs-red); }
.brand { display: flex; align-items: center; gap: 10px; }
.wbs-badge {
  background: var(--wbs-red); color: #fff; font-weight: 700;
  padding: 4px 8px; border-radius: 4px; font-size: 14px; letter-spacing: 1px; line-height: 1;
}
.wbs-badge.lg { font-size: 26px; padding: 10px 14px; border-radius: 8px; }
/* Brand lockup — the official WISENBAKER / BUILDER SERVICES, INC. mark, now ink-on-white
   with the AI tag and rules in plum (brand color spent as the accent, not the field). */
.wbs-lockup { display: flex; flex-direction: column; align-items: center; line-height: 1; gap: 5px; }
.wbs-name {
  font-family: var(--serif); font-weight: 600;
  font-size: 27px; letter-spacing: 5px; color: var(--ink); white-space: nowrap;
  display: inline-flex; align-items: flex-start; text-indent: 5px; /* balance the letter-spacing */
}
.wbs-ai {
  font-family: 'Roboto', system-ui, sans-serif; font-weight: 700;
  font-size: 11px; letter-spacing: 2px; color: var(--wbs-red);
  margin-left: 7px; transform: translateY(1px);
}
.wbs-sub { display: flex; align-items: center; gap: 9px; }
.wbs-sub-text {
  font-family: var(--serif); font-weight: 600;
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--wbs-gray); white-space: nowrap;
}
.wbs-rule { height: 1px; width: 24px; background: rgba(118,19,42,.35); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.budget { display: flex; align-items: center; gap: 8px; }
.budget-bar { width: 90px; height: 6px; border-radius: 99px; background: #EDE6E0; overflow: hidden; }
.budget-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #9a2342, var(--wbs-red)); border-radius: 99px; transition: width .4s ease; }
.budget-fill.warn { background: var(--warn); }
.budget-fill.over { background: var(--danger); }
.budget-label { font-size: 12px; color: var(--ink-soft); min-width: 70px; font-variant-numeric: tabular-nums; }
/* Budget meter: subtle shimmer until real data arrives (replaces the ambiguous "—") */
.budget.loading .budget-fill { width: 45%; background: var(--wbs-blush); animation: budgetPulse 1.1s ease-in-out infinite; }
@keyframes budgetPulse { 0%,100% { opacity: .35; } 50% { opacity: .8; } }

/* ── Phase-1 polish: skeletons, composer warning, disabled send ── */
.skel-row { height: 30px; border-radius: 8px; margin: 2px 0; background: linear-gradient(90deg, var(--wbs-light) 25%, #efe6e8 37%, var(--wbs-light) 63%); background-size: 400% 100%; animation: skel 1.3s ease-in-out infinite; }
@keyframes skel { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.side-empty { padding: 10px 4px; font-size: 13px; color: var(--wbs-gray); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.composer-warn { max-width: 760px; margin: 8px auto 0; padding: 8px 12px; border-radius: var(--radius-sm); background: #fbf0dd; border: 1px solid #f0dcb6; color: #8a5a00; font-size: 13px; overflow-wrap: break-word; }
.send:disabled { opacity: .4; cursor: default; box-shadow: none; }
.send:disabled:hover { transform: none; filter: none; }

/* ── Phase-2: a11y + stream error/retry + progress ── */
/* Visually hidden but available to screen readers */
.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; }
/* Visible keyboard-focus ring on interactive elements (mouse clicks stay clean via :focus-visible) */
:focus-visible { outline: 2px solid var(--wbs-red); outline-offset: 2px; border-radius: 4px; }
.msg-wrap.user .bubble :focus-visible { outline-color: #fff; } /* contrast on the plum chip */
/* Failed answer: message + one-tap retry */
.stream-error { color: var(--danger); }
.retry-btn { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;
  border: 1px solid var(--wbs-red); border-radius: 99px; background: var(--white); color: var(--wbs-red);
  font-size: 13px; font-weight: 600; cursor: pointer; }
.retry-btn:hover { background: var(--wbs-light); }
/* Small inline spinner (re-index running, uploads) */
.spin { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--wbs-blush);
  border-top-color: var(--wbs-red); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) { .skel-row, .budget.loading .budget-fill, .spin { animation: none; } }
.user-chip {
  width: 33px; height: 33px; border-radius: 50%;
  background: var(--wbs-red-mid); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; overflow: hidden;
  box-shadow: 0 0 0 1.5px var(--line), var(--shadow-sm);
}
.user-chip:hover { box-shadow: 0 0 0 2px var(--wbs-blush), var(--shadow); }
.user-chip.has-photo { background-size: cover; background-position: center; }

/* ── App layout ── */
.app { flex: 1; display: flex; min-height: 0; position: relative; }

.sidebar {
  width: 270px; flex: 0 0 270px;
  background: var(--white); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 14px; gap: 14px;
  overflow-y: auto;
}
.new-chat {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  background: linear-gradient(180deg, #841830, var(--wbs-red)); color: #fff; border: 0;
  padding: 12px 14px; border-radius: var(--radius-sm); font-weight: 600; font-size: 14px; letter-spacing: .2px;
  box-shadow: var(--shadow-sm);
}
.new-chat:hover { background: linear-gradient(180deg, #8f1a35, #7d142d); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.new-chat:active { transform: translateY(0); box-shadow: var(--shadow-xs); }
.side-section { display: flex; flex-direction: column; gap: 6px; }
.side-section.grow { flex: 1; min-height: 0; }
.side-head { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--wbs-gray); margin: 2px 2px 4px; }
.ws-select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); color: var(--ink); font-size: 14px;
}
.ghost-btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: transparent; border: 1px solid transparent; color: var(--ink-soft);
  padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; text-align: left;
}
.ghost-btn:hover { background: var(--wbs-light); color: var(--wbs-red); }
.convo-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.convo-group { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #A69E96; padding: 10px 10px 4px; }
.convo-group:first-child { padding-top: 2px; }
.convo-item {
  position: relative; padding: 9px 10px 9px 13px; border-radius: var(--radius-sm); font-size: 14px; color: var(--ink-soft);
  border: 1px solid transparent; display: flex; align-items: center; gap: 6px;
}
.convo-item:hover { background: var(--wbs-light); }
.convo-item.active { background: var(--wbs-light); color: var(--wbs-red); font-weight: 600; }
.convo-item.active::before { content: ''; position: absolute; left: 3px; top: 7px; bottom: 7px; width: 3px; border-radius: 99px; background: var(--wbs-red); }
.convo-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.convo-search {
  width: 100%; box-sizing: border-box; margin: 0 0 8px; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white);
  font: inherit; font-size: 13px;
}
.convo-search:focus-visible { outline: 2px solid var(--wbs-red); outline-offset: 1px; }
.convo-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.convo-item:hover .convo-actions, .convo-item.active .convo-actions { opacity: 1; }
.convo-act { background: transparent; border: 0; cursor: pointer; font-size: 13px; line-height: 1; padding: 4px; border-radius: 6px; opacity: .7; }
.convo-act:hover { opacity: 1; background: rgba(0,0,0,.06); }
.btn.danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn.danger:hover { filter: brightness(.92); }

.scrim { display: none; }

/* ── Main / views ── */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.view[hidden] { display: none; }

.chat-head {
  height: 52px; flex: 0 0 52px; display: flex; align-items: center; gap: 14px;
  padding: 0 20px; border-bottom: 1px solid var(--line);
  background: rgba(250,248,246,.86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.chat-title { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Back button in a chat-head shouldn't stretch full-width (it reuses .ghost-btn) */
.chat-head .ghost-btn { width: auto; margin-left: auto; flex: 0 0 auto; }
.admin-head-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.admin-head-actions .ghost-btn { margin-left: 0; }
.month-picker {
  display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600;
  color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.month-picker select {
  font: inherit; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink);
  padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--white);
  cursor: pointer;
}
.month-picker select:focus-visible { outline: 2px solid var(--wbs-red); outline-offset: 1px; }
/* Model choice as quiet pills — the active one reads like the single "model pill". */
.model-toggle { margin-left: auto; display: flex; gap: 4px; }
.seg {
  display: flex; align-items: center; gap: 6px; border: 1px solid transparent; background: transparent;
  padding: 6px 13px; border-radius: 99px; font-size: 13px; font-weight: 500; color: var(--ink-soft);
}
.seg:hover { background: var(--wbs-light); }
.seg .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wbs-blush); }
.seg.active { background: var(--white); color: var(--ink); font-weight: 600; border-color: var(--line); box-shadow: var(--shadow-sm); }
.seg[data-mode="fast"].active .dot { background: var(--ok); }
.seg[data-mode="smart"].active .dot { background: var(--wbs-red); }
.seg[data-mode="complex"].active .dot { background: var(--wbs-dark-red); }

/* ── Messages ── */
.messages { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 24px 20px; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
.msg-wrap { max-width: 760px; margin: 0 auto 24px; display: flex; gap: 12px; flex-wrap: wrap; }
.msg-wrap.user { flex-direction: row-reverse; }
.avatar { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; box-shadow: var(--shadow-sm); }
/* AI identity becomes a small square brandmark — the answer itself is the surface now. */
.avatar.ai { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(150deg, #8a1a33, var(--wbs-red)); color: #fff; font-size: 10px; margin-top: 2px; }
.avatar.me { background: var(--wbs-blush); color: var(--wbs-red); }
.msg-wrap { animation: msgIn .26s var(--ease) both; }
.bubble { padding: 13px 17px; border-radius: var(--radius-lg); font-size: 15.5px; line-height: 1.68; max-width: 86%; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.msg-wrap.user .bubble { background: linear-gradient(160deg, #841830, var(--wbs-red)); color: #fff; border-radius: 14px 14px 5px 14px; padding: 10px 15px; max-width: 75%; box-shadow: var(--shadow-sm); position: relative; }
/* Edit & resend pencil — appears on YOUR latest message (hover on desktop, always on touch) */
.msg-edit {
  position: absolute; top: -10px; right: -6px; border: 1px solid var(--line); background: var(--white);
  color: var(--wbs-red); border-radius: 99px; width: 26px; height: 26px; line-height: 1; font-size: 13px;
  cursor: pointer; opacity: 0; transition: opacity .12s; box-shadow: var(--shadow-sm);
}
.msg-wrap.user:hover .msg-edit, .msg-edit:focus-visible { opacity: 1; }
.msg-edit:hover { background: var(--wbs-light); }
@media (hover: none) { .msg-edit { opacity: .85; } }
/* THE core redesign move: AI answers leave the bubble. Open text on the warm canvas at a
   comfortable reading measure — long SOP answers read like a set page, not boxed speech. */
.msg-wrap.ai .bubble { background: transparent; border: 0; box-shadow: none; padding: 1px 0 0; max-width: 66ch; }
/* Another member's message in a shared project — left-aligned, distinct from your own (plum) and the AI (white) */
.avatar.them { background: var(--wbs-gray); color: #fff; }
.msg-wrap.other .bubble { background: var(--wbs-light); border: 1px solid var(--line); border-bottom-left-radius: 5px; box-shadow: var(--shadow-sm); color: var(--ink); }
.msg-author { font-size: 12px; font-weight: 700; color: var(--wbs-red); margin-bottom: 4px; }
.bubble p { margin: 0 0 10px; } .bubble p:last-child { margin-bottom: 0; }
.bubble pre { background: #2c2a2a; color: #f5f2f2; padding: 12px 14px; border-radius: var(--radius-sm); overflow-x: auto; font-size: 13px; position: relative; }
/* Copy button on code blocks (added by ART.enhance) */
.code-copy {
  position: absolute; top: 6px; right: 6px; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08); color: #f5f2f2; border-radius: 6px; padding: 3px 9px;
  font-size: 11px; font-weight: 600; cursor: pointer; opacity: 0; transition: opacity .12s;
}
.bubble pre:hover .code-copy, .code-copy:focus-visible { opacity: 1; }
.code-copy:hover { background: rgba(255,255,255,.18); }
@media (hover: none) { .code-copy { opacity: .8; } }
.bubble code { font-family: ui-monospace, monospace; font-size: .92em; }
.bubble :not(pre) > code { background: var(--wbs-light); padding: 1px 5px; border-radius: 4px; color: var(--wbs-red-mid); }
/* Wide tables scroll INSIDE the bubble instead of pushing the page sideways (the "off-screen white" bug).
   White surface so tables sit as a card on the open canvas. */
.bubble table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 14px; display: block; max-width: 100%; overflow-x: auto; background: var(--white); border-radius: var(--radius-sm); box-shadow: var(--shadow-xs); }
.bubble th, .bubble td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; }
.bubble th { background: var(--wbs-light); color: var(--wbs-red-mid); font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }
.bubble a { color: var(--wbs-red); }
/* Readable markdown: spacing for lists, headings, rules (otherwise replies read as a blob) */
.bubble ul, .bubble ol { margin: 8px 0 12px; padding-left: 22px; }
.bubble li { margin: 5px 0; }
.bubble li > p { margin: 0; }
.bubble li::marker { color: var(--wbs-gray); }
.bubble h1, .bubble h2, .bubble h3, .bubble h4 { margin: 16px 0 6px; line-height: 1.3; font-weight: 700; }
.bubble h1 { font-size: 1.28em; } .bubble h2 { font-size: 1.16em; } .bubble h3 { font-size: 1.06em; }
.bubble hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.bubble blockquote { margin: 8px 0; padding: 4px 12px; border-left: 3px solid var(--wbs-light); color: var(--wbs-gray); }
.bubble > :first-child { margin-top: 0; } .bubble > :last-child { margin-bottom: 0; }
.cursor::after { content: '▋'; color: var(--wbs-red); animation: blink 1s steps(2) infinite; margin-left: 1px; }
@keyframes blink { 0%,50%{opacity:1} 50.01%,100%{opacity:0} }

.typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--wbs-gray); animation: bounce 1.2s infinite; }
.typing span:nth-child(2){ animation-delay:.2s } .typing span:nth-child(3){ animation-delay:.4s }
@keyframes bounce { 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-5px);opacity:1} }

/* Sit the action bar on its own line BELOW the answer, aligned under the bubble
   (avatar 30px + 12px gap) — not floating in the right margin beside it. */
.msg-meta { width: 100%; margin-left: 38px; display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--wbs-gray); }
.msg-actions { display: flex; gap: 6px; }
.msg-actions button { background: transparent; border: 0; color: var(--wbs-gray); padding: 3px; border-radius: 6px; }
.msg-actions button:hover { background: var(--wbs-light); color: var(--wbs-red); }
.msg-actions .ic { width: 15px; height: 15px; }
.msg-actions button.on { color: var(--wbs-red); }
.msg-actions button.on .ic { fill: var(--wbs-red); stroke: var(--wbs-red); } /* filled plum thumb when selected */

/* Artifacts (charts) */
.artifact { border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 12px 0; background: var(--white); overflow: hidden; }
.artifact-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; background: var(--wbs-light); border-bottom: 1px solid var(--line); }
.artifact-label { font-size: 12.5px; font-weight: 600; color: var(--wbs-red); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artifact-tools { display: flex; gap: 6px; flex-shrink: 0; }
.art-btn { font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .3px; color: var(--wbs-red); background: var(--white); border: 1px solid var(--wbs-red); border-radius: 5px; padding: 2px 8px; cursor: pointer; }
.art-btn:hover { background: var(--wbs-red); color: #fff; }
.artifact-canvas-wrap { position: relative; height: 320px; padding: 12px; }
.artifact-error { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--wbs-red); border-radius: var(--radius-sm); background: var(--wbs-light); color: var(--wbs-mid-gray); font-size: 13px; }
/* HTML/SVG live-preview artifacts */
.pv-frame-wrap { background: #fff; }
.pv-frame { display: block; width: 100%; height: 380px; border: 0; }
.pv-tab { opacity: .65; }
.pv-tab.on { opacity: 1; background: var(--wbs-red); color: #fff; }
.preview-artifact pre { border-radius: 0; max-height: 380px; overflow: auto; }

/* Brief / email-summary cards */
.brief-artifact { padding: 4px 0; border: 0; background: transparent; }
.brief-title { font-size: 16px; font-weight: 700; color: var(--wbs-red); margin: 2px 0 10px; }
.brief-section { margin: 0 0 16px; }
.brief-head { font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--wbs-gray); margin: 0 0 8px; }
.brief-email { display: flex; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; background: var(--white); box-shadow: var(--shadow); }
.be-avatar { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--wbs-blush); color: var(--wbs-red); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.be-body { min-width: 0; flex: 1; }
.be-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.be-from { font-weight: 700; font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.be-date { flex: 0 0 auto; font-size: 11.5px; color: var(--wbs-gray); }
.be-subj { font-size: 14px; color: var(--ink); margin-top: 1px; }
.be-prev { font-size: 13px; color: var(--wbs-mid-gray); margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.be-open { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--wbs-red); text-decoration: none; }
.be-open:hover { text-decoration: underline; }
.pill { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; padding: 1px 7px; border-radius: 99px; vertical-align: middle; margin-left: 4px; }
.pill-reply { background: var(--wbs-red); color: #fff; }
.pill-high { background: var(--wbs-blush); color: var(--wbs-red); }
.brief-action { display: flex; gap: 9px; align-items: flex-start; padding: 5px 0; font-size: 14px; color: var(--ink); }
.ba-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--wbs-red); margin-top: 5px; }
.brief-cal { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.brief-cal:last-child { border-bottom: 0; }
.bc-time { flex: 0 0 110px; color: var(--wbs-red); font-weight: 600; font-variant-numeric: tabular-nums; }
.bc-title { color: var(--ink); }
.bc-loc { color: var(--wbs-gray); font-size: 12.5px; }
.modal-host textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-size: 14px; resize: vertical; box-sizing: border-box; }
.modal-host input[type="text"], .modal-host input:not([type]) { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-size: 14px; box-sizing: border-box; }
#noteBody { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
/* Flagged-requests panel (admin) */
#flagsSection { border-left: 3px solid var(--danger); }
.flag-item { padding: 9px 0 9px 12px; border-left: 3px solid var(--danger); margin-bottom: 8px; background: #fdf3f2; border-radius: 0 6px 6px 0; }
.flag-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.flag-cat { font-weight: 700; font-size: 13.5px; color: var(--danger); }
.flag-meta { font-size: 11.5px; color: var(--wbs-gray); font-variant-numeric: tabular-nums; }
.flag-snip { font-size: 13px; font-style: italic; color: var(--wbs-mid-gray); margin-top: 3px; }
.fb-sum { font-size: 14px; margin: 0 0 10px; }
.fb-item { padding: 7px 0 7px 10px; border-left: 3px solid var(--line); margin-bottom: 8px; }
.fb-item.fb-down { border-left-color: var(--danger); }
.fb-item.fb-up { border-left-color: var(--ok); }
.fb-q { font-size: 13.5px; }
.fb-note { font-size: 13px; font-style: italic; margin-top: 2px; }
.fb-meta { font-size: 11.5px; color: var(--wbs-gray); margin-top: 2px; }
.member-list { display: flex; flex-direction: column; max-height: 40vh; overflow-y: auto; margin-bottom: 10px; }
.member-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.member-row em { color: var(--wbs-gray); font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; margin-left: 6px; }
.member-add { display: flex; gap: 8px; }
.member-add input { flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-size: 14px; box-sizing: border-box; }
/* Project panel (files + members) */
.proj-sec { margin-bottom: 18px; }
.proj-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--wbs-red); margin-bottom: 8px; }
.proj-head .muted { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 12px; }
.proj-files { display: flex; flex-direction: column; max-height: 34vh; overflow-y: auto; margin-bottom: 8px; }
.proj-file { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.pf-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-size { flex: 0 0 auto; font-size: 12px; color: var(--wbs-gray); font-variant-numeric: tabular-nums; }
/* Audit log — collapsible per user */
.audit-user { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 8px; background: var(--white); overflow: hidden; }
.audit-user[open] { box-shadow: var(--shadow-xs); }
.audit-user > summary { display: flex; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer; list-style: none; font-size: 14px; }
.audit-user > summary::-webkit-details-marker { display: none; }
.audit-user > summary::before { content: '▸'; color: var(--wbs-gray); font-size: 11px; transition: transform .15s var(--ease); }
.audit-user[open] > summary::before { transform: rotate(90deg); }
.audit-user > summary:hover { background: var(--wbs-light); }
.au-name { font-weight: 600; color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-count { flex: 0 0 auto; font-size: 11.5px; font-weight: 600; color: var(--wbs-red); background: var(--wbs-light); border-radius: 99px; padding: 2px 9px; }
.au-latest { flex: 0 0 auto; font-size: 12px; color: var(--wbs-gray); font-variant-numeric: tabular-nums; }
.audit-rows { padding: 4px 14px 10px 30px; border-top: 1px solid var(--line); }
.audit-row { display: grid; grid-template-columns: 120px 1fr; grid-template-areas: 'when act' 'when tgt'; gap: 0 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; align-items: baseline; }
.audit-row:last-child { border-bottom: 0; }
.audit-when { grid-area: when; color: var(--wbs-gray); font-variant-numeric: tabular-nums; white-space: nowrap; }
.audit-act { grid-area: act; color: var(--wbs-red); font-weight: 600; }
.audit-tgt { grid-area: tgt; color: var(--wbs-mid-gray); overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) { .audit-row { grid-template-columns: 1fr; grid-template-areas: 'when' 'act' 'tgt'; gap: 1px; } .audit-rows { padding-left: 18px; } }
.sources { max-width: 760px; margin: -14px auto 24px; padding-left: 38px; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: src; }
.source-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  background: var(--white); border: 1px solid var(--line); border-radius: 99px; padding: 4px 11px 4px 5px;
  color: var(--ink-soft); text-decoration: none; box-shadow: var(--shadow-xs);
}
/* Numbered like research citations */
.source-chip::before {
  counter-increment: src; content: counter(src);
  width: 16px; height: 16px; border-radius: 50%; background: var(--wbs-light); color: var(--wbs-red);
  font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.source-chip .ic { display: none; }
.source-chip:hover { border-color: var(--wbs-blush); color: var(--wbs-red); box-shadow: var(--shadow-sm); }

/* ── Welcome ── */
.welcome { max-width: 640px; margin: 13vh auto 0; text-align: center; color: var(--ink-soft); }
.welcome-greeting { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 4.2vw, 42px); letter-spacing: .3px; color: var(--ink); margin: 0 0 6px; line-height: 1.12; text-wrap: balance; }
.welcome-greeting::after { content: ''; display: block; width: 44px; height: 3px; background: var(--wbs-red); border-radius: 99px; margin: 14px auto 0; }
.welcome p { font-size: 15px; line-height: 1.55; max-width: 460px; margin: 0 auto; }
.suggestions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.suggestion { position: relative; text-align: left; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 34px 14px 16px; font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--ink); box-shadow: var(--shadow-xs); }
.suggestion:hover { border-color: var(--wbs-blush); box-shadow: var(--shadow-md); transform: translateY(-2px); color: var(--wbs-red); }
.suggestion:active { transform: translateY(0); }
/* Clickability affordance: a chevron that fades/slides in on hover (always shown on touch). */
.suggestion::after { content: '→'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%) translateX(-4px); color: var(--wbs-red); opacity: 0; transition: opacity .16s var(--ease), transform .16s var(--ease); font-size: 15px; }
.suggestion:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (hover: none) { .suggestion::after { opacity: .5; transform: translateY(-50%); } }
/* Category eyebrow on task cards (My day / Knowledge base / Docs) */
.sug-k { display: block; font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--wbs-red); margin-bottom: 3px; }

/* ── Composer — floats on the canvas as the one strong surface on screen ── */
.composer { flex: 0 0 auto; padding: 6px max(20px, env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); border-top: 0; background: transparent; }
/* Tools live INSIDE the composer card now (concept parity): quiet icon buttons in a row
   under the input, send at the right end of the same row. */
.composer-tools { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; width: 100%; margin-top: 2px; }
.tools-spacer { flex: 1; }
.tool { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); background: transparent; border: 0; border-radius: 8px; padding: 6px 7px; font-size: 12.5px; }
.tool .ic { width: 18px; height: 18px; }
.tool:hover { background: var(--wbs-light); color: var(--wbs-red); }
.tool.switch { padding: 6px 9px; }
.tool.switch input { accent-color: var(--wbs-red); }
/* Dictation active: plum pulse so it's obvious the mic is hot */
.tool.rec { background: var(--wbs-light); color: var(--wbs-red); animation: recPulse 1.4s ease-in-out infinite; }
@keyframes recPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(118,19,42,.25); } 50% { box-shadow: 0 0 0 6px rgba(118,19,42,0); } }
@media (prefers-reduced-motion: reduce) { .tool.rec { animation: none; } }
.attach-chips { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; }
.attach-chips:empty { display: none; }
.attach-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; background: var(--wbs-light); color: var(--wbs-red-mid); border-radius: 99px; padding: 4px 10px; }
.attach-chip button { background: transparent; border: 0; color: inherit; }
.attach-chip:hover { background: var(--wbs-blush); }
.img-chip:hover { box-shadow: var(--shadow-sm); }
.img-preview { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }
.img-preview:empty { display: none; }
.img-chip { position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.img-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-chip button { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.bubble-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bubble-imgs img { max-width: 180px; max-height: 180px; border-radius: 8px; display: block; }
/* Drag-and-drop overlay (visual only; chatView catches the drop) */
#chatView { position: relative; }
.dropzone { position: absolute; inset: 8px; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(118,19,42,.12); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); border: 3px dashed var(--wbs-red); border-radius: 12px; pointer-events: none; }
.dropzone[hidden] { display: none; }
.dropzone-inner { background: var(--white); color: var(--wbs-red); font-weight: 700; padding: 14px 22px; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.15); }
.composer-row { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 4px; background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 10px 10px 8px 14px; box-shadow: var(--shadow-md); transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
.composer-row:focus-within { border-color: var(--wbs-blush); box-shadow: var(--ring), var(--shadow-md); }
/* 16px font-size prevents iOS Safari from auto-zooming the page on focus */
#input { width: 100%; border: 0; outline: 0; resize: none; font-family: inherit; font-size: 16px; line-height: 1.5; max-height: 180px; background: transparent; color: var(--ink); padding: 4px 2px 2px; }
.send { flex: 0 0 34px; width: 34px; height: 34px; border: 0; border-radius: 10px; background: linear-gradient(160deg, #841830, var(--wbs-red)); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.send .ic { width: 17px; height: 17px; }
.send:hover { background: linear-gradient(160deg, #8f1a35, #7d142d); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.send:active { transform: translateY(0); }
.send:disabled { background: var(--line); color: var(--wbs-gray); cursor: default; box-shadow: none; transform: none; }
.send.stop { background: var(--wbs-dark-red); }
.composer-foot { max-width: 760px; margin: 8px auto 0; text-align: center; font-size: 11.5px; color: var(--wbs-gray); }

/* ── Admin ── */
.admin-wrap { flex: 1; overflow-y: auto; padding: 28px 24px 40px; max-width: 960px; margin: 0 auto; width: 100%; }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: 14px; margin-bottom: 26px; }
.stat-card { position: relative; background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--wbs-red); border-radius: var(--radius); padding: 16px 18px 18px; box-shadow: var(--shadow-sm); }
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.stat-card .k { font-size: 11px; color: var(--wbs-gray); text-transform: uppercase; letter-spacing: .8px; font-weight: 600; margin-bottom: 8px; }
.stat-card .v { font-size: 30px; font-weight: 700; color: var(--wbs-red); letter-spacing: -.4px; line-height: 1; }
/* Horizontal scroll container so the usage table never pushes the page wide on phones. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }
.usage-table { width: 100%; min-width: 560px; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.usage-table th { background: var(--wbs-red); color: #fff; text-align: left; padding: 11px 16px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
/* Sortable column headers */
.usage-table .th-sort { cursor: pointer; user-select: none; }
.usage-table .th-sort:hover { background: #841830; }
.usage-table .th-sort::after { content: '↕'; opacity: .45; margin-left: 6px; font-size: 11px; }
.usage-table .th-sort.sorted[data-dir="desc"]::after { content: '↓'; opacity: 1; }
.usage-table .th-sort.sorted[data-dir="asc"]::after { content: '↑'; opacity: 1; }
.usage-table td { padding: 11px 16px; border-top: 1px solid var(--line); font-size: 14px; }
.usage-table tbody tr:nth-child(even) td { background: rgba(118,19,42,.03); }
.usage-table tbody tr:hover td { background: var(--wbs-light); }
.usage-table .mini-bar { width: 120px; max-width: 100%; height: 7px; border-radius: 99px; background: var(--wbs-light); overflow: hidden; }
.usage-table .mini-bar i { display: block; height: 100%; background: linear-gradient(90deg, #9a2342, var(--wbs-red)); border-radius: 99px; }
.admin-section { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 22px; box-shadow: var(--shadow-xs); }
.admin-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.admin-section-head h3 { margin: 0; font-size: 16px; color: var(--wbs-red); font-weight: 700; }
.admin-section-title { margin: 10px 0 14px; font-size: 13px; color: var(--wbs-gray); text-transform: uppercase; letter-spacing: .8px; font-weight: 700; }
.admin-hint { font-size: 12.5px; color: var(--wbs-gray); margin: 8px 0 12px; }
.index-status { font-size: 13px; color: var(--ink, #333); line-height: 1.7; }
.index-status .muted { color: var(--wbs-gray); }
.idx-files { max-height: 60vh; overflow-y: auto; }
.idx-sum { margin: 0 0 10px; font-size: 14px; }
.idx-group { margin-bottom: 12px; }
.idx-lib { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--wbs-gray); margin: 8px 0 4px; }
.idx-lib span { opacity: .7; }
.idx-file { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.idx-file a { color: var(--wbs-red); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idx-meta { color: var(--wbs-gray); white-space: nowrap; font-size: 12px; }
/* SharePoint / OneDrive file picker */
.picker { display: flex; flex-direction: column; gap: 10px; }
.picker-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.picker-bar input { flex: 1; min-width: 180px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 14px; }
.picker-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12.5px; min-height: 18px; color: var(--wbs-gray); }
.picker-crumbs .crumb { background: transparent; border: 0; color: var(--wbs-red); cursor: pointer; padding: 2px 4px; font-size: 12.5px; }
.picker-crumbs .sep { opacity: .5; }
.picker-list { max-height: 46vh; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.picker-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 10px 12px; cursor: pointer; font-size: 14px; }
.picker-row:last-child { border-bottom: 0; }
.picker-row:hover { background: var(--wbs-light); }
.picker-ic { flex: 0 0 auto; }
.picker-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-loading { padding: 16px; color: var(--wbs-gray); font-size: 13px; }
/* Prompt templates */
/* Scroll-to-latest button */
.scroll-bottom { position: absolute; right: 18px; bottom: 104px; z-index: 20; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--wbs-red); font-size: 18px; cursor: pointer; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; }
.scroll-bottom[hidden] { display: none; }
.lvl-warn { color: var(--warn); } .lvl-over { color: var(--danger); font-weight: 500; }
.link-btn { background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; font-size: 12px; color: var(--wbs-red); }
.link-btn:hover { border-color: var(--wbs-red); }

/* ── Toasts & modal ── */
.toasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.toast { background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 99px; font-size: 13px; box-shadow: var(--shadow-lg); max-width: 90vw; animation: msgIn .22s var(--ease) both; }
.toast.warn { background: var(--warn); } .toast.over { background: var(--danger); } .toast.ok { background: var(--ok); }
.modal-host { position: fixed; inset: 0; background: rgba(40,15,25,.42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 20px; animation: msgIn .2s var(--ease); }
.modal-host[hidden] { display: none; }
.modal { background: var(--white); border-radius: var(--radius-lg); max-width: 440px; width: 100%; padding: 24px; box-shadow: var(--shadow-lg); animation: msgIn .24s var(--ease) both; max-height: 85vh; max-height: 85dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.modal h3 { margin: 0 0 8px; font-size: 18px; color: var(--wbs-red); }
.modal p { margin: 0 0 16px; color: var(--ink-soft); font-size: 14px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.btn { padding: 9px 17px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--white); font-size: 14px; font-weight: 500; }
.btn:hover { border-color: var(--wbs-blush); background: var(--wbs-light); }
.btn.primary { background: linear-gradient(180deg, #841830, var(--wbs-red)); color: #fff; border-color: var(--wbs-red); }
.btn.primary:hover { background: linear-gradient(180deg, #8f1a35, #7d142d); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn.primary:active { transform: translateY(0); }
.modal input { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; margin-bottom: 16px; }

/* ── Responsive ── */
@media (max-width: 860px) {
  .menu-toggle { display: inline-flex; }
  .wbs-name { font-size: 21px; letter-spacing: 3px; }
  .wbs-ai { font-size: 10px; margin-left: 5px; }
  .wbs-sub-text { font-size: 9px; letter-spacing: 2px; }
  .wbs-rule { width: 16px; }
  .sidebar { position: absolute; z-index: 30; top: 0; bottom: 0; left: 0; transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--shadow); }
  .sidebar.open { transform: translateX(0); }
  .scrim.show { display: block; position: absolute; inset: 0; background: rgba(0,0,0,.3); z-index: 20; }
  .budget-bar { width: 60px; } .budget-label { display: none; }
  .suggestions { grid-template-columns: 1fr; }
  .msg-wrap, .sources, .composer-row, .composer-tools, .composer-foot { max-width: 100%; }
  /* Pin the app to the visual viewport so the composer hugs the keyboard with no white gap
     (paired with the visualViewport translateY handler in app.js). */
  body { position: fixed; left: 0; right: 0; top: 0; width: 100%; }

  /* Touch-friendly sizing (Apple HIG ~44px targets) */
  .sidebar { width: min(86vw, 320px); flex-basis: min(86vw, 320px);
    padding-top: calc(14px + env(safe-area-inset-top)); padding-bottom: calc(14px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch; }
  .send, .send.stop { width: 40px; height: 40px; flex-basis: 40px; }
  .tool { padding: 9px 8px; } /* comfortable touch targets for the in-card tool row */
  .seg { padding: 9px 11px; font-size: 12px; } /* 3 segments (Fast/Smart/Complex) must fit beside the title */
  /* Your own avatar + the edit pencil crowd a phone-width chip — the plum chip already says "you". */
  .msg-wrap.user .avatar.me { display: none; }
  .msg-edit { width: 22px; height: 22px; font-size: 11px; top: -8px; right: 2px; }
  .msg-wrap.user .bubble { padding: 9px 13px; }
  /* Toasts clear the floating composer + home indicator instead of landing on the input */
  .toasts { bottom: calc(128px + env(safe-area-inset-bottom)); }
  .tool { padding: 8px 12px; }
  .convo-item { padding: 12px 10px; }
  .new-chat { padding: 13px 14px; }
  .messages { padding: 16px 14px; }
  .bubble { max-width: 90%; font-size: 16px; }
  .bubble table { display: block; overflow-x: auto; white-space: nowrap; }
  /* Bigger, clearly-tappable action row below each answer on touch screens. */
  .msg-meta { margin-left: 0; gap: 4px; }
  .msg-actions { gap: 2px; }
  .msg-actions button { padding: 8px; }
  .msg-actions .ic { width: 20px; height: 20px; }
  .welcome { margin-top: 6vh; }
  .welcome h1 { font-size: 38px; }
  .modal { padding: 18px; }
  /* Admin header on phones: drop the "Billing period" label (the select is self-explanatory
     and aria-labelled) so title + picker + back button fit the 52px chat-head. */
  .mp-label { display: none; }
  .admin-head-actions { gap: 8px; }
  .month-picker select { max-width: 130px; }
  /* Many attachments: scroll the chip row sideways instead of growing the composer tall. */
  .attach-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .attach-chips .attach-chip { flex: 0 0 auto; }
}

/* Very narrow phones (iPhone SE/mini) — give the welcome screen room to breathe. */
@media (max-width: 400px) {
  .welcome h1 { font-size: 30px; }
  .suggestions { gap: 9px; margin-top: 20px; }
}

/* Don't let :hover styles stick on touch devices */
@media (hover: none) {
  .convo-item:hover { background: transparent; }
  .convo-actions { opacity: 1; } /* no hover on touch — always show rename/delete */
  .suggestion:hover { box-shadow: none; border-color: var(--line); }
  .ghost-btn:hover { background: transparent; color: var(--ink-soft); }
}

/* Keyboard-shortcut cheat sheet */
.kbd-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.kbd-row { display: flex; align-items: center; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.kbd-row:last-child { border-bottom: 0; }
.kbd-keys { flex: 0 0 150px; display: inline-flex; align-items: center; gap: 4px; }
.kbd-keys i { font-style: normal; color: var(--wbs-gray); }
kbd { font-family: inherit; font-size: 12px; font-weight: 600; background: var(--wbs-light); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: 2px 8px; color: var(--ink); }

/* One-time first-run tip under the welcome cards */
.first-tips { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); font-size: 12.5px; color: var(--ink-soft); text-align: left; box-shadow: var(--shadow-xs); }
.first-tips button { flex: 0 0 auto; margin-left: auto; border: 0; background: transparent; color: var(--wbs-gray); font-size: 12px; padding: 2px 4px; }
.first-tips button:hover { color: var(--wbs-red); }