@import url('https://fonts.googleapis.com/css2?family=Cabin:wght@400;500;600&display=swap');

/* ================================
   CSS Variables
   ================================ */
:root {
    --bg-primary: #1a1a1a;
    --bg-surface: #2a2a2a;
    --bg-surface-hover: #333333;
    --border: #3a3a3a;
    --border-light: #4a4a4a;
    --text-primary: #e0e0e0;
    --text-secondary: #999;
    --text-muted: #666;
    --accent: #c45c3e;
    --accent-hover: #d46d4e;
    --danger: #c43e3e;
    --danger-hover: #d45050;
    --success: #5a9d6e;
    --success-hover: #6ab080;
    --disabled-bg: #555;
    --green-tint: #2a3a2a;
    --sidebar-width: 300px;
    --header-height: 52px;
    --glass-bg: rgba(26, 26, 26, 0.75);
    --glass-bg-strong: rgba(26, 26, 26, 0.85);
    --glass-blur: 16px;
    --scrollbar-thumb: var(--border);
    --scrollbar-thumb-hover: var(--border-light);
    --glass-border: rgba(255, 255, 255, 0.06);
}

/* ================================
   Global Styles
   ================================ */
html, body {
    overflow: hidden;
    height: 100%;
    overscroll-behavior: none;
}

body.settings-page,
body.login-page,
html:has(body.settings-page),
html:has(body.login-page) {
    overflow: auto;
    height: auto;
    overscroll-behavior: auto;
}

body {
    font-family: 'Cabin', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
}

/* Fixed background layer — sits under all content. */
/* Dedicated element (rather than body { background-attachment: fixed }) */
/* so backdrop-filter surfaces composite cleanly against a stable layer */
/* instead of a compositor-promoted body background — fixes the seam/line */
/* artifacts that appeared at panel edges during scroll. */
/* Empty by default — rooms fill it via applyRoomTheme(). */
/* Two layers stack and crossfade via .active toggling on room switch. */
.bg-layer {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.bg-layer.active {
    opacity: 1;
}

body.login-page .bg-layer {
    background-image: url('https://pub-f6ca935984ac4a4ea8574b351644f669.r2.dev/content/globals/images/garden-background.jpg');
}

h1 {
    color: var(--accent);
}

/* ================================
   Form Elements
   ================================ */
input[type="password"] {
    width: 100%;
    padding: 14px;
    background-color: rgba(42, 42, 42, 0.4);
    border: 1px solid rgba(58, 58, 58, 0.4);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 17px;
    box-sizing: border-box;
    font-family: inherit;
}

textarea {
    width: 100%;
    padding: 14px 48px 14px 16px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 24px;
    color: var(--text-primary);
    font-size: 16px;
    box-sizing: border-box;
    font-family: inherit;
    resize: none;
    line-height: 1.5;
    overflow-y: auto;
}

textarea:focus {
    outline: none;
    border-color: var(--border-light);
}

button {
    padding: 12px 20px;
    background-color: var(--accent);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 17px;
    cursor: pointer;
    transition: background-color 0.2s;
}

button:hover {
    background-color: var(--accent-hover);
}

button:disabled {
    background-color: var(--disabled-bg);
    cursor: not-allowed;
}

/* Login button - circular with icon */
button.icon-button {
    width: 56px;
    height: 56px;
    padding: 0;
    margin-top: 20px;
    background-color: var(--success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

button.icon-button:hover {
    background-color: var(--success-hover);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

button.icon-button:disabled {
    background-color: var(--disabled-bg);
}

button.icon-button svg {
    width: 24px;
    height: 24px;
}

/* ================================
   Shared Scrollbar
   ================================ */
/* Thin 4px scrollbar for popovers, panels, and sidebar lists. */
.scroll-thin::-webkit-scrollbar { width: 4px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }
.scroll-thin::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 2px; }

/* Standard 6px scrollbar for main content areas (chat thread, preview). */
.scroll::-webkit-scrollbar { width: 6px; }
.scroll::-webkit-scrollbar-track { background: transparent; }
.scroll::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
.scroll::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

/* ================================
   Profile Images
   ================================ */
.profile-img {
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border-light);
    flex-shrink: 0;
}

.profile-img-sm {
    width: 20px;
    height: 20px;
}

.profile-img-md {
    width: 48px;
    height: 48px;
}

.profile-img-lg {
    width: 36px;
    height: 36px;
}

/* Profile image next to agent label in messages */
.msg-label-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.msg-label-row .msg-label {
    margin-bottom: 0;
}

/* ================================================================
   LAYOUT
   ================================================================ */
/* ================================
   Login Layout
   ================================ */
.login-container {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    background-color: rgba(42, 42, 42, 0.35);
    padding: 40px;
    border-radius: 8px;
    border: 1px solid rgba(58, 58, 58, 0.4);
}

.login-container form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.centered {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100dvh;
}

.error {
    color: #ff6b6b;
    margin-top: 15px;
    font-size: 15px;
    display: none;
}

.subtitle {
    color: #bbb;
    margin-bottom: 30px;
    font-size: 15px;
}

/* ================================================================
   HEADER
   ================================================================ */
/* ================================
   Room Name in Conversations Header
   ================================ */
.sidebar-room-name {
    display: block;
    font-size: 13px;
    color: var(--accent);
    font-weight: 500;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* ================================================================
   SIDEBAR
   ================================================================ */


/* ================================
   Sidebar
   ================================ */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.sidebar-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100dvh;
    background: var(--bg-surface);
    border-right: 1px solid var(--glass-border);
    z-index: 100;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.sidebar.open {
    transform: translateX(0);
}

/* ================================
   Sidebar Room List
   ================================ */
.sidebar-room-item {
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    height: 64px;
    padding-right: 8px;
    cursor: pointer;
    transition: background-color 0.15s;
    gap: 12px;
    overflow: hidden;
}

.sidebar-room-item:first-child {
    border-top: 1px solid var(--glass-border);   
}

.sidebar-room-item:hover {
    background-color: var(--bg-surface-hover);
}

.sidebar-room-item.active {
    background-color: var(--bg-surface);
}

.sidebar-room-icon {
    border-right: 5px solid;
    width: 56px;
    min-width: 56px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
    overflow: hidden;
}

.sidebar-room-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.sidebar-room-item.active .sidebar-room-icon {
    color: var(--accent);
    background: rgba(196, 92, 62, 0.12);
}

.sidebar-room-info {
    flex: 1;
    min-width: 0;
}

.sidebar-room-name-label {
    font-size: 16px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.sidebar-room-item.active .sidebar-room-name-label {
    /* colour applied inline per-room via JS */
}

/* New Room input row */
.sidebar-new-room {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 12px 4px;
}

.sidebar-new-room input {
    flex: 1;
    padding: 8px 12px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
}

.sidebar-new-room input:focus {
    outline: none;
    border-color: var(--accent);
}

.sidebar-new-room-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    background: var(--accent);
    border: none;
    border-radius: 8px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s;
    flex-shrink: 0;
}

.sidebar-new-room-btn:hover {
    background: var(--accent-hover);
}

.sidebar-new-room-btn:disabled {
    background: var(--disabled-bg);
    cursor: not-allowed;
}

/* ================================
   Sidebar Footer (Documents link)
   ================================ */
.sidebar-footer {
    margin-top: auto;
    padding: 12px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

#sidebarConversations,
#sidebarRooms,
#sidebarSettings {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* ========================================
   Additional styles for sidebar settings mode and models page
   Add these to the end of your existing styles.css
   ======================================== */

/* Sidebar settings links */
.sidebar-settings-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: var(--text-secondary, #aaa);
    text-decoration: none;
    font-size: 14px;
    border-bottom: 1px solid var(--border-color, #333);
    transition: background 0.15s, color 0.15s;
}

.sidebar-settings-link:hover {
    background: var(--bg-hover, #2a2a2a);
    color: var(--text-primary, #e0e0e0);
}

.sidebar-settings-link svg {
    flex-shrink: 0;
    opacity: 0.7;
}

/* Sidebar footer button (replaces the old link) */
.sidebar-footer-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    color: var(--text-secondary, #aaa);
    font-size: 13px;
    cursor: pointer;
    transition: color 0.15s;
}

.sidebar-footer-btn:hover {
    color: var(--text-primary, #e0e0e0);
}

/* Models page — disabled model card */
.model-disabled {
    opacity: 0.5;
}

/* Models page — toggle and delete buttons */
.model-toggle-btn,
.model-delete-btn {
    cursor: pointer;
}

.model-delete-btn:hover {
    opacity: 0.8;
}

/* Models page — add form */
.models-add-section {
    padding: 0 20px 16px;
}

.models-add-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: var(--bg-secondary, #1e1e1e);
    border-radius: 8px;
    border: 1px solid var(--border-color, #333);
}

.models-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-primary, #121212);
    border: 1px solid var(--border-color, #333);
    border-radius: 6px;
    color: var(--text-primary, #e0e0e0);
    font-size: 14px;
    font-family: 'Cabin', sans-serif;
    box-sizing: border-box;
}

.models-input:focus {
    outline: none;
    border-color: var(--accent, #c45c3e);
}

.models-input::placeholder {
    color: var(--text-secondary, #aaa);
    opacity: 0.6;
}

.models-add-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

/* ================================================================
   ATTACHMENTS
   ================================================================ */
/* ================================
   Attachments Panel (right side)
   ================================ */
.attachments-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--sidebar-width);
    height: 100dvh;
    background: var(--bg-surface);
    border-left: 1px solid var(--glass-border);
    z-index: 100;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    padding-top: env(safe-area-inset-top, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.attachments-panel.open {
    transform: translateX(0);
}

.attachments-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.attachments-panel-header h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.attachments-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

/* Section header (Uploads / Artifacts) */
.attachments-section {
    padding: 8px 0 12px;
}

.attachments-section-header {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 8px;
    margin-bottom: 4px;
}

/* Variant used for sections with a leading icon (all sections, currently).
   Flex layout so the icon and label align on the same baseline without
   fighting the parent's text transforms. */
.attachments-section-header.with-icon {
    display: flex;
    align-items: center;
    gap: 6px;
}

.attachments-section-header-icon {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    opacity: 0.8;
}

/* Individual chip — mirrors the in-message attachment capsule,
   but wider and with two-line info (filename + size · time) */
.attachments-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 16px);
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    box-shadow: none;
    box-sizing: border-box;
}

.attachments-chip:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
}

.attachments-chip-icon {
    display: flex;
    align-items: center;
    color: var(--accent);
    flex-shrink: 0;
    opacity: 0.8;
}

.attachments-chip-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.attachments-chip-name {
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    line-height: 1.3;
}

.attachments-chip-meta {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chip row — holds the pin button and the chip body as siblings.
   Pin and chip sit flush against each other, reading as one unified row
   rather than two separate rounded elements. */
.attachments-chip-row {
    display: flex;
    align-items: stretch;
}

.attachments-chip-row .attachments-chip {
    flex: 1;
    min-width: 0;
    width: auto;
    margin: 0;
}

/* Standalone pin/unpin button.
   Unpinned: subtle, low-contrast — an affordance that doesn't demand attention.
   Pinned: accent-coloured, filled — signals active state at a glance. */
.attachments-chip-pin {
    flex-shrink: 0;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    box-sizing: border-box;
}

.attachments-chip-pin:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--text-secondary);
}

.attachments-chip-pin.pinned {
    background: rgba(196, 92, 62, 0.12); /* accent tint */
    border-color: rgba(196, 92, 62, 0.3);
    color: var(--accent);
}

.attachments-chip-pin.pinned:hover {
    background: rgba(196, 92, 62, 0.18);
    border-color: rgba(196, 92, 62, 0.45);
    color: var(--accent-hover);
}

.attachments-chip-pin:disabled {
    opacity: 0.5;
    cursor: wait;
}

.attachments-chip-pin svg {
    width: 16px;
    height: 16px;
}

/* ==== Identity Section (diagnostic) ==== */

.identity-section {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.attachments-section-header.collapsible {
    cursor: pointer;
    user-select: none;
}

.attachments-section-header.collapsible:hover {
    color: var(--text-secondary);
}

.identity-chevron {
    display: flex;
    align-items: center;
    margin-left: auto;
    transition: transform 0.2s;
}

.identity-section.expanded .identity-chevron {
    transform: rotate(180deg);
}

.identity-channel-badge {
    flex-shrink: 0;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-sizing: border-box;
}

.identity-channel-badge.system {
    color: var(--accent);
    background: rgba(196, 92, 62, 0.08);
    border-color: rgba(196, 92, 62, 0.2);
}

.attachments-chip.identity-disabled {
    opacity: 0.4;
}

/* ================================
   Attachment Thumbnails (shared)
   ================================ */

/* Base thumbnail wrapper — handles loading, loaded, error states */
.attachment-thumb {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.attachment-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.2s;
}

.attachment-thumb.loading img {
    opacity: 0;
}

.attachment-thumb.loaded img {
    opacity: 1;
}

/* Loading shimmer */
.attachment-thumb.loading::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.02) 0%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0.02) 100%
    );
    background-size: 200% 100%;
    animation: thumb-shimmer 1.4s ease-in-out infinite;
}

@keyframes thumb-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Error fallback */
.attachment-thumb.error {
    background: rgba(196, 62, 62, 0.1);
    border: 1px solid rgba(196, 62, 62, 0.25);
}

.attachment-thumb-fallback {
    font-size: 11px;
    color: var(--text-muted);
    padding: 12px;
    text-align: center;
}

/* Inline size — used in message bubbles */
.attachment-thumb-inline {
    max-width: 100%;
    height: 120px;
    aspect-ratio: 4 / 3;
}

/* Tile size — used in the attachments panel grid */
.attachment-thumb-tile {
    width: 100%;
    aspect-ratio: 1 / 1;
}

/* ================================
   Attachments Panel — Image Grid
   ================================ */

.attachments-image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 0 8px 6px;
}

/* Tile — the clickable wrapper around the thumbnail */
.attachments-tile {
    position: relative;
    padding: 0;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
    box-shadow: none;
    font-family: inherit;
}

.attachments-tile:hover {
    border-color: rgba(255, 255, 255, 0.18);
}

.attachments-tile .attachment-thumb {
    border-radius: 0;
}

/* Corner pin button on image tiles.
   Absolute-positioned top-right with a dark circular backing so the paperclip
   stays legible against any image content. Accent-tinted when pinned. */
.attachments-tile-pin {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    z-index: 2;
    box-sizing: border-box;
}

.attachments-tile-pin:hover {
    background: rgba(0, 0, 0, 0.75);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.attachments-tile-pin.pinned {
    background: rgba(196, 92, 62, 0.85); /* solid accent, not tinted — stands out on any image */
    border-color: rgba(196, 92, 62, 0.95);
    color: #fff;
}

.attachments-tile-pin.pinned:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.attachments-tile-pin:disabled {
    opacity: 0.5;
    cursor: wait;
}

.attachments-tile-pin svg {
    width: 14px;
    height: 14px;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.sidebar-header h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.sidebar-close {
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    color: var(--text-secondary);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.sidebar-close:hover {
    background-color: var(--bg-surface);
    color: var(--text-primary);
}

.sidebar-new-btn {
    margin: 12px 12px 8px;
    padding: 10px 14px;
    background-color: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.sidebar-new-btn:hover {
    background-color: var(--bg-surface-hover);
    border-color: var(--border-light);
}

.sidebar-new-btn svg {
    flex-shrink: 0;
}

/* Conversation list */
.sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.sidebar-empty {
    padding: 20px 16px;
    color: var(--text-muted);
    font-size: 14px;
    text-align: center;
}

/* Individual conversation items */
.sidebar-item {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    border-width: 1px 0;
    border-style: solid;
    border-color: transparent;
    transition: background-color 0.15s;
    gap: 4px;
}

.sidebar-item:hover {
    background-color: var(--bg-surface);
}

.sidebar-item.active {
    background-color: var(--bg-surface);
    border-color: var(--border);
    margin-top: 4px;
    margin-bottom: 4px;
}

.sidebar-item-info {
    flex: 1;
    min-width: 0;
    cursor: pointer;
    padding: 2px 0;
}

.sidebar-item-title {
    font-size: 15px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.sidebar-item.active .sidebar-item-title {
    color: var(--accent);
}

.sidebar-item-date {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Action buttons on conversation items */
.sidebar-item-actions {
    display: flex;
    gap: 2px;
    opacity: 1;
    flex-shrink: 0;
}

.sidebar-action-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.sidebar-action-btn:hover {
    background-color: var(--bg-surface-hover);
    color: var(--text-primary);
}

.sidebar-action-delete:hover {
    color: var(--danger);
}

/* Inline rename input */
.sidebar-rename-input {
    width: 100%;
    padding: 2px 6px;
    font-size: 15px;
    font-family: inherit;
    background-color: var(--bg-surface);
    border: 1px solid var(--accent);
    border-radius: 4px;
    color: var(--text-primary);
    outline: none;
    box-sizing: border-box;
}

/* ================================================================
   CHAT & MESSAGES
   ================================================================ */
/* ================================
   Chat Interface
   ================================ */
.chat-wrapper {
    display: flex;
    flex-direction: column;
    height: calc(var(--app-height, 100svh) - var(--header-height) - env(safe-area-inset-top, 0px));
    margin-top: calc(var(--header-height) + env(safe-area-inset-top, 0px));
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    background: transparent;
}

.chat-header {
    padding: 12px 20px;
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    padding-left: calc(20px + env(safe-area-inset-left, 0px));
    padding-right: calc(20px + env(safe-area-inset-right, 0px));
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    height: calc(var(--header-height) + env(safe-area-inset-top, 0px));
    box-sizing: border-box;
    background: var(--bg-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
}

/* Header room name — centred identity */
.chat-header .header-room-name {
    margin: 0;
    font-size: 0.85em;
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Attachments toggle (right side of header, mirrors sidebar toggle) */
.attachments-toggle {
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    background: none;
    border: none;
    color: var(--text-secondary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    flex-shrink: 0;
}

.attachments-toggle:hover {
    background-color: var(--bg-surface);
    color: var(--text-primary);
}

/* Sidebar toggle (hamburger) */
.sidebar-toggle {
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    background: none;
    border: none;
    color: var(--text-secondary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    flex-shrink: 0;
}

.sidebar-toggle:hover {
    background-color: var(--bg-surface);
    color: var(--text-primary);
}

/* Message Thread */
.chat-thread {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/* ================================
   Jump-to-bottom button
   ================================
   Circular affordance floating above the composer. Visible only when the user
   has scrolled away from the bottom. During an active stream, the chevron
   swaps for a pulsing three-dot indicator (accent-coloured) as a quiet
   "activity below" signal. Click to return to the live view.
   Managed by js/scroll-to-bottom.js. */
.jump-to-bottom {
    position: absolute;
    bottom: calc(var(--composer-bottom-gap, 160px));
    left: 50%;
    transform: translate(-50%, 8px);
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease,
                background-color 0.15s, color 0.15s, border-color 0.15s;
    z-index: 20;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.jump-to-bottom.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.jump-to-bottom:hover {
    background: var(--border);
    color: var(--text-primary);
    border-color: var(--border-light);
}

/* Chevron vs dots: only one is shown at a time, toggled by .streaming */
.jump-to-bottom .jtb-chevron {
    display: block;
}
.jump-to-bottom .jtb-dots {
    display: none;
    gap: 3px;
    align-items: center;
}
.jump-to-bottom.streaming .jtb-chevron {
    display: none;
}
.jump-to-bottom.streaming .jtb-dots {
    display: flex;
}

.jump-to-bottom .jtb-dots span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.4;
    animation: jtb-dot-pulse 1.4s ease-in-out infinite;
}

.jump-to-bottom .jtb-dots span:nth-child(1) {
    animation-delay: 0ms;
}
.jump-to-bottom .jtb-dots span:nth-child(2) {
    animation-delay: 200ms;
}
.jump-to-bottom .jtb-dots span:nth-child(3) {
    animation-delay: 400ms;
}

@keyframes jtb-dot-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* ================================
   Incremental rendering wrappers
   ================================
   During streaming, .msg-content holds two children: a div that accumulates
   parsed Markdown blocks (committed) and a span that holds the in-progress
   block as plain text (tail). At stream end, both are replaced with a clean
   full-document parse via finalizeStreamedMessage — so these styles only
   apply during the live streaming window. */
.streaming-committed {
    /* Block-level container; children are paragraphs, headings, lists, etc.
       Each child keeps its natural bottom margin so completed blocks sit
       visually separated from whatever's currently rendering in the tail
       below. */
}

/* Streaming paragraph margins.
   Historically (Apr 26, 2026) this section overrode `.msg-text p:last-child`
   to keep the bottom margin on streaming paragraphs (committed's last <p> is
   followed by tail's first <p>; collapsing the margin caused a visible pop
   when the next paragraph completed). The override fought the global rule with
   identical specificity and required `!important` to win.
   Since (Aug 2026) the root cause is fixed at the source: the `:last-child`
   rules below scope to `.msg-content > p` — direct children only. Streaming
   paragraphs live at `.msg-content > .streaming-committed > p` (or `.streaming-tail`
   > p), so the `:last-child` rule doesn't reach into them, and the natural
   0.75em bottom margin from `.msg-assistant .msg-text p` applies during streaming.
   Finalised messages render paragraphs as direct children of `.msg-content`
   (via renderMarkdownInto), so the `:last-child` rule still trims the trailing
   margin where it should. No override needed. */

.streaming-tail {
    /* Block container for the in-progress Markdown block. Re-rendered each
       tick by createIncrementalRenderer so inline syntax (bold, italic, code,
       links) appears live as the closer arrives. Children are normal block
       elements (p, h1-6, ul, etc.) and handle their own wrapping. */
}

/* Per-line spans inside an in-progress streaming code block. The .line-current
   span holds plain text while the line is being typed; .line-committed holds
   Prism-highlighted HTML once the line completes. We don't need much styling
   here — the spans are inline by default, the surrounding <pre><code> handles
   font and whitespace, and the \n text nodes between spans produce the line
   breaks.
   The .line-current span is intentionally undecorated — inherits the default
   code text color rather than any token color. */

/* Individual Messages */
.chat-message {
    max-width: 85%;
    animation: fadeIn 0.2s ease-out;
}

.msg-user {
    align-self: flex-end;
}

.msg-assistant {
    align-self: flex-start;
    width: 100%;
    max-width: 100%;
}

.msg-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
    color: var(--accent);
}

.msg-user .msg-label {
    display: none;
}

.msg-assistant .msg-label {
    color: var(--accent);
}

.msg-content {
    /* Wrapper for message content inside the bubble */
}

.msg-text {
    padding: 12px 16px;
    border-radius: 8px;
    line-height: 1.6;
    font-size: 16px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.msg-user .msg-text {
    background: var(--green-tint);
    border: 1px solid rgba(58, 74, 58, 0.4);
    white-space: normal;
}

.msg-assistant .msg-text {
    background: var(--bg-surface);
    border: 1px solid var(--glass-border);
    white-space: normal;
}

/* ================================
   Inline Image Strip in Messages
   ================================ */

.msg-image-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    max-width: 100%;
}

.msg-image-strip .attachment-thumb {
    flex: 0 1 auto;
    min-width: 120px;
    max-width: 280px;
}

/* Single image gets to use more width */
.msg-image-strip .attachment-thumb:only-child {
    max-width: 100%;
    height: 180px;
}

/* ================================
   Markdown Content (inside messages)
   ================================ */
.msg-assistant .msg-text p {
    margin: 0 0 0.75em;
    line-height: 1.6;
}

/* Direct-child scope (`>`) is load-bearing: keeps this rule from reaching into
   streaming wrappers (.streaming-committed, .streaming-tail) where the last <p>
   is not the conceptual last paragraph of the message. See the streaming
   wrappers comment block above for the full picture. */
.msg-assistant .msg-text .msg-content > p:last-child {
    margin-bottom: 0;
}

.msg-assistant .msg-text strong {
    font-weight: 600;
    color: var(--text-primary);
}

.msg-assistant .msg-text em {
    font-style: italic;
    color: var(--text-secondary);
}

/* User message markdown styles */
.msg-user .msg-text p {
    margin: 0 0 0.75em;
    line-height: 1.6;
}

/* Same direct-child scoping as the assistant rule above. User messages don't
   currently render through the incremental streaming pipeline, but keeping the
   rules symmetric prevents future surprises. */
.msg-user .msg-text .msg-content > p:last-child {
    margin-bottom: 0;
}

.msg-user .msg-text em {
    font-style: italic;
    color: rgba(255, 255, 255, 0.55);
}

.msg-assistant .msg-text h1,
.msg-assistant .msg-text h2,
.msg-assistant .msg-text h3,
.msg-assistant .msg-text h4 {
    margin: 1em 0 0.5em;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.msg-assistant .msg-text h1:first-child,
.msg-assistant .msg-text h2:first-child,
.msg-assistant .msg-text h3:first-child,
.msg-assistant .msg-text h4:first-child {
    margin-top: 0;
}

.msg-assistant .msg-text h1 { font-size: 1.2em; }
.msg-assistant .msg-text h2 { font-size: 1.1em; }
.msg-assistant .msg-text h3 { font-size: 1.05em; }
.msg-assistant .msg-text h4 { font-size: 1em; }

.msg-assistant .msg-text ul,
.msg-assistant .msg-text ol {
    margin: 0.5em 0;
    padding-left: 1.5em;
}

.msg-assistant .msg-text li {
    margin-bottom: 0.3em;
    line-height: 1.5;
}

.msg-assistant .msg-text li:last-child {
    margin-bottom: 0;
}

.msg-text code {
    background-color: var(--bg-primary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
    color: var(--accent);
}

.msg-text pre {
    background-color: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0.75em 0;
    overflow-x: auto;
    max-width: 100%;
    box-sizing: border-box;
}

.msg-text pre code {
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: 0.85em;
    color: var(--text-primary);
    line-height: 1.5;
}

.msg-assistant .msg-text blockquote {
    border-left: 3px solid var(--accent);
    margin: 0.75em 0;
    padding: 0.25em 0 0.25em 1em;
    color: var(--text-secondary);
}

.msg-assistant .msg-text a {
    color: var(--accent);
    text-decoration: none;
}

.msg-assistant .msg-text a:hover {
    text-decoration: underline;
}

.msg-assistant .msg-text hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1em 0;
}

/* Thinking Indicator */
.thinking-dots {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
}

.thinking-dots span {
    animation: blink 1.4s infinite both;
    font-size: 21px;
    line-height: 1;
    color: var(--accent);
}

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

.thinking-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes blink {
    0%, 80%, 100% { opacity: 0.2; }
    40% { opacity: 1; }
}

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

/* Input Area — legacy rules kept for the .attachment-preview strip to still work.
   The composer and its textarea are styled in the dedicated composer section
   near the bottom of the file. */
.chat-input-area {
    padding: 12px 20px 20px;
    /*padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));*/
    flex-shrink: 0;
}

/* ================================
   Message Actions (timestamp + copy/edit/regenerate)
   ================================ */
.msg-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    padding-top: 2px;
    min-height: 24px;
}

.msg-time {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.msg-actions-buttons {
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s;
}

.msg-text:hover .msg-actions-buttons {
    opacity: 1;
}

.msg-action-btn {
    width: 26px;
    height: 26px;
    padding: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.msg-action-btn:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
}

.msg-action-success {
    color: var(--success);
}

/* Edit mode UI */
.msg-edit-textarea {
    width: 100%;
    padding: 10px 12px;
    background-color: var(--bg-surface);
    border: 1px solid var(--accent);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 15px;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
    margin-top: 4px;
}

.msg-edit-textarea:focus {
    outline: none;
    border-color: var(--accent-hover);
}

.msg-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.msg-edit-cancel {
    padding: 6px 14px;
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.msg-edit-cancel:hover {
    background-color: var(--bg-surface-hover);
    color: var(--text-primary);
}

.msg-edit-save {
    padding: 6px 14px;
    background-color: var(--accent);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s;
}

.msg-edit-save:hover {
    background-color: var(--accent-hover);
}

/* Edit mode: expand user message to assistant width */
.msg-user:has(.msg-edit-textarea) {
    max-width: 85%;
    width: 85%;
    align-self: flex-start;
}

/* ========================================
   Thinking Block (inside messages)
   ======================================== */
.thinking-block {
    margin-bottom: 12px;
    border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.08));
    padding-bottom: 4px;
}

.thinking-header {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    color: var(--text-secondary, #888);
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    text-align: left;
    transition: color 0.2s ease;
}

.thinking-header:hover {
    color: var(--text-primary, #eee);
}

.thinking-label {
    flex: 1;
}

.thinking-chevron {
    transition: transform 0.2s ease;
}

.thinking-header.collapsed .thinking-chevron {
    transform: rotate(-90deg);
}

.thinking-streaming .thinking-header .thinking-label::after {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    background: var(--accent, #c45c3e);
    border-radius: 50%;
    margin-left: 6px;
    animation: thinkingPulse 1s ease-in-out infinite;
    vertical-align: middle;
}

@keyframes thinkingPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.thinking-complete .thinking-header .thinking-label {
    color: var(--text-secondary, #888);
}

.thinking-complete .thinking-header .thinking-label::after {
    display: none;
}

.thinking-content {
    padding: 0 12px 10px 12px;
}

.thinking-text {
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary, #888);
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ================================
   Tool Blocks
   ================================ */
/* Collapsible blocks for tool calls in the chat thread.
   Three states: in-progress, collapsed (default after completion), expanded.
   Matches the thinking block aesthetic — frosted glass, muted, unobtrusive. */

.tool-block {
    margin: 8px 0;
    border-radius: 8px;
    background: var(--glass-bg, rgba(255,255,255,0.04));
    border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
    overflow: hidden;
    font-size: 12px;
}

.tool-block-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    cursor: pointer;
    color: var(--text-secondary, #888);
    transition: color 0.2s ease;
    user-select: none;
}

.tool-block-header:hover {
    color: var(--text-primary, #eee);
}

.tool-block-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0.7;
}

.tool-block-name {
    font-weight: 500;
    white-space: nowrap;
}

.tool-block-hint {
    color: var(--text-secondary, #888);
    opacity: 0.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.tool-block-summary {
    flex: 1;
    text-align: right;
    color: var(--text-secondary, #888);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tool-block-chevron {
    flex-shrink: 0;
    font-size: 10px;
    transition: transform 0.15s ease;
    opacity: 0.5;
}

/* In-progress state — pulsing dot after the tool name */
.tool-block.in-progress .tool-block-name::after {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    background: var(--accent, #c45c3e);
    border-radius: 50%;
    margin-left: 6px;
    animation: thinkingPulse 1s ease-in-out infinite;
    vertical-align: middle;
}

.tool-block.in-progress .tool-block-chevron {
    display: none;
}

.tool-block.in-progress .tool-block-summary {
    display: none;
}

/* Expanded state */
.tool-block.expanded .tool-block-chevron {
    transform: rotate(90deg);
}

/* Detail section — hidden by default, toggled by JS */
.tool-block-detail {
    padding: 0 12px 10px 12px;
    border-top: 1px solid var(--glass-border, rgba(255,255,255,0.06));
}

.tool-block-detail pre {
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-secondary, #888);
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 8px 0 0 0;
    padding: 0;
    background: none;
    border: none;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
}

.tool-block-args {
    margin-bottom: 6px;
}

.tool-block-result {
    border-top: 1px solid var(--glass-border, rgba(255,255,255,0.04));
    padding-top: 6px;
}

.tool-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 0.85rem;
    transition: background 0.15s;
}

.tool-file-chip:hover {
    background: var(--border);
}

.tool-file-chip svg {
    opacity: 0.6;
    flex-shrink: 0;
}

/* Image gen thumbnails inside tool blocks */
.tool-image-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.tool-image-label {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
}

.tool-image-error {
    font-size: 12px;
    color: var(--text-muted);
    padding: 4px 0;
}

/* ================================
   Delete Confirmation Modal
   ================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.modal-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.modal {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 24px;
    max-width: 340px;
    width: 90%;
    animation: fadeIn 0.2s ease-out;
}

.modal p {
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-primary);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.modal-cancel {
    padding: 8px 16px;
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.modal-cancel:hover {
    background-color: var(--bg-surface-hover);
    color: var(--text-primary);
}

.modal-confirm {
    padding: 8px 16px;
    background-color: var(--danger);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s;
}

.modal-confirm:hover {
    background-color: var(--danger-hover);
}

/* ================================================================
   COMPOSER & INPUT
   ================================================================ */
/* ================================
   File Upload Styles (legacy .attach-btn
   positioning rules removed — .attach-btn
   now lives inside .composer, styled by
   .composer-btn in the composer section)
   ================================ */

/* Attachment preview strip above the textarea */
.attachment-preview {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 20px 8px;
    width: 100%;
    box-sizing: border-box;
}

/* Individual attachment chip */
.attachment-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    font-size: 13px;
    max-width: 240px;
    transition: border-color 0.2s;
}

.attachment-chip:has([data-uploading="true"]) {
    opacity: 0.6;
}

.attachment-icon {
    display: flex;
    align-items: center;
    color: var(--accent);
    flex-shrink: 0;
}

.attachment-name {
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.attachment-size {
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 12px;
}

.attachment-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.2s, background 0.2s;
}

.attachment-remove:hover {
    color: var(--danger);
    background: rgba(196, 62, 62, 0.15);
}

@keyframes upload-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.attachment-chip.uploading {
    animation: upload-pulse 1.5s ease-in-out infinite;
}

/* Attachment chips on sent messages */
.msg-attachment-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.msg-attachment-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 12px;
    color: var(--text-secondary);
}

.msg-attachment-chip svg {
    flex-shrink: 0;
    opacity: 0.6;
}

.msg-attachment-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.msg-attachment-size {
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 11px;
}

/* ================================
   Mobile Adjustments
   ================================ */
@media (max-width: 768px) {
    .attachment-preview {
        padding: 0 12px 8px;
    }

    .attachment-chip {
        max-width: 200px;
    }

    .attachment-name {
        max-width: 100px;
    }
}

/* ================================
   Legacy container (kept for any
   pages still using old layout)
   ================================ */
.container {
    max-width: 700px;
    margin: 60px auto;
    padding: 20px;
}

.container h1 {
    margin-bottom: 30px;
    font-size: 1.8em;
}

.container button {
    padding: 12px 28px;
    font-size: 17px;
    margin-top: 0;
}

#response {
    margin-top: 30px;
    padding: 20px;
    background: var(--bg-surface);
    border-radius: 6px;
    border: 1px solid var(--border);
    white-space: pre-wrap;
    line-height: 1.6;
    min-height: 60px;
}

/* ================================
   Composer (Phase 7 — two-row layout)
   ================================ */

/* Composer shell — the rounded container holding both rows */
.composer {
    background: var(--bg-surface);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 8px 8px 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color 0.15s;
}

.composer:focus-within {
    border-color: var(--border-light);
}

/* Textarea inside the composer — extra-specific to beat legacy textarea rules */
.composer .composer-textarea {
    /*flex: 1;*/
    margin: 0;
    min-height: 24px;
    max-height: 200px;
    padding: 8px 8px 4px 0;
    background: transparent;
    background-color: transparent;
    border: none;
    border-radius: 0;
    width: 100%;
    color: var(--text-primary);
    font-size: 16px;
    font-family: inherit;
    resize: none;
    line-height: 1.5;
    overflow-y: auto;
    box-sizing: border-box;
    box-shadow: none;
}

.composer .composer-textarea:focus {
    outline: none;
    border: none;
    box-shadow: none;
}

/* Action row — buttons below the textarea */
.composer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.composer-actions-left {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative; /* anchor for sparkles popover */
}

/* Base composer button — used by attach, sparkles, and send */
.composer .composer-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    margin: 0;
    position: static;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    background-color: var(--bg-primary);
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    flex-shrink: 0;
    box-shadow: none;
    z-index: auto;
}

.composer .composer-btn:hover {
    background-color: var(--border);
    color: var(--text-primary);
}

.composer .composer-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.composer .composer-btn:disabled:hover {
    background: transparent;
    color: var(--text-secondary);
}

.composer .composer-btn svg {
    width: 18px;
    height: 18px;
}

/* Send button — accent background to stand out */
.composer .composer-btn-send {
    background-color: var(--accent);
    color: white;
}

.composer .composer-btn-send:hover {
    background-color: var(--accent-hover);
    color: white;
}

/* Send vs Stop icon swap. Mirrors the chevron/dots pattern on jump-to-bottom:
   one button, two states, toggled by the .streaming class which is added/removed
   from streaming.js alongside the isStreaming global. */
.composer .composer-btn-send .send-icon {
    display: block;
}
.composer .composer-btn-send .stop-icon {
    display: none;
}
.composer .composer-btn-send.streaming .send-icon {
    display: none;
}
.composer .composer-btn-send.streaming .stop-icon {
    display: block;
}

/* Streaming state: a touch quieter than full accent so it reads as "active,
   tap to halt" rather than "primary call to action." Keeps it on-brand without
   competing with itself when paired with the streaming pulse on jump-to-bottom. */
.composer .composer-btn-send.streaming {
    background-color: var(--bg-surface);
    border: 1px solid var(--accent);
    color: var(--accent);
}
.composer .composer-btn-send.streaming:hover {
    background-color: var(--accent);
    color: white;
}

/* ================================
   Model Selector (in composer)
   ================================ */
.model-selector {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Pill button — lives in the composer, next to attach/sparkles */
.model-pill {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 34px;
    padding: 0 10px;
    background: var(--bg-surface);
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    white-space: nowrap;
    box-shadow: none;
}

.model-pill:hover {
    background-color: var(--border);
    color: var(--text-primary);
}

.model-pill svg {
    flex-shrink: 0;
    opacity: 0.7;
}

/* Reasoning indicator — default muted, accent when active.
   Uses svg.class to beat the .model-pill svg { opacity: 0.7 } rule above. */
svg.model-pill-reasoning-icon {
    color: var(--text-muted);
    opacity: 0.5;
    transition: color 0.15s, opacity 0.15s;
}

.model-pill.reasoning-active svg.model-pill-reasoning-icon {
    color: var(--accent);
    opacity: 1;
}

/* Popover — opens above the pill (composer sits at the bottom of the viewport) */
.model-dropdown {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    max-height: 400px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    z-index: 60;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.15s, transform 0.15s;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Scrollable list of models */
.model-dropdown-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
    min-height: 0;
}

/* Fixed footer — reasoning toggle always visible */
.model-dropdown-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    padding: 6px;
    background: var(--bg-surface);
}

.model-dropdown.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.model-dropdown-provider {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 8px 10px 4px;
}

.model-dropdown-provider:first-child {
    padding-top: 4px;
}

.model-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.15s;
}

.model-dropdown-item:hover {
    background-color: var(--bg-surface-hover);
}

.model-dropdown-item.active {
    color: var(--accent);
}

.model-dropdown-check {
    display: flex;
    align-items: center;
    color: var(--accent);
}

.model-dropdown-reasoning {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.15s;
}

.model-dropdown-reasoning:hover {
    background-color: var(--bg-surface-hover);
}

.model-dropdown-reasoning.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.model-dropdown-reasoning.disabled:hover {
    background-color: transparent;
}

.model-dropdown-reasoning-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.model-dropdown-reasoning-label svg {
    flex-shrink: 0;
    color: var(--text-secondary);
}

.model-dropdown-reasoning.active .model-dropdown-reasoning-label svg {
    color: var(--accent);
}

/* iOS-style toggle switch */
.reasoning-switch {
    position: relative;
    width: 32px;
    height: 18px;
    background: var(--border);
    border-radius: 9px;
    transition: background-color 0.15s;
    flex-shrink: 0;
}

.reasoning-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: var(--text-secondary);
    border-radius: 50%;
    transition: transform 0.15s, background-color 0.15s;
}

.model-dropdown-reasoning.active .reasoning-switch {
    background: rgba(196, 92, 62, 0.3);
}

.model-dropdown-reasoning.active .reasoning-switch::after {
    transform: translateX(14px);
    background: var(--accent);
}

/* ================================
   Sparkles Popover (Phase 8)
   ================================ */

.sparkles-popover {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    min-width: 260px;
    max-width: 340px;
    max-height: 400px;
    overflow-y: auto;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 6px;
    z-index: 60;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    animation: sparklesPopoverIn 0.12s ease-out;
}

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

.sparkles-popover-header {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 8px 10px 4px;
}

.sparkles-popover-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s;
    box-shadow: none;
}

.sparkles-popover-item:hover {
    background-color: var(--bg-surface-hover);
}

.sparkles-popover-item-icon {
    flex-shrink: 0;
    color: var(--accent);
    margin-top: 2px;
}

.sparkles-popover-item-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sparkles-popover-item-name {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.3;
}

.sparkles-popover-item-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sparkles-popover-loading {
    padding: 16px 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.sparkles-popover-empty {
    padding: 16px 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.sparkles-popover-empty-link {
    display: block;
    margin-top: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 12px;
    transition: color 0.15s;
}

.sparkles-popover-empty-link:hover {
    color: var(--accent);
}

/* ================================
   Drag-over state for file drop
   ================================ */

.chat-wrapper {
    position: relative;
}

.chat-wrapper.dragging-over::after {
    content: 'Drop files to upload';
    position: absolute;
    inset: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(196, 92, 62, 0.08);
    border: 2px dashed var(--accent);
    border-radius: 12px;
    color: var(--accent);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.02em;
    pointer-events: none;
    z-index: 40;
    animation: fadeIn 0.15s ease-out;
}

/* ================================================================
   OVERLAYS & MODALS
   ================================================================ */
/* ================================
   Overlay Primitive (shared base for previews)
   ================================ */

.preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    padding: 20px;
    box-sizing: border-box;
}

.preview-overlay.visible {
    opacity: 1;
}

.preview-overlay-content {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ================================
   Image Lightbox
   ================================ */

.lightbox-image {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-img {
    max-width: 100%;
    max-height: calc(100dvh - 40px);
    display: block;
    border-radius: 8px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
    object-fit: contain;
}

.lightbox-loader {
    position: absolute;
    color: var(--text-muted);
    font-size: 14px;
    padding: 20px;
}

/* Actions — close + download, top right */
.lightbox-actions {
    position: fixed;
    top: 16px;
    right: 16px;
    display: flex;
    gap: 8px;
    z-index: 10;
}

.lightbox-action-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    text-decoration: none;
    padding: 0;
}

.lightbox-action-btn:hover {
    background: rgba(0, 0, 0, 0.75);
    border-color: rgba(255, 255, 255, 0.25);
}

/* ================================
   Text / Markdown Preview Modal
   ================================ */

.text-preview {
    background: var(--bg-surface);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    width: 100%;
    max-width: 820px;
    max-height: calc(100dvh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
}

.text-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.15);
}

.text-preview-title {
    font-size: 14px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.text-preview-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* View toggle (Rendered / Raw) */
.text-preview-view-toggle {
    display: flex;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    padding: 2px;
}

.text-preview-view-btn {
    padding: 4px 10px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    font-family: inherit;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.text-preview-view-btn:hover {
    color: var(--text-secondary);
}

.text-preview-view-btn.active {
    background: var(--bg-surface-hover);
    color: var(--text-primary);
}

/* Action buttons (download, close) */
.text-preview-action-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    text-decoration: none;
    padding: 0;
}

.text-preview-action-btn:hover {
    background-color: var(--bg-surface-hover);
    color: var(--text-primary);
}

/* Body */
.text-preview-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    min-height: 0;
}

/* Loading / error states */
.text-preview-loading,
.text-preview-error {
    padding: 40px 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

.text-preview-error {
    color: var(--danger);
}

/* Raw view */
.text-preview-raw {
    margin: 0;
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', Courier, monospace;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Rendered markdown — inherit from existing .msg-text styles but scoped */
.text-preview-rendered {
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 15px;
}

.text-preview-rendered p {
    margin: 0 0 0.75em;
}

.text-preview-rendered p:last-child {
    margin-bottom: 0;
}

.text-preview-rendered h1,
.text-preview-rendered h2,
.text-preview-rendered h3,
.text-preview-rendered h4 {
    margin: 1em 0 0.5em;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.text-preview-rendered h1:first-child,
.text-preview-rendered h2:first-child,
.text-preview-rendered h3:first-child,
.text-preview-rendered h4:first-child {
    margin-top: 0;
}

.text-preview-rendered h1 { font-size: 1.4em; }
.text-preview-rendered h2 { font-size: 1.25em; }
.text-preview-rendered h3 { font-size: 1.1em; }
.text-preview-rendered h4 { font-size: 1em; }

.text-preview-rendered strong {
    font-weight: 600;
    color: var(--text-primary);
}

.text-preview-rendered em {
    font-style: italic;
    color: var(--text-secondary);
}

.text-preview-rendered ul,
.text-preview-rendered ol {
    margin: 0.5em 0;
    padding-left: 1.5em;
}

.text-preview-rendered li {
    margin-bottom: 0.3em;
    line-height: 1.5;
}

.text-preview-rendered li:last-child {
    margin-bottom: 0;
}

.text-preview-rendered code {
    background-color: var(--bg-primary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', Courier, monospace;
    font-size: 0.9em;
    color: var(--accent);
}

.text-preview-rendered blockquote {
    border-left: 3px solid var(--accent);
    margin: 0.75em 0;
    padding: 0.25em 0 0.25em 1em;
    color: var(--text-secondary);
}

.text-preview-rendered a {
    color: var(--accent);
    text-decoration: none;
}

.text-preview-rendered a:hover {
    text-decoration: underline;
}

.text-preview-rendered hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1em 0;
}

/* ================================================================
   CODE BLOCKS & SYNTAX THEME
   ================================================================ */
/* ================================
   Code Blocks (enhanced container)
   ================================ */

.code-block {
    position: relative;
    background: #2d353b; /* Everforest bg0 */
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    margin: 0.75em 0;
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
}

.code-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px 6px 14px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.code-block-lang {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #859289; /* Everforest grey1 */
}

.code-block-actions {
    display: flex;
    gap: 2px;
}

.code-block-btn {
    width: 26px;
    height: 26px;
    padding: 0;
    background: none;
    border: none;
    color: #859289;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    opacity: 0.7;
}

.code-block-btn:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: #d3c6aa; /* Everforest fg */
    opacity: 1;
}

.code-block-btn.success {
    color: #a7c080; /* Everforest green */
    opacity: 1;
}

/* The actual <pre> inside the code-block wrapper */
.code-block pre {
    margin: 0 !important;
    padding: 12px 16px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow-x: auto;
    max-width: 100%;
    box-sizing: border-box;
}

.code-block pre code {
    background: transparent !important;
    padding: 0 !important;
    font-size: 0.85em;
    color: #d3c6aa; /* Everforest fg */
    line-height: 1.6;
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', Courier, monospace;
}

/* Wrapped mode — break long lines inside the block */
.code-block.wrapped pre {
    overflow-x: hidden;
}

.code-block.wrapped pre code {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Scrollbar inside the pre (horizontal) */
.code-block pre::-webkit-scrollbar {
    height: 6px;
}

.code-block pre::-webkit-scrollbar-track {
    background: transparent;
}

.code-block pre::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
}

.code-block pre::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.16);
}

/* ================================
   Everforest Syntax Theme (Prism tokens)
   ================================ */

.code-block .token.comment,
.code-block .token.prolog,
.code-block .token.doctype,
.code-block .token.cdata {
    color: #859289; /* grey1 */
    font-style: italic;
}

.code-block .token.punctuation {
    color: #d3c6aa; /* fg */
}

.code-block .token.namespace {
    opacity: 0.7;
}

.code-block .token.property,
.code-block .token.tag,
.code-block .token.boolean,
.code-block .token.number,
.code-block .token.constant,
.code-block .token.symbol,
.code-block .token.deleted {
    color: #d699b6; /* purple */
}

.code-block .token.selector,
.code-block .token.attr-name,
.code-block .token.string,
.code-block .token.char,
.code-block .token.builtin,
.code-block .token.inserted {
    color: #a7c080; /* green */
}

.code-block .token.operator,
.code-block .token.entity,
.code-block .token.url,
.code-block .language-css .token.string,
.code-block .style .token.string {
    color: #e69875; /* orange */
}

.code-block .token.atrule,
.code-block .token.attr-value,
.code-block .token.keyword {
    color: #e67e80; /* red */
}

.code-block .token.function,
.code-block .token.class-name {
    color: #7fbbb3; /* blue */
}

.code-block .token.regex,
.code-block .token.important,
.code-block .token.variable {
    color: #dbbc7f; /* yellow */
}

.code-block .token.important,
.code-block .token.bold {
    font-weight: 600;
}

.code-block .token.italic {
    font-style: italic;
}

/* ================================
   Everforest — Markdown-specific tokens
   ================================ */

.code-block .token.title,
.code-block .token.title .token.punctuation {
    color: #e67e80; /* red */
    font-weight: 600;
}

.code-block .token.bold .token.content {
    color: #dbbc7f; /* yellow */
}

.code-block .token.bold .token.punctuation {
    color: #859289; /* grey1 — dimmer for the ** markers */
}

.code-block .token.italic .token.content {
    color: #d699b6; /* purple */
}

.code-block .token.italic .token.punctuation {
    color: #859289;
}

.code-block .token.url,
.code-block .token.url .token.content {
    color: #7fbbb3; /* blue */
    text-decoration: underline;
}

.code-block .token.url .token.url,
.code-block .token.url .token.string {
    color: #a7c080; /* green for the actual URL */
    text-decoration: none;
}

.code-block .token.list.punctuation {
    color: #e69875; /* orange for - * bullets */
}

.code-block .token.hr.punctuation {
    color: #859289;
}

/* ================================
   Inline code (unchanged styling, just scoped)
   ================================ */
/* This is handled by the existing .msg-text code rule — no change needed */

/* ================================================================
   SETTINGS PAGES
   ================================================================ */
/* ================================
   Documents Page
   ================================ */
.docs-wrapper {
    max-width: 700px;
    margin: 0 auto;
    padding: 20px;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.docs-header {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.docs-header h1 {
    margin: 0;
    font-size: 1.2em;
    font-weight: 500;
}

.docs-back {
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    background: none;
    border: none;
    color: var(--text-secondary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    flex-shrink: 0;
}

.docs-back:hover {
    background-color: var(--bg-surface);
    color: var(--text-primary);
}

.docs-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.docs-section-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    padding: 8px 0 4px;
    margin-top: 8px;
}

.docs-section-label:first-child {
    margin-top: 0;
}

.doc-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    transition: border-color 0.15s;
    margin-bottom: 8px;
}

.doc-card:hover {
    border-color: var(--border-light);
}

.doc-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.doc-card-info {
    flex: 1;
    min-width: 0;
}

.doc-card-name {
    font-size: 16px;
    font-weight: 500;
    color: var(--accent);
    margin-bottom: 4px;
}

.doc-card-meta {
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.doc-card-usage {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
}

.doc-card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.doc-upload-label {
    padding: 7px 14px;
    background-color: var(--bg-surface-hover);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.doc-upload-label:hover {
    background-color: var(--border);
    border-color: var(--border-light);
}

.doc-upload-label.model-delete-btn {
    color: var(--danger);
}

.doc-upload-label input[type="file"] {
    display: none;
}

.doc-upload-label svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.doc-status {
    font-size: 13px;
    color: var(--text-muted);
    transition: color 0.2s;
}

.doc-status.success {
    color: var(--success);
}

.doc-status.error {
    color: var(--danger);
}

.docs-footer {
    padding: 20px 0;
    text-align: center;
}

.docs-return-btn {
    padding: 10px 20px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.docs-return-btn:hover {
    background-color: var(--bg-surface-hover);
    border-color: var(--border-light);
    color: var(--text-primary);
}

.docs-loading {
    text-align: center;
    padding: 40px 0;
    color: var(--text-muted);
    font-size: 15px;
}

/* ========================================
   Functions / Document Forms (shared)
   ======================================== */

.fn-form {
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 8px;
}

.fn-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fn-form-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.fn-form-input,
.fn-form-textarea {
    width: 100%;
    padding: 10px 12px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 15px;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.fn-form-input:focus,
.fn-form-textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.fn-form-textarea {
    resize: vertical;
    min-height: 140px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.5;
}

.fn-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    align-items: center;
}

.fn-form-error {
    color: var(--danger);
    font-size: 13px;
    margin-right: auto;
}

.fn-btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.fn-btn-save {
    background-color: var(--accent);
    border: none;
    color: white;
}

.fn-btn-save:hover {
    background-color: var(--accent-hover);
}

.fn-btn-cancel {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.fn-btn-cancel:hover {
    background-color: var(--bg-surface-hover);
    color: var(--text-primary);
    border-color: var(--border-light);
}

.fn-btn-edit,
.fn-btn-delete {
    padding: 7px 14px;
    background-color: var(--bg-surface-hover);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.fn-btn-edit:hover {
    background-color: var(--border);
    border-color: var(--border-light);
}

.fn-btn-delete:hover {
    background-color: rgba(196, 62, 62, 0.15);
    border-color: var(--danger);
    color: var(--danger);
}

.fn-confirm-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background-color: var(--bg-surface);
    border: 1px solid var(--danger);
    border-radius: 12px;
}

.fn-confirm-text {
    flex: 1;
    font-size: 14px;
    color: var(--text-primary);
}

.fn-confirm-text strong {
    color: var(--accent);
}

.fn-btn-confirm-delete {
    padding: 7px 14px;
    background-color: var(--danger);
    border: none;
    color: white;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.15s;
}

.fn-btn-confirm-delete:hover {
    background-color: var(--danger-hover);
}

.fn-add-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    margin-top: 4px;
}

.fn-add-btn:hover {
    background-color: var(--bg-surface-hover);
    border-color: var(--border-light);
}

.fn-empty {
    padding: 20px 0;
    color: var(--text-muted);
    font-size: 14px;
    text-align: center;
}

.fn-card-name {
    font-size: 16px;
    font-weight: 500;
    color: var(--accent);
    margin-bottom: 6px;
}

.fn-card-description {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 14px;
}

.fn-card-name:last-child {
    margin-bottom: 14px;
}

/* ================================================================
   ROOM SETTINGS
   ================================================================ */
/* ========================================
   Room Settings
   ======================================== */

.settings-section {
    margin-bottom: 32px;
}

.settings-section-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    padding-bottom: 8px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.settings-field {
    margin-bottom: 16px;
}

.settings-label {
    display: block;
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.settings-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 15px;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.settings-input:focus {
    outline: none;
    border-color: var(--accent);
}

.settings-input::placeholder {
    color: var(--text-muted);
}

.settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 12px;
    transition: border-color 0.15s;
}

.settings-toggle-row:hover {
    border-color: var(--border-light);
}

.settings-toggle-info {
    flex: 1;
    min-width: 0;
    margin-right: 16px;
}

.settings-toggle-name {
    font-size: 15px;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.settings-toggle-desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
}

.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: var(--bg-surface-hover);
    border: 1px solid var(--border);
    border-radius: 24px;
    transition: background-color 0.2s, border-color 0.2s;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: var(--text-secondary);
    border-radius: 50%;
    transition: transform 0.2s, background-color 0.2s;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: rgba(196, 92, 62, 0.2);
    border-color: var(--accent);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
    background-color: var(--accent);
}

.settings-doc-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 8px;
    transition: border-color 0.15s;
    gap: 12px;
}

.settings-doc-card:hover {
    border-color: var(--border-light);
}

.settings-doc-card.disabled {
    opacity: 0.5;
}

.settings-doc-info {
    flex: 1;
    min-width: 0;
}

.settings-doc-name {
    font-size: 15px;
    color: var(--accent);
    margin-bottom: 2px;
}

.settings-doc-meta {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.settings-doc-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.save-status {
    font-size: 13px;
    color: var(--text-muted);
    transition: color 0.2s;
    min-height: 20px;
    margin-top: 4px;
}

.save-status.saving {
    color: var(--text-secondary);
}

.save-status.saved {
    color: var(--success);
}

.save-status.error {
    color: var(--danger);
}

.doc-delete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.doc-delete-btn:hover {
    color: var(--danger);
    border-color: var(--danger);
    background-color: rgba(196, 62, 62, 0.08);
}

.arrival-lock-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}

.arrival-lock-icon {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    transition: color 0.15s;
}

.arrival-lock-row:has(input:checked) .arrival-lock-icon:last-child {
    color: var(--accent);
}

.settings-room-id {
    font-size: 11px;
    color: var(--text-muted);
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
    padding: 16px 0 8px;
    border-top: 1px solid var(--border);
    margin-top: 16px;
}

.colour-picker-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.colour-swatch {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--border);
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.colour-swatch input[type="color"] {
    position: absolute;
    inset: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    border: none;
    cursor: pointer;
    background: none;
    padding: 0;
}

.colour-hex-input {
    width: 120px;
    padding: 10px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 15px;
    font-family: 'Courier New', Courier, monospace;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.colour-hex-input:focus {
    outline: none;
    border-color: var(--accent);
}

.colour-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
}

.colour-preview-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.bg-image-preview {
    width: 100%;
    height: 80px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background-size: cover;
    background-position: center;
    background-color: var(--bg-surface);
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 13px;
}

.bg-image-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.bg-clear-btn {
    padding: 6px 12px;
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.bg-clear-btn:hover {
    background-color: var(--bg-surface-hover);
    color: var(--text-primary);
}

.bg-clear-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.bg-clear-btn:disabled:hover {
    background-color: transparent;
    color: var(--text-secondary);
}

.image-upload-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.profile-preview {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background-color: var(--bg-surface);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.image-preview-empty {
    font-size: 12px;
    color: var(--text-muted);
}

.image-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.image-upload-btn:hover {
    background-color: var(--bg-surface-hover);
    border-color: var(--border-light);
}

.docs-footer {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.settings-manage-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s;
}

.settings-manage-link:hover {
    color: var(--accent);
}

.settings-functions-empty {
    padding: 16px;
    background: var(--bg-surface);
    border: 1px dashed var(--border);
    border-radius: 12px;
    color: var(--text-muted);
    font-size: 14px;
    text-align: center;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
/* ================================
   Responsive — Mobile (max-width: 600px)
   ================================ */
@media (max-width: 600px) {
    /* Layout */
    .sidebar { width: 85vw; }
    .attachments-panel { width: 85vw; }
    .chat-header h1 { font-size: 1.1em; }

    /* Chat */
    .chat-thread { padding: 16px 12px; }
    .chat-input-area { padding: 10px 12px 24px; }
    .chat-message { max-width: 92%; }
    .msg-assistant { width: 100%; max-width: 100%; }
    .msg-actions-buttons { opacity: 1; }
    .msg-user:has(.msg-edit-textarea) { max-width: 92%; width: 92%; }

    /* Composer */
    .composer { padding: 6px 6px 6px 14px; }
    .composer .composer-btn { width: 32px; height: 32px; min-width: 32px; }
    .composer .composer-btn svg { width: 17px; height: 17px; }

    /* Settings pages */
    .docs-wrapper { padding: 16px 12px; }
    .doc-card { padding: 14px; }
    .doc-card-meta { flex-direction: column; gap: 2px; }

    /* Text preview */
    .text-preview { max-height: calc(100dvh - 20px); }
    .text-preview-body { padding: 16px; }
    .text-preview-view-toggle { display: none; }
    .text-preview-rendered { font-size: 14px; }
}