/* Chat: duidelijkere bediening en betere mobiele weergave.
   Overschrijft alleen de inline chatstijlen van de pagina's; de werking zelf staat in de pagina's. */

/* Sluitknop: groot en goed zichtbaar */
.chat-header-close{color:#fff;background:rgba(255,255,255,.2);width:40px;height:40px;font-size:1.7rem;line-height:1;flex-shrink:0}
.chat-header-close:hover,.chat-header-close:focus-visible{background:rgba(255,255,255,.35);outline:none}

/* Invoerbalk: duidelijk kader; 16px voorkomt inzoomen op iPhone */
.chat-input-row{align-items:center;padding:12px}
.chat-input{border:2px solid #b8bcc6;background:#fff;font-size:16px;padding:10px 16px;min-height:46px}
.chat-input::placeholder{color:#7a7f8c;font-weight:500}
.chat-input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(213,22,62,.15)}

/* Verzendknop: groter aanraakvlak */
.chat-send{width:46px;height:46px;font-size:1.15rem}
.chat-send:hover{transform:scale(1.06)}
.chat-send:focus-visible,.chat-btn:focus-visible,.chat-sug:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* Suggesties iets groter, makkelijker aan te tikken */
.chat-sug{font-family:'Montserrat',sans-serif;font-size:.8rem;padding:8px 14px}

/* Mobiel: venster over de volle breedte, past in het scherm (ook met toetsenbord, zie chat.js) */
@media(max-width:640px){
  .chat-panel{left:8px;right:8px;bottom:8px;width:auto;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);border-radius:18px;z-index:200}
  .chat-header{padding:14px 16px}
  .chat-messages{min-height:0;max-height:none;flex:1 1 auto}
  body.chat-open .chat-btn-wrap,body.chat-open .chat-btn{display:none!important}
}