/* =========================================================
   GSC SMART ASSISTANT — DESIGN SYSTEM
========================================================= */

/* ===============================
   VARIABLES
================================ */
:root{
    --gsc-primary: #111111;
    --gsc-secondary: #f5f5f5;
    --gsc-user: #00996b;
    --gsc-bot: #eeeeee;
    --gsc-admin: #414141;
    --gsc-border: #dddddd;
    --gsc-shadow: 0 10px 30px rgba(0,0,0,0.15);
}


/* ===============================
   BOUTON FLOTTANT
================================ */
.gsc-sa-button{
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--gsc-primary);
    color: #fff;
    padding: 14px 20px;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--gsc-shadow);
    z-index: 999999;
    transition: all .3s ease;
    font-weight: 600;
}

.gsc-sa-button:hover{
    transform: translateY(-3px);
    opacity: .9;
}

.gsc-sa-button-icon{
    font-size: 14px;
}


/* ===============================
   FENÊTRE CHAT
================================ */
.gsc-sa-chat{
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 360px;
    max-width: 95%;
    height: 520px;
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--gsc-shadow);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 999999;
    animation: gscFadeIn .3s ease;
}

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


/* ===============================
   HEADER
================================ */
.gsc-sa-header{
    background: var(--gsc-primary);
    color: #fff;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.gsc-sa-avatar{
    width: 42px;
    height: 42px;
    background: #ffffff22;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.gsc-sa-header-info strong{
    font-size: 14px;
}

.gsc-sa-header-info small{
    font-size: 12px;
    opacity: .8;
}

.gsc-sa-close{
    margin-left: auto;
    font-size: 22px;
    cursor: pointer;
}


/* ===============================
   BODY MESSAGES
================================ */
.gsc-sa-messages{
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    background: var(--gsc-secondary);
}

.gsc-sa-msg{
    max-width: 85%;
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.4;
    word-wrap: break-word;
    animation: gscMessage .25s ease;
}

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

/* BOT */
.gsc-sa-msg.bot{
    background: var(--gsc-bot);
    color: #111;
}

/* USER */
.gsc-sa-msg.user{
    margin-left: auto;
    background: var(--gsc-user);
    color: #fff;
}

/* ===============================
   ADMIN MESSAGE
================================ */
.gsc-sa-msg.admin{
    background: var(--gsc-admin);
    color: #fff;
}

/* ===============================
   INPUT ZONE
================================ */
.gsc-sa-input-area{
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--gsc-border);
    background: #fff;
}

.gsc-sa-input{
    flex: 1;
    resize: none;
    border: 1px solid var(--gsc-border);
    border-radius: 10px;
    padding: 10px;
    font-size: 14px;
    outline: none;
}

.gsc-sa-input:focus{
    border-color: var(--gsc-primary);
}

.gsc-sa-send{
    background: var(--gsc-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-weight: 600;
    transition: all .2s ease;
}

.gsc-sa-send:hover{
    opacity: .9;
}


/* ===============================
   TYPING INDICATOR
================================ */
.gsc-sa-typing{
    display: flex;
    gap: 4px;
    padding: 10px 16px;
}

.gsc-sa-typing span{
    width: 6px;
    height: 6px;
    background: #999;
    border-radius: 50%;
    animation: gscTyping 1.4s infinite;
}

.gsc-sa-typing span:nth-child(2){
    animation-delay: .2s;
}
.gsc-sa-typing span:nth-child(3){
    animation-delay: .4s;
}

@keyframes gscTyping{
    0%{opacity:.2; transform:translateY(0);}
    50%{opacity:1; transform:translateY(-3px);}
    100%{opacity:.2; transform:translateY(0);}
}


/* ===============================
   RESPONSIVE
================================ */
@media(max-width:480px){

    .gsc-sa-chat{
        width: 100%;
        height: 100%;
        bottom: 0;
        right: 0;
        border-radius: 0;
    }

    .gsc-sa-button{
        right: 15px;
        bottom: 15px;
    }
}

/* ===============================
   MOBILE FIX PROPRE
================================ */
@media(max-width:480px){

    .gsc-sa-chat{
        width: 90%;
        height: 70vh;           /* hauteur contrôlée */
        bottom: 80px;
        right: 50%;
        transform: translateX(50%);
        border-radius: 16px;
           font-size:10px;
    }

    .gsc-sa-messages{
        max-height: calc(75vh - 140px);
        overflow-y: auto;
    }

    .gsc-sa-input-area{
        padding: 10px;
    }

    .gsc-sa-input{
        height: 50px;
    }


/* Avatar général */
.gsc-avatar{
width:32px;
height:32px;
border-radius:50%;
background-size:cover;
background-position:center;
flex-shrink:0;
}

.gsc-msg-row{
display:flex;
align-items:flex-start;
gap:8px;
}

/* BOT */
.gsc-avatar.bot{
background-image:url('/wp-content/plugins/gsc-smart-assistant/assets/bot.png');
}

/* USER */
.gsc-avatar.user{
background-image:url('/wp-content/plugins/gsc-smart-assistant/assets/user.png');
}

/* ADMIN */
.gsc-avatar.admin{
background-image:url('/wp-content/plugins/gsc-smart-assistant/assets/admin.png');
}



.gsc-input-area{
display:flex;
align-items:center;
gap:8px;
background:#f1f1f1;
padding:8px;
border-radius:30px;
}

#gsc-upload-btn{
border:none;
background:none;
font-size:20px;
cursor:pointer;
}

#gsc-admin-message{
flex:1;
border:none;
resize:none;
background:transparent;
outline:none;
padding:8px;
font-size:14px;
}

.gsc-send-btn{
background:#0a84ff;
color:white;
border:none;
width:40px;
height:40px;
border-radius:50%;
cursor:pointer;
font-size:18px;
}

.gsc-sa-input-area{
position:relative;
display:flex;
align-items:center;
}

.gsc-sa-input{
width:100%;
padding-left:40px;
border-radius:10px;
}

.gsc-upload-btn{
position:absolute;
left:10px;
background:none;
border:none;
font-size:18px;
cursor:pointer;
}