/* ============================================================
   NATURALLIE LIVE CHAT SIDEBAR — assets/css/livechat.css  v1.0
   Tema claro · Verde NaturallieFIT
   ============================================================ */

/* ── Variáveis — espelha o :root do NaturallieFIT ── */
:root {
  --nl-bg          : #f0f2f0;
  --nl-surface     : #ffffff;
  --nl-surface2    : #f8faf8;
  --nl-surface3    : #e8f5ea;
  --nl-border      : rgba(0,0,0,.08);
  --nl-border-h    : rgba(46,158,56,.30);
  --nl-green       : #2e9e38;
  --nl-green-d     : #1a5820;
  --nl-green-l     : #45b84f;
  --nl-green-g     : linear-gradient(135deg,#2e9e38,#45b84f);
  --nl-green-glow  : 0 0 24px rgba(46,158,56,.16);
  --nl-online      : #16a34a;
  --nl-red         : #e53e3e;
  --nl-yellow      : #d97706;
  --nl-text-1      : #111111;
  --nl-text-2      : #444444;
  --nl-text-3      : #777777;
  --nl-text-4      : #aaaaaa;
  --nl-width       : 440px;
  --nl-z           : 9000;
  --nl-spring      : cubic-bezier(.16,1,.3,1);
  --nl-ease        : cubic-bezier(.4,0,.2,1);
  --nl-dur         : .36s;
}

/* ── Reset parcial ── */
.nl-sidebar *, .nl-sidebar *::before, .nl-sidebar *::after,
.nl-trigger, .nl-overlay, .nl-modal-overlay,
.nl-modal-overlay *, .nl-modal *, .nl-modal *::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ============================================================
   TRIGGER
   ============================================================ */
.nl-trigger {
  position      : fixed;
  bottom        : 28px;
  right         : 28px;
  width         : 60px;
  height        : 60px;
  border-radius : 50%;
  background    : var(--nl-surface);
  border        : none;
  cursor        : pointer;
  z-index       : var(--nl-z);
  display       : flex;
  align-items   : center;
  justify-content: center;
  transition    : transform .28s var(--nl-spring), box-shadow .28s;
  box-shadow    : 0 4px 20px rgba(0,0,0,.15), var(--nl-green-glow);
  -webkit-tap-highlight-color: transparent;
}
.nl-trigger:hover  { transform:scale(1.1); box-shadow:0 8px 28px rgba(0,0,0,.18), 0 0 32px rgba(46,158,56,.25); }
.nl-trigger:active { transform:scale(.95); }
.nl-trigger.hidden { opacity:0; pointer-events:none; transform:scale(.8); transition:opacity .2s, transform .2s; }

.nl-trigger-logo {
  width        : 38px;
  height       : 38px;
  object-fit   : contain;
  border-radius: 50%;
}

.nl-trigger-ring {
  position     : absolute;
  inset        : -6px;
  border-radius: 50%;
  border       : 1.5px solid rgba(46,158,56,.3);
  animation    : nl-ring-pulse 2.8s ease infinite;
  pointer-events: none;
}
@keyframes nl-ring-pulse {
  0%   { transform:scale(1); opacity:.7; }
  60%  { transform:scale(1.25); opacity:0; }
  100% { transform:scale(1.25); opacity:0; }
}

.nl-trigger-badge {
  position    : absolute;
  top         : -4px;
  right       : -4px;
  min-width   : 20px;
  height      : 20px;
  padding     : 0 4px;
  background  : var(--nl-red);
  color       : #fff;
  font-size   : 11px;
  font-weight : 700;
  border-radius: 10px;
  border      : 2px solid var(--nl-bg);
  display     : flex;
  align-items : center;
  justify-content: center;
  opacity     : 0;
  transform   : scale(.5);
  transition  : opacity .25s, transform .25s var(--nl-spring);
}
.nl-trigger-badge.show { opacity:1; transform:scale(1); }

/* ============================================================
   OVERLAY
   ============================================================ */
.nl-overlay {
  position      : fixed;
  inset         : 0;
  background    : rgba(17,17,17,.35);
  backdrop-filter: blur(4px);
  z-index       : calc(var(--nl-z) + 1);
  opacity       : 0;
  pointer-events: none;
  transition    : opacity var(--nl-dur) var(--nl-ease);
}
.nl-overlay.show { opacity:1; pointer-events:all; }

/* ============================================================
   SIDEBAR
   ============================================================ */
.nl-sidebar {
  position      : fixed;
  top           : 0;
  right         : 0;
  width         : var(--nl-width);
  height        : 100dvh;
  background    : var(--nl-bg);
  border-left   : 1px solid var(--nl-border);
  box-shadow    : -8px 0 40px rgba(0,0,0,.10), -2px 0 0 0 rgba(46,158,56,.06);
  z-index       : calc(var(--nl-z) + 2);
  display       : flex;
  flex-direction: column;
  transform     : translateX(100%);
  transition    : transform var(--nl-dur) var(--nl-spring);
  overflow      : hidden;
}
.nl-sidebar.open { transform:translateX(0); }

/* ============================================================
   HEADER
   ============================================================ */
.nl-header {
  display        : flex;
  align-items    : center;
  gap            : 8px;
  padding        : 0 16px;
  height         : 62px;
  flex-shrink    : 0;
  background     : var(--nl-surface);
  border-bottom  : 1px solid var(--nl-border);
  position       : relative;
}
.nl-header::after {
  content   : '';
  position  : absolute;
  bottom    : 0;
  left      : 0;
  right     : 0;
  height    : 2px;
  background: var(--nl-green-g);
  opacity   : .7;
}

.nl-brand { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nl-brand-meta { display:flex; align-items:center; gap:8px; }

/* Pílula de modo */
.nl-mode-pill {
  display      : inline-flex;
  align-items  : center;
  gap          : 5px;
  padding      : 2px 8px 2px 6px;
  border-radius: 20px;
  font-size    : 11px;
  font-weight  : 600;
  letter-spacing: .2px;
  transition   : background .4s, color .4s;
  user-select  : none;
}
.nl-mode-pill[data-mode="bot"]   { background:rgba(46,158,56,.10); color:var(--nl-green); }
.nl-mode-pill[data-mode="live"]  { background:rgba(22,163,74,.12); color:var(--nl-online); }
.nl-mode-pill[data-mode="queue"] { background:rgba(217,119,6,.10); color:var(--nl-yellow); }

.nl-mode-dot {
  width        : 6px;
  height       : 6px;
  border-radius: 50%;
  flex-shrink  : 0;
  animation    : nl-blink 2s ease infinite;
  transition   : background .4s;
}
.nl-mode-pill[data-mode="bot"]   .nl-mode-dot { background:var(--nl-green); }
.nl-mode-pill[data-mode="live"]  .nl-mode-dot { background:var(--nl-online); }
.nl-mode-pill[data-mode="queue"] .nl-mode-dot { background:var(--nl-yellow); }
@keyframes nl-blink { 0%,100%{opacity:1} 50%{opacity:.35} }

/* Tabs */
.nl-tabs { display:flex; align-items:center; gap:2px; flex:1; justify-content:center; }
.nl-tab {
  background   : transparent;
  border       : none;
  border-bottom: 2px solid transparent;
  color        : var(--nl-text-4);
  font-size    : 13px;
  font-weight  : 600;
  padding      : 8px 14px 7px;
  cursor       : pointer;
  transition   : color .2s, border-color .2s;
  white-space  : nowrap;
}
.nl-tab:hover  { color:var(--nl-text-2); }
.nl-tab.active { color:var(--nl-green); border-bottom-color:var(--nl-green); }

/* Ações do header */
.nl-header-actions {
  display       : flex;
  gap           : 4px;
  align-items   : center;
  opacity       : 0;
  pointer-events: none;
  transform     : translateX(6px);
  transition    : opacity .3s, transform .3s var(--nl-spring);
}
.nl-header-actions.show { opacity:1; pointer-events:all; transform:translateX(0); }

.nl-hbtn {
  display        : flex;
  align-items    : center;
  gap            : 5px;
  background     : transparent;
  border         : 1px solid var(--nl-border);
  color          : var(--nl-text-3);
  font-size      : 12px;
  font-weight    : 600;
  padding        : 5px 9px;
  border-radius  : 8px;
  cursor         : pointer;
  transition     : all .2s;
  white-space    : nowrap;
}
.nl-hbtn:hover { color:var(--nl-green); border-color:var(--nl-border-h); background:rgba(46,158,56,.05); }
.nl-hbtn i     { font-size:11px; }

.nl-close-btn {
  width          : 32px;
  height         : 32px;
  flex-shrink    : 0;
  background     : transparent;
  border         : 1px solid var(--nl-border);
  border-radius  : 8px;
  color          : var(--nl-text-3);
  font-size      : 14px;
  cursor         : pointer;
  display        : flex;
  align-items    : center;
  justify-content: center;
  transition     : all .2s;
}
.nl-close-btn:hover { color:var(--nl-text-1); border-color:var(--nl-text-4); background:var(--nl-surface2); }

/* ============================================================
   PANELS
   ============================================================ */
.nl-panel {
  flex          : 1;
  display       : flex;
  flex-direction: column;
  overflow      : hidden;
  min-height    : 0;
}
.nl-panel[hidden] { display:none !important; }

/* ============================================================
   WELCOME SCREEN
   ============================================================ */
.nl-welcome {
  flex          : 1;
  display       : flex;
  flex-direction: column;
  align-items   : center;
  padding       : 30px 22px 20px;
  overflow-y    : auto;
  min-height    : 0;
  overscroll-behavior: contain;
  background    : var(--nl-bg);
}
.nl-welcome.hidden { display:none; }

.nl-welcome-hero { margin-bottom:18px; position:relative; }
.nl-welcome-avatar-ring {
  width        : 80px;
  height       : 80px;
  border-radius: 50%;
  border       : 2px solid var(--nl-border-h);
  padding      : 4px;
  background   : var(--nl-surface);
  animation    : nl-float 4s ease-in-out infinite;
  box-shadow   : 0 0 0 8px rgba(46,158,56,.06), var(--nl-green-glow);
}
@keyframes nl-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
.nl-welcome-avatar { width:100%; height:100%; border-radius:50%; object-fit:contain; }

.nl-welcome-title {
  font-size    : 20px;
  font-weight  : 700;
  color        : var(--nl-text-1);
  text-align   : center;
  margin-bottom: 6px;
  line-height  : 1.35;
}
.nl-welcome-title strong { color:var(--nl-green); }
.nl-welcome-sub {
  font-size    : 13px;
  color        : var(--nl-text-3);
  text-align   : center;
  margin-bottom: 22px;
  line-height  : 1.55;
  max-width    : 320px;
}

/* Cards de modo */
.nl-mode-cards {
  display      : flex;
  gap          : 10px;
  width        : 100%;
  margin-bottom: 22px;
}
.nl-mode-card {
  flex         : 1;
  display      : flex;
  align-items  : center;
  gap          : 10px;
  padding      : 12px;
  background   : var(--nl-surface);
  border       : 1.5px solid var(--nl-border);
  border-radius: 12px;
  cursor       : pointer;
  transition   : all .25s var(--nl-spring);
  user-select  : none;
  position     : relative;
  overflow     : hidden;
  box-shadow   : 0 1px 4px rgba(0,0,0,.05);
}
.nl-mode-card:hover { border-color:var(--nl-border-h); transform:translateY(-2px); box-shadow:0 4px 14px rgba(46,158,56,.10); }
.nl-mode-card.selected { border-color:var(--nl-green); box-shadow:0 0 0 1px var(--nl-green) inset, 0 4px 16px rgba(46,158,56,.12); }

.nl-mode-card-icon {
  width        : 34px;
  height       : 34px;
  border-radius: 9px;
  display      : flex;
  align-items  : center;
  justify-content: center;
  font-size    : 16px;
  flex-shrink  : 0;
}
.nl-mode-card-icon.bot   { background:rgba(46,158,56,.10); color:var(--nl-green); }
.nl-mode-card-icon.human { background:rgba(22,163,74,.10); color:var(--nl-online); }

.nl-mode-card-body { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.nl-mode-card-body strong { font-size:12px; font-weight:700; color:var(--nl-text-1); }
.nl-mode-card-body span   { font-size:11px; color:var(--nl-text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.nl-mode-check {
  font-size : 13px;
  color     : var(--nl-green);
  flex-shrink: 0;
  opacity   : 0;
  transform : scale(.6);
  transition: opacity .2s, transform .2s var(--nl-spring);
}
.nl-mode-card.selected .nl-mode-check { opacity:1; transform:scale(1); }
.nl-mode-arrow { font-size:12px; color:var(--nl-text-4); flex-shrink:0; transition:transform .2s; }
.nl-mode-card:hover .nl-mode-arrow { transform:translateX(3px); color:var(--nl-text-3); }

/* Quick options */
.nl-welcome-opts { list-style:none; width:100%; }
.nl-wopt {
  display      : flex;
  align-items  : center;
  gap          : 11px;
  padding      : 12px 4px;
  cursor       : pointer;
  border-bottom: 1px solid var(--nl-border);
  transition   : all .2s;
  user-select  : none;
}
.nl-wopt:last-child { border-bottom:none; }
.nl-wopt:hover      { padding-left:8px; }
.nl-wopt:hover .nl-wopt-arrow { color:var(--nl-green); transform:translate(2px,-2px); }

.nl-wopt-icon {
  width          : 30px;
  height         : 30px;
  border-radius  : 8px;
  background     : rgba(46,158,56,.08);
  border         : 1px solid var(--nl-border);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 13px;
  color          : var(--nl-green);
  flex-shrink    : 0;
  transition     : background .2s;
}
.nl-wopt:hover .nl-wopt-icon { background:rgba(46,158,56,.14); }
.nl-wopt > span:nth-child(2) { flex:1; font-size:13.5px; font-weight:500; color:var(--nl-text-2); transition:color .2s; }
.nl-wopt:hover > span:nth-child(2) { color:var(--nl-text-1); }
.nl-wopt-arrow { font-size:16px; color:var(--nl-text-4); transition:transform .2s, color .2s; flex-shrink:0; }

/* ============================================================
   MESSAGES
   ============================================================ */
.nl-messages {
  flex          : 1;
  overflow-y    : auto;
  padding       : 18px 16px 6px;
  display       : none;
  flex-direction: column;
  gap           : 2px;
  min-height    : 0;
  overscroll-behavior: contain;
  background    : var(--nl-bg);
}
.nl-messages.show { display:flex; }
.nl-messages::-webkit-scrollbar       { width:4px; }
.nl-messages::-webkit-scrollbar-track { background:transparent; }
.nl-messages::-webkit-scrollbar-thumb { background:var(--nl-border); border-radius:4px; }

/* ── Mensagem do Bot ── */
.nl-msg-bot {
  display       : flex;
  flex-direction: column;
  gap           : 5px;
  margin-bottom : 18px;
  opacity       : 0;
  transform     : translateY(12px);
  animation     : nl-msg-in .5s var(--nl-spring) forwards;
}
.nl-msg-bot-header { display:flex; align-items:center; gap:9px; }
.nl-msg-bot-avatar {
  width        : 26px;
  height       : 26px;
  border-radius: 50%;
  border       : 1.5px solid var(--nl-border-h);
  object-fit   : contain;
  background   : var(--nl-surface);
  flex-shrink  : 0;
}
.nl-msg-bot-name { font-size:12px; font-weight:700; color:var(--nl-green); letter-spacing:.3px; }
.nl-msg-bot-text {
  background  : var(--nl-surface);
  border      : 1px solid var(--nl-border);
  border-radius: 4px 14px 14px 14px;
  padding     : 12px 14px;
  color       : var(--nl-text-2);
  font-size   : 14px;
  line-height : 1.7;
  margin-left : 35px;
  box-shadow  : 0 1px 4px rgba(0,0,0,.05);
}
.nl-msg-bot-text strong { color:var(--nl-text-1); }
.nl-msg-bot-text a { color:var(--nl-green); text-decoration:none; border-bottom:1px solid rgba(46,158,56,.3); transition:border-color .2s; }
.nl-msg-bot-text a:hover { border-color:var(--nl-green); }

/* Sugestões bot */
.nl-msg-suggestions { padding-left:35px; margin-top:8px; }

.nl-sug-rating {
  display      : flex;
  align-items  : center;
  gap          : 8px;
  padding      : 0 4px 10px;
  border-bottom: 1px solid var(--nl-border);
  margin-bottom: 2px;
  opacity      : 0;
  animation    : nl-sug-in .5s var(--nl-spring) forwards;
}
.nl-sug-rating-label { font-size:11px; color:var(--nl-text-4); flex:1; }
.nl-rate-btn {
  background  : transparent;
  border      : 1px solid var(--nl-border);
  border-radius: 6px;
  padding     : 3px 10px;
  color       : var(--nl-text-2);
  font-size   : 12px;
  cursor      : pointer;
  transition  : all .2s;
  display     : flex;
  align-items : center;
  gap         : 5px;
}
.nl-rate-btn:hover   { border-color:var(--nl-text-4); }
.nl-rate-btn.positive{ border-color:var(--nl-online); background:rgba(22,163,74,.08); color:var(--nl-online); }
.nl-rate-btn.negative{ border-color:var(--nl-red); background:rgba(229,62,62,.08); color:var(--nl-red); }

.nl-sug-item {
  display      : flex;
  align-items  : center;
  gap          : 10px;
  padding      : 11px 4px;
  color        : var(--nl-text-3);
  font-size    : 13px;
  font-weight  : 500;
  cursor       : pointer;
  border-bottom: 1px solid var(--nl-border);
  transition   : color .2s, padding-left .18s;
  user-select  : none;
  opacity      : 0;
  transform    : translateY(8px);
  animation    : nl-sug-in .5s var(--nl-spring) forwards;
}
.nl-sug-item:last-child { border-bottom:none; }
.nl-sug-item:hover      { color:var(--nl-green); padding-left:8px; }
.nl-sug-item:hover .nl-sug-arrow { color:var(--nl-green); transform:translate(2px,-2px); }
.nl-sug-arrow { font-size:14px; color:var(--nl-text-4); flex-shrink:0; transition:transform .2s, color .2s; }

@keyframes nl-sug-in {
  0%   { opacity:0; transform:translateY(8px); }
  60%  { opacity:1; }
  100% { opacity:1; transform:translateY(0); }
}

/* ── Mensagem do Usuário ── */
.nl-msg-user {
  display        : flex;
  justify-content: flex-end;
  margin-bottom  : 12px;
  opacity        : 0;
  animation      : nl-user-in .32s var(--nl-spring) forwards;
}
.nl-msg-user-bubble {
  max-width    : 76%;
  background   : var(--nl-green-g);
  color        : #fff;
  padding      : 10px 14px;
  border-radius: 18px 18px 4px 18px;
  font-size    : 14px;
  line-height  : 1.6;
  word-break   : break-word;
  box-shadow   : 0 2px 12px rgba(46,158,56,.25);
}

/* Anexo usuário */
.nl-msg-user-attach { display:flex; justify-content:flex-end; margin-bottom:6px; }
.nl-attach-bubble {
  display      : flex;
  align-items  : center;
  gap          : 8px;
  background   : var(--nl-surface);
  border       : 1px solid var(--nl-border);
  border-radius: 10px;
  padding      : 8px 12px;
  color        : var(--nl-text-3);
  font-size    : 13px;
  max-width    : 76%;
}
.nl-attach-bubble i { color:var(--nl-green); }

/* ── Mensagem do Atendente ── */
.nl-msg-agent {
  display       : flex;
  flex-direction: column;
  gap           : 5px;
  margin-bottom : 18px;
  opacity       : 0;
  animation     : nl-msg-in .4s var(--nl-spring) forwards;
}
.nl-msg-agent-header { display:flex; align-items:center; gap:9px; }
.nl-msg-agent-avatar {
  width          : 26px;
  height         : 26px;
  border-radius  : 50%;
  background     : var(--nl-green-g);
  display        : flex;
  align-items    : center;
  justify-content: center;
  color          : #fff;
  font-size      : 11px;
  font-weight    : 700;
  flex-shrink    : 0;
  border         : 1.5px solid rgba(46,158,56,.3);
}
.nl-msg-agent-name  { font-size:12px; font-weight:700; color:var(--nl-green); letter-spacing:.3px; }
.nl-msg-agent-badge {
  font-size    : 10px;
  font-weight  : 600;
  padding      : 1px 7px;
  border-radius: 10px;
  background   : rgba(46,158,56,.10);
  color        : var(--nl-green);
  border       : 1px solid rgba(46,158,56,.22);
}
.nl-msg-agent-text {
  background  : var(--nl-surface);
  border      : 1px solid var(--nl-border);
  border-radius: 4px 14px 14px 14px;
  padding     : 12px 14px;
  color       : var(--nl-text-2);
  font-size   : 14px;
  line-height : 1.7;
  margin-left : 35px;
  box-shadow  : 0 1px 4px rgba(0,0,0,.04);
}
.nl-msg-agent-time { font-size:11px; color:var(--nl-text-4); padding-left:35px; margin-top:2px; }

/* ── Mensagem de Sistema ── */
.nl-msg-system {
  display        : flex;
  justify-content: center;
  margin         : 12px 0;
  animation      : nl-fade-in .4s ease;
}
.nl-msg-system-inner {
  display      : flex;
  align-items  : center;
  gap          : 7px;
  background   : var(--nl-surface3);
  border       : 1px solid var(--nl-border-h);
  border-radius: 20px;
  padding      : 5px 14px;
  font-size    : 12px;
  color        : var(--nl-green-d);
}

/* Imagem em mensagem */
.nl-msg-img {
  display      : block;
  max-width    : 220px;
  max-height   : 180px;
  border-radius: 10px;
  object-fit   : cover;
  cursor       : zoom-in;
  border       : 1px solid var(--nl-border);
  margin-left  : 35px;
  margin-bottom: 2px;
  transition   : opacity .2s, transform .2s;
}
.nl-msg-img:hover { opacity:.88; transform:scale(1.01); }
.nl-msg-video { display:block; max-width:240px; max-height:180px; border-radius:10px; border:1px solid var(--nl-border); width:100%; margin-bottom:2px; margin-left:35px; }

/* ── Thinking ── */
.nl-thinking { margin-bottom:16px; animation:nl-fade-in .3s ease; }
.nl-thinking-header { margin-bottom:6px; }
.nl-thinking-steps { display:flex; flex-direction:column; gap:6px; padding-left:35px; }
.nl-thinking-step {
  display    : flex;
  align-items: center;
  gap        : 9px;
  opacity    : 0;
  transform  : translateY(6px);
  transition : opacity .45s var(--nl-spring), transform .45s var(--nl-spring);
}
.nl-thinking-step.visible { opacity:1; transform:translateY(0); }
.nl-thinking-step.done .nl-thinking-icon i { color:var(--nl-online); }
.nl-thinking-step.done .nl-thinking-text { color:var(--nl-text-4); text-decoration:line-through; text-decoration-color:rgba(0,0,0,.15); }
.nl-thinking-icon { width:18px; height:18px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.nl-thinking-icon i { font-size:13px; color:var(--nl-green); }
.nl-thinking-text   { font-size:13px; color:var(--nl-text-3); }

/* ── Live Typing ── */
.nl-live-typing {
  display      : flex;
  align-items  : center;
  gap          : 9px;
  padding-left : 35px;
  margin-bottom: 14px;
  animation    : nl-fade-in .3s ease;
}
.nl-live-typing-dots {
  display      : flex;
  gap          : 4px;
  padding      : 8px 12px;
  background   : var(--nl-surface);
  border       : 1px solid var(--nl-border);
  border-radius: 12px 12px 12px 4px;
  box-shadow   : 0 1px 4px rgba(0,0,0,.04);
}
.nl-live-typing-dots span {
  width        : 6px;
  height       : 6px;
  background   : var(--nl-green);
  border-radius: 50%;
  animation    : nl-dot-bounce .9s ease infinite;
}
.nl-live-typing-dots span:nth-child(2) { animation-delay:.18s; }
.nl-live-typing-dots span:nth-child(3) { animation-delay:.36s; }
@keyframes nl-dot-bounce { 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-6px);opacity:1} }

/* Animações globais */
@keyframes nl-msg-in { 0%{opacity:0;transform:translateY(12px)} 60%{opacity:1} 100%{opacity:1;transform:translateY(0)} }
@keyframes nl-user-in { 0%{opacity:0;transform:translateX(12px) translateY(4px)} 100%{opacity:1;transform:none} }
@keyframes nl-fade-in { from{opacity:0} to{opacity:1} }

/* Toolbar de conversa do histórico */
.nl-chat-toolbar {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : 10px;
  padding        : 8px 12px;
  margin-bottom  : 12px;
  background     : var(--nl-surface);
  border         : 1px solid var(--nl-border);
  border-radius  : 10px;
  flex-shrink    : 0;
  box-shadow     : 0 1px 4px rgba(0,0,0,.04);
}
.nl-chat-toolbar-title { font-size:12px; color:var(--nl-text-3); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nl-chat-toolbar-btn {
  display     : flex;
  align-items : center;
  gap         : 5px;
  background  : transparent;
  border      : 1px solid rgba(229,62,62,.3);
  border-radius:7px;
  padding     : 4px 10px;
  color       : var(--nl-red);
  font-size   : 12px;
  cursor      : pointer;
  transition  : all .2s;
  flex-shrink : 0;
}
.nl-chat-toolbar-btn:hover { background:rgba(229,62,62,.08); border-color:var(--nl-red); }

/* Linha de contato inline */
.nl-contact-row-wrap { border-bottom:1px solid var(--nl-border); }
.nl-contact-row-wrap:last-child { border-bottom:none; }
.nl-contact-row {
  display        : flex;
  align-items    : center;
  gap            : 12px;
  padding        : 12px 4px;
  color          : var(--nl-text-2);
  text-decoration: none;
  font-size      : 14px;
  font-weight    : 500;
  transition     : color .2s, padding-left .15s;
}
.nl-contact-row:hover { color:var(--nl-text-1); padding-left:8px; }
.nl-contact-row i { font-size:18px; width:22px; text-align:center; flex-shrink:0; }
.nl-contact-row .fa-whatsapp  { color:#25D366; }
.nl-contact-row .fa-instagram { color:#E1306C; }
.nl-contact-row .fa-envelope  { color:var(--nl-green); }

/* Itens formatados do bot */
.nl-bot-main-title {
  display      : block;
  font-size    : 14.5px;
  font-weight  : 700;
  color        : var(--nl-text-1);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--nl-border);
}
.nl-bot-section-title {
  display       : block;
  font-size     : 10px;
  font-weight   : 700;
  color         : var(--nl-green);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-top    : 12px;
  margin-bottom : 4px;
  padding-bottom: 4px;
  border-bottom : 1px solid rgba(46,158,56,.18);
}
.nl-bot-list-item {
  display    : block;
  font-size  : 14px;
  color      : var(--nl-text-2);
  line-height: 1.65;
  padding    : 3px 0;
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.nl-bot-list-item:last-child { border-bottom:none; }
.nl-bot-list-item::before { content:'◦ '; color:var(--nl-green); }

/* ============================================================
   BARRA DE TRANSFERÊNCIA
   ============================================================ */
.nl-transfer-bar {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : 10px;
  padding        : 10px 16px;
  background     : rgba(46,158,56,.05);
  border-top     : 1px solid rgba(46,158,56,.15);
  flex-shrink    : 0;
}
.nl-transfer-bar.hidden { display:none; }
.nl-transfer-bar span   { font-size:12.5px; color:var(--nl-text-3); display:flex; align-items:center; gap:7px; }
.nl-transfer-bar span i { color:var(--nl-green); }
.nl-transfer-btn {
  flex-shrink  : 0;
  padding      : 7px 14px;
  background   : var(--nl-green-g);
  border       : none;
  border-radius: 8px;
  color        : #fff;
  font-size    : 12px;
  font-weight  : 600;
  cursor       : pointer;
  transition   : transform .2s, box-shadow .2s;
  box-shadow   : 0 2px 10px rgba(46,158,56,.3);
  white-space  : nowrap;
}
.nl-transfer-btn:hover  { transform:translateY(-1px); box-shadow:0 4px 16px rgba(46,158,56,.4); }
.nl-transfer-btn:active { transform:translateY(0); }

/* ============================================================
   INPUT AREA
   ============================================================ */
.nl-input-wrap {
  flex-shrink: 0;
  padding    : 10px 14px 14px;
  border-top : 1px solid var(--nl-border);
  background : var(--nl-surface);
}
.nl-input-inner { display:flex; flex-direction:column; gap:7px; }

.nl-attach-preview {
  display    : none;
  align-items: center;
  gap        : 8px;
  background : var(--nl-surface2);
  border     : 1px solid var(--nl-border);
  border-radius: 8px;
  padding    : 6px 11px;
  color      : var(--nl-text-3);
  font-size  : 12.5px;
}
.nl-attach-preview.show { display:flex; }
.nl-attach-preview i    { color:var(--nl-green); }
.nl-attach-preview span { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nl-attach-remove {
  background: transparent;
  border    : none;
  color     : var(--nl-text-4);
  font-size : 18px;
  cursor    : pointer;
  line-height:1;
  transition: color .2s;
}
.nl-attach-remove:hover { color:var(--nl-red); }

.nl-input-row {
  display      : flex;
  align-items  : center;
  gap          : 8px;
  background   : var(--nl-surface2);
  border       : 1.5px solid var(--nl-border);
  border-radius: 14px;
  padding      : 7px 9px;
  transition   : border-color .2s;
}
.nl-input-row:focus-within { border-color:rgba(46,158,56,.4); box-shadow:0 0 0 3px rgba(46,158,56,.07); }

.nl-attach-btn {
  width          : 32px;
  height         : 32px;
  flex-shrink    : 0;
  background     : transparent;
  border         : 1px solid var(--nl-border);
  border-radius  : 8px;
  color          : var(--nl-text-3);
  font-size      : 15px;
  cursor         : pointer;
  transition     : all .2s;
  display        : flex;
  align-items    : center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.nl-attach-btn:hover { color:var(--nl-green); border-color:var(--nl-border-h); }

.nl-textarea {
  flex       : 1;
  background : transparent;
  border     : none;
  outline    : none;
  color      : var(--nl-text-1);
  font-size  : 14px;
  font-family: inherit;
  line-height: 1.5;
  resize     : none;
  max-height : 120px;
  overflow-y : auto;
  scrollbar-width: none;
  padding    : 0;
  align-self : center;
}
.nl-textarea::placeholder { color:var(--nl-text-4); }
.nl-textarea::-webkit-scrollbar { display:none; }

.nl-send-btn {
  width          : 34px;
  height         : 34px;
  flex-shrink    : 0;
  background     : var(--nl-green-g);
  border         : none;
  border-radius  : 9px;
  color          : #fff;
  font-size      : 14px;
  cursor         : pointer;
  transition     : transform .2s, opacity .2s, box-shadow .2s;
  display        : flex;
  align-items    : center;
  justify-content: center;
  box-shadow     : 0 2px 8px rgba(46,158,56,.3);
  -webkit-tap-highlight-color: transparent;
}
.nl-send-btn:hover   { transform:scale(1.08); box-shadow:0 4px 14px rgba(46,158,56,.45); }
.nl-send-btn:active  { transform:scale(.94); }
.nl-send-btn:disabled{ opacity:.35; cursor:not-allowed; transform:none; }

/* ============================================================
   HISTÓRICO
   ============================================================ */
.nl-hist-toolbar {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 10px 14px;
  border-bottom  : 1px solid var(--nl-border);
  flex-shrink    : 0;
  background     : var(--nl-surface);
}
.nl-hist-toolbar-label { font-size:11px; font-weight:700; color:var(--nl-text-4); text-transform:uppercase; letter-spacing:.6px; }
.nl-hist-clear-all {
  display      : flex;
  align-items  : center;
  gap          : 5px;
  background   : transparent;
  border       : 1px solid rgba(229,62,62,.3);
  border-radius: 7px;
  padding      : 4px 10px;
  color        : var(--nl-red);
  font-size    : 11px;
  font-weight  : 600;
  cursor       : pointer;
  transition   : all .2s;
}
.nl-hist-clear-all:hover { background:rgba(229,62,62,.08); border-color:var(--nl-red); }

.nl-hist-list {
  flex      : 1;
  overflow-y: auto;
  padding   : 10px 12px;
  min-height: 0;
  background: var(--nl-bg);
  overscroll-behavior: contain;
}
.nl-hist-list::-webkit-scrollbar       { width:4px; }
.nl-hist-list::-webkit-scrollbar-thumb { background:var(--nl-border); border-radius:4px; }

.nl-hist-empty {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  gap            : 12px;
  height         : 200px;
  color          : var(--nl-text-4);
}
.nl-hist-empty i { font-size:30px; opacity:.3; }
.nl-hist-empty p { font-size:13.5px; }

.nl-hist-item {
  display       : flex;
  flex-direction: column;
  gap           : 4px;
  background    : var(--nl-surface);
  border        : 1px solid var(--nl-border);
  border-radius : 12px;
  padding       : 12px 14px;
  margin-bottom : 8px;
  cursor        : pointer;
  transition    : all .22s;
  box-shadow    : 0 1px 4px rgba(0,0,0,.04);
}
.nl-hist-item:hover { border-color:var(--nl-border-h); transform:translateY(-1px); box-shadow:0 4px 14px rgba(46,158,56,.08); }

.nl-hist-item-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.nl-hist-item-title   { font-size:13.5px; font-weight:600; color:var(--nl-text-1); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nl-hist-item-date    { font-size:11px; color:var(--nl-text-4); flex-shrink:0; }
.nl-hist-item-preview { font-size:12.5px; color:var(--nl-text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nl-hist-item-footer  { display:flex; align-items:center; gap:7px; margin-top:2px; flex-wrap:wrap; }

.nl-hist-badge { font-size:11px; font-weight:600; padding:2px 8px; border-radius:8px; }
.nl-hist-badge.ativa     { background:rgba(22,163,74,.10); color:var(--nl-online); }
.nl-hist-badge.encerrada { background:var(--nl-surface2); color:var(--nl-text-4); border:1px solid var(--nl-border); }
.nl-hist-badge.bot       { background:rgba(46,158,56,.08); color:var(--nl-green); }
.nl-hist-badge.livechat  { background:rgba(22,163,74,.08); color:var(--nl-online); }

.nl-hist-item-actions { display:flex; gap:5px; margin-left:auto; }
.nl-hist-del-btn {
  background   : transparent;
  border       : 1px solid var(--nl-border);
  border-radius: 6px;
  padding      : 2px 8px;
  font-size    : 12px;
  cursor       : pointer;
  color        : var(--nl-text-4);
  transition   : all .2s;
}
.nl-hist-del-btn:hover { color:var(--nl-red); border-color:var(--nl-red); background:rgba(229,62,62,.06); }

/* ============================================================
   MODAL
   ============================================================ */
.nl-modal-overlay {
  position      : fixed;
  inset         : 0;
  background    : rgba(17,17,17,.45);
  backdrop-filter: blur(6px);
  z-index       : calc(var(--nl-z) + 10);
  display       : flex;
  align-items   : center;
  justify-content: center;
  opacity       : 0;
  pointer-events: none;
  transition    : opacity .25s var(--nl-ease);
}
.nl-modal-overlay.show { opacity:1; pointer-events:all; }

.nl-modal {
  background   : var(--nl-surface);
  border       : 1px solid var(--nl-border);
  border-radius: 18px;
  padding      : 30px 28px 24px;
  width        : 320px;
  max-width    : calc(100vw - 32px);
  text-align   : center;
  box-shadow   : 0 20px 60px rgba(0,0,0,.15), var(--nl-green-glow);
  transform    : scale(.88) translateY(16px);
  transition   : transform .3s var(--nl-spring);
}
.nl-modal-overlay.show .nl-modal { transform:scale(1) translateY(0); }
.nl-modal-icon-wrap {
  width          : 56px;
  height         : 56px;
  background     : rgba(229,62,62,.08);
  border         : 1.5px solid rgba(229,62,62,.22);
  border-radius  : 50%;
  display        : flex;
  align-items    : center;
  justify-content: center;
  margin         : 0 auto 18px;
  font-size      : 22px;
  color          : var(--nl-red);
}
.nl-modal h3 { font-size:16px; font-weight:700; color:var(--nl-text-1); margin-bottom:8px; }
.nl-modal p  { font-size:13px; color:var(--nl-text-3); margin-bottom:22px; line-height:1.55; }
.nl-modal-actions { display:flex; gap:10px; }
.nl-modal-cancel {
  flex:1; padding:10px; background:var(--nl-surface2); border:1px solid var(--nl-border);
  border-radius:10px; color:var(--nl-text-2); font-size:13.5px; font-weight:600; cursor:pointer; transition:all .2s;
}
.nl-modal-cancel:hover { color:var(--nl-text-1); border-color:var(--nl-text-4); }
.nl-modal-confirm {
  flex:1; padding:10px; background:rgba(229,62,62,.10); border:1.5px solid var(--nl-red);
  border-radius:10px; color:var(--nl-red); font-size:13.5px; font-weight:600; cursor:pointer; transition:all .2s;
}
.nl-modal-confirm:hover { background:rgba(229,62,62,.22); }

/* ============================================================
   BUBBLE DE ENGAJAMENTO
   ============================================================ */
.nl-bubble {
  position      : fixed;
  bottom        : 36px;
  right         : 106px;
  background    : var(--nl-surface);
  border        : 1px solid var(--nl-border-h);
  border-radius : 14px 14px 14px 4px;
  padding       : 13px 36px 13px 15px;
  max-width     : 220px;
  min-width     : 160px;
  box-shadow    : 0 8px 32px rgba(0,0,0,.12), var(--nl-green-glow);
  z-index       : calc(var(--nl-z) - 1);
  opacity       : 0;
  transform     : translateX(8px) scale(.95);
  transition    : opacity .35s var(--nl-spring), transform .35s var(--nl-spring);
  pointer-events: none;
}
.nl-bubble.show { opacity:1; transform:translateX(0) scale(1); pointer-events:auto; }
.nl-bubble-msg  { font-size:13.5px; font-weight:600; color:var(--nl-text-1); line-height:1.5; margin:0; }
.nl-bubble-sub  { display:block; font-size:11.5px; color:var(--nl-text-3); margin-top:3px; }
.nl-bubble::after {
  content:      '';
  position:     absolute;
  right:        -7px;
  bottom:       14px;
  width:0; height:0;
  border-top:   7px solid transparent;
  border-bottom:7px solid transparent;
  border-left:  7px solid var(--nl-border-h);
}
.nl-bubble::before {
  content:      '';
  position:     absolute;
  right:        -6px;
  bottom:       14px;
  width:0; height:0;
  border-top:   7px solid transparent;
  border-bottom:7px solid transparent;
  border-left:  7px solid var(--nl-surface);
  z-index:      1;
}
.nl-bubble-close {
  position    : absolute;
  top         : 8px;
  right       : 9px;
  background  : transparent;
  border      : none;
  color       : var(--nl-text-4);
  cursor      : pointer;
  font-size   : 12px;
  line-height : 1;
  padding     : 2px 4px;
  border-radius:4px;
  transition  : color .2s;
  z-index     : 2;
}
.nl-bubble-close:hover { color:var(--nl-text-1); }
.nl-bubble-dot {
  display      : inline-block;
  width        : 8px;
  height       : 8px;
  background   : var(--nl-online);
  border-radius: 50%;
  margin-right : 6px;
  vertical-align: middle;
  animation    : nl-bubble-pulse 2s ease infinite;
}
@keyframes nl-bubble-pulse {
  0%  { box-shadow:0 0 0 0 rgba(22,163,74,.5); }
  70% { box-shadow:0 0 0 7px rgba(22,163,74,0); }
  100%{ box-shadow:0 0 0 0 rgba(22,163,74,0); }
}

/* ============================================================
   TÓPICOS
   ============================================================ */
.nl-topics-btn {
  display      : flex;
  align-items  : center;
  gap          : 7px;
  margin-top   : 8px;
  padding      : 7px 12px;
  background   : rgba(46,158,56,.06);
  border       : 1px dashed rgba(46,158,56,.3);
  border-radius: 10px;
  color        : var(--nl-green);
  font-size    : 12px;
  font-weight  : 600;
  cursor       : pointer;
  transition   : all .2s;
  width        : fit-content;
}
.nl-topics-btn:hover { background:rgba(46,158,56,.12); border-color:var(--nl-green); color:var(--nl-green-d); }
.nl-topics-btn i { font-size:11px; opacity:.8; }

.nl-topics-list { display:flex; flex-direction:column; gap:4px; padding-top:6px; }
.nl-topic-row {
  display        : flex;
  align-items    : center;
  gap            : 10px;
  padding        : 9px 12px;
  background     : var(--nl-surface);
  border         : 1px solid var(--nl-border);
  border-radius  : 10px;
  cursor         : pointer;
  transition     : all .2s;
  animation      : nl-sug-in .3s var(--nl-spring) both;
  box-shadow     : 0 1px 3px rgba(0,0,0,.04);
}
.nl-topic-row:hover { background:var(--nl-surface3); border-color:var(--nl-green); }
.nl-topic-row-ico {
  width          : 28px;
  height         : 28px;
  border-radius  : 7px;
  background     : rgba(46,158,56,.08);
  border         : 1px solid rgba(46,158,56,.15);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 12px;
  color          : var(--nl-green);
  flex-shrink    : 0;
}
.nl-topic-row-label { flex:1; font-size:13px; font-weight:600; color:var(--nl-text-2); }
.nl-topic-row:hover .nl-topic-row-label { color:var(--nl-text-1); }
.nl-topic-row-arrow { font-size:14px; color:var(--nl-text-4); opacity:.6; }
.nl-topic-row:hover .nl-topic-row-arrow { opacity:1; color:var(--nl-green); }

/* ============================================================
   ARQUIVO — link genérico
   ============================================================ */
.nl-msg-file-link {
  display        : flex;
  align-items    : center;
  gap            : 8px;
  padding        : 8px 12px;
  background     : rgba(46,158,56,.06);
  border         : 1px solid rgba(46,158,56,.18);
  border-radius  : 10px;
  color          : var(--nl-green);
  text-decoration: none;
  font-size      : 12.5px;
  font-weight    : 600;
  max-width      : 220px;
  word-break     : break-all;
  transition     : background .2s;
  margin-left    : 35px;
}
.nl-msg-file-link:hover { background:rgba(46,158,56,.12); }
.nl-msg-file-link i { font-size:18px; flex-shrink:0; }

/* ============================================================
   MOBILE (≤ 768px)
   ============================================================ */
@media (max-width:768px) {
  :root { --nl-width:100vw; }
  .nl-sidebar   { border-left:none; box-shadow:none; }
  .nl-trigger   { bottom:82px; right:14px; width:52px; height:52px; }
  .nl-trigger-logo { width:32px; height:32px; }
  .nl-bubble    { right:80px; bottom:82px; max-width:180px; }
  .nl-welcome   { padding:24px 16px 16px; }
  .nl-messages  { padding:14px 12px 6px; }
  .nl-input-wrap{ padding:8px 12px 12px; }
  .nl-hbtn span { display:none; }
  .nl-hbtn      { padding:5px 8px; }
  .nl-msg-bot-text, .nl-msg-agent-text, .nl-msg-suggestions,
  .nl-msg-agent-time, .nl-thinking-steps { margin-left:0; padding-left:0; }
  .nl-msg-user-bubble { max-width:85%; }
  .nl-mode-cards { flex-direction:column; gap:8px; }
  .nl-mode-card  { padding:10px; }
  .nl-attach-btn, .nl-send-btn { width:38px; height:38px; }
  body.nl-open { overflow:hidden !important; position:fixed; width:100%; left:0; }
}
/* Trigger flutuante desativado — chat abre pelo navbar */
.nl-trigger,
.nl-trigger-ring,
.nl-bubble { display: none !important; }