/* ============================================================
   GUIDED TOUR — onboarding overlay
   ============================================================
   COLOURS ARE SELF-CONTAINED ON PURPOSE.

   The first version reused the app's variables (--panel, --text, --dim...).
   That broke badly on the landing page, which is a DIFFERENT design system:
   it defines --text (near-white, because the landing is dark) but has no
   --panel at all. So the bubble fell back to a white background and drew
   near-white text on it -- the "текст какой-то прозрачный" the owner saw.

   Every colour below is therefore literal, scoped to .tour-*, and reads the
   same over the dark landing page and the light dashboard: one dark card,
   light text, like a tooltip. That also makes the whole thing calmer than the
   previous bright-white panel ("слишком яркие").
   ============================================================ */

.tour-lock { overflow: hidden !important; }

/* --- the four dimming panels around the highlighted element ---
   Four panels rather than one box-shadow ring, because a shadow "hole" still
   swallows clicks on the element beneath it. With four panels the target is
   genuinely uncovered and stays clickable -- which matters here: the owner
   wants the visitor to actually TRY the thing being pointed at, then press
   Next. Kept fairly light (.55) so the page underneath stays readable. */
.tour-mask {
  position: fixed; background: rgba(8, 12, 24, .55); z-index: 9000;
  opacity: 0; transition: opacity .3s ease;
}
.tour-mask.is-on { opacity: 1; }

/* --- how the target is marked ---
   A hard rectangular border read as a crude "square box" (owner: "тупо типо
   граница квадраты"). Replaced with two softer cues that together point at the
   element without drawing a box around it:
     1) a glow that hugs the element's shape rather than outlining it
     2) a bouncing arrow that sits just outside it and actually POINTS
   The glow uses a large blurred spread instead of a 2px line, so it reads as
   light falling on the element rather than a frame stuck to it. */
.tour-ring {
  position: fixed; z-index: 9001; border-radius: 16px; pointer-events: none;
  border: none;
  background: rgba(108, 140, 255, .07);
  box-shadow: 0 0 0 1px rgba(140, 165, 255, .35),
              0 0 26px 6px rgba(108, 140, 255, .30),
              0 0 60px 18px rgba(108, 140, 255, .14);
  transition: top .5s cubic-bezier(.33,1,.68,1), left .5s cubic-bezier(.33,1,.68,1),
              width .5s cubic-bezier(.33,1,.68,1), height .5s cubic-bezier(.33,1,.68,1),
              opacity .28s ease;
}
/* gentle breathing so the eye is drawn to it without a hard pulsing frame */
.tour-ring::after {
  content: ''; position: absolute; inset: 0; border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(140, 165, 255, .5);
  animation: tour-breathe 2.6s ease-in-out infinite;
}
@keyframes tour-breathe {
  0%, 100% { opacity: .25; }
  50%      { opacity: .8; }
}

/* the pointer itself -- a real arrow, placed on whichever side the card is */
.tour-pointer {
  position: fixed; z-index: 9003; width: 34px; height: 34px; pointer-events: none;
  color: #7d97ff;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.45));
  transition: top .5s cubic-bezier(.33,1,.68,1), left .5s cubic-bezier(.33,1,.68,1), opacity .25s ease;
}
.tour-pointer svg { width: 100%; height: 100%; display: block; }
.tour-pointer.point-down  { animation: tour-bob-y 1.5s ease-in-out infinite; }
.tour-pointer.point-up    { animation: tour-bob-y 1.5s ease-in-out infinite reverse; }
.tour-pointer.point-right { animation: tour-bob-x 1.5s ease-in-out infinite; }
.tour-pointer.point-left  { animation: tour-bob-x 1.5s ease-in-out infinite reverse; }
@keyframes tour-bob-y {
  0%, 100% { transform: translateY(-5px); }
  50%      { transform: translateY(3px); }
}
@keyframes tour-bob-x {
  0%, 100% { transform: translateX(-5px); }
  50%      { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .tour-ring::after { animation: none; opacity: .6; }
  .tour-pointer { animation: none !important; }
  .tour-ring, .tour-bubble, .tour-pointer { transition: none; }
}

/* --- the explanation card --- */
.tour-bubble {
  position: fixed; z-index: 9002; width: min(380px, calc(100vw - 24px));
  background: #171b2c;
  color: #f2f4fb;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  box-shadow: 0 26px 64px -18px rgba(0, 0, 0, .7);
  padding: 20px 20px 16px;
  transition: top .5s cubic-bezier(.33,1,.68,1), left .5s cubic-bezier(.33,1,.68,1), opacity .28s ease;
  animation: tour-bubble-in .3s cubic-bezier(.22,.9,.32,1) both;
}
@keyframes tour-bubble-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tour-bubble { animation: none; } }

/* Text cross-fade between steps. Only the CONTENT fades -- the card itself
   keeps its position and glides, so the eye tracks one moving object instead
   of a card that blinks and a ring that slides at a different speed, which is
   what made step changes feel abrupt. */
.tour-bubble > *:not(.tour-arrow) { transition: opacity .16s ease; }
.tour-bubble.tour-fading > *:not(.tour-arrow) { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .tour-bubble > *:not(.tour-arrow) { transition: none; }
  .tour-bubble.tour-fading > *:not(.tour-arrow) { opacity: 1; }
}

.tour-arrow {
  position: absolute; width: 14px; height: 14px; background: #171b2c;
  border: 1px solid rgba(255,255,255,.10); transform: rotate(45deg);
}
.tour-arrow.at-top    { top: -8px;    border-right: none; border-bottom: none; }
.tour-arrow.at-bottom { bottom: -8px; border-left: none;  border-top: none; }
.tour-arrow.at-left   { left: -8px;   border-right: none; border-top: none; }
.tour-arrow.at-right  { right: -8px;  border-left: none;  border-bottom: none; }
.tour-bubble.no-arrow .tour-arrow { display: none; }

.tour-step-count {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #8f9ab8; margin-bottom: 7px;
}
.tour-title { font-size: 18px; font-weight: 800; margin: 0 0 8px; line-height: 1.25; color: #ffffff; }
.tour-text  { font-size: 14.5px; line-height: 1.6; color: #c7cde0; margin: 0; }
/* the "try it yourself" nudge on steps that point at something interactive */
.tour-hint {
  display: block; margin-top: 10px; font-size: 13px; line-height: 1.5;
  color: #9fd3b0; background: rgba(64, 180, 110, .12);
  border-left: 2px solid #4cae72; border-radius: 0 8px 8px 0; padding: 8px 11px;
}

.tour-progress { height: 4px; border-radius: 999px; background: rgba(255,255,255,.10); margin: 16px 0 13px; overflow: hidden; }
.tour-progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #6c8cff, #8f7bff); transition: width .35s ease; }

.tour-actions { display: flex; align-items: center; gap: 8px; }
.tour-actions .tour-spacer { flex: 1; }
.tour-btn {
  border: none; border-radius: 10px; padding: 10px 17px; font-size: 14px; font-weight: 600;
  cursor: pointer; min-height: 42px; white-space: nowrap; font-family: inherit;
  transition: filter .18s ease, background .18s ease;
}
.tour-btn-primary { background: #5b7cfa; color: #fff; }
.tour-btn-primary:hover { filter: brightness(1.1); }
.tour-btn-ghost { background: rgba(255,255,255,.07); color: #d7dcec; }
.tour-btn-ghost:hover { background: rgba(255,255,255,.13); }
.tour-skip { background: none; border: none; color: #8f9ab8; font-size: 13px; cursor: pointer; padding: 8px 4px; font-family: inherit; }
.tour-skip:hover { color: #f2f4fb; text-decoration: underline; }

/* --- opening card --- */
.tour-welcome-backdrop {
  position: fixed; inset: 0; z-index: 9010; background: rgba(8, 12, 24, .72);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  animation: tour-fade .28s ease both;
}
@keyframes tour-fade { from { opacity: 0; } to { opacity: 1; } }
.tour-welcome {
  width: min(450px, 100%); background: #171b2c; color: #f2f4fb;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px; padding: 32px 28px 26px; text-align: center;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .75);
  animation: tour-pop .34s cubic-bezier(.22,.9,.32,1.2) both;
  max-height: 92dvh; overflow-y: auto;
}
@keyframes tour-pop { from { opacity: 0; transform: scale(.95) translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .tour-welcome, .tour-welcome-backdrop { animation: none; }
}
/* --- language + theme row above the question ---
   Someone who cannot read the current language has to be able to switch BEFORE
   deciding whether to take the tour, and a bright card on a dark phone at night
   is the other reason people dismiss it. Both controls therefore sit at the top
   of the card, not buried in settings. */
.tour-welcome-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: -8px 0 18px;
}
.tour-lang-switch {
  display: inline-flex; gap: 2px; padding: 3px;
  background: rgba(255,255,255,.06); border-radius: 999px;
}
.tour-lang-btn {
  border: none; background: none; color: #9aa3bd; font-family: inherit;
  font-size: 12.5px; font-weight: 700; letter-spacing: .03em;
  padding: 7px 13px; border-radius: 999px; cursor: pointer; min-height: 34px;
  transition: background .2s ease, color .2s ease;
}
.tour-lang-btn:hover { color: #f2f4fb; }
.tour-lang-btn.is-active {
  background: linear-gradient(135deg, #5b7cfa, #7d6bfb); color: #fff;
  box-shadow: 0 4px 12px -4px rgba(91,124,250,.8);
}
.tour-theme-btn {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09);
  color: #c7cde0; cursor: pointer; transition: background .2s ease, color .2s ease;
}
.tour-theme-btn:hover { background: rgba(255,255,255,.13); color: #fff; }
/* show the icon for the theme you'd switch TO, which is how every theme
   toggle in this app already behaves */
/* Keyed off .tour-light (set by tour.js from the body's real background), NOT
   off [data-theme]: inside the app "no attribute" means light, so keying off
   the attribute showed the wrong icon on every dashboard page. */
.tour-theme-btn .tour-icon-moon { display: none; }
:root.tour-light .tour-theme-btn .tour-icon-sun { display: none; }
:root.tour-light .tour-theme-btn .tour-icon-moon { display: block; }

.tour-welcome-icon {
  width: 64px; height: 64px; border-radius: 20px; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center; font-size: 31px;
  background: linear-gradient(135deg, #5b7cfa, #8f7bff);
  box-shadow: 0 14px 30px -10px rgba(91, 124, 250, .65);
}
.tour-welcome h2 { font-size: 22px; font-weight: 800; margin: 0 0 10px; line-height: 1.25; color: #fff; }
.tour-welcome p { font-size: 15px; line-height: 1.62; color: #c7cde0; margin: 0 0 22px; }
.tour-welcome-actions { display: flex; flex-direction: column; gap: 9px; }
.tour-welcome-actions .tour-btn { width: 100%; padding: 14px 18px; min-height: 48px; font-size: 15px; }

/* --- phones: the card docks to an edge instead of trying to sit beside a
   highlighted element, which never fits next to anything on a 320px screen --- */
@media (max-width: 640px) {
  /* Geometry (left/top/width) is set from JS in placeBubble() -- see the
     comment there. Fighting over !important here is what collapsed the card
     to a sliver off-screen at 240-360px. This block now only handles how the
     card LOOKS at phone size. */
  .tour-bubble { padding: 17px 16px 14px; }
  .tour-bubble .tour-arrow { display: none; }
  .tour-title { font-size: 16.5px; }
  .tour-text { font-size: 14px; }
  .tour-actions { flex-wrap: wrap; }
  .tour-btn { flex: 1 1 auto; }
  .tour-welcome { padding: 26px 20px 22px; border-radius: 18px; }
  .tour-welcome h2 { font-size: 20px; }
  .tour-welcome p { font-size: 14.5px; }
}

/* ---- "waiting for you" state ----
   On a hold step the visitor has to actually do something (type the Telegram
   code, name their company, fill the agent's instructions). The card must stop
   competing with the form for attention but stay readable -- they still need
   to see WHAT to type. So: dimming off, ring quiet, card smaller and parked in
   a corner rather than hidden. It must never swallow clicks meant for the form
   underneath, hence pointer-events on the card itself but not the wrapper. */
.tour-ring.tour-ring-soft {
  border-color: rgba(108, 140, 255, .5);
  box-shadow: 0 0 0 3px rgba(108, 140, 255, .1);
}
.tour-ring.tour-ring-soft::after { animation: none; opacity: 0; }

.tour-bubble.tour-bubble-min {
  width: min(320px, calc(100vw - 24px));
  padding: 14px 15px 12px;
  opacity: .97;
  box-shadow: 0 18px 44px -16px rgba(0,0,0,.6);
}
.tour-bubble.tour-bubble-min .tour-progress { margin: 11px 0 9px; }
.tour-bubble.tour-bubble-min .tour-title { font-size: 15.5px; }
.tour-bubble.tour-bubble-min .tour-text { font-size: 13.5px; }
/* the waiting card explains and waits -- Next would be a lie, the visitor's
   own action is what moves the tour on */
.tour-bubble.tour-bubble-min [data-act="next"] { display: none; }
.tour-bubble.tour-bubble-min .tour-waiting { display: flex; }

/* animated "waiting for you" indicator, so it's obvious the tour is alive
   and deliberately paused rather than stuck */
.tour-waiting {
  display: none; align-items: center; gap: 7px;
  font-size: 12.5px; color: #9fd3b0; font-weight: 600;
}
.tour-waiting i {
  width: 7px; height: 7px; border-radius: 50%; background: #4cae72;
  animation: tour-wait 1.4s ease-in-out infinite;
}
@keyframes tour-wait {
  0%, 100% { opacity: .35; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) { .tour-waiting i { animation: none; opacity: 1; } }

/* ---- "take the tour" floating button ----
   Shown only once the tour is finished or skipped. Sits above the call FAB's
   corner but on the LEFT, so the two never overlap on a phone, and above the
   bottom tab bar so it can't be hidden behind it. */
.tour-restart-fab {
  position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 79;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12);
  background: #171b2c; color: #e8ecf8;
  font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.6);
  transition: transform .2s cubic-bezier(.33,1,.68,1), background .2s ease;
  animation: tour-fab-in .35s cubic-bezier(.33,1,.68,1) both;
}
.tour-restart-fab:hover { background: #1e2338; transform: translateY(-2px); }
@keyframes tour-fab-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tour-restart-fab { animation: none; } }

@media (max-width: 900px) {
  /* clear the bottom tab bar inside the app */
  .tour-restart-fab { bottom: calc(var(--tabbar-h, 60px) + 14px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 380px) {
  /* on the narrowest phones the label would crowd the tab bar -- icon only */
  .tour-restart-fab span { display: none; }
  .tour-restart-fab { padding: 12px; }
}

/* ---- page swap while the language changes ----
   Switching language reloads the page so the WHOLE site changes, not just the
   tour card. A bare reload reads as a jolt, so the current screen fades out
   first and the new one arrives already faded in. Scoped to <html> so it
   covers the landing page and the dashboard identically. */
html.tour-page-swap body { opacity: 0; transition: opacity .2s ease; }
@media (prefers-reduced-motion: reduce) {
  html.tour-page-swap body { opacity: 1; transition: none; }
}


/* Exit + nudge for the welcome card. The card had an entrance animation but
   no exit, so pressing a button made it vanish in a single frame -- the
   "слишком резко" complaint. The nudge fires when the dark area around the
   card is clicked, to point back at the two real buttons instead of treating
   a stray tap as a decision. */
.tour-welcome-out { animation: tour-fade-out .2s ease both; }
.tour-welcome-out .tour-welcome { animation: tour-pop-out .2s ease both; }
@keyframes tour-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes tour-pop-out {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to   { opacity: 0; transform: scale(.96) translateY(8px); }
}
.tour-nudge { animation: tour-nudge .32s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes tour-nudge {
  10%, 90% { transform: translateX(-2px); }
  30%, 70% { transform: translateX(4px); }
  50%      { transform: translateX(-4px); }
  100%     { transform: translateX(0); }
}


/* ============================================================
   LIGHT PAGES
   ============================================================
   The tour deliberately uses literal colours rather than the app's CSS
   variables (using them once rendered white text on a white card). The cost of
   that is this second palette: without it the tour stayed dark-on-dark while
   the page behind it turned white, which is exactly the "если белые фон то там
   и тут должно поменяться" report.

   The switch is the .tour-light class that tour.js puts on <html> after
   measuring the body's actual background — see pageIsLight(). One class, both
   halves of the product, no dependence on which default a given page uses.
   ============================================================ */
:root.tour-light .tour-bubble,
:root.tour-light .tour-welcome {
  background: #ffffff;
  color: #171a26;
  border-color: rgba(16, 20, 40, .10);
  box-shadow: 0 26px 64px -18px rgba(20, 26, 60, .28);
}
:root.tour-light .tour-arrow { background: #ffffff; border-color: rgba(16, 20, 40, .10); }
:root.tour-light .tour-title,
:root.tour-light .tour-welcome h2 { color: #12152b; }
:root.tour-light .tour-text,
:root.tour-light .tour-welcome p { color: #545b73; }
:root.tour-light .tour-step-count { color: #7a8199; }
:root.tour-light .tour-hint {
  color: #1c6b3f; background: rgba(35, 150, 85, .10); border-left-color: #2f9d63;
}
:root.tour-light .tour-progress { background: rgba(16, 20, 40, .10); }
:root.tour-light .tour-btn-ghost { background: rgba(16, 20, 40, .06); color: #3d4459; }
:root.tour-light .tour-btn-ghost:hover { background: rgba(16, 20, 40, .11); }
:root.tour-light .tour-skip { color: #7a8199; }
:root.tour-light .tour-skip:hover { color: #171a26; }

/* the dimming layer stays dark on both themes -- that is what makes the
   highlighted element read as "lit up" rather than merely outlined */
:root.tour-light .tour-welcome-backdrop { background: rgba(24, 28, 48, .55); }

:root.tour-light .tour-lang-switch { background: rgba(16, 20, 40, .06); }
:root.tour-light .tour-lang-btn { color: #666d85; }
:root.tour-light .tour-lang-btn:hover { color: #171a26; }
:root.tour-light .tour-theme-btn {
  background: rgba(16, 20, 40, .05); border-color: rgba(16, 20, 40, .10); color: #565d75;
}
:root.tour-light .tour-theme-btn:hover { background: rgba(16, 20, 40, .10); color: #171a26; }

:root.tour-light .tour-restart-fab {
  background: #ffffff; color: #2b3145; border-color: rgba(16, 20, 40, .12);
  box-shadow: 0 12px 30px -10px rgba(20, 26, 60, .3);
}
:root.tour-light .tour-restart-fab:hover { background: #f2f4fa; }

/* soft cross-fade when only the words change (language switch on the landing,
   which does not reload) */
.tour-welcome h2, .tour-welcome p, .tour-welcome .tour-btn { transition: opacity .15s ease; }
.tour-welcome.tour-text-swap h2,
.tour-welcome.tour-text-swap p,
.tour-welcome.tour-text-swap .tour-btn { opacity: 0; }