/* Network and asset picker. Scoped to #picker so it outranks the shared row styles in app.html. */
#picker .mbox {
  max-width: 440px;
  border-color: rgba(255, 255, 255, .09);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 40px 90px -20px rgba(0, 0, 0, .75);
}

/* the sheet is a flex column on phones: only the list may shrink */
#picker .tp-head, #picker .search, #picker .pk-quick { flex: none; }

/* header */
#picker .tp-head { padding: 16px 16px 14px 20px; gap: 12px; border-bottom: 0; }
#picker .tp-head h4 { font-size: 17px; letter-spacing: -.01em; }
#picker .tp-head .pill {
  margin-left: 0; margin-right: auto;
  font-family: var(--cx-body, 'Inter', system-ui, sans-serif); font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--cx-mut, #8b95a6); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08);
  padding: 3px 9px;
}
#picker .tp-close, #picker .tp-back { width: 34px; height: 34px; border-radius: 11px; }

/* search */
#picker .search { margin: 0 16px 12px; }
#picker .search input {
  height: 46px; padding: 0 14px 0 40px; font-size: 14.5px; border-radius: 14px;
  background: rgba(0, 0, 0, .28); border-color: rgba(255, 255, 255, .09);
  transition: border-color .15s, box-shadow .15s;
}
#picker .search input::placeholder { color: var(--cx-dim, #5c6675); }
#picker .search input:focus { border-color: rgba(245, 166, 35, .7); box-shadow: 0 0 0 4px rgba(245, 166, 35, .12); }
#picker .search svg { left: 15px; opacity: .55; }

/* network shortcuts */
#picker .pk-quick {
  gap: 8px; padding: 0 16px 14px; scroll-snap-type: x proximity; scroll-padding: 0 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent);
}
#picker .pk-chip {
  scroll-snap-align: start; height: 34px; gap: 7px; padding: 0 12px 0 5px;
  background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .09);
  font-size: 13px; font-weight: 600; letter-spacing: -.005em;
}
#picker .pk-chip:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }
#picker .pk-chip:focus-visible { outline: 2px solid var(--cx-mint, #f5a623); outline-offset: 2px; }

/* every chain mark: brand monogram underneath, official logo on top */
#picker .cmk {
  position: relative; overflow: hidden; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cx-dsp, 'Sora', system-ui, sans-serif); font-weight: 700; line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
#picker .cmk img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; padding: 0; }
#picker .pk-cm { width: 24px; height: 24px; font-size: 11px; }

/* list */
#picker .tlist { padding: 0 8px 12px; border-top: 1px solid rgba(255, 255, 255, .06); }
#picker .pickhdr {
  text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600;
  color: var(--cx-dim, #5c6675); padding: 14px 12px 6px;
}

#picker .crow, #picker .trow {
  min-height: 58px; padding: 9px 12px; gap: 12px; border-radius: 14px; border-bottom: 0;
  transition: background .12s;
}
#picker .crow:hover, #picker .trow:hover { background: rgba(255, 255, 255, .045); }
#picker .crow:active, #picker .trow:active { transform: none; background: rgba(255, 255, 255, .07); }
#picker .crow:focus-visible, #picker .trow:focus-visible { outline: 2px solid var(--cx-mint, #f5a623); outline-offset: -2px; }
#picker .trow.active { background: rgba(245, 166, 35, .08); box-shadow: inset 0 0 0 1px rgba(245, 166, 35, .28); }

#picker .crow .cav { width: 38px; height: 38px; border-radius: 50%; font-size: 15px; padding: 0; }
#picker .crow .nm .sym { font-size: 14.5px; font-weight: 600; letter-spacing: -.005em; text-transform: none; color: var(--cx-ink, #e9edf4); }
#picker .crow .nm .ch, #picker .trow .ch {
  font-size: 12.5px; color: var(--cx-mut, #8b95a6); margin-top: 2px; text-transform: none;
  font-variant-numeric: tabular-nums;
}
#picker .cval {
  flex: none; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700;
  color: var(--cx-mint, #f5a623);
}
#picker .cval.dim { color: var(--cx-mut, #8b95a6); font-weight: 500; font-size: 12.5px; }
#picker .pk-go { flex: none; color: var(--cx-dim, #5c6675); margin-left: -2px; transition: transform .15s, color .15s; }
#picker .crow:hover .pk-go, #picker .crow:focus-visible .pk-go { color: var(--cx-ink, #e9edf4); transform: translateX(2px); }

/* "All networks": three overlapping network marks */
#picker .crow .cav.all {
  background: none; box-shadow: none; overflow: visible; border-radius: 0; position: relative;
}
#picker .cav.all .stk { position: absolute; width: 21px; height: 21px; font-size: 9px; box-shadow: 0 0 0 2px var(--cx-srf, #10141d); }
#picker .cav.all .stk:nth-child(1) { left: 0; top: 1px; z-index: 1; }
#picker .cav.all .stk:nth-child(2) { right: 0; top: 1px; z-index: 2; }
#picker .cav.all .stk:nth-child(3) { left: 8.5px; bottom: 1px; z-index: 3; }

/* token rows: the token, with its network as a small badge */
#picker .trow .av { width: 38px; height: 38px; overflow: visible; }
#picker .trow .av > img { border-radius: 50%; }
#picker .av-chain {
  position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; font-size: 8px; z-index: 1;
  box-shadow: 0 0 0 2px var(--cx-srf, #10141d);
}
#picker .trow .sym { font-size: 14.5px; }
#picker .trow .px .p { font-variant-numeric: tabular-nums; }

#picker .empty h3 { font-size: 15px; }
#picker .empty p { color: var(--cx-mut, #8b95a6); font-size: 13px; }

@media (max-width: 640px) {
  #picker .mbox { max-width: none; }
  #picker .tp-head { padding: 22px 14px 12px 18px; }
  #picker .search { margin: 0 14px 12px; }
  #picker .search input { font-size: 16px; }
  #picker .pk-quick { padding: 0 14px 12px; }
  #picker .pk-chip { height: 38px; }
  #picker .tlist { padding: 0 6px 12px; }
  #picker .crow, #picker .trow { min-height: 62px; }
}
@media (prefers-reduced-motion: reduce) {
  #picker .crow, #picker .trow, #picker .pk-go, #picker .search input { transition: none; }
  #picker .crow:hover .pk-go { transform: none; }
}

/* layout shell: one column by default, two panes on wide screens */
#picker .pk-body, #picker .pk-main { display: flex; flex-direction: column; min-height: 0; flex: 1; }
#picker .pk-nets { display: none; }
#picker .pk-tick { flex: none; margin-left: 10px; color: var(--cx-ink, #e9edf4); }

@media (min-width: 860px) {
  #picker .mbox.pk-split {
    max-width: 820px; height: min(640px, calc(100vh - 110px));
    display: flex; flex-direction: column;
  }
  #picker .pk-split .tp-head { padding: 18px 18px 16px 24px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
  #picker .pk-split .tp-head .pill { display: none; }
  #picker .pk-split .tp-head .tp-close { margin-left: auto; }
  #picker .pk-split .pk-body { flex-direction: row; }

  #picker .pk-split .pk-nets {
    display: flex; flex-direction: column; gap: 2px; flex: none; width: 248px;
    overflow-y: auto; padding: 12px 10px 16px; border-right: 1px solid rgba(255, 255, 255, .07);
    scrollbar-width: thin;
  }
  #picker .pk-net {
    display: flex; align-items: center; gap: 12px; flex: none; height: 46px; padding: 0 12px;
    border-radius: 12px; border: 1px solid transparent; background: none; cursor: pointer;
    color: var(--cx-ink, #e9edf4); font: inherit; font-size: 14.5px; font-weight: 500; text-align: left;
    transition: background .12s;
  }
  #picker .pk-net:hover { background: rgba(255, 255, 255, .045); }
  #picker .pk-net.on { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .12); font-weight: 600; }
  #picker .pk-net:focus-visible { outline: 2px solid var(--cx-mint, #f5a623); outline-offset: -2px; }
  #picker .pk-nn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #picker .pk-nm { width: 28px; height: 28px; font-size: 12px; }
  #picker .pk-nv { flex: none; font-size: 12.5px; font-weight: 700; color: var(--cx-mint, #f5a623); font-variant-numeric: tabular-nums; }
  #picker .pk-grid { flex: none; width: 28px; height: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
  #picker .pk-grid .grd { width: 13px; height: 13px; font-size: 6px; }

  #picker .pk-split .pk-main { min-width: 0; padding-top: 16px; }
  #picker .pk-split .search { margin: 0 20px 12px; }
  #picker .pk-split .pk-quick {
    flex-wrap: nowrap; overflow: hidden; padding: 0 20px 10px;
    -webkit-mask-image: none; mask-image: none;
  }
  #picker .pk-split .tlist { flex: 1; max-height: none; min-height: 0; border-top: 0; padding: 4px 12px 16px; }
}

/* token chips: token logo with its network badge */
#picker .pk-tchip { padding-left: 4px; }
#picker .pk-tchip .av {
  position: relative; width: 26px; height: 26px; border-radius: 50%; flex: none; overflow: visible;
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #04150d;
}
#picker .pk-tchip .av > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
#picker .pk-tchip .av-chain { width: 12px; height: 12px; right: -2px; bottom: -2px; font-size: 6px; }
@media (prefers-reduced-motion: reduce) { #picker .pk-net { transition: none; } }