:root {
  color-scheme: light;
  --ink: #102a43;
  --muted: #627d98;
  --brand: #0f4c5c;
  --brand-dark: #083b4c;
  --accent: #ffb703;
  --canvas: #f3f7f9;
  --surface: #ffffff;
  --border: #d9e2ec;
  --success: #18794e;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); }
button, input, textarea { font: inherit; }
button { border: 0; border-radius: .65rem; background: var(--brand); color: white; cursor: pointer; font-weight: 700; padding: .75rem 1rem; }
button:hover { background: var(--brand-dark); }
button:disabled { cursor: wait; opacity: .65; }
input, textarea { width: 100%; border: 1px solid var(--border); border-radius: .55rem; color: var(--ink); margin-top: .4rem; padding: .7rem .8rem; }
textarea { resize: vertical; }
label { display: block; font-size: .9rem; font-weight: 650; }
h1, h2, h3, p { margin-top: 0; }
.hidden { display: none !important; }
.sr-only { height: 1px; margin: -1px; overflow: hidden; position: absolute; width: 1px; clip: rect(0, 0, 0, 0); }
.eyebrow { color: var(--brand); font-size: .74rem; font-weight: 800; letter-spacing: .11em; margin-bottom: .45rem; text-transform: uppercase; }
.muted { color: var(--muted); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; box-shadow: 0 12px 30px rgb(16 42 67 / 6%); padding: 1.35rem; }
.secondary { background: #e8f1f5; color: var(--brand-dark); }
.secondary:hover { background: #d9eaf0; }
.text-button { background: transparent; color: #d9e2ec; padding: .4rem 0; text-align: left; }
.text-button:hover { background: transparent; color: white; }
.form-error { color: #b42318; min-height: 1.25rem; }

.login-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr); min-height: 100vh; }
.brand-panel { align-content: center; background: linear-gradient(135deg, #0f4c5c, #083b4c); color: white; padding: clamp(2rem, 10vw, 8rem); }
.brand-panel .eyebrow { color: var(--accent); }
.brand-panel h1 { font-size: clamp(2.5rem, 6vw, 5.5rem); line-height: .98; max-width: 8ch; }
.brand-panel p:last-child { color: #d9e2ec; font-size: 1.1rem; line-height: 1.6; max-width: 32rem; }
.login-card { align-self: center; justify-self: center; width: min(100%, 27rem); }
.login-card label { margin: 1rem 0; }
.login-card button { width: 100%; }

.workspace { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: #102a43; color: white; display: flex; flex-direction: column; gap: 1.3rem; padding: 1.5rem; }
.sidebar h1 { margin: 0; }
.sidebar .eyebrow { color: var(--accent); }
.sidebar nav { display: grid; gap: .25rem; }
.sidebar nav a { border-radius: .55rem; color: #d9e2ec; padding: .7rem; text-decoration: none; }
.sidebar nav a.active, .sidebar nav a:hover { background: rgb(255 255 255 / 12%); color: white; }
.sidebar .text-button { margin-top: auto; }
.main-content { padding: clamp(1rem, 3vw, 2.5rem); }
.topbar { align-items: center; display: flex; justify-content: space-between; margin-bottom: 1.5rem; }
.topbar h2 { margin-bottom: 0; }
.status-chip { background: #e8f5ee; border-radius: 2rem; color: var(--success); font-size: .85rem; font-weight: 700; padding: .45rem .75rem; }
.content-grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1.5fr) minmax(18rem, .75fr); }
.chat-card { display: flex; flex-direction: column; min-height: 38rem; }
.section-heading p { color: var(--muted); }
.messages { display: grid; gap: .8rem; flex: 1; margin: 1rem 0; overflow-y: auto; }
.message { border-radius: .75rem; max-width: 85%; padding: .85rem 1rem; }
.message p { line-height: 1.5; margin: .35rem 0 0; white-space: pre-wrap; }
.assistant-message { background: #e8f1f5; }
.user-message { background: var(--brand); color: white; justify-self: end; }
.message-form { border-top: 1px solid var(--border); display: grid; gap: .7rem; padding-top: 1rem; }
.message-form button { justify-self: end; }
.task-panel { display: grid; gap: 1.25rem; align-content: start; }
.phase-list { display: grid; gap: .7rem; list-style: none; margin: 1.25rem 0; padding: 0; }
.phase-list li { border-left: 3px solid var(--border); color: var(--muted); font-size: .92rem; padding-left: .7rem; }
.phase-list li.completed { border-color: var(--success); color: var(--ink); }
.phase-list li.waiting_approval { border-color: var(--accent); color: var(--ink); font-weight: 700; }
.approval-actions { border-top: 1px solid var(--border); padding-top: 1rem; }
.button-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .7rem; }

@media (max-width: 800px) {
  .login-layout, .workspace, .content-grid { grid-template-columns: 1fr; }
  .brand-panel { min-height: 35vh; }
  .sidebar { min-height: auto; }
  .sidebar .text-button { margin-top: 0; }
  .topbar { align-items: flex-start; gap: .8rem; }
}