/* The maker's voice: a pixel speech bubble beside their name. The border is drawn the way pixel art draws a box, four
   offset edges that leave the corners notched; a stepped tail points back at the maker; the words are in the pixel face,
   a block caret while they type and a stepped arrow when a page is done. Ink box, bone edge: the light is the words. */

#rot .rc-byline { flex-wrap: wrap; row-gap: 12px; }

#rot .rc-caption .rc-byline > .tv-say.tv-say {
  --px: 3px;
  --tvs-edge: rgba(255, 250, 248, .82);
  position: relative;
  flex: 0 1 auto; min-width: 190px; max-width: min(470px, 100%);
  margin: var(--px) var(--px) var(--px) calc(var(--px) * 5);
  padding: 8px 14px 10px 12px;
  background: rgba(14, 15, 18, .94);
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--tvs-edge),
    0 var(--px) 0 0 var(--tvs-edge),
    calc(var(--px) * -1) 0 0 0 var(--tvs-edge),
    var(--px) 0 0 0 var(--tvs-edge);
  cursor: pointer; user-select: text;
  opacity: 0; animation: none; transform-origin: 0 50%;
}
#rot .rc-caption .rc-byline > .tv-say.tv-say.on { opacity: 1; animation: tvs-pop 380ms steps(4, end) both; }
@keyframes tvs-pop { 0% { opacity: 0; transform: scale(.55); } 50% { opacity: 1; transform: scale(1.05); } 100% { opacity: 1; transform: none; } }

/* the tail: a stepped arrow, pointing back at the maker */
#rot .tv-say::before {
  content: ''; position: absolute; top: 50%; left: calc(var(--px) * -4);
  width: calc(var(--px) * 3); height: calc(var(--px) * 5); margin-top: calc(var(--px) * -2.5);
  background: var(--tvs-edge);
  clip-path: polygon(calc(var(--px) * 2) 0, 100% 0, 100% 100%, calc(var(--px) * 2) 100%, calc(var(--px) * 2) calc(var(--px) * 4), var(--px) calc(var(--px) * 4), var(--px) calc(var(--px) * 3), 0 calc(var(--px) * 3), 0 calc(var(--px) * 2), var(--px) calc(var(--px) * 2), var(--px) var(--px), calc(var(--px) * 2) var(--px));
}
/* when the bubble has wrapped under the maker, the tail points up at them instead */
#rot .rc-caption .rc-byline > .tv-say.tv-say.below { margin: calc(var(--px) * 5) var(--px) var(--px) var(--px); }
#rot .tv-say.below::before {
  top: calc(var(--px) * -4); left: 14px; margin-top: 0;
  width: calc(var(--px) * 5); height: calc(var(--px) * 3);
  clip-path: polygon(calc(var(--px) * 2) 0, calc(var(--px) * 3) 0, calc(var(--px) * 3) var(--px), calc(var(--px) * 4) var(--px), calc(var(--px) * 4) calc(var(--px) * 2), 100% calc(var(--px) * 2), 100% 100%, 0 100%, 0 calc(var(--px) * 2), var(--px) calc(var(--px) * 2), var(--px) var(--px), calc(var(--px) * 2) var(--px));
}

/* the nameplate says what this is */
#rot .tv-say .tvs-plate { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; font: 500 9px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-45, rgba(255, 250, 248, .45)); }
#rot .tv-say .tvs-plate .px { width: 4px; height: 4px; flex: none; background: var(--g, #2BB673); box-shadow: 0 0 6px var(--g, #2BB673); }

/* the words, in the pixel face, a block caret while they type */
#rot .tv-say .tvs-text { display: block; min-height: 2.7em; font: 700 14px/1.35 'Doto', var(--mono); letter-spacing: .02em; color: var(--bone); white-space: pre-wrap; overflow-wrap: anywhere; }
#rot .tv-say.typing .tvs-text::after { content: ''; display: inline-block; width: .5em; height: 1em; margin-left: 2px; vertical-align: -.14em; background: var(--bone); animation: tvs-caret .7s steps(2, end) infinite; }
@keyframes tvs-caret { 50% { opacity: 0; } }

/* the page is done: a stepped arrow bobs in the corner, as a dialogue box asks you to go on */
#rot .tv-say .tvs-more {
  position: absolute; right: 7px; bottom: 6px; width: calc(var(--px) * 3); height: calc(var(--px) * 2);
  background: var(--bone);
  clip-path: polygon(0 0, 100% 0, 100% var(--px), calc(var(--px) * 2) var(--px), calc(var(--px) * 2) 100%, var(--px) 100%, var(--px) var(--px), 0 var(--px));
  animation: tvs-more .9s steps(2, end) infinite;
}
@keyframes tvs-more { 50% { transform: translateY(2px); } }
#rot .tv-say:hover { --tvs-edge: rgba(255, 250, 248, 1); }

@media (prefers-reduced-motion: reduce) {
  #rot .rc-caption .rc-byline > .tv-say.tv-say.on { animation: none; }
  #rot .tv-say.typing .tvs-text::after, #rot .tv-say .tvs-more { animation: none; }
}

/* The maker's face is the portrait beside their words, so it is larger than a byline avatar was. */
#rot .rc-caption .rc-byline { position: relative; }
#rot .rc-caption .rc-byline .rc-creator-link .rc-avatar { width: 44px; height: 44px; border-radius: 6px; }

/* Follow is a pixel plus on the corner of that face, so the speech bubble has the row. The button is still Codex's and
   still does the following; only its look changes, and its words stay for screen readers. It is laid out first and
   pulled back under the face with a negative margin, then set on the corner with relative offsets (not translate, which
   the like wave animates). The box is a pixel box, notched at the corners like the bubble's; the plus is nine pixels.
   Hovered, the plus lights in the three colours; followed, the edge turns green and the plus becomes a pixel check. */
#rot .rc-caption .rc-byline > .rc-follow {
  --pe: rgba(255, 250, 248, .9);
  order: -1; position: relative; z-index: 2; flex: none;
  width: 14px; height: 14px; min-width: 0; min-height: 0; padding: 0;
  margin: 0 -28px 0 0; left: 33px; top: 18px;
  border: 0; border-radius: 0; background: var(--ink, #0E0F12); color: var(--bone, #FFFAF8);
  font-size: 0 !important; line-height: 0 !important; letter-spacing: 0;
  box-shadow: 0 -2px 0 0 var(--pe), 0 2px 0 0 var(--pe), -2px 0 0 0 var(--pe), 2px 0 0 0 var(--pe);
  cursor: pointer; transition: scale .2s steps(2, end);
}
#rot .rc-caption .rc-byline > .rc-follow::before { content: none; }
/* the nine pixels of the plus, drawn as shadows of one two-pixel square */
#rot .rc-caption .rc-byline > .rc-follow::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 2px; height: 2px; margin: -1px 0 0 -1px;
  background: var(--bone, #FFFAF8);
  box-shadow: 0 -4px var(--bone, #FFFAF8), 0 -2px var(--bone, #FFFAF8), 0 2px var(--bone, #FFFAF8), 0 4px var(--bone, #FFFAF8),
              -4px 0 var(--bone, #FFFAF8), -2px 0 var(--bone, #FFFAF8), 2px 0 var(--bone, #FFFAF8), 4px 0 var(--bone, #FFFAF8);
}
#rot .rc-caption .rc-byline > .rc-follow:hover:not(:disabled) { scale: 1.2; --pe: #fff; }
#rot .rc-caption .rc-byline > .rc-follow:hover:not(:disabled)::after {
  background: #fff;
  box-shadow: 0 -4px var(--r, #F04E4E), 0 -2px var(--r, #F04E4E), 0 2px var(--b, #2E44E6), 0 4px var(--b, #2E44E6),
              -4px 0 var(--g, #2BB673), -2px 0 var(--g, #2BB673), 2px 0 var(--g, #2BB673), 4px 0 var(--g, #2BB673), 0 0 8px rgba(255, 250, 248, .6);
}
/* followed: a green edge and a pixel check */
#rot .rc-caption .rc-byline > .rc-follow[aria-pressed="true"] { --pe: var(--g, #2BB673); }
#rot .rc-caption .rc-byline > .rc-follow[aria-pressed="true"]::after,
#rot .rc-caption .rc-byline > .rc-follow[aria-pressed="true"]:hover:not(:disabled)::after {
  margin: 0 0 0 -2px; background: transparent;
  box-shadow: -4px -2px var(--g, #2BB673), -2px 0 var(--g, #2BB673), 0 2px var(--g, #2BB673), 2px 0 var(--g, #2BB673), 4px -2px var(--g, #2BB673), 6px -4px var(--g, #2BB673), 0 0 8px rgba(43, 182, 115, .55);
}
#rot .rc-caption .rc-byline > .rc-follow:focus-visible { outline: 2px solid var(--bone, #FFFAF8); outline-offset: 4px; }
#rot .rc-caption .rc-byline > .rc-follow:disabled { opacity: .45; cursor: default; }
/* a word on hover, since a plus alone does not say what it does */
#rot .rc-caption .rc-byline > .rc-follow:hover:not(:disabled)::before {
  content: 'Follow'; position: absolute; left: 50%; bottom: calc(100% + 9px); translate: -50% 0;
  padding: 4px 6px 3px; border-radius: 3px; background: rgba(14, 15, 18, .94); border: 1px solid rgba(255, 250, 248, .2);
  font: 500 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone); white-space: nowrap; pointer-events: none;
}
#rot .rc-caption .rc-byline > .rc-follow[aria-pressed="true"]:hover:not(:disabled)::before { content: 'Following'; }

/* the moment you follow: pixels of light in the three colours burst from the corner, and go */
#rot .tvs-burst { position: absolute; z-index: 3; width: 0; height: 0; pointer-events: none; }
#rot .tvs-burst i { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; background: var(--c); box-shadow: 0 0 6px var(--c); animation: tvs-burst 620ms steps(6, end) forwards; }
@keyframes tvs-burst { 0% { translate: 0 0; opacity: 1; } 100% { translate: var(--dx) var(--dy); opacity: 0; } }

@media (max-width: 720px) {
  #rot .rc-caption .rc-byline .rc-creator-link .rc-avatar { width: 34px; height: 34px; }
  #rot .rc-caption .rc-byline > .rc-follow { margin-right: -22px; left: 23px; top: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  #rot .rc-caption .rc-byline > .rc-follow { transition: none; }
  #rot .tvs-burst { display: none; }
}