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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-primary: #1a1a1a;
    --bg-secondary: #0f0f0f;
    --bg-tertiary: #2a2a2a;
    --text-primary: #ececec;
    --text-secondary: #a0a0a0;
    --border-color: #333333;
    /* Accent colors: muted = default/dim state, active = hover/bright state */
    --accent-muted: #6b7a7a;
    --accent-active: #829696;
    /* Legacy aliases */
    --accent-color: #829696;
    --accent-hover: #6b7a7a;
    --accent-dark: #5A7D5E;
    --hover-color: #252525;
    --user-message-bg: #2a2a2a;
    --assistant-message-bg: #1a1a1a;

    /* Icon colors: dim = default state, bright = hover state */
    --icon-dim: #707070;
    --icon-bright: #a0a0a0;
    /* Legacy aliases - kept for backward compatibility */
    --icon-default: var(--icon-dim);
    --icon-hover: var(--icon-bright);
    --icon-muted: var(--icon-bright); /* Old name, now means bright */
    --icon-active: #829696; /* Teal accent, kept for special cases */

    /* Danger colors: muted = default/dim state, active = hover/bright state */
    --danger-muted: #925046;
    --danger-active: #A85951;
    /* Legacy aliases - kept for backward compatibility */
    --danger-color: #A85951;
    --danger-hover: #925046;
}

html, body {
    overflow-x: hidden;
    overscroll-behavior-x: none;
    touch-action: pan-y; /* Allow vertical scrolling only on touch devices */
}

body {
    font-family: 'Shippori Mincho', serif;
    background: var(--bg-secondary);
    color: var(--text-primary);
    line-height: 1.6;
    position: relative;
    width: 100%;
}

.app-container {
    display: flex;
    position: relative; /* Required for absolutely positioned children on mobile */
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height - fixes iOS Safari address bar issues */
    overflow: hidden;
}

/* Sidebar */
.sidebar {
    position: relative; /* For absolute positioning of close button */
    width: 336px; /* Increased by 20% from 280px */
    background: var(--bg-primary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow-y: auto;
    height: 100vh;
    padding-bottom: 45px; /* Ensure bottom content is scrollable on iPad */
    /* Prevent background scroll when sidebar is open on iPad */
    touch-action: pan-y;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    z-index: 1000; /* Above burger button (999) so sidebar covers it when open */
}

/* Lock body and main content scroll when sidebar is open (all screen sizes) */
/* Using .sidebar-open class added via JS for better browser support */
/* NOTE: Do NOT use position:fixed on body - it permanently breaks iOS Safari scroll */
/* NOTE: Do NOT use overflow:hidden on main-content - it breaks iOS Safari scroll context */
body.sidebar-open {
    overflow: hidden !important;
}

/* iOS Safari fix: Use ONLY pointer-events:none, NOT overflow:hidden
   overflow:hidden on main-content breaks the scroll layer for messages-container
   and prevents scrolling after sidebar closes. pointer-events:none is sufficient. */
body.sidebar-open .main-content {
    pointer-events: none !important;
    /* overflow: hidden - REMOVED - breaks iOS Safari scroll context */
}

body.sidebar-open .messages-container {
    pointer-events: none !important;
}

/* Lock body scroll when any modal is open */
/* NOTE: Do NOT use position:fixed on body - it permanently breaks iOS Safari scroll */
body.modal-open {
    overflow: hidden !important;
    touch-action: none;
}

body.modal-open .main-content,
body.modal-open .messages-container {
    overflow: hidden !important;
    touch-action: none;
}

/* Prevent touch scroll bleed-through on modal overlays */
.modal-overlay.active,
#projects-modal-overlay.active,
#conversations-modal-overlay.active,
#tomes-modal-overlay.active,
#seeds-modal-overlay.active,
#seed-detail-modal-overlay.active {
    touch-action: none;
}

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

/* Sidebar close button - positioned absolutely within sidebar to match floating burger exactly */
.sidebar-close-btn {
    position: absolute;
    top: 10px;
    left: clamp(16px, 5.1vw, 22px); /* Match burger menu responsive positioning */
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    z-index: 10;
}

.sidebar-close-btn:hover {
    background: var(--bg-secondary);
}

.sidebar-close-btn svg {
    width: 24px;
    height: 24px;
}

/* Burger is hidden behind sidebar via z-index (999 vs 1000) when sidebar is open */

.logo {
    width: 50%;  /* Original responsive size */
    height: auto;
    display: block;
    flex-shrink: 0;
    margin-left: 18%;  /* Center Ori in available space (left of icon stack) */
}

.sidebar-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-left: auto;  /* Push to right side of sidebar-header */
}

/* Make sidebar button icons responsive */
.sidebar-buttons svg {
    width: clamp(32px, 12vw, 48px);  /* Responsive: min 32px, scales with viewport, max 48px */
    height: clamp(32px, 12vw, 48px);
}

.new-chat-btn,
.new-project-btn,
.new-tome-btn {
    width: 100%;
    padding: 8px 12px;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.new-chat-btn {
    background: var(--accent-color);
    filter: brightness(0.7);
}

.new-chat-btn:hover {
    background: transparent !important;
    filter: brightness(1);
}

.new-project-btn {
    background: var(--icon-default);
    margin-top: clamp(3px, 0.7vw, 7px);  /* Optical adjustment for folder tab - scales with icon size */
    filter: brightness(0.7);
}

.new-project-btn:hover {
    background: transparent !important;
    filter: brightness(1);
}

/* Lighten project folder icon on hover */
.new-project-btn:hover svg,
#header-new-project-btn:hover svg {
    stroke: #acacac !important;
}

.new-tome-btn {
    background: var(--icon-default);
    filter: brightness(0.7);
}

.new-tome-btn:hover {
    background: transparent !important;
    filter: brightness(1);
}

/* View all button - minimal text button at bottom of sidebar lists */
.view-all-btn {
    width: 100%;
    padding: 10px 12px;
    margin-top: 4px;
    background: transparent;
    color: var(--text-secondary);
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}

.view-all-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

/* Sidebar Search */
.sidebar-search {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.sidebar-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.sidebar-search-icon {
    position: absolute;
    left: 12px;
    color: var(--text-secondary);
    pointer-events: none;
}

.sidebar-search-input {
    width: 100%;
    padding: 8px 12px 8px 36px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}

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

/* Sidebar sections */
.sidebar-section {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    /* Sections take their natural height, sidebar scrolls */
    border-top: 1px solid var(--border-color);
}

.section-header {
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}

.section-toggle {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 10px;
    cursor: pointer;
    padding: 4px;
    transition: transform 0.2s;
}

.section-header.collapsed .section-toggle {
    transform: rotate(-90deg);
}

/* Edit mode button - hidden (editing moved to modal) */
.edit-mode-btn {
    display: none !important; /* Hidden - use View all modal for editing */
    background: none;
    border: none;
    color: var(--accent-color);
    font-size: 14px;
    font-weight: 500;
    padding: 4px 8px;
    cursor: pointer;
    margin-left: auto;
    margin-right: 8px;
}

/* Hide the bulk select cog button (replaced by Edit text button) */
.bulk-select-btn {
    display: none !important;
}

/* Select All button - hidden (editing moved to modal) */
.select-all-btn {
    display: none !important; /* Hidden - use View all modal for editing */
    background: none;
    border: none;
    color: var(--accent-color);
    font-size: 13px;
    font-weight: 400;
    padding: 4px 0;
    cursor: pointer;
    margin-left: 12px;
}

/* Mobile styles - edit buttons hidden on mobile too */
@media (max-width: 768px) {
    .edit-mode-btn {
        display: none !important; /* Hidden - use View all modal for editing */
    }

    .bulk-select-btn {
        display: none !important;
    }

    /* Hide individual action buttons by default on mobile */
    .conversation-item-actions,
    .project-item-actions,
    .tome-item-actions {
        display: none !important;
    }

    /* Show action buttons when in selection/edit mode on mobile */
    .selection-mode .conversation-item-actions,
    .selection-mode .project-item-actions,
    .selection-mode .tome-item-actions {
        display: flex !important;
    }

    /* Show action buttons inside modals on mobile (always visible) */
    .conversations-modal .conversation-item-actions,
    .projects-modal .conversation-item-actions,
    .tomes-modal .conversation-item-actions,
    #conversations-modal .conversation-item-actions,
    #projects-modal .conversation-item-actions,
    #tomes-modal .conversation-item-actions,
    #conversations-modal-body .conversation-item-actions,
    #projects-modal-body .conversation-item-actions,
    #tomes-modal-body .conversation-item-actions {
        display: flex !important;
        opacity: 1 !important;
    }

    /* Ensure text wraps before action buttons in modals on mobile */
    .conversations-modal .conversation-item,
    .projects-modal .conversation-item,
    .tomes-modal .conversation-item,
    #conversations-modal .conversation-item,
    #projects-modal .conversation-item,
    #tomes-modal .conversation-item,
    #conversations-modal-body .conversation-item,
    #projects-modal-body .conversation-item,
    #tomes-modal-body .conversation-item {
        padding-right: 70px !important;
        position: relative !important;
    }

    /* Content wrapper needs overflow hidden to respect parent padding */
    .conversations-modal .conversation-item > div:first-child,
    .projects-modal .conversation-item > div:first-child,
    .tomes-modal .conversation-item > div:first-child,
    #conversations-modal .conversation-item > div:first-child,
    #projects-modal .conversation-item > div:first-child,
    #tomes-modal .conversation-item > div:first-child,
    #conversations-modal-body .conversation-item > div:first-child,
    #projects-modal-body .conversation-item > div:first-child,
    #tomes-modal-body .conversation-item > div:first-child {
        overflow: hidden !important;
        min-width: 0 !important;
        flex: 1 !important;
    }

    .conversations-modal .conversation-item-title,
    .projects-modal .conversation-item-title,
    .tomes-modal .conversation-item-title,
    #conversations-modal .conversation-item-title,
    #projects-modal .conversation-item-title,
    #tomes-modal .conversation-item-title,
    #conversations-modal-body .conversation-item-title,
    #projects-modal-body .conversation-item-title,
    #tomes-modal-body .conversation-item-title {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Project items in modals */
    .projects-modal .project-item-header,
    #projects-modal .project-item-header,
    #projects-modal-body .project-item-header {
        padding-right: 70px !important;
    }

    .projects-modal .project-name,
    #projects-modal .project-name,
    #projects-modal-body .project-name {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Meta text wrapping in modals - constrain width to stay clear of action buttons */
    .conversations-modal .conversation-item-meta,
    .projects-modal .conversation-item-meta,
    .tomes-modal .conversation-item-meta,
    #conversations-modal .conversation-item-meta,
    #projects-modal .conversation-item-meta,
    #tomes-modal .conversation-item-meta,
    #conversations-modal-body .conversation-item-meta,
    #projects-modal-body .conversation-item-meta,
    #tomes-modal-body .conversation-item-meta {
        white-space: normal !important;
        word-wrap: break-word !important;
        width: 100% !important;
        display: block !important;
    }

    .projects-modal .project-item-meta,
    #projects-modal .project-item-meta,
    #projects-modal-body .project-item-meta {
        white-space: normal !important;
        word-wrap: break-word !important;
        width: 100% !important;
        display: block !important;
    }

    /* Hide legacy drop-zone on mobile - it's inside input-sidebar */
    .input-sidebar .drop-zone {
        display: none !important;
    }

    /* Mobile: header background full width (no scrollbar space needed) */
    .chat-header {
        right: 0 !important;
    }

    /* Hide conversation/tome name on mobile - no room with header buttons */
    .chat-header h3 {
        display: none !important;
    }

    /* Adjust header buttons to align with burger menu center and reduce spacing */
    /* Percentage-based positioning: scales proportionally on all mobile screens */
    .header-buttons {
        top: 32px !important; /* Align with burger menu center (10px + 44px/2) */
        transform: translateY(-50%) !important; /* Center the buttons vertically around the burger center */
        right: 3% !important; /* Percentage from right edge - scales on all screens */
        gap: 2px !important; /* Fixed small gap between buttons */
        transition: opacity 0.3s ease !important; /* Mobile: fade only, no translate animation */
    }

    /* Mobile: header buttons hide with fade only, no descend/ascend animation */
    .header-buttons.header-hidden {
        transform: translateY(-50%) !important; /* Keep same transform, only change opacity */
    }

    /* Adjust new chat/project/tome buttons down to align with burger center */
    #header-new-chat-btn,
    #header-new-project-btn,
    #header-new-tome-btn {
        transform: translateY(5px) !important; /* Move down 5px to center with burger menu */
    }

    /* Note: floating files button positioned below header for touch - see dedicated rule below */


    /* Mobile: hide drop-zone, keep file input functional */
    .drop-zone {
        display: none !important;
    }

    /* Mobile: textarea wrapper - contains textarea with buttons positioned inside */
    .message-input-wrapper {
        position: relative !important;
    }

    #message-input {
        width: 100% !important;
        padding: 12px 16px 62px 16px !important; /* Bottom padding creates protected zone for buttons */
        border: none !important; /* Remove black outline */
        border-radius: 8px !important;
        background: #f5f5f5 !important;
        color: #1a1a1a !important;
        min-height: 94px !important; /* 30% taller: 72 * 1.3 ≈ 94 */
    }

    /* Mobile: buttons container - protected zone at bottom inside textarea */
    .action-buttons {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 62px !important; /* Protected zone height matches bottom padding */
        display: block !important;
        transform: none !important;
        top: auto !important;
        pointer-events: none !important;
        background: transparent !important; /* Visual separator - buttons sit in this protected zone */
    }

    .action-buttons > * {
        pointer-events: auto !important;
    }

    /* Mobile button sizing and positioning - 30% larger, spread across bottom in protected zone */
    .upload-btn,
    .mic-btn,
    .send-btn,
    .pause-btn {
        position: absolute !important;
        bottom: 10px !important;
        min-width: auto !important;
        width: 52px !important; /* 30% larger: 40 * 1.3 = 52 */
        height: 52px !important;
        padding: 10px !important;
        background: none !important;
        border: none !important;
        color: var(--icon-dim) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: color 0.2s !important;
    }

    /* Position each button at specific percentage along bottom - in protected zone */
    .upload-btn {
        left: 25% !important;
        transform: translateX(-50%) !important;
    }

    .mic-btn {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .send-btn {
        left: 75% !important;
        transform: translateX(-50%) !important;
        color: var(--icon-bright) !important; /* Light grey when disabled - lighter than active buttons */
    }

    .upload-btn svg,
    .mic-btn svg,
    .send-btn svg {
        width: 29px !important; /* 30% larger: 22 * 1.3 ≈ 29 */
        height: 29px !important;
    }

    /* Mobile: Microphone recording animation - same as desktop */
    @media (max-width: 768px) {
        .mic-btn.active {
            position: absolute !important;
            left: 50% !important;
            bottom: 10px !important;
            background: none !important;
            color: var(--accent-color) !important;
            border: none !important;
            animation: pulseMobile 1.5s infinite !important;
            transform: translateX(-50%) !important; /* Maintain centering during animation */
        }

        .mic-btn.processing {
            position: absolute !important;
            left: 50% !important;
            bottom: 5px !important;
            background: none !important;
            color: #707070 !important;
            border: none !important;
            transform: translateX(-50%) !important; /* Maintain centering during processing */
        }

        .mic-btn.processing svg {
            display: none !important;
        }

        .mic-btn.processing::after {
            content: '' !important;
            position: absolute !important;
            width: 29px !important; /* Scaled for mobile */
            height: 29px !important;
            top: 50% !important;
            left: 50% !important;
            margin: -14.5px 0 0 -14.5px !important;
            border: 3px solid transparent !important;
            border-top-color: #707070 !important;
            border-radius: 50% !important;
            animation: spin 0.8s linear infinite !important;
        }

        /* Mobile: Send button can-send state */
        .send-btn.can-send {
            color: var(--accent-muted) !important;
        }

        .send-btn.can-send svg path {
            fill: currentColor !important;
        }

        .send-btn.can-send:hover {
            color: var(--accent-active) !important;
        }

        /* Mobile: Stop button with pulse animation synced to cat loader */
        .send-btn.stop-mode {
            color: var(--danger-color) !important;
            animation: stopButtonPulse 2s ease-in-out infinite !important;
        }

        .send-btn.stop-mode:hover {
            color: var(--danger-color) !important;
        }
    }
}

.section-content {
    padding: 0 8px 8px 8px;
    /* Removed overflow-y and max-height - panels won't scroll individually */
}

/* When section should fill available space */
.sidebar-section.fill-space {
    flex: 1 1 auto;
}

.sidebar-section.fill-space .section-content {
    flex: 1;
    min-height: 0;
}

.section-content.collapsed {
    display: none;
}

/* Projects */
.project-item {
    padding: 10px 12px;
    margin-bottom: 4px;
    border-radius: 6px;
    transition: background 0.15s;
}

.project-item:hover {
    background: var(--hover-color);
}

.project-item.active {
    background: var(--bg-tertiary);
}

.project-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
    cursor: pointer;
    position: relative;
    padding-right: 60px;
}

.project-main-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.project-name {
    flex: 0 1 auto;
    min-width: 0;
}

.project-expand {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 10px;
    cursor: pointer;
    padding: 2px 4px;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.project-item.expanded .project-expand {
    transform: rotate(90deg);
}

.project-item-meta {
    font-size: 11px;
    color: var(--text-secondary);
}

.project-conversations {
    margin-top: 8px;
    padding-left: 12px;
    display: none;
}

.project-item.expanded .project-conversations {
    display: block;
}

.project-conversation-item {
    padding: 6px 8px;
    margin-bottom: 2px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
    padding-right: 60px;
}

.project-conversation-item:hover {
    background: var(--hover-color);
}

.project-conversation-item.active {
    background: var(--bg-tertiary);
}

.project-conversation-item .conversation-item-actions {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

.project-conversation-item:hover .conversation-item-actions {
    opacity: 1;
}

.project-item-actions {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

/* Show actions on hover for desktop */
.project-item-header:hover .project-item-actions {
    opacity: 1;
}

/* Always show actions on mobile */
@media (max-width: 768px) {
  /* Mobile overflow menu visibility */
  .mobile-overflow-btn {
    display: none; /* Will be shown by JS when in conversation view */
  }

  /* Conversation view (mobile): hide all header icon buttons by default... */
  .chat-header.conversation-view .icon-btn,
  .chat-header.conversation-view .header-action-btn {
    display: none !important;
  }

  /* ...then explicitly show the ones we want visible in mobile header */
  .chat-header.conversation-view #header-new-chat-btn,
  .chat-header.conversation-view #header-new-project-btn,
  .chat-header.conversation-view #header-new-tome-btn,
  .chat-header.conversation-view #search-btn,
  .chat-header.conversation-view #home-btn,
  .chat-header.conversation-view #mobile-overflow-btn {
    display: inline-flex !important;
  }

  /* Keep these out of the header in mobile conversation view (in overflow only) */
  .chat-header.conversation-view #settings-btn,
  .chat-header.conversation-view #export-btn,
  .chat-header.conversation-view #rename-btn,
  .chat-header.conversation-view #header-reader-btn,
  .chat-header.conversation-view #logout-btn {
    display: none !important;
  }

  /* Overflow menu: hide Search and Home (already in header) */
  #overflow-search,
  #overflow-home {
    display: none !important;
  }

  /* Ensure the overflow button itself can show when a conversation is open */
  .chat-header.conversation-view .mobile-overflow-btn {
    display: inline-flex !important;
  }

  /* Empty state (no conversation-view class): show specific header icons */
  /* Hide all by default first */
  .chat-header:not(.conversation-view) .icon-btn,
  .chat-header:not(.conversation-view) .header-action-btn {
    display: none !important;
  }

  /* Show: burger, new chat, new project, new tome, search, home, logout */
  .chat-header:not(.conversation-view) #header-new-chat-btn,
  .chat-header:not(.conversation-view) #header-new-project-btn,
  .chat-header:not(.conversation-view) #header-new-tome-btn,
  .chat-header:not(.conversation-view) #search-btn,
  .chat-header:not(.conversation-view) #home-btn,
  .chat-header:not(.conversation-view) #logout-btn {
    display: inline-flex !important;
  }

  /* Hide reader button in empty state on mobile */
  .chat-header:not(.conversation-view) #header-reader-btn {
    display: none !important;
  }
}

.project-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--icon-dim);
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    min-height: 22px;
}

.project-action-btn svg {
    display: block;
    width: 14px;
    height: 14px;
}

.project-action-btn:hover {
    color: var(--icon-bright);
}

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

/* Conversations */
.conversation-list {
    /* Removed - now handled by section-content */
}

.conversation-item {
    padding: 12px 16px;
    margin-bottom: 4px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
    padding-right: 60px;
}

.conversation-item:hover {
    background: var(--hover-color);
}

.conversation-item.active {
    background: var(--bg-tertiary);
}

.conversation-item-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-item-meta {
    font-size: 12px;
    color: var(--text-secondary);
}

.project-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--accent-color);
    margin-left: 8px;
    padding: 2px 6px;
    background: var(--bg-secondary);
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

.project-badge svg {
    flex-shrink: 0;
}

.conversation-item-actions {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

/* Show actions on hover for desktop */
.conversation-item:hover .conversation-item-actions {
    opacity: 1;
}

/* Always show actions on mobile */
@media (max-width: 768px) {
    .conversation-item-actions {
        opacity: 1;
    }
}

/* Also show on touch devices regardless of screen size */
@media (hover: none) {
    .conversation-item-actions,
    .project-conversation-item .conversation-item-actions,
    .project-item-actions,
    .tome-item-actions {
        opacity: 1;
    }
    /* Make all icon buttons bright by default on touch (no hover to brighten) */
    .conversation-action-btn,
    .project-action-btn,
    .icon-btn,
    .message-action-btn {
        color: var(--icon-bright) !important;
    }
    /* Show action buttons inside modals on touch devices (for iPad in landscape) */
    .conversations-modal .conversation-item-actions,
    .projects-modal .conversation-item-actions,
    .tomes-modal .conversation-item-actions,
    #conversations-modal .conversation-item-actions,
    #projects-modal .conversation-item-actions,
    #tomes-modal .conversation-item-actions,
    #conversations-modal-body .conversation-item-actions,
    #projects-modal-body .conversation-item-actions,
    #tomes-modal-body .conversation-item-actions {
        display: flex !important;
        opacity: 1 !important;
    }
    /* Input buttons: remove tap highlight and add teal active state */
    .upload-btn,
    .mic-btn,
    .send-btn {
        -webkit-tap-highlight-color: transparent !important;
    }
    .upload-btn:active,
    .mic-btn:active,
    .send-btn:active {
        color: var(--accent-color) !important;
        background: none !important;
    }
}

.conversation-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--icon-dim);
    transition: color 0.2s;
}

.conversation-action-btn:hover {
    color: var(--icon-bright);
}

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


/* Main content */
.main-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    overflow: hidden;
}

.chat-header {
    /* Full-width fixed header bar with background for legibility */
    position: fixed;
    top: 0;
    left: 0;
    right: 15px; /* Leave space for scrollbar */
    height: 70px;
    padding: 0;
    background: var(--bg-primary);
    border-bottom: none;
    display: block;
    z-index: 898;
    pointer-events: none; /* Let clicks pass through to child elements */
    opacity: 1;
    transition: opacity 0.3s ease;
}

.chat-header.header-hidden {
    opacity: 0;
    pointer-events: none;
}

.chat-header h3 {
    /* Float title at top-left */
    position: fixed;
    top: 20px; /* Align vertical center with burger icon center (burger: top 10px + height 44px / 2 = 32px, title: 20px + 24px height / 2 = 32px) */
    left: 80px; /* Start after burger menu zone */
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    z-index: 900;
    pointer-events: auto;
    max-width: calc(100vw - 500px); /* Leave room for header buttons on right */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.3s ease;
    /* Vertically center text with header icons */
    display: flex;
    align-items: center;
    height: 24px;
    margin: 0;
}

.chat-header h3.header-hidden {
    opacity: 0;
    pointer-events: none;
}

.header-buttons {
    /* Float buttons cluster at top-right */
    position: fixed;
    top: 20px; /* Align with title and burger icon center */
    right: 24px;
    display: flex;
    gap: 6px;
    align-items: center;
    z-index: 900;
    pointer-events: auto;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.header-buttons.header-hidden {
    opacity: 0;
    pointer-events: none;
}

.header-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: none;
    background: none;
    color: white;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    filter: brightness(0.7);
}

.header-action-btn:hover {
    background: transparent !important;
    filter: brightness(1);
}

.header-action-btn svg {
    flex-shrink: 0;
}

/* Specific size increase for new chat/project/tome buttons */
#header-new-chat-btn svg,
#header-new-project-btn svg,
#header-new-tome-btn svg {
    width: 39px !important;
    height: 39px !important;
    min-width: 39px !important;
    min-height: 39px !important;
}

/* Adjust new chat/project/tome buttons down to align properly on desktop */
/* Plus horizontal offsets for uniform edge-to-edge spacing */
#header-new-chat-btn {
    transform: translate(12px, 5px) !important;
}

#header-new-project-btn {
    transform: translate(9px, 5px) !important;
}

#header-new-tome-btn {
    transform: translate(6px, 5px) !important;
}

.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    padding: 6px 10px;
    border-radius: 4px;
    transition: all 0.2s;
    color: var(--icon-dim);
}

.icon-btn:hover {
    background: transparent !important;
    color: var(--icon-bright);
}

/* Attached files */
.attached-files {
    padding: 12px 24px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

.attached-files-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.attached-file-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 13px;
}

.attached-file-tag svg {
    flex-shrink: 0;
    color: var(--icon-default);
}

.attached-file-tag button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--text-secondary);
    padding: 0;
    line-height: 1;
    margin-left: 4px;
}

.attached-file-tag button:hover {
    color: var(--danger-color);
}

/* Messages */
.messages-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    padding-top: 80px;
    padding-bottom: 120px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; /* Prevent scroll chaining to Safari */
    touch-action: pan-y; /* This element handles vertical scroll */
}

.welcome-message {
    text-align: center;
    /* Scale padding based on viewport height */
    padding: clamp(30px, 5vh, 60px) 20px;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.welcome-logo {
    /* Scale logo between 200px-400px based on viewport height */
    max-width: clamp(200px, 30vh, 400px);
    width: 80%;
    height: auto;
    /* Scale margin based on viewport height */
    margin-bottom: clamp(20px, 4vh, 40px);
    /* Move logo down by ~20% to improve vertical alignment */
    margin-top: clamp(30px, 5vh, 60px);
    opacity: 0;
    animation: fadeIn 2s ease-in forwards;
}

.welcome-logo-simple {
    /* Scale logo between 150px-300px based on viewport height */
    max-width: clamp(150px, 25vh, 300px);
    width: 60%;
    height: auto;
    /* Move logo down by ~25% to improve vertical alignment */
    margin-top: clamp(30px, 5vh, 60px);
    opacity: 0;
    animation: fadeIn 1.5s ease-in forwards;
}

.welcome-text {
    /* Scale text between 20px-28px */
    font-size: clamp(20px, 2.5vh, 28px);
    font-weight: 400;
    color: var(--text-primary);
    opacity: 0;
    margin: 0;
    padding: 0 20px;
}

@keyframes textFadeIn {
    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* Empty conversation state - matches .welcome-message for seamless transition */
.empty-conversation-state {
    text-align: center;
    /* Scale padding based on viewport height */
    padding: clamp(30px, 5vh, 60px) 20px;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.empty-conversation-state h1 {
    /* Match .welcome-message h1 exactly */
    font-size: 32px;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 12px;
    opacity: 0;
    animation: fadeIn 1.2s ease-in 0.3s forwards;
}

.empty-conversation-state p {
    /* Match .welcome-message p exactly */
    font-size: 16px;
    color: var(--text-secondary);
    padding: 0 20px;
    opacity: 0;
    animation: fadeIn 1.2s ease-in 0.5s forwards;
}

/* #empty-state-logo inherits from .welcome-logo-simple - no overrides needed */

.empty-state-new-chat-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: clamp(12px, 2vh, 16px) clamp(24px, 3vw, 32px);
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 8px;
    /* Scale text between 16px-18px */
    font-size: clamp(16px, 2vh, 18px);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    /* Scale margin based on viewport height */
    margin-top: clamp(20px, 4vh, 40px);
    opacity: 0;
    animation: fadeIn 1.2s ease-in 0.7s forwards;
}

.empty-state-new-chat-btn:hover {
    background: var(--accent-hover);
}

.empty-state-new-chat-btn svg {
    flex-shrink: 0;
}

@keyframes textFadeIn {
    to {
        opacity: 1;
    }
}

.welcome-message h1 {
    font-size: 32px;
    font-weight: 400;
    margin-bottom: 12px;
    color: var(--text-primary);
    opacity: 0;
    animation: fadeIn 1.2s ease-in 0.3s forwards;
}

/* Mobile welcome/empty state - both states must match exactly */
@media (max-width: 768px) {
    .welcome-message h1,
    .empty-conversation-state h1 {
        font-size: 22px;
    }

    .welcome-message p,
    .empty-conversation-state p {
        font-size: 14px;
    }

    /* Mobile: New chat buttons - full brightness (no hover on touch) */
    .new-chat-btn,
    .new-project-btn,
    .new-tome-btn {
        filter: brightness(1);
    }

    /* Mobile: Header icons - full brightness by default (no hover on touch) */
    .header-action-btn {
        filter: brightness(1);
    }

    .icon-btn {
        color: var(--icon-bright);
    }

    /* Mobile: Overflow menu icons - full brightness (no hover on touch) */
    .overflow-menu-item svg {
        color: var(--icon-bright) !important;
    }
}

.welcome-message p {
    font-size: 16px;
    opacity: 0;
    animation: fadeIn 1.2s ease-in 0.5s forwards;
}

.message {
    margin-bottom: 24px;
    max-width: 800px;
    position: relative;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    touch-action: pan-y; /* Allow parent scroll on iOS */
}

.message.user {
    margin-left: auto;
}

.message-role {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-secondary);
}

.message-content {
    padding: 16px 20px;
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    overflow-x: hidden;
    touch-action: pan-y; /* Allow parent scroll on iOS */
}

/* Ensure horizontal rules in messages are responsive */
.message-content hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 1.5em 0;
    max-width: 100%;
}

/* Paragraph and list spacing to match tome reader view */
.message-content p {
    margin-bottom: 16px;
    line-height: 1.8;
}

.message-content p:last-child {
    margin-bottom: 0;
}

/* Reduced spacing when paragraph is followed by a list */
.message-content p + ul,
.message-content p + ol {
    margin-top: -8px;
}

.message-content ul,
.message-content ol {
    margin-bottom: 16px;
    margin-left: 24px;
    line-height: 1.8;
}

.message-content li {
    margin-bottom: 8px;
}

.message-content li:last-child {
    margin-bottom: 0;
}

/* Heading spacing */
.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4,
.message-content h5,
.message-content h6 {
    margin-top: 20px;
    margin-bottom: 12px;
    line-height: 1.3;
}

.message-content h1:first-child,
.message-content h2:first-child,
.message-content h3:first-child,
.message-content h4:first-child,
.message-content h5:first-child,
.message-content h6:first-child {
    margin-top: 0;
}

.message.user .message-content {
    background: var(--accent-color);
    color: white;
}

.message.assistant .message-content {
    background: var(--user-message-bg);
    border: 1px solid var(--border-color);
}

.message-timestamp {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 6px;
}

.message-actions {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    opacity: 1; /* Always visible */
}

.message-action-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 8px;
    cursor: pointer;
    color: var(--icon-dim);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.message-action-btn:hover {
    background: var(--hover-color);
    color: var(--icon-bright);
}

.streaming-content {
    position: relative;
}



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


/* Ori cat loader - appears next to "Ori" label while generating */
.message.assistant.generating .message-role::after {
    content: '';
    display: inline-block;
    width: 60px;
    height: 60px;
    margin-left: 4px;
    vertical-align: middle;
    background: url('/static/images/ori-cat-loader.png') no-repeat center;
    background-size: contain;
    animation: catPulse 2s ease-in-out infinite;
}

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

/* Keep old blink for compatibility */
@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* Input area - floating at bottom, transparent like header */
.input-area {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    width: 70%;
    max-width: 1200px;
    z-index: 900;
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.input-area > * {
    pointer-events: auto;
}


/* Hidden state for input area */
.input-area.input-hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(100px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Fullscreen file viewer chat overlay - appears from bottom like normal input */
.input-area.fullscreen-chat-overlay {
    position: fixed !important;
    bottom: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(0) !important;
    z-index: 10002 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    max-width: 800px !important;
    width: calc(100% - 40px) !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
}

/* When hiding the fullscreen chat overlay, animate down */
.input-area.input-hidden.fullscreen-chat-overlay {
    opacity: 0 !important;
    transform: translateX(-50%) translateY(100px) !important;
}

/* ============================================================================
   STATIC SCREEN OVERRIDE
   When there are no .message elements (welcome/empty state), ALWAYS show UI
   Uses CSS :has() to detect static screens and override hide classes
   ============================================================================ */

/* Static screen = no .message elements in the messages container */
body:has(#messages-container:not(:has(.message))) .input-area.input-hidden {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
    pointer-events: none !important;
}

body:has(#messages-container:not(:has(.message))) .input-area.input-hidden > * {
    pointer-events: auto !important;
}

body:has(#messages-container:not(:has(.message))) .chat-header h3.header-hidden {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
}

body:has(#messages-container:not(:has(.message))) .header-buttons.header-hidden {
    opacity: 1 !important;
    transform: translateY(-50%) !important;
    pointer-events: auto !important;
}

body:has(#messages-container:not(:has(.message))) .mobile-menu-btn.header-hidden {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
}

body:has(#messages-container:not(:has(.message))) #floating-files-btn.header-hidden {
    opacity: 1 !important;
    transform: translateX(-50%) !important;
    pointer-events: auto !important;
}

body:has(#messages-container:not(:has(.message))) #floating-reader-btn.header-hidden {
    opacity: 1 !important;
    transform: translateX(-50%) !important;
    pointer-events: auto !important;
}

.input-row {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Desktop: message-input-wrapper is just position:relative container for textarea + floating buttons */
.message-input-wrapper {
    width: 100%;
    position: relative;
    transition: background-color 0.15s ease-out;
}

/* Action buttons float on the right edge of the textarea (desktop) */
.action-buttons {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    pointer-events: none;
}

.action-buttons > * {
    pointer-events: auto;
}

/* Desktop: larger icons in action buttons */
.action-buttons svg {
    width: 28px;
    height: 28px;
}

/* Drop-zone sits below textarea as sibling */
.drop-zone {
    flex: 1;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 12px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    display: none; /* Hidden on desktop - users drag files over window or use upload button */
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    min-height: 48px;
}

.drop-zone:hover,
.drop-zone.drag-over {
    border-color: var(--accent-color);
    background: var(--bg-secondary);
}

.drop-zone svg {
    color: var(--icon-dim);
    flex-shrink: 0;
}

.drop-zone:hover svg {
    color: var(--accent-color);
}

#message-input {
    width: 100%;
    padding: 12px 150px 12px 16px;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    resize: none;
    outline: none;
    transition: border-color 0.2s;
    background: #f5f5f5;
    color: #1a1a1a;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

#message-input::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

#message-input::placeholder {
    color: #7a7a7a;
}

#message-input:focus {
    /* No border to change since border is removed */
}

/* Input action buttons - shared base styles (bright default, dim on hover) */
.upload-btn,
.mic-btn,
.send-btn {
    padding: 15px 21px;
    background: none;
    color: var(--icon-bright);
    border: none;
    cursor: pointer;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
}

.upload-btn:hover,
.mic-btn:hover {
    color: var(--icon-dim);
}

/* Active/pressed state - invert buttons for touch feedback */
.upload-btn,
.mic-btn,
.send-btn {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Upload button: explicit default state for SVG to prevent stuck styles */
.upload-btn svg {
    background: none !important;
    box-shadow: none !important;
}

/* Upload button: only use .pressed (not :active) to avoid iOS stuck state with file picker */
.upload-btn.pressed svg {
    background: var(--icon-bright) !important;
    color: white !important;
    border-radius: 4px;
    box-shadow: 0 0 0 4px var(--icon-bright) !important;
    transition: none;
}

/* Mic button: can use both :active and .pressed */
.mic-btn:active svg,
.mic-btn.pressed svg {
    background: var(--icon-bright) !important;
    color: white !important;
    border-radius: 4px;
    box-shadow: 0 0 0 4px var(--icon-bright);
    transition: none;
}

.send-btn.can-send:active svg,
.send-btn.can-send.pressed svg {
    background: var(--accent-color) !important;
    color: white !important;
    border-radius: 4px;
    box-shadow: 0 0 0 4px var(--accent-color);
    transition: none;
}

.send-btn.stop-mode:active svg,
.send-btn.stop-mode.pressed svg {
    background: var(--danger-color) !important;
    color: white !important;
    border-radius: 4px;
    box-shadow: 0 0 0 4px var(--danger-color);
    transition: none;
}

/* Send button - disabled by default until there's content */
.send-btn {
    cursor: not-allowed;
}

.send-btn.can-send {
    color: var(--accent-color);
    cursor: pointer;
}

.send-btn.can-send svg path {
    fill: currentColor;
}

/* Stop button mode - red icon with pulse animation synced to cat loader */
.send-btn.stop-mode {
    color: var(--danger-color);
    animation: stopButtonPulse 2s ease-in-out infinite;
}

.send-btn.stop-mode:hover {
    color: var(--danger-color);
}

/* Pulse animation for stop button - synced with catPulse (2s duration) */
@keyframes stopButtonPulse {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 1;
    }
}

/* Active recording state - wireframe style with green pulsing icon */
.mic-btn.active {
    background: none;
    color: var(--accent-color);
    border: none;
    animation: pulseMobile 1.5s infinite;
}

/* Processing state - Whisper dictation processing with silver progress wheel */
.mic-btn.processing {
    background: none;
    color: var(--icon-dim);
    border: none;
    position: relative;
}

.mic-btn.processing svg {
    display: none;
}

.mic-btn.processing::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    left: 50%;
    margin: -12px 0 0 -12px;
    border: 3px solid transparent;
    border-top-color: var(--icon-dim);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

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

/* Mobile pulse animation that doesn't use transform to avoid conflicting with translateX centering */
@keyframes pulseMobile {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

/* =============================================================================
   RECORDING UI - Green background with waveform visualization
   ============================================================================= */

/* Recording state - green background */
.message-input-wrapper.recording {
    background: var(--accent-color);
    border-radius: 12px;
    transition: background 0.3s ease;
}

.message-input-wrapper.recording #message-input {
    opacity: 0 !important;
    pointer-events: none;
    background: transparent !important;
    color: transparent !important;
}

.message-input-wrapper.recording #message-input::placeholder {
    color: transparent !important;
}

/* Hide upload and send buttons when recording */
.message-input-wrapper.recording .upload-btn,
.message-input-wrapper.recording .send-btn,
.message-input-wrapper.recording #upload-btn,
.message-input-wrapper.recording #send-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Hide action-buttons container layout when recording (mic escapes via position absolute) */
.message-input-wrapper.recording .action-buttons {
    background: transparent !important;
}

/* (Old mic-as-stop-button rules removed - now using separate recording control buttons) */

/* Waveform container */
.waveform-container {
    position: absolute;
    top: 50%;
    left: 0;
    right: 80px; /* Leave space for control buttons on right (desktop) */
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 20px;
    pointer-events: none;
}

/* Mobile: control buttons are at bottom, so adjust waveform position */
@media (max-width: 768px) {
    .waveform-container {
        top: 10%; /* Shift down 10% */
        right: 0;
        bottom: 48px; /* Leave space for control buttons at bottom */
        transform: none;
        justify-content: center;
    }
}

.waveform-bars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.recording-timer {
    color: white;
    font-size: 14px;
    font-family: monospace;
    opacity: 0.9;
}

/* Individual waveform bars */
.waveform-bar {
    width: 4px;
    background: white;
    border-radius: 2px;
    min-height: 8px;
    max-height: 40px;
    animation: waveformPulse 0.5s ease-in-out infinite;
}

/* Stagger the animation for each bar */
.waveform-bar:nth-child(1) { animation-delay: 0s; }
.waveform-bar:nth-child(2) { animation-delay: 0.1s; }
.waveform-bar:nth-child(3) { animation-delay: 0.2s; }
.waveform-bar:nth-child(4) { animation-delay: 0.3s; }
.waveform-bar:nth-child(5) { animation-delay: 0.4s; }
.waveform-bar:nth-child(6) { animation-delay: 0.5s; }
.waveform-bar:nth-child(7) { animation-delay: 0.6s; }
.waveform-bar:nth-child(8) { animation-delay: 0.7s; }
.waveform-bar:nth-child(9) { animation-delay: 0.8s; }
.waveform-bar:nth-child(10) { animation-delay: 0.9s; }
.waveform-bar:nth-child(11) { animation-delay: 1.0s; }
.waveform-bar:nth-child(12) { animation-delay: 1.1s; }
.waveform-bar:nth-child(13) { animation-delay: 0.05s; }
.waveform-bar:nth-child(14) { animation-delay: 0.15s; }
.waveform-bar:nth-child(15) { animation-delay: 0.25s; }
.waveform-bar:nth-child(16) { animation-delay: 0.35s; }
.waveform-bar:nth-child(17) { animation-delay: 0.45s; }
.waveform-bar:nth-child(18) { animation-delay: 0.55s; }
.waveform-bar:nth-child(19) { animation-delay: 0.65s; }
.waveform-bar:nth-child(20) { animation-delay: 0.75s; }

@keyframes waveformPulse {
    0%, 100% {
        height: 8px;
    }
    50% {
        height: 32px;
    }
}

/* Pause button during recording */
.pause-btn {
    z-index: 100 !important;
    color: white !important;
    background: none !important;
    border: none !important;
    cursor: pointer;
    padding: 15px 21px;
    min-width: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: opacity 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.pause-btn:hover {
    opacity: 1;
}

/* Pause button when paused - engaged/pressed state */
.pause-btn.paused {
    color: var(--accent-color) !important;
}

.pause-btn.paused svg {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    padding: 4px;
}

/* Desktop: pause button stays in flex row with cancel and send (no special positioning) */

/* Recording control buttons - shared styles */
.recording-control-btn {
    z-index: 100 !important;
    color: white !important;
    background: none !important;
    border: none !important;
    cursor: pointer;
    padding: 15px 21px;
    min-width: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: opacity 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.recording-control-btn:hover {
    opacity: 1;
}

/* Desktop: Recording buttons in flex row on right (same as default buttons) */
.message-input-wrapper.recording .cancel-btn,
.message-input-wrapper.recording .pause-btn,
.message-input-wrapper.recording .send-recording-btn {
    position: static;
}

/* Hide default buttons during recording */
.message-input-wrapper.recording .upload-btn,
.message-input-wrapper.recording .mic-btn,
.message-input-wrapper.recording .send-btn {
    display: none !important;
}

/* Container for recording buttons - matches .action-buttons positioning */
.message-input-wrapper.recording .action-buttons {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    pointer-events: none;
}

.message-input-wrapper.recording .action-buttons > * {
    pointer-events: auto;
}

/* Mobile: Recording buttons positioned at 25%, 50%, 75% like regular action buttons */
@media (max-width: 768px) {
    .message-input-wrapper.recording .cancel-btn,
    .message-input-wrapper.recording .pause-btn,
    .message-input-wrapper.recording .send-recording-btn {
        position: absolute !important;
        bottom: 10px !important;
        min-width: auto !important;
        width: 52px !important;
        height: 52px !important;
        padding: 10px !important;
    }

    .message-input-wrapper.recording .cancel-btn {
        left: 25% !important;
        transform: translateX(-50%) !important;
    }

    .message-input-wrapper.recording .pause-btn {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .message-input-wrapper.recording .send-recording-btn {
        left: 75% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }

    .message-input-wrapper.recording .cancel-btn svg,
    .message-input-wrapper.recording .pause-btn svg,
    .message-input-wrapper.recording .send-recording-btn svg {
        width: 29px !important;
        height: 29px !important;
    }
}

/* Freeze waveform when paused */
.message-input-wrapper.paused .waveform-bar {
    animation-play-state: paused !important;
}

/* Transcribing state - keep green background with spinner */
.message-input-wrapper.transcribing {
    background: var(--accent-color) !important;
    position: relative;
}

.message-input-wrapper.transcribing .message-input {
    background: transparent !important;
    color: transparent !important;
}

.message-input-wrapper.transcribing .message-input::placeholder {
    color: transparent !important;
}

.message-input-wrapper.transcribing .upload-btn,
.message-input-wrapper.transcribing .send-btn {
    display: none !important;
}

.transcribe-spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.15s ease-out;
}

.transcribe-spinner.fade-out {
    opacity: 0;
}

@media (max-width: 768px) {
    .message-input-wrapper.transcribing {
        min-height: 120px;
    }
}

/* Loading indicator */
.loading {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-color);
    animation: loading-pulse 1.4s infinite ease-in-out;
}

@keyframes loading-pulse {
    0%, 80%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    40% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Settings Panel */
.settings-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 999;
}

.settings-overlay.active {
    display: block;
}

.settings-panel {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100vh;
    background: var(--bg-primary);
    border-left: 1px solid var(--border-color);
    z-index: 1000;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.settings-panel.active {
    right: 0;
}

.settings-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.settings-header h3 {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
}

.close-settings {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--icon-dim);
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.2s;
}

.close-settings:hover {
    color: var(--icon-bright);
}

.settings-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.setting-group {
    margin-bottom: 28px;
}

.setting-group label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.toggle-prompt {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
    padding: 4px;
}

.setting-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
}

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

.setting-slider {
    width: 100%;
    height: 6px;
    background: var(--bg-secondary);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
}

.setting-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--accent-color);
    border-radius: 50%;
    cursor: pointer;
}

.setting-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--accent-color);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 6px;
}

.setting-textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    margin-top: 8px;
}

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

.setting-hint {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 6px;
}

.settings-footer {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.save-settings-btn {
    width: 100%;
    padding: 12px;
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

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

.settings-status {
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 12px;
    min-height: 20px;
}

.settings-status.success {
    color: #4ade80;
}

.settings-status.error {
    color: #f87171;
}

/* Custom Modal */
.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10003;
}

.custom-modal-overlay.active {
    display: flex;
}

.custom-modal {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 32px;
    max-width: 600px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    position: relative;
}

.custom-modal-close-x {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.custom-modal-close-x:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.custom-modal-title {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.custom-modal-message {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 24px;
}

.custom-modal-input {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 15px;
    font-family: inherit;
    margin-bottom: 24px;
    transition: all 0.2s ease;
}

.custom-modal-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(130, 150, 150, 0.1);
    background: var(--bg-primary);
}

.custom-modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

/* Center single button in modal */
.custom-modal-buttons .custom-modal-btn:only-child {
    margin: 0 auto;
}

.custom-modal-btn {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.custom-modal-btn-primary {
    background: var(--accent-muted);
    color: white;
}

.custom-modal-btn-primary:hover {
    background: var(--accent-color);
}

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

.custom-modal-btn-secondary:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.custom-modal-btn-project {
    background: var(--icon-dim);
    color: white;
}

.custom-modal-btn-project:hover {
    background: var(--icon-bright);
}

.custom-modal-btn-danger {
    background: var(--danger-muted);
    color: white;
}

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

/* =============================================================================
   SEARCH MODAL
   ============================================================================= */

.search-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    z-index: 1999;
}

.search-modal-overlay.active {
    display: block;
}

.search-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    width: 90%;
    max-width: 700px;
    max-height: 80vh;
    z-index: 2000;
    display: none;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.search-modal.active {
    display: flex;
}

.search-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.search-modal-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
}

.close-search {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--icon-dim);
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.2s;
}

.close-search:hover {
    color: var(--icon-bright);
}

.search-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-icon {
    position: absolute;
    left: 14px;
    color: var(--text-secondary);
    pointer-events: none;
}

.search-modal-input {
    width: 100%;
    padding: 12px 16px 12px 42px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 15px;
    font-family: inherit;
}

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

.search-scope-container {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--text-secondary);
}

.search-scope-container label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.search-scope-container input[type="radio"] {
    cursor: pointer;
    accent-color: var(--accent-dark);
    width: 16px;
    height: 16px;
}

.search-results {
    flex: 1;
    overflow-y: auto;
}

.search-result {
    padding: 16px;
    margin-bottom: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.search-result:hover {
    background: var(--hover-color);
    border-color: var(--accent-color);
}

.search-result-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.search-result-meta {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.search-result-match {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-top: 8px;
    padding-left: 12px;
    border-left: 2px solid var(--border-color);
}

.search-result-match strong {
    color: var(--accent-color);
    font-weight: 600;
}

.search-result-match mark,
.search-preview mark {
    background-color: rgba(130, 150, 150, 0.2);
    color: var(--accent-color);
    font-weight: 600;
    padding: 2px 4px;
    border-radius: 3px;
}

.search-empty,
.search-loading {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
    font-size: 14px;
}

/* =============================================================================
   EXPORT MODAL
   ============================================================================= */

.export-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    z-index: 1999;
}

.export-modal-overlay.active {
    display: block;
}

.export-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    z-index: 2000;
    display: none;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.export-modal.active {
    display: flex;
}

.export-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.export-modal-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
}

.close-export {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--icon-dim);
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.2s;
}

.close-export:hover {
    color: var(--icon-bright);
}

.export-modal-body {
    padding: 24px;
}

.export-modal-description {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.export-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.export-option-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.export-option-btn:hover {
    background: var(--hover-color);
    border-color: var(--accent-color);
}

.export-option-icon {
    color: var(--icon-default);
    flex-shrink: 0;
}

.export-option-text {
    flex: 1;
}

.export-option-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.export-option-desc {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Mobile hamburger menu */
.mobile-menu-btn {
    display: none; /* Hidden by default, shown via media queries */
    position: fixed;
    top: 10px;
    left: 16px; /* Fixed position on desktop */
    z-index: 999; /* Below sidebar (1000) so it's hidden behind when sidebar opens */
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    color: var(--text-primary);
    opacity: 1;
    transition: background 0.2s, opacity 0.3s ease; /* Fade only, no transform animation */
    /* Vertically align icon center with header elements */
    align-items: center;
    justify-content: center;
    height: 44px; /* Total height including padding */
}

.mobile-menu-btn.header-hidden {
    opacity: 0;
    pointer-events: none;
}

.mobile-menu-btn:hover {
    background: var(--hover-color);
}

.mobile-menu-btn svg {
    display: block;
    width: 24px;
    height: 24px;
}

/* Mobile sidebar overlay */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}


/* =============================================================================
   MOBILE OVERFLOW MENU
   ============================================================================= */

.mobile-overflow-btn {
    display: none; /* Hidden by default, shown on mobile in conversation view */
}

.mobile-overflow-menu {
    position: absolute;
    top: 70px;
    right: 20px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
    min-width: 180px;
}

.mobile-overflow-menu.active {
    display: block;
}

.overflow-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid var(--border-color);
}

.overflow-menu-item:last-child {
    border-bottom: none;
}

.overflow-menu-item:hover {
    background: var(--hover-color);
}

.overflow-menu-item svg {
    flex-shrink: 0;
    color: var(--icon-default);
}

/* Desktop: ensure overflow menu is never shown */
@media (min-width: 769px) {
    .mobile-overflow-btn {
        display: none !important;
    }

    .mobile-overflow-menu {
        display: none !important;
    }
}

/* Desktop: Sidebar auto-hide when viewing conversations/tomes */
@media (min-width: 769px) {
    /* Make sidebar an overlay on desktop (like mobile) */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 1000;
        transform: translateX(0);
        transition: transform 0.3s ease;
    }

    /* Hide sidebar by default on desktop - can be toggled with menu button */
    .sidebar:not(.mobile-active) {
        transform: translateX(-100%);
    }

    /* Main content always full width on desktop */
    .main-content {
        margin-left: 0 !important;
    }

    /* Show overlay when sidebar is active on desktop */
    .sidebar.mobile-active ~ .sidebar-overlay {
        display: block;
    }

    /* Show hamburger menu on desktop too */
    .mobile-menu-btn {
        display: flex;
    }
}

/* Mobile responsive styles */
@media (max-width: 768px) {
    /* Fix iOS 100vh bug - use dynamic viewport height with fallback */
    .app-container {
        height: 100vh; /* Fallback */
        height: 100dvh; /* Dynamic viewport height for modern browsers */
        height: -webkit-fill-available; /* iOS Safari fallback */
    }

    /* Increase base font size for better readability on mobile */
    body {
        font-size: 17px;
    }

    /* Slightly larger message text on mobile */
    .message-content {
        font-size: 17px;
        line-height: 1.7;
    }

    /* Additional bottom padding for messages on mobile */
    .message {
        margin-bottom: 34px; /* 24px default + 10px additional */
    }

    /* Show hamburger menu on mobile with percentage positioning */
    .mobile-menu-btn {
        display: flex;
        left: 5%; /* Percentage-based positioning for mobile only */
    }
    
    /* Make header buttons square on mobile - hide text, show only icon */
    .header-action-btn {
        padding: 10px;
        min-width: 40px;
        min-height: 40px;
    }
    
    .header-action-btn .btn-text {
        display: none;
    }
    
    .header-action-btn svg {
        width: 24px;  /* Increased from 20px to 24px (20% larger) to match other header icons on mobile */
        height: 24px;
    }
    
    /* Hide sidebar by default on mobile */
    .sidebar {
        position: fixed;
        top: 0;
        left: -85%;
        width: 85%;
        height: 100vh;
        z-index: 1000;
        transition: left 0.3s ease;
    }

    /* Smaller sidebar icons on mobile */
    .sidebar-buttons svg {
        width: 36px;
        height: 36px;
    }
    
    /* Show sidebar when active */
    .sidebar.mobile-active {
        left: 0;
    }

    /* Prevent scrolling on main content when sidebar is open on mobile */
    /* NOTE: Do NOT use position:fixed on body - it permanently breaks iOS Safari scroll */
    /* NOTE: Do NOT use overflow:hidden on main-content - it breaks iOS Safari scroll context */
    body.sidebar-open {
        overflow: hidden;
    }

    /* iOS Safari fix: Use ONLY pointer-events:none, NOT overflow:hidden
       overflow:hidden breaks the scroll layer for messages-container */
    body.sidebar-open .main-content {
        pointer-events: none;
        /* overflow: hidden - REMOVED - breaks iOS Safari scroll context */
    }

    body.sidebar-open .messages-container {
        pointer-events: none;
    }

    /* Show overlay when sidebar is active */
    .sidebar.mobile-active ~ .sidebar-overlay {
        display: block;
    }
    
    /* Make main content full width on mobile */
    .main-content {
        width: 100%;
        margin-left: 0;
    }
    
    /* Adjust chat input area for mobile */
    .chat-input-container {
        padding: 12px;
    }
    
    .message-input {
        font-size: 16px; /* Prevents zoom on iOS */
    }

    /* Increase sidebar text size for better legibility on mobile */
    .conversation-item-title {
        font-size: 16px; /* Was 14px, increased by 2px */
    }

    .conversation-item-meta {
        font-size: 14px; /* Was 12px, increased by 2px */
    }

    /* Increase button text sizes to match titles (16px) on mobile */
    .view-all-btn {
        font-size: 16px; /* Was 12px */
    }

    .section-header {
        font-size: 16px; /* Was 11px */
    }

    /* Increase project header font size to match conversations on mobile */
    .project-item-header {
        font-size: 16px; /* Was 14px */
    }

    .project-item-meta {
        font-size: 14px; /* Was 11px, to match conversation-item-meta */
    }

    /* Add bottom buffer to sidebar so last items are comfortably visible */
    .sidebar {
        padding-bottom: 30px;
    }

    /* Make modals more mobile-friendly */
    .custom-modal-content {
        width: 90%;
        max-width: 400px;
        margin: 20px;
    }
    
    /* Search modal mobile */
    .search-modal {
        width: 95%;
        max-height: 90vh;
    }
    
    .search-modal-header,
    .search-modal-body {
        padding: 16px;
    }
}

/* =============================================================================
   CODE BLOCK DOWNLOAD STYLING - Added for code download feature
   ============================================================================= */

.code-block-container {
    margin: 16px 0;
    border-radius: 8px;
    overflow: hidden;
    background: #0a0a0a;
    border: 1px solid var(--border-color);
}

.code-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #151515;
    border-bottom: 1px solid var(--border-color);
}

.code-language-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.code-download-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.code-download-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.code-download-btn:active {
    transform: translateY(0);
}

/* =============================================================================
   PROJECT ITEMS - CLEAN VERSION
   ============================================================================= */

.project-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 4px;
    position: relative;
    padding-right: 60px;
}

.project-item-header > div:first-child {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.project-item-header > div:first-child > button {
    flex-shrink: 0;
}

.project-item-header > div:first-child > span {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-item-actions {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

.project-item-header:hover .project-item-actions {
    opacity: 1;
}

@media (max-width: 768px) {
    .project-item-actions {
        opacity: 1;
    }
}

/* =============================================================================
   FILE CONTEXT (Smart File Management)
   ============================================================================= */

.file-context-container {
    padding: 12px 24px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

.file-context-section {
    margin-bottom: 12px;
}

.file-context-section:last-child {
    margin-bottom: 0;
}

.file-context-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.file-context-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.clear-all-files-btn {
    background: var(--danger-color);
    border: none;
    color: white;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background 0.2s;
}

.clear-all-files-btn:hover {
    background: var(--danger-hover);
}

.file-context-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.file-context-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 13px;
    transition: border-color 0.2s;
}

.file-context-section.active .file-context-item {
    border: 1px solid var(--accent-color);
    background: var(--bg-secondary);
}

.file-context-item svg {
    flex-shrink: 0;
    color: var(--icon-default);
}

.file-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cache-timer {
    font-size: 11px;
    color: var(--accent-color);
    margin-left: auto;
}

.remove-file-btn,
.reactivate-file-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--text-secondary);
    padding: 0 4px;
    line-height: 1;
}

.remove-file-btn:hover {
    color: var(--danger-color);
}

.reactivate-file-btn:hover {
    color: var(--accent-color);
}

.file-context-section.inactive .file-context-item {
    opacity: 0.6;
}

/* Transcribing indicator */
.transcribing-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.transcribing-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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


/* ============================================= */
/* FILE CREATION UI STYLES - Auto-added by patch */
/* ============================================= */

/* Created files container */
.created-files {
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(125, 155, 126, 0.08);
    border: 1px solid rgba(125, 155, 126, 0.3);
    border-radius: 8px;
    font-family: 'Shippori Mincho', serif;
}

.created-files-header {
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 10px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.created-file-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-top: 8px;
    background: var(--bg-primary);
    border: 1px solid var(--accent-color);
    border-radius: 6px;
    color: var(--accent-color);
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 400;
}

.created-file-link:hover {
    background: rgba(125, 155, 126, 0.1);
    transform: translateX(4px);
    border-color: var(--accent-color);
}

.created-file-link svg {
    flex-shrink: 0;
    opacity: 0.9;
}

/* Animation for file creation */
@keyframes fileCreated {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.created-file-link {
    animation: fileCreated 0.3s ease-out;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .created-files {
        padding: 10px 12px;
    }
    
    .created-file-link {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    .created-file-link svg {
        width: 14px;
        height: 14px;
    }
}





/* =============================================================================
   MARKDOWN RENDERING STYLES FOR ORI'S MESSAGES
   ============================================================================= */

/* Headers in markdown */
.message-content h1 {
    font-size: 1.5em;
    font-weight: 600;
    margin: 1.5em 0 0.5em 0;
    color: var(--text-primary);
    border: none;
}

.message-content h2 {
    font-size: 1.2em;
    font-weight: 600;
    margin: 1.2em 0 0.4em 0;
    color: var(--text-primary);
}

.message-content h3 {
    font-size: 1.1em;
    font-weight: 600;
    margin: 1em 0 0.3em 0;
    color: var(--text-primary);
}

/* Horizontal rules (dividers) */
.message-content hr {
    border: none;
    border-top: 2px solid var(--border-color);
    margin: 2em 0;
    opacity: 0.3;
}

/* Paragraphs */
.message-content p {
    margin-bottom: 1em;
    line-height: 1.6;
}

/* Lists */
.message-content ul, .message-content ol {
    margin: 1em 0;
    padding-left: 2em;
}

.message-content li {
    margin-bottom: 0.5em;
    line-height: 1.6;
}

/* Text formatting */
.message-content strong {
    font-weight: 600;
    color: var(--text-primary);
}

.message-content em {
    font-style: italic;
}

/* Inline code */
.message-content code {
    background: var(--hover-color);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: 'Courier New', Monaco, monospace;
    font-size: 0.9em;
    color: var(--text-primary);
}

/* Code blocks */
.message-content pre {
    background: var(--hover-color);
    padding: 1em;
    border-radius: 6px;
    overflow-x: auto;
    margin: 1em 0;
}

.message-content pre code {
    background: none;
    padding: 0;
    font-size: 0.85em;
    line-height: 1.5;
}

/* Blockquotes */
.message-content blockquote {
    border-left: 3px solid var(--accent-color);
    padding-left: 1em;
    margin: 1em 0;
    color: var(--text-secondary);
    font-style: italic;
}

/* Links */
.message-content a {
    color: var(--accent-color);
    text-decoration: none;
}

.message-content a:hover {
    text-decoration: underline;
}

/* Tables */
.message-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
}

.message-content th, .message-content td {
    border: 1px solid var(--border-color);
    padding: 0.5em;
    text-align: left;
}

.message-content th {
    background: var(--hover-color);
    font-weight: 600;
}

/* First/last element spacing */
.message-content > p:first-child,
.message-content > h1:first-child,
.message-content > h2:first-child,
.message-content > h3:first-child {
    margin-top: 0;
}

.message-content > *:last-child {
    margin-bottom: 0;
}

/* ===== state-driven visibility (surgical add) ===== */
.chat-header[data-state="empty"] [data-visibility="conversation-only"],
.chat-header[data-state="empty"] #mobile-overflow-btn {
  display: none !important;
}
.chat-header[data-state="conversation"] [data-visibility="empty-only"] {
  display: none !important;
}



/* Bulk Selection Mode */

.bulk-action-bar {
    background: var(--bg-tertiary, #2a2a2a);
    border-top: 1px solid var(--border-color, #333333);
    padding: 0.5rem 1rem;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    margin-top: auto;
}

.delete-selected-btn {
    background: var(--danger-color, #A85951);
    color: var(--text-primary, #ececec);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.cancel-btn {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.cancel-btn:hover {
    background: var(--hover-color);
}

.cancel-btn:focus {
    outline: none;
}

.delete-selected-btn {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: var(--danger-color);
    color: white;
}

.delete-selected-btn:disabled {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: not-allowed;
    opacity: 0.5;
}

.delete-selected-btn:hover:not(:disabled) {
    background: var(--danger-hover);
}

.delete-selected-btn:focus {
    outline: none;
}

/* Checkbox accent color */
.selection-checkbox {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--accent-color, #829696);
    margin: 0;
    flex-shrink: 0;
}

/* Hide selection checkboxes by default */
body:not(.selection-mode) .selection-checkbox {
    display: none;
}

/* Selection checkbox styling and positioning */
.selection-checkbox-container {
    display: inline-flex !important;
    align-items: center;
    margin-right: 8px;
    vertical-align: middle;
}

.selection-checkbox {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: #829696;
    margin: 0;
    flex-shrink: 0;
}

.selection-checkbox-container {
    display: inline-flex !important;
    align-items: center;
    margin-right: 4px; /* reduced from 8px */
    vertical-align: middle;
    flex-shrink: 0;
}

/* Hide individual item buttons when in selection mode to save space */
.selection-mode .project-item .project-actions,
.selection-mode .conversation-item .conversation-actions {
    display: none !important;
}

/* Hide project action buttons in selection mode */
.selection-mode .project-item-actions {
    display: none !important;
}

/* Also hide the metadata to save even more space */
.selection-mode .project-item-meta {
    display: none !important;
}

.selection-mode .project-conversations {
    display: none !important;
}

/* Hide conversation action buttons and metadata in selection mode */
.selection-mode .conversation-item-actions {
    display: none !important;
}

.selection-mode .conversation-item-meta {
    display: none !important;
}

/* Make sure project and conversation items display as flex for proper alignment */
.selection-mode .project-item,
.selection-mode .conversation-item {
    display: flex;
    align-items: center;
}

/* Hide checkboxes when not in selection mode */
body:not(.selection-mode) .selection-checkbox-container {
    display: none !important;
}




/* =============================================================================
   FULL-SCREEN DROP OVERLAY - UPDATED WITH ORI COLORS
   Replace the existing drop overlay CSS in styles.css with this
   ============================================================================= */

/* Drop overlay - hidden by default */
.drop-overlay {
    position: fixed;
    top: 0;
    left: 280px; /* Sidebar width */
    right: 0;
    bottom: 0;
    background: rgba(42, 42, 42, 0.65); /* --bg-tertiary with 65% opacity (more transparent) */
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.drop-overlay.active {
    display: flex;
    pointer-events: all;
}

/* Animated dotted border - Ori green */
.drop-overlay-border {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border: 3px dashed #829696; /* --accent-color (Ori green) */
    border-radius: 12px;
    animation: dash 20s linear infinite;
}

@keyframes dash {
    to {
        stroke-dashoffset: -100;
    }
}

/* Center content */
.drop-overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    z-index: 1;
}

/* Large folder icon - Ori green outlined */
.drop-overlay-icon {
    width: 80px;
    height: 80px;
    opacity: 0.9;
    color: #829696; /* --accent-color (Ori green) - for stroke="currentColor" */
}

.drop-overlay-icon svg {
    width: 100%;
    height: 100%;
    stroke: #829696; /* --accent-color (Ori green) */
    fill: none; /* Outlined, not filled */
    stroke-width: 2;
}

/* Drop text */
.drop-overlay-text {
    font-family: 'Shippori Mincho', serif;
    font-size: 20px;
    color: #ececec; /* --text-primary */
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* Pulse animation for icon */
.drop-overlay.active .drop-overlay-icon {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

/* Global drag & drop overlay - covers entire window */
.global-drop-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(26, 26, 26, 0.95); /* Translucent dark background */
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.global-drop-overlay.active {
    display: flex;
    pointer-events: all;
}

/* Dotted border around perimeter - accent green */
.global-drop-overlay::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border: 3px dashed #829696; /* Accent green */
    border-radius: 12px;
    animation: dash-rotate 20s linear infinite;
}

@keyframes dash-rotate {
    to {
        stroke-dashoffset: -100;
    }
}

/* Center content with upload icon */
.global-drop-overlay .drop-overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    z-index: 1;
}

/* Upload icon - larger and pulsing */
.global-drop-overlay .drop-overlay-icon {
    width: 70px;
    height: 70px;
    color: #829696; /* Accent green */
    opacity: 0.95;
}

.global-drop-overlay.active .drop-overlay-icon {
    animation: pulse-upload 2s ease-in-out infinite;
}

@keyframes pulse-upload {
    0%, 100% {
        transform: scale(1);
        opacity: 0.95;
    }
    50% {
        transform: scale(1.15);
        opacity: 1;
    }
}

/* Drop text */
.global-drop-overlay .drop-overlay-text {
    font-family: 'Shippori Mincho', serif;
    font-size: 24px;
    color: #ececec; /* --text-primary */
    font-weight: 500;
    letter-spacing: 0.5px;
}


/* ============================================================================
   FILE METADATA STEALTH STYLING
   Hides file IDs from users while keeping them readable for the LLM
   ============================================================================ */

.file-metadata {
    /* Make it invisible */
    font-size: 1px;
    line-height: 0;
    opacity: 0;
    color: transparent;
    
    /* Prevent user interaction */
    user-select: none;
    pointer-events: none;
    
    /* Collapse space */
    display: inline;
    width: 0;
    height: 0;
    overflow: hidden;
    
    /* Ensure it doesn't break layout */
    position: absolute;
    left: -9999px;
}





/* Floating Files Button - isolated styles only */
button.floating-files-btn {
    position: fixed !important;
    top: 20px !important;  /* Inline with header buttons */
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 999 !important;
    background: rgba(130, 150, 150, 0.2) !important;
    border: 1px solid rgba(130, 150, 150, 0.4) !important;
    border-radius: 20px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    color: #ececec !important;
    cursor: pointer !important;
    display: inline-flex !important; /* Use inline-flex for proper vertical alignment - works with .visibility-hidden */
    align-items: center !important;
    gap: 6px !important;
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

button.floating-files-btn.header-hidden {
    opacity: 0;
    transform: translateX(-50%) !important; /* Keep same transform to prevent position shift */
    pointer-events: none;
}

/* Quieter appearance when conversation has zero files */
#floating-files-btn.no-files {
    opacity: 0.35;
    pointer-events: auto;       /* still clickable */
    transition: opacity 0.2s ease;
}

/* Ensure header-hidden takes priority even when no-files is present */
#floating-files-btn.no-files.header-hidden {
    opacity: 0;
    pointer-events: none;
}

/* Show on hover for desktop to indicate it's still clickable */
@media (hover: hover) {
    #floating-files-btn.no-files:hover {
        opacity: 0.8;
    }
}

/* When the button is visible, it should display as flex */
button.floating-files-btn[style*="display: flex"] {
    display: flex !important;
}

/* ADD THIS NEW RULE for the SVG icon */
button.floating-files-btn svg {
    flex-shrink: 0 !important;
}

/* Permanent hide class for when no conversation is selected */
button.floating-files-btn.visibility-hidden {
    display: none !important;
}

/* Touch devices: Position floating files button below header to avoid overlap */
/* Uses pointer: coarse to target all touch devices (phones, tablets, iPads) */
@media (pointer: coarse) {
    button.floating-files-btn {
        top: 75px !important;
    }
}

/* =============================================================================
   FILES MODAL - Matches search-modal and export-modal patterns
   ============================================================================= */

/* Files Modal Overlay */
.files-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    z-index: 10001;
}

.files-modal-overlay.active {
    display: block;
}

/* Files Modal Container */
.files-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    width: 90%;
    max-width: 700px;
    min-height: 400px;
    max-height: 80vh;
    z-index: 10002;
    display: none;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.files-modal.active {
    display: flex;
}

/* Files Modal Header */
.files-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    position: relative;
}

.files-modal-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
    flex: 1;
    text-align: center;
    padding: 0 40px; /* Space for close button on right */
}

.close-files-modal {
    background: none;
    border: none;
    color: var(--icon-dim);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    flex-shrink: 0;
}

/* Position close button absolutely for modals with centred titles */
.files-modal-header .close-files-modal {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
}

.close-files-modal:hover {
    color: var(--icon-bright);
}

/* =============================================================================
   ANALYSIS NOTIFICATION MODAL - File analysis complete toast
   ============================================================================= */

.analysis-notification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 10003;
    animation: fadeIn 0.2s ease-out;
}

.analysis-notification-overlay.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.analysis-notification-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    width: 90%;
    max-width: 400px;
    z-index: 10004;
    display: none;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideIn 0.3s ease-out;
    overflow: hidden;
}

.analysis-notification-modal.active {
    display: flex;
}

.analysis-notification-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 24px 16px 24px;
}

.analysis-notification-icon svg {
    width: 48px;
    height: 48px;
    color: var(--accent-color, #10b981);
}

.analysis-notification-content {
    padding: 0 24px 24px 24px;
    text-align: center;
}

.analysis-notification-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.analysis-notification-filename {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 8px 0;
    word-break: break-word;
}

.analysis-notification-stats {
    font-size: 13px;
    color: var(--text-dim);
    margin: 0;
}

.analysis-notification-hint {
    font-size: 14px;
    color: var(--text-color);
    margin-top: 16px;
    font-style: italic;
    opacity: 0.85;
}

.analysis-notification-actions {
    display: flex;
    border-top: 1px solid var(--border-color);
}

.analysis-notification-btn {
    flex: 1;
    padding: 16px;
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.analysis-notification-btn-dismiss {
    color: var(--text-secondary);
    border-right: 1px solid var(--border-color);
}

.analysis-notification-btn-dismiss:hover {
    background: var(--bg-hover);
}

.analysis-notification-btn-primary {
    color: var(--accent-color, #10b981);
}

.analysis-notification-btn-primary:hover {
    background: var(--bg-hover);
}

/* File Analysis Status in Files Modal */
.file-analysis-status {
    font-size: 12px;
}

.file-analysis-status.analysis-complete {
    color: var(--accent-color, #10b981);
}

.file-analysis-status.analysis-in-progress {
    color: var(--text-dim);
}

/* View All Modals (Tomes, Projects, Conversations) */
.view-all-header-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px 16px 24px;
    border-bottom: 1px solid var(--border-color);
}

.view-all-header-row .view-all-search-input {
    flex: 1;
}

.view-all-header-row .close-files-modal {
    position: static;
    transform: none;
    flex-shrink: 0;
}

.view-all-search-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.view-all-search-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(130, 150, 150, 0.2);
}

.view-all-search-input::placeholder {
    color: var(--text-secondary);
}

.view-all-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0;
}

/* Modal tabs */
.files-modal-tabs {
    display: flex;
    padding: 0 24px;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
}

.files-modal-tab {
    flex: 1;
    padding: 12px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.files-modal-tab:hover {
    color: var(--text-primary);
}

.files-modal-tab.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

/* Files Modal Body */
.files-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
}

/* Tab content */
.files-tab-content {
    display: none;
}

.files-tab-content.active {
    display: block;
}

/* Files list */
.files-modal-list {
    display: flex;
    flex-direction: column;
}

/* File item in modal */
.file-modal-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease;
    gap: 12px;
}

.file-modal-item:hover {
    background: var(--hover-color);
}

.file-modal-item:last-child {
    border-bottom: none;
}

/* Last viewed file - sticky highlight */
.file-modal-item.last-viewed,
.all-chats-file-item.last-viewed {
    background: var(--hover-color);
}

/* Selected file item - persistent highlight after clicking */
.file-modal-item.file-item-selected,
.all-chats-file-item.file-item-selected {
    background: var(--hover-color);
    border-left: 3px solid var(--accent-color);
}

/* File modal checkbox - matches bulk select styling */
.file-modal-item input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--accent-color, #829696);
    margin: 0;
    flex-shrink: 0;
}

/* File info section - aligned with All Chats aesthetic */
.file-modal-item-info {
    flex: 1;
    min-width: 0;
}

.file-modal-item-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-modal-item-meta {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Search item content wrapper */
.file-modal-item-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* Search index content with preview */
.search-index-content {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.search-preview {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color: var(--text-secondary);
}

.search-index-meta {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* File modal actions */
.file-modal-item-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Download button - dim grey, brighter on hover */
.file-modal-item button.file-download-btn {
    background: none !important;
    border: none !important;
    color: var(--icon-dim) !important;
    cursor: pointer !important;
    padding: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    transition: color 0.2s !important;
    line-height: 1 !important;
}

.file-modal-item button.file-download-btn:hover {
    color: var(--accent-color) !important;
    background: none !important;
}

.file-modal-item button.file-download-btn svg {
    display: block !important;
}

/* Delete button - dim grey, danger on hover */
.file-modal-item button.delete-file-btn,
.file-modal-item .file-modal-item-actions button.delete-file-btn {
    background: none !important;
    border: none !important;
    color: var(--icon-dim) !important;
    font-size: 18px !important;
    cursor: pointer !important;
    padding: 4px !important;
    line-height: 1 !important;
    transition: color 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.file-modal-item button.delete-file-btn:hover,
.file-modal-item .file-modal-item-actions button.delete-file-btn:hover {
    color: var(--danger-color) !important;
}

/* Bulk download button in footer */
.bulk-download-btn,
#bulk-download-files-btn {
    background: #829696;  /* Accent color */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.bulk-download-btn:hover,
#bulk-download-files-btn:hover {
    background: #6b7a7a;  /* Darker accent on hover */
}

.bulk-download-btn:disabled,
#bulk-download-files-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Hide the icon in bulk download button */
.bulk-download-btn svg,
#bulk-download-files-btn svg {
    display: none;
}

/* Bulk delete button in footer */
.bulk-delete-btn,
#bulk-delete-files-btn {
    background: var(--danger-color);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.bulk-delete-btn:hover,
#bulk-delete-files-btn:hover {
    background: var(--danger-hover);
}

.bulk-delete-btn:disabled,
#bulk-delete-files-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Files Modal Footer */
.files-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Download button styling - matches export icon (silver → green hover) */
.download-file-btn {
    background: none;
    border: none;
    color: var(--icon-default); /* Silver */
    padding: 4px;
    cursor: pointer;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
}

.download-file-btn:hover {
    color: var(--accent-color); /* Green */
}

.download-file-btn svg {
    width: 16px;
    height: 16px;
}

.bulk-download-btn {
    background: var(--accent-color);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bulk-download-btn:hover {
    background: var(--accent-hover);
}

.bulk-download-btn svg {
    width: 14px;
    height: 14px;
}

.download-file-btn:hover,
.bulk-download-btn:hover {
    background: var(--accent-hover);
}

.download-file-btn svg,
.bulk-download-btn svg {
    width: 14px;
    height: 14px;
}

/* CONFIRMATION MODAL - Custom styled (replaces browser alerts) */
.confirmation-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.confirmation-modal-overlay.active {
    display: flex;
}

.confirmation-modal {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    width: 90%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.confirmation-modal-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.confirmation-modal-message {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 24px;
    line-height: 1.5;
}

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

.confirmation-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.confirmation-btn-cancel {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.confirmation-btn-cancel:hover {
    background: var(--hover-color);
}

.confirmation-btn-confirm {
    background: var(--danger-color);
    color: white;
}

.confirmation-btn-confirm:hover {
    background: var(--danger-hover);
}

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

.confirmation-btn-secondary:hover {
    background: var(--hover-color);
}

.confirmation-btn-danger {
    background: var(--danger-color);
    color: white;
}

.confirmation-btn-danger:hover {
    background: var(--danger-hover);
}

/* Support for 3-button layout in confirmation modal */
.confirmation-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.confirmation-modal-actions .confirmation-btn {
    flex: 0 1 auto;
    white-space: nowrap;
}

/* File Not Found Message */
.file-not-found-message .file-not-found-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 24px;
    gap: 16px;
}

.file-not-found-icon svg {
    color: var(--text-secondary);
    opacity: 0.5;
}

.file-not-found-text {
    color: var(--text-secondary);
}

.file-not-found-text strong {
    display: block;
    font-size: 16px;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.file-not-found-text p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.file-not-found-close {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.file-not-found-close:hover {
    background: var(--hover-color);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .files-modal {
        width: 95%;
        max-height: 90vh;
    }

    .files-modal-header,
    .files-modal-body,
    .files-modal-footer {
        padding: 16px;
    }

    .confirmation-modal {
        width: 90%;
        max-width: 340px;
        padding: 20px;
    }
}






/* =============================================================================
   LIST MODAL - For viewing all conversations/projects/tomes with bulk edit
   ============================================================================= */

/* List Modal Overlay */
.list-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    z-index: 1999;
}

.list-modal-overlay.active {
    display: block;
}

/* List Modal Container */
.list-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    width: 90%;
    max-width: 800px;
    min-height: 400px;
    max-height: 85vh;
    z-index: 2000;
    display: none;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.list-modal.active {
    display: flex;
}

/* List Modal Header */
.list-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.list-modal-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
}

.close-list-modal {
    background: none;
    border: none;
    color: var(--icon-dim);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.close-list-modal:hover {
    color: var(--icon-bright);
}

/* List Modal Controls */
.list-modal-controls {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    gap: 12px;
    align-items: center;
}

.list-modal-search-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.list-modal-search-wrapper .search-icon {
    position: absolute;
    left: 12px;
    color: var(--text-secondary);
    pointer-events: none;
}

.list-modal-search {
    width: 100%;
    padding: 10px 12px 10px 36px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.list-modal-search:focus {
    border-color: var(--accent-color);
}

.list-modal-select-all {
    padding: 10px 16px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.list-modal-select-all:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* List Modal Body */
.list-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0;
}

/* List Modal List */
.list-modal-list {
    display: flex;
    flex-direction: column;
}

/* List Item */
.list-modal-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease;
    cursor: pointer;
}

.list-modal-item:hover {
    background: var(--hover-color);
}

.list-modal-item:last-child {
    border-bottom: none;
}

/* Checkbox */
.list-modal-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

/* Item Content */
.list-modal-item-content {
    flex: 1;
    min-width: 0;
}

.list-modal-item-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-modal-item-meta {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Selected state */
.list-modal-item.selected {
    background: rgba(130, 150, 150, 0.1);
}

/* List Modal Footer */
.list-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-secondary);
}

.list-modal-selection-count {
    font-size: 14px;
    color: var(--text-secondary);
}

.list-modal-selection-count span {
    font-weight: 600;
    color: var(--text-primary);
}

.list-modal-delete-btn {
    padding: 10px 20px;
    background: transparent;
    border: 1px solid #d32f2f;
    border-radius: 8px;
    color: #d32f2f;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.list-modal-delete-btn:hover {
    background: #d32f2f;
    color: white;
}

.list-modal-delete-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .list-modal {
        width: 95%;
        max-height: 90vh;
    }

    .list-modal-header {
        padding: 16px 20px;
    }

    .list-modal-title {
        font-size: 16px;
    }

    .list-modal-controls {
        padding: 12px 20px;
        flex-direction: column;
        align-items: stretch;
    }

    .list-modal-select-all {
        width: 100%;
    }

    .list-modal-item {
        padding: 12px 20px;
    }

    .list-modal-footer {
        padding: 12px 20px;
        flex-direction: column;
        gap: 12px;
    }

    .list-modal-delete-btn {
        width: 100%;
    }
}

/* =============================================================================
   ALL CHATS TAB - New Two-Level Tab Structure
   ============================================================================= */

/* Main Scope Tabs (This Chat / All Chats) */
.files-scope-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-color);
    padding: 0 20px;
    background: var(--bg-primary);
}

.files-scope-tab {
    padding: 12px 24px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.files-scope-tab:hover {
    color: var(--text-primary);
    background: var(--hover-color);
}

.files-scope-tab.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

/* Scope Content Containers */
.files-scope-content {
    display: none;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.files-scope-content.active {
    display: flex;
}

/* Remove padding in All Chats views to prevent overflow */
.files-scope-content#all-chats-content .files-modal-body {
    padding: 0;
}


/* All Chats Views */
.all-chats-view,
.delete-files-view {
    display: none;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.all-chats-view.active,
.delete-files-view.active {
    display: flex;
}

/* All Chats Controls (Filter + Search) */
.all-chats-controls {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary);
}

.all-chats-filter {
    min-width: 180px;
    padding: 8px 32px 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 15px;
    cursor: pointer;
    transition: border-color 0.2s ease;
    accent-color: var(--accent-color);
    /* Custom dropdown arrow in theme light grey */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.all-chats-filter:hover,
.all-chats-filter:focus {
    outline: none;
    border-color: var(--accent-color);
}

/* Dropdown option hover color using theme accent */
.all-chats-filter option:hover,
.all-chats-filter option:focus,
#search-all-filter option:hover,
#search-all-filter option:focus {
    background-color: var(--accent-color);
    color: var(--text-primary);
}

.all-chats-search-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.all-chats-search-wrapper .search-icon {
    position: absolute;
    left: 12px;
    color: var(--text-secondary);
    pointer-events: none;
}

.all-chats-search {
    width: 100%;
    padding: 8px 12px 8px 36px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 15px;
    transition: border-color 0.2s ease;
}

.all-chats-search:focus {
    outline: none;
    border-color: var(--accent-color);
}

.all-chats-search::placeholder {
    color: var(--text-secondary);
}

/* Conversation List Item */
.all-chats-conversation-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease;
    cursor: pointer;
}

.all-chats-conversation-item:hover {
    background: var(--hover-color);
}

.all-chats-conversation-info {
    flex: 1;
    min-width: 0;
}

.all-chats-conversation-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.all-chats-conversation-meta {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.all-chats-conversation-meta span {
    white-space: nowrap !important;
}

/* Detail View Header with Back Button */
.all-chats-detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.all-chats-back-btn {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    color: var(--icon-dim);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.all-chats-back-btn:hover {
    color: var(--icon-bright);
}

.all-chats-detail-title {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* File Item in All Chats */
.all-chats-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease;
}

.all-chats-file-item:hover {
    background: var(--hover-color);
}

.all-chats-file-item:last-child {
    border-bottom: none;
}

.all-chats-file-info {
    flex: 1;
    min-width: 0;
}

.all-chats-file-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.all-chats-file-meta {
    font-size: 12px;
    color: var(--text-secondary);
}

.all-chats-file-source {
    font-weight: 500;
    color: var(--text-primary);
}

/* All Files metadata styling */
.all-files-meta-item {
    color: var(--text-secondary);
}

.all-files-meta-separator {
    margin: 0 6px;
    color: var(--text-tertiary);
}

.all-files-chat-link {
    color: var(--accent-color);
    cursor: pointer;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: bottom;
}

.all-files-chat-link:hover {
    text-decoration: underline;
}

.all-files-this-chat {
    color: var(--text-tertiary);
    font-style: italic;
}

/* Import Button (minimal icon) - dim grey to brighter grey */
.all-chats-import-btn {
    padding: 8px;
    background: none;
    color: var(--icon-dim);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.all-chats-import-btn:hover {
    color: var(--accent-color);
    background: transparent;
}

.all-chats-import-btn svg {
    width: 18px;
    height: 18px;
}

/* Delete Permanent Button - dim grey to danger on hover */
.all-chats-import-btn.delete-permanent-btn {
    color: var(--icon-dim);
}

.all-chats-import-btn.delete-permanent-btn:hover {
    color: var(--danger-color);
    background: transparent;
}

.all-chats-import-btn.delete-permanent-btn svg {
    transform: none;
}

/* Empty/Loading States */
.all-chats-empty,
.all-chats-loading {
    padding: 48px 24px;
    text-align: center;
    color: var(--text-secondary);
}

.all-chats-empty svg {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    opacity: 0.3;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .all-chats-controls {
        flex-direction: column;
        gap: 8px;
    }
    
    .all-chats-filter {
        width: 100%;
        min-width: 0;
    }
}


/* Match This Chat checkbox colours & spacing */
#all-chats-detail-view .all-chats-file-checkbox {
    accent-color: var(--accent-color);  /* same green tick */
    margin-right: 10px;                 /* match spacing */
}

/* Match the row layout exactly */
.all-chats-file-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
}
.all-chats-file-info {
    flex: 1;
    min-width: 0;
}

/* ===== All Chats bulk import + checkbox styling (Ori file modal) ===== */

#all-chats-detail-view .all-chats-file-checkbox {
    accent-color: var(--accent-color);
    margin-right: 10px;
}

.all-chats-file-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
}

.all-chats-file-info {
    flex: 1;
    min-width: 0;
}

/* Match the Download button look for the All Chats bulk import button */
#all-chats-bulk-import-btn {
    background: #829696;  /* Accent color */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

#all-chats-bulk-import-btn:hover {
    background: #6b7a7a;  /* Darker accent on hover */
}

/* ===== All Files Flat List View (new simplified UI) ===== */

/* File item layout - row with clickable info and actions */
.all-files-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease;
}

.all-files-item:hover {
    background: var(--hover-color);
}

.all-files-item:last-child {
    border-bottom: none;
}

/* Clickable file info area (opens file viewer) */
.all-files-clickable {
    flex: 1;
    min-width: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.all-files-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.all-files-meta {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Actions container - holds import btn/text and delete btn */
.all-files-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* "Imported" text in teal accent */
.all-files-imported-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--accent-color);
    padding: 8px;
}

/* Delete button - dimmed by default, danger on hover */
.all-files-delete-btn {
    padding: 8px;
    background: none;
    color: var(--icon-dim);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.all-files-delete-btn:hover {
    color: var(--danger-color);
    background: transparent;
}

.all-files-delete-btn svg {
    width: 18px;
    height: 18px;
}



/* =============================================================================
   TOME VIEW - Reader View Button and Reader Mode
   ============================================================================= */

/* Floating Reader View Button - tome view only */
button.floating-reader-btn {
    position: fixed;
    top: 85px;
    right: 20px;
    z-index: 10000;
    background: rgba(130, 150, 150, 0.2);
    border: 1px solid rgba(130, 150, 150, 0.4);
    color: #ececec;
    padding: 8px 16px;
    border-radius: 20px;
    font-family: 'Shippori Mincho', serif;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.35;
    transition: background 0.2s ease, opacity 0.2s ease;
}

button.floating-reader-btn:hover {
    opacity: 1;
    background: rgba(130, 150, 150, 0.3);
}

button.floating-reader-btn svg {
    flex-shrink: 0;
}

/* Hidden state for scroll behavior */
button.floating-reader-btn.header-hidden {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

/* Mobile: hide reader button entirely (not needed/doesn't work on mobile) */
@media (max-width: 768px) {
    button.floating-reader-btn {
        display: none !important;
    }
}

/* Reader mode view - full screen tome content */
.tome-reader-mode {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    z-index: 10100;
    overflow-y: auto;
    padding: 80px 40px 40px;
}

.tome-reader-mode::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.02);
    pointer-events: none;
    z-index: -1;
}

.tome-reader-mode.active {
    display: block;
}

.tome-reader-content {
    max-width: 800px;
    margin: 0 auto;
    color: var(--text-primary);
    line-height: 1.8;
    font-size: 16px;
}

.tome-reader-content h1 {
    font-size: 32px;
    margin-bottom: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.tome-reader-content h2 {
    font-size: 24px;
    margin-top: 30px;
    margin-bottom: 15px;
    font-weight: 500;
    color: var(--text-primary);
}

.tome-reader-content h3 {
    font-size: 20px;
    margin-top: 24px;
    margin-bottom: 12px;
    font-weight: 500;
    color: var(--text-primary);
}

.tome-reader-content p {
    margin-bottom: 16px;
    color: var(--text-secondary);
}

.tome-reader-content ul, .tome-reader-content ol {
    margin-bottom: 16px;
    padding-left: 24px;
    color: var(--text-secondary);
}

.tome-reader-content li {
    margin-bottom: 8px;
}

.tome-reader-content code {
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 14px;
}

.tome-reader-content pre {
    background: rgba(255, 255, 255, 0.05);
    padding: 16px;
    border-radius: 6px;
    overflow-x: auto;
    margin-bottom: 16px;
}

.tome-reader-content pre code {
    background: none;
    padding: 0;
}

.tome-reader-content blockquote {
    border-left: 3px solid var(--accent-color);
    padding-left: 16px;
    margin: 16px 0;
    color: var(--text-secondary);
    font-style: italic;
}

/* Mobile adjustments for reader mode */
@media (max-width: 768px) {
    .tome-reader-mode {
        padding: 60px 20px 20px;
    }
    
    .tome-reader-content h1 {
        font-size: 26px;
    }
    
    .tome-reader-content h2 {
        font-size: 22px;
    }
}

/* Tome content container - responsive width */
@media (max-width: 768px) {
    .tome-content-container {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 20px !important;
        border-radius: 0 !important;
    }
}

/* =============================================================================
   FILE VIEWER MODAL
   ============================================================================= */

.file-viewer-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.file-viewer-overlay.active {
    display: flex;
}

.file-viewer-container {
    width: 90%;
    height: 90%;
    max-width: 1200px;
    max-height: 1170px; /* Increased by 30%: 900px * 1.3 = 1170px */
    background: var(--bg-primary);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.file-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.file-viewer-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
}

.file-viewer-close {
    background: none !important;
    border: none !important;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: color 0.2s ease;
    color: var(--icon-dim) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.file-viewer-close:hover {
    color: var(--icon-bright) !important;
}

.file-viewer-close svg {
    width: 24px;
    height: 24px;
    stroke: currentColor !important;
}

.file-viewer-content {
    flex: 1;
    overflow: hidden;
    background: #f5f5f5;
}

.file-viewer-content iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.file-viewer-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.file-nav-btn {
    background: var(--accent-color);
    color: var(--bg-primary);
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.file-nav-btn:hover {
    background: var(--accent-dark);
    transform: translateY(-2px);
}

.file-nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.file-nav-btn svg {
    width: 16px;
    height: 16px;
}

.file-nav-info {
    color: var(--text-secondary);
    font-size: 14px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .file-viewer-container {
        width: 100%;
        height: calc(100% - 140px); /* Add bottom buffer to sit clear of message input container */
        max-width: none;
        max-height: none;
        border-radius: 0;
        margin-bottom: 140px; /* Match the buffer used for chat messages on mobile */
    }

    .file-nav-btn {
        padding: 8px 12px;
        font-size: 12px;
    }

    .file-nav-info {
        font-size: 12px;
    }
}

/* =============================================================================
   INLINE FILE VIEWER (IN CHAT)
   ============================================================================= */

/* File viewer message - wider than normal for comfortable reading */
.file-viewer-message {
    max-width: 95% !important;
    width: 95% !important;
}

.file-viewer-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-left: 1px solid rgba(130, 150, 150, 0.2);
    border-bottom: 1px solid rgba(130, 150, 150, 0.2);
    border-radius: 0 0 8px 8px;
}

.file-viewer-header-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(130, 150, 150, 0.1);
    border-bottom: 1px solid var(--border-color);
    border-radius: 8px 8px 0 0;
    position: relative; /* For absolute positioning of excerpt nav */
}

.file-viewer-filename {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0; /* Important for flex text truncation */
}

.file-viewer-close-inline {
    background: none !important;
    border: none !important;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    color: var(--icon-dim) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.file-viewer-close-inline:hover {
    color: var(--icon-bright) !important;
}

.file-viewer-close-inline svg {
    width: 18px;
    height: 18px;
    stroke: currentColor !important;
}

.file-viewer-iframe-inline {
    width: 100%;
    height: 780px; /* Increased by 30%: 600px * 1.3 = 780px */
    border: none;
    background: white;
}

/* File viewer loading indicator */
.file-viewer-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 780px;
    background: var(--user-message-bg);
    color: var(--text-secondary);
    gap: 16px;
    font-size: 14px;
}

.file-viewer-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid transparent;
    border-top-color: var(--icon-dim);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Hide iframe while loading */
.file-viewer-content-wrapper:has(.file-viewer-loading:not([style*="display: none"])) .file-viewer-iframe-inline {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* PDF.js viewer container */
.pdf-viewer-container {
    position: relative;
    width: 100%;
    max-height: none; /* Let content determine height */
    overflow: auto;
    background: white;
}

.pdf-pages-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: white;
}

.pdf-page {
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.pdf-canvas {
    display: block;
}

/* Text layer for selection and search */
.pdf-text-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    opacity: 0.2;
    line-height: 1;
    pointer-events: none;
}

.pdf-text-item {
    position: absolute;
    white-space: pre;
    pointer-events: auto;
    color: transparent;
}

.pdf-text-item::selection {
    background: rgba(130, 150, 150, 0.4);
}

/* PDF search highlights */
.pdf-search-highlight {
    background-color: #829696 !important;
    color: #1a1a1a !important;
    padding: 2px !important;
    border-radius: 2px !important;
}

/* Dark mode for PDF viewer */
.file-viewer-message[data-theme="dark"] .pdf-viewer-container {
    background: transparent;
}

.file-viewer-message[data-theme="dark"] .pdf-page {
    background: #2a2a2a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.file-viewer-message[data-theme="dark"] .pdf-canvas {
    filter: invert(1) hue-rotate(180deg);
}

.file-viewer-nav-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(130, 150, 150, 0.1);
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 8px 8px;
}

/* Hide ALL navigation for PDF files */
.pdf-nav,
.file-viewer-message[data-pdf="true"] .file-viewer-nav-inline,
.file-viewer-message[data-pdf="true"] .file-nav-btn,
.file-viewer-message[data-pdf="true"] .file-nav-info {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    visibility: hidden !important;
}

/* PDF file viewer - no fixed height, content determines size */
.file-viewer-message[data-pdf="true"] .file-viewer-loading {
    height: auto;
    min-height: 200px;
    background: transparent !important;
}

.file-viewer-message[data-pdf="true"] .file-viewer-content-wrapper {
    background: transparent !important;
}

/* PDF viewer white background to match other file types */
.file-viewer-message[data-pdf="true"] .pdf-viewer-container,
.file-viewer-message[data-pdf="true"] .pdf-pages-wrapper {
    background: var(--user-message-bg) !important;
}

/* Round the bottom corners of the PDF container to match viewer styling */
.file-viewer-message[data-pdf="true"] .pdf-viewer-container {
    border-radius: 0 0 8px 8px;
}

/* PDF in fullscreen mode - fill available height */
.file-viewer-message[data-pdf="true"][data-fullscreen="true"] .pdf-viewer-container {
    max-height: calc(100vh - 60px); /* Full viewport minus minimal header */
    height: calc(100vh - 60px);
}

/* Ensure the entire PDF viewer message fills the viewport in fullscreen */
.file-viewer-message[data-pdf="true"][data-fullscreen="true"] {
    min-height: calc(100vh - 40px);
}

.file-viewer-message[data-pdf="true"][data-fullscreen="true"] .file-viewer-content-wrapper {
    min-height: calc(100vh - 80px);
}

/* PDF viewer - constrained height in inline mode, scrollable */
.file-viewer-message[data-pdf="true"] .pdf-viewer-container {
    max-height: 780px; /* Match iframe height for consistency */
    overflow-y: auto;
}

/* Override for fullscreen - remove height constraint */
.file-viewer-message[data-pdf="true"][data-fullscreen="true"] .pdf-viewer-container {
    max-height: calc(100vh - 60px);
    height: calc(100vh - 60px);
}

/* Mobile responsive */
@media (max-width: 768px) {
    /* Force explicit positioning on mobile - iOS Safari needs this for scroll to work */
    .main-content {
        position: relative !important;
        flex: 1 !important;
        min-height: 0 !important;
    }

    .messages-container {
        position: absolute !important;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 16px 8px; /* Reduced from 24px */
        padding-top: 105px; /* Buffer for floating header elements/files button on mobile */
        padding-bottom: 145px; /* Buffer to ensure last message and action buttons are visible above input container with visual separation */
    }

    /* Move Ori logo up on mobile empty/new conversation states */
    .welcome-logo,
    .welcome-logo-simple,
    #empty-state-logo {
        margin-top: 0; /* Remove the clamp(30px, 5vh, 60px) margin on mobile */
    }

    .file-viewer-message {
        max-width: 96vw !important; /* Nearly full width but with small margins */
        width: 96vw !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 !important;
        overflow-x: hidden !important; /* Prevent horizontal scroll wobble */
    }

    /* Remove padding from message-content for file viewer */
    .file-viewer-message .message-content {
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    /* Lock horizontal scroll on iframe */
    .file-viewer-iframe-inline {
        height: 520px; /* Increased by 30%: 400px * 1.3 = 520px */
        width: 100%;
        overflow-x: hidden !important;
    }

    .file-viewer-header-inline {
        padding: 10px 12px; /* Slightly reduced padding on mobile */
    }
}


/* File viewer controls and theme toggle */
.file-viewer-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.file-viewer-view-toggle,
.file-viewer-theme-toggle,
.file-viewer-fullscreen-toggle,
.file-viewer-search-toggle,
.file-viewer-chat-toggle,
.file-viewer-view-mode-toggle,
.citation-view-mode-toggle {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.4;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.file-viewer-view-toggle:hover,
.file-viewer-theme-toggle:hover,
.file-viewer-fullscreen-toggle:hover,
.file-viewer-search-toggle:hover,
.file-viewer-chat-toggle:hover,
.file-viewer-view-mode-toggle:hover,
.citation-view-mode-toggle:hover {
    opacity: 1;
}

/* View mode toggle SVG icon sizing - accent color to distinguish from standard silver icons */
.file-viewer-view-mode-toggle svg,
.citation-view-mode-toggle svg {
    width: 16px;
    height: 16px;
    stroke: var(--accent-color);
}

/* View mode toggles should not use opacity fade like other buttons */
.file-viewer-view-mode-toggle,
.citation-view-mode-toggle {
    opacity: 1;
}

/* Chat toggle - hidden by default, shown in fullscreen */
.file-viewer-chat-toggle {
    display: none;
}

.file-viewer-message[data-fullscreen="true"] .file-viewer-chat-toggle {
    display: flex;
}

.file-viewer-chat-toggle svg {
    width: 16px;
    height: 16px;
    stroke: #c0c0c0;
}

/* Active state uses bright opacity, not green - matches other header buttons */
.file-viewer-chat-toggle.active {
    opacity: 1;
}

/* =============================================================================
   FILE VIEWER MODAL OVERLAY - Opens on top of Files modal
   ============================================================================= */
.file-viewer-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--user-message-bg);
    z-index: 99999; /* Maximum - above everything */
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.file-viewer-modal-overlay .file-viewer-message {
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
    animation: none;
    display: flex;
    flex-direction: column;
}

.file-viewer-modal-overlay .file-viewer-content-wrapper {
    flex: 1;
    height: 100%;
    border-radius: 0;
    border: none;
    display: flex;
    flex-direction: column;
}

.file-viewer-modal-overlay .file-viewer-iframe-inline,
.file-viewer-modal-overlay .pdf-viewer-container {
    flex: 1;
    height: 100%;
}

.file-viewer-modal-overlay .message-role {
    display: none;
}

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

/* =============================================================================
   FILE VIEWER IMPORT BUTTON - Shown in modal mode
   ============================================================================= */
.file-viewer-import-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s, background 0.2s;
    border-radius: 4px;
    flex-shrink: 0;
}

.file-viewer-import-btn:hover {
    opacity: 1;
    background: rgba(130, 150, 150, 0.2);
}

.file-viewer-import-btn svg {
    width: 16px;
    height: 16px;
    stroke: var(--accent-active);
}

.file-viewer-import-text {
    font-size: 12px;
    color: var(--accent-active);
    font-weight: 500;
}

.file-viewer-import-btn.imported {
    opacity: 0.5;
    cursor: default;
}

.file-viewer-import-btn.imported:hover {
    background: none;
}

.file-viewer-import-btn.imported .file-viewer-import-text {
    color: var(--text-secondary);
}

/* In fullscreen, show import button prominently */
.file-viewer-message[data-fullscreen="true"] .file-viewer-import-btn {
    opacity: 1;
}

/* =============================================================================
   FILE VIEWER DOWNLOAD BUTTON - Shown for files not in current chat
   ============================================================================= */
.file-viewer-download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    flex-shrink: 0;
    color: var(--accent-color);
}

.file-viewer-download-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

.theme-icon,
.fullscreen-icon {
    width: 16px;
    height: 16px;
    stroke: #c0c0c0; /* Silver color */
}

.file-viewer-search-toggle svg {
    width: 16px;
    height: 16px;
    stroke: #c0c0c0; /* Silver color */
}

/* File Viewer Search Bar - Frosted glass effect */
.file-viewer-search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(130, 150, 150, 0.15); /* Translucent accent background */
    backdrop-filter: blur(10px); /* Frosted glass blur effect */
    -webkit-backdrop-filter: blur(10px); /* Safari support */
    border-bottom: 1px solid rgba(130, 150, 150, 0.2);
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.file-viewer-search-input {
    flex: 1;
    background: rgba(26, 26, 26, 0.6); /* Semi-transparent dark background */
    border: 1px solid rgba(130, 150, 150, 0.3);
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}

.file-viewer-search-input:focus {
    border-color: var(--accent-color);
    background: rgba(26, 26, 26, 0.8);
}

.file-viewer-search-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.6;
}

.file-viewer-search-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.file-viewer-search-prev,
.file-viewer-search-next,
.file-viewer-search-close {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
    color: var(--text-secondary);
}

.file-viewer-search-prev:hover,
.file-viewer-search-next:hover,
.file-viewer-search-close:hover {
    opacity: 0.7;
    color: var(--text-primary);
}

.file-viewer-search-prev svg,
.file-viewer-search-next svg,
.file-viewer-search-close svg {
    width: 16px;
    height: 16px;
}

.file-viewer-search-count {
    font-size: 13px;
    color: var(--text-secondary);
    min-width: 40px;
    text-align: center;
}

/* Search highlight styling injected into iframe */
.file-viewer-search-highlight {
    background-color: #5a7a5b !important; /* Darker hover-over accent green */
    color: #ffffff !important;
    padding: 2px 0 !important;
    border-radius: 2px !important;
}

.file-viewer-search-highlight.search-current {
    background-color: var(--accent-color) !important; /* Theme accent color for current match */
    color: #1a1a1a !important;
    padding: 2px 0 !important;
    border-radius: 2px !important;
    box-shadow: 0 0 0 2px var(--accent-color) !important;
}

/* Dark mode (default) - inverts content, so use white background (becomes black after invert) */
.file-viewer-message[data-theme="dark"] .file-viewer-iframe-inline {
    filter: invert(1) hue-rotate(180deg);
    background: #f5f5f5; /* Light background inverts to dark */
}

/* Light mode */
.file-viewer-message[data-theme="light"] .file-viewer-iframe-inline {
    filter: none;
    background: #ffffff;
}

/* Fullscreen mode - expands viewer to fill viewport */
.file-viewer-message[data-fullscreen="true"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 9999 !important;
    border-radius: 0 !important;
    background: var(--bg-primary) !important;
}

.file-viewer-message[data-fullscreen="true"] .message-content {
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    background: transparent !important;
}

.file-viewer-message[data-fullscreen="true"] .file-viewer-content-wrapper {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    background: transparent !important;
}

.file-viewer-message[data-fullscreen="true"] .file-viewer-iframe-inline {
    flex: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
}

/* Hide nav bar in fullscreen to prevent black band */
.file-viewer-message[data-fullscreen="true"] .file-viewer-nav-inline {
    display: none !important;
}

/* Hide message role in fullscreen */
.file-viewer-message[data-fullscreen="true"] .message-role {
    display: none !important;
}

/* Ensure file viewer header is ALWAYS visible in fullscreen - never hide the close button */
.file-viewer-message[data-fullscreen="true"] .file-viewer-header-inline {
    display: flex !important;
    position: relative;
    z-index: 10000;
}

/* Desktop: Unified input container with buttons inside */
@media (min-width: 769px) {
    .input-row {
        position: relative;
        flex-direction: row;
        align-items: stretch;
        gap: 0;
    }

    .message-input-wrapper {
        flex: 1;
    }

    #message-input {
        width: 100%;
        margin: 0;
        box-sizing: border-box;
    }

    /* Hide drop-zone on desktop */
    .input-sidebar .drop-zone {
        display: none;
    }

    /* Position buttons inside the textarea on desktop */
    .input-sidebar {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        flex-direction: row;
        gap: 8px;
        z-index: 10;
        margin: 0;
        pointer-events: auto;
    }

    .input-sidebar .action-buttons {
        display: flex;
        flex-direction: row;
        gap: 8px;
    }

    /* Create hard partition from buttons with padding */
    #message-input {
        width: 100%;
        padding-right: 230px !important; /* Hard partition - prevents text from reaching buttons */
        box-sizing: border-box;
    }
}

/* ================================
   Search Modal Specific Styles
   ================================ */

/* Search index item styling */
.search-index-item {
    cursor: pointer;
    border-radius: 8px;
    margin-bottom: 8px;
    padding: 12px 16px;
}

.search-index-item:last-child {
    margin-bottom: 0;
}

/* Search item hover */
.search-index-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.search-index-content {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.search-role-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.user-badge {
    background: var(--accent-color);
    color: white;
}

.assistant-badge {
    background: var(--user-message-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.search-preview {
    flex: 1;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.search-index-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 4px;
}

.search-time {
    color: var(--text-tertiary);
}

/* Highlight flash animation for navigated messages */
@keyframes highlight-flash {
    0% {
        background: rgba(130, 150, 150, 0.3);
    }
    100% {
        background: transparent;
    }
}

.highlight-flash {
    animation: highlight-flash 2s ease-out;
}

/* Mobile: full-width input area */
@media (max-width: 768px) {
    .input-area {
        left: 16px;
        right: 16px;
        width: auto;
        transform: translateY(0);
    }

    .input-area.input-hidden {
        transform: translateY(100px);
    }

    /* Mobile: Fullscreen file viewer chat overlay - match normal mobile input behavior */
    .input-area.fullscreen-chat-overlay {
        left: 16px !important;
        right: 16px !important;
        width: auto !important;
        max-width: none !important;
        transform: translateY(0) !important;
        bottom: 16px !important;
    }

    /* Mobile: Hidden state for fullscreen chat overlay - slide down like normal input */
    .input-area.input-hidden.fullscreen-chat-overlay {
        transform: translateY(100px) !important;
    }
}

/* =============================================================================
   MOBILE MODAL FIXES - Comprehensive fixes for all modals on mobile
   ============================================================================= */
@media (max-width: 768px) {
    /* -------------------------------------------------------------------------
       MOBILE TYPOGRAPHY SCALE - Standardized text sizes

       --mobile-text-xs:    11px  (tiny labels, badges)
       --mobile-text-sm:    13px  (meta info, secondary text, tabs)
       --mobile-text-base:  14px  (body text, previews, content)
       --mobile-text-md:    15px  (titles, headings)
       --mobile-text-input: 16px  (inputs - prevents iOS zoom)
       ------------------------------------------------------------------------- */
    :root {
        --mobile-text-xs: 11px;
        --mobile-text-sm: 13px;
        --mobile-text-base: 14px;
        --mobile-text-md: 15px;
        --mobile-text-input: 16px;
    }

    /* -------------------------------------------------------------------------
       HIDE MODAL SEARCH COUNTS ON MOBILE - Prevent clash with placeholder
       ------------------------------------------------------------------------- */
    #tomes-count,
    #projects-count,
    #conversations-count {
        display: none;
    }

    /* -------------------------------------------------------------------------
       FILES MODAL (Edit) - Full-screen mobile experience
       ------------------------------------------------------------------------- */
    .files-modal {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
        top: 0;
        left: 0;
        transform: none;
    }

    .files-modal-header {
        padding: 12px 16px;
        position: sticky;
        top: 0;
        background: var(--bg-primary);
        z-index: 10;
    }

    .files-modal-title {
        font-size: var(--mobile-text-md);
    }

    /* Scope tabs (This Chat / All) */
    .files-scope-tabs {
        padding: 0 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .files-scope-tab {
        padding: 10px 16px;
        font-size: var(--mobile-text-sm);
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Inner tabs (Files / Images / Index) */
    .files-modal-tabs {
        padding: 0 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .files-modal-tab {
        padding: 10px 12px;
        font-size: var(--mobile-text-sm);
        white-space: nowrap;
        flex-shrink: 0;
    }

    .files-modal-body {
        padding: 12px;
        flex: 1;
        overflow-y: auto;
    }

    .files-modal-footer {
        padding: 12px;
        flex-direction: column;
        gap: 8px;
    }

    .files-modal-footer button {
        width: 100%;
    }

    /* File items */
    .file-modal-item {
        padding: 10px 12px;
        gap: 10px;
    }

    .file-modal-item-name {
        font-size: var(--mobile-text-base);
    }

    .file-modal-item-meta {
        font-size: var(--mobile-text-xs);
    }

    /* View All Modals (Tomes, Projects, Conversations) - Mobile */
    .view-all-modal {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
        top: 0;
        left: 0;
        transform: none;
    }

    .view-all-modal .files-modal-header {
        padding: 12px 16px;
        position: sticky;
        top: 0;
        background: var(--bg-primary);
        z-index: 10;
    }

    .view-all-modal .files-modal-title {
        font-size: var(--mobile-text-md);
    }

    .view-all-modal .close-files-modal {
        right: 16px;
    }

    .view-all-header {
        padding: 16px 16px 12px 16px;
    }

    .view-all-search-row {
        padding: 0 16px 12px 16px;
    }

    .view-all-search-input {
        font-size: var(--mobile-text-input); /* Prevents iOS zoom */
        padding: 12px 14px;
    }

    /* All Chats controls */
    .all-chats-controls {
        padding: 12px;
        flex-direction: column;
        gap: 8px;
    }

    .all-chats-filter {
        width: 100%;
    }

    .all-chats-search-wrapper {
        width: 100%;
    }

    /* All Chats items */
    .all-chats-conversation-item {
        padding: 12px;
    }

    .all-chats-conversation-title {
        font-size: var(--mobile-text-md);
    }

    .all-chats-conversation-meta {
        font-size: var(--mobile-text-sm);
    }

    /* Constrain info width on mobile to leave room for action icons - only for modals with icons */
    #all-chats-list .all-chats-conversation-info,
    #delete-files-list .all-chats-conversation-info {
        max-width: calc(100% - 80px);
    }

    /* Force line break after "Last active" on mobile - only for modals with icons */
    #all-chats-list .all-chats-conversation-meta span:nth-child(6),
    #delete-files-list .all-chats-conversation-meta span:nth-child(6) {
        display: none;
    }
    #all-chats-list .all-chats-conversation-meta span:nth-child(7),
    #delete-files-list .all-chats-conversation-meta span:nth-child(7) {
        flex-basis: 100%;
    }

    /* Detail view header */
    .all-chats-detail-header {
        padding: 12px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .all-chats-detail-title {
        font-size: var(--mobile-text-base);
        flex: 1;
        min-width: 0;
    }

    /* -------------------------------------------------------------------------
       LIST MODAL (View All Conversations/Tomes/Projects) - Full-screen mobile
       ------------------------------------------------------------------------- */
    .list-modal {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        min-height: 100%;
        border-radius: 0;
        top: 0;
        left: 0;
        transform: none;
    }

    .list-modal-header {
        padding: 12px 16px;
        position: sticky;
        top: 0;
        background: var(--bg-primary);
        z-index: 10;
    }

    .list-modal-title {
        font-size: var(--mobile-text-md);
    }

    .list-modal-controls {
        padding: 12px 16px;
        flex-direction: column;
        gap: 10px;
    }

    .list-modal-search-wrapper {
        width: 100%;
    }

    .list-modal-search {
        font-size: var(--mobile-text-input); /* Prevents iOS zoom on focus */
    }

    .list-modal-select-all {
        width: 100%;
        padding: 12px;
    }

    .list-modal-body {
        flex: 1;
        overflow-y: auto;
    }

    .list-modal-item {
        padding: 12px 16px;
        gap: 10px;
    }

    .list-modal-item-title {
        font-size: var(--mobile-text-md);
    }

    .list-modal-item-meta {
        font-size: var(--mobile-text-sm);
        gap: 8px;
    }

    .list-modal-footer {
        padding: 12px 16px;
        flex-direction: column;
        gap: 10px;
        position: sticky;
        bottom: 0;
        background: var(--bg-secondary);
    }

    .list-modal-selection-count {
        text-align: center;
        font-size: var(--mobile-text-sm);
    }

    .list-modal-delete-btn {
        width: 100%;
        padding: 12px;
    }

    /* -------------------------------------------------------------------------
       SEARCH MODAL - Full-screen mobile experience
       ------------------------------------------------------------------------- */
    .search-modal {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
        top: 0;
        left: 0;
        transform: none;
    }

    .search-modal-header {
        padding: 12px 16px;
        position: sticky;
        top: 0;
        background: var(--bg-primary);
        z-index: 10;
    }

    .search-modal-title {
        font-size: var(--mobile-text-md);
    }

    .search-modal-body {
        padding: 12px 16px;
        flex: 1;
        overflow-y: auto;
        gap: 12px;
    }

    .search-modal-input {
        font-size: var(--mobile-text-input); /* Prevents iOS zoom on focus */
        padding: 10px 14px 10px 38px;
    }

    /* Search scope tabs (Current / All) */
    .search-scope-container {
        flex-direction: row;
        gap: 16px;
        font-size: var(--mobile-text-sm);
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .search-scope-container label {
        gap: 6px;
    }

    /* Search results */
    .search-results {
        flex: 1;
        overflow-y: auto;
    }

    .search-result {
        padding: 12px;
        margin-bottom: 10px;
    }

    .search-result-title {
        font-size: var(--mobile-text-md);
    }

    .search-result-meta {
        font-size: var(--mobile-text-sm);
    }

    .search-result-match {
        font-size: var(--mobile-text-base);
    }

    /* Search index items (Current tab content) */
    .search-index-item {
        padding: 10px 12px;
        margin-bottom: 6px;
    }

    .search-index-content {
        gap: 6px;
        flex-direction: column;
        align-items: flex-start;
    }

    .search-role-badge {
        font-size: var(--mobile-text-xs);
        padding: 2px 6px;
    }

    .search-preview {
        font-size: var(--mobile-text-md);
        line-height: 1.4;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        width: 100%;
    }

    .search-index-meta {
        font-size: var(--mobile-text-sm);
        margin-top: 4px;
    }

    /* All tab - conversation/tome list */
    .search-all-list-item {
        padding: 12px;
    }

    /* Detail view in All tab - when a conversation/tome is selected */
    #search-all-detail-view .all-chats-controls {
        padding: 10px 12px !important;
        gap: 10px !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    #search-all-detail-view .all-chats-back-btn {
        padding: 6px;
        min-width: 36px;
        min-height: 36px;
    }

    #search-all-detail-view .all-chats-back-btn svg {
        width: 20px;
        height: 20px;
    }

    #search-all-detail-view .all-chats-search {
        font-size: var(--mobile-text-input); /* Prevents iOS zoom */
        padding: 8px 12px 8px 32px;
    }

    #search-all-detail-view .all-chats-search-wrapper .search-icon {
        left: 10px;
        width: 14px;
        height: 14px;
    }

    .all-chats-detail-title-container {
        padding: 0 12px 10px 12px !important;
    }

    .all-chats-detail-title {
        font-size: var(--mobile-text-base) !important;
    }

    /* Detail view message list */
    #search-all-detail-view .files-modal-body {
        padding: 0 12px 12px 12px;
    }

    #search-all-detail-view .files-modal-list {
        gap: 6px;
    }

    /* Message items in detail view */
    #search-all-detail-list .search-index-item {
        padding: 10px 12px;
        margin-bottom: 6px;
    }

    #search-all-detail-list .search-index-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    #search-all-detail-list .search-role-badge {
        font-size: var(--mobile-text-xs);
        padding: 2px 6px;
    }

    #search-all-detail-list .search-preview {
        font-size: var(--mobile-text-base);
        line-height: 1.4;
        white-space: normal;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        width: 100%;
    }

    #search-all-detail-list .search-index-meta {
        font-size: var(--mobile-text-xs);
    }

    /* Current tab - search within current conversation/tome */
    #search-current-content .all-chats-controls {
        padding: 10px 12px !important;
    }

    #search-current-content .all-chats-search {
        font-size: var(--mobile-text-input); /* Prevents iOS zoom */
        padding: 10px 12px 10px 34px;
    }

    #search-current-content .all-chats-search-wrapper .search-icon {
        left: 10px;
        width: 14px;
        height: 14px;
    }

    #search-current-content .files-modal-body {
        padding: 0 12px 12px 12px;
    }

    /* Message items in Current tab */
    #search-current-list .search-index-item {
        padding: 10px 12px;
        margin-bottom: 6px;
    }

    #search-current-list .search-index-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    #search-current-list .search-role-badge {
        font-size: var(--mobile-text-xs);
        padding: 2px 6px;
    }

    #search-current-list .search-preview {
        font-size: var(--mobile-text-base);
        line-height: 1.4;
        white-space: normal;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        width: 100%;
    }

    #search-current-list .search-index-meta {
        font-size: var(--mobile-text-xs);
    }

    /* Ensure logout button visible on mobile landing page */
    .chat-header:not(.conversation-view) #logout-btn {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* =========================================================================
   SEEDS SYSTEM STYLES
   ========================================================================= */

/* Seed feedback buttons (used in modal detail view) */
.seed-feedback-btn {
    background: transparent;
    border: 1px solid rgba(130, 150, 150, 0.2);
    border-radius: 6px;
    padding: 6px 8px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.seed-feedback-btn:hover {
    border-color: rgba(130, 150, 150, 0.4);
    color: rgba(255, 255, 255, 0.8);
    background: rgba(130, 150, 150, 0.1);
}

.seed-feedback-btn.active {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background: rgba(130, 150, 150, 0.15);
}

.seed-feedback-btn.negative.active {
    border-color: var(--danger-color);
    color: var(--danger-color);
    background: rgba(168, 89, 81, 0.15);
}

/* Seed content text - matches message-content font sizes */
.seed-content-text {
    font-size: 15px; /* Desktop: match message-content */
    line-height: 1.6;
}

@media (max-width: 768px) {
    .seed-content-text {
        font-size: 17px; /* Mobile: match message-content mobile size */
        line-height: 1.7;
    }
}

/* Seed content container in conversation - styled like the modal */
.seed-content-container {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(130, 150, 150, 0.15);
    border-radius: 12px;
    padding: 24px;
    max-width: 700px;
    margin: 0 auto 24px auto;
}

/* =============================================================================
   CONVERSATION TRANSITION / CONTINUITY BUTTON
   ============================================================================= */

.transition-continue-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
}

.transition-continue-btn {
    background: var(--accent-muted);
    color: white;
    border: none;
    padding: 14px 32px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.transition-continue-btn:hover:not(:disabled) {
    background: var(--accent-color);
    transform: translateY(-1px);
}

.transition-continue-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .transition-continue-container {
        padding: 12px;
    }

    .transition-continue-btn {
        font-size: 16px;
        padding: 14px 28px;
        width: 100%;
        max-width: 300px;
    }
}

/* =============================================================================
   DOCUMENT CITATIONS
   ============================================================================= */

/* Citation Markers - inline superscript links */
.citation-marker {
    color: var(--accent-muted);
    cursor: pointer;
    font-size: 0.75em;
    font-weight: 500;
    vertical-align: super;
    padding: 0 2px;
    transition: color 0.15s ease;
    text-decoration: none;
}

.citation-marker:hover {
    color: var(--accent-color);
    text-decoration: none;
}

.citation-text {
    /* Display text styling - can be enhanced if needed */
}

/* Citation Popover - Desktop */
.citation-popover {
    position: fixed;
    z-index: 10000;
    background: var(--bg-secondary);
    border: 1px solid rgba(130, 150, 150, 0.2);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    max-height: 500px;
    min-width: 450px;
    max-width: 600px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.citation-popover-above::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: var(--bg-secondary);
}

.citation-popover-loading {
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-secondary);
}

.citation-popover-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(130, 150, 150, 0.2);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.citation-popover-error {
    padding: 16px;
    color: #ff6b6b;
    text-align: center;
}

.citation-popover-header {
    padding: 10px 14px;
    background: rgba(130, 150, 150, 0.08);
    border-bottom: 1px solid rgba(130, 150, 150, 0.1);
    display: flex;
    align-items: center;
    gap: 10px;
}

.citation-popover-filename {
    color: var(--text-secondary);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.citation-popover-segid {
    background: rgba(130, 150, 150, 0.15);
    color: var(--accent-color);
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 500;
    font-family: monospace;
}

.citation-popover-summary {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    background: rgba(130, 150, 150, 0.08);
    border-top: 1px solid rgba(130, 150, 150, 0.1);
    font-style: italic;
}

.citation-popover-summary strong {
    font-style: normal;
}

.citation-popover-content {
    padding: 14px 18px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-primary);
    max-height: 320px;
    overflow-y: auto;
    flex: 1;
}

.citation-context-before,
.citation-context-after {
    color: var(--text-tertiary);
}

.citation-context-ellipsis {
    color: var(--text-tertiary);
    opacity: 0.6;
}

.citation-highlight {
    background: rgba(130, 150, 150, 0.25);
    color: var(--text-primary);
    padding: 1px 3px;
    border-radius: 3px;
}

.citation-popover-keywords {
    padding: 8px 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-top: 1px solid rgba(130, 150, 150, 0.1);
}

.citation-keyword {
    background: rgba(130, 150, 150, 0.1);
    color: var(--text-secondary);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
}

.citation-popover-actions {
    padding: 10px 14px;
    border-top: 1px solid rgba(130, 150, 150, 0.1);
    display: flex;
    justify-content: center;
}

.citation-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--accent-color);
    border: none;
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.citation-action-btn:hover {
    background: var(--accent-color);
    color: #ffffff;
}

/* Focused excerpt styles */
.excerpt-highlight {
    background: none;
    color: var(--text-primary);
    padding: 0;
    border-radius: 0;
    font-weight: inherit;
}

.excerpt-context {
    color: var(--text-primary);
}

.excerpt-ellipsis {
    color: var(--text-tertiary);
    opacity: 0.7;
    padding: 0 4px;
}

/* Expand/collapse button for popovers */
.citation-expand-btn {
    display: block;
    background: none;
    border: none;
    color: var(--accent-muted);
    font-size: 12px;
    padding: 8px 18px;
    cursor: pointer;
    text-align: right;
    transition: color 0.15s ease;
    text-decoration: none;
}

.citation-expand-btn:hover {
    color: var(--accent-color);
    text-decoration: none;
}

/* Full context view in popover */
.citation-popover-full-context {
    padding: 14px 18px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
    max-height: 320px;
    overflow-y: auto;
    flex: 1;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Citation Full Text Modal */
.citation-full-modal {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
}

.citation-full-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.citation-full-modal-container {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid rgba(130, 150, 150, 0.2);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    max-width: min(800px, 90vw);
    max-height: calc(100vh - 80px);
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.citation-full-modal-header {
    padding: 16px 50px 16px 20px;
    background: rgba(130, 150, 150, 0.08);
    border-bottom: 1px solid rgba(130, 150, 150, 0.1);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.citation-full-modal-filename {
    color: var(--text-secondary);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.citation-full-modal-segid {
    background: rgba(130, 150, 150, 0.15);
    color: var(--accent-color);
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 500;
    font-family: monospace;
}

.citation-full-modal-summary {
    padding: 12px 20px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    background: rgba(130, 150, 150, 0.08);
    border-top: 1px solid rgba(130, 150, 150, 0.1);
    flex-shrink: 0;
    font-style: italic;
}

.citation-full-modal-summary strong {
    font-style: normal;
}

.citation-full-modal-content {
    padding: 20px 24px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-primary);
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Mobile styles for citation full modal */
@media (max-width: 768px) {
    .citation-full-modal-container {
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        border-radius: 0;
    }

    .citation-full-modal-filename {
        font-size: 16px;
    }

    .citation-full-modal-segid {
        font-size: 13px;
        padding: 4px 10px;
    }

    .citation-full-modal-summary {
        font-size: 15px;
    }

    .citation-full-modal-content {
        padding: 20px 16px;
        font-size: 17px;
    }
}

/* Expand button for embedded citations in View in Full */
.embedded-expand-btn {
    display: inline-block;
    background: none;
    border: none;
    color: var(--accent-muted);
    font-size: 12px;
    padding: 6px 0;
    cursor: pointer;
    transition: color 0.15s ease;
    text-decoration: none;
}

.embedded-expand-btn:hover {
    color: var(--accent-color);
    text-decoration: none;
}

/* Full context in embedded citations */
.embedded-full-context {
    white-space: pre-wrap;
}

/* Mobile: Fullscreen citation modals */
@media (max-width: 768px) {
    .citation-popover {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0;
        z-index: 10001;
    }

    .citation-popover::after {
        display: none; /* Hide arrow on mobile */
    }

    .citation-popover-header {
        padding: 16px 20px;
        position: relative;
    }

    /* Add close button for mobile */
    .citation-popover-header::after {
        content: '\00d7';
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 28px;
        color: var(--text-secondary);
        cursor: pointer;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .citation-popover-filename {
        font-size: 16px;
    }

    .citation-popover-segid {
        font-size: 13px;
        padding: 4px 10px;
    }

    .citation-popover-summary {
        font-size: 15px;
        padding: 12px 16px;
    }

    .citation-popover-content {
        max-height: none;
        flex: 1;
        padding: 20px;
        font-size: 17px;
        line-height: 1.7;
    }

    .citation-popover-actions {
        padding: 16px 20px;
        border-top: 1px solid rgba(130, 150, 150, 0.1);
    }

    .citation-action-btn {
        padding: 12px 16px;
        font-size: 15px;
    }

    /* Add backdrop for mobile modal */
    .citation-popover-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7);
        z-index: 10000;
    }
}

/* Embedded Source Viewer */
.embedded-source-viewer {
    margin: 16px 0;
    background: var(--bg-secondary);
    border: 1px solid rgba(130, 150, 150, 0.15);
    border-radius: 8px;
    overflow: hidden;
}

.embedded-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(130, 150, 150, 0.05);
    border-bottom: 1px solid rgba(130, 150, 150, 0.1);
}

.embedded-viewer-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
}

.embedded-viewer-title svg {
    color: var(--accent-color);
}

.embedded-viewer-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.embedded-nav-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(130, 150, 150, 0.2);
    color: var(--text-secondary);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.embedded-nav-btn:hover:not(:disabled) {
    background: rgba(130, 150, 150, 0.1);
    color: var(--text-primary);
}

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

.embedded-nav-position {
    color: var(--text-tertiary);
    font-size: 12px;
    min-width: 40px;
    text-align: center;
}

.embedded-viewer-controls {
    display: flex;
    gap: 6px;
}

.embedded-control-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.embedded-control-btn:hover {
    background: rgba(130, 150, 150, 0.1);
    color: var(--text-primary);
}

.embedded-viewer-content {
    padding: 16px;
    max-height: 250px;
    overflow-y: auto;
}

.embedded-viewer-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    color: var(--text-secondary);
}

.embedded-viewer-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(130, 150, 150, 0.2);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.embedded-viewer-error {
    text-align: center;
    color: #ff6b6b;
    padding: 16px;
}

.embedded-viewer-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
}

.embedded-context {
    color: var(--text-tertiary);
}

.embedded-ellipsis {
    color: var(--text-tertiary);
    opacity: 0.6;
    padding: 8px 0;
}

.embedded-highlight {
    background: rgba(130, 150, 150, 0.25);
    color: var(--text-primary);
    padding: 2px 4px;
    border-radius: 3px;
    transition: background 0.3s ease;
}

.embedded-highlight-flash {
    animation: highlightFlash 1.5s ease;
}

@keyframes highlightFlash {
    0%, 100% { background: rgba(130, 150, 150, 0.25); }
    50% { background: rgba(130, 150, 150, 0.5); }
}

/* Fullscreen Split-Pane Viewer */
.fullscreen-source-viewer {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fullscreen-viewer-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
}

.fullscreen-viewer-container {
    position: relative;
    width: 95vw;
    max-width: 1400px;
    height: 90vh;
    background: var(--bg-primary);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

.fullscreen-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: rgba(130, 150, 150, 0.05);
    border-bottom: 1px solid rgba(130, 150, 150, 0.1);
}

.fullscreen-viewer-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
}

.fullscreen-viewer-controls {
    display: flex;
    gap: 8px;
}

.fullscreen-control-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.fullscreen-control-btn:hover {
    background: rgba(130, 150, 150, 0.1);
    color: var(--text-primary);
}

.fullscreen-viewer-body {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.fullscreen-viewer-left,
.fullscreen-viewer-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fullscreen-viewer-divider {
    width: 1px;
    background: rgba(130, 150, 150, 0.15);
}

.fullscreen-panel-header {
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: rgba(130, 150, 150, 0.05);
    border-bottom: 1px solid rgba(130, 150, 150, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fullscreen-doc-controls {
    display: flex;
    gap: 6px;
}

.fullscreen-doc-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.fullscreen-doc-btn:hover {
    background: rgba(130, 150, 150, 0.1);
    color: var(--text-secondary);
}

.fullscreen-panel-content {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
}

.fullscreen-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-secondary);
}

.fullscreen-error {
    text-align: center;
    color: #ff6b6b;
    padding: 24px;
}

.fullscreen-segment-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fullscreen-segment-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fullscreen-segment-type {
    background: rgba(130, 150, 150, 0.15);
    color: var(--accent-color);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 500;
}

.fullscreen-segment-uid {
    color: var(--text-tertiary);
    font-size: 12px;
    font-family: monospace;
}

.fullscreen-segment-summary p,
.fullscreen-segment-pages {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
    margin-top: 6px;
}

.fullscreen-segment-keywords {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fullscreen-keywords-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.fullscreen-keyword {
    background: rgba(130, 150, 150, 0.1);
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
}

.fullscreen-document-text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-primary);
}

.fullscreen-context-text {
    color: var(--text-tertiary);
}

.fullscreen-ellipsis {
    color: var(--text-tertiary);
    opacity: 0.6;
    padding: 12px 0;
    font-style: italic;
}

.fullscreen-highlight {
    background: rgba(130, 150, 150, 0.3);
    color: var(--text-primary);
    padding: 2px 4px;
    border-radius: 3px;
}

/* Mobile responsiveness for fullscreen viewer */
@media (max-width: 768px) {
    .fullscreen-viewer-container {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }

    .fullscreen-viewer-body {
        flex-direction: column;
    }

    .fullscreen-viewer-divider {
        width: 100%;
        height: 1px;
    }

    .fullscreen-viewer-left,
    .fullscreen-viewer-right {
        flex: none;
        height: 50%;
    }
}

/* =============================================================================
   VIEW IN FULL - RESPONSE WITH SOURCES MODAL
   ============================================================================= */

/* Accent-styled View in Full button in popover */
.citation-view-full-btn {
    display: inline-block;
    background: var(--accent-color);
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

/* View in Full container - centered inside message content */
.view-in-full-container {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(130, 150, 150, 0.1);
    display: flex;
    justify-content: center;
}

/* Message actions (edit/regenerate) - left aligned outside container */
.message-actions {
    margin-top: 8px;
    display: flex;
    justify-content: flex-start;
}

.view-in-full-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent-color);
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.view-in-full-btn svg {
    width: 16px;
    height: 16px;
}

/* Response with Sources Modal */
.response-sources-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
}

.response-sources-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
}

.response-sources-container {
    position: relative;
    width: 95vw;
    max-width: 900px;
    height: 90vh;
    max-height: 90vh;
    background: var(--bg-primary);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

.response-sources-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: rgba(130, 150, 150, 0.05);
    border-bottom: 1px solid rgba(130, 150, 150, 0.1);
    flex-shrink: 0;
}

.response-sources-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.response-sources-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.response-sources-close:hover {
    background: rgba(130, 150, 150, 0.1);
    color: var(--text-primary);
}

.response-sources-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.response-sources-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 200px;
    color: var(--text-secondary);
}

.response-sources-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(130, 150, 150, 0.2);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.response-sources-error {
    text-align: center;
    color: #ff6b6b;
    padding: 40px;
}

/* Response content inside the modal */
.response-sources-content {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-primary);
}

.response-sources-content p {
    margin-bottom: 16px;
}

.response-sources-content h1,
.response-sources-content h2,
.response-sources-content h3 {
    margin-top: 24px;
    margin-bottom: 12px;
}

/* Embedded Citation Boxes */
.embedded-citation-box {
    margin: 16px 0;
    background: var(--bg-secondary);
    border: 1px solid rgba(130, 150, 150, 0.15);
    border-left: 3px solid var(--accent-color);
    border-radius: 8px;
    overflow: hidden;
}

.embedded-citation-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(130, 150, 150, 0.05);
    border-bottom: 1px solid rgba(130, 150, 150, 0.1);
}

.embedded-citation-ref {
    background: rgba(130, 150, 150, 0.15);
    color: var(--accent-color);
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.embedded-citation-filename {
    color: var(--text-secondary);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.embedded-citation-segid {
    background: rgba(130, 150, 150, 0.15);
    color: var(--accent-color);
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 500;
    font-family: monospace;
}

.embedded-citation-content {
    padding: 14px 18px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
}

.embedded-citation-summary {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    background: rgba(130, 150, 150, 0.08);
    border-top: 1px solid rgba(130, 150, 150, 0.1);
    font-style: italic;
}

.embedded-citation-summary strong {
    font-style: normal;
}

.embedded-citation-ellipsis {
    color: var(--text-tertiary);
    opacity: 0.6;
}

/* Expanded state for embedded citation boxes */
.embedded-citation-box.embedded-citation-expanded .embedded-full-context {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Mobile styles for embedded citations */
@media (max-width: 768px) {
    .embedded-citation-ref {
        font-size: 13px;
        padding: 4px 10px;
    }

    .embedded-citation-filename {
        font-size: 16px;
    }

    .embedded-citation-segid {
        font-size: 13px;
        padding: 4px 10px;
    }

    .embedded-citation-content {
        font-size: 17px;
        padding: 16px 20px;
    }

    .embedded-citation-summary {
        font-size: 15px;
        padding: 12px 16px;
    }
}

/* Mobile styles for Response with Sources modal */
@media (max-width: 768px) {
    .response-sources-container {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .response-sources-header {
        padding: 12px 16px;
    }

    .response-sources-title {
        font-size: 16px;
    }

    .response-sources-body {
        padding: 16px;
    }

    .response-sources-content {
        font-size: 16px;
    }

    .embedded-citation-box {
        margin: 12px 0;
    }

    .embedded-citation-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .embedded-citation-source {
        width: 100%;
        order: 2;
    }

    .view-in-full-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   Citation Viewer Styles
   ============================================ */

/* "Full Document View" button in source modal */
.view-in-context-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--accent-color);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

/* Override file-viewer-content-wrapper when in citation viewer mode */
.file-viewer-modal-overlay .file-viewer-content-wrapper.citation-viewer-wrapper {
    display: flex;
    flex-direction: column !important;
    height: 100vh;
    overflow: hidden;
}

/* Citation file viewer in messages container (not in modal overlay) needs its own height */
.citation-file-viewer .file-viewer-content-wrapper.citation-viewer-wrapper {
    display: flex;
    flex-direction: column !important;
    height: calc(100vh - 100px); /* Leave room for header/footer */
    overflow: hidden;
}

/* Citation file viewer message itself needs to expand to fill available space */
.citation-file-viewer {
    width: 100%;
}

/* Ensure fullscreen citation file viewer takes full viewport */
.citation-file-viewer[data-fullscreen="true"] .file-viewer-content-wrapper.citation-viewer-wrapper {
    height: 100vh;
}

/* Body area wrapper for thumbnail panel + content side by side */
.citation-viewer-body {
    display: flex;
    flex-direction: row;
    flex: 1;
    height: 100%; /* Explicit height so children's height: 100% works correctly */
    overflow: hidden;
    min-height: 0; /* Important for flex child to not overflow */
}

/* Ensure content fills remaining space beside thumbnail panel */
.citation-viewer-body > .file-viewer-iframe-inline,
.citation-viewer-body > .pdf-viewer-container,
.citation-viewer-body > .citation-markdown-view,
.citation-viewer-body > .citation-original-view {
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow: auto;
}

/* Loading element inside citation viewer body */
.citation-viewer-body > .file-viewer-loading {
    flex: 1;
    min-width: 0;
    height: 100%; /* Override base 780px height to match parent */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Thumbnail Panel (Left Sidebar) - sized to match citation popovers */
.citation-thumbnail-panel {
    width: 500px;
    min-width: 500px;
    max-width: 500px;
    background: var(--bg-primary);
    border-right: 1px solid rgba(130, 150, 150, 0.2);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    flex-shrink: 0;
    transition: width 0.3s ease, min-width 0.3s ease, opacity 0.3s ease;
    padding: 16px;
    gap: 12px;
}

/* Collapsed state for thumbnail panel */
.citation-thumbnail-panel.collapsed {
    width: 0;
    min-width: 0;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    border-right: none;
    padding: 0;
}

.citation-thumbnail-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-primary, #fff);
    flex-shrink: 0;
}

.citation-thumbnail-header span {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #333);
}

.citation-thumbnail-toggle-mobile {
    background: none;
    border: none;
    color: var(--text-secondary, #666);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.citation-thumbnail-toggle-mobile:hover {
    background: rgba(0, 0, 0, 0.1);
}

.citation-thumbnail-toggle-mobile svg {
    width: 16px;
    height: 16px;
}

.citation-thumbnail-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.citation-thumbnail-item {
    padding: 10px 12px;
    margin-bottom: 6px;
    background: var(--bg-secondary);
    border: 1px solid rgba(130, 150, 150, 0.2);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.citation-thumbnail-item:hover {
    border-color: rgba(130, 150, 150, 0.4);
    background: var(--bg-secondary);
}

.citation-thumbnail-item.active {
    border-color: var(--accent-color, #829696);
    background: var(--bg-secondary);
    box-shadow: 0 0 0 1.5px var(--accent-color, #829696);
}

.citation-thumbnail-item .thumbnail-ref {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-color, #829696);
    flex-shrink: 0;
}

.citation-thumbnail-item .thumbnail-text {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Main content area */
.citation-viewer-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Citation viewer header */
.citation-viewer-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-primary, #fff);
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    position: relative;
    flex-shrink: 0;
    min-height: 48px;
}

.citation-viewer-header .file-viewer-filename {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary, #333);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* File Navigation (around filename) */
.citation-file-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 12px;
}

/* Excerpt Navigation (center of header) */
.citation-excerpt-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    margin-right: auto;
}

/* Navigation buttons */
.citation-nav-btn {
    background: none;
    border: none;
    color: #829696;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.citation-nav-btn:hover:not(:disabled) {
    background-color: rgba(130, 150, 150, 0.2);
    color: #6a7a7a;
}

.citation-nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.citation-nav-btn svg {
    width: 16px;
    height: 16px;
}

.citation-file-indicator,
.citation-excerpt-indicator {
    color: #829696;
    font-size: 12px;
    font-weight: 500;
    min-width: 28px;
    text-align: center;
}

/* File viewer controls in citation mode */
.citation-viewer-header .file-viewer-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

/* Toggle button in header - positioned before controls div */
.citation-thumbnail-toggle {
    background: none;
    border: none;
    color: #829696;
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px; /* Small gap before other controls */
}

.citation-thumbnail-toggle:hover {
    background: rgba(130, 150, 150, 0.2);
}

.citation-thumbnail-toggle svg {
    width: 18px;
    height: 18px;
}

/* Content area for document */
.citation-viewer-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--user-message-bg);
}

.citation-viewer-content .file-viewer-loading {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Markdown and original view containers for non-PDF files */
.citation-markdown-view,
.citation-original-view {
    flex: 1;
    overflow: auto;
    background: var(--user-message-bg);
}

.citation-markdown-view {
    padding: 16px;
    color: #e0e0e0;
    font-size: 14px;
    line-height: 1.6;
}

.citation-markdown-view h1,
.citation-markdown-view h2,
.citation-markdown-view h3,
.citation-markdown-view h4 {
    color: #ffffff;
    margin: 1em 0 0.5em 0;
}

.citation-markdown-view p {
    margin: 0.5em 0;
}

.citation-markdown-view .markdown-error {
    color: #ff6b6b;
    padding: 16px;
    text-align: center;
}

.citation-original-view iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.citation-viewer-content .pdf-viewer-container,
.citation-viewer-content .file-viewer-iframe-inline {
    flex: 1;
    width: 100%;
    height: 100%;
}

/* PDF-specific overrides for citation viewer to match regular modal viewer */
.citation-viewer-content .pdf-viewer-container {
    overflow-y: auto;
    background: transparent;
}

.citation-viewer-content .pdf-pages-wrapper {
    background: var(--user-message-bg);
    min-height: 100%;
}

/* Remove extra background from content area when showing PDF */
.citation-viewer-content:has(.pdf-viewer-container) {
    background: var(--user-message-bg);
}

/* Citation markdown view container */
.citation-markdown-view {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
    background: var(--user-message-bg);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-color);
}

.citation-markdown-view h1,
.citation-markdown-view h2,
.citation-markdown-view h3,
.citation-markdown-view h4,
.citation-markdown-view h5,
.citation-markdown-view h6 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: 600;
    line-height: 1.3;
}

.citation-markdown-view h1 { font-size: 1.8em; }
.citation-markdown-view h2 { font-size: 1.5em; }
.citation-markdown-view h3 { font-size: 1.25em; }
.citation-markdown-view h4 { font-size: 1.1em; }

.citation-markdown-view p {
    margin: 0.75em 0;
}

.citation-markdown-view ul,
.citation-markdown-view ol {
    margin: 0.75em 0;
    padding-left: 1.5em;
}

.citation-markdown-view li {
    margin: 0.25em 0;
}

.citation-markdown-view blockquote {
    margin: 1em 0;
    padding: 0.5em 1em;
    border-left: 3px solid var(--border-color);
    background: rgba(130, 150, 150, 0.05);
    color: var(--text-muted);
}

.citation-markdown-view code {
    background: rgba(130, 150, 150, 0.1);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.9em;
}

.citation-markdown-view pre {
    background: rgba(0, 0, 0, 0.05);
    padding: 1em;
    border-radius: 4px;
    overflow-x: auto;
}

.citation-markdown-view pre code {
    background: none;
    padding: 0;
}

/* Markdown highlight effect for navigation */
.citation-markdown-view .markdown-highlight {
    background-color: rgba(130, 150, 150, 0.3);
    outline: 2px solid rgba(130, 150, 150, 0.5);
    border-radius: 4px;
    transition: background-color 0.3s ease, outline 0.3s ease;
}

/* Original view container */
.citation-original-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.citation-original-view .file-viewer-iframe-inline {
    flex: 1;
    width: 100%;
    height: 100%;
}

/* View mode toggle button - accent color to match sidebar toggle */
.citation-view-mode-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: var(--accent-color);
}

.citation-view-mode-toggle svg {
    width: 18px;
    height: 18px;
}

/* Markdown error message */
.markdown-error {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

/* Citation highlight in document */
.citation-highlight {
    background-color: rgba(130, 150, 150, 0.4);
    border-radius: 2px;
    padding: 0 2px;
    margin: 0 -2px;
}

.citation-highlight.focused {
    background-color: rgba(130, 150, 150, 0.6);
    box-shadow: 0 0 0 2px rgba(130, 150, 150, 0.3);
}

/* Mobile responsive styles for citation viewer */
@media (max-width: 768px) {
    .file-viewer-modal-overlay .file-viewer-content-wrapper.citation-viewer-wrapper {
        flex-direction: column !important;
    }

    .citation-thumbnail-panel {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 280px;
        max-width: 280px;
        z-index: 100001;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
    }

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

    .citation-viewer-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .citation-excerpt-nav {
        order: 3;
        width: 100%;
        justify-content: center;
        margin: 8px 0 0;
    }

    .citation-viewer-header .file-viewer-controls {
        margin-left: 0;
    }
}

/* =============================================================================
   INLINE CITATION VIEWER (within file-viewer-message)
   ============================================================================= */

/* Wrapper for citation viewer layout with thumbnail sidebar */
/* Note: .file-viewer-content-wrapper is already flex-direction: column (from base styles)
   The .citation-viewer-body inside handles the row layout for sidebar + content */
.file-viewer-content-wrapper.citation-viewer-wrapper {
    display: flex;
    flex-direction: column;
}

/* Inline citation thumbnail panel (left sidebar) - sized to match citation popovers (450-600px) */
.file-viewer-content-wrapper .citation-thumbnail-panel {
    width: 480px;
    min-width: 480px;
    max-height: none;
    overflow-y: auto;
    background: var(--bg-secondary, #f8f8f8);
    border-right: 1px solid rgba(130, 150, 150, 0.2);
    padding: 16px;
    flex-direction: column;
    gap: 16px;
}

/* Thumbnail items use citation-popover classes for identical styling */
/* Override position since these are stacked, not floating */
.file-viewer-content-wrapper .citation-thumbnail-item.citation-popover {
    position: relative;
    z-index: auto;
    min-width: 450px; /* Match popover min-width */
    max-width: 100%;
    width: 100%;
    min-height: 300px; /* Same as original */
    max-height: 500px; /* Same as original */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden; /* Clip instead of scroll */
}

/* Expanded state - container grows to fit all content */
.file-viewer-content-wrapper .citation-thumbnail-item.citation-popover.expanded {
    min-height: auto;
    max-height: none;
    height: auto;
    flex: 0 0 auto; /* Don't let flex constrain the height */
}

/* Content area - clip overflow, no scrolling */
.file-viewer-content-wrapper .citation-thumbnail-item.citation-popover .citation-popover-content {
    flex: 1;
    max-height: 400px; /* Same as original */
    overflow: hidden; /* No scrollbars - just clip */
    padding: 16px 18px;
    font-size: 14px;
    line-height: 1.6;
}

/* Expanded content - show all, container grows */
.file-viewer-content-wrapper .citation-thumbnail-item.citation-popover.expanded .citation-popover-content,
.file-viewer-content-wrapper .citation-thumbnail-item.citation-popover.expanded .citation-popover-full-context {
    max-height: none;
    height: auto;
    flex: 0 0 auto;
}

/* Thumbnail scrollbars - very thin and never change color */
.citation-thumbnail-panel,
.citation-thumbnail-panel *,
.citation-thumbnail-panel .citation-popover-content {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(130, 150, 150, 0.3) transparent !important;
}

.citation-thumbnail-panel::-webkit-scrollbar,
.citation-thumbnail-panel *::-webkit-scrollbar,
.file-viewer-content-wrapper .citation-thumbnail-item .citation-popover-content::-webkit-scrollbar {
    width: 2px !important;
    height: 2px !important;
}

.citation-thumbnail-panel::-webkit-scrollbar-track,
.citation-thumbnail-panel *::-webkit-scrollbar-track,
.file-viewer-content-wrapper .citation-thumbnail-item .citation-popover-content::-webkit-scrollbar-track {
    background: transparent !important;
}

.citation-thumbnail-panel::-webkit-scrollbar-thumb,
.citation-thumbnail-panel::-webkit-scrollbar-thumb:hover,
.citation-thumbnail-panel::-webkit-scrollbar-thumb:active,
.citation-thumbnail-panel *::-webkit-scrollbar-thumb,
.citation-thumbnail-panel *::-webkit-scrollbar-thumb:hover,
.citation-thumbnail-panel *::-webkit-scrollbar-thumb:active,
.file-viewer-content-wrapper .citation-thumbnail-item .citation-popover-content::-webkit-scrollbar-thumb,
.file-viewer-content-wrapper .citation-thumbnail-item .citation-popover-content::-webkit-scrollbar-thumb:hover,
.file-viewer-content-wrapper .citation-thumbnail-item .citation-popover-content::-webkit-scrollbar-thumb:active {
    background: rgba(130, 150, 150, 0.3) !important;
    border-radius: 1px !important;
}

/* Thumbnail expand button - align right, dimmed to accent on hover, no underline */
.file-viewer-content-wrapper .citation-thumbnail-item .citation-expand-btn {
    display: block;
    margin-left: auto;
    width: fit-content;
    text-align: right;
    color: var(--accent-muted);
    text-decoration: none;
}

.file-viewer-content-wrapper .citation-thumbnail-item .citation-expand-btn:hover {
    color: var(--accent-color);
    text-decoration: none;
}

.file-viewer-content-wrapper .citation-thumbnail-item.citation-popover:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.file-viewer-content-wrapper .citation-thumbnail-item.active.citation-popover {
    box-shadow: 0 0 0 1.5px var(--accent-color, #829696), 0 6px 24px rgba(0, 0, 0, 0.15);
}

/* Add page number styling in popover header */
.citation-popover-page {
    font-size: 11px;
    color: var(--text-tertiary, #888);
    background: rgba(130, 150, 150, 0.1);
    padding: 3px 8px;
    border-radius: 6px;
    margin-left: auto;
}

/* Excerpt navigation in inline header - absolutely centered */
.file-viewer-header-inline .citation-excerpt-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.file-viewer-header-inline .citation-excerpt-nav button {
    background: none;
    border: none;
    color: #829696;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-viewer-header-inline .citation-excerpt-nav button:hover:not(:disabled) {
    background-color: rgba(130, 150, 150, 0.2);
    color: #6a7a7a;
}

.file-viewer-header-inline .citation-excerpt-nav button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.file-viewer-header-inline .citation-excerpt-nav button svg {
    width: 16px;
    height: 16px;
}

.file-viewer-header-inline .citation-excerpt-nav .excerpt-indicator {
    color: #829696;
    font-size: 12px;
    font-weight: 500;
    min-width: 32px;
    text-align: center;
}

/* Thumbnail toggle button in inline controls */
.file-viewer-controls .citation-thumbnail-toggle,
.citation-thumbnail-toggle {
    background: none;
    border: none;
    color: var(--accent-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    transition: color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-viewer-controls .citation-thumbnail-toggle:hover,
.citation-thumbnail-toggle:hover {
    color: var(--accent-color);
    background: none;
}

.file-viewer-controls .citation-thumbnail-toggle.active,
.citation-thumbnail-toggle.active {
    color: var(--accent-color);
    background: none;
}

/* Thumbnail toggle - filled squares when active, outline when inactive */
.citation-thumbnail-toggle svg rect {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.citation-thumbnail-toggle.active svg rect {
    fill: currentColor;
}

.file-viewer-controls .citation-thumbnail-toggle svg,
.citation-thumbnail-toggle svg {
    width: 18px;
    height: 18px;
}

/* Mobile responsive for inline citation viewer */
@media (max-width: 768px) {
    .file-viewer-content-wrapper.citation-viewer-wrapper {
        flex-direction: column;
    }

    .file-viewer-content-wrapper .citation-thumbnail-panel {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 260px;
        max-width: 260px;
        max-height: none;
        z-index: 1001;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
    }

    .file-viewer-content-wrapper .citation-thumbnail-panel[style*="display: flex"] {
        transform: translateX(0);
    }

    .file-viewer-header-inline .citation-excerpt-nav {
        margin-left: 8px;
    }
}