:root{--color-primary: #0284c7;--color-primary-light: #38bdf8;--color-secondary: #0d9488;--color-accent-tech: #6366f1;--color-bg-base: #f8fafc;--color-surface-glass: rgba(255, 255, 255, .85);--color-surface-floating: rgba(255, 255, 255, .95);--color-surface-dark: #0f172a;--color-text-primary: #0f172a;--color-text-secondary: #475569;--color-text-muted: #94a3b8;--color-text-inverse: #ffffff;--color-status-active: #10b981;--color-status-error: #ef4444;--color-status-warning: #f59e0b;--gradient-tech-medical: linear-gradient(135deg, #e0f2fe 0%, #f0fdfa 100%);--gradient-glow: radial-gradient(circle at 50% 50%, rgba(56, 189, 248, .15) 0%, transparent 70%);--gradient-card: linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .5) 100%);--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-6: 1.5rem;--space-8: 2rem;--space-12: 3rem;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 20px;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-float: 0 10px 15px -3px rgba(148, 163, 184, .1), 0 4px 6px -2px rgba(148, 163, 184, .05);--shadow-glow: 0 0 20px rgba(56, 189, 248, .2);--shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, .07);--border-light: 1px solid rgba(148, 163, 184, .2);--border-glass: 1px solid rgba(255, 255, 255, .5);--transition-base: .2s cubic-bezier(.4, 0, .2, 1);--transition-smooth: .4s cubic-bezier(.25, .8, .25, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--color-bg-base);color:var(--color-text-primary);line-height:1.6;min-height:100vh;background-image:linear-gradient(rgba(14,165,233,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(14,165,233,.03) 1px,transparent 1px);background-size:32px 32px;-webkit-font-smoothing:antialiased}#root{min-height:100vh;display:flex;flex-direction:column}.app-container{max-width:1400px;margin:0 auto;padding:var(--space-6);min-height:100vh;display:flex;flex-direction:column;position:relative}.app-container:before{content:"";position:absolute;top:-200px;left:50%;transform:translate(-50%);width:800px;height:800px;background:radial-gradient(circle,rgba(14,165,233,.08) 0%,transparent 70%);z-index:-1;pointer-events:none}.app-header{text-align:center;margin-bottom:var(--space-8);display:flex;flex-direction:column;align-items:center}.logo-area{margin-bottom:var(--space-4);background:#fff;padding:var(--space-3);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);border:var(--border-light)}.app-title{font-size:2.5rem;font-weight:800;letter-spacing:-.03em;background:linear-gradient(135deg,var(--color-primary-light) 0%,var(--color-primary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:var(--space-2)}.app-subtitle{color:var(--color-text-secondary);font-weight:500;font-size:.95rem;background:#fff;padding:4px 12px;border-radius:var(--radius-full);border:var(--border-light);box-shadow:var(--shadow-sm)}.main-content{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--space-8);width:100%}.personality-section{width:100%;max-width:900px}.section-title{font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;color:var(--color-text-muted);font-weight:700;text-align:center;margin-bottom:var(--space-4);position:relative;display:flex;align-items:center;justify-content:center;gap:var(--space-2)}.section-title:before,.section-title:after{content:"";height:1px;width:30px;background:var(--color-text-muted);opacity:.3}.personality-grid{display:flex;gap:var(--space-6);justify-content:center;flex-wrap:wrap}.personality-card{background:var(--color-surface-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:var(--border-glass);border-radius:var(--radius-lg);padding:var(--space-6);width:280px;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;text-align:left;transition:var(--transition-smooth);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}.personality-card.selected{background:#fff;border-color:var(--color-primary-light);box-shadow:none;transform:translateY(-2px)}.personality-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--color-primary-light),var(--color-accent-tech));opacity:0;transition:var(--transition-base)}.personality-card.selected:before{opacity:1}.personality-header-row{display:flex;flex-direction:row;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3);width:100%}.personality-icon{width:44px;height:44px;color:var(--color-text-muted);transition:var(--transition-base);background:var(--color-bg-base);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;padding:8px;flex-shrink:0}.personality-card.selected .personality-icon{color:var(--color-primary);background:#f0f9ff}.personality-name{font-size:1.1rem;font-weight:700;color:var(--color-text-primary);margin-bottom:0}.personality-desc{font-size:.8125rem;color:var(--color-text-secondary);line-height:1.5}.call-section{display:flex;flex-direction:column;align-items:center;gap:var(--space-8);padding:var(--space-8);background:#fff;border-radius:32px;box-shadow:var(--shadow-glass),0 20px 40px -10px #0000000d;border:var(--border-light);position:relative;width:100%;max-width:900px}.call-section:after{content:"";position:absolute;top:20px;right:20px;width:8px;height:8px;border-radius:50%;background:var(--color-text-muted);box-shadow:inset 0 1px 2px #0000001a}.call-info{text-align:center;display:flex;flex-direction:column;gap:var(--space-1)}.call-status-label{font-family:JetBrains Mono,Fira Code,monospace;font-size:.75rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.call-action-text{font-size:1.25rem;font-weight:600;color:var(--color-text-primary)}.call-button-wrapper{width:100%;padding:1rem;border-top:1px solid var(--border-light);background:#ffffff80;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.call-button-rect{width:100%;height:40px;border-radius:var(--radius-md);background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;font-size:.85rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 6px -1px #0284c733;position:relative;overflow:hidden}.call-button-rect:hover:not(:disabled){background:var(--color-primary-light);transform:translateY(-1px);box-shadow:0 8px 12px -2px #0284c74d}.call-button-rect:disabled{opacity:.6;cursor:not-allowed;background:var(--color-text-muted)}.call-button-rect.active-blue{background:var(--color-primary);color:#fff;border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 2px 8px #0000001a}.call-button-rect.active-blue:hover{background:var(--color-primary-light)}.spinner{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.live-dot{width:8px;height:8px;background:var(--color-status-active);border-radius:50%;margin-left:auto;margin-right:-4px;animation:pulse-green 1.5s infinite}@keyframes pulse-green{0%{transform:scale(.95);box-shadow:0 0 #10b981b3}70%{transform:scale(1);box-shadow:0 0 0 6px #10b98100}to{transform:scale(.95);box-shadow:0 0 #10b98100}}.audio-bar-white{width:3px;background:#ffffffe6;border-radius:2px;height:4px;animation:equalize .5s ease-in-out infinite alternate}.audio-bar-white:nth-child(1){animation-delay:-.4s}.audio-bar-white:nth-child(2){animation-delay:-.2s}.audio-bar-white:nth-child(3){animation-delay:-.5s}.audio-bar-white:nth-child(4){animation-delay:-1s}.visualizer-right .audio-bar-white:nth-child(1){animation-delay:-1s}.visualizer-right .audio-bar-white:nth-child(2){animation-delay:-.5s}.visualizer-right .audio-bar-white:nth-child(3){animation-delay:-.2s}.visualizer-right .audio-bar-white:nth-child(4){animation-delay:-.4s}.call-status{background:var(--color-bg-base);padding:8px 16px;border-radius:var(--radius-full);display:flex;align-items:center;gap:10px;box-shadow:inset 0 2px 4px #0000000f}.status-indicator{width:8px;height:8px;border-radius:50%;background:var(--color-text-muted)}.status-indicator.connected{background:var(--color-status-active);box-shadow:0 0 8px var(--color-status-active)}.status-indicator.connecting{background:var(--color-status-warning);animation:blink 1s infinite}@keyframes blink{50%{opacity:.5}}.status-text{font-size:.85rem;font-weight:600;color:var(--color-text-secondary)}.audio-visualizer{display:flex;align-items:center;gap:3px;height:20px}.audio-bar{width:3px;background:var(--color-primary);border-radius:2px;height:4px;animation:equalize .5s ease-in-out infinite alternate}.audio-bar:nth-child(1){animation-delay:-.4s}.audio-bar:nth-child(2){animation-delay:-.2s}.audio-bar:nth-child(3){animation-delay:-.5s}.audio-bar:nth-child(4){animation-delay:-1s}.audio-bar:nth-child(5){animation-delay:-.1s}@keyframes equalize{0%{height:4px;opacity:.5}to{height:18px;opacity:1}}.transcript-section{width:100%;max-width:600px;background:#fff;border:var(--border-light);border-radius:var(--radius-md);padding:24px;font-family:JetBrains Mono,monospace;font-size:.9rem;position:relative;box-shadow:var(--shadow-sm)}.transcript-section h3{font-size:.75rem;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:12px;border-bottom:1px dashed var(--color-text-muted);padding-bottom:8px}@media(max-width:768px){:root{--space-6: 1rem;--space-8: 1.5rem}.app-title{font-size:1.75rem}.personality-grid{margin-bottom:var(--space-2);flex-direction:column;align-items:stretch;gap:var(--space-4)}.personality-card{flex-direction:column;width:100%;height:auto;align-items:flex-start;padding:var(--space-4);text-align:left;box-shadow:none}.personality-header-row{gap:var(--space-3);margin-bottom:var(--space-2)}.personality-icon{width:36px;height:36px;padding:6px}.personality-name{font-size:1rem}.personality-desc{font-size:.75rem;-webkit-line-clamp:2}.chat-container-wrapper{margin:.25rem auto 0!important;width:100%}.chat-card{height:80vh!important;max-height:1000px}}:root{--role-font-size: .8125rem}@media(max-width:768px){:root{--role-font-size: .75rem}}.chat-container-wrapper{width:100%;max-width:600px;margin:1rem auto 0}.chat-card{height:720px;width:100%;border:1px solid var(--color-primary-light)!important;box-shadow:none!important}