:root {
    --brand-primary-green: #7fab31;
    --brand-primary-blue: #468aca;
    --aurora-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --aurora-bg-start: #effbe3;
    --aurora-bg-mid: #ffffff;
    --aurora-bg-end: #d8f1f5;
    --aurora-text-primary: #333333;
    --aurora-text-secondary: #666666;
    --aurora-text-accent: var(--brand-primary-green);
    --user-message-bg: var(--brand-primary-green);
    --user-message-text: #FFFFFF;
    --user-message-border-color: #6d9a2b;
    --bot-message-bg: rgba(70, 139, 202, 0.1);
    --bot-message-border: var(--brand-primary-blue);
    --bot-message-glow: 0 0 15px rgba(70, 139, 202, 0.15);
    --bot-message-text: var(--aurora-text-primary);
    --orb-color-1: var(--brand-primary-green);
    --orb-color-2: var(--brand-primary-blue);
    --orb-color-3: #50fa7b;
    --input-bg: #FFFFFF;
    --input-border: #DDDDDD;
    --input-focus-border: var(--brand-primary-green);
    --input-text-color: var(--aurora-text-primary);
    --scrollbar-thumb-bg: rgba(0,0,0,0.2);
    --scrollbar-thumb-hover-bg: rgba(0,0,0,0.3);
    --scrollbar-track-bg: rgba(0,0,0,0.05);
    }

            .chatWidgetContainer *, .chatWidgetContainer *::before, .chatWidgetContainer *::after {
                box-sizing: border-box; margin: 0; padding: 0;
            }

            .chatWidgetContainer {
                position: fixed;
                bottom: 200px;
                right: 20px;
                width: 380px;
                height: 575px;
                background: linear-gradient(160deg, var(--aurora-bg-start), var(--aurora-bg-mid), var(--aurora-bg-end));
                border-radius: 18px;
                box-shadow: 0 8px 25px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.03);
                display: none;
                flex-direction: column;
                z-index: 9998;
                overflow: hidden;
                font-family: var(--aurora-font);
                color: var(--aurora-text-primary);
                opacity: 0;
                transform: scale(0.9) translateY(20px);
                transition: opacity 0.3s ease, transform 0.3s ease;
                pointer-events: none;
            }
            .chatWidgetContainer.open {
                display: flex;
                pointer-events: all;
                animation: auroraWidgetOpen 0.4s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
            }
            .chatWidgetContainer.closing {
                animation: auroraWidgetClose 0.3s cubic-bezier(0.55,0.085,0.68,0.53) forwards;
            }
            @keyframes auroraWidgetOpen { to { opacity:1; transform:scale(1) translateY(0); } }
            @keyframes auroraWidgetClose {
                from { opacity:1; transform:scale(1) translateY(0); }
                to { opacity:0; transform:scale(0.9) translateY(20px); }
            }

            .chatWidgetHeader {
                padding: 18px 22px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background: rgba(0,0,0,0.03);
                border-bottom: 1px solid rgba(0,0,0,0.07);
            }
            .ChatBot-header-left {
                display: flex;
                align-items: center;
                gap: 8px;
            }
            .ChatBot-header-left-image-container {
                width: 36px;
                height: 36px;
                border-radius: 50%;
                background: linear-gradient(45deg, var(--orb-color-1), var(--orb-color-2));
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
                box-shadow: 0 0 10px var(--orb-color-2);
            }
            .ChatBot-header-left-image-container img {
                width: 22px;
                height: 22px;
                object-fit: contain;
                display: block;
                filter: drop-shadow(0 0 2px rgba(255,255,255,0.5));
            }
            .chatWidgetHeader span {
                font-size: 1.1rem;
                font-weight: 600;
                color: var(--aurora-text-accent);
                text-shadow: 0 0 5px rgba(80,250,123,0.5);
            }
            .chatWidgetHeader button {
                background: transparent;
                border: none;
                color: var(--aurora-text-secondary);
                font-size: 26px;
                line-height: 1;
                cursor: pointer;
                transition: color 0.2s ease, transform 0.2s ease;
                padding: 5px;
                border-radius: 50%;
            }
            .chatWidgetHeader button:hover { color: var(--aurora-text-primary); transform: rotate(90deg); }
            .chatWidgetHeader button:focus { outline: 2px solid var(--aurora-text-accent); outline-offset: 2px; }

            .chatWidgetBody {
                flex: 1;
                padding: 20px;
                overflow-y: auto;
                scroll-behavior: smooth;
                display: flex;
                flex-direction: column;
                gap: 15px;
            }
            .chatWidgetBody::-webkit-scrollbar { width: 8px; }
            .chatWidgetBody::-webkit-scrollbar-track { background: var(--scrollbar-track-bg); border-radius: 4px; }
            .chatWidgetBody::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-bg); border-radius: 4px; border: 2px solid var(--scrollbar-track-bg); }
            .chatWidgetBody::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover-bg); }

            .messageWrapper {
                display: flex;
                align-items: flex-start;
                max-width: 90%;
                opacity: 0;
                transform: translateX(-20px);
                animation: slideInBot 0.5s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
            }
            .messageWrapper.user {
                align-self: flex-end;
                flex-direction: row !important;
                justify-content: flex-end;
                transform: translateX(20px);
                animation: slideInUser 0.5s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
            }
            .messageWrapper.bot { align-self: flex-start; flex-direction: row; }
            @keyframes slideInBot { to { opacity:1; transform:translateX(0); } }
            @keyframes slideInUser { to { opacity:1; transform:translateX(0); } }

            /* ── Bot Avatar ── */
            .botAvatar {
                width: 36px;
                height: 36px;
                border-radius: 50%;
                margin-right: 10px;
                flex-shrink: 0;
                background: linear-gradient(45deg, var(--orb-color-1), var(--orb-color-2), var(--orb-color-3));
                background-size: 200% 200%;
                animation: auroraOrbPulse 4s infinite ease-in-out, auroraOrbGradientShift 8s infinite linear;
                box-shadow: 0 0 10px var(--orb-color-2), 0 0 5px var(--orb-color-1) inset;
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
            }
            .botAvatar img {
                width: 22px;
                height: 22px;
                object-fit: contain;
                display: block;
                filter: drop-shadow(0 0 2px rgba(255,255,255,0.5));
            }
            @keyframes auroraOrbPulse {
                0%,100% { transform:scale(1); box-shadow:0 0 10px var(--orb-color-2),0 0 5px var(--orb-color-1) inset; }
                50% { transform:scale(1.05); box-shadow:0 0 15px var(--orb-color-2),0 0 8px var(--orb-color-1) inset; }
            }
            @keyframes auroraOrbGradientShift {
                0% { background-position:0% 50%; }
                50% { background-position:100% 50%; }
                100% { background-position:0% 50%; }
            }

            /* ── User Avatar ── */
            .userAvatar {
                width: 36px;
                height: 36px;
                border-radius: 50%;
                margin-left: 10px;
                margin-right: 0;
                flex-shrink: 0;
                order: 2;
                background: linear-gradient(135deg, #FAA61A, #FF6F00);
                
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 2px 8px rgba(127,171,49,0.3);
            }
            .userAvatar svg { width: 22px; height: 22px; }
            .messageWrapper.user .messageContent { order: 1; }

            .messageContent {
                padding: 10px 15px;
                border-radius: 16px;
                font-size: 0.95rem;
                line-height: 1.5;
                word-wrap: break-word;
            }
            .messageContent.bot {
                background: var(--bot-message-bg);
                color: var(--bot-message-text);
                border: 1px solid var(--bot-message-border);
                box-shadow: var(--bot-message-glow);
                backdrop-filter: blur(5px);
                border-radius: 4px 16px 16px 16px;
            }
            .messageContent.user {
                background: var(--user-message-bg);
                color: var(--user-message-text);
                box-shadow: 0 2px 5px rgba(148,200,60,0.2);
                border-radius: 16px 16px 4px 16px;
                border: 1px solid var(--user-message-border-color);
            }
            .messageContent.typing {
                background: var(--bot-message-bg);
                color: var(--aurora-text-secondary);
                border: 1px solid var(--bot-message-border);
                font-style: italic;
                border-radius: 4px 16px 16px 16px;
            }
            .messageContent.bot ul { padding-left: 22px; margin: 8px 0; }
            .messageContent.bot li { margin-bottom: 0.5px; }

            .typing .botAvatar {
                animation: auroraOrbPulse 1s infinite ease-in-out, auroraOrbGradientShift 4s infinite linear, typingSpin 1.5s infinite linear;
            }
            @keyframes typingSpin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }

            .chatWidgetFooter {
                padding: 15px 20px;
                background: rgba(0,0,0,0.04);
                border-top: 1px solid rgba(0,0,0,0.07);
                display: flex;
                align-items: center;
                gap: 10px;
            }
            .chatWidgetInput {
                flex: 1;
                padding: 12px 18px;
                background: var(--input-bg);
                border: 1px solid var(--input-border);
                border-radius: 25px;
                color: var(--input-text-color);
                font-family: var(--aurora-font);
                font-size: 0.95rem;
                outline: none;
                transition: all 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
                min-height: 48px;
            }
            .chatWidgetInput::placeholder { color: var(--aurora-text-secondary); opacity: 0.7; }
            .chatWidgetInput:focus {
                border-color: var(--input-focus-border);
                box-shadow: 0 0 10px rgba(148,200,60,0.3);
                background: rgba(148,200,60,0.03);
                transform: translateY(-1px);
            }
            .chatWidgetInput:disabled { background-color: rgba(0,0,0,0.05); cursor: not-allowed; opacity: 0.7; }
button#sendButton {
    width: 60px;
    height: 60px;
}
            .chatWidgetSend {
                background: var(--user-message-bg);
                border: none;
                width: 55px;
                height: 55px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                transition: all 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
                box-shadow: 0 2px 8px rgba(148,200,60,0.25);
            }
            .chatWidgetSend:hover:not(:disabled) {
                background: #6d9a2b;
                box-shadow: 0 4px 12px rgba(148,200,60,0.35);
                transform: translateY(-2px) scale(1.05);
            }
            .chatWidgetSend:hover svg { transform: rotate(-15deg) scale(1.1); }
            .chatWidgetSend:active { transform: translateY(0) scale(1); }
            .chatWidgetSend:disabled { background: #ccc; cursor: not-allowed; transform: none; }
            .chatWidgetSend svg { width: 42px; height: 42px; stroke: var(--user-message-text); transition: transform 0.3s ease; }

            .chatWidgetButton {
                position: fixed;
                bottom: 25px;
                right: 25px;
                cursor: pointer;
                z-index: 10000;
                background: linear-gradient(45deg, var(--orb-color-1), var(--orb-color-2));
                border: none;
                padding: 0;
                border-radius: 50%;
                box-shadow: 0 5px 15px rgba(0,0,0,0.2);
                display: flex;
                align-items: center;
                justify-content: center;
                width: 54px;
                height: 54px;
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .chatWidgetButton:hover { transform:scale(1.1) rotate(15deg); box-shadow:0 8px 20px rgba(0,0,0,0.25),0 0 10px var(--brand-primary-green); }
            .chatWidgetButton:focus { outline: 2px solid var(--aurora-text-accent); outline-offset: 2px; }
            .chatWidgetButton.hidden { opacity:0; transform:scale(0); pointer-events:none; }
            .chatWidgetButton svg { width:28px; height:28px; fill:white; filter:drop-shadow(0 0 3px rgba(255,255,255,0.5)); }

            .messageContent strong { color: var(--aurora-text-accent); font-weight: bold; }
            .messageContent a { color: #ffffff; text-decoration: none; font-weight: 700; text-shadow: 0 0 8px rgba(255,255,255,0.4);  }
            .messageContent a:hover { text-decoration: underline; }

            .errorMessage {
                background-color: rgba(244,67,54,0.1);
                color: #f44336;
                border-left: 4px solid #f44336;
                padding: 12px;
                margin: 8px 0;
                border-radius: 4px;
                font-size: 13px;
            }
            .retryButton {
                background: #f44336; color: white; border: none;
                padding: 6px 12px; border-radius: 4px; cursor: pointer;
                margin-top: 8px; font-size: 12px; transition: background-color 0.2s ease;
            }
            .retryButton:hover { background: #d32f2f; }

            @supports not (backdrop-filter: blur(5px)) {
                .messageContent.bot { background: rgba(70,139,202,0.2); }
            }
            @media (max-width:480px) {
                .chatWidgetContainer { width:calc(100vw - 20px); height:calc(100vh - 20px); bottom:10px; right:10px; border-radius:12px; }
                .chatWidgetHeader { padding:15px; }
                .chatWidgetHeader span { font-size:1rem; }
                .chatWidgetBody { padding:15px; gap:12px; }
                .messageWrapper { max-width:95%; }
                .botAvatar { width:32px; height:32px; margin-right:8px; }
                .userAvatar { width:32px; height:32px; margin-left:8px; }
                .messageContent { padding:8px 12px; font-size:0.9rem; }
                .chatWidgetFooter { padding:10px 15px; gap:8px; }
                .chatWidgetInput { padding:10px 15px; min-height:44px; font-size:0.9rem; }
                .chatWidgetSend { width: 52px; height: 52px; }
    .chatWidgetSend svg { width: 36px; height: 36px; }
                .chatWidgetButton { width:56px; height:56px; bottom:15px; right:15px; }
            }
            @media (prefers-contrast:high) {
                .chatWidgetContainer { border:2px solid #000; }
                .messageContent { border:1px solid #000; }
            }
            @media (prefers-reduced-motion:reduce) {
                .chatWidgetButton,.chatWidgetContainer,.chatWidgetSend,.botAvatar { animation:none!important; transition:none!important; }
            }
            .messageContent.bot br.compact-br { margin:0; line-height:0.2; display:block; content:""; }