* { box-sizing: border-box; }
html { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Thai", "Leelawadee UI", "Thonburi", Tahoma, sans-serif; color: #2d2c2b; background: #f9f4f2; }
body { margin: 0; padding-bottom: 150px; font-size: 18px; line-height: 1.7; }
a { color: #0a4ea8; }
a:focus-visible, button:focus-visible, textarea:focus-visible, input:focus-visible { outline: 3px solid #2d2c2b; outline-offset: 2px; box-shadow: 0 0 0 2px #ffffff; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px; z-index: 20; }
.skip:focus { left: 8px; }
.urgent { position: sticky; top: 0; z-index: 10; min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: #fdeeea; color: #8c2116; border-bottom: 2px solid #f5cec3; font-weight: 700; }
.urgent a { color: #c22a1f; min-height: 48px; display: inline-flex; align-items: center; }
.brand { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brand b { font-size: 20px; line-height: 1.3; color: #0a4ea8; }
.brand span { font-size: 12.5px; font-weight: 400; line-height: 1.4; color: #5c5b59; }
.truth b { color: #0a4ea8; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid #e3ded7; font-weight: 700; }
.hide { white-space: nowrap; flex-shrink: 0; font-size: 15px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid #6b6760; border-radius: 8px; text-decoration: none; color: #2d2c2b; }
.tabs { display: flex; gap: 14px; overflow-x: auto; padding: 8px 16px; border-bottom: 1px solid #e3ded7; white-space: nowrap; }
.tabs a { min-height: 44px; display: inline-flex; align-items: center; color: #5c5b59; text-decoration: none; }
.tabs [aria-current="page"] { color: #0a4ea8; font-weight: 700; }
.layout { width: min(100%, 1040px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 680px) 300px; gap: 32px; padding: 12px 16px 24px; }
/* top ต้องเท่ากับความสูงจริงของแถบด่วน ซึ่งบนมือถือขึ้น 2 บรรทัด (64-77px) ไม่ใช่ 48px ตายตัว
   ถ้าใช้ 48px ตายตัว แถบนี้จะทับเบอร์ 1669/1323 ทันทีที่ผู้ใช้เลื่อนจอ — ค่าจริงตั้งโดย ask.js */
.truth { position: sticky; top: var(--สูงแถบด่วน, 48px); z-index: 4; margin: 0 -16px 12px; padding: 10px 16px; background: #e8f0fd; color: #0a4ea8; border-bottom: 1px solid #c2d8f7; font-size: 16px; line-height: 1.5; }
.messages { display: grid; gap: 14px; }
.bubble, .card { max-width: 100%; border-radius: 8px; padding: 14px 16px; }
.bubble.system, .card.answer { background: #ffffff; border: 1px solid #e3ded7; }
.card h2 { font-size: 22px; margin: 0 0 8px; line-height: 1.4; }
.card p { margin: 8px 0; }
.source { color: #5c5b59; font-size: 15px; }
/* ตัวบอกว่า "กำลังคิด" — จุดเต้น + แถบวิ่ง ให้เห็นด้วยตาว่ายังทำงานอยู่ ไม่ได้ค้าง */
.bubble.system.thinking { display: block; }
.thinking-row { display: flex; align-items: center; gap: 10px; }
.thinking-text { color: #0a4ea8; }
.dots { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.dots i { display: block; width: 10px; height: 10px; border-radius: 50%; background: #0b63d6; animation: thinking-dot 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .18s; }
.dots i:nth-child(3) { animation-delay: .36s; }
@keyframes thinking-dot { 0%, 80%, 100% { transform: scale(.55); opacity: .3; } 40% { transform: scale(1); opacity: 1; } }
.thinking-bar { height: 5px; margin-top: 12px; border-radius: 5px; background: #e8f0fd; overflow: hidden; }
.thinking-bar i { display: block; height: 100%; width: 38%; border-radius: 5px; background: #0b63d6; animation: thinking-sweep 1.5s infinite ease-in-out; }
@keyframes thinking-sweep { 0% { transform: translateX(-105%); } 100% { transform: translateX(370%); } }
@media (prefers-reduced-motion: reduce) {
  .dots i, .thinking-bar i { animation: none; opacity: .85; }
  .thinking-bar i { width: 100%; }
}
.crisis { background: #fdeeea; border: 2px solid #f5cec3; color: #8c2116; border-radius: 16px; }
.heart { color: #c22a1f; height: 26px; }
.crisis-title { font-size: 20px; font-weight: 800; margin: 8px 0; line-height: 1.6; overflow-wrap: anywhere; }
.crisis-note { margin: 0 0 12px; }
.call { min-height: 56px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; padding: 8px 12px; margin-top: 12px; border-radius: 8px; font-weight: 800; text-align: center; text-decoration: none; line-height: 1.35; }
.primary-call { min-height: 64px; background: #c22a1f; color: #fff; font-size: 19px; }
.primary-call span { font-size: 15px; font-weight: 600; }
.secondary-call { border: 2px solid #c22a1f; color: #8c2116; background: #fff; }
.quiet-link { min-height: 48px; display: inline-flex; align-items: center; margin-top: 10px; color: #8c2116; }
.asker { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 16px 0 8px; color: #5c5b59; }
.asker label { min-height: 44px; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { min-height: 44px; border: 1px solid #c2d8f7; border-radius: 8px; background: #fff; color: #0a4ea8; padding: 6px 10px; font: inherit; }
.side { display: grid; align-content: start; gap: 10px; }
.side h2 { font-size: 18px; margin: 0; }
.side a { min-height: 48px; display: flex; align-items: center; padding: 8px 10px; border: 1px solid #e3ded7; border-radius: 8px; text-decoration: none; }
/* ซ่อนได้จริงแม้จะประกาศ display:flex ไว้ — ต้องมี !important ไม่งั้น attribute hidden แพ้ */
.mini-call[hidden] { display: none !important; }
.mini-call { position: fixed; left: 0; right: 0; bottom: 82px; z-index: 7; display: flex; justify-content: center; pointer-events: none; }
.mini-call a { pointer-events: auto; min-height: 48px; display: inline-flex; align-items: center; padding: 6px 14px; background: #c22a1f; color: #fff; border-radius: 8px; font-weight: 800; text-decoration: none; }
.composer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 10px max(12px, calc((100vw - 1040px) / 2)); background: #ffffff; border-top: 1px solid #e3ded7; }
.composer textarea { min-height: 56px; max-height: 150px; resize: vertical; padding: 12px; font: inherit; line-height: 1.5; border: 1px solid #6b6760; border-radius: 8px; }
.composer button { min-width: 64px; min-height: 56px; border: 0; border-radius: 8px; background: #0b63d6; color: #fff; font: inherit; font-weight: 800; }
.composer button[disabled] { background: #6b6760; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 800px) {
  body { font-size: 18px; }
  .layout { display: block; padding-top: 0; }
  .side { display: none; }
  .truth { top: var(--สูงแถบด่วน, 48px); }
}
@media (max-width: 380px) {
  .topbar { font-size: 16px; padding-top: 6px; padding-bottom: 6px; }
  .tabs { padding-top: 4px; padding-bottom: 4px; }
  .tabs a { min-height: 36px; }
  .layout { padding-left: 10px; padding-right: 10px; }
  .truth { font-size: 14px; line-height: 1.4; margin-left: -10px; margin-right: -10px; padding-top: 6px; padding-bottom: 6px; }
  .crisis { padding: 10px 12px; }
  .crisis-title { font-size: 20px; line-height: 1.45; margin: 4px 0; }
  .crisis-note { margin-bottom: 6px; }
  .primary-call { min-height: 64px; }
}