/* ═══════════════════════════════════════════
   HQ Tasks View Styles
   Three-column kanban with stats strip.
   Depends on tokens.css.
   ═══════════════════════════════════════════ */

/* ── View shell ────────────────────────────── */
.tasks-view {
  flex: 1;
  overflow: auto;
  padding: var(--space-5) var(--space-7);
}

/* ── Header ────────────────────────────────── */
.tasks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  gap: 12px;
}

.tasks-header__left {
  flex: 1;
  min-width: 0;
}

.tasks-header__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 900;
  line-height: 1.1;
}

.tasks-header__sub {
  font-size: var(--text-sm);
  color: var(--color-dim);
  margin-top: 2px;
}

/* ── New task button ───────────────────────── */
.tasks-new-btn {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--color-amber);
  color: var(--color-bg);
  cursor: pointer;
  min-height: 44px;
  flex-shrink: 0;
  transition: opacity var(--transition-fast);
}

.tasks-new-btn:hover {
  opacity: 0.88;
}

/* ── Project filter bar ────────────────────── */
.tasks-filters {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

/* reuse filter-btn from feed.css if loaded — but define locally for independence */
.tasks-filter-btn {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-dim);
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.tasks-filter-btn:hover {
  background: var(--color-panel2);
  color: var(--color-text);
}

.tasks-filter-btn.is-active {
  border-color: var(--color-amber-glow);
  background: var(--color-amber-dim);
  color: var(--color-amber);
  box-shadow: 0 0 0 1px var(--color-amber-glow);
}

.tasks-filter-btn--project {
  border-left-width: 3px;
}

/* ── Stats strip ───────────────────────────── */
.tasks-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: var(--space-4);
}

.task-stat {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 14px var(--space-4);
}

/* highlight variant — colors applied inline */
.task-stat--highlight {
  /* border and background applied dynamically */
}

.task-stat__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-dim);
  margin-bottom: 4px;
}

.task-stat__count {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
}

/* ── Blocked-on-you pinned section (HQ v2 W2) ─ */
/* The antidote to bouncing between chats: everything blocked_on='brian'
   pinned at the top of the Tasks view. Hidden entirely when N=0. */
.tasks-blocked {
  background: var(--color-panel);
  border: 1px solid var(--color-red);
  border-radius: var(--radius-xl);
  padding: 12px var(--space-4);
  margin-bottom: var(--space-4);
}

.tasks-blocked[hidden] {
  display: none;
}

.tasks-blocked__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.tasks-blocked__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-red);
  flex-shrink: 0;
}

.tasks-blocked__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-red);
}

.tasks-blocked__count {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-bg);
  background: var(--color-red);
  border-radius: var(--radius-sm);
  padding: 1px 8px;
  min-width: 22px;
  text-align: center;
}

.tasks-blocked__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tasks-blocked__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  min-height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-panel2);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.tasks-blocked__item:hover {
  border-color: var(--color-red);
}

.tasks-blocked__item-main {
  flex: 1 1 auto;
  min-width: 0;
}

.tasks-blocked__item-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tasks-blocked__item-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.tasks-blocked__unblock {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0 14px;
  min-height: 44px;
  min-width: 44px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-red);
  background: transparent;
  color: var(--color-red);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.tasks-blocked__unblock:hover {
  background: var(--color-red);
  color: var(--color-bg);
}

/* In-card block/unblock toggle — red accent when the task is
   blocked-on-you (the "Unblock" state). */
.task-card__action-btn--blocked {
  border-color: var(--color-red);
  color: var(--color-red);
}

.task-card__action-btn--blocked:hover {
  background: var(--color-red);
  color: var(--color-bg);
}

/* ── Kanban grid ───────────────────────────── */
.tasks-kanban {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* ── Mobile tab-switcher (≤600px only) ─────── */
/* Hidden at desktop; mobile media query below makes it visible.
   Three buttons with status counts; one --active at a time. */
.tasks-mobile-tabs {
  display: none;
}

.tasks-mobile-tab {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  padding: 10px 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-dim);
  cursor: pointer;
  min-height: 44px;
  flex: 1 1 0;
  text-align: center;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.tasks-mobile-tab:hover {
  background: var(--color-panel2);
  color: var(--color-text);
}

.tasks-mobile-tab--active {
  border-color: var(--color-amber-glow);
  background: var(--color-amber-dim);
  color: var(--color-amber);
  box-shadow: 0 0 0 1px var(--color-amber-glow);
}

.tasks-mobile-tab__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  margin-left: 4px;
  opacity: 0.85;
}

/* ── Kanban column ─────────────────────────── */
.kanban-col__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 0 4px;
}

.kanban-col__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.kanban-col__label {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  flex: 1;
}

.kanban-col__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-dim);
}

.kanban-col__cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Task card ─────────────────────────────── */
.task-card {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  /* left border (priority color) applied inline */
  border-left-width: 3px;
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.task-card:hover {
  background: var(--color-panel2);
}

.task-card__tags {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.task-card__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
  margin-bottom: 8px;
}

.task-card__from {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--color-dim);
}

.task-card__time {
  margin-left: auto;
  font-family: var(--font-mono);
}

/* ── Task card actions ─────────────────────── */
.task-card__actions {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
  align-items: center;
}

.task-card__action-btn {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-dim);
  cursor: pointer;
  min-height: 28px;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.task-card__action-btn:hover {
  background: var(--color-panel2);
  color: var(--color-text);
}

.task-card__action-btn--primary {
  background: var(--color-amber);
  color: var(--color-bg);
  border-color: var(--color-amber);
}

.task-card__action-btn--primary:hover {
  opacity: 0.88;
  background: var(--color-amber);
  color: var(--color-bg);
}

.task-card__assigned {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--color-dim);
}

/* ── Pill (project tag / priority) ────────── */
.pill {
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* ── Delegate dropdown ─────────────────────── */
.delegate-dropdown {
  position: relative;
  display: inline-block;
}

.delegate-dropdown__menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  min-width: 160px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  margin-top: 2px;
  overflow: hidden;
}

.delegate-dropdown__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.delegate-dropdown__item:hover {
  background: var(--color-panel2);
}

/* ── New task modal ────────────────────────── */
.task-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 10, 9, 0.85);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  /* iOS notch / status bar safety — see chat.css .tag-modal-overlay. */
  padding-top: max(var(--space-4), env(safe-area-inset-top));
  padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
}

.task-modal {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.task-modal__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
}

.task-modal__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-dim);
  display: block;
  margin-bottom: 4px;
}

/* HQ v2 W2 — "Blocked on you" create-modal checkbox. 44px tap row. */
.task-modal__checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.task-modal__checkbox {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--color-red);
  cursor: pointer;
}

.task-modal__input,
.task-modal__select,
.task-modal__textarea {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--transition-fast);
}

.task-modal__input:focus,
.task-modal__select:focus,
.task-modal__textarea:focus {
  outline: none;
  border-color: var(--color-amber-glow);
}

.task-modal__textarea {
  resize: vertical;
  min-height: 80px;
}

/* Task-title input + mic button on one row. The wrapped input keeps
   width:100% inside a flex parent because the button has fixed width.
   See public/js/util/mic-button.js for the shared mic helper. */
.task-modal__input-with-mic {
  display: flex;
  gap: 6px;
  align-items: center;
}
.task-modal__mic-btn {
  width: 38px;
  min-height: 38px;
}
.task-modal__mic-btn .chat-mic-btn__icon { font-size: 16px; }

.task-modal__select option {
  background: var(--color-panel);
}

/* ─────────────────────────────────────────────────────────────────
   Link-source picker (Option E Layer 6 Deliverable B).
   Mirrors the drawer affordance shipped at hq@505a3be using the
   task-modal BEM scope. Visual treatment: a subtle bordered group
   to signal "this is one logical section, four inputs", with a
   helper line explaining the required-when-agents rule.
   CSS-class consolidation between drawer and create-modal is a
   deferred follow-up — see notes/task-context-preservation-ui-b.
   ───────────────────────────────────────────────────────────── */
.task-modal__link-source {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-panel2);
}

.task-modal__link-source-help {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-dim);
  line-height: 1.4;
  margin-bottom: var(--space-1);
}

.task-modal__error {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-danger, #ff6b6b);
  background: rgba(255, 107, 107, 0.08);
  border: 1px solid rgba(255, 107, 107, 0.3);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  line-height: 1.4;
}

.task-modal__error[hidden] {
  display: none;
}

.task-modal__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: var(--space-2);
}

.task-modal__cancel {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-dim);
  cursor: pointer;
  min-height: 44px;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.task-modal__cancel:hover {
  background: var(--color-panel2);
  color: var(--color-text);
}

.task-modal__create {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  padding: 8px 18px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--color-amber);
  color: var(--color-bg);
  cursor: pointer;
  min-height: 44px;
  transition: opacity var(--transition-fast);
}

.task-modal__create:hover {
  opacity: 0.88;
}

.task-modal__create:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Confirm-variant body styling ───────────── */
/* Reuses .task-modal-overlay / .task-modal containers; adds body + preview
   text styles for confirmation flows (Bring to Floor, etc.). No new modal
   class system — the --confirm modifier just opts into these styles. */
.task-modal__confirm-body {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.5;
}

.task-modal__confirm-preview {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.task-modal__confirm-preview-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-dim);
}

.task-modal__confirm-preview-text {
  font-size: var(--text-sm);
  color: var(--color-text);
  white-space: pre-wrap;
  word-break: break-word;
}

.task-modal__confirm-error {
  font-size: var(--text-sm);
  color: var(--color-red);
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid var(--color-red);
  border-radius: var(--radius-md);
  padding: 8px 10px;
}

/* ── Responsive ────────────────────────────── */
@media (max-width: 768px) {
  .tasks-view {
    padding: var(--space-4);
  }

  .tasks-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .tasks-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Kanban stacks vertically. Column order in markup is
     Awaiting → In Progress → Done (see tasks.js), so "Awaiting You"
     naturally surfaces at the top on phone without reordering. */
  .tasks-kanban {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* New-task button becomes full-width for easier thumb access. */
  .tasks-new-btn {
    width: 100%;
  }
}

/* ── Phone: tab-switcher replaces vertical stack ───
   At ≤600px (iPhone-class), vertical scrolling past a long Awaiting
   column to reach In Progress / Done is bad UX. Switch to a tab
   pattern: 3 tabs above the kanban, one column visible at a time.
   Default tab = "Awaiting You" (Brian's primary use case).
   See docs/decisions/active/mobile-tasks-tab-switcher.md. */
@media (max-width: 600px) {
  .tasks-mobile-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: var(--space-3);
  }

  /* Hide kanban columns by default; only the --active one renders. */
  .tasks-kanban .kanban-col {
    display: none;
  }

  .tasks-kanban .kanban-col--active {
    display: block;
  }
}

@media (max-width: 480px) {
  .tasks-view {
    padding: var(--space-3);
  }

  /* Task modal: promote to full-screen on phone with a safe-area-aware
     bottom inset so the Create button clears the iOS home indicator. */
  .task-modal-overlay {
    padding: 0;
    align-items: stretch;
  }

  .task-modal {
    max-width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    border-radius: 0;
    padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
    padding-left: max(var(--space-5), env(safe-area-inset-left));
    padding-right: max(var(--space-5), env(safe-area-inset-right));
  }

  /* Stretch the modal actions to fill available width so both
     Cancel and Create are easy to hit. */
  .task-modal__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .task-modal__cancel,
  .task-modal__create {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════
   Task detail drawer
   Slides in from right on task-card body click.
   Mirrors the .profile-drawer pattern from team.css.
   ═══════════════════════════════════════════ */

.task-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 40;
}

.task-drawer-backdrop.is-open {
  opacity: 1;
}

.task-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 560px;
  max-width: 100vw;
  background: var(--color-panel);
  border-left: 1px solid var(--color-border);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
  z-index: 41;
  transform: translateX(100%);
  transition: transform 0.22s ease;
  display: flex;
  flex-direction: column;
  /* iOS notch / status bar / Dynamic Island — top-anchored full-height
     drawer with `top: 0` would otherwise render its header under the
     status bar. Pattern from hq@e37c073. */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.task-drawer.is-open {
  transform: translateX(0);
}

.task-drawer__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.task-drawer__loading {
  padding: 40px 20px;
  color: var(--color-dim);
  font-size: var(--text-base);
  text-align: center;
}

.task-drawer__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-dim);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: border-color var(--transition-fast), color var(--transition-fast);
  z-index: 2;
}

.task-drawer__close:hover {
  border-color: var(--color-amber-glow);
  color: var(--color-amber);
}

.task-drawer__close:focus-visible {
  outline: none;
  border-color: var(--color-amber-glow);
  box-shadow: 0 0 0 1px var(--color-amber-glow);
}

/* ── Header ──────────────────────────────── */
.task-drawer__header {
  position: relative;
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-border);
}

.task-drawer__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1.25;
  padding-right: 40px; /* clear close button */
}

.task-drawer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.task-drawer__chip {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.task-drawer__from {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  font-size: var(--text-sm);
  color: var(--color-dim);
}

.task-drawer__from strong {
  font-weight: 700;
}

/* ── Body ─────────────────────────────────── */
.task-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.task-drawer__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.task-drawer__section--muted {
  color: var(--color-dim);
}

.task-drawer__section-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-text);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.task-drawer__doc-slug {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-dim);
  text-transform: none;
  letter-spacing: 0;
}

.task-drawer__doc-status {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}

.task-drawer__doc-status--active {
  background: rgba(212, 165, 116, 0.18);
  color: var(--color-amber);
}

.task-drawer__doc-status--accepted {
  background: rgba(120, 200, 130, 0.16);
  color: var(--color-green);
}

.task-drawer__doc-body {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-panel2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  max-height: 50vh;
  overflow-y: auto;
}

/* Inherit headings/lists/code styling from the existing .profile-markdown
   class — applied alongside .task-drawer__doc-body in the rendered HTML.
   No parallel rules needed; team.css owns the prose styling. */

.task-drawer__doc-empty,
.task-drawer__doc-error {
  font-size: var(--text-sm);
  color: var(--color-dim);
  background: var(--color-panel2);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

/* "Ad-hoc — no auto-dispatch" pill rendered when a task has no source AND
   no agents. Visually a subtle, muted badge so it telegraphs status without
   competing with primary section content. */
.task-drawer__doc-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-dim);
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  letter-spacing: 0.02em;
}

/* Orphan-row affordance: shown when a task has agents set but no
   sourceDocPath. Stacks the warning message above an action row of
   "Link source" + "Convert to ad-hoc" buttons. The inline form
   (.task-drawer__doc-orphan-form) is hidden until the user clicks
   Link source. */
.task-drawer__doc-orphan {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.task-drawer__doc-orphan-msg {
  font-size: var(--text-sm);
  color: var(--color-text);
  opacity: 0.92;
}

.task-drawer__doc-orphan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.task-drawer__doc-orphan-form[hidden] {
  display: none;
}

.task-drawer__doc-orphan-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

.task-drawer__doc-orphan-error[hidden] {
  display: none;
}

.task-drawer__doc-orphan-error {
  font-size: var(--text-xs);
  color: var(--color-danger, #d97a7a);
}

/* Inline link-source form layout: each row pairs a label with its control,
   stacked on narrow viewports for mobile readability. */
.task-drawer__link-form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.task-drawer__link-form-label {
  font-size: var(--text-xs);
  color: var(--color-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.task-drawer__link-form-select,
.task-drawer__link-form-input {
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  min-height: 36px;
}

.task-drawer__link-form-select:focus,
.task-drawer__link-form-input:focus {
  outline: 2px solid var(--color-accent, #d4a574);
  outline-offset: 1px;
}

.task-drawer__link-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}

/* Heading label rendered next to the doc slug in the section title — used
   when the source-excerpt endpoint returns the matched H2 text alongside
   the markdown slice. Visually subordinate to the slug. */
.task-drawer__doc-heading {
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text);
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.85;
}

/* "Show full document" expansion. Uses native <details>/<summary> for
   keyboard + screen-reader semantics. The summary is styled as a subtle
   amber link to telegraph the affordance without competing with the
   primary action buttons in the footer. */
.task-drawer__doc-expand {
  margin-top: 6px;
}

.task-drawer__doc-expand-summary {
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-amber);
  padding: 6px 4px;
  list-style: none;
  user-select: none;
}

.task-drawer__doc-expand-summary::-webkit-details-marker {
  display: none;
}

.task-drawer__doc-expand-summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.15s ease;
}

.task-drawer__doc-expand[open] > .task-drawer__doc-expand-summary::before {
  content: "▾ ";
}

.task-drawer__doc-expand-summary:hover,
.task-drawer__doc-expand-summary:focus-visible {
  color: var(--color-amber-glow, var(--color-amber));
  outline: none;
}

.task-drawer__doc-expand-body {
  margin-top: 6px;
}

.task-drawer__doc-expand-loading {
  font-size: var(--text-sm);
  color: var(--color-dim);
  background: var(--color-panel2);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

.task-drawer__answer {
  width: 100%;
  min-height: 100px;
  resize: vertical;
  font: inherit;
  font-size: var(--text-sm);
  background: var(--color-panel2);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  box-sizing: border-box;
}

.task-drawer__answer:focus {
  outline: none;
  border-color: var(--color-amber-glow);
  box-shadow: 0 0 0 1px var(--color-amber-glow);
}

.task-drawer__hint {
  font-size: var(--text-xs);
  color: var(--color-dim);
  margin-top: -2px;
}

/* ── Footer ───────────────────────────────── */
.task-drawer__footer {
  padding: 14px 20px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.task-drawer__footer-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.task-drawer__btn {
  flex: 1;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-panel2);
  color: var(--color-text);
  font: inherit;
  font-weight: 700;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.task-drawer__btn:hover {
  border-color: var(--color-amber-glow);
  color: var(--color-amber);
}

.task-drawer__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.task-drawer__btn--primary {
  background: var(--color-amber-dim, rgba(212, 165, 116, 0.16));
  border-color: var(--color-amber-glow);
  color: var(--color-amber);
}

.task-drawer__btn--primary:hover {
  background: rgba(212, 165, 116, 0.28);
}

.task-drawer__btn--ghost {
  flex: 0 0 auto;
  background: transparent;
  border-color: transparent;
  color: var(--color-dim);
  font-weight: 600;
  text-align: left;
  padding: 6px 0;
}

.task-drawer__btn--ghost:hover {
  color: var(--color-amber);
  background: transparent;
  border-color: transparent;
}

/* ── Mobile: full-width drawer with small peek ───── */
@media (max-width: 768px) {
  .task-drawer {
    width: calc(100vw - 8px);
  }

  .task-drawer__doc-body {
    max-height: 40vh;
  }
}

/* ── Make the task card body clickable as a button ───
   The card itself becomes the open-drawer affordance; the action buttons
   inside it stop-propagate their clicks so they keep their existing
   behavior. Add a hover state to telegraph the new affordance. */
.task-card {
  cursor: pointer;
}

.task-card:hover {
  border-color: var(--color-amber-glow);
}

.task-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--color-amber-glow);
}

/* ── Auto-dispatch: in-flight indicator + hold checkbox + error ─────────
   Backed by docs/decisions/active/auto-dispatch-hook.md. The indicator
   appears at the top of the drawer body (above the decision-doc section)
   when the open task has an active auto_dispatches row. The hold checkbox
   sits beneath the answer textarea. */

.task-drawer__dispatch {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-panel2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.task-drawer__dispatch-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.task-drawer__dispatch-actions {
  display: flex;
  gap: 6px;
}

/* State variants */
.task-drawer__dispatch--pending,
.task-drawer__dispatch--queued,
.task-drawer__dispatch--inprogress {
  border-color: var(--color-amber-glow);
  background: rgba(212, 165, 116, 0.10);
}

.task-drawer__dispatch--held {
  border-color: var(--color-orange, #d97a3a);
  background: rgba(217, 122, 58, 0.10);
}

.task-drawer__dispatch--completed {
  border-color: var(--color-green, #6abf6a);
  background: rgba(106, 191, 106, 0.10);
}

.task-drawer__dispatch--failed {
  border-color: var(--color-red, #c45b5b);
  background: rgba(196, 91, 91, 0.10);
}

.task-drawer__dispatch--cancelled {
  border-color: var(--color-border);
  color: var(--color-dim);
}

/* Spinner — minimal CSS-only ring; respects prefers-reduced-motion */
.task-drawer__dispatch-spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--color-amber-glow, #d4a574);
  border-top-color: transparent;
  animation: task-drawer-spin 0.9s linear infinite;
  flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .task-drawer__dispatch-spinner {
    animation: none;
    border-top-color: var(--color-amber-glow, #d4a574);
    opacity: 0.6;
  }
}

@keyframes task-drawer-spin {
  to { transform: rotate(360deg); }
}

.task-drawer__dispatch-icon {
  display: inline-block;
  width: 14px;
  text-align: center;
  font-weight: 700;
  flex: 0 0 auto;
}

/* Compact button variant for in-flight actions (Release / Cancel) */
.task-drawer__btn--small {
  padding: 6px 10px;
  font-size: var(--text-xs);
  flex: 0 0 auto;
}

/* Hold-for-review checkbox row */
.task-drawer__hold {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text);
  /* 44px tap target on mobile (Rule: HQ mobile-first) */
  min-height: 32px;
}

.task-drawer__hold input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-amber, #d4a574);
  cursor: pointer;
  flex: 0 0 auto;
}

.task-drawer__hold:hover .task-drawer__hold-label {
  color: var(--color-amber);
}

.task-drawer__hold-label {
  user-select: none;
  transition: color var(--transition-fast);
}

/* Inline error region (rate-limited / kill-switch / etc) */
.task-drawer__error {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-red, #c45b5b);
  background: rgba(196, 91, 91, 0.10);
  color: var(--color-red, #c45b5b);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* ── Chat-style scrollback + composer (task-thread architecture, hq@61dddd1) ──
   Replaces the prior single-shot answer textarea. The chat section grows to
   take the available drawer height; the scrollback is independently scrollable
   so older messages stay reachable while the composer + dispatch indicator
   remain pinned. Reuses .message-bubble / .message-row from chat.css for
   visual parity with the chat tab. */

.task-drawer__section--chat {
  display: flex;
  flex-direction: column;
  /* Let the chat section consume vertical space — keeps the composer at a
     stable position near the bottom of the drawer body. */
  flex: 1 1 auto;
  min-height: 320px;
}

.task-drawer__chat-scrollback {
  flex: 1 1 auto;
  min-height: 200px;
  max-height: 50vh;
  overflow-y: auto;
  padding: 8px 4px;
  margin-bottom: 12px;
  border-radius: var(--radius-md);
  background: var(--color-panel2);
  border: 1px solid var(--color-border);
  /* Stack message rows vertically with the same spacing chat.css uses. */
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task-drawer__chat-empty {
  padding: 20px 12px;
  color: var(--color-dim);
  font-size: var(--text-sm);
  font-style: italic;
  text-align: center;
}

/* Per-message avatar — same 28px circle as chat.js's inline avatar; broken
   out into a class so the drawer doesn't re-import chat.css's inline styles
   (chat.js writes them inline today). Mirrors the pattern but is a distinct
   class so changes here don't ripple into the chat tab. */
.task-drawer__chat-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  align-self: flex-start;
}

/* Composer: textarea + hold checkbox + send button on a row.
   The textarea is the existing .task-drawer__answer; the composer wrapper
   tightens spacing and aligns the send button right. */
.task-drawer__composer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.task-drawer__composer .task-drawer__answer {
  /* Slightly smaller min-height than the original single-shot textarea —
     the scrollback above carries most of the visual weight now. */
  min-height: 64px;
}

.task-drawer__composer-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.task-drawer__composer-row .task-drawer__hold {
  /* Inline hold checkbox — no extra top-margin since the row handles spacing. */
  margin-top: 0;
  flex: 1 1 auto;
}

.task-drawer__composer-row .task-drawer__btn--primary {
  flex: 0 0 auto;
  padding: 10px 20px;
}

/* Mobile: shrink scrollback + tighten composer for narrow viewports. */
@media (max-width: 768px) {
  .task-drawer__chat-scrollback {
    max-height: 40vh;
    min-height: 160px;
  }
  .task-drawer__composer-row {
    /* Keep send button accessible — full-width if it wraps below the hold
       checkbox so the 44px tap target is preserved. */
    gap: 8px;
  }
  .task-drawer__composer-row .task-drawer__btn--primary {
    /* On wrap, expand to full row width for easier tap. */
    flex: 1 1 100%;
    text-align: center;
  }
}