/* ════════════════════ VARIABLES ════════════════════ */
        :root {
            --primary: #7C6AFF;
            --primary-light: #A594FF;
            --primary-dark: #5A4BD5;
            --primary-glow: rgba(124,106,255,0.35);
            --danger: #FF6B6B;
            --danger-glow: rgba(255,107,107,0.35);
            --success: #36D399;
            --success-glow: rgba(54,211,153,0.3);
            --accent: #FF8A50;
            --accent-glow: rgba(255,138,80,0.3);
            --cyan: #00D4FF;
            --cyan-glow: rgba(0,212,255,0.3);
            --pink: #FF6BCA;
            --pink-glow: rgba(255,107,202,0.3);
            --gold: #FFD700;
            --bg: #06050F;
            --surface: #0F0D1F;
            --surface2: #181535;
            --surface3: #231F4A;
            --glass: rgba(14,12,30,0.75);
            --glass-border: rgba(124,106,255,0.1);
            --text: #F0EDFF;
            --text-sec: #B8B0D8;
            --text-muted: #6E6890;
            --radius: 18px;
            --radius-sm: 12px;
            --transition: 0.3s cubic-bezier(.4,0,.2,1);
        }

        /* ════════════════════ LIGHT MODE ════════════════════ */
        [data-theme="light"] {
            --bg: #F5F3FF;
            --surface: #FFFFFF;
            --surface2: #EDE9FE;
            --surface3: #DDD6FE;
            --glass: rgba(255,255,255,0.82);
            --glass-border: rgba(124,106,255,0.15);
            --text: #1E1B4B;
            --text-sec: #4C4680;
            --text-muted: #8B83B0;
            --primary-glow: rgba(124,106,255,0.2);
            --danger-glow: rgba(255,107,107,0.2);
            --success-glow: rgba(54,211,153,0.2);
            --accent-glow: rgba(255,138,80,0.2);
            --cyan-glow: rgba(0,180,220,0.2);
            --pink-glow: rgba(255,107,202,0.2);
        }

        /* Hide dark bg in light mode, show light bg */
        [data-theme="light"] .galaxy-bg,
        [data-theme="light"] .aurora,
        [data-theme="light"] .stars-layer,
        [data-theme="light"] .particles { display:none !important }
        [data-theme="light"] .light-bg { display:block !important }
        .light-bg { display:none }

        /* ════════════════════ LIGHT MODE BACKGROUND ════════════════════ */
        .light-bg{
            position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
            background:linear-gradient(135deg,#F5F3FF 0%,#EDE9FE 30%,#FFF1EB 60%,#E0F2FE 100%);
        }
        .light-blob{
            position:absolute;border-radius:50%;filter:blur(80px);
            animation:blobFloat linear infinite;
            mix-blend-mode:multiply;
        }
        .light-blob-1{
            width:420px;height:420px;top:8%;left:10%;
            background:radial-gradient(circle,rgba(124,106,255,.22),rgba(124,106,255,.04));
            animation:blobFloat 22s ease-in-out infinite;
        }
        .light-blob-2{
            width:360px;height:360px;top:55%;right:8%;
            background:radial-gradient(circle,rgba(255,107,202,.18),rgba(255,107,202,.03));
            animation:blobFloat 26s ease-in-out infinite reverse;
        }
        .light-blob-3{
            width:300px;height:300px;bottom:10%;left:35%;
            background:radial-gradient(circle,rgba(0,200,240,.16),rgba(0,200,240,.03));
            animation:blobFloat 30s ease-in-out infinite 4s;
        }
        .light-blob-4{
            width:250px;height:250px;top:30%;right:30%;
            background:radial-gradient(circle,rgba(255,138,80,.14),rgba(255,138,80,.02));
            animation:blobFloat 24s ease-in-out infinite 2s;
        }
        .light-blob-5{
            width:200px;height:200px;top:70%;left:15%;
            background:radial-gradient(circle,rgba(54,211,153,.14),rgba(54,211,153,.02));
            animation:blobFloat 28s ease-in-out infinite 6s;
        }
        @keyframes blobFloat{
            0%,100%{transform:translate(0,0) scale(1)}
            20%{transform:translate(40px,-30px) scale(1.08)}
            40%{transform:translate(-20px,40px) scale(.95)}
            60%{transform:translate(30px,20px) scale(1.05)}
            80%{transform:translate(-40px,-15px) scale(.97)}
        }

        /* Light shimmer lines */
        .light-shimmer{
            position:absolute;width:200%;height:1px;
            background:linear-gradient(90deg,transparent,rgba(124,106,255,.12),rgba(255,107,202,.08),transparent);
            animation:shimmerSlide 8s linear infinite;
        }
        .light-shimmer:nth-child(7){top:25%;animation-delay:0s;transform:rotate(-3deg)}
        .light-shimmer:nth-child(8){top:55%;animation-delay:3s;transform:rotate(2deg)}
        .light-shimmer:nth-child(9){top:78%;animation-delay:6s;transform:rotate(-1.5deg)}
        @keyframes shimmerSlide{
            0%{transform:translateX(-50%) rotate(var(--r,0deg))}
            100%{transform:translateX(0%) rotate(var(--r,0deg))}
        }

        /* Floating bokeh circles for light mode */
        .light-bokeh{
            position:absolute;border-radius:50%;
            border:1.5px solid rgba(124,106,255,.08);
            animation:bokehFloat linear infinite;
        }
        @keyframes bokehFloat{
            0%{transform:translateY(110vh) scale(0);opacity:0}
            10%{opacity:.3}
            90%{opacity:.3}
            100%{transform:translateY(-10vh) scale(1.2);opacity:0}
        }

        /* Light mode overrides for glass elements */
        [data-theme="light"] header{
            background:linear-gradient(180deg,rgba(124,106,255,.06) 0%,rgba(255,255,255,.4) 100%);
            border-bottom:1px solid rgba(124,106,255,.1);
        }
        [data-theme="light"] footer{
            background:linear-gradient(0deg,rgba(124,106,255,.04),rgba(255,255,255,.3));
            border-top:1px solid rgba(124,106,255,.1);
        }
        [data-theme="light"] .chat-frame{
            background:#FFFFFF;
            box-shadow:0 20px 80px rgba(124,106,255,.1),0 1px 3px rgba(0,0,0,.06);
        }
        [data-theme="light"] .chat-mic-area{
            background:#F5F3FF;
        }
        [data-theme="light"] .chat-bubble.bubble-user{
            background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;
        }
        [data-theme="light"] .chat-bubble.bubble-assistant{
            background:rgba(255,255,255,.92);border:1px solid rgba(124,106,255,.1);color:var(--text);
        }
        [data-theme="light"] .chat-bubble.bubble-system{
            background:rgba(237,233,254,.7);border:1px solid rgba(124,106,255,.12);color:var(--text);
        }
        [data-theme="light"] .auth-card{
            background:rgba(255,255,255,.75);border:1px solid rgba(124,106,255,.1);
        }
        [data-theme="light"] .wake-card{
            background:rgba(255,255,255,.75);border:1px solid rgba(124,106,255,.1);
        }
        [data-theme="light"] .notes-panel{
            background:rgba(255,255,255,.9);border-left:1px solid rgba(124,106,255,.1);
        }
        [data-theme="light"] .note-card{
            background:rgba(245,243,255,.8);border:1px solid rgba(124,106,255,.08);
        }
        [data-theme="light"] .text-input-bar input{
            background:var(--surface);border:1px solid rgba(124,106,255,.12);color:var(--text);
        }
        [data-theme="light"] .text-input-bar input:focus{
            border-color:var(--primary);box-shadow:0 0 0 3px rgba(124,106,255,.1);
        }
        [data-theme="light"] .bubble-system.connection-error{
            background:rgba(239,68,68,.06);border:1px dashed rgba(239,68,68,.2);
        }
        [data-theme="light"] .toast{box-shadow:0 16px 48px rgba(0,0,0,.12)}
        [data-theme="light"] .processing-overlay{background:rgba(245,243,255,.88)}
        [data-theme="light"] ::-webkit-scrollbar-thumb{background:var(--surface3)}

        /* ════════════════════ THEME TOGGLE SWITCH ════════════════════ */
        .theme-switch{
            display:flex;align-items:center;gap:8px;cursor:pointer;
            position:absolute;right:20px;top:50%;transform:translateY(-50%);
            user-select:none;
        }
        .theme-switch input{display:none}
        .theme-switch-icon{font-size:1.2rem;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
        .theme-switch-slider{
            position:relative;width:48px;height:26px;border-radius:13px;
            background:var(--surface3);border:2px solid var(--glass-border);
            transition:var(--transition);flex-shrink:0;
        }
        .theme-switch-slider::after{
            content:'';position:absolute;top:2px;left:2px;
            width:18px;height:18px;border-radius:50%;
            background:var(--primary);
            transition:var(--transition);
            box-shadow:0 2px 6px rgba(0,0,0,.2);
        }
        .theme-switch input:checked ~ .theme-switch-slider{
            background:var(--primary-light);border-color:var(--primary);
        }
        .theme-switch input:checked ~ .theme-switch-slider::after{
            transform:translateX(22px);background:#fff;
        }
        .theme-switch-label{
            font-size:.78rem;font-weight:600;color:var(--text-sec);
            min-width:34px;
        }
        .theme-switch:hover .theme-switch-slider{
            border-color:var(--primary);
            box-shadow:0 0 10px var(--primary-glow);
        }

        /* ════════════════════ DEMO CONTACT ════════════════════ */
        .demo-contact{
            margin-top:6px;font-size:.85rem;color:var(--text-sec);
            background:var(--glass);border:1px solid var(--glass-border);
            border-radius:var(--radius-sm);padding:8px 16px;
            display:inline-block;backdrop-filter:blur(10px);
        }
        .demo-contact a{
            color:var(--primary-light);font-weight:600;text-decoration:none;
            transition:var(--transition);
        }
        .demo-contact a:hover{color:var(--primary);text-decoration:underline}

        /* ════════════════════ RESET ════════════════════ */
        *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
        html{scroll-behavior:smooth}

        body {
            font-family:'Inter',system-ui,-apple-system,sans-serif;
            background:var(--bg);
            color:var(--text);
            min-height:100vh;
            display:flex;
            flex-direction:column;
            align-items:center;
            overflow-x:hidden;
        }

        /* ════════════════════ GALAXY BACKGROUND ════════════════════ */
        .galaxy-bg {
            position:fixed;inset:0;z-index:0;pointer-events:none;
            overflow:hidden;
        }
        .galaxy-bg::before {
            content:'';position:absolute;inset:-60%;
            width:220%;height:220%;
            background:
                radial-gradient(ellipse 800px 600px at 15% 20%,rgba(124,106,255,.08) 0%,transparent 60%),
                radial-gradient(ellipse 600px 800px at 85% 75%,rgba(255,107,202,.06) 0%,transparent 55%),
                radial-gradient(ellipse 700px 500px at 50% 50%,rgba(0,212,255,.04) 0%,transparent 65%),
                radial-gradient(ellipse 500px 600px at 30% 80%,rgba(255,138,80,.04) 0%,transparent 50%),
                radial-gradient(ellipse 600px 400px at 75% 15%,rgba(54,211,153,.04) 0%,transparent 55%);
            animation:nebulaFloat 40s ease-in-out infinite;
        }
        .galaxy-bg::after {
            content:'';position:absolute;inset:-30%;
            width:160%;height:160%;
            background:
                radial-gradient(circle 300px at 20% 40%,rgba(124,106,255,.06) 0%,transparent 100%),
                radial-gradient(circle 250px at 80% 60%,rgba(255,107,202,.05) 0%,transparent 100%);
            animation:nebulaFloat2 35s ease-in-out infinite reverse;
        }
        @keyframes nebulaFloat{
            0%,100%{transform:translate(0,0) rotate(0deg) scale(1)}
            25%{transform:translate(30px,-20px) rotate(1deg) scale(1.02)}
            50%{transform:translate(-15px,25px) rotate(-0.5deg) scale(0.98)}
            75%{transform:translate(20px,10px) rotate(0.8deg) scale(1.01)}
        }
        @keyframes nebulaFloat2{
            0%,100%{transform:translate(0,0) rotate(0)}
            33%{transform:translate(-20px,15px) rotate(-1deg)}
            66%{transform:translate(25px,-10px) rotate(0.6deg)}
        }

        /* Stars */
        .stars-layer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
        .star{
            position:absolute;border-radius:50%;background:#fff;
            animation:starTwinkle linear infinite;
        }
        @keyframes starTwinkle{
            0%,100%{opacity:0.1;transform:scale(0.8)}
            50%{opacity:0.8;transform:scale(1.2)}
        }

        /* Shooting stars */
        .shooting-star{
            position:absolute;width:120px;height:1.5px;
            background:linear-gradient(90deg,rgba(255,255,255,0),rgba(124,106,255,.8),rgba(255,255,255,0));
            border-radius:50%;opacity:0;
            animation:shootingStar 4s ease-in-out infinite;
        }
        .shooting-star:nth-child(1){top:12%;left:70%;animation-delay:0s;transform:rotate(-35deg)}
        .shooting-star:nth-child(2){top:28%;left:85%;animation-delay:6s;transform:rotate(-40deg);width:80px}
        .shooting-star:nth-child(3){top:55%;left:60%;animation-delay:12s;transform:rotate(-30deg);width:100px}
        @keyframes shootingStar{
            0%{opacity:0;transform:translateX(0) rotate(-35deg)}
            5%{opacity:1}
            20%{opacity:0;transform:translateX(-300px) rotate(-35deg)}
            100%{opacity:0}
        }

        /* Floating particles */
        .particles{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
        .particle{
            position:absolute;border-radius:50%;
            animation:pFloat linear infinite;
        }
        @keyframes pFloat{
            0%{transform:translateY(100vh) scale(0);opacity:0}
            10%{opacity:var(--p-opacity,.15)}
            90%{opacity:var(--p-opacity,.15)}
            100%{transform:translateY(-10vh) scale(1);opacity:0}
        }

        /* Aurora */
        .aurora{
            position:fixed;top:-50%;left:-20%;width:140%;height:200%;
            pointer-events:none;z-index:0;opacity:.25;
            background:linear-gradient(180deg,
                transparent 30%,
                rgba(124,106,255,.03) 40%,
                rgba(0,212,255,.02) 50%,
                rgba(255,107,202,.02) 55%,
                transparent 65%);
            animation:auroraDrift 20s ease-in-out infinite;
        }
        @keyframes auroraDrift{
            0%,100%{transform:translateY(0) rotate(2deg)}
            50%{transform:translateY(-30px) rotate(-2deg)}
        }

        /* ════════════════════ HEADER ════════════════════ */
        header {
            position:relative;z-index:10;width:100%;
            padding:36px 20px 28px;text-align:center;
            background:linear-gradient(180deg,rgba(124,106,255,.06) 0%,transparent 100%);
            border-bottom:1px solid var(--glass-border);
            backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
        }
        .logo-row{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:10px;position:relative}
        .logo-icon{
            width:54px;height:54px;
            background:linear-gradient(135deg,var(--primary),var(--pink),var(--accent));
            background-size:200% 200%;
            border-radius:16px;display:flex;align-items:center;justify-content:center;
            font-size:1.7rem;
            box-shadow:0 6px 30px var(--primary-glow),0 0 60px rgba(124,106,255,.12);
            animation:logoPulse 3s ease-in-out infinite, logoGradient 6s ease infinite, logoEntrance .8s cubic-bezier(.34,1.56,.64,1) both;
        }
        @keyframes logoEntrance{
            0%{opacity:0;transform:scale(0) rotate(-45deg)}
            100%{opacity:1;transform:scale(1) rotate(0)}
        }
        @keyframes logoPulse{
            0%,100%{box-shadow:0 6px 30px var(--primary-glow)}
            50%{box-shadow:0 6px 42px var(--primary-glow),0 0 80px rgba(124,106,255,.15)}
        }
        @keyframes logoGradient{
            0%,100%{background-position:0% 50%}
            50%{background-position:100% 50%}
        }
        header h1{
            font-size:2.3rem;font-weight:900;letter-spacing:-.5px;
            background:linear-gradient(90deg,#fff 0%,var(--primary-light) 20%,var(--pink) 40%,var(--accent) 60%,var(--cyan) 80%,#fff 100%);
            background-size:300% auto;
            -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
            animation:titleShimmer 5s linear infinite, titleFadeIn 1s ease-out both;
        }
        @keyframes titleShimmer{
            0%{background-position:300% center}
            100%{background-position:-300% center}
        }
        @keyframes titleFadeIn{
            0%{opacity:0;transform:translateY(-20px);filter:blur(10px)}
            100%{opacity:1;transform:translateY(0);filter:blur(0)}
        }
        header p{
            color:var(--text-muted);margin-top:8px;font-size:.88rem;line-height:1.6;max-width:550px;margin-inline:auto;
            animation:subtitleFadeIn 1s ease-out .3s both;
        }
        @keyframes subtitleFadeIn{
            0%{opacity:0;transform:translateY(12px)}
            100%{opacity:1;transform:translateY(0)}
        }

        /* Chips */
        .chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}
        .chip{
            display:inline-flex;align-items:center;gap:5px;
            padding:6px 14px;background:rgba(124,106,255,.06);
            border:1px solid rgba(124,106,255,.12);border-radius:22px;
            font-size:.72rem;color:var(--text-sec);font-weight:600;
            transition:var(--transition);cursor:default;
            animation:chipFadeIn .5s ease-out both;
            backdrop-filter:blur(6px);
        }
        .chip:nth-child(1){animation-delay:.5s}
        .chip:nth-child(2){animation-delay:.55s}
        .chip:nth-child(3){animation-delay:.6s}
        .chip:nth-child(4){animation-delay:.65s}
        .chip:nth-child(5){animation-delay:.7s}
        .chip:nth-child(6){animation-delay:.75s}
        .chip:nth-child(7){animation-delay:.8s}
        .chip:nth-child(8){animation-delay:.85s}
        .chip:nth-child(9){animation-delay:.9s}
        .chip:nth-child(10){animation-delay:.95s}
        @keyframes chipFadeIn{
            0%{opacity:0;transform:translateY(10px) scale(.85)}
            100%{opacity:1;transform:translateY(0) scale(1)}
        }
        .chip:hover{border-color:var(--primary);color:var(--primary-light);background:rgba(124,106,255,.12);transform:translateY(-2px);box-shadow:0 4px 16px rgba(124,106,255,.15)}

        @keyframes sectionFadeIn{
            0%{opacity:0;transform:translateY(20px)}
            100%{opacity:1;transform:translateY(0)}
        }

        /* ════════════════════ AUTH CARD ════════════════════ */
        .auth-card{
            position:relative;z-index:10;width:100%;max-width:780px;
            margin:16px auto 0;padding:14px 18px;
            background:var(--glass);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
            border:1px solid var(--glass-border);border-radius:var(--radius);
            display:flex;gap:10px;align-items:center;flex-wrap:wrap;
            transition:var(--transition);
            animation:sectionFadeIn .8s ease-out .8s both;
        }
        .auth-card:hover{border-color:rgba(124,106,255,.2);box-shadow:0 8px 36px rgba(0,0,0,.25)}
        .auth-label{
            display:flex;align-items:center;gap:6px;
            color:var(--text-muted);font-size:.72rem;font-weight:700;
            text-transform:uppercase;letter-spacing:1px;white-space:nowrap;
        }
        .auth-card input,.auth-card select{
            background:var(--surface);border:1px solid rgba(124,106,255,.12);
            color:var(--text);padding:10px 14px;border-radius:var(--radius-sm);
            font-size:.82rem;font-family:'Inter',sans-serif;outline:none;
            transition:var(--transition);flex:1;min-width:90px;
        }
        .auth-card input::placeholder{color:var(--text-muted)}
        .auth-card input:focus,.auth-card select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(124,106,255,.1)}
        .auth-card select{
            cursor:pointer;-webkit-appearance:none;appearance:none;
            background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E6890' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
            background-repeat:no-repeat;background-position:right 10px center;padding-right:30px;
        }

        /* Connect button in auth card */
        .auth-connect-btn{
            padding:10px 20px;
            border:1.5px solid var(--primary);
            border-radius:var(--radius-sm);
            background:linear-gradient(135deg,var(--primary),var(--primary-dark));
            color:#fff;font-size:.8rem;font-weight:700;
            cursor:pointer;transition:all .25s ease;
            letter-spacing:.4px;white-space:nowrap;
            font-family:'Inter',sans-serif;
        }
        .auth-connect-btn:hover{
            transform:translateY(-1px);
            box-shadow:0 4px 18px var(--primary-glow);
        }
        .auth-connect-btn:active{transform:scale(.97)}
        .auth-connect-btn.connected{
            background:linear-gradient(135deg,var(--success),#2bb580);
            border-color:var(--success);pointer-events:none;
        }
        .auth-connect-btn.verifying{
            opacity:.7;pointer-events:none;
            background:linear-gradient(135deg,var(--primary),var(--primary-dark));
        }

        /* Logout button */
        .auth-logout-btn{
            padding:10px 20px;
            border:1.5px solid var(--danger);
            border-radius:var(--radius-sm);
            background:rgba(255,107,107,.1);
            color:var(--danger);font-size:.8rem;font-weight:700;
            cursor:pointer;transition:all .25s ease;
            letter-spacing:.4px;white-space:nowrap;
            font-family:'Inter',sans-serif;
        }
        .auth-logout-btn:hover{
            background:rgba(255,107,107,.25);
            transform:translateY(-1px);
            box-shadow:0 4px 18px var(--danger-glow);
        }
        .auth-logout-btn:active{transform:scale(.97)}

        /* Lock auth inputs after login */
        .auth-card.logged-in select,
        .auth-card.logged-in input{
            opacity:.5;pointer-events:none;
        }

        /* Auth gate banner */
        .auth-gate-banner{
            position:relative;z-index:10;width:100%;max-width:780px;
            margin:0 auto;padding:14px 20px;
            background:rgba(255,138,80,.08);
            border:1px solid rgba(255,138,80,.2);
            border-radius:var(--radius-sm);
            display:flex;align-items:center;gap:10px;
            font-size:.82rem;color:var(--text-sec);
            animation:sectionFadeIn .5s ease both;
        }
        .auth-gate-banner.hidden{display:none}
        .auth-gate-icon{font-size:1.2rem}

        /* Disabled state for input controls when not authenticated */
        .auth-locked .text-input-bar{opacity:.5;pointer-events:none}
        .auth-locked .text-send-btn,
        .auth-locked .text-mic-btn{opacity:.4;pointer-events:none;cursor:not-allowed}
        .auth-locked .voice-record-panel{opacity:.5;pointer-events:none}
        .auth-locked .wake-card{opacity:.5;pointer-events:none}

        @keyframes authShake{
            0%,100%{transform:translateX(0)}
            20%{transform:translateX(-8px)}
            40%{transform:translateX(8px)}
            60%{transform:translateX(-5px)}
            80%{transform:translateX(5px)}
        }

        /* ════════════════════ MAIN ════════════════════ */
        .main-container{
            position:relative;z-index:10;flex:1;width:100%;max-width:780px;
            padding:18px 20px;display:flex;flex-direction:column;gap:14px;
            animation:sectionFadeIn .8s ease-out 1s both;
            min-height:0;
        }

        .session-bar{display:flex;justify-content:space-between;align-items:center;padding:0 2px}
        .session-id{font-size:.66rem;color:var(--text-muted);font-family:'JetBrains Mono',monospace;opacity:.4}
        .new-btn{
            background:var(--surface);border:1px solid var(--glass-border);
            color:var(--text-sec);padding:7px 16px;border-radius:10px;
            font-size:.74rem;font-family:'Inter',sans-serif;font-weight:600;
            cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:5px;
        }
        .new-btn:hover{border-color:var(--primary);color:var(--primary-light);background:rgba(124,106,255,.08);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.2)}

        /* ════════════════════ CHAT FRAME ════════════════════ */
        .chat-frame{
            flex:1;display:flex;flex-direction:column;
            background:var(--surface);
            border:1px solid var(--glass-border);
            border-radius:var(--radius);
            overflow:hidden;min-height:300px;max-height:70vh;
        }
        .chat-history{
            flex:1;overflow-y:auto;min-height:0;
            display:flex;flex-direction:column;gap:14px;padding:18px 44px;
            scroll-behavior:smooth;
        }
        .chat-history::-webkit-scrollbar{width:4px}
        .chat-history::-webkit-scrollbar-track{background:transparent}
        .chat-history::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--primary),var(--primary-dark));border-radius:10px}

        .chat-bubble{
            max-width:82%;padding:16px 20px;border-radius:22px;
            font-size:.88rem;line-height:1.65;word-wrap:break-word;
            animation:bubbleIn .45s cubic-bezier(.34,1.56,.64,1);
            position:relative;
        }
        @keyframes bubbleIn{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}}

        .bubble-user{
            align-self:flex-end;
            background:linear-gradient(135deg,var(--primary),var(--primary-dark));
            color:#fff;border-bottom-right-radius:6px;
            box-shadow:0 4px 22px var(--primary-glow);font-weight:500;
            margin-right:8px;
        }
        .bubble-user::after{
            content:'👤';position:absolute;right:-38px;bottom:4px;
            width:30px;height:30px;border-radius:50%;
            background:var(--surface2);display:flex;align-items:center;justify-content:center;
            font-size:.8rem;border:1px solid var(--glass-border);
        }
        .bubble-assistant{
            align-self:flex-start;
            background:var(--surface);color:var(--text);
            border-bottom-left-radius:6px;
            border:1px solid var(--glass-border);
            box-shadow:0 3px 14px rgba(0,0,0,.2);
            margin-left:8px;
        }
        .bubble-assistant::before{
            content:'🤖';position:absolute;left:-38px;bottom:4px;
            width:30px;height:30px;border-radius:50%;
            background:var(--surface2);display:flex;align-items:center;justify-content:center;
            font-size:.8rem;border:1px solid var(--glass-border);
        }
        .bubble-system{
            align-self:center;max-width:92%;text-align:center;
            background:rgba(124,106,255,.04);
            border:1px dashed rgba(124,106,255,.15);
            color:var(--text-sec);font-size:.82rem;
            border-radius:var(--radius);padding:14px 22px;
        }
        .bubble-system.connection-error{
            background:rgba(239,68,68,.06);
            border:1px dashed rgba(239,68,68,.25);
            color:var(--text);
        }
        .connection-error-icon{
            display:inline-block;font-size:2rem;margin-bottom:6px;
            animation:plugShake 1.2s ease-in-out;
        }
        @keyframes plugShake{
            0%,100%{transform:rotate(0deg)}
            15%{transform:rotate(-8deg)}
            30%{transform:rotate(8deg)}
            45%{transform:rotate(-5deg)}
            60%{transform:rotate(5deg)}
            75%{transform:rotate(-2deg)}
            90%{transform:rotate(2deg)}
        }
        .connection-error-title{
            font-weight:700;font-size:.88rem;margin-bottom:4px;
            color:var(--danger,#ef4444);
        }
        .connection-error-hint{
            font-size:.78rem;opacity:.7;margin-top:2px;
        }
        .bubble-time{
            display:block;font-size:.62rem;margin-top:7px;
            opacity:.4;text-align:right;
        }
        .bubble-assistant .bubble-time{text-align:left}

        .action-badge{
            display:inline-flex;align-items:center;gap:4px;
            background:linear-gradient(135deg,var(--primary),var(--accent));
            color:#fff;font-size:.64rem;padding:4px 12px;border-radius:14px;
            margin-bottom:8px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
            box-shadow:0 3px 10px var(--primary-glow);
            animation:badgePulse 2s ease-in-out infinite;
        }
        @keyframes badgePulse{
            0%,100%{box-shadow:0 3px 10px var(--primary-glow)}
            50%{box-shadow:0 3px 18px var(--primary-glow),0 0 30px rgba(124,106,255,.1)}
        }
        .bubble-assistant audio{margin-top:12px;width:100%;height:40px;border-radius:var(--radius-sm);filter:brightness(.85) saturate(1.2)}
        .audio-row{display:flex;align-items:center;gap:10px;margin-top:12px}
        .audio-play-btn{
            width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
            background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;
            font-size:1rem;display:flex;align-items:center;justify-content:center;
            box-shadow:0 3px 12px var(--primary-glow);transition:var(--transition);flex-shrink:0;
        }
        .audio-play-btn:hover{transform:scale(1.12);box-shadow:0 5px 20px var(--primary-glow)}
        .audio-play-btn.playing{
            background:linear-gradient(135deg,var(--danger),#e55);
            box-shadow:0 3px 12px var(--danger-glow);
            animation:playBtnPulse .8s ease-in-out infinite;
        }
        @keyframes playBtnPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
        .audio-label{font-size:.7rem;color:var(--text-muted);font-weight:600}
        .audio-wave{display:inline-flex;align-items:flex-end;gap:2px;height:16px;margin-left:6px;vertical-align:middle}
        .audio-wave-bar{
            width:3px;background:var(--primary-light);border-radius:2px;
            animation:audioWaveBounce 1s ease-in-out infinite;
        }
        .audio-wave-bar:nth-child(1){height:6px;animation-delay:0s}
        .audio-wave-bar:nth-child(2){height:12px;animation-delay:.15s}
        .audio-wave-bar:nth-child(3){height:8px;animation-delay:.3s}
        .audio-wave-bar:nth-child(4){height:14px;animation-delay:.1s}
        .audio-wave-bar:nth-child(5){height:5px;animation-delay:.25s}
        @keyframes audioWaveBounce{
            0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}
        }
        .bubble-assistant img.gen-image{
            max-width:100%;border-radius:var(--radius);margin-top:12px;
            cursor:pointer;transition:var(--transition);box-shadow:0 3px 14px rgba(0,0,0,.25);
        }
        .bubble-assistant img.gen-image:hover{transform:scale(1.02);box-shadow:0 8px 32px rgba(0,0,0,.35)}

        /* Typing / Chat Loading */
        .typing-indicator{
            display:flex;align-items:center;gap:12px;
            padding:16px 22px;background:var(--surface);
            border:1px solid var(--glass-border);
            border-radius:22px;border-bottom-left-radius:6px;
            align-self:flex-start;animation:bubbleIn .3s ease;
            margin-left:8px;position:relative;
            max-width:280px;
        }
        .typing-indicator::before{
            content:'🤖';position:absolute;left:-38px;bottom:4px;
            width:30px;height:30px;border-radius:50%;
            background:var(--surface2);display:flex;align-items:center;justify-content:center;
            font-size:.8rem;border:1px solid var(--glass-border);
        }
        .typing-dots{
            display:flex;align-items:center;gap:5px;flex-shrink:0;
        }
        .typing-dot{
            width:8px;height:8px;border-radius:50%;
            animation:tBounce 1.4s ease-in-out infinite;
        }
        .typing-dot:nth-child(1){background:var(--primary)}
        .typing-dot:nth-child(2){background:var(--accent);animation-delay:.15s}
        .typing-dot:nth-child(3){background:var(--pink);animation-delay:.3s}
        @keyframes tBounce{0%,60%,100%{transform:translateY(0);opacity:.3}30%{transform:translateY(-10px);opacity:1}}
        .typing-text{
            font-size:.76rem;font-weight:600;color:var(--text-sec);
            white-space:nowrap;overflow:hidden;
            animation:typingTextFade 1s ease-in-out;
        }
        @keyframes typingTextFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

        /* Processing overlay status text */
        .overlay-status{
            text-align:center;z-index:101;
            animation:overlayStatusIn .5s ease .3s both;
        }
        .overlay-status-text{
            font-size:1rem;font-weight:700;color:var(--text);
            letter-spacing:.5px;
            animation:overlayTextFade 1s ease-in-out;
        }
        .overlay-status-sub{
            font-size:.76rem;font-weight:500;color:var(--text-muted);
            margin-top:6px;
        }
        .overlay-status-bar{
            margin-top:14px;width:200px;height:3px;border-radius:3px;
            background:var(--surface2);overflow:hidden;margin-left:auto;margin-right:auto;
        }
        .overlay-status-bar-fill{
            height:100%;border-radius:3px;
            background:linear-gradient(90deg,var(--primary),var(--pink),var(--accent),var(--cyan));
            background-size:300% 100%;
            animation:statusBarShimmer 2s linear infinite;
        }
        @keyframes statusBarShimmer{0%{background-position:0% 0}100%{background-position:300% 0}}
        @keyframes overlayStatusIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
        @keyframes overlayTextFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

        /* Cancel button in processing overlay */
        .overlay-cancel-btn{
            margin-top:18px;
            padding:10px 32px;
            border:1.5px solid rgba(255,107,107,.5);
            border-radius:28px;
            background:rgba(255,107,107,.1);
            color:var(--danger);
            font-size:.82rem;font-weight:600;
            cursor:pointer;
            transition:all .25s ease;
            letter-spacing:.3px;
            backdrop-filter:blur(6px);
        }
        .overlay-cancel-btn:hover{
            background:rgba(255,107,107,.25);
            border-color:var(--danger);
            transform:scale(1.05);
            box-shadow:0 0 16px var(--danger-glow);
        }
        .overlay-cancel-btn:active{transform:scale(.97)}

        /* ════════════════════ PROCESSING OVERLAY ════════════════════ */
        .processing-overlay{
            position:fixed;inset:0;z-index:100;
            background:rgba(6,5,15,.7);
            backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
            display:none;align-items:center;justify-content:center;flex-direction:column;gap:28px;
            animation:overlayIn .3s ease;
        }
        .processing-overlay.active{display:flex}
        @keyframes overlayIn{from{opacity:0}to{opacity:1}}

        .loader-container{position:relative;width:160px;height:160px}

        /* Outer glow ring */
        .loader-glow{
            position:absolute;inset:-10px;border-radius:50%;
            background:conic-gradient(from 0deg,transparent,var(--primary),var(--pink),var(--accent),var(--cyan),transparent);
            animation:loaderGlowSpin 2.5s linear infinite;
            filter:blur(14px);opacity:.4;
        }
        @keyframes loaderGlowSpin{to{transform:rotate(360deg)}}

        /* Orbit rings */
        .loader-ring{
            position:absolute;border-radius:50%;
            border:2px solid transparent;
        }
        .loader-ring-1{
            inset:0;
            border-top-color:var(--primary);border-left-color:rgba(124,106,255,.2);
            animation:orbitSpin 1.4s cubic-bezier(.6,.15,.35,.85) infinite;
        }
        .loader-ring-2{
            inset:14px;
            border-right-color:var(--accent);border-bottom-color:rgba(255,138,80,.15);
            animation:orbitSpin 1.8s cubic-bezier(.6,.15,.35,.85) infinite reverse;
        }
        .loader-ring-3{
            inset:28px;
            border-bottom-color:var(--cyan);border-left-color:rgba(0,212,255,.15);
            animation:orbitSpin 2.2s cubic-bezier(.6,.15,.35,.85) infinite;
        }
        .loader-ring-4{
            inset:42px;
            border-top-color:var(--pink);border-right-color:rgba(255,107,202,.15);
            animation:orbitSpin 1.6s cubic-bezier(.6,.15,.35,.85) infinite reverse;
        }

        /* Orbiting dots */
        .loader-dot{
            position:absolute;width:8px;height:8px;border-radius:50%;
            top:50%;left:50%;margin:-4px 0 0 -4px;
        }
        .loader-dot-1{
            background:var(--primary);box-shadow:0 0 12px var(--primary-glow);
            animation:dotOrbit1 1.4s linear infinite;
        }
        .loader-dot-2{
            background:var(--accent);box-shadow:0 0 12px var(--accent-glow);
            animation:dotOrbit2 1.8s linear infinite;
        }
        .loader-dot-3{
            background:var(--cyan);box-shadow:0 0 12px var(--cyan-glow);
            animation:dotOrbit3 2.2s linear infinite;
        }
        @keyframes dotOrbit1{to{transform:rotate(360deg) translateX(78px) rotate(-360deg)}}
        @keyframes dotOrbit2{to{transform:rotate(-360deg) translateX(62px) rotate(360deg)}}
        @keyframes dotOrbit3{to{transform:rotate(360deg) translateX(46px) rotate(-360deg)}}

        /* Center pulsing core */
        .loader-core{
            position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
            width:44px;height:44px;border-radius:50%;
            background:linear-gradient(135deg,var(--primary),var(--pink),var(--accent));
            background-size:200% 200%;
            box-shadow:0 0 30px var(--primary-glow),0 0 60px rgba(124,106,255,.12);
            animation:corePulse 1.5s ease-in-out infinite, coreGradient 4s ease infinite;
            display:flex;align-items:center;justify-content:center;font-size:1.3rem;
        }
        @keyframes corePulse{0%,100%{transform:translate(-50%,-50%) scale(1);box-shadow:0 0 30px var(--primary-glow)}50%{transform:translate(-50%,-50%) scale(1.12);box-shadow:0 0 50px var(--primary-glow),0 0 80px rgba(124,106,255,.15)}}
        @keyframes coreGradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

        @keyframes orbitSpin{to{transform:rotate(360deg)}}

        /* Floating sparkles around loader */
        .loader-sparkle{
            position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;
            animation:sparkleFloat 2s ease-in-out infinite;
        }
        .loader-sparkle:nth-child(1){top:10%;left:20%;animation-delay:0s;opacity:.4}
        .loader-sparkle:nth-child(2){top:80%;left:75%;animation-delay:.5s;opacity:.3}
        .loader-sparkle:nth-child(3){top:15%;right:15%;animation-delay:1s;opacity:.5}
        .loader-sparkle:nth-child(4){bottom:20%;left:10%;animation-delay:1.5s;opacity:.35}
        @keyframes sparkleFloat{0%,100%{transform:scale(1);opacity:.3}50%{transform:scale(2);opacity:.7}}

        /* ════════════════════ WAVEFORM ════════════════════ */
        .viz-box{
            width:100%;height:48px;background:var(--surface);
            border:1px solid var(--glass-border);border-radius:var(--radius-sm);
            overflow:hidden;transition:var(--transition);
        }
        .viz-box.active{border-color:var(--danger);box-shadow:0 0 24px var(--danger-glow)}
        .viz-box.processing{border-color:var(--accent);box-shadow:0 0 24px var(--accent-glow);animation:vizPulse 1.5s ease-in-out infinite}
        @keyframes vizPulse{0%,100%{box-shadow:0 0 24px var(--accent-glow)}50%{box-shadow:0 0 40px var(--accent-glow)}}
        canvas#waveform{width:100%;height:100%;display:block}

        /* ════════════════════ MIC AREA (inside chat frame) ════════════════════ */
        .chat-mic-area{
            border-top:1px solid var(--glass-border);
            background:rgba(14,12,30,.6);
            padding:12px 16px 16px;
            display:flex;flex-direction:column;gap:10px;
        }

        /* ════════════════════ TEXT INPUT BAR ════════════════════ */
        .text-input-bar{
            display:flex;align-items:center;gap:10px;width:100%;
        }
        .text-input-bar input{
            flex:1;
            background:var(--surface);border:1px solid var(--glass-border);
            color:var(--text);padding:14px 18px;border-radius:28px;
            font-size:.88rem;font-family:'Inter',sans-serif;outline:none;
            transition:var(--transition);
        }
        .text-input-bar input::placeholder{color:var(--text-muted)}
        .text-input-bar input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(124,106,255,.15)}
        .text-send-btn{
            width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
            background:linear-gradient(135deg,var(--primary),var(--primary-dark));
            color:#fff;font-size:1.2rem;display:flex;align-items:center;justify-content:center;
            box-shadow:0 4px 18px var(--primary-glow);transition:var(--transition);flex-shrink:0;
        }
        .text-send-btn:hover{transform:scale(1.08);box-shadow:0 6px 24px var(--primary-glow)}
        .text-send-btn:active{transform:scale(.95)}
        .text-send-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
        .text-mic-btn{
            width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
            background:linear-gradient(145deg,var(--primary-light),var(--primary-dark));
            color:#fff;font-size:1.3rem;display:flex;align-items:center;justify-content:center;
            box-shadow:0 4px 18px var(--primary-glow);transition:var(--transition);flex-shrink:0;
        }
        .text-mic-btn:hover{transform:scale(1.08);box-shadow:0 6px 24px var(--primary-glow)}
        .text-mic-btn:active{transform:scale(.95)}
        .text-mic-btn.recording{
            background:linear-gradient(145deg,var(--danger),#e55);
            box-shadow:0 4px 18px var(--danger-glow);
            animation:micPulse .7s ease-in-out infinite;
        }
        .text-mic-btn.processing{
            background:linear-gradient(145deg,var(--accent),#e07500);
            box-shadow:0 4px 18px var(--accent-glow);cursor:wait;
        }
        .input-divider{
            display:flex;align-items:center;gap:8px;padding:4px 0;
            color:var(--text-muted);font-size:.68rem;font-weight:600;opacity:.4;
        }
        .input-divider::before,.input-divider::after{
            content:'';flex:1;height:1px;background:var(--glass-border);
        }

        /* Voice recording panel (shown when mic is active) */
        .voice-record-panel{
            display:none;flex-direction:column;align-items:center;gap:10px;
            padding:10px 0;
            animation:bubbleIn .3s ease;
        }
        .voice-record-panel.active{display:flex}

        .mic-center{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 0 2px}

        .controls-row{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap}
        .ctrl-group{display:flex;align-items:center;gap:6px}
        .ctrl-group label{color:var(--text-muted);font-size:.72rem;font-weight:600}
        .ctrl-group select{
            background:var(--surface);border:1px solid var(--glass-border);
            color:var(--text);padding:8px 32px 8px 12px;border-radius:var(--radius-sm);
            font-size:.8rem;font-family:'Inter',sans-serif;cursor:pointer;outline:none;
            transition:var(--transition);-webkit-appearance:none;appearance:none;
            background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E6890' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
            background-repeat:no-repeat;background-position:right 10px center;
        }
        .ctrl-group select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(124,106,255,.1)}

        .mic-wrap{position:relative;display:flex;align-items:center;justify-content:center}
        .mic-ring{position:absolute;border-radius:50%;border:2px solid transparent;pointer-events:none;transition:var(--transition)}
        .mic-ring-1{width:104px;height:104px;border-color:rgba(124,106,255,.06)}
        .mic-ring-2{width:130px;height:130px;border-color:rgba(124,106,255,.03)}
        .mic-ring-3{width:156px;height:156px;border-color:rgba(124,106,255,.015)}

        .mic-wrap.recording .mic-ring-1{border-color:rgba(255,107,107,.35);animation:rp1 1.8s ease-in-out infinite}
        .mic-wrap.recording .mic-ring-2{border-color:rgba(255,107,107,.18);animation:rp2 1.8s ease-in-out infinite .3s}
        .mic-wrap.recording .mic-ring-3{border-color:rgba(255,107,107,.08);animation:rp3 1.8s ease-in-out infinite .6s}
        @keyframes rp1{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:.5}}
        @keyframes rp2{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.14);opacity:.4}}
        @keyframes rp3{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.16);opacity:.25}}

        .mic-wrap.processing .mic-ring-1{border-color:var(--accent);border-top-color:transparent;animation:rspin 1s linear infinite}
        .mic-wrap.processing .mic-ring-2{border-color:rgba(255,138,80,.25);border-bottom-color:transparent;animation:rspinR 1.4s linear infinite}
        .mic-wrap.processing .mic-ring-3{border-color:rgba(255,138,80,.1);border-left-color:transparent;animation:rspin 1.8s linear infinite}
        @keyframes rspin{to{transform:rotate(360deg)}}
        @keyframes rspinR{to{transform:rotate(-360deg)}}

        .mic-btn{
            width:78px;height:78px;border-radius:50%;border:none;cursor:pointer;
            font-size:2rem;display:flex;align-items:center;justify-content:center;
            transition:all .35s cubic-bezier(.34,1.56,.64,1);
            position:relative;z-index:2;outline:none;
            -webkit-tap-highlight-color:transparent;
        }
        .mic-btn.idle{
            background:linear-gradient(145deg,var(--primary-light),var(--primary-dark));
            color:#fff;
            box-shadow:0 8px 38px var(--primary-glow),inset 0 1px 0 rgba(255,255,255,.15),0 0 80px rgba(124,106,255,.1);
        }
        .mic-btn.idle:hover{
            transform:scale(1.1);
            box-shadow:0 10px 50px rgba(124,106,255,.5),inset 0 1px 0 rgba(255,255,255,.2),0 0 100px rgba(124,106,255,.15);
        }
        .mic-btn.idle:active{transform:scale(.93)}
        .mic-btn.recording{
            background:linear-gradient(145deg,var(--danger),#e55);
            color:#fff;box-shadow:0 8px 38px var(--danger-glow),inset 0 1px 0 rgba(255,255,255,.12);
            animation:micPulse .7s ease-in-out infinite;
        }
        @keyframes micPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
        .mic-btn.processing{
            background:linear-gradient(145deg,var(--accent),#e07500);
            color:#fff;cursor:wait;box-shadow:0 8px 38px var(--accent-glow);
        }
        .spinner{
            width:28px;height:28px;border:3px solid rgba(255,255,255,.25);
            border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;
        }
        @keyframes spin{to{transform:rotate(360deg)}}

        .mic-status{font-size:.78rem;color:var(--text-muted);text-align:center;min-height:20px;font-weight:500;transition:var(--transition)}
        .mic-status.recording{color:var(--danger);font-weight:700;animation:statusBlink 1.2s ease-in-out infinite}
        .mic-status.processing{color:var(--accent);font-weight:600}
        @keyframes statusBlink{0%,100%{opacity:1}50%{opacity:.5}}

        .timer{
            font-family:'JetBrains Mono',monospace;font-size:1.1rem;
            font-variant-numeric:tabular-nums;color:var(--danger);font-weight:700;
            letter-spacing:2px;background:rgba(255,107,107,.06);
            padding:6px 20px;border-radius:10px;border:1px solid rgba(255,107,107,.15);
            animation:timerGlow 1.5s ease-in-out infinite;
        }
        @keyframes timerGlow{0%,100%{box-shadow:0 0 0 rgba(255,107,107,0)}50%{box-shadow:0 0 16px rgba(255,107,107,.15)}}

        .kb-hint{display:flex;align-items:center;gap:6px;color:var(--text-muted);font-size:.68rem;opacity:.45;margin-top:-2px}
        .kb-hint kbd{
            background:var(--surface2);border:1px solid var(--glass-border);
            padding:2px 8px;border-radius:5px;font-family:'JetBrains Mono',monospace;
            font-size:.66rem;color:var(--text-sec);
        }

        /* Auto-play indicator */
        .autoplay-indicator{
            position:fixed;bottom:24px;left:24px;z-index:200;
            display:none;align-items:center;gap:10px;
            padding:12px 20px;border-radius:14px;
            background:linear-gradient(135deg,rgba(124,106,255,.15),rgba(124,106,255,.08));
            border:1px solid rgba(124,106,255,.2);
            backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
            box-shadow:0 8px 30px rgba(0,0,0,.3);
            animation:autoplaySlideIn .4s cubic-bezier(.34,1.56,.64,1);
            color:var(--text);font-size:.8rem;font-weight:600;
        }
        .autoplay-indicator.visible{display:flex}
        @keyframes autoplaySlideIn{from{opacity:0;transform:translateX(-20px) scale(.9)}to{opacity:1;transform:none}}

        /* ════════════════════ WAKE WORD INDICATOR ════════════════════ */
        .wake-word-bar{
            position:fixed;top:0;left:0;right:0;z-index:300;
            display:none;align-items:center;justify-content:center;gap:10px;
            padding:10px 20px;
            background:linear-gradient(135deg,rgba(54,211,153,.12),rgba(0,212,255,.08));
            border-bottom:1px solid rgba(54,211,153,.3);
            backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
            animation:wakeBarIn .3s ease;
            font-size:.78rem;font-weight:600;color:var(--success);
        }
        .wake-word-bar.active{display:flex}
        .wake-word-bar.detected{
            background:linear-gradient(135deg,rgba(124,106,255,.2),rgba(255,138,80,.1));
            border-bottom-color:var(--primary);color:var(--primary-light);
            animation:wakeDetectedPulse .5s ease;
        }
        @keyframes wakeBarIn{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
        @keyframes wakeDetectedPulse{0%{transform:scale(1)}50%{transform:scale(1.02)}100%{transform:scale(1)}}

        .wake-dot{
            width:10px;height:10px;border-radius:50%;
            background:var(--success);
            box-shadow:0 0 12px var(--success-glow);
            animation:wakeDotPulse 1.5s ease-in-out infinite;
        }
        .wake-dot.detected{background:var(--primary);box-shadow:0 0 12px var(--primary-glow)}
        @keyframes wakeDotPulse{0%,100%{opacity:.5;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}

        .wake-toggle{
            position:relative;display:inline-flex;align-items:center;gap:8px;
            cursor:pointer;user-select:none;
        }
        .wake-toggle input{display:none}
        .wake-slider{
            width:42px;height:22px;border-radius:11px;
            background:var(--surface2);border:1px solid var(--glass-border);
            position:relative;transition:var(--transition);
        }
        .wake-slider::after{
            content:'';position:absolute;top:2px;left:2px;
            width:16px;height:16px;border-radius:50%;
            background:var(--text-muted);transition:var(--transition);
        }
        .wake-toggle input:checked+.wake-slider{
            background:linear-gradient(135deg,var(--success),#2abf80);
            border-color:var(--success);
        }
        .wake-toggle input:checked+.wake-slider::after{
            transform:translateX(20px);background:#fff;
        }
        .wake-label{font-size:.72rem;color:var(--text-sec);font-weight:600}

        /* ════════════════════ WAKE WORD CARD (standalone) ════════════════════ */
        .wake-card{
            position:relative;z-index:10;width:100%;max-width:780px;
            margin:10px auto 0;padding:14px 20px;
            background:var(--glass);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
            border:1px solid var(--glass-border);border-radius:var(--radius);
            display:flex;gap:14px;align-items:center;
            transition:var(--transition);
            animation:sectionFadeIn .8s ease-out .9s both;
        }
        .wake-card:hover{border-color:rgba(54,211,153,.2);box-shadow:0 8px 36px rgba(0,0,0,.25)}
        .wake-card.listening{
            border-color:rgba(54,211,153,.35);
            box-shadow:0 0 24px rgba(54,211,153,.1),0 8px 36px rgba(0,0,0,.25);
        }
        .wake-card-icon{
            width:40px;height:40px;border-radius:12px;
            background:linear-gradient(135deg,var(--success),var(--cyan));
            display:flex;align-items:center;justify-content:center;
            font-size:1.1rem;flex-shrink:0;
            box-shadow:0 4px 16px var(--success-glow);
            transition:var(--transition);
        }
        .wake-card.listening .wake-card-icon{
            animation:wakePulseIcon 1.5s ease-in-out infinite;
        }
        @keyframes wakePulseIcon{
            0%,100%{box-shadow:0 4px 16px var(--success-glow)}
            50%{box-shadow:0 4px 28px var(--success-glow),0 0 40px rgba(54,211,153,.15)}
        }
        .wake-card-info{flex:1;min-width:0}
        .wake-card-title{
            font-size:.82rem;font-weight:700;color:var(--text);
            display:flex;align-items:center;gap:6px;
        }
        .wake-card-title .live-dot{
            width:8px;height:8px;border-radius:50%;
            background:var(--success);display:none;
            animation:wakeDotPulse 1.5s ease-in-out infinite;
        }
        .wake-card.listening .wake-card-title .live-dot{display:inline-block}
        .wake-card-desc{
            font-size:.68rem;color:var(--text-muted);margin-top:2px;line-height:1.4;
        }
        .wake-card .wake-toggle{margin-left:auto}

        /* ════════════════════ NOTES PANEL ════════════════════ */
        .notes-toggle-btn{
            position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:200;
            width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
            background:linear-gradient(135deg,var(--primary),var(--pink));
            color:#fff;font-size:1.2rem;display:flex;align-items:center;justify-content:center;
            box-shadow:0 4px 20px var(--primary-glow);transition:var(--transition);
        }
        .notes-toggle-btn:hover{transform:translateY(-50%) scale(1.1);box-shadow:0 6px 28px var(--primary-glow)}
        .notes-toggle-btn .badge{
            position:absolute;top:-4px;right:-4px;
            background:var(--danger);color:#fff;font-size:.6rem;font-weight:800;
            width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
        }

        .notes-panel{
            position:fixed;right:-380px;top:0;bottom:0;width:360px;z-index:250;
            background:var(--glass);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
            border-left:1px solid var(--glass-border);
            transition:right .4s cubic-bezier(.4,0,.2,1);
            display:flex;flex-direction:column;
            box-shadow:-8px 0 40px rgba(0,0,0,.3);
        }
        .notes-panel.open{right:0}
        .notes-panel-header{
            padding:20px;border-bottom:1px solid var(--glass-border);
            display:flex;align-items:center;justify-content:space-between;
        }
        .notes-panel-header h3{font-size:1rem;font-weight:700;display:flex;align-items:center;gap:8px}
        .notes-panel-close{
            width:32px;height:32px;border-radius:8px;border:1px solid var(--glass-border);
            background:var(--surface);color:var(--text-sec);cursor:pointer;
            display:flex;align-items:center;justify-content:center;font-size:.9rem;
            transition:var(--transition);
        }
        .notes-panel-close:hover{border-color:var(--danger);color:var(--danger);background:rgba(255,107,107,.08)}
        .notes-list{flex:1;overflow-y:auto;padding:12px}
        .note-card{
            padding:14px;margin-bottom:10px;border-radius:var(--radius-sm);
            background:var(--surface);border:1px solid var(--glass-border);
            transition:var(--transition);animation:bubbleIn .3s ease;
        }
        .note-card:hover{border-color:rgba(124,106,255,.2)}
        .note-content{font-size:.84rem;color:var(--text);line-height:1.5}
        .note-meta{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
        .note-time{font-size:.66rem;color:var(--text-muted);font-family:'JetBrains Mono',monospace}
        .note-delete{
            font-size:.66rem;color:var(--danger);cursor:pointer;font-weight:600;
            opacity:.5;transition:var(--transition);
        }
        .note-delete:hover{opacity:1}
        .notes-empty{
            text-align:center;padding:40px 20px;color:var(--text-muted);font-size:.84rem;
        }
        .notes-empty span{font-size:2.5rem;display:block;margin-bottom:12px}

        /* ════════════════════ FOOTER ════════════════════ */
        footer{
            position:relative;z-index:10;padding:22px 20px;text-align:center;
            color:var(--text-muted);font-size:.72rem;
            border-top:1px solid var(--glass-border);width:100%;
            background:linear-gradient(0deg,rgba(124,106,255,.03),transparent);
            line-height:1.7;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
        }
        footer a{color:var(--primary-light);text-decoration:none;font-weight:600;transition:var(--transition)}
        footer a:hover{color:var(--accent)}
        .footer-links{display:flex;gap:18px;justify-content:center;margin-top:8px}
        .footer-links a{font-size:.7rem}

        /* Toast */
        .toast{
            position:fixed;top:20px;right:20px;z-index:9999;
            padding:14px 22px;border-radius:var(--radius);
            font-size:.82rem;font-weight:600;color:#fff;
            box-shadow:0 16px 48px rgba(0,0,0,.4);
            animation:toastIn .4s cubic-bezier(.34,1.56,.64,1);
            max-width:340px;backdrop-filter:blur(12px);
        }
        .toast.success{background:linear-gradient(135deg,var(--success),#2abf80)}
        .toast.error{background:linear-gradient(135deg,var(--danger),#e05050)}
        .toast.info{background:linear-gradient(135deg,var(--primary),var(--primary-dark))}
        @keyframes toastIn{from{opacity:0;transform:translateX(50px) scale(.9)}to{opacity:1;transform:none}}
        @keyframes toastOut{to{opacity:0;transform:translateX(50px) scale(.9)}}

        /* ════════════════════ ENHANCED ANIMATIONS ════════════════════ */

        /* Gradient border glow on chat frame — removed */
        .chat-frame::before{
            display:none;
        }

        /* Chip hover micro-interactions */
        .chip{
            position:relative;overflow:hidden;
        }
        .chip::before{
            content:'';position:absolute;inset:0;
            background:linear-gradient(90deg,transparent,rgba(124,106,255,.15),transparent);
            transform:translateX(-100%);
            transition:transform .5s ease;
        }
        .chip:hover::before{
            transform:translateX(100%);
        }
        .chip:hover{
            transform:translateY(-3px) scale(1.05);
            box-shadow:0 6px 20px rgba(124,106,255,.2);
        }

        /* Enhanced chat bubble entrance with elastic bounce */
        .bubble-user{
            animation:bubbleSlideRight .5s cubic-bezier(.34,1.56,.64,1);
        }
        .bubble-assistant{
            animation:bubbleSlideLeft .5s cubic-bezier(.34,1.56,.64,1);
        }
        @keyframes bubbleSlideRight{
            0%{opacity:0;transform:translateX(40px) scale(.9)}
            100%{opacity:1;transform:translateX(0) scale(1)}
        }
        @keyframes bubbleSlideLeft{
            0%{opacity:0;transform:translateX(-40px) scale(.9)}
            100%{opacity:1;transform:translateX(0) scale(1)}
        }

        /* Hover lift effect on chat bubbles */
        .chat-bubble{
            transition:transform .25s ease,box-shadow .25s ease;
        }
        .chat-bubble:hover{
            transform:translateY(-2px);
            box-shadow:0 8px 30px rgba(0,0,0,.15);
        }

        /* Interactive card hover with glow */
        .auth-card,.wake-card{
            transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
        }
        .auth-card:hover,.wake-card:hover{
            transform:translateY(-2px);
            box-shadow:0 12px 40px rgba(124,106,255,.15),0 0 20px rgba(124,106,255,.05);
        }
        .wake-card.listening{
            animation:listeningGlow 2s ease-in-out infinite;
        }
        @keyframes listeningGlow{
            0%,100%{box-shadow:0 4px 20px rgba(54,211,153,.1)}
            50%{box-shadow:0 4px 30px rgba(54,211,153,.25),0 0 40px rgba(54,211,153,.08)}
        }

        /* Button press effect */
        .text-send-btn,.text-mic-btn,.mic-btn,.new-btn{
            transition:transform .15s ease,box-shadow .2s ease;
        }
        .text-send-btn:active,.text-mic-btn:active,.new-btn:active{
            transform:scale(.92);
        }

        /* Ripple effect on send button */
        .text-send-btn{
            position:relative;overflow:hidden;
        }
        .text-send-btn::after{
            content:'';position:absolute;inset:0;
            background:radial-gradient(circle,rgba(255,255,255,.3) 10%,transparent 10%);
            background-repeat:no-repeat;background-position:center;
            transform:scale(10);opacity:0;
            transition:transform .5s,opacity .8s;
        }
        .text-send-btn:active::after{
            transform:scale(0);opacity:1;
            transition:0s;
        }

        /* Session bar shimmer */
        .session-bar{
            position:relative;overflow:hidden;
        }
        .session-bar::after{
            content:'';position:absolute;top:0;left:-100%;
            width:50%;height:100%;
            background:linear-gradient(90deg,transparent,rgba(124,106,255,.04),transparent);
            animation:sessionShimmer 4s ease-in-out infinite;
        }
        @keyframes sessionShimmer{
            0%{left:-50%}
            100%{left:150%}
        }

        /* Glowing text input focus */
        .text-input-bar input{
            transition:border-color .3s ease,box-shadow .3s ease,background .3s ease;
        }
        .text-input-bar input:focus{
            box-shadow:0 0 0 3px rgba(124,106,255,.12),0 4px 20px rgba(124,106,255,.08);
        }

        /* Floating action badge animation */
        .action-badge{
            display:inline-block;
            padding:4px 12px;
            background:linear-gradient(135deg,var(--primary),var(--pink));
            color:#fff;border-radius:20px;font-size:.72rem;font-weight:700;
            letter-spacing:.5px;margin-bottom:8px;
            animation:actionBadgePop .4s cubic-bezier(.34,1.56,.64,1);
        }
        @keyframes actionBadgePop{
            0%{opacity:0;transform:scale(0) rotate(-10deg)}
            100%{opacity:1;transform:scale(1) rotate(0)}
        }

        /* Image hover zoom */
        .gen-image{
            transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease;
            cursor:zoom-in;
        }
        .gen-image:hover{
            transform:scale(1.03);
            box-shadow:0 12px 40px rgba(0,0,0,.3);
        }

        /* Notes panel slide animation */
        .notes-panel{
            transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .3s ease;
        }

        /* Note card staggered entrance */
        .note-card{
            animation:noteCardIn .4s cubic-bezier(.34,1.56,.64,1) both;
            transition:transform .2s ease,box-shadow .2s ease;
        }
        .note-card:hover{
            transform:translateX(4px);
            box-shadow:0 4px 16px rgba(124,106,255,.1);
        }
        @keyframes noteCardIn{
            0%{opacity:0;transform:translateX(20px) scale(.95)}
            100%{opacity:1;transform:translateX(0) scale(1)}
        }
        .note-card:nth-child(1){animation-delay:0s}
        .note-card:nth-child(2){animation-delay:.05s}
        .note-card:nth-child(3){animation-delay:.1s}
        .note-card:nth-child(4){animation-delay:.15s}
        .note-card:nth-child(5){animation-delay:.2s}

        /* Footer breathing glow */
        footer{
            animation:footerGlow 6s ease-in-out infinite;
        }
        @keyframes footerGlow{
            0%,100%{border-top-color:var(--glass-border)}
            50%{border-top-color:rgba(124,106,255,.2)}
        }

        /* Theme switch hover enhancement */
        .theme-switch:hover .theme-switch-icon{
            transform:rotate(20deg) scale(1.1);
        }

        /* Pulse glow on notes toggle badge */
        .notes-toggle-btn .badge{
            animation:badgeGlow 1.5s ease-in-out infinite;
        }
        @keyframes badgeGlow{
            0%,100%{box-shadow:0 0 0 rgba(255,107,107,0)}
            50%{box-shadow:0 0 12px rgba(255,107,107,.4)}
        }

        /* Smooth page load fade-in */
        body{
            animation:pageLoad .8s ease-out;
        }
        @keyframes pageLoad{
            0%{opacity:0}
            100%{opacity:1}
        }

        /* Keyboard hint subtle bounce */
        .kb-hint kbd{
            transition:transform .2s ease,background .2s ease;
        }
        .kb-hint kbd:hover{
            transform:translateY(-2px);
            background:var(--surface3);
        }

        ::-webkit-scrollbar{width:4px;height:4px}
        ::-webkit-scrollbar-track{background:transparent}
        ::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:10px}
        ::-webkit-scrollbar-thumb:hover{background:var(--primary)}

        @media(max-width:640px){
            header{padding:24px 16px 20px}
            header h1{font-size:1.55rem}
            .logo-icon{width:44px;height:44px;font-size:1.3rem}
            .auth-card{flex-direction:column;margin:12px 12px 0}
            .main-container{padding:12px}
            .chat-frame{min-height:400px}
            .chat-history{padding:14px 20px}
            .mic-btn{width:64px;height:64px;font-size:1.6rem}
            .mic-ring-1{width:88px;height:88px}.mic-ring-2{width:108px;height:108px}.mic-ring-3{width:128px;height:128px}
            .chat-bubble{max-width:90%;padding:13px 16px;font-size:.83rem}
            .chips{gap:5px}.chip{font-size:.63rem;padding:4px 10px}
        }

        /* ════════════════════ OFFLINE BANNER ════════════════════ */
        .offline-banner{
            position:fixed;top:0;left:0;right:0;z-index:9998;
            display:none;align-items:center;justify-content:center;gap:12px;
            padding:12px 24px;
            background:linear-gradient(135deg,#ff6b6b,#ee5a24);
            color:#fff;font-size:.82rem;font-weight:600;
            box-shadow:0 4px 24px rgba(238,90,36,.4);
            animation:offlineSlideDown .4s cubic-bezier(.34,1.56,.64,1);
        }
        .offline-banner.active{display:flex}
        .offline-banner.reconnected{
            background:linear-gradient(135deg,var(--success),#2abf80);
            animation:offlineSlideDown .4s cubic-bezier(.34,1.56,.64,1);
        }
        .offline-icon{font-size:1.2rem;animation:offlinePulse 1.5s ease-in-out infinite}
        .offline-text{display:flex;flex-direction:column;gap:1px}
        .offline-text strong{font-size:.85rem}
        .offline-text span{font-size:.72rem;opacity:.9}
        .offline-retry-btn{
            padding:6px 14px;border-radius:8px;border:2px solid rgba(255,255,255,.5);
            background:rgba(255,255,255,.15);color:#fff;font-size:.75rem;font-weight:700;
            cursor:pointer;transition:all .2s ease;backdrop-filter:blur(8px);
        }
        .offline-retry-btn:hover{background:rgba(255,255,255,.3);border-color:#fff}
        @keyframes offlineSlideDown{
            0%{transform:translateY(-100%);opacity:0}
            100%{transform:translateY(0);opacity:1}
        }
        @keyframes offlinePulse{
            0%,100%{opacity:1}50%{opacity:.5}
        }

        /* ════════════════════ EXPORT BUTTON ════════════════════ */
        .session-actions{display:flex;gap:8px;align-items:center}
        .export-btn{
            padding:7px 14px;border-radius:var(--radius);border:1px solid var(--glass-border);
            background:var(--surface2);color:var(--text-secondary);
            font-size:.72rem;font-weight:600;cursor:pointer;
            transition:all .2s ease;display:flex;align-items:center;gap:4px;
        }
        .export-btn:hover{
            background:var(--primary);color:#fff;border-color:var(--primary);
            transform:translateY(-1px);box-shadow:0 4px 12px rgba(124,106,255,.3);
        }
        .export-menu{
            position:absolute;top:100%;right:0;z-index:100;
            background:var(--surface);border:1px solid var(--glass-border);
            border-radius:var(--radius);padding:6px 0;min-width:160px;
            box-shadow:0 12px 40px rgba(0,0,0,.3);backdrop-filter:blur(20px);
            animation:exportMenuIn .2s ease;
        }
        .export-menu-item{
            display:block;width:100%;padding:10px 18px;border:none;
            background:none;color:var(--text-primary);font-size:.8rem;
            cursor:pointer;text-align:left;transition:background .15s ease;
        }
        .export-menu-item:hover{background:var(--surface2)}
        @keyframes exportMenuIn{
            0%{opacity:0;transform:translateY(-8px) scale(.95)}
            100%{opacity:1;transform:none}
        }