/* EVBINOS public booking page: the widget chat (frame.css) as a large, mobile-first full page. */
html, body.bk { height: 100%; }
body.bk {
  min-height: 100vh; min-height: 100dvh;
  background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 14%, #fff), #f1f5f9 55%);
  background-color: #f1f5f9;
  overflow-x: hidden;
}
.bk-shell {
  display: flex; flex-direction: column;
  width: 100%; max-width: 860px; height: 100vh; height: 100dvh;
  margin: 0 auto; padding: 20px 20px 24px;
}
.bk-head { display: flex; align-items: center; gap: 14px; padding: 4px 4px 16px; min-width: 0; }
.bk-avatar { width: 48px; height: 48px; font-size: 17px; background: var(--brand); color: #fff; }
.bk-title { flex: 1; min-width: 0; }
.bk-title h1 { margin: 0; font-size: 1.35rem; line-height: 1.25; overflow-wrap: anywhere; }
.bk-title p { margin: 2px 0 0; color: #475569; font-size: .92rem; }
.bk-lang { display: flex; gap: 2px; padding: 3px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; flex: none; }
.bk-lang a { padding: 5px 8px; border-radius: 7px; color: #475569; font-size: .78rem; font-weight: 700; text-decoration: none; }
.bk-lang a.is-active { background: var(--brand); color: #fff; }
.bk-lang a:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.w-root.bk-chat {
  flex: 1; min-height: 0; height: auto;
  border: 1px solid #e2e8f0; border-radius: 20px; overflow: hidden;
  background: #fff; box-shadow: 0 18px 50px rgba(15, 23, 42, .12);
}
.bk-chat .w-log { padding: 20px; gap: 10px; }
.bk-chat .w-bubble { max-width: min(78%, 620px); font-size: 16px; line-height: 1.5; padding: 11px 15px; }
.bk-chat .w-form { padding: 12px 14px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
/* 16px stops iOS from zooming into the input when the keyboard opens. */
.bk-chat .w-form input, .bk-chat .w-lead input, .bk-chat .w-lead textarea { font-size: 16px; }
.bk-chat .w-form input { padding: 12px 16px; }
.bk-chat .w-send { width: 46px; height: 46px; }
.bk-chat .w-chip { font-size: 15px; }
.bk-context {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid #e5e7eb;
  background: color-mix(in srgb, var(--brand) 8%, #fff); font-size: .9rem;
}
.bk-context span { color: #475569; }

@media (max-width: 640px) {
  .bk-shell { padding: 0; max-width: none; }
  .bk-head { padding: 12px 14px; padding-top: max(12px, env(safe-area-inset-top)); background: #fff; border-bottom: 1px solid #e5e7eb; }
  .bk-avatar { width: 40px; height: 40px; font-size: 15px; }
  .bk-title h1 { font-size: 1.05rem; }
  .bk-title p { font-size: .8rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .w-root.bk-chat { border: 0; border-radius: 0; box-shadow: none; }
  .bk-chat .w-log { padding: 14px 12px; }
  .bk-chat .w-bubble { max-width: 86%; font-size: 15.5px; }
}

body.bk[data-theme=dark] { background: #070914; }
body.bk[data-theme=dark] .bk-title p, body.bk[data-theme=dark] .bk-context span { color: #9a9fc4; }
body.bk[data-theme=dark] .bk-title h1 { color: #eef0ff; }
body.bk[data-theme=dark] .w-root.bk-chat { border-color: #23284a; background: #0b0d1a; }
body.bk[data-theme=dark] .bk-lang { background: #10132a; border-color: #23284a; }
body.bk[data-theme=dark] .bk-lang a { color: #c4c8ee; }
body.bk[data-theme=dark] .bk-context { background: #10132a; border-color: #23284a; }
@media (max-width: 640px) {
  body.bk[data-theme=dark] .bk-head { background: #10132a; border-color: #23284a; }
}