/* =====================================================================
   flieva-palette.css: THE Flieva theme (single source of truth)
   Owner decision 17 Oct 2026: one violet accent everywhere, taken from the
   home headline "Clear facts. No middlemen." and the home globe.
     light  #363bc9   dark  #6760f5   - no blue anywhere.
   Dark mode follows the owner's FlieBot design template (deep purple).
   Light mode keeps Flieva's lavender surfaces with the same violet.
   Load this file LAST on every app page. Do not add colours elsewhere:
   use the variables below.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root { --fv-accent:#363bc9; }
html[data-theme="dark"] { --fv-accent:#6760f5; }

html[data-theme="light"] body #app:is(:has(#v-ask.bot-with-history.is-active.is-active), :not(:has(#v-ask.bot-with-history.is-active.is-active))),
html:not([data-theme]) body #app:is(:has(#v-ask.bot-with-history.is-active.is-active), :not(:has(#v-ask.bot-with-history.is-active.is-active))) {
  --fv-accent:#363bc9;
  --fv-accent-strong:#2729af;
  --fv-accent-soft:#363bc915;
  --fv-accent-line:#363bc955;
  --fv-page:#f7f7fa;          /* calm, near-white: violet is only the accent */
  --fv-shell:#ffffff;
  --fv-shell-line:#e9e8f2;
  --fv-surface:#ffffff;
  --fv-surface-2:#f9f8fc;
  --fv-line:#e5e4ef;
  --fv-ink:#11112d;
  --fv-body:#49505d;
  --fv-muted:#69758b;
  --fv-nav:#51495f;
  --fv-nav-active-bg:#edecfc;
  --fv-nav-active-ink:#272d99;
  --fv-globe-line:#363bc922;
  --fv-globe-dot:#363bc912;
  --canvas:var(--fv-surface-2) !important; --surface:var(--fv-surface) !important; --surface-2:#f3f3f8 !important;
  --line:var(--fv-line) !important; --line-2:var(--fv-line) !important;
  --ink:var(--fv-ink) !important; --body:var(--fv-body) !important; --muted:var(--fv-muted) !important;
  --accent:var(--fv-accent) !important; --accent-soft:var(--fv-accent-soft) !important;
  --primary:var(--fv-accent) !important; --on-primary:#fff !important;
}
html[data-theme="dark"] body #app:is(:has(#v-ask.bot-with-history.is-active.is-active), :not(:has(#v-ask.bot-with-history.is-active.is-active))) {
  --fv-accent:#6760f5;
  --fv-accent-strong:#7e78ff;
  --fv-accent-soft:#6760f526;
  --fv-accent-line:#6760f566;
  --fv-page:#1d1b38;          /* template page */
  --fv-shell:#1e1c3c;         /* template sidebar + header */
  --fv-shell-line:#2d2a4f;
  --fv-surface:#252447;       /* template buttons, chips, input */
  --fv-surface-2:#22203f;
  --fv-line:#38365f;
  --fv-ink:#f0efff;
  --fv-body:#d0cdea;
  --fv-muted:#9f9bc7;
  --fv-nav:#d3d0ec;
  --fv-nav-active-bg:#302f5c; /* template active pill */
  --fv-nav-active-ink:#ffffff;
  --fv-globe-line:#6863c466;
  --fv-globe-dot:#837cf01f;
  --canvas:var(--fv-surface-2) !important; --surface:var(--fv-surface) !important; --surface-2:#2b2a50 !important;
  --line:var(--fv-line) !important; --line-2:var(--fv-line) !important;
  --ink:var(--fv-ink) !important; --body:var(--fv-body) !important; --muted:var(--fv-muted) !important;
  --accent:var(--fv-accent) !important; --accent-soft:var(--fv-accent-soft) !important;
  --primary:var(--fv-accent) !important; --on-primary:#fff !important;
  --header-bg:var(--fv-shell) !important; --black-panel:var(--fv-surface) !important; --panel-ink:var(--fv-ink) !important;
}

/* ---------- 2. Shell: same on every page, FlieBot included ---------- */
html[data-theme] body,
html[data-theme] body #app:is(:has(#v-ask.bot-with-history.is-active.is-active), :not(:has(#v-ask.bot-with-history.is-active.is-active))) {
  background:var(--fv-page) !important;
  color:var(--fv-ink) !important;
}
html[data-theme] body #app > .flieva-header,
html[data-theme] body #app:has(#v-ask.is-active) > .flieva-header,
html[data-theme] body #app:has(#v-ask.bot-with-history.is-active) > .flieva-header {
  background:var(--fv-shell) !important; background-image:none !important;
  color:var(--fv-ink) !important; border-color:var(--fv-shell-line) !important;
}
html[data-theme] body #app > .flieva-header .flieva-home span,
html[data-theme] body #app:has(#v-ask.bot-with-history.is-active) > .flieva-header .flieva-home span { color:var(--fv-ink) !important }
html[data-theme] body #app > .flieva-header :is(.design-control, .iconbtn, .header-actions > button:not(.profile-button), .theme-toggle) {
  background:var(--fv-surface) !important; color:var(--fv-ink) !important; border-color:var(--fv-line) !important;
}

/* Sidebar (desktop) + bottom bar (phone) */
html[data-theme] body #app > .bottomnav,
html[data-theme] body #app #bn,
html[data-theme] body #app:has(#v-ask.is-active) > .bottomnav,
html[data-theme] body #app:has(#v-ask.bot-with-history.is-active) #bn {
  background:var(--fv-shell) !important; background-image:none !important; border-color:var(--fv-shell-line) !important;
}
html[data-theme] body #app #bn .bn,
html[data-theme] body #app:has(#v-ask.bot-with-history.is-active) #bn .bn {
  color:var(--fv-nav) !important; background:transparent !important; border:0 !important;
}
html[data-theme] body #app #bn .bn svg { color:inherit !important }

/* ACTIVE STATE (template): plain soft violet pill, no edge line. Same on every page. */
html[data-theme] body #app #bn .bn.is-active,
html[data-theme] body #app:has(#v-ask.is-active) #bn .bn.is-active,
html[data-theme] body #app:has(#v-ask.bot-with-history.is-active) #bn .bn.is-active {
  background:var(--fv-nav-active-bg) !important; background-image:none !important;
  color:var(--fv-nav-active-ink) !important;
  border:0 !important; border-radius:12px !important;
  box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  font-weight:650 !important;
}
html[data-theme] body #app .bottomnav .bn.is-active { color:var(--fv-accent) !important; background:var(--fv-accent-soft) !important }
@media (hover:hover){ html[data-theme] body #app #bn .bn:not(.is-active):hover { background:var(--fv-accent-soft) !important } }

/* "Big dreams travel further." card (template: violet to pink) */
html[data-theme] body #app #bn .dashboard-dream {
  background:linear-gradient(135deg,#6b4fe0 0%,#966ee6 60%,#d28bd6 100%) !important;
  border:0 !important; color:#fff !important; box-shadow:0 10px 26px #363bc933 !important;
}
html[data-theme] body #app #bn .dashboard-dream :is(small,p,span) { color:#ffffffdd !important }

/* Page bar with back and close */
html[data-theme] body #app .view:not(#v-home):not(#v-ask) > .topbar {
  background:var(--fv-surface) !important; color:var(--fv-ink) !important; border-color:var(--fv-line) !important;
}
html[data-theme] body #app :is(.page-close, .page-back, .backbtn) {
  background:var(--fv-surface) !important; color:var(--fv-ink) !important; border-color:var(--fv-line) !important;
}

/* ---------- 3. Controls on every page (Jobs, Scholarships, Tools, Plans...) ---------- */
html[data-theme] body #app :is(.btn--primary, .bigbtn, .btn-primary, #authSubmit, .visitor-primary) {
  background:var(--fv-accent) !important; background-image:none !important;
  border-color:var(--fv-accent) !important; color:#fff !important; box-shadow:0 8px 22px var(--fv-accent-soft) !important;
}
html[data-theme] body #app :is(.chip, .mjt, .acc) {
  background:var(--fv-surface) !important; background-image:none !important;
  color:var(--fv-ink) !important; border-color:var(--fv-line) !important;
}
html[data-theme] body #app :is(.chip.is-sel, .chip[aria-pressed="true"], .chip[aria-selected="true"]) {
  background:var(--fv-accent) !important; color:#fff !important; border-color:var(--fv-accent) !important;
}
html[data-theme] body #app :is(.field input, .field select, .field textarea, .design-filter summary) {
  background:var(--fv-surface) !important; color:var(--fv-ink) !important; border-color:var(--fv-line) !important;
}
html[data-theme] body #app .design-filter-options { background:var(--fv-surface) !important; border-color:var(--fv-line) !important }
html[data-theme] body #app .design-filter-options button {
  background:var(--fv-surface-2) !important; color:var(--fv-ink) !important; border-color:var(--fv-line) !important;
}
html[data-theme] body #app .design-filter-options button[aria-pressed="true"] {
  background:var(--fv-accent-soft) !important; border-color:var(--fv-accent) !important; color:var(--fv-ink) !important;
}
html[data-theme] body #app :is(.card, .journey-card, .plan-card, .plan-purpose-card, .opportunity-card, .vault-row, .tool) {
  border-color:var(--fv-line) !important;
}
html[data-theme] body #app :is(input[type=checkbox], input[type=radio], input[type=range], progress) { accent-color:var(--fv-accent) }
html[data-theme] body #app :focus-visible { outline-color:var(--fv-accent) !important }

/* ---------- 4. FlieBot (owner's design template) ---------- */
html[data-theme] body #app #v-ask.bot-with-history.is-active,
html[data-theme] body #app #v-ask.bot-with-history.is-active .chatb {
  background:var(--fv-page) !important; background-image:none !important; color:var(--fv-ink) !important;
}
/* Globe arc behind the chat */
html[data-theme] body #app #v-ask.bot-with-history.is-active::before {
  display:block !important; content:"" !important; position:absolute !important; z-index:-1 !important; pointer-events:none !important;
  width:min(80vw,1240px) !important; height:min(80vw,1240px) !important;
  left:50% !important; bottom:auto !important; top:min(36vh,420px) !important; transform:translateX(-50%) !important;
  border:1px solid var(--fv-globe-line) !important; border-radius:50% !important;
  background:radial-gradient(circle at 50% 35%, var(--fv-accent-soft), transparent 60%), radial-gradient(circle, var(--fv-globe-dot) 1.2px, transparent 1.6px) !important;
  background-size:100% 100%, 18px 18px !important;
  box-shadow:0 -12px 60px var(--fv-accent-soft) !important;
}
/* Top bar: FlieBot name left, actions right */
html[data-theme] body #app #v-ask.bot-with-history.is-active > .topbar {
  background:var(--fv-page) !important; color:var(--fv-ink) !important; border-color:var(--fv-shell-line) !important;
}
html[data-theme] body #app #v-ask.bot-with-history.is-active > .topbar > .brand { color:var(--fv-ink) !important; order:0 !important; margin-right:auto !important }
html[data-theme] body #app #v-ask.bot-with-history.is-active .fliebot-reference-actions { order:1 !important; margin-left:auto !important }
html[data-theme] body #app #v-ask.bot-with-history .fliebot-reference-actions button,
html[data-theme] body #app #v-ask.bot-with-history .ask-prompts button,
html[data-theme] body #app #v-ask.bot-with-history > .topbar > .topbar-export {
  background:var(--fv-surface) !important; color:var(--fv-ink) !important;
  border:1px solid var(--fv-line) !important; box-shadow:none !important;
}
html[data-theme] body #app #v-ask.bot-with-history .fliebot-reference-actions button:last-child {
  background:var(--fv-accent) !important; border-color:var(--fv-accent) !important; color:#fff !important; font-weight:650 !important;
}
/* Messages */
html[data-theme] body #app #v-ask.bot-with-history.is-active .msg.bot,
html[data-theme] body #app #v-ask.bot-with-history.is-active .chatb :not(.usr):not(.bot-read-aloud) { color:var(--fv-ink) !important }
html[data-theme] body #app #v-ask.bot-with-history.is-active .msg.usr { box-shadow:none !important }
/* Chat history drop-down */
html[data-theme] body #app #v-ask.bot-with-history .bot-history-panel {
  background:var(--fv-shell) !important; color:var(--fv-ink) !important; border-color:var(--fv-line) !important;
}
html[data-theme] body #app #v-ask.bot-with-history .bot-history-panel :is(h3,h4,p) { color:var(--fv-muted) !important }
html[data-theme] body #app #v-ask.bot-with-history .bot-history-panel input[type=search] {
  background:var(--fv-surface) !important; color:var(--fv-ink) !important; border-color:var(--fv-line) !important;
}
html[data-theme] body #app #v-ask.bot-with-history .bot-history-panel :is(.bot-history-item, .bot-menu-files > button) { color:var(--fv-ink) !important }
html[data-theme] body #app #v-ask.bot-with-history .bot-history-panel .bot-history-item[aria-current=true] {
  background:var(--fv-nav-active-bg) !important; color:var(--fv-nav-active-ink) !important; border-color:transparent !important;
}
/* Input bar */
html[data-theme] body #app #v-ask.bot-with-history .chatin {
  background:var(--fv-surface) !important; border:1px solid var(--fv-line) !important; box-shadow:0 10px 30px #00000014 !important;
}
html[data-theme] body #app #v-ask.bot-with-history .chatin input { color:var(--fv-ink) !important; background:transparent !important }
html[data-theme] body #app #v-ask.bot-with-history .chatin input::placeholder { color:var(--fv-muted) !important; opacity:1 !important }
html[data-theme] body #app #v-ask.bot-with-history .chatin button:not(#chatSend):not(#attBtn) {
  background:var(--fv-surface-2) !important; color:var(--fv-ink) !important; border-color:var(--fv-line) !important;
}
html[data-theme] body #app #v-ask.bot-with-history .chat-privacy { color:var(--fv-muted) !important }
/* Violet for every FlieBot action and identity mark */
html[data-theme] body #app #v-ask.bot-with-history .chatin #chatSend,
html[data-theme] body #app #v-ask.bot-with-history .chatin #attBtn,
html[data-theme] body #app #v-ask.bot-with-history .bot-history-panel .bot-new,
html[data-theme] body #app #v-ask.bot-with-history.is-active .msg.usr,
html[data-theme] body #app #v-ask.bot-with-history.is-active > .topbar > .brand::before,
html[data-theme] body #app #v-ask.bot-with-history.is-active .msg.bot::before {
  background:var(--fv-accent) !important; background-image:none !important; border-color:var(--fv-accent) !important; color:#fff !important;
}
html[data-theme] body #app #v-ask.bot-with-history.is-active .msg.bot .bot-read-aloud { background:var(--fv-accent-soft) !important; color:var(--fv-accent) !important; border-color:transparent !important }
html[data-theme] body #app #v-ask.bot-with-history .bot-voice-status:empty, html[data-theme] body #app #v-ask.bot-with-history #chatDailyBudget:empty { display:none !important }

/* ---------- 5. Details ---------- */
/* Keep the Big dreams card identical on FlieBot too */
html[data-theme] body #app:is(:has(#v-ask.bot-with-history.is-active.is-active), :not(:has(#v-ask.bot-with-history.is-active.is-active))) #bn .dashboard-dream {
  background:linear-gradient(135deg,#6b4fe0 0%,#966ee6 60%,#d28bd6 100%) !important;
  border:0 !important; color:#fff !important;
}
/* Let the globe arc show through the chat area */
html[data-theme] body #app #v-ask.bot-with-history.is-active .chatb { background:transparent !important }
/* Page scrollbar in the Flieva violet (was gold) */
html[data-theme] body .flieva-edge-scrollbar__thumb { background:var(--fv-accent) !important; box-shadow:none !important }

/* ---------- 6. Pages without the app shell (About, Support, Privacy, Terms, Refunds...) ---------- */
html[data-theme="light"], html:not([data-theme]) {
  --canvas:#f7f7fa !important; --surface:#ffffff !important; --line:#e5e4ef !important;
  --ink:#11182d !important; --body:#49505d !important; --muted:#69758b !important;
  --accent:#363bc9 !important; --primary:#363bc9 !important; --header-bg:#ffffff !important;
  --fv-page:#f7f7fa; --fv-ink:#11182d;
}
html[data-theme="dark"] {
  --canvas:#1d1b38 !important; --surface:#252447 !important; --line:#38365f !important;
  --ink:#f0efff !important; --body:#d0cdea !important; --muted:#9f9bc7 !important;
  --accent:#6760f5 !important; --primary:#6760f5 !important; --header-bg:#1e1c3c !important;
  --fv-page:#1d1b38; --fv-ink:#f0efff;
}

/* ---------- 7. Finishing ---------- */
/* Dark-mode home globe: same violet family as the light globe */
html[data-theme="dark"] body #v-home .new-globe { filter:hue-rotate(6deg) saturate(1.05) !important }
/* Icons inside violet buttons stay white */
html[data-theme] body #app #v-ask .chatin :is(#attBtn, #chatSend) :is(svg, path, line, polyline, circle) { color:#fff !important; stroke:#fff !important }
html[data-theme] body #app #v-ask .chatin :is(#attBtn, #chatSend) { color:#fff !important }
/* Footer area matches the page */
html[data-theme] body #app :is(.site-footer, .bottom-footer) { background:var(--fv-page) !important; border-color:var(--fv-shell-line) !important }
html[data-theme] { background:var(--fv-page) }

/* Home globe: show the globe only, no box around it */
html[data-theme="dark"] body #v-home .new-globe { mix-blend-mode:lighten; background-color:transparent !important;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent) }
html[data-theme="light"] body #v-home .new-globe { mix-blend-mode:darken; background-color:transparent !important;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent) }

/* Light home globe: blue-violet to sit with the blue logo */
html[data-theme="light"] body #v-home .new-globe { filter:hue-rotate(-14deg) saturate(1.05) !important }

/* Phone menu button is in the page from the start, so the header never grows after load.
   Mirrors the late-injected styling exactly (same size), hidden on desktop. */
.mobile-page-menu{display:none}
@media(max-width:899px){.flieva-header>.mobile-page-menu{display:block;flex-basis:100%;width:100%;text-align:left;padding:8px 12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;font-size:13px;min-height:36px}}

/* Footer text: enough contrast in both themes */
html[data-theme] body .site-footer .flieva-social-links>span,
html[data-theme] body .site-footer summary{color:var(--fv-body,#49505d)!important}

/* Phones load a 960px globe (about a quarter of the bytes) instead of the 1927px desktop image */
@media (max-width:899px){
  html body #v-home .new-globe{background-image:url('/dashboard-globe-960.webp?v=1')!important}
  html body #v-home .new-globe::before{background-image:url('/dashboard-globe-960.webp?v=1')!important}
  html body #app .pagehead::after{background-image:url('/dashboard-globe-960.webp?v=1')!important}
}

/* Signed-out home on phones: start with the header's final padding so it does not grow after load */
@media (max-width:700px){
  html body #app.app:not(.in):has(#v-home.is-active) > .flieva-header{padding-top:14px!important;padding-bottom:14px!important}
}

/* Globe image from the first paint. Zero specificity (:where) so the design script's later rules still win. */
:where(html[data-theme="dark"] #v-home .new-globe){background:url("/dashboard-globe.webp") center top/100% auto no-repeat}
:where(html[data-theme="light"] #v-home .new-globe)::before{content:"";position:absolute;inset:0;background:url('/dashboard-globe.webp') center top/100% auto no-repeat;filter:invert(1) hue-rotate(180deg) saturate(.7);mix-blend-mode:multiply;opacity:.8;mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 85%,transparent);z-index:-1}

/* Globe height from the first paint: the same final sizes the late design script applies */
html body #v-home .new-globe{height:clamp(145px,22vw,220px)!important}
@media (max-width:760px){html body #v-home .new-globe{height:clamp(130px,26vw,190px)!important}}
@media (max-width:520px){html body #v-home .new-globe{height:140px!important}}