/* ===== One-box expand (Phase A) — the expanded card becomes a full-width box
   spanning the lane grid; its body splits left 1/3 (meta + detail + subtasks) /
   right 2/3 (chat). The single card border wraps it → one task box. Below 900px
   the two columns stack (meta+subtasks over the chat). ===== */
.tasks-card-expanded { grid-column: 1 / -1; }
/* Consistent capped size: at least 220px, at most min(58vh, 520px). The columns
   scroll INSIDE the box (overflow:hidden clips the box itself) so a long thread
   never grows the card unbounded. */
.tasks-box {
  display: flex; gap: 16px; margin-top: 10px; align-items: stretch;
  min-height: 220px; max-height: min(58vh, 520px); overflow: hidden;
}
.tasks-box-left {
  flex: 0 0 34%; min-width: 0; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.tasks-box-right {
  flex: 1 1 66%; min-width: 0; min-height: 0; display: flex; flex-direction: column;
  border-left: 1px solid var(--fleet-hair); padding-left: 16px;
}
/* the chat fills the right column: list scrolls internally, composer pins bottom.
   min-height:0 on the flex chain is what lets the list actually scroll. */
.tasks-box-right .tasks-thread { margin: 0; padding: 0; border-top: none; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.tasks-box-right .tasks-thread-list { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.tasks-box-right .tasks-thread-compose { flex: 0 0 auto; margin-top: 8px; }
/* subtasks placeholder (Phase B slot) */
.tasks-subtasks { border-top: 1px solid var(--fleet-hair); padding-top: 12px; }
.tasks-subtasks-label { font-family: var(--fleet-text); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.tasks-subtasks-count { color: var(--fleet-working); font-weight: 700; letter-spacing: 0; }
.tasks-subtasks-empty { font-family: var(--fleet-text); font-size: 0.72rem; color: var(--text-muted); font-style: italic; }
/* checklist rows */
.tasks-subtask-list { display: flex; flex-direction: column; gap: 6px; }
.tasks-subtask { display: flex; align-items: center; gap: 6px; }
.tasks-subtask-check { flex: 0 0 auto; accent-color: var(--fleet-working); cursor: pointer; margin: 0; }
.tasks-subtask-text { flex: 1 1 auto; min-width: 0; font-family: var(--fleet-text); font-size: 0.78rem; color: var(--text-primary); cursor: text; overflow-wrap: anywhere; }
.tasks-subtask-checked { color: var(--text-muted); text-decoration: line-through; }
.tasks-subtask-edit { flex: 1 1 auto; min-width: 0; font-family: var(--fleet-text); font-size: 0.78rem; padding: 2px 5px; border: 1px solid var(--fleet-working); border-radius: 4px; background: var(--bg-secondary, rgba(0,0,0,0.25)); color: var(--text-primary); color-scheme: dark; }
.tasks-subtask-del { flex: 0 0 auto; font-family: var(--fleet-mono); font-size: 0.9rem; line-height: 1; color: var(--text-muted); background: transparent; border: none; cursor: pointer; padding: 0 3px; }
.tasks-subtask-del:hover { color: var(--fleet-dead); }
.tasks-subtask-add { display: flex; gap: 6px; align-items: center; margin-top: 12px; }
.tasks-subtask-input { flex: 1 1 auto; min-width: 0; font-family: var(--fleet-text); font-size: 0.76rem; padding: 4px 7px; border: 1px solid var(--fleet-hair); border-radius: 5px; background: var(--bg-secondary, rgba(0,0,0,0.25)); color: var(--text-primary); color-scheme: dark; }
.tasks-subtask-input:focus-visible { outline: none; border-color: var(--fleet-working); }
/* ghost affordance at rest (like the × delete) — green only on hover/focus */
.tasks-subtask-addbtn { flex: 0 0 auto; font-family: var(--fleet-mono); font-size: 0.9rem; line-height: 1; width: 26px; height: 26px; color: var(--text-muted); background: transparent; border: none; border-radius: 5px; cursor: pointer; transition: color .13s ease, background .13s ease; }
.tasks-subtask-addbtn:hover, .tasks-subtask-addbtn:focus-visible { color: var(--fleet-working); background: rgba(46,213,115,0.10); }

/* Task attachments (015) — download chips + attach affordance in the expanded card */
.tasks-attach { border-top: 1px solid var(--fleet-hair); padding-top: 12px; margin-top: 12px; }
.tasks-attach-label { font-family: var(--fleet-text); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.tasks-attach-count { color: var(--text-secondary); }
.tasks-attach-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tasks-attach-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-family: var(--fleet-text); font-size: 0.74rem; color: var(--text-primary); background: var(--fleet-panel); border: 1px solid var(--fleet-hair); border-radius: 6px; padding: 4px 9px; cursor: pointer; transition: border-color .13s ease, background .13s ease; }
.tasks-attach-chip:hover, .tasks-attach-chip:focus-visible { border-color: rgba(46,213,115,0.5); background: rgba(46,213,115,0.08); }
.tasks-attach-ico { flex: 0 0 auto; font-size: 0.72rem; opacity: 0.85; }
.tasks-attach-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.tasks-attach-size { flex: 0 0 auto; color: var(--text-muted); font-size: 0.66rem; }
.tasks-attach-chip.tasks-attach-busy { opacity: 0.6; cursor: progress; }
.tasks-attach-chip.tasks-attach-err { border-color: var(--fleet-dead); color: var(--fleet-dead); }
/* image chips open the preview modal — signal it with a zoom cursor (busy wins) */
.tasks-attach-chip.tasks-attach-img { cursor: zoom-in; }
.tasks-attach-chip.tasks-attach-img.tasks-attach-busy { cursor: progress; }
.tasks-attach-hint { font-family: var(--fleet-text); font-size: 0.68rem; color: var(--text-muted); }
.tasks-attach-add { flex: 0 0 auto; font-family: var(--fleet-text); font-size: 0.72rem; font-weight: 600; color: var(--text-muted); background: transparent; border: 1px dashed var(--fleet-hair); border-radius: 6px; padding: 4px 9px; cursor: pointer; transition: color .13s ease, border-color .13s ease, background .13s ease; }
.tasks-attach-add:hover, .tasks-attach-add:focus-visible { color: var(--fleet-working); border-color: rgba(46,213,115,0.5); background: rgba(46,213,115,0.08); }
.tasks-attach.tasks-attach-uploading { opacity: 0.7; }
/* 020: linked-file chips (path references — no stored copy). Warm border to
   read distinct from uploaded chips; missing/restricted flip from the read
   endpoint's state payloads. */
.tasks-attach-chip.tasks-attach-linked { border-style: solid; border-color: rgba(255,201,138,0.45); }
.tasks-attach-chip.tasks-attach-linked:hover, .tasks-attach-chip.tasks-attach-linked:focus-visible { border-color: rgba(255,201,138,0.85); background: rgba(255,201,138,0.08); }
.tasks-attach-vol { flex: 0 0 auto; font-family: var(--fleet-mono); font-size: 0.6rem; color: #ffc98a; opacity: 0.85; }
.tasks-attach-chip.tasks-attach-missing { border-style: dashed; border-color: var(--fleet-hair); color: var(--text-muted); }
.tasks-attach-chip.tasks-attach-missing .tasks-attach-vol { color: var(--text-muted); }
.tasks-attach-chip.tasks-attach-restricted { border-style: dashed; border-color: rgba(255,107,107,0.5); color: var(--text-muted); cursor: not-allowed; }
/* 020: the 'Attach from Files' picker modal.
   OPAQUE PANEL (Jase e978cbfe): --fleet-panel is 5% white — a chip tint, not a
   surface — so the first cut let the task card bleed through the modal. Same
   cure as the #492 dm-swipe panels, the established language for layers
   floating over content: the app's base gradient as a solid surface + a deep
   shadow, with a dimmed scrim behind so the board recedes. */
.tasks-fpicker-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.62); z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 18px; overscroll-behavior: contain; }
.tasks-fpicker {
  width: min(560px, 100%); max-height: min(70vh, 640px); min-height: 0;
  display: flex; flex-direction: column;
  background: linear-gradient(135deg, var(--bg-primary), var(--bg-secondary));
  border: 1px solid var(--fleet-hair); border-radius: 12px; padding: 12px; gap: 10px;
  box-shadow: 0 14px 44px rgba(0,0,0,0.55);
}
.tasks-fpicker-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--fleet-mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--text-secondary); }
.tasks-fpicker-close { background: transparent; border: none; color: var(--text-muted); font-size: 1.1rem; cursor: pointer; padding: 0 4px; }
.tasks-fpicker-close:hover { color: var(--text-primary); }
.tasks-fpicker-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tasks-fpicker-chip { font-family: var(--fleet-mono); font-size: 0.62rem; padding: 3px 9px; border-radius: 6px; cursor: pointer; background: transparent; color: var(--text-secondary); border: 1px solid var(--fleet-hair); }
.tasks-fpicker-chip:hover { color: var(--text-primary); border-color: var(--text-muted); }
.tasks-fpicker-crumb { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tasks-fpicker-path { font-family: var(--fleet-mono); font-size: 0.62rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
/* The LIST is the one scroll container — header + chips stay pinned above it,
   and overscroll containment keeps the board from scrolling behind the modal. */
.tasks-fpicker-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border: 1px solid var(--fleet-hair); border-radius: 7px; }
.tasks-fpicker-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-family: var(--fleet-text); font-size: 0.78rem; color: var(--text-primary); cursor: pointer; border-bottom: 1px solid var(--fleet-hair); }
.tasks-fpicker-row:last-child { border-bottom: none; }
.tasks-fpicker-row:hover { background: rgba(255,255,255,0.04); }
.tasks-fpicker-row.tasks-fpicker-file { cursor: default; }
.tasks-fpicker-row.tasks-fpicker-sens { opacity: 0.45; }
.tasks-fpicker-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks-fpicker-size { flex: 0 0 auto; font-size: 0.66rem; color: var(--text-muted); }
.tasks-fpicker-attach { flex: 0 0 auto; font-family: var(--fleet-mono); font-size: 0.58rem; letter-spacing: 0.06em; padding: 3px 9px; border-radius: 6px; cursor: pointer; background: transparent; color: var(--fleet-working, #2ed573); border: 1px solid rgba(46,213,115,0.5); }
.tasks-fpicker-attach:hover:not(:disabled) { background: rgba(46,213,115,0.1); }
.tasks-fpicker-attach:disabled { opacity: 0.5; cursor: progress; }
.tasks-fpicker-note { font-family: var(--fleet-text); font-size: 0.72rem; color: var(--text-muted); padding: 6px 2px; }

/* Picker search bar (2026-07-30): input row under the head; while a 2+ char
   query is active the list body swaps to a FLAT result list — each row shows
   the parent path dimmed so same-named files are tellable apart. */
.tasks-fpicker-search { display: flex; align-items: center; gap: 6px; }
.tasks-fpicker-searchinput { flex: 1 1 auto; min-width: 0; font-family: var(--fleet-text); font-size: 0.8rem;
  color: var(--text-primary); padding: 7px 10px; border-radius: 7px;
  background: rgba(0,0,0,0.22); border: 1px solid var(--fleet-hair); outline: none; }
.tasks-fpicker-searchinput:focus { border-color: var(--text-muted); }
.tasks-fpicker-searchclear { flex: 0 0 auto; background: transparent; border: none; color: var(--text-muted);
  font-size: 1.05rem; cursor: pointer; padding: 0 4px; }
.tasks-fpicker-searchclear:hover { color: var(--text-primary); }
.tasks-fpicker-parent { flex: 0 1 45%; min-width: 0; font-family: var(--fleet-mono); font-size: 0.6rem;
  color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  direction: rtl; text-align: left; }
/* 021: tree rows — depth indentation via --fpd, disclosure carets. */
.tasks-fpicker-row { padding-left: calc(10px + (var(--fpd, 0) * 16px)); }
.tasks-fpicker-note[style] { padding-left: calc(26px + (var(--fpd, 0) * 16px)); }
.tasks-fpicker-caret { flex: 0 0 auto; width: 12px; color: var(--text-muted); font-size: 0.7rem; }
.tasks-fpicker-dir { cursor: pointer; }
/* 021: the attachment media player — same overlay family as the picker. */
.tasks-aplayer { width: min(760px, 100%); }
.tasks-aplayer-media { width: 100%; max-height: 60vh; border-radius: 8px; background: #000; outline: none; }
audio.tasks-aplayer-media { max-height: none; }
/* Phone: near-full-width with margins, height capped, list scrolls inside. */
@media (max-width: 640px) {
  .tasks-fpicker-overlay { padding: 10px; }
  .tasks-fpicker { width: 100%; max-height: 80vh; }
  .tasks-aplayer-media { max-height: 50vh; }
}
/* drag-over the board while a card is open — highlight the open card's file slot */
.tasks-board.tasks-drop-active .tasks-card-expanded .tasks-attach { border-color: var(--fleet-working); box-shadow: inset 0 0 0 1px rgba(46,213,115,0.35); border-radius: 6px; }
@media (max-width: 900px) {
  /* stacked: the box grows with the meta/subtasks, and the chat list itself
     caps + scrolls so the composer stays reachable without a giant card. */
  .tasks-box { flex-direction: column; min-height: 0; max-height: none; overflow: visible; }
  .tasks-box-left { flex: 0 0 auto; overflow-y: visible; }
  .tasks-box-right { flex: 1 1 auto; border-left: none; padding-left: 0; border-top: 1px solid var(--fleet-hair); padding-top: 12px; }
  .tasks-box-right .tasks-thread-list { max-height: 42vh; overflow-y: auto; }
}

/* Poll re-renders paint FLAT — entry reveal on view-enter only (the Fleet's
   anti-strobe rule; the live rail pulses on ::before keep animating). */
.tasks-board.tasks-static .tasks-lane,
.tasks-board.tasks-static .tasks-card { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .tasks-lane, .tasks-card { animation: none; }
  .tasks-card-returned::before, .tasks-card-blocked::before,
  .tasks-lane-attention .tasks-lane-label::before { animation: none; }
}

@media (max-width: 640px) {
  .tasks-board { padding: 12px 12px 96px; }
  .tasks-lane-cards { grid-template-columns: 1fr; }
  #view-tasks .view-header h2 { font-size: 1.15rem; }
}