:root {
  --paper: #fffdf8;
  --paper-muted: #f8f5ed;
  --canvas: #eeeae0;
  --ink: #20251f;
  --muted: #687068;
  --line: #dcd8cc;
  --line-strong: #cbc5b8;
  --forest: #214f43;
  --forest-hover: #173d34;
  --forest-soft: #e4eee9;
  --green: #23865c;
  --green-soft: #e3f3eb;
  --orange: #bd6c17;
  --orange-soft: #fff0dc;
  --red: #bd4545;
  --red-soft: #fae8e6;
  --blue-text: #34596d;
  --blue-soft: #e8eff4;
  --shadow: 0 14px 40px rgb(35 39 33 / 8%);
  --radius: 18px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 75% 0%, rgb(255 255 255 / 70%), transparent 34rem),
    var(--canvas);
}

button,
a,
input,
select {
  font: inherit;
}

button {
  color: inherit;
}

:focus-visible {
  outline: 3px solid #397f9f;
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.7rem 1rem;
  border-radius: 0.6rem;
  color: white;
  background: var(--forest);
  transform: translateY(-180%);
}

.skip-link:focus {
  transform: translateY(0);
}

.app-shell {
  min-height: 100vh;
  padding: 1.1rem;
}

.login-page {
  display: grid;
  min-height: 100vh;
  padding: clamp(1rem, 4vw, 2.5rem);
  place-items: center;
}

.login-shell {
  width: min(29rem, 100%);
}

.login-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
  padding: 0 0.25rem;
}

.login-card {
  padding: clamp(1.5rem, 5vw, 2.25rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 90% 0%, rgb(76 118 101 / 12%), transparent 20rem),
    var(--paper);
  box-shadow: var(--shadow);
}

.login-intro {
  margin: 0.6rem 0 1.5rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.login-form {
  display: grid;
  gap: 1rem;
}

.login-field {
  display: grid;
  gap: 0.42rem;
}

.login-field label {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 750;
}

.login-field input {
  width: 100%;
  min-height: 46px;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--ink);
  background: white;
}

.login-password-row {
  position: relative;
}

.login-password-row input {
  padding-right: 5.6rem;
}

.login-password-toggle {
  position: absolute;
  top: 50%;
  right: 0.38rem;
  min-height: 34px;
  padding: 0.35rem 0.55rem;
  border: 0;
  border-radius: 7px;
  color: var(--forest);
  background: transparent;
  font-size: 0.72rem;
  font-weight: 750;
  cursor: pointer;
  transform: translateY(-50%);
}

.login-password-toggle:hover {
  background: var(--forest-soft);
}

.login-submit {
  width: 100%;
  margin-top: 0.2rem;
}

.login-message {
  margin: 0 0 1.2rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  background: var(--paper-muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.login-message.is-error {
  border-color: #edb5af;
  color: #742e2e;
  background: var(--red-soft);
}

.login-message.is-success {
  border-color: #bfd9cc;
  color: #225541;
  background: var(--green-soft);
}

.login-message.is-notice {
  border-color: #ebd0aa;
  color: #70400c;
  background: var(--orange-soft);
}

.login-security {
  margin: 1.4rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: 1800px;
  min-height: 76px;
  margin: 0 auto 1rem;
  padding: 0.7rem 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.brand-mark {
  display: grid;
  width: 44px;
  height: 44px;
  border-radius: 13px 13px 13px 4px;
  place-items: center;
  color: white;
  background: var(--forest);
  box-shadow: 0 7px 18px rgb(33 79 67 / 22%);
  font-family: Georgia, serif;
  font-size: 1.35rem;
  font-weight: 700;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 2.5vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.025em;
}

h2 {
  margin-bottom: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

h3 {
  margin-bottom: 0.65rem;
  font-size: 0.86rem;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.eyebrow {
  margin-bottom: 0.15rem;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.session-controls {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.system-status-menu {
  position: relative;
}

.system-status-menu > summary {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
}

.system-status-menu > summary::-webkit-details-marker {
  display: none;
}

.system-status-menu > summary::after {
  margin-left: 0.45rem;
  color: var(--muted);
  content: "⌄";
  font-size: 0.7rem;
}

.system-status-menu[open] > summary::after {
  content: "⌃";
}

.system-status-menu .connection-status {
  margin: 0;
}

.system-status-details {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.45rem);
  right: 0;
  width: min(26rem, calc(100vw - 2rem));
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.system-status-details > strong {
  display: block;
  margin-bottom: 0.65rem;
  font-size: 0.72rem;
}

.system-status-details .connection-status {
  margin-top: 0.55rem;
  white-space: normal;
}

.compact-icon-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.connection-status {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0.45rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
  white-space: nowrap;
}

.connection-status::before {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: var(--orange);
  content: "";
}

.connection-status.is-connected::before {
  background: var(--green);
}

.connection-status.is-degraded::before,
.connection-status.is-inactive::before {
  background: var(--orange);
}

.connection-status.is-error::before,
.connection-status.is-disconnected::before {
  background: var(--red);
}

.backfill-status {
  max-width: 24rem;
}

.transcription-service-status {
  max-width: 24rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.director-status {
  max-width: 25rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.button {
  min-height: 42px;
  padding: 0.65rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  font-size: 0.82rem;
  font-weight: 720;
  cursor: pointer;
  transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.button-primary {
  color: white;
  background: var(--forest);
  box-shadow: 0 6px 16px rgb(33 79 67 / 18%);
}

.button-primary:hover:not(:disabled) {
  background: var(--forest-hover);
}

.button-secondary {
  border-color: var(--line-strong);
  background: rgb(255 253 248 / 75%);
}

.button-secondary:hover:not(:disabled) {
  background: var(--paper);
}

.button-danger {
  color: #8f302c;
  border-color: rgb(166 67 58 / 40%);
  background: #fff4f1;
}

.button-danger:hover:not(:disabled) {
  color: #76241f;
  background: #ffe7e1;
}

.button-quiet {
  border-color: transparent;
  color: var(--forest);
  background: transparent;
}

.button-quiet:hover:not(:disabled),
.button-quiet[aria-expanded="true"] {
  border-color: var(--line);
  background: var(--paper);
}

.settings-button-icon {
  margin-right: 0.3rem;
  font-size: 1rem;
  vertical-align: -0.05rem;
}

.button-small {
  min-height: 36px;
  padding: 0.5rem 0.75rem;
}

.button-icon {
  display: inline-block;
  width: 0.62rem;
  height: 0.82rem;
  margin-right: 0.4rem;
  border: 2px solid currentcolor;
  border-radius: 0.45rem;
  vertical-align: -0.12rem;
}

.capture-dock {
  max-width: 1800px;
  margin: 0 auto 1rem;
  padding: 1rem;
  border: 1px solid rgb(203 197 184 / 78%);
  border-radius: var(--radius);
  background: rgb(255 253 248 / 92%);
  box-shadow: var(--shadow);
}

.capture-dock-heading,
.capture-footer,
.session-summary,
.capture-actions {
  display: flex;
  align-items: center;
}

.capture-dock-heading,
.capture-footer {
  justify-content: space-between;
  gap: 1rem;
}

.capture-dock-heading {
  margin-bottom: 0.85rem;
}

.capture-dock-heading > :first-child {
  min-width: 0;
}

.capture-dock-heading .session-summary {
  margin-left: auto;
}

.capture-dock-toggle {
  flex: 0 0 auto;
}

.capture-dock.is-collapsed .capture-dock-heading {
  margin-bottom: 0.35rem;
}

.session-summary {
  min-width: 0;
  gap: 0.7rem;
  color: var(--muted);
}

.session-summary > span:last-child {
  display: grid;
  min-width: 0;
  gap: 0.12rem;
}

.session-summary strong,
.session-summary small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-summary strong {
  color: var(--ink);
  font-size: 0.78rem;
}

.session-summary small {
  max-width: 29rem;
  font-size: 0.65rem;
}

.session-status-badge {
  flex: 0 0 auto;
  padding: 0.3rem 0.58rem;
  border-radius: 999px;
  color: var(--muted);
  background: #eceae4;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
}

.session-status-badge.is-active {
  color: var(--green);
  background: var(--green-soft);
}

.session-status-badge.is-paused,
.session-status-badge.is-created {
  color: var(--orange);
  background: var(--orange-soft);
}

.session-status-badge.is-completed {
  color: #34596d;
  background: var(--blue-soft);
}

.session-history {
  display: grid;
  grid-template-columns: auto minmax(14rem, 26rem) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  margin: 0.9rem 0 1rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgb(255 255 255 / 58%);
}

.session-history label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.session-history select {
  min-width: 0;
  padding: 0.48rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--ink);
  background: var(--paper);
}

.session-picker-status {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 780px) {
  .session-history {
    grid-template-columns: 1fr auto;
  }

  .session-history label,
  .session-history select {
    grid-column: 1 / -1;
  }
}

.source-selector {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.source-option {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.65rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: white;
  cursor: pointer;
}

.source-option:hover {
  border-color: #aebdb5;
}

.source-option:has(input:checked) {
  border-color: #7fa494;
  background: var(--forest-soft);
  box-shadow: inset 0 0 0 1px rgb(33 79 67 / 10%);
}

.source-option:has(input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}

.source-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.source-option > span {
  grid-row: 1 / 3;
  display: grid;
  width: 2rem;
  height: 2rem;
  border-radius: 9px;
  place-items: center;
  color: var(--forest);
  background: var(--paper-muted);
  font-size: 0.92rem;
}

.source-option strong {
  align-self: end;
  font-size: 0.75rem;
}

.source-option small {
  align-self: start;
  color: var(--muted);
  font-size: 0.62rem;
}

.source-configuration {
  margin: 0.65rem 0;
}

.source-field {
  display: grid;
  grid-template-columns: auto minmax(12rem, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  min-height: 3rem;
  padding: 0.55rem 0.75rem;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  color: var(--muted);
  background: var(--paper-muted);
  font-size: 0.68rem;
}

.source-field strong,
.source-field label {
  color: var(--ink);
  font-weight: 750;
}

.source-field input[type="url"],
.source-field input[type="file"] {
  width: 100%;
  min-height: 36px;
  padding: 0.48rem 0.62rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--ink);
  background: white;
}

.source-field .is-valid {
  color: var(--green);
}

.source-field .is-error {
  color: var(--red);
}

.source-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.68rem;
}

.agenda-configuration {
  display: grid;
  gap: 0.55rem;
  margin: 0.8rem 0;
  padding: 0.7rem 0.75rem;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  color: var(--muted);
  background: var(--paper-muted);
  font-size: 0.68rem;
}

.agenda-configuration > div:first-child {
  display: grid;
  gap: 0.15rem;
}

.agenda-configuration strong,
.agenda-configuration label {
  color: var(--ink);
  font-weight: 750;
}

.agenda-input-row {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
}

.agenda-input-row input[type="url"],
.agenda-input-row input[type="file"] {
  width: 100%;
  min-height: 34px;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--ink);
  background: white;
}

.agenda-preview {
  margin: 0;
  color: var(--ink);
  line-height: 1.45;
}

.agenda-progress {
  display: grid;
  grid-template-columns: minmax(8rem, 16rem) minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.agenda-progress[hidden] {
  display: none;
}

.agenda-progress progress {
  width: 100%;
  height: 0.65rem;
  accent-color: var(--green);
}

.agenda-progress.is-error progress {
  accent-color: var(--red);
}

@media (max-width: 780px) {
  .agenda-input-row {
    grid-template-columns: 1fr;
  }

  .agenda-progress {
    grid-template-columns: 1fr;
  }
}

.capture-actions {
  flex: 0 0 auto;
  gap: 0.5rem;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(360px, 1.45fr) minmax(290px, 0.83fr);
  grid-template-areas:
    "transcript transcript notes"
    "questions answer answer";
  grid-template-rows: minmax(24rem, 34vh) minmax(34rem, auto);
  align-items: start;
  gap: 1rem;
  width: 100%;
  max-width: 1800px;
  min-height: calc(100vh - 110px);
  margin: 0 auto;
}

.panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(203 197 184 / 78%);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.questions-panel,
.sources-panel,
.transcript-panel {
  display: flex;
  flex-direction: column;
}

.questions-panel {
  grid-area: questions;
  min-height: 34rem;
}

.personal-notes-panel {
  display: flex;
  grid-area: notes;
  flex-direction: column;
  height: clamp(24rem, 34vh, 30rem);
  min-height: 24rem;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 1.35rem 1.25rem 1rem;
}

.count-badge {
  display: grid;
  min-width: 1.8rem;
  height: 1.8rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  place-items: center;
  color: var(--forest);
  background: var(--forest-soft);
  font-size: 0.75rem;
  font-weight: 750;
}

.transcript-panel {
  grid-area: transcript;
  height: clamp(18rem, 34vh, 30rem);
  min-height: 18rem;
  background: linear-gradient(180deg, #f8fbf9, var(--paper));
}

body.is-focus-mode .workspace {
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.75fr);
  grid-template-areas:
    "transcript notes"
    "questions notes";
  grid-template-rows: minmax(28rem, 58vh) minmax(18rem, auto);
}

body.is-focus-mode .answer-panel {
  display: none;
}

body.is-focus-mode .transcript-panel,
body.is-focus-mode .personal-notes-panel {
  height: auto;
  max-height: calc(100vh - 8rem);
}

.transcript-panel-heading {
  align-items: flex-start;
  padding-bottom: 0.85rem;
}

.transcript-panel-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.audio-monitor-status {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  white-space: nowrap;
}

.audio-monitor-status.is-live {
  color: var(--forest);
}

.audio-monitor-status.is-warning {
  color: var(--orange-dark, #9a5800);
}

#audio-monitor-button[aria-pressed="true"] {
  border-color: rgb(29 112 68 / 42%);
  background: rgb(29 112 68 / 10%);
  color: var(--forest);
}

.meeting-agenda {
  margin: 0 1.25rem 0.8rem;
  border: 1px solid rgb(69 111 85 / 24%);
  border-radius: 10px;
  background: rgb(232 242 235 / 72%);
}

.meeting-agenda summary {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  padding: 0.62rem 0.75rem;
  cursor: pointer;
  list-style-position: inside;
}

.meeting-agenda-label {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.meeting-agenda-current {
  min-width: 0;
}

.meeting-agenda-list {
  max-height: 12rem;
  margin: 0;
  padding: 0 0.75rem 0.7rem 2.6rem;
  overflow: auto;
}

.meeting-agenda-list li {
  padding: 0.24rem 0.4rem;
  color: var(--muted);
  border-radius: 6px;
}

.meeting-agenda-list li.is-current {
  color: var(--forest);
  background: white;
  font-weight: 750;
}

.button-small {
  min-height: 28px;
  padding: 0.3rem 0.55rem;
  font-size: 0.64rem;
}

.live-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.live-header h3 {
  margin: 0;
}

.transcript-status {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.transcript-status.is-partial {
  color: var(--orange);
}

.transcript-status.is-final {
  color: var(--green);
}

.transcript-history {
  min-height: 0;
  flex: 1 1 auto;
  margin: 0 0.85rem;
  padding: 0.8rem;
  overflow: auto;
  border: 1px solid #d9e3de;
  border-radius: 13px;
  background: linear-gradient(145deg, #f3f8f5, #eef4f1);
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

.transcript-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.transcript-console-line {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0;
  padding: 0.26rem 0;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.74rem;
  line-height: 1.4;
}

.transcript-console-line.is-active {
  color: var(--forest);
}

.transcript-console-line.is-error {
  color: var(--red, #a33b32);
}

.transcript-console-marker {
  display: inline-grid;
  width: 1rem;
  flex: 0 0 1rem;
  place-items: center;
  color: var(--orange);
  font-weight: 800;
}

.transcript-console-line.is-done .transcript-console-marker {
  color: var(--forest);
}

.transcript-console-line.is-error .transcript-console-marker {
  color: var(--red, #a33b32);
}

.transcript-entry {
  margin: 0;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgb(183 201 191 / 62%);
}

.transcript-entry:first-child {
  padding-top: 0;
}

.transcript-entry:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.transcript-entry-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.transcript-entry-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.transcript-note-button {
  padding: 0.15rem 0.35rem;
  border: 0;
  border-radius: 5px;
  color: var(--forest);
  background: transparent;
  cursor: pointer;
  font-size: 0.6rem;
  font-weight: 750;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease;
}

.transcript-entry:hover .transcript-note-button,
.transcript-entry:focus-within .transcript-note-button,
.transcript-note-button:focus-visible {
  opacity: 1;
}

.transcript-note-button:hover {
  background: var(--forest-soft);
}

.transcript-entry.is-partial .transcript-entry-meta {
  color: var(--orange);
}

.transcript-entry.is-pending {
  border-left: 3px solid var(--orange);
  padding-left: 0.55rem;
}

.transcript-entry.is-pending .transcript-entry-meta {
  color: var(--orange);
}

.transcript-entry-text {
  color: #303931;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.9rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.transcript-entry.is-question-source {
  margin-inline: -0.5rem;
  padding-inline: 0.5rem;
  border-radius: 8px;
  background: #fff0a8;
  box-shadow: 0 0 0 2px rgb(209 160 28 / 28%);
  scroll-margin-block: 5rem;
}

.transcript-entry.is-question-source:focus {
  outline: 3px solid rgb(169 115 10 / 55%);
  outline-offset: 2px;
}

.hypothesis-row {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.65rem;
  border-top: 1px solid #d9e3de;
  color: var(--muted);
  font-size: 0.68rem;
}

.transcript-panel > .hypothesis-row {
  margin: 0.8rem 0.85rem 0;
}

.hypothesis-row strong {
  color: var(--forest);
}

.question-list {
  min-height: 0;
  margin: 0;
  padding: 0 0.55rem 1rem;
  overflow: auto;
  list-style: none;
}

.question-panel-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.segmented-control {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 1rem 0.75rem;
  padding: 0.2rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-muted);
}

.segmented-control button {
  min-height: 32px;
  padding: 0.35rem 0.5rem;
  border: 0;
  border-radius: 7px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 750;
}

.segmented-control button[aria-pressed="true"] {
  color: var(--forest);
  background: var(--paper);
  box-shadow: 0 2px 8px rgb(30 47 39 / 8%);
}

.question-item {
  margin: 0.18rem 0;
}

.question-item.is-child {
  margin-left: 1.25rem;
}

.question-item.is-child .question-button {
  border-left-color: #c9d8d0;
}

.question-item.is-child .question-title::before {
  color: var(--muted);
  content: "Deelvraag · ";
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.question-button {
  display: block;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  overflow: hidden;
}

.question-button:hover {
  background: var(--paper-muted);
}

.question-button[data-current="true"] {
  border-color: #d3dfd9;
  background: var(--forest-soft);
}

.question-button.is-follow {
  border-color: color-mix(in srgb, var(--orange) 38%, var(--line));
}

.question-button.is-dismissed {
  opacity: 0.64;
}

.question-select-button {
  display: grid;
  grid-template-columns: 0.65rem minmax(0, 1fr);
  gap: 0.72rem;
  width: 100%;
  padding: 0.8rem 0.75rem 0.58rem;
  border: 0;
  text-align: left;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.question-select-button:focus-visible,
.question-snippet:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: -3px;
}

.question-button .status-dot {
  margin-top: 0.31rem;
}

.question-copy {
  min-width: 0;
}

.question-title {
  display: -webkit-box;
  margin: 0 0 0.3rem;
  overflow: hidden;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.question-snippet {
  display: -webkit-box;
  width: calc(100% - 2.87rem);
  margin: -0.05rem 0.75rem 0.7rem 2.12rem;
  padding: 0.25rem 0.38rem;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  text-align: left;
  background: rgb(255 255 255 / 42%);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 450;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.question-snippet:hover {
  color: #3c4a40;
  background: #fff5c7;
}

.question-snippet::after {
  content: "  ↗ transcriptie";
  color: #7b5a0e;
  font-weight: 700;
}

.question-snippet[hidden] {
  display: none;
}

.question-personal-actions {
  display: flex;
  gap: 0.35rem;
  margin: -0.15rem 0.75rem 0.65rem 2.12rem;
}

.question-personal-action {
  min-height: 28px;
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  cursor: pointer;
  font-size: 0.6rem;
  font-weight: 700;
}

.question-personal-action:hover,
.question-personal-action[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--forest) 34%, var(--line));
  color: var(--forest);
  background: var(--forest-soft);
}

.question-subline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 0.65rem;
}

.question-status-label {
  font-weight: 700;
}

.empty-list,
.sources-empty {
  display: grid;
  margin: auto;
  padding: 2rem 1rem;
  place-items: center;
  color: var(--muted);
  text-align: center;
}

.empty-list-icon {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  place-items: center;
  color: var(--forest);
  font-family: Georgia, serif;
}

.empty-list p,
.sources-empty p {
  margin-bottom: 0.25rem;
  font-size: 0.82rem;
  font-weight: 650;
}

.empty-list small {
  max-width: 14rem;
  font-size: 0.68rem;
  line-height: 1.45;
}

.status-legend {
  margin-top: auto;
  padding: 0.8rem 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.62rem;
}

.status-legend > summary {
  cursor: pointer;
  font-weight: 700;
}

.status-legend > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.65rem;
}

.status-legend > p {
  margin: 0.55rem 0 0;
  line-height: 1.4;
}

.personal-notes-heading {
  padding-bottom: 0.7rem;
}

.personal-note-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.personal-note-privacy {
  margin: 0 1.1rem 0.75rem;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  color: var(--muted);
  background: var(--paper-muted);
  font-size: 0.62rem;
  line-height: 1.4;
}

.personal-note-form {
  margin: 0 1.1rem 0.75rem;
}

.personal-note-kind-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.personal-note-kind-row label {
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 750;
}

.personal-note-kind-row select {
  min-height: 32px;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  background: var(--paper);
  font-size: 0.68rem;
}

.personal-note-anchor {
  margin: 0 0 0.4rem;
  color: var(--muted);
  font-size: 0.62rem;
}

.personal-note-anchor.is-linked {
  color: var(--forest);
  font-weight: 700;
}

.personal-note-form textarea {
  width: 100%;
  min-height: 5.2rem;
  padding: 0.7rem;
  resize: vertical;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  color: var(--ink);
  background: var(--paper);
  font: 0.78rem/1.45 inherit;
}

.personal-note-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.45rem;
}

.personal-note-actions > span {
  color: var(--muted);
  font-size: 0.62rem;
}

.personal-notes-empty {
  display: grid;
  margin: auto;
  padding: 1rem 1.5rem 2rem;
  color: var(--muted);
  text-align: center;
}

.personal-notes-empty p {
  margin-bottom: 0.25rem;
  font-size: 0.78rem;
  font-weight: 700;
}

.personal-notes-empty small {
  line-height: 1.4;
}

.personal-notes-list {
  min-height: 0;
  margin: 0;
  padding: 0 0.85rem 1rem;
  overflow: auto;
  list-style: none;
}

.personal-note-item {
  margin-bottom: 0.55rem;
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--forest);
  border-radius: 9px;
  background: var(--paper-muted);
}

.personal-note-item.is-action { border-left-color: var(--orange); }
.personal-note-item.is-promise { border-left-color: var(--green); }
.personal-note-item.is-concern { border-left-color: var(--red); }

.personal-note-item-header,
.personal-note-item-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.personal-note-kind {
  color: var(--forest);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.personal-note-item time,
.personal-note-agenda {
  color: var(--muted);
  font-size: 0.6rem;
}

.personal-note-item > p {
  margin: 0.45rem 0;
  font-size: 0.74rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.personal-note-item-actions {
  justify-content: flex-end;
  margin-top: 0.4rem;
}

.personal-note-delete {
  color: var(--red);
}

.status-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.status-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 0.58rem;
  height: 0.58rem;
  border: 2px solid var(--paper);
  border-radius: 50%;
  box-shadow: 0 0 0 1px currentcolor;
}

.status-green {
  color: var(--green);
  background: var(--green);
}

.status-orange {
  color: var(--orange);
  background: var(--orange);
}

.status-red {
  color: var(--red);
  background: var(--red);
}

.answer-panel {
  grid-area: answer;
  min-height: 34rem;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  background:
    linear-gradient(90deg, transparent 47px, rgb(189 69 69 / 9%) 48px, transparent 49px),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 30px,
      rgb(104 112 104 / 7%) 31px
    ),
    var(--paper);
}

.answer-empty {
  display: grid;
  min-height: 27rem;
  place-content: center;
  justify-items: center;
  text-align: center;
}

.answer-empty h2 {
  margin: 0.3rem 0 0.7rem;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.answer-empty > p:last-child {
  max-width: 32rem;
  color: var(--muted);
  line-height: 1.6;
}

.answer-empty-mark {
  display: grid;
  width: 4rem;
  height: 4rem;
  margin-bottom: 1.2rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  place-content: center;
  gap: 0.28rem;
  background: rgb(255 255 255 / 70%);
}

.answer-empty-mark span {
  display: block;
  width: 1.5rem;
  height: 2px;
  background: var(--line-strong);
}

.answer-content {
  max-width: 850px;
  margin: 0 auto;
}

.answer-header {
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--line);
}

.answer-kicker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.answer-header h2 {
  max-width: 45rem;
  margin-bottom: 0.8rem;
  font-size: clamp(1.65rem, 3vw, 2.45rem);
  line-height: 1.16;
}

.selected-question-text {
  display: block;
  width: 100%;
  max-width: 48rem;
  margin: -0.15rem 0 0.85rem;
  padding-left: 0.85rem;
  border: 0;
  border-left: 2px solid #cbd9d2;
  border-radius: 0 7px 7px 0;
  color: var(--muted);
  text-align: left;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  line-height: 1.58;
  white-space: pre-wrap;
}

.selected-question-text:hover,
.selected-question-text:focus-visible {
  border-left-color: #c28b17;
  color: #38443b;
  background: #fff8d8;
}

.selected-question-text:focus-visible {
  outline: 2px solid #c28b17;
  outline-offset: 2px;
}

.selected-question-text::after {
  content: "  ↗ Toon in transcriptie";
  color: #7b5a0e;
  font-size: 0.75rem;
  font-weight: 700;
}

.selected-question-text[hidden] {
  display: none;
}

.question-meta {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.76rem;
}

.answer-section {
  padding: 2rem 0;
}

.answer-section h3 {
  color: var(--forest);
  text-transform: uppercase;
}

.answer-text {
  color: #252b25;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  line-height: 1.78;
  white-space: pre-wrap;
}

.answer-text p,
.answer-prose p {
  margin: 0 0 0.85rem;
}

.answer-text p:last-child,
.answer-prose p:last-child {
  margin-bottom: 0;
}

.answer-text .meeting-answer {
  margin-top: 1rem;
  padding: 0.75rem;
  border-left: 3px solid #97afa4;
  color: #4e5c54;
  background: rgb(228 238 233 / 55%);
  font-family: Inter, ui-sans-serif, sans-serif;
  font-size: 0.76rem;
  line-height: 1.55;
}

.answer-text.is-pending {
  color: var(--muted);
  font-style: italic;
}

.answer-document-section + .answer-document-section {
  border-top: 1px solid var(--line);
}

.answer-section-heading {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}

.answer-disclosure {
  padding: 0;
}

.answer-disclosure > summary {
  cursor: pointer;
  list-style: none;
}

.answer-disclosure > summary::-webkit-details-marker {
  display: none;
}

.answer-disclosure > summary::after {
  margin-left: auto;
  color: var(--muted);
  content: "+";
  font-size: 1rem;
  font-weight: 500;
}

.answer-disclosure[open] > summary::after {
  content: "−";
}

.answer-section.answer-disclosure > summary {
  margin: 0;
  padding: 1rem 0;
}

.answer-section.answer-disclosure > .answer-prose,
.answer-section.answer-disclosure > .motions-list,
.answer-section.answer-disclosure > .answer-timeline {
  padding-bottom: 1.5rem;
}

.answer-section-heading > span {
  color: #8aa197;
  font-family: Georgia, serif;
  font-size: 0.65rem;
}

.answer-section-heading h3 {
  margin: 0;
}

.answer-prose {
  color: #303730;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.96rem;
  line-height: 1.7;
  white-space: normal;
}

.markdown-content {
  white-space: normal;
}

.source-excerpt.markdown-content {
  display: block;
  max-height: 4.35em;
  -webkit-line-clamp: unset;
}

.source-excerpt.markdown-content p {
  margin-bottom: 0;
}

.markdown-content p {
  margin: 0 0 0.85rem;
}

.markdown-content p:last-child,
.markdown-content ul:last-child,
.markdown-content ol:last-child,
.markdown-content blockquote:last-child,
.markdown-content pre:last-child,
.markdown-content table:last-child {
  margin-bottom: 0;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
  margin: 1rem 0 0.45rem;
  color: var(--forest);
  font-family: Inter, ui-sans-serif, sans-serif;
  line-height: 1.25;
}

.markdown-content h1 { font-size: 1.35rem; }
.markdown-content h2 { font-size: 1.2rem; }
.markdown-content h3 { font-size: 1.05rem; }
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 { font-size: 0.95rem; }

.markdown-content ul,
.markdown-content ol {
  margin: 0 0 0.85rem;
  padding-left: 1.35rem;
}

.markdown-content li + li {
  margin-top: 0.25rem;
}

.markdown-content blockquote {
  margin: 0.85rem 0;
  padding: 0.55rem 0.8rem;
  border-left: 3px solid #a9c0b5;
  color: #536259;
  background: rgb(228 238 233 / 45%);
}

.markdown-content blockquote p:last-child {
  margin-bottom: 0;
}

.markdown-content pre {
  margin: 0 0 0.85rem;
  padding: 0.75rem 0.85rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #25332b;
  background: #f2f5f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: pre;
}

.markdown-content :not(pre) > code,
.markdown-content > code {
  padding: 0.08rem 0.28rem;
  border-radius: 4px;
  color: #374d40;
  background: #e9f0eb;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
}

.markdown-content a {
  color: #2d6571;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.14em;
}

.markdown-content hr {
  margin: 1rem 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.markdown-content table {
  width: 100%;
  margin: 0 0 0.85rem;
  border-collapse: collapse;
  font-family: Inter, ui-sans-serif, sans-serif;
  font-size: 0.78rem;
  line-height: 1.45;
}

.markdown-content th,
.markdown-content td {
  padding: 0.42rem 0.5rem;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.markdown-content th {
  color: var(--forest);
  background: var(--paper-muted);
  font-weight: 750;
}

.uncertainty-card .markdown-content p:last-child {
  margin-bottom: 0;
}

.answer-prose.is-empty,
.motions-list.is-empty,
.answer-timeline.is-empty {
  color: var(--muted);
  font-family: inherit;
  font-size: 0.78rem;
  font-style: italic;
}

.citation-run {
  display: inline-flex;
  gap: 0.18rem;
  margin-left: 0.28rem;
  vertical-align: super;
}

.citation-marker {
  display: inline-grid;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.22rem;
  border: 1px solid #aec7bb;
  border-radius: 999px;
  place-items: center;
  color: var(--forest);
  background: #f2f8f5;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.citation-marker:hover,
.citation-marker:focus-visible,
.citation-marker[aria-expanded="true"] {
  color: white;
  background: var(--forest);
}

.motion-card {
  margin-bottom: 0.65rem;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgb(255 255 255 / 74%);
}

.motion-topline,
.motion-votes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.85rem;
}

.motion-topline {
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}

.motion-kind,
.motion-status {
  padding: 0.2rem 0.42rem;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
}

.motion-kind {
  color: var(--forest);
  background: var(--forest-soft);
}

.motion-status {
  color: var(--muted);
  background: #eceae4;
}

.motion-status.is-adopted {
  color: var(--green);
  background: var(--green-soft);
}

.motion-status.is-rejected {
  color: var(--red);
  background: var(--red-soft);
}

.motion-card h4 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.95rem;
}

.motion-meta,
.motion-votes {
  margin: 0.4rem 0 0;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.45;
}

.answer-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.9rem;
  padding: 0.15rem 0 1rem 1rem;
  border-left: 1px solid #b9cbc2;
}

.timeline-item::before {
  position: absolute;
  top: 0.3rem;
  left: -0.28rem;
  width: 0.5rem;
  height: 0.5rem;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--forest);
  box-shadow: 0 0 0 1px var(--forest);
  content: "";
}

.timeline-date {
  color: var(--forest);
  font-size: 0.7rem;
  font-weight: 800;
}

.timeline-text {
  margin: 0;
  color: #303730;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.86rem;
  line-height: 1.5;
}

.answer-workspace {
  margin-top: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.answer-workspace-heading,
.interaction-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.answer-workspace-heading h3 {
  margin: 0;
  color: var(--forest);
  font-size: 0.95rem;
}

.thread-status {
  color: var(--muted);
  font-size: 0.65rem;
}

.answer-workspace-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.8rem;
}

.interaction-card {
  min-width: 0;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgb(248 245 237 / 72%);
}

.interaction-card > label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.72rem;
  font-weight: 800;
}

.interaction-card textarea {
  width: 100%;
  min-height: 6rem;
  padding: 0.65rem;
  resize: vertical;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--ink);
  background: white;
  font: inherit;
  font-size: 0.76rem;
  line-height: 1.45;
}

.interaction-card textarea:disabled {
  color: var(--muted);
  background: #eeece6;
}

.interaction-help {
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: 0.6rem;
  line-height: 1.4;
}

.interaction-actions {
  margin-top: 0.5rem;
}

.interaction-actions > span {
  color: var(--muted);
  font-size: 0.62rem;
}

.note-history,
.followup-history {
  display: grid;
  gap: 0.35rem;
  max-height: 11rem;
  margin: 0.65rem 0 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.note-history li,
.followup-history li {
  padding: 0.55rem;
  border-left: 2px solid #b7c9c0;
  color: #3c463f;
  background: rgb(255 255 255 / 65%);
  font-size: 0.68rem;
  line-height: 1.45;
}

.note-history time,
.followup-history time {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.58rem;
}

.citation-popover {
  position: fixed;
  z-index: 80;
  top: 50%;
  left: 50%;
  width: min(34rem, calc(100vw - 2rem));
  max-height: min(32rem, calc(100vh - 2rem));
  padding: 1.2rem;
  overflow: auto;
  border: 1px solid #a9bbb2;
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 24px 80px rgb(18 30 24 / 24%);
  transform: translate(-50%, -50%);
}

.citation-popover-close {
  position: absolute;
  top: 0.55rem;
  right: 0.65rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: var(--paper-muted);
  font-size: 1.25rem;
  cursor: pointer;
}

.citation-popover h2 {
  max-width: calc(100% - 2rem);
  margin-bottom: 0.35rem;
}

.citation-popover-locator {
  color: var(--forest);
  font-size: 0.7rem;
  font-weight: 700;
}

.citation-popover blockquote {
  margin: 1rem 0;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--forest);
  color: #303730;
  background: var(--paper-muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.88rem;
  line-height: 1.6;
}

.uncertainty-card {
  display: block;
  padding: 1rem;
  border: 1px solid #ddd7c6;
  border-radius: 12px;
  background: rgb(248 245 237 / 88%);
}

.uncertainty-card > summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.uncertainty-card > summary h3 {
  flex: 1;
  margin: 0;
}

.uncertainty-card > .markdown-content {
  margin-top: 0.8rem;
  padding-left: 2.2rem;
}

.uncertainty-icon {
  display: grid;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  place-items: center;
  color: white;
  background: var(--forest);
  font-family: Georgia, serif;
  font-size: 0.8rem;
  font-style: italic;
}

.uncertainty-card h3 {
  margin-bottom: 0.35rem;
}

.uncertainty-card p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.sources-help {
  margin: 0;
  padding: 0 1.25rem 1rem;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

.answer-references {
  margin-top: 1.25rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
}

.answer-references .panel-heading {
  display: flex;
  padding: 1.25rem 0 0.75rem;
}

.answer-references .panel-heading h2 {
  margin: 0;
  color: var(--forest);
  font-size: 1rem;
}

.answer-references .sources-help {
  padding: 0 0 0.85rem;
}

.answer-references .sources-empty {
  display: flex;
  min-height: 5rem;
  align-items: center;
  gap: 0.65rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.answer-references .sources-empty p {
  margin: 0;
}

.answer-references .source-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.65rem;
  max-height: none;
  padding: 0 0 0.5rem;
  overflow: visible;
}

.sources-empty {
  min-height: 15rem;
}

.sources-empty > span {
  color: var(--line-strong);
  font-size: 2.2rem;
}

.source-list {
  min-height: 0;
  margin: 0;
  padding: 0 0.85rem 1rem;
  overflow: auto;
  list-style: none;
  counter-reset: source;
}

.source-item {
  position: relative;
  margin-bottom: 0.6rem;
  counter-increment: source;
}

.source-link {
  display: block;
  width: 100%;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: inherit;
  background: white;
  text-decoration: none;
  text-align: left;
  transition: border 140ms ease, background 140ms ease, transform 140ms ease;
}

.source-link[href] {
  cursor: pointer;
}

.source-link[type="button"] {
  font: inherit;
  cursor: pointer;
}

.source-link[href]:hover,
.source-link[type="button"]:hover {
  border-color: #aebdb5;
  background: #fbfdfc;
  transform: translateY(-1px);
}

.source-link:not([href]) {
  background: var(--paper-muted);
}

.source-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.45rem;
}

.source-kind {
  padding: 0.2rem 0.42rem;
  border-radius: 999px;
  color: var(--forest);
  background: var(--forest-soft);
  font-size: 0.6rem;
  font-weight: 750;
  text-transform: uppercase;
}

.source-kind.is-web {
  color: var(--blue-text);
  background: var(--blue-soft);
}

.source-index {
  color: var(--muted);
  font-family: Georgia, serif;
  font-size: 0.75rem;
}

.source-title {
  margin-bottom: 0.35rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.35;
}

.source-excerpt {
  display: -webkit-box;
  margin-bottom: 0.45rem;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.source-locator {
  display: block;
  overflow: hidden;
  color: #557064;
  font-size: 0.62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toast {
  position: fixed;
  z-index: 50;
  right: 1rem;
  bottom: 1rem;
  max-width: min(28rem, calc(100vw - 2rem));
  padding: 0.85rem 1rem;
  border: 1px solid #edb5af;
  border-radius: 10px;
  color: #742e2e;
  background: var(--red-soft);
  box-shadow: var(--shadow);
  font-size: 0.8rem;
  line-height: 1.4;
}

.settings-screen {
  width: 100%;
  max-width: 1260px;
  margin: 0 auto 2rem;
  overflow: hidden;
  border: 1px solid rgb(203 197 184 / 78%);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.settings-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(145deg, #f4f8f5, var(--paper));
}

.settings-header h2 {
  margin-bottom: 0.45rem;
  font-size: clamp(1.65rem, 3vw, 2.25rem);
}

.settings-header p:last-child {
  max-width: 42rem;
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.settings-message {
  margin: 1.25rem 1.25rem 0;
  padding: 0.8rem 1rem;
  border: 1px solid #bfd9cc;
  border-radius: 10px;
  color: #225541;
  background: var(--green-soft);
  font-size: 0.82rem;
}

.settings-message.is-error {
  border-color: #edb5af;
  color: #742e2e;
  background: var(--red-soft);
}

.settings-message.is-loading {
  border-color: #ebd0aa;
  color: #70400c;
  background: var(--orange-soft);
}

.settings-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 1.25rem;
}

.settings-card {
  min-width: 0;
  padding: clamp(1.15rem, 2vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fffefa;
}

.display-settings-card { order: 1; }
.context-settings-card { order: 2; }
.provider-settings-card { order: 3; }
.settings-card[aria-labelledby="transcription-settings-heading"] { order: 4; }
.settings-card[aria-labelledby="detection-settings-heading"] { order: 5; }
.library-settings-card { order: 6; }
.diagnostics-settings-card { order: 7; }

body:not(.is-expert-mode) .expert-only {
  display: none;
}

.settings-card-heading {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  min-height: 4.2rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.advanced-settings {
  margin: 0.9rem 0;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgb(248 245 237 / 55%);
}

.advanced-settings > summary {
  cursor: pointer;
  color: var(--forest);
  font-weight: 800;
}

.settings-card-heading h3 {
  margin-bottom: 0.25rem;
  color: var(--forest);
  font-size: 0.95rem;
}

.settings-card-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.settings-card-number {
  color: #8aa197;
  font-family: Georgia, serif;
  font-size: 0.75rem;
}

.provider-status-list {
  display: grid;
  gap: 0.55rem;
  margin-bottom: 0.8rem;
}

.research-routing {
  margin-bottom: 1rem;
  padding: 0.85rem;
  border: 1px solid #cbdad3;
  border-radius: 11px;
  background: linear-gradient(145deg, #f3f8f5, #fbfdfc);
}

.research-routing .field-label:first-child {
  margin-top: 0;
}

.research-routing select,
.research-routing input[type="text"] {
  width: 100%;
  min-height: 43px;
  padding: 0.62rem 0.72rem;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  color: var(--ink);
  background: white;
}

.compact-check-field {
  margin: 0.8rem 0 0 !important;
  padding: 0.65rem !important;
}

.openai-auth-panel {
  margin: 0 0 1rem;
  padding: 0.85rem;
  border: 1px solid #c8d7e4;
  border-radius: 11px;
  background: linear-gradient(145deg, #f4f8fc, #fbfdff);
}

.openai-transcription-auth {
  margin-top: 1rem;
  padding: 0.9rem;
  border: 1px solid #c8d7e4;
  border-radius: 11px;
  background: linear-gradient(145deg, #f4f8fc, #fbfdff);
}

.openai-transcription-auth-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
}

.openai-transcription-auth-heading h4 {
  margin: 0 0 0.2rem;
  color: var(--forest);
  font-size: 0.78rem;
}

.openai-transcription-auth-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.5;
}

.openai-api-key-field {
  margin-top: 0.8rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

.openai-api-key-action {
  grid-template-columns: minmax(0, 1fr) auto;
}

.openai-api-key-action .button-danger {
  grid-column: 1 / -1;
  justify-self: start;
}

.openai-auth-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
}

.openai-auth-heading h4 {
  margin: 0 0 0.2rem;
  color: var(--forest);
  font-size: 0.78rem;
}

.openai-auth-heading p,
.openclaw-import-panel p,
.openai-auth-step > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.5;
}

.openai-auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.75rem;
}

.openai-auth-step {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: white;
}

.openai-auth-step .field-label {
  margin-top: 0.7rem;
}

.openai-inline-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
}

.settings-card .openai-inline-action input[type="text"],
.settings-card .openai-inline-action input[type="password"] {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 0.5rem 0.62rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--ink);
  background: white;
}

.device-user-code {
  display: inline-block;
  margin: 0 0.18rem;
  padding: 0.12rem 0.32rem;
  border-radius: 5px;
  color: var(--forest);
  background: var(--forest-soft);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.08em;
}

.openclaw-import-panel {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--line);
}

.openclaw-import-panel summary {
  color: var(--forest);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 750;
}

.openclaw-import-panel > p:first-of-type {
  margin-top: 0.55rem;
}

.openai-auth-message {
  min-height: 1em;
  margin: 0.65rem 0 0;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.45;
}

.openai-auth-message.is-success {
  color: var(--green);
}

.openai-auth-message.is-error {
  color: var(--red);
}

.provider-overview-heading {
  margin: 0 0 0.55rem;
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.provider-loading,
.provider-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.provider-status-item {
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
}

.provider-status-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.provider-status-topline strong {
  font-size: 0.76rem;
}

.provider-availability {
  flex: 0 0 auto;
  padding: 0.22rem 0.45rem;
  border-radius: 999px;
  color: var(--red);
  background: var(--red-soft);
  font-size: 0.58rem;
  font-weight: 800;
}

.provider-availability.is-available {
  color: var(--green);
  background: var(--green-soft);
}

.provider-capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.55rem;
}

.provider-capability {
  padding: 0.2rem 0.38rem;
  border-radius: 6px;
  color: #4c6258;
  background: var(--forest-soft);
  font-size: 0.56rem;
  font-weight: 700;
}

.provider-detail {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.63rem;
  line-height: 1.4;
}

.field-label,
.directory-fieldset legend {
  display: block;
  margin: 1rem 0 0.4rem;
  color: #303831;
  font-size: 0.75rem;
  font-weight: 750;
}

.settings-card input[type="text"],
.settings-card input[type="password"],
.settings-card input[type="number"],
.settings-card select {
  width: 100%;
  min-height: 43px;
  padding: 0.62rem 0.72rem;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  color: var(--ink);
  background: white;
}

.settings-card input:disabled {
  color: var(--muted);
  background: var(--paper-muted);
}

.settings-inline-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.whisperx-settings {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--line, #d8d2c5);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--surface, #fffdf7) 82%, #dfe8ef);
}

@media (max-width: 700px) {
  .settings-inline-grid {
    grid-template-columns: 1fr;
  }
}

.field-help {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.67rem;
  line-height: 1.4;
}

.input-with-suffix {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
}

.input-with-suffix span {
  color: var(--muted);
  font-size: 0.76rem;
}

.check-field {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: flex-start;
  margin-top: 1.25rem;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-muted);
  cursor: pointer;
}

.check-field input {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.15rem;
  accent-color: var(--forest);
}

.check-field strong,
.check-field small {
  display: block;
}

.check-field strong {
  font-size: 0.78rem;
}

.check-field small {
  margin-top: 0.22rem;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.4;
}

.library-settings-card {
  grid-column: 1 / -1;
}

.directory-fieldset {
  margin: 0 0 1.4rem;
  padding: 0;
  border: 0;
}

.directory-fieldset legend {
  padding: 0;
}

.directory-list {
  display: grid;
  gap: 0.55rem;
  margin-bottom: 0.65rem;
}

.directory-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
}

.remove-directory-button {
  min-width: 43px;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--red);
  background: white;
  font-weight: 800;
  cursor: pointer;
}

.remove-directory-button:hover:not(:disabled) {
  border-color: #e1aaa7;
  background: var(--red-soft);
}

.library-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.upload-card,
.index-card {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--paper-muted);
}

.upload-card h4,
.index-card h4 {
  margin: 0 0 0.3rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.95rem;
}

.upload-card > p,
.index-card p {
  margin: 0 0 0.8rem;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.45;
}

.upload-label {
  display: inline-grid;
  place-items: center;
  margin-right: 0.5rem;
  cursor: pointer;
}

.upload-selection,
.upload-progress {
  min-height: 1.2rem;
  margin: 0.65rem 0 !important;
}

.upload-progress.is-error {
  color: var(--red);
}

.index-card-topline {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.index-status-badge {
  flex: 0 0 auto;
  height: fit-content;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  color: var(--muted);
  background: #eceae4;
  font-size: 0.62rem;
  font-weight: 750;
}

.index-status-badge.is-ready {
  color: var(--green);
  background: var(--green-soft);
}

.index-status-badge.is-indexing {
  color: var(--orange);
  background: var(--orange-soft);
}

.index-status-badge.is-error {
  color: var(--red);
  background: var(--red-soft);
}

.index-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 1rem 0;
}

.index-metrics div {
  padding: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.index-metrics dt {
  color: var(--muted);
  font-size: 0.6rem;
}

.index-metrics dd {
  margin: 0.25rem 0 0;
  overflow: hidden;
  font-size: 0.78rem;
  font-weight: 750;
  text-overflow: ellipsis;
}

.index-error {
  color: var(--red) !important;
}

.settings-footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: sticky;
  bottom: 0;
  margin: 0 -1.25rem -1.25rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--line);
  background: rgb(255 253 248 / 94%);
  backdrop-filter: blur(8px);
}

.settings-footer p {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
}

.settings-footer > div {
  display: flex;
  gap: 0.55rem;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

[hidden] {
  display: none !important;
}

@media (max-width: 1100px) {
  .workspace {
    grid-template-columns: minmax(250px, 0.8fr) minmax(0, 1.2fr);
    grid-template-areas:
      "transcript transcript"
      "questions notes"
      "answer answer";
    grid-template-rows: minmax(24rem, 34vh) minmax(28rem, auto) auto;
  }

  .personal-notes-panel {
    height: auto;
    min-height: 28rem;
  }
}

@media (max-width: 760px) {
  .app-shell {
    padding: 0.6rem;
  }

  .topbar {
    align-items: flex-start;
    padding: 0.65rem 0.35rem;
  }

  .session-controls {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .connection-status {
    width: 100%;
    justify-content: flex-end;
  }

  .system-status-menu > summary .connection-status {
    width: auto;
  }

  .capture-dock-heading,
  .capture-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .capture-dock-heading .session-summary {
    margin-left: 0;
  }

  .capture-dock-toggle {
    width: 100%;
  }

  .source-selector {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .source-field {
    grid-template-columns: minmax(0, 1fr);
  }

  .capture-actions,
  .capture-actions .button {
    width: 100%;
  }

  .capture-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .questions-panel,
  .sources-panel,
  .transcript-panel {
    max-height: none;
  }

  .question-list {
    max-height: 17rem;
  }

  .answer-panel {
    min-height: 30rem;
    padding: 1.5rem;
    order: 4;
  }

  .answer-workspace-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .timeline-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }

  .questions-panel {
    order: 2;
  }

  .personal-notes-panel {
    width: 100%;
    height: auto;
    min-height: 24rem;
    order: 3;
  }

  .transcript-panel {
    order: 1;
    height: 28rem;
    min-height: 20rem;
  }

  .settings-header,
  .settings-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-form,
  .library-actions-grid,
  .openai-inline-action {
    grid-template-columns: minmax(0, 1fr);
  }

  .openai-inline-action .button {
    width: 100%;
  }

  .library-settings-card,
  .settings-footer {
    grid-column: auto;
  }

  .settings-footer > div,
  .settings-footer .button {
    width: 100%;
  }

  .index-metrics {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .brand .eyebrow,
  .button-icon {
    display: none;
  }

  .brand-mark {
    width: 38px;
    height: 38px;
  }

  .session-controls {
    gap: 0.4rem;
  }

  .source-selector,
  .capture-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .session-summary {
    align-items: flex-start;
  }

  .button {
    min-height: 38px;
    padding: 0.55rem 0.7rem;
    font-size: 0.72rem;
  }

  .settings-button-icon {
    margin: 0;
  }

  #settings-button {
    font-size: 0;
  }

  #settings-button .settings-button-icon {
    font-size: 1rem;
  }

  .answer-panel {
    background:
      repeating-linear-gradient(
        0deg,
        transparent,
        transparent 30px,
        rgb(104 112 104 / 7%) 31px
      ),
      var(--paper);
  }
}

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

.source-option:has(input:focus-visible) {
  outline: 3px solid #397f9f;
  outline-offset: 3px;
}

:root[data-theme="dark"] {
  --paper: #1d2422;
  --paper-muted: #242c29;
  --canvas: #111614;
  --ink: #edf2ed;
  --muted: #aab5af;
  --line: #37423e;
  --line-strong: #4b5853;
  --forest: #70c7a8;
  --forest-hover: #8ad6bc;
  --forest-soft: #213a31;
  --green: #67ca98;
  --green-soft: #1e3c2f;
  --orange: #e4a353;
  --orange-soft: #45351d;
  --red: #ee8a82;
  --red-soft: #452827;
  --blue-text: #b8d9ea;
  --blue-soft: #263b47;
  --shadow: 0 14px 40px rgb(0 0 0 / 28%);
  color: var(--ink);
  background: var(--canvas);
}

:root[data-theme="dark"] body {
  color: var(--ink);
  background:
    radial-gradient(circle at 75% 0%, rgb(76 118 101 / 16%), transparent 34rem),
    var(--canvas);
}

:root[data-theme="dark"] .capture-dock,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .settings-screen,
:root[data-theme="dark"] .settings-card,
:root[data-theme="dark"] .system-status-details,
:root[data-theme="dark"] .citation-popover,
:root[data-theme="dark"] .login-card {
  border-color: var(--line);
  background-color: var(--paper);
}

:root[data-theme="dark"] .transcript-panel,
:root[data-theme="dark"] .settings-header,
:root[data-theme="dark"] .research-routing,
:root[data-theme="dark"] .openai-auth-panel,
:root[data-theme="dark"] .openai-transcription-auth {
  background: linear-gradient(145deg, #202a26, var(--paper));
}

:root[data-theme="dark"] .transcript-history {
  border-color: var(--line);
  background: linear-gradient(145deg, #16201c, #19231f);
}

:root[data-theme="dark"] .meeting-agenda,
:root[data-theme="dark"] .session-history {
  border-color: var(--line);
  background: var(--paper-muted);
}

:root[data-theme="dark"] .answer-panel {
  background:
    linear-gradient(90deg, transparent 47px, rgb(238 138 130 / 9%) 48px, transparent 49px),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 30px,
      rgb(170 181 175 / 6%) 31px
    ),
    var(--paper);
}

:root[data-theme="dark"] .button-secondary,
:root[data-theme="dark"] .source-option,
:root[data-theme="dark"] .source-field,
:root[data-theme="dark"] .agenda-configuration,
:root[data-theme="dark"] .meeting-agenda,
:root[data-theme="dark"] .interaction-card,
:root[data-theme="dark"] .source-link,
:root[data-theme="dark"] .provider-status-item,
:root[data-theme="dark"] .openai-auth-step,
:root[data-theme="dark"] .answer-empty-mark {
  border-color: var(--line);
  background: var(--paper-muted);
}

:root[data-theme="dark"] .settings-footer {
  border-color: var(--line);
  background: rgb(29 36 34 / 94%);
}

:root[data-theme="dark"] .meeting-agenda-list li.is-current,
:root[data-theme="dark"] .motion-card,
:root[data-theme="dark"] .note-history li,
:root[data-theme="dark"] .followup-history li,
:root[data-theme="dark"] .index-metrics div {
  color: var(--ink);
  background: var(--paper-muted);
}

:root[data-theme="dark"] .motion-card,
:root[data-theme="dark"] .index-metrics div {
  border-color: var(--line);
}

:root[data-theme="dark"] .source-kind.is-web {
  color: var(--blue-text);
}

:root[data-theme="dark"] .provider-capability {
  color: var(--forest);
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .settings-card input[type="text"],
:root[data-theme="dark"] .settings-card input[type="password"],
:root[data-theme="dark"] .settings-card input[type="number"],
:root[data-theme="dark"] .settings-card select,
:root[data-theme="dark"] .research-routing select,
:root[data-theme="dark"] .research-routing input[type="text"] {
  border-color: var(--line-strong);
  color: var(--ink);
  background: #151b19;
}

:root[data-theme="dark"] .login-message.is-error {
  color: #ffb9b2;
  background: #3c2221;
}

:root[data-theme="dark"] .login-message.is-success {
  color: #a8dfc1;
  background: #183128;
}

:root[data-theme="dark"] .login-message.is-notice {
  color: #f0c488;
  background: #382918;
}

:root[data-theme="dark"] .login-submit {
  color: #10231d;
}

:root[data-theme="dark"] .login-submit:hover:not(:disabled) {
  color: #10231d;
}

:root[data-theme="dark"] .transcript-entry-text,
:root[data-theme="dark"] .answer-text,
:root[data-theme="dark"] .answer-prose,
:root[data-theme="dark"] .citation-popover blockquote,
:root[data-theme="dark"] .field-label,
:root[data-theme="dark"] .directory-fieldset legend,
:root[data-theme="dark"] .session-card-counts {
  color: var(--ink);
}

:root[data-theme="dark"] .markdown-content blockquote,
:root[data-theme="dark"] .markdown-content pre,
:root[data-theme="dark"] .markdown-content :not(pre) > code,
:root[data-theme="dark"] .markdown-content > code,
:root[data-theme="dark"] .citation-marker {
  border-color: var(--line-strong);
  color: var(--ink);
  background: var(--paper-muted);
}

:root[data-theme="dark"] .markdown-content a {
  color: var(--blue-text);
}

:root[data-theme="dark"] .timeline-item {
  border-left-color: var(--line-strong);
}

:root[data-theme="dark"] .timeline-text,
:root[data-theme="dark"] .source-locator {
  color: var(--muted);
}

:root[data-theme="dark"] .interaction-card textarea:disabled {
  color: var(--muted);
  background: var(--canvas);
}

:root[data-theme="dark"] .motion-status:not(.is-adopted):not(.is-rejected),
:root[data-theme="dark"] .index-status-badge:not(.is-ready):not(.is-indexing):not(.is-error) {
  color: var(--muted);
  background: var(--canvas);
}

:root[data-theme="dark"] .citation-marker:hover,
:root[data-theme="dark"] .citation-marker:focus-visible,
:root[data-theme="dark"] .citation-marker[aria-expanded="true"] {
  border-color: var(--forest);
  color: var(--canvas);
  background: var(--forest);
}

:root[data-theme="dark"] .source-link[href]:hover,
:root[data-theme="dark"] .source-link[type="button"]:hover {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--paper-muted) 78%, var(--forest-soft));
}

:root[data-theme="dark"] .button-danger,
:root[data-theme="dark"] .remove-directory-button {
  color: #ffb0aa;
  border-color: rgb(238 138 130 / 45%);
  background: var(--red-soft);
}

:root[data-theme="dark"] .button-danger:hover:not(:disabled),
:root[data-theme="dark"] .remove-directory-button:hover:not(:disabled) {
  color: #ffd0cc;
  border-color: var(--red);
  background: #4b2a28;
}

:root[data-theme="dark"] .settings-message {
  border-color: color-mix(in srgb, var(--green) 45%, var(--line));
  color: #aee3c8;
}

:root[data-theme="dark"] .settings-message.is-error {
  border-color: color-mix(in srgb, var(--red) 45%, var(--line));
  color: #ffc1bc;
}

:root[data-theme="dark"] .settings-message.is-loading {
  border-color: color-mix(in srgb, var(--orange) 45%, var(--line));
  color: #f2c98f;
}

:root[data-theme="dark"] .question-snippet,
:root[data-theme="dark"] .question-personal-action {
  color: var(--muted);
  background: rgb(21 27 25 / 70%);
}

:root[data-theme="dark"] .question-snippet:hover,
:root[data-theme="dark"] .selected-question-text:hover,
:root[data-theme="dark"] .selected-question-text:focus-visible {
  color: #f2d995;
  background: #3a321f;
}

:root[data-theme="dark"] .transcript-entry.is-question-source {
  color: #fff0b3;
  background: #50431c;
  box-shadow: 0 0 0 2px rgb(228 163 83 / 40%);
}

:root[data-theme="dark"] .answer-text .meeting-answer,
:root[data-theme="dark"] .uncertainty-card,
:root[data-theme="dark"] .advanced-settings,
:root[data-theme="dark"] .whisperx-settings {
  color: var(--muted);
  background: var(--paper-muted);
}

:root[data-theme="dark"] .button-quiet,
:root[data-theme="dark"] .settings-card-heading h3,
:root[data-theme="dark"] .answer-section h3,
:root[data-theme="dark"] .answer-references .panel-heading h2 {
  color: var(--forest);
}

:root[data-theme="dark"] .toast {
  color: #ffd2ce;
}

@media (forced-colors: active) {
  .status-dot,
  .connection-status::before,
  .personal-note-item {
    forced-color-adjust: auto;
  }
}
/* Live diagnostic popup */
.debug-page {
  --debug-background: #f1eee6;
  --debug-foreground: #20251f;
  --debug-muted: #687068;
  --debug-console-background: #fffdf8;
  --debug-console-border: #cbc5b8;
  --debug-console-muted: #687068;
  --debug-level: #257552;
  --debug-warning: #9b5a16;
  --debug-error: #a63f3f;
  min-height: 100vh;
  background: var(--debug-background);
  color: var(--debug-foreground);
}

:root[data-theme="dark"] .sessions-page {
  --paper: #1d2422;
  --paper-muted: #242c29;
  --canvas: #111614;
  --ink: #edf2ed;
  --muted: #aab5af;
  --line: #37423e;
  --line-strong: #4b5853;
  --forest: #347d67;
  --forest-hover: #3e9177;
  --forest-soft: #213a31;
  --green: #67ca98;
  --green-soft: #1e3c2f;
  --orange: #e4a353;
  --orange-soft: #45351d;
  --red: #ee8a82;
  --red-soft: #452827;
  --blue-soft: #263b47;
  --shadow: 0 14px 40px rgb(0 0 0 / 28%);
  color: var(--ink);
  background:
    radial-gradient(circle at 75% 0%, rgb(76 118 101 / 16%), transparent 34rem),
    var(--canvas);
}

:root[data-theme="dark"] .sessions-page .session-card {
  box-shadow: 0 4px 18px rgb(0 0 0 / 22%);
}

:root[data-theme="dark"] .sessions-page .button-secondary {
  background: rgb(29 36 34 / 88%);
}

:root[data-theme="dark"] .sessions-page .button-danger {
  color: #ffb0aa;
  border-color: rgb(238 138 130 / 45%);
  background: #3d2524;
}

:root[data-theme="dark"] .sessions-page .button-danger:hover:not(:disabled) {
  color: #ffd0cc;
  background: #4b2a28;
}

:root[data-theme="dark"] .sessions-page .button-quiet {
  color: #9cd6c1;
}

:root[data-theme="dark"] .debug-page {
  --paper: #1d2422;
  --ink: #edf0e8;
  --muted: #aab5af;
  --line: #3b4846;
  --forest: #347d67;
  --debug-background: #171b1c;
  --debug-foreground: #edf0e8;
  --debug-muted: #b7c0bb;
  --debug-console-background: #0d1011;
  --debug-console-border: #3b4846;
  --debug-console-muted: #8ea09a;
  --debug-level: #a8d5bd;
  --debug-warning: #e7bd75;
  --debug-error: #ef8e8e;
}

.sessions-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.sessions-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.sessions-heading h2 {
  margin: 0;
}

.sessions-intro {
  max-width: 48rem;
  margin: 0.65rem 0 0;
  color: var(--muted);
}

.sessions-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.sessions-list {
  display: grid;
  gap: 0.75rem;
}

.sessions-section {
  margin-top: 2rem;
}

.sessions-section > h3,
.sessions-section-heading h3 {
  margin: 0 0 0.65rem;
}

.sessions-section-heading p {
  margin: 0 0 0.65rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.session-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 4px 16px rgb(45 66 55 / 5%);
}

.session-card h3 {
  margin: 0;
  font-size: 1rem;
}

.session-card-meta,
.session-card-counts {
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: 0.74rem;
}

.session-card-counts { color: var(--ink); }

.session-card-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 0.5rem;
}

.sessions-empty {
  margin: 0;
  padding: 2rem;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  color: var(--muted);
  text-align: center;
}

.sessions-empty.is-error { color: var(--red, #a33b32); }

@media (max-width: 700px) {
  .sessions-heading,
  .session-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .session-card-actions { width: 100%; }
}

.debug-console-shell {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
}

.debug-console-header,
.debug-console-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.debug-console-header h1 {
  margin: 0;
}

.debug-console-help {
  color: var(--debug-muted);
}

.debug-console-output {
  min-height: 28rem;
  max-height: calc(100vh - 12rem);
  overflow: auto;
  padding: 1rem;
  border: 1px solid var(--debug-console-border);
  border-radius: 0.75rem;
  background: var(--debug-console-background);
  font: 0.84rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.debug-console-line {
  display: grid;
  grid-template-columns: 5.5rem 4.8rem 15rem minmax(16rem, auto);
  gap: 0.7rem;
  padding: 0.12rem 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.debug-console-time,
.debug-console-source,
.debug-console-fields {
  color: var(--debug-console-muted);
}

.debug-console-level { color: var(--debug-level); }
.debug-console-line--warning .debug-console-level { color: var(--debug-warning); }
.debug-console-line--error .debug-console-level { color: var(--debug-error); }
.debug-console-fields { grid-column: 4; }

@media (max-width: 800px) {
  .debug-console-header { align-items: flex-start; flex-direction: column; }
  .debug-console-line { display: block; margin-bottom: 0.55rem; }
  .debug-console-line > span { margin-right: 0.5rem; }
  .debug-console-fields { display: block; margin-top: 0.15rem; }
}