:root{--primary-blue: #044ef4;--dark-blue: #0338c9;--light-blue: #3d6fff;--accent-pink: #f72a72;--success-green: #10b981;--bg-gray: #f8fafc;--card-gray: #ffffff;--border-gray: #e2e8f0;--text-dark: #1e293b;--text-medium: #64748b;--text-light: #94a3b8;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: "SF Mono", "Cascadia Code", "Fira Code", monospace}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:var(--font-sans);background:var(--bg-gray);color:var(--text-dark);line-height:1.5;-webkit-font-smoothing:antialiased}#app{min-height:100vh}code,pre{font-family:var(--font-mono)}a{color:var(--primary-blue);text-decoration:none}a:hover{text-decoration:underline}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-gray)}::-webkit-scrollbar-thumb{background:var(--border-gray);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-light)}.container{display:flex;height:100vh;max-width:100%;margin:0}.sidebar{width:400px;min-width:400px;background:#fff;border-right:1px solid var(--border-gray);display:flex;flex-direction:column;overflow-y:auto;box-shadow:2px 0 10px #0000000d}.sidebar-header{padding:30px;background:var(--primary-blue);position:relative}.sidebar-header:before{content:"";position:absolute;top:20px;right:20px;width:80px;height:80px;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="rgba(255,255,255,0.1)" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" /></svg>') no-repeat center;background-size:contain;opacity:.15}.sidebar-header h1{font-size:1.8rem;margin-bottom:8px;color:#fff;font-weight:700;position:relative;z-index:1}.sidebar-header .subtitle{font-size:.95rem;color:#ffffffe6;position:relative;z-index:1}.user-info{margin-top:20px;padding-top:15px;border-top:1px solid rgba(255,255,255,.2);display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}.user-info span{font-size:.85rem;color:#ffffffe6}.btn-logout{padding:6px 14px;background:#ffffff26;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:6px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .3s}.btn-logout:hover{background:#ffffff40;border-color:#ffffff80}.sidebar-content{padding:30px;flex:1}.content-area{flex:1;display:flex;flex-direction:column;overflow-y:auto;background:var(--bg-gray);padding:30px;gap:20px}.card{background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a;padding:30px;border:1px solid var(--border-gray)}.card h2{margin-bottom:20px;color:var(--primary-blue);font-size:1.5rem;font-weight:700}.sidebar-card{background:transparent;box-shadow:none;padding:0}.sidebar-card h2{font-size:1.3rem;margin-bottom:20px;color:var(--text-dark);font-weight:600}.btn{padding:12px 24px;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s}.btn-primary{background:var(--primary-blue);color:#fff;width:100%}.btn-primary:hover{background:var(--dark-blue);transform:translateY(-2px);box-shadow:0 4px 12px #044ef44d}.btn-secondary{background:var(--accent-pink);color:#fff;width:100%}.btn-secondary:hover:not(:disabled){background:#e01a5e;transform:translateY(-2px);box-shadow:0 4px 12px #f72a724d}.btn-ethan{background:linear-gradient(135deg,#044ef4,#3d6fff);color:#fff;width:100%;position:relative;overflow:hidden}.btn-ethan:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #044ef466}.btn-small{padding:6px 14px;font-size:.85rem}.btn-outline{background:transparent;border:1px solid var(--border-gray);color:var(--text-medium)}.btn-outline:hover{border-color:var(--primary-blue);color:var(--primary-blue)}.btn:disabled{opacity:.5;cursor:not-allowed}.button-group{display:flex;flex-direction:column;gap:12px;margin-top:25px}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-weight:600;color:var(--text-dark);font-size:.9rem}.form-group input[type=date],.form-group input[type=text],.form-group select{width:100%;padding:12px;border:2px solid var(--border-gray);border-radius:8px;font-size:1rem;transition:all .3s;color:var(--text-dark);background:#fff}.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--primary-blue);box-shadow:0 0 0 3px #044ef41a}.filters-sidebar{margin-top:20px}.filters-separator{height:1px;background:linear-gradient(90deg,var(--border-gray) 0%,transparent 100%);margin-bottom:20px}.filter-section{margin-bottom:20px;padding:15px;background:var(--bg-gray);border-radius:8px;border:1px solid var(--border-gray)}.filter-section h3{font-size:.95rem;font-weight:600;color:var(--text-dark);margin-bottom:12px}.checkbox-label{display:flex;align-items:center;margin-bottom:10px;cursor:pointer;font-size:.9rem;color:var(--text-medium);gap:8px;-webkit-user-select:none;user-select:none}.checkbox-label:last-child{margin-bottom:0}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:var(--primary-blue)}.login-container{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1rem;background:var(--bg-gray)}.login-card{background:#fff;border:1px solid var(--border-gray);border-radius:12px;padding:2.5rem;width:100%;max-width:400px;text-align:center;box-shadow:0 4px 6px #0000001a}.login-card h1{font-size:1.8rem;margin-bottom:.25rem;color:var(--primary-blue);font-weight:700}.login-subtitle{color:var(--text-medium);margin-bottom:1.5rem;font-size:.95rem}.login-card .form-group{text-align:left}.login-card .btn{width:100%;margin-top:.5rem}.error-message{color:#ef4444;font-size:.85rem;margin-bottom:.75rem}.loading{text-align:center;padding:60px 40px;background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a}.spinner{border:4px solid var(--border-gray);border-top:4px solid var(--primary-blue);border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite;margin:0 auto 20px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading p{color:var(--text-medium);font-weight:500}.error-banner{background:#ef44441a;border:1px solid #ef4444;border-radius:8px;padding:.75rem 1rem;color:#ef4444;font-size:.9rem}.empty-state{text-align:center;padding:60px 40px;color:var(--text-light);background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a}.analytics-card{margin-bottom:0}.analytics-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:30px}.metric-card{background:var(--bg-gray);padding:20px;border-radius:10px;text-align:center;border:1px solid var(--border-gray)}.metric-card h3{font-size:.85rem;color:var(--text-medium);margin-bottom:8px;font-weight:600}.metric-value{font-size:2rem;font-weight:700;color:var(--primary-blue)}.metric-label{font-size:.8rem;color:var(--text-light);margin-top:4px}.analytics-charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}.chart-container{background:#fff;border:1px solid var(--border-gray);border-radius:10px;padding:20px;min-height:300px;position:relative}.chart-container h3{font-size:.9rem;color:var(--text-dark);margin-bottom:12px;font-weight:600}.chart-container canvas{max-height:260px}.chart-container-wide{grid-column:1 / -1}.chart-hint{font-size:.75rem;color:var(--text-light);font-weight:400;font-style:italic}.time-series-container{margin-bottom:20px}.time-series-header{display:flex;justify-content:flex-end;margin-bottom:8px}.section-header{margin-top:10px;margin-bottom:20px;padding-bottom:15px;border-bottom:2px solid var(--border-gray)}.section-header h2{color:var(--primary-blue);font-size:1.5rem;font-weight:700;margin-bottom:6px}.section-subtitle{color:var(--text-medium);font-size:.9rem}.utm-charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.chart-container-small{background:#fff;border:1px solid var(--border-gray);border-radius:10px;padding:16px;min-height:250px}.chart-container-small h3{font-size:.85rem;color:var(--text-dark);margin-bottom:10px;font-weight:600}.chart-container-small canvas{max-height:210px}.usage-metrics-summary{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:24px}.usage-metric-card{background:#fff;border:1px solid var(--border-gray);border-radius:10px;padding:16px;text-align:center}.usage-metric-card h3{font-size:.75rem;color:var(--text-medium);margin-bottom:6px;font-weight:600}.usage-metric-value{font-size:1.5rem;font-weight:700;color:var(--primary-blue)}.usage-metric-label{font-size:.75rem;color:var(--text-light);margin-top:2px}.usage-charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.results-card{margin-bottom:0}.results-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap}.results-summary{background:var(--bg-gray);padding:12px 20px;border-radius:8px;color:var(--text-medium);font-weight:600;border:1px solid var(--border-gray)}.active-filter{background:var(--primary-blue);color:#fff;padding:12px 20px;border-radius:8px;margin-bottom:15px;display:flex;justify-content:space-between;align-items:center;gap:15px}.active-filter span{flex:1;font-weight:600}.btn-clear-filter{background:#fff;color:var(--primary-blue);border:none;padding:8px 16px;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s}.btn-clear-filter:hover{background:var(--bg-gray)}.call-list-item{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff;border:1px solid var(--border-gray);border-left:3px solid var(--primary-blue);border-radius:8px;margin-bottom:10px;cursor:pointer;transition:all .2s}.call-list-item:hover{background:var(--bg-gray);border-left-color:var(--accent-pink);box-shadow:0 2px 8px #0000000f}.call-item-left{display:flex;flex-direction:column;gap:4px;flex:1}.call-item-id{font-size:.85rem;color:var(--primary-blue);font-weight:600;font-family:var(--font-mono)}.call-item-info{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.call-item-info span{font-size:.85rem;color:var(--text-medium)}.call-item-right{display:flex;gap:8px;align-items:center}.call-item-badge{display:inline-block;padding:4px 10px;border-radius:6px;font-size:.75rem;font-weight:600}.badge-agent{background:#044ef41a;color:var(--primary-blue)}.badge-duration{background:var(--bg-gray);color:var(--text-medium);font-family:var(--font-mono)}.badge-type{padding:4px 10px;border-radius:6px;font-size:.75rem;font-weight:600}.badge-type-phone{background:#d1fae5;color:#065f46}.badge-type-webrtc{background:#e0e7ff;color:#3730a3}.badge-type-sip{background:#fef3c7;color:#92400e}.badge-direction-inbound{background:#dbeafe;color:#1e40af}.badge-direction-outbound{background:#fce7f3;color:#be185d}.btn-share{background:none;border:1px solid var(--border-gray);border-radius:6px;padding:4px 10px;font-size:.75rem;color:var(--text-medium);cursor:pointer;transition:all .2s}.btn-share:hover{border-color:var(--primary-blue);color:var(--primary-blue)}.pagination{display:flex;justify-content:center;gap:8px;margin-top:20px}.page-info{font-size:.85rem;color:var(--text-medium)}.ethan-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.ethan-modal-content{background:#fff;border-radius:12px;width:90%;max-width:800px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 60px #0000004d}.ethan-modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--border-gray)}.ethan-modal-header h2{font-size:1.25rem;color:var(--primary-blue);font-weight:700;margin:0}.ethan-modal-close{background:none;border:none;font-size:1.5rem;color:var(--text-medium);cursor:pointer;padding:4px 8px;border-radius:4px}.ethan-modal-close:hover{background:var(--bg-gray);color:var(--text-dark)}.ethan-modal-body{padding:24px;overflow-y:auto;flex:1}.ethan-modal-body .spinner{width:40px;height:40px}.ethan-modal-footer{padding:16px 24px;border-top:1px solid var(--border-gray);display:flex;justify-content:flex-end}.ethan-content{font-size:.9rem;line-height:1.7;color:var(--text-dark)}.ethan-content h2,.ethan-content h3,.ethan-content h4{margin-top:1rem;margin-bottom:.5rem;color:var(--primary-blue)}.ethan-content ul{padding-left:1.5rem;margin:.5rem 0}.ethan-content p{margin:.5rem 0}.ethan-meta{font-size:.85rem;color:var(--text-light)}.call-detail-bg{background:linear-gradient(135deg,#00d4ff,#f92b72);min-height:100vh;padding:20px;overflow-y:auto}.call-detail-container{max-width:1200px;margin:0 auto 40px;background:#fff;border-radius:12px;padding:30px;box-shadow:0 4px 6px #0000001a}.back-button{display:inline-block;padding:10px 20px;background:var(--primary-blue);color:#fff;text-decoration:none;border-radius:6px;margin-bottom:20px;transition:background .2s;font-weight:600;border:none;cursor:pointer;font-size:.95rem}.back-button:hover{background:var(--dark-blue);text-decoration:none}.call-header{border-bottom:3px solid var(--accent-pink);padding-bottom:20px;margin-bottom:30px}.call-header h1{color:var(--accent-pink);margin:0 0 10px;font-size:1.8rem}.call-header p{color:var(--text-medium);margin:5px 0}.call-meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:30px}.meta-item{background:#f7fafc;padding:15px;border-radius:8px;border-left:3px solid var(--primary-blue)}.meta-item strong{display:block;color:var(--text-dark);margin-bottom:5px;font-size:.9rem}.meta-item span{color:var(--text-medium);font-size:1rem;word-break:break-word}.section{margin-bottom:30px}.section h2{color:var(--primary-blue);border-bottom:2px solid var(--border-gray);padding-bottom:10px;margin-bottom:20px;font-size:1.5rem}.badge{display:inline-block;padding:4px 12px;border-radius:6px;font-size:.75rem;font-weight:600;margin-left:8px;vertical-align:middle}.badge-status{padding:5px 10px;text-transform:uppercase;font-weight:700;letter-spacing:.5px}.badge-status-completed,.badge-status-answered{background:#10b981;color:#fff}.badge-status-failed{background:#ef4444;color:#fff}.badge-status-no-answer{background:#f59e0b;color:#fff}.badge-status-busy{background:#f97316;color:#fff}.badge-status-ending{background:#6b7280;color:#fff}.badge-status-in-progress{background:#06b6d4;color:#fff}.badge-direction{padding:5px 10px}.duration-bar{display:flex;width:100%;height:30px;background:var(--border-gray);border-radius:8px;overflow:hidden;margin-bottom:10px}.duration-segment{height:100%;transition:width .3s ease;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:.85rem}.duration-ring{background:linear-gradient(135deg,#00d4ff,#00a8cc)}.duration-ai{background:linear-gradient(135deg,#f92b72,#d91b5c)}.duration-legend{display:flex;gap:20px;font-size:.85rem}.legend-item{display:flex;align-items:center;gap:6px}.legend-color{width:16px;height:16px;border-radius:3px}.legend-ring{background:linear-gradient(135deg,#00d4ff,#00a8cc)}.legend-ai{background:linear-gradient(135deg,#f92b72,#d91b5c)}.utm-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.utm-tag{display:inline-block;background:linear-gradient(135deg,#e0f2fe,#f0f9ff);border:1px solid #bae6fd;padding:6px 12px;border-radius:6px;font-size:.85rem;color:var(--text-dark)}.summary-box{background:linear-gradient(135deg,#e0f2fe,#f0f9ff);padding:20px;border-radius:8px;border:1px solid #bae6fd;color:var(--text-dark);line-height:1.6}.dialog-item{margin-bottom:15px;padding:15px;border-radius:8px;border-left:4px solid}.dialog-item.user{background:#e0f2fe;border-left-color:var(--primary-blue)}.dialog-item.assistant{background:#fef3f2;border-left-color:var(--accent-pink)}.dialog-role{font-weight:700;margin-bottom:8px;text-transform:capitalize;color:var(--text-dark)}.dialog-item>div:last-child{color:var(--text-medium);line-height:1.6}.dialog-latency{margin-top:8px;font-size:.85rem;color:var(--text-medium)}.call-performance-rating{background:#f7fafc;padding:20px;border-radius:8px;border-left:4px solid}.call-performance-rating.rating-excellent{border-left-color:#10b981;background:linear-gradient(135deg,#d1fae5,#ecfdf5)}.call-performance-rating.rating-good{border-left-color:#f59e0b;background:linear-gradient(135deg,#fef3c7,#fffbeb)}.call-performance-rating.rating-bad{border-left-color:#ef4444;background:linear-gradient(135deg,#fee2e2,#fef2f2)}.performance-badge{display:inline-block;padding:8px 16px;border-radius:6px;font-weight:700;font-size:.95rem;margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px}.performance-badge.badge-excellent{background:#10b981;color:#fff}.performance-badge.badge-good{background:#f59e0b;color:#fff}.performance-badge.badge-bad{background:#ef4444;color:#fff}.call-performance-rating p{color:var(--text-dark);line-height:1.6;margin:0}.latency-chart-container{background:#fff;border:1px solid var(--border-gray);border-radius:8px;padding:20px;margin-top:20px}.swaig-container{margin-top:10px}.swaig-header-section{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:20px}.swaig-count{font-size:1rem;font-weight:600;color:var(--text-dark)}.swaig-chart-mini{width:150px;height:150px}.swaig-call-item{background:#f7fafc;border:1px solid var(--border-gray);border-radius:8px;padding:16px;margin-bottom:12px}.swaig-call-header{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}.swaig-call-number{background:var(--primary-blue);color:#fff;padding:2px 8px;border-radius:4px;font-size:.8rem;font-weight:700}.swaig-function-name{font-weight:600;color:var(--text-dark);font-family:var(--font-mono);font-size:.9rem}.swaig-timestamp{font-size:.8rem;color:var(--text-light)}.swaig-total-latency{font-size:.8rem;font-weight:600;color:var(--accent-pink);margin-left:auto}.swaig-label{font-weight:600;color:var(--text-dark);font-size:.85rem;display:block;margin-bottom:4px}.swaig-code{background:#fff;border:1px solid var(--border-gray);border-radius:6px;padding:10px;font-size:.8rem;overflow-x:auto;white-space:pre-wrap;word-break:break-word}.swaig-response-text{font-size:.85rem;color:var(--text-medium);line-height:1.5}.swaig-timing{margin-top:8px}.swaig-timing-details{display:flex;gap:8px;flex-wrap:wrap}.timing-badge{padding:3px 10px;border-radius:4px;font-size:.8rem;font-weight:600}.timing-badge.llm{background:#044ef41a;color:var(--primary-blue)}.timing-badge.audio{background:#10b9811a;color:#10b981}.timing-badge.utterance{background:#f59e0b1a;color:#f59e0b}.swaig-section{margin-top:8px}.swaig-url-text{font-size:.8rem;color:var(--text-light);word-break:break-all}.swml-vars-inline{display:flex;flex-wrap:wrap;gap:10px}.swml-var-badge{display:inline-flex;align-items:center;gap:6px;background:#f7fafc;padding:8px 14px;border-radius:6px;border:1px solid var(--border-gray)}.swml-var-key{font-weight:600;color:var(--primary-blue);font-size:.85rem}.swml-var-value{color:var(--text-medium);font-size:.85rem;word-break:break-word}.recording-player{position:relative;width:100%;background:#000;border-radius:8px;overflow:hidden;cursor:pointer;margin-top:10px}.recording-player video,.recording-player audio{width:100%;display:block}.enriched-events{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.enriched-event-card{background:var(--bg-gray);border:1px solid var(--border-gray);border-radius:8px;padding:14px;text-align:center}.enriched-event-card .event-count{font-size:1.5rem;font-weight:700;color:var(--primary-blue)}.enriched-event-card .event-label{font-size:.8rem;color:var(--text-medium);margin-top:4px}@media(max-width:1200px){.analytics-summary{grid-template-columns:repeat(2,1fr)}.usage-metrics-summary{grid-template-columns:repeat(3,1fr)}}@media(max-width:900px){.container{flex-direction:column;height:auto}.sidebar{width:100%;min-width:100%;max-height:none}.content-area{padding:20px}.analytics-charts-grid,.utm-charts-grid,.usage-charts-grid{grid-template-columns:1fr}.usage-metrics-summary{grid-template-columns:repeat(2,1fr)}}