/* =============================================
   ChatATG — Mobile Layer (โหลดเฉพาะจอ ≤768px)
   ลิงก์ใน home.html ใส่ media="(max-width: 768px)" —
   จอใหญ่ไม่ต้องประมวลผลไฟล์นี้เลย
   ภายในแบ่งช่วงย่อยอีกที: base (≤768) / phone (≤480)
   ============================================= */

/* ── โครงหลัก ── */
.messages-container {
  padding: 20px 14px 12px !important;
}
.topbar { padding: 8px 14px !important; }
.shortcut-hint { display: none !important; }

/* ── เลือกโมเดล: ย้ายจากแถบพิมพ์ข้อความไปไว้ที่ Header แบบ Gemini mobile ── */
.model-selector-pill { display: none !important; }
.model-selector-header-btn {
  display: flex !important; align-items: center; gap: 4px; background: none; border: none;
  color: var(--text-2); font-size: 0.8rem; font-weight: 500; padding: 4px 6px; margin-left: 2px;
  border-radius: 8px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.model-selector-header-btn:active { background: var(--bg-hover); }
.model-selector-header-btn svg { flex-shrink: 0; opacity: 0.7; }

/* popover ที่เปิดจาก header ต้องกันล้นขอบจอ — คุมความสูง/กว้างสูงสุดตาม viewport เสมอ */
.model-popover {
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

/* จอมือถือแคบเกินกว่าจะกางเมนูย่อย "ระดับการคิด" ออกทางขวาได้ (ล้นขอบจอแน่นอน) —
   กลับไปกางลงด้านล่างแบบ stack เหมือนรายการอื่นในเมนูแทน ไม่ต้องพึ่ง hover เลย (จอสัมผัสไม่มี hover) */
.thinking-level-submenu {
  position: static !important; margin-left: 0 !important; box-shadow: none !important;
  border: none !important; background: none !important; padding: 0 !important; min-width: 0 !important;
  /* desktop ใช้ opacity/visibility เพื่อ animate ตอนกางออกข้าง แต่บนมือถือกางลง (static ใน
     document flow) ต้องกลับไปใช้ max-height collapse แทน ไม่งั้น opacity:0 จะยังเว้นที่ว่างค้างไว้ */
  opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
  transform: none !important;
  max-height: 0; overflow: hidden;
  transition: max-height 0.2s ease;
}
.thinking-level-submenu.show { max-height: 260px; }

/* ── ข้อความ ── */
.user-message .msg-content-wrapper { max-width: 88% !important; }
.ai-message { gap: 10px !important; }
.msg-avatar.ai-avatar {
  width: 24px !important;
  height: 24px !important;
}
.ai-message .msg-body {
  font-size: 0.93rem !important;
  line-height: 1.75 !important;
}
/* จอสัมผัสไม่มี hover — ปุ่ม action ต้องมองเห็นตลอด */
.msg-actions,
.user-actions {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
.msg-action-btn {
  padding: 7px 10px !important;   /* ขยาย tap target */
  font-size: 0.78rem !important;
}
.msg-actions { flex-wrap: wrap !important; overflow: visible !important; }
/* meta ความเร็วซ่อนบนมือถือ — พื้นที่น้อย */
.ai-message .msg-meta { display: none !important; }

/* ── Composer ── */
.input-area {
  padding: 6px 10px calc(10px + env(safe-area-inset-bottom)) !important;
}
.input-wrapper { border-radius: 22px !important; }
#messageInput { font-size: 16px !important; } /* กัน iOS ซูมอัตโนมัติตอนโฟกัส */
.btn-pill-tools span { display: none; }

/* ── Welcome ── */
.welcome-title { font-size: 1.55rem !important; }
.welcome-sub { font-size: 0.88rem !important; }
.suggestion-grid {
  max-width: 100% !important;
  padding: 0 6px;
  gap: 8px !important;
}
.suggestion-chip {
  padding: 9px 14px !important;
  font-size: 0.8rem !important;
}

/* ── Sidebar เป็น drawer เต็มความสูง ── */
.sidebar {
  width: min(84vw, 320px) !important;
  box-shadow: 24px 0 60px rgba(0,0,0,0.45);
}
.history-item { padding: 11px 12px !important; }
.nav-item { padding: 11px 12px !important; }

/* ── Info panel (ที่มา/การคิด) เต็มจอ ── */
.info-panel { width: 100vw !important; }

/* ── พาเนลแหล่งที่มา: มือถือสไลด์ขึ้นจากล่าง (bottom sheet) ไม่ใช่จากขวา ── */
.sources-side-panel {
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  max-height: 82vh !important;
  border-left: none !important;
  border-top: 1px solid var(--border-hover) !important;
  border-radius: 20px 20px 0 0 !important;
  transform: translateY(102%) !important;
  box-shadow: 0 -18px 50px rgba(0,0,0,0.5) !important;
}
.sources-side-panel.open { transform: translateY(0) !important; }
/* ที่จับลาก (drag handle) จริง — แตะลากขึ้นลงได้ (แบบ Gemini/iOS sheet) */
.sources-side-panel .ssp-grabber {
  display: block !important;
  width: 42px; height: 5px;
  border-radius: 3px;
  background: var(--border-hover);
  margin: 9px auto 2px;
  flex-shrink: 0;
  cursor: grab;
  touch-action: none;
}
.sources-side-panel .ssp-head {
  padding-top: 6px !important;
  touch-action: none;
}

/* ── Edit mode ── */
.edit-container { border-radius: 16px; }
.edit-hint { display: none; }
.edit-btn-cancel, .edit-btn-send { flex: 1; justify-content: center; text-align: center; }
.edit-buttons { gap: 10px; }

/* ── Ask-user card ── */
.ask-user-card { max-width: 100%; padding: 12px 13px; }
.auc-opt { padding: 9px 15px; font-size: 0.83rem; }

/* ── ตาราง/โค้ดเลื่อนในตัวเอง ไม่ดันจอ ── */
.msg-body pre { max-width: calc(100vw - 76px); }
.msg-body table { font-size: 0.8rem; }

/* ── Live mode ── */
.live-orb { width: 120px; height: 120px; }
.live-ctl { width: 50px; height: 50px; }
.live-ctl.end { width: 60px; }
.live-video {
  position: fixed !important;
  right: 12px !important;
  top: calc(64px + env(safe-area-inset-top)) !important;
  bottom: auto !important;
  width: 34vw !important;
}
.live-caption { font-size: 0.88rem; }

/* ── จอเล็กพิเศษ (โทรศัพท์แคบ ≤480px) ── */
@media (max-width: 480px) {
  .messages-container { padding: 16px 10px 10px !important; }
  .welcome-title { font-size: 1.4rem !important; }
  .user-message .msg-content-wrapper { max-width: 94% !important; }
  .msg-avatar.ai-avatar { width: 22px !important; height: 22px !important; }
  .ai-message { gap: 8px !important; }
  .suggestion-chip { padding: 8px 12px !important; }
  .live-orb { width: 104px; height: 104px; }
  .msg-body pre { max-width: calc(100vw - 60px); }
}

/* ── แนวนอน (landscape) เตี้ย: ลด padding แนวตั้ง ── */
@media (max-height: 480px) {
  .welcome-title { font-size: 1.25rem !important; }
  .welcome-sub { display: none !important; }
  .live-orb { width: 80px; height: 80px; }
  .live-stage { gap: 14px; }
}