/* ===========================================
   APP SHELL - Flex Layout

   Structure:
   +----------------------------------------+
   | [=] Mendelbot | header-actions          |  <- Header row
   +----------------------------------------+
   |          |                              |
   | sidebar  |  main-content                |  <- Content row
   |          |                              |
   +----------------------------------------+
   =========================================== */

:root {
    --sidebar-width-expanded: 240px;
    --sidebar-width-collapsed: 60px;
    --sidebar-transition: width 0.3s ease, padding 0.3s ease;
}

.app-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* Header */
.top-header {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 60px;
    flex-shrink: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    padding: 0;
    margin: 0;
    z-index: 10;
}

.header-start {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
}

.header-start .sidebar-toggle {
    position: static;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    padding: 0;
    color: var(--text);
}

.header-start .sidebar-toggle .icon {
    width: 1.5rem;
    height: 1.5rem;
}

.header-start .sidebar-toggle:hover {
    background: var(--surface-elevated);
}

.header-title {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-lg);
    color: var(--text);
    white-space: nowrap;
}

.header-actions {
    flex: 1;
    padding: var(--space-3) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
}

/* Content area */
.app-body {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

/* Sidebar — collapsed: icons only (60px), expanded: icons + text (240px) */
.sidebar {
    width: var(--sidebar-width-collapsed);
    min-width: var(--sidebar-width-collapsed);
    max-width: var(--sidebar-width-collapsed);
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: var(--space-3) var(--space-2);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    transition: var(--sidebar-transition);
}

.sidebar.expanded {
    width: var(--sidebar-width-expanded);
    min-width: var(--sidebar-width-expanded);
    max-width: var(--sidebar-width-expanded);
    padding: var(--space-3) var(--space-3);
}

.sidebar nav {
    flex: 1;
    padding-top: var(--space-2);
}

.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar li a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    white-space: nowrap;
    transition: all var(--transition-base);
}

/* Expanded: left-aligned icons + text */
.sidebar.expanded li a {
    justify-content: flex-start;
    padding: 0.4rem 0.6rem;
}

/* Collapsed: center icons, hide text */
.sidebar:not(.expanded) li a {
    justify-content: center;
    padding: 0.5rem;
}

.sidebar:not(.expanded) .nav-text {
    display: none;
}

.sidebar.expanded .nav-text {
    display: inline;
}

.sidebar nav .icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


.sidebar li a:hover {
    background: var(--surface-elevated);
    color: var(--primary-text);
}

.sidebar li a[aria-current="page"] {
    background: linear-gradient(135deg, var(--brand-primary-500), var(--brand-primary-600));
    color: white;
    font-weight: var(--font-weight-semibold);
    box-shadow: var(--shadow-sm);
}

.sidebar-footer {
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.sidebar-footer form {
    margin-bottom: 0;
}

.sidebar-footer button,
.sidebar-footer a[role="button"] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    font-size: var(--font-size-sm);
    padding: 0.4rem 0.6rem;
}

.sidebar-footer a[role="button"] {
    margin-bottom: 0.5rem;
}

/* Collapsed footer: hide text, show icon-sized button */
.sidebar:not(.expanded) .sidebar-footer .button-text {
    display: none;
}

.sidebar.expanded .sidebar-footer button,
.sidebar.expanded .sidebar-footer a[role="button"] {
    justify-content: flex-start;
}

.sidebar:not(.expanded) .sidebar-footer form {
    display: flex;
    justify-content: center;
}

.sidebar:not(.expanded) .sidebar-footer button,
.sidebar:not(.expanded) .sidebar-footer a[role="button"] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    gap: 0;
    margin: 0 auto 0.25rem;
    justify-content: center;
}

/* Main content area */
.main-content {
    flex: 1;
    padding: var(--space-8) var(--space-10);
    overflow-y: auto;
    min-width: 0;
    background: var(--background);
}

/* Responsive: off-canvas drawer on mobile */
@media (max-width: 768px) {
    .top-header {
        flex-wrap: nowrap;
    }

    .header-start {
        flex: 1;
        min-width: 0;
    }

    .header-title {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .header-actions {
        flex: 0 0 auto;
        padding: var(--space-3);
    }

    .sidebar {
        position: fixed;
        top: 60px;
        left: 0;
        bottom: 0;
        width: 260px !important;
        min-width: 260px !important;
        max-width: 260px !important;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 50;
        padding: var(--space-5);
        overflow-y: auto;
        overflow-x: hidden;
        border-right: 1px solid var(--border);
        box-shadow: var(--shadow-xl);
    }

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

    .sidebar .nav-text {
        position: static !important;
        opacity: 1 !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
    }

    .sidebar .sidebar-footer .button-text {
        position: static !important;
        opacity: 1 !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
    }

    .sidebar ul {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
    }

    .sidebar li a,
    .sidebar.mobile-open li a {
        gap: 0.75rem;
        justify-content: flex-start;
        padding: var(--space-3) var(--space-4);
    }

    .sidebar .sidebar-footer {
        align-items: stretch !important;
    }

    .sidebar .sidebar-footer form {
        width: 100% !important;
    }

    .sidebar .sidebar-footer button,
    .sidebar .sidebar-footer a[role="button"] {
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        padding: var(--space-3) var(--space-4) !important;
        gap: 0.5rem !important;
    }

    .sidebar-backdrop {
        display: none;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 45;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    body.sidebar-mobile-open .sidebar-backdrop {
        display: block;
        opacity: 1;
    }

    .main-content {
        padding: var(--space-4);
    }
}

@media (max-width: 375px) {
    .header-title {
        display: none;
    }

    .header-start {
        padding: var(--space-3) var(--space-2);
    }

    .header-actions {
        padding: var(--space-3) var(--space-2);
    }
}

/* ===========================================
   User dropdown
   =========================================== */

.user-dropdown {
    position: relative;
}

.user-avatar {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--brand-primary-500), var(--brand-primary-600));
    color: white;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    font-size: var(--font-size-sm);
    line-height: 1;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.user-avatar:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.user-avatar::before {
    content: attr(data-initial);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    width: 1ch;
    text-align: center;
}

.dropdown-content {
    position: absolute;
    right: 0;
    top: 100%;
    min-width: 220px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    padding: var(--space-2);
    margin-top: var(--space-2);
    animation: slide-up var(--transition-base);
}

.dropdown-content[hidden] {
    display: none;
}

.dropdown-header {
    padding: var(--space-3);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.dropdown-content a {
    display: block;
    padding: var(--space-3);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--text);
    transition: all var(--transition-base);
}

.dropdown-content a:hover {
    background: var(--surface-elevated);
    color: var(--primary-text);
}

.dropdown-content hr {
    margin: var(--space-2) 0;
    border-color: var(--border);
}

.dropdown-content form {
    margin: 0;
}

.dropdown-content button {
    width: 100%;
}

/* ===========================================
   Toast notifications
   =========================================== */

#toast-container {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 1001;
    max-width: 400px;
}

.toast {
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    animation: toast-slide-in var(--transition-slow) ease-out;
}

.toast.success {
    border-left: 4px solid var(--color-success-500);
    background: var(--color-success-50);
}

[data-theme="dark"] .toast.success {
    background: rgba(16, 185, 129, 0.1);
}

.toast.error {
    border-left: 4px solid var(--color-error-500);
    background: var(--color-error-50);
}

[data-theme="dark"] .toast.error {
    background: rgba(239, 68, 68, 0.1);
}

.toast.info {
    border-left: 4px solid var(--color-info-500);
    background: var(--color-info-50);
}

[data-theme="dark"] .toast.info {
    background: rgba(59, 130, 246, 0.1);
}

@keyframes toast-slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ===========================================
   Create-modal dialog
   =========================================== */

dialog.create-modal {
    background: rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

dialog.create-modal::backdrop {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

dialog.create-modal > article {
    max-width: 480px;
    width: 100%;
}

dialog.create-modal > article:hover {
    transform: none;
}

dialog.create-modal article > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-6);
}

dialog.create-modal article > header h3 {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

dialog.create-modal .modal-close {
    background: transparent;
    border: none;
    box-shadow: none;
    font-size: 1.5rem;
    line-height: 1;
    padding: var(--space-1) var(--space-2);
    color: var(--text-muted);
    cursor: pointer;
    order: 1;
}

dialog.create-modal .modal-close:hover {
    color: var(--text);
    background: var(--surface-elevated);
    transform: none;
    box-shadow: none;
}

dialog.create-modal form {
    padding: var(--space-2) var(--space-6) var(--space-6);
}

dialog.create-modal form label {
    margin-bottom: var(--space-4);
    display: block;
}

dialog.create-modal form .modal-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}

/* ===========================================
   Form & UI components
   =========================================== */

.form-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    margin-top: var(--space-6);
}

.badge {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wide);
    display: inline-block;
    text-transform: uppercase;
}

.badge.active {
    background: var(--color-success-700);
    color: white;
}

.badge.inactive {
    background: var(--neutral-300);
    color: var(--neutral-700);
}

[data-theme="dark"] .badge.inactive {
    background: var(--neutral-700);
    color: var(--neutral-300);
}

.badge.pending {
    background: var(--color-warning-700);
    color: white;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: var(--space-6);
}

.card-grid article footer .form-actions {
    flex-wrap: wrap;
}

/* ===========================================
   HTMX loading indicator
   =========================================== */

.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inline-block;
}

.htmx-request.htmx-indicator {
    animation: spin 1s linear infinite;
}

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

/* ===========================================
   Data tables
   =========================================== */

table {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

table td.actions {
    white-space: nowrap;
}

table td.actions button {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    margin-right: var(--space-1);
}

/* ===========================================
   Page headers
   =========================================== */

.page-header {
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border);
}

.page-header h1 {
    margin-bottom: var(--space-2);
    color: var(--text);
}

.page-header p {
    color: var(--text-muted);
    font-size: var(--font-size-lg);
}

/* ===========================================
   Utilities
   =========================================== */

.text-muted { color: var(--text-muted); }
.text-subtle { color: var(--text-subtle); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }

.empty-state {
    text-align: center;
    padding: var(--space-16);
    color: var(--text-muted);
    font-size: var(--font-size-lg);
}

.placeholder {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===========================================
   Workspace switcher
   =========================================== */

.workspace-switcher {
    position: relative;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
}

.workspace-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.workspace-label .icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
}

.workspace-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-md);
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text);
    transition: background 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: none;
}

.workspace-toggle:hover {
    background: var(--surface-elevated);
    box-shadow: none;
}

.workspace-toggle .icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
}

.ws-chevron {
    margin-left: auto;
    transition: transform 0.2s ease;
    display: inline-flex;
}

.ws-chevron.open {
    transform: rotate(180deg);
}

.workspace-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 60;
    padding: var(--space-1);
    margin-top: var(--space-1);
}

.workspace-dropdown form {
    margin: 0;
}

.workspace-option {
    width: 100%;
    display: block;
    padding: var(--space-2) var(--space-3);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--text);
    text-align: left;
    transition: background 0.15s ease;
    box-shadow: none;
    margin: 0;
}

.workspace-option:hover {
    background: var(--surface-elevated);
    box-shadow: none;
}

/* Collapsed sidebar: hide switcher text */
.sidebar:not(.expanded) .workspace-switcher .nav-text {
    display: none;
}

.sidebar.expanded .workspace-toggle {
    justify-content: flex-start;
    padding: 0.4rem 0.6rem;
}

.sidebar:not(.expanded) .workspace-toggle {
    justify-content: center;
    padding: 0.5rem;
}

.sidebar:not(.expanded) .workspace-label {
    justify-content: center;
}

.sidebar:not(.expanded) .workspace-label .nav-text {
    display: none;
}

.sidebar:not(.expanded) .workspace-dropdown {
    left: var(--sidebar-width-collapsed);
    right: auto;
    top: 0;
    min-width: 180px;
}

[x-cloak] {
    display: none !important;
}

/* ===========================================
   Chat Page Layout
   =========================================== */

/* Remove main-content padding when chat is active */
.main-content:has(> .chat-layout) {
    padding: 0;
    overflow: hidden;
}

.chat-layout {
    display: flex;
    flex-direction: row;
    height: 100%;
    overflow: hidden;
}

/* Chat Sidebar (Conversations) */
.chat-sidebar {
    flex-shrink: 0;
    width: 280px;
    height: 100%;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-right-width 0.3s ease;
}

.chat-sidebar.collapsed {
    width: 0;
    min-width: 0;
    border-right: none;
    overflow: hidden;
}

.chat-sidebar.no-transition {
    transition: none !important;
}

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

.chat-sidebar-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
}

.chat-sidebar-header button {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-sm);
    margin-bottom: 0;
    white-space: nowrap;
}

.conversation-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.conversation-list::-webkit-scrollbar {
    width: 6px;
}

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

.conversation-list::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

/* Conversation Items */
.conversation-item {
    display: block;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    text-decoration: none;
    color: var(--text);
    transition: all 0.2s ease;
    font-size: var(--font-size-sm);
}

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

.conversation-item.active {
    background: linear-gradient(135deg, var(--brand-primary-500), var(--brand-primary-600));
    color: white;
    border-left: 3px solid var(--brand-primary-600);
}

/* Chat Header Bar */
.chat-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.chat-title {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--text);
}

.chat-sidebar-toggle {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
    color: var(--text);
}

.chat-sidebar-toggle:hover {
    background: var(--brand-primary-500);
    color: white;
    box-shadow: var(--shadow-md);
    transform: none;
}

.chat-sidebar-toggle .icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-sidebar-toggle .icon svg {
    width: 18px;
    height: 18px;
}

/* Chat Agent Selector */
.chat-agent-selector {
    margin-left: auto;
    position: relative;
}

.chat-agent-selector > button {
    width: auto;
    margin-bottom: 0;
    padding: 2px 8px;
    font-size: var(--font-size-sm);
    background: var(--surface-elevated) !important;
    color: var(--text) !important;
    border: 1px solid var(--border);
    box-shadow: none;
}

.chat-agent-selector > button:hover {
    background: var(--primary) !important;
    color: white !important;
    border-color: var(--primary);
    transform: none;
    box-shadow: var(--shadow-sm);
}

.chat-agent-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: var(--space-1);
    min-width: 200px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-1);
    z-index: 60;
}

.chat-agent-dropdown form { margin: 0; }

.chat-agent-dropdown button {
    width: 100%;
    text-align: left;
    padding: var(--space-2) var(--space-3);
    background: transparent !important;
    color: var(--text) !important;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--font-size-sm);
    box-shadow: none;
    margin: 0;
    margin-bottom: 0;
}

.chat-agent-dropdown button:hover {
    background: var(--surface-elevated) !important;
    color: var(--primary-text) !important;
    transform: none;
    box-shadow: none;
}

.chat-sidebar-header select {
    flex: 1;
    margin: 0;
    padding: 2px 8px;
    font-size: var(--font-size-sm);
    background-color: var(--surface-elevated);
    color: var(--text);
    border: 1px solid var(--border);
}

/* Main Chat Area */
.chat-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Chat Messages (Scrollable) */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.chat-messages::-webkit-scrollbar {
    width: 8px;
}

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

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

/* Message Bubbles */
.chat-message {
    max-width: 80%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    animation: slide-up var(--transition-base);
}

.chat-message .sender {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-1);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.chat-message .content {
    word-break: break-word;
    white-space: pre-wrap;
    line-height: var(--line-height-relaxed);
}

.chat-message .timestamp {
    font-size: var(--font-size-xs);
    opacity: 0.7;
    margin-top: var(--space-1);
}

/* User messages - right-aligned teal gradient */
.chat-message.own {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--brand-primary-500), var(--brand-primary-600));
    color: white;
    border-bottom-right-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}

/* Other messages - left-aligned neutral */
.chat-message:not(.own) {
    align-self: flex-start;
    background: var(--surface-elevated);
    color: var(--text);
    border-bottom-left-radius: var(--radius-sm);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

/* Chat Input Bar */
.chat-input-bar {
    flex-shrink: 0;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.chat-input-form {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    margin: 0;
}

.chat-input-form textarea {
    flex: 1;
    width: auto;
    min-height: 44px;
    max-height: 200px;
    resize: vertical;
    margin-bottom: 0;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.chat-input-form button[type="submit"] {
    flex-shrink: 0;
    width: auto;
    padding: var(--space-2) var(--space-5);
    margin-bottom: 0;
    white-space: nowrap;
    align-self: flex-end;
    min-height: 44px;
}

/* Responsive: mobile */
@media (max-width: 768px) {
    .chat-sidebar {
        position: fixed;
        left: 0;
        top: 60px;
        bottom: 0;
        width: min(280px, 85vw);
        z-index: 30;
        box-shadow: var(--shadow-xl);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

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

    .chat-message {
        max-width: 90%;
    }
}

/* ===========================================
   Settings page
   =========================================== */

.settings-section {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.settings-section h3 {
    margin-top: 0;
    font-size: var(--font-size-lg);
}

.settings-saved {
    color: var(--color-success-500);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-3);
}