/* === CHAT WIDGET STYLES === */
/* Prefixar todas as variáveis para evitar conflitos */
:root {
    --meuchat-primary-color: #4a4a4a; 
    --meuchat-primary-color-dark: #4a4a4a;
    --meuchat-secondary-color: #f0f4f8; 
    --meuchat-text-color-dark: #333;
    --meuchat-text-color-light: #ffffff; 
    --meuchat-border-color: #dee2e6;
    --meuchat-online-indicator-color: #80d711; 
    --meuchat-typing-dot-color: #4a4a4a;
    --meuchat-bubble-bg-color: #ffffff;
    --meuchat-width: 370px; 
    --meuchat-height: 550px; 
    --meuchat-spacing: 15px;
    --meuchat-border-radius: 30px; 
    --meuchat-toggle-button-size: 72px;
    --meuchat-header-height: 70px; 
    --meuchat-footer-padding-vertical: 10px;
    --meuchat-footer-padding-horizontal: var(--meuchat-spacing);
    --meuchat-animation-duration: 0.3s;
    --meuchat-prompt-max-width: 250px;
    --meuchat-prompt-typing-width: 70px; 
    --meuchat-prompt-arrow-size: 7px;
    --meuchat-prompt-min-height: 44px; 
    /* Armazenar valor de bubble-radius também como variável */
    --meuchat-bubble-radius: 20px;
    /* Use CSS específico para o chat */
    --chat-bubble-radius: 20px;
}

/* ===== Container Geral ===== */
#meu-chat-widget #chat-widget-container {
    position: fixed !important; 
    bottom: calc(var(--meuchat-spacing) * 2) !important; 
    right: calc(var(--meuchat-spacing) * 2) !important;
    z-index: 9999 !important; 
    display: flex !important; 
    align-items: flex-end !important; 
    gap: 8px !important;
    pointer-events: none !important;
    background: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Inter', sans-serif !important;
}

#meu-chat-widget #chat-widget-container > * { 
    pointer-events: auto !important; 
    font-family: 'Inter', sans-serif !important;
}

/* Classe geral para elementos que animam */
#meu-chat-widget .chat-element {
    opacity: 0 !important; 
    visibility: hidden !important; 
    transform: translateY(10px) !important;
    transition: opacity var(--meuchat-animation-duration) ease-out, 
                transform var(--meuchat-animation-duration) ease-out, 
                visibility 0s var(--meuchat-animation-duration) !important;
    pointer-events: none !important;
}

#meu-chat-widget .chat-element.visible {
    opacity: 1 !important; 
    visibility: visible !important; 
    transform: translateY(0) !important;
    transition-delay: 0s !important; 
    pointer-events: auto !important;
}

#meu-chat-widget .chat-element.fade-out {
   opacity: 0 !important; 
   visibility: hidden !important;
   transform: translateY(5px) scale(0.95) !important;
   transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s !important;
   pointer-events: none !important;
}

/* ===== Balão de Prompt Inicial ===== */
#meu-chat-widget .chat-prompt-bubble {
    background-color: var(--meuchat-bubble-bg-color) !important; 
    border-radius: var(--chat-bubble-radius) !important;
    border: 1px solid var(--meuchat-border-color) !important; 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    padding: 10px 15px !important; 
    position: relative !important; 
    margin-bottom: 5px !important; 
    min-height: var(--meuchat-prompt-min-height) !important;
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    overflow: hidden !important;
    transition: width var(--meuchat-animation-duration) ease-out, 
                min-width var(--meuchat-animation-duration) ease-out, 
                padding var(--meuchat-animation-duration) ease-out, 
                opacity var(--meuchat-animation-duration) ease-out, 
                transform var(--meuchat-animation-duration) ease-out, 
                visibility 0s var(--meuchat-animation-duration),
                border-radius 0.2s ease !important;
    width: var(--meuchat-prompt-typing-width) !important;
    font-family: 'Inter', sans-serif !important;
}

/* Estilo quando está mostrando os pontos */
#meu-chat-widget .chat-prompt-bubble.typing-mode {
    width: var(--meuchat-prompt-typing-width) !important;
    min-width: var(--meuchat-prompt-typing-width) !important;
    padding: 10px 12px !important;
    justify-content: left !important;
    white-space: nowrap !important;
}

/* Estilo quando está mostrando o texto */
#meu-chat-widget .chat-prompt-bubble.text-mode {
    width: auto !important;
    min-width: 150px !important;
    max-width: var(--meuchat-prompt-max-width) !important;
    padding: 10px 15px !important;
    justify-content: right !important;
    white-space: normal !important;
}

/* Conteúdo Interno do Balão */
#meu-chat-widget .chat-prompt-content { 
    opacity: 0 !important; 
    visibility: hidden !important; 
    transition: opacity 0.2s ease 0.1s, visibility 0s 0.3s !important; 
    width: 100% !important; 
    display: flex !important; 
    align-items: center !important; 
    flex-shrink: 0 !important; 
}

#meu-chat-widget .chat-prompt-content.active { 
    opacity: 1 !important; 
    visibility: visible !important; 
    transition-delay: 0s !important; 
}

#meu-chat-widget #chat-typing-indicator-content { 
    justify-content: right !important; 
    flex-shrink: 0 !important; 
}

#meu-chat-widget #chat-typing-indicator-content span { 
    height: 8px !important; 
    width: 8px !important; 
    margin: 0 2px !important; 
    background-color: var(--meuchat-typing-dot-color) !important; 
    border-radius: 50% !important; 
    display: inline-block !important; 
    flex-shrink: 0 !important; 
}

#meu-chat-widget .chat-prompt-bubble.typing-mode #chat-typing-indicator-content.active span { 
    animation: meuchat-typing-bounce 1.4s infinite ease-in-out both !important; 
}

#meu-chat-widget .chat-prompt-bubble.typing-mode #chat-typing-indicator-content.active span:nth-child(1) { 
    animation-delay: -0.32s !important; 
}

#meu-chat-widget .chat-prompt-bubble.typing-mode #chat-typing-indicator-content.active span:nth-child(2) { 
    animation-delay: -0.16s !important; 
}

#meu-chat-widget .chat-prompt-bubble.typing-mode #chat-typing-indicator-content.active span:nth-child(3) { 
    animation-delay: 0s !important; 
}

@keyframes meuchat-typing-bounce { 
    0%, 80%, 100% { 
        transform: scale(0) !important; 
        opacity: 0.5 !important; 
    } 
    40% { 
        transform: scale(1.0) !important; 
        opacity: 1 !important; 
    } 
}

#meu-chat-widget #chat-welcome-text-content { 
    font-size: 0.9em !important; 
    color: var(--meuchat-text-color-dark) !important; 
    text-align: center !important; 
    line-height: 1.4 !important; 
    justify-content: left !important; 
}

/* ===== Botão Flutuante Principal ===== */
#meu-chat-widget .chat-toggle-button,
html body #meu-chat-widget .chat-toggle-button,
body[data-button-style] #meu-chat-widget .chat-toggle-button { 
    width: var(--meuchat-toggle-button-size) !important; 
    height: var(--meuchat-toggle-button-size) !important; 
    background-color: var(--meuchat-primary-color) !important; 
    border: none !important; 
    border-radius: var(--chat-bubble-radius) !important;
    cursor: pointer !important; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important; 
    display: flex !important; 
    justify-content: center !important; 
    align-items: center !important; 
    padding: 0 !important; 
    overflow: visible !important; 
    position: relative !important; 
    flex-shrink: 0 !important; 
    z-index: 2 !important; 
    transform: translateY(20px) scale(0.8) !important; 
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                opacity 0.3s ease, 
                visibility 0s 0.4s, 
                background-color var(--meuchat-animation-duration) ease !important; 
    line-height: normal !important;
    font-size: 16px !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

#meu-chat-widget .chat-toggle-button:hover,
html body #meu-chat-widget .chat-toggle-button:hover,
body[data-button-style] #meu-chat-widget .chat-toggle-button:hover { 
    background-color: var(--meuchat-primary-color-dark) !important; 
}

#meu-chat-widget .chat-toggle-button img,
html body #meu-chat-widget .chat-toggle-button img,
body[data-button-style] #meu-chat-widget .chat-toggle-button img { 
    width: 95% !important; 
    height: 95% !important;
    object-fit: contain !important; 
    display: block !important; 
    border-radius: var(--chat-bubble-radius) !important;
    margin: 0 !important;
    padding: 0 !important;
}

#meu-chat-widget .chat-toggle-button img:not([src]),
html body #meu-chat-widget .chat-toggle-button img:not([src]) { 
    content: '' !important; 
    display: block !important; 
    background-color: #ddd !important; 
    border: 1px dashed #aaa !important; 
    min-width: 60% !important; 
    min-height: 60% !important; 
    border-radius: 50% !important; 
}

#meu-chat-widget .chat-online-indicator,
html body #meu-chat-widget .chat-online-indicator { 
    width: 14px !important; 
    height: 14px !important; 
    background-color: var(--meuchat-online-indicator-color) !important; 
    border-radius: 50% !important; 
    border: 2px solid var(--meuchat-text-color-light) !important; 
    position: absolute !important; 
    bottom: -2px !important; 
    right: -2px !important; 
    z-index: 3 !important; 
    opacity: 0 !important; 
    transform: scale(0.5) !important; 
    transition: opacity 0.2s ease, transform 0.2s ease !important; 
}

#meu-chat-widget .chat-toggle-button.online .chat-online-indicator,
html body #meu-chat-widget .chat-toggle-button.online .chat-online-indicator { 
    opacity: 1 !important; 
    transform: scale(1) !important; 
}

/* ===== Janela do Chat ===== */
#meu-chat-widget .chat-window,
html body #meu-chat-widget .chat-window,
body[data-button-style] #meu-chat-widget .chat-window { 
    position: fixed !important; 
    bottom: calc(var(--meuchat-spacing) * 2) !important; 
    right: calc(var(--meuchat-spacing) * 2) !important; 
    width: var(--meuchat-width) !important; 
    height: var(--meuchat-height) !important; 
    max-height: var(--meuchat-height) !important; 
    background-color: var(--meuchat-text-color-light) !important; 
    border-radius: var(--meuchat-border-radius) !important; 
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15) !important; 
    display: flex !important; 
    flex-direction: column !important; 
    overflow: hidden !important; 
    margin-bottom: 0 !important; 
    transform-origin: bottom right !important; 
    transform: translateY(15px) scale(0.95) !important; 
    z-index: 9999 !important; 
    font-family: 'Inter', sans-serif !important;
    border: none !important;
    padding: 0 !important;
}

#meu-chat-widget .chat-window.open,
html body #meu-chat-widget .chat-window.open,
body[data-button-style] #meu-chat-widget .chat-window.open { 
    opacity: 1 !important; 
    transform: translateY(0) scale(1) !important; 
    visibility: visible !important; 
    transition-delay: 0s !important; 
    pointer-events: auto !important; 
    z-index: 10000 !important; 
}

/* --- Cabeçalho --- */
#meu-chat-widget .chat-header,
html body #meu-chat-widget .chat-header { 
    height: var(--meuchat-header-height) !important; 
    background-color: var(--meuchat-primary-color) !important; 
    color: var(--meuchat-text-color-light) !important; 
    padding: 0 var(--meuchat-spacing) !important; 
    display: flex !important; 
    justify-content: space-between !important; 
    align-items: center !important; 
    flex-shrink: 0 !important; 
    border-radius: var(--meuchat-border-radius) var(--meuchat-border-radius) 0 0 !important; 
    font-family: 'Inter', sans-serif !important;
    border: none !important;
    margin: 0 !important;
}

#meu-chat-widget .chat-header-info,
html body #meu-chat-widget .chat-header-info {
    height: 55px !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    flex-grow: 1 !important;
}

#meu-chat-widget .chat-header-icon,
html body #meu-chat-widget .chat-header-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    margin-right: 10px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
}

#meu-chat-widget .chat-header-icon:not([src]),
html body #meu-chat-widget .chat-header-icon:not([src]) { 
    content: '' !important; 
    display: block !important; 
    border: 1px dashed rgba(255,255,255,0.5) !important; 
    border-radius: 50% !important; 
}

#meu-chat-widget .chat-header-text,
html body #meu-chat-widget .chat-header-text { 
    overflow: hidden !important; 
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    height: 55px !important;
    flex-grow: 1 !important;
}

#meu-chat-widget .chat-header-text h3,
html body #meu-chat-widget .chat-header-text h3 {
    font-size: 1.1em !important;
    font-weight: 600 !important;
    margin: 0 0 3px 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-family: 'Inter', sans-serif !important;
    color: var(--meuchat-text-color-light) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

#meu-chat-widget .chat-header-text p,
html body #meu-chat-widget .chat-header-text p { 
    font-size: 0.8em !important; 
    opacity: 0.85 !important; 
    line-height: 1.1 !important; 
    white-space: nowrap !important; 
    overflow: hidden !important; 
    text-overflow: ellipsis !important; 
    margin: 0 !important; 
    padding: 0 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: normal !important;
}

/* Botões do Cabeçalho */
#meu-chat-widget .chat-header-buttons,
html body #meu-chat-widget .chat-header-buttons { 
    display: flex !important; 
    align-items: center !important; 
    gap: 5px !important; 
    flex-shrink: 0 !important; 
}

#meu-chat-widget .chat-header-button,
html body #meu-chat-widget .chat-header-button { 
    background: none !important; 
    border: none !important; 
    color: var(--meuchat-text-color-light) !important; 
    font-size: 20px !important; 
    line-height: 1 !important; 
    cursor: pointer !important; 
    padding: 5px !important; 
    opacity: 0.8 !important; 
    transition: opacity 0.2s ease, background-color 0.2s ease !important; 
    border-radius: 50% !important; 
    width: 32px !important; 
    height: 32px !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

#meu-chat-widget .chat-header-button:hover,
html body #meu-chat-widget .chat-header-button:hover { 
    opacity: 1 !important; 
    background-color: rgba(255, 255, 255, 0.1) !important; 
}

#meu-chat-widget .restart-button span,
html body #meu-chat-widget .restart-button span { 
    display: inline-block !important; 
    font-weight: bold !important; 
    font-size: 18px !important; 
}

#meu-chat-widget .close-button,
html body #meu-chat-widget .close-button { 
    font-size: 24px !important; 
    font-weight: bold !important; 
}

/* Esconde o botão reiniciar quando ele tem a classe 'hidden' */
#meu-chat-widget .chat-header-button.restart-button.hidden,
html body #meu-chat-widget .chat-header-button.restart-button.hidden {
    display: none !important;
}

/* --- Corpo (Mensagens) --- */
#meu-chat-widget .chat-body,
html body #meu-chat-widget .chat-body { 
    flex-grow: 1 !important; 
    overflow-y: auto !important; 
    overflow-x: hidden !important;
    padding: var(--meuchat-spacing) !important; 
    padding-top: 20px !important; /* Adicione mais espaço superior aqui */
    background-color: var(--meuchat-text-color-light) !important; 
    display: flex !important; 
    flex-direction: column !important; 
    -webkit-overflow-scrolling: touch !important;
    font-family: 'Inter', sans-serif !important;
}

#meu-chat-widget .chat-messages-list,
html body #meu-chat-widget .chat-messages-list {
    list-style: none !important; 
    padding: 0 !important; 
    margin: 0 !important; 
    display: flex !important; 
    flex-direction: column !important; 
    gap: 10px !important; /* Você pode aumentar este valor para dar mais espaçamento */
    width: 100% !important;
    margin-top: 10px !important; /* Adicione esta linha para dar espaçamento superior */
}

/* Remover marcadores de lista que aparecem no chat */
#meu-chat-widget .chat-messages-list,
#meu-chat-widget .chat-messages-list li,
body #meu-chat-widget .chat-messages-list,
body #meu-chat-widget .chat-messages-list li {
    list-style: none !important;
    list-style-type: none !important;
    list-style-position: inside !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Garantir que o conteúdo antes dos elementos de lista seja vazio */
#meu-chat-widget .chat-messages-list li::before,
body #meu-chat-widget .chat-messages-list li::before {
    content: none !important;
    display: none !important;
}

#meu-chat-widget .chat-message,
html body #meu-chat-widget .chat-message {
    padding: 15px 19px !important; 
    border-radius: calc(var(--chat-bubble-radius) / 4) !important; 
    max-width: 80% !important; 
    line-height: 1.4 !important; 
    font-size: 0.9em !important; 
    word-wrap: break-word !important;
    font-family: 'Inter', sans-serif !important;
    margin: 0 !important;
}

/* CORRIGIDO: Estilo para o balão de mensagem do usuário */
#meu-chat-widget .chat-message.user,
html body #meu-chat-widget .chat-message.user,
body[data-button-style] #meu-chat-widget .chat-message.user,
body #meu-chat-widget .chat-message.user { 
    background-color: var(--meuchat-primary-color) !important; 
    color: var(--meuchat-text-color-light) !important; 
    align-self: flex-end !important; 
    border-bottom-right-radius: 4px !important;
    padding: 15px 19px 15px 19px !important;
    text-align: left !important;
}

/* CORRIGIDO: Garantir que o span dentro da mensagem do usuário tenha o padding correto */
#meu-chat-widget .chat-message.user span,
html body #meu-chat-widget .chat-message.user span,
body[data-button-style] #meu-chat-widget .chat-message.user span,
body #meu-chat-widget .chat-message.user span {
    padding-left: 0 !important;
    text-align: left !important;
}

/* NOVO: Ajuste adicional para o padding esquerdo do balão do bot */
#meu-chat-widget .chat-message.bot,
html body #meu-chat-widget .chat-message.bot,
body[data-button-style] #meu-chat-widget .chat-message.bot,
body #meu-chat-widget .chat-message.bot { 
    background-color: var(--meuchat-secondary-color) !important; 
    color: var(--meuchat-text-color-dark) !important; 
    align-self: flex-start !important; 
    border-bottom-left-radius: 4px !important; 
    border: 1px solid var(--meuchat-border-color) !important;
    padding: 15px 19px 15px 25px !important; /* Aumentado o padding esquerdo para 25px */
}

/* NOVO: Garantir que o texto dentro do balão do bot tenha espaço adequado */
#meu-chat-widget .chat-message.bot span,
html body #meu-chat-widget .chat-message.bot span,
body[data-button-style] #meu-chat-widget .chat-message.bot span,
body #meu-chat-widget .chat-message.bot span {
    padding: 0 !important;
    margin: 0 !important;
    display: inline-block !important;
}

/* Estilo para listas dentro das mensagens do bot */
#meu-chat-widget .chat-message.bot ul,
#meu-chat-widget .chat-message.bot ol,
html body #meu-chat-widget .chat-message.bot ul,
html body #meu-chat-widget .chat-message.bot ol {
    margin: 5px 0 5px 20px !important;
    padding-left: 15px !important;
    list-style-position: outside !important;
}

#meu-chat-widget .chat-message.bot li,
html body #meu-chat-widget .chat-message.bot li {
    margin-bottom: 5px !important;
    display: list-item !important;
    list-style-position: outside !important;
}

#meu-chat-widget .chat-message.bot ul li,
html body #meu-chat-widget .chat-message.bot ul li {
    list-style-type: disc !important;
}

#meu-chat-widget .chat-message.bot ol li,
html body #meu-chat-widget .chat-message.bot ol li {
    list-style-type: decimal !important;
}

#meu-chat-widget .chat-message.bot p,
html body #meu-chat-widget .chat-message.bot p {
    margin: 5px 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    font-family: inherit !important;
}

/* =========================================== */
/* ===== ESTILOS RESPONSIVOS (TELA CHEIA) ===== */
/* =========================================== */
@media (max-width: 750px) {
    #meu-chat-widget #chat-widget-container,
    html body #meu-chat-widget #chat-widget-container { 
        bottom: var(--meuchat-spacing) !important; 
        right: var(--meuchat-spacing) !important; 
        gap: 5px !important; 
    }
    
    #meu-chat-widget .chat-prompt-bubble,
    html body #meu-chat-widget .chat-prompt-bubble { 
        max-width: calc(100vw - var(--meuchat-toggle-button-size) - var(--meuchat-spacing) * 2 - 10px) !important; 
    }
    
    #meu-chat-widget .chat-prompt-bubble.text-mode,
    html body #meu-chat-widget .chat-prompt-bubble.text-mode { 
        padding: 10px 15px !important; 
    }
    
    #meu-chat-widget .chat-prompt-bubble.typing-mode,
    html body #meu-chat-widget .chat-prompt-bubble.typing-mode { 
        padding: 10px !important; 
        min-width: 60px !important; 
        width: 60px !important; 
    }
    
    #meu-chat-widget #chat-typing-indicator-content span,
    html body #meu-chat-widget #chat-typing-indicator-content span { 
        height: 6px !important; 
        width: 6px !important; 
    }

    #meu-chat-widget .chat-window.open,
    html body #meu-chat-widget .chat-window.open { 
        width: 100% !important; 
        height: 100% !important; 
        max-width: none !important; 
        max-height: none !important; 
        top: 0 !important; 
        left: 0 !important; 
        right: 0 !important; 
        bottom: 0 !important; 
        border-radius: 0 !important; 
        box-shadow: none !important; 
        margin: 0 !important; 
        transform: none !important; 
        transition: opacity var(--meuchat-animation-duration) ease-out, visibility 0s !important; 
        z-index: 10000 !important; 
    }
    
    #meu-chat-widget .chat-window.open.chat-element.fade-out,
    html body #meu-chat-widget .chat-window.open.chat-element.fade-out { 
        opacity: 0 !important; 
        visibility: hidden !important; 
        transition: opacity 0.2s ease, visibility 0s 0.2s !important; 
        transform: none !important; 
    }
    
    #meu-chat-widget .chat-window.open .chat-header,
    html body #meu-chat-widget .chat-window.open .chat-header { 
        border-radius: 0 !important; 
    }
    
    #meu-chat-widget .chat-window.open .chat-body,
    html body #meu-chat-widget .chat-window.open .chat-body { 
        flex-grow: 1 !important; 
        min-height: 0 !important; 
        padding: 10px !important; 
    }
    
    #meu-chat-widget .chat-window.open .chat-footer,
    html body #meu-chat-widget .chat-window.open .chat-footer { 
        flex-shrink: 0 !important; 
        padding: 8px 10px !important; 
        padding-bottom: calc(env(safe-area-inset-bottom, 8px) + 8px) !important; 
    }
    
    #meu-chat-widget .chat-window.open .chat-input-area,
    html body #meu-chat-widget .chat-window.open .chat-input-area { 
        padding: 5px 6px 5px 12px !important; 
    }
    
    #meu-chat-widget .chat-window.open .chat-branding-footer,
    html body #meu-chat-widget .chat-window.open .chat-branding-footer { 
        display: block !important; 
        padding-bottom: 5px !important; 
    }

    #meu-chat-widget .chat-window.open ~ #chat-prompt-bubble,
    #meu-chat-widget .chat-window.open ~ #chat-toggle-button,
    html body #meu-chat-widget .chat-window.open ~ #chat-prompt-bubble,
    html body #meu-chat-widget .chat-window.open ~ #chat-toggle-button { 
        opacity: 0 !important; 
        visibility: hidden !important; 
        pointer-events: none !important; 
        transition: none !important; 
    }
}

/* ===== REGRAS DE ALTA PRIORIDADE PARA SOBRESCREVER O TEMA ===== */
#meu-chat-widget .chat-toggle-button,
#meu-chat-widget #chat-toggle-button,
body[data-button-style="slightly_rounded"] #meu-chat-widget .chat-toggle-button,
body[data-button-style="slightly_rounded"] #meu-chat-widget #chat-toggle-button,
body #meu-chat-widget .chat-toggle-button,
body #meu-chat-widget #chat-toggle-button {
    -webkit-border-radius: var(--chat-bubble-radius) !important;
    -moz-border-radius: var(--chat-bubble-radius) !important;
    border-radius: var(--chat-bubble-radius) !important;
    overflow: hidden !important;
    transform: translateY(20px) scale(0.8) !important;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                opacity 0.3s ease, 
                visibility 0s 0.4s, 
                background-color var(--meuchat-animation-duration) ease !important;
}

#meu-chat-widget .chat-toggle-button.visible,
#meu-chat-widget #chat-toggle-button.visible,
body[data-button-style="slightly_rounded"] #meu-chat-widget .chat-toggle-button.visible,
body[data-button-style="slightly_rounded"] #meu-chat-widget #chat-toggle-button.visible,
body #meu-chat-widget .chat-toggle-button.visible,
body #meu-chat-widget #chat-toggle-button.visible {
    transform: translateY(0) scale(1) !important;
}

#meu-chat-widget .chat-toggle-button img,
#meu-chat-widget #chat-toggle-icon,
body[data-button-style="slightly_rounded"] #meu-chat-widget .chat-toggle-button img,
body[data-button-style="slightly_rounded"] #meu-chat-widget #chat-toggle-icon,
body #meu-chat-widget .chat-toggle-button img,
body #meu-chat-widget #chat-toggle-icon {
    -webkit-border-radius: var(--chat-bubble-radius) !important;
    -moz-border-radius: var(--chat-bubble-radius) !important;
    border-radius: var(--chat-bubble-radius) !important;
    overflow: hidden !important;
}

/* Garantir precedência para o botão de enviar também */
#meu-chat-widget .chat-send-button,
body[data-button-style="slightly_rounded"] #meu-chat-widget .chat-send-button,
body #meu-chat-widget .chat-send-button {
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
    color: black !important;
}

/* Garantir que as mensagens tenham o estilo correto */
#meu-chat-widget .chat-message.bot,
body[data-button-style="slightly_rounded"] #meu-chat-widget .chat-message.bot,
body #meu-chat-widget .chat-message.bot {
    -webkit-border-radius: calc(var(--chat-bubble-radius) / 2) !important;
    -moz-border-radius: calc(var(--chat-bubble-radius) / 2) !important;
    border-radius: calc(var(--chat-bubble-radius) / 5) !important;
    border-bottom-left-radius: 4px !important;
    background-color: var(--meuchat-secondary-color) !important;
    border: 1px solid var(--meuchat-border-color) !important;
    padding: 15px 19px 15px 25px !important; /* Reforçando padding esquerdo aqui também */
}

/* Garantir que o input não tenha sombra */
#meu-chat-widget .chat-input-area,
body[data-button-style="slightly_rounded"] #meu-chat-widget .chat-input-area,
body #meu-chat-widget .chat-input-area,
#meu-chat-widget .chat-input-area:focus-within,
body[data-button-style="slightly_rounded"] #meu-chat-widget .chat-input-area:focus-within,
body #meu-chat-widget .chat-input-area:focus-within {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

#meu-chat-widget .chat-send-button svg,
#meu-chat-widget .chat-send-button path {
    transform: none !important;
}

/* Garantir que nenhum tema sobreponha estilos importantes do chat */
#meu-chat-widget *,
html body #meu-chat-widget * {
    box-sizing: border-box !important;
}

/* Assegurar que os SVGs no botão de enviar não girem */
#meu-chat-widget .chat-send-button svg,
#meu-chat-widget .chat-send-button path,
body #meu-chat-widget .chat-send-button svg,
body #meu-chat-widget .chat-send-button path {
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

#meu-chat-widget .chat-message.system,
html body #meu-chat-widget .chat-message.system { 
    font-style: italic !important; 
    color: #6c757d !important; 
    font-size: 0.8em !important; 
    align-self: center !important; 
    background-color: transparent !important; 
    padding: 5px 0 !important; 
    text-align: center !important; 
    width: 100% !important;
    border: none !important;
}

#meu-chat-widget .chat-message.bot.typing-indicator-bot,
html body #meu-chat-widget .chat-message.bot.typing-indicator-bot { 
    background-color: transparent !important; 
    padding: 0 !important; 
    border: none !important; 
    min-height: 30px !important; 
    display: flex !important; 
    align-items: center !important;
}

#meu-chat-widget .chat-message.bot.typing-indicator-bot > div,
html body #meu-chat-widget .chat-message.bot.typing-indicator-bot > div { 
    padding: 8px 12px !important; 
    background-color: var(--meuchat-secondary-color) !important; 
    border-radius: calc(var(--chat-bubble-radius) / 2) !important; 
    border-bottom-left-radius: 4px !important; 
    border: 1px solid var(--meuchat-border-color) !important; 
    display: inline-block !important; 
}

/* --- Rodapé (Input) --- */
#meu-chat-widget .chat-footer,
html body #meu-chat-widget .chat-footer { 
    padding: var(--meuchat-footer-padding-vertical) var(--meuchat-footer-padding-horizontal) !important; 
    border-top: 0px solid var(--meuchat-border-color) !important;
    background-color: #fff !important; 
    flex-shrink: 0 !important; 
}

#meu-chat-widget .chat-input-area,
html body #meu-chat-widget .chat-input-area { 
    display: flex !important; 
    align-items: center !important; 
    border: 1px solid var(--meuchat-border-color) !important; 
    border-radius: 25px !important; 
    padding: 5px 8px 5px 15px !important; 
    background-color: var(--meuchat-text-color-light) !important; 
    box-shadow: none !important;
    transition: border-color 0.2s ease !important;
}

#meu-chat-widget .chat-input-area:focus-within,
html body #meu-chat-widget .chat-input-area:focus-within {
    border-color: var(--meuchat-border-color) !important;
    box-shadow: none !important;
}

#meu-chat-widget .chat-textarea,
html body #meu-chat-widget .chat-textarea { 
    flex-grow: 1 !important; 
    border: none !important; 
    padding: 8px 5px !important; 
    resize: none !important; 
    outline: none !important; 
    font-size: 0.9em !important; 
    line-height: 1.4 !important; 
    max-height: 80px !important; 
    overflow-y: auto !important; 
    background: transparent !important; 
    color: var(--meuchat-text-color-dark) !important; 
    font-family: inherit !important; 
    box-shadow: none !important;
    width: 100% !important;
    min-height: auto !important;
    margin: 0 !important;
}

#meu-chat-widget .chat-textarea:focus,
html body #meu-chat-widget .chat-textarea:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

#meu-chat-widget .chat-textarea::placeholder,
html body #meu-chat-widget .chat-textarea::placeholder { 
    color: #999 !important; 
}

#meu-chat-widget .chat-send-button,
html body #meu-chat-widget .chat-send-button,
body[data-button-style] #meu-chat-widget .chat-send-button { 
    width: 36px !important; 
    height: 36px !important; 
    background-color: transparent !important; 
    color: black !important; 
    border: none !important; 
    border-radius: 0 !important; 
    cursor: pointer !important; 
    margin-left: 8px !important; 
    flex-shrink: 0 !important; 
    display: flex !important; 
    justify-content: center !important; 
    align-items: center !important; 
    padding: 0 !important;
    box-shadow: none !important;
}

#meu-chat-widget .chat-send-button:hover,
html body #meu-chat-widget .chat-send-button:hover,
body[data-button-style] #meu-chat-widget .chat-send-button:hover { 
    background-color: transparent !important; 
}

#meu-chat-widget .chat-send-button:focus,
html body #meu-chat-widget .chat-send-button:focus,
body[data-button-style] #meu-chat-widget .chat-send-button:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* --- Branding Footer --- */
#meu-chat-widget .chat-branding-footer,
html body #meu-chat-widget .chat-branding-footer { 
    text-align: center !important; 
    font-size: 0.75em !important; 
    color: #aaa !important; 
    margin-top: 8px !important; 
    padding-bottom: 2px !important; 
    user-select: none !important; 
}

#meu-chat-widget .chat-branding-footer a,
html body #meu-chat-widget .chat-branding-footer a { 
    color: var(--meuchat-primary-color) !important; 
    text-decoration: none !important; 
}

#meu-chat-widget .chat-branding-footer a:hover,
html body #meu-chat-widget .chat-branding-footer a:hover { 
    text-decoration: underline !important; 
}

/* --- Estilo para Indicador "Bot Digitando..." --- */
#meu-chat-widget .chat-message.bot.typing-indicator-bot,
html body #meu-chat-widget .chat-message.bot.typing-indicator-bot {
    background-color: transparent !important; 
    padding: 0 !important; 
    border: none !important; 
    min-height: 30px !important; 
    display: flex !important; 
    align-items: center !important;
    margin-bottom: 10px !important; 
    align-self: flex-start !important; 
    width: auto !important; 
    max-width: none !important; 
}

#meu-chat-widget .chat-message.bot.typing-indicator-bot > div,
html body #meu-chat-widget .chat-message.bot.typing-indicator-bot > div {
    padding: 8px 12px !important;
    background-color: var(--meuchat-secondary-color) !important;
    border-radius: calc(var(--chat-bubble-radius) / 2) !important;
    border-bottom-left-radius: 4px !important;
    border: 1px solid var(--meuchat-border-color) !important;
    display: inline-flex !important; 
    align-items: center !important;
}

/* Garante quebras de linha e quebra de palavras longas nas mensagens */
#meu-chat-widget .chat-message span,
html body #meu-chat-widget .chat-message span {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    display: block !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    font-family: inherit !important;
}