.chatbot-wrapper body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    background-color: #f3f3f3;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.chatbot-wrapper .chat-container {
    width: 650px;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    background-color: white;
    overflow: hidden;
}

.chatbot-wrapper .header {
    display: flex;
    align-items: center;
    padding: 15px;
    background-color: #660099;
    color: white;
    justify-content: space-between;
}

.chatbot-wrapper .header-left {
    display: flex;
    align-items: center;
}

.chatbot-wrapper .avatar-header {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-right: 15px;
    border: 2px solid white;
}

.chatbot-wrapper .agent-info {
    display: flex;
    flex-direction: column;
}

.chatbot-wrapper .agent-info h2 {
    margin: 0;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 0 10px 0px;
}

.chatbot-wrapper .status {
    color: #BCFF3B;
    font-size: 14px;
}

.chatbot-wrapper .header h3 {
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    flex-grow: 1;
    margin-left: -50px;
}

.chatbot-wrapper .chat-box {
    height: 400px;
    overflow-y: auto;
    padding: 10px;
    background-color: #f3f3f3;
}

.chatbot-wrapper .input-container {
    display: flex;
    padding: 15px;
    background-color: white;
    border-top: 1px solid #ddd;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
}

.chatbot-wrapper #user-input {
    flex-grow: 1;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    outline: none;
    transition: border 0.3s ease;
}

.chatbot-wrapper #user-input:focus {
    border-color: #660099;
}

.chatbot-wrapper .message {
    margin: 10px 0;
    display: flex;
}

.chatbot-wrapper .message.user {
    justify-content: flex-end;
}

.chatbot-wrapper .message.bot {
    justify-content: flex-start;
}

.chatbot-wrapper .message p {
    padding: 10px;
    border-radius: 8px;
    max-width: 100%;
}

.chatbot-wrapper .message.user p {
    background-color: #660099;
    color: white;
    left: 10px;
}

.chatbot-wrapper .message.bot p {
    background-color: #e3e3e3;
}

.chatbot-wrapper .option-btn {
    background-color: #660099;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    margin: 5px 5px 0 0;
    cursor: pointer;
    font-size: 14px;
}

.chatbot-wrapper .option-btn:hover {
    background-color: #050C3A;
}

.chatbot-wrapper .message-wrapper {
    display: flex;
    align-items: flex-start;
    margin: 10px 0;
    position: relative;
}

.chatbot-wrapper .message-wrapper.user {
    right: 10px;
    flex-direction: row-reverse;
}

.chatbot-wrapper .message-wrapper.bot {
    justify-content: flex-start;
}

.chatbot-wrapper .avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
}

.chatbot-wrapper .message-wrapper.user .avatar {
    margin-left: 10px;
    margin-right: 0;
}

.chatbot-wrapper .message-wrapper p {
    padding: 10px;
    border-radius: 8px;
    max-width: 70%;
    font-size: 14px;
    word-wrap: break-word;
    position: relative;
    margin: 0;
    padding-bottom: 20px;
}

.chatbot-wrapper .timestamp {
    font-size: 10px;
    color: #888;
    position: absolute;
    bottom: 5px;
    right: 10px;
}

.chatbot-wrapper .message-wrapper.user p {
    background-color: #660099;
    color: white;
}

.chatbot-wrapper .message-wrapper.bot p {
    background-color: #e3e3e3;
    color: black;
}

.chatbot-wrapper .chat-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #660099;
    border: none;
    border-radius: 50%;
    padding: 0px;
    cursor: pointer;
    z-index: 1000;
    width: 60px;
        height: 60px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: none;
    z-index: 2147483647;
}

.chatbot-wrapper .chat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.chatbot-wrapper #chat-bubble {
    position: fixed;
    bottom: 85px;
    right: 20px;
    background-color: #660099;
    color: white;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 999;
    width: 180px;
    display: none;
    text-align: center;
}

.chatbot-wrapper #chat-bubble::after {
    content: '';
    position: absolute;
    bottom: -18px;
    right: 40px;
    border-width: 10px;
    border-style: solid;
    border-color: #660099 transparent transparent transparent;
}

.chatbot-wrapper .modal {
    display: none;
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.chatbot-wrapper .modal-content {
    background-color: white;
    margin: 5% auto;
    padding: 0;
    border-radius: 12px;
    width: 650px;
    max-width: 100%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.chatbot-wrapper .close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 24px;
    color: #666;
    cursor: pointer;
}

.chatbot-wrapper .chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chatbot-wrapper .input-icons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-left: 10px;
}

.chatbot-wrapper .icon-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    margin-left: 8px;
}

.chatbot-wrapper .icon {
    width: 24px;
    height: 24px;
}

.chatbot-wrapper #return-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    margin-left: 8px;
}

.chatbot-wrapper #return-btn img,
.chatbot-wrapper #audio-btn img,
.chatbot-wrapper #send-btn img {
    width: 50px;
    height: 50px;
}

.chatbot-wrapper #audio-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    margin-left: 8px;
}

.chatbot-wrapper #send-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.chatbot-wrapper .tooltip-container {
    position: relative;
    display: inline-block;
}

.chatbot-wrapper .tooltip-container .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.chatbot-wrapper .tooltip-container:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.chatbot-wrapper .loading-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    line-height: 24px;
    color: #660099;
    margin: 0 auto;
    height: 100px;
}

.chatbot-wrapper .loading-dots span {
    display: inline-block;
    animation: pulse 1s infinite;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    background-color: #660099;
    margin: 0 4px;
}

.chatbot-wrapper .loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.chatbot-wrapper .loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes pulse {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.chatbot-wrapper .options-container {
    background-color: #f3f3f3;
    padding: 15px;
    border-radius: 8px;
    margin: 5px 5px; /* Folga pequena nas laterais */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: left;
}


.chatbot-wrapper .tooltip-container {
    position: relative;
    display: inline-block;
}

.chatbot-wrapper .tooltip-container .tooltiptext {
    visibility: hidden;
    width: 100px;
    background-color: #660099;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Ajuste a posição conforme necessário */
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    font-size: 10px;
    transition: opacity 0.3s;
}

.chatbot-wrapper .tooltip-container .tooltiptext::after {
    content: '';
    position: absolute;
    top: 100%; /* Posiciona a seta abaixo do tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #846495 transparent transparent transparent;
}

.chatbot-wrapper .tooltip-container:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}



/* ===== Layout do topo ===== */
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;                    /* respiro entre título/bolha e botões */
}
.header-meta{
  display:flex;
  align-items:flex-end;
  gap:6px;
  min-width:0;                 /* permite o filho encolher com ellipsis */
}

/* ===== Tokens de cor do status ===== */
:root{
  --status-aguardando:#1976D2;
  --status-assinado:#88DD40;
  --status-execucao:#864DB7;
  --status-cancelado:#EA7300;

  --pill-pad-y:6px;
  --pill-pad-x:12px;
  --pill-gap:8px;
}

/* ===== Pílula base ===== */
.doc-focus{
  /* tipografia levemente menor e responsiva */
  font-size:clamp(12px, 1.4vw, 13px);
  line-height:1.2;

  padding:var(--pill-pad-y) var(--pill-pad-x);
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:var(--pill-gap);

  color:#1b1b1b;
  background:#fff;
  border:1px solid #e6e6eb;
  box-shadow:0 1px 0 rgba(0,0,0,.06);

  /* faz a pílula crescer/encolher junto do cabeçalho */
  flex:1 1 auto;
  min-width:120px;              /* limite para não colapsar demais */
  max-width:min(60vw, 560px);   /* cresce, mas não estoura */
  width:auto;

  /* truncamento */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  /* “reticências” mais sutis com fade (quando suportado) */
  -webkit-mask-image:linear-gradient(to right, #000 85%, rgba(0,0,0,0));
          mask-image:linear-gradient(to right, #000 85%, rgba(0,0,0,0));
}
.doc-focus::before{
  content:"";
  width:10px; height:10px; border-radius:999px;
  background:var(--status-color,#9aa0a6);
}

/* mantém fundo neutro sempre */
.doc-focus[class*="status--"]{
  background:#fff;
  border-color:#e6e6eb;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}

/* mapeia cores de status */
.doc-focus.status--aguardando-assinaturas{ --status-color:var(--status-aguardando); }
.doc-focus.status--assinado{               --status-color:var(--status-assinado); }
.doc-focus.status--em-execucao{            --status-color:var(--status-execucao); }
.doc-focus.status--cancelado{              --status-color:var(--status-cancelado); }

/* ===== Recuo em relação aos botões (lado direito) ===== */
/* se os botões estiverem do lado direito, garanta uma margem */
.header > .header-meta { margin-right:8px; }

/* ===== Ajustes responsivos ===== */
@media (max-width: 1024px){
  .doc-focus{ max-width:70vw; }
}
@media (max-width: 768px){
  .doc-focus{
    --pill-pad-y:5px;
    --pill-pad-x:10px;
    --pill-gap:6px;
    max-width:72vw;           /* encolhe mais no mobile */
  }
  #chat-bubble{ display:none !important; }
}










/* desktop / default */
:root { --chat-max-width: 650px; }
.chatbot-wrapper .modal-content,
.chatbot-wrapper .chat-container {
  width: min(100%, var(--chat-max-width));
}

/* MOBILE: tela cheia responsiva */
@media (max-width: 768px) {
  /* modal ocupa toda a viewport */
  .chatbot-wrapper .modal-content {
    width: 100vw;
    height: 100dvh;         /* considera barra dinâmica do mobile */
    margin: 0;
    border-radius: 0;
  }

  /* container flex vertical ocupando a modal inteira */
  .chatbot-wrapper .chat-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* header/inputs mais compactos */
  .chatbot-wrapper .header { padding: 12px 16px; }
  .chatbot-wrapper .input-container {
    padding: max(12px, env(safe-area-inset-bottom));
  }

  /* chat-box elástica (sem 400px fixos) */
  .chatbot-wrapper .chat-box {
    flex: 1;
    height: auto;
    min-height: 0;          /* importante p/ flexbox */
    overflow-y: auto;
  }
}

/* OPCIONAL: em vez de tela cheia, estilo “cartão” no mobile */
@media (max-width: 480px) {
  .chatbot-wrapper .modal-content {
    width: 92vw;
    height: 88vh;
    margin: 6vh auto;
    border-radius: 16px;
  }
}


@media (max-width: 768px) {
  .chatbot-wrapper .header h3 { margin-left: 0; }
}









/* ==== MOBILE TUNING (≤ 768px) ============================================ */
@media (max-width: 768px) {
  /* Header compacto e sem sobreposição com o X */
  .chatbot-wrapper .header {
    padding: 12px 14px 10px;
    align-items: flex-start;
    gap: 12px;
  }
  .chatbot-wrapper .header-left { gap: 12px; }
  .chatbot-wrapper .avatar-header { width: 56px; height: 56px; }
  .chatbot-wrapper .agent-info h2 { font-size: 18px; }
  .chatbot-wrapper .status { font-size: 12px; }

  .chatbot-wrapper .header-meta {
    align-items: flex-start;
    width: 100%;
    padding-right: 44px;      /* reserva área pro X */
    gap: 6px;
  }
  .chatbot-wrapper .header h3 {
    margin: 0;                /* remove offset negativo */
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    flex-grow: 0;
  }
  .chatbot-wrapper .doc-focus {
    max-width: 100%;
    font-size: 12px;
    padding: 6px 12px;
  }
  .chatbot-wrapper .close-btn { top: 8px; right: 10px; }

  /* Área de mensagens com folga pro input fixo */
  .chatbot-wrapper .chat-box {
    flex: 1;
    height: auto;             /* em vez de 400px fixos */
    min-height: 0;
    padding-bottom: 110px;    /* evita que a última msg fique atrás do input */
  }

  /* Input fixo no rodapé, com safe-area e ícones menores */
  .chatbot-wrapper .input-container {
    position: sticky;
    bottom: 0;
    left: 0; right: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    gap: 10px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    /* mantém sombra suave já definida */
  }

  .chatbot-wrapper #user-input {
    font-size: 16px;
    border-radius: 12px;
    padding: 12px 96px 12px 14px; /* espaço pra 2 ícones à direita */
  }

  .chatbot-wrapper .input-icons {
    margin-left: 0;
    position: absolute;          /* flutua sobre o campo */
    right: 20px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    display: flex;
    gap: 8px;
    align-items: center;
  }

  /* Ícones menores no mobile */
  .chatbot-wrapper .icon { width: 28px; height: 28px; }
  .chatbot-wrapper #return-btn img,
  .chatbot-wrapper #send-btn img { width: 28px; height: 28px; }
}

@media (max-width: 768px) {
  .chatbot-wrapper .doc-focus { margin-right: 36px; }
}


/* ====== MOBILE: evitar overflow do header/pílula ======================== */
@media (max-width: 768px) {

  .chatbot-wrapper .header {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px 10px;
  }

  /* bloco do avatar fica fixo; meta precisa poder encolher */
  .chatbot-wrapper .header-left { flex: 0 0 auto; }

  .chatbot-wrapper .header-meta {
    flex: 1 1 auto;
    min-width: 0;            /* 🔑 permite encolher dentro do flex */
    padding-right: 44px;     /* reserva área pro X */
    overflow: hidden;        /* evita “sangrar” pro lado */
  }

  .chatbot-wrapper .header h3 {
    margin: 0 0 6px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* título não estoura */
  }

  /* pílula ocupa só o espaço disponível, sem passar da borda */
  .chatbot-wrapper .doc-focus{
    display: block;          /* facilita ellipsis */
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* se usa o dot com ::before, mantenha o padding-left que você já definiu */
  }

  /* garante que o X não cubra nada */
  .chatbot-wrapper .close-btn{
    position: absolute;
    top: 8px;
    right: 10px;
  }
}

@media (max-width: 768px) {
  .chatbot-wrapper .doc-focus { margin-right: 36px; } /* espaço extra pro X */
}









/* Sempre posiciona o X relativo ao card */
.chatbot-wrapper .modal-content { position: relative; }

/* Botão de fechar visível e clicável */
.chatbot-wrapper .close-btn{
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 10;                      /* fica acima do header */
  width: 30px;
  height: 30px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,.95); /* bolha branca p/ contraste */
  color: #660099;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

/* Hover/active no desktop */
@media (hover:hover){
  .chatbot-wrapper .close-btn:hover{ background: #fff; transform: translateY(-1px); }
}

/* MOBILE: reserva espaço no header p/ o X e evita overflow */
@media (max-width: 768px){
  .chatbot-wrapper .header{ position: relative; padding-right: 56px; }
  .chatbot-wrapper .header-meta{
    flex: 1 1 auto;
    min-width: 0;              /* permite encolher */
    padding-right: 44px;       /* espaço pro X */
    overflow: hidden;
  }
  .chatbot-wrapper .doc-focus{
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: 36px;        /* evita ficar sob o X */
  }
  .chatbot-wrapper .close-btn{
    top: 8px;
    right: 10px;
    width: 28px;               /* tap target ok em mobile */
    height: 28px;
    font-size: 22px;
  }
}







/* espaço reservado para o X */
:root { --x-gap: 44px; }             /* desktop */
@media (max-width: 768px){ :root { --x-gap: 44px; } }  /* mobile */


/* título com ellipsis e folga à direita */
.chatbot-wrapper .header-meta h3{
  margin: 0 0 8px 0;
  padding-right: var(--x-gap);     /* garante que o texto não passe por baixo */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}





.chat-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #660099;
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2147483647;
}

.chat-button img {
  width: 32px;
  height: 32px;
  cursor: pointer; /* deixa claro que a imagem também é clicável */
}


/*
.chatbot-wrapper #chat-bubble {
  pointer-events: none;
}

.chatbot-wrapper #chat-bubble::after {
  pointer-events: none;
}

.chatbot-wrapper .chat-button {
  z-index: 1001;
  pointer-events: auto;
  cursor: pointer;
}

.chatbot-wrapper .chat-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
*/



















/* botão de expandir (ao lado do fechar) */
.chatbot-wrapper .expand-btn{
  position: absolute;
  top: 10px;
  right: 48px;                 /* fica à esquerda do X */
  z-index: 10;
  width: 30px;
  height: 30px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  color: #660099;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  cursor: pointer;
}
@media (hover:hover){
  .chatbot-wrapper .expand-btn:hover{ background: #fff; transform: translateY(-1px); }
}

/* animação suave ao expandir */
.chatbot-wrapper .modal-content{
  transition: width .18s ease, height .18s ease, margin .18s ease, border-radius .18s ease;
}

/* estado EXPANDIDO (desktop/tablet) — 88% da viewport */
.chatbot-wrapper .modal.expanded .modal-content{
  width: 88vw;
  height: 88vh;
  margin: 6vh auto;
  border-radius: 16px;
}

/* no mobile já existe lógica de tela cheia — ignore o expandir */
@media (max-width: 768px){
  .chatbot-wrapper .modal.expanded .modal-content{
    width: 100vw;
    height: 100dvh;
    margin: 0;
    border-radius: 0;
  }
}

/* reserva um pouco mais de espaço no header para os botões do topo em telas pequenas */
@media (max-width: 768px){
  .chatbot-wrapper .header{
    padding-right: 80px; /* espaço p/ expand + close */
  }
}





/* EXPANDIDO: modal ocupa 88% da tela */
.chatbot-wrapper .modal.expanded .modal-content{
  width: 88vw;
  height: 88vh;
  margin: 6vh auto;
  border-radius: 16px;
}

/* EXPANDIDO: o container precisa soltar o width fixo de 650px */
.chatbot-wrapper .modal.expanded .chat-container{
  width: 100% !important;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* EXPANDIDO: a área de mensagens precisa ser elástica */
.chatbot-wrapper .modal.expanded .chat-box{
  flex: 1 1 auto;
  height: auto !important;   /* desfaz o 400px */
  min-height: 0;
  overflow-y: auto;
}

/* EXPANDIDO: input mantém no rodapé bonitinho */
.chatbot-wrapper .modal.expanded .input-container{
  margin-top: auto;
}

/* mobile continua tela cheia */
@media (max-width: 768px){
  .chatbot-wrapper .modal.expanded .modal-content{
    width: 100vw;
    height: 100dvh;
    margin: 0;
    border-radius: 0;
  }
}









/* === Toolbar (título + filtro) ======================================== */
.chatbot-wrapper .options-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin: 0 6px 10px 6px;
}
.chatbot-wrapper .options-title{
  background:#e9e9e9; color:#222; font-weight:600;
  padding:8px 12px; border-radius:10px;
}
.chatbot-wrapper .options-filter{
  width:260px; max-width:60vw;
  padding:8px 10px; border:1px solid #ddd; border-radius:10px;
  font-size:14px; outline:none;
}
.chatbot-wrapper .options-filter:focus{ border-color:#660099; }

/* === Grid com 2 por linha (1 no mobile) =============================== */
.chatbot-wrapper .options-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px; margin: 6px;
}
@media (max-width: 768px){
  .chatbot-wrapper .options-grid{ grid-template-columns: 1fr; }
}

/* botões ocupam 100% da coluna do grid */
.chatbot-wrapper .option-btn{
  width:100%; box-sizing:border-box;
  text-align:center; padding:14px 12px; border-radius:10px;
}

/* === Ver mais / Ver menos ============================================ */
.chatbot-wrapper .see-more{
  display:flex; justify-content:flex-end; padding: 6px 8px 2px;
}
.chatbot-wrapper .see-more-btn{
  background:#fff; color:#660099;
  border:1px solid #660099; border-radius:999px;
  padding:6px 12px; font-size:13px; cursor:pointer;
}
.chatbot-wrapper .see-more-btn:hover{ background:#f7f2fb; }

/* === Quando a modal estiver EXPANDIDA, usar 3 colunas ================== */
.chatbot-wrapper .modal.expanded .options-grid{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* garante que o bloco ocupa toda a largura útil do card */
.chatbot-wrapper .modal.expanded .options-container{
  margin-left: 12px;   /* opcional: igual aos outros paddings do card */
  margin-right: 12px;
}

/* MOBILE continua 1 por linha mesmo expandido */
@media (max-width: 768px){
  .chatbot-wrapper .modal.expanded .options-grid{
    grid-template-columns: 1fr;
  }
}

/* (opcional) em telas bem largas, preencher 100% com o máximo de colunas
   — troque a regra acima por esta se preferir “usar toda a extensão” fluida: */
/*
.chatbot-wrapper .modal.expanded .options-grid{
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
@media (max-width: 768px){
  .chatbot-wrapper .modal.expanded .options-grid{
    grid-template-columns: 1fr;
  }
}
*/