/* msn26 — ธีมเดสก์ท็อปยุค 2005 (หน้าต่างฟ้าเงา ๆ + รายชื่อขาวสะอาด) · ออกแบบใหม่ทั้งหมด ไม่ใช้รูป/ไอคอนของโปรแกรมจริง */
:root {
  --font: Tahoma, "Segoe UI", "Leelawadee UI", "Noto Sans Thai", "Sarabun", sans-serif;
  --frame: #0b4fd0;
  --frame-dark: #06309a;
  --tb1: #0a58d8; --tb2: #3a8dff; --tb3: #0746c2;
  --panel1: #e4f0fd; --panel2: #c3dbf6;
  --line: #9db9de;
  --soft: #f3f8ff;
  --text: #1b2433;
  --muted: #6c7a8f;
  --link: #0b5ad9;
  --on: #3fbf3f; --busy: #e23c3c; --away: #f2a516; --off: #a7b0bc;
  --taskbar-h: 34px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; font: 13px/1.45 var(--font); color: var(--text); overflow: hidden;
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(900px 700px at -10% 110%, rgba(120,220,255,.55), transparent 60%),
    linear-gradient(160deg, #3a7be0 0%, #5fa8f2 45%, #7fd0e8 75%, #b5ecd9 100%);
  -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--link); }
.muted { color: var(--muted); }
.small { font-size: 12px; } .tiny { font-size: 11px; }
.err { color: #c62828; min-height: 1.2em; font-size: 12px; }
.scroll { overflow-y: auto; overscroll-behavior: contain; }
.grow { flex: 1 1 auto; min-height: 0; }
.center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; }
.pad { padding: 18px; }
.col { display: flex; flex-direction: column; }

#desktop { position: fixed; inset: 0; }

/* ---------------------------------------------------------------- หน้าต่าง */
.win {
  position: absolute; display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--frame-dark); border-radius: 8px 8px 4px 4px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,20,70,.35), inset 0 0 0 3px var(--frame);
  padding: 0 3px 3px;
}
.titlebar {
  flex: none; height: 30px; margin: 0 -3px; display: flex; align-items: center; gap: 6px; padding: 0 5px 0 8px;
  background: linear-gradient(180deg, #4a9bff 0%, var(--tb1) 12%, var(--tb2) 45%, var(--tb1) 55%, var(--tb3) 100%);
  color: #fff; font-weight: 700; text-shadow: 1px 1px 0 rgba(0,0,40,.55); user-select: none; touch-action: none;
}
.win:not(.active):not(.main-win) .titlebar, .main-win.inactive .titlebar { filter: saturate(.55) brightness(1.15); }
.tb-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.tb-ic { width: 18px; height: 18px; flex: none; }
.tb-btns { display: flex; gap: 2px; }
.tbb {
  width: 22px; height: 22px; border-radius: 4px; border: 1px solid #fff; padding: 0; position: relative;
  background: linear-gradient(180deg, #5ea8ff, #1f6cf0 60%, #2a7bff); box-shadow: inset 0 0 2px rgba(0,0,0,.3);
}
.tbb.x { background: linear-gradient(180deg, #f39a83, #e04a26 60%, #e8603e); }
.tbb::after { content: ""; position: absolute; inset: 0; margin: auto; }
.tbb.min::after { width: 8px; height: 3px; background: #fff; top: 10px; }
.tbb.max::after { width: 10px; height: 9px; border: 2px solid #fff; border-top-width: 3px; }
.tbb.x::after { content: "✕"; color: #fff; font-size: 13px; line-height: 20px; text-align: center; text-shadow: none; }
.tb-back { display: none; background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; padding: 0 6px 2px 0; text-shadow: inherit; }

/* โลโก้ msn26: ลูกโป่งคำพูด + หน้ายิ้ม (ออกแบบเอง) */
.logo-ic, .logo {
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2381e0ff'/%3E%3Cstop offset='1' stop-color='%23157be6'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23b8f58a'/%3E%3Cstop offset='1' stop-color='%2333a532'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M30 6c14 0 24 8 24 19s-10 19-24 19c-3 0-5 0-8-1l-11 7 3-10C8 37 6 31 6 25 6 14 16 6 30 6z' fill='url(%23a)' stroke='%230a4aa8' stroke-width='2.5'/%3E%3Cpath d='M44 30c8 0 14 5 14 12 0 4-2 7-5 9l2 7-8-4h-3c-8 0-14-5-14-12s6-12 14-12z' fill='url(%23b)' stroke='%23206b1f' stroke-width='2.5'/%3E%3Ccircle cx='23' cy='22' r='2.6' fill='%23083070'/%3E%3Ccircle cx='35' cy='22' r='2.6' fill='%23083070'/%3E%3Cpath d='M21 29q8 7 16 0' stroke='%23083070' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='22' cy='12' rx='9' ry='3.5' fill='%23fff' opacity='.5'/%3E%3C/svg%3E");
}
.logo { width: 64px; height: 64px; }
.logo.big { width: 96px; height: 96px; filter: drop-shadow(0 4px 6px rgba(0,40,120,.3)); }
.chat-ic { background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M15 3c7 0 12 4 12 9.5S22 22 15 22h-3l-6 5 1.5-6C5 19.5 3 16 3 12.5 3 7 8 3 15 3z' fill='%23fff' stroke='%230a4aa8' stroke-width='2'/%3E%3Cpath d='M9 10h12M9 14h8' stroke='%232a7bff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* ---------------------------------------------------------------- หน้าต่างหลัก */
.main-win { left: 28px; top: 22px; width: 350px; height: min(700px, calc(100% - var(--taskbar-h) - 40px)); z-index: 5; }
.main-body { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fff; }
.view { flex: 1; min-height: 0; }
.signing { position: relative; width: 70px; height: 70px; }
.signing i { position: absolute; width: 30px; height: 30px; border-radius: 50%; top: 20px; left: 20px; animation: orbit 1.1s linear infinite; }
.signing i:first-child { background: radial-gradient(circle at 35% 30%, #c6f3ff, #1f8ae6); }
.signing i:last-child { background: radial-gradient(circle at 35% 30%, #d8ffb8, #34a832); animation-delay: -.55s; }
@keyframes orbit { from { transform: rotate(0) translateX(20px) rotate(0); } to { transform: rotate(360deg) translateX(20px) rotate(-360deg); } }

.login { background: linear-gradient(180deg, #fff 0%, #eaf3ff 70%, #d6e7fb 100%); }
.brand { margin: 0; font: italic 700 34px/1 "Trebuchet MS", var(--font); color: #0a3f9e; letter-spacing: -1px; }
.brand span { color: #2fa52e; font-style: normal; font-size: 22px; vertical-align: super; margin-left: 2px; }
.tagline { margin: 0; color: var(--muted); }
.login-box { width: 100%; max-width: 250px; text-align: left; display: grid; gap: 4px; margin: 6px 0; }
.lbl { font-size: 12px; color: #33415a; margin-top: 4px; }
.fake-input { border: 1px solid #7f9db9; background: #f6f6f6; padding: 4px 6px; font-size: 12px; }
select, input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea {
  border: 1px solid #7f9db9; background: #fff; padding: 4px 6px; border-radius: 0; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: #2a7bff; box-shadow: 0 0 0 2px rgba(42,123,255,.18); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 26px; padding: 3px 14px;
  border: 1px solid #003c74; border-radius: 3px; background: linear-gradient(180deg, #fff, #ecebe6 85%, #d6d0c5);
  text-decoration: none; color: #000; white-space: nowrap;
}
.btn:hover { box-shadow: inset 0 0 0 2px #f8b636; }
.btn:active { background: linear-gradient(180deg, #e5e3dc, #f3f2ee); }
.btn:disabled { opacity: .55; cursor: default; box-shadow: none; }
.btn.primary { font-weight: 700; }
.btn.small { min-height: 22px; padding: 1px 9px; font-size: 12px; }
.btn.wide { width: 100%; }
.btn.link { border: 0; background: none; color: var(--link); text-decoration: underline; box-shadow: none; }
.btn.danger { color: #b00000; }
.btn.google { min-height: 34px; padding: 4px 16px; font-weight: 700; }
.g-ic { width: 18px; height: 18px; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.1H42V20H24v8h11.3C33.7 32.7 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.6-.4-3.9z'/%3E%3Cpath fill='%23FF3D00' d='M6.3 14.7l6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-7.9l-6.5 5C9.5 39.6 16.2 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.1H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C37 39.2 44 34 44 24c0-1.3-.1-2.6-.4-3.9z'/%3E%3C/svg%3E"); }

.hello { margin: 0 0 6px; color: #0a3f9e; font-size: 18px; }
.field { display: grid; gap: 4px; margin: 10px 0; font-size: 12px; color: #33415a; }
.field input, .field select, .field textarea { width: 100%; font-size: 13px; color: var(--text); }
.dp-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.dp-grid button { padding: 2px; border: 2px solid transparent; border-radius: 6px; background: none; aspect-ratio: 1; }
.dp-grid button.on { border-color: #2a7bff; background: #dceaff; }
.dp-grid button.up { border: 1px dashed #7f9db9; font-size: 11px; color: var(--muted); line-height: 1.1; }
.dp-svg { width: 100%; height: 100%; display: block; border-radius: 3px; }

/* ---------------------------------------------------------------- กรอบรูปที่แสดง (สีตามสถานะ) */
.dp-frame {
  --st: var(--on);
  position: relative; width: 52px; height: 52px; flex: none; padding: 3px; border-radius: 8px; border: 1px solid rgba(0,0,0,.25);
  background: linear-gradient(160deg, rgba(255,255,255,.75), transparent 45%), var(--st);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.dp-frame > .dp-in { width: 100%; height: 100%; border-radius: 5px; overflow: hidden; background: #fff; border: 1px solid rgba(0,0,0,.25); }
.dp-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp-frame.big { width: 104px; height: 104px; padding: 4px; border-radius: 10px; }
.dp-frame.sm { width: 34px; height: 34px; padding: 2px; border-radius: 6px; }
.st-busy, .st-phone { --st: var(--busy); }
.st-away, .st-brb, .st-lunch { --st: var(--away); }
.st-offline, .st-invisible, .st-blocked { --st: var(--off); }
button.dp-frame { cursor: pointer; }

/* ---------------------------------------------------------------- รายชื่อ */
.me-panel { display: flex; gap: 9px; padding: 9px 9px 8px; background: linear-gradient(180deg, var(--panel1), var(--panel2)); border-bottom: 1px solid var(--line); }
.me-txt { flex: 1; min-width: 0; display: grid; gap: 2px; align-content: start; }
.me-name { text-align: left; border: 1px solid transparent; background: none; padding: 1px 3px; font-weight: 700; font-size: 14px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 2px; }
.me-name:hover, .psm-input:hover { border-color: #8fb1dd; background: rgba(255,255,255,.55); }
.me-st { font-weight: 400; color: #33415a; font-size: 12px; }
.caret { font-size: 10px; color: #33415a; }
.psm-input { border: 1px solid transparent !important; background: transparent !important; padding: 1px 3px !important; font-size: 12px; color: #3b4a63; font-style: italic; box-shadow: none !important; width: 100%; }
.psm-input:focus { background: #fff !important; border-color: #2a7bff !important; font-style: normal; }
.me-np { font-size: 11px; color: #2c5aa8; padding: 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.toolbar { display: flex; gap: 2px; padding: 3px 4px; background: linear-gradient(180deg, #fbfdff, #e3eefb); border-bottom: 1px solid var(--line); }
.tool { display: inline-flex; align-items: center; gap: 4px; border: 1px solid transparent; background: none; padding: 3px 6px; border-radius: 3px; font-size: 12px; color: #1d3a66; }
.tool:hover { border-color: #9cbbe6; background: linear-gradient(180deg, #fff, #dbe9fb); }
.tool.sm { font-size: 11.5px; padding: 2px 6px; }
.ti { width: 18px; height: 18px; flex: none; background: center / contain no-repeat; }
.ti-add { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8' cy='6' r='4' fill='%2347b8ff' stroke='%230a4aa8'/%3E%3Cpath d='M1 18c0-5 3-7 7-7s7 2 7 7z' fill='%2347b8ff' stroke='%230a4aa8'/%3E%3Ccircle cx='15.5' cy='14.5' r='4' fill='%2333b533' stroke='%23206b1f'/%3E%3Cpath d='M15.5 12.3v4.4M13.3 14.5h4.4' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E"); }
.ti-group { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='13' cy='6' r='3.4' fill='%2385d36b' stroke='%23206b1f'/%3E%3Cpath d='M7 18c0-4 3-6 6-6s6 2 6 6z' fill='%2385d36b' stroke='%23206b1f'/%3E%3Ccircle cx='7' cy='7' r='3.6' fill='%2347b8ff' stroke='%230a4aa8'/%3E%3Cpath d='M1 19c0-4.5 3-6.5 6-6.5s6 2 6 6.5z' fill='%2347b8ff' stroke='%230a4aa8'/%3E%3C/svg%3E"); }
.ti-dp { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2' y='3' width='16' height='14' rx='2' fill='%23fff' stroke='%230a4aa8'/%3E%3Cpath d='M3 15l4-5 3 3 3-4 4 6z' fill='%2333b533'/%3E%3Ccircle cx='14' cy='7' r='1.8' fill='%23ffc21a'/%3E%3C/svg%3E"); }
.ti-gear { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8.5 1h3l.5 2.5 2 1 2.3-1.3 2 2-1.3 2.3 1 2 2.5.5v3l-2.5.5-1 2 1.3 2.3-2 2-2.3-1.3-2 1-.5 2.5h-3L8 16.5l-2-1-2.3 1.3-2-2L3 12.5l-1-2L-.5 10' fill='none'/%3E%3Ccircle cx='10' cy='10' r='7' fill='%23b9c4d3' stroke='%233a4a63' stroke-width='1.2' stroke-dasharray='3 1.4'/%3E%3Ccircle cx='10' cy='10' r='4.2' fill='%23e8eef6' stroke='%233a4a63'/%3E%3Ccircle cx='10' cy='10' r='1.8' fill='%233a4a63'/%3E%3C/svg%3E"); }
.ti-wink { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.5' fill='%23ffd43b' stroke='%23b07a00'/%3E%3Ccircle cx='7' cy='8' r='1.3' fill='%234a2c00'/%3E%3Cpath d='M11.5 8.3q1.5-1.6 3 0' stroke='%234a2c00' fill='none' stroke-width='1.2'/%3E%3Cpath d='M6 12q4 4 8 0' stroke='%234a2c00' fill='none' stroke-width='1.3'/%3E%3Cpath d='M16 1l1 2 2 .5-2 .7-1 2-.7-2-2-.7 2-.5z' fill='%23ff4fa0'/%3E%3C/svg%3E"); }
.ti-nudge { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='5' y='4' width='10' height='12' rx='1.5' fill='%23cfe3ff' stroke='%230a4aa8'/%3E%3Cpath d='M2 6l-1 4 1 4M18 6l1 4-1 4M4 8v4M16 8v4' stroke='%23e23c3c' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ti-more { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='4' cy='10' r='2' fill='%233a4a63'/%3E%3Ccircle cx='10' cy='10' r='2' fill='%233a4a63'/%3E%3Ccircle cx='16' cy='10' r='2' fill='%233a4a63'/%3E%3C/svg%3E"); }

.search-row { display: flex; gap: 6px; align-items: center; padding: 5px 6px; border-bottom: 1px solid #e1e9f4; }
.search-row input { flex: 1; min-width: 0; border-radius: 10px !important; padding: 3px 10px !important; font-size: 12px; background: #fbfdff; }
.seg { display: flex; border: 1px solid #9cbbe6; border-radius: 3px; overflow: hidden; flex: none; }
.seg-b { border: 0; background: #f4f8fe; padding: 2px 8px; font-size: 11.5px; position: relative; }
.seg-b.on { background: linear-gradient(180deg, #d4e6ff, #a9cbf6); font-weight: 700; }
.badge { display: inline-block; min-width: 16px; padding: 0 4px; margin-left: 4px; border-radius: 8px; background: #e8501f; color: #fff; font-size: 10px; line-height: 15px; text-align: center; font-weight: 700; }

.banner { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 8px; border: 0; border-bottom: 1px solid #e6cf7a; background: linear-gradient(180deg, #fffbe0, #fff1b3); text-align: left; font-size: 12px; }
.banner > span { flex: 1; }
.invite-banner { cursor: pointer; font-weight: 700; color: #7a4a00; }
.bx { border: 0; background: none; font-size: 16px; color: #7a4a00; padding: 0 4px; }

.clist { padding: 4px 0 8px; background: #fff; }
.grp-h { display: flex; align-items: center; gap: 4px; width: 100%; border: 0; background: none; padding: 5px 8px 3px; font-weight: 700; color: #234b8a; font-size: 12.5px; text-align: left; }
.grp-h:hover { color: #0b5ad9; }
.grp-h .tw { width: 10px; font-size: 9px; color: #567; }
.grp-h .cnt { font-weight: 400; color: var(--muted); }
.c-row { display: flex; align-items: center; gap: 6px; width: 100%; border: 1px solid transparent; background: none; padding: 2px 8px 2px 20px; text-align: left; min-height: 24px; font-size: 12.5px; }
.c-row:hover, .c-row:focus-visible { background: linear-gradient(180deg, #f1f7ff, #dcebff); border-color: #b4cff2; outline: none; }
.c-row .c-main { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-row .c-name { color: #111; }
.c-row .c-st { color: var(--muted); }
.c-row .c-psm { color: #6a7790; font-style: italic; }
.c-row .c-np { color: #2c5aa8; }
.c-row.offline .c-name { color: #8b95a3; }
.c-row .ub { margin-left: auto; }
.chat-row { padding-left: 8px; min-height: 42px; gap: 8px; }
.chat-row .c-main { display: grid; }
.chat-row .c-sub { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.chat-row .c-time { font-size: 10.5px; color: var(--muted); align-self: start; padding-top: 4px; }
.empty { padding: 18px 14px; color: var(--muted); text-align: center; font-size: 12px; }
.empty .btn { margin-top: 8px; }

/* ไอคอนสถานะ: ลูกแก้วกลม ๆ (ออกแบบเอง) */
.st-ico { width: 14px; height: 14px; flex: none; border-radius: 50%; position: relative;
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, transparent 40%), radial-gradient(circle at 50% 60%, var(--c1), var(--c2));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.28); --c1: #7be07b; --c2: #1f9b1f; }
.st-ico.st-busy, .st-ico.st-phone { --c1: #ff8a8a; --c2: #c21c1c; }
.st-ico.st-busy::after, .st-ico.st-phone::after { content: ""; position: absolute; left: 3px; right: 3px; top: 6px; height: 2px; background: #fff; border-radius: 1px; }
.st-ico.st-away, .st-ico.st-brb, .st-ico.st-lunch { --c1: #ffd27a; --c2: #d98100; }
.st-ico.st-away::after, .st-ico.st-brb::after, .st-ico.st-lunch::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 4px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; }
.st-ico.st-offline, .st-ico.st-invisible { --c1: #f2f4f7; --c2: #b8c0cb; }
.st-ico.st-blocked { --c1: #f2f4f7; --c2: #b8c0cb; }
.st-ico.st-blocked::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid #d52020; background: linear-gradient(135deg, transparent 44%, #d52020 44% 56%, transparent 56%); }

.ad-strip { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 8px; min-height: 40px; border-top: 1px solid var(--line); background: linear-gradient(90deg, #fff7d6, #ffe6f1 50%, #e3f2ff); text-decoration: none; color: #3a2a6b; font-size: 12px; cursor: pointer; overflow: hidden; }
.ad-strip:hover #ad-text { text-decoration: underline; }
.ad-tag { font-size: 9px; color: #fff; background: #8a8fa0; padding: 0 4px; border-radius: 2px; flex: none; }
#ad-text { animation: adin .5s ease; }
@keyframes adin { from { opacity: 0; transform: translateY(6px); } }

.emo { display: inline-block; width: 19px; height: 19px; vertical-align: -4px; margin: 0 1px; }
.emo-svg { width: 100%; height: 100%; display: block; }
.c-row .emo { width: 16px; height: 16px; vertical-align: -3px; }

/* ---------------------------------------------------------------- หน้าต่างแชท */
.chat-win { width: 540px; height: 480px; min-width: 360px; min-height: 340px; resize: both; z-index: 10; }
.cw-to { flex: none; padding: 5px 8px; background: linear-gradient(180deg, var(--panel1), #d3e5f9); border-bottom: 1px solid var(--line); margin: 0 -3px; }
.cw-to-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-to-mail { font-size: 11.5px; }
.cw-psm { font-size: 11.5px; color: #4b5a73; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1em; }
.cw-tools { flex: none; display: flex; gap: 2px; padding: 2px 4px; background: linear-gradient(180deg, #fbfdff, #e3eefb); border-bottom: 1px solid var(--line); margin: 0 -3px; }
.cw-main { flex: 1; min-height: 0; display: flex; gap: 8px; padding: 8px 6px 4px; background: #eef5fe; position: relative; }
.cw-log { flex: 1; min-width: 0; background: #fff; border: 1px solid #a8c2e4; padding: 6px 8px; font-size: 13px; word-wrap: break-word; overflow-wrap: anywhere; }
.cw-side { flex: none; width: 110px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.m-who { color: #5a6577; margin-top: 6px; font-size: 12px; }
.m-who:first-child { margin-top: 0; }
.m-txt { padding-left: 14px; white-space: pre-wrap; }
.m-txt.b { font-weight: 700; } .m-txt.i { font-style: italic; }
.m-txt.f1 { font-family: "Comic Sans MS", "Comic Neue", var(--font); }
.m-txt.f2 { font-family: Arial, var(--font); }
.m-txt.f3 { font-family: "Times New Roman", serif; }
.m-txt.f4 { font-family: "Courier New", monospace; }
.m-txt.f5 { font-family: Verdana, var(--font); }
.m-txt.f6 { font-family: "Trebuchet MS", var(--font); }
.m-txt.f7 { font-family: Georgia, serif; }
.m-sys { color: #6c7a8f; font-size: 12px; margin: 6px 0; }
.m-sys::before { content: ""; display: inline-block; width: 10px; margin-right: 6px; vertical-align: middle; border-top: 1px solid #c6d4e6; }
.m-sys.nudge { color: #b4321c; font-weight: 700; }
.m-sys.wink { color: #7a3fbf; }
.m-sys .replay { border: 0; background: none; color: var(--link); text-decoration: underline; font-size: 11.5px; padding: 0; }
.m-day { text-align: center; color: #8a96a8; font-size: 11px; margin: 8px 0 4px; }
.m-offline { color: #8a6a00; background: #fff8d6; border: 1px solid #f0dc8a; padding: 4px 6px; font-size: 11.5px; margin: 6px 0; }
.cw-fmtbar { flex: none; display: flex; align-items: center; gap: 2px; padding: 3px 6px 2px; background: #eef5fe; margin: 0 -3px; }
.fb { width: 28px; height: 24px; border: 1px solid transparent; background: none center / 18px no-repeat; border-radius: 3px; font-weight: 700; color: #1d3a66; font-size: 13px; padding: 0; }
.fb small { font-size: 9px; font-weight: 400; }
.fb:hover, .fb.on { border-color: #9cbbe6; background-color: #fff; }
.fb[data-act=emo] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.5' fill='%23ffd43b' stroke='%23b07a00'/%3E%3Ccircle cx='7' cy='8' r='1.3' fill='%234a2c00'/%3E%3Ccircle cx='13' cy='8' r='1.3' fill='%234a2c00'/%3E%3Cpath d='M6 12q4 4 8 0' stroke='%234a2c00' fill='none' stroke-width='1.3'/%3E%3C/svg%3E"); }
.fb[data-act=winks2] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.5' fill='%23ffd43b' stroke='%23b07a00'/%3E%3Ccircle cx='7' cy='8' r='1.3' fill='%234a2c00'/%3E%3Cpath d='M11.5 8.3q1.5-1.6 3 0' stroke='%234a2c00' fill='none' stroke-width='1.2'/%3E%3Cpath d='M6 12q4 4 8 0' stroke='%234a2c00' fill='none' stroke-width='1.3'/%3E%3Cpath d='M16 1l1 2 2 .5-2 .7-1 2-.7-2-2-.7 2-.5z' fill='%23ff4fa0'/%3E%3C/svg%3E"); }
.fb[data-act=nudge2] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='5' y='4' width='10' height='12' rx='1.5' fill='%23cfe3ff' stroke='%230a4aa8'/%3E%3Cpath d='M2 6l-1 4 1 4M18 6l1 4-1 4M4 8v4M16 8v4' stroke='%23e23c3c' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
.fb-hint { margin-left: auto; }
.cw-compose { flex: none; display: flex; gap: 6px; padding: 0 6px 4px; background: #eef5fe; margin: 0 -3px; }
.cw-compose textarea { flex: 1; min-width: 0; resize: none; height: 58px; font-size: 13px; }
.btn.send { width: 64px; align-self: stretch; font-weight: 700; }
.cw-status { flex: none; padding: 2px 8px; color: #4b5a73; background: linear-gradient(180deg, #e9f1fc, #d6e5f8); border-top: 1px solid var(--line); margin: 0 -3px -3px; min-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-status.typing { color: #0a3f9e; }
.cw-locked { padding: 8px; background: #fff3f3; color: #a01010; text-align: center; }
.picker { position: absolute; left: 8px; bottom: 120px; z-index: 30; background: #fff; border: 1px solid #7f9db9; box-shadow: 0 6px 18px rgba(0,30,90,.3); padding: 6px; }
.emo-pick { display: grid; grid-template-columns: repeat(8, 30px); gap: 2px; }
.emo-pick button { width: 30px; height: 30px; border: 1px solid transparent; background: none; padding: 4px; border-radius: 3px; }
.emo-pick button:hover { border-color: #9cbbe6; background: #eef5fe; }
.wink-pick { display: grid; grid-template-columns: repeat(4, 86px); gap: 4px; }
.wink-pick button { border: 1px solid #d5e2f3; background: linear-gradient(180deg, #fff, #eef5fe); border-radius: 4px; padding: 4px; font-size: 11px; display: grid; justify-items: center; gap: 2px; }
.wink-pick button:hover { border-color: #2a7bff; }
.wink-pick svg { width: 34px; height: 34px; }
.picker-h { grid-column: 1 / -1; font-size: 11px; color: var(--muted); padding: 0 2px 2px; }

/* สั่นจอ */
.shake { animation: shake .5s linear 2; }
@keyframes shake {
  0%, 100% { translate: 0 0; } 10% { translate: -9px 3px; } 20% { translate: 8px -4px; } 30% { translate: -10px -2px; }
  40% { translate: 9px 4px; } 50% { translate: -7px 2px; } 60% { translate: 8px -3px; } 70% { translate: -6px 3px; } 80% { translate: 5px -2px; } 90% { translate: -3px 1px; }
}

/* ---------------------------------------------------------------- Winks */
.wink-layer { position: absolute; inset: 8px 6px 4px; overflow: hidden; pointer-events: none; z-index: 20; transition: opacity .4s; }
.wink-layer.out { opacity: 0; }
.wink-layer.night { background: radial-gradient(circle at 50% 40%, rgba(40,50,120,.55), rgba(10,15,50,.82)); }
.wink-layer svg { width: 100%; height: 100%; display: block; }
.wk-pop { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; animation: wkpop 3s ease both; }
.wk-pop.wk-big { width: 160px; height: 160px; margin: -80px 0 0 -80px; }
.wk-pop.wk-late { animation-delay: .9s; }
@keyframes wkpop { 0% { transform: scale(0) rotate(-20deg); opacity: 0; } 15% { transform: scale(1.25) rotate(6deg); opacity: 1; } 25% { transform: scale(1) rotate(0); } 80% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
.wk-float { position: absolute; bottom: -50px; width: var(--sz); height: var(--sz); animation: wkfloat 2.6s ease-in both; }
@keyframes wkfloat { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-460px) scale(1.1) rotate(25deg); opacity: 0; } }
.wk-rose { position: absolute; left: 50%; bottom: 10%; width: 120px; height: 120px; margin-left: -60px; animation: wkrose 3s ease both; }
@keyframes wkrose { 0% { transform: translateY(120%) rotate(-30deg); } 30% { transform: translateY(0) rotate(5deg); } 40%, 85% { transform: rotate(0); } 100% { transform: scale(1.2); opacity: 0; } }
.wk-petal { position: absolute; top: -20px; width: 12px; height: 9px; border-radius: 60% 0; background: #e3123c; animation: wkfall 2.4s linear both; }
.wk-drop { position: absolute; top: -30px; width: 14px; height: 20px; animation: wkfall 1.2s linear 2 both; }
@keyframes wkfall { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(460px) rotate(200deg); opacity: .8; } }
.wk-cloud { position: absolute; top: 4%; left: 50%; width: 170px; height: 100px; margin-left: -85px; animation: wkpop 3s ease both; }
.wk-roll { position: absolute; top: 50%; left: -120px; width: 110px; height: 110px; margin-top: -55px; animation: wkroll 2.8s ease-in-out both; }
@keyframes wkroll { 0% { transform: translateX(0) rotate(0); } 50% { transform: translateX(calc(50vw)) rotate(540deg); } 100% { transform: translateX(calc(100vw)) rotate(1080deg); } }
.wk-text { position: absolute; left: 0; right: 0; top: 18%; text-align: center; font: 900 46px/1 "Comic Sans MS", var(--font); color: #ff6a00; text-shadow: 3px 3px 0 #fff, 5px 5px 0 rgba(0,0,0,.2); animation: wkpop 3s ease both; }
.wk-confetti { position: absolute; top: -12px; width: 8px; height: 13px; animation: wkconf 2.4s ease-in both; }
@keyframes wkconf { 0% { transform: translateY(0) rotate(0); } 100% { transform: translateY(470px) rotate(var(--r)); } }
.wk-hammer { position: absolute; left: 50%; top: 4%; width: 90px; height: 126px; transform-origin: 50% 90%; animation: wkhammer 1.3s ease-in both; }
@keyframes wkhammer { 0% { transform: translate(60px, -40px) rotate(70deg); } 60% { transform: translate(-10px, 30px) rotate(-30deg); } 70% { transform: translate(-10px, 38px) rotate(-38deg); } 100% { transform: translate(-10px, 34px) rotate(-34deg); opacity: 0; } }
.wk-burst { position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; margin: -85px 0 0 -85px; animation: wkpop 2s ease .75s both; }
.wk-z { position: absolute; top: 30%; font: 900 40px/1 "Comic Sans MS", var(--font); color: #cfe0ff; text-shadow: 0 0 8px #6f8dff; animation: wkz 2.4s ease-out both; }
@keyframes wkz { 0% { transform: translate(0, 30px) scale(.4); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(40px, -90px) scale(1.3); opacity: 0; } }

/* ---------------------------------------------------------------- ป๊อปอัปมุมขวาล่าง */
.pops { position: fixed; right: 10px; bottom: calc(var(--taskbar-h) + 8px); z-index: 900; display: flex; flex-direction: column-reverse; gap: 6px; pointer-events: none; }
.pop {
  pointer-events: auto; width: 230px; display: grid; grid-template-columns: 48px 1fr; gap: 8px; align-items: center; padding: 22px 10px 10px; position: relative;
  background: linear-gradient(180deg, #fff, #e3efff); border: 1px solid #5f8fd6; border-radius: 6px 6px 3px 3px; box-shadow: 0 6px 16px rgba(0,30,90,.35);
  cursor: pointer; animation: popin .45s cubic-bezier(.2,.9,.3,1.2) both; text-align: left; font-size: 12px;
}
.pop::before { content: "msn26"; position: absolute; left: 0; right: 0; top: 0; height: 17px; padding-left: 8px; font-size: 10.5px; font-weight: 700; color: #fff; line-height: 17px; border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, #5aa2ff, var(--tb1)); }
.pop .dp-frame { width: 48px; height: 48px; }
.pop b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pop .pop-t { overflow: hidden; }
.pop .pop-s { color: #44536b; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pop.out { animation: popout .35s ease both; }
@keyframes popin { from { transform: translateY(120%); opacity: 0; } }
@keyframes popout { to { transform: translateY(40%); opacity: 0; } }

/* ---------------------------------------------------------------- แถบงาน */
.taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--taskbar-h); z-index: 800; display: flex; align-items: center; gap: 4px; padding: 0 4px 0 0;
  background: linear-gradient(180deg, #3f8cf3 0%, #245edb 9%, #2a64e0 50%, #1f53c7 90%, #1a45a8 100%); border-top: 1px solid #0c3aa0;
}
.tk-start { height: 100%; display: flex; align-items: center; gap: 6px; padding: 0 16px 0 10px; color: #fff; font: italic 700 15px var(--font); text-decoration: none; text-shadow: 1px 1px 1px rgba(0,0,0,.5);
  background: linear-gradient(180deg, #5fc35f, #2f9a2f 50%, #2a8a2a); border-radius: 0 12px 12px 0; box-shadow: inset 0 0 3px rgba(0,0,0,.35); cursor: pointer; }
.tk-start-ic { width: 18px; height: 18px; border-radius: 3px; background: linear-gradient(135deg, #ffd34d 0 50%, #ff5aa0 50%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); }
.tk-wins { display: flex; gap: 3px; flex: 1; min-width: 0; overflow: hidden; }
.tk-btn { flex: 0 1 170px; min-width: 60px; height: 26px; display: flex; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid #1a3f9a; border-radius: 3px; color: #fff; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(180deg, #5b9cf5, #3a7ae8); text-align: left; }
.tk-btn.on { background: linear-gradient(180deg, #1e4fb8, #2a5fd0); box-shadow: inset 1px 1px 2px rgba(0,0,0,.4); }
.tk-btn.flash { animation: tkflash 1s steps(1) infinite; }
@keyframes tkflash { 50% { background: linear-gradient(180deg, #ffb24d, #f08a00); } }
.tk-ic { width: 16px; height: 16px; flex: none; }
.tk-btn span:last-child { overflow: hidden; text-overflow: ellipsis; }
.tk-tray { display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 12px; color: #fff; font-size: 12px; background: linear-gradient(180deg, #1aa0f0, #0f84d8); border-left: 1px solid #0a5ab0; }
.tray-st { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 12%, transparent 40%), var(--st, var(--on)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); }

/* ---------------------------------------------------------------- เมนู / modal / toast */
.menu-pop { position: fixed; z-index: 1000; min-width: 190px; background: #fff; border: 1px solid #8a9bb3; box-shadow: 2px 3px 8px rgba(0,0,0,.3); padding: 2px; }
.menu-pop button { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 5px 18px 5px 8px; text-align: left; font-size: 12.5px; }
.menu-pop button:hover, .menu-pop button:focus-visible { background: #316ac5; color: #fff; outline: none; }
.menu-pop button:hover .st-ico { box-shadow: inset 0 0 0 1px #fff; }
.menu-pop button.chk::before { content: "✓"; width: 10px; }
.menu-pop button:not(.chk) .mi-sp { width: 10px; }
.menu-pop hr { border: 0; border-top: 1px solid #d2d9e3; margin: 2px 4px; }
.menu-pop .danger { color: #b00000; }
.modal-wrap { position: fixed; inset: 0; z-index: 950; background: rgba(10,25,60,.25); display: grid; place-items: center; padding: 12px; }
.modal { position: relative; width: min(420px, 100%); max-height: calc(100dvh - 24px); }
.modal .m-body { padding: 12px 14px 14px; overflow-y: auto; background: #f5f8fc; }
.modal h3 { margin: 0 0 8px; font-size: 14px; color: #0a3f9e; }
.modal p { margin: 6px 0; }
.modal .acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.modal .sect { border: 1px solid #c9d6e8; background: #fff; padding: 8px 10px; margin: 10px 0 0; }
.modal .sect > legend { padding: 0 4px; color: #0a3f9e; font-weight: 700; font-size: 12px; }
.modal .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.modal .radio { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.check-list { max-height: 240px; overflow-y: auto; border: 1px solid #c9d6e8; background: #fff; }
.check-list label { display: flex; align-items: center; gap: 8px; padding: 4px 8px; font-size: 12.5px; }
.check-list label:hover { background: #eef5fe; }
.prof-head { display: flex; gap: 12px; align-items: center; }
.prof-head .who { min-width: 0; display: grid; gap: 2px; }
.prof-head .who b { font-size: 14px; word-break: break-word; }
.fmt-preview { border: 1px solid #c9d6e8; background: #fff; padding: 8px; margin-top: 8px; min-height: 36px; }
.swatches { display: flex; flex-wrap: wrap; gap: 4px; }
.swatches button { width: 20px; height: 20px; border: 1px solid #555; padding: 0; }
.swatches button.on { outline: 2px solid #2a7bff; outline-offset: 1px; }
.toast { position: fixed; left: 50%; bottom: calc(var(--taskbar-h) + 18px); transform: translateX(-50%); z-index: 1100; max-width: min(92vw, 420px);
  background: #ffffe1; border: 1px solid #000; padding: 6px 10px; font-size: 12px; box-shadow: 2px 2px 6px rgba(0,0,0,.3); }
.xp-box { border: 1px solid #c9d6e8; background: #fff; padding: 8px 10px; }
.help li { margin: 4px 0; }

/* ---------------------------------------------------------------- จอเล็ก: เต็มจอ ไม่มีแถบงาน */
@media (max-width: 759px), (max-height: 520px) {
  :root { --taskbar-h: 0px; }
  .win { border-radius: 0; border: 0; box-shadow: none; padding: 0; }
  .titlebar { margin: 0; height: calc(34px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
  .main-win { inset: 0; width: auto; height: auto; }
  .taskbar { display: none !important; }
  .main-win .tb-btns { display: none; }
  .chat-win { position: fixed; inset: 0 !important; width: auto !important; height: auto !important; resize: none; min-width: 0; min-height: 0; padding-bottom: env(safe-area-inset-bottom); }
  .chat-win .tb-btns { display: none; }
  .chat-win .tb-back { display: block; }
  .cw-to, .cw-tools, .cw-fmtbar, .cw-compose { margin: 0; }
  .cw-status { margin: 0; }
  .cw-side { display: none; }
  .cw-tools .tool span:last-child { font-size: 11px; }
  .pops { right: 8px; left: 8px; align-items: flex-end; top: calc(8px + env(safe-area-inset-top)); bottom: auto; flex-direction: column; }
  .pop { width: min(300px, 100%); }
  .picker { bottom: 112px; left: 6px; right: 6px; }
  .emo-pick { grid-template-columns: repeat(auto-fill, 34px); justify-content: center; }
  .emo-pick button { width: 34px; height: 34px; }
  .wink-pick { grid-template-columns: repeat(4, 1fr); }
  .ad-strip { padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .modal-wrap { place-items: end center; padding: 0; }
  .modal { width: 100%; border-radius: 10px 10px 0 0; max-height: 92dvh; }
  .modal .m-body { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
}
@media (min-width: 760px) and (min-height: 521px) {
  .cw-tools .tool.sm span:last-child { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .shake { animation-duration: .2s; }
  .pop, #ad-text { animation: none; }
}