/* ============================================================
   COOEDUMITA IA 2.0
   STYLE.CSS
   ============================================================ */


/* ============================================================
   RESET
   ============================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* ============================================================
   VARIABLES
   ============================================================ */

:root {

    --verde: #0B7D3B;
    --verde-hover: #0A6C34;

    --azul: #0D6EFD;

    --gris: #F4F6F9;
    --gris2: #ECEFF1;

    --texto: #222;

    --sombra:
        0 15px 40px rgba(0, 0, 0, .18);
}


/* ============================================================
   BODY
   ============================================================ */

body {

    background:
        linear-gradient(
            135deg,
            #dbeafe,
            #ecfdf5
        );

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;
}


/* ============================================================
   CONTENEDOR PRINCIPAL
   ============================================================ */

.chat-container {

    position: relative;

    width: 440px;

    height: 92vh;

    max-height: 900px;

    background: white;

    border-radius: 22px;

    overflow: hidden;

    box-shadow: var(--sombra);

    display: flex;

    flex-direction: column;
}


/* ============================================================
   HEADER
   ============================================================ */

.chat-header {

    background: var(--verde);

    color: white;

    padding: 18px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-shrink: 0;
}


.header-left {

    display: flex;

    align-items: center;

    gap: 15px;
}


.logo {
    width: 72px;
    height: 72px;

    object-fit: contain;

    display: block;

    flex-shrink: 0;

    background: #ffffff;

    border-radius: 50%;

    padding: 6px;

    box-sizing: border-box;
}

.header-info h2 {

    font-size: 22px;

    font-weight: bold;
}


.subtitle {

    display: block;

    font-size: 13px;

    opacity: .9;

    margin-top: 2px;
}


#status {

    display: block;

    margin-top: 4px;

    font-size: 12px;
}


.header-button {

    width: 40px;

    height: 40px;

    border: none;

    border-radius: 10px;

    background:
        rgba(255,255,255,.15);

    color: white;

    cursor: pointer;

    font-size: 18px;

    transition: .25s;
}


.header-button:hover {

    background: white;

    color: var(--verde);
}


/* ============================================================
   CUERPO DEL CHAT
   IMPORTANTE:
   COOEDUMITA Y CHAT-MESSAGES SON HERMANOS
   ============================================================ */

.chat-body {

    position: relative;

    flex: 1;

    min-height: 0;

    width: 100%;

    overflow: hidden;

    background: var(--gris);
}


/* ============================================================
   ÁREA DE MENSAJES
   ESTE ES EL ÚNICO ELEMENTO QUE HACE SCROLL
   ============================================================ */

#chat-messages {

    position: relative;

    width: 100%;

    height: 100%;

    min-height: 0;

    overflow-y: auto;

    overflow-x: hidden;

    padding: 22px;

    background: var(--gris);

    display: flex;

    flex-direction: column;

    gap: 14px;

    scroll-behavior: smooth;
}


/* ============================================================
   SCROLLBAR
   ============================================================ */

#chat-messages::-webkit-scrollbar {

    width: 8px;
}


#chat-messages::-webkit-scrollbar-thumb {

    background: #bbb;

    border-radius: 20px;
}


#chat-messages::-webkit-scrollbar-track {

    background: transparent;
}


/* ============================================================
   MENSAJES DEL BOT
   ============================================================ */

.bot-message {

    align-self: flex-start;

    background: var(--verde);

    color: white;

    padding: 18px;

    border-radius:
        18px
        18px
        18px
        5px;

    width: fit-content;

    max-width: 82%;

    line-height: 1.55;

    animation:
        fade .25s ease;

    white-space: normal;

    overflow-wrap: break-word;

    text-align: left;
}


.bot-message p {

    margin: 12px 0;
}


.bot-message p:first-of-type {

    margin-top: 0;
}


.bot-message p:last-of-type {

    margin-bottom: 0;
}


/* ============================================================
   MENSAJES DEL USUARIO
   ============================================================ */

.user-message {

    align-self: flex-end;

    background: var(--azul);

    color: white;

    padding:
        14px
        18px;

    border-radius:
        18px
        18px
        5px
        18px;

    max-width: 82%;

    line-height: 1.55;

    animation:
        fade .25s ease;

    white-space: pre-wrap;

    overflow-wrap: break-word;
}


/* ============================================================
   ANIMACIÓN MENSAJES
   ============================================================ */

@keyframes fade {

    from {

        opacity: 0;

        transform:
            translateY(15px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


/* ============================================================
   INDICADOR "ESCRIBIENDO"
   ============================================================ */

.typing {

    display: flex;

    gap: 8px;

    width: 70px;
}


.typing span {

    width: 10px;

    height: 10px;

    background: white;

    border-radius: 50%;

    animation:
        typing 1.2s infinite;
}


.typing span:nth-child(2) {

    animation-delay: .2s;
}


.typing span:nth-child(3) {

    animation-delay: .4s;
}


@keyframes typing {

    0% {

        opacity: .2;

        transform:
            translateY(0);
    }

    50% {

        opacity: 1;

        transform:
            translateY(-6px);
    }

    100% {

        opacity: .2;

        transform:
            translateY(0);
    }
}


/* ============================================================
   COOEDUMITA
   CONTENEDOR FUERA DEL SCROLL
   ============================================================ */

#cooedumita-container {

    position: absolute;

    right: 12px;

    bottom: 12px;

    left: auto;

    top: auto;

    width: 108px;

    height: 108px;

    margin: 0;

    padding: 0;

    z-index: 100;

    pointer-events: auto !important;
    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* ============================================================
   PERSONAJE
   ============================================================ */

#cooedumita-character {

    position: relative;

    width: 108px;

    height: 108px;

    margin: 0;

    padding: 0;

    display: flex;

    justify-content: center;

    align-items: center;
}


/* ============================================================
   IMAGEN DEL PERSONAJE
   ============================================================ */

#cooedumita-image {

    width: 101px;

    height: 101px;

    max-width: 101px;

    max-height: 101px;

    object-fit: contain;

    display: block;

    margin: 0;

    padding: 0;

    filter:
        drop-shadow(
            0 4px 7px
            rgba(0,0,0,.20)
        );

    transition:
        transform .3s ease,
        filter .3s ease;
}


/* ============================================================
   EFECTO HOVER - COOEDUMITA
   ============================================================ */

#cooedumita-container {
    cursor: pointer;
}


/* ============================================================
   AUMENTAR AL PASAR EL CURSOR
   ============================================================ */

#cooedumita-container:hover #cooedumita-image {

    transform: scale(2.15);

    filter:
        drop-shadow(
            0 6px 10px rgba(0, 0, 0, 0.25)
        );
}



/* ============================================================
   BURBUJA DE ESTADO
   A LA IZQUIERDA DEL AVATAR
   ============================================================ */

#cooedumita-status {

    position: absolute;

    right: 60px;

    bottom: 2px;

    left: auto;

    top: auto;

    width: max-content;

    min-width: 130px;

    max-width: 190px;

    padding:
        8px
        11px;

    background: white;

    color: #333;

    border-radius: 14px;

    font-size: 12px;

    line-height: 1.35;

    text-align: left;

    box-shadow:
        0 4px 12px
        rgba(0,0,0,.16);

    opacity: 0;

    transform:
        translateY(6px)
        scale(.95);

    pointer-events: none;

    transition:
        opacity .25s ease,
        transform .25s ease;

    z-index: 101;
}


/* ============================================================
   BURBUJA VISIBLE
   ============================================================ */

#cooedumita-status.visible {

    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


/* ============================================================
   ESTADO IDLE
   ============================================================ */

#cooedumita-character.idle
#cooedumita-image {

    animation:
        cooedumitaIdle
        3s
        ease-in-out
        infinite;
}


/* ============================================================
   ESTADO GREETING
   ============================================================ */

#cooedumita-character.greeting
#cooedumita-image {

    animation:
        cooedumitaGreeting
        1.2s
        ease-in-out
        infinite;
}


/* ============================================================
   ESTADO LISTENING
   ============================================================ */

#cooedumita-character.listening
#cooedumita-image {

    animation:
        cooedumitaListening
        1.5s
        ease-in-out
        infinite;
}


/* ============================================================
   ESTADO THINKING
   ============================================================ */

#cooedumita-character.thinking
#cooedumita-image {

    animation:
        cooedumitaThinking
        1.3s
        ease-in-out
        infinite;
}


/* ============================================================
   ESTADO SPEAKING
   ============================================================ */

#cooedumita-character.speaking
#cooedumita-image {

    animation:
        cooedumitaSpeaking
        .7s
        ease-in-out
        infinite;
}


/* ============================================================
   ANIMACIÓN IDLE
   ============================================================ */

@keyframes cooedumitaIdle {

    0% {

        transform:
            translateY(0);
    }

    50% {

        transform:
            translateY(-5px);
    }

    100% {

        transform:
            translateY(0);
    }
}


/* ============================================================
   ANIMACIÓN GREETING
   ============================================================ */

@keyframes cooedumitaGreeting {

    0% {

        transform:
            rotate(0deg)
            translateY(0);
    }

    25% {

        transform:
            rotate(-4deg)
            translateY(-5px);
    }

    50% {

        transform:
            rotate(4deg)
            translateY(-7px);
    }

    75% {

        transform:
            rotate(-3deg)
            translateY(-5px);
    }

    100% {

        transform:
            rotate(0deg)
            translateY(0);
    }
}


/* ============================================================
   ANIMACIÓN LISTENING
   ============================================================ */

@keyframes cooedumitaListening {

    0% {

        transform:
            translateX(0);
    }

    25% {

        transform:
            translateX(-4px);
    }

    50% {

        transform:
            translateX(4px);
    }

    75% {

        transform:
            translateX(-3px);
    }

    100% {

        transform:
            translateX(0);
    }
}


/* ============================================================
   ANIMACIÓN THINKING
   ============================================================ */

@keyframes cooedumitaThinking {

    0% {

        transform:
            rotate(0deg)
            translateY(0);
    }

    50% {

        transform:
            rotate(-5deg)
            translateY(-5px);
    }

    100% {

        transform:
            rotate(0deg)
            translateY(0);
    }
}


/* ============================================================
   ANIMACIÓN SPEAKING
   ============================================================ */

@keyframes cooedumitaSpeaking {

    0% {

        transform:
            scale(1);
    }

    50% {

        transform:
            scale(1.025);
    }

    100% {

        transform:
            scale(1);
    }
}


/* ============================================================
   FOOTER
   ============================================================ */

.chat-footer {

    background: white;

    border-top:
        1px solid #ddd;

    padding: 12px;

    flex-shrink: 0;
}


/* ============================================================
   CONTADOR
   ============================================================ */

.counter {

    text-align: right;

    font-size: 12px;

    color: #777;

    margin-bottom: 8px;
}


/* ============================================================
   INPUT
   ============================================================ */

.chat-input {

    display: flex;

    gap: 10px;

    align-items: flex-end;
}


textarea {

    flex: 1;

    resize: none;

    min-height: 54px;

    max-height: 180px;

    padding: 14px;

    border-radius: 15px;

    border:
        1px solid #ccc;

    outline: none;

    font-size: 15px;

    font-family: inherit;

    transition: .25s;
}


textarea:focus {

    border-color:
        var(--verde);
}


/* ============================================================
   BOTONES
   ============================================================ */

.icon-button,
.send-button {

    width: 55px;

    height: 55px;

    border: none;

    border-radius: 50%;

    background:
        var(--verde);

    color: white;

    cursor: pointer;

    font-size: 22px;

    transition: .25s;

    flex-shrink: 0;
}


.icon-button:hover,
.send-button:hover {

    background:
        var(--verde-hover);

    transform:
        scale(1.05);
}


.icon-button:disabled,
.send-button:disabled {

    opacity: .5;

    cursor: not-allowed;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 600px) {

    body {

        background: white;
    }


    .chat-container {

        width: 100%;

        height: 100vh;

        border-radius: 0;
    }


    #cooedumita-container {

        right: 8px;

        bottom: 8px;

        width: 76px;

        height: 76px;
    }


    #cooedumita-character {

        width: 76px;

        height: 76px;
    }


    #cooedumita-image {

        width: 70px;

        height: 70px;

        max-width: 70px;

        max-height: 70px;
    }


    #cooedumita-status {

        right: 82px;

        bottom: 20px;

        min-width: 110px;

        max-width: 155px;

        font-size: 11px;
    }

}

/* ============================================================
   COOEDUMITA - EFECTO HOVER
   ============================================================ */

#cooedumita-container {
    pointer-events: auto !important;
    cursor: pointer;
}


#cooedumita-container:hover
#cooedumita-character {

    transform:
        scale(1.75) !important;

    transform-origin:
        bottom right !important;

    transition:
        transform 0.25s ease !important;
}


#cooedumita-container:hover
#cooedumita-image {

    filter:
        drop-shadow(
            0 7px 12px rgba(0, 0, 0, 0.28)
        ) !important;
}


/* ============================================================
   AUMENTAR COOEDUMITA
   ============================================================ */

#cooedumita-container:hover #cooedumita-character {

    transform: scale(1.15);

    transform-origin: bottom right;

    transition:
        transform 0.25s ease;
}


/* ============================================================
   SOMBRA AL PASAR EL CURSOR
   ============================================================ */

#cooedumita-container:hover #cooedumita-image {

    filter:
        drop-shadow(
            0 7px 12px rgba(0, 0, 0, 0.28)
        );
}



/* ============================================================
   COOEDUMITA - GIRO TIPO BAILARINA DE BALLET
   ROTACIÓN SOBRE SU EJE VERTICAL
   ============================================================ */

@keyframes cooedumitaThinking360 {

    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(360deg);
    }

}


/* ============================================================
   EFECTO 3D
   ============================================================ */

#cooedumita-character {

    perspective: 800px;

}


/* ============================================================
   COOEDUMITA GIRANDO MIENTRAS PIENSA
   ============================================================ */

#cooedumita-character.thinking #cooedumita-image {

    animation:
        cooedumitaThinking360
        0.0.ms
        linear
        infinite;

    transform-style: preserve-3d;
}

/* ============================================================
   ACTIVAR GIRO EN ESTADO THINKING
   ============================================================ */

#cooedumita-character.thinking #cooedumita-image {

    animation:
        cooedumitaThinking360
        2s
        linear
        infinite;

}