/* ═══════════════════════════════════════════════════════
   COMUNAPPS WA — DESIGN SYSTEM v3.0
   Stack: vanilla CSS, dark theme, WhatsApp-inspired
   ═══════════════════════════════════════════════════════ */

/* ─── 1. CSS VARIABLES ──────────────────────────────── */
:root {
  /* Brand */
  --wa-green:        #25d366;
  --wa-green-dark:   #1ebe5d;
  --wa-green-light:  rgba(37,211,102,.12);

  /* Dark backgrounds */
  --bg-app:          #111b21;
  --bg-sidebar:      #111b21;
  --bg-panel:        #202c33;
  --bg-hover:        #2a3942;
  --bg-active:       #2a3942;
  --bg-input:        #2a3942;
  --bg-msg-in:       #202c33;
  --bg-msg-out:      #005c4b;
  --bg-chat-area:    #0b141a;
  --bg-header:       #202c33;
  --bg-modal:        #233138;

  /* Light area (chat body background pattern) */
  --bg-chat-pattern: #0b141a;

  /* Text */
  --txt-primary:     #e9edef;
  --txt-secondary:   #8696a0;
  --txt-muted:       #667781;
  --txt-on-green:    #111b21;

  /* Borders */
  --border:          rgba(255,255,255,.06);
  --border-strong:   rgba(255,255,255,.10);

  /* Semantic */
  --clr-success:     #00a884;
  --clr-warning:     #f0a500;
  --clr-danger:      #f15c6d;
  --clr-info:        #53bdeb;

  /* Media type colors */
  --clr-img:         #7c3aed;
  --clr-vid:         #dc2626;
  --clr-aud:         #d97706;
  --clr-doc:         #0369a1;

  /* Channel colors (CRM omnicanal) */
  --ch-whatsapp:     #25d366;
  --ch-sms:          #9333ea;
  --ch-instagram:    #e1306c;
  --ch-messenger:    #0084ff;
  --ch-email:        #8696a0;

  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;  --sp-10: 40px;

  /* Radius */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,.4);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.5);

  /* Transitions */
  --t-fast:  120ms ease;
  --t-base:  200ms ease;
  --t-slow:  300ms cubic-bezier(.4,0,.2,1);

  /* Layout */
  --rail-w:     60px;
  --rail-w-exp: 220px;
  --panel-w:    300px;
  --sidebar-w:  360px;

  /* Z-index */
  --z-menu:     100;
  --z-preview:  200;
  --z-overlay:  500;
  --z-lightbox: 600;
  --z-toast:    700;
}

/* ─── 2. RESET & BASE ────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; font-size: 15px; }

body {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
  background: var(--bg-app);
  color: var(--txt-primary);
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

button { cursor: pointer; border: none; background: transparent; font: inherit; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
ul, ol { list-style: none; }

:focus-visible { outline: 2px solid var(--wa-green); outline-offset: 2px; }
*:focus { outline: none; }

/* ─── 3. SCROLLBAR ───────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.18); }

/* ─── 4. LAYOUT ──────────────────────────────────────── */
#app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh;
  overflow: hidden;
  transition: grid-template-columns 0.22s cubic-bezier(.4,0,.2,1);
}
#app.rail-expanded {
  grid-template-columns: calc(var(--rail-w-exp) + var(--panel-w)) 1fr;
}

/* ─── 5. SIDEBAR ─────────────────────────────────────── */
.sidebar {
  display: flex;
  flex-direction: row;   /* ← rail + panel side-by-side */
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  overflow: hidden;
  height: 100vh;
}

/* ── NAV RAIL ────────────────────────────────────────── */
.nav-rail {
  width: var(--rail-w);
  min-width: var(--rail-w);
  display: flex;
  flex-direction: column;
  background: #0d1419;
  border-right: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
  transition: width 0.22s cubic-bezier(.4,0,.2,1),
              min-width 0.22s cubic-bezier(.4,0,.2,1);
}
#app.rail-expanded .nav-rail {
  width: var(--rail-w-exp);
  min-width: var(--rail-w-exp);
}

/* Rail label: hidden when collapsed, revealed when expanded */
.rail-label {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: .83rem;
  transition: opacity 0.18s ease, max-width 0.22s ease;
  pointer-events: none;
}
#app.rail-expanded .rail-label {
  opacity: 1;
  max-width: 160px;
  pointer-events: auto;
}

/* Rail top: brand + toggle */
.rail-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 8px;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#app.rail-expanded .rail-top {
  flex-direction: row;
  align-items: center;
  padding: 10px 12px 8px;
  justify-content: space-between;
}

.rail-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

.brand-icon {
  width: 34px; height: 34px;
  background: var(--wa-green);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--txt-on-green);
  flex-shrink: 0;
}

.brand-name {
  font-size: .88rem;
  font-weight: 700;
  color: var(--txt-primary);
  letter-spacing: -.2px;
}

.rail-toggle-btn {
  width: 34px; height: 34px;
  border-radius: 8px;
  display: grid; place-items: center;
  color: var(--txt-muted);
  transition: background var(--t-fast), color var(--t-fast);
  flex-shrink: 0;
}
.rail-toggle-btn:hover { background: var(--bg-hover); color: var(--txt-secondary); }

/* Rail modules list */
.rail-modules {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 8px 0;
  gap: 2px;
  overflow: hidden;
}

/* Rail button (module item) */
.rail-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 0;
  padding-left: 19px;
  color: var(--txt-muted);
  border-radius: 0;
  transition: background var(--t-fast), color var(--t-fast);
  position: relative;
  text-align: left;
}
.rail-btn::before {
  content: '';
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0;
  background: var(--wa-green);
  border-radius: 0 2px 2px 0;
  transition: height 0.15s ease;
}
.rail-btn:hover { background: rgba(255,255,255,.05); color: var(--txt-secondary); }
.rail-btn.active { color: var(--wa-green); }
.rail-btn.active::before { height: 28px; }

.rail-btn-icon {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rail-btn-icon .user-initials {
  width: 28px; height: 28px;
  font-size: .72rem;
}

/* Rail bottom: user */
.rail-bottom {
  border-top: 1px solid var(--border);
  padding: 8px 0;
  flex-shrink: 0;
}
.rail-user-btn { padding: 10px 0 10px 17px; }

/* User dropdown anchored at bottom-left of rail */
.user-dropdown--rail {
  position: fixed;
  left: calc(var(--rail-w) + 4px);
  bottom: 12px;
  top: auto;
  right: auto;
  min-width: 220px;
  transition: left 0.22s cubic-bezier(.4,0,.2,1);
}
#app.rail-expanded .user-dropdown--rail {
  left: calc(var(--rail-w-exp) + 4px);
}

/* Sidebar panel (content area) */
.sidebar-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--bg-sidebar);
}

/* Legacy compat */
.header-actions { display: flex; gap: var(--sp-1); }

/* Icon button (shared) */
.icon-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--txt-secondary);
  transition: background var(--t-fast), color var(--t-fast);
  flex-shrink: 0;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--txt-primary); }
.icon-btn:active { background: var(--bg-active); }

/* Instance + status bar */
.instance-status-bar {
  background: var(--bg-panel);
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  flex-shrink: 0;
}

.status-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: .78rem;
}

.status-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background var(--t-base);
}
.status-dot[data-status="connected"]    { background: var(--clr-success); box-shadow: 0 0 6px var(--clr-success); }
.status-dot[data-status="qr_pending"]   { background: var(--clr-warning); animation: pulse-dot 1.5s infinite; }
.status-dot[data-status="initializing"] { background: var(--clr-info);    animation: pulse-dot 1.5s infinite; }
.status-dot[data-status="disconnected"] { background: var(--txt-muted); }

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}

.status-label { color: var(--txt-secondary); }
.phone-tag { color: var(--wa-green); font-weight: 500; margin-left: auto; }

.instance-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.instance-icon { color: var(--txt-muted); flex-shrink: 0; }

.instance-select {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--txt-primary);
  padding: 3px var(--sp-2);
  font-size: .82rem;
  cursor: pointer;
  transition: border-color var(--t-fast);
}
.instance-select:hover { border-color: var(--border-strong); }
.instance-select:focus { border-color: var(--wa-green); }
.instance-select option { background: var(--bg-panel); }

/* Search bar */
.search-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--bg-panel);
  margin: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  transition: border-color var(--t-fast);
  flex-shrink: 0;
}
.search-bar:focus-within { border-color: var(--wa-green); }
.search-icon { color: var(--txt-muted); flex-shrink: 0; }
#chat-search {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--txt-primary);
  font-size: .88rem;
}
#chat-search::placeholder { color: var(--txt-muted); }

/* Chat filters */
.chat-filters {
  display: flex;
  gap: 6px;
  padding: 4px 12px 8px;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.chat-filters::-webkit-scrollbar { display: none; }

.chat-filter-btn {
  flex-shrink: 0;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: .78rem;
  font-weight: 500;
  color: var(--txt-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.chat-filter-btn:hover {
  background: var(--bg-hover);
  color: var(--txt-primary);
  border-color: var(--border-strong);
}
.chat-filter-btn.active {
  background: var(--wa-green-light);
  color: var(--wa-green);
  border-color: var(--wa-green);
  font-weight: 600;
}

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

.list-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-8) var(--sp-4);
  color: var(--txt-muted);
  font-size: .85rem;
}

/* Spinner */
.spinner {
  width: 24px; height: 24px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--wa-green);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Chat list item */
.chat-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast);
  position: relative;
}
.chat-item:hover  { background: var(--bg-hover); }
.chat-item.active { background: var(--bg-active); }
.chat-item:last-child { border-bottom: none; }

.chat-item-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--bg-hover);
  display: grid; place-items: center;
  font-size: 1rem; font-weight: 600;
  color: var(--txt-primary);
  flex-shrink: 0;
  text-transform: uppercase;
  user-select: none;
}

.chat-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-item-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
}

.chat-item-name {
  font-size: .88rem;
  font-weight: 500;
  color: var(--txt-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-item-time {
  font-size: .73rem;
  color: var(--txt-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.chat-item-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
}

.chat-item-preview {
  font-size: .82rem;
  color: var(--txt-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
}
.chat-item-preview .type-icon { flex-shrink: 0; opacity: .6; }

.chat-item-badge {
  background: var(--wa-green);
  color: var(--txt-on-green);
  border-radius: var(--r-full);
  min-width: 19px; height: 19px;
  padding: 0 5px;
  font-size: .72rem;
  font-weight: 700;
  display: grid; place-items: center;
  flex-shrink: 0;
}

.chat-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-10) var(--sp-4);
  color: var(--txt-muted);
  text-align: center;
}
.chat-empty-state svg { opacity: .3; }
.chat-empty-state p { font-size: .85rem; }

/* ─── 6. MAIN AREA ───────────────────────────────────── */
.main {
  display: flex;
  flex-direction: column;
  background: var(--bg-chat-pattern);
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* Welcome pane */
.welcome-pane {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-chat-pattern);
  /* Chat pattern overlay */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M0 0h80v80H0z' fill='%230b141a'/%3E%3Cpath d='M20 20h4v4h-4zm8 0h4v4h-4zm8 0h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4zm8 0h4v4h-4zm-16 8h4v4h-4zm8 0h4v4h-4zm8 0h4v4h-4zm-16-16h4v4h-4z' fill='%23ffffff' fill-opacity='0.015'/%3E%3C/svg%3E");
}

.welcome-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  text-align: center;
  padding: var(--sp-8);
  max-width: 420px;
}

.welcome-logo { animation: fadeInUp .6s ease-out; }

.welcome-body h2 {
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--txt-primary);
  letter-spacing: -.3px;
}

.welcome-subtitle {
  font-size: .88rem;
  color: var(--txt-secondary);
}

.welcome-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  margin-top: var(--sp-2);
}

.feature-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 5px var(--sp-3);
  font-size: .78rem;
  color: var(--txt-secondary);
}
.feature-pill svg { color: var(--wa-green); }

/* Chat pane */
.chat-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ─── 7. CHAT HEADER ─────────────────────────────────── */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-header);
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--border);
  min-height: 56px;
  flex-shrink: 0;
}

.chat-header-left {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  cursor: pointer;
  border-radius: 8px;
  padding: 2px 6px;
  margin: -2px -6px;
  transition: background .15s;
}
.chat-header-left:hover { background: var(--bg-hover); }

.back-btn { display: none; }

.chat-avatar-sm {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg-hover);
  display: grid; place-items: center;
  font-size: .9rem; font-weight: 600;
  color: var(--txt-primary);
  flex-shrink: 0;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}

.chat-header-meta { min-width: 0; }

.chat-header-name {
  font-size: .93rem;
  font-weight: 500;
  color: var(--txt-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-header-status {
  font-size: .78rem;
  color: var(--txt-secondary);
}

.chat-header-right { display: flex; gap: var(--sp-1); flex-shrink: 0; }

/* ─── Barra de búsqueda en la conversación ─── */
.chat-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-search-bar.hidden { display: none; }
.chat-search-icon { color: var(--txt-muted); flex-shrink: 0; }
#chat-search-input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border-main);
  border-radius: 18px;
  padding: 7px 14px;
  color: var(--txt-primary);
  font-size: .9rem;
  outline: none;
}
#chat-search-input:focus { border-color: var(--wa-green); }
.chat-search-count { font-size: .8rem; color: var(--txt-muted); min-width: 42px; text-align: center; }
.chat-search-nav, .chat-search-close { width: 32px; height: 32px; color: var(--txt-secondary); }

/* Resaltado de coincidencias de búsqueda en los mensajes */
.msg-search-hit .msg-bubble { box-shadow: 0 0 0 2px rgba(37,211,102,.45); }
.msg-search-current .msg-bubble {
  box-shadow: 0 0 0 2px var(--wa-green);
  background: rgba(37,211,102,.12);
}

/* ─── 8. MESSAGES AREA ───────────────────────────────── */
.messages-area {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-4) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Pattern background like WhatsApp */
  background-color: var(--bg-chat-pattern);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M0 0h80v80H0z' fill='%230b141a'/%3E%3Cpath d='M20 20h4v4h-4zm8 0h4v4h-4zm8 0h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4zm8 0h4v4h-4zm-16 8h4v4h-4zm8 0h4v4h-4zm8 0h4v4h-4zm-16-16h4v4h-4z' fill='%23ffffff' fill-opacity='0.015'/%3E%3C/svg%3E");
}

/* Date divider */
.msg-date-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--sp-4) 0 var(--sp-2);
}
.msg-date-divider span {
  background: rgba(17,27,33,.85);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 4px var(--sp-3);
  font-size: .72rem;
  color: var(--txt-secondary);
  letter-spacing: .3px;
}

/* Message row */
.msg-row {
  display: flex;
  margin-bottom: 2px;
  animation: msgIn .15s ease-out;
}
@keyframes msgIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.msg-row.out { justify-content: flex-end; }
.msg-row.in  { justify-content: flex-start; }

/* ── Group message layout: avatar + bubble column ── */
.msg-row.group-msg {
  align-items: flex-end;
  gap: 6px;
}

/* Sender avatar (32px circle) */
.msg-group-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  overflow: hidden;
  cursor: pointer;
  transition: opacity .15s;
}

.msg-group-av:hover { opacity: .85; }

.msg-group-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Placeholder to keep alignment for consecutive msgs */
.msg-group-av-ph {
  width: 32px;
  flex-shrink: 0;
}

/* Consecutive messages: tighter spacing, no top margin */
.msg-row.consecutive {
  margin-bottom: 1px;
}

.msg-row.consecutive .msg-bubble {
  border-radius: var(--r-lg) !important; /* all corners rounded for consecutive */
}

/* First message of a block: tail on bottom corner */
.msg-row.in:not(.consecutive) .msg-bubble {
  border-bottom-left-radius: 4px;
}

/* Last message margin before new sender */
.msg-row.in:not(.consecutive) + .msg-row.in.consecutive:last-child,
.msg-row.group-msg:not(.consecutive) {
  margin-top: 6px;
}

/* Message bubble */
.msg-bubble {
  max-width: 65%;
  min-width: 80px;
  border-radius: var(--r-lg);
  padding: var(--sp-2) var(--sp-3);
  position: relative;
  word-break: break-word;
  box-shadow: var(--shadow-sm);
}

.msg-row.out .msg-bubble {
  background: var(--bg-msg-out);
  color: var(--txt-primary);
  border-bottom-right-radius: 4px;
}
.msg-row.in .msg-bubble {
  background: var(--bg-msg-in);
  color: var(--txt-primary);
  border-bottom-left-radius: 4px;
}

/* Group message bubble: remove left tail on consecutive */
.msg-row.group-msg.consecutive .msg-bubble {
  border-bottom-left-radius: var(--r-lg);
}

/* ── Text message ── */
.msg-sender-name {
  font-size: .76rem;
  font-weight: 700;
  margin-bottom: 3px;
  line-height: 1.2;
}

/* Respuesta citada (reply) dentro de la burbuja, estilo WhatsApp */
.msg-quoted {
  display: block;
  border-left: 4px solid var(--wa-green);
  border-radius: 4px;
  background: rgba(0,0,0,.18);
  padding: 5px 8px;
  margin-bottom: 4px;
  max-width: 100%;
  overflow: hidden;
}
.msg-quoted-sender {
  font-size: .76rem;
  font-weight: 700;
  color: var(--wa-green);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-quoted-text {
  font-size: .82rem;
  color: var(--txt-secondary);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* En burbujas salientes el verde se ve mal sobre verde → usar un tono neutro */
.msg-row.out .msg-quoted { background: rgba(0,0,0,.12); }

/* Profile pic in chat avatar */
.chat-item-avatar img,
.chat-avatar-sm img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.msg-text {
  font-size: .9rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

/* ── Enlaces dentro del mensaje (clicables, como WhatsApp Web) ── */
.msg-link {
  color: #53bdeb;
  text-decoration: underline;
  word-break: break-all;
}
.msg-row.out .msg-link { color: #0a6aa1; }

/* ── Tarjeta de vista previa de enlace (Open Graph) ── */
.msg-link-preview {
  display: block;
  margin-bottom: 5px;
  border-radius: var(--r-md, 8px);
  overflow: hidden;
  background: rgba(0,0,0,.18);
  border-left: 3px solid var(--wa-green);
  text-decoration: none;
  color: inherit;
  max-width: 330px;
}
.msg-link-preview:hover { background: rgba(0,0,0,.26); }
.msg-row.out .msg-link-preview { background: rgba(0,0,0,.10); }
.msg-row.out .msg-link-preview:hover { background: rgba(0,0,0,.16); }
.lp-img { line-height: 0; }
.lp-img img {
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: cover;
}
.lp-body { padding: 7px 10px; }
.lp-title {
  font-size: .84rem;
  font-weight: 600;
  color: var(--txt-primary, #e9edef);
  margin-bottom: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lp-desc {
  font-size: .78rem;
  color: var(--txt-secondary, #aebac1);
  margin-bottom: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lp-domain {
  font-size: .72rem;
  color: var(--txt-muted, #8696a0);
  text-transform: lowercase;
}

/* ── Message meta (time + status) ── */
.msg-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 3px;
}
.msg-time {
  font-size: .68rem;
  color: var(--txt-muted);
  white-space: nowrap;
}
.msg-status { display: flex; align-items: center; }
.msg-status svg { color: var(--txt-muted); }
.msg-status.read svg { color: var(--clr-info); }

/* ── Image message ── */
/* Dimensiones tipo WhatsApp: ancho ~330px y alto ~400px máximos, preservando proporción
   (sin estirar las fotos verticales) y sin ampliar las pequeñas más allá de su tamaño real. */
.msg-img-wrap {
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: zoom-in;
  max-width: 330px;
  position: relative;
  line-height: 0;
}
.msg-img-wrap img {
  display: block;
  max-width: 330px;
  max-height: 400px;
  width: auto;
  height: auto;
  transition: opacity var(--t-fast);
}
.msg-img-wrap:hover img { opacity: .9; }
.msg-img-caption {
  font-size: .82rem;
  color: var(--txt-secondary);
  padding: var(--sp-1) 0;
}

/* ── Video message ── */
.msg-video-wrap {
  border-radius: var(--r-md);
  overflow: hidden;
  max-width: 330px;
  background: #000;
  position: relative;
}
.msg-video-wrap video {
  width: 100%;
  max-height: 400px;
  display: block;
}
.msg-video-caption {
  font-size: .82rem;
  color: var(--txt-secondary);
  padding: var(--sp-1) 0;
}

/* ── Audio message ── */
.msg-audio-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 220px;
  max-width: 320px;
  padding: var(--sp-2) 0;
}
.audio-play-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--wa-green);
  display: grid; place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-fast);
  color: var(--txt-on-green);
  border: none;
}
.audio-play-btn:hover { background: var(--wa-green-dark); }
.audio-progress-wrap { flex: 1; }
.audio-bar {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,.15);
  border-radius: var(--r-full);
  cursor: pointer;
  position: relative;
  margin-bottom: 4px;
}
.audio-bar-fill {
  height: 100%;
  background: var(--wa-green);
  border-radius: var(--r-full);
  pointer-events: none;
  transition: width .1s linear;
}
.audio-time {
  font-size: .7rem;
  color: var(--txt-muted);
}

/* ── Document message ── */
.msg-doc-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-1) 0;
  min-width: 220px;
}
.doc-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--clr-doc);
  flex-shrink: 0;
}
.doc-info { flex: 1; min-width: 0; }
.doc-name {
  font-size: .84rem;
  font-weight: 500;
  color: var(--txt-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-size { font-size: .74rem; color: var(--txt-muted); }
.doc-dl-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--txt-primary);
  transition: background var(--t-fast);
  text-decoration: none;
  flex-shrink: 0;
}
.doc-dl-btn:hover { background: rgba(255,255,255,.15); }

/* ── Media type placeholder (for unknown media) ── */
.msg-media-placeholder {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) 0;
  color: var(--txt-secondary);
  font-size: .84rem;
  font-style: italic;
}
.msg-media-placeholder svg { opacity: .6; flex-shrink: 0; }

/* ─── 9. MEDIA PREVIEW BAR ───────────────────────────── */
.media-preview-bar {
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
  z-index: var(--z-preview);
  animation: slideUp .2s ease-out;
}
@keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.cancel-preview-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--txt-secondary);
  transition: background var(--t-fast), color var(--t-fast);
  flex-shrink: 0;
}
.cancel-preview-btn:hover { background: var(--bg-hover); color: var(--clr-danger); }

.preview-thumb {
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-hover);
  flex-shrink: 0;
  display: grid; place-items: center;
}
.preview-thumb img { width: 100%; height: 100%; object-fit: cover; }
.preview-thumb video { width: 100%; height: 100%; object-fit: cover; }
.preview-thumb .prev-icon { color: var(--txt-secondary); }

.preview-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.preview-filename {
  font-size: .82rem;
  color: var(--txt-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}
.preview-filesize { font-size: .74rem; color: var(--txt-muted); }

.caption-input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: var(--sp-2) var(--sp-4);
  color: var(--txt-primary);
  font-size: .88rem;
  min-width: 0;
  transition: border-color var(--t-fast);
}
.caption-input::placeholder { color: var(--txt-muted); }
.caption-input:focus { border-color: var(--wa-green); }

.btn-send-media {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--wa-green);
  color: var(--txt-on-green);
  border-radius: var(--r-full);
  padding: var(--sp-2) var(--sp-4);
  font-size: .84rem;
  font-weight: 600;
  transition: background var(--t-fast), transform var(--t-fast);
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-send-media:hover { background: var(--wa-green-dark); }
.btn-send-media:active { transform: scale(.97); }

/* ─── 10. INPUT FOOTER ───────────────────────────────── */
.input-footer {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2);
  background: var(--bg-panel);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* Banner solo-lectura para canales (newsletters) */
.channel-readonly {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: var(--bg-panel);
  color: var(--text-secondary);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  flex-shrink: 0;
}
.channel-readonly svg { opacity: 0.7; flex-shrink: 0; }

/* Check azul de canal verificado (junto al nombre, estilo WhatsApp) */
.verified-badge {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 3px;
  color: #1da1f2;
  flex-shrink: 0;
}

/* Attach wrapper */
.attach-wrap { position: relative; flex-shrink: 0; }

/* Attach menu — vertical popup estilo WhatsApp */
.attach-menu {
  position: absolute;
  bottom: 58px;
  left: 0;
  background: var(--bg-modal);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  min-width: 190px;
  box-shadow: var(--shadow-lg);
  z-index: var(--z-menu);
  animation: fadeInUp .15s ease-out;
  overflow: hidden;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.attach-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  cursor: pointer;
  font-size: .88rem;
  color: var(--txt-primary);
  transition: background var(--t-fast);
  user-select: none;
  border-radius: 0;
}
.attach-opt:hover { background: var(--bg-hover); }

.attach-opt-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
}

/* -- Emoji button ---------------------------------------- */
.emoji-btn { flex-shrink: 0; color: var(--txt-muted); transition: color var(--t-fast); }
.emoji-btn:hover, .emoji-btn.active { color: var(--wa-green); }

/* -- Emoji picker --------------------------------------- */
.emoji-picker-wrap {
  background: var(--bg-modal);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  max-height: 340px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.emoji-cat-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  padding: 0 4px;
}
.emoji-cat-btn {
  flex: 1;
  padding: 8px 4px;
  font-size: 1.1rem;
  border-bottom: 2px solid transparent;
  transition: border-color var(--t-fast), opacity var(--t-fast);
  opacity: .5;
  text-align: center;
}
.emoji-cat-btn:hover { opacity: .8; }
.emoji-cat-btn.active { border-bottom-color: var(--wa-green); opacity: 1; }

.emoji-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 10px 4px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 5px 12px;
  flex-shrink: 0;
}
#emoji-search {
  flex: 1; background: transparent; border: none;
  font-size: .83rem; color: var(--txt-primary);
}
#emoji-search::placeholder { color: var(--txt-muted); }

.emoji-section-label {
  font-size: .72rem; font-weight: 600; color: var(--txt-muted);
  text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 12px 2px; flex-shrink: 0;
}
.emoji-grid {
  display: flex; flex-wrap: wrap;
  padding: 4px 8px 8px; gap: 2px;
  overflow-y: auto; flex: 1;
}
.emoji-btn-item {
  width: 34px; height: 34px; font-size: 1.22rem;
  display: grid; place-items: center;
  border-radius: 6px; cursor: pointer;
  transition: background var(--t-fast), transform 80ms;
  flex-shrink: 0; line-height: 1;
}
.emoji-btn-item:hover { background: var(--bg-hover); transform: scale(1.2); }

/* -- Quick replies panel -------------------------------- */
.quick-reply-panel {
  background: var(--bg-modal);
  border-top: 1px solid var(--border);
  max-height: 220px; overflow-y: auto;
  flex-shrink: 0; animation: fadeInUp .12s ease-out;
}
.qr-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 16px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast);
}
.qr-item:last-child { border-bottom: none; }
.qr-item:hover { background: var(--bg-hover); }
.qr-shortcut { font-size: .75rem; font-weight: 700; color: var(--wa-green); }
.qr-text { font-size: .83rem; color: var(--txt-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* -- Mic & recording ------------------------------------ */
.mic-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg-panel);
  color: var(--txt-secondary);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background var(--t-fast), color var(--t-fast);
}
.mic-btn:hover { background: var(--wa-green-light); color: var(--wa-green); }
.mic-btn.recording {
  background: var(--clr-danger); color: white;
  animation: mic-pulse 1s ease-in-out infinite;
}
@keyframes mic-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.4); }
  50%      { box-shadow: 0 0 0 8px rgba(220,38,38,0); }
}
.recording-row { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.rec-pulse {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--clr-danger);
  animation: rec-blink 1s step-end infinite; flex-shrink: 0;
}
@keyframes rec-blink { 0%,100%{opacity:1} 50%{opacity:.2} }
.rec-timer { font-size: .83rem; font-weight: 600; color: var(--clr-danger); min-width: 36px; }


/* Textarea */
.text-input-wrap {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-2) var(--sp-4);
  transition: border-color var(--t-fast);
  min-width: 0;
}
.text-input-wrap:focus-within { border-color: var(--wa-green); }

.message-textarea {
  width: 100%;
  background: transparent;
  border: none;
  resize: none;
  color: var(--txt-primary);
  font-size: .9rem;
  line-height: 1.4;
  max-height: 120px;
  overflow-y: auto;
  display: block;
}
.message-textarea::placeholder { color: var(--txt-muted); }

/* Send button */
.send-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--wa-green);
  color: var(--txt-on-green);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  box-shadow: 0 2px 8px rgba(37,211,102,.3);
}
.send-btn:hover  { background: var(--wa-green-dark); box-shadow: 0 4px 14px rgba(37,211,102,.4); }
.send-btn:active { transform: scale(.94); }
.send-btn:disabled { background: var(--bg-hover); color: var(--txt-muted); box-shadow: none; cursor: not-allowed; }

/* ─── 11. MODALS / OVERLAYS ─────────────────────────── */
.overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(4px);
}

.modal-card {
  position: relative;
  background: var(--bg-modal);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  width: 90%;
  max-width: 480px;
  box-shadow: var(--shadow-lg);
  animation: scaleIn .2s ease-out;
  overflow: hidden;
}
@keyframes scaleIn { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }

.modal-card-sm { max-width: 380px; }

.modal-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.modal-card-header h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--txt-primary);
}

.modal-close-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--txt-secondary);
  transition: background var(--t-fast), color var(--t-fast);
}
.modal-close-btn:hover { background: var(--bg-hover); color: var(--txt-primary); }

.modal-card-body {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.modal-desc {
  font-size: .85rem;
  color: var(--txt-secondary);
  line-height: 1.5;
}

/* QR */
.qr-frame {
  background: white;
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  display: grid;
  place-items: center;
  min-height: 230px;
}
.qr-frame img { border-radius: var(--r-md); max-width: 200px; }

.qr-loading-msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  color: #555;
  font-size: .85rem;
}
.qr-loading-msg .spinner { border-top-color: var(--wa-green); border-color: rgba(0,0,0,.1); }

.qr-steps-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.qr-step-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: .84rem;
  color: var(--txt-secondary);
}
.step-badge {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--wa-green);
  color: var(--txt-on-green);
  display: grid; place-items: center;
  font-size: .72rem;
  font-weight: 700;
  flex-shrink: 0;
}
.qr-step-item strong { color: var(--txt-primary); }

.qr-status-msg {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  font-size: .82rem;
  text-align: center;
}
.qr-status-msg.connected { background: var(--wa-green-light); color: var(--wa-green); }
.qr-status-msg.warning   { background: rgba(240,165,0,.12); color: var(--clr-warning); }

/* Form */
.form-group { display: flex; flex-direction: column; gap: var(--sp-1); }
.form-label { font-size: .82rem; font-weight: 500; color: var(--txt-secondary); }
.form-input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  color: var(--txt-primary);
  font-size: .9rem;
  transition: border-color var(--t-fast);
}
.form-input::placeholder { color: var(--txt-muted); }
.form-input:focus { border-color: var(--wa-green); }
.form-hint { font-size: .75rem; color: var(--txt-muted); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  font-size: .88rem;
  font-weight: 600;
  transition: all var(--t-fast);
  cursor: pointer;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--wa-green); color: var(--txt-on-green); }
.btn-primary:hover:not(:disabled) { background: var(--wa-green-dark); }
.btn-full { width: 100%; }

/* ─── 12. LIGHTBOX ───────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.92);
}

.lightbox-close-btn {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  z-index: 1;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  display: grid; place-items: center;
  color: white;
  transition: background var(--t-fast);
}
.lightbox-close-btn:hover { background: rgba(255,255,255,.2); }

.lightbox-content {
  position: relative;
  z-index: 1;
  max-width: min(90vw, 900px);
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scaleIn .2s ease-out;
}
.lightbox-content img {
  max-width: 100%;
  max-height: 85vh;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  object-fit: contain;
}
.lightbox-content video {
  max-width: 100%;
  max-height: 85vh;
  border-radius: var(--r-lg);
}

/* ─── 13. TOASTS ─────────────────────────────────────── */
#toast-box {
  position: fixed;
  bottom: var(--sp-5);
  right: var(--sp-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  min-width: 260px;
  max-width: 380px;
  box-shadow: var(--shadow-md);
  animation: toastIn .25s ease-out;
  pointer-events: all;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
  to { opacity: 0; transform: translateX(40px); }
}
.toast.removing { animation: toastOut .2s ease-in forwards; }

.toast-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.toast.success .toast-dot { background: var(--clr-success); }
.toast.error   .toast-dot { background: var(--clr-danger); }
.toast.warning .toast-dot { background: var(--clr-warning); }
.toast.info    .toast-dot { background: var(--clr-info); }

.toast-msg {
  flex: 1;
  font-size: .84rem;
  color: var(--txt-primary);
  line-height: 1.4;
}

/* ─── 14. ANIMATIONS ─────────────────────────────────── */
.hidden { display: none !important; }

/* ─── 15. RESPONSIVE ─────────────────────────────────── */

/* ≤ 900px: shrink panel */
@media (max-width: 900px) {
  :root { --panel-w: 240px; --sidebar-w: calc(var(--rail-w) + var(--panel-w)); }
}

/* ≤ 640px: single column, overlay chat */
@media (max-width: 640px) {
  :root { --sidebar-w: 100%; }

  #app {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  .sidebar {
    position: absolute;
    width: 100%;
    z-index: 10;
    transition: transform var(--t-slow);
  }
  .sidebar.slide-out {
    transform: translateX(-100%);
  }

  .main {
    width: 100%;
    position: absolute;
    inset: 0;
  }

  .back-btn { display: grid !important; }

  .msg-bubble { max-width: 82%; }
  .messages-area { padding: var(--sp-3); }

  .chat-header { padding: var(--sp-2) var(--sp-3); }
  .input-footer { padding: var(--sp-2) var(--sp-3); }
}

/* Prevent iOS zoom on input focus */
@media (max-width: 640px) {
  .message-textarea, .form-input, .caption-input, #chat-search {
    font-size: 16px;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ─── 16. LOGIN SCREEN ───────────────────────────────── */
.login-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  background: var(--bg-app);
}

.login-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(37,211,102,.06) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 80% 70%, rgba(37,211,102,.04) 0%, transparent 70%);
}

.login-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-8) var(--sp-6);
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(37,211,102,.05);
  animation: scaleIn .3s cubic-bezier(.34,1.56,.64,1);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.login-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

.login-logo {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25d366 0%, #1ebe5d 100%);
  display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(37,211,102,.35);
  margin-bottom: var(--sp-1);
}

.login-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--txt-primary);
  letter-spacing: -.5px;
}

.login-subtitle {
  font-size: .82rem;
  color: var(--txt-secondary);
}

.login-tabs {
  display: flex;
  background: var(--bg-input);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 3px;
}

.login-tab {
  flex: 1;
  padding: var(--sp-2) var(--sp-3);
  border-radius: calc(var(--r-md) - 2px);
  font-size: .84rem;
  font-weight: 500;
  color: var(--txt-secondary);
  transition: all var(--t-fast);
  text-align: center;
}
.login-tab:hover { color: var(--txt-primary); }
.login-tab.active {
  background: var(--bg-modal);
  color: var(--txt-primary);
  box-shadow: var(--shadow-sm);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.field-label {
  font-size: .78rem;
  font-weight: 500;
  color: var(--txt-secondary);
  letter-spacing: .2px;
}

.field-pw-wrap { position: relative; }

.field-input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 11px var(--sp-4);
  color: var(--txt-primary);
  font-size: .9rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field-input::placeholder { color: var(--txt-muted); }
.field-input:focus {
  border-color: var(--wa-green);
  box-shadow: 0 0 0 3px rgba(37,211,102,.12);
}
.field-pw-wrap .field-input { padding-right: 44px; }

.pw-toggle {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  color: var(--txt-muted);
  padding: 4px;
  border-radius: var(--r-sm);
  transition: color var(--t-fast);
}
.pw-toggle:hover { color: var(--txt-primary); }

.field-error {
  font-size: .78rem;
  color: var(--clr-danger);
  background: rgba(241,92,109,.1);
  border: 1px solid rgba(241,92,109,.2);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
}

.field-success {
  font-size: .78rem;
  color: var(--clr-success, #1ebe5d);
  background: rgba(37,211,102,.1);
  border: 1px solid rgba(37,211,102,.25);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  line-height: 1.4;
  word-break: break-word;
}

.login-hint {
  font-size: .82rem;
  color: var(--txt-muted);
  line-height: 1.5;
  margin: 0 0 var(--sp-1);
}

.login-forgot {
  text-align: center;
  margin-top: calc(-1 * var(--sp-1));
}

.link-btn {
  background: none;
  border: none;
  padding: var(--sp-1);
  font-size: .82rem;
  font-weight: 500;
  color: var(--clr-primary, #25d366);
  cursor: pointer;
  transition: opacity var(--t-fast);
}
.link-btn:hover { opacity: .75; text-decoration: underline; }

.btn-auth {
  width: 100%;
  padding: 13px var(--sp-5);
  background: linear-gradient(135deg, #25d366 0%, #1ebe5d 100%);
  color: var(--txt-on-green);
  border-radius: var(--r-md);
  font-size: .93rem;
  font-weight: 600;
  letter-spacing: .2px;
  transition: all var(--t-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  box-shadow: 0 4px 14px rgba(37,211,102,.3);
}
.btn-auth:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37,211,102,.4); }
.btn-auth:active { transform: translateY(0); }
.btn-auth:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.btn-spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(17,27,33,.3);
  border-top-color: var(--txt-on-green);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

.login-footer-note {
  text-align: center;
  font-size: .74rem;
  color: var(--txt-muted);
  margin-top: calc(-1 * var(--sp-2));
}

/* ─── 17. USER MENU ──────────────────────────────────── */
.user-avatar-btn {
  width: 34px; height: 34px;
  padding: 0;
  overflow: hidden;
}

.user-initials {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--wa-green) 0%, #1ebe5d 100%);
  display: grid; place-items: center;
  font-size: .8rem;
  font-weight: 700;
  color: var(--txt-on-green);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.user-menu-wrap { position: relative; }

.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--bg-modal);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  min-width: 220px;
  box-shadow: var(--shadow-lg);
  z-index: var(--z-menu);
  animation: fadeInUp .15s ease-out;
  overflow: hidden;
}

.user-dropdown-info {
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
}

.udrop-name {
  font-size: .9rem;
  font-weight: 600;
  color: var(--txt-primary);
}
.udrop-email {
  font-size: .78rem;
  color: var(--txt-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.udrop-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}

.udrop-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-size: .86rem;
  color: var(--txt-secondary);
  transition: background var(--t-fast), color var(--t-fast);
}
.udrop-item:hover { background: var(--bg-hover); color: var(--txt-primary); }
.udrop-item:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* ─── 18. ACCOUNTS BAR ───────────────────────────────── */
.accounts-bar {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-2) var(--sp-3);
  flex-shrink: 0;
}

.accounts-bar-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
}
.accounts-bar-inner::-webkit-scrollbar { display: none; }

.accounts-bar-loading {
  display: flex;
  align-items: center;
  padding: var(--sp-1) 0;
}

.spinner-sm {
  width: 16px; height: 16px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--wa-green);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

.account-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px var(--sp-3);
  border-radius: var(--r-full);
  background: var(--bg-input);
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: .78rem;
  color: var(--txt-secondary);
  white-space: nowrap;
  transition: all var(--t-fast);
  flex-shrink: 0;
}
.account-chip:hover { border-color: var(--border-strong); color: var(--txt-primary); }
.account-chip.active {
  background: var(--wa-green-light);
  border-color: var(--wa-green);
  color: var(--wa-green);
  font-weight: 500;
}

.account-chip-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.account-chip-dot.connected    { background: var(--clr-success); box-shadow: 0 0 4px var(--clr-success); }
.account-chip-dot.connecting   { background: var(--clr-warning); animation: pulse-dot 1.5s infinite; }
.account-chip-dot.disconnected { background: var(--txt-muted); }
.account-chip-dot.error        { background: var(--clr-danger); }

/* ─── 19. DASHBOARD PANE ─────────────────────────────── */
.dashboard-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow-y: auto;
  background-color: var(--bg-chat-pattern);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M0 0h80v80H0z' fill='%230b141a'/%3E%3Cpath d='M20 20h4v4h-4zm8 0h4v4h-4zm8 0h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4zm8 0h4v4h-4zm-16 8h4v4h-4zm8 0h4v4h-4zm8 0h4v4h-4zm-16-16h4v4h-4z' fill='%23ffffff' fill-opacity='0.015'/%3E%3C/svg%3E");
}

/* Welcome body (centered, shown when no accounts) */
.dashboard-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  max-width: 480px;
  text-align: center;
  margin: auto;
  padding: var(--sp-10) var(--sp-6);
}

.dashboard-logo { animation: fadeInUp .5s ease-out; }

.dashboard-title {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--txt-primary);
  letter-spacing: -.4px;
}

.dashboard-subtitle {
  font-size: .88rem;
  color: var(--txt-secondary);
}

.btn-dashboard-new {
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-full);
  font-size: .9rem;
  gap: var(--sp-2);
  box-shadow: 0 4px 16px rgba(37,211,102,.25);
}
.btn-dashboard-new:hover { box-shadow: 0 6px 22px rgba(37,211,102,.35); }

/* Accounts grid */
.accounts-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-4);
}

.account-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  cursor: pointer;
  transition: all var(--t-base);
  position: relative;
  text-align: center;
}
.account-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.account-card.active {
  border-color: var(--wa-green);
  background: var(--wa-green-light);
}

.account-card-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--bg-hover);
  display: grid; place-items: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--wa-green);
  border: 2px solid var(--border);
  transition: border-color var(--t-fast);
}
.account-card.active .account-card-icon {
  border-color: var(--wa-green);
  background: var(--wa-green-light);
}

.account-card-name {
  font-size: .88rem;
  font-weight: 600;
  color: var(--txt-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.account-card-phone {
  font-size: .76rem;
  color: var(--txt-muted);
}

.account-card-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .75rem;
  padding: 3px var(--sp-2);
  border-radius: var(--r-full);
}
.account-card-status.connected  { background: rgba(0,168,132,.12); color: var(--clr-success); }
.account-card-status.connecting { background: rgba(240,165,0,.12);  color: var(--clr-warning); }
.account-card-status.disconnected { background: rgba(255,255,255,.05); color: var(--txt-muted); }
.account-card-status.error { background: rgba(241,92,109,.12); color: var(--clr-danger); }

.account-card-actions {
  position: absolute;
  top: var(--sp-2); right: var(--sp-2);
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--t-fast);
}
.account-card:hover .account-card-actions { opacity: 1; }

.account-card-action-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--txt-muted);
  transition: background var(--t-fast), color var(--t-fast);
  font-size: .7rem;
}
.account-card-action-btn:hover { background: var(--bg-hover); color: var(--txt-primary); }
.account-card-action-btn.danger:hover { background: rgba(241,92,109,.15); color: var(--clr-danger); }

/* ─── 20. CHAT HEADER (sub-status) ───────────────────── */
.chat-header-sub {
  font-size: .76rem;
  color: var(--txt-secondary);
}

/* ─── 21. RESPONSIVE EXTRAS ──────────────────────────── */
@media (max-width: 640px) {
  .login-card {
    margin: var(--sp-4);
    padding: var(--sp-6);
  }
  .accounts-grid {
    grid-template-columns: 1fr 1fr;
  }
  .dashboard-body {
    padding: var(--sp-6) var(--sp-4);
  }
}

@media (max-width: 380px) {
  .accounts-grid { grid-template-columns: 1fr; }
}

/* ─── 22. SIDEBAR NAVIGATION TABS ────────────────────── */
/* legacy selectors — kept for safety, no-op now */
.sidebar-nav { display: none; }
.snav-tab { display: none; }

.sidebar-section { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.sidebar-section.hidden { display: none; }

/* ─── 23. ACCOUNTS MANAGE PANEL ──────────────────────── */
.accounts-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  font-size: .82rem;
  font-weight: 600;
  color: var(--txt-secondary);
  letter-spacing: .3px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.btn-icon-sm {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--txt-secondary);
  transition: background var(--t-fast), color var(--t-fast);
}
.btn-icon-sm:hover { background: var(--wa-green-light); color: var(--wa-green); }

.accounts-manage-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.acc-manage-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  transition: border-color var(--t-fast);
}
.acc-manage-card:hover { border-color: var(--border-strong); }
.acc-manage-card.active-card { border-color: var(--wa-green); }

.acc-manage-top {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.acc-manage-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: .95rem; font-weight: 700;
  color: white;
  flex-shrink: 0;
  text-transform: uppercase;
}

.acc-manage-info { flex: 1; min-width: 0; }

.acc-manage-name {
  font-size: .9rem;
  font-weight: 600;
  color: var(--txt-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acc-manage-phone {
  font-size: .76rem;
  color: var(--txt-muted);
  margin-top: 1px;
}

.acc-manage-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-size: .7rem;
  font-weight: 600;
}
.acc-manage-badge.connected    { background: rgba(0,168,132,.15); color: var(--clr-success); }
.acc-manage-badge.connecting   { background: rgba(240,165,0,.15); color: var(--clr-warning); }
.acc-manage-badge.disconnected { background: rgba(102,119,129,.12); color: var(--txt-muted); }

.acc-manage-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.acc-manage-badge.connecting::before { animation: pulse-dot 1.2s infinite; }

.acc-manage-actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.acc-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px var(--sp-3);
  border-radius: var(--r-sm);
  font-size: .76rem;
  font-weight: 500;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  border: 1px solid var(--border);
  color: var(--txt-secondary);
  background: transparent;
}
.acc-action-btn:hover { background: var(--bg-hover); color: var(--txt-primary); border-color: var(--border-strong); }
.acc-action-btn.primary { border-color: var(--wa-green); color: var(--wa-green); }
.acc-action-btn.primary:hover { background: var(--wa-green-light); }
.acc-action-btn.danger { border-color: transparent; color: var(--clr-danger); }
.acc-action-btn.danger:hover { background: rgba(241,92,109,.1); border-color: var(--clr-danger); }
.acc-action-btn.warning { border-color: transparent; color: var(--clr-warning); }
.acc-action-btn.warning:hover { background: rgba(240,165,0,.1); border-color: var(--clr-warning); }

/* ─── 24. INTEGRATIONS NAV (sidebar) ─────────────────── */
.integrations-nav {
  display: flex;
  flex-direction: column;
  padding: var(--sp-2);
  gap: 2px;
  overflow-y: auto;
  flex: 1;
}

.integ-nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: .85rem;
  color: var(--txt-secondary);
  transition: background var(--t-fast), color var(--t-fast);
  text-align: left;
}
.integ-nav-item:hover { background: var(--bg-hover); color: var(--txt-primary); }
.integ-nav-item.active { background: var(--wa-green-light); color: var(--wa-green); }

/* ─── 25. INTEGRATIONS MAIN PANE ─────────────────────── */
.integrations-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: var(--bg-chat-pattern);
}

.integ-pane-header {
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-4) var(--sp-6);
  flex-shrink: 0;
}
.integ-pane-header h2 { font-size: 1.05rem; font-weight: 600; color: var(--txt-primary); }
.integ-pane-header p  { font-size: .82rem; color: var(--txt-secondary); margin-top: 3px; }

.integ-pane-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-6);
}

.integ-section { margin-bottom: var(--sp-8); }
.integ-section-title {
  font-size: .78rem;
  font-weight: 600;
  color: var(--txt-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: var(--sp-3);
}

.integ-status-pill {
  font-size: .68rem; font-weight: 600; text-transform: none; letter-spacing: 0;
  padding: 2px 8px; border-radius: 999px; margin-left: 8px; vertical-align: middle;
}
.integ-status-pill.ok { color: var(--wa-green); background: var(--wa-green-light); }
.integ-status-pill.off { color: var(--txt-muted); background: var(--border); }

.integ-field-row { margin-bottom: var(--sp-4); }
.integ-label {
  display: block;
  font-size: .82rem;
  font-weight: 500;
  color: var(--txt-secondary);
  margin-bottom: var(--sp-1);
}
.integ-input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--txt-primary);
  padding: var(--sp-2) var(--sp-3);
  font-size: .87rem;
  transition: border-color var(--t-fast);
  max-width: 540px;
}
.integ-input:focus { outline: none; border-color: var(--wa-green); }
.integ-input-group { display: flex; gap: var(--sp-2); align-items: center; max-width: 540px; }
.integ-input-group .integ-input { flex: 1; }

.integ-hint { font-size: .76rem; color: var(--txt-muted); margin-top: var(--sp-1); }

.integ-events-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.integ-event-chip {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px var(--sp-3);
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  font-size: .78rem;
  color: var(--txt-secondary);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
  user-select: none;
}
.integ-event-chip input[type=checkbox] { accent-color: var(--wa-green); }
.integ-event-chip:hover { border-color: var(--wa-green); color: var(--txt-primary); }

.integ-coming-soon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-3);
}

.integ-app-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
  opacity: .7;
  position: relative;
}
.integ-app-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  font-size: 1.3rem;
  font-weight: 800;
}
.integ-app-name { font-size: .85rem; font-weight: 600; color: var(--txt-primary); }
.integ-app-desc { font-size: .74rem; color: var(--txt-muted); }
.integ-soon-badge {
  position: absolute; top: var(--sp-2); right: var(--sp-2);
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: .64rem;
  padding: 2px 6px;
  color: var(--txt-muted);
}

.integ-api-key-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  max-width: 540px;
}
.integ-api-key-text {
  flex: 1;
  font-family: 'Consolas', 'Fira Code', monospace;
  font-size: .8rem;
  color: var(--txt-secondary);
  word-break: break-all;
}
.integ-copy-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 4px var(--sp-2);
  border-radius: var(--r-sm);
  font-size: .76rem;
  color: var(--wa-green);
  border: 1px solid var(--wa-green);
  transition: background var(--t-fast);
  flex-shrink: 0;
}
.integ-copy-btn:hover { background: var(--wa-green-light); }

/* ─── 26. QR MODAL IMPROVEMENTS ─────────────────────── */
.modal-card-subtitle {
  font-size: .78rem;
  color: var(--txt-muted);
  margin-top: 2px;
}

.qr-timer-bar {
  height: 3px;
  background: var(--border);
  border-radius: var(--r-full);
  margin: var(--sp-3) 0 var(--sp-2);
  overflow: hidden;
}
.qr-timer-fill {
  height: 100%;
  background: var(--wa-green);
  border-radius: var(--r-full);
  width: 100%;
  transition: width linear;
}

.qr-status-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: .82rem;
  color: var(--txt-secondary);
  margin-bottom: var(--sp-3);
}

.qr-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.qr-status-dot.waiting { background: var(--clr-warning); animation: pulse-dot 1.2s infinite; }
.qr-status-dot.connected { background: var(--clr-success); }
.qr-status-dot.error { background: var(--clr-danger); }

.btn-refresh-qr {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: auto;
  padding: 3px var(--sp-2);
  border-radius: var(--r-sm);
  font-size: .74rem;
  color: var(--txt-muted);
  border: 1px solid var(--border);
  transition: all var(--t-fast);
}
.btn-refresh-qr:hover { color: var(--txt-primary); border-color: var(--border-strong); background: var(--bg-hover); }

/* ─── 27. MODAL ACTIONS ROW ──────────────────────────── */
.modal-actions {
  display: flex;
  gap: var(--sp-3);
  justify-content: flex-end;
  margin-top: var(--sp-4);
}
.btn-ghost {
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm);
  font-size: .87rem;
  color: var(--txt-secondary);
  border: 1px solid var(--border);
  transition: all var(--t-fast);
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--txt-primary); }

/* ─── 28. CODE BLOCK ─────────────────────────────────── */
.integ-code-block {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-4);
  font-family: 'Consolas', 'Fira Code', 'Source Code Pro', monospace;
  font-size: .78rem;
  color: var(--txt-secondary);
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
  max-width: 540px;
}

/* ─── 29. DASHBOARD OVERVIEW ─────────────────────────── */
.dash-overview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-8) 0;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.dash-overview-title-group {}
.dash-overview-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--txt-primary);
  letter-spacing: -.3px;
}
.dash-overview-sub {
  font-size: .82rem;
  color: var(--txt-secondary);
  margin-top: 3px;
}

/* Stats row */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  width: 100%;
  max-width: 900px;
  margin: var(--sp-5) auto 0;
  padding: 0 var(--sp-8);
}

.stat-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  transition: border-color var(--t-fast), transform var(--t-base), box-shadow var(--t-base);
  cursor: default;
}
.stat-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-card-icon {
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  margin-bottom: var(--sp-2);
  flex-shrink: 0;
}

.stat-card-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--txt-primary);
  line-height: 1;
}

.stat-card-label {
  font-size: .7rem;
  color: var(--txt-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* Accounts grid wrapper (overview mode) */
.accounts-grid-wrap {
  width: 100%;
  max-width: 900px;
  margin: var(--sp-5) auto 0;
  padding: 0 var(--sp-8) var(--sp-8);
}

/* Onboarding steps */
.dash-onboarding-steps {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  flex-wrap: wrap;
  justify-content: center;
}

.dash-step {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: .82rem;
  color: var(--txt-secondary);
}

.dash-step-num {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  display: grid; place-items: center;
  font-size: .72rem;
  font-weight: 700;
  color: var(--wa-green);
  flex-shrink: 0;
}

.dash-step-arrow {
  color: var(--txt-muted);
  font-size: 1rem;
}

@media (max-width: 640px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); padding: 0 var(--sp-4); }
  .dash-overview-header { padding: var(--sp-4) var(--sp-4) 0; }
  .accounts-grid-wrap { padding: 0 var(--sp-4) var(--sp-4); }
  .dash-onboarding-steps { gap: var(--sp-2); font-size: .78rem; }
}

/* ═══════════════════ PROFILE SECTION ═══════════════════ */
.profile-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  overflow-y: auto;
}

.profile-header-bg {
  width: 100%;
  height: 120px;
  background: linear-gradient(135deg, #1f7a47 0%, #25d366 100%);
  flex-shrink: 0;
}

.profile-avatar-wrap {
  margin-top: -44px;
  z-index: 1;
}

.profile-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--wa-green);
  border: 4px solid var(--bg-app);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}

.profile-info {
  text-align: center;
  padding: var(--sp-3) var(--sp-5) var(--sp-2);
}

.profile-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--txt-primary);
}

.profile-email {
  font-size: .82rem;
  color: var(--txt-secondary);
  margin-top: 2px;
}

.profile-role-badge {
  display: inline-block;
  margin-top: var(--sp-2);
  padding: 2px 10px;
  border-radius: 20px;
  background: rgba(37,211,102,.15);
  color: var(--wa-green);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.profile-details {
  width: 100%;
  padding: var(--sp-2) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.profile-detail-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--txt-secondary);
  font-size: .88rem;
}

.profile-detail-row svg { flex-shrink: 0; color: var(--wa-green); }

.profile-actions {
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  margin-top: auto;
}

.profile-action-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: 11px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 600;
  transition: background .15s;
}

.profile-action-btn.danger {
  background: rgba(220,53,69,.12);
  color: var(--clr-danger);
}

.profile-action-btn.danger:hover { background: rgba(220,53,69,.22); }

/* ═══════════════════ SETTINGS SECTION ═══════════════════ */
.settings-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}

.settings-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--txt-primary);
  border-bottom: 1px solid var(--border-subtle);
}

.settings-group-label {
  padding: var(--sp-3) var(--sp-5) var(--sp-1);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wa-green);
}

.settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background .12s;
  gap: var(--sp-3);
}

.settings-item:hover { background: var(--bg-hover); }
.settings-item--danger { color: var(--clr-danger); }
.settings-item--danger svg { color: var(--clr-danger); }

.settings-item-left {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 1;
}

.settings-item-left svg { flex-shrink: 0; color: var(--txt-secondary); }

.settings-item--danger .settings-item-left svg { color: var(--clr-danger); }

.settings-item-title {
  font-size: .9rem;
  color: var(--txt-primary);
  font-weight: 500;
}

.settings-item--danger .settings-item-title { color: var(--clr-danger); }

.settings-item-sub {
  font-size: .75rem;
  color: var(--txt-muted);
  margin-top: 1px;
}

.settings-toggle-btn {
  background: var(--bg-panel);
  border: 1px solid var(--border-main);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: .78rem;
  color: var(--txt-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}

.settings-toggle-btn:hover { background: var(--bg-hover); color: var(--txt-primary); }

.settings-action-btn {
  background: rgba(37,211,102,.12);
  border: none;
  border-radius: 20px;
  padding: 5px 14px;
  font-size: .78rem;
  color: var(--wa-green);
  cursor: pointer;
  font-weight: 600;
  transition: background .15s;
  white-space: nowrap;
}

.settings-action-btn:hover { background: rgba(37,211,102,.22); }

.settings-version {
  padding: var(--sp-4) var(--sp-5);
  font-size: .73rem;
  color: var(--txt-muted);
  text-align: center;
  margin-top: auto;
}

.settings-version a { color: var(--txt-muted); text-decoration: none; }
.settings-version a:hover { color: var(--wa-green); }

/* QR Manager modal inside settings */
.qr-manager {
  position: absolute;
  inset: 0;
  background: var(--bg-panel);
  z-index: 10;
  display: flex;
  flex-direction: column;
}

.qr-manager.hidden { display: none; }

.qr-manager-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  font-size: 1rem;
  font-weight: 700;
  color: var(--txt-primary);
  border-bottom: 1px solid var(--border-subtle);
}

#qr-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-2) 0;
}

.qr-list-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
}

.qr-list-shortcut {
  background: rgba(37,211,102,.12);
  color: var(--wa-green);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: .78rem;
  font-weight: 700;
  flex-shrink: 0;
  min-width: 60px;
  text-align: center;
}

.qr-list-text {
  flex: 1;
  font-size: .85rem;
  color: var(--txt-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qr-list-del {
  background: none;
  border: none;
  color: var(--clr-danger);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  opacity: .6;
}

.qr-list-del:hover { opacity: 1; background: rgba(220,53,69,.1); }

.qr-add-form {
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.qr-add-form input {
  background: var(--bg-input);
  border: 1px solid var(--border-main);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--txt-primary);
  font-size: .85rem;
  outline: none;
  transition: border .15s;
}

.qr-add-form input:focus { border-color: var(--wa-green); }

.btn-green {
  background: var(--wa-green);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}

.btn-green:hover { background: #20b858; }

/* Respuestas rápidas: fila de acciones + adjuntar */
.qr-add-row { display: flex; gap: 8px; align-items: stretch; }
.qr-attach-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--border-strong); color: var(--txt-secondary);
  border-radius: 8px; padding: 8px 12px; font-size: .82rem; cursor: pointer;
  transition: background .15s, color .15s; white-space: nowrap; max-width: 55%; overflow: hidden;
}
.qr-attach-btn:hover { background: var(--border); color: var(--txt-primary); }
.qr-attach-btn #qr-attach-label { overflow: hidden; text-overflow: ellipsis; }
.qr-list-attach {
  display: inline-block; margin-top: 3px; font-size: .72rem; color: var(--wa-green);
  background: var(--wa-green-light); border-radius: 6px; padding: 1px 7px;
}
.qr-attach-ico { color: var(--txt-muted); flex-shrink: 0; margin-left: auto; }

/* ═══════════════════ CRM · Gestores de Etiquetas / Etapas ═══════════════════ */
.crm-manager-list { flex: 1; overflow-y: auto; padding: 8px 12px; }
.crm-manager-empty { padding: 24px 8px; text-align: center; color: var(--txt-muted); font-size: .84rem; }
.crm-manager-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 6px; border-bottom: 1px solid var(--border);
}
.crm-manager-item .crm-pos {
  min-width: 22px; height: 22px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; color: var(--txt-muted); background: var(--border);
}
.crm-swatch {
  width: 30px; height: 30px; padding: 0; border: 1px solid var(--border-strong);
  border-radius: 6px; background: none; cursor: pointer; flex-shrink: 0;
}
.crm-name-input {
  flex: 1; min-width: 60px;
  background: var(--bg-input); border: 1px solid var(--border-main);
  border-radius: 8px; padding: 7px 10px; color: var(--txt-primary); font-size: .85rem; outline: none;
}
.crm-name-input:focus { border-color: var(--wa-green); }
.crm-select {
  background: var(--bg-input); border: 1px solid var(--border-main);
  border-radius: 8px; padding: 7px 8px; color: var(--txt-primary); font-size: .82rem; outline: none;
  max-width: 130px;
}
.crm-select:focus { border-color: var(--wa-green); }
.crm-manager-save {
  background: transparent; border: 1px solid var(--wa-green); color: var(--wa-green);
  border-radius: 8px; padding: 6px 10px; font-size: .78rem; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s; flex-shrink: 0;
}
.crm-manager-save:hover { background: var(--wa-green); color: #0b141a; }
.crm-move {
  background: var(--border); border: none; color: var(--txt-secondary);
  border-radius: 6px; width: 26px; height: 26px; cursor: pointer; font-size: .7rem; flex-shrink: 0;
}
.crm-move:hover:not(:disabled) { background: var(--border-strong); }
.crm-move:disabled { opacity: .35; cursor: default; }
.crm-add-form { flex-wrap: wrap; }
.crm-add-form input[type="color"] {
  width: 40px; height: 38px; padding: 0; border: 1px solid var(--border-main);
  border-radius: 8px; background: none; cursor: pointer; flex-shrink: 0;
}
.crm-add-form .crm-select { flex: 1; max-width: none; }

/* ═══════════════════ CRM · Tablero (Kanban + Tabla) ═══════════════════ */
.crm-pane-header { display: flex; align-items: center; justify-content: space-between; }
.crm-view-toggle { display: flex; align-items: center; gap: 6px; }
.crm-view-btn {
  font: inherit; font-size: .8rem; padding: 6px 14px; border-radius: 999px; cursor: pointer;
  color: var(--txt-secondary); background: transparent; border: 1px solid var(--border-strong);
  transition: background .15s, color .15s;
}
.crm-view-btn:hover { background: var(--border); }
.crm-view-btn.active { background: var(--wa-green); border-color: var(--wa-green); color: #0b141a; }

.crm-body { height: calc(100% - 90px); overflow: auto; }

/* Kanban */
.crm-kanban {
  display: flex; gap: 12px; padding: 16px; align-items: flex-start;
  overflow-x: auto; overflow-y: hidden; height: calc(100% - 90px);
}
.crm-col {
  flex: 0 0 280px; max-width: 280px; display: flex; flex-direction: column;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px;
  max-height: 100%;
}
.crm-col-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-radius: 10px 10px 0 0;
  font-size: .82rem; font-weight: 600; color: var(--txt-primary);
}
.crm-col-count {
  font-size: .72rem; font-weight: 700; color: var(--txt-muted);
  background: var(--border); border-radius: 999px; padding: 1px 8px;
}
.crm-col-cards { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.crm-col-cards.drop-target { background: var(--wa-green-light); border-radius: 8px; }
.crm-col-empty { text-align: center; color: var(--txt-muted); font-size: .78rem; padding: 8px; }

.crm-card {
  background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px; cursor: pointer; transition: border-color .15s, transform .05s;
}
.crm-card:hover { border-color: var(--border-strong); }
.crm-card.dragging { opacity: .5; }
.crm-card-top { display: flex; align-items: center; gap: 8px; }
.crm-card-avatar { width: 32px; height: 32px; font-size: .72rem; flex-shrink: 0; }
.crm-card-name { flex: 1; font-size: .84rem; font-weight: 500; color: var(--txt-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-card-unread {
  font-size: .68rem; font-weight: 700; color: #0b141a; background: var(--wa-green);
  border-radius: 999px; padding: 1px 7px; flex-shrink: 0;
}
.crm-card-preview { font-size: .76rem; color: var(--txt-muted); margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-card-labels { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.crm-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* Sidebar CRM */
.crm-side-hint { padding: 12px 16px; font-size: .78rem; color: var(--txt-muted); line-height: 1.5; }
.crm-side-hint p { margin: 0 0 8px; }
.crm-side-legend { padding: 4px 16px; }
.crm-legend-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: .8rem; color: var(--txt-secondary); }
.crm-legend-count { margin-left: auto; font-size: .72rem; color: var(--txt-muted); }

/* Tabla */
.crm-table-wrap { padding: 16px; }
.crm-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.crm-table th {
  text-align: left; padding: 10px 12px; color: var(--txt-muted); font-weight: 600;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg-main, var(--bg-panel));
}
.crm-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--txt-primary); }
.crm-table tr[data-chat] { cursor: pointer; }
.crm-table tr[data-chat]:hover td { background: var(--bg-hover); }
.crm-stage-chip { font-size: .74rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.crm-td-preview { color: var(--txt-muted); max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-td-when { font-size: .72rem; color: var(--txt-muted); margin-left: 6px; }

/* ═══════════════════ CONTACT INFO PANEL ═══════════════════ */
.chat-pane {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.contact-info-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 360px;
  height: 100%;
  background: var(--bg-panel);
  border-left: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  z-index: 20;
  transform: translateX(100%);
  transition: transform .25s ease;
  box-shadow: -4px 0 20px rgba(0,0,0,.2);
}

.contact-info-panel:not(.hidden) {
  transform: translateX(0);
}

.ci-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
  font-size: .95rem;
  font-weight: 600;
  color: var(--txt-primary);
  flex-shrink: 0;
  background: var(--bg-panel);
}

.ci-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: var(--sp-5);
}

.ci-avatar-wrap {
  padding: var(--sp-5) 0 var(--sp-3);
}

.ci-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--wa-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  overflow: hidden;
}

.ci-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.ci-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--txt-primary);
  text-align: center;
  padding: 0 var(--sp-5);
}

.ci-phone {
  font-size: .85rem;
  color: var(--txt-secondary);
  margin-top: 4px;
  text-align: center;
}

.ci-badge {
  display: inline-block;
  margin-top: var(--sp-2);
  padding: 3px 12px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.ci-badge.group {
  background: rgba(37,211,102,.15);
  color: var(--wa-green);
}
.ci-badge.channel {
  background: rgba(10,124,255,.15);
  color: #0a7cff;
}

/* Categoría de empresa (subtítulo bajo el nombre) */
.ci-business-cat {
  margin-top: 2px;
  font-size: .82rem;
  color: var(--txt-muted);
  text-align: center;
}
.ci-business-cat.hidden { display: none; }

/* Etiquetas asignadas en el panel de contacto (pills) */
.ci-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: var(--sp-2);
  padding: 0 var(--sp-4);
}
.ci-label-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .74rem;
  font-weight: 600;
  color: #fff;
  background: var(--lblc, #6b7280);
}

/* Sección Info. (about + perfil de empresa) */
.ci-info-section { padding: var(--sp-4); }
.ci-info-section.hidden { display: none; }
.ci-info-title {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--txt-muted);
  margin-bottom: var(--sp-2);
}
.ci-about {
  font-size: .92rem;
  color: var(--txt-primary);
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: var(--sp-3);
}
.ci-about.hidden { display: none; }
.ci-business-details { display: flex; flex-direction: column; gap: var(--sp-2); }
.ci-biz-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--wa-green);
  margin-bottom: var(--sp-1);
}
.ci-biz-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .88rem;
  color: var(--txt-secondary);
  word-break: break-word;
}
.ci-biz-row svg { flex-shrink: 0; margin-top: 2px; color: var(--txt-muted); }
.ci-biz-row a { color: var(--wa-green); text-decoration: none; }
.ci-biz-row a:hover { text-decoration: underline; }

/* Etiquetas: dropdown del header */
.label-dropdown-wrap { position: relative; }
.label-dropdown {
  position: absolute;
  top: 110%;
  right: 0;
  z-index: 60;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  padding: 6px;
}
.label-dropdown.hidden { display: none; }
.label-dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-size: .9rem;
  color: var(--txt-primary);
}
.label-dd-item:hover { background: var(--bg-hover); }
.label-dd-name { flex: 1; }
.label-dd-item input { width: 16px; height: 16px; accent-color: var(--wa-green); cursor: pointer; }
.label-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.label-dd-empty { padding: 14px; text-align: center; color: var(--txt-muted); font-size: .85rem; }

/* Puntos de etiqueta en la lista de chats */
.chat-label-dots { display: inline-flex; gap: 3px; align-items: center; margin-right: 4px; }
.chat-label-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.ci-actions {
  display: flex;
  gap: var(--sp-5);
  padding: var(--sp-4) 0 var(--sp-3);
  justify-content: center;
}

.ci-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--txt-secondary);
  font-size: .72rem;
  transition: color .15s;
}

.ci-action-btn:hover { color: var(--wa-green); }

.ci-action-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--bg-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}

.ci-action-btn:hover .ci-action-icon { background: rgba(37,211,102,.15); }
.ci-action-btn:hover .ci-action-icon svg { color: var(--wa-green); }

.ci-section-divider {
  width: 100%;
  height: 8px;
  background: var(--bg-app);
  flex-shrink: 0;
  margin: var(--sp-2) 0;
}

.ci-notes-wrap {
  width: 100%;
  padding: var(--sp-3) var(--sp-5);
}

.ci-notes-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .78rem;
  color: var(--txt-muted);
  margin-bottom: var(--sp-2);
}

/* Editor inline de notas (tipo WhatsApp): textarea + emoji + check */
.ci-note-editor {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  border-bottom: 1px solid var(--border-main);
  padding-bottom: 4px;
}
.ci-note-textarea {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  color: var(--txt-primary);
  font-size: .9rem;
  font-family: inherit;
  line-height: 1.5;
  padding: 6px 2px;
  max-height: 200px;
  overflow-y: auto;
}
.ci-note-textarea::placeholder { color: var(--txt-muted); }
.ci-note-icon-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  color: var(--txt-muted);
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.ci-note-icon-btn:hover { background: var(--bg-hover); color: var(--txt-primary); }
.ci-note-save-btn:hover { color: var(--wa-green); }
.ci-note-hint {
  margin-top: var(--sp-2);
  font-size: .76rem;
  color: var(--txt-muted);
}
/* Popover de emoji para notas */
.ci-note-emoji-pop {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  max-height: 180px;
  overflow-y: auto;
  margin-top: var(--sp-2);
  padding: 8px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.ci-note-emoji-pop.hidden { display: none; }
.ci-note-emoji-item {
  border: none;
  background: transparent;
  font-size: 1.25rem;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  cursor: pointer;
}
.ci-note-emoji-item:hover { background: var(--bg-hover); }

.ci-media-section {
  width: 100%;
  padding: var(--sp-3) var(--sp-5);
}

.ci-media-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}

.ci-media-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: .88rem;
  color: var(--txt-secondary);
  font-weight: 500;
}

.ci-media-count {
  font-size: .82rem;
  color: var(--wa-green);
  font-weight: 700;
}

.ci-media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}

.ci-media-thumb {
  aspect-ratio: 1;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-hover);
  cursor: pointer;
}

.ci-media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ci-media-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ci-no-media {
  font-size: .8rem;
  color: var(--txt-muted);
  text-align: center;
  padding: var(--sp-3) 0;
  grid-column: 1/-1;
}

#section-settings { position: relative; }
#section-profile { position: relative; }

/* ════════ Acciones de mensaje (reaccionar + reenviar) ════════ */
.msg-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  align-self: center;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .12s ease;
}
.msg-row:hover .msg-actions { opacity: 1; }
.msg-act-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--txt-secondary);
  background: transparent;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.msg-act-btn:hover { background: var(--bg-hover); color: var(--txt-primary); }
.msg-row.in  .msg-actions { order: 5; }
.msg-row.out .msg-actions { order: -1; }

/* Pill de reacciones bajo la burbuja */
.msg-bubble { position: relative; }
.msg-reactions {
  position: absolute;
  bottom: -11px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  background: var(--bg-modal, #233138);
  border: 1px solid var(--border, rgba(0,0,0,.15));
  border-radius: 12px;
  padding: 1px 6px;
  font-size: .8rem;
  line-height: 1.3;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  cursor: pointer;
  z-index: 2;
}
.msg-row.out .msg-reactions { left: 8px; right: auto; }
.msg-reactions .reaction-count { font-size: .7rem; color: var(--txt-secondary); margin-left: 2px; }

/* Popover selector de reacción */
.reaction-popover {
  position: fixed;
  z-index: var(--z-overlay, 1000);
  display: flex;
  gap: 4px;
  background: var(--bg-modal, #233138);
  border: 1px solid var(--border-strong, rgba(0,0,0,.2));
  border-radius: 24px;
  padding: 6px 8px;
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.4));
  animation: scaleIn .15s ease-out;
}
.reaction-popover.expanded {
  flex-wrap: wrap;
  max-width: 300px;
  max-height: 240px;
  overflow-y: auto;
  border-radius: 14px;
  justify-content: flex-start;
}
.reaction-emoji {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  font-size: 1.4rem;
  border-radius: 50%;
  cursor: pointer;
  transition: transform .1s ease, background .1s ease;
}
.reaction-popover.expanded .reaction-emoji { width: 32px; height: 32px; font-size: 1.2rem; }
.reaction-emoji:hover { transform: scale(1.25); background: var(--bg-hover); }
.reaction-emoji.active { background: var(--bg-hover); }
.reaction-emoji.reaction-more { font-size: 1.3rem; color: var(--txt-secondary); }

.forward-chat-list {
  max-height: 320px;
  overflow-y: auto;
  display: flex; flex-direction: column;
  gap: 2px;
}
.forward-chat-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-md);
  cursor: pointer;
}
.forward-chat-row:hover { background: var(--bg-hover); }
.forward-av {
  width: 36px; height: 36px; border-radius: 50%;
  flex-shrink: 0; display: grid; place-items: center;
  color: #fff; font-size: .7rem; font-weight: 700; overflow: hidden;
}
.forward-av img { width: 100%; height: 100%; object-fit: cover; }
.forward-name {
  flex: 1; font-size: .9rem; color: var(--txt-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.forward-cb { width: 18px; height: 18px; accent-color: var(--wa-green); flex-shrink: 0; cursor: pointer; }
.forward-empty { text-align: center; color: var(--txt-secondary); padding: 20px; font-size: .85rem; }

/* ════════════════════════════════════════════════════════════════
   CRM OMNICANAL — Contactos · Campañas · Inbox  (sistema de diseño)
   Reemplaza los estilos inline de los módulos nuevos. Ver skill web-design.
   ════════════════════════════════════════════════════════════════ */

/* Barra de acción/estado dentro de una sección de sidebar */
.crm-bar {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  background: var(--bg-panel); border-radius: var(--r-md);
  font-size: .78rem; color: var(--txt-secondary);
}
.crm-bar .crm-bar-grow { flex: 1; min-width: 0; }
.crm-bar.crm-bar-warn { background: rgba(240,165,0,.12); color: var(--clr-warning); }

.crm-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); padding: var(--sp-2) var(--sp-3);
}
.crm-toolbar .crm-actions { display: flex; gap: var(--sp-1); }
.crm-count { font-size: .78rem; color: var(--txt-secondary); }

/* Filtros rápidos de contactos (chips tipo tab) */
.crm-filters {
  display: flex; gap: var(--sp-1);
  padding: 0 var(--sp-3) var(--sp-2);
  flex-wrap: wrap;
}
.crm-filter {
  font: inherit; font-size: .74rem; line-height: 1;
  padding: 5px 10px; border-radius: 999px; cursor: pointer;
  color: var(--txt-secondary);
  background: transparent;
  border: 1px solid var(--border-strong);
  transition: background .15s, color .15s, border-color .15s;
}
.crm-filter:hover { background: var(--border); }
.crm-filter.active {
  background: var(--wa-green);
  border-color: var(--wa-green);
  color: #0b141a;
}

/* Tarjeta de contenido (coherente con .integ-card) */
.crm-card {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-5);
  max-width: 680px; margin-bottom: var(--sp-4);
}
.crm-card .crm-card-title {
  font-size: .8rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--txt-secondary); margin-bottom: var(--sp-3);
}
.crm-card .form-input { margin-bottom: var(--sp-3); }
.crm-card-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }

/* Cabecera de ficha (contacto / campaña) */
.crm-detail-head { display: flex; gap: var(--sp-4); align-items: center; margin-bottom: var(--sp-6); flex-wrap: wrap; }
.crm-detail-head h2 { margin: 0; font-size: 1.25rem; color: var(--txt-primary); }
.crm-detail-sub { color: var(--txt-secondary); font-size: .9rem; }
.crm-detail-avatar {
  width: 72px; height: 72px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 600; color: #fff; flex-shrink: 0; overflow: hidden;
}
.crm-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Métricas (campañas) */
.crm-stat-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.crm-stat {
  flex: 1; min-width: 92px; background: var(--bg-panel);
  border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
}
.crm-stat-num { font-size: 1.4rem; font-weight: 700; color: var(--txt-primary); line-height: 1.1; }
.crm-stat-label { font-size: .72rem; color: var(--txt-secondary); margin-top: 2px; }
.crm-stat.is-sent     .crm-stat-num { color: var(--clr-info); }
.crm-stat.is-delivered .crm-stat-num { color: var(--clr-success); }
.crm-stat.is-failed   .crm-stat-num { color: var(--clr-danger); }
.crm-stat.is-warn     .crm-stat-num { color: var(--clr-warning); }
.crm-stat.is-optout   .crm-stat-num { color: var(--ch-sms); }

/* Bloque de mensaje (preformateado) */
.crm-msgbox {
  white-space: pre-wrap; background: var(--bg-input);
  padding: var(--sp-3); border-radius: var(--r-md); color: var(--txt-primary);
  font-size: .9rem;
}

/* Tabla compacta (destinatarios) */
.crm-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.crm-table th { text-align: left; color: var(--txt-muted); font-weight: 500; padding: var(--sp-1) var(--sp-2); }
.crm-table td { padding: var(--sp-1) var(--sp-2); border-top: 1px solid var(--border); color: var(--txt-primary); }
.crm-table td.muted { color: var(--txt-secondary); }

/* Punto y chip de canal */
.channel-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--r-full); margin-left: 3px; background: var(--ch-email); }
.channel-chip {
  display: inline-block; font-size: .7rem; font-weight: 600; padding: 1px 7px;
  border-radius: var(--r-full); color: #fff; background: var(--ch-email);
}
.ch-whatsapp  { background: var(--ch-whatsapp); }
.ch-sms       { background: var(--ch-sms); }
.ch-instagram { background: var(--ch-instagram); }
.ch-messenger { background: var(--ch-messenger); }
.ch-email     { background: var(--ch-email); }

/* Estado vacío genérico CRM */
.crm-empty { padding: var(--sp-6); text-align: center; color: var(--txt-secondary); }
.crm-empty .crm-empty-hint { font-size: .82rem; margin-top: var(--sp-1); }

/* Pill de etapa de ciclo de vida */
.crm-stage { display: inline-block; font-size: .72rem; padding: 1px 8px; border-radius: var(--r-full); background: var(--bg-hover); color: var(--txt-secondary); }

/* Ajustes finos CRM */
.acc-manage-item.is-clickable { cursor: pointer; }
.crm-idlist { margin: 0; padding-left: var(--sp-5); color: var(--txt-primary); font-size: .88rem; }
.crm-idlist li { margin: 2px 0; }
.crm-idlist b { color: var(--txt-secondary); font-weight: 600; text-transform: capitalize; }