/* Floating Button */
#ai-fab { position: fixed; bottom: 20px; right: 20px; width: 56px; height: 56px; background: #007bff; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1050; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }

/* Tooltip */
.ai-tooltip { position: fixed; bottom: 90px; right: 20px; max-width: 240px; background: #ffffff; color: #212529; border: 1px solid #dee2e6; border-radius: 8px; padding: 10px 12px; font-size: 13px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 1049; display: none; }
    .ai-tooltip::after { content: ""; position: absolute; bottom: -8px; right: 20px; border-width: 8px 8px 0; border-style: solid; border-color: #ffffff transparent transparent transparent; }
    .ai-tooltip.show { display: block; animation: aiFadeIn 0.2s ease-in; }

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

/* Floating Chat Popup (AdminLTE)*/
.ai-chat-popup { position: fixed !important; bottom: 70px; right: 20px; width: 360px; height: 480px; display: none; z-index: 1050; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); }
    /* Card body scroll area */
    .ai-chat-popup .chat-messages { height: 360px; overflow-y: auto; background: #f4f6f9; padding: 10px; }
    .ai-chat-popup .card-header > h3 { color: var(--bs-card-title-color) }
/* AdminLTE Direct Chat Messages*/
.direct-chat-msg { margin-bottom: 10px; }
.direct-chat-msg { animation: fadeIn 0.15s ease-in; }

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

.direct-chat-text { border-radius: 8px; padding: 8px 12px; max-width: 75%; word-wrap: break-word; font-size: 13px; }

/* User message (right aligned) */
.direct-chat-msg.user { display: flex; justify-content: flex-end; }
    .direct-chat-msg.user .direct-chat-text { background: #007bff; color: #ffffff; text-align: right; }

/* Bot message (left aligned) */
.direct-chat-msg.bot { display: flex; justify-content: flex-start; }
    .direct-chat-msg.bot .direct-chat-text { background: #ffffff; border: 1px solid #dee2e6; color: #212529; }

/* Typing Indicator */
.typing-indicator { display: flex; gap: 4px; padding: 8px; }
    .typing-indicator span { width: 8px; height: 8px; border-radius: 50%; background-color: #007bff; animation: bounce 1.4s infinite ease-in-out both; }
        .typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
        .typing-indicator span:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

#voiceInputBtn.listening { background-color: #dc3545; border-color: #dc3545; animation: pulse 1.5s infinite; }

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

#voiceLanguageSelect { max-width: 200px; }
#autoSpeakToggle.active { color: #28a745; }
.message-with-speaker { position: relative; }

.speaker-icon { position: absolute; right: 5px; top: 5px; cursor: pointer; opacity: 0.6; transition: opacity 0.2s; font-size: 0.875rem; }
    .speaker-icon:hover,
    .speaker-icon:focus { opacity: 1; outline: 2px solid #007bff; outline-offset: 2px; }
    .speaker-icon.speaking { color: #17a2b8; animation: pulse 1.5s infinite; }

/* Accessibility improvements */
.chat-messages { scroll-behavior: smooth; }
.btn:focus { outline: 2px solid #007bff; outline-offset: 2px; }

/* Screen Reader Only Content */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Skip Link for Keyboard Navigation */
.skip-link { position: absolute; top: -40px; left: 0; background: #007bff; color: white; padding: 8px; text-decoration: none; z-index: 100000; }

    .skip-link:focus { top: 0; outline: 3px solid #ffc107; outline-offset: 2px; }

/* Typing Indicator */
.typing-indicator { display: flex; gap: 4px; padding: 8px; }

    .typing-indicator span { width: 8px; height: 8px; border-radius: 50%; background-color: #007bff; animation: bounce 1.4s infinite ease-in-out both; }

        .typing-indicator span:nth-child(1) { animation-delay: -0.32s; }

        .typing-indicator span:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* Voice Input Active State */
#voiceInputBtn.listening { background-color: #dc3545; border-color: #dc3545; animation: pulse 1.5s infinite; }

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

#voiceLanguageSelect { max-width: 200px; }

/* Auto-speak Active State */
#autoSpeakToggle.active { color: #28a745; background-color: rgba(40, 167, 69, 0.1); }

/* Speaker Icon Styling */
.message-with-speaker { position: relative; }

.speaker-icon { position: absolute; right: 5px; top: 5px; cursor: pointer; opacity: 0.7; transition: opacity 0.2s, transform 0.2s; font-size: 0.875rem; background: transparent; border: none; padding: 4px 8px; border-radius: 4px; }

    .speaker-icon:hover,
    .speaker-icon:focus { opacity: 1; transform: scale(1.1); outline: 2px solid #007bff; outline-offset: 2px; background-color: rgba(0, 123, 255, 0.1); }

    .speaker-icon.speaking { color: #17a2b8; animation: pulse 1.5s infinite; }

/* Unstyled Button */
.btn-unstyled { background: none; border: none; padding: 0; cursor: pointer; }

/* Enhanced Focus Indicators */
button:focus,
input:focus,
select:focus,
textarea:focus,
[role="button"]:focus { outline: 3px solid #007bff; outline-offset: 2px; }

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .speaker-icon { opacity: 1; border: 2px solid currentColor; }

    button:focus,
    input:focus,
    select:focus { outline-width: 4px; }

    .typing-indicator span { background-color: #000; }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .typing-indicator span,
    #voiceInputBtn.listening,
    .speaker-icon.speaking { animation: none; }

    .speaker-icon:hover,
    .speaker-icon:focus { transform: none; }

    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Chat Messages Scrolling */
.chat-messages { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    .chat-messages { scroll-behavior: auto; }
}

/* Improved Color Contrast */
.text-muted { color: #6c757d !important; }

@media (prefers-contrast: high) {
    .text-muted { color: #000 !important; }
}

/* Touch Target Size (Mobile Accessibility) */
@media (max-width: 768px) {
    .btn,
    .speaker-icon,
    select { min-height: 44px; min-width: 44px; }
}

/* Focus Visible (Modern Browsers) */
button:focus-visible,
input:focus-visible,
select:focus-visible { outline: 3px solid #007bff; outline-offset: 2px; }

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .direct-chat-text { color: #f8f9fa; }

    .typing-indicator span { background-color: #6ea8fe; }
}

.ai-chat-popup .card-header > h3 { color: #FFFFFF; }