/* =========================================================
   Nikko — Assistente Virtual Nikkomag
   Widget de chat flutuante (usa as variáveis de cor do site)
   ========================================================= */
#robson-root{
  --rb-red: var(--brand-red, #C81E1E);
  --rb-red-dark: var(--brand-red-dark, #8C1414);
  --rb-ink: var(--ink, #1A1A1A);
  --rb-ink-dim: var(--ink-dim, #6B6B6B);
  --rb-line: var(--line, #E7E1E1);
  --rb-bg: var(--bg, #FFFFFF);
  --rb-bg-soft: var(--bg-soft, #FAFAFA);
  --rb-good: var(--good, #1E8E4F);
  font-family: 'Jost', 'Poppins', sans-serif;
}

/* ---------- Botão flutuante ---------- */
.rb-fab{
  position: fixed; right: 20px; bottom: 88px; z-index: 99998;
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--rb-red);
  box-shadow: 0 8px 24px rgba(200,30,30,.35);
  border: 3px solid #fff;
  cursor: pointer; display:flex; align-items:center; justify-content:center;
  overflow: hidden; padding: 0;
  transition: transform .2s ease, box-shadow .2s ease;
}
.rb-fab:hover{ transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 28px rgba(200,30,30,.45); }
.rb-fab img{ width:100%; height:100%; object-fit:cover; display:block; }
.rb-fab .rb-fab-badge{
  position:absolute; top:-2px; right:-2px; background:var(--rb-good);
  color:#fff; font-size:10px; font-weight:700; line-height:1;
  width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:2px solid #fff;
}
.rb-fab-pulse{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--rb-red); opacity:.6;
  animation: rb-pulse 2.2s ease-out infinite;
}
@keyframes rb-pulse{
  0%{ transform:scale(1); opacity:.6; }
  100%{ transform:scale(1.55); opacity:0; }
}
.rb-tooltip{
  position:fixed; right: 92px; bottom: 102px; z-index:99997;
  background:#fff; color:var(--rb-ink); border:1px solid var(--rb-line);
  padding:8px 14px; border-radius:10px; font-size:13.5px; white-space:nowrap;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  animation: rb-tooltip-in .35s ease;
}
.rb-tooltip::after{
  content:''; position:absolute; right:-6px; top:50%; transform:translateY(-50%) rotate(45deg);
  width:10px; height:10px; background:#fff; border-right:1px solid var(--rb-line); border-top:1px solid var(--rb-line);
}
@keyframes rb-tooltip-in{ from{ opacity:0; transform:translateX(8px); } to{ opacity:1; transform:translateX(0); } }

/* ---------- Botão flutuante do WhatsApp (abaixo do Nikko) ---------- */
.rb-wa-fab{
  position: fixed; right: 25px; bottom: 20px; z-index: 99998;
  width: 52px; height: 52px; border-radius: 50%;
  background: #25D366; border: 3px solid #fff; padding: 0;
  box-shadow: 0 8px 22px rgba(37,211,102,.4);
  cursor: pointer; display:flex; align-items:center; justify-content:center;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.rb-wa-fab:hover{ transform: translateY(-2px) scale(1.05); box-shadow: 0 10px 26px rgba(37,211,102,.55); }
.rb-wa-fab:focus-visible{ outline: 3px solid #128C7E; outline-offset: 2px; }
.rb-wa-fab.rb-loading{ opacity:.6; pointer-events:none; }

/* ---------- Botão de WhatsApp desligado no CRM: o Nikko ocupa o canto ---------- */
#robson-root.rb-sem-wa .rb-fab{ bottom: 20px; }
#robson-root.rb-sem-wa .rb-window{ bottom: 96px; max-height: calc(100vh - 120px); }

/* ---------- Janela do chat ---------- */
.rb-window{
  position: fixed; right: 20px; bottom: 164px; z-index: 99999;
  width: 380px; max-width: calc(100vw - 32px);
  height: 600px; max-height: calc(100vh - 190px);
  background: var(--rb-bg); border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.28);
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--rb-line);
  transform-origin: bottom right;
  animation: rb-win-in .22s ease;
}
@keyframes rb-win-in{ from{ opacity:0; transform: scale(.92) translateY(10px);} to{ opacity:1; transform:scale(1) translateY(0);} }
.rb-window.rb-hidden{ display:none; }

.rb-header{
  background: linear-gradient(135deg, var(--rb-red), var(--rb-red-dark));
  color:#fff; padding: 14px 16px; display:flex; align-items:center; gap:12px; flex-shrink:0;
}
.rb-header img{ width:42px; height:42px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.7); }
.rb-header .rb-h-info{ flex:1; min-width:0; }
.rb-header .rb-h-name{ font-weight:700; font-size:15px; line-height:1.2; }
.rb-header .rb-h-status{ font-size:11.5px; opacity:.9; display:flex; align-items:center; gap:5px; }
.rb-header .rb-h-status::before{ content:''; width:7px; height:7px; border-radius:50%; background:#4CE07A; display:inline-block; }
.rb-h-actions{ display:flex; gap:6px; }
.rb-h-btn{ background:rgba(255,255,255,.18); border:none; color:#fff; width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:15px; display:flex; align-items:center; justify-content:center; }
.rb-h-btn:hover{ background:rgba(255,255,255,.3); }

.rb-body{
  flex:1; overflow-y:auto; padding: 14px; background: var(--rb-bg-soft);
  display:flex; flex-direction:column; gap:10px;
}
.rb-body::-webkit-scrollbar{ width:6px; }
.rb-body::-webkit-scrollbar-thumb{ background:#d8d0d0; border-radius:6px; }

.rb-row{ display:flex; gap:8px; align-items:flex-end; }
.rb-row.rb-bot{ justify-content:flex-start; }
.rb-row.rb-user{ justify-content:flex-end; }
.rb-row img.rb-avatar-sm{ width:26px; height:26px; border-radius:50%; object-fit:cover; flex-shrink:0; }

.rb-bubble{
  max-width: 82%; padding:10px 13px; border-radius:14px; font-size:13.8px; line-height:1.45;
  white-space:pre-wrap; word-wrap:break-word;
}
.rb-bot .rb-bubble{ background:#fff; border:1px solid var(--rb-line); border-bottom-left-radius:4px; color:var(--rb-ink); }
.rb-user .rb-bubble{ background: var(--rb-red); color:#fff; border-bottom-right-radius:4px; }

.rb-typing{ display:flex; gap:4px; padding:12px 14px; }
.rb-typing span{ width:6px; height:6px; border-radius:50%; background:#bbb; display:inline-block; animation: rb-typing 1.2s infinite ease-in-out; }
.rb-typing span:nth-child(2){ animation-delay:.15s; }
.rb-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes rb-typing{ 0%,60%,100%{ transform:translateY(0); opacity:.5;} 30%{ transform:translateY(-4px); opacity:1;} }

/* Quick replies (chips) */
.rb-chips{ display:flex; flex-wrap:wrap; gap:7px; margin: 2px 0 4px 34px; }
.rb-chip{
  background:#fff; border:1.5px solid var(--rb-red); color:var(--rb-red);
  padding:7px 13px; border-radius:20px; font-size:13px; cursor:pointer; font-weight:600;
  transition: background .15s, color .15s;
}
.rb-chip:hover{ background:var(--rb-red); color:#fff; }
.rb-chip.rb-chip-ghost{ border-color:var(--rb-line); color:var(--rb-ink-dim); }
.rb-chip.rb-chip-ghost:hover{ background:var(--rb-bg-soft); color:var(--rb-ink); border-color:var(--rb-ink-dim); }
.rb-chip.rb-chip-wa{ background:var(--rb-good); border-color:var(--rb-good); color:#fff; }
.rb-chip.rb-chip-wa:hover{ filter:brightness(1.08); }

/* Cards de produto */
.rb-cards{ display:flex; flex-direction:column; gap:8px; margin-left:34px; }
.rb-card{
  display:flex; gap:10px; background:#fff; border:1px solid var(--rb-line); border-radius:12px;
  padding:8px; cursor:pointer; transition: border-color .15s, transform .15s;
}
.rb-card:hover{ border-color: var(--rb-red); transform: translateY(-1px); }
.rb-card img{ width:56px; height:56px; border-radius:9px; object-fit:cover; flex-shrink:0; background:var(--rb-bg-soft); }
.rb-card .rb-card-info{ flex:1; min-width:0; }
.rb-card .rb-card-title{ font-weight:600; font-size:13.5px; color:var(--rb-ink); }
.rb-card .rb-card-sub{ font-size:11.5px; color:var(--rb-ink-dim); margin-top:1px; }
.rb-card .rb-card-price{ font-size:12.5px; color:var(--rb-red); font-weight:700; margin-top:3px; }

/* Itens do orçamento */
.rb-cart-item{
  background:#fff; border:1px solid var(--rb-line); border-radius:12px; padding:10px; margin-left:34px;
  display:flex; flex-direction:column; gap:4px;
}
.rb-cart-item .rb-ci-top{ display:flex; justify-content:space-between; gap:8px; font-size:13px; }
.rb-cart-item .rb-ci-name{ font-weight:600; color:var(--rb-ink); }
.rb-cart-item .rb-ci-price{ color:var(--rb-red); font-weight:700; white-space:nowrap; }
.rb-cart-item .rb-ci-meta{ font-size:11.5px; color:var(--rb-ink-dim); }
.rb-cart-item .rb-ci-actions{ display:flex; align-items:center; gap:8px; margin-top:4px; }
.rb-qty-btn{ width:22px; height:22px; border-radius:50%; border:1px solid var(--rb-line); background:#fff; cursor:pointer; font-size:13px; line-height:1; }
.rb-qty-btn:hover{ background:var(--rb-bg-soft); }
.rb-ci-remove{ margin-left:auto; font-size:11.5px; color:var(--rb-ink-dim); text-decoration:underline; cursor:pointer; background:none; border:none; }
.rb-ci-remove:hover{ color:var(--rb-red); }

.rb-total-box{
  margin-left:34px; background:#fff; border:1.5px dashed var(--rb-red); border-radius:12px; padding:10px 12px;
  font-size:13.5px; display:flex; justify-content:space-between; align-items:center; font-weight:700; color:var(--rb-ink);
}
.rb-total-box span.rb-total-val{ color:var(--rb-red); font-size:16px; }

/* Footer / input */
.rb-footer{ border-top:1px solid var(--rb-line); padding:10px; background:#fff; flex-shrink:0; }
.rb-quickbar{ display:flex; gap:6px; overflow-x:auto; padding-bottom:8px; }
.rb-quickbar .rb-chip{ white-space:nowrap; flex-shrink:0; }
.rb-inputrow{ display:flex; gap:8px; align-items:center; }
.rb-inputrow input[type=text]{
  flex:1; border:1.5px solid var(--rb-line); border-radius:22px; padding:10px 14px; font-size:13.5px;
  outline:none; font-family:inherit;
}
.rb-inputrow input[type=text]:focus{ border-color: var(--rb-red); }
.rb-send{
  width:38px; height:38px; border-radius:50%; border:none; background:var(--rb-red); color:#fff;
  cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:16px;
}
.rb-send:hover{ background:var(--rb-red-dark); }

@media (max-width: 480px){
  .rb-window{
    right:0; left:0; bottom:0; width:100%; max-width:100%; height:100%; max-height:100%; border-radius:0;
  }
  .rb-fab{ right:14px; bottom:80px; }
  .rb-wa-fab{ right:19px; bottom:14px; }
  #robson-root.rb-sem-wa .rb-fab{ right:14px; bottom:14px; }
  .rb-tooltip{ display:none; }
}