/* chat-messages.css — the message-rendering styles shared by the main chat
   (linked from index.html) and the log search page (/search). Moved out of
   theme.css so both surfaces render messages identically from one source.
   Chat-shell rules (#message-container, .layout-* variants) stay in theme.css. */

.message {
  text-shadow: rgb(0, 0, 0) -1px -1px 0px, rgb(0, 0, 0) 1px -1px 0px, rgb(0, 0, 0) -1px 1px 0px, rgb(0, 0, 0) 1px 1px 0px;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 5px 3px;
  padding: 0 6px;
  border-radius: 4px;
}

.bubbleMessage .message {
  background: var(--bubble-bg, rgba(255, 255, 255, 0.05));
  /* Hug the text so the bubble is a banner behind the message rather than a
     full-width bar that covers the background image. */
  width: fit-content;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 8px;
}

.message img {
  max-height: 256px;
  max-width: 256px;
  cursor: default;
}

.message div {
  display: inline;
}

.messageContent {
  word-break: break-word;
}

.nick {
  color: rgb(100, 100, 192);
  text-shadow: rgb(0, 0, 0) -1px -1px 0px, rgb(0, 0, 0) 1px -1px 0px, rgb(0, 0, 0) -1px 1px 0px, rgb(0, 0, 0) 1px 1px 0px;
  align-items: center;
}

.nick .hat {
  position: relative;
  width: 50px;
  height: 50px;
  display: inline-block !important;
  background-size: 30px 29px;
  background-position: center;
  background-repeat: no-repeat;
  margin-right: -50px;
  margin-top: -50px;
  top: 4px;
  left: -27px;
  pointer-events: none;
}

.time {
  font-size: 0.8em;
  color: grey;
  flex-shrink: 0;
}

.emoji {
  cursor: pointer !important;
  max-width: 64px !important;
  max-height: 64px !important;
}

/* message types */

.action .messageContent:before,
.action .messageContent:after,
.note .messageContent:before,
.note .messageContent:after,
.general .messageContent:before,
.general .messageContent:after {
  content: ' ** ';
}

.info {
  color: red;
}

.note {
  color: #B30000;
}

.general {
  color: #2CE72C;
}

.action {
  color: #66B2FF;
}

.error {
  color: #FF0000;
  font-weight: bold;
}

.private {
  color: rgb(124, 89, 207);
  font-weight: bold;
}

/* quotes */

.quote {
  background: none;
  color: lightblue;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.quote-container {
  display: block !important;
  padding: 4px;
  pointer-events: none;
  z-index: 100;
}

.quote-container .message {
  background-color: #000;
  box-shadow: 0px 0 2px white;
}

.spolier:hover {
  background-color: unset !important;
  color: unset !important;
}

.rainbow {
  animation-name: rainbow;
  animation-duration: 2s;
  animation-iteration-count: 15;
}

@keyframes rainbow {
  0%    { color: rgb(255, 0, 0); }
  16.6% { color: rgb(255, 255, 0); }
  33.2% { color: rgb(0, 255, 0); }
  49.8% { color: rgb(0, 255, 255); }
  66.4% { color: rgb(0, 0, 255); }
  84.3% { color: rgb(255, 0, 255); }
  100%  { color: rgb(255, 0, 0); }
}

.shake {
  animation-name: shake-hard;
  animation-duration: 0.5s;
  animation-iteration-count: 20;
}

@keyframes shake-hard {
  2%  { transform: translate(-1px, -5px) rotate(-2.5deg); }
  4%  { transform: translate(-5px, -8px) rotate(2.5deg); }
  6%  { transform: translate(4px, 2px) rotate(-0.5deg); }
  8%  { transform: translate(1px, 6px) rotate(-1.5deg); }
  10% { transform: translate(-3px, -6px) rotate(3.5deg); }
  12% { transform: translate(10px, 5px) rotate(-2.5deg); }
  14% { transform: translate(-5px, 8px) rotate(-0.5deg); }
  16% { transform: translate(7px, 6px) rotate(-2.5deg); }
  18% { transform: translate(4px, -7px) rotate(1.5deg); }
  20% { transform: translate(-2px, 2px) rotate(0.5deg); }
  22% { transform: translate(-1px, 9px) rotate(-0.5deg); }
  24% { transform: translate(1px, -2px) rotate(0.5deg); }
  26% { transform: translate(-7px, -9px) rotate(1.5deg); }
  28% { transform: translate(-5px, -2px) rotate(-2.5deg); }
  30% { transform: translate(-4px, 7px) rotate(3.5deg); }
  32% { transform: translate(8px, 2px) rotate(2.5deg); }
  34% { transform: translate(5px, -5px) rotate(0.5deg); }
  36% { transform: translate(-8px, -8px) rotate(2.5deg); }
  38% { transform: translate(-7px, -2px) rotate(2.5deg); }
  40% { transform: translate(8px, 0px) rotate(-1.5deg); }
  42% { transform: translate(0px, -2px) rotate(2.5deg); }
  44% { transform: translate(-1px, 1px) rotate(3.5deg); }
  46% { transform: translate(10px, -5px) rotate(2.5deg); }
  48% { transform: translate(-1px, 7px) rotate(0.5deg); }
  50% { transform: translate(-8px, -2px) rotate(1.5deg); }
  52% { transform: translate(-9px, 8px) rotate(2.5deg); }
  54% { transform: translate(2px, 9px) rotate(-2.5deg); }
  56% { transform: translate(-2px, 0px) rotate(2.5deg); }
  58% { transform: translate(1px, 1px) rotate(-2.5deg); }
  60% { transform: translate(10px, -9px) rotate(-0.5deg); }
  62% { transform: translate(5px, 4px) rotate(0.5deg); }
  64% { transform: translate(2px, -4px) rotate(0.5deg); }
  66% { transform: translate(-9px, -7px) rotate(2.5deg); }
  68% { transform: translate(-5px, -1px) rotate(0.5deg); }
  70% { transform: translate(9px, -1px) rotate(2.5deg); }
  72% { transform: translate(8px, 8px) rotate(-1.5deg); }
  74% { transform: translate(-1px, 4px) rotate(2.5deg); }
  76% { transform: translate(3px, -7px) rotate(1.5deg); }
  78% { transform: translate(-7px, 0px) rotate(-2.5deg); }
  80% { transform: translate(-5px, 5px) rotate(2.5deg); }
  82% { transform: translate(6px, 6px) rotate(-0.5deg); }
  84% { transform: translate(10px, 8px) rotate(-0.5deg); }
  86% { transform: translate(4px, 10px) rotate(-0.5deg); }
  88% { transform: translate(-5px, -9px) rotate(-1.5deg); }
  90% { transform: translate(-8px, 9px) rotate(1.5deg); }
  92% { transform: translate(6px, 6px) rotate(-1.5deg); }
  94% { transform: translate(-3px, -4px) rotate(-1.5deg); }
  96% { transform: translate(6px, -5px) rotate(0.5deg); }
  98% { transform: translate(10px, 4px) rotate(-0.5deg); }
  0%, 100% { transform: translate(0, 0) rotate(0); }
}

.spin {
  animation-name: spin;
  animation-duration: 2s;
  animation-iteration-count: 1;
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.wavy span {
  animation-name: wavy;
  animation-duration: 10s;
  animation-timing-function: linear;
}

.wavy span:nth-child(2n) {
  animation-delay: 1s;
}

@keyframes wavy {
  0%   { transform: translateY(0px); }
  25%  { transform: translateY(-5px); }
  50%  { transform: translateY(0px); }
  75%  { transform: translateY(5px); }
  100% { transform: translateY(0px); }
}