/* ============================================================================
 * LLM Bridge Mode Styles
 * ============================================================================
 * Chat UI rendered when the browser detects a bridge peer pointing at an
 * OpenAI-compatible LLM endpoint (capabilities.apiUrlHasV1 === true). Lives
 * inside the existing `#bridge-mode-container` so it shares the same back
 * button / status strip and disconnect overlay as the iframe view.
 *
 * Color palette intentionally matches srs-llm-bridge's voice-chat.html so users
 * coming from that app see a familiar interface. Dark theme by default; falls
 * back to inheriting the host page's theme if --srs-* vars are defined.
 *
 * Naming convention: every selector under .llm-mode-* to avoid collisions with
 * the host app's chat / room styles. The container's display is toggled by
 * app.js (_enterLlmBridgeMode / _exitBridgeMode).
 * ========================================================================= */

/* Mounted inside `.bridge-iframe-wrapper` (which is position:relative with flex:1)
 * so absolute positioning + inset:0 makes us fill the available area exactly the
 * same way `#bridge-iframe { width:100%; height:100% }` does. The disconnect /
 * loading overlays painted by app.js sit ABOVE us in the same wrapper and remain
 * usable (they're position:absolute too with higher z-index, set in styles.css).
 */
.llm-mode-container {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #1a1a2e;
    color: #e2e8f0;
    overflow: hidden;
    z-index: 1;
}

/* Header strip with model selector + settings toggle. Sits inside the existing
 * .bridge-iframe-wrapper so the back button / status pill stay above it. */
.llm-mode-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: #1e2936;
    border-bottom: 1px solid #2d3748;
    flex-shrink: 0;
}

.llm-mode-header label {
    font-size: 12px;
    color: #93c5fd;
    font-weight: 600;
    white-space: nowrap;
}

.llm-mode-model-select {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    background: #2a3845;
    color: #e2e8f0;
    border: 1px solid #4a5568;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}

.llm-mode-model-select:focus {
    outline: none;
    border-color: #4a90e2;
}

.llm-mode-model-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.llm-mode-icon-btn {
    background: transparent;
    border: 1px solid #4a5568;
    color: #93c5fd;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.llm-mode-icon-btn:hover {
    background: rgba(74, 144, 226, 0.15);
    border-color: #4a90e2;
}

.llm-mode-icon-btn[aria-pressed="true"] {
    background: #4a90e2;
    color: #fff;
    border-color: #4a90e2;
}

/* Settings drawer - hidden by default, slides down when toggled. */
.llm-mode-settings {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: #243240;
    border-bottom: 1px solid #2d3748;
    flex-shrink: 0;
    max-height: 40vh;
    overflow-y: auto;
}

.llm-mode-settings.expanded {
    display: flex;
}

.llm-mode-settings-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.llm-mode-settings-row label {
    font-size: 12px;
    color: #93c5fd;
    font-weight: 600;
    min-width: 110px;
    flex-shrink: 0;
}

.llm-mode-settings-row input[type="range"] {
    flex: 1;
    min-width: 0;
}

.llm-mode-settings-row input[type="number"],
.llm-mode-settings-row input[type="text"] {
    width: 80px;
    padding: 4px 8px;
    background: #2a3845;
    color: #e2e8f0;
    border: 1px solid #4a5568;
    border-radius: 4px;
    font-size: 12px;
}

.llm-mode-settings-row .llm-mode-range-value {
    min-width: 40px;
    text-align: right;
    font-size: 12px;
    color: #cbd5e1;
    font-variant-numeric: tabular-nums;
}

.llm-mode-system-prompt {
    width: 100%;
    min-height: 60px;
    max-height: 180px;
    padding: 8px;
    background: #2a3845;
    color: #e2e8f0;
    border: 1px solid #4a5568;
    border-radius: 6px;
    font-size: 12px;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}

.llm-mode-system-prompt:focus {
    outline: none;
    border-color: #4a90e2;
}

.llm-mode-settings-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.llm-mode-btn-secondary {
    padding: 6px 12px;
    background: #2a3845;
    color: #cbd5e1;
    border: 1px solid #4a5568;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s;
}

.llm-mode-btn-secondary:hover {
    background: #34495e;
}

.llm-mode-btn-danger {
    padding: 6px 12px;
    background: #7f1d1d;
    color: #fecaca;
    border: 1px solid #b91c1c;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s;
}

.llm-mode-btn-danger:hover {
    background: #991b1b;
}

/* Conversation thread - scrollable message list */
.llm-mode-thread {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
}

.llm-mode-empty {
    margin: auto;
    color: #64748b;
    font-size: 14px;
    text-align: center;
    padding: 32px 16px;
    line-height: 1.6;
}

.llm-mode-empty strong {
    color: #93c5fd;
}

.llm-mode-message {
    max-width: 90%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow: visible;
}

.llm-mode-message.user {
    align-self: flex-end;
    background: #4a90e2;
    color: #fff;
    border-bottom-right-radius: 4px;
}

.llm-mode-message.assistant {
    align-self: flex-start;
    background: #2a3845;
    color: #e2e8f0;
    border-bottom-left-radius: 4px;
    max-width: 95%;
}

.llm-mode-message.system {
    align-self: center;
    background: #4a5568;
    color: #cbd5e1;
    font-style: italic;
    font-size: 13px;
    max-width: 80%;
    text-align: center;
}

.llm-mode-message.error {
    align-self: stretch;
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.4);
    font-size: 13px;
}

.llm-mode-message.user img.llm-mode-msg-image,
.llm-mode-message.assistant img.llm-mode-msg-image {
    max-width: 240px;
    max-height: 240px;
    border-radius: 8px;
    margin: 4px 0 6px 0;
    display: block;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.2);
}

/* Code blocks (matches srs-llm-bridge .code-block exactly) */
.llm-mode-message .code-block {
    position: relative;
    margin: 8px 0;
    border-radius: 8px;
    background: #1e293b;
    overflow: hidden;
    border: 1px solid #334155;
}

.llm-mode-message .code-block pre {
    margin: 0;
    padding: 12px;
    background: transparent !important;
    overflow-x: auto;
    max-width: 100%;
    font-size: 12.5px;
    line-height: 1.5;
}

.llm-mode-message .code-block code {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    background: transparent !important;
}

.llm-mode-message .code-block .copy-button,
.llm-mode-message .code-block .preview-button {
    position: absolute;
    top: 6px;
    padding: 4px 8px;
    background: rgba(74, 144, 226, 0.15);
    color: #93c5fd;
    border: 1px solid rgba(74, 144, 226, 0.4);
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    z-index: 2;
    transition: background 0.15s;
}

.llm-mode-message .code-block .copy-button {
    right: 6px;
}

.llm-mode-message .code-block .preview-button {
    right: 60px;
}

.llm-mode-message .code-block .copy-button:hover,
.llm-mode-message .code-block .preview-button:hover {
    background: rgba(74, 144, 226, 0.3);
}

.llm-mode-message .code-block .copy-button.copied {
    background: rgba(34, 197, 94, 0.25);
    border-color: rgba(34, 197, 94, 0.5);
    color: #86efac;
}

.llm-mode-message code.inline-code {
    padding: 1px 6px;
    background: rgba(74, 144, 226, 0.15);
    color: #93c5fd;
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.9em;
}

.llm-mode-message a {
    color: #93c5fd;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.llm-mode-message a:hover {
    color: #bfdbfe;
}

.llm-mode-message .streaming-cursor {
    color: #4a90e2;
    animation: llm-blink 1s step-start infinite;
}

@keyframes llm-blink {
    50% { opacity: 0; }
}

/* Thinking section (matches srs-llm-bridge .thinking-* exactly) */
.llm-mode-message .thinking-section {
    margin: 6px 0 10px 0;
    border-radius: 8px;
    background: rgba(74, 144, 226, 0.08);
    border: 1px solid rgba(74, 144, 226, 0.3);
    overflow: hidden;
}

.llm-mode-message .thinking-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #34495e;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    color: #93c5fd;
    font-weight: 600;
}

.llm-mode-message .thinking-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.llm-mode-message .thinking-icon {
    font-size: 14px;
}

.llm-mode-message .thinking-streaming::after {
    content: '...';
    animation: llm-think-dots 1.5s steps(4, end) infinite;
}

@keyframes llm-think-dots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}

.llm-mode-message .thinking-toggle {
    transition: transform 0.2s;
    font-size: 10px;
}

.llm-mode-message .thinking-toggle:not(.expanded) {
    transform: rotate(-90deg);
}

.llm-mode-message .thinking-content {
    display: none;
    padding: 10px 12px;
    background: rgba(74, 144, 226, 0.04);
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.5;
}

.llm-mode-message .thinking-content.expanded {
    display: block;
}

.llm-mode-message .thinking-text {
    white-space: pre-wrap;
    word-break: break-word;
}

.llm-mode-message .thinking-prefix {
    padding: 6px 10px;
    background: rgba(74, 144, 226, 0.2);
    margin-bottom: 8px;
    border-radius: 4px;
    font-size: 12px;
    color: #93c5fd;
    font-style: italic;
    border-left: 3px solid #4a90e2;
}

/* Input area: image preview strip + textarea + send/stop. */
.llm-mode-input-bar {
    flex-shrink: 0;
    padding: 10px 12px;
    background: #1e2936;
    border-top: 1px solid #2d3748;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.llm-mode-image-preview-strip {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 120px;
    overflow-y: auto;
}

.llm-mode-image-preview-strip:not(:empty) {
    display: flex;
}

.llm-mode-image-preview {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 6px;
    overflow: hidden;
    background: #2a3845;
    border: 1px solid #4a5568;
    flex-shrink: 0;
}

.llm-mode-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.llm-mode-image-preview .llm-mode-image-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    padding: 0;
}

.llm-mode-image-preview .llm-mode-image-remove:hover {
    background: rgba(239, 68, 68, 0.9);
}

.llm-mode-input-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.llm-mode-input {
    flex: 1;
    min-height: 38px;
    max-height: 200px;
    padding: 8px 10px;
    background: #2a3845;
    color: #e2e8f0;
    border: 1px solid #4a5568;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    resize: none;
    box-sizing: border-box;
    line-height: 1.4;
}

.llm-mode-input:focus {
    outline: none;
    border-color: #4a90e2;
}

.llm-mode-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.llm-mode-send-btn {
    flex-shrink: 0;
    padding: 8px 16px;
    background: #4a90e2;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    height: 38px;
}

.llm-mode-send-btn:hover:not(:disabled) {
    background: #3b7bc7;
}

.llm-mode-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.llm-mode-send-btn.is-stop {
    background: #b91c1c;
}

.llm-mode-send-btn.is-stop:hover:not(:disabled) {
    background: #991b1b;
}

/* Markdown styling inside messages (matches srs-llm-bridge inline styles
 * by class so we don't have to inject inline style attributes from JS). */
.llm-mode-message strong { font-weight: 700; color: inherit; }
.llm-mode-message em { font-style: italic; color: inherit; }
.llm-mode-message ul {
    margin: 6px 0;
    padding-left: 20px;
}
.llm-mode-message li {
    margin: 2px 0;
    list-style-type: disc;
    color: inherit;
}
.llm-mode-message h1, .llm-mode-message h2, .llm-mode-message h3,
.llm-mode-message h4, .llm-mode-message h5, .llm-mode-message h6 {
    margin: 12px 0 6px 0;
    font-weight: 700;
    line-height: 1.3;
}
.llm-mode-message h1 { font-size: 1.5em; color: #93c5fd; }
.llm-mode-message h2 { font-size: 1.3em; color: #7eb3ff; }
.llm-mode-message h3 { font-size: 1.15em; color: #6ba4ff; }
.llm-mode-message h4 { font-size: 1.05em; color: #5a94e6; }
.llm-mode-message h5 { font-size: 1.0em;  color: #4a84d6; }
.llm-mode-message h6 { font-size: 0.95em; color: #3a74c6; }

.llm-mode-message table {
    border-collapse: collapse;
    margin: 12px 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    display: block;
    background: #2a3845;
}
.llm-mode-message thead { background: #1e2936; }
.llm-mode-message th, .llm-mode-message td {
    border: 1px solid #4a5568;
    padding: 8px;
    text-align: left;
}
.llm-mode-message th { color: #93c5fd; font-weight: 600; }
.llm-mode-message td { color: #cbd5e1; }
.llm-mode-message tbody tr:nth-child(even) { background: #243240; }

/* ============================================================================
 * Use-Model-Defaults toggle row + "greyed out" sampling param group.
 * ============================================================================
 * The toggle is an iOS-style pill switch so it's visually obvious it's a
 * binary ON/OFF, not a normal checkbox. When ON, the slider group below it
 * is dimmed + pointer-events disabled to reinforce "these values aren't
 * being sent". Inspired by srs-llm-bridge/voice-chat/voice-chat.html.
 * ==========================================================================*/
.llm-mode-settings-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin: 10px 0 6px 0;
    background: #0f172a;
    border: 1px solid #2d3748;
    border-radius: 6px;
}
.llm-mode-settings-toggle-text {
    flex: 1;
    min-width: 0;
}
.llm-mode-settings-toggle-text strong {
    display: block;
    font-size: 13px;
    color: #e2e8f0;
}
.llm-mode-settings-toggle-text p {
    margin: 2px 0 0 0;
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.4;
}
.llm-mode-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}
.llm-mode-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.llm-mode-switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #334155;
    border-radius: 22px;
    transition: background 0.2s;
}
.llm-mode-switch-slider::before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    top: 3px;
    background: #e2e8f0;
    border-radius: 50%;
    transition: transform 0.2s;
}
.llm-mode-switch input:checked + .llm-mode-switch-slider {
    background: #4a90e2;
}
.llm-mode-switch input:checked + .llm-mode-switch-slider::before {
    transform: translateX(18px);
}
.llm-mode-switch input:focus-visible + .llm-mode-switch-slider {
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.35);
}

.llm-mode-param-group {
    transition: opacity 0.15s;
}
.llm-mode-param-group.llm-mode-param-group--disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* ============================================================================
 * HTML Preview modal (triggered by the "▶ Run" button on html code blocks)
 * ============================================================================
 * We render the artifact in a same-container modal instead of window.open to
 * avoid popup blockers and keep the chat thread visible behind the overlay.
 * The iframe is sandboxed without allow-same-origin so it cannot read our
 * cookies/storage; external CDN resources still load.
 * ==========================================================================*/
.llm-mode-preview-modal {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}
.llm-mode-preview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    cursor: pointer;
}
.llm-mode-preview-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(960px, 100%);
    height: min(720px, 100%);
    background: #1a1a2e;
    border: 1px solid #334155;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}
.llm-mode-preview-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: #0f172a;
    border-bottom: 1px solid #2d3748;
    font-size: 13px;
    color: #94a3b8;
}
.llm-mode-preview-title {
    font-weight: 600;
    color: #e2e8f0;
}
.llm-mode-preview-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}
.llm-mode-preview-iframe {
    flex: 1;
    width: 100%;
    border: 0;
    background: #ffffff;
    display: block;
}

/* ============================================================================
 * Conversation tabs (multi-chat support)
 * ============================================================================
 * Horizontal scrollable strip rendered between the header / settings drawer
 * and the message thread. Each tab is one independent conversation; the "+"
 * button at the end creates a new tab and the per-tab "×" closes it. State
 * persists in localStorage per peerId so reload restores the user's tabs.
 * ==========================================================================*/
.llm-mode-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 6px 8px 0 8px;
    background: #1a1a2e;
    border-bottom: 1px solid #2d3748;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: #4a5568 transparent;
    /* Hide the tabs strip when empty so the thread sits flush against the
       header (no awkward 6px stripe). The strip is populated by JS on every
       state change, so :empty toggles correctly across renders. */
}
.llm-mode-tabs:empty {
    display: none;
}
.llm-mode-tabs::-webkit-scrollbar {
    height: 6px;
}
.llm-mode-tabs::-webkit-scrollbar-thumb {
    background: #4a5568;
    border-radius: 3px;
}

.llm-mode-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 6px 12px;
    background: #243240;
    color: #cbd5e1;
    border: 1px solid #2d3748;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
    max-width: 200px;
    user-select: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    position: relative;
    top: 1px; /* nudge over the strip's bottom border so active tab "merges" */
}
.llm-mode-tab:hover:not(.active) {
    background: #2a3845;
    color: #e2e8f0;
}
.llm-mode-tab.active {
    background: #1a1a2e;
    color: #93c5fd;
    border-color: #2d3748;
    border-bottom-color: #1a1a2e;
    font-weight: 600;
}

.llm-mode-tab-title {
    display: inline-block;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.llm-mode-tab-close {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    line-height: 18px;
    text-align: center;
    padding: 0;
    font-size: 14px;
    opacity: 0.5;
    transition: opacity 0.15s, background 0.15s;
    flex-shrink: 0;
}
.llm-mode-tab:hover .llm-mode-tab-close,
.llm-mode-tab.active .llm-mode-tab-close {
    opacity: 1;
}
.llm-mode-tab-close:hover {
    background: rgba(239, 68, 68, 0.25);
    color: #fecaca;
}

.llm-mode-tab-new {
    background: transparent;
    border: 1px dashed #4a5568;
    color: #93c5fd;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 16px;
    line-height: 1;
    margin-left: 4px;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.llm-mode-tab-new:hover {
    background: rgba(74, 144, 226, 0.15);
    border-color: #4a90e2;
    color: #bfdbfe;
}

/* ============================================================================
 * Per-message hover toolbar (Copy / Edit)
 * ============================================================================
 * Sits absolutely-positioned in the top-right of every .llm-mode-message
 * bubble. Hidden by default so it doesn't clutter the chat; revealed on
 * bubble hover or focus-within. The bubble itself becomes position:relative
 * via this rule so the absolute-positioned toolbar anchors correctly.
 * ==========================================================================*/
.llm-mode-message {
    position: relative;
}

.llm-mode-msg-actions {
    position: absolute;
    top: 4px;
    right: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transform: translateY(-2px);
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.12s ease;
    z-index: 2;
}
.llm-mode-message:hover .llm-mode-msg-actions,
.llm-mode-message:focus-within .llm-mode-msg-actions,
.llm-mode-msg-actions:hover {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.llm-mode-msg-action-btn {
    background: rgba(15, 23, 42, 0.85);
    color: #cbd5e1;
    border: 1px solid rgba(74, 144, 226, 0.35);
    border-radius: 4px;
    width: 26px;
    height: 26px;
    padding: 0;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.llm-mode-msg-action-btn:hover {
    background: rgba(74, 144, 226, 0.25);
    border-color: #4a90e2;
    color: #fff;
}
.llm-mode-msg-action-btn.copied {
    background: rgba(34, 197, 94, 0.25);
    border-color: rgba(34, 197, 94, 0.5);
    color: #86efac;
}

/* User bubble's hover toolbar contrasts against the bright-blue bubble: use a
 * lighter button skin so the copy/edit icons stay legible. */
.llm-mode-message.user .llm-mode-msg-action-btn {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
}
.llm-mode-message.user .llm-mode-msg-action-btn:hover {
    background: rgba(255, 255, 255, 0.32);
    border-color: rgba(255, 255, 255, 0.6);
}

/* The system message bubble's content is centered text; we don't expose Copy
 * / Edit on system bubbles (the markup also doesn't include the toolbar div),
 * but if a future change adds it, this rule keeps it visible there too. */

/* Make selectable text behaviour explicit so the user can drag-select inside
 * the bubble without other UA quirks (some browsers default to user-select:
 * none on certain message classes). */
.llm-mode-message {
    user-select: text;
    -webkit-user-select: text;
}

/* ============================================================================
 * Edit mode (per-message inline editor)
 * ============================================================================
 * When the user clicks the ✎ Edit button on a user bubble, the bubble's body
 * is replaced with a textarea + Save/Cancel actions. Saving truncates the
 * message thread and resends; cancel restores the original rendered HTML.
 * ==========================================================================*/
.llm-mode-message.user.editing {
    background: #2a3845;       /* desaturate while editing so it reads as "draft" */
    color: #e2e8f0;
    border: 1px solid #4a90e2;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.15);
    width: min(640px, 100%);   /* wider edit affordance for typing comfort */
    max-width: 100%;
}

.llm-mode-edit-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.llm-mode-edit-textarea {
    width: 100%;
    min-height: 60px;
    max-height: 320px;
    padding: 8px 10px;
    background: #0f172a;
    color: #e2e8f0;
    border: 1px solid #4a5568;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
    line-height: 1.5;
}
.llm-mode-edit-textarea:focus {
    outline: none;
    border-color: #4a90e2;
}

.llm-mode-edit-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.llm-mode-edit-actions .llm-mode-send-btn {
    height: auto;
    padding: 6px 14px;
    font-size: 13px;
}
.llm-mode-edit-actions .llm-mode-btn-secondary {
    padding: 6px 14px;
    font-size: 13px;
}

.llm-mode-edit-warning {
    font-size: 11px;
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.25);
    padding: 6px 10px;
    border-radius: 4px;
    line-height: 1.4;
}

/* ============================================================================
 * Streaming TPS readout (assistant message footer)
 * ============================================================================
 * Tiny pill below the assistant body that shows live tokens-per-second and
 * total token count. Updated at most ~5×/sec by _tickStreamMetrics; locked
 * in with the final value after the stream ends.
 * ==========================================================================*/
.llm-mode-msg-metrics {
    margin-top: 6px;
    font-size: 11px;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    letter-spacing: 0.02em;
    user-select: text;
}

/* Mobile: tighter padding so the chat fills the available width */
@media (max-width: 640px) {
    .llm-mode-thread { padding: 12px 8px; gap: 10px; }
    .llm-mode-message { max-width: 100%; font-size: 13px; padding: 8px 12px; }
    .llm-mode-header { padding: 6px 8px; gap: 8px; }
    .llm-mode-input-bar { padding: 8px; }
    .llm-mode-settings-row label { min-width: 90px; font-size: 11px; }
    .llm-mode-preview-modal { padding: 8px; }
    .llm-mode-preview-header { padding: 8px 10px; font-size: 12px; }
    .llm-mode-settings-toggle-row { padding: 8px 10px; gap: 10px; }
    .llm-mode-tab { max-width: 140px; padding: 5px 6px 5px 10px; font-size: 11px; }
    .llm-mode-tab-title { max-width: 100px; }
    /* Always-visible toolbar on touch devices (no hover); keep it subtle. */
    .llm-mode-msg-actions { opacity: 0.55; transform: none; pointer-events: auto; }
    .llm-mode-msg-action-btn { width: 24px; height: 24px; font-size: 12px; }
}