/* ==========================================================================
   MindTrip in-webview theme
   Scoped to .mindtrip-ui, applied to the whole .device on every Inspiration
   screen. Everything inside the simulated MindTrip webview is a different
   product's UI, not ours — it shouldn't wear the HHI brand skin (Meta Serif
   Pro, Noah, Palmetto green) that the rest of this prototype now uses. Our
   own chrome around it — the real .site-header/logo above and .nav-bar
   below (see .webview-embed in style.css) — is untouched here on purpose:
   it's still our chrome, just wrapped around someone else's screen.

   Real MindTrip tokens (the Inter typeface, their blue accent) were pulled
   from mindtrip.ai's own compiled CSS on Sept 10, 2026. Anything below
   without that kind of confident source — the muted-gray and border
   values — is a reasonable, unscraped default, called out where it matters.

   How this works: every component below (.chat-*, .mt-*, .rec-card,
   .webview-chrome-*, plus the shared .tag-pill/.section-label/.page-title/
   .btn-*/.placeholder-block classes reused inside a MindTrip screen) is
   restated here with a selector scoped under .mindtrip-ui, pointing at the
   --mt-* tokens defined below instead of the shared HHI tokens the base
   rule in style.css uses. Higher specificity (two classes, not one) wins
   regardless of load order, so nothing in style.css itself needed to
   change — same one-file-swap principle as the HHI reskin, just scoped
   this time instead of global. .flag (dev-only annotation chrome) is
   deliberately left alone — it's review tooling, not part of either
   product's actual UI. ========================================================================== */

.mindtrip-ui {
  --mt-font-heading: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mt-font-body: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mt-color-text: #1A192B;
  --mt-color-text-muted: #6B7280; /* not scraped — a plain muted gray, no equivalent token was identifiable in their bundle */
  --mt-color-bg: #FFFFFF;
  --mt-color-surface: #F8F8F8;
  --mt-color-border: #E2E2E2; /* not scraped — matches the general lightness of light-gray values found in their CSS */
  --mt-color-accent: #22A7E4;
  --mt-color-accent-dark: #183A99;
  --mt-radius: 14px; /* a modern, rounder chat-app radius — distinct from HHI's near-flat 3px default */
  --mt-radius-pill: 999px;
}

/* System-level in-app-browser chrome (the toolbar showing the MINDTRIP.AI
   URL) — neutral, not MindTrip's own branding, since this represents the
   OS's webview wrapper, not their product. Kept dark/neutral rather than
   HHI's Pine-tinted gray-900. */
.mindtrip-ui .webview-chrome-topbar { background: #1A1A1A; }
.mindtrip-ui .webview-chrome-urlbar { background: #333333; font-family: var(--mt-font-body); }

/* ---- Chat UI ---- */
.mindtrip-ui .chat-body { background: var(--mt-color-bg); }
.mindtrip-ui .chat-close { background: var(--mt-color-text); }
.mindtrip-ui .chat-title { font-family: var(--mt-font-heading); font-weight: 700; color: var(--mt-color-text); }
.mindtrip-ui .chat-msg .avatar { background: var(--mt-color-accent); }
.mindtrip-ui .chat-msg.user .avatar { background: var(--mt-color-surface); color: var(--mt-color-text); }
.mindtrip-ui .chat-msg p { font-family: var(--mt-font-body); color: var(--mt-color-text); }
.mindtrip-ui .chat-input {
  background: var(--mt-color-surface);
  border: 1px solid var(--mt-color-border);
  border-radius: var(--mt-radius-pill);
  color: var(--mt-color-text-muted);
  font-family: var(--mt-font-body);
}

/* ---- Recommendation cards, tabs, hero, FAB, own-tabbar ---- */
.mindtrip-ui .rec-card { border-top-color: var(--mt-color-border); }
.mindtrip-ui .rec-card-head { font-family: var(--mt-font-body); }
.mindtrip-ui .rec-card-meta { color: var(--mt-color-text-muted); font-family: var(--mt-font-body); }
.mindtrip-ui .rec-card p { font-family: var(--mt-font-body); color: var(--mt-color-text); }
.mindtrip-ui .mt-tabs { border-bottom-color: var(--mt-color-border); }
.mindtrip-ui .mt-tab { font-family: var(--mt-font-body); color: var(--mt-color-text-muted); }
.mindtrip-ui .mt-tab.active { color: var(--mt-color-accent-dark); border-bottom-color: var(--mt-color-accent-dark); }
.mindtrip-ui .mt-hero-overlay p { font-family: var(--mt-font-heading); font-weight: 700; }
.mindtrip-ui .mt-byline { color: var(--mt-color-text-muted); font-family: var(--mt-font-body); }
.mindtrip-ui .mt-fab {
  background: var(--mt-color-accent); color: #fff; border-radius: var(--mt-radius-pill);
  font-family: var(--mt-font-body); font-weight: 600; letter-spacing: 0; text-transform: none;
}
.mindtrip-ui .mt-own-tabbar { border-top-color: var(--mt-color-border); }
.mindtrip-ui .mt-own-tabbar span { color: var(--mt-color-text-muted); font-family: var(--mt-font-body); }
.mindtrip-ui .mt-status-icon { background: var(--mt-color-surface); color: var(--mt-color-accent); }
.mindtrip-ui .mt-status p.item-title,
.mindtrip-ui .mt-status p.item-caption { font-family: var(--mt-font-body); color: var(--mt-color-text); }

/* ---- Shared HHI components, reused inside a MindTrip screen ---- */
.mindtrip-ui .tag-pill {
  background: var(--mt-color-accent); color: #fff;
  font-family: var(--mt-font-body); font-weight: 600; letter-spacing: 0; text-transform: none;
  border-radius: var(--mt-radius-pill);
}
.mindtrip-ui .section-label {
  font-family: var(--mt-font-body); font-weight: 700; letter-spacing: 0; text-transform: none;
  color: var(--mt-color-text);
}
.mindtrip-ui .page-title { font-family: var(--mt-font-heading); font-weight: 700; color: var(--mt-color-text); }
.mindtrip-ui .placeholder-block {
  background: linear-gradient(135deg, #F0F0F0, #D9D9D9); /* both scraped values from mindtrip.ai's own CSS */
  color: var(--mt-color-text-muted);
  border-radius: var(--mt-radius);
}
/* .mt-hero .placeholder-block in style.css intentionally zeroes the radius
   (a full-bleed hero image, flush to the screen edges) — restated here at
   matching specificity so this stylesheet's later load order doesn't
   silently round it back off. */
.mindtrip-ui .mt-hero .placeholder-block { border-radius: 0; }
.mindtrip-ui .btn { font-family: var(--mt-font-body); letter-spacing: 0; text-transform: none; }
.mindtrip-ui .btn-dark { background: var(--mt-color-accent); color: #fff; border-radius: var(--mt-radius-pill); }
.mindtrip-ui .btn-outline { background: transparent; color: var(--mt-color-accent-dark); border: 1px solid var(--mt-color-accent-dark); border-radius: var(--mt-radius-pill); }

/* ---- Image placeholders: plain gray gradient ONLY — no exceptions ----
   A pastel-cover-plus-icon treatment (.mt-cover-*, one flat brand color
   per guide theme with a themed SVG icon) and a letter-avatar treatment
   (.mt-avatar, a colored square with a business initial, for
   recommendation cards) were both tried here and explicitly rolled back
   per client direction: every MindTrip image placeholder is the plain
   .placeholder-block gray gradient defined above, full stop.
   DO NOT reintroduce pastels, icons, or letter-avatars on any MindTrip
   image placeholder unless specifically instructed to — this is a
   standing rule, not a one-off preference for whichever screen prompted
   it. If asked to revisit this, the two classes above (their exact CSS
   is in this file's git history) are the starting point, not a redesign
   from scratch. */