:root {
  --bg: #f5ede3;
  --panel: #fffdf9;
  --raised: #fbf3e9;
  --line: #e7d6c3;
  --text: #40332e;
  --muted: #827167;
  --blue: #b85f56;
  --blue-soft: #f8dfd6;
  --green: #648b70;
  --green-soft: #e6f1e7;
  --yellow: #d9a04f;
  --yellow-soft: #fff1d6;
  --red: #b95350;
  --shadow: 0 14px 38px rgba(104, 70, 51, .12);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(184, 137, 103, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184, 137, 103, .10) 1px, transparent 1px),
    radial-gradient(rgba(119, 82, 57, .10) .6px, transparent .8px);
  background-size: 22px 22px, 22px 22px, 9px 9px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, textarea, input, select { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:active { transform: translateY(1px); }
button:disabled { cursor: not-allowed; opacity: .45; }

.app {
  width: 100%;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto auto 1fr;
  background: var(--panel);
}
header {
  min-height: 64px;
  padding: max(14px, env(safe-area-inset-top)) 20px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
h1 { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--blue); font-size: 15px; letter-spacing: .04em; }
h1 span { width: 11px; height: 11px; border: 3px solid var(--blue); border-radius: 50%; box-shadow: 7px 0 0 -3px var(--yellow); }
.live { display: flex; align-items: center; gap: 7px; color: var(--green); font-size: 11px; font-weight: 700; }
.live span { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.live b { font-size: inherit; }
.live.checking { color: #80610a; }
.live.checking span { background: var(--yellow); box-shadow: 0 0 0 4px var(--yellow-soft); }
.live.offline { color: var(--red); }
.live.offline span { background: var(--red); box-shadow: 0 0 0 4px #fff3f4; }

.view-tabs { display: grid; grid-template-columns: repeat(8, 1fr); padding: 7px; gap: 5px; border-bottom: 1px solid var(--line); background: var(--panel); }
.view-tab {
  position: relative;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
}
.view-tab svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.view-tab > span { display: none; }
.view-tab:hover { color: var(--blue); background: var(--raised); }
.view-tab.active { color: var(--blue); border-color: #cdd9ff; background: var(--blue-soft); }
#inbox-badge { position: absolute; top: 3px; right: 5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; color: #654700; background: var(--yellow); font-size: 9px; line-height: 17px; }

.view { min-width: 0; min-height: 0; background: var(--panel); }
#chat-view { display: none; grid-template-rows: auto auto auto auto 1fr auto; }
#chat-view.active { display: grid; }
#history-view, #assignments-view, #inbox-view, #files-view, #agents-view { display: none; overflow-y: auto; }
#history-view.active, #assignments-view.active, #inbox-view.active, #files-view.active, #agents-view.active { display: block; }
.section-heading { padding: 20px 22px; border-bottom: 1px solid var(--line); }
.section-heading strong { display: block; margin-bottom: 3px; color: var(--blue); font-size: 12px; letter-spacing: .06em; }
.section-heading span { color: var(--muted); font-size: 11px; }

nav { min-height: 58px; padding: 10px 16px; display: flex; gap: 8px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.chat-agent-context { padding: 10px 16px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; border-bottom: 1px solid var(--line); background: var(--panel); }
.chat-agent-summary { display: flex; gap: 18px; }
.chat-agent-summary div { min-width: 90px; }
.chat-agent-summary span { display: block; margin-bottom: 3px; color: var(--muted); font-size: 10px; }
.chat-agent-summary strong { display: block; color: var(--text); font-size: 12px; overflow-wrap: anywhere; }
.chat-workspace-controls { min-width: 0; display: grid; grid-template-columns: minmax(130px, .6fr) minmax(220px, 1.4fr) auto auto; gap: 7px; }
.chat-workspace-controls select, .chat-workspace-controls input { min-width: 0; min-height: 38px; padding: 0 10px; font-size: 12px; }
.chat-workspace-controls button { min-height: 38px; padding: 0 12px; border: 1px solid var(--blue); border-radius: 19px; color: #fff; background: var(--blue); font-size: 10px; font-weight: 800; }
.chat-workspace-controls button.secondary { color: var(--blue); background: var(--panel); }
.chat-mode-switch { min-height: 52px; padding: 8px 16px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid var(--line); background: var(--panel); }
.chat-mode-switch button { min-height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 17px; color: var(--muted); background: var(--panel); font-size: 10px; font-weight: 800; }
.chat-mode-switch button.active { color: #fff; border-color: var(--blue); background: var(--blue); }
.chat-mode-switch span { margin-left: 6px; color: var(--muted); font-size: 10px; }
.planning-progress { padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--raised); }
.planning-progress[hidden] { display: none; }
.planning-progress-copy { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.planning-progress-copy strong { color: var(--text); font-size: 14px; }
.planning-progress-copy span { color: var(--muted); font-size: 12px; }
.planning-progress ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.planning-progress li { min-width: 0; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
.planning-progress li::after { content: ""; height: 2px; flex: 1; border-radius: 2px; background: var(--line); }
.planning-progress li:last-child::after { display: none; }
.planning-progress li span { width: 25px; height: 25px; flex: 0 0 25px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); font-size: 11px; }
.planning-progress li.active { color: var(--blue); }
.planning-progress li.active span { color: #fff; border-color: var(--blue); background: var(--blue); }
.planning-progress li.done { color: var(--green); }
.planning-progress li.done span { color: #fff; border-color: var(--green); background: var(--green); }
.planning-progress li.done::after { background: var(--green); }
.planning-welcome { max-width: 620px; margin: auto; padding: 30px; border: 1px solid #cbd7f6; border-radius: 20px; color: var(--muted); background: var(--panel); box-shadow: 0 8px 28px rgba(25,48,105,.08); text-align: left; }
.planning-welcome .planning-kicker { display: block; margin-bottom: 8px; color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.planning-welcome strong { display: block; margin-bottom: 8px; color: var(--text); font-size: 20px; }
.planning-welcome p { margin: 0; font-size: 14px; line-height: 1.6; }
.planning-welcome ul { margin: 18px 0 0; padding-left: 20px; color: var(--text); font-size: 13px; line-height: 1.8; }
.chat .task-card.plan-chat-card { width: min(900px, 100%); margin: 0 auto; }
.agent-tab {
  min-height: 36px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--muted);
  background: var(--panel);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}
.agent-tab:hover { color: var(--blue); border-color: var(--blue); }
.agent-tab.active { color: #fff; border-color: var(--blue); background: var(--blue); }

.chat {
  min-height: 0;
  padding: 26px clamp(24px, 4vw, 60px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--raised);
  background-image:
    linear-gradient(rgba(184, 137, 103, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184, 137, 103, .075) 1px, transparent 1px);
  background-size: 22px 22px;
}
.chat-workspace { position: relative; min-width: 0; min-height: 0; display: grid; overflow: hidden; }
.chat-workspace > .chat { width: 100%; height: 100%; grid-area: 1 / 1; }
.plan-artifact { position: absolute; z-index: 6; top: 10px; right: 10px; bottom: 10px; width: min(430px, calc(100% - 20px)); display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid #cbd7f6; border-radius: 18px; background: var(--panel); box-shadow: 0 16px 45px rgba(25,48,105,.18); transition: width .2s; }
.plan-artifact[hidden] { display: none; }
.plan-artifact.collapsed { width: 64px; }
.plan-artifact.collapsed .plan-artifact-head > div, .plan-artifact.collapsed .plan-artifact-body { display: none; }
.plan-artifact.collapsed .plan-artifact-head { justify-content: center; padding: 10px 5px; }
.plan-artifact-head { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--blue-soft); }
.plan-artifact-head div { min-width: 0; }
.plan-artifact-head strong { display: block; color: var(--blue); font-size: 11px; letter-spacing: .06em; }
.plan-artifact-head span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.plan-artifact-head button { min-height: 30px; padding: 0 9px; border: 1px solid #c6d3f7; border-radius: 15px; color: var(--blue); background: var(--panel); font-size: 8px; font-weight: 800; }
.plan-artifact-body { min-height: 0; padding: 11px; overflow-y: auto; }
.artifact-empty { padding: 35px 12px; color: var(--muted); text-align: center; font-size: 11px; line-height: 1.6; }
.artifact-task-list { display: grid; gap: 9px; }
.artifact-task { padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: 0 3px 12px rgba(25,45,90,.04); }
.artifact-task[draggable="true"] { cursor: grab; }
.artifact-task.dragging { opacity: .45; border-color: var(--blue); }
.artifact-task-top { display: flex; align-items: center; gap: 7px; }
.artifact-task-top strong { color: var(--blue); font-size: 10px; }
.artifact-task-top span { margin-left: auto; padding: 3px 7px; border-radius: 9px; color: var(--green); background: var(--green-soft); font-size: 8px; font-weight: 700; }
.drag-handle { min-height: 25px; padding: 0 7px; border: 1px dashed #acbce8; border-radius: 9px; color: var(--blue); background: var(--blue-soft); font-size: 7px; font-weight: 800; }
.artifact-task h3 { margin: 9px 0 5px; color: var(--text); font-size: 14px; line-height: 1.4; }
.artifact-task p { margin: 0 0 7px; color: var(--muted); white-space: pre-wrap; font-size: 12px; line-height: 1.55; }
.artifact-task small { color: #80610a; font-size: 11px; }
.artifact-task-actions { display: flex; gap: 6px; margin-top: 9px; }
.artifact-task-actions button { min-height: 27px; padding: 0 9px; border: 1px solid #cad6f8; border-radius: 14px; color: var(--blue); background: var(--blue-soft); font-size: 8px; font-weight: 800; }
.artifact-task-actions button:last-child { color: var(--red); border-color: #f1c4ca; background: #fff3f4; }
.artifact-add { display: grid; gap: 7px; margin-top: 13px; padding: 12px; border: 1px dashed #b7c7f6; border-radius: 14px; background: var(--raised); }
.artifact-add strong { color: var(--blue); font-size: 9px; }
.artifact-add input, .artifact-add select { width: 100%; min-height: 38px; padding: 0 10px; font-size: 10px; }
.artifact-add textarea { min-height: 65px; font-size: 10px; }
.artifact-add button, .pin-plan { min-height: 38px; border: 0; border-radius: 19px; color: #fff; background: var(--blue); font-size: 9px; font-weight: 800; }
.pin-plan { width: 100%; margin-top: 10px; background: var(--green); }
.welcome { max-width: 380px; margin: auto; text-align: center; color: var(--muted); }
.welcome-icon { width: 58px; height: 58px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 19px; color: #fff; background: var(--blue); box-shadow: 0 10px 25px rgba(33,71,199,.22); font-size: 18px; font-weight: 800; }
.welcome h2 { margin: 0 0 6px; color: var(--text); font-size: 20px; }
.welcome p { margin: 0; font-size: 13px; }
.bubble { max-width: min(82%, 860px); padding: 13px 16px; border: 1px solid var(--line); border-radius: 18px; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--panel); box-shadow: 0 3px 12px rgba(91,59,42,.06); font-size: 13px; line-height: 1.55; }
.bubble.user { align-self: flex-end; color: #fff; border-color: var(--blue); border-bottom-right-radius: 5px; background: var(--blue); }
.bubble.agent { align-self: flex-start; border-bottom-left-radius: 5px; }
.bubble.command { align-self: stretch; max-width: 100%; color: var(--muted); border-style: dashed; background: var(--yellow-soft); font-size: 11px; }
.bubble.command, .task-result { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.bubble.error { color: var(--red); border-color: #f2cbd0; background: #fff3f4; }
.typing { animation: pulse .8s infinite alternate; }
@keyframes pulse { to { opacity: .4; } }

form { background: var(--panel); }
#composer { padding: 12px 16px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
textarea, input, select {
  outline: none;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  transition: border-color .15s, box-shadow .15s;
}
textarea { width: 100%; min-height: 44px; max-height: 160px; padding: 11px 13px; resize: vertical; font-size: 13px; }
textarea:focus, input:focus, select:focus { border-color: var(--blue) !important; box-shadow: 0 0 0 3px var(--blue-soft); }
.actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.actions button, .primary-wide, .assignment-controls button, .workspace-picker button {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--blue);
  border-radius: 19px;
  color: #fff;
  background: var(--blue);
  font-size: 10px;
  font-weight: 800;
}
.actions .secondary { color: var(--blue); background: var(--panel); }

.assignment-form { padding: 18px; border-bottom: 1px solid var(--line); background: var(--raised); }
.assignment-form > label:first-child { display: block; margin-bottom: 8px; color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .07em; }
.assignment-form input, .assignment-form > select { width: 100%; min-height: 43px; margin-bottom: 8px; padding: 0 12px; font-size: 12px; }
.assignment-form textarea { margin-bottom: 8px; }
.run-option { min-height: 34px; display: flex !important; align-items: center; gap: 9px; color: var(--muted) !important; font-size: 11px; }
.run-option input { width: 18px; min-height: 18px; margin: 0; accent-color: var(--blue); box-shadow: none; }
.assignment-controls, .workspace-picker { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 8px 0; }
.assignment-controls select, .workspace-picker select { min-height: 43px; padding: 0 12px; }
.workspace-picker button { border-color: var(--green); background: var(--green); }
.primary-wide { width: 100%; border-color: var(--green); background: var(--green); }

.assignment-list, .workspace-list { padding: 14px; }
.workspace-list { border-bottom: 1px solid var(--line); }
.assignment-empty { padding: 60px 15px; color: var(--muted); text-align: center; font-size: 12px; }
.task-card, .agent-card, .workspace-row { margin-bottom: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 17px; background: var(--panel); box-shadow: 0 5px 18px rgba(30,56,110,.05); }
.workspace-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.workspace-row strong { display: block; color: var(--blue); font-size: 11px; }
.workspace-row span, .agent-card .repository { display: block; margin-top: 4px; color: var(--muted); overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; }
.workspace-row button { min-height: 30px; padding: 0 9px; border: 1px solid #f1c4ca; border-radius: 15px; color: var(--red); background: #fff3f4; font-size: 8px; font-weight: 700; }
.task-meta, .agent-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.task-agent, .agent-card h3 { margin: 0; color: var(--blue); font-size: 12px; text-transform: uppercase; }
.task-status { padding: 5px 9px; border-radius: 12px; color: var(--muted); background: var(--raised); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.task-status.running, .task-status.review { color: #765500; background: var(--yellow-soft); }
.task-status.completed, .task-status.waiting, .task-status.paused { color: var(--green); background: var(--green-soft); }
.task-status.failed, .task-status.interrupted, .agent-state.stopped { color: var(--red); background: #fff3f4; }
.task-root { margin: 8px 0 0; color: var(--muted); overflow-wrap: anywhere; font: 9px ui-monospace, Consolas, monospace; }
.task-prompt { margin: 12px 0; font-size: 12px; line-height: 1.5; }
.task-card:not(.expanded) .task-prompt { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.task-details[hidden] { display: none; }
.task-details { max-height: min(520px, 58vh); overflow-y: auto; margin-top: 10px; padding-right: 4px; scrollbar-gutter: stable; }
.task-card.expanded { border-color: #cbd7f6; }
.task-result, .task-live, .assignment-chat-feed { margin-top: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); white-space: pre-wrap; font-size: 10px; line-height: 1.5; }
.task-live, .assignment-chat-feed { max-height: 220px; overflow-y: auto; }
.task-live-line, .assignment-chat-line { padding: 3px 0; color: var(--muted); overflow-wrap: anywhere; font: 10px/1.45 ui-monospace, Consolas, monospace; }
.task-live-line.message, .assignment-chat-line.message { color: var(--text); }
.task-live-line.error, .assignment-chat-line.error { color: var(--red); }
.task-live-line.interaction, .task-live-line.steer, .assignment-chat-line.interaction, .assignment-chat-line.steer { color: var(--green); font-weight: 700; }
.task-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.task-actions button, .agent-card-header button, .subtask-open { min-height: 32px; padding: 0 11px; border: 1px solid #cad6f8; border-radius: 16px; color: var(--blue); background: var(--blue-soft); font-size: 9px; font-weight: 800; }
.task-actions .approve-plan, .task-actions .resume-task { color: #fff; border-color: var(--green); background: var(--green); }
.task-actions .revise-plan { color: #6d5100; border-color: #f1d87e; background: var(--yellow-soft); }
.agent-state { color: var(--green); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.agent-card textarea { min-height: 100px; margin-top: 10px; }
.agent-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.agent-settings label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 700; }
.agent-settings label.wide { grid-column: 1 / -1; }
.agent-settings input, .agent-settings select { width: 100%; min-width: 0; min-height: 40px; padding: 0 10px; font-size: 12px; }
.task-actions button.danger { color: var(--red); border-color: #f1c4ca; background: #fff3f4; }

.task-plan { margin: 0 0 12px; padding: 12px; border: 1px solid #ced9f9; border-radius: 14px; background: var(--blue-soft); }
.task-plan > strong { display: block; margin-bottom: 9px; color: var(--blue); font-size: 10px; }
.plan-conversation { display: grid; gap: 7px; margin: 10px 0 13px; padding-bottom: 12px; border-bottom: 1px solid #ced9f9; }
.plan-message { max-width: 85%; padding: 9px 11px; border-radius: 13px; white-space: pre-wrap; font-size: 10px; line-height: 1.5; }
.plan-message.user { justify-self: end; color: #fff; background: var(--blue); border-bottom-right-radius: 4px; }
.plan-message.agent { justify-self: start; color: var(--text); background: var(--panel); border-bottom-left-radius: 4px; }
.subtask { position: relative; margin-top: 8px; padding: 10px 70px 10px 12px; border-left: 3px solid var(--yellow); border-radius: 8px; white-space: pre-wrap; color: var(--muted); background: var(--panel); font-size: 10px; line-height: 1.5; }
.subtask.running, .subtask.completed { border-color: var(--green); }
.subtask.failed, .subtask.paused { border-color: var(--red); }
.subtask-open { position: absolute; top: 8px; right: 8px; min-height: 26px; }

.file-toolbar { display: grid; grid-template-columns: 1fr auto; gap: 9px; padding: 14px; border-bottom: 1px solid var(--line); }
.file-toolbar select { min-height: 42px; padding: 0 12px; }
.file-toolbar button { padding: 0 15px; border: 1px solid var(--blue); border-radius: 20px; color: var(--blue); background: var(--blue-soft); font-weight: 800; }
.file-path { padding: 10px 16px; color: var(--blue); border-bottom: 1px solid var(--line); overflow-wrap: anywhere; font: 10px ui-monospace, Consolas, monospace; }
.file-list { padding: 10px 14px; }
.file-entry.selected { color: var(--blue); border-color: var(--blue); background: var(--blue-soft); }
.file-entry { width: 100%; min-height: 44px; display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; padding: 0 10px; color: var(--text); border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.file-entry:hover { background: var(--raised); }
.file-entry .file-icon { color: var(--blue); }
.file-entry .file-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.file-entry .file-size { color: var(--muted); font-size: 9px; }
.file-viewer { margin: 14px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); overflow: hidden; }
.file-viewer[hidden] { display: none !important; }
.file-viewer-head { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.file-viewer-head > div { min-width: 0; display: flex; align-items: center; gap: 9px; }
.file-viewer-head strong { color: var(--blue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.file-viewer-head span { flex: 0 0 auto; padding: 3px 7px; border-radius: 10px; color: var(--green); background: var(--green-soft); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.file-viewer-head a { padding: 7px 11px; border-radius: 14px; color: #fff; background: var(--blue); font-size: 8px; font-weight: 800; text-decoration: none; }
.file-viewer pre { max-height: 60vh; margin: 0; padding: 18px; overflow: auto; color: var(--text); background: #302b2a; tab-size: 2; font: 12px/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; }
.file-viewer code { color: #f7eee5; white-space: pre; }
.syntax-comment { color: #a9b6a3; font-style: italic; }
.syntax-keyword { color: #f2a89c; font-weight: 700; }
.syntax-string { color: #f1cf8d; }
.syntax-number { color: #a9d5bd; }
.syntax-type { color: #bdd5e6; }

.interaction-card { align-self: stretch; padding: 15px; border: 1px solid #f0d272; border-radius: 15px; background: var(--yellow-soft); }
.interaction-card > strong { display: block; margin-bottom: 9px; color: #755600; font-size: 10px; }
.interaction-card.resolved { opacity: .6; }
.interaction-card form { background: transparent; }
.interaction-question { display: block; margin-bottom: 9px; font-size: 11px; }
.interaction-question select, .interaction-question input, .other-answer { width: 100%; min-height: 40px; padding: 0 11px; }
.interaction-card form > button, .interaction-actions button { min-height: 34px; padding: 0 13px; border: 0; border-radius: 17px; color: #fff; background: var(--green); font-size: 9px; font-weight: 800; }
.interaction-actions { display: flex; gap: 7px; }

.subtask-dialog { width: min(720px, calc(100vw - 28px)); height: min(780px, calc(100dvh - 28px)); margin: auto; padding: 0; border: 1px solid var(--line); border-radius: 22px; color: var(--text); background: var(--panel); box-shadow: var(--shadow); }
.subtask-dialog::backdrop { background: rgba(20,33,60,.35); backdrop-filter: blur(3px); }
.subtask-dialog-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.subtask-dialog-head div { display: grid; gap: 3px; }
.subtask-dialog-head strong, .subtask-brief strong { color: var(--blue); }
.subtask-dialog-head span { color: var(--muted); font-size: 10px; }
.subtask-dialog-head button { width: 34px; height: 34px; border: 0; border-radius: 17px; color: var(--blue); background: var(--blue-soft); }
.subtask-brief { max-height: 30%; overflow-y: auto; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.subtask-brief p { margin: 5px 0 12px; white-space: pre-wrap; font-size: 11px; }
.subtask-chat-feed { height: 45%; overflow-y: auto; padding: 16px; background: var(--raised); }
.subtask-chat-line, .subtask-chat-result { margin-bottom: 8px; padding: 10px; border-radius: 12px; background: var(--panel); white-space: pre-wrap; font-size: 11px; }
.subtask-guidance-form { position: absolute; right: 0; bottom: 0; left: 0; display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); border-radius: 0 0 22px 22px; }
.subtask-guidance-form textarea { flex: 1; min-width: 0; resize: none; }
.subtask-guidance-form button { padding: 0 18px; border: 0; border-radius: 18px; color: #fff; background: var(--blue); font-size: 10px; font-weight: 800; }
.task-editor-dialog { width: min(680px, calc(100vw - 28px)); max-height: min(850px, calc(100dvh - 28px)); margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; color: var(--text); background: var(--panel); box-shadow: var(--shadow); }
.task-editor-dialog::backdrop { background: rgba(20,33,60,.35); backdrop-filter: blur(3px); }
.task-editor-dialog form { max-height: inherit; display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.task-editor-head { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line); background: var(--blue-soft); }
.task-editor-head strong { display: block; color: var(--blue); font-size: 12px; }
.task-editor-head span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; text-transform: uppercase; }
.task-editor-head button, .task-editor-actions button { min-height: 34px; padding: 0 12px; border: 1px solid #c6d3f7; border-radius: 17px; color: var(--blue); background: var(--panel); font-size: 8px; font-weight: 800; }
.task-editor-fields { padding: 18px; display: grid; gap: 13px; overflow-y: auto; }
.task-editor-fields > label { display: grid; gap: 6px; color: var(--blue); font-size: 10px; font-weight: 700; }
.task-editor-fields input, .task-editor-fields select { width: 100%; min-height: 42px; padding: 0 11px; font-size: 11px; }
.task-editor-fields textarea { min-height: 120px; font-size: 11px; }
.task-editor-fields fieldset { margin: 0; padding: 11px; border: 1px solid var(--line); border-radius: 13px; }
.task-editor-fields legend { padding: 0 5px; color: var(--blue); font-size: 10px; font-weight: 700; }
.dependency-options { max-height: 140px; display: grid; gap: 7px; overflow-y: auto; }
.dependency-options label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
.dependency-options input { width: 16px; min-height: 16px; margin: 0; accent-color: var(--blue); }
.file-upload { padding: 11px; border: 1px dashed #b7c7f6; border-radius: 13px; background: var(--raised); }
.file-upload input { padding: 9px; background: var(--panel); }
.task-editor-attachments { display: grid; gap: 6px; }
.task-editor-attachments > div { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 11px; }
.task-editor-attachments span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 9px; }
.task-editor-attachments button { min-height: 26px; padding: 0 8px; border: 1px solid #f1c4ca; border-radius: 13px; color: var(--red); background: #fff3f4; font-size: 7px; font-weight: 800; }
.task-editor-actions { padding: 12px 18px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); }
.task-editor-actions button[type="submit"] { color: #fff; border-color: var(--green); background: var(--green); }

@media (min-width: 900px) {
  body { padding: 12px; background-color: var(--bg); }
  .app {
    width: min(1680px, 100%);
    height: calc(100dvh - 24px);
    min-height: 0;
    margin: auto;
    grid-template-columns: 210px minmax(0, 1fr);
    grid-template-rows: 82px minmax(0, 1fr);
    border: 1px solid var(--line);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow);
  }
  header { grid-column: 1; grid-row: 1; padding: 0 22px; border-right: 1px solid var(--line); }
  header .live { display: none; }
  .view-tabs { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 14px; border-right: 1px solid var(--line); border-bottom: 0; }
  .view-tab { min-height: 48px; justify-content: flex-start; padding: 0 14px; }
  .view-tab > span { display: inline; }
  #inbox-badge { top: 15px; right: 12px; }
  .view { grid-column: 2; grid-row: 1 / 3; }
  #files-view.active {
    grid-template-columns: minmax(250px, 31%) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
  }
  #files-view .file-toolbar,
  #files-view .file-path { grid-column: 1 / -1; }
  #files-view .file-list { grid-column: 1 / -1; min-height: 0; overflow-y: auto; }
  #files-view:has(.file-viewer:not([hidden])) .file-list { grid-column: 1; }
  #files-view .file-viewer { min-width: 0; min-height: 0; margin: 12px 12px 12px 0; display: flex; flex-direction: column; }
  #files-view .file-viewer pre { min-height: 0; max-height: none; flex: 1; }
  #chat-view { grid-template-rows: 48px 48px 42px auto minmax(0, 1fr) auto; }
  #chat-view > nav { min-height: 48px; padding: 6px 16px; }
  .chat-agent-context { padding: 5px 16px; }
  .chat-workspace-controls select,
  .chat-workspace-controls input,
  .chat-workspace-controls button { min-height: 34px; }
  .chat-mode-switch { min-height: 42px; padding: 5px 16px; }
  .chat-mode-switch button { min-height: 30px; }
  /* Keep chat full-width until the planning artifact is actually opened. */
  .chat-workspace { grid-template-columns: minmax(0, 1fr); }
  .chat-workspace:has(.plan-artifact:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(310px, 360px); }
  .chat-workspace > .chat { grid-area: 1 / 1; }
  .plan-artifact { position: static; width: auto; margin: 12px 12px 12px 0; grid-area: 1 / 2; box-shadow: 0 8px 28px rgba(25,48,105,.09); }
  .plan-artifact.collapsed { width: 58px; justify-self: end; }
  .chat-workspace:has(.plan-artifact.collapsed) { grid-template-columns: minmax(0, 1fr) 70px; }
  #agents-view.active { display: grid; grid-template-columns: minmax(330px, 38%) minmax(0, 1fr); align-content: start; }
  #project-projects-panel { display: grid; grid-template-columns: minmax(300px, 38%) minmax(0, 1fr); align-items: start; }
  #assignments-view .assignment-form, #agents-view .assignment-form { min-height: 100%; border-right: 1px solid var(--line); border-bottom: 0; }
  #agents-view .section-heading, #agents-view .workspace-list { grid-column: 2; }
  #agents-view #agent-list { grid-column: 2; }
  .assignment-form { padding: 26px; }
  .assignment-list { padding: 22px; }
  .task-card, .agent-card { padding: 19px; }
  #composer {
    padding: 10px 22px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
  }
  #composer .actions { margin-top: 0; }
  .chat { padding: 30px clamp(30px, 5vw, 80px); }
}

@media (max-width: 600px) {
  .view-tab { min-height: 42px; border-radius: 11px; }
  .view-tab svg { width: 19px; height: 19px; }
  header { min-height: 54px; padding-inline: 14px; }
  .chat { padding: 12px; }
  .chat-mode-switch span { display: none; }
  .chat-agent-context { display: block; padding: 10px 12px; }
  .chat-agent-summary { margin-bottom: 8px; }
  .chat-workspace-controls { grid-template-columns: 1fr 1fr; }
  .chat-workspace-controls input { grid-column: 1 / -1; }
  .planning-progress-copy { display: block; }
  .planning-progress-copy span { display: block; margin-top: 3px; }
  .planning-progress li { gap: 4px; font-size: 0; }
  .bubble { max-width: 92%; }
  .assignment-form, .assignment-list { padding: 12px; }
  .subtask-dialog { width: 100vw; height: 100dvh; max-width: none; max-height: none; border: 0; border-radius: 0; }
  .task-editor-dialog { width: 100vw; height: 100dvh; max-width: none; max-height: none; border: 0; border-radius: 0; }
}
.codex-sessions { margin-bottom: 24px; }
.session-sync-status { display: block; color: var(--muted); font-size: 12px; }
.session-sync-status:empty { display: none; }
.project-sections { display: flex; gap: 8px; margin-bottom: 18px; }
.project-sections button { flex: 1; }
.project-sections button[aria-pressed="true"] { color: var(--blue); background: var(--blue-soft); }
#project-projects-panel[hidden], #project-sessions-panel[hidden] { display: none; }
.codex-sessions > p { color: var(--muted, #999); line-height: 1.5; }
.codex-sessions .section-heading { justify-content: space-between; }
.codex-sessions .agent-card h3,
.codex-sessions .repository { overflow-wrap: anywhere; }

.collection-heading { padding: 24px; border-bottom: 1px solid var(--line); }
.collection-heading h2 { margin: 0 0 6px; font-size: 22px; }
.collection-heading p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.project-list-panel { min-width: 0; }
.project-list-panel .section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.project-field-label { display: block; margin: 8px 0; color: var(--muted); font-size: 12px; }
.project-create { min-width: 0; background: var(--raised); border-bottom: 1px solid var(--line); }
.project-create summary { padding: 20px; min-height: 48px; cursor: pointer; color: var(--blue); font-weight: 700; }
.project-create summary span { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; font-weight: 400; }
#history-view { padding: 0 24px 24px; }
#history-view .collection-heading { padding-inline: 0; margin-bottom: 20px; }
#history-view .project-sections { justify-content: flex-start; }
#history-view .project-sections button { flex: 0 1 auto; min-height: 40px; padding: 8px 18px; }
#history-view .section-heading { display: flex; align-items: center; gap: 12px; padding: 16px 0; }
#history-view .codex-sessions > label { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; color: var(--muted); font-size: 13px; }
#history-view .codex-sessions select { min-height: 40px; padding: 8px 12px; }
.session-help { margin-top: 14px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.session-help summary { cursor: pointer; padding: 8px 0; }
#codex-sessions-refresh, #codex-sessions-more, #codex-sessions-list .agent-card > button { padding: 10px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--blue-soft); color: var(--blue); font-size: 12px; font-weight: 700; }
#codex-sessions-list .agent-card > button { width: 100%; }
#codex-sessions-list { padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 14px; align-items: start; }
#codex-sessions-list .agent-card { min-width: 0; margin: 0; }
#codex-sessions-list .agent-card > p { font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
#codex-sessions-list .agent-card > .session-activity { font-size: 13px; }
#codex-sessions-list .agent-card > .session-latest { font-size: 14px; }
#codex-sessions-list .agent-card h3 { font-size: 17px; line-height: 1.4; text-transform: none; }
#codex-sessions-list .session-latest { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; white-space: pre-wrap; max-height: 9em; }
@media (max-width: 760px) {
  .collection-heading { padding: 18px 14px; }
  #history-view { padding: 0 14px 20px; }
}
/* Session setup stays usable in desktop and phone quick access. */
#new-session-dialog {
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel, #161620);
  color: var(--text);
}
#new-session-dialog::backdrop { background: #0009; }
#new-session-form { display: grid; gap: 14px; }
#new-session-form label { display: grid; gap: 6px; font-size: 13px; }
#new-session-form input, #new-session-form select { width: 100%; min-width: 0; min-height: 44px; }
#new-session-form .session-help { font-size: 12px; opacity: .7; margin: 0; }
#new-session-error { color: var(--red); margin: 0; }

.history-filters { display:flex; flex-wrap:wrap; align-items:end; gap:12px; margin:16px 0; }
.history-filters label { display:grid; gap:6px; font-size:13px; }
.history-filters input, .history-filters select, .history-filters button { min-height:40px; }
.history-insights { padding:20px; margin:16px 0; border:1px solid var(--line); border-radius:14px; background:var(--panel); }
.history-insights h3 { margin:0 0 12px; }
.history-summary { font-size:16px; font-weight:600; }
.history-hours { display:grid; grid-template-columns:repeat(24,minmax(0,1fr)); gap:4px; height:110px; margin-top:20px; }
.history-hours > div { display:flex; flex-direction:column; justify-content:end; gap:6px; }
.history-hours span { display:block; background:var(--accent, #86a8ff); border-radius:3px 3px 0 0; }
.history-hours small { height:16px; font-size:10px; opacity:.7; }
.history-workspaces { display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:12px; }
.history-workspaces p { font-size:13px; overflow-wrap:anywhere; }
#codex-sessions-list > [hidden] { display:none; }

/* Agent directory and dedicated management pages. */
#agents-view.active { display: block; padding: clamp(16px, 3vw, 40px); }
#agents-view [hidden] { display: none !important; }
.agent-directory-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.agent-directory-heading h2 { margin: 5px 0 10px; font-size: clamp(25px, 3vw, 36px); }
.agent-directory-heading p { color: var(--muted); }
.agent-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.agent-directory-heading button { padding: 12px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--blue); cursor: pointer; }
#agent-list { padding: 0; }
#agent-list.agent-avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 20px; margin-bottom: 30px; }
.agent-avatar-card { display: flex; flex-direction: column; padding: 10px 10px 18px; min-width: 0; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); text-decoration: none; color: inherit; transition: transform .18s, box-shadow .18s; }
.agent-avatar-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px #1e386e18; }
.agent-avatar-card:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.agent-avatar { display: block; aspect-ratio: 1; width: 100%; border-radius: 15px; background-image: url('/static/agent-avatars/team-atlas.png'); background-size: 200% 200%; background-color: #d5e8f8; }
.avatar-browser { background-position: 0 0; }
.avatar-creator { background-position: 100% 0; }
.avatar-coder { background-position: 0 100%; }
.avatar-planner { background-position: 100% 100%; }
.agent-avatar-card strong { margin: 16px 8px 5px; font-size: 18px; overflow-wrap: anywhere; }
.agent-role { margin: 0 8px; color: var(--muted); font-size: 13px; }
.agent-tile-status { margin: 15px 8px 0; color: var(--blue); font-size: 11px; }
#agent-create-panel { border: 1px solid var(--line); border-radius: 17px; background: var(--panel); overflow: hidden; }
#agent-create-panel summary { padding: 20px; cursor: pointer; font-weight: 700; }
#agents-view #agent-create-panel .assignment-form { min-height: auto; border-right: 0; }
.agent-management-card { max-width: 950px; margin: 0 auto; }
.agent-management-card > .agent-avatar { width: 135px; margin-bottom: 22px; }
.agent-management-card .agent-card-header h3 { font-size: 25px; text-transform: none; }
.agent-management-card textarea { width: 100%; min-height: 230px; }
.agent-management-card .task-actions { flex-wrap: wrap; gap: 8px; }
@media (max-width: 480px) { #agent-list.agent-avatar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .agent-avatar-card strong { font-size: 15px; } .agent-directory-heading { align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .agent-avatar-card { transition: none; } }

/* History board shares session cards and actions with the list. */
.session-kanban { display: grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: 16px; align-items: start; overflow-x: auto; padding-bottom: 16px; }
.session-kanban[hidden], #codex-sessions-list[hidden] { display: none; }
.session-kanban-column { min-width: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 14px; }
.session-kanban-column > h3 { display: flex; justify-content: space-between; margin: 0 0 16px; font-size: 15px; }
.session-kanban-column > h3 span { color: var(--muted); }
.session-kanban-cards { display: grid; gap: 12px; }
.session-kanban .agent-card { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.session-kanban .session-latest { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.session-kanban-empty { color: var(--muted); font-size: 13px; }
.session-library-controls { display: flex; flex-wrap: wrap; align-items: start; gap: 8px; margin-top: 12px; }
.session-library-controls button[aria-pressed="true"] { color: var(--accent, #b9a0ff); border-color: currentColor; }
.session-library-controls details { flex: 1 1 150px; min-width: 0; }
.session-library-controls summary { cursor: pointer; padding: 8px; overflow-wrap: anywhere; }
.session-library-controls details label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; overflow-wrap: anywhere; }
.session-library-controls input[type="checkbox"] { width: auto; margin: 0; }