/* Task detail — main column + right meta column, per design/core/Core.dc.html. */

.page-actions-group {
  display: flex;
  gap: 8px;
}

.task-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
  align-items: start;
}
@media (max-width: 900px) {
  .task-detail { grid-template-columns: minmax(0, 1fr); }
}

.task-detail-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 6px;
}
.task-detail-head .page-heading { margin-bottom: 0; }

.task-detail-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.task-detail-id {
  font-size: var(--text-sm);
  color: var(--text-faint);
  letter-spacing: 0.02em;
}

.task-deadline { font-size: var(--text-lg); color: var(--text-secondary); }
.task-deadline--overdue { color: var(--danger); font-weight: 600; }

.task-section {
  padding: 18px 0;
  border-top: 1px solid var(--border);
}

.task-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.task-section-title {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 12px;
}
.task-section-head .task-section-title { margin-bottom: 0; }

.task-section-empty {
  font-size: var(--text-base);
  color: var(--text-faint);
  margin: 0 0 10px;
}

.task-description {
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--text-secondary);
}
.task-description p { margin: 0 0 10px; }

/* Checklist ---------------------------------------------------------------- */

.checklist-progress {
  display: flex;
  align-items: center;
  gap: 9px;
}
.checklist-progress-bar {
  width: 90px;
  height: 5px;
  border-radius: 3px;
  background: var(--border-mid);
  overflow: hidden;
}
.checklist-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
}
.checklist-progress-count {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.checklist-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius);
}
.checklist-item:hover { background: var(--surface); }

.checklist-toggle {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 1;
  min-width: 0;
}
.checklist-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.checklist-item-title {
  font-size: var(--text-lg);
  color: var(--text);
  cursor: pointer;
}
.checklist-item--done .checklist-item-title {
  color: var(--text-faint);
  text-decoration: line-through;
}

.checklist-item-delete {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: var(--text-xl);
  line-height: 1;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  visibility: hidden;
}
.checklist-item:hover .checklist-item-delete { visibility: visible; }
.checklist-item-delete:hover { color: var(--danger); background: var(--surface-hover); }

.checklist-add {
  display: flex;
  gap: 8px;
}
.checklist-add .input { flex: 1; width: auto; }

/* Attachments ---------------------------------------------------------------- */

.attachment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.attachment-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.attachment-card:hover { border-color: var(--border-strong); }

.attachment-thumb {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  background: var(--surface-chip);
}

.attachment-tag {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  background: var(--accent-tint);
  color: var(--accent);
}

.attachment-info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.attachment-name {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.attachment-name:hover { color: var(--accent); }
.attachment-size {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-dim);
}

.attachment-delete {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: var(--text-xl);
  line-height: 1;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.attachment-delete:hover { color: var(--danger); background: var(--surface-hover); }

.attachment-upload {
  display: flex;
  gap: 8px;
  align-items: center;
}
.attachment-upload .input { flex: 1; width: auto; }

/* Meta column ---------------------------------------------------------------- */

.task-meta {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  padding: 18px;
}

.task-meta-title {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin: 0 0 7px;
}

.task-meta-none {
  font-size: var(--text-base);
  color: var(--text-faint);
}

.task-meta-hint {
  font-size: var(--text-xs);
  color: var(--text-faint);
  margin: 7px 0 0;
}

/* Audit 2026-07-17 (#7/#8/#9): raised-from, delegation tree, worked-by blocks. */
.task-raised-from { display: flex; flex-direction: column; margin-bottom: 6px; }
.task-raised-from:last-child { margin-bottom: 0; }
.task-raised-from-client { font-size: var(--text-xs); color: var(--text-dim); }

.task-delegation-flags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.task-delegation-label {
  display: block;
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-dim);
  margin: 6px 0 3px;
}
.task-delegation-row { margin-bottom: 4px; }
.task-delegation-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.task-delegation-child:last-child { margin-bottom: 0; }

.task-worked-by { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

/* Chat (U10) ------------------------------------------------------------------ */
/* Bubbles per design/core/Core.dc.html: other party left on chip surface,
   own messages right on accent — .chat-bubble-row--own is added client-side. */

.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 420px;
  overflow-y: auto;
  padding: 4px 2px;
  margin-bottom: 12px;
}

.chat-bubble-row { display: flex; }
.chat-bubble-row--own { justify-content: flex-end; }

.chat-bubble {
  max-width: 76%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chat-bubble-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 4px;
}
.chat-bubble-row--own .chat-bubble-meta { justify-content: flex-end; }

.chat-bubble-author {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
}

.chat-bubble-time {
  font-size: var(--text-2xs);
  color: var(--text-faint);
}

.chat-bubble-body {
  padding: 9px 12px;
  font-size: var(--text-lg);
  line-height: 1.45;
  background: var(--surface-chip);
  color: var(--text);
  border-radius: 12px 12px 12px 3px;
}
.chat-bubble-body p { margin: 0; }
.chat-bubble-body p + p { margin-top: 6px; }
.chat-bubble-row--own .chat-bubble-body {
  background: var(--accent);
  color: var(--accent-contrast);
  border-radius: 12px 12px 3px 12px;
}

.chat-bubble-image { display: block; max-width: 240px; }
.chat-bubble-image .attachment-thumb { border-radius: var(--radius-md); }

.chat-bubble-file {
  display: inline-block;
  padding: 8px 12px;
  font-size: var(--text-base);
  background: var(--surface-chip);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  color: var(--text);
}

.chat-composer-row {
  display: flex;
  gap: 9px;
  align-items: flex-end;
}
.chat-composer-input { flex: 1; resize: vertical; }

/* Attach button sits under the input row; native file input is hidden. The
   row keeps the clear button (#86) beside the attach label. */
.chat-composer-attach-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.chat-composer-clear {
  margin-top: 8px;
  padding: 5px 10px;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
}
.chat-composer-clear:hover { border-color: var(--border-strong); color: var(--text); }
.chat-composer-attach {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 5px 10px;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  max-width: 100%;
}
.chat-composer-attach:hover { border-color: var(--border-strong); color: var(--text); }
.chat-composer-attach svg { flex-shrink: 0; }
.chat-composer-attach-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-composer-files {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  border: 0;
}

/* Internal notes — admin-only, visually distinct (amber "internal" accent). */
.task-notes { border-left: 2px solid rgba(251, 191, 36, 0.5); padding-left: 14px; }
.notes-internal-badge {
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.3);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
}
.notes-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.note {
  background: var(--surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.note-meta { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.note-author { font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); }
.note-time { font-size: var(--text-xs); color: var(--text-muted); }
.note-body { font-size: var(--text-md); color: var(--text); }
/* INTERNAL model attribution — a subtle chip, never client-facing. */
.notes-models { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.notes-models-label { font-size: var(--text-xs); color: var(--text-muted); }
.model-chip {
  font-size: var(--text-2xs); color: var(--text-secondary);
  background: var(--surface-chip); border: 1px solid var(--border-mid);
  border-radius: 6px; padding: 1px 6px;
}
.notes-form { display: flex; gap: 9px; align-items: flex-end; }
/* #191: the escalation answer surface (agent_prompts/_prompt.html.erb) renders
   on TWO pages — the control tower lane row AND the v2 dashboard's Needs You
   panel. These three rules lived only in the control tower's page-scoped
   <style> block, so the v2 dashboard got the form unstyled. They live here for
   the same reason .lane-answer-input below already does: this stylesheet is in
   the one global cascade (application_helper.rb STYLESHEETS), so both render
   surfaces load it. */
.lane-prompt { margin-top: 10px; padding: 10px; border-radius: 8px; background: var(--surface-raised); border: 1px solid var(--border-strong); color: var(--text); }
.lane-prompt-options { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.lane-answer { display: flex; gap: 6px; }

/* 2026-07-26: the .task-prompts rules are gone — that widget was removed from
   the task page by Ali's "one channel" decision (agent_prompt.rb:49-55) and the
   class has zero occurrences in any .erb/.rb/.js. .lane-answer-input STAYS: the
   control tower still renders it, and now so does the Needs You panel. */
.lane-answer-input {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 2.6em;
  flex: 1 1 auto; min-width: 0; /* also flexes cleanly in the control tower row */
  padding: 8px 10px; font: inherit; line-height: 1.5;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
}
.lane-answer-input:focus { outline: 2px solid #e0a800; outline-offset: 1px; }
.prompts-pending-badge {
  font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: #fff;
  background: #d1242f; border-radius: var(--radius-xs); padding: 2px 8px;
}
.prompts-hint {
  font-size: var(--text-sm); color: var(--text-muted); margin: 0 0 12px;
  font-style: italic;
}
.notes-pending-warning {
  font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: #fff;
  background: #d1242f; border-radius: var(--radius-xs); padding: 2px 8px;
}
.lane-prompt-task { font-size: var(--text-xs); color: var(--text-muted); margin-left: 6px; }
.lane-prompt-task a { color: inherit; }

/* ── Second Opinion (2026-07-21) ─────────────────────────────────────────────
   The 🧠 state badge (shared by detail header, sidebar block and board card),
   the model-authored note skins, and the fusion note's tinted section headings.
   Amber while pending/thinking (matches the prompts language), green when the
   fused answer is ready, red on failure. */
.opinion-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  border-radius: var(--radius-xs); padding: 2px 8px; width: fit-content;
  color: #92610e; background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.4);
}
.opinion-badge--running { animation: opinion-pulse 1.6s ease-in-out infinite; }
@keyframes opinion-pulse { 50% { opacity: 0.55; } }
.opinion-badge--ready { color: #1a7f37; background: rgba(46, 160, 67, 0.1); border-color: rgba(46, 160, 67, 0.4); }
.opinion-badge--failed { color: #d1242f; background: rgba(209, 36, 47, 0.08); border-color: rgba(209, 36, 47, 0.35); }
.opinion-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

/* Task #138: the internal-only "Manual" badge (detail header + board card) — a
   task/bug recording work done outside the fleet. Neutral slate, distinct from
   the amber second-opinion badge, so it reads as a quiet label not a live state. */
.manual-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  border-radius: var(--radius-xs); padding: 2px 8px; width: fit-content;
  color: #57606a; background: rgba(87, 96, 106, 0.1); border: 1px solid rgba(87, 96, 106, 0.35);
}

/* Model-authored notes: a tinted left edge tells them apart from human notes
   at a glance — blue for a single model's opinion, violet for the fusion. */
.note--opinion { border-left: 3px solid #316dca; }
.note--fusion { border-left: 3px solid #8250df; background: var(--surface-raised, var(--surface)); }
.note-kind-badge {
  font-size: var(--text-2xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-caps); border-radius: var(--radius-xs); padding: 1px 7px;
}
.note-kind-badge--opinion { color: #316dca; background: rgba(49, 109, 202, 0.1); border: 1px solid rgba(49, 109, 202, 0.3); }
.note-kind-badge--fusion { color: #8250df; background: rgba(130, 80, 223, 0.1); border: 1px solid rgba(130, 80, 223, 0.3); }

/* Raw opinions collapse — the fusion is the read; the originals are receipts. */
.note-collapse summary {
  cursor: pointer; font-size: var(--text-sm); color: var(--text-secondary);
  padding: 2px 0; user-select: none;
}
.note-collapse[open] summary { margin-bottom: 6px; }

/* The fusion note's section headings: Consensus green, Divergence amber (the
   gold — where the human decision lives), Discarded muted. */
.note-section-title {
  font-size: var(--text-sm); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-caps); margin: 12px 0 4px;
  padding-bottom: 3px; border-bottom: 1px solid var(--border-mid);
}
.note-body .note-section-title:first-child { margin-top: 2px; }
.note-section-title--consensus { color: #1a7f37; border-color: rgba(46, 160, 67, 0.4); }
.note-section-title--divergence { color: #92610e; border-color: rgba(251, 191, 36, 0.5); }
.note-section-title--discarded { color: var(--text-muted); }

/* The create-form opt-in checkbox row. */
.second-opinion-field { margin-top: 2px; }
.second-opinion-check { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.second-opinion-check-label { font-weight: 600; }

/* Task #138: the create/edit-form manual opt-in block — mirrors the second-
   opinion field. Column layout so the "done outside Core" checkbox, its hint,
   and the create-only "already done" + backdate fields stack with breathing room. */
.manual-field { margin-top: 2px; display: flex; flex-direction: column; gap: 10px; }
.manual-check-label { font-weight: 600; }

/* Model-intel: the Second Opinion model-pair form. */
.opinion-settings-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.opinion-settings-form > div { flex: 1 1 260px; }

/* AI cost block (INTERNAL, 2026-07-22) — per-model machine cost on the task. */
.task-cost-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; margin-bottom: 4px;
}
.task-cost-figures { font-size: var(--text-xs); color: var(--text-secondary); white-space: nowrap; }
.task-cost-total {
  font-size: var(--text-sm); font-weight: 600; color: var(--text);
  border-top: 1px solid var(--border-mid); padding-top: 6px; margin-top: 6px;
}

/* U3 (KTD4/R17/R18): the circuit-breaker control block — a tripped task's
   strike count, bounce history, and the Release/Close exits. Rendered only
   while circuit-broken, so it reads as a loud red escalation surface. */
.task-circuit {
  border: 1px solid var(--danger, #d9534f);
  border-radius: var(--radius, 8px);
  background: var(--danger-bg, rgba(217, 83, 79, 0.06));
  padding: 12px;
}
.task-circuit-lead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }
.task-circuit-badge { font-weight: 700; color: var(--danger, #d9534f); }
.task-circuit-count { font-size: var(--text-xs); color: var(--text-secondary); }
.task-circuit-history { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.task-circuit-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: var(--text-xs); color: var(--text-secondary);
}
.task-circuit-row--counted { color: var(--text); font-weight: 600; }
.task-circuit-time { white-space: nowrap; }
.task-circuit-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }