/* Rivet — Amero Steel Supply
   Palette is Amero's: orange #F97316 on charcoal. Legibility outranks the
   effect everywhere; this gets read on a plant floor, sometimes on a tablet,
   sometimes by someone who started on Monday. */

:root {
  --orange:        #F97316;
  --orange-soft:   #FFF1E6;
  --orange-press:  #EA6A0C;

  --bg:            #FAF9F8;
  --surface:       #FFFFFF;
  --surface-2:     #F3F1EF;
  --sidebar-bg:    #22201E;
  --sidebar-fg:    #E8E4E0;
  --sidebar-dim:   #9A938C;
  --sidebar-hover: #302D2A;

  --text:          #1C1A18;
  --text-dim:      #6B645E;
  --text-faint:    #948C85;
  --border:        #E4E0DC;
  --border-strong: #D2CCC6;

  --ok:            #16A34A;
  --warn:          #D97706;
  --bad:           #DC2626;

  --radius:        12px;
  --radius-lg:     16px;
  --sidebar-w:     264px;
  --panel-w:       420px;
  --measure:       46rem;

  --shadow-sm: 0 1px 2px rgba(28,26,24,.06), 0 1px 3px rgba(28,26,24,.04);
  --shadow-md: 0 4px 16px rgba(28,26,24,.09), 0 1px 3px rgba(28,26,24,.05);
  --shadow-lg: 0 12px 40px rgba(28,26,24,.16);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas,
          "Liberation Mono", monospace;
}

[data-theme="dark"] {
  --bg:            #171615;
  --surface:       #201F1D;
  --surface-2:     #2A2826;
  --sidebar-bg:    #100F0F;
  --sidebar-fg:    #E8E4E0;
  --sidebar-dim:   #857E78;
  --sidebar-hover: #232120;

  --orange-soft:   #351D0C;

  --text:          #EDE9E5;
  --text-dim:      #A79F98;
  --text-faint:    #7C746D;
  --border:        #322F2D;
  --border-strong: #423E3B;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.6);
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --bg:            #171615;
    --surface:       #201F1D;
    --surface-2:     #2A2826;
    --sidebar-bg:    #100F0F;
    --sidebar-fg:    #E8E4E0;
    --sidebar-dim:   #857E78;
    --sidebar-hover: #232120;
    --orange-soft:   #351D0C;
    --text:          #EDE9E5;
    --text-dim:      #A79F98;
    --text-faint:    #7C746D;
    --border:        #322F2D;
    --border-strong: #423E3B;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 4px 16px rgba(0,0,0,.45);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.6);
  }
}

* { box-sizing: border-box; }

/* Several controls below set display:grid, which would otherwise beat the
   hidden attribute on equal specificity and leave stop/close buttons on
   screen. Keep this ahead of them and let hidden mean hidden. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--font);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button, textarea { font: inherit; color: inherit; }

::selection { background: rgba(249,115,22,.24); }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 6px;
}

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  height: 100dvh;
}

/* ───────────────────────────── sidebar ───────────────────────────── */

.sidebar {
  grid-column: 1;
  background: var(--sidebar-bg);
  color: var(--sidebar-fg);
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 14px 12px;
  gap: 12px;
  z-index: 40;
}

.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 4px 0;
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* Rivet is Amero's real mascot artwork, and it carries its own hard hat in the
   same orange plus its own outline. An orange badge behind it fought both, so
   the mark now sits on the sidebar directly. */
.brand-mark {
  width: 36px; height: 36px;
  flex: none;
  display: grid; place-items: center;
}
.brand-mark img { width: 36px; height: 36px; object-fit: contain; }

.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.brand-text strong { font-size: 16px; letter-spacing: .1px; }
.brand-text small { font-size: 11.5px; color: var(--sidebar-dim); }

/* .icon-btn sets display:grid further down, so this needs the extra class to
   stay hidden on desktop. The media query below turns it back on. */
.sidebar .sidebar-close { display: none; color: var(--sidebar-dim); }
.sidebar .sidebar-close:hover { background: var(--sidebar-hover); color: var(--sidebar-fg); }

.new-chat {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--orange);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .13s ease;
}
.new-chat:hover { background: var(--orange-press); }
.new-chat svg { width: 17px; height: 17px; flex: none; }

.convo-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-right: 2px;
}
.convo-list::-webkit-scrollbar { width: 8px; }
.convo-list::-webkit-scrollbar-thumb {
  background: #3A3633; border-radius: 4px;
}

.convo-group {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--sidebar-dim);
  padding: 14px 8px 5px;
  font-weight: 600;
}
.convo-group:first-child { padding-top: 4px; }

.convo {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 8px 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--sidebar-fg);
  background: none;
  border: 0;
  text-align: left;
  width: 100%;
  transition: background .1s ease;
}
.convo:hover { background: var(--sidebar-hover); }
.convo.active { background: var(--sidebar-hover); }
.convo.active::before {
  content: ""; width: 3px; height: 15px; border-radius: 2px;
  background: var(--orange); margin-left: -6px; margin-right: 3px; flex: none;
}
.convo-label {
  flex: 1; min-width: 0;
  font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.convo-del {
  flex: none; opacity: 0;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 0; background: none; border-radius: 5px;
  color: var(--sidebar-dim); cursor: pointer;
}
.convo-del svg { width: 13px; height: 13px; }
.convo:hover .convo-del { opacity: 1; }
.convo-del:hover { background: #45403C; color: #fff; }

.convo-empty {
  color: var(--sidebar-dim);
  font-size: 13px;
  padding: 10px;
  line-height: 1.5;
}

/* ───────────────── waiting-to-be-filed queue button ───────────────── */

.queue-btn {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  margin-top: 2px;
  padding: 9px 10px;
  border: 1px dashed #3D3936;
  border-radius: 9px;
  background: none;
  color: var(--sidebar-dim);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  flex: none;
}
.queue-btn:hover { background: var(--sidebar-hover); color: var(--sidebar-fg); }
.queue-btn svg { width: 16px; height: 16px; flex: none; }
.queue-btn span { flex: 1; }
.queue-count {
  font-style: normal;
  font-weight: 700;
  font-size: 11.5px;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--orange);
  color: #fff;
  text-align: center;
}

/* ───────────────────────── gap callout ─────────────────────────────── */

/* Shown when an answer says something is not written down. That is the one
   moment the reader knows something Rivet does not - so ask them then. */
.gap {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 4px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--orange) 40%, var(--border));
  border-left: 3px solid var(--orange);
  border-radius: var(--radius);
  background: var(--orange-soft);
  font-size: 13.5px;
}
.gap p { margin: 0; flex: 1; min-width: 190px; }
.gap strong { font-weight: 660; }

.btn {
  padding: 8px 15px;
  border: 0; border-radius: 9px;
  background: var(--orange); color: #fff;
  font-size: 13.5px; font-weight: 620;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--orange-press); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-quiet {
  padding: 8px 15px;
  border: 1px solid var(--border-strong); border-radius: 9px;
  background: none; color: var(--text-dim);
  font-size: 13.5px; cursor: pointer;
}
.btn-quiet:hover { background: var(--surface-2); color: var(--text); }

/* ───────────────────────────── modal ───────────────────────────────── */

.modal {
  position: fixed; inset: 0;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(20,18,17,.55);
  z-index: 80;
}
.modal.open { display: grid; }
.modal-card {
  width: min(560px, 100%);
  max-height: 90dvh;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.modal-head {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 14px 13px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-head h2 { margin: 0; font-size: 17px; letter-spacing: -.01em; }
.modal-body { padding: 18px 20px 20px; overflow-y: auto; }
.modal-lead {
  margin: 0 0 16px;
  padding: 10px 13px;
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 13.5px;
}
.modal-lead b { color: var(--text); font-weight: 620; }
.modal-body label {
  display: block;
  font-size: 12.5px; font-weight: 650;
  margin: 0 0 5px;
  color: var(--text-dim);
}
.modal-body input, .modal-body textarea {
  width: 100%;
  padding: 10px 12px;
  margin: 0 0 15px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  resize: vertical;
}
.modal-body input:focus, .modal-body textarea:focus {
  outline: 0; border-color: var(--orange);
}
.modal-note {
  margin: 0 0 16px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-dim);
}
.modal-actions { display: flex; gap: 9px; justify-content: flex-end; }
.modal-msg {
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 9px;
  font-size: 13.5px;
}
.modal-msg.good {
  background: color-mix(in srgb, var(--ok) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--border));
}
.modal-msg.bad {
  background: color-mix(in srgb, var(--bad) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--bad) 40%, var(--border));
}

/* ───────────────────────── queue entries ───────────────────────────── */

.qitem {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.qitem:last-child { border-bottom: 0; }
.qitem h3 { margin: 0 0 3px; font-size: 14.5px; line-height: 1.4; }
.qmeta { font-size: 12px; color: var(--text-faint); margin-bottom: 9px; }
.qmeta b { color: var(--text-dim); font-weight: 620; }
.qasked {
  margin: 0 0 9px;
  padding-left: 11px;
  border-left: 2px solid var(--border-strong);
  color: var(--text-dim);
  font-size: 13px;
}
.qtext {
  white-space: pre-wrap;
  font-size: 14px;
  margin-bottom: 11px;
  overflow-wrap: anywhere;
}
.qactions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.qactions input {
  flex: 1; min-width: 130px;
  padding: 7px 10px;
  border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 13px;
}
.qstate {
  display: inline-block;
  padding: 2px 9px; border-radius: 20px;
  font-size: 11.5px; font-weight: 620;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
}
.qstate.filed { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); }
.qstate.declined { color: var(--text-faint); }
.qempty { color: var(--text-dim); font-size: 14px; line-height: 1.6; }

.sidebar-foot {
  flex: none;
  border-top: 1px solid #2E2B29;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ─────────────────── language + text size controls ─────────────────── */

.prefs { display: flex; flex-direction: column; gap: 3px; }
.pref {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 9px;
  border-radius: 8px;
  color: var(--sidebar-dim);
  font-size: 13px;
}
.pref:hover { background: var(--sidebar-hover); }
.pref svg { width: 16px; height: 16px; flex: none; }
.pref select {
  flex: 1; min-width: 0;
  border: 0; background: none;
  color: var(--sidebar-dim);
  font: inherit; font-size: 13px;
  cursor: pointer;
  padding: 2px 0;
}
.pref select:hover { color: var(--sidebar-fg); }
.pref select option { background: #201F1D; color: #E8E4E0; }
.pref-label { flex: 1; }
.step {
  flex: none;
  min-width: 26px; height: 24px;
  border: 1px solid #3D3936; border-radius: 6px;
  background: none; color: var(--sidebar-dim);
  font-size: 12px; cursor: pointer; line-height: 1;
}
.step sup { font-size: 9px; }
.step:hover { background: #35312E; color: var(--sidebar-fg); }

/* Text size. Set on <html> so rem-based sizing scales with it; the sidebar is
   deliberately left alone — this is for reading answers on a bright floor, not
   for inflating the furniture. */
:root { --answer-scale: 1; }
.prose, .msg-user .bubble { font-size: calc(1em * var(--answer-scale)); }

/* ────────────────────────── read aloud ─────────────────────────────── */

.act.speaking { color: var(--orange); }
.act.speaking svg { animation: pulse-fade 1.1s ease-in-out infinite; }
@keyframes pulse-fade { 50% { opacity: .35; } }

.theme-toggle {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px;
  border: 0; border-radius: 8px;
  background: none; color: var(--sidebar-dim);
  font-size: 13px; cursor: pointer; text-align: left;
}
.theme-toggle:hover { background: var(--sidebar-hover); color: var(--sidebar-fg); }
.theme-toggle svg { width: 16px; height: 16px; flex: none; }
.ico-moon { display: none; }
[data-theme="dark"] .ico-sun { display: none; }
[data-theme="dark"] .ico-moon { display: block; }
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .ico-sun { display: none; }
  [data-theme="auto"] .ico-moon { display: block; }
}

.status {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px;
  color: var(--sidebar-dim);
  padding: 2px 9px 2px;
  line-height: 1.45;
}
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-faint); flex: none;
}
.dot.ok   { background: var(--ok); }
.dot.warn { background: var(--warn); }
.dot.bad  { background: var(--bad); }

.scrim { display: none; }

/* ────────────────────────────── main ─────────────────────────────── */

.main {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg);
}

.topbar {
  flex: none;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(8px);
}
.topbar-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-spacer { flex: 1; }

.icon-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: none; color: var(--text-dim);
  cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn svg { width: 19px; height: 19px; }
.topbar .menu-btn { display: none; }

.thread-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Deliberately not scroll-behavior: smooth. Answers stream in many small
     updates, and an animated scroll never catches up with them. */
}

.thread {
  max-width: var(--measure);
  margin: 0 auto;
  /* Bottom padding keeps the last line of an answer off the composer, which
     floats over the end of the scroll area. */
  padding: 26px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* ─────────────────────────── empty state ─────────────────────────── */

.welcome {
  padding: 6vh 0 20px;
  text-align: center;
}
.welcome-mark {
  width: 104px; height: 104px;
  margin: 0 auto 14px;
  display: grid; place-items: center;
}
.welcome-mark img { width: 104px; height: 104px; object-fit: contain; }
.welcome h1 {
  margin: 0 0 8px;
  font-size: 27px;
  letter-spacing: -.015em;
  font-weight: 680;
}
.welcome-sub {
  margin: 0 auto 26px;
  max-width: 34rem;
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.65;
}

.starters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 9px;
  text-align: left;
}
.starter {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
  text-align: left;
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.starter:hover {
  border-color: var(--orange);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.starter::after {
  content: "→";
  margin-left: auto;
  color: var(--orange);
  opacity: 0;
  transition: opacity .12s ease;
  font-size: 15px;
}
.starter:hover::after { opacity: 1; }

/* ───────────────────────────── messages ──────────────────────────── */

.msg { display: flex; flex-direction: column; gap: 9px; }

.msg-user { align-items: flex-end; }
.msg-user .bubble {
  background: var(--orange);
  color: #fff;
  padding: 11px 15px;
  border-radius: 16px 16px 5px 16px;
  max-width: 84%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: var(--shadow-sm);
}

.msg-rivet { align-items: stretch; }

.rivet-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 650;
  color: var(--text-dim);
}
.rivet-avatar {
  width: 24px; height: 24px; flex: none;
  display: grid; place-items: center;
}
.rivet-avatar img { width: 24px; height: 24px; object-fit: contain; }

.prose { overflow-wrap: anywhere; }
.prose > *:first-child { margin-top: 0; }
.prose > *:last-child { margin-bottom: 0; }
.prose p { margin: 0 0 .85em; }
.prose h1, .prose h2, .prose h3 {
  margin: 1.35em 0 .5em; line-height: 1.3; letter-spacing: -.01em;
}
.prose h1 { font-size: 1.3em; }
.prose h2 { font-size: 1.16em; }
.prose h3 { font-size: 1.04em; }
.prose ul, .prose ol { margin: 0 0 .9em; padding-left: 1.35em; }
.prose li { margin: .3em 0; }
.prose li::marker { color: var(--orange); }
.prose strong { font-weight: 660; }
.prose a { color: var(--orange); text-underline-offset: 2px; }
.prose code {
  font-family: var(--mono);
  font-size: .885em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: .1em .34em;
  border-radius: 5px;
}
.prose pre {
  margin: 0 0 .9em;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
}
.prose pre code { background: none; border: 0; padding: 0; font-size: .87em; }
.prose blockquote {
  margin: 0 0 .9em;
  padding: .1em 0 .1em 14px;
  border-left: 3px solid var(--orange);
  color: var(--text-dim);
}
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 1.4em 0; }

.table-wrap { overflow-x: auto; margin: 0 0 .95em; }
.prose table { border-collapse: collapse; width: 100%; font-size: .93em; }
.prose th, .prose td {
  border: 1px solid var(--border);
  padding: 7px 11px;
  text-align: left;
  vertical-align: top;
}
.prose th { background: var(--surface-2); font-weight: 650; }

/* inline citation chip */
.cite {
  display: inline-flex; align-items: center;
  gap: 4px;
  vertical-align: baseline;
  margin: 0 1px;
  padding: .06em .45em .1em;
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  background: var(--surface);
  color: var(--text-dim);
  font-size: .78em;
  font-weight: 560;
  line-height: 1.5;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .12s, color .12s, background .12s;
}
.cite:hover {
  border-color: var(--orange);
  background: var(--orange-soft);
  color: var(--orange);
}
.cite::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--orange);
  flex: none;
}

/* streaming caret */
.caret {
  display: inline-block;
  width: 2px; height: 1.05em;
  vertical-align: text-bottom;
  background: var(--orange);
  margin-left: 2px;
  animation: blink 1.05s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }

/* thinking */
.thinking {
  display: flex; align-items: center; gap: 8px;
  color: var(--text-faint);
  font-size: 13.5px;
}
.thinking .bead {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange);
  animation: bob 1.15s ease-in-out infinite;
}
.thinking .bead:nth-child(2) { animation-delay: .15s; }
.thinking .bead:nth-child(3) { animation-delay: .3s; }
@keyframes bob {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

/* sources strip */
.sources {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-top: 2px;
}
.sources-label {
  width: 100%;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-faint);
  font-weight: 600;
  margin-bottom: 1px;
}
.source-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
  max-width: 100%;
  transition: border-color .12s, color .12s;
}
.source-chip:hover { border-color: var(--orange); color: var(--orange); }
.source-chip span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.source-chip svg { width: 12px; height: 12px; flex: none; opacity: .7; }

/* message actions */
.actions {
  display: flex; gap: 2px;
  opacity: 0;
  transition: opacity .13s ease;
}
.msg-rivet:hover .actions, .actions:focus-within { opacity: 1; }
.act {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px;
  border: 0; border-radius: 7px;
  background: none; color: var(--text-faint);
  font-size: 12px; cursor: pointer;
}
.act:hover { background: var(--surface-2); color: var(--text); }
.act svg { width: 13px; height: 13px; }

.err {
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--bad) 35%, var(--border));
  border-left: 3px solid var(--bad);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bad) 6%, var(--surface));
  color: var(--text);
  font-size: 14px;
}

/* ───────────────────────────── composer ──────────────────────────── */

.composer-wrap {
  flex: none;
  padding: 20px 24px 14px;
  /* Opaque well past the top of the input so text scrolling underneath fades
     out instead of showing through it. */
  background: linear-gradient(to top, var(--bg) 0%, var(--bg) 76%, transparent 100%);
}

.composer {
  position: relative;
  max-width: var(--measure);
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 8px 8px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  transition: border-color .14s ease;
}
.composer:focus-within { border-color: var(--orange); }

.composer textarea {
  flex: 1;
  border: 0;
  outline: 0;
  resize: none;
  background: none;
  padding: 8px 0;
  max-height: 200px;
  line-height: 1.55;
  overflow-y: auto;
}
.composer textarea::placeholder { color: var(--text-faint); }

.mic {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: none; color: var(--text-dim);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.mic:hover { background: var(--surface-2); color: var(--text); }
.mic svg { width: 19px; height: 19px; }

/* Speech is unavailable in this browser. Shown, not hidden, so tapping it
   explains itself rather than doing nothing. */
.mic.off { color: var(--text-faint); opacity: .5; }
.mic.off::after {
  content: "";
  position: absolute;
  width: 22px; height: 1.6px;
  background: currentColor;
  transform: rotate(-45deg);
  border-radius: 1px;
  pointer-events: none;
}
.mic { position: relative; }

.mic.live {
  background: var(--orange);
  color: #fff;
  animation: mic-pulse 1.5s ease-out infinite;
}
@keyframes mic-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(249,115,22,.55); }
  100% { box-shadow: 0 0 0 12px rgba(249,115,22,0); }
}

.send {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--orange); color: #fff;
  cursor: pointer;
  transition: background .12s, opacity .12s;
}
.send:hover { background: var(--orange-press); }
.send:disabled { opacity: .35; cursor: default; background: var(--orange); }
.send svg { width: 18px; height: 18px; }
.send.stop { background: var(--text); }

.composer-note {
  max-width: var(--measure);
  margin: 8px auto 0;
  text-align: center;
  font-size: 11.5px;
  color: var(--text-faint);
}

/* ─────────────────────────── source panel ────────────────────────── */

.source-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(var(--panel-w), 100vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transform: translateX(101%);
  transition: transform .22s cubic-bezier(.32,.72,0,1);
  display: flex;
  flex-direction: column;
  z-index: 60;
}
.source-panel.open { transform: none; }

.source-head {
  flex: none;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 12px 18px;
  border-bottom: 1px solid var(--border);
}
.source-title { font-weight: 660; font-size: 15px; line-height: 1.35; }
.source-path {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: 3px;
  overflow-wrap: anywhere;
}
.source-ask {
  margin: 9px 0 0 -8px;
  color: var(--orange);
}
.source-ask:hover { background: var(--orange-soft); }
.source-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 18px;
  font-size: 14.5px;
}
.source-body .prose { max-width: none; }

/* ───────────────────────────── responsive ────────────────────────── */

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(300px, 86vw);
    transform: translateX(-101%);
    transition: transform .22s cubic-bezier(.32,.72,0,1);
  }
  .sidebar.open { transform: none; }
  .sidebar .sidebar-close { display: grid; }

  .main { grid-column: 1; }
  .topbar .menu-btn { display: grid; }

  .scrim {
    display: block;
    position: fixed; inset: 0;
    background: rgba(20,18,17,.45);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
    z-index: 35;
  }
  .scrim.on { opacity: 1; pointer-events: auto; }

  .thread { padding: 20px 16px 8px; }
  .composer-wrap { padding: 4px 12px 12px; }
  .welcome { padding: 3vh 0 16px; }
  .welcome h1 { font-size: 23px; }
  .starters { grid-template-columns: 1fr; }
  .msg-user .bubble { max-width: 92%; }
}

/* Phone. Bigger touch targets and no wasted horizontal space — this gets used
   one-handed on a plant floor, sometimes in gloves. */
@media (max-width: 560px) {
  body { font-size: 16px; }          /* 16px stops iOS zooming the field on focus */

  .thread { padding: 14px 12px 26px; gap: 20px; }
  .composer-wrap { padding: 14px 8px 10px; }
  .composer { padding: 6px 6px 6px 14px; border-radius: 24px; }

  .mic, .send { width: 40px; height: 40px; }
  .mic svg { width: 21px; height: 21px; }
  .send svg { width: 20px; height: 20px; }

  .msg-user .bubble { max-width: 100%; border-radius: 15px 15px 5px 15px; }
  .welcome { padding: 2vh 0 12px; }
  .welcome-mark, .welcome-mark img { width: 78px; height: 78px; }
  .welcome-mark { margin-bottom: 10px; }
  .welcome h1 { font-size: 21px; }
  .welcome-sub { font-size: 14px; margin-bottom: 20px; }
  .starter { padding: 14px; }

  /* Actions are hover-revealed on desktop; there is no hover on a phone. */
  .actions { opacity: 1; }
  .act { padding: 7px 10px; }
  .source-chip, .cite { padding-top: 6px; padding-bottom: 6px; }

  .source-panel { width: 100vw; }
  .composer-note { font-size: 11px; }
  .topbar { height: 48px; }
}

/* ─────────────────────────────  print  ─────────────────────────────── */

/* Somebody prints an answer to carry to the machine. Paper is real in a plant,
   and the vault's whole thesis is that a procedure with no filed record did
   not happen — so the printout has to carry its sources and the date. */
@media print {
  .sidebar, .scrim, .topbar, .composer-wrap, .actions, .gap,
  .source-panel, .modal, .caret { display: none !important; }

  html, body { background: #fff !important; color: #000 !important; height: auto; overflow: visible; }
  .app { display: block; height: auto; }
  .main { display: block; }
  .thread-scroll { overflow: visible; }
  .thread { max-width: none; padding: 0; gap: 18px; }

  .msg-user .bubble {
    background: none !important; color: #000 !important;
    border: 1px solid #999; border-radius: 6px;
    max-width: none; font-weight: 600;
    box-shadow: none;
  }
  .msg-user { align-items: stretch; }
  .rivet-head { color: #444; }
  .rivet-avatar { filter: grayscale(1); }

  /* A citation is worthless on paper if it is only a coloured pill — print the
     path it points at. */
  .cite { border: 0; background: none; color: #000; font-size: .8em; }
  .cite::before { display: none; }
  .cite::after { content: " [" attr(data-note) "]"; color: #555; }

  .source-chip { border-color: #bbb; color: #333; }
  .prose a::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
  .prose pre, .prose table { page-break-inside: avoid; }
  h1, h2, h3 { page-break-after: avoid; }

  /* Provenance on the page itself: what this is and when it was true. */
  .thread::after {
    content: "Answered by Rivet from the Amero Brain Vault. Check the vault for the current version before acting on a printed copy.";
    display: block;
    margin-top: 26px; padding-top: 10px;
    border-top: 1px solid #bbb;
    font-size: 10.5px; color: #555;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─────────────── unaudited (handed in, not checked) ────────────────── */

/* The interface says "unchecked", not just Rivet's prose. If the model ever
   forgets the disclaimer, the chip still carries it — a deterministic guard
   sitting over a probabilistic one. */
.sources-label.warn { color: var(--warn); }

.source-chip.unaudited {
  border-color: color-mix(in srgb, var(--warn) 55%, var(--border));
  background: color-mix(in srgb, var(--warn) 10%, var(--surface));
  color: color-mix(in srgb, var(--warn) 80%, var(--text));
}
.source-chip.unaudited:hover {
  border-color: var(--warn);
  color: var(--warn);
}
.source-chip.unaudited svg { opacity: 1; }

/* Rivet cites unaudited material as [unverified: Who, when]. Mark those in the
   answer body too, so an unchecked claim never reads like a filed one. */
.cite.unverified {
  border-color: color-mix(in srgb, var(--warn) 55%, var(--border));
  background: color-mix(in srgb, var(--warn) 12%, var(--surface));
  color: color-mix(in srgb, var(--warn) 85%, var(--text));
  cursor: help;
}
.cite.unverified::before { background: var(--warn); }
.cite.unverified:hover { border-color: var(--warn); }

.act-more { color: var(--orange); }
.act-more:hover { background: var(--orange-soft); }

/* ────────────────────────── who you are ────────────────────────────── */

.whoami {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #322F2D; border-radius: 10px;
  background: none; color: var(--sidebar-fg);
  cursor: pointer; text-align: left;
  flex: none;
}
.whoami:hover { background: var(--sidebar-hover); border-color: #45403C; }
.whoami-badge {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--orange); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .3px;
}
.whoami-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.whoami-text strong {
  font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.whoami-text small {
  font-size: 11px; color: var(--sidebar-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.who-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.who-row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text);
  cursor: pointer; text-align: left; font: inherit;
}
.who-row:hover { border-color: var(--orange); background: var(--orange-soft); }
.who-row .whoami-badge { width: 28px; height: 28px; font-size: 11px; }
.who-row b { font-size: 14px; font-weight: 620; display: block; }
.who-row span { font-size: 12px; color: var(--text-dim); }
.who-new { margin-top: 4px; }
.who-new summary {
  cursor: pointer; font-size: 13px; color: var(--text-dim);
  padding: 6px 0; list-style: none;
}
.who-new summary::-webkit-details-marker { display: none; }
.who-new summary::before { content: "+ "; color: var(--orange); font-weight: 700; }
.who-new summary:hover { color: var(--text); }
.who-new[open] summary { margin-bottom: 10px; }

/* ───────────────────────── attachments ─────────────────────────────── */

.drop {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
}
.drop.over { border-color: var(--orange); background: var(--orange-soft); }
.drop-hint { font-size: 12.5px; color: var(--text-faint); flex: 1; min-width: 150px; }

.filelist { list-style: none; margin: 0 0 14px; padding: 0; }
.filelist li {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px;
  margin-bottom: 5px;
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px;
  background: var(--surface-2);
}
.filelist .fname {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.filelist .fsize { color: var(--text-faint); font-size: 12px; }
.filelist .fdrop {
  border: 0; background: none; color: var(--text-faint);
  cursor: pointer; font-size: 15px; line-height: 1; padding: 0 3px;
}
.filelist .fdrop:hover { color: var(--bad); }
.filelist li.bad { border-color: var(--bad); color: var(--bad); }
.filelist li.busy { opacity: .6; }

/* ─────────────── drop into the chat, and the file tray ─────────────── */

.tray {
  display: flex; flex-wrap: wrap; gap: 6px;
  max-width: var(--measure);
  margin: 0 auto 8px;
  padding: 0 4px;
}
.tray-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 8px 5px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  background: var(--surface);
  font-size: 12.5px;
  max-width: 100%;
}
.tray-chip > span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px;
}
.tray-chip em { font-style: normal; color: var(--text-faint); font-size: 11.5px; }
.tray-chip button {
  border: 0; background: none; color: var(--text-faint);
  cursor: pointer; font-size: 15px; line-height: 1; padding: 0 1px;
}
.tray-chip button:hover { color: var(--bad); }
.tray-chip.busy { opacity: .55; }
.tray-chip.bad { border-color: var(--bad); color: var(--bad); }

.dropveil {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity .12s ease;
  z-index: 90;
}
.dropveil.on { opacity: 1; }
.dropveil-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 34px 46px;
  border: 2px dashed var(--orange);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.dropveil-card svg { width: 34px; height: 34px; color: var(--orange); }
.dropveil-card strong { font-size: 17px; }
.dropveil-card span { font-size: 13px; color: var(--text-dim); max-width: 20rem; }

/* ─────────────── inline "it is filed" confirmation ─────────────────── */

.filed {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 4px;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-faint);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: 13.5px;
  color: var(--text-dim);
}
.filed-text { flex: 1; min-width: 170px; }
.filed-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--text-faint);
}
.filed.ok { border-left-color: var(--ok); }
.filed.ok .filed-dot { background: var(--ok); }
.filed.bad { border-left-color: var(--bad); color: var(--text); }
.filed.bad .filed-dot { background: var(--bad); }
.filed.undone { border-left-color: var(--border-strong); font-style: italic; }
.filed-undo {
  padding: 5px 11px;
  border: 1px solid var(--border-strong); border-radius: 7px;
  background: var(--surface); color: var(--text-dim);
  font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.filed-undo:hover { border-color: var(--orange); color: var(--orange); }
.filed-undo:disabled { opacity: .5; cursor: default; }

/* ───────────── files that went with a message (the receipt) ────────── */

.sent-files {
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: flex-end;
  max-width: 84%;
  margin-top: 6px;
}
.sent-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--orange) 45%, var(--border));
  border-radius: 20px;
  background: var(--orange-soft);
  color: color-mix(in srgb, var(--orange) 85%, var(--text));
  font-size: 12px;
  max-width: 100%;
}
.sent-chip svg { width: 13px; height: 13px; flex: none; }
.sent-chip > span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px;
}
.sent-chip.bad {
  border-color: var(--bad);
  background: color-mix(in srgb, var(--bad) 10%, var(--surface));
  color: var(--bad);
}

@media (max-width: 560px) {
  .sent-files { max-width: 100%; }
}
@media print {
  .sent-chip { background: none; border-color: #999; color: #000; }
}

/* An attachment chip you can open, like any other chat attachment. */
.sent-chip.openable { cursor: pointer; }
.sent-chip.openable:hover {
  border-color: var(--orange);
  background: color-mix(in srgb, var(--orange) 20%, var(--surface));
}
.tray-chip.openable > span { cursor: pointer; text-decoration-color: transparent; }
.tray-chip.openable > span:hover { text-decoration: underline; }

/* ── sign-in: two ways in, one at a time ─────────────────────────────── */
.signin-tabs { display: flex; gap: 6px; margin: 14px 0 12px; }
.signin-tab {
  flex: 1; padding: 9px 10px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-soft); font: inherit; font-size: 13px; font-weight: 600;
}
.signin-tab.on {
  border-color: var(--orange); color: var(--ink);
  background: color-mix(in srgb, var(--orange) 14%, var(--surface));
}
.signin-pane label {
  display: block; margin: 10px 0 4px; font-size: 12px; font-weight: 700;
  color: var(--ink-soft);
}
.signin-pane input {
  width: 100%; padding: 10px 11px; border-radius: 9px; font: inherit;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}
.signin-pane input:focus {
  outline: none; border-color: var(--orange);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 22%, transparent);
}
/* The badge field is what a reader types into; make it unmistakable. */
#siBadge { letter-spacing: .08em; font-family: ui-monospace, monospace; }
.badge-lead { margin: 12px 0 0; font-size: 13px; color: var(--ink-soft); }
.signin-msg {
  margin: 12px 0 0; padding: 9px 11px; border-radius: 9px; font-size: 13px;
  border: 1px solid color-mix(in srgb, #d33 40%, var(--line));
  background: color-mix(in srgb, #d33 10%, var(--surface)); color: var(--ink);
}
.signin-foot {
  margin: 14px 0 0; font-size: 12px; color: var(--ink-soft);
  border-top: 1px solid var(--line); padding-top: 10px;
}