/* Hubi chatbot — DESIGN 3: ChatGPT Minimal (user-selected 2026-10-27)
 * Almost no decoration: white panel, thin borders, Hubi messages as
 * plain text (no bubble), visitor messages in a light-grey bubble.
 * The only colour accent is the small robot button + black Send button.
 * Responsive: the panel never exceeds the viewport width, and on
 * phones it becomes a near-full-width sheet with a scrollable chat. */
.lth-chatbot { position: fixed; right: 20px; bottom: 20px; z-index: 9999; font-family: inherit; }
.lth-chatbot, .lth-chatbot * { box-sizing: border-box; }
.lth-chatbot-toggle {
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: #111; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.lth-chatbot-toggle:active { transform: scale(.96); }
/* Hubi icon: the user's robot image (complete full-body robot,
 * assets/hubi-icon.png, fitted into a square black canvas so the
 * round button never clips head, hand or feet). It fills the round
 * button/avatar so the black image background blends with the
 * button and no square corners show. */
.lth-chatbot-toggle .lth-robot-img { display: block; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.lth-chatbot-avatar .lth-robot-img { display: block; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.lth-chatbot-panel {
  position: absolute; right: 0; bottom: 72px;
  width: 460px; max-width: calc(100vw - 32px);
  height: 560px; max-height: min(600px, 82dvh);
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid #e5e5e5; border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
}
.lth-chatbot-panel[hidden] { display: none; }
.lth-chatbot-head {
  display: flex; gap: 10px; align-items: center;
  padding: 13px 14px; border-bottom: 1px solid #eee; background: #fff; color: #111;
}
.lth-chatbot-avatar {
  flex: 0 0 auto; width: 40px; height: 40px; min-width: 40px; min-height: 40px;
  border-radius: 50%; overflow: hidden;
  background: #f1f1f1; display: grid; place-items: center; line-height: 1;
}
.lth-chatbot-head-text { flex: 1 1 auto; min-width: 0; }
.lth-chatbot-head strong { display: block; font-size: 16px; line-height: 1.2; margin: 0; }
.lth-chatbot-head span { display: block; font-size: 12px; color: #666; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lth-chatbot-close { flex: 0 0 auto; background: none; border: none; color: #666; font-size: 22px; cursor: pointer; line-height: 1; padding: 4px; }
.lth-chatbot-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.lth-chatbot-msg { font-size: 14px; line-height: 1.55; max-width: 92%; overflow-wrap: anywhere; }
.lth-chatbot-msg-bot { align-self: flex-start; color: #111; }
.lth-chatbot-msg-user { align-self: flex-end; background: #ececec; color: #111; padding: 9px 12px; border-radius: 14px; }
.lth-chatbot-msg a { color: #111; text-decoration: underline; }
.lth-chatbot-msg button { font-size: 12px; border: 1px solid #e5e5e5; background: #fff; border-radius: 999px; padding: 5px 10px; cursor: pointer; margin: 2px; color: #111; }
.lth-chatbot-card { border: 1px solid #eee; border-radius: 10px; padding: 10px; background: #fafafa; }
/* Tool grid: 2 cards per row, 6 tools = 3 rows per reply.
 * The grid message spans the full chat width so each card gets room. */
.lth-chatbot-msg:has(> .lth-chatbot-toolgrid) { max-width: 100%; width: 100%; padding: 0; }
.lth-chatbot-toolgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lth-chatbot-toolgrid .lth-chatbot-card { min-width: 0; }
.lth-chatbot-toolgrid .lth-chatbot-card-top { flex-wrap: wrap; }
.lth-chatbot-toolgrid .lth-chatbot-card-links { flex-direction: column; gap: 4px; }
.lth-chatbot-card-top { display: flex; gap: 10px; align-items: center; min-width: 0; }
.lth-chatbot-card-top img { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; flex: 0 0 auto; }
.lth-chatbot-initial { width: 36px; height: 36px; border-radius: 6px; background: #111; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: 0 0 auto; }
.lth-chatbot-card-top a { color: #111; text-decoration: none; }
.lth-chatbot-pricing { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; color: #111; border: 1px solid #e5e5e5; background: #fff; border-radius: 999px; padding: 1px 8px; }
.lth-chatbot-card p { margin: 8px 0 0; font-size: 13px; color: #444; }
.lth-chatbot-best { color: #666 !important; }
.lth-chatbot-card-links { margin-top: 8px; font-size: 13px; display: flex; gap: 12px; flex-wrap: wrap; }
.lth-chatbot-more { background: #111; color: #fff !important; border: none !important; border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.lth-chatbot-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px 10px; }
.lth-chatbot-chips button { font-size: 12px; border: 1px solid #e5e5e5; background: #fff; border-radius: 999px; padding: 5px 10px; cursor: pointer; color: #111; }
.lth-chatbot-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #eee; background: #fff; }
.lth-chatbot-form input { flex: 1; min-width: 0; border: 1px solid #e5e5e5; border-radius: 999px; padding: 9px 12px; font-size: 14px; background: #fff; color: #111; }
.lth-chatbot-form button { background: #111; color: #fff; border: none; border-radius: 999px; padding: 9px 16px; cursor: pointer; flex: 0 0 auto; }

/* ---------- Responsive / Mobile view ---------- */
@media (max-width: 480px) {
  /* Safe-area inset keeps the button off the iPhone home bar. */
  .lth-chatbot { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .lth-chatbot-toggle { width: 52px; height: 52px; }
  .lth-chatbot-toggle .lth-robot-img { width: 52px; height: 52px; }
  .lth-chatbot-panel {
    width: calc(100vw - 24px); max-width: calc(100vw - 24px);
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    height: 78dvh; max-height: 78dvh; border-radius: 14px;
  }
  .lth-chatbot-head { padding: 12px; }
  .lth-chatbot-messages { padding: 12px; gap: 10px; }
  .lth-chatbot-msg { font-size: 14px; }
  /* Chips become one swipeable row on phones instead of a tall
   * wrapped block that pushes the chat off-screen. */
  .lth-chatbot-chips {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 0 12px 10px; scrollbar-width: none;
  }
  .lth-chatbot-chips::-webkit-scrollbar { display: none; }
  .lth-chatbot-chips button { flex: 0 0 auto; padding: 7px 12px; font-size: 13px; }
  /* On phones the grid stays 2 per row, but cards go compact so
   * text stays readable and nothing overflows the panel. */
  .lth-chatbot-toolgrid { gap: 8px; }
  .lth-chatbot-toolgrid .lth-chatbot-card { padding: 8px; }
  .lth-chatbot-toolgrid .lth-chatbot-card-top { gap: 6px; }
  .lth-chatbot-toolgrid .lth-chatbot-card-top img,
  .lth-chatbot-toolgrid .lth-chatbot-initial { width: 28px; height: 28px; }
  .lth-chatbot-toolgrid .lth-chatbot-card-top a { font-size: 13px; }
  .lth-chatbot-toolgrid .lth-chatbot-pricing { font-size: 10px; padding: 1px 6px; margin-left: 0; }
  .lth-chatbot-toolgrid .lth-chatbot-card p {
    font-size: 12px; margin-top: 6px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; /* stops one long description making its card very tall */
  }
  .lth-chatbot-toolgrid .lth-chatbot-best { display: none; }
  .lth-chatbot-toolgrid .lth-chatbot-card-links { font-size: 12px; margin-top: 6px; }
  .lth-chatbot-form { padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .lth-chatbot-form input { font-size: 16px; padding: 11px 12px; } /* stops iOS auto-zoom on focus */
  .lth-chatbot-form button { padding: 11px 16px; }
}
@media (max-width: 360px) {
  .lth-chatbot-panel { width: calc(100vw - 16px); max-width: calc(100vw - 16px); }
  .lth-chatbot-head { padding: 11px 12px; }
  .lth-chatbot-form { padding: 8px 10px; }
  .lth-chatbot-form button { padding: 9px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .lth-chatbot-toggle:active { transform: none; }
}