/**
 * Edytor draftu (/editor/legacy) — jednolity wygląd „Studio”.
 * Ładować PO studio-shell.css. Nadpisuje warstwy z editor.css (szarości, niebieski Szukaj, ciemny panel boczny).
 */

/* ── Kolumna główna: typografia i oddech ── */
body.editor-skin .main-rail {
  gap: 20px;
}

body.editor-skin .main-rail > .panel {
  border-radius: var(--studio-radius-md);
  padding: 20px 22px;
}

body.editor-skin .main-rail > .panel > h2,
body.editor-skin .main-rail .section-head h2 {
  font-family: var(--studio-font-display), var(--studio-font-sans);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--studio-ink);
  letter-spacing: -0.02em;
  line-height: 1.3;
}

body.editor-skin .main-rail .section-head .subtle {
  font-size: 0.875rem;
  max-width: 42em;
}

/* Karty i pola — jeden zestaw teł zamiast mixu #f9fafb / #fff */
body.editor-skin .summary-card,
body.editor-skin .channel-card,
body.editor-skin .prompt-card,
body.editor-skin .insight-card {
  background: var(--studio-paper);
  border: 1px solid var(--studio-border-strong);
  border-radius: var(--studio-radius-sm);
}

body.editor-skin .profile-card {
  background: var(--studio-paper);
  border: 1px solid var(--studio-border-strong);
  border-radius: var(--studio-radius-sm);
}

body.editor-skin .profile-card.active {
  border-color: var(--studio-accent);
  background: rgba(19, 78, 74, 0.06);
  box-shadow: 0 0 0 1px rgba(19, 78, 74, 0.12);
}

body.editor-skin .image-card {
  border-color: var(--studio-border-strong);
  border-radius: var(--studio-radius-md);
  background: var(--studio-paper);
  box-shadow: var(--studio-shadow-soft);
}

body.editor-skin .image-card--payload-overflow {
  outline: 2px solid #d97706;
  outline-offset: 2px;
}

body.editor-skin .empty-state {
  color: var(--app-muted);
}

body.editor-skin .validation-item {
  border-color: var(--studio-border-strong);
  background: var(--studio-paper);
  border-radius: var(--studio-radius-sm);
}

body.editor-skin .tags-picker {
  border-color: var(--studio-border-strong);
  background: rgba(255, 255, 255, 0.85);
  border-radius: var(--studio-radius-sm);
}

body.editor-skin .tags-picker.empty-state {
  background: var(--studio-paper);
  border-color: rgba(19, 78, 74, 0.2);
}

body.editor-skin .tag-chip:hover {
  border-color: var(--studio-accent);
  background: var(--studio-accent-soft);
}

body.editor-skin .tag-chip.is-active {
  background: var(--studio-accent);
  border-color: var(--studio-accent-deep);
}

body.editor-skin .tag-chip.is-active:hover {
  background: var(--studio-accent-deep);
  border-color: var(--studio-accent-deep);
}

body.editor-skin .allegro-photo-checklist {
  border-color: var(--studio-border-strong);
  background: var(--studio-paper);
  border-radius: var(--studio-radius-sm);
}

body.editor-skin .pill {
  background: rgba(19, 78, 74, 0.08);
  color: var(--studio-accent-deep);
}

/* AI insights — zieleń zostaje, obramówka bliżej palety studio */
body.editor-skin .insight-title-row {
  background: linear-gradient(180deg, rgba(19, 78, 74, 0.06) 0%, rgba(19, 78, 74, 0.03) 100%);
  border-color: rgba(19, 78, 74, 0.22);
}

body.editor-skin .ai-insights.empty-state {
  background: var(--studio-paper);
  border-color: rgba(19, 78, 74, 0.25);
}

/* Nagłówek: primary = teal (spójnie z resztą aplikacji) */
body.app-skin.editor-skin .header-actions button.primary {
  background: linear-gradient(180deg, var(--studio-accent), var(--studio-accent-deep));
  border-color: rgba(19, 78, 74, 0.95);
  color: #fff;
}

@media (hover: hover) {
  body.app-skin.editor-skin .header-actions button.primary:hover {
    filter: brightness(1.06);
  }
}

body.app-skin.editor-skin .header-actions button.success {
  background: linear-gradient(180deg, #0d9488, var(--studio-accent-deep));
  border-color: var(--studio-accent-deep);
}

/* ── Stanowisko reżysera: ten sam język co panele (bez „kosmosu PREMIUM”) ── */
body.editor-skin .studio-director-chrome {
  background: var(--studio-surface);
  border: 1px solid var(--studio-border-strong);
  border-radius: var(--studio-radius-lg);
  box-shadow: var(--studio-shadow-panel);
}

body.editor-skin .studio-director-chrome::before {
  animation: none;
  height: 3px;
  background: linear-gradient(90deg, var(--studio-accent), var(--studio-warm), var(--studio-accent));
  background-size: 100% 100%;
  opacity: 1;
}

body.editor-skin .studio-director-kicker {
  color: var(--studio-body);
  letter-spacing: 0.14em;
}

body.editor-skin .studio-premium-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  color: var(--studio-accent-deep);
  background: var(--studio-accent-soft);
  border: 1px solid rgba(19, 78, 74, 0.2);
  box-shadow: none;
}

body.editor-skin .studio-director-tagline {
  color: var(--studio-body);
}

body.editor-skin .studio-director-rec {
  background: var(--studio-accent);
  box-shadow: 0 0 0 3px rgba(19, 78, 74, 0.2);
  animation: none;
}

body.editor-skin .studio-collapse-toggle {
  background: var(--studio-paper);
  color: var(--studio-ink);
  border: 1px solid var(--studio-border-strong);
}

body.editor-skin .studio-collapse-toggle:hover {
  background: var(--studio-surface);
  border-color: var(--studio-accent);
  color: var(--studio-accent-deep);
}

body.editor-skin .studio-director-tab-strip {
  background: var(--studio-paper);
  border-top: 1px solid var(--studio-border-strong);
}

body.editor-skin .studio-director-tab {
  color: var(--studio-body);
  border-radius: var(--studio-radius-sm);
}

body.editor-skin .studio-director-tab:hover {
  color: var(--studio-ink);
  background: rgba(255, 255, 255, 0.85);
}

body.editor-skin .studio-director-tab.is-active {
  color: var(--studio-accent-deep);
  background: rgba(19, 78, 74, 0.1);
  border: 1px solid rgba(19, 78, 74, 0.28);
  box-shadow: none;
}

body.editor-skin .studio-expert-stage {
  background: var(--studio-surface);
  border: 1px solid var(--studio-border-strong);
  border-left: 3px solid var(--studio-accent);
  border-radius: var(--studio-radius-md);
  box-shadow: var(--studio-shadow-soft);
  backdrop-filter: none;
}

body.editor-skin .studio-expert-stage h2 {
  color: var(--studio-ink);
  font-family: var(--studio-font-display), var(--studio-font-sans);
  font-weight: 600;
}

body.editor-skin .studio-stage-hint {
  color: var(--studio-body) !important;
}

body.editor-skin .studio-prompt-area,
body.editor-skin .studio-expert-aside textarea {
  background: #fdfdfc;
  border-color: var(--studio-border-strong);
  color: var(--studio-ink);
}

body.editor-skin .studio-stage-action {
  background: linear-gradient(180deg, var(--studio-accent), var(--studio-accent-deep));
  border-color: rgba(19, 78, 74, 0.5);
  box-shadow: 0 4px 12px rgba(19, 78, 74, 0.2);
}

body.editor-skin .studio-stage-action--ghost {
  background: var(--studio-surface);
  color: var(--studio-ink);
  border: 1px solid var(--studio-border-strong);
}

body.editor-skin .studio-stage-action--ghost:hover {
  border-color: var(--studio-accent);
  color: var(--studio-accent-deep);
}

/* Payload: ciemny terminal zostaje czytelny, ale w tonacji teal */
body.editor-skin .studio-expert-aside .studio-terminal-window {
  background: radial-gradient(ellipse 100% 80% at 50% 0%, rgba(19, 78, 74, 0.15), transparent 55%), #0f172a;
  color: #e2e8f0;
  border: 1px solid rgba(19, 78, 74, 0.35);
  box-shadow: inset 0 0 60px rgba(19, 78, 74, 0.08);
}

/* Monitor statusu — jasny, spójny z kartami */
body.editor-skin .studio-signal-monitor {
  color: var(--studio-ink);
  background: linear-gradient(165deg, rgba(19, 78, 74, 0.07) 0%, var(--studio-paper) 100%);
  border: 1px solid rgba(19, 78, 74, 0.18);
  box-shadow: var(--studio-shadow-soft);
}

body.editor-skin .studio-signal-monitor::after {
  opacity: 0.06;
}

body.editor-skin .studio-expert-aside .profile-card {
  background: var(--studio-surface);
  border-color: var(--studio-border-strong);
}

body.editor-skin .studio-expert-aside .profile-card.active {
  border-color: var(--studio-accent);
  box-shadow: 0 0 0 2px rgba(19, 78, 74, 0.12);
}

body.editor-skin .full-ai-config-heading {
  font-family: var(--studio-font-display), var(--studio-font-sans);
  color: var(--studio-ink);
}

/* Kanały w głównej kolumnie — bez ciemnego „klapsu” filmowego */
body.editor-skin .main-rail > .panel {
  border: 1px solid var(--studio-border-strong);
  box-shadow: var(--studio-shadow-soft);
}

@media (hover: hover) {
  body.editor-skin .main-rail > .panel:hover {
    box-shadow: var(--studio-shadow-panel);
    transform: none;
  }
}

body.editor-skin .main-rail .channel-card {
  background: var(--studio-surface);
  border: 1px solid var(--studio-border-strong);
  border-radius: var(--studio-radius-md);
  box-shadow: var(--studio-shadow-soft);
}

body.editor-skin .main-rail .channel-card .channel-head {
  background: linear-gradient(180deg, rgba(19, 78, 74, 0.09) 0%, rgba(19, 78, 74, 0.03) 100%);
  border-bottom: 1px solid var(--studio-border-strong);
}

body.editor-skin .main-rail .channel-card .channel-head h3 {
  color: var(--studio-ink);
  font-family: var(--studio-font-display), var(--studio-font-sans);
}

body.editor-skin .main-rail .channel-card .channel-meta .pill {
  background: var(--studio-accent-soft);
  color: var(--studio-accent-deep);
  border: 1px solid rgba(19, 78, 74, 0.2);
}

body.editor-skin .main-rail .channel-card .inline-actions span,
body.editor-skin .main-rail .channel-card .inline-actions label {
  color: var(--studio-body);
}

body.editor-skin .main-rail .channel-card .channel-head .ghost {
  color: var(--studio-accent-deep);
  background: var(--studio-surface);
  border-color: var(--studio-border-strong);
}

body.editor-skin .main-rail .channel-card .channel-head .ghost:hover {
  background: var(--studio-accent-soft);
  border-color: var(--studio-accent);
  color: var(--studio-accent-deep);
}

/* Prompty / pełna konfiguracja AI — jasne tło zamiast „terminala nocnego” */
body.editor-skin .studio-expert-aside .prompt-card {
  background: var(--studio-paper);
  border: 1px solid var(--studio-border-strong);
  box-shadow: none;
}

body.editor-skin .studio-expert-aside .prompt-card h3 {
  color: var(--studio-ink);
  font-family: var(--studio-font-display), var(--studio-font-sans);
}

body.editor-skin .studio-expert-aside .prompt-card label span {
  color: var(--studio-body);
}

body.editor-skin .studio-expert-aside .prompt-card textarea {
  background: #fdfdfc;
  color: var(--studio-ink);
  border: 1px solid var(--studio-border-strong);
  box-shadow: none;
}

body.editor-skin .studio-expert-aside .prompt-card textarea:focus {
  border-color: var(--studio-accent);
  box-shadow: 0 0 0 3px var(--app-teal-soft);
}

body.editor-skin .studio-expert-aside #channel-prompts.empty-state {
  background: var(--studio-paper);
  color: var(--studio-body);
  border: 1px dashed rgba(19, 78, 74, 0.3);
}

body.editor-skin .studio-expert-aside .studio-prompt-area {
  background: #fdfdfc;
  color: var(--studio-ink);
  border: 1px solid var(--studio-border-strong);
  box-shadow: none;
}

body.editor-skin .studio-expert-aside .studio-prompt-area:focus {
  border-color: var(--studio-accent);
  box-shadow: 0 0 0 3px var(--app-teal-soft);
}

body.editor-skin .studio-expert-aside #expert-page-prompts label[for="system-prompt"] {
  color: var(--studio-ink);
}

body.editor-skin .full-ai-config-panel {
  border-top: 1px solid var(--studio-border-strong);
}

body.editor-skin .full-ai-config-lead code {
  color: var(--studio-accent-deep);
}

body.editor-skin .full-ai-config-toolbar select#ai-config-snapshot-select {
  background: var(--studio-surface);
  color: var(--studio-ink);
  border: 1px solid var(--studio-border-strong);
}

body.editor-skin .full-ai-config-toolbar .toolbar-sep {
  background: var(--studio-border-strong);
}

body.editor-skin .full-ai-config-json-label span {
  color: var(--studio-body);
}

body.editor-skin .full-editor-config-json {
  background: #fdfdfc;
  color: var(--studio-ink);
}

/* Separator kolumn — stonowany teal / złoto */
@media (min-width: 1101px) {
  body.editor-skin .editor-split-spine {
    background: linear-gradient(
      180deg,
      transparent,
      rgba(19, 78, 74, 0.4) 45%,
      rgba(139, 115, 85, 0.32) 55%,
      transparent
    );
    box-shadow: 0 0 20px rgba(19, 78, 74, 0.1);
  }
}

@media (max-width: 1100px) {
  body.editor-skin .editor-split-spine {
    background: linear-gradient(
      90deg,
      transparent,
      rgba(19, 78, 74, 0.45),
      rgba(139, 115, 85, 0.35),
      rgba(19, 78, 74, 0.45),
      transparent
    );
  }
}

/* Mobile: ten sam gradient strony co desktop (editor.css wklejał szary slate) */
@media (max-width: 760px) {
  body.app-skin.editor-skin {
    background: var(--app-page-bg);
  }

  body.editor-skin .page-header.editor-hero {
    background: rgba(255, 255, 255, 0.88);
    border-bottom: 1px solid var(--studio-border-strong);
  }
}