* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: #0a0a0f;
    color: #e0e0e0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* ── Start screen ─────────────────────────────────── */
#start-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

#start-screen p {
    font-size: 22px;
    letter-spacing: 6px;
    color: #4a9eff;
    font-weight: 300;
}

#start-btn {
    background: transparent;
    border: 1px solid #4a9eff;
    color: #4a9eff;
    padding: 16px 40px;
    border-radius: 50px;
    font-size: 16px;
    cursor: pointer;
    letter-spacing: 1px;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}
#start-btn:active { background: rgba(74,158,255,0.15); transform: scale(0.97); }

/* ── Main UI ──────────────────────────────────────── */
#main-ui {
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 480px;
    padding: 20px;
    gap: 20px;
}

#orb-container { cursor: pointer; }

#orb {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    transition: all 0.4s ease;
}

#orb.idle {
    background: radial-gradient(circle at 40% 40%, #1a3a5c, #0d1b2a);
    box-shadow: 0 0 40px rgba(30,90,160,0.3), 0 0 80px rgba(30,90,160,0.1);
}
#orb.listening {
    background: radial-gradient(circle at 40% 40%, #2a6cb8, #1a3a5c);
    box-shadow: 0 0 60px rgba(42,108,184,0.7), 0 0 120px rgba(42,108,184,0.2);
    animation: pulse-listen 1.2s ease-in-out infinite;
}
#orb.thinking {
    background: radial-gradient(circle at 40% 40%, #c9a227, #8b6914);
    box-shadow: 0 0 60px rgba(201,162,39,0.5), 0 0 120px rgba(201,162,39,0.15);
    animation: pulse-think 0.8s ease-in-out infinite;
}
#orb.speaking {
    background: radial-gradient(circle at 40% 40%, #27c96a, #148b3d);
    box-shadow: 0 0 60px rgba(39,201,106,0.6), 0 0 120px rgba(39,201,106,0.2);
    animation: pulse-speak 0.5s ease-in-out infinite;
}

@keyframes pulse-listen { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@keyframes pulse-think  { 0%,100%{transform:scale(1)} 50%{transform:scale(1.09)} }
@keyframes pulse-speak  { 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }

#status {
    font-size: 13px;
    color: #555;
    min-height: 18px;
    text-align: center;
}

/* ── PTT button ───────────────────────────────────── */
#ptt-btn {
    background: #1a2a40;
    border: 2px solid #2a6cb8;
    color: #4a9eff;
    padding: 18px 36px;
    border-radius: 50px;
    font-size: 16px;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    width: 100%;
}
#ptt-btn.active, #ptt-btn:active {
    background: #2a6cb8;
    border-color: #4a9eff;
    color: #fff;
    transform: scale(0.97);
    box-shadow: 0 0 30px rgba(42,108,184,0.5);
}

/* ── Transcript ───────────────────────────────────── */
#transcript {
    width: 100%;
    max-height: 35vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}
#transcript .user  { color: #888; font-size: 13px; }
#transcript .jarvis{ color: #4a9eff; font-size: 14px; line-height: 1.5; }

/* ── Text input row ───────────────────────────────── */
#text-row {
    display: flex;
    width: 100%;
    gap: 8px;
}
#text-input {
    flex: 1;
    background: #111;
    border: 1px solid #333;
    border-radius: 8px;
    color: #e0e0e0;
    padding: 12px 14px;
    font-size: 15px;
    outline: none;
}
#text-input:focus { border-color: #2a6cb8; }
#send-btn {
    background: #2a6cb8;
    border: none;
    border-radius: 8px;
    color: #fff;
    padding: 12px 18px;
    font-size: 18px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
#send-btn:active { background: #1a4a80; }

.orb-start {
    width: 120px; height: 120px; border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, #1a3a5c, #0d1b2a);
    box-shadow: 0 0 40px rgba(30,90,160,0.3), 0 0 80px rgba(30,90,160,0.1);
    animation: pulse-listen 2s ease-in-out infinite;
}