/*! ═══════════════════════════════════════════════════════════════════════════
   Findex News Runtime Pro — MOBILE WATCHLIST VIEW
   File: assets/fnrp-mobile-watchlist.css  (pairs with fnrp-mobile-watchlist.js)
   ─────────────────────────────────────────────────────────────────────────────
   A dedicated, native-feeling "Watchlist" tab for phones (≤768px) that lists
   EVERY asset in the app's inventory (crypto / forex / metals / energy /
   indices / stocks) in one calm, searchable, filterable, live-updating list.

   ZERO desktop bleed: every rule is scoped to BOTH html.fnrp-mapp AND the
   max-width media query, exactly like fnrp-mobile-app.css. Colours come from
   the existing design tokens (--bg / --text / --accent / --up / --down …) so
   the view follows the active dark/light theme automatically. No backdrop
   filters anywhere (the same mobile-compositor decision as the bottom bar).

   REVERSIBILITY: delete the two 'fnrp-mobile-watchlist' enqueue lines in
   findex-news-runtime-pro.php (and the small Watchlist hooks in
   fnrp-mobile-app.js). Nothing here touches desktop or any other view.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* The host section the JS injects; visibility is owned by the app shell
     ([data-mapp-view] show/hide logic in fnrp-mobile-app.js). */
  html.fnrp-mapp #mapp-view-watchlist { width: 100%; }

  /* On the phone the legacy multi-column sidebar watchlist is replaced by this
     dedicated tab, so hide the old card to avoid duplication. The price
     pipeline that feeds it keeps running regardless (we read its live data). */
  html.fnrp-mapp #fnrp-root #fs-pairs { display: none !important; }

  /* ── Shell ──────────────────────────────────────────────────────────────── */
  html.fnrp-mapp .fwl {
    --fwl-radius: 14px;
    --fwl-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    position: relative;
    margin: 0 calc(var(--mapp-gutter, 16px) * -1);   /* let controls go edge-to-edge */
    padding: 0;
  }

  /* ── Sticky controls (search + category chips) ────────────────────────────
     Sticks just under the slim top bar. Solid fill (no blur) → cheap to
     composite and consistent with the app shell. */
  html.fnrp-mapp .fwl-controls {
    position: sticky;
    top: calc(var(--mapp-topbar-h, 50px) + var(--mapp-safe-top, 0px));
    z-index: 6;
    background: var(--bg, #0a0e15);
    padding: 8px var(--mapp-gutter, 16px) 10px;
    border-bottom: 1px solid var(--border, rgba(255,255,255,.06));
  }

  /* Search field */
  html.fnrp-mapp .fwl-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 12px;
    border-radius: var(--fwl-radius);
    background: var(--bg-2, #0e1320);
    border: 1px solid var(--border, rgba(255,255,255,.07));
    transition: border-color .18s ease, background .18s ease;
  }
  html.fnrp-mapp .fwl-search:focus-within {
    border-color: color-mix(in srgb, var(--accent, #4dd4ac) 55%, transparent);
    background: color-mix(in srgb, var(--accent, #4dd4ac) 6%, var(--bg-2, #0e1320));
  }
  html.fnrp-mapp .fwl-search svg {
    width: 18px; height: 18px; flex: 0 0 auto;
    color: var(--muted, #8c98ad);
  }
  html.fnrp-mapp .fwl-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text, #e3e9f2);
    font: 500 14.5px/1.2 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-appearance: none;
  }
  html.fnrp-mapp .fwl-search input::placeholder { color: var(--muted, #8c98ad); opacity: .9; }
  html.fnrp-mapp .fwl-search-clear {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    display: none;
    align-items: center; justify-content: center;
    border: 0; padding: 0; cursor: pointer;
    border-radius: 50%;
    background: var(--border-2, rgba(255,255,255,.1));
    color: var(--text-2, #b3bdce);
    font-size: 13px; line-height: 1;
  }
  html.fnrp-mapp .fwl-search.has-text .fwl-search-clear { display: flex; }

  /* Category chips — horizontally scrollable, snap, no scrollbar */
  html.fnrp-mapp .fwl-chips {
    display: flex;
    gap: 8px;
    margin-top: 9px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-bottom: 1px;
  }
  html.fnrp-mapp .fwl-chips::-webkit-scrollbar { display: none; height: 0; }
  html.fnrp-mapp .fwl-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid var(--border-2, rgba(255,255,255,.1));
    background: var(--bg-2, #0e1320);
    color: var(--text-2, #b3bdce);
    font: 600 12.5px/1 'Inter', system-ui, sans-serif;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .16s ease, color .16s ease, border-color .16s ease, transform .12s ease;
  }
  html.fnrp-mapp .fwl-chip:active { transform: scale(.95); }
  html.fnrp-mapp .fwl-chip .fwl-chip-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--chip-c, var(--muted, #8c98ad));
  }
  html.fnrp-mapp .fwl-chip.is-active {
    background: var(--accent, #4dd4ac);
    border-color: var(--accent, #4dd4ac);
    color: #06231b;
  }
  html.fnrp-mapp[data-fnrp-theme="light"] .fwl-chip.is-active,
  html[data-fnrp-theme="light"] .fwl-chip.is-active { color: #ffffff; }
  html.fnrp-mapp .fwl-chip.is-active .fwl-chip-dot { background: currentColor; opacity: .55; }
  html.fnrp-mapp .fwl-chip .fwl-chip-n {
    font-size: 11px;
    opacity: .6;
    font-variant-numeric: tabular-nums;
  }

  /* ── Toolbar: result count + sort cycle ───────────────────────────────────── */
  html.fnrp-mapp .fwl-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px var(--mapp-gutter, 16px) 6px;
  }
  html.fnrp-mapp .fwl-count {
    font: 600 11.5px/1 'Inter', system-ui, sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted, #8c98ad);
  }
  html.fnrp-mapp .fwl-sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid var(--border-2, rgba(255,255,255,.1));
    background: var(--bg-2, #0e1320);
    color: var(--text-2, #b3bdce);
    font: 600 12px/1 'Inter', system-ui, sans-serif;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, border-color .16s ease;
  }
  html.fnrp-mapp .fwl-sort:active { transform: scale(.96); }
  html.fnrp-mapp .fwl-sort svg { width: 14px; height: 14px; flex: none; }
  html.fnrp-mapp .fwl-sort-lbl { white-space: nowrap; }

  /* ── List + group headers ─────────────────────────────────────────────────── */
  html.fnrp-mapp .fwl-list { padding: 0 var(--mapp-gutter, 16px) 4px; }
  html.fnrp-mapp .fwl-group { margin-top: 6px; }
  html.fnrp-mapp .fwl-group:first-child { margin-top: 0; }
  html.fnrp-mapp .fwl-group-hd {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 2px 7px;
    font: 700 12px/1 'Inter', system-ui, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-2, #b3bdce);
  }
  html.fnrp-mapp .fwl-group-hd .fwl-group-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--chip-c, var(--accent, #4dd4ac));
  }
  html.fnrp-mapp .fwl-group-hd .fwl-group-n {
    margin-inline-start: auto;
    font-weight: 600;
    color: var(--muted, #8c98ad);
    font-variant-numeric: tabular-nums;
  }

  /* ── Asset row ────────────────────────────────────────────────────────────── */
  html.fnrp-mapp .fwl-row {
    border-radius: var(--fwl-radius);
    background: var(--bg-2, #0e1320);
    border: 1px solid var(--border, rgba(255,255,255,.05));
    margin-bottom: 8px;
    overflow: hidden;
    transition: border-color .18s ease, background .35s ease;
  }
  html.fnrp-mapp .fwl-row.is-open {
    border-color: var(--border-2, rgba(255,255,255,.12));
  }
  html.fnrp-mapp .fwl-row-main {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 60px;
    padding: 10px 14px;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: start;
    -webkit-tap-highlight-color: transparent;
  }
  html.fnrp-mapp .fwl-row-main:active { background: color-mix(in srgb, var(--text, #e3e9f2) 5%, transparent); }

  /* Category badge / ticker glyph */
  html.fnrp-mapp .fwl-badge {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 12px/1 var(--fwl-mono);
    letter-spacing: .02em;
    color: var(--chip-c, var(--accent, #4dd4ac));
    background: color-mix(in srgb, var(--chip-c, var(--accent, #4dd4ac)) 14%, transparent);
  }

  html.fnrp-mapp .fwl-row-meta { flex: 1 1 auto; min-width: 0; }
  html.fnrp-mapp .fwl-row-code {
    font: 700 14.5px/1.2 'Inter', system-ui, sans-serif;
    color: var(--text, #e3e9f2);
    letter-spacing: .01em;
    unicode-bidi: isolate;
  }
  html.fnrp-mapp .fwl-row-name {
    margin-top: 2px;
    font: 500 12px/1.25 'Inter', system-ui, sans-serif;
    color: var(--muted, #8c98ad);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  html.fnrp-mapp .fwl-row-r {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    text-align: end;
  }
  html.fnrp-mapp .fwl-row-price {
    font: 600 14.5px/1 var(--fwl-mono);
    color: var(--text, #e3e9f2);
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
  }
  html.fnrp-mapp .fwl-row-chg {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 64px;
    justify-content: center;
    padding: 3px 7px;
    border-radius: 7px;
    font: 700 11.5px/1 var(--fwl-mono);
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
  }
  html.fnrp-mapp .fwl-row-chg .fwl-arr { font-size: 9px; line-height: 1; }
  html.fnrp-mapp .fwl-row-chg.up   { color: var(--up, #4ade80);   background: color-mix(in srgb, var(--up, #4ade80) 14%, transparent); }
  html.fnrp-mapp .fwl-row-chg.down { color: var(--down, #f87171); background: color-mix(in srgb, var(--down, #f87171) 14%, transparent); }
  html.fnrp-mapp .fwl-row-chg.flat { color: var(--muted, #8c98ad); background: color-mix(in srgb, var(--muted, #8c98ad) 12%, transparent); }

  /* Awaiting-data placeholder pulse on the "—" */
  html.fnrp-mapp .fwl-row.is-await .fwl-row-price,
  html.fnrp-mapp .fwl-row.is-await .fwl-row-chg {
    animation: fwlAwait 1.5s ease-in-out infinite;
  }
  @keyframes fwlAwait { 0%,100% { opacity: .5; } 50% { opacity: .9; } }

  /* Live tick flash */
  html.fnrp-mapp .fwl-row.flash-up   { background: color-mix(in srgb, var(--up, #4ade80) 13%, var(--bg-2, #0e1320)); }
  html.fnrp-mapp .fwl-row.flash-down { background: color-mix(in srgb, var(--down, #f87171) 13%, var(--bg-2, #0e1320)); }

  /* ── Expanded detail ──────────────────────────────────────────────────────── */
  html.fnrp-mapp .fwl-row-detail {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .26s ease, opacity .2s ease;
  }
  html.fnrp-mapp .fwl-row.is-open .fwl-row-detail {
    max-height: 320px;
    opacity: 1;
  }
  html.fnrp-mapp .fwl-detail-inner {
    padding: 4px 14px 16px;
    border-top: 1px solid var(--border, rgba(255,255,255,.05));
  }
  html.fnrp-mapp .fwl-spark {
    width: 100%;
    height: 84px;
    margin: 12px 0 14px;
    display: block;
  }
  html.fnrp-mapp .fwl-spark svg { width: 100%; height: 100%; display: block; }

  html.fnrp-mapp .fwl-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  html.fnrp-mapp .fwl-stat {
    padding: 9px 10px;
    border-radius: 10px;
    background: var(--bg, #0a0e15);
    border: 1px solid var(--border, rgba(255,255,255,.05));
  }
  html.fnrp-mapp .fwl-stat-k {
    font: 600 9.5px/1 'Inter', system-ui, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted, #8c98ad);
  }
  html.fnrp-mapp .fwl-stat-v {
    margin-top: 6px;
    font: 600 13px/1 var(--fwl-mono);
    color: var(--text, #e3e9f2);
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
  }
  html.fnrp-mapp .fwl-stat-v.up   { color: var(--up, #4ade80); }
  html.fnrp-mapp .fwl-stat-v.down { color: var(--down, #f87171); }

  html.fnrp-mapp .fwl-detail-news {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 0;
    height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--border-2, rgba(255,255,255,.1));
    background: transparent;
    color: var(--accent, #4dd4ac);
    font: 600 12.5px/1 'Inter', system-ui, sans-serif;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  html.fnrp-mapp .fwl-detail-news svg { width: 15px; height: 15px; flex: none; }

  /* v11.33.0 — detail action row: AI Signal (primary) + Related news (ghost). */
  html.fnrp-mapp .fwl-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 14px;
  }
  html.fnrp-mapp .fwl-detail-ai {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 15px;
    border-radius: 10px;
    border: 1px solid rgba(77, 212, 172, .42);
    background: rgba(77, 212, 172, .12);
    color: var(--accent, #4dd4ac);
    font: 700 12.5px/1 'Inter', system-ui, sans-serif;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, background-color .16s ease, border-color .16s ease;
  }
  html.fnrp-mapp .fwl-detail-ai svg { width: 16px; height: 16px; flex: none; }
  html.fnrp-mapp .fwl-detail-ai:hover { background: rgba(77, 212, 172, .18); border-color: rgba(77, 212, 172, .6); }
  html.fnrp-mapp .fwl-detail-ai:active,
  html.fnrp-mapp .fwl-detail-news:active { transform: scale(.97); }

  /* ── Empty state ──────────────────────────────────────────────────────────── */
  html.fnrp-mapp .fwl-empty {
    display: none;
    padding: 46px 24px;
    text-align: center;
    color: var(--muted, #8c98ad);
  }
  html.fnrp-mapp .fwl.is-empty .fwl-empty { display: block; }
  html.fnrp-mapp .fwl.is-empty .fwl-list  { display: none; }
  html.fnrp-mapp .fwl-empty svg { width: 34px; height: 34px; opacity: .5; margin-bottom: 12px; }
  html.fnrp-mapp .fwl-empty-t { font: 600 14px/1.4 'Inter', system-ui, sans-serif; color: var(--text-2, #b3bdce); }
  html.fnrp-mapp .fwl-empty-s { margin-top: 5px; font-size: 12.5px; }

  /* ── RTL: keep numbers LTR, mirror layout ─────────────────────────────────── */
  html.fnrp-mapp.fnrp-rtl .fwl-row-main,
  html[dir="rtl"] html.fnrp-mapp .fwl-row-main { text-align: right; }

  /* ── Reduced motion ───────────────────────────────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    html.fnrp-mapp .fwl-row,
    html.fnrp-mapp .fwl-row-detail,
    html.fnrp-mapp .fwl-chip,
    html.fnrp-mapp .fwl-detail-ai,
    html.fnrp-mapp .fwl-sort { transition: none !important; }
    html.fnrp-mapp .fwl-row.is-await .fwl-row-price,
    html.fnrp-mapp .fwl-row.is-await .fwl-row-chg { animation: none !important; }
  }
}

/* Desktop safety: if the shell is (incorrectly) marked mounted above the
   breakpoint, never show the watchlist host — desktop keeps its own layout. */
@media (min-width: 769px) {
  html.fnrp-mapp #mapp-view-watchlist { display: none !important; }
  html.fnrp-mapp #fnrp-root #fs-pairs { display: block; }
}