/* Van Hameren Houthulp AI - premium verkoopassistent UI v201.61
   Alleen visuele overrides; bestaande Houthulp-logica blijft leidend. */
:root{
  --hhp-blue:#075f9f;
  --hhp-blue-dark:#064b7d;
  --hhp-sky:#eaf5fb;
  --hhp-ink:#102f45;
  --hhp-muted:#60798a;
  --hhp-line:#d8e4ec;
  --hhp-bg:#f4f7f9;
  --hhp-card:#fff;
  --hhp-green:#168454;
}

.houthulp-panel{
  width:min(430px,calc(100vw - 28px))!important;
  height:min(640px,calc(100dvh - 104px))!important;
  border:1px solid rgba(20,75,110,.16)!important;
  border-radius:20px!important;
  background:var(--hhp-bg)!important;
  box-shadow:0 28px 80px rgba(9,44,68,.28),0 5px 18px rgba(9,44,68,.12)!important;
}
.houthulp-head{
  min-height:76px!important;
  padding:12px 14px!important;
  gap:11px!important;
  background:linear-gradient(135deg,#07578f 0%,#087ab9 100%)!important;
  border-bottom:1px solid rgba(255,255,255,.15)!important;
}
.houthulp-avatar{
  width:42px!important;height:42px!important;flex:0 0 42px!important;
  border-radius:13px!important;
  background:#fff!important;color:#075f9f!important;
  border:1px solid rgba(255,255,255,.65)!important;
  box-shadow:0 5px 14px rgba(0,39,67,.16)!important;
  font-size:16px!important;font-weight:900!important;
}
.houthulp-head__text strong{font-size:1rem!important;letter-spacing:-.01em!important}
.houthulp-head__text span{font-size:.7rem!important;opacity:.95!important;font-weight:650!important}
.houthulp-status-dot{width:7px!important;height:7px!important;background:#7df0ae!important;box-shadow:0 0 0 3px rgba(125,240,174,.15)!important}
.houthulp-head button{
  width:36px!important;height:36px!important;flex-basis:36px!important;
  border-radius:11px!important;background:rgba(255,255,255,.12)!important;
  border:1px solid rgba(255,255,255,.08)!important;
}
.houthulp-head button:hover{background:rgba(255,255,255,.22)!important}

.houthulp-body{
  padding:16px!important;
  background:linear-gradient(180deg,#f7fafc 0%,#f3f6f8 100%)!important;
  scrollbar-color:#b9cbd7 transparent;
}
.houthulp-msg{margin-bottom:10px!important}
.houthulp-msg--assistant .houthulp-bubble{
  max-width:92%!important;
  padding:10px 12px!important;
  border:1px solid #dde7ed!important;
  border-radius:15px 15px 15px 5px!important;
  background:#fff!important;
  color:var(--hhp-ink)!important;
  box-shadow:0 4px 14px rgba(28,65,91,.055)!important;
  line-height:1.48!important;
}
.houthulp-msg--welcome .houthulp-bubble{
  max-width:100%!important;
  width:100%!important;
  padding:15px 16px 14px!important;
  border:1px solid #cfe1ec!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,#fff 0%,#f7fbfd 100%)!important;
  box-shadow:0 8px 24px rgba(20,72,104,.07)!important;
  font-size:.86rem!important;
}
.houthulp-msg--welcome .houthulp-bubble::before{
  content:'VAN HAMEREN HOUTHULP';
  display:block;
  margin:0 0 7px;
  color:#0874ad;
  font-size:.62rem;
  line-height:1;
  font-weight:950;
  letter-spacing:.09em;
}
.houthulp-msg--user .houthulp-bubble{
  max-width:82%!important;
  padding:10px 12px!important;
  border:0!important;
  border-radius:15px 15px 5px 15px!important;
  background:linear-gradient(135deg,#0877b6,#075f9f)!important;
  color:#fff!important;
  box-shadow:0 5px 15px rgba(7,95,159,.16)!important;
}

/* De vaste startsuggesties voelen nu als een keuzemenu, niet als formulierknoppen. */
.houthulp-chips{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  margin:2px 0 15px!important;
  overflow:visible!important;
}
.houthulp-chip{
  position:relative!important;
  width:100%!important;
  min-height:68px!important;
  padding:34px 11px 10px!important;
  text-align:left!important;
  white-space:normal!important;
  border:1px solid #d4e2ea!important;
  border-radius:13px!important;
  background:#fff!important;
  color:#173a51!important;
  box-shadow:0 4px 14px rgba(31,70,95,.045)!important;
  font-size:.74rem!important;
  line-height:1.25!important;
  font-weight:850!important;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease!important;
}
.houthulp-chip::before{
  position:absolute;left:11px;top:9px;
  width:20px;height:20px;display:grid;place-items:center;
  color:#0874ad;font-size:16px;font-weight:900;
}
.houthulp-chips .houthulp-chip:nth-child(1)::before{content:'⌕'}
.houthulp-chips .houthulp-chip:nth-child(2)::before{content:'▱'}
.houthulp-chips .houthulp-chip:nth-child(3)::before{content:'€'}
.houthulp-chips .houthulp-chip:nth-child(4)::before{content:'◷'}
.houthulp-chip:hover{
  transform:translateY(-2px)!important;
  border-color:#77b6d6!important;
  box-shadow:0 8px 20px rgba(31,88,120,.09)!important;
  background:#fff!important;
}
.houthulp-category-link{display:block!important;margin-top:6px!important}
.houthulp-category-link .houthulp-chip{min-height:42px!important;padding:11px 13px!important}
.houthulp-category-link .houthulp-chip::before{display:none!important}

/* Producten: beeld en koopinformatie krijgen meer gewicht. */
.houthulp-products{gap:10px!important;margin:9px 0 15px!important}
.houthulp-product{
  position:relative!important;
  display:grid!important;
  grid-template-columns:78px minmax(0,1fr)!important;
  grid-template-areas:'photo info' 'photo action'!important;
  gap:5px 11px!important;
  min-height:96px!important;
  padding:9px!important;
  border:1px solid #d5e2e9!important;
  border-radius:15px!important;
  background:#fff!important;
  box-shadow:0 5px 17px rgba(24,63,88,.055)!important;
}
.houthulp-product>img{grid-area:photo!important;width:78px!important;height:78px!important;border-radius:11px!important;object-fit:cover!important;background:#edf3f6!important}
.houthulp-product__info{grid-area:info!important;padding-right:28px!important}
.houthulp-product__info strong{font-size:.8rem!important;line-height:1.25!important;color:#102f45!important}
.houthulp-product__info span{margin-top:3px!important;font-size:.67rem!important;color:#627b8b!important;white-space:normal!important}
.houthulp-product__info small{margin-top:4px!important;font-size:.65rem!important;color:var(--hhp-green)!important;font-weight:800!important}
.houthulp-product__action{
  grid-area:action!important;
  display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;
}
.houthulp-product__price{font-size:.82rem!important;color:#0d4566!important;font-weight:950!important}
.houthulp-product__price small{display:block!important;margin-top:1px!important;font-size:.56rem!important;color:#6f8390!important;font-weight:650!important}
.houthulp-product__action button{
  min-height:31px!important;padding:6px 10px!important;border-radius:9px!important;
  background:#075f9f!important;font-size:.66rem!important;font-weight:900!important;
}
.houthulp-favorite{position:absolute!important;right:8px!important;top:8px!important;width:27px!important;height:27px!important;z-index:2!important}

.houthulp-related{margin:8px 0 13px!important;padding:10px!important;border-radius:15px!important;background:#edf5f9!important;border:1px solid #d3e4ed!important}
.houthulp-related__head strong{font-size:.78rem!important;color:#12384f!important}
.houthulp-related__item{position:relative!important;border-radius:12px!important;padding:8px!important}

/* Offerte als duidelijk zakelijk document in plaats van een chatblok. */
.houthulp-quote{
  margin:10px 0 15px!important;
  border:1px solid #bcd6e4!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 8px 24px rgba(18,67,96,.08)!important;
}
.houthulp-quote__head{
  padding:11px 13px!important;
  background:linear-gradient(135deg,#e7f4fa,#f4f9fc)!important;
  border-bottom:1px solid #d5e6ee!important;
}
.houthulp-quote__head strong{font-size:.84rem!important;color:#0d4567!important}
.houthulp-quote__head span{padding:3px 7px!important;border-radius:999px!important;background:#fff!important;color:#17638d!important;border:1px solid #c9dfe9!important}
.houthulp-quote__body{padding:12px 13px!important;gap:8px!important}
.houthulp-quote__row{font-size:.75rem!important}
.houthulp-quote__row--total{margin-top:3px!important;padding-top:10px!important;font-size:.9rem!important;border-top:1px solid #dbe6ec!important}
.houthulp-quote__actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}
.houthulp-quote__actions>*{min-height:38px!important;border-radius:9px!important;font-size:.68rem!important;font-weight:900!important}
.houthulp-quote__actions .is-primary{grid-column:1/-1!important;background:#075f9f!important;border-color:#075f9f!important;color:#fff!important}
.houthulp-quote-form{margin-top:10px!important;padding:12px!important;border-radius:11px!important;background:#f5f9fb!important}
.houthulp-quote-form>p{margin:0 0 10px!important;color:#536f80!important;font-size:.67rem!important;line-height:1.4!important}
.houthulp-quote-form label{font-size:.66rem!important;font-weight:850!important;color:#294d63!important}
.houthulp-quote-form input{border-radius:8px!important;padding:8px 9px!important;border-color:#c3d6e0!important;background:#fff!important}
.houthulp-quote-form__choice{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;margin:9px 0!important}
.houthulp-quote-form__choice label{padding:8px!important;border:1px solid #d1e0e8!important;border-radius:9px!important;background:#fff!important;flex-direction:row!important;align-items:center!important}
.houthulp-quote-form__submit{min-height:40px!important;border-radius:9px!important;background:#075f9f!important;font-weight:900!important}

.houthulp-service-cta{
  margin:8px 0 13px!important;padding:11px 12px!important;
  border:1px solid #cce0ea!important;border-radius:14px!important;
  background:linear-gradient(135deg,#eef8fc,#fff)!important;
}
.houthulp-service-cta strong{font-size:.76rem!important}.houthulp-service-cta span{font-size:.65rem!important}
.houthulp-context{border-radius:10px!important;padding:8px 10px!important}

/* Input als compacte assistentbalk; geen groot leeg tekstvak meer. */
.houthulp-foot{
  padding:10px 11px 9px!important;
  border-top:1px solid #dbe5eb!important;
  background:#fff!important;
  box-shadow:0 -8px 20px rgba(17,55,80,.045)!important;
}
.houthulp-inputrow{grid-template-columns:minmax(0,1fr) 44px!important;gap:8px!important;align-items:end!important}
.houthulp-input{
  min-height:48px!important;max-height:104px!important;
  padding:13px 13px!important;
  border:1px solid #c8d7e0!important;border-radius:13px!important;
  background:#f9fbfc!important;
  font-size:.84rem!important;line-height:1.35!important;
  box-shadow:inset 0 1px 2px rgba(18,58,83,.025)!important;
}
.houthulp-input:focus{background:#fff!important;border-color:#4e9fc9!important;box-shadow:0 0 0 3px rgba(8,119,182,.09)!important}
.houthulp-send{width:44px!important;min-width:44px!important;height:44px!important;border-radius:12px!important;background:#075f9f!important;box-shadow:0 5px 13px rgba(7,95,159,.18)!important}
.houthulp-foot__hint{margin-top:6px!important;font-size:.59rem!important;color:#758894!important}

.houthulp-launcher{
  min-width:164px!important;height:50px!important;padding:0 18px!important;
  background:linear-gradient(135deg,#0780c2,#075f9f)!important;
  border:1px solid rgba(255,255,255,.22)!important;
  box-shadow:0 13px 30px rgba(5,74,120,.28)!important;
}
.houthulp-launcher span{font-size:14px!important;letter-spacing:.01em!important}

@media(max-width:767px){
  .houthulp-panel{border-radius:0!important}
  .houthulp-head{min-height:68px!important;padding:10px 12px!important}
  .houthulp-body{padding:12px!important}
  .houthulp-msg--welcome .houthulp-bubble{padding:13px 14px!important}
  .houthulp-chips{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .houthulp-chip{min-height:64px!important;padding:32px 9px 9px!important;font-size:.71rem!important}
  .houthulp-product{grid-template-columns:70px minmax(0,1fr)!important}
  .houthulp-product>img{width:70px!important;height:70px!important}
  .houthulp-foot{padding:8px 9px calc(8px + max(0px,env(safe-area-inset-bottom)))!important}
  .houthulp-input{min-height:48px!important;max-height:92px!important;padding:12px!important;font-size:16px!important}
  .houthulp-send{width:44px!important;min-width:44px!important;height:44px!important}
}
@media(max-width:370px){
  .houthulp-chips{grid-template-columns:1fr!important}
  .houthulp-chip{min-height:54px!important;padding:17px 10px 10px 38px!important}
  .houthulp-chip::before{left:10px;top:16px}
}

/* 201.64 - slimme verkoopafsluiting en orderflow */
.houthulp-sales-actions{margin-top:6px!important}
.houthulp-sales-actions .houthulp-chip:nth-child(1)::before{content:'＋'!important}
.houthulp-sales-actions .houthulp-chip:nth-child(2)::before{content:'€'!important}
.houthulp-sales-actions .houthulp-chip:nth-child(3)::before{content:'⌂'!important}
.houthulp-sales-actions .houthulp-chip:nth-child(4)::before{content:'↗'!important}
.houthulp-sales-actions .houthulp-chip:first-child{background:#0b7eb9!important;color:#fff!important;border-color:#0b7eb9!important}
.houthulp-sales-actions .houthulp-chip:first-child::before{color:#fff!important}
.houthulp-product__application{display:block!important;color:#4c7185!important;font-weight:700!important;line-height:1.25!important}

/* 203.5 - checkout mobiel: Houthulp compact zodat formulier niet wordt bedekt */
@media(max-width:767px){
  body.vh-page--checkout .houthulp-launcher,
  body.vh-page--cart .houthulp-launcher{
    width:48px!important;
    min-width:48px!important;
    height:48px!important;
    padding:0!important;
    border-radius:50%!important;
    right:max(10px,env(safe-area-inset-right))!important;
    bottom:calc(92px + max(0px,env(safe-area-inset-bottom)))!important;
  }
  body.vh-page--checkout .houthulp-launcher span,
  body.vh-page--cart .houthulp-launcher span{display:none!important}
  body.vh-page--checkout .houthulp-launcher svg,
  body.vh-page--cart .houthulp-launcher svg{width:23px!important;height:23px!important}
}