/* chatpvt-header fallback shell: the pre-upgrade, server-renderable header.
 *
 * First-party hosts (www, account) SSR this shell as light-DOM children of
 * <chatpvt-header> so the bar, brand lockup, nav links, and (when the host
 * knows it server-side) the greeting are present from the first byte of HTML
 * and remain functional without JavaScript. The moment the component module
 * executes and attaches its shadow root, the light DOM stops rendering and the
 * shadow render takes over pixel-for-pixel; the :defined rule below is belt
 * and braces for engines that keep painting slotted-less light DOM.
 *
 * Geometry and colours MIRROR src/chatpvt-header.styles.ts (the shadow
 * styles). Keep the two in sync; the canonical host snippet lives in
 * README.md ("First-party adoption").
 *
 * Signed-in label switching before upgrade:
 *   - hosts that SSR the auth state add the `cpvt-fb--in` class on the shell
 *     (the account portal knows the session server-side);
 *   - static hosts rely on the html.auth-hint class their pre-paint hint
 *     reflector already sets (www's auth-hint.js).
 */

chatpvt-header {
  display: block;
}
chatpvt-header:defined > .cpvt-fb {
  display: none;
}

.cpvt-fb {
  position: relative;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1rem;
  box-sizing: border-box;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  /* Opaque charcoal base under the glass: the bar is the BRAND bar and
     must read identically over any page scheme (2026-07-10). */
  background:
    radial-gradient(120% 180% at 8% 0%, oklch(0.86 0.2 172 / 0.1), transparent 52%),
    radial-gradient(110% 160% at 88% -20%, oklch(0.8 0.18 215 / 0.12), transparent 58%),
    linear-gradient(180deg, oklch(0.17 0.017 200 / 0.78), oklch(0.105 0.012 205 / 0.52)),
    linear-gradient(180deg, oklch(0.16 0.016 200), oklch(0.1 0.012 205));
  color-scheme: dark;
  /* Hairline as an inset shadow, never a border: a border would eat 1px of
     the 76px box and float the lockup (the 2026-07-09 drift). */
  box-shadow:
    inset 0 1px 0 0 oklch(1 0 0 / 0.08),
    inset 0 -1px 0 0 oklch(0.86 0.2 172 / 0.18),
    inset 0 -2px 0 0 oklch(0 0 0 / 0.38),
    0 18px 52px -34px oklch(0 0 0 / 0.9);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}
.cpvt-fb *,
.cpvt-fb *::before,
.cpvt-fb *::after {
  box-sizing: border-box;
}
@media (min-width: 640px) {
  .cpvt-fb {
    padding: 0 1.5rem;
  }
}
@media (min-width: 1024px) {
  .cpvt-fb {
    padding: 0 2rem;
  }
}

.cpvt-fb-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  height: 44px;
  text-decoration: none;
  color: #f3f8f7;
}
.cpvt-fb-wordmark {
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
}
.cpvt-fb-enso {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
}
.cpvt-fb-ring {
  position: absolute;
  inset: 8%;
  border-radius: 9999px;
  border: 2px solid oklch(0.86 0.2 172 / 0.9);
  box-shadow:
    0 0 2px oklch(0.86 0.2 172 / 0.34),
    inset 0 0 3px oklch(0.86 0.2 172 / 0.12);
}
.cpvt-fb-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4.84px;
  height: 6.6px;
  border-top-left-radius: 9999px;
  border-top-right-radius: 9999px;
  background: oklch(0.985 0.015 180);
  box-shadow: 0 0 3px 0.5px oklch(0.86 0.2 172 / 0.7);
}

.cpvt-fb-nav {
  display: inline-flex;
  align-items: center;
  height: 44px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}
.cpvt-fb-nav a {
  color: #c8d1d1;
  text-decoration: none;
}
.cpvt-fb-greeting {
  color: #f3f8f7;
  max-width: 42vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 640px) {
  .cpvt-fb-nav > :not(:first-child)::before {
    content: "\00B7";
    margin: 0 0.55rem;
    color: #626f6f;
  }
}

/* Signed-out is the static default; the signed-in labels appear under either
   auth signal (SSR class or the pre-paint hint reflector). A signed-in shell
   hides Download until a completed Devices read is represented by
   cpvt-fb--native-known. */
.cpvt-fb-in,
.cpvt-fb-webapp,
.cpvt-fb-greeting {
  display: none;
}
html.auth-hint .cpvt-fb-out,
.cpvt-fb--in .cpvt-fb-out {
  display: none;
}
html.auth-hint .cpvt-fb-download,
.cpvt-fb--in:not(.cpvt-fb--native-known) .cpvt-fb-download {
  display: none;
}
@media (min-width: 640px) {
  html.auth-hint .cpvt-fb-in,
  .cpvt-fb--in .cpvt-fb-in,
  html.auth-hint .cpvt-fb-webapp,
  .cpvt-fb--in .cpvt-fb-webapp {
    display: inline;
  }
  .cpvt-fb--in .cpvt-fb-greeting {
    display: inline;
  }
}
@media (max-width: 639px) {
  .cpvt-fb-download,
  .cpvt-fb-website,
  .cpvt-fb-open,
  .cpvt-fb-greeting {
    display: none;
  }
  html.auth-hint .cpvt-fb-in,
  .cpvt-fb--in .cpvt-fb-in {
    display: inline;
  }
}

/* No-blur fallback, mirroring the shadow styles. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cpvt-fb {
    background: oklch(0.115 0.012 200 / 0.96);
  }
}