/* HighSearch AI เว็บ: สีสว่างอย่างเดียว โทนเรียบแบบ ChatGPT (ขาว/เทา/ดำ) */
:root {
  color-scheme: light;
  --bg: #ffffff; --side: #f9f9f9; --text: #0d0d0d; --muted: #6b6b6b; --line: #e5e5e5;
  --hover: #ececec; --card: #ffffff; --composer: #ffffff; --bubble: #f4f4f4; --menu: #ffffff;
  --accent: #0d0d0d; --accent-text: #ffffff; --link: #0b62d6; --danger: #d93025; --rec: #e5484d;
  --code-bg: #f9f9f9; --code-text: #1f2328; --code-head: #f2f2f2;
  --shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 4px 16px rgba(0, 0, 0, .08);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text); overflow: hidden;
  font: 16px/1.65 "Inter", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
svg { flex: none; }

.app { display: flex; height: 100dvh; overflow: hidden; }

/* ---------- เมนูด้านข้าง ---------- */
.side {
  width: 288px; flex: none; background: var(--side); display: flex; flex-direction: column;
  padding: 10px 10px 12px; transition: margin-left .25s ease, transform .25s ease;
}
.app.collapsed .side { margin-left: -288px; }
.side-top { display: flex; align-items: center; gap: 4px; padding: 2px 0 10px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 1.12rem; padding-left: 4px; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.new-chat {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: 0;
  border-radius: 10px; background: none; font-weight: 500; font-size: .94rem;
}
.new-chat:hover { background: var(--hover); }
.search-box { position: relative; margin: 10px 0 4px; }
.search-box svg { position: absolute; left: 12px; top: 50%; translate: 0 -50%; color: var(--muted); }
.search {
  width: 100%; padding: 8px 12px 8px 38px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg); outline: none; font-size: .92rem;
}
.search:focus { border-color: var(--accent); }
.chats { flex: 1; overflow-y: auto; margin: 4px -6px 0; padding: 0 6px; scrollbar-width: thin; }
.group { font-size: .78rem; font-weight: 600; color: var(--muted); padding: 14px 12px 4px; }
.chat-item { display: flex; align-items: center; border-radius: 10px; padding-left: 12px; }
.chat-item:hover, .chat-item.active { background: var(--hover); }
.chat-item.active .open { font-weight: 500; }
.chat-item .open {
  flex: 1; min-width: 0; text-align: left; border: 0; background: none; padding: 7px 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .92rem;
}
.chat-item .act {
  border: 0; background: none; color: var(--muted); width: 30px; height: 30px; border-radius: 50%;
  display: none; place-items: center;
}
.chat-item:hover .act, .chat-item.active .act { display: grid; }
.chat-item .act:hover { color: var(--text); background: var(--bg); }
.chat-item .act.del:hover { color: var(--danger); }
.empty-list { color: var(--muted); font-size: .9rem; padding: 12px; }
.side-foot { padding-top: 10px; display: grid; gap: 8px; font-size: .84rem; }
.side-foot .row { display: flex; gap: 8px; }
.side-foot select {
  flex: 1; min-width: 0; padding: 7px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg);
}
.side-foot .who { color: var(--muted); line-height: 1.45; padding: 0 4px; }

/* ---------- ส่วนแชท ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.top { display: flex; align-items: center; gap: 6px; padding: 8px 14px; min-height: 58px; }
.icon-btn {
  width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: inherit;
  display: inline-grid; place-items: center; flex: none; transition: background .15s;
}
.icon-btn:hover { background: var(--hover); }
.icon-btn svg { width: 22px; height: 22px; }
.top .menu-btn { display: none; }
.app.collapsed .top .menu-btn { display: inline-grid; }
.top .title {
  flex: 1; min-width: 0; font-weight: 500; font-size: 1.05rem; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; padding-left: 4px;
}
.quota { font-size: .78rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.quota:empty { display: none; }

.stage { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.thread { max-width: 800px; margin: 0 auto; padding: 4px 20px 28px; }

/* หน้าแรกบนคอม: ช่องพิมพ์อยู่กลางจอ แบบ Gemini */
@media (min-width: 821px) {
  .main.home .stage { justify-content: center; padding-bottom: 20vh; } /* ช่องพิมพ์หน้าแรกต่ำกว่ากึ่งกลางนิดหน่อย กดง่าย */
  .main.home .scroll { flex: 0 1 auto; }
}

.welcome { text-align: center; padding: 6vh 0 8px; }
.welcome .intro { display: inline-block; animation: pop .9s ease-out both; cursor: pointer; }
@keyframes pop {
  0% { opacity: 0; transform: scale(.2) rotate(-25deg); }
  40% { opacity: 1; transform: scale(1.12) rotate(6deg); }
  65% { transform: scale(.95) rotate(-3deg); }
  85% { transform: scale(1.03) rotate(1deg); }
  100% { transform: none; }
}
.welcome h1 {
  margin: 10px 0 0; font-size: 1.9rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.25;
  color: var(--text);
}
.welcome p { margin: 4px 0 26px; color: var(--muted); font-size: 1.05rem; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg); font-size: .9rem; color: var(--muted); transition: background .15s, color .15s;
}
.chip:hover { background: var(--side); color: var(--text); }
.chip i { display: none; }

/* โลโก้ HighSearch: กะพริบตอน AI คิด เต้นเบาๆ ตอนตอบ/อ่านออกเสียง */
.mark { flex: none; }
.mark svg { display: block; width: 100%; height: 100%; transition: transform .2s; }
.mark[data-mood="thinking"] svg { animation: think 1.1s ease-in-out infinite; }
.mark[data-mood="talking"] svg { animation: talk .8s ease-in-out infinite; }
.mark[data-mood="listening"] svg { transform: scale(1.06); }
@keyframes think { 50% { transform: scale(.86); opacity: .6; } }
@keyframes talk { 50% { transform: scale(1.07); } }

/* ข้อความ */
.msg { margin: 22px 0; }
.msg.new { animation: rise .28s ease-out both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.msg.user { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.msg.user .body {
  background: var(--bubble); padding: 10px 18px; border-radius: 22px;
  max-width: 85%; white-space: pre-wrap; overflow-wrap: anywhere;
}
.msg.user .mode { font-size: .8rem; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.files { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 85%; }
.files img {
  height: 150px; width: auto; max-width: 240px; object-fit: cover; border-radius: 14px; background: var(--hover);
  cursor: zoom-in; border: 1px solid var(--line);
}
.doc {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--card); max-width: 260px; font-size: .86rem;
}
.doc .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex: none; font-size: .7rem; font-weight: 700; }
.doc .nm { min-width: 0; }
.doc .nm b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc .nm span { color: var(--muted); font-size: .78rem; }
.msg.ai { display: flex; gap: 14px; }
.msg.ai .avatar { width: 28px; flex: none; padding-top: 2px; }
.msg.ai .col { flex: 1; min-width: 0; }
.msg.ai .body { overflow-wrap: anywhere; }
.msg .error { color: var(--danger); margin-top: 6px; font-size: .95rem; }
.tools { display: flex; gap: 2px; margin: 6px 0 0 -8px; }
.tools button {
  border: 0; background: none; color: var(--muted); font-size: .8rem; padding: 5px 9px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px; transition: background .15s;
}
.tools button:hover { background: var(--hover); color: var(--text); }
.tools svg { width: 16px; height: 16px; }

/* รูปที่ AI สร้าง */
.gen { position: relative; width: min(100%, 440px); aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: var(--hover); }
.gen img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.gen.loading::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  background-size: 220% 100%; animation: shimmer 1.4s linear infinite;
}
.gen .wait { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: .92rem; z-index: 1; }
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* ข้อความที่ AI ตอบ (Markdown) */
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 12px; }
.md h2, .md h3, .md h4 { margin: 20px 0 8px; line-height: 1.35; font-weight: 600; }
.md h2 { font-size: 1.3rem; } .md h3 { font-size: 1.14rem; } .md h4 { font-size: 1.02rem; }
.md ul, .md ol { margin: 0 0 12px; padding-left: 26px; }
.md li { margin: 4px 0; }
.md li > ul, .md li > ol { margin: 4px 0 0; }
.md blockquote { margin: 0 0 12px; padding: 2px 14px; border-left: 3px solid var(--line); color: var(--muted); }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.md code { background: var(--bubble); padding: 1px 6px; border-radius: 6px; font-size: .88em; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
.md .code { margin: 0 0 14px; border-radius: 12px; overflow: hidden; background: var(--code-bg); border: 1px solid var(--line); }
.md .code-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 6px 14px; background: var(--code-head); color: var(--muted); font-size: .78rem; }
.md .code-head button { border: 0; background: none; color: inherit; font-size: .78rem; padding: 3px 8px; border-radius: 6px; }
.md .code-head button:hover { color: var(--text); background: var(--hover); }
.md pre { margin: 0; padding: 14px 16px; overflow-x: auto; }
.md pre code { background: none; padding: 0; color: var(--code-text); font-size: .86rem; line-height: 1.6; }
.md .table { overflow-x: auto; margin: 0 0 12px; }
.md table { border-collapse: collapse; font-size: .93rem; }
.md th, .md td { border: 1px solid var(--line); padding: 7px 11px; text-align: left; vertical-align: top; }
.md th { background: var(--side); font-weight: 600; }
/* สีโค้ด (highlight.js) */
.hljs-keyword, .hljs-selector-tag, .hljs-built_in { color: #cf222e; }
.hljs-string, .hljs-regexp, .hljs-addition { color: #0a3069; }
.hljs-number, .hljs-literal { color: #0550ae; }
.hljs-comment, .hljs-quote { color: #6e7781; font-style: italic; }
.hljs-title, .hljs-section, .hljs-function .hljs-title { color: #8250df; }
.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable, .hljs-type { color: #953800; }
.hljs-meta, .hljs-symbol, .hljs-bullet { color: #0550ae; }
.hljs-tag, .hljs-name, .hljs-deletion { color: #116329; }

.typing span { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.to-bottom {
  position: absolute; left: 50%; bottom: 8px; translate: -50% 0; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); display: grid; place-items: center;
  opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 2;
}
.to-bottom.show { opacity: 1; pointer-events: auto; }

/* ---------- ช่องพิมพ์ (แบบ Gemini) ---------- */
.composer-wrap { padding: 0 20px calc(10px + env(safe-area-inset-bottom)); position: relative; }
.composer {
  max-width: 800px; margin: 0 auto; background: var(--composer); border-radius: 28px; padding: 8px;
  border: 1px solid var(--line); box-shadow: 0 2px 12px rgba(0, 0, 0, .05); transition: border-color .2s, box-shadow .2s; position: relative;
}
.composer:focus-within { border-color: #d0d0d0; box-shadow: 0 4px 18px rgba(0, 0, 0, .08); }
.composer.drag { border-color: var(--accent); }
.attach { display: flex; gap: 8px; overflow-x: auto; padding: 6px 8px 8px; scrollbar-width: thin; }
.attach:empty { display: none; }
.att { position: relative; flex: none; }
.att img { width: 64px; height: 64px; object-fit: cover; border-radius: 14px; display: block; background: var(--hover); }
.att .doc { max-width: 220px; height: 64px; }
.att .x {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0;
  background: var(--text); color: var(--bg); display: grid; place-items: center; box-shadow: var(--shadow);
}
.att.loading img, .att.loading .doc { opacity: .5; }
.att .spin { position: absolute; inset: 0; display: grid; place-items: center; }
.mode-row { padding: 2px 8px 6px; }
.mode-row:empty { display: none; }
.mode-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; border-radius: 999px;
  background: #e8f0fe; color: #0b57d0; font-size: .86rem; font-weight: 500; border: 0;
}
.mode-chip svg { width: 16px; height: 16px; }
.row { display: flex; align-items: flex-end; gap: 4px; }
.row textarea {
  flex: 1; min-width: 0; border: 0; outline: none; resize: none; background: none; max-height: 220px;
  padding: 8px 6px; line-height: 1.5; font-size: 1rem;
}
.row textarea::placeholder { color: var(--muted); }
.model-btn {
  height: 40px; border: 0; background: none; border-radius: 999px; padding: 0 10px 0 14px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px; font-size: .94rem; flex: none;
}
.model-btn:hover, .model-btn[aria-expanded="true"] { background: var(--hover); }
.model-btn svg { width: 18px; height: 18px; color: var(--muted); }
.send {
  width: 40px; height: 40px; border-radius: 50%; border: 0; flex: none; background: var(--accent); color: var(--accent-text);
  display: grid; place-items: center; transition: transform .15s, opacity .15s;
}
.send:active { transform: scale(.92); }
.send:disabled { opacity: .35; cursor: default; }
.send svg, .mic svg { width: 21px; height: 21px; }
.mic.on { background: var(--rec); color: #fff; animation: ring 1.4s ease-out infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rec) 45%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
.mic.wait { pointer-events: none; }
.mic.wait svg { display: none; }
.mic.wait::after { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite; }
.rec { flex: 1; min-width: 0; display: none; align-items: center; gap: 10px; height: 40px; padding: 0 6px; color: var(--muted); font-size: .92rem; }
.composer.recording .rec, .composer.transcribing .rec { display: flex; }
.composer.recording textarea, .composer.transcribing textarea { display: none; }
.rec .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rec); animation: blink 1s infinite; flex: none; }
.composer.transcribing .rec .dot { display: none; }
.rec canvas { flex: 1; min-width: 0; height: 32px; }
.rec .time { font-variant-numeric: tabular-nums; flex: none; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.note { text-align: center; color: var(--muted); font-size: .76rem; margin-top: 8px; }

/* เมนูลอย (ปุ่ม + และเลือกโมเดล) */
.pop {
  position: absolute; bottom: calc(100% + 8px); z-index: 30; min-width: 260px; background: var(--menu); border-radius: 18px;
  box-shadow: var(--shadow); border: 1px solid var(--line); padding: 6px; display: none;
  transform-origin: bottom left; animation: popin .14s ease-out;
}
.pop.open { display: block; }
.pop.right { right: 8px; transform-origin: bottom right; }
.pop.left { left: 8px; }
@keyframes popin { from { opacity: 0; transform: translateY(4px) scale(.97); } }
.pop h6 { margin: 12px 12px 4px; font-size: .78rem; color: var(--muted); font-weight: 600; }
.pop button {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; border: 0; background: none;
  padding: 8px 12px; border-radius: 12px;
}
.pop button:hover, .pop button:focus-visible { background: var(--hover); outline: none; }
.pop button svg { width: 22px; height: 22px; color: var(--muted); }
.pop .tx { flex: 1; min-width: 0; line-height: 1.35; }
.pop .tx b { display: block; font-weight: 500; font-size: .95rem; }
.pop .tx span { color: var(--muted); font-size: .8rem; }
.pop .check { width: 20px; color: var(--accent); }

/* หน้าต่างดูรูป / แจ้งเตือน / ลากไฟล์ */
.viewer { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .85); display: none; place-items: center; padding: 24px; cursor: zoom-out; }
.viewer.open { display: grid; animation: fade .15s; }
.viewer img { max-width: 100%; max-height: 100%; border-radius: 12px; }
@keyframes fade { from { opacity: 0; } }
.toast {
  position: fixed; left: 50%; bottom: 110px; translate: -50% 0; z-index: 60; background: var(--text); color: var(--bg);
  padding: 10px 18px; border-radius: 12px; font-size: .9rem; max-width: calc(100vw - 32px); box-shadow: var(--shadow);
  opacity: 0; transition: opacity .2s, transform .2s; transform: translateY(8px); pointer-events: none;
}
.toast.show { opacity: 1; transform: none; }
.drop {
  position: fixed; inset: 0; z-index: 40; display: none; place-items: center; background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(4px); font-size: 1.2rem; font-weight: 500; color: var(--accent);
}
.drop.show { display: grid; }
.drop div { border: 2px dashed var(--accent); border-radius: 24px; padding: 48px 64px; }

.scrim { display: none; }

/* มือถือ: เมนูด้านข้างเลื่อนออกมา */
@media (max-width: 820px) {
  .side { position: fixed; inset: 0 auto 0 0; z-index: 20; width: min(300px, 86vw); transform: translateX(-100%); box-shadow: var(--shadow); margin-left: 0 !important; }
  .app.open .side { transform: none; }
  .app.open .scrim { display: block; position: fixed; inset: 0; z-index: 10; background: rgba(0, 0, 0, .4); }
  .top .menu-btn { display: inline-grid; }
  .side-top .collapse { display: none; }
  .chat-item .act { display: grid; }
  .thread { padding: 4px 16px 24px; }
  .composer-wrap { padding: 0 12px calc(8px + env(safe-area-inset-bottom)); }
  .welcome { padding-top: 5vh; }
  .welcome h1 { font-size: 1.9rem; }
  .welcome p { font-size: 1.1rem; }
  .msg.user .body, .files { max-width: 92%; }
  .msg.ai { gap: 10px; }
  .model-btn { padding: 0 6px 0 10px; }
  .note { font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- บัญชีผู้ใช้ ---------- */
.auth-btns { display: flex; gap: 8px; }
.btn {
  height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg);
  font-weight: 500; font-size: .9rem; white-space: nowrap;
}
.btn:hover { background: var(--side); }
.btn.dark { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.btn.dark:hover { background: #2f2f2f; }
.btn.block { width: 100%; height: 44px; }
.avatar-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 0; background: #5b6cff; color: #fff; font-weight: 600;
  font-size: .9rem; display: grid; place-items: center; flex: none;
}
.account {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; background: none;
  border-radius: 10px; text-align: left;
}
.account:hover { background: var(--hover); }
.account .who2 { flex: 1; min-width: 0; line-height: 1.3; }
.account .who2 b { display: block; font-weight: 500; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account .who2 span { color: var(--muted); font-size: .78rem; }
.side-foot { position: relative; }
.side-foot .pop { left: 0; right: 0; min-width: 0; bottom: calc(100% + 6px); }
.pop .info { padding: 8px 12px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; font-size: .86rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.pop button:disabled { opacity: .5; cursor: default; background: none; }
.pop .soon { font-size: .72rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.lang-row { display: flex; align-items: center; gap: 8px; padding: 4px 4px 0; }
.lang-row svg { width: 18px; height: 18px; color: var(--muted); margin-left: 6px; }
.lang-row select { flex: 1; border: 0; background: none; padding: 6px 4px; font-size: .88rem; cursor: pointer; }

.modal { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .35); display: none; place-items: center; padding: 16px; }
.modal.open { display: grid; animation: fade .15s; }
.dialog {
  width: min(400px, 100%); background: var(--bg); border-radius: 20px; padding: 28px 28px 24px; position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .2); animation: popin .18s ease-out;
}
.dialog .close { position: absolute; top: 12px; right: 12px; }
.dialog .logo { width: 44px; height: 44px; border-radius: 12px; display: block; margin: 0 auto 12px; }
.dialog h2 { margin: 0; text-align: center; font-size: 1.45rem; font-weight: 600; }
.dialog .sub { margin: 6px 0 22px; text-align: center; color: var(--muted); font-size: .92rem; }
.field { display: block; margin-bottom: 12px; }
.field span { display: block; font-size: .84rem; font-weight: 500; margin-bottom: 5px; }
.field input {
  width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); outline: none; background: var(--bg);
}
.field input:focus { border-color: var(--link); box-shadow: 0 0 0 3px rgba(11, 98, 214, .12); }
.form-error { color: var(--danger); font-size: .86rem; min-height: 1.2em; margin: 2px 0 10px; }
.switch { margin: 16px 0 0; text-align: center; font-size: .9rem; color: var(--muted); }
.switch button { border: 0; background: none; color: var(--link); font-weight: 500; padding: 0 2px; }
.fine { margin: 14px 0 0; text-align: center; font-size: .76rem; color: var(--muted); }
@media (max-width: 820px) {
  .auth-btns .btn:not(.dark) { display: none; }
  .btn { height: 34px; padding: 0 14px; }
}
.tools button.on { color: var(--text); background: var(--hover); }

/* ---------- ค้นเว็บแบบ Perplexity: แหล่งที่มา เลขอ้างอิง และโมเดลที่ตอบ ---------- */
.mode-chip.search { background: var(--side); color: var(--text); border: 1px solid var(--line); }
.mode-chip.search:hover { background: var(--hover); }
.sources { margin: 0 0 14px; }
.src-title { display: flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 600; margin-bottom: 8px; }
.src-title svg { width: 17px; height: 17px; }
.src-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.src {
  display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-height: 76px; padding: 9px 11px;
  border-radius: 12px; background: var(--side); border: 1px solid var(--line); color: var(--text); text-decoration: none;
  font-size: .8rem; line-height: 1.35; transition: background .15s;
}
.src:hover { background: var(--hover); }
.src-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 500; }
.src-host { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .74rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.src-host i { width: 16px; height: 16px; border-radius: 4px; background: var(--text); color: var(--bg); font-style: normal; font-size: .62rem; font-weight: 700; display: grid; place-items: center; flex: none; }
.md a.cite {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin: 0 1px; border-radius: 9px;
  background: var(--hover); color: var(--muted); font-size: .7rem; font-weight: 600; text-decoration: none; vertical-align: 2px;
}
.md a.cite:hover { background: var(--accent); color: var(--accent-text); }
.status { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .92rem; }
.tools .by { margin-left: auto; align-self: center; color: var(--muted); font-size: .76rem; padding-right: 4px; white-space: nowrap; }
.mi { width: 22px; height: 22px; border-radius: 6px; color: #fff; font-size: .72rem; font-weight: 700; display: grid; place-items: center; flex: none; }
.pop { max-height: min(70vh, 560px); overflow-y: auto; }
@media (max-width: 820px) { .src-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* เมนูเปิดลงล่าง (ใช้ตอนช่องพิมพ์อยู่กลางจอ) */
.pop.down { bottom: auto; top: calc(100% + 8px); transform-origin: top left; }
.pop.right.down { transform-origin: top right; }

/* ---------- คำถามที่เกี่ยวข้อง / รูปจากผลค้นหา ---------- */
.related { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.related .src-title svg { width: 17px; height: 17px; }
.rel {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; border: 0;
  border-bottom: 1px solid var(--line); background: none; padding: 11px 4px; font-size: .95rem; color: var(--text);
}
.rel:last-child { border-bottom: 0; }
.rel:hover { color: var(--link); }
.rel span { color: var(--muted); display: grid; }
.web-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; margin: 0 0 14px; }
.web-imgs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--hover); cursor: zoom-in; display: block; }
@media (max-width: 820px) { .web-imgs { grid-template-columns: repeat(3, 1fr); } .web-imgs img:nth-child(n+4) { display: none; } }

/* ---------- แก้ไขคำถาม ---------- */
.utools { display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.msg.user:hover .utools, .msg.user:focus-within .utools { opacity: 1; }
@media (pointer: coarse) { .utools { opacity: 1; } }
.utools button { border: 0; background: none; color: var(--muted); width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; }
.utools button:hover { background: var(--hover); color: var(--text); }
.edit-box { width: min(100%, 640px); background: var(--bubble); border-radius: 20px; padding: 10px 12px; }
.edit-box textarea { width: 100%; border: 0; outline: none; background: none; resize: vertical; min-height: 70px; line-height: 1.5; }
.edit-row { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- แชร์ / เมนูเพิ่มเติม / ปักหมุด ---------- */
.more-wrap { position: relative; }
.more-wrap .pop { top: calc(100% + 6px); bottom: auto; min-width: 250px; }
.share-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 8px 0 4px;
  padding: 12px 14px; border-radius: 14px; background: var(--side); border: 1px solid var(--line); font-size: .92rem;
}
.share-banner span { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.share-banner svg { width: 18px; height: 18px; }
.share-banner .btn { display: inline-grid; place-items: center; text-decoration: none; }
.chat-item .act.pin.on { display: grid; color: var(--text); }

/* ---------- Discover ---------- */
.discover { padding: 8px 0 24px; }
.discover h2 { margin: 6px 0 4px; font-size: 1.5rem; font-weight: 600; }
.discover h3 { margin: 22px 0 10px; font-size: 1.05rem; font-weight: 600; }
.discover .muted { color: var(--muted); }
.news { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.card { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card); display: flex; flex-direction: column; }
.card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--hover); }
.card-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-body a { color: var(--text); text-decoration: none; line-height: 1.4; }
.card-body a:hover { text-decoration: underline; }
.card-body p { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .76rem; padding-top: 6px; }
.card-foot .btn { height: 32px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; }
.card-foot .btn svg { width: 15px; height: 15px; }

/* ---------- ตั้งค่า ---------- */
.dialog.wide { width: min(560px, 100%); max-height: 90dvh; display: flex; flex-direction: column; padding: 24px; }
.dialog.wide h2 { text-align: left; margin-bottom: 12px; }
.dialog-body { overflow-y: auto; margin: 0 -24px; padding: 0 24px; flex: 1; }
.dialog-body section { padding: 12px 0; border-bottom: 1px solid var(--line); }
.dialog-body section:last-child { border-bottom: 0; }
.dialog-body h3 { margin: 0 0 10px; font-size: 1rem; font-weight: 600; }
.dialog-body textarea { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); outline: none; resize: vertical; line-height: 1.5; }
.dialog-body textarea:focus { border-color: var(--link); }
.dialog-body details summary { cursor: pointer; color: var(--link); margin: 4px 0 10px; font-size: .92rem; }
.dialog .save { margin-top: 14px; flex: none; }
.check-row { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; cursor: pointer; }
.check-row input { margin-top: 4px; }
.mem { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.mem li { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--side); border-radius: 10px; padding: 6px 6px 6px 12px; font-size: .9rem; }
.mem li.muted { color: var(--muted); background: none; padding-left: 0; }
.mem .btn { height: 30px; padding: 0 12px; font-size: .8rem; }
.usage { color: var(--muted); font-size: .9rem; margin-bottom: 10px; }
.row-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- โหมดคุยด้วยเสียง ---------- */
.voice-view {
  position: fixed; inset: 0; z-index: 58; background: var(--bg); display: none; flex-direction: column; align-items: center;
  justify-content: center; gap: 28px; padding: 24px;
}
.voice-view.open { display: flex; animation: fade .2s; }
.v-mark { cursor: pointer; border-radius: 32px; padding: 26px; background: var(--side); }
.v-mark .mark[data-mood="listening"] svg { animation: talk 1.2s ease-in-out infinite; }
.v-status { font-size: 1.25rem; color: var(--muted); text-align: center; min-height: 1.6em; }
.v-end { height: 46px; padding: 0 26px; }

/* ---------- พิมพ์ / PDF: แสดงเฉพาะแชท ---------- */
@media print {
  .side, .top, .composer-wrap, .to-bottom, .tools, .utools, .related, .scrim { display: none !important; }
  body, .app, .main, .stage, .scroll { overflow: visible !important; height: auto !important; display: block !important; }
  .thread { max-width: none; padding: 0; }
  .msg { break-inside: avoid; }
}
.account > svg { width: 22px; height: 22px; margin: 0 6px; color: var(--muted); flex: none; }

/* ---------- หน้าแรก: โลโก้ HighSearch อย่างเดียว ---------- */
.welcome .wordmark { display: inline-flex; align-items: center; gap: 12px; font-size: 2.4rem; font-weight: 600; letter-spacing: -.02em; margin-bottom: 26px; }
.welcome .wordmark .intro { display: inline-grid; }
@media (max-width: 820px) { .welcome .wordmark { font-size: 2rem; } }

/* ---------- เมนูบัญชีและมุมล่างซ้าย ---------- */
.guest-mini { border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin: 4px 0 6px; background: var(--bg); display: grid; gap: 4px; }
.guest-mini b { font-size: .9rem; }
.guest-mini span { color: var(--muted); font-size: .8rem; line-height: 1.4; }
.guest-mini .row-btns { margin-top: 6px; }
.guest-mini .btn { height: 34px; flex: 1; }
.account > svg:last-child { width: 16px; height: 16px; margin: 0 4px; }
.acc-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.acc-head .who2 { flex: 1; min-width: 0; line-height: 1.3; }
.acc-head .who2 b { display: block; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-head .who2 span { color: var(--muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* ---------- หน้าตั้งค่าแบบแท็บ ---------- */
.dialog.settings { width: min(760px, 100%); height: min(620px, 92dvh); padding: 22px 24px; }
.set-wrap { display: flex; gap: 18px; flex: 1; min-height: 0; }
.set-tabs { width: 190px; flex: none; display: grid; align-content: start; gap: 2px; }
.set-tabs button { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 9px 12px; border-radius: 10px; text-align: left; font-size: .92rem; color: var(--text); }
.set-tabs button svg { width: 18px; height: 18px; color: var(--muted); }
.set-tabs button:hover { background: var(--side); }
.set-tabs button.on { background: var(--hover); font-weight: 500; }
.dialog.settings .dialog-body { margin: 0; padding: 0 4px 0 0; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.set-row:last-child { border-bottom: 0; }
.set-row > span { display: grid; gap: 2px; min-width: 0; }
.set-row b { font-weight: 500; font-size: .94rem; }
.set-row small { color: var(--muted); font-size: .8rem; }
.set-row select { border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; background: var(--bg); min-width: 150px; }
.set-row .btn { flex: none; display: inline-grid; place-items: center; text-decoration: none; height: 36px; }
.switch-input { appearance: none; width: 42px; height: 24px; border-radius: 999px; background: #d4d4d4; position: relative; cursor: pointer; flex: none; transition: background .15s; }
.switch-input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch-input:checked { background: var(--accent); }
.switch-input:checked::after { transform: translateX(18px); }
.set-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 8%, transparent); }
.profile { display: flex; align-items: center; gap: 14px; }
.profile div { display: grid; gap: 2px; }
.profile div span { color: var(--muted); font-size: .86rem; }
.avatar-btn.big { width: 52px; height: 52px; font-size: 1.3rem; }
.plan-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 12px; }
.plan-top { display: flex; align-items: center; justify-content: space-between; }
.meter-top { display: flex; justify-content: space-between; font-size: .86rem; color: var(--muted); margin-bottom: 5px; }
.meter-top b { color: var(--text); font-weight: 500; }
.bar { height: 6px; border-radius: 3px; background: var(--hover); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.plan-card .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.plan-card .btn svg { width: 16px; height: 16px; }
.guest-card { text-align: center; padding: 30px 10px; }
.guest-card .mark-lg { width: 56px; height: 56px; margin: 0 auto 12px; }
.guest-card .mark-lg svg { width: 100%; height: 100%; }
.guest-card p { color: var(--muted); margin: 4px 0 16px; }
.guest-card .row-btns { justify-content: center; }
@media (max-width: 820px) {
  .dialog.settings { height: 92dvh; padding: 18px 16px; }
  .set-wrap { flex-direction: column; gap: 10px; }
  .set-tabs { width: auto; display: flex; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
  .set-tabs button { flex: none; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; }
  .set-tabs button svg { display: none; }
  .set-row select { min-width: 0; }
}

/* ---------- ปุ่มเข้าสู่ระบบด้วย Google / Microsoft / GitHub ---------- */
.oauth-box { display: grid; gap: 8px; margin-bottom: 6px; }
.btn.oauth { display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; color: var(--text); height: 46px; border-radius: 12px; }
.btn.oauth svg { flex: none; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .8rem; margin: 8px 0 6px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ลิงก์นโยบายใต้ช่องพิมพ์ (ระบบตรวจของ Google ต้องเห็นจากหน้าแรก) */
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 4px; font-size: .72rem; color: var(--muted); }
.legal-links a { color: var(--muted); }
.legal-links a:hover { color: var(--text); }
.main:not(.home) .legal-links span { display: none; }
@media (max-width: 820px) { .legal-links span { display: none; } }

/* ---------- มือถือและแท็บเล็ต (ตรวจจากความกว้างจอเอง): แถบบนกระชับ หน้าแรกอยู่กลางจอ ---------- */
.mobile-only { display: none !important; }
@media (max-width: 820px) {
  .mobile-only { display: flex !important; }
  .top { gap: 2px; padding: 6px 8px; min-height: 52px; }
  .top .quota, #shareBtn { display: none; }
  .top .title { font-size: 1rem; padding-left: 2px; }
  .top .icon-btn { width: 38px; height: 38px; }
  .auth-btns .btn { height: 34px; padding: 0 14px; font-size: .86rem; }
  .avatar-btn { width: 32px; height: 32px; }
  /* หน้าแรก: โลโก้อยู่กลางจอ ช่องพิมพ์อยู่ล่าง (แบบแอป ChatGPT/Gemini) */
  .main.home .thread { min-height: 100%; display: flex; flex-direction: column; justify-content: center; }
  .main.home .welcome { padding: 0 0 6vh; }
  .welcome .wordmark { margin-bottom: 0; font-size: 1.9rem; }
  .main:not(.home) .legal-links { display: none; }
  .composer { border-radius: 26px; }
  .row textarea { font-size: 16px; } /* 16px กัน iPhone ซูมเองตอนแตะช่องพิมพ์ */
  .dialog { padding: 22px 18px 20px; border-radius: 18px; }
  .pop { min-width: 0; width: calc(100vw - 24px); max-width: 360px; }
}
@media (max-width: 380px) {
  .auth-btns .btn { padding: 0 10px; }
  .top .title { display: none; }
  .top .menu-btn { margin-right: auto; }
}
@media (max-width: 820px) {
  /* ปุ่มใต้คำตอบบนมือถือ: แสดงแค่ไอคอน ไม่ให้ตัวหนังสือขึ้นบรรทัดใหม่ */
  .tools button span { display: none; }
  .tools button { padding: 6px 8px; }
  .tools .by { font-size: .72rem; }
}

/* ---------- ชุด 1: ความคิดของ AI, สูตร, เคอร์เซอร์, เวอร์ชัน, ปรับคำตอบ, อ้างข้อความ, แชทชั่วคราว ---------- */
.think { margin: 0 0 12px; }
.think summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; color: var(--muted); font-size: .9rem;
  padding: 4px 10px 4px 4px; border-radius: 999px;
}
.think summary::-webkit-details-marker { display: none; }
.think summary:hover { color: var(--text); background: var(--side); }
.think summary svg { width: 16px; height: 16px; }
.think.live summary { color: var(--text); }
.think-body {
  margin: 6px 0 0 10px; padding: 2px 0 2px 14px; border-left: 2px solid var(--line); color: var(--muted); font-size: .86rem;
  white-space: pre-wrap; max-height: 320px; overflow-y: auto; line-height: 1.55;
}
.md.streaming > :last-child::after {
  content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 4px; border-radius: 50%; background: var(--text);
  vertical-align: middle; animation: blink 1s infinite;
}
.md.streaming > pre:last-child::after, .md.streaming > .code:last-child::after, .md.streaming > .table:last-child::after { display: none; }
.math.display { display: block; text-align: center; margin: 10px 0; overflow-x: auto; overflow-y: hidden; }
.tools { position: relative; flex-wrap: wrap; align-items: center; }
.tools button.fb.on { color: var(--text); background: var(--hover); }
.ver { display: inline-flex; align-items: center; gap: 2px; margin-right: 4px; font-size: .8rem; color: var(--muted); }
.ver button { border: 0; background: none; width: 26px; height: 26px; border-radius: 6px; font-size: 1.1rem; color: var(--muted); padding: 0 !important; display: grid !important; place-items: center; }
.ver button:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.ver button:disabled { opacity: .35; cursor: default; }
.modify-menu { bottom: auto; top: calc(100% + 4px); left: 0; min-width: 200px; }
.quote-btn {
  position: fixed; z-index: 45; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  border: 0; background: var(--accent); color: var(--accent-text); font-size: .84rem; box-shadow: var(--shadow);
}
.quote-btn[hidden] { display: none !important; }
.mode-chip.quote-chip { background: var(--side); color: var(--text); border: 1px solid var(--line); max-width: 100%; font-weight: 400; }
.mode-chip.quote-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.msg.user .quote {
  max-width: 85%; border-left: 3px solid var(--line); padding: 2px 0 2px 12px; color: var(--muted); font-size: .88rem;
  white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
#tempBtn.on { background: var(--accent); color: var(--accent-text); }
#tempBtn.on svg { stroke-dasharray: 0; }
.temp-note { margin: 14px auto 0; max-width: 420px; color: var(--muted); font-size: .9rem; }

/* =====================================================================
   ธีม Liquid Glass (แบบ Apple iOS 26): กระจกฝ้าโปร่งแสง ขอบสะท้อนแสง ลอยเหนือพื้นหลังสีพาสเทลอ่อน
   ===================================================================== */
:root {
  --glass: rgba(255, 255, 255, .5);
  --glass-strong: rgba(255, 255, 255, .72);
  --glass-soft: rgba(255, 255, 255, .38);
  --glass-line: rgba(255, 255, 255, .75);
  --glass-edge: rgba(15, 23, 42, .08);
  --glass-blur: blur(24px) saturate(180%);
  --glass-shine: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(255, 255, 255, .25);
  --glass-shadow: 0 8px 32px rgba(31, 41, 80, .10), 0 1px 3px rgba(31, 41, 80, .06);
  --hover: rgba(255, 255, 255, .6);
  --side: rgba(255, 255, 255, .45);
  --bubble: rgba(255, 255, 255, .7);
  --code-bg: rgba(248, 250, 252, .8);
  --code-head: rgba(241, 245, 249, .85);
}
/* พื้นหลัง: สีพาสเทลอ่อนๆ ให้กระจกมีอะไรให้มองทะลุ */
body {
  background:
    radial-gradient(1100px 760px at 6% -12%, #c9dcff 0%, transparent 62%),
    radial-gradient(950px 700px at 108% 10%, #dccffd 0%, transparent 62%),
    radial-gradient(1000px 760px at 55% 118%, #c8ecfd 0%, transparent 62%),
    radial-gradient(760px 560px at -8% 92%, #fbd3e9 0%, transparent 58%),
    radial-gradient(600px 420px at 70% 45%, #eef2ff 0%, transparent 70%),
    #f2f5fb;
  background-attachment: fixed;
}
.app { background: transparent; }

/* กระจก: ใช้ร่วมกันทุกแผง */
.side, .composer, .pop, .dialog, .toast, .src, .card, .plan-card, .guest-card,
.msg.user .body, .edit-box, .share-banner, .chip, .btn:not(.dark), .mode-chip.quote-chip,
.quote-btn, .to-bottom, .think-body, .md .code, .md .table, .web-imgs img {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* เมนูด้านข้าง: แผงกระจกลอย มุมโค้ง */
.side {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shine), var(--glass-shadow);
  margin: 10px 0 10px 10px;
  border-radius: 26px;
  height: calc(100% - 20px);
}
.app.collapsed .side { margin-left: -300px; }
.new-chat:hover, .chat-item:hover, .chat-item.active, .set-tabs button.on, .set-tabs button:hover, .account:hover {
  background: rgba(255, 255, 255, .65);
  box-shadow: var(--glass-shine);
}
.search { background: rgba(255, 255, 255, .55); border-color: var(--glass-line); }

/* แถบบน: โปร่งใส ลอยบนพื้นหลัง */
.top { background: transparent; }
.icon-btn:hover { background: rgba(255, 255, 255, .6); box-shadow: var(--glass-shine); }

/* ช่องพิมพ์: แคปซูลกระจกหนา มีขอบสะท้อนแสง */
.composer {
  background: var(--glass-strong);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shine), 0 10px 40px rgba(31, 41, 80, .12), 0 2px 6px rgba(31, 41, 80, .06);
}
.composer:focus-within { border-color: rgba(255, 255, 255, .95); box-shadow: var(--glass-shine), 0 14px 48px rgba(31, 41, 80, .16), 0 0 0 4px rgba(147, 197, 253, .25); }
.model-btn:hover, .model-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .7); box-shadow: var(--glass-shine); }

/* ปุ่มส่ง / ปุ่มหลัก: แก้วสีเข้มเงาวาว */
.send, .btn.dark, .quote-btn {
  background: linear-gradient(180deg, #2b2f3a 0%, #0d0f14 100%);
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 14px rgba(13, 15, 20, .25);
}
.btn.dark:hover { background: linear-gradient(180deg, #3a3f4c 0%, #15181f 100%); }

/* ปุ่มรอง / ชิป / การ์ด / ฟองข้อความ: กระจกบาง */
.btn:not(.dark), .chip, .mode-chip.quote-chip {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shine), 0 1px 3px rgba(31, 41, 80, .06);
}
.btn:not(.dark):hover, .chip:hover { background: rgba(255, 255, 255, .8); }
.btn.danger { background: rgba(255, 255, 255, .55); }
.msg.user .body {
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shine), 0 4px 16px rgba(31, 41, 80, .07);
}
.src, .card, .plan-card, .share-banner, .edit-box {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shine), 0 4px 18px rgba(31, 41, 80, .07);
}
.src:hover, .card:hover { background: rgba(255, 255, 255, .78); transform: translateY(-1px); transition: transform .15s, background .15s; }
.md .code, .md .table table { border: 1px solid var(--glass-line); box-shadow: var(--glass-shine), 0 4px 18px rgba(31, 41, 80, .06); }
.md .code { background: var(--code-bg); }
.md th { background: rgba(255, 255, 255, .6); }
.md code { background: rgba(255, 255, 255, .7); }
.think-body { background: rgba(255, 255, 255, .35); border-radius: 0 12px 12px 0; padding: 8px 12px; }
.tools button:hover, .utools button:hover, .ver button:hover:not(:disabled) { background: rgba(255, 255, 255, .7); box-shadow: var(--glass-shine); }
.web-imgs img { border: 1px solid var(--glass-line); box-shadow: 0 4px 14px rgba(31, 41, 80, .08); }

/* เมนูลอย / หน้าต่าง / การแจ้งเตือน: กระจกหนา */
/* ทึบเกือบเต็ม: เมนูอยู่ในช่องพิมพ์ที่เป็นกระจกอยู่แล้ว เบลอซ้อนกันไม่ได้ ตัวหนังสือข้างหลังเลยทะลุมาให้เห็น */
.pop, .dialog {
  background: rgba(255, 255, 255, .97);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shine), 0 18px 60px rgba(31, 41, 80, .18), 0 2px 8px rgba(31, 41, 80, .06);
}
.pop button:hover, .pop button:focus-visible { background: rgba(15, 23, 42, .05); box-shadow: none; }
.modal { background: rgba(15, 23, 42, .18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dialog { border-radius: 28px; }
.toast {
  background: rgba(20, 22, 28, .72); color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 12px 40px rgba(0, 0, 0, .25);
}
.to-bottom { background: var(--glass-strong); border: 1px solid var(--glass-line); box-shadow: var(--glass-shine), var(--glass-shadow); }
.field input, .dialog-body textarea, .set-row select, .side-foot select {
  background: rgba(255, 255, 255, .6); border-color: var(--glass-line);
  box-shadow: inset 0 1px 2px rgba(31, 41, 80, .06);
}
.voice-view { background: rgba(245, 247, 251, .65); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); }
.v-mark { background: var(--glass-strong); border: 1px solid var(--glass-line); box-shadow: var(--glass-shine), var(--glass-shadow); }
.avatar-btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 8px rgba(91, 108, 255, .3); }
.drop { background: rgba(245, 247, 251, .55); }
.mark svg { filter: drop-shadow(0 4px 10px rgba(13, 15, 20, .18)); }

/* มือถือ: เมนูด้านข้างเป็นแผงกระจกเลื่อนออกมา */
@media (max-width: 820px) {
  .side { margin: 0; height: 100%; border-radius: 0 26px 26px 0; background: rgba(255, 255, 255, .72); }
  .app.open .scrim { background: rgba(15, 23, 42, .18); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .composer { background: rgba(255, 255, 255, .8); }
}
/* เบราว์เซอร์ที่ทำกระจกเบลอไม่ได้: ใช้สีทึบขึ้นแทน อ่านง่ายเหมือนเดิม */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .side, .composer, .pop, .dialog { background: rgba(255, 255, 255, .95); }
}
@media print { body { background: #fff; } .side, .composer { box-shadow: none; } }

/* ---------------- แท็บคำตอบ/ลิงก์/รูปภาพ ป้ายอ้างอิง ตาราง แผงแหล่งที่มา (แบบ Perplexity) ---------------- */
.ans-tabs { display: flex; align-items: center; gap: 2px; margin: 0 0 14px; padding-bottom: 6px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.ans-tabs button {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--muted); font: inherit; font-size: .88rem; font-weight: 500;
  padding: 7px 11px; border-radius: 10px; cursor: pointer; white-space: nowrap; position: relative;
}
.ans-tabs button svg { width: 16px; height: 16px; }
.ans-tabs button:hover { color: var(--text); background: rgba(255, 255, 255, .6); }
.ans-tabs button[aria-selected="true"] { color: var(--text); }
.ans-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -7px; height: 2px; border-radius: 2px; background: var(--text); }
.ans-tabs em { font-style: normal; font-size: .72rem; color: var(--muted); background: rgba(0, 0, 0, .06); border-radius: 999px; padding: 1px 7px; }
.ans-meta { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: .78rem; white-space: nowrap; padding-left: 10px; }
.ans-meta svg { width: 13px; height: 13px; color: #1f9d55; }

/* ซ่อน/แสดงตามแท็บที่เลือก */
.msg.ai .col > .sources, .msg.ai .col > .web-imgs { display: none; }
.msg.ai[data-view="links"] .col > :not(.ans-tabs):not(.sources),
.msg.ai[data-view="images"] .col > :not(.ans-tabs):not(.web-imgs) { display: none; }
.msg.ai[data-view="links"] .col > .sources { display: flex; }
.msg.ai[data-view="images"] .col > .web-imgs { display: grid; }

/* แท็บลิงก์: รายการแบบหน้าค้นหา */
.sources { flex-direction: column; gap: 4px; margin: 0 0 8px; }
.sources .src {
  display: flex; flex-direction: column; gap: 3px; min-height: 0; padding: 10px 12px; border-radius: 14px; font-size: .9rem;
  background: transparent; border: 1px solid transparent; box-shadow: none;
}
.sources .src:hover { background: rgba(255, 255, 255, .7); border-color: var(--glass-line, var(--line)); transform: none; }
.sources .src-host { color: var(--text); font-size: .82rem; gap: 8px; }
.sources .src-name { color: var(--link); font-size: 1rem; -webkit-line-clamp: 1; line-clamp: 1; }
.sources .src-url { color: var(--muted); font-size: .76rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* แท็บรูปภาพ */
.msg.ai[data-view="images"] .web-imgs { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.msg.ai[data-view="images"] .web-imgs img { display: block; border-radius: 14px; }

/* ไอคอนเว็บ */
.fav {
  width: 18px; height: 18px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; overflow: hidden;
  background: #fff; border: 1px solid var(--line); position: relative;
}
.fav::before { content: attr(data-l); font-size: .6rem; font-weight: 700; color: var(--muted); }
.fav img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }

/* ป้ายอ้างอิงในคำตอบ */
.md a.cite {
  display: inline-flex; align-items: center; gap: 3px; height: 19px; min-width: 0; padding: 0 7px; margin: 0 0 0 4px; border-radius: 6px;
  background: rgba(0, 0, 0, .055); color: var(--muted); font-size: .72rem; font-weight: 500; text-decoration: none; vertical-align: 1px;
  max-width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1;
}
.md a.cite b { font-weight: 500; opacity: .75; }
.md a.cite:hover { background: var(--accent); color: var(--accent-text); }

/* ปุ่มสรุปแหล่งที่มาใต้คำตอบ */
.tools button.src-sum { gap: 7px; padding-left: 7px; }
.src-sum .favs { display: inline-flex; }
.src-sum .favs .fav { width: 18px; height: 18px; margin-left: -6px; box-shadow: 0 0 0 2px #fff; }
.src-sum .favs .fav:first-child { margin-left: 0; }

/* แผงแหล่งที่มาด้านขวา */
.src-panel { position: fixed; inset: 0; z-index: 60; background: rgba(15, 20, 40, 0); pointer-events: none; transition: background .2s; }
.src-panel.open { background: rgba(15, 20, 40, .12); pointer-events: auto; }
.sp-card {
  position: absolute; top: 10px; right: 10px; bottom: 10px; width: min(400px, calc(100vw - 20px)); display: flex; flex-direction: column;
  background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .7); border-radius: 24px; box-shadow: 0 18px 50px rgba(31, 41, 80, .18);
  transform: translateX(calc(100% + 20px)); transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.src-panel.open .sp-card { transform: none; }
.sp-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 8px 20px; font-size: 1rem; }
.sp-list { overflow-y: auto; padding: 4px 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.sp-item { display: block; padding: 10px 12px; border-radius: 14px; color: var(--text); text-decoration: none; }
.sp-item:hover { background: rgba(255, 255, 255, .85); box-shadow: 0 2px 10px rgba(31, 41, 80, .06); }
.sp-host { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .78rem; }
.sp-host > span:not(.fav) { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sp-host em { font-style: normal; font-size: .72rem; }
.sp-title { margin-top: 4px; font-size: .9rem; font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ปุ่มใต้ตาราง */
.md .table { margin-bottom: 4px; }
.tbl-tools { display: flex; justify-content: flex-end; gap: 2px; margin: 0 0 12px; opacity: .55; transition: opacity .15s; }
.md .table:hover + .tbl-tools, .tbl-tools:hover, .tbl-tools:focus-within { opacity: 1; }
.tbl-tools button { border: 0; background: none; color: var(--muted); width: 30px; height: 28px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; }
.tbl-tools button:hover { background: rgba(255, 255, 255, .8); color: var(--text); }
.tbl-tools svg { width: 15px; height: 15px; }
.tbl-full { position: fixed; inset: 0; z-index: 70; background: rgba(15, 20, 40, .28); display: grid; place-items: center; padding: 20px; }
.tbl-card {
  position: relative; width: min(1100px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 48px 20px 20px;
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border-radius: 22px; box-shadow: 0 18px 50px rgba(31, 41, 80, .2);
}
.tbl-card .sp-close { position: absolute; top: 8px; right: 8px; }
.tbl-card .md .table { overflow: visible; }

@media (max-width: 820px) {
  .ans-meta { display: none; }
  .tbl-tools { opacity: 1; }
  .sp-card { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 80vh; border-radius: 24px 24px 0 0; transform: translateY(100%); }
  .src-panel.open .sp-card { transform: none; }
  .msg.ai[data-view="images"] .web-imgs { grid-template-columns: repeat(2, 1fr); }
  .msg.ai[data-view="images"] .web-imgs img:nth-child(n+4) { display: block; }
  .tbl-full { padding: 10px; }
}
.tools button.src-sum span, .tools button.src-sum .favs .fav { display: inline-flex; }
.tools button.src-sum .favs .fav { display: inline-grid; }
.md .table table { min-width: 100%; }

/* ---------------- Canvas: ดูตัวอย่าง/รันโค้ดในแผงข้าง ---------------- */
:root { --cv-w: min(48vw, 780px); }
body.cv-open .main { margin-right: var(--cv-w); }
.canvas {
  position: fixed; top: 10px; right: 10px; bottom: 10px; width: calc(var(--cv-w) - 20px); z-index: 40; display: flex; flex-direction: column; overflow: hidden;
  background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .75); border-radius: 22px; box-shadow: 0 18px 50px rgba(31, 41, 80, .16); animation: cv-in .22s ease-out;
}
@keyframes cv-in { from { opacity: 0; transform: translateX(24px); } }
.canvas.full { top: 0; right: 0; bottom: 0; width: 100vw; border-radius: 0; z-index: 80; }
.cv-head { display: flex; align-items: center; gap: 4px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--line); }
.cv-title { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32%; }
.cv-tabs { display: inline-flex; gap: 2px; margin-left: 10px; padding: 3px; border-radius: 12px; background: rgba(0, 0, 0, .05); }
.cv-tabs button { border: 0; background: none; font: inherit; font-size: .82rem; color: var(--muted); padding: 5px 12px; border-radius: 9px; cursor: pointer; }
.cv-tabs button[aria-selected="true"] { background: #fff; color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.cv-grow { flex: 1; }
.cv-head .icon-btn { width: 34px; height: 34px; }
.cv-head .icon-btn svg { width: 17px; height: 17px; }
.cv-body { position: relative; flex: 1; min-height: 0; }
.cv-body iframe { width: 100%; height: 100%; border: 0; background: #fff; display: block; }
.cv-code {
  width: 100%; height: 100%; border: 0; resize: none; padding: 14px 16px; background: var(--code-bg); color: var(--code-text); outline: none;
  font: 13px/1.6 ui-monospace, Consolas, Menlo, monospace; tab-size: 2; white-space: pre; display: block;
}
.cv-body [hidden] { display: none !important; }
.md .code-head .cv-btn { margin-left: auto; margin-right: 2px; font-weight: 600; color: var(--text); }
.md .code-head > span { flex: none; }
@media (max-width: 820px) {
  body.cv-open .main { margin-right: 0; }
  .canvas { top: 0; right: 0; bottom: 0; left: 0; width: 100%; border-radius: 0; z-index: 80; }
  .cv-title { max-width: 26%; }
  .cv-tabs { margin-left: 4px; }
  .cv-head .icon-btn[data-k="full"] { display: none; }
}
.md .code-head button { white-space: nowrap; }
.canvas { background: rgba(255, 255, 255, .95); }
/* Canvas: เวอร์ชัน, จอมือถือ, แถบข้อผิดพลาด, สั่ง AI แก้, เผยแพร่ */
.cv-title { min-width: 3.5em; }
.cv-ver { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.cv-ver button { border: 0; background: none; font: inherit; font-size: 1.1rem; line-height: 1; width: 24px; height: 24px; border-radius: 7px; color: var(--text); cursor: pointer; }
.cv-ver button:hover:not(:disabled) { background: rgba(0, 0, 0, .06); }
.cv-ver button:disabled { opacity: .3; cursor: default; }
.cv-pub { border: 0; border-radius: 999px; padding: 7px 14px; margin: 0 4px; font: inherit; font-size: .85rem; font-weight: 600; background: var(--accent); color: var(--accent-text); cursor: pointer; white-space: nowrap; }
.cv-pub:disabled { opacity: .6; cursor: default; }
.canvas.mobile .cv-body { background: #eef0f4; display: flex; justify-content: center; padding: 14px; }
.canvas.mobile .cv-body iframe { width: 390px; max-width: 100%; border-radius: 22px; box-shadow: 0 8px 30px rgba(31, 41, 80, .18); }
.cv-err { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-top: 1px solid #f3c7c3; background: #fdecea; color: #a32018; font-size: .85rem; }
.cv-err-tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, Consolas, Menlo, monospace; }
.cv-err .btn { flex: none; padding: 6px 12px; font-size: .82rem; }
.cv-ask { display: flex; align-items: center; gap: 6px; margin: 8px; padding: 4px 4px 4px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.cv-ask input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: .92rem; color: var(--text); padding: 6px 0; }
.cv-ask .icon-btn { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--accent-text); }
.cv-ask .icon-btn svg { width: 16px; height: 16px; }
.cv-pubbox { margin: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; font-size: .88rem; box-shadow: 0 6px 20px rgba(31, 41, 80, .08); }
.cv-pubbox p { margin: 4px 0 10px; color: var(--muted); }
.pub-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.pub-row input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; font: inherit; font-size: .85rem; background: var(--code-bg, #f6f8fa); color: var(--text); }
.pub-row .btn { padding: 6px 12px; font-size: .82rem; text-decoration: none; }
/* แถบหมวดบนสุด: แชท / ทำงาน / Code */
/* แถบบน 3 ช่อง: ซ้าย (เมนู/ชื่อแชท) · กลาง (แถบหมวด อยู่กลางจอพอดี) · ขวา (ปุ่มต่างๆ) */
.top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "l t r"; }
.top-l, .top-r { display: flex; align-items: center; gap: inherit; min-width: 0; }
.top-l { grid-area: l; }
.top-r { grid-area: r; justify-content: flex-end; }
/* แถบหมวดมีเฉพาะหน้าแชทใหม่ (หน้าแรกของแชท/ทำงาน/Code) ไม่มีใน Discover, โปรเจกต์ หรือตอนเปิดแชทเดิม */
.main:not(.home) .mode-tabs { display: none; }
.mode-tabs { grid-area: t; justify-self: center; display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(0, 0, 0, .05); }
.mode-tabs button { border: 0; background: none; font: inherit; font-size: .86rem; color: var(--muted); padding: 6px 16px; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.mode-tabs button:hover { color: var(--text); }
.mode-tabs button[aria-selected="true"] { background: #fff; color: var(--text); font-weight: 600; box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.code-card .dc-icon .spinner { width: 18px; height: 18px; border-color: rgba(255, 255, 255, .35); border-top-color: currentColor; }
/* จอไม่กว้างพอ (รวมมือถือ): ปุ่มอยู่แถวบน แถบหมวดลงมาอยู่กลางแถวที่สอง */
@media (max-width: 1180px) {
  .top { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l r"; }
}
@media (max-width: 820px) {
  .mode-tabs button { padding: 5px 14px; }
}
/* Code: ปุ่มแสดง/ซ่อนโค้ดใต้การ์ด */
.code-wrap { margin: 4px 0 14px; }
.code-wrap .doc-card { margin: 0 0 2px; }
.code-wrap .code[hidden] { display: none; }
.code-wrap .code { margin-top: 6px; }
.cc-toggle { border: 0; background: none; font: inherit; font-size: .82rem; color: var(--muted); padding: 4px 6px; cursor: pointer; }
.cc-toggle::after { content: " ▾"; }
.cc-toggle.open::after { content: " ▴"; }
.cc-toggle:hover { color: var(--text); }
/* โหมดทำงาน: เลือกระดับงาน */
.wl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 640px; margin: 0 auto; padding: 0 12px; }
.wl button { display: grid; gap: 3px; align-content: start; text-align: left; border: 1px solid var(--line); background: rgba(255, 255, 255, .7); border-radius: 14px; padding: 10px 12px; font: inherit; color: var(--text); cursor: pointer; }
.wl button b { font-size: .92rem; }
.wl button span { font-size: .78rem; color: var(--muted); line-height: 1.4; }
.wl button em { font-style: normal; font-size: .74rem; font-weight: 600; color: var(--text); opacity: .7; margin-top: 2px; }
.wl button:hover { background: #fff; }
.wl button[aria-checked="true"] { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
@media (max-width: 600px) { .wl { grid-template-columns: 1fr; } .wl button { grid-template-columns: auto 1fr; align-items: baseline; column-gap: 10px; } .wl button em { grid-column: 2; } }
/* แพ็กเกจและการสมัคร */
.bill-cur { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bill-cur b { font-size: 1.05rem; }
.bill-cur p { margin: 4px 0 0; }
.bill-warn { color: #b42318; font-size: .86rem; }
.bill-off { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: #fff7e6; color: #8a5a00; font-size: .88rem; }
.dialog-body section.plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; border-bottom: 0; }
.plan-opt { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.plan-opt.cur { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.plan-opt.pop-plan { background: linear-gradient(180deg, #f5f3ff, #fff 60%); }
.plan-opt .badge { position: absolute; top: 10px; right: 10px; font-size: .7rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: var(--accent-text); }
.plan-opt .pn { font-size: 1rem; }
.plan-opt .pp span { font-size: 1.35rem; font-weight: 700; }
.plan-opt .pp small { color: var(--muted); margin-left: 2px; }
.plan-opt .px { margin: 2px 0 0; font-size: .84rem; font-weight: 600; }
.plan-opt .pl { margin: 0 0 8px; font-size: .78rem; color: var(--muted); flex: 1; }
.plan-opt .btn { margin-top: auto; }
.plan-opt .btn:disabled { opacity: .45; cursor: default; }
.plan-opt.cur .btn:disabled { opacity: 1; background: transparent; color: var(--text); }
/* หน้าคุยด้วยเสียง: ปุ่มเลือกเสียง + หน้าต่างเลือกเสียง */
.v-top { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 520px; }
.v-set { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .85); display: grid; place-items: center; cursor: pointer; color: var(--text); }
.v-set svg { width: 18px; height: 18px; }
.vp { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: rgba(15, 23, 42, .25); animation: fade .15s; }
.vp-card { width: min(420px, 100%); max-height: min(88vh, 720px); overflow-y: auto; background: #fff; border-radius: 22px; padding: 22px 18px 18px; box-shadow: 0 24px 70px rgba(31, 41, 80, .25); }
.vp-card h2 { margin: 0; font-size: 1.2rem; text-align: center; }
.vp-sub { margin: 4px 0 6px; text-align: center; color: var(--muted); font-size: .86rem; }
.vp-card h6 { margin: 14px 4px 6px; font-size: .78rem; color: var(--muted); font-weight: 600; }
.vp-list { display: grid; gap: 4px; }
.vp-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid transparent; border-radius: 14px; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.vp-row:hover { background: rgba(15, 23, 42, .04); }
.vp-row[aria-pressed="true"] { border-color: var(--accent); background: rgba(15, 23, 42, .03); }
.vp-row .tx { flex: 1; min-width: 0; display: grid; }
.vp-row .tx b { font-weight: 600; }
.vp-row .tx span { font-size: .8rem; color: var(--muted); }
.vp-dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #f1f2f6; color: var(--muted); flex: none; }
.vp-dot svg { width: 18px; height: 18px; }
.vp-row.playing .vp-dot { background: var(--accent); color: var(--accent-text); animation: orb-think 1.2s ease-in-out infinite; }
.vp-row .check { width: 20px; color: var(--accent); visibility: hidden; }
.vp-row[aria-pressed="true"] .check { visibility: visible; }
.vp-done { margin-top: 16px; }
/* Discover: ฟีดข่าวตามหมวดและประเทศ */
.discover { max-width: 860px; margin: 0 auto; }
.dv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 12px; }
.dv-head h2 { margin: 0; }
.dv-sub { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }
.dv-actions { display: flex; align-items: center; gap: 8px; }
.dv-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.dv-actions .btn svg { width: 16px; height: 16px; }
.dv-country { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 6px 0 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .8); cursor: pointer; }
.dv-country svg { width: 16px; height: 16px; color: var(--muted); }
.dv-country select { border: 0; background: none; font: inherit; font-size: .88rem; color: var(--text); outline: none; cursor: pointer; max-width: 180px; }
.dv-cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 12px; }
.dv-cats::-webkit-scrollbar { display: none; }
.dv-cats button { flex: none; border: 1px solid var(--line); background: rgba(255, 255, 255, .7); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: .88rem; color: var(--text); cursor: pointer; }
.dv-cats button[aria-selected="true"] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.dv-feed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dv-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, .82); }
.dv-card:hover { background: #fff; box-shadow: 0 8px 26px rgba(31, 41, 80, .08); }
.dv-hero { grid-column: 1 / -1; padding: 18px 20px; }
.dv-link { display: flex; gap: 14px; color: inherit; text-decoration: none; flex: 1; align-items: flex-start; }
.dv-txt { display: grid; gap: 6px; flex: 1; min-width: 0; }
.dv-img { width: 108px; height: 80px; object-fit: cover; border-radius: 12px; flex: none; background: #eef0f4; }
.dv-hero .dv-link { flex-direction: column; }
.dv-hero .dv-img { width: 100%; height: auto; aspect-ratio: 16 / 7; max-height: 280px; border-radius: 14px; }
.dv-link b { font-size: 1rem; line-height: 1.45; font-weight: 600; }
.dv-hero .dv-link b { font-size: 1.25rem; }
.dv-link p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dv-src { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted); }
.dv-src .fav { width: 16px; height: 16px; }
.dv-src em { font-style: normal; }
.dv-src em::before { content: "·"; margin-right: 6px; }
.dv-tools { display: flex; gap: 8px; }
.dv-tools .btn { height: 32px; padding: 0 12px; font-size: .82rem; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--text); }
.dv-tools .btn svg { width: 14px; height: 14px; }
.dv-skel { min-height: 130px; gap: 10px; }
.dv-skel i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #eceef3, #f6f7fa, #eceef3); background-size: 220% 100%; animation: shimmer 1.4s linear infinite; }
.dv-skel i:nth-child(1) { width: 40%; } .dv-skel i:nth-child(2) { width: 92%; height: 16px; } .dv-skel i:nth-child(3) { width: 70%; }
.dv-empty { padding: 30px 0; text-align: center; }
@media (max-width: 720px) {
  .dv-feed { grid-template-columns: 1fr; }
  .dv-actions { width: 100%; }
  .dv-country { flex: 1; min-width: 0; }
  .dv-country select { max-width: none; width: 100%; }
  .dv-hero .dv-link b { font-size: 1.1rem; }
  .dv-img { width: 92px; height: 72px; }
}
.build-ideas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 640px; margin: 0 auto; padding: 0 12px; }
.build-idea { border: 1px solid var(--line); background: rgba(255, 255, 255, .7); border-radius: 999px; padding: 8px 14px; font: inherit; font-size: .88rem; color: var(--text); cursor: pointer; }
.build-idea:hover { background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .06); }
@media (max-width: 820px) {
  .cv-head { flex-wrap: wrap; row-gap: 4px; }
  .cv-ver { margin-left: 4px; }
  .build-ideas { margin-top: 4px; }
}
@media (min-width: 821px) and (max-width: 1400px) { body.cv-open .side, body.cv-open .scrim { display: none; } }
.tools button.cont { background: var(--accent); color: var(--accent-text); padding: 5px 12px; }
.tools button.cont:hover { background: #333; color: #fff; }
.tools button.cont span { display: inline !important; }
/* ไม่มีข้อความใต้ช่องพิมพ์แล้ว: เว้นขอบล่างเพิ่มนิดหน่อย · ลิงก์นโยบายย้ายไปท้ายแถบข้าง (Google ต้องเห็นลิงก์นโยบายในหน้าแรก) */
.composer-wrap { padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
.side-legal { display: flex; gap: 6px; padding: 0 6px; font-size: .72rem; color: var(--muted); }
.side-legal a { color: var(--muted); text-decoration: none; }
.side-legal a:hover { color: var(--text); text-decoration: underline; }

/* ================= ชุด Claude: คำทักทาย, เมนู +/โมเดล, โหมดทำงาน, โปรเจกต์, โหมดเสียง ================= */

/* คำทักทายตามเวลา */
.welcome .wordmark.greet { font-size: 2.15rem; font-weight: 500; letter-spacing: -.015em; gap: 14px; flex-wrap: wrap; justify-content: center; text-align: center; line-height: 1.25; }
@media (max-width: 820px) { .welcome .wordmark.greet { font-size: 1.6rem; gap: 10px; } }

/* เมนู + และเมนูโมเดลแบบ Claude: กะทัดรัด มีเส้นคั่น เมนูย่อย และสวิตช์ */
.pop hr.sep { border: 0; border-top: 1px solid var(--line); margin: 5px 8px; }
.pop .arrow { display: grid; place-items: center; color: var(--muted); }
.pop .arrow svg, .pop .back svg { width: 16px; height: 16px; }
.pop button.back { color: var(--muted); }
.pop button.back .tx b { font-weight: 600; color: var(--text); }
.pop .val { color: var(--muted); font-size: .85rem; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.pop .hint { color: var(--muted); font-size: .76rem; white-space: nowrap; }
.pop button.row { padding-top: 10px; padding-bottom: 10px; }
#plusMenu { min-width: 270px; }
#modelMenu { min-width: 300px; }
#plusMenu .tx b, #modelMenu button.row .tx b { font-size: .92rem; }
.model-btn .eff { color: var(--muted); font-weight: 400; font-size: .85em; margin-left: 2px; }
@media (max-width: 820px) { .model-btn .eff { display: none; } }

/* โหมดแชท / โหมดทำงาน */
.mode-switch { display: inline-flex; flex: none; padding: 3px; gap: 2px; border-radius: 12px; background: rgba(0, 0, 0, .05); align-self: center; }
.mode-switch button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; font: inherit; font-size: .84rem; color: var(--muted); padding: 5px 10px; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.mode-switch button svg { width: 15px; height: 15px; }
.mode-switch button[aria-checked="true"] { background: #fff; color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, .1); }
.composer.recording .mode-switch, .composer.transcribing .mode-switch, .composer.dictating .mode-switch { display: none; }
@media (max-width: 820px) {
  .mode-switch button[data-mode="chat"] { display: none; }
  .mode-switch button span { display: none; }
  .mode-switch { background: none; padding: 0; }
  .mode-switch button { padding: 7px; border-radius: 50%; }
  .mode-switch button[aria-checked="true"] { background: var(--accent); color: var(--accent-text); }
}

/* แผนงานของโหมดทำงาน */
.plan { border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; margin: 0 0 14px; background: rgba(255, 255, 255, .55); }
.plan-title { display: flex; align-items: center; gap: 8px; font-size: .9rem; margin-bottom: 6px; }
.plan-title svg { width: 17px; height: 17px; }
.plan-title span { margin-left: auto; color: var(--muted); font-size: .8rem; }
.plan-step { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: .88rem; color: var(--muted); }
.plan-step .dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; flex: none; }
.plan-step .dot svg { width: 12px; height: 12px; }
.plan-step .dot .spinner { width: 12px; height: 12px; border-width: 2px; }
.plan-step.done { color: var(--text); }
.plan-step.done .dot { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.plan-step.now { color: var(--text); font-weight: 500; }
.plan-step.now .dot { border-color: transparent; }

/* การ์ดเอกสาร (แทนกล่องโค้ด Markdown) */
.doc-card { display: flex; align-items: center; gap: 12px; width: min(100%, 460px); margin: 4px 0 14px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .75); cursor: pointer; text-align: left; font: inherit; color: var(--text); box-shadow: 0 4px 16px rgba(31, 41, 80, .06); }
.doc-card:hover { background: #fff; }
.dc-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent); color: var(--accent-text); flex: none; }
.dc-icon svg { width: 20px; height: 20px; }
.dc-tx { flex: 1; min-width: 0; display: grid; }
.dc-tx b { font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dc-tx span { color: var(--muted); font-size: .8rem; }
.dc-open { font-size: .82rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; }

/* หน้าโปรเจกต์ */
.projects, .project { width: min(100%, 980px); margin: 0 auto; padding: 18px 4px 40px; }
.pj-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.pj-head h2 { margin: 0; font-size: 1.6rem; font-weight: 600; }
.pj-head .btn svg, .pj-empty svg { vertical-align: -3px; }
.pj-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.pj-card { display: grid; gap: 6px; text-align: left; padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255, 255, 255, .7); font: inherit; color: var(--text); cursor: pointer; min-height: 120px; align-content: start; }
.pj-card:hover { background: #fff; box-shadow: 0 6px 20px rgba(31, 41, 80, .08); }
.pj-card b { font-size: 1.02rem; font-weight: 600; }
.pj-desc { color: var(--muted); font-size: .85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pj-meta { color: var(--muted); font-size: .78rem; margin-top: auto; }
.pj-empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.pj-empty > svg { width: 44px; height: 44px; margin-bottom: 8px; }
.pj-empty h3 { color: var(--text); margin: 6px 0; font-weight: 600; }
.pj-empty p { max-width: 420px; margin: 0 auto 18px; line-height: 1.6; }
.pj-back { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--muted); font: inherit; font-size: .88rem; cursor: pointer; padding: 4px 0; }
.pj-back svg { width: 16px; height: 16px; }
.pj-back:hover { color: var(--text); }
.pj-name { display: block; width: 100%; border: 0; background: none; font: inherit; font-size: 1.7rem; font-weight: 600; color: var(--text); padding: 6px 0 14px; outline: none; }
.pj-name::placeholder { color: var(--muted); font-weight: 500; }
.pj-grid { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
.pj-chats h4, .pj-box h4 { margin: 0 0 10px; font-size: .9rem; font-weight: 600; }
.pj-chat { display: flex; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; color: var(--text); cursor: pointer; border-radius: 10px; }
.pj-chat:hover { background: rgba(255, 255, 255, .7); }
.pj-chat span { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.pj-side { display: grid; gap: 12px; }
.pj-box { padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .6); }
.pj-box-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pj-box-head h4 { margin: 0; }
.pj-ins { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: .88rem; resize: vertical; background: #fff; color: var(--text); }
.pj-files { display: grid; gap: 6px; }
.pj-file { display: flex; align-items: center; gap: 8px; padding: 6px 4px 6px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: .85rem; }
.pj-file span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pj-file em { font-style: normal; color: var(--muted); font-size: .75rem; white-space: nowrap; }
.pj-file .icon-btn { width: 28px; height: 28px; }
.pj-del { border: 0; background: none; color: var(--danger); font: inherit; font-size: .85rem; cursor: pointer; justify-self: start; padding: 4px 2px; }
.btn.small { height: 30px; padding: 0 12px; font-size: .8rem; }
.muted.small { font-size: .78rem; margin: 8px 0 0; }
@media (max-width: 820px) { .pj-grid { grid-template-columns: 1fr; } .pj-side { order: -1; } .pj-name { font-size: 1.4rem; } }

/* ปุ่มเริ่มโหมดเสียงในช่องพิมพ์ */
.voice-btn { background: var(--accent); color: var(--accent-text); }
.voice-btn:hover { background: #333; color: #fff; }
.voice-btn svg { width: 19px; height: 19px; }

/* โหมดคุยด้วยเสียง: ลูกบอลแก้วที่ขยับตามเสียง + คำบรรยาย */
.voice-view { flex-direction: column; align-items: center; justify-content: space-between; padding: 28px 20px calc(30px + env(safe-area-inset-bottom)); gap: 18px; }
.v-top { font-weight: 600; color: var(--muted); font-size: .95rem; }
.v-orb { cursor: pointer; display: grid; place-items: center; width: min(62vw, 280px); aspect-ratio: 1; margin-top: 4vh; -webkit-tap-highlight-color: transparent; }
.orb { --lv: 0; position: relative; width: 78%; aspect-ratio: 1; border-radius: 50%; transform: scale(calc(1 + var(--lv) * .32)); transition: transform .08s linear;
  background: radial-gradient(circle at 35% 30%, #ffffff 0 8%, #cfe3ff 22%, #7aa7ff 52%, #4a63e8 78%, #2d2f8f 100%);
  box-shadow: 0 30px 70px rgba(60, 90, 220, .35), inset 0 -12px 30px rgba(20, 20, 80, .35), inset 0 10px 24px rgba(255, 255, 255, .6); }
.orb i { position: absolute; inset: 8%; border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; background: radial-gradient(circle at 60% 40%, rgba(255, 255, 255, .55), transparent 60%); mix-blend-mode: screen; animation: orb-spin 9s linear infinite; }
.orb i:nth-child(2) { inset: 14%; animation-duration: 13s; animation-direction: reverse; background: radial-gradient(circle at 30% 70%, rgba(150, 210, 255, .6), transparent 60%); }
.orb i:nth-child(3) { inset: 20%; animation-duration: 6s; background: radial-gradient(circle at 70% 70%, rgba(190, 160, 255, .55), transparent 60%); }
@keyframes orb-spin { to { transform: rotate(360deg); } }
.voice-view[data-mood="thinking"] .orb { animation: orb-think 1.6s ease-in-out infinite; }
.voice-view[data-mood="thinking"] .orb i { animation-duration: 2.5s; }
.voice-view[data-mood="idle"] .orb { filter: saturate(.55) brightness(1.05); }
@keyframes orb-think { 50% { transform: scale(.92); } }
.v-status { font-size: 1.05rem; color: var(--muted); min-height: 1.5em; text-align: center; }
.v-caption { max-width: 640px; min-height: 4.6em; font-size: 1.25rem; line-height: 1.55; text-align: center; color: var(--text); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.v-caption[data-who="you"] { color: var(--muted); font-style: italic; }
.v-controls { display: flex; gap: 22px; }
.v-btn { width: 62px; height: 62px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .85); display: grid; place-items: center; cursor: pointer; color: var(--text); box-shadow: 0 6px 20px rgba(31, 41, 80, .1); }
.v-btn svg { width: 24px; height: 24px; }
.v-btn.off { background: var(--text); color: #fff; }
.v-end { background: #e5484d; color: #fff; border-color: transparent; padding: 0; height: 62px; }
.v-end:hover { background: #d93d42; }
@media (max-width: 820px) { .v-caption { font-size: 1.1rem; } }

/* ================= แถบด้านข้างแบบ ChatGPT: แผงเต็มความสูง + ย่อเป็นแถบไอคอน ================= */
.brand { border: 0; background: none; font: inherit; font-weight: 600; font-size: 1.08rem; color: var(--text); padding: 4px 6px; border-radius: 10px; cursor: pointer; position: relative; }
.brand .open-ico { display: none; width: 22px; height: 22px; }
.side-top { justify-content: space-between; padding: 2px 0 10px; }
.side-top .collapse { color: var(--muted); }
.rail-search { display: none; }
.new-chat { white-space: nowrap; }
.new-chat span { overflow: hidden; text-overflow: ellipsis; }

@media (min-width: 821px) {
  .side {
    margin: 0 !important; height: 100%; width: 260px; border-radius: 0; border: 0; border-right: 1px solid rgba(15, 23, 42, .08);
    box-shadow: none; background: rgba(251, 251, 252, .82); padding: 8px 8px 10px; overflow: hidden;
    transition: width .2s ease, padding .2s ease;
  }
  .new-chat { padding: 9px 12px; font-size: .92rem; }
  .new-chat:hover, .chat-item:hover, .chat-item.active { background: rgba(0, 0, 0, .05); box-shadow: none; }
  .top .menu-btn, .app.collapsed .top .menu-btn { display: none; }

  /* ย่อ: เหลือแถบไอคอนกว้าง 56px */
  .app.collapsed .side { width: 56px; padding: 8px 6px 10px; }
  .app.collapsed .side-top { justify-content: center; }
  .app.collapsed .side-top .collapse,
  .app.collapsed .brand span,
  .app.collapsed .new-chat span,
  .app.collapsed .search-box,
  .app.collapsed .chats,
  .app.collapsed .side-legal,
  .app.collapsed .account .who2,
  .app.collapsed .account > svg:last-child:not(:first-child) { display: none; }
  .app.collapsed .rail-search { display: flex; }
  .app.collapsed .new-chat { justify-content: center; padding: 10px 0; }
  .app.collapsed .side-foot { margin-top: auto; }
  .app.collapsed .account { justify-content: center; padding: 6px 0; }
  .app.collapsed .account > svg { margin: 0; }
  /* ชี้ที่โลโก้ตอนย่อ: เปลี่ยนเป็นไอคอน "เปิดแถบ" แบบ ChatGPT */
  .app.collapsed .brand { padding: 5px; }
  .app.collapsed .brand:hover { background: rgba(0, 0, 0, .05); }
  .app.collapsed .brand:hover img { display: none; }
  .app.collapsed .brand:hover .open-ico { display: block; margin: 4px; }
  .app.collapsed .side-foot .pop { left: 0; right: auto; min-width: 240px; }
}
.side-legal { flex-wrap: wrap; }
.side-legal a { white-space: nowrap; }

/* แถบบนแบบ ChatGPT/Claude/Perplexity: ปุ่มน้อยที่สุด ไม่ซ้ำกับแถบด้านข้าง */
.top .auth-btns .avatar-btn { display: none; }          /* บัญชีอยู่มุมล่างของแถบด้านข้างแล้ว */
.main.home .more-wrap, .main.home #shareBtn { display: none; }  /* หน้าแรกยังไม่มีอะไรให้แชร์/จัดการ */
.main:not(.home) #tempBtn:not(.on) { display: none; }  /* แชทไม่ระบุตัวตน: เริ่มได้จากหน้าแรก (แสดงค้างไว้ถ้ากำลังใช้อยู่) */
@media (min-width: 821px) { #newChatTop { display: none; } }  /* คอม: แชทใหม่อยู่ในแถบด้านข้าง */
@media (max-width: 820px) { .main.home #newChatTop { display: none; } }  /* มือถือ: ปุ่มแชทใหม่เฉพาะตอนอยู่ในแชท */

/* ยังไม่เข้าสู่ระบบ (แบบ ChatGPT): แถบบนมีแค่ปุ่มลงชื่อเข้าใช้ / สร้างบัญชีฟรี · กล่องชวนเข้าสู่ระบบท้ายแถบด้านข้าง */
.app.guest #tempBtn, .app.guest .top .quota { display: none; }
.top .auth-btns .btn { border-radius: 999px; }
.side-guest { margin: 8px -8px -10px; padding: 16px 16px 14px; border-top: 1px solid rgba(15, 23, 42, .08); }
.side-guest b { display: block; font-size: 1rem; font-weight: 600; line-height: 1.35; }
.side-guest p { margin: 6px 0 12px; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.side-guest .btn { width: 100%; height: 42px; border-radius: 999px; background: rgba(0, 0, 0, .06); border: 0; font-weight: 500; }
.side-guest .btn:hover { background: rgba(0, 0, 0, .1); }
.app.collapsed .side-guest { display: none; }
@media (max-width: 820px) { .side-guest { margin: 8px -10px -12px; } }
.main.home .top .title { visibility: hidden; }
/* มือถือ: ช่องพิมพ์อยู่บรรทัดบนเต็มความกว้าง ปุ่มต่างๆ อยู่บรรทัดล่าง (แบบแอป ChatGPT/Claude) */
@media (max-width: 820px) {
  .composer .row { flex-wrap: wrap; row-gap: 2px; }
  .composer .row > textarea, .composer .row > .rec { order: -1; flex: 1 0 100%; }
  .composer .row > textarea { padding: 8px 8px 4px; }
  .composer .row > .model-btn { margin-left: auto; }
}

/* ================= บัญชีท้ายแถบด้านข้าง + ค้นหาบนหัวแถบ (แบบ ChatGPT) ================= */
.side-top { gap: 2px; }
.side-top .brand { margin-right: auto; }
.side-search-btn { color: var(--muted); }
.side .search-box { display: none; }
.side.searching .search-box { display: block; }
.acc-row { display: flex; align-items: center; gap: 6px; }
.acc-row .account { flex: 1; min-width: 0; }
.upgrade-pill { flex: none; border: 1px solid var(--line); background: #fff; color: var(--text); font: inherit; font-size: .8rem; font-weight: 500; padding: 6px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.upgrade-pill:hover { background: rgba(0, 0, 0, .04); }
.upgrade-link { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; font: inherit; font-size: .9rem; font-weight: 500; color: #2f6fe4; padding: 6px 10px; border-radius: 10px; cursor: pointer; }
.upgrade-link svg { width: 17px; height: 17px; }
.upgrade-link:hover { background: rgba(47, 111, 228, .08); }
.side-foot .pop { width: auto; max-width: none; }
@media (min-width: 821px) {
  .side { -webkit-backdrop-filter: none; backdrop-filter: none; background: #f9f9fa; }
  .app.collapsed .side-top .side-search-btn, .app.collapsed .upgrade-pill { display: none; }
  .app.collapsed .side-top { flex-direction: column; }
  /* แถบไอคอน: เมนูบัญชีเปิดออกทางขวาของแถบ ไม่ถูกตัด */
  .app.collapsed .side-foot .pop { position: fixed; left: 62px; right: auto; bottom: 12px; width: 280px; }
}
@media (max-width: 820px) {
  .side-foot .pop { left: 0; right: 0; width: auto; max-width: none; } /* มือถือ: เมนูบัญชีอยู่ในแถบด้านข้าง ไม่ลอยกลางจอ */
  .upgrade-link span { display: none; }
  .upgrade-link { padding: 8px; }
}

/* ปุ่มอัปเกรดท้ายแถบด้านข้าง: เรียบ ไม่ลอย */
.upgrade-pill { background: transparent; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid rgba(15, 23, 42, .14); height: 30px; padding: 0 12px; line-height: 1; }
.upgrade-pill:hover { background: rgba(0, 0, 0, .05); }

/* โหมดทำงาน: หน้าแรกของตัวเอง + ป้ายในรายการแชท */
.work-home .wk-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--accent); color: var(--accent-text); display: grid; place-items: center; }
.work-home .wk-ico svg { width: 24px; height: 24px; }
/* คำอธิบายใต้หัวข้อหน้าแรกของโหมดทำงาน/Code: อยู่กลางพอดี บรรทัดยาวเท่าๆ กัน (.welcome p ตั้ง margin ซ้ายขวาเป็น 0 จึงต้องเจาะจงกว่า) */
.welcome .work-sub { max-width: 600px; margin: 0 auto 26px; padding: 0 16px; color: var(--muted); line-height: 1.6; text-align: center; font-size: 1rem; text-wrap: balance; }
.chat-item .open .wk-tag { display: inline-grid; vertical-align: -3px; margin-right: 6px; color: var(--muted); }
.chat-item .open .wk-tag svg { width: 15px; height: 15px; }
.new-chat.active { background: rgba(0, 0, 0, .06); }
@media (max-width: 820px) { .welcome .work-sub { margin-top: 8px; font-size: .92rem; } }

/* ---------- ความลื่นไหล: ปุ่มตอบสนองนุ่มๆ, เปลี่ยนหน้าแบบลอยขึ้น, หน้าต่างค่อยๆ เด้งขึ้น ---------- */
:root { --ease: cubic-bezier(.22, .8, .24, 1); }
button, .btn, .chat-item, .new-chat, .icon-btn, .pj-card, .plan-opt, .doc-card, .build-idea, .wl button, .vp-row, .rel, .src-sum, .cc-toggle, .sp-item {
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), box-shadow .25s var(--ease), transform .16s var(--ease), opacity .2s var(--ease);
}
button:active:not(:disabled), .btn:active { transform: scale(.96); }
/* แถวยาวเต็มความกว้าง: ยุบนิดเดียวพอ */
.pop button:active:not(:disabled), .vp-row:active, .chat-item button:active, .set-tabs button:active, .wl button:active, .new-chat:active { transform: scale(.985); }
.mode-tabs button:active, .tools button:active { transform: scale(.94); }
.pj-card:hover, .plan-opt:hover, .build-idea:hover, .doc-card:hover { transform: translateY(-1px); }

/* เปลี่ยนหน้า (แชท/หน้าแรก/Discover/โปรเจกต์/แท็บตั้งค่า): เนื้อหาค่อยๆ ลอยขึ้นทีละส่วน */
.view-in > * { animation: view-in .38s var(--ease) both; }
.view-in > *:nth-child(2) { animation-delay: .03s; }
.view-in > *:nth-child(3) { animation-delay: .06s; }
.view-in > *:nth-child(n+4) { animation-delay: .09s; }
.welcome.view-in > *, .view-in .welcome > * { animation: view-in .45s var(--ease) both; }
.view-in .welcome > *:nth-child(2) { animation-delay: .05s; }
.view-in .welcome > *:nth-child(3) { animation-delay: .1s; }
@keyframes view-in { from { opacity: 0; transform: translateY(10px); } }

/* หน้าต่างและเมนู: เด้งขึ้นนุ่มๆ */
.modal.open .dialog, .vp .vp-card { animation: dlg-in .3s var(--ease) both; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.pop.open { animation: popin .2s var(--ease) both; }
.voice-view.open .v-orb { animation: dlg-in .45s var(--ease) both; }

/* แถบหมวด: พื้นสีขาวเลื่อนไปหาแท็บที่เลือก */
.mode-tabs { position: relative; }
.mt-pill { position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 9px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
  transition: transform .34s var(--ease), width .34s var(--ease); pointer-events: none; }
.mode-tabs button { position: relative; z-index: 1; }
.mode-tabs button[aria-selected="true"] { background: transparent; box-shadow: none; }

/* ช่องพิมพ์: ยกขึ้นนิดๆ ตอนกำลังพิมพ์ */
.composer { transition: box-shadow .25s var(--ease), border-color .25s var(--ease); }
.composer:focus-within { box-shadow: 0 10px 34px rgba(31, 41, 80, .14), 0 1px 3px rgba(31, 41, 80, .06); }

/* แถบด้านข้าง: แชทที่เลือกเปลี่ยนพื้นแบบนุ่มๆ, เมนูมือถือเลื่อนเข้า */
.chat-item { transition: background-color .2s var(--ease); }

/* คนที่ตั้งเครื่องให้ลดการเคลื่อนไหว: ปิดแอนิเมชันทั้งหมด (อยู่ท้ายสุดให้ชนะทุกกฎ) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}