/* Стили карточек в ленте «Разговора»: напоминания во всю ширину, свёрнутая строка «чем ответили и когда», утро, вечер, «Когда поставить?» (часть 2, этапы 2.1 и 2.3; SPEC-NEW-LOOK-2, 1.2–1.4).
   Файл наполняют этапы 2.1 (общая основа: карточка во всю ширину, строка fold, «Вернуть», четыре вида напоминаний — этот блок) и 2.3 (утро, вечер, ask_date — свой блок ниже, когда дойдёт
   очередь: 2.3 начинается после 2.1, поэтому конфликта в файле нет). Базовые стили сообщений ассистента (.m-nudge, .nd-*) — в 72-talk.css: файл подключён после него и переопределяет то,
   что у карточки во всю ширину другое. Разметку даёт web/js/112-feed-nudges.js; макет — design/новый-вид/часть-2/png/03-напоминания.png.
   Только переменные из 10-tokens.css (свои — в блоках «часть 2 · 2.1» и «часть 2 · 2.3»): цветов, радиусов и размеров текста числами здесь быть не должно (сторож — tests/web-tokens.test.ts). */

/* ================= часть 2 · 2.1 · начало — карточка, строка fold, четыре вида напоминаний ================= */

/* ---------- карточка во всю ширину: значок в круге слева, справа подпись, название, пояснение и ряд кнопок ---------- */
.talk .m-nudge { max-width: none; }
.talk .m-nudge .bot-body {
  display: flex; align-items: flex-start; gap: var(--sp-12); padding: var(--sp-12);
  border: 1px solid var(--c-edge); border-radius: var(--r-16);
}
.talk .m-nudge .fd-ic {
  flex: none; display: grid; place-items: center; width: var(--fd-ic); height: var(--fd-ic);
  border-radius: var(--r-round); background: var(--c-card); color: var(--c-text);
}
.talk .m-nudge .fd-ic .ico { width: var(--fd-ic-glyph); height: var(--fd-ic-glyph); }
.talk .m-nudge .fd-main { flex: 1; min-width: 0; }
.talk .m-nudge .nd-aside { margin-left: auto; }
.talk .m-nudge .nd-title { margin-top: var(--sp-2); font-size: var(--fs-lead); line-height: var(--lh-lead); }
/* название — кнопка там, где нет «Открыть» («Закончили?» и «жду ответа») */
.talk .m-nudge .nd-open { display: block; width: 100%; padding: 0; text-align: left; }
.talk .m-nudge .nd-open:active { opacity: .7; }

/* ряд кнопок: колонки одной ширины; не помещаются — кнопка целиком уходит на вторую строку, слова внутри кнопки не рвутся (min-content); главная — светлая заливка, остальные — тёмная */
.talk .m-nudge .nd-btns { display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-top: var(--sp-10); }
.talk .m-nudge .nd-btn {
  flex: 1 1 var(--fd-btn-min); min-width: min-content; min-height: var(--tap); padding: 0 var(--sp-8);
  border: 0; border-radius: var(--r-10); background: var(--c-card); color: var(--c-text);
  font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-regular); overflow-wrap: normal; word-break: normal;
}
.talk .m-nudge .nd-btn:active { background: var(--c-raised); }
.talk .m-nudge .nd-btn.is-main { background: var(--c-text); color: var(--c-inverse); font-weight: var(--fw-semibold); }
.talk .m-nudge .nd-btn.is-main:active { opacity: .85; }
.talk .m-nudge .nd-btn[disabled] { opacity: .5; }

/* ---------- срочное: красная карточка со значком «!», подпись заглавными, «повтор N из M» справа, главная кнопка вдвое шире ---------- */
.talk .m-nudge.is-urgent .bot-body {
  padding: calc(var(--sp-12) - var(--fd-urgent-bw) + 1px); border: var(--fd-urgent-bw) solid var(--c-urgent-line); background: var(--c-urgent-bg);
  box-shadow: 0 0 var(--fd-glow) color-mix(in srgb, var(--c-urgent-line) 35%, transparent);
}
.talk .m-nudge.is-urgent .fd-ic { background: var(--c-urgent-line); color: var(--c-urgent-bg); }
.talk .m-nudge.is-urgent .nd-top { color: var(--c-urgent-text); }
.talk .m-nudge.is-urgent .nd-tag { color: var(--c-urgent-text); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: var(--fw-bold); }
.talk .m-nudge.is-urgent .nd-title { font-size: var(--fs-strong); line-height: var(--lh-strong); font-weight: var(--fw-bold); }
.talk .m-nudge.is-urgent .nd-meta { color: var(--c-urgent-text); }
.talk .m-nudge.is-urgent .nd-btn.is-main { flex-grow: 2; }
.talk .m-nudge.is-urgent .nd-btn { border: 1px solid var(--c-urgent-line); background: transparent; color: var(--c-text); }
.talk .m-nudge.is-urgent .nd-btn:active { background: var(--c-urgent-line); }
.talk .m-nudge.is-urgent .nd-btn.is-main { border-color: transparent; background: var(--c-text); color: var(--c-urgent-bg); font-weight: var(--fw-bold); }
/* нажатие на уведомление подсвечивает и срочную карточку (рамка акцентного цвета поверх красной) */
.talk .m-nudge.is-hit .bot-body { box-shadow: 0 0 0 var(--sp-2) var(--c-accent); border-color: var(--c-accent); }
.talk .m-nudge.is-urgent.is-hit .bot-body { box-shadow: 0 0 0 var(--sp-2) var(--c-accent), 0 0 var(--fd-glow) color-mix(in srgb, var(--c-urgent-line) 35%, transparent); }

/* ---------- свёрнутая строка «чем ответили и когда» (вид fold): «✓ 11:02 · Позвонить перевозчику — сделал · Вернуть» ---------- */
.talk .m-fold {
  display: flex; align-items: center; gap: var(--sp-8); min-height: var(--fd-fold-h); padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-10);
  border-radius: var(--r-10); background: var(--c-surface); background: color-mix(in srgb, var(--c-surface) 60%, var(--c-bg)); color: var(--c-text-2);
  font-size: var(--fs-small); line-height: var(--lh-small);
}
.talk .m-fold .fd-ic { flex: none; display: grid; place-items: center; color: var(--c-done); }
.talk .m-fold .fd-ic .ico { width: var(--fd-fold-glyph); height: var(--fd-fold-glyph); }
.talk .m-fold .fd-ic.is-doing { color: var(--c-doing); }
.talk .m-fold .fd-ic.is-snooze { color: var(--c-snooze); }
.talk .m-fold .fd-ic.is-nudge { color: var(--c-accent); }
.talk .m-fold .fd-ic.is-drop { color: var(--c-drop); }
.talk .m-fold .fd-text { flex: 1; min-width: 0; padding: var(--sp-6) 0; overflow-wrap: anywhere; }
.talk .m-fold .fd-undo {
  position: relative; flex: none; min-height: var(--tap-chip); padding: 0 var(--sp-8);
  color: var(--c-accent); font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-medium);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;   /* акцент равен цвету текста — ссылку отличает подчёркивание */
}
.talk .m-fold .fd-undo::after { content: ""; position: absolute; inset: calc(-1 * var(--sp-4)) 0; }   /* зона касания выше видимой кнопки */
.talk .m-fold .fd-undo:active { opacity: .6; }
/* вернули: строка серая, «Вернуть» нет */
.talk .m-fold.is-gone { opacity: .7; }
.talk .m-fold.is-gone .fd-ic { color: var(--c-text-2); }

/* ================= часть 2 · 2.1 · конец ================= */

/* ==== 2.3: утро, вечер, вопрос о дате ==== */
/* Три карточки без значка слева (макеты 01 и 04): подпись со временем, название, строки с кнопками, внизу ряд кнопок. Разметку даёт web/js/113-feed-day.js.
   Основа (.m-nudge, .nd-top, .nd-btns, .nd-btn) — выше в этом файле и в 72-talk.css. Кнопки внутри строк — рамкой: фон строки и фон кнопки карточки совпали бы. */
.talk .m-nudge .dy-title { margin-top: var(--sp-2); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.talk .m-nudge .dy-q { margin-top: var(--sp-2); font-size: var(--fs-body); line-height: var(--lh-body); }
.talk .m-nudge .dy-sub { margin-top: var(--sp-12); }
.talk .m-nudge .dy-mute { color: var(--c-text-2); }

/* название дела: кнопка (открывает карточку дела), текст слева */
.talk .m-nudge .dy-name { flex: 1; min-width: 0; padding: 0; text-align: left; font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.talk .m-nudge button.dy-name:active { opacity: .7; }

/* срочное красной строкой, «НА ДЕНЬ» жёлтой */
.talk .m-nudge .dy-flag {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-8); margin-top: var(--sp-8); padding: var(--sp-8) var(--sp-10);
  border: 1px solid transparent; border-radius: var(--r-10); font-size: var(--fs-sub); line-height: var(--lh-sub);
}
.talk .m-nudge .dy-flag .dy-txt { min-width: 0; overflow-wrap: anywhere; }
.talk .m-nudge .dy-flag .dy-k { flex: none; font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); }
.talk .m-nudge .dy-flag.is-urgent { border-color: var(--c-urgent-line); background: var(--c-urgent-bg); }
.talk .m-nudge .dy-flag.is-urgent .dy-k { color: var(--c-urgent-text); }
.talk .m-nudge .dy-flag.is-day { border-color: var(--c-allday-line); background: var(--c-allday-bg); color: var(--c-allday-text); }
.talk .m-nudge .dy-flag.is-day .dy-k { color: var(--c-allday); }

/* строка «Со вчера · дело [На сегодня]» и строка дела с тремя кнопками («Не сделано», «Когда поставить?») */
.talk .m-nudge .dy-row { display: flex; align-items: center; gap: var(--sp-8); margin-top: var(--sp-6); padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-10); border-radius: var(--r-10); background: var(--c-card); }
.talk .m-nudge .dy-item { margin-top: var(--sp-6); padding: var(--sp-8) var(--sp-10); border-radius: var(--r-10); background: var(--c-card); }
.talk .m-nudge .dy-itemname { display: flex; align-items: baseline; gap: var(--sp-8); }
.talk .m-nudge .dy-day { flex: none; font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-medium); color: var(--c-allday); }
.talk .m-nudge .dy-btns { display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-top: var(--sp-6); }
.talk .m-nudge .dy-row-end { display: flex; margin-top: var(--sp-6); }

/* малые кнопки внутри строк */
.talk .m-nudge .nd-btn.dy-sm {
  flex: none; min-height: var(--tap-chip); padding: 0 var(--sp-10); border: 1px solid var(--c-line); border-radius: var(--r-8); background: transparent;
  font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-regular);
}
.talk .m-nudge .nd-btn.dy-sm:active { background: var(--c-raised); }
.talk .m-nudge .nd-btn.dy-sm.is-main { border-color: transparent; background: var(--c-text); color: var(--c-inverse); font-weight: var(--fw-semibold); }
.talk .m-nudge .nd-btn.dy-sm.is-main:active { opacity: .85; }
.talk .m-nudge .nd-btn.dy-sm.is-quiet { border-color: transparent; color: var(--c-text-2); }

/* вечер: полоса «сделано» и низ — «Завтра N дел» с «Открыть» и «Понятно» */
.talk .m-nudge .dy-bar { height: var(--dy-bar-h); margin-top: var(--sp-8); border-radius: var(--r-pill); background: var(--c-card); overflow: hidden; }
.talk .m-nudge .dy-bar i { display: block; width: var(--dy-pct, 0%); height: 100%; border-radius: var(--r-pill); background: var(--c-done); }
.talk .m-nudge .dy-next { display: flex; align-items: center; gap: var(--sp-10); margin-top: var(--sp-10); padding-top: var(--sp-10); border-top: 1px solid var(--c-line); }
.talk .m-nudge .dy-next-t { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--fs-sub); line-height: var(--lh-sub); overflow-wrap: anywhere; }
.talk .m-nudge .dy-next-t b { font-weight: var(--fw-semibold); }
.talk .m-nudge .dy-next-t span { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-text-2); }
.talk .m-nudge .dy-next-b { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-6); }
/* ==== 2.3 · конец ==== */