:root {
  --lm-dark: #0b3d2e;
  --lm-green: #1b7a4b;
  --lm-light: #f2f5f3;
  --lm-gold: #c9a227;
}
body { font-family: 'Noto Sans', 'Noto Sans Lao', 'Phetsarath OT', 'Saysettha OT', system-ui, sans-serif; background: var(--lm-light); }
.lm-nav { background: var(--lm-dark); border-bottom: 3px solid var(--lm-gold); }

/* ===== ເມນູທາງຊ້າຍ (sidebar) ===== */
.lm-shell { display: flex; min-height: 100vh; }
.lm-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lm-content > main { flex: 1; }
/* ຕ້ອງ override ຄ່າ background ຂອງ Bootstrap offcanvas-md (ໃຊ້ !important) ບໍ່ດັ່ງນັ້ນພື້ນຈະເປັນສີຂາວ */
.lm-side { --bs-offcanvas-bg: var(--lm-dark); --bs-offcanvas-color: #fff;
           background-color: var(--lm-dark) !important; color: #fff !important;
           width: 250px; flex: 0 0 250px; display: flex; flex-direction: column; border-right: 3px solid var(--lm-gold); }
.lm-side-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.1rem; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.lm-brand { color: #fff; font-weight: 700; font-size: 1.25rem; text-decoration: none; }
.lm-side-nav { flex: 1; padding: .9rem .7rem; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.lm-link { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; border-radius: .6rem;
           color: #fff; font-size: 1rem; font-weight: 500; text-decoration: none; border: 1px solid transparent; }
.lm-link .bi { font-size: 1.2rem; width: 1.5rem; text-align: center; color: #bfe3cf; }
.lm-link:hover, .lm-link:focus-visible { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .25); }
.lm-link.active { background: var(--lm-green); color: #fff; font-weight: 700; border-color: rgba(255, 255, 255, .2); box-shadow: inset 4px 0 0 var(--lm-gold); }
.lm-link.active .bi { color: #fff; }

/* ກຸ່ມເມນູ (collapsible) */
.lm-group + .lm-group { margin-top: .5rem; }
.lm-group-head { display: flex; align-items: center; gap: .7rem; width: 100%; background: transparent; border: 0; color: rgba(255, 255, 255, .72);
                 padding: .5rem .9rem; font-size: .85rem; font-weight: 700; letter-spacing: .02em; text-align: left; border-radius: .5rem; }
.lm-group-head:hover, .lm-group-head:focus-visible { color: #fff; background: rgba(255, 255, 255, .08); }
.lm-group-head > .bi:first-child { width: 1.5rem; text-align: center; font-size: 1.05rem; color: var(--lm-gold); }
.lm-group-head > span { flex: 1; }
.lm-chev { font-size: .75rem; transition: transform .2s; }
.lm-group-head.collapsed .lm-chev { transform: rotate(-90deg); }
.lm-group-items { display: flex; flex-direction: column; gap: 3px; margin: .15rem 0 .1rem 1.35rem; padding-left: .45rem; border-left: 1px solid rgba(255, 255, 255, .16); }
.lm-group-items .lm-link { padding: .55rem .8rem; font-size: .95rem; }

/* ພິມລາຍງານ */
.print-only { display: none; }
@media print {
  .lm-side, .lm-topbar, .no-print, footer { display: none !important; }
  .print-only { display: block !important; }
  .lm-shell, .lm-content { display: block !important; }
  body { background: #fff !important; }
  .lm-card { box-shadow: none !important; border: 1px solid #ddd !important; }
}

/* ແຖບເທິງ (ຢູ່ບ່ອນເກົ່າ): ພາສາ / ຜູ້ໃຊ້ / ອອກລະບົບ */
.lm-topbar { background: var(--lm-dark); border-bottom: 3px solid var(--lm-gold); padding: .55rem 1rem; min-height: 52px;
             display: flex; align-items: center; justify-content: space-between; gap: .75rem; position: sticky; top: 0; z-index: 1020; }
.lm-top-brand { color: #fff; font-weight: 700; text-decoration: none; }
@media (min-width: 768px) {
  .lm-side { position: sticky; top: 0; height: 100vh; }
}
@media (max-width: 767.98px) {
  .lm-side { width: 270px; flex-basis: auto; }
  .lm-shell { display: block; min-height: 0; }
}

.lm-green { color: var(--lm-green); }
.lm-card { border: 0; border-radius: .75rem; }
.btn-lm { background: var(--lm-green); color: #fff; border: 0; }
.btn-lm:hover, .btn-lm:focus { background: var(--lm-dark); color: #fff; }
.stat .bi { opacity: .85; }
code { color: var(--lm-dark); }

/* ===== Meeting room ===== */
.room-body { background: #0a1a13; color: #fff; overflow: hidden; }
.room { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.room-top { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 1rem; background: var(--lm-dark); border-bottom: 2px solid var(--lm-gold); }
.room-main { flex: 1; display: flex; min-height: 0; }
/* ----- Layouts: gallery | speaker | sidebar | spotlight (ຕັ້ງໂດຍ room.js ຜ່ານ data-layout) ----- */
.room { position: relative; }
.grid { flex: 1; position: relative; min-width: 0; min-height: 0; gap: 8px; padding: 8px; overflow: hidden;
        display: flex; flex-wrap: wrap; justify-content: center; align-content: center; }
.grid[data-layout=gallery] .tile { flex: 0 0 auto; }            /* ຂະໜາດ px ຖືກຄິດໃນ JS */
/* ຕາຕະລາງ + ປັກໝຸດ: ຄົນທີ່ປັກ (.gpin) ແຖວເທິງ, ຕົວແບ່ງແຖວ (::after), ຄົນອື່ນແຖວລຸ່ມ */
.grid[data-layout=gallery].has-pin .tile { order: 2; }
.grid[data-layout=gallery].has-pin .tile.gpin { order: 0; }
.grid[data-layout=gallery].has-pin::after { content: ''; flex: 0 0 100%; order: 1; height: 0; margin: -4px 0; }
.grid[data-layout=speaker] { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr));
        grid-template-rows: minmax(0, 1fr) clamp(90px, 18vh, 160px); }
.grid[data-layout=speaker] .tile.main { grid-column: 1 / -1; grid-row: 1; }
.grid[data-layout=speaker] .tile.thumb { grid-row: 2; }
.grid[data-layout=sidebar] { display: grid; grid-template-columns: minmax(0, 1fr) clamp(140px, 22vw, 260px);
        grid-template-rows: repeat(var(--n, 1), minmax(0, 1fr)); }
.grid[data-layout=sidebar] .tile.main { grid-column: 1; grid-row: 1 / -1; }
.grid[data-layout=sidebar] .tile.thumb { grid-column: 2; }
.grid[data-layout=spotlight] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.grid[data-layout=spotlight] .tile.main { grid-area: 1 / 1; }
.grid[data-layout=spotlight] .tile.thumb { display: none; }
.grid[data-layout=spotlight] .tile.me.thumb { display: block; position: absolute; right: 16px; bottom: 16px; z-index: 5;
        width: clamp(120px, 20vw, 220px); aspect-ratio: 16 / 9; box-shadow: 0 4px 16px rgba(0, 0, 0, .6); }
.grid[data-layout=split] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
.grid[data-layout=split] .tile.split-a { grid-column: 1; grid-row: 1; width: auto; height: auto; }
.grid[data-layout=split] .tile.split-b { grid-column: 2; grid-row: 1; width: auto; height: auto; }
.grid[data-layout=split] .tile.offstage { display: none; }
.grid[data-layout=split] .tile.split-me { position: absolute; right: 16px; bottom: 16px; z-index: 5; width: clamp(120px, 16vw, 220px); height: auto;
        aspect-ratio: 16 / 9; box-shadow: 0 4px 16px rgba(0, 0, 0, .6); }
@media (max-width: 600px) { .grid[data-layout=split] { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); }
        .grid[data-layout=split] .tile.split-b { grid-column: 1; grid-row: 2; } }   /* ມືຖືແນວຕັ້ງ: ເທິງ-ລຸ່ມ */
.grid.fill .tile video { object-fit: cover; }
.tile.hidden { display: none !important; }
.tile.thumb .label { font-size: .7rem; left: 4px; bottom: 4px; }
.tile { position: relative; background: #000; border-radius: 10px; overflow: hidden; min-height: 0; }
.tile video { width: 100%; height: 100%; object-fit: contain; background: #000; }
/* ຂອບສີເຫຼືອງ: ສະແດງເມື່ອມີສຽງໄມເຂົ້າມາ (.speaking ຖືກຕັ້ງໂດຍຕົວກວດສຽງໃນ room.js) */
.tile::after { content: ""; position: absolute; inset: 0; border: 4px solid #ffd400; border-radius: inherit; z-index: 4; pointer-events: none;
               opacity: 0; transition: opacity .15s; box-shadow: inset 0 0 14px rgba(255, 212, 0, .55); }
.tile.speaking::after { opacity: 1; }
.tile .pin { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .6);
             color: #fff; opacity: 0; transition: opacity .15s; z-index: 2; padding: 0; line-height: 1; }
.tile:hover .pin, .tile.pinned .pin, .tile .pin:focus-visible { opacity: 1; }
.tile.pinned .pin { background: var(--lm-gold); color: #000; }
@media (hover: none) { .tile .pin { opacity: .8; } }
.tile .label { position: absolute; left: 8px; bottom: 8px; background: rgba(0, 0, 0, .6); padding: 2px 8px; border-radius: 6px; font-size: .8rem; max-width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile.me { outline: 2px solid var(--lm-green); }
/* ສະຖານະການເຊື່ອມຕໍ່ ທັບເທິງ tile ຂອງຄົນອື່ນ (ແທນພາບດຳທີ່ບໍ່ບອກສາເຫດ) */
.tile .status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; color: #cfe3d6; font-size: .9rem; background: rgba(0, 0, 0, .35); pointer-events: none; }
.tile .status[data-k=failed] { color: #ffb4ab; }
.tile .status[data-k=unstable] { color: #ffe08a; }
.tile .label, .tile .pin, .tile .pin-all { z-index: 2; }
.tile .status[data-k=black] { color: #cfe3d6; }
.tile .dbg { position: absolute; left: 6px; right: 6px; top: 40px; z-index: 3; pointer-events: none; font: 11px/1.4 ui-monospace, Consolas, monospace; color: #8fe9ff; background: rgba(0, 0, 0, .7); padding: 4px 6px; border-radius: 6px; white-space: pre-wrap; word-break: break-all; }
.side { width: 320px; max-width: 100%; background: #fff; color: #222; display: flex; flex-direction: column; }
.side-tabs { display: flex; border-bottom: 1px solid #ddd; }
.side-tabs button { border: 0; background: none; padding: .6rem .8rem; }
.side-tabs button.active { color: var(--lm-green); border-bottom: 2px solid var(--lm-green); font-weight: 600; }
.side-body { flex: 1; min-height: 0; overflow-y: auto; }
.msgs { overflow-y: auto; padding: .5rem; font-size: .9rem; }
.msg { margin-bottom: .5rem; word-break: break-word; }
.msg .who { font-weight: 600; color: var(--lm-green); }
.msg .ts { font-size: .7rem; color: #888; margin-left: .3rem; }
/* ແຖບປຸ່ມ: ເຊື່ອງໄວ້ ແລ້ວເລື່ອນຂຶ້ນມາເມື່ອເອົາເມົ້າໄປທີ່ຂອບລຸ່ມ (room.js ເພີ່ມ class .show) */
.toolbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; padding: .6rem;
           background: rgba(7, 18, 13, .94); padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
           transform: translateY(100%); opacity: 0; pointer-events: none; transition: transform .22s ease, opacity .22s ease; }
.toolbar.show, .toolbar:focus-within { transform: none; opacity: 1; pointer-events: auto; }
@media (min-width: 769px) { .room:has(#side:not(.d-none)) .toolbar { right: 320px; } }   /* ບໍ່ບັງຊ່ອງພິມແຊັດ */
/* ຂີດນ້ອຍໆ ບອກວ່າມີແຖບເຊື່ອງຢູ່ */
.room::after { content: ""; position: fixed; left: 50%; bottom: 5px; width: 64px; height: 4px; margin-left: -32px; border-radius: 2px; background: rgba(255, 255, 255, .35); pointer-events: none; z-index: 19; transition: opacity .2s; }
.room:has(.toolbar.show)::after, .room:has(.toolbar:focus-within)::after { opacity: 0; }
.tb { position: relative; width: 48px; height: 48px; border-radius: 50%; border: 0; background: #24362d; color: #fff; font-size: 1.2rem; }
.tb:hover { background: #31493d; }
.tb.off { background: #b3261e; }
.tb.on { background: var(--lm-green); }
.tb-leave, .tb-end { background: #b3261e; }
.tb .badge { position: absolute; top: -4px; right: -4px; font-size: .65rem; }
.overlay { position: fixed; inset: 0; background: rgba(5, 15, 10, .92); display: flex; align-items: center; justify-content: center; z-index: 50; }
.overlay.d-none { display: none !important; }
.notice { position: fixed; top: 52px; left: 50%; transform: translateX(-50%); background: #3a2d00; border: 1px solid var(--lm-gold); padding: .4rem .9rem; border-radius: 8px; z-index: 40; font-size: .85rem; max-width: 92%; }

/* ----- Layout menu ----- */
.layout-menu { max-height: calc(100vh - 100px); overflow-y: auto; position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 45;
               width: min(440px, 94vw); background: #10231a; border: 1px solid #2c4a3b; border-radius: 12px; padding: .8rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
.layout-menu.d-none { display: none !important; }
.lm-title { font-weight: 700; margin-bottom: .5rem; }
.lm-opts { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .6rem; }
.lm-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: .5rem; color: #fff;
          background: #1a3326; border: 2px solid transparent; border-radius: 10px; }
.lm-opt:hover { background: #24412f; }
.lm-opt.active { border-color: var(--lm-gold); background: #24412f; }
.lm-opt small { color: #9fb8a8; font-size: .72rem; }
.lm-opt kbd { background: #0a1a13; color: #cfe; padding: 0 .3rem; font-size: .65rem; }
.lm-sw { display: flex; gap: .5rem; align-items: center; font-size: .85rem; padding: .15rem 0; cursor: pointer; }
.lm-hint { font-size: .72rem; color: #9fb8a8; margin-top: .6rem; }
.dev-menu { width: min(380px, 94vw); }
.dev-lbl { display: block; font-size: .82rem; color: #cfe; margin: .65rem 0 .25rem; }
.dev-sel { background-color: #1a3326; color: #fff; border-color: #2c4a3b; }
.dev-sel:focus { background-color: #1a3326; color: #fff; border-color: var(--lm-gold); box-shadow: 0 0 0 .15rem rgba(201, 162, 39, .3); }
.dev-sel option { background: #10231a; color: #fff; }
.dev-meter { height: 6px; margin-top: .4rem; background: #1a3326; border-radius: 3px; overflow: hidden; }
.dev-meter i { display: block; height: 100%; width: 0; background: var(--lm-gold); transition: width .12s linear; }
/* ພາບຕົວຢ່າງຂະໜາດນ້ອຍຂອງແຕ່ລະ layout */
.pv { display: grid; width: 54px; height: 34px; gap: 2px; padding: 2px; background: #07120d; border-radius: 4px; margin-bottom: 2px; }
.pv i, .pv u { background: #4d8a68; border-radius: 2px; display: block; text-decoration: none; }
.pv u { background: #2f5a43; }
.pv-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.pv-speaker { grid-template-columns: repeat(3, 1fr); grid-template-rows: 3fr 1fr; }
.pv-speaker i { grid-column: 1 / -1; }
.pv-sidebar { grid-template-columns: 3fr 1fr; grid-template-rows: repeat(3, 1fr); }
.pv-sidebar i { grid-row: 1 / -1; }
.pv-spot { grid-template-columns: 1fr; grid-template-rows: 1fr; position: relative; }
.pv-spot u { position: absolute; right: 4px; bottom: 4px; width: 14px; height: 9px; background: #c9a227; }
.pv-split { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }

@media (max-width: 768px) {
  .grid[data-layout=sidebar] { grid-template-columns: minmax(0, 1fr) clamp(90px, 28vw, 140px); }
  .side { position: fixed; inset: 0; width: 100%; z-index: 30; }
  .tb { width: 42px; height: 42px; font-size: 1.05rem; }
}

/* ປຸ່ມປ່ຽນພາສາ ລາວ / EN ໃນແຖບເມນູ */
.lm-lang .btn { padding-top: .1rem; padding-bottom: .1rem; }
.lm-lang .btn.active { background: #fff; color: var(--lm-green, #0b6b3a); }

/* ===== ຕົວເລືອກຂະໜາດກອງປະຊຸມ ===== */
.lm-sizes { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .6rem; }
.lm-size { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: .7rem .5rem; border: 2px solid #d5ded9; border-radius: .75rem;
           background: #fff; cursor: pointer; text-align: center; transition: border-color .15s, background .15s, box-shadow .15s; }
.lm-size .bi { font-size: 1.4rem; color: var(--lm-green); }
.lm-size b { font-size: 1.6rem; line-height: 1.1; color: var(--lm-dark); }
.lm-size span { font-size: .8rem; color: #5b6b63; }
.lm-size small { margin-top: 2px; font-size: .72rem; color: #7a8a82; }
.lm-size:hover { border-color: var(--lm-green); }
.lm-size-in:checked + .lm-size { border-color: var(--lm-green); background: #e8f4ed; box-shadow: inset 0 -3px 0 var(--lm-gold); }
.lm-size-in:focus-visible + .lm-size { outline: 3px solid rgba(27, 122, 75, .45); outline-offset: 2px; }
.lm-size-hint { margin-top: .5rem; font-size: .85rem; color: #5b6b63; }
.lm-size-hint.warn { color: #8a6d00; background: #fff8e1; border-left: 3px solid var(--lm-gold); padding: .4rem .6rem; border-radius: .25rem; }

/* ===== ປະຕິທິນກອງປະຊຸມ ===== */
.cal { background: #fff; border-radius: .75rem; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-head div { padding: .5rem .25rem; text-align: center; font-weight: 600; font-size: .85rem; background: var(--lm-dark); color: #fff; }
.cal-cell { position: relative; min-height: 112px; padding: .3rem .35rem; border-right: 1px solid #e3eae6; border-bottom: 1px solid #e3eae6; min-width: 0; }
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell.other { background: #f7f9f8; }
.cal-cell.other .cal-num { color: #a9b6af; }
.cal-cell.sel { background: #eef7f1; box-shadow: inset 0 0 0 2px var(--lm-green); }
.cal-num { display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; border-radius: 50%;
           font-weight: 600; font-size: .9rem; color: var(--lm-dark); text-decoration: none; }
.cal-cell.today .cal-num { background: var(--lm-green); color: #fff; }
.cal-chip { display: block; position: relative; z-index: 2; margin-top: 2px; padding: 1px 6px; border-radius: 4px; font-size: .74rem; color: #fff;
            text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-chip:hover { color: #fff; filter: brightness(1.12); }
.st-live { background: #dc3545; } .st-scheduled { background: var(--lm-green); } .st-ended { background: #6c757d; }
.st-cancelled { background: #adb5bd; text-decoration: line-through; }
.cal-more { position: relative; z-index: 2; display: inline-block; margin-top: 2px; font-size: .72rem; font-weight: 600; color: var(--lm-green); text-decoration: none; }
.cal-dots { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.cal-dot { width: 7px; height: 7px; border-radius: 50%; }
.cal-legend span { display: inline-flex; align-items: center; gap: .35rem; margin-right: 1rem; font-size: .8rem; color: #5b6b63; }
.cal-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
@media (max-width: 767.98px) {
  .cal-cell { min-height: 58px; padding: .2rem; }
  .cal-head div { font-size: .72rem; padding: .35rem 0; }
}

/* ===== Host ຄວບຄຸມ Layout ຂອງທຸກຄົນ ===== */
.tile .pin-all { position: absolute; top: 6px; left: 6px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .6);
                 color: #fff; display: none; align-items: center; justify-content: center; z-index: 3; cursor: pointer; }
.is-mod .tile:hover .pin-all, .is-mod .tile.featured .pin-all, .is-mod .tile .pin-all:focus-visible { display: flex; }
@media (hover: none) { .is-mod .tile .pin-all { display: flex; opacity: .85; } }
.tile.featured .pin-all { background: var(--lm-gold); color: #000; }
.tile.featured { box-shadow: 0 0 0 3px var(--lm-gold); }
.lm-opt:disabled { opacity: .45; cursor: not-allowed; }
.lm-locknote { margin-bottom: .6rem; padding: .4rem .6rem; font-size: .8rem; color: #ffe08a; background: #2a2208; border: 1px solid var(--lm-gold); border-radius: 8px; }
.lm-host { margin-top: .8rem; padding-top: .7rem; border-top: 1px solid #2c4a3b; }
.lm-hopts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .35rem; }
.lm-hopt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .45rem .15rem; font-size: .7rem; line-height: 1.2; color: #fff;
           background: transparent; border: 1px solid #2c4a3b; border-radius: 8px; cursor: pointer; text-align: center; }
.lm-hopt .bi { font-size: 1.15rem; }
.lm-hopt:hover { background: #24412f; }
.lm-hopt.active { border-color: var(--lm-gold); background: #24412f; }

/* ----- ແຈ້ງເຕືອນຂໍ້ຄວາມໃໝ່ (chat) ----- */
.chat-toast { position: fixed; top: 100px; right: 16px; width: min(320px, 92vw); z-index: 45; cursor: pointer; background: #10231a; color: #fff;
              border: 1px solid #2c4a3b; border-left: 4px solid var(--lm-gold); border-radius: 10px; padding: .55rem .8rem;
              box-shadow: 0 8px 24px rgba(0, 0, 0, .55); animation: toast-in .2s ease-out; }
.chat-toast .ct-who { font-size: .75rem; color: #ffe08a; font-weight: 600; margin-bottom: 2px; }
.chat-toast .ct-body { font-size: .88rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.chat-toast.d-none { display: none !important; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.tb.ring { animation: tb-ring .6s ease-in-out 2; }
@keyframes tb-ring { 0%, 100% { transform: none; } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }

/* ----- ລາກຈັດລຳດັບພາບ ----- */
.grid .tile { cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.grid .tile .pin, .grid .tile .pin-all { cursor: pointer; }
.tile.dragging { cursor: grabbing; opacity: .6; transform: scale(.97); outline: 3px dashed #fff; outline-offset: -4px; transition: transform .12s, opacity .12s; z-index: 6; }
body.tile-dragging, body.tile-dragging * { cursor: grabbing !important; user-select: none; }

/* ----- ຮູບໂປຣໄຟລ໌ ----- */
.tile .avatar { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; background: #12261c; pointer-events: none; }
.tile .avatar img { height: 55%; max-height: 220px; aspect-ratio: 1; width: auto; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255, 255, 255, .22); }
.tile .avatar.d-none { display: none !important; }
.avatar-chip { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: #2c4a3b; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 600; flex: 0 0 auto; }
.avatar-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-chip.lg { width: 56px; height: 56px; font-size: 1.4rem; }
.avatar-chip.xl { width: 112px; height: 112px; font-size: 2.6rem; }
.lm-user { border-radius: 2rem; padding: 2px 6px 2px 2px; transition: background .15s; }
.lm-user:hover { background: rgba(255, 255, 255, .12); }
.tile .avatar .av-initial { height: 55%; max-height: 220px; aspect-ratio: 1; border-radius: 50%; background: #2c4a3b; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: clamp(1.4rem, 6vw, 4rem); border: 3px solid rgba(255, 255, 255, .22); }

/* ໂລໂກ/ຊື່ໂປຣແກຣມ (Super Admin ຕັ້ງໄດ້) */
.lm-brand-logo { height: 34px; width: auto; max-width: 150px; object-fit: contain; margin-right: .5rem; vertical-align: middle; background: #fff; border-radius: 6px; padding: 2px; }
.lm-brand-logo.sm { height: 26px; max-width: 110px; margin-right: .35rem; }

/* ===== ເມນູຈັດການລະບົບ / ຕັ້ງຄ່າ (dropdown ແຖບເທິງ, ເບື້ອງຊ້າຍຂອງຊື່ຜູ້ໃຊ້) ===== */
.lm-admin-menu { background: var(--lm-dark); border: 1px solid var(--lm-gold); min-width: 240px; padding: .4rem 0; }
.lm-admin-menu .dropdown-header { color: var(--lm-gold); font-weight: 700; }
.lm-admin-menu .dropdown-divider { border-color: rgba(255, 255, 255, .18); }
.lm-admin-menu .dropdown-item { color: #fff; padding: .45rem 1rem; }
.lm-admin-menu .dropdown-item .bi { color: var(--lm-gold); }
.lm-admin-menu .dropdown-item:hover, .lm-admin-menu .dropdown-item:focus { background: var(--lm-green); color: #fff; }
.lm-admin-menu .dropdown-item.active { background: var(--lm-green); color: #fff; font-weight: 700; }
.lm-admin-dd > .btn.active, .lm-admin-dd > .btn.show { background: #fff; color: var(--lm-green); }