/*
 * chrome.css — visual styling for the <wing-nav> + <wing-footer> custom
 * elements defined in chrome.js. Self-contained: declares fallbacks for
 * every CSS variable it reads, so a page that does not declare the Wing
 * design tokens (--ink, --paper, etc.) still renders correctly.
 *
 * NOTE on per-page accents: the nav + footer logos render as PNG <img>
 * tags (wing-logo.png / wing-logo-white.png), so the legacy accent
 * variables below have no visible effect today — the PNGs carry their
 * own color. The `.wing-logo-mark` rules and these variables are kept
 * so a future revert to an inline-SVG mark would still respect per-page
 * tinting; until then, recoloring the brand mark per page requires
 * shipping a different PNG via the data-custom opt-out (see CLAUDE.md
 * → "Per-page nav/footer overrides").
 *
 *   --wing-logo-mark-color          nav logo wing color (default --violet) — INERT
 *   --wing-footer-logo-mark-color   footer logo wing color (default --gold) — INERT
 */

/* ── Nav: transparent floating, logo-only ───────────────────────────── */
wing-nav {
  display: flex;
  align-items: center;
  padding: 24px 32px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  z-index: 20;
  /* Keep the rest of the nav row inert so wash/hero clicks pass through. */
  pointer-events: none;
}
wing-nav .wing-logo {
  pointer-events: auto;
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink, #1A1235);
  text-decoration: none;
  line-height: 1;
}
wing-nav .wing-logo-mark {
  color: var(--wing-logo-mark-color, var(--violet, #6B3FE0));
  display: inline-flex;
  align-items: center;
}
wing-nav .wing-logo-nav-image {
  display: block;
  height: 52px;
  width: auto;
}

/* ── Auth chip slot (right edge of nav) ─────────────────────────────── */
wing-nav .wing-auth-slot {
  margin-left: auto;
  pointer-events: auto;
  /* Reserved width so the nav doesn't reflow when the chip mounts. */
  min-width: 88px;
  display: flex;
  justify-content: flex-end;
}

wing-nav .wing-auth-anchor {
  position: relative;
  display: inline-block;
}

/* Chip — pill with the user's name or "Sign in" */
wing-nav .wing-auth-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(26, 18, 53, 0.12);
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink, #1A1235);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  line-height: 1;
}
wing-nav .wing-auth-chip:hover {
  background: rgba(255, 255, 255, 0.95);
}
wing-nav .wing-auth-chip-signin {
  background: var(--ink, #1A1235);
  color: var(--paper, #FAF6EE);
  border-color: transparent;
}
wing-nav .wing-auth-chip-signin:hover {
  background: #2a1d16;
}

/* Sign-in popup */
wing-nav .wing-auth-popup {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 300px;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow:
    0 12px 40px rgba(26, 18, 53, 0.18),
    0 0 0 1px rgba(26, 18, 53, 0.05);
  padding: 20px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 14px;
  color: var(--ink, #1A1235);
  z-index: 30;
}
wing-nav .wing-auth-popup-title {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 8px;
}
wing-nav .wing-auth-popup-body {
  margin: 0 0 14px;
  color: rgba(26, 18, 53, 0.7);
  line-height: 1.5;
  font-size: 13px;
}
wing-nav .wing-auth-popup-primary {
  display: block;
  background: var(--violet, #6B3FE0);
  color: var(--paper, #FAF6EE);
  text-align: center;
  padding: 11px 14px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 8px;
}
wing-nav .wing-auth-popup-cta {
  display: block;
  background: transparent;
  color: var(--violet, #6B3FE0);
  text-align: center;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(184, 71, 42, 0.35);
}

/* ── Footer: dark slab, logo + links row + centered legal line ─────── */
wing-footer {
  display: block;
  padding: 14px 0 10px;
  background: var(--ink, #1A1235);
  color: var(--paper, #FAF6EE);
  margin-top: auto;
}
wing-footer .wing-footer-row {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-size: 13px;
  color: #C2AE9F;
  gap: 16px;
}
wing-footer .wing-footer-row > .wing-logo {
  grid-column: 1;
  justify-self: start;
}
wing-footer .wing-footer-row > .wing-footer-links {
  grid-column: 2;
  justify-self: center;
}
wing-footer .wing-logo {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--paper, #FAF6EE);
  text-decoration: none;
  line-height: 1;
}
wing-footer .wing-logo-mark {
  color: var(--wing-footer-logo-mark-color, var(--gold, #E8B547));
  display: inline-flex;
  align-items: center;
}
wing-footer .wing-logo-footer-image {
  display: block;
  height: 56px;
  width: auto;
}
wing-footer .wing-footer-links {
  display: flex;
}
wing-footer .wing-footer-links a {
  margin-left: 24px;
  color: #DCC9BA;
  text-decoration: none;
}
wing-footer .wing-footer-links a:first-child {
  margin-left: 0;
}
wing-footer .wing-footer-legal {
  max-width: 1240px;
  margin: 10px auto 0;
  padding: 8px 32px 0;
  /* Three columns keep the copyright optically centered while the language
     toggle hangs on the right edge. The empty spacer balances the toggle's
     width so the middle column stays centered relative to the page. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-size: 11px;
  color: #B09A8B;
  border-top: 1px solid rgba(216, 197, 182, 0.16);
  gap: 12px;
  letter-spacing: 0.02em;
}
wing-footer .wing-footer-copyright {
  justify-self: center;
  text-align: center;
}
wing-footer .wing-footer-legal > .wing-lang-toggle {
  justify-self: end;
}

/* ── Footer language toggle (only shown on translatable routes) ─────── */
wing-footer .wing-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 11px;
  letter-spacing: 0.04em;
}
wing-footer .wing-lang-toggle[hidden] {
  display: none;
}
wing-footer .wing-lang-toggle-option {
  background: none;
  border: 0;
  padding: 2px 0;
  margin: 0;
  font: inherit;
  color: rgba(216, 197, 182, 0.6);
  cursor: pointer;
  transition: color 0.15s;
}
wing-footer .wing-lang-toggle-option:hover {
  color: var(--paper, #FAF6EE);
}
wing-footer .wing-lang-toggle-option:focus-visible {
  outline: none;
  color: var(--paper, #FAF6EE);
  text-decoration: underline;
  text-underline-offset: 3px;
}
wing-footer .wing-lang-toggle-option[aria-current="true"] {
  color: var(--paper, #FAF6EE);
  cursor: default;
}
wing-footer .wing-lang-toggle-sep {
  color: rgba(216, 197, 182, 0.34);
}

/* ── Floating bottom tab bar (signed-in app pages) ───────────────────
   Warm cream capsule, five spread items with labels, raised peach-gradient
   create FAB in the center. Mirrors the WingMatch discover design. */
wing-tabbar { display: contents; }
.wing-tabbar {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 40; width: min(440px, calc(100% - 28px));
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,247,240,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.7); border-radius: 30px; padding: 8px 10px;
  box-shadow: 0 12px 36px rgba(200,120,80,.28);
  transition: transform .32s cubic-bezier(.4,0,.2,1), opacity .32s;
}
.wing-tabbar.is-hidden { transform: translateX(-50%) translateY(260%); opacity: 0; pointer-events: none; }

/* Column item: rounded icon box + label below. */
.wing-tab {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 0; border: 0; background: none; cursor: pointer;
  color: #c9a896; text-decoration: none; line-height: 1; font-family: inherit;
}
.wing-tab-ico {
  position: relative; width: 34px; height: 34px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; transition: background .2s;
}
.wing-tab-ico svg { width: 20px; height: 20px; display: block; }
.wing-tab-label { font-size: 10.5px; font-weight: 500; color: #c0a08e; transition: color .2s; }

.wing-tab.is-active { color: #d4673e; }
.wing-tab.is-active .wing-tab-ico { background: #fbe2d3; }
.wing-tab.is-active .wing-tab-ico svg { stroke-width: 2.2; }
.wing-tab.is-active .wing-tab-label { color: #d4673e; font-weight: 700; }

/* Raised center create button (no label). */
.wing-tab--fab { padding: 0; }
.wing-tab-fab {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg,#f5a06a,var(--coral,#e8845c));
  display: flex; align-items: center; justify-content: center;
  transform: translateY(-5px); border: 3px solid #fff7f0;
  box-shadow: 0 6px 16px rgba(232,132,92,.5);
}
.wing-tab-fab svg { width: 24px; height: 24px; display: block; }
.wing-tab--fab:active .wing-tab-fab { transform: translateY(-5px) scale(.94); }

/* Unread chat badge (anchored to the icon box). */
.wing-tab-badge {
  position: absolute; top: -3px; right: -3px;
  background: var(--coral, #E8845C); color: #fff;
  font-size: 9px; min-width: 15px; height: 15px; line-height: 15px;
  border-radius: 8px; padding: 0 3px; font-weight: 700; text-align: center;
  font-family: 'Inter', -apple-system, sans-serif;
}

/* 我 trigger (a .wing-tab button) + its upward-opening account menu. */
.wing-tab-acct { flex: 1; min-width: 0; position: relative; display: flex; align-items: center; justify-content: center; }
.wing-tab-acct-btn:active { transform: scale(.97); }
.wing-tab-acct-menu {
  position: absolute; right: 0; bottom: calc(100% + 14px); min-width: 168px;
  background: #fffaf5; border-radius: 14px; padding: 8px;
  box-shadow: 0 14px 40px rgba(120,70,40,.22), 0 0 0 1px rgba(120,70,40,.06);
  font-family: 'Inter', -apple-system, sans-serif; font-size: 14px;
}
.wing-tab-acct-item {
  display: block; width: 100%; padding: 10px 12px; border-radius: 10px; border: 0;
  background: none; color: var(--ink, #3A2A22); text-decoration: none; text-align: left;
  font: inherit; cursor: pointer;
}
.wing-tab-acct-item:hover { background: var(--paper, #f6e8de); }
.wing-tab-acct-logout { color: var(--violet-deep, #9c3a20); }
html[lang^="zh"] .wing-tab-acct-item { font-family: var(--font-display); }

/* Pages that get an auto-injected bar (no inline mount) reserve bottom space so
   the fixed pill doesn't cover trailing content. Inline-mount pages set their own. */
html.wing-has-tabbar body { padding-bottom: 104px; }

/* ── Mobile ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  wing-nav {
    padding: 18px 18px;
  }
  wing-nav .wing-logo {
    font-size: 20px;
  }
  wing-nav .wing-logo-nav-image {
    height: 38px;
  }
  wing-nav .wing-auth-slot {
    min-width: 64px;
  }
  wing-nav .wing-auth-chip {
    padding: 6px 12px;
    font-size: 13px;
  }
  wing-nav .wing-auth-popup {
    width: min(300px, calc(100vw - 36px));
    right: -8px;  /* nudge so it doesn't clip the screen edge */
  }
  wing-footer {
    padding: 10px 0 8px;
  }
  wing-footer .wing-footer-row {
    padding: 0 20px;
    font-size: 12px;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  wing-footer .wing-logo-footer-image {
    height: 40px;
  }
  wing-footer .wing-footer-row > .wing-logo,
  wing-footer .wing-footer-row > .wing-footer-links {
    grid-column: 1;
    justify-self: start;
  }
  wing-footer .wing-footer-links a {
    margin-left: 0;
    margin-right: 18px;
  }
  wing-footer .wing-footer-legal {
    padding: 6px 20px 0;
    margin-top: 8px;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 8px;
    font-size: 10.5px;
  }
  wing-footer .wing-footer-legal-spacer {
    display: none;
  }
  wing-footer .wing-footer-legal > .wing-lang-toggle {
    justify-self: center;
  }
}