/* Daily Life Doc, round 10 (zone H; the page "One chat", Parts 8 and 11): the look of the character on the
   patient's Today (js/today/char.js, js/today/char-draw.js). Round 12 (zone X): it stands only in the Character
   block of the new Today ("middle": large and centred, with its quiet line under it); the corner of the header and
   the theme's Top went with the old Today. The bubble (say): the one line after a tap. Reduce motion: no pulse, no
   pop, no rise. */

.char { position: relative; }
.char-bd { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; border-radius: 50%; }
.char-bd:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.char-bd svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* The leaves and the flower grow in with a small spring. */
.char-bd [data-st] { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .55s cubic-bezier(.3, 1.7, .5, 1); }
.char-bd [data-st].off { transform: scale(0); }
/* Thinking: three dots pulse one after the other. */
.char-bd .dots { fill: var(--today-d); } /* brown on paper, light on the dark page */
.char-bd .dots circle { transform-box: fill-box; transform-origin: center; animation: char-dots 1.2s ease-in-out infinite; }
.char-bd .dots .d2 { animation-delay: .2s; }
.char-bd .dots .d3 { animation-delay: .4s; }
@keyframes char-dots { 0%, 100% { transform: scale(.55); opacity: .45; } 50% { transform: scale(1); opacity: 1; } }
/* The red dot, ringed in the page's paper so it reads on the green body in light and dark. */
.char-bd .cdot { fill: var(--red); stroke: var(--bg); transform-box: fill-box; transform-origin: center; }
.char-bd .cdot.in { animation: char-pop 360ms var(--ease-spring); }
@keyframes char-pop { from { transform: scale(0); } }

/* ---------- In the middle of an empty Today ---------- */
.char[data-where="middle"] { display: grid; justify-items: center; gap: 10px; margin: 28px auto 8px; text-align: center; }
.char[data-where="middle"] .char-bd { width: 160px; height: 160px; border-radius: 28px; }
.char-line { transition: opacity 200ms ease; max-width: 300px; margin: 0; font-size: var(--t-s); line-height: 1.45; color: var(--ink2); white-space: pre-line; }
/* While the bubble shows, the quiet line under it steps back, so the two never read over each other. */
.char[data-where="middle"]:has(.char-say.show) .char-line { opacity: 0; }
@media (max-width: 350px) { .char[data-where="middle"] .char-bd { width: 132px; height: 132px; } }

/* ---------- The one line after a tap ---------- */
.char-say { position: absolute; z-index: 5; max-width: 220px; width: max-content; padding: 8px 12px; border-radius: 14px; background: var(--ink); color: var(--bg);
  font-size: var(--t-sm); font-weight: 500; line-height: 1.35; text-align: left; pointer-events: none; opacity: 0; transform: translateY(6px) scale(.96);
  transition: opacity 200ms ease, transform 260ms var(--ease-spring); box-shadow: 0 10px 24px -14px var(--shadow); }
.char-say:empty { display: none; }
.char-say.show { opacity: 1; transform: none; }
.char[data-where="middle"] .char-say { top: 150px; left: 50%; margin-left: -110px; width: 220px; text-align: center; }
@media (max-width: 350px) { .char[data-where="middle"] .char-say { top: 124px; } }

@media (prefers-reduced-motion: reduce) {
  .char-bd .dots circle, .char-bd .cdot.in { animation: none; }
  .char-bd [data-st] { transition: none; }
  .char-say { transition: none; transform: none; }
}

/* Cloud's sun turns its rays slowly; still with reduce motion (and the one loop does not run then either). */
.char-bd [data-kind="cloud"] .rays { transform-box: view-box; transform-origin: 56px 92px; animation: char-rays 24s linear infinite; }
@keyframes char-rays { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .char-bd [data-kind="cloud"] .rays { animation: none; } }