:root {
    /* --- COLOR PALETTE --- */
    --color-at-dark: #020042;
    --color-at-light: #E5E5E9;
    --color-white: #FFFFFF;
    --color-gradient: linear-gradient(180deg, var(--color-secondary-300) 0%, var(--color-secondary-500) 100%);

    /* Primary: De donkerblauwe huisstijlkleur (tekst, navbar) */
    --color-primary-50: #F4F4FF;
    --color-primary-100: #DBDBFF;
    --color-primary-150: #C7C7FF;
    --color-primary-500: #5E5EE0;
    --color-primary-600: #4848BD; 
    --color-primary-700: #323294; 
    --color-primary-800: #1D1D61;
    --color-primary-900: #0C0C2E;
    
    
    /* Secondary: De felle cyaan actiekleur (knoppen, focus) */
    --color-secondary-300: #17EBEB;
    --color-secondary-400: #00DBDB;
    --color-secondary-500: #13BABA;
    --color-secondary-600: #1E9494;

    /* Neutrals: Achtergronden en grijs */
    --color-neutral-100: #E7E6F0;
    --color-neutral-200: #CAC9D6;
    --color-neutral-500: #7A798A;
    --color-neutral-600: #626070;
    --color-neutral-900: #1D1D24;
}

/* --- GLOBAL RESET --- */
body {
    margin: 0;
    padding: 0;
    background-color: var(--color-at-light);
    overflow: hidden;
    font-family: 'Open Sans', sans-serif;
}

a, button { touch-action: manipulation; }
* { box-sizing: border-box; }

/* --- NAVBAR STYLES --- */
.ava-navbar {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 80px;
    background-color: var(--color-at-dark);
    z-index: 2001;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-inner {
    width: 100%;
    max-width: 1400px;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.nav-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
}

.nav-logo img {
    height: auto;
    width: 48px;
    display: block;
}

.nav-back-btn {
    font-family: 'Open Sans', sans-serif;
    color: var(--color-white);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 2px;
    z-index: 2;
    transition: all 0.2s ease;
}

.nav-back-btn svg { margin-top: -1px; margin-right: 4px; }
.text-long { display: none; }

@media only screen and (min-width: 640px) {
    .nav-inner { padding: 0 25px; justify-content: flex-start; gap: 25px; }
    .nav-logo { position: static; transform: none; }
    .nav-back-btn { font-size: 14px; padding: 6px 12px; border-radius: 4px; gap: 6px; }
    .nav-back-btn:hover { background-color: rgba(255, 255, 255, 0.1); color: #00FFE0; }
    .text-long { display: inline; }
}

/* --- ONBOARDING STYLES --- */
#ava-onboarding-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(2, 0, 66, 0.85); 
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: none; /* Default hidden, toggled by JS */
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.onboarding-card {
    background: var(--color-white);
    width: 100%;
    max-width: 480px;
    border-radius: 12px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    position: relative;
    animation: fadeIn 0.4s ease-out;
}

.onboarding-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 20px;
    border: 4px solid var(--color-at-light);
}

.onboarding-card h2 {
    color: var(--color-primary-900);
    margin: 0 0 15px 0;
    font-weight: 700;
    font-size: 24px;
}

.onboarding-card p {
    color: var(--color-primary-900);
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
}

.onboarding-card .small-text {
    font-size: 13px;
    color: var(--color-neutral-600);
    margin-top: -10px;
    margin-bottom: 30px;
}

.text-link {
    color: var(--color-primary-500);

    &:hover {
        color: var(--color-primary-600);
    }
}

#close-onboarding-btn {
    background-color: var(--color-secondary-400);
    color: var(--color-primary-800);
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    border: none;
    padding: 14px 32px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s;
}

#close-onboarding-btn:hover {
    background-color: var(--color-secondary-500);
}

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

/* --- DIALOGFLOW CUSTOMIZATION --- */
df-messenger {
    z-index: 999;
    position: fixed;
    height: calc(100% - 80px);
    left: 50%;
    top: 80px;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1400px;
    border-left: 1px solid var(--color-neutral-200);
    border-right: 1px solid var(--color-neutral-200);

    /* General */
    --df-messenger-font-color: var(--color-primary-900);
    --df-messenger-font-family: 'Open Sans', sans-serif;
    --df-messenger-chat-background: var(--color-primary-50);
    --df-messenger-chat-border: none;
    --df-messenger-focus-color: var(--color-secondary-500);

    /* Titlebar */
    --df-messenger-titlebar-font-color: var(--color-neutral-900);
    --df-messenger-titlebar-icon-height: 40px;
    --df-messenger-titlebar-icon-width: 40px;
    --df-messenger-titlebar-title-font-weight: 700;
    --df-messenger-titlebar-border-bottom: 1px solid var(--color-neutral-200);
    --df-messenger-titlebar-subtitle-font-color: var(--color-neutral-500);
    --df-messenger-titlebar-subtitle-font-weight: 500;

    /* User Message */
    --df-messenger-message-user-background: var(--color-primary-100);
    --df-messenger-message-user-font-color: var(--color-primary-700);
    --df-messenger-message-user-border: 1px solid var(--color-primary-150);

    /* Bot Message */
    --df-messenger-message-actor-image-size: 40px;
    --df-messenger-message-actor-padding: 0px;
    --df-messenger-message-bot-background: var(--color-white);
    --df-messenger-message-bot-border: 1px solid var(--color-neutral-100);

    /* Input Box */
    --df-messenger-input-box-color: var(--color-white);
    --df-messenger-input-font-color: var(--color-primary-900);
    --df-messenger-input-placeholder-font-color: var(--color-neutral-600);
    --df-messenger-input-background: var(--color-white);
    --df-messenger-input-box-focus-border: 2px solid var(--color-neutral-200);

    /* Misc */
    --df-messenger-message-line-height: 144%;
    --df-messenger-message-font-weight: 500;

    /* Feedback buttons */
    --df-messenger-message-feedback-icon-border: 1px solid var(--color-primary-150);
    --df-messenger-message-feedback-icon-font-color: var(--color-primary-700);
    --df-messenger-message-feedback-icon-background-hover: var(--color-primary-100);
    --df-messenger-message-feedback-icon-font-color-active: var(--color-primary-700);
    
    /* Links */
    --df-messenger-link-font-color: var(--color-primary-500);
    --df-messenger-link-hover-font-color: var(--color-primary-600);
    --df-messenger-link-visited-font-color: var(--color-primary-700);
    --df-messenger-link-decoration: underline; 
    --df-messenger-link-border: none;
    --df-messenger-link-padding: 0px;
   
    /* Auth Button */
    --df-messenger-auth-button-font-color: var(--color-primary-800);
    --df-messenger-auth-button-font-size: 14px;
    --df-messenger-auth-background: rgba(29, 29, 97, 0.94);
    --df-messenger-auth-button-background: var(--color-gradient);
    --df-messenger-auth-button-border-radius: 6px;

    /* Icons */
    --df-messenger-send-icon-color-disabled: #AFAEBD;
    --df-messenger-send-icon-color-active:  var(--color-primary-600);

    /* Chips */
    --df-messenger-chips-background-hover: var(--color-primary-100);
    --df-messenger-chips-border-color: var(--color-primary-150);
    --df-messenger-chips-font-color: var(--color-primary-700);
    --df-messenger-chips-icon-font-color: var(--color-primary-700);

    /* Error */
    --df-messenger-message-error-font-color: #B3261E;
    --df-messenger-message-error-background: #F9DEDC;
    --df-messenger-message-error-font-size: 14px;
}