:root {
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Yu Gothic', sans-serif;
  color: #090c11;
  background: #f2f6f9;
  --bg: #f2f6f9;
  --blue: #f4f9fe;
  --ink: #090c11;
  --body: #383c41;
  --sub: #71767a;
  --dot: #55adf9;
  --border: #dce5eb;
  --radius: 28px;
  --color-motion: 150ms cubic-bezier(.4, 0, .2, 1);
  --panel-motion: 250ms linear(0 0%, .44 18%, .77 32%, .97 40%, 1.01 50%, 1.005 65%, 1 80%, 1 100%);
}

* { box-sizing: border-box; }
html, body, #root { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible { outline: 2px solid #55adf9; outline-offset: 3px; }
::selection { background: #bfdfff; }

.app-shell { position: relative; width: 100%; height: 100dvh; background: var(--bg); overflow: hidden; }
.app-scroll { width: 100%; height: 100%; overflow: auto; overscroll-behavior: contain; }
.board-content { width: 100%; max-width: 720px; min-height: 100%; margin: 0 auto; padding: 49px 32px 100px; }
.board-pages { position: relative; min-height: 100%; display: grid; }
.board-content { grid-area: 1 / 1; }
.board-content[data-current-page="false"] { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; }
.app-scroll { overflow-anchor: none; }
.board-map-placement { position: fixed; z-index: 1; top: 74px; left: calc(50% - 560px); width: 180px; }
.board-map { width: 100%; max-height: calc(100dvh - 160px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.board-map ul { list-style: none; padding: 0; margin: 0; font-size: 13px; line-height: 1.4; }
.board-map ul ul { padding-left: 16px; }
.board-map > ul { margin-top: -8px; }
.board-map-item { --branch-duration: 180ms; --branch-ease: cubic-bezier(.22,1,.36,1); }
.board-map-item[data-open="true"] { --branch-duration: 260ms; }
.board-map-row { min-height: 30px; display: flex; align-items: center; gap: 2px; }
.board-map-name { border: 0; background: transparent; padding: 5px 8px; border-radius: 10px; text-align: left; font-size: 13px; line-height: 1.4; min-width: 0; overflow-wrap: anywhere; color: var(--sub); }
.board-map-name.is-ancestor { color: var(--body); }
.board-map-name[aria-current] { background: #e3f2fd; color: #137fc6; font-weight: 600; }
.board-map-name:hover { background: #e3f2fd; }
.board-map-toggle { display: grid; place-items: center; flex: 0 0 25px; height: 30px; background: transparent; color: var(--sub); border: 0; padding: 0; margin-left: -3px; }
.board-map-toggle svg { width: 13px; height: 13px; transition: transform var(--branch-duration) var(--branch-ease); }
.board-map-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.board-map-branch { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--branch-duration) var(--branch-ease); }
.board-map-item[data-open="true"] > div > .board-map-branch { grid-template-rows: 1fr; }
.board-map-inner { min-height: 0; overflow: hidden; }
.board-map-inner > ul { opacity: 0; transform: translateY(-5px); transition: opacity var(--branch-duration) var(--branch-ease), transform var(--branch-duration) var(--branch-ease); }
.board-map-item[data-open="true"] > div > .board-map-branch > .board-map-inner > ul { opacity: 1; transform: translateY(0); }
.app-shell--review .board-map-placement { top: calc(var(--reviewbar-height, 112px) + 74px); }
.app-shell--review .board-map { max-height: calc(100dvh - var(--reviewbar-height, 112px) - 160px); }
@media (max-width: 1159px) {
  .board-map-placement, .app-shell--review .board-map-placement { position: static; width: 100%; max-width: 720px; margin: 0 auto; padding: 38px 32px 20px; transition: padding 180ms cubic-bezier(.22,1,.36,1); }
  .board-map-placement[data-empty="true"] { padding-top: 0; padding-bottom: 0; }
  .board-map, .app-shell--review .board-map { max-height: min(224px,35dvh); }
  .board-pages { min-height: 0; }
  .board-map-placement + .board-pages .board-content { padding-top: 12px; }
}
@media (max-width: 700px) { .board-map-placement { padding: 30px 22px 20px; } }
@media (max-width: 480px) { .board-map-placement { padding: 24px 18px 20px; } }
@media (pointer: coarse) { .board-map-name { min-height: 44px; } .board-map-toggle { flex-basis: 44px; height: 44px; } }
.board-content h1, .board-content h2, .board-content h3 { margin: 0; }
.board-content h1, .board-content h2 { font-size: 22px; font-weight: 600; line-height: 1.45; }
.board-content > h1:not(.reader-title) { margin: 8px 0 20px; }
.category-list { display: flex; flex-direction: column; gap: 18px; }
.animated-card-list { width: 100%; }
.animated-card-slot { width: 100%; overflow: hidden; }
.animated-card-slot .event-card { margin: 0; }
.empty-board { padding-top: 48px; }
.empty-board .outline-button { margin-top: 24px; }
.category-island { display: block; width: 100%; padding: 18px; border: 0; border-radius: var(--radius); background: #fff; text-align: left; }
.island-title { display: block; color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.45; }
.island-overview { display: block; margin-top: 11px; padding: 15px 16px; border: 4px solid #fff; border-radius: var(--radius); background: var(--blue); }
.island-overview-list { display: block; }
.island-overview-item { position: relative; display: block; margin-bottom: 10px; padding-left: 18px; color: var(--body); font-size: 15px; font-weight: 400; line-height: 1.75; }
.island-overview-item:last-child { margin-bottom: 0; }
.island-overview-item::before { content: ''; position: absolute; top: .75em; left: 0; width: 5px; height: 5px; background: var(--dot); border-radius: 50%; }

.event-card { position: relative; display: block; width: 100%; margin: 0 0 14px; padding: 18px; text-align: left; background: #fff; border: 0; border-radius: var(--radius); }
.agent-origin-tag { display: table; margin-bottom: 14px; padding: 5px 10px; border-radius: 12px; background: #ebf5ff; color: #1888d3; font-size: 13px; font-weight: 600; line-height: 1.4; }
.event-title { display: block; color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.45; }
.event-excerpt { display: -webkit-box; margin-top: 11px; color: var(--sub); font-size: 15px; font-weight: 400; line-height: 1.6; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.event-date { display: block; width: 100%; margin-top: 13px; color: var(--sub); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.pill-button:hover, .outline-button:hover { background: #edf6fd; }
.overview-card { width: 100%; margin: 0 0 22px; padding: 15px 16px; background: var(--blue); border: 4px solid white; border-radius: var(--radius); }
.overview-label { display: block; margin: 0 0 11px; color: var(--sub); font-size: 13px; font-weight: 600; line-height: 1.4; }
.overview-card ul { margin: 0; padding: 0; list-style: none; }
.overview-card li { position: relative; margin: 0 0 10px; padding-left: 18px; color: var(--body); font-size: 15px; font-weight: 400; line-height: 1.75; user-select: text; cursor: text; }
.overview-card li:last-child { margin-bottom: 0; }
.overview-card li::before { content: ''; position: absolute; top: .75em; left: 0; width: 5px; height: 5px; background: var(--dot); border-radius: 50%; }

.back-button { display: grid; place-items: center; width: 32px; height: 32px; margin: -4px 0 25px -2px; padding: 0; color: #696f73; background: transparent; border: 0; border-radius: 50%; transition: background-color var(--color-motion); }
.back-button svg { width: 24px; height: 24px; }
.back-button:hover { background: #e4edf3; }
.back-button:active { background: #dce5eb; }
.reader-title { margin: 8px 0 20px !important; user-select: text; cursor: text; }
.reader-card { width: 100%; padding: 26px; border-radius: 24px; background: #fff; }
.reader-card p { margin: 0; color: var(--body); font-size: 16px; line-height: 1.8; white-space: pre-wrap; user-select: text; cursor: text; }
.reader-card p + p { margin-top: 20px; padding-top: 20px; border-top: 1px solid #e8eef2; }
.reader-footer { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-top: 30px; }
.reader-footer time, .original-date { color: var(--sub); font-size: 12px; font-variant-numeric: tabular-nums; }
.pill-button { min-height: 36px; padding: 8px 18px; background: #fff; border: 1px solid var(--border); border-radius: 24px; font-size: 14px; transition: background-color var(--color-motion); }
.pill-button:disabled { color: #aeb9bf; cursor: default; }
.pill-button:disabled:hover { background: #fff; }

.settings-launch { position: absolute; left: 26px; bottom: 25px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--ink); background: #fff; border: 1px solid var(--border); border-radius: 50%; transition: background-color var(--color-motion); }
.settings-launch svg { width: 26px; height: 26px; }
.settings-launch:hover { background: #edf6fd; }

.review-toolbar { position: relative; z-index: 6; padding: 20px 18px 9px; background: #fff; border-bottom: 1px solid var(--border); max-height: 40dvh; overflow: auto; }
.review-toolbar-main, .review-toolbar-status { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.review-toolbar-main strong { margin-right: 8px; font-size: 13px; white-space: nowrap; }
.review-toolbar button, .review-toolbar select { min-height: 29px; padding: 4px 9px; border: 1px solid var(--border); border-radius: 11px; background: #f9fbfd; font-size: 12px; }
.review-toolbar button:disabled { opacity: .45; cursor: default; }
.review-toolbar-status { margin-top: 6px; color: var(--sub); font-size: 12px; }
.review-toolbar-status label { display: flex; align-items: center; gap: 5px; }
.review-toolbar-status span { margin-left: 7px; }
.app-shell--review { display: grid; grid-template-rows: auto minmax(0,1fr); }
.app-shell--review .app-scroll { position: relative; height: 100%; margin-top: 0; }
.mutation-controls { margin-top: 8px; font-size: 12px; color: var(--sub); }
.mutation-controls summary { cursor: pointer; width: fit-content; }
.mutation-controls select { max-width: 100%; }

.overlay { position: fixed; z-index: 20; inset: 0; display: flex; align-items: center; justify-content: center; padding: 62px 32px 36px; background: oklab(.561212 -.006363 -.008314 / .3); backdrop-filter: blur(12px); animation: veil-in 250ms cubic-bezier(.4, 0, .2, 1) both; }
.overlay-panel { width: min(100%, 670px); max-height: 100%; overflow: auto; background: #fff; border: 4px solid #fff; border-radius: 32px; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); transform-origin: bottom; animation: panel-in var(--panel-motion) both; }
.overlay--child { z-index: 21; }
.overlay--child .overlay-panel { width: min(100%, 596px); }
.overlay-panel:has(.settings-panel) { overflow: visible; }
.overlay--closing { animation: veil-out 250ms cubic-bezier(.4, 0, .2, 1) both; }
.overlay--closing .overlay-panel { animation: panel-out var(--panel-motion) both; }
.overlay-close { position: absolute; top: 20px; right: 20px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; color: #fff; background: oklab(.628943 -.010888 -.0126 / .5); border: 0; border-radius: 50%; transition: background-color var(--color-motion); animation: close-in 300ms cubic-bezier(.23, 1, .32, 1) both; }
.overlay-close svg { width: 52%; height: 52%; }
.overlay-close:hover { background: oklab(.628943 -.010888 -.0126); }
.original-card { padding: 29px 31px 31px; border-radius: 28px; background: #fff; }
.original-card > h2 { margin: 0 0 23px; font-size: 22px; font-weight: 600; line-height: 1.45; }
.original-body { max-height: min(48vh, 480px); overflow-y: auto; color: var(--body); font-size: 16px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; cursor: text; }
.original-body .is-context { color: #a4afb6; }
.original-body .is-evidence { color: var(--ink); }
.original-date { display: block; margin-top: 28px; text-align: right; }

.settings-panel, .connection-panel { padding: 31px 32px 33px; }
.settings-section + .settings-section { margin-top: 29px; }
.settings-section h2 { margin: 0 0 15px; font-size: 19px; font-weight: 600; line-height: 1.45; }
.connection-row, .model-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 50px; }
.connection-name, .connection-heading { display: inline-flex; align-items: center; gap: 11px; font-size: 16px; font-weight: 500; }
.brand-icon { width: 28px; height: 28px; object-fit: contain; }
.outline-button { min-height: 36px; padding: 7px 17px; border: 1px solid var(--border); border-radius: 22px; background: #fff; font-size: 14px; font-weight: 500; transition: background-color var(--color-motion); }
.outline-button:disabled { color: #aeb9bf; cursor: default; }
.outline-button:disabled:hover { background: #fff; }
.settings-caption { margin: -5px 0 16px; color: var(--sub); font-size: 14px; line-height: 1.5; }
.model-row { align-items: end; }
.model-controls { display: flex; align-items: end; gap: 20px; max-width: 100%; }
.model-select-wrap { position: relative; flex: 0 0 182px; }
.model-select { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 39px; padding: 7px 11px; border: 1px solid var(--border); border-radius: 13px; background: #fff; font-size: 14px; white-space: nowrap; }
.model-select-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.select-chevron { display: block; width: 16px; height: 16px; flex: none; margin-left: auto; }
.model-mark { display: block; width: 25px; height: 25px; flex: none; padding: 4px; border: 1px solid #d7e4ec; border-radius: 8px; }
.model-menu { position: absolute; z-index: 30; bottom: calc(100% + 7px); left: 0; min-width: 245px; max-height: min(320px, 50vh); overflow: auto; padding: 6px; background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 12px 35px rgba(25, 51, 67, .12); transform-origin: bottom left; }
.model-menu-group + .model-menu-group { margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--border); }
.model-menu-heading { display: flex; align-items: center; gap: 8px; padding: 5px 8px; color: var(--sub); font-size: 13px; }
.model-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px; border: 0; border-radius: 9px; background: transparent; text-align: left; font-size: 13px; }
.model-menu button:hover, .model-menu button[aria-selected='true'] { background: #edf6fd; }
.model-menu button:disabled { color: var(--sub); cursor: not-allowed; }
.model-menu button:disabled[aria-selected='true'] { color: var(--ink); }
.effort-control { width: 240px; min-width: 240px; padding-bottom: 3px; }
.effort-label { display: flex; justify-content: space-between; width: var(--effort-width); min-height: 18px; margin-bottom: 6px; color: var(--sub); font-size: 12px; }
.effort-label strong { color: var(--ink); font-weight: 500; }
.effort-slider { width: var(--effort-width); }
.connect-slot { display: flex; align-items: end; justify-content: flex-end; min-width: 91px; min-height: 39px; margin-left: auto; }
.connection-heading { margin-bottom: 24px; font-size: 19px; font-weight: 600; }
.field-label { display: block; margin-bottom: 8px; color: var(--sub); font-size: 13px; }
.key-help { margin: 0 0 19px; color: var(--sub); font-size: 13px; line-height: 1.55; }
.key-help a { color: var(--body); text-decoration: underline; text-underline-offset: 2px; }
.connection-panel input[type='password'], .connection-panel input[type='url'] { display: block; width: 100%; min-height: 46px; padding: 10px 13px; border: 1px solid var(--border); border-radius: 14px; background: #f9fbfd; font-size: 15px; }
.connection-panel input[readonly] { cursor: not-allowed; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 23px 0; cursor: pointer; font-size: 15px; }
.toggle-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle-track { position: relative; display: block; width: 42px; height: 26px; background: #d9e2e8; border-radius: 16px; transition: background .2s ease; }
.toggle-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.13); transition: transform .2s ease; }
.toggle-row input:checked + .toggle-track { background: #76baf0; }
.toggle-row input:checked + .toggle-track::after { transform: translateX(16px); }
.toggle-row input:focus-visible + .toggle-track { outline: 2px solid var(--dot); outline-offset: 3px; }
.save-button { margin-top: 19px; }
.toggle-row + .save-button { margin-top: 0; }

@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes veil-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes veil-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes panel-in { from { opacity: 0; transform: translateY(40px) scale(.8); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes panel-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(40px) scale(.8); } }
@keyframes close-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 700px) {
  .review-toolbar { height: auto; }
  .app-shell--review .app-scroll { height: 100%; margin-top: 0; }
  .board-content { padding: 32px 22px 100px; }
  .settings-launch { left: 15px; bottom: 16px; }
  .overlay { padding: 62px 18px 18px; }
  .overlay-close { right: 12px; top: 12px; width: 32px; height: 32px; }
  .settings-panel, .connection-panel { padding: 26px 22px; }
  .model-controls { flex-wrap: wrap; gap: 10px; }
  .model-row { align-items: end; }
}

@media (max-width: 480px) {
  .board-content { padding: 24px 18px 92px; }
  .board-content h1, .board-content h2 { font-size: 20px; }
  .model-row { align-items: start; flex-direction: column; }
  .model-controls { width: 100%; }
  .ai-connect { align-self: flex-end; }
  .original-card { padding: 22px; }
}

@media (max-height: 500px) {
  .overlay-panel:has(.settings-panel) { overflow: auto; }
}

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

/* Context uses Full Picture's actual inset surface, without extra labels. */
.ai-chat-context { width: 100%; text-align: left; }
.ai-chat-context-summary { display: block; color: var(--body); font-size: 15px; font-weight: 400; line-height: 1.75; overflow-wrap: anywhere; }
.reader-card > .ai-chat-context--before { margin-top: 0; margin-bottom: 22px; }
.reader-card > .ai-chat-context--after { margin-top: 22px; }
.ai-chat-original-message + .ai-chat-original-message { margin-top: 28px; }