/* Werkstatt styles (plan §19.2.9). Class prefix k-workshop- / k-ws-. Uses the app tokens from style.css (dark-only app). */

.k-workshop-head { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 12px; }
.k-workshop-head h2 { font-size: 1.25rem; margin: 0; }
.k-workshop-new, .k-workshop-start {
  background: var(--accent); color: #fff; border: 0; border-radius: 10px;
  padding: 10px 14px; font-size: 0.95rem; font-weight: 600; cursor: pointer; touch-action: manipulation;
}
.k-workshop-empty { color: var(--text-dim); padding: 24px 8px; text-align: center; }

.k-workshop-list { display: flex; flex-direction: column; gap: 8px; }
.k-workshop-item {
  text-align: left; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px; cursor: pointer; width: 100%; touch-action: manipulation; color: var(--text); font: inherit;
}
.k-workshop-item-title { font-weight: 600; margin-bottom: 4px; }
.k-workshop-item-meta { font-size: 0.8rem; color: var(--text-dim); }
.k-workshop-item-prev { font-size: 0.82rem; color: var(--text-dim); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-workshop-state { font-weight: 600; }
.k-workshop-state.k-running { color: #1a7f37; }
.k-workshop-state.k-waiting { color: #b35900; }
.k-workshop-state.k-error { color: #cf222e; }

.k-workshop-newform { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.k-workshop-newform label { font-size: 0.8rem; color: var(--text-dim); margin-top: 4px; }
.k-workshop-newform select, .k-workshop-newform textarea, .k-workshop-newform input[type=text] {
  width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px;
  padding: 8px; font: inherit; background: var(--bg); color: inherit;
}
.k-workshop-hint { font-size: 0.78rem; color: #b35900; }

/* Session view */
.k-workshop-view { display: flex; flex-direction: column; height: 100%; gap: 8px; }
.k-workshop-transcript { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 8px 2px; }
.k-ws-msg { padding: 10px 12px; border-radius: 12px; max-width: 92%; white-space: pre-wrap; word-break: break-word; }
.k-ws-user { align-self: flex-end; background: var(--accent); color: #fff; }
.k-ws-assistant { align-self: flex-start; background: var(--surface); color: var(--text); }
.k-ws-notice { align-self: center; font-size: 0.82rem; color: var(--text-dim); font-style: italic; }
.k-ws-tool { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; background: var(--surface); border-left: 3px solid var(--border); border-radius: 6px; padding: 6px 8px; cursor: pointer; }
.k-ws-tool.ok { border-left-color: #1a7f37; }
.k-ws-tool.err { border-left-color: #cf222e; }
.k-ws-tool-head span { color: var(--text-dim); }
.k-ws-tool-out { display: none; margin: 6px 0 0; white-space: pre-wrap; max-height: 240px; overflow: auto; }
.k-ws-tool.open .k-ws-tool-out { display: block; }

.k-workshop-approvals { display: flex; flex-direction: column; gap: 8px; }
.k-ws-approval { border: 2px solid #b35900; border-radius: 12px; padding: 12px; background: var(--bg); }
.k-ws-approval-reason { font-weight: 700; color: #b35900; font-size: 0.85rem; }
.k-ws-approval-summary { font-family: ui-monospace, Menlo, monospace; margin: 6px 0; word-break: break-all; }
.k-ws-approval-detail { white-space: pre-wrap; max-height: 200px; overflow: auto; font-size: 0.78rem; background: var(--surface); border-radius: 6px; padding: 6px; }
.k-ws-approval-note { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; padding: 6px; font: inherit; background: var(--bg); color: var(--text); }
.k-ws-approval-btns { display: flex; gap: 8px; margin-top: 8px; }
.k-ws-approval-btns button { flex: 1; padding: 10px; border-radius: 10px; border: 0; font-weight: 600; cursor: pointer; }
.k-ws-approval-btns .deny { background: var(--surface-2); color: var(--text); }
.k-ws-approval-btns .allow { background: #1a7f37; color: #fff; }

.k-workshop-status { font-size: 0.82rem; color: var(--text-dim); min-height: 1.1em; }
.k-workshop-status.k-waiting { color: #b35900; font-weight: 600; }
.k-workshop-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.k-workshop-allowall { font-size: 0.85rem; display: flex; align-items: center; gap: 6px; }
.k-workshop-stop { background: #cf222e; color: #fff; border: 0; border-radius: 10px; padding: 8px 16px; font-weight: 600; cursor: pointer; }

.k-workshop-composer { display: flex; gap: 8px; padding-bottom: env(safe-area-inset-bottom); }
.k-workshop-composer textarea { flex: 1; border: 1px solid var(--border); border-radius: 10px; padding: 10px; font: inherit; resize: none; background: var(--bg); color: inherit; }
.k-workshop-composer button { background: var(--accent); color: #fff; border: 0; border-radius: 10px; padding: 0 18px; font-weight: 600; cursor: pointer; }

/* Kompass chat card */
.k-ws-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.k-ws-card-title { font-weight: 600; }
.k-ws-card-dir { font-size: 0.8rem; color: var(--text-dim); margin: 2px 0 6px; }
.k-ws-card-prompt { white-space: pre-wrap; background: var(--surface); border-radius: 8px; padding: 8px; font-size: 0.85rem; max-height: 160px; overflow: auto; }
.k-ws-card-btns { display: flex; gap: 8px; margin-top: 8px; }
.k-ws-card-btns button { flex: 1; padding: 10px; border-radius: 10px; border: 0; font-weight: 600; cursor: pointer; }
.k-ws-card-btns .cancel { background: var(--surface-2); color: var(--text); }
.k-ws-card-btns .go { background: var(--accent); color: #fff; }

/* Text fields: body sets user-select:none; iOS needs text selection and >= 16px to type without zooming. */
.k-workshop-newform textarea, .k-workshop-newform select, .k-workshop-newform input[type=text], .k-workshop-composer textarea, .k-ws-approval-note {
  -webkit-user-select: text; user-select: text; font-size: 16px; color: var(--text);
}

.k-ws-info { font-size: 13px; color: var(--text-dim); padding: 4px 2px 8px; }
.k-workshop-newdir[hidden] { display: none; }
