/**
 * css/hand-tracking/ht-camera-widget.css
 *
 * PURPOSE: Chrome (container, header, drag, show/hide) for the standalone
 *          floating camera widget. The preview content itself (video,
 *          canvas, badge, placeholder) is styled by ht-overlay.css and
 *          shared unchanged — this file only wraps it in its own
 *          draggable card, separate from the Hand Tracking control panel.
 *          Shown/hidden by #camToggleBtn in the exam tool dock (see
 *          html-templates/exam/tool-dock.html) via [data-visible].
 */

/* ── Root container ─────────────────────────────────────────────────────── */
/* Anchored top-left, deliberately apart from the Hand Tracking panel's
   own bottom-right corner (ht-panel.css) — that panel can grow tall
   enough to reach the top of the viewport on its own, so sharing a
   corner with it would make the two widgets overlap by default. Both
   are draggable, and ht-camera-widget.js re-clamps on resize, so this is
   just a non-colliding starting point, not a hard guarantee. */
#ht-cam-widget {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 9001;

  width: 240px;

  background: var(--surface, #1a1f2e);
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 16px;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.4),
    0 2px 8px  rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.06);

  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 13px;
  color: var(--text, #e8eaf0);
  user-select: none;

  /* Hidden by default (see [data-visible="false"] below) — the widget only
     ever animates between those two states, so there's no separate
     first-mount "entering" transition to coordinate. */
  transition: opacity 0.22s cubic-bezier(0.4,0,0.2,1),
              transform 0.22s cubic-bezier(0.4,0,0.2,1),
              visibility 0s linear 0.22s;
  will-change: transform, opacity;
}

#ht-cam-widget[data-visible="false"] {
  opacity: 0;
  transform: scale(0.92) translateY(-10px);
  visibility: hidden;
  pointer-events: none;
}

#ht-cam-widget[data-visible="true"] {
  opacity: 1;
  transform: scale(1) translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.22s cubic-bezier(0.4,0,0.2,1),
              transform 0.22s cubic-bezier(0.4,0,0.2,1),
              visibility 0s linear 0s;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.ht-cam-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  cursor: grab;
}

.ht-cam-header:active { cursor: grabbing; }

.ht-cam-header-icon {
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
}

.ht-cam-title {
  flex: 1;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.01em;
}

.ht-cam-header-controls {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Power icon is an inline SVG (not an emoji character) — U+23FB has poor
   font coverage and rendered as a tofu box on some platforms. */
#ht-cam-toggle-btn svg {
  width: 14px;
  height: 14px;
}

/* Tint like the other icon buttons' [data-active="true"], plus a warmer
   accent so "camera is actually running" reads distinctly at a glance
   from the merely-toggled-on skeleton overlay button next to it. */
#ht-cam-toggle-btn[data-active="true"] {
  background: rgba(154,230,180,0.18);
  border-color: rgba(154,230,180,0.45);
  color: #9ae6b4;
}

/* ── Body ─────────────────────────────────────────────────────────────── */
.ht-cam-body {
  padding: 10px;
}

/* ── Mobile ────────────────────────────────────────────────────────────────
   Same reasoning as ht-panel.css's mobile block: a width that fits a
   portrait viewport and an inset that clears the safe area. */
@media (max-width: 640px), (pointer: coarse) {
  #ht-cam-widget {
    width: min(220px, calc(100vw - 24px));
    left: max(12px, env(safe-area-inset-left));
    top: max(12px, env(safe-area-inset-top));
  }

  .ht-cam-header-controls .ht-icon-btn {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
}