/* Design tokens lifted from mockups.html v0.1 */
:root {
  --logicalis-red: #E2231A;
  --logicalis-red-dark: #B71C15;
  --logicalis-red-soft: #FFE9E8;
  --ink-900: #111114;
  --ink-700: #2E2E33;
  --ink-500: #5A5A63;
  --ink-300: #9A9AA3;
  --ink-200: #C9C9D1;
  --line: #E5E5EA;
  --line-strong: #D2D2DA;
  --bg: #F2F3F5;
  --surface: #FFFFFF;
  --surface-2: #F7F7F9;
  --shadow-sm: 0 1px 2px rgba(17,17,20,.06), 0 1px 3px rgba(17,17,20,.04);
  --shadow-md: 0 6px 16px -8px rgba(17,17,20,.18), 0 2px 4px rgba(17,17,20,.06);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--ink-900);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ------------------------------------------------------------------ */
/* Attendee mobile flow                                               */
/* ------------------------------------------------------------------ */
body.attendee {
  display: flex;
  flex-direction: column;
}
.screen {
  flex: 1;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  padding: 32px 24px 48px;
  display: flex;
  flex-direction: column;
}
.step {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.step[hidden] { display: none; }
.spacer { flex: 1; min-height: 24px; }

.app__eyebrow {
  font-size: 11px;
  font-weight: 700;
  color: var(--logicalis-red);
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.app__h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 1.15;
}
.app__h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.25;
}
.app__lead {
  font-size: 15px;
  color: var(--ink-500);
  line-height: 1.55;
}

/* Form */
.form { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-500);
  font-weight: 600;
}
.field__input {
  font: inherit;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-900);
  font-size: 16px;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.field__input:focus {
  outline: none;
  border-color: var(--logicalis-red);
  box-shadow: 0 0 0 3px rgba(226,35,26,0.12);
}
.field__input[aria-invalid="true"] {
  border-color: var(--logicalis-red);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 20px;
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.1px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active { transform: scale(0.99); }
.btn--primary {
  background: var(--logicalis-red);
  color: white;
  box-shadow: 0 6px 14px -6px rgba(226,35,26,.5);
}
.btn--primary:hover { background: var(--logicalis-red-dark); }
.btn--primary:disabled {
  background: var(--ink-300);
  box-shadow: none;
  cursor: progress;
}
.btn--block { width: 100%; }

/* Option list */
.option-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: 14px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
  color: var(--ink-900);
}
.option:hover { border-color: var(--logicalis-red); }
.option--busy {
  border-color: var(--logicalis-red);
  background: var(--logicalis-red-soft);
  box-shadow: 0 0 0 3px rgba(226,35,26,.1);
}
.option__body { flex: 1; min-width: 0; }
.option__name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-900);
}
.option__chev {
  color: var(--ink-300);
  font-size: 20px;
  flex: none;
}

/* Bot result */
.bot { display: flex; flex-direction: column; align-items: center; text-align: center; }
.bot__avatar {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--logicalis-red) 0%, var(--logicalis-red-dark) 100%);
  color: white;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 24px -10px rgba(226,35,26,.55);
  margin-bottom: 12px;
  font-weight: 700; font-size: 22px; letter-spacing: -0.5px;
}
.bot__name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--ink-300);
  text-transform: uppercase;
}
.bot-bubble {
  background: var(--surface-2);
  border-radius: 4px 16px 16px 16px;
  padding: 16px 18px;
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-700);
  border: 1px solid var(--line);
  border-left: 3px solid var(--logicalis-red);
}

/* Summary card */
.summary {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  margin-top: 18px;
}
.summary__row { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; }
.summary__label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--ink-300); font-weight: 600;
}
.summary__value {
  font-size: 14px; font-weight: 600; color: var(--ink-900); text-align: right;
}

/* AM card */
.am-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--logicalis-red-soft) 0%, #fff 100%);
  border: 1px solid var(--line);
  margin-top: 18px;
}
.am-card__avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--logicalis-red);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
  flex: none;
}
.am-card__role {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--ink-300); font-weight: 600;
}
.am-card__name { font-size: 15px; font-weight: 700; color: var(--ink-900); margin-top: 2px; }
.am-card__company { font-size: 12px; color: var(--ink-500); margin-top: 2px; }

.footnote {
  padding: 16px 24px 24px;
  color: var(--ink-300);
  font-size: 11px;
  letter-spacing: 0.4px;
  text-align: center;
}

/* ------------------------------------------------------------------ */
/* Ops dashboard                                                      */
/* ------------------------------------------------------------------ */
body.ops { background: #fff; }
.ops__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 32px 32px 16px;
  border-bottom: 1px solid var(--line);
}
.ops__title { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; }
.ops__sub { color: var(--ink-500); font-size: 13px; margin-top: 2px; }
.chip {
  font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink-700);
  background: var(--surface);
}
.chip--red { background: var(--logicalis-red); border-color: var(--logicalis-red); color: white; }

.ops__main { padding: 24px 32px; }
.ops-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ops-table th, .ops-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.ops-table th {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--ink-300); font-weight: 700;
  background: var(--surface-2);
}
.ops-table__empty { text-align: center; color: var(--ink-300); padding: 32px; font-style: italic; }
.ops-table .row--fresh { background: #FFFBEC; }
.badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--logicalis-red-soft);
  color: var(--logicalis-red);
}
.badge--neutral { background: var(--surface-2); color: var(--ink-500); }
.badge--ok      { background: #E6F4EA; color: #117A3D; }
.badge--warn    { background: #FFF4E5; color: #B85C00; }

/* ------------------------------------------------------------------ */
/* Frontend polish — additive (Tier 1)                                */
/* ------------------------------------------------------------------ */

/* Spacing + type scale (additive — existing px values left in place) */
:root {
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px;
  --t-xs: 11px; --t-sm: 13px; --t-base: 15px; --t-md: 17px; --t-lg: 20px; --t-xl: 24px;
}

/* Welcome brand wave */
.brand-wave {
  width: 60px;
  height: 26px;
  color: var(--logicalis-red);
  display: block;
}

/* Interest option — icon bubble + sublabel + spinner */
.option__icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--logicalis-red-soft);
  color: var(--logicalis-red);
  display: grid;
  place-items: center;
  transition: background .15s ease, color .15s ease;
}
.option__icon svg { display: block; }
.option__sub {
  display: block;
  font-size: 12px;
  color: var(--ink-500);
  margin-top: 2px;
  line-height: 1.3;
  font-weight: 400;
}
.option__spinner {
  flex: none;
  width: 16px;
  height: 16px;
  border: 1.75px solid var(--logicalis-red);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: none;
}
.option--busy .option__icon {
  background: var(--logicalis-red);
  color: white;
}
.option--busy .option__chev { display: none; }
.option--busy .option__spinner { display: block; }
.option[disabled]:not(.option--busy) {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Inline form errors (replaces alert()) */
.field__error {
  display: none;
  font-size: 12px;
  color: var(--logicalis-red);
  margin-top: 2px;
  font-weight: 500;
}
.field--invalid .field__error { display: block; }
.form__error {
  font-size: 13px;
  color: var(--logicalis-red);
  background: var(--logicalis-red-soft);
  border: 1px solid var(--logicalis-red);
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 500;
}
.form__error[hidden] { display: none; }

/* ------------------------------------------------------------------ */
/* Tier 2 — interaction polish                                        */
/* ------------------------------------------------------------------ */

@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}
.shake { animation: shake .25s ease; }

@keyframes stagger-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
[data-stagger-step] { opacity: 0; }
[data-stagger-step].is-in {
  animation: stagger-in .22s ease forwards;
}

/* AM card — stronger styling (drop fade-to-white gradient) */
.am-card {
  background: var(--logicalis-red-soft);
  border: 1.5px solid var(--logicalis-red);
}
.am-card__avatar {
  width: 56px;
  height: 56px;
  font-size: 20px;
}

/* ------------------------------------------------------------------ */
/* Tier 3 — stretch polish                                            */
/* ------------------------------------------------------------------ */

/* Bot avatar — online dot + ripple */
.bot__avatar { position: relative; }
.bot__avatar::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(34, 197, 94, 0.4);
  animation: ripple 1.6s ease-out infinite;
  pointer-events: none;
}
.bot__avatar::after {
  content: "";
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 0 3px var(--surface);
}
@keyframes ripple {
  0%   { transform: scale(1);    opacity: 0.55; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* Ops — live empty-state dot + new-row flash */
.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--logicalis-red);
  margin-right: 8px;
  vertical-align: middle;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.3); opacity: 0.5; }
}
.ops-table .row--just-arrived {
  animation: row-flash 1.6s ease;
}
@keyframes row-flash {
  0%   { background: rgba(226, 35, 26, 0.18); }
  100% { background: transparent; }
}

/* ================================================================== */
/* Ambient + transitions (B1, B2, B3) — all client-side, GPU-friendly */
/* ================================================================== */

/* B2 ambient floating bubbles */
.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  transition: opacity .35s ease;
}
.screen, .footnote { position: relative; z-index: 1; }
body[data-screen="result"] .ambient { opacity: .35; }

.ambient__bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
                              rgba(208, 210, 220, .55),
                              rgba(208, 210, 220, 0) 70%);
  filter: blur(18px);
  will-change: transform;
}
@keyframes drift {
  0%   { transform: translate(0, 0)        scale(1);    }
  50%  { transform: translate(8px, -22px)  scale(1.06); }
  100% { transform: translate(0, 0)        scale(1);    }
}
.ambient__bubble:nth-child(1) { left:  6%; top: 12%; width: 140px; height: 140px; animation: drift 22s ease-in-out infinite; animation-delay:  -2s; }
.ambient__bubble:nth-child(2) { left: 78%; top:  8%; width: 110px; height: 110px; animation: drift 18s ease-in-out infinite; animation-delay:  -8s; }
.ambient__bubble:nth-child(3) { left: 22%; top: 58%; width: 160px; height: 160px; animation: drift 26s ease-in-out infinite; animation-delay:  -4s; }
.ambient__bubble:nth-child(4) { left: 70%; top: 50%; width: 130px; height: 130px; animation: drift 20s ease-in-out infinite; animation-delay: -12s; }
.ambient__bubble:nth-child(5) { left: 12%; top: 82%; width: 100px; height: 100px; animation: drift 24s ease-in-out infinite; animation-delay:  -6s; }
.ambient__bubble:nth-child(6) { left: 85%; top: 78%; width:  90px; height:  90px; animation: drift 19s ease-in-out infinite; animation-delay: -10s; }
.ambient__bubble:nth-child(7) { left: 48%; top: 22%; width:  80px; height:  80px; animation: drift 23s ease-in-out infinite; animation-delay: -14s; }
.ambient__bubble:nth-child(8) { left: 38%; top: 92%; width: 120px; height: 120px; animation: drift 21s ease-in-out infinite; animation-delay:  -1s; }

/* B1 + B3 red circle reveal between steps */
.ripple-overlay {
  position: fixed;
  inset: 0;
  background: var(--logicalis-red);
  z-index: 100;
  pointer-events: none;
  clip-path: circle(0 at var(--ripple-x, 50%) var(--ripple-y, 50%));
  transition: clip-path 320ms cubic-bezier(.4, .0, .2, 1),
              opacity   220ms ease;
}
.ripple-overlay.expand { clip-path: circle(150% at var(--ripple-x, 50%) var(--ripple-y, 50%)); }
.ripple-overlay.vanish { opacity: 0; }

/* ================================================================== */
/* Bot typewriter + breathing (B4, B5)                                */
/* ================================================================== */

.bot-bubble.typing::after {
  content: "▍";
  display: inline-block;
  margin-left: 2px;
  color: var(--logicalis-red);
  animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { to { opacity: 0; } }

.bot__avatar {
  animation: breathe 4s ease-in-out infinite;
}
.bot__avatar.is-talking {
  animation: breathe 2.4s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.03); }
}

/* ================================================================== */
/* Option sparkle burst (B6)                                          */
/* ================================================================== */

.option__icon { position: relative; }
.option__sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
.option__sparks span {
  position: absolute;
  left: 50%; top: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--logicalis-red);
  --tx: 0px;
  --ty: 0px;
  animation: spark .45s cubic-bezier(.16, .68, .32, 1) forwards;
}
@keyframes spark {
  0%   { transform: translate(-50%, -50%) translate(0, 0)                       scale(.4); opacity: 1; }
  100% { transform: translate(-50%, -50%) translate(var(--tx), var(--ty))       scale(1);  opacity: 0; }
}
.option__sparks span:nth-child(1) { --tx:   0px; --ty: -26px; }
.option__sparks span:nth-child(2) { --tx:  22px; --ty: -13px; }
.option__sparks span:nth-child(3) { --tx:  22px; --ty:  13px; }
.option__sparks span:nth-child(4) { --tx:   0px; --ty:  26px; }
.option__sparks span:nth-child(5) { --tx: -22px; --ty:  13px; }
.option__sparks span:nth-child(6) { --tx: -22px; --ty: -13px; }

/* ================================================================== */
/* Welcome step entrance (B9)                                         */
/* ================================================================== */

.step[data-step="welcome"] > * {
  opacity: 0;
  animation: welcome-in .42s cubic-bezier(.2, .8, .2, 1) forwards;
}
.step[data-step="welcome"] > *:nth-child(1) { animation-delay:   0ms; }
.step[data-step="welcome"] > *:nth-child(2) { animation-delay:  80ms; }
.step[data-step="welcome"] > *:nth-child(3) { animation-delay: 160ms; }
.step[data-step="welcome"] > *:nth-child(4) { animation-delay: 240ms; }
.step[data-step="welcome"] > *:nth-child(5) { animation-delay: 320ms; }
.step[data-step="welcome"] > *:nth-child(6) { animation-delay: 400ms; }
@keyframes welcome-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ================================================================== */
/* Accessibility — kill all motion if user prefers reduced motion     */
/* ================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}