/* SP-247 tour overlay styles */
/* Default backdrop — transparent; only dims when tour is on a centered step */
.jargan-tour-backdrop {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 9998;
  pointer-events: none;
  transition: background 180ms ease-out !important;
}
.jargan-tour-backdrop.jargan-tour-backdrop-active {
  background: rgba(0, 0, 0, 0.45);
}

/* Spotlight — a rectangle sized to the anchor, uses a huge box-shadow to dim
   everything outside it. Orange halo + soft glow draws attention. */
.jargan-tour-spotlight {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 9998;
  border-radius: 10px !important;
  pointer-events: none;
  opacity: 0;
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.55),
    0 0 0 2px rgba(221, 81, 0, 0.9),
    0 0 22px 4px rgba(221, 81, 0, 0.45),
    0 0 44px 12px rgba(221, 81, 0, 0.20) !important;
  transition:
    top 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    left 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    width 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    height 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 180ms ease-out !important;
}
.jargan-tour-spotlight.jargan-tour-spotlight-active {
  opacity: 1;
}

/* Gentle pulse on the halo so the eye finds it */
@keyframes jarganTourHaloPulse {
  0%, 100% { box-shadow:
      0 0 0 9999px rgba(0, 0, 0, 0.55),
      0 0 0 2px rgba(221, 81, 0, 0.9),
      0 0 22px 4px rgba(221, 81, 0, 0.45),
      0 0 44px 12px rgba(221, 81, 0, 0.20) !important; }
  50%      { box-shadow:
      0 0 0 9999px rgba(0, 0, 0, 0.55),
      0 0 0 2px rgba(221, 81, 0, 1),
      0 0 28px 6px rgba(221, 81, 0, 0.55),
      0 0 56px 16px rgba(221, 81, 0, 0.28) !important; }
}
.jargan-tour-spotlight.jargan-tour-spotlight-active {
  animation: jarganTourHaloPulse 2.4s ease-in-out infinite;
}

.jargan-tour-tooltip {
  position: fixed;
  z-index: 9999;
  width: min(360px, calc(100vw - 24px));
  background: #fff;
  color: #222;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
  padding: 18px 20px 16px;
  font-family: inherit;
  line-height: 1.4;
  animation: jarganTourFadeIn 160ms ease-out;
}

.jargan-tour-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: 10px;
  gap: 4px;
}

@keyframes jarganTourFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.jargan-tour-close {
  justify-self: end;
  background: transparent;
  border: 0;
  font-size: 22px;
  color: #999;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}

.jargan-tour-close:hover {
  color: #222;
}

.jargan-tour-progress {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #DD5100;
  text-transform: uppercase;
}

.jargan-tour-progress .jargan-tour-step-total {
  color: #999;
  margin-left: 4px;
  font-weight: 500;
}

.jargan-tour-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: #111;
}

.jargan-tour-body {
  margin: 0 0 14px;
  font-size: 14px;
  color: #333;
}

.jargan-tour-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.jargan-tour-skip {
  justify-self: center;
  background: transparent;
  border: 0;
  color: #666;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 6px;
  white-space: nowrap;
}

.jargan-tour-skip:hover {
  color: #222;
  text-decoration: underline;
}

.jargan-tour-nav {
  display: flex;
  gap: 8px;
}

.jargan-tour-prev,
.jargan-tour-next {
  border: 0;
  border-radius: 6px !important;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.jargan-tour-prev {
  background: #f2f2f2;
  color: #333;
}

.jargan-tour-prev:hover {
  background: #e6e6e6;
}

.jargan-tour-next {
  background: #DD5100;
  color: #fff;
}

.jargan-tour-next:hover {
  background: #c04700;
}

/* SP-268: mobile bottom-sheet treatment for guided tour */
@media (max-width: 640px) {
  .jargan-tour-tooltip {
    /* Let tour.js set top/left via inline styles for anchored steps,
       but when the CSS below supplies them with !important the inline
       values are overridden. Centered (unanchored) steps still get
       the inline positioning from tour.js — those get overridden here too. */
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(70vh, 520px);
    padding: 16px 18px 14px;
    border-radius: 14px;
    overflow-y: auto;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.22);
  }

  .jargan-tour-title {
    font-size: 16px;
    line-height: 1.3;
  }

  .jargan-tour-body {
    font-size: 14px;
    line-height: 1.4;
  }

  .jargan-tour-progress {
    font-size: 11px;
  }

  .jargan-tour-header {
    margin-bottom: 8px;
  }

  .jargan-tour-actions {
    margin-top: 12px;
  }

  .jargan-tour-nav {
    width: 100%;
  }

  .jargan-tour-nav > button {
    flex: 1;
  }

  .jargan-tour-prev,
  .jargan-tour-next {
    min-height: 44px;
    font-size: 14px;
    padding: 10px 14px;
  }

  .jargan-tour-skip {
    font-size: 12px;
    padding: 4px 6px;
    min-height: unset;
  }
}

/* SP-268: landscape phones — keep the sheet short so it doesn't eat the screen */
@media (max-width: 900px) and (max-height: 500px) {
  .jargan-tour-tooltip {
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: 80vh;
    overflow-y: auto;
  }

  .jargan-tour-actions {
    flex-direction: row;
  }

  .jargan-tour-nav {
    display: flex;
    gap: 8px;
  }
}

/* SP-250: help-circle tour re-entry button, lives inside the workflow rail */
.workflow-indicator .workflow-help-btn {
  position:absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50% !important;
  border: 1px solid rgba(221, 81, 0, 0.4);
  background: #fff;
  color: #DD5100;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease, opacity 220ms ease !important;
  z-index: 2;
  /* SP-285: keep pill hidden + non-interactive until body.app-ready — splash exit
     AND entities (partners/voices/channels/savedPlans) must both resolve so the
     tour lands on populated UI rather than empty placeholders. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
body.app-ready .workflow-indicator .workflow-help-btn {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.workflow-indicator .workflow-help-btn:hover {
  background: #DD5100;
  color: #fff;
  transform: translateX(-50%) scale(1.05);
}

.workflow-indicator.collapsed .workflow-help-btn {
  display: none;
}

/* SP-282 v2: mobile — pill sits inside nav band, left of CREATE icon, above all layers */
@media (max-width: 768px) {
  .workflow-indicator .workflow-help-btn,
  .workflow-indicator.collapsed .workflow-help-btn {
    position: fixed !important;
    bottom: 10px;
    left: 8px;
    top: auto;
    right: auto;
    transform: none !important;
    /* SP-285: mobile rule previously forced display:inline-flex unconditionally,
       which overrode the app-ready visibility gate. Keep display for layout but
       still require body.app-ready for opacity/interaction (set above). */
    display: inline-flex !important;
    width: 32px;
    height: 32px;
    font-size: 15px;
    z-index: 400;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  }
  .workflow-indicator .workflow-help-btn:hover {
    transform: none !important;
  }
}