/* space.css - Optimized Version */

/*------------------------------------*\
    CSS Custom Properties (Theme Variables)
\*------------------------------------*/


/*------------------------------------*\
    Global Resets & Base Styles
\*------------------------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: var(--font-size-base);
    font-family: var(--font-family-base);
}

body {
    background-color: var(--body-bg-color);
    color: var(--primary-accent-color); /* Default text color for body */
    direction: rtl; /* Set default direction to RTL */
}

/*------------------------------------*\
    General Page Layout Elements (May not be chat specific)
\*------------------------------------*/
.header { /* This seems like a general page header, not chat-specific */
    height: 50%; /* Assuming this is for a specific non-chat layout part */
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    padding: 50px 0;
    z-index: 3;
    overflow: hidden;
}

#video { /* Background video */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1; /* Lower z-index if content should be above it */
}

.bottomBar { /* General bottom bar, may not be related to chat input */
    height: 40px;
    width: 100%;
    position: fixed;
    bottom: 10px;
    left: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    z-index: 5;
    overflow: hidden;
    cursor: pointer;
}

/*------------------------------------*\
    Chat Area Layout
\*------------------------------------*/
.chat {
    height: calc(100vh - var(--chat-height-offset)); /* Adjusted for input bar */
    width: 100%;
    position: fixed;
    bottom: var(--chat-height-offset); /* Position above input bar */
    left: 0;
    display: flex;
    flex-direction: column-reverse; /* New messages at bottom, scroll up */
    padding: 20px 0;
    z-index: 3;
    overflow-y: auto;
    background-color: var(--chat-bg-color);
}

.container { /* General content container, used in chat */
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    padding: 10px 20px;
}

.content { /* Container for all messages */
    display: flex;
    flex-direction: column; /* Will be reversed by .chat's column-reverse */
    gap: 10px;
    width: 100%;
    position: relative;
    /* direction: rtl; /* Inherited from body, but can be reinforced */
    padding: 10px 0; /* Original padding from first CSS block for content */
}

/*------------------------------------*\
    Profile Display at Top of Chat
\*------------------------------------*/
.image-container { /* Wrapper for profile image and name at top */
    /*margin-bottom: 10vh;  Pushes image down, adjust as needed */
    text-align: center;
    /* margin-top: 20px; from HTML, can be added here if always needed */
}

.cover-img { /* Large profile image */
    width: 90%;
    /*border-radius: var(--border-radius-circle);*/
    object-fit: cover;
    border: 3px solid var(--bot-avatar-border);
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    margin-bottom: 10px; /* From first CSS block .profile-img */
}

.profile-img { /* Large profile image */
    width: 200px;
    height: 200px;
    border-radius: var(--border-radius-circle);
    object-fit: cover;
    border: 3px solid var(--bot-avatar-border);
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    margin-bottom: 10px; /* From first CSS block .profile-img */
}



.bot-name { /* Bot name display */
    font-size: 1.5em;
    font-weight: bold;
    color: var(--text-color-light); /* e.g., #e9e5e5 */
    margin-bottom: 5px;
}

/*------------------------------------*\
    Chat Input Area
\*------------------------------------*/
.chat-input-container {
    min-height: var(--input-bar-height);
    height: auto;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 16px;
    background-color: var(--chat-container-bg);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.chat-input-wrapper {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    width: 100%;
    flex-direction: row-reverse;
}

.chat-input {
    flex: 1;
    border-radius: var(--border-radius-rounded);
    border: 1px solid var(--input-border-color);
    background: var(--input-bg-color);
    font-size: var(--font-size-input);
    transition: all 0.3s ease;
    /* direction: rtl; Already set globally */
    text-align: right;
    padding: 12px 20px 12px 20px; /* RTL: padding right for potential icon, left for text start */
    min-width: 100px; /* Ensure it doesn't collapse too much */
}

.chat-input:focus {
    outline: none;
    border-color: var(--input-focus-border-color);
    background: var(--input-focus-bg-color);
    box-shadow: var(--box-shadow-medium);
}

.chat-send-button {
    background: var(--primary-accent-color);
    color: var(--input-bg-color); /* Light icon on dark button */
    border: none;
    border-radius: var(--border-radius-circle);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative; /* For icon positioning */
    flex-shrink: 0; /* Prevent shrinking */
}

.chat-send-button:hover {
    transform: scale(1.05); /* Keep consistent hover scale */
}

.chat-send-button svg { /* General styling for icons inside */
    width: 20px; /* from HTML */
    height: 20px; /* from HTML */
    stroke-width: 2; /* from HTML */
    transition: all 0.3s ease;
    position: absolute; /* For smooth transition between mic and send */
}

.chat-send-button .mic-icon {
    opacity: 1;
    transform: scale(1);
}


.chat-send-button.has-text .mic-icon {
    opacity: 0;
    transform: scale(0.5);
}
/*
.chat-send-button .send-icon {
    opacity: 0;
    transform: scale(0.5);
}
.chat-send-button.has-text .send-icon {
    opacity: 1;
    transform: scale(1);
}*/

/* Recording Styles */
.recording-timer {
    position: absolute;
    top: 0;
    left: 0; /* Should be right: 0 for RTL or cover full input */
    width: 100%;
    height: 100%; /* Cover the input field space */
    padding: 12px 20px;
    border-radius: var(--border-radius-rounded);
    background: #2A2A2A; /* Darker than input container */
    color: white;
    display: flex;
    align-items: center;
    gap: 8px;
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    /* direction: rtl; is inherited */
}

.chat-input-wrapper.recording .chat-input { /* Assuming .recording is added to wrapper */
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.chat-input-wrapper.recording .recording-timer {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.recording-dot {
    width: 8px;
    height: 8px;
    background: white;
    border-radius: var(--border-radius-circle);
    animation: blink 1s infinite;
}

.timer-text {
    font-weight: 500;
    letter-spacing: 1px;
}

.chat-send-button.recording { /* When send button itself is in recording state */
    background: var(--primary-accent-active-record);
    animation: pulse 1.2s ease infinite;
}

.chat-send-button.recording::before { /* Ripple effect for recording */
    content: '';
    position: absolute;
    width: 56px;
    height: 56px;
    border-radius: var(--border-radius-circle);
    background: rgba(255, 45, 85, 0.55);
    animation: ripple 1.2s ease-out infinite;
    z-index: -1; /* Behind the icon */
}

/* Plus Button & Menu */
.plus-button {
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius-circle);
    background-color: transparent;
    /*border: solid 1px var(--input-border-color);*/
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-color-dark);
    padding: 0; /* Remove default padding */
    flex-shrink: 0;
}
.plus-button:hover {
    background-color: green;
}
.plus-button svg {
    width: 28px; /* Adjusted from original 32px based on one of the definitions */
    height: 28px;
    /*stroke: currentColor;*/
}

.chat-menu {
    position: absolute;
    bottom: calc(100% + 5px); /* Position above the input bar */
    left: 0; /* For RTL, consider right: 0; or adjust based on plus button position */
    background-color: var(--button-secondary-bg); /* Use consistent bg */
    border: 1px solid var(--input-border-color);
    border-radius: var(--border-radius-standard);
    padding: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 101;
    display: none;
    flex-direction: column;
    gap: 10px;
    min-width: 200px; /* Example min-width */
}
.chat-menu.active {
    display: flex;
}
.chat-menu label { /* Style for labels within the menu */
    display: block;
    padding: 5px 0;
    color: var(--text-color-dark);
}

/* Toggle Switch in Menu */
.switch-container {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start; /* Default, good for RTL too if items are ordered correctly */
    margin-bottom: 15px; /* From one of the original definitions */
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px; /* Consistent height */
    flex-shrink: 0;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--slider-bg);
    transition: .4s;
    border-radius: var(--border-radius-rounded); /* Use variable */
}
.slider:before {
    position: absolute;
    content: "";
    height: 19px; /* Adjusted for 25px height */
    width: 19px;  /* Adjusted for 25px height */
    left: 3px;    /* Adjusted */
    bottom: 3px;  /* Adjusted */
    background-color: var(--slider-thumb-bg);
    transition: .4s;
    border-radius: var(--border-radius-circle);
}

input:checked + .slider {
    background-color: var(--slider-bg-checked);
}
input:checked + .slider:before {
    transform: translateX(24px); /* (50px width - 4px*2 padding/margin - 18px thumb) roughly */
}

.visibilitylabel { /* Label for the toggle switch */
    /* margin-left: 8px; /* For LTR. For RTL, use margin-right if needed, or rely on gap */
    font-size: var(--font-size-base); /* Make it consistent */
    font-weight: bold;
    color: var(--text-color-dark);
    /* align-self: flex-start;  Ensure it aligns with the switch */
}

/*------------------------------------*\
    Message Styling (Using .outer-container theme)
\*------------------------------------*/
/*
   Note: Historical messages in view_space.html use .message-wrapper and .message-bubble,
   styled by inline <style> tags in that HTML file.
   The following styles are for dynamically added messages or if .outer-container is used.
*/

.message-container { /* Wraps the actual text/content within a bubble */
    position: relative; /* For absolutely positioned elements like edit buttons if inside */
    word-wrap: break-word;
    margin: 0;
    /* Style for markdown content */
}

.message-content {

    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    line-height: 1.4;
    word-break: break-word;
    direction: inherit;

}

.message-container strong { /* Bold from **text** */
    color: #000000; /* Example: Darker for emphasis, adjust as per theme */
    font-weight: bold; /* Standard bold */
}
.message-container em { /* Italics from *text* */
    color: #000000; /* Example: Darker for emphasis */
    font-style: italic; /* Standard italic */
}
.message-container h1 {
    color: #ff4444; /* Crimson from original */
    text-shadow: 0 0 8px #ff4444; /* Glow effect */
    text-align: center;
    font-size: 1.5em; /* Example size */
    margin: 0.5em 0;
}

.content .outer-container {
    max-width: 90%; /* Default max-width, can be overridden by .sent/.received */
    padding: 12px 16px;
    border-radius: 20px; /* More rounded than WhatsApp-like */
    position: relative;
    word-wrap: break-word;
    animation: fadeIn 0.3s ease;
    box-shadow: var(--box-shadow-soft);
    /* margin-right: 20px; /* Space for avatar for received, handled by avatar itself */
}

.outer-container.sent {
    background: var(--message-sent-bg);
    color: var(--message-sent-text);
    border-top-left-radius: 4px; /* Tail effect */
    align-self: flex-start; /* Pushes to left in RTL (flex-end in LTR) */
    margin-left: auto; /* Pushes to left in RTL */
    font-size: var(--font-size-message-sent);
}

.outer-container.received {
    background: var(--message-received-bg);
    color: var(--message-received-text);
    border-top-right-radius: 4px; /* Tail effect */
    align-self: flex-end; /* Pushes to right in RTL (flex-start in LTR) */
    margin-right: auto; /* Pushes to right in RTL */
    font-size: var(--font-size-message-received);
    padding-left: 60px; /* Space for the absolutely positioned avatar on the left */
}

.bot-avatar { /* For .outer-container.received messages */
    width: 50px;
    height: 50px;
    border-radius: var(--border-radius-circle);
    border: 2px solid var(--bot-avatar-border);
    box-shadow: var(--box-shadow-soft);
    object-fit: cover;
    top: -2px; /* Slight overlap or alignment with top of bubble */
    left: 5px;  /* Positioned on the left side of the received bubble (RTL context) */
    z-index: 1;
}

/* Timestamp - generic styling if a .timestamp class is added */
.timestamp {
    font-size: var(--font-size-timestamp);
    color: var(--text-color-placeholder); /* Softer color */
    margin-top: 8px;
    display: block;
    text-align: left; /* Timestamps typically LTR or aligned to one side */
}
.outer-container.sent .timestamp {
    text-align: right; /* Or inherit */
}

/* Message Content: Images and Audio */
.message-content img {
    max-width: 100%;
    border-radius: var(--border-radius-standard);
    margin-top: 8px;
    display: block;
}
.message-content audio {
    width: 100%;
    margin-top: 8px;
    height: 40px; /* Compact player */
    /* Add filter for better contrast on dark/light bubbles if needed */
}

/* Audio Bubble Specific Styles (if not using default <audio>) */
.audio-bubble { /* This is for custom audio player UI */
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px !important; /* Overrides .outer-container padding if used on same element */
    min-width: 200px;
}
.audio-play {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--border-radius-circle);
    transition: all 0.2s ease;
    color: inherit; /* Inherit color from parent bubble */
}
.outer-container.sent .audio-play {
    color: #696969; /* Specific color from original */
}
.outer-container.received .audio-play {
    color: #ffffff; /* Specific color from original */
}
.audio-play:hover {
    background: rgba(255, 255, 255, 0.1); /* Subtle hover for received */
}
.outer-container.sent .audio-play:hover {
    background: rgba(0, 0, 0, 0.05); /* Subtle hover for sent */
}
.waveform {
    flex: 1;
    height: 32px;
    background: rgba(145, 154, 159, 0.63); /* Neutral color for waveform */
    border-radius: 16px;
}
.audio-bubble audio { /* Hide the default player if using custom UI */
    display: none;
}

/* Message Action Buttons (Edit, Delete, Regenerate) */
.button-container {
    position: absolute;
    top: -15px; /* Position above the bubble */
    /* For RTL, buttons might appear on the right side of the bubble */
    right: 10px; /* Adjust if LTR is primary: left: 10px; */
    display: flex;
    gap: 8px; /* Spacing between buttons */
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}
.message-bubble:hover .button-container {
    opacity: 1;
}

.regenerate-button,
.delete-button,
.edit-button {
    background-color: rgba(255, 255, 255, 0.9); /* Brighter, more opaque */
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: var(--border-radius-circle);
    cursor: pointer;
    width: 28px;
    height: 28px;
    box-shadow: var(--box-shadow-soft);
    color: var(--text-color-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px; /* Icon size */
}
.regenerate-button {
    font-size: 18px; /* Slightly larger icon */
}
.regenerate-button:hover,
.delete-button:hover,
.edit-button:hover {
    background-color: white;
    border-color: rgba(0, 0, 0, 0.3);
}
.delete-button:hover {
    background-color: var(--primary-accent-color); /* Red for delete */
    color: white;
}

/* Edit Textarea within Message */
.message-container .edit-textarea, /* If directly in message-container */
.edit-textarea { /* General class for standalone use */
    width: 100%;
    min-height: 100px; /* Reduced from 200px for a more compact default */
    max-height: 400px; /* Reduced from 600px */
    margin: 5px 0;
    padding: 10px; /* More padding */
    font-size: 1em; /* Relative to parent bubble */
    background: #677689; /* Specific background from original */
    color: white;
    border: 1px solid #506070; /* Added border */
    border-radius: var(--border-radius-standard);
    resize: vertical; /* Allow vertical resize */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #12e7f2 #506070; /* Thumb and track */
}
.edit-textarea::placeholder {
    color: rgba(255,255,255,0.7);
}

/* Version Buttons (for edited messages) */
.version-buttons {
    display: flex;
    gap: 10px;
    margin-right: 15px; /* For RTL, this should be margin-left if on the other side */
    /* Typically placed alongside save/cancel for edit */
}
.version-buttons button {
    width: 20px;
    height: 20px;
    border-radius: var(--border-radius-circle);
    border: 1px solid var(--input-border-color);
    background-color: white;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-color-dark);
}
.version-buttons button.selected {
    background-color: var(--primary-accent-color);
    color: white;
    border-color: var(--primary-accent-color);
}

/*------------------------------------*\
    Lightbox / Modal Popups
\*------------------------------------*/
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 2000; /* Higher than chat input */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px; /* Padding for small screens */
}
.lightbox.show {
    display: flex;
}
.lightbox .wrapper {
    background-color: white;
    padding: 30px;
    border-radius: var(--border-radius-standard);
    text-align: center;
    max-width: 400px;
    width: 100%; /* Take full width up to max-width */
    color: var(--text-color-dark); /* Text color inside lightbox */
    direction: rtl; /* Ensure RTL for content */
}
.lightbox .g_text { /* Google-style text */
    margin-bottom: 15px;
    line-height: 1.6;
}
.lightbox .g_button { /* Google-style button */
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 10px;
    /* Specific styling for Google button is in HTML, e.g. #sign-in-button */
}
#sign-in-button strong { /* Styling for the Google 'G o o g l e' text */
    font-weight: bold;
}
.g-blue{color:#4285F4}.o-red{color:#DB4437}.o-yellow{color:#F4B400}.l-green{color:#0F9D58}

/*------------------------------------*\
    Character Creation Form (Separate Component Styling)
\*------------------------------------*/
.form-container {
    font-family: var(--font-family-base);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f5f5f5; /* Light background for form page */
    padding: 20px;
    /* direction: rtl; /* Already global */
}
.character-form {
    background: white;
    padding: 2rem;
    border-radius: var(--border-radius-standard);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px;
    color: var(--text-color-dark);
}
.character-form h2 {
    text-align: center;
    color: var(--primary-accent-color);
    margin-bottom: 2rem;
}
.form-group {
    margin-bottom: 1.5rem;
}
.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-color-medium);
    font-weight: bold;
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid var(--input-border-color);
    border-radius: 5px;
    font-size: 1rem; /* Form font size */
    font-family: var(--font-family-base);
    background-color: white; /* Ensure bg for inputs */
    color: var(--text-color-dark); /* Text color for inputs */
}
.form-group textarea {
    height: 100px;
    resize: vertical;
}
.form-group input[type="file"] {
    padding: 0.5rem 0; /* Specific padding for file input */
}
.character-form select { /* Custom select arrow */
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    /* For RTL, arrow on left */
    background-position: left 1rem center;
    background-size: 1em;
    padding-left: 2.5em; /* Make space for the arrow */
}

button[type="submit"].form-submit-button { /* More specific class for form submit */
    width: 100%;
    padding: 0.8rem; /* Consistent padding */
    background-color: var(--primary-accent-color);
    color: white;
    border: none;
    border-radius: var(--border-radius-standard); /* Consistent radius */
    font-size: 1.2rem; /* Adjusted size */
    cursor: pointer;
    transition: background-color 0.3s;
    box-shadow: var(--box-shadow-soft);
}
button[type="submit"].form-submit-button:hover {
    background-color: var(--primary-accent-hover);
}

/*------------------------------------*\
    Utility & Animations
\*------------------------------------*/
.new-chat-button { /* From original, if used in chat menu or elsewhere */
    background-color: var(--primary-accent-color);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 15px; /* Slightly adjusted */
    font-size: 1em; /* Relative size */
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.new-chat-button:hover {
    background-color: var(--primary-accent-hover);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes blink { /* For recording dot */
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@keyframes pulse { /* For recording send button */
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes ripple { /* For recording send button ::before */
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(1.4); opacity: 0; }
}

/* Hover effect for messages (if desired, from original) */
.content .outer-container:hover {
    transform: scale(1.01);
    transition: transform 0.2s ease;
}


/* Ensure footer is hidden as per original HTML comment */
footer {
    display: none;
}

.loading-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    height: 60px;
    position: relative;
}

.loading-indicator::after {
    content: ".";
    font-size: 2.2em; /* Slightly larger for prominence */
    font-weight: 800;
    color: var(--primary-accent-color); /* Richer dark red base */
    animation: dots 1.5s infinite ease-in-out; /* Smoother timing */
    letter-spacing: 0.3em; /* Add spacing for elegance */
    transform-origin: center;
}

@keyframes dots {
    0% { 
        color: var(--primary-accent-color); /* Dark red */
        text-shadow: 0.3em 0 0 var(--primary-accent-color), 0.6em 0 0 var(--primary-accent-color); 
        transform: scale(1);
    }
    25% { 
        color: var(--text-color-medium); /* Brighter red */
        text-shadow: 0.3em 0 0 var(--text-color-medium), 0.6em 0 0 var(--text-color-medium); 
        transform: scale(1.1); /* Slight bounce */
    }
    50% { 
        color: var(--primary-accent-color); 
        text-shadow: 0.3em 0 0 var(--primary-accent-color), 0.6em 0 0 var(--primary-accent-color); 
        transform: scale(1);
    }
    75% { 
        color: var(--text-color-medium); 
        text-shadow: 0.3em 0 0 var(--text-color-medium), 0.6em 0 0 var(--text-color-medium); 
        transform: scale(1.1);
    }
    100% { 
        color: var(--primary-accent-color); 
        text-shadow: 0.3em 0 0 var(--primary-accent-color), 0.6em 0 0 var(--primary-accent-color); 
        transform: scale(1);
    }
}

/*------------------------------------*\
    Temporary Info/Error Messages
\*------------------------------------*/
.info-message, .error-message {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 25px;
    border-radius: 8px;
    color: white;
    z-index: 1001;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, bottom 0.3s ease-in-out;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
}

.info-message {
    background-color: rgba(92, 184, 92, 0.9); /* Green for success/info */
}

.error-message {
    background-color: rgba(217, 83, 79, 0.9); /* Red for error */
}