/* ==========================================================================
   Giao diện xã hội của thế giới chung (social-ui.mjs): menu lại gần người chơi, khung chat, bảng nhóm, thẻ lời mời.
   Cùng phong cách kính tối với bảng lớp học ngoại ngữ (class.css).
   ========================================================================== */

.sws-glass { background: rgba(13, 20, 33, .92); color: #e8eef7; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .65); backdrop-filter: blur(10px); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
.sws-glass * { box-sizing: border-box; }
.sws-in { animation: sws-in .2s ease-out; }
@keyframes sws-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Ảnh đại diện chữ cái: màu theo tên (biến --h) */
.sws-ava { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; font-weight: 800; color: #fff; text-transform: uppercase;
  background: linear-gradient(135deg, hsl(var(--h, 160) 65% 50%), hsl(calc(var(--h, 160) + 35) 65% 36%)); }
.sws-x { border: 0; background: none; color: #93a4bd; font-size: 15px; cursor: pointer; width: 30px; height: 30px; border-radius: 8px; flex: none; }
.sws-x:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sws-x:disabled { opacity: .3; cursor: default; background: none; }

/* --- Menu lại gần --- */
#sw-social-menu { width: 300px; overflow: hidden; }
.sws-menu-hd { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px; border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent); }
.sws-menu-hd .sws-ava { width: 42px; height: 42px; font-size: 17px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .08); }
.sws-name { font-size: 15px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sws-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.sws-chip { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 8px; }
.sws-chip.is-friend { background: rgba(16, 185, 129, .16); color: #6ee7b7; }
.sws-chip.is-in { background: rgba(245, 158, 11, .16); color: #fcd34d; }
.sws-chip.is-out { background: rgba(148, 163, 184, .16); color: #cbd5e1; }
.sws-chip.is-group { background: rgba(139, 92, 246, .18); color: #c4b5fd; }
.sws-chip.is-other { background: rgba(56, 189, 248, .16); color: #7dd3fc; }
.sws-actions { display: flex; flex-direction: column; padding: 6px; gap: 2px; }
.sws-act { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 12px; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; transition: background .12s; }
.sws-act:hover, .sws-act:focus-visible { background: rgba(255, 255, 255, .07); outline: none; }
.sws-act:disabled { cursor: default; opacity: .55; background: none; }
.sws-tile { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; flex: none; }
.sws-tile.t-emerald { background: rgba(16, 185, 129, .16); color: #34d399; }
.sws-tile.t-sky { background: rgba(56, 189, 248, .16); color: #38bdf8; }
.sws-tile.t-violet { background: rgba(139, 92, 246, .18); color: #a78bfa; }
.sws-tile.t-pink { background: rgba(236, 72, 153, .18); color: #f472b6; }
.sws-tile.t-amber { background: rgba(245, 158, 11, .16); color: #fbbf24; }
.sws-tile.t-gray { background: rgba(148, 163, 184, .12); color: #94a3b8; }
.sws-act-text { flex: 1; min-width: 0; }
.sws-act-label { display: block; font-size: 14px; font-weight: 600; color: #f1f5f9; }
.sws-act-hint { display: block; font-size: 12px; color: #93a4bd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sws-kbd { flex: none; min-width: 22px; text-align: center; border-radius: 6px; padding: 1px 6px; font-size: 11px; font-weight: 700; color: #cbd5e1;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.sws-foot { padding: 7px 14px; font-size: 11.5px; color: #64748b; border-top: 1px solid rgba(255, 255, 255, .06); }
.sws-foot b { color: #94a3b8; }

/* --- Khung chat --- */
#sw-chat { width: min(360px, calc(100vw - 32px)); height: min(440px, calc(100vh - 140px)); display: flex; flex-direction: column; overflow: hidden; }
.sws-chat-hd { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent); }
.sws-chat-title { font-size: 14px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 8px; }
.sws-chat-title small { font-size: 11.5px; font-weight: 500; color: #93a4bd; }
/* Đầu khung chat khi đang nói chuyện với một người: ảnh + tên + trạng thái, nút Gọi / Kết bạn */
.sws-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sws-who .sws-ava { width: 34px; height: 34px; font-size: 14px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .08); }
.sws-who-text { min-width: 0; display: flex; flex-direction: column; }
.sws-who-name { font-size: 14px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sws-who .sws-chips { margin-top: 2px; }
.sws-who .sws-chip { font-size: 10.5px; padding: 1px 7px; }
.sws-who-sub { font-size: 11px; font-weight: 500; color: #93a4bd; }
.sws-peer { display: flex; gap: 6px; flex: none; }
.sws-peer:empty { display: none; }
.sws-pbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  transition: transform .08s, background .12s; }
.sws-pbtn:hover:not(:disabled) { transform: translateY(-1px); }
.sws-pbtn:active:not(:disabled) { transform: scale(.94); }
.sws-pbtn:disabled { cursor: default; }
.sws-pbtn.t-emerald { background: rgba(16, 185, 129, .18); color: #34d399; }
.sws-pbtn.t-violet { background: rgba(139, 92, 246, .2); color: #a78bfa; }
.sws-pbtn.t-pink { background: rgba(236, 72, 153, .2); color: #f472b6; }
.sws-pbtn.t-amber { background: rgba(245, 158, 11, .2); color: #fbbf24; animation: sws-pulse 1.6s ease-in-out infinite; }
.sws-pbtn.t-gray { background: rgba(148, 163, 184, .12); color: #94a3b8; }
.sws-pbtn.t-sky { background: rgba(56, 189, 248, .16); color: #38bdf8; }
.sws-pbtn:hover:not(:disabled).t-emerald { background: rgba(16, 185, 129, .3); }
.sws-pbtn:hover:not(:disabled).t-violet { background: rgba(139, 92, 246, .32); }
@keyframes sws-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .45); } 50% { box-shadow: 0 0 0 5px rgba(245, 158, 11, 0); } }
/* Thanh đang gọi */
.sws-call { top: calc(70px + env(safe-area-inset-top, 0px)); display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 999px; max-width: calc(100vw - 24px); z-index: 5; }
.sws-call.hidden { display: none; }
.sws-call-ic { display: inline-flex; color: #34d399; flex: none; }
.sws-call.is-ringing .sws-call-ic { color: #fbbf24; animation: sws-ring 1s ease-in-out infinite; }
@keyframes sws-ring { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
.sws-call-who { font-size: 13px; font-weight: 600; color: #f1f5f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sws-call-who em { font-style: normal; font-weight: 500; color: #93a4bd; }
.sws-call-m { display: inline-flex; align-items: center; gap: 5px; margin-right: 8px; }
.sws-call-m::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #475569; transition: background .15s, box-shadow .15s; }
.sws-call-m.is-speaking::before { background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .3); }
.sws-call-time { font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #cbd5e1; background: rgba(255, 255, 255, .07); border-radius: 999px; padding: 5px 8px; flex: none; }
.sws-call-time:empty { display: none; }
.sws-call-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer; flex: none;
  background: rgba(255, 255, 255, .1); color: #e2e8f0; transition: background .12s, transform .08s; }
.sws-call-btn:hover { background: rgba(255, 255, 255, .18); }
.sws-call-btn:active { transform: scale(.92); }
.sws-call-btn[hidden] { display: none; }
.sws-call-btn .sws-call-slash { display: none; }
.sws-call-btn.is-off { background: rgba(239, 68, 68, .2); color: #fca5a5; }
.sws-call-btn.is-off .sws-call-slash { display: inline; }
.sws-call-btn.is-speaking { box-shadow: 0 0 0 3px rgba(52, 211, 153, .45); }
.sws-call-btn.is-hang { background: #ef4444; color: #fff; }
.sws-call-btn.is-hang:hover { background: #dc2626; }
.sws-tabs { display: flex; gap: 6px; padding: 8px 10px; overflow-x: auto; border-bottom: 1px solid rgba(255, 255, 255, .06); scrollbar-width: none; }
.sws-tabs::-webkit-scrollbar { display: none; }
.sws-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 4px 10px 4px 4px; background: rgba(255, 255, 255, .06);
  color: #cbd5e1; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.sws-tab .sws-ava { width: 22px; height: 22px; font-size: 11px; }
.sws-tab:hover { background: rgba(255, 255, 255, .1); }
.sws-tab.is-on { background: rgba(37, 99, 235, .9); color: #fff; }
.sws-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.sws-log { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; user-select: text; }
.sws-empty { margin: auto; text-align: center; color: #64748b; font-size: 13px; line-height: 1.5; }
.sws-row { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
.sws-row .sws-ava { width: 26px; height: 26px; font-size: 12px; }
.sws-row.is-me { flex-direction: row-reverse; }
.sws-msg { max-width: 78%; display: flex; flex-direction: column; }
.sws-row.is-me .sws-msg { align-items: flex-end; }
.sws-from { font-size: 11px; color: #93a4bd; margin: 0 4px 2px; }
.sws-bubble { padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; word-wrap: break-word; overflow-wrap: anywhere; background: rgba(255, 255, 255, .08); color: #e8eef7; border-bottom-left-radius: 4px; }
.sws-row.is-me .sws-bubble { background: #2563eb; color: #fff; border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; }
.sws-row.is-cont .sws-ava { visibility: hidden; }
.sws-time { font-size: 10.5px; color: #64748b; margin: 2px 4px 0; }
.sws-ft { padding: 10px; border-top: 1px solid rgba(255, 255, 255, .08); }
.sws-form { display: flex; gap: 8px; }
.sws-form input { flex: 1; min-width: 0; height: 40px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: #fff;
  padding: 0 12px; font: inherit; font-size: 14px; outline: none; }
.sws-form input::placeholder { color: #7c8aa0; }
.sws-form input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, .25); }
.sws-send { width: 40px; height: 40px; border-radius: 12px; border: 0; background: #2563eb; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; }
.sws-send:hover { background: #1d4ed8; }
.sws-hint { margin-top: 6px; font-size: 11px; color: #64748b; text-align: center; }

/* --- Bảng nhóm --- */
#sw-group { width: 240px; padding: 12px; }
.sws-group-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sws-group-hd b { font-size: 13.5px; color: #fff; }
.sws-group-hd small { font-size: 11.5px; color: #93a4bd; font-weight: 500; margin-left: 4px; }
.sws-leave { border: 0; background: rgba(239, 68, 68, .14); color: #fca5a5; font: inherit; font-size: 11.5px; font-weight: 600; border-radius: 8px; padding: 3px 8px; cursor: pointer; }
.sws-leave:hover { background: rgba(239, 68, 68, .25); }
.sws-member { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-radius: 10px; font-size: 13px; color: #e2e8f0; }
.sws-member .sws-ava { width: 26px; height: 26px; font-size: 12px; }
.sws-member span.n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sws-member em { font-style: normal; font-size: 11px; color: #93a4bd; }
.sws-kick { border: 0; background: none; color: #fca5a5; font: inherit; font-size: 11.5px; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.sws-kick:hover { background: rgba(239, 68, 68, .15); }

/* --- Thẻ lời mời / xin vào nhóm --- */
.sws-invite { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; font-size: 13.5px; max-width: min(460px, calc(100vw - 32px)); }
.sws-invite .t { flex: 1; color: #e2e8f0; }
.sws-yes, .sws-no { border: 0; border-radius: 9px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; flex: none; }
.sws-yes { background: #10b981; color: #fff; }
.sws-yes:hover { background: #059669; }
.sws-no { background: rgba(255, 255, 255, .1); color: #cbd5e1; }
.sws-no:hover { background: rgba(255, 255, 255, .16); }

/* Ẩn bằng class "hidden" của Tailwind: selector #id ở trên (display: flex) mạnh hơn nên phải ghi rõ */
#sw-chat.hidden, #sw-social-menu.hidden, #sw-group.hidden { display: none; }

/* Thả hoa đăng (Đỉnh Thác Tình Yêu): hộp nhập điều ước + nhãn điều ước trên đèn của mình */
.sw-lantern-box { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5, 10, 20, .35); }
.sw-lantern-card { width: min(380px, 100%); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.sw-lantern-hd { display: flex; align-items: center; justify-content: space-between; font-size: 16px; }
.sw-lantern-card label { font-size: 13px; color: rgba(232, 238, 247, .8); }
.sw-lantern-card label small { color: rgba(232, 238, 247, .5); }
.sw-lantern-card input { height: 42px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: #fff; padding: 0 12px; font: inherit; font-size: 14px; outline: none; }
.sw-lantern-card input:focus { border-color: #ffb15c; box-shadow: 0 0 0 3px rgba(255, 177, 92, .2); }
.sw-lantern-ft { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: rgba(232, 238, 247, .65); }
.sw-lantern-go { flex: none; border: 0; border-radius: 12px; padding: 9px 18px; font: inherit; font-weight: 700; color: #3a1d06; background: linear-gradient(135deg, #ffd38a, #ff9a5c); cursor: pointer; }
.sw-lantern-go:disabled { opacity: .5; cursor: default; }
.sw-wish { position: absolute; left: 0; top: 0; max-width: 220px; padding: 5px 11px; border-radius: 12px; background: rgba(40, 18, 8, .72); color: #ffe7c2;
  font-size: 13px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; opacity: 0; transition: opacity .3s; }


/* Bản đồ nhỏ + bạn bè đang online (minimap.mjs): góc trên trái, dưới thanh tiêu đề */
.swm { position: absolute; top: 64px; left: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; pointer-events: none; z-index: 5; }
.swm > * { pointer-events: auto; }
.swm [hidden] { display: none !important; }
.swm-card { padding: 6px 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; border-radius: 18px; }
.swm-hd { width: 100%; display: flex; align-items: center; gap: 5px; padding: 0 2px; }
.swm-title { width: 100%; text-align: center; font-size: 12px; font-weight: 700; color: rgba(232, 238, 247, .85); letter-spacing: .02em; }
.swm-canvas { display: block; border-radius: 50%; }
.swm-friends-btn, .swm-hide, .swm-show, .swm-big-btn { height: 26px; min-width: 26px; padding: 0 7px; border-radius: 999px; border: 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  background: rgba(255, 255, 255, .08); color: #e8eef7; font: 600 12px/1 system-ui, sans-serif; cursor: pointer; transition: background .15s; }
.swm-friends-btn:hover, .swm-hide:hover, .swm-show:hover, .swm-big-btn:hover { background: rgba(255, 255, 255, .16); }
.swm-friends-btn.has { background: rgba(74, 222, 128, .18); color: #bbf7d0; }
.swm-people-btn.has { background: rgba(96, 165, 250, .18); color: #bfdbfe; }
.swm-dev { font-size: 12px; }
.swm-tally { margin: 2px 0 6px; font-size: 12px; color: #cbd5e1; }
.swm-hide, .swm-big-btn { font-size: 16px; padding: 0; }
.swm-pill { display: flex; gap: 6px; padding: 5px; border-radius: 999px; }
.swm-show { padding: 0 8px; }
.swm-panel { width: min(290px, calc(100vw - 32px)); max-height: min(340px, calc(100vh - 260px)); overflow-y: auto; padding: 10px; border-radius: 16px; display: flex; flex-direction: column; gap: 6px; }
.swm-panel-hd { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: #fff; padding: 0 2px 4px; }
.swm-empty { margin: 4px 2px; font-size: 12.5px; color: rgba(232, 238, 247, .6); }
.swm-row { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.swm-ava { width: 30px; height: 30px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
  color: #052e16; background: linear-gradient(135deg, #86efac, #4ade80); }
.swm-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.swm-name { font-size: 13px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swm-row-text small { font-size: 11px; color: rgba(232, 238, 247, .6); }
.swm-chat, .swm-go { flex: none; height: 28px; padding: 0 10px; border-radius: 999px; border: 0; font: 600 12px/1 system-ui, sans-serif; cursor: pointer; }
.swm-chat { background: #38bdf8; color: #082f49; }
.swm-chat:hover { background: #7dd3fc; }
.swm-go { background: rgba(255, 255, 255, .1); color: #e8eef7; }
.swm-go:hover { background: rgba(255, 255, 255, .18); }
.swm.is-compact { top: 58px; left: 10px; }
.swm.is-compact .swm-card { padding: 4px 4px 6px; border-radius: 14px; }
.swm-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
.swm-sp { flex: 1; }
.swm-canvas { cursor: zoom-in; }
/* Bản đồ lớn (phím B / bấm bản đồ nhỏ) */
.swm-big { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5, 10, 20, .45); }
.swm-big-card { padding: 12px; border-radius: 20px; display: flex; flex-direction: column; gap: 10px; max-width: 100%; }
.swm-big-hd { display: flex; align-items: center; gap: 12px; color: #fff; font-size: 15px; padding: 0 2px; }
.swm-big-hd b { white-space: nowrap; }
.swm-legend { flex: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 12px; font-size: 12px; color: rgba(232, 238, 247, .75); }
.swm-legend span { display: inline-flex; align-items: center; gap: 5px; }
.swm-legend span::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); }
.swm-big-canvas { display: block; border-radius: 12px; }
@media (max-width: 640px) { .swm-big-hd b { display: none; } .swm-legend { justify-content: flex-start; } }

/* Khung chat thu nhỏ: nút tròn góc dưới phải, chấm số tin chưa đọc (social-ui minimize) */
.sws-mini { position: absolute; right: 16px; bottom: 24px; width: 52px; height: 52px; border-radius: 50%; border: 0; display: flex; align-items: center; justify-content: center;
  color: #e8eef7; cursor: pointer; pointer-events: auto; box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .6); }
.sws-mini[hidden] { display: none; }
.sws-mini svg { width: 24px; height: 24px; }
.sws-mini:hover { color: #fff; filter: brightness(1.15); }
.sws-mini .sws-badge { position: absolute; top: -2px; right: -2px; }
.sws-mini .sws-badge:empty { display: none; }
.sws-mini.has-new { animation: sws-mini-pulse 1.6s ease-in-out infinite; }
@keyframes sws-mini-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, .55); } 50% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0); } }
.sw-touch .sws-mini { bottom: auto; top: calc(116px + env(safe-area-inset-top, 0px)); right: calc(10px + env(safe-area-inset-right, 0px)); width: 44px; height: 44px; }

/* Nút emoji + bảng chọn Emoji / Sticker / GIF (chat-picker.mjs) */
.sws-emo { width: 40px; height: 40px; flex: none; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); font-size: 19px; cursor: pointer; }
.sws-emo:hover, .sws-emo.is-on { background: rgba(255, 255, 255, .14); }
.swp { margin: 0 10px 8px; border-radius: 14px; background: rgba(8, 13, 24, .92); border: 1px solid rgba(255, 255, 255, .1); overflow: hidden; }
.swp[hidden] { display: none; }
.swp-tabs { display: flex; gap: 4px; padding: 6px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.swp-tab { flex: 1; height: 30px; border-radius: 9px; border: 0; background: transparent; color: #a9b6c9; font: 600 12.5px system-ui, sans-serif; cursor: pointer; }
.swp-tab.is-on { background: rgba(59, 130, 246, .22); color: #fff; }
.swp-body { height: 196px; overflow-y: auto; padding: 6px; }
.swp-load { padding: 20px 8px; text-align: center; color: #8c9ab0; font-size: 12.5px; }
.swp-emoji { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 2px; }
.swp-emoji button { height: 34px; border: 0; border-radius: 8px; background: transparent; font-size: 21px; cursor: pointer; }
.swp-emoji button:hover { background: rgba(255, 255, 255, .1); }
.swp-packs { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.swp-pack { flex: none; width: 38px; height: 38px; padding: 3px; border-radius: 9px; border: 1px solid transparent; background: rgba(255, 255, 255, .05); cursor: pointer; }
.swp-pack.is-on { border-color: #3b82f6; background: rgba(59, 130, 246, .18); }
.swp-pack img { width: 100%; height: 100%; object-fit: contain; }
.swp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 4px; }
.swp-grid.is-gif { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.swp-item { aspect-ratio: 1; padding: 4px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .04); cursor: pointer; }
.swp-item:hover { background: rgba(255, 255, 255, .12); }
.swp-item img { width: 100%; height: 100%; object-fit: contain; }
.swp-sec { margin: 4px 2px 6px; font-size: 11.5px; font-weight: 700; color: #a9b6c9; }
/* Sticker / GIF trong tin nhắn: không nền bong bóng */
.sws-bubble.is-media { padding: 0; background: transparent !important; box-shadow: none; }
.sws-bubble.is-media img { display: block; max-width: 132px; max-height: 132px; border-radius: 10px; }
.sws-bubble.is-gif img { max-width: 180px; max-height: 160px; }