/* Body Styles */
body {
    color: white;
    height: 100vh;
    padding-top: 4em;
    background-image: url("/static/images/background_stars.png");
}

/* Twinkling Star Styles */
.star {
    position: absolute;
    background: white;
    width: 2.5px;
    height: 2.5px;
    border-radius: 50%;
    animation: twinkle 2s infinite;
}

@keyframes twinkle {
    0% {
        opacity: 0.2;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.2;
    }
}

/* Shooting Stars Styles */
.shooting-star {
    position: absolute;
    width: 3px;
    height: 50px;
    background: linear-gradient(to bottom, white, rgba(255, 255, 255, 0));
    opacity: 1;
    transform-origin: top left;
}

@keyframes shooting {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Fonts */
@font-face {
    font-family: "Margarine";
    src: url("/static/fonts/Margarine-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Nunito";
    src: url("/static/fonts/Nunito-VariableFont_wght.ttf") format("truetype");
}

h5,
.tmBtn,
#btnReset,
#langSmith,
#intro-button,
#github-button,
#topic-text,
#shuffle-button,
#podcast-status,
#podcast-teaser-btn,
#podcast-full-btn {
    font-family: "Margarine";
}

#sendBtn {
    font-family: "Margarine";
    font-weight: bold;
}

.message-box,
.message-bot,
#test-message-text,
#user-input,
#topic-message {
    font-family: "Nunito";
}

/* Section Box Styles */
.section-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 1em;
}

/* Shared Layout Box Styles */
.layout-box {
    width: 90%;
    background: #111;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 2px solid rgb(33, 33, 33);
    position: relative;
    padding: 15px;
    z-index: 2;
}

/* Header Frame Styles */
.header-frame {
    height: auto;
}

#header-image {
    border-radius: 10px;
    border: 2px solid rgb(33, 33, 33);
}

/* Test Messages Frame Styles */
.test-messages-frame {
    margin-top: 1.9em;
}

.test-buttons button {
    padding: 0.2em 0.5em;
}

.test-message-display {
    padding: 10px;
    border-radius: 10px;
    background-image: url("../images/background.png");
    background-position: center -400px;
    border: 2px solid rgb(33, 33, 33);
    margin-top: 0.5em;
}

#test-message {
    border: 2px solid rgb(0, 145, 0);
    background-color: rgba(0, 95, 0, 0.85);
    padding: 4px 8px;
    border-radius: 10px;
    border-bottom-right-radius: 0px;
    height: 3.9em;
}

#test-message-text {
    font-style: italic;
    color: rgb(207, 235, 207);
}

.tmBtn {
    color: rgb(207, 235, 207);
}

/* Test Message Button Glow */
.tmBtn:not(:disabled) {
    position: relative;
    animation: glowEffect 0.5s infinite alternate ease-in-out;
    box-shadow: 0 0 10px rgba(51, 255, 0, 0.596); /* Subtle initial glow */
    border: 2px solid rgb(0, 145, 0);
    border-bottom-right-radius: 0px;
    background-color: rgba(0, 141, 0, 0.511);
}

/* Reset Button Styles */
#btnReset {
    border: 2px solid rgb(122, 0, 122);
    background-color: rgba(82, 0, 82, 0.7);
    border-top-left-radius: 0px;
}

@keyframes glowEffect {
    0% {
        box-shadow: 0 0 15px rgb(26, 255, 0, 1);
    }
    100% {
        box-shadow: 0 0 20px rgba(30, 255, 0, 0.114);
    }
}

/* Button Box Styles */
#button-box {
    margin-top: 0.6em;
}

#langSmith {
    width: 10em;
    background-color: rgb(28, 60, 58);
    border: 2px solid rgb(40, 85, 82);
    padding-right: 1em;
    border-bottom-left-radius: 0.7em;
}

#langSmith:hover {
    border: 2px solid rgb(29, 64, 62);
    background-color: rgb(18, 39, 38);
}

#langSmith img {
    width: 3em;
    margin-right: 0.3em;
}

#intro-button {
    border: 2px solid rgba(0, 110, 255, 0.329);
    background-color: rgba(0, 110, 255, 0.347);
}

#intro-button img {
    width: 1.5em;
    margin-right: 0.3em;
    border-radius: 0.1em;
}

#intro-button:hover {
    background-color: rgba(0, 110, 255, 0.196);
}

#github-button {
    border: 2px solid #6600ff;
    border-bottom-right-radius: 0.7em;
    background-color: #5117a8ad;
}

#github-button:hover {
    background-color: #6600ff54;
}

#github-button img {
    width: 1.2em;
    margin-right: 0.3em;
}

/* Chat Box Styles */
.chat-box {
    flex-grow: 1;
    display: flex;
    flex-direction: column-reverse; /* Ensures new messages appear at the bottom */
    justify-content: flex-start; /* Aligns older messages to the top */
    padding: 10px;
    font-size: 18px;
    background: #222;
    border-radius: 10px;
    overflow-y: auto; /* Enables vertical scrolling */
    scrollbar-width: none; /* Hides scrollbar in Firefox */
    -ms-overflow-style: none; /* Hides scrollbar in IE/Edge */
    background-image: url("../images/background.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: 2px solid rgb(33, 33, 33);
}

/* Hides scrollbar for WebKit browsers (Chrome, Safari) */
.chat-box::-webkit-scrollbar {
    display: none;
}

#chat-content {
    font-size: 0.9em;
}

/* Message Box Styles */
.message-box {
    color: rgb(207, 235, 207);
    border: 2px solid rgb(0, 145, 0);
    background-color: rgba(0, 95, 0, 0.85);
    padding: 4px 8px;
    margin-top: 7px;
    border-radius: 10px;
    border-bottom-right-radius: 0px;
    font-style: italic;
}

/* Message Bot Styles */
.message-bot {
    color: rgb(208, 181, 228);
    border: 2px solid rgb(122, 0, 122);
    background-color: rgba(65, 0, 65, 0.85);
    padding: 4px 8px;
    margin-top: 7px;
    border-radius: 10px;
    border-top-left-radius: 0px;
}

/* Input Area Styles */
.input-area {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

/* Input Field */
.input-area input {
    flex-grow: 1;
    border: none;
    padding: 10px;
    border-radius: 10px;
    background: linear-gradient(
            rgba(83, 83, 83, 0.833),
            rgba(83, 83, 83, 0.849)
        ),
        url("../images/background.png") no-repeat center center/cover;
    color: white;
    border: 2px solid rgb(33, 33, 33);
}

/* Send Button */
#sendBtn {
    background-color: #ffc107;
    color: black;
    font-weight: bold;
    padding: 0px 12px;
    font-size: 1.1em;
    border: 3px solid rgb(218, 134, 0);
    border-radius: 10px;
    transition: all 0.2s ease-in-out;
}

#sendBtn:hover {
    transform: scale(1.02);
}

#sendBtn:active {
    transform: scale(0.96);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#user-input {
    padding: 0.6em 0.8em;
}

#user-input::placeholder {
    color: rgb(170, 170, 170);
}

#user-input:focus {
    outline: none !important;
}

/* Topic Frame Styles */
.topic-not {
    font-size: 1.15em;
    font-style: italic;
    animation: pulseText 2.25s infinite;
}

.topic-set {
    font-size: 1.15em;
    font-style: italic;
    font-weight: 900;
    color: rgb(255, 204, 0);
    animation: topicGlow 0.75s infinite alternate ease-in-out;
}

@keyframes topicGlow {
    0% {
        text-shadow: 0 0 15px rgb(255, 217, 0);
    }
    100% {
        text-shadow: 0 0 20px rgba(255, 230, 0, 0.114);
    }
}

@keyframes pulseText {
    0% {
        opacity: 0.06;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        opacity: 0.06;
    }
}

.topic-message-display {
    padding: 10px;
    border-radius: 10px;
    background-image: url("../images/background.png");
    background-position: center -300px;
    height: 3.7em;
    border: 2px solid rgb(33, 33, 33);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#topic-message {
    color: rgb(208, 181, 228);
    border: 2px solid rgb(122, 0, 122);
    background-color: rgba(65, 0, 65, 0.85);
    padding: 4px 8px;
    border-radius: 10px;
    border-top-left-radius: 0px;
}

/* Nasa Images Styles */
.nasa-frame {
    margin-top: 2em;
}

.nasa-image {
    width: 100%;
    height: 30vh;
}

.nasa-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid rgb(33, 33, 33);
}

#shutter-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid rgb(33, 33, 33);
}

#shuffle-button {
    height: 2em;
    font-size: 0.7em;
    font-weight: 500;
    padding: 0.1em 0.6em 0 0.6em;
    border-radius: 0.5em;
    display: none;
    color: rgb(244, 191, 0);
    border: 2px solid rgb(255, 208, 0);
    background-color: rgba(141, 115, 0, 0.511);
    animation: shuffleGlow 0.75s infinite alternate ease-in-out;
}

@keyframes shuffleGlow {
    0% {
        box-shadow: 0 0 15px rgb(255, 217, 0);
    }
    100% {
        box-shadow: 0 0 20px rgba(255, 230, 0, 0.114);
    }
}

/* Mobile Frame Styles */
.mobile-frame {
    height: 80vh;
}

/* Podcast Frame Styles */
.podcast-frame {
    margin-top: 2em;
}

.podcast-box {
    height: 4.5em;
    padding: 0.7em;
    border-radius: 10px;
    background-image: url("../images/background.png");
    background-position: center -600px;
    border: 2px solid rgb(33, 33, 33);
}

.podcast-btn {
    height: 100%;
    width: 100%;
    font-size: 1em;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

#podcast-teaser-btn {
    color: rgb(255, 200, 0);
    border: 2px solid rgba(255, 208, 0, 0.514);
    background-color: rgba(141, 115, 0, 0.511);
}

.podcast-teaser-animate {
    border: 2px solid rgb(255, 208, 0) !important;
    background-color: rgba(227, 185, 0, 0.642) !important;
    animation: episodeGlow 0.65s infinite alternate ease-in-out;
}

#podcast-full-btn {
    color: rgb(255, 0, 0);
    border: 2px solid rgba(255, 0, 0, 0.614);
    background-color: rgba(141, 0, 0, 0.635);
}

#podcast-status {
    font-size: 1em;
    font-style: italic;
    font-weight: 700;
    display: none;
    color: rgb(49, 145, 255) !important;
    animation: podcastGlow 0.5s infinite alternate ease-in-out;
}

#podcast-status span {
    font-style: normal;
}

@keyframes podcastGlow {
    0% {
        text-shadow: 0 0 10px rgb(84, 164, 255), 0 0 20px rgb(84, 164, 255);
    }
    100% {
        text-shadow: 0 0 15px rgba(67, 170, 255, 0.9),
            0 0 25px rgba(67, 170, 255, 0.9);
    }
}

.podcast-full-animate {
    border: 2px solid rgb(255, 0, 0) !important;
    background-color: rgba(231, 0, 0, 0.63) !important;
    animation: episodeGlow 0.65s infinite alternate ease-in-out;
}

@keyframes episodeGlow {
    0% {
        box-shadow: 0 0 24px rgba(140, 165, 255, 0.795);
    }
    100% {
        box-shadow: 0 0 28px rgba(140, 177, 255, 0.199);
    }
}