/* iso-chrome.css — layout/chrome styling for the SHARED IsoChrome theme module.
 *
 * The MENU ITEMS and LOGO are CLONES of the real app nodes (iso-chrome.js), so their
 * icons (lineficon font), colors and intrinsic spacing come from the app's own global
 * CSS. This file only supplies the *container* layout the two host surfaces need:
 *   • the Vidz desktop header bar + dark side-menu column (iso-reels.js)
 *   • generic header search styling
 *   • a fallback wordmark (only if the live PNG logo was never captured)
 *   • the iso-chrome-cur (active) highlight
 *
 * Per-surface scoping (e.g. the Vidz overlay only, or the /video sidebar only) lives in
 * each host's own injected CSS; these rules are the SHARED visual contract.
 */

/* ── Real icon glyph: ensure recreated/cloned spans render the lineficon at a sane size.
   Cloned spans already carry the app's helper classes; the fallback (.iso-chrome-ico
   built directly) needs the lineficon size explicitly so it never collapses to 0. */
.iso-chrome-ico { font-family: 'lineficon' !important; font-style: normal; font-weight: normal; line-height: 1; }

/* ── COLORFUL SVG ARTWORK ICONS (match the real app sidebar) ──────────────────────
 * The menu items are CLONES of the live sidebar <a>. On the real sidebar, the per-icon
 * SVG artwork in colorful-icons.css is applied via `[role="menuitem"][data-testid="…"] .ico`
 * — but those ancestors are NOT cloned (only the inner <a> is), so in our chrome the
 * cloned `.ico` falls back to MetaFox's RAW base style: a grey circular chip
 * (background #aeacac, border-radius:50%) with a grey-fill glyph that doesn't show — i.e.
 * the "grey oval/blob". Re-apply the SAME colorful artwork here, keyed off the
 * data-iso-key IsoChrome sets on each item, so the chrome icons render IDENTICALLY to the
 * real sidebar (clean gradient SVG glyphs) on every host surface. */
.iso-chrome-mi .ico,
.iso-chrome-mi .iso-chrome-ico {
  font-size: 0 !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  -webkit-text-fill-color: initial !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
  display: inline-block;
  width: 24px !important;
  height: 24px !important;
  line-height: 24px;
  vertical-align: middle;
  flex: none;
}
.iso-chrome-mi[data-iso-key="home"]        .ico { background-image: var(--iso-ic-home) }
.iso-chrome-mi[data-iso-key="activity"]    .ico { background-image: var(--iso-ic-activitypoint) }
.iso-chrome-mi[data-iso-key="invite"]      .ico { background-image: var(--iso-ic-invitations) }
.iso-chrome-mi[data-iso-key="ai"]          .ico { background-image: var(--iso-ic-isocialize-ai) }
.iso-chrome-mi[data-iso-key="marketplace"] .ico { background-image: var(--iso-ic-marketplace) }
.iso-chrome-mi[data-iso-key="friends"]     .ico { background-image: var(--iso-ic-friends) }
.iso-chrome-mi[data-iso-key="sell"]        .ico { background-image: var(--iso-ic-sell) }
.iso-chrome-mi[data-iso-key="reviews"]     .ico { background-image: var(--iso-ic-myreviews) }
.iso-chrome-mi[data-iso-key="videos"]      .ico { background-image: var(--iso-ic-videos) }
.iso-chrome-mi[data-iso-key="vidz"]        .ico { background-image: var(--iso-ic-videos) }

/* ── Canonical header (real logo + search) ───────────────────────────────────── */
.iso-chrome-hdr {
  display: flex; align-items: center; gap: 18px;
  height: 58px; padding: 0 18px; box-sizing: border-box;
}
.iso-chrome-logo { display: flex; align-items: center; text-decoration: none; flex: none; }
.iso-chrome-logo img { height: 32px; width: auto; display: block; }
/* fallback wordmark — only used if the real PNG logo was never seen */
.iso-chrome-logo-fb .iso-chrome-wd { color: #fff; font-weight: 800; font-size: 17px; letter-spacing: -.01em; }
.iso-chrome-logo-fb .iso-chrome-wd b {
  font-weight: 800; background: linear-gradient(120deg, #22d3ee, #60a5fa);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.iso-chrome-search {
  flex: 1; max-width: 560px; margin: 0 auto;
  display: flex; align-items: center; height: 40px;
  background: #141a28; border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px; padding: 0 6px 0 18px;
  transition: border-color .15s, background .15s;
}
.iso-chrome-search:focus-within { border-color: rgba(96, 165, 250, .6); background: #0f1521; }
.iso-chrome-search input {
  flex: 1; background: none; border: none; outline: none;
  color: #fff; font-family: inherit; font-size: 14px; min-width: 0;
}
.iso-chrome-search input::placeholder { color: #7e8aa3; }
.iso-chrome-search button {
  flex: none; width: 36px; height: 30px; border: none; cursor: pointer;
  border-radius: 999px; background: rgba(255, 255, 255, .08); color: #cdd6e8;
  font-size: 15px; display: grid; place-items: center; transition: background .15s;
}
.iso-chrome-search button:hover { background: rgba(255, 255, 255, .16); }
.iso-chrome-search button .iso-chrome-ico { font-size: 16px; }
.iso-chrome-hdr-sp { flex: none; width: 120px; }

/* ── Canonical side menu (vertical) ──────────────────────────────────────────── */
.iso-chrome-side {
  display: flex; flex-direction: column; gap: 2px; overflow-y: auto;
}
/* Each menu link is a real cloned <a>; we just give it the row layout used in the
   real sidebar (icon + label, 12px-ish padding) in case the cloned <a> lost its
   flow when re-parented out of MetaFox's menu wrapper. */
.iso-chrome-mi {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px; border-radius: 11px;
  color: #fff; text-decoration: none;
  font-size: 14.5px; font-weight: 500; line-height: 1.2;
  transition: background .15s, color .15s;
}
.iso-chrome-mi .iso-chrome-ico,
.iso-chrome-mi .ico { font-size: 20px; width: 22px; text-align: center; flex: none; }
.iso-chrome-mi .iso-chrome-mi-lbl,
.iso-chrome-mi > div { min-width: 0; }
.iso-chrome-mi:hover { background: rgba(255, 255, 255, .07); }
.iso-chrome-mi.iso-chrome-cur {
  background: linear-gradient(120deg, rgba(34, 211, 238, .16), rgba(37, 99, 235, .16));
}
.iso-chrome-side-hd {
  color: #6b7689; font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; padding: 14px 14px 6px;
}

/* ── THEME-AWARE colors for the Vidz overlay chrome ───────────────────────────────
 * iso-theme.js puts html.iso-jet-on (DARK / jet black) or html.iso-light-on (LIGHT) on
 * <html>. Flip the header search, menu-item text and active highlight to match. ALL of
 * these are scoped to `.iso-reels.has-chrome …` so nothing leaks to /video or any other
 * surface that consumes iso-chrome. (The /video #iso-vnav styles itself separately.)
 *
 * LIGHT  → white chrome: dark text/icons, light-grey search pill.
 * DARK   → jet-black chrome: white text, near-black search pill. */

/* LIGHT mode */
html.iso-light-on .iso-reels.has-chrome .iso-chrome-mi { color: #0f1419; }
html.iso-light-on .iso-reels.has-chrome .iso-chrome-mi:hover { background: rgba(0,0,0,.05); }
html.iso-light-on .iso-reels.has-chrome .iso-chrome-mi.iso-chrome-cur {
  background: linear-gradient(120deg, rgba(34,211,238,.14), rgba(37,99,235,.14)); color: #1d6fe8;
}
html.iso-light-on .iso-reels.has-chrome .iso-chrome-side-hd { color: #5b6675; }
html.iso-light-on .iso-reels.has-chrome .iso-chrome-search {
  background: #eef1f4; border-color: #dde3e9;
}
html.iso-light-on .iso-reels.has-chrome .iso-chrome-search:focus-within { background: #fff; border-color: rgba(37,99,235,.5); }
html.iso-light-on .iso-reels.has-chrome .iso-chrome-search input { color: #0f1419; }
html.iso-light-on .iso-reels.has-chrome .iso-chrome-search input::placeholder { color: #5b6675; }
html.iso-light-on .iso-reels.has-chrome .iso-chrome-search button { background: rgba(0,0,0,.06); color: #3a4452; }
html.iso-light-on .iso-reels.has-chrome .iso-chrome-search button:hover { background: rgba(0,0,0,.10); }
/* fallback wordmark stays readable on white if the PNG logo was never captured */
html.iso-light-on .iso-reels.has-chrome .iso-chrome-logo-fb .iso-chrome-wd { color: #0f1419; }

/* DARK (jet black) mode */
html.iso-jet-on .iso-reels.has-chrome .iso-chrome-mi { color: #e7e9ea; }
html.iso-jet-on .iso-reels.has-chrome .iso-chrome-mi:hover { background: rgba(255,255,255,.07); }
html.iso-jet-on .iso-reels.has-chrome .iso-chrome-mi.iso-chrome-cur {
  background: linear-gradient(120deg, rgba(34,211,238,.16), rgba(37,99,235,.16)); color: #fff;
}
html.iso-jet-on .iso-reels.has-chrome .iso-chrome-search {
  background: #111; border-color: rgba(255,255,255,.10);
}
html.iso-jet-on .iso-reels.has-chrome .iso-chrome-search:focus-within { background: #0a0a0a; border-color: rgba(96,165,250,.6); }
html.iso-jet-on .iso-reels.has-chrome .iso-chrome-search input { color: #fff; }
html.iso-jet-on .iso-reels.has-chrome .iso-chrome-search input::placeholder { color: #7e8aa3; }
html.iso-jet-on .iso-reels.has-chrome .iso-chrome-search button { background: rgba(255,255,255,.08); color: #cdd6e8; }
html.iso-jet-on .iso-reels.has-chrome .iso-chrome-search button:hover { background: rgba(255,255,255,.16); }