/* ===== THEME VARIABLES (scoped to NexeraAI only) ===== */
#nexera-chat-app,
#nexera-chat-app[data-theme="light"] {
    --nexera-bg: #f9fafb;
    --nexera-surface: #ffffff;
    --nexera-surface-hover: #f3f4f6;
    --nexera-surface-active: #e0ecff;
    --nexera-border: #e5e7eb;
    --nexera-border-light: #f0f0f0;
    --nexera-text: #111827;
    --nexera-text-secondary: #4b5563;
    --nexera-text-muted: #5d6470;
    --nexera-icon-fill: #6b7280;
    --nexera-icon-hover: #111827;
    --nexera-input-bg: #fff;
    --nexera-input-border: #d1d5db;
    --nexera-card-bg: #f3f4f6;
    --nexera-card-hover: #e5e7eb;
    --nexera-dropdown-bg: #ffffff;
    --nexera-dropdown-border: #e5e7eb;
    --nexera-shadow: rgba(0, 0, 0, 0.04);
    --nexera-shadow-strong: rgba(0, 0, 0, 0.08);
    --nexera-user-bubble-bg: #1d4ed8;
    --nexera-user-bubble-text: #ffffff;
    --nexera-ai-bubble-bg: #f3f4f6;
    --nexera-ai-bubble-text: #111827;
    --nexera-bubble-time-ai: #4b5563;
    --nexera-bubble-time-user: #dbeafe;
    --nexera-ai-avatar-bg: #e0ecff;
    --nexera-user-avatar-bg: #dbeafe;
    --nexera-send-bg: #1d4ed8;
    --nexera-send-text: white;
    --nexera-popup-bg: #ffffff;
    --nexera-popup-arrow-border: #e5e7eb;
    --nexera-divider: #f0f0f0;
    --nexera-link: #0a5399;
    --nexera-on-link: #ffffff;
    --nexera-table-row-alt: #fafafa;
    --nexera-rename-focus: #3b82f6;
    --nexera-chat-input-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    --nexera-transition-speed: 0.2s;
    --nexera-header-bg: #1A1A1A;
    --nexera-header-text: #ffffff;
}

    #nexera-chat-app[data-theme="dark"] {
        --nexera-bg: #141414;
        --nexera-surface: #1A1A1A;
        --nexera-surface-hover: #273548;
        --nexera-surface-active: #1e3a5f;
        --nexera-border: #334155;
        --nexera-border-light: #334155;
        --nexera-text: #f1f5f9;
        --nexera-text-secondary: #cbd5e1;
        --nexera-text-muted: #94a3b8;
        --nexera-icon-fill: #94a3b8;
        --nexera-icon-hover: #f1f5f9;
        --nexera-input-bg: #273548;
        --nexera-input-border: #475569;
        --nexera-card-bg: #273548;
        --nexera-card-hover: #334155;
        --nexera-dropdown-bg: #1A1A1A;
        --nexera-dropdown-border: #334155;
        --nexera-shadow: rgba(0, 0, 0, 0.3);
        --nexera-shadow-strong: rgba(0, 0, 0, 0.4);
        --nexera-user-bubble-bg: #2563eb;
        --nexera-user-bubble-text: #f1f5f9;
        --nexera-ai-bubble-bg: #273548;
        --nexera-ai-bubble-text: #f1f5f9;
        --nexera-bubble-time-ai: #cbd5e1;
        --nexera-bubble-time-user: #eff6ff;
        --nexera-ai-avatar-bg: #1e3a5f;
        --nexera-user-avatar-bg: #1e3a5f;
        --nexera-send-bg: #2563eb;
        --nexera-send-text: #ffffff;
        --nexera-popup-bg: #1A1A1A;
        --nexera-popup-arrow-border: #334155;
        --nexera-divider: #334155;
        --nexera-link: #9ecfff;
        --nexera-on-link: #141414;
        --nexera-table-row-alt: #1A1A1A;
        --nexera-rename-focus: #3b82f6;
        --nexera-chat-input-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
        --nexera-transition-speed: 0.2s;
        --nexera-header-bg: #141414;
        --nexera-header-text: #f1f5f9;
    }

#nexera-chat-app {
    background-color: var(--nexera-bg);
    color: var(--nexera-text);
    min-height: 100vh;
    width: 100%;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
}

#menu-toggle {
    display: none;
}

/* Sidebar */
#sidebar {
    width: 260px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: var(--nexera-surface);
    padding: 15px;
    padding-top: 15px;
    border-right: 1px solid var(--nexera-border);
    display: flex;
    flex-direction: column;
}

#menu-toggle:checked ~ #sidebar {
    margin-left: -260px;
}

/* Navbar */
.top-navbar {
    margin: 0px 5px 0px 5px;
    height: 60px;
    position: fixed;
    top: 0;
    left: 260px;
    right: 0;
    background: var(--nexera-surface);
    border-bottom: 1px solid var(--nexera-border);
    box-shadow: 0 1px 3px var(--nexera-shadow);
    z-index: 1000;
}

#menu-toggle:checked ~ .top-navbar {
    left: 0;
}

/* Content */
#content {
    margin-left: 260px;
    margin-top: 60px;
    padding: 20px;
    height: calc(100vh - 60px);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

#content .chat-wrapper {
    height: 100%;
    min-height: 0;
}

#content .chat-container {
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}

#menu-toggle:checked ~ #content {
    margin-left: 0;
}

/* Sidebar items */
.new-chat-btn {
    background: var(--nexera-card-bg);
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
}

.chat-item {
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background var(--nexera-transition-speed) ease;
}

    .chat-item:hover {
        background: var(--nexera-surface-hover);
    }

/* USER SECTION */
.user-section {
    margin-top: auto;
    position: relative;
    border-top: 1px solid var(--nexera-divider);
    padding-top: 10px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    border-radius: 8px;
    padding: 4px;
    transition: background var(--nexera-transition-speed) ease;
}

    .user-info:hover {
        background: var(--nexera-surface-hover);
    }

/* Initials Avatar */
.user-icon {
    width: 60px;
    height: 35px;
    color: rgb(255, 255, 255);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border-radius: 50%;
}

/* Dropdown */
.user-dropdown {
    position: absolute;
    bottom: 50px;
    left: 0;
    width: 100%;
    background: var(--nexera-dropdown-bg);
    border: 1px solid var(--nexera-border);
    border-radius: 12px;
    display: none;
    box-shadow: 0 8px 24px var(--nexera-shadow-strong);
    z-index: 1100;
}

.user-section:hover .user-dropdown {
    display: block;
}

/* Collapsed sidebar: popup appears to the right of the icon */
.user-dropdown.user-dropdown-collapsed {
    left: 70px;
    bottom: 0;
    width: 220px;
}

.dropdown-section {
    padding: 5px 0;
}

.dropdown-divider {
    margin: 5px 0;
    border-top: 1px solid var(--nexera-divider);
}

.user-detail {
    padding: 10px;
}

.user-name-bold {
    font-weight: 600;
}

.user-email {
    font-size: 13px;
    color: var(--nexera-text-muted);
}

.user-item {
    padding: 10px;
    cursor: pointer;
    border-radius: 6px;
    margin: 0 4px;
    transition: background var(--nexera-transition-speed) ease;
}

    .user-item:hover {
        background: var(--nexera-surface-hover);
    }

/* Chat */
.chat-wrapper {
    width: 100%;
}

/* Icons */
.nexera-icon {
    padding: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    transition: background var(--nexera-transition-speed) ease;
}

    .nexera-icon:hover {
        background: var(--nexera-surface-hover);
    }

/* Send button */
.nexera-send {
    background: var(--nexera-send-bg);
    color: var(--nexera-send-text);
    border: none;
    border-radius: 50%;
    padding: 6px 10px;
    cursor: pointer;
    font: inherit;
    transition: transform 0.15s ease, opacity 0.15s ease, background var(--nexera-transition-speed) ease;
}

    .nexera-send:hover {
        opacity: 0.9;
        transform: scale(1.05);
    }

    .nexera-send:active {
        transform: scale(0.95);
    }

    /* Disabled send button */
    .nexera-send.disabled {
        opacity: 0.4;
        pointer-events: none;
        cursor: not-allowed;
    }

/* Stop/Cancel button — dark square to the right of mic */
.stop-generating {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: #1a1a1a;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}

.nexera-icon:focus-visible,
.nexera-send:focus-visible,
.stop-generating:focus-visible {
    outline: 2px solid var(--nexera-focus, #0078d4);
    outline-offset: 2px;
}

    .stop-generating:hover {
        background: #333;
        transform: scale(1.05);
    }

    .stop-generating:active {
        transform: scale(0.95);
    }

.stop-square {
    display: block;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-radius: 2px;
}

#sidebar {
    box-shadow: 1px 0 8px var(--nexera-shadow);
    border-right: none;
}

.nexus-header-title {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* Keyboard focus indicator for the Microsoft Nexus logo link.
   The browser default outline resolved to ~1.413:1 contrast against the
   sidebar surface (WCAG 1.4.11 requires >= 3:1). #0078d4 meets >= 3:1 against
   both the light (#ffffff) and dark (#1A1A1A) sidebar surfaces. */
.nexus-header-title .nav-link:focus-visible {
    outline: 2px solid var(--nexera-focus, #0078d4);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (forced-colors: active) {
    .nexus-header-title .nav-link:focus-visible {
        outline-color: Highlight;
    }
}

.hamburger-btn {
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 5px;
    border-radius: 6px;
    transition: background var(--nexera-transition-speed) ease;
}

    .hamburger-btn:focus-visible {
        outline: 2px solid var(--nexera-focus, #0078d4);
        outline-offset: 2px;
    }

    @media (forced-colors: active) {
        .hamburger-btn:focus-visible {
            outline-color: Highlight;
        }
    }

    /* Hover effect (optional nice UX) */
    .hamburger-btn:hover {
        background: var(--nexera-surface-hover);
    }

/* Sidebar shrink */
#sidebar.collapsed {
    width: 70px !important;
}

/* Navbar shift */
.top-navbar.collapsed {
    left: 70px !important;
}

/* Content shift */
#content.collapsed {
    margin-left: 70px !important;
}

/* Smooth */
#sidebar,
.top-navbar,
#content {
    transition: all 0.3s ease;
}

.chat-header-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px;
    margin-top: 10px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--nexera-text-secondary);
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.5px;
    transition: background var(--nexera-transition-speed) ease;
}

    .chat-header-row:hover {
        background: var(--nexera-surface-hover);
    }

    /* Arrow */
    .nexera-arrow {
        margin-left: 5px;
        display: inline-block;
        transition: transform 0.2s ease;
    }

        /* Rotate when open */
        .nexera-arrow.rotate {
            transform: rotate(90deg);
        }

.chat-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* CENTER MODE */
.chat-empty {
    justify-content: center;
    justify-content: safe center;
    align-items: center;
    overflow-y: auto;
}

.chat-empty .chat-box-wrapper {
    align-self: center;
    margin-top: 0;
    margin-bottom: 0;
}

/* BOTTOM MODE */
.chat-started {
    justify-content: flex-start;
    align-items: stretch;
    padding-bottom: 20px;
}

/* Input box */
.chat-box {
    width: 100%;
    border: 1px solid var(--nexera-border);
    background: var(--nexera-surface);
    border-radius: 24px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    box-shadow: var(--nexera-chat-input-shadow);
    transition: border-color var(--nexera-transition-speed) ease, box-shadow var(--nexera-transition-speed) ease;
}

    .chat-box:focus-within {
        border-color: var(--nexera-rename-focus);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12), var(--nexera-chat-input-shadow);
    }

    /* Input */
    .chat-box input {
        flex: 1;
        border: none;
        outline: none;
        background: transparent;
        color: var(--nexera-text);
        font-size: 15px;
        padding: 6px 4px;
        min-height: 28px;
    }

        .chat-box input::placeholder {
            color: var(--nexera-text-muted);
        }

.chat-textarea {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--nexera-text);
    font-size: 15px;
    font-family: inherit;
    padding: 6px 4px;
    resize: none;
    min-height: 28px;
    max-height: 150px;
    overflow-y: auto;
    line-height: 1.5;
}

    .chat-textarea::placeholder {
        color: var(--nexera-text-muted);
    }

    /* Center text */
    .center-text {
        margin-bottom: 24px;
        font-size: 24px;
        font-weight: 700;
        color: var(--nexera-text);
        letter-spacing: -0.3px;
    }

.fluent-icon {
    fill: var(--nexera-icon-fill) !important;
    width: 20px;
    height: 20px;
    transition: fill var(--nexera-transition-speed) ease;
}

/* Hover effect (optional) */
.fluent-icon:hover {
    color: var(--nexera-icon-hover);
}
.sidebar-header {
    padding: 0px 10px 0px 10px;
}
.more-menu-dropdown {
    position: absolute;
    right: 0;
    top: 45px;
    width: 180px;
    background: var(--nexera-dropdown-bg);
    border-radius: 10px;
    border: 1px solid var(--nexera-dropdown-border);
    box-shadow: 0 6px 20px var(--nexera-shadow-strong);
    z-index: 1000;
}

/* ===== RIGHT SIDEBAR ===== */
#right-sidebar {
    width: 280px;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    background: var(--nexera-surface);
    color: var(--nexera-text);
    padding: 15px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    box-shadow: -1px 0 8px var(--nexera-shadow);
    transition: all 0.3s ease;
    z-index: 999;
}

    #right-sidebar.collapsed {
        width: 70px;
        padding: 15px 8px;
        overflow: visible;
        align-items: center !important;
    }

    /* Icons */
    .nexera-icon {
        padding: 5px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        transition: background var(--nexera-transition-speed) ease;
    }

        .nexera-icon:hover {
            background: var(--nexera-surface-hover);
        }

    /* Send button */
    .nexera-send {
        background: var(--nexera-send-bg);
        color: var(--nexera-send-text);
        border-radius: 50%;
        padding: 6px 10px;
        cursor: pointer;
        transition: transform 0.15s ease, opacity 0.15s ease, background var(--nexera-transition-speed) ease;
    }

        .nexera-send:hover {
            opacity: 0.9;
            transform: scale(1.05);
        }

        .nexera-send:active {
            transform: scale(0.95);
        }

/* ===== COLLAPSED ICON STRIP ===== */
.right-collapsed-icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.right-icon-wrapper {
    position: relative;
}

.right-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--nexera-transition-speed) ease;
}

.right-icon-btn:hover {
    background: var(--nexera-surface-hover);
}

/* Hover popup */
.right-icon-popup {
    display: none;
    position: absolute;
    top: 50%;
    right: 46px;
    transform: translateY(-50%);
    width: 260px;
    background: var(--nexera-popup-bg);
    border: 1px solid var(--nexera-border);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 8px 24px var(--nexera-shadow-strong);
    z-index: 1100;
}

.right-icon-popup::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -6px;
    transform: translateY(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: var(--nexera-popup-bg);
    border-right: 1px solid var(--nexera-popup-arrow-border);
    border-top: 1px solid var(--nexera-popup-arrow-border);
}

.right-icon-wrapper:hover .right-icon-popup {
    display: block;
}

.right-popup-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--nexera-text-secondary);
    margin-bottom: 6px;
}

.right-popup-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
}

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

.right-popup-stat {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 3px 0;
}

.right-popup-stat span:last-child {
    font-weight: 600;
}

.right-popup-doc {
    font-size: 13px;
    padding: 4px 0;
    border-bottom: 1px solid var(--nexera-divider);
}

.right-popup-doc:last-child {
    border-bottom: none;
}

.right-popup-meta {
    color: var(--nexera-text-muted);
    font-size: 13px;
    margin-left: 4px;
}

.right-popup-activity {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    padding: 4px 0;
    line-height: 1.4;
}

/* Right sidebar header */
.right-sidebar-header {
    padding: 0px 5px 10px 5px;
}

.right-sidebar-title {
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    color: inherit;
}

/* Right sidebar scrollable content */
.right-sidebar-content {
    flex: 1;
    overflow-y: auto;
}

/* Sections */
.right-section {
    padding: 8px 0;
}

.right-section-header {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 4px 0;
    margin-bottom: 8px;
    border-radius: 6px;
    transition: background var(--nexera-transition-speed) ease;
}

    .right-section-header:hover {
        background: var(--nexera-surface-hover);
    }

.right-section-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--nexera-text-secondary);
}

.right-divider {
    border: none;
    border-top: 1px solid var(--nexera-divider);
    margin: 4px 0;
}

/* Active Project */
.right-project-name {
    font-size: 13px;
    font-weight: 700;
    color: inherit    ;
    margin-bottom: 4px;
}

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

/* Project Stats */
.right-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
}

.right-stat-value {
    font-weight: 600;
    color: inherit;
}

.stat-green {
    color: #22c55e;
}

.stat-yellow {
    color: #facc15;
}

/* Reference Documents */
.right-doc-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--nexera-card-bg);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background var(--nexera-transition-speed) ease;
}

.right-doc-card:hover {
    background: var(--nexera-card-hover);
}

.right-doc-icon {
    font-size: 20px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

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

.right-doc-name {
    font-size: 13px;
    font-weight: 600;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.right-doc-meta {
    font-size: 13px;
    color: var(--nexera-text-muted);
}

/* Recent Activity */
.right-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
}

.activity-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
}

.dot-green {
    background: #22c55e;
}

.dot-red {
    background: #ef4444;
}

.right-activity-info {
    flex: 1;
}

.right-activity-text {
    font-size: 13px;
    color: inherit;
    line-height: 1.4;
}

.right-activity-time {
    font-size: 13px;
    color: var(--nexera-text-muted);
    margin-top: 2px;
}

/* ===== RIGHT SIDEBAR LAYOUT ADJUSTMENTS ===== */

/* Content right margin when right sidebar is expanded */
#content.right-expanded {
    margin-right: 280px;
}

/* Content right margin when right sidebar is collapsed */
#content.right-collapsed {
    margin-right: 70px;
}

/* Navbar right offset when right sidebar is expanded */
.top-navbar.right-expanded {
    right: 280px;
}

/* Navbar right offset when right sidebar is collapsed */
.top-navbar.right-collapsed {
    right: 70px;
}

#nexera-chat-app {
    background-color: var(--nexera-bg);
    color: var(--nexera-text);
    min-height: 100vh;
    width: 100%;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ===== CHAT HISTORY ===== */
.chat-history-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 24px 10% 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

/* Custom scrollbar for chat history */
.chat-history-container::-webkit-scrollbar {
    width: 6px;
}

.chat-history-container::-webkit-scrollbar-track {
    background: transparent;
}

.chat-history-container::-webkit-scrollbar-thumb {
    background: var(--nexera-border);
    border-radius: 3px;
}

.chat-history-container::-webkit-scrollbar-thumb:hover {
    background: var(--nexera-text-muted);
}

.chat-message-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    max-width: 100%;
    animation: nexera-message-in 0.3s ease-out;
}

@keyframes nexera-message-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-message-row.user-row {
    justify-content: flex-end;
}

.chat-message-row.ai-row {
    justify-content: flex-start;
}

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

.chat-avatar.ai-avatar {
    background: var(--nexera-ai-avatar-bg);
}

.chat-avatar.user-avatar {
    background: var(--nexera-user-avatar-bg);
}

.chat-bubble {
    max-width: 65%;
    padding: 10px 16px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.6;
    word-wrap: break-word;
    transition: background var(--nexera-transition-speed) ease;
}

.chat-bubble.user-bubble {
    background: var(--nexera-user-bubble-bg);
    color: var(--nexera-user-bubble-text);
    border-bottom-right-radius: 6px;
}

.chat-bubble.ai-bubble {
    background: var(--nexera-ai-bubble-bg);
    color: var(--nexera-ai-bubble-text);
    border-bottom-left-radius: 6px;
}

.chat-bubble-content {
    margin-bottom: 4px;
}

.chat-bubble-time {
    font-size: 11px;
    text-align: right;
    margin-top: 2px;
    color: var(--nexera-bubble-time-ai);
}

.chat-bubble.user-bubble .chat-bubble-time {
    color: var(--nexera-bubble-time-user);
}

.chat-history-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nexera-text-secondary);
    font-size: 14px;
}

/* Active chat item in sidebar */
.chat-item.chat-item-active {
    background: var(--nexera-surface-active);
    font-weight: 600;
}

/* ===== CHAT ITEM ROW WITH DOTS MENU ===== */
.chat-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 8px 8px 0px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    border-bottom: none;
    margin-bottom: 2px;
    transition: background var(--nexera-transition-speed) ease;
}

    .chat-item-row:hover {
        background: var(--nexera-surface-hover);
    }

    .chat-item-row.chat-item-active {
        background: var(--nexera-surface-active);
        font-weight: 600;
    }

.chat-item-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.chat-item-menu-wrapper {
    position: relative;
    flex-shrink: 0;
}

.chat-item-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

    .chat-item-dots:hover {
        background: var(--nexera-surface-hover);
    }

.chat-item-row:hover .chat-item-dots,
.chat-item-row:focus-within .chat-item-dots {
    opacity: 1;
    pointer-events: auto;
}

.chat-item-dots:focus-visible,
.chat-menu-item:focus-visible {
    outline: 2px solid var(--nexera-rename-focus);
    outline-offset: 2px;
}

.chat-item-dropdown {
    position: absolute;
    right: 0;
    top: 28px;
    width: 160px;
    background: var(--nexera-dropdown-bg);
    border: 1px solid var(--nexera-dropdown-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px var(--nexera-shadow-strong);
    z-index: 1200;
    padding: 4px 0;
}

.chat-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1100;
    background: transparent;
}

.chat-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 8px);
    padding: 8px 12px;
    border: 0;
    font-size: 13px;
    font-family: inherit;
    text-align: left;
    color: inherit;
    background: transparent;
    cursor: pointer;
    border-radius: 6px;
    margin: 0 4px;
    transition: background var(--nexera-transition-speed) ease;
}

    .chat-menu-item:hover {
        background: var(--nexera-surface-hover);
    }

.chat-rename-input {
    width: 100%;
    border: 1px solid var(--nexera-input-border);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 13px;
    outline: none;
    background: var(--nexera-input-bg);
    color: var(--nexera-text);
    transition: border-color var(--nexera-transition-speed) ease, box-shadow var(--nexera-transition-speed) ease;
}

    .chat-rename-input:focus {
        border-color: var(--nexera-rename-focus);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    }
.right-section-header .icon {
    padding: 8px;
}

/* ===== THEME MENU ===== */
.theme-menu-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--nexera-text-secondary);
    padding: 4px 12px 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    transition: background var(--nexera-transition-speed) ease;
}

.theme-option.theme-active {
    background: var(--nexera-surface-active);
}

.theme-check {
    margin-left: auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--nexera-rename-focus);
}

.theme-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;
    background: transparent;
}

/* ===== PANEL MODE (inline right panel in MainLayout) ===== */

/* Top-level wrapper */
.nexera-layout-root {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
}

/* Main content area — fills available width */
.nexera-main-area {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Body row: main content + chat panel side by side, between header and footer */
.nexera-body-row {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Left column: ProjectNavMenu + main body stacked vertically */
.nexera-body-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* When the chat panel is open, add rounded corners and border to main content */
.nexera-body-row:has(.nexera-panel-inline) .nexera-body-main {
    border-radius: 10px;
    border: 1px solid var(--nexera-border, #ddd);
    margin-right: 3px;
}

/* Inline right panel — fixed width, fills space between header and footer */
.nexera-panel-inline {
    width: 380px;
    min-width: 380px;
    background: var(--nexera-surface, #fff);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
    border-left: 1px solid var(--nexera-border, #ddd);
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.06);
    border-radius: 10px;
}

/* Reflow (WCAG 1.4.10): below ~600px the side-by-side layout can no longer fit
   both the main content and a fixed 380px panel without horizontal scrolling.
   Neither surface is removed with display:none. The chat panel is promoted to a
   full-viewport, dialog-style overlay so it is completely visible at 320px, and
   the page content stays in the layout underneath, becoming visible again as soon
   as the panel is closed with its own Close button. The inline height set by the
   layout is overridden here because it assumes the side-by-side arrangement. */
@media (max-width: 600px) {
    .nexera-body-row:has(.nexera-panel-inline) {
        overflow-x: hidden;
    }

    .nexera-body-row:has(.nexera-panel-inline) .nexera-body-main {
        margin-right: 0;
    }

    .nexera-panel-inline {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        min-width: 0;
        height: auto !important;
        min-height: 0 !important;
        z-index: 1900;
        border-left: none;
        border-radius: 0;
        box-shadow: none;
    }

    #nexera-chat-app.nexera-panel-mode {
        border-left: none;
        border-radius: 0;
        height: 100% !important;
        min-height: 0 !important;
    }

    .nexera-panel-header,
    .nexera-panel-sidebar,
    .nexera-panel-sidebar-overlay {
        border-radius: 0;
    }

    /* Keep the chat-history popover inside the narrow viewport. */
    .nexera-panel-sidebar {
        width: 85%;
        max-width: 280px;
    }

    /* Give embedded surfaces such as the clarification form the full available
       width so their fields are not squeezed into an unreadable column.
       The panel-mode defaults (.nexera-panel-mode .chat-bubble at 85%,
       .nexera-panel-mode .chat-history-container at 20px 16px) are declared later
       in this file with the same specificity, so they would win on source order.
       Each rule therefore also carries a .nexera-panel-mode qualified variant,
       which outranks them on specificity without needing !important. */
    #nexera-chat-app .chat-message-row .chat-bubble,
    #nexera-chat-app.nexera-panel-mode .chat-message-row .chat-bubble {
        max-width: 100%;
    }

    #nexera-chat-app .chat-history-container.chat-history-container,
    #nexera-chat-app.nexera-panel-mode .chat-history-container.chat-history-container {
        padding: 16px 8px;
    }

    #nexera-chat-app .mcp-app-container .mcp-app-iframe {
        max-height: none;
        min-height: 480px;
    }

    /* Rich responses such as the profile card place a fixed-width label beside its
       value, which pushes the value past the card edge; the card clips its overflow
       so the text is lost. Stack label and value instead of hiding either. */
    #nexera-chat-app .nexera-profile-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    #nexera-chat-app .nexera-profile-label,
    #nexera-chat-app .nexera-profile-value {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    #nexera-chat-app .chat-box-wrapper,
    #nexera-chat-app.nexera-panel-mode .chat-box-wrapper {
        width: 100%;
    }

    /* The composer keeps the prompt field on the same row as the attach, mic and
       send controls, which squeezes the field until its "Ask Nexera" placeholder is
       truncated. Give the field its own full-width row and let the controls wrap
       underneath. */
    #nexera-chat-app .chat-input-row {
        flex-wrap: wrap;
    }

    #nexera-chat-app .chat-input-row .chat-textarea {
        flex: 1 1 100%;
        order: -1;
        min-width: 0;
    }

    /* Fullscreen chat: the 260px sidebar is position:fixed, so at narrow widths it
       covers nearly the whole viewport and leaves the conversation (including the
       clarification form) with no usable space. Reserve only the icon rail for it
       and let the expanded sidebar overlay the chat, so no content is removed and
       the sidebar stays reachable through its existing toggle. */
    .nexera-fullscreen-container {
        width: 100vw;
        height: 100vh;
        max-width: none;
        max-height: none;
        border-radius: 0;
    }

    .nexera-fullscreen-overlay #sidebar {
        z-index: 2002;
        max-width: 85vw;
    }

    .nexera-fullscreen-topbar,
    .nexera-fullscreen-topbar.collapsed {
        left: 70px;
        border-radius: 0;
    }

    .nexera-fullscreen-content,
    .nexera-fullscreen-content.collapsed {
        margin-left: 70px;
        padding: 12px 8px;
    }
}

/* Panel mode overrides for #nexera-chat-app */
#nexera-chat-app.nexera-panel-mode {
    min-height: unset;
    height: 100%;
    max-height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-left: 1px solid var(--nexera-border, #ddd);
    border-bottom: 1px solid var(--nexera-border, #ddd);
    background: var(--nexera-surface, #fff);
}

/* Panel header bar (Copilot-style) */
.nexera-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    height: 48px;
    min-height: 48px;
    background: var(--nexera-surface);
    border-bottom: 1px solid var(--nexera-border);
    border-top-left-radius: 10px;
    flex-shrink: 0;
}

.nexera-panel-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nexera-panel-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--nexera-text);
}

.nexera-panel-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nexera-panel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.nexera-panel-btn:hover {
    background: var(--nexera-surface-hover);
}

/* Panel content area — fills remaining space */
.nexera-panel-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Override chat-container height in panel mode */
#nexera-chat-app.nexera-panel-mode .chat-container {
    height: 100%;
    flex: 1;
    min-height: 0;
}

/* Override chat-box width in panel mode */
#nexera-chat-app.nexera-panel-mode .chat-box-wrapper {
    width: 95%;
}

/* Override chat-history padding in panel mode */
#nexera-chat-app.nexera-panel-mode .chat-history-container {
    padding: 20px 16px;
}

/* Override chat-bubble max-width in panel mode */
#nexera-chat-app.nexera-panel-mode .chat-bubble {
    max-width: 85%;
}

/* Override chat message layout in panel mode — stack vertically (avatar on top, bubble below) */
#nexera-chat-app.nexera-panel-mode .chat-message-row {
    flex-direction: column;
    gap: 4px;
}

#nexera-chat-app.nexera-panel-mode .chat-message-row.user-row {
    align-items: flex-end;
}

#nexera-chat-app.nexera-panel-mode .chat-message-row.ai-row {
    align-items: flex-start;
}

/* ===== PAGINATION RESPONSE: TABLE vs LIST VIEW ===== */
/* Default (popup/expanded mode): show table, hide list */
.nexera-table-view {
    display: block;
}

.nexera-list-view {
    display: none;
}

/* Panel mode (narrow docked panel): show list, hide table */
#nexera-chat-app.nexera-panel-mode .nexera-table-view {
    display: none !important;
}

#nexera-chat-app.nexera-panel-mode .nexera-list-view {
    display: block !important;
}

/* Fullscreen override: always show table, hide list (even if nexera-panel-mode class is present) */
.nexera-fullscreen-content .nexera-table-view {
    display: block !important;
}

.nexera-fullscreen-content .nexera-list-view {
    display: none !important;
}

/* Table styling within chat bubbles */
.nexera-table-view table {
    border-collapse: collapse;
    /* min-width rather than width so the table may grow past the bubble and be
       reached via the scroll container below. With `width` it could never exceed
       the wrapper, so wide tables were squeezed and their text clipped instead. */
    min-width: 100%;
    font-size: 13px;
    margin: 8px 0;
}

/* Result tables carry many columns, so cap them to the bubble and scroll rather
   than letting them overflow and be clipped by an ancestor (MAS 1.4.4). Data
   tables are exempt from the WCAG 1.4.10 Reflow no-scroll requirement. */
.nexera-table-view,
.nexera-paginated-table {
    max-width: 100%;
    overflow-x: auto;
}

.nexera-paginated-table:focus-visible {
    outline: 2px solid var(--nexera-focus, #0078d4);
    outline-offset: 2px;
}

/* A table needs the full bubble width; the default 65% cap left too little room
   and forced the columns to clip. The #nexera-chat-app prefix is required to
   outrank #nexera-chat-app.nexera-panel-mode .chat-bubble.

   flex sizing is used rather than width:100% because .chat-message-row is a flex
   row that also holds the 30px avatar and a 10px gap. width:100% resolves against
   the whole row, so the bubble ended up 40px wider than the space actually left
   for it and hung outside the chat viewport, where the ancestor clipped it. The
   clipped strip contained the right-hand column, and because the table still fit
   inside its own oversized scroll container no scrollbar appeared, so that text
   could not be reached at all. min-width:0 lets the bubble shrink to the space
   available, which is what allows the scroll container to detect the overflow and
   show its horizontal scrollbar (MAS 1.4.4 Resize Text at 200% zoom). */
#nexera-chat-app .chat-bubble.ai-bubble:has(table) {
    max-width: 100%;
    flex: 1 1 auto;
    min-width: 0;
}

/* Panel mode stacks the row vertically, so the avatar no longer shares the
   inline axis and the bubble may take the full width again. flex-grow must be
   reset here or it would stretch the bubble down the column instead. */
#nexera-chat-app.nexera-panel-mode .chat-bubble.ai-bubble:has(table) {
    flex: 0 1 auto;
    width: 100%;
}

.nexera-table-view th,
.nexera-table-view td {
    border: 1px solid var(--nexera-border, #d0d0d0);
    padding: 4px 8px;
    text-align: left;
}

.nexera-table-view th {
    background: var(--nexera-header-bg, #1A1A1A);
    color: var(--nexera-header-text, #ffffff);
    font-weight: 600;
    padding: 8px 10px;
    text-align: center;
}

.nexera-table-view tr:nth-child(even) {
    background: var(--nexera-table-row-alt, #fafafa);
}

.nexera-table-view a {
    color: var(--nexera-link, #0a5399);
    text-decoration: none;
}

/* ===== GENERATED RESPONSE LINK CONTRAST =====
   Agent responses are HTML with colours baked into inline style attributes, and
   stored conversations are replayed from that saved markup, so the generator
   change alone cannot fix existing history. Reapplying the colour from CSS with
   !important covers both. The var() fallback is required: an unresolvable custom
   property invalidates the whole declaration, which would let the inline colour
   win. ChatHistory.razor injects all agent markup inside .chat-bubble-content,
   so this single selector covers every generated link. */
.chat-bubble-content a {
    color: var(--nexera-link, #0a5399) !important;
}

/* Stored markup also hardcodes the alternating row background, which would stay
   light in dark theme and leave the link unreadable. */
.chat-bubble-content tbody tr:nth-child(even) {
    background: var(--nexera-table-row-alt, #fafafa) !important;
}

.nexera-table-view a:hover {
    text-decoration: underline;
}

/* Navigation buttons for paginated tables */
/* Prev / page counter / Next. This row sits inside .nexera-paginated-table, which
   scrolls horizontally for wide tables. As a single non-wrapping centered row it
   overflows that container at panel width and the leading Prev button is clipped
   with no way to reach it. Wrapping keeps every control visible, and position:
   sticky pins the row to the left edge of the scroll container so the buttons stay
   in view while the table itself is scrolled sideways. */
.nexera-table-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0;
    margin-top: 4px;
    position: sticky;
    left: 0;
}

.nexera-table-nav .nexera-nav-btn,
.nexera-table-nav .nexera-nav-info {
    flex: 0 0 auto;
}

.nexera-table-header {
    font-size: 12px;
    color: var(--nexera-text-secondary, #666);
    padding: 4px 0 6px;
}

/* ===== MCP APP (CLARIFICATION FORM) ===== */
.mcp-app-container {
    width: 100%;
}

.mcp-app-container .mcp-app-message {
    margin-bottom: 10px;
    font-size: 13px;
    color: #374151;
    font-weight: 500;
}

.mcp-app-iframe {
    width: 100%;
    min-height: 340px;
    max-height: 450px;
    border: none;
    border-radius: 12px;
    background: #f8fafc;
}

/* ===== PROFILE CARD ===== */
.nexera-profile-card {
    border: 1px solid var(--nexera-border, #e5e7eb);
    border-radius: 8px;
    overflow: hidden;
    margin: 4px 0;
}

.nexera-profile-header {
    background: var(--nexera-header-bg, #1A1A1A);
    color: var(--nexera-header-text, #ffffff);
    padding: 10px 14px;
    font-size: 14px;
}

.nexera-profile-body {
    padding: 8px 0;
}

.nexera-profile-row {
    display: flex;
    padding: 6px 14px;
    border-bottom: 1px solid var(--nexera-border-light, #f0f0f0);
    align-items: baseline;
    gap: 12px;
}

.nexera-profile-row:last-child {
    border-bottom: none;
}

.nexera-profile-label {
    font-weight: 600;
    font-size: 12px;
    color: var(--nexera-text-secondary, #6b7280);
    min-width: 100px;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.nexera-profile-value {
    font-size: 13px;
    color: var(--nexera-text, #111827);
    word-break: break-word;
}

.nexera-profile-footer {
    background: var(--nexera-surface-hover, #f3f4f6);
    padding: 8px 14px;
    font-size: 12px;
    color: var(--nexera-text-secondary, #6b7280);
    border-top: 1px solid var(--nexera-border-light, #f0f0f0);
}

.nexera-nav-btn {
    background: transparent;
    border: 1px solid var(--nexera-link, #0a5399);
    color: var(--nexera-link, #0a5399);
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.15s, color 0.15s;
}

.nexera-nav-btn:hover:not(:disabled) {
    background: var(--nexera-link, #0a5399);
    color: var(--nexera-on-link, #fff);
}

.nexera-nav-btn:disabled {
    opacity: 0.4;
    cursor: default;
    border-color: #aaa;
    color: #aaa;
}

.nexera-nav-info {
    font-size: 12px;
    color: var(--nexera-text-secondary, #666);
}

/* ===== PANEL SIDEBAR POPOVER ===== */

/* Overlay behind the popover sidebar */
.nexera-panel-sidebar-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1200;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

/* Popover sidebar container — slides over the panel content */
.nexera-panel-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    width: 280px;
    height: 100%;
    z-index: 1201;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    overflow: hidden;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.15);
}

/* Override #sidebar styles inside the panel popover */
.nexera-panel-sidebar #sidebar {
    position: relative;
    width: 100% !important;
    height: 100%;
    border-radius: 0;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    box-shadow: none;
}

/* ===== PANEL FULLSCREEN MODE ===== */

/* Fullscreen overlay — covers viewport below the app header */
.nexera-fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: nexera-modal-fade-in 0.2s ease;
}

@keyframes nexera-modal-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Fullscreen container */
.nexera-fullscreen-container {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--nexera-bg);
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    animation: nexera-modal-scale-in 0.2s ease;
}

@keyframes nexera-modal-scale-in {
    from {
        transform: scale(0.95);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Override sidebar to stay inside fullscreen container (not the viewport) */
.nexera-fullscreen-container #sidebar {
    position: absolute;
    top: 0;
    height: 100%;
    z-index: 2010;
    border-radius: 0;
}

/* Fullscreen top bar */
.nexera-fullscreen-topbar {
    position: absolute;
    top: 0;
    left: 260px;
    right: 0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: var(--nexera-surface);
    border-bottom: 1px solid var(--nexera-border);
    box-shadow: 0 1px 3px var(--nexera-shadow);
    z-index: 2001;
    transition: left 0.3s ease;
    border-radius: 0;
}

.nexera-fullscreen-topbar.collapsed {
    left: 70px;
}

/* Fullscreen content area */
.nexera-fullscreen-content {
    margin-top: 60px;
    margin-left: 260px;
    padding: 20px;
    height: calc(100% - 60px);
    display: flex;
    justify-content: center;
    transition: margin-left 0.3s ease;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.nexera-fullscreen-content.collapsed {
    margin-left: 70px;
}

/* Override chat-container height inside fullscreen — must not exceed parent */
.nexera-fullscreen-content .chat-wrapper {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.nexera-fullscreen-content .chat-container {
    height: 100% !important;
    min-height: 0;
}

/* ===== TYPING / LOADING INDICATOR ===== */
.nexera-typing-bubble {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    min-width: 60px;
    padding: 10px 16px;
}

/* Disabled send button */
.nexera-send.disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

/* ===== ATTACHMENT PREVIEW & MENU ===== */

.chat-box-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 70%;
    max-width: 768px;
    margin: auto auto 16px;
    gap: 6px;
}

/* Chat box expands with rounder-rectangle shape when attachment present */
.chat-box.has-attachment {
    border-radius: 20px;
    padding: 12px;
}

/* Horizontal input row inside chat-box */
.chat-input-row {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 4px;
}

.chat-input-row input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--nexera-text);
}

/* Attachment preview area (inside chat-box, above input row) */
.attachment-preview-area {
    padding: 4px 4px 10px;
}

.attachment-preview-card {
    position: relative;
    display: inline-block;
    border-radius: 10px;
    overflow: visible;
    border: 1px solid var(--nexera-border, #e0e0e0);
    background: var(--nexera-surface-hover, #f5f5f5);
}

.attachment-preview-close {
    position: absolute;
    top: -8px;
    right: -8px;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #555;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    transition: background var(--nexera-transition-speed) ease;
}

.attachment-preview-close .fluent-icon {
    color: white;
    fill: white;
    font-size: 12px;
}

.attachment-preview-close:hover {
    background: #333;
}

.attachment-preview-img {
    display: block;
    max-width: 120px;
    max-height: 80px;
    object-fit: cover;
    border-radius: 10px;
}

.attachment-preview-file {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    gap: 4px;
    min-width: 80px;
}

.attachment-preview-name {
    font-size: 11px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--nexera-text-secondary, #666);
}

.attachment-trigger-wrapper {
    position: relative;
}

.attachment-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 900;
}

.attachment-menu {
    position: absolute;
    bottom: 40px;
    left: 0;
    min-width: 200px;
    background: var(--nexera-surface, #fff);
    border: 1px solid var(--nexera-border, #e0e0e0);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 6px 0;
    z-index: 1000;
}

.attachment-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 8px);
    padding: 10px 16px;
    border: none;
    cursor: pointer;
    background: transparent;
    font-size: 14px;
    font-family: inherit;
    color: var(--nexera-text, #333);
    text-align: left;
    transition: background 0.15s ease;
    white-space: nowrap;
    border-radius: 6px;
    margin: 0 4px;
}

.attachment-menu-item:hover {
    background: var(--nexera-surface-hover, #f5f5f5);
}

.attachment-menu-item:focus-visible {
    outline: 2px solid var(--nexera-focus, #0078d4);
    outline-offset: -2px;
}

/* Inline validation error for file attachment */
.attachment-error {
    flex: 1;
    font-size: 13px;
    color: #d13438;
    padding: 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Page-level loading overlay — centered within the chat app */
#nexera-chat-app > .loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(243, 242, 245, 0.7);
    z-index: 4000;
    border-radius: inherit;
}

/* ===== AI BUBBLE ERROR STYLING ===== */
.chat-bubble.ai-bubble-error {
    border-left: 3px solid #ef4444;
}

/* ===== MARKDOWN CONTENT INSIDE AI BUBBLES ===== */
.chat-bubble.ai-bubble .chat-bubble-content h1,
.chat-bubble.ai-bubble .chat-bubble-content h2,
.chat-bubble.ai-bubble .chat-bubble-content h3 {
    margin: 8px 0 4px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.chat-bubble.ai-bubble .chat-bubble-content h3 {
    font-size: 13px;
}

.chat-bubble.ai-bubble .chat-bubble-content p {
    margin: 4px 0;
}

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

.chat-bubble.ai-bubble .chat-bubble-content li {
    margin: 2px 0;
}

.chat-bubble.ai-bubble .chat-bubble-content strong {
    font-weight: 700;
}

.chat-bubble.ai-bubble .chat-bubble-content code {
    background: rgba(0, 0, 0, 0.06);
    padding: 1px 4px;
    border-radius: 4px;
    font-size: 13px;
    font-family: 'Cascadia Code', 'Consolas', monospace;
}

.chat-bubble.ai-bubble .chat-bubble-content pre {
    background: rgba(0, 0, 0, 0.06);
    padding: 10px 14px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 6px 0;
}

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

.chat-bubble.ai-bubble .chat-bubble-content > *:first-child {
    margin-top: 0;
}

.chat-bubble.ai-bubble .chat-bubble-content > *:last-child {
    margin-bottom: 0;
}

/* ===== SEARCH CHAT POPUP ===== */
.search-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 5000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10vh;
}

.search-popup {
    width: 580px;
    max-height: 70vh;
    background: var(--nexera-surface, #fff);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header row: search input + close */
.search-popup-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--nexera-border, #ddd);
}

.search-popup-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-popup-search-icon {
    display: flex;
    align-items: center;
    color: var(--nexera-text-muted, gray);
}

.search-popup-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    background: transparent;
    color: var(--nexera-text, #1a1a1a);
}

.search-popup-input::placeholder {
    color: var(--nexera-text-muted, gray);
}

.search-popup-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--nexera-transition-speed) ease;
}

.search-popup-close:hover {
    background: var(--nexera-surface-hover, #f5f5f5);
}

/* New chat row */
.search-popup-new-chat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--nexera-text, #1a1a1a);
    border-bottom: 1px solid var(--nexera-border, #ddd);
    transition: background var(--nexera-transition-speed) ease;
}

.search-popup-new-chat:hover {
    background: var(--nexera-surface-hover, #f5f5f5);
}

/* Scrollable chat list */
.search-popup-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

/* Group label (Today, Yesterday, etc.) */
.search-popup-group-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--nexera-text-muted, gray);
    padding: 10px 16px 4px;
    text-transform: capitalize;
}

/* Each session item */
.search-popup-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
    color: var(--nexera-text, #1a1a1a);
    transition: background var(--nexera-transition-speed) ease;
}

.search-popup-item:hover {
    background: var(--nexera-surface-hover, #f5f5f5);
}

.search-popup-item-icon {
    display: flex;
    align-items: center;
    color: var(--nexera-icon-fill, #6b7280);
    flex-shrink: 0;
}

.search-popup-item-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Empty state */
.search-popup-empty {
    text-align: center;
    padding: 24px 16px;
    font-size: 14px;
    color: var(--nexera-text-muted, gray);
}

/* Screen-reader-only text (MAS 4.1.3 Status Messages).
   Used for the search results live region, which must be present in the DOM and
   readable by assistive technology without altering the visual design. clip-path
   plus a 1px box is used rather than display:none or visibility:hidden, because
   those remove the element from the accessibility tree and it would never be
   announced. Defined here rather than reusing .sr-only from app.css so the Nexera
   panel does not depend on another stylesheet being loaded first. */
.nexera-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Panel-mode: search popup contained inside the chat panel */
.search-popup-overlay.search-popup-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 48px;
    border-radius: inherit;
}

.search-popup-overlay.search-popup-panel .search-popup {
    width: 95%;
    max-height: calc(100% - 60px);
    border-radius: 10px;
}

/* Fullscreen-mode: search popup centered over the fullscreen overlay */
.search-popup-overlay.search-popup-fullscreen {
    position: fixed;
    top: 38px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 38px);
    padding-top: 8vh;
}

/* ===== POPUP CENTERING: When AI panel is open, keep popups centered in the Nexus main area ===== */

/* 1. Telerik modal overlay: exclude the AI panel area so the overlay only covers main content */
.nexera-layout-root:has(.nexera-panel-inline) ~ .k-overlay {
    right: 380px;
}

/* 2. Telerik centered Window: shift left by half the panel width to re-center in main content */
.nexera-layout-root:has(.nexera-panel-inline) ~ .k-animation-container .k-window {
    transform: translateX(-190px);
}

/* ===== SUGGESTION CHIPS ===== */
.suggestion-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 24px;
    max-width: 640px;
}

.suggestion-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--nexera-border);
    border-radius: 12px;
    background: var(--nexera-surface);
    color: var(--nexera-text);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px var(--nexera-shadow);
}

    .suggestion-chip:hover {
        background: var(--nexera-surface-hover);
        border-color: var(--nexera-rename-focus);
        box-shadow: 0 2px 8px var(--nexera-shadow-strong);
        transform: translateY(-1px);
    }

    .suggestion-chip:active {
        transform: translateY(0);
    }

/* ===== TEXTAREA STYLE ===== */
.chat-textarea {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--nexera-text);
    font-size: 15px;
    font-family: inherit;
    padding: 6px 4px;
    resize: none;
    min-height: 28px;
    max-height: 150px;
    overflow-y: auto;
    line-height: 1.5;
}

    .chat-textarea::placeholder {
        color: var(--nexera-text-muted);
    }

    /* ===== DISCLAIMER TEXT ===== */
.chat-disclaimer {
    text-align: center;
    font-size: 11px;
    color: var(--nexera-text-muted);
    padding-top: 4px;
}

/* ===== SCROLLABLE CHAT LIST IN SIDEBAR ===== */
.chat-list-scrollable {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding-right: 2px;
}

.chat-list-scrollable::-webkit-scrollbar {
    width: 4px;
}

.chat-list-scrollable::-webkit-scrollbar-track {
    background: transparent;
}

.chat-list-scrollable::-webkit-scrollbar-thumb {
    background: var(--nexera-border, #ddd);
    border-radius: 2px;
}

.chat-list-scrollable::-webkit-scrollbar-thumb:hover {
    background: var(--nexera-text-muted, #999);
}

/* ===== CHAT INPUT PINNED TO BOTTOM ===== */
.chat-box-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 70%;
    max-width: 768px;
    margin: auto auto 16px;
    gap: 6px;
}

.chat-started .chat-box-wrapper {
    margin-top: auto;
}

/* ===== TALLER CHAT INPUT (Copilot-style) ===== */
.chat-box {
    width: 100%;
    border: 1px solid var(--nexera-border);
    background: var(--nexera-surface);
    border-radius: 16px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    box-shadow: var(--nexera-chat-input-shadow, 0 2px 12px rgba(0, 0, 0, 0.08));
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    min-height: 56px;
}

    .chat-box:focus-within {
        border-color: var(--nexera-rename-focus, #3b82f6);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12), var(--nexera-chat-input-shadow, 0 2px 12px rgba(0, 0, 0, 0.08));
    }

    .chat-box input {
        flex: 1;
        border: none;
        outline: none;
        background: transparent;
        color: var(--nexera-text);
        font-size: 15px;
        padding: 6px 4px;
        min-height: 28px;
    }

        .chat-box input::placeholder {
            color: var(--nexera-text-muted);
        }
.right-section-header .nexera-icon {
    padding: 8px;
}
/* ===== ACCESSIBLE TOOLTIP (WCAG 1.4.13 Content on Hover or Focus) =====
   Shown on keyboard focus as well as mouse hover, unlike the native `title`
   attribute which browsers surface on hover only. Rendered on document.body
   so scroll containers such as .chat-list-scrollable cannot clip it, and
   positioned from script, so only appearance is defined here. Deliberately
   mirrors the native browser tooltip so the visual design is unchanged:
   light surface, hairline border, square corners, dark text. Colours are
   fixed rather than themed because the element sits outside the themed
   [data-theme] subtree; this pairing is 18.1:1 and passes in both themes. */
.nx-a11y-tooltip {
    position: fixed;
    z-index: 2000;
    display: none;
    max-width: 22rem;
    padding: 0.125rem 0.25rem;
    border: 1px solid #767676;
    border-radius: 0;
    background: #ffffff;
    color: #000000;
    font-size: 0.75rem;
    line-height: 1.4;
    /* Wrap rather than clip, so the tooltip stays readable when text is
       enlarged or the label is long (MAS 1.4.4 Resize Text). */
    white-space: normal;
    overflow-wrap: anywhere;
}

.nx-a11y-tooltip-visible {
    display: block;
}

@media (forced-colors: active) {
    .nx-a11y-tooltip {
        background: Canvas;
        color: CanvasText;
        border: 1px solid CanvasText;
    }
}