/* AVA — huisstijl. Palet exact volgens het ontwerp (7 juli 2026). */
:root {
  --achtergrond: #2B030A;   /* donker bordeaux — hoofdachtergrond */
  --rand: #3F0410;          /* kaartranden, subtiele vlakken */
  --primair: #57071B;       /* primaire knoppen + Naveens chatbubbel */
  --goud: #E5C79E;          /* logo, iconen, accenten */
  --kaart: #F6EAE7;         /* lichte kaartjes / AVA's bubbel */
  --tekst-licht: #F3E4E2;   /* tekst op donker */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--achtergrond);
  color: var(--tekst-licht);
  font-family: -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}

#app { display: flex; flex-direction: column; height: 100dvh; max-width: 560px; margin: 0 auto; }

/* ---- kop ---- */
header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--rand);
  flex-shrink: 0;
}
header img { width: 40px; height: 40px; }
header h1 { font-size: 1.15rem; font-weight: 600; letter-spacing: .12em; color: var(--goud); }
header .ondertitel { font-size: .72rem; color: var(--tekst-licht); opacity: .75; letter-spacing: .18em; text-transform: uppercase; }

/* ---- gesprek ---- */
#gesprek {
  flex: 1; overflow-y: auto; padding: 16px 14px 8px;
  display: flex; flex-direction: column; gap: 10px;
  scroll-behavior: smooth;
}
.bubbel { max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: .95rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.van-ava { align-self: flex-start; background: var(--kaart); color: var(--achtergrond); border-bottom-left-radius: 4px; }
.van-naveen { align-self: flex-end; background: var(--primair); color: var(--tekst-licht); border-bottom-right-radius: 4px; }
.keuze { align-self: flex-end; background: none; border: 1px solid var(--rand); color: var(--goud); font-size: .82rem; padding: 5px 12px; border-radius: 12px; }
.info { align-self: center; color: var(--goud); opacity: .8; font-size: .8rem; padding: 2px 8px; text-align: center; }
.status { align-self: flex-start; color: var(--goud); font-size: .85rem; font-style: italic; padding: 2px 8px; width: 92%; }
.status .voortgang {
  display: block; height: 8px; margin-top: 7px; border-radius: 4px;
  background: var(--rand); overflow: hidden;
}
.status .voortgang i {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #c9a06b, var(--goud));
  transition: width .4s ease;
}
.status .pct { display: block; margin-top: 4px; font-size: .75rem; opacity: .8; font-style: normal; }
.tijd { display: block; font-size: .66rem; opacity: .55; margin-top: 4px; text-align: right; }
.van-ava .tijd { color: var(--achtergrond); }
.bubbel img.foto { max-width: 100%; border-radius: 10px; display: block; }

/* aan het typen ... */
.bezig { align-self: flex-start; display: flex; gap: 5px; padding: 12px 16px; background: var(--kaart); border-radius: 16px; border-bottom-left-radius: 4px; }
.bezig i { width: 7px; height: 7px; border-radius: 50%; background: var(--primair); opacity: .4; animation: stip 1.2s infinite; }
.bezig i:nth-child(2) { animation-delay: .2s; }
.bezig i:nth-child(3) { animation-delay: .4s; }
@keyframes stip { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* ---- voorstel-knoppen ---- */
.knoppen { display: flex; flex-direction: column; gap: 7px; align-self: flex-start; max-width: 82%; width: 100%; }
.knoppen .rij { display: flex; gap: 7px; }
.knoppen button {
  flex: 1; padding: 10px 14px; border-radius: 12px; font-size: .9rem; cursor: pointer;
  border: 1px solid var(--goud); background: none; color: var(--goud);
  transition: opacity .15s;
}
.knoppen .rij:first-child button:first-child { background: var(--primair); color: var(--goud); font-weight: 600; }
.knoppen button:active { opacity: .6; }
.knoppen.uit button { opacity: .35; pointer-events: none; }

/* ---- invoerbalk ---- */
#invoerbalk {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 12px; border-top: 1px solid var(--rand); flex-shrink: 0;
}
#invoer {
  flex: 1; resize: none; max-height: 110px; padding: 11px 14px;
  border-radius: 20px; border: 1px solid var(--rand);
  background: var(--rand); color: var(--tekst-licht); font-size: .95rem; font-family: inherit;
  outline: none;
}
#invoer::placeholder { color: var(--tekst-licht); opacity: .45; }
#invoerbalk button, #opnamebalk button {
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--primair); border: 1.5px solid transparent; position: relative;
}
#invoerbalk svg, #opnamebalk svg {
  width: 21px; height: 21px; fill: none; stroke: var(--goud);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* wisselknop: microfoon ⇄ verzendpijl (cross-fade met een subtiele draai) */
#actieknop svg { position: absolute; transition: opacity .15s ease, transform .15s ease; }
#icoon-pijl { opacity: 0; transform: rotate(45deg) scale(.4); }
#invoerbalk.heeft-tekst #icoon-pijl { opacity: 1; transform: none; }
#invoerbalk.heeft-tekst #icoon-mic { opacity: 0; transform: rotate(-45deg) scale(.4); }
#invoerbalk.heeft-tekst #actieknop { border-color: var(--goud); }

/* opname-balk: 🗑 · rood puntje · timer · ⏸ · ➤ */
#opnamebalk {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-top: 1px solid var(--rand); flex-shrink: 0;
}
#opname-punt { width: 10px; height: 10px; border-radius: 50%; background: #e0314f; animation: knipper 1s infinite; flex-shrink: 0; }
#opnamebalk.gepauzeerd #opname-punt { animation: none; opacity: .35; }
#opname-timer { color: var(--goud); font-variant-numeric: tabular-nums; font-size: 1.05rem; flex-shrink: 0; }
#opnamebalk.gepauzeerd #opname-timer { opacity: .55; }
#opname-golf { flex: 1; height: 34px; min-width: 40px; }
#opnamebalk.gepauzeerd #opname-golf { opacity: .55; }
#opnamebalk.speelt #opname-golf { opacity: 1; }
#opname-weg svg { stroke: #e0aab4; }
#opname-stuur { border-color: var(--goud); }
#opnamebalk #icoon-speel { fill: var(--goud); stroke: none; }
#opnamebalk #icoon-verder { stroke: #e0314f; }
@keyframes knipper { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.bubbel audio { max-width: 100%; display: block; }

/* ---- navigatiebalk ---- */
nav {
  display: flex; justify-content: space-around; align-items: center;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rand); flex-shrink: 0;
}
nav .tab { background: none; border: none; color: var(--tekst-licht); opacity: .55; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .62rem; letter-spacing: .05em; padding: 4px 8px; }
nav .tab .icoon { font-size: 1.25rem; }
nav .tab.actief { color: var(--goud); opacity: 1; }
nav .logo-tab { background: var(--primair); border: 1.5px solid var(--goud); border-radius: 50%; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; margin-top: -18px; cursor: pointer; }
nav .logo-tab img { width: 34px; height: 34px; }

/* ---- login ---- */
#login {
  position: fixed; inset: 0; background: var(--achtergrond);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 24px; z-index: 10;
}
#login img { width: 92px; height: 92px; }
#login h1 { color: var(--goud); letter-spacing: .35em; font-weight: 500; font-size: 2rem; margin-left: .35em; }
#login .motto { color: var(--tekst-licht); opacity: .8; font-size: .95rem; text-align: center; }
#login input {
  width: min(320px, 90%); padding: 13px 16px; border-radius: 12px;
  border: 1px solid var(--rand); background: var(--rand);
  color: var(--tekst-licht); font-size: 1rem; text-align: center; outline: none;
}
#login button {
  width: min(320px, 90%); padding: 13px; border-radius: 12px; border: 1px solid var(--goud);
  background: var(--primair); color: var(--goud); font-size: 1rem; font-weight: 600; cursor: pointer;
}
#login .fout { color: #ff9d9d; font-size: .85rem; min-height: 1.2em; }

/* ---- instellingen ---- */
#instellingen { flex: 1; overflow-y: auto; padding: 22px 18px; display: flex; flex-direction: column; gap: 18px; }
#instellingen h2 { color: var(--goud); font-weight: 600; font-size: 1.1rem; letter-spacing: .06em; }
#instellingen section { border: 1px solid var(--rand); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
#instellingen h3 { font-size: .95rem; font-weight: 600; color: var(--tekst-licht); }
#instellingen input { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--rand); background: var(--rand); color: var(--tekst-licht); font-size: .95rem; outline: none; }
#instellingen button { padding: 12px; border-radius: 10px; border: 1px solid var(--goud); background: var(--primair); color: var(--goud); font-weight: 600; font-size: .95rem; cursor: pointer; }
#instellingen .uitleg { font-size: .78rem; opacity: .7; line-height: 1.4; }

/* ---- melding onderin (toast) ---- */
#toast {
  position: fixed; bottom: 88px; left: 50%; transform: translateX(-50%);
  background: var(--kaart); color: var(--achtergrond);
  padding: 10px 18px; border-radius: 14px; font-size: .85rem;
  opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 20;
  max-width: 88%; text-align: center;
}
#toast.zichtbaar { opacity: 1; }

.verborgen { display: none !important; }