/* Brand foundation from the supplied editable SVG package.
   A final layer over the existing product; no navigation or data changes. */
:root {
  --brand-ink: #20251f;
  --brand-green: #d5fa44;
  --brand-surface: #f4f6f3;
  --brand-white: #ffffff;
  --brand-muted: #70786c;
  --brand-muted-on-surface: #626c5c;
  --brand-line: #d9dfd4;
  --bg: var(--brand-surface);
  --canvas: var(--brand-surface);
  --surface: var(--brand-white);
  --surface-raised: var(--brand-surface);
  --surface-soft: var(--brand-surface);
  --ink: var(--brand-ink);
  --muted: var(--brand-muted);
  --line: var(--brand-line);
  --accent: var(--brand-green);
  --accent-ink: var(--brand-ink);
  --action: var(--brand-ink);
  --action-ink: var(--brand-white);
  --action-hover: #354031;
  --functional: var(--brand-ink);
  --selected: var(--brand-green);
  --selected-line: transparent;
  --shadow: 0 8px 28px rgb(32 37 31 / .06);
  --radius-card: 20px;
  --radius-control: 14px;
  --radius-image: 20px;
}
body, button, input, textarea, select {
  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}
body { color: var(--brand-ink); }
::selection { background: var(--brand-green); color: var(--brand-ink); }
:is(button, a, input, textarea, select):focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 3px;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand-ink); }

/* Brand marks keep the proportions and strokes of the supplied artwork. */
.brand-mark { padding: 0; overflow: hidden; border: 0; border-radius: 13px; background: var(--brand-green); }
.brand-mark > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.rail .rail-button { border: 0; color: var(--brand-muted); box-shadow: none; }
.rail .rail-button:hover { background: var(--brand-surface); color: var(--brand-ink); }
.rail .rail-button.active, .rail .rail-button.active:hover {
  background: var(--brand-green); color: var(--brand-ink); transform: none;
}
.assistant-message-avatar.brand-avatar,
.app-shell.mode-messages .assistant-record-avatar,
#teamPanel .ts-notice-mark.brand-avatar {
  display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: var(--brand-green); color: var(--brand-ink);
}
.brand-avatar > img { display: block; width: 90%; height: 90%; object-fit: contain; }
.has-persona:not(.has-upload) > img,
.pe-avatar-preview:not(.has-upload) > img,
.member-avatar:not(.has-upload) > img { filter: none; }
.pc-avatar:not(.pc-avatar-uploaded) > img { filter: none; }
.pc-avatar > .ui-icon { width: 40px; height: 40px; }
.top-left-return,
.route-guide .guide-return,
.persona-inline .persona-skip.top-left-return {
  border-color: transparent; background: var(--brand-surface); color: var(--brand-ink); box-shadow: none;
}
.top-left-return:hover, .route-guide .guide-return:hover {
  border-color: transparent; background: #e9ede5; color: var(--brand-ink);
}
#personaOverlay .persona-skip.top-left-return {
  border-color: transparent; background: var(--brand-surface); color: var(--brand-ink);
}

/* Scenic home: airy type, original logo, solid controls over photography. */
body.scene-home #assistantWelcome .assistant-kicker {
  display: block; width: fit-content; margin: 0 auto 20px; padding: 0;
  line-height: 1; letter-spacing: 0; text-indent: 0;
}
body.scene-home .home-wordmark {
  display: block; width: 104px; height: auto; margin: 0;
}
body.scene-home #assistantWelcome h1 {
  color: var(--brand-ink); font-weight: 600; line-height: 1.35; letter-spacing: -.025em;
}
body.scene-home #assistantWelcome .assistant-subtitle {
  margin-top: 16px; color: #626c5c; font-size: 14px; line-height: 24px; letter-spacing: 0;
  text-wrap: balance;
}
body.scene-home .immersive-nav button {
  border: 0; background: var(--brand-white); color: var(--brand-ink); box-shadow: none;
}
body.scene-home .immersive-nav button:hover { background: var(--brand-green); }
body.scene-home .immersive-nav #homeRecordsButton {
  font-size: 12px; font-weight: 600; background: transparent;
}
body.scene-home .immersive-nav #homeRecordsButton:hover { background: var(--brand-surface); }
body.scene-home .immersive-dock #assistantSuggestions { gap: 6px; margin-bottom: 12px; }
body.scene-home .immersive-dock #assistantSuggestions button {
  gap: 5px; min-height: 44px; height: auto; padding: 9px 5px;
  border: 0; border-radius: 999px; background: var(--brand-ink); color: var(--brand-white);
  font-size: 12px; font-weight: 500; line-height: 20px; box-shadow: none;
}
body.scene-home .immersive-dock #assistantSuggestions button::before { display: none; }
body.scene-home .immersive-dock #assistantSuggestions button:hover {
  background: #354031; transform: none;
}
body.scene-home .immersive-dock #assistantSuggestions button:focus-visible { outline-color: var(--brand-green); }
body.scene-home .immersive-dock #assistantSuggestions button > :is(img,svg) { width: 15px; height: 15px; }
.immersive-dock #assistantForm {
  color: var(--brand-ink); box-shadow: 0 4px 20px rgb(32 37 31 / .06);
}
.immersive-dock #assistantForm:focus-within { box-shadow: 0 0 0 2px var(--brand-ink); }
.immersive-dock #assistantForm .composer-icon, .immersive-dock #assistantInput { color: var(--brand-ink); }
.immersive-dock #assistantInput::placeholder { color: var(--brand-muted); }
.immersive-dock #assistantSend, #messageForm #sendButton {
  border: 0; background: var(--brand-ink); color: var(--brand-white); box-shadow: none;
}
.immersive-dock #assistantSend:hover, #messageForm #sendButton:not(:disabled):hover { background: var(--action-hover); }
.immersive-dock #assistantForm .composer-icon:hover { background: var(--brand-surface); }
.immersive-dock #assistantVoice[aria-pressed="true"],
.immersive-dock #assistantMore[aria-expanded="true"] { background: var(--brand-green); color: var(--brand-ink); }

/* Chat uses the same fill-first surfaces as profile, routes and teams. */
.app-shell.mode-messages .sidebar-header h1,
.assistant-conversation-heading .assistant-brand strong,
.chat-header h2 { color: var(--brand-ink); font-size: 18px; line-height: 26px; font-weight: 600; }
.app-shell.mode-messages .search-wrap { border: 0; background: var(--brand-surface); color: var(--brand-muted-on-surface); }
.app-shell.mode-messages .conversation-record-heading { color: var(--brand-muted); font-size: 12px; font-weight: 500; }
.app-shell.mode-messages .conversation-item { border: 0; border-radius: 16px; box-shadow: none; }
.app-shell.mode-messages .conversation-item:hover { background: var(--brand-surface); }
.app-shell.mode-messages .conversation-item.selected,
.app-shell.mode-messages .conversation-item.selected:hover { background: var(--brand-green); }
.app-shell.mode-messages .conversation-item.selected :is(.conversation-preview, time) { color: #49513b; }
.app-shell.mode-messages .conversation-record-empty p,
.app-shell.mode-messages .conversation-record-group .sidebar-empty { color: var(--brand-muted); font-size: 13px; line-height: 21px; }
.app-shell.mode-messages .conversation-record-empty button { background: var(--brand-surface); color: var(--brand-ink); }
.assistant-message .assistant-message-bubble,
.message-row:not(.own) .message-bubble {
  border: 0; border-radius: 4px 18px 18px 18px;
  background: var(--brand-surface); color: var(--brand-ink); box-shadow: none; line-height: 1.75;
}
.assistant-message.user .assistant-message-bubble,
.message-row.own .message-bubble {
  border: 0; border-radius: 18px 4px 18px 18px;
  background: var(--brand-ink); color: var(--brand-white); box-shadow: none;
}
.assistant-message-meta { color: var(--brand-muted); font-size: 12px; }
.assistant-history-state { padding: 32px 8px; color: var(--brand-muted); text-align: center; font-size: 14px; line-height: 24px; }
.assistant-history-state p { margin: 0; }
.assistant-history-state button { min-height: 44px; margin-top: 16px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--brand-surface); color: var(--brand-ink); font: inherit; }
.assistant-history-state button:hover { background: #e9ede5; }
.assistant-message.user .assistant-message-avatar { background: var(--brand-surface); color: var(--brand-ink); }
#messageForm .composer-inner { border: 0; background: var(--brand-surface); border-radius: 28px; box-shadow: none; }
#messageForm .composer-inner:focus-within { box-shadow: 0 0 0 2px var(--brand-ink); }
#messageForm textarea { color: var(--brand-ink); }
#messageForm textarea::placeholder { color: var(--brand-muted-on-surface); }
.chat-info-button { background: var(--brand-surface); color: var(--brand-ink); border: 0; }
.empty-state .landscape { width: 128px; height: 114px; background: none; box-shadow: none; }
.empty-state .landscape img { width: 128px; height: 114px; object-fit: contain; }
.empty-state h2 { color: var(--brand-ink); font-size: 28px; font-weight: 650; line-height: 1.4; }
.empty-state :is(.empty-kicker,.empty-description) { color: var(--brand-muted); }
.primary-button, .modal form > .modal-action[type="submit"] {
  min-height: 48px; border: 0; border-radius: 999px; background: var(--brand-ink); color: var(--brand-white); box-shadow: none;
}
.primary-button:hover, .modal form > .modal-action[type="submit"]:not(:disabled):hover { background: var(--action-hover); }
.modal { border: 0; border-radius: 24px; background: var(--brand-white); color: var(--brand-ink); }
.modal-input { border: 0; border-radius: 14px; background: var(--brand-surface); color: var(--brand-ink); }
.modal-tab.active, .modal-tab.active:hover { background: var(--brand-green); color: var(--brand-ink); border-color: transparent; }
.route-start, .route-map-nav, .route-place-form button {
  background: var(--brand-ink); color: var(--brand-white); border-color: transparent;
}
.route-start:hover, .route-map-nav:hover, .route-place-form button:hover { background: var(--action-hover); }

@media (min-width: 681px) {
  body.scene-home #assistantWelcome .assistant-kicker { margin-bottom: 24px; }
  body.scene-home .immersive-dock #assistantSuggestions button { font-size: 13px; }
}
@media (max-width: 360px) {
  body.scene-home #assistantWelcome .assistant-kicker { margin-bottom: 16px; }
}
@media (max-height: 600px) and (min-width: 681px) {
  body.scene-home .home-wordmark { width: 80px; }
  body.scene-home #assistantWelcome .assistant-kicker { margin-bottom: 8px; }
  body.scene-home #assistantWelcome .assistant-subtitle { margin-top: 10px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .rail-button, .immersive-dock #assistantSuggestions button { transition: none; }
}