/* ===== chat: always readable (no auto-dark / no invisible text) and keyboard-safe ===== */
:root{color-scheme:only light}
.chat,.chat *{color-scheme:only light}
.chat{color:#211712;height:min(540px,calc(100dvh - 130px))}
.chat-body,.msg.bot,.msg.bot *{color:#211712;-webkit-text-fill-color:#211712;opacity:1}
.msg.me{color:#fff;-webkit-text-fill-color:#fff}
.chat-h,.chat-h *{color:#fff;-webkit-text-fill-color:#fff}
.chat-f input{color:#211712;-webkit-text-fill-color:#211712;caret-color:#f85a00;background:#fff;opacity:1;-webkit-appearance:none;appearance:none;-webkit-user-select:text;user-select:text}
.chat-f input::placeholder{color:#857463;-webkit-text-fill-color:#857463;opacity:1}
.acts a{color:#fff;-webkit-text-fill-color:#fff}
.qr button{-webkit-text-fill-color:currentColor}
.msg{white-space:normal;word-break:normal}

/* ===== popup layout fixes ===== */
.chat-body{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;min-height:0}   /* scrolling the chat never scrolls the page behind it */
.msg.me{white-space:pre-wrap}
.msg.bot b{font-weight:700}
.chat-f,.qr,.chat-note{flex:0 0 auto}
.chat-f input{border:1px solid rgba(0,0,0,.14);border-radius:12px}
.chat-f input:focus{border-color:#f85a00}

@media(max-width:480px){
  /* phone: the popup sits above the keyboard (positioned by chat.js) and the round button is hidden while it is open,
     so it can no longer cover the Send button. Close with the ✕ in the header. */
  .chat{left:10px;right:10px;width:auto;bottom:10px;height:min(78dvh,620px);border-radius:18px}
  .ready .fab.open{opacity:0;pointer-events:none;transform:scale(.6)}
}

/* keyboard open (phones and tablets): chat.js fits the popup into the visible screen above the keyboard */
html.qt-lock,html.qt-lock body{overflow:hidden!important;overscroll-behavior:none}
.chat.kb{border-radius:16px;box-shadow:0 10px 30px -10px rgba(80,35,5,.5)}
.chat.kb .chat-note,.chat.kb .qr{display:none}            /* give the messages the room */
.chat.kb .chat-h{padding:9px 14px}
.chat.kb .chat-av{width:34px;height:34px;font-size:16px}
.chat.kb .chat-body{padding:12px}
@media(max-width:480px){.chat.kb{left:8px;right:8px;width:auto}}