:root {
    --bg: #07080d;
    --panel: rgba(13,15,24,.80);
    --panel-border: rgba(255,255,255,.08);
    --text: #f3f5f7;
    --muted: #8e95a5;
    --accent: #ff315f;
    --accent-strong: #ff174f;
    --success: #5ee8a1;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 50% 25%, rgba(98,24,65,.28), transparent 35%),
        radial-gradient(circle at 75% 65%, rgba(30,23,66,.22), transparent 30%),
        var(--bg);
}

body { min-height: 100vh; }
button, input { font: inherit; }

/* Login */
.login-page { display:grid; place-items:center; padding:24px; }
.login-shell { width:min(420px,100%); text-align:center; }
.brand { margin-bottom:28px; }
.brand-name { font-size:24px; letter-spacing:.7em; margin-left:.7em; font-weight:600; }
.brand-subtitle { margin-top:10px; font-size:10px; letter-spacing:.26em; color:var(--accent); }

.login-card {
    border:1px solid var(--panel-border);
    background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
    backdrop-filter:blur(18px);
    border-radius:24px;
    padding:34px;
    box-shadow:0 25px 80px rgba(0,0,0,.45);
}

.login-card h1 { font-size:22px; margin:18px 0 6px; }
.login-card p { color:var(--muted); margin:0 0 26px; font-size:14px; }
.login-card label { display:block; text-align:left; color:#b9bfca; margin:15px 0 7px; font-size:12px; text-transform:uppercase; }

.login-card input {
    width:100%; height:48px; border:1px solid rgba(255,255,255,.1);
    border-radius:12px; background:rgba(255,255,255,.045); color:white;
    padding:0 14px; outline:none;
}

.login-card button {
    margin-top:22px; width:100%; height:48px; border:0; border-radius:12px;
    cursor:pointer; color:white; font-weight:700; letter-spacing:.12em;
    background:linear-gradient(135deg,#d91749,#ff315f);
}

.error-box { padding:11px 12px; background:rgba(255,102,127,.10); color:#ffc2cc; border-radius:10px; }
.mini-orb { width:42px; height:42px; margin:auto; border-radius:50%; background:radial-gradient(circle,white 0 4%,#ff5b7f 5% 15%,#ff174f 20% 38%,transparent 70%); box-shadow:0 0 25px rgba(255,23,79,.5); }
.login-shell footer { color:#626977; font-size:11px; margin-top:18px; }

/* App */
#app { min-height:100vh; display:flex; flex-direction:column; }

.topbar {
    display:flex; justify-content:space-between; align-items:flex-start;
    padding:28px clamp(20px,4vw,64px); position:relative; z-index:10;
}

.alfred-logo { letter-spacing:.65em; margin-left:.65em; font-weight:650; font-size:18px; }
.system-status { margin-top:10px; color:var(--accent); font-size:9px; letter-spacing:.18em; }
.status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:8px; background:var(--success); box-shadow:0 0 10px var(--success); }

.top-actions { display:flex; align-items:center; gap:10px; }
.user-name { color:var(--muted); font-size:12px; }

.ghost-button {
    border:1px solid rgba(255,255,255,.12);
    color:#ddd; background:rgba(255,255,255,.035);
    padding:9px 14px; border-radius:10px; cursor:pointer;
}

.main-stage {
    flex:1; width:min(1180px,calc(100% - 36px)); margin:0 auto;
    display:grid; grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);
    gap:clamp(24px,4vw,60px); align-items:center; padding:20px 0 45px;
}

.orb-area { display:grid; place-items:center; min-height:560px; }

.orb {
    width:min(430px,70vw); aspect-ratio:1; position:relative; border-radius:50%;
    display:grid; place-items:center; filter:drop-shadow(0 0 40px rgba(255,23,79,.18));
}

.orb::before,.orb::after {
    content:""; position:absolute; border-radius:50%; border:1px solid rgba(255,49,95,.30);
}
.orb::before { inset:13%; animation:spin 15s linear infinite; }
.orb::after { inset:19%; animation:spinReverse 11s linear infinite; }

.orb-ring { position:absolute; border-radius:50%; border:1px solid rgba(255,49,95,.30); }
.ring-1 { inset:9%; animation:wobble 7s ease-in-out infinite; }
.ring-2 { inset:17%; animation:wobble 9s ease-in-out infinite reverse; }
.ring-3 { inset:24%; border-color:rgba(255,49,95,.42); animation:pulseRing 3.2s ease-in-out infinite; }

.orb-grid {
    position:absolute; inset:28%; border-radius:50%;
    background:
      repeating-radial-gradient(circle,transparent 0 13px,rgba(255,49,95,.16) 14px,transparent 15px),
      repeating-linear-gradient(90deg,transparent 0 19px,rgba(255,49,95,.10) 20px,transparent 21px);
    mask-image:radial-gradient(circle,black 35%,transparent 72%);
    animation:spin 22s linear infinite;
}

.orb-core {
    width:88px; height:88px; border-radius:50%;
    background:radial-gradient(circle,white 0 6%,#ffd5df 7% 9%,#ff315f 13% 35%,rgba(255,23,79,.6) 45%,rgba(255,23,79,.08) 68%,transparent 72%);
    box-shadow:0 0 35px rgba(255,49,95,.95),0 0 80px rgba(255,23,79,.52),0 0 150px rgba(255,23,79,.28);
    animation:corePulse 2.8s ease-in-out infinite;
}

.orb.connected { filter:drop-shadow(0 0 55px rgba(94,232,161,.15)); }
.orb.listening .orb-core { animation:listeningPulse .55s ease-in-out infinite alternate; }
.orb.processing .orb-core { animation-duration:.7s; }
.orb.processing::before { animation-duration:2.2s; }
.orb.processing::after { animation-duration:1.6s; }
.orb.speaking .orb-core { animation:speakingPulse .32s ease-in-out infinite alternate; }

.state-text { margin-top:-68px; color:var(--accent); font-size:10px; letter-spacing:.22em; }

.voice-actions {
    display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:-22px;
}

.main-mic-button {
    border:1px solid rgba(255,49,95,.34);
    background:rgba(255,49,95,.07); color:#e9eaf0;
    border-radius:999px; padding:11px 16px; cursor:pointer;
}
.main-mic-button.primary { background:rgba(255,49,95,.18); }
.main-mic-button:disabled { opacity:.4; cursor:not-allowed; }

.conversation-panel {
    align-self:center; border:1px solid var(--panel-border); background:var(--panel);
    backdrop-filter:blur(18px); border-radius:22px; overflow:hidden;
    box-shadow:0 24px 80px rgba(0,0,0,.38);
}

.voice-badge-row {
    display:flex; justify-content:space-between; gap:10px;
    padding:11px 16px; border-bottom:1px solid var(--panel-border);
    font-size:9px; letter-spacing:.12em;
}

.realtime-badge.offline { color:#737987; }
.realtime-badge.online { color:var(--success); text-shadow:0 0 10px rgba(94,232,161,.35); }
.voice-name { color:#707684; }

.conversation { height:390px; overflow-y:auto; padding:20px; }
.message { margin-bottom:18px; }
.speaker { display:block; font-size:9px; letter-spacing:.18em; color:var(--accent); margin-bottom:5px; }
.message p { margin:0; line-height:1.5; color:#d9dde5; font-size:14px; white-space:pre-wrap; }
.user-message { text-align:right; }
.user-message .speaker { color:#8e95a5; }

.chat-form { display:flex; gap:9px; padding:12px; border-top:1px solid var(--panel-border); }
.chat-form input { flex:1; min-width:0; height:46px; border-radius:12px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.045); color:white; padding:0 13px; outline:none; }
.chat-form button { height:46px; padding:0 18px; border:0; border-radius:12px; background:var(--accent-strong); color:white; font-weight:650; cursor:pointer; }

.control-row { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--panel-border); }
.control-button { border:0; border-right:1px solid var(--panel-border); background:transparent; color:#707684; padding:13px; cursor:pointer; }
.control-button.active { color:#fff; }

.system-footer { display:flex; justify-content:center; flex-wrap:wrap; gap:26px; padding:18px 20px; color:#555c69; font-size:9px; letter-spacing:.14em; }

@keyframes spin { to { transform:rotate(360deg); } }
@keyframes spinReverse { to { transform:rotate(-360deg); } }
@keyframes pulseRing { 0%,100%{transform:scale(.94);opacity:.35} 50%{transform:scale(1.08);opacity:.8} }
@keyframes corePulse { 0%,100%{transform:scale(.92);filter:brightness(.9)} 50%{transform:scale(1.06);filter:brightness(1.2)} }
@keyframes listeningPulse { from{transform:scale(.90);filter:brightness(1)} to{transform:scale(1.22);filter:brightness(1.5)} }
@keyframes speakingPulse { from{transform:scale(.90)} to{transform:scale(1.22);filter:brightness(1.5)} }
@keyframes wobble { 0%,100%{transform:rotateX(72deg) rotateZ(-8deg) scale(.94)} 50%{transform:rotateX(58deg) rotateZ(14deg) scale(1.04)} }

@media(max-width:860px) {
    .topbar { padding:22px 18px; gap:15px; }
    .main-stage { grid-template-columns:1fr; padding-top:0; }
    .orb-area { min-height:470px; }
    .orb { width:min(330px,78vw); }
    .state-text { margin-top:-42px; }
    .voice-actions { margin-top:-5px; }
    .conversation { height:320px; }
}

@media(max-width:620px) {
    .alfred-logo { font-size:14px; }
    .user-name { display:none; }
    .top-actions { gap:6px; }
    .ghost-button { padding:8px 10px; font-size:11px; }
    .voice-actions { max-width:330px; }
}