/* 4uhm — clean early-web / NES-SNES styling.
   White + black with a bright-blue accent, echoing the original 4uhm.com:
   light background, black text, #0059ff highlights, chunky beveled UI.
   Pixel font (Press Start 2P / m01) for chrome + badges; a readable sans for
   message text. */

@font-face {
  font-family: "M01";
  src: url("/assets/fonts/m01.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "PressStart2P";
  src: url("/assets/fonts/PressStart2P-webfont.woff2") format("woff2"),
       url("/assets/fonts/PressStart2P-webfont.woff") format("woff");
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --chrome: #eef0f5;      /* panels, sidebars, topbar */
  --ink: #111111;
  --accent: #0059ff;      /* the 4uhm blue */
  --accent-hi: #0095ff;
  --danger: #e0245e;
  --muted: #707888;
  --line: #cfd4dd;        /* hairline borders */
  --bevel-light: #ffffff;
  --bevel-dark: #9aa2b1;

  --pixel: "PressStart2P", monospace;
  --bitmap: "M01", "Courier New", monospace;
  --sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  /* ── FONT KNOBS ── the 90s/00s gif-web look uses plain Helvetica and lets the
     gifs be the spice. To go retro, flip --ui to var(--pixel) and/or
     --body-font to var(--bitmap). Sizes are tuned for the sans default; the
     pixel font will look big if you swap it in. */
  --ui: var(--sans);        /* chrome: labels, buttons, badges, names */
  --body-font: var(--sans); /* message text */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--chrome);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  overflow-x: hidden; /* effect overlays can extend past the message box */
}

.hidden { display: none !important; }
.screen { min-height: 100vh; min-height: 100dvh; }

/* chunky early-web beveled box (outset) */
.bevel-out {
  border: 2px solid;
  border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
}

/* --- join gate --- */
#join { display: flex; align-items: center; justify-content: center; padding: 16px; }
.join-box {
  background: var(--bg);
  border: 3px solid var(--accent);
  padding: 28px 32px;
  text-align: center;
  width: 100%;
  max-width: 360px;
  box-shadow: 6px 6px 0 rgba(0, 89, 255, 0.15);
}
.join-box .logo { image-rendering: pixelated; width: 150px; height: auto; margin: 4px 0 18px; }
.join-box label { display: block; text-align: left; font-family: var(--ui); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; margin: 16px 0 0; color: var(--muted); }
.join-box input {
  display: block; width: 100%; margin-top: 8px; padding: 10px;
  background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px;
  border: 2px solid; border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
}
.join-box input:focus { outline: 2px solid var(--accent); outline-offset: 0; }
#join-error, .form-error { color: var(--danger); font-family: var(--ui); font-size: 12px; line-height: 1.5; margin: 14px 0 0; }
/* the "or create account" / "or log in" switch line under each form */
.switch-line { font-family: var(--ui); font-size: 12px; color: var(--muted); margin: 16px 0 0; }
.switch-line a { color: var(--accent); font-weight: 700; text-decoration: none; }
.switch-line a:hover { text-decoration: underline; }

/* buttons: blue, beveled, pixel label */
button {
  cursor: pointer;
  background: var(--accent); color: #fff;
  font-family: var(--ui); font-size: 13px; font-weight: 700; letter-spacing: 0.3px;
  padding: 12px 18px;
  border: 2px solid; border-color: var(--accent-hi) #0042c4 #0042c4 var(--accent-hi);
}
button:hover { background: var(--accent-hi); }
button:active { border-color: #0042c4 var(--accent-hi) var(--accent-hi) #0042c4; }
#enter { margin-top: 20px; width: 100%; }

/* --- chat --- */
#chat { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
#topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; background: var(--bg); border-bottom: 3px solid var(--accent);
}
.logo-small { height: 26px; image-rendering: pixelated; }
#room-name { font-family: var(--ui); font-size: 16px; font-weight: 700; color: var(--accent); }
.status { margin-left: auto; font-family: var(--ui); font-size: 11px; color: var(--muted); }
.status[data-state="connected"] { color: #1a8a36; }
.status[data-state="disconnected"], .status[data-state="connecting"] { color: var(--danger); }
/* who you're logged in as + a logout button */
.me-name { font-family: var(--ui); font-size: 12px; font-weight: 700; color: var(--ink); }
#logout-btn { padding: 6px 10px; font-size: 11px; }

#main { flex: 1; display: flex; min-height: 0; background: var(--bg); }
#messages {
  flex: 1; list-style: none; margin: 0; padding: 10px 12px;
  overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 4px;
}
#presence {
  width: 168px; flex: none; background: var(--chrome); border-left: 2px solid var(--line);
  padding: 12px; overflow-y: auto;
}
#presence h2 { font-family: var(--ui); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin: 0 0 10px; }
#members { list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--accent); word-break: break-word; }
/* each user: a tiny avatar next to the name */
#members .member { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
#members .member-avatar { width: 22px; height: 22px; flex: none; object-fit: cover; image-rendering: pixelated; border: 1px solid var(--bevel-dark); }
#members .member-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* message rows */
.message {
  position: relative; display: flex; gap: 10px; align-items: flex-start;
  padding: 6px 4px; line-height: 1.45; border-bottom: 1px solid #f0f1f4;
}
.message.system { color: var(--muted); font-size: 12px; justify-content: center; border: 0; }
.avatar {
  position: relative; flex: none; width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center; overflow: visible;
  background: var(--chrome);
  border: 3px solid; border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
/* portraits render as chunky B/W pixel art — message avatars and the composer
   preview alike (any img.portrait). */
img.portrait { image-rendering: pixelated; filter: grayscale(1) contrast(1.08); }
/* an uploaded custom avatar renders in full color, just pixelated. */
img.custom-avatar { image-rendering: pixelated; }
/* shared images, rendered inline in the message */
.attachment {
  display: block; margin-top: 8px; max-width: min(340px, 100%); max-height: 340px;
  width: auto; height: auto; cursor: pointer;
  border: 2px solid; border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
}
.content { flex: 1; min-width: 0; }
/* meta row: username with badges inline next to it (saves a vertical line) */
.meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.meta .who { font-family: var(--ui); font-size: 13px; font-weight: 700; color: var(--accent); }
.body { position: relative; overflow-wrap: break-word; font-family: var(--body-font); font-size: 15px; line-height: 1.45; }

/* badge chips — inline next to the username */
.badges { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.badge {
  font-family: var(--ui); font-size: 11px; padding: 2px 7px;
  background: var(--chrome); color: var(--accent);
  border: 1px solid; border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
}
.badge-objection { color: var(--danger); }
.badge-caps { color: #c25e00; }
.badge-super_volley { color: #b8860b; }
.badge-tanooki { color: #6b3fa0; }
/* the 100th-post milestone: make it unmistakable */
.badge-centithread { color: #fff; background: var(--accent); border-color: var(--accent-hi) #0042c4 #0042c4 var(--accent-hi); }

/* --- per-message react / power toolbar --- */
.toolbar { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
/* reactions: applied sticker stamps + a "+" that opens an expandable gif tray */
.react-wrap { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.reactions { display: inline-flex; align-items: center; gap: 4px; }
.reaction-stamp { height: 22px; width: auto; image-rendering: pixelated; cursor: pointer; vertical-align: middle; }
.react-count { font-family: var(--ui); font-size: 11px; font-weight: 700; color: var(--accent); margin: 0 4px 0 -3px; }
.react-btn, .power-btn { padding: 1px 7px; font-size: 13px; line-height: 1.3; cursor: pointer; background: var(--chrome); color: var(--muted); border: 1px solid; border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light); }
/* the sticker tray "that holds a lot" — a popover grid of gifs */
.sticker-tray { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; width: 300px; max-width: 84vw; gap: 8px; padding: 8px; background: var(--bg); box-shadow: 4px 4px 0 rgba(0,0,0,0.18); }
.sticker-tray .sticker { height: 30px; width: auto; image-rendering: pixelated; cursor: pointer; }
.sticker-tray .sticker:hover { outline: 2px solid var(--accent); }
/* shared popover base for the tray + powers menu */
.palette { display: flex; gap: 4px; flex-wrap: wrap; padding: 5px; background: var(--bg); border: 2px solid; border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light); }
.palette.hidden { display: none; }
.palette button { font-family: var(--sans); font-size: 14px; padding: 2px 4px; cursor: pointer; background: var(--bg); border: 1px solid; border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light); }

/* --- powers (author-toggled decorations) --- */
.pow-mushroom { font-size: 1.9em; line-height: 1.1; }
.pow-censor { background: #111; color: #111; border-radius: 2px; user-select: none; }
.pow-rainbow { background: linear-gradient(90deg,#e0245e,#c25e00,#e6b800,#1a8a36,#0059ff,#6b3fa0); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rainbow-slide 3s linear infinite; }
@keyframes rainbow-slide { to { background-position: 200% 0; } }
.pow-balloon { animation: balloon-bob 2.4s ease-in-out infinite; }
@keyframes balloon-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.pow-stampede { background-image: url("/assets/effects/stampede.gif"); background-repeat: repeat-x; background-position: bottom; padding-bottom: 20px; }
.fx-sparkle { top: -8px; left: -8px; right: -8px; width: auto; height: calc(100% + 16px); object-fit: cover; opacity: 0.8; }

/* --- effect overlays --- */
.fx-overlay { position: absolute; pointer-events: none; image-rendering: pixelated; z-index: 5; }
.has-overlay { overflow: visible; }
.fx-bubble { bottom: -10px; left: -8px; height: 46px; }
.fx-dodge { top: -18px; left: -10px; height: 56px; }
.fx-giraffe { bottom: -20px; left: -16px; height: 84px; z-index: 6; }
.fx-fireworks { top: -14px; left: -14px; width: 60px; height: 60px; z-index: 7; }
.fx-tanooki { bottom: -18px; left: -14px; height: 70px; z-index: 6; }
.fx-supervolley { top: -22px; left: -12px; height: 54px; z-index: 6; }
.fx-centithread { top: -10px; right: -10px; left: auto; width: 72px; height: 72px; z-index: 7; }

.fx-fire {
  background-image: url("/assets/effects/fire.gif");
  background-repeat: repeat-x; background-position: bottom; padding-bottom: 22px;
}

/* OBJECTION: cover the text and scream */
.fx-objected { opacity: 0.2; }
.fx-objection { position: absolute; top: -18px; left: 0; z-index: 10; pointer-events: none; }
.fx-phoenix { height: 110px; image-rendering: pixelated; }
.fx-objection-banner { height: 84px; image-rendering: pixelated; position: relative; left: -36px; top: -8px; }

/* staged-image preview bar (above the composer) */
#attach { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--chrome); border-top: 2px solid var(--line); }
#attach-thumb { height: 52px; image-rendering: pixelated; border: 2px solid var(--line); }
#attach-clear { background: var(--danger); color: #fff; padding: 6px 10px; border: none; font-family: var(--ui); font-size: 14px; }

/* --- composer --- */
#composer { display: flex; gap: 8px; padding: 10px 12px; background: var(--chrome); border-top: 2px solid var(--line); align-items: center; }
#text {
  flex: 1; padding: 12px; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px;
  border: 2px solid; border-color: var(--bevel-dark) var(--bevel-light) var(--bevel-light) var(--bevel-dark);
}
#text:focus { outline: 2px solid var(--accent); }

/* your avatar preview — drag an image here (or click) to set your account avatar */
#avatar-picker {
  flex: none; width: 52px; height: 52px; cursor: pointer; overflow: hidden; background: var(--chrome);
  border: 3px solid; border-color: var(--bevel-light) var(--bevel-dark) var(--bevel-dark) var(--bevel-light);
}
#avatar-picker.drop-target { border-color: var(--accent); outline: 2px solid var(--accent); }
#avatar-me { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; }
/* the original 4uhm "Attach image" button: green, label flips to "yay!" when staged */
#img-btn { background: #1a8a36; color: #fff; border-color: #3fbf5e #0f6b27 #0f6b27 #3fbf5e; white-space: nowrap; }
#img-btn:hover { background: #199a3a; }
#img-btn.staged { background: #0f6b27; }

/* --- responsive --- */
@media (max-width: 640px) {
  #presence { display: none; }
  #topbar { padding: 8px 10px; gap: 8px; }
  .me-name { margin-left: 4px; }
  #messages { padding: 8px 10px; }
  .message { gap: 8px; padding: 6px 2px; }
  .avatar { width: 52px; height: 52px; }
  .body { font-size: 15px; }
  .badge { font-size: 9px; padding: 2px 5px; }
  /* effect overlays scaled down so they don't dominate a small screen */
  .fx-giraffe { height: 64px; bottom: -14px; left: -10px; }
  .fx-fireworks { width: 48px; height: 48px; top: -10px; left: -10px; }
  .fx-phoenix { height: 84px; }
  .fx-objection-banner { height: 64px; left: -28px; }
  /* composer wraps so the avatar slot + input sit on top and the action
     buttons (Attach / SEND) get a full tappable row below — both reachable. */
  #composer { padding: 8px; gap: 6px; flex-wrap: wrap; }
  #text { flex: 1 1 100%; order: -1; }
  #composer button { padding: 12px; flex: 1; }
  #avatar-picker { width: 44px; height: 44px; flex: none; }
  .attachment { max-width: 100%; }
}

/* respect users who don't want the busy animations */
@media (prefers-reduced-motion: reduce) {
  .fx-overlay, .fx-objection { display: none; }
  .fx-objected { opacity: 1; }
  .pow-balloon, .pow-rainbow { animation: none; }
}