/* PhoneDeck — minimal custom styles on top of Tailwind CDN utilities.
   Tailwind handles layout, spacing, typography, colors.
   This file owns: component-level composites, animations, safe-area,
   and the few rules Tailwind utilities can't express cleanly. */

:root {
  color-scheme: dark;
  --accent: #5b8cff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Segoe UI, Roboto, sans-serif;
}

* { -webkit-tap-highlight-color: transparent; }
html, body { -webkit-user-select: none; user-select: none; overscroll-behavior: none; }
input, textarea { -webkit-user-select: auto; user-select: auto; }
/* Tailwind utilities override the UA [hidden] rule — force the HTML attribute
   to win so `.hidden = true` actually hides the element. */
[hidden] { display: none !important; }

/* Icons: fixed size, transparent to pointer events so the parent button
   always receives the tap (iOS Safari drops synthetic clicks on <use>). */
svg.ic { width: 24px; height: 24px; display: block; flex: 0 0 auto; }
svg.ic, svg.ic * { pointer-events: none; }

/* Only the trackpad needs touch-action:none — body taps must fire clicks. */
#trackpad { touch-action: none; }
button, .cmd, .cmd-danger, .key, .mod { touch-action: manipulation; }

/* py-safe helper for the pair screen */
.py-safe { padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom)); }

/* ===== Command tile — the grid buttons in the control panel ===== */
.cmd {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  min-height: 72px;
  padding: 10px 6px;
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: #e6e8ee;
  font-size: 11px; font-weight: 600;
  transition: transform .1s ease, background .15s ease, border-color .15s ease;
}
.cmd svg.ic { width: 22px; height: 22px; color: #cfd6e4; }
.cmd:active { transform: scale(0.94); background: rgba(91,140,255,0.18); border-color: rgba(91,140,255,0.6); }
.cmd.active {
  background: linear-gradient(180deg, #7aa2ff, var(--accent));
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 6px 20px rgba(91,140,255,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
}
.cmd.active svg.ic { color: #fff; }

.cmd-danger {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(248,113,113,0.12);
  border: 1px solid rgba(248,113,113,0.35);
  color: #fecaca;
  font-size: 14px; font-weight: 700;
  transition: transform .1s ease, background .15s ease;
}
.cmd-danger svg.ic { width: 18px; height: 18px; color: currentColor; }
.cmd-danger:active { transform: scale(0.97); background: rgba(248,113,113,0.22); }

/* ===== Modifier chip ===== */
.mod {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: #cfd6e4;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.mod:has(input:checked) {
  background: rgba(91,140,255,0.22);
  border-color: var(--accent);
  color: #dbe7ff;
}

/* ===== Quick-key buttons in the keyboard sheet ===== */
.key {
  flex: 0 1 auto;
  min-width: 36px; height: 40px; padding: 0 6px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: #e6e8ee;
  font-size: 15px;
  font-family: ui-monospace, Menlo, monospace;
  transition: transform .1s ease, background .15s ease, border-color .15s ease;
}
.key:active { transform: scale(0.92); background: rgba(91,140,255,0.22); border-color: var(--accent); }

/* Keyboard-sheet tabs */
#kbd-tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto;
  height: 32px; padding: 0 14px;
  border-radius: 999px;
  background: transparent;
  color: rgba(255,255,255,0.55);
  font-size: 12px; font-weight: 600;
  border: 1px solid transparent;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.tab.active {
  background: rgba(91,140,255,0.15);
  border-color: rgba(91,140,255,0.4);
  color: #cfe0ff;
}
.tab:active { transform: scale(0.96); }

/* Shortcut chips — the scrollable strip above the quick-keys */
#shortcuts::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  height: 32px; padding: 0 12px;
  border-radius: 999px;
  background: rgba(91,140,255,0.10);
  border: 1px solid rgba(91,140,255,0.30);
  color: #cfe0ff;
  font-size: 12px; font-weight: 600;
  transition: transform .1s ease, background .15s ease, border-color .15s ease;
}
.chip:active { transform: scale(0.94); background: rgba(91,140,255,0.22); border-color: var(--accent); }
.chip.active { background: rgba(91,140,255,0.25); border-color: var(--accent); color: #fff; }

/* Modifier chip — momentary-hold highlight */
.mod.holding {
  background: linear-gradient(180deg, #7aa2ff, var(--accent));
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(91,140,255,0.45), inset 0 1px 0 rgba(255,255,255,0.25);
}

/* Macro + Clipboard list rows */
.row-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #e6e8ee;
  text-align: left;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.row-item:active { transform: scale(0.98); background: rgba(91,140,255,0.12); border-color: rgba(91,140,255,0.45); }
.row-item .row-icon {
  width: 32px; height: 32px; border-radius: 8px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: rgba(91,140,255,0.15); color: #cfe0ff;
  font-size: 14px; font-weight: 700;
  font-family: ui-monospace, Menlo, monospace;
  overflow: hidden;
}
.row-item .row-icon img { width: 100%; height: 100%; object-fit: cover; }
.row-item .row-main { flex: 1; min-width: 0; }
.row-item .row-title { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-item .row-sub   { font-size: 11px; color: rgba(255,255,255,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, Menlo, monospace; }
.row-item.editing { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(91,140,255,0.25); }

/* Macro modal hook */
#macro-modal { animation-duration: .2s; }

/* Compact-by-default keyboard sheet. Everything marked .kbd-pro is
   only visible when the user has unlocked Pro mode. Lite-mode title
   is the mirror image — shown only when Pro is OFF. */
#kbd-sheet:not(.pro) .kbd-pro { display: none !important; }
#kbd-sheet.pro .kbd-lite       { display: none !important; }

/* Inactive F-keys/Macros/Clipboard tabs are ordinary hidden panels;
   in compact (non-pro) mode the whole tab bar vanishes so only Type
   remains, which keeps the sheet small. */
#kbd-sheet:not(.pro) .kpanel[data-panel]:not([data-panel="type"]) { display: none !important; }

/* The Pro toggle gets a glow when enabled. */
#kbd-sheet.pro #kbd-pro {
  background: rgba(91,140,255,0.22);
  border-color: rgba(91,140,255,0.55);
  color: #cfe0ff;
  box-shadow: 0 0 12px rgba(91,140,255,0.5);
}

/* Panel: when open, translate to 0 — overrides translate-y-full utility */
#panel.open { transform: translateY(0); }
#kbd-sheet.open { transform: translateY(0); }
#scrim.open { opacity: 1; pointer-events: auto; }

/* Status handle: connection-phase colored dot */
#stat-dot { box-shadow: 0 0 0 0 rgba(0,0,0,0); transition: background-color .2s ease, box-shadow .2s ease; }
#stat-dot[data-phase="live"]       { background: #4ade80; box-shadow: 0 0 10px rgba(74,222,128,0.7); }
#stat-dot[data-phase="dropped"]    { background: #f87171; box-shadow: 0 0 10px rgba(248,113,113,0.6); }
#stat-dot[data-phase="ws"],
#stat-dot[data-phase="awaiting"],
#stat-dot[data-phase="negotiating"],
#stat-dot[data-phase="ice"]        { background: #fbbf24; box-shadow: 0 0 10px rgba(251,191,36,0.7); animation: statDot 1s ease-in-out infinite; }
@keyframes statDot { 50% { opacity: .35; } }

/* Loupe positioning (JS sets left/top) */
#loupe { transition: opacity .15s ease; }

/* Toast reveal */
#toast.show { opacity: 1; }

/* Pair button loading spinner overlay */
#pair-go.loading .go-label { visibility: hidden; }
#pair-go.loading::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}