/* Daily Life Doc, round 13 (zone F1): the place To review (js/review/review-page.js) and the block Notify me
   (js/settings/notify.js), drawn as the page "Expert Plans" draws "Clients and To review": cards on the card colour as
   every list row (round 13, FX-F2), the kind as a
   coloured tag (Question yellow, Approval pink, Plan line beige), the client's name, the time, the client's words in
   curly quotes, a tinted box with the drafted reply or the AI's suggestion, the buttons as pills; the "? · question" chip
   outlined. Notify me: rows with a label and a grey line, the choices as a segmented row. */

.rv-page { max-width: 760px; display: flex; flex-direction: column; gap: 18px; }
.rv-list { display: flex; flex-direction: column; gap: 10px; }
.rv-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--card);
  animation: cm-in var(--m-add) var(--ease-out); transition: opacity var(--m-remove) ease, transform var(--m-remove) ease; }
.rv-card.leaving { opacity: 0; transform: translateX(16px); }
.rv-card header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rv-kind { padding: 2px 9px; border-radius: 6px; font-size: var(--t-xs); font-weight: 600; }
.rv-kind.q { background: var(--try-bg); color: var(--try-d); }
.rv-kind.a { background: var(--care); color: var(--care-d); }
.rv-kind.l { background: var(--soft); color: var(--ink2); }
.rv-name { font-size: var(--t-s); font-weight: 600; color: var(--ink); }
.rv-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.rv-at { font-size: var(--t-xs); color: var(--ink3); }
.rv-quote { margin: 0; font-size: var(--t-s); }
.rv-box { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--field); font-size: var(--t-s); line-height: 1.45; }
.rv-box small { font-size: var(--t-xs); font-weight: 600; color: var(--ink3); }
.rv-card.editing .rv-box { box-shadow: inset 0 0 0 1.5px var(--sage); }
.rv-edit { width: 100%; min-height: 64px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: var(--t-s); line-height: 1.45; resize: vertical; outline: none; }
.rv-q { align-self: flex-start; padding: 2px 9px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px var(--ink3); font-size: var(--t-xs); font-weight: 600; color: var(--ink2); }
.rv-acts { display: flex; gap: 6px; flex-wrap: wrap; }
/* Nothing waiting: All clear stands in the middle of the column, as No clients yet does (Notify me under it). */
.rv-page.clear { margin-inline: auto; }
.rv-list > .emp .pill { background: var(--card); }

/* ---------- Notify me ---------- */
.rv-notify { padding: 6px 16px; border-radius: 16px; background: var(--card); }
.nt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 52px; padding: 8px 0; }
.nt-row + .nt-row, .nt-tg .nt-row, .nt-tg + .nt-row { border-top: 1px solid var(--cardline); }
.nt-t { display: flex; flex-direction: column; line-height: 1.3; }
.nt-t b { font-size: var(--t-sm); font-weight: 600; }
.nt-t small { font-size: var(--t-xs); color: var(--ink3); }
.nt-ok { padding: 3px 10px; border-radius: 999px; background: var(--good-bg); color: var(--good-d); font-size: var(--t-xs); font-weight: 600; }
.nt-link { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--t-xs); }
.nt-link a { color: var(--note-d); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.nt-note { margin: 0 0 6px; font-size: var(--t-xs); color: var(--ink3); }
.nt .ac-seg button { min-height: 30px; padding: 0 12px; font-size: var(--t-xs); }
.nt .ac-seg { flex-wrap: wrap; }

@media (max-width: 880px) {
  .rv-card { padding: 12px 14px; }
}