:root {
  color-scheme: light;
  --bg: #f4f6f8;
  --surface: #ffffff;
  --text: #17202a;
  --muted: #667085;
  --border: #d7dde5;
  --accent: #176b87;
  --accent-dark: #0f4e64;
  --ok: #147a42;
  --bad: #b42318;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
}

button {
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  min-height: 38px;
  padding: 8px 12px;
}

button:hover {
  background: var(--accent-dark);
}

.secondaryButton {
  background: #fff;
  border-color: var(--border);
  color: var(--text);
  margin-bottom: 10px;
}

.secondaryButton:hover {
  background: #f8fafc;
}

.buttonLink {
  align-items: center;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: #fff;
  display: inline-flex;
  font-weight: 700;
  min-height: 38px;
  padding: 8px 12px;
  text-decoration: none;
}

.buttonLink:hover {
  background: var(--accent-dark);
}

.secondaryLink {
  background: #475467;
  border-color: #475467;
}

button:disabled {
  background: #98a2b3;
  border-color: #98a2b3;
  cursor: not-allowed;
}

.shell {
  margin: 0 auto;
  max-width: 1180px;
  padding: 28px;
}

.topbar {
  align-items: center;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 22px;
}

.workspaceNav {
  background: #e7ebf0;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  padding: 4px;
}

.navTab {
  background: transparent;
  border-color: transparent;
  border-radius: 6px;
  color: #344054;
  flex: 1;
  min-height: 42px;
}

.navTab:hover,
.navTab.active {
  background: #fff;
  border-color: var(--border);
  color: var(--text);
}

.workspaceSection {
  display: grid;
  gap: 16px;
}

.workspaceSection[hidden] {
  display: none;
}

.sectionIntro {
  align-items: end;
  display: flex;
  justify-content: space-between;
  margin: 4px 0 2px;
}

.eyebrow,
.subtle {
  color: var(--muted);
  margin: 0;
}

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2 {
  letter-spacing: 0;
  margin: 0;
}

h1 {
  font-size: 34px;
}

h2 {
  font-size: 20px;
}

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px;
}

.activityPanel {
  margin-bottom: 0;
}

.panelHeader {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.panelNotice {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  margin-bottom: 12px;
  padding: 10px 12px;
}

.activityLog {
  display: grid;
  gap: 8px;
}

.activityItem {
  align-items: center;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 6px;
  display: grid;
  gap: 6px;
  grid-template-columns: 80px minmax(180px, 1fr) minmax(0, 2fr);
  padding: 10px 12px;
}

.activity-info {
  border-left-color: #176b87;
}

.activity-success {
  border-left-color: var(--ok);
}

.activity-error {
  border-left-color: var(--bad);
}

.activityTime {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.status {
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  padding: 8px 12px;
  white-space: nowrap;
}

.status-muted {
  background: #e7ebf0;
  color: #344054;
}

.status-ok {
  background: #dcfce7;
  color: var(--ok);
}

.status-bad {
  background: #fee4e2;
  color: var(--bad);
}

.facts {
  display: grid;
  gap: 12px;
  margin: 0;
}

.compactFacts {
  margin-bottom: 16px;
}

.facts div {
  border-top: 1px solid var(--border);
  display: grid;
  gap: 8px;
  grid-template-columns: 120px 1fr;
  padding-top: 12px;
}

dt {
  color: var(--muted);
  font-weight: 700;
}

dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.projectList {
  display: grid;
  gap: 10px;
}

.projectItem,
.requestItem {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
}

.projectItem strong {
  display: block;
  margin-bottom: 4px;
}

.requestList {
  display: grid;
  gap: 12px;
}

.featureBoard {
  display: grid;
  gap: 14px;
}

.featureCard {
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  padding: 14px;
}

.featureCardHeader {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.featureCard h3 {
  font-size: 18px;
  margin: 8px 0 0;
}

.featureSignals {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.featureSignal {
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 6px;
  display: grid;
  gap: 4px;
  min-height: 68px;
  padding: 10px;
}

.featureSignal span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.featureSignal strong {
  overflow-wrap: anywhere;
}

.featureSignal-ok {
  border-left-color: var(--ok);
}

.featureSignal-open {
  border-left-color: #f79009;
}

.featureLinks {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 12px;
}

.featureDetailBlock {
  display: grid;
  gap: 10px;
}

.featureDetailBlock a {
  color: var(--accent);
  font-weight: 700;
}

.workflowSteps {
  display: grid;
  gap: 10px;
}

.workflowStep {
  align-items: start;
  border: 1px solid var(--border);
  border-left-width: 5px;
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: 34px minmax(0, 1fr);
  padding: 12px;
}

.workflowStep-done {
  border-left-color: var(--ok);
}

.workflowStep-ready {
  border-left-color: var(--accent);
}

.workflowStep-blocked {
  border-left-color: #f79009;
}

.workflowStep-failed {
  border-left-color: var(--bad);
}

.workflowNumber {
  align-items: center;
  background: #eef4ff;
  border-radius: 999px;
  color: #3538cd;
  display: inline-flex;
  font-weight: 700;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.workflowHeader {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.workflowHeader span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.workflowStep p {
  color: var(--muted);
  margin: 6px 0 0;
}

.workflowStep small {
  color: var(--bad);
  display: block;
  font-weight: 700;
  margin-top: 6px;
}

.automationLogs {
  display: grid;
  gap: 10px;
  max-height: 560px;
  overflow: auto;
}

.automationLog {
  border: 1px solid var(--border);
  border-left-width: 5px;
  border-radius: 8px;
  display: grid;
  gap: 6px;
  grid-template-columns: 80px minmax(0, 1fr);
  padding: 10px 12px;
}

.automationLog-info {
  border-left-color: var(--accent);
}

.automationLog-success {
  border-left-color: var(--ok);
}

.automationLog-warning {
  border-left-color: #f79009;
}

.automationLog-error {
  border-left-color: var(--bad);
}

.automationLog span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.automationLog pre {
  background: #101828;
  border-radius: 6px;
  color: #e4e7ec;
  grid-column: 2;
  margin: 0;
  max-height: 180px;
  overflow: auto;
  padding: 10px;
  white-space: pre-wrap;
}

.v0ResponsePanel {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.v0StatusHeader {
  align-items: center;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 12px;
}

.v0StatusHeader span {
  color: var(--muted);
  display: block;
  font-size: 13px;
  margin-top: 4px;
}

.v0FileHints {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}

.v0FileHints ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.v0FileHints li {
  margin: 4px 0;
  overflow-wrap: anywhere;
}

.v0Message {
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.v0Assistant {
  border-left: 5px solid var(--accent);
}

.v0Message pre {
  background: #101828;
  border-radius: 6px;
  color: #e4e7ec;
  margin: 0;
  max-height: 340px;
  overflow: auto;
  padding: 12px;
  white-space: pre-wrap;
}

.requestItem {
  display: grid;
  gap: 10px;
}

.requestItem p {
  color: var(--muted);
  margin: 0;
}

.chatDetails {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 6px;
  display: grid;
  gap: 12px;
  padding: 12px;
}

.detailGrid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.detailGrid div {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  display: grid;
  gap: 4px;
  padding: 10px;
}

.detailGrid span {
  color: var(--muted);
}

.messageList {
  display: grid;
  gap: 10px;
}

.miniItem {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  display: grid;
  gap: 8px;
  padding: 10px;
}

.requestDetails {
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.requestDetails summary {
  color: var(--accent);
  cursor: pointer;
  font-weight: 700;
}

.requestOutput {
  background: #101828;
  border-radius: 6px;
  color: #e4e7ec;
  margin: 10px 0 0;
  max-height: 360px;
  overflow: auto;
  padding: 14px;
  white-space: pre-wrap;
}

.jiraPreview,
.branchPreview {
  background: #082f49;
  border-radius: 6px;
  color: #e0f2fe;
  margin: 0;
  max-height: 420px;
  overflow: auto;
  padding: 14px;
  white-space: pre-wrap;
}

.branchPreview {
  background: #1f2937;
  color: #f9fafb;
}

.jiraIssue {
  background: #ecfdf3;
  border: 1px solid #abefc6;
  border-radius: 6px;
  color: #067647;
  padding: 10px 12px;
}

.requestMeta,
.requestActions,
.actionRow {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.actionRow {
  margin-bottom: 16px;
}

.pill {
  background: #eef4ff;
  border: 1px solid #c7d7fe;
  border-radius: 999px;
  color: #3538cd;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 8px;
}

.output {
  background: #101828;
  border-radius: 6px;
  color: #e4e7ec;
  margin: 0;
  min-height: 240px;
  overflow: auto;
  padding: 14px;
  white-space: pre-wrap;
}

.summaryBox {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 12px;
  padding: 14px;
  white-space: pre-wrap;
}

.technicalDetails {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.technicalDetails summary {
  color: var(--accent);
  cursor: pointer;
  font-weight: 700;
  margin-bottom: 10px;
}

.compactOutput {
  max-height: 320px;
  min-height: 120px;
}

.form {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
}

.inlineOption {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.inlineOption input {
  width: auto;
}

label {
  color: var(--muted);
  display: grid;
  font-weight: 700;
  gap: 6px;
}

select,
textarea {
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  padding: 10px 12px;
  width: 100%;
}

textarea {
  min-height: 130px;
  resize: vertical;
}

@media (max-width: 760px) {
  .shell {
    padding: 18px;
  }

  .workspaceNav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topbar,
  .panelHeader {
    align-items: flex-start;
    flex-direction: column;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .featureSignals,
  .detailGrid {
    grid-template-columns: 1fr;
  }

  .facts div {
    grid-template-columns: 1fr;
  }
}