/* 1.19 — الاستطلاعات في المحادثة والساحة (ui/poll.js · ui/poll-composer.js). كل صنف هنا .pl-* (البطاقة) أو .plc-* (المحرّر).
   البطاقة واحدة في فقاعة المحادثة (تأخذ ألوان الفقاعة: currentColor والخلفية) وفي بطاقة «الساحة». */

/* ═══ ١. البطاقة ═════════════════════════════════════════════════════════ */
.pl {
  --pl-line: color-mix(in srgb, currentColor 16%, transparent);
  --pl-soft: color-mix(in srgb, currentColor 7%, transparent);
  --pl-bar: color-mix(in srgb, var(--accent) 22%, transparent);
  --pl-bar-mine: color-mix(in srgb, var(--accent) 36%, transparent);
  display: grid; gap: 8px; min-width: min(260px, 66vw); padding: 2px 0 2px;
  -webkit-user-select: none; user-select: none;
}
.th-bubble .pl { padding-top: 4px; }
.pl-head { display: flex; align-items: flex-start; gap: 8px; }
.pl-ic { font-size: 20px; line-height: 1.25; flex: none; }
.pl-hm { flex: 1; min-width: 0; }
.pl-q { font-weight: 700; font-size: var(--fz-base); line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.pl-q-tag { font-size: var(--fz-sm); color: var(--accent); }
.pl-kind { font-size: var(--fz-xs); opacity: .62; margin-top: 2px; }
.pl-more {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin: -4px -6px -4px -4px;
  border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: .6; cursor: pointer;
}
.pl-more:active { background: var(--pl-soft); }
.pl-more .icon-svg { width: 18px; height: 18px; }

.pl-opts { display: grid; gap: 6px; }
.pl-opt {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; width: 100%;
  padding: 8px 12px; border: 1px solid var(--pl-line); border-radius: var(--r-md);
  background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; overflow: hidden; isolation: isolate;
  transition: border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.pl-opt:not(.pl-res):active { transform: scale(.985); background: var(--pl-soft); }
.pl-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pl-opt.pl-picked { border-color: var(--accent); background: var(--accent-soft); }
.pl-opt.pl-res { cursor: default; }
.pl:not(.pl-closed) .pl-opt.pl-res { cursor: pointer; }
.pl-bar {
  position: absolute; inset-block: 0; inset-inline-start: 0; z-index: -1; width: 0;
  background: var(--pl-bar); border-radius: inherit;
  transition: width 520ms cubic-bezier(.22, 1, .36, 1);
}
.pl-mine .pl-bar { background: var(--pl-bar-mine); }
.pl-mine { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.pl-mark {
  flex: none; display: grid; place-items: center; width: 20px; height: 20px;
  border: 2px solid color-mix(in srgb, currentColor 38%, transparent); border-radius: 50%; color: var(--accent-fg);
  transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.pl-multi .pl-mark { border-radius: 6px; }
.pl-picked .pl-mark, .pl-mine .pl-mark { background: var(--accent); border-color: var(--accent); }
.pl-mark svg { width: 14px; height: 14px; }
.pl-res:not(.pl-mine) .pl-mark { opacity: .0; width: 0; margin-inline-end: -10px; border-width: 0; }
.pl-tx { flex: 1; min-width: 0; line-height: 1.4; overflow-wrap: anywhere; }
.pl-pc { flex: none; font-weight: 800; font-size: var(--fz-sm); font-variant-numeric: tabular-nums; }
.pl-lead .pl-pc { color: var(--accent); }

.pl-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: var(--fz-xs); min-height: 24px; }
.pl-total { font-weight: 700; opacity: .75; }
.pl-dot { opacity: .45; }
.pl-when { display: inline-flex; align-items: center; gap: 3px; opacity: .65; }
.pl-when .icon-svg { width: 13px; height: 13px; }
.pl-ended { opacity: .8; font-weight: 700; }
.pl-acts { display: inline-flex; gap: 4px; margin-inline-start: auto; }
.pl-btn {
  border: 0; border-radius: var(--r-full); padding: 6px 12px; min-height: 32px;
  background: var(--pl-soft); color: var(--accent); font: inherit; font-size: var(--fz-sm); font-weight: 700; cursor: pointer;
}
.pl-btn:active { filter: brightness(.94); }
.pl-btn.pl-go { background: var(--accent); color: var(--accent-fg); }
.pl-btn:disabled { opacity: .45; cursor: default; }
.pl-pending { opacity: .7; pointer-events: none; }
.pl-pending .pl-opt { cursor: default; }

/* في فقاعة المحادثة: البطاقة أعرض قليلاً، والوقت تحتها في سطرها */
.th-bubble.th-poll { width: min(320px, calc(80vw - 24px)); }     /* عرض ثابت: التصويت لا يغيّر حجم الفقاعة */
.th-bubble.th-poll .pl { min-width: 0; }
.th-poll .th-meta-row { padding-top: 2px; }
/* في «الساحة»: تحت نصّ المنشور (السؤال) بإطار هادئ */
.sa-card .pl { margin-top: 8px; color: var(--fg); }

/* ═══ ٢. الأوراق: الخيارات والمصوّتون ═════════════════════════════════════ */
.pl-sheet .sheet-sub { white-space: pre-wrap; overflow-wrap: anywhere; }
.pl-vchips { padding: 2px 0 10px; margin-inline: -4px; }
.pl-vchip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; max-width: 220px; }
.pl-vchip b { font-weight: 800; opacity: .75; font-variant-numeric: tabular-nums; }
.pl-vfoot { display: grid; place-items: center; min-height: 56px; }
.pl-vempty { padding: 32px 16px; text-align: center; color: var(--fg-3); }
.pl-spin {
  display: inline-block; width: 20px; height: 20px; border-radius: 50%; color: var(--fg-3);
  border: 2px solid currentColor; border-top-color: transparent; animation: spin .8s linear infinite;
}

/* ═══ ٣. المحرّر (ورقة «استطلاع جديد» وحقوله في محرّر الساحة) ═════════════ */
.plc-sheet .sheet-title { display: flex; align-items: center; gap: 8px; }
.plc-sheet .sheet-title .icon-svg { color: var(--accent); }
.plc-body { display: grid; gap: 12px; }
.plc-sheet .field, .sa-c-poll .field { gap: 8px; }
.plc-q { min-height: 64px !important; }
.plc-count-row { display: flex; justify-content: flex-end; margin-top: -4px; }
.plc-count.is-over { color: var(--danger); }
.plc-opts { display: grid; gap: 8px; }
.plc-opt { display: flex; align-items: center; gap: 8px; animation: plc-in var(--dur-2) var(--ease) both; }
.plc-n {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-size: var(--fz-xs); font-weight: 800;
}
.plc-in { flex: 1; min-width: 0; height: 44px; }
.plc-in.is-bad, .plc-q.is-bad { border-color: var(--danger); }
.plc-x {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: transparent; color: var(--fg-3); cursor: pointer;
}
.plc-x:active { background: var(--bg-2); }
.plc-x[hidden] { display: none; }
.plc-x .icon-svg { width: 18px; height: 18px; }
.plc-add { justify-self: start; display: inline-flex; align-items: center; gap: 6px; }
.plc-add[hidden] { display: none; }
.plc-add .icon-svg { width: 18px; height: 18px; }
.plc-sw { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px; cursor: pointer; }
.plc-sw b { display: block; font-weight: 700; font-size: var(--fz-base); }
.plc-sw small { display: block; color: var(--fg-3); font-size: var(--fz-sm); margin-top: 2px; }
.plc-locked { cursor: default; }
.plc-locked .switch { opacity: .6; }
.plc-durs { display: flex; flex-wrap: wrap; gap: 8px; }
.plc-dur { cursor: pointer; }
.plc-err { margin: 10px 4px 0; color: var(--danger); font-size: var(--fz-sm); font-weight: 600; }
.plc-err[hidden] { display: none; }
.plc-sheet.is-busy .plc-body { opacity: .6; pointer-events: none; }
.plc-sheet .sheet-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
@keyframes plc-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* محرّر «الساحة»: صندوق الحقول تحت النص، ومفتاح الأداة */
.sa-c-poll { display: grid; gap: 12px; margin: 4px 0 12px; padding: 12px; border: 1px solid var(--sep); border-radius: var(--r-lg); }
.sa-c-poll[hidden] { display: none; }
.sa-c-poll-h { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.sa-c-poll-h span:first-child { font-size: 18px; }
.sa-c-poll-h .sa-c-poll-x { margin-inline-start: auto; }
button.sa-c-tool { border: 0; background: transparent; font: inherit; font-size: var(--fz-md); font-weight: 700; }
.sa-c-tool[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); }
/* الهواتف الضيّقة: الأدوات أيقونات بلا أسمائها (aria-label يسمّيها) كي يبقى العدد وحلقته في الشريط */
.sa-c-count { flex: none; }
@media (max-width: 460px) {
  .sa-c-tool > span:not(.icon-svg) { display: none; }
  .sa-c-tool { padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .pl-bar, .pl-opt, .pl-mark { transition: none; }
  .plc-opt { animation: none; }
}