:root{
  --bg: #000;
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.65);

  --red: #ff3b30;
  --cyan: #25d6ff;

  --panelBg: rgba(8, 12, 20, .82);

  --radius: 18px;
  --radiusSmall: 14px;

  --shadowRed: 0 0 18px rgba(255, 59, 48, .35), 0 0 45px rgba(255, 59, 48, .18);
  --shadowCyan: 0 0 18px rgba(37, 214, 255, .25), 0 0 45px rgba(37, 214, 255, .12);
}

*{ box-sizing: border-box; }
html,body{ height: 100%; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow-x: hidden;
}

/* ===== INTRO (full page) =====
   Verwacht: <div id="ha-intro" class="ha-intro"> ... </div>
*/
.ha-intro{
  min-height: 100dvh;
  padding: calc(env(safe-area-inset-top) + 18px) 18px calc(env(safe-area-inset-bottom) + 120px);
  display: grid;
  place-items: center;
  position: relative;
  background:
    radial-gradient(circle at 70% 25%, rgba(37,214,255,.16), transparent 55%),
    radial-gradient(circle at 15% 80%, rgba(255,59,48,.14), transparent 55%),
    linear-gradient(180deg, #000 0%, #000 100%);
}

.ha-intro-card{
  width: min(520px, 100%);
  border-radius: 22px;
  border: 2px solid rgba(255,59,48,.45);
  background: rgba(0,0,0,.55);
  box-shadow: var(--shadowRed), var(--shadowCyan);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 18px;
}

/* Image-only intro variant (jouw anna-intro.png) */
.ha-intro-card.ha-intro-image-only{
  padding: 0;
  overflow: hidden;
}

.ha-intro-fullimage{
  width: 100%;
  height: auto;
  display: block;
}

/* Als chat open is: intro dimmen en niet klikbaar */
body.ha-chat-open .ha-intro{
  opacity: .06;
  pointer-events: none;
  filter: blur(2px);
}

/* ===== BUBBLE ===== */
.ha-ai-bubble{
  position: fixed;
  right: 18px;
  bottom: calc(env(safe-area-inset-bottom) + 18px);
  z-index: 9999;
}

#ha-ai-open{
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 2px solid rgba(255,59,48,.70);
  box-shadow: var(--shadowRed);
  background:
    radial-gradient(circle at 30% 30%, rgba(37,214,255,.30), rgba(0,0,0,.15) 55%),
    radial-gradient(circle at 70% 70%, rgba(255,59,48,.25), rgba(0,0,0,.15) 60%),
    rgba(0,0,0,.55);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

#ha-ai-open:active{ transform: scale(.98); }

/* ===== PANEL =====
   Verwacht:
   <div id="ha-ai-panel">
     <div class="ha-ai-panel-header">...</div>
     <div id="ha-ai-messages" class="ha-ai-messages"></div>
     <div id="ha-typing" class="ha-typing"></div>
     <form id="ha-ai-form" class="ha-ai-form">...</form>
   </div>
*/
#ha-ai-panel{
  position: fixed;
  right: 18px;
  bottom: calc(env(safe-area-inset-bottom) + 110px);

  width: min(420px, calc(100vw - 36px));
  /* iOS-proof hoogte: dvh + safe areas */
  height: min(68dvh, 620px);

  border-radius: 22px;
  border: 3px solid rgba(255,59,48,.78);
  box-shadow: var(--shadowRed), var(--shadowCyan);

  background:
    radial-gradient(circle at 30% 20%, rgba(37,214,255,.18), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(37,214,255,.12), transparent 55%),
    var(--panelBg);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  display: none;
  overflow: hidden;
  z-index: 9998;
}

#ha-ai-panel.open{
  display: flex;
  flex-direction: column;
}

/* Mobile: panel binnen scherm, geen afsnijden */
@media (max-width: 520px){
  .ha-ai-bubble{ right: 12px; }

  #ha-ai-panel{
    left: 12px;
    right: 12px;
    width: auto;

    /* Hoogte = viewport minus top ruimte minus bubble-zone */
    height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 170px);
    bottom: calc(env(safe-area-inset-bottom) + 110px);
  }
}

/* Header */
.ha-ai-panel-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
}

.ha-ai-panel-title{
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(255,255,255,.92);
}

#ha-ai-close{
  width: 44px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(37,214,255,.45);
  background: rgba(0,0,0,.25);
  color: rgba(37,214,255,.95);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* Messages area */
.ha-ai-messages{
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px 10px;

  /* voorkomt dat laatste bericht onder input verdwijnt */
  scroll-padding-bottom: 80px;
}

.ha-typing{
  padding: 0 12px 10px;
  min-height: 0;
}

.ha-typing img{
  height: 34px;
  display: inline-block;
  opacity: .95;
}

/* Message bubbles: onder elkaar, nooit overlappen */
.ha-ai-message{
  width: 100%;
  display: flex;
  margin: 10px 0;
}

.ha-ai-message-user{ justify-content: flex-end; }
.ha-ai-message-bot{ justify-content: flex-start; }

.ha-ai-msg{
  max-width: 92%;
  padding: 12px 12px;
  border-radius: 18px;
  line-height: 1.35;
  font-size: 15px;
  white-space: pre-wrap;
  word-break: break-word;
}

.ha-ai-message-user .ha-ai-msg{
  background: rgba(255,59,48,.16);
  border: 1px solid rgba(255,59,48,.45);
  box-shadow: 0 0 18px rgba(255,59,48,.14);
}

.ha-ai-message-bot .ha-ai-msg{
  background: rgba(37,214,255,.10);
  border: 1px solid rgba(37,214,255,.40);
  box-shadow: 0 0 18px rgba(37,214,255,.10);
}

/* Input row */
.ha-ai-form{
  display: flex;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
}

.ha-ai-input{
  flex: 1;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(37,214,255,.45);
  background: rgba(0,0,0,.35);
  color: var(--text);
  padding: 0 12px;
  font-size: 16px; /* iOS zoom fix */
  outline: none;
}

.ha-ai-input::placeholder{
  color: rgba(255,255,255,.45);
}

.ha-ai-send{
  height: 44px;
  min-width: 84px;
  border-radius: 14px;
  border: 1px solid rgba(255,59,48,.55);
  background: rgba(255,59,48,.14);
  color: rgba(255,255,255,.92);
  font-weight: 700;
  cursor: pointer;
}

/* Scrollbar */
.ha-ai-messages::-webkit-scrollbar{ width: 10px; }
.ha-ai-messages::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 10px;
}

/* Small mobile polish */
@media (max-width: 520px){
  .ha-intro{
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ===== INSTALL BANNER ===== */
.ha-install{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(env(safe-area-inset-bottom) + 12px);
  z-index: 10000;
  display: none;
}

.ha-install.show{ display: block; }

.ha-install-inner{
  max-width: 520px;
  margin: 0 auto;
  border-radius: 18px;
  border: 2px solid rgba(255,59,48,.55);
  background: rgba(0,0,0,.72);
  box-shadow: var(--shadowRed), var(--shadowCyan);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 12px 12px;
}

.ha-install-title{
  font-weight: 800;
  color: rgba(255,255,255,.92);
  margin-bottom: 6px;
}

.ha-install-text{
  color: rgba(255,255,255,.70);
  font-size: 14px;
  line-height: 1.35;
  margin-bottom: 10px;
}

.ha-install-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.ha-install-btn{
  height: 40px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(37,214,255,.55);
  background: rgba(37,214,255,.12);
  color: rgba(255,255,255,.92);
  font-weight: 700;
  cursor: pointer;
}

.ha-install-close{
  height: 40px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.85);
  font-weight: 700;
  cursor: pointer;
}