/* ============================================================
 * רכיב "שאלה עם תשובות" (agent-ask-options.js).
 * כרטיס שאלה אינטראקטיבי בתוך בועת ההודעה, בסגנון הממותג של הפרוקסי
 * (צבעי --brand-*, RTL, מצב כהה). מעוצב בקו אחד עם תפריטי הבוררים
 * (analytics-site-picker) — מסגרת מותג, כותרת מודגשת, אפשרויות-לחיצה.
 * ============================================================ */

.agent-ask-hidden {
  display: none !important;
}

.agent-ask-choice-hidden {
  display: none !important;
}

.agent-ask-card {
  direction: rtl !important;
  margin: 12px 0 !important;
  padding: 14px 16px !important;
  border: 1.5px solid var(--brand-medium, #25408f) !important;
  border-radius: 14px !important;
  background: var(--surface-secondary, #f7f9fc) !important;
  box-shadow: 0 2px 10px rgba(37, 64, 143, 0.08) !important;
  font-family: inherit !important;
  animation: agent-ask-fade 0.2s ease !important;
}

@keyframes agent-ask-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== כותרת ===== */
.agent-ask-card .agent-ask-head {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.agent-ask-card .agent-ask-icon {
  display: inline-flex !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
  color: var(--brand-medium, #25408f) !important;
}

.agent-ask-card .agent-ask-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--brand-dark, #16213f) !important;
}

.agent-ask-card .agent-ask-note {
  margin-top: 2px !important;
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  color: var(--brand-dark, #16213f) !important;
  opacity: 0.7 !important;
}

/* ===== אפשרויות ===== */
.agent-ask-card .agent-ask-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.agent-ask-card .agent-ask-option {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 9px !important;
  width: 100% !important;
  padding: 10px 12px !important;
  border: 1.5px solid rgba(37, 64, 143, 0.35) !important;
  border-radius: 10px !important;
  background: var(--surface-primary, #ffffff) !important;
  text-align: right !important;
  cursor: pointer !important;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;
}

.agent-ask-card .agent-ask-option:hover {
  background: rgba(37, 64, 143, 0.07) !important;
  border-color: var(--brand-medium, #25408f) !important;
}

.agent-ask-card .agent-ask-option:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px var(--brand-light, #7dd2ef) !important;
}

.agent-ask-card .agent-ask-option-check {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 20px !important;
  height: 20px !important;
  margin-top: 1px !important;
  border: 1.5px solid var(--brand-medium, #25408f) !important;
  border-radius: 6px !important;
  color: #fff !important;
  background: transparent !important;
}

.agent-ask-card .agent-ask-option-check svg {
  visibility: hidden !important;
}

.agent-ask-card .agent-ask-option-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 1 auto !important;
}

.agent-ask-card .agent-ask-option-label {
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--brand-dark, #16213f) !important;
}

.agent-ask-card .agent-ask-option-desc {
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: var(--brand-dark, #16213f) !important;
  opacity: 0.72 !important;
}

/* האפשרות שנבחרה — מילוי מותג + סימן ✓ */
.agent-ask-card .agent-ask-option.is-chosen {
  background: rgba(37, 64, 143, 0.1) !important;
  border-color: var(--brand-medium, #25408f) !important;
}

.agent-ask-card .agent-ask-option.is-chosen .agent-ask-option-check {
  background: var(--brand-medium, #25408f) !important;
}

.agent-ask-card .agent-ask-option.is-chosen .agent-ask-option-check svg {
  visibility: visible !important;
}

/* ===== טופס רב-שאלות: קבוצת-שאלה לכל שאלה + כפתור שליחה יחיד ===== */
.agent-ask-card .agent-ask-groups {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.agent-ask-card .agent-ask-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 12px !important;
  border: 1px solid rgba(37, 64, 143, 0.18) !important;
  border-radius: 12px !important;
  background: rgba(37, 64, 143, 0.025) !important;
  transition: border-color 0.18s ease, background-color 0.18s ease !important;
}

.agent-ask-card .agent-ask-group-title {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--brand-dark, #16213f) !important;
}

.agent-ask-card .agent-ask-group.is-missing {
  border-color: #e0526b !important;
  background: rgba(224, 82, 107, 0.06) !important;
}

.agent-ask-card .agent-ask-submit {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch !important;
  margin-top: 14px !important;
  padding: 11px 18px !important;
  border: none !important;
  border-radius: 10px !important;
  background: var(--brand-medium, #25408f) !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background-color 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease !important;
}

.agent-ask-card .agent-ask-submit:hover:not(:disabled) {
  background: var(--brand-dark, #16213f) !important;
}

.agent-ask-card .agent-ask-submit:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px var(--brand-light, #7dd2ef) !important;
}

.agent-ask-card .agent-ask-submit:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* ===== כרטיס תשובת משתמש: רק האפשרות שנבחרה, לא אינטראקטיבי ===== */
.agent-ask-card.agent-ask-choice-card {
  margin: 6px 0 4px !important;
  padding: 12px 14px !important;
}

.agent-ask-card.agent-ask-choice-card .agent-ask-head {
  margin-bottom: 8px !important;
}

.agent-ask-card.agent-ask-choice-card .agent-ask-icon svg {
  width: 18px !important;
  height: 18px !important;
}

.agent-ask-card.agent-ask-choice-card .agent-ask-option {
  cursor: default !important;
}

.agent-ask-card.agent-ask-choice-card .agent-ask-option:hover {
  background: rgba(37, 64, 143, 0.1) !important;
  border-color: var(--brand-medium, #25408f) !important;
}

.agent-ask-card.agent-ask-choice-card .agent-ask-groups {
  gap: 10px !important;
}

.agent-ask-card.agent-ask-choice-card .agent-ask-group {
  padding: 10px !important;
}

/* ===== מצב "נענה" / לא-זמין (שאלה שאינה בהודעה האחרונה) ===== */
.agent-ask-card.is-answered .agent-ask-option {
  cursor: default !important;
  opacity: 0.6 !important;
}

.agent-ask-card.is-answered .agent-ask-option:not(.is-chosen):hover {
  background: var(--surface-primary, #ffffff) !important;
  border-color: rgba(37, 64, 143, 0.35) !important;
}

.agent-ask-card.is-answered .agent-ask-option.is-chosen {
  opacity: 1 !important;
}

/* ===== spinner ===== */
.agent-ask-spin {
  animation: agent-ask-spin 0.8s linear infinite !important;
}

@keyframes agent-ask-spin {
  to { transform: rotate(360deg); }
}

/* ===== placeholder בזמן כתיבה (שלד טעינה מרצד) ===== */
.agent-ask-card.agent-ask-card-loading .agent-ask-title {
  color: var(--brand-medium, #25408f) !important;
}

.agent-ask-skeletons {
  pointer-events: none !important;
}

.agent-ask-skeleton {
  height: 38px !important;
  border-radius: 10px !important;
  border: 1.5px solid rgba(37, 64, 143, 0.18) !important;
  background:
    linear-gradient(100deg,
      rgba(37, 64, 143, 0.05) 30%,
      rgba(37, 64, 143, 0.14) 50%,
      rgba(37, 64, 143, 0.05) 70%) !important;
  background-size: 200% 100% !important;
  animation: agent-ask-shimmer 1.2s ease-in-out infinite !important;
}

.agent-ask-skeleton:nth-child(2) { opacity: 0.82 !important; animation-delay: 0.15s !important; }
.agent-ask-skeleton:nth-child(3) { opacity: 0.64 !important; animation-delay: 0.3s !important; }

@keyframes agent-ask-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

html[data-theme="dark"] .agent-ask-skeleton {
  border-color: rgba(125, 210, 239, 0.18) !important;
  background:
    linear-gradient(100deg,
      rgba(125, 210, 239, 0.05) 30%,
      rgba(125, 210, 239, 0.13) 50%,
      rgba(125, 210, 239, 0.05) 70%) !important;
  background-size: 200% 100% !important;
}

/* ===== Dark mode ===== */
html[data-theme="dark"] .agent-ask-card {
  border-color: var(--brand-light, #7dd2ef) !important;
  background: rgba(125, 210, 239, 0.06) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .agent-ask-card .agent-ask-icon {
  color: var(--brand-light, #7dd2ef) !important;
}

html[data-theme="dark"] .agent-ask-card .agent-ask-title,
html[data-theme="dark"] .agent-ask-card .agent-ask-note,
html[data-theme="dark"] .agent-ask-card .agent-ask-option-label,
html[data-theme="dark"] .agent-ask-card .agent-ask-option-desc {
  color: var(--brand-light, #7dd2ef) !important;
}

html[data-theme="dark"] .agent-ask-card .agent-ask-option {
  border-color: rgba(125, 210, 239, 0.35) !important;
  background: rgba(125, 210, 239, 0.04) !important;
}

html[data-theme="dark"] .agent-ask-card .agent-ask-option:hover {
  background: rgba(125, 210, 239, 0.14) !important;
  border-color: var(--brand-light, #7dd2ef) !important;
}

html[data-theme="dark"] .agent-ask-card .agent-ask-option-check {
  border-color: var(--brand-light, #7dd2ef) !important;
  color: #0b1220 !important;
}

html[data-theme="dark"] .agent-ask-card .agent-ask-option.is-chosen {
  background: rgba(125, 210, 239, 0.16) !important;
}

html[data-theme="dark"] .agent-ask-card .agent-ask-option.is-chosen .agent-ask-option-check {
  background: var(--brand-light, #7dd2ef) !important;
}

html[data-theme="dark"] .agent-ask-card.agent-ask-choice-card .agent-ask-option:hover {
  background: rgba(125, 210, 239, 0.16) !important;
  border-color: var(--brand-light, #7dd2ef) !important;
}

html[data-theme="dark"] .agent-ask-card.is-answered .agent-ask-option:not(.is-chosen):hover {
  background: rgba(125, 210, 239, 0.04) !important;
  border-color: rgba(125, 210, 239, 0.35) !important;
}

html[data-theme="dark"] .agent-ask-card .agent-ask-group {
  border-color: rgba(125, 210, 239, 0.2) !important;
  background: rgba(125, 210, 239, 0.03) !important;
}

html[data-theme="dark"] .agent-ask-card .agent-ask-group-title {
  color: var(--brand-light, #7dd2ef) !important;
}

html[data-theme="dark"] .agent-ask-card .agent-ask-group.is-missing {
  border-color: #f08097 !important;
  background: rgba(240, 128, 151, 0.08) !important;
}

html[data-theme="dark"] .agent-ask-card .agent-ask-submit {
  background: var(--brand-light, #7dd2ef) !important;
  color: #0b1220 !important;
}

html[data-theme="dark"] .agent-ask-card .agent-ask-submit:hover:not(:disabled) {
  background: #9ee0f5 !important;
}