/* chat.css - Chat interface styles */
/* Chat window, messages, bubbles, code blocks, attachments, and fullscreen mode */

    /* Chat Window Styles */
    .chat-window-container {
        background: linear-gradient(135deg, rgba(26, 26, 26, 0.98) 0%, rgba(13, 13, 13, 0.98) 100%);
        border-top: 2px solid #cc0000;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
        display: flex;
        flex-direction: column;
        height: 400px;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        margin-top: 0;
        margin-bottom: 1px;
        position: relative;
        /* Instant height transition - as fast as the system can render */
        transition: height 0s, transform 0s;
    }
    
    /* Smooth transitions for AI view elements during fullscreen */
    #aiViewTitle,
    #aiViewTokenCards,
    #aiViewStatsCard {
        transition: opacity 0.35s ease-in-out, transform 0.35s ease-in-out, max-height 0.35s ease-in-out, margin 0.35s ease-in-out;
        overflow: hidden;
    }

    .chat-model-bar {
        position: sticky;
        top: 0;
        z-index: 10;
        padding: 8px 12px;
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 8px;
    }
    
    .chat-model-bar .model-dropdown-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Floating Chat Buttons */
    .chat-floating-btn {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(40, 40, 40, 0.8);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #888;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }

    .chat-floating-btn:hover {
        background: rgba(204, 0, 0, 0.2);
        border-color: rgba(204, 0, 0, 0.4);
        color: #cc0000;
    }

    .chat-floating-btn svg {
        width: 16px;
        height: 16px;
    }

    /* Fullscreen Chat Button - small floating centered button */
    .fullscreen-chat-btn {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 44px;
        width: 24px;
        height: 14px;
        background: transparent;
        border: none;
        color: #666;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        transition: color 0.2s ease, opacity 0.2s ease;
        z-index: 10;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .fullscreen-chat-btn:hover {
        color: #cc0000;
    }

    .fullscreen-chat-btn:focus {
        outline: none;
    }

    .fullscreen-chat-btn svg {
        width: 12px;
        height: 12px;
    }

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

    .fullscreen-chat-btn svg {
        width: 18px;
        height: 18px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Copilot Header Button - in header on far right */
    .copilot-header-btn {
        width: 32px;
        height: 32px;
        background: rgba(40, 40, 40, 0.8);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        color: #888;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .copilot-header-btn:hover {
        background: rgba(204, 0, 0, 0.2);
        border-color: rgba(204, 0, 0, 0.4);
        color: #cc0000;
    }

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

    /* Hide Copilot button when AI Assistant tab is active */
    body.ai-tab-active .copilot-header-btn {
        display: none;
    }
    
    /* Center header title when Copilot button is hidden in AI tab */
    body.ai-tab-active .header {
        justify-content: center;
    }
    
    body.ai-tab-active .header .hamburger {
        position: absolute;
        left: 12px;
    }

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

    /* Fullscreen chat - elevate using stacking context, no position:fixed */
    .chat-window-container.fullscreen {
        /* Height set dynamically by JavaScript - no CSS sizing */
        /* Elevate to higher stacking context without position:fixed */
        position: relative !important;
        z-index: 10000 !important;
        /* Flexbox layout for proper chatbar positioning */
        display: flex !important;
        flex-direction: column !important;
        /* All other styling inherited - gradient, borders, corners, etc. */
    }
    
    /* Model bar stays at top */
    .chat-window-container.fullscreen .chat-model-bar {
        flex-shrink: 0 !important;
    }
    
    /* Messages area fills available space - NEVER SHRINKS, just scrolls */
    .chat-window-container.fullscreen .chat-messages {
        flex: 1 !important;
        overflow-y: auto !important;
        min-height: 0 !important;
        /* Messages area height never changes - just scrolls behind chatbar and model bar */
    }
    
    /* Chatbar stays at bottom - no flex grow */
    .chat-window-container.fullscreen .chat-input-bar {
        flex-shrink: 0 !important;
    }
    
    /* Modal backdrop overlay behind fullscreen chat */
    body.chat-fullscreen-active::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
        pointer-events: none;
    }
    
    /* Prevent body scroll when fullscreen */
    body.chat-fullscreen-active {
        overflow: hidden !important;
    }
    
    /* Hide/collapse AI view header elements in fullscreen */
    body.chat-fullscreen-active #aiViewTitle,
    body.chat-fullscreen-active #aiViewTokenCards,
    body.chat-fullscreen-active #aiViewStatsCard {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
        margin-top: 0;
        margin-bottom: 0;
        pointer-events: none;
    }
    
    /* Messages area expands to fill available space in fullscreen */
    .chat-window-container.fullscreen .chat-messages {
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        min-height: 0 !important;
        /* Smooth scroll on iOS */
        -webkit-overflow-scrolling: touch !important;
    }

    /* Attachment preview & analysis styles - appears above text input */
    .file-attachment-preview {
        display: block;
        padding: 10px;
        background: rgba(255,255,255,0.02);
        border-radius: 10px;
        border: 1px solid rgba(255,255,255,0.04);
        color: #eee;
    }
    .file-attachment-preview .file-preview-content { display:flex; align-items:center; gap:12px; }
    .file-attachment-preview .file-preview-image { width: 96px; height: auto; border-radius: 8px; object-fit: cover; border: 1px solid rgba(255,255,255,0.03); }
    .file-attachment-preview .file-analysis { margin-top: 8px; font-size: 12px; color: #d9d9d9; }
    .color-swatch { width: 14px; height: 14px; display:inline-block; border-radius: 3px; margin-right:6px; border: 1px solid rgba(0,0,0,0.15); }
    .analysis-actions { margin-top: 8px; display:flex; gap:8px; align-items:center; }
    .analysis-actions .small-btn { font-size: 12px; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.06); background: transparent; color: #fff; }

    .message-attachments { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
    .attachment-card { display:flex; gap: 10px; align-items:center; background: rgba(255,255,255,0.02); padding: 8px; border-radius:8px; border:1px solid rgba(255,255,255,0.03); min-width: 160px; max-width: 420px; }
    .attachment-thumbnail { width: 120px; height: auto; border-radius:6px; object-fit: cover; }
    .attachment-info { font-size: 12px; color: #e8e8e8; display:flex; flex-direction:column; }
    .attachment-analysis { font-size: 12px; color: #d0d0d0; margin-top: 6px; }
    .attachment-actions { display:flex; gap:6px; margin-left:auto; }
    .attachment-actions .small-btn { font-size: 12px; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.06); background: transparent; color: #fff; }


    /* Chat History Dropdown */
    .chat-history-dropdown {
        position: absolute;
        top: 100%;
        left: 12px;
        margin-top: 4px;
        background: linear-gradient(135deg, rgba(30, 30, 30, 0.98) 0%, rgba(20, 20, 20, 0.99) 100%);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 12px;
        min-width: 240px;
        max-height: 300px;
        overflow: hidden;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        z-index: 100;
        display: none;
        animation: dropdownFadeIn 0.2s ease-out;
    }

    .chat-history-dropdown.active {
        display: block;
    }

    @keyframes dropdownFadeIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .chat-history-header {
        padding: 12px 16px;
        font-size: 12px;
        font-weight: 600;
        color: #888;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .chat-history-list {
        max-height: 250px;
        overflow-y: auto;
    }

    .chat-history-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 16px;
        cursor: pointer;
        transition: all 0.2s ease;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .chat-history-item:hover {
        background: rgba(204, 0, 0, 0.15);
    }

    .chat-history-item-content {
        flex: 1;
        min-width: 0;
    }

    .chat-history-item-title {
        font-size: 12px;
        color: #e0e0e0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .chat-history-item-date {
        font-size: 10px;
        color: #666;
        margin-top: 2px;
    }

    .chat-history-item-delete {
        width: 24px;
        height: 24px;
        border-radius: 4px;
        background: none;
        border: none;
        color: #666;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: all 0.2s ease;
    }

    .chat-history-item:hover .chat-history-item-delete {
        opacity: 1;
    }

    .chat-history-item-delete:hover {
        background: rgba(255, 0, 0, 0.2);
        color: #ff4444;
    }

    .chat-history-item-delete svg {
        width: 14px;
        height: 14px;
    }

    .chat-history-empty {
        padding: 20px 16px;
        text-align: center;
        color: #666;
        font-size: 12px;
    }

    .chat-messages {
        flex: 1;
        overflow-y: auto;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .chat-message {
        display: flex;
        gap: 8px;
        animation: messageSlideIn 0.3s ease-out;
    }

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

    .chat-message.user {
        flex-direction: row-reverse;
    }

    .chat-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 14px;
        font-weight: 600;
        overflow: hidden;
    }

    .chat-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

    .chat-avatar svg {
        width: 20px;
        height: 20px;
    }

    .chat-message.user .chat-avatar {
        background: linear-gradient(135deg, #cc0000 0%, #990000 100%);
        color: white;
    }

    .chat-message.assistant .chat-avatar {
        background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
        color: white;
    }

    .chat-bubble {
        max-width: 75%;
        padding: 12px 14px;
        border-radius: 12px;
        font-size: 13px;
        line-height: 1.5;
        word-wrap: break-word;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .chat-message.user .chat-bubble {
        background: linear-gradient(135deg, rgba(204, 0, 0, 0.2) 0%, rgba(153, 0, 0, 0.3) 100%);
        border: 1px solid rgba(204, 0, 0, 0.3);
        color: #fff;
        border-top-right-radius: 4px;
    }

    .chat-message.assistant .chat-bubble {
        background: linear-gradient(135deg, rgba(40, 40, 40, 0.9) 0%, rgba(30, 30, 30, 0.95) 100%);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #e0e0e0;
        border-top-left-radius: 4px;
    }

    .chat-bubble pre {
        background: rgba(0, 0, 0, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 6px;
        padding: 12px;
        overflow-x: auto;
        margin: 8px 0;
        font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
        font-size: 12px;
        line-height: 1.4;
    }

    .chat-bubble code {
        background: rgba(0, 0, 0, 0.3);
        padding: 2px 6px;
        border-radius: 4px;
        font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
        font-size: 12px;
    }

    .chat-bubble pre code {
        background: none;
        padding: 0;
    }

    /* Code block header with language label */
    .chat-bubble .code-block-wrapper {
        position: relative;
        margin: 8px 0;
    }

    .chat-bubble .code-block-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: rgba(60, 60, 60, 0.8);
        padding: 6px 12px;
        border-radius: 6px 6px 0 0;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: none;
    }

    .chat-bubble .code-lang-label {
        font-size: 10px;
        color: #00bfa5;
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    .chat-bubble .code-copy-btn {
        background: none;
        border: none;
        color: #888;
        cursor: pointer;
        padding: 2px 6px;
        font-size: 10px;
        border-radius: 4px;
        transition: all 0.2s;
    }

    .chat-bubble .code-copy-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
    }

    .chat-bubble .code-block-wrapper pre {
        margin: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    /* Syntax highlighting colors */
    .chat-bubble code .keyword { color: #ff79c6; }
    .chat-bubble code .string { color: #f1fa8c; }
    .chat-bubble code .number { color: #bd93f9; }
    .chat-bubble code .comment { color: #6272a4; font-style: italic; }
    .chat-bubble code .function { color: #50fa7b; }
    .chat-bubble code .operator { color: #ff79c6; }
    .chat-bubble code .property { color: #66d9ef; }
    .chat-bubble code .tag { color: #ff79c6; }
    .chat-bubble code .attr-name { color: #50fa7b; }
    .chat-bubble code .attr-value { color: #f1fa8c; }

    .chat-bubble p {
        margin: 8px 0;
    }

    .chat-bubble p:first-child {
        margin-top: 0;
    }

    .chat-bubble p:last-child {
        margin-bottom: 0;
    }

    .chat-bubble ul, .chat-bubble ol {
        margin: 8px 0;
        padding-left: 20px;
    }

    .chat-bubble li {
        margin: 4px 0;
    }

    .chat-bubble strong {
        font-weight: 700;
        color: #fff;
    }

    .chat-input-bar {
        border-top: none;
        padding: 12px;
        background: transparent;
        display: flex;
        flex-direction: column;
        gap: 8px;
        border-radius: 12px;
    }

    .chat-input-wrapper {
        flex: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        background: rgba(26, 26, 26, 0.8);
        border: 2px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 8px 12px;
        min-height: 46px;
        transition: all 0.3s ease;
    }

    .chat-input-wrapper:focus-within {
        border-color: #cc0000;
        background: rgba(13, 13, 13, 0.9);
        box-shadow: 0 0 0 4px rgba(204, 0, 0, 0.15);
    }

    .chat-textarea {
        flex: 1;
        background: transparent;
        border: none;
        outline: none;
        color: white;
        font-size: 16px;
        font-family: inherit;
        resize: none;
        max-height: 100px;
        min-height: 20px;
        line-height: 1.4;
        padding: 0;
    }

    .chat-textarea::placeholder {
        color: #666;
        line-height: 1.4;
    }

    .chat-controls {
        display: flex;
        gap: 6px;
        align-items: center;
        width: 100%;
    }

    .chat-icon-btn {
        background: none;
        border: none;
        color: #888;
        cursor: pointer;
        padding: 6px;
        border-radius: 6px;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .chat-icon-btn:focus {
        outline: none;
        background: transparent;
        color: #888;
    }

    .chat-icon-btn:focus-visible {
        outline: none;
        background: transparent;
        color: #888;
    }

    .chat-icon-btn:hover {
        background: transparent;
        color: #cc0000;
    }

    .chat-icon-btn:active {
        background: transparent;
        color: #cc0000;
    }

    .chat-icon-btn svg {
        width: 18px;
        height: 18px;
        transition: color 0.15s ease;
    }

    .chat-send-icon-btn {
        color: #cc0000;
    }

    .chat-send-icon-btn:hover {
        background: transparent;
        color: #ff0000;
    }

    .chat-send-icon-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* File Attach Button Styles - Match more-menu-btn (div-based, no focus) */
    .file-attach-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px;
        border-radius: 6px;
        background: none;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .file-attach-btn:hover {
        background: transparent;
    }

    .file-attach-btn svg {
        width: 18px;
        height: 18px;
        color: #888;
        transition: color 0.2s ease;
    }

    .file-attach-btn:hover svg {
        color: #cc0000;
    }

    /* Web Search Toggle Styles - Icon only button */
    .web-search-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px;
        border-radius: 6px;
        background: transparent;
        border: none;
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .web-search-toggle:hover {
        background: transparent;
    }

    .web-search-toggle:focus {
        outline: none;
    }

    .web-search-toggle.active {
        background: transparent;
    }

    .web-search-toggle.active .web-search-icon {
        color: #00bfa5;
    }

    .web-search-icon {
        width: 18px;
        height: 18px;
        color: #888;
        transition: color 0.15s ease;
    }

    .web-search-toggle:hover .web-search-icon {
        color: #00bfa5;
    }

    .web-search-toggle:not(.active) .web-search-icon {
        color: #888;
    }

    /* More Menu Button Styles */
    .more-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px;
        border-radius: 6px;
        background: none;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
    }

    .more-menu-btn:hover {
        background: transparent;
    }

    .more-menu-btn svg {
        width: 18px;
        height: 18px;
        color: #888;
        transition: color 0.2s ease;
    }

    .more-menu-btn:hover svg {
        color: #cc0000;
    }

    /* Quick Actions Popup Styles */
    .quick-actions-popup {
        position: absolute;
        bottom: 100%;
        right: 0;
        margin-bottom: 8px;
        background: linear-gradient(135deg, rgba(30, 30, 30, 0.98) 0%, rgba(20, 20, 20, 0.99) 100%);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 12px;
        padding: 8px;
        min-width: 180px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        z-index: 100;
        display: none;
        animation: popupFadeIn 0.2s ease-out;
    }

    .quick-actions-popup.active {
        display: block;
    }

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

    .quick-action-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 8px;
        background: none;
        border: none;
        color: #e0e0e0;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        width: 100%;
        text-align: left;
        transition: all 0.2s ease;
    }

    .quick-action-item:hover {
        background: rgba(204, 0, 0, 0.15);
        color: white;
    }

    .quick-action-item svg {
        width: 16px;
        height: 16px;
        color: #888;
        flex-shrink: 0;
    }

    .quick-action-item:hover svg {
        color: #cc0000;
    }

    /* Usage Stats Card Styles - Compact */
    .usage-stats-card {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .usage-stat-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 8px 6px;
        background: rgba(40, 40, 40, 0.4);
        border-radius: 6px;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .usage-stat-value {
        font-size: 16px;
        font-weight: 700;
        color: #00bfa5;
        margin-bottom: 1px;
    }

    .usage-stat-label {
        font-size: 8px;
        color: #888;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    /* Live Status Indicator Styles */
    .chat-status-indicator {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background: linear-gradient(135deg, rgba(30, 30, 30, 0.95) 0%, rgba(20, 20, 20, 0.98) 100%);
        border-radius: 8px;
        margin-bottom: 8px;
        animation: statusFadeIn 0.3s ease-out;
    }

    @keyframes statusFadeIn {
        from {
            opacity: 0;
            transform: translateY(-5px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .status-spinner {
        width: 16px;
        height: 16px;
        border: 2px solid rgba(255, 255, 255, 0.1);
        border-top-color: #00bfa5;
        border-radius: 50%;
        animation: statusSpin 0.8s linear infinite;
    }

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

    .status-text {
        font-size: 12px;
        color: #00bfa5;
        font-weight: 500;
    }

    .status-searching .status-spinner {
        border-top-color: #00bfa5;
    }

    .status-searching .status-text {
        color: #00bfa5;
    }

    .status-crawling .status-spinner {
        border-top-color: #ff9800;
    }

    .status-crawling .status-text {
        color: #ff9800;
    }

    .status-processing .status-spinner {
        border-top-color: #9c27b0;
    }

    .status-processing .status-text {
        color: #9c27b0;
    }

    .status-complete .status-spinner {
        animation: none;
        border-color: #4caf50;
        background: #4caf50;
    }

    .status-complete .status-text {
        color: #4caf50;
    }

    /* Citation Styles */
    .chat-citation {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 6px;
        background: rgba(0, 150, 136, 0.15);
        border: 1px solid rgba(0, 150, 136, 0.3);
        border-radius: 4px;
        font-size: 10px;
        color: #00bfa5;
        text-decoration: none;
        transition: all 0.2s ease;
        margin: 2px 4px 2px 0;
    }

    .chat-citation:hover {
        background: rgba(0, 150, 136, 0.25);
        border-color: rgba(0, 150, 136, 0.5);
    }

    .chat-citations-section {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .chat-citations-label {
        font-size: 10px;
        color: #888;
        margin-bottom: 6px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .chat-citations-list {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .chat-model-select {
        background: rgba(26, 26, 26, 0.9);
        border: 1px solid rgba(204, 0, 0, 0.3);
        color: white;
        padding: 6px 12px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        outline: none;
        width: auto;
        max-width: 90%;
        text-align: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .chat-model-select:hover:not(:disabled) {
        border-color: rgba(204, 0, 0, 0.6);
        background: rgba(13, 13, 13, 0.95);
        box-shadow: 0 4px 12px rgba(204, 0, 0, 0.2);
    }

    .chat-model-select:focus {
        border-color: #cc0000;
        box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.2);
    }

    .chat-model-select:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .chat-model-select option {
        background: #1a1a1a;
        color: white;
        padding: 8px;
    }

    /* Custom Model Dropdown - Matches More Menu Theme */
    .model-dropdown-wrapper {
        position: relative;
        display: inline-block;
    }

    .model-dropdown-trigger {
        background: rgba(26, 26, 26, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: white;
        padding: 6px 28px 6px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        outline: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-width: 150px;
        max-width: 280px;
        position: relative;
        margin: 0 auto;
    }

    .model-dropdown-trigger::after {
        content: '';
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #888;
        transition: transform 0.2s ease;
    }

    .model-dropdown-trigger.active::after {
        transform: translateY(-50%) rotate(180deg);
    }

    .model-dropdown-trigger:hover:not(:disabled) {
        border-color: rgba(255, 255, 255, 0.3);
        background: rgba(13, 13, 13, 0.95);
    }

    .model-dropdown-trigger:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .model-dropdown-trigger .model-icon {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    .model-dropdown-trigger .model-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .model-dropdown-menu {
        position: absolute;
        top: 100%;
        left: 50%;
        margin-top: 8px;
        background: linear-gradient(135deg, rgba(30, 30, 30, 0.98) 0%, rgba(20, 20, 20, 0.99) 100%);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 16px;
        padding: 8px;
        min-width: 220px;
        max-width: 300px;
        max-height: 350px;
        overflow-y: auto;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        z-index: 200;
        display: none;
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
        transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    }

    .model-dropdown-menu.active {
        display: block;
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    .model-dropdown-menu::-webkit-scrollbar {
        width: 6px;
    }

    .model-dropdown-menu::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 3px;
    }

    .model-dropdown-menu::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 3px;
    }

    .model-section-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px 6px;
        color: #888;
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        margin-bottom: 4px;
    }

    .model-section-header:not(:first-child) {
        margin-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-top: 12px;
    }

    .model-section-header svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

    .model-section-header.azure svg {
        color: #0078D4;
    }

    .model-section-header.copilot svg {
        color: #00bfa5;
    }

    .model-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 8px;
        background: none;
        border: none;
        color: #e0e0e0;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        width: 100%;
        text-align: left;
        transition: all 0.2s ease;
    }

    .model-item:hover {
        background: rgba(204, 0, 0, 0.15);
        color: white;
    }

    .model-item.selected {
        background: rgba(204, 0, 0, 0.25);
        color: white;
    }

    .model-item-icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .model-item-icon svg {
        width: 16px;
        height: 16px;
    }

    .model-item-icon.openai svg { color: #10a37f; }
    .model-item-icon.anthropic svg { color: #d4a27f; }
    .model-item-icon.google svg { color: #4285f4; }
    .model-item-icon.mistral svg { color: #f7a21e; }
    .model-item-icon.meta svg { color: #0668E1; }
    .model-item-icon.xai svg { color: #1d9bf0; }

    .model-item-details {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .model-item-name {
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .model-item-caps {
        display: flex;
        gap: 4px;
        align-items: center;
    }

    .model-cap-icon {
        width: 12px;
        height: 12px;
        opacity: 0.6;
    }

    .model-cap-icon svg {
        width: 12px;
        height: 12px;
    }

    .model-cap-icon.chat svg { color: #00bfa5; }
    .model-cap-icon.code svg { color: #ff9800; }
    .model-cap-icon.vision svg { color: #9c27b0; }

    .model-item:hover .model-cap-icon {
        opacity: 1;
    }

    .chat-file-input {
        display: none;
    }

    /* File Thumbnails Container - Above textarea, inside chatbar */
    .file-thumbnails-container {
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
        order: -1;
    }
    
    .file-thumbnail {
        position: relative;
        width: 60px;
        height: 60px;
        border-radius: 8px;
        overflow: hidden;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        cursor: pointer;
        transition: transform 0.2s ease;
    }
    
    .file-thumbnail:hover {
        transform: scale(1.05);
    }
    
    .file-thumbnail-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
    }
    
    .file-thumbnail-icon {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(40, 40, 40, 0.8);
        border-radius: 8px;
    }
    
    .file-thumbnail-icon svg {
        width: 32px;
        height: 32px;
        color: #888;
    }
    
    .file-thumbnail-remove {
        position: absolute;
        top: -6px;
        right: -6px;
        width: 20px;
        height: 20px;
        background: rgba(204, 0, 0, 0.95);
        border: 2px solid rgba(0, 0, 0, 0.8);
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.2s ease, transform 0.2s ease;
        padding: 0;
    }
    
    .file-thumbnail:hover .file-thumbnail-remove {
        opacity: 1;
    }
    
    .file-thumbnail-remove:hover {
        transform: scale(1.15);
        background: rgba(255, 0, 0, 1);
    }
    
    .file-thumbnail-remove svg {
        width: 12px;
        height: 12px;
        color: white;
        stroke-width: 3;
    }
    
    /* Mobile responsive adjustments */
    @media (max-width: 768px) {
        .file-thumbnail {
            width: 50px;
            height: 50px;
        }
        
        .file-thumbnail-icon svg {
            width: 28px;
            height: 28px;
        }
    }
    
    @media (max-width: 480px) {
        .file-thumbnails-container {
            gap: 6px;
        }
        
        .file-thumbnail {
            width: 45px;
            height: 45px;
        }
        
        .file-thumbnail-icon svg {
            width: 24px;
            height: 24px;
        }
        
        .file-thumbnail-remove {
            width: 18px;
            height: 18px;
            top: -5px;
            right: -5px;
        }
        
        .file-thumbnail-remove svg {
            width: 10px;
            height: 10px;
        }
    }

    .file-attachment-preview {
        padding: 8px 12px;
        background: rgba(30, 30, 30, 0.9);
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .file-preview-content {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .file-preview-image {
        max-width: 60px;
        max-height: 60px;
        border-radius: 8px;
        object-fit: cover;
    }

    .file-preview-icon {
        font-size: 28px;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 8px;
    }

    .file-preview-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .file-preview-name {
        font-size: 12px;
        font-weight: 500;
        color: #e0e0e0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
    }

    .file-preview-size {
        font-size: 10px;
        color: #888;
    }

    .file-preview-remove {
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
    }

    .file-preview-remove:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    .file-preview-remove svg {
        width: 16px;
        height: 16px;
        stroke: #888;
    }

    .file-preview-remove:hover svg {
        stroke: #cc0000;
    }

    .chat-empty-state {
        text-align: center;
        padding: 40px 20px;
        color: #666;
    }

    .chat-empty-icon {
        font-size: 48px;
        margin-bottom: 12px;
        opacity: 0.3;
    }

    .chat-empty-text {
        font-size: 14px;
        margin-bottom: 6px;
    }

    .chat-empty-subtext {
        font-size: 12px;
        color: #555;
    }