/**
 * Ruvinix Chatbot - Estilos Comuns
 * v0.8.0 - Design Profissional
 */

/* ===== RESET ===== */
.rc-widget *, .rc-especialista-widget * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ===== MENSAGENS ===== */
.rc-messages, .rc-esp-messages {
    flex: 1;
    padding: var(--rc-space-5, 20px);
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    min-height: 0;
}

.rc-message {
    margin-bottom: var(--rc-space-4, 16px);
    padding: var(--rc-space-4, 16px);
    border-radius: var(--rc-radius-md, 10px);
    max-width: 85%;
    word-wrap: break-word;
    line-height: var(--rc-leading-relaxed, 1.75);
    font-size: var(--rc-text-base, 15px);
    animation: slideIn 0.3s var(--rc-ease-out, cubic-bezier(0, 0, 0.2, 1));
    font-weight: var(--rc-font-normal, 400);
}

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

.rc-message.rc-bot {
    background: var(--rc-neutral-50, #FFFFFF);
    color: var(--rc-neutral-900, #1A1A1A);
    margin-right: auto;
    border-bottom-left-radius: 4px;
    box-shadow: var(--rc-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
    border: 1px solid var(--rc-neutral-200, #F3F4F6);
}

.rc-message.rc-user {
    background: linear-gradient(135deg, var(--rc-primary, var(--rc-primary-600, #2F5A8D)) 0%, var(--rc-primary, var(--rc-primary-700, #1E4976)) 100%);
    color: white;
    margin-left: auto;
    border-bottom-right-radius: 4px;
    box-shadow: var(--rc-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.08));
}

/* ===== TYPING INDICATOR ===== */
.rc-typing {
    display: flex;
    gap: 6px;
    padding: var(--rc-space-4, 16px);
    background: var(--rc-neutral-50, #FFFFFF);
    border-radius: var(--rc-radius-md, 10px);
    border-bottom-left-radius: 4px;
    width: fit-content;
    margin-bottom: var(--rc-space-4, 16px);
    box-shadow: var(--rc-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
    border: 1px solid var(--rc-neutral-200, #F3F4F6);
}

.rc-typing span {
    width: 8px;
    height: 8px;
    background: var(--rc-primary, var(--rc-primary-600, #2F5A8D));
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}

.rc-typing span:nth-child(1) {
    animation-delay: -0.32s;
}

.rc-typing span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ===== INPUT WRAPPER ===== */
.rc-input-wrapper, .rc-esp-input-wrapper {
    display: flex;
    gap: var(--rc-space-3, 12px);
    padding: var(--rc-space-4, 16px);
    border-top: 1px solid var(--rc-neutral-300, #E5E7EB);
    background: var(--rc-neutral-50, #FFFFFF);
    flex-shrink: 0;
}

.rc-input, .rc-esp-input {
    flex: 1;
    padding: var(--rc-space-3, 12px);
    border: 1.5px solid var(--rc-neutral-300, #E5E7EB);
    border-radius: var(--rc-radius-md, 10px);
    font-size: var(--rc-text-sm, 14px);
    font-family: inherit;
    resize: none;
    outline: none;
    transition: all var(--rc-duration-fast, 150ms) var(--rc-ease-out, cubic-bezier(0, 0, 0.2, 1));
    color: var(--rc-neutral-900, #1A1A1A);
    background: var(--rc-neutral-50, #FFFFFF);
    line-height: var(--rc-leading-normal, 1.5);
}

.rc-input::placeholder, .rc-esp-input::placeholder {
    color: var(--rc-neutral-500, #9CA3AF);
}

.rc-input:focus, .rc-esp-input:focus {
    border-color: var(--rc-primary, var(--rc-primary-600, #2F5A8D));
    border-width: 2px;
    padding: calc(var(--rc-space-3, 12px) - 0.5px);
    box-shadow: 0 0 0 3px var(--rc-primary-shadow, rgba(47, 90, 141, 0.1));
}

.rc-send-btn, .rc-esp-send-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border: none;
    border-radius: var(--rc-radius-md, 10px);
    background: linear-gradient(135deg, var(--rc-primary, var(--rc-primary-600, #2F5A8D)) 0%, var(--rc-primary, var(--rc-primary-700, #1E4976)) 100%);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--rc-duration-fast, 150ms) var(--rc-ease-out, cubic-bezier(0, 0, 0.2, 1));
    box-shadow: var(--rc-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.08));
}

.rc-send-btn:hover, .rc-esp-send-btn:hover {
    background: linear-gradient(135deg, var(--rc-button, var(--rc-primary-500, #4A7BA7)) 0%, var(--rc-button, var(--rc-primary-600, #2F5A8D)) 100%);
    transform: translateY(-1px);
    box-shadow: var(--rc-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.08));
}

.rc-send-btn:active, .rc-esp-send-btn:active {
    transform: translateY(0) scale(0.98);
}

.rc-send-btn:disabled, .rc-esp-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.rc-send-btn svg, .rc-esp-send-btn svg {
    width: 20px;
    height: 20px;
}

/* ===== SCROLLBAR PERSONALIZADA ===== */
.rc-messages::-webkit-scrollbar, .rc-esp-messages::-webkit-scrollbar {
    width: 6px;
}

.rc-messages::-webkit-scrollbar-track, .rc-esp-messages::-webkit-scrollbar-track {
    background: var(--rc-neutral-200, #F3F4F6);
    border-radius: 3px;
}

.rc-messages::-webkit-scrollbar-thumb, .rc-esp-messages::-webkit-scrollbar-thumb {
    background: var(--rc-neutral-400, #D1D5DB);
    border-radius: 3px;
    transition: background 0.2s;
}

.rc-messages::-webkit-scrollbar-thumb:hover, .rc-esp-messages::-webkit-scrollbar-thumb:hover {
    background: var(--rc-neutral-500, #9CA3AF);
}

/* ===== RESPONSIVO ===== */
@media (max-width: 768px) {
    .rc-messages, .rc-esp-messages {
        padding: var(--rc-space-4, 16px);
    }
    
    .rc-message {
        font-size: var(--rc-text-sm, 14px);
        padding: var(--rc-space-3, 12px);
        max-width: 90%;
    }
    
    .rc-input-wrapper, .rc-esp-input-wrapper {
        padding: var(--rc-space-3, 12px);
    }
    
    .rc-input, .rc-esp-input {
        font-size: var(--rc-text-xs, 13px);
    }
    
    .rc-send-btn, .rc-esp-send-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }
}

@media (max-width: 480px) {
    .rc-messages, .rc-esp-messages {
        padding: var(--rc-space-3, 12px);
    }
    
    .rc-message {
        max-width: 95%;
    }
}