/* Final production AI-shell layer for LEXPrevoyance and Reglement RAG. */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --app-bg: #eaf8ff;
  --app-bg-deep: #d9f0fb;
  --rail-bg: #05080d;
  --rail-row: #111922;
  --rail-border: rgba(125, 219, 255, 0.16);
  --rail-text: #f4fbff;
  --rail-muted: #91a7b4;
  --panel: rgba(255, 255, 255, 0.88);
  --panel-solid: #fbfeff;
  --panel-hover: #f2fbff;
  --ink: #0b1720;
  --ink-soft: #526b79;
  --blue: #0c7f91;
  --blue-strong: #075d71;
  --blue-bright: #64cdf5;
  --blue-soft: #e6f8ff;
  --border-blue: rgba(20, 118, 145, 0.18);
  --card-shadow: 0 18px 54px rgba(22, 86, 112, 0.12);
  --composer-shadow: 0 18px 50px rgba(9, 67, 92, 0.18);
  --radius: 10px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --text: var(--ink);
  --text-muted: var(--ink-soft);
  --primary: var(--blue);
  --primary-strong: var(--blue-strong);
  --secondary: var(--blue-bright);
  --surface: var(--panel-solid);
  --surface-soft: var(--panel);
  --surface-hover: var(--panel-hover);
  --line: var(--border-blue);
  --line-strong: rgba(20, 118, 145, 0.34);
  --bg: var(--app-bg);
  --shadow: var(--card-shadow);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --app-bg: #071018;
  --app-bg-deep: #0b1f2c;
  --rail-bg: #02060a;
  --rail-row: #0b141d;
  --rail-border: rgba(111, 210, 244, 0.16);
  --rail-text: #f2fbff;
  --rail-muted: #8aa5b4;
  --panel: rgba(12, 27, 38, 0.82);
  --panel-solid: #0d1b25;
  --panel-hover: #112838;
  --ink: #edf9ff;
  --ink-soft: #a1bac8;
  --blue: #3bc7ee;
  --blue-strong: #8de4ff;
  --blue-bright: #76dfff;
  --blue-soft: rgba(77, 205, 245, 0.14);
  --border-blue: rgba(111, 210, 244, 0.2);
  --card-shadow: 0 22px 64px rgba(0, 0, 0, 0.36);
  --composer-shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
  --text: var(--ink);
  --text-muted: var(--ink-soft);
  --primary: var(--blue);
  --primary-strong: var(--blue-strong);
  --secondary: var(--blue-bright);
  --surface: var(--panel-solid);
  --surface-soft: var(--panel);
  --surface-hover: var(--panel-hover);
  --line: var(--border-blue);
  --line-strong: rgba(118, 223, 255, 0.38);
  --bg: var(--app-bg);
  --shadow: var(--card-shadow);
}

html,
body {
  background: var(--app-bg) !important;
  color: var(--ink) !important;
  font-family: Inter, "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body::after,
.rag-mesh {
  display: none !important;
}

.rag-app {
  min-height: 100vh !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.72), transparent 8%, transparent 92%, rgba(255, 255, 255, 0.72)),
    linear-gradient(180deg, #f8fdff 0, var(--app-bg) 34%, var(--app-bg-deep) 100%) !important;
  overflow-x: hidden !important;
}

.rag-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 35 !important;
  min-height: 74px !important;
  margin-left: 330px !important;
  width: calc(100% - 330px) !important;
  padding: 12px clamp(20px, 3vw, 38px) !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: center !important;
  background: rgba(239, 250, 255, 0.88) !important;
  border-bottom: 1px solid rgba(20, 118, 145, 0.16) !important;
  box-shadow: 0 10px 28px rgba(19, 83, 110, 0.08) !important;
  backdrop-filter: blur(20px) !important;
}

.rag-back,
.rag-brand {
  display: none !important;
}

.history-toggle {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  color: var(--blue-strong) !important;
  background: rgba(255, 255, 255, 0.84) !important;
  border: 1px solid var(--border-blue) !important;
  box-shadow: 0 8px 20px rgba(16, 86, 112, 0.08) !important;
}

.history-toggle-label {
  display: none !important;
}

.rag-topnote {
  gap: 12px !important;
  justify-content: flex-end !important;
  color: var(--ink-soft) !important;
  font-family: Inter, "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 0.82rem !important;
  white-space: normal !important;
}

.model-toggle,
.quota-pill,
.quota-request-link,
.rag-theme-toggle {
  min-height: 42px !important;
  border-radius: 12px !important;
  border: 1px solid var(--border-blue) !important;
  background: rgba(255, 255, 255, 0.84) !important;
  box-shadow: 0 8px 20px rgba(16, 86, 112, 0.07) !important;
}

.model-toggle {
  display: inline-grid !important;
  grid-template-columns: repeat(2, minmax(82px, 1fr)) !important;
  padding: 4px !important;
}

.model-toggle-single {
  grid-template-columns: minmax(96px, 1fr) !important;
}

.model-toggle-single .model-toggle-option {
  cursor: default !important;
}

.model-toggle-option {
  min-height: 32px !important;
  border-radius: 10px !important;
  color: var(--ink-soft) !important;
  font-weight: 760 !important;
  font-size: 0.82rem !important;
}

.model-toggle-option.active {
  color: #f6fdff !important;
  background: linear-gradient(180deg, #168ba1, #0b6d82) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 8px 18px rgba(13, 114, 137, 0.18) !important;
}

.quota-pill {
  position: relative !important;
  min-width: 210px !important;
  padding: 8px 14px 8px 44px !important;
  color: var(--blue-strong) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  font-weight: 760 !important;
}

.quota-pill::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  border-radius: 5px;
  background: linear-gradient(180deg, #6ecff2, #148ba3);
  box-shadow: 0 0 0 4px rgba(100, 205, 245, 0.14);
}

.quota-request-link,
.rag-theme-toggle {
  color: var(--ink) !important;
  font-weight: 760 !important;
  text-decoration: none !important;
}

.rag-account-name {
  max-width: 160px !important;
  color: var(--ink-soft) !important;
  font-size: 0.82rem !important;
  font-weight: 650 !important;
}

.rag-workspace,
.rag-app.history-collapsed .rag-workspace {
  width: 100% !important;
  max-width: none !important;
  min-height: calc(100vh - 74px) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 330px minmax(0, 1fr) minmax(320px, 370px) !important;
  gap: 0 !important;
  align-items: stretch !important;
}

.rag-app.history-collapsed .rag-workspace {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 370px) !important;
}

.rag-app.history-collapsed .rag-topbar {
  margin-left: 0 !important;
  width: 100% !important;
}

.rag-app.history-collapsed .rag-history-sidebar {
  display: none !important;
}

.rag-history-sidebar {
  grid-column: 1 !important;
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  z-index: 45 !important;
  width: 330px !important;
  min-width: 330px !important;
  height: 100vh !important;
  max-height: 100vh !important;
  padding: 18px 14px !important;
  display: block !important;
  background: var(--rail-bg) !important;
  border-right: 1px solid var(--rail-border) !important;
}

.history-panel {
  position: relative !important;
  height: 100% !important;
  max-height: none !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.history-panel::before {
  content: "⚖  LEXPrevoyance";
  min-height: 42px;
  margin: 2px 0 18px;
  display: flex;
  align-items: center;
  color: var(--rail-text);
  font-size: 1.04rem;
  font-weight: 820;
  letter-spacing: -0.01em;
}

.reglement-app .history-panel::before {
  content: "▦  Reglement RAG";
}

.history-panel .source-panel-heading {
  margin: 0 0 14px !important;
  padding: 0 0 14px !important;
  min-height: auto !important;
  border-bottom: 1px solid rgba(125, 219, 255, 0.12) !important;
}

.history-panel .rag-kicker {
  margin-bottom: 6px !important;
  color: var(--blue-bright) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.16em !important;
}

.history-panel h2 {
  color: var(--rail-text) !important;
  font-size: 1.12rem !important;
  line-height: 1.2 !important;
  font-weight: 780 !important;
}

.history-panel .ghost-button {
  min-height: 32px !important;
  padding: 6px 10px !important;
  color: var(--rail-muted) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(125, 219, 255, 0.13) !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}

.history-new-button {
  min-height: 48px !important;
  margin: 0 0 14px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(125, 219, 255, 0.18) !important;
  border-radius: 9px !important;
  color: #f6fdff !important;
  background: linear-gradient(180deg, #168ba1, #0b6d82) !important;
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.26) !important;
  font-size: 0.94rem !important;
  font-weight: 780 !important;
}

.history-new-button::before {
  content: "+";
  margin-right: 10px;
  font-size: 1.35rem;
  line-height: 0;
  font-weight: 400;
}

.history-list {
  max-height: none !important;
  min-height: 0 !important;
  display: grid !important;
  gap: 6px !important;
  overflow: auto !important;
  padding: 0 2px 14px 0 !important;
}

.history-empty {
  color: var(--rail-muted) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px dashed rgba(125, 219, 255, 0.14) !important;
}

.history-item {
  min-height: 76px !important;
  padding: 12px 13px !important;
  display: grid !important;
  gap: 7px !important;
  color: var(--rail-text) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  transform: none !important;
}

.history-item:hover {
  background: var(--rail-row) !important;
  border-color: rgba(125, 219, 255, 0.12) !important;
}

.history-item.active {
  background: linear-gradient(90deg, rgba(100, 205, 245, 0.13), rgba(255, 255, 255, 0.035)) !important;
  border-color: rgba(125, 219, 255, 0.2) !important;
  box-shadow: inset 3px 0 0 var(--blue-bright) !important;
}

.history-question {
  color: var(--rail-text) !important;
  font-size: 0.86rem !important;
  line-height: 1.32 !important;
  font-weight: 660 !important;
  -webkit-line-clamp: 2 !important;
}

.history-preview {
  display: none !important;
}

.history-meta {
  gap: 7px !important;
  color: var(--rail-muted) !important;
  font-family: Inter, "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 0.74rem !important;
}

.history-meta span {
  min-height: auto !important;
  max-width: none !important;
  padding: 0 !important;
  color: var(--rail-muted) !important;
  background: transparent !important;
  border: 0 !important;
}

.history-meta span + span::before {
  content: "·";
  margin-right: 7px;
  color: rgba(145, 167, 180, 0.62);
}

.rag-main {
  grid-column: 2 !important;
  min-width: 0 !important;
  min-height: calc(100vh - 74px) !important;
  padding: 28px clamp(24px, 4vw, 56px) 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  background: transparent !important;
}

.rag-answer {
  order: 1 !important;
  flex: 1 1 auto !important;
  min-height: 410px !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

#answer-card {
  width: min(870px, 100%) !important;
  align-self: flex-start !important;
  margin: 0 auto !important;
  padding: 26px 30px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid var(--border-blue) !important;
  border-radius: 11px !important;
  box-shadow: var(--card-shadow) !important;
}

.rag-empty {
  width: min(820px, 100%) !important;
  min-height: 390px !important;
  margin: 0 auto !important;
  padding: 42px 24px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--ink-soft) !important;
  text-align: center !important;
}

.rag-empty .rag-kicker {
  color: var(--blue-strong) !important;
}

.rag-empty h2 {
  max-width: 620px !important;
  margin: 0 auto 12px !important;
  color: var(--ink) !important;
  font-family: Inter, "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif !important;
  font-size: clamp(2.1rem, 5vw, 3.7rem) !important;
  line-height: 1.03 !important;
  font-weight: 780 !important;
  letter-spacing: -0.02em !important;
}

.rag-empty p:last-child {
  max-width: 560px !important;
  margin-inline: auto !important;
  line-height: 1.65 !important;
}

.rag-form-panel {
  order: 2 !important;
  position: sticky !important;
  bottom: 16px !important;
  z-index: 20 !important;
  width: min(870px, 100%) !important;
  margin: auto auto 0 !important;
  padding: 10px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(20, 118, 145, 0.24) !important;
  border-radius: 12px !important;
  box-shadow: var(--composer-shadow) !important;
  backdrop-filter: blur(18px) !important;
}

.rag-panel-heading {
  display: none !important;
}

.rag-form {
  width: 100% !important;
  margin: 0 !important;
  display: grid !important;
  gap: 8px !important;
}

.rag-form label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
}

textarea,
#question {
  width: 100% !important;
  height: 68px !important;
  min-height: 68px !important;
  max-height: 170px !important;
  padding: 14px 16px !important;
  color: var(--ink) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  resize: none !important;
  line-height: 1.45 !important;
  font-size: 0.96rem !important;
  caret-color: var(--blue) !important;
}

textarea::placeholder,
#question::placeholder {
  color: #728794 !important;
  font-style: normal !important;
}

textarea:focus,
#question:focus {
  background: #fafdff !important;
  outline: none !important;
  box-shadow: inset 0 0 0 1px rgba(20, 118, 145, 0.14) !important;
}

.rag-actions {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 4px 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 9px !important;
}

.rag-hint {
  margin-right: auto !important;
  color: var(--ink-soft) !important;
  font-size: 0.82rem !important;
  line-height: 1.25 !important;
}

#ask-button,
.quota-dialog button[type="submit"] {
  min-height: 40px !important;
  padding: 9px 20px !important;
  color: #f6fdff !important;
  background: linear-gradient(180deg, #168ba1, #0b6d82) !important;
  border: 0 !important;
  border-radius: 9px !important;
  box-shadow: 0 10px 18px rgba(13, 114, 137, 0.18) !important;
  font-size: 0.92rem !important;
  font-weight: 780 !important;
}

#ask-button::before {
  content: "↗";
  margin-right: 8px;
  font-weight: 700;
}

#ask-button:disabled {
  color: #dbe8ed !important;
  background: #8d969d !important;
  box-shadow: none !important;
}

.button-secondary,
.ghost-button {
  min-height: 40px !important;
  padding: 9px 15px !important;
  color: var(--ink-soft) !important;
  background: #f7fcff !important;
  border: 1px solid var(--border-blue) !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  font-size: 0.88rem !important;
  font-weight: 720 !important;
}

.answer-toolbar {
  margin-bottom: 20px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--border-blue) !important;
}

.answer-meta {
  color: var(--ink-soft) !important;
  font-family: Inter, "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 0.78rem !important;
}

.journal-rendered {
  color: var(--ink) !important;
  font-size: 1rem !important;
  line-height: 1.74 !important;
}

.journal-rendered h1,
.journal-rendered h2,
.journal-rendered h3 {
  color: var(--ink) !important;
  font-family: Inter, "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: -0.015em !important;
  font-weight: 760 !important;
}

.journal-rendered h1 {
  font-size: 1.55rem !important;
}

.journal-rendered h2 {
  font-size: 1.28rem !important;
}

.journal-rendered h3 {
  font-size: 1.08rem !important;
}

.citation-chip,
.citation-link {
  min-height: 24px !important;
  color: var(--blue-strong) !important;
  background: var(--blue-soft) !important;
  border: 1px solid rgba(20, 118, 145, 0.16) !important;
  border-radius: 7px !important;
  font-size: 0.76rem !important;
}

.rag-source-sidebar {
  grid-column: 3 !important;
  position: sticky !important;
  top: 74px !important;
  max-height: calc(100vh - 74px) !important;
  padding: 24px 16px 24px 0 !important;
  display: grid !important;
  background: transparent !important;
}

.source-panel {
  max-height: calc(100vh - 104px) !important;
  padding: 18px !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  background: rgba(255, 255, 255, 0.58) !important;
  border: 1px solid rgba(20, 118, 145, 0.14) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) !important;
}

.source-panel .rag-kicker {
  color: var(--blue-strong) !important;
}

.source-panel h2 {
  color: var(--ink) !important;
  font-size: 1rem !important;
  font-weight: 780 !important;
}

.source-count,
.rag-status {
  color: var(--blue-strong) !important;
  background: var(--blue-soft) !important;
  border: 1px solid rgba(20, 118, 145, 0.16) !important;
  border-radius: 8px !important;
}

.source-card {
  padding: 13px !important;
  color: var(--ink) !important;
  background: rgba(255, 255, 255, 0.76) !important;
  border: 1px solid rgba(20, 118, 145, 0.13) !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  transform: none !important;
}

.source-card:hover {
  background: #ffffff !important;
  border-color: rgba(20, 118, 145, 0.28) !important;
  transform: none !important;
}

.source-code {
  color: #f6fdff !important;
  background: #197fb6 !important;
  border-radius: 6px !important;
}

.source-card.case .source-code {
  background: #2457c5 !important;
}

.source-title {
  color: var(--ink) !important;
  font-size: 0.9rem !important;
  font-weight: 740 !important;
}

.source-subtitle,
.source-reason,
.source-excerpt,
.source-path {
  color: var(--ink-soft) !important;
  font-size: 0.79rem !important;
}

.source-link {
  min-height: 30px !important;
  color: var(--blue-strong) !important;
  background: var(--blue-soft) !important;
  border: 1px solid rgba(20, 118, 145, 0.18) !important;
  border-radius: 8px !important;
}

@media (max-width: 1180px) {
  .rag-topbar {
    margin-left: 300px !important;
    width: calc(100% - 300px) !important;
  }

  .rag-workspace,
  .rag-app.history-collapsed .rag-workspace {
    grid-template-columns: 300px minmax(0, 1fr) !important;
  }

  .rag-history-sidebar {
    width: 300px !important;
    min-width: 300px !important;
  }

  .rag-main {
    grid-column: 2 !important;
  }

  .rag-source-sidebar {
    display: none !important;
  }
}

@media (max-width: 820px) {
  .rag-topbar {
    margin-left: 0 !important;
    width: 100% !important;
    min-height: auto !important;
    padding: 10px 12px !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  .rag-topnote {
    grid-column: 1 / -1 !important;
    justify-content: flex-start !important;
  }

  .rag-workspace,
  .rag-app.history-collapsed .rag-workspace {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: auto !important;
  }

  .rag-main {
    grid-column: 1 !important;
  }

  .rag-history-sidebar {
    width: min(320px, 88vw) !important;
    min-width: 0 !important;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
  }

  .rag-app.history-open .rag-history-sidebar {
    transform: translateX(0);
  }

  .rag-app.history-collapsed .rag-history-sidebar {
    display: block !important;
    transform: translateX(-100%);
  }

  .history-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 44 !important;
    display: none !important;
    background: rgba(3, 7, 10, 0.42) !important;
    border: 0 !important;
  }

  .rag-app.history-open .history-backdrop {
    display: block !important;
  }

  .history-close-mobile {
    display: inline-flex !important;
  }

  .rag-main {
    width: 100% !important;
    min-height: calc(100vh - 116px) !important;
    padding: 18px 12px 18px !important;
  }

  .rag-empty,
  #answer-card,
  .rag-form-panel {
    width: 100% !important;
    max-width: 100% !important;
  }

  .rag-empty {
    min-height: 300px !important;
    padding: 30px 12px !important;
  }

  .rag-empty h2 {
    font-size: clamp(1.75rem, 9vw, 2.35rem) !important;
  }

  #answer-card {
    padding: 20px 16px !important;
  }

  .rag-form-panel {
    bottom: 10px !important;
  }

  .rag-actions {
    flex-wrap: wrap !important;
  }

  .rag-hint {
    flex-basis: 100% !important;
    order: 3 !important;
  }

  #ask-button,
  .button-secondary {
    flex: 1 1 130px !important;
  }
}

/* v3: production chat-shell fidelity pass. Keep this block last. */
.rag-topbar {
  min-height: 64px !important;
  margin-left: 320px !important;
  width: calc(100% - 320px) !important;
  padding: 9px clamp(18px, 2.2vw, 30px) !important;
  gap: 10px !important;
}

.history-toggle {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
}

.rag-topnote {
  gap: 8px !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}

.model-toggle,
.quota-pill,
.quota-request-link,
.rag-theme-toggle {
  min-height: 36px !important;
  border-radius: 10px !important;
  font-size: 0.76rem !important;
}

.model-toggle {
  grid-template-columns: repeat(2, minmax(70px, 1fr)) !important;
  padding: 3px !important;
}

.model-toggle-option {
  min-height: 30px !important;
  border-radius: 8px !important;
  font-size: 0.76rem !important;
}

.quota-pill {
  min-width: 178px !important;
  padding: 7px 12px 7px 38px !important;
}

.quota-pill::before {
  left: 12px !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 5px !important;
}

.quota-request-link,
.rag-theme-toggle {
  padding-inline: 12px !important;
}

.rag-account-name {
  max-width: 118px !important;
  font-size: 0.74rem !important;
}

.rag-workspace,
.rag-app.history-collapsed .rag-workspace {
  min-height: calc(100vh - 64px) !important;
  grid-template-columns: 320px minmax(0, 1fr) minmax(300px, 352px) !important;
}

.rag-history-sidebar {
  width: 320px !important;
  min-width: 320px !important;
  padding: 16px 12px !important;
}

.history-panel::before {
  min-height: 36px !important;
  margin: 0 0 14px !important;
  font-size: 0.96rem !important;
  letter-spacing: -0.02em !important;
}

.history-panel .source-panel-heading {
  margin-bottom: 12px !important;
  padding-bottom: 12px !important;
}

.history-panel .rag-kicker {
  font-size: 0.58rem !important;
  letter-spacing: 0.18em !important;
}

.history-panel h2 {
  font-size: 1rem !important;
  line-height: 1.15 !important;
}

.history-panel .ghost-button {
  min-height: 30px !important;
  padding: 5px 9px !important;
  font-size: 0.72rem !important;
}

.history-new-button {
  min-height: 44px !important;
  margin-bottom: 12px !important;
  border-radius: 8px !important;
  font-size: 0.88rem !important;
}

.history-list {
  gap: 5px !important;
  padding-right: 4px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(125, 219, 255, 0.28) transparent;
}

.history-list::-webkit-scrollbar,
.source-list::-webkit-scrollbar {
  width: 7px;
}

.history-list::-webkit-scrollbar-track,
.source-list::-webkit-scrollbar-track {
  background: transparent;
}

.history-list::-webkit-scrollbar-thumb {
  background: rgba(125, 219, 255, 0.25);
  border-radius: 999px;
}

.source-list::-webkit-scrollbar-thumb {
  background: rgba(22, 98, 126, 0.2);
  border-radius: 999px;
}

.history-item {
  min-height: 64px !important;
  padding: 10px 11px !important;
  gap: 5px !important;
  border-radius: 8px !important;
}

.history-question {
  font-size: 0.78rem !important;
  line-height: 1.28 !important;
  font-weight: 650 !important;
}

.history-meta {
  gap: 5px !important;
  font-size: 0.66rem !important;
}

.history-meta span + span::before {
  margin-right: 5px !important;
}

.rag-main {
  min-height: calc(100vh - 64px) !important;
  padding: 22px clamp(20px, 3vw, 36px) 18px !important;
  gap: 12px !important;
}

.rag-answer {
  min-height: 300px !important;
}

.rag-empty {
  min-height: 280px !important;
  padding: 20px 14px !important;
}

.rag-empty h2 {
  max-width: 560px !important;
  font-size: clamp(1.9rem, 3.4vw, 2.85rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.018em !important;
}

.rag-empty p:last-child {
  max-width: 500px !important;
  font-size: 0.92rem !important;
}

.rag-form-panel {
  width: min(760px, 100%) !important;
  bottom: 18px !important;
  padding: 9px !important;
  border-radius: 11px !important;
}

textarea,
#question {
  height: 62px !important;
  min-height: 62px !important;
  padding: 12px 14px !important;
  font-size: 0.9rem !important;
}

#ask-button,
.quota-dialog button[type="submit"],
.button-secondary,
.ghost-button {
  min-height: 38px !important;
  font-size: 0.82rem !important;
}

#ask-button,
.quota-dialog button[type="submit"] {
  padding: 8px 17px !important;
}

.button-secondary,
.ghost-button {
  padding: 8px 13px !important;
}

.rag-app.has-answer .rag-main {
  padding-top: 22px !important;
}

.rag-app.has-answer .rag-answer {
  min-height: auto !important;
  align-items: flex-start !important;
}

.rag-app.has-answer #answer-card {
  width: min(960px, 100%) !important;
  padding: 24px clamp(22px, 2.2vw, 32px) !important;
}

.rag-app.has-answer .rag-form-panel {
  width: min(960px, 100%) !important;
}

.answer-toolbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: start !important;
  margin-bottom: 18px !important;
}

.answer-actions {
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.answer-meta {
  font-size: 0.72rem !important;
  line-height: 1.35 !important;
}

.journal-rendered {
  font-size: 0.95rem !important;
  line-height: 1.68 !important;
}

.journal-rendered h1 {
  font-size: 1.35rem !important;
}

.journal-rendered h2 {
  font-size: 1.16rem !important;
}

.journal-rendered h3 {
  font-size: 1.02rem !important;
}

.journal-rendered ul,
.journal-rendered ol {
  padding-left: 1.15rem !important;
}

.rag-source-sidebar {
  top: 64px !important;
  max-height: calc(100vh - 64px) !important;
  padding: 18px 14px 18px 0 !important;
}

.source-panel {
  max-height: calc(100vh - 88px) !important;
  padding: 16px !important;
  border-radius: 11px !important;
}

.source-panel h2 {
  font-size: 0.92rem !important;
}

.source-card {
  padding: 12px !important;
}

.source-title {
  font-size: 0.82rem !important;
  line-height: 1.35 !important;
}

.source-subtitle,
.source-reason,
.source-excerpt,
.source-path {
  font-size: 0.73rem !important;
  line-height: 1.45 !important;
}

@media (max-width: 1480px) {
  .rag-workspace,
  .rag-app.history-collapsed .rag-workspace {
    grid-template-columns: 310px minmax(0, 1fr) !important;
  }

  .rag-topbar {
    margin-left: 310px !important;
    width: calc(100% - 310px) !important;
  }

  .rag-history-sidebar {
    width: 310px !important;
    min-width: 310px !important;
  }

  .rag-source-sidebar {
    display: none !important;
  }

  .rag-app.has-answer #answer-card,
  .rag-app.has-answer .rag-form-panel {
    width: min(940px, 100%) !important;
  }
}

@media (max-width: 1180px) {
  .rag-topbar {
    margin-left: 292px !important;
    width: calc(100% - 292px) !important;
  }

  .rag-workspace,
  .rag-app.history-collapsed .rag-workspace {
    grid-template-columns: 292px minmax(0, 1fr) !important;
  }

  .rag-history-sidebar {
    width: 292px !important;
    min-width: 292px !important;
  }

  .history-question {
    font-size: 0.75rem !important;
  }
}

@media (max-width: 820px) {
  .rag-topbar {
    margin-left: 0 !important;
    width: 100% !important;
    min-height: auto !important;
    padding: 8px 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .history-toggle {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
  }

  .rag-topnote {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
  }

  .model-toggle {
    grid-template-columns: repeat(2, minmax(64px, 1fr)) !important;
  }

  .quota-pill {
    min-width: 0 !important;
    max-width: calc(100vw - 20px) !important;
    font-size: 0.72rem !important;
  }

  .rag-theme-toggle [data-rag-theme-label],
  .rag-account-name,
  .owner-link {
    display: none !important;
  }

  .quota-request-link,
  .rag-theme-toggle {
    padding-inline: 10px !important;
    font-size: 0.72rem !important;
  }

  .rag-main {
    min-height: calc(100vh - 116px) !important;
    padding: 14px 10px 12px !important;
  }

  .rag-empty {
    min-height: calc(100vh - 260px) !important;
    align-content: center !important;
    padding: 22px 8px !important;
  }

  .rag-empty h2 {
    max-width: 340px !important;
    font-size: clamp(1.45rem, 7.5vw, 2rem) !important;
  }

  .rag-empty p:last-child {
    max-width: 320px !important;
    font-size: 0.84rem !important;
  }

  .rag-form-panel {
    width: 100% !important;
    bottom: 8px !important;
    padding: 8px !important;
    border-radius: 10px !important;
  }

  textarea,
  #question {
    height: 60px !important;
    min-height: 60px !important;
    font-size: 0.86rem !important;
  }

  .rag-hint {
    display: none !important;
  }

  .rag-app.has-answer #answer-card {
    padding: 18px 15px !important;
  }

  .answer-toolbar {
    grid-template-columns: 1fr !important;
  }

  .answer-actions {
    justify-content: flex-start !important;
  }

  .journal-rendered {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
  }

  .journal-rendered h1 {
    font-size: 1.16rem !important;
  }

  .journal-rendered h2 {
    font-size: 1.04rem !important;
  }
}

@media (max-width: 430px) {
  .rag-topbar {
    padding: 7px 8px !important;
  }

  .model-toggle-option,
  .quota-request-link,
  .rag-theme-toggle {
    font-size: 0.68rem !important;
  }

  .model-toggle {
    grid-template-columns: repeat(2, minmax(58px, 1fr)) !important;
  }

  .quota-pill {
    min-height: 34px !important;
    padding: 7px 9px 7px 34px !important;
  }

  .quota-pill::before {
    left: 10px !important;
  }

  .rag-empty h2 {
    max-width: 300px !important;
    font-size: clamp(1.35rem, 7.2vw, 1.85rem) !important;
  }

  .history-item {
    min-height: 62px !important;
  }

  .history-question {
    font-size: 0.76rem !important;
  }
}

/* v3.1: mobile overflow and composer refinement. */
html,
body,
.rag-app {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

*,
*::before,
*::after {
  box-sizing: border-box !important;
}

.rag-app:not(.has-answer) .rag-form-panel {
  width: min(800px, 100%) !important;
}

.rag-app:not(.has-answer) textarea,
.rag-app:not(.has-answer) #question {
  height: 86px !important;
  min-height: 86px !important;
}

textarea,
#question {
  overflow-y: hidden !important;
}

@media (max-width: 820px) {
  html,
  body,
  .rag-app {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .rag-workspace,
  .rag-app.history-collapsed .rag-workspace {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .rag-main {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: flex !important;
  }

  .rag-answer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .rag-topbar {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  .rag-topnote {
    display: grid !important;
    grid-template-columns: minmax(120px, 138px) minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: center !important;
  }

  .model-toggle,
  .quota-pill,
  .quota-request-link,
  .rag-logout-form,
  .rag-logout-button {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .rag-theme-toggle {
    display: none !important;
  }

  .quota-pill {
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .quota-request-link:not(.owner-link),
  .rag-logout-form {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
    width: auto !important;
  }

  .rag-empty {
    width: 100% !important;
    justify-items: center !important;
  }

  .rag-empty h2,
  .rag-empty p {
    width: 100% !important;
    overflow-wrap: break-word !important;
  }

  .rag-empty h2 {
    max-width: 250px !important;
    font-size: clamp(1.32rem, 6.7vw, 1.72rem) !important;
  }

  .rag-empty p:last-child {
    max-width: 260px !important;
  }

  .rag-app:not(.has-answer) .rag-form-panel {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .rag-form-panel {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .rag-app:not(.has-answer) textarea,
  .rag-app:not(.has-answer) #question {
    height: 82px !important;
    min-height: 82px !important;
  }
}

@media (max-width: 430px) {
  .rag-topnote {
    grid-template-columns: 126px minmax(0, 1fr) !important;
  }

  .quota-pill {
    font-size: 0.68rem !important;
  }

  .quota-request-link:not(.owner-link),
  .rag-logout-form {
    margin-top: 1px !important;
  }

  .rag-empty h2 {
    max-width: 230px !important;
    font-size: clamp(1.25rem, 6.4vw, 1.62rem) !important;
  }

  .rag-empty p:last-child {
    max-width: 238px !important;
  }
}

/* v4: Chat-style empty state and answer-loading motion. */
.rag-empty {
  min-height: 190px !important;
  align-items: end !important;
  padding: 18px 14px 10px !important;
}

.rag-empty > div {
  width: 100% !important;
}

.rag-empty .rag-kicker,
.rag-empty p {
  display: none !important;
}

.rag-empty h2 {
  max-width: 760px !important;
  margin: 0 auto !important;
  color: var(--ink) !important;
  font-size: clamp(1.55rem, 2.45vw, 2.2rem) !important;
  font-weight: 620 !important;
  line-height: 1.16 !important;
  letter-spacing: -0.012em !important;
}

.rag-app:not(.has-answer) .rag-main {
  justify-content: center !important;
  gap: 18px !important;
}

.rag-app:not(.has-answer) .rag-answer {
  flex: 0 0 auto !important;
  min-height: 0 !important;
}

.rag-app:not(.has-answer) .rag-form-panel {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#answer-card[aria-busy="true"] {
  overflow: hidden !important;
}

.legal-loading {
  position: relative !important;
  min-height: 260px !important;
  padding: 34px 18px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 16px !important;
  color: var(--ink-soft) !important;
}

.legal-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(100, 205, 245, 0.12) 42%, rgba(100, 205, 245, 0.25) 50%, rgba(100, 205, 245, 0.12) 58%, transparent 100%);
  transform: translateX(-115%);
  animation: sourceSweep 1.75s ease-in-out infinite;
  pointer-events: none;
}

.loading-orb {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(100, 205, 245, 0.24), rgba(12, 127, 145, 0.12));
  border: 1px solid rgba(20, 118, 145, 0.18);
  box-shadow: 0 14px 34px rgba(12, 127, 145, 0.16);
}

.loading-orb::before,
.loading-orb::after,
.loading-orb span {
  content: "";
  position: absolute;
  border-radius: 999px;
}

.loading-orb::before {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(12, 127, 145, 0.2);
  border-top-color: var(--blue);
  animation: legalSpin 1.05s linear infinite;
}

.loading-orb::after {
  width: 8px;
  height: 8px;
  background: var(--blue);
  box-shadow: 0 0 0 5px rgba(100, 205, 245, 0.18);
}

.loading-orb span {
  inset: -8px;
  border: 1px solid rgba(100, 205, 245, 0.22);
  animation: legalPulse 1.7s ease-in-out infinite;
}

.legal-loading p {
  margin: 0 !important;
  color: var(--ink) !important;
  font-size: 0.92rem !important;
  font-weight: 680 !important;
}

.loading-lines {
  width: min(440px, 82%) !important;
  display: grid !important;
  gap: 8px !important;
}

.loading-lines span {
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(12, 127, 145, 0.08), rgba(12, 127, 145, 0.22), rgba(12, 127, 145, 0.08));
  background-size: 220% 100%;
  animation: sourceLine 1.35s ease-in-out infinite;
}

.loading-lines span:nth-child(2) {
  width: 82%;
  animation-delay: 0.12s;
}

.loading-lines span:nth-child(3) {
  width: 64%;
  animation-delay: 0.24s;
}

@keyframes legalSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes legalPulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.03);
  }
}

@keyframes sourceSweep {
  0% {
    transform: translateX(-115%);
  }
  55%,
  100% {
    transform: translateX(115%);
  }
}

@keyframes sourceLine {
  0%,
  100% {
    background-position: 100% 0;
    opacity: 0.55;
  }
  50% {
    background-position: 0 0;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .legal-loading::before,
  .loading-orb::before,
  .loading-orb span,
  .loading-lines span {
    animation: none !important;
  }
}

@media (max-width: 820px) {
  .rag-empty {
    min-height: 120px !important;
    padding: 10px 8px 2px !important;
  }

  .rag-empty h2 {
    max-width: 300px !important;
    font-size: clamp(1.25rem, 6.4vw, 1.7rem) !important;
  }

  .legal-loading {
    min-height: 220px !important;
    padding: 26px 12px !important;
  }

  .loading-lines {
    width: min(300px, 86%) !important;
  }
}

/* v5: Owner dashboard and admin log screens aligned with the production chat shell. */
.rag-owner-shell,
.rag-access-shell {
  min-height: 100vh !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(18px, 2.4vw, 34px) !important;
  display: grid !important;
  gap: 18px !important;
  color: var(--ink) !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.74), transparent 8%, transparent 92%, rgba(255, 255, 255, 0.74)),
    linear-gradient(180deg, #f8fdff 0, var(--app-bg) 36%, var(--app-bg-deep) 100%) !important;
  font-family: Inter, "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.rag-owner-shell.narrow,
.rag-access-shell {
  width: 100% !important;
  max-width: none !important;
}

.rag-owner-shell.narrow .owner-section,
.rag-access-shell .access-card {
  width: min(980px, 100%) !important;
  margin: 0 auto !important;
}

.rag-owner-shell .rag-back,
.rag-access-shell .rag-back {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 11px !important;
  border: 1px solid rgba(125, 219, 255, 0.2) !important;
  color: var(--rail-text) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  font-size: 0.82rem !important;
  font-weight: 760 !important;
  text-decoration: none !important;
  letter-spacing: 0 !important;
}

.rag-owner-shell .rag-back:hover,
.rag-access-shell .rag-back:hover {
  background: rgba(100, 205, 245, 0.14) !important;
  border-color: rgba(125, 219, 255, 0.34) !important;
}

.rag-owner-shell > .owner-header-actions,
.rag-access-shell > .owner-header-actions {
  width: min(980px, 100%) !important;
  margin: 0 auto !important;
  padding: 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(125, 219, 255, 0.18) !important;
  background: #05080d !important;
  box-shadow: 0 18px 42px rgba(8, 43, 58, 0.16) !important;
}

.owner-header {
  width: 100% !important;
  padding: clamp(22px, 3vw, 34px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 560px) !important;
  gap: clamp(18px, 3vw, 34px) !important;
  align-items: end !important;
  border: 1px solid rgba(125, 219, 255, 0.18) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(100, 205, 245, 0.18), transparent 28%),
    linear-gradient(135deg, #05080d 0%, #08111a 58%, #061018 100%) !important;
  box-shadow: 0 24px 70px rgba(8, 43, 58, 0.18) !important;
  color: var(--rail-text) !important;
}

.owner-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin: 0 0 28px !important;
}

.owner-header .rag-theme-toggle,
.rag-owner-shell > .owner-header-actions .rag-theme-toggle,
.rag-access-shell > .owner-header-actions .rag-theme-toggle,
.owner-header .quota-request-link,
.rag-owner-shell > .owner-header-actions .quota-request-link,
.rag-access-shell > .owner-header-actions .quota-request-link {
  display: inline-flex !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 11px !important;
  border: 1px solid rgba(125, 219, 255, 0.2) !important;
  color: var(--rail-text) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
  font-size: 0.82rem !important;
  font-weight: 760 !important;
}

.owner-header .rag-logout-form,
.rag-owner-shell > .owner-header-actions .rag-logout-form,
.rag-access-shell > .owner-header-actions .rag-logout-form {
  display: inline-flex !important;
  margin: 0 !important;
}

.owner-header .rag-kicker,
.owner-section .rag-kicker,
.access-card .rag-kicker {
  margin: 0 0 8px !important;
  color: var(--blue-bright) !important;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

.owner-header h1 {
  max-width: 760px !important;
  margin: 0 !important;
  color: #f5fbff !important;
  font-family: Inter, "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: clamp(2rem, 4vw, 4.1rem) !important;
  line-height: 0.94 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere !important;
}

.owner-stat-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.owner-stat-grid div {
  min-height: 110px !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  border: 1px solid rgba(125, 219, 255, 0.18) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.065) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.owner-stat-grid strong {
  display: block !important;
  color: #f5fbff !important;
  font-size: clamp(1.9rem, 3.6vw, 3.2rem) !important;
  line-height: 0.9 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

.owner-stat-grid span {
  display: block !important;
  color: var(--rail-muted) !important;
  font-size: 0.74rem !important;
  font-weight: 720 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

.owner-section .owner-stat-grid div {
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(25, 88, 108, 0.13) !important;
}

.owner-section .owner-stat-grid strong {
  color: var(--ink) !important;
}

.owner-section .owner-stat-grid span {
  color: var(--muted) !important;
}

.owner-section,
.access-card {
  padding: clamp(18px, 2.4vw, 28px) !important;
  border: 1px solid var(--border-blue) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 18px 54px rgba(22, 86, 112, 0.1) !important;
  color: var(--ink) !important;
}

.owner-section-head {
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin: 0 0 16px !important;
}

.owner-section h1,
.access-card h1 {
  max-width: 860px !important;
  margin: 0 0 18px !important;
  color: var(--ink) !important;
  font-family: Inter, "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: clamp(1.8rem, 3.2vw, 2.9rem) !important;
  line-height: 1 !important;
  font-weight: 840 !important;
  letter-spacing: 0 !important;
}

.owner-section h2,
.access-card h2 {
  margin: 0 !important;
  color: var(--ink) !important;
  font-family: Inter, "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem) !important;
  line-height: 1.15 !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
}

.owner-list {
  display: grid !important;
  gap: 10px !important;
}

.owner-card {
  padding: 14px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 12px !important;
  border: 1px solid rgba(20, 118, 145, 0.14) !important;
  border-radius: 12px !important;
  background: rgba(251, 254, 255, 0.92) !important;
  box-shadow: none !important;
}

.owner-query-card {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

.owner-card h3 {
  margin: 0 0 6px !important;
  color: var(--ink) !important;
  font-size: 0.92rem !important;
  line-height: 1.35 !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
}

.owner-card p,
.access-card p {
  margin: 0 0 8px !important;
  color: var(--ink-soft) !important;
  font-size: 0.82rem !important;
  line-height: 1.55 !important;
}

.owner-card p:last-child,
.access-card p:last-child {
  margin-bottom: 0 !important;
}

.owner-empty {
  margin: 0 !important;
  padding: 18px !important;
  border: 1px dashed rgba(20, 118, 145, 0.22) !important;
  border-radius: 12px !important;
  color: var(--ink-soft) !important;
  background: rgba(230, 248, 255, 0.44) !important;
}

.owner-table-wrap {
  overflow: auto !important;
  border: 1px solid rgba(20, 118, 145, 0.14) !important;
  border-radius: 12px !important;
  background: rgba(251, 254, 255, 0.92) !important;
}

.owner-table {
  width: 100% !important;
  min-width: 980px !important;
  border-collapse: collapse !important;
  color: var(--ink) !important;
  font-size: 0.8rem !important;
}

.owner-table th,
.owner-table td {
  padding: 12px !important;
  border-top: 1px solid rgba(20, 118, 145, 0.12) !important;
  text-align: left !important;
  vertical-align: top !important;
}

.owner-table thead th {
  border-top: 0 !important;
  color: var(--blue-strong) !important;
  background: rgba(230, 248, 255, 0.64) !important;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 0.67rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.owner-table td strong,
.owner-table td span {
  display: block !important;
}

.owner-table td strong {
  color: var(--ink) !important;
  font-size: 0.84rem !important;
  line-height: 1.35 !important;
  font-weight: 760 !important;
}

.owner-table td span {
  margin-top: 3px !important;
  color: var(--ink-soft) !important;
  font-size: 0.74rem !important;
  line-height: 1.35 !important;
}

.owner-status {
  display: inline-flex !important;
  width: fit-content !important;
  align-items: center !important;
  border-radius: 999px !important;
  padding: 5px 9px !important;
  font-size: 0.66rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.owner-status-approved {
  color: #075d71 !important;
  background: rgba(100, 205, 245, 0.18) !important;
}

.owner-status-denied {
  color: #9f2d2d !important;
  background: rgba(216, 70, 70, 0.12) !important;
}

.owner-status-pending {
  color: #8a6700 !important;
  background: rgba(245, 190, 72, 0.18) !important;
}

.owner-inline-form,
.owner-limit-form,
.owner-status-form,
.access-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.owner-inline-form input,
.owner-limit-form input,
.owner-status-form input,
.owner-status-form select,
.rag-owner-shell textarea,
.rag-access-shell textarea {
  min-height: 36px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--border-blue) !important;
  border-radius: 9px !important;
  color: var(--ink) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  font: inherit !important;
  font-size: 0.78rem !important;
  outline: none !important;
  box-shadow: none !important;
}

.owner-inline-form input {
  width: 160px !important;
}

.owner-limit-form input[type="number"] {
  width: 92px !important;
}

.owner-status-form select {
  width: 118px !important;
}

.owner-limit-form label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--ink-soft) !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
}

.owner-limit-form input[type="checkbox"] {
  width: 15px !important;
  min-height: 15px !important;
  padding: 0 !important;
  accent-color: var(--blue) !important;
}

.rag-owner-shell .source-link,
.rag-owner-shell .ghost-button,
.rag-owner-shell .button-secondary,
.rag-access-shell .source-link,
.rag-access-shell .button-secondary,
.rag-access-shell #ask-button {
  min-height: 36px !important;
  padding: 0 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  border: 1px solid var(--border-blue) !important;
  background: rgba(230, 248, 255, 0.74) !important;
  color: var(--blue-strong) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

.rag-access-shell #ask-button,
.owner-card .source-link {
  color: #f6fdff !important;
  background: linear-gradient(180deg, #168ba1, #0b6d82) !important;
  border-color: rgba(20, 118, 145, 0.28) !important;
}

.owner-card .button-secondary,
.owner-card .owner-secondary-action {
  color: var(--blue-strong) !important;
  background: rgba(230, 248, 255, 0.74) !important;
  border-color: var(--border-blue) !important;
}

.owner-error,
.owner-warning {
  margin-top: 8px !important;
  padding: 10px 12px !important;
  border-radius: 0 10px 10px 0 !important;
  border-left: 3px solid #d84646 !important;
  color: var(--ink) !important;
  background: rgba(216, 70, 70, 0.08) !important;
  font-size: 0.82rem !important;
  line-height: 1.55 !important;
}

.owner-warning {
  border-left-color: #c08a00 !important;
  background: rgba(245, 190, 72, 0.12) !important;
}

.owner-pre {
  margin: 10px 0 18px !important;
  max-height: 560px !important;
  overflow: auto !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  border: 1px solid rgba(20, 118, 145, 0.14) !important;
  border-radius: 12px !important;
  background: rgba(251, 254, 255, 0.92) !important;
  color: var(--ink) !important;
  padding: 16px !important;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 0.78rem !important;
  line-height: 1.65 !important;
}

.access-details {
  display: grid !important;
  gap: 0 !important;
  margin: 18px 0 !important;
  border: 1px solid rgba(20, 118, 145, 0.14) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: rgba(251, 254, 255, 0.92) !important;
}

.access-details div {
  display: grid !important;
  grid-template-columns: minmax(130px, 0.34fr) minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-top: 1px solid rgba(20, 118, 145, 0.12) !important;
}

.access-details div:first-child {
  border-top: 0 !important;
}

.access-details dt {
  margin: 0 !important;
  color: var(--blue-strong) !important;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.access-details dd {
  margin: 0 !important;
  color: var(--ink) !important;
  overflow-wrap: anywhere !important;
  font-size: 0.9rem !important;
}

@media (max-width: 1100px) {
  .owner-header {
    grid-template-columns: 1fr !important;
  }

  .owner-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .rag-owner-shell,
  .rag-access-shell {
    padding: 12px !important;
    overflow-x: hidden !important;
  }

  .rag-owner-shell > .owner-header-actions,
  .rag-access-shell > .owner-header-actions,
  .owner-header {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 18px !important;
    border-radius: 13px !important;
    box-sizing: border-box !important;
  }

  .owner-header-actions {
    gap: 8px !important;
    margin-bottom: 22px !important;
  }

  .owner-header .rag-back,
  .owner-header .rag-theme-toggle,
  .owner-header .quota-request-link,
  .rag-owner-shell > .owner-header-actions .rag-back,
  .rag-owner-shell > .owner-header-actions .rag-theme-toggle,
  .rag-owner-shell > .owner-header-actions .quota-request-link {
    min-height: 34px !important;
    padding: 0 10px !important;
    font-size: 0.72rem !important;
  }

  .owner-header h1 {
    max-width: 320px !important;
    font-size: clamp(1.85rem, 8.8vw, 2.35rem) !important;
    line-height: 0.98 !important;
  }

  .owner-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .owner-stat-grid div {
    min-height: 94px !important;
    padding: 13px !important;
  }

  .owner-card,
  .owner-query-card {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  .owner-inline-form input,
  .owner-status-form input,
  .owner-status-form select {
    width: 100% !important;
  }

  .owner-inline-form button,
  .owner-inline-form .source-link,
  .owner-inline-form .button-secondary {
    width: fit-content !important;
    max-width: 100% !important;
  }

  .owner-section,
  .access-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px !important;
    border-radius: 13px !important;
  }

  .owner-section-head {
    align-items: start !important;
  }

  .owner-list,
  .owner-card,
  .owner-query-card,
  .owner-table-wrap,
  .access-details,
  .owner-pre {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .owner-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .owner-pre {
    font-size: 0.72rem !important;
    line-height: 1.55 !important;
  }

  .access-details div {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
}

/* Dark theme: same product language as the bright shell, with dark glass
   surfaces and enough contrast for long legal reading sessions. */
:root[data-theme="dark"] body {
  background: var(--app-bg) !important;
}

:root[data-theme="dark"] .rag-app {
  background:
    radial-gradient(circle at 58% 22%, rgba(59, 199, 238, 0.14), transparent 34%),
    linear-gradient(90deg, rgba(2, 8, 13, 0.92), transparent 10%, transparent 90%, rgba(2, 8, 13, 0.88)),
    linear-gradient(180deg, #071018 0, var(--app-bg) 38%, var(--app-bg-deep) 100%) !important;
}

:root[data-theme="dark"] .rag-topbar {
  background: rgba(7, 16, 24, 0.86) !important;
  border-bottom-color: rgba(111, 210, 244, 0.16) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22) !important;
}

:root[data-theme="dark"] .history-toggle,
:root[data-theme="dark"] .model-toggle,
:root[data-theme="dark"] .quota-pill,
:root[data-theme="dark"] .quota-request-link,
:root[data-theme="dark"] .rag-theme-toggle {
  color: var(--ink) !important;
  background: rgba(13, 29, 41, 0.82) !important;
  border-color: rgba(111, 210, 244, 0.18) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2) !important;
}

:root[data-theme="dark"] .model-toggle-option {
  color: var(--ink-soft) !important;
}

:root[data-theme="dark"] .model-toggle-option.active,
:root[data-theme="dark"] #ask-button,
:root[data-theme="dark"] .quota-dialog button[type="submit"],
:root[data-theme="dark"] .history-new-button,
:root[data-theme="dark"] .rag-access-shell #ask-button,
:root[data-theme="dark"] .owner-card .source-link {
  color: #061018 !important;
  background: linear-gradient(180deg, #7de2ff, #26a9ca) !important;
  box-shadow: 0 12px 22px rgba(38, 169, 202, 0.22) !important;
}

:root[data-theme="dark"] #ask-button:disabled {
  color: rgba(237, 249, 255, 0.52) !important;
  background: rgba(139, 160, 173, 0.3) !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] #answer-card,
:root[data-theme="dark"] .rag-form-panel,
:root[data-theme="dark"] .source-panel,
:root[data-theme="dark"] .quota-dialog,
:root[data-theme="dark"] .owner-section,
:root[data-theme="dark"] .access-card {
  color: var(--ink) !important;
  background: rgba(12, 27, 38, 0.82) !important;
  border-color: rgba(111, 210, 244, 0.18) !important;
  box-shadow: var(--card-shadow) !important;
}

:root[data-theme="dark"] .rag-form-panel,
:root[data-theme="dark"] .source-panel,
:root[data-theme="dark"] #answer-card {
  backdrop-filter: blur(20px) !important;
}

:root[data-theme="dark"] textarea,
:root[data-theme="dark"] #question {
  color: var(--ink) !important;
}

:root[data-theme="dark"] textarea::placeholder,
:root[data-theme="dark"] #question::placeholder {
  color: #7f9aaa !important;
}

:root[data-theme="dark"] textarea:focus,
:root[data-theme="dark"] #question:focus {
  background: rgba(16, 39, 54, 0.82) !important;
  box-shadow: inset 0 0 0 1px rgba(118, 223, 255, 0.18) !important;
}

:root[data-theme="dark"] .button-secondary,
:root[data-theme="dark"] .ghost-button,
:root[data-theme="dark"] .source-link,
:root[data-theme="dark"] .source-count,
:root[data-theme="dark"] .rag-status,
:root[data-theme="dark"] .citation-chip,
:root[data-theme="dark"] .citation-link,
:root[data-theme="dark"] .owner-card .button-secondary,
:root[data-theme="dark"] .owner-card .owner-secondary-action,
:root[data-theme="dark"] .rag-owner-shell .source-link,
:root[data-theme="dark"] .rag-owner-shell .ghost-button,
:root[data-theme="dark"] .rag-owner-shell .button-secondary,
:root[data-theme="dark"] .rag-access-shell .source-link,
:root[data-theme="dark"] .rag-access-shell .button-secondary {
  color: var(--blue-strong) !important;
  background: rgba(77, 205, 245, 0.12) !important;
  border-color: rgba(111, 210, 244, 0.22) !important;
}

:root[data-theme="dark"] .source-card,
:root[data-theme="dark"] .owner-card,
:root[data-theme="dark"] .owner-table-wrap,
:root[data-theme="dark"] .access-details {
  color: var(--ink) !important;
  background: rgba(15, 34, 48, 0.72) !important;
  border-color: rgba(111, 210, 244, 0.16) !important;
}

:root[data-theme="dark"] .source-card:hover {
  background: rgba(20, 48, 66, 0.9) !important;
  border-color: rgba(118, 223, 255, 0.34) !important;
}

:root[data-theme="dark"] .source-code {
  color: #061018 !important;
  background: #74d7ff !important;
}

:root[data-theme="dark"] .source-card.case .source-code {
  color: #061018 !important;
  background: #96b9ff !important;
}

:root[data-theme="dark"] .source-title,
:root[data-theme="dark"] .journal-rendered,
:root[data-theme="dark"] .journal-rendered h1,
:root[data-theme="dark"] .journal-rendered h2,
:root[data-theme="dark"] .journal-rendered h3,
:root[data-theme="dark"] .owner-card h3,
:root[data-theme="dark"] .owner-section h1,
:root[data-theme="dark"] .owner-section h2,
:root[data-theme="dark"] .access-card h1,
:root[data-theme="dark"] .access-card h2,
:root[data-theme="dark"] .owner-table,
:root[data-theme="dark"] .owner-table td strong,
:root[data-theme="dark"] .access-details dd {
  color: var(--ink) !important;
}

:root[data-theme="dark"] .source-subtitle,
:root[data-theme="dark"] .source-reason,
:root[data-theme="dark"] .source-excerpt,
:root[data-theme="dark"] .source-path,
:root[data-theme="dark"] .answer-meta,
:root[data-theme="dark"] .rag-hint,
:root[data-theme="dark"] .owner-card p,
:root[data-theme="dark"] .access-card p,
:root[data-theme="dark"] .owner-table td span {
  color: var(--ink-soft) !important;
}

:root[data-theme="dark"] .owner-table th,
:root[data-theme="dark"] .owner-table td,
:root[data-theme="dark"] .answer-toolbar,
:root[data-theme="dark"] .access-details div {
  border-color: rgba(111, 210, 244, 0.14) !important;
}

:root[data-theme="dark"] .owner-table thead th {
  color: var(--blue-strong) !important;
  background: rgba(77, 205, 245, 0.12) !important;
}

:root[data-theme="dark"] .owner-inline-form input,
:root[data-theme="dark"] .owner-limit-form input,
:root[data-theme="dark"] .owner-status-form input,
:root[data-theme="dark"] .owner-status-form select,
:root[data-theme="dark"] .rag-owner-shell textarea,
:root[data-theme="dark"] .rag-access-shell textarea {
  color: var(--ink) !important;
  background: rgba(9, 21, 31, 0.86) !important;
  border-color: rgba(111, 210, 244, 0.2) !important;
}

:root[data-theme="dark"] .owner-pre {
  color: var(--ink) !important;
  background: rgba(9, 21, 31, 0.86) !important;
  border-color: rgba(111, 210, 244, 0.2) !important;
}

:root[data-theme="dark"] .owner-empty {
  color: var(--ink-soft) !important;
  background: rgba(77, 205, 245, 0.08) !important;
  border-color: rgba(111, 210, 244, 0.2) !important;
}

:root[data-theme="dark"] .rag-owner-shell,
:root[data-theme="dark"] .rag-access-shell {
  background:
    radial-gradient(circle at 50% 8%, rgba(59, 199, 238, 0.13), transparent 30%),
    linear-gradient(90deg, rgba(2, 8, 13, 0.94), transparent 9%, transparent 91%, rgba(2, 8, 13, 0.9)),
    linear-gradient(180deg, #071018 0, var(--app-bg) 38%, var(--app-bg-deep) 100%) !important;
}

:root[data-theme="dark"] .owner-header,
:root[data-theme="dark"] .rag-owner-shell > .owner-header-actions,
:root[data-theme="dark"] .rag-access-shell > .owner-header-actions {
  background:
    radial-gradient(circle at 18% 12%, rgba(118, 223, 255, 0.2), transparent 28%),
    linear-gradient(135deg, #02060a 0%, #07131d 58%, #05121b 100%) !important;
  border-color: rgba(111, 210, 244, 0.2) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28) !important;
}

:root[data-theme="dark"] .owner-status-approved {
  color: #a7edff !important;
  background: rgba(77, 205, 245, 0.14) !important;
}

:root[data-theme="dark"] .owner-status-denied {
  color: #ffb1b1 !important;
  background: rgba(255, 105, 105, 0.12) !important;
}

:root[data-theme="dark"] .owner-status-pending {
  color: #ffd98c !important;
  background: rgba(245, 190, 72, 0.13) !important;
}

/* Demo users only have Model A. Keep the control compact even after the
   responsive two-model rules above have run. */
.model-toggle.model-toggle-single {
  width: fit-content !important;
  min-width: 0 !important;
  max-width: max-content !important;
  grid-template-columns: minmax(94px, auto) !important;
}

.model-toggle.model-toggle-single .model-toggle-option {
  min-width: 94px !important;
  cursor: default !important;
}

@media (max-width: 820px) {
  .model-toggle.model-toggle-single {
    width: fit-content !important;
    max-width: 100% !important;
    grid-template-columns: minmax(86px, auto) !important;
  }

  .model-toggle.model-toggle-single .model-toggle-option {
    min-width: 86px !important;
  }
}

/* v9: iPhone chat corrections.
   Keep these last: older production layers use display: ... !important on
   answer/empty surfaces, so the native hidden attribute needs an explicit
   override here. */
[hidden],
.rag-empty[hidden],
#answer-card[hidden],
.history-backdrop[hidden] {
  display: none !important;
}

@media (max-width: 820px) {
  html,
  body,
  .rag-app {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .rag-workspace,
  .rag-app.history-collapsed .rag-workspace,
  .rag-app.history-open .rag-workspace {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .rag-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: calc(100svh - 108px) !important;
    margin: 0 !important;
    padding: 14px 10px max(16px, env(safe-area-inset-bottom)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  .rag-empty {
    display: none !important;
  }

  .rag-form-panel,
  .rag-answer,
  #answer-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
  }

  .rag-app.has-answer .rag-main {
    justify-content: flex-start !important;
    padding-top: 12px !important;
  }

  .rag-app.has-answer .rag-answer {
    display: block !important;
    order: 1 !important;
  }

  .rag-app.has-answer .rag-form-panel {
    order: 2 !important;
    margin-top: 10px !important;
  }

  .rag-app.has-answer #answer-card {
    display: block !important;
    padding: 14px 12px !important;
    border-radius: 12px !important;
  }

  .answer-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .answer-actions,
  .citation-strip {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
  }

  .citation-strip {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .citation-chip {
    min-width: 0 !important;
    padding: 5px 8px !important;
    font-size: 0.72rem !important;
  }

  .journal-rendered {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 0.95rem !important;
    line-height: 1.62 !important;
    overflow-wrap: anywhere !important;
  }

  .journal-rendered h1 {
    font-size: 1.18rem !important;
    line-height: 1.25 !important;
  }

  .journal-rendered h2 {
    font-size: 1.08rem !important;
    line-height: 1.3 !important;
  }

  .journal-rendered h3 {
    font-size: 1rem !important;
    line-height: 1.35 !important;
  }

  .journal-rendered ul,
  .journal-rendered ol {
    padding-left: 1.15rem !important;
  }

  .history-panel {
    height: 100% !important;
    max-height: 100% !important;
  }

  .history-list {
    gap: 8px !important;
  }

  .history-item {
    min-height: 54px !important;
    padding: 10px 11px !important;
    gap: 5px !important;
  }

  .history-question {
    display: block !important;
    max-width: 100% !important;
    color: var(--rail-text) !important;
    font-size: 0.78rem !important;
    font-weight: 720 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .history-preview {
    display: none !important;
  }

  .history-meta {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    color: var(--rail-muted) !important;
    font-size: 0.68rem !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 430px) {
  .rag-main {
    padding-inline: 8px !important;
  }

  .rag-app.has-answer #answer-card,
  .rag-form-panel {
    border-radius: 10px !important;
  }

  .journal-rendered {
    font-size: 0.92rem !important;
  }

  .history-question {
    font-size: 0.75rem !important;
  }
}

/* v11: compact logo/sidebar control and icon-only composer actions. */
.history-toggle {
  display: inline-grid !important;
  place-items: center !important;
}

.history-toggle-icon {
  width: 24px !important;
  height: 24px !important;
  display: inline-grid !important;
  place-items: center !important;
  color: var(--blue-strong) !important;
  transform: none !important;
}

.history-toggle-icon svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  color: currentColor !important;
}

.history-toggle-icon span {
  display: none !important;
}

.rag-app.history-collapsed .history-toggle-icon {
  transform: none !important;
}

.rag-actions {
  gap: 8px !important;
}

#ask-button,
#clear-button {
  position: relative !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  font-size: 0 !important;
  line-height: 1 !important;
  overflow: hidden !important;
}

#ask-button {
  color: #f8fdff !important;
  background: linear-gradient(180deg, #102438, #050b12) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 14px 28px rgba(5, 16, 24, 0.22) !important;
}

#ask-button::before,
#clear-button::before {
  margin: 0 !important;
  display: block !important;
  font-family: Inter, "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 1.45rem !important;
  line-height: 1 !important;
  font-weight: 620 !important;
}

#ask-button[data-action-kind="submit"]::before,
#ask-button[data-action-kind="followup"]::before {
  content: "↑" !important;
}

#ask-button[data-action-kind="new"]::before {
  content: "+" !important;
}

#ask-button[data-action-kind="edit"]::before {
  content: "↗" !important;
}

#clear-button::before,
#clear-button[data-action-kind="clear"]::before {
  content: "×" !important;
}

#clear-button[data-action-kind="edit"]::before {
  content: "✎" !important;
  font-size: 1.05rem !important;
}

#clear-button {
  color: #0c2534 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(20, 118, 145, 0.18) !important;
  box-shadow: 0 10px 22px rgba(9, 67, 92, 0.08) !important;
}

#ask-button:hover:not(:disabled) {
  background: linear-gradient(180deg, #12324a, #071018) !important;
  transform: translateY(-1px) !important;
}

#clear-button:hover {
  color: var(--blue-strong) !important;
  border-color: rgba(20, 118, 145, 0.32) !important;
  transform: translateY(-1px) !important;
}

#ask-button:disabled {
  color: rgba(255, 255, 255, 0.58) !important;
  background: #8f979e !important;
  border-color: rgba(143, 151, 158, 0.28) !important;
  box-shadow: none !important;
  transform: none !important;
}

:root[data-theme="dark"] .history-toggle-icon {
  color: var(--blue-bright) !important;
}

:root[data-theme="dark"] #ask-button {
  color: #071018 !important;
  background: linear-gradient(180deg, #8de4ff, #2bb0d0) !important;
  border-color: rgba(118, 223, 255, 0.22) !important;
  box-shadow: 0 14px 28px rgba(20, 166, 198, 0.18) !important;
}

:root[data-theme="dark"] #ask-button:hover:not(:disabled) {
  background: linear-gradient(180deg, #a8ecff, #3bc7ee) !important;
}

:root[data-theme="dark"] #clear-button {
  color: var(--ink) !important;
  background: rgba(13, 29, 41, 0.84) !important;
  border-color: rgba(111, 210, 244, 0.18) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18) !important;
}

:root[data-theme="dark"] #ask-button:disabled {
  color: rgba(237, 249, 255, 0.52) !important;
  background: rgba(139, 160, 173, 0.3) !important;
  border-color: rgba(139, 160, 173, 0.16) !important;
  box-shadow: none !important;
}

@media (max-width: 820px) {
  .rag-actions {
    flex-wrap: nowrap !important;
  }

  #ask-button,
  #clear-button {
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  #ask-button::before,
  #clear-button::before {
    font-size: 1.35rem !important;
  }
}

/* v12: single right-pinned submit control. */
.rag-form .rag-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 42px !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 10px !important;
}

.rag-form .rag-hint {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  margin: 0 !important;
  justify-self: start !important;
}

.rag-form #ask-button {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
}

.rag-form #clear-button {
  display: none !important;
}

#ask-button::before,
#ask-button[data-action-kind="submit"]::before,
#ask-button[data-action-kind="followup"]::before,
#ask-button[data-action-kind="new"]::before,
#ask-button[data-action-kind="edit"]::before {
  content: "↑" !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  display: block !important;
  border: 0 !important;
  background: transparent !important;
  transform: none !important;
  font-size: 1.45rem !important;
  line-height: 1 !important;
  font-weight: 720 !important;
}

#ask-button::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 820px) {
  .rag-form .rag-actions {
    grid-template-columns: minmax(0, 1fr) 40px !important;
    gap: 8px !important;
  }

  #ask-button::before,
  #ask-button[data-action-kind="submit"]::before,
  #ask-button[data-action-kind="followup"]::before,
  #ask-button[data-action-kind="new"]::before,
  #ask-button[data-action-kind="edit"]::before {
    font-size: 1.35rem !important;
  }
}

/* v13: fixed sidebars must not steal the answer column. */
@media (min-width: 1481px) {
  .rag-app.history-open .rag-workspace,
  .rag-workspace {
    display: grid !important;
    grid-template-columns: 320px minmax(640px, 1fr) minmax(330px, 390px) !important;
  }

  .rag-app.history-open .rag-main,
  .rag-workspace > .rag-main {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  .rag-app.history-open .rag-source-sidebar,
  .rag-workspace > .rag-source-sidebar {
    grid-column: 3 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  .rag-app.history-collapsed .rag-workspace {
    grid-template-columns: minmax(720px, 1fr) minmax(330px, 390px) !important;
  }

  .rag-app.history-collapsed .rag-main {
    grid-column: 1 !important;
  }

  .rag-app.history-collapsed .rag-source-sidebar {
    grid-column: 2 !important;
  }
}

@media (min-width: 821px) and (max-width: 1480px) {
  .rag-app.history-open .rag-workspace,
  .rag-workspace {
    display: grid !important;
    grid-template-columns: 292px minmax(0, 1fr) !important;
  }

  .rag-app.history-open .rag-main,
  .rag-workspace > .rag-main {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  .rag-app.history-collapsed .rag-workspace {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .rag-app.history-collapsed .rag-main {
    grid-column: 1 !important;
  }

  .rag-source-sidebar {
    display: none !important;
  }
}

/* v14: keep the question/follow-up composer docked while reading answers. */
.rag-app.has-answer .rag-main {
  padding-bottom: 190px !important;
  scroll-padding-bottom: 190px !important;
}

.rag-app.has-answer #answer-card {
  margin-bottom: 170px !important;
}

.rag-app.has-answer .rag-form-panel {
  position: fixed !important;
  z-index: 42 !important;
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px)) !important;
  left: 320px !important;
  right: 390px !important;
  width: min(960px, calc(100vw - 782px)) !important;
  max-width: calc(100vw - 782px) !important;
  margin: 0 auto !important;
  box-shadow:
    0 24px 70px rgba(8, 62, 86, 0.22),
    0 0 0 1px rgba(20, 118, 145, 0.08) !important;
}

.rag-app.history-collapsed.has-answer .rag-form-panel {
  left: 0 !important;
  right: 390px !important;
  width: min(960px, calc(100vw - 462px)) !important;
  max-width: calc(100vw - 462px) !important;
}

@media (min-width: 821px) and (max-width: 1480px) {
  .rag-app.has-answer .rag-main {
    padding-bottom: 180px !important;
    scroll-padding-bottom: 180px !important;
  }

  .rag-app.has-answer #answer-card {
    margin-bottom: 160px !important;
  }

  .rag-app.has-answer .rag-form-panel {
    left: 292px !important;
    right: 0 !important;
    width: min(940px, calc(100vw - 340px)) !important;
    max-width: calc(100vw - 340px) !important;
  }

  .rag-app.history-collapsed.has-answer .rag-form-panel {
    left: 0 !important;
    right: 0 !important;
    width: min(940px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
  }
}

@media (max-width: 820px) {
  .rag-app.has-answer .rag-main {
    padding-bottom: 154px !important;
    scroll-padding-bottom: 154px !important;
  }

  .rag-app.has-answer #answer-card {
    margin-bottom: 132px !important;
  }

  .rag-app.has-answer .rag-form-panel,
  .rag-app.history-collapsed.has-answer .rag-form-panel,
  .rag-app.history-open.has-answer .rag-form-panel {
    position: fixed !important;
    z-index: 42 !important;
    left: 10px !important;
    right: 10px !important;
    bottom: max(10px, calc(env(safe-area-inset-bottom) + 8px)) !important;
    width: calc(100vw - 20px) !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* v15: friendlier first-screen prompt. */
.rag-app:not(.has-answer) .rag-main {
  justify-content: center !important;
  gap: 14px !important;
  padding-top: clamp(18px, 7vh, 78px) !important;
  padding-bottom: clamp(22px, 8vh, 90px) !important;
}

.rag-app:not(.has-answer) .rag-answer {
  flex: 0 0 auto !important;
  min-height: 0 !important;
}

.rag-app:not(.has-answer) .rag-empty {
  min-height: 0 !important;
  padding: 0 14px !important;
  display: grid !important;
  place-items: center !important;
}

.rag-app:not(.has-answer) .rag-empty h2 {
  max-width: min(560px, 92vw) !important;
  margin: 0 auto !important;
  color: var(--ink) !important;
  font-size: clamp(1.85rem, 2.8vw, 2.65rem) !important;
  font-weight: 660 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.014em !important;
  text-align: center !important;
}

.rag-app:not(.has-answer) .rag-form-panel {
  width: min(720px, calc(100vw - 48px)) !important;
  padding: 10px !important;
  border-radius: 14px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.rag-app:not(.has-answer) textarea,
.rag-app:not(.has-answer) #question {
  height: 76px !important;
  min-height: 76px !important;
  padding: 13px 14px !important;
  font-size: 0.95rem !important;
}

/* v17: render the chat transcript as question -> answer turns. */
.conversation-thread {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

.conversation-turn {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  gap: 13px !important;
  align-items: start !important;
}

.conversation-turn + .conversation-turn {
  margin-top: 2px !important;
}

.turn-avatar {
  width: 34px !important;
  height: 34px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  font-family: Inter, "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 0.58rem !important;
  font-weight: 820 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}

.user-turn .turn-avatar {
  color: #ffffff !important;
  background: linear-gradient(180deg, #102438, #050b12) !important;
}

.assistant-turn .turn-avatar {
  color: #f7fdff !important;
  background: linear-gradient(180deg, #168ba1, #0b6d82) !important;
}

.turn-body {
  min-width: 0 !important;
}

.turn-kicker {
  margin-bottom: 7px !important;
  color: var(--blue-strong) !important;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 0.67rem !important;
  font-weight: 760 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

.user-turn .turn-body {
  padding: 14px 16px !important;
  background: rgba(226, 246, 255, 0.7) !important;
  border: 1px solid rgba(20, 118, 145, 0.16) !important;
  border-radius: 12px !important;
}

.user-turn p {
  margin: 0 !important;
  color: var(--ink) !important;
  font-size: 0.98rem !important;
  line-height: 1.6 !important;
}

.conversation-answer-text {
  color: var(--ink) !important;
  font-size: 1rem !important;
  line-height: 1.74 !important;
}

.conversation-answer-text > :first-child {
  margin-top: 0 !important;
}

.conversation-answer-text > :last-child {
  margin-bottom: 0 !important;
}

.conversation-thread .legal-loading {
  margin-left: 47px !important;
  min-height: 220px !important;
  border: 1px solid rgba(20, 118, 145, 0.1) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.52) !important;
}

:root[data-theme="dark"] .user-turn .turn-body {
  background: rgba(30, 78, 102, 0.36) !important;
  border-color: rgba(111, 210, 244, 0.16) !important;
}

:root[data-theme="dark"] .user-turn .turn-avatar {
  color: #061018 !important;
  background: linear-gradient(180deg, #a8ecff, #3bc7ee) !important;
}

:root[data-theme="dark"] .assistant-turn .turn-avatar {
  color: #071018 !important;
  background: linear-gradient(180deg, #8de4ff, #2bb0d0) !important;
}

:root[data-theme="dark"] .conversation-thread .legal-loading {
  background: rgba(16, 39, 54, 0.56) !important;
  border-color: rgba(111, 210, 244, 0.14) !important;
}

@media (max-width: 820px) {
  .conversation-thread {
    gap: 15px !important;
  }

  .conversation-turn {
    grid-template-columns: 32px minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  .turn-avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.48rem !important;
  }

  .user-turn .turn-body {
    padding: 11px 12px !important;
    border-radius: 10px !important;
  }

  .user-turn p,
  .conversation-answer-text {
    font-size: 0.92rem !important;
    line-height: 1.58 !important;
  }

  .conversation-thread .legal-loading {
    margin-left: 37px !important;
    min-height: 180px !important;
  }
}

@media (max-width: 820px) {
  .rag-app:not(.has-answer) .rag-main {
    min-height: calc(100svh - 122px) !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 12px 10px max(16px, env(safe-area-inset-bottom)) !important;
  }

  .rag-app:not(.has-answer) .rag-empty {
    display: grid !important;
    padding: 0 12px !important;
  }

  .rag-app:not(.has-answer) .rag-empty h2 {
    max-width: 310px !important;
    font-size: clamp(1.38rem, 7vw, 1.85rem) !important;
    line-height: 1.1 !important;
  }

  .rag-app:not(.has-answer) .rag-form-panel {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    padding: 8px !important;
  }

  .rag-app:not(.has-answer) textarea,
  .rag-app:not(.has-answer) #question {
    height: 72px !important;
    min-height: 72px !important;
    font-size: 0.88rem !important;
  }
}