/* === HINTS === Beacon + popover styling (2026-07-15)
   Uses brand palette tokens (--accent orange, --green lime, --surface, --text,
   --border, --cream-base). Everything renders inside the fixed #bc-hint-layer
   portal so it escapes overflow/stacking contexts and sits above app surfaces
   and modals. Honors prefers-reduced-motion via the .bc-reduced-motion class. */

/* ---- portal layer ---------------------------------------------------- */
.bc-hint-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147480000;
}
.bc-hint-layer > * { pointer-events: auto; }

/* ---- beacon dot ------------------------------------------------------ */
.bc-beacon {
  position: fixed;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}
.bc-beacon__dot {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--accent, #E66B30);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 8px var(--accent, #E66B30);
}
.bc-beacon__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent, #E66B30);
  opacity: 0.55;
  animation: bc-pulse 1.8s ease-out infinite;
}
.bc-beacon:hover .bc-beacon__dot { background: var(--accent-hover, #cf5b25); }
@keyframes bc-pulse {
  0%   { transform: scale(0.6); opacity: 0.6; }
  70%  { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* ---- spotlight ring -------------------------------------------------- */
.bc-ring {
  position: fixed;
  border-radius: 10px;
  border: 2px solid var(--accent, #E66B30);
  box-shadow: 0 0 0 3px var(--accent-dim, rgba(230, 107, 48, 0.15)), 0 0 14px var(--accent, #E66B30);
  pointer-events: none;
  z-index: 1;
  animation: bc-ring-pulse 1.8s ease-in-out infinite;
}
@keyframes bc-ring-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--accent-dim, rgba(230,107,48,0.15)), 0 0 8px var(--accent, #E66B30); }
  50%      { box-shadow: 0 0 0 6px var(--accent-dim, rgba(230,107,48,0.15)), 0 0 18px var(--accent, #E66B30); }
}

/* ---- arrow ----------------------------------------------------------- */
.bc-arrow {
  position: fixed;
  width: 18px;
  height: 22px;
  pointer-events: none;
  z-index: 2;
  animation: bc-bounce 1s ease-in-out infinite;
}
.bc-arrow__body {
  position: absolute;
  left: 6px;
  top: 0;
  width: 3px;
  height: 12px;
  background: var(--accent, #E66B30);
}
.bc-arrow::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--accent, #E66B30);
}
@keyframes bc-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

/* ---- popover --------------------------------------------------------- */
.bc-pop {
  position: fixed;
  width: 264px;
  max-width: calc(100vw - 16px);
  background: var(--surface, #3A3A3A);
  color: var(--text, #F3F5EC);
  border: 1px solid var(--border, #565656);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  padding: 14px 14px 12px;
  z-index: 3;
  font-family: inherit;
  animation: bc-pop-in 0.14s ease-out;
}
@keyframes bc-pop-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bc-pop__beak {
  position: absolute;
  left: var(--bc-beak-x, 24px);
  width: 12px;
  height: 12px;
  background: var(--surface, #3A3A3A);
  border: 1px solid var(--border, #565656);
  transform: rotate(45deg);
}
.bc-pop--below .bc-pop__beak { top: -7px; border-right: none; border-bottom: none; }
.bc-pop--above .bc-pop__beak { bottom: -7px; border-left: none; border-top: none; }

.bc-pop__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #F3F5EC);
  margin-bottom: 3px;
}
.bc-pop__text { font-size: 12.5px; line-height: 1.4; color: var(--text2, #c8c6b8); }
.bc-pop__caption { font-size: 12px; color: var(--text2, #c8c6b8); }

/* variant visuals */
.bc-pop__media img,
.bc-pop__anim,
.bc-pop__icon,
.bc-pop__emoji { display: block; margin: 0 auto 8px; }
.bc-pop__media img { max-width: 100%; border-radius: 8px; max-height: 140px; object-fit: cover; }
.bc-pop__icon { color: var(--accent, #E66B30); text-align: center; }
.bc-pop__emoji { font-size: 34px; text-align: center; line-height: 1; }

/* anim vignette: three rising bars */
.bc-pop__anim { height: 30px; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.bc-pop__anim span {
  width: 6px; height: 10px; border-radius: 3px;
  background: var(--accent, #E66B30);
  animation: bc-bars 1.1s ease-in-out infinite;
}
.bc-pop__anim span:nth-child(2) { animation-delay: 0.15s; background: var(--green, #B8E338); }
.bc-pop__anim span:nth-child(3) { animation-delay: 0.3s; }
@keyframes bc-bars { 0%, 100% { height: 8px; } 50% { height: 26px; } }

/* steps */
.bc-pop__steps { list-style: none; margin: 6px 0 0; padding: 0; }
.bc-pop__steps li {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text, #F3F5EC); padding: 3px 0;
}
.bc-step__n {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent, #E66B30); color: #fff;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

/* chat bubble */
.bc-pop__chat {
  font-size: 12.5px; line-height: 1.4; color: var(--text, #F3F5EC);
  background: var(--surface2, #454545);
  border-radius: 12px 12px 12px 3px;
  padding: 8px 10px; margin-top: 4px;
}

/* minimal pill */
.bc-pop__pill {
  display: inline-block; font-size: 12.5px; font-weight: 600;
  color: var(--text, #F3F5EC);
  background: var(--accent-dim, rgba(230, 107, 48, 0.15));
  border: 1px solid var(--accent, #E66B30);
  border-radius: 999px; padding: 5px 12px;
}
.bc-pop__body--minimal .bc-pop__actions,
.bc-pop__body--minimal + .bc-pop__actions { margin-top: 10px; }

/* actions */
.bc-pop__actions {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px;
}
.bc-pop__got {
  background: var(--accent, #E66B30); color: #fff;
  border: none; border-radius: 8px; padding: 6px 14px;
  font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.bc-pop__got:hover { background: var(--accent-hover, #cf5b25); }
.bc-pop__off {
  background: transparent; border: none; color: var(--text3, #8c8a7e);
  font-size: 11.5px; cursor: pointer; font-family: inherit; text-decoration: underline;
}
.bc-pop__off:hover { color: var(--text2, #c8c6b8); }

/* ---- lightbulb toggle + menu ---------------------------------------- */
.bc-tips-toggle svg { display: block; }
.bc-tips-toggle--off { opacity: 0.5; }
.bc-tips-toggle--off svg { stroke: var(--text3, #8c8a7e); }

.bc-tips-menu {
  position: fixed;
  min-width: 180px;
  background: var(--surface, #3A3A3A);
  border: 1px solid var(--border, #565656);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  padding: 6px;
  z-index: 2147481000;
}
.bc-tips-menu__item {
  display: block; width: 100%; text-align: left;
  background: transparent; border: none; color: var(--text, #F3F5EC);
  font-size: 12.5px; padding: 7px 10px; border-radius: 6px;
  cursor: pointer; font-family: inherit;
}
.bc-tips-menu__item:hover { background: var(--surface2, #454545); }
.bc-tips-menu__item--admin { color: var(--accent, #E66B30); }

/* ---- welcome notice -------------------------------------------------- */
.bc-welcome {
  position: fixed;
  width: 240px;
  background: var(--surface, #3A3A3A);
  color: var(--text, #F3F5EC);
  border: 1px solid var(--accent, #E66B30);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  padding: 14px;
  z-index: 2147481500;
}
.bc-welcome__title { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.bc-welcome__text { font-size: 12.5px; line-height: 1.4; color: var(--text2, #c8c6b8); margin-bottom: 12px; }
.bc-welcome__ok {
  background: var(--accent, #E66B30); color: #fff; border: none;
  border-radius: 8px; padding: 6px 14px; font-size: 12.5px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.bc-welcome__ok:hover { background: var(--accent-hover, #cf5b25); }
/* Upward pointer built from two stacked triangles: an outer accent-colored
   arrow with an inner surface-colored arrow 1px smaller, so the border reads as
   a continuous outline around the pointer (no seam / broken frame). */
.bc-welcome::before,
.bc-welcome::after {
  content: "";
  position: absolute;
  left: var(--bc-wel-beak-x, 220px);
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
}
.bc-welcome::before {
  top: -9px;
  border-bottom: 9px solid var(--accent, #E66B30);
}
.bc-welcome::after {
  top: -8px;
  border-left-width: 8px;
  border-right-width: 8px;
  border-bottom: 8px solid var(--surface, #3A3A3A);
}

/* ---- reduced motion -------------------------------------------------- */
.bc-reduced-motion .bc-beacon__pulse,
.bc-reduced-motion .bc-ring,
.bc-reduced-motion .bc-arrow,
.bc-reduced-motion .bc-pop__anim span { animation: none !important; }
.bc-reduced-motion .bc-pop { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .bc-beacon__pulse, .bc-ring, .bc-arrow, .bc-pop__anim span, .bc-pop { animation: none !important; }
}

/* ---- feature-video link + lightbox --------------------------------- */
.bc-pop__video {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--accent, #E66B30); font-size: 12px; font-weight: 700;
  text-decoration: none; cursor: pointer; margin-right: auto;
}
.bc-pop__video:hover { text-decoration: underline; }
.bc-pop__video-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent, #E66B30); color: #fff; font-size: 8px; padding-left: 1px;
}

.bc-lightbox {
  position: fixed; inset: 0; z-index: 2147482000;
  display: flex; align-items: center; justify-content: center;
}
.bc-lightbox__backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 20, 18, 0.55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.bc-lightbox__dialog {
  position: relative; z-index: 1;
  width: min(880px, 92vw); max-height: 88vh;
  background: #0d0d0c; border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  display: flex; flex-direction: column;
}
.bc-lightbox__title {
  color: #f3f5ec; font-size: 14px; font-weight: 700;
  padding: 12px 44px 10px 16px; font-family: inherit;
}
.bc-lightbox__video {
  width: 100%; max-height: calc(88vh - 44px);
  display: block; background: #000; object-fit: contain;
}
.bc-lightbox__close {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.5); color: #fff; border: none;
  font-size: 20px; line-height: 1; cursor: pointer; font-family: inherit;
}
.bc-lightbox__close:hover { background: rgba(0, 0, 0, 0.75); }