/* ============================================================
   หัวข้อทั่วโลก
   ------------------------------------------------------------
   จอนี้ต้องอ่านไม่เหมือนฟีด · ฟีดคือ "ของที่เพิ่งเกิด" เรียงตามเวลา
   หน้าหัวข้อคือ "คลังของที่แก้ไปแล้ว" เรียงตามว่าอันไหนมีคำตอบ
   ถ้าหน้าตาเหมือนกัน คนจะไถหาของใหม่แทนที่จะอ่านของที่ตอบไว้แล้ว
   ซึ่งทำลายเหตุผลทั้งหมดของการมีชั้นนี้

   สีเดียวที่ชั้นนี้เพิ่มเข้ามาคือป้าย "ทั่วโลก" — ที่เหลือใช้โทนเดียวกับ hw.css
   ทั้งแอปมีสีเน้นได้ไม่กี่ที่ ถ้าทุกชั้นขอสีของตัวเองจะไม่เหลือที่ให้ของสำคัญจริง
   ============================================================ */

/* ---------- แถวใต้การ์ดงาน ---------- */
/* อ่านเป็นหมายเหตุ ไม่ใช่การ์ดใบที่สอง (กฎเดียวกับ .hw) — ถ้าหนักเท่าการ์ด
   รายการงานจะยาวขึ้นเท่าตัวทันที และแถวนี้อยู่ต่อจาก .hw อีกแถวหนึ่งด้วย */
.tp-strip {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: 12.5px; color: var(--muted); cursor: pointer;
}
.tp-strip-ic { display: inline-flex; color: var(--blue); }
.tp-strip-ic svg { width: 14px; height: 14px; }
.tp-strip-tx { color: var(--ink); font-weight: 600; }
.tp-strip-go { margin-left: auto; display: inline-flex; color: var(--blue); }
.tp-strip-go svg { width: 14px; height: 14px; }

/* ============================================================
   หัวจอ — โครงเดียวกับ .hw-top ทุกบรรทัด
   ============================================================ */
.tp-top {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--card);
}
.tp-back {
  width: 38px; height: 38px; flex: none; border: 0; border-radius: 12px;
  background: var(--card2); color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.tp-back svg { width: 18px; height: 18px; transform: rotate(180deg); }
.tp-who { min-width: 0; }
.tp-who b { display: block; font-size: 15px; line-height: 1.3; }
.tp-who i {
  display: block; font-style: normal; font-size: 11.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ============================================================
   จอหัวข้อ
   ============================================================ */
#scr-topic .scr-body, #scr-tthread .scr-body {
  display: flex; flex-direction: column;
  position: absolute; inset: 0; padding: 0;
}
#topicBody, #tthreadBody {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
  position: relative;
}

.tp-hero { padding: 14px 16px 12px; }
/* ป้ายบอกว่าหัวข้อนี้ไปได้ไกลแค่ไหน — ต้องเห็นก่อนอ่านอย่างอื่น
   เพราะมันคือคำตอบของ "ทำไมบางหัวข้อมีคนตอบเยอะ บางหัวข้อเงียบ" */
.tp-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--card2); color: var(--muted);
  font-size: 11.5px; font-weight: 700;
}
.tp-tag svg { width: 13px; height: 13px; }
.tp-tag.world { background: var(--blue); color: var(--on-accent); }
.tp-blurb { margin: 10px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--ink); }
.tp-fine { margin: 6px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--faint); }

.tp-ask {
  display: flex; align-items: center; gap: 8px;
  margin: 0 16px 12px; padding: 12px 14px;
  width: calc(100% - 32px);
  border: 1.5px dashed var(--line); border-radius: 14px;
  background: var(--card2); color: var(--ink);
  font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.tp-ask svg { width: 16px; height: 16px; color: var(--blue); }
.tp-ask:active { transform: scale(.99); }

.tp-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 24px; }

/* ---------- การ์ดคำถาม ---------- */
/* เธรดที่มีคำตอบแล้วได้ขอบซ้ายทึบ — คนที่เพิ่งเปิดหัวข้อมาคือคนที่ยังไม่เข้าใจ
   เขาต้องการคำตอบ ไม่ใช่คำถามของคนอื่น จึงต้องแยกออกจากกันด้วยตาในครั้งเดียว */
.tp-card {
  padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer;
}
.tp-card.has { border-left: 3px solid var(--good); border-radius: 0; padding-left: 11px; }
.tp-card-h { display: flex; align-items: center; gap: 9px; }
.tp-av {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; object-fit: cover;
  background: var(--card2); color: var(--muted);
}
.tp-card-who { min-width: 0; flex: 1; }
/* ชื่อกับบรรทัดเมตาต้องตัดคำ ไม่ใช่ดันการ์ดให้กว้างเกินจอ —
   ป้าย "เคลียร์แล้ว" ท้ายแถวเป็นตัวแรกที่หลุดขอบเมื่อชื่อยาว และมันหลุดเงียบ ๆ
   (การ์ดยังอ่านได้ครบทุกบรรทัด จึงไม่มีอะไรบอกว่ามีของหายไปทางขวา) */
.tp-card-who b, .tp-card-who i {
  display: block; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tp-card-who b { font-size: 13px; }
.tp-card-who i { font-style: normal; font-size: 11px; color: var(--faint); }
.tp-mine {
  margin-left: 6px; padding: 1px 6px; border-radius: 6px;
  background: var(--card2); color: var(--muted); font-size: 10px; font-weight: 700;
}
.tp-solved {
  display: inline-flex; align-items: center; gap: 3px; flex: none;
  color: var(--good); font-size: 11px; font-weight: 700;
}
.tp-solved svg { width: 12px; height: 12px; }
.tp-card-b {
  margin: 8px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tp-card-f {
  margin-top: 8px; display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--muted);
}
.tp-card-f svg { width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px; }

/* ---------- ป้ายคำแปล ---------- */
/* ต้องเล็กและจืด — มันคือหมายเหตุ ไม่ใช่ปุ่มที่อยากให้คนกด
   คนส่วนใหญ่ควรอ่านคำแปลแล้วเดินต่อโดยไม่ต้องรู้ด้วยซ้ำว่ามีการแปลเกิดขึ้น */
.tp-tr {
  display: inline-block; margin-top: 6px; padding: 0;
  border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 11px; color: var(--faint);
  text-decoration: underline; text-underline-offset: 3px;
}
.tp-tr.off { text-decoration: none; cursor: default; }
.tp-tr.off svg { width: 11px; height: 11px; vertical-align: -1px; margin-right: 3px; }

/* ---------- สถานะว่าง ---------- */
.tp-empty {
  margin: 0; padding: 28px 20px; text-align: center;
  font-size: 13px; line-height: 1.7; color: var(--muted);
}
.tp-blank { padding: 32px 20px; text-align: center; }
.tp-blank-ic { color: var(--faint); }
.tp-blank-ic svg { width: 32px; height: 32px; }
.tp-blank-h { margin: 10px 0 4px; font-size: 15px; font-weight: 700; color: var(--ink); }
.tp-blank-p { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--muted); }

/* ============================================================
   เลือกหัวข้อ
   ============================================================ */
.tp-search { padding: 12px 16px 4px; }
.tp-search input {
  width: 100%; padding: 11px 14px; border-radius: 12px;
  border: 1.5px solid var(--line); background: var(--card2); color: var(--ink);
  font-family: inherit; font-size: 14px;
}
.tp-search input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.tp-picks { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 16px 24px; }
.tp-pick {
  display: block; width: 100%; text-align: left; position: relative;
  margin-bottom: 8px; padding: 12px 84px 12px 14px;
  border: 1.5px solid var(--line); border-radius: 14px;
  background: var(--card); color: var(--ink);
  font-family: inherit; cursor: pointer;
}
.tp-pick b { display: block; font-size: 14px; }
.tp-pick i {
  display: block; margin-top: 3px; font-style: normal;
  font-size: 11.5px; line-height: 1.55; color: var(--muted);
}
.tp-pick-tag {
  position: absolute; top: 12px; right: 12px;
  padding: 3px 8px; border-radius: 999px;
  background: var(--card2); color: var(--muted);
  font-size: 10px; font-weight: 700;
}
.tp-pick-tag.world { background: var(--blue); color: var(--on-accent); }
.tp-pick:active { transform: scale(.99); }

/* ============================================================
   แผ่นถาม
   ============================================================ */
.tp-sheet {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: flex-end;
  background: rgba(0, 0, 0, .42);
}
.tp-sheet-card {
  width: 100%; padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  border-radius: 20px 20px 0 0; background: var(--card);
  box-shadow: var(--shadow);
}
.tp-sheet-h { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.tp-sheet-card textarea {
  width: 100%; padding: 12px; border-radius: 12px;
  border: 1.5px solid var(--line); background: var(--card2); color: var(--ink);
  font-family: inherit; font-size: 14px; line-height: 1.6; resize: none;
}
.tp-anon {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  font-size: 12.5px; color: var(--muted); cursor: pointer;
}
.tp-sheet-row { display: flex; gap: 8px; margin-top: 14px; }
.tp-sheet-row button {
  flex: 1; border-radius: 12px; padding: 11px 0;
  font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.tp-no { border: 1.5px solid var(--line); background: var(--card2); color: var(--muted); }
.tp-yes { border: 0; background: var(--blue); color: var(--on-accent); }
.tp-sheet-row button:active { transform: scale(.97); }

/* ============================================================
   จอเธรด — คำถามอยู่บนสุดแบบตรึง คำตอบไหลอยู่ข้างล่าง
   ------------------------------------------------------------
   ต่างจากจอแชทตรงที่คำถามต้องอยู่ให้เห็นตลอด · คนตอบเลื่อนลงไปอ่านคำตอบคนอื่น
   แล้วลืมว่าโจทย์ถามอะไร คือสาเหตุอันดับหนึ่งของคำตอบที่ไม่ตรงคำถาม
   ============================================================ */
.tp-q {
  padding: 14px 16px; border-bottom: 1px solid var(--line);
  background: var(--card2); flex: none;
}
.tp-q-who { display: flex; align-items: baseline; gap: 8px; }
.tp-q-who b { font-size: 13px; }
.tp-q-who i { font-style: normal; font-size: 11px; color: var(--faint); }
.tp-q-b { margin: 8px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--ink); }
.tp-q-img {
  display: block; width: 100%; margin-top: 10px;
  border-radius: 12px; border: 1px solid var(--line);
}
.tp-mark {
  margin-top: 10px; padding: 8px 12px; border-radius: 10px;
  border: 1.5px solid var(--line); background: var(--card); color: var(--muted);
  font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.tp-mark svg { width: 13px; height: 13px; }
.tp-mark.on { border-color: var(--good); color: var(--good); }

.tp-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; }
.tp-msg { display: flex; margin-bottom: 10px; }
.tp-msg.me { justify-content: flex-end; }
.tp-bub {
  max-width: 82%; padding: 9px 13px; border-radius: 16px;
  background: var(--card2); color: var(--ink);
  font-size: 14px; line-height: 1.6; word-break: break-word;
}
.tp-msg.me .tp-bub { background: var(--blue); color: var(--on-accent); }
.tp-msg.me .tp-tr { color: var(--on-accent); opacity: .75; }
/* น้องไซได้ขอบ ไม่ได้พื้นสี — คำตอบ AI ต้องอ่านออกว่าเป็น AI แต่ไม่ควรเด่นกว่าคนจริง */
.tp-msg.ai .tp-bub { background: var(--card); border: 1.5px dashed var(--line); }
.tp-nm {
  display: block; margin-bottom: 3px;
  font-size: 11px; font-weight: 700; color: var(--muted);
}
.tp-nm em {
  margin-left: 5px; padding: 1px 5px; border-radius: 5px;
  background: var(--card2); color: var(--faint);
  font-style: normal; font-size: 9.5px; letter-spacing: .04em;
}

.tp-bar {
  display: flex; gap: 8px; flex: none;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line); background: var(--card);
}
.tp-bar input {
  flex: 1; min-width: 0; padding: 11px 14px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--card2); color: var(--ink);
  font-family: inherit; font-size: 14px;
}
.tp-bar input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.tp-send {
  width: 42px; height: 42px; flex: none; border: 0; border-radius: 50%;
  background: var(--blue); color: var(--on-accent); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.tp-send svg { width: 18px; height: 18px; }
.tp-send:active { transform: scale(.94); }

/* ---------- ป้าย "ในไทย" ---------- */
/* คนประเทศเดียวกันขึ้นก่อนอยู่แล้วในการจัดลำดับ (topic_open) — ป้ายนี้แค่ยืนยันด้วยตา
   ว่าทำไมเขาถึงอยู่บนสุด · เล็กและจืด เพราะมันเป็นเหตุผล ไม่ใช่รางวัล */
.tp-near {
  margin-right: 6px; padding: 1px 6px; border-radius: 6px;
  background: var(--card2); color: var(--blue);
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
}

/* ============================================================
   "มีคนตอบคำถามที่คุณถามไว้"
   ------------------------------------------------------------
   แถวนี้ต่างจาก .tp-strip ตรงที่มันเป็นข่าว ไม่ใช่ทางเข้า จึงมีพื้นหลังและอยู่บนสุด
   ของรายการงาน — แต่ยังเตี้ยกว่าการ์ดงานหนึ่งใบ ไม่งั้นมันแย่งที่ของงานที่ใกล้ส่ง
   ซึ่งเป็นเหตุผลหลักที่คนเปิดแอปนี้ตั้งแต่แรก
   ============================================================ */
.tp-news {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 12px; padding: 11px 13px;
  border-radius: 14px; border: 1.5px solid var(--blue);
  background: var(--card); cursor: pointer;
}
.tp-news-ic { display: inline-flex; flex: none; color: var(--blue); }
.tp-news-ic svg { width: 18px; height: 18px; }
.tp-news-bd { min-width: 0; flex: 1; }
.tp-news-bd b { display: block; font-size: 13px; color: var(--ink); }
.tp-news-bd i {
  display: block; margin-top: 2px; font-style: normal;
  font-size: 11.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tp-news-go { display: inline-flex; flex: none; color: var(--blue); }
.tp-news-go svg { width: 15px; height: 15px; }
.tp-news:active { transform: scale(.99); }

/* ============================================================
   ช่วงชั้น + ประเทศ (จอ "วิชาของฉัน")
   ------------------------------------------------------------
   สามปุ่ม ไม่ใช่หกปุ่ม — ผู้ใช้เคาะว่า ม.ต้น / ม.ปลาย / มหาลัย
   และช่องนี้เป็นกุญแจของสโคป "ทั่วประเทศ" ถ้าไม่กรอก แท็บนั้นจะว่างเปล่าตลอดไป
   จึงต้องบอกเหตุผลไว้ใต้ปุ่ม ไม่ใช่ปล่อยให้เดาเอง
   ============================================================ */
.ch-lb { margin: 18px 0 8px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.ch-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ch-chip {
  padding: 8px 14px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--card2); color: var(--muted);
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.ch-chip.on { border-color: var(--blue); background: var(--blue); color: var(--on-accent); }
.ch-chip:active { transform: scale(.97); }
.ch-fine { margin: 8px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--faint); }

/* ปุ่มรายงานในเธรด — จืดและเล็ก แต่ต้องมีทุกที่ที่คนแปลกหน้าพิมพ์อะไรได้ */
.tp-flag {
  margin-left: 6px; padding: 0; border: 0; background: none;
  color: var(--faint); cursor: pointer; vertical-align: -2px;
}
.tp-flag svg { width: 12px; height: 12px; }
.tp-q-who .tp-flag { margin-left: auto; }
.tp-q-who { display: flex; align-items: center; gap: 8px; }