/* ============================================================
   BOB THE AI ASSISTANT - Online Fence Supplies
   Brand: deep green + white + orange accent
   ============================================================ */

:root {
  /* Palette: deep navy + white + green, taken from the Bob artwork.
     --ofs-green is kept as the variable name so every existing rule picks up
     the new colour without being rewritten; it is now the accent, and navy
     carries the primary surfaces. */
  --ofs-navy: #242b4a;
  --ofs-navy-light: #333c63;
  --ofs-navy-pale: #eceef4;
  --ofs-green: #242b4a;
  --ofs-green-light: #333c63;
  --ofs-green-pale: #eceef4;
  --ofs-accent: #4caf50;
  --ofs-accent-dark: #3d9142;
  --ofs-orange: #4caf50;
  --ofs-white: #ffffff;
  --ofs-gray-100: #f5f5f5;
  --ofs-gray-200: #e8e8e8;
  --ofs-gray-500: #888888;
  --ofs-text: #1a1a1a;
  --ofs-radius: 16px;
  --ofs-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

/* ============================================================
   HOST THEME FIREWALL
   ------------------------------------------------------------
   The widget is embedded on a WordPress/Astra site we do not control.
   Astra styles the bare `button` selector — padding 12px 24px, border-radius,
   box-shadow, font-size — and with no box-sizing reset that inflated our
   38x38 send button into an 86x62 oval.

   These rules neutralise anything the host sets on elements inside the
   widget. They use :where() so they carry the specificity of #ofs-chatbot
   alone (1,0,0) — the same as our component rules below, which come later
   in the file and therefore win the tie. Host rules (0,0,1) lose to both.
   Add to the reset, never to the component rules, when a new host conflict
   turns up.
   ============================================================ */

#ofs-chatbot,
#ofs-chatbot *,
#ofs-chatbot *::before,
#ofs-chatbot *::after {
  box-sizing: border-box;
}

#ofs-chatbot :where(button),
#ofs-chatbot :where(textarea),
#ofs-chatbot :where(input) {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  border: none;
  border-radius: 0;
  background: none;
  background-image: none;
  box-shadow: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: normal;
  text-decoration: none;
  text-align: center;
  color: inherit;
  float: none;
  position: static;
  transform: none;
  transition: none;
  vertical-align: middle;
  overflow: visible;
}

#ofs-chatbot :where(svg) {
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  flex: none;
  fill: none;
  vertical-align: middle;
  overflow: visible;
}

/* Icon strokes are set here rather than left to the stroke="white"
   presentation attribute in the markup — presentation attributes sit below
   author CSS in the cascade, so any host rule touching stroke would win. */
#ofs-chatbot :where(svg) path {
  stroke: currentColor;
}

#ofs-chatbot {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

/* ---- BUBBLE BUTTON ---- */
/* ---- LAUNCHER (Bob + invite) ---- */
#ofs-launcher {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* Solid, high-contrast card — it has to hold up over whatever section of
   the host page it happens to float above, including their green banner. */
#ofs-invite {
  background: var(--ofs-white);
  color: var(--ofs-navy);
  border: 1px solid rgba(36, 43, 74, 0.14);
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(20, 25, 45, 0.22);
  padding: 12px 15px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  max-width: 216px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#ofs-invite:hover {
  transform: translateY(-1px);
}

#ofs-chat-bubble {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--ofs-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* White rim, then a navy ring, then the drop shadow — reads as a deliberate
     badge on a light page and still separates from a dark or green one. */
  border: 3px solid var(--ofs-white);
  box-shadow: 0 0 0 2px var(--ofs-navy), 0 6px 24px rgba(20, 25, 45, 0.28);
  transition: transform 0.2s ease;
  position: relative;
  flex: none;
}

#ofs-chat-bubble:hover {
  transform: scale(1.04);
}

#ofs-bubble-face {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Phone-only label — the photo takes its place from 481px up. */
#ofs-bubble-text {
  display: none;
  align-items: center;
  gap: 7px;
  color: var(--ofs-white);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

#ofs-bubble-text svg {
  width: 16px;
  height: 16px;
  flex: none;
}

#ofs-chat-bubble:hover {
  transform: scale(1.08);
  background: var(--ofs-green-light);
}

#ofs-chat-bubble svg {
  width: 26px;
  height: 26px;
  color: var(--ofs-white);
}

#ofs-unread-dot {
  display: none;
  position: absolute;
  z-index: 1;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ofs-accent);
  border: 2px solid white;
}

/* ---- CHAT WINDOW ---- */
#ofs-chat-window {
  display: none;
  flex-direction: column;
  width: 380px;
  height: 560px;
  background: var(--ofs-white);
  border-radius: var(--ofs-radius);
  box-shadow: var(--ofs-shadow);
  overflow: hidden;
  margin-bottom: 12px;
  border: 1px solid var(--ofs-gray-200);
}

/* ---- HEADER ---- */
#ofs-chat-header {
  background: var(--ofs-green);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

#ofs-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

#ofs-header-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ofs-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  overflow: hidden;
}

#ofs-header-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

#ofs-bot-name {
  color: white;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ofs-bot-status {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
}

#ofs-status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5dde8a;
}

#ofs-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

#ofs-reset-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px;
  cursor: pointer;
  padding: 4px 9px;
  border-radius: 20px;
  transition: all 0.15s;
  font-family: inherit;
  line-height: 1.4;
}

#ofs-reset-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border-color: rgba(255, 255, 255, 0.5);
}

#ofs-close-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s;
  line-height: 1;
}

#ofs-close-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

/* ---- MESSAGES ---- */
#ofs-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}

#ofs-messages::-webkit-scrollbar {
  width: 4px;
}

#ofs-messages::-webkit-scrollbar-track {
  background: transparent;
}

#ofs-messages::-webkit-scrollbar-thumb {
  background: var(--ofs-gray-200);
  border-radius: 4px;
}

.ofs-msg {
  display: flex;
  max-width: 85%;
}

.ofs-msg.ofs-user {
  align-self: flex-end;
}

.ofs-msg.ofs-bot {
  align-self: flex-start;
}

.ofs-bubble {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ofs-text);
}

.ofs-msg.ofs-bot .ofs-bubble {
  background: var(--ofs-gray-100);
  border-bottom-left-radius: 4px;
}

.ofs-msg.ofs-user .ofs-bubble {
  background: var(--ofs-green);
  color: white;
  border-bottom-right-radius: 4px;
}

/* ---- TYPING INDICATOR ---- */
.ofs-typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
}

.ofs-typing-indicator span {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ofs-gray-500);
  animation: ofs-bounce 1.2s infinite ease-in-out;
}

.ofs-typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.ofs-typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes ofs-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-6px); }
}

/* ---- QUICK PROMPTS ---- */
#ofs-quick-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 12px;
}

#ofs-quick-prompts button {
  background: var(--ofs-white);
  border: 1px solid var(--ofs-green);
  color: var(--ofs-green);
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

#ofs-quick-prompts button:hover {
  background: var(--ofs-green);
  color: white;
}

/* ---- INPUT AREA ---- */
#ofs-input-area {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--ofs-gray-200);
  background: var(--ofs-white);
  flex-shrink: 0;
}

#ofs-input {
  flex: 1;
  border: 1px solid var(--ofs-gray-200);
  border-radius: 20px;
  padding: 9px 14px;
  font-size: 14px;
  font-family: inherit;
  resize: none;
  outline: none;
  color: var(--ofs-text);
  background: var(--ofs-gray-100);
  transition: border-color 0.15s;
  max-height: 120px;
  overflow-y: auto;
  line-height: 1.4;
}

#ofs-input:focus {
  border-color: var(--ofs-green);
  background: white;
}

#ofs-input::placeholder {
  color: var(--ofs-gray-500);
}

#ofs-send-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ofs-accent);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.1s;
}

#ofs-send-btn:hover {
  background: var(--ofs-accent-dark);
}

#ofs-send-btn:active {
  transform: scale(0.94);
}

#ofs-send-btn:disabled {
  background: var(--ofs-gray-200);
  cursor: not-allowed;
}

#ofs-send-btn svg {
  width: 16px;
  height: 16px;
  color: var(--ofs-white);
}

/* ---- MOBILE ---- */
@media (max-width: 480px) {
  /* Anchored in the corner, not stretched across the foot of the screen —
     an 84px portrait covers too much of a phone viewport. */
  #ofs-chatbot {
    bottom: 14px;
    right: 14px;
    left: auto;
  }

  #ofs-launcher {
    justify-content: flex-end;
    margin: 0;
  }

  #ofs-invite {
    display: none;
  }

  /* The circle becomes a compact text pill */
  #ofs-chat-bubble {
    width: auto;
    height: auto;
    border-radius: 22px;
    background: var(--ofs-navy);
    border: 2px solid var(--ofs-white);
    box-shadow: 0 4px 16px rgba(20, 25, 45, 0.32);
    padding: 10px 16px;
  }

  #ofs-bubble-face {
    display: none;
  }

  #ofs-bubble-text {
    display: inline-flex;
  }

  #ofs-unread-dot {
    top: -4px;
    right: -4px;
  }

  /* Fixed to the viewport so the corner-anchored launcher does not drag the
     window into the corner with it. */
  #ofs-chat-window {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 82vh;
    border-radius: var(--ofs-radius) var(--ofs-radius) 0 0;
    margin-bottom: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }
}

/* ---- TRADIBASE TAG ---- */
#ofs-powered-by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11px;
  color: var(--ofs-gray-500);
  padding: 5px 0 3px;
  border-top: 1px solid var(--ofs-gray-200);
}

#ofs-powered-by a {
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

#ofs-tradibase-logo {
  height: 18px;
  width: auto;
  opacity: 0.85;
  transition: opacity 0.15s;
}

#ofs-powered-by a:hover #ofs-tradibase-logo {
  opacity: 1;
}