/* ─── Inbox: two-pane shell ─────────────────────────────────────── */
.lc-inbox {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 0;
    /* 100vh overflows past the viewport because Filament's topbar (~4rem)
       sits above us — the thread's scroll then bottoms out into hidden
       space. Use dvh for mobile and subtract the chrome we know about. */
    height: calc(100dvh - 4rem);
    background: rgb(255 255 255);
    border: 0;
    overflow: hidden;
}
.dark .lc-inbox {
    background: rgb(24 24 27);
    border-top-color: rgb(255 255 255 / 0.05);
}

.lc-inbox-sidebar {
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgb(0 0 0 / 0.05);
    background: rgb(250 250 250);
    min-width: 0;
    min-height: 0;
}
.dark .lc-inbox-sidebar {
    border-right-color: rgb(255 255 255 / 0.05);
    background: rgb(20 20 23);
}

.lc-inbox-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

/* ─── Sidebar: search ───────────────────────────────────────────── */
.lc-inbox-search {
    padding: 8px;
    border-bottom: 1px solid rgb(0 0 0 / 0.05);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dark .lc-inbox-search { border-bottom-color: rgb(255 255 255 / 0.05); }

.lc-inbox-search-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid rgb(0 0 0 / 0.1);
    border-radius: 0.375rem;
    background: rgb(255 255 255);
    font-size: 12px;
    outline: none;
    transition: border-color 0.15s;
}
.lc-inbox-search-input:focus {
    border-color: rgb(59 130 246);
    box-shadow: 0 0 0 1px rgb(59 130 246 / 0.2);
}
.dark .lc-inbox-search-input {
    background: rgb(39 39 42);
    border-color: rgb(255 255 255 / 0.1);
    color: rgb(244 244 245);
}

/* ─── Sidebar: list ─────────────────────────────────────────────── */
.lc-inbox-list { overflow-y: auto; flex: 1; }

.lc-inbox-row {
    width: 100%;
    padding: 10px 12px;
    text-align: left;
    border: none;
    border-bottom: 1px solid rgb(0 0 0 / 0.04);
    border-left: 2px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: background 0.1s;
    display: block;
}
.lc-inbox-row:hover { background: rgb(0 0 0 / 0.025); }
.lc-inbox-row-active,
.lc-inbox-row-active:hover {
    background: rgb(59 130 246 / 0.08);
    border-left-color: rgb(59 130 246);
}
.dark .lc-inbox-row { border-bottom-color: rgb(255 255 255 / 0.04); }
.dark .lc-inbox-row:hover { background: rgb(255 255 255 / 0.03); }
.dark .lc-inbox-row-active,
.dark .lc-inbox-row-active:hover {
    background: rgb(59 130 246 / 0.15);
    border-left-color: rgb(96 165 250);
}

.lc-inbox-row-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}
.lc-inbox-row-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 600;
    color: rgb(107 114 128);
}
.dark .lc-inbox-row-id { color: rgb(156 163 175); }
.lc-inbox-row-time {
    font-size: 10px;
    color: rgb(156 163 175);
}
.lc-inbox-row-preview {
    font-size: 12px;
    color: rgb(55 65 81);
    line-height: 1.35;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dark .lc-inbox-row-preview { color: rgb(209 213 219); }
.lc-inbox-row-meta { display: flex; gap: 4px; flex-wrap: wrap; }

/* ─── Badges ────────────────────────────────────────────────────── */
.lc-inbox-badge {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 500;
    line-height: 1.5;
}
.lc-inbox-badge-gray { background: rgb(243 244 246); color: rgb(107 114 128); }
.lc-inbox-badge-red  { background: rgb(254 226 226); color: rgb(185 28 28); }
.lc-inbox-badge-blue { background: rgb(219 234 254); color: rgb(29 78 216); }
.dark .lc-inbox-badge-gray { background: rgb(39 39 42); color: rgb(209 213 219); }
.dark .lc-inbox-badge-red  { background: rgb(220 38 38 / 0.2); color: rgb(252 165 165); }
.dark .lc-inbox-badge-blue { background: rgb(59 130 246 / 0.2); color: rgb(147 197 253); }

.lc-inbox-empty {
    padding: 24px 12px;
    text-align: center;
    color: rgb(156 163 175);
    font-size: 12px;
}

/* ─── Main: header bar ──────────────────────────────────────────── */
.lc-inbox-header {
    padding: 8px 14px;
    border-bottom: 1px solid rgb(0 0 0 / 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgb(250 250 250);
    flex-shrink: 0;
}
.dark .lc-inbox-header {
    background: rgb(20 20 23);
    border-bottom-color: rgb(255 255 255 / 0.05);
}
.lc-inbox-header-meta {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 11px;
    color: rgb(107 114 128);
    flex-wrap: wrap;
}
.dark .lc-inbox-header-meta { color: rgb(156 163 175); }
.lc-inbox-header-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 600;
    color: rgb(17 24 39);
}
.dark .lc-inbox-header-id { color: rgb(244 244 245); }
.lc-inbox-header-sep { opacity: 0.5; }

.lc-inbox-clear {
    background: transparent;
    border: none;
    width: 22px;
    height: 22px;
    border-radius: 0.25rem;
    font-size: 18px;
    line-height: 1;
    color: rgb(156 163 175);
    cursor: pointer;
    transition: all 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lc-inbox-clear:hover {
    background: rgb(0 0 0 / 0.06);
    color: rgb(17 24 39);
}
.dark .lc-inbox-clear:hover {
    background: rgb(255 255 255 / 0.06);
    color: rgb(244 244 245);
}

/* ─── Thread ────────────────────────────────────────────────────── */
.lc-inbox-thread {
    overflow-y: auto;
    flex: 1;
    /* Generous bottom padding: the expandable context bubble at the end
       of each AI message needs breathing room so the last one is fully
       reachable when scrolled. */
    padding: 14px 18px 48px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* When an expanded context bubble grows, give the browser a hint to
       keep the user's scroll position stable instead of jumping. */
    overflow-anchor: auto;
}

.lc-msg-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lc-bubble-row { display: flex; }
.lc-bubble-row-visitor { justify-content: flex-end; }
.lc-bubble-row-ai   { justify-content: flex-start; }

.lc-bubble {
    max-width: 68%;
    padding: 7px 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.45;
    word-wrap: break-word;
}
.lc-bubble-visitor {
    /* Slate-700 in light, slate-800 in dark — deep enough that the diff
       colors have real luminance contrast against it. The previous
       slate-600 left red/green text sitting in the same brightness band
       as the background, which read as "muddy" to the eye. */
    background: rgb(51 65 85);
    color: #fff;
    border-bottom-right-radius: 3px;
}
.dark .lc-bubble-visitor { background: rgb(30 41 59); }
.lc-bubble-ai {
    background: rgb(243 244 246);
    color: rgb(17 24 39);
    border-bottom-left-radius: 3px;
}
.lc-bubble-error {
    background: rgb(254 242 242);
    color: rgb(127 29 29);
}
.dark .lc-bubble-ai {
    background: rgb(39 39 42);
    color: rgb(228 228 231);
}
.dark .lc-bubble-error {
    background: rgb(220 38 38 / 0.15);
    color: rgb(252 165 165);
}

.lc-bubble-clickable { cursor: pointer; transition: filter 0.1s; }
.lc-bubble-clickable:hover { filter: brightness(1.04); }
.lc-bubble-visitor.lc-bubble-clickable:hover { filter: brightness(1.08); }

.lc-bubble-content { white-space: pre-wrap; }
/* Rewrite diff inside the slate visitor bubble — re-tuned for proper
   contrast hierarchy. Body text is white; the diff itself carries one
   indicator per word (color OR strike, not both), and labels stay muted
   gray so they don't compete with the diff. */
.lc-bubble-visitor .wf-rewrite-diff {
    margin: 0;
    padding: 4px 0 0 10px;
    background: transparent;
    border-left: 2px solid rgb(255 255 255 / 0.2);
    color: #fff;
    font-size: 12px;
}
/* Labels: muted gray, no colored tint — the diff itself signals which
   line is original vs rewritten via the word colors below. */
.lc-bubble-visitor .wf-rewrite-label,
.lc-bubble-visitor .wf-rewrite-label-after {
    color: rgb(255 255 255 / 0.45);
    font-weight: 600;
}
.lc-bubble-visitor .wf-rewrite-text { color: rgb(255 255 255 / 0.95); }
/* Removed: the word stays readable; a thin red strike marks it as
   canceled. Thickness and opacity tuned so the original Georgian
   stays legible — the line is a hint, not a redaction. */
.lc-bubble-visitor .wf-rw-removed {
    background: transparent;
    color: rgb(255 255 255 / 0.75);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: rgb(252 165 165 / 0.7);   /* red-300, 70% — soft */
    font-weight: 400;
    padding: 0;
    border-radius: 0;
}
/* Added: green text, no underline, no background. The color alone
   makes additions pop against the white body text. */
.lc-bubble-visitor .wf-rw-added {
    background: transparent;
    color: rgb(134 239 172);                      /* green-300 */
    text-decoration: none;
    font-weight: 500;
    padding: 0;
    border-radius: 0;
}
/* Duration chip in the bubble meta line — color tracks RAG latency budget
   (green < 10s, yellow 10–20s, red > 20s). Pill keeps the color readable
   against both the gray AI bubble and the slate user bubble (the user
   bubble has lower opacity meta text, so we override it below). */
.lc-bubble-dur {
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 8px;
    opacity: 1;
}
.lc-dur-good { background: rgb(34 197 94 / 0.18); color: rgb(21 128 61); }
.lc-dur-warn { background: rgb(234 179 8 / 0.22);  color: rgb(161 98 7); }
.lc-dur-bad  { background: rgb(239 68 68 / 0.18); color: rgb(185 28 28); }
.dark .lc-dur-good { background: rgb(34 197 94 / 0.22); color: rgb(134 239 172); }
.dark .lc-dur-warn { background: rgb(234 179 8 / 0.25); color: rgb(253 224 71); }
.dark .lc-dur-bad  { background: rgb(239 68 68 / 0.22); color: rgb(252 165 165); }

/* Grounding / hallucination-risk badge — shares the duration-pill shape but
   uses semantic confidence colors (grounded / partial / weak). The tooltip
   reveals coverage %, Jaccard %, and matched-word count. */
.lc-bubble-ground {
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 8px;
    opacity: 1;
    white-space: nowrap;
}
.lc-ground-grounded { background: rgb(34 197 94 / 0.18); color: rgb(21 128 61); }
.lc-ground-partial  { background: rgb(234 179 8 / 0.22); color: rgb(161 98 7); }
.lc-ground-weak     { background: rgb(239 68 68 / 0.22); color: rgb(185 28 28); }
/* Retrieval miss — orange, distinct from hallucination red to signal
   "not the model's fault; the retriever didn't surface relevant chunks". */
.lc-ground-miss     { background: rgb(249 115 22 / 0.20); color: rgb(154 52 18); }
/* Refusal acknowledged correctly — neutral blue/gray; not an error. */
.lc-ground-refused  { background: rgb(100 116 139 / 0.18); color: rgb(51 65 85); }
.dark .lc-ground-grounded { background: rgb(34 197 94 / 0.22); color: rgb(134 239 172); }
.dark .lc-ground-partial  { background: rgb(234 179 8 / 0.25); color: rgb(253 224 71); }
.dark .lc-ground-weak     { background: rgb(239 68 68 / 0.25); color: rgb(252 165 165); }
.dark .lc-ground-miss     { background: rgb(249 115 22 / 0.25); color: rgb(254 215 170); }
.dark .lc-ground-refused  { background: rgb(100 116 139 / 0.30); color: rgb(203 213 225); }

/* Per-chunk overlap chip — small percentage with cursor:help so it's clear
   the value is hoverable for the "which answer words matched" explanation. */
.lc-chunk-pct {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 8px;
    white-space: nowrap;
}

/* ─── Custom tooltip ────────────────────────────────────────────────
   Hosts carry a hidden payload <span>; JS clones it into a positioned
   popover on hover. Native title="" can't render newlines and has a
   long delay, so we build our own. */
.lc-tooltip-host { cursor: help; position: relative; }
.lc-tooltip-payload { display: none; }   /* never rendered inline */

.lc-tooltip-popover {
    position: absolute;
    z-index: 10000;
    max-width: 380px;
    min-width: 220px;
    padding: 10px 12px;
    background: rgb(17 24 39);          /* slate-900 — works in both modes */
    color: rgb(243 244 246);
    border: 1px solid rgb(255 255 255 / 0.08);
    border-radius: 6px;
    box-shadow: 0 12px 36px rgb(0 0 0 / 0.35);
    font-size: 11px;
    line-height: 1.55;
    pointer-events: none;               /* never blocks click on the host */
    animation: lc-tip-in 0.12s ease-out;
    text-align: left;
}
@keyframes lc-tip-in {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}
.lc-tooltip-popover strong {
    display: block;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
}
.lc-tooltip-popover p {
    margin: 0 0 6px;
    color: rgb(229 231 235);
}
.lc-tooltip-popover code {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 10px;
    background: rgb(255 255 255 / 0.08);
    padding: 0 4px;
    border-radius: 3px;
    color: rgb(196 181 253);            /* violet-300 */
}

.lc-tooltip-popover .lc-tip-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    margin: 6px 0 0;
    padding-top: 6px;
    border-top: 1px solid rgb(255 255 255 / 0.08);
}
.lc-tooltip-popover .lc-tip-label {
    color: rgb(156 163 175);            /* gray-400 */
    font-weight: 500;
    white-space: nowrap;
}
.lc-tooltip-popover .lc-tip-evidence {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgb(255 255 255 / 0.08);
}
.lc-tooltip-popover .lc-tip-word {
    display: inline-block;
    padding: 1px 5px;
    margin: 2px 3px 0 0;
    background: rgb(34 197 94 / 0.18);
    color: rgb(187 247 208);
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 10px;
}
.lc-tooltip-popover .lc-tip-word-more {
    color: rgb(156 163 175);
    font-style: italic;
    font-size: 10px;
}
.lc-tooltip-popover .lc-tip-note {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgb(255 255 255 / 0.08);
    color: rgb(156 163 175);
    font-size: 10px;
    font-style: italic;
}
.lc-tooltip-popover .lc-tip-note em { font-style: italic; color: rgb(196 181 253); }

/* ─── Markdown rendering inside chunk bodies ────────────────────────
   Scoped to .lc-md so the styling can't leak into other blade output.
   Compact spacing because chunks live in a constrained card. */
.lc-md > :first-child { margin-top: 0; }
.lc-md > :last-child  { margin-bottom: 0; }

.lc-md p {
    margin: 0 0 6px;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.lc-md p:last-child { margin-bottom: 0; }

.lc-md-h {
    margin: 8px 0 4px;
    font-weight: 600;
    line-height: 1.35;
}
h1.lc-md-h { font-size: 14px; }
h2.lc-md-h { font-size: 13px; }
h3.lc-md-h { font-size: 12px; color: rgb(75 85 99); }
.dark h3.lc-md-h { color: rgb(156 163 175); }

.lc-md-ul,
.lc-md-ol {
    margin: 4px 0 6px;
    padding-left: 18px;
}
.lc-md-ul { list-style: disc; }
.lc-md-ol { list-style: decimal; }
.lc-md-ul li,
.lc-md-ol li {
    margin: 1px 0;
    line-height: 1.5;
}

.lc-md strong { font-weight: 600; }
.lc-md em     { font-style: italic; }

.lc-md-code {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 11px;
    background: rgb(0 0 0 / 0.06);
    padding: 0 4px;
    border-radius: 3px;
}
.dark .lc-md-code { background: rgb(255 255 255 / 0.08); }

.lc-md-pre {
    margin: 6px 0;
    padding: 8px 10px;
    background: rgb(0 0 0 / 0.05);
    border-radius: 4px;
    overflow-x: auto;
    font-size: 11px;
    line-height: 1.5;
}
.lc-md-pre code {
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-family: ui-monospace, SFMono-Regular, monospace;
    white-space: pre;
}
.dark .lc-md-pre { background: rgb(255 255 255 / 0.05); }

.lc-md a {
    color: rgb(37 99 235);   /* blue-600 */
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.lc-md a:hover { color: rgb(29 78 216); }
.dark .lc-md a { color: rgb(96 165 250); }
.dark .lc-md a:hover { color: rgb(147 197 253); }

/* Novel-keywords strip inside the context bubble — the answer words that
   appear in *no* chunk. These are the candidate hallucinations. */
.lc-context-novel {
    padding: 6px 12px;
    border-top: 1px solid rgb(0 0 0 / 0.05);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    font-size: 11px;
    background: rgb(239 68 68 / 0.05);
}
.dark .lc-context-novel {
    border-top-color: rgb(255 255 255 / 0.05);
    background: rgb(239 68 68 / 0.08);
}
.lc-context-novel-label {
    color: rgb(185 28 28);
    font-weight: 600;
    margin-right: 4px;
}
.dark .lc-context-novel-label { color: rgb(252 165 165); }
.lc-context-novel-word {
    background: rgb(239 68 68 / 0.15);
    color: rgb(127 29 29);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 11px;
}
.dark .lc-context-novel-word {
    background: rgb(239 68 68 / 0.22);
    color: rgb(254 202 202);
}

.lc-bubble-meta {
    margin-top: 4px;
    font-size: 10px;
    /* Use a translucent text color (not opacity on the wrapper) so child
       chips like .lc-bubble-dur can render at full contrast. */
    color: rgb(75 85 99 / 0.75);
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
}
.dark .lc-bubble-meta { color: rgb(156 163 175 / 0.85); }
.lc-bubble-visitor .lc-bubble-meta { color: rgb(255 255 255 / 0.75); }
.lc-bubble-view-hint { margin-left: auto; opacity: 0; transition: opacity 0.1s; }
.lc-bubble-clickable:hover .lc-bubble-view-hint { opacity: 0.85; }

/* Copy-debug button — small inline action in the AI bubble meta line.
   Stops propagation so it doesn't open the trace modal underneath. */
.lc-bubble-copy-debug {
    font: inherit;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgb(99 102 241 / 0.12);
    color: rgb(67 56 202);
    border: 0;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}
.lc-bubble-copy-debug:hover { background: rgb(99 102 241 / 0.22); }
.lc-bubble-copy-debug-ok { background: rgb(34 197 94 / 0.22); color: rgb(21 128 61); }
.dark .lc-bubble-copy-debug { background: rgb(99 102 241 / 0.22); color: rgb(199 210 254); }
.dark .lc-bubble-copy-debug:hover { background: rgb(99 102 241 / 0.32); }
.dark .lc-bubble-copy-debug-ok { background: rgb(34 197 94 / 0.30); color: rgb(134 239 172); }

/* ─── Context-chunks bubble (under the AI answer) ────────────────── */
.lc-bubble-context {
    background: rgb(249 250 251);
    border: 1px solid rgb(0 0 0 / 0.06);
    color: rgb(31 41 55);
    border-bottom-left-radius: 3px;
    max-width: 100%;
    width: 100%;
    padding: 0;
    overflow: hidden;
}
.dark .lc-bubble-context {
    background: rgb(30 30 33);
    border-color: rgb(255 255 255 / 0.06);
    color: rgb(228 228 231);
}
.lc-context-summary {
    list-style: none;
    cursor: pointer;
    padding: 7px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    user-select: none;
}
.lc-context-summary::-webkit-details-marker { display: none; }
.lc-context-summary::before {
    content: '▸';
    font-size: 10px;
    opacity: 0.5;
    transition: transform 0.15s;
}
.lc-bubble-context[open] .lc-context-summary::before { transform: rotate(90deg); }
.lc-context-title { font-weight: 600; }
.lc-context-count {
    font-size: 11px;
    background: rgb(0 0 0 / 0.06);
    padding: 1px 6px;
    border-radius: 10px;
}
.dark .lc-context-count { background: rgb(255 255 255 / 0.08); }
.lc-context-hint { margin-left: auto; font-size: 10px; opacity: 0.5; }

.lc-context-search {
    padding: 6px 10px 8px;
    display: flex;
    gap: 8px;
    align-items: center;
    border-top: 1px solid rgb(0 0 0 / 0.05);
}
.dark .lc-context-search { border-top-color: rgb(255 255 255 / 0.05); }
.lc-context-search-input {
    flex: 1;
    padding: 5px 9px;
    border: 1px solid rgb(0 0 0 / 0.1);
    border-radius: 0.375rem;
    background: rgb(255 255 255);
    font-size: 12px;
    outline: none;
}
.lc-context-search-input:focus {
    border-color: rgb(59 130 246);
    box-shadow: 0 0 0 1px rgb(59 130 246 / 0.2);
}
.dark .lc-context-search-input {
    background: rgb(20 20 23);
    border-color: rgb(255 255 255 / 0.1);
    color: rgb(228 228 231);
}
.lc-context-match-count { font-size: 10px; opacity: 0.6; white-space: nowrap; }
.lc-context-match-none { color: rgb(239 68 68); opacity: 0.9; }

.lc-context-list {
    list-style: none;
    margin: 0;
    padding: 0 0 6px;
    max-height: 360px;
    overflow-y: auto;
}
.lc-context-chunk {
    padding: 6px 12px;
    border-top: 1px solid rgb(0 0 0 / 0.04);
    font-size: 12px;
    line-height: 1.5;
}
.dark .lc-context-chunk { border-top-color: rgb(255 255 255 / 0.04); }
.lc-context-chunk-head {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 3px;
}
.lc-context-idx {
    font-size: 10px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    opacity: 0.55;
}
.lc-context-chunk-title {
    font-weight: 600;
    font-size: 12px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lc-context-pid {
    font-size: 10px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    opacity: 0.45;
    cursor: help;
}
.lc-context-chunk-body {
    /* When rendered as markdown (.lc-md), block elements like <ul>/<p>
       provide their own spacing — we only need word-wrap / font-size /
       opacity here. Whitespace handling moved into the per-paragraph
       rules so lists don't pick up stray blank-line indenting. */
    word-wrap: break-word;
    font-size: 12px;
    opacity: 0.9;
    padding: 2px 0 0 0;
}
mark.lc-ctx-hl {
    background: rgb(254 240 138);
    color: rgb(120 53 15);
    padding: 0 1px;
    border-radius: 2px;
    font-weight: 600;
}
.dark mark.lc-ctx-hl { background: rgb(250 204 21 / 0.5); color: rgb(254 243 199); }

.lc-inbox-empty-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(156 163 175);
    font-size: 13px;
}

/* ─── Search highlight ──────────────────────────────────────────── */
.lc-hl {
    background: rgb(254 240 138);
    color: rgb(120 53 15);
    padding: 0 2px;
    border-radius: 2px;
    font-weight: 600;
}
.dark .lc-hl {
    background: rgb(250 204 21 / 0.35);
    color: rgb(254 240 138);
}

/* Subtle ring on matching message groups in the open thread. */
.lc-msg-group-match .lc-bubble {
    box-shadow: 0 0 0 1px rgb(250 204 21 / 0.6);
}

/* ─── Responsive ────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .lc-inbox {
        grid-template-columns: 1fr;
        height: auto;
    }
    .lc-inbox-sidebar { max-height: 40vh; border-right: none; border-bottom: 1px solid rgb(0 0 0 / 0.05); }
    .lc-bubble { max-width: 88%; }
}