/* AI helpers: the shared dialog, status lines, the hours sentence row, task and
   payment lists. */
.ai-dialog { position: fixed; inset: 0; width: min(560px, 94vw); max-width: none; max-height: 90vh; margin: auto; padding: 0; border: 0; border-radius: 16px; background: var(--surface); color: var(--fg); box-shadow: 0 24px 60px rgb(0 0 0 / 0.35); overflow: hidden; }
.ai-dialog.is-wide { width: min(820px, 96vw); }
.ai-dialog::backdrop { background: rgb(10 10 20 / 0.55); }
.ai-dialog[open] { display: flex; flex-direction: column; }
.ai-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--border); }
.ai-dialog-head h2 { margin: 0; font-size: 17px; }
.ai-dialog-body { flex: 1; min-height: 0; padding: 18px 22px; overflow-y: auto; }
.ai-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--border); }
.ai-dialog-actions [hidden] { display: none; }
.ai-dialog textarea { width: 100%; resize: vertical; }

.ai-status { margin: 8px 0 0; padding: 8px 12px; border-radius: var(--r-md); background: var(--surface-2); color: var(--fg-2); font-size: 12.5px; line-height: 1.45; }
.ai-status[hidden] { display: none; }
.ai-status.is-busy { color: var(--fg-3); }
.ai-status.is-ok { background: var(--emerald-soft); color: var(--emerald); }
.ai-status.is-warn { background: color-mix(in srgb, var(--amber) 14%, var(--surface)); color: var(--fg); }
.ai-status.is-bad { background: var(--rose-soft); color: var(--rose); }
.ai-note { margin: 10px 0 0; color: var(--fg-3); font-size: 12.5px; line-height: 1.5; }

/* Messages */
.ai-message-head { margin-bottom: 4px; }
.ai-message-head .form-group:first-child { flex: 0 0 140px; }
.ai-message-text { min-height: 220px; font-family: inherit; font-size: 13.5px; line-height: 1.55; }

/* Hours sentence */
.ai-sentence { padding: 12px 14px; border: 1px dashed var(--indigo-border, var(--border-strong)); border-radius: var(--r-md); background: var(--indigo-soft); }
.ai-sentence[hidden] { display: none !important; }
.ai-sentence-row { display: flex; gap: 8px; }
.ai-sentence-row input { flex: 1; min-width: 0; }

/* Tasks */
.ai-task-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.ai-task { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; }
.ai-task:has(input[type="checkbox"]:not(:checked)) { opacity: 0.55; }
.ai-task > input[type="checkbox"] { flex: none; width: 17px; height: 17px; margin: 10px 0 0; padding: 0; accent-color: var(--indigo); }
.ai-task-main { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.ai-task-title { width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--fg); font: inherit; font-weight: 600; }
.ai-task-main small { color: var(--fg-3); font-size: 12px; white-space: pre-line; }
.ai-task-meta { flex-shrink: 0; padding-top: 9px; color: var(--fg-3); font-size: 12px; white-space: nowrap; }
.ai-task-priority { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); font-weight: 600; }
.ai-task-priority.is-high { background: var(--rose-soft); color: var(--rose); }

/* Tax decision table */
.ai-table-wrap { margin-top: 12px; overflow-x: auto; }
.ai-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ai-table th { padding: 8px 10px; border-bottom: 2px solid var(--border-strong); color: var(--fg-3); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-align: left; text-transform: uppercase; }
.ai-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.ai-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ai-table tr.is-skipped td { color: var(--fg-4); }

/* Bank statement */
.ai-bank-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ai-bank-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; align-items: start; padding: 12px 14px; border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: var(--r-md); }
.ai-bank-row.is-matched { border-left-color: var(--emerald); }
.ai-bank-payment { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ai-bank-payment strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.ai-bank-payment span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-bank-payment small, .ai-bank-pick small { color: var(--fg-3); font-size: 11.5px; overflow-wrap: anywhere; }
.ai-bank-pick { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ai-bank-pick select { width: 100%; }

@media (max-width: 640px) {
  .ai-dialog, .ai-dialog.is-wide { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .ai-dialog-body, .ai-dialog-head, .ai-dialog-actions { padding-left: 16px; padding-right: 16px; }
  .ai-bank-row { grid-template-columns: minmax(0, 1fr); }
  .ai-sentence-row { flex-direction: column; }
}

/* Payment slips: a card with the details and a QR code to scan */
.slip-card { display: flex; gap: 14px; align-items: flex-start; margin-top: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.slip-qr { flex: none; width: 112px; height: 112px; padding: 4px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--border); }
.slip-qr svg { display: block; width: 100%; height: 100%; }
.slip-qr.is-missing { display: flex; align-items: center; justify-content: center; padding: 8px; color: var(--fg-4); font-size: 11px; line-height: 1.35; text-align: center; }
.slip-lines { display: flex; flex-direction: column; gap: 5px; min-width: 0; margin: 0; }
.slip-lines div { display: flex; flex-direction: column; }
.slip-lines dt { color: var(--fg-3); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.slip-lines dd { margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tax-slip-details .card-btn { margin-top: 6px; }
.tax-qr { display: inline-flex; align-items: center; padding: 0 5px; border-radius: 4px; background: var(--indigo-soft); color: var(--indigo); font-size: 9.5px; font-weight: 800; letter-spacing: 0.04em; }

.slip-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.slip-row { display: flex; gap: 14px; align-items: flex-start; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md); }
.slip-row .slip-qr { width: 88px; height: 88px; }
.slip-row-main { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }
.slip-row-head { display: flex; align-items: center; gap: 8px; }
.slip-row-head strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.slip-row-main small { color: var(--fg-3); font-size: 12px; overflow-wrap: anywhere; }
.slip-paid { padding: 1px 8px; border-radius: 999px; background: var(--emerald-soft); color: var(--emerald); font-size: 11px; font-weight: 700; }
.slip-row-pick { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 90px; gap: 8px; margin-top: 6px; }

@media (max-width: 640px) {
  .slip-row, .slip-card { flex-direction: column; }
  .slip-row-pick { grid-template-columns: minmax(0, 1fr); }
}

/* A secondary button that shows only its icon; the title says what it does. */
.btn-icon-only { padding-left: 11px; padding-right: 11px; }
.btn-icon-only .btn-icon { margin: 0; }