/* ═══════════════════════════════════════════════════════════════════════
   HYPER-EVOLUTION STYLES v1.0
   — Command Palette, Adaptive UI, Emotional Context, Field Themes
   ═══════════════════════════════════════════════════════════════════════ */

/* ── CSS variables injected by hyper.js ── */
:root {
  --field-accent:   #3D5AFE;
  --field-accent-2: #6D35E0;
  --field-grad:     linear-gradient(135deg, #3D5AFE, #6D35E0);
  --field-rgb:      61,90,254;
  --time-rgb:       61,90,254;
  --time-sat:       1;
}

/* ══════════════════════════════════════════════════════════════
   1. ADAPTIVE UI — Field Accent Micro-animations
   ══════════════════════════════════════════════════════════════ */

/* Smooth accent transition when field changes */
:root[data-field] .btn-gold {
  background: linear-gradient(135deg, var(--field-accent), var(--field-accent-2));
  transition: background 0.4s ease;
}

:root[data-field] .mtab.active {
  color: var(--field-accent);
  border-bottom-color: var(--field-accent);
}

:root[data-field] .badge-primary {
  background: rgba(var(--field-rgb), 0.12);
  color: var(--field-accent);
  border-color: rgba(var(--field-rgb), 0.2);
}

:root[data-field] .sdot {
  background: var(--field-accent);
}

:root[data-field] .mic-btn:not(.active):hover {
  box-shadow: 0 8px 32px rgba(var(--field-rgb), 0.35);
}

:root[data-field] .mic-btn.active {
  box-shadow: 0 0 0 4px rgba(var(--field-rgb), 0.22), 0 8px 32px rgba(var(--field-rgb), 0.40);
}

:root[data-field] .score-ring-fill {
  stroke: var(--field-accent);
}

/* Hero gradient pulse when field changes */
@keyframes field-pulse {
  0%   { opacity: 0.7; transform: scale(0.98); }
  50%  { opacity: 1;   transform: scale(1.01); }
  100% { opacity: 1;   transform: scale(1); }
}
.field-pulse {
  animation: field-pulse 0.55s var(--easing-spring) forwards;
}

/* Tab reorder transitions */
.mtab {
  transition: order 0.3s ease, transform 0.2s ease;
}

/* ── Time-of-day ambient shifts ── */
:root[data-time="morning"][data-energy="energetic"] {
  --time-ambient: rgba(255, 240, 180, 0.04);
}
:root[data-time="evening"][data-energy="warm"] {
  --time-ambient: rgba(220, 120, 40, 0.04);
}
:root[data-time="night"][data-energy="calm"],
:root[data-time="midnight"][data-energy="calm"] {
  --time-ambient: rgba(30, 58, 138, 0.05);
}
:root[data-time="dawn"] {
  --time-ambient: rgba(180, 140, 220, 0.04);
}

/* Subtle ambient glow on body for time context */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--time-ambient, transparent);
  pointer-events: none;
  z-index: 0;
  transition: background 2s ease;
}

/* ── Mood micro-effects ── */
:root[data-mood="excellent"] .score-ring-fill {
  filter: drop-shadow(0 0 6px rgba(0, 163, 122, 0.6));
}
:root[data-mood="good"] .score-ring-fill {
  filter: drop-shadow(0 0 4px rgba(61, 90, 254, 0.4));
}
:root[data-mood="encourage"] .score-ring-fill {
  filter: drop-shadow(0 0 4px rgba(192, 125, 0, 0.4));
}

/* ══════════════════════════════════════════════════════════════
   2. COMMAND PALETTE
   ══════════════════════════════════════════════════════════════ */

/* Backdrop */
.cmd-palette {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 20, 0.60);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(60px, 10vh, 140px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.cmd-palette.open {
  opacity: 1;
  pointer-events: all;
}

/* Inner container */
.cmd-inner {
  background: var(--card);
  border: 1px solid var(--border-d);
  border-radius: var(--r3, 20px);
  box-shadow: 0 32px 80px rgba(0,0,0,.28), 0 8px 24px rgba(0,0,0,.14);
  width: min(600px, 94vw);
  overflow: hidden;
  transform: translateY(-10px) scale(0.97);
  transition: transform 0.20s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-height: min(520px, 85vh);
  display: flex;
  flex-direction: column;
}

.cmd-palette.open .cmd-inner {
  transform: translateY(0) scale(1);
}

/* Search row */
.cmd-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  flex-shrink: 0;
}

.cmd-k-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--field-accent, #3D5AFE);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  border-radius: 6px;
  flex-shrink: 0;
  font-family: var(--mono);
}

.cmd-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  font-family: var(--font);
  min-width: 0;
  caret-color: var(--field-accent, #3D5AFE);
}

.cmd-input::placeholder {
  color: var(--ink-3);
  font-weight: 400;
}

.cmd-esc-btn {
  background: var(--bg-3);
  border: 1px solid var(--border-d);
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  flex-shrink: 0;
  font-family: var(--mono);
  transition: var(--t-s);
}
.cmd-esc-btn:hover {
  background: var(--bg-2);
  color: var(--ink-2);
}

.cmd-hr {
  height: 1px;
  background: var(--border);
  flex-shrink: 0;
}

/* Results list */
.cmd-results {
  overflow-y: auto;
  flex: 1;
  padding: 6px 8px;
  scroll-behavior: smooth;
}

.cmd-results::-webkit-scrollbar { width: 4px; }
.cmd-results::-webkit-scrollbar-track { background: transparent; }
.cmd-results::-webkit-scrollbar-thumb { background: var(--border-d); border-radius: 2px; }

.cmd-group-lbl {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 8px 10px 4px;
}

.cmd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r, 8px);
  cursor: pointer;
  transition: background 0.12s ease;
  min-height: 42px;
}

.cmd-item:hover,
.cmd-item.selected {
  background: rgba(var(--field-rgb, 61,90,254), 0.10);
}

.cmd-item.selected .cmd-item-label {
  color: var(--field-accent, #3D5AFE);
}

.cmd-item-icon {
  font-size: 17px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

.cmd-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cmd-item-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.12s;
}

.cmd-item-sub {
  font-size: 11.5px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmd-item-arrow {
  color: var(--ink-4);
  font-size: 12px;
  flex-shrink: 0;
}

.cmd-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13.5px;
}

/* Footer */
.cmd-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--ink-3);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.cmd-footer-dot { opacity: 0.5; }

.cmd-kbd {
  display: inline-block;
  background: var(--card);
  border: 1px solid var(--border-d);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-2);
  font-family: var(--mono);
  box-shadow: 0 1px 0 var(--border-d);
}

/* Prevent body scroll when palette is open */
body.cmd-open {
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════
   EMOTIONAL CONTEXT — Time-of-day header glow
   ══════════════════════════════════════════════════════════════ */

/* Morning: crisp bright accent */
:root[data-time="morning"] .hdr {
  border-bottom-color: rgba(var(--time-rgb), 0.14);
}

/* Evening: warm gold tint on cards */
:root[data-time="evening"] .card {
  border-color: rgba(var(--time-rgb, 192,110,0), 0.10);
}

/* Night/Dawn: slightly elevated card background for comfort */
:root[data-time="night"] .card,
:root[data-time="midnight"] .card,
:root[data-time="dawn"] .card {
  background: var(--card2);
}

/* Score-based excellence celebration ring */
@keyframes score-celebrate {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.08); }
  60%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

:root[data-mood="excellent"] .score-ring-wrap {
  animation: score-celebrate 0.55s var(--easing-spring);
}

/* ══════════════════════════════════════════════════════════════
   SELF-HEALING — Subtle health indicator
   ══════════════════════════════════════════════════════════════ */

/* Invisible by default, shown only when healing */
#healIndicator {
  position: fixed;
  bottom: 76px;
  inset-inline-end: 24px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green, #00A37A);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 899;
  pointer-events: none;
}

#healIndicator.healing {
  opacity: 1;
  animation: heal-pulse 1.2s ease-in-out infinite;
}

@keyframes heal-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%       { transform: scale(1.5); opacity: 0.6; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .cmd-palette {
    padding-top: 40px;
    align-items: flex-start;
  }
  .cmd-inner {
    border-radius: var(--r2, 14px) var(--r2, 14px) 0 0;
    width: 100%;
    max-height: 75vh;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .cmd-palette {
    align-items: flex-end;
    padding-top: 0;
  }
  .cmd-footer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cmd-inner,
  .cmd-palette,
  .field-pulse,
  #healIndicator { transition: none !important; animation: none !important; }
}