/*
 * ChannelPicker — shared styles for the reusable source-picker engine
 * (js/channel-picker.js). Themed exclusively with theme.css custom
 * properties so it renders correctly in both [data-theme="dark"] and
 * [data-theme="light"] with no overrides needed.
 *
 * Adapted from the inline `.picker-*` rules in connect.html (renamed to
 * `.cp-*`); those inline rules will be removed once WhatsApp migrates onto
 * this shared component.
 */

.cp {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}

.cp-title {
  font-weight: 700;
  font-size: var(--font-size-md, 15px);
  color: var(--text-primary);
}

.cp-intro {
  font-size: var(--font-size-sm, 13px);
  color: var(--text-muted);
}

/* Search */
.cp-search {
  position: relative;
  margin-bottom: var(--space-2, 8px);
}

.cp-search-ico {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
}

.cp-search .form-input {
  padding-left: 34px;
}

/* List */
.cp-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
}

/* Rich rows (Telegram/Discord) expand in place — Options panels and the
   market/account scope can each be taller than the 280px inner scroller,
   which clipped an opened row and cut the last visible row. Those pickers are
   designed to grow with the page under the sticky Save bar (as the old
   Telegram list did), so drop the inner scroller when the list holds rich
   rows. The 280px scroller stays for the simple (WhatsApp) single-select
   list, whose short rows never expand. */
.cp-list:has(.cp-rich) {
  max-height: none;
  overflow: visible;
}

/* Centered spinner shown while the discovery list loads. */
.cp-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6, 24px) 0;
}

/* Empty-state inside an account/exchange block when the user has none of that
   market connected — clicking the market still reveals this instead of nothing. */
.cp-acct-empty {
  font-size: 12px;
  color: var(--color-warning, #FFB454);
  padding: 2px 0;
}

/* Section labels for the "selected float to top" grouping (#4). */
.cp-divider {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 4px 2px;
  margin-top: 4px;
  border-bottom: 1px solid var(--border-color);
}
.cp-divider:first-child { margin-top: 0; }

.cp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  /* .cp-list is a fixed-max-height column flexbox; without this, rows are
     flex items that SHRINK to fit once their combined natural height exceeds
     max-height (≈5+ rows), collapsing each to ~23px and clipping the name +
     controls under the row's overflow:hidden. Keep natural height and let the
     list scroll instead. */
  flex-shrink: 0;
  text-align: left;
  padding: 11px 12px;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-primary);
  cursor: pointer;
  font-size: var(--font-size-sm, 13px);
  font-weight: 600;
  font-family: inherit;
  transition: border-color .13s ease, background .13s ease;
}

.cp-row:hover {
  border-color: var(--color-primary);
}

.cp-row.is-checked {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--bg-input));
}

.cp-row-checkbox {
  flex-shrink: 0;
  accent-color: var(--color-primary);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.cp-row-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-row-meta {
  flex-shrink: 0;
  color: var(--text-muted);
  font-weight: 500;
  font-size: var(--font-size-xs, 12px);
}

/* Button-style row for selection:'single' */
.cp-row--pick {
  appearance: none;
  -webkit-appearance: none;
}

.cp-row:disabled,
.cp-row--pick:disabled {
  opacity: .55;
  cursor: default;
}

.cp-empty {
  color: var(--text-muted);
  font-size: 13px;
  padding: 8px 2px;
}

/* Save bar */
.cp-savebar {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  position: sticky;
  bottom: 0;
  padding-top: var(--space-2, 8px);
  background: var(--bg-card, transparent);
}

/* Inside a modal the sticky Save bar must read as a solid footer that the list
   scrolls cleanly UNDER — not something content peeks around or below. Drop the
   modal body's bottom padding so the bottom:0 sticky bar sits flush at the very
   bottom (no gap for the next row to show through), and bleed the bar full-width
   with its own opaque background + top border. */
.modal-body:has(.cp-savebar) {
  /* !important + the higher specificity of this :has selector beat mobile.css's
     `.modal-body { padding: 1rem !important }`, which otherwise leaves a bottom
     gap under the sticky Save bar where the list peeks through on small screens. */
  padding-bottom: 0 !important;
}
.modal-body .cp-savebar {
  /* Content-width (no negative-margin bleed): a fixed bleed can't match the
     modal body's padding, which differs desktop (1.5rem) vs mobile (1rem via
     mobile.css !important). The mismatch made the Save bar 381px wide on a 375px
     phone — horizontal overflow that broke the popup layout. Aligning the bar
     with the rows can never overflow and still covers content scrolling under. */
  margin: 0;
  padding: var(--space-3, 12px) 0 var(--space-4, 16px);
  border-top: 1px solid var(--border-color);
  background: var(--bg-card);
}

.cp-save-status {
  font-size: var(--font-size-sm, 13px);
  color: var(--text-muted);
}

.cp-save-status--error {
  color: var(--color-danger, #e05252);
}

/* Busy state */
.cp.cp-busy .cp-list {
  opacity: .7;
  pointer-events: none;
}

/* Needs-pick attention pulse (e.g. required selection not yet made) */
@keyframes cpPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-warning) 35%, transparent); }
  50% { box-shadow: 0 0 0 4px var(--color-warning-bg); }
}

.cp-list.cp-needs-pick {
  border-radius: var(--border-radius-sm);
  animation: cpPulse 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cp-list.cp-needs-pick {
    animation: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-warning) 35%, transparent);
  }
}

@media (max-width: 560px) {
  .cp-list {
    max-height: 240px;
  }

  .cp-row:not(.cp-rich) {
    padding: 10px;
  }

  .cp-savebar {
    flex-wrap: wrap;
  }
}

/* ============================================================
 * Rich multi rows (Telegram/Discord parity). All of this is
 * gated behind capabilities.row in the engine and never renders
 * for the WhatsApp (single) path. Amber attention states use the
 * theme's --color-warning / --color-warning-bg, danger uses
 * --color-danger, confirmed uses --color-primary — so it themes
 * for dark, light and mobile with no overrides. Everything is
 * scoped under .cp so it can't collide with a host page's own
 * .acct-pick / .tg-* rules.
 * ============================================================ */

/* Header row that can carry the title alongside the count pill. */
.cp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 8px);
}

/* Live "X of Y channels" pill. */
.cp-count-pill {
  flex: 0 0 auto;
  font-size: var(--font-size-xs, 12px);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  color: var(--text-secondary, var(--text-muted));
  white-space: nowrap;
}

.cp-count-pill.at {
  border-color: color-mix(in srgb, var(--color-warning) 55%, transparent);
  color: var(--color-warning);
}

.cp-count-pill.over {
  border-color: var(--color-danger, #e05252);
  color: var(--color-danger, #e05252);
}

/* ── Manual add-by-id (capabilities.manualAdd) ──────────────────────────
 * The "+ Add channel" button lives in the header; the inline form is a
 * DOM-built panel (no native prompt/alert). Themed with theme.css vars so
 * it works in dark, light and mobile with no overrides. Nothing here renders
 * unless capabilities.manualAdd is on. */
.cp-add-btn {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary, var(--text-muted));
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .14s, color .14s, background .14s;
}

.cp-add-btn:hover {
  border-color: var(--color-primary);
  color: var(--text-primary);
}

.cp-addform {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 11px 12px;
  margin-bottom: var(--space-2, 8px);
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--border-color));
  border-radius: var(--border-radius-sm);
  background: var(--bg-input);
}

.cp-addform[hidden] {
  display: none;
}

.cp-addform-fields {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cp-addform-fields .cp-add-name,
.cp-addform-fields .cp-add-id {
  flex: 1 1 140px;
  min-width: 0;
  font-size: 13px;
}

.cp-add-confirm {
  flex: 0 0 auto;
}

.cp-add-cancel {
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary, var(--text-muted));
  border-radius: 8px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .14s, color .14s;
}

.cp-add-cancel:hover {
  border-color: var(--color-primary);
  color: var(--text-primary);
}

.cp-add-error {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-danger, #e05252);
}

@media (max-width: 560px) {
  .cp-addform-fields {
    gap: 8px 8px;
  }

  .cp-addform-fields .cp-add-name,
  .cp-addform-fields .cp-add-id {
    flex: 1 1 100%;
  }

  .cp-add-confirm,
  .cp-add-cancel {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* The rich row is a block container, not the flex pick/check row. */
.cp-row.cp-rich {
  display: block;
  padding: 0;
  cursor: default;
  overflow: hidden;
  background: var(--bg-card, var(--bg-input));
  font-weight: 400;
}

.cp-row.cp-rich:hover {
  border-color: var(--border-color);
}

/* Confirmed (mint) only once the required setup is complete; while a ticked
   row is still missing a mandatory field it shows the amber incomplete look. */
.cp-row.cp-rich.is-checked:not(.is-incomplete) {
  border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
  background: color-mix(in srgb, var(--color-primary) 6%, var(--bg-card, var(--bg-input)));
}

.cp-row.cp-rich.is-incomplete {
  border-color: color-mix(in srgb, var(--color-warning) 45%, transparent);
  background: var(--color-warning-bg);
}

.cp-rich-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
}

.cp-select {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin: 0;
}

.cp-select .cp-row-checkbox {
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.cp-rich-meta {
  flex: 1 1 auto;
  min-width: 0;
}

.cp-rich-name {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cp-rich-sub {
  font-size: var(--font-size-xs, 12px);
  color: var(--text-muted);
  margin-top: 1px;
}

.cp-head-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
}

/* Channel-type segmented control — required, no default. */
.cp-market-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-input);
  transition: border-color .14s, box-shadow .14s;
}

.cp-mkt-btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  color: var(--text-secondary, var(--text-muted));
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  padding: 7px 14px;
  cursor: pointer;
  transition: background .14s, color .14s;
}

.cp-mkt-btn:hover {
  color: var(--text-primary);
}

.cp-mkt-btn + .cp-mkt-btn {
  border-left: 1px solid var(--border-color);
}

.cp-mkt-btn.is-active {
  background: var(--color-primary);
  color: var(--color-on-primary, #04110d);
}

/* Options toggle (optional extras). */
.cp-opts-toggle {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary, var(--text-muted));
  border-radius: 8px;
  padding: 6px 11px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .14s, color .14s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.cp-opts-toggle:hover {
  border-color: var(--color-primary);
  color: var(--text-primary);
}

.cp-opts-toggle .cp-caret {
  transition: transform .16s;
}

.cp-opts-toggle[aria-expanded="true"] .cp-caret {
  transform: rotate(180deg);
}

/* Required setup (market + account) — inline, animated open/close. JS sets
   max-height to the measured content height so the reveal glides. */
.cp-scope {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 13px;
  border-top: 0 solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: max-height .26s ease, opacity .18s ease, padding .26s ease;
}

.cp-scope.open {
  opacity: 1;
  padding: 10px 13px 12px;
  border-top: 1px solid var(--border-color);
}

.cp-list.cp-anim-off .cp-scope {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .cp-scope {
    transition: none;
  }
}

.cp-scope-hint {
  font-size: 12.5px;
  color: var(--text-secondary, var(--text-primary));
  background: var(--color-warning-bg);
  border: 1px solid color-mix(in srgb, var(--color-warning) 28%, transparent);
  border-radius: 8px;
  padding: 8px 11px;
}

.cp-scope-hint strong {
  color: var(--color-warning);
}

/* Account/exchange title above the checklist. */
.cp-acct-title {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cp-acct-hint {
  text-transform: none;
  font-weight: 400;
  color: var(--color-warning);
}

/* Mint account/exchange checklist — the .acct-pick markup, scoped to .cp so
   it also works standalone (a host page's own .acct-pick rules still win when
   this component is embedded there). */
.cp .acct-pick-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 210px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-input);
}

.cp .acct-pick {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-secondary, var(--text-muted));
  line-height: 1.25;
  transition: background .13s, border-color .13s, color .13s;
  -webkit-user-select: none;
  user-select: none;
}

.cp .acct-pick:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--text-primary);
}

.cp .acct-pick:has(input:checked) {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
  color: var(--text-primary);
}

/* Custom mint checkbox — matches the deployed Telegram-prod look (the standard
   every source now mirrors): a themed box that fills mint with a drawn tick,
   not the browser's native accent box. */
.cp .acct-pick input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  border-radius: 6px;
  border: 1.6px solid var(--border-color);
  background: var(--bg-input);
  cursor: pointer;
  position: relative;
  transition: background .13s, border-color .13s, box-shadow .13s;
}
.cp .acct-pick input[type="checkbox"]:hover {
  border-color: var(--color-primary);
}
.cp .acct-pick input[type="checkbox"]:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.cp .acct-pick input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5.5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid var(--color-on-primary);
  border-width: 0 2.2px 2.2px 0;
  transform: rotate(45deg);
}
.cp .acct-pick input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.cp .acct-pick-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The required picker pulses the same amber way the type control does when
   it's the pending mandatory step. */
.cp-market-toggle.cp-needs-pick,
.cp .acct-pick-list.cp-needs-pick {
  border-color: color-mix(in srgb, var(--color-warning) 55%, transparent);
  animation: cpPulse 1.35s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cp-market-toggle.cp-needs-pick,
  .cp .acct-pick-list.cp-needs-pick {
    animation: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-warning) 35%, transparent);
  }
}

/* Options panel (collapsed by default). */
.cp-adv {
  padding: 2px 13px 13px;
  border-top: 1px solid var(--border-color);
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.cp-adv[hidden] {
  display: none;
}

.cp-adv-block {
  padding-top: 8px;
}

.cp-check-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}

.cp-check-line input[type="checkbox"] {
  accent-color: var(--color-primary);
  cursor: pointer;
}

.cp-muted {
  color: var(--text-muted);
  font-weight: 400;
}

.cp-risk-label {
  font-size: 13px;
  display: block;
  margin-bottom: 3px;
}

.cp-risk-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* Pair combobox row (shared .pcx-* look, scoped to .cp for standalone use). */
.cp .pcx-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.cp .pcx-input {
  flex: 1 1 auto;
  min-width: 0;
}

.cp .pcx-add {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary, var(--text-muted));
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.cp .pcx-add:hover {
  border-color: var(--color-primary);
  color: var(--text-primary);
}

/* Mobile: name gets its own line; the type toggle + Options drop below it so
   nothing overlaps on a narrow screen. */
@media (max-width: 560px) {
  .cp-rich-head {
    flex-wrap: wrap;
    gap: 8px 10px;
  }

  .cp-rich-name {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .cp-head-actions {
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  .cp-market-toggle,
  .cp-mkt-btn {
    flex: 1 1 auto;
    text-align: center;
  }

  .cp-opts-toggle {
    margin-left: auto;
  }
}

/* ── Browse panel (group -> items) and the sender picker ─────────────────────
   Shared look: a bordered panel holding a search box and a short scrolling
   list. Used by `capabilities.browse` and by the sender picker in a row. */
.cp-browse,
.cp-users-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--border-color));
  border-radius: var(--border-radius-sm);
  background: var(--bg-input);
}

.cp-browse {
  margin-bottom: var(--space-2, 8px);
}

.cp-users-panel {
  margin-top: 8px;
}

.cp-browse[hidden],
.cp-users-panel[hidden] {
  display: none;
}

.cp-browse-btn[aria-expanded="true"] {
  border-color: var(--color-primary);
  color: var(--text-primary);
}

.cp-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cp-panel-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-panel-search {
  font-size: 13px;
}

.cp-panel-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
}

.cp-panel-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
}

button.cp-panel-item,
label.cp-panel-item {
  cursor: pointer;
}

button.cp-panel-item:hover,
label.cp-panel-item:hover {
  border-color: var(--color-primary);
}

.cp-panel-item-text {
  flex: 1 1 auto;
  min-width: 0;
}

.cp-panel-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-panel-item-meta {
  font-size: 11.5px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-browse-add:disabled {
  opacity: .55;
  cursor: default;
}

.cp-panel-note {
  font-size: 12.5px;
  color: var(--text-muted);
  padding: 4px 2px;
}

.cp-panel-note.is-error {
  color: var(--color-loss);
}

.cp-users-pick {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 6px 0 0;
  color: var(--color-primary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* Panel buttons keep their own width; the narrow-screen rule that stretches
   .cp-add-cancel would otherwise make "Add" as wide as the channel name. */
.cp-browse .cp-browse-add,
.cp-browse .cp-browse-back {
  flex: 0 0 auto;
}