/* ============================================================
   CASA — Mi-Casa chat-assistent (shared component)
   Theme per version via CSS vars on :root:
     --casa-accent   (default #C4643B)
     --casa-accent-2 (default #E8A45C)
     --casa-surface  (default rgba(30,22,17,.86))
     --casa-text     (default #F3E7D3)
     --casa-radius   (default 22px)
   ============================================================ */

.casa-root { --_accent: var(--casa-accent, #C4643B); --_accent2: var(--casa-accent-2, #E8A45C);
  --_surface: var(--casa-surface, rgba(30, 22, 17, .86)); --_text: var(--casa-text, #F3E7D3);
  --_radius: var(--casa-radius, 22px);
  position: fixed; right: clamp(.9rem, 2.5vw, 2rem); bottom: clamp(.9rem, 2.5vw, 2rem); z-index: 999;
  font-family: var(--casa-font, "Instrument Sans", system-ui, sans-serif); font-size: .95rem; line-height: 1.5;
}

/* ---- launcher ---- */
.casa-launcher {
  width: 64px; height: 64px; border-radius: 50%; border: none; cursor: pointer;
  display: grid; place-items: center; position: relative;
  background: radial-gradient(120% 120% at 30% 25%, var(--_accent2), var(--_accent) 60%);
  color: #FFF7EC;
  box-shadow: 0 4px 10px rgba(0,0,0,.25), 0 14px 44px color-mix(in srgb, var(--_accent) 55%, transparent),
              inset 0 1.5px 0 rgba(255,255,255,.35);
  transition: transform .3s cubic-bezier(.22,.8,.3,1), box-shadow .3s;
}
.casa-launcher:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 6px 14px rgba(0,0,0,.28), 0 22px 60px color-mix(in srgb, var(--_accent) 70%, transparent), inset 0 1.5px 0 rgba(255,255,255,.35); }
.casa-launcher::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--_accent2) 55%, transparent);
  animation: casa-breathe 3.2s ease-in-out infinite;
}
.casa-launcher svg { width: 30px; height: 30px; }
.casa-root.open .casa-launcher { transform: scale(0); pointer-events: none; }
@keyframes casa-breathe { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.14); opacity: .25; } }

/* ---- panel ---- */
.casa-panel {
  position: absolute; right: 0; bottom: 0;
  width: min(400px, calc(100vw - 2rem)); height: min(590px, calc(100dvh - 4rem));
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--_radius);
  background: var(--_surface);
  backdrop-filter: blur(22px) saturate(1.15); -webkit-backdrop-filter: blur(22px) saturate(1.15);
  border: 1px solid color-mix(in srgb, var(--_accent2) 30%, transparent);
  box-shadow: 0 8px 20px rgba(0,0,0,.3), 0 40px 110px rgba(0,0,0,.45),
              0 0 80px color-mix(in srgb, var(--_accent) 22%, transparent),
              inset 0 1px 0 rgba(255,255,255,.12);
  color: var(--_text);
  opacity: 0; transform: translateY(24px) scale(.96); pointer-events: none;
  transition: opacity .35s cubic-bezier(.22,.8,.3,1), transform .35s cubic-bezier(.22,.8,.3,1);
}
.casa-root.open .casa-panel { opacity: 1; transform: none; pointer-events: auto; }
/* ambient light inside the container */
.casa-panel::before {
  content: ""; position: absolute; inset: -40% -30% auto -30%; height: 70%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--_accent2) 26%, transparent), transparent 70%);
  animation: casa-ambient 9s ease-in-out infinite alternate;
}
@keyframes casa-ambient { from { transform: translateX(-6%) } to { transform: translateX(6%) } }

/* ---- header ---- */
.casa-head {
  display: flex; align-items: center; gap: .9rem; padding: 1.05rem 1.2rem;
  border-bottom: 1px solid color-mix(in srgb, var(--_text) 14%, transparent);
  position: relative;
}
.casa-avatar {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: radial-gradient(120% 120% at 30% 25%, var(--_accent2), var(--_accent) 65%);
  color: #FFF7EC; box-shadow: 0 4px 14px color-mix(in srgb, var(--_accent) 50%, transparent), inset 0 1px 0 rgba(255,255,255,.35);
}
.casa-avatar svg { width: 22px; height: 22px; }
.casa-title { display: grid; gap: .1rem; }
.casa-title b { font-size: 1.02rem; letter-spacing: .02em; }
.casa-status { display: flex; align-items: center; gap: .45em; font-size: .74rem; opacity: .78; }
.casa-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #7BC47F;
  box-shadow: 0 0 8px #7BC47F, 0 0 16px rgba(123,196,127,.6);
  animation: casa-breathe 2.6s ease-in-out infinite;
}
.casa-close {
  margin-left: auto; background: none; border: none; color: var(--_text); cursor: pointer;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  transition: background .2s, transform .2s;
}
.casa-close:hover { background: color-mix(in srgb, var(--_text) 12%, transparent); transform: rotate(90deg); }

/* ---- messages ---- */
.casa-body { flex: 1; overflow-y: auto; padding: 1.1rem; display: flex; flex-direction: column; gap: .65rem; scrollbar-width: thin; }
.casa-msg {
  max-width: 84%; padding: .7em 1em; border-radius: 16px; white-space: pre-line;
  animation: casa-msg-in .4s cubic-bezier(.22,.8,.3,1) both;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
@keyframes casa-msg-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.casa-msg.bot {
  align-self: flex-start; border-bottom-left-radius: 5px;
  background: color-mix(in srgb, var(--_text) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--_text) 10%, transparent);
}
.casa-msg.user {
  align-self: flex-end; border-bottom-right-radius: 5px; color: #FFF7EC;
  background: linear-gradient(140deg, var(--_accent2), var(--_accent) 70%);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--_accent) 40%, transparent);
}
.casa-msg a { color: var(--_accent2); font-weight: 600; }
.casa-msg .casa-li { display: block; padding-left: 1em; text-indent: -1em; }

/* typing indicator */
.casa-typing { display: inline-flex; gap: 5px; padding: .85em 1em; }
.casa-typing i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--_accent2); opacity: .5;
  animation: casa-type 1.1s ease-in-out infinite;
}
.casa-typing i:nth-child(2) { animation-delay: .18s; }
.casa-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes casa-type { 0%,100% { transform: translateY(0); opacity: .4; } 45% { transform: translateY(-5px); opacity: 1; } }

/* ---- product-kaartjes in de chat ---- */
.casa-prods { display: grid; gap: .5rem; margin: -.1rem 0 .3rem; animation: casa-msg-in .45s cubic-bezier(.22,.8,.3,1) both; }
.casa-prod {
  display: grid; grid-template-columns: 48px 1fr auto; gap: .7rem; align-items: center;
  background: color-mix(in srgb, var(--_text) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--_accent2) 22%, transparent);
  border-radius: 14px; padding: .5rem .6rem;
}
.casa-prod .cp-img { display: block; width: 48px; height: 48px; border-radius: 9px; overflow: hidden; background: #F2E3C8; flex: none; }
.casa-prod .cp-img img { width: 100%; height: 100%; object-fit: cover; }
.casa-prod .cp-info { display: grid; gap: .12rem; min-width: 0; }
.casa-prod .cp-name { font-weight: 600; font-size: .82rem; line-height: 1.2; text-decoration: none; color: var(--_text); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.casa-prod .cp-name:hover { color: var(--_accent2); }
.casa-prod .cp-price { font-family: var(--font-mono, monospace); font-size: .76rem; color: var(--_accent2); }
.casa-prod .cp-price s { opacity: .5; margin-right: .35em; }
.casa-prod .cp-add {
  width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer; flex: none;
  display: grid; place-items: center; text-decoration: none; font-size: 1.1rem; line-height: 1; color: #fff;
  background: linear-gradient(140deg, var(--_accent2), var(--_accent) 70%);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--_accent) 40%, transparent);
  transition: transform .2s;
}
.casa-prod .cp-add:hover { transform: scale(1.1); }
.casa-prod .cp-add.added { background: #7BC47F; }

/* ---- quick chips ---- */
.casa-chips { display: flex; flex-wrap: wrap; gap: .45rem; padding: 0 1.1rem .6rem; }
.casa-chip {
  border: 1px solid color-mix(in srgb, var(--_accent2) 55%, transparent); background: none; cursor: pointer;
  color: var(--_text); font: inherit; font-size: .78rem; padding: .45em 1em; border-radius: 999px;
  transition: background .2s, box-shadow .25s, transform .2s;
}
.casa-chip:hover { background: color-mix(in srgb, var(--_accent) 22%, transparent); box-shadow: 0 4px 18px color-mix(in srgb, var(--_accent) 35%, transparent); transform: translateY(-1px); }

/* ---- input ---- */
.casa-inputrow {
  display: flex; gap: .55rem; padding: .8rem 1.1rem 1rem;
  border-top: 1px solid color-mix(in srgb, var(--_text) 12%, transparent);
}
.casa-input {
  flex: 1; border-radius: 999px; padding: .75em 1.2em; font: inherit; font-size: .92rem;
  border: 1px solid color-mix(in srgb, var(--_text) 20%, transparent);
  background: color-mix(in srgb, var(--_text) 7%, transparent); color: var(--_text);
  transition: border-color .2s, box-shadow .25s;
}
.casa-input::placeholder { color: color-mix(in srgb, var(--_text) 45%, transparent); }
.casa-input:focus { outline: none; border-color: var(--_accent2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--_accent2) 22%, transparent); }
.casa-send {
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; flex: none;
  display: grid; place-items: center; color: #FFF7EC;
  background: linear-gradient(140deg, var(--_accent2), var(--_accent) 70%);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--_accent) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.3);
  transition: transform .2s cubic-bezier(.22,.8,.3,1), box-shadow .25s;
}
.casa-send:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 8px 26px color-mix(in srgb, var(--_accent) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.3); }
.casa-send svg { width: 19px; height: 19px; }

@media (prefers-reduced-motion: reduce) {
  .casa-launcher::before, .casa-panel::before, .casa-dot { animation: none; }
  .casa-msg { animation-duration: .01ms; }
  .casa-panel, .casa-launcher, .casa-close, .casa-chip, .casa-send { transition-duration: .01ms; }
}
@media (max-width: 480px) {
  .casa-panel { width: calc(100vw - 1.6rem); height: min(560px, calc(100dvh - 3rem)); }
}