/* แชตหนูดี — ทับ studio_chat.css ด้วย token เว็บหลัก (site_v1/tokens.css) + หนูดี (ลอย 21 ต.ค. 69)
   r2: วางแบบหน้าแชต claude.ai — เต็มจอสีเดียว ไม่มีการ์ด/กรอบ · คอลัมน์เดียวกลางจอ 768px · กล่องพิมพ์ลอยติดล่าง
   แก้สี/ฟอนต์ที่ :root ที่เดียว · หัวข้อไทยระยะบรรทัด 1.5 · เนื้อความ 1.75 · ไม่มีตัวเอียง */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --font: Sarabun, "Noto Sans Thai", system-ui, sans-serif;
  --paper: #F6F8F7; --side: #EEF3F1; --card: #FFFFFF; --raised: #FFFFFF;
  --ink: #1B2330; --muted: #5B6672; --line: #E1E8E5; --soft: #EEF3F1; --hover: #E4EEEA;
  --accent: #0E6B5A; --accent-ink: #FFFFFF; --accent-soft: #E1F0EC; --link: #09493E;
  --mint: #7FE3C0; --user: #E4EEEA; --user-ink: #1B2330;
  --col: 768px;
  --radius: 18px; --r-ctl: 12px;
  --shadow: 0 1px 2px rgba(14, 60, 50, .05), 0 6px 20px rgba(14, 60, 50, .06);
  --shadow-pop: 0 16px 40px rgba(14, 60, 50, .14);
}
em, i, cite { font-style: normal; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ── เปลือก: หัวเว็บ + ห้องแชตเต็มจอสีเดียว (ไม่มีการ์ด ไม่มีขอบข้าง) · ทั้งหน้าไม่เลื่อน เลื่อนเฉพาะบทสนทนา */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body.nd-chat-page { display: flex; flex-direction: column; height: 100dvh; background: var(--paper); font: 16px/1.75 var(--font); }
body.nd-chat-page .nh { position: relative; flex: none; }
.nd-app { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat { position: relative; flex: 1; height: auto; min-height: 0; }
.chat-scroll { padding: 0 16px; overflow-anchor: none; }  /* กันเบราว์เซอร์ยึดตำแหน่งเดิมจนหลุดจากข้อความล่าสุด */
.chat-col { max-width: var(--col); }
.chat > .composer-wrap { width: min(var(--col), calc(100% - 32px)); display: flex; flex-direction: column; }
.composer-wrap > .nd-err { order: 0; }
.composer-wrap > .composer { order: 1; }
.composer-wrap > .ideas { order: 2; }
.composer-wrap > .composer-bar { order: 3; }

/* ── หนูดี: ไม่มีพื้น/กรอบ ลอยบนพื้นหน้าเดียวกัน · เงาเท้าบาง ๆ อย่างเดียว */
.nd-stage { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; flex: none; min-height: 0; pointer-events: none; }
.nd-floor { display: none; }
.nd-mascot { position: relative; height: clamp(170px, 30vh, 300px); width: auto; aspect-ratio: 896 / 1120; flex: none; }
.nd-mascot::before { content: ""; position: absolute; left: 50%; bottom: 1%; width: 62%; height: 7%; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(14, 75, 62, .20), transparent); }
.mascot-slot img, .mascot-slot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .18s ease; }
.mascot-slot .clip { opacity: 0; pointer-events: none; }
.mascot-slot .clip.on { opacity: 1; }
.mascot-slot .still.hide { opacity: 0; }
.nd-plate { position: relative; z-index: 1; display: none; flex-direction: column; align-items: center; gap: 6px; text-align: center; pointer-events: auto; }
.nd-name { margin: 0; font-size: 1rem; font-weight: 800; line-height: 1.5; color: var(--ink); }
.nd-name span { display: block; font-size: .82rem; font-weight: 600; color: var(--muted); }
.nd-status { display: inline-flex; align-items: center; gap: 8px; margin: 0; min-height: 30px; padding: 2px 12px; border-radius: 99px;
  background: var(--card); border: 1px solid var(--line); font-size: .86rem; font-weight: 600; color: var(--link); }
.nd-status i { width: 8px; height: 8px; border-radius: 50%; background: #1FA37F; box-shadow: 0 0 0 4px rgba(31, 163, 127, .16); }
.nd-status[data-state="thinking"] i { background: #E0A100; box-shadow: 0 0 0 4px rgba(224, 161, 0, .18); animation: nd-pulse 1s ease-in-out infinite; }
@keyframes nd-pulse { 50% { transform: scale(1.35); opacity: .6; } }
@keyframes nd-pop { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: none; } }
.nd-stage .nd-mascot { animation: nd-pop .4s cubic-bezier(.2, .8, .2, 1) both; }
body.has-thread .nd-stage .nd-mascot { animation-name: nd-pop2; }  /* ชื่อใหม่ = เล่นซ้ำตอนย่อไปข้าง */
@keyframes nd-pop2 { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: none; } }

/* หน้าว่าง (แบบหน้าว่าง claude.ai): หนูดีตัวใหญ่ → คำทักทาย → กล่องพิมพ์ → ชิปคำถาม อยู่กลางจอทั้งก้อน */
.chat.is-empty { justify-content: center; padding-bottom: 7vh; }
.chat.is-empty .chat-scroll { flex: none; }
.chat.is-empty .chat-col { min-height: 0; }
.chat.is-empty .greet { padding-top: 0; }
.chat.is-empty .composer-wrap { background: transparent; padding-top: 4px; }
.chat.is-empty .ideas { display: flex; flex-wrap: nowrap; justify-content: center; gap: 6px; margin: 14px 0 4px; }
.chat.is-empty .idea { padding: 7px 12px; min-height: 38px; font-size: .9rem; gap: 6px; }  /* r3: หมวดสั้น ไม่ต้องตัดคำ */
.idea .t { white-space: nowrap; }
.chat.is-empty .composer-bar .grow { display: none; }
.chat.is-empty .composer-bar { justify-content: center; }

/* เริ่มคุยแล้ว: กล่องพิมพ์ลอยติดล่าง มีพื้นจางขึ้นจากเนื้อหา (ไม่มีเส้นคั่น) */
.chat:not(.is-empty) .composer-wrap { margin-top: -28px; padding-top: 28px; background: linear-gradient(180deg, rgba(246, 248, 247, 0), var(--paper) 30px); }
.chat:not(.is-empty) .thread { padding: 28px 0 40px; }
.chat:not(.is-empty) .chat-scroll { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px); mask-image: linear-gradient(180deg, transparent 0, #000 18px); }  /* ขอบบนจางแทนเส้นตัด */
.bot { display: none; }  /* ข้อความหนูดีไม่มีบับเบิล/ไอคอน — ตัวหนูดีอยู่ข้างคอลัมน์ (คอม) หรือแถบบน (มือถือ) */

/* คอมกว้าง: หนูดีลอยข้างซ้ายนอกคอลัมน์ ไม่มีกรอบ ยังขยับตามท่า */
@media (min-width: 1180px) {
  body.has-thread .nd-stage { position: absolute; top: 28px; left: max(16px, calc(50% - var(--col) / 2 - 232px)); width: 200px; gap: 10px; }
  body.has-thread .nd-mascot { height: 236px; }
  body.has-thread .nd-plate { display: flex; }
}
/* จอแคบกว่า: หนูดีตัวเล็ก + ชื่อ/สถานะ เป็นแถบบนคอลัมน์ (พื้นเดียวกัน ไม่มีกรอบ) */
@media (max-width: 1179px) {
  body.has-thread .nd-stage { flex-direction: row; justify-content: flex-start; gap: 10px; width: min(var(--col), calc(100% - 32px)); margin: 4px auto 0; }
  body.has-thread .nd-mascot { height: 96px; }  /* r3: มือถือระหว่างคุย ≥96px ยังเห็นหน้าและท่าทาง */
  body.has-thread .nd-mascot::before { display: none; }
  body.has-thread .nd-plate { display: flex; flex-direction: row; align-items: center; gap: 10px; }
  body.has-thread .nd-name span { display: none; }
  body.has-thread .chat:not(.is-empty) .thread { padding-top: 8px; }
}

/* ── คำทักทาย + ชิปคำถาม */
/* r4.1: เหลือหัวข้อสั้น + ย่อหน้าเล็กสีรอง (พี่โยติ ตัวหนังสือเยอะ) */
.greet h1 { font-size: 2.1rem; font-weight: 800; line-height: 1.5; margin: 6px 0 18px; letter-spacing: 0; color: var(--ink); }
.ideas { gap: 10px; margin: 0 0 14px; }
.idea { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; min-height: 42px; border-radius: 99px; border: 1px solid var(--line); background: var(--card);
  font: 600 .95rem/1.4 var(--font); color: var(--ink); box-shadow: 0 1px 2px rgba(14, 60, 50, .05); transition: border-color .15s, background .15s, transform .15s; }
.idea svg.i { color: var(--accent); }
:where(.idea:hover:not(:disabled)) { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }

/* ── ฟองข้อความ */
.thread { gap: 28px; }
.msg.user .bubble { max-width: 80%; padding: 10px 18px; background: var(--user); color: var(--user-ink); border-radius: 22px; line-height: 1.65; }
.msg.studio .body { font-family: var(--font); font-size: 1.04rem; line-height: 1.75; }
.msg.studio .body p { margin: 0 0 .6em; }
.cites { margin: 10px 0 2px; }
.cites-h { margin: 0 0 6px; font-size: .82rem; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.cite { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; padding: 10px 12px 10px 12px; max-width: 520px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); color: var(--ink); text-decoration: none; line-height: 1.45; transition: border-color .15s, box-shadow .15s; }
.cite .ci { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.cite b { display: block; font-weight: 700; font-size: .96rem; }
.cite small { display: block; color: var(--muted); font-size: .8rem; }
.cite > svg.i:last-child { margin-left: auto; color: var(--muted); }
.cite:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.handoff { margin: 10px 0 2px; padding: 14px 16px; max-width: 520px; border-radius: 16px; background: #FFF8EC; border: 1px solid #F1E2C4; }
.handoff p { margin: 0 0 10px !important; font-size: .95rem; color: #5A4A2C; }
.handoff .row { gap: 8px; }
.act { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 12px; font: 700 .95rem/1 var(--font); text-decoration: none; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.act.primary { background: var(--accent); color: #fff; border-color: transparent; }
.act.primary:hover { background: #09493E; }
.act:not(.primary):hover { border-color: var(--accent); color: var(--link); }
.msg.studio.err .body > p { color: var(--bad); }
.retry { margin-top: 4px; }

/* ── กล่องพิมพ์ r3: ใบเดียว 2 ชั้นแบบ claude.ai — บน = ช่องพิมพ์ยืดได้ · ล่าง = เครื่องมือเงียบ ๆ + ป้ายโหมด + ส่ง/หยุด */
.composer { position: relative; flex-direction: column; align-items: stretch; gap: 4px; min-height: 0; padding: 12px 10px 10px; border-radius: 24px; border-color: #DCE5E1;
  box-shadow: 0 1px 2px rgba(14, 60, 50, .05), 0 10px 32px rgba(14, 60, 50, .09); transition: border-color .15s, box-shadow .15s; }
.composer:focus-within { border-color: #A9CFC4; box-shadow: 0 0 0 4px rgba(14, 107, 90, .08), 0 10px 32px rgba(14, 60, 50, .10); }
.composer textarea#q { width: 100%; flex: none; min-height: 52px; max-height: none; padding: 4px 10px 6px; font-family: var(--font); font-size: 1.04rem; line-height: 1.65; overflow-y: auto; }
.composer textarea#q::placeholder { color: #8A949E; }
.nd-tools { display: flex; align-items: center; gap: 4px; min-width: 0; }
.nd-tools .grow { flex: 1; min-width: 4px; }
.nd-tool { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; min-height: 0; padding: 0; border-radius: 12px; border: 1px solid transparent;
  background: transparent; color: var(--muted); transition: background .15s, color .15s, border-color .15s; }
.nd-tool svg.i { width: 20px; height: 20px; margin: 0; }
.nd-tool:hover, .nd-tool[aria-expanded="true"] { background: var(--soft); color: var(--ink); }
.nd-tool-text { display: inline-flex; gap: 6px; width: auto; padding: 0 12px 0 10px; border-color: var(--line); font: 600 .9rem/1 var(--font); color: var(--ink); }
#btn-plus { border-color: var(--line); }
.nd-tool.on { background: var(--bad-bg); color: var(--bad); animation: nd-rec 1.2s ease-in-out infinite; }
@keyframes nd-rec { 50% { box-shadow: 0 0 0 5px rgba(194, 55, 47, .12); } }
.nd-mode { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 30px; padding: 0 12px 0 10px; border-radius: 99px; background: var(--accent-soft); color: var(--link);
  font: 600 .82rem/1 var(--font); white-space: nowrap; }
.nd-mode svg.i { width: 15px; height: 15px; margin: 0; }
.nd-count { flex: none; font: 600 .8rem/1 var(--font); color: var(--muted); font-variant-numeric: tabular-nums; }
.nd-count.full { color: var(--bad); }
.send { width: 38px; height: 38px; margin-left: 2px; border-radius: 50%; background: var(--soft); color: #9AA5AE; transition: background .15s, color .15s, transform .1s; }
.send svg.i { width: 20px; height: 20px; margin: 0; }
.composer.has-text .send { background: var(--accent); color: #fff; }
.composer.has-text .send:hover { background: #09493E; }
.send:active { transform: scale(.94); }
.send .ic-stop { display: none; }
.composer.is-busy .send { background: var(--ink); color: #fff; }
.composer.is-busy .send .ic-send { display: none; }
.composer.is-busy .send .ic-stop { display: block; width: 16px; height: 16px; }
.composer-bar { margin-top: 6px; min-height: 30px; }
.composer-note { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: .8rem; color: var(--muted); text-align: right; line-height: 1.5; }
.nd-err { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: var(--bad-bg); color: var(--bad); font-size: .9rem; }

/* เมนูลอยเหนือกล่องพิมพ์ (ปุ่ม + และ คู่มือ) */
.nd-pop { position: absolute; left: 8px; bottom: calc(100% + 8px); z-index: 20; width: min(360px, calc(100vw - 32px)); max-height: min(60vh, 420px); overflow-y: auto;
  padding: 8px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-pop); }
.nd-pop[hidden] { display: none; }
.pop-h { margin: 4px 10px 6px; font-size: .8rem; font-weight: 700; color: var(--muted); line-height: 1.5; }
.pop-item, .pop-back { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 10px; border: none; border-radius: 12px; background: transparent;
  color: var(--ink); text-align: left; font: 500 .96rem/1.5 var(--font); }
.pop-item:hover, .pop-item:focus-visible, .pop-back:hover, .pop-back:focus-visible { background: var(--soft); outline: none; }
.pi-ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.pi-ic svg.i { width: 18px; height: 18px; margin: 0; }
.pi-t { flex: 1; min-width: 0; }
.pi-t b { display: block; font-weight: 700; }
.pi-t small { display: block; color: var(--muted); font-size: .82rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pop-item > svg.i:last-child { flex: none; color: var(--muted); width: 18px; height: 18px; }
.pop-back { min-height: 40px; color: var(--link); font-weight: 600; font-size: .88rem; }
.pop-back svg.i { width: 18px; height: 18px; margin: 0; }
.pop-empty { margin: 6px 10px 10px; color: var(--muted); font-size: .92rem; }

/* รายการคำถามตัวอย่างจากชิปหน้าแรก */
.nd-suggest { order: 3; margin: 10px 0 0; padding: 6px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.nd-suggest[hidden] { display: none; }
.sg-h { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; color: var(--accent); }
.sg-h b { flex: 1; color: var(--ink); font-size: .92rem; }
.sg-h svg.i { margin: 0; }
.sg-item { display: block; width: 100%; padding: 10px 12px; min-height: 44px; border: none; border-top: 1px solid var(--line); border-radius: 0; background: transparent; text-align: left;
  font: 500 .98rem/1.6 var(--font); color: var(--ink); }
.sg-item:hover, .sg-item:focus-visible { background: var(--soft); border-radius: 12px; border-top-color: transparent; }
.idea[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--link); }

/* แถวปุ่มใต้ข้อความ — คำตอบหนูดีเห็นเสมอ (เงียบ ๆ) · ข้อความลูกค้าขึ้นเมื่อชี้/โฟกัส */
.msg-tools { display: flex; align-items: center; gap: 2px; margin-top: 4px; min-height: 34px; }
.ma { display: inline-grid; place-items: center; width: 34px; height: 34px; min-height: 0; padding: 0; border: none; border-radius: 10px; background: transparent; color: var(--muted); }
.ma svg.i { width: 17px; height: 17px; margin: 0; }
.ma:hover { background: var(--soft); color: var(--ink); }
.ma[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); }
.ma-done { margin-left: 6px; font-size: .82rem; color: var(--link); font-weight: 600; }
.msg.studio .msg-tools { margin-left: -8px; }
.msg.studio .regen { display: none; }
.thread > .msg.studio:last-child .regen { display: inline-grid; }
.msg.user { flex-direction: column; align-items: flex-end; }
.msg.user .msg-tools { opacity: 0; transition: opacity .15s; }
.msg.user:hover .msg-tools, .msg.user:focus-within .msg-tools { opacity: 1; }
@media (hover: none) { .msg.user .msg-tools { opacity: .75; } }
.msg.user.editing .bubble, .msg.user.editing .msg-tools { display: none; }
.edit-box { width: min(100%, 560px); padding: 10px; border-radius: 20px; background: var(--card); border: 1px solid #A9CFC4; box-shadow: 0 0 0 4px rgba(14, 107, 90, .08); }
.edit-q { display: block; width: 100%; min-height: 48px; padding: 4px 8px; border: none; background: transparent; box-shadow: none; resize: none; font: 1rem/1.65 var(--font); color: var(--ink); }
.edit-q:focus { box-shadow: none; }
.ed-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.ed-btn { min-height: 38px; padding: 0 16px; border-radius: 12px; font: 600 .92rem/1 var(--font); }
.ed-btn.primary { background: var(--accent); color: #fff; border-color: transparent; }
.cut-note { color: var(--muted); font-size: .86rem; }
.msg.studio.stopped .body > p:first-child { color: var(--muted); }

/* รอคำตอบ: จุดกระพริบ */
.working { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: .96rem; }
.typing { display: inline-flex; gap: 4px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: .3; animation: nd-dot 1.1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes nd-dot { 30% { opacity: 1; transform: translateY(-3px); } }

/* ปุ่มเลื่อนลงล่างสุด */
.to-bottom { top: -50px; width: 40px; height: 40px; border-radius: 50%; background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-pop); }
.to-bottom svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .typing i, .nd-tool.on { animation: none; opacity: .7; } }

/* ── จอแคบ */
@media (max-width: 760px) {
  .greet h1 { font-size: 1.5rem; }
  .chat.is-empty { padding-bottom: 3vh; }
  .chat.is-empty .ideas { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; margin: 12px 0 2px; padding: 0 0 2px; }
  .chat.is-empty .ideas::-webkit-scrollbar { display: none; }
  .chat.is-empty .idea { flex: none; padding: 8px 14px; min-height: 44px; scroll-snap-align: start; }
  .nd-mascot { height: clamp(200px, 30vh, 260px); }  /* r3: หน้าแรกมือถือ ≥200px */
  .composer-bar { flex-wrap: wrap; justify-content: center; }
  .composer-note { font-size: .76rem; }
  .send, .nd-tool { width: 44px; height: 44px; min-height: 44px; }
  .nd-tool-text { width: auto; }
  .nd-mode > span { display: none; }  /* มือถือ: เหลือไอคอนคู่มือ (มี title) */
  .nd-mode { padding: 0 9px; }
  .msg-tools .ma { width: 40px; height: 40px; }
}
@media (max-height: 700px) and (min-width: 761px) { .nd-mascot { height: clamp(120px, 22vh, 200px); } }
@media (prefers-reduced-motion: reduce) {
  .mascot-slot .clip { display: none; }
  .nd-stage .nd-mascot { animation: none; }
}

/* r4.4–4.6 พี่โย 21 ต.ค. 69: หัวเว็บหน้าแชต = โลโก้วงกลม · คู่มือ · ทดลองฟรี · ปุ่มเมนู ☰ (คอมและมือถือ)
   กด ☰ = แผงเมนูเต็ม (ระบบจอง 4 ธุรกิจ · ผลงาน · คู่มือ) · เฉพาะหน้านี้ — หัวเว็บกลาง _noodee_header.html ไม่แตะ */
.nd-chat-page .nh .nh-mark { border-radius: 50%; }
.nd-chat-page .nh-wrap { position: relative; flex-wrap: nowrap; }
.nd-chat-page .nh-nav > :not(:last-child) { display: none; }
.nd-chat-page .nh .nh-burger { display: flex; width: 40px; height: 40px; border: 0; border-radius: 10px; gap: 5px; background: none; margin-left: 4px; }
.nd-chat-page .nh .nh-burger:hover { background: #F1F5F3; }
.nd-chat-page .nh .nh-burger span { width: 20px; height: 1.5px; transition: transform .2s, opacity .2s; }
.nd-chat-page .nh.open .nh-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nd-chat-page .nh.open .nh-burger span:nth-child(2) { opacity: 0; }
.nd-chat-page .nh.open .nh-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nd-chat-page .nh.open .nh-nav { position: absolute; top: calc(100% + 6px); right: 20px; width: 280px; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 8px; background: #fff; border: 1px solid var(--nh-rule); border-radius: 14px; box-shadow: 0 12px 32px rgba(16,22,20,.12); }
.nd-chat-page .nh.open .nh-nav > * { display: block; }
.nd-chat-page .nh.open .nh-nav > a { display: flex; width: 100%; min-height: 44px; font-size: 16px; justify-content: flex-start; }
.nd-chat-page .nh.open .nh-dd-btn { width: 100%; justify-content: flex-start; cursor: default; color: #6B7570; font-size: 13px; min-height: 32px; text-decoration: none; }
.nd-chat-page .nh.open .nh-caret { display: none; }
.nd-chat-page .nh.open .nh-sub { position: static; display: grid; border: 0; box-shadow: none; padding: 0 0 6px 12px; min-width: 0; }
@media (max-width: 860px) {
  .nd-chat-page .nh-nav { display: flex; order: 0; width: auto; flex-direction: row; padding: 0; border-top: 0; }
  .nd-chat-page .nh-nav > a { width: auto; padding: 0 10px; }
  .nd-chat-page .nh.open .nh-nav { right: 16px; left: 16px; width: auto; }
}