/*
 * File: tools/tour-engine/src/tour-engine.css
 * Project: AIGyde Labs platform (tour engine)
 * Developer: Parth Parmar
 * Co-developer: Dharmik Chhatbar
 * Organisation: AIGyde Solutions LLP
 * Purpose: Look of the self-running tour: cursor, ripple, spotlight, caption card, launch button.
 * How it works: plain CSS shipped as a file so pages with a strict Content Security Policy can use
 *   it. Apps theme it through --te-accent; everything sits above the app at z-index 2147483000+.
 */
:root { --te-accent: #0b7a75; --te-ink: #1d1d1f; --te-card: #ffffff; }
@media (prefers-color-scheme: dark) { :root { --te-ink: #ececee; --te-card: #1a1d20; } }

.te-cursor {
  position: fixed; left: 0; top: 0; width: 22px; height: 22px; z-index: 2147483003; pointer-events: none;
  transition-property: transform; transition-timing-function: cubic-bezier(.22, .61, .36, 1);
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 2l7 19 2.5-7.5L20 11z' fill='%23111' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}
.te-ripple {
  position: fixed; z-index: 2147483002; width: 14px; height: 14px; margin: -2px 0 0 -2px; border-radius: 50%;
  border: 3px solid var(--te-accent); pointer-events: none; animation: te-ripple .65s ease-out forwards;
}
@keyframes te-ripple { from { transform: scale(.4); opacity: 1; } to { transform: scale(3.2); opacity: 0; } }

.te-spot {
  position: fixed; z-index: 2147483000; border-radius: 10px; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 9999px rgba(10, 12, 16, .45); transition: all .35s ease;
}
.te-spot-on { opacity: 1; outline: 3px solid var(--te-accent); outline-offset: 0; }

.te-card {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2147483001;
  width: min(640px, calc(100vw - 32px)); padding: 14px 18px 12px; border-radius: 14px;
  background: var(--te-card); color: var(--te-ink); box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.te-card-empty .te-caption { display: none; }
.te-count { font-size: 12px; opacity: .7; letter-spacing: .02em; }
.te-caption { margin: 4px 0 10px; font-size: 17px; font-weight: 600; }
.te-track { height: 4px; border-radius: 4px; background: rgba(127, 127, 127, .25); overflow: hidden; }
.te-bar { height: 100%; width: 0; background: var(--te-accent); transition: width .4s ease; }
.te-controls { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.te-btn {
  font: inherit; font-size: 13px; padding: 5px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(127, 127, 127, .4); background: transparent; color: inherit;
}
.te-btn-primary { background: var(--te-accent); border-color: var(--te-accent); color: #fff; }

.te-launch {
  position: fixed; right: 20px; bottom: 20px; z-index: 2147482999; padding: 10px 16px; border-radius: 999px;
  border: 0; background: var(--te-accent); color: #fff; font: 600 14px/1 system-ui, sans-serif; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.te-launch:focus-visible, .te-btn:focus-visible { outline: 3px solid var(--te-ink); outline-offset: 2px; }
html[data-tour-record] .te-launch { display: none; }

@media (prefers-reduced-motion: reduce) {
  .te-cursor, .te-spot, .te-bar { transition: none; }
  .te-ripple { animation: none; }
}