/* Foundation: reset, type, focus, scrollbars, corners, motion, utilities. */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { height: 100%; }
body {
  margin: 0; min-height: 100%; background: var(--bg); color: var(--ink);
  font: 14px/22px var(--font-ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  text-autospace: normal;
}
#root { height: 100dvh; }
h1, h2, h3, h4, p, ul, ol, figure, fieldset { margin: 0; }
fieldset { padding: 0; border: 0; min-width: 0; }
ul, ol { padding: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
a { color: var(--accent); text-decoration: none; }
code, pre, kbd, .mono { font-family: var(--font-code); }
pre, code, .mono, .code-block, .terminal, .diff { text-autospace: no-autospace; }
img { max-width: 100%; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
dialog { color: inherit; }

/* Focus is always visible for the keyboard; text fields show an accent border
   instead of a ring. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.control:focus-visible, .composer__draft:focus-visible { outline: none; }

/* Corners inherit the superellipse where supported; circles and pills stay round. */
@supports (corner-shape: superellipse(1.5)) {
  *, *::before, *::after { corner-shape: superellipse(1.5); }
  .round, .btn--icon.round, .dot, .spinner, .switch__track, .switch__thumb, .tag, .pill, .send, .toast, .avatar { corner-shape: round; }
}

/* 5px pill scrollbars on a transparent track. */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
  .spinner, .boot__spinner { animation-duration: 1s !important; }
}

/* Type roles */
.text-xl { font: 600 24px/32px var(--font-ui); }
.text-l { font: 500 20px/28px var(--font-ui); }
.text-m { font: 500 16px/28px var(--font-ui); }
.text-base { font: 400 16px/24px var(--font-ui); }
.text-s { font: 400 14px/22px var(--font-ui); }
.text-xs { font: 400 13px/20px var(--font-ui); }
.text-xxs { font: 400 12px/18px var(--font-ui); }
.text-xxxs { font: 400 11px/14px var(--font-ui); }
.text-secondary { color: var(--ink-2); }
.text-tertiary { color: var(--ink-3); }
.text-caption { color: var(--ink-4); }
.text-bad { color: var(--bad); }
.text-warn { color: var(--warn-ink); }
.text-ok { color: var(--ok); }
.strong { font-weight: 500; }

/* Layout utilities */
.stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.stack--tight { gap: 6px; }
.stack--loose { gap: 20px; }
.row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.row--wrap { flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.grow { flex: 1 1 auto; min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrap-anywhere { overflow-wrap: anywhere; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.notice { padding: 10px 14px; border-radius: var(--radius-lg); background: var(--module); font: 400 13px/20px var(--font-ui); color: var(--ink-2); }
.notice--warn { background: var(--warn-soft); color: var(--warn-ink); }
.notice--bad { background: var(--bad-soft); color: var(--bad); }
.hairline { border: 0; border-top: .5px solid var(--line-2); margin: 0; }

/* Markdown at the content size; the page's h1 is the conversation title, so
   a document heading renders one level down. */
.markdown { font-size: var(--content-size); line-height: calc(24px + var(--content-delta)); overflow-wrap: anywhere; }
.markdown > :first-child { margin-top: 0; }
.markdown > :last-child { margin-bottom: 0; }
.markdown p, .markdown ul, .markdown ol, .markdown blockquote, .markdown pre, .markdown table { margin: 0 0 12px; }
.markdown p { white-space: pre-wrap; }
.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 { margin: 20px 0 8px; font-weight: 700; }
.markdown h1 { font-size: calc(21px + var(--content-delta)); line-height: calc(30px + var(--content-delta)); }
.markdown h2 { font-size: calc(19px + var(--content-delta)); line-height: calc(28px + var(--content-delta)); }
.markdown h3 { font-size: calc(18px + var(--content-delta)); line-height: calc(26px + var(--content-delta)); }
.markdown h4, .markdown h5, .markdown h6 { font-size: var(--content-size); font-weight: 600; }
.markdown strong { font-weight: 600; }
.markdown ul, .markdown ol { padding-left: 24px; }
.markdown li { margin: 4px 0; }
.markdown blockquote { border-left: 3px solid var(--line-3); padding-left: 14px; color: var(--ink-2); }
.markdown a { color: var(--accent); font-weight: 500; }
.markdown a:hover, .markdown a:focus-visible { text-decoration: underline dotted; text-underline-offset: 3px; }
.markdown code { font: 400 12px/19px var(--font-code); background: var(--code-inline); border-radius: var(--radius-xs); padding: 1px 4px; }
.markdown pre, .code-block { font: 400 11px/19px var(--font-code); background: var(--code-block); border-radius: var(--radius-lg); padding: 12px 14px; white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; max-height: 420px; }
.markdown pre code { background: none; padding: 0; font: inherit; }
.markdown table { border-collapse: collapse; font-size: var(--content-secondary); line-height: 22px; }
.markdown th, .markdown td { border: .5px solid var(--line-3); padding: 4px 10px; text-align: left; }
.markdown th { font-weight: 500; }
.markdown hr { border: 0; border-top: .5px solid var(--line-2); margin: 16px 0; }
.markdown img { border-radius: var(--radius-md); }
.markdown--compact { font-size: var(--content-secondary); line-height: 20px; color: var(--ink-3); }
.markdown--compact h1, .markdown--compact h2, .markdown--compact h3, .markdown--compact h4 { font-size: inherit; font-weight: 600; margin: 8px 0 4px; }
.markdown--compact a { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }