/**
 * Мягкое плавающее уведомление о возможном влиянии VPN при сбоях загрузки (ИИ-Финансист).
 * Зависит от токенов темы (iifin-global / iifin-tokens), с запасными значениями.
 */

#iifin-network-hint.iifin-network-hint {
  position: fixed;
  z-index: 99990;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  justify-content: center;
  padding: calc(10px + env(safe-area-inset-top, 0px)) var(--spacing-4, 1rem) var(--spacing-2, 0.5rem);
  pointer-events: none;
  box-sizing: border-box;
}

#iifin-network-hint.iifin-network-hint .iifin-network-hint__panel {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3, 0.75rem);
  max-width: 42rem;
  width: min(100%, 42rem);
  margin: 0 auto;
  padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
  border-radius: var(--radius-lg, 1rem);
  border: 1px solid rgba(11, 45, 74, 0.1);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(11, 45, 74, 0.1));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateY(-10px);
  transition:
    opacity 0.28s ease,
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

#iifin-network-hint.iifin-network-hint.is-visible .iifin-network-hint__panel {
  opacity: 1;
  transform: translateY(0);
}

#iifin-network-hint.iifin-network-hint .iifin-network-hint__icon {
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--brand-deep-teal, #0b7e95);
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

#iifin-network-hint.iifin-network-hint .iifin-network-hint__text {
  flex: 1;
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.45;
  font-weight: var(--font-weight-normal, 400);
  color: var(--brand-navy, #0b2d4a);
}

#iifin-network-hint.iifin-network-hint .iifin-network-hint__text--short {
  display: none;
}

@media (max-width: 380px) {
  #iifin-network-hint.iifin-network-hint .iifin-network-hint__text--full {
    display: none;
  }
  #iifin-network-hint.iifin-network-hint .iifin-network-hint__text--short {
    display: block;
  }
}

#iifin-network-hint.iifin-network-hint .iifin-network-hint__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: -0.25rem -0.25rem -0.25rem 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm, 0.5rem);
  background: transparent;
  color: var(--neutral-500, #737373);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

#iifin-network-hint.iifin-network-hint .iifin-network-hint__close:hover {
  background: rgba(11, 45, 74, 0.06);
  color: var(--neutral-700, #404040);
}

#iifin-network-hint.iifin-network-hint .iifin-network-hint__close .material-symbols-outlined {
  font-size: 1.125rem;
}

#iifin-network-hint.iifin-network-hint:not(.is-visible) {
  visibility: hidden;
}

#iifin-network-hint.iifin-network-hint.is-visible {
  visibility: visible;
}