/* style.css - Volledige versie (Focus op Herstel Header/Input/Suggesties) */

:root {
    /* Kleur variabelen */
    --body-bg: #f0f2f5; /* Lichtgrijs zoals voorbeeld bg */
    --chat-bg: #ffffff; /* Wit voor chat container */
    --border-color: #e8eaed; /* Subtiele randkleur */
    --input-wrapper-border: #dadce0; /* Iets donkerder rand voor input wrapper? */
    --input-area-bg: #ffffff; /* Wit voor tekst input deel */
    --input-text-color: #3c4043; /* Donkergrijs voor tekst */
    --placeholder-color: #9aa0a6; /* Lichter grijs voor placeholder */
    --topics-area-bg: #f8f9fa; /* Lichtgrijs voor topics balk */
    --bot-message-bg: #f1f3f4;
    --bot-message-text: #3c4043;
    --user-message-bg: #e8f0fe; /* Lichtblauw voor gebruiker bericht */
    --user-message-text: #1967d2; /* Donkerder blauw voor tekst */
    --button-bg: transparent;
    --button-icon-color: #5f6368; /* Grijs voor iconen */
    --button-hover-bg: #f1f3f4; /* Lichte hover */
    /* Suggestie knop specifiek (Wit, subtiele rand/schaduw) */
    --suggestion-btn-bg: #ffffff;
    --suggestion-btn-border: #dadce0;
    --suggestion-btn-text: #3c4043;
    --suggestion-btn-hover-bg: #f8f9fa;
    --suggestion-btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    /* Topics knop specifiek (Simpel, randje) */
    --topics-button-bg: transparent;
    --topics-button-border: #dadce0;
    --topics-button-text: #5f6368;
    --topics-button-hover-bg: #f1f3f4;
    --header-text-color: #3c4043;
    --link-color: #1a73e8;
    --text-color: #3c4043;
    /* Topics Lijst Stijl */
    --topics-list-bg: #ffffff;
    --topics-list-shadow: 0 4px 10px rgba(0,0,0,0.1);
    --topics-list-border: #e0e0e0;
    --topics-list-item-hover: #f1f3f4;
    /* Font */
    --font-family: "Google Sans", Roboto, Helvetica, Arial, sans-serif;
    /* Blob Grootte */
    --blob-base-size: 150px;
}

/* Font import */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500&family=Roboto:wght@400;500&display=swap');

/* Body (Centrering) */
body {
    font-family: var(--font-family);
    background-color: var(--body-bg);
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    color: var(--text-color);
    overflow: hidden;
}

/* Hoofd chat container */
#chat-app-container {
    width: 90%;
    max-width: 550px;
    height: 90vh;
    max-height: 750px;
    background-color: var(--chat-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px; /* Afronding hoofdcontainer */
    box-shadow: 0 1px 3px rgba(60,64,67,0.15), 0 4px 8px rgba(60,64,67,0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Belangrijk */
}

/* Header (Stijl zoals in afbeelding) */
#chat-header {
    display: flex;
    align-items: center;
    padding: 10px 15px; /* Compacte padding */
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    background-color: var(--chat-bg); /* Zelfde als container bg */
}
.header-icon {
    font-size: 1.1em; /* Iets kleiner icoon */
    margin-right: 8px;
    color: var(--header-text-color);
    line-height: 1;
}
.header-title {
    font-weight: 500;
    color: var(--header-text-color);
    flex-grow: 1;
    font-size: 0.95em; /* Iets kleiner font */
}

/* Chat Output & Messages (Onveranderd) */
#chat-output { flex-grow: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; background-color: var(--chat-bg); }
#chat-output.hidden { display: none; }
.message { display: flex; max-width: 85%; word-wrap: break-word; }
.message-content { padding: 10px 15px; border-radius: 18px; line-height: 1.5; }
.user-message { align-self: flex-end; }
.user-message .message-content { background-color: var(--user-message-bg); color: var(--user-message-text); border-bottom-right-radius: 6px; }
.bot-message { align-self: flex-start; }
.bot-message .message-content { background-color: var(--bot-message-bg); color: var(--bot-message-text); /* border: 1px solid var(--border-color); */ border-bottom-left-radius: 6px; } /* Subtiele rand eventueel weglaten */

/* Initial State Container */
#initial-state {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 30px 20px; /* Meer verticale padding */
    overflow: hidden;
    background-color: var(--chat-bg);
}
#initial-state.hidden { display: none; }

/* AI Blob Animatie Stijlen */
.blob { --size: var(--blob-base-size); position: relative; width: var(--size); height: var(--size); margin-bottom: 30px; /* Meer ruimte */ filter: blur(calc(var(--size) / 25)); transition: 3s filter; overflow: hidden; }
.blob > span { height: var(--size); width: var(--size); position: absolute; display: block; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: 2s all 0.25s ease-in-out; }
.blob.fast > span { animation: rotate 15s infinite linear both; }
.blob.fast > span:last-child { animation-direction: reverse; }
.blob > span::before { content: ""; display: block; opacity: 0.6; height: 100%; width: 100%; background-blend-mode: color; transition: 2s all 0.25s ease-in-out, 1.5s opacity, background-size 1.5s; animation: rotate 16s infinite linear both; mask: radial-gradient(circle, #000 50%, transparent 50%) 50% 50% / var(--size) var(--size), radial-gradient(circle, #000 50%, transparent 50%) 110% 10% / calc(var(--size) / 1.3) calc(var(--size) / 1.3), radial-gradient(circle, #000 50%, transparent 50%) -20% 20% / calc(var(--size) / 1.2) calc(var(--size) / 1.2), radial-gradient(circle, #000 50%, transparent 50%) 10% 110% / calc(var(--size) / 1.3) calc(var(--size) / 1.3); mask-repeat: no-repeat; }
.blob > span:last-child::before { animation-direction: reverse; }
.blob > span:first-child::before { background: radial-gradient(circle, #a0f7fc 50%, transparent 50%) 50% 50% / 0 0, linear-gradient(#005907, #8df2df, #a0f7fc 40%) 50% 50% / 100% 100%; background-repeat: no-repeat; }
.blob > span:last-child::before { background: radial-gradient(circle, #65fb80 50%, transparent 50%) 50% 50% / 0 0, linear-gradient(#2ac248, #a0f7fc) 50% 50% / 100% 100%; background-repeat: no-repeat; }
.blob.active { filter: blur(calc(var(--size) / 10)); }
.blob.active > span:first-child::before, .blob.active > span:last-child::before { scale: 3; opacity: 0.2; background-size: 200% 200%; }
.blob.active > span:first-child { top: 20%; left: 10%; transform: translate(0, 0); }
.blob.active > span:last-child { top: 80%; left: auto; right: 10%; transform: translate(0, 0); }
@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Prompt en Suggestie Knoppen (Stijl zoals in afbeelding) */
#prompt-question { font-size: 1.1em; color: var(--input-text-color); margin-bottom: 30px; line-height: 1.4; }
.suggestion-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 15px; max-width: 90%; /* Voorkom te breed worden */ }
.suggestion-btn {
    background-color: var(--suggestion-btn-bg);
    border: 1px solid var(--suggestion-btn-border);
    border-radius: 8px; /* Afronding zoals voorbeeld */
    padding: 8px 15px;
    font-size: 0.9em;
    font-family: inherit; /* Gebruik hoofd font */
    font-weight: 400;
    color: var(--suggestion-btn-text);
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
    box-shadow: var(--suggestion-btn-shadow);
    text-align: center;
    white-space: nowrap; /* Voorkom ongewenste afbreking */
}
.suggestion-btn:hover {
    background-color: var(--suggestion-btn-hover-bg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
#show-more { font-size: 0.9em; color: var(--link-color); cursor: pointer; margin-top: 10px; /* Meer ruimte */ }
#show-more:hover { text-decoration: underline; }

/* Input Area Wrapper (Container voor invoer + topics, met elevation) */
#input-wrapper {
    padding: 0; /* Geen padding op wrapper zelf */
    margin: 0 15px 15px 15px; /* Marges voor 'zwevend' effect */
    border: 1px solid var(--input-wrapper-border); /* Rand rondom */
    border-radius: 20px; /* Afronding zoals voorbeeld input */
    background-color: var(--input-area-bg); /* Wit als basis */
    box-shadow: 0 2px 6px rgba(0,0,0,0.08); /* Duidelijkere schaduw */
    flex-shrink: 0;
    position: relative; /* Voor topics lijst positionering */
    overflow: hidden; /* Clip interne elementen */
}

/* Bovenste deel input: Textarea + Send */
#input-area {
    display: flex;
    align-items: flex-end; /* Send knop onderaan uitlijnen */
    padding: 8px 8px 8px 15px;
    background-color: var(--input-area-bg); /* Wit */
}

/* Onderste deel input: Topics */
#topics-area {
    background-color: var(--topics-area-bg); /* Lichtgrijs */
    padding: 8px 15px;
    border-top: 1px solid var(--border-color); /* Lijn ertussen */
    text-align: left;
}

/* Topics Knop Zelf */
#topics-button {
    background: var(--topics-button-bg); /* Transparant */
    border: 1px solid var(--topics-button-border);
    border-radius: 16px; /* Rond */
    padding: 5px 12px;
    font-size: 0.85em;
    color: var(--topics-button-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background-color 0.2s, border-color 0.2s;
}
#topics-button:hover {
     background-color: var(--topics-button-hover-bg);
     border-color: #c0c2c5;
}
.plus-icon { font-size: 1.1em; line-height: 1; }

/* Textarea Stijl */
#user-input {
    flex-grow: 1;
    border: none;
    padding: 8px 0; /* Vert. padding */
    font-size: 1rem;
    line-height: 1.4;
    resize: none;
    overflow-y: auto;
    max-height: 100px;
    background-color: transparent; /* Belangrijk */
    color: var(--input-text-color);
    font-family: inherit;
    margin-right: 8px;
}
#user-input:focus { outline: none; }
#user-input::placeholder { color: var(--placeholder-color); }

/* Verzendknop Stijl */
#send-button {
    background-color: var(--button-bg);
    border: none;
    padding: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
    flex-shrink: 0;
    margin-bottom: 2px;
}
#send-button svg { fill: var(--button-icon-color); width: 20px; height: 20px; }
#send-button:hover { background-color: var(--button-hover-bg); }

/* Topics Lijst Pop-up Stijl */
#topics-list-container {
    position: absolute;
    bottom: 55px; /* Net boven de topics-area (+ marge) */
    left: 0;
    width: auto;
    min-width: 150px;
    max-width: 300px;
    background-color: var(--topics-list-bg);
    border: 1px solid var(--topics-list-border);
    border-radius: 8px;
    box-shadow: var(--topics-list-shadow);
    z-index: 10;
    margin-left: 15px; /* Align met input wrapper marge */
    overflow: hidden;
}
#topics-list-container.hidden { display: none; }
#topics-list { list-style: none; padding: 5px 0; margin: 0; max-height: 150px; overflow-y: auto; }
#topics-list li { padding: 8px 15px; font-size: 0.9em; color: var(--text-color); cursor: pointer; }
#topics-list li:hover { background-color: var(--topics-list-item-hover); }

/* Scrollbar Styling */
#chat-output::-webkit-scrollbar { width: 6px; }
#chat-output::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 3px; }
#chat-output::-webkit-scrollbar-track { background-color: #f1f1f1; }
#topics-list::-webkit-scrollbar { width: 5px; }
#topics-list::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 3px; }
#topics-list::-webkit-scrollbar-track { background-color: #f1f1f1; }