/* Byte - mascote virtual. Celular primeiro. */

html.js body { padding-bottom: 120px; }

.meow {
  --meow-size: 92px;
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 1000;
  width: var(--meow-size);
  height: var(--meow-size);
  font: 14px/1.35 Tahoma, Verdana, "Segoe UI", sans-serif;
  color: #000;
  visibility: hidden;
}
.meow.is-ready { visibility: visible; }
.meow.is-walking { transition: left 2.5s ease-in-out; }

.meow-cat {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  background: none;
  border: 0;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, .15));
}
.meow-cat:focus-visible { outline: 2px dotted #000080; outline-offset: 2px; }
.meow.is-dragging .meow-cat { cursor: grabbing; transform: scale(1.06) rotate(-4deg); }
.meow-svg { display: block; width: 100%; height: 100%; }
.meow.face-left .meow-svg { transform: scaleX(-1); }

/* ---------- Cores do gato (o usuário escolhe; a classe fica no <html>) ---------- */
.meow {
  /* Preto e branco (padrão). Contorno cinza para não sumir no tema escuro. */
  --cat-fur: #1e1e23;
  --cat-line: #55555e;
  --cat-ear: #c98494;
  --cat-muzzle: #f5f5f2;
  --cat-paw: #f5f5f2;
  --cat-toes: #a9a9b0;
  --cat-eye: #c8dc3c;
  --cat-closed: #c8dc3c;
  --cat-glasses: #c9ccd2;
  --cat-nose: #e8869c;
  --cat-mouth: #333;
  --cat-whiskers: #e8e8e8;
}
html.skin-orange .meow {
  --cat-fur: #f28c28;
  --cat-line: #7a3e0e;
  --cat-ear: #f7a8b8;
  --cat-muzzle: #ffe3c2;
  --cat-paw: #f28c28;
  --cat-toes: #7a3e0e;
  --cat-eye: #fff;
  --cat-closed: #222;
  --cat-glasses: #222;
  --cat-nose: #e86a8a;
  --cat-mouth: #5a2a0a;
  --cat-whiskers: #5a2a0a;
}
.cat-fur { fill: var(--cat-fur); stroke: var(--cat-line); }
.cat-ear { fill: var(--cat-ear); }
.cat-muzzle { fill: var(--cat-muzzle); }
.cat-eye { fill: var(--cat-eye); }
.cat-closed { stroke: var(--cat-closed); }
.cat-glasses { stroke: var(--cat-glasses); }
.cat-nose { fill: var(--cat-nose); }
.cat-mouth { stroke: var(--cat-mouth); }
.cat-whiskers { stroke: var(--cat-whiskers); stroke-opacity: .7; }
.cat-paw { fill: var(--cat-paw); stroke: var(--cat-line); }
.cat-toes { stroke: var(--cat-toes); }
.cat-only-orange { display: none; }
html.skin-orange .cat-only-orange { display: inline; }
html.skin-orange .cat-only-tuxedo { display: none; }

/* ---------- Animações do desenho ---------- */
.meow-svg g, .meow-svg ellipse, .meow-svg text { transform-box: fill-box; }

.meow-eyes-open { transform-origin: center; animation: meow-blink 5s infinite; }
.meow-eyes-closed { display: none; }
.meow-pupil { transform-origin: center; transition: transform .2s; }

.meow-tail { transform-origin: 0% 100%; animation: meow-tail 2.6s ease-in-out infinite; }
.meow-head { transform-origin: 50% 100%; animation: meow-head 7s ease-in-out infinite; }
.meow-paw { transform-origin: 50% 100%; }
.meow-paw-l { animation: meow-type-l .26s steps(2, jump-none) infinite; }
.meow-paw-r { animation: meow-type-r .26s steps(2, jump-none) .13s infinite; }
.meow-glow { animation: meow-glow 3s ease-in-out infinite; }
.meow-logo { animation: meow-logo 4s ease-in-out infinite; }

.meow-bit { opacity: 0; animation: meow-bit 3.2s linear infinite; }
.meow-bit-2 { animation-delay: 1.1s; }
.meow-bit-3 { animation-delay: 2.1s; }

.meow-mouth-frown, .meow-mouth-open { opacity: 0; }
.meow.is-talking .meow-mouth-open { animation: meow-talk .26s steps(1) infinite; }
.meow.is-talking .meow-head { animation: meow-nod .55s ease-in-out infinite; }
.meow.is-walking .meow-svg { animation: meow-bob .32s ease-in-out infinite; }
.meow.is-walking.face-left .meow-svg { animation-name: meow-bob-left; }

.meow.mood-sad .meow-mouth-smile { opacity: 0; }
.meow.mood-sad .meow-mouth-frown { opacity: 1; }
.meow.mood-surprised .meow-pupil { transform: scale(1.35); }
.meow.mood-happy .meow-tail { animation-duration: .8s; }

.meow.is-sleeping .meow-eyes-open { display: none; }
.meow.is-sleeping .meow-eyes-closed { display: inline; }
.meow.is-sleeping .meow-paw,
.meow.is-sleeping .meow-bit,
.meow.is-sleeping .meow-head { animation: none; }
.meow.is-sleeping .meow-tail { animation-duration: 6s; }
.meow.is-sleeping .meow-glow { opacity: .1; animation: none; }

.meow-zzz {
  position: absolute;
  top: -6px;
  right: 2px;
  display: none;
  font: bold 16px/1 "Comic Sans MS", "Chalkboard SE", cursive;
  color: #000080;
  pointer-events: none;
}
.meow-zzz span { display: inline-block; animation: meow-zzz 2.4s ease-in-out infinite; }
.meow-zzz span:nth-child(2) { font-size: 20px; animation-delay: .4s; }
.meow-zzz span:nth-child(3) { font-size: 13px; animation-delay: .8s; }
.meow.is-sleeping .meow-zzz { display: block; }

@keyframes meow-blink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes meow-tail { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-14deg); } }
@keyframes meow-head { 0%, 80%, 100% { transform: rotate(0deg); } 85% { transform: rotate(-5deg); } 92% { transform: rotate(3deg); } }
@keyframes meow-nod { 0%, 100% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(2deg) translateY(1px); } }
@keyframes meow-type-l { 0% { transform: translateY(0); } 100% { transform: translateY(-6px) rotate(-10deg); } }
@keyframes meow-type-r { 0% { transform: translateY(0); } 100% { transform: translateY(-6px) rotate(10deg); } }
@keyframes meow-glow { 0%, 100% { opacity: .9; } 50% { opacity: .5; } }
@keyframes meow-logo { 0%, 100% { opacity: .95; } 50% { opacity: .6; } }
@keyframes meow-bit { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px); } }
@keyframes meow-talk { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes meow-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes meow-bob-left { 0%, 100% { transform: scaleX(-1) translateY(0); } 50% { transform: scaleX(-1) translateY(-4px); } }
@keyframes meow-zzz { 0% { opacity: 0; transform: translate(0, 4px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -14px); } }

/* ---------- Balão de fala (amarelinho clássico) ---------- */
.meow-bubble {
  --tail: 50%;
  position: absolute;
  width: max-content;
  max-width: min(300px, calc(100vw - 32px));
  padding: 10px 44px 10px 12px;
  background: #ffffe1;
  border: 1px solid #000;
  border-radius: 10px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .25);
}
.meow-bubble::after,
.meow-bubble::before {
  content: "";
  position: absolute;
  left: var(--tail);
  width: 0;
  height: 0;
  border: 9px solid transparent;
  transform: translateX(-50%);
}
.meow-bubble::before { top: 100%; border-top-color: #000; }
.meow-bubble::after { top: calc(100% - 1px); border-top-color: #ffffe1; }
.meow-bubble.is-below::before { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #000; }
.meow-bubble.is-below::after { top: auto; bottom: calc(100% - 1px); border-top-color: transparent; border-bottom-color: #ffffe1; }

.meow-text { margin: 0; min-height: 1.35em; overflow-wrap: anywhere; }
.meow-bubble-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  font: bold 18px/1 Tahoma, sans-serif;
  color: #555;
  background: none;
  border: 0;
  cursor: pointer;
}
.meow-bubble-close:hover { color: #000; }
.meow-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.meow-actions button,
.meow-wake {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 4px 12px;
  font: 14px Tahoma, Verdana, sans-serif;
  color: #000;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  cursor: pointer;
}
.meow-actions button:active,
.meow-wake:active { border-color: #404040 #fff #fff #404040; }

/* ---------- Menu (janela do Windows 98) ---------- */
.meow-menu {
  position: absolute;
  width: 250px;
  max-width: calc(100vw - 32px);
  max-height: 75vh;
  overflow: auto;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .35);
}
.meow-titlebar {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 3px 3px 6px;
  font-weight: bold;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(90deg, #000080, #1084d0);
}
.meow-x {
  width: 44px;
  height: 44px;
  padding: 0;
  font: bold 14px/1 Tahoma, sans-serif;
  color: #000;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  cursor: pointer;
}
.meow-items { padding: 4px; }
.meow-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 4px 8px;
  font: 14px Tahoma, Verdana, sans-serif;
  text-align: left;
  color: #000;
  background: none;
  border: 0;
  cursor: pointer;
}
.meow-item:hover,
.meow-item:focus-visible { color: #fff; background: #000080; outline: none; }
.meow-item-icon { width: 20px; text-align: center; font-size: 16px; }

.meow-wake {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 1000;
  flex: none;
}

/* ---------- Glitch: o Byte trava e vaza o archive (raro) ---------- */
.meow-glitch {
  position: absolute;
  width: max-content;
  max-width: calc(100vw - 32px);
  /* Celular deitado ou com teclado aberto: rola por dentro em vez de sair da tela. */
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px); /* a área visível de fato, sem a barra do navegador */
  overflow-y: auto;
  padding: 8px 10px 10px 12px;
  font: 15px/1.4 "Lucida Console", "Courier New", monospace;
  color: #33ff66;
  background: #000;
  border: 2px solid currentColor;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .35), 0 0 12px rgba(51, 255, 102, .35);
  -webkit-user-select: text;
  user-select: text;
}
.meow.glitch-l5 .meow-glitch { color: #ff3344; box-shadow: 3px 3px 0 rgba(0, 0, 0, .35), 0 0 12px rgba(255, 51, 68, .35); }
.meow-glitch-text {
  margin: 0;
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.meow-glitch-link { color: inherit; text-decoration: underline; }
.meow-glitch-link:focus-visible,
.meow-glitch-close:focus-visible { outline: 2px dotted currentColor; outline-offset: 2px; }
/* O × flutua no canto: só as primeiras linhas desviam dele, o resto usa a largura toda. */
.meow-glitch-close {
  float: right;
  width: 44px;
  height: 44px;
  margin: -8px -10px 0 4px;
  padding: 0;
  font: bold 20px/1 "Lucida Console", "Courier New", monospace;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.meow.is-glitching .meow-svg { animation: meow-glitch .6s steps(1, end) infinite; }
.meow.is-glitching .meow-eyes-open { animation: none; }
.meow.is-glitching .meow-pupil { transform: none; fill: #f4fff8; }
.meow.is-glitching .meow-bit { fill: #ff2222; }
.meow-glitch.is-ending { animation: meow-glitch-out .35s steps(1, end) forwards; }

@keyframes meow-glitch {
  0% { transform: translate(0, 0); filter: none; }
  15% { transform: translate(-3px, 1px) skewX(-6deg); filter: invert(1) hue-rotate(90deg); }
  30% { transform: translate(2px, -2px); filter: none; }
  45% { transform: translate(-1px, 2px) skewX(4deg); filter: hue-rotate(200deg) saturate(3); }
  60% { transform: translate(3px, 0); filter: invert(1) hue-rotate(300deg); }
  80% { transform: translate(0, -1px); filter: none; }
}
@keyframes meow-glitch-out {
  0% { transform: translate(-4px, 0); opacity: 1; }
  33% { transform: translate(4px, -2px) skewX(8deg); opacity: .7; }
  66% { transform: translate(-2px, 2px); opacity: .4; }
  100% { transform: none; opacity: 0; }
}

/* Post sendo "lido" em miadês */
.post.is-read { outline: 3px dashed #f28c28; outline-offset: 3px; }

.meow-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (min-width: 768px) and (pointer: fine) {
  html.js body { padding-bottom: 150px; }
  .meow { --meow-size: 128px; }
  .meow-item { min-height: 34px; font-size: 13px; }
  /* Com mouse, os botões de fechar podem voltar ao tamanho clássico. */
  .meow-bubble { padding-right: 32px; }
  .meow-bubble-close { width: 32px; height: 32px; }
  .meow-x { width: 32px; height: 26px; }
}

/* Telas maiores: o terminal do glitch para de crescer (o × continua com 44px). */
@media (min-width: 600px) {
  .meow-glitch { max-width: 420px; }
}

@media (prefers-reduced-motion: reduce) {
  .meow *, .meow *::before, .meow *::after { animation: none !important; transition: none !important; }
  .meow.is-walking { transition: none; }
  /* Sem tremor: no glitch, só a troca de cores. */
  .meow.is-glitching .meow-svg { filter: invert(1) hue-rotate(180deg); }
}