/* «افزودن کانال دلخواه» → what next (customnext.js): the popup after a
   channel is reviewed (a bottom sheet on phones, a centred dialog on
   desktop), «قدم بعدی با این کانال» on a ready card, «نفری یک کانال رایگان»
   in the add form, and the card on top of «کانال سیگنال من». Built on
   copytrade.html's tokens (--g-*), light and dark, right to left; every
   class starts with cn- and nothing here applies without customnext.js's
   own nodes (or the class it puts on the page's limit line). */

body.cn-locked { overflow:hidden; }

/* ---- the popup ---- */
.cn-scrim {
  position:fixed; inset:0; z-index:95; display:grid; place-items:center; padding:24px 16px;
  background:var(--g-scrim); overscroll-behavior:contain;
}
.cn-dialog {
  position:relative; width:min(460px, calc(100vw - 32px)); max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px);
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:22px 20px 16px; background:var(--g-card); color:var(--g-ink);
  border:1px solid var(--g-line); border-radius:20px; box-shadow:var(--g-pop);
  font-family:'Vazirmatn','IRANSans',Tahoma,sans-serif; direction:rtl; text-align:center;
  animation:cn-in .18s ease-out;
}
.cn-dialog:focus { outline:none; }
.cn-dialog :where(h2, p) { margin:0; }
.cn-dialog :where(button, a) { font-family:inherit; }
.cn-dialog bdi, .cn-handoff bdi { unicode-bidi:isolate; }
@keyframes cn-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.cn-grab { display:none; width:40px; height:4px; margin:-8px auto 12px; border-radius:99px; background:var(--g-line); }
.cn-x {
  position:absolute; top:10px; inset-inline-end:10px; width:40px; height:40px; border:0; border-radius:50%;
  display:grid; place-items:center; background:none; color:var(--g-ink-3); cursor:pointer;
}
.cn-x:hover { background:var(--g-flat-soft); color:var(--g-ink); }
.cn-hero {
  width:52px; height:52px; margin:2px auto 10px; border-radius:50%; display:grid; place-items:center;
  color:var(--g-up); background:var(--g-up-soft);
}
.cn-title { font-size:18px; font-weight:800; line-height:1.6; }

.cn-src { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:8px; min-width:0; }
.cn-src .ct-avatar { width:38px; height:38px; font-size:15px; }
.cn-src-id { display:flex; flex-direction:column; align-items:flex-start; min-width:0; text-align:start; }
.cn-src-name { font-size:14.5px; font-weight:800; line-height:1.6; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cn-src-facts { font-size:12px; font-weight:700; color:var(--g-ink-2); line-height:1.7; }

.cn-q { margin-top:16px; font-size:15px; font-weight:800; line-height:1.7; }
.cn-choices { display:grid; gap:10px; margin-top:12px; }
.cn-choice {
  display:flex; align-items:center; gap:12px; width:100%; min-height:76px; padding:12px 14px;
  border:1.5px solid var(--g-line); border-radius:16px; background:var(--g-card); color:var(--g-ink);
  text-align:start; cursor:pointer; transition:border-color .15s, background .15s;
}
.cn-choice:hover { border-color:var(--g-teal-line); background:var(--g-teal-soft); }
.cn-choice:focus-visible { outline:2px solid var(--g-teal); outline-offset:2px; }
.cn-choice-ico {
  flex:none; width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  color:var(--g-teal-ink); background:var(--g-teal-soft); border:1px solid var(--g-teal-line);
}
.cn-choice-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.cn-choice-text b { font-size:14.5px; font-weight:800; line-height:1.7; }
.cn-choice-text small { font-size:12px; font-weight:600; line-height:1.8; color:var(--g-ink-2); }
/* The three choices (owner, 2026-10-20): two with an icon, one line each; «هیچ‌کدام» the quiet third (it closes). */
.cn-choices .cn-choice { min-height:60px; }
.cn-choice-text:has(> .cn-soon-chip) { flex-direction:row; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.cn-soon-chip {
  display:inline-flex; align-items:center; padding:0 8px; border-radius:99px; border:1px dashed var(--ct-soon-line, #C98A1B);
  background:var(--ct-soon-bg, #FFF4DB); color:var(--ct-soon-ink, #7A4B00); font-size:11.5px; font-weight:800; line-height:1.8;
}
.cn-choice.cn-none { min-height:48px; justify-content:center; border-style:dashed; color:var(--g-ink-2); }
.cn-choice.cn-none .cn-choice-text b { font-weight:700; }
.cn-choice.cn-none:hover { background:var(--g-flat-soft); border-color:var(--g-line); }

.cn-later {
  display:block; width:100%; min-height:44px; margin-top:8px; border:0; border-radius:12px; background:none;
  color:var(--g-ink-3); font-size:13.5px; font-weight:700; cursor:pointer;
}
.cn-later:hover { background:var(--g-flat-soft); color:var(--g-ink); }
.cn-later:focus-visible, .cn-x:focus-visible, .cn-btn:focus-visible, .cn-next-btn:focus-visible { outline:2px solid var(--g-teal); outline-offset:2px; }

.cn-soon {
  margin-top:10px; padding:12px 14px; border-radius:14px; text-align:start;
  background:var(--g-teal-soft); border:1px solid var(--g-teal-line); color:var(--g-ink);
  font-size:14px; font-weight:700; line-height:1.9;
}
.cn-saved {
  display:flex; align-items:center; justify-content:center; gap:6px; margin-top:10px;
  font-size:13px; font-weight:800; color:var(--g-up); line-height:1.8; text-align:center;
}
.cn-saved .ico { flex:none; }
.cn-acts { display:grid; gap:8px; margin-top:14px; }
.cn-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 16px;
  border:1px solid var(--g-line); border-radius:12px; background:var(--g-card); color:var(--g-ink);
  font-size:14px; font-weight:800; line-height:1.5; cursor:pointer;
}
.cn-btn:hover { background:var(--g-flat-soft); }
.cn-btn.primary { border-color:var(--g-teal); background:var(--g-teal); color:#fff; }
.cn-btn.primary:hover { filter:brightness(.94); background:var(--g-teal); }
.cn-btn:disabled { opacity:.55; cursor:default; }
:root[data-theme="dark"] .cn-btn.primary { color:#0B1314; }
.cn-acts .cn-later { margin-top:0; }

/* ---- «قدم بعدی با این کانال» on a ready card of the add tab ---- */
.cn-next { display:flex; justify-content:flex-start; padding-top:12px; border-top:1px dashed var(--g-line); }
.cn-next-btn {
  display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 16px; border-radius:99px;
  border:1px solid var(--g-teal-line); background:var(--g-teal-soft); color:var(--g-teal-ink);
  font-family:inherit; font-size:13.5px; font-weight:800; cursor:pointer;
}
.cn-next-btn:hover { filter:brightness(.97); }

/* ---- «نفری یک کانال رایگان» in the add form ---- */
.cn-peruser-note { display:flex; align-items:center; gap:6px; color:var(--g-ink-2); font-weight:700; }
.cn-peruser-note .ico { color:var(--g-teal); }
.ct-add-limit.cn-peruser .ico:not(.cn-ico) { display:none; }

/* ---- the card on top of «کانال سیگنال من» ---- */
.cn-handoff {
  position:relative; margin:0 0 16px; padding:16px 18px; border-radius:18px;
  background:var(--g-card); color:var(--g-ink); border:1.5px solid var(--g-teal-line); box-shadow:var(--g-shadow);
  font-family:'Vazirmatn','IRANSans',Tahoma,sans-serif;
}
.cn-handoff:focus { outline:none; }
.cn-handoff .cn-x { top:8px; inset-inline-end:8px; }
.cn-hand-head { display:flex; align-items:center; gap:12px; padding-inline-end:40px; min-width:0; }
.cn-hand-head .ct-avatar { width:44px; height:44px; font-size:17px; }
.cn-hand-id { display:flex; flex-direction:column; min-width:0; }
.cn-hand-id h2 { margin:0; font-size:16px; font-weight:800; line-height:1.7; }
.cn-hand-text { margin:10px 0 0; font-size:13.5px; font-weight:600; line-height:1.9; color:var(--g-ink-2); }
.cn-handoff .cn-acts { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
/* Its button is mychannel.js's own for this source (mychannel.css .mc-cta), at a size of its own here. */
.cn-hand-cta:empty { display:none; }
.cn-hand-cta .mc-cta { width:auto; min-width:220px; min-height:44px; border-radius:12px; font-size:14.5px; padding:0 20px; }
.cn-hand-cta .mc-in-row { flex:1 1 auto; }
/* Its «افزودن این کانال به کانال من» while the source is getting ready (customnext.js stepPrep), and the line under it. */
.cn-btn.cn-busy { cursor:progress; opacity:.8; }
.cn-btn.cn-busy::before {
  content:''; flex:none; width:14px; height:14px; border-radius:50%;
  border:2px solid currentColor; border-inline-end-color:transparent; animation:cn-spin .8s linear infinite;
}
.cn-btn.cn-busy .ico { display:none; }
@keyframes cn-spin { to { transform:rotate(360deg); } }
.cn-hand-state { margin:10px 0 0; font-size:13px; font-weight:700; line-height:1.9; color:var(--g-ink-2); }
.cn-hand-state:empty { margin:0; }
.cn-hand-state[data-state="busy"] { padding:10px 12px; border-radius:12px; background:var(--g-teal-soft); border:1px solid var(--g-teal-line); color:var(--g-ink); }
.cn-hand-state[data-state="ready"] { color:var(--g-up); }


@media (prefers-reduced-motion:reduce) {
  .cn-dialog { animation:none; }
  .cn-choice { transition:none; }
  .cn-btn.cn-busy::before { animation:none; }
}

/* ---- phones: a bottom sheet ---- */
@media (max-width:760px) {
  .cn-scrim { place-items:end stretch; padding:24px 0 0; }
  .cn-dialog {
    width:100%; max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px);
    border-radius:20px 20px 0 0; border-bottom:0; padding:18px 16px calc(12px + env(safe-area-inset-bottom));
  }
  .cn-grab { display:block; }
  .cn-x { top:8px; inset-inline-end:8px; }
  .cn-handoff { padding:14px 16px; }
  .cn-handoff .cn-btn { flex:1 1 100%; }
  .cn-hand-cta .mc-cta { flex:1 1 100%; min-width:0; }
}
@media (max-width:360px) {
  .cn-choice { padding:10px 12px; gap:10px; }
  .cn-choice-ico { width:40px; height:40px; }
}