/* ============================================================
ฟอนต์ในเครื่อง (self-host) — ไม่พึ่ง Google ตอนรัน
Kanit = ไทย+อังกฤษ (Cadson Demak) · Noto Sans = พม่า/ไทใหญ่ · เขมร · ลาว
ไทใหญ่ (shn) ใช้อักษรพม่า จึงใช้ฟอนต์ Myanmar ตัวเดียวกัน
อัปเดตไฟล์: tools/getfonts.sh
============================================================ */
/* Tlwg Mono — monospace ที่ "มีอักษรไทย" (ทุก glyph กว้าง 600 เท่ากัน
สระ/วรรณยุกต์กว้าง 0 ซ้อนบนตัวก่อนหน้า) → ตารางไทยในบล็อก ``` ตรงคอลัมน์
Boss 2026-08-27: ตารางเหลื่อมเพราะ Kanit เป็น proportional */
@font-face {
font-family: 'Tlwg Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fonts/tlwgmono-400.woff2) format('woff2');
}
@font-face {
font-family: 'Kanit';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(fonts/kanit-thai-300.woff2) format('woff2');
unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
font-family: 'Kanit';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(fonts/kanit-latin-300.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Kanit';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fonts/kanit-thai-400.woff2) format('woff2');
unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
font-family: 'Kanit';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fonts/kanit-latin-400.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Kanit';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(fonts/kanit-thai-500.woff2) format('woff2');
unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
font-family: 'Kanit';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(fonts/kanit-latin-500.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Kanit';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(fonts/kanit-thai-600.woff2) format('woff2');
unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
font-family: 'Kanit';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(fonts/kanit-latin-600.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Kanit';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(fonts/kanit-thai-700.woff2) format('woff2');
unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
font-family: 'Kanit';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(fonts/kanit-latin-700.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Noto Sans Myanmar';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(fonts/mya-myanmar-400.woff2) format('woff2');
unicode-range: U+1000-109F, U+200C-200D, U+25CC, U+A92E, U+A9E0-A9FE, U+AA60-AA7F, U+116D0-116E3;
}
@font-face {
font-family: 'Noto Sans Myanmar';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(fonts/mya-myanmar-400.woff2) format('woff2');
unicode-range: U+1000-109F, U+200C-200D, U+25CC, U+A92E, U+A9E0-A9FE, U+AA60-AA7F, U+116D0-116E3;
}
@font-face {
font-family: 'Noto Sans Khmer';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(fonts/khm-khmer-400.woff2) format('woff2');
unicode-range: U+1780-17FF, U+19E0-19FF, U+200C-200D, U+25CC;
}
@font-face {
font-family: 'Noto Sans Khmer';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(fonts/khm-khmer-400.woff2) format('woff2');
unicode-range: U+1780-17FF, U+19E0-19FF, U+200C-200D, U+25CC;
}
@font-face {
font-family: 'Noto Sans Lao';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(fonts/lao-lao-400.woff2) format('woff2');
unicode-range: U+0E81-0EDF, U+200C-200D, U+25CC;
}
@font-face {
font-family: 'Noto Sans Lao';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(fonts/lao-lao-400.woff2) format('woff2');
unicode-range: U+0E81-0EDF, U+200C-200D, U+25CC;
}
/* โหมดมืด — เทาอมน้ำเงินเข้ม ไม่ใช้ดำสนิท (จอมือถือถูกๆ อ่านง่ายกว่า)
แถบข้างกลมกลืนกับพื้นหลัง ไม่ใช่บล็อกน้ำเงินลอย */
html[data-theme="dark"] {
--blue: #4D9BE0; --blue-dark: #7FBAEC; --blue-light: #1B2A3A;
--bg: #0E1621; --card: #172231; --text: #E5EAF0; --muted: #94A3B8;
--border: #2A3849; --green: #34D399; --red: #F87171; --amber: #FBBF24;
--shadow: 0 1px 3px rgba(0,0,0,.4);
--side-bg: #121C28; --side-text: #E5EAF0; --side-muted: #8FA1B5;
--side-section: #7D8FA3; --side-item: #C3CEDB;
--side-hover: rgba(255,255,255,.06); --side-raise: rgba(255,255,255,.05);
--side-input: rgba(255,255,255,.07); --side-ph: #7D8FA3;
--side-active: #1D3A5C; --side-presence: #4A5A6D;
--sunken: #1E2A3A;
/* บับเบิลข้อความ — ต้องสว่างกว่าพื้น #0E1621/#111c28 พอให้เห็นเป็น "ก้อน"
(เดิมไม่มีนิยาม เลยตกไปใช้ rgba(127,127,127,.1) ที่จางจนกลืนพื้น = ดูเหมือนกระทู้) */
--bubble: #24354A; --bubble-mine: #2F6DB0; --msg-hover: rgba(255,255,255,.055);
--amber-bg: #3A2E12; --amber-bd: #574319; --amber-soft: #2A2210;
--green-bg: #12331F; --green-soft: #10281B;
--red-bg: #3A1A1A;
--hot: #1E3A57;
--online: #34D399; --online-text: #06331F;
--toast-bg: #E5EAF0; --toast-text: #0E1621;
--backdrop: rgba(0,0,0,.62);
--call-bg: #0A121C; --call-tile: #1B2A3A;
--shadow-pop: 0 8px 24px rgba(0,0,0,.5);
--shadow-modal: 0 20px 60px rgba(0,0,0,.6);
--on-brand: #0B1520;
color-scheme: dark; /* ปฏิทิน/dropdown/scrollbar ของเบราว์เซอร์เป็นโทนมืดตาม */
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
/* มินิมอล: Kanit นำ · Noto ต่อท้ายรับอักษรพม่า/เขมร/ลาว · ระบบเป็นตัวสำรอง */
font-family: 'Kanit', 'Noto Sans Myanmar', 'Noto Sans Khmer', 'Noto Sans Lao',
'Segoe UI', 'Leelawadee UI', system-ui, sans-serif;
-webkit-font-smoothing: antialiased; /* มินิมอลต้องเส้นบาง ไม่หนาเป็นก้อน */
-moz-osx-font-smoothing: grayscale;
/* Kanit ตัวสูงกว่าฟอนต์ระบบ ถ้าไม่เพิ่ม line-height สระบน/ล่างไทยจะชนกันเวลาข้อความหลายบรรทัด */
line-height: 1.55;
background: var(--bg); color: var(--text); font-size: 14.5px; overflow: hidden;
}
/* พม่า/ไทใหญ่ ต้องการ line-height สูงกว่า */
html[lang="my"] body, html[lang="shn"] body { line-height: 1.8; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.w100 { width: 100%; }
.small-text { font-size: 12px; }
.error-text { color: var(--red); font-size: 13px; margin-top: 8px; min-height: 18px; text-align: center; }
.divider { border-top: 1px solid var(--border); margin: 12px 0; }
.big-emoji { font-size: 56px; }
.mini-hint { font-weight: 400; font-size: 10px; }
/* ---------- buttons / inputs ---------- */
.btn {
border: 1px solid var(--border); background: var(--card); color: var(--text);
padding: 9px 16px; border-radius: 8px; font-size: 14px; cursor: pointer; font-family: inherit;
}
.btn.primary { background: var(--blue); border-color: var(--blue); color: var(--on-brand); }
.btn.primary:active { background: var(--blue-dark); }
.btn.danger { background: var(--red); border-color: var(--red); color: var(--on-brand); }
.btn.ghost { background: transparent; }
.btn.small { padding: 5px 10px; font-size: 13px; }
.icon-btn {
border: none; background: transparent; font-size: 19px; cursor: pointer;
padding: 7px; border-radius: 8px; line-height: 1; color: var(--text);
}
.icon-btn:active { background: var(--blue-light); }
.icon-btn.send { color: var(--blue); font-size: 22px; }
.icon-btn.recording { background: var(--red); color: var(--on-brand); border-radius: 50%; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .6; } }
input, textarea, select {
width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
font-size: 15px; font-family: inherit; background: var(--card); color: var(--text); margin-bottom: 8px;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--blue); outline-offset: -1px; }
input[type=color] { height: 42px; padding: 4px; }
input[type=checkbox], input[type=radio] { width: auto; margin: 0 6px 0 0; }
label { font-size: 14px; }
/* ---------- login ---------- */
.login-screen {
position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
background: linear-gradient(150deg, var(--blue) 0%, var(--blue-dark) 100%); padding: 16px;
}
.login-card {
background: var(--card); border-radius: 16px; padding: 32px 28px; width: 100%; max-width: 380px;
text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.login-logo { font-size: 52px; }
.login-card h1 { color: var(--blue); margin: 4px 0 2px; }
.login-card p { margin-bottom: 18px; }
.login-card .btn { margin-top: 8px; }
/* ---------- layout ---------- */
.app { display: flex; height: 100%; height: 100dvh; }
.sidebar {
width: 280px; background: var(--side-bg); color: var(--side-text); display: flex; flex-direction: column;
flex-shrink: 0; z-index: 40;
}
.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 8px; }
.brand { font-weight: 700; font-size: 17px; }
.sidebar .icon-btn { color: var(--side-text); }
.sidebar-me {
display: flex; gap: 10px; align-items: center; margin: 0 10px 8px; padding: 8px;
border-radius: 10px; background: var(--side-raise); cursor: pointer;
}
.me-name { font-weight: 600; font-size: 14px; }
.me-status { font-size: 12px; color: var(--side-muted); }
.side-nav { display: flex; gap: 4px; margin: 0 10px 8px; }
.side-nav .nav-btn {
flex: 1; border: none; background: var(--side-raise); color: var(--side-text); font-size: 17px;
padding: 7px 0; border-radius: 8px; cursor: pointer;
}
.side-nav .nav-btn.active { background: var(--side-active); }
/* ปุ่มผู้ดูแลระบบ: แยกแถวของตัวเอง โชว์ชื่อเต็ม ไม่ใช่ไอคอนเปล่า จะได้รู้ว่ากดไปหน้าอะไร */
.side-admin { display: flex; margin: 0 10px 8px; }
.side-admin .nav-btn-wide {
flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
border: none; background: var(--side-raise); color: var(--side-text);
padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 15px;
}
.side-admin .nav-btn-wide.active { background: var(--side-active); }
.side-admin .nav-btn-label { font-size: 13px; font-weight: 600; white-space: nowrap; }
/* ป้ายนับคำขอรออนุมัติ บนปุ่มผู้ดูแลระบบ */
.nav-badge {
background: #DC2626; color: #fff; font-size: 10px; font-weight: 700; line-height: 1;
min-width: 16px; padding: 3px 4px; border-radius: 999px; text-align: center;
}
.side-search { margin: 0 10px 8px; width: calc(100% - 20px); background: var(--side-input); border: none; color: var(--side-text); }
/* แถวค้นหา + ปุ่ม DM (Boss สั่ง 2026-09-04) — สกินพื้นฐาน (ไม่ใช่ v3) */
.side-search-row { display: flex; align-items: center; gap: 8px; margin: 0 10px 8px; }
.side-search-row .side-search { margin: 0; width: 0; flex: 1 1 0; min-width: 0; }
.side-dm-btn {
position: relative; flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 8px; cursor: pointer;
border: none; background: var(--side-input); color: var(--side-text); font-size: 16px;
}
.side-dm-btn:hover { background: var(--side-hover); }
.side-dm-badge {
position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px;
padding: 0 4px; border-radius: 999px; background: var(--red, #e01e5a); color: #fff;
font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.side-dm-badge.hidden { display: none; }
.side-search::placeholder { color: var(--side-ph); }
.side-scroll { flex: 1; overflow-y: auto; padding-bottom: 12px; }
.side-section {
font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--side-section);
padding: 12px 14px 4px; font-weight: 700;
}
.chan-item, .user-item {
display: flex; align-items: center; gap: 8px; padding: 8px 14px; cursor: pointer; font-size: 14px;
color: var(--side-item);
}
.chan-item:active, .chan-item:hover, .user-item:hover { background: var(--side-hover); }
.chan-item.active { background: var(--side-active); color: var(--side-text); font-weight: 600; }
.chan-item .dot { margin-left: auto; width: 9px; height: 9px; border-radius: 50%; background: var(--amber); flex-shrink: 0; }
.user-item .presence { width: 9px; height: 9px; border-radius: 50%; background: var(--side-presence); flex-shrink: 0; }
.user-item .presence.on { background: var(--online); }
.online-badge { background: var(--online); color: var(--online-text); font-size: 11px; padding: 1px 7px; border-radius: 10px; margin-left: 4px; }
.avatar {
width: 34px; height: 34px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 14px;
display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
.page { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.page-head {
display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--card);
border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.page-head h2 { font-size: 17px; color: var(--blue); }
.head-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
/* ปุ่ม "ไปช่องแชท" มุมขวาหัวหน้า DM (Boss สั่ง 2026-08-30) */
.dmp-home { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dmp-home svg { width: 15px; height: 15px; }
.head-actions select { width: auto; margin: 0; padding: 6px 8px; font-size: 13px; }
.page-body { flex: 1; overflow-y: auto; padding: 14px; }
/* ---------- chat ---------- */
.chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted); }
.chat-room { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-head {
display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--card);
border-bottom: 1px solid var(--border);
}
.chat-title { flex: 1; min-width: 0; cursor: pointer; }
.chat-name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-topic { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-actions { display: flex; }
.meeting-bar {
display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--amber-bg);
border-bottom: 1px solid var(--amber-bd); font-size: 13px; flex-wrap: wrap;
}
.meeting-bar input { flex: 1; min-width: 140px; margin: 0; padding: 6px 10px; font-size: 13px; }
.messages { flex: 1; overflow-y: auto; padding: 12px 12px 4px; display: flex; flex-direction: column; }
.msg { display: flex; gap: 8px; margin-bottom: 2px; padding: 3px 6px; border-radius: 8px; position: relative; }
.msg:hover { background: var(--blue-light); }
.msg .avatar { width: 32px; height: 32px; font-size: 13px; margin-top: 2px; }
.msg.compact .avatar { visibility: hidden; height: 0; margin: 0; }
.msg-body { flex: 1; min-width: 0; }
.msg-head { display: flex; gap: 8px; align-items: baseline; }
.msg-name { font-weight: 700; font-size: 13.5px; }
.msg-time { font-size: 11px; color: var(--muted); }
.msg-text { font-size: 14.5px; word-wrap: break-word; white-space: pre-wrap; }
.msg-text.deleted { color: var(--muted); font-style: italic; }
/* บล็อกตาราง/โค้ด ``` — ต้อง monospace ไม่งั้นคอลัมน์เหลื่อม · แคบกว่าตารางให้เลื่อนแนวนอน */
.msg-text .msg-pre {
/* 'Tlwg Mono' ต้องมาก่อน — เป็นตัวเดียวที่มีอักษรไทยและกว้างคงที่
ถ้าเอา Cascadia ขึ้นก่อน ละตินจะกว้าง 1 หน่วยแต่ไทย fallback ไป Kanit = เหลื่อม */
font-family: 'Tlwg Mono', 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', 'Courier New', monospace;
font-size: 13px; line-height: 1.5; margin: 6px 0 2px;
background: var(--sunken); border: 1px solid var(--border); border-radius: 8px;
padding: 10px 12px; overflow-x: auto; white-space: pre; -webkit-overflow-scrolling: touch;
}
.msg-edited { font-size: 11px; color: var(--muted); }
.msg-reply {
font-size: 12px; color: var(--muted); border-left: 3px solid var(--blue); padding: 2px 8px;
margin-bottom: 2px; background: var(--blue-light); border-radius: 4px; cursor: pointer;
}
.msg img.msg-image, .msg video.msg-video { max-width: min(320px, 75%); border-radius: 10px; margin-top: 4px; display: block; cursor: pointer; }
.msg img.msg-sticker { width: 120px; height: 120px; object-fit: contain; }
.msg audio { margin-top: 4px; max-width: 260px; height: 40px; }
.msg-file { display: inline-flex; gap: 8px; align-items: center; background: var(--blue-light); padding: 8px 12px; border-radius: 10px; margin-top: 4px; font-size: 13px; color: var(--blue); text-decoration: none; }
.msg.system { justify-content: center; }
.msg.system .msg-sys {
background: var(--sunken); color: var(--muted); font-size: 12.5px; padding: 6px 14px; border-radius: 14px;
max-width: 92%; white-space: pre-wrap; overflow-wrap: break-word;
}
.msg-actions {
position: absolute; top: -14px; right: 8px; background: var(--card); border: 1px solid var(--border);
border-radius: 8px; display: none; box-shadow: var(--shadow); z-index: 5;
}
.msg:hover .msg-actions { display: flex; }
.msg-actions button { border: none; background: none; padding: 5px 8px; cursor: pointer; font-size: 14px; }
.msg-actions button:hover { background: var(--blue-light); }
.day-sep { text-align: center; font-size: 12px; color: var(--muted); margin: 12px 0 6px; }
.day-sep span { background: var(--bg); padding: 2px 12px; border-radius: 10px; border: 1px solid var(--border); }
.typing-bar { min-height: 18px; font-size: 12px; color: var(--muted); padding: 0 16px 2px; }
.reply-bar {
display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--blue-light);
font-size: 13px; border-top: 1px solid var(--border);
}
.reply-bar span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.composer {
display: flex; align-items: flex-end; gap: 2px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
background: var(--card); border-top: 1px solid var(--border);
}
.composer textarea {
flex: 1; margin: 0; resize: none; max-height: 120px; border-radius: 20px; padding: 9px 14px; font-size: 15px;
}
/* ---------- calls ---------- */
/* ⚠️ พาเนลโทรต้อง "สูงไม่เกินจอ" และแถวปุ่มต้องอยู่ในจอเสมอ
เดิมไม่จำกัดความสูง + ช่องวิดีโอ aspect-ratio 4/3 ยืดเต็มความกว้าง
→ พาเนลสูงเกินจอ ดันปุ่ม "🔴 วางสาย" ตกใต้ขอบล่าง กดไม่ได้
= โทรแล้ววางเองไม่ได้ ต้อง hard refresh (Boss แจ้ง 2026-08-30 พร้อมรูป) */
.call-panel {
background: var(--call-bg); padding: 10px;
display: flex; flex-direction: column; gap: 8px;
max-height: min(60vh, 460px); overflow: hidden; flex: 0 0 auto;
}
.video-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px;
flex: 1 1 auto; min-height: 0; overflow-y: auto; /* ล้นแล้วเลื่อนในตัว ไม่ดันปุ่ม */
align-content: start;
}
.video-tile { position: relative; background: var(--call-tile); border-radius: 10px; overflow: hidden; aspect-ratio: 4/3; }
.video-tile video { width: 100%; height: 100%; object-fit: cover; }
.video-tile .vt-name {
position: absolute; bottom: 4px; left: 6px; color: #fff; font-size: 12px;
background: rgba(0,0,0,.45); padding: 2px 8px; border-radius: 8px;
}
.video-tile.audio-only { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 30px; }
.call-controls {
display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
flex: 0 0 auto; /* ห้ามถูกบีบ/ดันหาย — ต้องกด "วางสาย" ได้เสมอ */
}
/* ---------- cards / pages ---------- */
.card { background: var(--card); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); margin-bottom: 14px; }
.card h3 { font-size: 15px; color: var(--blue); margin-bottom: 10px; }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.card-head h3 { margin: 0; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tile { background: var(--card); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); }
.tile .t-num { font-size: 24px; font-weight: 800; color: var(--blue); }
.tile .t-label { font-size: 12px; color: var(--muted); }
.list-row {
display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--border); font-size: 14px;
}
.list-row:last-child { border-bottom: none; }
.list-row .bar { height: 8px; background: var(--blue); border-radius: 4px; }
.list-row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ---------- filters ---------- */
.filter-card { padding: 10px 14px; }
.filter-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.filter-row input[type=date] { width: auto; margin: 0; padding: 5px 8px; font-size: 13px; }
.f-drop { position: relative; }
.f-drop summary {
cursor: pointer; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px;
background: var(--card); list-style: none; user-select: none;
}
.f-drop[open] summary { background: var(--blue-light); border-color: var(--blue); }
.f-drop .check-list {
position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; background: var(--card);
border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-pop);
padding: 8px; min-width: 200px; max-height: 260px; overflow-y: auto;
}
.check-list label { display: flex; align-items: center; padding: 5px 6px; border-radius: 6px; cursor: pointer; font-size: 13.5px; }
.check-list label:hover { background: var(--blue-light); }
.check-list.tall { max-height: 200px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 6px; }
.check-col label { display: flex; align-items: center; padding: 7px 4px; }
.radio-row { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.radio-row label { display: flex; align-items: center; }
/* ---------- pivot ---------- */
.pivot-wrap { overflow: auto; max-height: 60vh; }
.pivot-wrap table { border-collapse: collapse; font-size: 12.5px; min-width: 100%; }
.pivot-wrap th, .pivot-wrap td { border: 1px solid var(--border); padding: 5px 9px; text-align: right; white-space: nowrap; }
.pivot-wrap th { background: var(--blue-light); color: var(--blue); position: sticky; top: 0; text-align: center; }
.pivot-wrap td:first-child, .pivot-wrap th:first-child { text-align: left; position: sticky; left: 0; background: var(--card); font-weight: 600; }
.pivot-wrap td.hot { background: var(--hot); font-weight: 700; }
/* ---------- tables (control panel) ---------- */
.tab-bar { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.tab {
border: 1px solid var(--border); background: var(--card); padding: 7px 14px; border-radius: 20px;
cursor: pointer; font-size: 13.5px; font-family: inherit;
}
.tab.active { background: var(--blue); color: var(--on-brand); border-color: var(--blue); }
/* ตัวเลขคำขอค้างบนหัวแท็บ (สิทธิ์เลขา) — แดงเสมอ อ่านออกทั้งบนแท็บ active และไม่ active */
.tab-badge {
display: inline-block; margin-left: 6px; background: #DC2626; color: #fff;
font-size: 10px; font-weight: 700; line-height: 1; min-width: 16px;
padding: 3px 4px; border-radius: 999px; text-align: center;
}
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th, .tbl td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.tbl th { color: var(--muted); font-size: 12px; }
.pill { font-size: 11.5px; padding: 2px 9px; border-radius: 10px; background: var(--blue-light); color: var(--blue); }
.pill.green { background: var(--green-bg); color: var(--green); }
.pill.red { background: var(--red-bg); color: var(--red); }
.pill.amber { background: var(--amber-bg); color: var(--amber); }
code.key-code { background: var(--sunken); padding: 2px 7px; border-radius: 6px; font-size: 12px; word-break: break-all; white-space: normal; }
/* ---------- stickers ---------- */
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; max-height: 50vh; overflow-y: auto; }
.sticker-cell { text-align: center; cursor: pointer; padding: 6px; border-radius: 10px; position: relative; }
.sticker-cell:hover { background: var(--blue-light); }
.sticker-cell img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.sticker-cell .st-name { font-size: 11px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sticker-cell .st-del { position: absolute; top: 0; right: 0; font-size: 11px; background: var(--red); color: var(--on-brand); border: none; border-radius: 50%; width: 18px; height: 18px; cursor: pointer; display: none; }
.sticker-cell:hover .st-del { display: block; }
.sticker-pack-head { grid-column: 1/-1; font-size: 12px; font-weight: 700; color: var(--blue); margin-top: 4px; }
.attach-preview { max-height: 220px; overflow: hidden; text-align: center; margin-bottom: 8px; }
.attach-preview img, .attach-preview video { max-width: 100%; max-height: 200px; border-radius: 10px; }
/* ---------- modals / toast ---------- */
.modal-backdrop {
position: fixed; inset: 0; background: var(--backdrop); z-index: 100;
display: flex; align-items: center; justify-content: center; padding: 14px;
}
.modal {
background: var(--card); border-radius: 16px; padding: 20px; width: 100%; max-width: 420px;
max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-modal);
}
.modal.wide { max-width: 680px; }
.modal h3 { color: var(--blue); margin-bottom: 12px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
/* .side-section เป็นคลาสของแถบข้าง (padding 12px 14px + สีของ sidebar)
พอเอามาใช้ในโมดัลจะเยื้องผิดและใช้สีผิดพื้น → override ให้เข้ากับพื้นโมดัล
(กระทบ modal-newchannel เดิมด้วย = แก้ให้ตรงกันทั้งคู่) */
.modal .side-section { padding: 4px 0; color: var(--muted); }
/* ปุ่มสุ่มรหัส/ปุ่มเดี่ยวในโมดัล ต้องมีระยะห่างจาก input ด้านบน */
.modal > .btn.small { margin-top: 8px; margin-bottom: 4px; }
.modal .radio-row { margin: 4px 0; }
/* แถบชื่อผู้ใช้+สิทธิ์ในโมดัลโปรไฟล์ (อ่านเท่านั้น) */
.pf-whoami { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 2px 0 6px; }
.pf-whoami .pf-user { font-size: 14px; font-weight: 600; word-break: break-all; }
/* รหัสประจำตัว + แผนก ในโมดัลโปรไฟล์ (อ่านเท่านั้น) */
.pf-orginfo { display: flex; flex-direction: column; gap: 4px; font-size: 14px; padding: 0 0 8px; }
.pf-orginfo .pf-k { color: var(--muted); font-size: 12px; }
.modal select { width: 100%; }
/* สถานะพร้อมอีโมจิ */
.emoji-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 6px; }
.emoji-chip {
font-size: 20px; line-height: 1; padding: 6px 8px; cursor: pointer;
background: var(--sunken); border: 1px solid var(--border); border-radius: 8px; color: inherit;
}
.emoji-chip:hover { background: var(--side-hover); }
.status-line { display: flex; gap: 8px; align-items: stretch; }
.status-line .emoji-input { width: 56px; text-align: center; font-size: 18px; flex-shrink: 0; }
.status-line input:not(.emoji-input) { flex: 1; min-width: 0; }
/* รูปโปรไฟล์ในโมดัล */
.pf-avatar-row { display: flex; align-items: center; gap: 14px; padding: 4px 0 8px; }
.pf-avatar-btns { display: flex; flex-direction: column; gap: 6px; }
.pf-avatar-btns .btn { text-align: center; cursor: pointer; }
img.avatar { object-fit: cover; }
.clickable { cursor: pointer; }
.clickable:hover { opacity: .82; }
.msg-name.clickable:hover { text-decoration: underline; }
/* โมดัลดูโปรไฟล์คนอื่น */
.up-head { display: flex; gap: 14px; align-items: center; padding: 4px 0 12px; }
.up-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.up-display { font-size: 18px; font-weight: 700; word-break: break-word; }
.up-status { font-size: 14px; }
.up-name .pill { align-self: flex-start; }
.up-rows { display: flex; flex-direction: column; gap: 8px; }
.up-row { display: flex; gap: 10px; font-size: 14px; align-items: baseline; }
.up-row .up-k { color: var(--muted); font-size: 12px; min-width: 92px; flex-shrink: 0; }
/* แถบตัวอย่างรูปที่วางด้วย Ctrl+V (เหนือช่องพิมพ์) */
.paste-bar {
display: flex; flex-direction: column; gap: 8px; padding: 8px 12px;
background: var(--sunken); border-top: 1px solid var(--border);
}
/* คิวไฟล์แนบ: เลื่อนแนวนอนเมื่อไฟล์เยอะ ไม่ดันจอแชท */
.paste-queue { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.pq-item {
position: relative; flex-shrink: 0; width: 92px;
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 6px 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
}
.pq-item img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; }
.pq-icon { font-size: 34px; line-height: 48px; }
.pq-name {
font-size: 11px; color: var(--muted); max-width: 84px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pq-x {
position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; padding: 0;
border: 1px solid var(--border); border-radius: 50%; background: var(--bg);
color: var(--text); font-size: 11px; cursor: pointer; line-height: 1;
}
.paste-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.paste-foot .small-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* มือถือ 360px: ข้อความบอกใบ้ยาวกว่าที่ว่าง โดนตัดเป็น "พิมพ์ข้อค…"
→ ให้ขึ้นบรรทัดเต็มความกว้างของตัวเอง ปุ่มไปอยู่แถวล่าง อ่านครบ */
@media (max-width: 520px) {
.paste-foot .small-text { flex: 1 0 100%; white-space: normal; }
}
/* ปุ่มลบ ✕ เดิมล้นออกนอกการ์ด (top/right -6px) ไปทับการ์ดข้างบน
ย้ายเข้ามาในกรอบ + ทึบแสง แตะได้ชัดบนมือถือ */
.pq-item { padding-top: 10px; overflow: visible; }
.pq-x { top: 2px; right: 2px; width: 22px; height: 22px; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
/* --- ปรับให้ใช้ง่ายขึ้นบนมือถือ (Boss 2026-08-28 รอบ 2) --- */
/* ＋เพิ่มไฟล์ กับ ส่ง เคยอยู่ติดกัน นิ้วโป้งพลาดกดผิด = ส่งออกไปแล้วถอนไม่ได้
ดันปุ่มส่งไปชิดขวาสุด เว้นช่องว่างจริงระหว่างสองปุ่ม */
/* ถอดปุ่ม "ส่ง" ในแถบคิวออกแล้ว (ซ้ำกับปุ่มเครื่องบินที่ composer)
เหลือ ＋เพิ่มไฟล์ ชิดซ้าย · ✕ ยกเลิก ชิดขวา */
.paste-foot .btn.ghost { margin-right: auto; }
@media (max-width: 520px) {
/* ปุ่มสูงพอให้นิ้วโป้งกดไม่พลาด */
.paste-foot .btn { min-height: 40px; padding-inline: 14px; }
}
/* ตัวเลือกคุณภาพยุบเก็บ — ไม่กินครึ่งจอตอนเปิดโมดัล */
.atc-qwrap { margin: 10px 0 2px; }
.atc-qwrap > summary {
cursor: pointer; font-size: 13px; color: var(--muted);
padding: 8px 2px; list-style: none; user-select: none;
}
.atc-qwrap > summary::before { content: '⚙️ '; }
.atc-qwrap > summary::-webkit-details-marker { display: none; }
.atc-qwrap[open] > summary { color: var(--text); }
/* ปุ่มยกเลิกไม่ควรแข่งสายตากับปุ่มหลัก — เบาลงและแคบกว่า */
.atc-actions .atc-cancel { flex: 0 0 auto; opacity: .72; }
.atc-actions .btn.primary { flex: 1; }
/* ปุ่มรูปตรงๆ บน composer */
#btn-quick-pic { color: var(--brand, #0f4c81); }
/* จอแคบ: มี 4 ปุ่มรอบช่องพิมพ์ (＋ รูป ไมค์ ส่ง) เบียดจนช่องพิมพ์เหลือ ~160px
บีบปุ่มให้แคบลงเล็กน้อย คืนพื้นที่ให้ช่องพิมพ์ แต่ยังสูง 40px+ กดไม่พลาด */
@media (max-width: 420px) {
.composer .icon-btn { width: 36px; min-width: 36px; padding: 0; }
.composer #msg-input { min-width: 0; }
}
/* ลากไฟล์มาวาง: overlay คลุมทั้งหน้าจอ — pointer-events:none ไม่ให้กินคลิก/บล็อก drop */
.drop-overlay {
position: fixed; inset: 0; z-index: 400; pointer-events: none;
display: flex; align-items: center; justify-content: center;
background: rgba(15, 76, 129, .18); backdrop-filter: blur(1.5px);
}
.drop-overlay.hidden { display: none; }
.drop-box {
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 28px 40px; border-radius: 16px; border: 2.5px dashed var(--primary, #0F4C81);
background: var(--card); color: var(--text); font-size: 15px; font-weight: 600;
box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
.drop-icon { font-size: 38px; }
.drop-box .small-text { font-weight: 400; }
.paste-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.paste-info span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* การ์ดแก้ไขห้องในแผงจัดการห้อง */
.ra-label { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; font-size: 13px; color: var(--muted); }
.ra-label input, .ra-label select { color: var(--text); }
.ra-label select { width: auto; min-width: 160px; }
.toast {
position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background: var(--toast-bg); color: var(--toast-text);
padding: 10px 20px; border-radius: 24px; font-size: 14px; z-index: 200; box-shadow: 0 6px 20px rgba(0,0,0,.3);
max-width: 90vw; text-align: center;
}
/* ---------- meetings page ---------- */
.meeting-item { cursor: pointer; }
.meeting-item:hover { outline: 2px solid var(--blue-light); }
.summary-md { font-size: 14px; line-height: 1.65; white-space: pre-wrap; word-wrap: break-word; }
.summary-md h1, .summary-md h2 { color: var(--blue); margin: 10px 0 4px; font-size: 16px; }
/* ---------- v2: ภาษา / threads / mention / nested comments / schedule ---------- */
.lang-row { display: flex; gap: 6px; justify-content: center; margin: 6px 0 12px; flex-wrap: wrap; }
.lang-btn {
padding: 5px 12px; border-radius: 16px; border: 1px solid var(--border); background: var(--card);
cursor: pointer; font-size: 13px; font-family: inherit; color: var(--text);
}
.lang-btn.active { background: var(--blue); color: var(--on-brand); border-color: var(--blue); }
.modal .lang-row, .sidebar .lang-row { justify-content: flex-start; }
/* Boss 2026-09-01: กระดิ่งโชว์ "จำนวน" แทนจุดแดงเปล่า
⚠️ #threads-dot-m ยังใช้คลาสนี้ (id เดิมมีโค้ดอื่นอ้างอยู่) จึงต้องรับตัวเลขได้
ของเดิมเป็นวงกลม 9x9 ตายตัว ใส่เลขไปก็มองไม่เห็น */
.nav-dot {
position: absolute; top: 2px; right: 4px;
min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
background: var(--red); border: 2px solid var(--card);
color: #fff; font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums;
line-height: 13px; text-align: center;
}
/* ไม่มีเลข (ของเก่าที่ยังใช้เป็นจุดล้วน) = กลับไปเป็นวงกลมเล็กเหมือนเดิม */
.nav-dot:empty {
min-width: 0; width: 9px; height: 9px; padding: 0; border-radius: 50%;
top: 4px; right: 8px;
}
.side-nav .nav-btn, .bottom-nav .nav-btn { position: relative; }
/* ---- คอมเมนต์แบบ Facebook: กล่องคอมเมนต์ + เส้นแนวตั้งเส้นเดียว ---- */
/* หัวข้อ "N คอมเมนต์" เหนือกลุ่ม */
/* แถวบน: จำนวนคอมเมนต์ชิดขวา (เฟส) */
.cmt-topline { display: flex; justify-content: flex-end; padding: 2px 4px 0 46px; }
.cmt-count { font-size: 12.5px; font-weight: 600; color: var(--muted); }
/* แถบเรียงลำดับคอมเมนต์ */
.cmt-bar { display: flex; padding: 2px 4px 6px 46px; }
.cmt-sorts { display: flex; gap: 16px; }
.cmt-sort {
border: none; background: none; padding: 0; cursor: pointer; font-family: inherit;
font-size: 13px; font-weight: 600; color: var(--muted);
}
.cmt-sort:hover { text-decoration: underline; }
.cmt-sort.active { color: var(--blue); font-weight: 700; }
/* ปุ่ม "ดูการตอบกลับอีก N รายการ" */
.cmt-more {
border: none; background: none; padding: 4px 0; cursor: pointer; font-family: inherit;
font-size: 13px; font-weight: 600; color: var(--text);
display: flex; align-items: center; gap: 7px;
}
.cmt-more:hover { text-decoration: underline; }
.cmt-more-caret { font-size: 15px; color: var(--muted); }
/* ปุ่มขยายของการตอบซ้อน — เยื้องให้ตรงกับคอมเมนต์ชั้น 2 */
.cmt-more-wrap { padding-left: 34px; }
.cmt-group > .cmt-more { padding-left: 0; }
/* ช่องพิมพ์ตอบกลับท้ายกลุ่มคอมเมนต์ */
.cmt-composer {
display: flex; align-items: center; gap: 9px; margin-top: 6px; cursor: text;
}
.cmt-composer .avatar { width: 30px; height: 30px; font-size: 11px; flex: none; }
.cmt-composer-ph {
flex: 1; background: var(--bubble, rgba(127,127,127,.10));
border-radius: var(--radius-pill); padding: 8px 15px;
font-size: 13.5px; color: var(--muted);
}
.cmt-composer-send { color: var(--blue); font-size: 16px; padding-right: 6px; }
/* ช่องพิมพ์จริงเปิดอยู่ = ซ่อน placeholder ไม่ให้ขึ้นซ้อน 2 อัน (Boss แจ้ง 2026-08-21) */
#messages.ir-open .cmt-composer { display: none; }
/* กล่องครอบคอมเมนต์ทั้งก้อน — เส้นแนวตั้งเทาอ่อนเส้นเดียวยาวตลอดกลุ่ม */
.cmt-group {
margin: 0 0 6px 46px; padding-left: 12px;
border-left: 2px solid var(--border);
}
/* คอมเมนต์ในกล่อง: ไม่ต้องเยื้อง/ไม่ต้องมีเส้นของตัวเอง (กล่องจัดให้แล้ว) */
.cmt-group .msg.nested { margin-left: 0; padding-left: 0; margin-top: 0; margin-bottom: 2px; }
.cmt-group .msg.nested::before { content: none; }
/* ชั้น 2 เยื้องเข้าไปอีกขั้น อวตารเล็กลง */
.cmt-group .msg.nested[data-depth="2"] { margin-left: 34px; }
.msg.nested .avatar { width: 28px; height: 28px; font-size: 11px; }
.msg.nested[data-depth="2"] .avatar { width: 24px; height: 24px; font-size: 10px; }
/* บับเบิลเทากว้างเต็มแนว — ชื่อบรรทัดบน ข้อความบรรทัดล่าง */
.msg.nested .msg-bubble {
background: var(--bubble, rgba(127,127,127,.10));
border-radius: 14px; padding: 6px 12px 7px; max-width: 100%;
}
.msg.nested .msg-head { display: block; margin-bottom: 1px; }
.msg.nested .msg-name { font-size: 13px; font-weight: 700; }
.msg.nested .msg-text { font-size: 14px; }
.msg.nested[data-depth="2"] .msg-text { font-size: 13.5px; }
/* แถวปุ่มอยู่นอกบับเบิล (เฟส) */
/* แถวปุ่มอยู่ "นอก" บับเบิล (เฟส) — เยื้องเข้าให้ตรงกับข้อความในบับเบิล */
.msg.nested .msg-foot { margin: 4px 0 0; padding-left: 12px; gap: 14px; align-items: center; }
.msg.nested .msg-foot-btn { font-size: 11.5px; }
.msg-foot-time { font-size: 11.5px; color: var(--muted); }
.reply-to { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.msg-comment-btn {
border: none; background: none; color: var(--muted); font-size: 12px; cursor: pointer;
padding: 1px 6px; font-weight: 600; font-family: inherit;
}
.msg-comment-btn:hover { color: var(--blue); }
.mention { color: var(--blue); font-weight: 700; background: var(--blue-light); border-radius: 4px; padding: 0 3px; }
/* ⚠️⚠️ bottom เป็นค่าคงที่ 64px = "เดา" ความสูง composer (Boss แจ้ง 2026-08-31 พร้อมรูป)
composer จริงสูง 144px บนมือถือ / 89px บนคอม (แถบจัดข้อความ + textarea + แถวปุ่ม)
แถม textarea ยืดตามบรรทัดที่พิมพ์ → ป๊อปอัพทับข้อความที่กำลังพิมพ์อยู่ 84px
⇒ ผูกกับความสูงจริงผ่านตัวแปร --composer-h (ตั้งค่าตอนรันใน positionMentionPop())
ค่า fallback 150px เผื่อ JS ยังไม่ทัน — เกินดีกว่าทับ */
.mention-pop {
position: absolute; bottom: calc(var(--composer-h, 150px) + 8px); left: 12px; right: 12px; max-width: 380px; max-height: 220px;
overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: 12px;
box-shadow: 0 -6px 24px rgba(0,0,0,.15); z-index: 60;
}
.mention-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; font-size: 14px; }
.mention-item:hover, .mention-item.sel { background: var(--blue-light); }
/* ---------- โหมด @แผนก : ลิสต์สั้น ไม่บังข้อความ (Boss แจ้ง 2026-08-31) ----------
เดิมใช้แถวเดียวกับรายชื่อคน (สูง ~47px + avatar 22px) พอมี 26 แผนก
ป๊อปอัพสูงเต็มจอบังข้อความที่กำลังพิมพ์ ทั้งที่แต่ละแถวมีแค่ชื่อสั้น ๆ กับตัวเลข
→ แถวเตี้ยลง + ไอคอนเล็กลง + 2 คอลัมน์บนจอกว้าง = เห็นครบเร็วขึ้นโดยไม่กินที่ */
.mention-pop.dept-mode { max-height: 172px; padding: 4px; }
.mention-pop.dept-mode .mention-item {
padding: 5px 8px; font-size: 13px; gap: 6px; border-radius: 6px;
}
.mention-pop.dept-mode .mention-item span:first-of-type {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* หัวข้อบอกว่ากำลังดูอะไรอยู่ + นับรวม — กันงงว่าทำไมรายชื่อคนหายไป */
.mention-pop .dept-head {
position: sticky; top: 0; z-index: 1; background: var(--card);
padding: 6px 10px 5px; font-size: 11px; font-weight: 700; letter-spacing: .02em;
color: var(--muted); border-bottom: 1px solid var(--border); margin: -4px -4px 4px;
}
/* จอกว้างพอ = เรียง 2 คอลัมน์ ลดความสูงลงครึ่งหนึ่ง */
@media (min-width: 480px) {
.mention-pop.dept-mode { display: flex; flex-wrap: wrap; align-content: flex-start; }
.mention-pop.dept-mode .dept-head { flex: 0 0 100%; }
.mention-pop.dept-mode .mention-item { flex: 0 0 calc(50% - 2px); box-sizing: border-box; }
}
.chat-room { position: relative; }
.thread-item { cursor: pointer; }
.thread-item.unread { border-left: 4px solid var(--red); }
.thread-item:hover { outline: 2px solid var(--blue-light); }
/* ประกาศ: ย่อให้พอดีจอ (Boss 2026-08-28 "ป๊อปอัปใหญ่ไป")
เดิมเนื้อหายาวดันโมดัลสูง 62-69% ของจอ → จำกัดความสูงเนื้อหา ให้เลื่อนในตัวเอง */
.announce-item { border-left: 3px solid var(--amber); padding: 8px 11px; margin-bottom: 8px; background: var(--amber-soft); border-radius: 8px; }
.announce-item h4 { color: var(--blue-dark); margin-bottom: 4px; font-size: 14px; }
.announce-item .a-body {
white-space: pre-wrap; font-size: 13px; line-height: 1.55;
max-height: 26vh; overflow-y: auto; /* ยาวแค่ไหนก็ไม่ดันโมดัล */
-webkit-overflow-scrolling: touch;
}
#modal-announce { max-width: 380px; padding: 16px; }
#modal-announce h3 { font-size: 15px; margin-bottom: 9px; }
#modal-announce .modal-actions { margin-top: 9px; }
@media (max-width: 560px) {
.announce-item .a-body { max-height: 32vh; }
#modal-announce { padding: 14px; }
}
/* v3: ปุ่มอัปโหลดใหญ่ + คำแปล + unread badge */
.upload-big {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
border: 2px dashed var(--blue); border-radius: 14px; padding: 26px 14px; cursor: pointer;
background: var(--blue-light); margin-bottom: 10px; text-align: center; font-weight: 600; color: var(--blue-dark);
}
.upload-big:hover { background: var(--hot); }
.upload-big .up-icon { font-size: 40px; }
#share-result { display: flex; gap: 6px; margin-top: 8px; }
#share-result input { flex: 1; font-size: 13px; color: var(--blue-dark); }
.msg-translation {
margin-top: 4px; padding: 6px 10px; border-left: 3px solid var(--green);
background: var(--green-soft); border-radius: 6px; font-size: 14px; white-space: pre-wrap;
}
.msg-translation .tr-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.chan-unread {
background: var(--red); color: var(--on-brand); border-radius: 10px; font-size: 11px; font-weight: 700;
padding: 1px 7px; margin-left: auto;
}
.speaking { color: var(--blue) !important; }
/* ---------- nav ---------- */
.bottom-nav { display: none; }
.only-mobile { display: none; }
/* ================= MOBILE ================= */
@media (max-width: 860px) {
.two-col { grid-template-columns: 1fr; }
.only-mobile { display: inline-flex; }
.only-desktop { display: none; }
.sidebar {
position: fixed; inset: 0 22% 0 0; max-width: 320px; transform: translateX(-100%);
/* .3s + ease-out — Boss สั่ง 2026-09-03 18:52 "ปรับช้าลงนิดนึง ให้เห็นอนิเมชันขยับออกมา"
(เดิม .22s ease เร็วไปจนเหมือนโผล่ทันที) ease-out = ออกตัวเร็ว หน่วงตอนจบ ดูนุ่มกว่า */
transition: transform .3s cubic-bezier(.22,.61,.36,1); box-shadow: 4px 0 24px rgba(0,0,0,.25);
}
.sidebar.open { transform: translateX(0); }
.app { flex-direction: column; }
.main { padding-bottom: 58px; }
.bottom-nav {
display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--card);
border-top: 1px solid var(--border); z-index: 50; padding-bottom: env(safe-area-inset-bottom);
}
.nav-btn {
flex: 1; border: none; background: none; padding: 7px 2px 5px; font-size: 19px; cursor: pointer;
display: flex; flex-direction: column; align-items: center; gap: 1px; color: var(--muted); font-family: inherit;
}
.nav-btn span { font-size: 10px; }
.nav-btn.active { color: var(--blue); font-weight: 700; }
.msg-actions { display: flex; opacity: 0; pointer-events: none; }
.msg.show-actions .msg-actions { opacity: 1; pointer-events: auto; }
.messages { padding: 8px 6px 4px; }
.page-body { padding: 10px; }
/* mobile UX: ปุ่มใหญ่ กดง่าย + modal แบบ bottom sheet */
.icon-btn { font-size: 22px; padding: 9px; }
.composer textarea { font-size: 16px; }
.msg-text { font-size: 15.5px; }
.modal-backdrop { align-items: flex-end; padding: 0; }
.modal { max-width: 100%; border-radius: 18px 18px 0 0; max-height: 92vh; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
.btn { padding: 11px 18px; }
.cmt-count { margin-left: 32px; }
.cmt-group { margin-left: 32px; padding-left: 8px; }
.cmt-group .msg.nested[data-depth="2"] { margin-left: 22px; }
/* มือถือใช้ตัวแปรเดียวกัน — ห้ามกลับไป hardcode (composer สูง 144px) */
.mention-pop { bottom: calc(var(--composer-h, 150px) + 8px); }
}
/* ---------- theme toggle / install (เพิ่มพร้อมโหมดมืด+PWA) ---------- */
.head-tools { display: flex; align-items: center; gap: 2px; }
.theme-fab {
position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 12px; z-index: 5;
background: rgba(255,255,255,.16); color: #fff; backdrop-filter: blur(4px);
}
.theme-fab:active { background: rgba(255,255,255,.28); }
/* ---- ห้องล็อก / จัดการห้อง (roomlock 2026-08-19) ---- */
.chan-item.chan-locked { opacity: .62; }
.chan-item.chan-locked:hover { opacity: 1; }
.chan-pending { font-size: 12px; opacity: .8; }
.chan-sec { padding: 10px 12px 4px; font-size: 11px; letter-spacing: .04em;
text-transform: uppercase; opacity: .55; }
.mg-body { max-height: 62vh; overflow: auto; }
.mg-body h4 { margin: 14px 0 6px; font-size: 13px; opacity: .8; }
.ra-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ra-table th, .ra-table td { padding: 6px 8px; text-align: left;
border-bottom: 1px solid rgba(127,127,127,.22); vertical-align: middle; }
.ra-key { font-family: ui-monospace, Menlo, monospace; font-size: 12px;
word-break: break-all; }
.ra-pre { background: rgba(127,127,127,.12); padding: 10px; border-radius: 8px;
font-size: 12px; overflow-x: auto; white-space: pre; }
.btn-mini { padding: 2px 7px; font-size: 12px; border-radius: 6px; cursor: pointer;
border: 1px solid rgba(127,127,127,.35); background: transparent; color: inherit; }
.btn-mini:hover { background: rgba(127,127,127,.18); }
.btn-mini.danger { color: #EF4444; border-color: rgba(239,68,68,.45); }
.chan-sec-btn { cursor: pointer; display: flex; align-items: center; gap: 6px;
user-select: none; }
.chan-sec-btn:hover { opacity: .9; }
.chan-sec-n { margin-left: auto; opacity: .6; font-size: 10px; }
/* ---- เลขา AI ส่วนตัว (2026-08-19) ---- */
.sec-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0;
padding: 14px 16px; gap: 10px; }
.sec-head { display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px; flex-wrap: wrap; }
.sec-head h2 { margin: 0 0 2px; font-size: 18px; }
.sec-head-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.sec-chat { flex: 1; min-height: 0; overflow-y: auto; display: flex;
flex-direction: column; gap: 10px; padding: 6px 2px; }
.sec-empty { margin: auto; text-align: center; opacity: .5; font-size: 40px; }
.sec-empty p { font-size: 14px; margin-top: 8px; max-width: 380px; }
.sec-msg { display: flex; flex-direction: column; max-width: 86%; }
.sec-msg.me { align-self: flex-end; align-items: flex-end; }
.sec-msg.bot { align-self: flex-start; }
.sec-bubble { padding: 9px 13px; border-radius: 14px; line-height: 1.55;
font-size: 14px; word-break: break-word; }
.sec-msg.me .sec-bubble { background: #0F4C81; color: #fff;
border-bottom-right-radius: 4px; }
.sec-msg.bot .sec-bubble { background: rgba(127,127,127,.16);
border-bottom-left-radius: 4px; }
.sec-bubble ul { margin: 6px 0; padding-left: 20px; }
.sec-bubble blockquote { margin: 6px 0; padding-left: 10px;
border-left: 3px solid rgba(127,127,127,.4); opacity: .85; }
.sec-eng { font-size: 10px; opacity: .45; margin-top: 3px; padding-left: 4px; }
.sec-dots { display: flex; gap: 4px; align-items: center; }
.sec-dots span { width: 7px; height: 7px; border-radius: 50%;
background: currentColor; opacity: .35; animation: secblink 1.2s infinite; }
.sec-dots span:nth-child(2) { animation-delay: .2s; }
.sec-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes secblink { 0%,80%,100% { opacity: .25 } 40% { opacity: .9 } }
.sec-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.sec-chip { padding: 5px 11px; border-radius: 999px; font-size: 12px;
cursor: pointer; border: 1px solid rgba(127,127,127,.35);
background: transparent; color: inherit; }
.sec-chip:hover { background: rgba(127,127,127,.15); }
.sec-input { display: flex; gap: 8px; align-items: flex-end; }
.sec-input textarea { flex: 1; resize: none; padding: 9px 12px; border-radius: 12px;
font: inherit; font-size: 14px; }
.sec-input .btn { padding: 9px 16px; }
.sec-lb { display: block; margin: 10px 0 4px; font-size: 12px; opacity: .75; }
.mg-body input, .mg-body textarea { width: 100%; padding: 7px 10px;
border-radius: 8px; font: inherit; font-size: 13px; }
.sec-factadd { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.sec-factadd input { flex: 1; }
.sec-ok { color: #10B981; font-size: 12px; }
.sec-wait { color: #F59E0B; font-size: 12px; }
.sec-no { color: #94A3B8; font-size: 12px; }
.sec-steps { list-style: none; padding: 0; margin: 8px 0; }
.sec-steps li { padding: 7px 0; border-bottom: 1px solid rgba(127,127,127,.15);
font-size: 14px; }
.sec-step-done { opacity: .55; }
.sec-privacy { margin-top: 12px; padding: 8px 10px; border-radius: 8px;
background: rgba(16,185,129,.1); font-size: 12px; }
@media (max-width: 640px) { .sec-msg { max-width: 94%; } }
/* ============================================================================
UI/UX REDESIGN LAYER — 2026-08-19 (uiux-20260819-1255)
งานนี้ "แก้หน้าตาเท่านั้น" ระบบการทำงานเดิมทุกอย่าง
วางไว้ท้ายไฟล์เพื่อให้ override กฎเดิมด้วยลำดับ cascade ไม่ต้องรื้อ 616 บรรทัดข้างบน
หลักการ: (1) พื้นผิวเดียว sidebar ไม่ใช่บล็อกน้ำเงินทึบอีก
(2) น้ำเงิน X10 = accent เท่านั้น ไม่ใช่พื้นหลัง
(3) type scale + spacing 4px grid
(4) responsive 3 ระดับ: <720 / 720-1100 / >1100
========================================================================== */
:root {
/* ---- โทนสีโหมดสว่าง (เพิ่ม 2026-08-22) ----
⚠️ เดิมตัวแปรชุดนี้นิยามไว้แค่ใน html[data-theme="dark"] และ html[data-accent="..."]
โหมดสว่างปกติ (ไม่เลือกชุดสี) จึงไม่มีค่า → var(--blue) ว่าง สวิตช์เปิด/ปิดดูเหมือนกัน
ค่าที่ใส่นี้ = สีที่แอปฮาร์ดโค้ดไว้อยู่แล้ว (#0F4C81 ใช้ 25 ที่, #E2E8F0 15 ที่, #64748B 12 ที่)
จึงไม่เปลี่ยนหน้าตาเดิม แค่ทำให้ตัวแปรมีค่าจริง */
--blue: #0F4C81; --blue-dark: #0B3A63; --blue-light: #EAF1F8;
--bg: #F7F9FB; --card: #FFFFFF; --text: #1E293B; --muted: #64748B;
--border: #E2E8F0; --sunken: #F4F6F9; --on-brand: #FFFFFF;
--green: #047857; --red: #B91C1C; --amber: #B45309;
--red-bg: #FEE2E2;
--bubble: #EFF2F6; --bubble-mine: #0F4C81; --msg-hover: rgba(15,76,129,.055);
/* ---- type scale (เดิมกระโดด 13.5/14.5/15.5 ไม่มีระบบ) ---- */
--fs-xs: 11px; --fs-sm: 12.5px; --fs-md: 14px; --fs-base: 15px;
--fs-lg: 17px; --fs-xl: 20px;
--lh: 1.55;
/* ---- spacing 4px grid ---- */
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;
/* ---- รัศมี: อ่อนลง มินิมอลขึ้น ---- */
--radius: 10px; --radius-sm: 8px; --radius-lg: 14px; --radius-pill: 999px;
/* ---- เงา: บางลงมาก ใช้เส้นขอบเป็นตัวแบ่งหลักแทนเงา ---- */
--shadow: 0 1px 2px rgba(16,24,40,.04);
--shadow-pop: 0 4px 16px rgba(16,24,40,.10);
--shadow-modal: 0 12px 40px rgba(16,24,40,.18);
/* ---- พื้นผิวเดียว: sidebar เลิกเป็นน้ำเงินทึบ กลืนกับแอป ---- */
--side-bg: #FFFFFF;
--side-text: #1E293B;
--side-muted: #64748B;
--side-section: #94A3B8;
--side-item: #334155;
--side-hover: rgba(15,76,129,.06);
--side-raise: transparent;
--side-input: #F4F6F9;
--side-ph: #94A3B8;
--side-active: var(--blue-light);
--side-presence: #CBD5E1;
--side-border: #E6EBF1;
--transition: 120ms cubic-bezier(.4,0,.2,1);
--focus: 0 0 0 3px rgba(15,76,129,.28);
}
html[data-theme="dark"] {
--shadow: 0 1px 2px rgba(0,0,0,.30);
--shadow-pop: 0 4px 16px rgba(0,0,0,.45);
--shadow-modal: 0 12px 40px rgba(0,0,0,.60);
--side-bg: #131D29;
--side-text: #E5EAF0;
--side-muted: #94A3B8;
--side-section: #6B7B8F;
--side-item: #C3CEDB;
--side-hover: rgba(255,255,255,.05);
--side-raise: transparent;
--side-input: #1C2836;
--side-ph: #6B7B8F;
--side-active: #1A3350;
--side-presence: #3A4759;
--side-border: #24303F;
--focus: 0 0 0 3px rgba(77,155,224,.34);
}
body { font-size: var(--fs-base); line-height: var(--lh); -webkit-font-smoothing: antialiased; }
/* โฟกัสมองเห็นได้ทุกที่ (เดิม outline ทับขอบ input จนดูเพี้ยน) */
:focus-visible { outline: none; box-shadow: var(--focus); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--blue); box-shadow: var(--focus); }
/* ---------------- ปุ่ม / อินพุต: บางลง สม่ำเสมอ ---------------- */
.btn {
border-radius: var(--radius-sm); font-size: var(--fs-md); font-weight: 500;
padding: 9px 14px; transition: background var(--transition), border-color var(--transition);
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn:hover { background: var(--side-hover); }
.btn.primary { font-weight: 600; }
.btn.primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn.ghost { border-color: transparent; }
.btn.ghost:hover { background: var(--side-hover); }
.icon-btn {
border-radius: var(--radius-sm); transition: background var(--transition);
display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: var(--side-hover); }
input, textarea, select {
border-radius: var(--radius-sm); font-size: var(--fs-base);
transition: border-color var(--transition), box-shadow var(--transition);
}
/* ---------------- Sidebar: พื้นผิวเดียว + เส้นแบ่ง ---------------- */
.sidebar {
width: 264px; border-right: 1px solid var(--side-border);
background: var(--side-bg); color: var(--side-text);
}
.sidebar-head { padding: var(--s3) var(--s3) var(--s2); }
.brand { font-size: var(--fs-base); font-weight: 700; letter-spacing: -.01em; }
.sidebar .icon-btn { color: var(--side-muted); }
.sidebar .icon-btn:hover { color: var(--side-text); }
.sidebar-me {
margin: 0 var(--s2) var(--s2); padding: var(--s2);
border-radius: var(--radius); background: transparent;
border: 1px solid transparent; transition: background var(--transition);
}
.sidebar-me:hover { background: var(--side-hover); }
.me-name { font-size: var(--fs-md); font-weight: 600; }
.me-status { font-size: var(--fs-sm); }
/* ---- nav เดสก์ท็อป: แนวตั้ง มีป้ายชื่อ ไม่ใช่ไอคอนเปล่า 6 ช่อง ---- */
.side-nav {
display: flex; flex-direction: column; gap: 1px;
margin: 0 var(--s2) var(--s2);
}
.side-nav .nav-btn {
flex: none; display: flex; align-items: center; gap: 10px;
padding: 8px 10px; border-radius: var(--radius-sm);
background: transparent; color: var(--side-item);
font-size: var(--fs-md); font-weight: 500; text-align: left;
font-family: inherit; transition: background var(--transition), color var(--transition);
}
.side-nav .nav-btn:hover { background: var(--side-hover); color: var(--side-text); }
.side-nav .nav-btn.active {
background: var(--side-active); color: var(--blue); font-weight: 600;
}
.side-nav .nav-icon { font-size: 16px; line-height: 1; width: 20px; text-align: center; flex-shrink: 0; }
.side-nav .nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-nav .nav-dot { position: static; margin-left: auto; border: none; }
.side-nav .nav-dot:empty { width: 8px; height: 8px; } /* จุดล้วนคงเดิม · มีเลขให้ป้ายกว้างตามเลข */
.side-admin { margin: 0 var(--s2) var(--s2); padding-top: var(--s2); border-top: 1px solid var(--side-border); }
.side-admin .nav-btn-wide {
justify-content: flex-start; gap: 10px; background: transparent; color: var(--side-item);
padding: 8px 10px; border-radius: var(--radius-sm); font-size: var(--fs-md);
transition: background var(--transition);
}
.side-admin .nav-btn-wide:hover { background: var(--side-hover); }
.side-admin .nav-btn-wide.active { background: var(--side-active); color: var(--blue); }
.side-admin .nav-btn-label { font-size: var(--fs-md); font-weight: 500; }
.side-admin .nav-btn-wide.active .nav-btn-label { font-weight: 600; }
.side-search {
margin: 0 var(--s2) var(--s2); width: calc(100% - var(--s4));
background: var(--side-input); border: 1px solid transparent;
color: var(--side-text); font-size: var(--fs-md); padding: 8px 12px;
}
.side-search:focus { background: var(--card); border-color: var(--blue); }
.side-scroll { padding-bottom: var(--s3); scrollbar-width: thin; }
.side-scroll::-webkit-scrollbar { width: 8px; }
.side-scroll::-webkit-scrollbar-thumb { background: var(--side-presence); border-radius: 4px; }
.side-scroll::-webkit-scrollbar-track { background: transparent; }
.side-section {
font-size: var(--fs-xs); letter-spacing: .05em; color: var(--side-section);
padding: var(--s4) var(--s3) var(--s1); font-weight: 600;
}
.chan-item, .user-item {
margin: 0 var(--s2) 1px; padding: 7px 10px; border-radius: var(--radius-sm);
font-size: var(--fs-md); color: var(--side-item);
transition: background var(--transition);
}
.chan-item:hover, .user-item:hover { background: var(--side-hover); }
.chan-item.active { background: var(--side-active); color: var(--blue); font-weight: 600; }
.avatar { width: 30px; height: 30px; font-size: 13px; }
.sidebar-me .avatar { width: 34px; height: 34px; }
/* ---------------- หัวหน้า / หัวห้อง ---------------- */
.page-head, .chat-head {
padding: var(--s2) var(--s4); border-bottom: 1px solid var(--border);
min-height: 54px; gap: var(--s2);
}
.page-head h2 { font-size: var(--fs-lg); font-weight: 650; color: var(--text); letter-spacing: -.01em; }
.chat-name { font-size: var(--fs-base); font-weight: 650; letter-spacing: -.01em; }
.chat-topic { font-size: var(--fs-sm); }
.chat-title { border-radius: var(--radius-sm); padding: 2px 6px; margin-left: -6px; transition: background var(--transition); }
.chat-title:hover { background: var(--side-hover); }
.chat-actions { gap: 2px; align-items: center; }
.page-body { padding: var(--s4); }
/* ---------------- ข้อความ: จำกัดความกว้างให้อ่านสบายบนจอกว้าง ---------------- */
.messages { padding: var(--s3) var(--s4) var(--s1); scroll-behavior: smooth; }
.msg { padding: var(--s1) var(--s2); border-radius: var(--radius-sm); gap: 10px; }
.msg:hover { background: var(--side-hover); }
.msg-name { font-size: var(--fs-md); font-weight: 650; }
.msg-time { font-size: var(--fs-xs); }
.msg-text { font-size: var(--fs-md); line-height: 1.55; }
.msg .avatar { width: 30px; height: 30px; }
.day-sep span {
background: var(--card); border-color: var(--border); font-size: var(--fs-sm);
padding: 3px 12px; border-radius: var(--radius-pill);
}
.msg-actions {
border-radius: var(--radius-sm); box-shadow: var(--shadow-pop);
top: -12px; right: var(--s3); overflow: hidden;
}
.msg-actions button { padding: 6px 9px; transition: background var(--transition); }
.msg-file, .msg-reply { border-radius: var(--radius-sm); }
/* ---------------- Composer: ปุ่มรองยุบใน ＋ ช่องพิมพ์กว้างขึ้น ---------------- */
.composer {
gap: var(--s1); padding: var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom));
align-items: flex-end;
}
.composer textarea {
border-radius: var(--radius-lg); padding: 9px 14px; font-size: var(--fs-base);
background: var(--side-input); border-color: transparent; line-height: 1.5;
}
.composer textarea:focus { background: var(--card); border-color: var(--blue); }
.icon-btn.send {
background: var(--blue); color: var(--on-brand); font-size: 17px;
width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
}
.icon-btn.send:hover { background: var(--blue-dark); }
/* popover ปุ่มรอง (＋ ใน composer, ⋯ ในหัวห้อง) */
.pop-menu {
position: absolute; z-index: 70; background: var(--card);
border: 1px solid var(--border); border-radius: var(--radius);
box-shadow: var(--shadow-pop); padding: var(--s1); min-width: 196px;
display: flex; flex-direction: column; gap: 1px;
}
.pop-menu.hidden { display: none; }
.pop-menu button {
display: flex; align-items: center; gap: 10px; width: 100%;
border: none; background: transparent; color: var(--text);
padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer;
font-size: var(--fs-md); font-family: inherit; text-align: left;
transition: background var(--transition);
}
.pop-menu button:hover { background: var(--side-hover); }
.pop-menu button .pm-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
/* ออกจากห้อง — สีแดงและมีเส้นคั่น ให้ต่างจากเมนูปกติ กันกดพลาด (Boss สั่ง 2026-08-31) */
.pop-menu button.pm-danger { color: var(--red); border-top: 1px solid var(--border); margin-top: 4px; padding-top: 10px; }
.pop-menu button.pm-danger:hover { background: var(--red-bg); }
.pop-menu .pm-sep { height: 1px; background: var(--border); margin: var(--s1) 0; }
/* .composer เป็น containing block ของเมนู ＋ (ย้าย div เข้ามาข้างในแล้ว)
position:absolute จึงหลุดจาก flex ไม่กินที่ในแถว */
.composer { position: relative; }
.composer-more { bottom: calc(100% + 6px); left: var(--s2); }
/* .chat-actions เป็น containing block ของเมนู ⋯ (ย้าย div เข้ามาข้างในแล้ว) */
.chat-actions { position: relative; }
.head-more { top: calc(100% + 6px); right: 0; }
/* ---------------- การ์ด / ตาราง / pill ---------------- */
.card {
border-radius: var(--radius); padding: var(--s4); margin-bottom: var(--s3);
border: 1px solid var(--border); box-shadow: none;
}
.card h3 { font-size: var(--fs-md); font-weight: 650; color: var(--text); }
.two-col { gap: var(--s3); }
.tile {
border-radius: var(--radius); padding: var(--s3) var(--s4);
border: 1px solid var(--border); box-shadow: none;
}
.tile .t-num { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; }
.tile .t-label { font-size: var(--fs-sm); }
.tab {
border-radius: var(--radius-pill); font-size: var(--fs-md); padding: 6px 14px;
transition: background var(--transition), border-color var(--transition);
}
.tab:hover { background: var(--side-hover); }
.pill { font-size: var(--fs-xs); border-radius: var(--radius-pill); padding: 2px 8px; font-weight: 600; }
.tbl th { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; }
.tbl td { font-size: var(--fs-md); }
/* ---------------- โมดัล / toast ---------------- */
.modal { border-radius: var(--radius-lg); padding: var(--s5); }
.modal h3 { font-size: var(--fs-lg); font-weight: 650; color: var(--text); }
.modal-backdrop { backdrop-filter: blur(2px); }
.toast { border-radius: var(--radius-pill); font-size: var(--fs-md); box-shadow: var(--shadow-modal); }
/* ---------------- login: มินิมอล ไม่ใช้ gradient จัด ---------------- */
.login-screen { background: var(--bg); }
html[data-theme="dark"] .login-screen { background: var(--bg); }
.login-card {
border-radius: var(--radius-lg); padding: var(--s6) var(--s5);
border: 1px solid var(--border); box-shadow: var(--shadow-pop); max-width: 372px;
}
.login-logo { font-size: 42px; }
.login-card h1 { font-size: var(--fs-xl); color: var(--text); font-weight: 700; letter-spacing: -.02em; }
.theme-fab { background: transparent; color: var(--muted); backdrop-filter: none; }
.theme-fab:hover { background: var(--side-hover); }
.lang-btn { border-radius: var(--radius-pill); font-size: var(--fs-sm); transition: background var(--transition); }
/* ---------------- backdrop ของ sidebar มือถือ (เดิมไม่มี) ---------------- */
.side-backdrop {
position: fixed; inset: 0; background: var(--backdrop); z-index: 39;
opacity: 0; pointer-events: none; transition: opacity var(--transition);
}
.side-backdrop.show { opacity: 1; pointer-events: auto; }
/* ============================================================
RESPONSIVE 3 ระดับ (เดิมมี breakpoint เดียวที่ 860px)
============================================================ */
/* ---- เดสก์ท็อปกว้าง: จำกัดความกว้างเนื้อหาให้อ่านสบาย ---- */
@media (min-width: 1101px) {
.messages > * { width: 100%; max-width: 900px; margin-left: 0; margin-right: auto; }
/* กล่องพิมพ์กว้างเต็มห้อง (Boss สั่ง 2026-08-30) — เดิมถูกตัดที่ 900px เหลือที่ว่างด้านขวา
ตอนเปิดแผงตอบกลับไม่ต้องทำอะไรเพิ่ม: body.thr-on ดัน padding-right 30vw ให้ .app อยู่แล้ว
กล่องจึงหดตามห้องเองแบบ Slack */
.x10v3 .composer { max-width: none; margin-right: 0; }
.composer { padding-left: var(--s4); padding-right: var(--s4); }
.composer > * { align-self: flex-end; }
.page-body > .card, .page-body > .two-col, .page-body > .tiles,
.page-body > .side-section, .page-body > #threads-list {
max-width: 1180px; margin-left: auto; margin-right: auto;
}
.sidebar { width: 272px; }
}
/* ---- แท็บเล็ต: sidebar ยุบเป็นแถบไอคอน ประหยัดพื้นที่แต่ยังเห็นห้อง ---- */
@media (min-width: 861px) and (max-width: 1100px) {
.sidebar { width: 224px; }
.side-nav .nav-btn { padding: 7px 8px; font-size: var(--fs-sm); }
.chan-item, .user-item { font-size: var(--fs-sm); }
}
/* ---- มือถือ ---- */
@media (max-width: 860px) {
.sidebar {
inset: 0 auto 0 0; width: 84vw; max-width: 300px;
border-right: 1px solid var(--side-border);
box-shadow: 8px 0 32px rgba(16,24,40,.16);
transition: transform 200ms cubic-bezier(.4,0,.2,1);
}
/* บนมือถือ nav อยู่ที่แถบล่างแล้ว ไม่ต้องมีซ้ำในแถบข้าง = ประหยัดที่ให้รายชื่อห้อง */
.sidebar .side-nav { display: none; }
.sidebar .side-admin { margin-top: 0; border-top: none; }
.main { padding-bottom: 0; }
.bottom-nav {
background: var(--card); border-top: 1px solid var(--border);
padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav .nav-btn {
padding: 7px 2px 5px; gap: 2px; font-size: 20px;
transition: color var(--transition);
}
.bottom-nav .nav-btn span { font-size: 10.5px; font-weight: 500; letter-spacing: -.01em; }
.bottom-nav .nav-btn.active { color: var(--blue); font-weight: 600; }
.bottom-nav .nav-btn.active span { font-weight: 700; }
/* แชทเต็มจอ: แถบล่างซ่อนตอนอยู่ในห้อง ให้ composer ติดขอบจอจริง */
.page-head, .chat-head { min-height: 52px; padding: var(--s2) var(--s3); }
.messages { padding: var(--s2) var(--s2) var(--s1); }
.msg { padding: var(--s1) var(--s2); }
.msg-text { font-size: var(--fs-base); }
.composer { padding: var(--s2) var(--s2) calc(var(--s2) + env(safe-area-inset-bottom)); }
.composer textarea { font-size: 16px; } /* กัน iOS zoom ตอนโฟกัส */
.icon-btn { font-size: 21px; padding: 8px; min-width: 42px; min-height: 42px; } /* เป้าแตะ 42px */
.icon-btn.send { width: 42px; height: 42px; font-size: 18px; }
.btn { padding: 10px 16px; min-height: 42px; }
.page-body { padding: var(--s3) var(--s2); }
.card { padding: var(--s3); border-radius: var(--radius); }
.modal { border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: var(--s4) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom)); }
.pop-menu { min-width: 210px; }
.pop-menu button { padding: 11px 10px; font-size: var(--fs-base); }
.composer-more { left: var(--s2); right: var(--s2); }
.head-more { right: 0; }
.toast { bottom: 84px; }
}
/* ---- จอเล็กมาก: ลดขนาดลงอีกขั้น ---- */
@media (max-width: 400px) {
.bottom-nav .nav-btn span { font-size: 9.5px; }
.chat-actions .icon-btn { min-width: 38px; padding: 7px; }
}
/* ---- ลดการเคลื่อนไหวถ้าผู้ใช้ตั้งค่าไว้ ---- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
.messages { scroll-behavior: auto; }
}
/* จุดแดงบนปุ่ม ⋯ / ＋ — .nav-dot เป็น absolute จึงต้องมี ancestor ที่ positioned */
.chat-actions .icon-btn, .composer .icon-btn { position: relative; }
#head-more-dot { top: 5px; right: 5px; border-color: var(--card); }
/* ปุ่ม ⋯ และ ＋ เป็นสัญลักษณ์ ไม่ใช่อีโมจิ — จัดให้อยู่กลางและหนาพอมองเห็น */
#btn-head-more, #btn-composer-more { font-size: 20px; font-weight: 600; line-height: 1; color: var(--muted); }
#btn-head-more:hover, #btn-composer-more:hover { color: var(--text); }
/* ============================================================
แก้ทับซ้อนบนมือถือ (พบตอนทดสอบจริง 2026-08-19)
เดิม .main มี padding-bottom:58px กันแถบล่างทับ — เลย์เอาต์ใหม่ให้
composer ติดขอบจอ จึงต้องจัดการที่ระดับ layout ไม่ใช่ padding
หลัก: อยู่ในห้องแชท = composer เป็นงานหลัก ซ่อนแถบล่าง (ยังมี ☰ + ปุ่มกลับ)
หน้าอื่น = แถบล่างอยู่ในกระแส flex เลยไม่ทับอะไร
============================================================ */
@media (max-width: 860px) {
/* .app เป็น flex column แล้ว: main ยืด, bottom-nav เป็นแถวปกติ ไม่ fixed
=> ไม่มีการทับซ้อนอีก และ 100dvh ยังคุมความสูงรวมให้พอดีจอ */
.bottom-nav { position: static; z-index: 50; flex-shrink: 0; }
.main { min-height: 0; }
/* อยู่ในห้องแชท → ซ่อนแถบล่าง ให้ช่องพิมพ์เต็มจอ (คลาสใส่โดย app.js) */
body.in-room .bottom-nav { display: none; }
/* 7 ปุ่มใน 390px ป้ายชื่อเบียดอ่านไม่ออก → ให้ตัดคำด้วย ellipsis ไม่ดันกัน */
.bottom-nav .nav-btn { min-width: 0; padding: 6px 1px 4px; }
.bottom-nav .nav-btn span {
max-width: 100%; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; padding: 0 1px;
}
}
/* ---- ย้ำกฎ show/hide ตามอุปกรณ์ ----
.icon-btn{display:inline-flex} ในเลเยอร์นี้อยู่หลัง .only-mobile{display:none}
(specificity เท่ากัน ตัวหลังชนะ) → ปุ่ม ☰ เคยโผล่บนเดสก์ท็อป */
.only-mobile { display: none !important; }
.only-desktop { display: inline-flex; }
@media (max-width: 860px) {
.only-mobile { display: inline-flex !important; }
.only-desktop { display: none !important; }
}
/* ============================================================
ป้ายสถานะล็อกห้อง (Boss สั่ง 2026-08-19)
- ห้องล็อก = ป้ายเหลือง 🔒 ล็อก / ห้องเปิด = ป้ายเขียว 🌐 เปิด
- เจ้าของห้อง/แอดมินกดสลับได้ (คนอื่นเป็นป้ายเฉยๆ กดไม่ได้)
ใช้ตัวแปรธีม (--amber/--green/--border) → โหมดมืดกลืนเองไม่ต้องเขียนซ้ำ
============================================================ */
.chat-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* ชื่อห้องยืด/ย่อได้ แต่ต้องเหลือที่ให้ป้าย — ไม่ใส่ shrink:1 ชื่อจะกินจนป้ายกว้าง 0 */
.chat-name-row .chat-name { min-width: 0; flex: 0 1 auto; }
.lock-badge {
flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; font-weight: 700; line-height: 1;
padding: 3px 8px; border-radius: 999px;
border: 1px solid var(--border); background: var(--card); color: var(--muted);
cursor: default; white-space: nowrap; font-family: inherit;
}
.lock-badge.is-locked { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, transparent); background: color-mix(in srgb, var(--amber) 12%, var(--card)); }
.lock-badge.is-open { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); background: color-mix(in srgb, var(--green) 12%, var(--card)); }
/* กดสลับได้เฉพาะเจ้าของห้อง/แอดมิน */
.lock-badge.can-toggle { cursor: pointer; }
.lock-badge.can-toggle:hover { filter: brightness(1.06); transform: translateY(-1px); }
.lock-badge.can-toggle:active { transform: none; }
.lock-badge[disabled] { opacity: .6; cursor: progress; }
/* จอแคบ: เหลือแต่ไอคอน กันเบียดชื่อห้อง */
@media (max-width: 560px) { .lock-badge .lb-text { display: none; } .lock-badge { padding: 3px 6px; } }
/* ============================================================
เมนูคำสั่ง "/" (Boss สั่ง 2026-08-19)
ใช้โครง .mention-pop เดิม (ตำแหน่ง/เงา/โหมดมืดได้ฟรี) เพิ่มแค่ layout ต่อบรรทัด
============================================================ */
.cmd-pop { max-width: 460px; max-height: 260px; }
.cmd-item { display: flex; flex-direction: column; gap: 2px; padding: 7px 12px; cursor: pointer; font-size: 14px; }
.cmd-item:hover, .cmd-item.sel { background: var(--blue-light); }
.cmd-item .cmd-line { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.cmd-item .cmd-name { font-weight: 700; color: var(--blue); font-family: ui-monospace, monospace; }
.cmd-item .cmd-args { font-size: 12px; color: var(--muted); font-family: ui-monospace, monospace; }
.cmd-item .cmd-desc { font-size: 12px; color: var(--muted); }
/* ป้ายบอกว่าคำสั่งนี้สิทธิ์ระดับไหน — กันคนสงสัยว่าทำไมเพื่อนไม่มีคำสั่งนี้ */
.cmd-item .cmd-perm { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 999px;
border: 1px solid var(--border); color: var(--muted); }
.cmd-item .cmd-perm.p-admin { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.cmd-item .cmd-perm.p-owner { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
/* ผลลัพธ์คำสั่งที่เห็นคนเดียว (ไม่ได้โพสต์ลงห้อง) */
.cmd-reply { white-space: pre-wrap; font-size: 13px; line-height: 1.5; }
@media (max-width: 560px) { .cmd-pop { max-width: none; } .cmd-item .cmd-desc { display: none; } }
/* ===== อัลบั้ม: หลายไฟล์ในข้อความเดียว ===== */
/* ⚠️ width คงที่ 332px + การ์ดหุ้มที่ max-width:100% = จอแคบกริดล้นออกนอกกรอบ
(Boss 2026-08-28: "กรอบหลังรูปไม่ครอบคลุมรูปทั้งสองในมือถือ")
ใช้ min() ให้กริดหดตามพื้นที่จริงเสมอ */
.album-grid { display: grid; gap: 3px; width: min(332px, 100%); border-radius: 8px; overflow: hidden; }
.album-img { width: 100%; aspect-ratio: 1; object-fit: cover; cursor: pointer; display: block; }
.album-grid:has(.album-img:only-child) .album-img { aspect-ratio: auto; max-height: 320px; object-fit: contain; }
.album-files { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
/* การ์ดอัลบั้ม: รูป + ไฟล์ + ข้อความกำกับ = กล่องเดียว ไม่ให้ดูเหมือนหลายข้อความ */
.album-card {
display: block; width: fit-content; max-width: min(340px, 100%); padding: 4px;
border: 1px solid var(--border); border-radius: 10px; background: var(--sunken);
box-sizing: border-box; /* padding+เส้นขอบต้องนับรวมใน max-width ไม่งั้นเกินไป 10px */
overflow: hidden; /* กันลูกใดๆ ทะลุกรอบมน */
}
.album-card .album-grid { border-radius: 7px; }
/* caption เหนือรูป: เว้นล่างให้ห่างกริด ไม่เว้นบนเกิน (ติดหัวข้อความ) */
.album-caption { margin: 2px 4px 6px; }
/* คำบรรยายของรูป/ไฟล์เดี่ยว — อยู่เหนือรูป เว้นช่องไฟไม่ให้แนบติด (Boss สั่ง 2026-08-28) */
.file-caption { margin: 2px 4px 6px; }
/* ป้ายจำนวนไฟล์ซ้อนมุมขวาบนของรูป — ผูกกับ gridwrap ไม่ใช่การ์ด กัน caption ยาวถูกทับ */
.album-gridwrap { position: relative; width: fit-content; max-width: 100%; }
.album-count {
position: absolute; top: 6px; right: 6px; z-index: 1;
background: rgba(0,0,0,.55); color: #fff; padding: 1px 7px; border-radius: 10px; font-size: 11px;
}
/* เอกสารล้วน (ไม่มีรูป) — ป้ายเป็นบรรทัดปกติ ไม่ลอยทับชื่อไฟล์ */
.album-count.inline {
position: static; background: none; color: var(--muted); padding: 0 4px; font-size: 11px; margin-bottom: 2px;
}
/* ดูรูปเต็มจอ */
.lightbox {
position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.9);
display: flex; align-items: center; justify-content: center;
}
.lightbox.hidden { display: none; }
.lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; display: block; }
/* ============================================================
ดูรูป: ซูม + วาดทับ (Boss สั่ง 2026-08-30 — แจ้งบัคง่ายขึ้น)
.lb-stage ครอบรูป+canvas ให้ขยับ/ซูมไปพร้อมกัน ลายเส้นจึงไม่หลุดจากรูป
============================================================ */
.lb-stage {
position: relative; display: inline-block; line-height: 0;
transform-origin: center center; transition: transform .12s ease-out; touch-action: none;
}
.lb-stage.lb-pannable { cursor: grab; }
.lb-stage.lb-pannable:active { cursor: grabbing; }
/* canvas ต้องทับรูปพอดีเป๊ะ — รูปถูกย่อด้วย max-width/height จึงต้องอิง 100% ของ .lb-stage */
.lb-canvas {
position: absolute; inset: 0; width: 100%; height: 100%;
cursor: crosshair; touch-action: none;
}
.lb-canvas.hidden { display: none; }
/* แถบเครื่องมือล่าง — หลบ safe-area ของมือถือ และเลื่อนแนวนอนได้เมื่อจอแคบ */
.lb-bar {
position: absolute; left: 50%; transform: translateX(-50%);
bottom: calc(12px + env(safe-area-inset-bottom));
display: flex; align-items: center; gap: 6px; justify-content: flex-start;
/* แถบเดียวเลื่อนแนวนอน — เดิม flex-wrap ทำให้ปุ่มเซฟตกลงไปแถวสอง หาไม่เจอ */
max-width: 96vw; padding: 7px 9px; overflow-x: auto; overflow-y: hidden;
scrollbar-width: none;
background: rgba(28,28,30,.94); border: 1px solid rgba(255,255,255,.14);
border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.45);
}
.lb-bar::-webkit-scrollbar { display: none; }
.lb-grp { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.lb-grp + .lb-grp { border-left: 1px solid rgba(255,255,255,.16); padding-left: 7px; }
.lb-btn {
min-width: 34px; height: 34px; padding: 0 8px;
background: transparent; color: #fff; border: 0; border-radius: 8px;
font-size: 15px; line-height: 1; cursor: pointer;
}
.lb-btn:hover { background: rgba(255,255,255,.14); }
.lb-btn.active { background: rgba(255,255,255,.24); }
.lb-btn:disabled { opacity: .5; cursor: default; }
.lb-btn-wide { font-size: 13px; font-weight: 600; padding: 0 12px; white-space: nowrap; }
.lb-zoom { color: #fff; font-size: 12.5px; min-width: 46px; text-align: center; }
.lb-colors { display: flex; gap: 4px; align-items: center; margin: 0 2px; }
.lb-sw {
width: 20px; height: 20px; border-radius: 50%; cursor: pointer;
border: 2px solid rgba(255,255,255,.35); padding: 0;
}
.lb-sw.active { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.lb-bar .hidden { display: none; }
/* จอแคบ: ปุ่มเยอะ ต้องเล็กลงไม่ให้ล้นจอ
⚠️ ปุ่มเซฟ/คัดลอกลิงก์ = ปุ่มสำคัญที่สุด ห้ามให้ต้องเลื่อนหา
→ แยกเป็นแถวล่างตรึงไว้ ส่วนเครื่องมือวาดเลื่อนแนวนอนได้ */
@media (max-width: 620px) {
.lb-btn { min-width: 30px; height: 30px; padding: 0 6px; font-size: 14px; }
.lb-btn-wide { font-size: 12px; padding: 0 9px; }
.lb-bar {
gap: 4px; padding: 6px; flex-wrap: wrap; overflow-x: visible;
left: 8px; right: 8px; transform: none; max-width: none;
}
/* กลุ่มเครื่องมือ (ซูม/วาด/สี) อยู่แถวบน — ให้ "ขึ้นบรรทัดใหม่" ไม่ใช่เลื่อนซ่อน
⚠️ เดิม overflow-x:auto ทำให้ปุ่ม 🗑 (ลบทั้งหมด) หลุดนอกจอ ต้องเลื่อนหาเอง มองไม่เห็น
(พี่ป๋องแจ้ง 2026-08-31) — ปุ่มน้อย ให้ wrap แล้วเห็นครบดีกว่า */
.lb-bar > .lb-grp:not(.lb-grp-end) { flex-wrap: wrap; justify-content: center; row-gap: 4px; }
/* ⚠️ .lb-colors เป็น flex nowrap กว้าง ~140px ย่อไม่ได้ → แถวเครื่องมือไม่ยอม wrap
ทำให้ 🗑 ล้นออกนอกจอ (356px > 360px vw) ต้องให้แถบสี wrap ได้ด้วย */
#lb-tools { max-width: 100%; }
#lb-colors { flex-wrap: wrap; justify-content: center; row-gap: 4px; }
/* ปุ่มเซฟ/คัดลอก = เต็มแถว มองเห็นเสมอ */
.lb-grp-end {
flex: 1 0 100%; justify-content: center; gap: 8px;
border-left: 0; padding-left: 0; padding-top: 5px;
border-top: 1px solid rgba(255,255,255,.16);
}
.lb-grp-end .lb-btn-wide { flex: 1; max-width: 190px; height: 34px; }
}
.lb-nav {
position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px;
background: rgba(0,0,0,.4); color: #fff; border: 0; font-size: 32px; cursor: pointer;
}
.lb-prev { left: 8px; } .lb-next { right: 8px; }
/* ลูกศรต้องไม่บังแถบเครื่องมือล่าง (จอแคบแถบสูงขึ้น) */
@media (max-width: 620px) { .lb-nav { top: 42%; } }
/* แถบบนของ lightbox ต้องหลบ notch/status bar ไม่งั้นปุ่มปิดอยู่ใต้แถบเวลา กดไม่โดน
(Boss 2026-08-27: มือถือหาปุ่มย้อนกลับไม่เจอ) */
.lb-pos {
position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 50%;
transform: translateX(-50%); color: #fff; font-size: 14px;
}
.lb-close {
position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 12px;
width: 36px; height: 36px;
background: rgba(0,0,0,.4); color: #fff; border: 0; border-radius: 50%; font-size: 16px; cursor: pointer;
}
@media (max-width: 720px) {
/* นิ้วต้องกดโดน: ขยายปุ่มปิด + เพิ่มความทึบให้เห็นชัดบนรูปพื้นสว่าง */
.lb-close { width: 44px; height: 44px; background: rgba(0,0,0,.62); }
.lb-nav { background: rgba(0,0,0,.32); }
}
/* ============================================================
GTR SHELL — เปลือกหน้าตาใหม่ (2026-08-21)
หลักการ: เปลี่ยนแค่ "หน้าตา" ไม่แตะ logic/API/DB — ทุกปุ่มยังเรียกฟังก์ชันเดิมของ v2
สีทั้งหมดอ้าง CSS var เดิม → โหมดมืด/สว่างทำงานตามเดิมอัตโนมัติ
============================================================ */
/* ---- โลโก้: กล่อง X ขาวมุมมน ---- */
.brand { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; }
.brand-mark {
width: 30px; height: 30px; border-radius: 9px; flex: none;
display: flex; align-items: center; justify-content: center;
background: #fff; color: var(--blue); font-weight: 800; font-size: 16px;
}
/* ---- ไอคอนหัว sidebar: เส้นบาง ไม่ใช่ emoji ---- */
.side-icon {
color: var(--side-muted); font-size: 17px; line-height: 1;
width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
}
.side-icon:hover { color: var(--side-text); background: var(--side-hover); }
.side-icon-round {
border-radius: 50%; background: var(--side-raise);
color: var(--side-text); font-size: 19px; font-weight: 400;
}
.side-icon-round:hover { background: rgba(255,255,255,.16); }
/* ---- nav 2 คอลัมน์ 3 แถว (ตามภาพ) · ซ่อนปุ่มแชทเพราะแชทเป็นหน้าหลัก ---- */
.side-nav-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 4px; }
.side-nav.side-nav-grid .nav-btn.nav-btn-chat { display: none; }
.side-nav.side-nav-grid .nav-btn {
justify-content: flex-start; gap: 9px; padding: 7px 9px;
border-radius: 8px; font-size: 13.5px; position: relative;
min-width: 0; /* ให้ชื่อยาวหดได้ ไม่ดันคอลัมน์ */
}
.side-nav.side-nav-grid .nav-btn .nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-nav-grid .nav-icon { font-size: 15px; opacity: .9; }
.side-nav-grid .nav-label { font-size: 13.5px; }
/* ---- แถบใต้ข้อความ: คอมเมนต์ · แท็กถึงคนนี้ · ปักหมุด ---- */
.msg-foot { display: flex; gap: 16px; margin-top: 5px; flex-wrap: wrap; }
.msg-foot-btn {
border: none; background: none; padding: 0; cursor: pointer;
font-size: 12.5px; font-weight: 600; color: var(--blue);
font-family: inherit; line-height: 1.6;
}
.msg-foot-btn:hover { text-decoration: underline; }
/* ---- ปุ่มหัวห้อง: วงกลมขอบเทา (ตามภาพ) ---- */
.chat-actions .icon-btn {
width: 38px; height: 38px; border-radius: 50%;
border: 1px solid var(--border); background: var(--card);
display: inline-flex; align-items: center; justify-content: center;
}
.chat-actions .icon-btn:hover { background: var(--blue-light); border-color: var(--blue); }
/* ปุ่มส่ง: v2 เป็นวงกลมน้ำเงินอยู่แล้ว (.icon-btn.send) ตรงกับภาพ ไม่ต้องแก้ */
/* ---- ผู้ดูแลระบบ: ให้อยู่แถวเดียวกับ nav grid (ตามภาพ) ----
ใช้ CSS ย้ายตำแหน่งด้วย order/margin ไม่ย้าย DOM — app.js ยังหา .side-admin ได้เหมือนเดิม */
.side-nav.side-nav-grid .nav-btn-wide {
justify-content: flex-start; gap: 9px;
padding: 7px 9px; border-radius: 8px; font-size: 13.5px; min-width: 0; width: auto;
}
.side-nav.side-nav-grid .nav-btn-label { font-size: 13.5px; font-weight: 500; }
/* ไอคอน nav: เส้นบาง รับสีจากตัวแปรธีม (ไม่ใช่ emoji ที่บังคับสีเอง) */
.side-nav .nav-icon {
font-size: 15px; opacity: .85; width: 17px; text-align: center; flex: none;
}
.side-icon { font-family: system-ui, sans-serif; }
/* ตาราง markdown-pipe ในข้อความ — เส้นคม จัดคอลัมน์ด้วย layout จริง หัวเป็นไทยได้ */
.msg-text .msg-table-wrap {
margin: 6px 0 2px; overflow-x: auto; -webkit-overflow-scrolling: touch;
border: 1px solid var(--border); border-radius: 8px; background: var(--sunken);
max-width: 100%; width: fit-content;
}
@media (max-width: 640px) { .msg-text .msg-table-wrap { max-width: 78vw; } }
/* ===== ปุ่มคัดลอกตาราง (Boss สั่ง 2026-08-31 ข้อ 2 · ตามรูป Slack) =====
⚠️ .msg-table-wrap เป็น overflow-x:auto → ปุ่มแบบ absolute จะเลื่อนหนีไปกับตาราง
ใช้ position:sticky + float:right ให้ปุ่มติดมุมขวาบนเสมอแม้เลื่อนตารางไปด้านข้าง */
.msg-text .msg-table-wrap { position: relative; }
.msg-text .tbl-copy {
position: sticky; top: 4px; right: 4px; float: right; z-index: 2;
width: 26px; height: 26px; margin-left: 4px;
display: grid; place-items: center; cursor: pointer;
font-size: 13px; line-height: 1;
border: 1px solid var(--border); border-radius: 6px;
background: var(--card); color: var(--muted);
opacity: 0; transition: opacity .12s;
}
.msg-text .msg-table-wrap:hover .tbl-copy { opacity: 1; }
.msg-text .tbl-copy:hover { color: var(--text); border-color: var(--blue); }
/* มือถือไม่มี hover — โชว์จางๆ ไว้เลย ไม่งั้นกดไม่ได้ทั้งที่ปุ่มมีอยู่ */
@media (hover: none) {
.msg-text .tbl-copy { opacity: .55; }
}
.msg-text table.msg-table {
border-collapse: collapse; font-size: 12.5px; line-height: 1.5; width: auto; min-width: 100%;
font-variant-numeric: tabular-nums;
}
.msg-text table.msg-table th, .msg-text table.msg-table td {
padding: 6px 10px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.msg-text table.msg-table th {
font-weight: 600; background: var(--blue-light); color: var(--text);
position: sticky; top: 0;
}
.msg-text table.msg-table tbody tr:last-child td { border-bottom: none; }
.msg-text table.msg-table tbody tr:nth-child(even) td { background: rgba(127, 127, 127, .06); }
.msg-text table.msg-table .ta-left { text-align: left; }
.msg-text table.msg-table .ta-right { text-align: right; }
.msg-text table.msg-table .ta-center { text-align: center; }
/* ============================================================
หน้าโปรไฟล์และการตั้งค่า (หน้าเต็ม — แทนโมดัลเดิม)
============================================================ */
.pf-page { max-width: 980px; margin: 0 auto; padding-bottom: 32px; }
.pf-card {
background: var(--card); border: 1px solid var(--border);
border-radius: var(--radius-lg); margin-bottom: 14px; overflow: hidden;
}
/* หัวการ์ดพื้นจาง แยกจากเนื้อการ์ด */
.pf-card-head {
background: var(--sunken); border-bottom: 1px solid var(--border);
padding: 12px 18px;
}
.pf-card-head h3 { margin: 0; font-size: 14.5px; font-weight: 700; }
.pf-card-note { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
.pf-card-body { padding: 16px 18px; }
/* --- การ์ดหัว: อวาตาร์ + ชื่อ + สี --- */
.pf-hero { display: flex; align-items: flex-start; gap: 18px; padding: 18px; flex-wrap: wrap; }
.pf-hero-av .avatar { width: 72px; height: 72px; font-size: 26px; }
.pf-hero-main { flex: 1; min-width: 180px; }
.pf-hero-name { font-size: 19px; font-weight: 700; line-height: 1.3; }
.pf-hero-sub { font-size: 13.5px; color: var(--muted); margin: 2px 0 10px; }
.pf-hero-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-hero-colors { text-align: right; }
.pf-colors-label { font-size: 12.5px; color: var(--muted); margin-bottom: 7px; }
.pf-swatches { display: flex; gap: 9px; }
.pf-sw {
width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
border: 2px solid transparent; padding: 0; transition: transform .12s;
}
.pf-sw:hover { transform: scale(1.08); }
/* วงที่เลือก: ขอบสีข้อความเว้นช่องขาว เห็นชัดทั้งสองธีม */
.pf-sw.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--card) inset; }
/* --- ช่องกรอกแบบมีป้ายชื่อบน --- */
.pf-grid2, .pf-grid3 { display: grid; gap: 14px 18px; }
.pf-grid2 { grid-template-columns: 1fr 1fr; }
.pf-grid3 { grid-template-columns: 1fr 1fr 1fr; }
.pf-field { display: flex; flex-direction: column; gap: 5px; }
.pf-label { font-size: 12.5px; color: var(--muted); }
.pf-field input, .pf-field select {
width: 100%; background: var(--sunken); border: 1px solid var(--border);
border-radius: var(--radius); padding: 10px 13px; font-size: 14.5px;
color: var(--text); font-family: inherit;
}
.pf-field input:focus, .pf-field select:focus { outline: 2px solid var(--blue); outline-offset: -1px; }
.pf-field input[readonly] { color: var(--muted); cursor: default; }
/* --- แถวสถานะ: ไอคอน / ข้อความ / ถึงเวลา --- */
.pf-status-row { display: grid; grid-template-columns: 78px 1fr 190px; gap: 14px; }
.pf-f-emoji input { text-align: center; font-size: 19px; padding: 8px 4px; }
.pf-card-body .emoji-row { margin-top: 12px; }
/* --- แถวตัวเลือก: ข้อความซ้าย pill ขวา --- */
.pf-row {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; padding: 14px 0; flex-wrap: wrap;
}
.pf-row + .pf-row { border-top: 1px solid var(--border); }
.pf-row:first-child { padding-top: 0; }
.pf-row:last-child { padding-bottom: 0; }
.pf-row-txt b { display: block; font-size: 14px; }
.pf-row-txt .muted { font-size: 12.5px; color: var(--muted); }
.pf-pills { display: flex; gap: 8px; flex-wrap: wrap; }
/* pill ธีม/ภาษา — ตัวที่เลือกขอบฟ้าพื้นจาง */
.pf-pill, .pf-pills .lang-btn {
border: 1px solid var(--border); background: var(--card); color: var(--text);
border-radius: var(--radius-pill); padding: 6px 16px;
font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.pf-pill:hover, .pf-pills .lang-btn:hover { border-color: var(--blue); }
.pf-pill.active, .pf-pills .lang-btn.active {
border-color: var(--blue); color: var(--blue); background: var(--blue-light);
}
/* --- ท้ายหน้า: ข้อมูลอ่านเท่านั้น + ปุ่ม --- */
.pf-card .pf-whoami, .pf-card .pf-orginfo {
padding: 0 18px 14px; display: flex; align-items: center; gap: 9px;
flex-wrap: wrap; font-size: 13px;
}
.pf-actions { display: flex; gap: 12px; margin-top: 4px; }
/* ออกจากระบบ: พื้นแดงจาง ไม่ใช่ปุ่มแดงเต็ม (ไม่ใช่ปุ่มหลักของหน้า) */
.btn.danger-soft {
background: color-mix(in srgb, var(--red) 14%, transparent);
color: var(--red); border: 1px solid transparent; font-weight: 700;
}
.btn.danger-soft:hover { background: color-mix(in srgb, var(--red) 22%, transparent); }
@media (max-width: 860px) {
.pf-grid2, .pf-grid3 { grid-template-columns: 1fr; }
.pf-status-row { grid-template-columns: 70px 1fr; }
.pf-f-until { grid-column: 1 / -1; }
.pf-hero { gap: 14px; }
.pf-hero-colors { text-align: left; width: 100%; }
.pf-row { align-items: flex-start; }
.pf-actions .btn { flex: 1; }
}
/* ---- ป้ายต่อท้ายชื่อ + รีแอ็กชัน (แบบเฟส) ---- */
.name-dept { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.tag-author, .tag-announce {
font-size: 10.5px; font-weight: 700; border-radius: var(--radius-sm);
padding: 1px 7px; letter-spacing: .2px;
}
.tag-author { color: var(--blue); background: var(--blue-light); }
.tag-announce { color: var(--amber); background: color-mix(in srgb, var(--amber) 16%, transparent); }
/* แถวใต้ข้อความ: ปุ่มซ้าย · ชิปรีแอ็กชันลอยขวา */
.msg-foot { position: relative; align-items: center; }
.msg-foot-btn.liked { color: var(--blue); font-weight: 800; }
/* แถวรีแอ็กชัน: เม็ดแยกต่ออีโมจิ (👍18 ✅6) อยู่ใต้ข้อความ เหนือแถวปุ่ม */
.react-row { display: flex; gap: 7px; flex-wrap: wrap; margin: 7px 0 2px; position: relative; }
.react-chip {
display: inline-flex; align-items: center; gap: 5px;
background: var(--card); border: 1px solid var(--border);
border-radius: var(--radius-pill); padding: 3px 12px 4px;
font-size: 12.5px; cursor: pointer; line-height: 1.5;
font-family: inherit; color: var(--text);
}
/* ปุ่มเพิ่มอีโมจิอื่น — วงกลมจาง โผล่ชัดเมื่อ hover */
.react-add {
border: 1px solid var(--border); background: var(--card); color: var(--muted);
border-radius: 50%; width: 26px; height: 26px; cursor: pointer;
font-size: 15px; line-height: 1; font-family: inherit; padding: 0;
}
.react-add:hover { border-color: var(--blue); color: var(--blue); }
.react-chip:hover { border-color: var(--blue); }
.react-chip.mine { border-color: var(--blue); background: var(--blue-light); }
.react-emojis { font-size: 13.5px; }
.react-count { color: var(--muted); font-weight: 600; }
.react-chip.mine .react-count { color: var(--blue); }
/* แถบเลือกอีโมจิ ลอยเหนือชิป */
.react-pick {
/* position/top/left ตั้งจาก JS (fixed) — ห้ามใช้ absolute อีก จะถูกกล่องสกรอลล์ตัด
visibility:hidden กันกระพริบมุมซ้ายบน 1 เฟรมก่อน JS วางตำแหน่ง */
position: fixed; z-index: 320; visibility: hidden;
display: flex; gap: 2px; background: var(--card);
border: 1px solid var(--border); border-radius: var(--radius-pill);
padding: 4px 7px; box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.react-pick button {
border: none; background: none; cursor: pointer; font-size: 19px;
padding: 2px 4px; border-radius: 50%; line-height: 1;
}
.react-pick button:hover { transform: scale(1.25); background: var(--sunken); }
@media (max-width: 860px) {
.cmt-topline, .cmt-bar { padding-left: 32px; }
.cmt-sorts { gap: 12px; }
.cmt-sort { font-size: 12px; }
.cmt-composer-ph { font-size: 12.5px; padding: 7px 13px; }
}
/* ---------------- เมนู ⋯ ของข้อความ (2026-08-21) ---------------- */
/* ปุ่ม ⋯ : กล่องเดิม .msg-actions เหลือปุ่มเดียว */
.msg-actions .msg-dots {
font-size: 17px; line-height: 1; padding: 3px 9px; color: var(--muted);
letter-spacing: 1px; font-weight: 700;
}
.msg-actions .msg-dots:hover { color: var(--text); }
/* เมนู: position fixed (ไม่ถูก overflow ของ .messages ตัด) · วางตำแหน่งด้วย JS */
/* เดสก์ท็อป: เมนูคลิกขวาควรกระชับแบบเมนูระบบ (Boss ท้วง 2026-08-27 "ของคอมก็ใหญ่ไป")
ใช้เมาส์เล็งแม่นกว่านิ้ว → แถวเตี้ยกว่ามือถือได้ */
.msg-menu {
/* ⚠️ ต้องสูงกว่า .dm-dock (z-index:300) ไม่งั้นหน้าต่าง DM ลอยทับเมนูจนมองไม่เห็น
— เห็นแค่เสี้ยวที่พ้นขอบขวาหน้าต่าง (Boss แจ้ง 2026-08-30 พร้อมรูป) */
position: fixed; z-index: 500; min-width: 176px; max-width: 78vw;
background: var(--card); border: 1px solid var(--border);
border-radius: 9px; box-shadow: var(--shadow-pop, 0 8px 28px rgba(0, 0, 0, .22));
padding: 4px; max-height: var(--mm-max, 86vh); overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.msg-menu-item {
display: flex; align-items: center; gap: 9px; width: 100%; border: none; background: none;
padding: 6px 9px; cursor: pointer; text-align: left; border-radius: 6px;
font-family: inherit; font-size: 13.5px; color: var(--text);
}
.msg-menu-item:hover { background: var(--blue-light); }
.msg-menu-item .mmi-ic {
width: 17px; flex: 0 0 17px; text-align: center; font-size: 13px; color: var(--muted);
}
.msg-menu-item .mmi-tx { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-menu-item.danger, .msg-menu-item.danger .mmi-ic { color: var(--red, #d92d20); }
.msg-menu-item.danger:hover { background: rgba(217, 45, 32, .1); }
.msg-menu-sep { height: 1px; background: var(--border); margin: 3px 4px; }
/* รายการห้องในโมดัลส่งต่อ */
.fw-list { display: flex; flex-direction: column; gap: 4px; max-height: 56vh; overflow-y: auto; }
.fw-room {
display: flex; align-items: center; gap: 9px; width: 100%; border: 1px solid var(--border);
background: var(--card); padding: 10px 12px; cursor: pointer; border-radius: 8px;
font-family: inherit; font-size: 14.5px; color: var(--text); text-align: left;
}
.fw-room:hover { background: var(--blue-light); border-color: var(--blue); }
.fw-room .fw-ic { color: var(--muted); flex: 0 0 16px; text-align: center; }
/* ── ส่งต่อ: ค้นหา + ข้อความแนบ (2026-09-02) ── */
.fw-search {
width: 100%; box-sizing: border-box; margin: 0 0 8px;
padding: 9px 12px; font-size: 14px; font-family: inherit;
border: 1px solid var(--border); border-radius: 8px;
background: var(--card); color: var(--text);
}
.fw-search:focus { outline: none; border-color: var(--blue); }
.fw-list { max-height: 42vh; } /* เตี้ยลง เผื่อที่ให้ช่องค้นหา+ข้อความแนบ */
.fw-room .fw-nm { flex: 1 1 auto; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ป้ายหมวด — ห้องชื่อซ้ำกัน (Martech 4 ห้อง) ต้องแยกออกว่าอันไหนอยู่หมวดไหน */
.fw-room .fw-grp {
flex: 0 0 auto; font-size: 11px; color: var(--muted);
background: var(--bg); border: 1px solid var(--border);
border-radius: 999px; padding: 1px 8px; max-width: 42%;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fw-empty { padding: 18px 8px; text-align: center; color: var(--muted); font-size: 13px; }
.fw-note-wrap { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
.fw-note {
width: 100%; box-sizing: border-box; resize: vertical;
padding: 9px 12px; font-size: 14px; font-family: inherit; line-height: 1.5;
border: 1px solid var(--border); border-radius: 8px;
background: var(--card); color: var(--text);
}
.fw-note:focus { outline: none; border-color: var(--blue); }
/* มือถือ (mobile-first — ผู้ใช้ส่วนใหญ่อยู่มือถือ):
เมนู 14 รายการเคยสูง 600px = 77% ของจอ 780px (Boss ท้วง 2026-08-27 "ใหญ่มากเลย")
→ บีบแถวลง แต่ยังกดง่าย (พื้นที่แตะ ~40px ตามเกณฑ์ที่นิ้วกดไม่พลาด) */
@media (max-width: 860px) {
.msg-actions { display: flex; opacity: 1; pointer-events: auto; }
.msg-menu {
min-width: 54vw; max-width: 72vw;
padding: 4px; border-radius: 12px;
max-height: var(--mm-max, 70vh);
}
/* แถว ~36px — เล็กลงอีกขั้นตามที่ Boss ขอ แต่ยังกดไม่พลาด */
.msg-menu-item {
padding: 8px 9px; font-size: 13.5px; gap: 9px; border-radius: 7px;
}
.msg-menu-item .mmi-ic { width: 17px; flex: 0 0 17px; font-size: 13px; }
.msg-menu-sep { margin: 3px 4px; }
}
/* ---- ช่องพิมพ์ตอบกลับแทรกใต้ข้อความ (Boss สั่ง 2026-08-21) ---- */
.inline-reply {
margin: 6px 0 10px 44px; padding: 8px 0 0;
}
/* คอมเมนต์ที่ซ้อนอยู่ในกล่องแล้ว ไม่ต้องเยื้องซ้ำ */
.cmt-group .inline-reply { margin-left: 0; }
.cmt-group .msg.nested[data-depth="2"] + .inline-reply { margin-left: 34px; }
.ir-to { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.ir-row {
display: flex; align-items: center; gap: 9px;
border: 1px solid var(--border); background: var(--card);
border-radius: 26px; padding: 5px 6px 5px 8px;
}
.ir-row:focus-within { border-color: var(--blue); }
.ir-row .avatar { width: 30px; height: 30px; font-size: 11px; flex: none; }
.ir-input {
flex: 1; border: none; background: none; resize: none; outline: none;
font-family: inherit; font-size: 14.5px; color: var(--text);
padding: 6px 2px; max-height: 140px; line-height: 1.45;
}
.ir-send {
border: none; background: var(--blue); color: #fff; cursor: pointer;
border-radius: var(--radius-pill); padding: 7px 18px;
font-size: 13.5px; font-weight: 700; font-family: inherit; flex: none;
}
.ir-send:hover { background: var(--blue-dark); }
.ir-send:disabled { opacity: .55; cursor: default; }
.ir-close {
border: none; background: none; color: var(--muted); cursor: pointer;
font-size: 17px; padding: 4px 8px; font-family: inherit; flex: none;
}
.ir-close:hover { color: var(--red); }
@media (max-width: 860px) {
.inline-reply { margin-left: 30px; }
.ir-send { padding: 7px 14px; font-size: 13px; }
.ir-input { font-size: 16px; } /* < 16px ทำให้ iOS ซูมหน้าจอตอนโฟกัส */
}
/* ---------------- หน้า TaskFlow ในแชท (2026-08-21) ---------------- */
.page-head .head-right { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.tf-stats {
display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
gap: 8px; margin-bottom: 12px;
}
.tf-stat {
background: var(--card); border: 1px solid var(--border); border-radius: 10px;
padding: 10px 8px; text-align: center;
}
.tf-stat-n { font-size: 22px; font-weight: 700; line-height: 1.15; color: var(--text); }
.tf-stat-l { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.tf-stat.red .tf-stat-n { color: var(--red); }
.tf-stat.green .tf-stat-n { color: var(--green); }
.tf-stat.amber .tf-stat-n { color: var(--amber); }
.tf-stat.blue .tf-stat-n { color: var(--blue); }
.tf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tf-chip {
font-size: 12px; padding: 3px 10px; border-radius: 999px;
background: var(--sunken); border: 1px solid var(--border); color: var(--muted);
}
.tf-chip b { color: var(--text); margin-left: 2px; }
.tf-list { display: flex; flex-direction: column; }
.tf-item {
display: flex; align-items: flex-start; gap: 10px;
padding: 9px 2px; border-bottom: 1px solid var(--border);
}
.tf-list .tf-item:last-child { border-bottom: none; }
.tf-item-main { flex: 1; min-width: 0; }
.tf-item-title { font-size: 14px; color: var(--text); word-break: break-word; }
.tf-item-sub { margin-top: 2px; }
.tf-item-side { display: flex; gap: 4px; align-items: center; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.tf-late { color: var(--red); font-weight: 600; }
@media (max-width: 860px) {
.tf-stats { grid-template-columns: repeat(3, 1fr); }
.tf-item { flex-direction: column; gap: 4px; }
.tf-item-side { justify-content: flex-start; }
}
/* ---- เชื่อมบัญชี TaskFlow (2026-08-21) ---- */
.tf-link-card { max-width: 420px; }
.tf-link-card h3 { margin: 0 0 6px; }
.tf-lbl { display: block; font-size: 12.5px; color: var(--muted); margin: 12px 0 4px; font-weight: 600; }
.tf-link-card input {
width: 100%; padding: 10px 12px; border-radius: 8px; font-size: 15px;
border: 1px solid var(--border); background: var(--side-input, var(--sunken)); color: var(--text);
}
.tf-link-card input:focus { background: var(--card); border-color: var(--blue); outline: none; }
.tf-link-actions { display: flex; gap: 8px; align-items: center; margin-top: 16px; }
.tf-link-note { margin: 10px 0 0; }
.tf-link-err {
background: var(--red-bg); color: var(--red); border-radius: 8px;
padding: 8px 10px; font-size: 13px; margin: 10px 0 0;
}
/* แถบบอกว่าเชื่อมกับใคร */
.tf-who {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
background: var(--sunken); border: 1px solid var(--border); border-radius: 8px;
padding: 7px 10px; font-size: 13px; color: var(--muted); margin-bottom: 10px;
}
.tf-who-txt { flex: 1; min-width: 0; }
.tf-who b { color: var(--text); }
/* แท็บ งานของฉัน / ทั้งองค์กร */
.tf-scope { display: flex; gap: 6px; margin-bottom: 10px; }
.tf-tab {
border: 1px solid var(--border); background: var(--card); color: var(--muted);
padding: 6px 14px; border-radius: 999px; cursor: pointer; font-family: inherit;
font-size: 13px; font-weight: 600;
}
.tf-tab.active { background: var(--blue); color: var(--on-brand, #fff); border-color: var(--blue); }
.tf-mine-dot { color: var(--blue); font-size: 10px; vertical-align: middle; }
/* ---- แท็กเพื่อนในช่องตอบคอมเมนต์ ---- */
.inline-reply { position: relative; }
/* รายชื่อลอยเหนือช่องพิมพ์ (ช่องอยู่กลางหน้า ถ้าลงล่างจะตกขอบจอ) */
.inline-reply .ir-pop.mention-pop {
position: absolute; left: 40px; right: 40px; bottom: 100%; margin-bottom: 4px;
max-width: none; z-index: 70; max-height: 220px; overflow-y: auto;
box-shadow: 0 6px 24px rgba(0,0,0,.18);
}
.ir-tag {
border: none; background: none; color: var(--muted); cursor: pointer;
font-size: 17px; font-weight: 700; padding: 4px 7px; font-family: inherit; flex: none;
border-radius: 50%;
}
.ir-tag:hover { color: var(--blue); background: var(--blue-light); }
/* แนบไฟล์ในคอมเมนต์ (Boss 2026-08-29) — ปุ่ม 📎 + แถบพรีวิวใต้ช่องพิมพ์ */
.ir-clip {
border: none; background: none; cursor: pointer; flex: none;
font-size: 15px; padding: 4px 6px; line-height: 1; opacity: .75;
}
.ir-clip:hover { opacity: 1; }
.ir-files {
display: flex; flex-wrap: wrap; gap: 7px;
margin: 7px 0 0 39px; /* เยื้องให้ตรงกับช่องพิมพ์ (พ้นอวาตาร์ 30px) */
}
.ir-files.hidden { display: none; }
.ir-file { position: relative; flex: none; }
.ir-file img {
width: 62px; height: 62px; object-fit: cover;
border-radius: 9px; border: 1px solid var(--border); display: block;
}
.ir-file-doc {
display: flex; align-items: center; gap: 6px; max-width: 190px;
border: 1px solid var(--border); border-radius: 9px;
padding: 7px 26px 7px 9px; background: var(--card);
}
.ir-file-ic { font-size: 15px; flex: none; }
.ir-file-nm {
font-size: 12px; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ir-file-x {
position: absolute; top: -6px; right: -6px;
width: 19px; height: 19px; border-radius: 50%;
border: 1px solid var(--border); background: var(--card); color: var(--muted);
font-size: 11px; line-height: 1; cursor: pointer; padding: 0;
display: flex; align-items: center; justify-content: center;
}
.ir-file-x:hover { color: var(--red); border-color: var(--red); }
/* มือถือ: ปุ่มแตะง่ายขึ้น + รูปเล็กลงกันล้นจอ 360px */
@media (max-width: 860px) {
.ir-clip { font-size: 17px; padding: 6px 7px; }
.ir-files { margin-left: 0; gap: 6px; }
.ir-file img { width: 56px; height: 56px; }
.ir-file-x { width: 22px; height: 22px; font-size: 12px; }
}
/* ---- ฝังหน้า TaskFlow จริง (iframe) 2026-08-21 ---- */
.tf-embed-tools { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.tf-frame-wrap {
position: relative; border: 1px solid var(--border); border-radius: 10px;
overflow: hidden; background: var(--card);
/* กินความสูงที่เหลือจริง ๆ (ไม่คำนวณเดา) — .page-body เป็น flex ให้ยืดเอง
Boss ท้วง 2026-08-21: ของเดิม 100vh-210px เหลือที่ว่างเปล่า ต้องเลื่อนซ้อน 2 ชั้น */
flex: 1; min-height: 320px;
}
/* หน้า TaskFlow: เลย์เอาต์เป็นคอลัมน์ยืด ไม่ต้อง scroll ตัวหน้า (iframe จัดการเอง) */
#page-taskflow .page-body {
display: flex; flex-direction: column; overflow: hidden; padding: 8px; min-height: 0;
}
#page-taskflow #tf-body {
flex: 1; min-height: 0; display: flex; flex-direction: column;
}
.tf-frame { width: 100%; height: 100%; border: 0; display: block; background: #0f0f23; }
.tf-frame-load { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; }
@media (max-width: 860px) {
#page-taskflow .page-body { padding: 6px; }
.tf-frame-wrap { min-height: 300px; }
/* มือถือที่แคบ: ย่อแถบบนให้เหลือที่ให้ตารางมากที่สุด */
#page-taskflow .tf-who { padding: 5px 8px; font-size: 12px; }
}
/* ============================================================
การ์ด BOX สลิป/ใบจอง (meta.card='slip') — Boss สั่ง 2026-08-21
⚠️ การ์ดนี้ "จัดกรอบ" ให้อ่านง่ายเท่านั้น ข้อมูลแสดงครบ 100% ทุกบรรทัด
ห้ามใส่ max-height / overflow:hidden / line-clamp เด็ดขาด (จะซ่อนข้อมูล)
ใช้ token ธีมล้วน → สลับสว่าง/มืดได้เอง
============================================================ */
.slip-card {
margin-top: 6px; max-width: min(420px, 100%);
border: 1px solid var(--border); border-radius: 10px;
background: var(--card); overflow: hidden;
}
/* พาดหัว = แถบสีแบรนด์ (เลขใบจอง + สถานะ) */
.slip-card .slip-head {
padding: 8px 11px; font-weight: 700; line-height: 1.45;
background: var(--blue-light); color: var(--text);
border-bottom: 1px solid var(--border); word-break: break-word;
}
/* หัวข้อกลุ่ม เช่น "ข้อมูลลูกค้า" */
.slip-card .slip-sec-title {
padding: 7px 11px 3px; font-size: 12px; font-weight: 700;
color: var(--muted); text-transform: none; letter-spacing: .01em;
}
.slip-card .slip-sec { padding: 0 11px 6px; }
/* แต่ละบรรทัดข้อมูล — ตัดคำได้ ยาวแค่ไหนก็แสดงหมด ไม่ตัดท้าย */
.slip-card .slip-row {
padding: 2px 0; line-height: 1.5; word-break: break-word; overflow-wrap: anywhere;
}
/* บรรทัดที่อยู่นอกกลุ่ม (เช่น ลิงก์ดูรายละเอียด / เวลาอนุมัติ / ยอดสลิป) */
.slip-card > .slip-row { padding: 3px 11px; }
.slip-card > .slip-row:last-child { padding-bottom: 9px; }
.slip-card .slip-row a { word-break: break-all; }
/* การ์ดสลิปต่อท้ายรูป/อัลบั้ม — ชิดกันเป็นก้อนเดียว ไม่ให้ดูเหมือน 2 ข้อความ */
.msg img.msg-image + .slip-card, .album-card + .slip-card { margin-top: 6px; }
@media (max-width: 860px) {
.slip-card { max-width: 100%; }
}
/* แถวแท็บ TaskFlow: รวมชื่อคนที่เชื่อมไว้ในแถวเดียว ประหยัดความสูงให้ตาราง */
.tf-who-inline { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.tf-who-inline b { color: var(--text); }
#page-taskflow .tf-scope { margin-bottom: 6px; align-items: center; }
/* ============================================================
ธีมส่วนตัวรายคน — ชุดสีหลัก (Boss สั่ง 2026-08-21)
html[data-accent="<ชุด>"] ซ้อนบน html[data-theme="light|dark"] ที่มีอยู่เดิม
⚠️ กฎเหล็ก: ชุดสีแตะได้แค่ 4 token นี้เท่านั้น
--blue สีแบรนด์หลัก (ปุ่ม/ลิงก์/ชื่อ/ห้องที่เลือก)
--blue-dark เข้มขึ้น (hover ปุ่ม)
--blue-light อ่อนมาก (พื้นหัวการ์ด/พื้นอ่อน)
--side-bg พื้นแถบข้าง
ห้ามแตะ --green/--red/--amber (สีสถานะ สื่อความหมาย เปลี่ยนแล้วอ่านผิด)
ห้ามแตะ --bg/--card/--text/--border (พื้น/ตัวอักษร คุมคอนทราสต์การอ่าน)
ค่าเริ่มต้น (ไม่มี data-accent หรือ = blue) ใช้ :root เดิม ไม่ต้องเขียนซ้ำ
============================================================ */
/* ---- เขียวมรกต ---- */
html[data-accent="emerald"] {
--blue: #0F766E; --blue-dark: #115E56; --blue-light: #E6F4F1; --side-bg: #0B4F49;
}
html[data-accent="emerald"][data-theme="dark"] {
--blue: #3FBFAE; --blue-dark: #6FD6C8; --blue-light: #16292A; --side-bg: #101F22;
}
/* ---- ม่วง ---- */
html[data-accent="violet"] {
--blue: #6D28D9; --blue-dark: #571FAE; --blue-light: #F0EAFB; --side-bg: #43227E;
}
html[data-accent="violet"][data-theme="dark"] {
--blue: #A78BFA; --blue-dark: #C4B0FC; --blue-light: #241C39; --side-bg: #1A1526;
}
/* ---- เทาอมน้ำเงิน ---- */
html[data-accent="slate"] {
--blue: #475569; --blue-dark: #334155; --blue-light: #EDF0F4; --side-bg: #2C3A4B;
}
html[data-accent="slate"][data-theme="dark"] {
--blue: #94A9C4; --blue-dark: #B4C4D8; --blue-light: #1D2530; --side-bg: #151C25;
}
/* ---- ส้มอิฐ ---- */
html[data-accent="terracotta"] {
--blue: #B4531F; --blue-dark: #904118; --blue-light: #FBEDE5; --side-bg: #7C3A15;
}
html[data-accent="terracotta"][data-theme="dark"] {
--blue: #E8935F; --blue-dark: #F2AF85; --blue-light: #2E1F16; --side-bg: #241811;
}
/* ---- ชมพูบานเย็น ---- */
html[data-accent="magenta"] {
--blue: #A21B62; --blue-dark: #81154E; --blue-light: #FBE9F2; --side-bg: #6E1243;
}
html[data-accent="magenta"][data-theme="dark"] {
--blue: #EF7CAF; --blue-dark: #F5A0C6; --blue-light: #2E1622; --side-bg: #24121B;
}
/* ---- เทอร์คอยส์ ---- */
html[data-accent="teal"] {
--blue: #0E7490; --blue-dark: #0B5A70; --blue-light: #E4F2F7; --side-bg: #0B4E62;
}
html[data-accent="teal"][data-theme="dark"] {
--blue: #47B6D4; --blue-dark: #77CDE3; --blue-light: #142831; --side-bg: #101E26;
}
/* ---- แดงเลือดหมู ---- */
html[data-accent="maroon"] {
--blue: #9B1C2E; --blue-dark: #7C1624; --blue-light: #FBE9EB; --side-bg: #6B1220;
}
html[data-accent="maroon"][data-theme="dark"] {
--blue: #E8737F; --blue-dark: #F09AA3; --blue-light: #2E1519; --side-bg: #241114;
}
/* ---- คราม (indigo) ---- */
html[data-accent="indigo"] {
--blue: #4338CA; --blue-dark: #362BA5; --blue-light: #ECEAFB; --side-bg: #2E2585;
}
html[data-accent="indigo"][data-theme="dark"] {
--blue: #8B90F8; --blue-dark: #ABAFFB; --blue-light: #1D1E38; --side-bg: #161629;
}
/* ---- เขียวป่า (forest) ---- */
html[data-accent="forest"] {
--blue: #2F6B34; --blue-dark: #245328; --blue-light: #E9F3E9; --side-bg: #1F4A23;
}
html[data-accent="forest"][data-theme="dark"] {
--blue: #74C57C; --blue-dark: #99D89F; --blue-light: #172618; --side-bg: #111C12;
}
/* ---- ทอง (amberg) ---- */
html[data-accent="amberg"] {
--blue: #92610C; --blue-dark: #744C08; --blue-light: #FBF1DE; --side-bg: #63400A;
}
html[data-accent="amberg"][data-theme="dark"] {
--blue: #E0B054; --blue-dark: #EDC77E; --blue-light: #2C2312; --side-bg: #221B0E;
}
/* ---- น้ำเงินเข้ม (navy) ---- */
html[data-accent="navy"] {
--blue: #1E3A8A; --blue-dark: #172E6D; --blue-light: #E7ECF8; --side-bg: #14264F;
}
html[data-accent="navy"][data-theme="dark"] {
--blue: #7DA2E8; --blue-dark: #A3BEF0; --blue-light: #17203A; --side-bg: #101728;
}
/* ---- ชมพูกุหลาบ (rose) ---- */
html[data-accent="rose"] {
--blue: #BE255A; --blue-dark: #991C48; --blue-light: #FCE9EF; --side-bg: #7E1740;
}
html[data-accent="rose"][data-theme="dark"] {
--blue: #F489A9; --blue-dark: #F8AAC2; --blue-light: #30171F; --side-bg: #251218;
}
/* ---- ม่วงอมเทา (plum) ---- */
html[data-accent="plum"] {
--blue: #6B356B; --blue-dark: #552A55; --blue-light: #F3EAF3; --side-bg: #4A244A;
}
html[data-accent="plum"][data-theme="dark"] {
--blue: #C88AC8; --blue-dark: #DBABDB; --blue-light: #2A1B2A; --side-bg: #1F141F;
}
/* ---- วงกลมเลือกชุดสีในหน้าโปรไฟล์ ---- */
.pf-accents { display: flex; flex-wrap: wrap; gap: 9px; }
.pf-accent {
width: 34px; height: 34px; border-radius: 50%; cursor: pointer; padding: 0;
border: 2px solid var(--border); position: relative;
transition: transform .12s;
}
.pf-accent:hover { transform: scale(1.08); }
/* ชุดที่เลือกอยู่: วงแหวนสีแบรนด์ + เครื่องหมายถูก */
.pf-accent.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--card) inset; }
.pf-accent.active::after {
content: '✓'; position: absolute; inset: 0; display: grid; place-items: center;
color: #fff; font-size: 16px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
/* ============================================================
หน้าเลขา 3 แท็บ (2026-08-21 ตามรูปที่ Boss ให้)
============================================================ */
.sec-head-right { margin-left: auto; }
.sec-badge {
font-size: 12px; color: var(--muted); background: var(--sunken);
border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; white-space: nowrap;
}
.sec-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--border); padding: 0 2px; margin-bottom: 12px; }
.sec-tab {
border: none; background: none; padding: 8px 2px 10px; cursor: pointer; font-family: inherit;
font-size: 14.5px; color: var(--muted); border-bottom: 2px solid transparent; font-weight: 600;
}
.sec-tab.active { color: var(--text); border-bottom-color: var(--blue); }
.sec-sect { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sec-sect.hidden { display: none; }
#sec-sect-guide, #sec-sect-setup { overflow-y: auto; }
/* การ์ดสั่งงานเร็ว 4 ใบ */
.sec-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.sec-card {
display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer;
background: var(--card); border: 1px solid var(--border); border-radius: 10px;
padding: 12px 14px; font-family: inherit;
}
.sec-card:hover { border-color: var(--blue); background: var(--blue-light); }
.sec-card-t { font-size: 14.5px; font-weight: 700; color: var(--text); }
.sec-card-d { font-size: 12.5px; color: var(--muted); }
.sec-chat-tools { display: flex; justify-content: flex-end; padding-top: 6px; }
/* ไกด์เริ่มงาน */
.sec-guide-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.sec-guide-head h3 { margin: 0 0 2px; }
.sec-guide-count { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.sec-bar { height: 6px; background: var(--sunken); border-radius: 999px; overflow: hidden; margin-bottom: 6px; }
.sec-bar span { display: block; height: 100%; background: var(--blue); border-radius: 999px; transition: width .3s; }
.sec-steps2 { display: flex; flex-direction: column; }
.sec-step { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--border); }
.sec-steps2 .sec-step:last-child { border-bottom: none; }
.sec-step-box {
width: 20px; height: 20px; flex: 0 0 20px; border: 2px solid var(--border); border-radius: 5px;
display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff;
}
.sec-step.done .sec-step-box { background: var(--green); border-color: var(--green); }
.sec-step-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sec-step-t { font-size: 14.5px; font-weight: 600; color: var(--text); }
.sec-step-d { font-size: 12.5px; color: var(--muted); }
.sec-step.done .sec-step-t { color: var(--muted); }
/* รูทีน Co-work */
.sec-rt { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--border); }
.sec-rt-card .sec-rt:last-child { border-bottom: none; }
.sec-rt-main { flex: 1; min-width: 0; }
.sec-rt-when, .sec-rt-do { font-size: 13.5px; color: var(--muted); }
.sec-rt-when b, .sec-rt-do b { color: var(--text); }
/* สวิตช์ */
.sec-sw { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.sec-sw input { opacity: 0; width: 0; height: 0; position: absolute; }
.sec-sw span {
position: absolute; inset: 0; background: var(--border); border-radius: 999px;
cursor: pointer; transition: background .2s;
}
.sec-sw span::before {
content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px;
background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.sec-sw input:checked + span { background: var(--blue); }
.sec-sw input:checked + span::before { transform: translateX(18px); }
/* ตั้งค่าผู้ช่วย */
.sec-set-card { margin-bottom: 12px; }
.sec-set-head { padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.sec-set-head h3 { margin: 0 0 2px; }
.sec-set-row { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--border); }
.sec-set-card .sec-set-row:last-child { border-bottom: none; }
.sec-set-main { flex: 1; min-width: 0; }
.sec-set-t { font-size: 14.5px; font-weight: 600; color: var(--text); }
.sec-set-d { font-size: 12.5px; color: var(--muted); }
.sec-set-ctrl { flex-shrink: 0; }
.sec-pills { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sec-pill {
border: 1px solid var(--border); background: var(--card); color: var(--muted);
padding: 5px 13px; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 13px;
}
.sec-pill.active { border-color: var(--blue); color: var(--blue); font-weight: 700; }
.sec-set-save { display: flex; justify-content: flex-end; padding-top: 10px; }
.sec-rooms { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 8px 0; }
.sec-room { display: flex; align-items: center; gap: 6px; font-size: 13.5px; cursor: pointer; }
@media (max-width: 860px) {
.sec-quick { grid-template-columns: 1fr; }
.sec-tabs { gap: 14px; }
.sec-set-row, .sec-step, .sec-rt { align-items: flex-start; }
.sec-pills { justify-content: flex-start; }
.sec-badge { font-size: 11px; padding: 3px 9px; }
}
/* ============================================================
Window Controls Overlay — ให้ PWA เดสก์ท็อปดูเหมือนแอปจริง
(Boss สั่ง 2026-08-21: แถบชื่อของ Windows ทำให้ดูเหมือนเว็บในกรอบ)
manifest มี display_override:["window-controls-overlay","standalone"]
→ OS ยกแถบชื่อออก เหลือแค่ปุ่ม ─ ◻ ✕ ลอยมุมขวา แล้วแอปวาดหัวเองแทน
⚠️ ทุกกฎในบล็อกนี้อยู่ใต้ @media (display-mode: window-controls-overlay)
→ ในแท็บเบราว์เซอร์ปกติและบนมือถือ "ไม่มีผลอะไรเลย" (ที่นั่นไม่มีแถบชื่ออยู่แล้ว)
env(titlebar-area-*) = พื้นที่ที่ OS ยกให้เราวาด (ไม่รวมที่ปุ่ม ─ ◻ ✕)
============================================================ */
@media (display-mode: window-controls-overlay) {
/* ความสูงแถบหัวจาก OS · เผื่อ 33px กรณีอ่านค่าไม่ได้ */
:root { --titlebar-h: env(titlebar-area-height, 33px); }
/* แถบหัวไซด์บาร์ = พื้นที่ลากย้ายหน้าต่าง (เหมือนลากแถบชื่อเดิม) */
.sidebar-head {
-webkit-app-region: drag; app-region: drag;
/* สูงพอๆ กับแถบ OS ให้แบรนด์อยู่ระดับเดียวกับปุ่ม ─ ◻ ✕ */
min-height: var(--titlebar-h);
padding-top: 6px;
}
/* ปุ่มในแถบต้องกดได้ ไม่ใช่กลายเป็นที่ลาก (ไม่งั้นกดสลับธีม/สร้างห้องไม่ได้) */
.sidebar-head .head-tools,
.sidebar-head .icon-btn,
.sidebar-head button {
-webkit-app-region: no-drag; app-region: no-drag;
}
/* ฝั่งขวา: หัวหน้าเพจ/หัวห้อง ต้องเว้นที่ให้ปุ่ม ─ ◻ ✕ ที่ลอยมุมขวาบน
ไม่งั้นปุ่ม ⋯ / ค้นหา ของเราจะอยู่ใต้ปุ่มปิดหน้าต่าง = กดปิดโดยไม่ตั้งใจ */
.main .page-head, .main .chat-head {
padding-top: max(8px, calc(var(--titlebar-h) - 20px));
-webkit-app-region: drag; app-region: drag;
}
/* แต่ของที่กดได้ในหัวห้องต้องกดได้ตามปกติ */
.main .page-head *, .main .chat-head * {
-webkit-app-region: no-drag; app-region: no-drag;
}
/* ช่องว่างขวาสุดเท่าความกว้างปุ่มหน้าต่าง — คำนวณจากความกว้างที่ OS ยกให้ */
.main .page-head { padding-right: calc(100% - env(titlebar-area-width, 100%) + 16px); }
.main .chat-head { padding-right: calc(100% - env(titlebar-area-width, 100%) + 12px); }
/* ---- หน้า login / รอตั้งรหัส: ยังไม่มีไซด์บาร์ให้ลาก ----
ถ้าไม่ทำ = ตอนยังไม่ล็อกอินจะ "ลากหน้าต่างไม่ได้เลย" (ไม่มีแถบชื่อแล้ว)
→ ทำแถบลากใสๆ พาดด้านบนเต็มความกว้างที่ OS ยกให้ */
/* (#mustpw-screen มี class .login-screen อยู่แล้ว → ครอบคลุมทั้งสองหน้า) */
.login-screen::before {
content: ''; position: fixed; top: 0; left: 0;
width: env(titlebar-area-width, 100%); height: var(--titlebar-h);
-webkit-app-region: drag; app-region: drag;
z-index: 4; /* ต่ำกว่า .theme-fab (z-index:5) ปุ่มยังกดได้ */
}
/* ปุ่มสลับธีมมุมซ้ายบนของหน้า login เดิมอยู่ที่ top:10px = ใต้แถบ OS พอดี
เลื่อนลงมาให้พ้นแถบ ไม่ให้ทับกันจนกดไม่ได้ */
.theme-fab {
top: calc(var(--titlebar-h) + 8px);
-webkit-app-region: no-drag; app-region: no-drag;
}
}
/* ---- หน้าตั้งค่าผู้ใช้งาน (ละเอียด) 2026-08-21 ----
ทุกช่องมีป้ายถาวรซ้ายมือ + คำอธิบายใต้ช่อง (placeholder หายตอนพิมพ์ = กรอกผิดช่อง) */
.uf-card { max-width: 620px; }
.uf-sec {
font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--blue);
text-transform: uppercase; margin: 16px 0 6px; padding-bottom: 5px;
border-bottom: 1px solid var(--border);
}
.uf-sec:first-child { margin-top: 4px; }
.uf-row { display: flex; gap: 14px; align-items: flex-start; padding: 9px 0; }
.uf-lb {
flex: 0 0 168px; font-size: 13.5px; font-weight: 600; color: var(--text);
padding-top: 9px; line-height: 1.35;
}
.uf-req { color: var(--red); }
.uf-in { flex: 1; min-width: 0; }
.uf-in input, .uf-in select { width: 100%; margin: 0; }
.uf-hint { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.45; }
.uf-ro {
padding: 9px 12px; border-radius: 8px; background: var(--sunken);
border: 1px dashed var(--border); color: var(--muted); font-size: 14px;
}
.uf-err { color: var(--red); font-size: 13px; min-height: 18px; margin: 8px 0 0; }
.tbl .nowrap { white-space: nowrap; }
@media (max-width: 700px) {
/* มือถือ: ป้ายขึ้นบรรทัดบนช่อง ไม่บีบช่องให้แคบ */
.uf-row { flex-direction: column; gap: 4px; padding: 8px 0; }
.uf-lb { flex: none; padding-top: 0; }
}
/* ============================================================
รายชื่อผู้ใช้ + หน้าจัดการผู้ใช้ (ตามรูปที่ Boss ให้ 2026-08-21)
============================================================ */
.uf-search {
width: 100%; margin: 0 0 10px; padding: 10px 13px; border-radius: 10px;
border: 1px solid var(--border); background: var(--sunken); color: var(--text); font-size: 14px;
}
.ul-list { display: flex; flex-direction: column; }
/* แถวรายชื่อ 1 คน */
.cpu-row {
display: flex; align-items: center; gap: 12px;
padding: 11px 4px; border-bottom: 1px solid var(--border);
}
.ul-list .cpu-row:last-child { border-bottom: none; }
.cpu-row.off { opacity: .55; }
.cpu-row.hidden { display: none; }
.cpu-av { flex: 0 0 auto; display: flex; }
.cpu-main { flex: 1; min-width: 0; }
.cpu-name { display: flex; align-items: center; gap: 7px; font-size: 14.5px; color: var(--text); }
.cpu-name b { font-weight: 700; }
.cpu-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.cpu-dot { width: 8px; height: 8px; border-radius: 50%; background: #64748B; flex: 0 0 8px; }
.cpu-dot.on { background: var(--green); }
/* ป้ายระดับตำแหน่ง — สีต่างกันให้กวาดตาเห็นไว */
.cpu-rank {
font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px;
background: var(--sunken); color: var(--muted); white-space: nowrap; flex: 0 0 auto;
}
.cpu-rank.rank-staff { background: var(--blue-light); color: var(--blue); }
.cpu-rank.rank-lead { background: var(--amber-bg); color: var(--amber); }
.cpu-rank.rank-admin { background: var(--green-bg); color: var(--green); }
.cpu-rank.rank-exec { background: rgba(139,92,246,.16); color: #A78BFA; }
.cpu-rank.rank-system { background: var(--sunken); color: var(--muted); }
/* ---- โมดัลจัดการผู้ใช้ ---- */
.cu-wrap { max-width: 680px; }
.cu-hero {
display: flex; align-items: center; gap: 14px; padding-bottom: 14px;
border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.cu-hero-name { font-size: 17px; font-weight: 700; color: var(--text); }
.cu-hero-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.cu-sec { padding: 14px 0 4px; border-bottom: 1px solid var(--border); }
.cu-wrap .cu-sec:last-of-type { border-bottom: none; }
.cu-sec-h { margin-bottom: 10px; }
.cu-sec-h b { font-size: 14.5px; color: var(--text); display: block; }
.cu-sec-h span { font-size: 12.5px; color: var(--muted); }
/* ช่องกรอก 2 คอลัมน์ — ป้ายชื่ออยู่บนช่อง (ไม่ใช้ placeholder เดี่ยว) */
.cu-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.cu-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cu-lb { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.cu-lb i { color: var(--red); font-style: normal; }
.cu-f input, .cu-f select { width: 100%; margin: 0; }
.cu-f input[readonly] { background: var(--sunken); color: var(--muted); border-style: dashed; }
/* ปุ่มเลือกระดับสิทธิ์ */
.cu-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.cu-pill {
border: 1px solid var(--border); background: var(--card); color: var(--muted);
padding: 6px 15px; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 13px;
}
.cu-pill.active { border-color: var(--blue); color: var(--blue); font-weight: 700; background: var(--blue-light); }
.cu-sw-row { display: flex; align-items: center; gap: 12px; padding: 12px 0 2px; font-size: 14px; }
.cu-sw-row > span { flex: 1; color: var(--text); }
/* ห้องที่เข้าถึงได้ */
.cu-rooms { display: flex; flex-wrap: wrap; gap: 8px; }
.cu-room {
display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13.5px;
border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; color: var(--muted);
}
.cu-room.on { border-color: var(--blue); color: var(--text); background: var(--blue-light); }
/* รายการตำแหน่งงาน — ใช้ flex ไม่ใช่ตาราง เพราะบนมือถือ 360px ตารางดันปุ่มลบตกขอบ
ต้องเลื่อนข้างถึงจะเห็น (วัดจริง: ตารางกว้าง 364px แต่ช่องมองเห็น 318px) */
.jt-list { display: flex; flex-direction: column; }
.jt-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 2px; border-bottom: 1px solid var(--border);
}
.jt-row:last-child { border-bottom: 0; }
.jt-nm { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.jt-ct { flex: 0 0 auto; }
.jt-ct.muted { color: var(--muted); font-size: 13px; min-width: 22px; text-align: center; }
.jt-btns { flex: 0 0 auto; display: flex; gap: 6px; }
.jt-btns .btn { min-height: 34px; }
@media (max-width: 700px) {
/* มือถือ: ปุ่มอยู่แถวเดียวกับชื่อ ไม่ตกบรรทัด — ปุ่มเต็มความกว้างกินที่เกินไป
เห็นได้แค่ 5 ตำแหน่งต่อหน้าจอ ทั้งที่มี 24 ตำแหน่ง */
.jt-row { gap: 8px; padding: 10px 2px; }
.jt-nm { font-weight: 600; }
.jt-btns .btn { min-height: 38px; padding: 6px 10px; font-size: 12.5px; }
}
/* ตำแหน่งงาน: ดรอปดาวน์ + ปุ่ม ＋ เพิ่มตำแหน่งใหม่ (Boss สั่ง 2026-08-31) */
.cu-job-row { display: flex; gap: 6px; align-items: stretch; }
.cu-job-row select { flex: 1 1 auto; min-width: 0; }
.cu-job-row .cu-job-add { flex: 0 0 auto; min-width: 40px; min-height: 40px; font-size: 16px; line-height: 1; }
.cu-actions { display: flex; gap: 8px; align-items: center; padding-top: 16px; }
.cu-actions .cu-susp { margin-left: auto; }
/* ลบถาวร — อยู่ขวาสุดคู่กับปุ่มระงับ ให้เห็นว่าเป็นคนละระดับความรุนแรง */
.cu-actions .cu-del { flex: 0 0 auto; }
.btn.danger-soft { background: var(--red-bg); color: var(--red); border-color: transparent; }
@media (max-width: 700px) {
.cu-grid2 { grid-template-columns: 1fr; }
.cpu-row { flex-wrap: wrap; gap: 8px; }
.cpu-main { flex: 1 1 100%; order: 2; }
.cu-actions { flex-wrap: wrap; }
.cu-actions .cu-susp { margin-left: 0; }
/* มือถือ: ปุ่มอันตราย 2 ตัวลงบรรทัดล่าง เต็มความกว้าง กันกดพลาดตอนเลื่อน */
.cu-actions .cu-susp, .cu-actions .cu-del { flex: 1 1 calc(50% - 4px); min-height: 40px; }
}
/* ---- ไอคอนบอกสถานะห้อง: เปิด / ล็อก / ยังไม่ได้เข้า (Boss ท้วง 2026-08-21 "ขึ้นล็อกหมดเลย มองยาก") ----
ไม่พึ่งรูปอีโมจิเดี่ยว ๆ เพราะ 🔐 กับ 🔒 หน้าตาใกล้กันเกินไป → แยกด้วย "สี + รูปทรง" */
.chan-ic {
width: 17px; flex: 0 0 17px; text-align: center; font-size: 12px; line-height: 1;
font-weight: 700;
}
.chan-ic.ic-open { color: var(--green); font-size: 14px; } /* # = ห้องเปิด เข้าอ่านได้เลย */
.chan-ic.ic-lock { color: var(--amber); font-size: 11px; } /* 🔒 = ล็อก ต้องเป็นสมาชิก */
.chan-ic.ic-no { color: var(--muted); opacity: .5; } /* · = ยังไม่ได้เข้าห้อง */
/* ============================================================
DM: แถบพับได้ + หน้าต่างแชทลอยล่างขวา (แบบเฟส) — Boss สั่ง 2026-08-21
============================================================ */
.dm-bar {
display: flex; align-items: center; gap: 9px; width: 100%; cursor: pointer;
background: var(--side-input, rgba(127,127,127,.12)); border: 1px solid transparent;
border-radius: 10px; padding: 10px 12px; margin: 6px 0 4px;
font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--side-text, var(--text));
}
.dm-bar:hover { border-color: var(--blue); }
.dm-bar-ic { font-size: 14px; opacity: .85; }
.dm-bar-tx { flex: 1; text-align: left; }
.dm-bar-badge {
background: var(--red); color: #fff; font-size: 11px; font-weight: 700;
min-width: 18px; height: 18px; border-radius: 9px; display: flex;
align-items: center; justify-content: center; padding: 0 5px;
}
.dm-bar-arrow { font-size: 10px; opacity: .6; }
/* ที่วางหน้าต่าง — ลอยมุมขวาล่าง เรียงจากขวาไปซ้าย */
.dm-dock {
/* หน้าต่างแชทอยู่ "มุมขวาล่าง" (Boss ยืนยัน 2026-08-21) — ไม่ทับแถบข้าง/เนื้อหา
ส่วนกล่องรายชื่อ (.dm-list-top) เป็น flyout ข้างปุ่มซ้าย คนละตัวกัน */
position: fixed; right: 14px; bottom: 0; z-index: 300;
display: flex; align-items: flex-end; gap: 10px; pointer-events: none;
}
.dm-dock > * { pointer-events: auto; }
.dmw {
/* Boss ท้วง 2026-08-27 "ช่องมันเล็กไป" — 272x268 แคบเกินสำหรับคอม
ข้อความไทยตัดคำแปลกๆ · รูปบีบ · ขยายเป็น 340x400 (ยังไม่บังจอ) */
width: 340px; display: flex; flex-direction: column;
background: var(--card, #fff); border: 1px solid var(--border, #E2E8F0);
border-radius: 10px 10px 0 0; box-shadow: 0 -2px 18px rgba(0, 0, 0, .28);
overflow: hidden;
}
.dmw-head {
display: flex; align-items: center; gap: 7px; padding: 8px 9px; cursor: pointer;
/* fallback #0F4C81: โหมดสว่างของแอปยังไม่มีค่า --blue (ปัญหาระดับแอป) ถ้าไม่ใส่จะขาวบนขาว */
background: var(--blue, #0F4C81); color: var(--on-brand, #fff);
}
.dmw-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dmw-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.45); flex: 0 0 8px; }
.dmw-dot.on { background: #34D399; }
.dmw-btn {
border: none; background: none; color: inherit; cursor: pointer; font-size: 13px;
padding: 2px 4px; opacity: .85; font-family: inherit; line-height: 1;
}
.dmw-btn:hover { opacity: 1; }
.dmw.min { width: 210px; }
.dmw.min .dmw-head { border-radius: 10px 10px 0 0; }
.dmw-body {
height: 400px; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px;
background: var(--bg, #F4F6F9);
}
.dmw-empty { color: var(--muted); font-size: 12.5px; text-align: center; margin: auto; }
.dmw-msg { display: flex; gap: 7px; align-items: flex-start; }
/* ของเราเอง: ทุกอย่างย้ายไปขวาพร้อมกัน (อวตาร+ชื่อ+ข้อความ) เหมือนในห้องแชท */
.dmw-msg.me { flex-direction: row-reverse; justify-content: flex-start; margin-left: auto; }
.dmw-av { flex: 0 0 auto; display: flex; cursor: pointer; }
.dmw-av .avatar { width: 26px; height: 26px; font-size: 10px; }
/* ⚠️ ชื่อคนส่งในข้อความ ต้องใช้คลาสแยก — .dmw-name ถูกใช้เป็น "ชื่อห้อง" บนหัวหน้าต่างแล้ว
(มี flex:1 ทำให้ชื่อในข้อความยืดเต็มแถว จัดตำแหน่งเพี้ยน) */
.dmw-who { font-size: 11px; font-weight: 700; color: var(--muted); }
.dmw-msg.me .dmw-who { display: none; } /* ของเราไม่ต้องโชว์ชื่อตัวเองซ้ำทุกใบ */
/* หน้าต่าง DM เป็นกล่องแคบ (340px) — ถ้าไม่มีพื้นบับเบิลจะแยกไม่ออกว่าใครพูด
(ต่างจากห้องแชทที่กว้าง ระยะซ้าย-ขวาเห็นชัดอยู่แล้ว) Boss ท้วง 2026-08-27 "รูปแบบมันแปลกๆ"
→ คืนบับเบิลให้หน้าต่าง DM: ของเราน้ำเงิน · คนอื่นเทา แบบ Messenger */
.dmw-bub {
max-width: 100%; padding: 6px 10px; border-radius: 14px;
font-size: 13.5px; line-height: 1.45;
background: var(--sunken); color: var(--text, #1B2A3A); word-break: break-word;
}
.dmw-msg.me .dmw-bub {
background: var(--blue); color: #fff; text-align: left;
}
.dmw-msg.me .dmw-bub a { color: #fff; text-decoration: underline; }
/* กล่องห่อ = บับเบิล + แถวเวลา/เครื่องมือ (ให้เหมือนห้องแชท) */
.dmw-wrap { display: flex; flex-direction: column; max-width: 86%; min-width: 0; }
.dmw-msg.me .dmw-wrap { align-items: flex-end; }
.dmw-wrap .dmw-bub { max-width: 100%; }
.dmw-under { display: flex; align-items: center; gap: 6px; }
.dmw-time { font-size: 10px; color: var(--muted); }
/* ปุ่มเครื่องมือในหน้าต่าง DM เล็กกว่าห้องแชทเล็กน้อย (หน้าต่างแคบ) */
.dmw-under .msg-tool { padding: 2px; }
.dmw-foot { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--border, #E2E8F0); background: var(--card, #fff);
align-items: flex-end; } /* ช่องพิมพ์สูงขึ้นได้ → ปุ่มเกาะขอบล่างไว้ */
.dmw-in {
flex: 1; margin: 0; padding: 8px 11px; border-radius: 16px; font-size: 13.5px;
border: 1px solid var(--border); background: var(--sunken); color: var(--text);
/* พิมพ์ยาวแล้วขยายเองได้ (เดิมเป็น บรรทัดเดียว ข้อความไหลเลยขอบ) */
resize: none; font-family: inherit; line-height: 1.45;
min-height: 34px; max-height: 136px; overflow-y: hidden;
white-space: pre-wrap; word-break: break-word;
}
.dmw-in:focus { border-color: var(--blue, #0F4C81); background: var(--card, #fff); outline: none; }
.dmw-send { border: none; background: none; color: var(--blue, #0F4C81); cursor: pointer; font-size: 16px; padding: 0 4px; }
@media (max-width: 860px) {
/* มือถือ: เปิดทีละอัน กว้างเกือบเต็มจอ · ยกขึ้นเหนือแถบล่าง */
.dm-dock { right: 6px; left: 6px; bottom: 58px; gap: 6px; }
.dmw { width: 100%; }
.dmw ~ .dmw { display: none; }
.dmw-body { height: 46vh; }
body.in-room .dm-dock { display: none; } /* อยู่ในห้องแชท ช่องพิมพ์ต้องไม่ถูกทับ */
}
/* รูป/สื่อในหน้าต่าง DM (Boss ท้วง "รูปไม่ขึ้น" 2026-08-21) */
.dmw-bub.media { padding: 4px; background: transparent; }
.dmw-msg.me .dmw-bub.media { background: transparent; }
.dmw-img { max-width: 100%; max-height: 240px; border-radius: 10px; display: block; cursor: pointer; }
.dmw-sticker { width: 90px; height: 90px; object-fit: contain; display: block; }
.dmw-album { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; position: relative; }
.dmw-album img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 7px; cursor: pointer; }
.dmw-more {
position: absolute; right: 4px; bottom: 4px; background: rgba(0,0,0,.65); color: #fff;
font-size: 11px; padding: 1px 7px; border-radius: 9px;
}
/* caption อยู่เหนือสื่อ → เว้นระยะด้านล่างแทนด้านบน (Boss สั่ง 2026-08-28) */
.dmw-cap { display: block; font-size: 12.5px; margin-bottom: 4px; color: var(--text); }
.dmw-msg.me .dmw-bub.media .dmw-cap { color: var(--text); }
/* ปุ่ม "ดูเพิ่ม" ในรายชื่อสมาชิก */
.user-more {
text-align: center; font-size: 12.5px; color: var(--blue); cursor: pointer;
padding: 7px; font-weight: 600;
}
.user-more:hover { text-decoration: underline; }
/* กล่องรายชื่อ DM = หน้าต่างลอยออกข้างขวาของปุ่ม (Boss สั่ง 2026-08-21)
ไม่ดันเนื้อหาในแถบข้างลงแล้ว · แถบข้างต้อง position:relative ให้ absolute อ้างอิงถูก */
.dm-wrap { position: relative; }
.dm-list-top {
position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); z-index: 260;
width: 288px; max-height: 62vh; overflow-y: auto;
background: var(--card, #fff); border: 1px solid var(--border, #E2E8F0);
border-radius: 12px; box-shadow: 0 10px 34px rgba(0, 0, 0, .32);
padding: 8px;
}
.dm-search-wrap { padding: 2px 0 6px; }
.dm-search {
width: 100%; margin: 0; padding: 7px 11px; border-radius: 8px; font-size: 13px;
border: 1px solid var(--border, #E2E8F0);
background: var(--side-input, rgba(127,127,127,.12)); color: var(--side-text, var(--text, #1B2A3A));
}
.dm-search:focus { border-color: var(--blue, #0F4C81); outline: none; }
.dm-search::placeholder { color: var(--side-muted, var(--muted, #64748B)); }
.dm-new {
font-size: 10px; font-weight: 700; color: var(--blue, #0F4C81);
background: var(--blue-light, #E6EEF7); border-radius: 8px; padding: 1px 6px;
}
@media (max-width: 860px) {
/* มือถือ: ไม่มีที่ลอยข้าง → กลับมาเป็นกล่องใต้ปุ่มเต็มความกว้าง */
.dm-list-top {
position: static; width: auto; max-height: 42vh; box-shadow: none;
border: none; border-radius: 0; padding: 0; background: transparent;
}
}
/* ============================================================
การ์ดแจ้งเตือนข้อความใหม่ แบบเฟสบุ๊ก (Boss สั่ง 2026-08-21)
============================================================ */
.notif-wrap {
position: fixed; right: 14px; bottom: 14px; z-index: 400;
display: flex; flex-direction: column-reverse; gap: 8px; pointer-events: none;
}
.ntf {
pointer-events: auto; cursor: pointer; width: 320px; max-width: 88vw;
display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px;
background: var(--card, #fff); border: 1px solid var(--border, #E2E8F0);
border-radius: 12px; box-shadow: 0 8px 28px rgba(0, 0, 0, .3);
/* เด้งเข้าจากขวา */
opacity: 0; transform: translateX(20px); transition: opacity .2s, transform .2s;
}
.ntf.in { opacity: 1; transform: translateX(0); }
.ntf:hover { border-color: var(--blue, #0F4C81); }
.ntf-av { flex: 0 0 auto; display: flex; }
.ntf-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ntf-top { font-size: 13.5px; color: var(--text, #1B2A3A); display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.ntf-room { font-size: 11.5px; color: var(--muted, #64748B); }
.ntf-body {
font-size: 12.8px; color: var(--muted, #64748B); line-height: 1.45;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ntf-x {
border: none; background: none; color: var(--muted, #64748B); cursor: pointer;
font-size: 12px; padding: 2px 3px; line-height: 1; flex: 0 0 auto;
}
.ntf-x:hover { color: var(--text, #1B2A3A); }
@media (max-width: 860px) {
/* มือถือ: เด้งบนสุด ไม่ทับหน้าต่างแชท/แถบล่าง */
.notif-wrap { right: 8px; left: 8px; top: 8px; bottom: auto; flex-direction: column; }
.ntf { width: auto; }
}
/* ============================================================
เมนูเดียว: แถบ + กล่องสี่เหลี่ยม + รายชื่อ DM (Boss สั่ง 2026-08-21)
============================================================ */
.mn-wrap { position: relative; padding: 0 0 4px; }
.mn-bar {
display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.20);
border-radius: 10px; padding: 11px 13px; font-family: inherit;
font-size: 14px; font-weight: 700; color: #fff;
}
.mn-bar:hover { border-color: #7FBAEC; }
.mn-bar-ic { font-size: 15px; opacity: .9; }
.mn-bar-tx { flex: 1; text-align: left; }
.mn-bar-badge {
background: var(--red, #DC2626); color: #fff; font-size: 11px; font-weight: 700;
min-width: 20px; height: 20px; border-radius: 10px;
display: flex; align-items: center; justify-content: center; padding: 0 6px;
}
.mn-bar-arrow { font-size: 10px; opacity: .65; }
.mn-panel {
margin-top: 6px; padding: 10px;
background: rgba(0,0,0,.16);
border: 1px solid rgba(255,255,255,.16); border-radius: 12px;
max-height: 66vh; overflow-y: auto;
}
/* กล่องสี่เหลี่ยม 3 คอลัมน์ */
.mn-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mn-tile {
position: relative; display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 7px; padding: 16px 6px; cursor: pointer;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.22);
border-radius: 10px; font-family: inherit;
color: #fff;
}
.mn-tile:hover { border-color: #7FBAEC; background: rgba(255,255,255,.13); }
/* ไทล์ที่เป็นลิงก์จริง (ติดตั้งแอป) — ไม่ได้ขนาด/ตัวอักษรเท่า