/* ── Dev workspace panel ─────────────────────────────── */
.ws-mono { font-family: "Cascadia Code", "Fira Code", "JetBrains Mono", ui-monospace, Consolas, monospace; }
.ws-code { background: oklch(0.193 0.016 44); color: #d3c8b4; }
.ws-code .hljs { background: transparent; color: #d3c8b4; }
.ws-code::-webkit-scrollbar { width: 8px; height: 8px; }
.ws-code::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; }
.ws-code::-webkit-scrollbar-track { background: transparent; }
.ws-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.ws-scroll::-webkit-scrollbar-thumb { background: var(--h-hair-soft); border-radius: 4px; }
.ws-scroll::-webkit-scrollbar-track { background: transparent; }

#workspace-panel {
  display: none;
  flex-direction: row;
  width: var(--ws-panel-width, 560px);
  min-width: 280px;
  max-width: 70%;
  overflow: hidden;
}
#workspace-panel.open { display: flex; }

#ws-drag-handle {
  width: 7px;
  flex: 0 0 auto;
  cursor: col-resize;
  position: relative;
  background: var(--h-bg);
  border-left: 1px solid var(--h-hairline);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ws-grip {
  display: flex;
  flex-direction: column;
  gap: 3px;
  opacity: .5;
  transition: opacity .12s;
}
#ws-drag-handle:hover .ws-grip, #ws-drag-handle.dragging .ws-grip { opacity: 1; }
.ws-grip-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--h-ink-faint);
}

#ws-panel-body {
  flex: 1;
  min-width: 0;
  background: var(--h-bg);
  display: flex;
  flex-direction: column;
}

/* ── Tab bar ───────────────────────────────────── */
.ws-tab-bar {
  display: flex;
  align-items: stretch;
  height: 42px;
  flex: 0 0 auto;
  background: var(--h-header-bg);
  border-bottom: 1px solid var(--h-hairline);
}
.ws-pin-tab {
  position: relative;
  width: 40px;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--h-ink-mute);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s;
}
.ws-pin-tab:hover { color: var(--h-ink); }
.ws-pin-tab.active { background: var(--h-bg); color: var(--h-ink); }
.ws-pin-tab .ws-tab-indicator {
  position: absolute;
  left: 8px; right: 8px; bottom: 0;
  height: 2px; background: var(--h-ink); border-radius: 2px;
  display: none;
}
.ws-pin-tab.active .ws-tab-indicator { display: block; }

.ws-git-badge {
  position: absolute;
  top: 5px; right: 4px;
  min-width: 14px; height: 14px;
  border-radius: 7px;
  background: #d39749;
  color: #fff;
  font-family: var(--h-sans);
  font-size: 9px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

.ws-tab-divider { width: 1px; background: var(--h-hair-soft); margin: 8px 4px; }

.ws-tab-list {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  flex: 1;
}
.ws-file-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 12px;
  cursor: pointer;
  max-width: 180px;
  flex: 0 0 auto;
  background: transparent;
  border: none;
  border-right: 1px solid var(--h-hair-soft);
  transition: background .12s;
}
.ws-file-tab:hover { background: color-mix(in srgb, var(--h-surface) 50%, transparent); }
.ws-file-tab.active { background: var(--h-bg); }
.ws-file-tab .ws-tab-indicator {
  position: absolute;
  left: 10px; right: 10px; bottom: 0;
  height: 2px; background: var(--h-ink); border-radius: 2px;
  display: none;
}
.ws-file-tab.active .ws-tab-indicator { display: block; }
.ws-file-tab-name {
  font-family: var(--h-sans);
  font-size: 12px;
  color: var(--h-ink-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-file-tab.active .ws-file-tab-name { color: var(--h-ink); }
.ws-file-tab-close {
  opacity: 0;
  transition: opacity .12s;
  color: var(--h-ink-mute);
  display: inline-flex;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.ws-file-tab:hover .ws-file-tab-close,
.ws-file-tab.active .ws-file-tab-close { opacity: .7; }
.ws-file-tab-close:hover { opacity: 1 !important; }

.ws-tab-close-panel {
  flex: 0 0 auto;
  width: 38px;
  border: none;
  background: transparent;
  color: var(--h-ink-mute);
  cursor: pointer;
  border-left: 1px solid var(--h-hair-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .12s;
}
.ws-tab-close-panel:hover { color: var(--h-ink); }

/* ── File glyph ───────────────────────────────── */
.ws-file-glyph {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: .02em;
}

/* ── Panel toolbar ────────────────────────────── */
.ws-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 8px 12px;
  border-bottom: 1px solid var(--h-hair-soft);
  background: var(--h-bg);
}
.ws-breadcrumb {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}
.ws-crumb {
  font-family: var(--h-sans);
  font-size: 11px;
  white-space: nowrap;
  color: var(--h-ink-faint);
}
.ws-crumb:last-child { color: var(--h-ink-mute); }
.ws-crumb-sep { color: var(--h-ink-faint); font-size: 11px; }

/* ── Editor (remote file editing) ────────────── */
.ws-editor-wrap {
  flex: 1; min-height: 0; display: flex;
  background: oklch(0.193 0.016 44);
  font-family: 'SF Mono','Cascadia Code','Fira Code','JetBrains Mono',ui-monospace,monospace;
  font-size: 13px; line-height: 21px; overflow: hidden;
}
.ws-editor-gutter {
  flex: 0 0 auto; overflow: hidden; text-align: right;
  color: #7a7060; user-select: none; white-space: pre;
  padding: 10px 12px 10px 14px; border-right: 1px solid rgba(255,255,255,.07);
}
.ws-editor-ta {
  flex: 1; min-width: 0; resize: none; border: none; outline: none;
  background: transparent; color: #d3c8b4; font: inherit; padding: 10px 16px;
  white-space: pre; tab-size: 2; caret-color: oklch(0.78 0.085 78);
}
.ws-editor-ta::selection { background: color-mix(in srgb, oklch(0.78 0.085 78) 32%, transparent); }
#ws-toolbar-actions {
  display: flex; align-items: center; gap: 6px;
}
.ws-edit-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px; border-radius: 8px; cursor: pointer;
  font-family: var(--h-sans); font-size: 11.5px; font-weight: 500;
  border: 1px solid transparent; white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.ws-edit-btn.ghost { background: transparent; color: var(--h-ink-mute); border-color: var(--h-hair-soft); }
.ws-edit-btn.ghost:hover { border-color: var(--h-hairline); color: var(--h-ink); }
.ws-edit-btn.accent {
  background: oklch(0.78 0.085 78); color: oklch(0.27 0.035 72);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.ws-edit-btn.accent-muted {
  background: color-mix(in srgb, oklch(0.78 0.085 78) 55%, var(--h-bg));
  color: oklch(0.27 0.035 72);
}
.ws-edit-btn.primary { background: var(--h-ink); color: var(--h-bg); }
.ws-edit-btn.danger { background: transparent; color: #c08378; border-color: color-mix(in srgb, #c08378 48%, transparent); }
.ws-icon-btn {
  width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto; cursor: pointer;
  border: 1px solid var(--h-hair-soft); background: transparent; color: var(--h-ink-mute);
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .12s, background .12s;
}
.ws-icon-btn:hover { color: var(--h-ink); background: var(--h-surface-hi); }
.ws-file-tab-unsaved {
  width: 7px; height: 7px; border-radius: 50%;
  background: oklch(0.78 0.085 78); flex: 0 0 auto;
}
#workspace-panel.ws-expanded { width: 100% !important; max-width: 100%; }
#workspace-panel.ws-expanded #ws-drag-handle { display: none; }
.ws-toast-stack {
  position: absolute; z-index: 60; right: 18px; bottom: 18px;
  display: flex; flex-direction: column; gap: 9px; align-items: flex-end;
}
.ws-toast {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px 11px 14px;
  border-radius: 11px; background: var(--h-surface); border: 1px solid var(--h-hairline);
  box-shadow: 0 8px 26px rgba(0,0,0,.24); min-width: 220px; max-width: 300px;
  font-family: var(--h-sans); font-size: 13px; color: var(--h-ink);
  animation: ws-toast-slide .26s cubic-bezier(.2,.7,.3,1);
}
@keyframes ws-toast-slide { from { opacity: 0; transform: translateY(8px); } }
.ws-scrim {
  position: absolute; inset: 0; z-index: 50;
  background: rgba(18,12,7,.52);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.ws-dialog {
  max-width: 100%; background: var(--h-surface); border: 1px solid var(--h-hairline);
  border-radius: 16px; box-shadow: 0 26px 64px rgba(0,0,0,.42); padding: 24px 24px 20px;
}
.ws-ctx-menu {
  position: absolute; z-index: 40; min-width: 184px;
  background: var(--h-surface); border: 1px solid var(--h-hairline); border-radius: 11px;
  box-shadow: 0 10px 30px rgba(0,0,0,.3); padding: 5px;
}
.ws-ctx-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 11px;
  border-radius: 7px; cursor: pointer; font-family: var(--h-sans); font-size: 13px;
  color: var(--h-ink);
}
.ws-ctx-item:hover { background: var(--h-surface-hi); }
.ws-ctx-item.danger { color: #c08378; }

/* ── Empty panel ──────────────────────────────── */
.ws-empty-state {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px;
  text-align: center;
}
.ws-empty-icon { color: var(--h-ink-faint); opacity: .8; }
.ws-empty-title {
  font-family: var(--h-serif);
  font-size: 18px;
  color: var(--h-ink-mute);
}
.ws-empty-text {
  font-family: var(--h-sans);
  font-size: 13px;
  color: var(--h-ink-faint);
  line-height: 1.55;
  max-width: 240px;
}

/* ── File tree ────────────────────────────────── */
.ws-tree { flex: 1; min-height: 0; overflow: auto; padding: 8px 6px; }
.ws-tree-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s;
}
.ws-tree-row:hover { background: var(--h-surface-hi); }
.ws-tree-row.active { background: var(--h-surface); }
.ws-tree-chevron {
  color: var(--h-ink-faint);
  display: inline-flex;
  transition: transform .12s;
}
.ws-tree-chevron.open { transform: rotate(90deg); }
.ws-tree-name {
  flex: 1;
  min-width: 0;
  font-family: var(--h-sans);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-tree-name.folder { font-weight: 500; color: var(--h-ink); }
.ws-tree-name.file { font-weight: 400; color: var(--h-ink-mute); }
.ws-tree-name.active { color: var(--h-ink); }
.ws-tree-modified {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.ws-dl {
  opacity: 0;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--h-ink-mute);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity .12s, background .12s, color .12s;
}
.ws-tree-row:hover .ws-dl { opacity: .55; }
.ws-dl:hover { background: var(--h-surface); color: var(--h-ink) !important; opacity: 1 !important; }

/* ── Code viewer ──────────────────────────────── */
.ws-code-viewer {
  flex: 1;
  min-height: 0;
  overflow: auto;
  font-size: calc(var(--stoa-msg-scale, 1) * 13px);
  line-height: 21px;
}
.ws-code-table { display: table; min-width: 100%; }
.ws-code-line { display: table-row; }
.ws-code-line.active { background: rgba(255,255,255,.045); }
.ws-code-gutter {
  display: table-cell;
  text-align: right;
  padding: 0 12px 0 14px;
  color: #7a7060;
  user-select: none;
  border-right: 1px solid rgba(255,255,255,.07);
}
.ws-code-line.active .ws-code-gutter { color: #d3c8b4; }
.ws-code-text {
  display: table-cell;
  padding: 0 18px 0 16px;
  white-space: pre;
}

/* ── Diff viewer ──────────────────────────────── */
.ws-diff-file-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 9px 14px;
  border-bottom: 1px solid var(--h-hair-soft);
  background: var(--h-surface);
}
.ws-diff-stat { display: inline-flex; align-items: center; gap: 6px; font-family: var(--h-sans); font-size: 11px; font-weight: 500; }
.ws-diff-add { color: #7faa7c; }
.ws-diff-del { color: #c08378; }

.ws-diff-hunk {
  display: table-row;
}
.ws-diff-hunk-text {
  display: table-cell;
  padding: 3px 14px;
  color: #7d93b0;
  background: rgba(91,143,212,.08);
  white-space: pre;
}
.ws-diff-line-add { background: color-mix(in srgb, oklch(0.62 0.10 150) 16%, oklch(0.193 0.016 44)); }
.ws-diff-line-del { background: color-mix(in srgb, oklch(0.58 0.12 28) 16%, oklch(0.193 0.016 44)); }

/* ── Markdown viewer ──────────────────────────── */
.ws-md-body { max-width: 620px; }
.ws-md-body h1 {
  font-family: var(--h-serif); font-size: calc(var(--stoa-msg-scale, 1) * 26px); font-weight: 400;
  color: var(--h-ink); margin: 0 0 12px; line-height: 1.15;
  padding-bottom: 10px; border-bottom: 1px solid var(--h-hair-soft);
}
.ws-md-body h2 {
  font-family: var(--h-serif); font-size: calc(var(--stoa-msg-scale, 1) * 20px); font-weight: 400;
  color: var(--h-ink); margin: 28px 0 10px; line-height: 1.2;
}
.ws-md-body h3 {
  font-family: var(--h-serif); font-size: calc(var(--stoa-msg-scale, 1) * 16px); font-weight: 500;
  color: var(--h-ink); margin: 22px 0 8px;
}
.ws-md-body h4, .ws-md-body h5, .ws-md-body h6 {
  font-family: var(--h-serif); font-size: calc(var(--stoa-msg-scale, 1) * 14px); font-weight: 500;
  color: var(--h-ink-mute); margin: 18px 0 6px;
}
.ws-md-body p {
  font-family: var(--h-sans); font-size: calc(var(--stoa-msg-scale, 1) * 15px); line-height: 1.65;
  color: var(--h-ink); margin: 0 0 16px; text-wrap: pretty;
}
.ws-md-body ul, .ws-md-body ol {
  font-family: var(--h-sans); font-size: calc(var(--stoa-msg-scale, 1) * 15px); line-height: 1.65;
  color: var(--h-ink); padding-left: 22px; margin: 0 0 16px;
}
.ws-md-body li { margin-bottom: 4px; }
.ws-md-body li > ul, .ws-md-body li > ol { margin: 4px 0 0; }
.ws-md-body blockquote {
  border-left: 3px solid var(--h-hairline); margin: 0 0 16px;
  padding: 2px 0 2px 16px; color: var(--h-ink-mute);
}
.ws-md-body hr {
  border: none; border-top: 1px solid var(--h-hair-soft); margin: 24px 0;
}
.ws-md-body a {
  color: var(--h-accent); text-decoration: underline;
  text-underline-offset: 3px;
}
.ws-md-body a:hover { color: var(--h-ink); }
.ws-md-body strong { color: var(--h-ink); font-weight: 600; }
.ws-md-body em { font-style: italic; }
.ws-md-body :not(pre) > code {
  font-family: "Cascadia Code", "Fira Code", Consolas, monospace;
  font-size: 0.85em; padding: 1px 6px; border-radius: 5px;
  background: color-mix(in srgb, var(--h-ink) 9%, var(--h-surface));
  color: var(--h-ink-mute);
}
.ws-md-body pre {
  position: relative; margin: 0 0 16px; border-radius: 8px;
  background: oklch(0.193 0.016 44); overflow-x: auto;
}
.ws-md-body pre code {
  display: block; padding: 14px 16px; padding-right: 52px;
  font-family: "Cascadia Code", "Fira Code", Consolas, monospace;
  font-size: calc(var(--stoa-msg-scale, 1) * 13px); line-height: 1.6; color: #d3c8b4;
  white-space: pre-wrap; overflow-wrap: break-word;
  background: transparent;
}
.ws-md-body table {
  border-collapse: collapse; margin: 0 0 16px;
  font-family: var(--h-sans); font-size: calc(var(--stoa-msg-scale, 1) * 14px); width: auto;
}
.ws-md-body th, .ws-md-body td {
  border: 1px solid var(--h-hair-soft); padding: 6px 12px; text-align: left;
}
.ws-md-body th {
  background: color-mix(in srgb, var(--h-hairline) 30%, transparent);
  font-weight: 600; color: var(--h-ink);
}
.ws-md-body td { color: var(--h-ink-mute); }
.ws-md-body img { max-width: 100%; border-radius: 8px; margin: 8px 0; }

/* ── Editing banner ───────────────────────────── */
.ws-editing-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  padding: 8px 14px;
  font-family: var(--h-sans);
  font-size: 12.5px;
  font-style: italic;
}

/* ── Toggle button ────────────────────────────── */
.h-ws-toggle {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--h-hair-soft);
  background: transparent;
  color: var(--h-ink-mute);
  margin-left: 6px;
  transition: color .12s, background .12s, border-color .12s;
}
.h-ws-toggle:hover { color: var(--h-ink); border-color: var(--h-hairline); }
.h-ws-toggle.active {
  color: var(--h-ink);
  background: var(--h-surface-hi);
  border-color: var(--h-hairline);
}

@media (max-width: 1200px) {
  #workspace-panel.open {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 50;
    box-shadow: -4px 0 24px rgba(0,0,0,0.15);
  }
}
@media (max-width: 680px) {
  #workspace-panel.open {
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
  }
}


/* PDF viewer */
.ws-pdf-viewer { padding: 0; display: flex; flex-direction: column; align-items: center; }
.ws-pdf-toolbar { position: sticky; top: 0; z-index: 2; padding: 8px 16px; font-size: 12px; color: var(--h-ink-faint); background: var(--h-bg); border-bottom: 1px solid var(--h-border); width: 100%; text-align: center; }
.ws-pdf-pages { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 16px; width: 100%; }
.ws-pdf-page { background: #fff; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.12); max-width: 100%; overflow: hidden; position: relative; }
.ws-pdf-placeholder { background: #f5f5f5; display: flex; align-items: flex-end; width: 100%; }
.ws-pdf-page-label { text-align: center; padding: 4px 0 6px; font-size: 11px; color: var(--h-ink-faint); background: #fff; }