/* ============================================================================
   v0.4.16 - AI PROGRESS NUDGE (row icon) + detail-modal report input & history.
   ============================================================================ */

/* Small round icon on each collapsed task row - opens the detail view. */
.progress-nudge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--chronos-fg-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 120ms ease, color 120ms ease;
}
.progress-nudge .material-icons { font-size: 18px; }
.progress-nudge:hover {
    background: var(--chronos-violet-light);
    color: var(--chronos-violet);
}

/* Subtask list becomes a bounded scroll region so a long list never pushes the
   progress-report input below it out of place (the input stays static). */
.detail-subtask-scroll {
    max-height: 180px;
    overflow-y: auto;
    padding-right: 4px;
}

/* One-line hint under the AI progress-report header. */
.detail-help { font-size: 12px; margin-top: 2px; }

/* Static AI-progress report block: prompt row + history log. */
.progress-report { gap: 8px; }
.progress-prompt-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.progress-prompt-input { flex: 1; min-width: 0; }
.progress-prompt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    flex-shrink: 0;
}
.progress-prompt-btn .material-icons { font-size: 20px; }
.progress-prompt-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.progress-history {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 160px;
    overflow-y: auto;
}
.progress-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border: 1px solid var(--chronos-outline);
    border-radius: 8px;
    font-size: 13px;
}
.progress-entry-pct {
    flex-shrink: 0;
    min-width: 38px;
    font-weight: 700;
    color: var(--chronos-violet);
    font-variant-numeric: tabular-nums;
}
.progress-entry-quote {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.progress-entry-date {
    flex-shrink: 0;
    font-size: 11px;
    white-space: nowrap;
}

/* AI confirm modal - one row per draft. */
.ai-draft-row {
    border: 1px solid var(--chronos-outline);
    border-radius: 10px;
    padding: 12px;
    gap: 6px;
}
.ai-draft-title { font-weight: 600; }
.ai-draft-desc { font-size: 13px; }
.ai-draft-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.ai-draft-fields .field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* AI confirm dialog: wider than the create modal so the two panes sit side by side and
   the dialog stays a sensible height; it scrolls internally instead of overflowing the
   viewport when there are several drafts. */
.ai-confirm-card {
    max-width: 900px;
    max-height: 88vh;
    overflow-y: auto;
}

/* Each draft = two EQUAL panes, side by side and centered in the dialog: the main fields
   (title/body/deadline/label) on the left, the AI's subtasks card on the right. A CSS
   grid (not flex-wrap) holds them in two columns so they never stack on desktop; it
   collapses to one column only on narrow / phone screens. The outer .ai-draft-row border
   is dropped so the two inner cards are the visible frames. */
.ai-draft-row { border: none; padding: 0; }
.ai-draft-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: stretch;   /* subtasks card tracks the (stable) main-pane height - equal, fixed size */
}
.ai-draft-main,
.ai-draft-subtasks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    min-height: 0;          /* let the card be bounded by the row so its inner list can scroll */
    padding: 12px;
    background: var(--chronos-chip-bg);
    border: 1px solid var(--chronos-outline);
    border-radius: 10px;
}
.ai-draft-subtasks-head { font-size: 12px; font-weight: 600; flex-shrink: 0; }

/* Only the subtask ROWS scroll: the header and the "add" button stay pinned, and the list
   fills the space between them (flex + min-height:0) with its own scrollbar INSIDE the card.
   max-height caps it so a long list scrolls instead of growing the card - the card keeps a
   fixed footprint regardless of how many subtasks there are. */
.ai-subtask-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 0;
    min-height: 0;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 4px;
}
.ai-subtask-row { display: flex; align-items: center; gap: 4px; }
.ai-subtask-input { flex: 1; min-width: 0; }
.ai-subtask-del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--chronos-fg-muted);
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
}
.ai-subtask-del:hover { background: var(--chronos-hover-bg); color: var(--chronos-red); }
.ai-subtask-del .material-icons { font-size: 16px; line-height: 1; }
.ai-subtask-add { align-self: flex-start; margin-top: 2px; flex-shrink: 0; }

/* Lock the markdown textarea size inside the confirm dialog (the two-pane layout keeps
   its footprint fixed - no manual drag-resize). */
.ai-draft-body .md-textarea { resize: none; }

/* Narrow / phone: single column, and drop the wide width so it fits the viewport. */
@media (max-width: 720px) {
    .ai-confirm-card { max-width: 520px; }
    .ai-draft-grid { grid-template-columns: 1fr; }
}

/* When the AI's date guess was low-confidence, paint the date input border red
   so the user notices they need to confirm. */
.modal-search.low-confidence {
    border-color: #EF4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.validation-message {
    color: #EF4444;
    font-size: 13px;
    margin: 0;
}

/* AI confirm modal: inline new-label control + a red DENY in the bottom-left. Rejecting
   discards an already-spent generation, so DENY asks for confirmation before discarding. */
.ai-new-label { display: flex; flex-direction: column; gap: 6px; }
.ai-confirm-actions { display: flex; align-items: center; gap: 8px; }
.deny-btn {
    background: transparent;
    color: var(--chronos-red);
    border: 1px solid var(--chronos-red);
    border-radius: var(--radius-pill);
    padding: 9px 18px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.03em;
    cursor: pointer;
}
.deny-btn:hover:not(:disabled) { background: var(--chronos-red); color: #fff; }
.deny-confirm-text { font-size: 13px; }