/* Chippex live currency widget. Dark-gold glass, self-contained colors. */
#chx-rates{
  --r-glass: rgba(22, 20, 15, .72);
  --r-glass-2: rgba(14, 12, 9, .82);
  --r-border: rgba(183, 146, 86, .26);
  --r-gold: #D8B97E;
  --r-gold-deep: #B79256;
  --r-text: #EDE6D8;
  --r-mute: #A99C82;
  position: fixed;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  z-index: 60;
  width: 214px;
  padding: 14px 14px 12px;
  border-radius: 16px;
  border: 1px solid var(--r-border);
  background: linear-gradient(155deg, var(--r-glass), var(--r-glass-2));
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  box-shadow: 0 18px 50px -22px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.04);
  color: var(--r-text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  opacity: 0;
  transition: opacity .5s ease, transform .5s ease;
}
#chx-rates.is-in{ opacity: 1; }

#chx-rates .r-head{
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 11px;
}
#chx-rates .r-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--r-gold);
  box-shadow: 0 0 8px 1px rgba(216,185,126,.7);
  animation: chxPulse 2.2s ease-in-out infinite;
}
#chx-rates .r-title{
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--r-mute);
  font-weight: 600;
}
#chx-rates .r-list{ display: flex; flex-direction: column; gap: 9px; }
#chx-rates .r-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
#chx-rates .r-pair{
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--r-mute);
  font-variant-numeric: tabular-nums;
}
#chx-rates .r-val{
  font-size: 13px;
  font-weight: 600;
  color: var(--r-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#chx-rates .r-row.is-crypto .r-val{ color: var(--r-gold); }

#chx-rates .r-sep{
  height: 1px;
  margin: 11px 0;
  background: linear-gradient(90deg, transparent, var(--r-border) 22%, var(--r-border) 78%, transparent);
}
#chx-rates .r-foot{
  margin-top: 11px;
  font-size: 8.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(169,156,130,.6);
  text-align: right;
}

@keyframes chxPulse{
  0%,100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: .45; transform: scale(.78); }
}

/* Mobile: compact bottom strip, never overlaps the body content height */
@media (max-width: 768px){
  #chx-rates{
    top: auto;
    bottom: 0;
    right: 0;
    left: 0;
    width: auto;
    transform: translateY(100%);
    border-radius: 14px 14px 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
  }
  #chx-rates.is-in{ transform: translateY(0); }
  #chx-rates .r-head{ display: none; }
  #chx-rates .r-foot{ display: none; }
  #chx-rates .r-sep{ display: none; }
  #chx-rates .r-list{
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #chx-rates .r-list::-webkit-scrollbar{ display: none; }
  #chx-rates .r-row{
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    flex: 0 0 auto;
  }
  #chx-rates .r-pair{ font-size: 9px; letter-spacing: .1em; }
  #chx-rates .r-val{ font-size: 12px; }
}

@media (prefers-reduced-motion: reduce){
  #chx-rates{ transition: none; }
  #chx-rates .r-dot{ animation: none; }
}