/* «اسأل» (js/pages/ask.js), owned by the "ask" page builder. Design "V4 Ask" (desktop) + "MK Phone Ask" (phone).
   Everything here is scoped to .ask* (every page's CSS is loaded on every page). Tokens: css/tokens.css. */

.ask {
  width: 100%; max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px;
  min-height: calc(100vh - 140px); min-height: calc(100dvh - 140px);
}

/* ---------- Hero: accent circle + sparkle, 34 px title, the "estimates" line ---------- */
.ask-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding-top: 16px; }
.ask-hero-ic {
  width: 60px; height: 60px; border-radius: 50%; background: var(--ac); color: var(--ink);
  display: grid; place-items: center; flex: none;
}
.ask-hero-ic .ph-fill { font-size: 26px; }
.ask-hero-text { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.ask-title { margin: 0; font-size: 34px; font-weight: 400; line-height: 1.3; }
.ask-sub { font-size: var(--fs-ui); color: var(--muted-2); }
.ask-honest { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.ask-honest:empty { display: none; }
.ask-honest .badge .n { font-family: var(--font-num); }

/* ---------- Prompt cards (design: 24 radius, 18 padding, min 150, icon 24, text 15/1.6) ---------- */
/* The grid always looks complete, whatever the number of cards (5 with «المقارنة» off, 6 with it on): desktop has 6
   tracks, 3 cards a row (span 2); a last row of 2 cards spans 3 each, a last single card the whole row. */
.ask-prompts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 701px) {
  .ask-prompts > .ask-prompt { grid-column: span 2; }
  .ask-prompts > .ask-prompt:nth-child(3n+1):nth-last-child(2),
  .ask-prompts > .ask-prompt:nth-child(3n+1):nth-last-child(2) ~ .ask-prompt { grid-column: span 3; }
  .ask-prompts > .ask-prompt:nth-child(3n+1):last-child { grid-column: 1 / -1; }
}
.ask-prompt.tile { border-radius: var(--r-card); padding: 18px; min-height: 150px; gap: 14px; justify-content: space-between; }
.ask-prompt .ph { font-size: 24px; }
.ask-prompt-t { font-size: var(--fs-body); line-height: 1.6; }

/* ---------- Thread: white questions on the start side (right in Arabic), dark answers on the end side ---------- */
.ask-thread { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.ask-row { display: flex; justify-content: flex-end; scroll-margin: 20px 0 150px; }
.ask-row.me { justify-content: flex-start; }
.ask-bubble {
  max-width: min(680px, 88%); border-radius: var(--r-card); padding: 14px 18px; font-size: var(--fs-body); line-height: 1.8;
  white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0;
}
.ask-bubble.me { background: var(--white); color: var(--ink); }
.ask-ai { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: min(680px, 88%); min-width: 0; }
.ask-bubble.ai {
  max-width: 100%; background: var(--card); color: var(--text); white-space: normal;
  display: flex; flex-direction: column; gap: 12px;
}
.ask-answer { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; text-align: start; }
.ask-bubble.cant .ask-answer { color: var(--soft); }

/* [r1] citation chips (inline; the invisible ::after makes the touch area 44 px tall) */
.ask-ref {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px; margin: 0 3px; border: none; border-radius: var(--r-pill);
  background: var(--raised); color: var(--text); font-family: var(--font-num); font-size: var(--fs-small); font-weight: 500;
  line-height: 1; vertical-align: 2px; transition: background var(--t-fast), color var(--t-fast);
}
.ask-ref::after { content: ''; position: absolute; inset: -11px -4px; }
.ask-ref:hover { background: var(--dot-off); }
.ask-ref[aria-expanded="true"] { background: var(--ac); color: var(--ink); }

/* The cited review: the shared review card (inner tone) inside the answer bubble */
.ask-refslot:empty { display: none; }
.ask-refcard { white-space: normal; scroll-margin: 20px 0 150px; }
.ask-refcard .rcard-av { font-size: var(--fs-ui); }
.ask-refcard .rcard-who { gap: 4px; }
.ask-refcard .btn-icon { width: 36px; height: 36px; }
.ask-refcard .rcard-text { font-size: var(--fs-ui); line-height: 1.7; }

/* Check notes under an answer */
.ask-note { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: var(--fs-small); color: var(--muted-2); line-height: 1.6; }
.ask-note .ph { font-size: 15px; color: var(--ac); flex: none; margin-top: 2px; }
.ask-note.partly .ph { color: var(--alert-amber); }

/* Waiting chip (design: «أقرأ المراجعات…» on #1C1C1C) + the calm typing pulse (.m-typing, css/motion.css) */
.ask-wait {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: var(--r-card);
  background: var(--card); font-size: var(--fs-ui); color: var(--muted);
}
.ask-wait-slow { font-size: var(--fs-small); color: var(--muted-2); padding: 0 6px; }

/* Errors / the limit in the thread */
.ask-ai .alert { width: min(520px, 100%); }

/* «لا أستطيع الإجابة…»: questions to try */
.ask-suggest { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: 100%; }
.ask-suggest-h { font-size: var(--fs-small); color: var(--muted-2); }
.ask-suggest .fchips { justify-content: flex-end; }
/* English: a question longer than the phone screen wraps inside its chip (no part is pushed off the start edge).
   The Arabic questions are short and stay on one line, exactly as before. */
:root[dir="ltr"] .ask-suggest .fchips { max-width: 100%; }
:root[dir="ltr"] .ask-suggest .fchip {
  height: auto; min-height: 42px; max-width: 100%; padding-block: 8px; white-space: normal; text-align: start;
  line-height: 1.5;
}

/* ---------- The floating composer (design: sticky, #1C1C1C, 32 radius, 8 padding, 50 px send) ---------- */
.ask-dock {
  position: sticky; bottom: 0; z-index: 5; display: flex; flex-direction: column; gap: 8px;
  margin-top: -20px; padding: 20px 0 16px;
  background: linear-gradient(to top, var(--bg) calc(100% - 20px), rgba(0, 0, 0, 0));
}
.ask-composer {
  display: flex; align-items: flex-end; gap: 8px; margin: 0; padding: 8px; border-radius: 32px;
  background: var(--card); box-shadow: var(--float-shadow);
}
.ask-input {
  flex: 1; min-width: 0; height: 48px; max-height: 140px; resize: none; overflow-y: auto; border: none; outline: none;
  background: transparent; color: var(--text); font: inherit; font-size: var(--fs-body); line-height: 1.6; padding: 12px 16px;
}
.ask-send {
  width: 50px; height: 50px; border: none; border-radius: 50%; background: var(--ac); color: var(--ink);
  display: grid; place-items: center; flex: none; transition: filter var(--t-fast), opacity var(--t-fast);
}
.ask-send:hover { filter: brightness(1.05); }
.ask-send:disabled { opacity: .45; }
.ask-send .ph { font-size: 20px; }
.ask-meta { display: flex; align-items: center; gap: 12px; min-height: 18px; padding: 0 20px; font-size: var(--fs-small); color: var(--muted-2); }
.ask-meta .n { color: var(--muted); }
.ask-count { margin-inline-start: auto; font-family: var(--font-num); }
.ask-count.near { color: var(--bad-text); }
.ask-limit {
  display: flex; align-items: center; gap: 12px; padding-block: 8px; padding-inline: 8px 22px; border-radius: 32px;
  background: var(--card); color: var(--muted); font-size: var(--fs-ui); box-shadow: var(--float-shadow);
}
.ask-limit-ic {
  width: 50px; height: 50px; border-radius: 50%; background: var(--raised); color: var(--text);
  display: grid; place-items: center; flex: none;
}
.ask-limit-ic .ph { font-size: 20px; }

/* ---------- Phone (design "MK Phone Ask") ---------- */
@media (max-width: 700px) {
  .ask { gap: 12px; min-height: calc(100vh - 174px); min-height: calc(100dvh - 174px); }
  .ask-hero { flex-direction: row; align-items: center; gap: 10px; text-align: start; padding-top: 0; }
  .ask-hero-ic { width: 44px; height: 44px; }
  .ask-hero-ic .ph-fill { font-size: 20px; }
  .ask-hero-text { flex: 1; align-items: flex-start; gap: 0; }
  .ask-title { font-size: 22px; line-height: 1.4; }
  .ask-sub { font-size: var(--fs-small); }
  .ask-sub-long { display: none; }
  .ask-honest { justify-content: flex-start; padding-top: 6px; }
  .ask-new { flex: none; width: 44px; padding: 0; border-radius: 50%; }  /* icon only (label in aria-label / title) */
  .ask-new span { display: none; }
  .ask-new .ph { font-size: 18px; }

  /* phone: 2 a row; an odd last card takes the whole row, its icon beside the text (no lonely half card) */
  .ask-prompts { grid-template-columns: 1fr 1fr; }
  .ask-prompts > .ask-prompt:nth-child(odd):last-child {
    grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start;
  }
  .ask-prompt.tile { border-radius: var(--r-tile); padding: 14px; min-height: 120px; gap: 10px; }
  .ask-prompt .ph { font-size: 22px; }
  .ask-prompt-t { font-size: var(--fs-ui); line-height: 1.55; }

  .ask-thread { gap: 10px; }
  .ask-row, .ask-refcard { scroll-margin: 16px 0 190px; }
  .ask-bubble { max-width: 86%; border-radius: var(--r-tile); padding: 12px 16px; font-size: var(--fs-ui); line-height: 1.75; }
  .ask-ai { max-width: 86%; }
  .ask-bubble.ai { max-width: 100%; }
  .ask-wait { padding: 10px 16px; border-radius: var(--r-tile); font-size: var(--fs-meta); }
  .ask-refcard .btn-icon { width: 44px; height: 44px; }
  .ask-suggest .fchip { height: 44px; }
  :root[dir="ltr"] .ask-suggest .fchip { height: auto; min-height: 44px; }

  /* sits on the tab bar (8 + 62 + its bottom padding) */
  .ask-dock {
    bottom: calc(70px + max(16px, env(safe-area-inset-bottom)));
    margin-top: -12px; padding: 12px 0 6px; gap: 6px;
    background: linear-gradient(to top, var(--bg) calc(100% - 12px), rgba(0, 0, 0, 0));
  }
  .ask-composer { align-items: flex-end; gap: 6px; padding: 6px; border-radius: 28px; box-shadow: none; }
  /* 16 px keeps iPhones from zooming into the field */
  .ask-input { height: 44px; max-height: 120px; font-size: 16px; line-height: 24px; padding: 10px 12px; }
  .ask-send { width: 44px; height: 44px; }
  .ask-send .ph { font-size: 18px; }
  .ask-meta { padding: 0 14px; }
  .ask-limit { padding-block: 6px; padding-inline: 6px 18px; border-radius: 28px; box-shadow: none; font-size: var(--fs-meta); }
  .ask-limit-ic { width: 44px; height: 44px; }
}