/* Streamz Social Studio — Social Copy-component.
   Feature-CSS voor SSSSocialCopy (shared/socialcopy.js), geladen door zowel
   /socialcopy/ als de Branding-modal. Generieke primitieven (.btn, .segmented,
   .char-count, .progress-bar) komen uit shell.css.

   Alles hangt onder .sco-root. De compacte variant (.is-compact) is de
   modal-layout: die stapelt wat de paginalayout naast elkaar zet.
   LET OP: dat onderscheid mag NIET via een media query — die meet de viewport,
   niet de modal, dus op een breed scherm zou de tweekolomsvariant in een
   640px-modal blijven staan en breken. */

.sco-root { display: flex; flex-direction: column; gap: 16px; }
.sco-root.is-compact { gap: 0; }

/* In de paginalayout krijgt elk blok ook .section (kaart + genummerde badge).
   In de modal zijn het gewone blokken met een scheidingslijn. */
.sco-block-plain { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px; }
.sco-block-plain:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.sco-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sco-head h2 { margin: 0; }

/* --- Contextblok --- */
.sco-note { font-size: 11.5px; color: var(--accent); line-height: 1.4; margin: -2px 0 10px; }
/* De gap regelt de tussenruimte, dus de .field-marge eruit — anders staat er
   binnenin 22px en onder de laatste rij niets. */
.sco-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; margin-bottom: 12px; }
.sco-grid .field { margin-bottom: 0; }
.sco-root.is-compact .sco-grid { grid-template-columns: 1fr; }
.sco-inline { display: flex; align-items: center; gap: 8px; }
.sco-inline label { margin: 0; font-size: 13px; color: var(--text); }
.sco-sub { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.4; }

/* Context gewijzigd ná de eerste generatie — de conversatie draait nog op de
   oude context, dus dat moet zichtbaar zijn i.p.v. stil meegestuurd te worden. */
.sco-dirty { display: none; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--text); background: var(--accent-light); border: 1px solid var(--accent); border-radius: 6px; padding: 8px 10px; margin-top: 12px; }
.sco-dirty.on { display: flex; }

/* --- Actieblok --- */
.sco-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sco-steps { display: flex; gap: 6px; flex-wrap: wrap; font-size: 11px; margin-top: 8px; }
.sco-step { padding: 2px 8px; border-radius: 99px; background: var(--track-bg); color: var(--muted); }
.sco-step.active { background: var(--accent); color: #fff; }
.sco-step.done { background: #d1fae5; color: #059669; }
:root[data-theme="dark"] .sco-step.done { background: #06301f; color: #6ee7b7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sco-step.done { background: #06301f; color: #6ee7b7; } }

/* --- Stap 1: de drie insteken --- */
.sco-insteken { display: flex; flex-direction: column; gap: 12px; }
.sco-insteek { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.sco-insteek.is-chosen { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-light); }
.sco-insteek-label { font-size: 12px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .02em; }
.sco-insteek-pitch { font-size: 13px; line-height: 1.5; color: var(--text); }
.sco-insteek-vb { font-size: 12.5px; line-height: 1.5; color: var(--muted); border-left: 2px solid var(--border); padding-left: 10px; white-space: pre-wrap; word-wrap: break-word; }
.sco-insteek-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 2px; }

/* --- Stap 2/3: de uitwerkingen --- */
.sco-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.sco-chosen { font-size: 12px; color: var(--muted); }
.sco-chosen strong { color: var(--accent); font-weight: 600; }
.sco-versions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.sco-versions-lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.sco-wijziging { font-size: 12px; color: var(--muted); font-style: italic; line-height: 1.45; margin-bottom: 12px; }

.sco-cards { display: flex; flex-direction: column; gap: 14px; }
.sco-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.sco-card-head { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--input-bg); border-bottom: 1px solid var(--border); }
.sco-card-num { font-size: 12px; font-weight: 600; color: var(--text); }

.sco-uitwerking { display: grid; grid-template-columns: 1fr 1fr; }
.sco-root.is-compact .sco-uitwerking { grid-template-columns: 1fr; }
.sco-ver { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sco-ver + .sco-ver { border-left: 1px solid var(--border); }
.sco-root.is-compact .sco-ver + .sco-ver { border-left: none; border-top: 1px solid var(--border); }
.sco-ver-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.sco-text { font-size: 13px; line-height: 1.5; color: var(--text); white-space: pre-wrap; word-wrap: break-word; flex: 1; }
.sco-ver-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* --- Verfijnen --- */
.sco-refine { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 14px; }
.sco-refine-hist { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sco-refine-tag { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: var(--track-bg); color: var(--muted); }
.sco-refine-row { display: flex; gap: 8px; align-items: flex-start; }
.sco-refine-row textarea { flex: 1; min-width: 0; }
.sco-root.is-compact .sco-refine-row { flex-direction: column; }
.sco-root.is-compact .sco-refine-row textarea { width: 100%; }

.sco-empty { padding: 26px 14px; text-align: center; color: var(--muted); font-size: 13px; font-style: italic; line-height: 1.5; }
.sco-root.is-compact .sco-empty { padding: 18px 10px; }

/* Mobiele fallback, uitsluitend voor de paginalayout — de modal regelt het
   stapelen al via .is-compact en mag hier niet nog eens door geraakt worden. */
@media (max-width: 620px) {
  .sco-root:not(.is-compact) .sco-grid { grid-template-columns: 1fr; }
  .sco-root:not(.is-compact) .sco-uitwerking { grid-template-columns: 1fr; }
  .sco-root:not(.is-compact) .sco-ver + .sco-ver { border-left: none; border-top: 1px solid var(--border); }
  .sco-root:not(.is-compact) .sco-refine-row { flex-direction: column; }
  .sco-root:not(.is-compact) .sco-refine-row textarea { width: 100%; }
}