/* Kopyalama onayı: tıklanan öğenin kendi üzerinde gösterilir.
   Kural: hiçbir adım yerleşimi değiştirmez — yalnız transform, opacity, renk ve
   box-shadow animasyonu kullanılır; onay baloncuğu akışın dışında (absolute) durur. */

.server-address {
  position: relative;
}

.server-address__icon {
  display: inline-grid;
  place-items: center;
  width: 13px;
  height: 13px;
  flex: none;
}

.server-address__icon > svg {
  grid-area: 1 / 1;
  transition: opacity 180ms ease, transform 240ms cubic-bezier(.22, .8, .24, 1);
}

.server-address__check {
  opacity: 0;
  transform: scale(.4) rotate(-18deg);
  color: #3f8f5f;
}

.server-address.is-copied .server-address__copy,
.server-address.is-failed .server-address__copy {
  opacity: 0;
  transform: scale(.5) rotate(14deg);
}

.server-address.is-copied .server-address__check {
  opacity: 1;
  transform: scale(1) rotate(0);
}

.server-address.is-failed .server-address__check {
  opacity: 0;
}

/* Onay halkası: yalnız gölge/renk — yerleşimi etkilemez. */
.server-address.is-copied {
  border-color: #6fbf8b;
  animation: copy-confirm-ring 900ms cubic-bezier(.22, .8, .24, 1) both;
}

.server-address.is-failed {
  border-color: #d98c8c;
  animation: copy-fail-ring 900ms cubic-bezier(.22, .8, .24, 1) both;
}

@keyframes copy-confirm-ring {
  0% { box-shadow: 0 0 0 0 #6fbf8b00; }
  35% { box-shadow: 0 0 0 5px #6fbf8b3d, 0 6px 16px #4a8f6524; }
  100% { box-shadow: 0 0 0 0 #6fbf8b00; }
}

@keyframes copy-fail-ring {
  0% { box-shadow: 0 0 0 0 #d98c8c00; }
  35% { box-shadow: 0 0 0 5px #d98c8c3d; }
  100% { box-shadow: 0 0 0 0 #d98c8c00; }
}

/* "Kopyalandı" baloncuğu: akışın dışında, tıklanan öğenin hemen üstünde belirir. */
.copy-flash {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 3;
  padding: 4px 9px;
  border-radius: 999px;
  background: #2f5d43;
  color: #eaf7ef;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .3px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px) scale(.92);
  transition: opacity 180ms ease, transform 260ms cubic-bezier(.22, .8, .24, 1);
}

.copy-flash.is-visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

[data-theme="dark"] .copy-flash {
  background: #3f7d58;
  color: #f0fff6;
}

[data-theme="dark"] .server-address__check {
  color: #8fd6a3;
}

/* Hareket kapalıyken onay yine görünür, yalnız animasyonsuz. */
.app-shell.motion-disabled .server-address,
.app-shell.motion-disabled .server-address__icon > svg,
.app-shell.motion-disabled .copy-flash {
  transition: none;
  animation: none;
}