/* ==========================================================================
 * Hangxin Optoelectronics AI Chat widget styles
 * Mobile-first: the panel becomes a full-screen sheet on narrow viewports.
 * Position is bottom-right, offset so it doesn't sit on top of the existing
 * floating contact dock (cart.js injects #contact-dock at bottom: 24px).
 * ========================================================================== */

/* ---- FAB (collapsed button) ------------------------------------------- */
#ai-chat-root {
  position: fixed;
  left: 24px;                   /* bottom-LEFT corner */
  bottom: 22px;                 /* aligns with the Contact Us dock (right:22 / bottom:22) */
  z-index: 1080;
  font-family: inherit;
  color: #1E293B;
}
/* Product detail modal open (cart.js sets html.product-modal-open) — the
   modal covers the screen, so hide the whole floating AI widget (FAB,
   retract handle and panel) until the modal closes. */
html.product-modal-open #ai-chat-root { display: none; }
.ai-chat-fab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: transform 0.15s ease;
  position: relative;
  /* Draggable (GYPDrag moves #ai-chat-root): suppress text selection and
     touch scrolling on the handle, same contract as .contact-dock. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.ai-chat-fab:hover { transform: translateY(-2px); background: transparent; }
.ai-chat-fab:focus-visible { outline: 3px solid rgba(25, 118, 210, 0.45); outline-offset: 2px; border-radius: 12px; }
.ai-chat-fab-img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(13, 36, 56, 0.25));
}
.ai-chat-fab-label {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  color: #1E293B;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(13, 36, 56, 0.12);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(13, 36, 56, 0.14);
  white-space: nowrap;
}
.ai-chat-fab-dot {
  position: absolute;
  top: -2px;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff5252;
  border: 2px solid #fff;
}

/* ---- Panel ------------------------------------------------------------ */
.ai-chat-panel {
  position: fixed;
  left: 24px;
  bottom: 168px;                /* leaves room for the FAB */
  width: 380px;
  max-width: calc(100vw - 32px);
  height: min(560px, calc(100vh - 220px));
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(13, 36, 56, 0.22);
  display: none;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(13, 36, 56, 0.08);
  z-index: 1080;
}
.ai-chat-panel.open { display: flex; }

.ai-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: linear-gradient(135deg, #1E293B 0%, #183058 100%);
  color: #fff;
  flex: 0 0 auto;             /* keep header at its natural height */
}
.ai-chat-head-l { display: flex; align-items: center; gap: 10px; }
.ai-chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
}
.ai-chat-head strong { display: block; font-size: 14px; }
.ai-chat-head small { display: block; font-size: 11px; opacity: 0.85; }
.ai-chat-close {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.ai-chat-close:hover { background: rgba(255, 255, 255, 0.12); }

/* ---- Messages --------------------------------------------------------- */
/* CRITICAL: `min-height: 0` lets this flex item actually shrink below its
   intrinsic content size, so `overflow-y: auto` can scroll the chat history
   instead of letting it push the chips area off-screen. Without this the
   flexbox default of `min-height: auto` (= content size) defeats overflow:auto
   and the chat box visually covers the recommended-question chips. */
.ai-chat-msgs {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
  background: #f5f7fa;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ai-chat-msg {
  max-width: 86%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.45;
  word-wrap: break-word;
}
.ai-chat-msg p { margin: 0 0 6px; }
.ai-chat-msg p:last-child { margin-bottom: 0; }
.ai-chat-msg strong { font-weight: 700; }
.ai-chat-msg--user {
  align-self: flex-end;
  background: #183058;
  color: #fff;
  border-bottom-right-radius: 4px;
}
.ai-chat-msg--ai {
  align-self: flex-start;
  background: #fff;
  color: #1E293B;
  border: 1px solid rgba(13, 36, 56, 0.08);
  border-bottom-left-radius: 4px;
}
.ai-chat-msg-typing {
  display: inline-flex;
  gap: 4px;
  padding: 4px 0;
}
.ai-chat-msg-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #90a4ae;
  animation: ai-chat-bounce 1.1s infinite ease-in-out;
}
.ai-chat-msg-typing span:nth-child(2) { animation-delay: 0.15s; }
.ai-chat-msg-typing span:nth-child(3) { animation-delay: 0.3s; }
.ai-chat-msg--pending {
  min-height: 38px;
}
@keyframes ai-chat-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* Fallback CTAs */
.ai-chat-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.ai-chat-cta-btn {
  flex: 1 1 auto;
  text-align: center;
  padding: 8px 10px;
  border-radius: 8px;
  background: #1E293B;
  color: #fff;
  font-size: 13px;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid #1E293B;
}
.ai-chat-cta-btn--wa { background: #25d366; border-color: #25d366; }
.ai-chat-cta-btn:hover { opacity: 0.92; }

/* ---- Chips (inline, attached to last assistant reply) ------------------ */
/* Chips render INSIDE .ai-chat-msgs, right after the last AI bubble. They
   scroll with the conversation rather than occupying a fixed flex slot —
   this is why there's no separate .ai-chat-chips container anymore. */
.ai-chat-chips-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 4px 2px 2px;
  align-self: flex-start;       /* match AI bubble alignment */
  max-width: 95%;
}
.ai-chat-chip {
  border: 1px solid rgba(25, 118, 210, 0.35);
  background: #F5EFFC;
  color: #183058;
  font-size: 11.5px;
  line-height: 1.3;
  padding: 4px 9px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease;
  font-family: inherit;
}
.ai-chat-chip:hover { background: #DBEAFE; }

/* ---- Input ------------------------------------------------------------ */
.ai-chat-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border-top: 1px solid rgba(13, 36, 56, 0.06);
  flex: 0 0 auto;
  flex-shrink: 0;
}
.ai-chat-input input {
  flex: 1 1 auto;
  border: 1px solid rgba(13, 36, 56, 0.15);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease;
}
.ai-chat-input input:focus { border-color: #183058; }
.ai-chat-input button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #183058;
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-chat-input button:hover { background: #1565c0; }
.ai-chat-input button svg { width: 16px; height: 16px; }

/* ---- Footer ----------------------------------------------------------- */
.ai-chat-foot {
  font-size: 11px;
  color: #607d8b;
  padding: 8px 14px;
  background: #fff;
  border-top: 1px solid rgba(13, 36, 56, 0.04);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  flex: 0 0 auto;
  flex-shrink: 0;
}
.ai-chat-foot a { color: #183058; text-decoration: none; }
.ai-chat-foot a:hover { text-decoration: underline; }

/* ---- Mobile: full-screen sheet --------------------------------------- */
@media (max-width: 768px) {
  /* Bottom-left placement. The view-mode toggle (mobile.js) sits at
     left:16px / bottom:calc(70px + safe-area) and is ~40px tall — park the
     AI root directly ABOVE it. The FAB stays IN-FLOW inside the root so
     GYPDrag (which moves the root) actually moves the FAB on touch. */
  #ai-chat-root {
    left: 16px;
    bottom: calc(122px + env(safe-area-inset-bottom));
  }
  .ai-chat-fab { position: static; }
  /* Open panel also clears the raised FAB (FAB top ≈ 216px + safe-area). */
  .ai-chat-panel {
    left: 16px;
    right: auto;
    bottom: calc(232px + env(safe-area-inset-bottom));
    height: min(560px, calc(100vh - 330px));
  }
}
@media (max-width: 600px) {
  /* Same height as the 768px rule — the FAB is in-flow now, so the root's
     bottom must clear the view-toggle (70+safe) + its 40px height. */
  #ai-chat-root { left: 8px; bottom: calc(122px + env(safe-area-inset-bottom)); }
  .ai-chat-panel {
    left: 0;
    bottom: 0;
    width: 100vw;
    height: calc(100vh - 64px);
    max-width: 100vw;
    border-radius: 14px 14px 0 0;
  }
  .ai-chat-panel.open { display: flex; }
}

/* Handheld "Full View" mode: the viewport becomes 1200px wide, so the
   narrow-screen media queries above stop matching and the toggle renders
   large at left:40 / bottom:40. Lift the FAB + panel above it. The FAB
   stays in-flow inside the root (NOT independently fixed) so dragging the
   root moves it in this mode too. */
html.view-full #ai-chat-root { left: 24px; bottom: 150px; }
html.view-full .ai-chat-panel { left: 24px; right: auto; bottom: 260px; }
/* ---- Rich content in AI replies (markdown render) ------------------------ */
.ai-chat-msg--ai { line-height: 1.55; }

.ai-chat-msg--ai h3,
.ai-chat-msg--ai h4,
.ai-chat-msg--ai h5 {
  margin: 8px 0 4px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
}
.ai-chat-msg--ai h3:first-child,
.ai-chat-msg--ai h4:first-child,
.ai-chat-msg--ai h5:first-child { margin-top: 2px; }

.ai-chat-msg--ai ul,
.ai-chat-msg--ai ol {
  margin: 4px 0 6px;
  padding-left: 18px;
}
.ai-chat-msg--ai li { margin: 2px 0; }

.ai-chat-msg--ai hr {
  border: 0;
  border-top: 1px solid #e3e7ee;
  margin: 8px 0;
}

.ai-chat-msg--ai blockquote {
  margin: 4px 0 6px;
  padding: 2px 0 2px 10px;
  border-left: 3px solid #d6dce6;
  color: #4b5563;
}

.ai-chat-msg--ai code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  background: #f1f4f9;
  border: 1px solid #e3e7ee;
  border-radius: 4px;
  padding: 0 4px;
}
.ai-chat-msg--ai pre {
  margin: 4px 0 8px;
  padding: 8px 10px;
  background: #f6f8fb;
  border: 1px solid #e3e7ee;
  border-radius: 8px;
  overflow-x: auto;
}
.ai-chat-msg--ai pre code { background: none; border: 0; padding: 0; }

.ai-chat-msg--ai a { color: #2f6fb2; text-decoration: underline; word-break: break-all; }

/* Comparison / spec tables */
.ai-chat-table-wrap {
  margin: 6px 0 8px;
  overflow-x: auto;
  border: 1px solid #e3e7ee;
  border-radius: 8px;
  -webkit-overflow-scrolling: touch;
}
.ai-chat-msg--ai table {
  border-collapse: collapse;
  width: 100%;
  min-width: 240px;
  font-size: 12px;
  line-height: 1.45;
}
.ai-chat-msg--ai th,
.ai-chat-msg--ai td {
  border: 0;
  border-bottom: 1px solid #edf0f5;
  border-right: 1px solid #edf0f5;
  padding: 5px 8px;
  text-align: left;
  vertical-align: top;
}
.ai-chat-msg--ai th:last-child,
.ai-chat-msg--ai td:last-child { border-right: 0; }
.ai-chat-msg--ai tbody tr:last-child td { border-bottom: 0; }
.ai-chat-msg--ai thead th {
  background: #f4f6fa;
  font-weight: 700;
  white-space: nowrap;
}
.ai-chat-msg--ai tbody tr:nth-child(even) { background: #fafbfd; }

/* User bubble keeps pre-wrap for raw text */
.ai-chat-msg--user { white-space: pre-wrap; }

/* ---- Draggable FAB ------------------------------------------------------
   The FAB drags the whole fixed #ai-chat-root (main.js GYPDrag helper).
   touch-action:none lets pointer dragging work on touch screens; the
   is-dragging state disables transitions and shows a grabbing cursor. */
#ai-chat-root { touch-action: none; }
.ai-chat-fab { cursor: grab; }
#ai-chat-root.is-dragging { cursor: grabbing; }
#ai-chat-root.is-dragging * { cursor: grabbing !important; }
#ai-chat-root.is-dragging,
#ai-chat-root.is-dragging .ai-chat-fab { transition: none; }

/* Native <img> dragging hijacks the pointer stream — disable it so the
   robot image drags the widget instead of opening a ghost image. */
.ai-chat-fab-img { -webkit-user-drag: none; user-select: none; }
.ai-chat-fab, #ai-chat-root { -webkit-user-select: none; user-select: none; }