:root{color:#111827;background:#eef2f7;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 20% 10%,rgba(23,107,93,.14),transparent 28%),linear-gradient(180deg,#f7fafc,#e7edf5)}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}.app-shell{min-height:100vh;padding:22px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:780px;margin:0 auto 16px;color:#111827}.topbar h1,.topbar p{margin:0}.topbar p{color:#64748b;font-size:13px;font-weight:800}.topbar h1{font-size:24px;line-height:1.2}.toolbar-button{min-height:38px;border:1px solid #cbd5e1;border-radius:999px;padding:8px 14px;color:#334155;background:#ffffffd1;font-size:13px;font-weight:800}.driver-stage{display:flex;align-items:flex-start;justify-content:center;gap:24px;max-width:820px;margin:0 auto;overflow-x:auto;padding-bottom:24px}.phone-panel{flex:0 0 360px;width:360px;height:640px;overflow:hidden;border:1px solid #d8dee8;border-radius:28px;background:#f8fafc;box-shadow:0 18px 48px #0f172a24}.call-panel{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;padding:18px;color:#111827;background:linear-gradient(180deg,#f8fbff,#eef4fb)}.phone-status{display:flex;justify-content:space-between;gap:12px;color:#64748b;font-size:12px;font-weight:800}.caller-block{display:flex;min-width:0;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}.caller-avatar{position:relative;display:grid;place-items:center;width:96px;height:96px;border-radius:50%;color:#fff;background:linear-gradient(135deg,#176b5d,#0f766e 48%,#1d4ed8);box-shadow:0 16px 34px #0f766e42}.caller-avatar span{z-index:2;font-size:28px;font-weight:900}.caller-avatar i{position:absolute;inset:-8px;border:1px solid rgba(23,107,93,.2);border-radius:50%}.caller-avatar i:nth-child(3){inset:-18px}.caller-avatar i:nth-child(4){inset:-28px}.caller-avatar--speaking i,.caller-avatar--processing i{animation:pulse-ring 1.6s ease-out infinite}.caller-avatar--speaking i:nth-child(3),.caller-avatar--processing i:nth-child(3){animation-delay:.18s}.caller-avatar--speaking i:nth-child(4),.caller-avatar--processing i:nth-child(4){animation-delay:.34s}.caller-block h2{max-width:100%;margin:10px 0 0;overflow-wrap:anywhere;font-size:25px;line-height:1.2}.caller-block p{margin:0;color:#64748b;font-size:13px;font-weight:800}.voice-state{display:grid;min-height:86px;align-content:center;justify-items:center;gap:10px;border:1px solid #dbe3ee;border-radius:22px;padding:14px;color:#334155;background:#ffffffc2;text-align:center;font-size:13px;font-weight:800}.voice-state--speaking,.voice-state--listening{border-color:#176b5d47;background:#ecfdf5}.voice-state--processing,.voice-state--dialing{border-color:#2563eb38;background:#eff6ff}.voice-state--ended{border-color:#64748b33;background:#f8fafc}.voice-state--muted{border-color:#ef444442;background:#fff1f2}.wave-bars,.processing-dots{display:flex;align-items:center;justify-content:center;gap:5px;min-height:18px}.wave-bars i{display:block;width:5px;height:12px;border-radius:999px;background:#176b5d;animation:wave .9s ease-in-out infinite}.wave-bars i:nth-child(2){animation-delay:.12s}.wave-bars i:nth-child(3){animation-delay:.24s}.wave-bars i:nth-child(4){animation-delay:.36s}.processing-dots i{width:7px;height:7px;border-radius:50%;background:#2563eb;animation:dot 1s ease-in-out infinite}.processing-dots i:nth-child(2){animation-delay:.12s}.processing-dots i:nth-child(3){animation-delay:.24s}.call-settings{display:grid;gap:12px;border:1px solid #dbe3ee;border-radius:20px;padding:12px;background:#ffffffc7}.compact-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}.compact-fields label{display:grid;min-width:0;gap:4px;color:#475569;font-size:11px;font-weight:800}.compact-fields label:nth-child(3),.compact-fields label:nth-child(4){grid-column:span 2}.compact-fields input{width:100%;min-width:0;min-height:34px;border:1px solid #cbd5e1;border-radius:11px;padding:7px 9px;color:#0f172a;background:#fff;font-size:12px;font-weight:750}.template-strip{display:flex;gap:7px;overflow-x:auto;padding-bottom:2px}.template-chip{flex:0 0 auto;min-height:31px;border:1px solid #cbd5e1;border-radius:999px;padding:6px 10px;color:#334155;background:#fff;font-size:11px;font-weight:900;white-space:nowrap}.template-chip--active{border-color:#176b5d;color:#075e52;background:#dcfce7}.call-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding-top:14px}.call-action{display:grid;justify-items:center;gap:5px;min-width:0;border:0;color:#475569;background:transparent;font-size:11px;font-weight:800}.call-action__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;color:#0f172a;background:#fff;box-shadow:inset 0 0 0 1px #dbe3ee;font-size:17px;font-weight:950}.call-action.active .call-action__icon{color:#fff;background:#64748b}.call-action--start .call-action__icon{color:#fff;background:#176b5d;box-shadow:0 12px 24px #176b5d38}.call-action--end .call-action__icon{color:#fff;background:#dc2626;box-shadow:0 12px 24px #dc262633}.transcript-panel{display:grid;grid-template-rows:auto minmax(0,1fr);background:#f8fafc}.transcript-header{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #e2e8f0;padding:18px}.transcript-header>div{display:grid;gap:2px}.transcript-header strong{font-size:16px}.transcript-header span{color:#64748b;font-size:12px}.status-pill{width:max-content;border-radius:999px;padding:5px 10px;color:#334155;background:#e2e8f0;font-size:12px;font-weight:900}.status-pill.active{color:#075e52;background:#dcfce7}.transcript-body{display:grid;align-content:start;gap:14px;overflow-y:auto;padding:18px}.chat-row{display:grid;gap:5px;max-width:86%}.chat-row--ai{justify-self:start}.chat-row--customer{justify-self:end}.chat-row--system{justify-self:center;max-width:100%}.speaker-label{color:#64748b;font-size:11px;font-weight:900}.chat-row--customer .speaker-label{text-align:right}.chat-row--system .speaker-label{text-align:center}.chat-bubble{border-radius:18px;padding:10px 12px;color:#0f172a;background:#fff;font-size:13px;line-height:1.55;overflow-wrap:anywhere;box-shadow:0 10px 20px #0f172a0d}.chat-bubble--ai{border-bottom-left-radius:6px;background:#dbeafe;color:#1e3a8a}.chat-bubble--customer{border-bottom-right-radius:6px;background:#dcfce7;color:#166534}.chat-bubble--system{color:#475569;background:#e2e8f0;text-align:center}.bubble-status{display:inline-flex;margin-right:6px;border-radius:999px;padding:2px 6px;color:#075e52;background:#ffffffa8;font-size:10px;font-weight:900}.listening-row,.processing-row{display:flex;align-items:center;justify-content:center;gap:10px;border:1px dashed #cbd5e1;border-radius:18px;padding:12px;color:#475569;background:#fff;font-size:13px;font-weight:800}.error-banner{position:fixed;right:20px;bottom:20px;max-width:min(520px,calc(100vw - 40px));border:1px solid #fecaca;border-radius:12px;padding:12px 14px;color:#991b1b;background:#fff1f2;box-shadow:0 12px 28px #7f1d1d24}@keyframes pulse-ring{0%{opacity:.6;transform:scale(.9)}to{opacity:0;transform:scale(1.18)}}@keyframes wave{0%,to{height:7px}50%{height:18px}}@keyframes dot{0%,to{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}@media(max-width:780px){.app-shell{padding:16px}.topbar{align-items:flex-start;flex-direction:column;max-width:360px}.driver-stage{align-items:center;flex-direction:column;overflow-x:visible}.phone-panel{width:min(100%,360px);flex-basis:auto}}@media(max-width:390px){.app-shell{padding:12px}.phone-panel{height:620px;border-radius:22px}.call-panel{padding:14px}.call-action__icon{width:42px;height:42px}}