/* ==========================================================================
   CHAT BOX - Created by Nicks Web Shop - 2026-10-14 (based on the Nicks Web Shop chat box)
   Modified on 2026-10-14 - Colors swapped: rust red header and messages, green buttons
   Markup: COMPONENTS/chat_box.inc.php   Script: JS/chat.js   Server: CHATBOT/chat.php
   Bottom-right corner. Loaded by chat_box.inc.php only when the chat is on.

   Colors are the Fadi's Meyerland ones from base.css, repeated here inside .chat only,
   so the chat box looks the same on every page.
   Layers: above the page and the menu popup buttons (99), below the
   full-screen menu and search overlays (999-1001), except open on a phone.
   ========================================================================== */
.chat {
  --chat-main: #ac3e1b;      /* --biz-color-1 (rust red): header, visitor messages, links */
  --chat-action: #26766b;    /* --biz-color-2 (green): "Chat with us" and Send buttons */
  --chat-action-hover: #1d5c53;
  --chat-ink: #333333;       /* --black-color */
  --chat-muted: #6b6b6b;
  --chat-line: #e4e0d6;
  --chat-line-strong: #cfc9bb;
  --chat-surface: #f5f3ed;   /* --white-color-1 */
  --chat-white: #ffffff;
  --chat-font: 'Lato', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --chat-gap: 20px;
  --chat-bottom: var(--chat-gap);

  font-family: var(--chat-font);
  color: var(--chat-ink);
  text-align: left;
}

html.is-phone .chat {
  --chat-gap: 14px;
  --chat-bottom: calc(14px + env(safe-area-inset-bottom));
}

.chat *,
.chat *::before,
.chat *::after {
  box-sizing: border-box;
}

.chat .chat-icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat .chat-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- "Chat with us" button ---- */
.chat-launcher {
  position: fixed;
  right: var(--chat-gap);
  bottom: var(--chat-bottom);
  z-index: 990;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 22px 14px 18px;
  border: 2px solid var(--chat-white);
  border-radius: 999px;
  background: var(--chat-action);
  color: var(--chat-white);
  font: 700 16px/1 var(--chat-font);
  cursor: pointer;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.55);
  transition: transform 0.15s ease, background 0.15s ease;
}

.chat-launcher .chat-icon {
  width: 22px;
  height: 22px;
}

.chat-launcher:hover {
  background: var(--chat-action-hover);
  transform: translateY(-2px);
}

/* Phones: a round icon only (the button words are hidden), so it doesn't cover the menu buttons at the bottom of the page */
html.is-phone .chat-launcher {
  padding: 15px;
}

html.is-phone .chat-launcher span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

html.is-phone .chat-launcher .chat-icon {
  width: 26px;
  height: 26px;
}

.chat.is-open .chat-launcher {
  display: none;
}

/* ---- Chat window ---- */
.chat-panel {
  position: fixed;
  right: var(--chat-gap);
  bottom: var(--chat-bottom);
  z-index: 995;
  width: 380px;
  max-width: calc(100vw - 2 * var(--chat-gap));
  height: min(600px, calc(100dvh - var(--chat-bottom) - 24px));
  display: flex;
  flex-direction: column;
  background: var(--chat-white);
  border: 1px solid var(--chat-line);
  border-radius: 18px;
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.chat-panel[hidden] {
  display: none;
}

.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 14px 20px;
  background: var(--chat-main);
  color: var(--chat-white);
}

.chat-name {
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.chat-head span {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
}

.chat-close {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.15);
  color: var(--chat-white);
  cursor: pointer;
}

.chat-close .chat-icon {
  width: 28px;
  height: 28px;
  stroke-width: 2.6;
}

.chat-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

.chat-log {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 16px;
  background: var(--chat-surface);
  overscroll-behavior: contain;
}

.chat-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat-bot {
  align-self: flex-start;
  background: var(--chat-white);
  border: 1px solid var(--chat-line);
  border-bottom-left-radius: 4px;
}

.chat-bot a {
  color: var(--chat-main);
  font-weight: 700;
}

.chat-user {
  align-self: flex-end;
  background: var(--chat-main);
  color: var(--chat-white);
  border-bottom-right-radius: 4px;
}

.chat-user a {
  color: var(--chat-white);
}

.chat-typing {
  display: flex;
  gap: 5px;
  padding: 14px 16px;
}

.chat-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--chat-muted);
  animation: chat-dot 1.2s infinite ease-in-out;
}

.chat-typing span:nth-child(2) {
  animation-delay: 0.15s;
}

.chat-typing span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes chat-dot {
  0%,
  80%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

.chat-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 0;
  padding: 12px;
  border-top: 1px solid var(--chat-line);
}

.chat-form textarea {
  flex: 1;
  min-height: 44px;
  max-height: 120px;
  margin: 0;
  padding: 11px 14px;
  border: 1px solid var(--chat-line-strong);
  border-radius: 12px;
  font: 400 16px/1.4 var(--chat-font); /* 16px stops iPhones zooming in */
  color: var(--chat-ink);
  background: var(--chat-white);
  resize: none;
}

.chat-form textarea:focus {
  outline: none;
  border-color: var(--chat-main);
}

.chat-send {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--chat-action);
  color: var(--chat-white);
  cursor: pointer;
}

.chat-send:hover {
  background: var(--chat-action-hover);
}

.chat-send[disabled] {
  opacity: 0.5;
  cursor: wait;
}

.chat-foot {
  margin: 0;
  padding: 0 12px 10px;
  font-size: 12px;
  color: var(--chat-muted);
  text-align: center;
}

.chat-foot button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--chat-main);
  text-decoration: underline;
  cursor: pointer;
}

/* "Powered by Nicks Web Shop" credit, under the bottom line */
.chat-foot:has(+ .chat-credit) {
  padding-bottom: 2px;
}

.chat-credit {
  margin: 0;
  padding: 0 12px 8px;
  font-size: 11px;
  text-align: center;
}

.chat-credit a {
  color: var(--chat-muted);
  text-decoration: none;
}

.chat-credit a:hover,
.chat-credit a:focus-visible {
  text-decoration: underline;
}

/* Narrow desktop windows: the open chat fills most of the window */
@media (max-width: 560px) {
  .chat-panel {
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    height: calc(100dvh - var(--chat-bottom) - 8px);
  }
}

/* Phones: the open chat covers the whole screen, above the top menu bar.
   chat.js sets --chat-top / --chat-height to the part of the screen above the keyboard,
   so the header stays put when the keyboard opens. */
html.is-phone .chat-panel {
  top: var(--chat-top, 0px);
  left: 0;
  right: 0;
  bottom: auto;
  z-index: 1002;
  width: 100%;
  max-width: none;
  height: var(--chat-height, 100dvh);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html.is-phone .chat-head {
  padding-top: calc(12px + env(safe-area-inset-top));
}

html.is-phone .chat-form {
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

/* While the chat is open on a phone, the page behind it can't scroll */
html.chat-lock,
html.chat-lock body {
  overflow: hidden;
  overscroll-behavior: none;
}

@media (prefers-reduced-motion: reduce) {
  .chat-typing span {
    animation: none;
  }
}

@media print {
  .chat {
    display: none !important;
  }
}