*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--pink:#f8d7da;--pink-mid:#f0b8be;--pink-dark:#d4848e;--cream:#fff4e6;--cream-dark:#f5e3c8;--green:#d8e2dc;--green-mid:#b3c9bc;--green-dark:#7aaa90;--bg:#fff4e6;--surface:#ffffffbf;--surface-2:#f8d7da59;--border:#d4848e40;--text:#5a3a40;--text-muted:#9a7a82;--font:"Nunito", system-ui, sans-serif;--status-connected:#7aaa90;--status-listening:#d4848e;--status-speaking:#b3a0c9;--status-error:#e07070}html,body,#root{height:100%;font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}.bg-orbs{pointer-events:none;z-index:0;position:fixed;inset:0;overflow:hidden}.orb{filter:blur(90px);opacity:.55;border-radius:50%;animation:22s ease-in-out infinite float;position:absolute}.orb-1{background:var(--pink);width:480px;height:480px;animation-delay:0s;top:-12%;right:-8%}.orb-2{background:var(--green);width:380px;height:380px;animation-delay:-9s;bottom:-12%;left:-8%}.orb-3{background:var(--cream-dark);width:280px;height:280px;animation-delay:-18s;top:48%;left:50%;transform:translate(-50%,-50%)}@keyframes float{0%,to{transform:translate(0)}33%{transform:translate(28px,-22px)}66%{transform:translate(-18px,18px)}}.app{z-index:1;flex-direction:column;min-height:100vh;display:flex;position:relative}.header{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);z-index:10;background:#fff9;justify-content:space-between;align-items:center;padding:18px 28px;display:flex;position:sticky;top:0}.logo{align-items:center;gap:12px;display:flex}.logo-icon{background:linear-gradient(135deg, var(--pink-dark), var(--green-dark));border-radius:14px;justify-content:center;align-items:center;width:44px;height:44px;font-size:22px;display:flex;box-shadow:0 4px 16px #d4848e59}.logo-text{background:linear-gradient(135deg, var(--pink-dark), var(--green-dark));-webkit-text-fill-color:transparent;letter-spacing:-.01em;-webkit-background-clip:text;background-clip:text;font-size:1.18rem;font-weight:800}.logo-sub{color:var(--text-muted);-webkit-text-fill-color:var(--text-muted);letter-spacing:.03em;margin-top:-2px;font-size:.68rem;font-weight:600;display:block}.status-chip{border:1px solid var(--border);background:var(--surface);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--text-muted);border-radius:999px;align-items:center;gap:7px;padding:7px 14px;font-size:.75rem;font-weight:700;transition:all .3s;display:flex}.status-chip.connected{color:var(--status-connected);background:#d8e2dc80;border-color:#7aaa9080}.status-chip.listening{color:var(--status-listening);background:#f8d7da8c;border-color:#d4848e80}.status-chip.speaking{color:var(--status-speaking);background:#b3a0c92e;border-color:#b3a0c980}.status-chip.error{color:var(--status-error);background:#e070701a;border-color:#e0707066}.dot{background:currentColor;border-radius:50%;width:7px;height:7px;animation:2s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.main{flex-direction:column;flex:1;justify-content:flex-start;align-items:center;gap:24px;padding:28px 20px 20px;display:flex}.viz-wrap{flex-shrink:0;justify-content:center;align-items:center;width:220px;height:220px;display:flex;position:relative}.ring{border:1.5px solid #d4848e2e;border-radius:50%;transition:border-color .5s,box-shadow .5s;position:absolute}.ring-1{width:220px;height:220px;animation:30s linear infinite spin}.ring-2{border-color:#7aaa9033;width:168px;height:168px;animation:20s linear infinite reverse spin}.ring-3{border-color:#b3a0c938;width:118px;height:118px;animation:15s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.viz-wrap.listening .ring{border-color:#d4848e8c;box-shadow:0 0 24px #d4848e1a}.viz-wrap.speaking .ring{border-color:#7aaa908c;box-shadow:0 0 24px #7aaa901a}.glow{background:linear-gradient(135deg, var(--pink-mid), var(--green-mid));opacity:.22;filter:blur(26px);border-radius:50%;width:72px;height:72px;transition:all .6s;position:absolute}.viz-wrap.listening .glow{opacity:.6;background:radial-gradient(circle, var(--pink-mid), var(--pink));width:110px;height:110px}.viz-wrap.speaking .glow{opacity:.5;background:radial-gradient(circle, var(--green-mid), var(--green));width:100px;height:100px}canvas{z-index:2;position:absolute}.status-text{color:var(--text-muted);text-align:center;max-width:320px;font-size:.9rem;font-weight:600;line-height:1.6;transition:all .3s}.transcript{width:100%;max-width:540px;max-height:200px;padding:0 4px;overflow-y:auto;-webkit-mask-image:linear-gradient(#0000 0%,#000 12% 88%,#0000 100%);mask-image:linear-gradient(#0000 0%,#000 12% 88%,#0000 100%)}.transcript::-webkit-scrollbar{width:3px}.transcript::-webkit-scrollbar-thumb{background:#d4848e40;border-radius:10px}.t-list{flex-direction:column;gap:8px;padding:10px 0;display:flex}.t-item{background:var(--surface);border:1px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:14px;align-items:flex-start;gap:10px;padding:10px 14px;animation:.3s fadeUp;display:flex}.t-item.user{border-left:3px solid var(--pink-dark)}.t-item.gemini{border-left:3px solid var(--green-dark)}.t-label{text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;padding-top:2px;font-size:.65rem;font-weight:800}.t-item.user .t-label{color:var(--pink-dark)}.t-item.gemini .t-label{color:var(--green-dark)}.t-text{color:var(--text);opacity:.92;font-size:.82rem;line-height:1.55}@keyframes fadeUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.text-input-area{align-items:flex-end;gap:10px;width:100%;max-width:540px;display:flex}.text-input-field{border:1.5px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-family:var(--font);color:var(--text);resize:none;background:#ffffffbf;border-radius:22px;outline:none;flex:1;min-height:48px;max-height:120px;padding:12px 18px;font-size:.9rem;font-weight:500;line-height:1.5;transition:border-color .25s,box-shadow .25s;box-shadow:0 2px 12px #d4848e14}.text-input-field::placeholder{color:var(--text-muted);font-weight:500}.text-input-field:focus{border-color:var(--pink-dark);box-shadow:0 0 0 3px #d4848e26,0 2px 12px #d4848e1a}.text-send-btn{cursor:pointer;background:linear-gradient(135deg, var(--pink-dark), var(--green-dark));border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;transition:transform .2s,box-shadow .2s,opacity .2s;display:flex;box-shadow:0 4px 18px #d4848e59}.text-send-btn:hover:not(:disabled){transform:scale(1.08);box-shadow:0 6px 24px #d4848e80}.text-send-btn:disabled{opacity:.45;cursor:not-allowed}.footer{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--border);background:#ffffff80;flex-direction:column;align-items:center;gap:12px;width:100%;padding:16px 20px 36px;display:flex}.footer-controls{align-items:center;gap:16px;display:flex}.mic-btn{cursor:pointer;background:linear-gradient(135deg, var(--pink-dark), var(--pink-mid));color:#fff;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:none;border:none;border-radius:50%;outline:none;justify-content:center;align-items:center;width:76px;height:76px;transition:transform .2s,box-shadow .2s;display:flex;position:relative;box-shadow:0 6px 28px #d4848e61}.mic-btn:hover{transform:scale(1.07);box-shadow:0 10px 36px #d4848e80}.mic-btn.active{background:linear-gradient(135deg,#c4606c,#a84550);animation:1.5s ease-in-out infinite micPulse;transform:scale(.96)}.mic-btn.ready{background:linear-gradient(135deg, var(--green-dark), var(--green-mid));box-shadow:0 6px 28px #7aaa9061}@keyframes micPulse{0%,to{box-shadow:0 4px 24px #d4848e8c}50%{box-shadow:0 4px 48px #d4848ecc}}.ripple{border:2px solid var(--pink-dark);opacity:0;pointer-events:none;border-radius:50%;position:absolute;inset:-4px}.mic-btn.active .ripple{animation:1.5s ease-out infinite ripple}@keyframes ripple{0%{opacity:.6;inset:-4px}to{opacity:0;inset:-28px}}.end-btn{color:#fff;cursor:pointer;height:48px;font-size:.9rem;font-weight:700;font-family:var(--font);background:linear-gradient(135deg,#e07070,#c45050);border:none;border-radius:50px;padding:0 22px;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 16px #e070704d}.end-btn:hover{transform:scale(1.05);box-shadow:0 6px 24px #e0707073}.mic-hint{color:var(--text-muted);text-align:center;font-size:.75rem;font-weight:600}@media (width<=600px){.header{padding:14px 16px}.logo-icon{width:38px;height:38px;font-size:18px}.logo-text{font-size:1rem}.logo-sub{display:none}.main{gap:18px;padding:20px 14px 14px}.viz-wrap,.ring-1{width:180px;height:180px}.ring-2{width:138px;height:138px}.ring-3{width:96px;height:96px}.transcript{max-height:160px}.text-input-field{font-size:.85rem}.mic-btn{width:66px;height:66px}.footer{padding:14px 16px 28px}}@media (width<=380px){.viz-wrap,.ring-1{width:150px;height:150px}.ring-2{width:115px;height:115px}.ring-3{width:80px;height:80px}}@media (width>=768px) and (width<=1024px){.main{gap:26px;padding:32px 28px 24px}.transcript{max-height:220px}}