/* ===========================================================
   Cloud Vault · Sky Stream thread reader
   Reading a thread is a descent through the sky: posts are
   cloud speech-bubbles drifting left and right, the OP shines
   in a soft sunburst at the top, and an altitude rail with a
   flying Dash tracks how deep you've scrolled. The sky dusks
   the further down you fly. Pairs with threads.css.
   =========================================================== */

.cv-reader { position: relative; }

/* --- nav planks (top & bottom) --- */
.cvr-plank {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 13px;
  padding: 9px 11px;
  background: linear-gradient(#f4fbff, #dbeeff);
  border: 2px solid #74b6ec;
  border-radius: 10px;
}
.cvr-plank--bottom { margin: 14px 0 0; }
.cvr-btn {
  padding: 7px 13px;
  border: 2px solid #58aeee;
  border-radius: 999px;
  background: linear-gradient(#ffffff, #dbeeff);
  color: var(--deep);
  font-weight: 700;
  text-decoration: none;
  font-size: 13.5px;
  white-space: nowrap;
}
.cvr-btn:hover,
.cvr-btn:focus-visible { border-color: var(--pink); color: var(--pink); }
.cvr-plank__meta { flex: 1 1 230px; min-width: 0; text-align: center; }
.cvr-plank__meta h2 {
  font-family: "Gochi Hand", cursive;
  font-size: 23px;
  line-height: 1;
  color: var(--deep);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cvr-plank__meta p { font-size: 11.5px; color: #3a5bb0; margin-top: 3px; }
.cvr-plank__meta p b { color: #1d69c7; }

/* --- the sky: rail + stream, dusking downward --- */
.cvr-sky {
  position: relative;
  border: 2px solid #74b6ec;
  border-radius: 12px;
  padding: 22px 16px 26px 58px;
  overflow: hidden;
  background: linear-gradient(180deg,
    #cfeaff 0%, #a8d7fa 22%, #8ac4f2 45%, #79aee8 68%, #7d9ade 86%, #8f97d6 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45);
}

/* altitude rail */
.cvr-rail {
  position: absolute;
  left: 12px;
  top: 20px;
  bottom: 20px;
  width: 34px;
  pointer-events: none;
}
.cvr-rail::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 26px;
  bottom: 26px;
  width: 4px;
  transform: translateX(-50%);
  border-radius: 4px;
  background: linear-gradient(180deg, #ff5b6e, #ff9f45, #ffd84d, #5fcf74, #3fd0e6, #4f8df0, #9b6bff);
  opacity: .6;
}
.cvr-rail__cap {
  position: absolute;
  left: -6px;
  right: -6px;
  text-align: center;
  font-family: "Press Start 2P", monospace;
  font-size: 6.5px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(20, 60, 130, .6);
  background: rgba(29, 105, 199, .6);
  border-radius: 4px;
  padding: 3px 0;
}
.cvr-rail__cap--top { top: 0; }
.cvr-rail__cap--bottom { bottom: 0; }
.cvr-rail__tick {
  position: absolute;
  left: -6px;
  right: -6px;
  text-align: center;
  font-style: normal;
  font-family: "Press Start 2P", monospace;
  font-size: 6px;
  color: #eaf5ff;
  text-shadow: 0 1px 2px rgba(20, 60, 130, .6);
  background: rgba(29, 105, 199, .38);
  border-radius: 4px;
  padding: 2px 0;
}
.cvr-rail__sprite {
  position: absolute;
  left: -5px;
  top: 4%;
  width: 44px;
  transition: top .25s ease-out;
  filter: drop-shadow(0 3px 5px rgba(20, 60, 130, .4));
}

/* --- the stream --- */
.cvr-stream {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* OP sunburst halo */
.cvr-op {
  position: relative;
  align-self: center;
  max-width: min(640px, 100%);
}
.cvr-op::before {
  content: "";
  position: absolute;
  inset: -30px -34px -26px;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-conic-gradient(from 8deg, rgba(255, 232, 120, .18) 0 9deg, transparent 9deg 18deg),
    radial-gradient(ellipse at 50% 38%, rgba(255, 242, 170, .38), transparent 68%);
  border-radius: 44px;
}
.cvr-op__flag {
  position: absolute;
  top: -12px;
  left: 22px;
  z-index: 3;
  font-family: "Press Start 2P", monospace;
  font-size: 7.5px;
  letter-spacing: 1px;
  color: #7a3f00;
  background: linear-gradient(#ffe65b, #ffb01f);
  border: 2px solid #e89a00;
  border-radius: 999px;
  padding: 4px 10px;
}

/* cloud speech bubbles — sized to their content */
.cvr-post {
  position: relative;
  z-index: 1;
  width: fit-content;
  min-width: min(300px, 100%);
  max-width: min(600px, 100%);
  background: #fff;
  border: 2px solid #a5d3f6;
  border-radius: 22px;
  padding: 11px 15px 12px;
  box-shadow: 0 3px 0 rgba(213, 236, 255, .85), 0 8px 18px rgba(24, 76, 150, .22);
  overflow-wrap: anywhere;
}
.cvr-post--l { align-self: flex-start; }
.cvr-post--r { align-self: flex-end; }
.cvr-post--op { border-color: #ffb01f; width: 100%; }

/* cloud tail: two puffs under the bubble, on the drift side */
.cvr-post::before,
.cvr-post::after {
  content: "";
  position: absolute;
  background: #fff;
  border: 2px solid #a5d3f6;
  border-top: none;
}
.cvr-post::before { bottom: -12px; width: 26px; height: 15px; border-radius: 0 0 18px 18px; }
.cvr-post::after { bottom: -20px; width: 13px; height: 9px; border-radius: 0 0 10px 10px; }
.cvr-post--l::before, .cvr-post--op::before { left: 32px; }
.cvr-post--l::after, .cvr-post--op::after { left: 24px; }
.cvr-post--r::before { right: 32px; }
.cvr-post--r::after { right: 24px; }
.cvr-post--op::before, .cvr-post--op::after { border-color: #ffb01f; }

/* deep-link / quote-jump highlight */
.cvr-post.is-target {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(255, 79, 200, .35), 0 8px 18px rgba(24, 76, 150, .22);
}
.cvr-post.is-target::before, .cvr-post.is-target::after { border-color: var(--pink); }

/* post header */
.cvr-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1.5px dashed #c3e2fa;
  font-size: 11.5px;
}
.cvr-name { font-family: "Gochi Hand", cursive; font-size: 17px; color: #1d69c7; }
.cvr-post--op .cvr-name { color: #c77800; }
.cvr-trip { font-family: "Courier New", monospace; font-size: 11px; color: #3d9b57; }
.cvr-subject { font-weight: 700; color: #b8770a; }
.cvr-date { color: #6f93c9; }
.cvr-num {
  margin-left: auto;
  font-family: "Press Start 2P", monospace;
  font-size: 7.5px;
  color: #58aeee;
  text-decoration: none;
  padding: 3px 6px;
  border: 1.5px dashed transparent;
  border-radius: 999px;
  white-space: nowrap;
}
.cvr-num:hover { color: var(--pink); border-color: #ffb9e4; }

/* body */
.cvr-body { font-size: 14px; line-height: 1.55; color: #123e86; }
.cvr-body .cvr-text:empty { display: none; }

/* the quote system (classes come straight from the scraped data) */
.cv-reader .thread-quotelink,
.cvr-peek .thread-quotelink {
  color: #d62aa0;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cv-reader .thread-quotelink:hover,
.cvr-peek .thread-quotelink:hover { color: #ff4fc8; background: rgba(255, 79, 200, .1); border-radius: 4px; }
.cv-reader .thread-quotelink--dead,
.cvr-peek .thread-quotelink--dead { color: #9b8ab0; font-weight: 400; text-decoration: line-through; }
.cv-reader .thread-link,
.cvr-peek .thread-link { color: #2448c9; font-weight: 400; word-break: break-all; }
.cv-reader .thread-greentext,
.cvr-peek .thread-greentext { color: #2f9e44; }

/* media: a photo hanging under the words like a kite */
.cvr-media {
  display: block;
  width: fit-content;
  max-width: min(280px, 100%);
  margin: 8px 0 2px;
  background: #fdfeff;
  border: 2px solid #cfe9ff;
  border-radius: 12px;
  padding: 5px 5px 6px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(24, 76, 150, .2);
  transform: rotate(-1deg);
  transition: transform .14s ease;
}
.cvr-post--r .cvr-media { transform: rotate(1deg); margin-left: auto; }
.cvr-media:hover { border-color: var(--pink); transform: rotate(0); }
.cvr-media img { display: block; max-width: 100%; height: auto; border-radius: 8px; background: #eaf6ff; }
.cvr-media__cap {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 9.5px;
  color: #6f93c9;
  padding: 4px 3px 0;
}
.cvr-media--spoiler img { filter: blur(14px); }
.cvr-media--spoiler:hover img,
.cvr-media--expanded img { filter: none; }
.cvr-media--expanded { max-width: 100%; transform: none; }

/* backlinks: who replied to this post */
.cvr-backlinks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 9px;
  padding-top: 7px;
  border-top: 1.5px dashed #c3e2fa;
  font-size: 11px;
  color: #6f93c9;
}
.cvr-backlinks__label { text-transform: uppercase; letter-spacing: .5px; font-size: 9.5px; font-weight: 700; }
.cvr-backlinks .thread-quotelink {
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  padding: 1px 8px;
  border-radius: 999px;
  background: #fdeef8;
  border: 1.5px solid #f3bfe0;
}
.cvr-backlinks .thread-quotelink:hover { background: #ffd9f0; border-color: var(--pink); }

/* hover quote-peek: a mini cloud near the link */
.cvr-peek {
  position: absolute;
  z-index: 60;
  width: min(340px, 82vw);
  background: #fff;
  border: 2px solid #58aeee;
  border-radius: 16px;
  padding: 8px 12px;
  box-shadow: 0 10px 24px rgba(16, 60, 130, .4);
  font-size: 12.5px;
  line-height: 1.5;
  color: #123e86;
  pointer-events: none;
}
.cvr-peek .cvr-head { margin-bottom: 4px; padding-bottom: 4px; }
.cvr-peek .cvr-name { font-size: 14px; }
.cvr-peek .cvr-media { max-width: 130px; margin: 6px 0 0; }
.cvr-peek--above::after,
.cvr-peek--below::after {
  content: "";
  position: absolute;
  left: 30px;
  width: 18px;
  height: 11px;
  background: #fff;
  border: 2px solid #58aeee;
}
.cvr-peek--above::after { bottom: -11px; border-top: none; border-radius: 0 0 12px 12px; }
.cvr-peek--below::after { top: -11px; border-bottom: none; border-radius: 12px 12px 0 0; }

/* status card (loading / error) */
.cvr-status {
  max-width: 520px;
  margin: 30px auto;
  text-align: center;
  background: #fff;
  border: 2px solid #a5d3f6;
  border-radius: 22px;
  padding: 22px 24px;
  font-family: "Gochi Hand", cursive;
  font-size: 21px;
  color: #3a5bb0;
  box-shadow: 0 8px 18px rgba(24, 76, 150, .22);
}
.cvr-status a { color: #d62aa0; }

/* floating saddle: fly up / dive down */
.cvr-saddle {
  position: fixed;
  right: 16px;
  bottom: 104px;
  z-index: 40;
  display: grid;
  gap: 8px;
}
.cvr-saddle button {
  width: 44px;
  height: 38px;
  border: 2px solid #58aeee;
  border-radius: 50% 50% 45% 45%;
  font-size: 15px;
  background: radial-gradient(circle at 35% 30%, #fff, #dbeeff 80%);
  color: #1d69c7;
  box-shadow: 0 4px 10px rgba(16, 60, 130, .3);
}
.cvr-saddle button:hover { color: var(--pink); border-color: var(--pink); }

/* dubs / trips / GETs — the number gods smiled */
.cvr-check {
  font-family: "Press Start 2P", monospace;
  font-size: 7px;
  letter-spacing: .5px;
  color: #7a3f00;
  background: linear-gradient(#ffe65b, #ffb01f);
  border: 1.5px solid #e89a00;
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}
.cvr-check--get {
  color: #fff;
  background: linear-gradient(#ffb01f, #e8641f);
  border-color: #b8770a;
  text-shadow: 0 1px 0 rgba(120, 50, 0, .6);
}
.cvr-post--lucky {
  border-color: #ffd84d;
  box-shadow: 0 3px 0 rgba(255, 227, 161, .9), 0 8px 20px rgba(190, 130, 20, .3);
}
.cvr-post--lucky::before, .cvr-post--lucky::after { border-color: #ffd84d; }

/* a post said the forbidden acronym */
.cvr-post--iwtcird {
  border-color: #ffb9e4;
  background: radial-gradient(130% 110% at 85% -10%, #fff0f9, #fff 60%);
}
.cvr-post--iwtcird::before, .cvr-post--iwtcird::after { border-color: #ffb9e4; }
.cvr-iwtcird-word {
  color: #b0286e;
  background: #ffe1f2;
  border: 1px solid #ff9ad2;
  border-radius: 6px;
  padding: 0 4px;
  font-weight: 700;
}
.cvr-iwtcird {
  position: absolute;
  top: -13px;
  right: 14px;
  z-index: 3;
  font-family: "Gochi Hand", cursive;
  font-size: 14.5px;
  line-height: 1;
  color: #b0286e;
  background: #ffe1f2;
  border: 1.5px solid #ff9ad2;
  border-radius: 3px 12px 3px 12px;
  padding: 3px 10px 4px;
  transform: rotate(2deg);
  box-shadow: 0 2px 5px rgba(170, 40, 110, .25);
}

/* sonic rainboom: fast scrolling leaves a rainbow streak behind the sprite */
.cvr-rail__sprite--zoom {
  filter:
    drop-shadow(0 -7px 3px rgba(255, 91, 110, .75))
    drop-shadow(0 -14px 5px rgba(255, 216, 77, .65))
    drop-shadow(0 -21px 7px rgba(63, 208, 230, .55));
}
.cvr-rail__sprite--sleep { filter: drop-shadow(0 3px 5px rgba(20, 60, 130, .4)) saturate(.85); }

/* end-of-thread toast */
.cvr-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 80;
  max-width: min(480px, 88vw);
  text-align: center;
  font-family: "Gochi Hand", cursive;
  font-size: 19px;
  line-height: 1.25;
  color: var(--deep);
  background: #fff;
  border: 2px solid #58aeee;
  border-radius: 999px;
  padding: 10px 22px 11px;
  box-shadow:
    0 4px 0 #d5ecff, 0 10px 24px rgba(16, 60, 130, .35),
    0 -3px 0 -1px #ff5b6e inset, 0 -6px 0 -1px #ffd84d inset, 0 -9px 0 -1px #3fd0e6 inset;
  animation: cvr-toast-in .4s ease;
}
.cvr-toast.is-leaving { opacity: 0; transform: translateX(-50%) translateY(10px); transition: all .6s ease; }
@keyframes cvr-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(14px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* copied! toast on the post number */
.cvr-flash {
  position: absolute;
  z-index: 70;
  font-family: "Gochi Hand", cursive;
  font-size: 14px;
  color: #7a3f00;
  background: linear-gradient(#ffe65b, #ffb01f);
  border: 1.5px solid #e89a00;
  border-radius: 999px;
  padding: 2px 10px;
  pointer-events: none;
  animation: cvr-pop .9s ease forwards;
}
@keyframes cvr-pop {
  0% { opacity: 0; transform: translateY(4px); }
  20%, 75% { opacity: 1; transform: translateY(-2px); }
  100% { opacity: 0; transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .cvr-rail__sprite { transition: none; }
  .cvr-media, .cvr-media:hover { transition: none; transform: none; }
  .cvr-flash { animation-duration: .01s; }
}

@media (max-width: 760px) {
  .cvr-sky { padding-left: 16px; }
  .cvr-rail { display: none; }
  .cvr-post { max-width: 100%; }
  .cvr-saddle { bottom: 84px; right: 10px; }
}