/* Classic OS / Retro System 7 & Win95 Aesthetics for Nexus Mini App */

:root {
    --bg-dither: #b5b5b5;
    --window-bg: #e6e6e6;
    --card-bg: #ffffff;
    --text-primary: #000000;
    --text-secondary: #333333;
    --text-muted: #666666;
    --border-dark: #000000;
    --border-light: #ffffff;
    --shadow-grey: #808080;
    --accent-blue: #000080;
    --active-grey: #737373;
    --btn-grey: #cccccc;
    --green-online: #22c55e;
    --font-main: -apple-system, BlinkMacSystemFont, "Geneva", "Chicago", "Segoe UI", Roboto, "Courier New", monospace, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

body.retro-body {
    background-color: var(--bg-dither);
    /* Classic Mac/Win dither pattern */
    background-image: radial-gradient(#888888 1px, transparent 0);
    background-size: 3px 3px;
    color: var(--text-primary);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 8px;
}

.window-container {
    width: 100%;
    max-width: 480px;
    background-color: var(--window-bg);
    border: 2px solid var(--border-dark);
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header bar */
.window-header {
    background-color: #ffffff;
    border-bottom: 2px solid var(--border-dark);
    padding: 6px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: repeating-linear-gradient(
        0deg,
        #ffffff,
        #ffffff 2px,
        #e6e6e6 2px,
        #e6e6e6 4px
    );
}

.window-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nexus-avatar-mini {
    width: 22px;
    height: 22px;
    background-color: #000000;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 13px;
}

.window-title {
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.5px;
}

.window-controls {
    display: flex;
    gap: 12px;
}

.control-btn {
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
}

/* Nav bar */
.nav-bar {
    display: flex;
    align-items: stretch;
    border-bottom: 2px solid var(--border-dark);
    background: #000;
}

.nav-tab {
    padding: 8px 16px;
    font-weight: bold;
    font-size: 15px;
}

.nav-tab.active {
    background: #000000;
    color: #ffffff;
    display: flex;
    align-items: center;
}

.nav-tab.empty {
    flex-grow: 1;
    background: #ffffff;
    border-left: 2px solid var(--border-dark);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 5px 8px;
}

.theme-switch {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: #173653;
    border: 1px solid #466783;
    border-radius: 18px;
}

.theme-btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 7px;
    color: #adc3d7;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 13px;
    cursor: pointer;
}

.theme-btn svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.theme-btn[aria-pressed="true"] {
    background: #204769;
    border-color: #547897;
    color: #ffca63;
}

.theme-btn:hover { background: #285274; }
.theme-btn:focus-visible { outline: 2px solid #ffca63; outline-offset: 2px; }

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg-dither: #10253b;
    --window-bg: #173149;
    --card-bg: #1b364f;
    --text-primary: #e7eff7;
    --text-secondary: #b9cbdb;
    --text-muted: #a0b7cc;
    --border-dark: #091a2b;
    --border-light: #486780;
    --shadow-grey: #0d2237;
    --active-grey: #345e80;
}

[data-theme="dark"] body.retro-body {
    background-image: radial-gradient(#29445e 1px, transparent 0);
}

[data-theme="dark"] .window-body {
    background: repeating-linear-gradient(0deg, #173149, #173149 2px, #1c3952 2px, #1c3952 4px);
}

[data-theme="dark"] .window-header,
[data-theme="dark"] .card-header {
    background: repeating-linear-gradient(0deg, #25445e, #25445e 2px, #2e506b 2px, #2e506b 4px);
}

[data-theme="dark"] .nav-tab.empty,
[data-theme="dark"] .card-pin,
[data-theme="dark"] .icon-box-square,
[data-theme="dark"] .retro-badge,
[data-theme="dark"] .retro-badge.active-sync,
[data-theme="dark"] .section-title-bar,
[data-theme="dark"] .retro-select,
[data-theme="dark"] .chip-btn,
[data-theme="dark"] .accordion-item,
[data-theme="dark"] .accordion-header,
[data-theme="dark"] .retro-btn-command {
    background: var(--card-bg);
    color: var(--text-primary);
}

[data-theme="dark"] .accordion-content,
[data-theme="dark"] .window-footer { background: var(--window-bg); }
[data-theme="dark"] .level-btn {
    background: #24445f;
    color: var(--text-secondary);
}
[data-theme="dark"] .level-btn.active {
    background: var(--active-grey);
    color: #ffffff;
}

/* Window Body */
.window-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: repeating-linear-gradient(
        0deg,
        #e0e0e0,
        #e0e0e0 2px,
        #ececec 2px,
        #ececec 4px
    );
}

/* Retro Cards */
.retro-card {
    background: var(--card-bg);
    border: 2px solid var(--border-dark);
    position: relative;
    box-shadow: 2px 2px 0px #888888;
}

.border-double {
    border-style: double;
    border-width: 4px;
    border-color: var(--border-dark);
}

.card-header {
    background: repeating-linear-gradient(
        0deg,
        #f0f0f0,
        #f0f0f0 2px,
        #dcdcdc 2px,
        #dcdcdc 4px
    );
    border-bottom: 2px solid var(--border-dark);
    padding: 4px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title {
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-pin {
    width: 8px;
    height: 8px;
    border: 1px solid var(--border-dark);
    background: #ffffff;
}

.card-content {
    padding: 10px;
}

.flex-row {
    display: flex;
    gap: 12px;
}

.items-center {
    align-items: center;
}

/* Icon square box */
.icon-box-square {
    width: 54px;
    height: 54px;
    border: 2px solid var(--border-dark);
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 1px 1px 0 #808080;
}

.big-letter {
    font-size: 32px;
    font-weight: 900;
    font-family: serif, "Times New Roman";
}

.server-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.server-name-ip {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.status-online {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: bold;
    font-size: 14px;
}

.dot-online {
    width: 10px;
    height: 10px;
    background-color: var(--green-online);
    border-radius: 50%;
    display: inline-block;
    border: 1px solid #15803d;
}

.vpn-check {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Agent Profile */
.agent-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.agent-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #0f172a;
    border: 2px solid var(--border-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.hoodie-icon {
    font-size: 26px;
}

.agent-name {
    font-size: 22px;
    font-weight: 900;
    line-height: 1.1;
}

.agent-sub {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Badges */
.badge-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.retro-badge {
    background: #ffffff;
    border: 2px solid var(--border-dark);
    padding: 6px 10px;
    font-weight: 800;
    font-size: 13px;
    text-align: left;
    box-shadow: 2px 2px 0px var(--border-dark);
    cursor: pointer;
}

.retro-badge:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0px var(--border-dark);
}

.retro-badge.active-sync {
    background: #ffffff;
}

/* Section Title Bar */
.section-title-bar {
    border-top: 2px solid var(--border-dark);
    border-bottom: 2px solid var(--border-dark);
    background: #ffffff;
    font-weight: 900;
    font-size: 15px;
    padding: 6px 10px;
    letter-spacing: 0.5px;
}

.section-body {
    padding: 10px;
}

.desc-text {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    line-height: 1.3;
}

/* Fields & Custom Select */
.field-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field-label {
    font-weight: 800;
    font-size: 15px;
}

.custom-select-wrapper {
    position: relative;
}

.retro-select {
    width: 100%;
    padding: 8px 12px;
    font-size: 16px;
    font-weight: 700;
    background: #ffffff;
    border: 2px solid var(--border-dark);
    box-shadow: inset 2px 2px 0px var(--shadow-grey);
    outline: none;
    appearance: none;
    cursor: pointer;
}

.custom-select-wrapper::after {
    content: "▼";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 12px;
    font-weight: bold;
}

.margin-top-sm {
    margin-top: 8px;
}

.margin-top {
    margin-top: 12px;
}

/* Retro Block Button */
.retro-btn-block {
    width: 100%;
    padding: 10px;
    background: var(--active-grey);
    color: #ffffff;
    font-weight: 900;
    font-size: 15px;
    border: 2px solid var(--border-dark);
    box-shadow: 2px 2px 0px var(--border-dark);
    cursor: pointer;
    text-align: center;
}

.retro-btn-block:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0px var(--border-dark);
}

/* Chips Row */
.chips-row {
    display: flex;
    gap: 8px;
}

.chip-btn {
    padding: 4px 8px;
    background: #ffffff;
    border: 2px solid var(--border-dark);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 1px 1px 0px var(--border-dark);
}

/* Accordion */
.accordion-item {
    border: 2px solid var(--border-dark);
    background: #ffffff;
}

.accordion-header {
    padding: 10px 12px;
    font-weight: 900;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: #ffffff;
}

.accordion-icon {
    font-size: 20px;
    font-weight: bold;
}

.accordion-content {
    display: none;
    padding: 10px;
    border-top: 2px solid var(--border-dark);
    background: #f5f5f5;
}

.accordion-content.open {
    display: block;
}

/* Reasoning Grid */
.reasoning-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.level-btn {
    padding: 10px 6px;
    background: #e6e6e6;
    border: 2px solid var(--border-dark);
    font-weight: 800;
    font-size: 14px;
    color: #737373;
    cursor: pointer;
    box-shadow: 1px 1px 0px var(--border-dark);
    text-align: center;
}

.level-btn:active {
    transform: translate(1px, 1px);
}

.level-btn.active {
    background: var(--active-grey);
    color: #ffffff;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.5);
}

/* Commands List */
.commands-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.retro-btn-command {
    padding: 8px 12px;
    background: #ffffff;
    border: 2px solid var(--border-dark);
    font-size: 14px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    box-shadow: 2px 2px 0px var(--border-dark);
}

.retro-btn-command:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0px var(--border-dark);
}

/* Footer */
.window-footer {
    border-top: 2px solid var(--border-dark);
    background: #e6e6e6;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
}

.footer-line {
    display: flex;
    justify-content: space-between;
    width: 100%;
    color: var(--text-secondary);
}

.footer-bot-tag {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 800;
}

/* Retro Toast */
.retro-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #000000;
    color: #ffffff;
    padding: 8px 16px;
    font-weight: bold;
    border: 2px solid #ffffff;
    box-shadow: 3px 3px 0px rgba(0,0,0,0.5);
    transition: transform 0.3s ease;
    z-index: 9999;
}

.retro-toast.show {
    transform: translateX(-50%) translateY(0);
}

/* Nexus light / dark color system. Layout deliberately stays unchanged. */
:root[data-theme="light"] {
    --bg-dither: #edf5ff;
    --window-bg: #f4f8fd;
    --card-bg: rgba(255, 255, 255, 0.92);
    --text-primary: #071a3d;
    --text-secondary: #536987;
    --text-muted: #7890ad;
    --border-dark: #bfd0e4;
    --border-light: #ffffff;
    --shadow-grey: #d9e5f3;
    --accent-blue: #4f8dff;
    --active-grey: #4f8dff;
    --btn-grey: #e8f1fc;
    --green-online: #29c883;
}

[data-theme="light"] body.retro-body {
    background-color: #edf5ff;
    background-image: radial-gradient(#d4e3f4 1px, transparent 0);
}

[data-theme="light"] .window-container {
    background-color: rgba(246, 250, 255, 0.96);
    box-shadow: 3px 3px 0 #d4e1f0;
}

[data-theme="light"] .window-header,
[data-theme="light"] .card-header {
    background-color: #f9fcff;
    background-image: repeating-linear-gradient(0deg, #fbfdff, #fbfdff 2px, #eef5fc 2px, #eef5fc 4px);
}

[data-theme="light"] .window-body {
    background: repeating-linear-gradient(0deg, #eff6fd, #eff6fd 2px, #f7fbff 2px, #f7fbff 4px);
}

[data-theme="light"] .nav-bar { background: #071a3d; }
[data-theme="light"] .nav-tab.active { background: #071a3d; color: #ffffff; }
[data-theme="light"] .nav-tab.empty,
[data-theme="light"] .card-pin,
[data-theme="light"] .icon-box-square,
[data-theme="light"] .retro-badge,
[data-theme="light"] .retro-badge.active-sync,
[data-theme="light"] .section-title-bar,
[data-theme="light"] .retro-select,
[data-theme="light"] .chip-btn,
[data-theme="light"] .accordion-item,
[data-theme="light"] .accordion-header,
[data-theme="light"] .retro-btn-command {
    background: rgba(255, 255, 255, 0.94);
    color: var(--text-primary);
}

[data-theme="light"] .accordion-content,
[data-theme="light"] .window-footer { background: #f5f9fe; }
[data-theme="light"] .level-btn { background: #f5f9fe; color: #6f86a2; }
[data-theme="light"] .level-btn.active {
    background: #4f8dff;
    color: #ffffff;
    box-shadow: 0 0 12px rgba(79, 141, 255, 0.42);
}
[data-theme="light"] .retro-btn-block {
    background: #4f8dff;
    color: #ffffff;
    box-shadow: 2px 2px 0 #b8cff3;
}
[data-theme="light"] .retro-card { box-shadow: 2px 2px 0 #d4e1f0; }
[data-theme="light"] .nexus-avatar-mini { background: #071a3d; color: #ffffff; }
[data-theme="light"] .theme-switch { background: #eaf2fc; border-color: #bfd1e7; }
[data-theme="light"] .theme-btn { color: #718aa8; }
[data-theme="light"] .theme-btn[aria-pressed="true"] {
    background: #ffffff;
    border-color: #7ba8ff;
    color: #377cff;
    box-shadow: 0 0 10px rgba(55, 124, 255, 0.28);
}
[data-theme="light"] .theme-btn:hover { background: #ffffff; }

:root[data-theme="dark"] {
    --bg-dither: #02070d;
    --window-bg: #07101a;
    --card-bg: rgba(7, 16, 26, 0.94);
    --text-primary: #edf5ff;
    --text-secondary: #91a7c8;
    --text-muted: #607897;
    --border-dark: #24374e;
    --border-light: #17283c;
    --shadow-grey: #000711;
    --accent-blue: #69a5ff;
    --active-grey: #1e5ed5;
    --btn-grey: #101e2e;
    --green-online: #36d896;
}

[data-theme="dark"] body.retro-body {
    background-color: #02070d;
    background-image: radial-gradient(#13253a 1px, transparent 0);
}

[data-theme="dark"] .window-container {
    background-color: #07101a;
    box-shadow: 3px 3px 0 #00050a, 0 0 24px rgba(54, 125, 255, 0.12);
}

[data-theme="dark"] .window-header,
[data-theme="dark"] .card-header {
    background-color: #08131f;
    background-image: repeating-linear-gradient(0deg, #08131f, #08131f 2px, #0c1927 2px, #0c1927 4px);
}

[data-theme="dark"] .window-body {
    background: repeating-linear-gradient(0deg, #040b13, #040b13 2px, #07111c 2px, #07111c 4px);
}

[data-theme="dark"] .nav-bar { background: #02070d; }
[data-theme="dark"] .nav-tab.active { background: #07101a; color: #edf5ff; }
[data-theme="dark"] .nav-tab.empty,
[data-theme="dark"] .card-pin,
[data-theme="dark"] .icon-box-square,
[data-theme="dark"] .retro-badge,
[data-theme="dark"] .retro-badge.active-sync,
[data-theme="dark"] .section-title-bar,
[data-theme="dark"] .retro-select,
[data-theme="dark"] .chip-btn,
[data-theme="dark"] .accordion-item,
[data-theme="dark"] .accordion-header,
[data-theme="dark"] .retro-btn-command {
    background: rgba(7, 16, 26, 0.96);
    color: var(--text-primary);
}

[data-theme="dark"] .accordion-content,
[data-theme="dark"] .window-footer { background: #07101a; }
[data-theme="dark"] .level-btn { background: #0b1623; color: #7f96b6; }
[data-theme="dark"] .level-btn.active {
    background: #0e3f91;
    border-color: #76adff;
    color: #ffffff;
    box-shadow: 0 0 15px rgba(69, 137, 255, 0.72);
}
[data-theme="dark"] .retro-btn-block {
    background: #123b78;
    border-color: #6ca6ff;
    color: #ffffff;
    box-shadow: 0 0 14px rgba(65, 132, 255, 0.52);
}
[data-theme="dark"] .retro-card {
    box-shadow: 2px 2px 0 #000710, 0 0 16px rgba(50, 112, 224, 0.1);
}
[data-theme="dark"] .nexus-avatar-mini { background: #edf5ff; color: #07101a; }
[data-theme="dark"] .theme-switch { background: #081727; border-color: #29486a; }
[data-theme="dark"] .theme-btn { color: #7891ae; }
[data-theme="dark"] .theme-btn[aria-pressed="true"] {
    background: #102d51;
    border-color: #508bd1;
    color: #83b6ff;
    box-shadow: 0 0 12px rgba(72, 142, 255, 0.42);
}
[data-theme="dark"] .theme-btn:hover { background: #10243a; }
[data-theme="dark"] .dot-online { box-shadow: 0 0 8px rgba(54, 216, 150, 0.7); }
[data-theme="dark"] .retro-toast { background: #07101a; border-color: #6da6ff; }

/* Futuristic Nexus header */
.nexus-hero {
    position: relative;
    overflow: visible;
    min-height: 420px;
    border: 1px solid rgba(95, 148, 218, 0.34);
    background:
        linear-gradient(180deg, rgba(3, 12, 22, 0.12), rgba(1, 7, 14, 0.88)),
        radial-gradient(circle at 50% 53%, rgba(31, 102, 213, 0.26), transparent 43%),
        #02070d;
    color: #eaf3ff;
    box-shadow: inset 0 0 36px rgba(35, 105, 218, 0.1);
}

.nexus-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.16;
    background-image: radial-gradient(rgba(127, 177, 255, 0.8) 0.6px, transparent 0.8px);
    background-size: 12px 12px;
    mask-image: linear-gradient(to bottom, transparent 15%, #000 42%, transparent 95%);
}

.hero-toolbar {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr) 160px;
    align-items: center;
    min-height: 96px;
    padding: 14px 12px 6px;
}

.hero-toolbar .theme-switch {
    align-self: center;
    width: 160px;
    height: 58px;
    box-sizing: border-box;
    gap: 2px;
    padding: 3px;
    background: rgba(8, 24, 41, 0.82);
    border-color: rgba(87, 141, 204, 0.55);
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

.hero-toolbar .theme-btn {
    flex: 1 1 0;
    width: auto;
    height: 50px;
    padding: 7px;
    border-radius: 13px;
}

.hero-toolbar .theme-btn svg {
    width: 22px;
    height: 22px;
}

.hero-toolbar-status {
    position: static;
    align-self: center;
    width: 160px;
    height: 58px;
    color: #9fb9dd;
    font-size: 9px;
    letter-spacing: 0.9px;
    line-height: 1.55;
}

.hero-toolbar-status .hero-online {
    width: 160px;
    height: 58px;
    min-height: 58px;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 13px;
    border: 1px solid rgba(89, 137, 196, 0.55);
    border-radius: 12px;
    background: rgba(8, 24, 41, 0.82);
}

.hero-toolbar-status .hero-online b {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.9px;
    white-space: nowrap;
}

.hero-brand {
    text-align: center;
    white-space: nowrap;
}

.hero-brand h1 {
    margin: 0;
    color: #f4f8ff;
    font-size: 31px;
    font-weight: 400;
    letter-spacing: 11px;
    line-height: 1.15;
    text-shadow: 0 0 13px rgba(107, 160, 255, 0.7);
}

.hero-brand p {
    margin: 9px 0 0;
    color: #8da7cf;
    font-size: 9px;
    letter-spacing: 3px;
}

.hero-actions {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 3px;
}

.hero-action-btn {
    display: grid;
    place-items: center;
    width: 37px;
    height: 37px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: #dce9fb;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

.hero-action-btn:hover,
.hero-action-btn:focus-visible {
    border-color: rgba(105, 165, 255, 0.55);
    background: rgba(31, 87, 157, 0.18);
    outline: none;
}

.hero-close-btn { font-size: 34px; font-weight: 200; }

.header-menu {
    position: absolute;
    top: 44px;
    right: 0;
    z-index: 50;
    width: min(310px, calc(100vw - 38px));
    padding: 8px;
    border: 1px solid #30445c;
    border-radius: 17px;
    background: #14202c;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.52);
}

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

.header-menu button {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    width: 100%;
    padding: 11px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #f2f5f9;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}

.header-menu button:hover,
.header-menu button:focus-visible {
    background: #203142;
    outline: none;
}

.header-menu button span {
    color: #d8e2ec;
    font-size: 24px;
    text-align: center;
}

.hero-notice {
    position: relative;
    z-index: 4;
    margin: -3px 14px 5px;
    color: #8097b8;
    font-size: 10px;
    text-align: center;
}

.hero-stage {
    position: relative;
    z-index: 2;
    min-height: 244px;
    overflow: hidden;
    border-top: 1px solid rgba(71, 119, 181, 0.12);
}

.hero-stage::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -194px;
    width: 374px;
    height: 374px;
    transform: translateX(-50%);
    border: 1px solid rgba(105, 164, 255, 0.7);
    border-radius: 50%;
    background:
        repeating-radial-gradient(ellipse at 55% 38%, transparent 0 17px, rgba(108, 158, 231, 0.07) 18px 19px),
        repeating-linear-gradient(118deg, transparent 0 16px, rgba(95, 152, 241, 0.07) 17px 18px),
        radial-gradient(circle at 46% 30%, rgba(50, 113, 218, 0.2), #020914 54%, #01050a 72%);
    box-shadow:
        0 -4px 13px rgba(115, 171, 255, 0.75),
        0 -16px 40px rgba(37, 103, 213, 0.38),
        inset 0 8px 28px rgba(61, 130, 231, 0.3);
}

.hero-planet {
    position: absolute;
    left: 50%;
    bottom: -140px;
    width: 282px;
    height: 282px;
    transform: translateX(-50%);
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 63% 35%, transparent 0 34%, rgba(91, 154, 244, 0.2) 35% 36%, transparent 37%),
        radial-gradient(ellipse at 34% 48%, transparent 0 23%, rgba(77, 136, 220, 0.16) 24% 25%, transparent 26%);
    filter: blur(0.1px);
}

.hero-side {
    position: absolute;
    top: 30px;
    z-index: 3;
    width: 104px;
    color: #86a0c7;
    font-size: 10px;
    letter-spacing: 1.2px;
    line-height: 1.75;
}

.hero-status { left: 12px; }
.hero-models { right: 12px; text-align: right; }

.hero-online,
.hero-system {
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid rgba(89, 137, 196, 0.25);
    border-radius: 11px;
    background: rgba(3, 12, 23, 0.56);
}

.hero-online {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.hero-online span {
    width: 13px;
    height: 13px;
    border: 1.5px solid #b8d5ff;
    border-radius: 50%;
    box-shadow: 0 0 9px #5c9dff;
}

.hero-system span { color: #76a9ff; font-size: 17px; }

.hero-copy {
    position: absolute;
    left: 50%;
    bottom: 40px;
    z-index: 4;
    width: 246px;
    transform: translateX(-50%);
    color: #dce9ff;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 4px;
    line-height: 1.7;
    text-align: center;
    text-shadow: 0 0 12px rgba(92, 149, 244, 0.55);
}

.hero-badges {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    padding: 0 12px 13px;
}

.hero-badges .retro-badge {
    border-color: rgba(85, 131, 190, 0.46);
    background: rgba(4, 14, 26, 0.84);
    color: #d8e7fb;
    box-shadow: none;
    font-size: 10px;
}

.hero-badges .active-sync { grid-column: 1 / -1; }

.settings-panel[hidden] { display: none; }
.settings-panel > .retro-card { margin-top: 0; }

[data-theme="light"] .nexus-hero {
    color: #071a3d;
    border-color: #c3d9f0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(239, 247, 255, 0.88)),
        radial-gradient(circle at 50% 53%, rgba(111, 170, 255, 0.3), transparent 47%),
        #f7fbff;
    box-shadow: inset 0 0 40px rgba(56, 130, 230, 0.08);
}

[data-theme="light"] .hero-brand h1 { color: #071a3d; text-shadow: 0 0 12px rgba(68, 133, 237, 0.32); }
[data-theme="light"] .hero-brand p,
[data-theme="light"] .hero-side { color: #42618b; }
[data-theme="light"] .hero-action-btn { color: #071a3d; }
[data-theme="light"] .hero-toolbar .theme-switch { background: rgba(234, 243, 253, 0.88); }
[data-theme="light"] .hero-stage::before {
    border-color: rgba(115, 169, 244, 0.78);
    background:
        repeating-radial-gradient(ellipse at 55% 38%, transparent 0 17px, rgba(49, 119, 218, 0.1) 18px 19px),
        repeating-linear-gradient(118deg, transparent 0 16px, rgba(69, 136, 231, 0.08) 17px 18px),
        radial-gradient(circle at 46% 30%, rgba(140, 189, 255, 0.58), rgba(231, 244, 255, 0.8) 56%, rgba(247, 252, 255, 0.94) 74%);
    box-shadow: 0 -4px 14px rgba(86, 150, 241, 0.55), 0 -14px 40px rgba(65, 138, 238, 0.2);
}
[data-theme="light"] .hero-online,
[data-theme="light"] .hero-system { background: rgba(255, 255, 255, 0.62); }
[data-theme="light"] .hero-copy { color: #071a3d; text-shadow: 0 0 12px rgba(69, 136, 231, 0.25); }
[data-theme="light"] .hero-badges .retro-badge {
    border-color: #b8d0eb;
    background: rgba(255, 255, 255, 0.82);
    color: #153159;
}

@media (max-width: 420px) {
    body.retro-body { padding: 0; }
    .window-container { border-left: 0; border-right: 0; }
    .window-body { padding: 6px; }
    .hero-toolbar { grid-template-columns: 140px minmax(0, 1fr) 140px; padding-inline: 8px; }
    .hero-brand h1 { font-size: 26px; letter-spacing: 8px; }
    .hero-brand p { font-size: 7px; letter-spacing: 2px; }
    .hero-toolbar .theme-switch,
    .hero-toolbar-status,
    .hero-toolbar-status .hero-online { width: 140px; height: 54px; min-height: 54px; }
    .hero-toolbar .theme-btn { height: 46px; padding: 6px; }
    .hero-action-btn { width: 34px; height: 34px; }
    .hero-side { width: 92px; font-size: 8px; }
    .hero-status { left: 8px; }
    .hero-models { right: 8px; }
    .hero-online, .hero-system { padding: 8px; }
    .hero-copy { width: 220px; font-size: 13px; letter-spacing: 3px; }
}

/* The theme switch and activity status share one top-row frame. */
.nexus-hero .hero-toolbar-status,
.nexus-hero .hero-toolbar-status .hero-online {
    top: auto;
}

[data-theme="light"] .hero-toolbar-status .hero-online {
    background: rgba(234, 243, 253, 0.88);
}

/* Refined status and model controls */
.nexus-hero { min-height: 0; }
.hero-stage { min-height: 184px; }

.hero-status,
.hero-models {
    top: 32px;
    width: 150px;
}

.hero-online,
.hero-system {
    width: 100%;
    height: 58px;
    margin-bottom: 0;
    padding: 9px 10px;
    border-radius: 0;
    color: #9fb9dd;
    font-size: 7.5px;
    letter-spacing: 0.75px;
    line-height: 1.55;
}

.hero-online b { font-weight: 500; }

.hero-online span {
    width: 14px;
    height: 14px;
    border: 0;
}

.hero-online.is-online span {
    background: #4b9cff;
    box-shadow: 0 0 5px #8dc2ff, 0 0 13px #3186ff, 0 0 23px rgba(49, 134, 255, 0.9);
}

.hero-online.is-online b { color: #b9d6ff; }

.hero-online.is-offline span {
    background: #ff3e55;
    box-shadow: 0 0 5px #ff98a4, 0 0 13px #ff304c, 0 0 23px rgba(255, 48, 76, 0.9);
}

.hero-online.is-offline b { color: #ff9dab; }

.hero-system {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.nexus-hero .hero-system .hero-system-line {
    display: block;
    color: inherit;
    font-size: 7.5px;
    white-space: nowrap;
}

.hero-system i {
    color: #76a9ff;
    font-size: 12px;
    font-style: normal;
}

.hero-copy {
    bottom: 35px;
}

.hero-badges {
    grid-template-columns: 1fr 1fr;
    padding-top: 0;
}

.hero-badges .retro-badge {
    display: flex;
    align-items: center;
    min-height: 38px;
    cursor: default;
    pointer-events: none;
}

.model-choice-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 9px;
}

.model-choice-card {
    min-width: 0;
    padding: 10px;
    border: 1px solid #5d9dff;
    border-radius: 0;
    background: linear-gradient(145deg, rgba(25, 78, 155, 0.42), rgba(6, 19, 35, 0.84) 68%);
    box-shadow: inset 0 0 18px rgba(65, 139, 255, 0.18), 0 0 10px rgba(51, 128, 255, 0.38);
}

.model-choice-card .field-label {
    color: #d7e8ff;
    font-size: 12px;
    letter-spacing: 0.4px;
}

.model-choice-card .retro-select {
    overflow: hidden;
    padding: 7px 20px 7px 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #ffffff;
    font-size: 12px;
    text-overflow: ellipsis;
}

.model-choice-card .retro-select:disabled {
    opacity: 1;
    -webkit-text-fill-color: #9db3ce;
}

.model-choice-card .custom-select-wrapper::after {
    right: 0;
    color: #9bc2ff;
}

.apply-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 11px;
}

.apply-actions .retro-btn-block {
    min-height: 46px;
    margin: 0;
    border: 1px solid #83b5ff;
    border-radius: 0;
    background: linear-gradient(145deg, #235ab2, #173c79);
    box-shadow: inset 0 0 18px rgba(122, 177, 255, 0.2), 0 0 11px rgba(53, 127, 255, 0.42);
    font-size: 12px;
}

[data-theme="light"] .hero-online,
[data-theme="light"] .hero-system {
    background: rgba(255, 255, 255, 0.72);
}

[data-theme="light"] .model-choice-card {
    background: linear-gradient(145deg, rgba(215, 233, 255, 0.92), rgba(250, 253, 255, 0.96));
    box-shadow: inset 0 0 18px rgba(71, 139, 241, 0.12), 0 0 10px rgba(71, 139, 241, 0.22);
}

[data-theme="light"] .model-choice-card .field-label,
[data-theme="light"] .model-choice-card .retro-select {
    color: #0b2855;
}

/* Keep the activity indicator in the toolbar beside the theme switch. */
.nexus-hero .hero-toolbar-status {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: 160px;
    height: 58px;
    justify-self: end;
}

.nexus-hero .hero-toolbar-status .hero-online {
    width: 160px;
    height: 58px;
    min-height: 58px;
    box-sizing: border-box;
    margin: 0;
    border-radius: 12px;
}

@media (max-width: 420px) {
    .nexus-hero .hero-toolbar-status,
    .nexus-hero .hero-toolbar-status .hero-online {
        width: 140px;
        height: 54px;
        min-height: 54px;
    }
}

@media (max-width: 600px) {
    .hero-toolbar {
        grid-template-columns: 120px minmax(0, 1fr) 120px;
    }

    .hero-toolbar .theme-switch,
    .nexus-hero .hero-toolbar-status,
    .nexus-hero .hero-toolbar-status .hero-online {
        width: 120px;
    }

    .hero-brand h1 {
        font-size: 26px;
        letter-spacing: 7px;
    }
}

@media (max-width: 420px) {
    .hero-toolbar {
        grid-template-columns: 100px minmax(0, 1fr) 100px;
    }

    .hero-toolbar .theme-switch,
    .nexus-hero .hero-toolbar-status,
    .nexus-hero .hero-toolbar-status .hero-online {
        width: 100px;
    }

    .hero-toolbar .theme-btn {
        height: 46px;
        padding: 5px;
    }

    .hero-toolbar .theme-btn svg {
        width: 21px;
        height: 21px;
    }

    .nexus-hero .hero-toolbar-status .hero-online {
        padding: 8px;
    }

    .nexus-hero .hero-toolbar-status .hero-online b {
        font-size: 7px;
        letter-spacing: 0.45px;
    }
}

/* Responsive toolbar sizing keeps the two top indicators equal without crowding NEXUS. */
@media (max-width: 600px) {
    .hero-toolbar {
        grid-template-columns: 120px minmax(0, 1fr) 120px;
    }

    .hero-toolbar .theme-switch,
    .nexus-hero .hero-toolbar-status,
    .nexus-hero .hero-toolbar-status .hero-online {
        width: 120px;
    }

    .hero-brand h1 {
        font-size: 26px;
        letter-spacing: 7px;
    }
}

@media (max-width: 420px) {
    .hero-toolbar {
        grid-template-columns: 100px minmax(0, 1fr) 100px;
    }

    .hero-toolbar .theme-switch,
    .nexus-hero .hero-toolbar-status,
    .nexus-hero .hero-toolbar-status .hero-online {
        width: 100px;
    }

    .hero-toolbar .theme-btn {
        height: 46px;
        padding: 5px;
    }

    .hero-toolbar .theme-btn svg {
        width: 21px;
        height: 21px;
    }

    .nexus-hero .hero-toolbar-status .hero-online {
        padding: 8px;
    }

    .nexus-hero .hero-toolbar-status .hero-online b {
        font-size: 7px;
        letter-spacing: 0.45px;
    }
}

/* Final toolbar placement: both top indicators use the same frame. */
.nexus-hero .hero-toolbar-status {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: 160px;
    height: 58px;
    justify-self: end;
}

.nexus-hero .hero-toolbar-status .hero-online {
    width: 160px;
    height: 58px;
    min-height: 58px;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 13px;
    border-radius: 12px;
}

@media (max-width: 420px) {
    .nexus-hero .hero-toolbar-status,
    .nexus-hero .hero-toolbar-status .hero-online {
        width: 140px;
        height: 54px;
        min-height: 54px;
    }
}

@media (max-width: 600px) {
    .hero-toolbar {
        grid-template-columns: 120px minmax(0, 1fr) 120px;
    }

    .hero-toolbar .theme-switch,
    .nexus-hero .hero-toolbar-status,
    .nexus-hero .hero-toolbar-status .hero-online {
        width: 120px;
    }

    .hero-brand h1 {
        font-size: 26px;
        letter-spacing: 7px;
    }
}

@media (max-width: 420px) {
    .hero-toolbar {
        grid-template-columns: 100px minmax(0, 1fr) 100px;
    }

    .hero-toolbar .theme-switch,
    .nexus-hero .hero-toolbar-status,
    .nexus-hero .hero-toolbar-status .hero-online {
        width: 100px;
    }

    .hero-toolbar .theme-btn {
        height: 46px;
        padding: 5px;
    }

    .hero-toolbar .theme-btn svg {
        width: 21px;
        height: 21px;
    }

    .nexus-hero .hero-toolbar-status .hero-online {
        padding: 8px;
    }

    .nexus-hero .hero-toolbar-status .hero-online b {
        font-size: 7px;
        letter-spacing: 0.45px;
    }
}

@media (max-width: 420px) {
    .hero-stage { min-height: 174px; }
    .hero-status,
    .hero-models { top: 25px; width: 125px; }
    .hero-online,
    .hero-system { height: 52px; padding: 7px 8px; font-size: 6.5px; letter-spacing: 0.4px; }
    .nexus-hero .hero-system .hero-system-line { font-size: 6.5px; }
    .hero-system i { font-size: 10px; }
    .hero-copy { bottom: 30px; width: 205px; font-size: 12px; letter-spacing: 2.4px; }
    .model-choice-card { padding: 8px; }
    .model-choice-card .field-label,
    .model-choice-card .retro-select,
    .apply-actions .retro-btn-block { font-size: 11px; }
}

/* Matched hero indicators: identical geometry and typography */
.nexus-hero .hero-status,
.nexus-hero .hero-models {
    top: 30px;
    width: 160px;
    height: 58px;
}

.nexus-hero .hero-online,
.nexus-hero .hero-system {
    width: 160px;
    height: 58px;
    min-height: 58px;
    margin: 0;
    padding: 10px 13px;
    border: 1px solid rgba(89, 137, 196, 0.3);
    border-radius: 12px;
    background: rgba(3, 12, 23, 0.62);
    color: #9fb9dd;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.9px;
    line-height: 1.55;
}

.nexus-hero .hero-online {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nexus-hero .hero-online b {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.9px;
    white-space: nowrap;
}

.nexus-hero .hero-system {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22px;
    align-items: center;
    gap: 7px;
    text-align: left;
}

.nexus-hero .hero-system-copy,
.nexus-hero .hero-system-copy div {
    min-width: 0;
    color: #9fb9dd;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.9px;
    line-height: 1.55;
    white-space: nowrap;
}

.nexus-hero .system-wave {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 22px;
    height: 28px;
}

.nexus-hero .system-wave i {
    display: block;
    width: 2px;
    border-radius: 2px;
    background: #6aa5ff;
    box-shadow: 0 0 5px #5597ff;
}

.nexus-hero .system-wave i:nth-child(1),
.nexus-hero .system-wave i:nth-child(5) { height: 9px; }
.nexus-hero .system-wave i:nth-child(2),
.nexus-hero .system-wave i:nth-child(4) { height: 18px; }
.nexus-hero .system-wave i:nth-child(3) { height: 27px; }

[data-theme="light"] .nexus-hero .hero-online,
[data-theme="light"] .nexus-hero .hero-system {
    background: rgba(255, 255, 255, 0.72);
}

@media (max-width: 420px) {
    .nexus-hero .hero-status,
    .nexus-hero .hero-models,
    .nexus-hero .hero-online,
    .nexus-hero .hero-system {
        width: 140px;
        height: 54px;
        min-height: 54px;
    }

    .nexus-hero .hero-online,
    .nexus-hero .hero-system { padding: 8px 10px; }

    .nexus-hero .hero-online b,
    .nexus-hero .hero-system-copy,
    .nexus-hero .hero-system-copy div {
        font-size: 7.5px;
        letter-spacing: 0.55px;
    }
}

/* Final toolbar placement: both top indicators use the same frame. */
.nexus-hero .hero-toolbar-status {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: 160px;
    height: 58px;
    justify-self: end;
}

.nexus-hero .hero-toolbar-status .hero-online {
    width: 160px;
    height: 58px;
    min-height: 58px;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 13px;
    border-radius: 12px;
}

@media (max-width: 420px) {
    .nexus-hero .hero-toolbar-status,
    .nexus-hero .hero-toolbar-status .hero-online {
        width: 100px;
        height: 54px;
        min-height: 54px;
    }
}

/* Identical outer frame and spacing for the two top indicators. */
.nexus-hero .hero-toolbar .theme-switch,
.nexus-hero .hero-toolbar-status .hero-online {
    border: 1px solid rgba(89, 137, 196, 0.3);
    border-radius: 12px;
    background: rgba(3, 12, 23, 0.62);
}

[data-theme="light"] .nexus-hero .hero-toolbar .theme-switch,
[data-theme="light"] .nexus-hero .hero-toolbar-status .hero-online {
    background: rgba(255, 255, 255, 0.72);
}

/* Match the reference header proportions and status indicator. */
.nexus-hero .hero-brand {
    align-self: center;
}

.nexus-hero .hero-brand h1 {
    font-size: 38px;
    letter-spacing: 9px;
    line-height: 1;
}

.nexus-hero .hero-toolbar-status .hero-online span {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    min-width: 12px;
    min-height: 12px;
    aspect-ratio: 1 / 1;
}

.nexus-hero .hero-toolbar-status .hero-online b {
    font-size: 8px;
    letter-spacing: 0.65px;
}

.nexus-hero .hero-toolbar-status .hero-online {
    justify-content: center;
    align-items: center;
    gap: 8px;
}

/* Balanced header proportions: equal compact frames leave NEXUS centered. */
.nexus-hero .hero-toolbar {
    grid-template-columns: 96px minmax(0, 1fr) 96px;
    column-gap: 12px;
    align-items: center;
}

.nexus-hero .hero-toolbar .theme-switch,
.nexus-hero .hero-toolbar-status,
.nexus-hero .hero-toolbar-status .hero-online {
    width: 96px;
    height: 54px;
    min-height: 54px;
}

.nexus-hero .hero-toolbar .theme-btn {
    height: 46px;
    padding: 6px;
}

@media (max-width: 600px) {
    .nexus-hero .hero-toolbar {
        grid-template-columns: 88px minmax(0, 1fr) 88px;
        column-gap: 8px;
    }

    .nexus-hero .hero-toolbar .theme-switch,
    .nexus-hero .hero-toolbar-status,
    .nexus-hero .hero-toolbar-status .hero-online {
        width: 88px;
        height: 50px;
        min-height: 50px;
    }

    .nexus-hero .hero-toolbar .theme-btn {
        height: 42px;
        padding: 5px;
    }
}

/* Personal assistant preview and its standalone screen. */
.nexus-hero.assistant-enabled .hero-stage {
    min-height: 184px;
}

.assistant-preview {
    position: absolute;
    top: 34px;
    left: 50%;
    z-index: 6;
    width: min(94%, 430px);
    transform: translateX(-50%);
    color: #f1f6ff;
    text-align: center;
}

.assistant-preview h2,
.assistant-screen-toolbar h2 {
    margin: 0;
    color: #f1f6ff;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 3.5px;
    line-height: 1.25;
    text-shadow: 0 0 12px rgba(92, 149, 244, 0.55);
}

.assistant-features {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 22px auto 24px;
    color: #8ed5ff;
}

.assistant-features span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    padding: 0 8px;
    border-left: 1px solid rgba(18, 191, 255, 0.55);
    white-space: nowrap;
}

.assistant-features span:first-child {
    border-left: 0;
}

.assistant-features svg,
.assistant-screen-card svg {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #12bfff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    filter: drop-shadow(0 0 5px rgba(18, 191, 255, 0.65));
}

.assistant-features b {
    color: #a9caed;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.2px;
}

.assistant-open-btn {
    display: block;
    width: 100%;
    min-height: 52px;
    padding: 10px 16px;
    border: 1px solid #54c8ff;
    border-radius: 12px;
    background: linear-gradient(180deg, #147ddd, #0755c5);
    box-shadow: 0 0 16px rgba(27, 139, 255, 0.72), inset 0 0 16px rgba(122, 203, 255, 0.22);
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1.1px;
    line-height: 1.2;
    cursor: pointer;
}

.assistant-open-btn:hover,
.assistant-open-btn:focus-visible {
    background: linear-gradient(180deg, #258be8, #0b62d7);
    outline: none;
}

.assistant-screen[hidden] {
    display: none;
}

.assistant-screen {
    position: relative;
    min-height: 430px;
    padding: 22px 14px 26px;
    border: 1px solid rgba(95, 148, 218, 0.34);
    background:
        linear-gradient(180deg, rgba(3, 12, 22, 0.26), rgba(1, 7, 14, 0.9)),
        radial-gradient(circle at 50% 44%, rgba(31, 102, 213, 0.23), transparent 52%),
        #02070d;
    color: #eaf3ff;
    box-shadow: inset 0 0 36px rgba(35, 105, 218, 0.1);
}

.assistant-screen-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
}

.assistant-screen-toolbar h2 {
    font-size: 17px;
    letter-spacing: 2px;
}

.assistant-back-btn {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid #4d83c7;
    border-radius: 0;
    background: rgba(5, 24, 48, 0.72);
    color: #a9ceff;
    font-size: 10px;
    letter-spacing: 0.7px;
    cursor: pointer;
}

.assistant-screen-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.assistant-screen-card {
    min-height: 138px;
    padding: 16px 13px;
    border: 1px solid rgba(80, 143, 220, 0.62);
    background: rgba(5, 20, 39, 0.78);
    box-shadow: inset 0 0 15px rgba(48, 117, 221, 0.12);
}

.assistant-screen-card h3 {
    margin: 10px 0 6px;
    color: #dceaff;
    font-size: 14px;
    font-weight: 600;
}

.assistant-screen-card p {
    margin: 0;
    color: #92acd0;
    font-size: 10px;
    line-height: 1.45;
}

[data-theme="light"] .assistant-preview h2,
[data-theme="light"] .assistant-screen-toolbar h2 {
    color: #071a3d;
}

[data-theme="light"] .assistant-screen {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(239, 247, 255, 0.9)),
        #f7fbff;
}

[data-theme="light"] .assistant-screen-card {
    background: rgba(255, 255, 255, 0.74);
}

@media (max-width: 420px) {
    .nexus-hero.assistant-enabled .hero-stage {
        min-height: 184px;
    }

    .assistant-preview {
        top: 30px;
        width: calc(100% - 22px);
    }

    .assistant-preview h2 {
        font-size: 18px;
        letter-spacing: 2.2px;
    }

    .assistant-features {
        margin: 18px auto 21px;
    }

    .assistant-features span {
        gap: 3px;
        padding: 0 4px;
    }

    .assistant-features svg {
        width: 18px;
        height: 18px;
    }

    .assistant-features b {
        font-size: 7px;
        letter-spacing: 0;
    }

    .assistant-open-btn {
        min-height: 46px;
        padding-inline: 8px;
        font-size: 14px;
    }

    .assistant-screen {
        min-height: 390px;
        padding-inline: 10px;
    }

    .assistant-screen-toolbar h2 {
        font-size: 14px;
        letter-spacing: 1.4px;
    }

    .assistant-screen-grid {
        grid-template-columns: 1fr;
    }
}

/* Standalone assistant workspace (opened from the preview button). */
.assistant-screen {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 46px);
    overflow: hidden;
    padding: 26px 22px 18px;
    border: 1px solid rgba(43, 104, 168, 0.62);
    background: #010812;
    color: #e9f2ff;
    box-shadow: inset 0 0 60px rgba(12, 89, 185, 0.18);
}

.assistant-screen::before {
    content: "";
    position: absolute;
    z-index: -2;
    top: 6%;
    right: -43%;
    width: 86%;
    aspect-ratio: 1;
    border: 1px solid rgba(74, 154, 255, 0.9);
    border-radius: 50%;
    background:
        radial-gradient(circle at 66% 28%, rgba(10, 30, 56, 0.08), rgba(1, 7, 16, 0.8) 59%, #00040a 74%),
        repeating-radial-gradient(ellipse at 38% 52%, transparent 0 22px, rgba(58, 123, 212, 0.17) 23px 24px),
        repeating-linear-gradient(118deg, transparent 0 19px, rgba(53, 130, 238, 0.16) 20px 21px);
    box-shadow: 0 0 14px #2a8aff, 0 0 56px rgba(24, 113, 255, 0.72), inset 0 0 32px rgba(25, 104, 221, 0.44);
}

.assistant-screen::after {
    display: none;
}

.assistant-screen-topbar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    min-height: 42px;
}

.assistant-nexus-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #dceaff;
    font-size: 21px;
    font-weight: 300;
    letter-spacing: 2px;
    cursor: pointer;
}

.assistant-nexus-back span {
    color: #91bdff;
    font-size: 42px;
    font-weight: 200;
    line-height: 0.5;
}

.assistant-nexus-back:hover,
.assistant-nexus-back:focus-visible { color: #ffffff; outline: none; text-shadow: 0 0 10px #4c9aff; }

.assistant-screen-intro {
    position: relative;
    z-index: 2;
    margin: 22px 0 28px;
    max-width: 90%;
}

.assistant-screen-intro h2 {
    margin: 0 0 16px;
    color: #f4f8ff;
    font-size: clamp(34px, 9vw, 54px);
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 1.06;
    text-shadow: 0 0 15px rgba(120, 176, 255, 0.42);
}

.assistant-screen-status {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: #a9c7ec;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1.8px;
}

.assistant-screen-status > span {
    width: 15px;
    height: 15px;
    border-radius: 50%;
}

.assistant-screen-status.is-online > span {
    background: #5ea2ff;
    box-shadow: 0 0 6px #8ec5ff, 0 0 18px #2787ff, 0 0 32px rgba(39, 135, 255, 0.85);
}

.assistant-screen-status.is-online b { color: #c2dcff; }

.assistant-screen-status.is-offline > span {
    background: #ff3d57;
    box-shadow: 0 0 6px #ff99a5, 0 0 18px #ff2945, 0 0 32px rgba(255, 41, 69, 0.8);
}

.assistant-screen-status.is-offline b { color: #ffabb5; }

.assistant-screen-intro p {
    margin: 0;
    color: #b8cbe5;
    font-size: clamp(19px, 4.5vw, 28px);
    font-weight: 300;
    line-height: 1.45;
}

.assistant-task-list {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
    border: 1px solid rgba(67, 136, 216, 0.68);
    border-radius: 20px;
    background: rgba(1, 12, 27, 0.54);
    box-shadow: inset 0 0 28px rgba(28, 104, 214, 0.11);
}

.assistant-task-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 35px;
    align-items: center;
    gap: 15px;
    min-height: 91px;
    margin: 0 20px;
    border-bottom: 1px solid rgba(65, 107, 163, 0.42);
}

.assistant-task-row:last-child { border-bottom: 0; }

.assistant-task-icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border: 1px solid currentColor;
    border-radius: 13px;
    background: rgba(2, 21, 39, 0.82);
}

.assistant-task-icon svg {
    width: 31px;
    height: 31px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.task-phone { color: #25e5a1; }
.task-calendar { color: #ffbd3c; }
.task-note { color: #5cb0ff; }

.assistant-task-content { min-width: 0; }

.assistant-task-content strong {
    display: block;
    overflow: hidden;
    color: #f0f6ff;
    font-size: clamp(16px, 4vw, 23px);
    font-weight: 400;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assistant-task-content small {
    display: block;
    margin-top: 5px;
    color: #8da9d0;
    font-size: clamp(13px, 3.2vw, 18px);
}

.assistant-task-menu {
    color: #a5c9fb;
    font-size: 17px;
    letter-spacing: 2px;
    text-align: right;
}

.assistant-empty-state {
    position: relative;
    z-index: 2;
    margin: 22px auto 0;
    color: #7f9bc3;
    font-size: 14px;
    text-align: center;
}

.assistant-empty-state[hidden] { display: none; }

.assistant-composer {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px 64px;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 760px;
    margin: auto auto 0;
    padding-top: 28px;
}

.assistant-voice-btn,
.assistant-send-btn {
    display: grid;
    place-items: center;
    border: 1px solid rgba(86, 159, 236, 0.78);
    color: #dcecff;
    cursor: pointer;
}

.assistant-composer textarea {
    width: 100%;
    min-height: 54px;
    max-height: 100px;
    resize: none;
    overflow-y: auto;
    padding: 14px 18px;
    border: 1px solid rgba(71, 142, 218, 0.82);
    border-radius: 30px;
    outline: none;
    background: rgba(4, 20, 39, 0.85);
    color: #eaf3ff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.35;
    user-select: text;
    box-shadow: inset 0 0 18px rgba(32, 113, 226, 0.1);
}

.assistant-composer textarea::placeholder { color: #8ca6ca; opacity: 1; }
.assistant-composer textarea:focus { border-color: #72b6ff; box-shadow: 0 0 12px rgba(53, 143, 255, 0.38); }

.assistant-voice-btn {
    width: 42px;
    height: 42px;
    border-color: transparent;
    border-radius: 50%;
    background: transparent;
}

.assistant-voice-btn svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.assistant-voice-btn.is-listening { color: #43e4af; filter: drop-shadow(0 0 8px #20d89e); }

.assistant-send-btn {
    width: 64px;
    height: 64px;
    border: 1px solid #62bdff;
    border-radius: 50%;
    background: linear-gradient(145deg, #087fe2, #0751bd);
    box-shadow: 0 0 20px rgba(32, 137, 255, 0.86), inset 0 0 13px rgba(134, 211, 255, 0.35);
}

.assistant-send-btn svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.assistant-send-btn:hover,
.assistant-send-btn:focus-visible { background: linear-gradient(145deg, #1995f1, #1165d5); outline: none; }

@media (max-width: 520px) {
    .assistant-screen { min-height: calc(100vh - 28px); padding: 20px 12px 14px; }
    .assistant-screen::before { top: 12%; right: -62%; width: 120%; }
    .assistant-screen-intro { margin: 18px 0 21px; }
    .assistant-screen-intro h2 { margin-bottom: 13px; font-size: 35px; }
    .assistant-screen-status { margin-bottom: 13px; font-size: 13px; }
    .assistant-screen-intro p { font-size: 18px; }
    .assistant-task-list { border-radius: 16px; }
    .assistant-task-row { grid-template-columns: 46px minmax(0, 1fr) 24px; gap: 11px; min-height: 76px; margin: 0 10px; }
    .assistant-task-icon { width: 40px; height: 40px; border-radius: 11px; }
    .assistant-task-icon svg { width: 25px; height: 25px; }
    .assistant-task-content strong { font-size: 15px; }
    .assistant-task-content small { margin-top: 3px; font-size: 12px; }
    .assistant-task-menu { font-size: 13px; letter-spacing: 1px; }
    .assistant-composer { grid-template-columns: minmax(0, 1fr) 34px 54px; gap: 5px; padding-top: 20px; }
    .assistant-composer textarea { min-height: 46px; padding: 11px 14px; font-size: 14px; }
    .assistant-voice-btn { width: 34px; height: 34px; }
    .assistant-voice-btn svg { width: 23px; height: 23px; }
    .assistant-send-btn { width: 54px; height: 54px; }
    .assistant-send-btn svg { width: 27px; height: 27px; }
}

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

/* The assistant workspace keeps the reference's dark space background in both themes. */
[data-theme="light"] .assistant-screen {
    background: #010812 !important;
    color: #e9f2ff !important;
    border-color: rgba(43, 104, 168, 0.62) !important;
}

[data-theme="light"] .assistant-screen-intro h2 { color: #f4f8ff !important; }
[data-theme="light"] .assistant-nexus-back { color: #dceaff !important; }
[data-theme="light"] .assistant-screen-intro p { color: #b8cbe5 !important; }
[data-theme="light"] .assistant-task-list { background: rgba(1, 12, 27, 0.54) !important; }
[data-theme="light"] .assistant-task-content strong { color: #f0f6ff !important; }
[data-theme="light"] .assistant-task-content small { color: #8da9d0 !important; }
[data-theme="light"] .assistant-composer textarea { background: rgba(4, 20, 39, 0.85) !important; color: #eaf3ff !important; }

/* Task overflow menu */
.assistant-task-menu-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}

.assistant-task-menu {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #a5c9fb;
    font: inherit;
    font-size: 17px;
    letter-spacing: 2px;
    line-height: 1;
    cursor: pointer;
}

.assistant-task-menu:hover,
.assistant-task-menu:focus-visible { background: rgba(83, 148, 224, 0.18); outline: none; }

.assistant-task-actions {
    position: absolute;
    top: calc(50% + 17px);
    right: 0;
    z-index: 5;
    display: grid;
    min-width: 132px;
    padding: 5px;
    border: 1px solid rgba(95, 158, 231, 0.82);
    border-radius: 10px;
    background: #0a1b30;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), 0 0 12px rgba(42, 134, 255, 0.28);
}

.assistant-task-actions[hidden] { display: none; }

.assistant-task-actions button {
    padding: 8px 10px;
    border: 0;
    background: transparent;
    color: #dceaff;
    font: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}

.assistant-task-actions button:hover,
.assistant-task-actions button:focus-visible { background: rgba(76, 143, 226, 0.22); outline: none; }
.assistant-task-actions button[data-task-delete] { color: #ff9daa; }

/* Keep the planet's glow and grid while removing the dotted screen overlay. */
.assistant-screen::before {
    background:
        radial-gradient(circle at 66% 28%, rgba(10, 30, 56, 0.08), rgba(1, 7, 16, 0.8) 59%, #00040a 74%),
        repeating-radial-gradient(ellipse at 38% 52%, transparent 0 22px, rgba(58, 123, 212, 0.17) 23px 24px),
        repeating-linear-gradient(118deg, transparent 0 19px, rgba(53, 130, 238, 0.16) 20px 21px);
}

@media (max-width: 520px) {
    .assistant-task-actions { min-width: 118px; }
    .assistant-task-actions button { padding: 7px 8px; font-size: 11px; }
}