@tailwind base;
@tailwind components;
@tailwind utilities;

/* кастомные утилиты */
.badge{ @apply border border-white/25 px-2 py-1 rounded-md inline-flex items-center gap-1 text-xs; }
.terminal{ background:#0b0f1a; color:#c7d2fe; }
.terminal .ok{ color:#86efac; }
.terminal .hl{ color:#93c5fd; }
.terminal .warn{ color:#fde68a; }
@layer base {
  html, body { @apply bg-slate-900 text-slate-200 antialiased; }
}

@layer utilities {
  /* мягкий градиент как на index */
  .bg-app {
    background-image:
      radial-gradient(1200px 600px at 10% -10%, rgb(56 189 248 / .08), transparent),
      radial-gradient(1000px 500px at 110% 10%, rgb(99 102 241 / .08), transparent),
      linear-gradient(to bottom, #0b1220, #0b1220);
  }
  .grid-page { @apply container mx-auto px-4 md:px-6 lg:px-8; }
}

@layer components {
  .glass {
    @apply bg-white/5 backdrop-blur-md border border-white/10 shadow-xl rounded-2xl;
  }
  .soft-card {
    @apply glass p-4 md:p-6;
  }
  .page-title {
    @apply text-2xl md:text-3xl font-semibold tracking-tight text-slate-100;
  }
  .muted { @apply text-slate-400; }

  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2 text-sm font-medium transition
           focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-400/50 disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .btn-primary {
    @apply btn bg-gradient-to-r from-sky-500/90 to-indigo-500/90 hover:from-sky-400 hover:to-indigo-400
           text-white shadow-lg shadow-sky-900/20;
  }
  .btn-ghost {
    @apply btn bg-white/5 hover:bg-white/10 text-slate-200 border border-white/10;
  }

  .input {
    @apply w-full rounded-xl bg-white/5 border border-white/10 px-4 py-2.5 text-slate-100 placeholder-slate-400
           focus:outline-none focus:ring-2 focus:ring-sky-400/40 focus:border-transparent;
  }
  .label { @apply text-sm text-slate-300 mb-2 block; }

  /* “консоль” */
  .console {
    @apply glass font-mono text-sm leading-relaxed p-4 md:p-5 text-slate-200;
  }
  .console-title { @apply text-xs uppercase tracking-wider text-slate-400 mb-2; }

  /* прогресс */
  .progress-wrap { @apply mt-4; }
  .progress {
    @apply h-2 w-full overflow-hidden rounded-full bg-white/10;
  }
  .progress > span {
    @apply block h-full rounded-full bg-gradient-to-r from-sky-500 to-indigo-500 transition-[width];
  }

  /* секции-аккордеоны */
  .acc { @apply glass overflow-hidden; }
  .acc-item + .acc-item { @apply border-t border-white/10; }
  .acc-btn { @apply w-full flex items-center justify-between px-4 md:px-5 py-3 md:py-4 text-left hover:bg-white/5; }
  .acc-title { @apply text-slate-100 font-medium; }
  .acc-content { @apply px-4 md:px-5 pb-4 md:pb-5 text-slate-300; }

  /* статус-точки */
  .dot { @apply inline-block h-2.5 w-2.5 rounded-full; }
  .dot-green { @apply dot bg-emerald-400; }
  .dot-yellow { @apply dot bg-amber-400; }
  .dot-red { @apply dot bg-rose-400; }

  /* мини-бэйдж справа “online” */
  .badge {
    @apply text-xs px-2 py-1 rounded-lg bg-white/5 border border-white/10 text-slate-300;
  }
}

/* === APPENDED PLAIN CSS (analyze-specific) ===
   This block contains concrete CSS for classes that were previously
   declared inside <style type="text/tailwindcss"> in templates/analyze.html.
   They were not processed by Tailwind at runtime, so we provide plain CSS
   here so the analyze page renders correctly.
*/

.ana-wrap {
  max-width: 88rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {
  .ana-wrap { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
  .ana-wrap { padding-left: 2rem; padding-right: 2rem; }
}

.ana-sec { padding-top: 2rem; padding-bottom: 2rem; }
@media (min-width: 768px) {
  .ana-sec { padding-top: 3rem; padding-bottom: 3rem; }
}

.ana-h1 {
  color: #0f172a;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.875rem;
}
@media (min-width: 768px) {
  .ana-h1 { font-size: 2.25rem; }
}
.ana-sub { color: #475569; }

.card {
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  border: 1px solid rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

/* input form */
.input-form {
  margin-bottom: 1rem;
  padding: 1rem;
  background: #ffffff;
  border-radius: 1rem;
  border: 1px solid rgba(15,23,42,0.04);
}
.input-field {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #e6e8ef;
  border-radius: 0.75rem;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace;
  font-size: 13px;
}

/* Terminal styles */
.term {
  position: relative;
  background: linear-gradient(180deg,#020617 0%, #081023 100%);
  border: 1px solid rgba(148,163,184,0.06);
  border-radius: 1rem;
  overflow: hidden;
  --term-font-size: 13px;
  font-size: var(--term-font-size);
  color: #e6eef8;
}

.term-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(7,10,13,0.5);
  border-bottom: 1px solid rgba(148,163,184,0.04);
  justify-content: space-between;
}
.term-title { color: #e6eef8; font-weight: 600; font-size: 0.95rem; }

.term-body {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace;
  font-size: 13px;
  line-height: 1.5;
  color: #c7d2fe;
  padding: 0.75rem;
  min-height: 200px;
  max-height: 64vh;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* log rows */
.log-row { display:block; width:100%; padding-right:0.5rem; margin-bottom:0.25rem; }
.log-meta { display:inline-block; width:85px; color: #94a3b8; font-size:11px; margin-right:8px; vertical-align:top; }
.log-out  { color: #c7f9d3; }
.log-cmd  { color: #ffd9a8; font-weight:600; }
.log-debug{ color: #9aa3b2; }
.log-warn { color: #facc15; }
.log-error{ color: #ffb4b4; font-weight:700; }

/* mini telemetry */
.mini-tele { display:grid; grid-template-columns:repeat(2,1fr); gap:0.5rem; padding:0.5rem; }
.mini-chip { display:flex; align-items:center; justify-content:space-between; background:#fff; border-radius:0.75rem; padding:0.5rem; border:1px solid rgba(15,23,42,0.04); }
.mini-cap { font-size:11px; color:#64748b; }
.mini-val { font-family: "JetBrains Mono", monospace; color:#0f172a; font-size:12px; }

/* sidebar subcards */
.subcard { border-radius:0.75rem; border:1px solid rgba(15,23,42,0.04); background:#fff; padding:0.75rem; }

/* result banner */
.result-banner { display:none; align-items:center; gap:12px; background:#ecf8ff; border:1px solid #dbeafe; border-radius:0.75rem; padding:8px 12px; color:#0f172a; }
.result-banner img { width:48px; height:48px; object-fit:cover; border-radius:8px; }

/* loading dots animation (for cmd entries) */
.loading-dots { display:inline-block; width:36px; text-align:left; margin-left:8px; vertical-align:middle; }
.loading-dots span { display:inline-block; width:6px; height:6px; background:rgba(255,255,255,0.18); border-radius:999px; margin-right:4px; opacity:0.4; transform:translateY(0); animation:ld 1s infinite; }
.loading-dots span:nth-child(2){ animation-delay:0.15s }
.loading-dots span:nth-child(3){ animation-delay:0.3s }
@keyframes ld { 0%{ opacity:0.3; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-6px); } 100%{ opacity:0.3; transform:translateY(0); } }

/* plan state */
.rstate { color:#64748b; font-size:13px; }

/* responsive improvements */
@media (max-width: 640px){
  .term-body { min-height:220px; max-height:55vh; }
  .mini-tele { grid-template-columns: repeat(2,1fr); gap:6px; padding:0.5rem; }
}

/* ensure buttons/inputs have sensible defaults when tailwind classes are unavailable */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:12px; padding:8px 12px; font-weight:600; background:#0ea5e9; color:#fff; border:none; cursor:pointer; }
.btn.btn-pri, .btn-primary { background: linear-gradient(90deg,#0ea5e9,#6366f1); }