.assistant-dock { position: fixed; z-index: 4; right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(8px + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
.dock-inner { position: relative; }
.mascot-bubble {
  position: absolute; right: 2px; bottom: 100%; width: max-content; max-width: min(245px, 100vw - 32px); padding: 7px 12px;
  border: 1px solid #ddccd9; border-radius: 13px 13px 6px 13px; background: var(--white);
  box-shadow: 0 3px 10px #38243a12; color: var(--plum); font-size: 13px; font-weight: 700; line-height: 1.35;
}
.mascot-bubble::after { content: ""; position: absolute; right: 29px; bottom: -5px; width: 8px; height: 8px; background: inherit; border-right: 1px solid #ddccd9; border-bottom: 1px solid #ddccd9; transform: rotate(45deg); }
.mascot-button { pointer-events: auto; display: block; width: 88px; height: 76px; padding: 0; background: transparent; border: 0; border-radius: 16px; }
.mascot { display: block; width: 100%; height: 100%; overflow: visible; --breathing: breathing 4.4s ease-in-out infinite; --blinking: blink 6.2s linear infinite; --gaze-duration: .18s; }
.mascot-button[data-reacting] { --greeting: greet .55s ease-in-out; }
.mascot-button[data-glancing] { --brow-lift: -3px; }
.mascot-button[data-idle-gesture="scratch"] {
  --idle-head: scratch-head 1.8s ease-in-out;
  --idle-paw: scratch-paw 1.8s ease-in-out;
}
.mascot-button[data-idle-gesture="sleepy"] {
  --idle-head: sleepy-head 2.1s ease-in-out;
  --idle-eyes: sleepy-eyes 2.1s ease-in-out;
  --idle-mouth: sleepy-yawn 2.1s ease-in-out;
  --idle-smile: sleepy-smile 2.1s ease-in-out;
}
.mascot-button[data-idle-gesture] .mascot { --blinking: none; }
.mascot-button[data-hidden] .mascot { --breathing: none; --blinking: none; }
.assistant-dock[data-context="night-lenya"] { --brow-color: #6a4d77; }
.assistant-dock[data-context="calculator"] { --tail-angle: -8deg; }
.mascot-button[data-answering], .answer-mascot { --smile-opacity: 0; --reply-opacity: 1; --reply-animation: reply .65s ease-out; }

.assistant-panel { --accent: #6e4281; --soft: #ede0ee; position: fixed; inset: auto 0 0; width: 100%; max-width: none; max-height: min(77dvh, 560px); margin: 0; padding: 19px 19px calc(19px + env(safe-area-inset-bottom, 0px)); overflow: auto; overscroll-behavior: contain; border: 1px solid #d1bbcf; border-radius: 20px 20px 0 0; background: var(--white); color: var(--ink); box-shadow: 0 15px 55px #2c1b3460; }
.assistant-panel::backdrop { background: #2416284d; }
.panel-head { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.panel-head h2 { margin: 4px 0; color: var(--plum); font: 700 25px/1.14 var(--display); }
.panel-context { color: var(--muted); font-size: 13px; font-weight: 700; }
.close-button { display: grid; flex: 0 0 48px; place-items: center; height: 48px; padding: 0; border-radius: 50%; background: var(--paper); border: 1px solid #baacb7; color: var(--plum); font-size: 24px; line-height: 1; }
.questions { display: grid; gap: 7px; margin-top: 15px; }
.question { min-height: 48px; padding: 8px 11px; border: 1px solid #d5c5d7; border-radius: 8px; background: #f7eff7; color: var(--plum); text-align: left; font-size: 14px; font-weight: 800; -webkit-tap-highlight-color: transparent; }
.question[aria-pressed="true"] { border-color: var(--accent); background: var(--soft); color: #512c63; }
.answer:not(:empty) { margin-top: 13px; padding: 12px 0 0; border-top: 1px solid var(--line); }
.answer-tag { color: var(--accent); font-size: 12px; font-weight: 800; }
.answer-copy { margin-top: 4px; font-size: 15px; }
.answer a { text-decoration: underline; display: inline-flex; align-items: center; min-height: 48px; margin-bottom: -7px; color: #58336e; font-size: 13px; font-weight: 800; text-underline-offset: 3px; }
.answer-mascot { float: right; width: 44px; height: 39px; margin: -2px 0 5px 9px; }

@media (min-width: 800px) {
  .assistant-dock { right: max(22px, env(safe-area-inset-right, 0px)); }
  .assistant-panel { inset: auto 22px calc(101px + env(safe-area-inset-bottom, 0px)) auto; width: min(376px, 100% - 44px); max-height: calc(100dvh - 124px - env(safe-area-inset-bottom, 0px)); border-radius: 16px; }
  .assistant-panel::backdrop { background: #24162822; }
}

@media (prefers-reduced-motion: reduce) {
  .mascot { --breathing: none; --blinking: none; --gaze-duration: 0s; }
  .mascot-button[data-reacting] { --greeting: none; }
  .mascot-button[data-answering], .answer-mascot { --reply-animation: none; }
}

@media (max-width: 740px) and (orientation: portrait) {
  .mascot-button { width: 68px; height: 60px; }
  body:has(.route-picker.route-in-view) .assistant-dock {
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  }
  .footer { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}