/* touchless-kit: cursor + drop-in widget styles. All classes are prefixed with tk- to avoid clashes. */
:root {
  --tk-accent: #0f9d8a;
  --tk-accent-ink: #ffffff;
  --tk-danger: #d93a4a;
  --tk-warn: #c98a00;
  --tk-bg: #ffffff;
  --tk-fg: #1b1f24;
  --tk-muted: #5c6670;
  --tk-border: #dde2e7;
  --tk-shadow: 0 10px 30px rgba(15, 25, 35, 0.18);
  --tk-font: system-ui, -apple-system, "Segoe UI", Tahoma, "Vazirmatn", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tk-bg: #1a1f25; --tk-fg: #e9edf1; --tk-muted: #9aa5b0; --tk-border: #2e3640;
    --tk-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  --tk-bg: #1a1f25; --tk-fg: #e9edf1; --tk-muted: #9aa5b0; --tk-border: #2e3640;
  --tk-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* ---------- virtual cursor ---------- */
.tk-cursor {
  position: fixed; left: 0; top: 0; z-index: 2147483646;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; pointer-events: none;
  border: 3px solid var(--tk-accent); background: rgba(15, 157, 138, 0.18);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 2px 10px rgba(0, 0, 0, 0.3);
  transition: width 0.12s, height 0.12s, margin 0.12s, background 0.12s, border-color 0.12s;
  will-change: transform;
}
.tk-cursor[hidden] { display: none; }
.tk-cursor.tk-pinch, .tk-cursor.tk-click { width: 22px; height: 22px; margin: -11px 0 0 -11px; background: var(--tk-accent); }
.tk-cursor.tk-pen { width: 14px; height: 14px; margin: -7px 0 0 -7px; border-color: #ff3b6b; background: #ff3b6b; }
.tk-cursor.tk-paused { border-color: #8a939c; border-style: dashed; background: rgba(138, 147, 156, 0.15); }
.tk-cursor-dwell {
  position: absolute; inset: -7px; border-radius: 50%;
  background: conic-gradient(var(--tk-accent) calc(var(--tk-dwell, 0) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%); mask: radial-gradient(circle, transparent 58%, #000 60%);
}
.tk-hover { outline: 3px solid var(--tk-accent) !important; outline-offset: 3px; transition: outline-color 0.1s; }

/* ---------- drop-in widget ---------- */
.tk-widget {
  position: fixed; z-index: 2147483645; inset-block-end: 16px; inset-inline-start: 16px;
  font: 14px/1.5 var(--tk-font); color: var(--tk-fg);
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  max-width: calc(100vw - 32px);
}
.tk-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: var(--tk-bg); border: 1px solid var(--tk-border); border-radius: 999px;
  padding: 6px; box-shadow: var(--tk-shadow);
}
.tk-btn {
  font: inherit; border: 1px solid var(--tk-border); background: transparent; color: inherit;
  border-radius: 999px; padding: 6px 12px; cursor: pointer; min-height: 36px;
}
.tk-btn:hover { border-color: var(--tk-accent); }
.tk-btn:focus-visible { outline: 3px solid var(--tk-accent); outline-offset: 2px; }
.tk-btn-primary { background: var(--tk-accent); color: var(--tk-accent-ink); border-color: var(--tk-accent); font-weight: 600; }
.tk-btn-danger { color: var(--tk-danger); border-color: currentColor; }
.tk-status { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; color: var(--tk-muted); white-space: nowrap; }
.tk-dot { width: 10px; height: 10px; border-radius: 50%; background: #9aa5b0; flex: none; }
.tk-dot[data-s="hand"] { background: #1db954; box-shadow: 0 0 0 4px rgba(29, 185, 84, 0.2); }
.tk-dot[data-s="nohand"] { background: var(--tk-warn); }
.tk-dot[data-s="paused"] { background: #8a939c; }
.tk-dot[data-s="loading"] { background: var(--tk-accent); animation: tk-pulse 1s infinite; }
.tk-dot[data-s="error"] { background: var(--tk-danger); }
@keyframes tk-pulse { 50% { opacity: 0.3; } }
.tk-gesture { font-weight: 600; min-width: 5ch; }
.tk-panel {
  background: var(--tk-bg); border: 1px solid var(--tk-border); border-radius: 14px;
  box-shadow: var(--tk-shadow); padding: 12px 14px; width: min(340px, calc(100vw - 32px));
}
.tk-panel[hidden] { display: none; }
.tk-panel h3 { margin: 0 0 8px; font-size: 15px; }
.tk-panel label { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 8px 0; }
.tk-panel input[type="range"] { width: 55%; accent-color: var(--tk-accent); }
.tk-panel ul { margin: 0; padding-inline-start: 18px; }
.tk-panel li { margin: 4px 0; }
.tk-preview { width: 200px; max-width: 45vw; border-radius: 12px; border: 1px solid var(--tk-border); box-shadow: var(--tk-shadow); background: #000; display: block; }
.tk-preview[hidden] { display: none; }
.tk-toast {
  background: var(--tk-bg); border: 1px solid var(--tk-border); border-inline-start: 4px solid var(--tk-warn);
  border-radius: 10px; padding: 8px 12px; box-shadow: var(--tk-shadow); width: min(340px, calc(100vw - 32px));
}
.tk-toast[data-kind="error"] { border-inline-start-color: var(--tk-danger); }
.tk-toast[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .tk-cursor { transition: none; } .tk-dot { animation: none !important; } }