/**
 * Giannis AI Chatbot - WordPress Plugin Styles
 * Version: 1.1.0 - WITH TYPING INDICATOR FIX
 * 
 * This stylesheet ensures the chatbot interface maintains its design
 * even when embedded in WordPress sites with aggressive theme styles
 * 
 * INCLUDES: Emoji text visibility fix + Horizontal typing dots fix
 */

/* ================================================
   ROOT VARIABLES - Scoped to plugin wrapper
   ================================================ */
.giannis-chatbot-wrapper {
    /* IRC Color Palette */
    --irc-black: #000000;
    --irc-yellow: #FFC20E;
    --irc-dark-grey: #333333;
    --irc-light-grey: #F2F2F2;
    --irc-white: #FFFFFF;

    /* Extended Yellow Palette */
    --yellow-50: #fffbeb;
    --yellow-100: #fef3c7;
    --yellow-200: #fde68a;
    --yellow-300: #fcd34d;
    --yellow-400: #fbbf24;
    --yellow-500: #FFC20E;
    --yellow-600: #d97706;
    --yellow-700: #b45309;
    --yellow-800: #92400e;
    --yellow-900: #78350f;

    /* Neutral Palette */
    --gray-50: #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #e5e5e5;
    --gray-300: #d4d4d4;
    --gray-400: #a3a3a3;
    --gray-500: #737373;
    --gray-600: #525252;
    --gray-700: #404040;
    --gray-800: #262626;
    --gray-900: #171717;

    /* Semantic Colors */
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #3b82f6;

    /* UI Variables - Light Mode */
    --bg-body: #f8f9fa;
    --bg-sidebar: rgba(0, 0, 0, 0.95);
    --bg-glass: rgba(255, 255, 255, 0.85);
    --bg-message-bot: #ffffff;
    --bg-message-user: var(--irc-black);
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --text-tertiary: #9ca3af;
    --text-on-dark: var(--irc-white);
    --accent-color: var(--yellow-500);
    --accent-hover: var(--yellow-600);
    --border-light: rgba(0, 0, 0, 0.06);
    --border-medium: rgba(0, 0, 0, 0.12);

    /* Typography Scale */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs: clamp(1rem,.0875vw + 1rem,1.1rem);
    --font-size-sm: clamp(1.25rem,1.1vw + 1rem,1.33rem);
    --font-size-base: clamp(1.5rem,1.33vw + 1rem,1.75rem);
    --font-size-lg: clamp(1.75rem,1.65vw + 1rem, 2.5rem);
    --font-size-xl: clamp(1.8rem,2.25vw + 1rem,3rem);
    --font-size-2xl: clamp(2rem,2.5vw + 1rem,4rem);
    --font-size-3xl: clamp(3rem,3.25vw + 1rem,4rem);
    --font-size-4xl: clamp(4rem,3.75vw + 1rem,4rem);

    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Letter Spacing */
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-glow: 0 0 20px rgba(255, 194, 14, 0.3);

    /* Border Radius */
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --radius-xs: 8px;

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Dark Mode Variables */
.giannis-chatbot-wrapper.dark-mode {
    --bg-body: #0f0f0f;
    --bg-sidebar: rgba(18, 18, 18, 0.95);
    --bg-glass: rgba(30, 30, 30, 0.85);
    --bg-message-bot: #1a1a1a;
    --bg-message-user: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
    --text-primary: #f5f5f5;
    --text-secondary: #a3a3a3;
    --text-tertiary: #737373;
    --text-on-dark: var(--irc-white);
    --border-light: rgba(255, 255, 255, 0.08);
    --border-medium: rgba(255, 255, 255, 0.12);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
    background-image:
        radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.02) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(255, 255, 255, 0.01) 0%, transparent 50%) !important;
}

/* ================================================
   CRITICAL RESET - Prevent inheritance issues
   ================================================ */
.giannis-chatbot-wrapper,
.giannis-chatbot-wrapper * {
    box-sizing: border-box !important;
    /* Reset text properties that themes often override */
    text-transform: none !important;
    letter-spacing: normal !important;
    text-decoration: none !important;
}

.giannis-chatbot-wrapper *,
.giannis-chatbot-wrapper *::before,
.giannis-chatbot-wrapper *::after {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ================================================
   MAIN WRAPPER
   ================================================ */
.giannis-chatbot-wrapper {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 600px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: var(--text-primary) !important;
    background-color: var(--bg-body) !important;
    background-image:
        radial-gradient(circle at 0% 0%, rgba(255, 194, 14, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(0, 0, 0, 0.02) 0%, transparent 50%) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
    transition: background-color var(--transition-slow), color var(--transition-slow);
}

/* App Container */
.giannis-chatbot-wrapper .app-container {
    display: flex !important;
    flex-direction: row !important;
    height: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
}

/* ================================================
   CUSTOM SCROLLBAR
   ================================================ */
.giannis-chatbot-wrapper ::-webkit-scrollbar {
    width: 6px !important;
}

.giannis-chatbot-wrapper ::-webkit-scrollbar-track {
    background: transparent !important;
}

.giannis-chatbot-wrapper ::-webkit-scrollbar-thumb {
    background-color: var(--gray-400) !important;
    border-radius: 10px !important;
}

.giannis-chatbot-wrapper ::-webkit-scrollbar-thumb:hover {
    background-color: var(--gray-500) !important;
}

/* ================================================
   SIDEBAR
   ================================================ */
.giannis-chatbot-wrapper .sidebar {
    width: 280px !important;
    max-width: 280px !important;
    height: 100% !important;
    background-color: var(--bg-sidebar) !important;
    color: var(--text-on-dark) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 1.5rem !important;
    backdrop-filter: blur(20px) !important;
    border-right: 1px solid var(--border-light) !important;
    transition: width var(--transition-base), padding var(--transition-base);
    z-index: 20 !important;
    flex-shrink: 0 !important;
    position: relative !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* Logo Container */
.giannis-chatbot-wrapper .logo-container {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 2rem !important;
    padding: 0 0.5rem !important;
    height: auto !important;
    width: 100% !important;
}

.giannis-chatbot-wrapper .logo-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: var(--radius-md) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-md) !important;
    transition: transform var(--transition-spring);
    flex-shrink: 0 !important;
}

.giannis-chatbot-wrapper .logo-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

.giannis-chatbot-wrapper .logo-icon:hover {
    transform: rotate(5deg) scale(1.05);
}

.giannis-chatbot-wrapper .sidebar h1 {
    font-size: var(--font-size-xl) !important;
    font-weight: 600 !important;
    letter-spacing: var(--tracking-tight) !important;
    color: var(--text-on-dark) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
}

/* Sidebar Actions */
.giannis-chatbot-wrapper .sidebar-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    margin-bottom: 1.5rem !important;
    width: 100% !important;
}

/* New Chat Button */
.giannis-chatbot-wrapper .new-chat-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--irc-white) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--radius-sm) !important;
    padding: 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    font-family: inherit !important;
    cursor: pointer !important;
    transition: all var(--transition-base);
    width: 100% !important;
    text-align: left !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.giannis-chatbot-wrapper .new-chat-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-2px);
    color: var(--irc-white) !important;
}

.giannis-chatbot-wrapper .new-chat-btn svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
}

/* Feedback Button */
.giannis-chatbot-wrapper .feedback-btn {
    background: linear-gradient(135deg, rgba(255, 194, 14, 0.15) 0%, rgba(255, 194, 14, 0.05) 100%) !important;
    border: 1px solid rgba(255, 194, 14, 0.3) !important;
    color: var(--irc-white) !important;
    border-radius: var(--radius-sm) !important;
    padding: 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-weight: 500 !important;
    font-size: var(--font-size-sm) !important;
    font-family: inherit !important;
    cursor: pointer !important;
    transition: all var(--transition-base);
    width: 100% !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
    animation: subtlePulse 4s ease-in-out infinite;
    text-align: left !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    outline: none !important;
    box-shadow: none !important;
}

.giannis-chatbot-wrapper .feedback-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 194, 14, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.giannis-chatbot-wrapper .feedback-btn:hover::before {
    width: 300px;
    height: 300px;
}

.giannis-chatbot-wrapper .feedback-btn:hover {
    background: linear-gradient(135deg, rgba(255, 194, 14, 0.25) 0%, rgba(255, 194, 14, 0.1) 100%) !important;
    border-color: rgba(255, 194, 14, 0.5) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 194, 14, 0.2) !important;
    color: var(--irc-white) !important;
}

.giannis-chatbot-wrapper .feedback-btn svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}

@keyframes subtlePulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 194, 14, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(255, 194, 14, 0);
    }
}

/* History List */
.giannis-chatbot-wrapper .history-list {
    flex: 1 !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin: 0 -0.5rem !important;
    padding: 0 0.5rem !important;
}

/* History Items */
.giannis-chatbot-wrapper .history-item {
    padding: 10px 14px !important;
    border-radius: var(--radius-sm) !important;
    cursor: pointer !important;
    font-size: var(--font-size-sm) !important;
    color: var(--gray-400) !important;
    transition: all var(--transition-base);
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
    position: relative !important;
    text-decoration: none !important;
}

.giannis-chatbot-wrapper .history-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--irc-white) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    transform: translateX(2px);
}

.giannis-chatbot-wrapper .history-item.active {
    background: rgba(255, 194, 14, 0.15) !important;
    color: var(--irc-yellow) !important;
    border-color: rgba(255, 194, 14, 0.3) !important;
}

/* Chat Title */
.giannis-chatbot-wrapper .chat-title {
    flex: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
}

/* Chat Actions */
.giannis-chatbot-wrapper .chat-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 4px !important;
    align-items: center !important;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    flex-shrink: 0 !important;
}

.giannis-chatbot-wrapper .history-item:hover .chat-actions {
    opacity: 1;
}

/* Action Buttons */
.giannis-chatbot-wrapper .action-btn {
    background: transparent !important;
    border: none !important;
    color: var(--gray-400) !important;
    cursor: pointer !important;
    padding: 4px !important;
    border-radius: var(--radius-xs) !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all var(--transition-fast);
    outline: none !important;
}

.giannis-chatbot-wrapper .action-btn:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--irc-white) !important;
    transform: scale(1.1);
}

/* Rename Input */
.giannis-chatbot-wrapper .rename-input {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid var(--accent-color) !important;
    color: var(--irc-white) !important;
    padding: 4px 8px !important;
    border-radius: var(--radius-xs) !important;
    font-size: var(--font-size-sm) !important;
    width: 100% !important;
    outline: none !important;
    font-family: inherit !important;
}

/* Sidebar Footer */
.giannis-chatbot-wrapper .sidebar-footer {
    margin-top: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid var(--border-light) !important;
}

/* Theme Toggle & Sidebar Toggle */
.giannis-chatbot-wrapper .theme-toggle,
.giannis-chatbot-wrapper .sidebar-toggle {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    cursor: pointer !important;
    padding: 10px !important;
    border-radius: var(--radius-sm) !important;
    transition: all var(--transition-base);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    outline: none !important;
}

.giannis-chatbot-wrapper .theme-toggle:hover,
.giannis-chatbot-wrapper .sidebar-toggle:hover {
    background: rgba(0, 0, 0, 0.6) !important;
    color: var(--irc-white) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.05);
}

.giannis-chatbot-wrapper .theme-toggle svg,
.giannis-chatbot-wrapper .sidebar-toggle svg {
    width: 20px !important;
    height: 20px !important;
    transition: transform var(--transition-spring);
}

/* Clear All Chats Button - Destructive Action */
.clear-all-btn {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 10px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    width: 40px;
    height: 40px;
}

.clear-all-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.5);
    transform: scale(1.05);
}

.clear-all-btn:active {
    transform: scale(0.95);
}

.clear-all-btn svg {
    width: 20px;
    height: 20px;
    transition: all var(--transition-base);
}

.clear-all-btn:hover svg {
    color: #ef4444;
}

/* Main Chat Area - Updated class to match HTML */
.chat-interface {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.mobile-header {
    display: none;
    padding: 1rem;
    background: var(--bg-sidebar);
    color: var(--text-on-dark);
    border-bottom: 1px solid var(--border-light);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 2rem 0 10rem 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* ================================================
   CHAT INTERFACE
   ================================================ */
.giannis-chatbot-wrapper .chat-interface {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden !important;
    min-width: 0 !important;
}

/* Mobile Header */
.giannis-chatbot-wrapper .mobile-header {
    display: none !important;
    padding: 1rem !important;
    background: var(--bg-sidebar) !important;
    color: var(--text-on-dark) !important;
    border-bottom: 1px solid var(--border-light) !important;
}

/* Chat Messages */
.giannis-chatbot-wrapper .chat-messages {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 2rem 0 15rem 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    background: transparent !important;
}

.giannis-chatbot-wrapper .chat-messages.hidden {
    display: none !important;
}

/* Welcome Container */
.giannis-chatbot-wrapper .welcome-container {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    transition: opacity var(--transition-slow), visibility var(--transition-slow);
    z-index: 1 !important;
    pointer-events: none !important;
}

.giannis-chatbot-wrapper .welcome-container.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
}

/* Welcome Logo */
.giannis-chatbot-wrapper .welcome-logo img {
    width: auto !important;
    height: 90px !important;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.1));
    transition: transform var(--transition-spring);
    display: block !important;
    margin: 0 auto 2rem !important;
}

.giannis-chatbot-wrapper .welcome-logo:hover img {
    transform: scale(1.05);
}

/* Welcome Text */
.giannis-chatbot-wrapper .welcome-text {
    font-size: var(--font-size-4xl) !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    display: flex !important;
    gap: 0.5rem !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    letter-spacing: var(--tracking-tight) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
    text-transform: none !important;
    flex-direction: row;
}

.giannis-chatbot-wrapper .yellow-text {
    color: var(--irc-yellow) !important;
}

/* Dynamic Text Animation */
.giannis-chatbot-wrapper .dynamic-verb,
.giannis-chatbot-wrapper .dynamic-suffix {
    display: inline-block !important;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 600ms ease-in-out, transform 600ms ease-in-out;
}

.giannis-chatbot-wrapper .dynamic-verb.show,
.giannis-chatbot-wrapper .dynamic-suffix.show {
    opacity: 1;
    transform: translateY(0);
}

/* ================================================
   MESSAGES
   ================================================ */
.giannis-chatbot-wrapper .message {
    display: flex !important;
    gap: 1.5rem !important;
    padding: 0 2rem !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    width: 100% !important;
    opacity: 0;
    animation: messageSlideIn 0.5s var(--transition-spring) forwards;
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Message Avatar */
.giannis-chatbot-wrapper .message-avatar {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    font-weight: 600 !important;
    font-size: var(--font-size-lg) !important;
    background: linear-gradient(135deg, var(--irc-yellow) 0%, var(--yellow-600) 100%) !important;
    color: var(--irc-black) !important;
    box-shadow: var(--shadow-md) !important;
    transition: transform var(--transition-base);
}

.giannis-chatbot-wrapper .message-avatar:hover {
    transform: scale(1.1) rotate(5deg);
}

.giannis-chatbot-wrapper .bot-message .message-avatar {
    background: var(--irc-black) !important;
    color: var(--irc-yellow) !important;
    border: 2px solid var(--irc-yellow) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.giannis-chatbot-wrapper .user-message .message-avatar {
    background-color: var(--bg-message-user) !important;
    color: var(--irc-white) !important;
    border: none !important;
}

/* Message Content */
.giannis-chatbot-wrapper .message-content {
    padding: 1.25rem 1.75rem !important;
    line-height: var(--line-height-relaxed) !important;
    font-size: var(--font-size-base) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-lg) !important;
    position: relative !important;
    max-width: 85% !important;
    box-shadow: var(--shadow-md) !important;
    transition: all var(--transition-base);
    background: var(--bg-message-bot) !important;
}

.giannis-chatbot-wrapper .message:hover .message-content {
    box-shadow: var(--shadow-lg) !important;
}

/* Bot Message Specific */
.giannis-chatbot-wrapper .bot-message .message-content {
    background: var(--bg-message-bot) !important;
    border-top-left-radius: var(--radius-xs) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-primary) !important;
}

/* User Message Specific */
.giannis-chatbot-wrapper .user-message {
    flex-direction: row-reverse !important;
}

.giannis-chatbot-wrapper .user-message .message-content {
    background: var(--bg-message-user) !important;
    color: var(--irc-white) !important;
    border-top-right-radius: var(--radius-xs) !important;
    text-align: left !important;
    border: none !important;
}

/* Copy Button */
.giannis-chatbot-wrapper .copy-btn {
    position: absolute !important;
    top: 0.75rem !important;
    right: 0.75rem !important;
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius-xs) !important;
    padding: 6px !important;
    cursor: pointer !important;
    opacity: 0;
    transition: all var(--transition-fast);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    outline: none !important;
}

.giannis-chatbot-wrapper .bot-message .message-content:hover .copy-btn {
    opacity: 1;
}

.giannis-chatbot-wrapper .copy-btn:hover {
    background: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    transform: scale(1.1);
}

.giannis-chatbot-wrapper .copy-btn svg {
    width: 14px !important;
    height: 14px !important;
    color: var(--text-secondary) !important;
    transition: color var(--transition-fast);
}

.giannis-chatbot-wrapper .copy-btn:hover svg {
    color: var(--irc-black) !important;
}

.giannis-chatbot-wrapper .copy-btn.copied {
    background: var(--success) !important;
    border-color: var(--success) !important;
}

.giannis-chatbot-wrapper .copy-btn.copied svg {
    color: white !important;
}

/* Message Sources */
.giannis-chatbot-wrapper .message-sources {
    margin-top: 1.2rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid var(--border-light) !important;
    font-size: var(--font-size-sm) !important;
    color: var(--text-secondary) !important;
    background-color: rgba(249, 250, 251, 0.5) !important;
    margin-left: -1.75rem !important;
    margin-right: -1.75rem !important;
    margin-bottom: -1.25rem !important;
    padding-left: 1.75rem !important;
    padding-right: 1.75rem !important;
    padding-bottom: 1rem !important;
    border-bottom-left-radius: var(--radius-lg) !important;
    border-bottom-right-radius: var(--radius-lg) !important;
}

.giannis-chatbot-wrapper.dark-mode .message-sources {
    background-color: rgba(0, 0, 0, 0.2) !important;
}

.giannis-chatbot-wrapper .message-sources strong {
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    display: block !important;
    margin-bottom: 6px !important;
    text-transform: uppercase !important;
    font-size: var(--font-size-xs) !important;
    letter-spacing: var(--tracking-wide) !important;
}

/* ================================================
   INPUT AREA
   ================================================ */
.giannis-chatbot-wrapper .input-area-container {
    padding: 1rem 2rem !important;
    background: transparent !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 5 !important;
    transition: all var(--transition-slow);
}

.giannis-chatbot-wrapper .input-area-container.centered {
    bottom: 20% !important;
    transform: translateY(50%) !important;
    background: transparent !important;
}

.giannis-chatbot-wrapper .input-area-container:not(.centered) {
    background: linear-gradient(180deg, rgba(248, 249, 250, 0) 0%, var(--bg-body) 40%) !important;
}

/* Quick Starter Language Buttons */
.language-starters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 12px 0;
    margin-bottom: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.language-starters::-webkit-scrollbar {
    display: none;
}

.language-starters.hidden-starters {
    display: none !important;
}

.starter-chip {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-medium);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.9em;
    font-family: var(--font-family);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}

.starter-chip:hover {
    background: rgba(255, 194, 14, 0.15);
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 194, 14, 0.2);
}

.starter-chip:active {
    transform: translateY(0);
}

/* Dark mode adjustments for starter chips */
body.dark-mode .starter-chip {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
}

body.dark-mode .starter-chip:hover {
    background: rgba(255, 194, 14, 0.2);
    border-color: var(--accent-color);
}

.input-area {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}
.giannis-chatbot-wrapper .input-area {
    max-width: 900px !important;
    margin: 0 auto !important;
    width: 100% !important;
}

/* Input Wrapper */
.giannis-chatbot-wrapper .input-wrapper {
    position: relative !important;
    background-color: var(--bg-glass) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border-light) !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: flex-end !important;
    gap: 12px !important;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md) !important;
}

.giannis-chatbot-wrapper .input-wrapper:focus-within {
    border-color: var(--accent-color) !important;
    box-shadow: var(--shadow-lg), var(--shadow-glow) !important;
    transform: translateY(-2px);
}

/* Textarea */
.giannis-chatbot-wrapper textarea {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    resize: none !important;
    max-height: 200px !important;
    padding: 8px 0 !important;
    outline: none !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
    min-height: auto !important;
    width: 100% !important;
    box-shadow: none !important;
}

.giannis-chatbot-wrapper textarea::placeholder {
    color: var(--text-tertiary) !important;
}

/* Send Button */
.giannis-chatbot-wrapper #sendBtn {
    background-color: var(--irc-black) !important;
    color: var(--irc-white) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all var(--transition-base);
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

.giannis-chatbot-wrapper #sendBtn:disabled {
    opacity: 0.3 !important;
    cursor: default !important;
    background-color: var(--gray-700) !important;
    transform: none !important;
}

.giannis-chatbot-wrapper #sendBtn:not(:disabled):hover {
    background-color: var(--accent-color) !important;
    color: var(--irc-black) !important;
    transform: scale(1.08);
    box-shadow: var(--shadow-md) !important;
}

.giannis-chatbot-wrapper #sendBtn svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
}

/* Disclaimer */
.giannis-chatbot-wrapper .disclaimer {
    text-align: center !important;
    font-size: 11px !important;
    color: #888 !important;
    margin-top: 0.75rem !important;
    font-weight: 300 !important;
    opacity: 0;
    transition: opacity var(--transition-base);
    letter-spacing: 0.3px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

.giannis-chatbot-wrapper .input-area-container:not(.centered) .disclaimer,
.giannis-chatbot-wrapper .input-area-container.centered .disclaimer {
    opacity: 1;
}

/* ================================================
   TYPING INDICATOR - FIXED FOR HORIZONTAL DISPLAY
   ================================================ */
.giannis-chatbot-wrapper .typing-indicator {
    display: flex !important;
    flex-direction: row !important; /* Force horizontal layout */
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 8px 4px !important;
    min-height: 24px !important;
    width: auto !important;
    white-space: nowrap !important; /* Prevent wrapping */
    overflow: visible !important;
    flex-wrap: nowrap !important; /* Prevent flex wrapping */
}

.giannis-chatbot-wrapper .typing-dot {
    display: inline-block !important; /* Ensure inline display */
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;
    background-color: var(--accent-color) !important;
    border-radius: 50% !important;
    animation: typingBounce 1.4s infinite ease-in-out both;
    margin: 0 !important; /* Reset margins */
    padding: 0 !important; /* Reset padding */
    vertical-align: middle !important;
    float: none !important; /* Prevent floating */
    position: relative !important; /* Prevent absolute positioning */
    flex-shrink: 0 !important; /* Prevent dots from shrinking */
}

/* Ensure proper message content display for typing indicator */
.giannis-chatbot-wrapper .bot-message .message-content:has(.typing-indicator) {
    display: flex !important;
    align-items: center !important;
    min-width: 60px !important; /* Minimum width for 3 dots */
}

.giannis-chatbot-wrapper .typing-dot:nth-child(1) {
    animation-delay: -0.32s;
}

.giannis-chatbot-wrapper .typing-dot:nth-child(2) {
    animation-delay: -0.16s;
}

.giannis-chatbot-wrapper .typing-dot:nth-child(3) {
    animation-delay: 0s;
}

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

/* WordPress theme overrides for typing indicator */
#brx-content .giannis-chatbot-wrapper .typing-indicator,
.brx-body .giannis-chatbot-wrapper .typing-indicator,
.bricks-is-frontend .giannis-chatbot-wrapper .typing-indicator,
body .giannis-chatbot-wrapper .typing-indicator {
    display: flex !important;
    flex-direction: row !important;
}

#brx-content .giannis-chatbot-wrapper .typing-dot,
.brx-body .giannis-chatbot-wrapper .typing-dot,
.bricks-is-frontend .giannis-chatbot-wrapper .typing-dot,
body .giannis-chatbot-wrapper .typing-dot {
    display: inline-block !important;
    float: none !important;
    clear: none !important;
}

/* ================================================
   COLLAPSED SIDEBAR
   ================================================ */
.giannis-chatbot-wrapper .sidebar.collapsed {
    width: 80px !important;
    padding: 1.5rem 1rem !important;
}

.giannis-chatbot-wrapper .sidebar.collapsed .logo-container {
    justify-content: center !important;
    padding: 0 !important;
}

.giannis-chatbot-wrapper .sidebar.collapsed h1,
.giannis-chatbot-wrapper .sidebar.collapsed .history-list,
.giannis-chatbot-wrapper .sidebar.collapsed .theme-toggle,
.giannis-chatbot-wrapper .sidebar.collapsed .clear-all-btn {
    display: none !important;
}

.giannis-chatbot-wrapper .sidebar.collapsed .new-chat-btn,
.giannis-chatbot-wrapper .sidebar.collapsed .feedback-btn {
    font-size: 0 !important;
    justify-content: center !important;
    padding: 14px 0 !important;
}

.giannis-chatbot-wrapper .sidebar.collapsed .new-chat-btn svg,
.giannis-chatbot-wrapper .sidebar.collapsed .feedback-btn svg {
    margin: 0 !important;
}

.giannis-chatbot-wrapper .sidebar.collapsed .sidebar-toggle {
    transform: rotate(180deg);
}

/* ================================================
   RESPONSIVE DESIGN
   ================================================ */

@media (max-width: 1300px) {
       .giannis-chatbot-wrapper .welcome-text {
        font-size: var(--font-size-3xl) !important;
    }
}

@media (max-width: 1120px) {
       .giannis-chatbot-wrapper .welcome-text {
        font-size: var(--font-size-2xl) !important;
        flex-direction: column !important;
    }
	/* Welcome Container */
    .giannis-chatbot-wrapper .welcome-container {
        top: 33% !important;
    }

}

@media (max-width: 768px) {
    .giannis-chatbot-wrapper .sidebar {
        position: fixed !important;
        left: -100% !important;
        height: 100% !important;
        width: 80% !important;
        max-width: 280px !important;
        box-shadow: var(--shadow-xl) !important;
        z-index: 100 !important;
    }

    .giannis-chatbot-wrapper .sidebar.active {
        left: 0 !important;
    }

    .giannis-chatbot-wrapper .mobile-header {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .giannis-chatbot-wrapper .message {
        padding: 0 1rem !important;
        gap: 1rem !important;
        max-width: 100% !important;
    }

    .giannis-chatbot-wrapper .message-content {
        font-size: var(--font-size-sm) !important;
        padding: 1rem 1.25rem !important;
    }

    .giannis-chatbot-wrapper .input-area-container {
        padding: 1rem !important;
    }

    .giannis-chatbot-wrapper .input-wrapper {
        padding: 10px 14px !important;
    }

    .giannis-chatbot-wrapper .welcome-logo img {
        height: 70px !important;
    }

    .welcome-text {
        font-size: var(--font-size-2xl);
    }
}

/* ===================================
   RTL (Right-to-Left) Support
   Applies to Arabic text content
   =================================== */
.rtl-message {
    /* Force text direction from right to left */
    direction: rtl;

    /* Align text to the right */
    text-align: right;

    /* Ensure RTL characters are handled correctly */
    unicode-bidi: embed;
}

/* RTL adjustments for bot messages */
.bot-message .rtl-message {
    /* Text flows correctly within the bubble */
    direction: rtl;
}

/* RTL adjustments for user messages */
.user-message .rtl-message {
    /* Right alignment is crucial for user messages in Arabic */
    direction: rtl;
}

/* ================================================
   OVERRIDE COMMON WORDPRESS THEME STYLES
   ================================================ */

/* Reset common button overrides */
.giannis-chatbot-wrapper button,
.giannis-chatbot-wrapper button:focus,
.giannis-chatbot-wrapper button:active,
.giannis-chatbot-wrapper button:hover {
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
}

/* Override Bricks Builder specific styles */
#brx-content .giannis-chatbot-wrapper button,
.brx-body .giannis-chatbot-wrapper button,
.bricks-is-frontend .giannis-chatbot-wrapper button {
    background-image: none !important;
    text-indent: 0 !important;
}

/* Force proper flexbox behavior */
#brx-content .giannis-chatbot-wrapper .app-container,
.brx-body .giannis-chatbot-wrapper .app-container {
    display: flex !important;
    flex-direction: row !important;
}

/* Ensure inputs don't inherit weird padding */
.giannis-chatbot-wrapper input,
.giannis-chatbot-wrapper textarea,
.giannis-chatbot-wrapper button {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Force SVG display */
.giannis-chatbot-wrapper svg {
    display: inline-block !important;
    vertical-align: middle !important;
    fill: currentColor;
}

/* Ensure links in the chatbot don't get theme styles */
.giannis-chatbot-wrapper a,
.giannis-chatbot-wrapper a:hover,
.giannis-chatbot-wrapper a:focus,
.giannis-chatbot-wrapper a:visited {
    box-shadow: none !important;
    text-shadow: none !important;
    background-image: none !important;
}

/* Prevent theme typography from affecting chatbot */
.giannis-chatbot-wrapper h1,
.giannis-chatbot-wrapper h2,
.giannis-chatbot-wrapper h3,
.giannis-chatbot-wrapper h4,
.giannis-chatbot-wrapper h5,
.giannis-chatbot-wrapper h6,
.giannis-chatbot-wrapper p,
.giannis-chatbot-wrapper span,
.giannis-chatbot-wrapper div {
    font-family: inherit !important;
    line-height: inherit !important;
}

/* ================================================
   EMOJI TEXT VISIBILITY FIX
   Prevents text from being hidden after emojis
   ================================================ */

/* Primary fix: Ensure message content handles emojis properly */
.giannis-chatbot-wrapper .message-content {
    /* Keep normal white-space handling for most text */
    white-space: normal !important;
    
    /* Ensure overflow is visible */
    overflow: visible !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    
    /* Slightly increased line height for better emoji rendering */
    line-height: 1.75 !important;
    
    /* Ensure adequate padding so nothing gets cut off */
    padding-right: 2rem !important;
    padding-bottom: 1.25rem !important;
    
    /* Force block display to prevent inline issues */
    display: block !important;
}

/* Fix for the content wrapper div - the key is display and overflow */
.giannis-chatbot-wrapper .message-content > div:not(.message-sources) {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
    
    /* Use normal white-space but ensure word breaking works */
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    
    /* Minimum height to ensure content is visible */
    min-height: 1.5em !important;
}

/* Special handling for lines containing emojis using CSS content inspection */
.giannis-chatbot-wrapper .message-content > div {
    /* Reset any potential text-overflow or clip */
    text-overflow: visible !important;
    clip: auto !important;
    -webkit-clip-path: none !important;
    clip-path: none !important;
}

/* Fix specific to bot messages with potential emoji content */
.giannis-chatbot-wrapper .bot-message .message-content {
    /* Ensure the container expands to show all content */
    min-width: 200px !important;
    max-width: 85% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    
    /* Clear any float issues that might hide text */
    clear: both !important;
}

/* Ensure inline elements after emojis remain visible */
.giannis-chatbot-wrapper .message-content span,
.giannis-chatbot-wrapper .message-content strong,
.giannis-chatbot-wrapper .message-content em {
    /* Ensure inline elements don't get hidden */
    display: inline !important;
    visibility: visible !important;
    position: static !important;
    overflow: visible !important;
}

/* Fix potential font rendering issues with emojis */
.giannis-chatbot-wrapper .message-content {
    /* Include emoji-capable fonts in the stack */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif !important;
    
    /* Prevent font-variant issues that might affect emoji rendering */
    font-variant: normal !important;
    font-variant-ligatures: normal !important;
    font-variant-caps: normal !important;
}

/* Alternative approach: Force repaint after emoji */
.giannis-chatbot-wrapper .message-content::after {
    content: "";
    display: table;
    clear: both;
}

/* Ensure RTL messages with emojis still work */
.giannis-chatbot-wrapper .rtl-message {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
    unicode-bidi: embed !important;
    direction: rtl !important;
}

/* Additional fix: Ensure the message bubble expands properly */
.giannis-chatbot-wrapper .message-content {
    /* Use flex to ensure content doesn't get compressed */
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
}

.giannis-chatbot-wrapper .message-content > div:not(.message-sources) {
    flex: 1 1 auto !important;
}

/* Last resort: Force minimum dimensions for content visibility */
.giannis-chatbot-wrapper .bot-message .message-content > div[data-raw-markdown] {
    min-height: 2em !important;
    padding-bottom: 0.5em !important;
}

/* Special class for emoji-fixed content */
.giannis-chatbot-wrapper .emoji-content-fixed {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}