/* แถบปุ่มหลัก + เมนูรวมพับได้ + แชทยุบ (hud-bar.js · 4 ต.ค.) — โทนเดียวกับเมนูเดิม: กรอบเข้ม ปุ่มครีม ขอบทอง
 * คอมเท่านั้น (html:not(.touch-ui)) ยกเว้นส่วน "ทั้งสองแบบ" ท้ายไฟล์ · จอสัมผัสวาง layout ที่ ui-touch.css/ui-root.js */

#sysbar, #chat-fold, #chat-shrink { display: none; }
#menu > .pin-hint[hidden] { display: none !important; }

/* ── A. แถบหลัก (คอม) ── */
html:not(.touch-ui):has(#sysbar) body { --menu-w: 316px; }
html:not(.touch-ui) body #hud #sysbar {
  display: flex; position: fixed; right: 12px; bottom: 12px; z-index: 12; gap: 5px; padding: 7px;
  border: 1px solid #d7bb7b; border-radius: 14px; background: #30291fdb; box-shadow: 0 3px 12px #20160840;
}
html:not(.touch-ui) body #hud #sysbar button {
  position: relative; width: 56px; height: 55px; min-width: 0; display: grid; place-items: center; gap: 1px; padding: 4px 1px;
  border: 1px solid #c4a064; border-radius: 9px; background: linear-gradient(#fff7df, #ead5a4); color: #604a2a; cursor: pointer; line-height: 1;
}
html:not(.touch-ui) body #hud #sysbar button:hover { filter: brightness(1.06); }
html:not(.touch-ui) body #hud #sysbar button:active { translate: 0 1px; }
html:not(.touch-ui) body #hud #sysbar button small { font: 500 11.5px/1.3 var(--font); color: #604a2a; white-space: nowrap; letter-spacing: -0.2px; }
html:not(.touch-ui) body #hud #sysbar button img.mi { width: 26px; height: 26px; display: block; pointer-events: none; }
html:not(.touch-ui) body #hud #sysbar button .ic { width: 26px; height: 26px; }
html:not(.touch-ui) body #hud #sysbar .sb-dots { font: 700 24px/0.7 var(--font-head, var(--font)); color: #7a5a24; height: 26px; display: grid; place-items: center; }
html:not(.touch-ui) body #hud #sysbar button.on { background: linear-gradient(#e8c578, #c4903a); border-color: #a87a2c; }
html:not(.touch-ui) body #hud #sysbar button.attn::after {
  content: ''; position: absolute; top: 3px; right: 3px; width: 9px; height: 9px;
  border-radius: 50%; background: #e8503a; box-shadow: 0 0 0 1.5px #fff2d8;
}

/* เมนูรวม = กริดเด้งเหนือแถบ (เปิดด้วย ⋯) · ปุ่มที่ปักแล้วไม่ซ้ำในกริด ยกเว้นตอนจัดปุ่ม */
html:not(.touch-ui) body #hud #menu { display: none; }
html:not(.touch-ui).hud-more body #hud #menu {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: 400px; right: 12px; bottom: 86px; z-index: 13;
}
html:not(.touch-ui) body #hud #menu:not(.pin-edit) > button.pinned { display: none; }
html:not(.touch-ui) body #hud #menu .menu-set { flex-wrap: wrap; }
html:not(.touch-ui) body #hud #menu .menu-set button { flex: 1 1 30%; white-space: nowrap; }

/* ── ทั้งสองแบบ: โหมดจัดปุ่ม ── */
#menu > button { position: relative; }
#menu > .pin-hint { grid-column: 1 / -1; order: -10; display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 9px;
  background: #fff4d6; border: 1px solid #d7bb7b; color: #5a4218; font: 500 12px/1.35 var(--font); }
#menu > .pin-hint span { flex: 1; }
html body #hud #menu > .pin-hint button { flex: none; width: auto; height: 28px; min-height: 26px; padding: 0 9px; border-radius: 7px; border: 1px solid #c4a064;
  background: linear-gradient(#fffbef, #ead9b5); color: #5a4218; font: 600 12px var(--font); cursor: pointer; }
#menu > .pin-hint [data-done] { background: linear-gradient(#e8c578, #c4903a); }
#menu.pin-edit > button:not(.pinned) { opacity: .8; }
#menu.pin-edit > button.pinned { outline: 2px solid #e8b64a; outline-offset: -2px; opacity: 1; }
#menu.pin-edit > button.pinned::before { content: '📌'; position: absolute; top: -5px; left: -3px; font-size: 13px; line-height: 1; }
#menu .menu-set [data-pinedit].on { background: linear-gradient(#e8c578, #c4903a); }

/* ช่องใหม่ (ท่าทาง · เพื่อน) ยังไม่มีภาพไอคอนชุดเมนู — ใช้อีโมจิขนาดเท่าไอคอนภาพ */
#menu > button .mi-emo, #sysbar button .mi-emo { display: block; font-size: 22px; line-height: 26px; height: 26px; pointer-events: none; }
html.touch-ui #menu > button .mi-emo { font-size: 26px; line-height: 30px; height: 30px; }

/* ── จอสัมผัส: จุดแจ้งเตือนที่ปุ่ม ☰ (ในเมนูมีแต้มสถานะ/สกิลรออยู่) ── */
html.touch-ui #fabs button.attn i { display: block; }
/* ท่าทางบนจอสัมผัสมีปุ่มกลมของตัวเองใน #fabs (emote.js) — ไม่ซ้ำในแผ่นเมนู */
html.touch-ui body #menu > [data-act="emote"] { display: none; }

/* ── B. แชทยุบ (คอม) ── */
html:not(.touch-ui) body #chat #chat-shrink {
  display: inline-grid; place-items: center; flex: none; min-width: 30px; min-height: 30px; padding: 0 6px; pointer-events: auto;
  border: 1px solid #c2a674; border-radius: 8px; background: linear-gradient(#fffbef, #ead9b5); color: #5a4218; font: 700 13px var(--font); cursor: pointer;
}
html:not(.touch-ui).chat-fold body #chat .chat-tabs,
html:not(.touch-ui).chat-fold body #chat .chat-bar,
html:not(.touch-ui).chat-fold body #chat #chat-new,
html:not(.touch-ui).chat-fold body #chat #chat-ch { display: none !important; }
html:not(.touch-ui).chat-fold body #chat #chat-log {
  height: auto !important; max-height: 50px; overflow: hidden; margin: 0 0 5px; cursor: pointer;
  background: #202a3199; -webkit-mask-image: linear-gradient(transparent, #000 35%); mask-image: linear-gradient(transparent, #000 35%);
}
html:not(.touch-ui).chat-fold body #chat #chat-log > :not(:nth-last-child(-n + 2)) { display: none; }
html:not(.touch-ui).chat-fold body #chat #chat-fold {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; pointer-events: auto; cursor: pointer;
  border: 1px solid #c2a674; border-radius: 10px; background: #f7edda; color: #5a4218; font: 600 13px var(--font); box-shadow: 0 2px 6px #20160830;
}
html:not(.touch-ui) body #chat #chat-fold:hover { filter: brightness(1.05); }
html:not(.touch-ui) body #chat #chat-fold small { font: 500 11.5px var(--font); color: #8a6a3a; }
html:not(.touch-ui) body #chat #chat-fold .cf-n {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e8503a; color: #fff; font: 700 11px/18px var(--font); font-style: normal; text-align: center;
}
html:not(.touch-ui) body #chat #chat-fold .cf-n[hidden] { display: none; }