/* ============================================================================
   Case Closed — application stylesheet
   Depends on tokens.css, which must be loaded first.

   Replaces the previous static/style.css: 3,394 lines, zero custom properties,
   ~1,500 hardcoded colour literals, five gradients, twelve radii, and roughly
   42% of its rules sitting below the media queries with no responsive
   behaviour at all.

   Rules of this file:
     · every colour, space, radius, shadow and duration comes from a token
     · elevation is a border unless the thing genuinely floats
     · no gradients
     · the accent is action and state, never decoration
     · responsive rules live WITH their component, not in a trailing block
   ========================================================================== */

/* ------------------------------------------------------------------- base */

html { -webkit-text-size-adjust: 100%; }

body.app-body {
  margin: 0;
  min-height: 100vh;
  background: var(--surface-page);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

a { color: var(--text-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-active); }

button { font: inherit; color: inherit; }

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-4);
  background: var(--action);
  color: var(--action-text);
  border-radius: var(--radius-md);
  transform: translateY(-200%);
  transition: transform var(--transition-base);
}
.skip-link:focus { transform: translateY(0); }

/* Icons ------------------------------------------------------------------ */
.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: currentColor;
  vertical-align: middle;
}
.icon-sm { width: 1rem; height: 1rem; }
.icon-lg { width: 1.5rem; height: 1.5rem; }

.kbd {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-1);
  min-width: 1.5rem;
  height: 1.25rem;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}

/* ==========================================================================
   Controls
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-h);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base),
              color var(--transition-base);
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn--primary {
  background: var(--action);
  color: var(--action-text);
}
.btn--primary:hover:not(:disabled) { background: var(--action-hover); }
.btn--primary:active:not(:disabled) { background: var(--action-active); }

.btn--secondary {
  background: var(--surface);
  color: var(--action-secondary-text);
  border-color: var(--action-secondary-border);
}
.btn--secondary:hover:not(:disabled) { background: var(--surface-hover); }

.btn--ghost {
  color: var(--text-secondary);
  padding: 0 var(--space-3);
}
.btn--ghost:hover:not(:disabled) { background: var(--surface-hover); color: var(--text-strong); }

.btn--danger { background: var(--negative); color: var(--surface); }
.btn--danger:hover:not(:disabled) { filter: brightness(.92); }

.btn--sm { height: 1.75rem; padding: 0 var(--space-3); font-size: var(--text-xs); }
.btn--lg { height: var(--control-h-lg); padding: 0 var(--space-5); font-size: var(--text-base); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-h);
  height: var(--control-h);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
}
.icon-btn:hover { background: var(--surface-hover); color: var(--text-strong); }
.icon-btn--primary { background: var(--action); color: var(--action-text); }
.icon-btn--primary:hover { background: var(--action-hover); color: var(--action-text); }

/* Fields ----------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: var(--space-2); margin: 0 0 var(--space-4); border: 0; padding: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field--inline { flex-direction: row; align-items: center; gap: var(--space-2); margin: 0; }

.field-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  letter-spacing: var(--tracking-normal);
}
.required { color: var(--negative); }
.optional { color: var(--text-muted); font-weight: var(--weight-normal); }

.input, .select {
  width: 100%;
  min-height: var(--control-h);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--text-sm);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
textarea.input { resize: vertical; line-height: var(--leading-normal); }
.input::placeholder { color: var(--text-muted); }
.input:hover, .select:hover { border-color: var(--text-muted); }
.input.intake-error { border-color: var(--negative); }

.select {
  appearance: none;
  padding-right: var(--space-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b5744' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-2) center;
  background-size: 1rem;
  cursor: pointer;
}

.radio-group { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.radio { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); cursor: pointer; }
.radio input { accent-color: var(--accent-active); width: 1rem; height: 1rem; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  height: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.badge--positive { background: var(--positive-surface); border-color: var(--positive-border); color: var(--positive); }
.badge--caution  { background: var(--caution-surface);  border-color: var(--caution-border);  color: var(--caution); }
.badge--negative { background: var(--negative-surface); border-color: var(--negative-border); color: var(--negative); }

/* ==========================================================================
   Shell
   ========================================================================== */

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

.main { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}

/* Sidebar ---------------------------------------------------------------- */

.sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface-muted);
  border-right: 1px solid var(--border);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 52px;
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--border);
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-sm);
  background: var(--action);
  color: var(--action-text);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
}
.brand-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  letter-spacing: var(--tracking-snug);
}

.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-4) var(--space-2);
}
.sidebar-heading {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-muted);
}

.sidebar-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: calc(100% - var(--space-6));
  margin: 0 var(--space-3) var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color var(--transition-base);
}
.sidebar-search:hover { border-color: var(--border-strong); }
.sidebar-search span { flex: 1; text-align: left; }

.sidebar-sessions { flex: 1; overflow-y: auto; padding: 0 var(--space-2) var(--space-3); }

.session-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition-base);
}
.session-item:hover { background: var(--surface-hover); }
.session-item.active { background: var(--surface); border-color: var(--border); }
.session-main { flex: 1; min-width: 0; }
.session-title {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.session-time, .session-time-display {
  font-size: var(--text-2xs);
  color: var(--text-muted);
}
.session-rename-input {
  width: 100%;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-sm);
  background: var(--surface);
}

.session-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem; height: 1.5rem;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-muted);
  opacity: 0; cursor: pointer;
  transition: opacity var(--transition-base), background var(--transition-base);
}
.session-item:hover .session-menu-btn,
.session-menu-btn:focus-visible { opacity: 1; }
.session-menu-btn:hover { background: var(--surface-active); color: var(--text-strong); }

.session-menu {
  position: absolute;
  right: var(--space-2); top: 100%;
  z-index: var(--z-dropdown);
  min-width: 9rem;
  padding: var(--space-1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.session-menu button {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; padding: var(--space-2) var(--space-3);
  border: 0; border-radius: var(--radius-sm);
  background: transparent; text-align: left;
  font-size: var(--text-sm); color: var(--text); cursor: pointer;
}
.session-menu button:hover { background: var(--surface-hover); }

.sidebar-empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.sidebar-foot { border-top: 1px solid var(--border); padding: var(--space-3); }
.account { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.account-avatar { width: 1.75rem; height: 1.75rem; border-radius: var(--radius-full); object-fit: cover; flex: none; }
.account-avatar--fallback {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-active); color: var(--text-secondary);
}
.account-name {
  flex: 1; min-width: 0;
  font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.account-signout { font-size: var(--text-2xs); color: var(--text-muted); text-decoration: none; }
.account-signout:hover { color: var(--text-link); text-decoration: underline; }

.sidebar-toggle {
  display: none;
  position: fixed;
  top: var(--space-2); left: var(--space-2);
  z-index: var(--z-sticky);
  width: var(--control-h-lg); height: var(--control-h-lg);
  align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-strong);
  cursor: pointer;
}
.sidebar-backdrop {
  position: fixed; inset: 0;
  z-index: var(--z-backdrop);
  background: rgba(58, 42, 26, .35);
}

/* Matter bar ------------------------------------------------------------- */

.matter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 52px;
  padding: var(--space-2) var(--space-5);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.matter-identity { flex: 1; min-width: 0; }
.matter-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.matter-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.matter-status { display: flex; align-items: center; gap: var(--space-2); }

.strength-chip {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.strength-chip__label {
  font-size: var(--text-2xs); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--text-muted);
}
.strength-chip__value { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-strong); }
.strength-chip__track {
  width: 3rem; height: 4px;
  background: var(--surface-active);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.strength-chip__fill {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: left center;
  background: var(--text-muted);
  transition: transform var(--duration-slow) var(--ease-out), background var(--transition-base);
}
.strength-chip[data-rating="strong"]   .strength-chip__fill { background: var(--positive); }
.strength-chip[data-rating="moderate"] .strength-chip__fill { background: var(--caution); }
.strength-chip[data-rating="weak"]     .strength-chip__fill { background: var(--negative); }

.timer-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: var(--control-h); padding: 0 var(--space-3);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-xs); color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition-base);
}
.timer-chip:hover { background: var(--surface-hover); }

.role-selector { display: flex; align-items: center; gap: var(--space-2); }
.role-label {
  font-size: var(--text-2xs); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--text-muted);
}
.role-dropdown { position: relative; }
.role-dropdown-toggle {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: var(--control-h); padding: 0 var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  font-size: var(--text-xs); color: var(--text-strong); cursor: pointer;
}
.role-dropdown-toggle:hover { background: var(--surface-hover); }
.role-dropdown-menu {
  position: absolute; right: 0; top: calc(100% + var(--space-1));
  z-index: var(--z-dropdown);
  min-width: 9rem; padding: var(--space-1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: none;
}
.role-dropdown.open .role-dropdown-menu,
.role-dropdown-menu.show { display: block; }
.role-option {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm); cursor: pointer;
}
.role-option:hover { background: var(--surface-hover); }
.role-option.active { background: var(--accent-subtle); color: var(--accent-text); font-weight: var(--weight-medium); }

/* ==========================================================================
   Conversation
   ========================================================================== */

.chat-pane {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  border-right: 1px solid var(--border);
  background: var(--surface-page);
}

.toolbar {
  display: flex; align-items: center; gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
  scrollbar-width: none;
}
.toolbar::-webkit-scrollbar { display: none; }
.toolbar-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 1.75rem; padding: 0 var(--space-3);
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: transparent;
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  color: var(--text-secondary); white-space: nowrap; cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
}
.toolbar-btn:hover { background: var(--surface-hover); color: var(--text-strong); }
.toolbar-btn.is-loading { opacity: .6; pointer-events: none; }

.chat-box {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: var(--space-5) var(--space-5) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-4);
}

.chat-message { display: flex; flex-direction: column; gap: var(--space-1); max-width: 90%; }
.chat-message.user, .chat-message.user-message { align-self: flex-end; align-items: flex-end; }
.chat-message.ai, .chat-message.ai-message { align-self: flex-start; }

.message-bubble {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ai-message .message-bubble,
.chat-message.ai .message-bubble {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}
.user-message .message-bubble,
.chat-message.user .message-bubble {
  background: var(--action);
  color: var(--action-text);
}
.message-timestamp { font-size: var(--text-2xs); color: var(--text-muted); }

/* Citations on a grounded chat answer (renderGroundedMessage in script.js).
   Source-conscious is a product principle, not a footnote — every grounded
   reply names what it drew from, inside the same bubble as the answer. */
.chat-citations {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}
.chat-citations strong {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-muted);
}
.chat-citations ol {
  list-style: none;
  counter-reset: citation;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.chat-citations li {
  counter-increment: citation;
  padding-left: var(--space-5);
  position: relative;
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--text-secondary);
}
.chat-citations li::before {
  content: counter(citation) '.';
  position: absolute;
  left: 0;
  width: var(--space-4);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.chat-citations a { color: var(--text-link); }

.composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5) var(--space-4);
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.composer textarea {
  grid-column: 1;
  width: 100%;
  max-height: 40vh;
  padding: var(--space-3);
  background: var(--surface-page);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  font: inherit; font-size: var(--text-base);
  line-height: var(--leading-normal);
  resize: none;
}
.composer textarea::placeholder { color: var(--text-muted); }
.composer-actions { grid-column: 2; display: flex; gap: var(--space-1); }
.composer-hint {
  grid-column: 1 / -1;
  font-size: var(--text-2xs);
  color: var(--text-muted);
}
.mic-btn.recording, .mic-btn.voice-active {
  background: var(--negative-surface);
  color: var(--negative);
  animation: mic-pulse 1.4s var(--ease-in-out) infinite;
}
.send-btn.send-flying { animation: send-off var(--duration-base) var(--ease-out); }
.voice-typing { color: var(--accent-text); }

@keyframes mic-pulse { 0%,100% { opacity: 1 } 50% { opacity: .55 } }
@keyframes send-off { to { transform: translate(6px, -6px); opacity: .4 } }

/* ==========================================================================
   Matter panel
   ========================================================================== */

.panel-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface); }

.panel-tabs {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}
.panel-tab {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent;
  background: transparent;
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--text-muted); cursor: pointer;
  transition: color var(--transition-base), border-color var(--transition-base);
}
.panel-tab:hover { color: var(--text-strong); }
.panel-tab.active { color: var(--text-strong); border-bottom-color: var(--accent); }
.tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.125rem; height: 1.125rem; padding: 0 var(--space-1);
  background: var(--surface-active); border-radius: var(--radius-full);
  font-size: var(--text-2xs); font-weight: var(--weight-semibold); color: var(--text-secondary);
}

.panel-content { flex: 1; min-height: 0; overflow-y: auto; }
.panel-tab-content { display: none; }
.panel-tab-content.active { display: block; }
.panel-section { padding: var(--space-5); }
.panel-section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-4);
}
.section-title {
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--text-muted);
}

/* Empty states ----------------------------------------------------------- */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-2);
  padding: var(--space-10) var(--space-5);
  text-align: center;
}
.empty-state__icon { width: 1.75rem; height: 1.75rem; color: var(--icon-decorative); }
.empty-state__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-strong); }
.empty-state__body { max-width: 34ch; font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-relaxed); }
p.empty-state { display: block; padding: var(--space-8) 0; font-size: var(--text-sm); color: var(--text-muted); }

/* Record ----------------------------------------------------------------- */

.analysis-section, .record-section { margin-bottom: var(--space-6); }
.analysis-section h4, .analysis-section-title {
  margin-bottom: var(--space-3);
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--text-muted);
}
.analysis-section ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.analysis-section li {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
.analysis-section li::before {
  content: ""; position: absolute;
  left: 0; top: .55em;
  width: 4px; height: 4px; border-radius: var(--radius-full);
  background: var(--accent);
}
.facts-toggle {
  margin-top: var(--space-2);
  border: 0; background: transparent; padding: 0;
  font-size: var(--text-xs); color: var(--text-link); cursor: pointer;
}
.facts-toggle:hover { text-decoration: underline; }
.facts-hidden { display: none; }

.party-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.party-item + .party-item { margin-top: var(--space-2); }
.party-role {
  flex: none;
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

/* Chronology ------------------------------------------------------------- */

.timeline-section { margin-bottom: var(--space-5); }
.timeline-container { position: relative; padding-left: var(--space-5); }
.timeline-container::before {
  content: ""; position: absolute;
  left: 5px; top: 6px; bottom: 6px;
  width: 1px; background: var(--border);
}
.timeline-event { position: relative; padding-bottom: var(--space-5); }
.timeline-event:last-child { padding-bottom: 0; }
.timeline-marker {
  position: absolute; left: calc(var(--space-5) * -1); top: 4px;
  width: 11px; height: 11px;
  border: 2px solid var(--surface);
  border-radius: var(--radius-full);
  background: var(--accent);
}
.timeline-event.tag-incident .timeline-marker { background: var(--negative); }
.timeline-event-content { display: flex; flex-direction: column; gap: var(--space-1); }
.timeline-date {
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.timeline-description { font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.timeline-details { font-size: var(--text-xs); color: var(--text-muted); }
.timeline-manual-tag {
  align-self: flex-start;
  padding: 0 var(--space-2);
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  font-size: var(--text-2xs); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--text-muted);
}
.timeline-add-event {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-4); padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

/* Authority -------------------------------------------------------------- */

.authority-switch {
  display: inline-flex; gap: var(--space-1);
  padding: var(--space-1);
  margin-bottom: var(--space-4);
  background: var(--surface-muted);
  border-radius: var(--radius-md);
}
.authority-switch__btn {
  padding: var(--space-1) var(--space-3);
  border: 0; border-radius: var(--radius-sm);
  background: transparent;
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  color: var(--text-secondary); cursor: pointer;
}
.authority-switch__btn.active { background: var(--surface); color: var(--text-strong); box-shadow: var(--shadow-sm); }

.cases-filter { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }

.case-item {
  display: block; width: 100%;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-align: left; cursor: pointer;
  transition: border-color var(--transition-base), background var(--transition-base);
}
.case-item + .case-item { margin-top: var(--space-2); }
.case-item:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.case-item.bookmarked { border-left: 2px solid var(--accent); }

.case-title {
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--text-strong); line-height: var(--leading-snug);
}
.case-title--detail { font-size: var(--text-lg); }
.case-citation, .cases-condensed-citation {
  margin-top: var(--space-1);
  font-size: var(--text-xs); color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.case-snippet {
  margin-top: var(--space-2);
  font-size: var(--text-sm); color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.case-link { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); }
.relevance-reason {
  margin-top: var(--space-2); padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-xs); color: var(--text-muted); line-height: var(--leading-relaxed);
}

.case-relevance { display: inline-flex; align-items: center; gap: var(--space-2); }
.relevance-excellent { background: var(--positive-surface); border-color: var(--positive-border); color: var(--positive); }
.relevance-good      { background: var(--positive-surface); border-color: var(--positive-border); color: var(--positive); }
.relevance-fair      { background: var(--caution-surface);  border-color: var(--caution-border);  color: var(--caution); }
.relevance-poor      { background: var(--surface-muted);    border-color: var(--border);          color: var(--text-muted); }

/* Treatment signals. Never colour alone — each carries an icon and a label. */
.treatment-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 0 var(--space-2); height: 1.375rem;
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  font-size: var(--text-2xs); font-weight: var(--weight-medium);
}
.treatment-good     { background: var(--positive-surface); border-color: var(--positive-border); color: var(--positive); }
.treatment-warning  { background: var(--caution-surface);  border-color: var(--caution-border);  color: var(--caution); }
.treatment-negative { background: var(--negative-surface); border-color: var(--negative-border); color: var(--negative); }
.treatment-checking, .treatment-placeholder { color: var(--text-muted); font-size: var(--text-xs); }

/* Case detail ------------------------------------------------------------ */

.cases-detail-view { display: flex; flex-direction: column; min-height: 0; }
.cases-detail-top { margin-bottom: var(--space-4); }
.cases-detail-back-row { margin-bottom: var(--space-3); }
.cases-back-btn {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 0; border: 0; background: transparent;
  font-size: var(--text-xs); color: var(--text-link); cursor: pointer;
}
.cases-back-btn:hover { text-decoration: underline; }
.cases-detail-card {
  padding: var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-page);
}
.cases-detail-card-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-strong); }
.cases-detail-card-citation { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--text-muted); }
.cases-detail-card-relevance { margin-top: var(--space-3); }
.cases-detail-condensed-header {
  position: sticky; top: 0; z-index: var(--z-raised);
  padding: var(--space-3) var(--space-5);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.cases-condensed-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.cases-detail-scroll-area { flex: 1; min-height: 0; overflow-y: auto; }
.cases-detail-chat { margin-top: var(--space-5); }
.cases-detail-chat-prompt { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-3); }
.cases-detail-input-fixed {
  display: flex; gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

/* Case notes ------------------------------------------------------------- */

.case-notes-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  cursor: pointer;
}
.case-notes-header-left, .case-notes-header-right { display: flex; align-items: center; gap: var(--space-2); }
.case-notes-chevron { transition: transform var(--transition-base); color: var(--text-muted); }
.case-notes-header.expanded .case-notes-chevron { transform: rotate(180deg); }
.case-notes-body { display: none; }
.case-notes-body.expanded { display: block; }
.case-notes-body-inner { padding-bottom: var(--space-3); }
.case-notes-textarea {
  width: 100%; min-height: 7rem;
  padding: var(--space-3);
  background: var(--surface-page);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  resize: vertical;
}
.case-notes-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); margin-top: var(--space-2);
}
.case-notes-actions { display: flex; align-items: center; gap: var(--space-2); }
.case-notes-char-count, .case-notes-timestamp, .case-notes-status {
  font-size: var(--text-2xs); color: var(--text-muted);
}
.case-notes-delete-btn {
  border: 0; background: transparent; padding: 0;
  font-size: var(--text-2xs); color: var(--negative); cursor: pointer;
}
.notes-icon { color: var(--text-muted); }

/* Statutes --------------------------------------------------------------- */

.statutes-section { margin-bottom: var(--space-5); }
.statutes-disclaimer, .strength-disclaimer {
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--caution-surface);
  border: 1px solid var(--caution-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--caution);
}
.statute-card {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.statute-card + .statute-card { margin-top: var(--space-2); }
.statute-code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--accent-text);
}
.statute-title { margin-top: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-strong); }
.statute-description { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); }
.statute-relevance { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }
.statute-jurisdiction { margin-top: var(--space-1); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); }

/* Strength (in-panel legacy render) -------------------------------------- */

.strength-section { margin-bottom: var(--space-5); }
.strength-header-wrap { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.strength-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-strong); }
.strength-bar-track {
  height: 6px; border-radius: var(--radius-full);
  background: var(--surface-active); overflow: hidden;
}
.strength-bar-fill {
  display: block; height: 100%; width: 100%;
  transform-origin: left center;
  background: var(--accent);
  transition: transform var(--duration-slow) var(--ease-out);
}
.strength-explanation { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); }

/* Draft ------------------------------------------------------------------ */

.draft-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.draft-content { font-size: var(--text-sm); }
.draft-document {
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-serif);
  font-size: var(--text-md);
  line-height: 1.75;
  color: var(--text);
  white-space: pre-wrap;
}
.draft-document h1, .draft-document h2, .draft-document h3 { font-family: var(--font-serif); margin: var(--space-5) 0 var(--space-2); }

/* ==========================================================================
   Documents
   ========================================================================== */

.doc-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.doc-item + .doc-item { margin-top: var(--space-2); }
.doc-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; flex: none;
  background: var(--surface-muted); border-radius: var(--radius-sm);
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  color: var(--text-secondary); font-variant-numeric: tabular-nums;
}
.doc-info { flex: 1; min-width: 0; }
.doc-name {
  font-size: var(--text-sm); color: var(--text-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doc-empty { padding: var(--space-6); text-align: center; font-size: var(--text-sm); color: var(--text-muted); }
.doc-toggle { flex: none; }

.modern-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.modern-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-slider {
  width: 2.25rem; height: 1.25rem;
  background: var(--surface-active);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-full);
  transition: background var(--transition-base), border-color var(--transition-base);
}
.toggle-slider::after {
  content: ""; position: absolute;
  left: 3px; top: 50%; transform: translateY(-50%);
  width: .875rem; height: .875rem;
  background: var(--surface); border-radius: var(--radius-full);
  transition: transform var(--transition-base);
}
.modern-toggle input:checked + .toggle-slider { background: var(--action); border-color: var(--action); }
.modern-toggle input:checked + .toggle-slider::after { transform: translate(1rem, -50%); }
.modern-toggle input:focus-visible + .toggle-slider { box-shadow: var(--focus-ring); }
.toggle-label { font-size: var(--text-xs); color: var(--text-muted); }

.drop-zone {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
  background: rgba(253, 252, 250, .94);
  border: 2px dashed var(--accent);
}
.drop-zone[hidden] { display: none; }
.drop-zone__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.drop-zone__icon { width: 2.5rem; height: 2.5rem; color: var(--accent); }
.drop-zone__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-strong); }
.drop-zone__hint { font-size: var(--text-sm); color: var(--text-muted); }

/* ==========================================================================
   Modals
   ========================================================================== */

.modal {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
  background: rgba(58, 42, 26, .38);
}
.modal[hidden] { display: none; }
.modal--top { align-items: flex-start; padding-top: 12vh; }

.modal__panel {
  display: flex; flex-direction: column;
  width: 100%; max-width: 34rem; max-height: 86vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
}
.modal__panel--sm { max-width: 26rem; }
.modal__panel--wide { max-width: 44rem; }
.modal__panel--search { max-width: 38rem; }

.modal__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}
.modal__title { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.modal__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-5); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.modal__hint { margin-bottom: var(--space-3); font-size: var(--text-xs); color: var(--text-muted); }
.modal__foot {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  background: var(--surface-page);
}
.modal__body .field:last-child { margin-bottom: 0; }

.intake-date-row { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--space-2); margin-bottom: var(--space-2); }

.shortcuts-list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.shortcut-row { display: flex; align-items: center; gap: var(--space-3); }
.shortcut-row dt { flex: none; width: 3.5rem; margin: 0; }
.shortcut-row dd { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }

.time-report-total {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-4);
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--border);
}
.time-report-total-label { font-size: var(--text-xs); color: var(--text-muted); }
.time-report-total-value { font-size: var(--text-2xl); font-weight: var(--weight-semibold); color: var(--text-strong); }
.time-report-list { display: flex; flex-direction: column; }
.time-report-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.time-report-title { font-size: var(--text-sm); color: var(--text); }
.time-report-value { font-size: var(--text-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Global search ---------------------------------------------------------- */

.global-search-input-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}
.global-search-icon { color: var(--text-muted); }
.global-search-input-row input {
  flex: 1; min-width: 0;
  border: 0; background: transparent;
  font: inherit; font-size: var(--text-md); color: var(--text);
}
.global-search-input-row input:focus { outline: none; box-shadow: none; }
.global-search-filters {
  display: flex; gap: var(--space-1);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.global-search-filter {
  padding: var(--space-1) var(--space-3);
  border: 1px solid transparent; border-radius: var(--radius-full);
  background: transparent;
  font-size: var(--text-xs); color: var(--text-secondary); cursor: pointer;
}
.global-search-filter:hover { background: var(--surface-hover); }
.global-search-filter.active { background: var(--surface-active); color: var(--text-strong); font-weight: var(--weight-medium); }
.global-search-results { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-2); max-height: 50vh; }

.gs-section-header, .gs-recent-header {
  padding: var(--space-3) var(--space-3) var(--space-1);
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted);
}
.gs-session-item, .gs-recent-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.gs-session-item:hover, .gs-recent-item:hover,
.gs-session-item.gs-active, .gs-recent-item.gs-active { background: var(--surface-hover); }
.gs-session-title, .gs-result-title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-strong); }
.gs-session-time, .gs-result-meta { font-size: var(--text-2xs); color: var(--text-muted); }
.gs-result-body { min-width: 0; flex: 1; }
.gs-result-snippet { font-size: var(--text-xs); color: var(--text-secondary); line-height: var(--leading-relaxed); }
.gs-result-snippet mark { background: var(--accent-muted); color: var(--text-strong); padding: 0 2px; border-radius: 2px; }
.gs-recent-icon { color: var(--text-muted); }
.gs-empty, .gs-loading { padding: var(--space-8); text-align: center; font-size: var(--text-sm); color: var(--text-muted); }
.gs-empty-icon { color: var(--icon-decorative); margin-bottom: var(--space-2); }

/* ==========================================================================
   Feedback
   ========================================================================== */

.toast-region {
  position: fixed;
  right: var(--space-5); bottom: var(--space-5);
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--space-2);
  pointer-events: none;
}
.app-toast {
  display: flex; align-items: center; gap: var(--space-2);
  min-width: 15rem; max-width: 24rem;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  pointer-events: auto;
  animation: toast-in var(--duration-base) var(--ease-out);
}
.app-toast::before {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  border-radius: var(--radius-full);
  background: currentColor;
}
.app-toast-success::before { background: #8fce9f; }
.app-toast-error::before   { background: #f0a9a3; }
.app-toast-info::before    { background: var(--accent-border); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px) } }

.loading-spinner {
  display: inline-block;
  width: 1rem; height: 1rem;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: var(--radius-full);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }

/* Skeletons -------------------------------------------------------------- */

.skeleton, .skeleton-block, .skeleton-line, .skeleton-title, .skeleton-bubble, .skeleton-card {
  background: var(--surface-muted-strong);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}
.skeleton::after, .skeleton-block::after, .skeleton-line::after,
.skeleton-title::after, .skeleton-bubble::after, .skeleton-card::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: shimmer 1.3s infinite;
}
@keyframes shimmer { to { transform: translateX(100%) } }
.skeleton-line { height: .75rem; margin-bottom: var(--space-2); }
.skeleton-line.short { width: 35% }
.skeleton-line.medium { width: 60% }
.skeleton-line.long { width: 85% }
.skeleton-line.full { width: 100% }
.skeleton-title { height: 1rem; width: 45%; margin-bottom: var(--space-3); }
.skeleton-bubble { height: 3.5rem; width: 70%; border-radius: var(--radius-lg); margin-bottom: var(--space-4); }
.skeleton-card { height: 6rem; margin-bottom: var(--space-2); }
.skeleton-block { height: 4rem; margin-bottom: var(--space-3); }

/* Tooltip ---------------------------------------------------------------- */

.score-tooltip, .doc-tooltip {
  position: fixed;
  z-index: var(--z-tooltip);
  max-width: 18rem;
  padding: var(--space-3);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  pointer-events: none;
}
.tooltip-label { color: var(--surface-muted-strong); }
.tooltip-excellent, .tooltip-good { color: #9ad3ac; }
.tooltip-fair { color: #f0c48a; }
.tooltip-poor { color: #f0a9a3; }

.fade-in { animation: fade-in var(--duration-base) var(--ease-out); }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px) } }

/* ==========================================================================
   Responsive — desktop-first, per the product's actual usage scene.
   >=1280 and 1024 are designed; 768 must be correct and usable; below 600
   is usable but not designed.
   ========================================================================== */

@media (max-width: 1280px) {
  .app { grid-template-columns: 220px minmax(0, 1fr); }
  .panel-section { padding: var(--space-4); }
  .chat-box { padding: var(--space-4); }
}

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

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--z-modal);
    width: min(300px, 85vw);
    transform: translateX(-100%);
    transition: transform var(--duration-base) var(--ease-standard);
    box-shadow: var(--shadow-lg);
  }
  .sidebar.show, .sidebar.active { transform: translateX(0); }
  .sidebar-toggle { display: inline-flex; }
  .matter-bar { padding-left: calc(var(--control-h-lg) + var(--space-4)); }

  /* Two panes stack: conversation on top, matter panel below, each scrolling
     independently so neither collapses to an unusable strip. */
  .workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .chat-pane { border-right: 0; border-bottom: 1px solid var(--border); }
  .chat-message { max-width: 100%; }
}

@media (max-width: 768px) {
  .matter-status { gap: var(--space-1); }
  .role-selector .role-label { display: none; }
  .strength-chip__track { display: none; }
  .toolbar-btn .btn-text { display: none; }
  .toolbar-btn { padding: 0 var(--space-2); }
  .panel-tab .tab-label { font-size: var(--text-xs); }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .intake-date-row { grid-template-columns: minmax(0, 1fr); }
  .modal { padding: var(--space-3); }
  .modal--top { padding-top: var(--space-5); }
  .toast-region { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); }
  .app-toast { max-width: none; }
}

@media (max-width: 600px) {
  .matter-meta { display: none; }
  .panel-section { padding: var(--space-3); }
  .chat-box { padding: var(--space-3); }
  .composer { padding: var(--space-2) var(--space-3) var(--space-3); }
  .panel-tab { padding: var(--space-2); }
  .panel-tab .tab-label { display: none; }
  .modal__panel { max-height: 92vh; }
}

.doc-confirm-label { margin-left: var(--space-1); font-size: var(--text-2xs); }

/* Demo notice — the synthetic-data label required wherever a visitor could
   mistake the fixture matter for a real one. In the flow, never over it. */
.demo-notice {
  flex: none;
  padding: var(--space-2) var(--space-5);
  background: var(--caution-surface);
  border-bottom: 1px solid var(--caution-border);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--caution);
}
.demo-notice strong { font-weight: var(--weight-semibold); }

.doc-confirm-label { margin-left: var(--space-1); font-size: var(--text-2xs); }

/* ==========================================================================
   Classes emitted by script.js that the structural sections above do not
   already cover.
   ========================================================================== */

.cases-filter { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.cases-filter-btn {
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: 1.75rem; padding: 0 var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface);
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  color: var(--text-secondary); cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base);
}
.cases-filter-btn:hover { background: var(--surface-hover); }
.cases-filter-btn.active {
  background: var(--surface-active);
  border-color: var(--border-strong);
  color: var(--text-strong);
}

/* The case card puts the bookmark and the treatment signal on one header row,
   then lets every other child flow full width in source order. Naming grid
   areas here was wrong: several children legitimately share the body slot and
   would overlap. */
.case-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
}
.case-star { grid-column: 1; grid-row: 1; }
.treatment-placeholder { grid-column: 2; grid-row: 1; justify-self: start; min-width: 0; }
.case-item > :not(.case-star):not(.treatment-placeholder) { grid-column: 1 / -1; }
.case-item .case-title { margin-top: var(--space-1); }
.case-item .case-relevance { justify-self: start; }

.case-star {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted); cursor: pointer;
  transition: color var(--transition-base), border-color var(--transition-base);
}
.case-star:hover { color: var(--accent-text); border-color: var(--accent-border); }
.case-star.bookmarked { color: var(--accent-text); border-color: var(--accent-border); background: var(--accent-subtle); }

.relevance-score {
  display: inline-flex; align-items: center;
  padding: 0 var(--space-2); height: 1.25rem;
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
.relevance-score--tooltip { cursor: help; border-style: dashed; }

.treatment-checking {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-2xs); color: var(--text-muted);
}
.treatment-checking .loading-spinner { width: .75rem; height: .75rem; border-width: 1.5px; }

.case-link { justify-self: start; }

/* The detail view reuses the card class but is a single column. */
.cases-detail-card .case-item,
.cases-detail-view .case-item { display: block; }
/* Account center */
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--color-bg, #f7f3ed); }
.login-card { width: min(430px, 100%); display: grid; gap: 18px; padding: 32px; background: var(--color-surface, #fff); border: 1px solid var(--color-border, #d7cec5); border-radius: 8px; }
.login-logo-img { margin: 0 auto; }
.login-title, .login-tagline { margin: 0; text-align: center; }
.login-card form { display: grid; gap: 12px; }
.login-card input { width: 100%; padding: 10px; border: 1px solid var(--color-border, #b8aca2); border-radius: 4px; }
.btn-google-signin { width: 100%; padding: 12px; border: 1px solid var(--color-border, #b8aca2); border-radius: 4px; background: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.auth-divider { display: flex; align-items: center; gap: 12px; color: var(--color-text-muted, #6d625b); }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; border-top: 1px solid var(--color-border, #d7cec5); }
.auth-status { min-height: 1.5em; margin: 0; }
.auth-error { color: #8d2926; }
#account-status.error { color: var(--negative); }
.account-center { width: min(var(--page-max), calc(100% - 32px)); margin: 0 auto; padding: 40px 0 80px; }
.account-center__header, .workspace-row, .account-inline { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.account-panel { background: var(--surface); border: 1px solid var(--border); padding: 24px; margin-top: 20px; border-radius: 8px; }
.account-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.account-form label, .account-panel label { display: grid; gap: 6px; font-weight: 600; }
.account-form input, .account-form textarea, .account-inline input { width: 100%; padding: 10px; border: 1px solid var(--border-control); border-radius: 4px; }
.account-form__wide { grid-column: 1 / -1; }
.workspace-row { padding: 12px 0; border-bottom: 1px solid var(--border); }
.workspace-entry { border-bottom: 1px solid var(--border); }
.workspace-entry .workspace-row { border-bottom: 0; }
.workspace-row span { display: block; color: var(--text-muted); font-size: .875rem; }
.team-manager { padding: 0 0 18px 18px; display: grid; gap: 10px; }
.member-row { display: flex; align-items: center; gap: 8px; }
.member-row span { margin-right: auto; }
.matter-assignment { padding: 12px; border: 1px solid var(--border); border-radius: 4px; }
.matter-assignment > div { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 8px 0; }
.matter-assignment label { display: flex; grid-auto-flow: column; align-items: center; gap: 6px; font-weight: 400; }
.account-panel--danger { border-color: var(--negative-border); }
@media (max-width: 640px) { .account-form { grid-template-columns: 1fr; } .account-form__wide { grid-column: auto; } }