body {
    font-family: 'Texta Alt', sans-serif;
}

#chat-btn {
    background-color: #01ffef;
    background-image: url('https://i.imgur.com/3X0tbwP.png');
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

#chat-popup {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 360px;
    max-height: 500px;
    background-color: white;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    overflow: hidden;
    z-index: 999;
}

#chat-popup::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../images/dck_boardshorts.jpeg");
    background-size: cover;
    background-position: center;
    opacity: 0.12;
    z-index: 0;
    pointer-events: none;
}

.chat-header {
    background-color: transparent;
    padding: 16px;
    font-size: 16px;
    font-weight: 900;
    color: #001f3f;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    position: relative;
    z-index: 1;
}

.chat-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
    z-index: 1;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    max-height: 100%;
    padding: 16px;
    width: 100%;
    box-sizing: border-box;
}

.message {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
}

.message .bubble {
    background-color: rgba(255,255,255,0.85);
    padding: 10px 12px;
    border-radius: 10px;
    color: #222;
    font-size: 14px;
    flex: 1;
    word-wrap: break-word;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(2px);
}

.message.bot .bubble {
    background-color: rgba(255,255,255,0.75);
}

.message .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255,255,255,1);
    filter: brightness(1.2) contrast(1.2) drop-shadow(0 0 1px rgba(0,0,0,0.2));
}

#chat-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    width: 100%;
    box-sizing: border-box;
}

#user-input {
    padding: 10px;
    border: 1px solid rgba(255,255,255,0.6);
    background-color: rgba(255,255,255,0.25);
    color: #000;
    border-radius: 6px;
    font-size: 16px;
    width: 92.5%;
    backdrop-filter: blur(2px);
}

#user-input::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

#chat-form button {
    width: 100%;
    padding: 10px 15px;
    background-color: rgba(1, 255, 239, 0.25);
    border: 2px solid rgba(255, 255, 255, 0.6);
    color: #001f3f;
    font-weight: bold;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(3px);
}

#chat-form button:hover {
    background-color: rgba(255,255,255,0.4);
    border-color: rgba(255,255,255,0.9);
}

@font-face {
    font-family: 'Texta Alt';
    font-weight: 900;
    src: url('https://cdn.shopify.com/s/files/1/2996/5124/files/TextaAltBlack.ttf?v=1712415606') format('truetype');
}

@font-face {
    font-family: 'Texta Alt';
    font-weight: 400;
    src: url('https://cdn.shopify.com/s/files/1/2996/5124/files/TextaAltRegular.woff?v=1743713025') format('woff');
}

@font-face {
    font-family: 'Texta Alt';
    font-weight: 300;
    src: url('https://cdn.shopify.com/s/files/1/2996/5124/files/TextaAltLight.woff?v=1743713025') format('woff');
}

@media (max-width: 500px) {
#chat-popup {
    bottom: 80px;
}
}

#chat-popup,
#chat-popup * {
    font-family: 'Texta Alt', sans-serif !important;
}

.bubble.typing::after {
    content: " .";
    animation: dots 1.5s steps(3, end) infinite;
}

/* listas dentro do balão do bot */
.message .bubble ul {
    margin: 0;
    padding-left: 1.1em;   /* recuo do bullet */
}
.message .bubble li {
    margin: 0.25em 0;
}
.message .bubble a {
    word-break: break-word; /* evita overflow de URLs grandes */
}


/* alternativa: bullets personalizados ultra discretos */
.message .bubble ul {
    list-style: none;         /* remove bullet nativo */
    padding-left: 1.2em;      /* espaço suficiente p/ pseudo-bullet */
    margin: 0;
}

.message .bubble li {
    position: relative;
    margin: 0.3em 0;
    line-height: 1.4;
}

.message .bubble li::before {
    content: "•";
    position: absolute;
    left: -1em;               /* controla horizontal */
    top: 0;                   /* alinhar topo da linha */
    color: #01ffef;  /* cor suave */
    font-size: 0.9em;         /* tamanho do bullet */
}

@keyframes dots {
    0%   { content: " ."; }
    33%  { content: " .."; }
    66%  { content: " ..."; }
    100% { content: " ."; }
}

/* ------------------------------ */
/* FEEDBACK ROW (thumbs alinhados) */
/* ------------------------------ */
/* Alinha os thumbs à direita, logo abaixo do balão */
.feedback-row {
    display: flex;
    justify-content: flex-end;   /* empurra thumbs para a direita */
    width: 100%;                 /* ocupa a largura do balão */
    margin-top: 6px;
    padding-right: 42px;         /* espaço para não colidir com o avatar */
}

/* ------------------------------ */
/* Ícones do feedback             */
/* ------------------------------ */
.feedback-row .feedback-btn img {
    width: 18px;       /* tamanho adequado */
    height: 18px;      /* força proporção */
    cursor: pointer;
    opacity: 0.7;
    transition: 0.2s ease;
}

.feedback-row .feedback-btn img:hover {
    opacity: 1;
    transform: scale(1.15);
}

.feedback-row .feedback-btn.active img {
    opacity: 1;
    filter: drop-shadow(0 0 3px #01ffef);
}

/* ===================================================================
MODAL (Centrado, Overlay, Estilo Costa)
=================================================================== */

.feedback-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.45);
backdrop-filter: blur(3px);
z-index: 2000;
}

.feedback-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 460px;
max-width: 90%;
background: #fafafa;
border-radius: 14px;
box-shadow: 0 8px 32px rgba(0,0,0,0.28);
z-index: 2001;
display: flex;
flex-direction: column;
}

.hidden {
display: none !important;
}

.modal-header {
padding: 18px;
border-bottom: 1px solid #e5e5e5;
display: flex;
justify-content: space-between;
font-weight: 900;
font-size: 17px;
color: #001f3f;
}

.modal-close {
cursor: pointer;
font-size: 26px;
color: #666;
}

.modal-body {
padding: 18px;
}

.feedback-option {
padding: 12px;
background: white;
border-radius: 10px;
border: 1px solid #ddd;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}

.feedback-textarea-wrapper {
background: white;
padding: 12px;
border-radius: 10px;
border: 1px solid #ddd;
}

.feedback-textarea {
width: 100%;
height: 100px;
border: none;
resize: none;
outline: none;
}

.modal-footer {
padding: 16px;
border-top: 1px solid #e5e5e5;
display: flex;
justify-content: flex-end;
gap: 10px;
}

.modal-btn {
border: none;
padding: 10px 16px;
font-weight: 700;
cursor: pointer;
border-radius: 8px;
}

.modal-btn.cancel {
background: #eee;
}

.modal-btn.submit {
background: #01ffef;
color: #001f3f;
}

/* Coloca o conteúdo do bot em coluna */
.message.bot {
display: flex;
flex-direction: column;
position: relative;
padding-right: 40px; /* espaço para o avatar */
}

/* Avatar volta ao canto direito como antes */
.message.bot .avatar {
position: absolute;
top: 0;
right: 0;
}

.feedback-row {
margin-top: 6px;     /* separação do balão */
display: flex;
flex-direction: row;
gap: 8px;
align-items: center;
margin-left: 0;       /* alinhado à esquerda */
}