/* Centered modal walkthrough, styled to match the sub-app install
   card in `standalone.py`. Single visible card at a time; the
   internal state machine swaps content but reuses the shell so
   transitions feel smooth.

   The card never grows tall enough to crowd a mobile viewport — body
   text is bounded; a phone in portrait still leaves the chat input
   visible behind the card so the user knows where they're headed. */

.wt__overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: wt-fade-in 0.18s ease both;
}

.wt__overlay--closing {
  animation: wt-fade-out 0.16s ease both;
}

@keyframes wt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes wt-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.wt__card {
  width: 100%;
  max-width: 420px;
  max-height: calc(100% - 32px);
  overflow-y: auto;
  background: var(--surface, #14181f);
  color: var(--text, #d4d4d8);
  border: 1px solid var(--border, #252b36);
  border-radius: 20px;
  padding: 26px 24px 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  animation: wt-scale-in 0.22s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes wt-scale-in {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.wt__steps {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 18px;
}

.wt__step-dot {
  width: 24px;
  height: 4px;
  border-radius: 2px;
  background: var(--surface2, #1a1f28);
  transition: background 0.18s ease;
}

.wt__step-dot--active {
  background: var(--accent, #a78bfa);
}

.wt__step-dot--done {
  background: var(--accent, #a78bfa);
  opacity: 0.55;
}

.wt__title {
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 12px;
  line-height: 1.3;
}

.wt__body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text, #d4d4d8);
  margin: 0;
}

.wt__arrow {
  font-size: 28px;
  text-align: center;
  margin: 16px 0 0;
  color: var(--accent, #a78bfa);
  animation: wt-arrow-bounce 1.6s ease-in-out infinite;
}

/* Up-arrow placed at top-of-card (before the title) — wants negative
   margin so it visually points past the card edge toward the browser
   chrome above, not just into the card's whitespace. */
.wt__arrow--top {
  margin: -8px 0 4px;
}

.wt__arrow--up {
  animation-name: wt-arrow-bounce-up;
}
.wt__arrow--down {
  animation-name: wt-arrow-bounce-down;
}

@keyframes wt-arrow-bounce-up {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes wt-arrow-bounce-down {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

.wt__note {
  font-size: 13px;
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border, #252b36);
}

.wt__note--success {
  background: rgba(167, 139, 250, 0.12);
  border-color: rgba(167, 139, 250, 0.4);
  color: var(--text, #d4d4d8);
}

.wt__note--warn {
  background: var(--surface2, #1a1f28);
  color: var(--muted, #9ca3af);
}

.wt__link {
  color: var(--accent, #a78bfa);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wt__link:hover {
  color: var(--accent-hover, #c4b5fd);
}

.wt__actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

.wt__btn {
  flex: 1;
  padding: 12px 16px;
  border-radius: 12px;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.wt__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.wt__btn--primary {
  background: var(--accent, #a78bfa);
  color: #0c0f14;
}

.wt__btn--primary:hover {
  background: var(--accent-hover, #c4b5fd);
}

.wt__btn--ghost {
  background: transparent;
  color: var(--muted, #9ca3af);
  border: 1px solid var(--border, #252b36);
}

.wt__btn--single {
  flex: 0 1 auto;
  margin: 0 auto;
  padding: 12px 28px;
}

/* Quiet text affordance under the install step's action row. Lower
   visual weight than the buttons — it's the escape hatch for a user
   who already installed and just wants the overlay gone, not the
   primary path. */
.wt__skip-link {
  display: block;
  margin: 14px auto 0;
  padding: 4px 8px;
  background: transparent;
  border: none;
  color: var(--muted, #9ca3af);
  font-family: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.wt__skip-link:hover {
  color: var(--text, #d4d4d8);
}
