/* AI Maestro V2 — Dashboard Styles */

/* ------------------------------------------------------------------ */
/* CSS Variables (locked values from 04-CONTEXT.md)                    */
/* ------------------------------------------------------------------ */
:root {
  --color-base: #0d1117;
  --color-panel: #161b22;
  --color-border: #21262d;
  --color-text: #c9d1d9;
  --color-text-muted: #8b949e;
  --color-accent-claude: #d4a574;
  --color-accent-gemini: #a3e635;
  --color-accent-openai: #74b9ff;
  --color-error: #f85149;
  --color-success: #3fb950;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sidebar-skills: 250px;
  --sidebar-timeline: 300px;
  --border-radius: 6px;
  --gap: 12px;
  --color-bg-secondary: #161b22;
  --color-bg-tertiary: #21262d;
  --color-accent-link: #58a6ff;
  --transition-fast: 0.15s ease;
  --transition-medium: 0.3s ease;
}

/* Light theme override */
body.light-theme {
  --color-base: #ffffff;
  --color-panel: #f6f8fa;
  --color-border: #d0d7de;
  --color-text: #1f2328;
  --color-text-muted: #656d76;
  --color-bg-secondary: #f6f8fa;
  --color-bg-tertiary: #eaeef2;
  --color-accent-link: #0969da;
  --color-error: #cf222e;
  --color-success: #1a7f37;
}

/* ------------------------------------------------------------------ */
/* Reset                                                                */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--color-base);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: 14px;
}

/* ------------------------------------------------------------------ */
/* Root Layout — 4-column CSS Grid                                     */
/* ------------------------------------------------------------------ */
.dashboard {
  display: grid;
  grid-template-columns: var(--sidebar-skills) 1fr var(--sidebar-timeline);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header   header"
    "skills  center   timeline"
    "input   input    input";
  height: 100vh;
  gap: var(--gap);
  padding: var(--gap);
}

/* ------------------------------------------------------------------ */
/* Header bar                                                          */
/* ------------------------------------------------------------------ */
.header {
  grid-area: header;
  display: flex;
  align-items: center;
  height: 40px;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 0 16px;
}

.header-title {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

#status-bar {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-left: auto;
}

/* ------------------------------------------------------------------ */
/* Skills / GSD Sidebar (left)                                         */
/* ------------------------------------------------------------------ */
.sidebar-skills {
  grid-area: skills;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 12px;
  overflow-y: auto;
}

.sidebar-heading {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.skill-btn {
  display: block;
  width: 100%;
  background: var(--color-base);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  text-align: left;
  margin-bottom: 6px;
}

.skill-btn:hover {
  border-color: var(--color-text-muted);
}

.skill-btn.active {
  border-color: var(--color-accent-claude);
  color: var(--color-accent-claude);
}

.gsd-phase {
  padding: 4px 0;
}

/* ------------------------------------------------------------------ */
/* Center — Agent tabs + response panes                               */
/* ------------------------------------------------------------------ */
.center-area {
  grid-area: center;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Tab bar */
.agent-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.tab-btn {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding: 6px 16px;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 4px;
}

.tab-btn.active {
  border-bottom-color: transparent;
  color: var(--color-text);
  background: var(--color-panel);
}

/* Agent-specific active top border */
#tab-claude.active  { border-top: 2px solid var(--color-accent-claude); }
#tab-gemini.active  { border-top: 2px solid var(--color-accent-gemini); }
#tab-openai.active  { border-top: 2px solid var(--color-accent-openai); }

/* Tab label colors (non-active state — accent colors always on label) */
#tab-claude  .tab-label { color: var(--color-accent-claude); }
#tab-gemini  .tab-label { color: var(--color-accent-gemini); }
#tab-openai  .tab-label { color: var(--color-accent-openai); }

/* Agent status badge */
.agent-status {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 6px;
}

/* Response panes */
.response-pane {
  flex: 1;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
  padding: 16px;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.6;
  min-height: 0;
}

.response-pane.hidden { display: none; }
.response-pane.has-error { border-color: var(--color-error); }
.error-msg { color: var(--color-error); font-style: italic; }

/* ------------------------------------------------------------------ */
/* Timeline Sidebar (right)                                            */
/* ------------------------------------------------------------------ */
.sidebar-timeline {
  grid-area: timeline;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 12px;
  overflow-y: auto;
}

.timeline-entry {
  font-size: 0.75rem;
  font-family: var(--font-mono);
  border-left: 2px solid var(--color-border);
  padding: 4px 8px;
  margin-bottom: 6px;
  color: var(--color-text-muted);
}

.timeline-entry.entry-token { border-color: var(--color-text-muted); }
.timeline-entry.entry-done  { border-color: var(--color-success); color: var(--color-success); }
.timeline-entry.entry-error { border-color: var(--color-error); color: var(--color-error); }

/* ------------------------------------------------------------------ */
/* Input bar (bottom)                                                  */
/* ------------------------------------------------------------------ */
.input-bar {
  grid-area: input;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 8px;
}

#prompt-input {
  flex: 1;
  background: var(--color-base);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  padding: 10px 14px;
  resize: none;
  min-height: 60px;
  max-height: 200px;
  outline: none;
  line-height: 1.5;
}

#prompt-input:focus {
  border-color: #58a6ff;
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
}

#prompt-input::placeholder { color: var(--color-text-muted); }

#submit-btn {
  background: #238636;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 20px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  height: 40px;
  white-space: nowrap;
}

#submit-btn:hover    { background: #2ea043; }
#submit-btn:disabled { background: var(--color-border); cursor: not-allowed; }

/* ------------------------------------------------------------------ */
/* Markdown content styles (inside .response-pane)                     */
/* ------------------------------------------------------------------ */
.response-pane h1,
.response-pane h2,
.response-pane h3 {
  color: var(--color-text);
  margin-bottom: 8px;
  font-family: var(--font-ui);
}

.response-pane p { margin-bottom: 8px; }

.response-pane a { color: var(--color-accent-openai); }

.response-pane ul,
.response-pane ol {
  margin-bottom: 8px;
  padding-left: 20px;
}

.response-pane code {
  background: var(--color-base);
  padding: 2px 4px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.85em;
}

.response-pane pre {
  background: var(--color-base);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 12px;
  overflow-x: auto;
  margin-bottom: 12px;
}

.response-pane pre code {
  background: transparent;
  padding: 0;
}

/* ------------------------------------------------------------------ */
/* Responsive Breakpoints                                              */
/* ------------------------------------------------------------------ */
@media (max-width: 1200px) {
  .dashboard {
    grid-template-columns: 0 1fr 0;
  }
  .sidebar-skills,
  .sidebar-timeline {
    display: none;
  }
}

@media (max-width: 768px) {
  .dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas:
      "header"
      "center"
      "input"
      "timeline";
  }
  .sidebar-skills { display: none; }
  .sidebar-timeline {
    display: block;
    max-height: 200px;
  }
}

/* ------------------------------------------------------------------ */
/* Phase 5: Routing override dropdown                                  */
/* ------------------------------------------------------------------ */
#routing-override {
  background: var(--color-base);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  padding: 0 8px;
  height: 40px;
  cursor: pointer;
  min-width: 110px;
}

#routing-override:focus { outline: none; border-color: var(--color-text-muted); }

/* ------------------------------------------------------------------ */
/* Phase 5: Routing badge on agent tabs                                */
/* ------------------------------------------------------------------ */
.routing-badge {
  font-size: 0.65rem;
  padding: 2px 5px;
  border-radius: 8px;
  background: var(--color-border);
  color: var(--color-text-muted);
  margin-left: 4px;
  display: none;
}

.routing-badge.visible { display: inline-block; }

.routing-badge.routed-to-claude { background: var(--color-accent-claude); color: var(--color-base); }
.routing-badge.routed-to-gemini { background: var(--color-accent-gemini); color: var(--color-base); }
.routing-badge.routed-to-openai { background: var(--color-accent-openai); color: var(--color-base); }

/* ------------------------------------------------------------------ */
/* Phase 5: Review button (per response pane)                          */
/* ------------------------------------------------------------------ */
.review-btn {
  display: none;
  margin-top: 12px;
  background: var(--color-base);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  padding: 5px 12px;
  cursor: pointer;
}

.review-btn:hover { border-color: var(--color-text-muted); color: var(--color-text); }

/* ------------------------------------------------------------------ */
/* Phase 5: Synthesize button + synthesis display (timeline sidebar)  */
/* ------------------------------------------------------------------ */
.synthesize-btn {
  display: none;
  width: 100%;
  margin-top: 8px;
  margin-bottom: 8px;
  background: #238636;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  padding: 6px 0;
  cursor: pointer;
}

.synthesize-btn:hover { background: #2ea043; }
.synthesize-btn:disabled { background: var(--color-border); cursor: not-allowed; }

.synthesis-display {
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--color-text);
  border-left: 2px solid var(--color-accent-claude);
  padding: 8px;
  margin-top: 4px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.synthesis-display:empty { display: none; }

/* === Phase 7: Settings panel === */
.settings-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 360px;
  background: var(--color-panel);
  border-left: 1px solid var(--color-border);
  z-index: 1000;
  overflow-y: auto;
}
.settings-inner { padding: 20px; }
.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-weight: 600;
  color: var(--color-text);
}
.settings-header button {
  background: none; border: none; color: var(--color-text-muted);
  font-size: 1.2rem; cursor: pointer;
}
.settings-hint { font-size: 0.78rem; color: var(--color-text-muted); margin-bottom: 20px; line-height: 1.5; }
.key-field {
  margin-bottom: 20px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 12px;
}
.key-field label {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.key-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--color-base);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text);
  padding: 6px 8px;
  font-size: 0.85rem;
  margin-bottom: 8px;
}
.key-actions { display: flex; gap: 8px; margin-bottom: 6px; }
.key-save-btn, .key-delete-btn {
  padding: 4px 12px;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  cursor: pointer;
  font-size: 0.8rem;
}
.key-save-btn { background: #238636; color: #fff; border-color: #238636; }
.key-delete-btn { background: none; color: var(--color-text-muted); }
.key-masked { font-size: 0.78rem; color: var(--color-text-muted); font-family: monospace; }
/* === Phase 8: History panel === */
.history-panel{position:fixed;top:0;right:0;width:340px;height:100vh;background:var(--color-panel);border-left:1px solid var(--color-border);z-index:200;overflow-y:auto;box-shadow:-4px 0 16px rgba(0,0,0,0.4);}
.history-inner{padding:16px;} .history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-weight:600;color:var(--color-text);} .history-header button{background:none;border:none;color:var(--color-text-muted);font-size:1.2rem;cursor:pointer;}
.history-search{width:100%;box-sizing:border-box;background:var(--color-bg,var(--color-base));border:1px solid var(--color-border);color:var(--color-text);border-radius:4px;padding:6px 8px;margin-bottom:10px;font-size:0.85rem;}
.history-list{display:flex;flex-direction:column;gap:6px;} .history-item{background:var(--color-base);border:1px solid var(--color-border);border-radius:4px;padding:8px 10px;cursor:pointer;font-size:0.82rem;color:var(--color-text-muted);}
.history-item:hover{border-color:var(--color-accent-claude);color:var(--color-text);} .history-item .history-title{display:block;font-weight:500;color:var(--color-text);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .history-item .history-date{font-size:0.75rem;}