/**
 * Chat Mode Styles
 *
 * Layout: full-bleed container; thread + input centered to ~760px.
 * Messages: assistant flows borderless like a document; user gets a
 * subtle pill on the right. Input floats at the bottom with soft
 * elevation. Follows common conversational-UI layout conventions.
 */

/* Local design tokens (kept here so the chat page can tune width
   independently of the global theme). */
.ldr-chat-container {
    --ldr-chat-max-width: 760px;
    --ldr-chat-radius: 16px;
}

/* Chat Container */
.ldr-chat-container {
    display: flex;
    flex-direction: column;
    /* Subtract the actual .ldr-top-bar height (60px on desktop, 50px on
       mobile via the @media block below). Using 80px overflowed the viewport
       by 20px and clipped the input area.
       Use dvh (dynamic viewport units) so iOS Safari accounts for its
       collapsible URL bar — 100vh on iOS reports the full document height
       including hidden chrome, which buries the input behind the toolbar.
       The 100vh line stays as a fallback for browsers older than the dvh
       support floor (iOS 15.4 / Chrome 108 / Firefox 101). Same pattern is
       used in mobile-navigation.css. */
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px);
    width: 100%;
    padding: 0 1rem;
}

/* Chat Header */
.ldr-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 0.25rem;
    flex-shrink: 0;
    width: 100%;
    max-width: var(--ldr-chat-max-width);
    margin: 0 auto;
}

.ldr-chat-header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ldr-chat-header h1 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #f5f5f5);
    margin: 0;
}

.ldr-chat-edit-title {
    background: none;
    border: none;
    color: var(--text-muted, #8a8aa0);
    cursor: pointer;
    padding: 0.25rem;
    font-size: 0.875rem;
    transition: color 0.2s;
}

.ldr-chat-edit-title:hover {
    color: var(--accent-primary, #6e4ff6);
}

.ldr-chat-header-right {
    display: flex;
    gap: 0.5rem;
}

/* Messages Area — centered narrow column, document-like rhythm */
.ldr-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    max-width: var(--ldr-chat-max-width);
    margin: 0 auto;
}

/* Welcome Screen — minimal greeting; suggestions become unobtrusive chips */
.ldr-chat-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    padding: 1.5rem;
    gap: 0.5rem;
}

.ldr-chat-welcome-icon {
    font-size: 2rem;
    margin-bottom: 0.25rem;
    /* No accent color — emoji-style understatement */
}

.ldr-chat-welcome h2 {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--text-primary, #f5f5f5);
    margin: 0 0 0.25rem;
    letter-spacing: -0.01em;
}

.ldr-chat-welcome p {
    color: var(--text-muted, #8a8aa0);
    margin: 0 0 1.75rem;
    max-width: 460px;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.ldr-chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    max-width: 560px;
}

.ldr-chat-suggestion {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: transparent;
    border: 1px solid var(--border-color, #343452);
    border-radius: 999px;
    color: var(--text-secondary, #c0c0cc);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ldr-chat-suggestion:hover {
    background: var(--bg-tertiary, #2a2a3a);
    border-color: var(--text-muted, #8a8aa0);
    color: var(--text-primary, #f5f5f5);
}

.ldr-chat-suggestion:focus-visible {
    outline: 2px solid var(--accent-primary, #6e4ff6);
    outline-offset: 2px;
}

.ldr-chat-suggestion i {
    color: var(--text-muted, #8a8aa0);
    font-size: 0.75rem;
}

/* Chat Messages — asymmetric: assistant flows borderless, user is a pill */
.ldr-chat-message {
    display: flex;
    gap: 0.75rem;
    max-width: 100%;
    animation: ldrChatFadeIn 0.25s ease;
}

@keyframes ldrChatFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ldr-chat-message-user {
    align-self: flex-end;
    flex-direction: row-reverse;
    max-width: 80%;
}

.ldr-chat-message-assistant {
    align-self: stretch;
    width: 100%;
}

/* Avatars: hidden for assistant (document-flow), tiny initial for user. */
.ldr-chat-message-avatar {
    display: none;
}

.ldr-chat-message-user .ldr-chat-message-avatar {
    display: none;
}

/* Assistant: no bubble, no border, no avatar — content reads like a document.
   min-height keeps the element visible while streaming starts (otherwise an
   empty text node + transparent bg = invisible). */
.ldr-chat-message-assistant .ldr-chat-message-content {
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
    width: 100%;
    min-height: 1.5em;
}

/* User: subtle pill on the right. */
.ldr-chat-message-user .ldr-chat-message-content {
    background: var(--bg-tertiary, #2a2a3a);
    border: 1px solid var(--border-color, #343452);
    border-radius: 14px;
    padding: 0.625rem 0.9375rem;
}

.ldr-chat-message-text {
    color: var(--text-primary, #f5f5f5);
    line-height: 1.65;
    font-size: 1rem;
}

.ldr-chat-message-user .ldr-chat-message-text {
    color: var(--text-primary, #f5f5f5);
    font-size: 0.9375rem;
}

/* Markdown content in assistant messages */
.ldr-chat-message-assistant .ldr-chat-message-text h1,
.ldr-chat-message-assistant .ldr-chat-message-text h2,
.ldr-chat-message-assistant .ldr-chat-message-text h3 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.ldr-chat-message-assistant .ldr-chat-message-text h1:first-child,
.ldr-chat-message-assistant .ldr-chat-message-text h2:first-child,
.ldr-chat-message-assistant .ldr-chat-message-text h3:first-child {
    margin-top: 0;
}

.ldr-chat-message-assistant .ldr-chat-message-text p {
    margin-bottom: 0.75rem;
}

.ldr-chat-message-assistant .ldr-chat-message-text p:last-child {
    margin-bottom: 0;
}

.ldr-chat-message-assistant .ldr-chat-message-text ul,
.ldr-chat-message-assistant .ldr-chat-message-text ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.ldr-chat-message-assistant .ldr-chat-message-text code {
    background: var(--bg-tertiary, #2a2a3a);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.875em;
}

.ldr-chat-message-assistant .ldr-chat-message-text pre {
    background: var(--bg-tertiary, #2a2a3a);
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 0.75rem 0;
}

.ldr-chat-message-assistant .ldr-chat-message-text pre code {
    background: none;
    padding: 0;
}

/* Streaming indicator — small pulsing caret after the last word.
   Use vertical-align: middle so the caret renders even when the text
   element is empty (no baseline established yet). */
.ldr-chat-message-streaming .ldr-chat-message-text::after {
    content: '▍';
    display: inline-block;
    margin-left: 2px;
    color: var(--accent-primary, #6e4ff6);
    animation: streamingPulse 1s ease-in-out infinite;
    vertical-align: middle;
    line-height: 1;
}

@keyframes streamingPulse {
    0%, 100% {
        opacity: 0.4;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

.ldr-chat-message-assistant .ldr-chat-message-text a {
    color: var(--accent-tertiary, #40bfff);
    text-decoration: none;
}

.ldr-chat-message-assistant .ldr-chat-message-text a:hover {
    text-decoration: underline;
}

.ldr-chat-message-meta {
    margin-top: 0.5rem;
    font-size: 0.6875rem;
    color: var(--text-muted, #8a8aa0);
    opacity: 0;
    transition: opacity 0.15s;
}

/* Reveal metadata on hover OR keyboard focus inside the bubble. The
   :focus-within branch is the a11y counterpart — keyboard-only users
   never trigger :hover, and the meta line (timestamp) is functional
   information, not decoration. */
.ldr-chat-message:hover .ldr-chat-message-meta,
.ldr-chat-message:focus-within .ldr-chat-message-meta {
    opacity: 0.7;
}

.ldr-chat-message-user .ldr-chat-message-meta {
    text-align: right;
}

/* Thinking indicator */
.ldr-chat-message-thinking .ldr-chat-message-content {
    padding: 1rem;
}

/* Live activity preview inside the thinking bubble. Sits above the
   bouncing dots and overwrites with each progress event so the user
   sees what the agent is currently doing instead of a static dots
   indicator. Hidden by default ([hidden] attribute on the template
   element); JS reveals once the first message arrives. */
.ldr-chat-thinking-text {
    font-size: 0.875rem;
    color: var(--text-secondary, #b8b8c8);
    font-style: italic;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    /* Cap height + ellipsis on overflow so a long snippet doesn't
       push the rest of the chat around. Use the `:not([hidden])`
       selector so the HTML `hidden` attribute still removes the
       element from layout — overriding display: -webkit-box on a
       hidden element would otherwise reveal an empty box. */
}

.ldr-chat-thinking-text:not([hidden]) {
    max-height: 4.2em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.ldr-chat-thinking-dots {
    display: flex;
    gap: 4px;
    align-items: center;
}

.ldr-chat-thinking-dots span {
    width: 8px;
    height: 8px;
    background: var(--text-muted, #8a8aa0);
    border-radius: 50%;
    animation: thinkingBounce 1.4s infinite ease-in-out both;
}

.ldr-chat-thinking-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.ldr-chat-thinking-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes thinkingBounce {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Research Step Messages — compact assistant messages for progress steps */
.ldr-chat-message-step {
    animation: stepFadeIn 0.25s ease;
    gap: 0.5rem;
}
.ldr-chat-message-step .ldr-chat-message-content {
    padding: 0.375rem 0.75rem;
    min-height: auto;
    min-width: 0;
    overflow: hidden;
    background: var(--bg-tertiary, #2a2a3a);
}
.ldr-chat-message-step .ldr-chat-message-text {
    font-size: 0.8125rem;
    color: var(--text-muted, #8a8aa0);
    line-height: 1.4;
}
.ldr-chat-message-step .ldr-chat-message-avatar {
    width: 24px;
    height: 24px;
    min-width: 24px;
    font-size: 0.65rem;
}
.ldr-chat-message-step .ldr-chat-message-avatar i {
    color: var(--accent-secondary, #9179f0);
}
@keyframes stepFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .ldr-chat-message-step { animation: none; }
    /* Suppress the two infinite-loop animations that drive the live
       streaming caret and the three thinking dots. Both can trigger
       vestibular discomfort; keep the caret visible (static glyph)
       and the dots visible (static, no bounce) so the indicators
       still communicate "in progress". */
    .ldr-chat-message-streaming .ldr-chat-message-text::after {
        animation: none;
        opacity: 0.6;
        transform: none;
    }
    .ldr-chat-thinking-dots span {
        animation: none;
        opacity: 0.7;
    }
}

/* Research Steps Accordion Group */
.ldr-chat-steps-group {
    align-self: stretch;
    margin: 0.25rem 0;
    border: 1px solid var(--border-color, #343452);
    border-radius: 10px;
    width: 100%;
    background: var(--bg-secondary, #1e1e2d);
}
.ldr-chat-steps-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: transparent;
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--text-secondary, #b0b0c8);
    user-select: none;
    font-family: inherit;
    font-weight: 500;
}
.ldr-chat-steps-header:hover {
    background: rgba(255, 255, 255, 0.04);
}
.ldr-chat-steps-header:focus-visible {
    outline: 2px solid var(--accent-primary, #6e4ff6);
    outline-offset: -2px;
}
.ldr-chat-steps-header .fa-flask {
    color: var(--accent-secondary, #9179f0);
}
.ldr-chat-steps-label {
    flex: 1;
    text-align: left;
}
.ldr-chat-steps-chevron {
    transition: transform 0.2s ease;
    font-size: 0.65rem;
    opacity: 0.6;
}
.ldr-chat-steps-header[aria-expanded="true"] .ldr-chat-steps-chevron {
    transform: rotate(90deg);
}
.ldr-chat-steps-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
}
.ldr-chat-steps-content > div {
    overflow: hidden;
    min-height: 0;
}
.ldr-chat-steps-group:not(.ldr-chat-steps-collapsed) .ldr-chat-steps-content {
    grid-template-rows: 1fr;
}
/* Max height with scroll when expanded, so expanding individual steps doesn't blow out the chat */
.ldr-chat-steps-group:not(.ldr-chat-steps-collapsed) .ldr-chat-steps-content > div {
    max-height: 400px;
    overflow-y: auto;
}
/* Accordion step overrides — smaller, flat list variant of .ldr-chat-message-step.
   Base step styles (above) are used for live steps during research.
   These overrides apply only when steps are inside the accordion group. */
.ldr-chat-steps-content .ldr-chat-message-step {
    animation: none;
    margin: 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0.25rem 0.5rem;
    gap: 0.375rem;
    cursor: pointer;
    transition: background 0.15s ease;
}
.ldr-chat-steps-content .ldr-chat-message-step:hover {
    background: rgba(255, 255, 255, 0.03);
}
.ldr-chat-steps-content .ldr-chat-message-step .ldr-chat-message-content {
    border-radius: 0;
    padding: 0.25rem 0.5rem;
    background: transparent;
}
.ldr-chat-steps-content .ldr-chat-message-step .ldr-chat-message-text {
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Expanded step item — show full text */
.ldr-chat-steps-content .ldr-chat-message-step.ldr-step-expanded .ldr-chat-message-text {
    overflow: visible;
    white-space: pre-wrap;
}
.ldr-chat-steps-content .ldr-chat-message-step .ldr-chat-message-avatar {
    width: 20px;
    height: 20px;
    min-width: 20px;
    font-size: 0.55rem;
}
.ldr-chat-steps-content .ldr-chat-message-step:first-child {
    border-top: none;
}
/* Chat Progress Wrapper - limit height, match centered column width */
#chat-progress-wrapper {
    max-height: 250px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--ldr-chat-max-width);
    margin: 0 auto;
}

#chat-progress-wrapper .ldr-collapsible-log-panel {
    max-height: 180px;
    overflow: hidden;
}

#chat-progress-wrapper .ldr-log-panel-content {
    max-height: 140px;
    overflow-y: auto;
}

#chat-progress-wrapper .ldr-console-log {
    max-height: 120px;
    overflow-y: auto;
}

/* Current Task Display — slimmer, lives in the centered column */
.ldr-chat-task-container {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    margin: 0 auto 0.5rem;
    background: var(--bg-secondary, #1e1e2d);
    border: 1px solid var(--border-color, #343452);
    border-radius: 8px;
    width: 100%;
    max-width: var(--ldr-chat-max-width);
    font-size: 0.875rem;
}

.ldr-chat-task-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--accent-primary, #6e4ff6);
    white-space: nowrap;
    min-width: fit-content;
}

.ldr-chat-task-label i {
    font-size: 0.875rem;
}

.ldr-chat-task-text {
    flex: 1;
    color: var(--text-primary, #f5f5f5);
    line-height: 1.4;
    font-size: 0.9375rem;
}

/* Stop button — sits inline with the current task. Inline only,
   no global toast. Mirrors progress.js cancel pattern but tighter. */
.ldr-chat-stop-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    /* WCAG 2.2 AA requires a 24x24 minimum touch target — bump to 32px
       to give comfortable hit area on touch devices. Existing tight
       padding stays for visual compactness; min-height handles the rest. */
    min-height: 32px;
    background: transparent;
    border: 1px solid var(--error-color, #fa5c7c);
    border-radius: 6px;
    color: var(--error-color, #fa5c7c);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    white-space: nowrap;
    margin-left: auto;
    flex-shrink: 0;
}

.ldr-chat-stop-btn:hover:not(:disabled) {
    background: var(--error-color, #fa5c7c);
    color: white;
}

.ldr-chat-stop-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Spinner animation comes from Font Awesome's bundled `fa-spin` class
   when applied alongside `fa-spinner`. No custom keyframes needed. */

/* Stopped-by-user footer appended to the partial bubble. */
.ldr-chat-stopped-footer {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border-color, #343452);
    color: var(--text-secondary, #aaa);
    font-size: 0.8125rem;
    font-style: italic;
}

/* Input Area — floating, elevated, centered */
.ldr-chat-input-container {
    padding: 0.5rem 0 1.25rem;
    flex-shrink: 0;
    width: 100%;
    max-width: var(--ldr-chat-max-width);
    margin: 0 auto;
    /* Soft fade above the input so messages don't crash into it.
       The gradient ends at fully-transparent so the RGB values are
       irrelevant — `transparent` is the canonical keyword and avoids
       hardcoding a specific theme color. */
    background: linear-gradient(
        to top,
        var(--bg-primary, #121212) 60%,
        transparent
    );
    position: relative;
    z-index: 5;
}

.ldr-chat-input-wrapper {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    background: var(--bg-secondary, #1e1e2d);
    border: 1px solid var(--border-color, #343452);
    border-radius: var(--ldr-chat-radius);
    padding: 0.625rem 0.625rem 0.625rem 1rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.ldr-chat-input-wrapper:focus-within {
    border-color: var(--accent-primary, #6e4ff6);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.18),
        0 0 0 3px rgba(var(--accent-primary-rgb, 110, 79, 246), 0.15);
}

#chat-input {
    flex: 1;
    background: none;
    border: none;
    color: var(--text-primary, #f5f5f5);
    font-size: 1rem;
    line-height: 1.5;
    resize: none;
    max-height: 220px;
    outline: none;
    padding: 0.4375rem 0;
}

/* The wrapper's :focus-within ring is a 15%-opacity box-shadow, which
   is effectively invisible. Restore a real outline on the input itself
   for keyboard users (:focus-visible suppresses it on mouse click so
   sighted-mouse UX is unchanged). WCAG 2.4.11 compliance. */
#chat-input:focus-visible {
    outline: 2px solid var(--accent-primary, #6e4ff6);
    outline-offset: 2px;
}

#chat-input::placeholder {
    color: var(--text-muted, #8a8aa0);
}

.ldr-chat-input-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.ldr-chat-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--accent-primary, #6e4ff6);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.1s;
    font-size: 0.8125rem;
}

.ldr-chat-send-btn:hover:not(:disabled) {
    background: var(--accent-secondary, #9179f0);
}

.ldr-chat-send-btn:active:not(:disabled) {
    transform: scale(0.96);
}

.ldr-chat-send-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Keyboard-visible focus rings for the chat-page action buttons.
   None of these had a :focus-visible rule before — keyboard users
   could tab onto them with no visible indicator. The same pattern
   covers send, stop, new-chat / export (.ldr-btn used on this page),
   and the title-edit pencil. */
.ldr-chat-send-btn:focus-visible,
.ldr-chat-stop-btn:focus-visible,
.ldr-chat-edit-title:focus-visible {
    outline: 2px solid var(--accent-primary, #6e4ff6);
    outline-offset: 2px;
}

/* Scope the .ldr-btn focus ring to the chat page so it doesn't
   accidentally override a more specific rule elsewhere. */
#chat-page .ldr-btn:focus-visible {
    outline: 2px solid var(--accent-primary, #6e4ff6);
    outline-offset: 2px;
}

.ldr-chat-input-hints {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    padding: 0 0.5rem;
    font-size: 0.6875rem;
    color: var(--text-muted, #8a8aa0);
    opacity: 0.7;
}

.ldr-chat-input-hints kbd {
    background: var(--bg-tertiary, #2a2a3a);
    padding: 0.0625rem 0.3125rem;
    border-radius: 3px;
    font-size: 0.625rem;
    font-family: inherit;
}

/* Button Styles */

/* Base .ldr-btn / .ldr-btn-secondary. The canonical definitions live in
   document_details.css, which is NOT loaded on the chat page (chat.html
   pulls only chat.css + the Vite bundle), so the "New Chat" / "Export"
   header buttons rendered as unstyled browser defaults. These are kept
   intentionally UNSCOPED (not under #chat-page) so .ldr-btn-sm below — which
   has lower specificity — still overrides padding/font-size; chat.css is only
   ever loaded on the chat page, so there is no cross-page leakage. Kept in
   sync with document_details.css. */
.ldr-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

.ldr-btn:hover {
    box-shadow: 0 8px 25px rgba(var(--accent-primary-rgb), 0.3);
}

.ldr-btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.ldr-btn-secondary:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-primary);
}

.ldr-btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

/* Responsive Adjustments — breakpoint aligned to 767px to match
   styles.css / mobile-responsive.css (which both fire at 767px). At
   exactly 768px the chat container would otherwise assume the desktop
   60px top bar while the top bar itself had already shrunk to 50px,
   clipping 10px off the input area. */
@media (max-width: 767px) {
    .ldr-chat-container {
        padding: 0 0.75rem;
        /* Mobile .ldr-top-bar is 50px (styles.css under
           @media max-width: 767px). Use dvh for the iOS URL-bar
           collapse — see the desktop rule for rationale. */
        height: calc(100vh - 50px);
        height: calc(100dvh - 50px);
    }

    /* Touch-target floor (WCAG 2.5.5 / Apple HIG: 44×44). The desktop
       rule above sets the send button at 36×36, which is below the
       floor on touch devices. The global mobile-responsive rule for
       `button` doesn't apply because it's an unprefixed `button`
       selector at lower specificity than this class. */
    .ldr-chat-send-btn {
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
    }

    .ldr-chat-header h1 {
        font-size: 1rem;
    }

    .ldr-chat-message-user {
        max-width: 88%;
    }

    .ldr-chat-suggestions {
        flex-direction: column;
        width: 100%;
    }

    .ldr-chat-suggestion {
        width: 100%;
        justify-content: center;
    }

    .ldr-chat-input-hints {
        display: none;
    }

    .ldr-chat-welcome h2 {
        font-size: 1.5rem;
    }
}

/* Scrollbar Styling */
.ldr-chat-messages::-webkit-scrollbar {
    width: 6px;
}

.ldr-chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.ldr-chat-messages::-webkit-scrollbar-thumb {
    background: var(--border-color, #343452);
    border-radius: 3px;
}

.ldr-chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted, #8a8aa0);
}

/* Research link in assistant messages */
.ldr-chat-research-link {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color, #343452);
}

.ldr-chat-research-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    color: var(--accent-tertiary, #40bfff);
    background: rgba(var(--accent-tertiary-rgb, 64, 191, 255), 0.1);
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.ldr-chat-research-link-btn:hover {
    background: rgba(var(--accent-tertiary-rgb, 64, 191, 255), 0.2);
    color: var(--accent-primary, #7c6aef);
    text-decoration: none;
}

/* Per-message hover actions (Copy / Retry / Delete). Revealed on
   hover AND keyboard focus-within so keyboard-only users get the
   same affordance as mouse users. Mirrors the .ldr-chat-message-meta
   reveal pattern above. */
.ldr-chat-message-actions {
    display: flex;
    gap: 0.15rem;
    margin-top: 0.4rem;
    opacity: 0;
    transition: opacity 0.15s;
}

.ldr-chat-message:hover .ldr-chat-message-actions,
.ldr-chat-message:focus-within .ldr-chat-message-actions {
    opacity: 0.85;
}

.ldr-chat-msg-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    font-size: 0.75rem;
    line-height: 1;
    color: var(--text-muted, #8a8aa0);
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.ldr-chat-msg-action:hover,
.ldr-chat-msg-action:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary, #e0e0e8);
    outline: none;
}

.ldr-chat-msg-action:focus-visible {
    box-shadow: 0 0 0 2px var(--accent-tertiary, #40bfff);
}

/* Delete gets a subtle red tint on hover so the destructive action is
   visually distinct from Copy/Retry. */
.ldr-chat-msg-action-delete:hover,
.ldr-chat-msg-action-delete:focus-visible {
    color: #ff6b6b;
    background: rgba(var(--error-color-rgb), 0.08);
}

/* Load-older-messages pagination trigger at the top of the chat
   stream. Sits above the oldest currently-displayed message; clicking
   prepends the previous batch via /messages?before_created_at=. */
.ldr-chat-load-older-btn {
    display: block;
    width: max-content;
    margin: 0.75rem auto 1rem;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    color: var(--accent-tertiary, #40bfff);
    background: transparent;
    border: 1px solid rgba(var(--accent-tertiary-rgb, 64, 191, 255), 0.4);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.ldr-chat-load-older-btn:hover:not(:disabled) {
    background: rgba(var(--accent-tertiary-rgb, 64, 191, 255), 0.1);
    border-color: var(--accent-tertiary, #40bfff);
}

.ldr-chat-load-older-btn:disabled {
    opacity: 0.6;
    cursor: progress;
}
