/* ============================================================
   TierTalk — /audience  (phone-first, เป้าหมาย 375px)
   ทีละคำถาม: question → answering → locked → reveal → discuss → summary
   ใช้เฉพาะตัวแปรจาก tokens.css เท่านั้น (ห้าม hardcode สี)
   ============================================================ */

/* ---------------------------------------------------- root / layout */
.aud-root {
  min-height: 100dvh;
  overflow-x: hidden;
  overscroll-behavior-y: none;           /* กัน bounce หลัง element ที่ติดหน้าจอ */
  -webkit-tap-highlight-color: transparent;
}

[hidden] { display: none !important; }

.ic { display: inline-flex; flex: none; }
.ic svg { display: block; }

/* ---------------------------------------------------- offline bar */
.offline-bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: calc(env(safe-area-inset-top) + var(--sp-2)) var(--sp-4) var(--sp-2);
  background: var(--wwa-ink);
  color: var(--wwa-white);
  font-size: var(--text-sm);
  font-weight: 700;
  transform: translateY(-102%);
  transition: transform var(--dur) var(--ease-out);
}
body.is-offline .offline-bar { transform: none; }
.offline-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse-dot 1.4s var(--ease-out) infinite;
}

/* ---------------------------------------------------- header */
.aud-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: calc(env(safe-area-inset-top) + var(--sp-4))
           max(var(--sp-4), env(safe-area-inset-right))
           var(--sp-3)
           max(var(--sp-4), env(safe-area-inset-left));
  background: var(--color-surface);
  border-bottom: 2px solid var(--color-border);
}
.aud-head-main { min-width: 0; }
.aud-room {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: 1.2;
  color: var(--color-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.aud-anon {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--wwa-ink-mid);
}
.aud-head-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex: none;
}
.aud-phase {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--wwa-ink-mid);
}

/* ---------------------------------------------------- panes */
.aud-screen { display: block; }
.aud-screen:focus { outline: none; }

.pane {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5) max(var(--sp-4), env(safe-area-inset-left))
           calc(var(--sp-8) + env(safe-area-inset-bottom))
           max(var(--sp-4), env(safe-area-inset-right));
  max-width: 560px;
  margin: 0 auto;
}
.pane-center {
  align-items: center;
  text-align: center;
  min-height: 66dvh;
  justify-content: center;
}
.pane-title { font-size: var(--text-2xl); color: var(--color-foreground); }
.pane-lead { font-size: var(--text-base); color: var(--wwa-ink-mid); }
.pane-fine { font-size: var(--text-xs); color: var(--wwa-ink-mid); }
.pane-note {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--wwa-red-deep);
  background: var(--color-surface-3);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  line-height: 1.35;
}
.pane-note.ok { background: var(--color-surface-2); color: var(--color-success); }
.pane-note.wait { background: var(--color-surface-2); color: var(--wwa-ink-mid); }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--wwa-red-deep);
  letter-spacing: 0.02em;
}
.q-title { font-size: var(--text-2xl); line-height: 1.5; overflow-wrap: anywhere; }
.q-sub { font-size: var(--text-base); color: var(--wwa-ink-mid); }
.sec-title {
  font-size: var(--text-lg);
  margin-top: var(--sp-2);
  color: var(--color-foreground);
}

/* ---------------------------------------------------- lobby */
.blob {
  position: relative;
  width: 132px;
  height: 96px;
}
.blob span {
  position: absolute;
  border-radius: var(--radius-full);
  display: block;
  animation: float-y 3.4s var(--ease-out) infinite alternate;
}
.blob-a { width: 68px; height: 68px; left: 0; top: 14px; background: var(--wwa-pink); }
.blob-b { width: 52px; height: 52px; left: 52px; top: 0; background: var(--wwa-red-soft); animation-delay: .35s; }
.blob-c { width: 40px; height: 40px; left: 92px; top: 46px; background: var(--wwa-gold); animation-delay: .7s; }
@keyframes float-y {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-10px) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .blob span { animation: none; }
  .offline-dot { animation: none; }
}

.count-card {
  padding: var(--sp-5) var(--sp-8);
  text-align: center;
}
.count-big {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: 1;
  color: var(--color-primary);
}
.count-cap {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--wwa-ink-mid);
}

/* ---------------------------------------------------- notice card */
.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  color: var(--color-foreground);
}
.notice .ic { color: var(--wwa-red-deep); margin-top: 2px; }
.notice-title { font-size: var(--text-lg); }
.notice-sub { font-size: var(--text-sm); color: var(--wwa-ink-mid); }

/* ---------------------------------------------------- chips / legend */
.chip-wrap { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--color-surface-3);
  color: var(--wwa-red-deep);
  font-size: var(--text-xs);
  font-weight: 800;
}

.legend { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.legend-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  min-height: 52px;
}
.legend-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 38px;
  padding: 0 var(--sp-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  flex: none;
}
.legend-desc { font-size: var(--text-sm); color: var(--wwa-ink-mid); }

/* ---------------------------------------------------- tier chip */
.tier-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 32px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  flex: none;
}
.tier-chip.is-blank {
  background: var(--color-surface-2);
  color: var(--wwa-ink-mid);
  border: 2px dashed var(--color-border-strong);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
}
.tier-chip-lg { min-height: 44px; font-size: var(--text-xl); padding: 0 var(--sp-4); }

/* ====================================================================
   ASK — หน้าจอคำถามเดียว (question / answering / locked)
   ==================================================================== */
.ask-root {
  min-height: calc(100dvh - 92px);
  gap: var(--sp-3);
  padding-bottom: 0;
}

.ask-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}
.ask-count {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-foreground);
}
.ask-timer {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--wwa-ink-mid);
  transition: color var(--dur) var(--ease-out);
}
.ask-timer.is-low { color: var(--color-danger); }
.ask-meter { flex: none; }

/* ---- การ์ดคำถาม ---- */
.q-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
  padding: var(--sp-5) var(--sp-4);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.q-card.is-in { animation: q-in var(--dur-slow) var(--ease-spring) both; }
@keyframes q-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.q-img {
  width: 104px; height: 104px;
  border-radius: var(--radius);
  object-fit: cover;
  border: 2px solid var(--color-border);
}
.q-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1.5;
  color: var(--color-foreground);
  overflow-wrap: anywhere;
}
.q-sub-line { font-size: var(--text-sm); color: var(--wwa-ink-mid); }

.ask-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--wwa-ink-mid);
}
.ask-social .dot { opacity: 0.5; }

/* ---- ปุ่มเลือก tier: เต็มความกว้าง สูง >= 60px ---- */
.v-tiers { display: flex; flex-direction: column; gap: var(--sp-2); }
.tier-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 60px;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius);
  background: var(--tb, var(--color-surface-3));
  color: var(--tb-fg, var(--color-foreground));
  border: 2px solid transparent;
  box-shadow: var(--shadow-clay);
  text-align: left;
  transition: transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-fast) var(--ease-out);
}
.tier-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: var(--shadow-clay-press); }
.tier-btn:disabled { cursor: default; box-shadow: var(--shadow-flat); }
.tier-btn-key {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1;
  min-width: 40px;
  flex: none;
}
.tier-btn-desc {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.tier-btn-mark {
  display: inline-flex;
  flex: none;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur) var(--ease-spring);
}
.tier-btn.is-on {
  box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 6px var(--wwa-ink), var(--shadow-clay);
}
.tier-btn.is-on:disabled {
  box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 6px var(--wwa-ink), var(--shadow-flat);
}
.tier-btn.is-on .tier-btn-mark { opacity: 1; transform: none; }
.tier-btn.is-pop { animation: tier-pop var(--dur-slow) var(--ease-spring); }
@keyframes tier-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.035); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .tier-btn.is-pop { animation: none; }
  .q-card.is-in { animation: none; }
  .verdict.is-in { animation: none; }
}

.v-autosave {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--wwa-ink-mid);
  text-align: center;
  padding-bottom: var(--sp-2);
}

/* ---- แถบล่างติดหน้าจอ (เว้น home indicator) ---- */
.ask-bar {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: auto;
  padding: var(--sp-3) 0 calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: var(--color-background);
  border-top: 2px solid var(--color-border);
  transition: background-color var(--dur) var(--ease-out);
}
.ask-bar.is-flash { background: var(--color-surface-3); }
.ask-bar-cap {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--wwa-ink-mid);
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
}
.ask-bar-chip { display: inline-flex; flex: none; }

/* ====================================================================
   REVEAL — เฉลยข้อนี้
   ==================================================================== */
.verdict {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
}
.verdict-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.verdict-head-cap {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--wwa-ink-mid);
}
.verdict-score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--sp-2);
  text-align: center;
}
.verdict-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: 1;
  color: var(--color-primary);
}
.verdict-of {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--wwa-ink-mid);
}
.verdict-cap {
  text-align: center;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-foreground);
}
.verdict-line {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--wwa-ink-mid);
  line-height: 1.45;
}
.verdict.is-in { animation: q-in var(--dur-slow) var(--ease-spring) both; }

.rv-rows { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.rv-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
}
.rv-row.is-mine {
  background: var(--color-surface-2);
  box-shadow: inset 0 0 0 2px var(--color-border-strong);
}
.rv-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px; height: 32px;
  padding: 0 6px;
  border-radius: var(--radius-xs);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  flex: none;
}
.rv-pct { font-weight: 800; font-size: var(--text-sm); min-width: 44px; }
.rv-cnt { font-size: var(--text-xs); color: var(--wwa-ink-mid); }
.rv-you {
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--wwa-red-deep);
  white-space: nowrap;
}
.rv-sps { display: flex; gap: 2px; margin-left: auto; flex: none; }
.rv-badges { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.rv-none { font-size: var(--text-sm); }

.tally {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
}
.tally-item { display: flex; flex-direction: column; align-items: center; flex: 1 1 0; min-width: 0; }
.tally-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.1;
  color: var(--color-primary);
}
.tally-cap {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--wwa-ink-mid);
  text-align: center;
  line-height: 1.25;
}

/* ====================================================================
   SUMMARY — สรุปทั้งรอบ
   ==================================================================== */
.sum-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
}
.sum-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-5xl);
  line-height: 1;
  color: var(--color-primary);
}
.sum-of { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); color: var(--wwa-ink-mid); }
.sum-title { font-size: var(--text-2xl); line-height: 1.5; color: var(--color-foreground); }
.sum-cap { font-size: var(--text-sm); color: var(--wwa-ink-mid); line-height: 1.45; }

.sum-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.sum-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 56px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
}
.sum-row.is-hit { border-color: var(--color-border-strong); background: var(--color-surface-2); }
.sum-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--color-surface-3);
  color: var(--wwa-red-deep);
  font-size: var(--text-xs);
  font-weight: 800;
}
.sum-label {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.sum-pair { display: flex; align-items: center; gap: var(--sp-1); flex: none; }
.sum-pair .tier-chip {
  min-width: 34px;
  min-height: 30px;
  padding: 0 var(--sp-2);
  font-size: var(--text-sm);
}
.sum-vs { font-size: var(--text-xs); font-weight: 700; color: var(--wwa-ink-mid); }
.sum-mark { display: inline-flex; flex: none; }
.sum-mark.ok { color: var(--color-success); }
.sum-mark.no { color: var(--wwa-ink-soft); }

.sum-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--wwa-ink-mid);
}
.sum-key span { display: inline-flex; align-items: center; gap: 4px; }

/* ====================================================================
   Q&A — ปุ่ม "ถาม" บนแถบหัวเรื่อง + bottom sheet สำหรับเขียนคำถาม
   วางไว้บนหัวเรื่องเพราะต้องเข้าถึงได้ทุกเฟส และต้องไม่ทับ .ask-bar
   ที่ sticky อยู่ก้นจอระหว่างโหวต
   ==================================================================== */
.ask-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none;
  align-self: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: 2px solid var(--wwa-red-deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: 1;
  box-shadow: var(--shadow-clay);
  transition: transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.ask-open:active { transform: translateY(3px); box-shadow: var(--shadow-clay-press); }
.ask-open.is-off {
  background: var(--color-surface-3);
  color: var(--wwa-red-deep);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-flat);
}
.ask-open-txt { white-space: nowrap; }
.ask-open.is-nudge { animation: ask-nudge var(--dur-slow) var(--ease-spring) 2; }
@keyframes ask-nudge {
  0%, 100% { transform: none; }
  45% { transform: translateY(-4px) scale(1.05); }
}

/* ---- แถบ "คำถามของคุณกำลังขึ้นจอ" ---- */
.pin-strip {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) max(var(--sp-4), env(safe-area-inset-right))
           var(--sp-3) max(var(--sp-4), env(safe-area-inset-left));
  background: var(--color-surface-3);
  color: var(--wwa-red-deep);
  border-bottom: 2px solid var(--color-border-strong);
  font-weight: 800;
  font-size: var(--text-sm);
  line-height: 1.3;
}
.pin-strip.is-in { animation: pin-in var(--dur-slow) var(--ease-spring) both; }
@keyframes pin-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

/* ---- scrim + sheet ---- */
.sheet-scrim {
  align-items: end;          /* ทับ place-items:center ของ .modal-scrim */
  padding: 0;
}
body.is-sheet-open { overflow: hidden; }

.ask-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  justify-self: center;
  background: var(--color-surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-lift);
  /* --kb = ความสูงคีย์บอร์ดจาก visualViewport → ปุ่มส่งไม่โดนบัง */
  margin-bottom: var(--kb, 0px);
  max-height: calc(92dvh - var(--kb, 0px));
  animation: sheet-up var(--dur-slow) var(--ease-out) both;
}
@keyframes sheet-up {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}

.sheet-head {
  flex: none;
  padding: var(--sp-2) var(--sp-4) var(--sp-3);
  border-bottom: 2px solid var(--color-border);
}
.sheet-grab {
  display: block;
  width: 44px;
  height: 5px;
  margin: 0 auto var(--sp-2);
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
}
.sheet-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.sheet-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--color-foreground);
}
.sheet-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  color: var(--wwa-ink-mid);
}
.sheet-close:active { background: var(--color-surface-3); }

.sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-4);
}
.sheet-sub {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-foreground);
}
.sheet-foot {
  flex: none;
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));
  border-top: 2px solid var(--color-border);
  background: var(--color-surface);
}
.ask-send.is-nudge { animation: ask-nudge var(--dur-slow) var(--ease-spring) 2; }

/* ---- กติกา + แถบสถานะ ---- */
.ask-rule {
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.45;
  color: var(--wwa-ink-mid);
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
}
.ask-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: 1.35;
}
.ask-banner.cool { background: var(--color-surface-3); color: var(--wwa-red-deep); }
.ask-banner.off { background: var(--color-surface-2); color: var(--wwa-ink-mid); }
.ask-cd { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); }

/* ---- ช่องพิมพ์ ---- */
.ask-text {
  min-height: 96px;
  resize: none;
  font-size: var(--text-base);   /* ต้อง >= 16px ไม่งั้น iOS ซูมเข้าเอง */
}
.ask-text:disabled { background: var(--color-surface-2); color: var(--wwa-ink-mid); }
.ask-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}
.ask-help {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.35;
  color: var(--wwa-ink-mid);
  min-height: 1em;
}
.ask-help.is-err { color: var(--color-danger); }
.ask-help.is-ok { color: var(--color-success); }
.ask-counter {
  flex: none;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--wwa-ink-mid);
}
.ask-counter.is-warn { color: var(--color-warning-fg); }

/* ---- คำถามของเรา ---- */
.myq-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.myq {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
}
.myq.is-pinned {
  border-color: var(--color-primary);
  background: var(--color-surface-2);
}
.myq-text {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-foreground);
  overflow-wrap: anywhere;
}
.myq-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.myq-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px var(--sp-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 800;
  background: var(--color-surface-2);
  color: var(--wwa-ink-mid);
}
.myq-status.is-answered { background: var(--color-success-bg); color: var(--color-success); }
.myq-status.is-new { background: var(--color-surface-3); color: var(--wwa-red-deep); }
.myq-status.is-hidden { background: var(--color-surface-2); color: var(--wwa-ink-mid); }
.myq-status.is-pinned { background: var(--color-primary); color: var(--color-on-primary); }
.myq-time { font-size: var(--text-xs); color: var(--wwa-ink-mid); font-weight: 600; }
.myq-empty {
  padding: var(--sp-4);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--wwa-ink-mid);
  background: var(--color-surface-2);
  border-radius: var(--radius);
}

@media (prefers-reduced-motion: reduce) {
  .ask-open.is-nudge,
  .ask-send.is-nudge,
  .pin-strip.is-in,
  .ask-sheet { animation: none; }
}

/* ---------------------------------------------------- เครื่องเล็ก */
@media (max-width: 359px) {
  .tier-btn { min-height: 56px; padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
  .tier-btn-desc { font-size: var(--text-xs); }
  .pane { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .q-label { font-size: var(--text-xl); }
  .aud-head { gap: var(--sp-2); }
  .ask-open-txt { display: none; }   /* เหลือไอคอน แต่ยังกว้าง 44px และมี aria-label */
  .ask-open { padding: 0; width: 44px; }
}