/* bubbles.css — the clay chat bubbles of #old and #day: the person in gold clay, Brain Club on cream paper, buttons in plum clay.
   The same recipe as the hero's phone (home.css .msg). Owned by the builder of #old / #try / #day. Kit tokens only. */

/* ── #old: the one sentence that replaces the pile (large, on the dark scene) ── */
.od-bub{max-width:100%;padding:12px 16px 13px;border-radius:22px;font:500 1rem/1.42 var(--text);overflow-wrap:anywhere;text-wrap:pretty}
.od-bub p{margin:0}
.od-bub--me{justify-self:end;color:var(--plum-700);font-weight:600;border-end-end-radius:7px;background:var(--k-grain),var(--k-gold-clay);box-shadow:var(--k-gold-shadow)}
.od-bub--as{flex:1;min-width:0;color:var(--ink);border-end-start-radius:7px;background:var(--k-paper);box-shadow:var(--k-paper-shadow),0 26px 44px -22px rgba(10,0,6,.75)}
.od-row{display:flex;align-items:flex-end;gap:10px}
.od-ava{width:40px;height:auto;flex:none;filter:drop-shadow(0 8px 8px rgba(10,0,6,.5))}
.od-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.od-acts span{display:inline-flex;align-items:center;height:36px;padding:0 17px;border-radius:999px;font:700 .9rem/1 var(--display)}
.od-yes{color:var(--cream-50);background:var(--k-grain-light),var(--k-plum-clay);box-shadow:var(--k-plum-shadow)}
.od-no{color:var(--plum-600);box-shadow:inset 0 0 0 2px rgba(100,8,46,.32)}

/* ── #day: the phone's thread (small, on the cream screen) ── */
.dy-b{flex:none;max-width:88%;min-width:0;padding:9px 12px 10px;border-radius:18px;font:500 .875rem/1.42 var(--text);overflow-wrap:anywhere}
.dy-b--me{align-self:flex-end;color:var(--plum-700);border-end-end-radius:6px;background:var(--k-grain),var(--k-gold-clay);box-shadow:var(--k-gold-shadow)}
.dy-b--as{align-self:flex-start;color:var(--ink);border-end-start-radius:6px;background:#fff;box-shadow:0 2px 0 rgba(0,0,0,.03),0 10px 16px -10px rgba(110,50,0,.45)}
.dy-new{animation:dy-bin .5s var(--spring) both}
@keyframes dy-bin{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
.dy-sep{flex:none;align-self:center}
.dy-sep span{display:inline-block;padding:5px 11px;border-radius:999px;font:650 .66rem/1 var(--text);letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--ink-3);background:rgba(255,255,255,.78);box-shadow:0 2px 4px -2px rgba(90,40,0,.3)}
/* a card in the thread: a stamp, a title, a list, small clay buttons */
.dy-card{display:grid;gap:6px;width:min(100%,300px)}
.dy-stamp{justify-self:start;padding:3px 8px;border-radius:999px;font:700 .62rem/1.3 var(--text);letter-spacing:.06em;text-transform:uppercase;color:var(--plum-700);background:var(--k-gold-clay);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.dy-task--done .dy-stamp{color:#2a6e45;background:#e1f1d6;box-shadow:none}
.dy-card>b{font:770 .95rem/1.2 var(--display);letter-spacing:-.01em;color:var(--plum-600)}
.dy-card ul{display:grid;gap:5px;font-size:.8rem;color:var(--ink-2)}
.dy-card li{padding-top:5px;box-shadow:inset 0 1px 0 rgba(100,8,46,.07)}
.dy-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.dy-btn{padding:7px 13px;border-radius:999px;font:700 .76rem/1 var(--display);color:var(--plum-600);box-shadow:inset 0 0 0 1.5px rgba(100,8,46,.3);cursor:default}
.dy-btn--pri{color:var(--cream-50);background:var(--k-plum-clay);box-shadow:var(--k-plum-shadow)}
button.dy-btn{cursor:pointer;transition:transform .2s var(--spring),filter .2s}
button.dy-btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.dy-task--done .dy-btn[data-w="proof"]{animation:dy-pulse 2.6s ease-in-out infinite}
/* a link that opens a little page */
.dy-b.dy-link{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;width:min(100%,300px);padding-block:9px; padding-inline:9px 10px;text-align:start;cursor:pointer;transition:transform .25s var(--spring)}
.dy-b.dy-link:hover{transform:translateY(-2px)}
.dy-lk-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;color:var(--gold-300);background:var(--k-grain-light),var(--k-plum-clay);box-shadow:var(--k-plum-shadow)}
.dy-lk-ic .dy-i{width:18px;height:18px}
.dy-lk-tx b{display:block;font:700 .84rem/1.25 var(--text);color:var(--ink)}
.dy-lk-tx small{display:block;font-size:.68rem;color:var(--ink-3);overflow-wrap:anywhere}
.dy-lk-go{padding:6px 11px;border-radius:999px;font:770 .72rem/1 var(--display);color:var(--plum-700);background:var(--k-gold-clay);box-shadow:inset 0 1px 0 rgba(255,255,255,.6);animation:dy-pulse 2.6s ease-in-out infinite}
@keyframes dy-pulse{50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 0 5px rgba(250,201,63,.32)}}
.dy-b.dy-link:focus-visible{outline:3px solid var(--plum-400);outline-offset:2px}
/* pictures, a voice note, a photographed paper */
.dy-gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:min(100%,300px);padding:6px}
.dy-gal figure{margin:0}
.dy-gal img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;background:var(--cream-200)}
.dy-gal figcaption{margin-top:4px;text-align:center;font-size:.66rem;color:var(--ink-3)}
.dy-voice{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.dy-play{position:relative;width:28px;height:28px;flex:none;border-radius:50%;background:var(--k-plum-clay);box-shadow:0 3px 6px -3px rgba(60,6,30,.6)}
.dy-play::after{content:"";position:absolute;inset-inline-start:11px;top:8px;border-inline-start:9px solid var(--cream-50);border-top:6px solid transparent;border-bottom:6px solid transparent}
.dy-wave{flex:1 1 auto;height:22px;min-width:60px;border-radius:3px;opacity:.55;background:repeating-linear-gradient(90deg,var(--plum-700) 0 2px,transparent 2px 5px);-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.dy-voice time{font:650 .7rem/1 var(--text);font-variant-numeric:tabular-nums;color:var(--plum-700)}
.dy-paper{display:grid;gap:7px;align-content:start;width:124px;height:88px;margin-bottom:8px;padding:12px 12px 0;border-radius:4px;background:#fffdf6;transform:rotate(-2deg);box-shadow:0 8px 16px -8px rgba(90,40,0,.55)}
.dy-paper i{display:block;height:4px;border-radius:2px;background:var(--plum-100)}
.dy-paper i:first-child{width:55%;background:var(--plum-300)}
.dy-paper i:last-child{width:70%;height:6px;background:var(--plum-300)}
@media (prefers-reduced-motion:reduce){.dy-new,.dy-lk-go,.dy-task--done .dy-btn[data-w="proof"]{animation:none}.dy-b.dy-link,button.dy-btn{transition:none}}