/* chat-popup.css */
#chat-icon { cursor: pointer; }

/* Styling for the Send button */
#send-button {
    background-color: rgba(237, 27, 36, 1);
    color: white; /* Text color */
    padding: 5px 10px; /* Padding for button */
    border-radius: 5px; /* Rounded corners */
    border: none; /* No border */
    cursor: pointer; /* Pointer cursor on hover */
    font-size: 14px; /* Font size */
    margin-top: 5px; /* Margin on the top for spacing */
}
#send-button:hover {
    background-color: rgba(237, 27, 36, 0.8); /* Darker on hover for interaction feedback */
}

/* Style the Close button (mdash) at the top-right corner */
#close-chat {
    pointer-events: auto; /* Ensures that the element is clickable */
    font-family: Arial, sans-serif;
    color: #666; /* Color of the mdash */
    opacity: 0.6; /* Makes the button slightly transparent */
}
#close-chat:hover {
    color: #333; /* Darker color on hover for better interaction feedback */
    opacity: 1; /* Fully opaque on hover */
}

/* Styling the chat text */
.user-input {
    font-family: Arial, sans-serif;
    font-weight: normal;
    font-size: 13px;
    background-color: rgba(81, 179, 205, 0.1); /* Light blue with 10% opacity */
    padding: 5px;
    margin: 2px 0;
    border-radius: 4px;
    text-align: right;
}
.response {
    background-color: rgba(144, 238, 144, 0.1); /* Light green with 10% opacity */
    font-family: Arial, sans-serif;
    font-weight: normal;
    font-size: 14px;
    padding: 5px;
    margin: 2px 0;
    border-radius: 4px;
    text-align: left;
}
.user-input::before, .response::before {
    font-weight: 800;
    font-family: Arial, sans-serif;
    font-size: 10px;
    display: block;   /* Makes the content appear on its own line */
    padding-right: 4px;
    margin-bottom: 2px;
    text-align: left;
}
.user-input::before {
    content: "• Guest •";
}
.response::before {
    content: "• CTAA •";
}

/* Styling for all links */
#chat-window a, 
#chat-window a:link, 
#chat-window a:visited {
    font-weight: bold;
    color: red; /* Red color for normal and visited links within the chat window */
}
#chat-window a:hover {
    color: #32388d; /* Dark blue color when hovering over the links */
}

/* Styling for outer chat window and chat history borders (ctaa red and blue) */
@keyframes glow-animation {
    0%, 1%, 2%, 6%, 7%, 8%, 16%, 17%, 18%, 50%, 51%, 52%, 100% {
        box-shadow: 0 0 10px rgba(237, 27, 36, 0.8), 0 0 10px rgba(58, 56, 140, 0.6);
    }
    0.5%, 1.5%, 6.5%, 7.5%, 16.5%, 17.5%, 50.5%, 51.5% {
        box-shadow: 0 0 15px rgba(237, 27, 36, 1), 0 0 15px rgba(237, 27, 36, .8);
    }
}
#chat-window {
    border-left: 2px solid rgba(237, 27, 36, 1);
    border-top: 2px solid rgba(237, 27, 36, 1);
    border-right: 2px solid rgba(237, 27, 36, 1);
    border-bottom: 2px solid rgba(237, 27, 36, 1);
    animation: glow-animation 60s infinite;
}
#chat-history {
    border-left: 2px solid rgba(58, 56, 140, 1);
    border-top: 2px solid rgba(58, 56, 140, 1);
    border-right: 2px solid rgba(58, 56, 140, 1);
    border-bottom: 2px solid rgba(58, 56, 140, 1);
}