:root {
  /* The Twentyeight palette, lifted from the Copilot's design tokens.
     Coral is the interactive colour; peach is the warm-alert ramp, kept
     distinct from coral so a staleness warning does not read as a button. */
  --coral-50: #FDEEEC; --coral-100: #F8ABA0; --coral-200: #F48273; --coral-300: #F1665D;
  --peach-50: #FFF0EB; --peach-300: #FF8252;
  --snow-00: #FCFCFC; --snow-50: #FAFAFA; --snow-100: #F2F2F2; --snow-200: #CCCCCC;
  --charcoal-100: #808080; --charcoal-200: #4D4D4D;
  --hairline: #EBEBEB; --hairline-cool: #E4E6EA;
  --ink: #222222; --ink-soft: #2D2D2D;

  --bg: var(--snow-50);
  --panel: #fff;
  --line: var(--hairline);
  --ink-text: var(--ink);
  --mute: var(--charcoal-100);
  --accent: var(--coral-300);
  --accent-soft: var(--coral-50);
  /* The palette has no dark warm tone that passes contrast as body text,
     so a warning is peach for the glyph and charcoal for the words rather
     than a colour invented to sit between them. */
  --warn: var(--charcoal-200);
  --warn-mark: var(--peach-300);
  --warnbg: var(--peach-50);

  /* The readable measure for an answer. The sidebar keeps its own
     width; only the conversation is centred, so a wide monitor does not
     stretch a procedure across 2000px. */
  --col: 860px;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink-text);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.shell { display: grid; grid-template-columns: 274px 1fr; height: 100vh; }

.sidebar {
  background: var(--panel); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; overflow: hidden;
}
.brand {
  display: flex; align-items: baseline; gap: 7px;
  padding: 18px 18px 15px; text-decoration: none;
}
.brand img { height: 19px; width: auto; display: block; }
.brand .wiki {
  font-size: 17px; font-weight: 500; color: var(--accent);
  letter-spacing: -.01em; line-height: 1;
}
.label {
  padding: 10px 18px 6px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--mute); display: flex; justify-content: space-between;
}
.newchat { color: var(--accent); text-decoration: none; font-weight: 600; }
.section {
  display: flex; justify-content: space-between; padding: 7px 18px;
  text-decoration: none; color: var(--ink-text); font-size: 14px;
}
.section:hover { background: var(--snow-100); }
.section.active { background: var(--coral-50); color: var(--accent); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); }
.count { color: var(--mute); font-variant-numeric: tabular-nums; font-size: 12px; }
.divider { height: 1px; background: var(--line); margin: 12px 0; }
.chatlist { flex: 1; overflow-y: auto; }
.group { padding: 8px 18px 2px; font-size: 11px; color: var(--mute); }
.chat { display: flex; align-items: center; gap: 4px; padding: 5px 12px 5px 18px; }
.chat:hover { background: var(--snow-100); }
.chat.active { background: var(--coral-50); }
.chat a { flex: 1; color: var(--ink-text); text-decoration: none; font-size: 13.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act { border: 0; background: none; color: var(--mute); cursor: pointer; font-size: 13px; padding: 2px 4px; }
.act:hover { color: var(--ink-text); }
.empty { padding: 10px 18px; color: var(--mute); font-size: 12px; }

/* Two rows: the name can be long and the sidebar is only 238px wide inside
   its padding, so sharing one line with an action pushed the two apart and
   truncated unpredictably. The name owns its line; the version and the
   action share the next one. */
.foot { border-top: 1px solid var(--line); padding: 11px 18px 13px; }
.foot .name {
  color: var(--ink-text); font-size: 13px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.foot .meta {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-top: 2px; font-size: 11.5px; color: var(--mute);
}
.foot .version { white-space: nowrap; }
.signout { color: var(--accent); text-decoration: none; flex: none; }
.signout:hover { text-decoration: underline; }

.main { display: flex; flex-direction: column; overflow: hidden; }
.topbar { padding: 16px 28px; border-bottom: 1px solid var(--line); background: var(--panel); }
.topbar h1 { margin: 0; font-size: 17px; }
.scope { color: var(--mute); font-size: 12.5px; margin-top: 2px; }
.thread { flex: 1; overflow-y: auto; padding: 26px 28px 10px; }
.wrap { width: 100%; max-width: var(--col); margin: 0 auto; }
@media (min-width: 1800px) { :root { --col: 980px; } }
.starters .hint { color: var(--mute); }
.starter {
  display: block; margin: 7px 0; padding: 9px 13px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 9px; cursor: pointer;
  text-align: left; font-size: 14px; color: var(--ink-text); width: 100%;
}
.starter:hover { border-color: var(--accent); color: var(--accent); }

.turn { margin-bottom: 22px; }
.who { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--mute); margin-bottom: 5px; }

/* The question sits right in a bubble; the answer stays left as prose.
   Answers here are long and structured - procedures, nested steps - and a
   bubble makes that harder to read, so only the question gets one. */
.turn.user { max-width: 560px; margin-left: auto; text-align: right; }
.turn.user .who { text-align: right; }
.turn.user .body {
  display: inline-block; text-align: left;
  background: var(--coral-50); border: 1px solid var(--coral-100);
  padding: 10px 14px; border-radius: 14px 14px 4px 14px;
}
.turn.bot { margin-right: auto; }
.body { white-space: pre-wrap; }
.body.md { white-space: normal; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 10px; }
.md ul, .md ol { margin: 0 0 11px; padding-left: 22px; }
.md li { margin: 3px 0; }
.md li > ul, .md li > ol { margin: 4px 0 2px; }
.md h1, .md h2, .md h3, .md h4 {
  margin: 16px 0 7px; font-size: 14.5px; font-weight: 650; letter-spacing: -.005em;
}
.md h1 { font-size: 16px; }
.md strong { font-weight: 650; }
.md code {
  background: var(--snow-100); border: 1px solid var(--line); border-radius: 4px;
  padding: 1px 5px; font-size: 12.8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.md pre {
  background: var(--snow-00); border: 1px solid var(--line); border-radius: 8px;
  padding: 11px 13px; overflow-x: auto; margin: 0 0 11px;
}
.md pre code { background: none; border: 0; padding: 0; font-size: 12.5px; }
.md blockquote {
  margin: 0 0 11px; padding: 2px 0 2px 13px;
  border-left: 3px solid var(--line); color: var(--mute);
}
.md a { color: var(--accent); }
.md table { border-collapse: collapse; margin: 0 0 11px; font-size: 13.5px; }
.md th, .md td { border: 1px solid var(--line); padding: 5px 9px; text-align: left; }
.md th { background: var(--snow-00); font-weight: 600; }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.turn.redirect .body, .turn.gap .body {
  background: var(--warnbg); border: 1px solid var(--peach-300); border-radius: 10px;
  padding: 13px 15px; color: var(--warn);
}
.status { color: var(--mute); font-size: 13.5px; margin: 3px 0; }
.status.doc { color: var(--accent); }

.cites { margin-top: 13px; display: grid; gap: 9px; }
.cite { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; }
.cite .t { font-weight: 600; font-size: 14px; }
.cite .m { color: var(--mute); font-size: 12.5px; margin-top: 2px; }
.warn { color: var(--warn); margin-right: 10px; }
.warn::first-letter { color: var(--warn-mark); font-size: 1.1em; }
.open { display: inline-block; margin-top: 7px; font-size: 12.5px; color: var(--accent); text-decoration: none; }
.elsewhere { margin-top: 11px; }
.elsewhere ul { margin: 5px 0 9px; padding-left: 19px; color: var(--mute); font-size: 13.5px; }
.go {
  background: var(--accent); color: #fff; border: 0; border-radius: 8px;
  padding: 8px 13px; cursor: pointer; font-size: 13.5px;
}

.ask { padding: 14px 28px 20px; border-top: 1px solid var(--line); background: var(--panel); }
.ask .wrap { display: flex; gap: 9px; }
.ask input {
  flex: 1; padding: 11px 14px; border: 1px solid var(--line);
  border-radius: 10px; font-size: 14.5px; background: var(--bg);
}
.ask input:focus { outline: none; border-color: var(--accent); }
.ask button { padding: 11px 20px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; cursor: pointer; font-size: 14.5px; }
.ask button:disabled { opacity: .5; cursor: default; }

/* Sign-in */
body.signin { display: grid; place-items: center; min-height: 100vh; background: var(--bg); }
.signin .card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 40px 44px; text-align: center; max-width: 380px;
}
/* Stacked, not inline: an inline img and an inline-block button share a
   line, which put the sign-in button beside the wordmark. */
.signin .card img { height: 26px; width: auto; display: block; margin: 0 auto; }
.signin p { color: var(--mute); margin: 18px 0 0; font-size: 13.5px; }
.signin .go {
  display: block; width: fit-content; margin: 28px auto 0;
  text-decoration: none; padding: 10px 22px; font-size: 14.5px;
}