/* The talk under a piece: pixel cards riding the picture's bottom-right corner, the way a live stream's chat rides
   its frame. Ink cards with the bubble's notched pixel edge, a small square face, the words in the pixel type with a
   block caret while they type. A hearted card takes a pixel heart on its corner with a burst of the three colours as
   light. The maker's own reply is set from the left, their face first, a hairline in green. Three cards at a time. */

#rot .rc-viewer > .tv-talk {
  position: absolute; inset: 0; margin: auto; width: var(--tvf-w, 100%); height: var(--tvf-h, 100%);
  pointer-events: none; z-index: 5; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; gap: 8px;
  padding: 0 14px 58px 0; box-sizing: border-box;
}
#rot .tv-talk .tk-card {
  --px: 2px; --edge: rgba(255, 250, 248, .55);
  position: relative; display: flex; align-items: flex-start; gap: 9px;
  max-width: min(320px, 70%); padding: 7px 10px 8px 8px; margin: var(--px);
  background: rgba(14, 15, 18, .86); color: var(--bone);
  box-shadow: 0 calc(var(--px) * -1) 0 0 var(--edge), 0 var(--px) 0 0 var(--edge), calc(var(--px) * -1) 0 0 0 var(--edge), var(--px) 0 0 0 var(--edge);
  opacity: 0; transform: translateX(18px); transition: opacity .22s steps(3, end), transform .32s steps(4, end), filter .4s ease;
}
#rot .tv-talk .tk-card.in { opacity: 1; transform: none; }
#rot .tv-talk .tk-card.gone { opacity: 0; transform: translateY(-14px); filter: blur(1px); transition: opacity .5s ease, transform .5s var(--os-settle, cubic-bezier(.22, .8, .22, 1)), filter .5s ease; }
#rot .tv-talk .tk-card.who-maker { --edge: var(--g, #2BB673); align-self: flex-start; flex-direction: row; }
#rot .tv-talk .tk-card.reply::before { content: ''; position: absolute; left: -12px; top: 14px; width: 6px; height: 6px; background: var(--g, #2BB673); box-shadow: 0 0 8px var(--g, #2BB673); clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* faces: small, square, hairlined; Katari's is her head from the cutout; Kagi is drawn; no picture is a letter on ink */
#rot .tv-talk .tk-face { flex: none; width: 26px; height: 26px; overflow: hidden; border: 1px solid rgba(255, 250, 248, .3); background: #15161A; display: grid; place-items: center; font: 700 12px/1 'Doto', var(--mono); color: var(--bone-70); }
#rot .tv-talk .tk-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
#rot .tv-talk .tk-face.tk-katari img { object-position: 50% 9%; transform: scale(1.9); transform-origin: 50% 12%; }
#rot .tv-talk .tk-face.tk-kagi svg { width: 26px; height: 26px; display: block; }

#rot .tv-talk .tk-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#rot .tv-talk .tk-eyebrow { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font: 500 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-45, rgba(255, 250, 248, .45)); }
#rot .tv-talk .tk-name { color: var(--bone-70, rgba(255, 250, 248, .7)); }
#rot .tv-talk .tk-tag { color: var(--g, #2BB673); }
#rot .tv-talk .tk-tag.tk-hearted { color: var(--r, #F04E4E); }
#rot .tv-talk .tk-to { color: var(--bone-45, rgba(255, 250, 248, .45)); }
#rot .tv-talk .tk-to::before { content: '↳ '; color: var(--g, #2BB673); }
#rot .tv-talk .tk-ex { font-weight: 500; color: var(--ink, #0E0F12); background: rgba(255, 200, 120, .85); padding: 2px 4px 1px; letter-spacing: .12em; }
#rot .tv-talk .tk-text { font: 700 13px/1.35 'Doto', var(--mono); letter-spacing: .02em; color: var(--bone); white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.35em; }
#rot .tv-talk .tk-card.typing .tk-text::after { content: ''; display: inline-block; width: .5em; height: 1em; margin-left: 2px; vertical-align: -.14em; background: var(--bone); animation: tk-caret .7s steps(2, end) infinite; }
@keyframes tk-caret { 50% { opacity: 0; } }

/* the maker's heart landing on a card: a pixel heart on the corner, and pixels of light in the three colours that go */
#rot .tv-talk .tk-heart { position: absolute; right: -8px; top: -9px; width: 14px; height: 14px; }
#rot .tv-talk .tk-heart b {
  position: absolute; left: 4px; top: 5px; width: 2px; height: 2px; background: var(--r, #F04E4E);
  /* a five-by-five pixel heart, drawn as shadows of one pixel */
  box-shadow: -2px -2px var(--r), 2px -2px var(--r), -4px 0 var(--r), -2px 0 var(--r), 0 0 var(--r), 2px 0 var(--r), 4px 0 var(--r), -2px 2px var(--r), 0 2px var(--r), 2px 2px var(--r), 0 4px var(--r), 0 0 10px rgba(240, 78, 78, .8);
  animation: tk-heart-land .5s steps(4, end) both;
}
@keyframes tk-heart-land { 0% { transform: scale(2.4); opacity: 0; } 40% { transform: scale(.8); opacity: 1; } 100% { transform: none; opacity: 1; } }
#rot .tv-talk .tk-heart s { position: absolute; left: 6px; top: 6px; width: 3px; height: 3px; background: var(--c); box-shadow: 0 0 6px var(--c); animation: tk-burst .6s steps(5, end) .1s both; }
@keyframes tk-burst { 0% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
#rot .tv-talk .tk-card.hearted { --edge: rgba(255, 250, 248, .8); }

/* after the talk: a small counter, the only thing here that can be pressed */
#rot .tv-talk .tk-pill {
  pointer-events: auto; cursor: pointer; align-self: flex-end;
  display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px 0 8px;
  border: 1px solid rgba(255, 250, 248, .25); border-radius: 4px; background: rgba(14, 15, 18, .84); color: var(--bone-70);
  font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  opacity: 0; animation: tk-pill .4s ease .1s both;
}
@keyframes tk-pill { to { opacity: 1; } }
#rot .tv-talk .tk-pill .px { width: 5px; height: 5px; background: var(--g, #2BB673); box-shadow: 0 0 8px var(--g, #2BB673); }
#rot .tv-talk .tk-pill b { font: 800 13px/1 'Doto', var(--mono); color: var(--bone); letter-spacing: .04em; }
#rot .tv-talk .tk-pill s { text-decoration: none; color: rgba(255, 200, 120, .9); }
#rot .tv-talk .tk-pill:hover { border-color: var(--bone); color: var(--bone); }

/* the channel's controls on a real card: a pixel heart to press, and a way to answer as the channel */
#rot .tv-talk .tk-ctl { display: flex; gap: 10px; margin-top: 5px; pointer-events: auto; }
#rot .tv-talk .tk-do { border: 0; background: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font: 500 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-45, rgba(255, 250, 248, .45)); }
#rot .tv-talk .tk-do:hover { color: var(--bone); }
#rot .tv-talk .tk-do:disabled { opacity: .5; cursor: default; }
#rot .tv-talk .tk-do-heart i { width: 9px; height: 9px; background: currentColor; clip-path: polygon(30% 0, 50% 20%, 70% 0, 100% 30%, 100% 50%, 50% 100%, 0 50%, 0 30%); }
#rot .tv-talk .tk-do-heart[aria-pressed="true"] { color: var(--r, #F04E4E); }

/* the way in: the row of pills, and the one-line composer */
#rot .tv-talk .tk-row { display: flex; gap: 8px; align-self: flex-end; pointer-events: auto; }
#rot .tv-talk .tk-pill .px.b { background: var(--b, #2E44E6); box-shadow: 0 0 8px var(--b, #2E44E6); }
#rot .tv-talk .tk-compose { pointer-events: auto; align-self: flex-end; display: flex; flex-direction: column; gap: 6px; width: min(360px, 80%); padding: 8px 10px; background: rgba(14, 15, 18, .92); border: 1px solid rgba(255, 250, 248, .28); border-radius: 4px; animation: tk-pill .25s ease both; }
#rot .tv-talk .tk-compose.as-channel { border-color: var(--g, #2BB673); }
#rot .tv-talk .tk-compose .tk-line { display: flex; gap: 6px; align-items: center; }
#rot .tv-talk .tk-compose input { flex: 1; min-width: 0; height: 28px; padding: 0 8px; border: 1px solid rgba(255, 250, 248, .2); border-radius: 3px; background: rgba(255, 250, 248, .05); color: var(--bone); font: 700 13px/1 'Doto', var(--mono); letter-spacing: .02em; outline: none; }
#rot .tv-talk .tk-compose input:focus { border-color: var(--bone); }
#rot .tv-talk .tk-compose button { height: 28px; padding: 0 9px; border: 1px solid rgba(255, 250, 248, .25); border-radius: 3px; background: none; color: var(--bone-70); font: 500 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
#rot .tv-talk .tk-compose button[type="submit"] { background: var(--bone); color: var(--ink, #0E0F12); border-color: var(--bone); }
#rot .tv-talk .tk-compose button[data-tk="cancel"] { width: 28px; padding: 0; font-size: 14px; }
#rot .tv-talk .tk-compose.failed .tk-eyebrow { color: var(--r, #F04E4E); }

/* the talk yields to the tune-in and to a pointer over the frame's controls */
#rot .rc-viewer.rc-tv-tuning > .tv-talk { opacity: 0; transition: opacity .2s; }
@media (max-width: 720px) { #rot .rc-viewer > .tv-talk { padding-bottom: 50px; } #rot .tv-talk .tk-card { max-width: 82%; } #rot .tv-talk .tk-text { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) {
  #rot .tv-talk .tk-card, #rot .tv-talk .tk-card.gone { transition: opacity .2s; transform: none; filter: none; }
  #rot .tv-talk .tk-heart b, #rot .tv-talk .tk-heart s, #rot .tv-talk .tk-card.typing .tk-text::after, #rot .tv-talk .tk-pill { animation: none; }
  #rot .tv-talk .tk-heart s { display: none; } #rot .tv-talk .tk-pill { opacity: 1; }
}