/*
 * Apple-style interface layer (after emilkowalski/skills → apple-design).
 *
 * What it applies from the skill:
 *  - response: feedback on pointer-DOWN (:active), not on release
 *  - springs: critically damped (no overshoot) for UI, slight bounce only for the toggle thumb
 *  - only transform / opacity animate (colors cross-fade, no layout properties)
 *  - materials: translucent backdrop-filter layers; hierarchy by blur/opacity
 *  - typography: tracking tightens with size
 *  - reduced-motion / reduced-transparency / increased-contrast fall back to plain surfaces
 *
 * Loaded before the Tailwind CDN styles, so overrides use `body` prefixes for specificity.
 */

:root {
  --ease-spring: linear(0, 0.2 6%, 0.52 14%, 0.75 22%, 0.9 31%, 0.97 41%, 0.995 52%, 1);   /* damping 1.0 */
  --ease-bounce: linear(0, 0.4 8%, 0.85 17%, 1.06 27%, 1.08 33%, 1.02 46%, 0.995 60%, 1);  /* ~0.8, toggles only */
  --dur-press: 120ms;
  --dur-move: 380ms;
  --mat-thin:    rgba(16, 17, 20, .62);
  --mat-regular: rgba(22, 23, 28, .72);
  --mat-blur:    saturate(1.6) blur(22px);
  --hairline:    rgba(255, 255, 255, .08);
  --accent:      #fc7c20;
}

/* ── Typography: tighten large, keep body at 0 ─────────────────────────────── */
body { font-family: -apple-system, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
       -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body h1, body h2 { letter-spacing: -0.022em; line-height: 1.15; }
body h3 { letter-spacing: -0.012em; }
body .text-xs.uppercase { letter-spacing: 0.06em; }

/* ── Materials ─────────────────────────────────────────────────────────────── */
body > header.bg-panel-card,
body nav.bg-panel-card {
  background: var(--mat-thin);
  -webkit-backdrop-filter: var(--mat-blur);
  backdrop-filter: var(--mat-blur);
  border-color: var(--hairline);
}
body aside.bg-panel-card, body #consolePanel { background: var(--mat-thin); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur); }
body .bg-panel-card.rounded-xl, body .bg-panel-card2.rounded-xl {
  background: var(--mat-regular);
  border-color: var(--hairline);
  border-radius: 1rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px -12px rgba(0,0,0,.6);
}

/* ── Press feedback on pointer-down, spring on release ─────────────────────── */
body button, body .tab-btn, body .btn-primary, body .btn-outline, body .btn-send, body .btn-danger, body .card-head {
  transition: transform var(--dur-move) var(--ease-spring), background-color .2s, border-color .2s, color .2s, opacity .2s;
  -webkit-tap-highlight-color: transparent;
}
body button:not(:disabled):active, body .btn-primary:not(:disabled):active,
body .btn-outline:not(:disabled):active, body .btn-send:not(:disabled):active,
body .btn-danger:not(:disabled):active {
  transform: scale(.965);
  transition-duration: var(--dur-press);
}
body .card-head:active { transform: scale(.995); transition-duration: var(--dur-press); }
body .btn-primary, body .btn-outline, body .btn-send, body .btn-danger { border-radius: .75rem; }

/* ── Inputs ────────────────────────────────────────────────────────────────── */
body input[type=text], body input[type=number], body input[type=search], body input[type=password],
body select, body textarea {
  border-radius: .75rem;
  transition: border-color .2s, box-shadow .25s var(--ease-spring);
}
body input:focus, body select:focus, body textarea:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(252, 124, 32, .18);
}

/* ── Tab content & chevrons: spatially consistent motion ───────────────────── */
body .tab-content:not(.hidden) { animation: fq-rise var(--dur-move) var(--ease-spring) both; }
@keyframes fq-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
body .chevron { transition: transform var(--dur-move) var(--ease-spring); }
body .tab-btn { border-bottom-width: 2px; }

/* ═══════════════════════ Cleaner: plan "clouds" ═══════════════════════════ */
.cl-channel {
  background: var(--mat-regular);
  -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  border: 1px solid var(--hairline);
  border-radius: 1.25rem;
  overflow: hidden;
}
.cl-channel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .875rem 1.25rem; }
.cl-channel-name { font-weight: 600; letter-spacing: -0.012em; color: #e2e8f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cl-channel[data-on="0"] > .cl-grid { opacity: .6; transition: opacity .25s; }
.cl-channel[data-on="0"] > .cl-grid:hover { opacity: 1; }
.cl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .75rem; padding: 1rem 1.25rem 1.25rem; }
.cl-wide { grid-column: 1 / -1; }

.cl-cloud {
  --tone: var(--accent);
  position: relative;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--hairline);
  border-radius: 1.25rem;
  padding: .875rem 1rem;
  display: flex; flex-direction: column; gap: .75rem;
  transition: background-color .3s, border-color .3s, transform var(--dur-move) var(--ease-spring);
}
.cl-cloud.cl-warn   { --tone: #fbbf24; }
.cl-cloud.cl-danger { --tone: #f87171; }
.cl-cloud[data-on="1"] {
  background: color-mix(in srgb, var(--tone) 9%, transparent);
  border-color: color-mix(in srgb, var(--tone) 38%, transparent);
}
.cl-cloud[data-on="0"] .cl-cloud-body { opacity: .45; }
.cl-cloud-body { display: flex; flex-direction: column; gap: .625rem; transition: opacity .25s; }
.cl-cloud-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; cursor: pointer; }
.cl-cloud-title { display: block; font-size: .9375rem; font-weight: 600; letter-spacing: -0.01em; color: #f1f5f9; }
.cl-cloud-hint  { display: block; font-size: .75rem; color: #64748b; margin-top: .125rem; }
.cl-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-size: .8125rem; color: #94a3b8; }

.cl-input {
  background: rgba(0, 0, 0, .35); border: 1px solid var(--hairline); color: #fff;
  padding: .375rem .625rem; font-size: .8125rem; border-radius: .75rem;
}
.cl-input:focus { border-color: var(--accent); }
.cl-input::placeholder { color: #475569; }
.cl-btn {
  background: rgba(255,255,255,.08); color: #e2e8f0; font-size: .75rem; font-weight: 600;
  padding: .375rem .875rem; border-radius: .75rem;
}
.cl-btn:hover { background: rgba(255,255,255,.14); }

.cl-pill { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; color: #94a3b8; cursor: pointer; user-select: none; }

.cl-run {
  background: var(--accent); color: #08090c; font-size: .8125rem; font-weight: 600;
  padding: .5rem 1.125rem; border-radius: 9999px; white-space: nowrap;
}
.cl-run:hover { background: #ff8c3a; }
.cl-run.is-stop { background: rgba(248, 113, 113, .18); color: #fca5a5; }
.cl-run.is-stop:hover { background: rgba(248, 113, 113, .3); }
.cl-run.is-save { background: rgba(255,255,255,.1); color: #e2e8f0; }
.cl-run.is-save:hover { background: rgba(255,255,255,.18); }

/* iOS-style switch; the thumb is the only element with a little bounce */
.cl-switch {
  appearance: none; -webkit-appearance: none; flex-shrink: 0;
  position: relative; width: 2.5rem; height: 1.5rem; border-radius: 9999px;
  background: rgba(255,255,255,.16); cursor: pointer;
  transition: background-color .25s;
}
.cl-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: calc(1.5rem - 4px); height: calc(1.5rem - 4px);
  border-radius: 9999px; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.35);
  transition: transform .45s var(--ease-bounce), width .2s;
}
.cl-switch:checked { background: var(--tone, var(--accent)); }
.cl-cloud.cl-warn   .cl-switch:checked { background: #f59e0b; }
.cl-cloud.cl-danger .cl-switch:checked { background: #ef4444; }
.cl-switch:checked::after { transform: translateX(1rem); }
.cl-switch:active::after { width: calc(1.5rem + 2px); }
.cl-switch:checked:active::after { transform: translateX(calc(1rem - 2px)); }
.cl-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ═══════════════════════ Whole-panel polish (all tabs + login) ═════════════ */
/* Surfaces: every card/panel gets the same continuous-corner material */
body .bg-panel-card.rounded-2xl { background: var(--mat-regular); border-color: var(--hairline); border-radius: 1.5rem;
  -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 48px -24px rgba(0,0,0,.7); }
body .rounded-lg { border-radius: .75rem; }
body .rounded-md { border-radius: .625rem; }

/* Modals: dimmed + blurred backdrop, sheet rises in with the spring */
body .fixed.inset-0[class*="bg-black"] { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background: rgba(0,0,0,.45); }
body .fixed.inset-0:not(.hidden) > div { animation: fq-sheet var(--dur-move) var(--ease-spring) both; }
@keyframes fq-sheet { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* Tab bars: underline tabs become quiet pills; sub-tabs match */
body nav .tab-btn { border-bottom-width: 0; border-radius: 9999px; margin: .375rem .0625rem; }
body nav .tab-btn:hover { background: rgba(255,255,255,.06); }
body nav .tab-btn.active { background: rgba(255,255,255,.12); color: #fff; }
body .vzp-sub, body .tier-sub { border-radius: 9999px; border-bottom-width: 0; }
body .vzp-sub.active, body .tier-sub.active { background: rgba(255,255,255,.12); }

/* Buttons: pills, same press behaviour */
body .btn-primary, body .btn-outline, body .btn-send, body .btn-danger { border-radius: 9999px; padding: .5rem 1.25rem; }
body .btn-primary:hover { background: #ff8c3a; }

/* Form controls */
body .input-sm, body .input-field { border-radius: .75rem; background: rgba(0,0,0,.35); border-color: var(--hairline); }
body .input-sm:focus, body .input-field:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(252,124,32,.18); }
body select { background-color: rgba(0,0,0,.35); }
body input[type=checkbox]:not(.cl-switch):not(.sr-only) { accent-color: var(--accent); width: 1rem; height: 1rem; }
body .time-chip { background: rgba(255,255,255,.08); }

/* Tables: no gridlines noise, hairlines + soft hover, sticky heads in material */
body table thead th { font-weight: 500; letter-spacing: .06em; }
body table tbody tr { border-color: var(--hairline); transition: background-color .15s; }
body table tbody tr:hover { background: rgba(255,255,255,.04); }
body thead.sticky, body thead .sticky { background: var(--mat-regular); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur); }

/* Console + logs */
body #consoleOutput { font-variant-numeric: tabular-nums; }

/* Thin overlay scrollbars everywhere */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 9999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); background-clip: content-box; border: 3px solid transparent; }

/* ── Accessibility fallbacks ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body *, body *::before, body *::after {
    animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important;
  }
  body .tab-content:not(.hidden) { animation: fq-fade 150ms linear both; }
  @keyframes fq-fade { from { opacity: 0; } to { opacity: 1; } }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --mat-thin: #101114; --mat-regular: #16171c; --mat-blur: none; }
}
@media (prefers-contrast: more) {
  :root { --hairline: rgba(255,255,255,.35); }
  .cl-cloud-hint { color: #cbd5e1; }
}