/* ═══════════════════════════════════════════════════════════
   AI-модалка — переоформление под polish-эстетику
   (убираем фиолетовый --card2, используем чистый dark + золото)
   ═══════════════════════════════════════════════════════════ */

#ai-modal{
  background:rgba(6,6,12,.86) !important;
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
}

/* ── Сама коробка модалки ───────────────────────────── */
#ai-modal .ai-box{
  background:#0a0a14 !important;
  border:1px solid var(--p-line) !important;
  border-top:none !important;
  border-radius:18px !important;
  max-width:680px !important;
  padding:32px 30px !important;
  position:relative;
  box-shadow:
    0 30px 80px rgba(0,0,0,.6),
    0 0 0 1px rgba(212,182,86,.04) inset;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  max-height:calc(100vh - 40px);
  max-height:calc(100dvh - 40px);
}
/* Тонкая золотая черта сверху как у premium-карточек */
#ai-modal .ai-box::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    var(--p-accent) 30%,
    var(--p-accent) 70%,
    transparent 100%);
  opacity:.6;
}
/* Background-glow в углу */
#ai-modal .ai-box::after{
  content:"";
  position:absolute;
  top:-60px;right:-60px;
  width:300px;height:300px;
  background:radial-gradient(circle, rgba(212,182,86,.08), transparent 60%);
  pointer-events:none;
  z-index:0;
}
#ai-modal .ai-box > *:not(.ai-close){position:relative;z-index:1;}

/* ── Заголовок: заголовок + sub в левой колонке, × в правой ── */
#ai-modal .ai-box h2{
  font-family:'Bebas Neue',sans-serif !important;
  font-size:26px !important;
  letter-spacing:2.5px !important;
  color:var(--p-ink) !important;
  margin:0 0 4px !important;
  font-weight:400 !important;
  padding-right:54px !important; /* место для × справа */
  line-height:1.15 !important;
}
#ai-modal .ai-box .sub{
  font-size:13px !important;
  color:var(--p-ink-mute) !important;
  margin:0 0 22px !important;
  padding:0 54px 0 0 !important; /* не залезаем под × */
  background:transparent !important;
  border:none !important;
  border-bottom:none !important;
}

/* ── Кнопка закрытия (фиксированный абсолют в правом-верхнем) ── */
#ai-modal .ai-close{
  position:absolute !important;
  top:18px !important;
  right:18px !important;
  left:auto !important;
  bottom:auto !important;
  width:34px !important;
  height:34px !important;
  padding:0 !important;
  margin:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid var(--p-line) !important;
  color:var(--p-ink-soft) !important;
  font-size:16px !important;
  line-height:1 !important;
  cursor:pointer;
  z-index:5 !important;
  transition:all 200ms var(--p-ease);
}
#ai-modal .ai-close:hover{
  background:var(--p-accent-soft) !important;
  border-color:var(--p-accent) !important;
  color:var(--p-accent) !important;
}

/* ── Tab switch — segmented control ─────────────────── */
#ai-modal .ai-tab-switch{
  display:flex !important;
  gap:4px !important;
  margin-bottom:18px !important;
  padding:4px !important;
  background:rgba(255,255,255,.03) !important;
  border:1px solid var(--p-line) !important;
  border-radius:12px !important;
}
#ai-modal .ai-tab-switch button{
  flex:1 !important;
  padding:9px 6px !important;
  background:transparent !important;
  border:none !important;
  color:var(--p-ink-mute) !important;
  font-size:11px !important;
  letter-spacing:.5px !important;
  text-transform:none !important;
  border-radius:8px !important;
  font-family:'Inter',sans-serif !important;
  font-weight:500 !important;
  cursor:pointer;
  transition:all 220ms var(--p-ease);
}
#ai-modal .ai-tab-switch button:hover{
  color:var(--p-ink) !important;
  background:rgba(255,255,255,.04) !important;
}
#ai-modal .ai-tab-switch button.on{
  background:linear-gradient(180deg,
    rgba(212,182,86,.16),
    rgba(212,182,86,.08)) !important;
  color:var(--p-accent) !important;
  box-shadow:
    0 0 0 1px rgba(212,182,86,.3),
    0 1px 6px rgba(212,182,86,.15);
}

/* ── Textarea ────────────────────────────────────────── */
#ai-modal .ai-box textarea,
#ai-modal .ai-box .input-glow{
  width:100% !important;
  background:rgba(255,255,255,.03) !important;
  border:1px solid var(--p-line) !important;
  border-radius:14px !important;
  color:var(--p-ink) !important;
  padding:16px 18px !important;
  font-size:14px !important;
  font-family:'Inter',sans-serif !important;
  min-height:110px !important;
  resize:vertical !important;
  outline:none !important;
  line-height:1.55 !important;
  transition:border-color 200ms var(--p-ease),
             box-shadow 200ms var(--p-ease),
             background 200ms var(--p-ease) !important;
}
#ai-modal .ai-box textarea::placeholder{
  color:var(--p-ink-dim) !important;
  font-style:normal;
}
#ai-modal .ai-box textarea:focus,
#ai-modal .ai-box .input-glow:focus{
  border-color:rgba(212,182,86,.4) !important;
  background:rgba(255,255,255,.04) !important;
  box-shadow:0 0 0 4px rgba(212,182,86,.08) !important;
}

/* ── Чипы-подсказки ─────────────────────────────────── */
#ai-modal .ai-suggestions{
  display:flex !important;
  flex-wrap:wrap;
  gap:6px !important;
  margin:14px 0 18px !important;
}
#ai-modal .ai-sug{
  display:inline-flex !important;
  align-items:center;
  gap:5px !important;
  font-size:12px !important;
  padding:7px 12px !important;
  background:rgba(255,255,255,.03) !important;
  border:1px solid var(--p-line) !important;
  border-radius:9999px !important;
  color:var(--p-ink-soft) !important;
  cursor:pointer;
  font-family:'Inter',sans-serif !important;
  font-weight:400 !important;
  transition:all 200ms var(--p-ease) !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}
#ai-modal .ai-sug:hover{
  background:var(--p-accent-soft) !important;
  border-color:rgba(212,182,86,.35) !important;
  color:var(--p-accent) !important;
  transform:translateY(-1px);
}

/* ── Primary submit ─────────────────────────────────── */
#ai-modal .ai-submit{
  width:100% !important;
  padding:14px !important;
  background:linear-gradient(180deg,
    var(--p-accent),
    color-mix(in srgb, var(--p-accent) 88%, #000)) !important;
  color:#0a0a14 !important;
  border:none !important;
  border-radius:12px !important;
  font-size:12px !important;
  letter-spacing:2.4px !important;
  text-transform:uppercase !important;
  font-weight:700 !important;
  font-family:'Inter',sans-serif !important;
  cursor:pointer;
  margin-top:6px !important;
  transition:transform 200ms var(--p-ease),
             box-shadow 200ms var(--p-ease) !important;
  box-shadow:0 4px 18px rgba(212,182,86,.18);
}
#ai-modal .ai-submit:hover{
  transform:translateY(-1px);
  box-shadow:
    0 8px 24px rgba(212,182,86,.32),
    0 0 0 1px rgba(212,182,86,.4);
}
#ai-modal .ai-submit:disabled{
  opacity:.5 !important;
  cursor:not-allowed !important;
  transform:none !important;
}

/* ── Кнопка «Квиз» (secondary) ──────────────────────── */
#ai-modal .ai-quiz-toggle{
  background:rgba(255,255,255,.03) !important;
  border:1px solid var(--p-line) !important;
  border-radius:12px !important;
  color:var(--p-ink-soft) !important;
  font-size:12px !important;
  letter-spacing:.5px !important;
  padding:14px 18px !important;
  white-space:nowrap;
  cursor:pointer;
  font-family:'Inter',sans-serif !important;
  font-weight:500 !important;
  transition:all 200ms var(--p-ease) !important;
}
#ai-modal .ai-quiz-toggle:hover{
  border-color:rgba(212,182,86,.35) !important;
  color:var(--p-accent) !important;
  background:var(--p-accent-soft) !important;
}

/* ── Результаты ─────────────────────────────────────── */
#ai-modal .ai-results{
  margin-top:22px !important;
  border-top:1px solid var(--p-line) !important;
  padding-top:18px !important;
}
#ai-modal .ai-results h3{
  font-family:'Bebas Neue',sans-serif !important;
  font-size:15px !important;
  letter-spacing:2px !important;
  color:var(--p-accent) !important;
  margin-bottom:14px !important;
}
#ai-modal .ai-result-item{
  display:flex !important;
  gap:14px !important;
  padding:12px !important;
  margin-bottom:6px !important;
  border-bottom:none !important;
  background:rgba(255,255,255,.02) !important;
  border:1px solid transparent !important;
  border-radius:12px !important;
  transition:all 200ms var(--p-ease) !important;
  cursor:pointer;
}
#ai-modal .ai-result-item:hover{
  background:rgba(255,255,255,.04) !important;
  border-color:var(--p-line-strong) !important;
}
#ai-modal .ai-result-item img,
#ai-modal .ai-result-ph{
  width:52px !important;
  height:78px !important;
  object-fit:cover;
  flex-shrink:0;
  border-radius:6px !important;
  background:rgba(255,255,255,.04) !important;
}
#ai-modal .ai-result-title{
  font-family:'Inter',sans-serif !important;
  font-size:14px !important;
  font-weight:600 !important;
  color:var(--p-ink) !important;
  letter-spacing:-.01em !important;
  margin-bottom:3px !important;
}
#ai-modal .ai-result-reason{
  font-size:12px !important;
  color:var(--p-ink-mute) !important;
  line-height:1.5 !important;
  margin-top:4px !important;
}

/* ── Refine chips ───────────────────────────────────── */
#ai-modal .ai-refine-row{
  border-top:1px solid var(--p-line) !important;
  margin-top:18px !important;
  padding-top:14px !important;
}
#ai-modal .ai-refine-label{
  color:var(--p-ink-mute) !important;
  letter-spacing:1.5px !important;
}
#ai-modal .ai-refine-chip{
  background:rgba(255,255,255,.03) !important;
  border:1px solid var(--p-line) !important;
  color:var(--p-ink-soft) !important;
  font-size:11px !important;
  padding:6px 11px !important;
  border-radius:9999px !important;
  cursor:pointer;
  transition:all 200ms var(--p-ease) !important;
}
#ai-modal .ai-refine-chip:hover{
  border-color:rgba(212,182,86,.35) !important;
  color:var(--p-accent) !important;
  background:var(--p-accent-soft) !important;
}

/* ── Share ──────────────────────────────────────────── */
#ai-modal .ai-share-btn{
  background:rgba(255,255,255,.03) !important;
  border:1px solid var(--p-line) !important;
  color:var(--p-ink-soft) !important;
  border-radius:12px !important;
  padding:11px !important;
  font-size:11px !important;
  letter-spacing:2px !important;
  transition:all 200ms var(--p-ease) !important;
}
#ai-modal .ai-share-btn:hover{
  border-color:rgba(212,182,86,.35) !important;
  color:var(--p-accent) !important;
  background:var(--p-accent-soft) !important;
}

/* ── Photo upload ───────────────────────────────────── */
#ai-modal #photo-drop{
  background:rgba(255,255,255,.02) !important;
  border:1.5px dashed var(--p-line-strong) !important;
  border-radius:14px !important;
  transition:all 220ms var(--p-ease);
}
#ai-modal #photo-drop:hover{
  border-color:rgba(212,182,86,.5) !important;
  background:rgba(212,182,86,.04) !important;
}

/* ── Mobile ─────────────────────────────────────────── */
@media (max-width:640px){
  #ai-modal .ai-box{
    padding:24px 18px !important;
    border-radius:14px !important;
    max-height:94vh !important;
  }
  #ai-modal .ai-box h2{font-size:22px !important;letter-spacing:2px !important;}
  #ai-modal .ai-tab-switch{flex-wrap:wrap;padding:3px !important;}
  #ai-modal .ai-tab-switch button{font-size:10px !important;padding:8px 4px !important;}
}