*{box-sizing:border-box;margin:0}body,html{height:100%}body{font-family:-apple-system,Segoe UI,Roboto,sans-serif;color:#343a40;background:#f8f9fa}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.25}}:root{--bg-app:#f8f9fa;--bg-surface:#fff;--bg-subtle:#f1f3f5;--border-color:#dee2e6;--border-strong:#ced4da;--text-main:#343a40;--text-secondary:#495057;--text-subtle:#6c757d;--primary-50:#e0f7fa;--primary-500:#17a2b8;--primary-600:#117a8b;--success:#047857;--success-bg:#ecfdf5;--warn:#b45309;--warn-bg:#fffbeb;--danger:#e11d48;--danger-bg:#fff1f2;--info:#1d4ed8;--info-bg:#eff6ff;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--shadow-xs:0 1px 2px rgba(0,0,0,.03);--shadow-sm:0 2px 4px rgba(0,0,0,.04)}.status-bar{justify-content:space-between;padding:8px 16px;background-color:var(--bg-surface);border-bottom:1px solid var(--border-color);box-shadow:var(--shadow-xs);z-index:10;min-height:44px}.status-bar,.status-left{display:flex;align-items:center}.status-left{gap:12px}.status-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:4px;font-weight:600;font-size:11.5px;border:1px solid transparent}.status-badge .dot{width:7px;height:7px;border-radius:50%}.status-connected{background-color:#ecfdf5;color:#047857;border-color:#a7f3d0}.status-connected .dot{background-color:#10b981}.status-connecting{background-color:#fffbeb;color:#b45309;border-color:#fef3c7}.status-connecting .dot{background-color:#f59e0b}.status-disconnected{background-color:#fff1f2;color:#e11d48;border-color:#fecdd3}.status-disconnected .dot{background-color:#ef4444}.status-ended{background-color:var(--bg-subtle);color:var(--text-subtle);border-color:var(--border-color)}.status-ended .dot{background-color:var(--text-subtle)}.call-meta{display:flex;align-items:center;gap:8px}.call-id-tag{font-family:JetBrains Mono,SFMono-Regular,monospace;font-size:11.5px;font-weight:600;color:var(--text-main);background:var(--bg-subtle);border:1px solid var(--border-color);padding:3px 8px;border-radius:var(--radius-sm);letter-spacing:.3px}.audio-equalizer{display:flex;align-items:flex-end;gap:2.5px;height:12px}.audio-equalizer span{width:2.5px;background-color:var(--success);border-radius:1px;animation:soundWave 1.2s ease-in-out infinite}.audio-equalizer span:first-child{height:40%;animation-delay:.1s}.audio-equalizer span:nth-child(2){height:80%;animation-delay:.3s}.audio-equalizer span:nth-child(3){height:60%;animation-delay:.2s}.audio-equalizer span:nth-child(4){height:100%;animation-delay:.4s}@keyframes soundWave{0%,to{height:30%}50%{height:100%}}.transcript-panel{flex:3 1;display:flex;flex-direction:column;background-color:var(--bg-app);overflow-y:auto;padding:16px 20px;gap:12px}.suggestions-panel::-webkit-scrollbar,.transcript-panel::-webkit-scrollbar{width:5px}.suggestions-panel::-webkit-scrollbar-thumb,.transcript-panel::-webkit-scrollbar-thumb{background-color:var(--border-strong);border-radius:3px}.transcript-line{display:flex;flex-direction:column;max-width:85%}.transcript-line.customer{align-self:flex-start}.transcript-line.agent{align-self:flex-end}.speaker-label{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;margin-bottom:3px;text-transform:uppercase;letter-spacing:.4px}.transcript-line.customer .speaker-label{color:var(--info)}.transcript-line.agent .speaker-label{color:var(--success);justify-content:flex-end}.bubble{padding:8px 12px;border-radius:8px;font-size:13px;line-height:1.5;box-shadow:var(--shadow-xs);word-wrap:break-word}.transcript-line.customer .bubble{background-color:var(--bg-surface);color:var(--text-main);border:1px solid var(--border-color);border-top-left-radius:2px}.transcript-line.agent .bubble{background-color:#f0fdf4;color:#155724;border:1px solid #c3e6cb;border-top-right-radius:2px}.transcript-line.partial .bubble{opacity:.75;font-style:italic;border-style:dashed}.typing-dot{display:inline-block;width:4px;height:4px;border-radius:50%;background-color:currentColor;margin-left:4px;animation:pulse 1s ease-in-out infinite}.overlap-tag{display:inline-flex;align-items:center;font-size:9.5px;font-weight:700;padding:1px 5px;border-radius:3px;background-color:var(--warn-bg);color:var(--warn);margin-left:6px;text-transform:uppercase}.ts-label{font-size:10px;opacity:.7;margin-left:auto;white-space:nowrap;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.empty-state,.ts-label{color:var(--text-subtle)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 16px;text-align:center;height:100%}.empty-state svg{margin-bottom:8px;color:var(--border-strong)}.empty-state p{font-size:12.5px;color:var(--text-secondary)}.suggestions-panel{flex:2 1;min-width:320px;max-width:420px;background-color:var(--bg-surface);border-left:1px solid var(--border-color);overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px}.panel-header{padding-bottom:10px;border-bottom:1px solid var(--border-color)}.panel-title{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-secondary)}.suggestion-card{border-radius:6px;padding:12px 14px;background:#fff;border:1px solid var(--border-color);box-shadow:0 1px 2px rgba(0,0,0,.03);transition:border-color .15s ease,box-shadow .15s ease;position:relative;width:100%;box-sizing:border-box}.suggestion-card:hover{border-color:var(--border-strong);box-shadow:0 2px 4px rgba(0,0,0,.04)}.kind-alert{border-left:3.5px solid var(--danger)}.kind-knowledge{border-left:3.5px solid var(--info)}.kind-answer{border-left:3.5px solid var(--success)}.card-top{justify-content:space-between;margin-bottom:8px;gap:8px}.card-top,.card-top-right{display:flex;align-items:center}.card-top-right{gap:6px;margin-left:auto}.card-badge{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:4px;letter-spacing:.3px}.badge-alert{background-color:#fff1f2;color:#e11d48;border:1px solid #fecdd3}.badge-knowledge{background-color:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}.badge-answer{background-color:#ecfdf5;color:#047857;border:1px solid #a7f3d0}.badge-generating{background-color:var(--bg-subtle);color:var(--text-secondary);border:1px solid var(--border-color)}.card-title{font-weight:700;margin-bottom:4px;line-height:1.4}.card-body,.card-title{font-size:13px;color:var(--text-main)}.card-body{line-height:1.55;white-space:pre-wrap;word-break:break-word;overflow-wrap:break-word;display:block;width:100%}.copy-btn{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:500;padding:3px 8px;border-radius:4px;border:1px solid var(--border-strong);background-color:#fff;color:var(--text-secondary);cursor:pointer;transition:all .15s ease;flex-shrink:0}.copy-btn:hover{background-color:var(--bg-subtle);color:var(--text-main)}.copy-btn.copied{background-color:var(--success);color:#fff;border-color:var(--success)}.sources-container{margin-top:8px;padding-top:8px;border-top:1px dashed var(--border-color);font-size:11.5px}.sources-container summary{cursor:pointer;font-weight:600;color:var(--info)}.sources-container summary:hover{text-decoration:underline}.sources-container p{padding:6px 8px;margin-top:4px;background-color:var(--bg-app);border-radius:4px;color:var(--text-secondary);font-size:11px;line-height:1.4;border:1px solid var(--border-color)}.card-generating{border-style:dashed;background-color:var(--bg-app)}.badge-new-modern{display:inline-flex;align-items:center;gap:4.5px;font-size:9px;font-weight:700;padding:2px 7.5px;border-radius:10px;letter-spacing:.4px;text-transform:uppercase;background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe}.badge-new-modern .beacon-dot{width:5px;height:5px;border-radius:50%;background:#2563eb;display:inline-block;box-shadow:0 0 0 0 rgba(37,99,235,.6);animation:beaconPulse 1.6s ease-in-out infinite}@keyframes beaconPulse{0%{transform:scale(.95);box-shadow:0 0 0 0 rgba(37,99,235,.6)}70%{transform:scale(1);box-shadow:0 0 0 5px rgba(37,99,235,0)}to{transform:scale(.95);box-shadow:0 0 0 0 rgba(37,99,235,0)}}.suggestion-card.kind-alert .badge-new-modern{background:#fef2f2;color:#dc2626;border:1px solid #fecdd3}.suggestion-card.kind-alert .badge-new-modern .beacon-dot{background:#dc2626;box-shadow:0 0 0 0 rgba(220,38,38,.6);animation:alertBeaconPulse 1.6s ease-in-out infinite}@keyframes alertBeaconPulse{0%{transform:scale(.95);box-shadow:0 0 0 0 rgba(220,38,38,.6)}70%{transform:scale(1);box-shadow:0 0 0 5px rgba(220,38,38,0)}to{transform:scale(.95);box-shadow:0 0 0 0 rgba(220,38,38,0)}}.suggestion-card.is-latest{border-left-width:4.5px;animation:newCardEntrance .45s cubic-bezier(.34,1.56,.64,1),newCardHighlight 3s ease-out forwards}.suggestion-card.kind-alert.is-latest{animation:newCardEntrance .45s cubic-bezier(.34,1.56,.64,1),alertNewCardHighlight 3s ease-out forwards}@keyframes newCardEntrance{0%{opacity:0;transform:translateY(-20px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes newCardHighlight{0%{background-color:#eff6ff;border-color:#93c5fd;box-shadow:0 4px 14px rgba(37,99,235,.18)}65%{background-color:#eff6ff;border-color:#bfdbfe;box-shadow:0 4px 12px rgba(37,99,235,.12)}to{background-color:var(--bg-surface);border-color:var(--border-color);box-shadow:var(--shadow-xs)}}@keyframes alertNewCardHighlight{0%{background-color:#fff1f2;border-color:#fca5a5;box-shadow:0 4px 14px rgba(220,38,38,.22)}65%{background-color:#fff1f2;border-color:#fecdd3;box-shadow:0 4px 12px rgba(220,38,38,.12)}to{background-color:var(--bg-surface);border-color:var(--border-color);box-shadow:var(--shadow-xs)}}