/* =============================================
   ChatATG — UX Upgrade Layer
   โหลดท้ายสุด ทับทุกชั้นก่อนหน้า (style / chat-redesign /
   settings-fix / mobile-bugs-fix) — สไตล์ใหม่ทั้งหมดรวมไว้ที่นี่
   ============================================= */

/* ─────────────────────────────────────────
   1) THINKING SHIMMER (แบบ Gemini)
───────────────────────────────────────── */
.thinking-shimmer {
  display: inline-block;
  padding: 8px 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-2);
}
@media (prefers-reduced-motion: no-preference) {
  .thinking-shimmer {
    background: linear-gradient(90deg,
      rgba(122,132,158,0.55) 0%,
      #63b3ed 35%,
      #a78bfa 50%,
      #63b3ed 65%,
      rgba(122,132,158,0.55) 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: thinkShimmer 1.9s linear infinite;
  }
  @keyframes thinkShimmer {
    0%   { background-position: 125% center; }
    100% { background-position: -125% center; }
  }
}

/* ── Thinking panel รีดีไซน์ (แบบ Gemini) ── */
.msg-body .thinking-details {
  background: linear-gradient(135deg, rgba(99,179,237,0.055), rgba(167,139,250,0.045)) !important;
  border: 1px solid rgba(99,179,237,0.16) !important;
  border-radius: 14px !important;
  margin: 6px 0 14px !important;
  padding: 0 !important;
  overflow: hidden;
}
.msg-body .thinking-summary {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 11px 15px !important;
  cursor: pointer;
  user-select: none;
  font-size: 0.85rem !important;
  font-weight: 650 !important;
  color: var(--text-2) !important;
  list-style: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.msg-body .thinking-summary::-webkit-details-marker { display: none; }
.msg-body .thinking-summary:hover { color: var(--text-1) !important; background: rgba(99,179,237,0.05); }
.msg-body .thinking-summary .think-chevron {
  flex-shrink: 0;
  color: var(--accent, #63b3ed);
  transition: transform 0.2s ease;
}
.msg-body .thinking-details[open] > .thinking-summary .think-chevron { transform: rotate(90deg); }
.msg-body .thinking-content {
  padding: 4px 16px 14px !important;
  font-size: 0.83rem !important;
  line-height: 1.75 !important;
  color: var(--text-2) !important;
  border-top: 1px dashed rgba(99,179,237,0.14);
}
/* หัวข้อความคิด (**...** จากโมเดล) เป็นหัวเรื่องสีฟ้า มีระยะห่าง */
.msg-body .thinking-content strong {
  display: block;
  margin: 12px 0 2px;
  color: var(--accent, #63b3ed);
  font-weight: 700;
}
.msg-body .thinking-content strong:first-child { margin-top: 6px; }
/* ระหว่าง stream: เปิดค้าง เลื่อนตามเอง จำกัดความสูงไม่ให้ดันจอ */
.thinking-details.thinking-streaming .thinking-content {
  max-height: 220px;
  overflow-y: auto;
}
.thinking-details.thinking-streaming {
  border-color: rgba(99,179,237,0.32) !important;
  box-shadow: 0 0 18px rgba(99,179,237,0.07);
}

/* ─────────────────────────────────────────
   2) MESSAGE ENTRANCE
───────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .messages-container .message {
    animation: msgIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  /* ปิดตอน bulk-render ประวัติ (loadConversation ใส่ class นี้) */
  .messages-container.no-anim .message { animation: none !important; }
}

@keyframes msgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────
   3) ACTION ROW — ข้อความ AI ล่าสุดโชว์ปุ่มค้าง (แบบ ChatGPT)
───────────────────────────────────────── */
/* โชว์ปุ่มค้างเฉพาะตอน "ไม่ได้สตรีม" — ระหว่างบอทตอบ ปุ่มไลค์/สร้างใหม่ต้องซ่อน
   (messagesContainer มีคลาส is-streaming ระหว่างตอบ → กันไม่ให้ !important นี้ทับ inline opacity:0) */
.messages-container:not(.is-streaming) .ai-message:last-child .msg-actions {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.messages-container.is-streaming .ai-message:last-child .msg-actions {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* กัน layout shift ตอน meta row (tokens/sec) โผล่ */
.msg-meta { min-height: 18px; }

/* ─────────────────────────────────────────
   4) STREAMING CURSOR — จุดกลม pulse แทน ▌
───────────────────────────────────────── */
.streaming-cursor::after {
  content: '' !important;
  display: inline-block !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: var(--accent, #63b3ed) !important;
  margin-left: 3px !important;
  vertical-align: baseline !important;
  opacity: 0.9 !important;
}
@media (prefers-reduced-motion: no-preference) {
  .streaming-cursor::after {
    animation: cursorPulse 1s ease-in-out infinite !important;
  }
  @keyframes cursorPulse {
    0%, 100% { opacity: 0.9; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.8); }
  }
}

/* ─────────────────────────────────────────
   4b) COMPOSER — ขอบไล่สีวิ่งตอนโฟกัส (แบบ Gemini)
───────────────────────────────────────── */
.input-wrapper { position: relative !important; }
.input-wrapper::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 25px;
  padding: 1.5px;
  background: linear-gradient(120deg, #63b3ed, #818cf8, #a78bfa, #63b3ed, #818cf8);
  background-size: 300% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}
.input-wrapper:focus-within::before { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .input-wrapper::before { animation: borderFlow 5s linear infinite; }
  @keyframes borderFlow {
    0%   { background-position: 0% center; }
    100% { background-position: 300% center; }
  }
}

/* Sidebar: แถบ accent หน้ารายการที่เปิดอยู่ */
.history-item.active {
  position: relative;
}
.history-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent, #63b3ed), var(--accent-2, #818cf8));
}

/* ─────────────────────────────────────────
   5) WELCOME SCREEN — greeting gradient + chips stagger
───────────────────────────────────────── */
.welcome-title #welcomeGreeting {
  font-weight: 500;
}
@media (prefers-reduced-motion: no-preference) {
  .suggestion-chip {
    animation: msgIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--i, 0) * 45ms);
  }
  .suggestion-chip:hover {
    transform: translateY(-2px);
    transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* ─────────────────────────────────────────
   6) SIDEBAR — date group labels + inline rename
───────────────────────────────────────── */
.history-group-label {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 14px 12px 5px;
  user-select: none;
}
.history-group-label:first-child { padding-top: 6px; }

.hi-rename-input {
  flex: 1;
  min-width: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-focus);
  border-radius: 6px;
  color: var(--text-1);
  font: inherit;
  font-size: 0.855rem;
  padding: 3px 8px;
  outline: none;
}

/* ─────────────────────────────────────────
   7) MARKDOWN — ตาราง GFM, blockquote, del (มากับ marked)
───────────────────────────────────────── */
.msg-body table {
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 0.875rem;
  display: block;            /* ตารางกว้าง = เลื่อนแนวนอนในตัวเอง ไม่ดันหน้า */
  max-width: 100%;
  overflow-x: auto;
  border-radius: 10px;
}
.msg-body table th,
.msg-body table td {
  border: 1px solid var(--border-hover);
  padding: 8px 13px;
  text-align: left;
  vertical-align: top;
  min-width: 60px;
}
.msg-body table th {
  background: var(--bg-elevated);
  font-weight: 700;
  color: var(--text-1);
  white-space: nowrap;
}
.msg-body table tr:nth-child(even) td { background: rgba(255,255,255,0.015); }

.msg-body blockquote {
  border-left: 3px solid var(--accent, #63b3ed);
  margin: 10px 0;
  padding: 4px 14px;
  color: var(--text-2);
  background: rgba(99,179,237,0.05);
  border-radius: 0 8px 8px 0;
}
.msg-body del { opacity: 0.6; }

/* KaTeX display math — จัดกลางและเลื่อนแนวนอนได้ */
.msg-body .katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 0;
}

/* ─────────────────────────────────────────
   8) FEEDBACK TIER-2 — ชิปเหตุผลหลังกด dislike
───────────────────────────────────────── */
.feedback-reason-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 0.78rem;
}
@media (prefers-reduced-motion: no-preference) {
  .feedback-reason-row { animation: msgIn 0.24s cubic-bezier(0.22, 1, 0.36, 1) both; }
}
.feedback-reason-row .fr-label { color: var(--text-2); margin-right: 4px; }
.feedback-reason-row .fr-chip {
  padding: 4px 12px;
  border-radius: 99px;
  border: 1px solid var(--border-hover);
  background: transparent;
  color: var(--text-1);
  font-size: 0.76rem;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.feedback-reason-row .fr-chip:hover {
  background: var(--accent-soft, rgba(99,179,237,0.12));
  border-color: var(--border-focus);
}
.feedback-reason-row .fr-dismiss {
  margin-left: auto;
  color: var(--text-2);
  padding: 2px 8px;
  border-radius: 6px;
}
.feedback-reason-row .fr-dismiss:hover { color: var(--text-1); background: var(--bg-hover); }

/* ─────────────────────────────────────────
   9) ACCESSIBILITY — sr-only, focus ring, contrast
───────────────────────────────────────── */
.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;
}

/* focus ring เฉพาะ keyboard navigation (ไม่โผล่ตอนคลิกเมาส์) */
.msg-action-btn:focus-visible,
.suggestion-chip:focus-visible,
.history-item:focus-visible,
.nav-item:focus-visible,
.send-btn:focus-visible,
.btn-circle-add:focus-visible,
.btn-pill-tools:focus-visible,
.model-selector-pill:focus-visible,
.btn-icon-mic:focus-visible,
.popover-item:focus-visible,
.fr-chip:focus-visible,
.scroll-to-bottom-btn:focus-visible {
  outline: 2px solid var(--border-focus, rgba(99,179,237,0.5)) !important;
  outline-offset: 2px !important;
}

/* ─────────────────────────────────────────
   10) SHARE MODAL + SHARED LINKS MANAGER
───────────────────────────────────────── */
.share-modal {
  background: var(--bg-elevated);
  border: 1px solid var(--border-hover);
  border-radius: 18px;
  padding: 22px 24px;
  width: min(480px, calc(100vw - 32px));
  box-shadow: 0 24px 80px rgba(0,0,0,0.55);
}
@media (prefers-reduced-motion: no-preference) {
  .share-modal { animation: pop 0.16s var(--ease, ease) both; }
}
.share-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.share-modal-header h3 { font-size: 1.05rem; color: var(--text-1); }
.share-close {
  color: var(--text-2);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.95rem;
}
.share-close:hover { color: var(--text-1); background: var(--bg-hover); }
.share-note { font-size: 0.82rem; color: var(--text-2); line-height: 1.55; margin-bottom: 14px; }
.share-loading { padding: 14px 0; text-align: center; }
.share-link-row { display: flex; gap: 8px; }
.share-link-input {
  flex: 1;
  min-width: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-hover);
  border-radius: 10px;
  color: var(--text-1);
  font-size: 0.82rem;
  padding: 9px 12px;
  outline: none;
}
.share-copy-btn {
  background: var(--accent, #63b3ed);
  color: #0b1220;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 9px 16px;
  border-radius: 10px;
  white-space: nowrap;
  transition: filter var(--t-fast, 0.12s);
}
.share-copy-btn:hover { filter: brightness(1.1); }
.share-actions { display: flex; gap: 8px; margin-top: 12px; }
.share-alt-btn {
  flex: 1;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-hover);
  color: var(--text-2);
  font-size: 0.8rem;
  transition: background var(--t-fast, 0.12s), color var(--t-fast, 0.12s);
}
.share-alt-btn:hover { background: var(--bg-hover); color: var(--text-1); }

.shared-link-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
}
.shared-link-item:last-child { border-bottom: none; }
.sli-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sli-title {
  color: var(--text-1);
  font-size: 0.86rem;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sli-title:hover { color: var(--accent, #63b3ed); text-decoration: underline; }
.sli-date { font-size: 0.72rem; color: var(--text-2); }
.sli-delete { color: var(--text-2); padding: 6px 8px; border-radius: 8px; }
.sli-delete:hover { color: #f87171; background: rgba(239,68,68,0.1); }
.sli-delete:disabled { opacity: 0.4; cursor: default; }

/* Contrast: ยกสีข้อความรองให้ผ่าน WCAG AA บนพื้นเข้ม
   (--text-2 เดิม #7a849e บน #09090f ≈ 4.1:1, ปรับเป็น #98a2c0 ≈ 6:1)
   scope เฉพาะตอนไม่ใช่ light — ไฟล์นี้โหลดท้ายสุด ถ้าใช้ :root เฉยๆ จะทับ light theme */
html:not([data-theme="light"]) { --text-2: #98a2c0; }
html:not([data-theme="light"]) .msg-action-btn { color: rgba(152,162,192,0.95) !important; }
html:not([data-theme="light"]) .pi-desc { color: rgba(140,150,185,0.95) !important; }

/* ─────────────────────────────────────────
   10a) SEARCH STATUS + SOURCE CHIPS (แบบ Gemini)
───────────────────────────────────────── */
.search-status {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  margin-bottom: 8px;
  max-width: fit-content;
  background: rgba(99,179,237,0.06);
  border: 1px solid rgba(99,179,237,0.16);
  border-radius: 12px;
  font-size: 0.78rem;
  color: var(--text-2);
}
.search-status svg { flex-shrink: 0; color: var(--accent, #63b3ed); }
.search-status-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 560px;
}
.search-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 10px;
}
.source-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px 4px 6px;
  border-radius: 99px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-hover);
  color: var(--text-2);
  font-size: 0.74rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--t-fast, 0.12s), color var(--t-fast, 0.12s), transform var(--t-fast, 0.12s);
}
.source-chip img {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  padding: 1px;
}
.source-chip:hover {
  border-color: var(--border-focus);
  color: var(--text-1);
  transform: translateY(-1px);
}

/* meta row (เวลา/ความเร็ว) ให้ดูตั้งใจขึ้น */
.msg-meta { font-family: var(--mono, monospace); }

/* แถวสถานะค้นหาระหว่าง stream — อยู่ใต้คำตอบ */
.msg-sources { margin-top: 2px; }
.msg-sources .search-status { margin: 8px 0 6px; }
.msg-sources .search-sources { margin: 0 0 6px; }

/* ─────────────────────────────────────────
   10c) INFO PANEL — สไลด์จากขวา (แหล่งที่มา / กระบวนการคิด) แบบ ChatGPT
───────────────────────────────────────── */
.info-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 100vw);
  background: var(--bg-surface, #0d0d15);
  border-left: 1px solid var(--border-hover);
  box-shadow: -18px 0 50px rgba(0,0,0,0.45);
  z-index: 3000;
  display: flex;
  flex-direction: column;
  transform: translateX(102%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.info-panel.open { transform: translateX(0); }
.info-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-1);
  flex-shrink: 0;
}
.info-panel-close {
  color: var(--text-2);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.9rem;
}
.info-panel-close:hover { color: var(--text-1); background: var(--bg-hover); }
.info-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px 24px;
}
/* favicon ซ้อนกันบนปุ่ม "ที่มา" (แบบ ChatGPT) */
.fav-stack {
  display: inline-flex;
  align-items: center;
  margin-right: 2px;
}
.fav-stack-img {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  padding: 1px;
  border: 1.5px solid var(--bg-base, #09090f);
  margin-left: -6px;
}
.fav-stack-img:first-child { margin-left: 0; }

.ip-section-title {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-2);
  margin: 14px 2px 8px;
}
.ip-section-title:first-child { margin-top: 2px; }
.ip-query-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.ip-query-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 99px;
  background: rgba(99,179,237,0.07);
  border: 1px solid rgba(99,179,237,0.16);
  color: var(--text-2);
  font-size: 0.76rem;
}
.ip-query-chip svg { color: var(--accent, #63b3ed); flex-shrink: 0; }
.source-card .sc-num {
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-2);
  font-family: var(--mono, monospace);
}
.source-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
  margin-bottom: 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.source-card:hover { border-color: var(--border-focus); transform: translateY(-1px); }
.source-card img {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #fff;
  padding: 2px;
  flex-shrink: 0;
}
.source-card .sc-info { min-width: 0; }
.source-card .sc-domain {
  color: var(--text-1);
  font-weight: 700;
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.source-card .sc-hint { color: var(--text-2); font-size: 0.72rem; margin-top: 1px; }
.ip-thought {
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--text-2);
}
.ip-thought strong {
  display: block;
  margin: 14px 0 3px;
  color: var(--accent, #63b3ed);
  font-weight: 700;
}
.ip-thought strong:first-child { margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .info-panel { transition: none; }
}
[data-theme="light"] .info-panel { box-shadow: -18px 0 50px rgba(15,23,42,0.18); }

/* ─────────────────────────────────────────
   10b) MEDIA MISSING CARD — ไฟล์สื่อหาย ให้กดสร้างใหม่เอง
───────────────────────────────────────── */
.media-missing {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  margin: 10px 0;
  background: var(--bg-elevated);
  border: 1px dashed var(--border-hover);
  border-radius: 14px;
  font-size: 0.85rem;
  color: var(--text-2);
}
.media-regen-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 99px;
  border: 1px solid var(--border-focus);
  color: var(--accent, #63b3ed);
  font-size: 0.8rem;
  font-weight: 600;
  transition: background var(--t-fast, 0.12s);
}
.media-regen-btn:hover { background: rgba(99,179,237,0.12); }

/* ─────────────────────────────────────────
   11) LIGHT THEME REPAIR — หน้าแชต
   chat-redesign.css ฮาร์ดโค้ดสีเข้ม + !important โดยไม่มีฝั่ง light
   บล็อกนี้ override เฉพาะจุดที่พัง (selector มี [data-theme] = ชนะ specificity)
   หมายเหตุ: โค้ดบล็อกคงพื้นเข้มไว้ (พฤติกรรมเดียวกับ ChatGPT ธีมสว่าง)
───────────────────────────────────────── */
[data-theme="light"] {
  --chat-bg: #f7f8fc;
}
[data-theme="light"] body,
[data-theme="light"] .chat-area {
  background: #f7f8fc !important;
}
[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse 55% 35% at 18% 8%,  rgba(99,179,237,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 82% 92%, rgba(129,140,248,0.06) 0%, transparent 70%) !important;
}

/* Sidebar (style.css ฮาร์ดโค้ด #07070d) */
[data-theme="light"] .sidebar {
  background: #eef0f7 !important;
  border-right: 1px solid rgba(0,0,0,0.06) !important;
}

/* Topbar */
[data-theme="light"] .topbar {
  background: rgba(247,248,252,0.85) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .app-logo-text { color: #111827 !important; }

/* Welcome */
[data-theme="light"] .welcome-title { color: #1a2233 !important; }
[data-theme="light"] .welcome-sub { color: #5b6478 !important; }
[data-theme="light"] .suggestion-chip {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.09) !important;
  color: #4b5563 !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.05) !important;
}
[data-theme="light"] .suggestion-chip:hover {
  background: rgba(99,179,237,0.1) !important;
  border-color: rgba(59,130,196,0.4) !important;
  color: #2b6cb0 !important;
}

/* User bubble */
[data-theme="light"] .user-message .msg-body {
  background: #e8eefb !important;
  border: 1px solid rgba(30,64,120,0.08) !important;
  color: #1f2937 !important;
}
[data-theme="light"] .user-message .msg-body:hover {
  background: #e0e9fa !important;
  border-color: rgba(30,64,120,0.14) !important;
}

/* AI message */
[data-theme="light"] .ai-message .msg-body { color: #27324a !important; }
[data-theme="light"] .ai-message .msg-body h1,
[data-theme="light"] .ai-message .msg-body h2,
[data-theme="light"] .ai-message .msg-body h3 { color: #111827 !important; }
[data-theme="light"] .msg-avatar.ai-avatar {
  background: rgba(99,179,237,0.12) !important;
  border: 1px solid rgba(59,130,196,0.25) !important;
  box-shadow: none !important;
}
[data-theme="light"] .msg-action-btn { color: #5b6478 !important; }
[data-theme="light"] .msg-action-btn:hover { color: #1f2937 !important; }

/* Composer */
[data-theme="light"] .input-wrapper {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.11) !important;
  box-shadow: 0 2px 14px rgba(15,23,42,0.06) !important;
}
[data-theme="light"] .input-wrapper:focus-within {
  border-color: rgba(59,130,196,0.45) !important;
  background: #ffffff !important;
  box-shadow: 0 2px 14px rgba(15,23,42,0.06), 0 0 0 4px rgba(99,179,237,0.12) !important;
}
[data-theme="light"] #messageInput { color: #111827 !important; }
[data-theme="light"] #messageInput::placeholder { color: #9aa3b8 !important; }
[data-theme="light"] .btn-pill-tools,
[data-theme="light"] .model-selector-pill,
[data-theme="light"] .btn-circle-add,
[data-theme="light"] .btn-icon-mic { color: #5b6478 !important; }

/* Popover menus */
[data-theme="light"] .popover-menu {
  background: rgba(255,255,255,0.98) !important;
  border: 1px solid rgba(0,0,0,0.09) !important;
  box-shadow: 0 20px 48px rgba(15,23,42,0.16) !important;
}
[data-theme="light"] .popover-item { color: #4b5563 !important; }
[data-theme="light"] .popover-item:hover { background: rgba(0,0,0,0.045) !important; color: #111827 !important; }
[data-theme="light"] .pi-title { color: #1f2937 !important; }
[data-theme="light"] .pi-desc { color: #6b7280 !important; }

/* Thinking blocks */
[data-theme="light"] .thinking-details,
[data-theme="light"] .thinking-live {
  background: rgba(99,179,237,0.06) !important;
  border-color: rgba(59,130,196,0.2) !important;
}
[data-theme="light"] .thinking-content { color: #5b6478 !important; }

/* ตาราง markdown บนพื้นสว่าง */
[data-theme="light"] .msg-body table th { background: #eef0f7; }
[data-theme="light"] .msg-body table tr:nth-child(even) td { background: rgba(15,23,42,0.02); }

/* ═════════════════════════════════════════════════════════════
   12) DARK THEME v2 — "Premium Neutral" (แบบ ChatGPT)
   เทากลางพรีเมี่ยม เลิกโทนน้ำเงินเขียวเข้มเดิม — ธีมสว่างไม่แตะ
   ═════════════════════════════════════════════════════════════ */
html:not([data-theme="light"]) {
  --chat-bg:     #000000;
  --bg-base:     #000000;
  --bg-surface:  #000000;
  --bg-elevated: #1b1b1b;
  --bg-hover:    #161616;
  --bg-active:   #242424;
  /* ขอบชัดขึ้นให้เห็นบนพื้นดำสนิท (คอนทราสสูง) */
  --border:       rgba(255,255,255,0.1);
  --border-hover: rgba(255,255,255,0.18);
  --border-focus: rgba(255,255,255,0.32);
  --text-1: #ffffff;
  --text-2: #d0d0d0;
  --text-3: #9a9a9a;
  --accent-soft: rgba(99,179,237,0.16);
}

/* พื้นหลังหลัก — ฆ่า ambient glow น้ำเงินเดิมให้เรียบพรีเมี่ยม */
html:not([data-theme="light"]) body,
html:not([data-theme="light"]) .chat-area,
html:not([data-theme="light"]) .main {
  background: #000000 !important;
}
html:not([data-theme="light"]) body::before { background: none !important; }

/* Topbar */
html:not([data-theme="light"]) .topbar {
  background: transparent !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-bottom: none !important;
}
html:not([data-theme="light"]) .app-logo-text { color: #ffffff !important; }

/* ── SIDEBAR — เรียบ เข้มกว่าพื้นหลัก (แบบ ChatGPT) ── */
html:not([data-theme="light"]) .sidebar {
  background: #000000 !important;
  border-right: 1px solid rgba(255,255,255,0.05) !important;
}
html:not([data-theme="light"]) .sidebar-header { border-bottom: none !important; }
html:not([data-theme="light"]) .nav-item {
  border-radius: 10px !important;
  color: #ededed !important;
}
html:not([data-theme="light"]) .nav-item:hover { background: #242424 !important; color: #fff !important; }
html:not([data-theme="light"]) .nav-search-input { color: #ffffff !important; }
html:not([data-theme="light"]) .nav-search-input::placeholder { color: #9a9a9a !important; }
html:not([data-theme="light"]) .shortcut-hint {
  color: #808080 !important;
  border-color: rgba(255,255,255,0.1) !important;
  background: transparent !important;
}
html:not([data-theme="light"]) .history-item {
  border-radius: 10px !important;
  color: #e2e2e2 !important;
}
html:not([data-theme="light"]) .history-item:hover { background: #242424 !important; color: #fff !important; }
html:not([data-theme="light"]) .history-item.active { background: #1b1b1b !important; color: #fff !important; }
html:not([data-theme="light"]) .history-item.active::before { display: none; }
html:not([data-theme="light"]) .history-group-label { color: #9a9a9a; }
html:not([data-theme="light"]) .user-card:hover { background: #242424 !important; }
html:not([data-theme="light"]) .user-dropdown {
  background: #1b1b1b !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* ── AI MESSAGE — ข้อความเรียงตรงแนวเดียวกับโลโก้บอท ── */
.ai-message { position: relative !important; }
.ai-message > .msg-avatar.ai-avatar { margin-top: 2px !important; }
/* meta (ความเร็ว/เวลา) ลอยขวาบน — ไม่ดันเนื้อหาให้เหลื่อมจากโลโก้อีกต่อไป */
.ai-message .msg-meta {
  position: absolute !important;
  top: 16px !important;
  right: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  z-index: 2;
}
.ai-message .msg-body > :first-child { margin-top: 0 !important; }
.ai-message .msg-body > p:first-child { padding-top: 2px; }
html:not([data-theme="light"]) .msg-avatar.ai-avatar {
  background: #1b1b1b !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: none !important;
}
html:not([data-theme="light"]) .ai-message .msg-body { color: #f6f6f6 !important; }
html:not([data-theme="light"]) .ai-message .msg-body h1,
html:not([data-theme="light"]) .ai-message .msg-body h2,
html:not([data-theme="light"]) .ai-message .msg-body h3,
html:not([data-theme="light"]) .ai-message .msg-body h4 { color: #ffffff !important; }
html:not([data-theme="light"]) .msg-action-btn { color: #b8b8b8 !important; }
html:not([data-theme="light"]) .msg-action-btn:hover { color: #ffffff !important; background: #1b1b1b !important; }
html:not([data-theme="light"]) .streaming-cursor::after { background: #ffffff !important; }

/* Typography ภายในคำตอบ — จัดระยะให้อ่านง่ายเป็นระเบียบ */
.ai-message .msg-body p { margin: 0.55em 0; }
.ai-message .msg-body ul,
.ai-message .msg-body ol { margin: 0.5em 0 0.7em; padding-left: 1.45em; }
.ai-message .msg-body li { margin: 0.28em 0; }
.ai-message .msg-body li::marker { color: var(--text-2); }
.ai-message .msg-body h1 { font-size: 1.32rem !important; }
.ai-message .msg-body h2 { font-size: 1.16rem !important; }
.ai-message .msg-body h3 { font-size: 1.04rem !important; }
.ai-message .msg-body hr {
  border: none;
  border-top: 1px solid var(--border-hover);
  margin: 1.4em 0;
}
html:not([data-theme="light"]) .msg-body table th { background: #151515; border-color: rgba(255,255,255,0.09); }
html:not([data-theme="light"]) .msg-body table td { border-color: rgba(255,255,255,0.07); }
html:not([data-theme="light"]) .msg-body table tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
html:not([data-theme="light"]) .msg-body blockquote {
  border-left-color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.03);
}

/* ── USER MESSAGE — bubble เทาเรียบแบบ ChatGPT ── */
html:not([data-theme="light"]) .user-message .msg-body {
  background: #1b1b1b !important;
  border: none !important;
  color: #ffffff !important;
  border-radius: 22px !important;
}
html:not([data-theme="light"]) .user-message .msg-body:hover { background: #242424 !important; }

/* ── THINKING BOX — กลางเรียบ + แถวค้นหาเว็บฝังในกล่องเดียวกัน ── */
html:not([data-theme="light"]) .msg-body .thinking-details {
  background: rgba(255,255,255,0.028) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
}
html:not([data-theme="light"]) .thinking-details.thinking-streaming {
  border-color: rgba(255,255,255,0.14) !important;
  box-shadow: none !important;
}
html:not([data-theme="light"]) .msg-body .thinking-content {
  border-top: 1px dashed rgba(255,255,255,0.09);
}
.think-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 12px 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.07);
  font-size: 0.78rem;
  color: var(--text-2);
}
.think-search-row svg { flex-shrink: 0; color: var(--accent, #63b3ed); }
.think-search-row .tsr-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.think-search-row .fav-stack { margin-left: auto; flex-shrink: 0; }
[data-theme="light"] .think-search-row {
  background: rgba(15,23,42,0.04);
  border-color: rgba(15,23,42,0.08);
}
html:not([data-theme="light"]) .search-status {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* ── ASK USER CARD — คำถามพร้อมปุ่มตัวเลือก (แบบ Claude) ── */
.ask-user-card {
  margin: 14px 0 6px;
  padding: 16px 17px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border-hover));
  border-radius: 17px;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--accent) 12%, transparent), transparent 48%),
    color-mix(in srgb, var(--bg-elevated) 96%, transparent);
  max-width: 560px;
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  animation: tool-card-in .28s cubic-bezier(.22,1,.36,1) both;
}
.auc-q {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-weight: 650;
  font-size: 0.9rem;
  color: var(--text-1);
  margin-bottom: 12px;
  line-height: 1.55;
}
.auc-q svg { flex-shrink: 0; margin-top: 3px; color: var(--accent, #63b3ed); }
.auc-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.auc-opt {
  padding: 8px 16px;
  border-radius: 99px;
  border: 1px solid var(--border-hover);
  background: transparent;
  color: var(--text-1);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.auc-opt:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--border-focus);
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(0,0,0,.16);
}
.auc-opt:active:not(:disabled) { transform: translateY(0) scale(.97); }
.auc-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.auc-opt:disabled { opacity: 0.45; cursor: default; }
.ask-user-card.answered .auc-opt.picked {
  opacity: 1;
  border-color: var(--accent, #63b3ed);
  color: var(--accent, #63b3ed);
  background: var(--accent-soft, rgba(99,179,237,0.12));
}

/* ── TOOL OUTPUTS + CODE BLOCKS — shared React/Tailwind visual language ── */
.device-chip,
.device-tool-details,
.device-tools-group,
.agent-permission-card {
  animation: tool-card-in .28s cubic-bezier(.22,1,.36,1) both;
}
.device-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--border-hover);
  border-radius: 999px;
  color: var(--text-2);
  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
  font-size: .76rem;
  font-weight: 600;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.device-chip::before { content: '✦'; color: var(--accent); font-size: .7rem; }
.device-chip.ok { color: #86efac; border-color: rgba(74,222,128,.28); background: rgba(74,222,128,.08); }
.device-chip.ok::before { content: '✓'; color: #86efac; }
.device-chip.fail { color: #fda4af; border-color: rgba(251,113,133,.28); background: rgba(251,113,133,.08); }
.device-chip.fail::before { content: '!'; color: #fda4af; }
.device-chip:hover { transform: translateY(-1px); border-color: var(--border-focus); }
.device-tools-group,
.device-tool-details {
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
  background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
}
.device-tools-group .thinking-summary,
.device-tool-details .thinking-summary { padding: 9px 12px; }
.device-tool-output { border-top-color: color-mix(in srgb, var(--accent) 18%, var(--border)); }
.agent-permission-card {
  background:
    radial-gradient(circle at 0 0, rgba(99,179,237,.12), transparent 45%),
    color-mix(in srgb, var(--bg-elevated) 95%, transparent);
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border-hover));
  box-shadow: 0 12px 32px rgba(0,0,0,.16);
}
.apc-title svg { color: var(--accent); }
.apc-btn { transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease; }
.apc-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(0,0,0,.14); }
.apc-btn:active { transform: scale(.97); }
.apc-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@keyframes tool-card-in {
  from { opacity: 0; transform: translateY(7px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ask-user-card, .device-chip, .device-tool-details, .device-tools-group,
  .agent-permission-card { animation: none; }
}

/* Keep nested thinking/model menus inside the viewport on narrow screens. */
.model-popover { max-height: min(520px, calc(100dvh - 24px)); }
.model-menu-scroll { max-height: min(420px, calc(100dvh - 104px)); }
@media (max-width: 768px) {
  .model-popover { width: min(290px, calc(100vw - 24px)); }
  .thinking-level-submenu {
    left: auto !important;
    right: 0 !important;
    top: calc(100% + 6px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-width: min(230px, calc(100vw - 36px));
    transform-origin: top right !important;
  }
  .thinking-level-submenu.show { transform: translateY(0) scale(1) !important; }
}
@media (max-height: 520px) {
  .model-popover { overflow-y: auto; }
  .thinking-level-submenu,
  .thinking-level-submenu.show {
    position: static !important;
    width: auto;
    min-width: 0;
    max-height: 155px;
    margin: 5px 7px !important;
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
    transform: none !important;
  }
  .thinking-level-submenu:not(.show) { display: none; }
}

/* ── EDIT MODE — กล่องแก้ไขแบบ composer เต็มความกว้าง (แบบ ChatGPT) ── */
.user-message.editing { padding: 16px 0 8px !important; }
.user-message.editing .msg-content-wrapper {
  max-width: 100% !important;
  width: 100%;
  align-items: stretch !important;
}
.edit-container {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-hover);
  border-radius: 20px;
  padding: 14px 16px 10px;
}
.edit-textarea {
  width: 100%;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: var(--text-1) !important;
  font: inherit;
  font-size: 0.94rem;
  line-height: 1.65;
  resize: none;
  min-height: 44px;
  max-height: 320px;
  padding: 0 !important;
}
.edit-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.edit-hint { margin-right: auto; font-size: 0.72rem; color: var(--text-3); }
.edit-btn-cancel {
  padding: 7px 16px;
  border-radius: 99px;
  border: 1px solid var(--border-hover);
  background: transparent;
  color: var(--text-2);
  font-size: 0.82rem;
  font-weight: 600;
}
.edit-btn-cancel:hover { background: var(--bg-hover); color: var(--text-1); }
.edit-btn-send {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  border-radius: 99px;
  border: none;
  background: #ffffff;
  color: #111;
  font-size: 0.82rem;
  font-weight: 700;
  transition: filter 0.15s ease;
}
.edit-btn-send:hover { filter: brightness(0.9); }
[data-theme="light"] .edit-btn-send { background: #111827; color: #fff; }

/* ── WELCOME — คลีน ไม่มีอิโมจิ ── */
html:not([data-theme="light"]) .welcome-title { color: #ffffff !important; }
html:not([data-theme="light"]) .welcome-sub { color: #b8b8b8 !important; }
.welcome-title strong {
  background: linear-gradient(92deg, #63b3ed, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}
/* ชิปแนะนำ: pill บรรทัดเดียว + ไอคอน Lucide (แบบ ChatGPT) */
.suggestion-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px !important;
  max-width: 620px;
  margin: 0 auto;
  grid-template-columns: none !important;
}
.suggestion-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  height: auto !important;
  padding: 10px 18px !important;
  border-radius: 99px !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-align: left !important;
}
.suggestion-chip svg,
.suggestion-chip i { width: 15px; height: 15px; flex-shrink: 0; }
html:not([data-theme="light"]) .suggestion-chip {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  color: #e2e2e2 !important;
  box-shadow: none !important;
}
html:not([data-theme="light"]) .suggestion-chip svg { color: #b8b8b8; }
html:not([data-theme="light"]) .suggestion-chip:hover {
  background: #1b1b1b !important;
  border-color: rgba(255,255,255,0.22) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* ── COMPOSER — เทาเรียบ ไม่มีขอบไล่สีวิ่ง (คลีนแบบ ChatGPT) ── */
.input-wrapper::before { display: none !important; }
html:not([data-theme="light"]) .input-wrapper {
  background: #1b1b1b !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 26px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.22) !important;
}
html:not([data-theme="light"]) .input-wrapper:focus-within {
  border-color: rgba(255,255,255,0.16) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.22) !important;
}
html:not([data-theme="light"]) #messageInput { color: #ffffff !important; }
html:not([data-theme="light"]) #messageInput::placeholder { color: #a8a8a8 !important; }
html:not([data-theme="light"]) .btn-pill-tools,
html:not([data-theme="light"]) .model-selector-pill {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #e2e2e2 !important;
}
html:not([data-theme="light"]) .btn-pill-tools:hover,
html:not([data-theme="light"]) .model-selector-pill:hover {
  background: #242424 !important;
  color: #ffffff !important;
}
html:not([data-theme="light"]) .btn-circle-add,
html:not([data-theme="light"]) .btn-icon-mic {
  color: #e2e2e2 !important;
  background: transparent !important;
  border: none !important;
}
html:not([data-theme="light"]) .btn-circle-add:hover,
html:not([data-theme="light"]) .btn-icon-mic:hover {
  background: #242424 !important;
  color: #ffffff !important;
}
/* ปุ่มส่ง: วงกลมขาว ลูกศรดำ (แบบ ChatGPT) */
html:not([data-theme="light"]) .send-btn {
  background: #ffffff !important;
  color: #0d0d0d !important;
  border: none !important;
}
html:not([data-theme="light"]) .send-btn:hover:not(:disabled) { background: #ffffff !important; }
html:not([data-theme="light"]) .send-btn:disabled {
  background: rgba(255,255,255,0.25) !important;
  color: #000000 !important;
}
html:not([data-theme="light"]) .input-area {
  background: linear-gradient(180deg, transparent, #000000 32%) !important;
}

/* Popover / dropdown ทั่วไป */
html:not([data-theme="light"]) .popover-menu {
  background: #1b1b1b !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,0.45) !important;
}
html:not([data-theme="light"]) .popover-item { color: #ededed !important; }
html:not([data-theme="light"]) .popover-item:hover { background: #242424 !important; color: #fff !important; }
html:not([data-theme="light"]) .scroll-to-bottom-btn {
  background: #1b1b1b !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
}

/* ═════════════════════════════════════════════════════════════
   13) ATG LIVE — โหมดสนทนาเสียงเรียลไทม์ (+กล้อง/แชร์จอ)
   ═════════════════════════════════════════════════════════════ */
.live-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: #141414;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(20px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.live-overlay.open { opacity: 1; }
.live-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.live-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.01em;
  color: #ffffff;
}
.live-badge img { width: 22px; height: 22px; object-fit: contain; }
.live-status { color: #b8b8b8; font-size: 0.82rem; min-height: 1.2em; }
.live-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  width: 100%;
  position: relative;
}
.live-orb {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #a8d3ff, #63b3ed 45%, #4c6ef5 85%);
  box-shadow: 0 0 70px rgba(99,179,237,0.3);
  transition: transform 0.18s ease, box-shadow 0.3s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .live-orb.speaking { animation: orbPulse 1.3s ease-in-out infinite; }
  @keyframes orbPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.09); }
  }
}
.live-orb.listening { box-shadow: 0 0 100px rgba(99,179,237,0.5); }
.live-video {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: min(260px, 38vw);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  display: none;
  background: #000;
}
.live-caption {
  min-height: 52px;
  max-width: 640px;
  text-align: center;
  color: #e2e2e2;
  font-size: 0.95rem;
  line-height: 1.6;
  padding: 0 12px;
}
.live-caption .lc-user {
  display: block;
  color: #a8a8a8;
  font-size: 0.8rem;
  margin-bottom: 4px;
}
.live-controls {
  display: flex;
  gap: 14px;
  align-items: center;
}
.live-ctl {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1b1b1b;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.live-ctl:hover { background: #242424; transform: translateY(-2px); }
.live-ctl.off { background: #111111; color: #9a9a9a; }
.live-ctl.on { background: #ffffff; color: #111; }
.live-ctl.end { background: #e5484d; color: #fff; border: none; width: 66px; }
.live-ctl.end:hover { background: #f0565b; }
.live-err {
  color: #f87171;
  font-size: 0.85rem;
  text-align: center;
  max-width: 480px;
}

/* ═════════════════════════════════════════════════════════════
   14) SIDEBAR COLLAPSE — รางไอคอน (แบบ ChatGPT) + ปุ่ม toggle อันเดียว
   เดิม: ยุบแล้ว sidebar หายทั้งแถบ (width:0) + มีปุ่ม toggle 2 อัน
        (ปุ่มยุบใน sidebar + hamburger ใน topbar)
   ใหม่: เดสก์ท็อปยุบเป็นราง 62px โชว์ไอคอนอย่างเดียว, hamburger topbar
        ซ่อนบนเดสก์ท็อป (เหลือปุ่มเดียวคือปุ่มในราง/หัว sidebar)
   ═════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  /* เดสก์ท็อปมีปุ่ม toggle ใน sidebar อยู่แล้ว — ซ่อน hamburger ใน topbar กันซ้ำ */
  .topbar .toggle-sidebar { display: none !important; }

  /* ยุบ = รางไอคอนแคบ ไม่ใช่ซ่อนหาย */
  .sidebar.collapsed {
    width: 62px !important;
    min-width: 62px !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }
  /* หัวราง: เหลือปุ่ม expand อันเดียว ตรงกลาง (ซ่อนโลโก้+ชื่อ) */
  .sidebar.collapsed .logo-simple { display: none !important; }
  .sidebar.collapsed .sidebar-header {
    justify-content: center !important;
    padding: 14px 0 8px !important;
  }
  .sidebar.collapsed #collapseSidebarBtn { color: var(--text-1); }

  /* นาวิเกชัน: ไอคอนกลาง ซ่อนข้อความ/คีย์ลัด/ช่องค้นหา */
  .sidebar.collapsed .sidebar-nav { padding: 6px 0 !important; align-items: center; gap: 4px; }
  .sidebar.collapsed .nav-item {
    justify-content: center !important;
    width: 44px !important;
    padding: 11px 0 !important;
    margin: 0 auto 2px !important;
    gap: 0 !important;
  }
  .sidebar.collapsed .nav-item > span:not(.shortcut-hint),
  .sidebar.collapsed .shortcut-hint,
  .sidebar.collapsed .nav-search-input { display: none !important; }
  .sidebar.collapsed .nav-item svg { opacity: 0.85; }
  .sidebar.collapsed .search-wrapper {
    justify-content: center !important;
    cursor: pointer;
    height: auto !important;
    padding: 11px 0 !important;
    width: 44px !important;
    margin: 0 auto !important;
    border-radius: 12px;
  }
  .sidebar.collapsed .search-wrapper:hover { background: var(--bg-hover); }

  /* ประวัติแชท: ซ่อนในโหมดราง */
  .sidebar.collapsed .chat-history-container { display: none !important; }

  /* ฟุตเตอร์: อวตารอย่างเดียว ตรงกลาง */
  .sidebar.collapsed .sidebar-footer { padding: 10px 0 !important; }
  .sidebar.collapsed .user-card {
    justify-content: center !important;
    width: 44px !important;
    padding: 7px !important;
    margin: 0 auto !important;
  }
  .sidebar.collapsed .user-info { display: none !important; }

  /* tooltip เวลาชี้ไอคอนในราง */
  .sidebar.collapsed .nav-item,
  .sidebar.collapsed .search-wrapper,
  .sidebar.collapsed .user-card { position: relative; }
  .sidebar.collapsed [data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-elevated);
    color: var(--text-1);
    border: 1px solid var(--border-hover);
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 0.78rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  }
  .sidebar.collapsed [data-tip]:hover::after { opacity: 1; }
}

/* ═════════════════════════════════════════════════════════════
   15) SEARCH OVERLAY (แบบ Gemini/ChatGPT) — กล่องค้นหากลางจอ
   ═════════════════════════════════════════════════════════════ */
.search-wrapper { cursor: pointer; }
#searchModal { align-items: flex-start; }
#searchModal.open { display: flex; }
.search-panel {
  width: min(640px, calc(100vw - 32px));
  margin-top: 12vh;
  background: var(--bg-elevated);
  border: 1px solid var(--border-hover);
  border-radius: 16px;
  box-shadow: 0 32px 90px rgba(0,0,0,0.55);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}
@media (prefers-reduced-motion: no-preference) {
  #searchModal.open .search-panel { animation: searchPop 0.18s cubic-bezier(0.22,1,0.36,1) both; }
  @keyframes searchPop { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } }
}
.search-panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
}
.search-panel-head > svg { color: var(--text-2); flex-shrink: 0; }
.search-panel-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-1);
  font-size: 1.05rem;
  font-family: inherit;
}
.search-panel-input::placeholder { color: var(--text-3); }
.search-esc {
  font-size: 0.7rem;
  color: var(--text-2);
  border: 1px solid var(--border-hover);
  border-radius: 6px;
  padding: 3px 8px;
  font-family: var(--mono, monospace);
}
.search-esc:hover { color: var(--text-1); background: var(--bg-hover); }
.search-panel-results { overflow-y: auto; padding: 8px; }
.search-group {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
  padding: 12px 12px 5px;
}
.search-result {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  text-align: left;
  color: var(--text-1);
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.12s ease;
}
.search-result:hover { background: var(--bg-hover); }
.search-result .sr-ic { color: var(--text-2); flex-shrink: 0; }
.search-result .sr-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
.search-result .sr-date { color: var(--text-2); font-size: 0.76rem; flex-shrink: 0; }
.search-result mark { background: rgba(99,179,237,0.28); color: inherit; border-radius: 3px; padding: 0 1px; }
.search-empty { padding: 32px; text-align: center; color: var(--text-2); font-size: 0.9rem; }

/* ═════════════════════════════════════════════════════════════
   16) คลัง (LIBRARY) — แบบ ChatGPT: หัวเรื่อง + ค้นหา + แท็บ + มุมมอง
   ═════════════════════════════════════════════════════════════ */
.library-modal {
  width: min(1000px, calc(100vw - 40px));
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  padding: 0;
}
/* หัว: ลูกศรย้อนกลับ + ชื่อกึ่งกลาง แบบ ChatGPT (เดิมชื่อชิดซ้าย+มีปุ่ม X) —
   ช่องว่างล่องหนฝั่งขวาขนาดเท่าปุ่มย้อนกลับ ทำให้ชื่อกึ่งกลางจริงด้วย flex */
.library-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 26px 14px;
}
.library-title { flex: 1; text-align: center; font-size: 1.3rem; font-weight: 700; color: var(--text-1); letter-spacing: -0.02em; }
.library-back-btn {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.03); color: var(--text-1);
  border: 1px solid rgba(255,255,255,0.05); cursor: pointer;
  transition: background var(--t-fast, 0.2s);
}
.library-back-btn:hover { background: rgba(255,255,255,0.08); }
.library-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-hover);
  border-radius: 10px;
  padding: 8px 14px;
  width: 200px;
  flex-shrink: 0;
}
.library-search svg { color: var(--text-2); flex-shrink: 0; }
.library-search input {
  background: none; border: none; outline: none;
  color: var(--text-1); font-size: 0.86rem; width: 100%; font-family: inherit;
}
.library-search input::placeholder { color: var(--text-3); }
.library-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 26px 16px;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.library-tabs { display: flex; gap: 6px; }
.lib-tab {
  padding: 7px 16px;
  border-radius: 99px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-2);
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.lib-tab:hover { color: var(--text-1); background: var(--bg-hover); }
.lib-tab.active { color: var(--text-1); background: var(--bg-active); }
.library-view-toggle { display: flex; gap: 2px; background: var(--bg-surface); border-radius: 10px; padding: 3px; }
.lib-view-btn { padding: 6px 9px; border-radius: 8px; color: var(--text-2); background: none; border: none; cursor: pointer; }
.lib-view-btn.active { color: var(--text-1); background: var(--bg-elevated); }
.library-modal .gallery-grid { overflow-y: auto; padding: 20px 26px 26px; }

/* ดรอปดาวน์เรียงลำดับ ("ใหม่สุด") — ปุ่มสไตล์เดียวกับ library-search, ตัวเมนูใช้ .hi-dropdown/.hi-item ที่มีอยู่แล้ว */
.lib-sort-wrap { position: relative; flex-shrink: 0; }
.lib-sort-btn {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-surface); border: 1px solid var(--border-hover);
  border-radius: 10px; padding: 8px 12px; color: var(--text-1);
  font-size: 0.84rem; font-weight: 600; cursor: pointer;
}
.lib-sort-btn:hover { background: var(--bg-hover); }
.lib-sort-wrap .hi-dropdown { top: 42px; right: 0; }

/* header คอลัมน์ในมุมมองรายการ แบบ ChatGPT (ชื่อ/แก้ไข/ขนาด) */
.lib-list-header {
  display: flex; align-items: center; gap: 14px;
  padding: 0 26px 8px; margin-top: 14px;
  color: var(--text-2); font-size: 0.78rem; font-weight: 600;
}
.lib-list-header .lib-col-name { flex: 1; padding-left: 58px; }
.lib-list-header .lib-col-date { width: 90px; flex-shrink: 0; }
.lib-list-header .lib-col-size { width: 70px; flex-shrink: 0; text-align: right; }
.lib-list-date { width: 90px; flex-shrink: 0; color: var(--text-2); font-size: 0.82rem; }
.lib-list-size { width: 70px; flex-shrink: 0; text-align: right; color: var(--text-2); font-size: 0.82rem; }

/* caption ทับรูปตอน hover ในมุมมองตาราง (ชื่อ + ประเภท • ขนาด) แบบ ChatGPT */
.gallery-grid:not(.lib-list) .gallery-item { overflow: hidden; }
.gallery-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 10px 8px;
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
  opacity: 0; transition: opacity 0.15s ease; pointer-events: none;
}
.gallery-item:hover .gallery-caption { opacity: 1; }
.gallery-caption-name {
  color: #fff; font-size: 0.82rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gallery-caption-meta { color: rgba(255,255,255,0.75); font-size: 0.72rem; margin-top: 2px; }

/* list view */
.gallery-grid.lib-list { display: flex; flex-direction: column; gap: 2px; }
.gallery-grid.lib-list .gallery-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  aspect-ratio: auto;
  height: auto;
  cursor: pointer;
  transition: background 0.12s ease;
}
.gallery-grid.lib-list .gallery-item:hover { background: var(--bg-hover); }
.lib-list-thumb { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; flex-shrink: 0; position: relative; background: var(--bg-surface); }
.lib-list-thumb img, .lib-list-thumb video { width: 100%; height: 100%; object-fit: cover; }
.lib-list-thumb .play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.lib-list-thumb .play-overlay svg { width: 16px; height: 16px; }
.lib-list-info { flex: 1; min-width: 0; }
.lib-list-name { color: var(--text-1); font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-list-type { color: var(--text-2); font-size: 0.75rem; margin-top: 2px; }
.gallery-grid.lib-list .lib-dl { flex-shrink: 0; color: var(--text-2); }
.gallery-grid.lib-list .lib-dl:hover { color: var(--text-1); }
.lib-audio-thumb { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--accent, #63b3ed); background: linear-gradient(135deg, rgba(99,179,237,0.12), rgba(167,139,250,0.1)); }
.gallery-grid:not(.lib-list) .gallery-item { position: relative; }

/* checkbox วงกลมมัลติเซเล็กต์ — โผล่ตอน hover, ค้างแสดงถ้าเลือกอยู่ (แบบ ChatGPT) */
.gallery-check {
  position: absolute; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,0.45); border: 1.5px solid rgba(255,255,255,0.7);
  color: transparent; display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
  z-index: 2;
}
.gallery-grid:not(.lib-list) .gallery-check { top: 8px; right: 8px; }
.gallery-grid.lib-list .gallery-check { position: static; margin-right: 2px; flex-shrink: 0; }
.gallery-item:hover .gallery-check,
.gallery-check.checked { opacity: 1; }
.gallery-check.checked { background: #fff; border-color: #fff; color: #10121e; }
.gallery-item.selected { outline: 2px solid var(--text-1); outline-offset: -2px; }
.gallery-grid.lib-list .gallery-item.selected { background: var(--bg-hover); }

/* แถบเครื่องมือโหมดเลือกหลายรายการ แทนที่ tabs/search/view-toggle ชั่วคราว */
.library-select-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 4px 26px 16px;
  border-bottom: 1px solid var(--border);
}
.lib-select-cancel {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-surface); border: none; color: var(--text-1); cursor: pointer;
}
.lib-select-cancel:hover { background: var(--bg-hover); }
.lib-select-count { flex: 1; font-size: 0.86rem; font-weight: 600; color: var(--text-1); }
.lib-select-actions { display: flex; gap: 8px; }
.lib-select-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 10px; font-size: 0.84rem; font-weight: 600;
  background: var(--bg-surface); border: 1px solid var(--border-hover); color: var(--text-1); cursor: pointer;
}
.lib-select-btn:hover { background: var(--bg-hover); }
.lib-select-btn.danger { color: #f87171; border-color: rgba(248,113,113,0.3); }
.lib-select-btn.danger:hover { background: rgba(248,113,113,0.08); }

/* แท็บ "ไฟล์" — ปุ่มอัปโหลด + การ์ดไฟล์ทั่วไป (ไอคอนตามนามสกุล แทนรูปตัวอย่าง) */
.lib-upload-btn {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  background: var(--bg-surface); border: 1px solid var(--border-hover);
  border-radius: 10px; padding: 8px 14px; color: var(--text-1);
  font-size: 0.84rem; font-weight: 600; cursor: pointer;
}
.lib-upload-btn:hover { background: var(--bg-hover); }
.doc-tile { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--bg-surface); }
.doc-thumb { display: flex; align-items: center; justify-content: center; }
.doc-icon { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.doc-ext { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.02em; }

/* โฟลเดอร์ในแท็บไฟล์ + breadcrumb ตอนเข้าไปข้างใน */
.folder-tile { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--bg-surface); color: #fbbf24; }
.lib-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 26px 0; color: var(--text-2); font-size: 0.86rem;
}
.lib-breadcrumb-back {
  display: flex; align-items: center; gap: 4px;
  background: none; border: none; color: var(--text-2); cursor: pointer; font-size: 0.86rem;
}
.lib-breadcrumb-back:hover { color: var(--text-1); }
#libBreadcrumbName { color: var(--text-1); font-weight: 600; }
#libBreadcrumbName::before { content: "/"; margin-right: 8px; color: var(--text-3); }

/* โมดัลโน้ตอย่างง่าย */
.note-edit-modal { width: min(560px, calc(100vw - 40px)); }
.note-edit-body { padding: 0 26px 18px; display: flex; flex-direction: column; gap: 12px; }
.note-title-input { font-size: 1rem !important; font-weight: 600; }
.note-content-input { min-height: 260px; resize: vertical; }
.note-edit-actions { padding: 0 26px 22px; }
.note-edit-actions .btn-primary { width: 100%; }

/* ═════════════════════════════════════════════════════════════
   17) SIDEBAR RAIL BUGFIX — เมนูผู้ใช้ตอนยุบต้องเด้งออกข้าง ไม่ถูกบีบใน 62px
   ═════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  .sidebar.collapsed .user-dropdown {
    left: 10px !important;
    right: auto !important;
    width: 230px !important;
    bottom: calc(100% + 8px) !important;
  }
  .sidebar.collapsed .user-dropdown .ud-item { white-space: nowrap; }
}

/* ═════════════════════════════════════════════════════════════
   18) SPLASH / LOADING — ตามธีม + สีกลางแบบ ChatGPT (เดิม #060711 ฟ้าดำค้าง)
   ═════════════════════════════════════════════════════════════ */
.splash-screen {
  background: #000000 !important;
  background-image: none !important;
}
.splash-logo img { filter: drop-shadow(0 0 22px rgba(255,255,255,0.12)) !important; }
.splash-logo::after { background: rgba(255,255,255,0.06) !important; }
.splash-title { color: #ffffff !important; text-shadow: none !important; }
.splash-loader-bar { background: rgba(255,255,255,0.08) !important; }
.splash-progress { background: linear-gradient(90deg, transparent, #8e8ea0, #ffffff, transparent) !important; }
[data-theme="light"] .splash-screen { background: #f7f8fc !important; }
[data-theme="light"] .splash-title { color: #1a2233 !important; }
[data-theme="light"] .splash-logo::after { background: rgba(99,179,237,0.1) !important; }
[data-theme="light"] .splash-loader-bar { background: rgba(15,23,42,0.08) !important; }
[data-theme="light"] .splash-progress { background: linear-gradient(90deg, transparent, #63b3ed, #818cf8, transparent) !important; }

/* ═════════════════════════════════════════════════════════════
   19) COLOR EXACT — ปรับจุดที่ยังหลุดโทน ChatGPT (โมดัล/settings/lightbox)
   ═════════════════════════════════════════════════════════════ */
html:not([data-theme="light"]) .modal-overlay { background: rgba(0,0,0,0.6) !important; }
html:not([data-theme="light"]) .settings-modal,
html:not([data-theme="light"]) .library-modal,
html:not([data-theme="light"]) .search-panel {
  background: #1b1b1b !important;
  border-color: rgba(255,255,255,0.08) !important;
}
html:not([data-theme="light"]) .settings-sidebar { background: #141414 !important; }
html:not([data-theme="light"]) .settings-nav-item.active { background: #242424 !important; color: #fff !important; }
html:not([data-theme="light"]) .settings-select,
html:not([data-theme="light"]) .setting-control,
html:not([data-theme="light"]) .library-search,
html:not([data-theme="light"]) .search-panel-head { background: #000000 !important; }
html:not([data-theme="light"]) .settings-group-card { background: rgba(255,255,255,0.03) !important; border-color: rgba(255,255,255,0.07) !important; }
html:not([data-theme="light"]) .lib-tab.active { background: #1b1b1b !important; }
html:not([data-theme="light"]) .lib-view-btn.active { background: #1b1b1b !important; }

/* ═════════════════════════════════════════════════════════════
   20) SIDEBAR — avatar ล่างสุดในราง + อนิเมชั่นเปิด/ปิดคลีนหรู
   ═════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  /* ตอนยุบ history ถูกซ่อน → ดัน footer ลงล่างสุดด้วย margin-top auto */
  .sidebar.collapsed .sidebar-footer { margin-top: auto !important; }

  /* transition นุ่มขึ้น: width โค้ง ease-out-expo, ไม่มี opacity/transform สะดุด */
  .sidebar {
    transition: width 0.42s cubic-bezier(0.22, 1, 0.36, 1),
                min-width 0.42s cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: width;
  }
  /* main content เลื่อนตามลื่นๆ (โครง flex ปรับ width ให้ smooth) */
  .main { transition: none; }

  /* ข้อความ/รายการ fade ตอนพับ-กาง (เร็วกว่า width นิดให้ดูตั้งใจ) */
  .sidebar .nav-item > span:not(.shortcut-hint),
  .sidebar .shortcut-hint,
  .sidebar .logo-simple span,
  .sidebar .chat-history-container,
  .sidebar .user-info {
    transition: opacity 0.22s ease;
  }
  .sidebar.collapsed .nav-item > span:not(.shortcut-hint),
  .sidebar.collapsed .shortcut-hint,
  .sidebar.collapsed .logo-simple span,
  .sidebar.collapsed .chat-history-container,
  .sidebar.collapsed .user-info {
    opacity: 0 !important;
  }
  /* ปุ่ม toggle หมุนนิดตอนสลับสถานะ ให้รู้สึก interactive */
  #collapseSidebarBtn svg { transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1); }
  .sidebar.collapsed #collapseSidebarBtn svg { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none !important; }
}

/* ═════════════════════════════════════════════════════════════
   21) SIDEBAR NAV — ข้อความห้ามขึ้นบรรทัดใหม่ (ตัด … แทน) ให้ดูพรีเมียม
   ═════════════════════════════════════════════════════════════ */
.sidebar .nav-item { min-width: 0; flex-wrap: nowrap; }
/* ชื่อเมนู = สำคัญกว่า ต้องโชว์เต็มเสมอ (ไม่หด) */
.sidebar .nav-item > span:not(.shortcut-hint) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 0 auto;
}
/* คีย์ลัด = สำคัญน้อยสุด ต้องหด/หายก่อนชื่อเมนู (เดิมตั้ง flex-shrink:0 เลยคาไว้จนชื่อหาย) */
.sidebar .shortcut-hint {
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  margin-left: auto;
}
/* ไซด์บาร์แคบ: ซ่อนคีย์ลัดไปเลย เหลือแค่ชื่อเมนู */
@media (max-width: 1100px) {
  .sidebar .shortcut-hint { display: none; }
}
.sidebar .user-name,
.sidebar .user-plan,
.sidebar .ud-name,
.sidebar .ud-email { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .user-info { min-width: 0; }

/* ═════════════════════════════════════════════════════════════
   22) TOPBAR — ชื่อบทสนทนา + ปุ่มแบ่งปัน (แบบ ChatGPT)
   ═════════════════════════════════════════════════════════════ */
.topbar-left { min-width: 0; flex: 1; }
#topbarTitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.topbar-right { gap: 10px !important; }
.topbar-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 99px;
  border: 1px solid var(--border-hover);
  background: transparent;
  color: var(--text-1);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.topbar-share-btn:hover { background: var(--bg-hover); border-color: var(--border-focus); }
.topbar-share-btn svg { flex-shrink: 0; }
@media (max-width: 600px) {
  .topbar-share-btn span { display: none; }
  .topbar-share-btn { padding: 8px; border-radius: 50%; }
}

/* ═════════════════════════════════════════════════════════════
   23) CHAT TEXT — ขนาดใหญ่ขึ้น + ลำดับชั้นชัด อ่านสบายแบบ ChatGPT
   ═════════════════════════════════════════════════════════════ */
.ai-message .msg-body {
  font-size: 1.1rem !important;
  line-height: 1.8 !important;
}
.user-message .msg-body {
  font-size: 1.08rem !important;
  line-height: 1.7 !important;
}
.ai-message .msg-body code,
.user-message .msg-body code { font-size: 0.9em !important; }
@media (max-width: 768px) {
  .ai-message .msg-body { font-size: 1.05rem !important; }
  .user-message .msg-body { font-size: 1.03rem !important; }
}

/* ── ลำดับชั้น typography (หัวข้อเด่น / ย่อหน้าหายใจได้ / ตัวหนาชัด) ── */
.ai-message .msg-body > :first-child { margin-top: 0 !important; }
.ai-message .msg-body p { margin: 0.7em 0 !important; }

/* หัวข้อ: เว้นบน-ล่างชัด + มีน้ำหนัก + ขนาดไล่ระดับ */
.ai-message .msg-body h1,
.ai-message .msg-body h2,
.ai-message .msg-body h3,
.ai-message .msg-body h4 {
  margin: 1.5em 0 0.6em !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
}
.ai-message .msg-body h1 { font-size: 1.5rem !important; }
.ai-message .msg-body h2 { font-size: 1.3rem !important; padding-bottom: 0.3em; border-bottom: 1px solid var(--border); }
.ai-message .msg-body h3 { font-size: 1.15rem !important; }
.ai-message .msg-body h4 { font-size: 1.04rem !important; color: var(--text-1) !important; }

/* ตัวหนา: เด่นขึ้นด้วยสีขาวเต็ม (เดิมกลืนกับเนื้อความ) */
html:not([data-theme="light"]) .ai-message .msg-body strong { color: #fff !important; font-weight: 700 !important; }
[data-theme="light"] .ai-message .msg-body strong { color: #0b1220 !important; font-weight: 700 !important; }

/* ลิสต์: ระยะหายใจ + จุด/เลขสีจาง ให้เนื้อหาเด่นกว่า marker */
.ai-message .msg-body ul,
.ai-message .msg-body ol { margin: 0.7em 0 1em !important; padding-left: 1.5em !important; }
.ai-message .msg-body li { margin: 0.45em 0 !important; padding-left: 0.2em; line-height: 1.75 !important; }
.ai-message .msg-body li::marker { color: var(--accent, #63b3ed); font-weight: 600; }
.ai-message .msg-body li > ul,
.ai-message .msg-body li > ol { margin: 0.35em 0 0.35em !important; }
/* บรรทัดนำแบบ "**หัวข้อ:** เนื้อหา" — หัวข้อเด่น เนื้อหาตามหลังในย่อหน้าเดียว */
.ai-message .msg-body li > strong:first-child { color: var(--text-1) !important; }

/* เส้นคั่นบท / อ้างอิง ให้ดูตั้งใจ */
.ai-message .msg-body hr { margin: 1.8em 0 !important; }
.ai-message .msg-body blockquote { margin: 1em 0 !important; padding: 8px 16px !important; }

/* ═════════════════════════════════════════════════════════════
   23b) RESPONSE PROSE — จังหวะย่อหน้าและโครงสร้างคำตอบภาษาไทย
   บล็อกท้ายชนะ typography รุ่นก่อนหน้าโดยไม่แตะ user bubble
   ═════════════════════════════════════════════════════════════ */
.ai-message .msg-content-wrapper {
  min-width: 0;
}

.ai-message .msg-body {
  font-size: clamp(1rem, 0.96rem + 0.12vw, 1.075rem) !important;
  line-height: 1.82 !important;
  letter-spacing: -0.008em !important;
  overflow-wrap: anywhere;
  text-wrap: pretty;
  font-kerning: normal;
}

.ai-message .msg-body > p {
  margin: 0 0 0.95em !important;
}

.ai-message .msg-body > p:last-child,
.ai-message .msg-body > ul:last-child,
.ai-message .msg-body > ol:last-child,
.ai-message .msg-body > blockquote:last-child {
  margin-bottom: 0 !important;
}

.ai-message .msg-body h1,
.ai-message .msg-body h2,
.ai-message .msg-body h3,
.ai-message .msg-body h4 {
  text-wrap: balance;
}

.ai-message .msg-body h1 {
  margin: 1.65em 0 0.68em !important;
  font-size: 1.42rem !important;
}

.ai-message .msg-body h2 {
  margin: 1.65em 0 0.72em !important;
  padding-bottom: 0.4em !important;
  border-bottom-color: color-mix(in srgb, var(--text-1) 11%, transparent) !important;
  font-size: 1.24rem !important;
}

.ai-message .msg-body h3 {
  position: relative;
  margin: 1.45em 0 0.58em !important;
  padding-left: 0.72em;
  font-size: 1.105rem !important;
}

.ai-message .msg-body h3::before {
  content: "";
  position: absolute;
  top: 0.22em;
  bottom: 0.2em;
  left: 0;
  width: 3px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--accent, #63b3ed) 76%, var(--text-1));
  opacity: 0.8;
}

.ai-message .msg-body h4 {
  margin: 1.3em 0 0.5em !important;
  font-size: 1rem !important;
}

.ai-message .msg-body > :first-child {
  margin-top: 0 !important;
}

.ai-message .msg-body > h2:first-child,
.ai-message .msg-body > h3:first-child {
  padding-top: 0;
}

.ai-message .msg-body ul,
.ai-message .msg-body ol {
  margin: 0.4em 0 1.05em !important;
  padding-left: 1.55em !important;
}

.ai-message .msg-body li {
  margin: 0.38em 0 !important;
  padding-left: 0.28em;
  line-height: 1.72 !important;
}

.ai-message .msg-body li + li {
  margin-top: 0.48em !important;
}

.ai-message .msg-body li > p {
  margin: 0.28em 0 !important;
}

.ai-message .msg-body blockquote {
  margin: 1.05em 0 !important;
  padding: 0.68em 1em !important;
  border-left-width: 3px !important;
  border-radius: 0 10px 10px 0 !important;
  line-height: 1.72;
}

.ai-message .msg-body blockquote > :first-child { margin-top: 0 !important; }
.ai-message .msg-body blockquote > :last-child { margin-bottom: 0 !important; }

.ai-message .msg-body table {
  margin: 1.1em 0 1.3em !important;
  line-height: 1.55;
}

.ai-message .msg-body pre {
  margin: 1.05em 0 1.25em !important;
}

.ai-message .msg-body hr {
  margin: 1.6em 0 !important;
  opacity: 0.7;
}

@media (max-width: 768px) {
  .ai-message .msg-body {
    font-size: 1rem !important;
    line-height: 1.78 !important;
    letter-spacing: -0.006em !important;
  }

  .ai-message .msg-body h1 { font-size: 1.28rem !important; }
  .ai-message .msg-body h2 { font-size: 1.17rem !important; }
  .ai-message .msg-body h3 { font-size: 1.06rem !important; }
  .ai-message .msg-body > p { margin-bottom: 0.88em !important; }
}

/* ═════════════════════════════════════════════════════════════
   24) STREAMING THINKING = บรรทัดหัวข้อเดียว (แบบ Gemini "•• Heading")
   เอากล่องคิดออกระหว่างสตรีม เหลือแค่จุดวิ่ง + หัวข้อที่กำลังคิด
   ═════════════════════════════════════════════════════════════ */
.thinking-live:not(.search-live) {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 2px 0 12px !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  gap: 9px;
  overflow: visible !important;
}
.thinking-live .tl-dots { display: inline-flex; gap: 3px; flex-shrink: 0; }
.thinking-live .tl-dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--text-2);
  display: inline-block;
}
@media (prefers-reduced-motion: no-preference) {
  .thinking-live .tl-dots i { animation: tlBounce 1.2s infinite ease-in-out; }
  .thinking-live .tl-dots i:nth-child(2) { animation-delay: 0.16s; }
  .thinking-live .tl-dots i:nth-child(3) { animation-delay: 0.32s; }
  @keyframes tlBounce { 0%,80%,100% { opacity:0.25; transform:translateY(0);} 40% { opacity:1; transform:translateY(-3px);} }
}
.thinking-live .tl-heading {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ═════════════════════════════════════════════════════════════
   25) INLINE CITATIONS — ชิปอ้างอิงในเนื้อความ + popover + พาเนลขวา (แบบ ChatGPT)
   ═════════════════════════════════════════════════════════════ */
/* ชิปอ้างอิง (favicon + ชื่อเว็บ + จำนวน) แทรกท้ายประโยค */
.cite-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: baseline;
  margin: 0 1px 0 3px;
  padding: 1px 8px 1px 5px;
  height: 22px;
  border-radius: 99px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-hover);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  line-height: 1;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  translate: 0 1px;
}
.cite-chip:hover { background: var(--bg-hover); border-color: var(--border-focus); color: var(--text-1); }
.cite-chip .cite-fav { width: 14px; height: 14px; border-radius: 50%; background: #fff; flex-shrink: 0; }
.cite-chip .cite-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cite-chip .cite-plus { color: var(--text-3); font-weight: 700; }

/* popover การ์ดแหล่ง (prev/next) */
.cite-popover {
  position: fixed;
  z-index: 4000;
  width: min(320px, calc(100vw - 16px));
  background: var(--bg-elevated);
  border: 1px solid var(--border-hover);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.5);
  padding: 10px 12px 12px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.cite-popover.open { opacity: 1; transform: none; }
.cite-popover .cp-head { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.cite-popover .cp-head button {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px; color: var(--text-2); background: none; border: none; cursor: pointer;
}
.cite-popover .cp-head button:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-1); }
.cite-popover .cp-head button:disabled { opacity: 0.3; cursor: default; }
.cite-popover .cp-count { margin-left: auto; font-size: 0.74rem; color: var(--text-2); font-family: var(--mono, monospace); }
.cite-popover .cp-card { display: block; text-decoration: none; border-radius: 10px; padding: 8px; transition: background 0.12s ease; }
.cite-popover .cp-card:hover { background: var(--bg-hover); }
.cite-popover .cp-src { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; color: var(--text-2); font-weight: 600; margin-bottom: 5px; }
.cite-popover .cp-src img { width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.cite-popover .cp-title { font-size: 0.86rem; color: var(--text-1); line-height: 1.45; word-break: break-word; }

/* พาเนลแหล่งที่มาด้านขวา */
.sources-side-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(400px, 100vw);
  background: var(--bg-surface, #000000);
  border-left: 1px solid var(--border-hover);
  box-shadow: -18px 0 50px rgba(0,0,0,0.45);
  z-index: 3000;
  display: flex; flex-direction: column;
  transform: translateX(102%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.sources-side-panel.open { transform: translateX(0); }
.sources-side-panel .ssp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
  font-size: 1.05rem; font-weight: 700; color: var(--text-1); flex-shrink: 0;
}
.sources-side-panel .ssp-close { color: var(--text-2); padding: 5px; border-radius: 8px; background: none; border: none; cursor: pointer; }
.sources-side-panel .ssp-close:hover { color: var(--text-1); background: var(--bg-hover); }
.sources-side-panel .ssp-body { flex: 1; overflow-y: auto; padding: 12px 14px 24px; }
.ssp-card {
  display: block; text-decoration: none;
  padding: 12px 14px; margin-bottom: 8px;
  border-radius: 12px; border: 1px solid var(--border); background: var(--bg-elevated);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.ssp-card:hover { border-color: var(--border-focus); transform: translateY(-1px); }
.ssp-card .ssp-src { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--text-2); font-weight: 600; margin-bottom: 5px; }
.ssp-card .ssp-src img { width: 18px; height: 18px; border-radius: 50%; background: #fff; flex-shrink: 0; }
.ssp-card .ssp-title { font-size: 0.9rem; color: var(--text-1); line-height: 1.5; word-break: break-word; }
.ssp-widget-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); margin: 16px 4px 8px; }
.search-entry-point-wrap { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.search-entry-point-frame { width: 100%; height: 90px; border: 0; background: #fff; }
@media (max-width: 600px) { .sources-side-panel { width: 100vw; } }
@media (prefers-reduced-motion: reduce) { .sources-side-panel { transition: none; } }

/* thinking-details ที่ finalize แล้ว: ซ่อน inline โชว์เฉพาะตอนกดปุ่ม "การคิด" (แบบ ChatGPT) */
.ai-message .thinking-details:not([open]) { display: none; }
.ai-message .thinking-details > summary { display: none; }
.ai-message .thinking-details[open] {
  margin: 4px 0 14px !important;
  border: 1px solid var(--border-hover) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.02) !important;
}

/* ═════════════════════════════════════════════════════════════
   26) เอาโลโก้ AI ออก (ทั้งตอนแชทและสตรีม) + อนิเมชั่นสตรีมสมูทหรูขึ้น
   ═════════════════════════════════════════════════════════════ */
/* ซ่อนโลโก้/อวตาร AI ทุกที่ — เนื้อหากินเต็มความกว้าง */
.ai-message .msg-avatar.ai-avatar,
.thinking-message .msg-avatar.ai-avatar { display: none !important; }
.ai-message { gap: 0 !important; }

/* บรรทัดหัวข้อการคิด: fade-in นุ่ม + เปลี่ยนหัวข้อแบบ crossfade */
@media (prefers-reduced-motion: no-preference) {
  .thinking-live:not(.search-live) { animation: tlFadeIn 0.35s cubic-bezier(0.22,1,0.36,1) both; }
  @keyframes tlFadeIn { from { opacity:0; transform: translateY(4px);} to { opacity:1; transform:none;} }
  .thinking-live .tl-heading { transition: color 0.3s ease; }
}

/* เคอร์เซอร์สตรีม: แท่งไล่จางแบบ ChatGPT (นุ่มกว่าจุดกลม pulse เดิม) */
.streaming-cursor::after {
  width: 3px !important;
  height: 1.05em !important;
  border-radius: 2px !important;
  margin-left: 2px !important;
  vertical-align: text-bottom !important;
  background: var(--text-2) !important;
  opacity: 0.85 !important;
}
@media (prefers-reduced-motion: no-preference) {
  .streaming-cursor::after { animation: caretBlink 1.1s steps(1) infinite !important; }
  @keyframes caretBlink { 0%,55% { opacity: 0.85; } 56%,100% { opacity: 0; } }
}

/* หมายเหตุ: ไม่ใส่ animation รายบล็อกระหว่างสตรีม — โค้ด re-render innerHTML ทั้งก้อน
   ทุก ~3 เฟรม ถ้า animate ลูกทุกตัวจะเริ่ม opacity:0 ใหม่ซ้ำ = ข้อความกระพริบทั้งอัน
   ความลื่นมาจาก typing loop (พิมพ์ทีละตัว) + caret เท่านั้น */
/* ชิปอ้างอิงโผล่ตอนจบเท่านั้น (ไม่ได้ re-render ซ้ำ) → pop เบา ๆ ได้ */
@media (prefers-reduced-motion: no-preference) {
  .ai-message:not(:last-child) .cite-chip,
  .messages-container:not(.is-streaming) .cite-chip {
    animation: chipPop 0.24s cubic-bezier(0.22,1,0.36,1) both;
  }
  @keyframes chipPop { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }
}

/* ═════════════════════════════════════════════════════════════
   27) SIDE PANEL — backdrop คลิกปิด + UI/อนิเมชั่นสวยขึ้น + drag handle
   ═════════════════════════════════════════════════════════════ */
.side-panel-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(2px);
  z-index: 2999;
  opacity: 0;
  transition: opacity 0.34s cubic-bezier(0.22,1,0.36,1);
}
.side-panel-backdrop.open { opacity: 1; }

/* หัวจับลาก (โชว์เฉพาะมือถือ) */
.ssp-grabber { display: none; }

/* เข้านุ่มขึ้น + เงาลึก */
.sources-side-panel {
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1) !important;
  box-shadow: -24px 0 70px rgba(0,0,0,0.5) !important;
}
.sources-side-panel .ssp-head { font-size: 1.12rem !important; letter-spacing: -0.01em; }

/* การ์ดแหล่ง: ดีไซน์แน่นขึ้น + hover ยกเด่น + favicon กรอบนุ่ม */
.ssp-card {
  padding: 13px 15px !important;
  border-radius: 14px !important;
  transition: border-color 0.16s ease, transform 0.16s ease, background 0.16s ease !important;
}
.ssp-card:hover { transform: translateY(-2px) !important; background: var(--bg-hover) !important; }
.ssp-card .ssp-src img { box-shadow: 0 1px 4px rgba(0,0,0,0.25); }
.ssp-card .ssp-title { color: var(--text-2) !important; font-size: 0.84rem !important; }
/* การ์ดโผล่ทีละใบ (stagger) */
@media (prefers-reduced-motion: no-preference) {
  .sources-side-panel.open .ssp-card {
    animation: sspCardIn 0.4s cubic-bezier(0.22,1,0.36,1) both;
  }
  .sources-side-panel.open .ssp-card:nth-child(1){animation-delay:.04s}
  .sources-side-panel.open .ssp-card:nth-child(2){animation-delay:.09s}
  .sources-side-panel.open .ssp-card:nth-child(3){animation-delay:.14s}
  .sources-side-panel.open .ssp-card:nth-child(4){animation-delay:.19s}
  .sources-side-panel.open .ssp-card:nth-child(5){animation-delay:.24s}
  .sources-side-panel.open .ssp-card:nth-child(6){animation-delay:.29s}
  .sources-side-panel.open .ssp-card:nth-child(n+7){animation-delay:.32s}
  @keyframes sspCardIn { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } }
}
/* กระบวนการคิดในพาเนล: หัวข้อตัวหนาเป็นสีฟ้าเด่น */
.sources-side-panel .ip-thought { font-size: 0.92rem; line-height: 1.8; color: var(--text-2); }
.sources-side-panel .ip-thought strong { display: block; margin: 14px 0 3px; color: var(--accent, #63b3ed); font-weight: 700; }
.sources-side-panel .ip-thought strong:first-child { margin-top: 0; }

/* ═════════════════════════════════════════════════════════════
   28) SOURCE CARD — SEO title + description + widget "ค้นหาที่เกี่ยวข้อง" สวยขึ้น
   ═════════════════════════════════════════════════════════════ */
.ssp-card .ssp-title {
  color: var(--text-1) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;      /* จำกัดหัวข้อ 2 บรรทัด */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ssp-card .ssp-desc {
  color: var(--text-2);
  font-size: 0.8rem;
  line-height: 1.5;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;      /* จำกัดคำโปรย 2 บรรทัด */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ssp-card .ssp-desc:empty { display: none; }
/* shimmer ระหว่างโหลด meta */
.ssp-title.ssp-loading {
  color: transparent !important;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.13) 37%, rgba(255,255,255,0.06) 63%);
  background-size: 400% 100%;
  animation: sspShimmer 1.3s ease-in-out infinite;
  min-height: 1.2em;
}
@keyframes sspShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* widget "ค้นหาที่เกี่ยวข้อง" */
.ssp-widget-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-2); margin: 20px 4px 10px;
}
.ssp-widget-title svg { color: var(--accent, #63b3ed); }
.search-entry-point-wrap {
  border-radius: 14px !important;
  overflow: hidden;
  border: 1px solid var(--border) !important;
  background: var(--bg-elevated);
  padding: 4px;
}
.search-entry-point-frame { height: 76px !important; background: transparent !important; }

/* ── popover ชิปอ้างอิง: SEO title + description (จำกัดบรรทัด) ── */
.cite-popover .cp-title {
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cite-popover .cp-desc {
  color: var(--text-2);
  font-size: 0.8rem;
  line-height: 1.5;
  margin-top: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cite-popover .cp-desc:empty { display: none; }
.cite-popover .cp-title.ssp-loading {
  color: transparent;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.13) 37%, rgba(255,255,255,0.06) 63%);
  background-size: 400% 100%;
  animation: sspShimmer 1.3s ease-in-out infinite;
  min-height: 1.2em;
}

/* ── ATG Live: ตัวเลือกแชร์จอ (ความละเอียด/FPS/เลือกจอ) ── */
.live-share-picker {
  position: fixed; inset: 0; z-index: 10001;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,0.55);
}
.live-share-picker .lsp-card {
  width: min(560px, 100%);
  background: #16181d;
  border-radius: 22px 22px 0 0;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  border: 1px solid rgba(255,255,255,0.08);
  border-bottom: none;
  max-height: 80vh; overflow-y: auto;
}
@media (min-width: 769px) {
  .live-share-picker { align-items: center; }
  .live-share-picker .lsp-card { border-radius: 22px; border-bottom: 1px solid rgba(255,255,255,0.08); }
}
.lsp-title { font-size: 1.1rem; font-weight: 700; color: #fff; margin-bottom: 14px; }
.lsp-label { font-size: 0.82rem; color: rgba(255,255,255,0.55); margin: 12px 0 7px; font-weight: 600; }
.lsp-opts { display: flex; gap: 8px; }
.lsp-opts button {
  flex: 1; min-height: 42px; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,0.05); color: #ddd;
  border: 1px solid rgba(255,255,255,0.1); font-family: inherit; font-size: 0.92rem;
}
.lsp-opts button.sel { background: rgba(99,179,237,0.18); border-color: #63b3ed; color: #fff; }
.lsp-sources { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.lsp-src {
  border-radius: 12px; padding: 8px; cursor: pointer; text-align: left;
  background: rgba(255,255,255,0.05); color: #ddd;
  border: 1px solid rgba(255,255,255,0.1); font-family: inherit; font-size: 0.8rem;
}
.lsp-src.sel { border-color: #63b3ed; background: rgba(99,179,237,0.14); color: #fff; }
.lsp-src img { width: 100%; border-radius: 8px; margin-bottom: 6px; display: block; }
.lsp-src span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lsp-note { font-size: 0.8rem; color: rgba(255,255,255,0.45); margin-top: 12px; }
.lsp-actions { display: flex; gap: 10px; margin-top: 18px; }
.lsp-actions button {
  flex: 1; min-height: 46px; border-radius: 99px; cursor: pointer;
  font-family: inherit; font-size: 0.95rem; font-weight: 600;
}
.lsp-cancel { background: transparent; color: #ccc; border: 1px solid rgba(255,255,255,0.18); }
.lsp-start { background: #63b3ed; color: #08131f; border: none; }

/* ── ATG Live โหมดลอยทับแอปอื่น (?live=overlay จาก Quick Settings tile) ──
   activity ฝั่งแอปโปร่งใส — ทำให้ทุกอย่างโปร่งตาม เห็นแอปข้างหลังจางๆ แบบ ChatGPT */
html.live-transparent, html.live-transparent body { background: transparent !important; }
html.live-transparent body > *:not(#liveOverlay):not(#reactLiveMount) { visibility: hidden !important; }
html.live-transparent #reactLiveMount,
html.live-transparent #liveOverlay { visibility: visible !important; }
html.live-transparent .live-overlay {
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(6px);
}

/* ── โหมดลอย (live-transparent) จูนตาม ChatGPT: โปร่งมาก ไร้ตัวหนังสือ ออร์บใหญ่ค่อนล่าง
   ปุ่มคุมซ่อนไว้ แตะจอเพื่อโชว์/ซ่อน ── */
html.live-transparent .live-overlay {
  background: rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: none !important;
}
html.live-transparent .live-top,
html.live-transparent .live-caption { display: none !important; }
html.live-transparent .live-stage {
  justify-content: flex-end !important;
  padding-bottom: 21vh !important;
}
html.live-transparent .live-orb {
  width: 215px !important;
  height: 215px !important;
}
html.live-transparent .live-controls {
  position: fixed !important;
  left: 0; right: 0;
  bottom: calc(34px + env(safe-area-inset-bottom)) !important;
  justify-content: center !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
html.live-transparent.show-ctls .live-controls {
  opacity: 1;
  pointer-events: auto;
}
/* วิดีโอพรีวิว (กล้อง) ยังโชว์ได้ตามปกติ แต่เล็กลงมุมบน */
html.live-transparent .live-video { width: 30vw !important; }

/* โหมดลอย: ไม่ต้องมี splash (จอดำบัง) — พื้นหลังจริงคือแอปข้างหลังผ่าน blur ของ Android
   และลดดิมลงอีกเพราะ native blur (FLAG_BLUR_BEHIND) รับหน้าที่แทน */
html.live-transparent #splashScreen { display: none !important; }
html.live-transparent .live-overlay { background: rgba(0, 0, 0, 0.13) !important; }

/* ── React / Next.js Settings modal ─────────────────────────────────────── */
body.react-settings-open {
  overflow: hidden !important;
}
body.react-library-open { overflow: hidden !important; }
.react-library-overlay { position: fixed; z-index: 22100; inset: 0; display: flex; align-items: center; justify-content: center; padding: 22px; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.react-library-overlay.open { opacity: 1; pointer-events: auto; }
.react-library-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.68); backdrop-filter: blur(10px); }
.react-library-frame-wrap { position: relative; z-index: 1; width: min(1320px, calc(100vw - 44px)); height: min(880px, calc(100dvh - 44px)); overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 23px; background: #0b0b0d; box-shadow: 0 34px 90px rgba(0,0,0,.5); }
.react-library-frame { display: block; width: 100%; height: 100%; border: 0; }
@media (prefers-reduced-motion: no-preference) { .react-library-overlay.open .react-library-frame-wrap { animation: react-settings-modal-in .28s cubic-bezier(.22,1,.36,1) both; } }
@media (max-width: 768px) { .react-library-overlay { padding: 0; } .react-library-frame-wrap { width: 100%; height: 100dvh; border: 0; border-radius: 0; } }
.react-settings-overlay {
  position: fixed;
  z-index: 22000;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.react-settings-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.react-settings-overlay[data-closing="true"] {
  pointer-events: none;
}
.react-settings-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(12px);
}
.react-settings-frame-wrap {
  position: relative;
  z-index: 1;
  width: min(1200px, calc(100vw - 48px));
  height: min(820px, calc(100dvh - 48px));
  min-height: min(620px, calc(100dvh - 48px));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 25px;
  background: #151518;
  box-shadow: 0 36px 100px rgba(0, 0, 0, 0.55);
  transition: box-shadow 0.2s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .react-settings-overlay.open .react-settings-frame-wrap {
    animation: react-settings-modal-in 0.28s cubic-bezier(.22, 1, .36, 1) both;
  }
  .react-settings-overlay[data-closing="true"] .react-settings-frame-wrap {
    animation: react-settings-modal-out 0.22s cubic-bezier(.4, 0, 1, 1) both;
  }
}
@keyframes react-settings-modal-in {
  from { opacity: 0; transform: translateY(14px) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes react-settings-modal-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(10px) scale(.985); }
}
.react-settings-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}
@media (max-width: 768px) {
  .react-settings-overlay {
    align-items: stretch;
    padding: 0;
  }
  .react-settings-backdrop {
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: none;
  }
  .react-settings-frame-wrap {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    .react-settings-overlay.open .react-settings-frame-wrap {
      animation-name: react-settings-sheet-in;
    }
    .react-settings-overlay[data-closing="true"] .react-settings-frame-wrap {
      animation-name: react-settings-sheet-out;
    }
  }
}
@keyframes react-settings-sheet-in {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes react-settings-sheet-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(24px); }
}