:root{--primary:#2563eb;--primary-dark:#1d4ed8;--secondary:#475569;--bg:#f8fafc;--text:#0f172a;--white:#fff;--red:#ef4444;--bubble-user:#e0f2fe;--bubble-error:#fee2e2}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg);color:var(--text);font-family:system-ui,-apple-system,sans-serif;font-size:18px;overflow:hidden}.container{flex-direction:column;height:100vh;display:flex}.header{text-align:center;background:var(--white);z-index:10;border-bottom:1px solid #e2e8f0;flex-shrink:0;padding:15px 0}.header h1{color:var(--primary-dark);font-size:1.5rem}.chat-area{flex-direction:column;flex:1;gap:20px;padding:20px 20px 180px;display:flex;overflow-y:auto}.empty-state{color:#94a3b8;flex:1;justify-content:center;align-items:center;font-style:italic;display:flex}.message-bubble{background:var(--white);cursor:pointer;border-radius:16px 16px 16px 4px;justify-content:space-between;align-self:flex-start;align-items:flex-start;gap:15px;max-width:85%;padding:15px;transition:transform .1s,background-color .2s;animation:.3s ease-out pop-in;display:flex;box-shadow:0 2px 4px #0000000d}.message-bubble:active{background-color:#f1f5f9;transform:scale(.98)}.message-content-wrapper{flex:1}.copy-icon{flex-shrink:0;justify-content:center;align-items:center;padding-top:5px;display:flex}.message-bubble.user{background:var(--white);border:1px solid #e2e8f0}.message-bubble.error{background:var(--bubble-error);color:var(--red-dark)}.message-meta{color:#64748b;text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px;font-size:.8rem;font-weight:600}.message-content{font-size:1.2rem;line-height:1.5}.footer{background:var(--white);z-index:20;border-top:1px solid #e2e8f0;flex-direction:column;gap:15px;width:100%;padding:20px;display:flex;position:fixed;bottom:0;left:0;box-shadow:0 -4px 6px -1px #0000001a}.visualizer-wrapper{justify-content:center;align-items:center;height:60px;display:flex}.controls{align-items:center;gap:15px;width:100%;max-width:600px;margin:0 auto;display:flex}.mode-switch-container{background:#f1f5f9;border-radius:12px;flex:1;padding:4px;display:flex}.mode-btn{color:var(--secondary);cursor:pointer;background:0 0;border:none;border-radius:8px;flex:1;padding:12px;font-size:1rem;font-weight:600;transition:all .2s}.mode-btn.active{background:var(--white);color:var(--primary);box-shadow:0 1px 2px #0000001a}.record-btn{background:var(--primary);width:64px;height:64px;color:var(--white);cursor:pointer;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:all .2s;display:flex;box-shadow:0 4px 6px -1px #2563eb4d}.record-btn:active{transform:scale(.95)}.record-btn.recording{background:var(--red);animation:1.5s infinite pulse-red}.record-btn.loading{background:var(--secondary);cursor:not-allowed}.timer-text{font-variant-numeric:tabular-nums;font-size:1.2rem;font-weight:700}@keyframes pop-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-red{0%{box-shadow:0 0 #ef4444b3}70%{box-shadow:0 0 0 10px #ef444400}to{box-shadow:0 0 #ef444400}}.spin-small{width:20px;height:20px;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}