/* ================================================================
   CYBE HUB — CYBE AI Business Setup Chat
   Pure inset neumorphism throughout: every surface uses var(--neu-inner)
   or var(--neu-inner-deep) only. No raised/outer drop-shadows are added
   anywhere in this file — inset must always read as pressed-in, not lifted.
   Respects [data-theme="dark"/"light"] tokens site-wide.
   ================================================================ */

/* ── 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; }

/* Listening state — pulsing blue ring replaces the normal border while
   voice activation is active after a long-press */
.cybe-ai-launcher--listening {
  border-color: #4b5cff !important;
  animation: cybe-launcher-pulse 1s ease-in-out infinite;
}
@keyframes cybe-launcher-pulse {
  0%, 100% { box-shadow: var(--neu-inner-deep), 0 0 0 0 rgba(75,92,255,.5); }
  50%       { box-shadow: var(--neu-inner-deep), 0 0 0 10px rgba(75,92,255,0); }
}

/* Voice tooltip — appears above the launcher while listening */
@keyframes cybe-tooltip-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* "Make AI superior to Tawk/other floating things" master switch (off by
   default). When on, the theme adds this body class and CYBE AI jumps
   above Tawk's own widget (~2,147,483,000) instead of sitting in the
   normal 999,xxx tier with everything else. */
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; }

/* ── Fix 3: CYBE AI PRO stacks above CYBE AI (same right anchor) ── */
#cybe-ai-pro-launcher {
  bottom: 158px; /* 88 (CYBE AI bottom) + 58 (button height) + 12 (gap) */
}

/* ── Fix 1 & 2: Give-way when account dropdown opens ──
   JS sets body class "chub-dropdown-open" and CSS var --chub-dropdown-clearance.
   Both launchers translate upward, same pattern as Cyberspace giving way for CYBE AI. */
body.chub-dropdown-open .cybe-ai-launcher {
  transform: translateY(calc(-1 * var(--chub-dropdown-clearance, 0px)));
  transition: opacity .35s ease, transform .35s ease;
}

/* ── Fix 5: Tawk maximized — drop both AI launchers behind it ── */
body.tawk-is-maximized .cybe-ai-launcher {
  z-index: 10 !important;
}
.cybe-ai-launcher img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
  /* Prevent the browser's native long-press image context menu (Android
     Chrome shows "Open image / Copy image / etc." on long-press of any
     <img>). We want long-press to trigger voice activation, not the OS
     menu. -webkit-touch-callout covers iOS Safari; user-select + pointer-
     events on the img itself (not the button) block the drag-to-save
     gesture that also triggers it on Android. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none; /* the button handles all events — img doesn't need its own */
  -webkit-user-drag: none;
}
.cybe-ai-launcher .cybe-ai-launcher-fallback {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #4b5cff;
  letter-spacing: .02em;
}
.cybe-ai-launcher .cybe-ai-ping {
  position: absolute;
  top: 2px; right: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--neu-bg);
  box-shadow: var(--neu-inner);
  border: 1px solid rgba(0,0,255,.3);
}
.cybe-ai-ping::after {
  content: '';
  position: absolute; inset: 2px;
  border-radius: 50%;
  background: #22c55e;
}

/* ── 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 + our own other
   floating buttons beneath it. The PWA banner sets an intentionally huge
   inline z-index, so !important is required here to beat it. Everything
   returns to normal the instant the 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,
body.cybe-ai-chat-open #cybe-float-home-btn,


/* While CYBE AI is open, move the Cyberspace floating button out of the way
   to the top-right instead of hiding it. It returns to its normal bottom-right
   spot the instant the chat is closed (body class removed). */
body.cybe-ai-chat-open .chub-float-profile {
  top: 16px;
  right: 16px;
  bottom: auto !important;
  z-index: 1000000 !important;
}
@media (max-width: 480px) {
  body.cybe-ai-chat-open .chub-float-profile { top: 10px; right: 10px; }
}

.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;
  overflow: hidden;
}
@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;
}
.cybe-ai-head-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.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-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;
}

/* Progress bar — inset track, inset (not raised) fill */
.cybe-ai-progress {
  height: 6px;
  margin: 0 16px;
  border-radius: 6px;
  background: var(--neu-bg);
  box-shadow: var(--neu-inner);
  flex-shrink: 0;
  margin-top: 10px;
  overflow: hidden;
}
.cybe-ai-progress-fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(0,0,255,.55), rgba(75,92,255,.85));
  box-shadow: var(--neu-inner);
  transition: width .35s ease;
}
.cybe-ai-progress-label {
  font-size: 10px;
  color: var(--muted, #8a8aa0);
  text-align: right;
  padding: 4px 16px 0;
  flex-shrink: 0;
}

/* 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; flex-direction: row-reverse; }
.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;
}
.cybe-ai-msg-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.cybe-ai-bubble {
  position: relative;
  background: var(--neu-bg);
  box-shadow: var(--neu-inner);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text, #e8e8f2);
}
/* AI bubble — transparent, deep-intensity neumorphic inset (no glass/blur) */
.cybe-ai-msg.from-ai .cybe-ai-bubble {
  background: transparent;
  box-shadow: var(--neu-inner-deep);
  color: var(--text, #e8e8f2);
}
/* User bubble — transparent, deep-intensity neumorphic inset (no glass/blur) */
.cybe-ai-msg.from-user .cybe-ai-bubble {
  background: transparent;
  box-shadow: var(--neu-inner-deep);
  color: var(--text, #e8e8f2);
}
.cybe-ai-bubble.cybe-ai-pitch { border: var(--neu-border-blue); }
.cybe-ai-bubble.cybe-ai-pitch strong { color: #4b5cff; }
/* Light theme override — the site's [data-theme="light"] mode uses a pale
   background, so bubble text needs to go dark there instead. */
[data-theme="light"] .cybe-ai-bubble,
[data-theme="light"] .cybe-ai-preview-caption { color: #1a1a2e; }

/* Inline photo preview bubble — shown right after a CYBE AI upload */
.cybe-ai-bubble-photo { padding: 8px; }
.cybe-ai-preview-img { display: block; width: 100%; max-width: 180px; border-radius: 10px; box-shadow: var(--neu-inner-deep); }
.cybe-ai-preview-caption { font-size: 11px; color: var(--text, #e8e8f2); opacity: .7; margin-top: 6px; padding: 0 2px; }

/* 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); } }

/* Action row — yes/no/skip pills, all inset */
.cybe-ai-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 16px 12px;
  flex-shrink: 0;
  max-height: 260px;
  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: #4b5cff; border: var(--neu-border-blue); }
.cybe-ai-action-btn.is-skip { color: var(--muted, #8a8aa0); }
.cybe-ai-action-btn.is-disabled,
.cybe-ai-action-btn:disabled {
  color: var(--muted, #8a8aa0);
  opacity: .5;
  cursor: not-allowed;
  box-shadow: var(--neu-inner);
}
.cybe-ai-action-btn:disabled:active { box-shadow: var(--neu-inner); }

/* Text/url input row */
.cybe-ai-input-row {
  display: flex;
  gap: 8px;
  padding: 4px 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;
}
.cybe-ai-input::placeholder { color: var(--muted, #6d6d82); }
.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;
}
.cybe-ai-send:active { box-shadow: var(--neu-inner-deep); }

/* Contact channel row — WhatsApp / Email / Live Chat */
.cybe-ai-contact-row {
  display: flex;
  gap: 8px;
  padding: 2px 16px 12px;
  flex-shrink: 0;
}
.cybe-ai-contact-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border-radius: 12px;
  background: var(--neu-bg);
  box-shadow: var(--neu-inner);
  border: none;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text, #e8e8f2);
  cursor: pointer;
  text-decoration: none;
}
.cybe-ai-contact-btn:active { box-shadow: var(--neu-inner-deep); }
.cybe-ai-contact-btn .cybe-ai-contact-icon { font-size: 18px; }

[data-theme="light"] .cybe-ai-head-text strong,
[data-theme="light"] .cybe-ai-input,
[data-theme="light"] .cybe-ai-contact-btn { color: #1a1a2e; }

/* ================================================================
   COLLAPSED INPUT TRAY — Message Template / Type / Microphone
   Replaces always-visible quick-chips + input row with a compact
   3-icon tray. Tapping an icon animates its drawer open (quick chips,
   or the text input); tapping the mic starts listening immediately
   with its own pulse animation. Only one drawer is open at a time.
   Shared by both CYBE AI (public) and CYBE AI PRO (Cybe Admin console)
   since both reuse this same stylesheet.
   ================================================================ */
.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: #4b5cff; }
[data-theme="light"] .cybe-ai-tray-btn { color: #1a1a2e; }
[data-theme="light"] .cybe-ai-tray-btn.is-active { color: #2451ff; }

/* Mic pulse while actively listening */
.cybe-ai-tray-btn.mic-listening {
  color: #ff3b5c;
  box-shadow: var(--neu-inner-deep);
  animation: cybeAiMicPulse 1.1s ease-in-out infinite;
  position: relative;
}
/* Animated outer ring — clear visual that mic is hot */
.cybe-ai-tray-btn.mic-listening::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid rgba(255,59,92,.6);
  animation: cybeAiMicRing 1.1s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cybeAiMicPulse {
  0%, 100% { box-shadow: var(--neu-inner-deep), 0 0 0 0 rgba(255,59,92,.5); }
  50%      { box-shadow: var(--neu-inner-deep), 0 0 0 10px rgba(255,59,92,0); }
}
@keyframes cybeAiMicRing {
  0%, 100% { transform: scale(1); opacity: .7; }
  50%      { transform: scale(1.18); opacity: 0; }
}

/* 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: 220px;
  opacity: 1;
}
.cybe-ai-drawer .cybe-ai-actions,
.cybe-ai-drawer .cybe-ai-input-row { padding-top: 8px; }

/* ── Settings gear + panel (persona, speak toggle, speed) ── */
.cybe-ai-gear {
  background: var(--neu-bg);
  border: none;
  font-size: 15px;
  cursor: pointer;
  opacity: 1;
  margin-right: 6px;
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 4px 4px 9px rgba(0,0,0,.55), inset -4px -4px 9px rgba(255,255,255,.05);
  transition: box-shadow .2s;
}
[data-theme="light"] .cybe-ai-gear {
  box-shadow: inset 4px 4px 9px rgba(0,0,0,.18), inset -4px -4px 9px rgba(255,255,255,.85);
}
.cybe-ai-gear:hover {
  box-shadow: inset 5px 5px 11px rgba(0,0,0,.65), inset -5px -5px 11px rgba(255,255,255,.06);
}
[data-theme="light"] .cybe-ai-gear:hover {
  box-shadow: inset 5px 5px 11px rgba(0,0,0,.22), inset -5px -5px 11px rgba(255,255,255,.9);
}

/* ── Greeting hint ── */
.cybe-ai-greeting-hint {
  font-size: 11px;
  color: var(--muted, #6a6a82);
  text-align: center;
  margin: -6px 16px 10px;
  opacity: 1;
  transition: opacity .5s ease;
  pointer-events: none;
  font-style: italic;
}
[data-theme="light"] .cybe-ai-greeting-hint { color: #9a9aaa; }
.cybe-ai-greeting-hint.is-hidden { opacity: 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;
}
/* The panel is collapsed by default via the `hidden` attribute (toggled by
   the ⚙️ gear button in JS). Without this rule, the `display: flex` above
   has equal specificity to the browser's built-in `[hidden]{display:none}`
   and — because author styles beat the user-agent stylesheet regardless of
   specificity ties — the panel showed up open every time despite `hidden`
   being set correctly. This makes the attribute authoritative again. */
.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; }

/* Voice selector row — takes full width so the dropdown has room */
.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, #13132b);
  box-shadow: inset 3px 3px 7px var(--neu-dark, rgba(0,0,0,.45)), inset -3px -3px 7px var(--neu-light, rgba(255,255,255,.05));
  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;
  background-color: var(--neu-bg, #e8e8ef);
  box-shadow: inset 3px 3px 7px var(--neu-dark, rgba(0,0,0,.12)), inset -3px -3px 7px var(--neu-light, rgba(255,255,255,.8));
}
.cybe-ai-voice-select optgroup { font-weight: 700; font-size: 11px; color: #4b5cff; }
.cybe-ai-voice-select option { background: var(--neu-bg, #13132b); 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; }

/* ── Page-aware hint bubble — "Ask me anything about this page" ──
   Appears next to the CYBE AI launcher for ~10s on every page load, then
   auto-hides. Lives only inside the launcher's own space, never as a
   page-wide banner. */
.cybe-ai-page-hint {
  position: fixed;
  right: 86px;
  bottom: 104px;
  max-width: 190px;
  background: var(--neu-bg);
  box-shadow: var(--neu-inner-deep, inset 3px 3px 8px rgba(0,0,0,.35), inset -3px -3px 8px rgba(255,255,255,.05));
  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); }
/* Logged-in visitors see this bubble more often than first-time guests —
   keep it flatter/quieter for them by dropping the shadow. */
body.logged-in .cybe-ai-page-hint {
  box-shadow: none;
}
.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: 158px; }
}


.cybe-ai-tray-theme-lift:hover::after,
.cybe-ai-tray-theme-lift:focus-visible::after { opacity: 1; }
.cybe-ai-tray-theme-lift.is-active { box-shadow: var(--neu-inner-deep); color: #f5c518; }
[data-theme="light"] .cybe-ai-tray-theme-lift.is-active { color: #c8941a; }

/* ═══════════════════════════════════════════════════════════════════
   BRANCH LOCATIONS — profile card section
   Deep-intensity neumorphic inset: no outer/drop shadows anywhere.
═══════════════════════════════════════════════════════════════════ */
.chub-branch-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(128,128,200,.12);
}
.chub-branch-section-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  margin: 0 0 10px;
  color: var(--text, #e8e8f2);
  opacity: .85;
}
.chub-branch-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 12px;
}
.chub-branch-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--neu-bg, #13132b);
  border-radius: 10px;
  padding: 9px 12px;
  box-shadow: inset 3px 3px 8px var(--neu-dark, rgba(0,0,0,.45)),
              inset -3px -3px 8px var(--neu-light, rgba(255,255,255,.05));
}
[data-theme="light"] .chub-branch-item {
  box-shadow: inset 3px 3px 8px var(--neu-dark, rgba(0,0,0,.12)),
              inset -3px -3px 8px var(--neu-light, rgba(255,255,255,.8));
}
.chub-branch-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text, #e8e8f2);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chub-branch-remove-btn {
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  padding: 0;
  cursor: pointer;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  flex: none;
  color: #ff6b6b;
  background: var(--neu-bg, #13132b);
  box-shadow: inset 2px 2px 5px var(--neu-dark, rgba(0,0,0,.45)),
              inset -2px -2px 5px var(--neu-light, rgba(255,255,255,.05));
  transition: color .15s;
}
[data-theme="light"] .chub-branch-remove-btn {
  box-shadow: inset 2px 2px 5px var(--neu-dark, rgba(0,0,0,.12)),
              inset -2px -2px 5px var(--neu-light, rgba(255,255,255,.8));
  color: #c0392b;
}
.chub-branch-remove-btn:hover { color: #ff3b3b; }

/* "+ Add Another Branch" button — neumorphic inset, deep intensity */
.chub-add-branch-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  color: #4b5cff;
  background: var(--neu-bg, #13132b);
  box-shadow: inset 3px 3px 8px var(--neu-dark, rgba(0,0,0,.45)),
              inset -3px -3px 8px var(--neu-light, rgba(255,255,255,.05));
  transition: color .15s, box-shadow .15s;
}
[data-theme="light"] .chub-add-branch-btn {
  box-shadow: inset 3px 3px 8px var(--neu-dark, rgba(0,0,0,.12)),
              inset -3px -3px 8px var(--neu-light, rgba(255,255,255,.8));
}
.chub-add-branch-btn:hover { color: #3345ee; }
.chub-add-branch-btn:active {
  box-shadow: inset 4px 4px 10px var(--neu-dark, rgba(0,0,0,.55)),
              inset -4px -4px 10px var(--neu-light, rgba(255,255,255,.04));
}