:root {
    --nelloz-green: #6a80a7;
    --nelloz-green-deep: #3e5277;
    --nelloz-work: #f5c527;
    --nelloz-composer-surface:
        radial-gradient(circle at 29% 36%, rgb(255 255 255 / 48%) 0 12%, transparent 42%),
        radial-gradient(circle at 76% 32%, rgb(126 151 190 / 62%) 0 18%, transparent 48%),
        linear-gradient(112deg, #dbe2ee 0%, #e8edf5 43%, #cbd5e5 72%, #afbdd3 100%);
    color-scheme: dark;
    background: #000;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

.workspace-menu,
.account-badge,
.workspace-close,
.workspace-new-chat,
.workspace-account button,
.usage-reveal,
.usage-popover-heading button {
    font: inherit;
    cursor: pointer;
}

.workspace-menu {
    position: fixed;
    z-index: 12;
    top: 18px;
    left: 20px;
    display: grid;
    width: 42px;
    height: 42px;
    padding: 0;
    place-items: center;
    border: 1px solid rgb(218 230 249 / 13%);
    border-radius: 14px;
    background: rgb(12 17 27 / 56%);
    box-shadow: 0 12px 28px rgb(0 0 0 / 18%), inset 0 1px rgb(255 255 255 / 7%);
    color: #eaf2ff;
    backdrop-filter: blur(16px);
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.workspace-menu:hover,
.workspace-menu[aria-expanded="true"] {
    border-color: rgb(161 193 242 / 33%);
    background: rgb(35 50 77 / 76%);
}

.workspace-menu:active { transform: scale(.95); }

.nelloz-mini-mark {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #030815 url("./nelloz-logo.png") center / contain no-repeat;
    box-shadow: 0 0 18px rgb(0 86 255 / 44%);
    transform: translateZ(0);
}

.nelloz-mini-mark i {
    display: none;
}

.account-badge {
    position: fixed;
    z-index: 12;
    right: 20px;
    bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    max-width: min(220px, calc(100vw - 40px));
    padding: 0 12px;
    overflow: hidden;
    border: 1px solid rgb(218 230 249 / 13%);
    border-radius: 999px;
    background: rgb(12 17 27 / 56%);
    box-shadow: 0 12px 28px rgb(0 0 0 / 16%), inset 0 1px rgb(255 255 255 / 7%);
    color: rgb(235 243 255 / 85%);
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    backdrop-filter: blur(16px);
    transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.account-badge:hover {
    border-color: rgb(161 193 242 / 33%);
    background: rgb(35 50 77 / 76%);
}

.account-badge:active { transform: scale(.97); }

.account-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #78baff;
    box-shadow: 0 0 12px rgb(120 186 255 / 80%);
}

.account-popover {
    position: fixed;
    z-index: 24;
    right: 16px;
    bottom: 62px;
    display: grid;
    width: min(332px, calc(100vw - 32px));
    gap: 8px;
    padding: 16px;
    border: 1px solid rgb(177 204 244 / 19%);
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgb(31 40 57 / 98%), rgb(10 14 22 / 98%)),
        radial-gradient(circle at 92% 4%, rgb(116 169 244 / 16%), transparent 46%);
    box-shadow:
        0 26px 74px rgb(0 0 0 / 56%),
        inset 0 1px 0 rgb(255 255 255 / 8%);
    color: #edf4ff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 10px, 0) scale(.97);
    transform-origin: right bottom;
    transition: opacity 180ms ease, visibility 0s linear 180ms, transform 220ms cubic-bezier(.2, .82, .2, 1);
}

.account-popover.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: 0s;
}

.account-popover-header {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 2px 2px 10px;
    border-bottom: 1px solid rgb(180 207 246 / 12%);
}

.account-avatar {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgb(236 244 255 / 19%);
    border-radius: 50%;
    background: linear-gradient(145deg, #9bb9e8, #5d79a8);
    box-shadow: inset 0 1px rgb(255 255 255 / 38%), 0 7px 18px rgb(44 73 123 / 28%);
    color: #111b2d;
    font-size: 12px;
    font-weight: 760;
    letter-spacing: .01em;
}

.account-identity {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.account-identity strong {
    overflow: hidden;
    color: rgb(246 250 255 / 96%);
    font-size: 14px;
    font-weight: 680;
    letter-spacing: -.018em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-identity span {
    overflow: hidden;
    color: rgb(188 207 237 / 61%);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-plan-badge {
    align-self: start;
    padding: 5px 8px;
    border: 1px solid rgb(127 176 246 / 23%);
    border-radius: 999px;
    background: rgb(93 143 222 / 14%);
    color: rgb(202 225 255 / 89%);
    font-size: 10px;
    font-weight: 720;
    letter-spacing: .02em;
    white-space: nowrap;
}

.account-plan-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1px 3px 2px;
    color: rgb(181 202 234 / 59%);
    font-size: 11px;
}

.account-plan-row strong {
    color: rgb(227 239 255 / 83%);
    font-size: 11px;
    font-weight: 650;
}

.account-usage-toggle {
    display: grid;
    grid-template-columns: 21px minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 10px;
    border: 1px solid rgb(190 216 250 / 12%);
    border-radius: 14px;
    background: rgb(153 187 236 / 10%);
    color: rgb(239 246 255 / 92%);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
}

.account-usage-toggle:hover,
.account-usage-toggle[aria-expanded="true"] {
    border-color: rgb(157 195 248 / 25%);
    background: rgb(162 196 241 / 17%);
}

.account-usage-toggle > svg:first-child {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.7;
}

.account-usage-toggle > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.account-usage-toggle small {
    color: rgb(210 229 255 / 67%);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.account-chevron {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: rgb(224 238 255 / 68%);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
    transition: transform 180ms ease;
}

.account-usage-toggle[aria-expanded="true"] .account-chevron { transform: rotate(180deg); }

.account-usage-details {
    display: grid;
    gap: 13px;
    padding: 8px 8px 4px;
}

.memory-details {
    display: grid;
    gap: 8px;
    padding: 0 4px 4px;
}

.memory-list {
    display: grid;
    max-height: 168px;
    gap: 6px;
    overflow: auto;
    padding: 1px 2px 1px 0;
    scrollbar-color: rgb(157 195 248 / 30%) transparent;
    scrollbar-width: thin;
}

.memory-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid rgb(190 216 250 / 10%);
    border-radius: 11px;
    background: rgb(153 187 236 / 7%);
}

.memory-item-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.memory-item-category {
    color: rgb(178 207 246 / 60%);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.memory-item-content {
    color: rgb(241 247 255 / 88%);
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.memory-item-remove,
.memory-clear {
    border: 0;
    color: rgb(194 217 248 / 65%);
    font: inherit;
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease;
}

.memory-item-remove {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    margin: -2px -3px 0 0;
    border-radius: 7px;
    background: transparent;
    font-size: 16px;
    line-height: 1;
}

.memory-item-remove:hover,
.memory-item-remove:focus-visible {
    background: rgb(180 208 247 / 12%);
    color: #fff;
}

.memory-empty {
    margin: 0;
    padding: 3px 2px;
    color: rgb(190 211 240 / 58%);
    font-size: 11px;
    line-height: 1.4;
}

.memory-clear {
    justify-self: start;
    min-height: 28px;
    padding: 0 6px;
    border-radius: 8px;
    background: transparent;
    color: rgb(179 207 244 / 64%);
    font-size: 10px;
}

.memory-clear:hover,
.memory-clear:focus-visible {
    background: rgb(180 208 247 / 10%);
    color: rgb(238 246 255 / 92%);
}

.memory-toggle > svg:first-child { color: rgb(189 217 255 / 78%); }

.account-usage-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    min-width: 0;
}

.account-usage-row-copy {
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
}

.account-usage-row-copy strong {
    color: rgb(243 248 255 / 91%);
    font-size: 12px;
    font-weight: 670;
    white-space: nowrap;
}

.account-usage-row-copy span {
    overflow: hidden;
    color: rgb(180 203 237 / 56%);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-usage-value {
    color: rgb(219 234 255 / 79%);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    white-space: nowrap;
}

.account-usage-track {
    grid-column: 1 / -1;
    display: block;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgb(121 154 205 / 21%);
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 24%);
}

.account-usage-track i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #5c8fe9, #b9d8ff);
    box-shadow: 0 0 9px rgb(116 170 255 / 41%);
    transition: background 220ms ease, box-shadow 180ms ease;
}

.account-usage-row[data-level="low"] .account-usage-track i { background: linear-gradient(90deg, #4b78d2, #82aaf4); }
.account-usage-row[data-level="critical"] .account-usage-track i { background: linear-gradient(90deg, #385eae, #6f98e8); }

.account-menu-action {
    display: grid;
    grid-template-columns: 21px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 0 8px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: rgb(232 242 255 / 86%);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}

.account-menu-action:hover { background: rgb(180 208 247 / 10%); color: #fff; }
.account-menu-action:active { background: rgb(180 208 247 / 15%); }
.account-menu-action svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.account-action-status {
    min-height: 14px;
    margin: -2px 8px 0 38px;
    overflow: hidden;
    color: rgb(168 209 255 / 78%);
    font-size: 10px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-logout { margin-top: 2px; color: rgb(210 224 246 / 68%); }

.account-popover button:focus-visible,
.account-badge:focus-visible,
.workspace-menu:focus-visible,
.workspace-close:focus-visible,
.workspace-new-chat:focus-visible,
.workspace-account button:focus-visible,
.usage-reveal:focus-visible,
.usage-popover-heading button:focus-visible {
    outline: 2px solid rgb(164 204 255 / 80%);
    outline-offset: 2px;
}

.workspace-panel {
    position: fixed;
    z-index: 20;
    top: 12px;
    bottom: 12px;
    left: 12px;
    display: grid;
    width: min(336px, calc(100vw - 24px));
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    gap: 18px;
    padding: 20px 16px 14px;
    border: 1px solid rgb(164 191 232 / 17%);
    border-radius: 24px;
    background: linear-gradient(155deg, rgb(25 35 53 / 98%), rgb(8 12 20 / 98%));
    box-shadow: 0 28px 80px rgb(0 0 0 / 52%), inset 0 1px rgb(255 255 255 / 8%);
    color: #eaf2ff;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-24px, 0, 0) scale(.98);
    transform-origin: left center;
    transition: opacity 220ms ease, visibility 0s linear 220ms, transform 260ms cubic-bezier(.2, .82, .2, 1);
}

.workspace-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: 0s;
}

.workspace-panel-header,
.workspace-brand,
.workspace-section-heading {
    display: flex;
    align-items: center;
}

.workspace-panel-header { justify-content: space-between; }
.workspace-brand { gap: 10px; font-size: 16px; letter-spacing: -.02em; }

.workspace-close {
    display: grid;
    width: 34px;
    height: 34px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgb(225 237 255 / 68%);
}

.workspace-close:hover { background: rgb(173 201 243 / 12%); color: #fff; }
.workspace-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.7; }

.workspace-new-chat {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgb(137 180 244 / 23%);
    border-radius: 13px;
    background: rgb(81 133 208 / 17%);
    color: #eaf3ff;
    font-size: 13px;
    font-weight: 650;
    text-align: left;
}

.workspace-new-chat:hover { background: rgb(88 145 229 / 27%); }
.workspace-new-chat svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }

.workspace-section-heading {
    justify-content: space-between;
    padding: 0 4px;
    color: rgb(197 216 244 / 66%);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.workspace-section-heading span:last-child {
    min-width: 21px;
    padding: 3px 6px;
    border-radius: 999px;
    background: rgb(150 185 236 / 12%);
    color: rgb(219 234 255 / 74%);
    font-size: 10px;
    letter-spacing: 0;
    text-align: center;
}

.chat-list {
    min-height: 0;
    overflow: auto;
    scrollbar-color: rgb(145 178 227 / 28%) transparent;
    scrollbar-width: thin;
}

.chat-empty {
    margin: 10px 4px;
    color: rgb(174 193 223 / 54%);
    font-size: 13px;
    line-height: 1.5;
}

.chat-entry {
    display: block;
    width: 100%;
    margin: 2px 0;
    padding: 10px 11px;
    overflow: hidden;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: rgb(231 240 255 / 78%);
    font: inherit;
    font-size: 13px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-entry:hover { background: rgb(174 204 246 / 10%); color: #fff; }

.workspace-account {
    display: grid;
    gap: 3px;
    padding: 13px 12px 11px;
    border-top: 1px solid rgb(176 205 248 / 12%);
}

.workspace-account-label {
    color: rgb(171 193 226 / 52%);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.workspace-account strong { margin-top: 2px; color: rgb(241 247 255 / 92%); font-size: 13px; }
.workspace-account > span:not(.workspace-account-label) { overflow: hidden; color: rgb(171 193 226 / 63%); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.workspace-account button {
    justify-self: start;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgb(171 204 249 / 78%);
    font-size: 12px;
}

.workspace-account button:hover { color: #fff; }

.auth-gate {
    position: fixed;
    z-index: 20;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 50% 40%, rgb(61 83 125 / 24%), transparent 38%),
        #000;
    opacity: 1;
    visibility: visible;
    transition: opacity 360ms ease, visibility 360ms ease;
}

.auth-gate.is-ready {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.auth-card {
    width: min(100%, 420px);
    padding: 34px 30px 30px;
    border: 1px solid rgb(216 227 246 / 16%);
    border-radius: 28px;
    background: linear-gradient(145deg, rgb(20 25 37 / 96%), rgb(7 9 14 / 96%));
    box-shadow: 0 28px 90px rgb(0 0 0 / 48%), inset 0 1px rgb(255 255 255 / 7%);
    color: #edf3ff;
    text-align: center;
}

.auth-mark {
    display: block;
    width: 78px;
    height: 78px;
    margin: 0 auto 18px;
    border-radius: 50%;
    object-fit: contain;
    background: #030815;
    box-shadow: 0 0 42px rgb(0 86 255 / 36%);
}

.auth-eyebrow {
    margin: 0 0 9px;
    color: #9eb5d8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.auth-card h1 {
    margin: 0;
    font-size: clamp(24px, 6vw, 34px);
    letter-spacing: -.035em;
}

.auth-card p:not(.auth-eyebrow):not(.auth-hint) {
    margin: 12px 0 0;
    color: #aebbd0;
    line-height: 1.5;
}

.auth-account {
    font-size: 13px;
}

.auth-refresh {
    min-height: 44px;
    margin-top: 24px;
    padding: 0 18px;
    border: 1px solid rgb(202 220 249 / 25%);
    border-radius: 999px;
    background: rgb(116 145 194 / 18%);
    color: #eef4ff;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.auth-refresh:hover { background: rgb(125 157 212 / 28%); }

.auth-hint {
    margin: 22px 0 0;
    color: #71809a;
    font-size: 12px;
    line-height: 1.5;
}

.auth-hint code {
    color: #b8c9e5;
    font: inherit;
    font-weight: 700;
}

#voiceSurface[data-auth="locked"] {
    filter: blur(16px);
    opacity: .18;
    pointer-events: none;
}

.usage-indicator {
    position: fixed;
    z-index: 10;
    right: 0;
    bottom: -124px;
    display: grid;
    width: min(210px, calc(100vw - 32px));
    gap: 8px;
    padding: 13px 13px 12px;
    border: 1px solid rgb(143 174 231 / 18%);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgb(33 53 89 / 64%), rgb(8 13 25 / 78%)),
        radial-gradient(circle at 16% 10%, rgb(142 183 255 / 20%), transparent 58%);
    box-shadow:
        0 12px 32px rgb(0 0 0 / 24%),
        inset 0 1px 0 rgb(255 255 255 / 8%);
    backdrop-filter: blur(18px) saturate(1.12);
    color: rgb(232 241 255 / 92%);
    font-variant-numeric: tabular-nums;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 7px, 0);
    transition: opacity 180ms ease, visibility 0s linear 180ms, transform 220ms ease;
}

.usage-indicator.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
}

.usage-popover-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgb(235 243 255 / 86%);
    font-size: 12px;
    font-weight: 700;
}

.usage-popover-heading button {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgb(220 234 255 / 61%);
    font-size: 18px;
    line-height: 1;
}

.usage-popover-heading button svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.7;
}

.usage-popover-heading button:hover { background: rgb(215 231 255 / 12%); color: #fff; }

.usage-reveal {
    position: absolute;
    z-index: 8;
    top: -31px;
    right: 1px;
    display: grid;
    width: 25px;
    height: 25px;
    padding: 0;
    place-items: center;
    border: 1px solid rgb(146 178 228 / 17%);
    border-radius: 8px;
    background: rgb(11 16 25 / 52%);
    color: rgb(216 231 255 / 68%);
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 180ms ease, transform 180ms ease, background 180ms ease;
}

.morph-control[data-mode="text"]:hover .usage-reveal,
.usage-reveal:focus-visible,
.usage-reveal[aria-expanded="true"] {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.usage-reveal:hover,
.usage-reveal[aria-expanded="true"] { background: rgb(80 124 194 / 33%); }
.usage-reveal svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.6; }

.usage-meter {
    display: grid;
    grid-template-columns: 38px minmax(42px, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.usage-meter-label {
    color: rgb(183 204 239 / 70%);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .035em;
}

.usage-meter-track {
    position: relative;
    display: block;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: linear-gradient(90deg, rgb(89 119 178 / 22%), rgb(116 145 200 / 34%));
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 24%);
}

.usage-meter-track i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #5f8fea 0%, #9cc4ff 56%, #d5e5ff 100%);
    box-shadow: 0 0 10px rgb(120 172 255 / 42%);
    transition: background 220ms ease, box-shadow 180ms ease;
}

.usage-meter[data-level="low"] .usage-meter-track i {
    background: linear-gradient(90deg, #4b78d2, #82aaf4);
}

.usage-meter[data-level="critical"] .usage-meter-track i {
    background: linear-gradient(90deg, #385eae, #6f98e8);
    box-shadow: 0 0 7px rgb(101 149 239 / 34%);
}

.usage-meter-value {
    min-width: 37px;
    color: rgb(235 243 255 / 88%);
    font-size: 10px;
    font-weight: 650;
    text-align: right;
    white-space: nowrap;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #000;
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
}

#voiceSurface {
    --edge-color: 106 128 167;
    position: fixed;
    inset: 0;
    isolation: isolate;
    background:
        radial-gradient(circle at 50% 58%, rgb(46 64 98 / 10%), transparent 34%),
        #000;
    user-select: none;
    -webkit-user-select: none;
}

#cameraFeed,
#frameCapture {
    position: fixed;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.morph-control {
    --morph-progress: 0;
    --composer-opacity: 0;
    --orb-visual-opacity: 1;
    --mute-overlay-opacity: 0;
    position: fixed;
    z-index: 2;
    left: 50vw;
    top: 50%;
    top: 50dvh;
    width: var(--morph-width, 190px);
    height: var(--morph-height, 190px);
    border-radius: var(--morph-radius, 95px);
    transform: translate3d(-50%, calc(-50% + var(--morph-y, 0px)), 0);
    touch-action: none;
    cursor: grab;
    isolation: isolate;
    will-change: width, height, border-radius, transform;
    transition:
        width 560ms cubic-bezier(.2, .84, .18, 1),
        height 560ms cubic-bezier(.2, .84, .18, 1),
        border-radius 560ms cubic-bezier(.2, .84, .18, 1),
        transform 560ms cubic-bezier(.2, .84, .18, 1);
}

.morph-control.is-dragging {
    cursor: grabbing;
    transition: none;
}

/* Once writing is open, line growth uses a short, restrained spring. The
   slower transition above remains reserved for the circle-to-composer morph. */
.morph-control[data-mode="text"] {
    transition:
        width 240ms cubic-bezier(.22, .78, .22, 1),
        height 230ms cubic-bezier(.2, .82, .2, 1),
        border-radius 230ms cubic-bezier(.2, .82, .2, 1),
        transform 230ms cubic-bezier(.2, .82, .2, 1);
}

.morph-control::after {
    content: "";
    position: absolute;
    z-index: 5;
    inset: 0;
    border: 1px solid rgb(220 229 244 / 34%);
    border-radius: inherit;
    opacity: var(--composer-opacity);
    pointer-events: none;
    transition: opacity 220ms ease;
}

#voiceButton {
    --voice-level: 0;
    --voice-scale: 1;
    --voice-scale-x: 1;
    --voice-scale-y: 1;
    --voice-radius: 50%;
    --flow-a-x: 0%;
    --flow-a-y: 0%;
    --flow-a-scale: 1;
    --flow-a-rotate: 12deg;
    --flow-b-x: 0%;
    --flow-b-y: 0%;
    --flow-b-scale: 1;
    --flow-b-rotate: -18deg;
    --voice-brightness: 1;
    --voice-saturation: 1;
    --voice-glow-opacity: .28;
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: inherit;
    outline: none;
    background: transparent;
    cursor: inherit;
    opacity: var(--orb-visual-opacity);
    transform: scale(var(--voice-scale-x), var(--voice-scale-y));
    transform-origin: center;
    transition:
        opacity 260ms ease,
        filter 260ms ease,
        transform 72ms linear;
}

.morph-control[data-mode="voice"]:not(.is-morphing):not(.is-settling) #voiceButton {
    border-radius: var(--voice-radius);
    transition:
        opacity 260ms ease,
        filter 260ms ease,
        transform 72ms linear,
        border-radius 72ms linear;
}

#voiceButton:focus-visible::after {
    box-shadow: inset 0 0 0 2px rgb(235 241 252 / 88%);
}

#voiceButton:active { filter: brightness(.92); }
#voiceButton.is-busy { cursor: wait; }

#voiceButton::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 8%;
    border-radius: inherit;
    background-color: rgb(116 143 190 / 40%);
    filter: blur(38px);
    opacity: var(--voice-glow-opacity);
    transform: scale(1.18);
    transition:
        background-color 760ms cubic-bezier(.22, .7, .2, 1),
        opacity 520ms ease,
        transform 520ms ease;
}

#voiceButton:not(.has-audio):not(.is-muted)::before {
    animation: orb-glow-idle 6.6s ease-in-out infinite;
}

#voiceButton::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    border: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 29% 25%, rgb(255 255 255 / 72%) 0 5%, transparent 34%),
        radial-gradient(circle at 70% 19%, rgb(229 139 145 / 86%) 0 17%, transparent 49%),
        linear-gradient(152deg, rgb(226 134 140 / 92%), rgb(248 211 211 / 92%) 51%, rgb(198 96 104 / 94%));
    box-shadow:
        inset 20px 18px 36px rgb(255 255 255 / 24%),
        inset -22px -18px 34px rgb(146 54 62 / 23%),
        0 0 72px rgb(225 108 118 / 18%);
    opacity: var(--mute-overlay-opacity);
    pointer-events: none;
    transition: opacity 760ms cubic-bezier(.22, .7, .2, 1);
}

#voiceButton.is-live::before {
    opacity: .66;
    transform: scale(1.34);
}

#voiceButton.is-muted::before { background-color: rgb(226 112 121 / 48%); }

.voice-orb {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    border: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 31% 27%, rgb(255 255 255 / 94%) 0 5%, transparent 33%),
        radial-gradient(circle at 28% 72%, rgb(232 239 250 / 96%) 0 14%, transparent 47%),
        radial-gradient(circle at 70% 18%, #8da5c7 0 17%, transparent 48%),
        radial-gradient(circle at 76% 68%, rgb(216 226 241 / 92%) 0 12%, transparent 43%),
        linear-gradient(155deg, #8da4c4 0%, #f1f4f9 48%, #c6d2e3 76%, #7890b4 100%);
    box-shadow:
        inset 20px 18px 36px rgb(255 255 255 / 32%),
        inset -22px -18px 34px rgb(52 78 122 / 24%),
        0 18px 55px rgb(75 102 149 / 15%);
    filter: brightness(var(--voice-brightness)) saturate(var(--voice-saturation));
    transform: translateZ(0);
    animation: orb-idle 8.4s cubic-bezier(.45, 0, .25, 1) infinite;
    transition:
        border-color 540ms ease,
        box-shadow 540ms ease,
        filter 220ms ease;
}

.voice-orb::before,
.voice-orb::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(11px);
    mix-blend-mode: soft-light;
}

.voice-orb::before {
    width: 76%;
    height: 53%;
    top: -8%;
    left: 19%;
    background: rgb(77 105 157 / 62%);
    opacity: .72;
    transform: translate3d(var(--flow-a-x), var(--flow-a-y), 0)
        scale(var(--flow-a-scale)) rotate(var(--flow-a-rotate));
    transition: opacity 160ms ease, transform 72ms linear;
}

.voice-orb::after {
    width: 92%;
    height: 48%;
    right: -27%;
    bottom: -9%;
    background: rgb(255 255 255 / 60%);
    opacity: .62;
    transform: translate3d(var(--flow-b-x), var(--flow-b-y), 0)
        scale(var(--flow-b-scale)) rotate(var(--flow-b-rotate));
    transition: opacity 160ms ease, transform 72ms linear;
}

#voiceButton.has-audio .voice-orb {
    animation: none;
    box-shadow:
        inset 20px 18px 36px rgb(255 255 255 / 36%),
        inset -22px -18px 34px rgb(49 78 127 / 31%),
        0 0 72px rgb(111 145 204 / 27%);
}

#voiceButton.has-audio .voice-orb::before {
    opacity: .9;
}

#voiceButton.has-audio .voice-orb::after {
    opacity: .8;
}

#voiceButton.is-muted .voice-orb { animation: orb-muted 4.8s ease-in-out infinite; }

.morph-control.is-morphing #voiceButton::before,
.morph-control.is-morphing .voice-orb,
.morph-control.is-settling #voiceButton::before,
.morph-control.is-settling .voice-orb {
    animation: none;
}

.morph-control.is-morphing #voiceButton,
.morph-control.is-settling #voiceButton {
    border-radius: inherit;
    transform: none;
}

.morph-control.is-morphing .voice-orb,
.morph-control.is-settling .voice-orb {
    transform: none;
}

.text-composer {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 50px;
    grid-template-areas: "add input send";
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 9px 10px;
    opacity: var(--composer-opacity);
    pointer-events: none;
    transform: scale(var(--composer-scale, .97));
    transform-origin: center;
    transition:
        opacity 210ms ease,
        transform 280ms ease,
        padding 240ms cubic-bezier(.2, .84, .18, 1),
        gap 240ms cubic-bezier(.2, .84, .18, 1);
}

.morph-control[data-mode="text"] .text-composer { pointer-events: auto; }
.morph-control[data-mode="text"] #voiceButton {
    border-radius: inherit;
    transform: none;
}
.morph-control[data-mode="text"] #voiceButton .voice-orb {
    animation: none;
    transform: none;
    background: var(--nelloz-composer-surface);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 68%),
        inset -18px -10px 30px rgb(54 79 121 / 12%),
        0 18px 48px rgb(65 91 137 / 12%);
}

.morph-control[data-mode="text"]:not(.is-morphing):not(.is-settling) #voiceButton .voice-orb::before {
    animation: none;
    transform: translate3d(0, 0, 0) scale(1) rotate(12deg);
    transition: opacity 160ms ease, transform 260ms cubic-bezier(.2, .82, .2, 1);
}

.morph-control[data-mode="text"]:not(.is-morphing):not(.is-settling) #voiceButton .voice-orb::after {
    animation: none;
    transform: translate3d(0, 0, 0) scale(1) rotate(-18deg);
    transition: opacity 160ms ease, transform 260ms cubic-bezier(.2, .82, .2, 1);
}

.morph-control[data-mode="text"] #voiceButton::before {
    opacity: .28;
    transform: scale(1.18);
}

.text-composer[data-expanded="true"] {
    grid-template-columns: 48px minmax(0, 1fr) 50px;
    /* Keep the message area and footer as two stable rows. The flexible
       first track absorbs rounding while the action row stays pinned to the
       bottom-right, even as text wraps or explicit line breaks are added. */
    grid-template-rows: minmax(36px, 1fr) 50px;
    grid-template-areas:
        "input input input"
        "add . send";
    align-items: stretch;
    gap: 5px 8px;
    padding: 15px 10px 9px;
}

.text-composer textarea {
    grid-area: input;
    display: block;
    align-self: center;
    min-width: 0;
    width: 100%;
    height: 36px;
    max-height: 142px;
    padding: 4px 4px 2px;
    border: 0;
    outline: none;
    resize: none;
    overflow: hidden;
    background: transparent;
    color: rgb(36 49 75 / 96%);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(18px, 1.4vw, 20px);
    font-weight: 400;
    line-height: 27px;
    letter-spacing: -.025em;
    caret-color: #536b93;
    user-select: text;
    -webkit-user-select: text;
    scrollbar-width: thin;
    scrollbar-color: rgb(74 99 145 / 30%) transparent;
    transition: color 180ms ease;
}

.text-composer[data-expanded="true"] textarea {
    align-self: stretch;
    min-height: 0;
    max-height: none;
    padding: 2px 10px 6px;
}

.text-composer textarea::placeholder { color: rgb(44 60 90 / 48%); }

.composer-add-wrap {
    grid-area: add;
    position: relative;
    display: grid;
    place-items: center;
}

.composer-icon-button {
    border: 0;
    outline: none;
    color: rgb(49 67 103 / 90%);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.composer-icon-button {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgb(70 94 140 / 10%);
    background: rgb(255 255 255 / 20%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 24%);
    transition: background 180ms ease, transform 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.composer-icon-button:hover {
    background: rgb(255 255 255 / 34%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 38%), 0 7px 20px rgb(58 82 126 / 11%);
}
.composer-icon-button:active { transform: scale(.93); }
.composer-icon-button[aria-expanded="true"] {
    color: #40577f;
    background: rgb(255 255 255 / 34%);
    transform: rotate(45deg);
}

.composer-icon-button svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.composer-popover {
    --glass-border: rgb(224 234 249 / 42%);
    position: absolute;
    top: calc(100% + 12px);
    bottom: auto;
    z-index: 12;
    padding: 7px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    border-radius: 22px;
    background: var(--nelloz-composer-surface);
    box-shadow:
        0 20px 52px rgb(58 82 126 / 18%),
        inset 0 1px 0 rgb(255 255 255 / 54%),
        inset -12px -8px 24px rgb(64 88 134 / 10%);
    backdrop-filter: blur(28px) saturate(1.02);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-9px) scale(.96);
    transform-origin: top left;
    transition:
        opacity 170ms ease,
        visibility 0s linear 170ms,
        transform 300ms cubic-bezier(.16, .92, .2, 1.04);
}

.composer-popover::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(118deg, rgb(255 255 255 / 18%), transparent 38% 80%);
    mask: linear-gradient(#000, transparent 62%);
}

.composer-popover.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

.composer-popover button {
    display: grid;
    align-items: center;
    width: 100%;
    min-height: 58px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: rgb(49 67 103 / 92%);
    font-family: inherit;
    cursor: pointer;
    transition: background 150ms ease, transform 150ms ease;
}

.composer-popover button:hover { background: rgb(255 255 255 / 23%); }
.composer-popover button:active { transform: scale(.98); }

.add-popover {
    left: 0;
    width: 292px;
}

.add-popover button {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 7px 12px;
    text-align: left;
}

.add-popover svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.add-item-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.add-item-copy strong {
    color: rgb(38 53 84 / 96%);
    font-size: 14px;
    font-weight: 520;
    letter-spacing: -.012em;
}

.add-item-copy small {
    overflow: hidden;
    color: rgb(50 68 105 / 62%);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.add-popover em {
    padding: 5px 8px;
    border-radius: 999px;
    background: rgb(86 111 164 / 13%);
    color: rgb(49 70 111 / 88%);
    font-size: 11px;
    font-style: normal;
}

#textSend {
    grid-area: auto;
    position: absolute;
    top: 50%;
    right: 10px;
    align-self: center;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: 50%;
    background: linear-gradient(145deg, #7e96bc, #6079a3);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%), 0 8px 22px rgb(54 80 126 / 25%);
    color: #fff;
    cursor: pointer;
    transform: translate3d(0, calc(-50% + var(--send-center-shift, 0px)), 0);
    transition: transform 230ms cubic-bezier(.2, .82, .2, 1), filter 180ms ease, opacity 180ms ease;
}

.text-composer[data-expanded="true"] .composer-add-wrap {
    align-self: end;
    justify-self: start;
}
.text-composer[data-expanded="true"] #textSend {
    align-self: end;
    justify-self: end;
    margin: 0;
}

.assistant-response {
    position: absolute;
    z-index: 6;
    top: calc(100% + clamp(24px, 3.5vh, 36px));
    left: 50%;
    width: min(680px, calc(100vw - 48px));
    max-height: min(170px, 24vh);
    overflow: hidden;
    padding: 8px 16px;
    background: transparent;
    color: rgb(238 244 253 / 92%);
    font-size: clamp(15px, 1.45vw, 19px);
    font-weight: 400;
    line-height: 1.48;
    letter-spacing: -.014em;
    text-align: center;
    text-shadow: 0 2px 18px rgb(0 0 0 / 38%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(-50%, 10px, 0);
    transition:
        opacity 720ms ease,
        visibility 0s linear 720ms,
        transform 760ms cubic-bezier(.2, .82, .2, 1);
}

.assistant-response.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate3d(-50%, 0, 0);
    transition-delay: 0s;
}

.morph-control[data-mode="text"] .assistant-response {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-50%, 10px, 0);
    transition-delay: 0s;
}

#textSend:hover { filter: brightness(1.08); }
#textSend:active {
    transform: translate3d(0, calc(-50% + var(--send-center-shift, 0px)), 0) scale(.94);
}
#textSend:focus-visible { outline: 2px solid rgb(83 108 160 / 72%); outline-offset: 2px; }
#textSend:disabled {
    border-color: rgb(67 90 132 / 12%);
    background: rgb(255 255 255 / 20%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 24%);
    color: rgb(51 69 107 / 60%);
    opacity: .72;
    cursor: default;
}
#textSend svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.gesture-status {
    position: fixed;
    z-index: 4;
    left: 50vw;
    top: calc(50% + clamp(120px, 11vw, 160px));
    top: calc(50dvh + clamp(120px, 11vw, 160px));
    max-width: min(420px, calc(100vw - 40px));
    color: rgb(226 235 250 / 64%);
    font-size: 12px;
    line-height: 1.35;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 7px);
    transition: opacity 180ms ease, transform 180ms ease;
}

.gesture-status.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* A quiet edge glow appears only while background work is active. */
#voiceSurface::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    box-shadow:
        inset 0 2px 18px rgb(var(--edge-color) / .62),
        inset 0 -2px 18px rgb(var(--edge-color) / .38),
        inset 2px 0 18px rgb(var(--edge-color) / .45),
        inset -2px 0 18px rgb(var(--edge-color) / .45);
    transition: opacity 420ms ease;
}

#voiceSurface[data-activity="routing"]::before,
#voiceSurface[data-activity="thinking"]::before,
#voiceSurface[data-activity="using_computer"]::before,
#voiceSurface[data-activity="coding"]::before,
#voiceSurface[data-activity="generating_video"]::before,
#voiceSurface[data-activity="generating_image"]::before {
    opacity: .34;
    animation: edge-breathe 1.9s ease-in-out infinite;
}

#voiceSurface[data-activity="using_computer"] { --edge-color: 245 197 39; }
#voiceSurface[data-activity="coding"] { --edge-color: 167 132 255; }
#voiceSurface[data-activity="generating_video"] { --edge-color: 255 145 93; }
#voiceSurface[data-activity="generating_image"] { --edge-color: 246 113 197; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@keyframes orb-idle {
    0%, 100% { transform: scale(1) rotate(-.7deg); }
    24% { transform: scale(1.014) rotate(.2deg); }
    52% { transform: scale(1.026) rotate(.9deg); }
    76% { transform: scale(1.008) rotate(-.35deg); }
}

@keyframes orb-glow-idle {
    0%, 100% { opacity: .24; transform: scale(1.16); }
    46% { opacity: .38; transform: scale(1.28); }
    72% { opacity: .3; transform: scale(1.21); }
}

@keyframes orb-muted {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(.985); }
}

@keyframes edge-breathe {
    0%, 100% { opacity: .18; }
    50% { opacity: .48; }
}

@media (prefers-reduced-motion: reduce) {
    .morph-control,
    #voiceButton,
    #voiceButton::before,
    #voiceButton::after,
    .voice-orb,
    .voice-orb::before,
    .voice-orb::after,
    #voiceButton.has-audio .voice-orb,
    #voiceButton.is-muted .voice-orb,
    #voiceSurface::before {
        animation: none;
    }
    .usage-meter-track i,
    .workspace-panel,
    .usage-indicator,
    .account-popover,
    .account-chevron,
    .account-usage-track i { transition: none; }
}

@media (max-width: 560px) {
    .account-popover {
        right: 10px;
        bottom: 58px;
        width: min(332px, calc(100vw - 20px));
        padding: 14px;
    }
    .usage-indicator {
        right: 0;
        bottom: -124px;
        width: 164px;
        padding: 8px 9px;
    }
    .text-composer {
        grid-template-columns: 44px minmax(0, 1fr) 48px;
        gap: 5px;
        padding-inline: 8px;
    }
    .text-composer[data-expanded="true"] {
        grid-template-columns: 44px minmax(0, 1fr) 48px;
        padding-inline: 8px;
    }
    .text-composer textarea { font-size: 17px; }
    .composer-icon-button { width: 43px; height: 43px; }
    #textSend { right: 8px; width: 46px; height: 46px; }
    .add-popover { width: min(286px, calc(100vw - 32px)); }
}

/* Product surface --------------------------------------------------------
   The orb remains the voice instrument. Everything around it is deliberately
   quiet: a small product header, one workspace drawer, and one account
   surface. This pass does not style or replace the orb itself. */
:root {
    --nelloz-ink: #f4f7fc;
    --nelloz-muted: rgb(214 224 241 / 57%);
    --nelloz-faint: rgb(203 217 238 / 36%);
    --nelloz-line: rgb(192 212 242 / 15%);
    --nelloz-line-strong: rgb(192 212 242 / 25%);
    --nelloz-panel: rgb(14 19 29 / 94%);
    --nelloz-panel-raised: rgb(26 34 49 / 82%);
    --nelloz-accent: #72aaf8;
    --nelloz-accent-soft: rgb(82 139 229 / 18%);
}

html,
body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
}

#voiceSurface {
    background:
        radial-gradient(circle at 50% 46%, rgb(48 67 103 / 9%), transparent 31%),
        radial-gradient(circle at 50% 100%, rgb(28 40 64 / 9%), transparent 44%),
        #000;
}

#voiceSurface::after {
    content: "";
    position: fixed;
    z-index: 1;
    inset: 0;
    border: 1px solid rgb(255 255 255 / 5%);
    border-radius: 18px;
    pointer-events: none;
}

.workspace-menu {
    top: 22px;
    left: 24px;
    display: inline-flex;
    width: auto;
    min-width: 154px;
    height: 46px;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 14px 0 9px;
    border-color: var(--nelloz-line);
    border-radius: 15px;
    background: rgb(9 13 20 / 67%);
    box-shadow: 0 13px 32px rgb(0 0 0 / 24%), inset 0 1px rgb(255 255 255 / 8%);
    color: var(--nelloz-ink);
    backdrop-filter: blur(22px) saturate(1.08);
}

.workspace-menu:hover,
.workspace-menu[aria-expanded="true"] {
    border-color: var(--nelloz-line-strong);
    background: rgb(22 31 46 / 84%);
}

.workspace-menu .nelloz-mini-mark {
    width: 28px;
    height: 28px;
    box-shadow: 0 0 20px rgb(0 86 255 / 48%);
}

.workspace-menu-copy {
    display: grid;
    gap: 1px;
    min-width: 0;
    text-align: left;
}

.workspace-menu-copy strong {
    color: rgb(247 250 255 / 95%);
    font-size: 14px;
    font-weight: 650;
    letter-spacing: -.025em;
    line-height: 1.1;
}

.workspace-menu-copy small {
    color: var(--nelloz-muted);
    font-size: 10px;
    font-weight: 520;
    letter-spacing: .015em;
    line-height: 1.2;
}

.account-badge {
    right: 24px;
    bottom: 22px;
    min-height: 42px;
    max-width: min(260px, calc(100vw - 48px));
    gap: 9px;
    padding: 0 14px 0 11px;
    border-color: var(--nelloz-line);
    background: rgb(9 13 20 / 70%);
    box-shadow: 0 14px 34px rgb(0 0 0 / 25%), inset 0 1px rgb(255 255 255 / 8%);
    color: rgb(244 248 255 / 92%);
    font-size: 12px;
    backdrop-filter: blur(22px) saturate(1.08);
}

.account-badge:hover {
    border-color: var(--nelloz-line-strong);
    background: rgb(22 31 46 / 84%);
}

.account-dot {
    width: 8px;
    height: 8px;
    background: var(--nelloz-accent);
    box-shadow: 0 0 13px rgb(114 170 248 / 82%);
}

.account-popover {
    right: 20px;
    bottom: 76px;
    width: min(360px, calc(100vw - 40px));
    gap: 10px;
    padding: 17px;
    border-color: var(--nelloz-line-strong);
    border-radius: 20px;
    background:
        linear-gradient(156deg, rgb(22 29 42 / 98%), rgb(8 11 17 / 98%)),
        radial-gradient(circle at 88% 0, rgb(84 145 244 / 17%), transparent 48%);
    box-shadow: 0 28px 86px rgb(0 0 0 / 60%), inset 0 1px rgb(255 255 255 / 9%);
}

.account-popover-header {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 11px;
    padding: 1px 1px 13px;
    border-color: var(--nelloz-line);
}

.account-avatar {
    width: 42px;
    height: 42px;
    border-color: rgb(235 244 255 / 22%);
    background: linear-gradient(145deg, #a9c7f1, #5f83bd);
    box-shadow: inset 0 1px rgb(255 255 255 / 45%), 0 8px 22px rgb(44 73 123 / 34%);
}

.account-identity strong { font-size: 15px; }
.account-identity span { color: rgb(197 214 238 / 62%); font-size: 11px; }

.account-plan-badge {
    padding: 5px 9px;
    border-color: rgb(114 170 248 / 30%);
    background: rgb(93 143 222 / 17%);
    color: rgb(215 234 255 / 94%);
}

.account-plan-row {
    padding: 0 3px 3px;
    color: var(--nelloz-muted);
}

.account-plan-row strong { color: rgb(239 246 255 / 92%); }

.account-usage-toggle {
    min-height: 46px;
    border-color: var(--nelloz-line);
    border-radius: 13px;
    background: rgb(142 176 224 / 9%);
}

.account-usage-toggle:hover,
.account-usage-toggle[aria-expanded="true"] {
    border-color: rgb(140 188 250 / 30%);
    background: rgb(116 162 229 / 16%);
}

.account-usage-details { gap: 15px; padding: 9px 9px 5px; }
.account-usage-track { height: 5px; background: rgb(121 154 205 / 17%); }
.account-usage-track i { background: linear-gradient(90deg, #4e8de7, #b8d8ff); }

.account-menu-action {
    min-height: 42px;
    border-radius: 11px;
    color: rgb(237 245 255 / 88%);
}

.account-menu-action:hover { background: rgb(177 207 249 / 11%); }
.account-action-status { color: rgb(151 202 255 / 84%); }

.workspace-panel {
    top: 16px;
    bottom: 16px;
    left: 16px;
    width: min(360px, calc(100vw - 32px));
    gap: 16px;
    padding: 18px 15px 14px;
    border-color: var(--nelloz-line-strong);
    border-radius: 20px;
    background:
        linear-gradient(158deg, rgb(20 28 41 / 98%), rgb(7 10 16 / 99%)),
        radial-gradient(circle at 0 0, rgb(94 154 243 / 12%), transparent 46%);
    box-shadow: 0 30px 90px rgb(0 0 0 / 62%), inset 0 1px rgb(255 255 255 / 9%);
}

.workspace-panel-header { padding: 1px 2px 2px; }
.workspace-brand { gap: 10px; font-size: 17px; }
.workspace-brand .nelloz-mini-mark { width: 26px; height: 26px; }

.workspace-close {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: rgb(225 237 255 / 72%);
}

.workspace-new-chat {
    min-height: 46px;
    border-color: rgb(125 180 249 / 30%);
    border-radius: 12px;
    background: linear-gradient(135deg, rgb(74 137 226 / 21%), rgb(54 94 158 / 15%));
    box-shadow: inset 0 1px rgb(255 255 255 / 7%);
}

.workspace-new-chat:hover { background: linear-gradient(135deg, rgb(86 153 242 / 29%), rgb(60 107 179 / 22%)); }

.workspace-section-heading {
    padding: 0 5px;
    color: rgb(205 222 247 / 66%);
    letter-spacing: .14em;
}

.workspace-section-heading span:last-child {
    min-width: 22px;
    background: rgb(151 190 243 / 12%);
    color: rgb(224 238 255 / 82%);
}

.chat-list { padding: 0 1px; }
.chat-empty { margin: 13px 6px; color: rgb(184 204 233 / 55%); }

.chat-entry {
    min-height: 42px;
    margin: 3px 0;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: rgb(231 240 255 / 78%);
}

.chat-entry:hover {
    border-color: var(--nelloz-line);
    background: rgb(174 204 246 / 10%);
}

.workspace-account {
    gap: 4px;
    padding: 15px 12px 9px;
    border-color: var(--nelloz-line);
}

.workspace-account-label { color: rgb(171 193 226 / 56%); letter-spacing: .14em; }
.workspace-account strong { color: rgb(246 250 255 / 94%); }
.workspace-account button { color: rgb(167 210 255 / 84%); }

.auth-gate {
    background:
        radial-gradient(circle at 50% 32%, rgb(60 93 145 / 20%), transparent 36%),
        radial-gradient(circle at 50% 100%, rgb(26 40 69 / 16%), transparent 48%),
        #000;
}

.auth-card {
    width: min(100%, 430px);
    padding: 38px 34px 32px;
    border-color: var(--nelloz-line-strong);
    border-radius: 24px;
    background: linear-gradient(155deg, rgb(20 28 41 / 97%), rgb(7 10 16 / 98%));
    box-shadow: 0 34px 100px rgb(0 0 0 / 58%), inset 0 1px rgb(255 255 255 / 9%);
}

.auth-mark {
    width: 70px;
    height: 70px;
    margin-bottom: 20px;
    box-shadow: 0 0 48px rgb(0 86 255 / 42%);
}

.auth-eyebrow { color: rgb(163 200 249 / 78%); letter-spacing: .16em; }
.auth-card h1 { letter-spacing: -.045em; }
.auth-card p:not(.auth-eyebrow):not(.auth-hint) { color: rgb(188 204 228 / 75%); }

.auth-refresh {
    min-height: 46px;
    padding: 0 21px;
    border-color: rgb(125 180 249 / 35%);
    background: linear-gradient(135deg, rgb(74 137 226 / 28%), rgb(54 94 158 / 20%));
    box-shadow: inset 0 1px rgb(255 255 255 / 9%);
}

.auth-refresh:hover { background: linear-gradient(135deg, rgb(86 153 242 / 38%), rgb(60 107 179 / 28%)); }
.auth-hint { color: rgb(145 165 195 / 62%); }

.usage-indicator {
    right: -2px;
    border-color: var(--nelloz-line-strong);
    border-radius: 13px;
    background: linear-gradient(145deg, rgb(25 39 64 / 86%), rgb(7 12 22 / 92%));
    box-shadow: 0 16px 44px rgb(0 0 0 / 34%), inset 0 1px rgb(255 255 255 / 8%);
}

.usage-reveal {
    border-color: var(--nelloz-line);
    background: rgb(9 13 20 / 66%);
}

.usage-reveal:hover,
.usage-reveal[aria-expanded="true"] { background: rgb(80 124 194 / 36%); }

.assistant-response {
    width: min(620px, calc(100vw - 48px));
    color: rgb(240 246 255 / 88%);
    text-shadow: 0 2px 22px rgb(0 0 0 / 56%);
}

@media (max-width: 560px) {
    .workspace-menu { top: 14px; left: 14px; min-width: 0; padding-right: 11px; }
    .workspace-menu-copy { display: none; }
    .account-badge { right: 14px; bottom: 14px; max-width: calc(100vw - 28px); }
    .account-popover { right: 10px; bottom: 66px; width: min(360px, calc(100vw - 20px)); }
    .workspace-panel { top: 10px; bottom: 10px; left: 10px; width: min(360px, calc(100vw - 20px)); }
}

/* Overtake mode ---------------------------------------------------------
   The takeover signal is deliberately restrained: one warm edge, one
   readable status pill, and one pointer that only animates when an action
   actually happens. It must never steal input from the page underneath. */
.overtake-wash {
    position: fixed;
    z-index: 2;
    inset: 0;
    display: none;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgb(248 199 65 / 16%), transparent 7%, transparent 93%, rgb(248 199 65 / 16%)),
        linear-gradient(180deg, rgb(248 199 65 / 12%), transparent 5%, transparent 95%, rgb(248 199 65 / 12%));
}

.overtake-indicator {
    position: fixed;
    z-index: 30;
    top: 16px;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 13px;
    border: 1px solid rgb(246 209 112 / 24%);
    border-radius: 12px;
    background: rgb(18 24 32 / 96%);
    box-shadow: 0 12px 32px rgb(0 0 0 / 28%), inset 0 1px rgb(255 255 255 / 8%);
    color: #f7f8fb;
    pointer-events: none;
    transform: translateX(-50%) translateY(-8px);
    opacity: 0;
    transition: opacity 180ms ease, transform 240ms cubic-bezier(.16, .92, .2, 1);
}

.overtake-indicator-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #f6cf61;
    box-shadow: 0 0 0 4px rgb(246 207 97 / 12%), 0 0 16px rgb(246 207 97 / 44%);
}

.overtake-indicator-copy {
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.1;
}

.overtake-indicator-copy strong {
    font-size: 12px;
    font-weight: 650;
    letter-spacing: -.01em;
}

.overtake-indicator-copy small {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding-left: 12px;
    border-left: 1px solid rgb(219 226 237 / 18%);
    color: rgb(226 233 242 / 78%);
    font-size: 10px;
    font-weight: 500;
}

.overtake-indicator-copy kbd {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    height: 18px;
    margin-right: 4px;
    border: 1px solid rgb(246 209 112 / 42%);
    border-radius: 4px;
    background: rgb(246 209 112 / 10%);
    color: #fff2c7;
    font: 650 9px/1 "Segoe UI", sans-serif;
    letter-spacing: .04em;
}

.overtake-cursor {
    --overtake-x: 50vw;
    --overtake-y: 50vh;
    position: fixed;
    z-index: 40;
    top: 0;
    left: 0;
    display: none;
    width: 52px;
    height: 60px;
    pointer-events: none;
    transform: translate3d(calc(var(--overtake-x) - 3px), calc(var(--overtake-y) - 3px), 0);
    transform-origin: 3px 3px;
    filter: drop-shadow(0 3px 8px rgb(0 0 0 / 45%));
}

.overtake-cursor-shape {
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    height: 54px;
    overflow: visible;
}

.overtake-cursor-shape path {
    fill: #fbfdff;
    stroke: #14233c;
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.overtake-cursor-ripple {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 22px;
    height: 22px;
    border: 1px solid rgb(246 207 97 / 78%);
    border-radius: 50%;
    opacity: 0;
}

#voiceSurface[data-overtake="active"] .overtake-wash,
#voiceSurface[data-overtake="active"] .overtake-indicator,
#voiceSurface[data-overtake="active"] .overtake-cursor {
    display: inline-flex;
}

#voiceSurface[data-overtake="active"] .overtake-indicator {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* The desktop build owns a native, virtual-screen overlay. Suppressing the
   in-page duplicate keeps the Nelloz window itself visually untouched. */
html[data-nelloz-desktop="true"] .overtake-wash,
html[data-nelloz-desktop="true"] .overtake-indicator,
html[data-nelloz-desktop="true"] .overtake-cursor {
    display: none !important;
}

#voiceSurface[data-overtake-action="click"] .overtake-cursor-ripple {
    animation: overtake-click 360ms cubic-bezier(.16, .92, .2, 1);
}

#voiceSurface[data-overtake-action="type"] .overtake-cursor-shape {
    animation: overtake-type 420ms cubic-bezier(.16, .92, .2, 1);
}

@keyframes overtake-click {
    0% { opacity: .9; transform: scale(.7); }
    100% { opacity: 0; transform: scale(2.5); }
}

@keyframes overtake-type {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(1px); }
    50% { transform: translateX(-1px); }
    75% { transform: translateX(.5px); }
}

@media (prefers-reduced-motion: reduce) {
    .overtake-indicator { transition: opacity 120ms ease; }
    .overtake-cursor-ripple,
    #voiceSurface[data-overtake-action="type"] .overtake-cursor-shape { animation: none; }
}

/* Nelloz sheets ---------------------------------------------------------
   The orb stays the focal point. Navigation and account are edge-attached
   surfaces: the first enters from the left, the second rises from its
   bottom edge. The palette follows the Nelloz blue used on the website. */
:root {
    --nelloz-blue-050: #f7fbff;
    --nelloz-blue-100: #edf7ff;
    --nelloz-blue-150: #e3f1fc;
    --nelloz-blue-200: #d4eafa;
    --nelloz-blue-300: #b8d9f1;
    --nelloz-blue-500: #2d8fdf;
    --nelloz-blue-700: #145a91;
    --nelloz-ink-blue: #153552;
    --nelloz-muted-blue: #637c96;
    --nelloz-line-blue: #c7deef;
    --nelloz-line-blue-strong: #a9cae5;
}

.workspace-menu,
.workspace-close,
.workspace-new-chat,
.workspace-account,
.account-panel-close,
.account-menu-action,
.account-usage-toggle { -webkit-tap-highlight-color: transparent; }

.workspace-menu {
    top: 16px;
    left: 14px;
    z-index: 31;
    min-width: 156px;
    height: 46px;
    padding: 0 15px 0 10px;
    border: 1px solid var(--nelloz-line-blue-strong);
    border-radius: 0 13px 13px 0;
    background: var(--nelloz-blue-100);
    box-shadow: 0 12px 30px rgb(10 43 73 / 18%), inset 0 1px rgb(255 255 255 / 80%);
    color: var(--nelloz-ink-blue);
    backdrop-filter: none;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.workspace-menu:hover,
.workspace-menu[aria-expanded="true"] {
    border-color: var(--nelloz-blue-500);
    background: #fff;
}

.workspace-menu:active { transform: translateX(2px); }
.workspace-menu .nelloz-mini-mark { box-shadow: 0 0 17px rgb(45 143 223 / 30%); }

.workspace-menu-copy strong { color: var(--nelloz-ink-blue); }
.workspace-menu-copy small { color: var(--nelloz-muted-blue); }

.workspace-panel {
    z-index: 32;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(370px, calc(100vw - 20px));
    gap: 16px;
    padding: 22px 18px 16px;
    border: 0;
    border-right: 1px solid var(--nelloz-line-blue-strong);
    border-radius: 0 18px 18px 0;
    background: linear-gradient(180deg, var(--nelloz-blue-050) 0%, var(--nelloz-blue-100) 62%, var(--nelloz-blue-150) 100%);
    box-shadow: 18px 0 54px rgb(8 45 79 / 20%), inset -1px 0 rgb(255 255 255 / 74%);
    color: var(--nelloz-ink-blue);
    opacity: 0;
    transform: translate3d(-104%, 0, 0);
    transition: opacity 180ms ease, visibility 0s linear 280ms, transform 280ms cubic-bezier(.18, .82, .2, 1);
}

.workspace-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
}

.workspace-panel-header { padding: 0 0 2px; touch-action: pan-y; }
.workspace-brand { gap: 10px; color: var(--nelloz-ink-blue); }
.workspace-brand .nelloz-mini-mark { width: 28px; height: 28px; box-shadow: 0 0 18px rgb(45 143 223 / 28%); }

.workspace-close,
.account-panel-close {
    display: grid;
    width: 34px;
    height: 34px;
    padding: 0;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--nelloz-muted-blue);
}

.workspace-close:hover,
.account-panel-close:hover { border-color: var(--nelloz-line-blue); background: var(--nelloz-blue-200); color: var(--nelloz-ink-blue); }
.workspace-close svg,
.account-panel-close svg { width: 18px; height: 18px; stroke-width: 1.8; }

.workspace-new-chat {
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--nelloz-line-blue-strong);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 12px rgb(33 91 137 / 7%);
    color: var(--nelloz-ink-blue);
    font-weight: 700;
}

.workspace-new-chat:hover { border-color: var(--nelloz-blue-500); background: var(--nelloz-blue-050); }
.workspace-new-chat svg { color: var(--nelloz-blue-700); }

.workspace-section-heading {
    padding: 0 2px;
    color: var(--nelloz-muted-blue);
    letter-spacing: .16em;
}

.workspace-section-heading span:last-child {
    min-width: 23px;
    padding: 3px 7px;
    border: 1px solid var(--nelloz-line-blue);
    border-radius: 7px;
    background: var(--nelloz-blue-150);
    color: var(--nelloz-blue-700);
}

.chat-list { padding: 0; scrollbar-color: var(--nelloz-line-blue-strong) transparent; }
.chat-empty { margin: 13px 2px; color: var(--nelloz-muted-blue); }

.chat-entry {
    min-height: 44px;
    margin: 2px 0;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #365671;
}

.chat-entry:hover { border-color: var(--nelloz-line-blue); background: var(--nelloz-blue-200); color: var(--nelloz-ink-blue); }

.workspace-account {
    display: grid;
    grid-template-areas: "label chevron" "main chevron";
    grid-template-columns: minmax(0, 1fr) 20px;
    align-items: center;
    width: 100%;
    gap: 4px 12px;
    margin: 0;
    padding: 14px 12px 13px;
    border: 1px solid var(--nelloz-line-blue-strong);
    border-radius: 11px;
    background: rgb(255 255 255 / 60%);
    box-shadow: 0 5px 18px rgb(34 97 144 / 7%);
    color: var(--nelloz-ink-blue);
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.workspace-account:hover,
.workspace-account:focus-visible { border-color: var(--nelloz-blue-500); background: #fff; }
.workspace-account:active { transform: translateY(1px); }
.workspace-account-label { grid-area: label; color: var(--nelloz-muted-blue); font-size: 10px; letter-spacing: .13em; }
.workspace-account-main { grid-area: main; display: grid; min-width: 0; gap: 3px; }
.workspace-account > .workspace-account-main { color: var(--nelloz-muted-blue); font-size: 11px; }
.workspace-account strong { margin: 0; color: var(--nelloz-ink-blue); font-size: 14px; }
.workspace-account-main > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-account-chevron { grid-area: chevron; width: 18px; height: 18px; color: var(--nelloz-blue-700); fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.account-popover {
    z-index: 34;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    display: grid;
    width: min(370px, calc(100vw - 20px));
    max-height: min(82dvh, 680px);
    gap: 10px;
    padding: 10px 18px 18px;
    overflow: auto;
    overscroll-behavior: contain;
    border: 0;
    border-top: 1px solid var(--nelloz-line-blue-strong);
    border-right: 1px solid var(--nelloz-line-blue-strong);
    border-radius: 18px 18px 0 0;
    background: linear-gradient(180deg, #fff 0%, var(--nelloz-blue-050) 44%, var(--nelloz-blue-100) 100%);
    box-shadow: 0 -18px 54px rgb(8 45 79 / 22%), inset 0 1px rgb(255 255 255 / 88%);
    color: var(--nelloz-ink-blue);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 104%, 0);
    transform-origin: center bottom;
    transition: opacity 180ms ease, visibility 0s linear 280ms, transform 280ms cubic-bezier(.18, .82, .2, 1);
}

.account-popover.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
}

.account-sheet-grabber {
    display: block;
    width: 34px;
    height: 4px;
    margin: 1px auto 1px;
    border-radius: 4px;
    background: var(--nelloz-line-blue-strong);
    cursor: grab;
    touch-action: none;
}

.account-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    border-bottom: 1px solid var(--nelloz-line-blue);
    touch-action: none;
}

.account-panel-kicker { color: var(--nelloz-muted-blue); font-size: 11px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.account-panel-close { flex: 0 0 auto; }

.account-popover-header {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 11px;
    padding: 3px 1px 13px;
    border-bottom: 1px solid var(--nelloz-line-blue);
}

.account-avatar {
    border-color: var(--nelloz-line-blue-strong);
    background: linear-gradient(145deg, #c5e5fb, #83bce7);
    box-shadow: inset 0 1px rgb(255 255 255 / 76%), 0 6px 18px rgb(43 116 170 / 16%);
    color: var(--nelloz-ink-blue);
}

.account-identity strong { color: var(--nelloz-ink-blue); font-size: 15px; }
.account-identity span { color: var(--nelloz-muted-blue); font-size: 11px; }
.account-plan-badge { border-color: var(--nelloz-line-blue-strong); background: var(--nelloz-blue-150); color: var(--nelloz-blue-700); }
.account-plan-row { padding: 0 3px 4px; color: var(--nelloz-muted-blue); }
.account-plan-row strong { color: var(--nelloz-ink-blue); }

.account-usage-toggle {
    min-height: 48px;
    padding: 0 3px;
    border: 0;
    border-top: 1px solid var(--nelloz-line-blue);
    border-bottom: 1px solid var(--nelloz-line-blue);
    border-radius: 0;
    background: transparent;
    color: var(--nelloz-ink-blue);
}

.account-usage-toggle:hover,
.account-usage-toggle[aria-expanded="true"] { border-color: var(--nelloz-line-blue-strong); background: var(--nelloz-blue-150); }
.account-usage-toggle > svg:first-child { color: var(--nelloz-blue-700); }
.account-usage-toggle small { color: var(--nelloz-muted-blue); }
.account-chevron { color: var(--nelloz-blue-700); }
.account-usage-details { gap: 15px; padding: 8px 4px 4px 25px; }
.account-usage-row-copy strong { color: var(--nelloz-ink-blue); }
.account-usage-row-copy span { color: var(--nelloz-muted-blue); }
.account-usage-value { color: var(--nelloz-blue-700); }
.account-usage-track { height: 5px; background: var(--nelloz-blue-200); box-shadow: inset 0 1px 2px rgb(26 77 116 / 10%); }
.account-usage-track i { background: linear-gradient(90deg, var(--nelloz-blue-500), #8bc9f4); box-shadow: 0 0 8px rgb(45 143 223 / 24%); }

.account-menu-action {
    min-height: 46px;
    padding: 0 4px;
    border-top: 1px solid var(--nelloz-line-blue);
    border-radius: 0;
    color: #315570;
}

.account-menu-action:hover { background: var(--nelloz-blue-150); color: var(--nelloz-ink-blue); }
.account-menu-action:active { background: var(--nelloz-blue-200); }
.account-menu-action svg { color: var(--nelloz-blue-700); }
.account-action-status { margin-left: 34px; color: var(--nelloz-blue-700); }
.account-logout { min-height: 54px; margin-top: 8px; padding-inline: 13px; border: 1px solid var(--nelloz-line-blue-strong); border-radius: 10px; background: var(--nelloz-blue-200); color: var(--nelloz-blue-700); font-weight: 720; }
.account-logout:hover { border-color: var(--nelloz-blue-500); background: #c8e5f8; color: #0e4775; }

#memoryToggle,
#memoryDetails,
#memoryStatus,
.memory-toggle,
.memory-details { display: none !important; }

.account-popover button:focus-visible,
.workspace-menu:focus-visible,
.workspace-close:focus-visible,
.workspace-new-chat:focus-visible,
.workspace-account:focus-visible,
.account-panel-close:focus-visible,
.account-usage-toggle:focus-visible,
.account-menu-action:focus-visible {
    outline: 2px solid var(--nelloz-blue-500);
    outline-offset: 2px;
}

@media (max-width: 560px) {
    .workspace-menu { top: 12px; left: 10px; min-width: 0; padding-right: 11px; }
    .workspace-menu-copy { display: none; }
    .workspace-panel { width: min(360px, calc(100vw - 8px)); border-radius: 0 16px 16px 0; }
    .account-popover { width: min(360px, calc(100vw - 8px)); border-radius: 16px 16px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .workspace-panel,
    .account-popover { transition: opacity 120ms ease, visibility 0s linear 120ms; }
    .workspace-panel.is-open,
    .account-popover.is-open { transition-delay: 0s; }
}

/* Login gate: give the desktop app a clear, comfortable first screen. */
.auth-gate {
    padding: clamp(28px, 5vw, 64px);
    background:
        radial-gradient(circle at 50% 30%, rgb(49 82 146 / 25%), transparent 42%),
        radial-gradient(circle at 50% 100%, rgb(19 35 66 / 22%), transparent 55%),
        #000;
}

.auth-card {
    width: min(100%, 620px);
    padding: clamp(40px, 6vw, 62px) clamp(32px, 6vw, 72px) 46px;
    border-radius: 30px;
    border-color: rgb(118 144 193 / 42%);
    background:
        linear-gradient(145deg, rgb(27 35 53 / 96%), rgb(8 12 23 / 98%)),
        #0b1120;
    box-shadow:
        0 28px 90px rgb(0 0 0 / 56%),
        0 0 0 1px rgb(255 255 255 / 4%),
        inset 0 1px rgb(255 255 255 / 7%);
}

.auth-mark {
    width: 104px;
    height: 104px;
    margin-bottom: 26px;
    box-shadow:
        0 0 0 12px rgb(8 15 32 / 76%),
        0 0 34px rgb(42 92 255 / 40%),
        inset 0 1px rgb(255 255 255 / 14%);
}

.auth-eyebrow {
    margin-bottom: 14px;
    color: #98b1dd;
    font-size: 12px;
    letter-spacing: .2em;
}

.auth-card h1 {
    max-width: 15ch;
    margin-inline: auto;
    font-size: clamp(34px, 5vw, 48px);
    line-height: 1.04;
    text-wrap: balance;
}

.auth-card p:not(.auth-eyebrow):not(.auth-hint) {
    max-width: 40ch;
    margin: 18px auto 0;
    font-size: 17px;
    line-height: 1.5;
}

.auth-account { font-size: 14px !important; }

.auth-refresh {
    min-width: 200px;
    min-height: 54px;
    margin-top: 32px;
    padding-inline: 28px;
    border-radius: 16px;
    font-size: 16px;
    box-shadow: 0 10px 26px rgb(24 86 174 / 22%), inset 0 1px rgb(255 255 255 / 12%);
}

.auth-hint {
    max-width: 40ch;
    margin: 28px auto 0;
    font-size: 14px;
    line-height: 1.55;
}

@media (max-width: 700px) {
    .auth-gate { padding: 20px; }
    .auth-card {
        width: min(100%, 560px);
        padding: 38px 26px 34px;
        border-radius: 24px;
    }
    .auth-mark { width: 88px; height: 88px; margin-bottom: 22px; }
    .auth-card h1 { font-size: clamp(30px, 9vw, 42px); }
    .auth-card p:not(.auth-eyebrow):not(.auth-hint) { font-size: 16px; }
    .auth-refresh { width: 100%; }
}

@media (max-height: 640px) and (min-width: 701px) {
    .auth-gate { padding-block: 20px; }
    .auth-card { padding-block: 28px 30px; }
    .auth-mark { width: 88px; height: 88px; margin-bottom: 20px; }
    .auth-card h1 { font-size: 40px; }
    .auth-card p:not(.auth-eyebrow):not(.auth-hint) { margin-top: 14px; }
    .auth-refresh { min-height: 50px; margin-top: 24px; }
    .auth-hint { margin-top: 20px; }
}