/* ==========================================================================
   DeServ Academy Chat Widget — folha de estilos (ISOLADA)
   TODAS as regras abaixo são escopadas em #widgetRoot (widget de chat)
   ou .debug-panel (painel de debug, irmão de #widgetRoot).
   NÃO existem mais seletores globais que possam afetar um site WordPress
   hospedeiro (nenhum body/html/*/button/input/h1/etc. solto).
   ========================================================================== */

/* =====================================================================
   Bloco 1 — Variáveis de design tokens (fonte única de verdade).
   Escopadas em #widgetRoot E em .debug-panel, pois o painel DEBUG é
   injetado fora do #widgetRoot (irmão direto de body), mas precisa
   das mesmas variáveis.
   ===================================================================== */
#widgetRoot,
.debug-panel{
  --chat-brand-color:#342D66;
  --chat-brand-hover:#28224f;
  --chat-bot-bubble-bg:#F5F5F5;
  --chat-bot-bubble-text:#333333;
  --chat-user-bubble-bg:#DFDDE7;
  --chat-user-bubble-text:#121212;
  --chat-window-bg:#FFFFFF;
  --chat-footer-text:#666666;
  --chat-radius-window:18px;
  --chat-radius-component:10px;
  --chat-radius-bubble:16px;
  --chat-radius-bubble-tail:4px;
  --chat-timestamp-color:#A9A6B8;
  --chat-green:#2DC464;
  --chat-green-hover:#28B05A;
  --chat-blue-accent:#0091FF;
  --chat-font:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --chat-font-size:15px;

  /* Aliases para estabilidade de componentes já existentes */
  --brand:var(--chat-brand-color);
  --brand-strong:var(--chat-brand-hover);
  --brand-soft:var(--chat-user-bubble-bg);
  --success:var(--chat-green);
  --success-hover:var(--chat-green-hover);
  --text:var(--chat-user-bubble-text);
  --text-soft:var(--chat-bot-bubble-text);
  --text-muted:var(--chat-footer-text);
  --text-faint:#999999;
  --surface:var(--chat-window-bg);
  --surface-sunken:var(--chat-bot-bubble-bg);
  --surface-page:#F7F6FA;
  --border:#E7E5EE;
  --on-brand:#FFFFFF;
  --focus-visible:#5A4FA9;
  --error:#c0392b;
  --error-soft:#fdecea;
  --shadow-panel:0 8px 30px rgba(0,0,0,0.25);
  --shadow-launcher:0 4px 12px rgba(0,0,0,0.2);
  --radius-panel:var(--chat-radius-window);
  --radius-card:var(--chat-radius-component);
  --radius-bubble:var(--chat-radius-component);
  --radius-bubble-bot:var(--chat-radius-bubble) var(--chat-radius-bubble) var(--chat-radius-bubble) var(--chat-radius-bubble-tail);
  --radius-bubble-user:var(--chat-radius-bubble) var(--chat-radius-bubble) var(--chat-radius-bubble-tail) var(--chat-radius-bubble);
  --radius-component:var(--chat-radius-component);
  --font-display:var(--chat-font);
  --font-body:var(--chat-font);
  --base-font-size:var(--chat-font-size);
  --header-height:60px;
  --launcher-size:55px;
}

/* =====================================================================
   Tema escuro DESATIVADO por padrão.
   O widget de referência (Zoho SalesIQ do site DeServ) NÃO usa tema escuro
   automático. Para reativar no futuro, remova os comentários dos 2 blocos
   abaixo (@media prefers-color-scheme e [data-theme=dark]).
   ===================================================================== */
/*
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) #widgetRoot,
  :root:not([data-theme="light"]) .debug-panel{
    --chat-brand-hover:#413A7A;
    --chat-user-bubble-bg:#352F54;
    --chat-user-bubble-text:#F1EEE9;
    --chat-bot-bubble-bg:#272335;
    --chat-bot-bubble-text:#DDD8CB;
    --chat-window-bg:#1C1A25;
    --chat-footer-text:#A6A096;
    --surface-page:#15131E;
    --border:#3A3452;
    --text-faint:#746F64;
    --error:#FF7A7A;
    --error-soft:#3B2125;
    --shadow-panel:0 8px 30px rgba(0,0,0,0.6);
    --shadow-launcher:0 10px 26px -8px rgba(0,0,0,0.6);
  }
}
:root[data-theme="dark"] #widgetRoot,
:root[data-theme="dark"] .debug-panel{
  --chat-brand-hover:#413A7A;
  --chat-user-bubble-bg:#352F54;
  --chat-user-bubble-text:#F1EEE9;
  --chat-bot-bubble-bg:#272335;
  --chat-bot-bubble-text:#DDD8CB;
  --chat-window-bg:#1C1A25;
  --chat-footer-text:#A6A096;
  --surface-page:#15131E;
  --border:#3A3452;
  --text-faint:#746F64;
  --error:#FF7A7A;
  --error-soft:#3B2125;
  --shadow-panel:0 8px 30px rgba(0,0,0,0.6);
  --shadow-launcher:0 10px 26px -8px rgba(0,0,0,0.6);
}
*/

/* =====================================================================
   Bloco 2 — box-sizing ISOLADO (não afeta elementos fora do widget).
   ===================================================================== */
#widgetRoot,
#widgetRoot *,
#widgetRoot *::before,
#widgetRoot *::after,
.debug-panel,
.debug-panel *,
.debug-panel *::before,
.debug-panel *::after{
  box-sizing:border-box;
}

/* =====================================================================
   Bloco 3 — Estilos utilitários internos (escopados).
   .monospace é usado por value blocks dentro do debug-panel;
   era global e quebrava qualquer <pre>/<code>/<tt> do WordPress.
   ===================================================================== */
#widgetRoot .monospace,
.debug-panel .monospace{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* =====================================================================
   Bloco 4 — Painel de DEBUG (painel fixo lateral)
   Escopado via .debug-panel (container self-rooted, irmão de body,
   injetado separadamente por embed.js / index.php).
   ===================================================================== */
.debug-panel{
  position:fixed;
  top:0;left:0;
  width:340px;
  max-width:90vw;
  height:100vh;
  background:var(--surface);
  border-right:1px solid var(--border);
  box-shadow:var(--shadow-panel);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  z-index:9998;
  font-family:var(--font-body);
  font-size:var(--base-font-size);
}
.debug-panel .debug-header{
  flex:none;
  height:var(--header-height);
  padding:0 16px;
  background:var(--brand);
  color:var(--on-brand);
  display:flex;
  align-items:center;
  border-radius:0;
}
.debug-panel .debug-title{
  margin:0;
  font-family:var(--font-display);
  font-size:15px;
  font-weight:700;
  letter-spacing:.2px;
}
.debug-panel .debug-content{
  flex:1;
  overflow-y:auto;
  padding:16px 18px 24px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.debug-panel .debug-item{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.debug-panel .debug-label{
  font-size:11.5px;
  font-weight:700;
  color:var(--text-muted);
  letter-spacing:.3px;
  text-transform:uppercase;
}
.debug-panel .debug-value{
  font-size:12.5px;
  color:var(--text);
  word-break:break-all;
  background:var(--surface-sunken);
  padding:6px 10px;
  border-radius:8px;
  line-height:1.4;
}
.debug-panel .debug-actions{padding-top:4px;}
.debug-panel .debug-btn{
  width:100%;
  padding:9px 14px;
  border-radius:var(--radius-component);
  border:1px solid var(--brand);
  background:var(--brand);
  color:var(--on-brand);
  font-family:var(--font-body);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:opacity .15s ease, transform .15s ease;
}
.debug-panel .debug-btn:hover{opacity:.92; background:var(--brand-strong);}
.debug-panel .debug-block{
  background:var(--surface-sunken);
  border-radius:var(--radius-component);
  padding:2px 10px;
}
.debug-panel .debug-summary{
  cursor:pointer;
  padding:8px 0;
  font-size:12.5px;
  font-weight:600;
  color:var(--text-soft);
  list-style:none;
  user-select:none;
}
.debug-panel .debug-summary::-webkit-details-marker{display:none;}
.debug-panel .debug-summary::before{
  content:"▸ ";
  color:var(--text-faint);
  display:inline-block;
  transition:transform .15s ease;
}
.debug-panel .debug-block[open] .debug-summary::before{transform:rotate(90deg);}
.debug-panel .debug-pre{
  margin:0 0 10px;
  padding:10px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  font-size:11.5px;
  color:var(--text);
  line-height:1.5;
  overflow-x:auto;
  max-height:280px;
}

/* =====================================================================
   Bloco 4-B (HARDENING / DEFENSIVO) — Anti-invasão de temas WordPress.
   Temas WP conflituosos (Divi / Float Modern / Avada / Elementor) costumam
   injetar regras globais agressivas como:
       * { all: unset }
       *, *::before { display:block; position:relative; float:none; clear:both }
       button, textarea, input { border:0; padding:0; appearance:none; background:none }
       section, nav, header, footer, form, aside { position:static; overflow:visible }

   Estas regras abaixo SÃO ESCÓPICAS, usam especificidade máxima no escopo do
   widget e preservam 100% a aparência visual original do chat (cores / sombras /
   tamanhos). !important é usado SOMENTE aqui, como "camada anti-roubo" contra regras
   globais agressivas do tema.
   ===================================================================== */
#widgetRoot,
#widgetRoot::before,
#widgetRoot::after,
.debug-panel,
.debug-panel::before,
.debug-panel::after{
  position:fixed !important;
  float:none !important;
  clear:none !important;
  display:flex !important;
  opacity:1 !important;
  transform:none !important;
  visibility:visible !important;
  overflow:visible !important;
  pointer-events:auto !important;
  background:transparent !important;
  border:0 !important;
  margin:0 !important;
  padding:0 !important;
}
#widgetRoot{
  right:28px !important;
  bottom:28px !important;
  z-index:99999 !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  gap:16px !important;
  font-family:var(--chat-font) !important;
  font-size:var(--chat-font-size) !important;
  line-height:1.5 !important;
  color:var(--text) !important;
  text-align:left !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  text-decoration:none !important;
}
.debug-panel{
  top:0 !important;
  left:0 !important;
  z-index:99998 !important;
  width:340px !important;
  max-width:90vw !important;
  height:100vh !important;
  flex-direction:column !important;
  overflow:hidden !important;
  background:var(--surface) !important;
  border-right:1px solid var(--border) !important;
  box-shadow:var(--shadow-panel) !important;
  font-family:var(--chat-font) !important;
  font-size:var(--chat-font-size) !important;
  line-height:1.5 !important;
}
#widgetRoot *,
#widgetRoot *::before,
#widgetRoot *::after,
.debug-panel *,
.debug-panel *::before,
.debug-panel *::after{
  float:none !important;
  clear:none !important;
  visibility:visible !important;
  clip:auto !important;
  clip-path:none !important;
  text-align:left;
  text-transform:none;
  letter-spacing:normal;
  text-decoration:none;
  font-style:normal;
  list-style:none;
  width:auto;
  height:auto;
  margin:0;
  padding:0;
  border:0;
  font-family:inherit;
  line-height:inherit;
}
#widgetRoot *,
.debug-panel *{
  position:relative;
}
#widgetRoot [hidden],
.debug-panel [hidden]{
  display:none !important;
}
#widgetRoot button,
#widgetRoot input[type=button],
#widgetRoot input[type=submit],
#widgetRoot textarea,
.debug-panel button{
  appearance:none !important;
  -webkit-appearance:none !important;
  cursor:pointer !important;
  font:inherit !important;
  line-height:inherit !important;
  letter-spacing:inherit !important;
  text-transform:inherit !important;
  padding:0 !important;
  margin:0 !important;
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  outline:none !important;
}
#widgetRoot textarea{
  resize:none !important;
  cursor:text !important;
  overflow:hidden !important;
  white-space:pre-wrap !important;
  word-wrap:break-word !important;
}
#widgetRoot svg,
.debug-panel svg{
  display:block !important;
  flex:none !important;
  width:auto;
  height:auto;
  max-width:none;
  vertical-align:baseline !important;
  fill:none;
  stroke:currentColor;
}

/* =====================================================================
   Bloco 5 — Widget de CHAT (tudo escopado em #widgetRoot)
   ===================================================================== */
#widgetRoot{
  right:28px !important;
  bottom:28px !important;
  z-index:9999 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  justify-content:flex-end !important;
  gap:16px !important;
  font-family:var(--font-body) !important;
  font-size:var(--base-font-size) !important;
  position:fixed !important;
}

/* ----- Launcher ----- */
#widgetRoot .launcher{
  width:var(--launcher-size) !important; height:var(--launcher-size) !important;
  border-radius:100% !important;
  border:none !important;
  background:var(--brand) !important;
  color:var(--on-brand) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  cursor:pointer !important;
  box-shadow:var(--shadow-launcher) !important;
  position:relative !important;
  transition:transform .18s ease, background-color .18s ease !important;
  z-index:2 !important;
  padding:0 !important;
  margin:0 !important;
  overflow:visible !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  font:inherit !important;
  line-height:1 !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  text-align:center !important;
  min-width:0 !important;
  min-height:0 !important;
  outline:none !important;
}
#widgetRoot .launcher:hover{transform:translateY(-2px) !important; background:var(--brand-strong) !important;}
#widgetRoot .launcher:focus-visible{outline:2px solid var(--focus-visible) !important; outline-offset:3px !important;}
#widgetRoot .launcher svg{position:absolute !important; transition:opacity .16s ease, transform .2s ease !important;}
#widgetRoot .launcher .ic-chat{opacity:1 !important; transform:scale(1) rotate(0) !important;}
#widgetRoot .launcher .ic-close{opacity:0 !important; transform:scale(.5) rotate(-45deg) !important;}
#widgetRoot[data-open="true"] .launcher .ic-chat{opacity:0 !important; transform:scale(.5) rotate(45deg) !important;}
#widgetRoot[data-open="true"] .launcher .ic-close{opacity:1 !important; transform:scale(1) rotate(0) !important;}
#widgetRoot[data-open="true"] .launcher{opacity:0 !important; pointer-events:none !important; transform:translateY(12px) scale(.7) !important;}
#widgetRoot[data-open="false"] .launcher{opacity:1 !important; pointer-events:auto !important; transform:translateY(0) scale(1) !important;}

/* ----- Painel ----- */
#widgetRoot .panel{
  display:none !important;
  width:361px !important;
  max-width:calc(100vw - 40px) !important;
  height:640px !important;
  max-height:78vh !important;
  background:var(--chat-window-bg) !important;
  border-radius:var(--chat-radius-window) !important;
  font-family:var(--chat-font) !important;
  font-size:var(--chat-font-size) !important;
  overflow:hidden !important;
  box-shadow:var(--shadow-panel) !important;
  flex-direction:column !important;
  transform-origin:bottom right !important;
  transform:scale(.92) translateY(12px) !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), opacity .18s ease !important;
  border:0 !important;
  margin:0 !important;
  padding:0 !important;
  position:relative !important;
  z-index:1 !important;
}
#widgetRoot[data-open="true"] .panel{
  display:flex !important;
  transform:scale(1) translateY(0) !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

/* ----- Header do painel ----- */
#widgetRoot .panel-header{
  flex:none !important;
  height:var(--header-height) !important;
  background:var(--brand) !important;
  color:var(--on-brand) !important;
  padding:0 16px !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  border-radius:var(--radius-panel) var(--radius-panel) 0 0 !important;
  margin:0 !important;
  border:0 !important;
  position:relative !important;
  width:100% !important;
  box-sizing:border-box !important;
}
#widgetRoot .back-btn{
  flex:none !important;
  width:34px !important; height:34px !important;
  border-radius:100% !important;
  border:none !important;
  background:transparent !important;
  color:var(--on-brand) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  cursor:pointer !important;
  padding:0 !important;
  margin:0 !important;
  appearance:none !important;
}
#widgetRoot .back-btn:hover{background:rgba(255,255,255,.12) !important;}
#widgetRoot .header-id{display:flex !important; align-items:center !important; gap:10px !important; flex:1 !important; min-width:0 !important;}
#widgetRoot .avatar{
  flex:none !important;
  width:36px !important; height:36px !important;
  border-radius:100% !important;
  background:rgba(255,255,255,.16) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  color:var(--on-brand) !important;
  padding:0 !important;
  margin:0 !important;
}
#widgetRoot .header-text{display:flex !important; flex-direction:column !important; gap:2px !important; min-width:0 !important;}
#widgetRoot .header-text strong{
  margin:0 !important;
  font-size:16px !important;
  font-weight:700 !important;
  color:var(--on-brand) !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
#widgetRoot .header-text span{
  font-size:12.5px !important;
  color:rgba(255,255,255,.82) !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
#widgetRoot .icon-btn{
  flex:none !important;
  width:34px !important; height:34px !important;
  border-radius:100% !important;
  border:none !important;
  background:rgba(0,0,0,0.34) !important;
  color:#fff !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  cursor:pointer !important;
  padding:0 !important;
  margin:0 !important;
  appearance:none !important;
}
#widgetRoot .icon-btn:hover{background:rgba(0,0,0,0.48) !important;}

/* ----- Body / views ----- */
#widgetRoot .panel-body{
  flex:1 !important;
  min-height:0 !important;
  overflow-y:auto !important;
  background:var(--surface) !important;
  margin:0 !important;
  padding:0 !important;
  width:100% !important;
  box-sizing:border-box !important;
  position:relative !important;
  display:block !important;
}
#widgetRoot .view{padding:18px !important; display:block !important; margin:0 !important; box-sizing:border-box !important; position:relative !important;}
#widgetRoot .view[hidden]{display:none !important;}
#widgetRoot .view-chat{padding:14px 0 0 !important; display:flex !important; flex-direction:column !important; height:100% !important;}

/* ----- Greeting / quick actions ----- */
#widgetRoot .greeting-card{
  background:var(--surface-sunken) !important;
  border-radius:var(--radius-card) !important;
  padding:14px 16px !important;
  font-size:14.5px !important;
  line-height:1.55 !important;
  color:var(--text-soft) !important;
  margin-bottom:18px !important;
  margin-top:0 !important;
  box-sizing:border-box !important;
  display:block !important;
  border:0 !important;
  box-shadow:none !important;
}
#widgetRoot .quick-actions{display:flex !important; flex-direction:column !important; gap:10px !important; margin:0 !important; padding:0 !important;}
#widgetRoot .action-row{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  width:100% !important;
  padding:13px 14px !important;
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius-card) !important;
  cursor:pointer !important;
  text-align:left !important;
  font-family:var(--font-body) !important;
  font-size:var(--base-font-size) !important;
  color:var(--text) !important;
  transition:border-color .15s ease, transform .15s ease !important;
  margin:0 !important;
  box-sizing:border-box !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  line-height:1.4 !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  min-width:0 !important;
  min-height:0 !important;
  position:relative !important;
  overflow:visible !important;
}
#widgetRoot .action-row:hover{border-color:var(--brand) !important; transform:translateY(-1px) !important;}
#widgetRoot .action-icon{
  flex:none !important;
  width:36px !important; height:36px !important;
  border-radius:100% !important;
  background:var(--brand-soft) !important;
  color:var(--brand) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  padding:0 !important; margin:0 !important;
}
#widgetRoot .action-label{flex:1 !important; font-size:14.5px !important; font-weight:600 !important; color:var(--text) !important; margin:0 !important; padding:0 !important;}
#widgetRoot .chevron{color:var(--text-muted) !important; flex:none !important; margin:0 !important; padding:0 !important;}

/* ----- Chat view ----- */
#widgetRoot .view-chat{padding:14px 0 0; display:flex; flex-direction:column; height:100%;}
#widgetRoot .messages{
  flex:1;
  overflow-y:auto;
  padding:14px 16px 18px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
#widgetRoot .msg-group{display:flex !important; gap:10px !important; align-items:flex-end !important; justify-content:flex-start !important;}
#widgetRoot .msg-group.from-user{flex-direction:row-reverse !important;}
#widgetRoot .msg-avatar{
  flex:none !important; width:30px !important; height:30px !important; border-radius:100% !important;
  align-self:flex-end !important;
  margin:0 !important;
  background:var(--brand-soft) !important; color:var(--brand) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-size:14px !important; font-weight:700 !important; line-height:1 !important;
}
#widgetRoot .msg-col{display:flex !important; flex-direction:column !important; gap:6px !important; max-width:78% !important; min-width:0 !important; align-items:flex-start !important;}
#widgetRoot .msg-group.from-user .msg-col{align-items:flex-end !important;}
#widgetRoot .msg-name{font-size:11.5px !important; font-weight:600 !important; color:var(--text-muted) !important; margin:0 0 2px 0 !important; padding:0 !important;}

#widgetRoot .bubble{
  background:var(--chat-bot-bubble-bg) !important;
  color:var(--chat-bot-bubble-text) !important;
  border-radius:var(--radius-bubble-bot) !important;
  border-top-left-radius:var(--chat-radius-bubble) !important;
  border-top-right-radius:var(--chat-radius-bubble) !important;
  border-bottom-right-radius:var(--chat-radius-bubble) !important;
  border-bottom-left-radius:var(--chat-radius-bubble-tail) !important;
  padding:11px 15px !important;
  padding-top:11px !important; padding-right:15px !important; padding-bottom:11px !important; padding-left:15px !important;
  max-width:100% !important;
  font-size:var(--chat-font-size) !important;
  line-height:1.45 !important;
  overflow-wrap:break-word !important;
  word-break:break-word !important;
  white-space:normal !important;
  display:inline-block !important;
  margin:0 !important;
  margin-top:0 !important; margin-right:0 !important; margin-bottom:0 !important; margin-left:0 !important;
  position:relative !important;
  border:0 !important;
  box-shadow:none !important;
  font-family:inherit !important;
  text-align:left !important;
  box-sizing:border-box !important;
}
#widgetRoot .bubble .message-bubble-text strong,
#widgetRoot .bubble strong{font-weight:600 !important;}
#widgetRoot .from-user .bubble{
  background:var(--chat-user-bubble-bg) !important;
  color:var(--chat-user-bubble-text) !important;
  border-radius:var(--radius-bubble-user) !important;
  border-top-left-radius:var(--chat-radius-bubble) !important;
  border-top-right-radius:var(--chat-radius-bubble) !important;
  border-bottom-right-radius:var(--chat-radius-bubble-tail) !important;
  border-bottom-left-radius:var(--chat-radius-bubble) !important;
  padding:11px 15px !important;
  padding-top:11px !important; padding-right:15px !important; padding-bottom:11px !important; padding-left:15px !important;
  margin-left:auto !important;
  display:inline-block !important;
  box-sizing:border-box !important;
}

#widgetRoot .bubble .message-bubble-text{margin:0 !important; color:inherit !important; padding:0 !important;}
#widgetRoot .bubble .message-bubble-text + .message-bubble-text{margin-top:8px !important;}
#widgetRoot .bubble .message-options{
  display:flex !important; flex-wrap:wrap !important; gap:8px !important; margin-top:10px !important;
}
#widgetRoot .bubble .option-btn{
  border:1px solid var(--border) !important; background:var(--surface) !important; color:var(--text-soft) !important;
  font-family:var(--font-body) !important; font-size:13px !important; font-weight:600 !important;
  padding:7px 13px !important; border-radius:var(--radius-component) !important; cursor:pointer !important;
  transition:border-color .15s ease,color .15s ease,background-color .15s ease !important;
}
#widgetRoot .bubble .option-btn:hover{border-color:var(--brand) !important; color:var(--brand) !important;}
#widgetRoot .bubble .option-btn:disabled{opacity:.45 !important; cursor:not-allowed !important;}

#widgetRoot .from-user .bubble .option-btn{background:rgba(52,45,102,.08) !important; border-color:rgba(52,45,102,.18) !important; color:var(--brand) !important;}
#widgetRoot .from-user .bubble .option-btn:hover{background:rgba(52,45,102,.14) !important;}

#widgetRoot .bubble .product-list{display:flex !important; flex-direction:column !important; gap:12px !important; margin-top:10px !important;}
#widgetRoot .bubble .product-card{
  background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:var(--radius-component) !important; padding:12px 14px !important;
}
#widgetRoot .bubble .product-name{margin:0 0 4px !important; font-size:14px !important; font-weight:700 !important; color:var(--text) !important;}
#widgetRoot .bubble .product-description{margin:0 0 6px !important; font-size:13px !important; color:var(--text-soft) !important; line-height:1.5 !important;}
#widgetRoot .bubble .product-price{margin:0 0 10px !important; font-size:15px !important; font-weight:700 !important; color:var(--brand) !important;}
#widgetRoot .bubble .product-actions{display:flex !important; flex-wrap:wrap !important; gap:8px !important;}
#widgetRoot .bubble .product-action-btn{
  border:1px solid var(--brand) !important;
  background:var(--brand) !important;
  color:var(--on-brand) !important;
  font-family:var(--font-body) !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  padding:7px 13px !important;
  border-radius:var(--radius-component) !important;
  cursor:pointer !important;
  transition:background-color .15s ease !important;
}
#widgetRoot .bubble .product-action-btn:hover{background:var(--brand-strong) !important;}
#widgetRoot .bubble .product-action-btn.btn-success{border-color:var(--success) !important; background:var(--success) !important;}
#widgetRoot .bubble .product-action-btn.btn-success:hover{background:var(--success-hover) !important;}
#widgetRoot .bubble .product-action-btn:disabled{opacity:.45 !important; cursor:not-allowed !important;}

#widgetRoot .bubble .checkout-container{margin-top:10px !important;}
#widgetRoot .bubble .checkout-btn{
  display:inline-block !important;
  border:1px solid var(--brand) !important;
  background:var(--brand) !important;
  color:var(--on-brand) !important;
  text-decoration:none !important;
  font-family:var(--font-body) !important;
  font-size:13.5px !important;
  font-weight:700 !important;
  padding:9px 18px !important;
  border-radius:var(--radius-component) !important;
  cursor:pointer !important;
  transition:background-color .15s ease, transform .15s ease !important;
}
#widgetRoot .bubble .checkout-btn.btn-success{border-color:var(--success) !important; background:var(--success) !important;}
#widgetRoot .bubble .checkout-btn:hover{background:var(--brand-strong) !important; transform:translateY(-1px) !important;}
#widgetRoot .bubble .checkout-btn.btn-success:hover{background:var(--success-hover) !important;}

#widgetRoot .bubble .handoff-indicator{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin-top:10px !important;
  padding:10px 12px !important;
  background:var(--brand-soft) !important;
  border-radius:var(--radius-component) !important;
  font-size:13px !important;
  font-weight:600 !important;
  color:var(--brand) !important;
}
#widgetRoot .bubble .handoff-icon{font-size:16px !important;}

#widgetRoot .bubble.error-bubble{background:var(--error-soft) !important; color:var(--error) !important;}

#widgetRoot .error-message-container{
  margin-top:8px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  align-items:flex-start !important;
}
#widgetRoot .from-user .error-message-container{align-items:flex-end !important;}
#widgetRoot .error-message-text{
  margin:0 !important;
  font-size:12px !important;
  color:var(--text-faint) !important;
}
#widgetRoot .retry-btn{
  border:1px solid var(--error) !important;
  background:transparent !important;
  color:var(--error) !important;
  font-family:var(--font-body) !important;
  font-size:12px !important;
  font-weight:600 !important;
  padding:6px 12px !important;
  border-radius:var(--radius-component) !important;
  cursor:pointer !important;
  transition:background-color .15s ease, color .15s ease !important;
}
#widgetRoot .retry-btn:hover{background:var(--error) !important; color:#fff !important;}

#widgetRoot .msg-time{
  font-size:10.5px !important;
  line-height:1 !important;
  color:var(--chat-timestamp-color) !important;
  margin:2px 4px 0 !important;
  opacity:.92 !important;
  padding:0 !important;
}
#widgetRoot .from-user .msg-time{align-self:flex-end !important;}

/* ============ Typing indicator (EXATAMENTE igual mensagem bot — SEM ::before, usa avatar REAL do JS) ============ */
#widgetRoot .msg-group.typing,
#widgetRoot .typing{
  display:flex !important;
  flex-direction:row !important;
  gap:10px !important;
  align-items:flex-end !important;
  justify-content:flex-start !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
}
#widgetRoot .typing .msg-avatar{
  flex:none !important;
  width:30px !important; height:30px !important;
  align-self:flex-end !important;
  margin:0 !important;
  background:var(--brand-soft) !important;
  color:var(--brand) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  line-height:1 !important;
  border-radius:100% !important;
}
#widgetRoot .typing .msg-col{
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
  max-width:78% !important;
  min-width:0 !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  margin:0 !important;
  padding:0 !important;
  flex:0 1 auto !important;
}
#widgetRoot .typing .bubble{
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  padding:11px 15px !important;
  padding-top:11px !important; padding-right:15px !important; padding-bottom:11px !important; padding-left:15px !important;
  background:var(--chat-bot-bubble-bg) !important;
  color:var(--chat-bot-bubble-text) !important;
  border-radius:var(--radius-bubble-bot) !important;
  border-top-left-radius:var(--chat-radius-bubble) !important;
  border-top-right-radius:var(--chat-radius-bubble) !important;
  border-bottom-right-radius:var(--chat-radius-bubble) !important;
  border-bottom-left-radius:var(--chat-radius-bubble-tail) !important;
  border:0 !important;
  margin:0 !important;
  margin-top:0 !important; margin-right:0 !important; margin-bottom:0 !important; margin-left:0 !important;
  box-sizing:border-box !important;
  min-height:0 !important;
  max-width:100% !important;
  line-height:1 !important;
  height:auto !important;
  width:auto !important;
}
#widgetRoot .typing .dot{width:6px !important; height:6px !important; border-radius:100% !important; background:var(--text-faint) !important; animation:chat-blink 1.2s infinite ease-in-out !important; margin:0 !important; padding:0 !important; display:inline-block !important;}
#widgetRoot .typing .dot:nth-child(2){animation-delay:.15s !important;}
#widgetRoot .typing .dot:nth-child(3){animation-delay:.3s !important;}
@keyframes chat-blink{0%,80%,100%{opacity:.3; transform:translateY(0);} 40%{opacity:1; transform:translateY(-2px);}}

/* ----- Quick replies chips ----- */
#widgetRoot .quick-replies{
  display:flex !important; flex-wrap:wrap !important; gap:8px !important;
  padding:4px 16px 14px !important;
  flex:none !important;
  margin:0 !important;
  width:100% !important;
  box-sizing:border-box !important;
  position:relative !important;
}
#widgetRoot .quick-replies[hidden]{display:none !important;}
#widgetRoot .chip{
  border:1px solid var(--border) !important;
  background:var(--surface) !important;
  color:var(--text-soft) !important;
  font-family:var(--font-body) !important;
  font-size:13px !important;
  font-weight:600 !important;
  padding:7px 13px !important;
  border-radius:var(--radius-component) !important;
  cursor:pointer !important;
  transition:border-color .15s ease, color .15s ease !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  margin:0 !important;
  display:inline-block !important;
  position:relative !important;
  box-sizing:border-box !important;
  line-height:1.4 !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  min-width:0 !important;
  min-height:0 !important;
  width:auto !important;
  height:auto !important;
  text-align:left !important;
}
#widgetRoot .chip:hover{border-color:var(--brand) !important; color:var(--brand) !important;}

/* ----- Composer / send button ----- */
#widgetRoot .composer{
  flex:none !important;
  display:flex !important;
  align-items:flex-end !important;
  gap:10px !important;
  padding:12px 14px !important;
  border-top:1px solid var(--border) !important;
  margin:0 !important;
  width:100% !important;
  box-sizing:border-box !important;
  background:var(--surface) !important;
  position:relative !important;
  border-left:0 !important;
  border-right:0 !important;
  border-bottom:0 !important;
  border-radius:0 !important;
}
#widgetRoot .composer[hidden]{display:none !important;}
#widgetRoot .composer textarea{
  flex:1 !important;
  resize:none !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius-component) !important;
  padding:10px 14px !important;
  font-family:var(--font-body) !important;
  font-size:14px !important;
  color:var(--text) !important;
  background:var(--surface) !important;
  max-height:90px !important;
  line-height:1.4 !important;
  margin:0 !important;
  box-sizing:border-box !important;
  width:100% !important;
  min-height:40px !important;
  height:auto !important;
  box-shadow:none !important;
  overflow:hidden !important;
  cursor:text !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  text-align:left !important;
  display:block !important;
}
#widgetRoot .composer textarea:focus{outline:none !important; border-color:var(--brand) !important;}
#widgetRoot .composer textarea:disabled{background:var(--surface-sunken) !important; cursor:not-allowed !important; opacity:.7 !important;}
#widgetRoot .composer textarea::placeholder{color:var(--text-muted) !important;}
#widgetRoot .send-btn{
  flex:none !important;
  width:40px !important; height:40px !important;
  border-radius:100% !important;
  border:none !important;
  background:var(--brand) !important;
  color:var(--on-brand) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  cursor:pointer !important;
  transition:background-color .15s ease !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  padding:0 !important;
  margin:0 !important;
  position:relative !important;
  min-width:0 !important;
  min-height:0 !important;
  overflow:visible !important;
  box-shadow:none !important;
  line-height:1 !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  text-align:center !important;
  font:inherit !important;
}
#widgetRoot .send-btn:hover{background:var(--brand-strong) !important;}
#widgetRoot .send-btn:disabled{opacity:.4 !important; cursor:default !important;}

/* ----- FAQ / Articles tabs ----- */
#widgetRoot .faq-item{border-bottom:1px solid var(--border) !important; padding:12px 0 !important; margin:0 !important; width:100% !important; box-sizing:border-box !important;}
#widgetRoot .faq-item:first-child{padding-top:0 !important;}
#widgetRoot .faq-q{
  display:flex !important; justify-content:space-between !important; align-items:center !important;
  width:100% !important; background:none !important; border:none !important; text-align:left !important;
  font-family:var(--font-body) !important; font-size:14px !important; font-weight:600 !important; color:var(--text) !important;
  cursor:pointer !important; padding:0 !important; margin:0 !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  line-height:1.4 !important;
  box-shadow:none !important;
  text-transform:none !important;
  letter-spacing:normal !important;
}
#widgetRoot .faq-a{
  font-size:13.5px !important; color:var(--text-soft) !important; line-height:1.55 !important;
  max-height:0 !important; overflow:hidden !important; transition:max-height .2s ease !important;
  margin:0 !important; padding:0 !important;
}
#widgetRoot .faq-item[data-open="true"] .faq-a{max-height:200px !important; padding-top:8px !important;}
#widgetRoot .faq-item[data-open="true"] .faq-q svg{transform:rotate(180deg) !important;}
#widgetRoot .faq-q svg{transition:transform .18s ease !important; color:var(--text-muted) !important; flex:none !important;}

#widgetRoot .article-row{
  display:flex !important; gap:12px !important; align-items:center !important;
  padding:12px 0 !important; border-bottom:1px solid var(--border) !important;
  margin:0 !important; width:100% !important; box-sizing:border-box !important;
}
#widgetRoot .article-row:first-child{padding-top:0 !important;}
#widgetRoot .article-icon{
  flex:none !important; width:34px !important; height:34px !important; border-radius:var(--radius-component) !important;
  background:var(--brand-soft) !important; color:var(--brand) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  padding:0 !important; margin:0 !important;
}
#widgetRoot .article-text{display:flex !important; flex-direction:column !important; gap:2px !important; margin:0 !important; padding:0 !important; flex:1 !important; min-width:0 !important;}
#widgetRoot .article-text b{font-size:13.5px !important; font-weight:600 !important; color:var(--text) !important; margin:0 !important; padding:0 !important; line-height:1.3 !important;}
#widgetRoot .article-text span{font-size:12px !important; color:var(--text-muted) !important; margin:0 !important; padding:0 !important; line-height:1.3 !important;}

/* ----- Tabbar ----- */
#widgetRoot .tabbar{
  flex:none !important;
  display:flex !important;
  border-top:1px solid var(--border) !important;
  border-radius:0 0 var(--radius-panel) var(--radius-panel) !important;
  background:var(--surface) !important;
  margin:0 !important;
  padding:0 !important;
  width:100% !important;
  box-sizing:border-box !important;
  position:relative !important;
  border-left:0 !important;
  border-right:0 !important;
  border-bottom:0 !important;
}
#widgetRoot .tabbar[hidden]{display:none !important;}
#widgetRoot .tab{
  flex:1 !important;
  display:flex !important; flex-direction:column !important; align-items:center !important; gap:4px !important;
  padding:10px 4px 12px !important;
  background:none !important; border:none !important;
  font-family:var(--font-body) !important;
  font-size:10.5px !important;
  font-weight:600 !important;
  color:var(--text-muted) !important;
  cursor:pointer !important;
  border-top:2px solid transparent !important;
  margin-top:-1px !important;
  border-radius:0 !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  line-height:1.3 !important;
  box-shadow:none !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  text-align:center !important;
  width:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  overflow:visible !important;
}
#widgetRoot .tab.active{color:var(--brand) !important; border-top-color:var(--brand) !important;}

/* ----- Powered by footer ----- */
#widgetRoot .panel-powered{
  flex:none !important;
  padding:6px 10px !important;
  text-align:center !important;
  background:var(--surface) !important;
  color:var(--text-muted) !important;
  font-size:12px !important;
  border-radius:0 0 var(--radius-panel) var(--radius-panel) !important;
  margin:0 !important;
  width:100% !important;
  box-sizing:border-box !important;
  border:0 !important;
  line-height:1.4 !important;
}

/* ----- Responsivo Mobile ----- */
@media (max-width:480px){
  #widgetRoot{
    right:0 !important; left:0 !important; bottom:0 !important;
    align-items:stretch !important; justify-content:flex-end !important;
    gap:0 !important;
    width:100vw !important;
  }
  #widgetRoot .launcher{
    position:fixed !important;
    right:20px !important; bottom:20px !important;
  }
  #widgetRoot .panel{
    width:100vw !important;
    max-width:100vw !important;
    height:88dvh !important;
    max-height:88dvh !important;
    border-radius:var(--chat-radius-window) var(--chat-radius-window) 0 0 !important;
    transform-origin:bottom center !important;
  }
  #widgetRoot .messages{padding:14px 14px 18px !important;}
  #widgetRoot .msg-col{max-width:80% !important;}
  #widgetRoot .bubble{max-width:100% !important;}
}