/* Console add-in — design system. Light/dark adaptive via prefers-color-scheme so
   Outlook dark mode is respected. CSS variables drive all colors (spec §2). */

:root {
  --bg: #ffffff;
  --panel: #f5f7fa;
  --text: #1b1f24;
  --muted: #6b7280;
  --border: #e6e9ee;
  --border-2: #d4d9e0;
  --info: #0b6bcb;
  --info-bg: #e9f1fc;
  --info-border: #b9d6f6;
  --info-text: #0b5fa5;
  --ok: #2ea043;
  --warn: #d29922;
  --down: #f85149;
  --unknown: #8b949e;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1f24;
    --panel: #22272e;
    --text: #e6edf3;
    --muted: #9aa4af;
    --border: #30363d;
    --border-2: #3d444d;
    --info: #1f6feb;
    --info-bg: #10243e;
    --info-border: #1f4d7a;
    --info-text: #58a6ff;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 13px/1.45 -apple-system, "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.app { display: flex; flex-direction: column; min-height: 100vh; }
.loading { padding: 24px; color: var(--muted); }
.muted { color: var(--muted); }

/* Header */
.header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg); z-index: 5;
}
.health-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex: 0 0 auto; cursor: pointer;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 0%, transparent);
}
.brand { font-weight: 600; font-size: 14px; }
.ver { margin-left: auto; font-size: 11px; color: var(--muted); }

/* Context strip (compose only) */
.context-strip {
  padding: 8px 12px; background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.cs-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); }
.cs-name { font-weight: 600; font-size: 13px; }
.cs-subj { font-size: 12px; color: var(--muted); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Body (current screen) */
.body { flex: 1 1 auto; padding: 12px; overflow-y: auto; }
.p0-note { padding: 16px; border: 1px dashed var(--border-2); border-radius: 8px; color: var(--text); }

/* Section label */
.section-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--muted); margin: 4px 0 8px; }

/* Cards / workflow rows */
.workflow-row {
  display: block; width: 100%; text-align: left;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); padding: 10px 12px; margin-bottom: 8px; cursor: pointer;
}
.workflow-row .wf-title { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.workflow-row .wf-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }
.workflow-row .wf-badge { margin-left: auto; font-size: 10px; padding: 1px 6px;
  border-radius: 10px; border: 1px solid var(--border-2); color: var(--muted); }
.workflow-row.active { background: var(--info-bg); border-color: var(--info-border); }
.workflow-row.active .wf-title { color: var(--info-text); }
.workflow-row.disabled { opacity: 0.55; cursor: not-allowed; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13px; font-weight: 600; padding: 10px 14px; border-radius: 8px;
  border: 1px solid transparent; cursor: pointer; width: 100%; }
.btn-primary { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); }
.btn-secondary { background: transparent; border-color: var(--border-2); color: var(--text); font-weight: 500; }
.btn-row { display: flex; gap: 8px; margin-top: 8px; }
.btn-row .btn { width: auto; flex: 1; }

/* Preview */
.preview { border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
  padding: 12px; white-space: pre-wrap; max-height: 38vh; overflow-y: auto; font-size: 13px; }

/* Footer */
.footer { padding: 6px 12px; border-top: 1px solid var(--border);
  font-size: 11px; color: var(--muted); }

/* Bottom nav */
.bottom-nav { display: flex; border-top: 1px solid var(--border);
  position: sticky; bottom: 0; background: var(--bg); }
.nav-item { flex: 1; text-align: center; padding: 10px; font-size: 12px;
  color: var(--muted); cursor: pointer; }
.nav-item.active { color: var(--info-text); font-weight: 600; }

/* Back chevron */
.screen-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-bottom: 1px solid var(--border); }
.back-chev { cursor: pointer; color: var(--muted); font-size: 16px; line-height: 1; }
.screen-title { font-weight: 600; }
.round-pill { margin-left: auto; font-size: 11px; color: var(--muted); }

/* Feedback textarea (P4 — Regenerate) */
.feedback-input { width: 100%; margin-top: 10px; min-height: 46px; padding: 8px;
  font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--border-2); border-radius: 8px; resize: vertical; }
.feedback-input::placeholder { color: var(--muted); }
.feedback-input:disabled { opacity: 0.6; }

/* Resume list (P4 — daa-7 auto-resume) */
.resume-item { padding: 8px 0; border-bottom: 1px solid var(--border); }
.resume-item:last-of-type { border-bottom: none; }
.resume-excerpt { margin: 4px 0 6px; font-size: 12px; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }