/* WHTSBOT - estilo tipo WhatsApp */
:root{
  --wa-green:#00a884;
  --wa-green-dark:#008069;
  --wa-bg:#efeae2;
  --wa-out:#d9fdd3;
  --wa-in:#ffffff;
  --wa-panel:#f0f2f5;
}
body.wa-body{ background:#d1d7db; }

/* Header fijo arriba, footer fijo (chico) abajo */
body.has-fixed{ padding-top:56px; padding-bottom:28px; }
.app-footer{
  height:28px; line-height:28px; margin:0; padding:0 12px; text-align:center;
  font-size:.7rem; background:#fff; border-top:1px solid #e3e3e3;
}
body.has-fixed .app-footer{ position:fixed; left:0; right:0; bottom:0; z-index:1030; }

.wa-shell{
  display:flex; height:calc(100vh - 56px - 28px - 12px);
  min-height:480px; border:1px solid #d1d7db; border-radius:8px; overflow:hidden; background:#fff;
}
.wa-list{ width:360px; min-width:300px; border-right:1px solid #e9edef; display:flex; flex-direction:column; background:#fff; }
.wa-list-head{ background:var(--wa-panel); padding:10px 14px; font-weight:600; display:flex; justify-content:space-between; align-items:center; }
.wa-search{ padding:8px 12px; background:#fff; border-bottom:1px solid #e9edef; }
.wa-chats{ overflow-y:auto; flex:1; }
.wa-chat-item{ display:flex; gap:10px; padding:10px 14px; text-decoration:none; color:inherit; border-bottom:1px solid #f0f2f5; }
.wa-chat-item:hover{ background:#f5f6f6; }
.wa-chat-item.active{ background:#e9edef; }
.wa-avatar{ width:44px; height:44px; border-radius:50%; background:var(--wa-green); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; flex:0 0 auto; }
.wa-chat-main{ flex:1; min-width:0; }
.wa-chat-name{ font-weight:600; display:flex; justify-content:space-between; }
.wa-chat-preview{ color:#667781; font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.wa-conv{ flex:1; display:flex; flex-direction:column; background:var(--wa-bg); position:relative; }
.wa-conv-head{ background:var(--wa-panel); padding:8px 16px; display:flex; align-items:center; flex-wrap:wrap; gap:8px; row-gap:6px; border-bottom:1px solid #e9edef; }
.wa-msgs{ flex:1; overflow-y:auto; padding:18px 8%; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23efeae2'/%3E%3Ccircle cx='8' cy='8' r='1.2' fill='%23dcd6cd'/%3E%3C/svg%3E"); }
.wa-bubble{ display:inline-flex; flex-direction:column; width:max-content; max-width:min(78%, 760px); min-width:0; padding:6px 9px; border-radius:8px; margin-bottom:8px; box-shadow:0 1px .5px rgba(0,0,0,.13); position:relative; white-space:pre-wrap; word-wrap:break-word; overflow-wrap:anywhere; line-height:1.35; }
.wa-bubble > div{ max-width:100%; }
.wa-bubble .wa-meta{ align-self:flex-end; white-space:nowrap; }
.wa-in-b{ background:var(--wa-in); align-self:flex-start; border-top-left-radius:0; }
.wa-out-b{ background:var(--wa-out); align-self:flex-end; border-top-right-radius:0; }
.wa-row{ display:flex; flex-direction:column; align-items:flex-start; }
.wa-meta{ font-size:.68rem; color:#667781; text-align:right; margin-top:2px; }
.wa-compose{ background:var(--wa-panel); padding:8px 12px; display:flex; gap:8px; align-items:flex-end; position:relative; }
.wa-compose textarea{ resize:none; border-radius:20px; border:1px solid #e9edef; padding:8px 14px; flex:1; max-height:120px; }
.wa-emoji-btn{ background:none; border:none; font-size:1.4rem; cursor:pointer; line-height:1; }
.wa-send-btn{ background:var(--wa-green-dark); color:#fff; border:none; border-radius:50%; width:42px; height:42px; font-size:1.1rem; }
.wa-emoji-pop{ position:absolute; bottom:60px; left:8px; z-index:30; display:none; }
.wa-emoji-pop.show{ display:block; }
.wa-empty{ flex:1; display:flex; align-items:center; justify-content:center; color:#667781; background:var(--wa-panel); flex-direction:column; }
.wa-draft{ background:#fff8e1; border:1px solid #ffe08a; border-radius:8px; padding:10px; margin:6px 8% 0; max-height:30vh; overflow-y:auto; }

/* ===== Menú lateral derecho (offcanvas) ===== */
.wa-menu{ width:282px; background:#0b141a !important; }
.wa-menu .offcanvas-header{ background:#111b21; }
.wa-menu-list{ list-style:none; padding:0; margin:0; }
.wa-menu-list .nav-link{ color:#cdd3da; border-radius:8px; padding:9px 12px; margin:1px 0; display:flex; align-items:center; gap:11px; font-size:.95rem; }
.wa-menu-list .nav-link i{ width:20px; text-align:center; color:#8aa0ad; }
.wa-menu-list .nav-link:hover{ background:rgba(255,255,255,.08); color:#fff; }
.wa-menu-list .nav-link.active{ background:var(--wa-green-dark); color:#fff; }
.wa-menu-list .nav-link.active i{ color:#fff; }
.wa-menu-sec{ color:#7e8893; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; padding:12px 12px 3px; display:flex; align-items:center; gap:8px; }

/* ===== Tema / pulido moderno ===== */
.navbar.bg-dark{ background:#0b141a !important; box-shadow:0 1px 8px rgba(0,0,0,.25); }
.navbar-brand{ font-weight:700; letter-spacing:.3px; }
body.bg-light{ background:#eef2f5 !important; }
.card{ border:none; border-radius:12px; }
.card.shadow-sm{ box-shadow:0 2px 12px rgba(0,0,0,.07) !important; }
.card-header{ background:#fff; border-bottom:1px solid #eef0f2; font-weight:600; border-radius:12px 12px 0 0 !important; }
.btn{ border-radius:9px; }
.badge{ font-weight:600; }
.progress{ border-radius:8px; background:#eef0f2; }
.table thead.table-light th{ background:#f6f8fa; color:#54656f; font-weight:600; }
.toast-header .btn-close-white{ filter:none; }

/* ===== Sidebar DERECHA: colapsable (a iconos) y ocultable ===== */
:root{ --side-w:250px; --side-rail:60px; }
.wa-sidebar{ position:fixed; top:56px; right:0; bottom:28px; width:var(--side-w); background:#0b141a; color:#cdd3da;
  overflow-y:auto; overflow-x:hidden; z-index:1035; transition:transform .2s ease, width .2s ease; box-shadow:-2px 0 12px rgba(0,0,0,.28); }
.wa-sidebar-head{ display:flex; align-items:center; gap:8px; padding:10px 12px; color:#fff; font-weight:700;
  border-bottom:1px solid #1f2c33; position:sticky; top:0; background:#0b141a; z-index:2; white-space:nowrap; }
.wa-sidebar .wa-menu-list{ list-style:none; padding:6px; margin:0; display:flex; flex-direction:column; flex-wrap:nowrap; width:100%; }
.wa-sidebar .nav-item{ width:100%; }
.wa-sidebar .nav-link{ color:#cdd3da; border-radius:8px; padding:9px 12px; margin:1px 0; display:flex; align-items:center; gap:12px; white-space:nowrap; }
.wa-sidebar .nav-link i{ width:20px; text-align:center; color:#8aa0ad; flex:0 0 auto; }
.wa-sidebar .nav-link:hover{ background:rgba(255,255,255,.08); color:#fff; }
.wa-sidebar .nav-link.active{ background:var(--wa-green-dark); color:#fff; }
.wa-sidebar .nav-link.active i{ color:#fff; }
.wa-menu-sec{ color:#7e8893; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; padding:12px 14px 3px; display:flex; align-items:center; gap:10px; white-space:nowrap; }

/* El contenido se recorre con padding-right en el BODY (no margin en main):
   margin-right NO encoge a .container-fluid (width:100%), por eso el chat se
   metía debajo del menú. El padding del body sí reduce el ancho de TODO el
   contenido en flujo, dejando libre la franja de la sidebar. */
body.has-side{ --side-gap:calc(var(--side-w) + 10px); padding-right:var(--side-gap); transition:padding .2s ease; }
body.has-side main.container,
body.has-side main.container-fluid{ max-width:calc(100vw - var(--side-gap)); transition:max-width .2s ease; }
/* COLAPSADO: solo iconos */
body.side-collapsed .wa-sidebar{ width:var(--side-rail); }
body.side-collapsed{ --side-gap:calc(var(--side-rail) + 6px); padding-right:var(--side-gap); }
body.side-collapsed .wa-sidebar .label{ display:none; }
body.side-collapsed .wa-sidebar .nav-link{ justify-content:center; gap:0; }
body.side-collapsed .wa-sidebar .wa-menu-sec{ justify-content:center; padding:10px 0 2px; }
body.side-collapsed #sideCollapseBtn i{ transform:rotate(180deg); }
/* OCULTO */
body.side-hidden .wa-sidebar{ transform:translateX(100%); }
body.side-hidden{ --side-gap:0px; padding-right:0; }
body.side-hidden main.container,
body.side-hidden main.container-fluid{ max-width:100vw; }
/* Solo en MÓVIL real (<768px) la sidebar va por encima (overlay) y el contenido
   no se recorre. Entre 768 y 992 mantenemos el menú acomodado para que NO tape
   el chat ni el botón de enviar. */
@media (max-width: 767.98px){
  body.has-side:not(.side-collapsed):not(.side-hidden){ --side-gap:0px; padding-right:0; }
  body.has-side:not(.side-collapsed):not(.side-hidden) main.container,
  body.has-side:not(.side-collapsed):not(.side-hidden) main.container-fluid{ max-width:100vw; }
  body.side-collapsed{ --side-gap:calc(var(--side-rail) + 6px); padding-right:var(--side-gap); }
  body.side-collapsed main.container,
  body.side-collapsed main.container-fluid{ max-width:calc(100vw - var(--side-gap)); }
}