/**
 * Nano Banana WebApp - Layout Styles
 */

/* ===== HEADER ===== */
.header {
  background: linear-gradient(135deg, var(--bg-card), var(--bg-secondary));
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

/*
 * Fullscreen режим (класс .tg-fullscreen добавляется на html через JS)
 * В fullscreen режиме Telegram header становится ПРОЗРАЧНЫМ.
 * Контент рендерится под ним, поэтому нужны отступы для кнопок Telegram.
 *
 * contentSafeAreaInset.top - высота прозрачного header с кнопками
 * safeAreaInset.top - уже применен к body (статус-бар системы)
 */
.tg-fullscreen .header {
  /* Отступ для кнопок Telegram (Close, меню) в fullscreen */
  padding-top: calc(16px + var(--tg-content-safe-area-inset-top, 44px));
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.logo {
  font-size: 24px;
}

.logo-img {
  height: 28px;
  width: auto;
}

.app-title {
  font-size: 16px;
  font-weight: 600;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.balance-badge {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.version-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.version-badge.free {
  background: linear-gradient(135deg, #555, #333);
}

.version-badge.pro {
  background: linear-gradient(135deg, var(--accent-gold), #ff8c00);
  color: #1a1a2e;
}

/* ===== TABS NAVIGATION ===== */
.tabs-nav {
  display: flex;
  background: var(--bg-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: sticky;
  top: 60px;
  z-index: 99;
}

/* В fullscreen режиме header выше из-за content safe area */
.tg-fullscreen .tabs-nav {
  top: calc(60px + var(--tg-content-safe-area-inset-top, 0px));
}

.tab-btn {
  flex: 1;
  padding: 12px 8px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border-bottom: 2px solid transparent;
  position: relative;
  overflow: hidden;
  transition: color 0.3s var(--ease-smooth),
              background 0.3s var(--ease-smooth),
              border-color 0.3s var(--ease-smooth),
              transform 0.2s var(--ease-spring);
  /* Fix mobile tap */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* Ripple effect for tabs */
.tab-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(106, 106, 255, 0.3) 0%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  border-radius: 8px;
}

.tab-btn:active::after {
  animation: rippleEffect 0.5s ease-out;
}

.tab-btn:hover {
  color: var(--text-primary);
  background: rgba(106, 106, 255, 0.08);
  transform: translateY(-1px);
}

.tab-btn:active {
  transform: scale(0.97);
}

.tab-btn.active {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
  background: rgba(106, 106, 255, 0.1);
}

.tab-btn.active::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
  animation: glowBorder 2s ease-in-out infinite;
}

.tab-btn .icon {
  font-size: 20px;
}

/* Tab link (external link styled as tab) */
.tab-btn.tab-link {
  text-decoration: none;
}

/* External link icon for Ideas tab */
.external-link-icon {
  font-size: 10px;
  opacity: 0.6;
  vertical-align: super;
  margin-left: 2px;
}

/* ===== TAB CONTENT ===== */
/* Стили определены в секции ANIME-STYLE TAB TRANSITIONS ниже */

/* =====================================================
   ANIME-STYLE TAB TRANSITIONS
   Комбинация: Slash Cut + Speed Burst + Glitch + Whoosh
   ===================================================== */

/* --- Speed Lines Background (декоративный слой) --- */
.tab-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1;
}

/* --- SLASH CUT - Диагональный разрез --- */
@keyframes slashIn {
  0% {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
  }
}

@keyframes slashOut {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
  }
  100% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    opacity: 0;
  }
}

/* --- SPEED BURST - Взрывной зум из центра --- */
@keyframes speedBurstIn {
  0% {
    transform: scale(0.3) rotate(-5deg);
    opacity: 0;
    filter: blur(10px);
  }
  50% {
    transform: scale(1.05) rotate(1deg);
    filter: blur(2px);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes speedBurstOut {
  0% {
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: scale(1.5) rotate(3deg);
    opacity: 0;
    filter: blur(15px);
  }
}

/* --- GLITCH TRANSITION - RGB смещение и помехи --- */
@keyframes glitchIn {
  0% {
    opacity: 0;
    transform: translate(0);
    filter: blur(0);
  }
  10% {
    opacity: 0.5;
    transform: translate(-5px, 2px);
    filter: hue-rotate(90deg);
  }
  20% {
    transform: translate(5px, -2px);
    filter: hue-rotate(-90deg);
  }
  30% {
    transform: translate(-3px, 0);
    clip-path: inset(40% 0 50% 0);
  }
  40% {
    transform: translate(3px, 0);
    clip-path: inset(10% 0 80% 0);
  }
  50% {
    transform: translate(0);
    clip-path: inset(60% 0 20% 0);
    filter: hue-rotate(0);
  }
  60% {
    clip-path: none;
    opacity: 0.8;
  }
  100% {
    opacity: 1;
    transform: translate(0);
    filter: none;
  }
}

@keyframes glitchOut {
  0% {
    opacity: 1;
    transform: translate(0);
  }
  20% {
    transform: translate(10px, 0);
    filter: hue-rotate(90deg);
  }
  40% {
    transform: translate(-10px, 0);
    filter: hue-rotate(-90deg);
    clip-path: inset(30% 0 40% 0);
  }
  60% {
    clip-path: inset(70% 0 10% 0);
  }
  100% {
    opacity: 0;
    transform: translate(20px, 0);
    clip-path: inset(0 0 100% 0);
  }
}

/* --- WHOOSH SLIDE - Скоростной пролёт с motion blur --- */
@keyframes whooshIn {
  0% {
    transform: translateX(100%) skewX(-10deg);
    opacity: 0;
    filter: blur(8px);
  }
  60% {
    transform: translateX(-3%) skewX(2deg);
    filter: blur(1px);
  }
  80% {
    transform: translateX(1%) skewX(-1deg);
  }
  100% {
    transform: translateX(0) skewX(0deg);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes whooshOut {
  0% {
    transform: translateX(0) skewX(0deg);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: translateX(-100%) skewX(10deg);
    opacity: 0;
    filter: blur(8px);
  }
}

/* --- FLASH - Вспышка при переходе --- */
@keyframes flashOverlay {
  0% {
    opacity: 0;
    background: white;
  }
  30% {
    opacity: 0.8;
    background: linear-gradient(135deg, #6a6aff, #ff6b6b, #ffd700);
  }
  100% {
    opacity: 0;
  }
}

/* --- Speed Lines анимация --- */
@keyframes speedLines {
  0% {
    background: repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 10px,
      rgba(106, 106, 255, 0.3) 10px,
      rgba(106, 106, 255, 0.3) 12px
    );
    background-size: 200% 100%;
    background-position: 100% 0;
    opacity: 0;
  }
  20% {
    opacity: 0.6;
  }
  100% {
    background-position: -100% 0;
    opacity: 0;
  }
}

/* --- КОМБИНИРОВАННАЯ АНИМАЦИЯ (все эффекты) --- */
@keyframes animeTransitionIn {
  0% {
    transform: translateX(80px) scale(0.9) skewX(-3deg);
    opacity: 0;
    filter: blur(6px) brightness(1.5);
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
  }
  30% {
    filter: blur(3px) brightness(1.2) hue-rotate(10deg);
    clip-path: polygon(5% 0, 100% 0, 100% 100%, 0% 100%);
  }
  60% {
    transform: translateX(-5px) scale(1.02) skewX(1deg);
    filter: blur(1px) brightness(1.1);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  80% {
    transform: translateX(2px) scale(0.99);
  }
  100% {
    transform: translateX(0) scale(1) skewX(0deg);
    opacity: 1;
    filter: blur(0) brightness(1);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}

@keyframes animeTransitionOut {
  0% {
    transform: translateX(0) scale(1);
    opacity: 1;
    filter: blur(0) brightness(1);
  }
  30% {
    filter: brightness(1.3) hue-rotate(-10deg);
  }
  100% {
    transform: translateX(-80px) scale(0.9) skewX(3deg);
    opacity: 0;
    filter: blur(6px) brightness(0.8);
    clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
  }
}

/* --- Tab content styles --- */
.tab-content {
  display: none;
  padding: 16px;
}

.tab-content.active {
  display: block;
}

/* Flash overlay при переходе */
.tabs-container {
  position: relative;
}

.tabs-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 100;
}

.tabs-container.flashing::after {
  animation: flashOverlay 0.4s ease-out forwards;
}

/* Speed lines overlay */
.tabs-container.speed-lines::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 99;
  animation: speedLines 0.5s linear forwards;
}

/* === MODERN BUTTON KEYFRAMES === */
@keyframes rippleEffect {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

@keyframes neonPulse {
  0%, 100% {
    box-shadow: 0 0 5px var(--glow-color, var(--glow-primary)),
                0 0 10px var(--glow-color, var(--glow-primary)),
                0 0 20px var(--glow-color, var(--glow-primary));
  }
  50% {
    box-shadow: 0 0 10px var(--glow-color, var(--glow-primary)),
                0 0 20px var(--glow-color, var(--glow-primary)),
                0 0 40px var(--glow-color, var(--glow-primary));
  }
}

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

@keyframes glowBorder {
  0%, 100% {
    border-color: rgba(106, 106, 255, 0.3);
  }
  50% {
    border-color: rgba(106, 106, 255, 0.8);
  }
}

@keyframes electricPulse {
  0%, 100% { opacity: 1; filter: brightness(1); }
  50% { opacity: 0.8; filter: brightness(1.3); }
}

@keyframes magneticFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes iconBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* === RIPPLE MIXIN (apply to buttons) === */
.ripple-container {
  position: relative;
  overflow: hidden;
}

.ripple-container::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  border-radius: 50%;
}

.ripple-container:active::after {
  animation: rippleEffect 0.6s ease-out;
}

/* ===== CARDS ===== */
.card {
  background: linear-gradient(135deg, var(--bg-card), var(--bg-secondary));
  border-radius: var(--border-radius);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.card-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-secondary);
}