/* Lawyer AI visual system.
   Surfaces keep the layered shell from the product layout:
   atmosphere behind, sidebar slab, floating content panel. */

:root {
    --brand-purple: #7655E9;
    --brand-purple-deep: #6545E7;
    --brand-purple-mid: #8A5CF0;
    --brand-purple-soft: #B17AF3;
    --brand-lavender: #D5B6F4;
    --brand-gradient: linear-gradient(
        135deg,
        #6545E7 0%,
        #8A5CF0 40%,
        #B17AF3 72%,
        #D5B6F4 100%
    );
    --interactive-primary: #7655E9;
    --interactive-primary-hover: #6848DF;
    --interactive-primary-active: #5F40D4;
    --interactive-soft: rgba(118, 85, 233, 0.075);
    --interactive-soft-hover: rgba(118, 85, 233, 0.12);
    --focus-ring: rgba(118, 85, 233, 0.18);
    --interactive-gradient: linear-gradient(135deg, #7655E9 0%, #A66DEB 100%);
    --interactive-gradient-hover: linear-gradient(135deg, #6848DF 0%, #985EDF 100%);
    --interactive-gradient-active: linear-gradient(135deg, #5F40D4 0%, #8D55D4 100%);
    --action-gradient: var(--interactive-gradient);
    --radius-shell: 28px;
    --radius-panel: 20px;
    --radius-card: 16px;
    --radius-control: 14px;
    --radius-icon: 12px;
    --radius-small: 14px;
    --radius-pill: 999px;
    --radius-composer: 28px;
    --sidebar-expanded: 274px;
    --sidebar-collapsed: 76px;
    --sidebar-width: var(--sidebar-expanded);
    --font-ui: "DM Sans", Arial, sans-serif;
    --font-brand: "Instrument Serif", Georgia, serif;
}

:root,
[data-theme="dark"],
html.dark-theme {
    --text-dark-primary: #F7F4FF;
    --text-dark-strong: #E5DDF1;
    --text-dark-body: #D2C8E4;
    --text-dark-secondary: #BCB0D1;
    --text-dark-muted: #968AAE;
    --text-primary: var(--text-dark-primary);
    --text-secondary: var(--text-dark-body);
    --text-sub-color: var(--text-dark-secondary);
    --text-muted: var(--text-dark-muted);
    --label-color: #D9CFEA;
    --icon-primary: #F7F4FF;
    --icon-secondary: #D4C9E8;
    --icon-muted: #B8ACCE;
    --icon-hover: #FFFFFF;
    --icon-disabled: rgba(214, 205, 232, 0.42);
    --field-bg: rgba(255, 255, 255, 0.07);
    --field-border: rgba(205, 186, 255, 0.18);
    --field-border-hover: rgba(205, 186, 255, 0.3);
    --card-surface: rgba(255, 255, 255, 0.055);
    --composer-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.038));
    --composer-border: rgba(205, 186, 255, 0.16);
    --composer-placeholder: #AAA0BC;
    --submit-bg: linear-gradient(135deg, #7655E9 0%, #9A6CF3 100%);
    --logo-text: #F5F1E8;
    --link-color: #CDBAFF;
    --border-soft: rgba(205, 186, 255, 0.16);
    --control-fill: rgba(255, 255, 255, 0.06);
    --control-secondary: rgba(255, 255, 255, 0.08);
    --control-secondary-text: #CBBFE5;
    --nav-active-bg: rgba(118, 85, 233, 0.28);
    --nav-active-color: #F7F4FF;
    --atmosphere:
        radial-gradient(circle at top right, rgba(170, 118, 238, 0.24), transparent 31%),
        radial-gradient(circle at 15% 85%, rgba(118, 85, 233, 0.15), transparent 30%),
        linear-gradient(155deg, #171326 0%, #201735 55%, #151221 100%);
    --sidebar-surface: linear-gradient(180deg, rgba(18, 15, 30, 0.94), rgba(21, 18, 33, 0.98));
    --shadow-sidebar:
        22px 0 56px rgba(8, 4, 18, 0.42),
        inset -1px 0 0 rgba(205, 186, 255, 0.14);
    --panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.045));
    --shadow-shell:
        0 28px 76px rgba(25, 14, 50, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --shadow-panel:
        0 18px 38px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --shadow-control: 0 8px 18px rgba(118, 85, 233, 0.2);
    --auth-surface: linear-gradient(180deg, #261E3E 0%, #1A152C 100%);
    --surface-page: #171326;
    --surface-card: rgba(255, 255, 255, 0.055);
    --surface-soft: rgba(255, 255, 255, 0.045);
    --surface-control: rgba(255, 255, 255, 0.07);
    --text-strong: #E5DDF1;
    --text-body: #D2C8E4;
    --border-main: rgba(205, 186, 255, 0.18);
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23AFA4C5' stroke-opacity='0.72' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

[data-theme="light"],
html.light-theme,
body.light-theme {
    --text-primary: #251D42;
    --text-secondary: #4E4568;
    --text-sub-color: #5C5478;
    --text-muted: #736A8E;
    --label-color: #3C3358;
    --icon-primary: #251D42;
    --icon-secondary: #5B4D8C;
    --icon-muted: #736A8E;
    --icon-hover: #211C2F;
    --icon-disabled: rgba(37, 29, 66, 0.38);
    --field-bg: rgba(255, 255, 255, 0.88);
    --field-border: rgba(118, 85, 233, 0.2);
    --field-border-hover: rgba(118, 85, 233, 0.36);
    --card-surface: rgba(255, 255, 255, 0.72);
    --composer-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.84));
    --composer-border: rgba(118, 85, 233, 0.18);
    --submit-bg: linear-gradient(135deg, #7655E9 0%, #9A6CF3 100%);
    --logo-text: #211C2F;
    --link-color: #6545E7;
    --border-soft: rgba(118, 85, 233, 0.14);
    --control-fill: rgba(255, 255, 255, 0.72);
    --control-secondary: #EDE9FB;
    --control-secondary-text: #5B4D8C;
    --nav-active-bg: #E4DDFB;
    --nav-active-color: #251D42;
    --atmosphere:
        radial-gradient(circle at top right, rgba(162, 132, 255, 0.22), transparent 30%),
        linear-gradient(155deg, #FBFBFF 0%, #F0EDFF 100%);
    --sidebar-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.66));
    --shadow-sidebar:
        18px 0 48px rgba(92, 68, 163, 0.12),
        inset -1px 0 0 rgba(255, 255, 255, 0.9);
    --panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.72));
    --shadow-shell:
        0 26px 70px rgba(92, 68, 163, 0.14),
        inset 0 1px 0 #FFFFFF;
    --shadow-panel:
        0 14px 34px rgba(82, 61, 141, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    --shadow-control: 0 8px 18px rgba(118, 85, 233, 0.2);
    --auth-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(245, 242, 255, 0.9));
    --surface-page: #F8F7FC;
    --surface-card: #FFFFFF;
    --surface-soft: #F8F6FC;
    --surface-control: #F7F5FB;
    --text-strong: #40364F;
    --text-body: #5F5574;
    --text-muted: #81768F;
    --border-main: #DED8EF;
    --border-soft: #E8E3F1;
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23776C90' stroke-opacity='0.72' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html,
body {
    background: var(--atmosphere);
    color: var(--text-primary);
    font-family: var(--font-ui);
}

body:has(.dashboard-layout) .lawzen-footer {
    display: none;
}

/* ---------- Wordmark ---------- */

.brand-lockup {
    display: inline-flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    line-height: 0;
    white-space: nowrap;
    overflow: visible;
    text-decoration: none;
    border: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
}

.brand-logo {
    display: block;
    height: 64px;
    width: auto;
    max-width: 100%;
}

.brand-logo--light {
    display: none;
}

html[data-theme="light"] .brand-logo--dark,
html.light-theme .brand-logo--dark {
    display: none;
}

html[data-theme="light"] .brand-logo--light,
html.light-theme .brand-logo--light {
    display: block;
}

.brand-lockup--nav .brand-logo {
    height: 44px;
}

.brand-lockup--footer .brand-logo {
    height: 40px;
}

@media (max-width: 720px) {
    .brand-logo {
        height: 52px;
    }

    .brand-lockup--nav .brand-logo {
        height: 40px;
    }
}

/* ---------- Theme switch ---------- */

.theme-switch,
.theme-switcher .theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--border-soft);
    background: var(--control-fill);
    color: var(--text-primary);
    border-radius: var(--radius-control);
    padding: 8px 14px;
    min-height: 40px;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: background 0.2s ease, transform 0.2s ease;
}

.theme-switcher .theme-btn {
    width: 40px;
    height: 40px;
    padding: 0;
}

.theme-switch:hover,
.theme-switcher .theme-btn:hover {
    background: var(--bg-hover);
    transform: translateY(-1px);
}

.theme-switch--floating {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 40;
}

body:has(.sidebar) .theme-switch--floating {
    display: none;
}

.sidebar-tools {
    margin-top: auto;
    padding: 12px 16px 20px;
}

.sidebar-tools .theme-switch {
    width: 100%;
}

/* ---------- App shell ---------- */

.dashboard-layout {
    background: var(--atmosphere);
}

.sidebar {
    width: var(--sidebar-width);
    flex: 0 0 var(--sidebar-width);
    background: var(--sidebar-surface);
    border-right: 1px solid var(--border-soft);
    box-shadow: var(--shadow-sidebar);
    position: relative;
    z-index: 5;
    overflow: visible;
    transition: width 220ms cubic-bezier(0.2, 0.8, 0.2, 1), flex-basis 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sidebar-header {
    overflow: visible;
    border-bottom: 1px solid var(--border-soft);
    padding: 22px 20px 18px;
}

.sidebar-header,
.sidebar-header a,
.lz-login-logo,
.brand-auth-logo,
.logo-container {
    overflow: visible;
    height: auto;
    border: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
}

.sidebar-header a {
    display: inline-flex;
    overflow: visible;
    text-decoration: none;
}

.sidebar-nav {
    overflow-x: visible;
    overflow-y: auto;
    min-height: 0;
}

.main-content {
    background: transparent;
    min-width: 0;
}

.main-content:has(.foundation-page) {
    overflow: auto;
}

.top-nav {
    background: transparent;
    border-bottom: 1px solid transparent;
    backdrop-filter: none;
}

.nav-left h1,
.desktop-title,
.foundation-page h1,
.foundation-header h1 {
    font-family: var(--font-ui);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.05;
    color: var(--text-primary);
}

.foundation-page h2,
.foundation-header h2,
.foundation-form legend {
    letter-spacing: -0.015em;
    color: var(--text-primary);
}

.nav-item {
    border-radius: var(--radius-control);
    color: var(--text-secondary);
    font-weight: 500;
}

.nav-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.nav-item.active {
    background: var(--nav-active-bg);
    color: var(--nav-active-color);
    border-left: 0;
    margin-left: 0.5rem;
    padding-left: 1rem;
}

.workspace-switcher select,
.foundation-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.foundation-form select,
.foundation-form textarea,
.lz-form-input,
body.brand-auth .form-control,
body.brand-auth input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.brand-auth select {
    background: var(--field-bg);
    color: var(--text-primary);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-control);
}

.workspace-add,
.foundation-form button.workspace-add,
.foundation-button.secondary,
.foundation-form button.secondary {
    background: var(--control-secondary);
    color: var(--control-secondary-text);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-control);
    box-shadow: none;
}

.chat-container {
    margin: 8px 20px 20px;
    border-radius: var(--radius-panel);
    background: var(--panel-bg);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-panel);
    backdrop-filter: blur(16px);
}

.chat-main,
.chat-sidebar {
    background: transparent;
}

.chat-header-main {
    background: transparent;
    border-bottom: 1px solid var(--border-soft);
}

.agent-selector-trigger,
body.light-theme .agent-selector-trigger,
body.light-theme .agent-selector-trigger:hover {
    background: var(--control-fill) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: var(--radius-card);
    color: var(--text-primary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.agent-selector-trigger .fas.fa-chevron-down,
body.light-theme .agent-selector-trigger .fas.fa-chevron-down {
    color: var(--text-secondary) !important;
}

.agent-avatar,
.current-ai-avatar {
    background: var(--action-gradient);
    box-shadow: 0 9px 20px rgba(118, 85, 233, 0.25);
}

.chat-input,
body.light-theme .chat-input {
    background: var(--composer-bg);
    border: 1px solid var(--composer-border);
    border-radius: var(--radius-composer);
    box-shadow:
        0 18px 42px rgba(25, 14, 50, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    color: var(--text-primary);
    min-height: 112px;
    padding: 20px 22px 16px;
}

html.dark-theme .chat-input,
body:not(.light-theme) .chat-input {
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

body:not(.light-theme) .hamburger-menu-btn span,
body.light-theme .hamburger-menu-btn span {
    background: var(--text-primary);
}

.btn-primary,
.foundation-button:not(.secondary),
.foundation-form button:not(.secondary):not(.workspace-add):not(.upload-retry):not(.profile-action),
.foundation-form input[type="submit"],
.modal-button-primary {
    background: var(--action-gradient);
    color: #FFFFFF;
    border: 0;
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-control);
    font-weight: 700;
    letter-spacing: 0;
}

.btn-primary:hover,
.foundation-button:not(.secondary):hover,
.foundation-form button:not(.secondary):not(.workspace-add):not(.upload-retry):not(.profile-action):hover,
.foundation-form input[type="submit"]:hover,
.modal-button-primary:hover,
.lz-btn-login:hover,
.lz-btn-submit:hover {
    background: var(--interactive-gradient-hover);
    color: #FFFFFF;
    box-shadow: 0 10px 24px rgba(118, 85, 233, 0.24);
}

.btn-primary:active,
.foundation-button:not(.secondary):active,
.foundation-form button:not(.secondary):not(.workspace-add):not(.upload-retry):not(.profile-action):active,
.foundation-form input[type="submit"]:active,
.modal-button-primary:active,
.lz-btn-login:active {
    background: var(--interactive-gradient-active);
    color: #FFFFFF;
    transform: translateY(0);
    box-shadow: none;
}

.new-matter-content {
    width: min(100%, 960px);
}

.foundation-card,
.foundation-panel,
.auth-form {
    background: var(--panel-bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-panel);
    backdrop-filter: blur(12px);
}

.auth-form {
    position: relative;
    overflow: visible;
    isolation: isolate;
}

.foundation-list a,
.foundation-tabs a.active,
.lz-login-link {
    color: var(--link-color);
}

.foundation-choice,
.foundation-message {
    background: var(--control-fill);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-card);
}

.profile-avatar {
    background: var(--action-gradient);
    color: #FFFFFF;
}

/* ---------- Auth screens that ship their own layout ---------- */

.lz-login-body,
body.brand-auth {
    font-family: var(--font-ui);
    background: var(--atmosphere);
    color: var(--text-primary);
    min-height: 100vh;
}

.lz-login-wrapper,
.auth-form,
body.brand-auth .auth-container {
    position: relative;
    border-radius: 24px;
    isolation: isolate;
}

.lz-login-wrapper {
    background: transparent;
    padding: 3px;
    animation: none;
}

.lz-login-wrapper::before,
.auth-form::before,
body.brand-auth .auth-container::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 3px;
    background: conic-gradient(
        from var(--border-angle),
        #6545E7,
        #7655E9,
        #B17AF3,
        #D5B6F4,
        #9A6CF3,
        #6545E7
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: login-border-spin 6s linear infinite;
    pointer-events: none;
    z-index: 2;
}

.lz-login-container,
body.brand-auth .auth-container,
.auth-form {
    background: var(--auth-surface);
    border: 0;
    border-radius: 24px;
    box-shadow:
        0 0 32px rgba(118, 85, 233, 0.12),
        0 20px 60px rgba(20, 14, 42, 0.26);
    color: var(--text-primary);
}

.lz-login-container {
    position: relative;
    z-index: 1;
}

.lz-login-title,
body.brand-auth .auth-title {
    background: none;
    background-clip: border-box;
    -webkit-background-clip: border-box;
    -webkit-text-fill-color: var(--text-primary);
    color: var(--text-primary);
    letter-spacing: -0.025em;
}

.lz-login-subtitle,
body.brand-auth .auth-subtitle,
.lz-form-label,
.lz-login-footer,
.lz-security-notice {
    color: var(--text-secondary);
}

.lz-form-input,
body.brand-auth .form-control,
body.brand-auth input,
body.brand-auth select {
    background: var(--control-fill);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-small);
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
}

.lz-form-input:focus {
    border-color: var(--brand-purple);
    box-shadow: 0 0 0 3px rgba(118, 85, 233, 0.2);
}

.lz-btn-login,
body.brand-auth .btn-primary,
body.brand-auth button[type="submit"] {
    background: var(--action-gradient);
    color: #FFFFFF;
    border: 0;
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-control);
}

.lz-btn-login:hover {
    background: var(--action-gradient);
    box-shadow: 0 12px 24px rgba(118, 85, 233, 0.28);
}

.lz-btn-demo {
    background: var(--control-secondary);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-control);
    color: var(--control-secondary-text);
}

.lz-btn-demo:hover {
    background: var(--bg-hover);
    border-color: var(--border-soft);
}

.lz-security-icon {
    color: var(--brand-lavender);
}

.brand-auth-logo,
.lz-login-logo,
.logo-container {
    display: flex;
    justify-content: center;
    overflow: visible;
    margin-bottom: 28px;
}

.auth-theme {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 5;
}

.lawzen-footer,
.footer-tagline,
.footer-column h4 {
    font-family: var(--font-ui);
}

/* Light-mode shell rules in style.css are more specific. Match them here. */
body.light-theme .dashboard-layout,
html.light-theme .dashboard-layout {
    background: var(--atmosphere);
}

body.light-theme .sidebar,
html.light-theme .sidebar {
    background: var(--sidebar-surface);
    border-right: 1px solid var(--border-soft);
    box-shadow: var(--shadow-sidebar);
}

body.light-theme .chat-container,
html.light-theme .chat-container {
    background: var(--panel-bg);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-panel);
}

body.light-theme .chat-sidebar,
body.light-theme .chat-main,
html.light-theme .chat-sidebar,
html.light-theme .chat-main {
    background: transparent;
}

body.light-theme .top-nav,
html.light-theme .top-nav {
    background: transparent;
    border-bottom-color: transparent;
}

@property --border-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes login-border-spin {
    to {
        --border-angle: 360deg;
    }
}

.auth-form::before {
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    transform: none;
}

.auth-form::after {
    content: none;
}

@media (prefers-reduced-motion: reduce) {
    .lz-login-wrapper::before,
    .auth-form::before,
    body.brand-auth .auth-container::before {
        animation: none;
    }
}

/* Composer geometry and monochrome icons painted with currentColor. */
.chat-input .message-input {
    padding: 0 2px;
    min-height: 28px;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--text-primary);
    letter-spacing: 0;
}

.chat-input .message-input::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

html.dark-theme .chat-input .message-input::placeholder,
body:not(.light-theme) .chat-input .message-input::placeholder {
    color: var(--composer-placeholder, #AAA0BC);
}

.chat-input .input-controls-bottom {
    margin: 10px 0 0;
    justify-content: space-between;
    align-items: center;
}

.chat-input .input-controls-left,
.chat-input .input-controls-right {
    position: static;
}

.chat-input .case-selector-trigger,
body.light-theme .chat-input .case-selector-trigger,
body.light-theme .chat-input .case-selector-trigger:hover {
    height: 36px !important;
    min-width: 0;
    max-width: 280px;
    border-radius: 12px !important;
    padding: 4px 12px !important;
    background: var(--field-bg) !important;
    border: 1px solid var(--field-border) !important;
    color: var(--text-primary);
}

html.dark-theme .chat-input .case-selector-trigger,
body:not(.light-theme) .chat-input .case-selector-trigger {
    background: rgba(255, 255, 255, 0.065) !important;
    border: 1px solid rgba(205, 186, 255, 0.15) !important;
    color: #D4C9E5;
}

html.dark-theme .chat-input .case-selector-trigger:hover,
body:not(.light-theme) .chat-input .case-selector-trigger:hover {
    background: rgba(255, 255, 255, 0.095) !important;
}

.chat-input .dropdown-menu {
    border-radius: 14px;
}

html.dark-theme .chat-input .dropdown-menu,
body:not(.light-theme) .chat-input .dropdown-menu {
    background: #211D30;
    border: 1px solid rgba(205, 186, 255, 0.14);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}

html.dark-theme .chat-input .dropdown-item,
body:not(.light-theme) .chat-input .dropdown-item {
    color: #F3EFFA;
}

html.dark-theme .chat-input .dropdown-item i,
body:not(.light-theme) .chat-input .dropdown-item i {
    color: #D8CDE9;
}

html.dark-theme .chat-input .dropdown-item:hover,
body:not(.light-theme) .chat-input .dropdown-item:hover,
html.dark-theme .chat-input .dropdown-item:hover i,
body:not(.light-theme) .chat-input .dropdown-item:hover i {
    background: rgba(118, 85, 233, 0.11);
    color: #F3EFFA;
}

.chat-input .fas {
    color: var(--icon-secondary);
}

.chat-input .input-btn:hover:not(.chat-send-button) .fas {
    color: var(--icon-hover);
}

.composer-glyph {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.composer-glyph--tools {
    -webkit-mask-image: url("/static/images/tools-dark.png");
    mask-image: url("/static/images/tools-dark.png");
}

.composer-glyph--spark {
    -webkit-mask-image: url("/static/images/enhance-prompt-dark.png");
    mask-image: url("/static/images/enhance-prompt-dark.png");
}

.composer-glyph--mic {
    -webkit-mask-image: url("/static/images/mic-dark.png");
    mask-image: url("/static/images/mic-dark.png");
}

.composer-glyph--voice {
    -webkit-mask-image: url("/static/images/voice-mode-dark.png");
    mask-image: url("/static/images/voice-mode-dark.png");
}

.chat-send-button,
button#chatSendBtn {
    display: grid;
    place-items: center;
    background: var(--submit-bg);
    color: #FFFFFF;
    box-shadow: 0 8px 18px rgba(118, 85, 233, 0.28);
}

.chat-send-button .composer-glyph {
    position: static;
    grid-area: 1 / 1;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 140ms ease, transform 140ms ease;
}

.chat-send-button .composer-glyph--send {
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
}

.chat-send-button:not(.is-send) .composer-glyph--voice,
.chat-send-button.is-send .composer-glyph--send {
    opacity: 1;
    transform: scale(1);
}

.chat-send-button .arrow-up {
    color: #FFFFFF;
    font-size: 15px;
}

body.light-theme .chat-input,
html.light-theme .chat-input {
    box-shadow:
        0 14px 34px rgba(82, 61, 141, 0.1),
        inset 0 1px 0 #FFFFFF;
}

@media (max-width: 768px) {
    .chat-input,
    body.light-theme .chat-input {
        border-radius: 24px;
        padding: 16px 14px 12px;
        min-height: 104px;
    }

    .chat-send-button,
    button#chatSendBtn {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
        flex-basis: 42px;
    }
}

/* Shared form controls. Rectangular radius, compact height. */
.foundation-form label,
.lz-form-label {
    color: var(--label-color);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    margin-bottom: 8px;
}

.foundation-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.foundation-form select,
.workspace-switcher select,
.lz-form-input {
    min-height: 46px;
    height: 46px;
    padding: 0 14px;
    border-radius: var(--radius-control);
}

.foundation-form textarea {
    min-height: 112px;
    height: auto;
    padding: 12px 14px;
    border-radius: var(--radius-control);
    line-height: 1.5;
}

.foundation-form input::placeholder,
.foundation-form textarea::placeholder,
.lz-form-input::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

.foundation-form input:not([type="checkbox"]):not([type="radio"]):hover,
.foundation-form select:hover,
.foundation-form textarea:hover,
.workspace-switcher select:hover {
    border-color: var(--field-border-hover);
}

.foundation-form input:focus,
.foundation-form select:focus,
.foundation-form textarea:focus,
.workspace-switcher select:focus,
.lz-form-input:focus {
    outline: none;
    border-color: #8A6AF0;
    box-shadow: 0 0 0 3px rgba(118, 85, 233, 0.15);
}

.foundation-form fieldset {
    border: 0;
    margin: 18px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.foundation-form legend {
    font-size: 16px;
    font-weight: 700;
    padding: 0;
    margin-bottom: 8px;
}

.foundation-choice {
    background: var(--card-surface);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-card);
    min-height: 84px;
    padding: 16px 18px;
    align-items: center;
}

.foundation-choice--compact {
    min-height: 54px;
    height: 54px;
    padding: 0 16px;
    border-radius: var(--radius-control);
}

.foundation-choice input {
    accent-color: #7655E9;
    width: 16px;
    height: 16px;
    margin: 0;
    flex: 0 0 16px;
}

.foundation-choice strong {
    color: #DED5ED;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
}

.foundation-choice .foundation-muted {
    color: #C7BCD9;
    font-size: 14px;
    line-height: 1.45;
}

.foundation-choice:has(input:checked) {
    border-color: rgba(138, 106, 240, 0.75);
    background: linear-gradient(135deg, rgba(118, 85, 233, 0.15), rgba(170, 118, 238, 0.09));
    box-shadow: 0 0 0 1px rgba(118, 85, 233, 0.08);
}

html.light-theme .foundation-choice strong,
body.light-theme .foundation-choice strong {
    color: #251D42;
}

html.light-theme .foundation-choice .foundation-muted,
body.light-theme .foundation-choice .foundation-muted {
    color: #5C5478;
}

html.light-theme .foundation-choice:has(input:checked),
body.light-theme .foundation-choice:has(input:checked) {
    background: linear-gradient(135deg, rgba(118, 85, 233, 0.12), rgba(213, 182, 244, 0.28));
}

.new-matter-page h1 {
    font-size: 38px;
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin-bottom: 8px;
}

.foundation-button,
.foundation-form button:not(.workspace-add):not(.icon-action),
.foundation-form input[type="submit"],
.lz-btn-login,
.lz-btn-demo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    min-height: 48px;
    height: 48px;
    padding: 0 18px;
    box-sizing: border-box;
    letter-spacing: 0;
}

.foundation-form input[type="submit"],
.foundation-form button[type="submit"] {
    margin-top: 16px;
}

.foundation-button:disabled,
.workspace-add:disabled {
    color: var(--icon-disabled);
}

.foundation-button.secondary,
.foundation-form button.secondary {
    border: none;
}

.foundation-form select,
.workspace-switcher select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 46px;
    background-color: var(--field-bg);
    background-image: var(--select-chevron);
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
}

.address-fields {
    display: grid;
    gap: 12px;
    margin-top: 8px;
}

.foundation-form .settings-panel,
.account-content {
    height: auto;
    max-height: none;
    overflow: visible;
}

.account-content {
    width: 100%;
    max-width: 960px;
    background: var(--surface-card);
    border: 1px solid var(--border-main);
    color: var(--text-primary);
    box-shadow: var(--shadow-panel);
}

.main-content:has(.account-settings-container) {
    overflow: auto;
}

.account-settings-container {
    align-items: flex-start;
    height: auto;
}

.settings-panel {
    display: grid;
    gap: 0;
    margin-top: 12px;
    padding: 24px 28px 24px;
    background: var(--surface-soft);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-panel);
}

.settings-group {
    background: var(--surface-soft);
    border-color: var(--border-soft);
}

.account-sidebar {
    background: var(--surface-card);
    border-color: var(--border-main);
    box-shadow: var(--shadow-panel);
}

.icon-action {
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border: none;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: var(--surface-control);
    color: var(--icon-secondary);
    cursor: pointer;
    line-height: 1;
}

.icon-action:hover {
    color: var(--icon-hover);
    background: var(--bg-hover);
}

html.light-theme .icon-action,
body.light-theme .icon-action {
    background: #F2EFF8;
    color: #665B7E;
}

html.light-theme .icon-action:hover,
body.light-theme .icon-action:hover {
    background: #E8E2F4;
    color: #4B4260;
}

.btn-quiet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    height: auto;
    padding: 0 14px;
    border: none;
    border-radius: var(--radius-control);
    background: rgba(255, 255, 255, 0.09);
    color: #EEE8F8;
    font-weight: 600;
    cursor: pointer;
}

html.light-theme .btn-quiet,
body.light-theme .btn-quiet {
    background: #EFEAF8;
    color: #54486F;
}

.btn-text {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    height: auto;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: #BDB2CC;
    cursor: pointer;
    font-weight: 600;
}

.btn-text:hover {
    color: #F2A9B4;
}

html.light-theme .btn-text,
body.light-theme .btn-text {
    color: #81768E;
}

html.light-theme .btn-text:hover,
body.light-theme .btn-text:hover {
    color: #B25062;
}

.photo-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 16px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
}

.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-main);
}

.google-login {
    width: 100%;
    height: 48px;
    margin-bottom: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 14px;
    border: 1px solid rgba(205, 186, 255, 0.18);
    background: rgba(255, 255, 255, 0.075);
    color: #F7F4FF;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.google-login:hover {
    background: rgba(255, 255, 255, 0.11);
}

html.light-theme .google-login,
body.light-theme .google-login {
    background: #FFFFFF;
    border-color: #DED9EA;
    color: #2A2438;
}

.google-login svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}

.upload-dropzone {
    position: relative;
    min-height: 190px;
    margin-bottom: 32px;
    padding: 28px 24px;
    border-radius: 18px;
    border: 1.5px dashed rgba(205, 186, 255, 0.3);
    background: rgba(255, 255, 255, 0.045);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
}

html.light-theme .upload-dropzone,
body.light-theme .upload-dropzone {
    background: linear-gradient(180deg, #FFFFFF, #FAF8FF);
    border-color: #CEC4E7;
}

.upload-dropzone.is-active {
    border-color: #8A6AF0;
    background: rgba(118, 85, 233, 0.08);
}

html.light-theme .upload-dropzone.is-active,
body.light-theme .upload-dropzone.is-active {
    background: rgba(118, 85, 233, 0.045);
}

.upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.upload-dropzone-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.upload-dropzone-empty i,
.upload-file-row i {
    color: var(--icon-secondary);
    font-size: 22px;
}

.upload-dropzone-empty strong,
.upload-file-name {
    display: block;
    margin: 0;
    color: var(--text-primary);
    font-size: 16px;
}

.upload-dropzone-empty span,
.upload-file-size,
.upload-status {
    display: block;
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
}

.upload-formats {
    max-width: 420px;
    font-size: 12px;
    line-height: 1.4;
}

.upload-dropzone-empty[hidden],
.upload-file-row[hidden] {
    display: none;
}

.upload-file-row {
    width: min(100%, 460px);
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.upload-progress {
    display: block;
    height: 3px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(118, 85, 233, 0.18);
}

.upload-progress span {
    display: block;
    width: 40%;
    height: 100%;
    background: #7655E9;
    animation: upload-indeterminate 1s ease-in-out infinite;
}

@keyframes upload-indeterminate {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(280%); }
}

.upload-retry {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font-weight: 700;
    cursor: pointer;
}

.upload-dropzone.is-success .upload-file-row i {
    color: #7DCEA0;
}

.upload-file-row i {
    flex: 0 0 auto;
}

.upload-file-clear {
    margin-left: auto;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 9px;
    background: var(--surface-control);
    color: var(--text-primary);
    cursor: pointer;
}

.documents-empty {
    margin-top: 8px;
}

.sidebar.is-collapsed {
    --sidebar-width: var(--sidebar-collapsed);
}

.workspace-compact {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.07);
    color: var(--icon-secondary);
    cursor: pointer;
}

html.light-theme .workspace-compact,
body.light-theme .workspace-compact {
    background: #F1EEF8;
    color: #665B7E;
}

.sidebar-collapse {
    position: absolute;
    right: -20px;
    bottom: 88px;
    top: auto;
    z-index: 6;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 0;
    display: grid;
    place-items: center;
    background: transparent;
    box-shadow: none;
    color: #FFFFFF;
    cursor: pointer;
}

.sidebar-collapse-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #7655E9, #9A6CF3);
    color: #FFFFFF;
    border: 2px solid #171326;
    box-shadow: 0 6px 16px rgba(118, 85, 233, 0.3);
    transition: transform 0.16s ease, filter 0.16s ease;
}

.sidebar-collapse i {
    font-size: 11px;
    line-height: 1;
}

.sidebar-collapse:hover .sidebar-collapse-circle {
    transform: scale(1.05);
    filter: brightness(1.08);
}

html.light-theme .sidebar-collapse-circle,
body.light-theme .sidebar-collapse-circle {
    background: #7655E9;
    border-color: #F8F7FC;
    box-shadow: 0 5px 14px rgba(118, 85, 233, 0.24);
}

.workspace-compact {
    display: none;
    margin: 8px auto 0;
}

.sidebar.is-collapsed .workspace-compact {
    display: grid;
}

.sidebar.is-collapsed .workspace-switcher {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
}

.workspace-switcher {
    max-height: 180px;
    transition: max-height 180ms ease, opacity 140ms ease;
}

.nav-item span,
.theme-switch-label,
.brand-lockup {
    white-space: nowrap;
    transition: opacity 140ms ease, transform 140ms ease;
}

.sidebar.is-collapsed .nav-item span,
.sidebar.is-collapsed .theme-switch-label,
.sidebar.is-collapsed .brand-lockup {
    opacity: 0;
    transform: translateX(-5px);
    width: 0;
    overflow: hidden;
    pointer-events: none;
}

.sidebar.is-collapsed .nav-item,
.sidebar.is-collapsed .theme-switch {
    justify-content: center;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
}

.sidebar.is-collapsed .sidebar-header {
    justify-content: center;
    min-height: 72px;
}

.sidebar.is-collapsed .nav-item {
    position: relative;
}

.sidebar.is-collapsed .nav-item::after,
.sidebar.is-collapsed .theme-switch::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 10px;
    border-radius: 8px;
    background: #251D42;
    color: #F7F4FF;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
}

.sidebar.is-collapsed .nav-item:hover::after,
.sidebar.is-collapsed .nav-item:focus-visible::after,
.sidebar.is-collapsed .theme-switch:hover::after,
.sidebar.is-collapsed .theme-switch:focus-visible::after {
    opacity: 1;
}

@media (max-width: 768px) {
    .sidebar,
    .sidebar.is-collapsed {
        width: 280px;
        flex: none;
        --sidebar-width: 280px;
    }

    .sidebar-collapse,
    .workspace-compact {
        display: none;
    }

    .sidebar.is-collapsed .nav-item span,
    .sidebar.is-collapsed .theme-switch-label,
    .sidebar.is-collapsed .brand-lockup,
    .sidebar.is-collapsed .workspace-switcher {
        opacity: 1;
        transform: none;
        width: auto;
        max-height: none;
        overflow: visible;
        pointer-events: auto;
    }
}

.account-nav-item.active {
    background: rgba(118, 85, 233, 0.12);
    color: #E6DFF2;
    border-left: 0;
}

.account-nav-item.active i {
    color: #C3B3F1;
}

.account-nav-item:hover {
    background: rgba(118, 85, 233, 0.075);
}

html.light-theme .account-nav-item.active,
body.light-theme .account-nav-item.active {
    background: rgba(118, 85, 233, 0.075);
    color: #4E416F;
}

html.light-theme .account-nav-item.active i,
body.light-theme .account-nav-item.active i {
    color: #6754A5;
}

html.light-theme .account-nav-item:hover,
body.light-theme .account-nav-item:hover {
    background: rgba(118, 85, 233, 0.045);
    color: #4E416F;
}

.toggle {
    border: 0;
    outline: none;
    box-shadow: none;
}

.toggle input {
    outline: none;
}

.toggle-slider,
.toggle input:checked + .toggle-slider {
    border: none;
    outline: none;
    box-shadow: none;
    opacity: 1;
}

.toggle-slider {
    background: #4A4459;
}

.toggle-slider:before {
    background: #C8BEDA;
    box-shadow: none;
}

.toggle input:checked + .toggle-slider {
    background: linear-gradient(90deg, #7655E9, #9A6CF3);
}

.toggle input:checked + .toggle-slider:before {
    background: #FFFFFF;
}

html.light-theme .toggle-slider,
body.light-theme .toggle-slider {
    background: #DCD6E8;
}

html.light-theme .toggle-slider:before,
body.light-theme .toggle-slider:before,
html.light-theme .toggle input:checked + .toggle-slider:before,
body.light-theme .toggle input:checked + .toggle-slider:before {
    background: #FFFFFF;
}

.toggle:hover .toggle-slider {
    opacity: 1;
}

.toggle:has(input:focus-visible) {
    border-radius: 24px;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.profile-menu {
    position: fixed;
    z-index: 1000;
    min-width: 240px;
    padding: 8px;
    border-radius: 14px;
    background: #211D30;
    border: 1px solid rgba(205, 186, 255, 0.14);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}

.profile-menu[hidden] {
    display: none;
}

html.light-theme .profile-menu,
body.light-theme .profile-menu {
    background: #FFFFFF;
    border-color: #DED8EF;
    box-shadow: 0 16px 40px rgba(37, 29, 66, 0.12);
}

.profile-menu .profile-header {
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--border-soft);
}

.profile-menu .profile-user-name,
.profile-menu .profile-user-email {
    color: var(--text-primary);
}

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

.profile-menu form {
    display: block;
    margin: 0;
}

.profile-menu .profile-action,
.profile-menu button.profile-action {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 2px 0 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    background-image: none;
    box-shadow: none;
    color: var(--text-primary);
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    transform: none;
    cursor: pointer;
}

.profile-menu .profile-action i {
    color: var(--icon-secondary);
}

.profile-menu .profile-action:hover,
.profile-menu button.profile-action:hover {
    background: rgba(118, 85, 233, 0.11);
    background-image: none;
    color: var(--text-primary);
    transform: none;
    box-shadow: none;
}

.profile-menu .profile-action.logout,
.profile-menu .profile-action.logout:hover,
.profile-menu button.profile-action.logout,
.profile-menu button.profile-action.logout:hover {
    background: transparent;
    background-image: none;
    color: #E38B98;
    box-shadow: none;
    transform: none;
}

.app-account-menu {
    position: fixed;
    top: 14px;
    right: 20px;
    z-index: 40;
}

.app-account-menu .profile-trigger {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
}

.top-nav .profile-dropdown {
    display: none;
}

.top-nav .nav-right {
    padding-right: 52px;
}

.lz-login-body .lz-form-input,
.lz-login-body .lz-form-input:hover,
.lz-login-body .lz-form-input:focus {
    background: #2C273A;
    color: #F7F4FF;
    -webkit-text-fill-color: #F7F4FF;
    caret-color: #F7F4FF;
    border: 1px solid rgba(205, 186, 255, 0.22);
    box-shadow: none;
}

.lz-login-body .lz-form-input::placeholder {
    color: #AAA0BC;
    -webkit-text-fill-color: #AAA0BC;
}

.lz-login-body .lz-form-input:-webkit-autofill,
.lz-login-body .lz-form-input:-webkit-autofill:hover,
.lz-login-body .lz-form-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #F7F4FF !important;
    caret-color: #F7F4FF;
    box-shadow: 0 0 0 1000px #2C273A inset !important;
    transition: background-color 9999s ease-out 0s;
}