/* Workstation — 3-panel editor ========================================== */

.project-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--text-sm);
}
.project-chip-id { font-family: var(--font-mono); font-size: 12px; color: var(--fg); }

/* Editor toolbar ======================================================== */
.ws-toolbar {
  height: 56px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  padding: 0 var(--space-5);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
}
.ws-doc-title { display: flex; align-items: center; gap: 6px; }
.ws-doc-title input {
  border: 0; outline: 0;
  font-size: var(--text-md); font-weight: 600;
  background: transparent;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  min-width: 280px;
}
.ws-doc-title input:hover { background: color-mix(in oklab, var(--fg), transparent 95%); }
.ws-doc-title input:focus { background: var(--surface); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent), transparent 80%); }
.ws-doc-meta { display: flex; align-items: center; gap: 8px; margin-left: 8px; font-size: var(--text-sm); }
.ws-toolbar-r { display: flex; align-items: center; gap: 6px; }
.ws-divider { width: 1px; height: 16px; background: var(--border); }

/* Workstation layout ==================================================== */
.ws {
  display: grid;
  grid-template-columns: 260px 1fr 360px;
  height: calc(100vh - var(--topnav-h) - 56px);
  background: var(--bg);
}

/* Left — thumbnails =================================================== */
.ws-left {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.ws-left-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.ws-left-title { font-size: var(--text-sm); color: var(--muted); }
.ws-left-title strong { color: var(--fg); font-weight: 600; margin-left: 4px; }
.ws-thumbs {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: grid;
  gap: 8px;
}
.thumb {
  display: grid;
  grid-template-rows: auto 64px auto;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-standard);
}
.thumb:hover { border-color: #cfcfcf; }
.thumb.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.thumb-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.thumb-canvas {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  height: 64px;
}
.thumb-bar {
  display: block;
  height: 4px;
  background: color-mix(in oklab, var(--fg), transparent 80%);
  border-radius: 2px;
  width: 80%;
}
.thumb-bar.short { width: 50%; }
.thumb-bar-title { background: color-mix(in oklab, var(--fg), transparent 50%); width: 60%; height: 6px; }
.thumb-title {
  font-size: var(--text-xs);
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Center — canvas ======================================================= */
.ws-canvas {
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}
.ws-canvas-toolbar {
  height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  display: flex; align-items: center; justify-content: space-between;
}
.cv-tab {
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 500;
}
.cv-tab:hover { color: var(--fg); }
.cv-tab.is-active { background: color-mix(in oklab, var(--fg), transparent 92%); color: var(--fg); }

.ws-canvas-stage {
  display: grid;
  place-items: center;
  padding: 32px;
  overflow: auto;
  background:
    radial-gradient(800px 400px at 50% 50%, color-mix(in oklab, var(--surface), white 50%), transparent 70%);
}
.slide-frame {
  width: min(960px, 100%);
  aspect-ratio: 16 / 9;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-raised);
  overflow: hidden;
}
.slide-canvas {
  height: 100%;
  padding: 48px 56px;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 18px;
}
.slide-head { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--font-mono); }
.slide-title { font-size: clamp(22px, 3.2vw, 38px); margin: 0; font-weight: 600; letter-spacing: -0.01em; }
.slide-rule { height: 1px; background: var(--border); margin-top: 4px; }
.slide-body p { margin: 0 0 14px; font-size: var(--text-lg); line-height: 1.55; }
.slide-list { padding-left: 22px; margin: 0 0 16px; }
.slide-list li { margin-bottom: 8px; line-height: 1.6; font-size: var(--text-lg); }
.slide-callout {
  background: color-mix(in oklab, var(--accent), white 92%);
  border: 1px solid color-mix(in oklab, var(--accent), white 70%);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  display: grid; gap: 4px;
}
.slide-callout strong { font-weight: 600; color: var(--accent); }
.slide-callout span { color: var(--fg); }
.slide-foot { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--muted); }
.slide-foot-meta { font-family: var(--font-mono); }

/* Validation dock ======================================================= */
.ws-validation {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 14px 20px;
  display: grid;
  gap: 10px;
}
.ws-validation.is-collapsed .wv-list { display: none; }
.wv-head { display: flex; justify-content: space-between; align-items: center; }
.wv-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.wv-list li { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); color: var(--fg); }
.wv-icon {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.wv-icon.ok { background: var(--success-bg); color: var(--success); }
.wv-icon.warn { background: var(--warn-bg); color: #b08300; }
.wv-icon.info { background: color-mix(in oklab, var(--accent), white 90%); color: var(--accent); }

/* Right — AI panel ======================================================= */
.ws-right {
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.ws-right-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.ai-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent), transparent 80%);
}
.ai-input { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.ai-input textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--bg);
  resize: vertical;
  min-height: 70px;
  font-size: var(--text-sm);
  line-height: 1.5;
}
.ai-input textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 80%); }
.ai-input-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 8px; flex-wrap: wrap; }
.chip {
  background: color-mix(in oklab, var(--fg), transparent 92%);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: var(--text-xs);
  color: var(--fg);
  cursor: pointer;
}
.chip:hover { background: color-mix(in oklab, var(--fg), transparent 86%); }
.select-mini {
  height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 24px 0 8px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%236b6b6b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") right 8px center / 8px no-repeat var(--surface);
  appearance: none;
  font-size: var(--text-xs);
}

.ai-task { padding: 12px 16px; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--accent), white 95%); }
.ai-task-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ai-plan { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ai-plan li { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--muted); }
.ai-plan li .dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface);
}
.ai-plan li.done .dot { border-color: var(--success); background: var(--success); }
.ai-plan li.done { color: var(--fg); }
.ai-plan li.active .dot { border-color: var(--accent); background: color-mix(in oklab, var(--accent), white 70%); animation: pulse 1s infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent), transparent 60%); }
  50% { box-shadow: 0 0 0 6px transparent; }
}

.ai-diff { padding: 14px 16px; border-bottom: 1px solid var(--border); overflow-y: auto; flex-shrink: 0; max-height: 340px; }
.ai-diff-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.diff-block { display: grid; gap: 8px; }
.diff-add, .diff-rem, .diff-mod {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
}
.diff-add { border-left: 3px solid var(--success); }
.diff-rem { border-left: 3px solid var(--danger); opacity: 0.85; }
.diff-mod { border-left: 3px solid var(--warn); }
.diff-marker {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 16px;
  color: var(--muted);
}
.diff-add .diff-marker { color: var(--success); }
.diff-rem .diff-marker { color: var(--danger); }
.diff-mod .diff-marker { color: var(--warn); }
.diff-block strong { display: block; font-weight: 600; margin-bottom: 2px; }
.diff-block p { margin: 0; font-size: var(--text-sm); color: var(--muted); }
.ai-diff-foot { display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; }

.ai-history { padding: 12px 16px; overflow-y: auto; flex: 1; }
.ai-history-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.ai-history-list li {
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: 10px;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.ai-history-list li:hover { background: color-mix(in oklab, var(--fg), transparent 95%); }
.ai-history-list .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: var(--muted); }
.ai-history-list .dot.blue { background: var(--accent); }
.ai-history-list .dot.green { background: var(--success); }
.ai-history-list .dot.red { background: var(--danger); }
.ai-history-list strong { font-weight: 500; font-size: var(--text-sm); display: block; margin-bottom: 2px; }
.ai-history-list p { margin: 0; }

.modal-list { margin: 0; padding-left: 20px; }
.modal-list li { margin: 4px 0; font-size: var(--text-sm); color: var(--fg); }

/* Responsive ============================================================ */
@media (max-width: 1100px) {
  .ws { grid-template-columns: 220px 1fr 320px; }
}
@media (max-width: 920px) {
  .ws { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .ws-left { display: none; }
  .ws-right { border-left: 0; border-top: 1px solid var(--border); }
}