/* ── Workbench design tokens ── */
:root {
  /* Surfaces (dark, warm-neutral) */
  --wb-base:    #0b0c0e;
  --wb-surface: #14161a;
  --wb-raised:  #1c1f24;
  --wb-border:  #2a2f36;

  /* Text */
  --wb-text:           #e7eaee;
  --wb-text-secondary: #8b94a0;
  --wb-text-muted:     #5b6370;

  /* Section accents (positional anchors) */
  --wb-infra:  #e0a82e;
  --wb-coach:  #ef6b5e;
  --wb-sched:  #7aa7ff;
  --wb-jobs:   #a78bfa;
  --wb-notice: #9ba4b0;
  --wb-proj:   #4ade80;

  /* Status */
  --wb-success: #4ade80;
  --wb-warn:    #fbbf24;
  --wb-danger:  #f87171;
  --wb-info:    #7aa7ff;

  /* Typography */
  --wb-sans: 'Lexend', system-ui, -apple-system, sans-serif;
  --wb-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Spacing + motion */
  --wb-radius: 4px;
  --wb-ease:   cubic-bezier(.2,.6,.2,1);
  --wb-motion: 120ms;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Login overlay ── */
#login-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--wb-base);
  display: flex; align-items: center; justify-content: center;
}
#login-overlay.hidden { display: none; }
#login-box {
  width: 320px;
  padding: 28px;
  background: var(--wb-surface);
  border: 1px solid var(--wb-border);
  border-radius: 8px;
}
#login-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--wb-proj);
  margin-bottom: 20px;
  text-align: center;
  letter-spacing: 0.04em;
}
#login-form { display: flex; flex-direction: column; gap: 10px; }
#login-form input {
  background: var(--wb-raised);
  border: 1px solid var(--wb-border);
  border-radius: 5px;
  color: var(--wb-text);
  font-family: inherit;
  font-size: 14px;
  padding: 9px 12px;
  outline: none;
  width: 100%;
  transition: border-color var(--wb-motion) var(--wb-ease);
}
#login-form input:focus { border-color: var(--wb-proj); }
#login-form button {
  background: var(--wb-proj);
  border: none;
  border-radius: 5px;
  color: var(--wb-base);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 9px;
  margin-top: 2px;
  transition: opacity var(--wb-motion) var(--wb-ease);
  letter-spacing: 0.02em;
}
#login-form button:hover { opacity: 0.85; }
#login-error {
  color: var(--wb-danger);
  font-size: 12px;
  text-align: center;
}
#login-error.hidden { display: none; }

/* ── Scrollbars ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #555; }
* { scrollbar-width: thin; scrollbar-color: #333 transparent; }

body {
  display: flex;
  flex-direction: row;
  height: 100vh;
  background: var(--wb-base);
  color: var(--wb-text);
  font-family: var(--wb-sans);
  font-size: 14px;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Workbench rail ── */
#char-strip {
  width: 80px;
  min-width: 80px;
  background: var(--wb-base);
  border-right: 1px solid var(--wb-border);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 8px 0 10px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 100;
  flex-shrink: 0;
}

.wb-rail {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}

.wb-rail-item {
  position: relative;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 4px 8px;
  color: var(--wb-text-secondary);
  font-family: var(--wb-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color var(--wb-motion) var(--wb-ease), background var(--wb-motion) var(--wb-ease);
}
.wb-rail-item:hover { color: var(--wb-text); background: rgba(255,255,255,0.03); }
.wb-rail-item.active { color: var(--accent, var(--wb-text)); }
.wb-rail-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 28px;
  background: var(--accent, var(--wb-text));
  border-radius: 0 2px 2px 0;
  transition: transform var(--wb-motion) var(--wb-ease);
}
.wb-rail-item.active::before { transform: translateY(-50%) scaleY(1); }
.wb-rail-item:hover:not(.active)::before { transform: translateY(-50%) scaleY(0.55); }

.wb-rail-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.wb-rail-label {
  line-height: 1.1;
  white-space: nowrap;
}

#noticeboard-btn.has-unread { color: var(--wb-warn); }
#noticeboard-btn.has-unread::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 18px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wb-danger);
  border: 2px solid var(--wb-base);
}

.wb-rail-overflow { margin-top: 6px; border-top: 1px solid var(--wb-border); padding-top: 10px; }

/* ── Recents ── */
.wb-rail-recents {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--wb-border);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.wb-rail-recents.hidden { display: none; }

#wb-rail-recents-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.wb-rail-recents-header {
  font-family: var(--wb-sans);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wb-text-muted);
  text-align: center;
  padding: 0 4px 6px;
}

.wb-recent-item {
  position: relative;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px 6px;
  color: var(--wb-text-secondary);
  font-family: var(--wb-sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color var(--wb-motion) var(--wb-ease), background var(--wb-motion) var(--wb-ease);
}
.wb-recent-item:hover { color: var(--wb-text); background: rgba(255,255,255,0.03); }
.wb-recent-item.active { color: var(--accent, var(--wb-text)); }
.wb-recent-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 22px;
  background: var(--accent, var(--wb-text));
  border-radius: 0 2px 2px 0;
  transition: transform var(--wb-motion) var(--wb-ease);
}
.wb-recent-item.active::before { transform: translateY(-50%) scaleY(1); }
.wb-recent-item:hover:not(.active)::before { transform: translateY(-50%) scaleY(0.55); }

.wb-recent-badge {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--accent, var(--wb-surface));
  color: var(--wb-base);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.wb-recent-label {
  line-height: 1.1;
  white-space: nowrap;
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wb-recent-item .status-dot {
  position: absolute;
  top: 2px;
  right: 10px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--wb-base);
  box-sizing: content-box;
}

.wb-rail-item .char-tab-dot {
  position: absolute;
  top: 7px;
  right: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--wb-base);
  display: none;
}
.wb-rail-item .char-tab-dot.pending { display: block; background: var(--wb-danger); }

/* ── Overflow popover ── */
.wb-overflow {
  position: fixed;
  left: 84px;
  bottom: 60px;
  z-index: 200;
  background: var(--wb-raised);
  border: 1px solid var(--wb-border);
  border-radius: 6px;
  padding: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 60vh;
  overflow-y: auto;
  min-width: 180px;
}
.wb-overflow.hidden { display: none; }

.wb-overflow-header {
  font-family: var(--wb-sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wb-text-muted);
  padding: 6px 10px 4px;
}

.char-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: var(--wb-radius);
  cursor: pointer;
  color: var(--wb-text-secondary);
  font-family: var(--wb-sans);
  font-size: 13px;
  transition: color var(--wb-motion) var(--wb-ease), background var(--wb-motion) var(--wb-ease);
}
.char-tab:hover { background: rgba(255,255,255,0.04); color: var(--wb-text); }
.char-tab.active { background: rgba(255,255,255,0.06); color: var(--wb-text); }

.char-tab-avatar {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 5px;
  flex-shrink: 0;
}

.char-tab-initials {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: var(--wb-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--wb-text);
  flex-shrink: 0;
}

.char-tab-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.char-tab-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: none;
}
.char-tab-dot.pending { display: block; background: var(--wb-danger); }
.char-tab-dot.clear   { display: block; background: var(--wb-success); }

#char-strip-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--wb-border);
  width: 100%;
}

#recordings-link {
  color: #444;
  font-size: 14px;
  text-decoration: none;
  line-height: 1;
  transition: color 0.14s;
}
#recordings-link:hover { color: #909090; }

#noticeboard-link {
  padding: 10px 14px;
  color: var(--wb-text-secondary);
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--wb-border);
  transition: color var(--wb-motion) var(--wb-ease), background var(--wb-motion) var(--wb-ease);
}
#noticeboard-link:hover { color: var(--wb-text); background: rgba(255,255,255,0.04); }

/* ── Character identity header ── */
#char-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px 10px;
  border-bottom: 1px solid var(--wb-border);
  flex-shrink: 0;
}

#char-identity-avatar-wrap {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
}

#char-panel-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

#char-panel-initials {
  width: 100%;
  height: 100%;
  background: var(--wb-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--wb-text-secondary);
  border-radius: 8px;
}

#char-identity-text {
  flex: 1;
  min-width: 0;
}

#char-panel-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--wb-text);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

#char-panel-tagline {
  font-size: 11px;
  color: var(--wb-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
  line-height: 1.3;
}

/* ── Panel section labels ── */
.panel-section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wb-text-muted);
  padding: 10px 14px 4px;
}

.panel-section-divider {
  height: 1px;
  background: var(--wb-border);
  margin: 6px 10px;
}

/* ── Sidebar toggle button ── */
#sidebar-toggle {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  left: 340px;
  z-index: 200;
  background: var(--wb-base);
  border: 1px solid var(--wb-border);
  border-left: none;
  color: var(--wb-text-muted);
  width: 22px;
  height: 36px;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--wb-motion) var(--wb-ease), background var(--wb-motion) var(--wb-ease), left 0.2s ease;
}
#sidebar-toggle:hover { color: var(--wb-text-secondary); background: rgba(255,255,255,0.04); }
#sidebar.collapsed ~ #sidebar-toggle { left: 80px; }

/* ── Sidebar ── */
#sidebar {
  width: 260px;
  min-width: 260px;
  background: var(--wb-surface);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--wb-border);
  overflow-y: auto;
  transition: width 0.2s ease, min-width 0.2s ease, opacity 0.2s ease;
  z-index: 100;
}

#sidebar.collapsed {
  width: 0;
  min-width: 0;
  overflow: hidden;
  opacity: 0;
}

/* sidebar-header removed — replaced by #char-identity */

/* ── Groups ── */
.project-group { }

.group-label {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--wb-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  user-select: none;
  border-radius: var(--wb-radius);
  margin: 1px 4px;
  border-left: 3px solid transparent;
  transition: color var(--wb-motion) var(--wb-ease), background var(--wb-motion) var(--wb-ease);
}

.group-label:hover { color: var(--wb-text-secondary); background: rgba(255,255,255,0.03); }

/* ── Group tier colours ── */
.project-group[data-tier="work"] > .group-label {
  border-left-color: rgba(59, 130, 246, 0.55);
  color: #6fa3ef;
}
.project-group[data-tier="work"] > .group-label:hover { color: #93bbf9; }

.project-group[data-tier="tma"] > .group-label {
  border-left-color: rgba(217, 119, 6, 0.55);
  color: #c07e35;
}
.project-group[data-tier="tma"] > .group-label:hover { color: #d4974a; }

.project-group[data-tier="personal"] > .group-label {
  border-left-color: rgba(139, 92, 246, 0.5);
  color: #9b72cf;
}
.project-group[data-tier="personal"] > .group-label:hover { color: #b08de8; }

.project-group[data-tier="family"] > .group-label {
  border-left-color: rgba(236, 72, 153, 0.45);
  color: #d06090;
}
.project-group[data-tier="family"] > .group-label:hover { color: #e07aaa; }

.group-toggle {
  font-size: 10px;
  color: var(--wb-text-muted);
  flex-shrink: 0;
  width: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.group-toggle svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--wb-motion) var(--wb-ease);
}
.group-toggle.open svg { transform: rotate(90deg); }

.group-badge {
  margin-left: auto;
  font-family: var(--wb-mono);
  font-size: 10px;
  color: var(--wb-text-muted);
  background: var(--wb-raised);
  border-radius: 3px;
  padding: 1px 5px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.project-group.open > .group-label .group-badge { display: none; }

.project-item .leaf-spacer {
  display: inline-block;
  width: 12px;
  flex-shrink: 0;
}

.group-name { flex: 1; }

.group-children { }

/* ── Drag handle ── */
.drag-handle {
  cursor: grab;
  color: var(--wb-text-muted);
  font-size: 12px;
  flex-shrink: 0;
  padding: 0 2px;
  transition: color var(--wb-motion) var(--wb-ease);
}
.drag-handle:hover { color: var(--wb-text-secondary); }
.drag-handle:active { cursor: grabbing; }

/* ── Project items ── */
.project-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  cursor: pointer;
  border-radius: var(--wb-radius);
  margin: 1px 6px;
  color: var(--wb-text-secondary);
  transition: background var(--wb-motion) var(--wb-ease), color var(--wb-motion) var(--wb-ease);
  white-space: nowrap;
  overflow: hidden;
}

.project-item .item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* ── Status dot ── */
.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.4s;
}

.status-dot.active {
  opacity: 1;
  background: #d97706;
  animation: dot-pulse 1.4s ease-in-out infinite;
}

.status-dot.ready {
  opacity: 1;
  background: #2e7d52;
  box-shadow: 0 0 4px rgba(46, 125, 82, 0.5);
}

@keyframes dot-pulse {
  0%, 100% { transform: scale(1); opacity: 0.65; }
  50% { transform: scale(1.5); opacity: 1; }
}

/* Red's nudge dot */
.status-dot.red-pending {
  opacity: 1;
  background: #d97070;
  box-shadow: 0 0 5px rgba(217, 112, 112, 0.45);
}
.status-dot.red-clear {
  opacity: 1;
  background: #4cc87a;
  box-shadow: 0 0 4px rgba(76, 200, 122, 0.35);
}

/* ── Memory warning banner ── */
#mem-warning-banner {
  background: rgba(229, 115, 115, 0.12);
  border-bottom: 1px solid rgba(229, 115, 115, 0.25);
  padding: 6px 12px;
  font-size: 12px;
  color: #e57373;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#mem-warning-banner.hidden { display: none; }
.mem-warn-text { flex-shrink: 0; }
.mem-warn-session {
  background: rgba(229, 115, 115, 0.15);
  border: 1px solid rgba(229, 115, 115, 0.3);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.mem-warn-session:hover { background: rgba(229, 115, 115, 0.3); }
.mem-warn-dismiss {
  margin-left: auto;
  cursor: pointer;
  opacity: 0.5;
  font-size: 14px;
}
.mem-warn-dismiss:hover { opacity: 1; }

.gobo-mem-warning {
  background: rgba(229, 115, 115, 0.12);
  border: 1px solid rgba(229, 115, 115, 0.25);
  border-radius: 4px;
  padding: 6px 10px;
  margin-top: 8px;
  font-size: 11px;
  color: #e57373;
}

/* ── Session teardown button ── */
.session-done {
  display: none;
  font-size: 10px;
  color: #666;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
  line-height: 1;
}
.session-done.visible {
  display: inline-block;
}
.session-done:hover {
  color: #e57373;
  background: rgba(229, 115, 115, 0.12);
}

.project-item:hover { background: rgba(255,255,255,0.05); color: var(--wb-text); }

.project-item.active {
  background: rgba(255,255,255,0.08);
  color: var(--wb-text);
}

.project-item.active .item-name::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wb-proj);
  margin-right: 8px;
  vertical-align: middle;
}

/* SortableJS drag ghost */
.sortable-ghost {
  opacity: 0.3;
  background: #2a2a2a;
}

.sortable-drag {
  opacity: 0.9;
}

/* ── Project file explorer ── */
#project-files-panel {
  border-top: 1px solid var(--wb-border);
  margin-top: 4px;
}

#project-files-header {
  cursor: pointer;
}

#project-files-tree {
  max-height: 38vh;
  overflow-y: auto;
  padding-bottom: 6px;
}

.file-entry {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px 4px 18px;
  cursor: pointer;
  border-radius: var(--wb-radius);
  margin: 1px 4px;
  font-size: 12px;
  color: var(--wb-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  transition: background var(--wb-motion) var(--wb-ease), color var(--wb-motion) var(--wb-ease);
}

.file-entry:hover { background: var(--wb-raised); color: var(--wb-text); }

.folder-icon-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.file-folder-icon {
  color: #a07820;
  transition: color 0.15s;
}
.file-folder-icon.open { color: #e0c040; }

.file-type-icon {
  font-size: 14px;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  line-height: 1;
}
/* Markdown brand colour is black — override for dark theme */
i.devicon-markdown-original.colored { color: #6a8aaa !important; }

.file-entry-name {
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.file-ext-badge {
  font-size: 9px;
  color: #556879;
  background: rgba(85,104,121,0.12);
  border-radius: 3px;
  padding: 1px 5px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-width: 26px;
  text-align: center;
  font-weight: 600;
}

/* Data / config — LYT teal */
.file-ext-badge[data-ext="json"],
.file-ext-badge[data-ext="yaml"],
.file-ext-badge[data-ext="yml"],
.file-ext-badge[data-ext="toml"],
.file-ext-badge[data-ext="env"],
.file-ext-badge[data-ext="ini"],
.file-ext-badge[data-ext="cfg"] { color: #3ab8b8; background: rgba(58,184,184,0.12); }

/* CSV / spreadsheet — LYT green */
.file-ext-badge[data-ext="csv"] { color: #4cc87a; background: rgba(76,200,122,0.12); }

/* SQL — cyan */
.file-ext-badge[data-ext="sql"] { color: #2ab0d0; background: rgba(42,176,208,0.12); }

/* Markdown / text — muted blue-grey (devicon handles .md, badge is fallback) */
.file-ext-badge[data-ext="md"],
.file-ext-badge[data-ext="mdx"],
.file-ext-badge[data-ext="txt"],
.file-ext-badge[data-ext="log"] { color: #6a8aaa; background: rgba(106,138,170,0.1); }

/* Shell — LYT green (devicon handles .sh, badge is fallback) */
.file-ext-badge[data-ext="sh"],
.file-ext-badge[data-ext="bash"],
.file-ext-badge[data-ext="zsh"] { color: #4cc87a; background: rgba(76,200,122,0.12); }

/* Systems / compiled — LYT coral (devicons handle most, badge is fallback) */
.file-ext-badge[data-ext="go"],
.file-ext-badge[data-ext="rs"],
.file-ext-badge[data-ext="c"],
.file-ext-badge[data-ext="cpp"],
.file-ext-badge[data-ext="h"],
.file-ext-badge[data-ext="java"],
.file-ext-badge[data-ext="rb"],
.file-ext-badge[data-ext="php"] { color: #e0603a; background: rgba(224,96,58,0.12); }

/* Generic lock/config files */
.file-ext-badge[data-ext="lock"],
.file-ext-badge[data-ext="gitignore"] { color: #556879; background: rgba(85,104,121,0.12); }

.file-children { padding-left: 12px; }

.file-loading, .file-empty, .file-error {
  padding: 6px 18px;
  font-size: 11px;
  color: #444;
}
.file-error { color: #f87171; }

/* ── File viewer modal ── */
#file-viewer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}

#file-viewer-overlay.hidden { display: none; }

#file-viewer {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 10px;
  width: 860px;
  max-width: 94vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#file-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #2a2a2a;
  flex-shrink: 0;
}

#file-viewer-name {
  font-size: 13px;
  font-weight: 600;
  color: #ccc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#file-viewer-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

#file-viewer-download {
  font-size: 12px;
  color: #60a5fa;
  text-decoration: none;
}
#file-viewer-download:hover { text-decoration: underline; }

#file-viewer-close {
  background: none;
  border: none;
  color: #555;
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
#file-viewer-close:hover { color: #aaa; }

#file-viewer-body {
  flex: 1;
  overflow: auto;
  padding: 0;
}

.file-text {
  margin: 0;
  padding: 16px;
  font-family: Menlo, Monaco, 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.6;
  color: #ccc;
  white-space: pre-wrap;
  word-break: break-word;
}

.file-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  min-height: 200px;
}
.file-image-wrap img { max-width: 100%; max-height: 72vh; object-fit: contain; }

.csv-wrap { overflow: auto; padding: 12px; }
.csv-table { border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.csv-table th, .csv-table td { padding: 5px 12px; border: 1px solid #2a2a2a; color: #ccc; }
.csv-table th { background: #111; color: #888; font-weight: 600; }
.csv-table tr:nth-child(even) td { background: #161616; }

.file-binary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px;
  color: #555;
  font-size: 13px;
}

.file-dl-btn {
  padding: 8px 20px;
  background: var(--wb-info);
  color: var(--wb-base);
  border-radius: 6px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: opacity var(--wb-motion) var(--wb-ease);
}
.file-dl-btn:hover { opacity: 0.85; }

/* ── Markdown body (LYT) ── */
.md-body {
  padding: 28px 36px;
  color: #8a9db5;
  font-size: 14.5px;
  line-height: 1.8;
  max-width: 760px;
}
.md-body h1 { font-size: 1.65em; color: #e0c040; border-bottom: 1px solid rgba(224,192,64,0.2); padding-bottom: 0.3em; margin: 1.4em 0 0.4em; font-weight: 700; line-height: 1.3; }
.md-body h2 { font-size: 1.3em;  color: #e0603a; border-bottom: 1px solid rgba(224,96,58,0.2);  padding-bottom: 0.2em; margin: 1.4em 0 0.4em; font-weight: 600; line-height: 1.3; }
.md-body h3 { font-size: 1.1em;  color: #4ab87a; margin: 1.3em 0 0.4em; font-weight: 600; line-height: 1.3; }
.md-body h4 { font-size: 1em;    color: #3ab8b8; margin: 1.2em 0 0.35em; font-weight: 600; line-height: 1.3; }
.md-body h5 { font-size: 0.95em; color: #6a8faa; margin: 1.1em 0 0.3em;  font-weight: 600; line-height: 1.3; }
.md-body h6 { font-size: 0.9em;  color: #556879; margin: 1em 0 0.3em;    font-weight: 600; line-height: 1.3; }
.md-body p  { margin: 0.65em 0; }
.md-body a  { color: #4cc87a; text-decoration: none; }
.md-body a:hover { color: #7ddfa0; text-decoration: underline; }
.md-body strong { color: #d4843a; font-weight: 700; }
.md-body em     { color: #e07060; font-style: italic; }
.md-body ul, .md-body ol { padding-left: 1.5em; margin: 0.5em 0; }
.md-body li { margin: 0.3em 0; }
.md-body blockquote {
  margin: 1em 0;
  padding: 0.5em 1.1em;
  border-left: 3px solid #3a6a9a;
  background: rgba(58,106,154,0.08);
  color: #6a8aaa;
  border-radius: 0 4px 4px 0;
}
.md-body code {
  font-family: Menlo, Monaco, 'Courier New', monospace;
  font-size: 0.84em;
  background: #1a1f2a;
  border: 1px solid #2a3040;
  border-radius: 3px;
  padding: 0.15em 0.38em;
  color: #8aaccc;
}
.md-body pre {
  background: #0f1318;
  border: 1px solid #1e2530;
  border-radius: 6px;
  padding: 14px 18px;
  overflow-x: auto;
  margin: 1em 0;
}
.md-body pre code {
  background: none;
  border: none;
  padding: 0;
  color: #8aaccc;
  font-size: 12px;
  line-height: 1.65;
}
.md-body hr { border: none; border-top: 1px solid #2a3040; margin: 1.75em 0; }
.md-body table { border-collapse: collapse; width: 100%; font-size: 13px; margin: 1em 0; }
.md-body th, .md-body td { padding: 6px 14px; border: 1px solid #1e2530; }
.md-body th { background: #141820; color: #6a8aaa; font-weight: 600; text-align: left; }
.md-body tr:nth-child(even) td { background: #111520; }
.md-body img { max-width: 100%; border-radius: 4px; }

/* ── Files panel ── */
#files-panel {
  padding: 0 6px 16px;
  border-top: 1px solid var(--wb-border);
  margin-top: 8px;
}

#drop-zone {
  border: 1px dashed var(--wb-border);
  border-radius: 6px;
  padding: 10px;
  text-align: center;
  color: var(--wb-text-muted);
  font-size: 12px;
  cursor: pointer;
  margin: 6px 0;
  transition: border-color var(--wb-motion) var(--wb-ease), color var(--wb-motion) var(--wb-ease);
}

#drop-zone:hover, #drop-zone.dragover { border-color: var(--wb-text-muted); color: var(--wb-text-secondary); }

.outbox-file {
  display: flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: var(--wb-radius);
  font-size: 12px;
  color: var(--wb-text-secondary);
  margin: 2px 0;
  gap: 6px;
}

.outbox-file:hover { background: var(--wb-raised); }

.outbox-file a {
  color: var(--wb-info);
  text-decoration: none;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outbox-file a:hover { text-decoration: underline; }

.outbox-file button {
  background: none;
  border: none;
  color: var(--wb-text-muted);
  cursor: pointer;
  font-size: 14px;
  flex-shrink: 0;
  padding: 0;
}

.outbox-file button:hover { color: var(--wb-danger); }

/* ── Main ── */
#main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

#empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wb-text-muted);
  font-size: 16px;
}

.view { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.view.hidden { display: none; }

/* ── Project detail pane ── */
#project-detail-view {
  background: var(--wb-base);
  overflow-y: auto;
  padding: 0;
}

.pd-hero {
  padding: 24px 32px 20px;
  border-bottom: 2px solid var(--wb-proj);
  max-width: 960px;
}

.pd-title-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

#pd-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--wb-text);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}

.pd-crumb {
  font-family: var(--wb-mono);
  font-size: 11px;
  color: var(--wb-text-muted);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

.pd-summary {
  font-size: 13px;
  color: var(--wb-text-secondary);
  line-height: 1.55;
  margin: 8px 0 16px;
  max-width: 640px;
}
.pd-summary:empty { display: none; }

.pd-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px 24px;
}

.pd-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pd-stat-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wb-text-muted);
}

.pd-stat-value {
  font-family: var(--wb-mono);
  font-size: 12px;
  color: var(--wb-text);
  overflow: hidden;
  text-overflow: ellipsis;
}

.pd-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  border-bottom: 1px solid var(--wb-border);
  flex-wrap: wrap;
}

.pd-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--wb-radius);
  border: 1px solid var(--wb-border);
  background: var(--wb-surface);
  color: var(--wb-text-secondary);
  font-family: var(--wb-sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--wb-motion) var(--wb-ease), border-color var(--wb-motion) var(--wb-ease), background var(--wb-motion) var(--wb-ease);
}
.pd-btn:hover:not(:disabled) { color: var(--wb-text); border-color: var(--wb-text-muted); }
.pd-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pd-btn svg { flex-shrink: 0; }

.pd-btn-primary { color: var(--wb-proj); border-color: var(--wb-proj); }
.pd-btn-primary:hover:not(:disabled) { background: rgba(74,222,128,0.08); color: var(--wb-proj); border-color: var(--wb-proj); }

.pd-btn-danger { color: var(--wb-danger); border-color: rgba(248,113,113,0.3); }
.pd-btn-danger:hover:not(:disabled) { background: rgba(248,113,113,0.08); color: var(--wb-danger); border-color: var(--wb-danger); }

.pd-btn-ghost { background: none; }

.pd-btn-sm { padding: 4px 8px; font-size: 11px; }

/* Collapsible project bar above an active PTY */
.pd-strip {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--wb-border);
  background: var(--wb-surface);
  font-family: var(--wb-sans);
  font-size: 12px;
  flex-shrink: 0;
}
.pd-strip.hidden { display: none; }
.pd-strip-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  min-height: 44px;
}
.pd-strip-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: none;
  border: 1px solid var(--wb-border);
  border-radius: 4px;
  color: var(--wb-text-muted);
  cursor: pointer;
  flex-shrink: 0;
}
.pd-strip-toggle:hover { color: var(--wb-text); border-color: var(--wb-text-muted); }
.pd-strip-chevron { transition: transform 0.15s ease; }
.pd-strip[data-expanded="true"] .pd-strip-chevron { transform: rotate(90deg); }
.pd-strip-headlines {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
  line-height: 1.3;
}
.pd-strip-row1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pd-strip-row2 { display: flex; align-items: center; min-width: 0; }
.pd-strip-name { color: var(--wb-text); font-weight: 600; white-space: nowrap; }
.pd-strip-chip {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--wb-bg);
  border: 1px solid var(--wb-border);
  color: var(--wb-text-muted);
  flex-shrink: 0;
}
.pd-strip-chip:empty { display: none; }
.pd-strip-chip[data-account="work"] { color: var(--wb-proj); border-color: rgba(120,160,255,0.4); }
.pd-strip-chip[data-account="personal"] { color: var(--wb-success); border-color: rgba(74,222,128,0.4); }
.pd-strip-path {
  color: var(--wb-text-secondary);
  font-family: var(--wb-mono);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.pd-strip-path:empty { display: none; }
.pd-strip-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pd-strip-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--wb-text-muted);
  font-family: var(--wb-mono);
  font-size: 11px;
  white-space: nowrap;
}
.pd-strip-stat > span:last-child { color: var(--wb-text-secondary); }
.pd-strip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wb-text-muted); }
.pd-strip-dot.active { background: var(--wb-success); box-shadow: 0 0 6px rgba(74,222,128,0.5); }
.pd-strip-dot.ready  { background: var(--wb-warn); }

.pd-strip-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--wb-border);
  background: var(--wb-bg);
  max-height: 50vh;
  overflow-y: auto;
}
.pd-strip[data-expanded="false"] .pd-strip-body { display: none; }
.pd-strip-runtime {
  grid-column: 1 / -1;
  display: flex;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--wb-border);
}
.pd-strip-sessions {
  width: 100%;
  background: var(--wb-surface);
  border: 1px solid var(--wb-border);
  border-radius: 4px;
  padding: 4px 6px;
  color: var(--wb-text);
  font-family: var(--wb-sans);
  font-size: 12px;
}
.pd-strip-session-preview {
  margin-top: 8px;
  font-family: var(--wb-mono);
  font-size: 11px;
  color: var(--wb-text-muted);
  white-space: pre-wrap;
  max-height: 120px;
  overflow-y: auto;
}
.pd-strip-session-preview:empty { display: none; }
.pd-strip-session-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.pd-strip-session-actions[hidden] { display: none; }
.pd-strip-session-actions .pd-btn.copied { color: var(--wb-success, #5fb950); }

#session-viewer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}
#session-viewer-overlay.hidden { display: none; }
#session-viewer {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 10px;
  width: 980px;
  max-width: 94vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#session-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #2a2a2a;
  flex-shrink: 0;
}
#session-viewer-name {
  font-size: 13px;
  font-weight: 600;
  color: #ccc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
#session-viewer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
#session-viewer-close {
  background: none;
  border: none;
  color: #555;
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
#session-viewer-close:hover { color: #aaa; }
#session-viewer-body {
  flex: 1;
  overflow: auto;
  padding: 16px 20px;
  font-family: var(--wb-mono);
  font-size: 12px;
  line-height: 1.6;
  color: #d4d4d4;
}
#session-viewer-body .sv-msg {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #232323;
}
#session-viewer-body .sv-msg:last-child { border-bottom: none; }
#session-viewer-body .sv-role {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
}
#session-viewer-body .sv-msg.user .sv-role { color: #60a5fa; }
#session-viewer-body .sv-msg.assistant .sv-role { color: #c084fc; }
#session-viewer-body .sv-text { white-space: pre-wrap; word-break: break-word; }
#session-viewer-body .sv-loading { color: #777; font-style: italic; }
@media (max-width: 700px) {
  .pd-strip-body { grid-template-columns: 1fr; }
}

.pd-blocks {
  padding: 20px 32px 40px;
  max-width: 960px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  overflow-y: auto;
}

.pd-block {
  background: var(--wb-surface);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius);
  padding: 12px 14px;
  min-width: 0;
}

.pd-block-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--wb-border);
  font-family: var(--wb-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--wb-text);
  letter-spacing: 0.02em;
}
.pd-block-hint { font-size: 10px; font-weight: 400; color: var(--wb-text-muted); }

.pd-block-body { font-size: 12px; color: var(--wb-text-secondary); }
.pd-block-empty { padding: 12px 0; color: var(--wb-text-muted); font-style: italic; font-size: 11px; }

.pd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pd-list li { padding: 4px 0; line-height: 1.4; font-size: 12px; }

.pd-commits li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.pd-commits code {
  font-family: var(--wb-mono);
  font-size: 11px;
  color: var(--wb-proj);
  background: none;
  padding: 0;
}
.pd-commit-subj { color: var(--wb-text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-commit-meta { color: var(--wb-text-muted); font-size: 10px; font-family: var(--wb-mono); }

.pd-decisions li { display: flex; gap: 8px; align-items: baseline; }
.pd-decision-date { color: var(--wb-text-muted); font-family: var(--wb-mono); font-size: 10px; flex-shrink: 0; }

.pd-notices li { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }
.pd-notice-msg { color: var(--wb-text); flex: 1; min-width: 0; }
.pd-notice-when { color: var(--wb-text-muted); font-size: 10px; font-family: var(--wb-mono); flex-shrink: 0; }
.pd-notice-read .pd-notice-msg { color: var(--wb-text-muted); }
.pd-notice-action .pd-notice-msg { color: var(--wb-warn); }
.pd-notice-urgent .pd-notice-msg { color: var(--wb-danger); }

@media (max-width: 900px) {
  .pd-blocks { grid-template-columns: 1fr; }
}

/* ── Project detail: tabs ── */
.pd-tabs {
  display: flex;
  gap: 0;
  padding: 0 32px;
  border-bottom: 1px solid var(--wb-border);
  max-width: 960px;
}
.pd-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--wb-text-muted);
  font-family: var(--wb-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 10px 16px;
  cursor: pointer;
  margin-bottom: -1px;
}
.pd-tab:hover { color: var(--wb-text-secondary); }
.pd-tab-active { color: var(--wb-text); border-bottom-color: var(--wb-proj); }

.pd-tab-body { padding: 16px 32px 40px; max-width: 1200px; }

/* ── Kanban ── */
.pd-kanban {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.pd-kanban-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--wb-surface);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius);
  padding: 10px;
  min-width: 0;
  min-height: 120px;
}
.pd-kanban-col[data-column="dave"]     { border-top: 2px solid var(--wb-warn); }
.pd-kanban-col[data-column="claude"]   { border-top: 2px solid var(--wb-proj); }
.pd-kanban-col[data-column="together"] { border-top: 2px solid var(--wb-success); }
.pd-kanban-col[data-column="done"]     { border-top: 2px solid var(--wb-border); }

.pd-kanban-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--wb-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--wb-text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--wb-border);
}
.pd-kanban-label { flex: 1; min-width: 0; }
.pd-kanban-count {
  font-size: 10px;
  color: var(--wb-text-muted);
  font-family: var(--wb-mono);
  font-weight: 400;
}
.pd-kanban-clear {
  background: none;
  border: none;
  color: var(--wb-text-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 3px;
}
.pd-kanban-clear:hover { color: var(--wb-danger); background: var(--wb-hover); }

.pd-kanban-cards {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 60px;
  padding: 2px;
  border-radius: 4px;
  transition: background 0.15s;
}
.pd-kanban-drop {
  background: var(--wb-hover);
  outline: 1px dashed var(--wb-proj);
  outline-offset: -2px;
}
.pd-kanban-empty {
  color: var(--wb-text-muted);
  font-size: 11px;
  font-style: italic;
  text-align: center;
  padding: 12px 4px;
  pointer-events: none;
}

.pd-card {
  background: var(--wb-bg);
  border: 1px solid var(--wb-border);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--wb-text);
  cursor: grab;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pd-card:hover { border-color: var(--wb-proj); }
.pd-card-dragging { opacity: 0.4; cursor: grabbing; }

.pd-card-title { font-weight: 500; line-height: 1.3; word-wrap: break-word; }
.pd-card-body {
  font-size: 11px;
  color: var(--wb-text-secondary);
  margin-top: 4px;
  line-height: 1.4;
  word-wrap: break-word;
}
.pd-card-actions {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  align-items: center;
}
.pd-card-btn {
  background: none;
  border: 1px solid var(--wb-border);
  color: var(--wb-text-secondary);
  font-family: var(--wb-sans);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
}
.pd-card-btn:hover { border-color: var(--wb-proj); color: var(--wb-text); }
.pd-card-discuss { color: var(--wb-proj); border-color: var(--wb-proj); }
.pd-card-discuss:hover { background: var(--wb-proj); color: var(--wb-bg); }
.pd-card-del { margin-left: auto; font-size: 13px; padding: 0 6px; line-height: 1; }
.pd-card-del:hover { color: var(--wb-danger); border-color: var(--wb-danger); }
.pd-card-edit { font-size: 11px; padding: 0 6px; line-height: 1.4; }

.pd-kanban-add {
  background: none;
  border: 1px dashed var(--wb-border);
  color: var(--wb-text-muted);
  font-family: var(--wb-sans);
  font-size: 11px;
  padding: 6px;
  border-radius: 3px;
  cursor: pointer;
  margin-top: 4px;
}
.pd-kanban-add:hover { border-color: var(--wb-proj); color: var(--wb-text); }

@media (max-width: 900px) {
  .pd-kanban { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .pd-kanban { grid-template-columns: 1fr; }
}

/* ── PTY ── */
#terminal-container {
  flex: 1;
  padding: 8px;
  overflow: hidden;
}

/* ── API chat ── */
#chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-msg {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 8px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.chat-msg.user { align-self: flex-end; background: rgba(122,167,255,0.14); color: var(--wb-text); border: 1px solid rgba(122,167,255,0.28); }
.chat-msg.assistant { align-self: flex-start; background: var(--wb-raised); color: var(--wb-text); }

#chat-input-row {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--wb-border);
  background: var(--wb-surface);
}

#chat-input {
  flex: 1;
  background: var(--wb-raised);
  border: 1px solid var(--wb-border);
  border-radius: 6px;
  color: var(--wb-text);
  padding: 8px 12px;
  font-family: inherit;
  font-size: 14px;
  resize: none;
  outline: none;
  transition: border-color var(--wb-motion) var(--wb-ease);
}

#chat-input:focus { border-color: var(--wb-info); }

#chat-send {
  background: var(--wb-info);
  color: var(--wb-base);
  border: none;
  border-radius: 6px;
  padding: 0 18px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: opacity var(--wb-motion) var(--wb-ease);
}

#chat-send:hover { opacity: 0.85; }

/* ── Mic button ── */
#mic-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: #2a2a2a;
  color: #888;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  transition: background 0.15s, color 0.15s, transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
}

#mic-btn:hover { background: #333; color: #e0e0e0; }

#mic-btn.recording {
  background: #dc2626;
  color: #fff;
  animation: pulse 1.2s infinite;
}

#mic-btn.processing {
  background: #d97706;
  color: #fff;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
  50% { transform: scale(1.08); box-shadow: 0 4px 16px rgba(220,38,38,0.5); }
}

/* ── Voice overlay ── */
#voice-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}

#voice-overlay.hidden { display: none; }

#voice-modal {
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 20px;
  width: 600px;
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#voice-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#voice-label {
  font-size: 12px;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#voice-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 20px;
  transition: background 0.2s, color 0.2s;
}

#voice-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

#voice-status.vs-ready    { background: #1a2e1a; color: #4ade80; }
#voice-status.vs-ready    #voice-status-dot { background: #4ade80; }
#voice-status.vs-processing { background: #2e2010; color: #fb923c; }
#voice-status.vs-processing #voice-status-dot { background: #fb923c; animation: status-pulse 1s infinite; }
#voice-status.vs-paused   { background: #1e1e1e; color: #666; border: 1px solid #333; }
#voice-status.vs-paused   #voice-status-dot { background: #555; }

@keyframes status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

#voice-transcript {
  background: #111;
  border: 1px solid #333;
  border-radius: 6px;
  color: #e0e0e0;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  outline: none;
  line-height: 1.5;
}

#voice-transcript:focus { border-color: #555; }
#voice-transcript[readonly] { opacity: 0.7; cursor: default; border-color: #2a4a2a; }

#voice-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

#voice-actions button {
  padding: 7px 16px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 13px;
}

#voice-stop   { background: #7f1d1d; color: #fca5a5; }
#voice-stop:hover { background: #991b1b; color: #fff; }
#voice-pause  { background: #2a2a2a; color: #aaa; }
#voice-retry  { background: #2a2a2a; color: #aaa; }
#voice-cancel { background: #2a2a2a; color: #aaa; }
#voice-confirm { background: var(--wb-info); color: var(--wb-base); font-weight: 600; transition: opacity var(--wb-motion) var(--wb-ease); }
#voice-confirm:disabled { background: var(--wb-raised); color: var(--wb-text-muted); cursor: not-allowed; }

#voice-pause:hover  { background: #333; color: #e0e0e0; }
#voice-retry:hover  { background: #333; color: #e0e0e0; }
#voice-cancel:hover { background: #333; color: #e0e0e0; }
#voice-confirm:hover:not(:disabled) { opacity: 0.85; }

#voice-pause.paused { background: #2a3a2a; color: #4ade80; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-5px); }
  40%       { transform: translateX(5px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}
.shake { animation: shake 0.35s ease; }

/* ── Red avatar ── */
#red-avatar {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: auto;
  object-fit: cover;
  object-position: top center;
  pointer-events: none;
}

/* ── Coach panel (Red) ── */
#coach-panel {
  flex-shrink: 0;
  border-bottom: 1px solid var(--wb-border);
  background: var(--wb-surface);
  max-height: 220px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
#coach-panel.hidden { display: none; }

#coach-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 180px 8px 16px;
  border-bottom: 1px solid var(--wb-border);
  flex-shrink: 0;
}

#coach-title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#coach-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--wb-coach);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#coach-tagline {
  font-size: 10px;
  color: var(--wb-text-secondary);
  font-style: italic;
  letter-spacing: 0.02em;
}

.coach-count-pending {
  font-size: 11px;
  color: var(--wb-coach);
  flex: 1;
}
.coach-count-clear {
  font-size: 11px;
  color: var(--wb-success);
  flex: 1;
}

#coach-refresh {
  background: none;
  border: none;
  color: var(--wb-text-muted);
  font-size: 15px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color var(--wb-motion) var(--wb-ease);
}
#coach-refresh:hover { color: var(--wb-text-secondary); }

#coach-nudges {
  overflow-y: auto;
  flex: 1;
  padding: 4px 0;
}

.nudge-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 180px 5px 16px;
  cursor: pointer;
  font-size: 12px;
  border-radius: var(--wb-radius);
  margin: 1px 6px;
  transition: background var(--wb-motion) var(--wb-ease);
}
.nudge-item:hover { background: var(--wb-raised); }

.nudge-name {
  flex: 1;
  color: var(--wb-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nudge-item:hover .nudge-name { color: var(--wb-text); }

.nudge-cadence {
  font-size: 10px;
  color: var(--wb-text-muted);
  background: var(--wb-raised);
  border-radius: 3px;
  padding: 1px 5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.nudge-age {
  font-size: 11px;
  color: var(--wb-coach);
  flex-shrink: 0;
  min-width: 60px;
  text-align: right;
}

.health-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px;
  font-size: 11px;
  border-bottom: 1px solid var(--wb-border);
}
.health-steps { font-weight: 600; }
.health-date { color: var(--wb-text-muted); }
.health-good .health-steps { color: var(--wb-success); }
.health-mid  .health-steps { color: var(--wb-warn); }
.health-low  .health-steps { color: var(--wb-danger); }

/* ── Scheduled view (Matt etc.) ────────────────────────── */

#scheduled-view {
  height: 100%;
}

#scheduled-panel {
  flex-shrink: 0;
  border-bottom: 1px solid var(--wb-border);
  background: var(--wb-surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

#scheduled-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 180px 8px 16px;
  border-bottom: 1px solid var(--wb-border);
  flex-shrink: 0;
}

#scheduled-title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#scheduled-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--wb-sched);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#scheduled-tagline {
  font-size: 10px;
  color: var(--wb-text-secondary);
  font-style: italic;
  letter-spacing: 0.02em;
}

#scheduled-meta {
  font-size: 11px;
  color: var(--wb-text-muted);
  flex: 1;
}

#scheduled-run {
  background: none;
  border: 1px solid var(--wb-border);
  color: var(--wb-sched);
  padding: 3px 9px;
  border-radius: var(--wb-radius);
  font-size: 11px;
  cursor: pointer;
  transition: color var(--wb-motion) var(--wb-ease), border-color var(--wb-motion) var(--wb-ease);
}
#scheduled-run:hover { color: var(--wb-text); border-color: var(--wb-sched); }
#scheduled-run:disabled { opacity: 0.5; cursor: default; }

#scheduled-avatar {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: auto;
  object-fit: cover;
  object-position: top center;
  pointer-events: none;
}

#scheduled-inbox-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 16px;
  border-top: 1px solid var(--wb-border);
}

#scheduled-inbox {
  flex: 1;
  background: var(--wb-raised);
  border: 1px solid var(--wb-border);
  border-radius: 5px;
  color: var(--wb-text-secondary);
  font-family: inherit;
  font-size: 12px;
  padding: 6px 10px;
  resize: none;
  height: 48px;
  outline: none;
  line-height: 1.4;
  transition: border-color var(--wb-motion) var(--wb-ease), color var(--wb-motion) var(--wb-ease);
}
#scheduled-inbox:focus { border-color: var(--wb-sched); color: var(--wb-text); }
#scheduled-inbox.has-content { border-color: var(--wb-sched); color: var(--wb-text); }

#scheduled-inbox-save {
  background: none;
  border: 1px solid var(--wb-border);
  color: var(--wb-sched);
  border-radius: 5px;
  padding: 5px 12px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--wb-motion) var(--wb-ease), border-color var(--wb-motion) var(--wb-ease);
}
#scheduled-inbox-save:hover { color: var(--wb-text); border-color: var(--wb-sched); }
#scheduled-inbox-save.saved { color: var(--wb-success); border-color: var(--wb-success); }

#scheduled-summary {
  padding: 5px 180px 5px 16px;
  font-size: 10px;
  color: var(--wb-text-muted);
  font-style: italic;
  min-height: 18px;
}

#scheduled-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.scheduled-report { max-width: 680px; }
.scheduled-loading, .scheduled-running, .scheduled-empty, .scheduled-error {
  font-size: 12px;
  color: var(--wb-text-muted);
  padding: 20px 0;
}
.scheduled-running { color: var(--wb-sched); }
.scheduled-error   { color: var(--wb-danger); }

/* ── Postcard list ───────────────────────────────────────── */

.postcard-list {
  border: 1px solid #1e1e1e;
  border-radius: 6px;
  overflow: hidden;
  max-width: 820px;
}

.postcard {
  border-bottom: 1px solid #1a1a1a;
}
.postcard:last-child { border-bottom: none; }
.postcard.open > .postcard-row .postcard-chevron { transform: rotate(90deg); color: #888; }

.postcard-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.14s;
  min-height: 42px;
}
.postcard-row:hover { background: rgba(255,255,255,0.02); }

.postcard-chevron {
  color: #444;
  font-size: 13px;
  flex-shrink: 0;
  width: 12px;
  text-align: center;
  transition: transform 0.14s, color 0.14s;
  user-select: none;
}

.postcard-date {
  font-size: 12px;
  color: #888;
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  width: 110px;
}

.postcard-snippet {
  font-size: 12px;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.postcard-detail {
  display: none;
  padding: 20px 20px 24px 40px;
  background: #0d0d0d;
  border-top: 1px solid #1a1a1a;
}
.postcard.open .postcard-detail { display: block; }

/* ── Wiki links ──────────────────────────────────────────── */

.wiki-link {
  color: #4a7ab8;
  text-decoration: none;
  border-bottom: 1px dashed #2a4a7a;
  cursor: pointer;
  transition: color 0.14s, border-color 0.14s;
}
.wiki-link:hover { color: #6090cc; border-color: #4a6aaa; }

#wiki-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
#wiki-overlay.hidden { display: none; }

#wiki-panel {
  width: min(640px, 100vw);
  height: 100vh;
  background: #111;
  border-left: 1px solid #222;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#wiki-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #1e1e1e;
  flex-shrink: 0;
}

#wiki-title {
  font-size: 13px;
  font-weight: 600;
  color: #ccc;
}

#wiki-close {
  background: none;
  border: none;
  color: #555;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  transition: color 0.14s;
}
#wiki-close:hover { color: #aaa; }

#wiki-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 40px;
}
#wiki-body .md-body { max-width: none; }

.nudge-loading, .nudge-empty, .nudge-error {
  padding: 8px 16px;
  font-size: 11px;
  color: #444;
}
.nudge-empty { color: #4cc87a; }
.nudge-error { color: #f87171; }

/* ── Gobo dashboard ── */

#gobo-view {
  flex: 0 0 auto;
  order: -1;
  background: #0e0c00;
  border-bottom: 1px solid #2a2000;
}

#gobo-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #141100;
}
#gobo-panel:has(#gobo-detail.open) #gobo-header { border-bottom: 1px solid #2a2000; }

#gobo-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #3a2a00;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.15s;
}
#gobo-avatar:hover { border-color: #d4a017; }

#gobo-title-block {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

#gobo-title {
  font-size: 11px;
  font-weight: 700;
  color: #d4a017;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#gobo-tagline {
  font-size: 9px;
  color: #a07a30;
  margin-top: 1px;
}

#gobo-status-bar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 10px;
  cursor: pointer;
}

.gobo-status-stat {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #a08030;
  font-family: 'Menlo', 'Monaco', monospace;
  white-space: nowrap;
}

.gobo-stat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2a2000;
  flex-shrink: 0;
  transition: background 0.3s;
}
.gobo-stat-dot.ok   { background: #2a6040; }
.gobo-stat-dot.warn { background: #d4a017; }
.gobo-stat-dot.crit { background: #c03030; }

#gobo-refresh, #gobo-expand {
  background: none;
  border: none;
  color: #8a6820;
  font-size: 15px;
  cursor: pointer;
  padding: 2px 4px;
  transition: color 0.15s;
  flex-shrink: 0;
}
#gobo-refresh:hover { color: #d4a017; }
#gobo-expand:hover  { color: #d4a017; }

#gobo-detail {
  display: none;
  flex-direction: row;
  max-height: 240px;
}
#gobo-detail.open { display: flex; }

#gobo-left {
  flex: 0 0 220px;
  border-right: 1px solid #2a2000;
  overflow-y: auto;
  padding-bottom: 12px;
}

#gobo-right {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
}

.gobo-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #2a2000;
  margin: 10px 10px 0;
  border-radius: 5px;
  overflow: hidden;
}

.gobo-stat {
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  background: #141100;
}

.gobo-stat-label {
  font-size: 9px;
  color: #a07a30;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.gobo-stat-value {
  font-size: 11px;
  color: #c8a040;
  font-family: 'Menlo', 'Monaco', monospace;
}
.gobo-stat-value.warn { color: #d4a017; }
.gobo-stat-value.crit { color: #c03030; }

.gobo-pct {
  font-size: 10px;
  color: #a07a30;
  margin-left: 4px;
}
.gobo-pct.warn { color: #d4a017; }
.gobo-pct.crit { color: #c03030; }

.gobo-section-label {
  font-size: 9px;
  color: #a07a30;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 14px 4px;
}

.gobo-proj-summary {
  margin: 0 10px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #2a2000;
}

.gobo-proj-row {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  background: #141100;
  border-bottom: 1px solid #2a2000;
}
.gobo-proj-row:last-child { border-bottom: none; }
.gobo-proj-total { background: #0e0c00; }

.gobo-proj-type {
  flex: 1;
  font-size: 11px;
  color: #c8a040;
}

.gobo-proj-count {
  font-size: 11px;
  color: #e8d080;
  font-family: 'Menlo', 'Monaco', monospace;
}

.gobo-accounts {
  display: flex;
  gap: 6px;
  padding: 0 14px;
  flex-wrap: wrap;
}

.gobo-account-badge {
  font-size: 10px;
  color: #c8a040;
  background: #1a1600;
  border: 1px solid #3a2a00;
  border-radius: 3px;
  padding: 2px 7px;
}

/* ── Gobo live sessions ── */
.gobo-sessions-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
}
.gobo-session-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  font-size: 11px;
  border-radius: 3px;
}
.gobo-session-row:hover { background: rgba(255,255,255,0.04); }
.gobo-session-name { flex: 1; color: #e8d080; }
.gobo-session-mem { color: #a07a30; font-size: 10px; min-width: 50px; text-align: right; }
.gobo-session-kill {
  color: #666;
  cursor: pointer;
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
}
.gobo-session-kill:hover {
  color: #e57373;
  background: rgba(229, 115, 115, 0.12);
}

.gobo-loading {
  padding: 12px 14px;
  font-size: 11px;
  color: #a07a30;
}

.gobo-task-section {
  margin-bottom: 12px;
}

.gobo-task-title {
  font-size: 9px;
  color: #d4a017;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 5px;
}

.gobo-task-item {
  font-size: 11px;
  color: #c8a040;
  padding: 3px 0 3px 10px;
  border-left: 2px solid #2a2000;
  margin-bottom: 3px;
}

#gobo-tasks-empty {
  font-size: 11px;
  color: #a07a30;
  font-style: italic;
}

/* Gobo avatar lightbox */
#gobo-avatar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  cursor: pointer;
}
#gobo-lightbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 340px;
  text-align: center;
}
#gobo-lightbox img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #d4a017;
  box-shadow: 0 0 50px rgba(212,160,23,0.25);
}
#gobo-lightbox-quote {
  font-size: 13px;
  color: #c8a040;
  line-height: 1.6;
  font-style: italic;
}
#gobo-lightbox-name {
  font-size: 10px;
  color: #6a5020;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
#gobo-avatar-overlay.hidden { display: none; }

/* ── Wembley panel ── */

#wembley-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #0a0e06;
  color: #b8d870;
  overflow-y: auto;
}
#wembley-view.hidden { display: none; }

#wembley-panel {
  padding: 20px 24px;
  max-width: 560px;
}

#wembley-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

#wembley-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #a8c844;
  flex-shrink: 0;
}

#wembley-avatar-fallback {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #1a2a08;
  border: 2px solid #a8c844;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

#wembley-title-block {
  display: flex;
  flex-direction: column;
  flex: 1;
}

#wembley-title {
  font-size: 18px;
  font-weight: 600;
  color: #c8e860;
}

#wembley-tagline {
  font-size: 12px;
  color: #7a9a40;
  margin-top: 2px;
}

#wembley-meta {
  font-size: 11px;
  color: #5a7a30;
}

#wembley-refresh {
  background: none;
  border: none;
  color: #7a9a40;
  cursor: pointer;
  font-size: 16px;
  padding: 4px;
}
#wembley-refresh:hover { color: #a8c844; }

#wembley-run {
  background: none;
  border: 1px solid #3a5a18;
  color: #7a9a40;
  cursor: pointer;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 4px;
}
#wembley-run:hover { color: #a8c844; border-color: #5a8a28; }
#wembley-run:disabled { opacity: 0.4; cursor: default; }

.wembley-job {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 8px;
  background: #0f1a07;
  border: 1px solid #1e3010;
}

.wembley-job-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wembley-job-items {
  margin: 0 0 0 32px;
  padding: 0;
  list-style: none;
}

.wembley-job-items li {
  font-size: 11px;
  color: #6a8a40;
  padding: 1px 0;
}

.wembley-job.done .wembley-job-items li { color: #8aaa50; }

.wembley-job.done {
  border-color: #2a4a18;
  background: #111e08;
}

.wembley-job-tick {
  font-size: 18px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.wembley-job.done .wembley-job-tick { color: #a8c844; }
.wembley-job.pending .wembley-job-tick { color: #3a5a18; }

.wembley-job-label {
  flex: 1;
  font-size: 14px;
  color: #b8d870;
}

.wembley-job.pending .wembley-job-label { color: #6a8a40; }

.wembley-job-time {
  font-size: 11px;
  color: #5a7a30;
}

.wembley-loading, .wembley-empty, .wembley-error {
  font-size: 13px;
  color: #4a6a28;
  padding: 12px 0;
}
.wembley-error { color: #f87171; }

/* ── Noticeboard ── */

#noticeboard {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--wb-base);
  overflow-y: auto;
}
#noticeboard.hidden { display: none; }

#noticeboard-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px 12px;
  border-bottom: 1px solid var(--wb-border);
  flex-shrink: 0;
}

#noticeboard-title-block {
  display: flex;
  flex-direction: column;
  flex: 1;
}

#noticeboard-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--wb-text);
  letter-spacing: 0.02em;
}

#noticeboard-tagline {
  font-size: 11px;
  color: var(--wb-text-muted);
  margin-top: 2px;
}

#noticeboard-count {
  font-size: 11px;
  color: var(--wb-text-secondary);
  font-variant-numeric: tabular-nums;
}

#noticeboard-mark-read,
#noticeboard-clear,
#noticeboard-refresh {
  background: none;
  border: 1px solid var(--wb-border);
  color: var(--wb-text-secondary);
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
  padding: 4px 10px;
  border-radius: var(--wb-radius);
  transition: color var(--wb-motion) var(--wb-ease), border-color var(--wb-motion) var(--wb-ease);
}
#noticeboard-mark-read:hover,
#noticeboard-clear:hover { color: var(--wb-text); border-color: var(--wb-text-muted); }
#noticeboard-refresh { font-size: 15px; padding: 2px 6px; border: none; }
#noticeboard-refresh:hover { color: var(--wb-text); }

#noticeboard-body {
  padding: 16px 24px;
  max-width: 640px;
}

.nb-group {
  margin-bottom: 24px;
}

.nb-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.nb-group-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.nb-group-initials {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  background: var(--wb-raised);
}

.nb-group-name {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.nb-card {
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 6px;
  background: var(--wb-surface);
  border-left: 3px solid var(--wb-border);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  transition: opacity 0.2s;
}
.nb-card.read { opacity: 0.5; }
.nb-card:hover { opacity: 1; }

.nb-card-body {
  flex: 1;
  min-width: 0;
}

.nb-card-message {
  font-size: 13px;
  color: var(--wb-text);
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.nb-card.read .nb-card-message { color: var(--wb-text-secondary); }

.nb-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.nb-card-time {
  font-size: 10px;
  color: var(--wb-text-muted);
}

.nb-card-priority {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: 3px;
}
.nb-card-priority.info   { color: #4a9eff; background: rgba(74,158,255,0.1); }
.nb-card-priority.action { color: #d4a017; background: rgba(212,160,23,0.1); }
.nb-card-priority.urgent { color: #f87171; background: rgba(248,113,113,0.15); }

.nb-card-dismiss {
  background: none;
  border: none;
  color: var(--wb-text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
  flex-shrink: 0;
  transition: color var(--wb-motion) var(--wb-ease);
}
.nb-card-dismiss:hover { color: var(--wb-danger); }

#noticeboard-triage {
  background: none;
  border: 1px solid rgba(217,112,112,0.25);
  color: #d97070;
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 4px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
#noticeboard-triage:hover { background: rgba(217,112,112,0.08); border-color: rgba(217,112,112,0.4); }
#noticeboard-triage:disabled { opacity: 0.4; cursor: default; }

#noticeboard-triage-panel {
  margin: 0 24px;
  padding: 14px 16px;
  background: #1a0f0f;
  border: 1px solid rgba(217,112,112,0.15);
  border-radius: 6px;
  max-width: 616px;
}
#noticeboard-triage-panel.hidden { display: none; }

#noticeboard-triage-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

#noticeboard-triage-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #d97070;
}

#noticeboard-triage-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #d97070;
}

#noticeboard-triage-body {
  font-size: 13px;
  color: #dca8a8;
  line-height: 1.55;
  white-space: pre-wrap;
}

.nb-empty {
  color: var(--wb-text-muted);
  font-size: 14px;
  padding: 40px 0;
  text-align: center;
}

/* ── WS status dot ── */
.ws-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #333;
  transition: background 0.4s;
}
.ws-dot.ws-connected   { background: #2e7d52; box-shadow: 0 0 4px rgba(46,125,82,0.5); }
.ws-dot.ws-connecting  { background: #d97706; animation: dot-pulse 1.4s ease-in-out infinite; }
.ws-dot.ws-reconnecting { background: #d97706; animation: dot-pulse 1.4s ease-in-out infinite; }
.ws-dot.ws-error       { background: #c03030; }

/* ── Install button ── */
#install-btn {
  display: none;
  margin: 8px 8px 0;
  padding: 6px 10px;
  background: none;
  border: 1px solid var(--wb-border);
  border-radius: 5px;
  color: var(--wb-text-muted);
  font-size: 11px;
  cursor: pointer;
  text-align: center;
  transition: color var(--wb-motion) var(--wb-ease), border-color var(--wb-motion) var(--wb-ease);
}
#install-btn:hover { color: var(--wb-text-secondary); border-color: var(--wb-text-muted); }

/* ── Terminal keyboard toolbar ── */
#terminal-keyboard-toolbar {
  display: none;
  gap: 6px;
  padding: 6px 8px;
  background: #0a0a0a;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
@media (pointer: coarse) {
  #terminal-keyboard-toolbar { display: flex; }
}
#terminal-keyboard-toolbar.hidden { display: none; }

.kb-btn {
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 5px;
  color: #aaa;
  font-size: 13px;
  padding: 6px 12px;
  cursor: pointer;
  min-width: 44px;
  min-height: 36px;
  transition: background 0.1s, color 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.kb-btn:active  { background: #2a2a2a; color: #e0e0e0; }
.kb-btn.active  { background: var(--wb-info); color: var(--wb-base); border-color: var(--wb-info); }

#terminal-keyboard-input {
  display: none;
}
@media (pointer: coarse) {
  #terminal-keyboard-input {
    display: block;
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    top: -9999px;
    left: -9999px;
  }
}

/* ── Type button (touch only) ── */
#type-btn {
  display: none;
}
@media (pointer: coarse) {
  #type-btn {
    display: flex;
    position: fixed;
    bottom: 24px;
    right: 88px;
    z-index: 200;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: #2a2a2a;
    color: #888;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }
  #type-btn:active { background: #333; color: #e0e0e0; }
}

/* ── Type overlay ── */
#type-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 300;
  display: flex;
  align-items: flex-end;
  padding: 0;
}
#type-overlay.hidden { display: none; }
#type-modal {
  background: #1e1e1e;
  border-top: 1px solid #333;
  border-radius: 16px 16px 0 0;
  padding: 16px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#type-input {
  width: 100%;
  background: #111;
  border: 1px solid #333;
  border-radius: 8px;
  color: #e0e0e0;
  font-family: monospace;
  font-size: 16px;
  padding: 12px;
  outline: none;
  resize: none;
  box-sizing: border-box;
  -webkit-appearance: none;
}
#type-input:focus { border-color: #555; }
#type-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
#type-actions button {
  padding: 10px 24px;
  border-radius: 8px;
  border: none;
  font-size: 15px;
  cursor: pointer;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
#type-cancel { background: #2a2a2a; color: #aaa; }
#type-cancel:active { background: #333; color: #e0e0e0; }
#type-send { background: var(--wb-info); color: var(--wb-base); font-weight: 600; }
#type-send:active { opacity: 0.85; }

/* ── Mobile ── */
@media (max-width: 768px) {
  #sidebar {
    padding-top: env(safe-area-inset-top, 0px);
  }
  #sidebar-toggle {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
  }

  /* Coach/Red view: hide avatar, fix hardcoded padding */
  #red-avatar { display: none; }
  #coach-header {
    padding: 8px 16px;
  }
  .nudge-item {
    padding: 5px 16px;
  }

  /* Scheduled: hide avatar, fix padding */
  #scheduled-avatar { display: none; }
  #scheduled-header {
    padding: 8px 16px;
  }
  #scheduled-summary {
    padding: 5px 16px;
  }

  /* Touch targets for icon buttons */
  #coach-refresh,
  #scheduled-run,
  #gobo-refresh,
  #gobo-expand,
  #wembley-refresh,
  #wembley-run {
    min-width: 44px;
    min-height: 44px;
  }

  /* iOS input: prevent auto-zoom (needs font-size >= 16px) */
  #chat-input,
  #voice-transcript,
  #scheduled-inbox {
    font-size: 16px;
    -webkit-appearance: none;
  }
}

/* Touch-specific wider scrollbars */
@media (hover: none) {
  ::-webkit-scrollbar { width: 8px; height: 8px; }
}