/* ── shadcn/ui design tokens (Linear palette) ───────────────────────────── */

:root {
  /* Linear-tinted neutral palette in HSL */
  --background:        0 0% 98%;
  --foreground:        240 10% 4%;

  --card:              0 0% 100%;
  --card-foreground:   240 10% 4%;

  --muted:             240 5% 96%;
  --muted-foreground:  240 4% 46%;

  --border:            240 6% 90%;
  --input:             240 6% 90%;

  --primary:           235 52% 58%;   /* Linear purple-blue */
  --primary-foreground: 0 0% 100%;

  --secondary:         240 5% 96%;
  --secondary-foreground: 240 6% 10%;

  --accent:            235 52% 96%;
  --accent-foreground: 235 52% 38%;

  --destructive:       0 72% 51%;
  --destructive-foreground: 0 0% 100%;

  --success:           142 71% 36%;
  --success-foreground: 0 0% 100%;

  --warning:           38 92% 40%;
  --warning-foreground: 0 0% 100%;

  --ring:              235 52% 58%;
  --radius:            0.5rem;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-color: hsl(var(--border));
}

html { font-size: 14px; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */

.app { display: flex; flex-direction: column; min-height: 100vh; }

.page {
  flex: 1;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mb-4 { margin-bottom: 1rem; }

/* ── Site header ─────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--card) / 0.95);
  backdrop-filter: blur(8px);
}

.site-header-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1rem;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-logo {
  font-size: 0.9375rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  letter-spacing: -0.02em;
}

.nav-sep {
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
  user-select: none;
}

.nav-firm {
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
  white-space: nowrap;
  border: 1px solid transparent;
  text-decoration: none;
}

.btn:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

.btn-sm { height: 32px; padding: 0 0.75rem; font-size: 0.8125rem; }

.btn-ghost {
  background: transparent;
  color: hsl(var(--muted-foreground));
}
.btn-ghost:hover {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}

.btn-outline {
  background: transparent;
  border-color: hsl(var(--border));
  color: hsl(var(--foreground));
}
.btn-outline:hover {
  background: hsl(var(--muted));
}

/* ── Card ────────────────────────────────────────────────────────────────── */

.card {
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
}

.card-header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.25rem 1.5rem 1rem;
}

.card-title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: hsl(var(--foreground));
}

.card-description {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
}

.card-content {
  padding: 1.25rem 1.5rem;
}

.card-content.no-pt { padding-top: 0; }

/* ── Stat cards ──────────────────────────────────────────────────────────── */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .stats-grid { grid-template-columns: repeat(5, 1fr); }
}

.stats-grid .card-content {
  padding: 1.125rem 1.25rem;
}

.card-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.375rem;
}

.card-metric {
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: hsl(var(--foreground));
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.metric-destructive { color: hsl(var(--destructive)); }
.metric-success     { color: hsl(var(--success)); }
.metric-warning     { color: hsl(var(--warning)); }

/* ── Table ───────────────────────────────────────────────────────────────── */

.table-container {
  width: 100%;
  overflow: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  caption-side: bottom;
  font-size: 0.8125rem;
}

thead tr {
  border-bottom: 1px solid hsl(var(--border));
}

tbody tr {
  border-bottom: 1px solid hsl(var(--border));
  transition: background 0.1s;
}

tbody tr:last-child { border-bottom: none; }

th {
  height: 40px;
  padding: 0 1rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
}

td {
  padding: 0.75rem 1rem;
  color: hsl(var(--foreground));
  vertical-align: middle;
}

.call-row { cursor: pointer; }
.call-row:hover td { background: hsl(var(--muted)); }

/* Responsive columns */
.col-date     { white-space: nowrap; color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }
.col-number   { display: none; color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }
.col-outcome  { white-space: nowrap; }
.col-revenue  { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
th.col-revenue { text-align: right; }

@media (min-width: 540px) {
  .col-number { display: table-cell; }
}

.revenue-cell {
  font-weight: 500;
  color: hsl(var(--success));
}

/* ── Badge ───────────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: calc(var(--radius) - 2px);
  padding: 0.15rem 0.55rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid transparent;
}

.badge-destructive {
  background: hsl(var(--destructive) / 0.1);
  color: hsl(var(--destructive));
  border-color: hsl(var(--destructive) / 0.25);
}

.badge-success {
  background: hsl(var(--success) / 0.1);
  color: hsl(var(--success));
  border-color: hsl(var(--success) / 0.25);
}

.badge-warning {
  background: hsl(var(--warning) / 0.1);
  color: hsl(var(--warning));
  border-color: hsl(var(--warning) / 0.25);
}

.badge-secondary {
  background: hsl(var(--secondary));
  color: hsl(var(--muted-foreground));
  border-color: hsl(var(--border));
}

/* ── Call metadata (transcript page) ────────────────────────────────────── */

.call-meta-top {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
  margin-bottom: 0.625rem;
}

.call-meta-date,
.call-meta-number {
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
  font-variant-numeric: tabular-nums;
}

.call-meta-summary {
  font-size: 0.875rem;
  color: hsl(var(--foreground));
  line-height: 1.6;
}

/* ── Transcript ──────────────────────────────────────────────────────────── */

.transcript-message {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.65rem 0.875rem;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  line-height: 1.55;
  margin-bottom: 0.5rem;
}

.transcript-speaker {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground));
}

.transcript-text { color: hsl(var(--foreground)); }

.msg-caller {
  background: hsl(var(--accent));
  margin-right: 2.5rem;
}

.msg-caller .transcript-speaker { color: hsl(var(--primary)); }

.msg-agent {
  background: hsl(var(--muted));
  margin-left: 2.5rem;
}

@media (min-width: 600px) {
  .msg-caller { margin-right: 5rem; }
  .msg-agent  { margin-left: 5rem; }
}

.no-transcript {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  font-style: italic;
  padding: 1rem 0;
}

/* ── Login ───────────────────────────────────────────────────────────────── */

.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--background));
  padding: 1rem;
}

.login-card {
  width: 100%;
  max-width: 360px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  padding: 2rem;
}

.login-card h1 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.25rem;
}

.login-card p {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 1.5rem;
}

.login-card form {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.login-card input {
  width: 100%;
  height: 38px;
  padding: 0 0.75rem;
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-family: inherit;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.login-card input:focus {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.15);
}

.login-card button {
  width: 100%;
  height: 38px;
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  border: none;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
}

.login-card button:hover { opacity: 0.85; }

/* ── App loader overlay ──────────────────────────────────────────────────── */

.app-loader {
  position: fixed;
  inset: 0;
  background: hsl(var(--background));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.app-loader-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid hsl(var(--border));
  border-top-color: hsl(var(--primary));
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Utilities ───────────────────────────────────────────────────────────── */

.hidden  { display: none !important; }
.success { font-size: 0.8125rem; color: hsl(var(--success)); margin-top: 0.75rem; }
.error   { font-size: 0.8125rem; color: hsl(var(--destructive)); margin-top: 0.75rem; }
.mb-3    { margin-bottom: 0.75rem; }
.col-summary { max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Dashboard layout (sidebar + main) ──────────────────────────────────── */

.dash-layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: hsl(var(--card));
  border-right: 1px solid hsl(var(--border));
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 1.125rem 1rem 0.875rem;
  border-bottom: 1px solid hsl(var(--border));
}

.sidebar-logo {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: hsl(var(--foreground));
}

.sidebar-sep {
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
  user-select: none;
}

.sidebar-firm {
  font-size: 0.8125rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.75rem 0.5rem;
  flex: 1;
}

.sidebar-nav .nav-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: calc(var(--radius) - 1px);
  font-size: 0.8125rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  transition: background 0.1s, color 0.1s;
}

.sidebar-nav .nav-item svg {
  opacity: 0.65;
  flex-shrink: 0;
  transition: opacity 0.1s;
}

.sidebar-nav .nav-item:hover {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}

.sidebar-nav .nav-item:hover svg { opacity: 1; }

.sidebar-nav .nav-item.active {
  background: hsl(var(--accent));
  color: hsl(var(--primary));
}

.sidebar-nav .nav-item.active svg { opacity: 1; color: hsl(var(--primary)); }

.sidebar-footer {
  padding: 0.75rem;
  border-top: 1px solid hsl(var(--border));
}

.btn-sidebar-logout {
  width: 100%;
  height: 34px;
  background: transparent;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: inherit;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.btn-sidebar-logout:hover {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}

.dash-main {
  flex: 1;
  min-width: 0;
  padding: 1.5rem 1.75rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dash-view { display: flex; flex-direction: column; gap: 1rem; }

.view-header { margin-bottom: 0.25rem; }
.view-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ── Card extras ─────────────────────────────────────────────────────────── */

.card-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.25rem 0.875rem;
  flex-wrap: wrap;
}

.card-body { padding: 0 1.25rem 1.25rem; }
.card-body.no-pad { padding: 0; }

.card-action {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: center;
}
.card-action:hover { color: hsl(var(--foreground)); }

/* ── Stat cards ──────────────────────────────────────────────────────────── */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.625rem;
}

@media (min-width: 640px) {
  .stats-grid { grid-template-columns: repeat(5, 1fr); }
}

.stat-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  padding: 1rem 1.125rem;
  transition: filter 0.3s, opacity 0.3s;
}

.stat-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.375rem;
}

.stat-value {
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: hsl(var(--foreground));
  font-variant-numeric: tabular-nums;
}

.stat-emergency .stat-value { color: hsl(var(--destructive)); }
.stat-success   .stat-value { color: hsl(var(--success)); }
.stat-warning   .stat-value { color: hsl(var(--warning)); }

/* ── Empty state ─────────────────────────────────────────────────────────── */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3rem 1.5rem;
  gap: 0.5rem;
}

.empty-icon {
  font-size: 2rem;
  margin-bottom: 0.375rem;
  line-height: 1;
}

.empty-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.empty-sub {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  max-width: 340px;
  line-height: 1.55;
}

/* ── Transcript panel ────────────────────────────────────────────────────── */

.call-meta-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.transcript-content {
  padding: 0.75rem 1.25rem 1.25rem;
}

/* ── Activate button (used in sticky bar) ────────────────────────────────── */

.btn-activate {
  height: 38px;
  padding: 0 1.25rem;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: none;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
  align-self: stretch;
}

.btn-activate:hover:not(:disabled) { opacity: 0.88; }
.btn-activate:disabled {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  cursor: default;
}

/* ── Activation success toast ────────────────────────────────────────────── */

.activation-success {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  background: hsl(var(--success) / 0.08);
  border: 1px solid hsl(var(--success) / 0.25);
  border-radius: var(--radius);
  font-size: 0.8125rem;
  color: hsl(var(--success));
  font-weight: 500;
}

.activation-success button {
  margin-left: auto;
  background: transparent;
  border: none;
  color: hsl(var(--success));
  cursor: pointer;
  padding: 0 0.25rem;
  font-size: 0.875rem;
  opacity: 0.7;
  flex-shrink: 0;
}

.activation-success button:hover { opacity: 1; }

/* ── Demo experience ─────────────────────────────────────────────────────── */

/* Welcome card */
.demo-welcome {
  text-align: center;
  padding: 2.5rem 1.5rem;
}
.demo-welcome-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
.demo-welcome-sub {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  max-width: 480px;
  margin: 0 auto 1.5rem;
  line-height: 1.6;
}
.btn-demo-start {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.5rem;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: none;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.btn-demo-start:hover { opacity: 0.9; }

/* DEMO badge on player */
.demo-badge {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}

/* Hero */
.demo-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.25rem 0 0.5rem;
}

.demo-hero-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: hsl(var(--destructive) / 0.08);
  border: 1px solid hsl(var(--destructive) / 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--destructive));
  animation: phone-ring 2.5s ease-in-out infinite;
}

@keyframes phone-ring {
  0%, 100% { transform: rotate(0deg); box-shadow: 0 0 0 0 hsl(var(--destructive) / 0.3); }
  10%       { transform: rotate(-8deg); }
  20%       { transform: rotate(8deg); }
  30%       { transform: rotate(-5deg); }
  40%       { transform: rotate(5deg); box-shadow: 0 0 0 8px hsl(var(--destructive) / 0); }
  50%, 90%  { transform: rotate(0deg); box-shadow: 0 0 0 0 hsl(var(--destructive) / 0); }
}

.demo-hero-title {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: hsl(var(--foreground));
  margin-bottom: 0.2rem;
}

.demo-hero-sub {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.5;
}

/* Call player */
.demo-player {
  padding: 0.875rem 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.demo-player-info {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.demo-caller-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: hsl(var(--destructive));
  background: hsl(var(--destructive) / 0.08);
  border: 1px solid hsl(var(--destructive) / 0.2);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
}

.demo-caller-number {
  font-size: 0.9375rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  font-variant-numeric: tabular-nums;
}

.demo-caller-time {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  font-variant-numeric: tabular-nums;
}

.demo-player-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.demo-play-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}

.demo-play-btn:hover { opacity: 0.85; transform: scale(1.05); }
.demo-play-btn:active { transform: scale(0.97); }

.demo-progress-track {
  flex: 1;
  height: 4px;
  background: hsl(var(--border));
  border-radius: 999px;
  overflow: hidden;
}

.demo-progress-fill {
  height: 100%;
  width: 0%;
  background: hsl(var(--primary));
  border-radius: 999px;
  transition: width 0.1s linear;
}

.demo-elapsed {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
  min-width: 2.25rem;
  text-align: right;
}

/* Body: transcript + events */
.demo-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .demo-body { grid-template-columns: 2fr 1fr; }
}

.demo-transcript-wrap {
  display: flex;
  flex-direction: column;
  min-height: 260px;
}

.demo-transcript-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.125rem 0.5rem;
  border-bottom: 1px solid hsl(var(--border));
  flex-shrink: 0;
}

.demo-transcript-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground));
}

.demo-transcript-hint {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}

.demo-transcript {
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 320px;
  overflow-y: auto;
  flex: 1;
}

.demo-message {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  line-height: 1.55;
  animation: demo-fade-in 0.35s ease both;
}

@keyframes demo-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.demo-msg-speaker {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground));
}

.demo-msg-text { color: hsl(var(--foreground)); }

.demo-msg-caller {
  background: hsl(var(--accent));
  margin-right: 2rem;
}
.demo-msg-caller .demo-msg-speaker { color: hsl(var(--primary)); }

.demo-msg-agent {
  background: hsl(var(--muted));
  margin-left: 2rem;
}

/* Events feed */
.demo-events-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.demo-events-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground));
  padding: 0.125rem 0;
}

.demo-events {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.demo-event-card {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  animation: demo-slide-in 0.3s ease both;
}

@keyframes demo-slide-in {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

.demo-event-intent {
  background: hsl(var(--destructive) / 0.07);
  border-color: hsl(var(--destructive) / 0.2);
}

.demo-event-action {
  background: hsl(var(--warning) / 0.07);
  border-color: hsl(var(--warning) / 0.2);
}

.demo-event-revenue {
  background: hsl(var(--success) / 0.07);
  border-color: hsl(var(--success) / 0.2);
}

.demo-event-icon {
  font-size: 1.125rem;
  line-height: 1;
  flex-shrink: 0;
}

.demo-event-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.demo-event-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.demo-event-detail {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}

/* End summary */
.demo-summary {
  padding: 1.125rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.demo-summary-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.demo-summary-stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.demo-summary-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--muted-foreground));
}

.demo-summary-value {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: hsl(var(--foreground));
}

.demo-summary-revenue { color: hsl(var(--success)); }

.demo-summary-hook {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  font-style: italic;
  line-height: 1.55;
  border-top: 1px solid hsl(var(--border));
  padding-top: 0.75rem;
  margin-top: 0.125rem;
}

/* Sticky activation bar */
.sticky-activate-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: hsl(var(--card));
  border-top: 1px solid hsl(var(--border));
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
  z-index: 50;
  padding: 0.75rem 1.25rem;
}

.sticky-activate-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.sticky-activate-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.sticky-activate-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  white-space: nowrap;
}

.sticky-plan-group {
  display: flex;
  gap: 0.5rem;
}

.sticky-plan {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  height: 34px;
  padding: 0 0.875rem;
  border: 1.5px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  font-size: 0.8125rem;
  font-family: inherit;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  white-space: nowrap;
  position: relative;
}

.sticky-plan strong {
  color: hsl(var(--foreground));
  font-weight: 600;
}

.sticky-plan:hover {
  border-color: hsl(var(--primary) / 0.4);
  color: hsl(var(--foreground));
}

.sticky-plan-selected {
  border-color: hsl(var(--primary));
  background: hsl(var(--accent));
  color: hsl(var(--foreground));
}

.sticky-plan-badge {
  font-size: 0.5625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
}

/* Push dash-main up to avoid sticky bar overlap when pending */
.dash-main.has-sticky-bar {
  padding-bottom: 5rem;
}

/* ── Signup / Auth page ──────────────────────────────────────────────────── */

.auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--background));
  padding: 1.5rem;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 2px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  padding: 2rem 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.auth-logo {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: hsl(var(--foreground));
}

.auth-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: hsl(var(--foreground));
  margin-top: -0.25rem;
}

.auth-subtitle {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  margin-top: -0.5rem;
}

.btn-google {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  border: 1.5px solid #dadce0;
  border-radius: var(--radius);
  background: #fff;
  color: #1f1f1f;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: background 0.15s, box-shadow 0.15s;
}

.btn-google:hover {
  background: #f8f8f8;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.btn-google:disabled {
  opacity: 0.6;
  cursor: default;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: hsl(var(--border));
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.auth-field label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: hsl(var(--foreground));
}

.auth-field input {
  width: 100%;
  height: 38px;
  padding: 0 0.75rem;
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-family: inherit;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.auth-field input:focus {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.15);
}

.btn-primary-full {
  width: 100%;
  height: 38px;
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  border: none;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s;
}

.btn-primary-full:hover:not(:disabled) { opacity: 0.85; }
.btn-primary-full:disabled { opacity: 0.6; cursor: default; }

.auth-message {
  font-size: 0.8125rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius);
}

.auth-message.success {
  background: hsl(var(--success) / 0.08);
  color: hsl(var(--success));
  border: 1px solid hsl(var(--success) / 0.2);
  margin-top: 0;
}

.auth-message.error {
  background: hsl(var(--destructive) / 0.08);
  color: hsl(var(--destructive));
  border: 1px solid hsl(var(--destructive) / 0.2);
  margin-top: 0;
}

.auth-footer {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  text-align: center;
  margin-top: 0.25rem;
}

.auth-footer a {
  color: hsl(var(--primary));
  text-decoration: none;
  font-weight: 500;
}

.auth-footer a:hover { text-decoration: underline; }

/* ── Mobile sidebar ──────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: static;
    border-right: none;
    border-bottom: 1px solid hsl(var(--border));
  }

  .sidebar-nav {
    flex-direction: row;
    overflow-x: auto;
    padding: 0.5rem;
  }

  .sidebar-nav .nav-item {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .dash-layout { flex-direction: column; }
  .dash-main { padding: 1rem; }

  .activation-banner {
    flex-direction: column;
    gap: 1rem;
  }

  .activation-right {
    width: 100%;
    align-items: stretch;
  }

  .plan-cards { justify-content: center; }
  .btn-activate { align-self: stretch; text-align: center; }
}