/**
 * Íris Chat Balloon - Estilos Profissionais (Versão 2.0)
 * Visual inspirado no Apple Messages + Chatvolt + LiveChat
 * Paleta: #161616 (Dark), #F5F5F5 (Light), #03E3B6 (Accent)
 * Desenvolvido com foco em UX/UI de alto nível
 */

/* ========================================
   VARIÁVEIS CSS
======================================== */
:root {
    /* ✨ MELHORIA: Paleta de cores refinada conforme solicitado */
    --iris-primary: #FFFFFF;
    --iris-dark: #161616;
    --iris-accent: #03E3B6;
    
    /* Tons de cinza baseados na nova paleta */
    --iris-gray-lightest: #FFFFFF; /* Fundo principal agora é branco puro */
    --iris-gray-light: #F5F5F5;     /* Cor base para balões de bot e inputs */
    --iris-gray-medium: #EAEAEA;    /* Cor para bordas sutis */
    --iris-gray-dark: #8A8A8E;      /* Cor para textos secundários */
    
    /* Sombras mais suaves e modernas */
    --iris-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --iris-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --iris-shadow-lg: 0 10px 38px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.06);
    --iris-shadow-accent: 0 4px 16px rgba(3, 227, 182, 0.2);
    
    /* Border radius mais consistentes */
    --iris-radius-lg: 24px;
    --iris-radius: 20px;
    --iris-radius-md: 16px;
    --iris-radius-sm: 12px;
    
    /* Transições */
    --iris-transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --iris-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Z-index layers */
    --iris-z-button: 999998;
    --iris-z-chat: 999999;
}

/* ========================================
   RESET E UTILIDADES
======================================== */
#iris-chat-container * {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.iris-hidden {
    display: none !important;
}

/* ========================================
   BOTÃO FLUTUANTE
======================================== */
#iris-chat-button {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: var(--iris-z-button);
    cursor: pointer;
    transition: var(--iris-transition);
}

#iris-chat-button:hover {
    transform: scale(1.08);
}

.iris-avatar-wrapper {
    position: relative;
    width: 64px; /* Aumentado para mais destaque */
    height: 64px;
    background: var(--iris-accent);
    border-radius: 50%;
    box-shadow: var(--iris-shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Mantido para arredondar a imagem */
    border: 3px solid var(--iris-primary);
}

.iris-avatar {
    width: 100%; height: 100%; object-fit: cover;
}
.iris-avatar-placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--iris-dark);
}
.iris-avatar-placeholder svg {
    width: 32px; height: 32px;
}

/* ✅ CORRIGIDO: Posicionamento do badge da mensagem inicial */
.iris-badge {
    position: absolute;
    top: 50%;
    right: 84px; /* Distância ideal à esquerda do botão */
    transform: translateY(-50%) scale(0.9); /* Estado inicial da animação */
    transform-origin: right center; /* Animação expande da direita para a esquerda */
    min-width: 180px;
    max-width: 260px;
    padding: 14px 20px;
    background: var(--iris-primary);
    color: var(--iris-dark);
    border-radius: var(--iris-radius);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    box-shadow: var(--iris-shadow-lg);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    white-space: normal;
}

.iris-badge.iris-show {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    pointer-events: auto;
}

/* Seta do badge */
.iris-badge::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -7px; /* Posicionada para tocar na borda */
    transform: translateY(-50%) rotate(45deg);
    width: 14px;
    height: 14px;
    background: var(--iris-primary);
}

/* ========================================
   JANELA DO CHAT
======================================== */
#iris-chat-window {
    position: fixed;
    bottom: 100px;
    right: 24px;
    width: 400px; /* Levemente mais estreito, mais elegante */
    max-width: calc(100vw - 32px);
    height: 75vh; /* Altura relativa para se adaptar melhor a telas */
    max-height: 680px;
    background: var(--iris-primary);
    border-radius: var(--iris-radius-lg);
    box-shadow: var(--iris-shadow-lg);
    z-index: var(--iris-z-chat);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.95) translateY(20px);
    transition: var(--iris-transition);
}

#iris-chat-window.iris-show {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Header do Chat */
.iris-chat-header {
    padding: 20px 24px;
    background: var(--iris-gray-lightest);
    border-bottom: 1px solid var(--iris-gray-medium);
    /* ... resto do header sem grandes mudanças pois já estava bom ... */
    display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.iris-header-info { display: flex; align-items: center; gap: 12px; }
.iris-header-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid var(--iris-accent); flex-shrink: 0; }
.iris-avatar-placeholder-small { background: var(--iris-accent); display: flex; align-items: center; justify-content: center; color: var(--iris-dark); }
.iris-avatar-placeholder-small svg { width: 22px; height: 22px; }
.iris-header-text { display: flex; flex-direction: column; gap: 3px; }
.iris-header-name { font-size: 21px; font-weight: 600; color: var(--iris-dark); line-height: 1; }
.iris-header-status { font-size: 12px; color: var(--iris-gray-dark); display: flex; align-items: center; gap: 6px; line-height: 1; }
.iris-status-dot { width: 7px; height: 7px; background: var(--iris-accent); border-radius: 50%; animation: iris-pulse 2s ease-in-out infinite; }
@keyframes iris-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
.iris-close-btn { width: 36px; height: 36px; border: none; background: transparent; color: var(--iris-gray-dark); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--iris-transition-fast); flex-shrink: 0; }
.iris-close-btn:hover { background: var(--iris-gray-medium); color: var(--iris-dark); }
.iris-close-btn svg { width: 20px; height: 20px; }

/* ========================================
   ÁREA DE MENSAGENS
======================================== */
.iris-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    /* ✅ CORRIGIDO: Espaçamento generoso entre as mensagens */
    gap: 24px; 
    scroll-behavior: smooth;
    background: var(--iris-primary);
}

/* Scrollbar */
.iris-chat-messages::-webkit-scrollbar { width: 6px; }
.iris-chat-messages::-webkit-scrollbar-track { background: transparent; }
.iris-chat-messages::-webkit-scrollbar-thumb { background: var(--iris-gray-medium); border-radius: 10px; }
.iris-chat-messages::-webkit-scrollbar-thumb:hover { background: var(--iris-gray-dark); }

/* Mensagens individuais */
.iris-message {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    animation: iris-message-in 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
@keyframes iris-message-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.iris-message.iris-bot { flex-direction: row; }
.iris-message.iris-user { flex-direction: row-reverse; }

.iris-message-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid #03e3b6; }
.iris-message-avatar-placeholder { width: 32px; height: 32px; border-radius: 50%; background: var(--iris-gray-light); display: flex; align-items: center; justify-content: center; color: var(--iris-dark); flex-shrink: 0; }
.iris-message-avatar-placeholder svg { width: 24px; height: 24px; }

/* ✨ MELHORIA: Design das bolhas de mensagem inspirado nas referências */
.iris-message-content {
    max-width: 80%;
    padding: 14px 20px;
    border-radius: var(--iris-radius);
    font-size: 15px;
    line-height: 1.6;
    word-wrap: break-word;
}

/* Cor do BOT */
.iris-message.iris-bot .iris-message-content {
    background: var(--iris-gray-light); /* #F5F5F5 */
    color: var(--iris-dark);
    border-bottom-left-radius: 6px; /* Detalhe "Apple Messages" */
    box-shadow: #161616 3px 4px 7px -4px
}

/* Cor do USUÁRIO */
.iris-message.iris-user .iris-message-content {
    background: var(--iris-accent); /* #03E3B6 */
    color: var(--iris-dark); /* Texto preto para alto contraste */
    font-weight: 400;
    border-bottom-right-radius: 6px; /* Detalhe "Apple Messages" */
}

/* ========================================
   INDICADOR DE DIGITAÇÃO
======================================== */
.iris-typing-indicator {
    padding: 0 24px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.iris-typing-dots { display: flex; gap: 5px; padding: 14px 18px; background: var(--iris-gray-light); border-radius: var(--iris-radius); border-bottom-left-radius: 6px; }
.iris-typing-dots span { width: 8px; height: 8px; background: var(--iris-gray-dark); border-radius: 50%; animation: iris-typing 1.4s ease-in-out infinite; }
.iris-typing-dots span:nth-child(1) { animation-delay: 0s; }
.iris-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.iris-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes iris-typing { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }

/* ========================================
   INPUT DE MENSAGEM
======================================== */
.iris-chat-input-wrapper {
    padding: 12px 24px 24px;
    background: var(--iris-primary);
    border-top: 1px solid var(--iris-gray-medium);
    flex-shrink: 0;
}
.iris-input-container {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    background: var(--iris-gray-light);
    border-radius: var(--iris-radius);
    padding: 6px 6px 6px 20px;
    border: 1px solid transparent;
    transition: var(--iris-transition-fast);
}
.iris-input-container:focus-within {
    border-color: var(--iris-accent);
    background: var(--iris-primary);
    box-shadow: 0 0 0 3px rgba(3, 227, 182, 0.15);
}
.iris-chat-input {
    flex: 1; border: none; background: transparent; font-size: 15px; color: var(--iris-dark); resize: none; outline: none; max-height: 120px; line-height: 1.5; padding: 10px 0;
}
.iris-chat-input::placeholder { color: var(--iris-gray-dark); }

.iris-send-btn {
    width: 44px; height: 44px; border: none; background: var(--iris-accent); color: var(--iris-dark); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--iris-transition-fast); flex-shrink: 0; position: relative;
}
.iris-send-btn:hover:not(:disabled) { transform: scale(1.08); box-shadow: var(--iris-shadow-accent); }
.iris-send-btn:disabled { opacity: 0.6; cursor: not-allowed; background: var(--iris-gray-medium); }
.iris-send-icon { width: 22px; height: 22px; }
.iris-loading-spinner { position: absolute; width: 24px; height: 24px; }
.iris-loading-spinner svg { width: 100%; height: 100%; animation: iris-spin 1s linear infinite; }
@keyframes iris-spin { to { transform: rotate(360deg); } }

/* ========================================
   FOOTER "POWERED BY"
======================================== */
.iris-chat-footer {
    padding: 12px 24px; text-align: center; font-size: 12px; color: var(--iris-gray-dark); border-top: 1px solid var(--iris-gray-medium); background: var(--iris-gray-lightest); flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.iris-powered-link { display: inline-flex; align-items: center; gap: 6px; color: var(--iris-dark); text-decoration: none; font-weight: 600; transition: var(--iris-transition-fast); }
.iris-powered-link:hover { color: var(--iris-accent); }
.iris-powered-logo { height: 16px; width: auto; }

/* ========================================
   RESPONSIVIDADE MOBILE
======================================== */
@media (max-width: 480px) {
    #iris-chat-button { bottom: 20px; right: 20px; }
    .iris-avatar-wrapper { width: 60px; height: 60px; }
    .iris-badge { display: none; } /* Oculta o badge em telas pequenas para não poluir */
    #iris-chat-window {
        bottom: 0; right: 0; left: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0;
    }
    .iris-message-content { max-width: 85%; }
    .iris-chat-input { font-size: 16px; } /* Previne zoom no iOS */
}