/* Hallmark · macrostructure: Scroll-Story Scene (the homepage's /pack system) · page: /ai (Uppie)
 * tone: confident, concrete, never over-claiming · anchor hue: UpHex blue 257° · theme: UpHex brand (locked)
 * Loaded after pack_start.css and uphex_home.css, whose hero, scene, chat bubbles, fleet scale, follow-up points,
 * close, and footer styles this page reuses. Motion lives in app/javascript/local_business/ai_story.js;
 * every rule here is the finished state.
 */

/* ------------------------------------------------------------------ Uppie's face (shared/motion/_uppie_mark) */
.uppie-mark { flex: none; display: block; }
.uppie-mark--xs { width: 1.15rem; height: auto; }
.uppie-mark--sm { width: 1.75rem; height: auto; }
.uppie-mark--md { width: 2.75rem; height: auto; }
.uppie-mark__eyes { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .ai-page .uppie-mark__eyes { animation: uppie-blink 5.5s infinite; }
}
@keyframes uppie-blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }

/* ------------------------------------------------------------------ 1 · hero (Uppie in the square) */
.ai-hero .kicker { margin-bottom: var(--space-md); }
.ai-hero .hero__title { max-width: 12ch; font-size: clamp(2.6rem, 5.6vw + 0.5rem, 5.75rem); }
@media (min-width: 760px) { .ai-hero__frame { aspect-ratio: 1088 / 608; } }
@media (min-width: 960px) { .ai-hero .scene { margin-top: -15vw; } }
/* The chat card sits by Uppie: left of the figure on the wide art, above it on the square crop. */
.ai-hero__chat {
  position: absolute; z-index: 2; left: 42%; top: 40%; width: min(22rem, 40%);
  display: grid; gap: var(--space-xs); padding: var(--space-sm);
  border-radius: var(--radius-card); background: color-mix(in oklab, var(--color-navy) 92%, transparent);
  box-shadow: var(--shadow-lift); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: clamp(0.72rem, 1vw, 0.95rem);
}
.ai-hero__ask, .ai-hero__answer { margin: 0; padding: 8px 12px; border-radius: 14px; font-weight: 700; line-height: 1.35; }
.ai-hero__ask { justify-self: end; background: var(--color-blue-deep); color: var(--color-surface); border-bottom-right-radius: 4px; }
.ai-hero__answer { display: flex; align-items: center; gap: var(--space-xs); justify-self: start; background: var(--color-navy-raised); color: var(--color-on-navy); border-bottom-left-radius: 4px; }
@media (max-width: 759px) {
  .ai-hero__chat { left: 6%; right: 6%; top: 8%; width: auto; }
}

/* ------------------------------------------------------------------ 2 · ask for anything */
.ai-ask { padding: var(--space-4xl) 0 var(--space-3xl); }
.ai-bar {
  display: flex; align-items: center; gap: var(--space-sm); max-width: 44rem; margin: var(--space-2xl) auto 0;
  padding: 10px 10px 10px var(--space-md); border-radius: var(--radius-pill);
  background: var(--color-surface); border: 1.5px solid var(--color-blue); box-shadow: var(--shadow-lift), var(--shadow-glow);
}
.ai-bar__text { flex: 1; min-width: 0; font-weight: 700; font-size: var(--text-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-bar__caret { width: 2px; height: 1.4em; flex: none; margin-left: -6px; background: var(--color-blue); }
.ai-bar__send { flex: none; padding: 10px 16px; border-radius: var(--radius-pill); background: var(--color-blue-deep); color: var(--color-surface); font-size: var(--text-sm); font-weight: 800; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) { .ai-page .ai-bar__caret { animation: ai-caret 1s steps(1) infinite; } }
@keyframes ai-caret { 50% { opacity: 0; } }
@media (max-width: 560px) { .ai-bar__send { display: none; } }

.ai-wall { display: grid; gap: var(--space-2xl); margin-top: var(--space-3xl); }
.ai-wall__name { font: 800 var(--text-xs)/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-blue-deep); padding-bottom: var(--space-sm); border-bottom: 2px solid var(--color-blue); }
.ai-wall__tiles { display: grid; gap: var(--space-sm); margin-top: var(--space-md); }
.ai-tile {
  display: grid; gap: var(--space-2xs); padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-card); background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); box-shadow: var(--shadow-soft);
}
.ai-tile__title { font: 800 var(--text-md)/1.2 var(--font-display); letter-spacing: -0.015em; }
.ai-tile__body { font-size: var(--text-sm); color: var(--color-muted); }
.ai-tile { transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
/* The tile whose example the bar is typing (ai_story.js askBar). */
.ai-tile.is-asked { border-color: var(--color-blue); box-shadow: var(--shadow-lift), var(--shadow-glow); }
.ai-tile__ask { margin-top: var(--space-2xs); font: italic 500 var(--text-sm)/1.35 var(--font-editorial); color: var(--color-blue-deep); }
.ai-ask__fineprint { margin-top: var(--space-xl); text-align: center; }
@media (min-width: 760px) { .ai-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ai-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); } }

/* ------------------------------------------------------------------ 3 · a day with Uppie (night) */
.ai-day { padding: var(--space-4xl) 0; background: radial-gradient(70% 60% at 50% 40%, var(--color-navy-raised), var(--color-navy-deep) 72%); color: var(--color-on-navy); }
.ai-day__kicker { text-align: center; margin-bottom: var(--space-md); color: var(--color-on-navy-2); }
.ai-day__track { position: relative; margin-top: var(--space-2xl); }
.ai-day__line { position: absolute; left: 11px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: color-mix(in oklab, var(--color-white) 14%, transparent); }
.ai-day__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--color-blue); transform-origin: top center; }
.ai-day__stops { display: grid; gap: var(--space-xl); }
.ai-stop { position: relative; display: grid; gap: var(--space-xs); padding-left: 2.75rem; }
.ai-stop__time { display: flex; align-items: center; gap: var(--space-sm); margin-left: -2.75rem; font-weight: 800; font-size: var(--text-sm); color: var(--color-blue-light); }
.ai-stop__dot { width: 25px; height: 25px; flex: none; border-radius: 50%; background: var(--color-navy-deep); border: 3px solid var(--color-blue); box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-blue) 22%, transparent); }
.ai-stop .msg { max-width: 34rem; }
@media (min-width: 960px) {
  /* Desktop: the day runs left to right while the section is pinned (ai_story.js dayScrub). */
  .ai-day { min-height: 100svh; display: grid; align-items: center; }
  .ai-day__line { left: 0; right: 0; top: 12px; bottom: auto; width: auto; height: 3px; }
  .ai-day__fill { transform-origin: left center; }
  .ai-day__stops { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-md); }
  .ai-stop { padding-left: 0; padding-top: 2.75rem; align-content: start; }
  .ai-stop__time { position: absolute; top: 0; left: 0; margin-left: 0; }
  .ai-stop .msg { max-width: none; font-size: var(--text-sm); }
}

/* ------------------------------------------------------------------ 4 · ask once (reuses the homepage fleet) */
.ai-every__ask .home-fleet__name { font-size: var(--text-md); }

/* ------------------------------------------------------------------ 5 · you stay in charge */
.ai-charge { padding: var(--space-4xl) 0 var(--space-3xl); background: var(--color-soft-blue); }
.ai-charge .kicker { margin-bottom: var(--space-md); }
.ai-charge__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
.ai-charge__fineprint { margin-top: var(--space-lg); max-width: 34rem; }
.ai-confirm {
  margin: 0; padding: var(--space-xl); border-radius: var(--radius-panel);
  background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); box-shadow: var(--shadow-lift);
}
.ai-confirm__head { display: flex; align-items: center; gap: var(--space-md); }
.ai-confirm__title { margin-top: 2px; font: 800 var(--text-lg)/1.2 var(--font-display); letter-spacing: -0.015em; }
.ai-confirm__diff { display: grid; gap: 0; margin: var(--space-lg) 0 0; border-top: var(--rule-hair) solid var(--color-rule); }
.ai-confirm__diff div { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.ai-confirm__diff dt { color: var(--color-muted); font-weight: 600; }
.ai-confirm__diff dd { margin: 0; font-weight: 700; }
.ai-confirm__diff s { color: var(--color-muted); }
.ai-confirm__diff strong { color: var(--color-blue-deep); font-weight: 800; }
.ai-confirm__actions { display: flex; justify-content: flex-end; gap: var(--space-sm); margin-top: var(--space-lg); }
.ai-confirm__cancel, .ai-confirm__ok { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-lg); border-radius: var(--radius-pill); font-weight: 800; }
.ai-confirm__cancel { color: var(--color-muted); border: 1.5px solid var(--color-rule-strong); }
.ai-confirm__ok { background: var(--color-blue-deep); color: var(--color-surface); box-shadow: var(--shadow-glow); }
@media (min-width: 960px) { .ai-charge__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: var(--space-3xl); } }

/* ------------------------------------------------------------------ 6 · wherever you work */
.ai-surfaces { padding: var(--space-4xl) 0 var(--space-3xl); }
.ai-surfaces__list { display: grid; gap: var(--space-md); margin-top: var(--space-2xl); }
.ai-surface {
  display: grid; gap: var(--space-xs); align-content: start; padding: var(--space-xl) var(--space-lg);
  border-radius: var(--radius-card); background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); box-shadow: var(--shadow-soft);
}
.ai-surface__title { font: 800 var(--text-xl)/1.15 var(--font-display); letter-spacing: -0.02em; }
.ai-surface__body { color: var(--color-muted); }
@media (min-width: 860px) { .ai-surfaces__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }