:root{
  --bg:#0b0f14;
  --panel:#121821;
  --muted:#6b7a90;
  --text:#e6edf6;
  --accent:#7aa2f7;
  --accent-2:#89dceb;
  --success:#46d39a;
  --warn:#f6c177;
  --danger:#ef9a9a;
  --border:#1e2633;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text); background:radial-gradient(1200px 800px at 20% -10%, #0f1722 0%, #0b0f14 40%), var(--bg);
}

.app-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; border-bottom:1px solid var(--border); background:rgba(10,14,20,0.6); backdrop-filter:saturate(140%) blur(8px);
  position:sticky; top:0; z-index:10;
}
.brand{ display:flex; align-items:center; gap:12px; }
.logo{ width:40px; height:40px; border-radius:10px; object-fit:contain; }
.titles h1{ margin:0; font-size:18px; font-weight:700; }
.subtitle{ margin:2px 0 0; color:var(--muted); font-size:12px; }
.now{ color:var(--muted); font-size:12px; }

.container{ max-width:100%; margin:24px 0; padding:0 20px; }

/* Metrics Dashboard */
.metrics-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:16px; margin-bottom:24px; }
.metric-card{ background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:20px; display:flex; align-items:center; gap:16px; box-shadow:0 4px 12px rgba(0,0,0,0.15); transition:.18s all; }
.metric-card:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.25); }
.metric-icon{ font-size:24px; width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:rgba(122,162,247,0.12); border-radius:10px; }
.metric-content{ flex:1; }
.metric-value{ font-size:28px; font-weight:700; color:var(--text); line-height:1; }
.metric-label{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-top:4px; }

/* Chart Section */
.chart-section{ background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:24px; margin-bottom:24px; box-shadow:0 6px 20px rgba(0,0,0,0.2); }
.chart-header{ margin-bottom:20px; }
.chart-header h3{ margin:0; font-size:18px; font-weight:600; color:var(--text); }
.chart-subtitle{ margin:4px 0 0; font-size:13px; color:var(--muted); }
.chart-container{ position:relative; height:300px; }
.toolbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.search{ flex:1 1 280px; }
.search input{ width:100%; background:var(--panel); border:1px solid var(--border); color:var(--text); padding:12px 14px; border-radius:12px; outline:none; box-shadow: inset 0 0 0 1px rgba(122,162,247,0); transition:.18s box-shadow, .18s border-color; }
.search input:focus{ border-color:#2a3650; box-shadow: 0 0 0 4px rgba(122,162,247,0.12); }
.filters{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ border:1px solid var(--border); background:var(--panel); color:var(--text); padding:8px 10px; border-radius:999px; cursor:pointer; font-size:12px; }
.chip.active{ border-color:#2a3650; box-shadow: 0 0 0 3px rgba(122,162,247,0.12); }

.table-wrap{ border:1px solid var(--border); border-radius:14px; overflow:auto; background:rgba(18,24,33,0.76); box-shadow:0 10px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,0.02); }

table{ width:100%; border-collapse:separate; border-spacing:0; table-layout:auto; }
thead th{ text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:#a8b3c7; background:rgba(10,14,20,0.6); position:sticky; top:0; backdrop-filter:saturate(140%) blur(6px); padding:16px 18px; border-bottom:1px solid var(--border); cursor:pointer; white-space:nowrap; z-index:5; }

/* Column widths - responsive */
th[data-key="datetime"] { width: 12%; min-width: 140px; }
th[data-key="caller_id"] { width: 9%; min-width: 100px; }
th[data-key="callerName"] { width: 10%; min-width: 120px; }
th[data-key="type"] { width: 12%; min-width: 140px; }
th[data-key="caseNumber"] { width: 8%; min-width: 100px; }
th[data-key="affiliation"] { width: 9%; min-width: 110px; }
th[data-key="address"] { width: 9%; min-width: 110px; }
th[data-key="represents"] { width: 10%; min-width: 120px; }
th[data-key="callback"] { width: 11%; min-width: 130px; }
th[data-key="email"] { width: 13%; min-width: 150px; }
th[data-key="attorney"] { width: 8%; min-width: 100px; }
th[data-key="reason"] { width: 12%; min-width: 140px; }
th[data-key="pdfOutput"] { width: 7%; min-width: 100px; }
th[data-key="audio"] { width: 10%; min-width: 140px; }
th[data-key="transcript"] { width: 5%; min-width: 80px; }
th[data-key="transcriptPdf"] { width: 8%; min-width: 110px; }

tbody td{ padding:16px 18px; border-bottom:1px solid var(--border); font-size:14px; vertical-align:top; }
tbody tr:hover{ background:rgba(122,162,247,0.06); }

.audio-cell{
  min-width:160px;
  max-width:220px;
  display:flex;
  align-items:center;
  gap:10px;
}
.audio-player{
  width:100%;
  max-width:200px;
  height:32px;
  background:var(--panel);
  border-radius:8px;
}
.audio-player.hidden{
  display:none;
}
.audio-player[data-loading="true"]{
  opacity:0.5;
  pointer-events:none;
}

.badge{ font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid var(--border); white-space:nowrap; display:inline-block; }
.badge.case{ background:rgba(122,162,247,0.12); color:#bcd3ff; border-color:#2a3650; }
.badge.noncase{ background:rgba(70,211,154,0.12); color:#bff3db; border-color:#1f3a30; }
.badge.clarify{ background:rgba(246,193,119,0.12); color:#ffe1b6; border-color:#3b2f1f; }

.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.dim{ color:var(--muted); }
.cell-wrap{ white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }

.sort{ margin-left:6px; opacity:.6 }
.sorted-asc .sort::after{ content:"▲"; font-size:10px; }
.sorted-desc .sort::after{ content:"▼"; font-size:10px; }

.transcript-btn,
.download-btn,
.audio-btn{
  background:var(--accent);
  color:#0b0f14;
  border:none;
  padding:6px 12px;
  border-radius:6px;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  transition:.18s all;
  display:inline-block;
  text-decoration:none;
  text-align:center;
}
.audio-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.audio-btn::before{
  content:"\25B6";
  font-size:12px;
}
.audio-btn.hidden{
  display:none;
}
.audio-btn.loading{
  cursor:wait;
  opacity:0.65;
}
.transcript-btn:hover,
.download-btn:hover,
.audio-btn:hover{
  background:var(--accent-2);
  transform:translateY(-1px);
}

/* Modal Styles */
.modal{ display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.7); backdrop-filter:blur(4px); }
.modal.show{ display:flex; align-items:center; justify-content:center; }
.modal-content{ background:var(--panel); border:1px solid var(--border); border-radius:16px; width:90%; max-width:800px; max-height:80vh; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,0.5); }
.modal-header{ display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid var(--border); }
.modal-header h3{ margin:0; font-size:18px; font-weight:600; }
.modal-close{ background:none; border:none; color:var(--muted); font-size:24px; cursor:pointer; padding:0; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:6px; transition:.18s all; }
.modal-close:hover{ background:rgba(255,255,255,0.1); color:var(--text); }
.modal-body{ padding:24px; max-height:60vh; overflow-y:auto; }
.transcript-meta{ display:flex; gap:24px; margin-bottom:20px; padding:16px; background:rgba(10,14,20,0.4); border-radius:8px; border:1px solid var(--border); }
.meta-item{ font-size:14px; }
.meta-item strong{ color:var(--accent-2); }
.transcript-content{ font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:13px; line-height:1.6; background:rgba(10,14,20,0.6); padding:20px; border-radius:8px; border:1px solid var(--border); white-space:pre-wrap; }
.speaker{ font-weight:600; }
.agent{ color:var(--accent); }
.caller{ color:var(--accent-2); }

/* Raw Logs Button */
.raw-logs-btn{
  background:transparent;
  color:var(--muted);
  border:1px solid var(--border);
  padding:8px 14px;
  border-radius:8px;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  transition:.2s all;
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
  white-space:nowrap;
  backdrop-filter:blur(4px);
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
.raw-logs-btn:hover{
  color:var(--text);
  border-color:#2a3650;
  background:rgba(122,162,247,0.08);
  box-shadow:0 4px 12px rgba(0,0,0,0.25);
  transform:translateY(-1px);
}

/* Raw Logs Modal - Extra Large */
.modal-xl{
  max-width:1100px;
  width:95%;
  max-height:85vh;
}

.raw-logs-subtitle{
  color:var(--muted);
  font-size:13px;
  margin:0 0 20px 0;
  padding-bottom:16px;
  border-bottom:1px solid var(--border);
}

/* Loading & Error States */
.loading-state{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:40px 20px;
  color:var(--muted);
  font-size:14px;
}
.spinner{
  width:20px;
  height:20px;
  border:2px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin 0.8s linear infinite;
}
@keyframes spin{
  to{ transform:rotate(360deg); }
}
.error-state{
  background:rgba(239,154,154,0.1);
  border:1px solid rgba(239,154,154,0.3);
  border-radius:8px;
  padding:16px 20px;
  color:var(--danger);
  font-size:14px;
}
.hidden{ display:none !important; }

/* Raw Logs List */
.raw-logs-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:45vh;
  overflow-y:auto;
  padding-bottom:8px;
}
.raw-log-item{
  background:rgba(10,14,20,0.5);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px 18px;
  cursor:pointer;
  transition:.18s all;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.raw-log-item:hover{
  background:rgba(122,162,247,0.08);
  border-color:#2a3650;
}
.raw-log-item-main{
  flex:1;
  display:flex;
  flex-wrap:wrap;
  gap:12px 24px;
  align-items:center;
}
.raw-log-date{
  font-size:13px;
  color:var(--text);
  font-weight:500;
  min-width:160px;
}
.raw-log-duration{
  font-size:12px;
  color:var(--muted);
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.raw-log-messages{
  font-size:12px;
  color:var(--accent-2);
}
.raw-log-status{
  font-size:11px;
  padding:4px 10px;
  border-radius:999px;
  text-transform:uppercase;
  font-weight:600;
  letter-spacing:0.5px;
}
.raw-log-status.successful{
  background:rgba(70,211,154,0.15);
  color:#46d39a;
}
.raw-log-status.failed{
  background:rgba(239,154,154,0.15);
  color:#ef9a9a;
}
.raw-log-status.processing{
  background:rgba(246,193,119,0.15);
  color:#f6c177;
}
.raw-log-arrow{
  color:var(--muted);
  font-size:18px;
}

/* Load More */
.load-more-container{
  text-align:center;
  padding:16px 0 0;
}
.load-more-btn{
  background:var(--panel);
  border:1px solid var(--border);
  color:var(--text);
  padding:10px 24px;
  border-radius:8px;
  font-size:13px;
  cursor:pointer;
  transition:.18s all;
  min-width:120px;
}
.load-more-btn:hover:not(:disabled){
  border-color:#2a3650;
  background:rgba(122,162,247,0.1);
}
.load-more-btn:disabled{
  cursor:wait;
  opacity:0.6;
  color:var(--muted);
}

/* Back Button */
.back-btn{
  background:none;
  border:1px solid var(--border);
  color:var(--text);
  padding:8px 14px;
  border-radius:8px;
  font-size:13px;
  cursor:pointer;
  transition:.18s all;
  margin-bottom:20px;
}
.back-btn:hover{
  border-color:#2a3650;
  background:rgba(122,162,247,0.1);
}

/* Raw Log Detail */
.detail-header{
  background:rgba(10,14,20,0.5);
  border:1px solid var(--border);
  border-radius:12px;
  padding:20px;
  margin-bottom:20px;
}
.detail-header h4{
  margin:0 0 16px 0;
  font-size:16px;
  color:var(--text);
}
.detail-meta-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:16px 24px;
}
.detail-meta-item{
  font-size:13px;
  min-width:0;
}
.detail-meta-item label{
  display:block;
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.detail-meta-item span{
  display:block;
  color:var(--text);
  font-weight:500;
  word-break:break-all;
  overflow-wrap:break-word;
}

/* Detail Audio Section */
.detail-audio-section{
  margin-bottom:20px;
}
.detail-audio-section h5{
  margin:0 0 12px 0;
  font-size:14px;
  color:var(--accent-2);
}
.detail-audio-section .audio-cell{
  min-width:auto;
  max-width:none;
}
.detail-audio-player{
  width:100%;
  max-width:400px;
  height:40px;
}
.detail-play-btn{
  padding:10px 20px;
  font-size:14px;
}

/* Detail Transcript Section */
.detail-transcript-section h5{
  margin:0 0 12px 0;
  font-size:14px;
  color:var(--accent-2);
}
.detail-transcript{
  background:rgba(10,14,20,0.6);
  border:1px solid var(--border);
  border-radius:10px;
  padding:20px;
  max-height:300px;
  overflow-y:auto;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size:13px;
  line-height:1.7;
}
.transcript-message{
  margin-bottom:12px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.transcript-message:last-child{
  margin-bottom:0;
  padding-bottom:0;
  border-bottom:none;
}
.transcript-role{
  font-weight:600;
  margin-bottom:4px;
}
.transcript-role.agent{ color:var(--accent); }
.transcript-role.user{ color:var(--accent-2); }
.transcript-text{
  color:var(--text);
  opacity:0.9;
}

/* Analysis Section */
.detail-analysis-section{
  margin-top:20px;
}
.detail-analysis-section h5{
  margin:0 0 12px 0;
  font-size:14px;
  color:var(--warn);
}
.analysis-content{
  background:rgba(246,193,119,0.08);
  border:1px solid rgba(246,193,119,0.2);
  border-radius:10px;
  padding:16px;
  font-size:13px;
  color:var(--text);
  line-height:1.6;
}

.app-footer{ display:flex; gap:12px; justify-content:center; color:var(--muted); font-size:12px; padding:16px; }

@media (max-width: 1200px){
  .container{ padding:0 12px; }
  .metrics-grid{ grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; }
  th[data-key="represents"], td:nth-child(6),
  th[data-key="affiliation"], td:nth-child(5){ display:none; }
}

@media (max-width: 900px){
  .container{ padding:0 8px; }
  .metrics-grid{ grid-template-columns:repeat(2, 1fr); }
  .chart-container{ height:250px; }
  th[data-key="email"], td:nth-child(8),
  th[data-key="attorney"], td:nth-child(9){ display:none; }
}

@media (max-width: 700px){
  .metrics-grid{ grid-template-columns:1fr 1fr; gap:8px; }
  .metric-card{ padding:16px; }
  .metric-value{ font-size:24px; }
  .chart-container{ height:200px; }
  th[data-key="reason"], td:nth-child(10){ display:none; }
}