/* Final ZIP reference palette. Green is a highlight, never small functional
   text on white. Figma's scenic home, native SVG sizes, and layouts stay. */
.app-shell.mode-guide { grid-template-columns: 74px minmax(0, 1fr); }
.app-shell.mode-guide .sidebar,
.app-shell.mode-guide .assistant-screen,
.app-shell.mode-guide .empty-state,
.app-shell.mode-guide .chat { display: none !important; }
.app-shell.mode-guide .main { display: block; min-width: 0; min-height: 0; overflow: hidden; }
@media (max-width: 1199px) {
  .app-shell.mode-guide { grid-template-columns: 64px minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .app-shell.mode-guide { display: block; }
  .app-shell.mode-guide .main { position: absolute; inset: 0; height: 100%; }
}
:root {
  color-scheme: light;
  --bg: #f7f7f7;
  --canvas: #f7f7f7;
  --surface: #ffffff;
  --surface-raised: #f0f0f0;
  --surface-soft: #f7f7f7;
  --ink: #181818;
  --muted: #686868;
  --line: #e4e4e4;
  --accent: #d5fa44;
  --accent-ink: #171717;
  --action: #181818;
  --action-ink: #ffffff;
  --action-hover: #333333;
  --functional: #181818;
  --selected: #f2f6e5;
  --selected-line: #181818;
  --map: #f0f0f0;
  --park: #e2e2e2;
  --water: #d4d4d4;
  --shadow: 0 12px 32px #1818180c;
  --radius-card: 24px;
  --radius-control: 14px;
  --radius-image: 18px;
  --radius-hero: 24px;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  color: var(--ink);
  background: var(--canvas);
}
html, body { background: var(--canvas); }
/* Every secondary-page canvas is pure white; map/photo content keeps its colors. */
html:has(body.has-page-return),
body.has-page-return { --canvas: #ffffff; background: #ffffff; }
body.has-page-return .rail,
body.has-page-return .profile-page-header,
body.has-page-return .sidebar-header,
body.has-page-return .chat-header,
body.has-page-return .route-subpage-bar { background: #ffffff; }
button, input, textarea, select { font-family: inherit; }
* { scrollbar-color: #c9c9c9 transparent; }
input, textarea { caret-color: var(--ink); }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible,
.profile-screen button:focus-visible,
.profile-screen input:focus-visible,
.route-screen button:focus-visible,
.route-screen input:focus-visible,
.route-import:focus-visible,
.route-control-card:focus-within .route-import,
.persona-card:focus-visible,
.persona-genders button:focus-visible,
.persona-skip:focus-visible,
.persona-confirm:focus-visible,
.assistant-route-card:focus-visible { outline-color: var(--functional); }

.app-shell { border-color: var(--line); border-radius: var(--radius-card); }
.rail { background: #fafafa; }
.brand-mark { background: var(--surface-raised); color: var(--ink); }
.rail-button,
.rail-profile,
.add-button,
.send-button,
.plain-icon,
.chat-info-button,
.back-button,
.modal-close {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
}
.rail-button:hover { background: var(--surface-raised); color: var(--ink); }
.rail-button.active,
.rail-button.active:hover { background: var(--action); color: var(--action-ink); }
.rail-profile.active,
.rail-profile.active:hover { border-color: var(--ink); background: var(--action); box-shadow: 0 0 0 3px #1818180c; }
.rail-profile .rail-avatar { width: 34px; height: 34px; }
.rail-profile.active .rail-avatar { background: var(--accent); color: var(--accent-ink); }
.rail-avatar,
.assistant-status > span,
.suggestion-symbol,
.assistant-message.service .assistant-message-meta::after,
.route-header h1 em,
.route-back,
.route-card-icon,
.route-detail-top span:last-child,
.route-progress strong,
.route-live.active,
.route-map-empty span,
.assistant-team-heading span,
.header-spark,
.conversation-avatar,
.my-avatar,
.message-avatar,
.message-row.own .message-avatar,
.discover-arrow,
.load-more,
.member-avatar,
.profile-avatar-preview,
.profile-screen .profile-persona-art,
.profile-screen .profile-avatar-preview { color: var(--functional); }
.top-left-return:hover,
.persona-inline .persona-skip.top-left-return:hover { border-color: var(--ink); color: var(--ink); }

/* White and neutral surfaces replace the earlier forest/mint UI panels. */
.assistant-screen,
.sidebar,
.sidebar-footer,
.chat,
.chat-header,
.message-scroll,
.composer,
.profile-screen,
.profile-page-header,
.route-tools { background: var(--surface); }
.profile-page-content,
.composer-inner,
.search-wrap,
.route-screen { background: var(--canvas); }
.assistant-suggestions button,
.profile-screen .profile-persona,
.profile-screen .profile-avatar-preview,
.profile-screen .profile-persona-art,
.profile-screen .identity-box,
.route-stats > div,
.route-detail-facts > div { background: var(--surface-soft); }
.modal,
.profile-page-card,
.assistant-team-panel,
.assistant-team-card,
.route-control-card,
.route-detail { border-color: var(--line); border-radius: var(--radius-card); }
.assistant-team-panel,
.assistant-team-card,
.route-control-card,
.route-detail { background: var(--surface); }
.assistant-suggestions button { border-radius: 18px; }
.assistant-suggestions button:hover { border-color: #c9c9c9; background: #f0f0f0; }
.profile-screen .profile-persona,
.profile-screen .profile-persona-art { border-radius: 18px; }
.modal-input,
.profile-screen .modal-input,
.route-place-form input,
.assistant-team-preference select,
.composer-inner,
.search-wrap { border-radius: var(--radius-control); }
.modal-input,
.route-place-form input,
.assistant-team-preference select { background: var(--surface-soft); }
.modal-input:focus,
.profile-screen .modal-input:focus,
.route-place-form input:focus,
.assistant-team-preference select:focus,
.composer-inner:focus-within,
.search-wrap:focus-within { border-color: var(--functional); }
.identity-box,
.profile-screen .identity-box { border-radius: 18px; }

/* Filled actions follow the ZIP's final black/white override. */
.primary-button,
.add-button,
.send-button,
.modal-action,
.profile-screen .modal-action,
.profile-screen #saveAvatar,
.persona-confirm,
.assistant-team-heading button,
.assistant-team-card button,
.assistant-route-followup button,
.route-place-form button,
.route-start,
.route-stop,
.route-map-nav,
.route-map-nav.active {
  border-color: var(--action);
  background: var(--action);
  color: var(--action-ink);
}
.primary-button:hover,
.add-button:hover,
.send-button:hover,
.modal-action:hover,
.profile-screen .modal-action:hover,
.profile-screen #saveAvatar:hover,
.persona-confirm:hover,
.assistant-team-heading button:hover,
.assistant-team-card button:hover,
.assistant-route-followup button:hover,
.route-place-form button:hover,
.route-start:hover,
.route-stop:hover,
.route-map-nav:not(.active):hover,
.route-map-nav.active:hover { border-color: var(--action-hover); background: var(--action-hover); color: #ffffff; }
.primary-button,
.modal-action,
.profile-screen .modal-action,
.profile-screen #saveAvatar,
.persona-confirm,
.assistant-team-heading button,
.assistant-team-card button,
.assistant-team-create,
.assistant-route-followup button,
.route-place-form button,
.route-start,
.route-stop,
.route-map-nav,
.small-button,
.profile-screen .small-button,
.profile-screen .profile-persona button,
.route-import { border-radius: 999px; }
.assistant-team-create,
.small-button,
.profile-screen .small-button,
.profile-screen .profile-persona button,
.route-import { border-color: var(--line); background: #ffffff; color: var(--ink); }
.assistant-team-create:hover,
.small-button:hover,
.profile-screen .small-button:hover,
.profile-screen .profile-persona button:hover,
.route-import:hover { border-color: #b8b8b8; background: #f4f4f4; color: var(--ink); }
.modal-tab.active { border-color: var(--action); background: var(--action); color: #ffffff; }

/* Selected content is readable black; green is a restrained state highlight. */
.conversation-item.selected,
.discover-item:hover,
.member-chip.clickable:hover {
  border-color: #c9d3ae;
  background: var(--selected);
  color: var(--ink);
}
.assistant-message-avatar,
.conversation-avatar.group,
.discover-icon { background: var(--accent); color: var(--accent-ink); }
.assistant-brand-mark { background: var(--action); color: var(--action-ink); }
.assistant-message.user .assistant-message-bubble { border-color: var(--line); background: #f0f0f0; color: var(--ink); }
.message-row.own .message-bubble { border-color: var(--action); background: var(--action); color: #ffffff; }

/* Messages use the same compact page header and neutral controls as profile.
   Keep identity hooks for the existing profile navigation, without a footer. */
.app-shell.mode-messages .sidebar-footer { display: none; }
body.immersive-navigation .app-shell.mode-messages .sidebar-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  min-height: 64px;
  padding: max(10px, env(safe-area-inset-top, 0px)) 20px 10px;
}
.app-shell.mode-messages .sidebar-header > div { flex: 1; min-width: 0; }
.app-shell.mode-messages .sidebar-header .eyebrow,
.app-shell.mode-messages .sidebar-header .header-spark { display: none; }
body.immersive-navigation .app-shell.mode-messages .sidebar-header h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.025em;
}
.app-shell.mode-messages #newButton { flex: none; margin-left: auto; }
.app-shell.mode-messages #newButton .ui-icon { width: 22px; height: 22px; }
.app-shell.mode-messages .search-wrap {
  flex: none;
  height: 44px;
  margin: 8px 20px 0;
  padding: 0 14px;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 22px;
  background: var(--surface-soft);
}
.app-shell.mode-messages .search-wrap:focus-within { border-color: var(--ink); }
.app-shell.mode-messages .search-wrap > .ui-icon { width: 20px; height: 20px; flex: none; }
.app-shell.mode-messages .search-wrap input { font-size: 16px; font-weight: 400; }
.app-shell.mode-messages .sidebar-label {
  margin: 24px 20px 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
}
.app-shell.mode-messages #conversationCount { font-variant-numeric: tabular-nums; }
.app-shell.mode-messages .conversation-list { padding: 0 8px max(12px, env(safe-area-inset-bottom, 0px)); }
.app-shell.mode-messages .conversation-item {
  min-height: 76px;
  padding: 12px 11px;
  gap: 12px;
  border-radius: 14px;
}
.app-shell.mode-messages .conversation-item:not(.selected):hover { background: var(--surface-soft); }
.app-shell.mode-messages .conversation-avatar { flex: none; width: 44px; height: 44px; }
.app-shell.mode-messages .conversation-top strong { font-size: 15px; font-weight: 600; line-height: 22px; }
.app-shell.mode-messages .conversation-top time { font-size: 11px; }
.app-shell.mode-messages .conversation-preview { margin-top: 4px; font-size: 12px; line-height: 18px; }
.app-shell.mode-messages .discover-section { padding: 0 0 max(12px, env(safe-area-inset-bottom, 0px)); }
.app-shell.mode-messages .discover-item { width: calc(100% - 40px); margin-inline: 20px; border-radius: 14px; }

.assistant-header-action:hover,
.assistant-resume:hover { border-color: #c9c9c9; background: #f3f3f3; }
.assistant-header-action.danger:hover { border-color: #edc5ba; background: #fff1ed; }
.assistant-route-card { border-radius: var(--radius-image); background: var(--surface); }
.assistant-route-card:hover { border-color: #b8b8b8; background: var(--surface); }
.assistant-route-card.selected { border-color: var(--ink); background: #f7f9f1; }
.assistant-route-scene { background: #ededed; color: #a6a6a6; }
.assistant-route-basics span,
.assistant-route-fact { border-color: var(--line); background: #f5f5f5; }
.assistant-route-fact { border-radius: 14px; }
.assistant-route-fact-icon { background: #e9e9e9; color: var(--ink); }
.assistant-route-fact.tone-muted .assistant-route-fact-icon { background: #eeeeee; color: var(--muted); }
.assistant-route-select { border-color: var(--action); background: var(--action); color: #ffffff; }
.assistant-route-card.selected .assistant-route-select { border-color: #d8dfc7; background: var(--selected); color: var(--ink); }
.assistant-team-card-top span { border-color: #d8dfc7; background: #f0f5de; color: var(--ink); }
.route-card-icon,
.route-detail-top span:last-child,
.route-map-empty span { border-color: #d9d9d9; background: #eeeeee; color: var(--ink); }
.route-detail-highlights span { background: #f0f0f0; color: var(--muted); }
.route-progress progress { accent-color: var(--accent); }
.route-progress progress::-webkit-progress-value { background: var(--accent); }
.route-progress progress::-moz-progress-bar { background: var(--accent); }
.route-map {
  background:
    repeating-radial-gradient(ellipse at 24% 36%, transparent 0 23px, #b8b8b826 24px 25px, transparent 26px 48px),
    repeating-radial-gradient(ellipse at 94% 100%, transparent 0 31px, #b8b8b81a 32px 33px, transparent 34px 65px),
    #f1f1f1;
}
.route-map-heading > div { border-radius: 18px; }
.route-locate,
.route-ip-locate { border-color: var(--action); background: var(--action); color: #ffffff; }
.route-locate:hover,
.route-ip-locate:hover { border-color: #333333; background: #333333; color: #ffffff; }
.route-zoom { width: 46px; border-color: var(--action); }
.route-zoom button { width: 44px; height: 44px; background: var(--action); color: #ffffff; }
.route-zoom button + button { border-color: #ffffff33; }
.route-zoom button:hover { background: #333333; }

/* The editorial role directory and its geometric assets keep their structure. */
.persona-editorial-feature { border-radius: 18px; background: #f2f2f2; }
.persona-feature-copy > span { border-color: #dddddd; }
.persona-genders button.selected { border-color: var(--ink); background: var(--accent); color: var(--accent-ink); }
.persona-genders button:hover { border-color: #9c9c9c; }
.persona-card:hover { border-bottom-color: #9c9c9c; background: #f7f7f7; }
.persona-card.selected { border-bottom-color: var(--ink); background: var(--selected); }
.persona-card.selected small { color: var(--muted); }
.persona-overlay:not(.persona-inline) .persona-page { border-radius: var(--radius-card); }
.modal-backdrop,
.persona-overlay:not(.persona-inline) { background: rgb(24 24 24 / .22); }

/* Preserve the Figma photograph, white navigation controls, and exact input bar. */
.immersive-nav button { background: #ffffff; color: #222222; }
.immersive-nav button:hover { background: #f3f3f3; }
.immersive-dock #assistantForm .composer-icon:hover,
.immersive-dock #assistantVoice[aria-pressed="true"],
.immersive-dock #assistantMore[aria-expanded="true"] { background: #f2f2f2; }
.assistant-options,
.assistant-photo-preview { border-color: var(--line); color: var(--ink); }
.assistant-options .assistant-location-option,
.assistant-photo-preview > span { color: var(--ink); }
.assistant-options .assistant-location-option input { accent-color: var(--action); }
.assistant-options .assistant-location-option small,
.assistant-options p,
.assistant-photo-preview small,
body.immersive-navigation .assistant-screen.is-chatting .assistant-ai-note { color: var(--muted); }
.assistant-options #assistantResume { border-color: var(--line); background: #f5f5f5; color: var(--ink); }
#assistantPhotoRemove { background: #f2f2f2; color: var(--ink); }
body.immersive-navigation .assistant-screen.is-chatting .immersive-dock #assistantForm { border-color: var(--line); }
.immersive-dock #assistantSend { background: var(--action); color: #ffffff; }
.immersive-dock #assistantSend:hover { background: var(--action-hover); }

@media (max-width: 680px) {
  .app-shell,
  .persona-overlay:not(.persona-inline) .persona-page { border-radius: 0; }
}