/* Workspace step 1 «Einfügen» (#wsInput → adopted #tab-anonymize) in the step-2
   language: header 64 px (19/600 + meta 13 ink3 + segmented), paper-card textarea
   (15/29), footer 68 px (kbd hint + primary «Prüfen ⌘↵»). Built by workspace/input.js.
   Table-mode parts: table.css. Colours only via tokens.css. Spec: handoff README §1b. */

.ws-input { padding: 0; overflow: hidden; }
.ws #tableMode { display: none; }   /* legacy Text/Tabelle buttons: the header segmented drives them */

/* ── header ── */
#tab-anonymize .ws-in-head {
  height: 64px; flex: none; display: flex; align-items: center; gap: var(--lysi-s-14);
  padding: 0 var(--lysi-s-28); color: var(--lysi-ink);
}
.ws-in-title { margin: 0; font-size: var(--lysi-fs-19); font-weight: 600; letter-spacing: -0.01em; color: var(--lysi-ink); }
.ws-in-meta { font-size: var(--lysi-fs-13); color: var(--lysi-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-in-seg { margin-left: auto; flex: none; }

/* ── text path: the paper card ── */
#tab-anonymize .ws-input-text {
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--lysi-s-10);
  padding: 0 var(--lysi-s-28); position: relative;
}
#tab-table-inner:not([hidden]) ~ :is(.ws-input-text, .ws-in-foot) { display: none; }
#tab-anonymize #inputText {
  flex: 1; min-height: 0; max-height: none; height: auto; width: 100%; resize: none; outline: none;
  background: var(--lysi-paper); color: var(--lysi-paper-ink); border: 1px solid var(--lysi-paper-border);
  border-radius: var(--lysi-r-10); padding: var(--lysi-s-32) var(--lysi-s-52); box-shadow: none;
  font: 15px/29px var(--lysi-font-sans); transition: border-color .15s;
}
#tab-anonymize #inputText:focus { border-color: var(--lysi-ghost); }
#tab-anonymize #inputText::placeholder { color: var(--lysi-ink3); font-size: var(--lysi-fs-15); }

/* scan progress: thin accent sweep on the card's top edge */
#tab-anonymize .scan-progress {
  position: absolute; top: 1px; left: calc(var(--lysi-s-28) + 10px); right: calc(var(--lysi-s-28) + 10px);
  height: 0; z-index: 1; overflow: hidden; pointer-events: none;
}
#tab-anonymize .scan-progress.scanning { height: 2px; }
#tab-anonymize .scan-progress.scanning::after { background: linear-gradient(90deg, transparent, var(--lysi-accent), transparent); }
/* model loading: thin pulsing accent bar + ink3 caption above the card */
#tab-anonymize .model-loading-bar { flex-direction: row; align-items: center; gap: var(--lysi-s-10); padding: 0; flex: none; }
#tab-anonymize .model-loading-progress { flex: 1; height: 2px; border-radius: 1px; background: var(--lysi-accent); }
#tab-anonymize #modelLoadingText { font-size: var(--lysi-fs-12); color: var(--lysi-ink3); white-space: nowrap; }
[data-theme="light"] #tab-anonymize #modelLoadingText { color: var(--lysi-ink3) !important; /* override: popup.css light-theme span rule */ }
#tab-anonymize .scan-fallback-btn {
  align-self: flex-start; margin: 0; background: transparent; color: var(--lysi-accent-text);
  border: 1px solid var(--lysi-ghost); border-radius: var(--lysi-r-6); padding: var(--lysi-s-4) var(--lysi-s-10);
}

/* ── footer ── */
#tab-anonymize .ws-in-foot {
  height: 68px; flex: none; display: flex; align-items: center; gap: var(--lysi-s-12);
  padding: 0 var(--lysi-s-28); font-size: var(--lysi-fs-13-5); color: var(--lysi-ink3);
}
.ws-in-hint { font-size: var(--lysi-fs-13-5); color: var(--lysi-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ws-in-hint kbd { font-size: var(--lysi-fs-12); }
#tab-anonymize #scanBtn {
  margin: 0 0 0 auto; width: auto; flex: none; display: inline-flex; align-items: center; gap: var(--lysi-s-10);
  background: var(--lysi-accent); color: var(--lysi-on-accent); border: 0; box-shadow: none;
  padding: var(--lysi-s-10) var(--lysi-s-18); border-radius: var(--lysi-r-8);
  font: 600 14px var(--lysi-font-sans); white-space: nowrap; cursor: pointer; transition: opacity .15s;
}
/* popup.js owns textContent («Sensible Daten erkennen» / «Erkenne…»): idle label from data-label */
#tab-anonymize #scanBtn[data-label]:not(:disabled) { font-size: 0; }
#tab-anonymize #scanBtn[data-label]:not(:disabled)::before { content: attr(data-label); font-size: var(--lysi-fs-14); }
#tab-anonymize #scanBtn[data-label]:not(:disabled)::after {
  content: attr(data-kbd); font: 11px var(--lysi-font-mono); opacity: .75;
}
#tab-anonymize #scanBtn:hover:not(:disabled) { background: var(--lysi-accent); opacity: .92; }
#tab-anonymize #scanBtn:disabled { background: var(--lysi-disabled); color: var(--lysi-disabled-ink); cursor: default; }

/* ── loader: the Lysi logo «scan» (owner 2026-10-02, loader-scan.html) over the card
   while the model loads or a scan runs; replaces the thin bar + sweep ── */
#tab-anonymize .scan-progress.scanning::after, #tab-anonymize .model-loading-progress { display: none; }
.lysi-loader { display: none; }
#tab-anonymize .ws-input-text:is(:has(.scan-progress.scanning), :has(.model-loading-bar:not([hidden]))) .lysi-loader {
  display: flex; position: absolute; inset: 0 var(--lysi-s-28); z-index: 2; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--lysi-paper) 82%, transparent); border-radius: var(--lysi-r-10);
}
.lysi-loader-logo { width: 120px; aspect-ratio: 254 / 93; position: relative; }
.lysi-loader-logo i { position: absolute; height: 18.2%; border-radius: 1.5px; background: var(--lysi-paper-ink); }
.lysi-loader-logo i:nth-child(1) { left: 0; top: 0; width: 41.6%; }
.lysi-loader-logo i:nth-child(2), .lysi-loader-logo i.seg { left: 48.3%; top: 0; width: 30%; }
.lysi-loader-logo i.seg { background: var(--lysi-doc); animation: lysi-ld-seg 2.4s linear infinite both; }
.lysi-loader-logo i:nth-child(4) { left: 0; top: 40.9%; width: 100%; }
.lysi-loader-logo i:nth-child(5) { left: 0; top: 81.8%; width: 31.6%; }
.lysi-loader-logo i.line {
  top: -25%; width: 2px; height: 150%; margin-left: -1px; border-radius: 1px; background: var(--lysi-doc);
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--lysi-doc) 55%, transparent); animation: lysi-ld-line 2.4s linear infinite both;
}
@keyframes lysi-ld-line { 0% { left: 0; } 50% { left: 100%; } 100% { left: 0; } }
@keyframes lysi-ld-seg {
  0%, 24.17% { clip-path: inset(0 100% 0 0); } 39.17%, 60.83% { clip-path: inset(0 0 0 0); } 75.83%, 100% { clip-path: inset(0 100% 0 0); }
}
@media (prefers-reduced-motion: reduce) { .lysi-loader-logo i.line { display: none; } .lysi-loader-logo i.seg { animation: none; } }
