:root {
    --bg: #16131D;
    --bg-2: #1C1825;
    --surface: #231E2E;
    --surface-2: #2A2436;
    --border: #332C42;
    --text: #F3EFF8;
    --muted: #9C94AC;
    --faint: #6E6680;
    --amber: #F4A259;
    --amber-deep: #E08A3C;
    --rose: #E78FB3;
    --ui: 'Inter', system-ui, sans-serif;
    --display: 'Instrument Serif', Georgia, serif;
    --mono: 'JetBrains Mono', monospace;
}

/* fonts applied broadly so Quasar components inherit */
body,
.q-page,
.q-drawer,
.q-card,
.q-field,
.q-btn,
.q-item,
.q-table,
.q-tab,
.q-message-text,
input,
button,
textarea {
    font-family: var(--ui);
}

/* canvas */
body,
.q-page-container,
.nicegui-content,
.q-page {
    background: var(--bg) !important;
    color: var(--text);
}

/* left drawer = sidebar */
.q-drawer {
    background: var(--bg-2) !important;
    border-right: 1px solid var(--border) !important;
}

/* make the drawer's content a full-height flex column so the footer pins to
   the bottom, and blanket-kill any bottom padding/margin on every wrapper
   NiceGUI/Quasar might use, so the user row sits flush at the bottom edge */
.q-drawer__content {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.q-drawer__content,
.q-drawer .nicegui-content,
.q-drawer .q-scrollarea__content,
.q-drawer__inner,
.q-drawer>div {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.sidebar-foot {
    margin-top: auto;
}

/* footer (composer bar) */
.q-footer {
    background: var(--bg) !important;
    border-top: 1px solid var(--border);
}

/* cards */
.q-card {
    background: var(--surface) !important;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: none !important;
    color: var(--text);
}

/* inputs (outlined) */
.q-field--outlined .q-field__control {
    border-radius: 9px;
    background: var(--bg-2);
}

.q-field--outlined .q-field__control:before {
    border: 1px solid var(--border) !important;
}

.q-field--outlined.q-field--focused .q-field__control:after {
    border: 2px solid var(--amber) !important;
}

.q-field__native,
.q-field__input {
    color: var(--text) !important;
}

.q-field__label,
.q-placeholder {
    color: var(--faint) !important;
}

/* buttons */
.q-btn {
    border-radius: 9px;
    text-transform: none;
    font-weight: 600;
}

.q-btn.q-btn--flat {
    color: var(--muted);
}

.q-btn.q-btn--flat:hover {
    color: var(--text);
}

/* chat bubbles (ui.chat_message) */
.q-message-text {
    border-radius: 16px;
    font-size: .94rem;
}

.q-message-text--received,
.q-message-text--received .q-message-text-content {
    background: var(--surface) !important;
    color: var(--text) !important;
}

.q-message-text--received {
    border: 1px solid var(--border);
    border-top-left-radius: 5px;
}

.q-message-text--received:before {
    display: none !important;
}

.q-message-text--sent,
.q-message-text--sent .q-message-text-content {
    color: #2A1A08 !important;
}

.q-message-text--sent {
    background: linear-gradient(135deg, var(--amber), var(--amber-deep)) !important;
    border-top-right-radius: 5px;
    font-weight: 500;
}

.q-message-text--sent:before {
    display: none !important;
}

/* tabs */
.q-tab {
    text-transform: none;
    font-weight: 500;
    color: var(--muted);
}

.q-tab--active {
    color: var(--amber);
}

.q-tabs__content .q-tab__indicator {
    background: var(--amber) !important;
}

/* tables */
.q-table__container,
.q-table {
    background: var(--surface) !important;
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--text);
}

.q-table thead th {
    background: var(--bg-2);
    color: var(--faint);
    text-transform: uppercase;
    font-size: .66rem;
    letter-spacing: .08em;
    font-weight: 600;
}

.q-table tbody td {
    border-color: var(--border) !important;
    font-size: .88rem;
    color: var(--text);
}

.q-table tbody tr:hover {
    background: var(--surface-2) !important;
}

/* list items */
.q-item {
    border-radius: 9px;
    color: #C9C2D6;
}

.q-item:hover {
    background: var(--surface) !important;
}

.q-separator {
    background: var(--border) !important;
}

.conv-active {
    background: var(--surface-2) !important;
    border-left: 3px solid var(--amber);
    color: var(--text) !important;
}

/* scrollbars */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--surface-2);
    border-radius: 6px;
    border: 2px solid var(--bg);
}

/* ---- utility classes ---- */
.mono-meta {
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .03em;
    color: var(--faint);
}

.text-muted {
    color: var(--muted) !important;
}

.brand-mark {
    width: 27px;
    height: 27px;
    border-radius: 9px;
    flex: none;
    position: relative;
    background: radial-gradient(circle at 35% 30%, #FBC88A, var(--amber) 55%, var(--amber-deep));
    box-shadow: 0 0 14px -2px rgba(244, 162, 89, .55);
}

/* AI presence mark beside assistant messages */
.botmark {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    flex: none;
    background: radial-gradient(circle at 35% 30%, #FBC88A, var(--amber) 55%, var(--amber-deep));
    box-shadow: 0 0 12px -2px rgba(244, 162, 89, .5);
}

/* small round user badge with initial (sidebar) */
.user-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .74rem;
    font-weight: 600;
    color: #D8CFE6;
    background: linear-gradient(135deg, #4A4060, #352C48);
}

/* sidebar 'Recent' label */
.side-label {
    font-family: var(--mono);
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--faint);
    margin: 16px 4px 6px;
}

/* admin header bar */
.admin-head {
    padding: 6px 2px 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
}

/* composer container */
.composer-inner {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    padding: 5px 6px 5px 14px;
    transition: border-color .15s;
}

.composer-inner:focus-within {
    border-color: var(--amber);
}

.display-title {
    font-family: var(--display) !important;
    font-size: 2.3rem !important;
    font-weight: 400 !important;
    letter-spacing: .01em;
    color: var(--text);
}

/* auth pages: ambient glow behind the card + amber links */
.auth-wrap {
    position: relative;
}

.auth-wrap::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    top: -180px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    background: radial-gradient(circle, rgba(244, 162, 89, .16), transparent 60%);
    filter: blur(20px);
}

.q-card a,
a.q-link {
    color: var(--amber) !important;
    text-decoration: none;
}
.q-uploader__header {
    background: var(--surface-2) !important;
    color: var(--text) !important;
}

.q-uploader {
    background: var(--surface) !important;
    border: 1px solid var(--border);
}

.q-uploader__title {
    color: var(--text) !important;
}
/* full-width bottom status bar (user + admin) */
.footer-bar {
    border-top: 1px solid var(--border);
    background: var(--bg-2);
}

/* empty-state signature: breathing presence orb */
.orb {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-bottom: 18px;
    background: radial-gradient(circle at 38% 32%, #FFD9A6, var(--amber) 50%, var(--amber-deep));
    box-shadow: 0 0 36px -4px rgba(244, 162, 89, .6);
    animation: breathe 4s ease-in-out infinite;
}

@keyframes breathe {

    0%,
    100% {
        transform: scale(1);
        opacity: .92
    }

    50% {
        transform: scale(1.1);
        opacity: 1
    }
}

@media (prefers-reduced-motion: reduce) {
    .orb {
        animation: none;
    }
}