*{box-sizing:border-box;margin:0}body{font-family:-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px;color:#1a1d21;background:#f4f5f7}.app{display:flex;flex-direction:column;height:100vh}.status{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#fff;border-bottom:1px solid #e2e4e8;font-weight:600}.status .dot{width:8px;height:8px;border-radius:50%;background:#999}.status-connected .dot{background:#22a06b}.status-connecting .dot{background:#e2a300}.status-disconnected .dot{background:#d43f3f}.status-ended .dot{background:#666}.call-id{margin-left:auto;font-weight:400;color:#888;font-family:monospace}.status .back{border:none;background:none;font-size:16px;cursor:pointer;padding:0 4px 0 0;color:#555}.status .back:hover{color:#1663c7}main{display:flex;flex:1;min-height:0}.transcript{flex:3;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:6px}.line{display:flex;gap:8px;max-width:92%}.line .who{flex-shrink:0;font-weight:700;font-size:11px;padding-top:3px;width:30px}.line .text{background:#fff;border-radius:8px;padding:6px 10px;line-height:1.45}.line.customer .who{color:#1663c7}.line.customer .text{border:1px solid #cfe0f5}.line.agent{align-self:flex-end;flex-direction:row-reverse}.line.agent .who{color:#22a06b;text-align:right}.line.agent .text{border:1px solid #cdeadd}.line.partial .text{opacity:.55;font-style:italic}.line.overlap .text{border-left:3px solid #e2a300}.suggestions{flex:2;min-width:260px;overflow-y:auto;padding:12px;background:#fff;border-left:1px solid #e2e4e8}.suggestions h2{font-size:13px;text-transform:uppercase;color:#666;margin-bottom:10px}.card{border:1px solid #e2e4e8;border-radius:8px;padding:10px;margin-bottom:10px;background:#fafbfc}.card.kind-knowledge{border-left:3px solid #1663c7}.card.kind-alert{border-left:3px solid #d43f3f}.card.generating{border-style:dashed;opacity:.85}.card-title{display:flex;justify-content:space-between;align-items:center;font-weight:600;margin-bottom:6px;font-size:13px}.card-title button{font-size:11px;padding:2px 8px;border:1px solid #ccc;border-radius:4px;background:#fff;cursor:pointer}.card-title button:hover{background:#f0f1f3}.card-body{line-height:1.5;white-space:pre-wrap}.sources{margin-top:8px;font-size:12px}.sources summary{cursor:pointer;color:#1663c7}.sources p{padding:6px 0 0 12px;color:#555}.empty{color:#999;text-align:center;padding:24px 8px}code{background:#eee;padding:1px 5px;border-radius:3px}.calls-list{max-width:640px;margin:0 auto;padding:16px}.calls-list-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}.calls-list-header h1{font-size:18px}.calls-list-header .count{background:#22a06b;color:#fff;border-radius:999px;font-size:12px;padding:2px 9px;font-weight:700}.calls-list ul{list-style:none;display:flex;flex-direction:column;gap:8px}.calls-list li{background:#fff;border:1px solid #e2e4e8;border-radius:8px;padding:10px 12px;cursor:pointer;transition:border-color .15s}.calls-list li:hover{border-color:#1663c7}.calls-list .row-main{display:flex;align-items:center;gap:8px}.calls-list .dot.live{width:8px;height:8px;border-radius:50%;background:#22a06b}.calls-list .call-id{font-family:monospace;font-weight:600}.calls-list .started-at{margin-left:auto;color:#888;font-size:12px}.calls-list .last-text{margin-top:4px;color:#555;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 560px){main{flex-direction:column}.suggestions{border-left:none;border-top:1px solid #e2e4e8}}