/* ============================================================
   COUDFY LIVE CHAT SIDEBAR — assets/css/livechat.css  v1.0
   Dark elegante · Azul CoudFy · Bot + Humano
   ============================================================ */

/* ── Variáveis — espelha o main.css da CoudFy ── */
:root {
  --cc-bg          : #05080f;
  --cc-surface     : #0c1220;
  --cc-surface2    : #131d2e;
  --cc-surface3    : #1e2d42;
  --cc-border      : rgba(59,130,246,.14);
  --cc-border-h    : rgba(59,130,246,.32);
  --cc-blue        : #3b82f6;
  --cc-blue-d      : #1d4ed8;
  --cc-blue-l      : #60a5fa;
  --cc-blue-g      : linear-gradient(135deg,#3b82f6,#60a5fa);
  --cc-blue-glow   : 0 0 24px rgba(59,130,246,.22);
  --cc-green       : #10b981;
  --cc-red         : #ef4444;
  --cc-yellow      : #f59e0b;
  --cc-white       : #ffffff;
  --cc-gray        : #98b4cc;
  --cc-gray2       : #6b84a0;
  --cc-gray3       : #334d69;
  --cc-width       : 440px;
  --cc-z           : 9000;
  --cc-spring      : cubic-bezier(.16,1,.3,1);
  --cc-ease        : cubic-bezier(.4,0,.2,1);
  --cc-dur         : .36s;
}

/* ── Reset parcial para o escopo do chat ── */
.cc-sidebar *, .cc-sidebar *::before, .cc-sidebar *::after,
.cc-trigger, .cc-overlay, .cc-modal-overlay,
.cc-modal-overlay *, .cc-modal *, .cc-modal *::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ============================================================
   TRIGGER — botão flutuante
   ============================================================ */
.cc-trigger {
  position      : fixed;
  bottom        : 28px;
  right         : 28px;
  width         : 60px;
  height        : 60px;
  border-radius : 50%;
  background    : var(--cc-surface2);
  border        : none;
  cursor        : pointer;
  z-index       : var(--cc-z);
  display       : flex;
  align-items   : center;
  justify-content: center;
  transition    : transform .28s var(--cc-spring), box-shadow .28s;
  box-shadow    : 0 4px 20px rgba(0,0,0,.5), var(--cc-blue-glow);
  -webkit-tap-highlight-color: transparent;
}
.cc-trigger:hover  { transform: scale(1.1); box-shadow: 0 8px 32px rgba(0,0,0,.6), 0 0 36px rgba(59,130,246,.3); }
.cc-trigger:active { transform: scale(.95); }
.cc-trigger.hidden { opacity:0; pointer-events:none; transform:scale(.8); transition:opacity .2s, transform .2s; }

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

/* Anel pulsante ao redor do trigger */
.cc-trigger-ring {
  position     : absolute;
  inset        : -6px;
  border-radius: 50%;
  border       : 1.5px solid rgba(59,130,246,.3);
  animation    : cc-ring-pulse 2.8s ease infinite;
  pointer-events: none;
}
@keyframes cc-ring-pulse {
  0%   { transform:scale(1); opacity:.7; }
  60%  { transform:scale(1.25); opacity:0; }
  100% { transform:scale(1.25); opacity:0; }
}

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

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

/* ============================================================
   SIDEBAR
   ============================================================ */
.cc-sidebar {
  position      : fixed;
  top           : 0;
  right         : 0;
  width         : var(--cc-width);
  height        : 100dvh;
  background    : var(--cc-bg);
  border-left   : 1px solid var(--cc-border);
  box-shadow    : -12px 0 48px rgba(0,0,0,.6), -2px 0 0 0 rgba(59,130,246,.08);
  z-index       : calc(var(--cc-z) + 2);
  display       : flex;
  flex-direction: column;
  transform     : translateX(100%);
  transition    : transform var(--cc-dur) var(--cc-spring);
  overflow      : hidden;
}
.cc-sidebar.open { transform:translateX(0); }

/* ============================================================
   HEADER
   ============================================================ */
.cc-header {
  display        : flex;
  align-items    : center;
  gap            : 8px;
  padding        : 0 16px 0 16px;
  height         : 62px;
  flex-shrink    : 0;
  background     : var(--cc-surface);
  border-bottom  : 1px solid var(--cc-border);
  position       : relative;
}
/* Linha de acento azul na base do header */
.cc-header::after {
  content   : '';
  position  : absolute;
  bottom    : 0;
  left      : 0;
  right     : 0;
  height    : 2px;
  background: var(--cc-blue-g);
  opacity   : .6;
}

/* Brand */
.cc-brand { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.cc-brand-avatar {
  position    : relative;
  width       : 36px;
  height      : 36px;
  flex-shrink : 0;
}
.cc-brand-img {
  width        : 36px;
  height       : 36px;
  border-radius: 50%;
  object-fit   : contain;
  border       : none;
  background   : transparent;
}
.cc-brand-online {
  position     : absolute;
  bottom       : -1px;
  right        : -1px;
  width        : 11px;
  height       : 11px;
  background   : var(--cc-green);
  border-radius: 50%;
  border       : 2px solid var(--cc-bg);
  animation    : cc-blink 2.5s ease infinite;
}
@keyframes cc-blink { 0%,100%{opacity:1} 50%{opacity:.4} }

.cc-brand-meta { display:flex; flex-direction:column; gap:2px; }
.cc-brand-name {
  font-size    : 13px;
  font-weight  : 700;
  color        : var(--cc-white);
  letter-spacing: .3px;
  line-height  : 1;
}

/* Pílula de modo (Bot / Humano / Fila) */
.cc-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;
}
.cc-mode-pill[data-mode="bot"]  { background:rgba(59,130,246,.12); color:var(--cc-blue-l); }
.cc-mode-pill[data-mode="live"] { background:rgba(16,185,129,.12); color:var(--cc-green); }
.cc-mode-pill[data-mode="queue"]{ background:rgba(245,158,11,.12); color:var(--cc-yellow); }

.cc-mode-dot {
  width        : 6px;
  height       : 6px;
  border-radius: 50%;
  flex-shrink  : 0;
  animation    : cc-blink 2s ease infinite;
  transition   : background .4s;
}
.cc-mode-pill[data-mode="bot"]   .cc-mode-dot { background:var(--cc-blue); }
.cc-mode-pill[data-mode="live"]  .cc-mode-dot { background:var(--cc-green); }
.cc-mode-pill[data-mode="queue"] .cc-mode-dot { background:var(--cc-yellow); }

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

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

.cc-hbtn {
  display        : flex;
  align-items    : center;
  gap            : 5px;
  background     : transparent;
  border         : 1px solid var(--cc-border);
  color          : var(--cc-gray2);
  font-size      : 12px;
  font-weight    : 600;
  padding        : 5px 9px;
  border-radius  : 8px;
  cursor         : pointer;
  transition     : all .2s;
  white-space    : nowrap;
}
.cc-hbtn:hover { color:var(--cc-blue-l); border-color:var(--cc-border-h); background:rgba(59,130,246,.07); }
.cc-hbtn i     { font-size:11px; }

/* Botão fechar */
.cc-close-btn {
  width          : 32px;
  height         : 32px;
  flex-shrink    : 0;
  margin-right   : 2px;
  background     : transparent;
  border         : 1px solid var(--cc-border);
  border-radius  : 8px;
  color          : var(--cc-gray2);
  font-size      : 14px;
  cursor         : pointer;
  display        : flex;
  align-items    : center;
  justify-content: center;
  transition     : all .2s;
}
.cc-close-btn:hover { color:var(--cc-white); border-color:var(--cc-gray3); background:var(--cc-surface2); }

/* ============================================================
   PANELS — ocupam espaço restante
   ============================================================ */
.cc-panel {
  flex          : 1;
  display       : flex;
  flex-direction: column;
  overflow      : hidden;
  min-height    : 0;
}
.cc-panel[hidden] { display:none !important; }

/* ============================================================
   WELCOME SCREEN
   ============================================================ */
.cc-welcome {
  flex          : 1;
  display       : flex;
  flex-direction: column;
  align-items   : center;
  padding       : 32px 22px 20px;
  overflow-y    : auto;
  min-height    : 0;
  overscroll-behavior: contain;
}
.cc-welcome.hidden { display:none; }

/* Avatar animado */
.cc-welcome-hero { margin-bottom:18px; position:relative; }
.cc-welcome-avatar-ring {
  width        : 80px;
  height       : 80px;
  border-radius: 50%;
  border       : 2px solid var(--cc-border-h);
  padding      : 4px;
  background   : var(--cc-surface2);
  animation    : cc-float 4s ease-in-out infinite;
  box-shadow   : 0 0 0 8px rgba(59,130,246,.05), var(--cc-blue-glow);
}
@keyframes cc-float {
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}
.cc-welcome-avatar {
  width        : 100%;
  height       : 100%;
  border-radius: 50%;
  object-fit   : contain;
}

.cc-welcome-title {
  font-size    : 20px;
  font-weight  : 700;
  color        : var(--cc-white);
  text-align   : center;
  margin-bottom: 6px;
  line-height  : 1.35;
}
.cc-welcome-title strong { color:var(--cc-blue-l); }
.cc-welcome-sub {
  font-size    : 13px;
  color        : var(--cc-gray2);
  text-align   : center;
  margin-bottom: 22px;
  line-height  : 1.55;
  max-width    : 320px;
}

/* Cards de modo: Bot vs Humano */
.cc-mode-cards {
  display      : flex;
  gap          : 10px;
  width        : 100%;
  margin-bottom: 22px;
}
.cc-mode-card {
  flex         : 1;
  display      : flex;
  align-items  : center;
  gap          : 10px;
  padding      : 12px 12px;
  background   : var(--cc-surface2);
  border       : 1.5px solid var(--cc-border);
  border-radius: 12px;
  cursor       : pointer;
  transition   : all .25s var(--cc-spring);
  user-select  : none;
  position     : relative;
  overflow     : hidden;
}
.cc-mode-card::before {
  content   : '';
  position  : absolute;
  inset     : 0;
  background: var(--cc-blue-g);
  opacity   : 0;
  transition: opacity .25s;
}
.cc-mode-card:hover { border-color:var(--cc-border-h); transform:translateY(-2px); }
.cc-mode-card:hover::before { opacity:.05; }
.cc-mode-card.selected { border-color:var(--cc-blue); box-shadow:0 0 0 1px var(--cc-blue) inset, 0 0 16px rgba(59,130,246,.15); }
.cc-mode-card.selected::before { opacity:.08; }

.cc-mode-card-icon {
  width        : 34px;
  height       : 34px;
  border-radius: 9px;
  display      : flex;
  align-items  : center;
  justify-content: center;
  font-size    : 16px;
  flex-shrink  : 0;
  position     : relative;
  z-index      : 1;
}
.cc-mode-card-icon.bot   { background:rgba(59,130,246,.15); color:var(--cc-blue); }
.cc-mode-card-icon.human { background:rgba(16,185,129,.12); color:var(--cc-green); }

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

.cc-mode-check {
  font-size : 13px;
  color     : var(--cc-blue);
  flex-shrink: 0;
  position  : relative;
  z-index   : 1;
  opacity   : 0;
  transform : scale(.6);
  transition: opacity .2s, transform .2s var(--cc-spring);
}
.cc-mode-card.selected .cc-mode-check { opacity:1; transform:scale(1); }
.cc-mode-arrow { font-size:12px; color:var(--cc-gray2); flex-shrink:0; position:relative; z-index:1; transition:transform .2s; }
.cc-mode-card:hover .cc-mode-arrow { transform:translateX(3px); color:var(--cc-gray); }

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

.cc-wopt-icon {
  width          : 30px;
  height         : 30px;
  border-radius  : 8px;
  background     : rgba(59,130,246,.08);
  border         : 1px solid var(--cc-border);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 13px;
  color          : var(--cc-blue-l);
  flex-shrink    : 0;
  transition     : background .2s, color .2s;
}
.cc-wopt:hover .cc-wopt-icon { background:rgba(59,130,246,.16); }
.cc-wopt > span:nth-child(2) { flex:1; font-size:13.5px; font-weight:500; color:var(--cc-gray); transition:color .2s; }
.cc-wopt:hover > span:nth-child(2) { color:var(--cc-white); }
.cc-wopt-arrow {
  font-size  : 16px;
  color      : var(--cc-gray3);
  transition : transform .2s, color .2s;
  flex-shrink: 0;
}

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

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

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

.cc-sug-rating {
  display      : flex;
  align-items  : center;
  gap          : 8px;
  padding      : 0 4px 10px;
  border-bottom: 1px solid var(--cc-border);
  margin-bottom: 2px;
  opacity      : 0;
  animation    : cc-sug-in .5s var(--cc-spring) forwards;
}
.cc-sug-rating-label { font-size:11px; color:var(--cc-gray3); flex:1; }
.cc-rate-btn {
  background  : transparent;
  border      : 1px solid var(--cc-surface3);
  border-radius: 6px;
  padding     : 3px 10px;
  color       : var(--cc-white);
  font-size   : 12px;
  cursor      : pointer;
  transition  : all .2s;
  display     : flex;
  align-items : center;
  gap         : 5px;
}
.cc-rate-btn:hover   { border-color:var(--cc-gray3); }
.cc-rate-btn.positive{ border-color:var(--cc-green); background:rgba(16,185,129,.1); color:var(--cc-green); }
.cc-rate-btn.negative{ border-color:var(--cc-red);   background:rgba(239,68,68,.1);  color:var(--cc-red);   }

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

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

/* ── Mensagem do Usuário ── */
.cc-msg-user {
  display        : flex;
  justify-content: flex-end;
  margin-bottom  : 12px;
  opacity        : 0;
  animation      : cc-user-in .32s var(--cc-spring) forwards;
}
.cc-msg-user-bubble {
  max-width    : 76%;
  background   : var(--cc-blue-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(59,130,246,.25);
}

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

/* ── Mensagem do Atendente (Live Chat) ── */
.cc-msg-agent {
  display       : flex;
  flex-direction: column;
  gap           : 5px;
  margin-bottom : 18px;
  opacity       : 0;
  animation     : cc-msg-in .4s var(--cc-spring) forwards;
}
.cc-msg-agent-header { display:flex; align-items:center; gap:9px; }
.cc-msg-agent-avatar {
  width        : 26px;
  height       : 26px;
  border-radius: 50%;
  background   : linear-gradient(135deg,var(--cc-green),#059669);
  display      : flex;
  align-items  : center;
  justify-content: center;
  color        : #fff;
  font-size    : 11px;
  font-weight  : 700;
  flex-shrink  : 0;
  border       : 1.5px solid rgba(16,185,129,.4);
}
.cc-msg-agent-name { font-size:12px; font-weight:700; color:var(--cc-green); letter-spacing:.3px; }
.cc-msg-agent-badge {
  font-size    : 10px;
  font-weight  : 600;
  padding      : 1px 7px;
  border-radius: 10px;
  background   : rgba(16,185,129,.12);
  color        : var(--cc-green);
  border       : 1px solid rgba(16,185,129,.25);
}
.cc-msg-agent-text {
  color       : var(--cc-gray);
  font-size   : 14px;
  line-height : 1.7;
  padding-left: 35px;
}
.cc-msg-agent-time {
  font-size   : 11px;
  color       : var(--cc-gray3);
  padding-left: 35px;
  margin-top  : 2px;
}

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

/* Imagem/arquivo em mensagem */
.cc-msg-img {
  display      : block;
  max-width    : 210px;
  max-height   : 180px;
  border-radius: 10px;
  object-fit   : cover;
  cursor       : pointer;
  margin-left  : 35px;
  border       : 1px solid var(--cc-border);
  transition   : opacity .2s;
}
.cc-msg-img:hover { opacity:.85; }

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

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

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

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

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

/* Itens formatados do bot */
.cc-bot-main-title {
  display      : block;
  font-size    : 14.5px;
  font-weight  : 700;
  color        : var(--cc-white);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cc-border);
}
.cc-bot-section-title {
  display       : block;
  font-size     : 10px;
  font-weight   : 700;
  color         : var(--cc-blue-l);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-top    : 12px;
  margin-bottom : 4px;
  padding-bottom: 4px;
  border-bottom : 1px solid rgba(59,130,246,.2);
}
.cc-bot-list-item {
  display    : block;
  font-size  : 14px;
  color      : var(--cc-gray);
  line-height: 1.65;
  padding    : 3px 0;
  border-bottom: 1px solid rgba(255,255,255,.03);
}
.cc-bot-list-item:last-child { border-bottom:none; }
.cc-bot-list-item::before { content:'◦ '; color:var(--cc-blue); }

/* ============================================================
   BARRA DE TRANSFERÊNCIA
   ============================================================ */
.cc-transfer-bar {
  display      : flex;
  align-items  : center;
  justify-content: space-between;
  gap          : 10px;
  padding      : 10px 16px;
  background   : rgba(59,130,246,.06);
  border-top   : 1px solid rgba(59,130,246,.14);
  flex-shrink  : 0;
  transition   : opacity .3s, transform .3s var(--cc-spring);
}
.cc-transfer-bar.hidden { display:none; }
.cc-transfer-bar span {
  font-size : 12.5px;
  color     : var(--cc-gray2);
  display   : flex;
  align-items: center;
  gap       : 7px;
}
.cc-transfer-bar span i { color:var(--cc-blue-l); }
.cc-transfer-btn {
  flex-shrink  : 0;
  padding      : 7px 14px;
  background   : var(--cc-blue-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(59,130,246,.3);
  white-space  : nowrap;
}
.cc-transfer-btn:hover  { transform:translateY(-1px); box-shadow:0 4px 16px rgba(59,130,246,.4); }
.cc-transfer-btn:active { transform:translateY(0); }

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

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

/* Row do input */
.cc-input-row {
  display      : flex;
  align-items  : center;
  gap          : 8px;
  background   : var(--cc-surface2);
  border       : 1.5px solid var(--cc-border);
  border-radius: 14px;
  padding      : 7px 9px;
  transition   : border-color .2s;
}
.cc-input-row:focus-within { border-color:rgba(59,130,246,.45); box-shadow:0 0 0 3px rgba(59,130,246,.07); }

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

.cc-textarea {
  flex       : 1;
  background : transparent;
  border     : none;
  outline    : none;
  color      : var(--cc-white);
  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;
}
.cc-textarea::placeholder { color:var(--cc-gray3); }
.cc-textarea::-webkit-scrollbar { display:none; }

.cc-send-btn {
  width          : 34px;
  height         : 34px;
  flex-shrink    : 0;
  background     : var(--cc-blue-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(59,130,246,.3);
  -webkit-tap-highlight-color: transparent;
}
.cc-send-btn:hover   { transform:scale(1.08); box-shadow:0 4px 14px rgba(59,130,246,.45); }
.cc-send-btn:active  { transform:scale(.94); }
.cc-send-btn:disabled{ opacity:.35; cursor:not-allowed; transform:none; }

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

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

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

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

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

.cc-hist-item-footer {
  display    : flex;
  align-items: center;
  gap        : 7px;
  margin-top : 2px;
  flex-wrap  : wrap;
}
.cc-hist-badge {
  font-size    : 11px;
  font-weight  : 600;
  padding      : 2px 8px;
  border-radius: 8px;
}
.cc-hist-badge.ativa      { background:rgba(16,185,129,.1); color:var(--cc-green); }
.cc-hist-badge.encerrada  { background:var(--cc-surface3); color:var(--cc-gray3); }
.cc-hist-badge.bot        { background:rgba(59,130,246,.1); color:var(--cc-blue-l); }
.cc-hist-badge.livechat   { background:rgba(16,185,129,.08); color:var(--cc-green); }

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

/* ============================================================
   MODAL DE CONFIRMAÇÃO
   ============================================================ */
.cc-modal-overlay {
  position      : fixed;
  inset         : 0;
  background    : rgba(5,8,15,.8);
  backdrop-filter: blur(7px);
  z-index       : calc(var(--cc-z) + 10);
  display       : flex;
  align-items   : center;
  justify-content: center;
  opacity       : 0;
  pointer-events: none;
  transition    : opacity .25s var(--cc-ease);
}
.cc-modal-overlay.show { opacity:1; pointer-events:all; }

.cc-modal {
  background   : var(--cc-surface);
  border       : 1px solid var(--cc-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,.6), var(--cc-blue-glow);
  transform    : scale(.88) translateY(16px);
  transition   : transform .3s var(--cc-spring);
}
.cc-modal-overlay.show .cc-modal { transform:scale(1) translateY(0); }

.cc-modal-icon-wrap {
  width          : 56px;
  height         : 56px;
  background     : rgba(239,68,68,.1);
  border         : 1.5px solid rgba(239,68,68,.25);
  border-radius  : 50%;
  display        : flex;
  align-items    : center;
  justify-content: center;
  margin         : 0 auto 18px;
  font-size      : 22px;
  color          : var(--cc-red);
}
.cc-modal h3 { font-size:16px; font-weight:700; color:var(--cc-white); margin-bottom:8px; }
.cc-modal p  { font-size:13px; color:var(--cc-gray2); margin-bottom:22px; line-height:1.55; }
.cc-modal-actions { display:flex; gap:10px; }
.cc-modal-cancel {
  flex        : 1;
  padding     : 10px;
  background  : var(--cc-surface2);
  border      : 1px solid var(--cc-border);
  border-radius: 10px;
  color       : var(--cc-gray);
  font-size   : 13.5px;
  font-weight : 600;
  cursor      : pointer;
  transition  : all .2s;
}
.cc-modal-cancel:hover { color:var(--cc-white); border-color:var(--cc-gray3); }
.cc-modal-confirm {
  flex         : 1;
  padding      : 10px;
  background   : rgba(239,68,68,.15);
  border       : 1.5px solid var(--cc-red);
  border-radius: 10px;
  color        : var(--cc-red);
  font-size    : 13.5px;
  font-weight  : 600;
  cursor       : pointer;
  transition   : all .2s;
}
.cc-modal-confirm:hover { background:rgba(239,68,68,.28); }

/* ============================================================
   MOBILE (≤ 768px)
   ============================================================ */
/* Brand sem avatar — header simplificado */
.cc-brand { gap:0; }
.cc-brand-meta { display:flex; align-items:center; gap:8px; }

@media (max-width:768px) {
  :root { --cc-width:100vw; }

  .cc-sidebar { border-left:none; box-shadow:none; }
  .cc-trigger { bottom:18px; right:18px; width:54px; height:54px; }
  .cc-trigger-logo { width:34px; height:34px; }

  .cc-welcome   { padding:24px 16px 16px; }
  .cc-messages  { padding:14px 12px 6px; }
  .cc-input-wrap{ padding:8px 12px 12px; }

  .cc-hbtn span { display:none; }
  .cc-hbtn      { padding:5px 8px; }

  .cc-msg-bot-text, .cc-msg-agent-text, .cc-msg-suggestions,
  .cc-msg-agent-time, .cc-thinking-steps { padding-left:0; }

  .cc-msg-user-bubble { max-width:85%; }

  .cc-mode-cards { flex-direction:column; gap:8px; }
  .cc-mode-card  { padding:10px; }

  .cc-attach-btn,
  .cc-send-btn { width:38px; height:38px; }

  body.cc-open {
    overflow  : hidden !important;
    position  : fixed;
    width     : 100%;
    left      : 0;
  }
}

/* ============================================================
   BUBBLE DE ENGAJAMENTO — aparece ao lado esquerdo do trigger
   ============================================================ */
.cc-bubble {
  position      : fixed;
  bottom        : 36px;
  right         : 106px;         /* trigger: right:28 + width:60 + gap:18 */
  background    : var(--cc-surface);
  border        : 1px solid var(--cc-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,.5), var(--cc-blue-glow);
  z-index       : calc(var(--cc-z) - 1);
  opacity       : 0;
  transform     : translateX(8px) scale(.95);
  transition    : opacity .35s var(--cc-spring), transform .35s var(--cc-spring);
  pointer-events: none;
}
.cc-bubble.show {
  opacity       : 1;
  transform     : translateX(0) scale(1);
  pointer-events: auto;
}
.cc-bubble-msg {
  font-size  : 13.5px;
  font-weight: 600;
  color      : var(--cc-white);
  line-height: 1.5;
  margin     : 0;
}
.cc-bubble-sub {
  display   : block;
  font-size : 11.5px;
  color     : var(--cc-gray);
  margin-top: 3px;
}
/* Seta apontando para o trigger (direita) */
.cc-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(--cc-border-h);
}
.cc-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(--cc-surface);
  z-index      : 1;
}
.cc-bubble-close {
  position    : absolute;
  top         : 8px;
  right       : 9px;
  background  : transparent;
  border      : none;
  color       : var(--cc-gray2);
  cursor      : pointer;
  font-size   : 12px;
  line-height : 1;
  padding     : 2px 4px;
  border-radius: 4px;
  transition  : color .2s;
  z-index     : 2;
}
.cc-bubble-close:hover { color: var(--cc-white); }

/* dot pulsante no texto da bubble */
.cc-bubble-dot {
  display      : inline-block;
  width        : 8px;
  height       : 8px;
  background   : var(--cc-green);
  border-radius: 50%;
  margin-right : 6px;
  vertical-align: middle;
  box-shadow   : 0 0 0 0 rgba(16,185,129,.5);
  animation    : cc-bubble-pulse 2s ease infinite;
}
@keyframes cc-bubble-pulse {
  0%   { box-shadow:0 0 0 0 rgba(16,185,129,.5); }
  70%  { box-shadow:0 0 0 7px rgba(16,185,129,0); }
  100% { box-shadow:0 0 0 0 rgba(16,185,129,0); }
}

/* ============================================================
   IMAGENS E VÍDEOS NAS MENSAGENS
   ============================================================ */
.cc-msg-img {
  max-width    : 220px;
  max-height   : 180px;
  border-radius: 10px;
  object-fit   : cover;
  display      : block;
  cursor       : zoom-in;
  border       : 1px solid rgba(59,130,246,.2);
  transition   : opacity .2s, transform .2s;
  margin-bottom: 2px;
}
.cc-msg-img:hover { opacity:.88; transform:scale(1.01); }

.cc-msg-video {
  display      : block;
  max-width    : 240px;
  max-height   : 180px;
  border-radius: 10px;
  border       : 1px solid rgba(59,130,246,.2);
  width        : 100%;
  margin-bottom: 2px;
}

/* Preview de arquivo genérico (na bolha do usuário) */
.cc-msg-file-link {
  display        : flex;
  align-items    : center;
  gap            : 8px;
  padding        : 8px 12px;
  background     : rgba(59,130,246,.08);
  border         : 1px solid rgba(59,130,246,.2);
  border-radius  : 10px;
  color          : var(--cc-blue-l);
  text-decoration: none;
  font-size      : 12.5px;
  font-weight    : 600;
  max-width      : 220px;
  word-break     : break-all;
  transition     : background .2s;
}
.cc-msg-file-link:hover { background: rgba(59,130,246,.15); }
.cc-msg-file-link i { font-size:18px; flex-shrink:0; }

/* Preview de imagem no attach-preview (antes de enviar) */
#ccAttachPrev.has-img img {
  display      : block;
  max-height   : 70px;
  max-width    : 100%;
  border-radius: 8px;
  margin-bottom: 4px;
  border       : 1px solid rgba(59,130,246,.2);
}

/* ============================================================
   VER TÓPICOS — botão abaixo das sugestões
   ============================================================ */
.cc-topics-btn {
  display      : flex;
  align-items  : center;
  gap          : 7px;
  margin-top   : 8px;
  padding      : 7px 12px;
  background   : rgba(59,130,246,.06);
  border       : 1px dashed rgba(59,130,246,.25);
  border-radius: 10px;
  color        : var(--cc-blue-l);
  font-size    : 12px;
  font-weight  : 600;
  cursor       : pointer;
  transition   : all .2s;
  width        : fit-content;
}
.cc-topics-btn:hover {
  background   : rgba(59,130,246,.12);
  border-color : rgba(59,130,246,.45);
  color        : var(--cc-white);
}
.cc-topics-btn i { font-size:11px; opacity:.8; }

/* Grid de chips de tópicos */
.cc-topics-grid {
  display        : flex;
  flex-wrap      : wrap;
  gap            : 7px;
  padding-top    : 8px;
}
.cc-topic-chip {
  display        : flex;
  align-items    : center;
  gap            : 6px;
  padding        : 7px 12px;
  background     : var(--cc-surface2);
  border         : 1px solid var(--cc-border-h);
  border-radius  : 20px;
  color          : var(--cc-gray);
  font-size      : 12px;
  font-weight    : 600;
  cursor         : pointer;
  transition     : all .2s;
  animation      : cc-sug-in .3s var(--cc-spring) both;
}
.cc-topic-chip i { font-size:11px; color:var(--cc-blue-l); }
.cc-topic-chip:hover {
  background     : var(--cc-surface3);
  border-color   : var(--cc-blue);
  color          : var(--cc-white);
}

/* ============================================================
   TÓPICOS — lista vertical (substitui grid de chips)
   ============================================================ */
.cc-topics-list {
  display       : flex;
  flex-direction: column;
  gap           : 4px;
  padding-top   : 6px;
}
.cc-topic-row {
  display        : flex;
  align-items    : center;
  gap            : 10px;
  padding        : 9px 12px;
  background     : var(--cc-surface2);
  border         : 1px solid var(--cc-border);
  border-radius  : 10px;
  cursor         : pointer;
  transition     : all .2s;
  animation      : cc-sug-in .3s var(--cc-spring) both;
}
.cc-topic-row:hover {
  background     : var(--cc-surface3);
  border-color   : var(--cc-blue);
}
.cc-topic-row-ico {
  width          : 28px;
  height         : 28px;
  border-radius  : 7px;
  background     : var(--cc-blue-dim);
  border         : 1px solid rgba(59,130,246,.18);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 12px;
  color          : var(--cc-blue-l);
  flex-shrink    : 0;
}
.cc-topic-row-label {
  flex     : 1;
  font-size: 13px;
  font-weight: 600;
  color    : var(--cc-gray);
}
.cc-topic-row:hover .cc-topic-row-label { color:var(--cc-white); }
.cc-topic-row-arrow {
  font-size : 14px;
  color     : var(--cc-gray2);
  opacity   : .6;
}
.cc-topic-row:hover .cc-topic-row-arrow { opacity:1; color:var(--cc-blue-l); }