:root {
    --bg: #020712;
    --bg-elevated: #06101f;
    --surface: #071629;
    --surface-2: #0a1b31;
    --surface-3: #0d2340;
    --surface-soft: rgba(79, 173, 255, .055);
    --text: #f7fbff;
    --text-soft: #d9e8f7;
    --muted: #91a8bf;
    --muted-2: #67829e;
    --gold: #f0b33d;
    --gold-bright: #ffd67a;
    --gold-soft: rgba(240, 179, 61, .13);
    --cyan: #18d8ff;
    --cyan-2: #1592ff;
    --blue: #0868ff;
    --blue-soft: rgba(21, 146, 255, .14);
    --border: rgba(122, 186, 255, .12);
    --border-strong: rgba(122, 186, 255, .24);
    --border-gold: rgba(240, 179, 61, .34);
    --danger: #ff7f91;
    --success: #4be0ad;
    --shadow-1: 0 16px 44px rgba(0, 6, 20, .34);
    --shadow-2: 0 28px 90px rgba(0, 4, 18, .54);
    --focus: 0 0 0 3px rgba(24, 216, 255, .22);
    --header-h: 76px;
}

html {
    background: #020712;
}

body {
    position: relative;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 14% 2%, rgba(24, 216, 255, .12), transparent 30rem),
        radial-gradient(circle at 84% 8%, rgba(8, 104, 255, .14), transparent 34rem),
        radial-gradient(circle at 50% 105%, rgba(240, 179, 61, .07), transparent 28rem),
        linear-gradient(180deg, #031020 0%, #020712 48%, #01050d 100%);
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -2;
}

body::before {
    opacity: .42;
    background-image:
        radial-gradient(circle at 8% 18%, rgba(255,255,255,.65) 0 1px, transparent 1.3px),
        radial-gradient(circle at 22% 72%, rgba(24,216,255,.58) 0 1px, transparent 1.3px),
        radial-gradient(circle at 44% 22%, rgba(255,255,255,.52) 0 1px, transparent 1.3px),
        radial-gradient(circle at 68% 70%, rgba(240,179,61,.55) 0 1px, transparent 1.3px),
        radial-gradient(circle at 82% 30%, rgba(24,216,255,.55) 0 1px, transparent 1.3px),
        radial-gradient(circle at 94% 84%, rgba(255,255,255,.48) 0 1px, transparent 1.3px);
    background-size: 320px 260px, 420px 360px, 360px 310px, 500px 390px, 460px 330px, 380px 420px;
}

body::after {
    z-index: -1;
    background:
        linear-gradient(115deg, transparent 0 43%, rgba(24,216,255,.035) 47%, transparent 52%),
        linear-gradient(75deg, transparent 0 54%, rgba(240,179,61,.025) 59%, transparent 64%);
    mask-image: linear-gradient(to bottom, #000, transparent 85%);
}

::selection {
    background: rgba(24, 216, 255, .25);
    color: #fff;
}

.app-header {
    height: var(--header-h);
    padding: 0 clamp(18px, 3vw, 42px);
    grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr);
    border-bottom: 1px solid rgba(49, 154, 255, .16);
    background: linear-gradient(180deg, rgba(2, 13, 29, .94), rgba(3, 11, 24, .84));
    box-shadow: 0 16px 44px rgba(0, 5, 18, .22), inset 0 -1px 0 rgba(240,179,61,.035);
    backdrop-filter: blur(22px) saturate(145%);
}

.chat-brand {
    gap: 11px;
    min-width: 0;
}

.brand-lockup {
    display: grid;
    line-height: 1;
    min-width: 0;
}

.brand-wordmark {
    font-size: 22px;
    font-weight: 900;
    font-style: italic;
    letter-spacing: -.055em;
    color: #fff;
    text-shadow: 0 0 18px rgba(24,216,255,.12);
}

.brand-a {
    color: var(--gold-bright);
    display: inline-block;
    transform: skewX(-5deg);
}

.brand-tagline {
    margin-top: 5px;
    color: #7fa1c2;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    white-space: nowrap;
}

.main-nav {
    gap: 4px;
}

.nav-link {
    position: relative;
    height: 42px;
    padding: 0 13px;
    border: 1px solid transparent;
    color: #87a0ba;
    border-radius: 12px;
    font-weight: 720;
    transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}

.nav-link:hover {
    color: #fff;
    background: rgba(24,216,255,.055);
    border-color: rgba(24,216,255,.10);
    transform: translateY(-1px);
}

.nav-link.is-active {
    color: #fff;
    background: linear-gradient(180deg, rgba(10,107,255,.22), rgba(24,216,255,.07));
    border-color: rgba(24,216,255,.18);
    box-shadow: inset 0 -1px 0 rgba(24,216,255,.28), 0 8px 22px rgba(4,73,180,.12);
}

.nav-link.is-active::after {
    width: 30px;
    height: 2px;
    bottom: -18px;
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--cyan), var(--gold), transparent);
    box-shadow: 0 0 12px rgba(24,216,255,.65);
}

.header-status {
    gap: 9px;
    color: #718da8;
}

.header-ai-badge,
.header-user {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(122,186,255,.12);
    background: rgba(7, 24, 45, .62);
}

.header-user {
    color: #b9d0e6;
}

.status-pulse {
    background: var(--cyan);
    box-shadow: 0 0 0 4px rgba(24,216,255,.09), 0 0 16px rgba(24,216,255,.55);
}

.app-main {
    position: relative;
}

.eyebrow {
    color: var(--gold-bright);
    text-shadow: 0 0 14px rgba(240,179,61,.16);
}

.btn,
.icon-button,
.send-button,
.attachment-button,
.voice-button,
.prompt-card,
.select-control,
input,
textarea,
select {
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.btn-primary,
.send-button {
    color: #fff;
    background: linear-gradient(135deg, #0876ff 0%, #12bfff 62%, #1adfff 100%);
    border-color: rgba(86,218,255,.58);
    box-shadow: 0 10px 28px rgba(6,110,255,.25), inset 0 1px 0 rgba(255,255,255,.22);
}

.btn-primary:hover,
.send-button:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.07);
    box-shadow: 0 14px 34px rgba(6,110,255,.34), 0 0 24px rgba(24,216,255,.12), inset 0 1px 0 rgba(255,255,255,.25);
}

.btn-secondary {
    color: #c9d9e8;
    background: linear-gradient(180deg, rgba(16,47,80,.72), rgba(7,25,45,.72));
    border-color: rgba(93,177,255,.17);
}

.btn-secondary:hover,
.btn-ghost:hover,
.icon-button:hover {
    color: #fff;
    border-color: rgba(24,216,255,.22);
    background: rgba(24,216,255,.07);
}

.count-badge {
    color: #ffe29b;
    background: linear-gradient(180deg, rgba(240,179,61,.18), rgba(240,179,61,.08));
    border-color: rgba(240,179,61,.35);
}

.select-control,
input:not([type="checkbox"]):not([type="radio"]),
textarea {
    color: #f7fbff;
    background: linear-gradient(180deg, rgba(5,22,42,.94), rgba(4,16,31,.94));
    border-color: rgba(104,177,245,.16);
}

.select-control:hover,
input:not([type="checkbox"]):not([type="radio"]):hover,
textarea:hover {
    border-color: rgba(24,216,255,.28);
}

.select-control:focus,
input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus {
    border-color: rgba(24,216,255,.48);
    box-shadow: 0 0 0 3px rgba(24,216,255,.08), 0 0 22px rgba(24,216,255,.05);
}

.persona-toolbar {
    background: linear-gradient(180deg, rgba(7,27,51,.90), rgba(4,18,35,.88));
    border-color: rgba(71,161,245,.18);
    box-shadow: 0 18px 48px rgba(0,5,20,.30), inset 0 1px 0 rgba(255,255,255,.025);
}

.privacy-status {
    border-color: rgba(24,216,255,.11);
    background: rgba(5,21,40,.55);
}

.privacy-status-dot {
    background: var(--cyan);
    box-shadow: 0 0 12px rgba(24,216,255,.55);
}

.conversation-shell {
    position: relative;
    border-color: rgba(73,162,245,.18);
    background:
        radial-gradient(circle at 50% 0%, rgba(8,104,255,.065), transparent 28rem),
        linear-gradient(180deg, rgba(5,19,37,.90), rgba(2,10,22,.92));
    box-shadow: 0 30px 100px rgba(0,4,18,.38), inset 0 1px 0 rgba(255,255,255,.025);
}

.conversation-shell::before {
    content: "";
    position: absolute;
    inset: 0 12% auto;
    height: 1px;
    z-index: 2;
    background: linear-gradient(90deg, transparent, rgba(24,216,255,.5), rgba(240,179,61,.48), transparent);
    box-shadow: 0 0 18px rgba(24,216,255,.18);
}

.conversation-topline {
    background: linear-gradient(180deg, rgba(13,40,69,.34), rgba(3,15,29,.18));
    border-color: rgba(88,160,226,.11);
}

.chat-feed {
    scrollbar-color: rgba(32,154,255,.30) transparent;
}

.popover,
.attachment-menu {
    background: linear-gradient(180deg, rgba(9,31,56,.98), rgba(4,17,32,.98));
    border-color: rgba(88,170,246,.22);
    box-shadow: 0 28px 80px rgba(0,4,18,.58), 0 0 0 1px rgba(24,216,255,.025) inset;
}

.mini-avatar,
.thinking-avatar,
.persona-list-avatar {
    color: #dff8ff;
    background: linear-gradient(145deg, rgba(8,104,255,.22), rgba(24,216,255,.08));
    border-color: rgba(24,216,255,.24);
    box-shadow: 0 0 18px rgba(24,216,255,.06);
}

.switch-ui {
    background: #10263d;
    border-color: rgba(121,181,238,.18);
}

.switch-control input:checked + .switch-ui,
.toggle-card input:checked + .switch-ui {
    background: linear-gradient(90deg, rgba(8,104,255,.72), rgba(24,216,255,.55));
    border-color: rgba(24,216,255,.42);
    box-shadow: 0 0 18px rgba(24,216,255,.12);
}

.switch-control input:checked + .switch-ui::after,
.toggle-card input:checked + .switch-ui::after {
    background: #fff;
    box-shadow: 0 0 12px rgba(24,216,255,.48);
}

.composer {
    background: linear-gradient(180deg, rgba(7,29,54,.96), rgba(3,16,31,.96));
    border-color: rgba(83,171,252,.18);
    box-shadow: 0 14px 40px rgba(0,5,18,.26), inset 0 1px 0 rgba(255,255,255,.025);
}

.composer:focus-within {
    border-color: rgba(24,216,255,.36);
    box-shadow: 0 16px 46px rgba(0,5,18,.32), 0 0 0 3px rgba(24,216,255,.055);
}

.file-drop-overlay {
    background: rgba(1,8,18,.86);
    border-color: rgba(24,216,255,.55);
}

.file-drop-overlay > div {
    background: linear-gradient(180deg, #0a2849, #06162a);
    border-color: rgba(24,216,255,.28);
}

/* ---------- Code-built robot: no raster artwork ---------- */
.chatbot-robot {
    --robot-scale: 1;
    --robot-tilt-x: 0deg;
    --robot-tilt-y: 0deg;
    position: relative;
    width: calc(158px * var(--robot-scale));
    height: calc(172px * var(--robot-scale));
    flex: 0 0 auto;
    transform-style: preserve-3d;
    filter: drop-shadow(0 24px 28px rgba(0,5,20,.44));
}

.chatbot-robot--brand {
    --robot-scale: .27;
    width: 44px;
    height: 48px;
    margin: -4px 0;
}

.chatbot-robot--hero {
    --robot-scale: 1.55;
    width: 245px;
    height: 267px;
    animation: robotFloat 4.8s ease-in-out infinite;
    transform: perspective(700px) rotateX(var(--robot-tilt-x)) rotateY(var(--robot-tilt-y));
}

.robot-aura {
    position: absolute;
    left: calc(17px * var(--robot-scale));
    top: calc(15px * var(--robot-scale));
    width: calc(126px * var(--robot-scale));
    height: calc(126px * var(--robot-scale));
    border-radius: 50%;
    border: calc(2px * var(--robot-scale)) solid rgba(24,216,255,.72);
    box-shadow: 0 0 calc(22px * var(--robot-scale)) rgba(24,216,255,.48), inset 0 0 calc(18px * var(--robot-scale)) rgba(8,104,255,.22);
    animation: auraPulse 3.4s ease-in-out infinite;
}

.robot-antenna {
    position: absolute;
    left: calc(76px * var(--robot-scale));
    top: calc(1px * var(--robot-scale));
    width: calc(4px * var(--robot-scale));
    height: calc(27px * var(--robot-scale));
    border-radius: 999px;
    background: linear-gradient(180deg, #ffd46c, #d58a19);
    box-shadow: 0 0 calc(8px * var(--robot-scale)) rgba(240,179,61,.45);
    transform-origin: 50% 100%;
    transform: rotate(7deg);
    animation: antennaWiggle 3.2s ease-in-out infinite;
    z-index: 4;
}

.robot-antenna::before {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(-7px * var(--robot-scale));
    width: calc(12px * var(--robot-scale));
    height: calc(12px * var(--robot-scale));
    border-radius: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle at 38% 30%, #fff5c7 0 12%, #ffd66d 35%, #e49a22 68%, #9a5a0a 100%);
    box-shadow: 0 0 calc(12px * var(--robot-scale)) rgba(240,179,61,.65);
}

.robot-head {
    position: absolute;
    left: calc(23px * var(--robot-scale));
    top: calc(31px * var(--robot-scale));
    width: calc(112px * var(--robot-scale));
    height: calc(91px * var(--robot-scale));
    border-radius: 42% 42% 38% 38% / 43% 43% 48% 48%;
    background: linear-gradient(145deg, #f9fcff 0%, #b9cbe0 48%, #f5faff 74%, #8da8c5 100%);
    box-shadow:
        inset 0 calc(3px * var(--robot-scale)) calc(8px * var(--robot-scale)) rgba(255,255,255,.9),
        inset 0 calc(-5px * var(--robot-scale)) calc(10px * var(--robot-scale)) rgba(38,73,111,.26),
        0 calc(10px * var(--robot-scale)) calc(18px * var(--robot-scale)) rgba(0,4,16,.38);
    z-index: 3;
}

.robot-head::after {
    content: "";
    position: absolute;
    left: calc(13px * var(--robot-scale));
    top: calc(13px * var(--robot-scale));
    width: calc(86px * var(--robot-scale));
    height: calc(59px * var(--robot-scale));
    border-radius: 42% 42% 38% 38% / 46% 46% 42% 42%;
    background:
        radial-gradient(circle at 50% 20%, rgba(30,96,168,.18), transparent 38%),
        linear-gradient(160deg, #06172d 0%, #020a15 74%);
    border: calc(2px * var(--robot-scale)) solid rgba(9,68,122,.62);
    box-shadow: inset 0 0 calc(15px * var(--robot-scale)) rgba(9,86,158,.36), 0 0 calc(8px * var(--robot-scale)) rgba(24,216,255,.18);
}

.robot-ear {
    position: absolute;
    top: calc(30px * var(--robot-scale));
    width: calc(13px * var(--robot-scale));
    height: calc(38px * var(--robot-scale));
    border-radius: 999px;
    background: linear-gradient(90deg, #f0b33d, #ffd77a 45%, #c37812);
    box-shadow: 0 0 calc(9px * var(--robot-scale)) rgba(240,179,61,.26), inset 0 0 calc(4px * var(--robot-scale)) rgba(255,255,255,.65);
    z-index: 5;
}

.robot-ear--left { left: calc(-4px * var(--robot-scale)); }
.robot-ear--right { right: calc(-4px * var(--robot-scale)); transform: scaleX(-1); }

.robot-eye {
    position: absolute;
    top: calc(38px * var(--robot-scale));
    width: calc(21px * var(--robot-scale));
    height: calc(11px * var(--robot-scale));
    border-radius: 50% 50% 42% 42%;
    border-top: calc(4px * var(--robot-scale)) solid #19ddff;
    filter: drop-shadow(0 0 calc(4px * var(--robot-scale)) #0baaff);
    z-index: 7;
    animation: robotBlink 5.6s infinite;
}

.robot-eye--left { left: calc(28px * var(--robot-scale)); transform: rotate(8deg); }
.robot-eye--right { right: calc(28px * var(--robot-scale)); transform: rotate(-8deg); }

.robot-smile {
    position: absolute;
    left: calc(47px * var(--robot-scale));
    top: calc(61px * var(--robot-scale));
    width: calc(20px * var(--robot-scale));
    height: calc(10px * var(--robot-scale));
    border-bottom: calc(3px * var(--robot-scale)) solid #1ce2ff;
    border-radius: 0 0 999px 999px;
    filter: drop-shadow(0 0 calc(4px * var(--robot-scale)) #0baaff);
    z-index: 7;
}

.robot-body {
    position: absolute;
    left: calc(49px * var(--robot-scale));
    top: calc(111px * var(--robot-scale));
    width: calc(62px * var(--robot-scale));
    height: calc(50px * var(--robot-scale));
    border-radius: 34% 34% 48% 48%;
    background: linear-gradient(145deg, #edf5fc, #8faac7 58%, #dcebf6 100%);
    box-shadow: inset 0 calc(2px * var(--robot-scale)) calc(4px * var(--robot-scale)) rgba(255,255,255,.65), 0 calc(8px * var(--robot-scale)) calc(15px * var(--robot-scale)) rgba(0,4,16,.32);
    z-index: 2;
}

.robot-body::before,
.robot-body::after {
    content: "";
    position: absolute;
    top: calc(11px * var(--robot-scale));
    width: calc(17px * var(--robot-scale));
    height: calc(36px * var(--robot-scale));
    border-radius: 999px;
    background: linear-gradient(180deg, #eaf5fc, #90abc7);
    z-index: -1;
}

.robot-body::before { left: calc(-12px * var(--robot-scale)); transform: rotate(22deg); }
.robot-body::after { right: calc(-12px * var(--robot-scale)); transform: rotate(-22deg); }

.robot-panel {
    position: absolute;
    left: calc(9px * var(--robot-scale));
    top: calc(11px * var(--robot-scale));
    width: calc(44px * var(--robot-scale));
    height: calc(24px * var(--robot-scale));
    border-radius: calc(10px * var(--robot-scale));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(5px * var(--robot-scale));
    background: linear-gradient(180deg, #07162a, #020a14);
    border: calc(1px * var(--robot-scale)) solid rgba(240,179,61,.65);
    box-shadow: 0 0 calc(9px * var(--robot-scale)) rgba(240,179,61,.18);
}

.robot-panel i {
    width: calc(6px * var(--robot-scale));
    height: calc(6px * var(--robot-scale));
    border-radius: 50%;
    background: #ffc54d;
    box-shadow: 0 0 calc(5px * var(--robot-scale)) rgba(240,179,61,.8);
    animation: panelPulse 2.2s ease-in-out infinite;
}

.robot-panel i:nth-child(2) { animation-delay: .22s; }
.robot-panel i:nth-child(3) { animation-delay: .44s; }

.robot-chat-tail {
    position: absolute;
    left: calc(40px * var(--robot-scale));
    top: calc(102px * var(--robot-scale));
    width: calc(25px * var(--robot-scale));
    height: calc(28px * var(--robot-scale));
    background: linear-gradient(145deg, #edf5fc, #9cb5d0);
    clip-path: polygon(15% 0, 100% 0, 0 100%);
    z-index: 1;
}

.chatbot-robot--brand .robot-panel,
.chatbot-robot--brand .robot-body::before,
.chatbot-robot--brand .robot-body::after {
    display: none;
}

/* ---------- Home / empty chat hero ---------- */
.empty-state {
    width: min(1020px, 100%);
    margin: clamp(16px, 4vh, 42px) auto 0;
    text-align: left;
}

.chat-welcome {
    display: grid;
    grid-template-columns: minmax(260px, .85fr) minmax(360px, 1.15fr);
    align-items: center;
    gap: clamp(28px, 5vw, 70px);
}

.chat-welcome-visual {
    position: relative;
    min-height: 300px;
    display: grid;
    place-items: center;
    isolation: isolate;
}

.chat-welcome-visual::before {
    content: "";
    position: absolute;
    width: 290px;
    height: 290px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(8,104,255,.24), rgba(24,216,255,.07) 46%, transparent 69%);
    filter: blur(3px);
    z-index: -2;
    animation: heroGlow 5s ease-in-out infinite;
}

.chat-welcome-visual::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 90px;
    bottom: 20px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(10,121,255,.20), transparent 65%);
    filter: blur(12px);
    z-index: -1;
}

.robot-orbit-bubble {
    position: absolute;
    min-width: 48px;
    height: 42px;
    padding: 0 13px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #dffaff;
    background: linear-gradient(145deg, rgba(6,103,255,.78), rgba(15,203,255,.42));
    border: 1px solid rgba(91,220,255,.38);
    box-shadow: 0 10px 30px rgba(0,67,181,.26), 0 0 24px rgba(24,216,255,.12);
    font-size: 17px;
    font-weight: 900;
    letter-spacing: .08em;
    animation: bubbleFloat 4.2s ease-in-out infinite;
}

.robot-orbit-bubble::after {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 12px;
    width: 12px;
    height: 12px;
    background: inherit;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.robot-orbit-bubble--chat { left: 1%; top: 25%; }
.robot-orbit-bubble--idea {
    right: 0;
    top: 34%;
    color: #ffe1a0;
    border-color: rgba(240,179,61,.45);
    background: linear-gradient(145deg, rgba(159,91,8,.82), rgba(240,179,61,.38));
    box-shadow: 0 10px 30px rgba(103,54,0,.24), 0 0 24px rgba(240,179,61,.12);
    animation-delay: .9s;
}

.chat-welcome-copy {
    position: relative;
}

.chat-welcome-copy::before {
    content: "";
    position: absolute;
    left: -26px;
    top: 10px;
    width: 2px;
    height: 92px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--cyan), rgba(24,216,255,0));
    box-shadow: 0 0 14px rgba(24,216,255,.24);
}

.chat-welcome-logo {
    margin: 7px 0 8px;
    font-size: clamp(46px, 7vw, 82px);
    line-height: .92;
    font-weight: 950;
    font-style: italic;
    letter-spacing: -.075em;
    color: #fff;
    text-shadow: 0 5px 22px rgba(0,0,0,.30), 0 0 30px rgba(24,216,255,.10);
}

.chat-welcome-logo .brand-a {
    color: var(--gold-bright);
    text-shadow: 0 0 22px rgba(240,179,61,.18);
}

.chat-welcome-title {
    margin: 0;
    color: #e8f3fd;
    font-size: clamp(20px, 2.4vw, 30px);
    font-weight: 450;
    letter-spacing: -.02em;
}

.chat-welcome-rule {
    width: min(330px, 80%);
    height: 2px;
    margin: 16px 0 18px;
    background: linear-gradient(90deg, var(--gold), rgba(240,179,61,.25), transparent);
    box-shadow: 0 0 14px rgba(240,179,61,.12);
}

.empty-state .chat-welcome-copy > p {
    margin: 0;
    max-width: 590px;
    color: #8fa8c1;
    font-size: 14px;
    line-height: 1.7;
}

.welcome-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.welcome-pill {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(98,177,251,.15);
    background: rgba(7,29,52,.56);
    color: #a9c1d8;
    font-size: 11px;
    font-weight: 750;
}

.prompt-grid {
    margin-top: 30px;
    gap: 12px;
}

.prompt-card {
    position: relative;
    overflow: hidden;
    min-height: 126px;
    background: linear-gradient(155deg, rgba(11,39,68,.82), rgba(4,18,34,.88));
    border-color: rgba(100,177,247,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

.prompt-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, transparent 0 52%, rgba(24,216,255,.045) 62%, transparent 72%);
    transform: translateX(-36%);
    transition: transform .35s ease;
}

.prompt-card:hover {
    border-color: rgba(24,216,255,.30);
    background: linear-gradient(155deg, rgba(12,50,88,.93), rgba(5,23,42,.94));
    box-shadow: 0 14px 34px rgba(0,10,30,.24), 0 0 0 1px rgba(24,216,255,.025) inset;
    transform: translateY(-3px);
}

.prompt-card:hover::before { transform: translateX(34%); }
.prompt-card > span { color: var(--gold-bright); }
.prompt-card strong { color: #eef8ff; }
.prompt-card small { color: #7892ac; }

/* Common page surfaces inherit the same visual language */
.app-main :is(.panel, .card, .config-card, .accounting-card, .prediction-card, .stats-card, .ticket-card, .filter-panel, .dashboard-card) {
    border-color: rgba(89,169,244,.16);
    background-color: rgba(5,21,40,.78);
    box-shadow: 0 18px 52px rgba(0,5,18,.20);
}

.app-main table {
    border-color: rgba(89,169,244,.13);
}

.app-main th {
    color: #94b6d5;
}

.app-main tr:hover td {
    background: rgba(24,216,255,.025);
}

@keyframes robotFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -10px; }
}

@keyframes auraPulse {
    0%, 100% { opacity: .72; transform: scale(.98); }
    50% { opacity: 1; transform: scale(1.04); }
}

@keyframes antennaWiggle {
    0%, 100% { transform: rotate(7deg); }
    50% { transform: rotate(-4deg); }
}

@keyframes robotBlink {
    0%, 45%, 48%, 100% { scale: 1 1; opacity: 1; }
    46%, 47% { scale: 1 .16; opacity: .75; }
}

@keyframes panelPulse {
    0%, 100% { opacity: .45; transform: scale(.82); }
    50% { opacity: 1; transform: scale(1); }
}

@keyframes bubbleFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-8px) rotate(2deg); }
}

@keyframes heroGlow {
    0%, 100% { transform: scale(.96); opacity: .72; }
    50% { transform: scale(1.04); opacity: 1; }
}

@media (max-width: 1180px) {
    .app-header {
        grid-template-columns: auto 1fr auto;
    }
    .brand-tagline,
    .header-ai-badge {
        display: none;
    }
    .main-nav {
        justify-content: center;
    }
    .nav-link {
        padding-inline: 10px;
    }
}

@media (max-width: 900px) {
    :root { --header-h: 68px; }

    .app-header {
        padding-inline: 14px;
    }

    .brand-wordmark { font-size: 18px; }
    .header-user { display: none; }

    .chat-welcome {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .chat-welcome-visual {
        min-height: 220px;
        transform: scale(.78);
        margin: -20px 0 -26px;
    }

    .chat-welcome-copy {
        text-align: center;
    }

    .chat-welcome-copy::before { display: none; }
    .chat-welcome-rule { margin-inline: auto; }
    .empty-state .chat-welcome-copy > p { margin-inline: auto; }
    .welcome-pills { justify-content: center; }
}

@media (max-width: 720px) {
    .app-header {
        grid-template-columns: auto 1fr auto;
    }

    .chatbot-robot--brand {
        --robot-scale: .24;
        width: 38px;
        height: 42px;
    }

    .brand-lockup { display: none; }

    .main-nav {
        overflow-x: auto;
        justify-content: flex-start;
        scrollbar-width: none;
        padding-inline: 4px;
    }

    .main-nav::-webkit-scrollbar { display: none; }

    .nav-link {
        flex: 0 0 auto;
        height: 36px;
        padding-inline: 9px;
        font-size: 11px;
    }

    .nav-link.is-active::after { bottom: -16px; }

    .header-status form .btn {
        min-width: 36px;
        font-size: 0;
    }

    .header-status form .btn::before {
        content: "↪";
        font-size: 16px;
    }

    .chatbot-robot--hero {
        --robot-scale: 1.2;
        width: 190px;
        height: 208px;
    }

    .robot-orbit-bubble--chat { left: 7%; }
    .robot-orbit-bubble--idea { right: 6%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}