/* =========================================
   AirDraw Pro — Responsive UI & Layout
   ========================================= */

/* ----- Theme tokens ----- */
:root {
  --bg: #ffffff;
  --panel: #0f1624;
  --panel-2: #0b111d;
  --text: #e8f1f7;
  --muted: #b5c6d6;
  --border: #213046;
  --accent: #66d9ef;

  --ok: rgba(18, 120, 54, .85);
  --err: rgba(170, 45, 45, .85);

  --shadow-lg: 0 12px 40px rgba(0,0,0,.35);
  --blur: saturate(120%) blur(8px);
}

/* ----- Global reset / base ----- */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color: #0d1723;
  -webkit-tap-highlight-color: transparent;
}
body { overflow: hidden; }

/* Prevent pull-to-refresh / pinch-zoom interfering with drawing (user still can zoom page via controls) */
#paint { touch-action: none; }

/* ----- Layer stack ----- */
#video, #paint, #overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#video {
  object-fit: cover;
  opacity: .35;               /* user can toggle with button */
  transition: opacity .2s ease, transform .2s ease;
  z-index: 1;
}
#paint { z-index: 2; }        /* drawing layer */
#overlay {
  z-index: 3;                 /* landmarks / guides layer */
  pointer-events: none;
}

/* Cursor dot that follows fingertip */
.cursor {
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 999px;
  border: 2px solid #cfe9ffcc;
  background: #66d9ef33;
  transform: translate(-50%,-50%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 4;
}

/* ----- Status / toast bar ----- */
.status-bar {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: rgba(0,0,0,.6);
  color: #fff;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  transition: opacity .25s ease;
}

/* ----- Tap-to-start overlay (iOS autoplay fix) ----- */
.tap-start {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(5, 10, 18, .55);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: var(--blur);
}
.tap-start .card {
  width: min(92vw, 440px);
  border-radius: 16px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  color: var(--text);
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.tap-start h2 { margin: 0 0 8px; font-size: 20px; }
.tap-start p { margin: 0 0 14px; color: #c9d7e5; font-size: 14px; }
.tap-start .small { margin-top: 8px; color: var(--muted); font-size: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #122036;
  color: #eaf6ff;
  font-weight: 600;
  cursor: pointer;
}
.btn:hover { background: #172847; }
.btn.secondary { background: #0e1a2d; }

/* ----- Toolbar (icon-only) ----- */
.toolbar {
  position: fixed;
  z-index: 1000;
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(10, 16, 26, .64);
  color: #f3fbff;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
  backdrop-filter: var(--blur);
  transition: opacity .3s ease, transform .2s ease;
}

/* Desktop: top-right vertical */
@media (min-width: 769px) {
  .toolbar {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    flex-direction: column;
    overflow: visible;
  }
}

/* Mobile: bottom-center horizontal w/ scroll */
@media (max-width: 768px) {
  .toolbar {
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: calc(100vw - 24px);
  }
  .toolbar::-webkit-scrollbar { display: none; }
  .toolbar.hidden { opacity: 0; pointer-events: none; }
}

/* Toolbar buttons */
.toolbar .tool {
  flex: 0 0 auto;
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
  outline: none;
  user-select: none;
}
.toolbar .tool:hover   { background: rgba(255,255,255,.12); }
.toolbar .tool:active  { transform: scale(.94); }
.toolbar .tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ----- Popups (size, settings, help) ----- */
.popup {
  position: fixed;
  z-index: 1000;
  min-width: 280px;
  max-width: calc(100vw - 24px);
  border-radius: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  color: var(--text);
  padding: 12px;
  box-shadow: var(--shadow-lg);
}

/* Desktop positioning (right column under toolbar) */
@media (min-width: 769px) {
  .popup { top: 70px; right: max(12px, env(safe-area-inset-right)); }
}

/* Mobile positioning (above toolbar) */
@media (max-width: 768px) {
  .popup {
    left: 50%;
    bottom: calc(70px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
  }
}

.popup h3 {
  margin: 6px 0 10px;
  font-size: 15px;
  letter-spacing: .2px;
}
.popup .row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 8px 0;
}
.popup .row.end { justify-content: flex-end; }
.popup input[type="range"] { width: 160px; }
.popup select {
  background: #0f1a2c; color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 8px;
}
.popup ul { margin: 0 0 10px 18px; padding: 0; }
.popup li { margin: 6px 0; color: #d2deea; font-size: 13px; }

/* ----- Utility ----- */
.hidden { display: none !important; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ----- Touch-friendly sizes ----- */
@media (pointer: coarse) {
  .toolbar .tool { font-size: 22px; padding: 10px; }
}

/* ----- Focus ring color for accessibility ----- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}