/* chat-tags.css — แท็กห้องแชทแบบ DK (590 · Mai 2026-10-06) · สีตามชื่อสีของ DK */
.tag.ctg { border: 1px solid transparent; font-weight: 700; color: #fff; }   /* พื้นเข้ม ตัวขาว แบบ DK (Mai 6 ต.ค. 69 "แท็กดูไม่เด่น") */
.ctg-navyBlue { background: #5b6b7d; }
.ctg-blue { background: #2563eb; }
.ctg-green { background: #16a34a; }
.ctg-orange { background: #ea6a0c; }
.ctg-red { background: #dc2626; }
.ctg-yellow { background: #e0a800; color: #3b2a00 !important; }
.ctg-purple { background: #7c3aed; }
.ctg-old, .tag.ctg.ctg-old { background: #f1f3f5; color: #6b7480; border: 1px dashed #c3c9d0 !important; }
.tag.ctg-sync { background: transparent; color: var(--muted, #6b7480); font-weight: 400; }

.room .rtg { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }   /* แท็กแยกบรรทัดใต้ข้อความล่าสุด · ชื่อลูกค้าได้เต็มบรรทัด */
.room .rtg:empty { display: none; }
.room .rtg { min-width: 0; overflow: hidden; }
.room .rtg .tag { font-size: var(--fs-xs); padding: 1px 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-block; }

/* แถบแท็บแบบ DK */
#filters.dktabs { display: flex; gap: 0; border-bottom: 1px solid var(--border, #dfe3e8); margin-top: 6px; }
#filters.dktabs .chip { flex: 1; height: auto; min-height: 34px; overflow: visible; white-space: nowrap; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; padding: 5px 2px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: var(--fs-xs); color: var(--muted, #6b7480); position: relative; }
#filters.dktabs .chip .tlb { display: none; }   /* ชื่อคลาส tlb (ห้าม .lb = ตัวดูรูปเต็มจอของ chat.css · ชนแล้วจอดำทั้งหน้า 8 ต.ค. 69) · แบบ DK: ไอคอนอย่างเดียว · ชื่ออยู่ใน title · กด ≡ ขยายรายชื่อแล้วค่อยโชว์ชื่อ */
.app.wide-rooms #filters.dktabs .chip .tlb { display: block; }
#filters.dktabs .chip .ic { font-size: var(--fs-md); line-height: 1; }
#filters.dktabs .chip[aria-pressed="true"] { color: var(--accent, #008042); border-bottom-color: var(--accent, #008042); font-weight: 700; }
#filters.dktabs .chip .n { position: absolute; top: 0; right: 6px; background: #e53935; color: #fff; font-size: var(--fs-xs); font-weight: 700; border-radius: 8px; padding: 0 4px; line-height: 15px; }
#filters.dktabs .chip .n:empty { display: none; }
#filters.dktabs .chip.sm { flex: 0 0 40px; }
/* ≡ ขยายรายชื่อห้อง: หน้าแชทจริงมี 4 ช่อง (ร้าน · ห้อง · แชท · แผงขวา) — เดิมตั้ง 3 ช่อง หน้าพัง จอดำ กดคืนไม่ได้ (Mai 8 ต.ค. 69) · เฉพาะจอกว้าง จอเล็กใช้ผังเดิม */
@media (min-width: 1001px) {
  .app.wide-rooms { grid-template-columns: minmax(360px, 28fr) minmax(380px, 30fr) minmax(360px, min(var(--tools-w), calc(100% - 760px))); }
  .app.wide-rooms.rail { grid-template-columns: minmax(360px, 28fr) minmax(380px, 30fr) 52px; }
  .app.cx.wide-rooms { grid-template-columns: var(--cx-shops-w, 190px) var(--rooms-w, minmax(360px, 28fr)) minmax(380px, 30fr) minmax(360px, min(var(--tools-w), calc(100% - 960px))); }
  .app.cx.wide-rooms.rail { grid-template-columns: var(--cx-shops-w, 190px) var(--rooms-w, minmax(360px, 28fr)) minmax(380px, 30fr) 52px; }
}

/* เมนูคลิกขวา */
.ctm { position: fixed; z-index: 400; min-width: 220px; background: #fff; border: 1px solid var(--border, #dfe3e8); border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.18); padding: 4px 0; }
.ctm-h { padding: 6px 12px 7px; font-size: var(--fs-sm); color: var(--muted, #6b7480); border-bottom: 1px solid var(--border, #dfe3e8); margin-bottom: 4px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctm-h b { color: #1f2933; }
#rooms .room.ctx-on { background: #e8f0fe !important; box-shadow: inset 3px 0 #1a73e8, 0 0 0 1px #1a73e8; }   /* ห้องที่คลิกขวาอยู่ */
.ctm-i { display: flex; gap: 8px; align-items: center; width: 100%; border: 0; background: none; padding: 6px 12px; font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; }
.ctm-i:hover { background: #f3f6f9; }
.ctm-pin { background: #fff6ee; }
.ctm-q { width: 10px; height: 13px; border-radius: 2px; display: inline-block; flex: none; }
.ctm-q.ctg-navyBlue { background: #8a94a0; } .ctm-q.ctg-blue { background: #1d4ed8; } .ctm-q.ctg-green { background: #137333; } .ctm-q.ctg-orange { background: #e8740c; }
.ctm-q.ctg-red { background: #c62828; } .ctm-q.ctg-yellow { background: #f4b400; } .ctm-q.ctg-purple { background: #6b3fd6; }
.ctm-ok { margin-left: auto; color: var(--accent, #008042); }
.ctm-sep { border-top: 1px solid var(--border, #dfe3e8); margin: 4px 0; }
.ctm-n { padding: 8px 12px; color: var(--muted, #6b7480); font-size: var(--fs-sm); }

/* กล่องเลือกแท็ก / จัดการแท็ก */
.ctg-ov { position: fixed; inset: 0; z-index: 450; background: rgba(0,0,0,.28); display: grid; place-items: center; }
.ctg-dlg { background: #fff; border-radius: 10px; box-shadow: 0 16px 44px rgba(0,0,0,.3); width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow: auto; padding: 14px 16px; }
.ctg-dlg.wide { width: min(720px, calc(100vw - 32px)); }
.ctg-h { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.ctg-x { margin-left: auto; border: 0; background: none; font-size: var(--fs-md); cursor: pointer; color: var(--muted, #6b7480); }
.ctg-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.ctg-grid .tag { cursor: pointer; font-size: var(--fs-sm); padding: 3px 10px; }
.ctg-grid .tag.on { outline: 2px solid #1a73e8; outline-offset: 1px; }
.ctg-grid .tag.on::before { content: '✓ '; }
.ctg-f { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.ctg-f .sp { flex: 1; }
.ctg-f .lnk { border: 0; background: none; color: #1a73e8; cursor: pointer; font: inherit; }
.ctg-add { display: flex; gap: 8px; margin-bottom: 10px; }
.ctg-add .in { flex: 1; }
.ctg-list { border: 1px solid var(--border, #dfe3e8); border-radius: 8px; max-height: 420px; overflow: auto; }
.ctg-row { display: grid; grid-template-columns: 12px 90px 1fr 34px 34px 34px; gap: 6px; align-items: center; padding: 5px 8px; border-bottom: 1px solid #f0f2f4; }
.ctg-row .ibtn.star { color: #e3a008; }