@use "styles/palette" as *;

* {
  font-family: $font;
  font-size: 13px;
  font-weight: bold;
}

// ── Layer 0 — Heartbeat ──
window.Heartbeat {
  background: transparent;

  .heartbeat-line {
    background: linear-gradient(
      to right,
      rgba(255, 77, 166, 0.0),
      rgba(255, 77, 166, 0.6),
      rgba(201, 160, 255, 0.8),
      rgba(255, 77, 166, 0.6),
      rgba(255, 77, 166, 0.0)
    );
    min-height: 4px;
  }
}

// ── Layer 1 — Ghost Bar ──
window.Bar {
  background: transparent;

  > centerbox {
    background: rgba(38, 21, 55, 0.88);
    border-radius: $radius;
    border: 3px solid rgba(255, 77, 166, 0.60);
    margin: 6px 8px;
    padding: 0 8px;
    min-height: 38px;
  }

  .modules-left,
  .modules-center,
  .modules-right {
    padding: 0 4px;
  }

  .module {
    padding: 0 8px;
    color: $text;
  }

  .prompt-name {
    color: $magenta;
    font-size: 14px;
    padding: 0 0 0 10px;
  }

  .prompt-cursor {
    color: $lilac;
    font-size: 14px;
    font-weight: 900;
  }

  .separator {
    color: rgba(240, 234, 248, 0.12);
    font-size: 11px;
    padding: 0 4px;
    font-weight: normal;
  }

  // ── clock ──
  .clock {
    color: $magenta;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 0.04em;
    padding: 0 10px;
  }

  .date {
    color: $lavande;
    font-size: 12px;
    font-weight: normal;
    padding: 0 10px 0 2px;
  }

  // ── system stats ──
  .cpu {
    color: $lavande;
    &.warning { color: $champagne; }
    &.critical { color: $danger; }
  }

  .ram {
    color: $magenta;
    &.warning { color: $champagne; }
    &.critical { color: $danger; }
  }

  // ── network ──
  .network {
    color: $lavande;
    font-size: 12px;
    padding: 0 8px;
    &.disconnected { color: $danger; }
  }

  // ── volume ──
  .volume {
    color: $magenta;
    padding: 0 8px;
    &.muted { color: rgba(255, 77, 166, 0.30); }
  }

  // ── battery ──
  .battery {
    color: $magenta;
    padding: 0 8px;
    &.charging { color: $mitsuri; }
    &.low { color: $danger; }
    &.warning { color: $champagne; }
  }

  // ── hover effects ──
  .module:hover,
  .cpu:hover,
  .ram:hover,
  .network:hover,
  .battery:hover {
    color: $lilac;
  }

  // ── systray ──
  .systray {
    padding: 0 4px;
  }

  .systray-item {
    background: transparent;
    border: none;
    padding: 0 3px;
    min-width: 0;
    min-height: 0;

    &:hover {
      background: rgba(201, 160, 255, 0.12);
      border-radius: $radius-sm;
    }
  }

  // ── volume interactive ──
  button.volume,
  button.muted {
    background: transparent;
    border: none;
    padding: 0 8px;
    min-width: 0;
    min-height: 0;

    label { color: $magenta; }
    &.muted label { color: rgba(255, 77, 166, 0.30); }
    &:hover label { color: $lilac; }
  }

  // ── media ──
  .media-module {
    padding: 0 4px;
  }

  .media {
    padding: 0 4px;
  }

  .media.paused {
    .media-text {
      color: rgba(201, 160, 255, 0.50);
      font-style: italic;
    }
  }

  .media-text {
    color: $lilac;
    font-size: 12px;
    font-weight: normal;
    padding: 0 6px;
  }

  .media-prev,
  .media-play,
  .media-next {
    background: transparent;
    border: none;
    padding: 0 3px;
    min-width: 0;
    min-height: 0;

    label {
      color: $lilac;
      font-size: 13px;
    }

    &:hover label {
      color: $magenta;
    }
  }
}

// ── Layer 3 — Brain Power Panel ──
window.BrainPower {
  background: transparent;

  .brain-panel {
    background: rgba(26, 14, 39, 0.94);  // $crust heavy glass
    border-radius: 0 $radius $radius 0;
    border: 2px solid rgba(201, 160, 255, 0.40);  // $lilac border
    border-left: none;
    min-width: 380px;
    padding: 16px;
  }

  .brain-header {
    padding: 0 0 12px 0;
  }

  .brain-title {
    color: $magenta;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.08em;
  }

  .brain-close {
    background: transparent;
    border: none;
    min-width: 0;
    min-height: 0;
    padding: 2px 8px;

    label {
      color: $muted;
      font-size: 14px;
    }

    &:hover label {
      color: $danger;
    }
  }

  .brain-content {
    padding: 0 4px;
  }

  .brain-section {
    padding: 8px 0 4px 0;
  }

  .brain-section-title {
    color: $lilac;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
  }

  .brain-divider {
    background: rgba(90, 56, 117, 0.30);  // $surface2
    min-height: 1px;
    margin: 8px 0;
  }

  .brain-focus {
    color: $text;
    font-size: 13px;
    padding: 4px 0 4px 16px;
  }

  .brain-session {
    color: $champagne;
    font-size: 12px;
    font-weight: normal;
    padding: 4px 0 4px 16px;
  }

  .brain-todos-count {
    color: $muted;
    font-size: 11px;
    font-weight: normal;
  }

  .brain-todos-list {
    color: $subtext1;
    font-size: 12px;
    font-weight: normal;
    padding: 4px 0 4px 16px;
  }

  .brain-terminal-placeholder {
    color: $muted;
    font-size: 11px;
    font-style: italic;
    padding: 8px 0 4px 16px;
  }
}