/* ===== Skill Code-Browser (canvas artifact) ===== */
/* Rendered inside .acl-canvas-body by skill-canvas.js. Reuses the canvas design
   tokens (--md-*) so it sits naturally beside the data-card artifacts. */

.skc-root { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 10px; }

/* File tabs (top strip) — a SINGLE horizontal row that scrolls sideways when the
   tabs overflow, like VS Code editor tabs. Flat, underline-active (matching the
   chat topic tabs .acl-topic-tab), with vertical dividers between tabs and a
   leading amber dot for files with edits. */
.skc-files {
  display: flex; flex-wrap: nowrap; gap: 0; flex: 0 0 auto;
  overflow-x: auto; overflow-y: hidden;
  border-bottom: 1px solid var(--md-surface-2);
  scrollbar-width: thin;
}
.skc-files::-webkit-scrollbar { height: 6px; }
.skc-files::-webkit-scrollbar-thumb { background: var(--md-surface-3); border-radius: 3px; }
.skc-files::-webkit-scrollbar-track { background: transparent; }
.skc-file {
  display: inline-flex; align-items: center; gap: 6px; position: relative;
  flex: 0 0 auto;                 /* keep natural width → overflow scrolls, never shrinks */
  border: none; background: transparent; border-radius: 0;
  font: inherit; font-size: 12px; color: var(--md-on-surface-variant);
  padding: 7px 12px; white-space: nowrap; cursor: pointer; user-select: none;
  transition: color .15s, background .15s;
}
.skc-file + .skc-file { border-left: 1px solid var(--md-surface-2); }
.skc-file:hover { color: var(--md-on-surface); background: var(--md-surface-1); }
.skc-file.active { color: var(--md-on-surface); font-weight: 500; }
.skc-file::after {
  content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px;
  border-radius: 2px 2px 0 0; background: transparent;
  transition: background .2s cubic-bezier(.2, 0, 0, 1);
}
.skc-file.active::after { background: var(--md-primary); }
.skc-file.changed::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
  background: var(--md-warning);
}

/* Code view — monospace, scrollable, fills remaining height. */
.skc-view {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  background: var(--md-surface-1); border: 1px solid var(--md-surface-3);
  border-radius: var(--radius-sm);
}
.skc-code {
  font-family: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 12.5px; line-height: 1.55; padding: 8px 0; min-width: max-content;
}
.skc-line { display: flex; align-items: flex-start; padding: 0 12px; white-space: pre; }
.skc-ln {
  flex: 0 0 auto; width: 34px; margin-right: 12px; text-align: right;
  color: var(--md-on-surface-variant); opacity: .55;
  font-variant-numeric: tabular-nums; user-select: none;
}
.skc-tx { flex: 1 1 auto; }
.skc-line--add { background: color-mix(in srgb, var(--md-success) 16%, transparent); }
.skc-line--add .skc-ln { color: var(--md-success); opacity: .9; }
.skc-line--del { background: color-mix(in srgb, var(--md-error) 14%, transparent); opacity: .7; }
.skc-line--del .skc-tx { text-decoration: line-through; }

/* Typewriter caret on the line currently being written. */
.skc-cursor-line .skc-tx::after {
  content: ''; display: inline-block; width: 7px; height: 1.05em; margin-left: 1px;
  vertical-align: text-bottom; background: var(--md-primary);
  animation: skc-blink 1s steps(1) infinite;
}
@keyframes skc-blink { 50% { opacity: 0; } }

/* Freshly-typed lines pulse briefly (only while actively typing, never on a full
   diff re-render — that would flash the whole file). */
.skc-code.skc-typing .skc-line { animation: skc-pulse .5s ease-out; }
@keyframes skc-pulse { from { background-color: color-mix(in srgb, var(--md-primary) 12%, transparent); } }

/* Footer — holds the publish buttons (reused .acl-publish-skill markup). */
.skc-foot { flex: 0 0 auto; border-top: 1px solid var(--md-surface-2); padding-top: 10px; }
.skc-nochange, .skc-empty, .skc-done {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; color: var(--md-on-surface-variant); padding: 14px 8px;
}
.skc-empty { min-height: 80px; }
.skc-done { color: var(--md-success, #1a7f37); font-weight: 600; }