/* =========================================================================
 * Lodge Mtandaoni — Chatbot widget styles
 * -------------------------------------------------------------------------
 *  Everything is scoped under #lmt-chatbot so these rules can NEVER leak out
 *  and restyle the host website (and the host's CSS is unlikely to leak in).
 *  Brand colours are defined once as CSS custom properties so you can
 *  re-theme the whole widget by editing the :root block below.
 * ========================================================================= */

/* --- 1) Theme tokens (edit these to re-brand) ------------------------- */
:root {
  --lmt-primary:        #0d2b1e;  /* deep lodge green (header / bot bubble) */
  --lmt-primary-dark:   #00150b;  /* darker green (gradients, hover)        */
  --lmt-accent:         #f6be39;  /* gold accent (send button, launcher)    */
  --lmt-accent-dark:    #d99e1f;  /* gold hover                              */
  --lmt-user-bubble:    #0d2b1e;  /* guest's own message bubble             */
  --lmt-bot-bubble:     #ffffff;  /* assistant message bubble               */
  --lmt-bg:             #fff8f6;  /* chat window background (warm off-white) */
  --lmt-text:           #2d1509;  /* primary text                           */
  --lmt-muted:          #6b5c52;  /* secondary / timestamp text             */
  --lmt-error:          #ba1a1a;  /* error banner                           */
  --lmt-radius:         18px;     /* window corner radius                    */
  --lmt-shadow:         0 12px 40px rgba(0, 21, 11, 0.28);
  --lmt-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* --- 2) Root container ------------------------------------------------ */
/* Fixed to the bottom-right of the viewport, above all page content.     */
#lmt-chatbot,
#lmt-chatbot * {
  box-sizing: border-box;
}
#lmt-chatbot {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2147483000;            /* sit above virtually any site chrome   */
  font-family: var(--lmt-font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--lmt-text);
}

/* --- 3) Floating launcher button ------------------------------------- */
/* The round button the visitor clicks to open the chat.                  */
.lmt-launcher {
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: radial-gradient(circle at 30% 30%, var(--lmt-accent), var(--lmt-accent-dark));
  color: var(--lmt-primary-dark);
  box-shadow: var(--lmt-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.lmt-launcher:hover  { transform: scale(1.06); }
.lmt-launcher:active { transform: scale(0.96); }
.lmt-launcher svg    { width: 30px; height: 30px; display: block; }

/* Small unread/attention dot on the launcher. */
.lmt-launcher .lmt-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--lmt-error);
  border: 2px solid var(--lmt-bg);
}

/* --- 3b) Drag-to-move handles ---------------------------------------- */
/* The launcher and the window header double as drag handles. Opting them out of
   native touch gestures keeps a drag from turning into a page scroll inside
   Android / iOS WebViews. Taps on the buttons they contain still work, and the
   message list / input keep their own touch behaviour (they are NOT handles).  */
#lmt-chatbot .lmt-launcher,
#lmt-chatbot .lmt-header {
  touch-action: none;
}
/* Desktop affordance: the header shows a move cursor. */
.lmt-header { cursor: grab; }
#lmt-chatbot.lmt-dragging,
#lmt-chatbot.lmt-dragging .lmt-launcher,
#lmt-chatbot.lmt-dragging .lmt-header { cursor: grabbing; }
/* While dragging, suppress text selection and any transition lag on the window. */
#lmt-chatbot.lmt-dragging { user-select: none; -webkit-user-select: none; }
#lmt-chatbot.lmt-dragging .lmt-window { transition: none; }

/* --- 4) Chat window --------------------------------------------------- */
.lmt-window {
  position: absolute;
  bottom: 78px;                  /* sit just above the launcher            */
  right: 0;
  width: 370px;
  height: 540px;
  max-height: calc(100vh - 110px);
  background: var(--lmt-bg);
  border-radius: var(--lmt-radius);
  box-shadow: var(--lmt-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
}

/* Open / close animation (driven by the .lmt-open class on #lmt-chatbot). */
.lmt-window {
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#lmt-chatbot.lmt-open .lmt-window {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
/* When the window is open, fade the launcher into a "close" affordance.   */
#lmt-chatbot.lmt-open .lmt-launcher { transform: scale(0.92); }

/* --- 5) Header -------------------------------------------------------- */
.lmt-header {
  background: linear-gradient(135deg, var(--lmt-primary), var(--lmt-primary-dark));
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.lmt-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--lmt-accent);
  color: var(--lmt-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex: 0 0 auto;
}
.lmt-header-text   { flex: 1 1 auto; min-width: 0; }
.lmt-title         { font-weight: 600; font-size: 15px; }
.lmt-subtitle      { font-size: 12px; opacity: 0.8; display: flex; align-items: center; gap: 6px; }
.lmt-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4ade80; flex: 0 0 auto;
}
/* Header buttons (clear history + close). */
.lmt-icon-btn {
  background: transparent;
  border: none;
  color: #fff;
  opacity: 0.85;
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  display: flex;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.lmt-icon-btn:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }
.lmt-icon-btn svg   { width: 20px; height: 20px; }

/* --- 6) Message list -------------------------------------------------- */
.lmt-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}
.lmt-messages::-webkit-scrollbar       { width: 7px; }
.lmt-messages::-webkit-scrollbar-thumb { background: #e3d2c8; border-radius: 4px; }

/* A single message row. */
.lmt-msg {
  max-width: 80%;
  padding: 10px 13px;
  border-radius: 14px;
  white-space: pre-wrap;        /* preserve line breaks from the model     */
  word-wrap: break-word;
  overflow-wrap: anywhere;
  animation: lmt-pop 0.18s ease;
}
@keyframes lmt-pop {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Assistant bubble (left aligned). */
.lmt-msg.bot {
  align-self: flex-start;
  background: var(--lmt-bot-bubble);
  border: 1px solid #f0e2da;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
/* Guest bubble (right aligned). */
.lmt-msg.user {
  align-self: flex-end;
  background: var(--lmt-user-bubble);
  color: #fff;
  border-bottom-right-radius: 4px;
}
/* Tiny timestamp under each bubble. */
.lmt-time {
  font-size: 10.5px;
  color: var(--lmt-muted);
  margin-top: 3px;
  padding: 0 4px;
}
.lmt-msg.user + .lmt-time { text-align: right; }

/* --- 7) Typing indicator (three bouncing dots) ----------------------- */
.lmt-typing {
  align-self: flex-start;
  background: var(--lmt-bot-bubble);
  border: 1px solid #f0e2da;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  padding: 12px 14px;
  display: none;                /* shown via .lmt-typing.show              */
}
.lmt-typing.show { display: flex; gap: 4px; }
.lmt-typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lmt-muted);
  animation: lmt-bounce 1.2s infinite ease-in-out;
}
.lmt-typing span:nth-child(2) { animation-delay: 0.15s; }
.lmt-typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes lmt-bounce {
  0%, 60%, 100% { transform: translateY(0);   opacity: 0.4; }
  30%           { transform: translateY(-5px); opacity: 1;   }
}

/* --- 8) Error banner -------------------------------------------------- */
.lmt-error {
  display: none;                /* shown via .lmt-error.show               */
  margin: 0 16px 8px;
  padding: 9px 12px;
  background: #ffe1e1;
  color: var(--lmt-error);
  border: 1px solid #f3b4b4;
  border-radius: 10px;
  font-size: 13px;
  align-items: center;
  gap: 8px;
}
.lmt-error.show { display: flex; }
.lmt-error button {
  margin-left: auto;
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  border-radius: 7px;
  padding: 2px 8px;
  font-size: 12px;
  cursor: pointer;
}

/* --- 9) Input row ----------------------------------------------------- */
.lmt-input {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px;
  background: #fff;
  border-top: 1px solid #f0e2da;
}
.lmt-input textarea {
  flex: 1 1 auto;
  resize: none;
  border: 1px solid #e4d4ca;
  border-radius: 12px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  max-height: 110px;           /* grows up to ~4 lines, then scrolls       */
  outline: none;
  background: var(--lmt-bg);
  color: var(--lmt-text);
  transition: border-color 0.15s ease;
}
.lmt-input textarea:focus { border-color: var(--lmt-primary); }
.lmt-input textarea::placeholder { color: #b3a99f; }

.lmt-send {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: var(--lmt-accent);
  color: var(--lmt-primary-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.1s ease;
}
.lmt-send:hover:not(:disabled)  { background: var(--lmt-accent-dark); }
.lmt-send:active:not(:disabled) { transform: scale(0.9); }
.lmt-send:disabled { opacity: 0.45; cursor: not-allowed; }
.lmt-send svg { width: 20px; height: 20px; }

/* Small footer note under the input. */
.lmt-footer {
  flex: 0 0 auto;
  text-align: center;
  font-size: 10.5px;
  color: var(--lmt-muted);
  padding: 0 0 8px;
  background: #fff;
}

/* --- 9b) Settings panel ---------------------------------------------- */
/* Slides over the chat when the gear icon is tapped. Holds the on/off toggle. */
.lmt-settings {
  position: absolute;
  inset: 0;
  background: var(--lmt-bg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.22s ease;
  z-index: 5;
}
#lmt-chatbot.lmt-settings-open .lmt-settings { transform: translateX(0); }
.lmt-settings-body { padding: 18px 16px; display: flex; flex-direction: column; gap: 16px; }

/* A single settings row: label on the left, control on the right. */
.lmt-srow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  background: #fff;
  border: 1px solid #f0e2da;
  border-radius: 12px;
}
.lmt-slabel { font-weight: 600; color: var(--lmt-primary); }
.lmt-shint  { font-size: 12.5px; color: var(--lmt-muted); margin-top: 2px; }
.lmt-snote  { font-size: 12.5px; color: var(--lmt-muted); line-height: 1.5; padding: 0 4px; }

/* Toggle switch (styled checkbox). */
.lmt-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: 0 0 auto; }
.lmt-switch-input { opacity: 0; width: 0; height: 0; position: absolute; }
.lmt-slider {
  position: absolute; inset: 0; cursor: pointer;
  background: #cdbfb6; border-radius: 999px;
  transition: background 0.18s ease;
}
.lmt-slider::before {
  content: ""; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform 0.18s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.lmt-switch-input:checked + .lmt-slider { background: var(--lmt-primary); }
.lmt-switch-input:checked + .lmt-slider::before { transform: translateX(20px); }
.lmt-switch-input:focus-visible + .lmt-slider { outline: 2px solid var(--lmt-accent); outline-offset: 2px; }

/* --- 9c) Disabled state + "Assistant off" re-enable tab -------------- */
/* When the user turns the assistant off, hide the launcher + window and (by
   default) show a small tab that lets them switch it back on.               */
.lmt-offtab {
  display: none;
  border: none;
  cursor: pointer;
  background: var(--lmt-primary);
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  padding: 9px 14px;
  border-radius: 999px;
  box-shadow: var(--lmt-shadow);
  opacity: 0.92;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.lmt-offtab:hover { opacity: 1; transform: translateY(-1px); }

#lmt-chatbot.lmt-disabled .lmt-window,
#lmt-chatbot.lmt-disabled .lmt-launcher { display: none; }
#lmt-chatbot.lmt-disabled .lmt-offtab { display: inline-block; }
#lmt-chatbot.lmt-disabled.lmt-hide-offtab .lmt-offtab { display: none; }

/* --- 10) Responsive: phones ------------------------------------------ */
/* On small screens the window becomes (almost) full-screen so it is easy  */
/* to type on a phone keyboard. Also respects iOS safe-area insets.        */
@media (max-width: 480px) {
  #lmt-chatbot {
    right: 14px;
    bottom: 14px;
  }
  #lmt-chatbot.lmt-open .lmt-window {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;            /* dynamic viewport height (mobile browsers) */
    max-height: none;
    border-radius: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  /* Hide the launcher while the full-screen window is open. */
  #lmt-chatbot.lmt-open .lmt-launcher { display: none; }
}

/* --- 11) Accessibility: respect "reduce motion" ---------------------- */
@media (prefers-reduced-motion: reduce) {
  .lmt-window, .lmt-msg, .lmt-launcher, .lmt-send, .lmt-settings,
  .lmt-slider, .lmt-slider::before, .lmt-offtab,
  .lmt-typing span { animation: none !important; transition: none !important; }
}