/* Standalone concierge theme: shared semantic roles for every visible control. */
:root {
  color-scheme: light;
  --bg: oklch(0.98 0.004 160);
  --panel: oklch(1 0 0);
  --ink: oklch(0.25 0.025 165);
  --muted: oklch(0.52 0.018 165);
  --line: oklch(0.9 0.012 165);
  --brand: oklch(0.23 0.025 165);
  --brand-ink: oklch(0.98 0.005 160);
  --accent: oklch(0.43 0.075 165);
  --user: var(--accent);
  --user-ink: var(--panel);
  --bot: transparent;
  --warn: oklch(0.5 0.13 45);
  --gold: oklch(0.77 0.12 85);
  --hover: oklch(0.95 0.015 165);
  --shadow: 0 8px 28px oklch(0.25 0.025 165 / 0.06);
}
body { font-size: 16px; line-height: 1.65; }
header { background: var(--brand); padding: 20px 32px; padding-top: calc(20px + env(safe-area-inset-top)); }
.top { max-width: 1120px; margin: auto; }
h1 { font-size: 22px; font-weight: 600; letter-spacing: 0; }
h1 .mark { height: 34px; vertical-align: -9px; margin-inline-end: 10px; }
.where { font-size: 12px; margin-top: 6px; opacity: .75; }
select { border-color: color-mix(in oklch, var(--brand-ink) 25%, transparent); background: transparent; padding: 9px 12px; max-width: 42%; }
select option { color: var(--ink); background: var(--panel); }
.notice { order: 4; background: var(--bg); border: 0; text-align: center; font-size: 11px; line-height: 1.5; padding: 12px 24px 16px; }
main { width: 100%; max-width: 840px; margin: 0 auto; padding: 32px 28px 24px; gap: 22px; min-height: 0; }
main:not(.started) { justify-content: center; }
.welcome { text-align: center; margin-bottom: 0; }
.companion-dock { flex-shrink: 0; width: calc(100% - 48px); max-width: 784px; height: 118px; margin: 0 auto; display: flex; justify-content: flex-end; padding-inline-end: 8px; }
.avatar-stage { position: relative; width: 116px; height: 118px; margin: 0; perspective: 700px; }
.avatar-stage::after { content: ''; position: absolute; bottom: 1px; left: 50%; width: 76px; height: 9px; margin-left: -38px; border-radius: 50%; background: var(--avatar-shadow); filter: blur(4px); animation: avatar-shadow 4s ease-in-out infinite; }
.avatar-puppet { position: relative; z-index: 1; width: 100%; aspect-ratio: 1; animation: avatar-float 4s ease-in-out infinite; transform-origin: center 60%; }
.avatar-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; border-radius: 0; padding: 0; margin: 0; pointer-events: none; }
.avatar-arm-left { transform-origin: 34% 55%; }
.avatar-arm-right { transform-origin: 66% 55%; }
.avatar-stage .avatar-face { inset: auto; object-fit: fill; transform-origin: center; }
.avatar-stage .avatar-eye-left { left: 33.6914%; top: 24.9023%; width: 12.207%; height: 8.7891%; }
.avatar-stage .avatar-eye-right { left: 56.1523%; top: 21.4844%; width: 11.7188%; height: 8.4961%; }
.avatar-stage .avatar-smile { left: 46.3867%; top: 29.9805%; width: 10.9375%; height: 5.3711%; animation: friendly-smile 4s ease-in-out infinite; }
.avatar-eye { animation: friendly-blink 5.4s ease-in-out infinite; }
.companion[data-state="listening"] .avatar-eye { animation: attentive-eyes 2.4s ease-in-out infinite; }
.companion[data-state="thinking"] .avatar-eye-right { animation: thinking-wink 2.8s ease-in-out infinite; }
.companion[data-state="answering"] .avatar-smile { animation: speaking-smile .7s ease-in-out infinite; }
.companion[data-state="happy"] .avatar-smile { animation: delighted-smile .8s ease-in-out 4; }
.companion[data-state="happy"] .avatar-eye { animation: happy-eyes .8s ease-in-out 4; }
@keyframes friendly-blink { 0%, 42%, 48%, 100% { transform: scaleY(1); } 45% { transform: scaleY(.12); } }
@keyframes friendly-smile { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12, 1.18); } }
@keyframes attentive-eyes { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px) scaleY(1.12); } }
@keyframes thinking-wink { 0%, 35%, 65%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.2); } }
@keyframes speaking-smile { 0%, 100% { transform: scale(1, .85); } 50% { transform: scale(1.15, 1.55); } }
@keyframes delighted-smile { 0%, 100% { transform: scale(1.12, 1.2); } 50% { transform: scale(1.3, 1.5); } }
@keyframes happy-eyes { 0%, 100% { transform: scaleY(.85); } 50% { transform: scaleY(.65); } }
.companion[data-state="answering"] .avatar-arm-left { animation: arm-present-left 1.8s ease-in-out infinite; }
.companion[data-state="answering"] .avatar-arm-right { animation: arm-present-right 1.8s ease-in-out infinite; }
.companion[data-state="happy"] .avatar-arm-left { animation: arm-wave .8s ease-in-out 3; }
.companion[data-state="happy"] .avatar-arm-right { animation: arm-present-right 1.8s ease-in-out 2; }
@keyframes arm-present-left { 0%, 100% { transform: rotate(55deg); } 50% { transform: rotate(80deg); } }
@keyframes arm-present-right { 0%, 100% { transform: rotate(-22deg); } 50% { transform: rotate(-40deg); } }
@keyframes arm-wave { 0%, 100% { transform: rotate(55deg); } 50% { transform: rotate(90deg); } }
.companion-reaction { position: absolute; inset-inline-end: 102px; top: 14px; min-width: 42px; height: 38px; padding: 0 10px; display: grid; place-items: center; background: var(--panel); color: var(--accent); border: 1px solid var(--line); border-radius: 8px; font-size: 20px; box-shadow: var(--shadow); opacity: 0; transition: opacity .2s; }
.companion:not([data-state="idle"]) .companion-reaction { opacity: 1; }
.companion[data-state="listening"] .avatar-puppet { animation: companion-listen 2s ease-in-out infinite; }
.companion[data-state="thinking"] .avatar-puppet { animation: companion-think 1.6s ease-in-out infinite; }
.companion[data-state="answering"] .avatar-puppet { animation: avatar-answer 1.8s ease-in-out infinite; }
.companion[data-state="happy"] .avatar-puppet { animation: companion-happy .65s ease-in-out 3; }
.companion[data-state="error"] .avatar-puppet { animation: companion-think 2s ease-in-out infinite; }
@keyframes companion-listen { 0%, 100% { transform: rotate(-8deg) translateY(-3px); } 50% { transform: rotate(-3deg) translateY(-6px); } }
@keyframes companion-think { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg) translateY(-4px); } }
@keyframes companion-happy { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(5deg); } }
:root { --avatar-shadow: oklch(0.25 0.025 165 / .18); }
@keyframes avatar-float { 0%, 100% { transform: translateY(0) rotate(-3deg) rotateY(-8deg); } 50% { transform: translateY(-12px) rotate(3deg) rotateY(8deg); } }
@keyframes avatar-shadow { 0%, 100% { transform: scaleX(1); opacity: .8; } 50% { transform: scaleX(.75); opacity: .4; } }
@keyframes avatar-answer { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-5px) rotate(5deg); } }
.welcome h2 { font-size: 32px; line-height: 1.25; font-weight: 600; margin: 0; letter-spacing: 0; }
.welcome + .bot { text-align: center; align-self: center; max-width: 570px; color: var(--muted); font-size: 16px; padding: 0; }
.msg { max-width: 90%; border-radius: 8px; padding: 14px 18px; }
.bot { background: transparent; position: relative; padding-inline-start: 44px; align-self: stretch; max-width: 100%; }
.started .bot::before { content: ''; position: absolute; inset-inline-start: 0; top: 14px; width: 32px; height: 38px; background: url('/sbd-avatar.png') center / contain no-repeat; }
.started .bot.typing::before, .started .bot.typewriter::before { animation: avatar-answer .9s ease-in-out infinite; }
.user { border-radius: 8px 8px 2px 8px; background: var(--user); color: var(--user-ink); }
.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 640px; align-self: center; margin-top: 8px; }
.chip { position: relative; border-radius: 8px; padding: 18px 42px 18px 18px; text-align: start; font-size: 14px; line-height: 1.5; min-height: 72px; transition: background .18s, border-color .18s, transform .18s; }
.chip::after { content: '↗'; position: absolute; inset-inline-end: 17px; top: 50%; transform: translateY(-50%); color: var(--accent); font-size: 20px; }
.chip:hover { background: var(--hover); border-color: var(--accent); transform: translateY(-2px); }
.chip.feature { background: var(--accent); color: var(--user-ink); }
.chip.feature::after { color: var(--user-ink); }
form { position: relative; width: calc(100% - 48px); max-width: 784px; margin: 0 auto; padding: 8px; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); gap: 8px; flex-shrink: 0; }
input { background: transparent; border: 0; padding: 12px 14px; border-radius: 6px; }
button.send { position: relative; width: 48px; height: 48px; min-width: 48px; padding: 0; border-radius: 8px; color: transparent; overflow: hidden; }
button.send::after { content: '↑'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--user-ink); font-size: 26px; }
button.send:hover:not(:disabled) { background: var(--brand); }
.typing { font-style: normal; animation: thinking 1.5s ease-in-out infinite; }
.journey { padding-inline: max(24px, calc((100% - 784px) / 2)); }
.cont { border-radius: 8px; }
.dirs { margin-inline-start: 44px; }
a.walk, .journey button, .cont button, .seen { border-radius: 8px; }
.cont button.go, .seen { color: var(--user-ink); }
@keyframes thinking { 50% { opacity: .45; } }
@media (max-width: 600px) {
  header { padding: 16px 18px; padding-top: calc(16px + env(safe-area-inset-top)); }
  h1 { font-size: 20px; }
  .where { font-size: 11px; max-width: 230px; }
  select { font-size: 13px; padding: 8px; }
  main { padding: 24px 20px; gap: 18px; }
  .companion-dock { width: calc(100% - 32px); height: 96px; }
  .avatar-stage { width: 94px; height: 96px; }
  .companion-reaction { inset-inline-end: 82px; top: 8px; }
  .welcome h2 { font-size: 26px; }
  .welcome + .bot { font-size: 14px; }
  .chip { font-size: 13px; padding: 14px 30px 14px 12px; min-height: 78px; }
  .chip::after { inset-inline-end: 10px; font-size: 17px; }
  form { width: calc(100% - 32px); }
  .notice { font-size: 10px; padding: 10px 18px calc(10px + env(safe-area-inset-bottom)); }
}
@media (max-height: 700px) { main:not(.started) { justify-content: flex-start; } }
@media (prefers-reduced-motion: reduce) { .typing, .started .bot::before { animation: none; } .chip { transition: none; } }