/* ===== Design tokens ===== */
:root {
  --overlay-bg: rgba(10, 15, 20, 0.65);
  --panel-bg: #ffffff;
  --panel-text: #0f172a;
  --muted: #64748b;
  --accent: #2563eb;
  --accent-2: #0ea5e9;
  --danger: #ef4444;
  --ok: #10b981;
  --ring: rgba(37, 99, 235, 0.3);
  --shadow: 0 20px 45px rgba(0,0,0,0.25), 0 8px 16px rgba(0,0,0,0.12);
  --radius: 16px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans";
}

@media (prefers-color-scheme: dark) {
  :root {
    --overlay-bg: rgba(0,0,0,.7);
    --panel-bg: #0b1220;
    --panel-text: #e5e7eb;
    --muted: #9aa4b2;
    --accent: #60a5fa;
    --accent-2: #38bdf8;
    --ring: rgba(96,165,250,.35);
    --shadow: 0 20px 45px rgba(0,0,0,.6), 0 8px 16px rgba(0,0,0,.45);
  }
}

/* ===== Overlays ===== */
.chrome-idle-overlay,
.chrome-lock-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--overlay-bg);
  display: none;            /* toggled by .is-active */
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(4px);
}
.chrome-idle-overlay.is-active,
.chrome-lock-overlay.is-active { display: flex; }

/* ===== Panels ===== */
.chrome-idle-box {
  width: min(320px, 92vw);
  background: var(--panel-bg);
  color: var(--panel-text);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(20px, 4vw, 28px);
  border: 1px solid rgba(148, 163, 184, 0.15);
  animation: panelIn 240ms cubic-bezier(.2,.8,.2,1);
  font-family: var(--font);
}

.chrome-lock-box {
  width: min(520px, 92vw);
  background: var(--panel-bg);
  color: var(--panel-text);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(20px, 4vw, 28px);
  border: 1px solid rgba(148, 163, 184, 0.15);
  animation: panelIn 240ms cubic-bezier(.2,.8,.2,1);
  font-family: var(--font);
}
@keyframes panelIn {
  from { transform: translateY(8px) scale(.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* ===== Idle text ===== */
.chrome-idle-title { font-size: clamp(18px, 2.2vw, 22px); font-weight: 700; }
.chrome-idle-sub { margin-top: 6px; color: var(--muted); font-size: 14px; }
.chrome-idle-secs {
  margin-top: 14px;
  font-size: clamp(44px, 9vw, 72px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ===== Lock headings & text ===== */
.chrome-lock-h { margin: 0 0 8px 0; font-size: clamp(18px, 2.2vw, 22px); font-weight: 800; }
.chrome-lock-p { margin: 0 0 16px 0; color: var(--muted); font-size: 14px; }

/* ===== Range (Swipe) ===== */
.chrome-lock-lab { display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }


.chrome-lock-range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:18px; border-radius:999px; outline:none;
  background:
    linear-gradient(90deg,
      var(--progress-color, #22c55e) 0 var(--progress, 0%),
      rgba(148,163,184,.25) var(--progress, 0%)
    );
  border:1px solid rgba(148,163,184,.25);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
  transition: background .1s linear;
}
.chrome-lock-range:focus-visible{
  box-shadow:1 1 1 4px var(--progress-ring, rgba(34,197,94,.35));
}
.chrome-lock-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle at 35% 35%, #FFF 0 35%, #f1f5f9 36% 100%);
  border:2px solid var(--progress-color, #22c55e);
  box-shadow:0 4px 14px rgba(0,0,0,.18), 0 0 0 4px var(--progress-ring, rgba(34,197,94,.18));
  cursor:grab;
}
.chrome-lock-range:active::-webkit-slider-thumb{ cursor:grabbing; }
.chrome-lock-range::-moz-range-thumb{
  width:10px; height:10px; border-radius:70%;
  background:#fff;
  border:2px solid var(--progress-color, #22c55e);
  box-shadow:0 4px 14px rgba(0,0,0,.18), 0 0 0 4px var(--progress-ring, rgba(34,197,94,.18));
  cursor:grab;
}

/* WebKit/Chromium track uses the same dynamic vars */
.chrome-lock-range::-webkit-slider-runnable-track{
  height:12px;
  border-radius:999px;
  background:
    linear-gradient(90deg,
      var(--progress-color, #22c55e) 0 var(--progress, 0%),
      rgba(148,163,184,.25) var(--progress, 0%)
    );
  border:1px solid rgba(148,163,184,.25);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
}

/* Firefox: split into track (unfilled) + progress (filled) */
.chrome-lock-range::-moz-range-track{
  height:12px;
  border-radius:999px;
  background: rgba(148,163,184,.25);
  border:1px solid rgba(148,163,184,.25);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
}
.chrome-lock-range::-moz-range-progress{
  height:12px;
  border-radius:999px 0 0 999px;
  background: var(--progress-color, #22c55e);
}

/* Optional: crisper on mobile */
.chrome-lock-range { -webkit-tap-highlight-color: transparent; }

.chrome-lock-hint { margin-top: 6px; font-size: 12px; color: var(--muted); }

/* ===== Form row ===== */
.chrome-lock-row { display:grid; grid-template-columns: 1fr auto; gap:10px; margin-top:16px; }
.chrome-lock-input {
  width:100%; height:42px; border-radius:12px;
  border:1px solid rgba(148,163,184, .35); background:transparent;
  color:var(--panel-text); padding:0 12px; font:500 14px var(--font);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.chrome-lock-input:focus { border-color:var(--accent); box-shadow:0 0 0 6px var(--ring); outline:none; }
.chrome-lock-toggle {
  height:42px; padding:0 12px; border-radius:12px;
  border:1px solid rgba(148,163,184, .35);
  background: linear-gradient(180deg, #fff, #f8fafc);
  color:#0f172a; font:600 13px var(--font); cursor:pointer;
  transition: transform .06s ease, box-shadow .15s ease, border-color .15s ease;
}
.chrome-lock-toggle:enabled:hover { box-shadow:0 6px 16px rgba(0,0,0,.08); }
.chrome-lock-toggle:enabled:active { transform: translateY(1px); }

/* ===== Primary unlock button ===== */
.chrome-lock-btn {
  margin-top:14px; width:100%; height:46px; border:0; border-radius:12px;
  font:700 14px var(--font); letter-spacing:.3px; color:#fff;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 12px 24px rgba(37,99,235,.25); cursor:pointer;
  transition: transform .06s ease, filter .15s ease, box-shadow .15s ease;
}
.chrome-lock-btn:enabled:hover { filter:saturate(1.1); box-shadow: 0 14px 28px rgba(37,99,235,.32); }
.chrome-lock-btn:enabled:active { transform: translateY(1px); }

/* Disabled states */
.chrome-lock-input:disabled,
.chrome-lock-toggle:disabled,
.chrome-lock-btn:disabled { opacity:.6; cursor:not-allowed; filter: grayscale(.1); }

/* Error text */
.chrome-lock-err { margin-top: 10px; min-height:18px; font-size:13px; color: var(--danger); }

/* ===== Horizontal action buttons (conflict dialog) ===== */
.chrome-action-row { display:flex; gap:12px; margin-top:14px; align-items:center; }
.chrome-action-row .action {
  flex:1 1 0; height:44px; border-radius:12px; cursor:pointer;
  font:600 14px var(--font); transition:transform .06s ease, box-shadow .15s ease, filter .15s ease;
}
.chrome-action-row .action.primary {
  border:0; color:#fff; background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow:0 10px 22px rgba(37,99,235,.22);
}
.chrome-action-row .action.primary:hover { filter:saturate(1.05); }
.chrome-action-row .action.ghost {
  border:1px solid rgba(148,163,184,.35); background:transparent; color:var(--panel-text);
}

/* Small screens: stack the two buttons */
@media (max-width: 420px){ .chrome-action-row{ flex-direction:column; } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .chrome-idle-box, .chrome-lock-box { animation: none; }
}