/* ============================================================
   MLHS floating live-chat widget — bubble + panel.
   Self-contained: declares its own scoped variables so it renders
   consistently across every public page regardless of which base
   stylesheet that page loads (mlhs-2028.css, book-2028.css, etc).
   Cream canvas / forest / gold-accent tokens only — no dark canvas,
   no black backgrounds, no emoji.
   ============================================================ */

#mtb-chat-root {
  --mtbc-canvas:      #F7F5F0;
  --mtbc-surface:     #FFFFFF;
  --mtbc-surface-2:   #F1EDE4;
  --mtbc-ink:         #0E1F1A;
  --mtbc-ink-soft:    #2A342F;
  --mtbc-muted:       #565C57;
  --mtbc-faint:       #8A8578;
  --mtbc-line:        #E4E0D6;

  --mtbc-forest:      #0F5132;
  --mtbc-forest-2:    #0A3D26;
  --mtbc-forest-tint: #DDEEE1;

  --mtbc-gold:        #A8811F;
  --mtbc-gold-dark:   #7A5C10;

  --mtbc-coral:       #A3301A;

  --mtbc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mtbc-font-display: 'Instrument Serif', 'Times New Roman', serif;
  --mtbc-font-mono: 'JetBrains Mono', ui-monospace, monospace;

  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2147483000;
  font-family: var(--mtbc-font-sans);
  color: var(--mtbc-ink-soft);
}

#mtb-chat-root * { box-sizing: border-box; }
#mtb-chat-root button { font-family: inherit; cursor: pointer; }

/* ---------- Bubble ---------- */
.mtbc-bubble {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--mtbc-forest); color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: none; box-shadow: 0 10px 26px -8px rgba(15,81,50,.45);
  transition: transform 160ms cubic-bezier(0.2,0.8,0.2,1), background 160ms;
  position: relative;
}
.mtbc-bubble:hover { transform: translateY(-2px); background: var(--mtbc-forest-2); }
.mtbc-bubble svg { width: 26px; height: 26px; }
.mtbc-bubble .mtbc-dot {
  position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 4px;
  border-radius: 999px; background: var(--mtbc-gold); color: #fff; font-size: 10.5px;
  font-weight: 800; display: none; align-items: center; justify-content: center;
  border: 2px solid var(--mtbc-canvas);
}
.mtbc-bubble .mtbc-dot.show { display: flex; }

/* ---------- Panel ---------- */
.mtbc-panel {
  position: absolute; bottom: 72px; right: 0;
  width: min(340px, calc(100vw - 32px));
  height: min(480px, calc(100vh - 140px));
  background: var(--mtbc-surface);
  border: 1px solid var(--mtbc-line);
  border-radius: 20px;
  box-shadow: 0 24px 60px -16px rgba(14,31,26,.28);
  display: none;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px) scale(.98);
  transition: opacity 160ms cubic-bezier(0.2,0.8,0.2,1), transform 160ms cubic-bezier(0.2,0.8,0.2,1);
}
.mtbc-panel.open { display: flex; opacity: 1; transform: translateY(0) scale(1); }

.mtbc-panel-hd {
  background: var(--mtbc-forest); color: #fff; padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.mtbc-panel-hd-title { font-family: var(--mtbc-font-display); font-size: 19px; font-weight: 400; }
.mtbc-panel-hd-sub { font-size: 11px; opacity: .82; margin-top: 1px; font-family: var(--mtbc-font-mono); letter-spacing: .02em; }
.mtbc-close {
  background: rgba(255,255,255,.14); border: none; color: #fff; width: 28px; height: 28px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mtbc-close:hover { background: rgba(255,255,255,.26); }

.mtbc-body { flex: 1; overflow-y: auto; padding: 16px; background: var(--mtbc-canvas); }

/* ---- Start form ---- */
.mtbc-start p { margin: 0 0 14px; font-size: 13px; color: var(--mtbc-muted); line-height: 1.5; }
.mtbc-field { margin-bottom: 10px; }
.mtbc-field label { display: block; font-size: 11px; font-weight: 700; color: var(--mtbc-ink); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .04em; }
.mtbc-field input {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--mtbc-line);
  background: var(--mtbc-surface); color: var(--mtbc-ink); font-size: 13.5px;
}
.mtbc-field input:focus { outline: none; border-color: var(--mtbc-forest); }
.mtbc-start-btn {
  width: 100%; margin-top: 4px; padding: 11px 14px; border-radius: 10px; border: none;
  background: var(--mtbc-forest); color: #fff; font-weight: 700; font-size: 13.5px;
}
.mtbc-start-btn:hover { background: var(--mtbc-forest-2); }
.mtbc-start-btn[disabled] { opacity: .6; cursor: default; }
.mtbc-error { color: var(--mtbc-coral); font-size: 12px; margin-top: 8px; display: none; }

/* ---- Thread ---- */
.mtbc-msgs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mtbc-msg { max-width: 82%; padding: 9px 12px; border-radius: 14px; font-size: 13px; line-height: 1.45; word-wrap: break-word; }
.mtbc-msg time { display: block; font-size: .64rem; opacity: .62; margin-top: 3px; }
.mtbc-msg--customer { align-self: flex-end; background: var(--mtbc-forest); color: #fff; border-bottom-right-radius: 4px; }
.mtbc-msg--admin { align-self: flex-start; background: var(--mtbc-surface-2); color: var(--mtbc-ink-soft); border-bottom-left-radius: 4px; }
.mtbc-thread-empty { text-align: center; color: var(--mtbc-faint); font-size: 12.5px; padding: 24px 8px; }

.mtbc-composer {
  display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--mtbc-line);
  background: var(--mtbc-surface); flex-shrink: 0;
}
.mtbc-composer input {
  flex: 1; padding: 10px 12px; border-radius: 999px; border: 1px solid var(--mtbc-line);
  background: var(--mtbc-canvas); color: var(--mtbc-ink); font-size: 13px;
}
.mtbc-composer input:focus { outline: none; border-color: var(--mtbc-forest); }
.mtbc-composer button {
  flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--mtbc-forest);
  border: none; color: #fff; display: grid; place-items: center;
}
.mtbc-composer button:hover { background: var(--mtbc-forest-2); }
.mtbc-composer button[disabled] { opacity: .55; cursor: default; }

@media (max-width: 420px) {
  #mtb-chat-root { right: 14px; bottom: 14px; }
  .mtbc-panel { width: calc(100vw - 24px); right: -6px; }
}