/*
 * ==========================================================
 * SAVANNAH STYLE SHEET
 * ==========================================================
 *
 * Main visual styling for the Savannah website.
 *
 * This file currently controls:
 *
 * - Overall page appearance
 * - Header
 * - Introduction
 * - Savannah character
 * - Chatbox
 * - Chat messages
 * - Chat input
 * - Send button
 * - Footer
 * - Mobile layout
 *
 * The following future features are intentionally NOT included:
 *
 * - Savannah olive outfit image inside the chat
 * - Typing indicator animation
 *
 * Those will be added later when the JavaScript system
 * is rebuilt.
 *
 * ==========================================================
 */


/* ==========================================================
 * GLOBAL BOX SIZING
 * ========================================================== */

* {
    box-sizing: border-box;
}


/* ==========================================================
 * OVERALL PAGE
 * ========================================================== */

body {
    margin: 0;
    background: #120d10;
    color: #f5eee9;
    font-family: Georgia, "Times New Roman", serif;
}


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

.site-header {
    padding: 26px 6%;
    background: #120d10;
    border-bottom: 1px solid #2b1d20;
}


/* Header content width */

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
}


/* Savannah logo */

.logo {
    color: #f5eee9;
    text-decoration: none;
    font-size: 28px;
    font-weight: 500;
}


/* ==========================================================
 * MAIN CHAT SECTION
 * ========================================================== */

.chat-section {
    min-height: calc(100vh - 150px);
    padding: 110px 6% 120px;
    display: flex;
    align-items: center;
    background:
        radial-gradient(
            circle at 65% 50%,
            rgba(113, 61, 50, 0.13),
            transparent 45%
        ),
        #120d10;
}


/* Main content width */

.chat-container {
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
}


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

.chat-intro {
    margin-bottom: 60px;
    text-align: center;
}


/* Small section label */

.section-label {
    margin: 0 0 20px;
    color: #b98978;
    font-family: Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
}


/* Main introduction text */

.chat-intro > p:not(.section-label) {
    margin: 0;
    color: #cfc2bd;
    font-size: 18px;
    line-height: 1.7;
}


/* ==========================================================
 * SAVANNAH + CHATBOX LAYOUT
 * ========================================================== */

.chat-area {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 45px;
}


/* ==========================================================
 * SAVANNAH CHARACTER
 * ========================================================== */

.chat-character {
    width: 38%;
    max-width: 410px;
    height: 570px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}


/* Savannah character image */

.chat-character img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}


/* ==========================================================
 * CHATBOX
 * ========================================================== */

.chat-box {
    width: 62%;
    max-width: 720px;
    height: 570px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid #3a292b;
    border-radius: 20px;
    background: #1a1114;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.4),
        0 0 80px rgba(113, 61, 50, 0.08);
}


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

.chat-header {
    padding: 19px 23px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    border-bottom: 1px solid #332528;
    background: #211619;
}


/* Online status dot */

.chat-status {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #8fbd8a;
    box-shadow: 0 0 10px rgba(143, 189, 138, 0.5);
}


/* Savannah name */

.chat-header strong {
    display: block;
    color: #f5eee9;
    font-size: 15px;
    font-weight: 500;
}


/* Online text */

.chat-header span {
    display: block;
    margin-top: 3px;
    color: #8f817d;
    font-family: Arial, sans-serif;
    font-size: 11px;
}


/* ==========================================================
 * CHAT MESSAGE AREA
 * ========================================================== */

.chat-messages {
    flex: 1;
    min-height: 0;
    padding: 30px 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #4a3436 transparent;
}


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

.chat-messages::-webkit-scrollbar {
    width: 6px;
}


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


.chat-messages::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #4a3436;
}


.chat-messages::-webkit-scrollbar-thumb:hover {
    background: #68484a;
}


/* ==========================================================
 * GENERAL MESSAGE BUBBLES
 * ========================================================== */

.message {
    max-width: 75%;
    padding: 13px 17px;
    border-radius: 15px;
    font-size: 15px;
    line-height: 1.6;
    flex-shrink: 0;
}


/* ==========================================================
 * SAVANNAH MESSAGE
 * ========================================================== */

.savannah-message {
    align-self: flex-start;
    color: #eadfda;
    background: #2a1b1f;
    border-bottom-left-radius: 4px;
}


/* ==========================================================
 * VISITOR MESSAGE
 * ========================================================== */

.visitor-message {
    align-self: flex-end;
    color: #ffffff;
    background: #713d32;
    border-bottom-right-radius: 4px;
}


/* ==========================================================
 * CHAT INPUT AREA
 * ========================================================== */

.chat-input-area {
    padding: 16px;
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    border-top: 1px solid #332528;
    background: #171012;
}


/* ==========================================================
 * CHAT INPUT FIELD
 * ========================================================== */

.chat-input-area input {
    min-width: 0;
    flex: 1;
    padding: 14px 16px;
    border: 1px solid #3b2a2d;
    border-radius: 10px;
    outline: none;
    color: #f5eee9;
    background: #211619;
    font-family: Arial, sans-serif;
    font-size: 14px;
}


/* Input placeholder */

.chat-input-area input::placeholder {
    color: #776966;
}


/* Input focus */

.chat-input-area input:focus {
    border-color: #765047;
}


/* ==========================================================
 * SEND BUTTON
 * ========================================================== */

.chat-input-area button {
    padding: 0 24px;
    border: 0;
    border-radius: 10px;
    color: #ffffff;
    background: #713d32;
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 14px;
}


/* Send button hover */

.chat-input-area button:hover {
    background: #8b5042;
}


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

.site-footer {
    padding: 30px 6%;
    border-top: 1px solid #2b1d20;
    background: #0e090b;
    text-align: center;
}


/* Footer text */

.site-footer p {
    margin: 0;
    color: #6f625f;
    font-family: Arial, sans-serif;
    font-size: 12px;
}


/* ==========================================================
 * MOBILE LAYOUT
 * ========================================================== */

@media (max-width: 768px) {


    /* ------------------------------------------------------
     * Mobile header
     * ------------------------------------------------------ */

    .site-header {
        padding: 20px 5%;
    }


    /* Mobile logo */

    .logo {
        font-size: 24px;
    }


    /* ------------------------------------------------------
     * Mobile chat section
     * ------------------------------------------------------ */

    .chat-section {
        min-height: auto;
        padding: 80px 5% 90px;
    }


    /* Mobile introduction spacing */

    .chat-intro {
        margin-bottom: 45px;
    }


    /* ------------------------------------------------------
     * Stack Savannah and chatbox vertically
     * ------------------------------------------------------ */

    .chat-area {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }


    /* ------------------------------------------------------
     * Mobile Savannah character
     * ------------------------------------------------------ */

    .chat-character {
        width: 100%;
        height: 420px;
        max-width: 360px;
    }


    /* Mobile Savannah image */

    .chat-character img {
        max-width: 90%;
        max-height: 420px;
    }


    /* ------------------------------------------------------
     * Mobile chatbox
     * ------------------------------------------------------ */

    .chat-box {
        width: 100%;
        height: 420px;
    }


    /* ------------------------------------------------------
     * Mobile message area
     * ------------------------------------------------------ */

    .chat-messages {
        padding: 24px 18px;
    }


    /* Mobile message width */

    .message {
        max-width: 88%;
    }


    /* ------------------------------------------------------
     * Mobile input area
     * ------------------------------------------------------ */

    .chat-input-area {
        padding: 12px;
    }


    /* Mobile input */

    .chat-input-area input {
        font-size: 13px;
    }


    /* Mobile send button */

    .chat-input-area button {
        padding: 0 16px;
    }


    /* ------------------------------------------------------
     * Mobile footer
     * ------------------------------------------------------ */

    .site-footer {
        padding: 28px 5%;
    }

}