/* ===== $NPC — Non-Playable Corporation — Pixel Art Theme ===== */

:root {
  --bg-dark: #0d0d1a;
  --bg-panel: #16162a;
  --bg-panel-alt: #1a1a33;
  --border: #2a2a55;
  --pixel-green: #00ff88;
  --pixel-blue: #4488ff;
  --pixel-yellow: #ffdd00;
  --pixel-red: #ff4455;
  --pixel-cyan: #00ddff;
  --pixel-purple: #aa66ff;
  --pixel-orange: #ff8844;
  --pixel-white: #e0e0f0;
  --pixel-gray: #888899;
  --text-dim: #6666aa;
  --text-primary: #e0e0f0;
  --font-pixel: 'Press Start 2P', monospace;
  --font-mono: 'Courier New', Courier, monospace;
  --bg-card: #16162a;
  --font-boost: 2px;  /* Text size boost: 0px (small), 2px (medium, default), 4px (large) */

  /* ═══ Typography Scale (Primitive) ═══ */
  --size-1: calc(5px + var(--font-boost));   /* 7px  — micro */
  --size-2: calc(7px + var(--font-boost));   /* 9px  — label */
  --size-3: calc(9px + var(--font-boost));   /* 11px — body */
  --size-4: calc(12px + var(--font-boost));  /* 14px — subheading */
  --size-5: calc(16px + var(--font-boost));  /* 18px — heading */
  --size-6: calc(24px + var(--font-boost));  /* 26px — display */

  /* ═══ Typography Scale (Semantic) ═══ */
  --text-display: var(--size-6);
  --text-heading: var(--size-5);
  --text-subheading: var(--size-4);
  --text-body: var(--size-3);
  --text-label: var(--size-2);
  --text-micro: var(--size-1);

  /* ═══ Spacing Scale (Primitive) ═══ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-8: 48px;

  /* ═══ Spacing Scale (Semantic) ═══ */
  --gap-inline: var(--sp-2);
  --gap-stack: var(--sp-3);
  --gap-section: var(--sp-5);
  --pad-component: var(--sp-3);
  --pad-panel: var(--sp-4);
  --pad-button: var(--sp-2) var(--sp-3);

  /* ═══ Radius Scale ═══ */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-full: 50%;

  /* z-index scale */
  --z-base: 2;
  --z-dropdown: 10;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-floating: 300;
  --z-modal: 900;
  --z-toast-backdrop: 9998;
  --z-toast: 9999;
  --z-critical: 99999;
}

* {
  box-sizing: border-box;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

:focus-visible {
  outline: 2px solid var(--pixel-cyan);
  outline-offset: 2px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--pixel-cyan);
  outline-offset: 0;
}

body {
  background: var(--bg-dark);
  color: var(--pixel-white);
  font-family: 'Press Start 2P', monospace;
  font-size: var(--text-subheading);
  margin: 0;
  overflow: hidden;
}

/* ===== 2D Grid Layout ===== */
#app {
  display: grid;
  grid-template-columns: 240px 1fr 280px;
  grid-template-rows: 1fr 1fr; /* overridden by resize-handler.js */
  grid-template-areas:
    "left-top    canvas   roster"
    "left-bottom console  console";
  height: 100vh;
  gap: var(--sp-1);
  padding: var(--sp-1);
}

/* During resize drag: prevent canvas/iframes from stealing pointer events */
body.resize-dragging * {
  pointer-events: none !important;
}
body.resize-dragging {
  pointer-events: auto !important;
}

#left-top-panel {
  grid-area: left-top;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#left-bottom-panel {
  grid-area: left-bottom;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#roster-panel {
  grid-area: roster;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ===== Collapsible Panels ===== */
.collapsible-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--pad-component);
  background: var(--bg-panel-alt);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.collapsible-header:hover {
  background: #222244;
}

.collapsible-header .pixel-title {
  margin: 0;
}

.collapse-arrow {
  font-size: var(--text-body);
  color: var(--pixel-cyan);
  transition: transform 0.25s ease;
  display: inline-block;
}

.collapsible-header.collapsed .collapse-arrow {
  transform: rotate(-90deg);
}

.collapsible-body {
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease;
  max-height: 2000px;
  opacity: 1;
}

.collapsible-body.collapsed {
  max-height: 0 !important;
  opacity: 0;
  overflow: hidden;
}

/* Flex variant for activity log */
.collapsible-body.collapsible-flex {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.collapsible-body.collapsible-flex.collapsed {
  flex: 0;
}

/* ===== Left Panels + Roster ===== */
#left-top-panel .collapsible-body,
#left-bottom-panel .collapsible-body,
#roster-panel .collapsible-body {
  background: var(--bg-panel);
  border: 2px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  overflow-y: auto;
  flex: 1;
}

/* ===== Office Panel (Center top) ===== */
#office-panel {
  grid-area: canvas;
  background: var(--bg-panel);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--pad-button);
  border-bottom: 2px solid var(--border);
  background: var(--bg-panel-alt);
  position: relative;
}

.pixel-title {
  font-size: var(--text-label);
  margin: 0;
  color: var(--pixel-yellow);
  text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
}
h1.pixel-title { font-size: var(--text-subheading); }
h2.pixel-title { font-size: var(--text-body); }
h3.pixel-title { font-size: var(--text-label); }

.version-badge {
  font-size: var(--text-micro);
  color: var(--pixel-blue);
  opacity: 0.7;
  margin-left: 4px;
}

#status-bar {
  display: flex;
  gap: var(--gap-stack);
  align-items: center;
}

.status-item {
  font-size: var(--text-body);
  color: var(--pixel-cyan);
}

#connection-status {
  color: var(--pixel-red);
}

#connection-status.online {
  color: var(--pixel-green);
}

#last-sync-time {
  font-size: var(--text-label);
  color: var(--text-dim);
}

#office-canvas {
  flex: 1;
  width: 100%;
  display: block;
  cursor: crosshair;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.tooltip {
  position: absolute;
  background: rgba(0, 0, 0, 0.9);
  border: 2px solid var(--pixel-cyan);
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--text-label);
  line-height: 1.8;
  pointer-events: none;
  z-index: var(--z-dropdown);
  max-width: 200px;
  white-space: pre-wrap;
}

.tooltip.hidden {
  display: none;
}

/* ===== Toolbar Icon Button (Guidance) ===== */
.toolbar-icon-btn {
  background: none;
  border: 2px solid var(--pixel-purple);
  color: var(--pixel-purple);
  font-size: var(--text-heading);
  padding: 2px 6px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.1s, transform 0.05s;
  line-height: 1;
}

.toolbar-icon-btn:hover {
  background: var(--pixel-purple);
  color: #000;
}

.toolbar-icon-btn:active {
  transform: translate(1px, 1px);
}

/* ===== Floating Panel (Settings dropdown etc.) ===== */
.floating-panel {
  position: fixed;
  z-index: var(--z-floating);
  background: var(--bg-panel, #1a1a2e);
  border: 2px solid var(--pixel-cyan, #0ff);
  box-shadow: 0 4px 20px rgba(0, 255, 255, 0.2);
  min-width: 320px;
  max-height: 400px;
  overflow-y: auto;
}
.floating-panel.hidden { display: none; }
.floating-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--pad-button);
  border-bottom: 1px solid var(--border, #333);
  color: var(--pixel-cyan, #0ff);
  font-family: var(--font-pixel);
  font-size: var(--text-body);
}
.floating-panel-close {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: var(--text-heading);
}
.floating-panel-close:hover {
  color: var(--pixel-white, #fff);
}
.floating-panel-body {
  padding: var(--pad-button);
}

/* ===== Console Panel (Bottom, spans center+right) ===== */
#console-panel {
  grid-area: console;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#ceo-section {
  padding: 10px;
}

#ceo-body.collapsible-flex {
  flex: 1;
}

#activity-body.collapsible-flex {
  flex: 1;
}

#ceo-avatar-area {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  flex-shrink: 0;
}

#ceo-avatar {
  border: 2px solid var(--pixel-yellow);
  border-radius: var(--radius-md);
  object-fit: cover;
}

.ceo-label {
  font-size: var(--text-body);
  color: var(--pixel-yellow);
}

.reload-btn {
  position: relative;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--pixel-orange);
  color: var(--pixel-orange);
  font-family: 'Press Start 2P', monospace;
  font-size: var(--text-subheading);
  padding: 4px 6px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
}

.reload-btn:hover {
  background: var(--pixel-orange);
  color: #000;
}

.reload-btn:hover::after {
  content: "May interrupt running tasks!";
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  background: var(--pixel-red);
  color: #fff;
  font-size: var(--text-body);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  z-index: var(--z-sticky);
}

.reload-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#task-input {
  width: 100%;
  background: #0a0a18;
  color: var(--pixel-white);
  border: 2px solid var(--border);
  font-family: 'Press Start 2P', monospace;
  font-size: var(--text-body);
  padding: var(--sp-2);
  resize: none;
  outline: none;
  line-height: 1.8;
}

#task-input:focus {
  border-color: var(--pixel-cyan);
  box-shadow: 0 0 8px rgba(0, 221, 255, 0.3);
}

#task-input::placeholder {
  color: var(--text-dim);
}

.ceo-input-area {
  position: relative;
  display: flex;
  align-items: stretch;
}
.ceo-input-area #task-input {
  flex: 1;
  border-right: none;
}
.ceo-input-area .chat-attach-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a18;
  border: 2px solid var(--border);
  border-left: 1px solid var(--border);
  padding: 0 6px;
  cursor: pointer;
}

.btn-row {
  display: flex;
  gap: var(--sp-1);
  margin-top: 8px;
}

.pixel-btn {
  flex: 1;
  background: var(--pixel-green);
  color: #000;
  border: none;
  padding: 10px 8px;
  font-family: 'Press Start 2P', monospace;
  font-size: var(--text-label);
  cursor: pointer;
  box-shadow: 3px 3px 0 #00994d;
  transition: transform 0.05s, box-shadow 0.05s;
}

.pixel-btn:hover {
  filter: brightness(1.1);
}

.pixel-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #00994d;
}

.pixel-btn.secondary {
  background: var(--pixel-blue);
  box-shadow: 3px 3px 0 #2255aa;
}

.pixel-btn.secondary:active {
  box-shadow: 1px 1px 0 #2255aa;
}

.pixel-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pixel-btn.danger {
  background: var(--pixel-red);
  box-shadow: 3px 3px 0 #992233;
}

.pixel-btn.danger:active {
  box-shadow: 1px 1px 0 #992233;
}

.emp-fire-btn {
  margin-top: 8px;
  width: 100%;
}

/* ===== Roster ===== */
#roster-list {
  padding: 4px 6px;
}

.roster-card {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-label);
}

.roster-card:last-child {
  border-bottom: none;
}

.roster-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
}

.roster-info {
  flex: 1;
}

.roster-name {
  color: var(--pixel-white);
  font-size: var(--text-body);
}

.roster-role {
  color: var(--pixel-cyan);
  font-size: var(--text-label);
}

.roster-quarter {
  color: var(--text-dim);
  font-size: var(--text-micro);
}

.roster-score {
  color: var(--pixel-yellow);
  font-size: var(--text-body);
  font-weight: bold;
  min-width: 30px;
  text-align: right;
}

.roster-score.high {
  color: var(--pixel-green);
}

.roster-score.low {
  color: var(--pixel-red);
}

.roster-empnum {
  color: var(--pixel-gray);
  font-size: var(--text-micro);
}

/* ===== Roster Filters ===== */
.roster-filters {
  display: flex;
  gap: 3px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel-alt);
}

.roster-filter-select {
  flex: 1;
  min-width: 0;
  background: var(--bg-dark);
  color: var(--pixel-white);
  border: 1px solid var(--border);
  font-family: 'Press Start 2P', monospace;
  font-size: var(--text-micro);
  padding: 3px 4px;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  text-overflow: ellipsis;
}

.roster-filter-select:focus {
  border-color: var(--pixel-cyan);
}

.roster-filter-select option {
  background: var(--bg-dark);
  color: var(--pixel-white);
  font-size: var(--text-micro);
}

/* ===== Activity Log ===== */
#activity-log {
  background: var(--bg-panel);
  border: 2px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: 0;        /* xterm.js FitAddon needs zero padding to calculate columns correctly */
  flex: 1;
  overflow: hidden;  /* xterm.js handles its own scrolling */
  min-height: 0;
  min-width: 0;      /* prevent xterm canvas from overflowing grid column */
  width: 100%;
  box-sizing: border-box;
}

.log-entry {
  border-left: 3px solid var(--pixel-gray);
  padding: 3px 8px;
  margin: 3px 0;
  font-size: var(--text-label);
  line-height: 1.6;
  animation: slide-in 0.15s ease-out;
}

.log-entry .timestamp {
  color: var(--text-dim);
}

.log-entry .agent {
  font-weight: bold;
}

.log-entry.ceo {
  border-color: var(--pixel-yellow);
}

.log-entry.ceo .agent {
  color: var(--pixel-yellow);
}

.log-entry.hr {
  border-color: var(--pixel-blue);
}

.log-entry.hr .agent {
  color: var(--pixel-blue);
}

.log-entry.coo {
  border-color: var(--pixel-orange);
}

.log-entry.coo .agent {
  color: var(--pixel-orange);
}

.log-entry.system {
  border-color: var(--pixel-gray);
}

.log-entry.system .agent {
  color: var(--pixel-gray);
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--pixel-blue);
}

/* ===== Guidance Section (now in modal) ===== */
.pixel-title.small {
  font-size: var(--text-body);
}

.guidance-controls {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-2);
}

.guidance-label {
  font-size: var(--text-label);
  color: var(--pixel-cyan);
}

#guidance-target {
  width: 100%;
  background: #0a0a18;
  color: var(--pixel-white);
  border: 2px solid var(--border);
  font-family: 'Press Start 2P', monospace;
  font-size: var(--text-label);
  padding: var(--sp-1) var(--sp-2);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 2l4 4 4-4' fill='%236666aa'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

#guidance-target:focus {
  border-color: var(--pixel-purple);
}

#guidance-target option {
  background: #0a0a18;
  color: var(--pixel-white);
}

#guidance-input {
  width: 100%;
  background: #0a0a18;
  color: var(--pixel-white);
  border: 2px solid var(--border);
  font-family: 'Press Start 2P', monospace;
  font-size: var(--text-label);
  padding: var(--sp-1) var(--sp-2);
  resize: none;
  outline: none;
  line-height: 1.8;
}

#guidance-input:focus {
  border-color: var(--pixel-purple);
  box-shadow: 0 0 8px rgba(170, 102, 255, 0.3);
}

#guidance-input::placeholder {
  color: var(--text-dim);
}

.pixel-btn.guidance {
  background: var(--pixel-purple);
  box-shadow: 3px 3px 0 #6633aa;
}

.pixel-btn.guidance:active {
  box-shadow: 1px 1px 0 #6633aa;
}

#guidance-notes-display {
  margin-top: 6px;
  padding: 0 8px 8px;
  max-height: 150px;
  overflow-y: auto;
}

#guidance-notes-display.hidden {
  display: none;
}

.guidance-notes-header {
  font-size: var(--text-label);
  color: var(--pixel-purple);
  margin-bottom: 4px;
}

.guidance-note-item {
  font-size: var(--text-label);
  color: var(--pixel-white);
  border-left: 2px solid var(--pixel-purple);
  padding: 2px 6px;
  margin: 2px 0;
  line-height: 1.6;
  animation: slide-in 0.15s ease-out;
}

/* Guidance modal sizing */
.guidance-modal-content {
  max-width: 500px;
  height: auto;
  max-height: 80vh;
}

.guidance-modal-body {
  flex-direction: column;
}

/* ===== 1-on-1 Meeting Modal ===== */
.oneonone-modal-content {
  max-width: 520px;
  max-height: 85vh;
  border-color: var(--pixel-purple);
  box-shadow: 0 0 30px rgba(170, 102, 255, 0.15);
  display: flex;
  flex-direction: column;
}

.oneonone-phase {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.oneonone-phase.hidden {
  display: none;
}

.oneonone-actions {
  display: flex;
  gap: var(--sp-1);
  justify-content: flex-end;
  padding: 8px 12px 12px;
}

/* ===== Listening mode badge in roster ===== */
.roster-listening {
  font-size: var(--text-label);
  color: var(--pixel-purple);
  animation: pulse-listening 1s ease-in-out infinite;
}

@keyframes pulse-listening {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.roster-remote {
  font-size: var(--text-label);
  color: #44cccc;
  margin-left: 4px;
}

/* Log entry for guidance */
.log-entry.guidance {
  border-color: var(--pixel-purple);
}

.log-entry.guidance .agent {
  color: var(--pixel-purple);
}

/* ===== Review Queue Panel ===== */
#review-queue-section {
  background: var(--bg-panel);
  border: 2px solid var(--pixel-yellow);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--pad-component);
  max-height: 350px;
  overflow-y: auto;
  animation: slide-in 0.2s ease-out;
}

#review-queue-section.hidden {
  display: none;
}

.review-queue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.review-queue-header .pixel-title {
  color: var(--pixel-yellow);
  margin-bottom: 0;
}

.review-counter {
  font-size: var(--text-body);
  font-weight: bold;
  color: var(--pixel-yellow);
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid var(--pixel-yellow);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
}

.review-summary {
  font-size: var(--text-label);
  line-height: 1.8;
  color: var(--pixel-white);
  border-left: 2px solid var(--pixel-cyan);
  padding: var(--sp-1) var(--sp-2);
  margin-bottom: 6px;
  max-height: 120px;
  overflow-y: auto;
}

.review-action-item {
  font-size: var(--text-label);
  padding: 2px 4px;
  border-bottom: 1px solid var(--border);
}

.review-action-item label {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-1);
  cursor: pointer;
  color: var(--pixel-white);
  line-height: 1.6;
}

.review-action-item input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--pixel-green);
}

/* ===== Routine log entry ===== */
.log-entry.system .agent {
  color: var(--pixel-gray);
}

/* ===== Modal Overlay (shared) ===== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fade-in 0.15s ease-out;
}

.modal-overlay.hidden {
  display: none;
}

.modal-content {
  background: var(--bg-panel);
  border: 2px solid var(--pixel-yellow);
  border-radius: var(--radius-sm);
  width: 80vw;
  max-width: 800px;
  height: 70vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 40px rgba(255, 215, 0, 0.15);
}

.alert-modal-content {
  max-width: 420px;
  width: auto;
  height: auto;
}

.alert-modal-body {
  padding: 12px 16px;
  font-size: var(--text-subheading);
  line-height: 1.6;
}

.alert-modal-footer {
  padding: 8px 16px 12px;
  text-align: right;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--pad-button);
  border-bottom: 2px solid var(--border);
  background: var(--bg-panel-alt);
}

.modal-close {
  background: none;
  border: 2px solid var(--pixel-red);
  color: var(--pixel-red);
  font-family: 'Press Start 2P', monospace;
  font-size: var(--text-body);
  padding: var(--sp-1) var(--sp-2);
  cursor: pointer;
}

.modal-close:hover {
  background: var(--pixel-red);
  color: #000;
}

.modal-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.workflow-sidebar {
  width: 200px;
  border-right: 2px solid var(--border);
  overflow-y: auto;
  padding: 4px 0;
}

.workflow-item {
  padding: var(--sp-2) var(--pad-component);
  font-size: var(--text-label);
  color: var(--pixel-white);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  line-height: 1.6;
}

.workflow-item:hover {
  background: var(--bg-panel-alt);
  color: var(--pixel-cyan);
}

.workflow-item.active {
  background: var(--bg-panel-alt);
  border-left: 3px solid var(--pixel-yellow);
  color: var(--pixel-yellow);
}

.workflow-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.workflow-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: var(--text-body);
}

.workflow-placeholder.hidden {
  display: none;
}

.workflow-textarea {
  flex: 1;
  width: 100%;
  background: #0a0a18;
  color: var(--pixel-white);
  border: none;
  font-family: 'Press Start 2P', monospace;
  font-size: var(--text-label);
  padding: 10px;
  resize: none;
  outline: none;
  line-height: 2;
  white-space: pre-wrap;
}

.workflow-textarea:focus {
  box-shadow: inset 0 0 8px rgba(0, 221, 255, 0.15);
}

.workflow-textarea.hidden {
  display: none;
}

.workflow-rendered {
  flex: 1;
  width: 100%;
  background: #0a0a18;
  padding: 10px;
  overflow-y: auto;
  max-height: 400px;
}

.workflow-rendered.hidden {
  display: none;
}

.modal-footer {
  display: flex;
  gap: var(--sp-1);
  padding: var(--pad-button);
  border-top: 2px solid var(--border);
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ===== Meeting Room Modal ===== */
.meeting-modal-content {
  max-width: 900px;
  height: 75vh;
}

.meeting-modal-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.meeting-modal-status {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.status-led {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  display: inline-block;
}

.status-led.free {
  background: var(--pixel-green);
  box-shadow: 0 0 6px var(--pixel-green);
}

.status-led.booked {
  background: var(--pixel-red);
  box-shadow: 0 0 6px var(--pixel-red);
  animation: pulse-led 1s ease-in-out infinite;
}

@keyframes pulse-led {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.status-text {
  font-size: var(--text-label);
  color: var(--pixel-white);
}

.meeting-info {
  width: 200px;
  border-right: 2px solid var(--border);
  padding: var(--sp-2);
  overflow-y: auto;
}

.meeting-info-block {
  margin-bottom: 10px;
}

.meeting-info-label {
  font-size: var(--text-label);
  color: var(--pixel-cyan);
  margin-bottom: 4px;
}

.meeting-info-value {
  font-size: var(--text-body);
  color: var(--pixel-white);
}

.meeting-participants-list {
  font-size: var(--text-label);
  line-height: 2;
  color: var(--pixel-white);
}

.meeting-agenda-list {
  font-size: var(--text-label);
  line-height: 1.8;
  color: var(--text-dim);
}
.agenda-item { padding: 1px 0; }
.agenda-done { color: var(--pixel-green); text-decoration: line-through; opacity: 0.7; }
.agenda-active { color: var(--pixel-yellow); font-weight: bold; }
.agenda-pending { color: var(--text-dim); }

.meeting-participant {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px 0;
  border-bottom: 1px solid var(--border);
}

.meeting-participant-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  display: inline-block;
}

.meeting-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.meeting-chat-header {
  font-size: var(--text-label);
  color: var(--pixel-cyan);
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel-alt);
}

.meeting-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.chat-msg {
  font-size: var(--text-label);
  line-height: 1.8;
  padding: var(--sp-1) var(--sp-2);
  border-left: 3px solid var(--pixel-gray);
  animation: slide-in 0.15s ease-out;
}

.chat-msg .chat-speaker {
  font-weight: bold;
  margin-right: 4px;
}

.chat-msg .chat-time {
  color: var(--text-dim);
  font-size: var(--text-label);
}

.chat-msg.role-hr { border-color: var(--pixel-blue); }
.chat-msg.role-hr .chat-speaker { color: var(--pixel-blue); }

.chat-msg.role-coo { border-color: var(--pixel-orange); }
.chat-msg.role-coo .chat-speaker { color: var(--pixel-orange); }

.chat-msg.role-ceo { border-color: var(--pixel-yellow); }
.chat-msg.role-ceo .chat-speaker { color: var(--pixel-yellow); }

.chat-msg.role-employee { border-color: var(--pixel-green); }
.chat-msg.role-employee .chat-speaker { color: var(--pixel-green); }

.chat-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: var(--text-body);
}

/* ===== Employee Detail Modal ===== */
.employee-modal-content {
  max-width: 1100px;
  width: 90vw;
  height: 75vh;
  border-color: var(--pixel-cyan);
  box-shadow: 0 0 40px rgba(0, 221, 255, 0.15);
}

.employee-modal-body {
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  flex: 1;
  min-height: 0;
}

.emp-detail-grid {
  display: grid;
  grid-template-columns: 35% 25% 1fr;
  gap: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.emp-detail-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.emp-detail-left {
  padding: 10px;
  border-right: 2px solid var(--border);
  overflow-y: auto;
}

.emp-detail-center {
  padding: 10px;
  border-right: 2px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.emp-detail-right {
  padding: 10px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.employee-avatar-section {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: 8px;
}

.employee-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 1px solid var(--pixel-green);
  object-fit: cover;
  background: var(--bg-dark);
}

.avatar-upload-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: var(--text-label);
  color: var(--pixel-green);
  cursor: pointer;
  border: 1px solid var(--border);
  padding: 3px 6px;
  background: var(--bg-panel);
}

.avatar-upload-btn:hover {
  background: var(--bg-panel-alt);
}

.emp-detail-status-card {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--border);
}

.emp-detail-status-card .emp-detail-row {
  padding: 2px 0;
  font-size: var(--text-label);
}

.emp-detail-flex-section {
  margin-bottom: 8px;
}

.emp-detail-fill-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-bottom: 0;
}

.emp-detail-fill-section .emp-detail-section-content {
  flex: 1;
  max-height: none;
  overflow-y: auto;
}

.emp-detail-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: clamp(7px, 1.2vw, 10px);
  line-height: 1.8;
}

.emp-detail-row:last-child {
  border-bottom: none;
}

.emp-detail-label {
  color: var(--pixel-cyan);
  min-width: 50px;
  flex-shrink: 0;
}

.emp-detail-value {
  color: var(--pixel-white);
  flex: 1;
  word-break: break-all;
}

/* Permission tags */
.perm-tag {
  display: inline-block;
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  font-size: var(--text-label);
  margin: 1px 2px;
  background: var(--pixel-dark);
  color: var(--pixel-gray);
  border: 1px solid var(--pixel-gray);
}
.perm-tag.perm-company_file_access { color: #6ec6ff; border-color: #3a7ab5; }
.perm-tag.perm-web_search { color: #a8e6cf; border-color: #5ba87a; }
.perm-tag.perm-backend_code_maintenance { color: #ffb347; border-color: #b5793a; }
.perm-tag.perm-hr_management { color: #dda0dd; border-color: #8b5e8b; }
.perm-tag.perm-asset_management { color: #f0e68c; border-color: #8b8b5e; }

/* Performance quarter cards */
.perf-row {
  flex-direction: column;
}

.perf-quarters {
  display: flex;
  gap: var(--sp-1);
  margin-bottom: 4px;
}

.perf-quarter-card {
  flex: 1;
  text-align: center;
  padding: 4px 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #0a0a18;
}

.perf-quarter-card .pq-label {
  font-size: var(--text-micro);
  color: var(--text-dim);
  margin-bottom: 2px;
}

.perf-quarter-card .pq-score {
  font-size: var(--text-body);
  font-weight: bold;
  color: var(--pixel-yellow);
}

.perf-quarter-card.high {
  border-color: var(--pixel-green);
}
.perf-quarter-card.high .pq-score {
  color: var(--pixel-green);
}

.perf-quarter-card.low {
  border-color: var(--pixel-red);
}
.perf-quarter-card.low .pq-score {
  color: var(--pixel-red);
}

.perf-quarter-card.mid .pq-score {
  color: var(--pixel-yellow);
}

.perf-quarter-card.empty .pq-score {
  color: var(--text-dim);
}

.perf-current-q {
  font-size: var(--text-label);
  color: var(--text-dim);
}

/* Employee detail sections */
.emp-detail-section {
  margin-bottom: 12px;
}

.emp-detail-section-title {
  font-size: clamp(8px, 1.3vw, 11px);
  color: var(--pixel-yellow);
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.emp-detail-section-content {
  font-size: clamp(7px, 1.2vw, 10px);
  line-height: 2;
  color: var(--pixel-white);
  white-space: pre-wrap;
  overflow-y: auto;
}

.emp-detail-section-content .guidance-note-item {
  font-size: clamp(7px, 1.2vw, 10px);
  margin: 3px 0;
}

.emp-detail-section-content .empty-hint {
  color: var(--text-dim);
  font-style: italic;
}

.emp-model-section-wrap {
  margin-bottom: 6px;
}

.emp-model-section {
  display: flex;
  gap: var(--sp-1);
  align-items: center;
  flex-wrap: wrap;
}

.emp-model-select {
  flex: 1;
  min-width: 0;
  font-family: monospace;
  font-size: clamp(7px, 1.4vw, 11px);
  background: var(--bg-dark);
  color: var(--pixel-white);
  border: 1px solid var(--border);
  padding: 4px 6px;
  cursor: pointer;
  text-overflow: ellipsis;
  overflow: hidden;
}

.emp-model-select:focus {
  border-color: var(--pixel-cyan);
  outline: none;
}

.pixel-btn.small {
  font-size: clamp(6px, 1.2vw, 9px);
  padding: var(--sp-1) var(--sp-2);
  white-space: nowrap;
}

/* ===== Ex-Employee Wall Modal ===== */
.ex-employee-modal-content {
  max-width: 550px;
  max-height: 75vh;
  border-color: var(--pixel-gray);
  box-shadow: 0 0 40px rgba(136, 136, 153, 0.15);
}

.ex-employee-list {
  max-height: 55vh;
  overflow-y: auto;
}

.ex-employee-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--pad-component);
  border: 1px solid var(--border);
  margin-bottom: 4px;
  background: var(--bg-dark);
  transition: border-color 0.2s;
}

.ex-employee-card:hover {
  border-color: var(--pixel-gray);
}

.ex-emp-info {
  flex: 1;
  min-width: 0;
}

.ex-emp-name {
  font-size: var(--text-label);
  color: var(--pixel-white);
  opacity: 0.8;
}

.ex-emp-role {
  font-size: var(--text-label);
  color: var(--text-dim);
  margin-top: 2px;
}

.ex-emp-skills {
  font-size: var(--text-micro);
  color: var(--pixel-gray);
  margin-top: 1px;
}

.rehire-btn {
  flex-shrink: 0;
  margin-left: 8px;
  font-size: 6px !important;
  padding: 3px 8px !important;
}

/* ===== Project Wall Modal ===== */
.project-modal-content {
  max-width: 1100px;
  width: 90vw;
  max-height: 85vh;
  border-color: var(--pixel-green);
  box-shadow: 0 0 40px rgba(0, 255, 136, 0.15);
}

.project-list {
  max-height: 55vh;
  overflow-y: auto;
}

.project-card {
  padding: var(--sp-2);
  border: 1px solid var(--border);
  margin-bottom: 4px;
  background: var(--bg-dark);
  transition: border-color 0.2s;
}

.project-card:hover {
  border-color: var(--pixel-green);
}

.project-card-header {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-label);
  color: var(--pixel-white);
}

.project-card-date {
  color: var(--text-dim);
  font-size: var(--text-label);
}

.project-card-meta {
  font-size: var(--text-micro);
  color: var(--text-dim);
  margin-top: 3px;
}

.project-detail {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.project-detail-split {
  display: flex;
  gap: var(--sp-2);
  min-height: 200px;
}

.project-iter-list {
  flex: 0 0 180px;
  overflow-y: auto;
  max-height: 55vh;
  border-right: 1px solid var(--border);
  padding-right: 6px;
}

.project-iter-card {
  padding: 6px;
  border: 1px solid var(--border);
  margin-bottom: 3px;
  background: var(--bg-dark);
  cursor: pointer;
  transition: border-color 0.15s;
  font-size: var(--text-label);
}

.project-iter-card:hover {
  border-color: var(--pixel-cyan);
}

.project-iter-card.active {
  border-color: var(--pixel-green);
  background: rgba(0, 255, 136, 0.05);
}

.project-iter-detail {
  flex: 1;
  overflow-y: auto;
  max-height: 55vh;
  padding-left: 2px;
}

.project-file-item:hover {
  background: rgba(0, 255, 136, 0.08);
  color: var(--pixel-cyan) !important;
}
.file-tree-dir:hover { background: rgba(255, 255, 0, 0.06); }
.file-tree-children.hidden { display: none; }
.lazy-dir-children.hidden { display: none; }

/* ===== Candidate Selection Modal (Boss Online) ===== */
.candidate-modal-content {
  max-width: 780px;
  max-height: 85vh;
  border-color: var(--pixel-yellow);
  box-shadow: 0 0 40px rgba(255, 215, 0, 0.15);
}

.candidate-modal-body {
  display: flex;
  gap: var(--sp-2);
  flex-direction: row;
  align-items: flex-start;
  max-height: calc(85vh - 80px);
  overflow: hidden;
  flex: 1;
}

.candidate-jd {
  font-size: var(--text-label);
  color: var(--text-dim);
  padding: 6px;
  border: 1px solid var(--border);
  background: var(--bg-dark);
  width: 120px;
  min-width: 100px;
  flex-shrink: 0;
  line-height: 1.8;
  max-height: calc(85vh - 80px);
  overflow-y: auto;
}

/* Role groups container */
.candidate-roles {
  flex: 1;
  overflow-y: auto;
  max-height: calc(85vh - 80px);
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.role-group {
  border: 1px solid var(--border);
  background: rgba(22, 22, 42, 0.6);
}

.role-group-header {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 5px 8px;
  background: linear-gradient(90deg, rgba(0, 221, 255, 0.08), transparent);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.role-group-icon {
  font-size: var(--text-subheading);
}

.role-group-title {
  font-size: var(--text-label);
  color: var(--pixel-cyan);
  letter-spacing: 1px;
}

.role-group-count {
  font-size: var(--text-micro);
  color: var(--pixel-gray);
  background: var(--bg-dark);
  padding: 1px 4px;
  border: 1px solid var(--border);
}

.role-group-desc {
  font-size: var(--text-micro);
  color: var(--text-dim);
  width: 100%;
  margin-top: 2px;
  line-height: 1.6;
}

.role-group-cards {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: var(--sp-2);
  justify-content: flex-start;
}

/* Flip card container */
.candidate-card {
  width: 105px;
  height: 160px;
  perspective: 600px;
  cursor: pointer;
  position: relative;
}

.candidate-card.selected {
  outline: 2px solid var(--pixel-green);
  outline-offset: 1px;
}

.candidate-card.selected .card-select-indicator {
  opacity: 1;
}

.card-select-indicator {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 10px;
  height: 10px;
  border: 1px solid var(--pixel-green);
  background: var(--pixel-green);
  opacity: 0;
  z-index: var(--z-base);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-label);
  color: #000;
  transition: opacity 0.15s;
}

.candidate-card.selected .card-select-indicator::after {
  content: '✓';
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.candidate-card.flipped .card-inner {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Front of card */
.card-front {
  background: linear-gradient(135deg, #1a1a3e, #0a0a28);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 5px;
  position: relative;
}

.card-front .card-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: 2px solid var(--pixel-cyan);
  background: var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-heading);
  margin-bottom: 3px;
}

.card-front .card-name {
  font-size: var(--text-label);
  color: var(--pixel-white);
  text-align: center;
  margin-bottom: 2px;
}

.card-front .card-role {
  font-size: var(--text-micro);
  color: var(--pixel-cyan);
  margin-bottom: 2px;
}

.card-front .card-tags {
  font-size: 4.5px;
  color: var(--pixel-yellow);
  text-align: center;
  line-height: 1.5;
}

/* Score bar */
.card-score-bar {
  width: 80%;
  height: 6px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  position: relative;
  margin-top: 4px;
  overflow: hidden;
}

.score-fill {
  height: 100%;
  transition: width 0.3s;
}

.score-label {
  position: absolute;
  top: -1px;
  right: 2px;
  font-size: var(--text-micro);
  color: var(--pixel-white);
  text-shadow: 0 0 2px #000;
}

.card-reasoning {
  font-size: var(--text-micro);
  color: var(--text-dim);
  text-align: center;
  margin-top: 2px;
  line-height: 1.4;
  max-height: 16px;
  overflow: hidden;
}

.card-front .card-cost {
  font-size: 4.5px;
  color: var(--pixel-yellow);
  margin-top: 2px;
}

.card-model {
  font-size: 4.5px;
  color: var(--pixel-cyan);
  margin-top: 1px;
  opacity: 0.7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 90px;
}

.card-hosting {
  font-size: 4.5px;
  color: var(--pixel-gray);
  margin-top: 1px;
}

/* Back of card */
.card-back {
  background: #0c0c22;
  transform: rotateY(180deg);
  padding: 5px;
  overflow-y: auto;
  font-size: 4.5px;
  line-height: 1.5;
  color: var(--pixel-white);
}

.card-back .card-detail-title {
  font-size: var(--text-micro);
  color: var(--pixel-yellow);
  margin-top: 3px;
  margin-bottom: 1px;
}

.card-back .card-detail-text {
  font-size: 4.5px;
  color: var(--text-dim);
}

.card-actions {
  display: flex;
  gap: 3px;
  margin-top: 5px;
}

.card-actions .pixel-btn {
  font-size: var(--text-micro);
  padding: 3px 5px;
  flex: 1;
}

.card-actions .pixel-btn.interview {
  background: var(--pixel-cyan);
  color: #000;
}

/* Batch hire bar */
.candidate-batch-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  border-top: 2px solid var(--border);
  background: var(--bg-dark);
}

.candidate-batch-bar.hidden {
  display: none;
}

.batch-count {
  font-size: var(--text-label);
  color: var(--pixel-gray);
}

.batch-hire-btn {
  font-size: 7px !important;
  padding: 5px 14px !important;
  background: var(--pixel-green) !important;
  color: #000 !important;
  letter-spacing: 1px;
}

.batch-hire-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.batch-hire-btn:not(:disabled):hover {
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.4);
}

/* ===== Onboarding Progress Toast (non-blocking) ===== */
.onboarding-toast {
  position: fixed;
  bottom: 12px;
  right: 12px;
  width: 260px;
  max-height: 300px;
  background: var(--bg-panel);
  border: 1px solid var(--pixel-cyan);
  box-shadow: 0 0 20px rgba(0, 221, 255, 0.2);
  z-index: var(--z-modal);
  font-family: var(--font-pixel);
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.onboarding-toast.hidden {
  display: none;
}

.onboarding-toast.collapsed {
  max-height: 24px;
}

.onboarding-toast-header {
  display: flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-2);
  background: var(--bg-dark);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  gap: var(--sp-1);
}

.onboarding-toast-title {
  font-size: var(--text-label);
  color: var(--pixel-cyan);
  flex: 1;
}

.onboarding-toast-toggle,
.onboarding-toast-close {
  background: none;
  border: none;
  color: var(--pixel-gray);
  font-size: var(--text-label);
  cursor: pointer;
  padding: 0 2px;
}

.onboarding-toast-toggle:hover,
.onboarding-toast-close:hover {
  color: var(--pixel-white);
}

.onboarding-toast-body {
  padding: 6px;
  overflow-y: auto;
  max-height: 260px;
}

.onboarding-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.onboarding-item {
  border: 1px solid var(--border);
  padding: 4px 6px;
  background: var(--bg-dark);
  transition: border-color 0.3s;
}

.onboarding-item.completed {
  border-color: var(--pixel-green);
}

.onboarding-item.failed {
  border-color: var(--pixel-red);
}

.onboarding-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}

.onboarding-item-name {
  font-size: var(--text-label);
  color: var(--pixel-white);
}

.onboarding-item-role {
  font-size: var(--text-micro);
  color: var(--pixel-cyan);
}

.onboarding-steps {
  display: flex;
  gap: 2px;
  align-items: center;
}

.onboarding-step {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 1px 3px;
  font-size: var(--text-micro);
  flex: 1;
}

.step-dot {
  width: 5px;
  height: 5px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.onboarding-step.waiting .step-dot {
  background: transparent;
  border-color: var(--pixel-gray);
}

.onboarding-step.active .step-dot {
  background: var(--pixel-cyan);
  border-color: var(--pixel-cyan);
  box-shadow: 0 0 4px var(--pixel-cyan);
  animation: pulse-dot 1s infinite;
}

.onboarding-step.done .step-dot {
  background: var(--pixel-green);
  border-color: var(--pixel-green);
}

.onboarding-step.failed .step-dot {
  background: var(--pixel-red);
  border-color: var(--pixel-red);
}

.step-label {
  color: var(--pixel-gray);
}

.onboarding-step.active .step-label {
  color: var(--pixel-cyan);
}

.onboarding-step.done .step-label {
  color: var(--pixel-green);
}

.onboarding-step.failed .step-label {
  color: var(--pixel-red);
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.onboarding-item-message {
  font-size: 4.5px;
  color: var(--text-dim);
  margin-top: 2px;
  min-height: 6px;
}

/* ===== Candidate Card Wrapper ===== */
.candidate-card-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
}
.candidate-card-wrapper .card-detail-btn {
  font-size: var(--text-body);
  padding: 2px 8px;
  width: 100%;
  max-width: 105px;
}
.card-config-warning {
  margin-top: 4px;
  padding: 2px 4px;
  font-size: var(--text-micro);
  color: #000;
  background: var(--pixel-yellow);
  border: 1px solid #000;
  text-align: center;
}

/* ===== Candidate Detail Panel ===== */
.candidate-detail-panel.hidden { display: none; }
.candidate-detail-panel {
  width: 280px;
  min-width: 260px;
  flex-shrink: 0;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  max-height: calc(85vh - 80px);
  overflow: hidden;
}
.candidate-card.detail-active {
  outline: 2px solid var(--pixel-cyan);
  outline-offset: 1px;
}
.detail-panel-header {
  display: flex;
  justify-content: flex-end;
  padding: 6px 8px 0;
}
.detail-panel-close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: var(--text-heading);
  cursor: pointer;
}
.detail-panel-close:hover { color: var(--pixel-white); }
.detail-panel-content {
  padding: var(--pad-button);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.detail-config-warning-box {
  margin-top: 4px;
  padding: 6px;
  border: 1px solid var(--pixel-yellow);
  background: rgba(255, 204, 0, 0.08);
  color: var(--pixel-white);
  font-size: var(--text-body);
  line-height: 1.5;
}
.detail-config-warning-note {
  margin-top: 6px;
  color: var(--text-dim);
}
.detail-config-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: var(--pixel-yellow);
  font-size: var(--text-body);
}
.detail-config-toggle input {
  margin: 0;
}
.detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.detail-avatar { font-size: var(--text-display); }
.detail-name-block { flex: 1; }
.detail-name {
  font-size: var(--text-heading);
  font-weight: bold;
  color: var(--pixel-white);
}
.detail-role {
  font-size: var(--text-subheading);
  color: var(--pixel-cyan);
}
.detail-score {
  border: 2px solid;
  border-radius: var(--radius-full);
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.detail-score span {
  font-size: var(--text-heading);
  font-weight: bold;
}
.detail-score small {
  font-size: var(--text-body);
  color: var(--text-dim);
}
.detail-section {
  margin-bottom: 10px;
}
.detail-label {
  font-size: var(--text-body);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.detail-text {
  font-size: var(--text-subheading);
  color: var(--pixel-white);
  line-height: 1.5;
}
.detail-description {
  font-size: var(--text-subheading);
  color: var(--pixel-white);
  line-height: 1.6;
  max-height: 300px;
  overflow-y: auto;
  padding: 6px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.detail-tags-list,
.detail-skills-list,
.detail-tools-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}
.detail-tag {
  font-size: var(--text-body);
  padding: 2px 6px;
  background: rgba(255, 255, 0, 0.15);
  color: var(--pixel-yellow);
  border-radius: var(--radius-sm);
}
.detail-skill {
  font-size: var(--text-body);
  padding: 2px 6px;
  background: rgba(0, 255, 136, 0.12);
  color: var(--pixel-green);
  border-radius: var(--radius-sm);
}
.detail-skill em {
  font-size: var(--text-body);
  color: var(--text-dim);
  margin-left: 2px;
}
.detail-tool {
  font-size: var(--text-body);
  padding: 2px 6px;
  background: rgba(74, 158, 255, 0.12);
  color: var(--pixel-cyan);
  border-radius: var(--radius-sm);
}
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}
.detail-panel-actions {
  display: flex;
  gap: var(--sp-1);
  padding: var(--pad-button);
  border-top: 1px solid var(--border);
}
.detail-panel-actions .pixel-btn {
  flex: 1;
  font-size: var(--text-subheading);
}
.detail-panel-actions .pixel-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.6);
}

/* ===== Interview Chatbot Modal ===== */
.interview-modal-content {
  max-width: 520px;
  max-height: 85vh;
  border-color: var(--pixel-cyan);
  box-shadow: 0 0 30px rgba(0, 204, 255, 0.15);
  display: flex;
  flex-direction: column;
}

.interview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.interview-header-info {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1;
}

.interview-model-badge {
  font-size: var(--text-micro);
  color: var(--pixel-cyan);
  background: rgba(0, 204, 255, 0.1);
  border: 1px solid var(--pixel-cyan);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.chat-container {
  flex: 1;
  overflow-y: auto;
  padding: var(--pad-component);
  background: var(--bg-dark);
  min-height: 300px;
  max-height: 50vh;
  scroll-behavior: smooth;
}

.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* System message */
.chat-msg-system {
  text-align: center;
  font-size: var(--text-label);
  color: var(--text-dim);
  padding: 4px 12px;
  font-style: italic;
}

/* Message bubble base */
.chat-bubble {
  display: flex;
  gap: var(--sp-2);
  max-width: 85%;
  animation: chatFadeIn 0.2s ease-out;
}

@keyframes chatFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* CEO messages (right-aligned) */
.chat-bubble.outgoing {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-bubble.outgoing .bubble-content {
  background: rgba(0, 204, 255, 0.12);
  border: 1px solid rgba(0, 204, 255, 0.3);
  border-radius: var(--radius-md) var(--radius-sm) var(--radius-md) var(--radius-md);
}

/* Candidate messages (left-aligned) */
.chat-bubble.incoming {
  align-self: flex-start;
}

.chat-bubble.incoming .bubble-content {
  background: rgba(255, 204, 0, 0.08);
  border: 1px solid rgba(255, 204, 0, 0.2);
  border-radius: var(--radius-sm) var(--radius-md) var(--radius-md) var(--radius-md);
}

.bubble-avatar {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-subheading);
  flex-shrink: 0;
  background: var(--bg-panel);
  border: 1px solid var(--border);
}

.bubble-content {
  padding: 6px 10px;
  font-size: var(--text-label);
  line-height: 1.6;
}

.bubble-sender {
  font-size: 5.5px;
  font-weight: bold;
  margin-bottom: 2px;
  opacity: 0.7;
}

.chat-bubble.outgoing .bubble-sender { color: var(--pixel-cyan); }
.chat-bubble.incoming .bubble-sender { color: var(--pixel-yellow); }

.bubble-text {
  color: var(--pixel-white);
  word-break: break-word;
  white-space: pre-wrap;
}

/* Inline image in chat */
.bubble-image {
  max-width: 200px;
  max-height: 150px;
  border-radius: var(--radius-md);
  margin-top: 4px;
  cursor: pointer;
  border: 1px solid var(--border);
}

.bubble-image:hover {
  border-color: var(--pixel-cyan);
}

/* Inline file attachment */
.bubble-file {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-label);
  color: var(--pixel-cyan);
  margin-top: 4px;
}

.bubble-file::before {
  content: '\1F4C4';
}

/* Typing indicator */
.chat-typing {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 4px 0;
}

.chat-typing.hidden { display: none; }

.typing-avatar {
  font-size: var(--text-subheading);
}

.typing-dots {
  display: flex;
  gap: 3px;
}

.typing-dots span {
  width: 4px;
  height: 4px;
  background: var(--pixel-yellow);
  border-radius: var(--radius-full);
  animation: typingBounce 1.2s infinite ease-in-out;
}

.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* File preview bar */
.chat-preview-bar {
  display: flex;
  gap: var(--sp-1);
  padding: 6px 12px;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  overflow-x: auto;
}

.chat-preview-bar.hidden { display: none; }

.chat-preview-item {
  position: relative;
  flex-shrink: 0;
}

.chat-preview-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.chat-preview-file {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-micro);
  color: var(--text-dim);
  text-align: center;
  word-break: break-all;
  padding: 2px;
}

.chat-preview-remove {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  background: var(--pixel-red);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--text-label);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Chat input area */
.chat-input-area {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-1);
  padding: var(--pad-button);
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
}

.chat-attach-btn {
  cursor: pointer;
  font-size: var(--text-subheading);
  padding: var(--sp-1);
  opacity: 0.6;
  transition: opacity 0.15s;
  flex-shrink: 0;
}

.chat-attach-btn:hover { opacity: 1; }

.chat-textarea {
  flex: 1;
  font-family: 'Press Start 2P', monospace;
  font-size: var(--text-label);
  background: var(--bg-dark);
  color: var(--pixel-white);
  border: 1px solid var(--border);
  padding: var(--sp-1) var(--sp-2);
  resize: none;
  min-height: 24px;
  max-height: 80px;
  line-height: 1.6;
  overflow-y: auto;
}

.chat-textarea:focus {
  border-color: var(--pixel-cyan);
  outline: none;
}

.chat-textarea::placeholder {
  color: var(--text-dim);
}

.chat-send-btn {
  background: var(--pixel-cyan);
  color: #000;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-subheading);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}

.chat-send-btn:hover { background: #33ddff; }
.chat-send-btn:disabled { opacity: 0.4; cursor: default; }

.interview-actions {
  display: flex;
  gap: var(--sp-1);
  justify-content: flex-end;
  padding: 8px 12px 12px;
}

/* ===== Thinking animation ===== */
.thinking-indicator {
  display: inline-block;
  color: var(--pixel-cyan);
}

.thinking-indicator::after {
  content: '...';
  animation: blink-dots 1s steps(4) infinite;
}

@keyframes blink-dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
}

/* ===== Task Panel (above roster) ===== */
.task-empty {
  color: var(--text-dim);
  font-size: var(--text-label);
  padding: var(--sp-1) var(--sp-2);
  text-align: center;
}

/* Follow-up input in detail view */
.task-followup-section .hidden {
  display: none;
}
.task-followup-section {
  margin: 8px 0;
}
.followup-textarea {
  width: 100%;
  font-size: var(--text-label);
  font-family: 'Press Start 2P', monospace;
  background: var(--bg-dark);
  color: var(--pixel-white);
  border: 1px solid var(--border);
  padding: 6px;
  resize: vertical;
  min-height: 40px;
  box-sizing: border-box;
}
.followup-textarea:focus {
  border-color: var(--pixel-cyan);
  outline: none;
}

/* Task result report in detail view */
.task-result-report {
  font-size: var(--text-label);
  color: var(--pixel-white);
  background: var(--bg-dark);
  padding: var(--sp-2) var(--pad-component);
  border: 1px solid var(--border);
  border-left: 3px solid var(--pixel-green);
  max-height: 300px;
  overflow-y: auto;
  line-height: 1.8;
}
.task-result-report.md-rendered br + br { display: none; }
.task-result-report .md-h1 { font-size: var(--text-body); color: var(--pixel-yellow); margin: 6px 0 3px; }
.task-result-report .md-h2 { font-size: var(--text-label); color: var(--pixel-cyan); margin: 5px 0 2px; }
.task-result-report .md-h3 { font-size: 6.5px; color: var(--pixel-green); margin: 4px 0 2px; }
.task-result-report .md-li { padding-left: 8px; position: relative; }
.task-result-report .md-li::before { content: "·"; position: absolute; left: 2px; color: var(--text-dim); }
.task-result-report .md-oli::before { content: ""; }
.task-result-report strong { color: var(--pixel-yellow); }
.task-result-report em { color: var(--pixel-cyan); }

/* ===== Projects Panel ===== */
.project-panel-card {
  position: relative;
  padding: var(--sp-1) var(--sp-2);
  border-left: 3px solid var(--pixel-white);
  margin-bottom: 3px;
  background: var(--bg-dark);
  font-size: var(--text-label);
  transition: background 0.15s;
  cursor: pointer;
}

.project-panel-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-left-width: 4px;
}

/* Status-based sidebar border colors */
.project-panel-card.status-running {
  border-left-color: var(--pixel-white);
}

.project-panel-card.status-pending {
  border-left-color: var(--pixel-yellow);
}

.project-panel-card.status-completed {
  border-left-color: var(--pixel-green);
}

.project-panel-name {
  color: var(--pixel-white);
  font-size: var(--text-label);
  line-height: 1.6;
}

.project-panel-meta {
  color: var(--text-dim);
  font-size: var(--text-micro);
  margin-top: 2px;
}

.ceo-pending-badge {
  color: #f39c12;
  font-weight: bold;
  margin-right: 4px;
}

/* Project card task progress overlay */
.proj-card-progress {
  margin-top: 2px;
  font-size: var(--text-body);
}

.proj-progress {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-top: 2px;
  font-size: var(--text-micro);
  color: var(--text-dim);
}

.proj-progress-track {
  flex: 1;
  max-width: 60px;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.proj-progress-bar {
  height: 100%;
  background: var(--pixel-green);
  border-radius: var(--radius-sm);
  transition: width 0.3s ease;
}

.proj-executor {
  color: var(--text-dim);
  font-size: var(--text-micro);
  margin-top: 1px;
}

.proj-cancel-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  background: transparent;
  border: none;
  color: #666;
  cursor: pointer;
  font-size: var(--text-body);
  padding: 0 2px;
}
.proj-cancel-btn:hover { color: #ff4444; }

.proj-trace-btn {
  position: absolute;
  top: 2px;
  right: 16px;
  background: transparent;
  border: 1px solid #333;
  color: #4af;
  cursor: pointer;
  font-size: var(--text-label);
  font-family: monospace;
  padding: 0 3px;
  line-height: 1.4;
}
.proj-trace-btn:hover { border-color: #4af; }

/* ===== Product Groups ===== */
.product-group {
  margin-bottom: 2px;
}

.product-group.collapsed .product-group-body {
  display: none;
}

.product-group-header {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  background: var(--bg-dark);
  border-left: 3px solid var(--pixel-cyan);
  cursor: pointer;
  font-size: var(--text-label);
  color: var(--pixel-white);
  transition: background 0.15s;
}

.product-group-header:hover {
  background: rgba(255, 255, 255, 0.08);
}

.orphan-header {
  border-left-color: var(--text-dim);
  color: var(--text-dim);
}

.product-expand-arrow {
  font-size: var(--text-label);
  color: var(--pixel-cyan);
  width: 10px;
}

.product-status-dot {
  font-size: var(--text-micro);
}

.product-status-dot.status-active { color: var(--pixel-green); }
.product-status-dot.status-planning { color: var(--pixel-yellow); }
.product-status-dot.status-archived { color: var(--text-dim); }

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

.product-group-body {
  padding-left: 12px;
}

/* Subsections (OKR, Issues, Projects) */
.product-subsection {
  margin-top: 2px;
}

.product-subsection.collapsed .product-subsection-body {
  display: none;
}

.product-subsection-header {
  padding: 3px 8px;
  font-size: var(--text-label);
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s;
}

.product-subsection-header:hover {
  color: var(--pixel-white);
}

.subsection-arrow {
  font-size: var(--text-micro);
  color: var(--pixel-cyan);
  margin-right: 2px;
}

.product-subsection-body {
  padding-left: 8px;
}

/* KR Items */
.product-kr-item {
  padding: 2px 8px;
  font-size: var(--text-micro);
}

.kr-title {
  color: var(--pixel-white);
  margin-bottom: 2px;
}

.kr-progress {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.kr-progress-track {
  flex: 1;
  max-width: 80px;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.kr-progress-bar {
  height: 100%;
  background: var(--pixel-green);
  border-radius: var(--radius-sm);
  transition: width 0.3s ease;
}

.kr-progress-text {
  color: var(--text-dim);
  font-size: var(--text-micro);
}

/* Issue Items */
.product-issue-item {
  padding: 2px 8px;
  font-size: var(--text-micro);
  color: var(--pixel-white);
}

.issue-priority {
  font-weight: bold;
  margin-right: 4px;
}

.priority-p0 .issue-priority { color: #ff4444; }
.priority-p1 .issue-priority { color: #ff8800; }
.priority-p2 .issue-priority { color: var(--pixel-yellow); }
.priority-p3 .issue-priority { color: var(--text-dim); }

.issue-title {
  color: var(--pixel-white);
}

/* ===== CEO Project Selector ===== */
.ceo-project-selector {
  margin-bottom: 6px;
}

.ceo-project-selector select {
  width: 100%;
  background: #0a0a18;
  color: var(--pixel-white);
  border: 2px solid var(--border);
  font-family: 'Press Start 2P', monospace;
  font-size: var(--text-label);
  padding: var(--sp-1) var(--sp-2);
  outline: none;
  cursor: pointer;
}

.ceo-project-selector select:focus {
  border-color: var(--pixel-cyan);
}

.ceo-project-selector input {
  width: 100%;
  background: #0a0a18;
  color: var(--pixel-white);
  border: 2px solid var(--pixel-green);
  font-family: 'Press Start 2P', monospace;
  font-size: var(--text-label);
  padding: var(--sp-1) var(--sp-2);
  margin-top: 4px;
  outline: none;
}

.ceo-project-selector input:focus {
  border-color: var(--pixel-cyan);
  box-shadow: 0 0 8px rgba(0, 221, 255, 0.3);
}

.ceo-project-selector .hidden {
  display: none;
}

/* ===== Operations Dashboard Modal ===== */
.dashboard-modal-content {
  max-width: 600px;
  max-height: 80vh;
  border-color: var(--pixel-orange);
  box-shadow: 0 0 40px rgba(255, 136, 68, 0.15);
}

.dashboard-grid {
  max-height: 60vh;
  overflow-y: auto;
}

.dash-section {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.dash-section:last-child {
  border-bottom: none;
}

.dash-title {
  font-size: var(--text-label);
  color: var(--pixel-orange);
  margin-bottom: 6px;
}

.dash-stats {
  display: flex;
  gap: var(--gap-stack);
  flex-wrap: wrap;
}

.dash-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 50px;
}

.dash-num {
  font-size: var(--text-subheading);
  color: var(--pixel-white);
  font-weight: bold;
}

.dash-label {
  font-size: var(--text-micro);
  color: var(--text-dim);
  margin-top: 2px;
}

.dash-dept-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dash-dept-item {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-label);
  color: var(--pixel-white);
  padding: 3px 6px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
}

.dash-cost-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-label);
}
.dash-cost-table th {
  text-align: left;
  color: var(--text-dim);
  padding: 2px 4px;
  border-bottom: 1px solid var(--border);
}
.dash-cost-table td {
  padding: 2px 4px;
  color: var(--pixel-white);
  border-bottom: 1px solid var(--bg-dark);
}
.dash-cost-table td:first-child {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Settings sub-section headers */
.settings-section-header {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 5px 8px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--border);
}
.settings-section-header:hover {
  background: rgba(0, 255, 255, 0.05);
}
.settings-section-title {
  font-family: 'Press Start 2P', monospace;
  font-size: var(--text-label);
  color: var(--pixel-cyan);
}
.settings-collapse-arrow {
  font-size: var(--text-label);
  color: var(--pixel-cyan);
  display: inline-block;
  transition: transform 0.15s ease;
}
.settings-section-header:not(.collapsed) .settings-collapse-arrow {
  transform: rotate(90deg);
}
.settings-section-body {
  overflow: hidden;
}
.settings-section-body.collapsed {
  display: none;
}

.api-provider-card {
  background: var(--bg-dark);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-2);
  margin-bottom: 6px;
}
.api-card-header {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-bottom: 6px;
}
.api-card-toggle {
  cursor: pointer;
  user-select: none;
  margin-bottom: 0;
}
.api-card-arrow {
  font-size: var(--text-label);
  color: var(--text-dim);
  margin-left: auto;
  display: inline-block;
  transition: transform 0.15s ease;
}
.api-card-toggle.collapsed .api-card-arrow {
  transform: rotate(-90deg);
}
.api-card-body.collapsed {
  display: none;
}
.api-card-title {
  font-family: 'Press Start 2P', monospace;
  font-size: var(--text-body);
  color: var(--pixel-white);
}
.api-card-status {
  font-size: var(--text-label);
  color: var(--text-dim);
  margin-left: 6px;
}
.api-status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  display: inline-block;
  background: var(--pixel-red);
}
.api-status-dot.online {
  background: var(--pixel-green);
  box-shadow: 0 0 4px var(--pixel-green);
}
.api-status-dot.offline {
  background: var(--pixel-red);
}
.api-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.api-field-label {
  font-size: var(--text-label);
  color: var(--text-dim);
  margin-top: 2px;
}
.api-key-input {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--pixel-white);
  font-family: 'Press Start 2P', monospace;
  font-size: var(--text-label);
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  width: 100%;
}
.api-key-input:focus {
  border-color: var(--pixel-blue);
  outline: none;
}
.api-card-actions {
  display: flex;
  gap: var(--sp-1);
  align-items: center;
  margin-top: 4px;
}
.api-test-btn {
  font-size: 7px !important;
}
.api-test-result {
  font-size: var(--text-label);
  font-family: 'Press Start 2P', monospace;
  margin-left: 4px;
}
.api-test-result.success {
  color: var(--pixel-green);
}
.api-test-result.fail {
  color: var(--pixel-red);
}
#api-settings-content {
  padding: var(--sp-1);
  text-align: left;
}
.api-provider-card,
.api-card-body,
.api-field-label,
.api-key-input {
  text-align: left;
}

/* ===== Company Culture ===== */
.company-culture-modal-content {
  max-width: 600px;
  max-height: 80vh;
  border-color: var(--pixel-yellow);
  box-shadow: 0 0 40px rgba(255, 221, 0, 0.12);
}

.company-culture-body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  padding: var(--pad-component);
}

.company-culture-input-area {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
}

.company-culture-input-area textarea {
  flex: 1;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  color: var(--pixel-white);
  font-family: 'Press Start 2P', monospace;
  font-size: var(--text-label);
  padding: var(--sp-2);
  resize: vertical;
  outline: none;
  min-height: 36px;
}

.company-culture-input-area textarea:focus {
  border-color: var(--pixel-yellow);
}

.company-culture-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  max-height: 55vh;
  overflow-y: auto;
}

.company-culture-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  background: var(--bg-dark);
  border: 1px solid var(--border);
  padding: 10px;
  transition: border-color 0.2s;
}

.company-culture-card:hover {
  border-color: var(--pixel-yellow);
}

.company-culture-card-num {
  font-family: 'Press Start 2P', monospace;
  font-size: var(--text-body);
  color: var(--pixel-yellow);
  min-width: 20px;
  text-align: right;
  line-height: 1.6;
}

.company-culture-card-content {
  flex: 1;
  font-size: var(--text-label);
  color: var(--pixel-white);
  line-height: 1.6;
  word-break: break-all;
}

.company-culture-card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-1);
  min-width: 50px;
}

.company-culture-card-date {
  font-size: var(--text-micro);
  color: var(--pixel-gray);
}

.company-culture-delete-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--pixel-gray);
  font-size: var(--text-label);
  cursor: pointer;
  padding: 2px 4px;
  transition: color 0.2s, border-color 0.2s;
}

.company-culture-delete-btn:hover {
  color: var(--pixel-red);
  border-color: var(--pixel-red);
}

/* ===== File Edit Review (inside review queue) ===== */

.file-edit-meta {
  margin-bottom: 6px;
}

.file-edit-info {
  display: flex;
  gap: var(--sp-2);
  font-size: var(--text-label);
  padding: 2px 0;
}

.fe-label {
  color: var(--pixel-cyan);
  min-width: 40px;
}

.fe-value {
  color: var(--pixel-white);
  word-break: break-all;
}

.file-edit-diff {
  border: 1px solid var(--border);
  background: var(--bg-dark);
  max-height: 200px;
  overflow-y: auto;
}

.fe-diff-header {
  display: flex;
  border-bottom: 1px solid var(--border);
}

.fe-diff-old-h, .fe-diff-new-h {
  flex: 1;
  font-size: var(--text-label);
  padding: 3px 6px;
  text-align: center;
}

.fe-diff-old-h {
  color: var(--pixel-red);
  border-right: 1px solid var(--border);
}

.fe-diff-new-h {
  color: var(--pixel-green);
}

.fe-diff-body {
  display: flex;
}

.fe-diff-col {
  flex: 1;
  font-size: 5.5px;
  font-family: monospace;
  line-height: 1.5;
  padding: var(--sp-1);
  white-space: pre-wrap;
  word-break: break-all;
}

.fe-diff-old {
  border-right: 1px solid var(--border);
}

.fe-diff-line {
  padding: 0 2px;
}

.fe-diff-line.fe-changed {
  background: rgba(255, 221, 0, 0.1);
}

.fe-diff-line.fe-added {
  background: rgba(0, 255, 136, 0.1);
}

.fe-diff-line.fe-truncated {
  color: var(--text-dim);
  font-style: italic;
}

/* ===== Markdown Rendering ===== */
.md-rendered {
  font-size: var(--text-label);
  line-height: 1.8;
  color: var(--pixel-white);
  word-break: break-word;
}

.md-h1 {
  font-size: var(--text-body);
  font-weight: bold;
  color: var(--pixel-yellow);
  margin: 4px 0 2px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}

.md-h2 {
  font-size: var(--text-body);
  font-weight: bold;
  color: var(--pixel-cyan);
  margin: 3px 0 2px;
}

.md-h3 {
  font-size: 7.5px;
  font-weight: bold;
  color: var(--pixel-green);
  margin: 2px 0 1px;
}

.md-h4 {
  font-size: var(--text-label);
  font-weight: bold;
  color: var(--pixel-white);
  margin: 2px 0 1px;
}

.md-li {
  padding-left: 10px;
  position: relative;
}

.md-li::before {
  content: '•';
  position: absolute;
  left: 3px;
  color: var(--pixel-cyan);
}

.md-li.md-oli::before {
  content: '›';
}

.md-inline-code {
  background: var(--bg-dark);
  padding: 0 3px;
  border-radius: var(--radius-sm);
  color: var(--pixel-orange);
  font-family: monospace;
  font-size: 6.5px;
}

.md-code-block {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  font-size: var(--text-label);
  font-family: monospace;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--pixel-green);
  margin: 3px 0;
  max-height: 120px;
  overflow-y: auto;
}

.md-code-block code {
  font-family: inherit;
  font-size: inherit;
}

.md-hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 4px 0;
}

/* ===== Code Update Banner ===== */
.code-update-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-toast-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 16px;
  background: rgba(0, 136, 255, 0.92);
  color: #fff;
  font-size: var(--text-body);
  font-family: 'Press Start 2P', monospace;
}

.code-update-banner.hidden {
  display: none;
}

.code-update-banner .pixel-btn.small {
  font-size: var(--text-body);
  padding: 3px 10px;
  background: var(--pixel-green);
  color: #000;
  border: none;
  cursor: pointer;
}

.code-update-banner .dismiss-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: var(--text-heading);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

/* ===== Reconnecting Overlay ===== */
.reconnecting-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-toast);
  display: flex;
  justify-content: center;
  padding: var(--sp-2);
  pointer-events: none;
}

.reconnecting-overlay.hidden {
  display: none;
}

.reconnecting-text {
  background: rgba(255, 136, 68, 0.9);
  color: #000;
  padding: 6px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--text-subheading);
  font-family: 'Press Start 2P', monospace;
  animation: reconnect-pulse 1.5s ease-in-out infinite;
}

@keyframes reconnect-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ===== Resolution Review Modal ===== */

.resolution-modal-content {
  max-width: 700px;
  max-height: 85vh;
}

.resolution-modal-body {
  flex-direction: column !important;
  gap: var(--sp-2);
  overflow-y: auto;
  max-height: 60vh;
}

.resolution-task-info {
  padding: var(--sp-1) var(--sp-2);
  border-left: 3px solid var(--pixel-yellow);
  margin-bottom: 4px;
}

.res-task-label {
  font-size: var(--text-label);
  color: var(--pixel-cyan);
}

.res-task-text {
  color: var(--pixel-white);
}

.res-meta {
  font-size: var(--text-label);
  color: var(--text-dim);
  margin-top: 2px;
}

.res-edit-card {
  border: 1px solid var(--border);
  background: var(--bg-dark);
  padding: var(--sp-2);
  margin-bottom: 6px;
  border-radius: var(--radius-sm);
}

.res-edit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.res-edit-file {
  font-size: var(--text-label);
  color: var(--pixel-cyan);
  word-break: break-all;
}

.res-edit-by {
  font-size: var(--text-label);
  color: var(--text-dim);
  white-space: nowrap;
  margin-left: 8px;
}

.res-edit-reason {
  font-size: var(--text-label);
  color: var(--pixel-white);
  margin-bottom: 6px;
  padding: 2px 0;
}

.res-edit-actions {
  display: flex;
  gap: var(--gap-stack);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.res-radio {
  font-size: var(--text-label);
  color: var(--pixel-white);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  cursor: pointer;
}

.res-radio input[type="radio"] {
  accent-color: var(--pixel-green);
  cursor: pointer;
}

/* ===== Deferred Resolutions Panel ===== */

#deferred-body {
  background: var(--bg-panel);
  border: 2px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  overflow-y: auto;
  max-height: 200px;
}

#deferred-list {
  padding: 4px 6px;
}

.deferred-empty {
  font-size: var(--text-label);
  color: var(--text-dim);
  padding: 6px;
  text-align: center;
}

.deferred-card {
  border-bottom: 1px solid var(--border);
  padding: 4px 0;
}

.deferred-card:last-child {
  border-bottom: none;
}

.deferred-card.expired {
  opacity: 0.6;
}

.deferred-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-1);
}

.deferred-file {
  font-size: var(--text-label);
  color: var(--pixel-cyan);
  word-break: break-all;
}

.deferred-reason {
  font-size: 5.5px;
  color: var(--text-dim);
  margin: 2px 0;
}

.deferred-expired {
  font-size: 5.5px;
  color: var(--pixel-red);
  border: 1px solid var(--pixel-red);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.deferred-active {
  font-size: 5.5px;
  color: var(--pixel-green);
  border: 1px solid var(--pixel-green);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.deferred-exec-btn {
  margin-top: 3px;
  padding: 3px 8px !important;
  font-size: 6px !important;
}

.pixel-btn.small {
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--text-label);
  flex: none;
}

/* ===== Inquiry chat (inside meeting modal) ===== */
#meeting-inquiry-input-area {
  border-top: 1px solid var(--border);
  padding: 6px;
}

#meeting-inquiry-actions {
  padding: var(--sp-1) var(--sp-2);
  text-align: right;
}

/* ===== Agent Task Board (Employee Detail Modal) ===== */
.emp-taskboard-item {
  padding: 4px 6px;
  margin-bottom: 3px;
  border-left: 3px solid var(--border);
  background: var(--bg-dark);
  font-size: var(--text-label);
  line-height: 1.6;
  transition: border-color 0.2s;
}

.emp-taskboard-item.pending {
  border-left-color: var(--pixel-yellow);
}

.emp-taskboard-item.in-progress {
  border-left-color: var(--pixel-green);
  animation: task-pulse 2s ease-in-out infinite;
}

.emp-taskboard-item.completed {
  border-left-color: var(--pixel-gray);
  opacity: 0.7;
}

.emp-taskboard-item.failed {
  border-left-color: var(--pixel-red);
  opacity: 0.8;
}

.emp-taskboard-item.cancelled {
  border-left-color: var(--pixel-gray);
  opacity: 0.5;
  text-decoration: line-through;
}

.emp-task-cancel-btn {
  background: none;
  border: 1px solid var(--pixel-red);
  color: var(--pixel-red);
  font-family: 'Press Start 2P', monospace;
  font-size: var(--text-micro);
  padding: 1px 4px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.1s;
}

.emp-task-cancel-btn:hover {
  background: var(--pixel-red);
  color: #000;
}

.emp-taskboard-item.sub-task {
  margin-left: 10px;
  border-left-width: 2px;
  font-size: 5.5px;
}

/* Cron management list */
.emp-cron-item {
  padding: 4px 5px;
  border-left: 3px solid var(--pixel-cyan);
  margin-bottom: 3px;
  background: rgba(0,255,255,0.03);
  position: relative;
}

.emp-cron-info {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-label);
}

.cron-status-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.cron-status-dot.running {
  background: var(--pixel-green);
  box-shadow: 0 0 3px var(--pixel-green);
  animation: cron-pulse-dot 1.5s infinite;
}

.cron-status-dot.stopped {
  background: var(--pixel-gray);
}

@keyframes cron-pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.cron-name {
  color: var(--pixel-white);
  font-family: 'Press Start 2P', monospace;
  font-size: var(--text-micro);
  word-break: break-all;
}

.cron-interval {
  color: var(--pixel-yellow);
  font-family: 'Press Start 2P', monospace;
  font-size: var(--text-micro);
  flex-shrink: 0;
}

.emp-cron-desc {
  color: var(--pixel-gray);
  font-size: var(--text-micro);
  margin-top: 1px;
  word-break: break-word;
  max-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.emp-cron-cancel-btn {
  position: absolute;
  top: 3px;
  right: 3px;
  background: none;
  border: 1px solid var(--pixel-red);
  color: var(--pixel-red);
  font-family: 'Press Start 2P', monospace;
  font-size: var(--text-micro);
  padding: 1px 4px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.1s;
}

.emp-cron-cancel-btn:hover {
  background: var(--pixel-red);
  color: #000;
}

.cron-task-count {
  color: var(--pixel-gray);
  font-size: var(--text-micro);
  opacity: 0.7;
}

.emp-cron-stop-all-btn {
  background: none;
  border: 1px solid var(--pixel-red);
  color: var(--pixel-red);
  font-family: var(--font-pixel);
  font-size: var(--text-micro);
  padding: 1px 4px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.emp-cron-stop-all-btn:hover {
  background: var(--pixel-red);
  color: #000;
}

@keyframes task-pulse {
  0%, 100% { background: var(--bg-dark); }
  50% { background: rgba(0, 255, 136, 0.05); }
}

.emp-taskboard-status {
  font-size: var(--text-micro);
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 1px;
}

.emp-taskboard-item.pending .emp-taskboard-status { color: var(--pixel-yellow); }
.emp-taskboard-item.in-progress .emp-taskboard-status { color: var(--pixel-green); }
.emp-taskboard-item.completed .emp-taskboard-status { color: var(--pixel-gray); }
.emp-taskboard-item.failed .emp-taskboard-status { color: var(--pixel-red); }
.emp-taskboard-item.cancelled .emp-taskboard-status { color: var(--pixel-gray); }

.emp-taskboard-desc {
  color: var(--pixel-white);
  word-break: break-word;
  max-height: 60px;
  overflow-y: auto;
}

.emp-taskboard-result {
  color: var(--text-dim);
  font-size: var(--text-micro);
  margin-top: 2px;
  max-height: 40px;
  overflow-y: auto;
  word-break: break-word;
}

.emp-taskboard-cost {
  color: var(--pixel-yellow);
  font-size: var(--text-micro);
  margin-top: 1px;
}

/* ===== Execution Log Viewer ===== */
.emp-log-viewer {
  overflow-y: auto;
  font-size: var(--text-label);
}

.emp-log-entry {
  padding: 2px 6px;
  border-left: 2px solid var(--border);
  margin-bottom: 2px;
  line-height: 1.6;
  font-size: 5.5px;
  animation: slide-in 0.15s ease-out;
}

.emp-log-entry .log-ts {
  color: var(--text-dim);
  font-size: var(--text-micro);
  margin-right: 4px;
}

.emp-log-entry .log-content {
  color: var(--pixel-white);
  word-break: break-word;
}

.emp-log-entry.start { border-left-color: var(--pixel-green); }
.emp-log-entry.end { border-left-color: var(--pixel-cyan); }
.emp-log-entry.result { border-left-color: var(--pixel-blue); }
.emp-log-entry.error { border-left-color: var(--pixel-red); }
.emp-log-entry.error .log-content, .emp-log-entry.error .log-full { color: var(--pixel-red); }
.emp-log-entry.subtask_phase { border-left-color: var(--pixel-purple); }
.emp-log-entry.subtask_added { border-left-color: var(--pixel-purple); }
.emp-log-entry.completion_check { border-left-color: var(--pixel-yellow); }
.emp-log-entry.llm_input { border-left-color: var(--pixel-cyan); }
.emp-log-entry.llm_input .log-content, .emp-log-entry.llm_input .log-full { color: var(--pixel-cyan); }
.emp-log-entry.llm_output { border-left-color: var(--pixel-green); }
.emp-log-entry.llm_output .log-content, .emp-log-entry.llm_output .log-full { color: var(--pixel-green); }
.emp-log-entry.tool_call { border-left-color: var(--pixel-yellow); }
.emp-log-entry.tool_call .log-content, .emp-log-entry.tool_call .log-full { color: var(--pixel-yellow); }
.emp-log-entry.tool_result { border-left-color: var(--pixel-gray); }
.emp-log-entry.retry { border-left-color: var(--pixel-red); }
.emp-log-entry.retry .log-content, .emp-log-entry.retry .log-full { color: var(--pixel-red); }

.emp-log-entry .log-full {
  color: var(--pixel-white);
  word-break: break-word;
  white-space: pre-wrap;
}
.emp-log-entry .log-expand,
.emp-log-entry .log-collapse {
  color: var(--pixel-cyan);
  cursor: pointer;
  margin-left: 4px;
  font-size: var(--text-micro);
  text-decoration: underline;
}
.emp-log-entry .log-expand:hover,
.emp-log-entry .log-collapse:hover {
  color: var(--pixel-white);
}

/* ===== Tool List Modal ===== */
.tool-list-modal-content {
  max-width: 500px;
  width: 80vw;
  height: auto;
  max-height: 70vh;
}

.tool-list-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}

.tool-list-item:hover {
  background: #2a2a4a;
}

.tool-list-icon {
  width: 24px;
  height: 24px;
  image-rendering: pixelated;
}

.tool-list-no-icon {
  font-size: var(--text-heading);
  width: 24px;
  text-align: center;
}

.tool-list-info {
  flex: 1;
  min-width: 0;
}

.tool-list-name {
  font-size: var(--text-body);
  color: var(--pixel-white);
}

.tool-list-desc {
  font-size: var(--text-label);
  color: var(--pixel-gray);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-back {
  background: none;
  border: 1px solid var(--pixel-gray);
  color: var(--pixel-gray);
  cursor: pointer;
  font-family: 'Press Start 2P', monospace;
  font-size: var(--text-label);
  padding: 2px 6px;
  margin-bottom: 8px;
}

.btn-back:hover {
  border-color: var(--pixel-cyan);
  color: var(--pixel-cyan);
}

.tool-detail h3 {
  font-size: var(--text-body);
  color: var(--pixel-white);
  margin: 4px 0;
}

.tool-detail p {
  font-size: var(--text-label);
  color: var(--pixel-gray);
  line-height: 1.6;
}

.tool-detail-section-title {
  font-size: var(--text-label);
  color: var(--pixel-cyan);
  margin-top: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}

.tool-yaml-content {
  font-family: monospace;
  font-size: var(--text-label);
  background: var(--bg-dark);
  padding: 6px;
  overflow-x: auto;
  max-height: 300px;
  overflow-y: auto;
  white-space: pre-wrap;
  color: var(--pixel-white);
  border: 1px solid var(--border);
}

.tool-file-list {
  font-size: var(--text-label);
  color: var(--pixel-gray);
  padding-left: 16px;
  line-height: 2;
}

.tool-detail-header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-bottom: 6px;
}

.tool-detail-header h3 {
  margin: 0 0 2px 0;
}

.tool-detail-icon {
  width: 24px;
  height: 24px;
  image-rendering: pixelated;
}

.tool-section {
  margin-bottom: 8px;
}

.tool-section-title {
  font-size: var(--text-label);
  color: var(--pixel-cyan);
  font-weight: bold;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.tool-section-body {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-2);
  background: var(--bg-dark);
}

.tool-info-row {
  font-size: var(--text-label);
  margin-bottom: 2px;
}

.tool-info-label {
  color: #888;
}

.tool-oauth-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-2);
  margin-bottom: 8px;
  background: var(--bg-dark);
}

.tool-oauth-status {
  font-size: var(--text-label);
  margin-bottom: 6px;
  font-weight: bold;
}

.tool-oauth-status.connected {
  color: #4caf50;
}

.tool-oauth-status.connected::before {
  content: "\25CF ";
}

.tool-oauth-status.disconnected {
  color: #ff9800;
}

.tool-oauth-status.disconnected::before {
  content: "\25CB ";
}

.tool-oauth-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 4px;
  padding: 3px 6px;
  font-family: monospace;
  font-size: var(--text-label);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--pixel-white);
}

.tool-oauth-creds-form {
  margin-top: 4px;
}

.tool-oauth-edit {
  font-size: var(--text-label);
  color: var(--pixel-cyan);
  cursor: pointer;
  text-decoration: underline;
  margin-right: 6px;
}

.tool-oauth-edit:hover {
  color: #fff;
}

.status-clickable {
  cursor: pointer;
  transition: color 0.1s;
}

.status-clickable:hover {
  color: #fff;
}

.empty-hint {
  color: var(--text-dim);
  font-size: var(--text-label);
  padding: var(--pad-component);
  text-align: center;
  display: block;
}

/* ===== Manifest-driven settings =====  */
.emp-settings-section {
  padding: 4px 0;
}
.emp-settings-title {
  font-size: var(--text-label);
  color: var(--pixel-cyan);
  margin-bottom: 2px;
  text-transform: uppercase;
}
.emp-settings-field input,
.emp-settings-field select,
.emp-settings-field textarea {
  background: var(--bg-dark);
  color: var(--pixel-white);
  border: 1px solid var(--border);
  font-family: 'Press Start 2P', monospace;
  font-size: var(--text-label);
  padding: 2px 4px;
}
.emp-settings-field input:focus,
.emp-settings-field select:focus,
.emp-settings-field textarea:focus {
  border-color: var(--pixel-cyan);
  outline: none;
}

/* ===== Company Direction Modal ===== */
.company-direction-modal-content {
  max-width: 500px;
  width: 90vw;
}
.company-direction-body {
  padding: var(--pad-component);
  flex-direction: column;
}

/* ===== Generic Popup Modal ===== */
.generic-popup-content {
  max-width: 480px;
  width: 90vw;
}
.generic-popup-content .popup-message {
  font-size: var(--text-label);
  color: var(--pixel-white);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.generic-popup-content .popup-url-box {
  margin: 8px 0;
  padding: var(--sp-1) var(--sp-2);
  background: var(--bg-dark);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-label);
  word-break: break-all;
  color: var(--pixel-green);
  cursor: pointer;
}
.generic-popup-content .popup-url-box:hover {
  border-color: var(--pixel-green);
}
.generic-popup-content .popup-actions {
  display: flex;
  gap: var(--sp-1);
  margin-top: 8px;
  justify-content: flex-end;
}

/* ===== Retro Popup Sections ===== */
.retro-section {
  margin-bottom: 10px;
}
.retro-section h4 {
  font-size: var(--text-body);
  color: var(--pixel-cyan);
  margin: 0 0 4px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.retro-section p {
  font-size: var(--text-label);
  color: var(--pixel-white);
  line-height: 1.6;
  margin: 2px 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.retro-section strong {
  color: var(--pixel-yellow);
}

/* ===== Chat Attach Button ===== */
.chat-attach-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: var(--text-heading);
  cursor: pointer;
  color: var(--pixel-cyan);
  opacity: 0.7;
  transition: opacity 0.15s;
}
.chat-attach-btn:hover {
  opacity: 1;
}

/* ===== Chat File Preview Bar ===== */
.chat-preview-bar {
  display: flex;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  background: var(--bg-panel-alt);
  border-top: 1px solid var(--border);
  overflow-x: auto;
}
.chat-preview-item {
  position: relative;
  flex-shrink: 0;
}
.chat-preview-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.chat-preview-file {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-micro);
  color: var(--text-dim);
  text-align: center;
  overflow: hidden;
}
.chat-preview-remove {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background: var(--pixel-red);
  color: #fff;
  font-size: var(--text-body);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.bubble-image {
  max-height: 100px;
  max-width: 200px;
  border-radius: var(--radius-md);
  margin-top: 4px;
  cursor: pointer;
}
.bubble-file {
  font-size: var(--text-label);
  color: var(--pixel-cyan);
  margin-top: 2px;
}

/* HR badges (probation, PIP, onboarding) */
.roster-badge {
  display: inline-block;
  font-family: 'Press Start 2P', monospace;
  font-size: var(--text-micro);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  margin-left: 4px;
  vertical-align: middle;
}
.roster-badge.probation {
  background: #553300;
  color: #ffaa33;
  border: 1px solid #ffaa33;
}
.roster-badge.pip {
  background: #550000;
  color: #ff4444;
  border: 1px solid #ff4444;
}
.roster-badge.onboarding {
  background: #003355;
  color: #44aaff;
  border: 1px solid #44aaff;
}

/* OKR display */
.emp-okr-section {
  margin-top: 6px;
}
.okr-item {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-bottom: 4px;
  font-size: var(--text-label);
}
.okr-objective {
  flex: 1;
  color: var(--pixel-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.okr-progress-bar {
  width: 60px;
  height: 6px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.okr-progress-fill {
  height: 100%;
  background: #44cc88;
  transition: width 0.3s ease;
}
.okr-progress-text {
  color: var(--text-dim);
  font-size: var(--text-micro);
  min-width: 24px;
  text-align: right;
}

/* ===== Project Tabs ===== */
.project-tabs { display: flex; gap: 2px; margin-bottom: 4px; }
.project-tab {
  background: var(--bg-panel);
  color: var(--text-dim);
  border: none; padding: 3px 8px; cursor: pointer;
  font-size: var(--text-body); font-family: inherit;
}
.project-tab.active {
  background: var(--pixel-cyan);
  color: var(--bg-dark);
}

/* Kanban + Timeline styles are now loaded dynamically from plugins */

/* Task Tree — rendered as a tab in the board view */
.project-tab-content[data-tab="task-tree"] {
    height: 60vh;
    padding: 0 !important;
}

.project-tree-layout {
    display: flex;
    height: 100%;
    gap: 0;
    position: relative;
}

.project-tree-canvas {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    background: var(--bg-darker, #0a0a0a);
}

/* Detail Drawer — only visible when a node is clicked */
.project-tree-drawer {
    width: 280px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    overflow-y: auto;
    padding: var(--pad-panel);
    background: #111;
    border-left: 1px solid var(--pixel-green-dim, #1a3a2a);
    z-index: var(--z-dropdown);
}

.project-tree-drawer.hidden {
    display: none;
}

.tree-detail-header {
    display: flex;
    align-items: center;
    gap: var(--gap-stack);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #333;
}

.tree-detail-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--bg-dark);
    border: 1px solid var(--pixel-green);
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-body);
    color: var(--text-dim);
    flex-shrink: 0;
}

.tree-detail-role {
    font-size: var(--text-label);
    color: var(--text-dim);
}

.detail-section {
    margin-bottom: 16px;
}

.detail-section h4 {
    color: var(--pixel-green);
    font-size: var(--text-subheading);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.detail-prompt,
.detail-result {
    background: #0a0a0a;
    padding: var(--sp-2);
    border-radius: var(--radius-md);
    font-size: var(--text-subheading);
    color: #ccc;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
}

.detail-meta {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    font-size: var(--text-subheading);
    color: #666;
}

.status-pass { color: #00ff88; }
.status-fail { color: #ff4444; }

/* Project report modal */
.project-report-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fade-in 0.15s ease-out;
}
.project-report-dialog {
  background: var(--bg-panel);
  border: 2px solid var(--pixel-cyan);
  border-radius: var(--radius-sm);
  width: 520px;
  max-width: 90vw;
  max-height: 80vh;
  padding: var(--pad-panel);
  box-shadow: 0 0 40px rgba(0, 221, 255, 0.2);
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  overflow: hidden;
}
.project-report-header {
  font-size: var(--text-subheading);
  color: var(--pixel-cyan);
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.project-report-body {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  padding: 10px;
  font-size: var(--text-subheading);
  line-height: 1.6;
  color: var(--pixel-white);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 50vh;
  overflow-y: auto;
}
.project-report-body pre {
  font-size: var(--text-body);
  background: var(--bg-panel-alt);
  padding: 6px;
  border: 1px solid var(--border);
  overflow-x: auto;
}
.project-report-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-body);
  color: var(--pixel-gray);
}
.project-report-actions {
  display: flex;
  justify-content: flex-end;
}

/* Task tree — inactive branch styling */
.tree-node-ceo {
    stroke: #ffd700;
    stroke-width: 1.5;
    fill: #1a1a10;
}

.tree-node:hover .tree-node-ceo {
    stroke: #ffe44d;
}

.tree-detail-avatar-ceo {
    background: linear-gradient(135deg, #ffd700, #ff8c00) !important;
    color: #000 !important;
    font-size: 8px !important;
    font-weight: bold;
}

/* Project team section */
.project-team-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
}

.project-team-member {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 3px 6px;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--text-micro);
}

.project-team-member:hover {
    border-color: var(--pixel-cyan);
}

.project-team-avatar {
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
}

.project-team-info {
    display: flex;
    flex-direction: column;
}

.project-team-name {
    color: var(--pixel-green);
    font-size: var(--text-label);
}

.project-team-role {
    color: var(--text-dim);
    font-size: var(--text-micro);
}

/* Employee project history */
.emp-detail-projects {
    max-height: 100px;
    overflow-y: auto;
}

.emp-project-item {
    padding: 3px 4px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    font-size: var(--text-micro);
}

.emp-project-item:hover {
    background: var(--bg-dark);
}

.emp-project-task {
    color: var(--pixel-white);
    font-size: var(--text-label);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.emp-project-meta {
    display: flex;
    justify-content: space-between;
    color: var(--text-dim);
    font-size: var(--text-micro);
    margin-top: 1px;
}

.emp-project-role {
    color: var(--pixel-cyan);
}

/* ===== Talent Pool Modal ===== */
.talent-pool-modal-content {
  max-width: 600px;
  max-height: 70vh;
}

.talent-pool-modal-body {
  overflow-y: auto;
  max-height: 55vh;
  padding: var(--pad-component);
}

.talent-pool-badge {
  font-size: var(--text-body);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  margin-left: 8px;
  font-family: 'Press Start 2P', monospace;
}

.talent-pool-badge.api {
  background: #22c55e;
  color: #fff;
}

.talent-pool-badge.local {
  background: #6b7280;
  color: #fff;
}

.talent-pool-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.talent-pool-card {
  border: 2px solid var(--border);
  padding: 10px;
  background: var(--bg-card);
  image-rendering: pixelated;
}

.talent-pool-card .talent-name {
  font-family: 'Press Start 2P', monospace;
  font-size: var(--text-subheading);
  color: var(--text-primary);
}

.talent-pool-card .talent-role {
  font-size: var(--text-subheading);
  color: var(--text-secondary);
  margin-top: 4px;
}

.talent-pool-card .talent-skills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: 6px;
}

.talent-pool-card .skill-tag {
  font-size: var(--text-body);
  padding: 2px 6px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  font-family: 'Press Start 2P', monospace;
}

.talent-pool-card .talent-status {
  font-size: var(--text-body);
  margin-top: 6px;
  color: var(--text-muted);
}

/* ===== CEO Inbox ===== */
.inbox-badge {
  display: inline-block;
  background: #555;
  color: #fff;
  border-radius: var(--radius-md);
  padding: 0 6px;
  font-size: var(--text-subheading);
  margin-left: 4px;
  vertical-align: middle;
}
.inbox-badge.hidden { display: none; }
.inbox-badge-active {
  background: #e74c3c;
  animation: inbox-pulse 2s infinite;
}
@keyframes inbox-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.inbox-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--pad-component);
  border-left: 3px solid #f39c12;
  cursor: pointer;
  transition: background 0.2s;
}
.inbox-item:hover { background: rgba(243, 156, 18, 0.1); }
.inbox-status { font-size: var(--text-heading); flex-shrink: 0; margin-top: 2px; }
.inbox-item-content { flex: 1; min-width: 0; }
.inbox-item-from { font-family: var(--font-pixel); color: #f39c12; font-size: var(--text-subheading); }
.inbox-item-desc { color: #aaa; font-size: var(--text-subheading); margin-top: 2px; max-height: 60px; overflow-y: auto; word-break: break-word; }
.inbox-empty { color: #555; font-size: var(--text-subheading); text-align: center; padding: var(--pad-component); }

/* ===== CEO Conversation Dialog ===== */
.ceo-conv-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ceo-conv-overlay.hidden { display: none; }
.ceo-conv-dialog {
  width: 80%; height: 70%; max-width: 800px;
  background: #1a1a2e;
  border: 2px solid #0ff;
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
  display: flex;
  flex-direction: column;
}
.ceo-conv-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; border-bottom: 1px solid #333;
  color: #0ff; font-family: var(--font-pixel); font-size: var(--text-heading);
}
.ceo-conv-close {
  background: none; border: none; color: #888; font-size: var(--text-display); cursor: pointer;
}
.ceo-conv-close:hover { color: #fff; }
.ceo-conv-desc {
  padding: 8px 16px; border-bottom: 1px solid #222; color: #888; font-size: var(--text-subheading);
}
.ceo-conv-desc.hidden { display: none; }
.ceo-conv-messages { flex: 1; overflow-y: auto; padding: 12px 16px; }
.conv-msg { margin-bottom: 12px; max-width: 75%; }
.conv-msg-ceo { margin-left: auto; text-align: right; }
.conv-msg-employee { margin-right: auto; }
.conv-msg-sender { font-family: var(--font-pixel); font-size: var(--text-subheading); margin-bottom: 2px; }
.conv-msg-ceo .conv-msg-sender { color: #ffd700; }
.conv-msg-employee .conv-msg-sender { color: #0ff; }
.conv-msg-text {
  background: #2a2a3e; padding: var(--pad-button); border-radius: var(--radius-md);
  font-size: var(--text-heading); color: #ddd; line-height: 1.5; white-space: pre-wrap;
}
.conv-msg-ceo .conv-msg-text { background: #3a3520; border: 1px solid rgba(255, 215, 0, 0.2); }
.conv-msg-employee .conv-msg-text { border: 1px solid rgba(0, 255, 255, 0.1); }
.conv-msg-time { font-size: var(--text-body); color: #555; margin-top: 2px; }
.conv-attachment { font-size: var(--text-subheading); color: #0ff; margin-top: 4px; }
.ceo-conv-input-area { border-top: 1px solid #333; padding: 10px 16px; }
.ceo-conv-attach-row { margin-bottom: 6px; }
.ceo-conv-attach-btn { cursor: pointer; font-size: var(--text-heading); }
#ceo-conv-input {
  width: 100%; background: #0d0d1a; border: 1px solid #333;
  color: #ddd; font-family: var(--font-mono); font-size: var(--text-heading);
  padding: var(--sp-2); resize: none; box-sizing: border-box;
}
#ceo-conv-input:focus { border-color: #0ff; outline: none; }
.ceo-conv-btn-row { display: flex; gap: var(--sp-2); margin-top: 8px; justify-content: flex-end; }
.ceo-conv-send { background: #1a4a1a !important; border-color: #2d7d2d !important; }
.ceo-conv-send:hover { background: #2d5a2d !important; }
.ceo-conv-complete { background: #4a3a1a !important; border-color: #8a6a2a !important; }
.ceo-conv-complete:hover { background: #5a4a2a !important; }

/* ----- ChatPanel in right panel ----- */
#right-panel-chat {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
#right-panel-chat.hidden { display: none; }

/* ===== ChatPanel Component ===== */
.chat-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat-panel-header {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--border);
    font-size: var(--text-label); font-family: 'Press Start 2P', monospace;
}
.chat-panel-type {
    background: var(--pixel-green); color: #000;
    padding: 1px 4px; font-weight: bold;
}
.chat-panel-employee { flex: 1; }
/* EA auto-reply toggle in CEO Inbox header */
.ea-autoreply-sidebar {
    display: flex; align-items: center; gap: var(--sp-1); cursor: pointer;
    font-size: var(--text-label); font-family: 'Press Start 2P', monospace; color: var(--text-dim);
    margin-left: auto; padding: 2px 6px;
    border: 1px solid #344; border-radius: var(--radius-sm); background: rgba(0,0,0,0.2);
}
.ea-autoreply-sidebar:hover { color: var(--pixel-green); border-color: var(--pixel-green); }
.ea-autoreply-sidebar input[type="checkbox"] { width: 10px; height: 10px; cursor: pointer; }
.ea-autoreply-sidebar input[type="checkbox"]:checked + span { color: var(--pixel-green); }
.chat-panel-clear-btn {
    font-size: var(--text-label); font-family: 'Press Start 2P', monospace; cursor: pointer;
    background: #355; color: #fff; border: 1px solid #688; padding: 1px 6px;
}
.chat-panel-close-btn {
    font-size: var(--text-label); font-family: 'Press Start 2P', monospace; cursor: pointer;
    background: #633; color: #fff; border: 1px solid #966; padding: 1px 6px;
}
.chat-panel-messages {
    flex: 1; overflow-y: auto; padding: var(--sp-1);
    display: flex; flex-direction: column; gap: var(--sp-1);
}
.chat-msg { max-width: 80%; padding: 4px 6px; font-size: var(--text-label); font-family: 'Press Start 2P', monospace; }
.chat-msg-ceo { align-self: flex-end; background: #234; border: 1px solid #456; }
.chat-msg-agent { align-self: flex-start; background: #342; border: 1px solid #564; }
.chat-msg-role { font-weight: bold; margin-bottom: 2px; font-size: var(--text-label); opacity: 0.7; }
.chat-msg-text { white-space: pre-wrap; word-break: break-word; }
.chat-msg-attachments {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    align-items: center;
}
.chat-msg-attachment {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 2px 6px;
    border: 1px solid var(--border);
    color: var(--pixel-cyan);
    font-size: var(--text-label);
    text-decoration: none;
}
.chat-msg-attachment-link:hover {
    border-color: var(--pixel-cyan);
}
.chat-msg-image-link {
    display: inline-flex;
}
.chat-msg-image {
    max-width: 180px;
    max-height: 140px;
    border: 1px solid var(--border);
    image-rendering: pixelated;
}
.chat-msg-image:hover {
    border-color: var(--pixel-cyan);
}
.chat-panel-typing {
    padding: var(--sp-1) var(--sp-2);
    display: flex;
    align-items: center;
    gap: 2px;
    color: var(--pixel-cyan);
}
.chat-panel-typing-dot {
    display: inline-block;
    font-size: var(--text-subheading);
    line-height: 1;
    opacity: 0.35;
    animation: chat-panel-dot-pulse 1.1s infinite ease-in-out;
}
.chat-panel-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.chat-panel-typing-dot:nth-child(3) { animation-delay: 0.3s; }
.chat-panel-input-row {
    display: flex; gap: var(--sp-1); padding: var(--sp-1);
    border-top: 1px solid var(--border);
}
.chat-panel-input {
    flex: 1; font-size: var(--text-label); font-family: 'Press Start 2P', monospace; resize: none;
    background: var(--bg-dark); color: var(--pixel-white);
    border: 1px solid var(--border); padding: var(--sp-1);
}
.chat-panel-actions { display: flex; flex-direction: column; gap: 2px; }
.chat-panel-send-btn {
    font-size: var(--text-label); font-family: 'Press Start 2P', monospace; cursor: pointer;
    background: var(--pixel-green); color: #000; border: none; padding: 2px 8px;
}
.chat-panel-upload-label { cursor: pointer; font-size: var(--text-label); text-align: center; }
.chat-panel-send-btn:disabled,
.chat-panel-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.chat-panel-typing.hidden { display: none; }

/* CEO Console Typing Indicator */
#ceo-typing-indicator {
    padding: 4px 10px;
    display: flex;
    align-items: center;
    gap: 3px;
}
#ceo-typing-indicator.hidden { display: none; }
.ceo-typing-dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--pixel-cyan);
    opacity: 0.35;
    animation: chat-panel-dot-pulse 1.1s infinite ease-in-out;
}
.ceo-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.ceo-typing-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes chat-panel-dot-pulse {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  40% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

.mode-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-subheading);
  color: #aaa;
  cursor: pointer;
  padding: 0 8px;
}
.mode-toggle input { cursor: pointer; }

/* ── Node execution log entries ──────────────────────────────────────────── */
.node-log-entry { padding: 3px 6px; border-bottom: 1px solid #1a1a2e; font-size: var(--text-subheading); }
.node-log-ts { color: #555; }
.node-log-type { font-weight: bold; margin: 0 6px; }
.node-log-content { white-space: pre-wrap; max-height: 150px; overflow-y: auto; margin: 2px 0; color: #ccc; }
.node-log-empty { color: #666; padding: var(--sp-2); }
.node-log-error { color: #f44; padding: var(--sp-2); }

/* ── Meeting minutes panel ───────────────────────────────────────────────── */
.meeting-minutes-list { max-height: 300px; overflow-y: auto; }
.meeting-minute-card {
  padding: var(--sp-2);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}
.meeting-minute-card:hover { background: var(--bg-panel-alt); }
.meeting-minute-topic { font-weight: bold; color: var(--pixel-white); }
.meeting-minute-meta { font-size: var(--text-body); color: var(--text-dim); margin-top: 2px; }
.meeting-minute-detail { padding: var(--sp-2); }
.meeting-minute-detail pre { white-space: pre-wrap; color: #ccc; font-size: var(--text-subheading); }

/* ── Background Tasks Modal ── */
.bg-tasks-modal-content {
  width: 90vw;
  max-width: 900px;
  height: 70vh;
  max-height: 600px;
}
.bg-tasks-slots {
  color: #555;
  font-size: var(--text-body);
  font-family: var(--font-mono);
  margin-left: auto;
  margin-right: 12px;
}
.bg-tasks-body {
  display: flex;
  gap: 0;
  height: calc(100% - 40px);
  overflow: hidden;
}
.bg-tasks-list {
  flex: 0 0 280px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  background: #0a0a0a;
}
.bg-tasks-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0a0a0a;
  padding: var(--sp-2);
}
.bg-tasks-detail-empty {
  color: #555;
  font-size: var(--text-subheading);
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.bg-task-item {
  padding: var(--sp-1) var(--sp-2);
  border-left: 2px solid #333;
  margin: 2px 4px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--text-subheading);
  transition: background 0.1s;
}
.bg-task-item:hover { background: #111; }
.bg-task-item.selected { background: #111; }
.bg-task-item.status-running { border-left-color: #44aa44; }
.bg-task-item.status-completed { border-left-color: #555; opacity: 0.6; }
.bg-task-item.status-failed { border-left-color: #ff4444; opacity: 0.6; }
.bg-task-item.status-stopped { border-left-color: #aa4444; opacity: 0.6; }
.bg-task-item-status { font-size: var(--text-body); }
.bg-task-item-cmd { color: #44aaff; margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bg-task-item-port { color: #aa44ff; font-size: var(--text-body); }
.bg-tasks-detail-header { margin-bottom: 6px; }
.bg-tasks-detail-cmd { color: #44aaff; font-size: var(--text-subheading); font-weight: bold; font-family: var(--font-mono); word-break: break-all; }
.bg-tasks-detail-desc { color: #666; font-size: var(--text-subheading); font-family: var(--font-mono); margin: 4px 0; }
.bg-tasks-detail-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: var(--text-body); font-family: var(--font-mono); margin-bottom: 8px; }
.bg-tasks-detail-output { flex: 1; min-height: 0; border: 1px solid #222; }
.bg-tasks-detail-actions { margin-top: 6px; text-align: right; }
.bg-tasks-stop-btn {
  color: #ff4444;
  border: 1px solid #ff4444;
  background: transparent;
  padding: 3px 12px;
  font-size: var(--text-subheading);
  font-family: var(--font-mono);
  cursor: pointer;
  letter-spacing: 1px;
}
.bg-tasks-stop-btn:hover { background: #ff444422; }

/* ===== CEO Terminal (two-column: project list + xterm conversation) ===== */
#ceo-split {
  display: flex;
  height: 100%;
  min-height: 0;
  gap: 1px;
}

#ceo-project-list {
  width: 120px;
  flex-shrink: 0;
  background: #0a0a0a;
  border-right: 1px solid #222;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: var(--text-subheading);
  padding: 0;
  transition: width 0.15s, padding 0.15s, opacity 0.15s;
}

#ceo-projects-section {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 4px 0;
}

#ceo-oneonone-section {
  flex-shrink: 0;
  border-top: 1px solid #333;
}

.ceo-section-header {
  padding: 4px 6px;
  color: #888;
  font-size: var(--text-subheading);
  cursor: pointer;
  user-select: none;
}
.ceo-section-header:hover { color: #ccc; }
.ceo-section-arrow { font-size: var(--text-body); }

#ceo-oneonone-items.collapsed { display: none; }

.ceo-oneonone-item {
  padding: 4px 6px;
  cursor: pointer;
  color: #c8a2ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 2px solid transparent;
  font-size: var(--text-subheading);
}
.ceo-oneonone-item:hover {
  background: #1a1a1a;
  color: #dfc4ff;
}
.ceo-oneonone-item.active {
  background: #1a112a;
  color: #fff;
  border-left-color: #9966ff;
}

#ceo-project-list.collapsed {
  width: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  border-right: none;
}

#ceo-list-toggle {
  width: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
  color: #555;
  cursor: pointer;
  font-size: var(--text-subheading);
  border-right: 1px solid #222;
}
#ceo-list-toggle:hover { color: #aaa; background: #1a1a1a; }

.ceo-nav-btn {
  padding: 4px 6px;
  cursor: pointer;
  color: #4af;
  font-size: var(--text-subheading);
  border-bottom: 1px solid #222;
}
.ceo-nav-btn:hover { background: #1a1a1a; }
.ceo-nav-btn.active {
  color: #fff;
  background: #112;
  border-left: 2px solid #4af;
}

.ceo-proj-item {
  padding: 4px 6px;
  cursor: pointer;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 2px solid transparent;
}

.ceo-proj-item:hover {
  background: #1a1a1a;
  color: #ccc;
}

.ceo-proj-item.active {
  background: #112;
  color: #fff;
  border-left-color: #44aa44;
}

.ceo-proj-pending {
  color: #ffaa44;
  margin-right: 2px;
}
.ceo-proj-item.has-pending {
  font-weight: bold;
  color: #ddd;
}

.ceo-proj-separator {
  border-top: 1px solid #222;
  margin: 4px 6px;
}

.ceo-proj-action {
  padding: 4px 6px;
  cursor: pointer;
  color: #44aaff;
  font-size: var(--text-subheading);
}

.ceo-proj-action:hover {
  background: #1a1a1a;
  color: #66ccff;
}

#ceo-conv-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

#ceo-conv-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

#ceo-conv-input-area {
  flex-shrink: 0;
  padding: var(--sp-1);
  border-top: 1px solid #333;
  background: #0a0a0a;
}

#ceo-conv-input-row {
  display: flex;
  gap: 2px;
  align-items: flex-end;
}

#ceo-conv-input {
  flex: 1;
  background: #111;
  color: #44aa44;
  border: 1px solid #222;
  padding: 4px 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-subheading);
  resize: none;
  outline: none;
}

#ceo-conv-input:focus {
  border-color: #44aa44;
}

#ceo-conv-input-row {
  display: flex;
}

/* Slash command menu */
#ceo-slash-menu {
  background: #111;
  border: 1px solid #333;
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  max-height: 120px;
  overflow-y: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-subheading);
}
#ceo-slash-menu.hidden { display: none; }

.slash-item {
  padding: 3px 8px;
  cursor: pointer;
  color: #aaa;
}
.slash-item:hover, .slash-item.active {
  background: #1a2a1a;
  color: #44aa44;
}
.slash-cmd { color: #44aaff; margin-right: 6px; }
.slash-desc { color: #666; }

/* ===== CEO Conversation — DOM renderer ===== */
.ceo-conv-scroll {
  background: #0a0a0a;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: var(--text-subheading);
  line-height: 1.6;
  color: #d4d4d4;
  padding: var(--pad-button);
}
.ceo-conv-header {
  color: #22d3ee;
  font-weight: bold;
  padding: 4px 0;
}
.ceo-msg { padding: 4px 0; }
.ceo-msg-sender {
  font-weight: bold;
  margin-right: 4px;
}
.ceo-msg--ceo .ceo-msg-sender { color: #4ade80; }
.ceo-msg--agent .ceo-msg-sender { color: #22d3ee; }
.ceo-msg--system .ceo-msg-sender { color: #facc15; }
.ceo-msg-arrow {
  color: #555;
  margin-right: 4px;
}
.ceo-msg-text {
  color: #e5e5e5;
  white-space: pre-wrap;
  word-break: break-word;
}
.ceo-msg-divider {
  border-bottom: 1px solid #222;
  margin: 4px 0;
}

/* Tool call cards */
.ceo-tool-call {
  margin: 4px 0 4px 16px;
  border-left: 2px solid #333;
  padding: 2px 8px;
  cursor: pointer;
  user-select: none;
}
.ceo-tool-call.running { border-left-color: #f59e0b; }
.ceo-tool-call.done    { border-left-color: #22c55e; }
.ceo-tool-call.error   { border-left-color: #ef4444; }

.ceo-tool-call-header {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  color: #a1a1aa;
  font-size: var(--text-subheading);
}
.ceo-tool-icon { font-size: var(--text-subheading); }
.ceo-tool-name { color: #d4d4d4; font-weight: bold; }
.ceo-tool-status { margin-left: auto; }
.ceo-tool-call.running .ceo-tool-status { color: #f59e0b; }
.ceo-tool-call.done    .ceo-tool-status { color: #22c55e; }
.ceo-tool-call.error   .ceo-tool-status { color: #ef4444; }
.ceo-tool-duration { color: #71717a; }

.ceo-tool-call-details {
  display: none;
  margin-top: 4px;
  padding: 4px 0;
  font-size: var(--text-subheading);
  color: #a1a1aa;
}
.ceo-tool-call.expanded .ceo-tool-call-details { display: block; }
.ceo-tool-args { color: #71717a; }
.ceo-tool-args div { padding-left: 8px; }
.ceo-tool-result {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid #222;
  color: #a1a1aa;
}

/* ===== Unread Badges ===== */
.unread-badge {
  background: var(--pixel-red);
  color: #fff;
  font-size: var(--text-label);
  font-family: 'Press Start 2P', monospace;
  padding: 1px 4px;
  border-radius: var(--radius-md);
  margin-left: 4px;
  min-width: 14px;
  text-align: center;
  display: inline-block;
  line-height: 1.4;
}

/* ===== DND Toggle Active State ===== */
#dnd-toggle-btn.active {
  background: var(--pixel-orange);
  color: #000;
  border-color: var(--pixel-orange);
}

/* ===== @Mention Autocomplete ===== */
.mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  max-height: 180px;
  overflow-y: auto;
  z-index: var(--z-sticky);
  width: 220px;
}
.mention-dropdown.hidden { display: none; }
.mention-item {
  padding: var(--sp-1) var(--sp-2);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-body);
  font-family: 'Press Start 2P', monospace;
}
.mention-item:hover,
.mention-item.active {
  background: var(--pixel-purple);
  color: #000;
}
.mention-name { color: var(--pixel-cyan); }
.mention-item:hover .mention-name,
.mention-item.active .mention-name { color: #000; }
.mention-role {
  color: var(--text-dim);
  font-size: var(--text-label);
  margin-left: 8px;
}

/* ===== Announcements ===== */
.announcement-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background: var(--pixel-red);
  border-radius: var(--radius-full);
}
.announcement-badge.hidden { display: none; }
.announcement-item {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-2);
  margin-bottom: 6px;
  position: relative;
}
.announcement-item:hover { border-color: var(--pixel-cyan); }
.announcement-title {
  font-weight: bold;
  color: var(--pixel-white);
  font-size: var(--text-subheading);
  margin-bottom: 4px;
}
.announcement-title a { color: var(--pixel-cyan); text-decoration: none; }
.announcement-title a:hover { text-decoration: underline; }
.announcement-body {
  color: #aaa;
  font-size: var(--text-body);
  line-height: 1.5;
  word-break: break-word;
}
.announcement-body a { color: var(--pixel-cyan); }
.announcement-body img { max-width: 100%; border-radius: var(--radius-md); margin: 4px 0; }
.announcement-meta {
  color: #666;
  font-size: var(--text-body);
  margin-top: 4px;
}
.announcement-dismiss {
  position: absolute;
  top: 4px;
  right: 6px;
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  font-size: 12px;
}
.announcement-dismiss:hover { color: var(--pixel-red); }

/* ===== Project Completion Card ===== */
.ceo-completion-card {
  margin: 8px 0;
  border: 1px solid #22c55e;
  border-radius: var(--radius-md);
  background: #0a1a0f;
  padding: 10px 12px;
}
.completion-card-header {
  color: #4ade80;
  font-weight: bold;
  font-size: var(--text-subheading);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #1a3a20;
}
.completion-card-body {
  color: #d4d4d4;
  font-size: var(--text-subheading);
  line-height: 1.6;
}
.completion-card-body div {
  padding: 1px 0;
}

/* ===== Message Collapse/Expand ===== */
.ceo-msg-toggle {
  display: inline-block;
  color: var(--pixel-cyan);
  font-size: var(--text-body);
  cursor: pointer;
  margin-top: 4px;
  user-select: none;
}
.ceo-msg-toggle:hover { text-decoration: underline; }

/* CEO Product Selector */
#ceo-product-row {
  padding: 2px 8px;
}

#ceo-product-select {
  width: 100%;
  background: var(--bg-dark);
  color: var(--text-dim);
  border: 1px solid var(--border);
  font-family: var(--font-pixel);
  font-size: var(--text-micro);
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

#ceo-product-select:focus {
  border-color: var(--pixel-cyan);
  color: var(--pixel-white);
  outline: none;
}

/* Panel Add Button */
.panel-add-btn {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--pixel-cyan);
  font-size: var(--text-subheading);
  cursor: pointer;
  padding: 0 6px;
  line-height: 1.2;
  border-radius: var(--radius-sm);
  font-family: var(--font-pixel);
}

.panel-add-btn:hover {
  background: var(--pixel-cyan);
  color: var(--bg-dark);
}

/* KR Form Rows */
.kr-form-row {
  display: flex;
  gap: var(--sp-1);
  margin-bottom: 4px;
  align-items: center;
}

.kr-form-row .form-input {
  flex: 1;
}

.kr-remove-btn {
  background: transparent;
  border: none;
  color: #666;
  cursor: pointer;
  font-size: var(--text-subheading);
  padding: 0 4px;
}

.kr-remove-btn:hover {
  color: #ff4444;
}

.btn-small {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font-pixel);
  font-size: var(--text-micro);
  padding: 3px 8px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  margin-top: 4px;
}

.btn-small:hover {
  border-color: var(--pixel-cyan);
  color: var(--pixel-cyan);
}

.btn-danger {
  color: #ff4444;
  border-color: #500;
}

.btn-danger:hover {
  background: #ff4444;
  color: var(--bg-dark);
  border-color: #ff4444;
}

.btn-primary {
  background: var(--pixel-cyan);
  color: var(--bg-dark);
  border: none;
  font-family: var(--font-pixel);
  font-size: var(--text-label);
  padding: 6px 16px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  margin-top: 8px;
  width: 100%;
}

.btn-primary:hover {
  opacity: 0.9;
}

.form-group {
  margin-bottom: 8px;
}

.form-label {
  display: block;
  color: var(--text-dim);
  font-size: var(--text-micro);
  margin-bottom: 3px;
}

.form-input {
  width: 100%;
  background: var(--bg-dark);
  color: var(--pixel-white);
  border: 1px solid var(--border);
  font-family: var(--font-pixel);
  font-size: var(--text-label);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
}

.form-input:focus {
  border-color: var(--pixel-cyan);
  outline: none;
}

.form-actions {
  margin-top: 12px;
}

/* ===== Product Detail Modal ===== */
.product-modal-content {
  max-width: 800px;
  width: 85vw;
  max-height: 85vh;
  border-color: var(--pixel-cyan);
  box-shadow: 0 0 40px rgba(0, 255, 255, 0.1);
}

.product-tab-content {
  padding: 8px 0;
  overflow-y: auto;
  max-height: 65vh;
}

/* Product Detail Header */
.product-detail-header {
  margin-bottom: 12px;
}

.product-detail-name {
  font-size: var(--text-subheading);
  color: var(--pixel-white);
  margin: 0 0 4px 0;
  cursor: pointer;
}

.product-detail-name:hover {
  color: var(--pixel-cyan);
}

.product-detail-meta {
  font-size: var(--text-label);
  color: var(--text-dim);
}

.product-status-badge {
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--text-micro);
}

.product-status-badge.status-active { background: rgba(0,255,136,0.15); color: var(--pixel-green); }
.product-status-badge.status-planning { background: rgba(255,255,0,0.1); color: var(--pixel-yellow); }
.product-status-badge.status-archived { background: rgba(128,128,128,0.15); color: var(--text-dim); }

.product-owner-indicator {
  color: var(--text-dim);
  font-size: var(--text-micro);
  margin-left: 4px;
}

.product-section-label {
  font-size: var(--text-label);
  color: var(--pixel-cyan);
  margin: 12px 0 4px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.product-detail-objective {
  color: var(--pixel-white);
  font-size: var(--text-label);
  line-height: 1.6;
  cursor: pointer;
  padding: var(--sp-1);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}

.product-detail-objective:hover {
  border-color: var(--border);
}

.product-detail-owner {
  color: var(--text-dim);
  font-size: var(--text-label);
}

/* KR Detail Rows */
.product-kr-list {
  margin-bottom: 8px;
}

.product-kr-detail-row {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 4px 0;
  font-size: var(--text-label);
  color: var(--pixel-white);
}

.kr-detail-title {
  cursor: pointer;
}

.kr-detail-title:hover {
  color: var(--pixel-cyan);
}

.kr-detail-current {
  color: var(--pixel-green);
  cursor: pointer;
  font-weight: bold;
}

.kr-detail-current:hover {
  text-decoration: underline;
}

.kr-detail-track {
  flex: 1;
  max-width: 120px;
}

/* Inline Edit */
.inline-edit-input {
  background: var(--bg-dark);
  color: var(--pixel-white);
  border: 1px solid var(--pixel-cyan);
  font-family: var(--font-pixel);
  font-size: inherit;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  width: 100%;
  box-sizing: border-box;
}

.inline-edit-small {
  width: auto;
}

/* Version History */
.product-version-list {
  margin-bottom: 8px;
}

.product-version-item {
  padding: 4px 0;
  font-size: var(--text-label);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.ver-tag {
  color: var(--pixel-green);
  font-weight: bold;
}

.ver-date {
  color: var(--text-dim);
  margin-left: 8px;
}

.ver-issues {
  color: var(--text-dim);
  margin-left: 8px;
}

.ver-changelog {
  color: var(--text-dim);
  font-size: var(--text-micro);
  margin-top: 2px;
  padding-left: 12px;
  white-space: pre-line;
}

/* Issues Tab */
.product-issues-toolbar {
  display: flex;
  gap: var(--sp-1);
  align-items: center;
  margin-bottom: 8px;
}

.product-issues-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.product-issue-card {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-left: 3px solid var(--pixel-white);
  padding: 0;
  border-radius: var(--radius-sm);
}

.product-issue-card.issue-closed {
  opacity: 0.6;
}

.product-issue-card.priority-p0 { border-left-color: #ff4444; }
.product-issue-card.priority-p1 { border-left-color: #ff8800; }
.product-issue-card.priority-p2 { border-left-color: var(--pixel-yellow); }
.product-issue-card.priority-p3 { border-left-color: var(--text-dim); }

.issue-card-header {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  cursor: pointer;
  font-size: var(--text-label);
}

.issue-card-header:hover {
  background: rgba(255,255,255,0.03);
}

.issue-card-priority {
  font-weight: bold;
  min-width: 28px;
}

.issue-card-title {
  flex: 1;
  color: var(--pixel-white);
  cursor: pointer;
}

.issue-card-title:hover {
  color: var(--pixel-cyan);
}

.issue-card-status {
  font-size: var(--text-micro);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
}

.issue-card-status.status-backlog { color: var(--text-dim); }
.issue-card-status.status-planned { color: var(--pixel-yellow); }
.issue-card-status.status-in_progress { color: var(--pixel-cyan); }
.issue-card-status.status-in_review { color: #ff8800; }
.issue-card-status.status-done { color: var(--pixel-green); }
.issue-card-status.status-released { color: var(--text-dim); font-style: italic; }

.issue-action-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font-pixel);
  font-size: var(--text-micro);
  padding: 1px 6px;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.issue-action-btn:hover {
  border-color: var(--pixel-cyan);
  color: var(--pixel-cyan);
}

.issue-card-body {
  padding: 6px 8px 8px 36px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.issue-card-body.hidden {
  display: none;
}

.issue-card-desc {
  color: var(--pixel-white);
  font-size: var(--text-label);
  line-height: 1.6;
  margin-bottom: 6px;
  cursor: pointer;
  padding: 2px;
}

.issue-card-desc:hover {
  background: rgba(255,255,255,0.03);
}

.issue-card-meta {
  font-size: var(--text-micro);
  color: var(--text-dim);
}

.issue-label {
  display: inline-block;
  background: rgba(0,255,255,0.1);
  color: var(--pixel-cyan);
  padding: 0 4px;
  border-radius: var(--radius-sm);
  margin-right: 3px;
  font-size: var(--text-micro);
}

/* New Issue Inline Form */
.issue-inline-add {
  padding: var(--sp-2);
  background: rgba(0,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
}

.issue-inline-add .form-input {
  margin-bottom: 4px;
}

.issue-new-row {
  display: flex;
  gap: var(--sp-1);
  align-items: center;
}

/* ================================================================
   Kanban Board
   ================================================================ */

.kanban-board {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding: 4px 0;
  min-height: 200px;
}

.kanban-column {
  flex: 1;
  min-width: 130px;
  max-width: 200px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.kanban-column-header {
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--text-label);
  color: var(--pixel-cyan);
  border-bottom: 1px solid var(--border);
  text-align: center;
  font-weight: bold;
}

.kanban-card-list {
  padding: var(--sp-1);
  min-height: 40px;
}

.kanban-card-list.kanban-drop-target {
  background: rgba(0,255,255,0.05);
  outline: 1px dashed var(--pixel-cyan);
}

.kanban-card {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-dim);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  margin-bottom: 4px;
  cursor: grab;
  font-size: var(--text-micro);
  transition: opacity 0.15s;
}

.kanban-card.dragging {
  opacity: 0.4;
}

.kanban-card.priority-p0 { border-left-color: #ff4444; }
.kanban-card.priority-p1 { border-left-color: #ff8800; }
.kanban-card.priority-p2 { border-left-color: var(--pixel-yellow); }
.kanban-card.priority-p3 { border-left-color: var(--text-dim); }

.kanban-card.kanban-blocked {
  background: rgba(255,68,68,0.08);
}

.kanban-priority {
  font-size: var(--text-micro);
  padding: 0 3px;
  border-radius: var(--radius-sm);
  margin-right: 4px;
}

.kanban-card-title {
  color: var(--pixel-white);
  word-break: break-word;
}

.kanban-card-meta {
  color: var(--text-dim);
  font-size: var(--text-micro);
  margin-top: 3px;
  display: flex;
  gap: var(--sp-1);
  align-items: center;
}

.kanban-sp {
  background: rgba(255,255,255,0.08);
  padding: 0 3px;
  border-radius: var(--radius-sm);
}

.kanban-blocked-icon {
  font-size: var(--text-micro);
}

/* ================================================================
   Roadmap Timeline
   ================================================================ */

.roadmap-section {
  margin-bottom: 16px;
}

.roadmap-section h3 {
  color: var(--pixel-cyan);
  font-size: var(--text-label);
  margin: 0 0 8px 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}

.roadmap-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.roadmap-sprint-bar {
  background: rgba(0,255,255,0.05);
  border: 1px solid var(--border);
  border-left: 3px solid var(--pixel-cyan);
  border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-2);
}

.roadmap-sprint-bar.roadmap-status-active {
  border-left-color: var(--pixel-green);
  background: rgba(0,255,0,0.05);
}

.roadmap-sprint-bar.roadmap-status-closed {
  border-left-color: var(--text-dim);
  opacity: 0.7;
}

.roadmap-bar-label {
  color: var(--pixel-white);
  font-size: var(--text-label);
  font-weight: bold;
}

.roadmap-bar-dates {
  color: var(--text-dim);
  font-size: var(--text-micro);
  margin-top: 2px;
}

.roadmap-status-badge {
  display: inline-block;
  font-size: var(--text-micro);
  padding: 0 4px;
  border-radius: var(--radius-sm);
  margin-top: 3px;
  color: var(--pixel-cyan);
  border: 1px solid var(--border);
}

.roadmap-status-badge.roadmap-status-active { color: var(--pixel-green); border-color: var(--pixel-green); }
.roadmap-status-badge.roadmap-status-closed { color: var(--text-dim); border-color: var(--text-dim); }

.roadmap-goal {
  color: var(--text-dim);
  font-size: var(--text-micro);
  font-style: italic;
  margin-top: 2px;
}

.roadmap-version-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  font-size: var(--text-label);
}

.roadmap-version-tag {
  color: var(--pixel-green);
  font-weight: bold;
  min-width: 60px;
}

.roadmap-version-date {
  color: var(--text-dim);
  min-width: 80px;
}

.roadmap-version-count {
  color: var(--pixel-white);
}

.roadmap-milestone-group {
  margin-bottom: 10px;
}

.roadmap-milestone-header {
  color: var(--pixel-yellow);
  font-size: var(--text-label);
  font-weight: bold;
  margin-bottom: 4px;
}

.roadmap-issue-row {
  padding: 2px 8px;
  font-size: var(--text-micro);
  color: var(--pixel-white);
  border-left: 2px solid var(--text-dim);
  margin-left: 8px;
}

.roadmap-issue-row.priority-p0 { border-left-color: #ff4444; }
.roadmap-issue-row.priority-p1 { border-left-color: #ff8800; }

.roadmap-issue-pri {
  color: var(--text-dim);
  margin-right: 4px;
}

.roadmap-issue-status {
  color: var(--text-dim);
  font-size: var(--text-micro);
  margin-left: 6px;
}

/* ================================================================
   Activity Feed
   ================================================================ */

.activity-feed {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.activity-item {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

.activity-icon {
  font-size: var(--text-label);
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.activity-content {
  flex: 1;
  min-width: 0;
}

.activity-header {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

.activity-type {
  color: var(--pixel-cyan);
  font-size: var(--text-micro);
  font-weight: bold;
  text-transform: capitalize;
}

.activity-actor {
  color: var(--text-dim);
  font-size: var(--text-micro);
}

.activity-detail {
  color: var(--pixel-white);
  font-size: var(--text-micro);
  margin-top: 1px;
  word-break: break-word;
}

.activity-ts {
  color: var(--text-dim);
  font-size: var(--text-micro);
  margin-top: 1px;
}

/* Product Detail Button in panel */
.product-detail-btn {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: var(--text-body);
  padding: 0 4px;
}

.product-detail-btn:hover {
  color: var(--pixel-cyan);
}

/* Inline select dropdowns in product detail */
.issue-priority-select {
  font-size: var(--text-label);
  padding: 1px 4px;
  min-width: 40px;
  font-weight: bold;
}

.kr-detail-target {
  cursor: pointer;
  color: var(--text-dim);
}

.kr-detail-target:hover {
  color: var(--pixel-cyan);
  text-decoration: underline;
}

.kr-detail-unit {
  cursor: pointer;
  color: var(--text-dim);
}

.kr-detail-unit:hover {
  color: var(--pixel-cyan);
}

.issue-card-history {
  margin-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 4px;
}

.issue-history-label {
  color: var(--text-dim);
  font-size: var(--text-micro);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.issue-history-entry {
  color: var(--text-dim);
  font-size: var(--text-micro);
  padding: 1px 0;
}

.issue-story-points {
  font-size: var(--text-micro);
  color: var(--pixel-cyan);
  background: rgba(0,255,255,0.1);
  padding: 0 4px;
  border-radius: var(--radius-sm);
}

.product-planning-indicator {
  color: var(--pixel-yellow);
  font-size: var(--text-micro);
  margin-left: 6px;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ================================================================
   B3: Toast Notifications
   ================================================================ */

.app-toast-container {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: var(--z-critical);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  pointer-events: none;
}

.app-toast {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--pixel-cyan);
  border-radius: var(--radius-sm);
  padding: var(--pad-button);
  font-family: var(--font-pixel);
  font-size: var(--text-label);
  color: var(--pixel-white);
  max-width: 320px;
  pointer-events: auto;
  animation: toast-in 0.2s ease-out;
  cursor: pointer;
}

.app-toast.toast-error {
  border-left-color: #ff4444;
}

.app-toast.toast-success {
  border-left-color: var(--pixel-green);
}

.app-toast.toast-warning {
  border-left-color: var(--pixel-yellow);
}

.app-toast.toast-out {
  animation: toast-out 0.2s ease-in forwards;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(40px); }
}

/* ================================================================
   B3: Issue Links UI
   ================================================================ */

.issue-links-section {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.issue-links-header {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-bottom: 4px;
}

.issue-links-title {
  color: var(--pixel-cyan);
  font-size: var(--text-micro);
  font-weight: bold;
}

.issue-links-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.issue-link-row {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px 4px;
  font-size: var(--text-micro);
  border-radius: var(--radius-sm);
}

.issue-link-row:hover {
  background: rgba(255,255,255,0.03);
}

.issue-link-type {
  color: var(--text-dim);
  min-width: 70px;
  font-size: var(--text-micro);
}

.issue-link-target {
  color: var(--pixel-white);
  flex: 1;
}

.issue-link-remove {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: var(--text-label);
  padding: 0 2px;
  font-family: var(--font-pixel);
}

.issue-link-remove:hover {
  color: #ff4444;
}

.issue-link-add-row {
  display: flex;
  gap: var(--sp-1);
  align-items: center;
  margin-top: 4px;
}

.issue-link-add-row select,
.issue-link-add-row input {
  font-size: var(--text-micro);
}

/* ================================================================
   B3: Sprint Inline Form
   ================================================================ */

.sprint-inline-add {
  padding: var(--sp-2);
  background: rgba(0,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}

.sprint-inline-add .form-input {
  margin-bottom: 4px;
}

.sprint-form-row {
  display: flex;
  gap: var(--sp-1);
  align-items: center;
}

.sprint-actions {
  display: flex;
  gap: var(--sp-1);
  margin-top: 4px;
}

.sprint-action-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font-pixel);
  font-size: var(--text-micro);
  padding: 1px 6px;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.sprint-action-btn:hover {
  border-color: var(--pixel-cyan);
  color: var(--pixel-cyan);
}

.sprint-action-btn.danger:hover {
  border-color: #ff4444;
  color: #ff4444;
}

/* ================================================================
   B3: Search Input
   ================================================================ */

.issue-search-input {
  background: var(--bg-dark);
  border: 1px solid var(--border);
  color: var(--pixel-white);
  font-family: var(--font-pixel);
  font-size: var(--text-micro);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  width: 120px;
}

.issue-search-input::placeholder {
  color: var(--text-dim);
}

.issue-search-input:focus {
  border-color: var(--pixel-cyan);
  outline: none;
}

/* ================================================================
   B3: Tab Overflow
   ================================================================ */

.project-tabs {
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
}

.project-tabs::-webkit-scrollbar {
  display: none;
}

.project-tab {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ================================================================
   B3: Delete Issue Button
   ================================================================ */

.issue-delete-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font-pixel);
  font-size: var(--text-micro);
  padding: 1px 6px;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.issue-delete-btn:hover {
  border-color: #ff4444;
  color: #ff4444;
}

/* Review Cards */
.review-card {
  background: rgba(0,255,255,0.03);
  border: 1px solid rgba(0,255,255,0.1);
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--pad-component);
  margin-bottom: 6px;
}
.review-card.review-completed {
  opacity: 0.7;
  border-color: rgba(0,255,0,0.15);
}
.review-card-header {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  margin-bottom: 6px;
  font-size: var(--text-micro);
}
.review-trigger {
  color: var(--accent);
  font-weight: bold;
  text-transform: uppercase;
  font-size: var(--text-micro);
}
.review-date { color: var(--text-dim); }
.review-owner { color: var(--text-dim); }
.review-items { margin: 4px 0; }
.review-item-row {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px 0;
  font-size: var(--text-label);
}
.review-item-row input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
}
.review-item-checked {
  text-decoration: line-through;
  color: var(--text-dim);
}

/* Release Form */
.release-form {
  margin-top: 8px;
}

/* ===== Responsive Breakpoints ===== */

/* Tablet: two-column, roster collapses, scale up text */
@media (max-width: 1024px) {
  :root {
    --size-1: calc(6px + var(--font-boost));
    --size-2: calc(8px + var(--font-boost));
    --size-3: calc(10px + var(--font-boost));
    --sp-5: 20px;
  }
  #app {
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "left-top    canvas"
      "left-bottom canvas"
      "console     console";
  }
  #roster-panel {
    display: none;
  }
  .floating-panel {
    width: 280px !important;
  }
}

/* Mobile: single column stack, larger text for readability */
@media (max-width: 768px) {
  :root {
    --size-1: calc(7px + var(--font-boost));
    --size-2: calc(9px + var(--font-boost));
    --size-3: calc(11px + var(--font-boost));
    --size-4: calc(13px + var(--font-boost));
    --sp-4: 12px;
    --sp-5: 16px;
  }
  #app {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 200px auto;
    grid-template-areas:
      "canvas"
      "console"
      "left-top"
      "left-bottom";
    height: auto;
    min-height: 100vh;
  }
  #roster-panel {
    display: none;
  }
  #office-panel .panel-header {
    flex-wrap: wrap;
  }
  #status-bar {
    flex-wrap: wrap;
    gap: var(--sp-1);
  }
  .floating-panel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    max-height: 60vh;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }
  #ceo-split {
    flex-direction: column;
  }
  #ceo-project-list {
    max-height: 120px;
    overflow-y: auto;
  }
  .modal-body {
    padding: var(--sp-3);
  }
  .toolbar-icon-btn {
    padding: var(--sp-2);
  }
}

/* Small mobile: extra text boost */
@media (max-width: 480px) {
  :root {
    --size-1: calc(8px + var(--font-boost));
    --size-2: calc(10px + var(--font-boost));
    --size-3: calc(12px + var(--font-boost));
    --size-4: calc(14px + var(--font-boost));
  }
  #app {
    gap: 2px;
    padding: 2px;
  }
  .modal-content {
    width: 98vw !important;
    max-width: 98vw !important;
    margin: 1vh auto;
  }
}

/* Wide desktop: use extra space */
@media (min-width: 1440px) {
  #app {
    grid-template-columns: 280px 1fr 320px;
  }
}

/* ===== Accessibility: Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== Accessibility: Touch Targets (mobile only) ===== */
@media (pointer: coarse) {
  button, [role="button"], select, input[type="checkbox"], input[type="radio"] {
    min-height: 44px;
    min-width: 44px;
  }
  /* Exempt small/inline elements — full-width hit area or intentionally compact */
  .pixel-title button, .pixel-btn.small, .btn-small,
  .collapsible-header, .toolbar-icon-btn, .kanban-column-header {
    min-height: unset;
    min-width: unset;
  }
}

/* ===== Interaction: Disabled State ===== */
button:disabled, [aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}