/* ================================================================
   MXPERTTECH LIMITED — CYBE AI Floating Assistant (core Q&A)
   Pure inset neumorphism throughout: every surface uses var(--neu-inner)
   or var(--neu-inner-deep) only. No raised/outer drop-shadows anywhere —
   inset must always read as pressed-in, never lifted. Respects the
   site's [data-theme="dark"/"light"] tokens.
   ================================================================ */

/* ── Floating circular launcher ── */
.cybe-ai-launcher {
  position: fixed;
  right: 20px;
  bottom: 88px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--neu-bg);
  box-shadow: var(--neu-inner-deep);
  border: var(--neu-border-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  z-index: 999998;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
  padding: 4px;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.cybe-ai-launcher.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cybe-ai-launcher:active { box-shadow: var(--neu-inner-deep); transform: scale(.96); }

.cybe-ai-launcher img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}
.cybe-ai-launcher .cybe-ai-launcher-fallback {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: #4b5cff;
  letter-spacing: .02em;
}

/* While the site's account/menu dropdown (if any) is open, give way — same
   pattern used by other floating buttons on this theme. */
body.chub-dropdown-open .cybe-ai-launcher {
  transform: translateY(calc(-1 * var(--chub-dropdown-clearance, 0px)));
  transition: opacity .35s ease, transform .35s ease;
}

/* ── CYBE AI superior mode ───────────────────────────────────────────
   Tawk injects its widget at z-index ~2,147,483,000 (near INT_MAX) via
   inline styles that CSS !important cannot beat unless we also go near
   INT_MAX. The body class cybe-ai-superior-mode is always added by the
   theme (functions.php), so CYBE AI sits above Tawk in every state:
   widget closed, open, minimised, maximised, or injected dynamically. */
body.cybe-ai-superior-mode .cybe-ai-launcher,
body.cybe-ai-superior-mode .cybe-ai-page-hint { z-index: 2147483600 !important; }
body.cybe-ai-superior-mode .cybe-ai-overlay   { z-index: 2147483601 !important; }

/* Receptionist also needs to beat Tawk */
body.cybe-ai-superior-mode #cybe-receptionist { z-index: 2147483600 !important; }

/* Custom Tawk button: above Tawk's iframe but below CYBE AI panels */
body.cybe-ai-superior-mode .cybe-tawk-btn     { z-index: 2147483595 !important; }

/* When Tawk is maximized (full chat window open), drop CYBE AI launchers
   behind it so Tawk is usable, but panels stay above everything */
body.tawk-is-maximized .cybe-ai-launcher { z-index: 10 !important; }

/* ── Chat overlay + panel ── */
.cybe-ai-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,10,.55);
  z-index: 999999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.cybe-ai-overlay.is-open { opacity: 1; pointer-events: auto; }

/* While CYBE AI is open, drop Tawk + the PWA install prompt beneath it.
   The PWA banner sets an intentionally huge inline z-index, so !important
   is required to beat it. Returns to normal the instant chat is closed. */
body.cybe-ai-chat-open iframe[title="chat widget"],
body.cybe-ai-chat-open iframe[title="chat widget minimised"],
body.cybe-ai-chat-open #cybe-pwa-banner,
body.cybe-ai-chat-open #cybe-pwa-pill {
  z-index: 10 !important;
}

.cybe-ai-panel {
  width: 100%;
  max-width: 460px;
  height: min(84vh, 720px);
  background: var(--neu-bg);
  box-shadow: var(--neu-inner-deep);
  border: var(--neu-border-blue);
  border-radius: 22px 22px 0 0;
  display: flex;
  flex-direction: column;
  transform: translateY(24px);
  transition: transform .3s ease, width .35s ease, height .35s ease, max-width .35s ease, border-radius .35s ease;
  overflow: hidden;
  position: relative;
  /* Centering: explicit left/right + auto margins so position:fixed
     parent flex alignment never shifts the panel off-center on mobile */
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 560px) {
  .cybe-ai-overlay { align-items: center; }
  .cybe-ai-panel { border-radius: 22px; margin-bottom: 0; }
}
.cybe-ai-overlay.is-open .cybe-ai-panel { transform: translateY(0); }

/* Header */
.cybe-ai-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--neu-bg);
  box-shadow: var(--neu-inner);
  flex-shrink: 0;
}
.cybe-ai-head-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--neu-bg);
  box-shadow: var(--neu-inner);
  border: var(--neu-border-blue);
  overflow: hidden;
  flex-shrink: 0;
  padding: 3px;
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
}
.cybe-ai-head-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.cybe-ai-head-avatar .cybe-ai-launcher-fallback { font-size: 15px; }
.cybe-ai-head-text { flex: 1; min-width: 0; }
.cybe-ai-head-text strong { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 14px; color: var(--text, #fff); }
.cybe-ai-head-text span { font-size: 11px; color: var(--muted, #8a8aa0); }
.cybe-ai-head > .cybe-ai-gear { margin-left: auto; }
.cybe-ai-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--neu-bg);
  box-shadow: var(--neu-inner);
  border: none;
  color: var(--muted, #8a8aa0);
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
}
.cybe-ai-close:active { box-shadow: var(--neu-inner-deep); }
[data-theme="light"] .cybe-ai-head-text strong { color: #1a1a2e; }

/* Message thread */
.cybe-ai-thread {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cybe-ai-msg { display: flex; gap: 8px; max-width: 88%; }
.cybe-ai-msg.from-ai { align-self: flex-start; }
.cybe-ai-msg.from-user { align-self: flex-end; }
.cybe-ai-msg.from-user .cybe-ai-bubble { margin-left: auto; }
.cybe-ai-msg-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--neu-bg);
  box-shadow: var(--neu-inner);
  border: var(--neu-border-blue);
  overflow: hidden;
  padding: 2px;
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
}
.cybe-ai-msg-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.cybe-ai-msg-avatar .cybe-ai-launcher-fallback { font-size: 11px; }

.cybe-ai-bubble {
  position: relative;
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text, #e8e8f2);
  white-space: pre-line;
}
/* Both AI and user bubbles — transparent background, deep-intensity inset only */
.cybe-ai-msg.from-ai .cybe-ai-bubble,
.cybe-ai-msg.from-user .cybe-ai-bubble {
  background: transparent;
  box-shadow: var(--neu-inner-deep);
  color: var(--text, #e8e8f2);
}
[data-theme="light"] .cybe-ai-bubble { color: #1a1a2e; }

/* ── Shop-in-chat: product grid ── */
.cybe-ai-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.cybe-ai-product-card {
  border-radius: 12px;
  box-shadow: var(--neu-flat, 0 0 0 1px rgba(255,255,255,.06));
  padding: 8px;
  text-align: center;
  font-size: 12px;
}
.cybe-ai-product-card img,
.cybe-ai-product-noimg {
  width: 100%;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.05);
  font-size: 22px;
  margin-bottom: 6px;
}
.cybe-ai-product-name {
  font-weight: 600;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cybe-ai-product-price {
  opacity: .8;
  margin-bottom: 6px;
}
.cybe-ai-product-add {
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 6px 4px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  background: var(--blue, #3B82F6);
  color: #fff;
}
.cybe-ai-product-add:disabled { opacity: .7; cursor: default; }

/* ── Shop-in-chat: checkout form ── */
.cybe-ai-checkout-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.cybe-ai-checkout-form input,
.cybe-ai-checkout-form textarea {
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  box-shadow: var(--neu-inner-deep);
  background: transparent;
  color: inherit;
  font-family: inherit;
}
.cybe-ai-checkout-form textarea { min-height: 44px; resize: vertical; }
.cybe-ai-co-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.cybe-ai-co-actions button {
  flex: 1 1 auto;
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
}
.cybe-ai-co-wa { background: #25D366; }
.cybe-ai-co-pay { background: var(--blue, #3B82F6); }
.cybe-ai-co-actions button:disabled { opacity: .6; cursor: default; }

/* Typing indicator */
.cybe-ai-typing { display: flex; gap: 4px; padding: 12px 14px; }
.cybe-ai-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted, #8a8aa0);
  animation: cybeAiTypingBounce 1.2s infinite ease-in-out;
}
.cybe-ai-typing span:nth-child(2) { animation-delay: .15s; }
.cybe-ai-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes cybeAiTypingBounce { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* Error bubble */
.cybe-ai-msg.from-ai .cybe-ai-bubble.is-error { color: #ff6b6b; }

/* Text input row */
.cybe-ai-input-row {
  display: flex;
  gap: 8px;
  padding: 10px 16px 16px;
  flex-shrink: 0;
}
.cybe-ai-input {
  flex: 1;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--neu-bg);
  box-shadow: var(--neu-inner-deep);
  border: none;
  color: var(--text, #e8e8f2);
  font-size: 13.5px;
  outline: none;
  font-family: inherit;
}
.cybe-ai-input::placeholder { color: var(--muted, #6d6d82); }
[data-theme="light"] .cybe-ai-input { color: #1a1a2e; }

.cybe-ai-send {
  padding: 0 18px;
  border-radius: 12px;
  background: var(--neu-bg);
  box-shadow: var(--neu-inner);
  border: var(--neu-border-blue);
  color: #4b5cff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
}
.cybe-ai-send:active { box-shadow: var(--neu-inner-deep); }
.cybe-ai-send:disabled { opacity: .5; cursor: not-allowed; }

/* ── Page-aware hint bubble — appears next to the launcher briefly on load ── */
.cybe-ai-page-hint {
  position: fixed;
  right: 86px;
  bottom: 128px;
  max-width: 190px;
  background: var(--neu-bg);
  box-shadow: var(--neu-inner-deep);
  border: var(--neu-border-blue);
  border-radius: 12px;
  padding: 9px 13px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text, #fff);
  z-index: 999997;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.cybe-ai-page-hint.is-visible { opacity: 1; transform: translateY(0); }
[data-theme="light"] .cybe-ai-page-hint { color: #1a1a2e; }
.cybe-ai-page-hint::after {
  content: '';
  position: absolute;
  right: 14px;
  bottom: -6px;
  width: 12px; height: 12px;
  background: var(--neu-bg);
  border-right: var(--neu-border-blue);
  border-bottom: var(--neu-border-blue);
  transform: rotate(45deg);
}
@media (max-width: 480px) {
  .cybe-ai-page-hint { right: 14px; bottom: 182px; }
}

/* CYBE AI PRO's own hint bubble is positioned dynamically in JS off the
   Pro launcher's live rect (it floats above the standard launcher), so it
   only needs its z-index kept in step with the Pro launcher/panel here. */
.cybe-ai-pro-page-hint { z-index: 999997; }

/* Mass Product Posting — one inset card per product, stacked inside the
   AI bubble. Every field reuses .cybe-ai-input so it matches the rest of
   the chat exactly: deep inset, zero box-shadow. */
.cybe-ai-pro-forms-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
}
.cybe-ai-pro-form-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: var(--neu-bg);
  box-shadow: var(--neu-inner-deep);
}
.cybe-ai-pro-form-title {
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .75;
  margin-bottom: 2px;
}
.cybe-ai-pro-form-card .cybe-ai-input { font-size: 13px; padding: 10px 12px; }
.cybe-ai-pro-photo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cybe-ai-pro-photo-btn {
  cursor: pointer;
  white-space: nowrap;
}
.cybe-ai-pro-photo-preview {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--neu-bg);
  box-shadow: var(--neu-inner-deep);
  display: none;
}
.cybe-ai-pro-photo-preview.is-visible { display: block; }
.cybe-ai-pro-photo-status { font-size: 11.5px; opacity: .7; }
.cybe-ai-pro-badge-pill {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--neu-bg);
  box-shadow: var(--neu-inner-deep);
  color: #0000ff;
  vertical-align: middle;
}
.cybe-ai-pro-review-card { gap: 0; }

@media (max-width: 480px) {
  /* Use box-sizing + padding on the overlay itself so panel stays centred;
     avoid right/left offsets on the panel which would shift it rightward. */
  .cybe-ai-overlay { padding: 0 16px; box-sizing: border-box; }
  .cybe-ai-panel { width: 100%; max-width: 100%; left: auto; right: auto; }
  /* The bottom nav bar (Shop/Category/Cart/Profile) is ~90px tall
     (see body:has(.cybe-bottom-nav) padding-bottom in style.css) — the
     launcher must clear it with room to spare, not sit on top of Profile. */
  .cybe-ai-launcher { right: 16px; bottom: calc(90px + env(safe-area-inset-bottom, 0px) + 14px); }
}

/* ── Listening state — blue border only; pulse animation removed ── */
.cybe-ai-launcher--listening {
  border-color: #4b5cff !important;
}

/* Voice tooltip shown above the launcher during long-press */
@keyframes cybe-tooltip-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cybe-ai-voice-tooltip {
  position: fixed;
  background: var(--neu-bg);
  color: var(--text, #e8e8f2);
  box-shadow: var(--neu-inner-deep);
  border: var(--neu-border-blue);
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  z-index: 999999;
  pointer-events: none;
  animation: cybe-tooltip-in .2s ease both;
}
[data-theme="light"] .cybe-ai-voice-tooltip { color: #1a1a2e; }

/* ── Settings gear + panel ── */
.cybe-ai-gear {
  background: var(--neu-bg);
  border: none;
  font-size: 15px;
  cursor: pointer;
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--neu-inner-deep);
  transition: box-shadow .2s;
}
.cybe-ai-gear:active { box-shadow: var(--neu-inner-deep); transform: scale(.95); }

/* ── Maximize / restore toggle — inset neumorphic circular frame ── */
.cybe-ai-maximize {
  background: var(--neu-bg);
  border: none;
  font-size: 15px;
  cursor: pointer;
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--neu-inner-deep);
  border: var(--neu-border-blue);
  color: var(--text, #fff);
  transition: box-shadow .2s, transform .2s;
}
.cybe-ai-maximize:active { transform: scale(.95); }
.cybe-ai-maximize.is-active { box-shadow: var(--neu-inner); color: #4b5cff; }
[data-theme="light"] .cybe-ai-maximize { color: #1a1a2e; }

/* Maximized panel — full viewport, same overlay/thread machinery */
.cybe-ai-panel.is-maximized {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  border-radius: 0;
  left: 0; right: 0; top: 0;
  margin: 0;
  /* De-float: this is now the page, not a card sitting on top of one —
     no inset shadow, no border, no floating-panel cues. */
  box-shadow: none;
  border: none;
}
@media (min-width: 560px) {
  .cybe-ai-panel.is-maximized { border-radius: 0; }
}

/* Maximized overlay itself stops looking like a modal backdrop — solid,
   full-bleed, part of the page rather than floating above it. */
.cybe-ai-overlay.cybe-ai-overlay-maximized {
  background: var(--neu-bg);
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
}

.cybe-ai-settings-panel {
  margin: 0 16px 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--neu-bg);
  box-shadow: var(--neu-inner-deep);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}
.cybe-ai-settings-panel[hidden] { display: none !important; }
.cybe-ai-settings-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13px; color: var(--text, #e8e8f2);
}
[data-theme="light"] .cybe-ai-settings-row { color: #1a1a2e; }

/* ── Per-model usage bar (shown in settings panel) ── */
.cybe-ai-usage-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--muted, #8a8aa0);
}
.cybe-ai-usage-bar {
  flex: 1;
  height: 6px;
  border-radius: 4px;
  background: var(--neu-bg);
  box-shadow: var(--neu-inner-deep);
  overflow: hidden;
}
.cybe-ai-usage-fill, .cybe-ai-pro-usage-fill {
  height: 100%;
  width: 0%;
  background: #4b7bff;
  border-radius: 4px;
  transition: width .3s ease, background .3s ease;
}
.cybe-ai-usage-fill.is-full, #cybe-ai-pro-usage-fill.is-full {
  background: #ef4444;
}
.cybe-ai-usage-label, #cybe-ai-pro-usage-label {
  flex: none; font-size: 11px; opacity: .8;
}
.cybe-ai-tray-btn:disabled, .cybe-ai-send:disabled {
  opacity: .35; cursor: not-allowed;
}

.cybe-ai-voice-select-row { flex-wrap: wrap; }
.cybe-ai-voice-select-row > span { flex: none; }
.cybe-ai-voice-select {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 10px;
  border: none;
  outline: none;
  font-size: 12px;
  font-family: inherit;
  color: var(--text, #e8e8f2);
  background: var(--neu-bg);
  box-shadow: var(--neu-inner-deep);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234b5cff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
[data-theme="light"] .cybe-ai-voice-select { color: #1a1a2e; }
.cybe-ai-voice-select optgroup { font-weight: 700; font-size: 11px; color: #4b5cff; }
.cybe-ai-voice-select option { background: var(--neu-bg); color: var(--text, #e8e8f2); font-size: 12px; }

.cybe-ai-pill-group { display: flex; gap: 6px; }
.cybe-ai-pill-group button {
  border: none; border-radius: 999px; padding: 6px 12px; font-size: 12px; cursor: pointer;
  background: var(--neu-bg); box-shadow: var(--neu-inner); color: inherit;
}
.cybe-ai-pill-group button.is-active { box-shadow: var(--neu-inner-deep); color: #4b5cff; font-weight: 700; }

.cybe-ai-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; }
.cybe-ai-switch input { opacity: 0; width: 0; height: 0; }
.cybe-ai-switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--neu-bg); box-shadow: var(--neu-inner); transition: .2s; cursor: pointer; }
.cybe-ai-switch span::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; border-radius: 50%; background: #8a8aa0; transition: .2s; }
.cybe-ai-switch input:checked + span { box-shadow: var(--neu-inner-deep); }
.cybe-ai-switch input:checked + span::before { transform: translateX(18px); background: #4b5cff; }

/* ── Tray — mic sits alongside the text input row ── */
.cybe-ai-tray {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 0 16px 12px;
  flex-shrink: 0;
}
.cybe-ai-tray-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--neu-bg);
  box-shadow: var(--neu-inner);
  border: none;
  color: var(--text, #e8e8f2);
  font-size: 15px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow .18s ease, transform .18s ease;
  flex: none;
}
.cybe-ai-tray-btn:active { transform: scale(.94); }
[data-theme="light"] .cybe-ai-tray-btn { color: #1a1a2e; }

/* ── FEATURE 23: Visual indicator — listening vs actively hearing speech
   vs processing (sent, waiting on the AI reply). Color/box-shadow plus
   an animated pulsing ring (defined further down with .mic-listening). ── */
.cybe-ai-tray-btn.mic-listening.mic-hearing {
  color: #16c47a;
}
.cybe-ai-tray-btn.mic-processing {
  color: #f5a623;
  box-shadow: var(--neu-inner-deep);
}

/* ── Nav suggestion chips — clickable page links CYBE AI can surface ── */
.cybe-ai-nav-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 2px;
  margin-top: 6px;
}
.cybe-ai-nav-chip {
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  background: var(--neu-bg);
  box-shadow: var(--neu-inner);
  color: #4b5cff;
  text-decoration: none;
  display: inline-block;
}
.cybe-ai-nav-chip:active { box-shadow: var(--neu-inner-deep); }

/* ── Live page embed — the actual site page rendered inline so
   browsing through CYBE AI feels like being on the website itself. ── */
.cybe-ai-embed {
  margin-top: 8px;
  border-radius: 14px;
  background: var(--neu-bg);
  box-shadow: var(--neu-inner-deep);
  overflow: hidden;
  position: relative;
}
.cybe-ai-embed-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--text-muted, #8a8aa0);
  border-bottom: 1px solid rgba(128,128,160,.15);
}
.cybe-ai-embed-open {
  color: var(--blue, #0000ff);
  text-decoration: none;
  font-weight: 700;
}
.cybe-ai-embed-loading {
  position: absolute; top: 40px; left: 0; right: 0;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted, #8a8aa0);
  padding: 24px 0;
}
.cybe-ai-embed iframe {
  display: block;
  width: 100%;
  height: 360px;
  border: none;
  opacity: 0;
  transition: opacity .25s ease;
  background: var(--bg);
}

/* ================================================================
   TEMPLATE / TYPE / MIC TRAY + DRAWERS
   Three-icon tray (🗒️ templates, ⌨️ type, 🎤 voice). Tapping an icon
   opens its drawer with a max-height transition; only one drawer is
   open at a time. Pure inset neumorphism, deep intensity, matching
   the rest of the panel — no raised shadows anywhere.
   ================================================================ */
.cybe-ai-tray {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 10px 16px 14px;
  flex-shrink: 0;
}
.cybe-ai-tray-btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--neu-bg);
  box-shadow: var(--neu-inner);
  border: none;
  color: var(--text, #e8e8f2);
  font-size: 17px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow .18s ease, transform .18s ease;
  flex: none;
}
.cybe-ai-tray-btn:active { transform: scale(.94); }
.cybe-ai-tray-btn.is-active { box-shadow: var(--neu-inner-deep); border: var(--neu-border-blue); color: #0000ff; }
[data-theme="light"] .cybe-ai-tray-btn { color: #1a1a2e; }
[data-theme="light"] .cybe-ai-tray-btn.is-active { color: #0000ff; }

.cybe-ai-tray-btn.mic-listening {
  color: var(--blue, #0000ff);
  box-shadow: var(--neu-inner-deep), 0 0 0 3px rgba(0,0,255,.35);
  position: relative;
}

/* Visible "mic is listening" cue: an expanding ring pulses outward
   continuously — matches the Receptionist mic's indicator so the two
   voice entry points feel like the same product. */
.cybe-ai-tray-btn.mic-listening::before,
.cybe-ai-tray-btn.mic-listening::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(0,0,255,.55);
  animation: cybeAiMicPulse 1.6s ease-out infinite;
  pointer-events: none;
}
.cybe-ai-tray-btn.mic-listening::after {
  animation-delay: .8s;
}
.cybe-ai-tray-btn.mic-listening.mic-hearing::before,
.cybe-ai-tray-btn.mic-listening.mic-hearing::after {
  border-color: rgba(22,196,122,.6);
}
@keyframes cybeAiMicPulse {
  0%   { transform: scale(1);   opacity: .85; }
  100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cybe-ai-tray-btn.mic-listening::before,
  .cybe-ai-tray-btn.mic-listening::after { animation: none; display: none; }
}

/* Drawers — collapsed by default, animate open on demand */
.cybe-ai-drawer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .32s cubic-bezier(.4,0,.2,1), opacity .22s ease;
  flex-shrink: 0;
}
.cybe-ai-drawer.is-open {
  max-height: 260px;
  opacity: 1;
}
.cybe-ai-drawer .cybe-ai-actions,
.cybe-ai-drawer .cybe-ai-input-row { padding-top: 8px; }
.cybe-ai-drawer .cybe-ai-input-row { padding: 8px 16px 16px; }

/* Template quick-reply chips inside the 🗒️ drawer */
.cybe-ai-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 16px 12px;
  flex-shrink: 0;
  max-height: 240px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.cybe-ai-action-btn {
  flex: 1 1 auto;
  min-width: 88px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--neu-bg);
  box-shadow: var(--neu-inner);
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #e8e8f2);
  cursor: pointer;
  transition: box-shadow .15s ease;
}
.cybe-ai-action-btn:active { box-shadow: var(--neu-inner-deep); }
.cybe-ai-action-btn.is-primary { color: #0000ff; border: var(--neu-border-blue); }
.cybe-ai-action-btn.is-skip { color: var(--muted, #8a8aa0); }
[data-theme="light"] .cybe-ai-action-btn { color: #1a1a2e; }

/* ── Drag-to-reposition — no transition on position while actively
   dragging, so the launcher tracks the pointer 1:1 without lag ── */
.cybe-ai-launcher--dragging {
  transition: none !important;
  cursor: grabbing;
  box-shadow: var(--neu-inner-deep), 0 0 0 3px rgba(0,0,255,.25);
}

/* ================================================================
   NATIVE CATEGORY GRID
   Neumorphic tiles replacing the old chip list — mirrors the actual
   category page layout so it feels seamless inside the chat.
   ================================================================ */
.cybe-ai-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.cybe-ai-cat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: none;
  border-radius: 14px;
  padding: 12px 8px;
  background: var(--neu-bg);
  box-shadow: var(--neu-inner);
  cursor: pointer;
  position: relative;
  text-align: center;
  transition: box-shadow .18s ease;
  -webkit-user-select: none;
  user-select: none;
}
.cybe-ai-cat-tile:active { box-shadow: var(--neu-inner-deep); }
.cybe-ai-cat-icon {
  font-size: 22px;
  line-height: 1;
}
.cybe-ai-cat-photo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: var(--neu-inner);
}
.cybe-ai-cat-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--text, #e8e8f2);
  text-transform: uppercase;
  line-height: 1.3;
  word-break: break-word;
}
[data-theme="light"] .cybe-ai-cat-name { color: #1a1a2e; }
.cybe-ai-cat-badge {
  position: absolute;
  top: 7px;
  right: 8px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--neu-bg);
  box-shadow: var(--neu-inner-deep);
  color: #4b5cff;
  font-size: 9.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
/* "View All Products" tile spans full width */
.cybe-ai-cat-viewall {
  grid-column: 1 / -1;
  flex-direction: row;
  gap: 8px;
  padding: 10px 16px;
  border: var(--neu-border-blue);
}
.cybe-ai-cat-viewall .cybe-ai-cat-name { color: #4b5cff; text-transform: none; font-size: 13px; }

/* ================================================================
   NATIVE CART RENDERER
   Real cart line-items: image, name, qty stepper, price, remove.
   Same row shape as the actual cart page — deep inset, no iframes.
   ================================================================ */
.cybe-ai-native-cart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.cybe-ai-cart-empty {
  font-size: 12.5px;
  opacity: .7;
  text-align: center;
  padding: 10px 0;
}
.cybe-ai-cart-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 12px;
  background: var(--neu-bg);
  box-shadow: var(--neu-inner);
}
.cybe-ai-cart-img {
  width: 52px;
  height: 52px;
  border-radius: 9px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255,255,255,.05);
}
.cybe-ai-cart-noimg {
  width: 52px;
  height: 52px;
  border-radius: 9px;
  flex-shrink: 0;
  background: rgba(255,255,255,.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.cybe-ai-cart-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cybe-ai-cart-name {
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text, #e8e8f2);
}
[data-theme="light"] .cybe-ai-cart-name { color: #1a1a2e; }
.cybe-ai-cart-price {
  font-size: 11.5px;
  color: #4b5cff;
  font-weight: 700;
}
.cybe-ai-cart-stepper {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}
.cybe-ai-cart-step {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: var(--neu-bg);
  box-shadow: var(--neu-inner-deep);
  color: var(--text, #e8e8f2);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}
[data-theme="light"] .cybe-ai-cart-step { color: #1a1a2e; }
.cybe-ai-cart-step:active { box-shadow: var(--neu-inner-deep); transform: scale(.9); }
.cybe-ai-cart-qty {
  font-size: 12px;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
  color: var(--text, #e8e8f2);
}
[data-theme="light"] .cybe-ai-cart-qty { color: #1a1a2e; }
.cybe-ai-cart-remove {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--neu-bg);
  box-shadow: var(--neu-inner-deep);
  color: #ff6b6b;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  padding: 0;
}
.cybe-ai-cart-remove:active { transform: scale(.88); }
.cybe-ai-cart-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px 2px;
  border-top: 1px solid rgba(128,128,160,.12);
  margin-top: 2px;
}
.cybe-ai-cart-total {
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #e8e8f2);
}
[data-theme="light"] .cybe-ai-cart-total { color: #1a1a2e; }
.cybe-ai-cart-checkout-btn {
  border: none;
  border-radius: 10px;
  padding: 7px 14px;
  background: var(--blue, #3B82F6);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.cybe-ai-cart-checkout-btn:active { opacity: .85; }

/* ================================================================
   LOAD-MORE BUTTON
   Appears below the product grid when there are more products than
   the initial page. Full-width, inset neumorphic, blue text.
   ================================================================ */
.cybe-ai-load-more {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px 0;
  border: none;
  border-radius: 12px;
  background: var(--neu-bg);
  box-shadow: var(--neu-inner);
  color: #4b5cff;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: box-shadow .18s ease;
}
.cybe-ai-load-more:active { box-shadow: var(--neu-inner-deep); }

/* ── CYBE AI PRO launcher ping — small always-on indicator dot marking
   this launcher as the admin-only assistant, distinct from the public
   CYBE AI button. Inset neumorphic, deep intensity, no drop shadow. ── */
.cybe-ai-ping {
  position: absolute;
  top: 4px; right: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--neu-bg);
  box-shadow: var(--neu-inner-deep);
  border: var(--neu-border-blue);
}
.cybe-ai-ping::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: #0000ff;
  animation: cybeAiPingPulse 1.8s ease-in-out infinite;
}
@keyframes cybeAiPingPulse {
  0%, 100% { opacity: .55; transform: scale(.85); }
  50%      { opacity: 1;   transform: scale(1); }
}

/* ── Always-visible Important templates row (no drawer tap needed) ── */
.cybe-ai-important-row {
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,.06);
  position: relative;
}
[data-theme="light"] .cybe-ai-important-row { border-top-color: rgba(0,0,0,.08); }

/* Small inset neumorphic handle — tap to slide the templates row up/down */
.cybe-ai-important-handle {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 26px;
  border-radius: 50%;
  border: none;
  background: var(--neu-bg);
  box-shadow: var(--neu-inner-deep);
  border: var(--neu-border-blue);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 11px;
  color: var(--muted, #8a8aa0);
  z-index: 2;
  transition: transform .25s ease;
}
.cybe-ai-important-handle:active { box-shadow: var(--neu-inner); }
.cybe-ai-important-row.is-collapsed .cybe-ai-important-handle { transform: translateX(-50%) rotate(180deg); }

.cybe-ai-important-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 16px;
  overflow-y: auto;
  max-height: 160px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  transition: max-height .25s ease, padding .25s ease, opacity .2s ease;
}
.cybe-ai-important-row.is-collapsed .cybe-ai-important-actions {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  overflow: hidden;
}
.cybe-ai-important-actions::-webkit-scrollbar { display: none; }
.cybe-ai-important-actions .cybe-ai-action-btn {
  flex: 1 1 auto;
  white-space: nowrap;
  font-size: 12px;
  padding: 8px 12px;
  min-width: calc(50% - 4px);
  max-width: 100%;
}