/* Lyly Command Center — overrides nhỏ trên Tailwind CDN */
:root { color-scheme: light; }
html, body { height: 100%; }
body { margin: 0; }

/* scrollbars gọn */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

/* sidebar trái: ẩn HẲN thanh cuộn (vẫn cuộn được) */
#lylySidebar, #lylySidebar nav { scrollbar-width: none; -ms-overflow-style: none; }
#lylySidebar::-webkit-scrollbar, #lylySidebar nav::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ── Sidebar rail: thu gọn 4rem, HOVER mở rộng 16rem (overlay, không đẩy nội dung) ── */
.lyly-rail { width: 4rem; transition: width .2s ease; }
.lyly-rail:hover { width: 16rem; box-shadow: 12px 0 40px rgba(2,6,23,.4); }
.lyly-rail nav { overflow-x: hidden; }
.lyly-rail .lyly-navtext, .lyly-rail .lyly-group,
.lyly-rail .lyly-brandtext, .lyly-rail .lyly-foot {
  opacity: 0; white-space: nowrap; overflow: hidden;
  transition: opacity .12s ease; pointer-events: none;
}
.lyly-rail:hover .lyly-navtext, .lyly-rail:hover .lyly-group,
.lyly-rail:hover .lyly-brandtext, .lyly-rail:hover .lyly-foot {
  opacity: 1; pointer-events: auto;
}

/* ── Chat popup kiểu Messenger — bật/tắt bằng class hidden/flex ──────────── */
#lylyChatPop { animation: lylypop .16s ease; }
@keyframes lylypop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* nav item active */
.lyly-nav-item.active { background: rgba(255,107,43,.14); color: #fff; }
.lyly-nav-item.active .lyly-nav-ico { color: #FF6B2B; }

/* fade-in tab */
.lyly-pane { animation: lylyfade .22s ease; }
@keyframes lylyfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* chat bubbles */
.lyly-bubble { white-space: pre-wrap; word-break: break-word; line-height: 1.5; }

/* typing dots */
.lyly-dot { animation: lylyblink 1.2s infinite both; }
.lyly-dot:nth-child(2) { animation-delay: .2s; }
.lyly-dot:nth-child(3) { animation-delay: .4s; }
@keyframes lylyblink { 0%,80%,100% { opacity: .25; } 40% { opacity: 1; } }

/* line clamp helper */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Birthday: dải tháng cuộn ngang, ẩn thanh cuộn */
.lyly-monthstrip { scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
.lyly-monthstrip::-webkit-scrollbar { height: 0; display: none; }

/* Birthday popup: preview thiệp ghép + thumbnail ảnh CBNV/khung (aspect-ratio không
   có trong build Tailwind tĩnh → định nghĩa thuần ở đây để chắc chắn hiển thị). */
.bd-prev-card { width: 100%; border-radius: 16px; border: 1px solid #e2e8f0; box-shadow: 0 10px 30px rgba(2,6,23,.10); display: block; }
.bd-prev-card-wrap { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
  border-radius: 16px; border: 1px dashed #cbd5e1; background: #f8fafc; color: #94a3b8; text-align: center; padding: 1rem; }
.bd-thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; border: 1px solid #e2e8f0; background: #f1f5f9; display: block; }
.bd-thumb-wrap { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; border: 1px dashed #cbd5e1; background: #f8fafc; color: #94a3b8; }