/* === 🌎 Fonte global padrão (Lato) === */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;500;600;700&display=swap');

html, body, * {
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif !important;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === 🎨 Hierarquia Tipográfica Global (Lato) === */
:root {
  --font-primary: 'Lato', sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

 /* Cores baseadas no Figma */
  --color-title: #000000;        /* Títulos principais */
  --color-text: #494949;         /* Texto padrão / corpo */
  --color-subtext: #7B7B7B;      /* Secundário / descrições */
  --color-primary: #039FDD;      /* Azul Ideal Work */
  --color-primary-hover: #008BC3;
  --color-background: #FFFFFF;
}

/* Texto base */
/* === 🎨 Hierarquia Tipográfica Global (Lato) === */
body, p, span, a, li, label, input, textarea, select, button {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
  font-size: 15px;
  color: var(--color-text); /* 🔹 #494949 */
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-semibold);
  color: var(--color-title); /* 🔹 #1C2E40 */
  letter-spacing: -0.2px;
  line-height: 1.3;
  margin-bottom: 8px;
}

small, .texto-secundario {
  font-size: 0.875rem;
  color: var(--color-subtext); /* 🔹 #7B7B7B */
  font-weight: var(--font-weight-regular);
}

a {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-primary-hover);
  text-decoration: none;
}

/* Hierarquia visual */
h1 { font-size: 2.2rem; font-weight: var(--font-weight-bold); }
h2 { font-size: 1.8rem; font-weight: var(--font-weight-semibold); }
h3 { font-size: 1.5rem; font-weight: var(--font-weight-semibold); }
h4 { font-size: 1.25rem; font-weight: var(--font-weight-medium); }
h5 { font-size: 1.1rem; font-weight: var(--font-weight-medium); }
h6 { font-size: 1rem; font-weight: var(--font-weight-regular); }

/* Subtítulos e legendas */
small, .texto-secundario {
  font-size: 0.875rem;
  color: var(--color-subtext);
  font-weight: var(--font-weight-regular);
}

/* Links */
a {
  color: #039fdd;
  font-weight: var(--font-weight-medium);
  transition: color 0.2s ease;
}

a:hover {
  color: #007bb8;
  text-decoration: none;
}


html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {vertical-align: baseline;
    font-weight: inherit;font-style: inherit;font-size: 100%;outline: 0;padding: 0;margin: 0;border: 0;scroll-behavior: smooth;}
    :focus {outline: 0;}
    body {line-height: 1;color: black;overflow-x: hidden;}
    ol, ul {list-style: none;}
    table {border-collapse: separate;border-spacing: 0;}
    caption, th, td {font-weight: normal;text-align: left;}
    blockquote:before, blockquote:after, q:before, q:after {content: "";}
    blockquote, q {quotes: "" "";}
    a {outline:none;cursor: pointer;}

    a.bt-flutuante{left:0px !important;right:inherit !important;}

    * {margin:0;padding:0;list-style:none;border:none;text-decoration:none;}
    hr {display:none;}
    .hidden {display:none}
    
    body {font-family: "Lato", sans-serif;font-optical-sizing: auto;font-weight: 400;font-style: normal;background:#fff;color: #7B7B7B;min-height: 100%;height: 100%;}
    .container{}
    a:hover, .bt:hover{transition: 0.3s;}
    .container{width: 90% !important;}
    
    /******* ➡️ Títulos *******/
    
    h1, h2, h3, h4, h5, h6{color: #1C2E40;margin-bottom: 10px;font-weight: 400;}
    h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong{font-weight: 700;}
    h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, h7a{color: #1C2E40;}
    a:hover h1, a:hover h2, a:hover h3, a:hover h4, a:hover h5, a:hover h6, a:hover h7{color: #1C2E40;text-decoration: none;}
    h1 a:hover , h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, h7 a:hover{color: #1C2E40;text-decoration: none;}
    
    h1{font-size:28px;line-height:130%;}
    h2{font-size:25px;line-height:130%;}
    h3{font-size:22px;line-height:120%;}
    h4{font-size:20px;line-height:150%;}
    h5{font-size:18px;line-height:150%;}
    h6{font-size:16px;line-height:150%;}
    
    
    .bt-verde-vazado {
  background: none;
  color: #00794B;
  border: 1px solid #00794B;
}
.bt-verde-vazado:hover {
  color: #005F3C;
  border: 1px solid #005F3C;
}

.bt-vermelho-vazado {
  background: none;
  color: #C7012F;
  border: 1px solid #C7012F;
}
.bt-vermelho-vazado:hover {
  color: #B00028;
  border: 1px solid #B00028;
}

.span-verde {
  background: #00794B;
  color: #fff;
}

.span-vermelho {
  background: #C7012F;
  color: #fff;
}

.bg-box-verde {
  background: radial-gradient(circle, #D4F1E2 0%, #00794B 50%, #D4F1E2 100%);
}

.bg-box-vermelho {
  background: radial-gradient(circle, #F8D6DE 0%, #C7012F 50%, #F8D6DE 100%);
}

.campo-preenchimento-principal-ai input.txt {
  border: 1px solid #ccc; /* cinza neutro */
  outline: none;
}

.campo-preenchimento-principal-ai input.txt:focus {
  border: 1px solid #00C0FF; /* só destaca no foco */
}

.dropzone-area {
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  cursor: pointer;
  background-color: #fff;
  transition: 0.2s;
}

.dropzone-area:hover {
  background-color: #f9f9f9;
}


/* === Ações de mensagem (posição abaixo do balão) === */
.msg-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;              /* leve aumento de espaçamento horizontal */
  margin-top: 12px;       /* ↑ aumenta distância entre mensagem e ícones */
  margin-left: 6px;
  clear: both;
  position: relative;
}


.icon-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #9aa3b5;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Hover e estado ativo */
.icon-btn:hover {
  color: #007bff;
  transform: scale(1.1);
}
.icon-btn.ativo {
  color: #007bff;
}

/* === Tooltip customizado (AGORA ACIMA dos ícones) === */
.icon-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 140%;              /* ⬆️ aparece acima */
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  max-width: 320px;          /* evita estourar lateral */
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 9999 !important;
}

.icon-btn::before {
  content: "";
  position: absolute;
  bottom: 120%;              /* ⬆️ seta aponta para o botão */
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 9999 !important;
}

/* Exibe tooltip */
.icon-btn:hover::after,
.icon-btn:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0.15s;
}



/* === Feedback de cópia === */
.copiado-badge {
  font-size: 12px;
  background: #cdf1ff;
  color: #039fdd;
  padding: 3px 8px;
  border-radius: 12px;
  margin-left: 8px;
  font-weight: 600;
  animation: fadeInOut 2s ease;
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(3px); }
  10% { opacity: 1; transform: translateY(0); }
  90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-3px); }
}

/* === Menu flutuante === */
.menu-dropdown {
  position: absolute;
  bottom: 28px;
  left: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  z-index: 100;
  width: 160px;
  animation: fadeIn 0.2s ease-in-out;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  width: 100%;
  border: none;
  background: none;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.menu-item:hover {
  background-color: #f7f7f7;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}




.icon-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #9aa3b5;
  transition: all 0.2s ease;
}

.icon-btn:hover {
  color: #007bff;
  transform: scale(1.1);
}

.icon-btn.ativo {
  color: #007bff;
}


/* 🔹 Scrollbar mais fina e moderna */
.scroll-area::-webkit-scrollbar {
  width: 4px !important;      /* antes: 8px */
  height: 4px !important;     /* para barras horizontais */
}

.scroll-area::-webkit-scrollbar-track {
  background: #f8f9fc;
  border-radius: 4px;
}

.scroll-area::-webkit-scrollbar-thumb {
  background: #c8d1e0 !important;
  border-radius: 4px !important;
  transition: background 0.2s ease;
}

.scroll-area::-webkit-scrollbar-thumb:hover {
  background: #a0acc0 !important;
}

/* ======== TABELA DE SUGESTÕES IA — versão limpa sem bordas ======== */
.tabela-ia {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  background: #f7f7f7 !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: #ccc transparent !important;
  display: block !important; /* 🔹 importante para ativar rolagem horizontal */
}

.tabela-ia::-webkit-scrollbar {
  height: 4px !important;
}
.tabela-ia::-webkit-scrollbar-thumb {
  background: #ccc !important;
  border-radius: 4px !important;
}
.tabela-ia::-webkit-scrollbar-thumb:hover {
  background: #aaa !important;
}

/* 🔹 Estrutura principal */
.tabela-sugestoes-ia {
  min-width: 950px !important; /* 🔹 força conteúdo mais largo que o container */
  width: max-content !important;
  border-collapse: collapse !important;
  border: none !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  table-layout: auto !important;
}

/* Cabeçalho branco, sem bordas */
.tabela-sugestoes-ia th {
  font-weight: 600 !important;
  background-color: #ffffff !important;
  border: none !important;              /* 🔹 remove todas as bordas */
  padding: 10px 12px !important;
  color: #7B7B7B !important;
  white-space: nowrap !important;
}

/* Linhas de dados */
.tabela-sugestoes-ia td {
  border: none !important;
  color: #494949 !important;
  font-size: 14px !important;
  padding: 8px 12px !important;
  white-space: nowrap !important;
}

/* Linhas alternadas */
.tabela-sugestoes-ia tbody tr:nth-child(even) {
  background-color: #f2f2f2 !important;
}
.tabela-sugestoes-ia tbody tr:nth-child(odd) {
  background-color: #ffffff !important;
}

/* Hover */
.tabela-sugestoes-ia tbody tr:hover {
  background-color: #e9f3ff !important;
}

/* Somente linhas horizontais de separação */
.tabela-sugestoes-ia tbody tr {
  border-bottom: 1px solid #e6e6e6 !important;
  transition: background 0.2s ease !important;
}

/* Coluna descritiva */
.tabela-sugestoes-ia td:nth-child(6) {
  font-style: italic;
  color: #666;
  white-space: normal;
}

/* Botões */
.tabela-sugestoes-ia td button {
  font-size: 12px !important;
  padding: 3px 6px !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: transform 0.2s ease !important;
}
.tabela-sugestoes-ia td button:hover svg {
  transform: scale(1.2) !important;
}

/* Título */
.tabela-resultados h5 {
  font-size: 15px !important;
  margin-bottom: 8px !important;
  font-weight: 500 !important;
  color: #333 !important;
  display: inline-block !important;
}

/* Botão de expansão */
.tabela-resultados .bt.bt-cinza.bt-mini {
  font-size: 11px !important;
  padding: 2px 6px !important;
  background: #fff !important;
  border: 1px solid #ccc !important;
  border-radius: 6px !important;
  margin-left: 10px !important;
  margin-bottom: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  position: relative !important;
  top: -2px !important;
}
.tabela-resultados .bt.bt-cinza.bt-mini:hover {
  background: #f0f0f0 !important;
}

/* ======== CHAT CONTAINER — versão fluida ======== */
.chat-container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 400px;
  max-height: 70vh;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 16px;
  overflow: hidden; /* evita duplo scroll */
}

/* área de mensagens rola separadamente */
.chat-container .msgs-area {
  flex: 1;
  overflow-y: auto;
  padding-right: 6px;
}

/* Scrollbar mais leve */
.chat-container .msgs-area::-webkit-scrollbar {
  width: 4px;
}
.chat-container .msgs-area::-webkit-scrollbar-thumb {
  background: #d0d0d0;
  border-radius: 4px;
}
.chat-container .msgs-area::-webkit-scrollbar-thumb:hover {
  background: #b0b0b0;
}


/* Scrollbar customizada */
.chat-container::-webkit-scrollbar {
  width: 4px;
}
.chat-container::-webkit-scrollbar-thumb {
  background: #d0d0d0;
  border-radius: 4px;
}
.chat-container::-webkit-scrollbar-thumb:hover {
  background: #b0b0b0;
}


/* === Painel unificado dos agentes === */
.painel-agente {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06);
  padding: 0 0 24px 0 !important;
  overflow: visible !important;
  width: 100% !important;
  margin-top: 0 !important;
}

.painel-agente .gatilhos-no-chat {
  margin-bottom: 18px;
}

.painel-agente .msgs {
  text-align: left;
}

.painel-agente .campo-preenchimento-principal-ai {
  margin-top: 18px;
}





    /******* ⛔ Fim Títulos *******/
    
    
    
    
    /******* ➡️ Parágrafo *******/
    
    p{font-size: 14px;color: #7B7B7B;line-height:160%;}
    p strong{font-weight:700;}
    p a{text-decoration: underline;}
    p a:hover{text-decoration: none;}
    
    /******* ⛔ Fim Parágrafo *******/
    
    
    
    
    /******* ➡️ Alinhamento e Padding *******/
    
    .tac, .center{text-align: center;}
    .mauto{margin: 0 auto;}
    .ptzero{padding-top: 0;}
    .pbzero{padding-bottom: 0;}
    .mbottomdez{margin-bottom: 10px;}
    .mtopdez{margin-top: 10px;}
    .mbottomtrinta{margin-bottom: 30px;}
    .mtoptrinta{margin-top: 30px;}
    
    /******* ⛔ Fim Alinhamento e Padding *******/
    
    
    
    
    /******* ➡️ Botões *******/
    
    .bt{border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;text-decoration: none;display: table;font-weight:600;transition: 0.3s;display: inline-block;font-size: 14px;padding:12px 30px;}
    .bt:active{padding:13px 30px 11px 30px;}
    
    .bt-azul{background: #039FDD;color: #fff;}
    .bt-azul:hover{background: #008BC3;}
    
    .bt-azul-vazado{background:none;color: #039FDD;border:1px solid #039FDD;}
    .bt-azul-vazado:hover{background:#none;color: #008BC3;border:1px solid #008BC3;}
        
    .bt-desabilitado{opacity: 25%;}

    .bt-inline-azul{color: #039FDD;text-decoration: underline;}
    .bt-inline-azul:hover{color: #008BC3;}

    /******* ⛔ Fim Botões *******/
    
    
    .bg-branco-padrao{padding:30px;background: #ffffff;border-radius: 25px;box-shadow: 0px 5px 31px 1px rgba(0,0,0,0.06);-webkit-box-shadow: 0px 5px 31px 1px rgba(0,0,0,0.06);-moz-box-shadow: 0px 5px 31px 1px rgba(0,0,0,0.06);}
    
    
    
    /******* ➡️ Formulário *******/
    
    label{color:#000000;font-size: 14px;display: block;}
    input, select, textarea{font-family: "Lato", sans-serif;font-optical-sizing: auto;font-weight: 400;font-style: normal;}
    input.txt, select.padrao, textarea.padrao{background: #ffffff;font-size: 14px;color: #7B7B7B;line-height: 25px;padding: 8px;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;width: auto;width: 100%;margin-bottom: 8px;border:1px solid #DEDEDE;}
    select.padrao{cursor: pointer;}
    textarea.padrao{height: 140px;line-height:25px;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;}
    input.txt:focus, select.padrao:focus, textarea.padrao:focus {background: #ffffff;border:1px solid #7B7B7B;}
    
    input.bt{cursor: pointer;display: inline-block !important;}
    
    .feedback{font-size: 16px;font-weight: 600;color: #000;line-height: 25px;padding: 18px;display: block;border-radius: 8px;margin-top: 20px;}
    .erro{background: #FFF5F5;border:1px solid #FFD8D8;}
    .sucesso{background: #F1FFF4;border:1px solid #C0ECD4;}
    .alerta{background: #F3D6C7;border:1px solid #C2947A;}
    .feedback .bt-inline-azul{float: right;}

    /******* ⛔ Fim Formulário *******/    
    
    
    
    /******* ➡️ Rodapé *******/
    
    .rodape {background: #0A1B2D;margin-top: 40px}
    .rodape .container {padding-top: 30px;padding-bottom: 30px;}
    .rodape .col-md-3 {}
    .rodape .col-md-3 img {width: 55px;}
    .rodape .col-md-9 {}
    .rodape .col-md-9 address {color: #fff;font-size: 14px;float: right;}
    
    /******* ⛔ Fim Rodapé *******/
    
    


    .login {min-height: 100%;height: 100%;}
    .login .login-side-img{background: #039FDD;background: linear-gradient(143deg, rgba(3, 159, 221, 1) 0%, rgba(159, 221, 246, 1) 25%, rgba(3, 159, 221, 1) 61%, rgba(159, 221, 246, 1) 100%, rgba(3, 159, 221, 1) 61%);min-height: 100%;height: 100%;display: flex;align-items: center;-webkit-border-top-right-radius: 100px;-webkit-border-bottom-right-radius: 30px;-moz-border-radius-topright: 100px;-moz-border-radius-bottomright: 30px;border-top-right-radius: 100px;border-bottom-right-radius: 30px;}
    .login .login-side-img .inner-login-img{margin:0 auto;}
    .login .login-side-img .inner-login-img img{}
    .login .login-side-form{min-height: 100%;height: 100%;display: flex;align-items: center;}
    .login .login-side-form .inner-login-form{margin:0 auto;}
    .login .login-side-form .inner-login-form img.logo{margin-bottom: 20px;}


    .header{border-bottom: 1px solid #F2F2F2;padding-top: 20px;padding-bottom: 20px;}
    .header .container{display : flex;align-items : center;}
    .header img.logotipo{float: left;width: 91px;margin-right: 40px;}

    .header div.busca{display: table;margin-top: 15px;width: 60%;}
    .header div.busca img{float: left;margin-right: 12px;margin-top: 3px;}
    .header div.busca form{float: left;width: 80%;}
    .header div.busca form input.campo-busca{color: #7B7B7B;border-bottom: 1px solid #fff;width: 100%;}
    .header div.busca form input.campo-busca:focus{color: #000;border-bottom: 1px solid #7B7B7B;}

    .header div.avatar{display: table;float: right;} 
    .header div.avatar:hover{opacity: 80%;} 
    .header div.avatar img.avatar{cursor: pointer;float: left;margin-right: 5px;} 
    .header div.avatar h6{float: left;cursor: pointer;padding-top: 5px;margin-right: 5px;} 
    .header div.avatar a.link-submenu{float: left;padding-top: 5px;} 
    .header div.avatar a.link-submenu img{} 


    .titulo{padding-top: 20px;padding-bottom: 20px;}
    .titulo h2{margin-bottom: 0;}
    .titulo h6{color: #7B7B7B;}

    .titulo-agente{padding-top: 20px; margin-bottom: 0px;}
    .titulo-agente .container{display : flex;align-items : center;}
    .titulo-agente h1 span{color:#039FDD ;}

    .titulo-agente .agente {display : flex;align-items : center;}
    /* Avatar no título do agente — glow azul do Figma */
.titulo-agente .agente .foto{
  width:150px;
  float:left;
  position:relative;          /* base para o pseudo-elemento */
  background: transparent;    /* remove o fundo antigo */
}

/* círculo desfocado atrás do avatar (Ellipse 98) */
.titulo-agente .agente .foto::before{
  content:"";
  position:absolute;
  width:80px;
  height:80px;
  left:38px;
  top:70px;
  background:#039FDD;         /* Brand/1 */
  opacity:.6;
  filter: blur(35px);
  border-radius:50%;
  z-index:0;                  /* fica atrás da imagem */
  pointer-events:none;
}

/* garante que a imagem fique acima do glow e sem fundo branco */
.titulo-agente .agente .foto img{
  position:relative;
  z-index:1;
  display:block;
  max-width:100%;
  height:auto;
  background: transparent !important;
  box-shadow:none !important;
  border:0 !important;
}

/* (opcional) pequeno ajuste em telas menores */
@media (max-width: 768px){
  .titulo-agente .agente .foto::before{
    left:28px;
    top:58px;
  }
}

    .titulo-agente .agente .foto img{}

    .titulo-agente .agente .texto{float: left;}
    .titulo-agente .agente .texto h1{}
    .titulo-agente .agente .texto p{}

    .titulo-agente .dv-bts{display : flex;align-items : center;}
    .titulo-agente .dv-bts span{float: left;margin-right: 10px;}
    .titulo-agente .dv-bts div.lista-bts{float: left;background:#fff ;border-radius: 100px;box-shadow: 0px 5px 31px 1px rgba(0,0,0,0.06);-webkit-box-shadow: 0px 5px 31px 1px rgba(0,0,0,0.06);-moz-box-shadow: 0px 5px 31px 1px rgba(0,0,0,0.06);}
    .titulo-agente .dv-bts div.lista-bts a{background: #fff;border-radius: 100px;padding: 12px 20px;display: block;float: left;color: #7B7B7B;}
    .titulo-agente .dv-bts div.lista-bts a:hover{background: #039FDD;color:#fff;}
    .titulo-agente .dv-bts div.lista-bts a.on{background: #039FDD;color:#fff;}

    /* === Remover espaço entre o avatar/título e os cards de habilidades === */
.titulo-agente{
  padding-bottom: 0;   /* garante que o bloco não empurre o próximo */
  margin-bottom: 0;    /* zera margem inferior do container */
}

/* zera margens padrão do browser em h1/p dentro do título do agente */
.titulo-agente .agente .texto h1,
.titulo-agente .agente .texto p{
  margin: 0;
}

/* quando a seção de cards vem logo após o título, não deixa “respiro” */
.titulo-agente + .conteudo{
  margin-top: 0;
  padding-top: 0;
}


    .conteudo{padding-bottom: 50px;}


    .boxes-padrao{}
    .boxes-padrao .box{text-align: center;padding: 10px;}
    .boxes-padrao .box-in{text-align: center;padding: 30px 20px 20px 20px;background: #fff;border-radius: 25px;cursor: pointer;box-shadow: 0px 5px 31px 1px rgba(0,0,0,0.06);-webkit-box-shadow: 0px 5px 31px 1px rgba(0,0,0,0.06);-moz-box-shadow: 0px 5px 31px 1px rgba(0,0,0,0.06);}
    .boxes-padrao .box div.foto{background: #CDF1FF;
background: radial-gradient(circle, rgba(205, 241, 255, 1) 0%, rgba(85, 203, 250, 1) 50%, rgba(205, 241, 255, 1) 100%);border-radius: 20px;margin-bottom: 15px;height: 155px;position: relative;}
    .boxes-padrao .box div.foto img{position: absolute;bottom: 0px;left:50%;margin-left:-70px;}
    .boxes-padrao .box span{font-size: 12px;background: #039FDD;padding: 5px 10px;color: #fff;border-radius: 100px;margin:0 auto 5px ;display: table;}
    .boxes-padrao .box h3{margin-top: 15px;}
    .boxes-padrao .box p{}
    .boxes-padrao .box a.bt{margin-top: 20px;}
    .boxes-padrao .box div.estrelas{width: 22px;height: 22px;position: absolute;top: 40px;right: 40px;}
    .boxes-padrao .box div.estrelas a{width: 19px;height: 19px;display: block;}
    .boxes-padrao .box div.estrelas a span{display: none;}
    .boxes-padrao .box div.estrelas a.estrelaoff{background: url(../img/estrela-off.png) no-repeat;}
    .boxes-padrao .box div.estrelas a.estrelaoff:hover{background: url(../img/estrela-on.png) no-repeat;}
    .boxes-padrao .box div.estrelas a.estrelaon{background: url(../img/estrela-on.png) no-repeat;}
    .boxes-padrao .box div.estrelas a.estrelaon:hover{background: url(../img/estrela-off.png) no-repeat;}

    .boxes-padrao .box-in:hover{background: #039FDD;}
    .boxes-padrao .box-in:hover span{background: #CDF1FF;color: #039FDD;}
    .boxes-padrao .box-in:hover h1, .boxes-padrao .box-in:hover h2, .boxes-padrao .box-in:hover h3, .boxes-padrao .box-in:hover h4, .boxes-padrao .box-in:hover h5, .boxes-padrao .box-in:hover h6{color: #ffffff;}
    .boxes-padrao .box-in:hover p{color: #ffffff;}
    /* Mantém o botão visível quando o card fica azul */
    .boxes-padrao .box-in:hover a.bt,
    .boxes-padrao .box-in:hover button.bt {
      color: #ffffff !important;
      border: 1px solid #ffffff !important;
      background: transparent !important;
    }

    div.historico-acoes{}
    div.historico-acoes h4{}
    div.historico-acoes a{font-size: 16px;color:#039FDD;background: #fff;display: block;border-radius:10px;padding: 10px 20px;margin-bottom: 2px;}
    div.historico-acoes a.ativo{background: #CDF1FF;}
    div.historico-acoes a:hover{background: #CDF1FF;}

    div.msg span.txt-msg{font-size: 14px;}
    div.msg span.txt-msg span.hr{font-size: 12px;opacity: 0.7;display: block;}

    div.msguser span.txt-msg span.hr{}
    div.msgai span.txt-msg span.hr{}

    
    /******** ➡️ Até 1199px ********/
    
    @media all and (max-width: 1199px) {
    
    img{max-width: 100%;}
    
    }
    
    /******** ⛔ Fim Até 1199px ********/
    
    
    
    
    
    
    
    /******** ➡️ Até 930px ********/
    
    @media all and (max-width: 991px) { 
        
    body{padding-bottom: 60px;overflow-x:hidden;}
    
    .col-md-2, .col-md-4, .col-md-6, .col-md-8{margin-bottom: 20px;}
    .bt-grande{font-size: 16px;}
    
    }
    
    /******** ⛔ Fim Até 930px ********/
    



    /******** ➡️ Até 768px ********/
    
    @media all and (max-width: 767px) {
    
    }
    
    /******** ⛔ Fim Até 768px ********/
    
    
    
    /******** ➡️ Até 600px ********/
    
    @media all and (max-width: 600px) {
    
    }
    
    /******** ⛔ Fim Até 600px ********/
    
    
    
    /******** ➡️ Até 400px ********/
    
    @media all and (max-width: 400px) {
    
    }
    
    /******** ⛔ Fim Até 400px ********/

    /* ====== AJUSTE DE ALINHAMENTO DO FORM DE CHAT ====== */
/* ====== CAMPO DE INPUT UNIFICADO PARA CHAT IA ====== */
form.campo-preenchimento-principal-ai {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 900px;
  margin: 12px auto;
  background: transparent;
  border: none;
}

form.campo-preenchimento-principal-ai fieldset {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
}

form.campo-preenchimento-principal-ai .input-box,
form.campo-preenchimento-principal-ai .ia-input-box {
  flex: 1;
  display: flex;
  align-items: center;
  background: #f9f9f9;
  border-radius: 10px;
  padding: 8px 12px;
  border: 1px solid #d9e9f6;
}

form.campo-preenchimento-principal-ai .icon-add,
form.campo-preenchimento-principal-ai .ia-icon-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e8f6ff;
  color: #039fdd;
  font-size: 18px;
  margin-right: 10px;
}

form.campo-preenchimento-principal-ai .txt,
form.campo-preenchimento-principal-ai .ia-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  color: #333;
  line-height: 1.4;
  height: 38px;
}

form.campo-preenchimento-principal-ai .bt,
form.campo-preenchimento-principal-ai .ia-bt-enviar {
  height: 40px;
  padding: 0 22px;
  font-weight: 400;
  font-size: 14px;
  color: #fff;
  background: #039FDD;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  transition: background 0.2s ease;
}

form.campo-preenchimento-principal-ai .bt:hover,
form.campo-preenchimento-principal-ai .ia-bt-enviar:hover {
  background: #CDF1FF;
}

.campo-input-wrapper {
  transition: border 0.2s ease, box-shadow 0.2s ease;
}

.campo-input-wrapper:hover,
.campo-input-wrapper:focus-within {
  border-color: #039fdd !important;
  box-shadow: 0 0 6px 2px rgba(3, 159, 221, 0.15);
}

/* =========================
   🔹 LAYOUT FINAL DO CHAT
   ========================= */
.chat-universal-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 930px;        /* mantém proporção original */
  margin: 0 auto;
  padding: 0 12px;
  background: #fff;
  min-height: 220px;
  overflow: visible !important;
  transition: all 0.25s ease;
}

.chat-universal-container.fullwidth {
  max-width: 1200px !important; /* não estoura mais a largura */
  padding: 0;
  margin: 0 auto !important;
}

.msgs-area {
  flex: 1;
  overflow-y: auto !important;
  overflow-x: visible !important;
  max-height: 45vh;
  padding: 40px 4px 56px;  /* 🆕 padding-top: 40px */
  padding-bottom: 56px;   /* 🆕 espaço pro tooltip caber mesmo no final da lista */
  scroll-behavior: smooth;
  margin-top: 20px;
}

.msgs-area .msg:first-child {
  margin-top: 30px;
}

/* Cada mensagem é uma linha flex */
.msg {
  display: flex;
  width: 100%;
  margin: 20px 0;
}

/* 🔹 Agente (esquerda) */
.msgai {
  display: flex;
  flex-direction: column; /* 👈 empilha texto e ícones */
  align-items: flex-start; /* mantém à esquerda */
  width: 100%;
}

/* 🔹 Usuário (direita) */
.msguser {
  display: flex;
  flex-direction: column; /* 👈 empilha texto e ícones */
  align-items: flex-end; /* mantém à direita */
  width: 100%;
}


/* Balões */
.msgai .txt-msg,
.msguser .txt-msg {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  max-width: 70%;
}

.msgai .txt-msg { background: #f4f6f8; color: #333; }
.msguser .txt-msg { background: #039fdd; color: #fff; }

/* Bloco especial (ex: Tabela IA) */
.msg.bloco-especial {
  width: 100%;
  display: flex;
  justify-content: center;
}

.bloco-especial-inner {
  width: 100%;
  max-width: 1100px;
  max-height: 420px;         /* 🔹 limite vertical */
  overflow-y: auto;          /* 🔹 ativa scroll interno */
  overflow-x: auto;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 🔹 Scroll customizado do bloco */
.bloco-especial-inner::-webkit-scrollbar {
  height: 4px;
  width: 4px;
}
.bloco-especial-inner::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}
.bloco-especial-inner::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}

@media (max-width: 1100px) {
  .chat-universal-container.fullwidth .msgs-area { padding: 0 6px; }
}

/* =========================================================
   🔧 AJUSTE RESPONSIVO — CHAT MAIS AMPLO EM TELAS GRANDES
   ========================================================= */

/* =========================================================
   💡 CHAT MAIS AMPLO EM TELAS GRANDES
   ========================================================= */

@media (min-width: 1200px) {
  .chat-universal-container {
    max-width: 1150px !important;  /* antes: 930px */
    margin: 0 auto !important;
    padding: 0 8px !important;
  }

  .msgs-area {
    padding: 0 12px !important;
  }

  .msgai .txt-msg,
  .msguser .txt-msg {
    max-width: 90% !important; /* balões mais largos */
  }
}

/* Ainda mais largo em telas full HD */
@media (min-width: 1600px) {
  .chat-universal-container {
    max-width: 1320px !important; /* ocupa quase toda a área central */
  }

  .msgai .txt-msg,
  .msguser .txt-msg {
    max-width: 92% !important;
  }
}



.gatilhos-container{
  overflow: visible !important;
}

/* =========================================================
   💎 FIX FINAL — TOOLTIP VISÍVEL + TABELAS E CHAT ESTÁVEIS
   ========================================================= */

/* 1️⃣ Libera overflow apenas no painel do agente e no chat principal */
.painel-agente,
.painel-agente .col-md-10,
.painel-agente .chat-universal-container {
  overflow: visible !important;
  position: relative;
  z-index: 1;
}

/* 2️⃣ Área de mensagens mantém rolagem vertical natural */
.painel-agente .msgs-area {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  position: relative;
  z-index: 1;
}

/* 3️⃣ Tabelas e blocos internos preservam scroll e hierarquia */
.painel-agente .bloco-especial-inner,
.painel-agente .tabela-ia {
  overflow: auto !important;
  max-height: 420px !important;
  position: relative;
  z-index: 2;
}

/* 4️⃣ Balões e ícones podem exibir tooltips para fora */
.painel-agente .msgai,
.painel-agente .msguser,
.painel-agente .msg-actions {
  overflow: visible !important;
  position: relative;
  z-index: 3;
}

/* 5️⃣ Tooltips sempre acima de tudo */
.icon-btn[data-tooltip] {
  position: relative;
  z-index: 5;
}
.icon-btn::before,
.icon-btn::after {
  z-index: 9999 !important;
  overflow: visible !important;
}

/* 6️⃣ Ajuste: tooltips nunca presos pelo container Bootstrap */
.painel-agente .container,
.painel-agente .row {
  overflow: visible !important;
}

/* 7️⃣ Garantia visual (opcional): chat e tabela se sobrepõem corretamente */
.chat-universal-container {
  position: relative;
  z-index: 2;
}

/* =========================================================
   ✅ CORREÇÃO FINAL — TOOLTIP SEM CORTE GLOBALMENTE
   ========================================================= */

/* 1️⃣ Permite que tooltips saiam da viewport sem corte */
html, body {
  overflow-x: visible !important;
  overflow-y: visible !important;
}



/* 3️⃣ Reativa o scroll apenas quando há tabela ou bloco interno */
.painel-agente .bloco-especial-inner,
.painel-agente .tabela-ia {
  overflow: auto !important;
  max-height: 420px !important;
}

/* 4️⃣ Garante que tooltips apareçam acima de tudo */
.icon-btn[data-tooltip],
.icon-btn::before,
.icon-btn::after {
  z-index: 99999 !important;
  overflow: visible !important;
}

/* ===============================
   TOOLTIP SEM CORTE POR LADO DO BALÃO
   =============================== */

/* Base: já está acima do botão (bottom: 140%) */
.icon-btn::after {
  bottom: 140%;
  left: 50%;
  right: auto;
  transform: translateX(-50%) translateY(5px);
  max-width: 320px;
  white-space: nowrap;
}
.icon-btn::before {
  bottom: 120%;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: rgba(0,0,0,0.85) transparent transparent transparent;
}

/* ⬅️ Mensagem da IA (lado esquerdo): ancora à ESQUERDA do botão, abre para a direita */
.painel-agente .msgai .msg-actions .icon-btn::after {
  left: 0;                  /* encosta na esquerda do botão */
  right: auto;
  transform: translateX(0) translateY(5px);
  text-align: left;
}
.painel-agente .msgai .msg-actions .icon-btn::before {
  left: 12px;               /* seta alinhada ao botão */
  right: auto;
  transform: none;
}

/* ➡️ Mensagem do usuário (lado direito): ancora à DIREITA do botão, abre para a esquerda */
.painel-agente .msguser .msg-actions .icon-btn::after {
  right: 0;                 /* encosta na direita do botão */
  left: auto;
  transform: translateX(0) translateY(5px);
  text-align: right;
}
.painel-agente .msguser .msg-actions .icon-btn::before {
  right: 12px;
  left: auto;
  transform: none;
  border-color: rgba(0,0,0,0.85) transparent transparent transparent; /* seta continua para cima */
}

/* Garantias de empilhamento (não quebram tabela/scroll) */
.painel-agente .msg-actions { position: relative; z-index: 4; }
.icon-btn::before, .icon-btn::after { z-index: 9999 !important; }

/* =========================================================
   💡 AJUSTE DE LARGURA DO CHAT EM TELAS GRANDES
   ========================================================= */

/* Até 1200px, mantém como está */
@media (max-width: 1199px) {
  .campo-input-wrapper {
    max-width: 930px;
  }
}

/* A partir de 1200px — amplia proporcionalmente */
@media (min-width: 1200px) and (max-width: 1599px) {
  .campo-input-wrapper {
    max-width: 1080px; /* +160px de largura */
  }
}

/* A partir de 1600px — usa quase toda a coluna */
@media (min-width: 1600px) {
  .campo-input-wrapper {
    max-width: 1220px; /* ocupa quase toda a col-md-10 */
  }
}

/* Garante que o container acompanhe */
.chat-universal-container {
  width: 100%;
  max-width: none; /* não restringe */
}

/* =========================================================
   💄 Ajuste visual — afastar a barra de rolagem do conteúdo
   ========================================================= */

.chat-universal-container .msgs-area {
  padding-right: 180px !important;     /* cria espaço interno à direita */
  scrollbar-gutter: stable both-edges; /* reserva espaço fixo pro scroll */
}

.chat-universal-container.fullwidth .msgs-area {
  padding-right: 20px !important;     /* um pouco mais largo no modo full */
}

/* Também afasta a barra dentro dos blocos especiais (ex: tabelas IA) */
.bloco-especial-inner {
  padding-right: 12px !important;
  box-sizing: border-box;
}

/* =========================================================
   ✅ TOOLTIP VISÍVEL NAS TABELAS UNIVERSAIS (SEM CORTE)
   ========================================================= */

/* Libera overflow no container de botões dentro das tabelas IA */
.tabela-ia,
.tabela-ia > div {
  overflow: visible !important;
  position: relative !important;
}

/* Garante que tooltips dos ícones fiquem acima de todos os elementos */
.tabela-ia .icon-btn[data-tooltip],
.tabela-ia .icon-btn::before,
.tabela-ia .icon-btn::after {
  z-index: 99999 !important;
  overflow: visible !important;
}

/* Ajuste fino de posicionamento */
.tabela-ia .icon-btn::after {
  bottom: 140%; /* tooltip acima do botão */
  left: 50%;
  transform: translateX(-50%) translateY(5px);
}

.tabela-ia .icon-btn::before {
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
}

.acao-btn {
  background: rgba(0, 0, 0, 0.04);
  border: none;
  border-radius: 50%;
  padding: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.acao-btn svg {
  transition: transform 0.15s ease;
}

.acao-btn:hover svg {
  transform: scale(1.2);
}

.acao-btn.aceitar:hover {
  background: rgba(10, 135, 84, 0.12);
}

.acao-btn.recusar:hover {
  background: rgba(197, 48, 48, 0.12);
}

.icon-btn.ativo {
  color: #039fdd;
  transform: scale(1.15);
}

.acao-btn.aceitar[data-tooltip="Enviar notificação WhatsApp"] {
  transition: transform 0.2s ease;
}

.acao-btn.aceitar[data-tooltip="Enviar notificação WhatsApp"]:hover {
  transform: scale(1.2);
}

/* ============================================
   💭 ESTILO FINAL — AGENTES INATIVOS (FIGMA)
   ============================================ */

/* Mantém o card branco como os ativos */
.col-md-3.box.agente-inativo {
  background: transparent !important;
  pointer-events: none;
  filter: none;
}

/* Mantém o mesmo estilo de padding e estrutura */
.col-md-3.box.agente-inativo .box-in {
  background: #ffffff !important; /* fundo branco igual aos ativos */
  border-radius: 25px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 30px 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); /* sombra suave igual aos outros */
  box-sizing: border-box;
}

/* Área da imagem */
.col-md-3.box.agente-inativo .foto {
  background: #e0e0e0 !important; /* cinza claro no lugar do azul */
  border-radius: 20px;
}

/* Deixa o personagem em preto e branco */
.col-md-3.box.agente-inativo .foto img {
  filter: grayscale(100%);
  opacity: 0.9;
}

/* Tipografia em cinza */
.col-md-3.box.agente-inativo span,
.col-md-3.box.agente-inativo h3,
.col-md-3.box.agente-inativo p {
  color: #7b7b7b !important;
}

/* Badge (área do agente) em cinza com texto branco */
.col-md-3.box.agente-inativo span {
  background-color: #dedede !important;
  color: #ffffff !important;
  border: none !important;
}

/* Remove botão azul */
.col-md-3.box.agente-inativo .bt,
.col-md-3.box.agente-inativo .bt-azul-vazado,
.col-md-3.box.agente-inativo .bt-azul-preenchido,
.col-md-3.box.agente-inativo a.bt {
  display: none !important;
}

/* Mensagem “Disponível em breve!” com ícone igual ao Figma */
.col-md-3.box.agente-inativo .box-in::after {
  content: "Disponível em breve!";
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 23px;

  font-weight: 700;
  font-size: 14px;
  color: #f49518;
  background: #ffffff;
  border-radius: 100px;
  padding: 8px 18px;
  width: fit-content;
  align-self: center;

  /* Novo SVG — estilo “Material Schedule” */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23f49518' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 6v6l4 2'/></svg>");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 18px;
  padding-left: 38px;
}

/* === Selector de Idioma (versão isolada via Portal, sem flicker) === */
.language-selector {
  position: relative;
  display: inline-block;
  margin-left: 12px;
  user-select: none;
  z-index: 10;
}

.idioma-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #dedede;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 14px;
  color: #273c54;
  line-height: 1;
  cursor: default;
}

.idioma-btn:hover,
.idioma-btn.ativo {
  border-color: #dedede;
  background-color: #fff;
  box-shadow: none;
}

.idioma-flag {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.idioma-codigo {
  font-weight: 600;
  font-size: 13px;
}

.idioma-caret {
  margin-left: 2px;
  font-size: 12px;
  color: #7b7b7b;
}

/* Dropdown renderizado em portal — fora do fluxo normal */
.idioma-dropdown {
  background: #fff;
  border: 1px solid #dedede;
  border-radius: 10px;
  min-width: 140px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  list-style: none;
  padding: 6px;
  margin: 0;
  z-index: 9999;
}

.idioma-dropdown li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: default;
  font-size: 13px;
  color: #273c54;
  background: #fff;
}

.idioma-dropdown li:hover {
  background: #f4fbff;
}

.idioma-dropdown li.ativo {
  background: #cdf1ff;
  font-weight: 600;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.modal-card {
  background: #fff;
  border-radius: 16px;
  width: 400px;
  padding: 30px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal-card input {
  border: 1px solid #DDD;
  border-radius: 8px;
  padding: 8px;
}

.modal-card button {
  border: none;
  border-radius: 8px;
  padding: 10px;
  font-weight: 600;
  cursor: pointer;
}

.modal-card button:not(.secundario) {
  background: #039FDD;
  color: #fff;
}

.modal-card button.secundario {
  background: #f5f5f5;
  color: #333;
}
/* === 🌐 PÁGINA MINHA CONTA === */
.conta-page {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: #ffffff;
  font-family: "Lato", sans-serif;
  overflow-x: hidden;
  overflow-y: hidden; /* remove a rolagem desta página */
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.04); /* 🌫️ Outer shadow leve */
  border-radius: 40px;
}

/* === 🧭 HEADER === */
.conta-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 60px;
  border-bottom: 1px solid #f2f2f2;
  height: 90px;
  position: relative;
  z-index: 10;
  background: #fff;
}

.conta-logo {
  height: 52px;
}

.conta-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* === 🌈 BACKGROUND DECORATIVO === */
.conta-bg {
  position: absolute;
  top: 90px;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  overflow: hidden;
  z-index: 0;
}

/* 💧 Azul suave inferior esquerdo */
.conta-bg-blue {
  position: absolute;
  width: 900px;
  height: 520px;
  left: -250px;
  bottom: -100px;
  background: #039fdd;
  opacity: 0.08;
  filter: blur(120px);
}

/* ☁️ Luz branca translúcida */
.conta-bg-white {
  position: absolute;
  width: 600px;
  height: 300px;
  right: 150px;
  bottom: -60px;
  background: #ffffff;
  opacity: 0.8;
  filter: blur(180px);
}

/* 🌫️ Azul claro no topo */
.conta-bg-lightblue {
  position: absolute;
  width: 900px;
  height: 300px;
  left: -150px;
  top: 0;
  background: #cde4f8;
  opacity: 0.4;
  filter: blur(180px);
  transform: rotate(-12deg);
}

/* === 📄 CONTEÚDO === */
.conta-container {
  position: relative;
  z-index: 5;
  max-width: 1366px;
  margin: 0 auto;
  padding: 40px 70px 100px 70px;
}

.conta-titulo-wrapper {
  display: flex;
  align-items: center; /* 🔹 alinhamento vertical real */
  gap: 10px;
}

.conta-btn-voltar {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #000000;
  transform: translateY(-10px); /* 🔹 ajuste fino para centralizar */
}

.conta-header-text {
  margin: 40px 60px 24px 60px;   /* mesmo espaçamento lateral do header */
}

.conta-titulos h1 {
  margin: 0;
  font-size: 1.8rem;
  line-height: 1.3;
  display: flex;
  align-items: center;
}

.conta-titulos p {
  margin: 0;
  color: #7b7b7b;
  font-size: 0.95rem;
  margin-top: 4px;
}

.conta-header-text a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #000000;
}

.conta-btn-voltar svg {
  width: 26px;
  height: 26px;
  transition: transform 0.2s ease, color 0.2s ease;
}

.conta-header-text a svg {
  width: 28px;
  height: 28px;
  transition: color 0.2s ease;
}

.conta-header-text a:hover svg {
  color: #000000;
}

.conta-header-text h1 {
  margin: 0;
  line-height: 1.2;
  font-size: 1.8rem;
}

.conta-header-text p {
  margin: 2px 0 0 0;
  color: #7b7b7b;
  font-size: 0.95rem;
}

/* === 🧾 CARD PRINCIPAL === */
.conta-card {
  position: relative;
  background: #fff;
  box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  padding: 60px 80px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  
}

/* Linha divisória logo abaixo do header do card */
.conta-card::before {
  content: "";
  position: absolute;
  top: 145px;
  left: 70px;
  right: 70px;
  height: 1px;
  background: #dedede;
}

/* Botão “Alterar dados” — alinhado ao centro do avatar */
.conta-btn-alterar {
  position: absolute;
  top: 60px;
  right: 70px;
  border: 1px solid #039fdd;
  color: #039fdd;
  background: transparent;
  border-radius: 7px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s ease;
}

.conta-btn-alterar:hover {
  background: #e7f6fc;
}

/* === 👤 AVATAR === */
.conta-avatar {
  display: flex;
  align-items: center;
  margin-bottom: 55px;
}

.avatar-circle {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  
  color: #0488bc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Outfit", sans-serif;
  font-size: 26px;
  font-weight: 400;
  margin-right: 20px;
}

.conta-avatar span {
  font-size: 20px;
  color: #000;
}

/* === 🧩 INFORMAÇÕES === */
.conta-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 10px;
}

.info-item label {
  color: #000;
  font-size: 16px;
  font-weight: 400;
}

.info-item p {
  color: #7b7b7b;
  font-size: 16px;
  margin-top: 2px;
}

.link-alterar-senha {
  color: #039fdd;
  text-decoration: underline;
  cursor: pointer;
  transition: 0.2s ease;
}

.link-alterar-senha:hover {
  color: #027cb8;
}

/* === 🌀 ESTADOS === */
.page-loading {
  padding: 80px;
  text-align: center;
  font-size: 16px;
  color: #555;
}

/* === 💻 RESPONSIVIDADE === */
@media (max-width: 992px) {
  .conta-container {
    padding: 30px 30px 80px 30px;
  }

  .conta-card {
    padding: 40px 30px;
  }

  .conta-btn-alterar {
    top: 30px;
    right: 30px;
  }
}

@media (max-width: 600px) {
  .conta-card {
    width: 95%;
    padding: 30px 20px;
  }

  .avatar-circle {
    width: 52px;
    height: 52px;
    font-size: 22px;
  }

  .conta-header-text h1 {
    font-size: 20px;
  }

  .conta-header-text p {
    font-size: 14px;
  }
}

/* 🎛️ Filtro de Agentes — no fluxo, acima dos cards */
.filtro-agentes {
  position: relative;              /* antes: absolute */
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;       /* alinha à direita como no design */
  margin: -74px 0 22px;              /* aproxima do título, sem encostar nos cards */
  z-index: 1;
  overflow: visible !important;
}

.filtro-label {
  font-weight: 400;
  font-size: 14px;
  line-height: 130%;
  color: #494949;
}

.filtro-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 225px;
  height: 38px;
  background: #ffffff;
  box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.06);
  border-radius: 100px;
  padding: 0 14px;
  overflow: hidden;
}

/* Fundo azul animado */
.filtro-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 80px; /* ⬅️ antes era 71px — agora cobre melhor o texto */
  height: 38px;
  background: #039fdd;
  border-radius: 100px;
  transition: left 0.25s ease;
  z-index: 1;
}

.filtro-btn {
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  color: #7b7b7b;
  z-index: 2;
  text-align: center;
  width: 70px;
  user-select: none;
  transition: color 0.2s ease;
}

.filtro-btn.ativo {
  color: #ffffff;
  font-weight: 500;
}

/* Posições do fundo animado */
.filtro-agentes[data-filtro="todos"] .filtro-box::before {
  left: 5px;
}

.filtro-agentes[data-filtro="ativos"] .filtro-box::before {
  left: 70px;
}

.filtro-agentes[data-filtro="inativos"] .filtro-box::before {
  left: 136px;
}

/* === 🎚️ Botão "Ordenar" — ajustes de proporção e espaçamento === */
.filtro-ordenar {
  display: flex;
  align-items: center;
  gap: 5px;                 /* 🔹 antes 6px — agora mais compacto */
  background: transparent;
  border: none;
  color: #039fdd;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 10px;
  margin-left: 0px;         /* 🔹 antes 14px — aproxima do filtro */
  transition: color 0.2s ease;
}

.filtro-ordenar:hover {
  color: #007bb8;
}

/* 🔹 Ícone ligeiramente maior e centralizado */
.filtro-ordenar svg {
  stroke: currentColor;
  width: 18px;              /* antes 16px */
  height: 18px;
  transform: translateY(-1px);
}

/* === 🧭 Menu de Ordenação (Dropdown) === */
.filtro-ordenar-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.menu-ordenar {
  position: absolute;
  top: 40px;
  right: 0;
  width: 162px;
  height: 96px;
  background: #ffffff;
  border: 1px solid #f2f2f2;
  box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  padding-top: 10px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.opcao-ordenar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  cursor: pointer;
  font-family: "Lato", sans-serif;
  font-size: 14px;
  color: #000000;
  transition: background 0.2s ease;
}

.opcao-ordenar:hover {
  background: rgba(3, 159, 221, 0.05);
  border-radius: 16px;
}

.radio-outer {
  width: 16px;
  height: 16px;
  border: 1px solid #0488bc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.radio-inner {
  width: 10px;
  height: 10px;
  background: #0488bc;
  border-radius: 50%;
  position: absolute;
}

.opcao-label {
  font-size: 14px;
  line-height: 130%;
}

/* === 🧭 Correção do piscar do menu de usuário === */
.row.header {
  position: relative;
  overflow: visible !important; /* 🔹 evita cortar o dropdown */
  z-index: 10;
}

.row.header .avatar {
  position: relative;
  overflow: visible !important;
}

.row.header .avatar > * {
  z-index: 11;
}



/* ==========================================================
   ✅ CORREÇÃO FINAL — Menu do usuário 100% opaco e destacado
   ========================================================== */
.user-menu-dropdown {
  background-color: #ffffff !important;   /* Branco sólido */
  border: 1px solid #d9d9d9 !important;
  border-radius: 12px !important;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important; /* Sem sombra transparente */
  backdrop-filter: none !important;       /* remove qualquer herança de blur */
  opacity: 1 !important;                  /* garante opacidade total */
  isolation: isolate !important;          /* força novo contexto de empilhamento */
  z-index: 999999 !important;
  position: absolute !important;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  overflow: visible !important;
}

.user-menu-dropdown:hover {
  opacity: 1 !important; /* 🔹 evita transparência no hover */
  background-color: #fff; /* mantém sólido */
}

/* === 🌊 LOADING UNIVERSAL (Padrão Figma com legenda) === */
.loading-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 10px 0 10px auto; /* 🔹 alinha à direita como as bolhas */
}

.loading-universal {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 126px;
  height: 92px;
  background: #CDF1FF;
  border-radius: 10px;
  animation: fadeIn 0.3s ease-in-out;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Spinner refinado e centralizado */
.loading-spinner {
  width: 18px;
  height: 18px;
  border: 1.5px solid transparent;
  border-top-color: #0488BC;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Texto abaixo do box */
.loading-caption {
  margin-top: 6px;
  font-size: 14px;
  color: #000000;
  font-family: "Lato", sans-serif;
  text-align: center;
}

/* Variações de tamanho */
.loading-universal.lg {
  width: 150px;
  height: 110px;
}
.loading-universal.sm {
  width: 90px;
  height: 68px;
}

/* === Animações === */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === 🔧 Correção responsiva do LanguageSelector e UserMenu === */
.avatar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: nowrap;
}

@media (max-width: 1024px) {
  .avatar {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
  }

  .language-selector,
  .user-menu {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
    position: relative !important;
    z-index: 99998 !important;
    background: #ffffff !important;
  }

  .language-selector .idioma-btn {
    padding: 6px 10px;
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .avatar {
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }
}

/* === 🧭 Correção de sobreposição do menu de usuário === */
.user-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: #fff;
  border: 1px solid #dedede;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 8px 0;
  min-width: 180px;
  z-index: 9999; /* 🔥 garante que fica acima de tudo */
}

/* Itens internos do menu */
.user-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 15px;
  color: #333;
  cursor: pointer;
  transition: background 0.2s ease;
}

.user-menu-item:hover {
  background: rgba(3, 159, 221, 0.08); /* leve destaque, sem transparência */
  color: #039fdd;
}


/* === 🧭 Correção de sobreposição do UserMenu === */
.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 8px 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  min-width: 190px;
  z-index: 99999; /* 🔥 mantém o menu sobre todos os elementos */
}

/* Reforço opcional no container pai */
.user-menu-container {
  position: relative;
  z-index: 99999;
}

/* === 🌐 Ajustes responsivos para o Language Selector === */
.language-selector {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Botão principal */
.idioma-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #dedede;
  border-radius: 12px;
  padding: 8px 12px;
  line-height: 1;
  cursor: default;
  transition: all 0.2s ease;
}

.idioma-btn:hover {
  border-color: #039fdd;
  box-shadow: 0 0 0 3px rgba(3, 159, 221, 0.08);
}

.idioma-flag {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.idioma-codigo {
  font-weight: 600;
  font-size: 14px;
}

/* Evita quebra do botão em telas intermediárias (tablets) */
@media (max-width: 1024px) {
  .avatar {
    flex-wrap: nowrap !important;
  }

  .language-selector {
    margin-right: 6px;
  }

  .idioma-btn {
    padding: 6px 10px;
    gap: 6px;
  }

  .idioma-flag {
    width: 18px;
    height: 18px;
  }

  .idioma-codigo {
    font-size: 13px;
  }
}

/* Para telas muito pequenas (smartphones) */
@media (max-width: 768px) {
  .language-selector {
    order: 2;
  }

  .idioma-btn {
    padding: 5px 8px;
    border-radius: 10px;
  }

  .idioma-codigo {
    display: none; /* mostra só a bandeira no celular */
  }
}

/* === Cards de agentes: alturas consistentes em telas menores === */
.agente-card{
  display:flex;
  flex-direction:column;
  height:100%;
  box-sizing:border-box;
}

.agente-body{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1 1 auto; /* ocupa o miolo do card */
}

/* Título: 1 linha fixa */
.agente-titulo{
  --lines:1;
  --lh:1.2;                 /* line-height relativo do título */
  line-height:var(--lh);
  overflow:hidden;

  /* clamp (novo + legacy) */
  line-clamp:var(--lines);
  display:-webkit-box;
  -webkit-line-clamp:var(--lines);
  -webkit-box-orient:vertical;

  /* reserva de altura para manter cartões iguais mesmo com pouco texto */
  min-height:calc(var(--lh) * var(--lines) * 1em);
}

/* Descrição: 3 linhas fixas */
.agente-desc{
  --lines:3;
  --lh:1.35;                /* ajuste fino conforme seu font-size */
  line-height:var(--lh);
  overflow:hidden;
  overflow-wrap:anywhere;   /* evita que uma palavra grande estoure o card */

  /* clamp (novo + legacy) */
  line-clamp:var(--lines);
  display:-webkit-box;
  -webkit-line-clamp:var(--lines);
  -webkit-box-orient:vertical;

  /* reserva de altura para equalizar os cards */
  min-height:calc(var(--lh) * var(--lines) * 1em);
}

/* Rodapé (botão/label) sempre no fundo e CENTRALIZADO */
.agente-footer{
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;   /* ⬅️ centraliza horizontalmente */
  gap: 6px;
  text-align: center;        /* fallback para botões inline-block */
}

/* Tablet e abaixo – mantemos 3 linhas na descrição e 1 no título */
@media (max-width:1024px){
  .agente-desc{ --lines:3; }
  .agente-titulo{ --lines:1; }
}

/* Caso o navegador suporte nativamente line-clamp sem prefixo */
@supports (line-clamp: 2){
  .agente-titulo, .agente-desc{
    display:block; /* não precisa do -webkit-box */
  }
}

/* === Fix dos cards SOMENTE na página de Áreas do Agente === */
.agente-areas .boxes-padrao .box-in{
  background:#fff;                    /* mantém branco */
  border-radius:20px;
  box-shadow:0 5px 31px rgba(0,0,0,.06);
  transition:box-shadow .2s ease, transform .2s ease;
}
.agente-areas .boxes-padrao .box-in:hover{
  background:#fff;                    /* não pinta de azul */
  box-shadow:0 12px 32px rgba(0,0,0,.12);
  transform:translateY(-2px);
}
/* Não troca as cores de textos dentro do card nessa página */
.agente-areas .boxes-padrao .box-in:hover h1,
.agente-areas .boxes-padrao .box-in:hover h2,
.agente-areas .boxes-padrao .box-in:hover h3,
.agente-areas .boxes-padrao .box-in:hover h4,
.agente-areas .boxes-padrao .box-in:hover h5,
.agente-areas .boxes-padrao .box-in:hover h6,
.agente-areas .boxes-padrao .box-in:hover p,
.agente-areas .boxes-padrao .box-in:hover span{
  color:inherit;
  background:inherit;
}
/* Botão mantém seu estilo normal */
.agente-areas .boxes-padrao .box-in:hover a.bt,
.agente-areas .boxes-padrao .box-in:hover button.bt{
  color:inherit;
  border-color:currentColor;
  background:transparent;
}

/* === Botão "Usar" no hover do card (somente Áreas do agente) === */
.agente-areas .boxes-padrao .box-in:hover .bt-azul-vazado{
  color:#039FDD !important;
  border-color:#039FDD !important;
  background:transparent !important;
}

/* Se houver variações com <a> em vez de <button> */
.agente-areas .boxes-padrao .box-in:hover a.bt-azul-vazado{
  color:#039FDD !important;
  border-color:#039FDD !important;
  background:transparent !important;
}

/* === Visualizar por: wrapper e elipses do Figma === */
.dv-bts {
  display: flex;
  justify-content: flex-end;
}

.viz-por {
  position: relative;                 /* base para os glows */
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1;                         /* acima do background geral */
}

/* Label “Visualizar por” */
.viz-label {
  font-size: 14px;
  color: #4a4a4a;
  white-space: nowrap;
}

/* Elipse CDF1FF (blur 35) */
.viz-por::before {
  content: "";
  position: absolute;
  width: 158px;
  height: 134px;
  right: -14px;        /* aproxima da direita para simular left:1128px */
  top: -6px;           /* equivalente ao top:106px dentro do contexto */
  background: #CDF1FF;
  opacity: 0.6;
  filter: blur(35px);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

/* Elipse 039FDD (blur 35, opacidade 0.1) */
.viz-por::after {
  content: "";
  position: absolute;
  width: 158px;
  height: 134px;
  right: 66px;         /* desloca um pouco para esquerda */
  top: 22px;           /* equivalente ao top:144px */
  background: #039FDD;
  opacity: 0.1;
  filter: blur(35px);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

/* Garante que o “pill” não quebre e não estoure em desktop */
.viz-por .lista-bts {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 0 1 auto;
  white-space: nowrap;
}

/* ===== Responsividade sem quebra ===== */
@media (max-width: 1200px) {
  .viz-por { gap: 10px; }
  .viz-por::before { right: -22px; top: -2px; }
  .viz-por::after  { right: 58px;  top: 26px; }
}

@media (max-width: 992px) {
  .dv-bts { justify-content: flex-start; } /* não cola no canto direito */
  .viz-por {
    flex-wrap: wrap;                       /* label acima, abas abaixo */
    row-gap: 8px;
  }
  .viz-por .lista-bts {
    white-space: normal;                   /* permite quebrar em 2 linhas se faltar espaço */
  }
  /* ajusta os glows para não vazar */
  .viz-por::before { right: 0;   top: -6px;  width: 130px; height: 110px; }
  .viz-por::after  { right: 70px; top: 18px; width: 130px; height: 110px; }
}

@media (max-width: 560px) {
  .viz-por .lista-bts { width: 100%; }     /* pill ocupa a linha toda */
  .viz-label { margin-right: 0; }
  .viz-por::before,
  .viz-por::after { display: none; }       /* em telas muito pequenas, esconde o glow para não poluir */
}

/* 🔽 Reduz a altura do "pill" dos botões (Visualizar por) */
.viz-por .lista-bts{
  padding: 4px 6px !important;   /* antes: ~8px */
  border-radius: 9999px;         /* mantém o formato cápsula */
}

/* Botões dentro do pill */
.viz-por .lista-bts a{
  padding: 12px 14px !important;  /* antes: ~10px 18px */
  line-height: 1.1 !important;   /* reduz altura visual */
  font-size: 14px;               /* mantém legibilidade */
  border-radius: 20px !important;
}

/* Opcional: reduzir um pouco mais em telas pequenas */
@media (max-width: 560px){
  .viz-por .lista-bts a{
    padding: 6px 12px !important;
    font-size: 13.5px;
  }
}

/* === Pill "Visualizar por" — corrigir filete branco à esquerda === */
.viz-por .lista-bts{
  --pill-h: 40px;
  display: inline-flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid #E8EEF3;
  border-radius: 9999px;
  height: var(--pill-h);

  padding: 0 !important;     /* remove “borda interna” branca */
  gap: 0 !important;         /* elimina espaço entre os links */
  overflow: hidden;          /* recorta cantos dos filhos */
  box-shadow: 0 10px 22px rgba(3,159,221,.08);
  white-space: nowrap;
}

.viz-por .lista-bts a{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;              /* igual ao contêiner */
  padding: 0 18px;           /* só largura */
  line-height: 1;
  margin: 0 !important;      /* sem deslocamento lateral */
  border: 0 !important;
  border-radius: 0 !important;          /* cantos vêm do contêiner */
  box-shadow: none !important;          /* evita “auréola” na borda */
  background-clip: padding-box;         /* sem bleed de fundo */
}

.viz-por .lista-bts a.on{
  background: #039FDD;
  color: #fff;
}

/* Garantia extra: arredonda os extremos se algum estilo legado voltar */
.viz-por .lista-bts a:first-child{
  border-top-left-radius: 9999px !important;
  border-bottom-left-radius: 9999px !important;
}
.viz-por .lista-bts a:last-child{
  border-top-right-radius: 9999px !important;
  border-bottom-right-radius: 9999px !important;
}

/* Compacto em telas pequenas (opcional) */
@media (max-width: 560px){
  .viz-por .lista-bts{ --pill-h: 36px; }
  .viz-por .lista-bts a{ padding: 0 14px; font-size: 13.5px; }
}

/* Pill "Visualizar por" — ativo arredondado nos dois lados */
.viz-por .lista-bts a.on{
  border-radius: 9999px !important;   /* arredonda esquerda e direita */
}

/* (opcional) se ainda aparecer um canto reto por herança, força os extremos */
.viz-por .lista-bts a.on:first-child{
  border-top-left-radius: 9999px !important;
  border-bottom-left-radius: 9999px !important;
}
.viz-por .lista-bts a.on:last-child{
  border-top-right-radius: 9999px !important;
  border-bottom-right-radius: 9999px !important;
}

/* Pill "Visualizar por" — ativo arredondado dos dois lados */
.viz-por .lista-bts a.on{
  border-radius: 9999px !important; /* cápsula completa */
  position: relative;
  z-index: 1;                        /* fica por cima do vizinho */
}

/* Se o ativo for o da esquerda, sobrepõe 2px o da direita */
.viz-por .lista-bts a.on:first-child{
  margin-right: -2px !important;
}

/* Se o ativo for o da direita, sobrepõe 2px o da esquerda */
.viz-por .lista-bts a.on:last-child{
  margin-left: -2px !important;
}

/* Hover do botão NÃO selecionado: arredondado dos dois lados */
.viz-por .lista-bts a:not(.on):hover{
  background: #EAF7FD;            /* hover suave */
  border-radius: 9999px !important;
  position: relative;
  z-index: 1;                      /* fica por cima do vizinho */
  transition: background .15s ease, color .15s ease;
}

/* Se o hover for o da ESQUERDA, sobrepõe 2px à direita */
.viz-por .lista-bts a:not(.on):hover:first-child{
  margin-right: -2px !important;
}

/* Se o hover for o da DIREITA, sobrepõe 2px à esquerda */
.viz-por .lista-bts a:not(.on):hover:last-child{
  margin-left: -2px !important;
}

/* Garantia: quando não estiver em hover nem ativo, mantém sem raio próprio */
.viz-por .lista-bts a{
  border-radius: 0 !important;     /* cantos vêm do container; */
}

/* ↑ Sobe o grupo "Visualizar por" um pouco, mantendo responsivo */
.titulo-agente .dv-bts .viz-por{
  margin-top: -72px;   /* ajuste principal */
}

/* ajustes por breakpoint para evitar sobreposição em telas menores */
@media (max-width: 1200px){
  .titulo-agente .dv-bts .viz-por{ margin-top: -10px; }
}
@media (max-width: 992px){
  .titulo-agente .dv-bts .viz-por{ margin-top: -6px; }
}
@media (max-width: 560px){
  .titulo-agente .dv-bts .viz-por{ margin-top: 0; } /* mobile: mantém alinhado */
}

/* ===== Elipses decorativas do chat (AgenteAcaoAtiva) ===== */
.area-chat-wrapper {
  position: relative;              /* ancora os elipses */
}

/* garante que o card do chat fique acima das elipses */
.area-chat-card {
  position: relative;
  z-index: 1;
}

/* base comum dos elipses */
.bg-ellipse {
  position: absolute;
  width: 166px;
  height: 245px;
  background: #CDF1FF;            /* Brand/3 */
  filter: blur(20px);
  border-radius: 50%;
  pointer-events: none;            /* não interfere com cliques */
  z-index: 0;                      /* atrás do card */
  opacity: 1;                      /* igual Figma */
}

/* LEFT — valores idênticos ao Figma */
.bg-ellipse--left {
  left: 56px;
  top: 368px;
}

/* RIGHT — valores idênticos ao Figma */
.bg-ellipse--right {
  left: 910px;
  top: 369px;
}

/* Responsividade: em telas menores, reduz levemente a opacidade
   para evitar "estouro" visual e mantém posicionamento */
@media (max-width: 992px) {
  .bg-ellipse {
    opacity: 0.8;
  }
}

/* ===== Elipses decorativas do chat (AgenteAcaoAtiva) ===== */
.chat-ellipse-wrapper{
  position: relative;
  overflow: visible;                 /* nada de corte */
}

/* o card fica abaixo dos elipses, mas continua interativo */
.chat-ellipse-wrapper .painel-agente{
  position: relative;
  z-index: 1;
}

/* elipses ACIMA do card, sem capturar cliques */
.bg-ellipse{
  position: absolute;
  width: 166px;
  height: 245px;
  background: #CDF1FF;
  filter: blur(20px);
  border-radius: 50%;
  pointer-events: none;
  top: 50%;                          /* centraliza verticalmente no chat */
  transform: translateY(-50%);
  opacity: 1;
}

/* ESQUERDA (como no Figma) */
.bg-ellipse--left{ left: -40px; }

/* DIREITA — ancorada na borda direita para manter simetria */
.bg-ellipse--right{ right: -40px; left: auto; }

@media (max-width: 992px){
  .bg-ellipse{ opacity: .85; }
}