/* =========================
   CONFIGURACIÓN GENERAL
========================= */

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

:root {
    --gold: #d4af37;
    --gold-light: #f1d675;
    --gold-dark: #9c7b18;

    --black: #070707;
    --dark: #101010;
    --dark-light: #181818;

    --white: #ffffff;
    --gray: #9a9a9a;
}

body {
    font-family: Arial, Helvetica, sans-serif;

    background: var(--black);
    color: var(--white);

    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}


/* =========================
   FONDO
========================= */

.background {
    position: fixed;

    inset: 0;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(212, 175, 55, 0.12),
            transparent 35%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(212, 175, 55, 0.05),
            transparent 30%
        );

    pointer-events: none;
}


/* =========================
   APP
========================= */

.app {
    width: min(900px, 95vw);

    height: min(720px, 92vh);

    display: flex;
    flex-direction: column;

    position: relative;

    background: rgba(15, 15, 15, 0.95);

    border: 1px solid rgba(212, 175, 55, 0.3);

    border-radius: 22px;

    overflow: hidden;

    box-shadow:
        0 0 50px rgba(0, 0, 0, 0.8),
        0 0 80px rgba(212, 175, 55, 0.08);
}


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

.header {
    padding: 22px 28px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.06);

    background:
        linear-gradient(
            90deg,
            rgba(212, 175, 55, 0.08),
            transparent
        );
}

.brand {
    display: flex;
    align-items: center;

    gap: 16px;
}

.assistant-icon {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--gold-dark)
        );

    box-shadow:
        0 0 20px rgba(212, 175, 55, 0.25);

    overflow: hidden;
}

.assistant-icon img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.brand h1 {
    font-size: 19px;

    letter-spacing: 2px;

    color: var(--gold);
}

.brand p {
    margin-top: 5px;

    font-size: 13px;

    color: var(--gray);
}

.status-dot {
    width: 8px;
    height: 8px;

    display: inline-block;

    background: #3ccf5e;

    border-radius: 50%;

    margin-right: 5px;

    box-shadow:
        0 0 10px rgba(60, 207, 94, 0.8);
}


/* =========================
   CHAT
========================= */

.chat-container {
    flex: 1;

    display: flex;
    flex-direction: column;

    min-height: 0;

    overflow: hidden;
}


/* =========================
   MENSAJES
========================= */

.messages {
    flex: 1;

    min-height: 0;

    overflow-y: auto;
    overflow-x: hidden;

    padding: 28px;

    display: flex;
    flex-direction: column;

    gap: 18px;

    scrollbar-width: thin;
    scrollbar-color: var(--gold-dark) transparent;

    scroll-behavior: smooth;
}

.messages::-webkit-scrollbar {
    width: 8px;
}

.messages::-webkit-scrollbar-track {
    background: transparent;
}

.messages::-webkit-scrollbar-thumb {
    background: var(--gold-dark);
    border-radius: 10px;
}


/* =========================
   MENSAJES
========================= */

.messages {
    flex: 1;

    overflow-y: auto;

    padding: 28px;

    display: flex;
    flex-direction: column;

    gap: 18px;

    scrollbar-width: thin;
    scrollbar-color: var(--gold-dark) transparent;
}

.message {
    display: flex;

    gap: 12px;

    max-width: 80%;
}

/* =========================
   AVATAR DEL ASISTENTE
========================= */

.message-avatar {
    width: 38px;
    min-width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--gold-dark)
        );
}

.message-avatar img {
    width: 26px !important;
    height: 26px !important;

    max-width: 26px;
    max-height: 26px;

    object-fit: contain;

    display: block;
}

.message-content {
    padding: 15px 17px;

    background: var(--dark-light);

    border:
        1px solid rgba(255, 255, 255, 0.06);

    border-radius:
        4px 16px 16px 16px;

    line-height: 1.55;

    font-size: 14px;
}

.message-content p + p {
    margin-top: 8px;
}


/* =========================
   PREGUNTAS
========================= */

.suggestions {
    padding:
        0 28px 18px;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}

.suggestion {
    border:
        1px solid rgba(212, 175, 55, 0.35);

    background:
        rgba(212, 175, 55, 0.06);

    color:
        var(--gold-light);

    padding:
        9px 14px;

    border-radius:
        20px;

    cursor: pointer;

    font-size: 13px;

    transition:
        0.2s ease;
}

.suggestion:hover {
    background:
        rgba(212, 175, 55, 0.15);

    transform:
        translateY(-2px);
}


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

.input-area {
    display: flex;

    gap: 12px;

    padding: 20px 28px;

    border-top:
        1px solid rgba(255, 255, 255, 0.06);

    background:
        rgba(0, 0, 0, 0.25);
}

.input-area input {
    flex: 1;

    background:
        #0a0a0a;

    border:
        1px solid rgba(255, 255, 255, 0.1);

    outline: none;

    color: white;

    padding:
        14px 16px;

    border-radius:
        14px;

    font-size:
        14px;

    transition:
        0.2s;
}

.input-area input:focus {
    border-color:
        rgba(212, 175, 55, 0.7);

    box-shadow:
        0 0 15px rgba(212, 175, 55, 0.08);
}

.input-area button {
    width:
        50px;

    border:
        none;

    border-radius:
        14px;

    cursor:
        pointer;

    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--gold-dark)
        );

    color:
        black;

    font-size:
        18px;

    transition:
        0.2s;
}

.input-area button:hover {
    transform:
        scale(1.05);
}


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

.footer {
    padding:
        12px;

    text-align:
        center;

    font-size:
        11px;

    letter-spacing:
        1px;

    color:
        #666;

    background:
        #090909;
}

.footer span:first-child {
    color:
        var(--gold-dark);
}

.footer-separator {
    margin:
        0 7px;
}


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

@media (max-width: 600px) {

    body {
        align-items:
            stretch;
    }

    .app {
        width:
            100%;

        height:
            100vh;

        border-radius:
            0;

        border:
            none;
    }

    .header {
        padding:
            18px;
    }

    .messages {
        padding:
            20px 16px;
    }

    .message {
        max-width:
            95%;
    }

    .suggestions {
        padding:
            0 16px 14px;
    }

    .input-area {
        padding:
            16px;
    }

}

/* =========================
   MENSAJE DEL USUARIO
========================= */

.user-message {
    align-self: flex-end;

    justify-content: flex-end;
}

.user-message .message-content {
    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--gold-dark)
        );

    color:
        #000;

    border-radius:
        16px 4px 16px 16px;

    border:
        none;
}

.message-content a {
    color: var(--gold-light);

    font-weight: bold;

    text-decoration: none;

    border-bottom:
        1px solid rgba(212, 175, 55, 0.5);

    transition: 0.2s ease;
}

.message-content a:hover {
    color: var(--white);

    border-bottom-color:
        var(--white);
}