* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #0f1117;
  color: #e8e8e8;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-width: 600px;
  margin: 0 auto;
}

/* Header */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 12px;
  border-bottom: 0.5px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.header-left h1 { font-size: 17px; font-weight: 500; }
.header-left .status-text { font-size: 12px; color: #6b7280; }
.header-right { display: flex; align-items: center; gap: 12px; }
.rec { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #ef4444; font-weight: 500; }
.rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
#timer { font-size: 13px; color: #6b7280; font-variant-numeric: tabular-nums; }

/* Feed */
#feed {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  -webkit-overflow-scrolling: touch;
}

/* Speaker cards */
.card-speaker {
  border-radius: 0 10px 10px 0;
  padding: 12px 14px;
  border-left: 3px solid;
}
.card-speaker.speaker-1 { background: rgba(99,102,241,0.1); border-left-color: #6366f1; }
.card-speaker.speaker-2 { background: rgba(244,114,182,0.08); border-left-color: #f472b6; }

.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.speaker-name { font-size: 12px; font-weight: 500; }
.speaker-1 .speaker-name { color: #818cf8; }
.speaker-2 .speaker-name { color: #f472b6; }
.card-time { font-size: 11px; color: #4b5563; }
.card-text { font-size: 13px; line-height: 1.5; color: #d1d5db; margin-bottom: 6px; }
.card-summary { font-size: 12px; color: #6b7280; line-height: 1.4; }

/* Tags */
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag {
  display: inline-block;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
}
.tag-good { background: rgba(34,197,94,0.15); color: #4ade80; }
.tag-warn { background: rgba(251,191,36,0.15); color: #fbbf24; }
.tag-bad { background: rgba(239,68,68,0.12); color: #f87171; }

/* Verse card */
.card-verse {
  background: rgba(217,180,120,0.08);
  border-radius: 10px;
  padding: 12px 14px;
  border: 0.5px solid rgba(217,180,120,0.2);
}
.verse-label { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 11px; font-weight: 500; color: #d9b478; letter-spacing: 0.5px; }
.verse-text { font-size: 13px; line-height: 1.6; color: #c9ccd1; font-style: italic; }
.verse-ref { margin-top: 6px; font-size: 12px; color: #d9b478; font-weight: 500; }
.verse-reason { margin-top: 6px; font-size: 12px; color: #9ca3af; line-height: 1.4; }

/* Redirect card */
.card-redirect {
  background: rgba(251,191,36,0.06);
  border-radius: 10px;
  padding: 12px 14px;
  border: 0.5px solid rgba(251,191,36,0.15);
}
.redirect-label { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 11px; font-weight: 500; color: #fbbf24; letter-spacing: 0.5px; }
.redirect-text { font-size: 13px; line-height: 1.5; color: #d1d5db; }

/* Transcript card (raw) */
.card-transcript {
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.5;
}

/* Controls */
#controls {
  padding: 16px 20px 24px;
  display: flex;
  gap: 10px;
  justify-content: center;
  background: linear-gradient(transparent, #0f1117 30%);
  flex-shrink: 0;
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 14px;
  border: 0.5px solid;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
}
.btn:active { opacity: 0.7; }
.btn-start { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.3); color: #4ade80; }
.btn-stop { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.3); color: #f87171; }
.btn-icon { font-size: 10px; }

/* Past sessions */
.past-session {
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 0.5px solid rgba(255,255,255,0.06);
  cursor: pointer;
  transition: background 0.15s;
}
.past-session:active { background: rgba(255,255,255,0.08); }

/* Utility */
.hidden { display: none !important; }