/* Telli design tokens (lifted from the Telli reuse map: Lato, primary #80C936). */
.telli-panel {
    --telli-primary: #80C936;
    --telli-primary-rgb: 128, 201, 54;
    --telli-primary-dark: #6aa62c;
    --telli-primary-subtle: #f4faec;
    --telli-primary-light: #e6f4d5;
    --telli-ink: #1f2430;
    --telli-muted: #6b7280;
    --telli-faint: #9aa1ab;
    --telli-surface: #ffffff;
    --telli-surface-alt: #f6f8f4;
    --telli-border: #e3e7de;
    --telli-border-light: #edf0e9;
    --telli-danger: #b4451f;

    font-family: 'Lato', 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--telli-ink);
    background: var(--telli-surface);
    border: 1px solid var(--telli-border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* ── Header: avatar + title + "Analyzing: {report}" over the mockup gradient ─────────────────── */
.telli-panel__header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--telli-border-light);
    background: linear-gradient(135deg, rgba(var(--telli-primary-rgb), 0.10), rgba(var(--telli-primary-rgb), 0));
}

.telli-panel__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--telli-primary-light);
    border: 1px solid rgba(var(--telli-primary-rgb), 0.45);
    flex: 0 0 auto;
}

.telli-panel__id { min-width: 0; }

.telli-panel__title {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.2;
}

.telli-panel__subtitle {
    font-size: 0.7rem;
    color: var(--telli-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.telli-panel__expand {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-left: auto;
    /* Issue #91: the host's CollapsiblePanel renders its own "»" hide button absolutely positioned at
       top:10px/right:10px (24x24, z-index 5) over this panel — see rv-collapsible__hide in viewer.css.
       Without a reserve, this button's flex-end position (16px header padding) lands directly under it.
       Ownership is inverted via a custom property the HOST sets next to its own hide-button geometry
       (--telli-header-inline-end-reserve on .rv-collapsible in viewer.css) rather than a fixed rem value
       here: a rem reserve clears a PX target (the hide button's fixed 24x24/10px inset), so at a shrunk
       root font size the two controls' hit areas would overlap and the higher z-index hide button would
       steal the click. Defaulting to 0 also keeps this host-agnostic RCL clean for any OTHER host that
       embeds it and has no such button to dodge. NOTE: the report-viewer-ui host also hides this class
       below 768px as a belt-and-braces rule (viewer.css, @media max-width:767.98px) — that rule depends on
       this class name and on telli.css loading before viewer.css; if this class is ever renamed, update
       that rule too. */
    margin-right: var(--telli-header-inline-end-reserve, 0);
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--telli-muted);
    cursor: pointer;
}

.telli-panel__expand:hover {
    background: rgba(var(--telli-primary-rgb), 0.12);
    border-color: rgba(var(--telli-primary-rgb), 0.45);
    color: var(--telli-primary-dark);
}

/* ── Ask / Analyze mode cards (mockup .telli-modes/.mode) ─────────────────────────────────────── */
.telli-panel__modes {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 0.9rem 0.25rem;
}

.telli-mode {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.6rem;
    border: 1px solid var(--telli-border);
    border-radius: 10px;
    background: var(--telli-surface);
    font: inherit;
    cursor: pointer;
}

.telli-mode:hover:not(:disabled) { border-color: var(--telli-primary); }
.telli-mode:disabled { opacity: 0.6; cursor: not-allowed; }

.telli-mode--on {
    border-color: var(--telli-primary);
    background: var(--telli-primary-subtle);
}

.telli-mode__m {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--telli-ink);
}

.telli-mode--on .telli-mode__m { color: var(--telli-primary-dark); }

.telli-mode__d {
    font-size: 0.68rem;
    color: var(--telli-faint);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.telli-mode__d--running { color: var(--telli-primary-dark); font-weight: 700; }

.telli-spinner {
    width: 0.7rem;
    height: 0.7rem;
    border: 2px solid rgba(var(--telli-primary-rgb), 0.3);
    border-top-color: var(--telli-primary-dark);
    border-radius: 50%;
    animation: telli-spin 0.8s linear infinite;
}

@keyframes telli-spin {
    to { transform: rotate(360deg); }
}

/* ── Transcript (mockup .telli-scroll) ────────────────────────────────────────────────────────── */
.telli-panel__transcript {
    /* Issue #165: the docked panel's left/right gutter was reclaimed for readable width; vertical
       rhythm (top/bottom) is unchanged. 0.5rem rather than the 0.25rem first tried — with the sided
       layout the user's bubble is pushed to the right edge, and at 4px its accent border sat flush
       against the panel border and read as clipped. 8px still leaves 372px of readable width against
       the 311px the original avatar-gutter layout allowed. */
    padding: 0.9rem 0.5rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 6rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    line-height: 1.55;
}

/* Terminal-outcome cards render inside the transcript flow — drop the old detached-block margins. */
.telli-panel__transcript .telli-card { margin: 0; }

/* ── Message bubbles (mockup .msg) ────────────────────────────────────────────────────────────── */
.telli-msg {
    display: flex;
    gap: 0.55rem;
    max-width: 100%;
}

.telli-msg__b {
    padding: 0.6rem 0.8rem;
    border-radius: 12px;
    font-size: 0.85rem;
    min-width: 0;
    overflow-wrap: break-word;
}

.telli-msg--user { justify-content: flex-end; }

.telli-msg--user .telli-msg__b {
    background: var(--telli-primary);
    color: #ffffff;
    border-bottom-right-radius: 4px;
    max-width: 80%;
    white-space: pre-wrap;
}

.telli-msg--ai .telli-msg__b {
    background: var(--telli-surface-alt);
    border: 1px solid var(--telli-border-light);
    border-bottom-left-radius: 4px;
}

/* Analyze turns: the analysis-card bubble variant (T5) — a full-width card with the ✨ header,
   uppercase section headers driven by the narrative's markdown ## headers, and citation chips. */
.telli-msg--analysis .telli-msg__b {
    background: var(--telli-primary-subtle);
    border: 1px solid rgba(var(--telli-primary-rgb), 0.4);
    border-left: 3px solid var(--telli-primary);
    flex: 1 1 auto;
}

.telli-analysis__head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--telli-primary-dark);
    padding-bottom: 0.4rem;
    margin-bottom: 0.55rem;
    border-bottom: 1px solid rgba(var(--telli-primary-rgb), 0.35);
}

/* Section headers inside the analysis card (## Executive summary / Notable movements / Anomalies). */
.telli-msg--analysis .telli-msg__b h2,
.telli-msg--analysis .telli-msg__b h3 {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--telli-muted);
    margin: 0.8rem 0 0.3rem;
}

.telli-msg--analysis .telli-msg__b h2:first-of-type,
.telli-msg--analysis .telli-msg__b h3:first-of-type {
    margin-top: 0;
}

/* Citation chips: backtick-wrapped cited figures in the narrative render as the mockup's .cite chip. */
.telli-msg--analysis .telli-msg__b code {
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--telli-primary-dark);
    background: var(--telli-primary-light);
    border-radius: 4px;
    padding: 0.05rem 0.3rem;
    margin: 0 1px;
}

.telli-msg__av {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--telli-primary-light);
    border: 1px solid rgba(var(--telli-primary-rgb), 0.45);
    flex: 0 0 auto;
}

/* Markdown content inside assistant bubbles (the lifted MarkdownHelper: emphasis/lists/tables/code). */
.telli-msg__b p { margin: 0 0 0.5rem; }
.telli-msg__b p:last-child { margin-bottom: 0; }
.telli-msg__b ul, .telli-msg__b ol { margin: 0.45rem 0 0.15rem 1.1rem; padding: 0; }
.telli-msg__b li { margin-bottom: 0.25rem; }

/* Markdown lists inside the lifted bubbles. The rule above targets the panel's own .telli-msg__b,
   which the lifted SessionChatMessageBubble/StreamingMessageBubble never render — they emit
   .message-text, and the lifted app.css has no list rules at all. Combined with the viewer's
   `* { margin: 0; padding: 0 }` reset that leaves markers sitting on the bubble's accent border.
   Same vertical spacing as .telli-msg__b, but the indent is left *padding* so the marker renders
   inside the content box, clear of the 3px border. Scoped to .telli-msg-host (the panel's own
   wrapper) so no other TelliReport surface is touched. */
.telli-msg-host .message-text ul,
.telli-msg-host .message-text ol {
    margin: 0.45rem 0 0.15rem;
    padding-left: 1.35rem;
}

.telli-msg-host .message-text ul { list-style: disc outside; }
.telli-msg-host .message-text ol { list-style: decimal outside; }

/* Nested levels indent further instead of collapsing onto the parent's marker column. */
.telli-msg-host .message-text ul ul,
.telli-msg-host .message-text ul ol,
.telli-msg-host .message-text ol ul,
.telli-msg-host .message-text ol ol {
    margin: 0.2rem 0 0;
    padding-left: 1.1rem;
}

.telli-msg-host .message-text li { margin-bottom: 0.25rem; }
.telli-msg-host .message-text li:last-child { margin-bottom: 0; }

.telli-msg__b code {
    font-family: Consolas, 'Cascadia Mono', monospace;
    font-size: 0.8em;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    padding: 0.05rem 0.3rem;
}
.telli-msg__b pre {
    overflow-x: auto;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    padding: 0.5rem 0.65rem;
    margin: 0.45rem 0;
}
.telli-msg__b pre code { background: none; padding: 0; }
.telli-msg__b table { border-collapse: collapse; margin: 0.45rem 0; font-size: 0.8rem; }
.telli-msg__b th, .telli-msg__b td { border: 1px solid var(--telli-border); padding: 0.25rem 0.5rem; text-align: left; }
.telli-msg__b th { background: var(--telli-surface-alt); font-weight: 700; }

/* Citation chips (mockup .cite) for grounded figures inside assistant/analysis content. */
.telli-msg__b .cite {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--telli-primary-dark);
    background: var(--telli-primary-light);
    border-radius: 4px;
    padding: 0.05rem 0.3rem;
    margin: 0 1px;
}

/* Blinking cursor on the in-flight streaming bubble. */
.telli-msg__cursor::after {
    content: '▌';
    color: var(--telli-primary);
    animation: telli-blink 1s steps(2, start) infinite;
}

@keyframes telli-blink {
    to { visibility: hidden; }
}

/* ── Thinking indicator (three-dot pulse + rotating word, lifted from TelliReport) ────────────── */
.telli-thinking .telli-msg__b {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.telli-thinking__dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.telli-thinking__dots span {
    width: 7px;
    height: 7px;
    background: var(--telli-primary);
    border-radius: 50%;
    animation: telli-pulse 1.4s infinite;
}

.telli-thinking__dots span:nth-child(2) { animation-delay: 0.2s; }
.telli-thinking__dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes telli-pulse {
    0%, 100% { opacity: 0.35; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1); }
}

.telli-thinking__word {
    font-style: italic;
    font-size: 0.8rem;
    color: var(--telli-muted);
}

/* ── Suggestion chips (mockup .suggest/.chip) ─────────────────────────────────────────────────── */
.telli-suggest {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.telli-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--telli-border);
    border-radius: 999px;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--telli-muted);
    background: var(--telli-surface);
    cursor: pointer;
}

.telli-chip:hover {
    border-color: var(--telli-primary);
    color: var(--telli-primary-dark);
    background: var(--telli-primary-subtle);
}

/* ── Footer: input-wrap + upsell strip + scope note (mockup .telli-input) ─────────────────────── */
.telli-panel__footer {
    border-top: 1px solid var(--telli-border-light);
    padding: 0.75rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: var(--telli-surface);
}

.telli-askbox { display: block; }

.telli-inputwrap {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    border: 1px solid var(--telli-border);
    border-radius: 12px;
    padding: 0.5rem 0.6rem;
    background: var(--telli-surface);
}

.telli-inputwrap:focus-within {
    border-color: var(--telli-primary);
    box-shadow: 0 0 0 3px rgba(var(--telli-primary-rgb), 0.2);
}

.telli-askbox__input {
    flex: 1 1 auto;
    resize: none;
    border: none;
    outline: none;
    padding: 0.15rem 0.1rem;
    font: inherit;
    font-size: 0.85rem;
    min-height: 1.5rem;
    background: transparent;
    color: var(--telli-ink);
}

.telli-send {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: var(--telli-primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
}

.telli-send:hover:not(:disabled) { background: var(--telli-primary-dark); }
.telli-send:disabled { opacity: 0.5; cursor: not-allowed; }

.telli-send__icon {
    width: 16px;
    height: 16px;
}

.telli-upsell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    border: 1px dashed var(--telli-primary);
    border-radius: 10px;
    background: var(--telli-primary-subtle);
}

.telli-upsell__u {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--telli-primary-dark);
}

.telli-upsell__cta { font-size: 0.75rem; font-weight: 700; }

/* Issue #165 added the "AI can make mistakes" caveat to this line. --telli-faint (#9aa1ab) is 2.35:1
   on white — below WCAG 1.4.3 AA — and an accuracy disclosure nobody can read is not a disclosure.
   --telli-muted (#6b7280) is 4.83:1 and passes at this size without changing the layout. */
.telli-scope-note {
    font-size: 0.68rem;
    color: var(--telli-muted);
    text-align: center;
}

/* ── Focus visibility (NFR-USE-003) ───────────────────────────────────────────────────────────── */
.telli-btn:focus-visible,
.telli-mode:focus-visible,
.telli-chip:focus-visible,
.telli-send:focus-visible,
.telli-panel__transcript:focus-visible,
.telli-panel__expand:focus-visible {
    outline: 2px solid var(--telli-primary-dark);
    outline-offset: 2px;
}

/* Screen-reader-only label text: present in the accessibility tree, visually hidden (NFR-USE-003). */
.telli-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Buttons + terminal-outcome cards (unchanged contracts: decline/limit/unavailable + CTA slot) ─ */
.telli-btn {
    border: none;
    border-radius: 8px;
    padding: 0.5rem 0.9rem;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    background: var(--telli-primary);
    color: #10240a;
}

.telli-btn:hover:not(:disabled) { background: var(--telli-primary-dark); }
.telli-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.telli-btn--ghost {
    background: transparent;
    color: var(--telli-primary-dark);
    border: 1px solid var(--telli-primary);
}

.telli-card {
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin: 0.5rem 1rem;
    font-size: 0.95rem;
}

.telli-card--decline {
    background: #fbf7ec;
    border: 1px solid #e7d9a8;
}

.telli-card--limit {
    background: #fbf7ec;
    border: 1px solid #e7d9a8;
}

.telli-card--unavailable {
    background: #f7efec;
    border: 1px solid #e4c8bd;
    color: var(--telli-danger);
}

.telli-card__cta {
    margin-top: 0.5rem;
}

/* ── Lifted-SessionChat scope carrier (adopt-tellireport-stack T037) ───────────────────────────────
   The wrapper carries session-chat-panel/analysis-session-chat so the LIFTED app.css bubble styles bind
   to the lifted components; this additive override neutralizes only the docked-panel container rule those
   classes also carry (position:fixed right dock), which belongs to TelliReport's own layout, not this host. */
.telli-lifted-scope.session-chat-panel.analysis-session-chat {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    width: auto;
    z-index: auto;
    border-left: none;
    box-shadow: none;
    background-color: transparent;
    display: block;
}

/* ── Sided messenger layout, no avatars (issue #165) ──────────────────────────────────────────────
   The lifted app.css renders an avatar as the FIRST flex child of .chat-message, in a row beside
   .message-content. Issue #165 first moved that avatar below the bubble as a caption; after reviewing
   mockups the design changed again — the avatar is removed ENTIRELY, not relocated. Speaker identity
   is now carried by position (assistant left/full-width, user right-aligned) and colour (the accent
   border), the same way ordinary messenger UIs work. The accessible speaker name still comes from
   `role="article"` / `aria-label="{Message.Role} message"` on .chat-message itself — nothing was lost
   for screen readers, it just never depended on the avatar markup in the first place. app.css itself
   is never edited (see index.html: it is lifted verbatim) — every rule below is an ADDITIVE OVERRIDE
   of the lifted bubble rules, scoped to this panel's own wrapper so no other surface is affected.

   DO NOT shorten the prefix to a bare `.telli-lifted-scope `. The rules being overridden are written
   as `.session-chat-panel.analysis-session-chat .chat-message` — three classes, specificity (0,3,0).
   A single-class prefix scores (0,2,0) and LOSES, and specificity beats source order, so the whole
   section would silently become a no-op and the assistant/user rows would collapse back to the lifted
   defaults. The wrapper carries all three classes (ChatTranscript.razor), so the full prefix scores
   (0,4,0) and wins without !important — the same reason the neutralizing block directly above is
   written the way it is.

   Assistant messages are left untouched here on purpose: app.css already gives .chat-message
   display:flex (row) and .message-content flex:1/min-width:0, which is exactly "take the full row"
   with no avatar column left to fill. Only the user side needs an override, to right-align it and cap
   its width like an outgoing chat bubble. */
.telli-lifted-scope.session-chat-panel.analysis-session-chat .chat-message.user {
    justify-content: flex-end;
}

.telli-lifted-scope.session-chat-panel.analysis-session-chat .chat-message.user .message-content {
    flex: 0 1 auto;
    max-width: 85%;
}

/* Accent moves from the left edge (old assistant-gutter convention) to the OUTER (right) edge for a
   right-aligned bubble — a left border on a right-aligned box reads as touching the wrong neighbour. */
.telli-lifted-scope.session-chat-panel.analysis-session-chat .chat-message.user .message-text {
    border-left: 0;
    border-right: 3px solid var(--telli-primary);
    border-radius: 8px 8px 2px 8px;
}