/* ═══════════════════════════════════════════════════════
   WhasaaS — app.css  |  WhatsApp Web Dark UI Clone
   ═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

/* ── Variables ───────────────────────────────────────── */
:root {
  --green:        #00A884;
  --green-dark:   #008C70;
  --green-light:  #25D366;
  --blue-tick:    #53bdeb;

  --bg-app:       #0B141A;
  --bg-panel:     #111B21;
  --bg-teal:      #202C33;
  --bg-hover:     #2A3942;
  --bg-input:     #2A3942;
  --bg-search:    #2A3942;
  --bg-msg-out:   #005C4B;
  --bg-msg-in:    #202C33;

  --text:         #E9EDEF;
  --text-2:       #8696A0;
  --text-3:       #667781;

  --border:       rgba(134,150,160,.15);
  --shadow:       0 1px 3px rgba(0,0,0,.4);

  --sidebar-w:    380px;
  --hdr-h:        60px;
  --radius:       8px;
}

/* ── Reset ───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  font-family:'Inter',-apple-system,'Segoe UI',sans-serif;
  background:var(--bg-app);color:var(--text);
  font-size:15px;line-height:1.4;
  -webkit-font-smoothing:antialiased;
}
button{background:none;border:none;cursor:pointer;color:inherit;font-family:inherit}
input,textarea,[contenteditable]{font-family:inherit;outline:none}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{background:rgba(134,150,160,.2);border-radius:3px}

/* ── App Shell ───────────────────────────────────────── */
.wa-app{display:flex;height:100vh;width:100vw;overflow:hidden;background:var(--bg-app)}

/* ══════════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════════ */
.wa-sidebar{
  width:var(--sidebar-w);min-width:var(--sidebar-w);
  display:flex;flex-direction:column;
  background:var(--bg-panel);
  border-right:1px solid var(--border);
  z-index:10;
}

/* Sidebar Header */
.wa-sidebar-hdr{
  display:flex;align-items:center;
  justify-content:space-between;
  padding:10px 16px;height:var(--hdr-h);
  background:var(--bg-panel);flex-shrink:0;
}
.wa-sidebar-hdr-left{display:flex;align-items:center;gap:10px}
.wa-sidebar-title{font-size:1.0625rem;font-weight:600;color:var(--text)}
.wa-hdr-actions{display:flex;align-items:center;gap:4px}

/* Search */
.wa-search-wrap{
  padding:6px 12px 4px;flex-shrink:0;
}
.wa-search-inner{
  display:flex;align-items:center;
  background:var(--bg-search);border-radius:9px;
  padding:0 12px;gap:8px;height:35px;
}
.wa-search-inner svg{color:var(--text-2);width:16px;height:16px;flex-shrink:0}
.wa-search-input{
  flex:1;background:none;border:none;
  color:var(--text);font-size:.875rem;
}
.wa-search-input::placeholder{color:var(--text-2)}

/* Filter Tabs */
.wa-filters{
  display:flex;gap:6px;padding:4px 12px 6px;
  overflow-x:auto;scrollbar-width:none;flex-shrink:0;
}
.wa-filters::-webkit-scrollbar{display:none}
.wa-filter{
  padding:5px 12px;border-radius:16px;
  font-size:.8125rem;font-weight:500;
  color:var(--text-2);background:var(--bg-teal);
  white-space:nowrap;transition:all .15s;
}
.wa-filter:hover{background:var(--bg-hover);color:var(--text)}
.wa-filter.active{background:var(--green);color:#fff}

/* Chat List */
.wa-chat-list{flex:1;overflow-y:auto}

/* Chat Item */
.wa-item{
  display:flex;align-items:center;
  padding:8px 16px;gap:12px;
  cursor:pointer;transition:background .1s;
  min-height:72px;position:relative;
  border-bottom:1px solid var(--border);
}
.wa-item:hover{background:var(--bg-hover)}
.wa-item.active{background:var(--bg-hover)}

/* Estilos para chats no leídos */
.wa-item--unread {
  background: rgba(0, 168, 132, 0.05);
}
.wa-item--unread .wa-item__name {
  font-weight: 700 !important;
  color: var(--text) !important;
}
.wa-item--unread .wa-item__preview {
  font-weight: 600;
  color: var(--text) !important;
}
.wa-item__body{flex:1;min-width:0}
.wa-item__row{display:flex;align-items:center;justify-content:space-between;gap:6px}
.wa-item__name{
  font-size:.9375rem;font-weight:500;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;
}
.wa-item__time{font-size:.6875rem;color:var(--text-3);flex-shrink:0}
.wa-item.unread .wa-item__time{color:var(--green)}
.wa-item__preview{
  font-size:.8125rem;color:var(--text-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;
}
.wa-item__meta{display:flex;align-items:center;gap:4px;flex-shrink:0}
.wa-badge{
  background:var(--green);color:#fff;
  border-radius:10px;padding:1px 6px;
  font-size:.6875rem;font-weight:600;min-width:18px;text-align:center;
}
.wa-muted-icon{color:var(--text-3);width:14px;height:14px}

/* ── Avatar ──────────────────────────────────────────── */
.wa-avatar{
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:.9375rem;color:#fff;
  flex-shrink:0;position:relative;overflow:hidden;
  background:var(--bg-teal);
}
.wa-avatar--sm{width:40px;height:40px;font-size:.875rem}
.wa-avatar--lg{width:56px;height:56px;font-size:1.1rem}
.wa-avatar img{width:100%;height:100%;object-fit:cover}
.wa-online-dot{
  position:absolute;bottom:2px;right:2px;
  width:10px;height:10px;border-radius:50%;
  background:#25D366;border:2px solid var(--bg-panel);
}

/* ── Icon Button ─────────────────────────────────────── */
.wa-icon-btn{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-2);transition:all .15s;flex-shrink:0;
}
.wa-icon-btn:hover{background:var(--bg-hover);color:var(--text)}
.wa-icon-btn svg{width:20px;height:20px}
.wa-mobile-plus-btn{display:none}

/* Instance Badge */
.wa-instance-bar{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;border-top:1px solid var(--border);
  flex-shrink:0;background:var(--bg-panel);
}
.wa-instance-dot{width:8px;height:8px;border-radius:50%;background:#25D366;flex-shrink:0}
.wa-instance-dot.disconnected{background:#F44336}
.wa-instance-dot.connecting{background:#FF9800}
.wa-instance-name{font-size:.8125rem;color:var(--text-2);flex:1;truncate}
.wa-instance-name span{display:block;font-size:.6875rem;color:var(--text-3)}

/* ══════════════════════════════════════════════════════
   MAIN CHAT AREA
   ══════════════════════════════════════════════════════ */
.wa-main{
  flex:1;display:flex;flex-direction:column;
  position:relative;overflow:hidden;
  background:var(--bg-app);
}

/* Chat background pattern (WhatsApp-style) */
.wa-main::before{
  content:'';position:absolute;inset:0;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none;
}

/* Empty State */
.wa-empty{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  z-index:1;position:relative;
  animation:fadeIn .3s ease;
}
.wa-empty__icon{
  width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,168,132,.12) 0%,transparent 70%);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.5rem;animation:float 4s ease-in-out infinite;
}
.wa-empty__icon svg{width:80px;height:80px;fill:var(--green);opacity:.8}
.wa-empty h2{font-size:1.75rem;font-weight:300;color:var(--text);margin-bottom:.5rem;letter-spacing:-.5px}
.wa-empty p{font-size:.9375rem;color:var(--text-2);text-align:center;max-width:320px;line-height:1.6}
.wa-empty__badge{
  display:flex;align-items:center;gap:6px;
  margin-top:1.5rem;padding:.5rem 1rem;
  background:var(--bg-teal);border-radius:20px;
  font-size:.8125rem;color:var(--text-2);
}
.wa-empty__badge::before{content:'🔒';font-size:.875rem}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ── Chat Panel (active conversation) ─────────────────── */
.wa-chat{flex:1;display:flex;flex-direction:column;z-index:1;position:relative;min-height:0}

/* Chat Header */
.wa-chat-hdr{
  display:flex;align-items:center;
  padding:10px 16px;height:var(--hdr-h);
  background:var(--bg-panel);gap:12px;flex-shrink:0;
  border-bottom:1px solid var(--border);
}
.wa-chat-hdr__info{flex:1;min-width:0;cursor:pointer}
.wa-chat-hdr__name{font-size:.9375rem;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-chat-hdr__status{font-size:.8125rem;color:var(--green)}
.wa-chat-hdr__status.offline{color:var(--text-3)}
.wa-chat-hdr__sub{display:flex;align-items:center;gap:8px;font-size:0.75rem;color:var(--text-2);margin-top:2px}
.wa-chat-hdr-actions{display:flex;align-items:center;gap:2px}
.wa-back-btn{display:none;width:36px;height:36px;border-radius:50%;align-items:center;justify-content:center;color:var(--text-2)}
.wa-back-btn:hover{background:var(--bg-hover)}
.wa-back-btn svg{width:22px;height:22px}

/* Messages Scroll Area */
.wa-messages{
  flex:1;overflow-y:auto;padding:20px 6% 8px;
  display:flex;flex-direction:column;gap:1px;
  scroll-behavior:smooth;min-height:0;
}

/* Date Separator */
.wa-date-sep{
  display:flex;align-items:center;justify-content:center;
  margin:12px 0;
}
.wa-date-sep span{
  background:var(--bg-teal);color:var(--text-2);
  font-size:.75rem;padding:4px 10px;border-radius:8px;
  box-shadow:var(--shadow);
}

/* ── Message Bubbles ─────────────────────────────────── */
.wa-msg-wrap{
  display:flex;flex-direction:column;
  margin-bottom:2px;max-width:65%;
}
.wa-msg-wrap.out{align-self:flex-end;align-items:flex-end}
.wa-msg-wrap.in{align-self:flex-start;align-items:flex-start}

.wa-bubble{
  padding:6px 7px 8px 9px;
  border-radius:7.5px;
  position:relative;
  box-shadow:var(--shadow);
  word-wrap:break-word;word-break:break-word;
}
.wa-bubble.out{background:var(--bg-msg-out);border-radius:7.5px 0 7.5px 7.5px}
.wa-bubble.in{background:var(--bg-msg-in);border-radius:0 7.5px 7.5px 7.5px}

/* Bubble tail */
.wa-bubble.out::before{
  content:'';position:absolute;top:0;right:-8px;
  border-top:8px solid var(--bg-msg-out);
  border-right:8px solid transparent;
}
.wa-bubble.in::before{
  content:'';position:absolute;top:0;left:-8px;
  border-top:8px solid var(--bg-msg-in);
  border-left:8px solid transparent;
}
/* No tail for consecutive messages from same sender */
.wa-bubble.no-tail::before{display:none}
.wa-bubble.out.no-tail{border-radius:7.5px}
.wa-bubble.in.no-tail{border-radius:7.5px}

.wa-bubble__text{font-size:.9375rem;color:var(--text);line-height:1.5}
.wa-bubble__meta{
  display:flex;align-items:center;justify-content:flex-end;
  gap:4px;margin-top:2px;float:right;margin-left:12px;
}
.wa-bubble__time{font-size:.6875rem;color:rgba(233,237,239,.6)}
.wa-bubble.in .wa-bubble__time{color:var(--text-3)}

/* Check marks */
.wa-ticks{display:inline-flex;align-items:center;vertical-align:middle;color:var(--text-3)}
.wa-ticks svg{flex-shrink:0}
.wa-ticks.delivered{color:var(--text-3)}
.wa-ticks.read{color:var(--blue-tick)}

/* Quoted message */
.wa-quote{
  background:rgba(0,0,0,.15);border-left:3px solid var(--green);
  border-radius:4px;padding:6px 8px;margin-bottom:4px;cursor:pointer;
}
.wa-quote__author{font-size:.8125rem;color:var(--green);font-weight:500;margin-bottom:2px}
.wa-quote__text{font-size:.8125rem;color:var(--text-2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* Image message */
.wa-bubble-img{
  border-radius:6px;max-width:100%;max-height:300px;
  object-fit:cover;display:block;cursor:pointer;
}

/* Audio message */
.wa-audio{display:flex;align-items:center;gap:8px;padding:0 2px;min-width:180px}
.wa-audio__play{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wa-audio__wave{flex:1;height:30px;display:flex;align-items:center;gap:1px}
.wa-audio__bar{flex:1;background:rgba(255,255,255,.3);border-radius:1px;transition:height .1s}

/* Typing indicator */
.wa-typing{
  align-self:flex-start;padding:12px 14px;
  background:var(--bg-msg-in);border-radius:7.5px;
  display:flex;gap:4px;align-items:center;
}
.wa-typing span{
  width:8px;height:8px;border-radius:50%;
  background:var(--text-2);animation:typing 1.2s infinite;
}
.wa-typing span:nth-child(2){animation-delay:.2s}
.wa-typing span:nth-child(3){animation-delay:.4s}
@keyframes typing{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-6px);opacity:1}}

/* ── Input Bar ───────────────────────────────────────── */
.wa-input-bar{
  display:flex;align-items:flex-end;gap:8px;
  padding:6px 16px 10px;
  background:var(--bg-panel);flex-shrink:0;
  border-top:1px solid var(--border);
}
.wa-input-wrap{
  flex:1;background:var(--bg-input);
  border-radius:21px;padding:9px 14px;
  max-height:200px;overflow-y:auto;position:relative;
}
.wa-input-field{
  min-height:22px;max-height:130px;overflow-y:auto;
  color:var(--text);font-size:.9375rem;line-height:1.4;
  white-space:pre-wrap;word-break:break-word;
}
.wa-input-field:empty::before{
  content:attr(data-placeholder);
  color:var(--text-2);pointer-events:none;
}
.wa-send-btn{
  width:52px;height:52px;border-radius:50%;flex-shrink:0;
  background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.wa-send-btn:hover{background:var(--green-dark);transform:scale(1.05)}
.wa-send-btn svg{width:22px;height:22px}

/* Emoji picker bar */
.wa-emoji-quick{
  display:none;flex-wrap:wrap;gap:6px;padding:8px 16px;
  background:var(--bg-panel);border-top:1px solid var(--border);
}
.wa-emoji-quick.open{display:flex}
.wa-emoji-quick button{font-size:1.3rem;padding:4px;border-radius:4px;transition:background .1s}
.wa-emoji-quick button:hover{background:var(--bg-hover)}

/* ── Attach Menu ─────────────────────────────────────── */
.wa-attach-menu{
  position:absolute;bottom:70px;left:50px;
  background:var(--bg-teal);border-radius:12px;
  padding:8px 0;box-shadow:0 8px 24px rgba(0,0,0,.4);
  display:none;z-index:100;min-width:160px;
  animation:popUp .15s ease;
}
.wa-attach-menu.open{display:block}
@keyframes popUp{from{opacity:0;transform:scale(.9) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
.wa-attach-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;cursor:pointer;transition:background .1s;
  font-size:.875rem;color:var(--text-2);
}
.wa-attach-item:hover{background:var(--bg-hover);color:var(--text)}
.wa-attach-item svg{width:18px;height:18px;color:var(--green)}

/* ══════════════════════════════════════════════════════
   RIGHT INFO PANEL
   ══════════════════════════════════════════════════════ */
.wa-info{
  width:380px;min-width:380px;
  display:none;flex-direction:column;
  background:var(--bg-panel);
  border-left:1px solid var(--border);
  overflow-y:auto;
}
.wa-info.open{display:flex}

.wa-info-hdr{
  display:flex;align-items:center;gap:12px;
  padding:0 16px;height:var(--hdr-h);
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.wa-info-hdr h3{font-size:1rem;font-weight:500;color:var(--text);flex:1}

.wa-info-hero{
  display:flex;flex-direction:column;align-items:center;
  padding:24px 16px 16px;border-bottom:1px solid var(--border);
}
.wa-info-hero__name{font-size:1.1875rem;font-weight:500;color:var(--text);margin-top:10px}
.wa-info-hero__phone{font-size:.875rem;color:var(--text-2);margin-top:2px}
.wa-info-actions{display:flex;gap:16px;margin-top:16px}
.wa-info-action{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.6875rem;color:var(--text-2)}
.wa-info-action .wa-icon-btn{background:var(--bg-teal)}

.wa-info-section{border-bottom:1px solid var(--border);padding:16px}
.wa-info-section h4{font-size:.8125rem;color:var(--green);font-weight:600;margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px}
.wa-info-row{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:.875rem;color:var(--text-2)}
.wa-info-row svg{width:16px;height:16px;flex-shrink:0;color:var(--text-3)}

/* Label Chip */
.wa-label{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 8px;border-radius:10px;font-size:.75rem;font-weight:500;
}

/* ══════════════════════════════════════════════════════
   MOBILE RESPONSIVE  (≤ 768px)
   ══════════════════════════════════════════════════════ */
@media (max-width:768px){
  .wa-sidebar{
    width:100%;min-width:100%;
    position:absolute;top:0;left:0;bottom:0;
    transform:translateX(0);
    transition:transform .25s cubic-bezier(.4,0,.2,1);
  }
  .wa-sidebar.slide-out{transform:translateX(-100%)}

  .wa-main{position:absolute;top:0;left:0;right:0;bottom:0;transform:translateX(100%);transition:transform .25s cubic-bezier(.4,0,.2,1)}
  .wa-main.slide-in{transform:translateX(0)}

  .wa-info{position:fixed;inset:0;width:100%;min-width:100%;z-index:20;display:none}
  .wa-info.open{display:flex}

  .wa-back-btn{display:flex}
  .wa-messages{padding:12px 3% 8px}
  .wa-msg-wrap{max-width:82%}
}

/* ══════════════════════════════════════════════════════
   UTILITIES
   ══════════════════════════════════════════════════════ */
.hidden{display:none!important}
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Context Menu */
.wa-ctx-menu{
  position:fixed;background:var(--bg-teal);
  border-radius:8px;padding:4px 0;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  z-index:1000;min-width:160px;display:none;
}
.wa-ctx-menu.open{display:block;animation:popUp .15s ease}
.wa-ctx-item{padding:10px 16px;font-size:.875rem;color:var(--text-2);cursor:pointer;transition:background .1s}
.wa-ctx-item:hover{background:var(--bg-hover);color:var(--text)}
.wa-ctx-item.danger{color:#F44336}

/* Toast notification */
.wa-toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--bg-teal);color:var(--text);
  padding:10px 20px;border-radius:8px;font-size:.875rem;
  box-shadow:0 4px 16px rgba(0,0,0,.4);z-index:2000;
  animation:toastIn .25s ease;pointer-events:none;
}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* Message appear animation */
.wa-msg-wrap{animation:msgIn .18s ease}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ── Mobile Layouts for Admin/Settings (≤ 768px) ── */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  color: #e6edf3;
  cursor: pointer;
  padding: 8px;
  margin-right: 12px;
  align-items: center;
  justify-content: center;
}
.mobile-menu-toggle svg {
  width: 24px;
  height: 24px;
}
.mobile-menu-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.65);
  z-index: 999;
  display: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.mobile-menu-overlay.show {
  display: block;
}
.mobile-topbar-nav {
  display: none;
  align-items: center;
  height: 60px;
  background: #161b22;
  border-bottom: 1px solid #30363d;
  padding: 0 16px;
  position: sticky;
  top: 0;
  z-index: 998;
  width: 100%;
}
.mobile-topbar-title {
  font-weight: 700;
  font-size: 1.1rem;
  color: #e6edf3;
  margin-left: 8px;
}

/* ── Sidebar de admin compartido (_sidebar.php) — estilos DESKTOP ──────────────
   Las páginas con nav inline (dashboard, etc.) ya definen esto en su propio <style>.
   Estas reglas globales dan estilo a las vistas que incluyen el partial _sidebar.php
   (ai-agents, orders, catalog, reviews, store, payment-gateways, wordpress...).
   Scopeadas bajo .admin-nav para no afectar otros componentes. Valores idénticos a
   los inline, así que no cambian visualmente las páginas que ya los tenían.
   Añadido 2026-05-29 para corregir el sidebar sin estilo (SVG gigante). */
.admin-nav {
  width: 220px; flex-shrink: 0; background: #161b22; border-right: 1px solid #30363d;
  display: flex; flex-direction: column; padding: 24px 0; overflow-y: auto; min-height: 0;
}
.admin-nav .admin-brand { display: flex; align-items: center; gap: 10px; padding: 0 20px 24px; border-bottom: 1px solid #30363d; margin-bottom: 16px; }
.admin-nav .admin-brand-logo { width: 34px; height: 34px; background: linear-gradient(135deg, #00a884, #007a62); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.admin-nav .admin-brand-logo svg { width: 20px; height: 20px; color: #fff; }
.admin-nav .admin-brand-name { font-weight: 700; font-size: 1rem; color: #e6edf3; }
.admin-nav .admin-brand-sub  { font-size: 0.72rem; color: #8b949e; }
.admin-nav .nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 20px; font-size: 0.875rem; color: #8b949e; text-decoration: none; transition: all 0.15s; cursor: pointer; border: none; background: none; width: 100%; text-align: left; }
.admin-nav .nav-item:hover { background: rgba(255,255,255,0.04); color: #e6edf3; }
.admin-nav .nav-item.active { background: rgba(0,168,132,0.12); color: #00a884; border-right: 2px solid #00a884; }
.admin-nav .nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.admin-nav .nav-section-title { font-size: 0.68rem; font-weight: 600; color: #484f58; text-transform: uppercase; letter-spacing: 0.08em; padding: 16px 20px 6px; }

@media (max-width: 768px) {
  .admin-shell, .settings-wrap {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }
  .admin-nav, .settings-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 1000 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    width: 260px !important;
    box-shadow: 0 0 24px rgba(0,0,0,0.6) !important;
    height: 100vh !important;
    background: #161b22 !important;
  }
  .admin-nav.mobile-open, .settings-sidebar.mobile-open {
    transform: translateX(0) !important;
  }
  .admin-brand, .settings-sidebar .s-title:first-child {
    display: none !important;
  }
  .admin-topbar {
    padding: 0 16px !important;
    justify-content: flex-start !important;
    gap: 12px !important;
  }
  .admin-topbar-actions {
    margin-left: auto !important;
  }
  .mobile-menu-toggle {
    display: inline-flex !important;
  }
  .mobile-menu-close-row {
    display: flex !important;
  }
  .mobile-topbar-nav {
    display: flex !important;
  }
  .admin-content, .settings-main {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 16px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .metrics-grid, .stats-grid {
    grid-template-columns: 1fr !important;
  }
  .dash-row, .dash-row-3 {
    grid-template-columns: 1fr !important;
  }
  .crm-panel {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    z-index: 1000 !important;
    height: 100vh !important;
  }
  /* Chat header and footer mobile enhancements */
  .wa-chat-hdr__sub {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .wa-badge-prefix {
    display: none !important;
  }
  .wa-badge-separator {
    display: none !important;
  }
  .wa-input-container {
    gap: 4px !important;
  }
  .wa-mobile-plus-btn {
    display: inline-flex !important;
  }
  .wa-emoji-btn {
    display: none !important;
  }
  .wa-attach-btn, .wa-qr-btn {
    display: none !important;
  }
  .mobile-menu-active .wa-attach-btn,
  .mobile-menu-active .wa-qr-btn {
    display: inline-flex !important;
  }
  .wa-input-container .wa-icon-btn {
    width: 32px !important;
    height: 32px !important;
  }
  .wa-input-container .wa-icon-btn svg {
    width: 18px !important;
    height: 18px !important;
  }
  .wa-send-btn {
    width: 42px !important;
    height: 42px !important;
  }
  .wa-send-btn svg {
    width: 18px !important;
    height: 18px !important;
  }
}

/* Typing dots animation (inline indicator) */
.typing-dots { display: inline-flex; align-items: center; gap: 3px; }
.typing-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-2);
  animation: typing-dot 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes typing-dot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1; }
}