/* chat145 — the shared NETWORK-GROUPED compact coin picker
 * (checkout · USD wallet top-up · subscription pay; markup lives in
 *  resources/views/partials/coin-picker.blade.php, data comes from
 *  CryptApiService::coinOptionGroups()).
 *
 * Everything is theme-variable based (var(--surface), var(--border),
 * var(--primary), …) so the same file serves BOTH clones (each site's
 * brand color) and dark mode automatically.
 *
 * Owner goals: smaller boxes (no information removed), coins grouped by
 * network with minimal separation, ONE scrollable container + a network
 * filter — so adding many more wallets can never break the page layout. */

  .coin-picker-wrap { margin-top: .15rem; }

  /* network filter — only rendered when 2+ networks exist */
  .coin-filter-row { display: flex; align-items: center; gap: .4rem; margin: 0 0 .5rem; }
  .coin-filter-ic { display: inline-flex; color: var(--muted); font-size: .95rem; flex: 0 0 auto; }
  .coin-net-filter {
    flex: 0 1 230px; width: auto; max-width: 100%;
    padding: .38rem .55rem;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface); color: var(--text);
    font: inherit; font-size: .82rem; line-height: 1.4;
  }
  .coin-net-filter:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent); }

  /* the ONE scrollable box — dozens of wallets stay contained */
  .coin-picker-scroll {
    max-height: 21rem; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-gutter: stable; padding-inline-end: .15rem;
  }

  /* minimal network separation: a small label + a hairline */
  .coin-group { margin: 0 0 .6rem; }
  .coin-group:last-child { margin-bottom: 0; }
  .coin-group-title {
    display: flex; align-items: center; gap: .55rem;
    margin: 0 0 .35rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .02em;
    color: var(--muted);
  }
  .coin-group-title::after { content: ""; flex: 1; height: 1px; background: var(--border); }
  .coin-group[hidden] { display: none; }

  /* compact tiles — same chat120 info (icon · label · name · minimum),
     smaller footprint than the old 185px/24px tiles */
  .coin-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .4rem; }
  .coin-option {
    display: flex; align-items: center; gap: .45rem;
    padding: .42rem .5rem;
    border: 1px solid var(--border); border-radius: 9px;
    cursor: pointer; transition: border-color .15s, background .15s;
    background: var(--surface);
  }
  .coin-option:hover { border-color: color-mix(in srgb, var(--text) 28%, var(--border)); }
  .coin-option:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
  .coin-option:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
  .coin-option input[type=radio] { width: 15px; height: 15px; margin: 0; padding: 0; flex: 0 0 auto; accent-color: var(--primary); }
  .coin-option img { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; }
  .coin-option-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.28; }
  .coin-option-name b { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .coin-option-name small { font-size: .66rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* chat120 (kept) — below-minimum coins: visible but unpickable */
  .coin-option.coin-disabled { opacity: .55; cursor: not-allowed; background: var(--surface-3); }
  .coin-option.coin-disabled:hover { border-color: var(--border); }
  .coin-option.coin-disabled:has(input:checked) { border-color: var(--border); background: var(--surface-3); }
  .coin-option.coin-disabled .coin-option-name b { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 45%, transparent); }
  .coin-min { font-size: .64rem; font-weight: 600; color: var(--warn, #b45309); margin-top: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* mobile (Android) — two tighter columns and a shorter scroll box */
  @media (max-width: 560px) {
    .coin-picker { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
    .coin-picker-scroll { max-height: 17rem; }
    .coin-net-filter { flex: 1 1 auto; }
  }