/* ══════ APP UI (app-ui.js) — reusable widgets not owned by one feature ══════ */

/* ── chat picker: character step + chat step, each a rich <select> ── */
.cp-chat-field { margin-top: .5rem; }

.cp-rs { position: relative; }
.cp-native { position: absolute; inset: 0; width: 100%; opacity: 0; pointer-events: none; }
.cp-rs [hidden] { display: none; }
.cp-trigger { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .5rem .65rem; min-height: 42px;
  text-align: left; border-radius: var(--r); background: var(--input-bg); border: 1.5px solid var(--border); color: var(--text); font-size: 14px; }
.cp-trigger:hover:not(:disabled) { border-color: var(--accent); }
.cp-trigger:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.cp-trigger:disabled { opacity: .55; cursor: default; }
.cp-trigger.cp-empty .cp-label { color: var(--text3); }
.cp-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-caret { flex: none; color: var(--text3); font-size: 11px; padding-right: .25rem; transition: transform .12s; }
.cp-trigger[aria-expanded="true"] .cp-caret { transform: rotate(180deg); }
.cp-av { flex: none; width: 28px; height: 28px; border-radius: var(--r); background: var(--bg3) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center; font-size: 16px; overflow: hidden; }

.cp-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + .3rem); max-height: 280px; overflow-y: auto;
  overscroll-behavior: contain; padding: .25rem; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-lg); }
.cp-up .cp-list { top: auto; bottom: calc(100% + .3rem); }
.cp-option { display: flex; align-items: center; gap: .5rem; padding: .35rem .45rem; border-radius: var(--r); cursor: pointer; }
.cp-option.active { background: var(--bg3); }
.cp-option[aria-selected="true"] { background: color-mix(in srgb, var(--accent-btn) 16%, transparent); }
.cp-option[aria-selected="true"].active { background: color-mix(in srgb, var(--accent-btn) 26%, transparent); }
.cp-blank { color: var(--text3); }
.cp-text { min-width: 0; display: flex; flex-direction: column; }
.cp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-sub { font-size: 11.5px; color: var(--text3); }