/*
 * Creative & Enhanced Support Chat CSS (support.css) - v2025-05-07
 * Features: Fullscreen Layout, Creative Themes, Refined Typography & Spacing, Mic Button
 */

/* ===== Base & Font ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap');

:root {
    /* --- Font Variables --- */
    --chat-font-main: 'Inter', sans-serif;
    --chat-font-code: 'Fira Code', monospace;
    --chat-font-header: 'Inter', sans-serif; /* Using Inter for headers too for consistency, but bolder */

    /* --- Creative Light Theme --- */
    --chat-primary: #6C63FF; /* Vibrant Purple */
    --chat-primary-rgb: 108, 99, 255;
    --chat-secondary: #8A80FF; /* Lighter Purple */
    --chat-accent-warm: #FFAF63; /* Soft Orange */
    --chat-accent-cool: #63D4FF; /* Sky Blue */
    --chat-error-color: #FF6363; /* Soft Red */
    --chat-error-rgb: 255, 99, 99;

    --chat-modal-bg: #F8F9FA; /* Very light grey */
    --chat-modal-border: #E9ECEF;
    --chat-header-bg: #FFFFFF; /* White header */
    --chat-body-bg: #F8F9FA; /* Match modal bg */
    --chat-input-container-bg: #FFFFFF; /* White input area */
    --chat-input-bg: #F1F3F5; /* Slightly darker input */
    --chat-input-text: #343A40; /* Dark Grey text */
    --chat-input-placeholder: #868E96; /* Lighter Grey placeholder */

    --chat-user-message-bg: linear-gradient(135deg, var(--chat-primary), var(--chat-secondary));
    --chat-user-message-text: #FFFFFF;
    --chat-bot-message-bg: #FFFFFF; /* White bot messages */
    --chat-bot-message-text: #495057; /* Slightly softer dark grey */
    --chat-bot-message-border: #DEE2E6;

    --chat-avatar-bot-bg: linear-gradient(135deg, var(--chat-accent-cool), #8EE4FF); /* Cool blue gradient */
    --chat-avatar-user-bg: linear-gradient(135deg, var(--chat-accent-warm), #FFC88E); /* Warm orange gradient */
    --chat-avatar-text: #FFFFFF;

    --chat-button-bg: var(--chat-primary);
    --chat-button-hover-bg: #574EFF; /* Slightly darker purple */
    --chat-stop-button-bg: #E03131; /* Stronger Red */
    --chat-stop-button-hover-bg: #C92A2A;
    --chat-button-text: #FFFFFF;

    /* --- Layout & Transitions --- */
    --chat-border-radius-lg: 18px; /* Softer large radius */
    --chat-border-radius-md: 14px; /* Softer medium radius */
    --chat-border-radius-sm: 10px; /* Softer small radius */
    --chat-message-padding: 14px 20px; /* Generous padding */
    --chat-spacing-unit: 8px; /* Base unit for consistent spacing */

    --chat-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
    --chat-shadow-md: 0 5px 10px rgba(0, 0, 0, 0.06);
    --chat-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.08);

    --chat-transition-fast: 0.2s ease-in-out;
    --chat-transition-normal: 0.3s ease-in-out;
    --chat-transition-bounce: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Smooth bounce */
}

/* ===== Creative Dark Theme ===== */
body.dark-mode {
    --chat-primary: #8A80FF; /* Lighter Purple for dark */
    --chat-primary-rgb: 138, 128, 255;
    --chat-secondary: #A097FF; /* Even Lighter Purple */
    --chat-accent-warm: #FFC88E; /* Lighter Orange */
    --chat-accent-cool: #8EE4FF; /* Lighter Sky Blue */
    --chat-error-color: #FF8E8E; /* Lighter Soft Red */
    --chat-error-rgb: 255, 142, 142;

    --chat-modal-bg: #1A1D24; /* Deep Charcoal */
    --chat-modal-border: #2C313A;
    --chat-header-bg: #23272F; /* Slightly Lighter Header */
    --chat-body-bg: #1A1D24; /* Match modal */
    --chat-input-container-bg: #23272F; /* Match header */
    --chat-input-bg: #2C313A; /* Input Background */
    --chat-input-text: #E4E6EB; /* Light Grey text */
    --chat-input-placeholder: #767D8A; /* Medium Grey placeholder */

    --chat-user-message-bg: linear-gradient(135deg, var(--chat-primary), var(--chat-secondary));
    --chat-user-message-text: #1A1D24; /* Dark text on light bubble */
    --chat-bot-message-bg: #2C313A; /* Dark bot messages */
    --chat-bot-message-text: #CED4DB; /* Lighter grey for bot text */
    --chat-bot-message-border: #3A404A;

    --chat-avatar-bot-bg: linear-gradient(135deg, var(--chat-accent-cool), #B4F0FF); /* Lighter cool blue gradient */
    --chat-avatar-user-bg: linear-gradient(135deg, var(--chat-accent-warm), #FFDEB4); /* Lighter warm orange gradient */
    --chat-avatar-text: #23272F; /* Dark text on light avatars */

    --chat-button-bg: var(--chat-primary);
    --chat-button-hover-bg: #9F95FF; /* Brighter hover */
    --chat-stop-button-bg: #FF6B6B; /* Brighter Red */
    --chat-stop-button-hover-bg: #FF8E8E;
    --chat-button-text: #1A1D24; /* Dark text on light button */
}

/* ===== General Styles ===== */
body {
    font-family: var(--chat-font-main);
}

/* ===== Support Chat Button (Floating Action Button) ===== */
.chat-support-btn {
    position: fixed;
    bottom: calc(2 * var(--chat-spacing-unit) + 14px); /* 30px */
    right: calc(2 * var(--chat-spacing-unit) + 14px); /* 30px */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--gradient-primary, linear-gradient(135deg, var(--chat-primary), #8A80FF)); /* Use theme var */
    box-shadow: 0 6px 16px rgba(var(--chat-primary-rgb), 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1030;
    transition: all 0.4s var(--chat-transition-bounce);
    overflow: hidden;
    border: none;
    transform-style: preserve-3d;
    perspective: 600px;
}

.chat-support-btn:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 12px 20px rgba(var(--chat-primary-rgb), 0.4);
}

.chat-support-btn svg {
    width: 28px;
    height: 28px;
    color: white;
    transition: transform 0.5s var(--chat-transition-bounce);
}

.chat-support-btn:hover svg {
    transform: rotate(15deg) scale(1.1);
}

/* Chat Button Tooltip */
.chat-support-btn .chat-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: var(--chat-header-bg); /* Use theme bg */
    color: var(--chat-input-text); /* Use theme text */
    padding: var(--chat-spacing-unit) calc(1.5 * var(--chat-spacing-unit)); /* 8px 12px */
    border-radius: var(--chat-border-radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: var(--chat-shadow-md);
    opacity: 0;
    transition: all 0.3s var(--chat-transition-bounce);
    pointer-events: none;
    margin-bottom: calc(1.5 * var(--chat-spacing-unit)); /* 12px */
    border: 1px solid var(--chat-modal-border);
    /* backdrop-filter: blur(5px); /* Optional: subtle blur */
    z-index: 1;
}

/* Tooltip visibility on hover */
.chat-support-btn:hover .chat-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ===== Chat Modal Base (Fullscreen) ===== */
#supportChatModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Darker overlay */
    backdrop-filter: blur(10px); /* Increased blur */
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    z-index: 1050;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease-in-out; /* Slightly slower fade */
    padding: 0;
}

#supportChatModal.active {
    opacity: 1;
    pointer-events: all;
}

/* Modal Content (Fullscreen) */
#supportChatModal .chat-modal-content {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    background: var(--chat-modal-bg);
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: none;
    transition: none;
}

/* Modal Body */
#supportChatModal .chat-modal-body {
     height: 100%; /* Fill available space */
     display: flex;
     flex-direction: column;
     overflow: hidden;
}

/* Remove specific media query overrides for fullscreen */
@media (min-width: 576px) {
    #supportChatModal .chat-modal-content {
         /* Ensure fullscreen styles persist */
         height: 100%;
         border-radius: 0;
         transform: none;
         transition: none;
         opacity: 1;
    }
}

/* ===== Modal Header ===== */
#supportChatModal .chat-modal-header {
    background: var(--chat-header-bg);
    border-bottom: 1px solid var(--chat-modal-border);
    padding: calc(1.5 * var(--chat-spacing-unit)) calc(2.5 * var(--chat-spacing-unit)); /* 12px 20px */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    box-shadow: var(--chat-shadow-sm); /* Subtle shadow for depth */
}

#supportChatModal .chat-modal-header h3 {
    margin: 0;
    font-size: 1.2rem; /* Slightly larger */
    font-weight: 600; /* Bolder */
    color: var(--chat-input-text);
    font-family: var(--chat-font-header);
}

#supportChatModal .chat-close-modal {
    background: none;
    border: none;
    font-size: 1.8rem; /* Larger icon */
    line-height: 1;
    font-weight: 300; /* Lighter weight */
    width: 36px; /* Slightly larger tap target */
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--chat-input-placeholder);
    cursor: pointer;
    transition: all var(--chat-transition-fast);
    padding: 0;
}

#supportChatModal .chat-close-modal:hover {
    background-color: rgba(var(--chat-primary-rgb), 0.1);
    color: var(--chat-primary);
    transform: rotate(90deg) scale(1.1); /* Rotate and scale */
}

/* ===== Chat Messages Area ===== */
#supportChatModal .chat-messages {
    flex: 1; /* Grow */
    overflow-y: auto;
    padding: calc(2 * var(--chat-spacing-unit)); /* 16px */
    position: relative;
    padding-top: calc(6 * var(--chat-spacing-unit)); /* ~48px Space for sticky counter */
    background: var(--chat-body-bg);
    scrollbar-width: thin;
    scrollbar-color: var(--chat-secondary) transparent;
}

/* Custom Scrollbar */
#supportChatModal .chat-messages::-webkit-scrollbar { width: 8px; }
#supportChatModal .chat-messages::-webkit-scrollbar-track { background: transparent; border-radius: 4px; }
#supportChatModal .chat-messages::-webkit-scrollbar-thumb { background-color: rgba(var(--chat-primary-rgb), 0.5); border-radius: 4px; border: 2px solid var(--chat-body-bg); }
#supportChatModal .chat-messages::-webkit-scrollbar-thumb:hover { background-color: rgba(var(--chat-primary-rgb), 0.8); }

/* Message Bubbles Styling */
#supportChatModal .chat-message {
    display: flex;
    margin-bottom: calc(2.5 * var(--chat-spacing-unit)); /* 20px */
    animation: chatFadeIn 0.5s cubic-bezier(0.215, 0.610, 0.355, 1); /* Smoother fade */
    max-width: 85%; /* Slightly narrower */
    align-items: flex-end;
    gap: calc(1.5 * var(--chat-spacing-unit)); /* 12px */
}
#supportChatModal .chat-message.user { flex-direction: row-reverse; margin-left: auto; }
#supportChatModal .chat-message.bot { margin-right: auto; }

/* Avatar Styling */
#supportChatModal .chat-avatar {
    width: 36px; /* Slightly larger */
    height: 36px;
    border-radius: 50%;
    color: var(--chat-avatar-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8rem;
    flex-shrink: 0;
    box-shadow: var(--chat-shadow-sm);
    text-transform: uppercase;
    border: 2px solid rgba(255, 255, 255, 0.3); /* Subtle border */
}
body.dark-mode #supportChatModal .chat-avatar { border-color: rgba(0, 0, 0, 0.3); }
#supportChatModal .chat-message.user .chat-avatar { background: var(--chat-avatar-user-bg); }
#supportChatModal .chat-message.bot .chat-avatar { background: var(--chat-avatar-bot-bg); }

/* Message Content Styling */
#supportChatModal .chat-content {
    border-radius: var(--chat-border-radius-lg); /* Softer radius */
    padding: var(--chat-message-padding);
    position: relative;
    box-shadow: var(--chat-shadow-md); /* Slightly increased shadow */
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: calc(100% - 48px); /* Adjust for larger avatar + gap */
    border: 1px solid var(--chat-bot-message-border); /* Add subtle border to all */
    transition: all var(--chat-transition-fast);
    line-height: 1.6; /* More readable line height */
    font-size: 1rem; /* Slightly larger base font */
}
#supportChatModal .chat-content p { margin-bottom: 1em; } /* Space between paragraphs */
#supportChatModal .chat-content p:last-child { margin-bottom: 0; }

#supportChatModal .chat-message.user .chat-content {
    background: var(--chat-user-message-bg);
    color: var(--chat-user-message-text);
    border: none; /* Remove border for user bubble */
    border-bottom-right-radius: var(--chat-border-radius-sm); /* Tail */
}
#supportChatModal .chat-message.bot .chat-content {
    background: var(--chat-bot-message-bg);
    color: var(--chat-bot-message-text);
    border-color: var(--chat-bot-message-border);
    border-bottom-left-radius: var(--chat-border-radius-sm); /* Tail */
}

/* ===== Input Container ===== */
#supportChatModal .chat-input-container {
    display: flex;
    align-items: flex-end;
    padding: var(--chat-spacing-unit) calc(2 * var(--chat-spacing-unit)); /* 8px 16px */
    padding-bottom: calc(1.5 * var(--chat-spacing-unit)); /* 12px */
    border-top: 1px solid var(--chat-modal-border);
    background: var(--chat-input-container-bg);
    flex-shrink: 0;
    gap: calc(1.5 * var(--chat-spacing-unit)); /* 12px */
}

/* Microphone Button Styles */
#supportChatModal .chat-mic-btn {
    background: var(--chat-input-bg); /* Match input bg */
    border: 1px solid var(--chat-modal-border);
    color: var(--chat-input-placeholder);
    width: 42px; /* Match input height */
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--chat-transition-fast);
    padding: 0;
    position: relative;
    flex-shrink: 0;
    box-shadow: var(--chat-shadow-sm);
}
#supportChatModal .chat-mic-btn:hover {
    background-color: var(--chat-modal-border);
    color: var(--chat-primary);
    border-color: var(--chat-primary);
    transform: scale(1.05);
}
#supportChatModal .chat-mic-btn.listening {
    background-color: rgba(var(--chat-error-rgb), 0.1);
    color: var(--chat-error-color);
    border-color: var(--chat-error-color);
    animation: pulseMicBorder 1.5s infinite ease-in-out;
}
#supportChatModal .chat-mic-btn svg { width: 20px; height: 20px; }

/* Mic Tooltip */
#supportChatModal .mic-tooltip {
    position: absolute;
    bottom: 115%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--chat-input-text);
    color: var(--chat-input-bg);
    padding: 5px 10px;
    border-radius: var(--chat-border-radius-sm);
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    transition: opacity var(--chat-transition-fast);
    pointer-events: none;
    z-index: 1100;
}
#supportChatModal .chat-mic-btn:hover .mic-tooltip { opacity: 1; }

/* Mic Listening Indicator */
#supportChatModal .mic-listening-indicator {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 10px;
    height: 10px;
    background-color: var(--chat-error-color);
    border-radius: 50%;
    border: 1px solid var(--chat-modal-bg);
    display: none;
    animation: pulseMic 1.5s infinite ease-in-out;
    box-shadow: 0 0 5px var(--chat-error-color);
}
#supportChatModal .chat-mic-btn.listening .mic-listening-indicator { display: block; }

/* Input Field (Textarea) */
#supportChatModal #chatInput {
    flex: 1;
    border: 1px solid var(--chat-modal-border);
    outline: none;
    background: var(--chat-input-bg);
    color: var(--chat-input-text);
    padding: 10px 15px;
    border-radius: var(--chat-border-radius-md); /* Rounded */
    resize: none;
    font-family: var(--chat-font-main); /* Use main font */
    font-size: 1rem; /* Match message font size */
    line-height: 1.6;
    max-height: 120px; /* Allow slightly more height */
    min-height: 42px;
    overflow-y: auto;
    transition: all var(--chat-transition-fast);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); /* Subtle inset */
}
body.dark-mode #supportChatModal #chatInput { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); }
#supportChatModal #chatInput:focus {
    border-color: var(--chat-primary);
    box-shadow: 0 0 0 3px rgba(var(--chat-primary-rgb), 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.05);
}
#supportChatModal #chatInput::placeholder { color: var(--chat-input-placeholder); font-weight: 400; }
#supportChatModal #chatInput:disabled { background-color: var(--chat-modal-border); cursor: not-allowed; opacity: 0.7; }

/* Button Wrapper */
#supportChatModal .chat-button-wrapper { display: flex; align-items: center; justify-content: center; align-self: flex-end; height: 42px; }

/* General Input Button Styles (Send/Stop) */
#supportChatModal .chat-input-container button:not(.chat-mic-btn) {
    background: none; border: none; width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: all var(--chat-transition-fast); padding: 0; box-shadow: var(--chat-shadow-sm);
}
#supportChatModal .chat-input-container button:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none !important; }

/* Send Button */
#supportChatModal #sendChatBtn { background-color: var(--chat-button-bg); color: var(--chat-button-text); }
#supportChatModal #sendChatBtn:not(:disabled):hover { background-color: var(--chat-button-hover-bg); transform: scale(1.08) rotate(-5deg); box-shadow: var(--chat-shadow-md); }
#supportChatModal #sendChatBtn svg { width: 18px; height: 18px; transform: translateX(1px); }

/* Stop Button */
#supportChatModal #stopChatBtn { background-color: var(--chat-stop-button-bg); color: var(--chat-button-text); }
#supportChatModal #stopChatBtn:not(:disabled):hover { background-color: var(--chat-stop-button-hover-bg); transform: scale(1.08); box-shadow: var(--chat-shadow-md); }
#supportChatModal #stopChatBtn svg { width: 16px; height: 16px; }

/* ===== Sticky Message Counter ===== */
#supportChatModal .chat-status-container {
    position: sticky;
    top: 10px;
    align-self: flex-end;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.7); /* Darker background */
    padding: 4px 10px; /* Slightly more padding */
    border-radius: var(--chat-border-radius-sm);
    transition: background-color var(--chat-transition-fast);
    margin-bottom: var(--chat-spacing-unit); /* 8px */
    margin-right: var(--chat-spacing-unit); /* 8px */
    box-shadow: var(--chat-shadow-sm);
}
#supportChatModal .chat-message-counter {
    font-size: 0.8em; /* Slightly larger */
    font-weight: 500;
    color: #FFFFFF; /* White text */
    opacity: 0.95;
    transition: color var(--chat-transition-fast), opacity var(--chat-transition-fast);
}
#supportChatModal .chat-message-counter.status-ok { color: #A7F3D0; } /* Light Mint Green */
#supportChatModal .chat-message-counter.status-low { color: #FDE047; } /* Bright Yellow */
#supportChatModal .chat-message-counter.status-critical { color: #FFAAAA; font-weight: 600; } /* Light Pink/Red */

/* ===== Typing Indicator & Error Messages ===== */
#supportChatModal .typing-indicator { display: flex; align-items: center; padding: 8px 0; gap: 6px; }
#supportChatModal .typing-indicator span { width: 8px; height: 8px; background: var(--chat-avatar-bot-bg); border-radius: 50%; animation: chatTyping 1.4s infinite ease-in-out; opacity: 0.7; }
#supportChatModal .typing-indicator span:nth-child(1) { animation-delay: 0s; }
#supportChatModal .typing-indicator span:nth-child(2) { animation-delay: 0.25s; }
#supportChatModal .typing-indicator span:nth-child(3) { animation-delay: 0.5s; }

#supportChatModal .chat-content.streaming-content::after { content: ''; display: inline-block; width: 3px; height: 1.2em; background-color: var(--chat-primary); animation: chatBlink 1.1s infinite step-end; margin-left: 5px; vertical-align: text-bottom; border-radius: 1px; opacity: 0.9; }

#supportChatModal .chat-content .error-message { color: var(--chat-error-color); font-weight: 500; font-size: 0.9em; margin-top: 1em; padding: 10px 14px; background-color: rgba(var(--chat-error-rgb), 0.1); border-left: 4px solid var(--chat-error-color); border-radius: 0 var(--chat-border-radius-sm) var(--chat-border-radius-sm) 0; }

/* ===== Markdown Formatting ===== */
#supportChatModal .chat-content h3,
#supportChatModal .chat-content h4 { margin: 1em 0 0.5em; font-weight: 600; line-height: 1.3; font-family: var(--chat-font-header); }
#supportChatModal .chat-content h3 { font-size: 1.15em; }
#supportChatModal .chat-content h4 { font-size: 1.05em; opacity: 0.95; }

#supportChatModal .chat-content ul,
#supportChatModal .chat-content ol { margin: 0.7em 0 1em 28px; padding-left: 0; }
#supportChatModal .chat-content ul { list-style-type: '✓ '; } /* Custom bullet */
body.dark-mode #supportChatModal .chat-content ul { list-style-type: '✨ '; }
#supportChatModal .chat-content ol { list-style-type: decimal; }
#supportChatModal .chat-content li { margin-bottom: 0.6em; }

/* Creative Link Styling */
#supportChatModal .chat-content a {
    color: var(--chat-primary);
    text-decoration: none; /* Remove default underline */
    font-weight: 500; /* Make links slightly bolder */
    position: relative;
    transition: color var(--chat-transition-fast);
    padding-bottom: 1px; /* Space for the pseudo-element */
}
#supportChatModal .chat-content a::after {
    content: '';
    position: absolute;
    bottom: -2px; /* Position below text */
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--chat-accent-warm), var(--chat-primary));
    transition: width 0.3s ease-out;
}
#supportChatModal .chat-content a:hover {
    color: var(--chat-secondary); /* Optional: slightly change text color */
}
#supportChatModal .chat-content a:hover::after {
    width: 100%; /* Underline expands on hover */
}
/* Ensure user message links are readable */
#supportChatModal .chat-message.user .chat-content a {
    color: #FFFFFF; /* White link */
    text-decoration: underline; /* Add underline back for contrast */
    text-decoration-color: rgba(255, 255, 255, 0.7);
}
#supportChatModal .chat-message.user .chat-content a::after { display: none; } /* Hide gradient underline */
#supportChatModal .chat-message.user .chat-content a:hover {
    text-decoration-color: #FFFFFF;
}


#supportChatModal .chat-content code { background-color: rgba(var(--chat-primary-rgb), 0.1); padding: 0.2em 0.5em; border-radius: var(--chat-border-radius-sm); font-family: var(--chat-font-code); font-size: 0.9em; color: inherit; border: 1px solid rgba(var(--chat-primary-rgb), 0.15); }
#supportChatModal .chat-content pre { background-color: var(--chat-input-bg); border: 1px solid var(--chat-modal-border); padding: 1.2em; border-radius: var(--chat-border-radius-md); overflow-x: auto; margin: 1em 0; font-family: var(--chat-font-code); font-size: 0.9em; line-height: 1.5; box-shadow: var(--chat-shadow-sm); }
#supportChatModal .chat-content pre code { background-color: transparent; padding: 0; border-radius: 0; font-size: inherit; border: none; }
#supportChatModal .chat-content strong,
#supportChatModal .chat-content b { font-weight: 700; /* Bolder strong text */ }

/* ===== Responsive Adjustments ===== */
@media (max-width: 575px) {
    .chat-support-btn { bottom: 15px; right: 15px; width: 55px; height: 55px; }
    .chat-support-btn .chat-tooltip { display: none; }

    #supportChatModal .chat-messages { padding: calc(1.5 * var(--chat-spacing-unit)); padding-top: calc(5.5 * var(--chat-spacing-unit)); /* 12px top 44px */ }
    #supportChatModal .chat-input-container { padding: var(--chat-spacing-unit) calc(1.5 * var(--chat-spacing-unit)); gap: var(--chat-spacing-unit); }
    #supportChatModal #chatInput { font-size: 0.95rem; min-height: 40px; }
    #supportChatModal .chat-button-wrapper { height: 40px; }
    #supportChatModal .chat-input-container button { width: 38px; height: 38px; }
    #supportChatModal .chat-mic-btn { width: 40px; height: 40px; } /* Match input height */

    #supportChatModal .chat-message { max-width: 95%; margin-bottom: calc(2 * var(--chat-spacing-unit)); gap: var(--chat-spacing-unit); }
    #supportChatModal .chat-avatar { width: 32px; height: 32px; font-size: 0.7rem; }
    #supportChatModal .chat-content { padding: 12px 16px; font-size: 0.95rem; }

    #supportChatModal .chat-status-container { top: 8px; right: 10px; padding: 3px 8px; }
    #supportChatModal .chat-message-counter { font-size: 0.75em; }
}

/* ===== Animations ===== */
@keyframes chatFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes chatTyping { 0%, 100% { transform: scale(0.85); opacity: 0.5; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes chatBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes pulseMic { 0% { transform: scale(0.9); opacity: 0.8; } 50% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.8; } }
@keyframes pulseMicBorder { 0% { box-shadow: 0 0 0 0 rgba(var(--chat-error-rgb), 0.4); } 70% { box-shadow: 0 0 0 5px rgba(var(--chat-error-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--chat-error-rgb), 0); } }