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

:root {
  --bg: oklch(98.5% 0.004 240);
  --surface: #fff;
  --surface-2: oklch(96.5% 0.005 240);
  --border: oklch(91% 0.006 240);
  --border-strong: oklch(82% 0.008 240);
  --text: oklch(14% 0.012 255);
  --text2: oklch(44% 0.012 255);
  --text3: oklch(64% 0.009 255);
  --accent: oklch(52% 0.18 255);
  --accent-hover: oklch(46% 0.18 255);
  --accent-bg: oklch(96% 0.025 255);
  --accent-bd: oklch(78% 0.08 255);
  --accent-soft: oklch(52% 0.18 255 / 0.09);
  --green: oklch(54% 0.15 160);
  --green-bg: oklch(96% 0.022 160);
  --green-bd: oklch(78% 0.07 160);
  --green-soft: oklch(54% 0.15 160 / 0.09);
  --red: oklch(58% 0.22 25);
  --red-soft: oklch(96% 0.03 25);
  --warn: oklch(72% 0.16 80);
  --r: 10px; --rl: 14px; --rs: 7px;
  --t: 150ms cubic-bezier(0.4,0,0.2,1);
}

html, body {
  min-height: 100vh;
  background: var(--bg);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button { font-family: inherit; cursor: pointer; }
input { font-family: inherit; }

/* Topbar */
.topbar {
  height: 54px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 28px; height: 28px;
  background: var(--text);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
}
.brand-name { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.brand-sub { font-size: 11.5px; color: var(--text3); margin-top: 1px; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.topbar-chip {
  font-size: 12px;
  color: var(--text3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px;
  font-weight: 500;
}

/* Page / sheet */
.screen { display: none; }
.screen.active { display: block; animation: fade 0.2s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.page { display: flex; justify-content: center; padding: 44px 24px 96px; }
.sheet { width: 100%; max-width: 660px; }
.sheet.wide { max-width: 760px; }

.page-hd { margin-bottom: 36px; }
.page-hd h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
.page-hd p { margin-top: 6px; font-size: 14px; color: var(--text2); line-height: 1.55; }
.muted { color: var(--text2); }

/* Section */
.sec { margin-bottom: 28px; }
.sec-hd {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 13px;
}
.sec-num {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--text);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--t);
}
.sec-num.done { background: var(--green); }
.sec-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text3);
}
.sec-search {
  margin-left: auto;
  width: 180px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 12.5px;
  transition: all var(--t);
}
.sec-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Mode cards */
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--rl);
  padding: 18px 20px;
  cursor: pointer;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
  user-select: none;
  position: relative;
}
.mode-card:hover { border-color: var(--accent-bd); }
.mode-card.sel {
  border-color: var(--accent);
  background: var(--accent-bg);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.mode-icon {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 13px;
  transition: background var(--t), border-color var(--t);
}
.mode-card.sel .mode-icon { background: var(--accent); border-color: var(--accent); }
.mode-card.sel .mode-icon svg { color: #fff; }
.mode-icon svg { color: var(--text3); transition: color var(--t); }
.mode-name { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 4px; }
.mode-desc { font-size: 12px; color: var(--text2); line-height: 1.5; }
.mode-check {
  position: absolute;
  top: 14px; right: 14px;
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t), border-color var(--t);
}
.mode-card.sel .mode-check { background: var(--accent); border-color: var(--accent); }
.mode-check-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transition: opacity var(--t);
}
.mode-card.sel .mode-check-dot { opacity: 1; }

/* Product grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  max-height: 320px;
  overflow-y: auto;
  padding: 2px;
  margin: -2px;
}
.product-grid .loading { color: var(--text3); padding: 12px; font-size: 13px; grid-column: span 4; }
.product-pill {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
  transition: border-color var(--t), background var(--t), color var(--t);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text2);
  text-align: left;
  line-height: 1.35;
}
.product-pill:hover { border-color: var(--accent-bd); background: var(--accent-bg); }
.product-pill.sel {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 600;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.product-pill .ptag {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 2px;
}
.product-pill.sel .ptag { color: var(--accent); opacity: 0.7; }

/* Persona reveal */
.persona-wrap {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: max-height 380ms cubic-bezier(0.4,0,0.2,1),
              opacity 260ms ease,
              transform 260ms ease,
              margin-bottom 260ms ease;
  margin-bottom: 0;
}
.persona-wrap.open {
  max-height: 380px;
  opacity: 1;
  transform: translateY(0);
  margin-bottom: 28px;
}

.persona-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.persona-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 14px 10px;
  cursor: pointer;
  user-select: none;
  text-align: center;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.persona-card:hover { border-color: var(--green-bd); background: var(--green-bg); }
.persona-card.sel {
  border-color: var(--green);
  background: var(--green-bg);
  box-shadow: 0 0 0 3px var(--green-soft);
}
.persona-av {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--surface-2);
  margin: 0 auto 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text2);
  border: 1.5px solid var(--border);
  transition: background var(--t), border-color var(--t), color var(--t);
}
.persona-card.sel .persona-av {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.persona-nm {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.persona-sub { font-size: 10.5px; color: var(--text3); margin-top: 3px; line-height: 1.3; }

/* Divider */
.divider { height: 1px; background: var(--border); margin: 4px 0 28px; }

/* Summary strip */
.sum-strip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  display: flex;
  margin-bottom: 18px;
  overflow: hidden;
  transition: border-color var(--t);
}
.sum-strip.ready { border-color: var(--accent-bd); }
.sum-cell { flex: 1; padding: 12px 16px; border-right: 1px solid var(--border); }
.sum-cell:last-child { border-right: none; }
.sum-lbl {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 3px;
}
.sum-val {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text3);
  transition: color var(--t);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sum-val.set { color: var(--text); }

/* CTA */
.cta-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cta-note { font-size: 12.5px; color: var(--text3); line-height: 1.45; }

.btn-start {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--text);
  color: #fff;
  border: none;
  border-radius: var(--rs);
  padding: 12px 22px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: background var(--t), transform var(--t), box-shadow var(--t), opacity var(--t);
  box-shadow: 0 2px 6px oklch(0% 0 0 / 0.18);
  opacity: 0.3;
  pointer-events: none;
  white-space: nowrap;
}
.btn-start:not([disabled]):not(.on),
.btn-start.on { opacity: 1; pointer-events: auto; }
.btn-start.on:hover { background: oklch(22% 0.012 255); box-shadow: 0 4px 14px oklch(0% 0 0 / 0.22); transform: translateY(-1px); }
.btn-start.on:active { transform: translateY(0); }

.btn-back {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text2);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  transition: all var(--t);
}
.btn-back:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface); }

.btn-end {
  background: var(--surface);
  border: 1px solid var(--red);
  color: var(--red);
  padding: 9px 22px;
  border-radius: var(--rs);
  font-size: 13px;
  font-weight: 600;
  transition: all var(--t);
}
.btn-end:hover { background: var(--red-soft); }

/* Chat screen */
.chat-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.chat-title { text-align: center; }
.chat-mode-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.chat-product-label { font-size: 15px; font-weight: 600; color: var(--text); margin-top: 2px; }

.status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text2);
  background: var(--surface);
  font-weight: 500;
}
.status-pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text3);
  flex-shrink: 0;
}
.status-pill.listening { color: var(--green); border-color: var(--green-bd); background: var(--green-bg); }
.status-pill.listening::before { background: var(--green); animation: pulse 1.4s ease infinite; }
.status-pill.thinking { color: var(--warn); border-color: oklch(85% 0.07 80); background: oklch(97% 0.025 80); }
.status-pill.thinking::before { background: var(--warn); animation: pulse 1.4s ease infinite; }
.status-pill.speaking { color: var(--accent); border-color: var(--accent-bd); background: var(--accent-bg); }
.status-pill.speaking::before { background: var(--accent); animation: pulse 1.4s ease infinite; }
.status-pill.error { color: var(--red); border-color: oklch(85% 0.1 25); background: var(--red-soft); }
.status-pill.error::before { background: var(--red); }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(1.5); }
}

/* Orb */
.orb-container {
  height: 200px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
}
.orb {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--accent-bg), var(--accent));
  box-shadow:
    0 14px 40px -8px var(--accent-soft),
    0 4px 14px -4px oklch(0% 0 0 / 0.05),
    inset 0 0 24px rgba(255,255,255,0.45);
  transition: transform 0.2s ease;
}
.orb.listening { animation: breathe 2.2s ease-in-out infinite; background: radial-gradient(circle at 30% 30%, var(--green-bg), var(--green)); box-shadow: 0 14px 40px -8px var(--green-soft), inset 0 0 24px rgba(255,255,255,0.45); }
.orb.thinking  { animation: spin 1.8s linear infinite; background: radial-gradient(circle at 30% 30%, oklch(96% 0.04 80), var(--warn)); }
.orb.speaking  { animation: pop 0.55s ease-in-out infinite alternate; }

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.1); }
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pop {
  from { transform: scale(1); }
  to   { transform: scale(1.10); }
}

/* Transcript */
.transcript-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rl);
  padding: 4px;
  margin-bottom: 20px;
}
.transcript {
  padding: 18px 20px;
  max-height: 280px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.6;
}
.transcript:empty::before {
  content: "Conversation will appear here.";
  color: var(--text3);
  font-style: italic;
  font-size: 13px;
}
.turn { margin-bottom: 14px; display: flex; gap: 12px; }
.turn:last-child { margin-bottom: 0; }
.turn .role-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
  width: 36px;
  padding-top: 1px;
}
.turn.user .role-tag { color: var(--accent); }
.turn.bot  .role-tag { color: var(--green); }
.turn .text { color: var(--text); flex: 1; }

.actions { display: flex; gap: 10px; }
.actions.center { justify-content: center; margin-top: 4px; }

/* Report screen */
.report-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 24px;
}
.report-head h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; }
.report-head p { margin-top: 4px; font-size: 13px; }

.report-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rl);
}
.report-body {
  padding: 28px 32px;
  line-height: 1.7;
  font-size: 14.5px;
  color: var(--text);
}
.report-body h1, .report-body h2, .report-body h3 { letter-spacing: -0.015em; font-weight: 700; }
.report-body h1 { font-size: 18px; margin-top: 24px; margin-bottom: 8px; }
.report-body h2 {
  font-size: 14px;
  margin-top: 24px;
  margin-bottom: 8px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.report-body h2:first-child { margin-top: 0; }
.report-body h3 { font-size: 14px; margin-top: 18px; margin-bottom: 4px; color: var(--text); }
.report-body ul, .report-body ol { padding-left: 22px; margin: 8px 0; }
.report-body li { margin-bottom: 4px; }
.report-body strong { color: var(--text); font-weight: 700; }
.report-body p { margin: 8px 0; color: var(--text2); }
.report-body code {
  background: var(--accent-bg);
  border: 1px solid var(--accent-bd);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12.5px;
  color: var(--accent);
  font-family: 'SF Mono', Menlo, monospace;
}

/* Scrollbars */
.product-grid::-webkit-scrollbar,
.transcript::-webkit-scrollbar { width: 6px; }
.product-grid::-webkit-scrollbar-thumb,
.transcript::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.product-grid::-webkit-scrollbar-track,
.transcript::-webkit-scrollbar-track { background: transparent; }

/* Responsive */
@media (max-width: 720px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .persona-grid { grid-template-columns: repeat(2, 1fr); }
  .mode-grid { grid-template-columns: 1fr; }
  .topbar { padding: 0 20px; }
  .topbar-chip { display: none; }
}