/* Kleurenpalet */
:root {
    --ai-green: #92C149;
    --ai-dark:  #323943;
    --ai-white: #FFFFFF;
}

/* Globale styling */
.ai-container {
    font-family: Arial, sans-serif;
    max-width: 650px;
    margin: 20px auto;
    padding: 20px;
    background: var(--ai-white);
    border: 1px solid #ddd;
    border-radius: 8px;
}

/* Form basics */
.ai-container input[type="text"],
.ai-container input[type="email"],
.ai-container textarea,
.ai-container select {
    width: 100%;
    padding: 10px;
    margin: 6px 0 14px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.ai-container button {
    background: var(--ai-green);
    color: var(--ai-white);
    border: none;
    padding: 10px 16px;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
}

.ai-container button:hover {
    background: #7da538;
}

/* Fase toggles */
.ai-phase1-start,
.ai-phase1-survey,
.ai-phase1-confirm,
.ai-phase2-login,
.ai-phase2-flow {
    display: none;
}

/* Start in fase 1 */
.ai-phase1-start {
    display: block;
}

/* Simple spacing */
.ai-section {
    margin-bottom: 20px;
}

/* Phase 2 instruction block */
.ai-phase2-instruction {
    padding: 10px;
    background: var(--ai-dark);
    color: var(--ai-white);
    border-radius: 6px;
    margin-bottom: 15px;
}

/* Chat area placeholder (optioneel later uitbouwen) */
.ai-chat-box {
    background: #f7f7f7;
    padding: 12px;
    border-radius: 6px;
    min-height: 80px;
    margin-bottom: 20px;
}