/* ── Gruvbox Dark Soft (default) ───────────────────────────────── */
:root {
  color-scheme: dark;
  --bg:             #32302f;
  --bg1:            #3c3836;
  --bg2:            #504945;
  --bg3:            #665c54;
  --bg4:            #7c6f64;
  --fg:             #ebdbb2;
  --fg4:            #a89984;
  --border:         #504945;
  --accent:         #83a598;
  --btn-bg:         #458588;
  --btn-hover:      #689d6a;
  --btn-fg:         #ebdbb2;
  --tag-bg:         #3c3836;
  --tag-fg:         #83a598;
  --code-bg:        #504945;
  --code-block-bg:  #1d2021;
  --code-block-fg:  #ebdbb2;
  --ann-mark:       #fabd2f;
  --ann-mark-hover: #d79921;
  --ann-icon:       #d79921;
  --popup-bg:       #282828;
  --popup-fg:       #ebdbb2;
  --modal-bg:       #32302f;
  --overlay:        rgba(0,0,0,0.6);
  --delete-bg:      #3c3836;
  --delete-border:  #cc241d;
  --delete-fg:      #fb4934;
  --success:        #b8bb26;
}

/* ── Gruvbox Light Soft ─────────────────────────────────────────── */
html.light {
  color-scheme: light;
  --bg:             #f2e5bc;
  --bg1:            #ebdbb2;
  --bg2:            #d5c4a1;
  --bg3:            #bdae93;
  --bg4:            #a89984;
  --fg:             #3c3836;
  --fg4:            #7c6f64;
  --border:         #d5c4a1;
  --accent:         #076678;
  --btn-bg:         #458588;
  --btn-hover:      #689d6a;
  --btn-fg:         #f2e5bc;
  --tag-bg:         #d5c4a1;
  --tag-fg:         #3c3836;
  --code-bg:        #d5c4a1;
  --code-block-bg:  #282828;
  --code-block-fg:  #ebdbb2;
  --ann-mark:       #fabd2f;
  --ann-mark-hover: #d79921;
  --ann-icon:       #b57614;
  --popup-bg:       #3c3836;
  --popup-fg:       #ebdbb2;
  --modal-bg:       #f2e5bc;
  --overlay:        rgba(0,0,0,0.3);
  --delete-bg:      #fbdbd5;
  --delete-border:  #cc241d;
  --delete-fg:      #9d0006;
  --success:        #79740e;
}

/* ── Base ───────────────────────────────────────────────────────── */
body { font-family: -apple-system, system-ui, sans-serif; max-width: 960px; margin: 0 auto; padding: 20px; background: var(--bg); color: var(--fg); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
input, textarea, select { background: var(--bg1); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; }
input::placeholder, textarea::placeholder { color: var(--fg4); }
button, .btn { background: var(--btn-bg); color: var(--btn-fg); border: none; border-radius: 6px; padding: 6px 16px; cursor: pointer; font-size: 0.9em; text-decoration: none; display: inline-block; }
button:hover, .btn:hover { background: var(--btn-hover); color: var(--btn-fg); text-decoration: none; }
.read-status-btn { background: var(--bg2); color: var(--fg4); border: 1px solid var(--border); border-radius: 4px; padding: 3px 10px; }
.read-status-btn:hover { background: var(--btn-hover); color: var(--fg); }
.read-status-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.tag-remove-btn { background: none; border: none; color: var(--fg4); cursor: pointer; padding: 0 2px; font-size: 0.9em; line-height: 1; }
.tag-remove-btn:hover { color: var(--delete-fg); }

/* ── Tables ─────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; margin-top: 16px; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); }
th { background: var(--bg1); font-weight: 600; }
tr:hover { background: var(--bg1); }

/* ── Stats / Cards ──────────────────────────────────────────────── */
.stats { display: flex; gap: 16px; margin: 16px 0; }
.stat { background: var(--bg1); padding: 12px 20px; border-radius: 8px; }
.stat strong { display: block; font-size: 1.5em; }

/* ── Content boxes ──────────────────────────────────────────────── */
.content-box { background: var(--bg1); padding: 16px; border-radius: 8px; margin-top: 16px; white-space: pre-wrap; word-wrap: break-word; font-size: 0.9em; line-height: 1.6; max-height: 600px; overflow-y: auto; }

/* ── Attachments ────────────────────────────────────────────────── */
.attachments-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 16px; }
.attachment-card { background: var(--bg1); border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.attachment-card img { width: 100%; height: 200px; object-fit: cover; display: block; }
.attachment-card audio, .attachment-card video { width: 100%; display: block; }
.attachment-card .filename { padding: 8px; font-size: 0.8em; color: var(--fg4); word-break: break-all; }

/* ── Typography helpers ─────────────────────────────────────────── */
.meta { color: var(--fg4); font-size: 0.9em; }
.tag { background: var(--tag-bg); color: var(--tag-fg); padding: 2px 8px; border-radius: 4px; font-size: 0.85em; margin-right: 4px; }

/* ── Nav ────────────────────────────────────────────────────────── */
nav { margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border); display: flex; gap: 16px; align-items: center; }
#theme-toggle { margin-left: auto; background: var(--bg1); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 1em; line-height: 1; }
#theme-toggle:hover { background: var(--bg2); }

/* ── Search results ─────────────────────────────────────────────── */
.search-result { margin-bottom: 24px; }
.search-result h3 { margin: 4px 0; }
.search-result p { margin: 4px 0; white-space: pre-wrap; word-wrap: break-word; }

/* ── Markdown body ──────────────────────────────────────────────── */
.markdown-body { white-space: normal; }
.markdown-body h1, .markdown-body h2, .markdown-body h3 { margin: 1em 0 0.5em; }
.markdown-body p { margin: 0.75em 0; line-height: 1.7; }
.markdown-body ul, .markdown-body ol { padding-left: 1.5em; margin: 0.75em 0; }
.markdown-body li { margin: 0.25em 0; }
.markdown-body code { background: var(--code-bg); padding: 1px 5px; border-radius: 3px; font-family: monospace; font-size: 0.9em; }
.markdown-body pre { background: var(--code-block-bg); color: var(--code-block-fg); padding: 12px; border-radius: 6px; overflow-x: auto; }
.markdown-body pre code { background: none; padding: 0; color: inherit; }
.markdown-body blockquote { border-left: 3px solid var(--border); margin: 0; padding-left: 1em; color: var(--fg4); }
.markdown-body table { margin-top: 0.75em; }
.markdown-body a { color: var(--accent); }

/* ── Copy button ────────────────────────────────────────────────── */
.copy-btn { background: var(--bg1); border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; cursor: pointer; font-size: 0.8em; margin-right: 8px; color: var(--fg); }
.copy-btn:hover { background: var(--bg2); }
.copy-btn:active { background: var(--bg3); }

/* ── Show page layout ───────────────────────────────────────────── */
body.show-page { max-width: none; padding: 20px 40px; }
body.show-page .content-box { max-height: none; overflow-y: visible; }
.show-layout { display: flex; gap: 24px; margin-top: 16px; }
.show-main { flex: 1; min-width: 0; }
.show-sidebar { width: 420px; flex-shrink: 0; position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow-y: auto; }

/* ── Bookmark note ──────────────────────────────────────────────── */
.bookmark-note-area { background: var(--bg1); border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin: 16px 0; }
.bookmark-note-area h3 { margin: 0 0 8px; font-size: 0.95em; color: var(--fg4); }
.bookmark-note-area textarea { width: 100%; box-sizing: border-box; min-height: 80px; border: 1px solid var(--border); border-radius: 6px; padding: 8px; font-family: inherit; font-size: 0.9em; resize: vertical; background: var(--bg2); color: var(--fg); }
.bookmark-note-area button { margin-top: 8px; background: var(--btn-bg); color: var(--btn-fg); border: none; border-radius: 6px; padding: 6px 16px; cursor: pointer; font-size: 0.9em; }
.bookmark-note-area button:hover { background: var(--btn-hover); }
#note-saved-msg { display: none; color: var(--success); font-size: 0.85em; margin-left: 8px; }

/* ── Annotations ────────────────────────────────────────────────── */
mark.annotation-mark { background: var(--ann-mark); cursor: pointer; border-radius: 2px; color: #282828; transition: outline 0.1s; }
mark.annotation-mark:hover { background: var(--ann-mark-hover); }
mark.annotation-mark.is-highlighted { outline: 3px solid var(--ann-icon); outline-offset: 1px; }
.ann-card .ann-anchor { cursor: pointer; }
.ann-card .ann-anchor:hover { color: var(--accent); }
.ann-marker-icon { font-size: 0.75em; color: var(--ann-icon); margin-left: 2px; }
#ann-popup { position: absolute; display: none; background: var(--popup-bg); color: var(--popup-fg); padding: 6px 12px; border-radius: 6px; font-size: 0.85em; cursor: pointer; z-index: 100; white-space: nowrap; }
#ann-popup:hover { background: var(--bg2); }
.ann-card { background: var(--bg1); border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 12px; font-size: 0.875em; }
.ann-card.highlighted { border-color: var(--accent); background: var(--bg2); }
.ann-card .ann-anchor { font-size: 0.8em; color: var(--fg4); margin-bottom: 4px; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ann-card .ann-note { color: var(--fg); line-height: 1.5; margin-bottom: 8px; }
.ann-card .ann-note pre { background: var(--bg0); border: 1px solid var(--border); border-radius: 4px; padding: 8px; overflow-x: auto; margin: 6px 0; }
.ann-card .ann-note code { font-family: monospace; font-size: 0.9em; }
.ann-card .ann-note p { margin: 0 0 4px; }
.ann-card .ann-note p:last-child { margin-bottom: 0; }
.ann-card .ann-actions { display: flex; gap: 8px; }
.ann-card button { background: none; border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; cursor: pointer; font-size: 0.8em; color: var(--fg); }
.ann-card button:hover { background: var(--bg2); }
.ann-card button.delete-btn:hover { background: var(--delete-bg); border-color: var(--delete-border); color: var(--delete-fg); }
.ann-edit-form { margin-top: 8px; display: none; }
.ann-edit-form textarea { width: 100%; box-sizing: border-box; min-height: 60px; border: 1px solid var(--border); border-radius: 4px; padding: 6px; font-family: inherit; font-size: 0.9em; resize: vertical; background: var(--bg2); color: var(--fg); }
.ann-edit-form .ann-edit-actions { display: flex; gap: 8px; margin-top: 4px; }
.ann-edit-form button { background: var(--btn-bg); color: var(--btn-fg); border: none; border-radius: 4px; padding: 4px 10px; cursor: pointer; font-size: 0.8em; }
.ann-edit-form button.cancel-btn { background: var(--bg1); color: var(--fg); border: 1px solid var(--border); }

/* ── Annotation modal ───────────────────────────────────────────── */
#ann-overlay { display: none; position: fixed; inset: 0; background: var(--overlay); z-index: 200; }
#ann-modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--modal-bg); border: 1px solid var(--border); border-radius: 10px; padding: 24px; width: 400px; max-width: 90vw; z-index: 201; }
#ann-modal h3 { margin: 0 0 12px; font-size: 1em; color: var(--fg); }
#ann-modal .ann-preview { font-size: 0.85em; color: var(--fg4); background: var(--bg1); border-radius: 4px; padding: 6px 10px; margin-bottom: 12px; font-style: italic; }
#ann-modal textarea { width: 100%; box-sizing: border-box; min-height: 80px; border: 1px solid var(--border); border-radius: 6px; padding: 8px; font-family: inherit; font-size: 0.9em; resize: vertical; background: var(--bg2); color: var(--fg); }
#ann-modal .modal-actions { display: flex; gap: 10px; margin-top: 12px; justify-content: flex-end; }
#ann-modal button { border-radius: 6px; padding: 7px 16px; cursor: pointer; font-size: 0.9em; border: none; }
#ann-modal .save-btn { background: var(--btn-bg); color: var(--btn-fg); }
#ann-modal .save-btn:hover { background: var(--btn-hover); }
#ann-modal .cancel-btn { background: var(--bg1); color: var(--fg); border: 1px solid var(--border); }

/* ── Accordion sections ─────────────────────────────────────────── */
.section-heading { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; margin: 0 0 12px; }
.section-heading h2, .section-heading h3 { margin: 0; }
.section-heading .chevron { color: var(--fg4); font-style: normal; font-size: 0.8em; transition: transform 0.15s; display: inline-block; }
.section-heading.is-collapsed .chevron { transform: rotate(-90deg); }
.section-body.is-collapsed { display: none; }

/* ── Sidebar empty state ────────────────────────────────────────── */
.sidebar-empty { color: var(--fg4); font-size: 0.875em; text-align: center; padding: 24px 0; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .show-layout { flex-direction: column; }
  .show-sidebar { width: 100%; position: static; max-height: none; }
}

/* ── Research show ──────────────────────────────────────────────── */
.research-layout { display: flex; gap: 1.5em; height: calc(100vh - 120px); }
.research-sidebar { width: 240px; flex-shrink: 0; display: flex; flex-direction: column; gap: 1em; overflow-y: auto; }
.research-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.conversation-title { display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.5em; flex-wrap: wrap; }
.conversation-title h2 { margin: 0; font-size: 1.1em; flex: 1; }
.title-edit { background: none; border: none; cursor: pointer; color: var(--fg4); font-size: 1em; padding: 2px 4px; }
.title-edit:hover { color: var(--fg); }
.messages-area { flex: 1; overflow-y: auto; border: 1px solid var(--border); border-radius: 4px; padding: 1em; display: flex; flex-direction: column; gap: 0.75em; }
.message { display: flex; flex-direction: column; gap: 0.4em; padding: 0.75em 1em; border-radius: 4px; border-left: 3px solid var(--border); }
.message.user      { background: var(--bg2); border-left-color: var(--accent); }
.message.assistant { background: var(--bg1); border-left-color: var(--success); }
.message-role { font-size: 0.72em; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; }
.message.assistant .message-role { cursor: pointer; }
.message.user .message-role      { color: var(--accent); }
.message.assistant .message-role { color: var(--success); }
.message-content { white-space: pre-wrap; word-wrap: break-word; line-height: 1.6; }
.message-thinking { font-size: 0.85em; color: var(--fg4); font-style: italic; border-left: 2px solid var(--border); padding-left: 0.5em; margin-top: 0.2em; }
.message-thinking summary { cursor: pointer; }
.streaming-indicator { color: var(--fg4); animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
.input-row { display: flex; gap: 0.5em; margin-top: 0.75em; }
.input-row textarea { flex: 1; resize: vertical; min-height: 60px; font-family: inherit; font-size: 1em; }
.sidebar-section { background: var(--bg1); border: 1px solid var(--border); border-radius: 4px; padding: 0.75em; }
.sidebar-section h3 { margin: 0 0 0.5em; font-size: 0.85em; text-transform: uppercase; color: var(--fg4); }
.sources-list { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }
.sources-list li { padding: 0.2em 0; }
.facts-list { list-style: none; padding: 0; margin: 0; font-size: 0.85em; }
.fact-item { display: flex; align-items: flex-start; gap: 0.4em; padding: 0.25em 0; border-bottom: 1px solid var(--border); }
.fact-item:last-child { border-bottom: none; }
.fact-text { flex: 1; line-height: 1.3; }
.fact-actions { display: flex; gap: 2px; flex-shrink: 0; }
.fact-btn { background: none; border: 1px solid var(--border); border-radius: 3px; cursor: pointer; padding: 1px 5px; font-size: 0.8em; }
.fact-btn.accept:hover { background: var(--green); color: var(--bg); }
.fact-btn.reject:hover { background: var(--red); color: var(--bg); }
.fact-accepted { color: var(--green); font-size: 0.85em; }
.fact-delete-btn { background: none; border: none; cursor: pointer; color: var(--fg4); font-size: 0.8em; padding: 1px 3px; opacity: 0; transition: opacity 0.15s; flex-shrink: 0; line-height: 1; }
.fact-item:hover .fact-delete-btn { opacity: 1; }
.fact-delete-btn:hover { color: var(--delete-fg); }
.fact-bulk-btn { background: none; border: 1px solid var(--border); border-radius: 3px; cursor: pointer; padding: 1px 5px; font-size: 0.75em; margin-left: 2px; }
.fact-bulk-btn.accept:hover { background: var(--success); color: var(--bg); }
.fact-bulk-btn.reject:hover { background: var(--delete-fg); color: var(--bg); }
.chat-empty-state { color: var(--fg4); font-size: 0.9em; padding: 2em 1em; text-align: center; }
.chat-empty-state ul { list-style: none; padding: 0; margin: 0.5em 0; }
.chat-empty-state li { padding: 0.15em 0; }
.pending-badge { background: var(--yellow); color: var(--bg); border-radius: 10px; padding: 1px 6px; font-size: 0.75em; margin-left: 0.3em; }
.summarize-btn { width: 100%; margin-top: 0.5em; }
.summary-block { margin-top: 0.5em; font-size: 0.85em; color: var(--fg2); white-space: pre-wrap; }
.activity-list { list-style: none; padding: 0; margin: 0; font-size: 0.85em; }
.activity-item { padding: 0.2em 0; color: var(--fg2); }
.activity-item.pending { color: var(--fg4); font-style: italic; }

/* ── Ultrawide (≥2200px) research show ─────────────────────────── */
@media (min-width: 2200px) {
  body.research-show-page {
    max-width: none;
    padding: 20px 60px;
  }
  body.research-show-page nav,
  body.research-show-page .research-layout {
    max-width: 2000px;
    margin-left: auto;
    margin-right: auto;
  }
  body.research-show-page .research-sidebar {
    width: 340px;
  }
}

/* ── Research new ───────────────────────────────────────────────── */
.research-new { max-width: 700px; margin: 0 auto; }
.research-new label { display: block; font-weight: bold; margin: 1.2em 0 0.3em; }
.panel { background: var(--bg1); border: 1px solid var(--border); border-radius: 6px; padding: 0.75em 1em; margin-bottom: 1em; }
.panel-heading { font-weight: bold; font-size: 0.9em; color: var(--fg4); text-transform: uppercase; margin-bottom: 0.5em; }
.bookmark-list { list-style: none; padding: 0; margin: 0; }
.bookmark-list li { display: flex; align-items: center; gap: 0.5em; padding: 0.35em 0; border-bottom: 1px solid var(--border); }
.bookmark-list li:last-child { border-bottom: none; }
.bm-title { flex: 1; font-size: 0.95em; }
.bm-tags { display: flex; gap: 3px; flex-wrap: wrap; }
.bm-tag { font-size: 0.75em; background: var(--bg2); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; color: var(--fg4); }
.bm-add-btn { font-size: 0.8em; padding: 2px 8px; background: none; border: 1px solid var(--border); border-radius: 3px; cursor: pointer; flex-shrink: 0; }
.bm-add-btn:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.bm-add-btn.added { color: var(--success); border-color: var(--success); cursor: default; }
.bm-remove-btn { font-size: 0.8em; padding: 2px 6px; background: none; border: 1px solid var(--border); border-radius: 3px; cursor: pointer; color: var(--fg4); flex-shrink: 0; }
.bm-remove-btn:hover { background: var(--delete-fg); color: var(--bg); border-color: var(--delete-fg); }
.search-row { display: flex; gap: 0.5em; margin-bottom: 1em; }
.search-row input[type=text] { flex: 1; }
.search-row select { font-size: 0.9em; }
.results-status { font-size: 0.85em; color: var(--fg4); margin-bottom: 0.4em; }
.persona-chips { display: flex; flex-wrap: wrap; gap: 0.5em; margin-top: 0.3em; }
.persona-chip-input { display: none; }
.persona-chip-label { padding: 5px 14px; border: 1px solid var(--border); border-radius: 20px; cursor: pointer; font-size: 0.9em; background: var(--bg1); color: var(--fg); transition: background 0.15s, border-color 0.15s; }
.persona-chip-label:hover { background: var(--bg2); border-color: var(--bg3); }
.persona-chip-input:checked + .persona-chip-label { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.persona-chip-label.added { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.submit-row { margin-top: 1.5em; }

/* ── Wiki show ──────────────────────────────────────────────────── */
.wiki-layout { display: flex; gap: 2em; align-items: flex-start; }
.wiki-content { flex: 1; min-width: 0; }
.wiki-sidebar { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; gap: 1em; }
.wiki-sidebar-section { background: var(--bg1); border: 1px solid var(--border); border-radius: 4px; padding: 0.75em; }
.wiki-sidebar-section h3 { margin: 0 0 0.5em; font-size: 0.8em; text-transform: uppercase; color: var(--fg4); }
.wiki-sidebar-section ul { list-style: none; padding: 0; margin: 0; font-size: 0.85em; }
.wiki-sidebar-section li { padding: 0.2em 0; }
.wiki-header { margin-bottom: 1em; }
.wiki-header h1 { margin: 0 0 0.25em; }
.wiki-header .meta { font-size: 0.85em; color: var(--fg4); }
.wiki-body { line-height: 1.7; }
.wiki-draft { background: var(--bg1); border: 1px solid var(--border); border-radius: 6px; padding: 2em; text-align: center; color: var(--fg4); }

/* ── Web Search panel ─────────────────────────────────────────────────────── */
.ws-input-row { display: flex; gap: 0.4em; }
.ws-input-row input { flex: 1; }
.ws-results-list { list-style: none; padding: 0; margin: 0.5em 0 0; }
.ws-result { padding: 0.5em 0; border-bottom: 1px solid var(--border); }
.ws-result:last-child { border-bottom: none; }
.ws-result-meta { display: flex; align-items: baseline; gap: 0.5em; flex-wrap: wrap; }
.ws-result-title { font-size: 0.9em; font-weight: 500; }
.ws-result-source { font-size: 0.75em; color: var(--fg4); }
.ws-result-snippet { font-size: 0.8em; color: var(--fg4); margin: 0.2em 0 0.4em; }
.ws-add-btn { font-size: 0.8em; padding: 2px 8px; }

/* ── Search results ──────────────────────────────────────────────────────── */
.search-result-card { background: var(--bg1); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; margin-top: 12px; }
.search-result-card .src-header { display: flex; justify-content: space-between; align-items: baseline; }
.search-result-card .src-title { font-weight: 600; font-size: 1em; color: var(--accent); text-decoration: none; }
.search-result-card .src-title:hover { text-decoration: underline; }
.search-result-card .src-distance { font-size: 0.75em; color: var(--fg4); font-family: monospace; }
.search-result-card .src-meta { margin-top: 4px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.search-result-card .src-snippet { margin-top: 8px; font-size: 0.85em; color: var(--fg4); line-height: 1.5;
                                   max-height: 4.5em; overflow: hidden; display: -webkit-box;
                                   -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.search-result-card .src-snippet code { background: var(--code-bg); padding: 1px 4px; border-radius: 2px; font-size: 0.9em; }

.chunk-badge { display: inline-block; font-size: 0.7em; padding: 1px 6px; border-radius: 3px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; }
.chunk-character { background: #e0e7ff; color: #3730a3; }
.chunk-proposition { background: #d1fae5; color: #065f46; }
.chunk-bookmark_note { background: #fef3c7; color: #92400e; }
.chunk-annotation { background: #fce7f3; color: #9d174d; }

.search-answer { background: #eef2ff; border: 1px solid #c7d2fe; margin-bottom: 24px; }
.search-answer a { color: var(--accent); }

/* ── Search selection bar ─────────────────────────────────────────── */
.selection-bar { position: fixed; bottom: 0; left: 0; right: 0;
                 background: var(--bg1); border-top: 2px solid var(--accent);
                 padding: 12px 24px; display: flex; align-items: center; gap: 16px;
                 box-shadow: 0 -4px 12px rgba(0,0,0,0.15); z-index: 100; }
.selection-count { font-size: 0.9em; color: var(--fg4); }
.src-check-label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.src-checkbox { margin-top: 3px; flex-shrink: 0; }
.src-card-body { flex: 1; min-width: 0; }

/* ── Tabs on /research/new ────────────────────────────────────────────────── */
.research-tabs { display: flex; gap: 0.5em; margin-bottom: 0.75em; }
.tab-btn { flex: 1; font-size: 0.85em; padding: 4px 8px; cursor: pointer;
           background: var(--bg1); border: 1px solid var(--border); border-radius: 3px; }
.tab-btn.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* ── Research: collapsible messages ─────────────────────────────────────────── */
.message.collapsed .message-content {
  max-height: 3.6em;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}
.message.collapsed .message-thinking { display: none; }
.msg-collapse-btn {
  background: none; border: none; cursor: pointer; font-size: 0.85em;
  color: var(--fg4); padding: 0 4px; transition: transform 0.2s;
  vertical-align: middle; line-height: 1;
}
.message.collapsed .msg-collapse-btn { transform: rotate(180deg); }
.bulk-collapse-btn {
  font-size: 0.75em; color: var(--fg4); background: none;
  border: 1px solid var(--border); border-radius: 3px;
  padding: 2px 6px; cursor: pointer; margin-left: 0.4em; vertical-align: middle;
}
.bulk-collapse-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── Research: per-message annotations ──────────────────────────────────────── */
.message-ann-details { margin-top: 0.4em; font-size: 0.85em; color: var(--fg4); border: none; }
.message-ann-details summary { cursor: pointer; user-select: none; }
.message-ann-details summary:hover { color: var(--fg); }
.msg-ann-card { border-left: 2px solid var(--accent); padding: 4px 8px; margin: 4px 0 4px 4px; }
.msg-ann-anchor { cursor: pointer; font-style: italic; color: var(--fg4); font-size: 0.9em; }
.msg-ann-anchor:hover { color: var(--accent); }
.msg-ann-note { margin-top: 2px; color: var(--fg); font-size: 0.9em; }
.msg-ann-actions { margin-top: 4px; display: flex; gap: 6px; }
.msg-ann-actions button { font-size: 0.8em; background: none; border: 1px solid var(--border);
                           border-radius: 3px; padding: 1px 6px; cursor: pointer; color: var(--fg4); }
.msg-ann-actions button:hover { color: var(--fg); border-color: var(--fg4); }
.msg-ann-edit-form { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.msg-ann-edit-form textarea, .msg-ann-edit-form input[type="text"] {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 0.85em;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 3px;
  color: var(--fg); padding: 4px 6px;
}
.msg-ann-edit-actions { display: flex; gap: 6px; }
.msg-ann-edit-actions button { font-size: 0.8em; border-radius: 3px; padding: 2px 8px; cursor: pointer; }