/* ═══════════════════════════════════════════
   visitor.css — visitor info panel (bottom center)
═══════════════════════════════════════════ */

/* ── Wrapper: sits above bottom-text ── */
.visitor-wrap {
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-ui);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;

  /* Start invisible, JS reveals after data loads */
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
  transition:
    opacity  0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
}

.visitor-wrap.visitor-wrap--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Glass card ── */
.visitor-card {
  display: flex;
  align-items: center;
  gap: 18px;

  padding: 8px 18px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 10, 28, 0.72);
  backdrop-filter: blur(16px);

  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ── Status dot ── */
.visitor-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clr-green);
  box-shadow: 0 0 8px var(--clr-green);
  flex-shrink: 0;
  animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 8px  var(--clr-green); }
  50%       { opacity: 0.5; box-shadow: 0 0 16px var(--clr-green); }
}

/* ── Field groups ── */
.visitor-fields {
  display: flex;
  gap: 20px;
  align-items: center;
}

.visitor-field {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.visitor-field__label {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.28);
  text-transform: uppercase;
}

.visitor-field__value {
  color: rgba(255, 255, 255, 0.75);
  font-size: 11px;
}

/* Coloured accents for specific fields */
.visitor-field__value--ip {
  color: var(--clr-pink);
  text-shadow: 0 0 10px rgba(255, 31, 110, 0.45);
}

.visitor-field__value--ok {
  color: var(--clr-green);
}

.visitor-field__value--warn {
  color: var(--clr-amber);
}

/* ── Ping results strip ── */
.visitor-ping {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 1px;
}

.visitor-ping__node {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
}

.visitor-ping__ms {
  font-size: 10px;
  color: var(--clr-green);
}

.visitor-ping__ms--warn  { color: var(--clr-amber); }
.visitor-ping__ms--dead  { color: var(--clr-pink);  }

/* Separator dot */
.visitor-sep {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

/* ── Loading skeleton animation ── */
.visitor-skeleton {
  width: 320px;
  height: 36px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.09) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 400% 100%;
  animation: shimmer 1.6s ease infinite;
}

@keyframes shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ── Bottom tagline (kept below card) ── */
.bottom-text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.28);
  white-space: nowrap;
  animation: textPulse 5s ease-in-out infinite;
}

@keyframes textPulse {
  0%, 100% { opacity: 0.28; }
  50%       { opacity: 0.65; }
}

/* ═══════════════════════════════════════════
   MOBILE — карточка IP в столбик
═══════════════════════════════════════════ */
@media (max-width: 600px) {

  .visitor-wrap {
    bottom: 8px;
    width: calc(100vw - 24px);   /* не вылезает за экран */
    max-width: 360px;
  }

  /* Карточка — вертикальный стек */
  .visitor-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    white-space: normal;         /* разрешаем перенос */
    width: 100%;
  }

  /* Поля — горизонтальная сетка 2 колонки */
  .visitor-fields {
    flex-wrap: wrap;
    gap: 10px 18px;
    width: 100%;
  }

  .visitor-field {
    min-width: 120px;
  }

  /* Вертикальные разделители скрываем */
  .visitor-sep {
    display: none;
  }

  /* Пинг-строка тоже переносится */
  .visitor-ping {
    flex-wrap: wrap;
    gap: 4px 8px;
  }

  /* Скелетон на всю ширину */
  .visitor-skeleton {
    width: 100%;
  }

  /* Нижний текст — центр, мельче */
  .bottom-text {
    font-size: 10px;
    text-align: center;
    white-space: normal;
    padding: 0 12px;
  }
}