/* Task surfaces use a slightly larger type scale and stronger visual boundaries. */
.app {
  height: 100vh;
  overflow: hidden;
}

.app main {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.topbar { flex: 0 0 auto; }

.workspace {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.board {
  height: 100%;
  min-height: 0;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: 20px;
  padding-top: 26px;
  padding-right: 5px;
  overflow-x: auto;
  overflow-y: hidden;
}

.board.cron-board { display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.cron-heading { flex: none; }
.cron-heading h1 { margin: 0 0 5px; font: 800 24px/1.3 Manrope,sans-serif; }
.cron-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.cron-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,320px),1fr)); align-content: start; align-items: start; gap: 16px; min-height: 0; overflow-y: auto; padding: 2px 4px 24px 2px; }
.cron-list .task-card { min-width: 0; margin: 0; }
.cron-list .empty { grid-column: 1/-1; }
.cron-task-meta { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; color: #686572; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.cron-automation { display: flex; flex-direction: column; gap: 4px; }
.cron-automation + .cron-automation { margin-top: 6px; padding-top: 8px; border-top: 1px solid #efedf3; }
.cron-task-project { color: #634bc4; font-weight: 700; }
.cron-task-disabled { color: #9a5b0c; }
.cron-load-status { margin: 0; color: var(--muted); font-size: 12px; }
.cron-load-status button { margin-left: 8px; }
.cron-load-status[hidden] { display: none; }
.cron-heading .board-voice-composer { display: none; margin-top: 12px; }
.cron-heading .board-voice-composer:has(.voice-record[data-state="starting"],.voice-record[data-state="recording"],.voice-record[data-state="transcribing"]) { display: inline-flex; }

.column {
  display: flex;
  flex-direction: column;
  min-width: 280px;
  min-height: 0;
  max-height: 100%;
  overflow: visible;
  padding: 16px;
  border: 1px solid #e1e0e8;
  border-radius: 14px;
  background: #efeff4;
}

.column-head {
  min-height: 36px;
  padding: 0 2px 14px;
  font-size: 14px;
}

.column-head .total {
  min-width: 24px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #dfdee7;
  color: #656370;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

.column-head .add-task {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: auto;
  min-height: 32px;
  margin-left: auto;
  padding: 6px 10px;
  border: 1px solid #d3cbed;
  border-radius: 8px;
  background: #fff;
  color: #6048c8;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.column-head .add-task:hover {
  border-color: #bdb0eb;
  background: #f8f6ff;
  color: #5138bb;
}

.cards {
  flex: 1;
  min-height: 0;
  margin-right: -21.5px;
  padding-right: 11.5px;
  gap: 12px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(115, 87, 234, .58) transparent;
}

.backlog-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-height: 38px;
  color: #777183;
  font-size: 12px;
  font-weight: 700;
}

.backlog-divider::before,
.backlog-divider::after {
  content: '';
  flex: 1;
  border-top: 1px solid #ccc7d8;
}

.backlog-divider.drop-before { color: var(--purple); }
.backlog-divider.drop-before::before,
.backlog-divider.drop-before::after { border-top: 2px solid var(--purple); }
.cards > .empty[data-backlog-section] { flex: 0 0 auto; min-height: 64px; }

.backlog-section-toggle {
  display: block;
  min-height: 30px;
  margin: 9px 0 -4px auto;
  padding: 4px 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #716582;
  font-size: 11px;
}

.backlog-section-toggle:hover,
.backlog-section-toggle:focus-visible { color: #6048c8; background: #eeeaff; }
.backlog-section-toggle:disabled { opacity: .55; cursor: wait; }

.cards::-webkit-scrollbar {
  width: 6px;
}

.cards::-webkit-scrollbar-track,
.cards::-webkit-scrollbar-corner {
  background: transparent;
}

.cards::-webkit-scrollbar-thumb {
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(142, 113, 255, .88), rgba(96, 64, 216, .62));
  background-clip: padding-box;
}

.cards::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(142, 113, 255, 1), rgba(96, 64, 216, .82));
  background-clip: padding-box;
}

.workspace[data-project-accent] .cards {
  scrollbar-color: rgba(var(--project-accent-rgb), .62) transparent;
}

.workspace[data-project-accent] .cards::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(var(--project-accent-rgb), .82), rgba(var(--project-accent-rgb), .5));
  background-clip: padding-box;
}

.workspace[data-project-accent] .cards::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(var(--project-accent-rgb), .96), rgba(var(--project-accent-rgb), .7));
  background-clip: padding-box;
}

.task-card {
  padding: 17px;
  border-color: #dcdae4;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(37, 34, 53, .05);
  transition: border-color .15s, box-shadow .15s;
}

.task-card.mac-mini-task { padding-top: 14px; }

.task-card.needs-owner-answer { background: #fffcf8; }

.task-card:hover {
  transform: none;
  border-color: #c7c1de;
  box-shadow: 0 12px 30px rgba(32, 25, 64, .11);
}

.task-card h3 {
  margin-bottom: 8px;
  color: #292632;
  font: 700 15px/1.45 Manrope, sans-serif;
}

.task-card.read-only-task h3 { font-style: italic; }

.task-card h3.mac-mini-title {
  margin-bottom: 2px;
  line-height: 1.3;
}

.task-card.mac-mini-task > p { margin-top: -2px; }

.task-read-toggle {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: -2px 4px -2px -5px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  vertical-align: middle;
  transition: background .15s, opacity .15s;
}

.task-read-toggle::before {
  content: '';
  width: 8px;
  height: 8px;
  border: 0 solid #2ebd85;
  border-radius: 50%;
  background: #2ebd85;
  box-shadow: 0 0 0 3px rgba(46, 189, 133, .14);
  transition: background .15s, border-width .15s, box-shadow .15s;
}

.task-read-toggle.is-read::before {
  border-width: 2px;
  background: transparent;
  box-shadow: none;
}

.task-read-toggle:hover,
.task-read-toggle:focus-visible {
  background: rgba(46, 189, 133, .12);
}

.task-read-toggle:focus-visible {
  outline: 2px solid #168b63;
  outline-offset: 1px;
}

.task-read-toggle:disabled {
  cursor: wait;
  opacity: .55;
}

.task-card > p {
  display: -webkit-box;
  overflow: hidden;
  margin-bottom: 14px;
  color: #686572;
  font-size: 13px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.card-title { gap: 10px; }

.edit-task,
.parallel-task,
.move-task-top,
.delete-task {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 14px;
}

.move-task-top {
  width: 22px;
  border: 0;
  border-radius: 7px;
  background: #f2f0f8;
  color: #6d52dc;
  opacity: 0;
  transition: .15s;
}

.task-card:hover .move-task-top,
.move-task-top:focus {
  opacity: 1;
}

.delete-task {
  margin: 0;
  border-radius: 7px;
  font-size: 18px;
}

.delete-task:hover {
  background: #f8e9ea;
  color: #b74750;
}

.parallel-task {
  border: 0;
  border-radius: 7px;
  background: #fff4e8;
  opacity: 0;
  cursor: pointer;
  transition: opacity .15s, background .15s;
}
.task-card:hover .parallel-task,
.task-card:focus-within .parallel-task,
.parallel-task.is-enabled,
.parallel-task[aria-busy="true"] { opacity: 1; }
.parallel-task:hover,
.parallel-task.is-enabled { background: #ffe0b9; }
.parallel-task.is-enabled { box-shadow: inset 0 0 0 1px #e98a26; }
.parallel-task:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.parallel-task:disabled { cursor: not-allowed; }
.parallel-task[aria-busy="true"] { cursor: wait; }
@media (hover: none), (pointer: coarse) {
  .parallel-task { opacity: 1; width: 40px; height: 40px; }
}

.empty {
  padding: 28px 8px;
  font-size: 13px;
}

.execution-state {
  margin-top: 14px;
  padding: 10px 11px;
  font-size: 12px;
  line-height: 1.4;
}

.codex-panel { margin-top: 14px; }

.codex-summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  margin: 14px 0 0;
  padding: 9px 10px 10px;
}

.codex-summary-logo {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: linear-gradient(145deg, #8064ed, #5b3dca);
  color: #fff;
  font-size: 12px;
}

.codex-summary-copy {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: #5f5969;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.codex-summary .agent-state {
  flex: 0 0 auto;
  margin-left: 0;
  padding: 4px 7px;
  border-radius: 999px;
  background: #ebe6ff;
  color: #684bcf;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.codex-summary .agent-state.working::after { content: none; animation: none; }
.codex-summary .agent-working-ellipsis { animation: agentBlink 1s infinite; }
.codex-summary .agent-elapsed { font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; }
.codex-summary .agent-state.failed { background: #fae1e2; color: #b44049; }
.codex-summary .agent-state.queued { background: #eeeaf3; color: #746b80; }
.codex-summary .agent-state.verifying { background: #dff1fa; color: #2c7397; }
.codex-summary.waiting { border-color: #f0c36d; background: #fffaf0; box-shadow: 0 0 0 2px #fef3c7; }
.codex-summary .agent-state.waiting { background: #fef3c7; color: #a65308; }
.codex-summary.has-wait { flex-wrap: wrap; background: #fffaf0; }
.codex-summary.has-wait .agent-state { background: #fef3c7; color: #a65308; }
.codex-summary.has-wait .codex-summary-copy { order: 3; flex: 0 0 100%; white-space: normal; overflow-wrap: anywhere; }

.codex-summary .agent-state > i {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 4px;
  border-radius: 50%;
  background: currentColor;
  animation: agentPulse 1.1s infinite;
}

.task-card > p:has(+ .task-queue-wait) { margin-bottom: 7px; }

.task-queue-wait {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #81788f;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

.task-queue-wait > i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8064ed;
  animation: agentPulse 1.1s infinite;
}

.task-queue-wait .agent-working-ellipsis { animation: agentBlink 1s infinite; }

.codex-summary .agent-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}

.codex-summary .retry-codex {
  flex: 0 0 auto;
  min-height: 26px;
  margin-left: 0;
  padding: 3px 5px;
}

.retry-codex {
  min-height: 30px;
  padding: 5px 7px;
  font-size: 11px;
}

.archive-task {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 11px;
}

dialog {
  max-height: min(88vh, 900px);
  border: 1px solid #e1dfe8;
  border-radius: 18px;
  overflow: auto;
}

dialog form { padding: 32px; }

.task-detail-shell { padding: 0; }

.modal-head { align-items: flex-start; gap: 20px; }

.modal-head h2 { font-size: 24px; }

.modal-head button {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
}

.task-detail-head-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.modal-head .detail-edit-task {
  display: flex;
  width: auto;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
  border: 1px solid #dddde6;
  border-radius: 8px;
  background: #fff;
  color: #4f4e5b;
  font-size: 13px;
}

.modal-head .detail-edit-task:hover { background: #f7f5fc; }

dialog label { font-size: 13px; }

dialog input,
dialog textarea,
dialog select {
  min-height: 46px;
  padding: 12px 13px;
  font-size: 14px;
}

dialog textarea { min-height: 108px; }

.task-execution-options {
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(160px, 1.1fr);
  align-items: start;
  gap: 12px;
}

.execution-target {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.execution-target-label {
  color: #5d5b68;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.execution-target-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  padding: 3px;
  border: 1px solid #dedbe7;
  border-radius: 10px;
  background: #f1eff6;
}

dialog .execution-target-option {
  position: relative;
  display: block;
  min-width: 0;
  color: #746e7d;
  cursor: pointer;
}

dialog .execution-target-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.execution-target-choice {
  display: flex;
  min-width: 0;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 6px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.execution-target-device-icon {
  position: relative;
  display: grid;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  place-items: center;
  transition: color .15s ease, opacity .15s ease;
}

.execution-target-choice svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.execution-target-option[data-availability="offline"] .execution-target-device-icon {
  color: #aaa4b0;
  opacity: .42;
}

.execution-target-option[data-availability="offline"] .execution-target-device-icon::after {
  position: absolute;
  right: -2px;
  bottom: -1px;
  width: 6px;
  height: 6px;
  border: 2px solid #f1eff6;
  border-radius: 50%;
  background: #9f98a6;
  content: '';
}

.execution-target-option[data-availability="offline"] input:checked + .execution-target-choice .execution-target-device-icon::after {
  border-color: #fff;
}

.execution-target-option:hover .execution-target-choice { color: #554466; }

.execution-target-option input:checked + .execution-target-choice {
  border-color: #d6ccef;
  background: #fff;
  color: #6043c8;
  box-shadow: 0 2px 7px rgba(65, 45, 116, .12);
}

.execution-target-option input:focus-visible + .execution-target-choice {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

#task-computer-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

#task-computer-status[hidden] { display: none; }

textarea[data-auto-grow] {
  max-height: min(50vh, 480px);
  overflow-y: auto;
  resize: none;
}

.form-field,
.voice-composer {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.form-field { gap: 7px; }
.voice-composer textarea { width: 100%; }

.voice-actions {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.voice-record {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 11px;
  font-size: 12px;
}

.voice-icon {
  color: #d85869;
  font-size: 10px;
  line-height: 1;
}

.voice-record[data-state="recording"] {
  border-color: #e6a2aa;
  background: #fff1f3;
  color: #9b3040;
}

.voice-record[data-state="recording"] .voice-icon { animation: voice-pulse 1.1s ease-in-out infinite; }
.voice-record[data-state="starting"],
.voice-record[data-state="transcribing"] { cursor: progress; }

.voice-recording-controls {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

.voice-discard {
  display: inline-flex;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-height: 36px;
  padding: 0;
  border-color: #e6a2aa;
  color: #9b3040;
  font-size: 21px;
  line-height: 1;
}

.voice-discard:hover { border-color: #d87e8a; background: #fff1f3; }

.voice-quick-run,
.voice-quick-send {
  border-color: #c9bced;
  background: #f5f1ff;
  color: #5f47ad;
}

.voice-quick-run:hover,
.voice-quick-send:hover { border-color: #a993df; background: #eee8ff; }
.voice-quick-run .voice-icon,
.voice-quick-send .voice-icon { color: currentColor; font-size: 12px; }

.voice-status {
  flex: 1 1 160px;
  min-width: 0;
  color: #817b89;
  font-size: 11px;
  line-height: 1.35;
}

.voice-status[data-state="recording"] { color: #a43a4a; }
.voice-status[data-state="success"] { color: #277a5c; }
.voice-status[data-state="error"] { color: #c24252; }

@keyframes voice-pulse {
  50% { opacity: .35; transform: scale(.75); }
}

.task-attachments {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px dashed #cec8df;
  border-radius: 11px;
  background: #faf9fd;
}

.task-attachments.has-attachments {
  border-style: solid;
  border-color: #d9d2ee;
  background: #f8f6ff;
}

.attachment-hint {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: #625b70;
}

.task-attachments.file-drop-active {
  border-color: #7357ea;
  background: #eee8ff;
  box-shadow: 0 0 0 2px #7357ea;
}
.attachment-drop-hint { display: none; color: #583cb8; font-size: 12px; font-weight: 600; }
.file-drop-active .attachment-drop-hint { display: block; }
.file-drop-active .attachment-copy small { display: none; }

.attachment-hint > span:first-child {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #ebe6fb;
  color: #664aca;
  font-size: 17px;
}

.attachment-copy { display: grid; gap: 2px; }
.attachment-hint strong { font-size: 12px; }
.attachment-hint small { color: #888292; font-size: 11px; }
.attachment-hint button { min-height: 34px; padding: 7px 10px; font-size: 11px; white-space: nowrap; }

.task-attachment-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.task-attachment-list:empty { display: none; }

.task-attachment-preview {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid #d9d5e2;
  border-radius: 9px;
  background: #fff;
}

.task-attachment-preview img,
.task-attachment-file-preview {
  display: block;
  width: 100%;
  height: 82px;
  object-fit: cover;
  background: #eeedf2;
}

.task-attachment-file-preview {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #f0edf8, #e6e0f4);
}

.task-attachment-file-preview span,
.task-file-icon {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 38px;
  padding: 5px;
  border-radius: 7px;
  background: #fff;
  color: #674dc0;
  font: 800 10px/1 Manrope, sans-serif;
  letter-spacing: .05em;
}

.task-attachment-preview figcaption {
  display: grid;
  gap: 1px;
  padding: 7px 8px;
}

.task-attachment-preview figcaption strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-attachment-preview figcaption small { color: #8a8590; font-size: 9px; }

.task-attachment-preview button {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 1px solid #fff8;
  border-radius: 50%;
  background: #292632d9;
  color: #fff;
  font-size: 16px;
}

.task-attachment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.task-attachment-grid a {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #ddd8e7;
  border-radius: 9px;
  background: #f7f6f9;
  color: #5c5567;
  text-decoration: none;
}

.task-attachment-grid img {
  display: block;
  width: 100%;
  height: 110px;
  object-fit: cover;
  background: #eeedf2;
}

.task-image-link > span {
  display: block;
  overflow: hidden;
  padding: 7px 8px;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-image-link { cursor: zoom-in; }

.attachment-preview-modal {
  width: min(1400px, calc(100% - 32px));
  max-width: 1400px;
  height: min(92dvh, 1000px);
  max-height: 1000px;
  overflow: hidden;
  border-radius: 14px;
  background: #17151c;
  color: #fff;
}

.attachment-preview-modal[open] { display: flex; }

.attachment-preview-shell {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
}

.attachment-preview-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding: 10px 12px 10px 18px;
  border-bottom: 1px solid #ffffff1f;
}

.attachment-preview-head h2 {
  margin: 0;
  overflow: hidden;
  font: 700 14px/1.3 Manrope, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-preview-head button {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ffffff1c;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  place-items: center;
}

.attachment-preview-head button:hover { background: #ffffff2e; }

.attachment-preview-stage {
  display: grid;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 18px;
  place-items: center;
}

.attachment-preview-stage p { margin: 0; color: #c8c4cf; }

.attachment-preview-stage img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.attachment-preview-stage img[hidden] { display: none; }

.task-attachment-grid.codex-response-attachments {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  margin-top: 12px;
}

.codex-response-attachments img {
  height: auto;
  max-height: min(70vh, 720px);
  object-fit: contain;
}

.task-file-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 74px;
  padding: 10px;
}

.task-file-link .task-file-icon { flex: 0 0 auto; background: #ece7f8; }

.task-file-copy { display: grid; min-width: 0; gap: 3px; }
.task-file-copy strong,
.task-file-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-file-copy strong { color: #433b50; font-size: 11px; }
.task-file-copy small { color: #847d8d; font-size: 9px; }

.modal-actions { gap: 10px; margin-top: 8px; }

.modal-actions button { min-height: 42px; }

.secondary.danger { border-color: #e4b7ba; color: #aa3f47; }
.secondary.danger:hover { border-color: #d58d92; background: #fff7f7; }
.task-detail-actions button:disabled { cursor: not-allowed; opacity: .5; }
.mac-output-delivery { margin: 16px 0; padding: 14px; border: 1px solid #e7e3ee; border-radius: 12px; }
.mac-output-delivery p { margin: 0 0 10px; overflow-wrap: anywhere; }
.mac-output-delivery .form-error { height: auto; min-height: 16px; line-height: 1.5; }
.move-task-note { margin: -4px 0 0; color: #7d7684; font-size: 12px; line-height: 1.5; }

.task-detail-modal {
  width: min(1280px, calc(100% - 32px));
  max-width: 1280px;
  max-height: min(88dvh, 900px);
  overflow: visible;
  border: 0;
  /* The native top-layer surface must stay opaque while its scrolling child
     repaints. A transparent dialog can expose the board through that child. */
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 25px 80px rgba(20, 15, 45, .24), 0 -5px 14px rgba(20, 15, 45, .12);
}

.task-detail-modal[open] { display: flex; flex-direction: column; }

.task-detail-shell {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}

.task-detail-heading {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: calc(100% - 9px);
  left: 0;
  align-items: flex-end;
  padding: 0;
  pointer-events: none;
}

.task-detail-title-tab {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: calc(100% - 60px);
  height: 40px;
  padding: 0 18px 9px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(145deg, #777180 0%, #5f5a68 100%);
  box-shadow: 0 -6px 16px rgba(20, 15, 45, .1);
  pointer-events: auto;
}

.task-detail-heading h2 {
  overflow: hidden;
  color: #fff;
  font-family: Manrope, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-detail-heading .task-detail-head-actions {
  align-items: flex-end;
  gap: 6px;
  pointer-events: auto;
}

.task-detail-heading .close-detail,
.task-detail-heading .detail-edit-task {
  align-items: center;
  justify-content: center;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-bottom: 0;
  border-radius: 13px 13px 0 0;
  background: linear-gradient(145deg, #777180 0%, #5f5a68 100%);
  color: #fff;
  box-shadow: 0 -6px 16px rgba(20, 15, 45, .1);
}

.task-detail-heading .close-detail {
  display: grid;
  padding: 0 0 9px;
  line-height: 1;
  place-items: center;
}

.task-detail-heading .detail-edit-task { padding: 0 13px 9px; }

.task-detail-heading .close-detail:hover,
.task-detail-heading .detail-edit-task:hover { background: #827b8b; color: #fff; }

.task-detail-window {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  padding: 32px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #e1dfe8;
  border-radius: 18px;
  background: #fff;
}

/* Blurring the full board behind a long timeline forces an expensive repaint
   just as task details arrive. The opaque overlay still separates the modal. */
.task-detail-modal::backdrop { backdrop-filter: none; }

.task-log { gap: 20px; margin-top: 0; }

.log-entry p,
.codex-answer { font-size: 14px; }

.log-entry.response > div:last-child {
  border-color: #dcd5ef;
  background: #fff;
  box-shadow: 0 8px 24px rgba(53, 39, 101, .07);
}

.codex-answer {
  padding: 16px 18px;
  border: 1px solid #e2dcf3;
  border-radius: 11px;
  background: linear-gradient(145deg, #fbfaff, #f7f4ff);
  color: #30293a;
  font-size: 16px;
  line-height: 1.7;
}

.rich-text { min-width: 0; overflow-wrap: anywhere; }
.rich-text > :first-child { margin-top: 0; }
.rich-text > :last-child { margin-bottom: 0; }
.rich-text p { margin: 0 0 12px; color: inherit; font-size: inherit; line-height: inherit; }
.rich-text h2,
.rich-text h3,
.rich-text h4,
.rich-text h5,
.rich-text h6 { margin: 20px 0 8px; color: #272131; font-family: Manrope, sans-serif; line-height: 1.35; }
.rich-text h2 { font-size: 20px; }
.rich-text h3 { font-size: 18px; }
.rich-text h4,
.rich-text h5,
.rich-text h6 { font-size: 16px; }
.rich-text ul,
.rich-text ol { margin: 8px 0 14px; padding-left: 24px; }
.rich-text li { margin: 5px 0; padding-left: 2px; }
.rich-text a { color: #6042c8; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.rich-text .rich-image-link {
  display: block;
  width: 100%;
  max-width: 960px;
  margin: 12px 0;
  overflow: hidden;
  border: 1px solid #d8e7e1;
  border-radius: 10px;
  background: #f4f8f6;
  color: #47675c;
  text-decoration: none;
}
.rich-text .rich-image-link img {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: min(70vh, 720px);
  object-fit: contain;
}
.rich-text .rich-image-link > span {
  display: block;
  overflow: hidden;
  padding: 7px 9px;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rich-text code { padding: 2px 5px; border-radius: 5px; background: #ece8f4; color: #46395a; font: .86em/1.5 'DM Mono', monospace; }
.rich-text pre,
.verification-details pre {
  max-width: 100%;
  margin: 12px 0;
  padding: 14px;
  overflow: auto;
  border-radius: 9px;
  background: #292633;
  color: #e6e1ed;
  font: 11px/1.65 'DM Mono', monospace;
  white-space: pre;
}
.rich-text pre code { padding: 0; background: none; color: inherit; font: inherit; }
.rich-text blockquote { margin: 12px 0; padding: 2px 0 2px 14px; border-left: 3px solid #a693ea; color: #625871; }
.rich-text hr { margin: 18px 0; border: 0; border-top: 1px solid #ddd6eb; }
.rich-table-scroll { max-width: 100%; margin: 12px 0; overflow-x: auto; }
.rich-text table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rich-text th,
.rich-text td { padding: 8px 10px; border: 1px solid #ddd7e8; }
.rich-text th { background: #eee9f8; color: #41364f; }

.verification-details,
.timeline-error-details { width: 100%; min-width: 0; margin: 0; color: #716a79; font-size: 10px; }

.verification-details summary,
.timeline-error-details summary {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 1px 0;
  cursor: pointer;
  list-style: none;
}

.verification-details summary::-webkit-details-marker,
.timeline-error-details summary::-webkit-details-marker { display: none; }
.verification-details summary time { color: #9993a0; font-size: 9px; font-weight: 500; }
.verification-details pre,
.timeline-error-details pre { max-height: 140px; margin: 3px 0 4px 18px; padding: 8px 10px; font-size: 9px; line-height: 1.45; }
.timeline-error-details pre { overflow: auto; border-radius: 7px; background: #fff4f3; color: #714b48; white-space: pre-wrap; }

.log-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; font-size: 11px; }
.log-status i { width: 6px; height: 6px; border-radius: 50%; background: #aaa4af; }
.log-status:is(.planning,.working,.verifying,.queued) i { background: #7459e5; animation: agentPulse 1.1s infinite; }
.log-status.completed i { background: #29ad58; }
.log-status.failed i { background: #d9534f; }
.log-status.waiting i { background: #d69a27; }

.execution-log {
  display: grid;
  gap: 6px;
  margin: 4px 0 12px;
  padding: 0;
  list-style: none;
}

/* Technical rows have a fixed one-line label and timestamp. Keep their full
   DOM but defer offscreen layout, reserving the same row heights and gaps. */
.execution-log > .execution-event-group {
  content-visibility: auto;
  contain-intrinsic-block-size: auto calc(var(--event-count, 1) * 28px - 6px);
}
@media (max-width: 560px) {
  .execution-log > .execution-event-group {
    contain-intrinsic-block-size: auto calc(var(--event-count, 1) * 28px + var(--timed-event-count, 0) * 10.7px - 6px);
  }
}

.execution-log-message {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid #d4c9f7;
  border-radius: 10px;
  background: #f0ecff;
  color: #3e3157;
  font-size: 14px;
  line-height: 1.6;
  box-shadow: 0 3px 10px rgba(92, 67, 181, .08);
}

.execution-log-request {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  padding: 10px 12px;
  margin-left: clamp(24px, 8%, 96px);
  border: 1px solid #b9ddd1;
  border-radius: 10px;
  background: #f0faf6;
  color: #3f6257;
  font-size: 13px;
  line-height: 1.55;
}

.execution-log-request .execution-event-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #d8f0e7;
  color: #34715f;
  font-size: 9px;
}

.execution-log-request > div { min-width: 0; }
.execution-log-request p { margin: 0; color: inherit; font-size: inherit; }

.voice-transcript-reference {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(72, 101, 92, .16);
  color: #6f7774;
  font-size: 12px;
}
.voice-transcript-reference summary {
  width: fit-content;
  cursor: pointer;
  color: #68736f;
  font-weight: 600;
}
.voice-transcript-reference p { margin: 7px 0 0; line-height: 1.55; }

.execution-log-message .execution-event-icon { color: #684bd0; }
.execution-log-message > div { min-width: 0; }

.execution-log-message.execution-target-mac-mini {
  border-color: #b9ddf3;
  background: #eaf7ff;
  color: #244f69;
  box-shadow: 0 3px 10px rgba(43, 132, 184, .1);
}
.execution-log-message.execution-target-mac-mini .execution-message-meta { color: #4f7489; }
.execution-log-message.execution-target-mac-mini .execution-message-meta time { color: #718c9c; }
.execution-log-message.execution-target-mac-mini .execution-mac-event-icon {
  border-color: #b7dcef;
  background: #dff2ff;
  color: #2376a8;
}

.execution-log-message.execution-error {
  background: #fff4f2;
  border-left: 3px solid #c45b51;
}
.execution-log-message.execution-error .execution-message-meta strong { color: #9e3932; }
.execution-log-message.final-response {
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  margin-top: 16px;
  padding: 18px 20px 20px 17px;
  border: 1px solid #c6e1d6;
  border-left: 4px solid #4b9c7d;
  border-radius: 14px;
  background-color: #fbfefc;
  background-image: linear-gradient(115deg, rgba(226, 245, 237, .7), rgba(255, 255, 255, 0) 42%);
  color: #23493d;
  box-shadow: 0 8px 24px rgba(35, 105, 79, .09);
}
.execution-log-message.final-response .execution-event-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid #c5e6d9;
  border-radius: 10px;
  background: #e1f4ec;
  color: #247a5c;
  font-size: 16px;
  line-height: 1;
}
.execution-log-message.final-response .execution-mac-event-icon {
  width: 32px;
  height: 32px;
  border-color: #c5e6d9;
  border-radius: 10px;
  background: #e1f4ec;
  color: #247a5c;
}
.execution-log-message.final-response .execution-mac-event-icon svg { width: 18px; height: 18px; }
.execution-log-message.final-response .execution-message-meta {
  min-height: 32px;
  margin: 0;
  align-items: center;
  color: #65756f;
}
.execution-log-message.final-response .execution-message-meta strong {
  color: #245e4b;
  font: 800 12px/1.3 Manrope, sans-serif;
  letter-spacing: .01em;
}
.execution-log-message.final-response .codex-answer {
  padding: 14px 0 1px;
  border: 0;
  border-top: 1px solid #dcece5;
  border-radius: 0;
  background: none;
  color: #23493d;
  font-size: 15px;
  line-height: 1.68;
  box-shadow: none;
}
.execution-log-message.final-response .codex-answer > :is(p, ul, ol, blockquote, h2, h3, h4, h5, h6) { max-width: 82ch; }
.execution-log-message.final-response .rich-text :is(h2, h3, h4, h5, h6) { color: #193e32; }
.execution-log-message.final-response .rich-text a { color: #286d55; }
.execution-log-message.final-response .rich-text blockquote { color: #3d6255; }
.execution-log-message.final-response .rich-text th { color: #23493d; }
.execution-log-message.final-response .rich-text li::marker { color: #398568; }
.execution-log-message.final-response .rich-text code { background: #edf4f1; color: #315849; }
.execution-log-message.final-response .rich-text pre code { background: none; color: inherit; }

.execution-log-message.final-response.execution-target-mac-mini {
  border-color: #b9ddef;
  border-left-color: #3a94c5;
  background-color: #f4fbff;
  background-image: linear-gradient(115deg, rgba(216, 241, 255, .82), rgba(255, 255, 255, 0) 42%);
  color: #244f69;
  box-shadow: 0 8px 24px rgba(43, 132, 184, .1);
}
.execution-log-message.final-response.execution-target-mac-mini .execution-mac-event-icon {
  border-color: #b7dcef;
  background: #dff2ff;
  color: #2376a8;
}
.execution-log-message.final-response.execution-target-mac-mini .execution-message-meta { color: #668596; }
.execution-log-message.final-response.execution-target-mac-mini .execution-message-meta strong { color: #286f98; }
.execution-log-message.final-response.execution-target-mac-mini .codex-answer {
  border-top-color: #d6ebf6;
  color: #244f69;
}
.execution-log-message.final-response.execution-target-mac-mini .rich-text :is(h2, h3, h4, h5, h6) { color: #183f57; }
.execution-log-message.final-response.execution-target-mac-mini .rich-text a { color: #1f709e; }
.execution-log-message.final-response.execution-target-mac-mini .rich-text blockquote { color: #3d657b; }
.execution-log-message.final-response.execution-target-mac-mini .rich-text th { color: #234f68; }
.execution-log-message.final-response.execution-target-mac-mini .rich-text li::marker { color: #3b8db9; }
.execution-log-message.final-response.execution-target-mac-mini .rich-text code { background: #e8f4fa; color: #315b72; }
.execution-log-message.final-response.execution-target-mac-mini .rich-text pre code { background: none; color: inherit; }

.execution-message-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
  color: #685b7b;
  font-size: 10px;
}

.execution-message-meta time { color: #978fa1; font-weight: 500; }
.execution-message-timing { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; max-width: 100%; gap: 3px 8px; }
.execution-message-timing > * { white-space: nowrap; }

.execution-event {
  contain: layout style;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 1px 4px;
  border-bottom: 1px solid #efedf2;
  color: #797380;
  font-size: 10px;
  line-height: 1.2;
}

.execution-event-icon {
  color: #958ba4;
  font-weight: 800;
  text-align: center;
}

.execution-actor-icon {
  position: relative;
  display: grid;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  place-items: center;
  justify-self: center;
  border: 1px solid #d8d0ed;
  border-radius: 6px;
  background: #f1edfb;
  color: #6549c8;
}

.execution-server-event-icon { color: #6549c8; font-size: 12px; line-height: 1; }

.execution-mac-event-icon {
  border-color: #b7dcef;
  background: #dff2ff;
  color: #2376a8;
}

.execution-mac-event-icon svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.execution-status-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  justify-self: center;
  border-radius: 50%;
  background: #aaa7ae;
}

.status-working .execution-status-dot { background: #7459e5; box-shadow: 0 0 0 3px rgba(116,89,229,.1); animation: agentPulse 1.1s infinite; }
.status-success .execution-status-dot { background: #2bb34a; }
.status-error .execution-status-dot { background: #db4f49; }
.status-neutral .execution-status-dot { background: #aaaeb2; }
.execution-event.mac-execution-status .execution-status-dot {
  box-shadow: 0 0 0 1px #fff, 0 0 0 4px rgba(85, 189, 234, .42);
}

.execution-event .execution-event-copy {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.execution-event-copy strong { margin-right: 7px; color: #29242e; font-weight: 800; }
.execution-event-copy span { color: #9b97a0; font-weight: 500; }
.execution-event-group {
  contain: layout style paint;
  display: block;
  min-width: 0;
  padding: 0;
}
.execution-event-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 22px;
  margin-bottom: 6px;
  padding: 1px 4px;
  border-bottom: 1px solid #efedf2;
  color: #797380;
  font-size: 10px;
  line-height: 1.2;
}
.execution-event-row:last-child { margin-bottom: 0; }
.execution-event-row::before {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  margin: 0 2.5px;
  border-radius: 50%;
  background: #aaa7ae;
  content: '';
}
.execution-event-row.mac-execution-status::before { margin-inline: 5.5px; }
.execution-event-row.status-working::before { background: #7459e5; box-shadow: 0 0 0 3px rgba(116,89,229,.1); }
.execution-event-row.status-success::before { background: #2bb34a; }
.execution-event-row.status-error::before { background: #db4f49; }
.execution-event-row.mac-execution-status::before { box-shadow: 0 0 0 1px #fff, 0 0 0 4px rgba(85, 189, 234, .42); }
.execution-event-row .execution-event-copy {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: #9b97a0;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.execution-event-row.command { color: #716b78; font-family: 'DM Mono', monospace; }
.execution-event-row.result { color: #4f7768; }
.execution-event-row.error { color: #98514d; }
.execution-event-row .execution-event-meta { color: #a19aa7; font: 9px/1.3 Manrope, sans-serif; text-align: right; white-space: nowrap; }
.status-error .execution-event-copy strong { color: #a63f3b; }
.status-working .execution-event-copy strong { color: #5740b8; }

.execution-event.command {
  color: #716b78;
  font-family: 'DM Mono', monospace;
}

.execution-event.result { color: #4f7768; }
.execution-event.error { color: #98514d; }
.execution-event > details { grid-column: 1 / -1; }
.execution-event time { color: #a19aa7; font: 9px/1.3 Manrope, sans-serif; white-space: nowrap; }

.execution-pending { color: #766e80; font-size: 12px !important; font-style: italic; }
.execution-pending time { float: right; color: #9c95a2; font-size: 10px; font-style: normal; }

.codex-outcome { margin-top: 12px; }
.codex-outcome > header { margin: 0 2px 7px; color: #574a69; font-size: 11px; }
.codex-outcome > header time { color: #958d9d; font-size: 10px; font-weight: 500; }

.task-execution-overview {
  margin: 18px 0 10px 54px;
  overflow: hidden;
  border: 1px solid #d9d1e9;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(61, 43, 108, .06);
}

.task-phase-timers { padding: 18px; background: linear-gradient(135deg, #faf8ff 0%, #f4effc 100%); }
.task-workspace-usage { padding: 16px 18px; border-top: 1px solid #eee9f3; }
.task-workspace-usage > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.task-workspace-usage h3 { margin: 0 0 5px; color: #756b80; font-size: 12px; }
.workspace-size-value { color: #3b3048; font-size: 18px; font-variant-numeric: tabular-nums; }
.task-workspace-usage p { margin: 6px 0 0; color: #756b80; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.task-workspace-usage .workspace-size-feedback { color: #6749d8; }
.task-workspace-usage .workspace-size-feedback:empty { display: none; }
.task-workspace-usage details { margin-top: 10px; font-size: 11px; color: #756b80; }
.task-workspace-usage summary { cursor: pointer; }
.task-workspace-usage ul { margin: 8px 0 0; padding: 0; list-style: none; }
.task-workspace-usage li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 5px 0; border-top: 1px solid #eee9f3; font-variant-numeric: tabular-nums; }
.task-phase-timers > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.current-stage { display: flex; align-items: center; min-width: 0; gap: 10px; }
.current-stage > span:last-child { display: grid; min-width: 0; gap: 2px; }
.current-stage small,
.execution-clock > span { color: #8d8498; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.current-stage strong { overflow: hidden; color: #3d3349; font-size: 15px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.stage-status-dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: #aaa4b2; box-shadow: 0 0 0 4px rgba(145,136,155,.12); }
.stage-status-dot.live { background: #7459e5; box-shadow: 0 0 0 4px rgba(116,89,229,.13); animation: agentPulse 1.1s infinite; }
.stage-status-dot.complete { background: #2daf7e; box-shadow: 0 0 0 4px rgba(45,175,126,.13); }
.stage-status-dot.failed { background: #d85b60; box-shadow: 0 0 0 4px rgba(216,91,96,.12); }
.execution-clock { display: grid; grid-template-columns: auto auto; justify-content: end; align-items: center; gap: 2px 9px; text-align: right; }
.execution-clock > span { grid-column: 1 / -1; }
.execution-clock > strong { color: #3b3048; font: 800 17px/1.2 'DM Mono', monospace; font-variant-numeric: tabular-nums; }
.execution-clock > em { padding: 3px 7px; border-radius: 999px; background: #ebe7f1; color: #756c7f; font-size: 8px; font-style: normal; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.execution-clock > em.live { background: #e9e3ff; color: #6749d8; }
.execution-clock > em.complete { background: #e3f6ef; color: #24835f; }
.execution-clock > em.failed { background: #fae8e9; color: #ae454b; }
.current-action { margin: 9px 0 15px; color: #756b80; font-size: 11px; line-height: 1.45; }
.task-phase-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.phase-timer { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 8px; min-width: 0; padding: 10px 11px; border: 1px solid transparent; border-radius: 10px; background: rgba(255,255,255,.72); }
.phase-heading { display: flex; align-items: center; min-width: 0; gap: 6px; }
.phase-heading i { display: grid; place-items: center; width: 16px; height: 16px; flex: 0 0 auto; border-radius: 50%; background: #ece8f1; color: #958c9f; font-size: 8px; font-style: normal; font-weight: 800; }
.phase-timer small { overflow: hidden; color: #81778c; font-size: 9px; font-weight: 800; letter-spacing: .035em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.phase-timer strong { grid-column: 1 / -1; color: #453a52; font: 800 13px/1.2 'DM Mono', monospace; font-variant-numeric: tabular-nums; }
.phase-timer em { color: #9a929f; font-size: 8px; font-style: normal; font-weight: 700; }
.phase-timer.done .phase-heading i { background: #ddf3eb; color: #25825f; }
.phase-timer.active { border-color: #a58be4; background: #f0eaff; box-shadow: 0 4px 12px rgba(91,61,168,.08); }
.phase-timer.active .phase-heading i { background: #7357da; color: #fff; }
.phase-timer.waiting { border-color: #f0c36d; background: #fffaf0; }
.phase-timer.active strong,
.phase-timer.active em { color: #6446c8; }
.phase-timer.pending strong { color: #9b94a1; }

.task-run-stats { padding: 16px 18px 17px; border-top: 1px solid #e4deec; background: #fff; }
.task-run-stats > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.task-run-stats > header > div:first-child { display: grid; gap: 2px; color: #544c60; font-size: 12px; }
.task-run-stats > header > div:first-child span { color: #918a98; font-size: 9px; font-weight: 600; }
.run-configuration { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.run-configuration span { max-width: 240px; overflow: hidden; padding: 4px 7px; border-radius: 6px; background: #f1eef6; color: #655c71; font: 700 9px/1.2 Manrope, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.task-run-stats dl { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: 14px 0 0; }
.task-run-stats dl div { min-width: 0; }
.task-run-stats dt { margin-bottom: 4px; color: #938c9a; font-size: 8px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.task-run-stats dd { margin: 0; overflow-wrap: anywhere; color: #47404f; font: 800 11px/1.35 'DM Mono', monospace; font-variant-numeric: tabular-nums; }
.task-run-stats dd.pending-value { color: #7459c8; font-family: Manrope, sans-serif; }
.usage-availability { margin: 11px 0 0; color: #918a98; font-size: 9px; line-height: 1.4; }

.task-card button:focus-visible,
.column button:focus-visible,
dialog button:focus-visible,
dialog input:focus-visible,
dialog textarea:focus-visible,
dialog select:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .board { grid-template-columns: repeat(3, 290px); }
}

@media (max-width: 680px) {
  .move-task-top { opacity: 1; }
  .parallel-task { opacity: 1; }

  .task-execution-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .execution-target {
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px 12px;
  }

}

/* Candidate-preview fallback for capture controllers that open an unrelated dialog. */
body[data-task-preview-surface="board"] .move-task-top { opacity: 1; }
body[data-task-preview-surface="board"] #settings-modal[open] {
  inset: 0;
  width: 1px;
  min-width: 1px;
  max-width: 1px;
  height: 1px;
  min-height: 1px;
  max-height: 1px;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  box-shadow: none;
  opacity: 0;
}
body[data-task-preview-surface="board"] #settings-modal::backdrop {
  background: transparent;
  backdrop-filter: none;
}

@media (max-width: 560px) {

  .task-detail-modal { width: calc(100% - 20px); }

  .attachment-preview-modal { width: calc(100% - 16px); height: calc(100dvh - 16px); }

  .attachment-preview-stage { padding: 8px; }

  dialog form,
  .task-detail-window { padding: 22px; }

  .task-detail-heading { right: 0; bottom: calc(100% - 8px); left: 0; }

  .task-detail-title-tab { max-width: calc(100% - 52px); height: 38px; padding: 0 12px 8px; }

  .task-detail-heading h2 { font-size: 15px; }

  .task-detail-heading .close-detail,
  .task-detail-heading .detail-edit-task { height: 38px; }

  .task-detail-heading .close-detail { padding-bottom: 8px; }

  .task-detail-heading .detail-edit-task { padding-bottom: 8px; }

  .task-create-actions { flex-wrap: wrap; }

  .task-create-actions button { flex: 1 1 120px; }

  .task-attachment-list,
  .task-attachment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .task-execution-overview { margin-left: 0; }
  .execution-log-message.final-response {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 9px;
    padding: 14px 14px 16px 11px;
    border-left-width: 3px;
  }
  .execution-log-message.final-response .execution-event-icon { width: 28px; height: 28px; border-radius: 9px; font-size: 14px; }
  .execution-log-message.final-response .execution-mac-event-icon { width: 28px; height: 28px; border-radius: 9px; }
  .execution-log-message.final-response .execution-message-meta { min-height: 28px; }
  .execution-log-message.final-response .codex-answer { padding-top: 12px; font-size: 14px; }
  .task-phase-timers > header { align-items: flex-start; }
  .current-stage strong { white-space: normal; }
  .execution-clock { flex: 0 0 auto; }
  .task-run-stats dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-phase-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-run-stats > header { align-items: flex-start; flex-direction: column; }
  .run-configuration { justify-content: flex-start; }
}

/* One chronological timeline, with quiet technical events between readable messages. */
.execution-log > .execution-event { min-width: 0; }
.execution-log > .execution-event.mac-execution-status { grid-template-columns: 18px minmax(0,1fr) auto; }
.execution-event.mac-execution-status :is(.verification-details,.timeline-error-details) summary { grid-template-columns: 18px minmax(0,1fr) auto; }
.execution-log .execution-event .execution-event-copy { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.execution-event-meta { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; text-align: right; white-space: nowrap; }
.event-duration { color: #706879; font: 10px/1.4 Manrope, sans-serif; }
.execution-message-meta { flex-wrap: wrap; align-items: baseline; }
.execution-message-meta strong { margin-right: auto; }
.execution-log .verification { display: block; }
.execution-log .verification-details { margin: 0; }
.execution-log .codex-outcome { margin: 0; padding: 0; border: 0; background: transparent; }
@media(max-width:560px) {
  .execution-log-request { margin-left: 14px; }
  .execution-log > .execution-event { grid-template-columns: 12px minmax(0,1fr); }
  .execution-log > .execution-event.mac-execution-status { grid-template-columns: 18px minmax(0,1fr); }
  .execution-event > .execution-event-meta { grid-column: 2; justify-content: flex-start; text-align: left; }
  .execution-event-row { flex-wrap: wrap; }
  .execution-event-row > .execution-event-copy { flex: 0 1 calc(100% - 18px); }
  .execution-event-row.mac-execution-status > .execution-event-copy { flex-basis: calc(100% - 24px); }
  .execution-event-row > .execution-event-meta { flex: 0 0 calc(100% - 18px); margin-left: 18px; text-align: left; }
  .execution-event-row.mac-execution-status > .execution-event-meta { flex-basis: calc(100% - 24px); margin-left: 24px; }
  .verification-details summary,
  .timeline-error-details summary { grid-template-columns: 12px minmax(0,1fr); }
  .execution-event.mac-execution-status :is(.verification-details,.timeline-error-details) summary { grid-template-columns: 18px minmax(0,1fr); }
  .verification-details summary .execution-event-meta,
  .timeline-error-details summary .execution-event-meta { grid-column: 2; justify-content: flex-start; text-align: left; }
}
.execution-log { grid-template-columns: minmax(0, 1fr); }
.execution-log > li { min-width: 0; }
.execution-log .verification-details > summary { overflow-wrap: anywhere; }
.execution-log-message { position: relative; }
.execution-log-message::before {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: transparent;
  content: '';
  pointer-events: none;
}
.execution-log-message.final-response::before { left: 5px; }
.execution-log-message.is-unread::before { background: #a8ddc9; }
.execution-log-message { scroll-margin-block-start: 16px; }

.task-dependencies{margin:12px 0;padding:12px;border:1px solid var(--border,#ddd);border-radius:10px}.task-dependencies summary{cursor:pointer;font-weight:600}.task-dependencies p,.task-dependencies small{color:var(--muted,#777);font-size:13px}.task-dependencies ul{list-style:none;padding:0}.task-dependencies li{display:flex;align-items:center;gap:12px;margin:8px 0}.task-dependencies li>div{flex:1;min-width:0;overflow-wrap:anywhere}.task-dependencies small{display:block}.dependency-form{display:flex;gap:8px;align-items:end;flex-wrap:wrap}.dependency-form label{flex:1;min-width:160px}.dependency-form input{width:100%;box-sizing:border-box}.dependency-feedback:empty{display:none}

/* Inline card recorder beside Add task. */
.board-voice-composer { position: relative; display: inline-flex; flex: 0 0 auto; }
.column-head .board-voice-record { margin-left: 0; font-size: 12px; border: 1px solid #d3cbed; width: 32px; min-height: 32px; padding: 6px; border-color: #d3cbed; background: #fff; color: #6048c8; border-radius: 8px; }
.board-voice-record .voice-icon { width: 10px; height: 10px; border-radius: 50%; background: #7357ea; }
.board-voice-record .voice-label,
.board-voice-composer .voice-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.board-voice-record[data-state="recording"] { width: auto; background: #fff1f3; border-color: #e6a2aa; color: #9b3040; }
.board-voice-record[data-state="recording"] .voice-icon { border-radius: 2px; background: #dc3545; }
.board-voice-record[data-state="recording"] .voice-label { position: static; width: auto; height: auto; clip-path: none; font-size: 11px; }
.board-voice-record[data-state="starting"] .voice-icon,
.board-voice-record[data-state="transcribing"] .voice-icon { animation: voice-pulse 1.1s ease-in-out infinite; }
.board-voice-composer .voice-discard { flex-basis: 24px; width: 24px; min-height: 32px; font-size: 18px; }
.board-voice-composer .voice-status[data-state="error"] { top: 100%; right: 0; z-index: 2; width: 220px; height: auto; padding: 8px; border: 1px solid #e6a2aa; border-radius: 8px; background: #fff1f3; clip-path: none; white-space: normal; }
@media (prefers-reduced-motion: reduce) { .board-voice-record .voice-icon { animation: none !important; } }

@media (max-width: 700px) {
  .column-head:has(.board-voice-record[data-state="recording"]) .add-task { width: 32px; padding: 6px; gap: 0; font-size: 0; }
  .column-head:has(.board-voice-record[data-state="recording"]) .add-task span { font-size: 18px; }
}

.column-head:has(.board-task-actions) { flex-wrap: wrap; }
.board-task-actions { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.column-head .board-task-actions .add-task { margin-left: 0; }

/* Stage times describe measured intervals, not a guessed completion percentage. */
.task-stage-strip { margin: 0 0 20px; border: 1px solid #d9d1e9; border-radius: 12px; }
.task-stage-strip .task-phase-track { grid-template-columns: repeat(auto-fit,minmax(112px,1fr)); gap: 2px; border-radius: 9px; overflow: hidden; }
.task-stage-strip .phase-timer { grid-template-columns: minmax(0,1fr); align-content: start; border-radius: 0; border-top: 3px solid #d4ccdf; }
.task-stage-strip .phase-heading small { min-width: 0; white-space: normal; overflow: visible; overflow-wrap: anywhere; text-overflow: clip; }
.task-stage-strip .phase-timer.done { border-top-color: #278466; }
.task-stage-strip .phase-timer.active { border-top-color: #7357da; }
.task-stage-strip .phase-timer.failed,.task-stage-strip .phase-timer.stopped { border-top-color: #b74b59; background: #fff0f1; }
.phase-breakdown { grid-column: 1/-1; font-size: 10px; color: #51455e; }
.phase-breakdown summary { cursor: pointer; padding: 5px 0; }
.phase-breakdown dl { margin: 7px 0; }
.phase-breakdown dl>div { margin: 6px 0; }
.phase-breakdown dt { overflow-wrap: anywhere; }
.phase-breakdown dd { margin: 2px 0 0; font-variant-numeric: tabular-nums; font-weight: 700; }
.phase-breakdown p,.phase-measurement-note { font-size: 10px; line-height: 1.5; color: #756b80; }
.phase-measurement-note { margin: 10px 0 0; }
.card-phase-strip { display: grid; grid-template-columns: repeat(auto-fit,minmax(64px,1fr)); gap: 2px; margin-top: 10px; border-radius: 5px; overflow: hidden; }
.card-phase { min-width: 0; flex: 1; display: grid; gap: 4px; padding: 6px 2px; text-align: center; border-top: 3px solid #d4ccdf; background: #f6f3fa; }
.card-phase small { font-size: 8px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #655b70; }
.card-phase strong { font-size: 9px; font-variant-numeric: tabular-nums; color: #453a52; white-space: nowrap; }
.card-phase.done { border-top-color: #278466; }
.card-phase.active { border-top-color: #7357da; background: #ebe4ff; }
.card-phase.failed,.card-phase.stopped { border-top-color: #b74b59; background: #fff0f1; }
@media(max-width:600px) { .task-stage-strip { padding: 12px; } .task-stage-strip .task-phase-track { grid-template-columns: repeat(2,minmax(0,1fr)); } .task-stage-strip .phase-timer { padding: 9px 7px; } }

/* Usage has an explicit scope and never borrows the live duration clock. */
.phase-token-summary { margin: 10px 0; padding: 10px; border-radius: 8px; background: #f4f1fa; color: #51455e; min-width: 0; }
.phase-token-total,.phase-token-parts { display: flex; flex-wrap: wrap; gap: 5px 12px; justify-content: space-between; }
.phase-token-total { font-size: 12px; }
.phase-token-total strong,.phase-token-parts b { font-variant-numeric: tabular-nums; }
.phase-token-parts { justify-content: flex-start; font-size: 10px; margin: 5px 0; }
.phase-token-summary small { display: block; font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
.phase-token-note { margin-top: 6px; }
.phase-token-summary.compact { padding: 6px; margin: 4px 0 0; }
.compact .phase-token-total,.compact .phase-token-summary small { font-size: 9px; }
.stage-token-count { display: block; font-size: 10px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stage-token-parts { display: block; font-size: 9px; line-height: 1.5; overflow-wrap: anywhere; }
.card-phase .stage-token-count { font-size: 8px; }