/* Daily Life Doc, round 13 (zone F2): the Updates tab of a client's page, as the page "Expert Plans" draws it ("From a
   text to Updates"): a card with "Updates", the client's days, and one row per entry (time, kind, values, follow-ups,
   files, "↗ line · Text · Answered", a suggestion with Apply and Skip, the pencil); an app's answers one row per
   question (round 14b, X1). js/updates/*.js. */

.xv.upd { display: flex; flex-direction: column; min-height: 100%; border-radius: 18px; background: var(--card); text-align: left; }
.xv .xbar { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-bottom: 1px solid var(--cardline); }
.xv .xt { font-size: var(--t-sm); font-weight: 600; }
.xv .xt span { font-weight: 400; color: var(--ink3); font-size: var(--t-xs); }
.xv .xbody { flex: 1; padding: 6px 16px 16px; }
.udh { padding: 14px 0 4px; font-size: var(--t-xs); font-weight: 600; color: var(--ink3); }
.ue { display: grid; grid-template-columns: 104px 62px minmax(0, 1fr) 28px; gap: 8px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--cardline); font-size: var(--t-sm); }
.ue.fl { animation: ue-flash 2.4s ease both; }
@keyframes ue-flash { 0%, 30% { background: var(--pc-bg); } 100% { background: transparent; } }
.ue .tm { display: flex; flex-direction: column; padding-top: 2px; font-size: var(--t-xs); color: var(--ink3); white-space: nowrap; }
.ue .tm small { font-size: var(--t-2xs); opacity: .8; }
@media (max-width: 880px) { .ue .tm small { white-space: normal; } }
.ue .uk { justify-self: start; }
.uk { padding: 1px 8px; border-radius: 6px; background: var(--soft); color: var(--ink2); font-size: var(--t-2xs); font-weight: 600; line-height: 20px; white-space: nowrap; }
.uk.k-log { background: var(--try-bg); color: var(--try-d); }
.uk.k-answer { background: var(--good-bg); color: var(--good-d); }
.uk.k-photo, .uk.k-video, .uk.k-voice { background: var(--note); color: var(--note-d); }
.uk.k-call { background: var(--atlas-bg); color: var(--atlas-d); }
.ue .tx { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.um { font-weight: 500; overflow-wrap: anywhere; }
.uq { color: var(--ink2); overflow-wrap: anywhere; }
.ufu { color: var(--ink2); }
/* FX2: the question an answer answers, grey above the client's words. */
.uask { display: block; color: var(--ink2); overflow-wrap: anywhere; }
.ufu b { font-weight: 500; color: var(--ink); }
.umeta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: var(--t-xs); color: var(--ink3); }
.umeta > *:not(:last-child)::after { content: '·'; margin-left: 6px; color: var(--ink3); font-weight: 400; }
.ul { color: var(--note-d); font-weight: 600; font-size: var(--t-xs); text-align: left; }
.us.answered { color: var(--good-d); font-weight: 600; }
.us.corrected { color: var(--note-d); font-weight: 600; }
.us.noreply { color: var(--ink3); font-weight: 600; }
.usug { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.usug .ust { padding: 3px 11px; border-radius: 999px; background: var(--atlas-bg); color: var(--atlas-d); font-size: var(--t-xs); font-weight: 600; }
.usug.busy { opacity: .5; pointer-events: none; }
.usug.done .ust { background: var(--soft); color: var(--ink3); font-weight: 500; }
.uok { color: var(--good-d); font-size: var(--t-xs); font-weight: 600; }
.ufiles { display: flex; flex-wrap: wrap; gap: 6px; }
.uf img { display: block; width: 120px; height: 90px; object-fit: cover; border-radius: 10px; background: var(--field); }
.uf video { display: block; width: 200px; border-radius: 10px; }
.uf audio { display: block; width: 240px; height: 36px; }
.utr { color: var(--ink2); font-style: italic; overflow-wrap: anywhere; }
.ue .ed { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--ink3); }
.ue .ed svg { width: 14px; height: 14px; }
.ue .ed:hover { background: var(--soft); color: var(--ink); }
.uin { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; font-weight: 500; }
.uin input { width: 90px; padding: 4px 8px; border: 0; border-radius: 8px; background: var(--field); font: inherit; color: var(--ink); }
.uhist:empty { display: none; }
.uhist { width: 100%; }
.uhist .hist { margin: 6px 0 2px; }

/* At phone width the row keeps the computer's order on one line: time, kind, the words, the pencil (DR 18). */
@media (max-width: 880px) {
  .xv .xbody { padding: 4px 12px 12px; }
  .ue { grid-template-columns: 64px 56px minmax(0, 1fr) 24px; gap: 6px; }
  .ue .ed { width: 24px; }
}

/* Round 14a (zone Z5): a document of a "file" entry ("File · name.pdf" with Open, F2); a suggestion's List changes
   ("+ item" / "− item", A1); a plan suggestion pink, as in Chat (M7). */
.ufiles:has(.ufd) { max-width: 100%; }
.uf.ufd { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; padding: 4px 4px 4px 12px; border-radius: 12px; background: var(--field); }
.ufn { min-width: 0; font-size: var(--t-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uf.ufd .pill { flex: none; text-decoration: none; color: var(--ink); background: var(--surface); }
.uchg { padding: 2px 9px; border-radius: 999px; font-size: var(--t-xs); font-weight: 500; background: var(--field); color: var(--ink2); }
.uchg.add { background: var(--good-bg); color: var(--good-d); }
.usug.plan .ust { background: var(--care); color: var(--care-d); }

/* Round 14b (zone S): an app's answers one row per question, the question grey and the answer after it (X1); a voice
   note's English line grey under its words (zone V's F3, the look of a past call's English line). */
.um.uqs { display: flex; flex-direction: column; gap: 3px; font-weight: 400; }
.uqa { overflow-wrap: anywhere; font-weight: 500; }
.uqn { margin-right: 4px; color: var(--ink3); font-weight: 400; }
.utr.en { font-style: normal; font-size: var(--t-xs); font-weight: 300; color: var(--ink3); }

/* Fixer FX1 (W1 polish 1): at a phone width a document's name wraps under "File ·" instead of being cut to "File ·…",
   and a suggestion's words or a long item that wrap sit in a rounded box (never a grey blob), in a readable grey. */
.ufn { white-space: normal; overflow-wrap: anywhere; }
.uf.ufd { flex-wrap: wrap; }
.usug .ust, .uchg { border-radius: 12px; }
.usug.done .ust { color: var(--ink2); }