:root {
  color-scheme: light;
  --surface: #faf9f5;
  --surface-low: #f4f4f0;
  --surface-ink: #1b1c1a;
  --surface-muted: #54433c;
  --surface-faint: #87736b;
  --terracotta: #823b18;
  --terracotta-soft: rgba(130, 59, 24, 0.08);
  --line: rgba(218, 193, 184, 0.55);
  --phone-width: 420px;
  --shadow-soft: 0 14px 36px rgba(27, 28, 26, 0.08);
  --font-headline: "Newsreader", "Iowan Old Style", "Palatino Linotype", "Noto Serif SC", "STSong", serif;
  --font-body: "Manrope", "Avenir Next", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  /* Unified rainbow gradient — matches .auth-panel::before top bar.
     Source hues: #007cf0 (blue) → #00dfd8 (cyan) → #7928ca (violet) → #ff0080 (pink) → #f9cb28 (amber).
     Saturation reduced ~30% for a softer, less vivid look as required. */
  --rainbow-gradient: linear-gradient(90deg,
    #5a8fcc 0%,    /* blue, desaturated */
    #5ab8b4 24%,   /* cyan, desaturated */
    #8a6db5 50%,   /* violet, desaturated */
    #c45a8a 74%,   /* pink, desaturated */
    #d4ab48 100%   /* amber, desaturated */
  );
  --rainbow-gradient-vertical: linear-gradient(180deg,
    #5a8fcc 0%, #5ab8b4 24%, #8a6db5 50%, #c45a8a 74%, #d4ab48 100%
  );
  /* step-04: shared layout heights so Step 5 (composer FAB) / Step 7 (transient cards) can hook into the same anchors. */
  --header-height: 68px;
  --input-bar-height: 150px;
  --bottom-nav-height: 84px;
  --bottom-nav-visual-height: 84px;
  --composer-nav-clearance: calc(var(--bottom-nav-visual-height) + 4px);
  --composer-dock-gap: 24px;
  --supporting-workspace-bottom-safe-space: calc(env(safe-area-inset-bottom, 0px) + var(--bottom-nav-height) + 140px);
  /* 60vh gives ample room for chat history while still leaving space for the
     header (68px) and input bar (96px). Bumped from 28vh to fix the missing
     scrollbar / clipped-history bug. */
  --bubble-area-max-height: 60vh;
  --avatar-face-y-start: 25vh;
  --bubble-side-gutter: 14px;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  min-height: max(884px, 100dvh);
  background:
    radial-gradient(circle at top, rgba(130, 59, 24, 0.05), transparent 28%),
    linear-gradient(180deg, #fcfbf8 0%, #f7f4ee 100%);
  color: var(--surface-ink);
  font-family: var(--font-body);
}

button,
input,
textarea,
select,
a {
  font: inherit;
}

button,
input,
textarea,
select {
  margin: 0;
}

button {
  border: 0;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.hidden,
.contract-hidden {
  display: none !important;
}

.tourist-app {
  min-height: 100svh;
}

.workspace-stack {
  min-height: 0;
}

.shell-notice {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  left: 50%;
  z-index: 60;
  /* Toasts communicate state but must never become a modal barrier. */
  pointer-events: none;
  width: min(calc(100% - 20px), 26rem);
  max-width: calc(var(--phone-width) - 16px);
  padding: 10px 12px;
  border-radius: 8px;
  transform: translateX(-50%);
  background: rgba(250, 249, 245, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 14px 34px rgba(27, 28, 26, 0.08);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  line-height: 1.45;
}

.shell-notice--dismissing {
  animation: notice-fade-out 0.3s ease-out forwards;
}

/* H1: shell-notice entrance animation (translateY + opacity, no color/layout change) */
.shell-notice {
  animation: shell-notice-in 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Keep dismissal animation precedence over the default notice entrance. */
.shell-notice.shell-notice--dismissing {
  animation: notice-fade-out 0.3s ease-out forwards;
}

@keyframes shell-notice-in {
  from { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.92); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes notice-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.shell-notice__text {
  flex: 1;
  min-width: 0;
  font-size: 0.92rem;
  font-weight: 700;
}

.shell-notice__close {
  flex-shrink: 0;
  pointer-events: auto;
  background: none;
  border: none;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.shell-notice__close:hover,
.shell-notice__close:focus-visible {
  opacity: 1;
}

.shell-notice.warn {
  color: #825520;
}

.shell-notice.error {
  color: #9d2d25;
}

body[data-active-workspace]:not([data-active-workspace="entry"]) .shell-notice {
  /* Keep the dismiss control above the composer dock, never over its action row. */
  bottom: calc(
    env(safe-area-inset-bottom, 0px) + var(--bottom-nav-height) +
      var(--input-bar-height) + 14px
  );
}

/* Location fallback is contextual guidance, not a bottom toast. Keep it below
   the session header so the composer, camera entry, and bottom navigation stay
   available while the visitor continues the conversation. */
.shell-notice--location {
  top: calc(var(--header-height) + 8px);
  bottom: auto;
  z-index: 38;
}

body[data-active-workspace]:not([data-active-workspace="entry"]) .shell-notice--location {
  bottom: auto;
}

body[data-active-workspace]:not([data-active-workspace="conversation"]) .shell-notice--location {
  display: none !important;
}

@media (max-width: 420px) {
  .shell-notice {
    width: min(calc(100% - 16px), 23rem);
    padding: 9px 11px;
  }

  .shell-notice__text {
    font-size: 0.89rem;
  }
}

/* 旅途档案面板 */
.my-records-overlay {
  position: fixed;
  inset: 0;
  z-index: 75;
  background: rgba(0, 0, 0, 0.32);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.my-records-overlay.hidden {
  display: none;
}

.my-records-sheet {
  width: min(100%, var(--phone-width));
  height: 100dvh;
  max-height: 100dvh;
  background: rgba(250, 249, 245, 0.98);
  border-radius: 8px 8px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.my-records-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px;
  background: var(--surface-container-low, #f4f4f0);
}

.my-records-sheet__eyebrow,
.share-poster-sheet__eyebrow {
  margin: 0 0 3px;
  color: var(--terracotta, #823b18);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.my-records-sheet__header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.my-records-sheet__create {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  border: 1px solid rgba(130, 59, 24, 0.2);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--terracotta, #823b18);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.my-records-sheet__create .material-symbols-outlined {
  font-size: 17px;
}

.my-records-sheet__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink, #1d2b22);
  margin: 0;
}

.my-records-sheet__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  color: var(--muted, #5b6f63);
  cursor: pointer;
  padding: 0;
}

.my-records-sheet__close:hover {
  background: rgba(0, 0, 0, 0.1);
}

.my-records-tabs-shell {
  position: relative;
  background: var(--surface-container-low, #f4f4f0);
  padding-bottom: 8px;
}

.my-records-tabs-shell::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 44px;
  background: linear-gradient(90deg, rgba(244, 244, 240, 0), rgba(244, 244, 240, 0.96));
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.my-records-tabs-shell[data-overflowing="true"][data-end-reached="false"]::after {
  opacity: 1;
}

.my-records-tabs {
  display: flex;
  gap: 8px;
  padding: 0 14px 2px;
  background: var(--surface-container-low, #f4f4f0);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-padding-inline: 14px;
  scroll-snap-type: x proximity;
}

.my-records-tabs::-webkit-scrollbar {
  display: none;
}

.my-records-tabs::after {
  content: "";
  flex: 0 0 18px;
}

.my-records-tab {
  flex-shrink: 0;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: var(--muted, #5b6f63);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  border-radius: 4px 4px 0 0;
  transition: color 160ms, border-color 160ms, background 160ms;
  scroll-snap-align: start;
}

.my-records-tab.active {
  color: var(--terracotta, #823b18);
  border-bottom-color: var(--terracotta, #823b18);
  background: rgba(250, 249, 245, 0.78);
}

.my-records-tabs-hint {
  margin: 0;
  padding: 0 14px;
  color: var(--surface-muted, #54433c);
  font-size: 0.72rem;
  line-height: 1.35;
}

.my-records-tabs-shell[data-overflowing="false"] .my-records-tabs-hint {
  display: none;
}

.my-records-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 24px;
  min-height: 200px;
}

.my-records-empty {
  text-align: center;
  color: var(--muted, #5b6f63);
  font-size: 0.85rem;
  padding: 40px 0;
}

.my-records-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.my-record-card {
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--surface-container-low, #f4f4f0);
}

.my-record-card__title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink, #1d2b22);
  margin: 0 0 4px;
}

.my-record-card__meta {
  font-size: 0.75rem;
  color: var(--muted, #5b6f63);
  margin: 0;
}

.my-record-card__badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(130, 59, 24, 0.1);
  color: var(--terracotta, #823b18);
  margin-top: 6px;
}

.my-record-card__badge--locked {
  background: rgba(0, 0, 0, 0.06);
  color: var(--muted, #5b6f63);
}

.my-record-card--profile-cluster {
  margin-bottom: 12px;
  background: var(--surface-container, #efeee8);
  box-shadow: inset 3px 0 0 var(--terracotta, #823b18);
}

.my-record-profile-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.my-record-card__badge--profile-summary {
  margin-top: 0;
  border-radius: 4px;
  background: rgba(130, 59, 24, 0.1);
  color: var(--ink, #1d2b22);
}

.my-record-card__label-prefix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.5em;
  margin-right: 8px;
  color: var(--terracotta, #823b18);
  font-size: 0.72rem;
}

.my-record-card__delete {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  color: var(--muted, #5b6f63);
  font-size: 0.7rem;
  cursor: pointer;
  padding: 0;
  transition: background 160ms, color 160ms;
}

.my-record-card__delete:hover {
  background: rgba(157, 45, 37, 0.1);
  color: #9d2d25;
}

.my-record-card__delete:disabled {
  opacity: 0.5;
  cursor: default;
}

.my-record-card__action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0;
  transition: background 160ms;
}

.my-record-card__action:hover {
  background: rgba(130, 59, 24, 0.12);
}

/* Share poster composer */
.share-poster-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.38);
}

.share-poster-overlay.hidden {
  display: none;
}

.share-poster-sheet {
  width: min(100%, var(--phone-width));
  height: 100dvh;
  max-height: 100dvh;
  overflow-y: auto;
  padding: 20px 18px calc(24px + env(safe-area-inset-bottom, 0px));
  border-radius: 10px 10px 0 0;
  background: #faf9f5;
  color: var(--surface-ink, #1b1c1a);
}

.share-poster-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.share-poster-sheet__header h2 {
  margin: 0;
  color: var(--surface-ink, #1b1c1a);
  font-size: 1.3rem;
  line-height: 1.3;
}

.share-poster-sheet__header p:not(.share-poster-sheet__eyebrow) {
  margin: 5px 0 0;
  color: var(--surface-muted, #54433c);
  font-size: 0.78rem;
  line-height: 1.45;
}

.share-poster-form {
  display: grid;
  gap: 16px;
}

.share-poster-field {
  display: grid;
  gap: 7px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.share-poster-field__label,
.share-poster-choice-group legend {
  color: var(--surface-ink, #1b1c1a);
  font-size: 0.78rem;
  font-weight: 700;
}

.share-poster-field__label em {
  color: var(--surface-muted, #806f68);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 400;
}

.share-poster-field select,
.share-poster-field input[type="text"],
.share-poster-field textarea {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid rgba(27, 28, 26, 0.14);
  border-radius: 6px;
  outline: none;
  background: #fff;
  color: var(--surface-ink, #1b1c1a);
  font: inherit;
  font-size: 0.85rem;
}

.share-poster-field textarea {
  min-height: 76px;
  resize: vertical;
  line-height: 1.5;
}

.share-poster-field select:focus,
.share-poster-field input:focus,
.share-poster-field textarea:focus {
  border-color: var(--terracotta, #823b18);
  box-shadow: 0 0 0 3px rgba(130, 59, 24, 0.1);
}

.share-poster-choice-grid,
.share-poster-theme-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.share-poster-choice,
.share-poster-theme {
  position: relative;
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  padding: 8px 5px;
  border: 1px solid rgba(27, 28, 26, 0.12);
  border-radius: 6px;
  background: #fff;
  color: var(--surface-muted, #54433c);
  font-size: 0.76rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 160ms, background 160ms, color 160ms;
}

.share-poster-choice input,
.share-poster-theme input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.share-poster-choice:has(input:checked),
.share-poster-theme:has(input:checked) {
  border-color: var(--terracotta, #823b18);
  background: rgba(130, 59, 24, 0.08);
  color: var(--terracotta, #823b18);
  font-weight: 700;
}

.share-poster-theme {
  min-height: 72px;
  flex-direction: column;
  gap: 4px;
}

.share-poster-theme__swatch {
  width: 28px;
  height: 16px;
  border-radius: 3px;
  background: var(--poster-swatch, #d7e4db);
}

.share-poster-upload {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px dashed rgba(130, 59, 24, 0.32);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--terracotta, #823b18);
  font-size: 0.78rem;
  cursor: pointer;
}

.share-poster-image-preview {
  overflow: hidden;
  max-height: 150px;
  border-radius: 6px;
  background: #eee;
}

.share-poster-image-preview img {
  display: block;
  width: 100%;
  max-height: 150px;
  object-fit: cover;
}

.share-poster-feedback {
  min-height: 20px;
  margin: -4px 0 0;
  color: var(--surface-muted, #54433c);
  font-size: 0.78rem;
  line-height: 1.45;
}

.share-poster-feedback[data-tone="error"] {
  color: #a32920;
}

.share-poster-feedback[data-tone="success"] {
  color: #276744;
}

.share-poster-result {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(27, 28, 26, 0.1);
  border-radius: 6px;
  background: #fff;
}

.share-poster-result__image-wrap {
  overflow: hidden;
  min-height: 160px;
  border-radius: 4px;
  background: #ecebe6;
}

.share-poster-result__image-wrap img {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
}

.share-poster-result__meta {
  margin: 0;
  color: var(--surface-muted, #54433c);
  font-size: 0.74rem;
  line-height: 1.4;
}

.share-poster-actions {
  display: flex;
  gap: 8px;
}

.share-poster-button {
  display: inline-flex;
  min-height: 46px;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.share-poster-button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.share-poster-button--primary {
  background: var(--terracotta, #823b18);
  color: #fff;
}

.share-poster-button--secondary {
  border-color: rgba(27, 28, 26, 0.14);
  background: #fff;
  color: var(--surface-ink, #1b1c1a);
}

/* 成就解锁 toast */
.achievement-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 80;
  padding: 14px 24px;
  border-radius: 14px;
  background: rgba(130, 59, 24, 0.95);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  max-width: min(90%, var(--phone-width));
  text-align: center;
  box-shadow: 0 8px 32px rgba(130, 59, 24, 0.3);
  opacity: 0;
  transition: opacity 300ms ease, transform 300ms ease;
  pointer-events: none;
}

.achievement-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.paper-grain {
  background-image:
    radial-gradient(circle at 20% 20%, rgba(130, 59, 24, 0.08) 0, rgba(130, 59, 24, 0.08) 0.6px, transparent 0.8px),
    radial-gradient(circle at 80% 35%, rgba(84, 67, 60, 0.06) 0, rgba(84, 67, 60, 0.06) 0.5px, transparent 0.7px),
    radial-gradient(circle at 55% 75%, rgba(130, 59, 24, 0.05) 0, rgba(130, 59, 24, 0.05) 0.6px, transparent 0.8px);
  background-size: 18px 18px, 24px 24px, 22px 22px;
}

.session-shell {
  position: relative;
  /* step-04: give the flex column a definite height so workspace-stack (flex-1)
     can actually expand and let .conversation-stage (height: 100%) fill the screen.
     Without this the Tailwind `min-h-screen` only sets MIN height — child `height: 100%`
     would collapse to content height and the avatar would render as ~370px. */
  height: 100dvh;
  min-height: 0;
}

.status-ribbon-stack {
  display: grid;
  gap: 6px;
  padding: 8px 14px 0;
}

/* step-04: hide governance / capability ribbons on the formal conversation surface so
   tourists see only the digital human + chat. They still surface on other workspaces
   (route / reminder / image / follow-up) where they're directly relevant. */
body[data-active-workspace="conversation"] .status-ribbon-stack .status-ribbon {
  display: none !important;
}

/* Keep the follow-up banner ("当前对话还缺信息：...") visible on conversation — it tells
   tourists which slot they still need to fill. Hide it elsewhere as before. */
body[data-active-workspace]:not([data-active-workspace="conversation"]) #follow-up-banner {
  display: none !important;
}

.status-ribbon {
  padding: 0;
  border-radius: 14px;
  background: rgba(244, 244, 240, 0.92);
  box-shadow: 0 8px 24px rgba(27, 28, 26, 0.04);
  animation: ribbon-slide-in 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ribbon-slide-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
    max-height: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 200px;
  }
}

.status-ribbon--warn {
  background: rgba(255, 245, 238, 0.96);
}

.status-ribbon__body {
  padding: 10px 12px;
}

.workspace-screen {
  display: none;
  min-height: 0;
}

.workspace-screen.active {
  display: block;
}

.workspace-screen--conversation.active {
  height: 100%;
  overflow: hidden;
}

/* Supporting workspace panels: scrollable with custom translucent scrollbar */
.workspace-screen:not(.workspace-screen--conversation).active {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: calc(var(--supporting-workspace-bottom-safe-space) + 16px);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(130, 59, 24, 0.25) transparent;
  scroll-padding-bottom: calc(var(--supporting-workspace-bottom-safe-space) + 16px);
}

.workspace-screen:not(.workspace-screen--conversation).active::-webkit-scrollbar {
  width: 5px;
}

.workspace-screen:not(.workspace-screen--conversation).active::-webkit-scrollbar-track {
  background: transparent;
}

.workspace-screen:not(.workspace-screen--conversation).active::-webkit-scrollbar-thumb {
  background: rgba(130, 59, 24, 0.25);
  border-radius: 999px;
}

.workspace-screen:not(.workspace-screen--conversation).active::-webkit-scrollbar-thumb:hover {
  background: rgba(130, 59, 24, 0.45);
}

.avatar-stage {
  display: flex;
  height: 32px;
  width: 32px;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(227, 226, 223, 0.7);
  color: var(--surface-faint);
}

.avatar-stage__badge {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--terracotta);
  font-size: 18px;
}

.avatar-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.avatar-shell__figure {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(227, 226, 223, 0.96));
}

.avatar-shell__halo {
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0) 58%);
  opacity: 0.92;
}

.avatar-shell__portrait {
  position: absolute;
  left: 8px;
  top: 6px;
  width: 16px;
  height: 20px;
  border-radius: 999px 999px 10px 10px;
  background: linear-gradient(180deg, rgba(84, 67, 60, 0.68), rgba(84, 67, 60, 0.28));
}

.avatar-shell__mouth {
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 8px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  transform: translateX(-50%);
}

.avatar-shell[data-speech-state^="speaking"] .avatar-shell__mouth,
.avatar-shell[data-speech-state="greeting"] .avatar-shell__mouth {
  height: 5px;
}

.avatar-shell__caption {
  display: none;
}

.avatar-stage img,
.avatar-stage canvas,
.avatar-stage svg,
.avatar-stage video,
.avatar-stage > div {
  height: 100%;
  width: 100%;
}

.avatar-shell--provider {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.avatar-shell__stage {
  position: absolute;
  inset: 0;
  display: block;
}

.avatar-shell__stage canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  background: transparent;
}

.avatar-shell--live2d {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.72), transparent 34%),
    linear-gradient(180deg, rgba(244, 244, 240, 0.92), rgba(227, 226, 223, 0.82));
}

.avatar-shell--aliyun-broadcasting {
  background: #f3f5f2;
}

.avatar-shell__stage--aliyun {
  z-index: 2;
  overflow: hidden;
}

.avatar-shell__stage--aliyun video {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  background: transparent;
}

.avatar-shell__stage--live2d {
  z-index: 2;
}

.avatar-shell__fallback-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  height: 100%;
  width: 100%;
  object-fit: cover;
  opacity: 0.94;
}

.avatar-shell__live2d-mouth {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 13%;
  width: 12%;
  min-width: 18px;
  height: 4px;
  border-radius: 999px;
  background: rgba(84, 67, 60, 0.42);
  opacity: 0;
  transform: translateX(-50%) scaleY(1);
  transform-origin: center;
  transition: opacity 200ms ease, transform 160ms ease;
}

.avatar-shell--live2d[data-lip-sync-mode="text_approximation"] .avatar-shell__live2d-mouth,
.avatar-shell--live2d[data-lip-sync-mode="audio_analysis"] .avatar-shell__live2d-mouth {
  opacity: 0.75;
  animation: live2d-mouth-text-approx 420ms ease-in-out infinite;
}

/* C4: audio_analysis mode gets a more organic, wider-amplitude mouth animation
   to reflect real audio-driven lip sync (vs text-approximation's mechanical rhythm). */
.avatar-shell--live2d[data-lip-sync-mode="audio_analysis"] .avatar-shell__live2d-mouth {
  animation: live2d-mouth-audio 280ms ease-in-out infinite;
}

@keyframes live2d-mouth-audio {
  0%, 100% { transform: translateX(-50%) scaleY(0.5); }
  30%      { transform: translateX(-50%) scaleY(2.6); }
  60%      { transform: translateX(-50%) scaleY(1.2); }
  80%      { transform: translateX(-50%) scaleY(2.0); }
}

@keyframes live2d-mouth-text-approx {
  0%, 100% {
    transform: translateX(-50%) scaleY(0.7);
  }
  50% {
    transform: translateX(-50%) scaleY(2.2);
  }
}

.avatar-shell__loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  background: rgba(250, 249, 245, 0.68);
  color: var(--surface-muted, #6f6a63);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  /* step-04: delay the visibility transition only when REVEALING so going hidden snaps
     visibility off instantly after the 320 ms opacity fade ends. Prevents "正在加载实时数字人..."
     from lingering in the a11y tree once mount succeeds. */
  transition: opacity 320ms ease, visibility 0s 320ms;
  pointer-events: none;
  visibility: visible;
}

.avatar-shell__loading-icon {
  font-size: 28px;
  color: var(--terracotta, #b46b50);
  animation: avatar-shell-loading-spin 1.6s linear infinite;
}

.avatar-shell__loading-overlay--hidden {
  opacity: 0;
  visibility: hidden;
  /* Match the parent's opacity transition so visibility flips after the fade. */
  transition: opacity 320ms ease, visibility 0s 320ms;
}

@keyframes avatar-shell-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.avatar-stage--hero {
  flex: 1;
  width: 100%;
  height: 100%;
  border-radius: 0;
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.78) 0 12%, transparent 32%),
    radial-gradient(circle at 50% 46%, rgba(130, 59, 24, 0.18) 0 18%, transparent 45%),
    linear-gradient(180deg, #fbf7ef 0%, #efe6d9 52%, #d8c7b5 100%);
  box-shadow: none;
}

.avatar-stage--hero::before,
.avatar-stage--hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

.avatar-stage--hero::before {
  inset: 0;
  background:
    linear-gradient(90deg, rgba(250, 249, 245, 0.62) 0 7%, transparent 24% 76%, rgba(250, 249, 245, 0.62) 93% 100%),
    radial-gradient(ellipse at 50% 76%, rgba(27, 28, 26, 0.18) 0 14%, transparent 46%),
    radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.58) 0 10%, transparent 30%);
  mix-blend-mode: multiply;
  opacity: 0.84;
}

.avatar-stage--hero::after {
  left: 50%;
  top: 6%;
  width: min(82%, 360px);
  height: 82%;
  transform: translateX(-50%);
  border-radius: 999px 999px 18px 18px;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, 0.5), transparent 34%),
    linear-gradient(180deg, rgba(250, 249, 245, 0.14), rgba(130, 59, 24, 0.16));
  filter: blur(0.5px);
  mix-blend-mode: soft-light;
  opacity: 0.86;
}

.avatar-stage--hero .avatar-shell {
  position: relative;
  z-index: 1;
}

/* Fallback avatar breathing — subtle idle life when the live runtime canvas is unavailable */
.avatar-stage--hero[data-avatar-ready="fallback"] .avatar-shell__portrait {
  animation: avatar-breathe 4s ease-in-out infinite;
}

.avatar-stage--hero[data-avatar-ready="fallback"] .avatar-shell__halo {
  animation: avatar-halo-pulse 4s ease-in-out infinite;
}

/* C2 + C6: Live2D provider mode gets a one-time ready-pop on mount, then transitions
   into a subtle breathing idle. Multi-animation: pop runs first (280ms), breathe starts
   after 280ms delay. Gives the digital human a continuous "alive" feel in provider mode. */
.avatar-stage--hero[data-avatar-ready="provider"] .avatar-shell {
  animation: avatar-ready-pop 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both,
             avatar-breathe-subtle 5s ease-in-out infinite 280ms;
}

@keyframes avatar-ready-pop {
  0%   { transform: scale(0.92); }
  60%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* C3: When speaking, replace idle breathe with a more pronounced speaking pulse.
   Gives the avatar a gentle "talking" rhythm synchronized with speech state. */
.avatar-stage--hero[data-avatar-ready="provider"] .avatar-shell--live2d[data-speech-state^="speaking"] {
  animation: avatar-speaking-pulse 1.2s ease-in-out infinite;
}

@keyframes avatar-speaking-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}

@keyframes avatar-breathe-subtle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.012); }
}

@keyframes avatar-breathe {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
  50% { transform: translateX(-50%) scale(1.02); opacity: 0.88; }
}

@keyframes avatar-halo-pulse {
  0%, 100% { opacity: 0.92; }
  50% { opacity: 0.7; }
}

.avatar-stage--hero .avatar-shell__figure,
.avatar-stage--hero .avatar-shell__halo {
  border-radius: 0;
}

.avatar-stage--hero .avatar-shell__figure {
  background: var(--surface-low);
}

.avatar-stage--hero .avatar-shell__portrait {
  left: 50%;
  top: 26px;
  width: 82px;
  height: 104px;
  transform: translateX(-50%);
  border-radius: 999px 999px 18px 18px;
  background: linear-gradient(180deg, rgba(250, 249, 245, 0.82), rgba(210, 183, 152, 0.52));
}

.avatar-stage--hero .avatar-shell__mouth {
  bottom: 28px;
  width: 24px;
  height: 4px;
  background: rgba(255, 255, 255, 0.9);
}

.voice-mode-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.voice-mode-strip--header {
  flex-wrap: nowrap;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(244, 244, 240, 0.92);
}

.voice-mode-chip {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 2px;
  color: var(--surface-muted);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
}

.voice-mode-strip--header .voice-mode-chip {
  min-height: 34px;
  min-width: 34px;
  padding: 0;
  border-radius: 999px;
  color: var(--surface-faint);
}

.voice-mode-chip.active {
  background: rgba(244, 244, 240, 0.96);
  color: var(--terracotta);
}

.voice-mode-strip--header .voice-mode-chip.active {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 16px rgba(27, 28, 26, 0.08);
}

/* ── Accessibility toggle & panel ── */

.a11y-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 0.25rem;
  color: var(--surface-faint);
  cursor: pointer;
  transition: background 300ms, color 300ms;
}

.a11y-toggle:hover {
  background: var(--terracotta-soft);
  color: var(--terracotta);
}

.a11y-toggle[aria-expanded="true"] {
  color: var(--terracotta);
  background: var(--terracotta-soft);
}

.a11y-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 12px;
  z-index: 50;
  min-width: 252px;
  max-width: min(320px, calc(100vw - 24px));
  padding: 12px 14px;
  border-radius: 0.25rem;
  background: var(--surface-low);
  box-shadow: 0 8px 32px rgba(27, 28, 26, 0.1);
  /* ── smooth expand/collapse ── */
  opacity: 1;
  transform: translateY(0) scale(1);
  transform-origin: top right;
  visibility: visible;
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    visibility 0s linear;
}

.a11y-panel.hidden {
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    visibility 0s linear 160ms;
}

.a11y-panel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
}

.a11y-panel__row + .a11y-panel__row {
  background: linear-gradient(to bottom, rgba(218, 193, 184, 0.18), rgba(218, 193, 184, 0.18)) top / 100% 1px no-repeat;
}

.a11y-panel__label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--surface-muted);
  white-space: nowrap;
}

.a11y-panel__options {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.a11y-option {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 0.25rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--surface-faint);
  cursor: pointer;
  transition: background 300ms, color 300ms;
}

.a11y-option:hover {
  background: var(--terracotta-soft);
}

.a11y-option.active {
  background: var(--terracotta-soft);
  color: var(--terracotta);
}

/* ── Divider line above logout ── */
.a11y-panel__divider {
  height: 1px;
  margin: 8px 0 4px;
  background: linear-gradient(
    to right,
    rgba(218, 193, 184, 0.28),
    rgba(218, 193, 184, 0.45),
    rgba(218, 193, 184, 0.28)
  );
}

/* ── Logout button ── */
.a11y-panel__logout {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 0.25rem;
  background: transparent;
  color: var(--surface-muted, #54433c);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 240ms ease, color 240ms ease;
}

.a11y-panel__logout:hover {
  background: rgba(157, 45, 37, 0.08);
  color: #9d2d25;
}

.a11y-panel__logout:active {
  background: rgba(157, 45, 37, 0.14);
}

/* ── Presentation body classes ── */

body.presentation-large {
  font-size: 112%;
}

body.presentation-large .font-headline,
body.presentation-large h1 {
  font-size: 1.85rem;
}

body.presentation-high-contrast {
  --surface-ink: #000000;
  --surface-muted: #2a2018;
  --surface-faint: #3d3028;
}

body.presentation-high-contrast .text-on-surface-variant {
  color: var(--surface-muted);
}

.side-pane-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.side-pane-stack > .side-pane-section {
  min-width: 0;
  padding: 0 !important;
  background: transparent !important;
}

.side-pane-section > p {
  margin: 0 0 4px;
  color: rgba(84, 67, 60, 0.68);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
}

#capability-state-list,
#degraded-state-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 0 !important;
}

.capability-chip {
  display: flex;
  min-width: 0;
  width: auto;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  padding: 0 0 0 9px;
  border-left: 2px solid rgba(130, 59, 24, 0.18);
  border-radius: 0;
  background: transparent;
  color: var(--surface-ink);
}

.capability-chip strong {
  font-size: 0.8rem;
}

.capability-chip span:last-child {
  color: var(--surface-muted);
  font-size: 0.74rem;
  line-height: 1.4;
}

.stack-note {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 0 0 9px;
  border-left: 2px solid rgba(130, 59, 24, 0.24);
  border-radius: 0;
  background: transparent;
  color: var(--surface-muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.stack-note strong {
  color: var(--surface-ink);
  font-size: 0.8rem;
}

.stack-note span {
  color: var(--surface-muted);
}

.stack-note.warn {
  color: #7b4f1b;
}

.stack-note.error {
  color: #8e281d;
}

/* step-04: chat thread becomes a bottom-anchored translucent overlay so it never reaches
   the avatar's face area. Capped at --bubble-area-max-height; overflow scrolls inside.
   Uses margin-top: auto on first child (not justify-content: flex-end) to avoid the
   browser quirk where flex-end + overflow-y: auto prevents upward scrolling. */
.conversation-thread {
  position: absolute;
  left: var(--bubble-side-gutter);
  right: var(--bubble-side-gutter);
  bottom: var(--input-bar-height);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  max-height: var(--bubble-area-max-height);
  overflow-y: auto;
  padding: 8px 4px 4px;
  scroll-padding-bottom: 12px;
  /* Fade the upper edge so older messages dissolve into the avatar background
     instead of hard-cutting into the face. Narrow fade zone (5 %) so the
     scrollbar area is usable. */
  mask-image: linear-gradient(to bottom, transparent 0%, black 5%);
  pointer-events: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

/* Push messages to visual bottom when content is shorter than the container.
   Collapses to 0 when content overflows, allowing normal upward scrolling. */
.conversation-thread > :first-child {
  margin-top: auto;
}

.conversation-thread::-webkit-scrollbar {
  width: 4px;
}

.conversation-thread::-webkit-scrollbar-track {
  background: transparent;
}

.conversation-thread::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

.conversation-stage {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  gap: 0;
  /* The avatar canvas may extend past this box at certain GLB framings; clip cleanly. */
  overflow: hidden;
}

.conversation-stage__hero {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
}

.conversation-stage__greeting {
  margin: 0;
  padding: 0 10px;
  color: var(--surface-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  text-align: center;
}

@media (max-width: 380px) {
  .voice-mode-strip--header {
    display: none;
  }
}

body[data-active-workspace="conversation"][data-journey-focus-visible="true"] #avatar-stage canvas,
body[data-active-workspace="conversation"][data-journey-focus-visible="true"] #avatar-stage > .avatar-shell {
  transform: translateY(64px);
  transform-origin: top center;
  transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.message-card {
  display: flex;
  width: fit-content;
  max-width: 85%;
  flex-direction: column;
  gap: 8px;
  pointer-events: auto;
}

.message-card[data-role="assistant"] {
  align-self: flex-start;
}

.message-card[data-role="tourist"] {
  align-self: flex-end;
  margin-left: auto;
}

.message-card[data-role="system"] {
  max-width: 100%;
}

.message-card__head {
  display: flex;
  gap: 8px;
  color: var(--surface-faint);
  font-size: 0.72rem;
}

.message-card[data-role="assistant"] .message-card__head,
.message-card[data-role="tourist"] .message-card__head {
  display: none;
}

.message-card__text {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.message-card[data-role="assistant"] .message-card__text {
  padding: 12px 14px;
  border-radius: 2px;
  background: #faf9f5;
  box-shadow: 0 10px 30px rgba(27, 28, 26, 0.08);
  color: var(--surface-ink);
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.75;
}

.message-card[data-role="assistant"] .message-card__text--bilingual {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.message-card__lang {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.message-card__lang--en {
  padding-top: 12px;
  background: linear-gradient(to bottom, rgba(130, 59, 24, 0.16), rgba(130, 59, 24, 0.16)) top / 100% 1px no-repeat;
  color: var(--surface-muted);
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.7;
}

@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .message-card[data-role="assistant"] .message-card__text {
    background: #faf9f5;
  }
}

.message-card[data-role="tourist"] .message-card__text {
  padding: 12px 14px;
  border-radius: 2px;
  background: var(--terracotta);
  color: #fff;
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.7;
}

.message-card[data-role="system"] .message-card__text {
  color: var(--surface-ink);
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.6;
}

/* Message entrance animation — micro-scale + slide for tactile "placing on paper" feel */
/* B1: tourist messages slide in from right, assistant from left, preserving existing scale */
.message-card {
  opacity: 0;
  transform: translateY(24px) scale(0.88);
  transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1), transform 560ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.message-card[data-role="tourist"] {
  transform: translate(40px, 24px) scale(0.88);
}

.message-card[data-role="assistant"] {
  transform: translate(-40px, 24px) scale(0.88);
}

.message-card--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Ensure visible state overrides role-specific initial transform (specificity match) */
.message-card[data-role="tourist"].message-card--visible,
.message-card[data-role="assistant"].message-card--visible {
  transform: translateY(0) scale(1);
}

/* B9: message card hover lift (transform only, preserves existing box-shadow transition) */
.message-card[data-role="assistant"]:hover .message-card__text,
.message-card[data-role="tourist"]:hover .message-card__text {
  box-shadow: 0 8px 28px rgba(27, 28, 26, 0.12);
  transition: box-shadow 200ms ease, transform 200ms ease;
  transform: translateY(-1px);
}

/* Typing indicator animation */
.typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
}

.typing-indicator span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--surface-ink, #3d3d3d);
  opacity: 0.4;
  animation: typing-bounce 1.4s ease-in-out infinite;
}

.typing-indicator span:nth-child(1) {
  animation-delay: 0s;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing-bounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-8px);
    opacity: 1;
  }
}

/* Typing indicator visibility - only animate when visible */
.message-card--typing {
  animation: typing-fade-in 200ms ease forwards;
}

.message-card--typing.message-card--visible {
  animation: none;
}

.message-card--typing.message-card--exit {
  animation: typing-fade-out 180ms ease forwards;
}

@keyframes typing-fade-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }
}

@keyframes typing-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Smooth scrolling for conversation thread */
.conversation-thread {
  scroll-behavior: smooth;
}

/* Voice input recording state */
.composer-icon[data-recording="true"],
#voice-input-button[data-recording="true"] {
  color: var(--error, #b3261e);
  animation: voice-pulse 1.2s ease-in-out infinite;
}

@keyframes voice-pulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(179, 38, 30, 0.4);
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 0 8px rgba(179, 38, 30, 0);
  }
}

/* Quick reply suggestions — staggered cascade entrance */
.quick-reply-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
}

.quick-reply-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 4px;
  border: 0;
  background: rgba(250, 249, 245, 0.96);
  color: var(--surface-ink, #1b1c1a);
  font-size: 0.92rem;
  font-weight: 750;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px) scale(0.95);
  animation: chip-cascade-in 350ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  box-shadow: 0 10px 28px rgba(27, 28, 26, 0.08);
  transition: background 200ms ease, color 200ms ease, transform 150ms ease;
}

/* Staggered delay: set via JS style attribute, CSS provides the fallback nth-child */
.quick-reply-chip:nth-child(1) { animation-delay: 0ms; }
.quick-reply-chip:nth-child(2) { animation-delay: 70ms; }
.quick-reply-chip:nth-child(3) { animation-delay: 140ms; }
.quick-reply-chip:nth-child(4) { animation-delay: 210ms; }
.quick-reply-chip:nth-child(5) { animation-delay: 280ms; }

.quick-reply-chip:hover {
  background: var(--terracotta, #823b18);
  color: #fff;
  transform: translateY(-1px);
}

.quick-reply-chip:active {
  transform: translateY(0) scale(0.98);
}

.quick-reply-chip .material-symbols-outlined {
  font-size: 16px;
}

@keyframes chip-cascade-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.message-card__attachments {
  display: grid;
  gap: 10px;
}

.t01-profile-panel {
  align-self: stretch;
  display: grid;
  gap: 10px;
  width: 100%;
  margin: 2px 0 4px;
  padding: 12px;
  border-radius: 6px;
  background: rgba(250, 249, 245, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 12px 34px rgba(27, 28, 26, 0.08);
}

.t01-profile-panel__prompt,
.t01-profile-panel__next {
  margin: 0;
  color: var(--surface-ink);
  font-size: 0.96rem;
  font-weight: 750;
  line-height: 1.55;
}

.t01-profile-panel__next {
  color: var(--surface-muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.t01-profile-panel--collapsed {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.t01-profile-panel__selected {
  margin: 0;
  color: var(--surface-ink);
  font-size: 0.86rem;
  font-weight: 750;
  line-height: 1.45;
}

.t01-profile-panel__edit {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 4px;
  border: 0;
  border-radius: 6px;
  background: rgba(130, 59, 24, 0.1);
  color: var(--terracotta);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 7px 9px;
}

.t01-profile-panel__edit .material-symbols-outlined {
  font-size: 17px;
}

.t01-profile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.t01-profile-card {
  display: grid;
  min-height: 122px;
  align-content: start;
  gap: 6px;
  padding: 10px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--surface-ink);
  text-align: left;
  animation: profile-card-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.t01-profile-card:nth-child(1) { animation-delay: 0ms; }
.t01-profile-card:nth-child(2) { animation-delay: 60ms; }
.t01-profile-card:nth-child(3) { animation-delay: 120ms; }

@keyframes profile-card-in {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
  box-shadow: 0 10px 26px rgba(27, 28, 26, 0.08);
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.t01-profile-card:hover,
.t01-profile-card:focus-visible,
.t01-profile-card.is-selected {
  background: var(--terracotta);
  color: #fff;
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(130, 59, 24, 0.18);
}

.t01-profile-card__icon {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(244, 244, 240, 0.95);
  color: var(--surface-ink);
  font-size: 21px;
}

.t01-profile-card:hover .t01-profile-card__icon,
.t01-profile-card:focus-visible .t01-profile-card__icon,
.t01-profile-card.is-selected .t01-profile-card__icon {
  background: rgba(255, 255, 255, 0.92);
  color: var(--terracotta);
}

.t01-profile-card strong {
  font-family: var(--font-headline);
  font-size: 1.02rem;
  line-height: 1.25;
}

.t01-profile-card span:last-child {
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.45;
}

.attachment-card,
.detail-row {
  display: grid;
  gap: 6px;
  padding: 14px 14px 14px 16px;
  border-radius: 12px;
  background: rgba(244, 244, 240, 0.92);
  animation: attachment-card-in 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes attachment-card-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.attachment-card--route,
.detail-row[data-support-detail-workspace="route"] {
  border-left: 2px solid var(--terracotta);
}

.attachment-card__head,
.support-detail__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.attachment-card__head small,
.detail-row small {
  color: var(--surface-faint);
  font-size: 0.72rem;
  font-weight: 700;
}

.attachment-card__badge,
.follow-up-inline__pill,
.runtime-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--terracotta-soft);
  color: var(--terracotta);
  font-size: 0.74rem;
  font-weight: 700;
}

.attachment-card p,
.detail-row p {
  margin: 0;
  color: var(--surface-muted);
  font-size: 0.88rem;
  line-height: 1.65;
}

.attachment-card__audio {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.attachment-card__audio-player {
  width: 100%;
}

.attachment-card__play-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--terracotta, #c66b4c);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  flex-shrink: 0;
}

.attachment-card__play-pause:hover {
  background: var(--terracotta-dark, #a8553a);
}

.attachment-card__play-pause:active {
  transform: scale(0.92);
}

.attachment-card__play-icon,
.attachment-card__pause-icon {
  line-height: 1;
  pointer-events: none;
}

.attachment-card__audio-status {
  font-size: 0.78rem;
  color: var(--surface-ink-muted, #888);
  white-space: nowrap;
}

.attachment-card__download {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--terracotta);
  margin-left: auto;
}

.attachment-card__body--code {
  overflow-x: auto;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--surface-ink);
  font-size: 0.8rem;
  line-height: 1.5;
}

.attachment-card__t04-recommendations,
.attachment-card__t04-candidates {
  margin-top: 8px;
  padding-top: 8px;
  background: var(--surface-container-low, #f4f4f0);
  border-radius: 8px;
}

.attachment-card__vision-meta {
  margin: 6px 0 0;
  color: var(--surface-faint);
  font-size: 0.74rem;
  line-height: 1.4;
}

.attachment-card__vision-meta--success {
  color: #1f6b45;
}

.attachment-card__t04-recommendations small,
.attachment-card__t04-candidates small {
  display: block;
  margin-bottom: 4px;
  color: var(--surface-faint);
  font-size: 0.72rem;
  font-weight: 700;
}

.attachment-card__t04-recommendations ul,
.attachment-card__t04-candidates ul {
  margin: 0;
  padding-left: 16px;
  list-style: disc;
}

.attachment-card__t04-recommendations li,
.attachment-card__t04-candidates li {
  color: var(--surface-muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

.attachment-card__t04-recommendations li strong {
  color: var(--surface-ink);
}

.vision-candidate-confirm-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--surface-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.vision-candidate-confirm-btn:hover,
.vision-candidate-confirm-btn:focus-visible {
  color: var(--terracotta);
}

.vision-candidate-confirm-btn .material-symbols-outlined {
  font-size: 16px;
}

.vision-landmark-poi {
  display: block;
  margin-top: 5px;
  color: var(--surface-faint);
  font-size: 0.74rem;
}

.vision-landmark-poi--success {
  color: #1f6b45;
}

.vision-landmark-locate-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  margin-top: 8px;
  padding: 0 11px;
  border: 1px solid rgba(130, 59, 24, 0.28);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--terracotta, #823b18);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.vision-landmark-locate-btn:hover,
.vision-landmark-locate-btn:focus-visible {
  border-color: var(--terracotta, #823b18);
  background: #fff;
}

.vision-landmark-locate-btn .material-symbols-outlined {
  font-size: 17px;
}

/* T12 memorial artifact card */
.attachment-card--memorial-artifact {
  background: var(--surface-container-low, #f4f4f0);
}

.attachment-card__memorial-preview {
  margin: 8px 0;
  border-radius: 8px;
  overflow: hidden;
  max-height: 220px;
}

.attachment-card__memorial-preview img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.attachment-card__memorial-preview--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  background: var(--surface-container, #efece8);
}

.memorial-placeholder-icon {
  font-size: 2.4rem;
}

.attachment-card__memorial-degraded {
  margin: 8px 0;
  padding: 10px 12px;
  background: var(--surface-container, #efece8);
  border-radius: 8px;
  color: var(--surface-muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

.attachment-card__memorial-actions {
  margin: 10px 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.attachment-card__memorial-actions .attachment-card__download {
  display: inline-block;
  padding: 6px 16px;
  background: var(--terracotta, #823b18);
  color: #fff;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s;
}

.attachment-card__memorial-actions .attachment-card__download:hover {
  background: var(--terracotta-dark, #a0522d);
}

.memorial-saved-note {
  font-size: 0.82rem;
  color: var(--surface-muted);
}

.attachment-card__memorial-tags {
  margin: 6px 0 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.memorial-tag {
  display: inline-block;
  padding: 2px 10px;
  background: var(--surface-container, #efece8);
  border-radius: 6px;
  font-size: 0.76rem;
  color: var(--surface-muted);
}

/* T10 comfort suggestion card */
.attachment-card--comfort-suggestion {
  background: rgba(255, 238, 217, 0.6);
  border-left: 3px solid var(--terracotta-soft, #c97a5a);
}

.comfort-suggestion__summary {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--on-surface, #1b1c1a);
  margin: 0 0 6px;
}

.comfort-suggestion__next {
  font-size: 0.86rem;
  color: var(--on-surface-variant, #54433c);
  margin: 0 0 8px;
}

.comfort-suggestion__details {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.comfort-suggestion__details li {
  font-size: 0.82rem;
  color: var(--on-surface-variant, #54433c);
  padding-left: 14px;
  position: relative;
}

.comfort-suggestion__details li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--terracotta, #823b18);
}

/* S5a: Weather change card (inside conversation thread, before replan message) */
.attachment-card--weather-change {
  border-inline-start: 3px solid var(--terracotta, #823b18);
  background: rgba(250, 249, 245, 0.95);
}

.weather-change-card__icon-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.weather-change-card__icon {
  font-size: 20px;
  color: var(--terracotta, #823b18);
  font-variation-settings: 'FILL' 0, 'wght' 500;
}

.weather-change-card__label {
  font-family: var(--font-ui, 'Manrope', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--terracotta, #823b18);
}

.weather-change-card__arrow-block {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 2px 0;
}

.weather-change-card__tag {
  display: inline-block;
  padding: 3px 10px;
  background: var(--surface-low, #f4f4f0);
  border-radius: 0.25rem;
  font-family: var(--font-ui, 'Manrope', sans-serif);
  font-size: 0.88rem;
  font-weight: 550;
  color: var(--surface-muted, #54433c);
}

.weather-change-card__tag--alert {
  background: rgba(130, 59, 24, 0.10);
  color: var(--terracotta, #823b18);
}

.weather-change-card__arrow {
  font-size: 1rem;
  color: var(--surface-muted, #54433c);
  user-select: none;
}

.weather-change-card__fallback {
  margin: 0;
  font-family: var(--font-ui, 'Manrope', sans-serif);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--surface-muted, #54433c);
}

.weather-change-card__arrow-block[hidden],
.weather-change-card__fallback[hidden] {
  display: none;
}

/* Route map mini-visualization (transient route card) — Living Journal tokens */
/* Live weather evidence strip: restrained, source-aware and readable on mobile. */
.live-weather-strip {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line, #ebebeb);
  border-radius: 12px;
  background: var(--surface, #ffffff);
  color: var(--surface-ink, #171717);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

.live-weather-strip__main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.live-weather-strip__icon {
  color: var(--terracotta, #823b18);
  font-size: 28px;
  font-variation-settings: "FILL" 0, "wght" 450, "GRAD" 0, "opsz" 24;
}

.live-weather-strip__copy {
  min-width: 0;
}

.live-weather-strip__eyebrow,
.live-weather-strip__source,
.live-weather-strip__summary {
  margin: 0;
}

.live-weather-strip__eyebrow {
  color: var(--surface-faint, #8f8f8f);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
}

.live-weather-strip__summary {
  margin-top: 3px;
  overflow: hidden;
  color: var(--surface-ink, #171717);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-weather-strip__source {
  margin-top: 3px;
  overflow: hidden;
  color: var(--surface-muted, #4d4d4d);
  font-size: 0.72rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-weather-strip__temperature {
  margin: 0;
  color: var(--surface-ink, #171717);
  font-size: 1.65rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}

.live-weather-strip__temperature span:last-child {
  margin-left: 2px;
  color: var(--surface-muted, #4d4d4d);
  font-size: 0.78rem;
  font-weight: 500;
}

.live-weather-strip__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--line, #ebebeb);
}

.live-weather-strip__metrics div {
  min-width: 0;
}

.live-weather-strip__metrics dt {
  color: var(--surface-faint, #8f8f8f);
  font-size: 0.68rem;
  line-height: 1.2;
}

.live-weather-strip__metrics dd {
  margin: 3px 0 0;
  overflow: hidden;
  color: var(--surface-ink, #171717);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-weather-strip__forecast {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.live-weather-strip__forecast-item {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--line, #ebebeb);
  border-radius: 6px;
  color: var(--surface-muted, #4d4d4d);
  font-size: 0.68rem;
  line-height: 1.25;
}

.live-weather-strip__forecast-item strong {
  overflow: hidden;
  color: var(--surface-ink, #171717);
  font-size: 0.74rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-weather-strip__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line, #ebebeb);
}

.live-weather-strip__action-status {
  min-width: 0;
  color: var(--surface-muted, #4d4d4d);
  font-size: 0.72rem;
  line-height: 1.35;
}

.live-weather-strip__trigger {
  display: inline-flex;
  min-height: 36px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--terracotta, #823b18);
  border-radius: 6px;
  padding: 8px 11px;
  background: var(--terracotta, #823b18);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
}

.live-weather-strip__trigger .material-symbols-outlined {
  font-size: 18px;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.live-weather-strip__trigger:hover:not(:disabled),
.live-weather-strip__trigger:focus-visible:not(:disabled) {
  background: #6f2f14;
  outline: none;
}

.live-weather-strip__trigger:disabled {
  border-color: var(--line, #ebebeb);
  background: var(--surface-low, #f4f4f0);
  color: var(--surface-faint, #8f8f8f);
  cursor: not-allowed;
  opacity: 1;
}

@media (max-width: 360px) {
  .live-weather-strip {
    padding: 12px;
  }

  .live-weather-strip__metrics {
    gap: 5px;
  }

  .live-weather-strip__forecast-item {
    padding-inline: 5px;
  }

  .live-weather-strip__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .live-weather-strip__trigger {
    width: 100%;
  }
}

.route-map {
  margin: 10px 0 4px;
  padding: 10px;
  background: var(--surface-low);
  border-radius: 12px;
}

.route-map__amap {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.route-map__loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 16px;
  color: var(--surface-muted);
  font-size: 0.78rem;
  text-align: center;
  pointer-events: none;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.route-map__loading[hidden] {
  display: none;
}

.route-map__loading[data-tone="error"] {
  color: var(--error, #a83c2a);
}

.route-map__loading[data-tone="warning"] {
  align-items: end;
  padding-bottom: 8px;
  color: var(--surface-muted);
  font-size: 0.68rem;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.94), transparent);
}

.route-map__poi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--surface);
  box-shadow: 0 1px 5px rgba(20, 30, 35, 0.3);
  font: 600 11px/1 var(--font-headline);
  cursor: pointer;
}

.route-map__poi--mustsee {
  background: var(--terracotta);
}

.route-map__poi--current {
  width: 28px;
  height: 28px;
  background: #005863;
}

.route-map__caption {
  margin: 6px 2px 0;
  font-family: var(--font-headline);
  font-style: italic;
  font-size: 0.72rem;
  color: var(--surface-muted);
}

.route-stop-list {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.route-stop-list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.route-stop-list__seq {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: rgba(130, 59, 24, 0.1);
  color: var(--terracotta);
  font-size: 0.72rem;
  font-weight: 800;
}

.route-stop-list__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.route-stop-list__body strong {
  color: var(--surface-ink);
  font-size: 0.86rem;
  line-height: 1.35;
}

.route-stop-list__body em {
  color: var(--surface-muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 650;
  line-height: 1.35;
}

.reminder-impact-list {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
}

.reminder-impact-list div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

.reminder-impact-list dt {
  color: var(--surface-faint);
  font-size: 0.72rem;
  font-weight: 750;
}

.reminder-impact-list dd {
  min-width: 0;
  color: var(--surface-ink);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
}

.follow-up-banner {
  margin: 0 14px;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(244, 244, 240, 0.86);
  color: var(--surface-muted);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.45;
  box-shadow: none;
  animation: banner-fade-in 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes banner-fade-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#recommended-support-strip {
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  z-index: 4;
  padding: 0 14px;
  pointer-events: none;
}

.recommended-support-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-height: 58px;
  padding: 7px 8px 7px 10px;
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(130, 59, 24, 0.12) 0, rgba(130, 59, 24, 0) 30%),
    rgba(250, 249, 245, 0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: var(--surface-muted);
  text-align: left;
  box-shadow: 0 14px 30px rgba(27, 28, 26, 0.05);
  pointer-events: auto;
}

.recommended-support-card p {
  margin: 0;
}

.recommended-support-card__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.recommended-support-card__eyebrow {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  color: var(--terracotta);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
}

.recommended-support-card__title {
  color: var(--surface-ink);
  font-family: var(--font-headline);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recommended-support-card__copy,
.recommended-support-card__meta {
  display: none;
  color: var(--surface-muted);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.42;
}

.recommended-support-card__meta {
  color: var(--surface-faint);
}

.recommended-support-card__items {
  display: flex;
  grid-column: 2;
  grid-row: 1;
  flex-wrap: nowrap;
  gap: 5px;
  min-width: 0;
}

.recommended-support-card__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  max-width: 76px;
  min-height: 28px;
  padding: 4px 5px;
  border-radius: 4px;
  background: rgba(250, 249, 245, 0.78);
  color: var(--surface-muted);
  gap: 3px;
}

.recommended-support-card__item .material-symbols-outlined {
  color: var(--terracotta);
  flex: 0 0 auto;
  font-size: 0.94rem;
}

.recommended-support-card__item strong,
.recommended-support-card__item em {
  overflow: hidden;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recommended-support-card__item strong {
  color: var(--surface-ink);
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.05;
}

.recommended-support-card__item em {
  color: var(--surface-faint);
  display: block;
  max-width: 54px;
  font-size: 0.58rem;
  font-weight: 600;
  line-height: 1.05;
}

.recommended-support-card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 54px;
  min-height: 32px;
  padding: 6px 8px;
  border-radius: 4px;
  background: var(--terracotta);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
  transition: background 300ms ease, transform 300ms ease;
}

.recommended-support-card__action .material-symbols-outlined {
  font-size: 1rem;
}

.recommended-support-card__action:hover,
.recommended-support-card__action:focus-visible {
  background: #a0522d;
  outline: none;
  transform: translateY(-1px);
}

.recommended-support-card__action:disabled {
  cursor: default;
  opacity: 0.48;
  transform: none;
}

@media (max-width: 360px) {
  .recommended-support-card {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
  }

  .recommended-support-card__action {
    min-width: 34px;
    padding-inline: 7px;
  }

  .recommended-support-card__item {
    max-width: 58px;
    padding-inline: 4px;
  }

  .recommended-support-card__item em {
    display: none;
  }

  #recommended-support-action-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
}

.workspace-detail-card {
  display: grid;
  gap: 12px;
}

.workspace-state-summary {
  padding: 12px 14px;
  border-radius: 2px;
  background: rgba(244, 244, 240, 0.9);
  color: var(--surface-muted);
  font-size: 0.86rem;
  line-height: 1.6;
}

.workspace-history {
  display: grid;
  gap: 10px;
}

[data-support-history-strip] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.support-history-chip {
  display: grid;
  gap: 2px;
  min-width: 120px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-container-low, #f4f4f0);
  color: var(--surface-muted);
  text-align: left;
  cursor: pointer;
}

.support-history-chip strong {
  color: var(--terracotta);
  font-size: 0.72rem;
}

.support-history-chip span {
  font-size: 0.78rem;
  line-height: 1.45;
}

.support-history-chip.is-selected {
  border-color: rgba(130, 59, 24, 0.3);
  background: rgba(130, 59, 24, 0.08);
  color: var(--surface-ink);
}

.detail-stack {
  display: grid;
  gap: 12px;
}

.empty-copy {
  margin: 0;
  color: var(--surface-muted);
  font-size: 0.9rem;
  line-height: 1.65;
}

.follow-up-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.follow-up-fields {
  display: grid;
  gap: 14px;
}

.follow-up-field {
  display: grid;
  gap: 8px;
}

.follow-up-field small {
  color: var(--surface-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.follow-up-field input,
.follow-up-field textarea,
.follow-up-field select {
  width: 100%;
  padding: 0 0 10px;
  border: 0;
  border-bottom: 1px solid rgba(218, 193, 184, 0.9);
  border-radius: 0;
  background: transparent;
  color: var(--surface-ink);
  outline: none;
  box-shadow: none;
}

.follow-up-field input:focus,
.follow-up-field textarea:focus,
.follow-up-field select:focus {
  border-bottom-width: 2px;
  border-bottom-color: var(--terracotta);
}

.follow-up-field__hint {
  margin: 0;
  color: var(--surface-faint);
  font-size: 0.78rem;
  line-height: 1.5;
}

.pre-visit-section {
  padding: 16px;
  border-radius: 0.25rem;
  background: var(--surface-container-low);
}

.pre-visit-section--warning {
  background: rgba(183, 110, 58, 0.08);
}

.pre-visit-section__label {
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--surface-ink);
}

.pre-visit-section__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--surface-ink);
}

.pre-visit-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--surface-ink);
}

.pre-visit-tag {
  cursor: pointer;
  border: none;
  transition: background-color 0.2s, color 0.2s;
}

.pre-visit-tag.active {
  background: var(--terracotta);
  color: #faf9f5;
}

.composer-dock {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--composer-nav-clearance) + var(--composer-dock-gap));
  z-index: 70;
  display: flex;
  flex-direction: column;
  width: min(calc(100% - 24px), calc(var(--phone-width) - 24px));
  gap: 12px;
  padding: 7px;
  transform: translateX(-50%) translateY(0);
  background: rgba(250, 249, 245, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* step-05: DESIGN.md ambient shadow — blur 30–60px, opacity 4–8%, on_surface tint. */
  box-shadow: 0 18px 48px rgba(27, 28, 26, 0.07);
  /* step-05: 250 ms 过渡，让 FAB ↔ dock 之间感觉是"按下纸张"的物理切换 (DESIGN.md §5 Buttons)。 */
  transition: opacity 240ms ease, transform 240ms ease, border-radius 240ms ease, padding 240ms ease;
  opacity: 1;
}

/* step-04: opaque fallback for browsers without backdrop-filter so the dock stays readable. */
@supports not ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
  .composer-dock {
    background: rgba(250, 249, 245, 0.98);
  }
  .bottom-nav {
    background: rgba(250, 249, 245, 0.98);
  }
}

.composer-dock__input-row {
  display: grid;
  grid-template-columns: 36px 36px minmax(0, 1fr) 36px 36px 40px;
  align-items: center;
  gap: 6px;
}

/* 语音优先模式输入栏布局：[图片][定位][点击说话....][键盘][发送] */
.composer-dock__input-row[data-composer-input-mode="voice"] {
  grid-template-columns: 36px 36px minmax(0, 1fr) 36px 40px;
}
.composer-dock__input-row[data-composer-input-mode="voice"] .composer-text-only {
  display: none !important;
}
.composer-dock__input-row[data-composer-input-mode="text"] .composer-voice-only {
  display: none !important;
}

/* 点击说话按钮 — 黑色长方形整块可点击，白色文字居中 */
.voice-speak-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: #1b1c1a;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 160ms ease, transform 120ms ease;
  -webkit-user-select: none;
  user-select: none;
}
.voice-speak-bar:hover {
  background: #2a2b29;
}
.voice-speak-bar:active {
  transform: scale(0.985);
}
.voice-speak-bar[data-recording="true"] {
  background: #b91c1c;
  animation: voice-speak-pulse 1.4s ease-in-out infinite;
}
.voice-speak-bar[data-recording="true"] .voice-speak-bar__icon {
  animation: voice-speak-icon-pulse 1.4s ease-in-out infinite;
}
.voice-speak-bar__icon {
  font-size: 20px;
  line-height: 1;
  color: #ffffff;
  flex-shrink: 0;
}
.voice-speak-bar__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #ffffff;
  text-align: center;
}

@keyframes voice-speak-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(185, 28, 28, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(185, 28, 28, 0); }
}
@keyframes voice-speak-icon-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.15); }
}

.composer-dock__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px 0;
}

.composer-dock__actions {
  display: flex;
  gap: 8px;
}

.composer-dock__actions button {
  width: 34px;
  height: 34px;
  border-radius: 4px;
  background: rgba(250, 249, 245, 0.94);
  color: var(--surface-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(27, 28, 26, 0.08);
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.composer-dock__actions button:hover,
.composer-dock__actions button:focus-visible {
  background: var(--terracotta);
  color: #fff;
  outline: none;
}

.composer-dock__footer {
  padding: 0 8px 4px;
}

/* State: compact */
[data-composer-state="compact"] .composer-dock {
  border-radius: 999px;
}
[data-composer-state="compact"] .composer-dock__header {
  position: absolute;
  top: -40px;
  right: 12px;
  display: flex;
  background: transparent;
  border-bottom: none;
  padding: 0;
}
[data-composer-state="compact"] .composer-title {
  display: none;
}
[data-composer-state="compact"] .composer-dock__footer {
  display: none !important;
}

/* State: expanded */
[data-composer-state="expanded"] .composer-dock {
  border-radius: 20px;
  padding: 12px;
}
[data-composer-state="expanded"] .composer-dock__header {
  display: flex !important;
}
[data-composer-state="expanded"] .composer-dock__footer {
  display: block !important;
}

/* step-05 实施提示 7：closed 态把 input-bar-height 调小，让气泡可以下沉、把 FAB 上方空间还给数字人。
   FAB 高 56 + bottom 24 + 12px 缓冲 = 92px；保留与 Step 4 同样的 conversation-thread 锚点。 */
body[data-active-workspace="conversation"] .session-shell[data-composer-state="closed"] {
  --input-bar-height: 150px;
}

/* State: closed — step-05 默认态：屏幕底部只剩一颗 FAB，数字人独占主屏 */
[data-composer-state="closed"] .composer-dock {
  opacity: 0;
  transform: translateX(-50%) translateY(28px);
  pointer-events: none;
  /* 用 visibility 而非 display:none，保留过渡动画 + 保留 DOM 可达性 */
  visibility: hidden;
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
}
[data-composer-state="closed"] .composer-fab {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  pointer-events: auto;
  visibility: visible;
}

/* FAB only visible in workspaces that need text input (conversation + follow-up) */
body[data-active-workspace="route"] [data-composer-state="closed"] .composer-fab,
body[data-active-workspace="reminder"] [data-composer-state="closed"] .composer-fab,
body[data-active-workspace="image"] [data-composer-state="closed"] .composer-fab,
body[data-active-workspace="pre-visit-brief"] [data-composer-state="closed"] .composer-fab,
body[data-active-workspace="nav"] [data-composer-state="closed"] .composer-fab,
body[data-active-workspace="leaderboard"] [data-composer-state="closed"] .composer-fab,
body[data-active-workspace="digital-human"] [data-composer-state="closed"] .composer-fab,
body[data-active-workspace="realtime-lab"] [data-composer-state="closed"] .composer-fab {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}

/* 非 closed 态：FAB 隐藏，dock 让位 */
[data-composer-state="compact"] .composer-fab,
[data-composer-state="expanded"] .composer-fab {
  opacity: 0;
  transform: translateX(-50%) scale(0.85);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}

.composer-fab {
  position: fixed;
  /* step-05: 居中放置，与 composer-dock 同一中线 */
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--bottom-nav-height) + 6px);
  z-index: 70;
  display: flex;
  height: 56px;
  width: 56px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  /* DESIGN.md §2: primary terracotta + 在 primary→primary_container 之间渐变给品牌点睛 */
  background: linear-gradient(135deg, #823b18 0%, #a0522d 100%);
  color: #fff;
  /* DESIGN.md §4 ambient shadow: blur 40px, opacity 7%, tinted with on_surface (#1b1c1a)；
     额外叠一道 terracotta 微光让品牌色冒出来，但都压在 8% 内。 */
  box-shadow:
    0 18px 40px rgba(27, 28, 26, 0.08),
    0 6px 16px rgba(130, 59, 24, 0.08);
  cursor: pointer;
  transform: translateX(-50%) scale(1);
  transition: opacity 200ms ease, transform 200ms ease, box-shadow 240ms ease, visibility 0s linear;
}

.composer-fab:hover,
.composer-fab:focus-visible {
  box-shadow:
    0 22px 52px rgba(27, 28, 26, 0.1),
    0 8px 20px rgba(130, 59, 24, 0.12);
  outline: none;
  transform: translateX(-50%) scale(1.12) rotate(-3deg);
}

.composer-fab:active {
  transform: translateX(-50%) scale(0.88) rotate(2deg);
  transition-duration: 100ms;
}

.composer-fab__icon {
  font-size: 26px;
  line-height: 1;
}

/* FAB dragging state — suppress hover glow, show grab cursor */
.composer-fab--dragging {
  transition: none !important;
  box-shadow:
    0 22px 52px rgba(27, 28, 26, 0.14),
    0 8px 20px rgba(130, 59, 24, 0.14) !important;
  cursor: grabbing !important;
}

/* Card dismiss hint toast */
.card-dismiss-hint {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  z-index: 60;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(250, 249, 245, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(27, 28, 26, 0.1);
  color: var(--surface-muted, #54433c);
  font-size: 0.78rem;
  font-family: var(--font-body);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
  pointer-events: none;
}

.card-dismiss-hint--visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* step-05: 首次进入提示气泡，"点这里说话" — 仅在 closed 态 + body[data-fab-hint="show"] 同时为真时显示 */
.composer-fab__hint {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 6px 12px;
  white-space: nowrap;
  border-radius: 0.25rem; /* DESIGN.md §5: 不要 pill，用 sharp 0.25rem */
  background: rgba(27, 28, 26, 0.86);
  color: #faf9f5;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 280ms ease, transform 280ms ease, visibility 0s linear 280ms;
}

.composer-fab__hint::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(27, 28, 26, 0.86);
}

body[data-fab-hint="show"][data-active-workspace="conversation"] [data-composer-state="closed"] .composer-fab__hint {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity 280ms ease, transform 280ms ease;
}

.composer-icon {
  display: inline-flex;
  height: 36px;
  width: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--surface-muted);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.composer-icon:hover {
  background: rgba(244, 244, 240, 0.96);
  color: var(--terracotta);
}

.button-recording {
  background: rgba(130, 59, 24, 0.12);
  color: var(--terracotta);
}

.composer-icon--send {
  background: var(--terracotta);
  color: #fff;
}

.composer-icon--send:hover {
  background: #9b4a22;
  color: #fff;
}

.composer-icon--feedback {
  color: var(--terracotta);
  background: rgba(130, 59, 24, 0.08);
}

.composer-icon--feedback:hover,
.composer-icon--feedback:focus-visible {
  background: rgba(130, 59, 24, 0.14);
  color: #6f2f12;
  outline: none;
}

#message-input {
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--surface-ink);
  font-size: 0.95rem;
  outline: none;
  box-shadow: none;
}

#message-input::placeholder {
  color: rgba(84, 67, 60, 0.65);
}

.composer-feedback {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--surface-faint);
  font-size: 0.72rem;
  line-height: 1.4;
}

/* ── S2c: 图片能力三态视觉（The Living Journal / DESIGN.md） ── */

/* degraded: 仍可点，右上角暖调角标暗示「能力受限但可尝试」 */
label.composer-icon.is-degraded {
  position: relative;
  border-radius: 0.25rem;
  background: rgba(130, 59, 24, 0.06);
  color: #823b18;
  transition: background 300ms ease, color 300ms ease, opacity 300ms ease, box-shadow 300ms ease;
}
label.composer-icon.is-degraded::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a0522d;
  box-shadow: 0 1px 3px rgba(27, 28, 26, 0.06);
  pointer-events: none;
}
label.composer-icon.is-degraded:hover {
  background: rgba(130, 59, 24, 0.12);
  color: #6f2f12;
  box-shadow: 0 4px 12px rgba(27, 28, 26, 0.06);
}
label.composer-icon.is-degraded:active {
  transform: scale(0.96);
  transition-duration: 150ms;
}

/* disabled (closed): 明确不可用 — 视觉禁用，点击拦截由 S2b JS handler 兜底 */
label.composer-icon.is-disabled {
  border-radius: 0.25rem;
  opacity: 0.38;
  color: #54433c;
  cursor: not-allowed;
  transition: opacity 300ms ease;
}
label.composer-icon.is-disabled:hover {
  background: transparent;
  color: #54433c;
  box-shadow: none;
}

/* 降级预警提示小片 */
.composer-degraded-hint {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.45rem 0.7rem;
  border-radius: 0.25rem;
  background: rgba(130, 59, 24, 0.06);
  color: #54433c;
  font-family: var(--font-body, "Manrope", sans-serif);
  font-size: 0.78rem;
  line-height: 1.4;
  grid-column: 1 / -1;
  transition: opacity 300ms ease;
}
.composer-degraded-hint .material-symbols-outlined {
  font-size: 16px;
  color: #a0522d;
  flex-shrink: 0;
}
.composer-degraded-hint[hidden] {
  display: none;
}

/* ── 语音录音状态 ──────────────────────────────────────────────── */

.composer-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px 0;
}

.composer-recording-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #c0392b;
  font-weight: 500;
}

.composer-recording-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c0392b;
  animation: recording-pulse 1.2s ease-in-out infinite;
}

@keyframes recording-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.composer-voice-error {
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 12px;
  line-height: 1.4;
}

.composer-panel__body {
  padding: 8px;
}

.composer-panel__actions {
  display: flex;
  gap: 8px;
  padding: 4px 8px 8px;
}

.action-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.action-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.action-button--ghost {
  background: rgba(250, 249, 245, 0.94);
  color: var(--surface-ink, #1b1c1a);
  box-shadow: 0 4px 12px rgba(27, 28, 26, 0.06);
}

.action-button--ghost:hover:not(:disabled),
.action-button--ghost:focus-visible:not(:disabled) {
  background: var(--terracotta, #c0392b);
  color: #fff;
  outline: none;
}

.action-button--recording {
  background: #c0392b;
  color: #fff;
  box-shadow: 0 4px 16px rgba(192, 57, 43, 0.3);
  animation: recording-btn-pulse 1.5s ease-in-out infinite;
}

@keyframes recording-btn-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(192, 57, 43, 0.3); }
  50% { box-shadow: 0 4px 24px rgba(192, 57, 43, 0.5); }
}

.action-button--error {
  background: #fef2f2;
  color: #b91c1c;
  box-shadow: 0 4px 12px rgba(185, 28, 28, 0.08);
}

.action-button--error:hover:not(:disabled) {
  background: #b91c1c;
  color: #fff;
}

.action-button--primary {
  background: var(--terracotta, #c0392b);
  color: #fff;
  box-shadow: 0 4px 16px rgba(192, 57, 43, 0.2);
}

.action-button--primary:hover:not(:disabled) {
  background: #a0522d;
}

.composer-input {
  width: 100%;
  min-height: 60px;
  padding: 8px 10px;
  border: 1px solid rgba(27, 28, 26, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  color: var(--surface-ink, #1b1c1a);
  transition: border-color 160ms ease;
}

.composer-input:focus {
  border-color: var(--terracotta, #c0392b);
  outline: none;
}

.composer-input:disabled {
  background: rgba(245, 243, 240, 0.6);
  color: #999;
}

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 65;
  display: grid;
  width: min(100%, var(--phone-width));
  min-height: calc(var(--bottom-nav-visual-height) + env(safe-area-inset-bottom, 0px));
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  padding: 8px 10px calc(env(safe-area-inset-bottom, 0px) + 10px);
  transform: translateX(-50%);
  background: rgba(250, 249, 245, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 -8px 28px rgba(27, 28, 26, 0.07);
}

/* Follow-up and realtime-lab stay hidden; seven visitor destinations remain stable. */

.bottom-nav__button {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 2px;
  border-radius: 2px;
  color: var(--surface-ink);
  opacity: 0.86;
  transition: background 160ms ease, color 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.bottom-nav__button:active {
  transform: scale(0.94);
}

.bottom-nav__button.active {
  background: rgba(244, 244, 240, 0.98);
  color: var(--terracotta);
  opacity: 1;
}

.bottom-nav__button.active .bottom-nav__icon {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
  animation: nav-icon-pop 440ms cubic-bezier(0.34, 1.56, 0.64, 1),
             nav-icon-breathe 2.2s ease-in-out infinite 440ms;
}

@keyframes nav-icon-pop {
  0% { transform: scale(0.6); }
  50% { transform: scale(1.35); }
  75% { transform: scale(0.92); }
  100% { transform: scale(1); }
}

@keyframes nav-icon-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}

.bottom-nav__button--aux {
  opacity: 0.56;
}

.bottom-nav__icon {
  font-size: 22px;
}

.bottom-nav__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
}

.image-thumb-card {
  transform: rotate(-2deg);
}

.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ===== Step 7: Transient card overlay ===== */

.card-overlay {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--bottom-nav-height) + 18px);
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  width: min(calc(100% - 24px), calc(var(--phone-width) - 24px));
  pointer-events: none;
}

.card-overlay__item {
  position: relative;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(16px);
  animation: card-overlay-in 200ms ease forwards;
}

.card-overlay__item.card-overlay__item--dismiss {
  animation: card-overlay-out 300ms ease forwards;
}

@keyframes card-overlay-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes card-overlay-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(16px);
  }
}

.card-overlay__item .attachment-card {
  box-shadow: 0 8px 32px rgba(27, 28, 26, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(250, 249, 245, 0.95);
}

.card-overlay__item .attachment-card__head {
  min-height: 32px;
  padding-right: 40px;
}

.card-overlay__recall {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-low, #f5f4f0);
  color: var(--primary, #6b5c44);
  font-size: 0.78rem;
  cursor: pointer;
  border: none;
  transition: background 150ms ease;
}

.card-overlay__recall:hover {
  background: var(--surface-hover, #eceae5);
}

/* History button (bookmark icon, top-right of digital human) */
.card-history-btn {
  position: fixed;
  top: calc(var(--header-height) + 64px);
  right: max(12px, calc(50% - (var(--phone-width) / 2) + 12px));
  /* z-index 35: below header (z-40) so a11y-toggle-button remains clickable */
  z-index: 35;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-container, #eeedea);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--surface-muted, #8a8680);
  transition: color 150ms ease, background 150ms ease;
}

.card-history-btn:hover {
  color: var(--primary, #6b5c44);
  background: rgba(250, 249, 245, 0.98);
}

.card-history-btn .material-symbols-outlined {
  font-size: 20px;
}

/* History panel */
.card-history-panel {
  position: fixed;
  top: calc(var(--header-height) + 108px);
  right: max(12px, calc(50% - (var(--phone-width) / 2) + 12px));
  /* z-index 36: below header (z-40), paired with .card-history-btn at z-35 */
  z-index: 36;
  width: min(calc(100% - 24px), 320px);
  max-height: 60vh;
  overflow-y: auto;
  border-radius: 12px;
  background: rgba(250, 249, 245, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(27, 28, 26, 0.12);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms;
}

.card-history-panel[data-open="true"],
.card-history-panel:not([data-open]) {
  /* When panel is rendered (not hidden by display:none), animate in */
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.card-history-panel__title {
  font-size: 0.75rem;
  color: var(--surface-muted, #8a8680);
  padding: 4px 8px;
}

.card-history-panel__item {
  cursor: pointer;
  border-radius: 8px;
  padding: 6px 8px;
  transition: background 150ms ease;
}

.card-history-panel__item:hover {
  background: var(--surface-low, #f5f4f0);
}

.card-history-panel__item small {
  display: block;
  font-size: 0.72rem;
  color: var(--surface-muted, #8a8680);
}

/* Hide full card in bubble flow; show recall link instead */
.message-card__attachments--overlay-hidden .attachment-card {
  display: none;
}

.card-history-panel__empty {
  text-align: center;
  color: var(--surface-muted, #8a8680);
  font-size: 0.82rem;
  padding: 16px 0;
}

.card-history-panel__recall {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--surface-container-low, #f4f4f0);
  color: var(--primary, #6b5c44);
  font-size: 0.72rem;
  cursor: pointer;
}

.card-history-panel__recall:hover {
  background: var(--surface-low, #f5f4f0);
}

.card-history-panel__badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--primary, #6b5c44);
  color: #fff;
  font-size: 0.65rem;
  vertical-align: middle;
}

/* ═══════════════════════════════════════════════
   Auth: Verify Button Loading Spinner
   ═══════════════════════════════════════════════ */

.verify-btn__spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.verify-btn__spinner.hidden {
  display: none;
}

.verify-spinner {
  animation: verify-spin 0.7s linear infinite;
}

@keyframes verify-spin {
  to { transform: rotate(360deg); }
}

/* Button loading state: disable + dim + show spinner */
#verify-code-button.loading {
  pointer-events: none; opacity: 0.72;
  background: var(--terracotta, #823b18);
  animation: verify-btn-pulse 1.2s ease-in-out infinite;
}

@keyframes verify-btn-pulse {
  0%, 100% { opacity: 0.72; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.03); }
}

#verify-code-button.loading .verify-btn__label,
#verify-code-button.loading .verify-btn__icon {
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: opacity 180ms ease, width 180ms ease;
}

#verify-code-button:not(.loading) .verify-btn__label,
#verify-code-button:not(.loading) .verify-btn__icon {
  transition: opacity 180ms ease 80ms, width 180ms ease 80ms;
}

/* ═══════════════════════════════════════════════
   Auth: Verification Result Toast Animation
   ═══════════════════════════════════════════════ */

#auth-verify-feedback {
  transform: translateY(0);
  opacity: 1;
  max-height: 60px;
  overflow: hidden;
  transition:
    opacity 320ms ease,
    transform 320ms ease,
    max-height 320ms ease;
}

/* When hidden (no feedback) */
#auth-verify-feedback.contract-hidden {
  opacity: 0;
  transform: translateY(6px);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  transition:
    opacity 200ms ease,
    transform 200ms ease,
    max-height 200ms ease;
}

/* Success tone: terracotta tint */
#auth-verify-feedback.success {
  color: var(--terracotta, #823b18);
  font-weight: 600;
}

/* Error tone: warm red */
#auth-verify-feedback.error {
  color: #9d2d25;
  font-weight: 600;
}

/* Loading tone: subtle pulse */
#auth-verify-feedback.loading {
  color: var(--surface-muted, #54433c);
  animation: auth-feedback-pulse 1.6s ease-in-out infinite;
}

@keyframes auth-feedback-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* ═══════════════════════════════════════════════
   Auth: Status Pill Transition
   ═══════════════════════════════════════════════ */

#auth-status-pill {
  transition: color 300ms ease;
}

/* ═══════════════════════════════════════════════════
   Camera Scan Button — floating "拍照识图" entry
   ═══════════════════════════════════════════════════ */

.camera-scan-dock {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--bottom-nav-height) + 12px);
  left: max(16px, calc(50% - 156px));
  transform: none;
  z-index: 68;
  pointer-events: auto;
}

.card-overlay__close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: rgba(250, 249, 245, 0.94);
  color: var(--surface-muted);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(27, 28, 26, 0.08);
  transition: background 180ms ease, color 180ms ease;
}

.card-overlay__close:hover,
.card-overlay__close:focus-visible {
  background: var(--terracotta-soft);
  color: var(--terracotta);
  outline: none;
}

.card-overlay__close .material-symbols-outlined {
  font-size: 20px;
}

.camera-scan-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border: none;
  border-radius: 999px;
  background: var(--terracotta);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(130, 59, 24, 0.25);
  transition: background 300ms, box-shadow 300ms, transform 150ms;
}

.camera-scan-button:hover {
  background: #a0522d;
  box-shadow: 0 6px 28px rgba(130, 59, 24, 0.35);
}

.camera-scan-button:active {
  transform: scale(0.96);
}

.camera-scan-button__icon {
  font-size: 20px;
}

.camera-scan-button__label {
  white-space: nowrap;
}

.camera-scan-status {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(250, 249, 245, 0.92);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(29, 43, 34, 0.08);
  font-size: 13px;
  color: var(--surface-muted);
}

.camera-scan-status__spinner {
  animation: camera-spin 1.2s linear infinite;
}

@keyframes camera-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.camera-scan-preview {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 16px;
  background: rgba(250, 249, 245, 0.92);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(29, 43, 34, 0.08);
}

.camera-scan-preview__img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 10px;
}

.camera-scan-preview__cancel {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(29, 43, 34, 0.08);
  color: var(--surface-muted);
  font-size: 14px;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════
   Header Icon Button (leaderboard entry)
   ═══════════════════════════════════════════════════ */

.header-icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--terracotta);
  cursor: pointer;
  transition: background 300ms;
}

.header-icon-button:hover {
  background: var(--terracotta-soft);
}

.header-icon-button[data-active="true"] {
  background: rgba(130, 59, 24, 0.12);
}

.header-icon-button .material-symbols-outlined {
  font-size: 22px;
}

/* ═══════════════════════════════════════════════════
   Leaderboard Workspace
   ═══════════════════════════════════════════════════ */

.leaderboard {
  padding: 16px;
  padding-bottom: 32px;
}

.leaderboard__header {
  margin-bottom: 20px;
  text-align: center;
}

.leaderboard__title {
  margin: 0;
  font-family: var(--font-headline);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--surface-ink);
  letter-spacing: -0.02em;
}

.leaderboard__subtitle {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--surface-muted);
  letter-spacing: 0.04em;
}

.leaderboard__tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.leaderboard__tabs::-webkit-scrollbar {
  display: none;
}

.leaderboard__tab {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background: var(--surface-low);
  color: var(--surface-muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 300ms, color 300ms;
}

.leaderboard__tab--active {
  background: var(--terracotta);
  color: #ffffff;
}

.leaderboard__tab-icon {
  font-size: 16px;
}

.leaderboard__tab-label {
  letter-spacing: 0.02em;
}

.leaderboard__loading,
.leaderboard__error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 16px;
  font-size: 13px;
  color: var(--surface-muted);
}

.leaderboard__skeleton {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 58px;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 0;
}

.leaderboard__skeleton-rank,
.leaderboard__skeleton-copy,
.leaderboard__skeleton-score {
  display: block;
  min-height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, #eceae5 20%, #f7f4ee 45%, #eceae5 70%);
  background-size: 220% 100%;
  animation: leaderboard-skeleton-shimmer 1.2s ease-in-out infinite;
}

.leaderboard__skeleton-rank {
  min-height: 24px;
}

.leaderboard__skeleton-copy--1 {
  width: 84%;
}

.leaderboard__skeleton-copy--2 {
  width: 68%;
}

.leaderboard__skeleton-score {
  min-height: 20px;
}

@keyframes leaderboard-skeleton-shimmer {
  to {
    background-position: -120% 0;
  }
}

.leaderboard__spinner {
  animation: camera-spin 1.2s linear infinite;
}

.leaderboard__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.leaderboard__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  margin-bottom: 2px;
}

.leaderboard__item:last-child {
  margin-bottom: 0;
}

.leaderboard__item--me {
  background: var(--terracotta-soft);
  border-radius: 12px;
  padding: 14px 12px;
  margin: 4px -12px;
}

.leaderboard__rank {
  min-width: 36px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--surface-ink);
}

.leaderboard__item[data-rank="1"] .leaderboard__rank,
.leaderboard__item[data-rank="2"] .leaderboard__rank,
.leaderboard__item[data-rank="3"] .leaderboard__rank {
  font-size: 20px;
}

.leaderboard__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.leaderboard__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--surface-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leaderboard__meta {
  font-size: 11px;
  color: var(--surface-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leaderboard__score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 18px;
  font-weight: 700;
  color: var(--terracotta);
  font-variant-numeric: tabular-nums;
}

.leaderboard__score-unit {
  font-size: 10px;
  font-weight: 500;
  color: var(--surface-muted);
}

.leaderboard__empty {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 16px;
  font-size: 14px;
  color: var(--surface-muted);
  text-align: center;
}

.leaderboard__empty .material-symbols-outlined {
  font-size: 36px;
  color: var(--terracotta);
}

.leaderboard__empty-title {
  color: var(--surface-ink);
  font-size: 0.96rem;
  font-weight: 800;
}

.leaderboard__empty-copy {
  max-width: 260px;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
}

.leaderboard__empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
}

.leaderboard__empty-action {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  background: var(--terracotta);
  color: #fff;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 7px 10px;
  transition: background 300ms ease, color 300ms ease;
}

.leaderboard__empty-action:hover,
.leaderboard__empty-action:focus-visible {
  background: #a0522d;
  outline: none;
}

.leaderboard__empty-action--secondary {
  background: rgba(130, 59, 24, 0.1);
  color: var(--terracotta);
}

.leaderboard__empty-action--secondary:hover,
.leaderboard__empty-action--secondary:focus-visible {
  background: rgba(130, 59, 24, 0.16);
  color: #6f2f12;
}

.leaderboard__my-rank {
  margin-top: 16px;
  padding-top: 16px;
  background: var(--surface-container-low, #f4f4f0);
  border-radius: 10px;
  padding: 14px;
  margin-left: -4px;
  margin-right: -4px;
}

.leaderboard__my-rank-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--surface-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}

/* ── Nav Workspace ────────────────────────────────────────── */

.nav-workspace {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.nav-status-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 10px;
}

.nav-status--info {
  background: rgba(32, 95, 103, 0.08);
  color: var(--ink);
}

.nav-status--warning {
  background: rgba(196, 116, 69, 0.1);
  color: #8a5a30;
}

.nav-status .material-symbols-outlined {
  font-size: 18px;
}

.nav-direction-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(29, 43, 34, 0.06);
}

.nav-direction-arrow-wrap {
  flex-shrink: 0;
}

.nav-direction-arrow {
  animation: nav-arrow-bounce 2s ease-in-out infinite;
}

@keyframes nav-arrow-bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.nav-direction-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.nav-direction-target {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.nav-direction-target .material-symbols-outlined {
  font-size: 20px;
  color: var(--sand);
}

.nav-direction-distance {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

/* Provider-neutral digital-human directory. The formal conversation remains
   the primary route; this panel only changes the current presentation adapter. */
.digital-human-experiment {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  overflow-y: auto;
  background: var(--surface, #fafafa);
  color: var(--surface-ink, #171717);
}

.digital-human-experiment__header {
  display: grid;
  gap: 6px;
}

.digital-human-experiment__eyebrow,
.digital-human-experiment__answer-label {
  margin: 0;
  color: var(--surface-ink-muted, #8f8f8f);
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 16px;
  text-transform: uppercase;
}

.digital-human-experiment__header h2 {
  margin: 0;
  font-family: "Geist", Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0;
}

.digital-human-experiment__intro,
.digital-human-experiment__boundary,
.digital-human-experiment__note,
.digital-human-experiment__status,
.digital-human-experiment__selection-status {
  margin: 0;
  color: var(--surface-ink-muted, #4d4d4d);
  font-size: 14px;
  line-height: 20px;
}

.digital-human-experiment__selection-status {
  font-size: 12px;
  line-height: 16px;
}

.digital-human-experiment__selection-status[data-state="failed"] {
  color: var(--error, #a32323);
}

.digital-human-experiment__selection-status[data-state="saved"] {
  color: var(--surface-ink, #171717);
}

.digital-human-experiment__providers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.digital-human-experiment__providers > [data-digital-human-guide-catalog] {
  display: contents;
}

.digital-human-experiment__provider {
  display: flex;
  min-width: 0;
  min-height: 58px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--surface-outline, #ebebeb);
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--surface-container-low, #fff);
  color: var(--surface-ink, #171717);
  text-align: left;
  cursor: pointer;
}

.digital-human-experiment__provider:hover,
.digital-human-experiment__provider:focus-visible,
.digital-human-experiment__provider.active {
  border-color: var(--primary, #171717);
  outline: none;
}

.digital-human-experiment__provider.active {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

.digital-human-experiment__guide:disabled {
  border-color: var(--surface-outline, #ebebeb);
  color: var(--surface-ink-muted, #8f8f8f);
  cursor: not-allowed;
  opacity: 0.65;
}

.digital-human-experiment__guide:disabled small {
  color: var(--surface-ink-muted, #8f8f8f);
}

.digital-human-experiment__provider > .material-symbols-outlined {
  flex: 0 0 auto;
  font-size: 22px;
}

.digital-human-experiment__provider span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.digital-human-experiment__provider strong,
.digital-human-experiment__provider small {
  overflow-wrap: anywhere;
}

.digital-human-experiment__provider strong {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.digital-human-experiment__provider small {
  color: var(--surface-ink-muted, #8f8f8f);
  font-size: 12px;
  line-height: 16px;
}

.digital-human-experiment__surface {
  display: grid;
  gap: 12px;
  border: 1px solid var(--surface-outline, #ebebeb);
  border-radius: 12px;
  padding: 12px;
  background: var(--surface-container-low, #fff);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

.digital-human-experiment__live2d-stage {
  min-height: 300px;
  overflow: hidden;
  border-radius: 6px;
  background: #f2f2f2;
}

.digital-human-experiment__live2d-stage .avatar-shell {
  min-height: 300px;
}

.digital-human-experiment__live2d-preview {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: contain;
  background: transparent;
}

.digital-human-experiment__provider-title {
  margin: 0;
  color: var(--surface-ink, #171717);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.digital-human-experiment__provider-panel {
  min-height: 180px;
  align-content: center;
}

.digital-human-experiment__live2d-preview--empty {
  display: grid;
  min-height: 300px;
  place-items: center;
  margin: 0;
  color: var(--surface-ink-muted, #8f8f8f);
  font-size: 13px;
  line-height: 20px;
}

.digital-human-experiment__boundary {
  border-top: 1px solid var(--surface-outline, #ebebeb);
  padding-top: 12px;
  font-size: 12px;
}

@media (max-width: 360px) {
  .digital-human-experiment {
    padding: 16px;
  }

  .digital-human-experiment__providers {
    grid-template-columns: 1fr;
  }
}

.route-map__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  margin-top: 8px;
  padding: 0 10px;
  border: 1px solid var(--hairline, #ebebeb);
  border-radius: 6px;
  background: var(--surface, #fff);
  color: var(--link, #0070f3);
  font: 500 13px/18px var(--font-headline, Arial, sans-serif);
  cursor: pointer;
}

.route-map__nav-link:hover,
.route-map__nav-link:focus-visible {
  border-color: var(--link, #0070f3);
  outline: none;
}

.route-map__nav-link .material-symbols-outlined {
  font-size: 17px;
}

.nav-route-evidence {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-left: 3px solid #205f67;
  background: rgba(32, 95, 103, 0.06);
  color: var(--ink);
  border-radius: 6px;
}

.nav-route-evidence[hidden] {
  display: none;
}

.nav-route-evidence__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
}

.nav-route-evidence__provider {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-route-evidence__version {
  flex-shrink: 0;
  color: var(--muted);
}

.nav-route-evidence p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.nav-arrival-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(32, 95, 103, 0.1);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #205f67;
  animation: nav-arrival-pop 0.5s ease-out;
}

@keyframes nav-arrival-pop {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.nav-map-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nav-map-amap {
  width: 100%;
  height: min(62vh, 480px);
  min-height: 320px;
  background: #f2f2f2;
  border: 1px solid #ebebeb;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.nav-map-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 24px;
  color: #4d4d4d;
  background: #fafafa;
  text-align: center;
  font-size: 14px;
}

.nav-map-loading[hidden] {
  display: none;
}

.nav-map-retry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #ebebeb;
  border-radius: 6px;
  background: #fff;
  color: #171717;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.nav-map-retry:hover,
.nav-map-retry:focus-visible {
  border-color: #0070f3;
  color: #0070f3;
}

.nav-map-poi {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  max-width: 160px;
  padding: 4px 8px;
  border: 1px solid #ebebeb;
  border-radius: 6px;
  background: #fff;
  color: #171717;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  font: 500 12px/18px Geist, Arial, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transform: translateY(-8px);
}

.nav-map-poi::after {
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
  background: #fff;
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.nav-map-poi--current {
  border-color: #0070f3;
  background: #0070f3;
  color: #fff;
}

.nav-map-poi--current::after {
  border-color: #0070f3;
  background: #0070f3;
}

.nav-map-poi--next {
  border-color: #171717;
  background: #171717;
  color: #fff;
}

.nav-map-poi--next::after {
  border-color: #171717;
  background: #171717;
}

.nav-map-user-marker {
  min-height: 28px;
  padding: 4px 8px;
  border: 2px solid #fff;
  border-radius: 9999px;
  background: #0070f3;
  color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
  font: 500 12px/18px Geist, Arial, sans-serif;
  white-space: nowrap;
  transform: translateY(-8px);
}

.nav-map-photo-marker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  max-width: 190px;
  padding: 5px 9px;
  border: 2px solid #fff;
  border-radius: 7px;
  background: #823b18;
  color: #fff;
  box-shadow: 0 2px 7px rgba(59, 27, 12, 0.32);
  font: 700 12px/17px Geist, Arial, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transform: translateY(-8px);
}

.nav-map-photo-marker::after {
  position: absolute;
  bottom: -7px;
  left: 50%;
  width: 11px;
  height: 11px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  background: #823b18;
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.nav-map-photo-marker .material-symbols-outlined {
  position: relative;
  z-index: 1;
  font-size: 16px;
}

.nav-map-caption {
  font-size: 11px;
  text-align: center;
  color: var(--muted);
}

.nav-map-poi-glow {
  animation: nav-poi-glow-pulse 2.5s ease-in-out infinite;
}

.nav-map-poi-focus-ring {
  opacity: 0.95;
}

.nav-map-poi-label {
  fill: #54433c;
  font-family: var(--font-body, "Manrope", sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  paint-order: stroke;
  stroke: rgba(250, 249, 245, 0.96);
  stroke-width: 3px;
  stroke-linejoin: round;
  opacity: 0.86;
}

.nav-map-poi-label--muted {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.74;
}

.nav-map-poi-label--current {
  fill: #1b1c1a;
  font-size: 12px;
  font-weight: 800;
  opacity: 1;
}

.nav-map-poi-label--next {
  fill: var(--terracotta, #823b18);
  font-size: 11.5px;
  font-weight: 800;
  opacity: 0.96;
}

@keyframes nav-poi-glow-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.nav-map-poi--current {
  animation: nav-poi-current-pulse 2s ease-in-out infinite;
}

@keyframes nav-poi-current-pulse {
  0%, 100% { stroke-width: 3; }
  50% { stroke-width: 5; }
}

.nav-map-direction-line {
  animation: nav-dash-flow 1.5s linear infinite;
}

@keyframes nav-dash-flow {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -30; }
}

.nav-route-stops {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-route-stops-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.nav-route-stops-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-route-stop {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  transition: background 0.2s;
}

.nav-route-stop--current {
  background: rgba(32, 95, 103, 0.1);
  font-weight: 600;
}

.nav-route-stop--next {
  background: rgba(196, 116, 69, 0.08);
}

.nav-route-stop-seq {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(29, 43, 34, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  flex-shrink: 0;
}

.nav-route-stop--current .nav-route-stop-seq {
  background: #205f67;
  color: #fff;
}

.nav-route-stop--next .nav-route-stop-seq {
  background: #c47445;
  color: #fff;
}

.nav-route-stop-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-route-stop-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(29, 43, 34, 0.06);
  color: var(--muted);
  white-space: nowrap;
}

.nav-route-stop-badge--here {
  background: rgba(32, 95, 103, 0.12);
  color: #205f67;
}

.nav-route-stop-badge--next {
  background: rgba(196, 116, 69, 0.12);
  color: #c47445;
}

.nav-demo-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 12px;
  background: var(--surface-container-low, #f4f4f0);
  border-radius: 8px;
  margin-top: 4px;
}

.nav-demo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background: rgba(32, 95, 103, 0.08);
  color: #205f67;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.nav-demo-btn:hover {
  background: rgba(32, 95, 103, 0.15);
}

.nav-demo-btn--active {
  background: #205f67;
  color: #fff;
}

.nav-demo-btn--secondary {
  background: rgba(196, 116, 69, 0.1);
  color: #8a5a30;
}

.nav-demo-btn--secondary:hover {
  background: rgba(196, 116, 69, 0.18);
}

.nav-demo-btn--location {
  background: rgba(0, 112, 243, 0.08);
  color: #005fca;
}

.nav-demo-btn:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.nav-demo-btn .material-symbols-outlined {
  font-size: 18px;
}

.nav-demo-hint {
  font-size: 11px;
}

/* ═══════════════════════════════════════════════
   S4a: Jump to Latest Button
   ═══════════════════════════════════════════════ */

.jump-to-latest {
  position: absolute;
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 140px);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;

  /* Glassmorphism 面板 */
  background-color: rgba(250, 249, 245, 0.85); /* Parchment #faf9f5 */
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);

  /* 无实线，使用 ghost border 效果 */
  box-shadow:
    inset 0 0 0 1px rgba(27, 28, 26, 0.05),
    0 12px 40px rgba(27, 28, 26, 0.06);

  /* 圆角 DEFAULT (0.25rem = 4px) */
  border-radius: 0.25rem;
  border: none;

  /* 文本与图标 */
  color: #823b18; /* Terracotta 主色 */
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;

  /* 动画过渡 */
  opacity: 1;
  transform: translateY(0);
  transition: opacity 300ms ease, transform 300ms ease, background-color 300ms ease, box-shadow 300ms ease;
}

.jump-to-latest .material-symbols-outlined {
  font-size: 18px;
}

/* 交互态 */
.jump-to-latest:hover,
.jump-to-latest:focus-visible {
  background-color: rgba(250, 249, 245, 0.95);
  box-shadow:
    inset 0 0 0 1px rgba(27, 28, 26, 0.08),
    0 16px 48px rgba(27, 28, 26, 0.08);
  color: #a0522d; /* Terracotta 按压色 */
  outline: none;
}

.jump-to-latest:active {
  background-color: rgba(240, 237, 225, 0.9);
  transform: translateY(2px);
  transition-duration: 100ms;
}

/* 隐藏态：淡出 + 轻微下移 */
.jump-to-latest.is-hidden {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════
   S4c: History Collapse Bar
   ═══════════════════════════════════════════════ */

.history-collapse-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px;
  margin-bottom: 24px;
  background-color: #f4f4f0; /* surface_container_low */
  color: #54433c;
  font-family: var(--font-body, "Manrope", sans-serif);
  font-size: 0.875rem;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 300ms ease, color 300ms ease, transform 300ms ease;
  outline: none;
}

.history-collapse-bar:hover,
.history-collapse-bar:focus-visible {
  background-color: #ebebe5;
  color: #823b18; /* Terracotta 主色 */
}

.history-collapse-bar:active {
  background-color: #e2e2da;
  transform: scale(0.98);
  transition-duration: 100ms;
}

.history-collapse-bar .material-symbols-outlined {
  font-size: 1.25rem;
}

/* ═══════════════════════════════════════════════
   游览回忆报告 (Post-Trip Report)
   ═══════════════════════════════════════════════ */

.post-trip-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
}

.post-trip-generate-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border: none;
  border-radius: 0.25rem;
  background: var(--terracotta, #823b18);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--font-body, "Manrope", sans-serif);
  cursor: pointer;
  transition: background-color 200ms;
}

.post-trip-generate-btn:hover {
  background: #6b3014;
}

.post-trip-generate-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.post-trip-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: post-trip-spin 600ms linear infinite;
}

@keyframes post-trip-spin {
  to { transform: rotate(360deg); }
}

.post-trip-card {
  cursor: pointer;
  transition: background-color 160ms;
}

.post-trip-card:hover,
.post-trip-card:focus-visible {
  background: var(--surface-container, #ebebe5);
}

.post-trip-card:focus-visible {
  outline: 2px solid var(--terracotta, #823b18);
  outline-offset: 2px;
}

.post-trip-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 0;
  margin-bottom: 12px;
  border: none;
  background: transparent;
  color: var(--terracotta, #823b18);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: var(--font-body, "Manrope", sans-serif);
  cursor: pointer;
}

.post-trip-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.post-trip-detail__title {
  font-family: var(--font-headline, "Newsreader", serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink, #1d2b22);
  margin: 0;
  line-height: 1.3;
}

.post-trip-detail__meta {
  font-size: 0.75rem;
  color: var(--muted, #5b6f63);
  margin: 0;
}

.post-trip-detail__section {
  padding: 12px 14px;
  border-radius: 0.25rem;
  background: var(--surface-container-low, #f4f4f0);
}

.post-trip-detail__label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--terracotta, #823b18);
  margin: 0 0 8px;
}

.post-trip-detail__narrative {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink, #1d2b22);
  margin: 0;
}

.post-trip-detail__highlights {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.post-trip-detail__highlights li {
  font-size: 0.82rem;
  color: var(--ink, #1d2b22);
  padding-left: 16px;
  position: relative;
}

.post-trip-detail__highlights li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta, #823b18);
}

.post-trip-detail__snapshot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
}

.post-trip-detail__snapshot-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted, #5b6f63);
  flex-shrink: 0;
}

.post-trip-detail__snapshot-value {
  font-size: 0.78rem;
  color: var(--ink, #1d2b22);
  text-align: right;
  word-break: break-all;
}

.post-trip-detail__privacy {
  background: rgba(130, 59, 24, 0.04);
}

.post-trip-detail__privacy ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.post-trip-detail__privacy li {
  font-size: 0.78rem;
  color: var(--muted, #5b6f63);
  padding-left: 14px;
  position: relative;
}

.post-trip-detail__privacy li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--terracotta, #823b18);
}

.post-trip-detail__share {
  font-size: 0.82rem;
  color: var(--muted, #5b6f63);
  margin: 0;
  text-align: center;
}

.post-trip-detail__share strong {
  color: var(--terracotta, #823b18);
  font-family: var(--font-body, "Manrope", sans-serif);
  letter-spacing: 0.06em;
}
.workspace-page {
  min-height: 100%;
}

.workspace-screen:not(.workspace-screen--conversation).active .workspace-page {
  padding-bottom: 20px;
}

/* ========================================================================== */
/* Root DESIGN.md authority: Vercel / Geist tourist experience                */
/* ========================================================================== */

:root {
  --surface: #fafafa;
  --surface-low: #f2f2f2;
  --surface-ink: #171717;
  --surface-muted: #4d4d4d;
  --surface-faint: #8f8f8f;
  --terracotta: #171717;
  --terracotta-soft: #f2f2f2;
  --line: #ebebeb;
  --ink: #171717;
  --muted: #8f8f8f;
  --primary: #171717;
  --error: #ee0000;
  --phone-width: 420px;
  --header-height: 56px;
  --bottom-nav-height: 62px;
  --bottom-nav-visual-height: 62px;
  --composer-nav-clearance: calc(var(--bottom-nav-height) + 8px);
  --composer-dock-gap: 0px;
  --supporting-workspace-bottom-safe-space: calc(env(safe-area-inset-bottom, 0px) + var(--bottom-nav-height) + 24px);
  --bubble-area-max-height: 56vh;
  --bubble-side-gutter: 16px;
  --font-headline: "Geist", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: "Geist", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "Geist Mono", "SFMono-Regular", Consolas, monospace;
  --shadow-soft: 0 1px 1px rgba(0, 0, 0, 0.04);
}

*,
*::before,
*::after {
  letter-spacing: 0 !important;
}

* {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html,
body {
  min-height: 100%;
  background: #fafafa;
  color: #171717;
  font-family: var(--font-body);
}

body {
  min-height: 100dvh;
}

.font-headline,
.font-body,
h1,
h2,
h3,
h4 {
  font-family: var(--font-body) !important;
}

body,
body * {
  font-family: var(--font-body) !important;
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined" !important;
}

.auth-panel__eyebrow,
.session-header__brand p,
.workspace-page > header p,
code,
pre,
kbd,
samp {
  font-family: var(--font-mono) !important;
}

.text-primary,
.text-on-surface {
  color: #171717 !important;
}

.text-on-surface-variant,
.text-outline {
  color: #4d4d4d !important;
}

.bg-surface,
.bg-surface-container-low {
  background: #fafafa !important;
}

.bg-surface-container {
  background: #f2f2f2 !important;
}

.bg-primary {
  background: #171717 !important;
}

.border-outline-variant,
.border-outline-variant\/25,
.border-outline-variant\/30,
.border-outline-variant\/40,
.border-outline-variant\/80 {
  border-color: #ebebeb !important;
}

button,
input,
select,
textarea {
  border-radius: 6px;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 2px solid #0070f3;
  outline-offset: 2px;
}

.paper-grain {
  display: none !important;
  background: none !important;
}

/* Entry: one quiet authentication task, with no setup/debug language. */

#entry-shell {
  min-height: 100dvh;
  padding: 24px;
  background: #fafafa;
}

#entry-shell > div {
  max-width: 400px;
}

.auth-panel,
#desktop-handoff-panel {
  position: relative;
  overflow: hidden;
  padding: 32px;
  border: 1px solid #ebebeb;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

.auth-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #007cf0 0%, #00dfd8 24%, #7928ca 50%, #ff0080 74%, #f9cb28 100%);
}

.auth-panel__header {
  margin-bottom: 32px;
}

.auth-panel__eyebrow {
  display: block;
  margin-bottom: 12px;
  color: #8f8f8f;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
}

.auth-panel__header h1 {
  margin: 0;
  color: #171717;
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
}

.auth-panel__header p {
  margin: 8px 0 0;
  color: #4d4d4d;
  font-size: 14px;
  line-height: 20px;
}

.auth-form {
  display: grid;
  gap: 8px;
}

.auth-form + .auth-form {
  margin-top: 20px;
}

.auth-form label,
.auth-form__label-row {
  color: #171717;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

.auth-form__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#auth-status-pill {
  color: #8f8f8f;
  font-size: 12px;
  font-weight: 400;
}

.auth-field {
  display: grid;
  min-height: 46px;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid #ebebeb;
  border-radius: 6px;
  background: #ffffff;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.auth-field--action {
  grid-template-columns: 20px minmax(0, 1fr) auto;
}

.auth-field:focus-within {
  border-color: #171717;
  box-shadow: 0 0 0 1px #171717;
}

.auth-field > .material-symbols-outlined {
  color: #8f8f8f;
  font-size: 19px;
}

.auth-field input {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #171717;
  font-size: 15px;
  line-height: 20px;
  outline: 0;
  box-shadow: none;
}

.auth-field input::placeholder {
  color: #a1a1a1;
}

#request-code-button {
  min-height: 34px;
  padding: 0 8px;
  border-left: 1px solid #ebebeb;
  border-radius: 0;
  color: #171717;
  font-size: 13px;
  font-weight: 500;
}

#request-code-button:hover:not(:disabled) {
  color: #0070f3;
}

.auth-submit {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  padding: 0 14px;
  border-radius: 6px;
  background: #171717;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  transition: background 160ms ease, opacity 160ms ease;
}

.auth-submit:hover:not(:disabled) {
  background: #333333;
}

.auth-submit:disabled {
  cursor: not-allowed;
  opacity: 0.32;
}

.verify-btn__icon {
  font-size: 18px;
}

.auth-feedback {
  display: none;
  min-height: 16px;
  margin: 0;
  color: #8f8f8f;
  font-size: 12px;
  line-height: 16px;
}

.auth-feedback.success,
.auth-feedback.warn,
.auth-feedback.error,
.auth-feedback.loading,
.auth-feedback.auth-toast--enter {
  display: block;
}

.auth-feedback.success,
.auth-feedback.loading {
  color: #0070f3;
}

.auth-feedback.warn {
  color: #ab570a;
}

.auth-feedback.error {
  color: #ee0000;
}

.auth-session-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #ebebeb;
}

.auth-session-actions button {
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid #ebebeb;
  border-radius: 6px;
  background: #ffffff;
  color: #4d4d4d;
  font-size: 12px;
  font-weight: 500;
}

.auth-session-actions button:hover:not(:disabled) {
  border-color: #171717;
  color: #171717;
}

#create-session-button:disabled,
#resume-session-button:disabled,
#clear-auth-button {
  display: none;
}

.auth-session-actions:has(#create-session-button:disabled):has(#resume-session-button:disabled) {
  display: none;
}

#desktop-handoff-panel header p,
#desktop-handoff-panel header h2,
#desktop-handoff-panel strong,
#desktop-handoff-panel span {
  font-family: var(--font-body) !important;
  color: #171717 !important;
}

/* Session chrome: compact, functional, hairline-separated. */

.session-shell {
  height: 100dvh;
  min-height: 0;
  max-width: var(--phone-width) !important;
  background: #fafafa !important;
  border-inline: 1px solid #ebebeb;
}

.session-header {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: var(--header-height);
  border-bottom: 1px solid #ebebeb;
  background: #fafafa;
}

.session-header__inner {
  display: flex;
  min-height: var(--header-height);
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
}

.session-header__brand {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 8px;
}

.session-header__mark {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 2px;
  background: #171717;
}

.session-header__brand h1 {
  overflow: hidden;
  margin: 0;
  color: #171717;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-header__brand p {
  margin: 0;
  color: #8f8f8f;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  line-height: 12px;
}

.session-header__tools {
  display: flex;
  align-items: center;
  gap: 4px;
}

.voice-mode-strip--header {
  gap: 0;
  padding: 2px;
  border: 1px solid #ebebeb;
  border-radius: 6px;
  background: #ffffff;
}

.voice-mode-strip--header .voice-mode-chip,
.header-icon-button,
.a11y-toggle,
#session-back-button {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 6px;
  background: transparent;
  color: #4d4d4d;
  box-shadow: none;
}

.voice-mode-strip--header .voice-mode-chip.active {
  background: #171717;
  color: #ffffff;
  box-shadow: none;
}

.header-icon-button:hover,
.header-icon-button[data-active="true"],
.a11y-toggle:hover,
.a11y-toggle[aria-expanded="true"],
#session-back-button:hover {
  background: #f2f2f2;
  color: #171717;
}

.header-icon-button .material-symbols-outlined,
.a11y-toggle .material-symbols-outlined {
  font-size: 18px;
}

.a11y-panel {
  top: calc(100% + 6px);
  right: 8px;
  max-height: calc(100dvh - 72px);
  overflow-y: auto;
  padding: 12px;
  border: 1px solid #ebebeb;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.04), 0 8px 16px -4px rgba(0, 0, 0, 0.08);
}

.a11y-panel__row + .a11y-panel__row {
  background: linear-gradient(#ebebeb, #ebebeb) top / 100% 1px no-repeat;
}

.a11y-panel__label {
  color: #4d4d4d;
  font-size: 12px;
}

.a11y-option {
  min-height: 30px;
  border-radius: 6px;
  color: #4d4d4d;
  font-size: 12px;
}

.a11y-option:hover,
.a11y-option.active {
  background: #171717;
  color: #ffffff;
}

.a11y-panel__divider {
  background: #ebebeb;
}

.a11y-panel__logout,
#my-records-button[style] {
  border-radius: 6px;
  color: #4d4d4d !important;
  font-size: 12px;
}

.a11y-panel__logout:hover {
  background: #f2f2f2;
  color: #171717 !important;
}

/* Live2D is the hero. Color is confined to this hero surface. */

.workspace-stack {
  min-height: 0;
  background: #fafafa;
}

.workspace-screen--conversation.active {
  height: 100%;
}

.conversation-stage {
  background: #fafafa;
}

.avatar-stage--hero,
.avatar-shell--live2d,
.avatar-stage--hero .avatar-shell__figure {
  background: linear-gradient(135deg, #f1faff 0%, #fafafa 35%, #fff6fb 72%, #fff9ec 100%);
  box-shadow: none;
}

.avatar-stage--hero::before,
.avatar-stage--hero::after {
  display: none;
}

.avatar-shell__loading-overlay {
  background: rgba(250, 250, 250, 0.92);
  color: #4d4d4d;
  font-size: 12px;
}

.avatar-shell__loading-icon {
  color: #171717;
}

body[data-active-workspace="conversation"][data-journey-focus-visible="true"] #avatar-stage canvas,
body[data-active-workspace="conversation"][data-journey-focus-visible="true"] #avatar-stage > .avatar-shell {
  transform: none;
}

.conversation-thread {
  left: var(--bubble-side-gutter);
  right: var(--bubble-side-gutter);
  bottom: var(--input-bar-height);
  gap: 8px;
  max-height: var(--bubble-area-max-height);
  padding: 20px 0 4px;
  mask-image: linear-gradient(to bottom, transparent 0%, black 7%);
  scrollbar-color: #d9d9d9 transparent;
}

.conversation-thread::-webkit-scrollbar-thumb {
  background: #d9d9d9;
}

.message-card {
  max-width: 86%;
  gap: 6px;
  transform: translateY(24px) scale(0.88);
  transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1), transform 560ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.message-card--visible {
  transform: translateY(0) scale(1);
}

.message-card[data-role="assistant"] .message-card__text,
.message-card[data-role="tourist"] .message-card__text {
  padding: 10px 12px;
  border: 1px solid #ebebeb;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  box-shadow: none;
}

.message-card[data-role="assistant"] .message-card__text {
  background: #ffffff;
  color: #171717;
}

.message-card[data-role="tourist"] .message-card__text {
  border-color: #171717;
  border-bottom-right-radius: 4px;
  background: #171717;
  color: #ffffff;
}

.message-card[data-role="assistant"]:hover .message-card__text,
.message-card[data-role="tourist"]:hover .message-card__text {
  box-shadow: none;
}

.message-card__lang--en {
  padding-top: 10px;
  background: linear-gradient(#ebebeb, #ebebeb) top / 100% 1px no-repeat;
  color: #4d4d4d;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
}

.quick-reply-strip {
  gap: 6px;
  padding: 4px 0;
}

.quick-reply-chip {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #ebebeb;
  border-radius: 64px;
  background: #ffffff;
  color: #171717;
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
  animation-duration: 220ms;
}

.quick-reply-chip:hover {
  border-color: #171717;
  background: #ffffff;
  color: #171717;
}

.t01-profile-panel {
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.t01-profile-panel__prompt,
.t01-profile-panel__next,
.t01-profile-panel__selected {
  color: #171717;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

.t01-profile-panel__next {
  color: #4d4d4d;
  font-weight: 400;
}

.t01-profile-panel--collapsed {
  padding: 10px 12px;
  border: 1px solid #ebebeb;
  border-radius: 12px;
  background: #ffffff;
}

.t01-profile-panel__edit {
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid #ebebeb;
  border-radius: 6px;
  background: #ffffff;
  color: #171717;
  font-size: 12px;
  font-weight: 500;
}

.t01-profile-grid {
  gap: 6px;
}

.t01-profile-card {
  min-height: 104px;
  padding: 10px 8px;
  border: 1px solid #ebebeb;
  border-radius: 12px;
  background: #ffffff;
  color: #171717;
  box-shadow: none;
}

.t01-profile-card:hover,
.t01-profile-card:focus-visible,
.t01-profile-card.is-selected {
  border-color: #171717;
  background: #ffffff;
  color: #171717;
  box-shadow: none;
}

.t01-profile-card__icon,
.t01-profile-card:hover .t01-profile-card__icon,
.t01-profile-card:focus-visible .t01-profile-card__icon,
.t01-profile-card.is-selected .t01-profile-card__icon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: #f2f2f2;
  color: #171717;
}

.t01-profile-card strong {
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}

.t01-profile-card span:last-child {
  color: #4d4d4d;
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
}

/* Journey focus stays functional but is a single flat status rail, not a card. */

#recommended-support-strip {
  top: 8px;
  padding: 0 12px;
}

.recommended-support-card {
  min-height: 44px;
  padding: 5px 6px 5px 10px;
  border: 1px solid #ebebeb;
  border-radius: 12px;
  background: #ffffff;
  color: #4d4d4d;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

.recommended-support-card__title {
  color: #171717;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.recommended-support-card__item {
  min-height: 26px;
  border-radius: 6px;
  background: #f2f2f2;
  color: #4d4d4d;
}

.recommended-support-card__item .material-symbols-outlined,
.recommended-support-card__item strong {
  color: #171717;
}

.recommended-support-card__action {
  min-width: 42px;
  min-height: 32px;
  border-radius: 6px;
  background: #171717;
  color: #ffffff;
  font-size: 11px;
  font-weight: 500;
}

.recommended-support-card__action:hover,
.recommended-support-card__action:focus-visible {
  background: #333333;
}

/* Composer: camera + one message entry read as a single bottom control group. */

body[data-active-workspace="conversation"] .session-shell[data-composer-state="closed"] {
  --input-bar-height: 130px;
}

body[data-active-workspace="conversation"] .session-shell[data-composer-state="compact"] {
  --input-bar-height: 148px;
}

body[data-active-workspace="conversation"] .session-shell[data-composer-state="expanded"] {
  --input-bar-height: 208px;
}

.composer-fab {
  left: calc(50% + 24px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--bottom-nav-height) + 24px);
  width: min(calc(100% - 76px), 344px);
  height: 48px;
  gap: 8px;
  border: 0;
  border-radius: 6px;
  background: #171717;
  color: #ffffff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

.composer-fab:hover,
.composer-fab:focus-visible {
  background: #333333;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

.composer-fab__icon {
  font-size: 20px;
}

.composer-fab__hint,
body[data-fab-hint="show"][data-active-workspace="conversation"] [data-composer-state="closed"] .composer-fab__hint {
  position: static;
  display: inline;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  opacity: 1;
  visibility: visible;
  transform: none;
}

.composer-fab__hint::after {
  display: none;
}

.camera-scan-dock {
  left: max(12px, calc(50% - 198px));
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--bottom-nav-height) + 24px);
  z-index: 71;
}

.camera-scan-button {
  width: 48px;
  height: 48px;
  justify-content: center;
  gap: 0;
  padding: 0;
  border: 1px solid #ebebeb;
  border-radius: 6px;
  background: #ffffff;
  color: #171717;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

.camera-scan-button:hover {
  border-color: #171717;
  background: #ffffff;
  color: #171717;
  box-shadow: none;
}

.camera-scan-button__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.composer-dock {
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--bottom-nav-height) + 24px);
  width: min(calc(100% - 24px), calc(var(--phone-width) - 24px));
  gap: 8px;
  padding: 6px;
  border: 1px solid #ebebeb;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.04), 0 8px 16px -4px rgba(0, 0, 0, 0.08);
}

[data-composer-state="compact"] .composer-dock,
[data-composer-state="expanded"] .composer-dock {
  border-radius: 12px;
}

[data-composer-state="expanded"] .composer-dock {
  max-height: min(50dvh, 380px);
  overflow-y: auto;
  padding: 8px;
}

.composer-dock__input-row {
  grid-template-columns: 38px 38px minmax(0, 1fr) 38px 42px;
  gap: 4px;
}

.composer-dock__header {
  padding: 0;
}

[data-composer-state="compact"] .composer-dock__header {
  top: -40px;
  right: 0;
}

.composer-dock__actions {
  gap: 4px;
}

.composer-dock__actions button {
  width: 34px;
  height: 34px;
  border: 1px solid #ebebeb;
  border-radius: 6px;
  background: #ffffff;
  color: #171717;
  box-shadow: none;
}

.composer-dock__actions button:hover,
.composer-dock__actions button:focus-visible {
  border-color: #171717;
  background: #ffffff;
  color: #171717;
}

.composer-icon {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  color: #4d4d4d;
}

.composer-icon:hover {
  background: #f2f2f2;
  color: #171717;
}

label.composer-icon[aria-disabled="true"] {
  border: 1px solid #ebebeb;
  border-radius: 6px;
  background: #f2f2f2;
  color: #8f8f8f;
  cursor: not-allowed;
  opacity: 1;
}

label.composer-icon[aria-disabled="true"]:hover {
  background: #f2f2f2;
  color: #8f8f8f;
}

.composer-icon--send,
.composer-icon--send:hover {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  background: #171717;
  color: #ffffff;
}

.composer-icon--feedback {
  display: none !important;
}

#message-input {
  height: 42px;
  color: #171717;
  font-size: 14px;
}

#message-input::placeholder {
  color: #a1a1a1;
}

#composer-feedback,
#voice-output-mode-note {
  display: none !important;
}

.composer-dock__footer {
  padding: 0;
}

.follow-up-inline {
  margin: 0 !important;
  padding: 16px !important;
  border: 1px solid #ebebeb;
  border-radius: 12px !important;
  background: #ffffff !important;
}

.composer-degraded-hint {
  border-radius: 6px;
  background: #ffefcf;
  color: #ab570a;
}

/* Five existing workspaces remain reachable but recede behind the conversation. */

.bottom-nav {
  min-height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
  padding: 5px 8px calc(env(safe-area-inset-bottom, 0px) + 5px);
  border-top: 1px solid #ebebeb;
  background: #ffffff;
  box-shadow: none;
}

.bottom-nav__button {
  min-height: 50px;
  gap: 1px;
  padding: 4px 2px;
  border-radius: 6px;
  color: #4d4d4d;
  opacity: 1;
}

.bottom-nav__button:hover {
  background: #f2f2f2;
}

.bottom-nav__button.active {
  background: #f2f2f2;
  color: #171717;
}

.bottom-nav__icon {
  font-size: 19px;
}

.bottom-nav__label {
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
}

/* Supporting screens: one page surface, no card-inside-card framing. */

.workspace-screen:not(.workspace-screen--conversation).active {
  background: #fafafa;
  scrollbar-color: #d9d9d9 transparent;
}

.workspace-page {
  max-width: 100%;
  padding-bottom: 16px;
}

.workspace-page > header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ebebeb;
}

.workspace-page > header p {
  color: #8f8f8f !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

.workspace-page > header h2 {
  color: #171717 !important;
  font-family: var(--font-body) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 32px !important;
}

.workspace-detail-card,
.workspace-state-summary,
.attachment-card,
.detail-row,
.post-trip-detail__section {
  border: 1px solid #ebebeb;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: none;
}

.workspace-detail-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.detail-stack {
  display: grid;
  gap: 8px;
}

.attachment-card,
.detail-row {
  padding: 14px;
}

.attachment-card--route,
.attachment-card--reminder,
.attachment-card--image {
  border-inline-start: 1px solid #ebebeb;
}

.empty-copy {
  color: #8f8f8f;
  font-size: 14px;
  line-height: 20px;
}

.pre-visit-tag,
.pre-visit-tag.active,
.nav-demo-btn,
.nav-demo-btn--active,
.post-trip-generate-btn,
.action-button--primary,
.attachment-card__download {
  border: 1px solid #ebebeb;
  border-radius: 6px;
  background: #ffffff;
  color: #171717;
  box-shadow: none;
}

.pre-visit-tag.active,
.nav-demo-btn--active,
.post-trip-generate-btn,
.action-button--primary {
  border-color: #171717;
  background: #171717;
  color: #ffffff;
}

.nav-demo-controls {
  padding: 12px 0 0;
  border-top: 1px solid #ebebeb;
  border-radius: 0;
  background: transparent;
}

.nav-map-figure,
.nav-direction-card,
.nav-status,
.leaderboard__item,
.leaderboard__my-rank {
  border: 1px solid #ebebeb;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: none;
}

.leaderboard__tab {
  border-radius: 6px;
  color: #4d4d4d;
}

.leaderboard__tab--active {
  background: #171717;
  color: #ffffff;
}

/* Transient layers are compact and neutral. */

.shell-notice {
  z-index: 90;
  padding: 10px 12px;
  border: 1px solid #ebebeb;
  border-radius: 12px;
  background: #ffffff;
  color: #4d4d4d;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.04), 0 8px 16px -4px rgba(0, 0, 0, 0.08);
}

.shell-notice__text {
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
}

.shell-notice.warn {
  border-color: #f5a623;
  color: #ab570a;
}

.shell-notice.error {
  border-color: #ee0000;
  color: #c50000;
}

.shell-notice--location {
  top: calc(var(--header-height) + 8px);
}

.card-overlay {
  bottom: var(
    --card-overlay-clearance,
    calc(env(safe-area-inset-bottom, 0px) + var(--input-bar-height))
  );
}

.card-overlay__item {
  max-height: min(34dvh, 280px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.card-overlay__item,
.card-history-panel,
.my-records-sheet {
  border: 1px solid #ebebeb;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.04), 0 8px 16px -4px rgba(0, 0, 0, 0.08);
}

.my-records-overlay {
  background: rgba(0, 0, 0, 0.28);
}

.my-records-sheet {
  border-radius: 12px 12px 0 0;
}

.my-records-tab.active {
  color: #171717;
}

.jump-to-latest {
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--bottom-nav-height) + 72px);
  padding: 7px 10px;
  border: 1px solid #ebebeb;
  border-radius: 6px;
  background: #ffffff;
  color: #171717;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

.jump-to-latest:hover,
.jump-to-latest:focus-visible {
  background: #f2f2f2;
  color: #171717;
  box-shadow: none;
}

@media (max-width: 400px) {
  #entry-shell {
    align-items: flex-start;
    padding: 16px;
  }

  .auth-panel,
  #desktop-handoff-panel {
    margin-top: 24px;
    padding: 24px;
  }

  .auth-panel__header {
    margin-bottom: 24px;
  }

  .auth-panel__header h1 {
    font-size: 28px;
    line-height: 36px;
  }

  .session-header__inner {
    padding-inline: 8px;
  }

  .session-header__brand {
    gap: 6px;
  }

  .session-header__brand p {
    display: none;
  }

  .session-header__mark {
    width: 6px;
    height: 6px;
    flex-basis: 6px;
  }

  .header-icon-button,
  .a11y-toggle {
    width: 30px;
    min-width: 30px;
  }

  .voice-mode-strip--header .voice-mode-chip {
    width: 29px;
    min-width: 29px;
  }

  .camera-scan-dock {
    left: 12px;
  }

  .composer-fab {
    left: calc(50% + 24px);
  }

  .composer-dock__input-row {
    grid-template-columns: 36px 36px minmax(0, 1fr) 36px 40px;
  }

  .composer-icon,
  .composer-icon--send {
    width: 36px;
  }

  .bottom-nav {
    padding-inline: 4px;
  }
}

@media (max-width: 350px) {
  .session-header__brand h1 {
    font-size: 12px;
  }

  .composer-icon--passive {
    display: none;
  }

  .composer-dock__input-row {
    grid-template-columns: 36px minmax(0, 1fr) 36px 40px;
  }
}

@media (min-width: 768px) {
  .session-shell {
    box-shadow: 0 0 0 1px #ebebeb;
  }
}

/* ===== P0 Batch 4: First-screen entrance animations (A1/A5/A7) ===== */
/* A1: entry-shell fade-in + slide-up on initial load */
#entry-shell {
  animation: entry-shell-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes entry-shell-in {
  from { opacity: 0; transform: translateY(32px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* A5: hero area fade-in, greeting slides up with delay */
.conversation-stage__hero {
  animation: hero-fade-in 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes hero-fade-in {
  from { opacity: 0; transform: scale(1.05); }
  to   { opacity: 1; transform: scale(1); }
}

.conversation-stage__greeting:not(.contract-hidden) {
  animation: greeting-slide-up 480ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;
}

@keyframes greeting-slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* A7: bottom-nav slide-up-fade when first revealed (contract-hidden removed).
   CRITICAL: must preserve original translateX(-50%) used with left:50% for centering. */
.bottom-nav:not(.contract-hidden) {
  animation: bottom-nav-in 440ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes bottom-nav-in {
  from { opacity: 0; transform: translateX(-50%) translateY(40px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ===== P0 Batch 6: Remaining P0 items (C1/C7/C8/A2/A4/A6) ===== */

/* C1: Loading overlay fades in smoothly when first appearing (not just spinner spin). */
.avatar-shell__loading-overlay:not(.avatar-shell__loading-overlay--hidden) {
  animation: loading-overlay-fade-in 200ms ease-out both;
}

@keyframes loading-overlay-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* C7: Thinking state adds a subtle desaturation filter to show the digital human is "processing". */
.avatar-stage--hero[data-avatar-ready="provider"] .avatar-shell--live2d[data-speech-state="thinking"] {
  animation: avatar-thinking-pulse 2s ease-in-out infinite;
  filter: saturate(0.92);
}

@keyframes avatar-thinking-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(0.998); }
}

/* C8: Hero aura (::after pseudo-element) drifts slowly for a living, breathing backdrop. */
.avatar-stage--hero::after {
  animation: hero-aura-drift 8s ease-in-out infinite alternate;
}

@keyframes hero-aura-drift {
  from { transform: translateX(calc(-50% - 4px)); }
  to   { transform: translateX(calc(-50% + 4px)); }
}

/* A2: Auth panel header children cascade in with staggered slide-up-fade. */
.auth-panel__header .auth-panel__eyebrow,
.auth-panel__header h1,
.auth-panel__header p {
  animation: auth-header-slide-up 520ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.auth-panel__header .auth-panel__eyebrow { animation-delay: 0ms; }
.auth-panel__header h1                   { animation-delay: 120ms; }
.auth-panel__header p                    { animation-delay: 240ms; }

@keyframes auth-header-slide-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* A4: Session header slides down when the session shell first becomes visible. */
.session-header {
  animation: session-header-slide-down 440ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes session-header-slide-down {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* A6: Workspace screens fade in + slide up slightly when activated (display: none → block). */
.workspace-screen.active {
  animation: workspace-screen-in 360ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes workspace-screen-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== Phase 1: Login Loading Modal (full-screen white mask + rainbow bars top & bottom) ===== */

#auth-loading-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease-out;
}

#auth-loading-modal[data-visible="true"] {
  opacity: 1;
  pointer-events: auto;
}

#auth-loading-modal[data-visible="false"] {
  opacity: 0;
  pointer-events: none;
}

/* Full-screen solid white mask — completely hides all background page content
   so the user cannot see the rendered homepage behind the loading modal. */
.auth-loading-modal__mask {
  position: absolute;
  inset: 0;
  background: #ffffff;
  z-index: 0;
}

.auth-loading-modal__card {
  position: relative;
  z-index: 1;
  width: min(300px, calc(100vw - 48px));
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(27, 28, 26, 0.14);
  overflow: hidden;
  transform: scale(0.94);
  opacity: 0;
  transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 180ms ease-out;
}

#auth-loading-modal[data-visible="true"] .auth-loading-modal__card {
  transform: scale(1);
  opacity: 1;
}

#auth-loading-modal[data-visible="false"] .auth-loading-modal__card {
  transform: scale(0.96);
  opacity: 0;
}

/* Rainbow decorative bars on BOTH top and bottom edges of the card */
.auth-loading-modal__rainbow-bar {
  height: 4px;
  width: 100%;
  background: var(--rainbow-gradient);
  background-size: 200% 100%;
  animation: rainbow-slide 2.4s linear infinite;
}

@keyframes rainbow-slide {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.auth-loading-modal__body {
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.auth-loading-modal__title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--surface-ink, #1b1c1a);
  margin: 0;
  letter-spacing: 0.01em;
}

.auth-loading-modal__subtitle {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--surface-muted, #54433c);
  margin: 0;
}

/* Rainbow bouncing dots loader (uses same desaturated rainbow gradient) */
.rainbow-dots-loader {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 7px;
  height: 30px;
  padding: 4px 0;
}

.rainbow-dots-loader__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rainbow-gradient);
  background-size: 500% 100%;
  animation: rainbow-dot-bounce 1s ease-in-out infinite;
}

.rainbow-dots-loader__dot:nth-child(1) { background-position: 0% 50%; animation-delay: 0ms; }
.rainbow-dots-loader__dot:nth-child(2) { background-position: 25% 50%; animation-delay: 100ms; }
.rainbow-dots-loader__dot:nth-child(3) { background-position: 50% 50%; animation-delay: 200ms; }
.rainbow-dots-loader__dot:nth-child(4) { background-position: 75% 50%; animation-delay: 300ms; }
.rainbow-dots-loader__dot:nth-child(5) { background-position: 100% 50%; animation-delay: 400ms; }

@keyframes rainbow-dot-bounce {
  0%, 100% {
    transform: translateY(0) scale(0.85);
    opacity: 0.65;
  }
  50% {
    transform: translateY(-12px) scale(1.1);
    opacity: 1;
  }
}

/* ===== Phase 2: Session Launch Cinematic (damped vertical bounce, 2s total) ===== */

#session-launch-cinematic {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

/* Full-screen pure white independent canvas — clears all original page elements.
   Stays fully opaque during dropping + settling, then fades out at the end. */
.session-launch-cinematic__mask {
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  transition: opacity 200ms ease-out;
}

#session-launch-cinematic[data-phase="pending"] .session-launch-cinematic__mask,
#session-launch-cinematic[data-phase="dropping"] .session-launch-cinematic__mask,
#session-launch-cinematic[data-phase="settling"] .session-launch-cinematic__mask {
  opacity: 1;
}

#session-launch-cinematic[data-phase="done"] .session-launch-cinematic__mask {
  opacity: 0;
  transition: opacity 320ms ease-out;
}

/* Container for the five rainbow blocks, pinned to bottom nav area */
.session-launch-cinematic__blocks {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100%, var(--phone-width, 420px));
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 8px 10px calc(env(safe-area-inset-bottom, 0px) + 5px);
  z-index: 1;
}

/* Title "灵山胜境 数字向导" — appears char-by-char in the upper area
   during the bouncing phase, fades out when blocks settle. */
.session-launch-cinematic__title {
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  font-family: var(--font-display, "Manrope", system-ui, sans-serif);
  font-size: clamp(22px, 6vw, 32px);
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.session-launch-cinematic__title-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  color: #1a1a1a;
}

/* Char-by-char fade-in only in "dropping" phase.
   Each char has an inline animation-delay set via JS (90ms stagger). */
#session-launch-cinematic[data-phase="dropping"] .session-launch-cinematic__title-char {
  animation: cinematic-title-char-in 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes cinematic-title-char-in {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade out title when blocks settle (color melt phase) */
#session-launch-cinematic[data-phase="settling"] .session-launch-cinematic__title,
#session-launch-cinematic[data-phase="done"] .session-launch-cinematic__title {
  animation: cinematic-title-fade-out 500ms ease-out forwards;
}

@keyframes cinematic-title-fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Each rainbow block falls from top like a BOUNCY BALL with large-amplitude
   vertical bounces that decay over 5 iterations. Uses vh units for big arcs.
   Each segment has its own animation-timing-function: ease-in for falling
   (gravity acceleration), ease-out for rising (deceleration). */
.session-launch-cinematic__block {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 50px;
  padding: 4px 2px;
  border-radius: 12px;
  background: var(--rainbow-gradient-vertical);
  background-size: 100% 500%;
  opacity: 0;
}

/* Block drop animation only triggers in "dropping" phase.
   In "pending" phase, blocks stay invisible (opacity: 0) while the white
   mask covers the page during Phase 1 → Phase 2 handoff. */
#session-launch-cinematic[data-phase="dropping"] .session-launch-cinematic__block {
  animation: cinematic-block-drop 1500ms cubic-bezier(0.5, 0.05, 0.5, 0.95) forwards;
}

/* Cream overlay pseudo-element: starts transparent, fades to opaque during
   settling phase. Using opacity (not background) for smooth cross-browser
   interpolation — gradient-to-solid background transitions snap, not fade. */
.session-launch-cinematic__block::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(250, 249, 245, 0.98);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.session-launch-cinematic__block-icon,
.session-launch-cinematic__block-label {
  position: relative;
  z-index: 1;
}

.session-launch-cinematic__block:nth-child(1) { background-position: 50% 0%; animation-delay: 0ms; }
.session-launch-cinematic__block:nth-child(2) { background-position: 50% 25%; animation-delay: 30ms; }
.session-launch-cinematic__block:nth-child(3) { background-position: 50% 50%; animation-delay: 60ms; }
.session-launch-cinematic__block:nth-child(4) { background-position: 50% 75%; animation-delay: 90ms; }
.session-launch-cinematic__block:nth-child(5) { background-position: 50% 100%; animation-delay: 120ms; }

/* Bouncy-ball trajectory: fall from top → BIG bounce up → fall back →
   smaller bounce → repeat with decaying amplitude. Only translateY changes.
   Each segment uses a per-keyframe timing function to simulate gravity:
     - ease-in  (accelerating) for downward falls
     - ease-out (decelerating) for upward bounces   */
@keyframes cinematic-block-drop {
  0% {
    opacity: 0;
    transform: translateY(-100vh);
    animation-timing-function: ease-in;
  }
  3% {
    opacity: 1;
    transform: translateY(-80vh);
    animation-timing-function: ease-in;
  }
  /* === First landing (fast fall) === */
  10% {
    opacity: 1;
    transform: translateY(14px);
    animation-timing-function: ease-out;
  }
  /* === First BIG bounce — large amplitude (40% of viewport height) === */
  24% {
    transform: translateY(-40vh);
    animation-timing-function: ease-in;
  }
  /* === Second landing === */
  38% {
    transform: translateY(10px);
    animation-timing-function: ease-out;
  }
  /* === Second bounce — medium (22vh) === */
  50% {
    transform: translateY(-22vh);
    animation-timing-function: ease-in;
  }
  /* === Third landing === */
  60% {
    transform: translateY(7px);
    animation-timing-function: ease-out;
  }
  /* === Third bounce — small (10vh) === */
  68% {
    transform: translateY(-10vh);
    animation-timing-function: ease-in;
  }
  /* === Fourth landing === */
  76% {
    transform: translateY(5px);
    animation-timing-function: ease-out;
  }
  /* === Fourth bounce — tiny (4vh) === */
  82% {
    transform: translateY(-4vh);
    animation-timing-function: ease-in;
  }
  /* === Fifth landing === */
  88% {
    transform: translateY(3px);
    animation-timing-function: ease-out;
  }
  /* === Micro bounce === */
  93% {
    transform: translateY(-1vh);
    animation-timing-function: ease-in;
  }
  /* === Final settle === */
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Block icon + label */
.session-launch-cinematic__block-icon {
  font-size: 19px;
  color: #ffffff;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.session-launch-cinematic__block-label {
  font-size: 10px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* SUGAR MELT: After blocks settle, rainbow colors slowly dissolve into the
   nav's native cream palette — like sugar melting in warm water.
   
   Three independent animations run in parallel (all use properties that
   browsers can smoothly interpolate):
   1. Block: filter blur + border-radius softening (edges melt)
   2. ::after pseudo-element: opacity 0→1 (cream overlay fades in over rainbow)
   3. Icon/label: color white→dark (text adapts to light background)
   
   NOTE: We cannot animate `background` from gradient to solid — browsers
   snap between gradient keyframes instead of interpolating. Using opacity
   on a cream overlay is the correct approach for smooth fading. */

#session-launch-cinematic[data-phase="settling"] .session-launch-cinematic__block,
#session-launch-cinematic[data-phase="done"] .session-launch-cinematic__block {
  animation: cinematic-block-melt 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes cinematic-block-melt {
  0% {
    opacity: 1;
    filter: blur(0px);
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  }
  /* Sugar starts melting — edges soften, blur increases */
  35% {
    opacity: 1;
    filter: blur(1.5px);
    border-radius: 22px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
  }
  /* Peak melt — maximum blur, rounded corners */
  60% {
    opacity: 1;
    filter: blur(2px);
    border-radius: 24px;
    box-shadow: 0 3px 24px rgba(0, 0, 0, 0.08);
  }
  /* Solidifying — blur recedes, corners tighten back */
  100% {
    opacity: 1;
    filter: blur(0px);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  }
}

/* Cream overlay: opacity 0→1 is THE smooth-fade mechanism.
   Rainbow shows through at low opacity; cream dominates at high opacity. */
#session-launch-cinematic[data-phase="settling"] .session-launch-cinematic__block::after,
#session-launch-cinematic[data-phase="done"] .session-launch-cinematic__block::after {
  animation: cinematic-cream-fade 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes cinematic-cream-fade {
  0% {
    opacity: 0;
  }
  /* Cream starts seeping through — sugar dissolving */
  30% {
    opacity: 0.35;
  }
  /* More than half dissolved */
  55% {
    opacity: 0.65;
  }
  /* Almost fully cream */
  80% {
    opacity: 0.9;
  }
  /* Fully melted into nav palette */
  100% {
    opacity: 1;
  }
}

#session-launch-cinematic[data-phase="settling"] .session-launch-cinematic__block-icon,
#session-launch-cinematic[data-phase="settling"] .session-launch-cinematic__block-label,
#session-launch-cinematic[data-phase="done"] .session-launch-cinematic__block-icon,
#session-launch-cinematic[data-phase="done"] .session-launch-cinematic__block-label {
  animation: cinematic-icon-recolor 900ms ease-out forwards;
}

@keyframes cinematic-icon-recolor {
  0% {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  }
  100% {
    color: #171717;
    text-shadow: none;
  }
}

/* Conversation area smooth reveal after blocks settle.
   NOTE: .composer-fab uses transform: translateX(-50%) for centering, so we
   must NOT use a translateY-based animation on it — use opacity-only reveal. */
#session-shell[data-cinematic-active="true"] .session-header,
#session-shell[data-cinematic-active="true"] .conversation-stage__hero,
#session-shell[data-cinematic-active="true"] .conversation-stage__greeting,
#session-shell[data-cinematic-active="true"] .composer-fab,
#session-shell[data-cinematic-active="true"] .workspace-screen.active {
  opacity: 0;
  transition: none;
}

#session-shell[data-cinematic-active="true"] .session-header,
#session-shell[data-cinematic-active="true"] .conversation-stage__hero,
#session-shell[data-cinematic-active="true"] .conversation-stage__greeting,
#session-shell[data-cinematic-active="true"] .workspace-screen.active {
  transform: translateY(14px);
}

#session-shell[data-cinematic-active="false"] .session-header,
#session-shell[data-cinematic-active="false"] .conversation-stage__hero,
#session-shell[data-cinematic-active="false"] .conversation-stage__greeting,
#session-shell[data-cinematic-active="false"] .workspace-screen.active {
  animation: cinematic-reveal 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* composer-fab: opacity-only reveal to preserve translateX(-50%) centering */
#session-shell[data-cinematic-active="false"] .composer-fab {
  animation: cinematic-reveal-fade 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes cinematic-reveal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#session-shell[data-cinematic-active="false"] .session-header { animation-delay: 0ms; }
#session-shell[data-cinematic-active="false"] .conversation-stage__hero { animation-delay: 60ms; }
#session-shell[data-cinematic-active="false"] .conversation-stage__greeting { animation-delay: 120ms; }
#session-shell[data-cinematic-active="false"] .workspace-screen.active { animation-delay: 80ms; }

@keyframes cinematic-reveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

/* Formal-turn progress stays inside the assistant message flow. The rail is
   intentionally monochrome because root DESIGN.md reserves mesh color for the hero. */
.message-card.message-card--typing {
  width: min(100%, 22rem);
  max-width: 100%;
  min-height: 0;
  flex: 0 0 auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

[data-composer-state="compact"] .message-card.message-card--typing {
  margin-bottom: 40px;
}

.message-card[data-role="assistant"] .message-card__text.agent-progress {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  flex: 0 0 auto;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line, #ebebeb);
  border-radius: 12px;
  background: #ffffff;
  color: var(--surface-ink, #171717);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  white-space: normal;
}

.agent-progress__track {
  width: 100%;
  height: 2px;
  overflow: hidden;
  background: var(--surface-low, #f2f2f2);
}

.agent-progress__bar {
  display: block;
  height: 100%;
  background: var(--surface-ink, #171717);
  transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-progress-status="error"] .agent-progress__bar {
  background: var(--error, #ee0000);
}

.agent-progress__body {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px 14px;
}

.agent-progress__status,
.agent-progress__elapsed,
.agent-progress__long-wait {
  margin: 0;
  overflow-wrap: anywhere;
}

.agent-progress__status {
  color: var(--surface-ink, #171717);
  font-size: 1em;
  font-weight: 500;
  line-height: 20px;
}

.agent-progress__status--changing {
  animation: agent-progress-status-in 120ms ease-out both;
}

@keyframes agent-progress-status-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.agent-progress__steps {
  display: flex;
  min-height: 8px;
  align-items: center;
  gap: 8px;
}

.agent-progress__dot {
  display: block;
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border: 1px solid var(--line, #ebebeb);
  border-radius: 9999px;
  background: transparent;
}

.agent-progress__dot--complete {
  border-color: var(--surface-ink, #171717);
  background: var(--surface-ink, #171717);
}

.agent-progress__dot--current {
  border-color: var(--surface-ink, #171717);
  background: var(--surface-ink, #171717);
  animation: agent-progress-pulse 1.4s ease-in-out infinite;
}

.agent-progress__dot--error {
  border-color: var(--error, #ee0000);
  background: var(--error, #ee0000);
}

@keyframes agent-progress-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(23, 23, 23, 0.22);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(23, 23, 23, 0);
  }
}

.agent-progress__elapsed,
.agent-progress__long-wait {
  color: var(--surface-faint, #8f8f8f);
  font-size: 0.857em;
  font-weight: 400;
  line-height: 16px;
}

.agent-progress__long-wait {
  color: var(--surface-muted, #4d4d4d);
}

.agent-progress__fallback.typing-indicator {
  align-self: flex-start;
  padding: 0;
}

.agent-progress__fallback.typing-indicator span {
  width: 6px;
  height: 6px;
}

body.presentation-large .message-card[data-role="assistant"] .message-card__text.agent-progress {
  font-size: 1em;
}

body.presentation-high-contrast .message-card[data-role="assistant"] .message-card__text.agent-progress,
body.presentation-high-contrast .agent-progress__dot {
  border-color: var(--surface-ink, #000000);
}

body.presentation-high-contrast .agent-progress__track {
  border-bottom: 1px solid var(--surface-ink, #000000);
  background: #ffffff;
}

/* Full-screen travel archive and its dedicated sharing workspace. */
.my-records-overlay {
  align-items: stretch;
  background: rgba(0, 0, 0, 0.42);
}

.my-records-sheet {
  width: min(100%, var(--phone-width));
  height: 100dvh;
  max-height: none;
  border: 0;
  border-radius: 0;
  background: #fafafa;
  box-shadow: none;
}

.my-records-sheet__header {
  flex-shrink: 0;
  padding: max(16px, env(safe-area-inset-top, 0px)) 20px 14px;
  border-bottom: 1px solid #ebebeb;
  background: #ffffff;
}

.my-records-tabs-shell {
  flex-shrink: 0;
  border-bottom: 1px solid #ebebeb;
  background: #ffffff;
  padding-bottom: 0;
}

.my-records-tabs {
  background: #ffffff;
}

.my-records-tab.active {
  background: #fafafa;
}

.my-records-body {
  background: #fafafa;
  padding: 20px 16px calc(32px + env(safe-area-inset-bottom, 0px));
}

.records-creator-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid #ebebeb;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.records-creator-panel__copy {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 12px;
}

.records-creator-panel__icon {
  display: flex;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #f2f2f2;
  color: #171717;
  font-size: 20px;
}

.records-creator-panel__eyebrow {
  margin: 0 0 4px;
  color: #8f8f8f;
  font-family: var(--font-mono) !important;
  font-size: 10px;
  font-weight: 600;
}

.records-creator-panel h3 {
  margin: 0;
  color: #171717;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}

.records-creator-panel__copy div > p:last-child {
  margin: 4px 0 0;
  color: #8f8f8f;
  font-size: 11px;
  line-height: 16px;
}

.records-creator-panel__button {
  display: inline-flex;
  min-height: 38px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 12px;
  border: 1px solid #171717;
  border-radius: 6px;
  background: #171717;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.records-creator-panel__button:hover,
.records-creator-panel__button:focus-visible {
  background: #333333;
}

.records-creator-panel__button .material-symbols-outlined {
  font-size: 16px;
}

.share-poster-overlay {
  align-items: stretch;
  background: #ffffff;
}

.share-poster-sheet {
  width: min(100%, var(--phone-width));
  height: 100dvh;
  max-height: none;
  border-radius: 0;
  background: #fafafa;
  padding: max(20px, env(safe-area-inset-top, 0px)) 18px calc(28px + env(safe-area-inset-bottom, 0px));
}

.share-poster-sheet__header {
  margin: 0 -18px 20px;
  padding: 0 18px 16px;
  border-bottom: 1px solid #ebebeb;
}

@media (max-width: 360px) {
  .records-creator-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .records-creator-panel__button {
    width: 100%;
  }
}