:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #183b32; background: #f8fcfa; font-synthesis: none; }
:root { --book-bg: #fbfaf5; --book-chrome: #b9c9b5; --chat-bg: #f0ede4; --book-line: #98ad98; --book-muted: #536b5d; --book-control: #fbfaf5; --annotation-text: #2d4236; }
:root[data-theme="dark"] { --book-bg: #171a16; --book-chrome: #34463b; --chat-bg: #24251f; --book-line: #526258; --book-muted: #afbeb3; --book-control: #20271f; --annotation-text: #d0d8d2; }
.answer-actions { color: #5f7e6f; font-size: 10px; line-height: 1.8; overflow-wrap: anywhere; }
.hide-usage .answer-actions { display: none; }
:root[data-theme="dark"] { color-scheme: dark; color: #e9f8f0; background: #0d201b; }
[data-theme="dark"] .sidebar { background: #122b23; border-color: #2a4e40; }
[data-theme="dark"] .chat-header, [data-theme="dark"] .rulebook-toolbar { border-color: #2a4e40; }
[data-theme="dark"] .rulebook-view, [data-theme="dark"] .composer-area { background: #0d201b; border-color: #2a4e40; }
[data-theme="dark"] .assistant-content, [data-theme="dark"] .composer { background: #173329; border-color: #305647; }
[data-theme="dark"] .new-chat, [data-theme="dark"] .examples button,
[data-theme="dark"] .rule-nav button, [data-theme="dark"] .citation-link { background: #204536; color: #d9f5e6; border-color: #39664f; }
[data-theme="dark"] .user-bubble,
[data-theme="dark"] .tabs button[aria-selected="true"] { background: #23563e; color: #effcf4; border-color: #39664f; }
[data-theme="dark"] .prose, [data-theme="dark"] .rulebook-content,
[data-theme="dark"] textarea { color: #e2f5e9; }
[data-theme="dark"] .rulebook-content th { background: #204536; }
[data-theme="dark"] .rulebook-content th, [data-theme="dark"] .rulebook-content td { border-color: #39664f; }
[data-theme="dark"] .rulebook-unit.relevant-rule { background: #49401e; border-left-color: #ae974b; }
[data-theme="dark"] .rulebook-unit.current-rule { background: #5b4b1b; border-left-color: #e3c66d; }
[data-theme="dark"] .sidebar-footer,
[data-theme="dark"] #active-scope,
[data-theme="dark"] .rule-nav span, [data-theme="dark"] .answer-actions,
[data-theme="dark"] .tabs button, [data-theme="dark"] .rulebook-unit blockquote { color: #a6cdb8; }
[data-theme="dark"] .error { color: #f2a697; }

* { box-sizing: border-box; }
body { margin: 0; }
button, input, textarea { font: inherit; }
button { cursor: pointer; transition: background .15s; }
button:disabled { opacity: .5; cursor: wait; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #20a66c; outline-offset: 3px; }
.app-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); height: 100vh; height: 100dvh; }
.sidebar { background: #edf8f1; border-right: 1px solid #d4e8dc; display: flex; flex-direction: column; padding: 30px 20px 24px; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; font-size: 32px; font-weight: 730; letter-spacing: -1.2px; padding: 0 8px; }
.brand-name { white-space: nowrap; }
.brand-ulti { color: #173f32; }
.brand-rules { color: #875b16; }
[data-theme="dark"] .brand-ulti { color: #e7eee8; }
[data-theme="dark"] .brand-rules { color: #d5aa4d; }
.new-chat { margin: 30px 0; padding: 12px; text-align: left; border: 1px solid #cce4d7; border-radius: 7px; color: #087d50; background: #ffffff; font-size: 12px; font-weight: 600; }
.new-chat:hover { background: #d5f0e0; }
.new-chat span { margin-right: 7px; font-size: 17px; }
.sidebar-footer { margin-top: auto; padding: 34px 10px 0; display: grid; gap: 9px; font-size: 9px; color: #85907b; }
.conversation-nav { margin: 22px 0 0; min-height: 0; overflow-y: auto; }
.conversation-label { margin: 0 9px 8px; font-size: 9px; letter-spacing: 1.5px; font-weight: 650; color: #557965; }
.conversation-row { display: flex; align-items: center; border-radius: 6px; }
.conversation-row.active { background: #ddf4e6; }
.conversation-open, .conversation-archive { border: 0; color: inherit; background: transparent; }
.conversation-open { flex: 1; min-width: 0; padding: 9px; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; }
.conversation-archive { opacity: 0; padding: 7px 5px; }
.conversation-row:hover .conversation-archive,
.conversation-archive:focus-visible { opacity: .65; }
[data-theme="dark"] .conversation-row.active { background: #204536; }
#service-status { color: #5f8370; }
.chat-shell { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.reading-layout { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; }
.chat-view, .rulebook-view { min-width: 0; }
@media (min-width: 1200px) {
  .reading-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tabs { display: none !important; }
  .rulebook-view { border-left: 1px solid #d4e8dc; background: #f7f8f2; }
  .reading-layout .rulebook-toolbar { padding: 14px 20px; }
  .reading-layout .rulebook-scroll { padding: 14px 16px 60px; }
  .reading-layout .messages { padding: 24px 20px; }
  .reading-layout .composer-area { padding: 12px 18px 16px; }
}
.chat-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.tabs { display: flex; align-items: center; gap: 8px; }
.tabs button { border: 0; background: transparent; color: #5c7a6b; padding: 9px 15px; border-radius: 7px; font-size: 13px; }
.tabs button[aria-selected="true"] { background: #dff5e8; color: #078254; font-weight: 600; }
.chat-header { height: 83px; flex-shrink: 0; border-bottom: 1px solid #d3e7dc; display: flex; align-items: center; justify-content: space-between; padding: 18px 36px; gap: 12px; }
.chat-header h1 { font-size: 18px; font-weight: 650; margin: 0 0 5px; }
#active-scope { font-size: 11px; color: #5c7a6b; }
.chat-scroll { flex: 1; min-height: 0; overflow-y: auto; scroll-behavior: auto; }
.welcome { max-width: 630px; margin: clamp(35px, 9vh, 110px) auto 40px; text-align: center; padding: 20px; }
.examples { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 34px; }
.examples button { background: #ffffff; border: 1px solid #d4e8dc; border-radius: 9px; padding: 17px; font-size: 11px; line-height: 1.8; color: #345d4a; text-align: left; }
.examples button:hover { background: #e5f6ec; }
.messages { max-width: 850px; margin: auto; padding: 24px 30px 40px; }
.message { margin: 0 0 30px; }
.user-message { display: flex; justify-content: flex-end; }
.user-bubble { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 82%; background: #dff5e8; border: 1px solid #bce5cd; border-radius: 16px 16px 3px 16px; padding: 14px 20px; font-size: var(--content-font-size, 14px); line-height: 1.3125; }
.assistant-message { display: flex; align-items: flex-start; gap: 15px; }
.assistant-content { min-width: 0; max-width: 92%; padding: 18px 22px; background: #fff; border: 1px solid #d3e7dc; border-radius: 3px 16px 16px 16px; box-shadow: 0 2px 8px #183b3205; }
.assistant-content .message-status { margin: 0; }
.answer-actions { margin-top: 12px; }
.rulebook-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.rulebook-toolbar { display: flex; justify-content: space-between; gap: 12px; padding: 14px 30px; border-bottom: 1px solid #e1e6d9; }
.rule-nav { display: flex; align-items: center; gap: 8px; }
.rule-nav span { font-size: 11px; color: #7b8870; }
.rule-nav button { border: 1px solid #d5dfca; color: #3a5d2d; background: #f2f5ec; border-radius: 6px; padding: 6px 12px; }
.rulebook-scroll { flex: 1; overflow-y: auto; min-height: 0; padding: 24px 30px 80px; }
#rulebook-status { text-align: center; font-size: 13px; color: #78896d; }
.rulebook-content { max-width: 840px; margin: auto; font-size: 14px; line-height: 1.6; color: #35432e; }
.rulebook-unit { padding: 3px 15px; border-left: 3px solid transparent; scroll-margin: 28px; overflow-wrap: anywhere; }
.rulebook-unit.rule { padding-left: calc(15px + var(--rule-indent, 0ch)); }
.rulebook-unit p { margin: 3px 0; white-space: pre-wrap; }
.rulebook-unit h2 { font: 2em/1.3 Georgia, serif; margin: 34px 0 14px; }
.rulebook-unit h3, .rulebook-unit h4 { font-size: 17px; margin: 18px 0 8px; }
.rulebook-unit blockquote { margin: 10px 0; padding-left: 15px; border-left: 2px solid #d7dfcf; color: #687e58; }
.rulebook-unit.relevant-rule { background: #f7edbc; border-left-color: #caa73e; border-radius: 4px; }
.rulebook-unit.current-rule { background: #f6e49b; border-left-color: #92752c; }
.table-scroll { overflow-x: auto; }
.rulebook-content table { border-collapse: collapse; width: 100%; font-size: 12px; margin: 14px 0; }
.rulebook-content th, .rulebook-content td { border: 1px solid #d9e0d0; text-align: left; vertical-align: top; padding: 10px; min-width: 110px; white-space: pre-wrap; }
.rulebook-content th { background: #edf1e6; }

.message-status { font-size: 10px; line-height: 1.7; margin: 12px 0; }
.working { color: #977745; }
.working::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; margin-right: 6px; animation: pulse 1s infinite alternate; }
.complete { color: #7d9073; }
.error { color: #a14b3f; }
.prose { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--content-font-size, 14px); line-height: 1.425; color: #35432e; }
.assistant-content .prose p { margin: 0 0 .65em; }
.assistant-content .prose p:last-child { margin-bottom: 0; }
.citation-link { font: inherit; font-size: 10px; font-weight: 650; color: #416b39; border: 1px solid #dbe4d0; background: #eef3e6; padding: 1px 5px; margin: 0 2px; border-radius: 4px; }
.retry { border: 1px solid #d6ddce; border-radius: 5px; color: #4f6f42; background: transparent; font-size: 11px; padding: 7px 10px; margin-top: 4px; }
.composer-area { flex-shrink: 0; padding: 12px 30px 16px; background: #f8fcfa; }
.composer { max-width: 790px; margin: auto; background: white; border: 1px solid #cbe5d7; border-radius: 14px; box-shadow: 0 3px 16px #2a4a3210; padding: 14px 18px 12px; }
textarea { width: 100%; display: block; border: 0; background: transparent; resize: none; min-height: 48px; max-height: 160px; overflow-y: auto; line-height: 1.65; font-size: var(--content-font-size, 14px); color: #254b3c; padding: 3px 2px; }
textarea::placeholder { color: #6e907f; }
textarea:focus-visible { outline: none; }
.composer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
#character-count { font-size: 9px; color: #9aa28f; }
.composer-dictation,
.composer-actions { display: flex; align-items: center; gap: 6px; }
#voice-status { color: var(--book-muted); font-size: 10px; }
.voice-button { display: flex; align-items: center; justify-content: center; width: auto; min-width: 78px; height: 32px; gap: 6px; padding: 5px 10px; touch-action: none; user-select: none; }
.voice-button svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.voice-button[data-listening] { color: white; background: #a14b3f; border-color: #a14b3f; }
.primary, .secondary { border-radius: 7px; padding: 8px 13px; border: 1px solid #078254; font-size: 11px; font-weight: 600; }
.primary { background: #078254; color: white; }
.primary:hover { background: #05663f; }
.secondary { background: transparent; color: #078254; margin-right: 5px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.chat-shell > .tabs { padding: 8px 16px; border-bottom: 1px solid var(--book-line); }
.chat-view .chat-header { height: 62px; padding: 14px 24px; border-bottom-width: 2px; border-bottom-color: var(--book-line); }
.chat-view, .chat-header, .composer-area { background: var(--chat-bg); }
.assistant-content, .user-bubble, .composer,
[data-theme="dark"] .assistant-content, [data-theme="dark"] .user-bubble, [data-theme="dark"] .composer {
  background: var(--book-bg); border-color: var(--book-line);
}
.chat-header h1 { margin: 0; }
.rulebook-view, [data-theme="dark"] .rulebook-view { background: var(--book-bg); border: 0; }
.rulebook-heading { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; }
.rulebook-heading h2 { margin: 0; font-size: 18px; font-weight: 650; }
.rulebook-heading select { width: 55%; min-width: 0; font: inherit; font-size: 12px; color: inherit; background: var(--book-control); border: 1px solid var(--book-line); padding: 8px; border-radius: 6px; }
.reading-layout .rulebook-toolbar { padding: 0 22px 12px; border: 0; align-items: center; }
.rule-nav span { color: var(--book-muted); white-space: nowrap; }
.text-controls { display: flex; gap: 5px; }
.text-controls button, .rule-find button, .rule-nav button, [data-theme="dark"] .rule-nav button { background: var(--book-control); color: inherit; border: 1px solid var(--book-line); border-radius: 5px; padding: 6px 10px; font-size: 12px; min-height: 32px; }
.rule-find { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 22px 14px; border-bottom: 1px solid var(--book-line); }
.rule-find input { width: 0; flex: 1; min-width: 60px; background: var(--book-control); color: inherit; border: 1px solid var(--book-line); border-radius: 6px; padding: 8px 10px; font-size: 12px; }
.rule-find input::placeholder { color: var(--book-muted); }
#find-position { color: var(--book-muted); font-size: 10px; white-space: nowrap; }
.rulebook-body { position: relative; display: flex; flex: 1; min-height: 0; }
.rulebook-body .rulebook-scroll { padding: 16px 24px 60px 12px; scrollbar-gutter: stable; }
.find-markers { position: absolute; right: 15px; top: 0; bottom: 0; width: 7px; pointer-events: none; }
.find-markers span { position: absolute; left: 0; right: 0; height: 2px; background: #c48c1a; }
.find-markers span.active { background: #e25928; height: 3px; }
.rulebook-content { font-size: var(--content-font-size, 14px); }
.rulebook-content table { font-size: .9em; }
.rulebook-content h3, .rulebook-content h4 { font-size: 1.2em; }
.rule-annotation, [data-theme="dark"] .rule-annotation { color: var(--annotation-text); font-weight: 550; }
.rule-reference { color: inherit; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.rule-reference:hover { text-decoration-thickness: 2px; }
.rulebook-unit.annotation { color: var(--annotation-text); font-weight: 550; }
.rulebook-content mark.find-match { color: #302600; background: #f5d462; border-radius: 2px; }
.rulebook-content mark.active-match { background: #f7a55e; outline: 2px solid #ad5719; outline-offset: 1px; }
.rulebook-unit.relevant-rule, [data-theme="dark"] .rulebook-unit.relevant-rule { background: color-mix(in srgb, var(--book-bg) 82%, #58bd88); border-left-color: #32a873; }
.rulebook-unit.current-rule, [data-theme="dark"] .rulebook-unit.current-rule { background: color-mix(in srgb, var(--book-bg) 66%, #58bd88); border-left-color: #32a873; }
.rulebook-unit.jumped-rule { outline: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: -1px; border-radius: 4px; }
.quiet-button { padding: 5px 0; border: 0; background: none; color: inherit; font-size: 11px; }
.quiet-button:hover { text-decoration: underline; }
.pane-divider { display: none; }
@media (min-width: 1200px) {
  .reading-layout { grid-template-columns: minmax(0, var(--chat-share, 50%)) 7px minmax(0, 1fr); }
  .pane-divider { display: block; background: var(--book-line); cursor: col-resize; touch-action: none; }
  .pane-divider:hover, .pane-divider:focus-visible { background: #32a873; }
  .assistant-content { max-width: 100%; }
}

.conversation-notice { margin: 8px 18px; font-size: 13px; }

@keyframes pulse { to { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

@media (max-width: 760px) {
.assistant-content { max-width: 100%; padding: 14px 16px; }
  .rulebook-toolbar { padding: 10px 12px; gap: 6px; }
  .rule-nav { gap: 5px; }
  .rule-nav span { font-size: 9px; }
  .rulebook-scroll { padding: 14px 10px 50px; }
  .rulebook-unit { padding: 3px 10px; }
  .rulebook-unit.rule { padding-left: calc(10px + var(--rule-indent, 0ch)); }
.rulebook-heading { padding: 12px 16px; min-height: 56px; }
  .reading-layout .rulebook-toolbar { padding: 0 16px 10px; }
  .rule-find { padding: 0 16px 12px; }
  .rulebook-body .rulebook-scroll { padding-left: 4px; padding-right: 18px; }
  .composer-bottom { flex-wrap: wrap; }
  .conversation-nav { display: none; grid-column: 1 / -1; max-height: 30dvh; overflow-y: auto; }
.app-shell { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .sidebar { border-right: 0; padding: 14px 16px 10px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; overflow: visible; }
  .brand { font-size: 28px; padding: 0; }
  .new-chat { margin: 0; padding: 8px 10px; font-size: 10px; }
  .chat-view .chat-header { height: 59px; padding: 12px 18px; }
  .chat-header h1 { font-size: 17px; }
  #active-scope { font-size: 9px; }
  .welcome { margin: 25px auto; }
  .examples { margin-top: 20px; gap: 8px; }
  .examples button { font-size: 10px; padding: 12px; }
  .messages { padding: 20px 16px; }
  .user-bubble { max-width: 92%; font-size: 13px; padding: 12px 15px; }
  .assistant-message { gap: 9px; }
  .prose { font-size: 13px; }
  .composer-area { padding: 8px 12px 12px; }
  .composer { padding: 10px 12px; }
  textarea { font-size: 16px; }
  .conversation-archive { opacity: .8; }
}

/* Authentication remains readable on narrow screens and follows the existing palette. */
.auth-panel { width: min(420px, calc(100% - 40px)); margin: 10vh auto; padding: 24px; border: 1px solid #a5a59a; border-radius: 18px; }
.auth-panel h1 { font-size: 2rem; margin-bottom: 8px; }
.auth-panel form { display: grid; gap: 12px; margin-top: 24px; }
.auth-panel input { width: 100%; box-sizing: border-box; padding: 12px; border: 1px solid #92968c; border-radius: 8px; font: inherit; }
.auth-panel button { min-height: 44px; }
.auth-panel p { line-height: 1.5; }
.account-controls { display: grid; gap: 8px; margin-top: 12px; overflow-wrap: anywhere; font-size: 12px; }
.account-controls button { cursor: pointer; min-height: 32px; }

/* Workspace navigation and warm sage surfaces in both themes. */
:root { --sidebar-bg: #b9c9b5; --surface: #fbfaf5; --line: #98ad98; --muted: #4f6959; --accent: #078254; --hover: #d4dfd0; }
:root[data-theme="dark"] { --sidebar-bg: #34463b; --surface: #171a16; --line: #526258; --muted: #afbeb3; --accent: #65d69b; --hover: #45594b; }
.sidebar { padding: 20px 14px 16px; gap: 16px; background: var(--sidebar-bg); border-color: var(--line); overflow: hidden; }
.sidebar-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sidebar .brand { padding: 0; font-size: 32px; gap: 9px; }
.icon-button { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; padding: 7px; border: 1px solid transparent; border-radius: 9px; color: var(--muted); background: transparent; }
.icon-button:hover { background: var(--hover); color: var(--accent); }
.icon-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sun-icon, [data-theme="dark"] .moon-icon { display: none; }
[data-theme="dark"] .sun-icon { display: block; }
.new-chat, [data-theme="dark"] .new-chat { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin: 4px 0 0; padding: 11px 12px; min-height: 44px; background: #078254; color: #fff; border: 1px solid #169561; border-radius: 10px; box-shadow: 0 3px 10px #07825420; }
.new-chat:hover, [data-theme="dark"] .new-chat:hover { background: #066b45; }
.new-chat span { margin: 0; font-size: 20px; }
.new-chat .new-chat-label { font-size: 12px; }
.sidebar-content { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 24px; }
.conversation-nav { margin: 0; min-height: 0; max-height: 30dvh; flex: 0 1 auto; overflow-y: auto; }
.conversation-label, .sidebar-section-heading, .scope-picker > span { margin: 0; padding: 0 10px; color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: 1.4px; }
.conversation-label { width: 100%; margin-bottom: 10px; border: 0; background: transparent; text-align: left; }
.conversation-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.conversation-label svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 120ms ease; }
.conversation-label[aria-expanded="false"] svg { transform: rotate(-90deg); }
.conversation-label:hover { color: var(--accent); }
.theme-section { display: grid; gap: 9px; justify-items: start; }
.theme-section .icon-button { margin-left: 2px; border-color: var(--line); background: var(--surface); }
.conversation-row { border-radius: 8px; min-height: 36px; }
.conversation-row:hover, .conversation-row.active, [data-theme="dark"] .conversation-row.active { background: var(--hover); }
.conversation-open { padding: 10px; font-size: 12px; }
.conversation-row:focus-within .conversation-archive { opacity: 1; }
.sidebar-settings { display: grid; gap: 22px; flex-shrink: 0; }
.scope-picker { display: grid; gap: 9px; font-size: 10px; letter-spacing: 1.4px; color: var(--muted); }
.scope-picker select { width: 100%; min-height: 40px; padding: 9px 10px; font: inherit; font-size: 12px; letter-spacing: 0; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.account-controls { margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--line); gap: 10px; color: var(--muted); flex-shrink: 0; }
.sign-out { width: 100%; min-height: 40px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: inherit; font-size: 12px; font-weight: 600; }
.sign-out:hover { background: var(--hover); color: var(--accent); }
.sidebar-link { width: 100%; min-height: 40px; padding: 9px 10px; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: inherit; font-size: 12px; font-weight: 650; }
.sidebar-link:hover { background: var(--hover); color: var(--accent); }
.sidebar-bottom { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.sidebar-footer { margin: 0; padding: 0; font-size: 9px; color: var(--muted); }
.sidebar-collapsed { grid-template-columns: 72px minmax(0, 1fr); }
.sidebar-collapsed .sidebar { padding: 20px 12px 16px; align-items: center; }
.sidebar-collapsed .sidebar .brand, .sidebar-collapsed .new-chat-label, .sidebar-collapsed .sidebar-footer { display: none; }
.sidebar-collapsed .new-chat { width: 44px; justify-content: center; padding: 8px; }
.sidebar-collapsed .sidebar-bottom { margin-top: auto; }
.sidebar-collapsed #sidebar-toggle svg { transform: rotate(180deg); }
.primary, .secondary { border-color: #169561; }
[data-theme="dark"] .secondary { color: #85e4b2; }
.citation-link, [data-theme="dark"] .citation-link { color: #3b2608; background: #efc675; border-color: #f5d99d; }
.prose, .rulebook-content { color: inherit; }
body:has(.auth-panel:not([hidden])) { background: var(--book-bg); }
.auth-panel { background: var(--chat-bg); border-color: var(--line); box-shadow: 0 16px 60px #07825412; }
@media (max-width: 760px) {
  .app-shell, .app-shell.sidebar-collapsed { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .sidebar, .sidebar-collapsed .sidebar { display: grid; grid-template-columns: 1fr auto; padding: 10px 12px; gap: 10px; border-bottom: 1px solid var(--line); max-height: 65dvh; overflow-y: auto; align-items: center; }
  .sidebar-heading { justify-content: flex-start; }
  .sidebar .brand { font-size: 28px; }
  .sidebar-collapsed .sidebar .brand { display: flex; }
  .sidebar .new-chat { margin: 0; min-height: 40px; }
  .sidebar-collapsed .new-chat { width: auto; padding: 8px 10px; }
  .sidebar-collapsed .new-chat-label { display: inline; }
  .sidebar-bottom { display: none; }
  .sidebar-footer { display: none; }
  .sidebar-content { grid-column: 1 / -1; min-height: 0; gap: 16px; padding: 4px 2px 10px; }
  .conversation-nav { display: block; max-height: 22dvh; min-height: 0; overflow-y: auto; }
  .sidebar-settings { gap: 12px; }
  .account-controls { width: min(100%, 280px); align-self: center; margin-top: 12px; padding-top: 10px; }
}

.rulebook-heading h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.rulebook-heading small { font-size: 11px; font-weight: 400; line-height: 1.4; color: var(--book-muted); }
.rulebook-toolbar, .rule-nav { flex-wrap: wrap; }
.citation-label { font-size: 11px; color: var(--book-muted); }
.rulebook-unit.prose { font-size: inherit; line-height: inherit; white-space: normal; }

/* Administrator views reuse the application palette and never render stored HTML. */
.admin-shell { min-width: 0; min-height: 0; background: var(--chat-bg); overflow: hidden; font-size: var(--content-font-size, 14px); }
.admin-header { min-height: 78px; max-width: 1236px; padding: 18px 28px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 2px solid var(--line); background: var(--chat-bg); }
.admin-header h1, .admin-card h2 { margin: 0; }
.admin-header h1 { font-size: 1.57em; }
.eyebrow { margin: 0 0 4px; color: var(--muted); font-size: .71em; font-weight: 700; letter-spacing: 1.4px; }
.admin-scroll { height: calc(100dvh - 78px); padding: 24px; overflow: auto; display: grid; align-content: start; justify-items: start; gap: 18px; background: var(--chat-bg); }
.admin-card { width: 100%; max-width: 1180px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--book-bg); box-shadow: 0 5px 18px color-mix(in srgb, var(--line) 18%, transparent); }
.admin-card h2 { color: var(--accent); font-size: 1.14em; }
.admin-card h3 { margin: 5px 0 0; color: var(--muted); font-size: .93em; font-weight: 600; }
.admin-card p { margin: 6px 0 0; color: var(--muted); font-size: .86em; }
.invite-card { display: grid; grid-template-columns: 1fr minmax(280px, 520px); gap: 12px 24px; align-items: center; border-left: 4px solid #078254; }
.invite-card > p { grid-column: 2; }
#invite-form { display: flex; gap: 8px; }
#invite-form input { min-width: 0; flex: 1; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; color: inherit; background: var(--book-control); font: inherit; }
.admin-section-heading { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 14px; }
.conversation-heading-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.conversation-heading-title #conversation-filter { margin: 0; }
.admin-section-heading .quiet-button { padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; color: inherit; background: var(--book-control); }
.admin-section-heading .quiet-button:hover { color: var(--accent); background: var(--hover); }
.table-scroll { overflow-x: auto; }
.admin-card table { width: 100%; border-collapse: collapse; font-size: .86em; }
.admin-card th, .admin-card td { padding: 10px 9px; text-align: left; border-top: 1px solid var(--line); vertical-align: top; }
.admin-card th { color: var(--muted); background: color-mix(in srgb, var(--sidebar-bg) 46%, var(--book-bg)); font-size: .83em; letter-spacing: .5px; text-transform: uppercase; }
.admin-card tbody tr:nth-child(even) { background: color-mix(in srgb, var(--sidebar-bg) 14%, var(--book-bg)); }
.admin-card tbody tr:hover { background: var(--hover); }
.admin-card tr.selected { background: var(--hover); }
.admin-user-row, .admin-conversation-row { cursor: pointer; }
.user-email { color: var(--accent); overflow-wrap: anywhere; }
.admin-conversation-title-text { color: var(--accent); overflow-wrap: anywhere; }
.table-link { max-width: 540px; padding: 0; border: 0; background: none; color: var(--accent); text-align: left; font: inherit; overflow-wrap: anywhere; }
.table-link:hover { text-decoration: underline; }
.admin-shell .primary, .admin-shell .secondary, .admin-shell .quiet-button { font-size: .79em; }
.admin-conversation { display: grid; gap: 10px; }
.admin-turn { padding: 14px; }
.admin-turn.user { margin-left: 10%; border-radius: 16px 16px 3px 16px; background: var(--hover); }
.admin-turn.assistant { margin-right: 10%; border: 1px solid var(--line); border-radius: 3px 16px 16px 16px; }
.admin-turn.prose { color: inherit; white-space: normal; }
.admin-turn.prose > :first-child { margin-top: 0; }
.admin-turn.prose > :last-child { margin-bottom: 0; }
.admin-turn.prose p { color: inherit; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.admin-turn.prose ul { margin: 8px 0; padding-left: 22px; line-height: 1.55; }
.admin-turn.prose blockquote { margin: 8px 0; padding-left: 12px; border-left: 3px solid var(--line); color: var(--muted); }
@media (max-width: 760px) {
  .admin-header { min-height: 64px; padding: 12px 16px; }
  .admin-scroll { height: calc(100dvh - 64px); padding: 12px; }
  .invite-card { grid-template-columns: 1fr; }
  .invite-card > p { grid-column: 1; }
  #invite-form { flex-wrap: wrap; }
  #invite-form input { flex-basis: 100%; font-size: 16px; }
  .admin-card .table-scroll { overflow: visible; }
  .admin-card table, .admin-card tbody, .admin-card tr, .admin-card td { display: block; }
  .admin-card thead { display: none; }
  .admin-card tr { padding: 9px 0; border-top: 1px solid var(--line); }
  .admin-card td { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; padding: 6px 2px; border: 0; }
  .admin-card td::before { content: attr(data-label); color: var(--muted); font-size: .75em; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
  .table-link { max-width: none; }
}

/* Final workspace layout overrides. */
.chat-actions { display: flex; gap: 8px; align-items: center; }
.chat-actions .new-chat, [data-theme="dark"] .chat-actions .new-chat { width: auto; min-width: max-content; flex-shrink: 0; margin: 0; padding: 5px 9px; gap: 6px; box-shadow: none; }
.chat-actions .new-chat span { margin: 0; font-size: inherit; }
.chat-actions .new-chat-label, .sidebar-collapsed .chat-actions .new-chat-label { display: inline; }
.chat-actions .icon-button { width: 32px; height: 32px; padding: 6px; color: #fff; background: #078254; border-color: #169561; border-radius: 6px; }
.chat-actions .icon-button:hover { color: #fff; background: #066b45; }
.sidebar-content { gap: 18px; padding-top: 4px; }
.conversation-nav { max-height: none; flex: 1 1 auto; }
.conversation-open { display: flex; flex-direction: row; align-items: baseline; gap: 5px; padding: 8px 10px; }
.conversation-title { display: block; min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.conversation-time { flex-shrink: 0; color: var(--muted); font-size: 10px; }
.welcome { display: flex; align-items: flex-start; gap: 15px; text-align: left; }
.welcome-message { font-size: var(--content-font-size, 14px); line-height: 1.2375; }
.sidebar-text-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; flex-shrink: 0; }
.sidebar-text-controls > span { color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: 1.4px; }
.sidebar-text-controls > div { display: flex; gap: 5px; }
.sidebar-text-controls + .account-controls { margin-top: 0; }
.sidebar-option { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: 1.4px; cursor: pointer; flex-shrink: 0; }
.sidebar-option input { width: 16px; height: 16px; margin: 0; accent-color: #078254; cursor: pointer; }
.sidebar-option .switch-input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.switch-track { position: relative; width: 36px; height: 20px; flex: none; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); transition: background .15s, border-color .15s; }
.switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.switch-input:checked + .switch-track { border-color: #169561; background: #078254; }
.switch-input:checked + .switch-track::after { background: #fff; transform: translateX(16px); }
.switch-input:focus-visible + .switch-track { outline: 3px solid #20a66c; outline-offset: 3px; }
.rulebook-heading { height: 62px; min-height: 62px; padding: 10px 22px; border-bottom: 2px solid var(--book-line); }
.rulebook-heading, .rulebook-search-row, .rulebook-toolbar { background: var(--book-chrome); }
.rulebook-heading .rule-nav { justify-content: flex-end; flex-wrap: nowrap; }
.rulebook-search-row { display: flex; align-items: center; gap: 8px; height: 62px; min-height: 62px; padding: 14px 22px; box-sizing: border-box; }
.rulebook-search-row > select { width: 36%; min-width: 120px; min-height: 32px; padding: 6px 8px; color: inherit; background: var(--book-control); border: 1px solid var(--book-line); border-radius: 6px; font: inherit; font-size: 12px; }
.rulebook-search-row .rule-find { flex: 1; padding: 0; border: 0; }
.reading-layout .rulebook-toolbar { padding: 0 22px 10px; border-bottom: 1px solid var(--book-line); }
.text-controls button, .rule-find button, .rule-nav button, [data-theme="dark"] .rule-nav button { min-height: 32px; padding: 5px 9px; color: #fff; background: #078254; border-color: #169561; border-radius: 6px; }
.text-controls button:hover, .rule-find button:hover, .rule-nav button:hover { color: #fff; background: #066b45; }
.primary, .secondary, .sign-out, .sidebar-link { min-height: 32px; padding: 6px 10px; border-radius: 6px; }
.new-chat, .sidebar-link, .sign-out, .primary, .secondary,
[data-theme="dark"] .new-chat, [data-theme="dark"] .sidebar-link, [data-theme="dark"] .sign-out, [data-theme="dark"] .secondary {
  color: #f2fff8; background: #078254; border-color: #169561;
}
.new-chat:hover, .sidebar-link:hover, .sign-out:hover, .primary:hover, .secondary:hover,
[data-theme="dark"] .new-chat:hover, [data-theme="dark"] .sidebar-link:hover, [data-theme="dark"] .sign-out:hover, [data-theme="dark"] .secondary:hover {
  color: #fff; background: #066b45;
}
.action-button, [data-theme="dark"] .action-button {
  min-height: 32px; padding: 5px 9px; color: #f2fff8; background: #078254;
  border: 1px solid #169561; border-radius: 6px; font-size: 11px; font-weight: 600;
  line-height: 1.2;
}
.action-button:hover, [data-theme="dark"] .action-button:hover { color: #fff; background: #066b45; }
.sidebar-theme .icon-button { width: 32px; height: 32px; min-height: 32px; padding: 6px; }
.voice-button.action-button[data-listening] { color: white; background: #a14b3f; border-color: #a14b3f; }
#ask { min-width: 44px; }
.chat-actions .icon-button, [data-theme="dark"] .chat-actions .icon-button {
  display: grid; place-items: center; width: 32px; min-width: 32px; height: 32px;
  padding: 6px; line-height: 0;
}
.chat-actions .icon-button svg { display: block; width: 18px; height: 18px; margin: 0; }
.chat-actions .icon-button .sun-icon, [data-theme="dark"] .chat-actions .icon-button .moon-icon { display: none; }
[data-theme="dark"] .chat-actions .icon-button .sun-icon { display: block; }
.account-controls { gap: 8px; padding-top: 0; border-top: 0; }
.account-controls .sidebar-link { text-align: center; }
.rule-reference, [data-theme="dark"] .rule-reference { color: inherit; }

@media (max-width: 760px) {
  .sidebar, .sidebar-collapsed .sidebar {
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }
  .sidebar-heading { grid-column: 1 / -1; position: relative; z-index: 1; }
  .sidebar-content { overflow-y: auto; overscroll-behavior: contain; }
  .conversation-nav { max-height: 22dvh; flex: 0 1 auto; overflow-y: auto; }
  .rulebook-heading { height: 55px; min-height: 55px; padding: 8px 16px; }
  .rulebook-heading .citation-label { display: none; }
  .rulebook-search-row { align-items: stretch; flex-direction: column; height: auto; min-height: 0; padding: 8px 16px; }
  .rulebook-search-row > select { width: 100%; }
  .rulebook-search-row .rule-find { padding: 0; }
  .welcome { margin: 25px auto; }
}