/* Header terminal — refined header controls
   ────────────────────────────────────────────────────────────
   1. ⌘K Search      → icon-only square, thin outlined magnifier
   2. Watchlist star → amber glow, mono count badge
   3. Wallet pill    → UNIFIED wallet+balance: ● addr │ $bal ▴8.4% ▾
                       (balance filled by auth.js/refreshBalanceInPill)

   Layered on top of header-glass.css. All rules are additive; if this
   file isn't loaded nothing breaks. */

.cmc-header .actions {
  gap: 8px !important;
  font-family: var(--c-font-family-mono, 'JetBrains Mono', monospace);
}

/* ── ⌘K Search — icon only, proportional ───────────────────────
   32×32 square matching the height of every other pill. 16 px
   magnifier centred with a 1.75 stroke — visually balanced against
   the mono type in the wallet pill (heavier than the 12 px icons
   nav uses, lighter than the star). */
.cmc-header .actions [data-cmdk] {
  position: relative;
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 32px !important; height: 32px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(196, 203, 218, 0.85) !important;
  font-size: 0 !important;                       /* hide "⌘K Search" text */
  gap: 0 !important;
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
}
.cmc-header .actions [data-cmdk]::before {
  content: "";
  display: block;
  width: 16px; height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M20.5 20.5 16.4 16.4'/></svg>") center/16px 16px no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M20.5 20.5 16.4 16.4'/></svg>") center/16px 16px no-repeat;
}
.cmc-header .actions [data-cmdk]:hover {
  background: rgba(255, 255, 255, 0.075) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #e2e8f0 !important;
}

/* ── Watchlist trigger — amber glass pill, plain number inside ─
   Empty:   muted glass, outline star, no count
   Active:  amber-tinted glass with inner glow, filled star,
            plain amber number inline (no badge ring) */
.cmc-header .actions .watch-trigger {
  position: relative;
  height: 32px !important;
  padding: 0 11px !important;
  gap: 7px !important;
  border-radius: 8px !important;
  color: rgba(196, 203, 218, 0.78) !important;
  text-decoration: none !important;
  transition: border-color .14s, background .14s, color .14s, box-shadow .14s;
}
.cmc-header .actions .watch-trigger svg {
  width: 15px !important; height: 15px !important;
  color: currentColor;
  transition: transform .18s ease-out, color .14s;
}
.cmc-header .actions .watch-trigger:hover svg {
  transform: rotate(-8deg) scale(1.08);
}
.cmc-header .actions .watch-chev {
  font-size: 8px !important;
  color: rgba(139, 149, 168, 0.55) !important;
  transition: color .14s;
}
.cmc-header .actions .watch-trigger:hover .watch-chev {
  color: rgba(252, 176, 64, 0.65) !important;
}

/* Empty state — muted neutral glass, outline star */
.cmc-header .actions .watch-trigger:has(.watch-count-badge[data-empty="true"]) {
  color: rgba(148, 163, 184, 0.75) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}
.cmc-header .actions .watch-trigger:has(.watch-count-badge[data-empty="true"]) svg polygon {
  fill: none !important;
}
.cmc-header .actions .watch-trigger:has(.watch-count-badge[data-empty="true"]):hover {
  color: #fcb040 !important;
  border-color: rgba(252, 176, 64, 0.30) !important;
}

/* Active state — amber-tinted glass pill, filled amber star, warm glow */
.cmc-header .actions .watch-trigger:has(.watch-count-badge:not([data-empty="true"])) {
  color: #fcb040 !important;
  border-color: rgba(252, 176, 64, 0.28) !important;
  background: linear-gradient(180deg,
                rgba(252, 176, 64, 0.10),
                rgba(252, 176, 64, 0.03)) !important;
  box-shadow: inset 0 0 12px rgba(252, 176, 64, 0.06);
}
.cmc-header .actions .watch-trigger:has(.watch-count-badge:not([data-empty="true"])):hover {
  border-color: rgba(252, 176, 64, 0.50) !important;
  background: linear-gradient(180deg,
                rgba(252, 176, 64, 0.16),
                rgba(252, 176, 64, 0.05)) !important;
  box-shadow: inset 0 0 12px rgba(252, 176, 64, 0.10),
              0 0 0 2px rgba(252, 176, 64, 0.08);
}
.cmc-header .actions .watch-trigger:has(.watch-count-badge:not([data-empty="true"])) svg polygon {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Count — plain number, no frame */
.cmc-header .actions .watch-count-badge {
  position: static !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important; height: auto !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #fcb040 !important;
  font-family: var(--c-font-family-mono, 'JetBrains Mono', monospace) !important;
  font-size: 12px !important; font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums;
  animation: none !important;
}
.cmc-header .actions .watch-count-badge:not([data-empty="true"]) {
  display: inline-flex !important;
}
@media (prefers-reduced-motion: reduce) {
  .cmc-header .actions .watch-count-badge { animation: none; }
  .cmc-header .actions .watch-trigger:hover svg { transform: none; }
}
/* Force the badge to actually show over the star even on pages
   that use `.watch-count-badge[data-empty="true"] { display: none }`
   as their ONLY rule — the active state still needs display:inline-flex. */
.cmc-header .actions .watch-count-badge:not([data-empty="true"]) {
  display: inline-flex !important;
}

/* ── UNIFIED wallet + balance pill ─────────────────────────────
   Rendered by auth.js/renderConnectButton() as a single button
   with class .auth-connected-pill. Inner markup:

     <span class="uauth-pill">
       <span class="uauth-led"></span>
       <span class="uauth-addr">0xeb25…e26c</span>
       <span class="uauth-div"></span>
       <span class="uauth-bal">$12,345</span>
       <span class="uauth-delta up">▴8.4%</span>
       <span class="uauth-chev">▾</span>
     </span>

   One border, one background, one hit target — but visually two
   regions separated by a soft vertical divider. Green LED signals
   "live"; hovering brightens the whole pill in one motion. */
.cmc-header .actions .auth-connected-pill {
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg,
                rgba(52, 211, 153, 0.06),
                rgba(52, 211, 153, 0.02)) !important;
  border: 1px solid rgba(52, 211, 153, 0.22) !important;
  color: var(--c-color-text-primary, #e2e8f0) !important;
  transition: border-color .14s, background .14s, box-shadow .14s;
}
.cmc-header .actions .auth-connected-pill:hover {
  border-color: rgba(52, 211, 153, 0.42) !important;
  background: linear-gradient(180deg,
                rgba(52, 211, 153, 0.10),
                rgba(52, 211, 153, 0.03)) !important;
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.06);
}
.uauth-pill {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--c-font-family-mono, 'JetBrains Mono', monospace);
  line-height: 1;
}
/* Green pulsing LED */
.uauth-led {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
  animation: uauth-pulse 2.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes uauth-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(34, 197, 94, 0.55); opacity: 1; }
  50%      { box-shadow: 0 0 12px rgba(34, 197, 94, 0.9);  opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
  .uauth-led { animation: none; }
}
/* Address */
.uauth-addr {
  font-size: 12px; font-weight: 500;
  letter-spacing: .02em;
  color: var(--c-color-text-primary, #e2e8f0);
}
/* Divider between address and balance */
.uauth-div {
  width: 1px; height: 14px;
  background: rgba(148, 163, 184, 0.22);
  flex-shrink: 0;
}
/* Balance */
.uauth-bal {
  font-size: 12px; font-weight: 700;
  color: #34d399;
  font-variant-numeric: tabular-nums;
  min-width: 40px;                                /* prevent layout jump */
}
.uauth-bal[data-loading="true"] {
  color: rgba(139, 149, 168, 0.5);
  font-weight: 500;
}
/* Delta pill */
.uauth-delta {
  padding: 2px 5px 3px;
  border-radius: 4px;
  font-size: 9.5px; font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.uauth-delta.up {
  background: rgba(52, 211, 153, 0.14);
  color: #34d399;
}
.uauth-delta.dn {
  background: rgba(239, 68, 68, 0.14);
  color: #f87171;
}
/* Chevron */
.uauth-chev {
  font-size: 9px;
  color: rgba(148, 163, 184, 0.55);
  margin-left: 1px;
}

/* Narrow viewport — hide balance, keep only ● addr ▾ so the pill
   still fits alongside search + watch on tablet. Divider hides too. */
@media (max-width: 900px) {
  .uauth-div,
  .uauth-bal,
  .uauth-delta { display: none; }
  .uauth-pill { gap: 7px; }
}

/* Connect (signed-out) — same brand-blue as before, unchanged */
.cmc-header .actions .cmc-btn.cmc-btn-primary:not(.auth-connected-pill) {
  height: 32px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  font-family: var(--c-font-family-mono, 'JetBrains Mono', monospace) !important;
  font-size: 12px !important; font-weight: 600 !important;
  letter-spacing: .02em;
}

/* Ops pill — tighter frame so it groups with the terminal chips. */
.cmc-header .actions .ops-pill {
  height: 26px !important;
  padding: 0 10px !important;
  border-radius: 7px !important;
  font-family: var(--c-font-family-mono, 'JetBrains Mono', monospace) !important;
  font-size: 10.5px !important; letter-spacing: .04em;
  border: 1px solid rgba(139, 149, 168, 0.18) !important;
  background: rgba(15, 20, 30, 0.5) !important;
}

/* Mobile — shrink pills so they still fit */
@media (max-width: 640px) {
  .cmc-header .actions [data-cmdk] {
    width: 30px !important; height: 30px !important;
  }
  .cmc-header .actions [data-cmdk]::before {
    width: 15px; height: 15px;
    -webkit-mask-size: 15px 15px;
            mask-size: 15px 15px;
  }
  .cmc-header .actions .watch-trigger,
  .cmc-header .actions .auth-connected-pill,
  .cmc-header .actions .cmc-btn.cmc-btn-primary {
    height: 30px !important;
    padding-left: 10px !important; padding-right: 10px !important;
  }
}