[x-cloak] { display: none !important; }

body { background: #f4f7f5; }

.conversation-list { width: 320px; border-right: 1px solid #dee2e6; overflow-y: auto; height: calc(100vh - 0px); flex-shrink: 0; }
.conversation-item { border-bottom: 1px solid #eee; cursor: pointer; padding: .65rem .9rem; }
.conversation-item:hover, .conversation-item.active { background: #eaf5ee; }

.chat-panel { display: flex; flex-direction: column; height: 100vh; flex-grow: 1; min-width: 0; }
.messages { flex-grow: 1; overflow-y: auto; padding: 1rem; background: #e9edf1; }

.bubble { max-width: 65%; padding: .5rem .8rem; border-radius: .9rem; margin-bottom: .5rem; word-wrap: break-word; }
.bubble.inbound { background: #fff; margin-right: auto; border-bottom-left-radius: .2rem; }
.bubble.outbound { background: #d9fdd3; margin-left: auto; border-bottom-right-radius: .2rem; }
.bubble .meta { font-size: .68rem; color: #6c757d; margin-top: .15rem; }

.badge-tag { cursor: pointer; }
.stat-card { border-radius: .75rem; }

.donut { width: 150px; height: 150px; border-radius: 50%; flex-shrink: 0; }
.donut-hole { width: 96px; height: 96px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.meter { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: #e9ecef; }
.meter > div + div { margin-left: 2px; }
.legend-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .35rem; }

/* WhatsApp live preview mockup (template creation + campaigns) */
.wa-phone { width: 290px; border-radius: 32px; background: linear-gradient(160deg, #1c1c1e, #050505); padding: 12px; box-shadow: 0 20px 45px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.15); flex-shrink: 0; }
.wa-phone-screen { border-radius: 22px; overflow: hidden; background: #e9ddd0; display: flex; flex-direction: column; height: 540px; }
.wa-phone-header { background: #075e54; color: #fff; padding: .65rem .75rem; display: flex; align-items: center; gap: .55rem; }
.wa-phone-avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-size: .9rem; }
.wa-phone-body { flex-grow: 1; padding: .85rem .6rem; overflow-y: auto; background-image: radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px); background-size: 14px 14px; }
.wa-phone-bubble { max-width: 92%; background: #fff; border-radius: .35rem .8rem .8rem .8rem; padding: .55rem .7rem; margin-bottom: .4rem; box-shadow: 0 1px 1px rgba(0,0,0,.08); font-size: .82rem; }
.wa-phone-bubble .wa-meta { font-size: .65rem; color: #667781; text-align: right; margin-top: .3rem; }
.wa-phone-btn { max-width: 92%; background: #fff; text-align: center; color: #00a5f4; padding: .45rem; border-radius: .5rem; margin-bottom: .35rem; font-size: .82rem; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.wa-phone-btn i { margin-right: .3rem; font-size: .78rem; }
.wa-phone-footer { padding: .5rem .6rem; background: #f0f2f5; display: flex; align-items: center; gap: .5rem; }
.wa-phone-footer .wa-input { flex-grow: 1; background: #fff; border-radius: 999px; padding: .4rem .8rem; color: #8696a0; font-size: .78rem; }

/* Page hero header used on the higher-touch creation pages */
.page-hero { background: linear-gradient(135deg, #0f5132, #198754 60%, #20a866); color: #fff; border-radius: 1rem; padding: 1.5rem 1.75rem; }
.page-hero h4 { color: #fff; }
.page-hero p { color: rgba(255,255,255,.85); }

/* Login page: brand panel + a small animated conversation built on the
   same .wa-phone-* mockup shell used by the template/campaign preview
   above, rather than a second parallel phone-chrome CSS system. */
.login-wrap { min-height: 100vh; }
.login-brand { flex: 0 0 46%; background: linear-gradient(160deg, #075e54 0%, #128c7e 100%); position: relative; overflow: hidden; }
.login-brand::before { content: ""; position: absolute; inset: 0; opacity: .08; background-image: radial-gradient(circle, #fff 2px, transparent 2px); background-size: 28px 28px; }
.login-logo-chip { background: #fff; border-radius: .9rem; padding: .9rem 1.75rem; display: inline-flex; align-items: center; z-index: 1; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.login-tagline { max-width: 320px; z-index: 1; }
.login-form-panel { display: flex; align-items: center; justify-content: center; }
.login-form-inner { width: 100%; max-width: 380px; opacity: 0; transform: translateY(14px); animation: loginFormRise .5s ease forwards; animation-delay: .15s; }
@keyframes loginFormRise { to { opacity: 1; transform: translateY(0); } }

.wa-phone-bubble, .wa-phone-bubble.out { color: #111b21; }
.wa-phone-bubble.out { background: #d9fdd3; margin-left: auto; border-radius: .8rem .8rem .35rem .8rem; }
.wa-phone-bubble.wa-anim { opacity: 0; transform: translateY(8px); animation: loginBubbleIn .45s ease forwards; }
.wa-phone-typing { align-self: flex-end; width: fit-content; margin-left: auto; display: flex; gap: 4px; padding: .5rem .7rem; background: #d9fdd3; border-radius: .8rem .8rem .35rem .8rem; opacity: 0; animation: loginTypingFade 2s ease forwards; }
.wa-phone-typing span { width: 6px; height: 6px; border-radius: 50%; background: #4a6b4a; animation: loginBounce 1.1s infinite ease-in-out; }
.wa-phone-typing span:nth-child(2) { animation-delay: .15s; }
.wa-phone-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes loginBubbleIn { to { opacity: 1; transform: translateY(0); } }
@keyframes loginBounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }
@keyframes loginTypingFade { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

.wa-phone-bubble.wa-anim.login-demo-delay-1 { animation-delay: .5s; }
.wa-phone-typing.login-demo-delay-2 { animation-delay: 1.4s; }
.wa-phone-bubble.wa-anim.login-demo-delay-3 { animation-delay: 3.4s; }
.wa-phone-bubble.wa-anim.login-demo-delay-4 { animation-delay: 4.4s; }

@media (prefers-reduced-motion: reduce) {
  .wa-phone-bubble.wa-anim, .wa-phone-typing, .login-form-inner { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* =========================================================
   SIDEBAR SCROLL FIX -- single authoritative block.
   ========================================================= */

.app-layout {
  height: 100vh;
  overflow: hidden;
  display: flex;
}

.sidebar {
  width: 230px;
  height: 100vh;
  min-height: 0;
  flex: 0 0 230px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar .nav-link.active, .sidebar .nav-link:hover { background: #1f7a3d; }

.sidebar-nav {
  flex: 1 1 auto;
  flex-wrap: nowrap; /* Bootstrap's .nav sets flex-wrap:wrap and .flex-column
    only changes flex-direction, never resets it -- with both wrap and a
    column direction, overflowing items silently wrap into a second column
    off to the right (invisible past the 230px sidebar) instead of stacking
    below, so scrollHeight never exceeds clientHeight and there is nothing
    to scroll to. This is the actual cause of the sidebar not scrolling. */
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 1rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.25) transparent;
}

.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 3px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.4); }

/* =========================================================
   SIDEBAR RESPONSIVE COLLAPSE -- below this width, the sidebar's
   fixed 230px plus a page's own fixed-width panel (e.g. the inbox's
   320px conversation-list) no longer fit side by side: both get
   squeezed into whatever's left, their own text truncates, and a
   horizontal scrollbar appears. There was no breakpoint at all
   before this -- the sidebar now goes off-canvas (a toggleable
   slide-in panel) instead of always claiming 230px of a viewport
   that may not have it to give. Matches the same lg (991.98px)
   breakpoint already used elsewhere in the app (e.g. login.html's
   d-lg-flex brand panel).
   ========================================================= */
.sidebar-toggle-btn {
  display: none;
  position: fixed;
  top: .6rem;
  left: .75rem;
  z-index: 1055;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: #212529;
  color: #fff;
  border: none;
  border-radius: .5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1045;
}

@media (max-width: 991.98px) {
  .sidebar-toggle-btn { display: flex; }

  .app-layout { overflow: visible; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform .25s ease;
  }

  main { width: 100%; }

  body.sidebar-open {
    overflow: hidden; /* the page behind a full-screen-ish mobile menu shouldn't also scroll */
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-backdrop { display: block; }
}