/**
 * Wise Chat - Noovimo Custom Branding
 * Personnalisation aux couleurs de Noovimo
 */

/* Couleurs Noovimo */
:root {
    --noovimo-primary: #00A3E0;      /* Bleu Noovimo */
    --noovimo-secondary: #003B5C;    /* Bleu foncé */
    --noovimo-accent: #FF6B35;       /* Orange accent */
    --noovimo-light: #F5F9FC;        /* Fond clair */
    --noovimo-dark: #2C3E50;         /* Texte foncé */
    --noovimo-gray: #95A5A6;         /* Gris */
}

/* Logo Noovimo en haut du chat */
.wcContainer.wcNoovimoBranding::before {
    content: '';
    display: block;
    background-image: var(--noovimo-logo-url, none);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 60px;
    margin: 10px 0;
}

/* Fenêtre de chat - Couleurs Noovimo */
.wcContainer.wcNoovimoBranding .wcBody .wcMessagesArea .wcTabsContainer {
    background-color: var(--noovimo-light) !important;
}

.wcContainer.wcNoovimoBranding .wcBody .wcBrowserArea,
.wcContainer.wcNoovimoBranding .wcDesktop .wcBrowser {
    background-color: var(--noovimo-light) !important;
}

/* Messages */
.wcContainer.wcNoovimoBranding .wcChannel .wcMessages {
    background-color: #FFFFFF !important;
}

.wcContainer.wcNoovimoBranding .wcChannel .wcMessages .wcMessage {
    background-color: transparent !important;
    border-left: 3px solid transparent;
    padding-left: 10px;
    transition: border-color 0.3s ease;
}

.wcContainer.wcNoovimoBranding .wcChannel .wcMessages .wcMessage:hover {
    border-left-color: var(--noovimo-primary);
}

/* Noms d'utilisateurs */
.wcContainer.wcNoovimoBranding .wcMessage .wcUser {
    color: var(--noovimo-primary) !important;
    font-weight: 600;
}

.wcContainer.wcNoovimoBranding .wcMessage.wcWpUser .wcUser {
    color: var(--noovimo-secondary) !important;
}

/* Zone de saisie */
.wcContainer.wcNoovimoBranding .wcChannelInput {
    background-color: var(--noovimo-light) !important;
    border-top: 2px solid var(--noovimo-primary);
}

.wcContainer.wcNoovimoBranding .wcChannelInput input,
.wcContainer.wcNoovimoBranding .wcChannelInput textarea {
    background-color: #FFFFFF !important;
    border: 1px solid var(--noovimo-primary) !important;
    border-radius: 20px !important;
    padding: 10px 15px !important;
    color: var(--noovimo-dark) !important;
}

.wcContainer.wcNoovimoBranding .wcChannelInput input:focus,
.wcContainer.wcNoovimoBranding .wcChannelInput textarea:focus {
    outline: none !important;
    border-color: var(--noovimo-accent) !important;
    box-shadow: 0 0 5px rgba(0, 163, 224, 0.3);
}

/* Bouton d'envoi */
.wcContainer.wcNoovimoBranding .wcMessageSubmit {
    background-color: var(--noovimo-primary) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 10px 20px !important;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.wcContainer.wcNoovimoBranding .wcMessageSubmit:hover {
    background-color: var(--noovimo-secondary) !important;
}

/* Liste des utilisateurs */
.wcContainer.wcNoovimoBranding .wcDesktop .wcBrowser {
    background-color: var(--noovimo-light) !important;
}

.wcContainer.wcNoovimoBranding .wcDesktop .wcBrowser .wcUser {
    color: var(--noovimo-dark) !important;
    transition: background-color 0.2s ease;
    padding: 8px;
    border-radius: 5px;
}

.wcContainer.wcNoovimoBranding .wcDesktop .wcBrowser .wcUser:hover {
    background-color: rgba(0, 163, 224, 0.1);
}

.wcContainer.wcNoovimoBranding .wcDesktop .wcBrowser .wcUserOnline {
    border-left: 3px solid var(--noovimo-primary);
}

/* Onglets des canaux */
.wcContainer.wcNoovimoBranding .wcTabs .wcTab {
    background-color: transparent !important;
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.wcContainer.wcNoovimoBranding .wcTabs .wcTab.wcActive {
    background-color: #FFFFFF !important;
    border-bottom-color: var(--noovimo-primary) !important;
}

.wcContainer.wcNoovimoBranding .wcTabs .wcTab .wcName {
    color: var(--noovimo-dark) !important;
}

.wcContainer.wcNoovimoBranding .wcTabs .wcTab.wcActive .wcName {
    color: var(--noovimo-primary) !important;
    font-weight: 600;
}

/* Groupes - Style spécial */
.wcContainer.wcNoovimoBranding .wcTabs .wcTab.wcGroupChannel::before {
    content: '👥 ';
    margin-right: 5px;
}

.wcContainer.wcNoovimoBranding .wcTabs .wcTab.wcGroupChannel {
    background: linear-gradient(135deg, rgba(0, 163, 224, 0.1) 0%, rgba(0, 59, 92, 0.1) 100%);
}

/* Badges de notification */
.wcContainer.wcNoovimoBranding .wcNotification {
    background-color: var(--noovimo-accent) !important;
    color: #FFFFFF !important;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 600;
}

/* Scrollbar personnalisée */
.wcContainer.wcNoovimoBranding .wcMessages::-webkit-scrollbar {
    width: 8px;
}

.wcContainer.wcNoovimoBranding .wcMessages::-webkit-scrollbar-track {
    background: var(--noovimo-light);
}

.wcContainer.wcNoovimoBranding .wcMessages::-webkit-scrollbar-thumb {
    background: var(--noovimo-primary);
    border-radius: 4px;
}

.wcContainer.wcNoovimoBranding .wcMessages::-webkit-scrollbar-thumb:hover {
    background: var(--noovimo-secondary);
}

/* Animations */
@keyframes noovimo-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wcContainer.wcNoovimoBranding .wcMessage {
    animation: noovimo-fade-in 0.3s ease;
}

/* Messages système avec style Noovimo */
.wcContainer.wcNoovimoBranding .wcSystemMessage {
    background-color: rgba(0, 163, 224, 0.1) !important;
    border-left: 3px solid var(--noovimo-primary) !important;
    color: var(--noovimo-secondary) !important;
    padding: 10px !important;
    border-radius: 5px;
    margin: 5px 0;
}

/* Bouton créer un groupe */
.wcContainer.wcNoovimoBranding .wcCreateGroupButton {
    background: linear-gradient(135deg, var(--noovimo-primary) 0%, var(--noovimo-secondary) 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wcContainer.wcNoovimoBranding .wcCreateGroupButton:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 163, 224, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .wcContainer.wcNoovimoBranding::before {
        height: 40px;
    }
}