/* Retro CRT terminal. Amber phosphor, scanlines, monospace — the retro feel is
   a hard product requirement, so it lives here front and center. */
:root {
  --bg: #0a0a06;
  --fg: #ffb000;          /* amber phosphor */
  --dim: #8a5e00;
  --sys: #6f9f6f;
  --accent: #ff7518;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: #000;
  color: var(--fg);
  font: 15px/1.45 "SF Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
}

#crt {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: 1000px;          /* wide enough that the :pick carousel doesn't scroll */
  margin: 0 auto;
  background: radial-gradient(120% 100% at 50% 0%, #16130a 0%, var(--bg) 70%);
  border-left: 1px solid #1c1708;
  border-right: 1px solid #1c1708;
  overflow: hidden;
}
/* scanlines + flicker overlay */
#crt::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,0.18) 3px);
  mix-blend-mode: multiply;
}

header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid #2a2206;
  text-shadow: 0 0 6px rgba(255,176,0,0.5);
}
.brand { letter-spacing: 2px; font-weight: bold; flex: 0 0 auto; }
/* roster can get long: take the remaining width, right-align, ellipsize (full
   list on hover via the title attr + :who). min-width:0 lets a flex item shrink. */
.status { color: var(--dim); font-size: 12px; flex: 1 1 auto; min-width: 0;
          padding-left: 12px; text-align: right;
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Sign-in / sign-out affordance: a visible entry point at the far right of the
   header, so accounts aren't buried in :login. Hidden until repl.js fills it. */
.authlink { flex: 0 0 auto; margin-left: 12px; color: var(--dim); font-size: 12px;
            cursor: pointer; text-decoration: none; border-bottom: 1px dotted currentColor; }
.authlink:hover { color: var(--fg); }
.authlink:empty { display: none; }

/* Live-state HUD bar: the single source of "now" (themes + who's here). Amber +
   a faint tint so it reads as current status, visibly distinct from the dim,
   immutable event log below it. */
#hud {
  padding: 5px 14px;
  border-bottom: 1px solid #2a2206;
  color: var(--fg);
  background: rgba(255, 176, 0, 0.06);
  font-size: 12px; letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 0 6px rgba(255, 176, 0, 0.35);
}
#hud:empty { display: none; }   /* no bar until we have state (before join) */

#log {
  flex: 1; overflow-y: auto;
  padding: 12px 14px;
  text-shadow: 0 0 4px rgba(255,176,0,0.35);
}
.line { white-space: pre-wrap; word-break: break-word; }
.line.echo { color: var(--fg); }
.line.sys  { color: var(--sys); }
.line.locked { opacity: 0.45; }   /* a :help command the caller lacks the privilege for */
/* New-user tour: click-to-fill example lines. */
.tour-example { color: var(--accent); text-decoration: none; cursor: pointer;
                border-bottom: 1px dashed currentColor; }
.tour-example:hover { color: var(--fg); }
.roomlink { color: var(--accent); text-decoration: underline; cursor: pointer; }
.roomlink:hover { color: var(--fg); }
.copybtn {
  font: inherit; font-size: 11px; color: var(--accent);
  background: transparent; border: 1px solid var(--accent);
  border-radius: 3px; padding: 0 6px; cursor: pointer;
}
.copybtn:hover { background: var(--accent); color: #000; }

/* meme messages */
figure.meme { margin: 10px 0 16px; position: relative; width: max-content; max-width: 100%; }
figure.meme figcaption { color: var(--dim); font-size: 12px; margin-bottom: 4px; }
figure.meme.mine figcaption { color: var(--accent); }
figure.meme canvas {
  max-width: 100%; border: 1px solid #2a2206;
  image-rendering: auto; box-shadow: 0 0 12px rgba(0,0,0,0.6);
}
/* hover-revealed "copy to clipboard" button, bottom-right of the image (#67) */
.meme-canvas { position: relative; width: max-content; max-width: 100%; line-height: 0; }
.meme-copy {
  position: absolute; right: 6px; bottom: 6px; z-index: 2;
  font-family: inherit; font-size: 11px; line-height: 1; padding: 3px 7px;
  background: rgba(0,0,0,0.6); color: var(--accent);
  border: 1px solid var(--accent); border-radius: 4px; cursor: pointer;
  opacity: 0; transition: opacity 0.12s;
}
/* :focus-visible (keyboard), NOT :focus — a mouse click shouldn't pin it visible.
   .busy keeps it shown through the async copy so you see the result after hover-off. */
figure.meme:hover .meme-copy, .meme-copy:focus-visible, .meme-copy.busy { opacity: 1; }
.meme-copy:hover { background: var(--accent); color: #000; }

/* debug overlay: meme-gen latency beneath the image (#88) */
.meme-debug { color: var(--sys); font-size: 11px; margin-top: 4px; letter-spacing: 0.02em; }

/* hover-revealed "×" delete button, top-right of the image (#84) */
.meme-del {
  position: absolute; right: 6px; top: 6px; z-index: 2;
  font-family: inherit; font-size: 14px; line-height: 1; width: 22px; height: 22px;
  padding: 0; background: rgba(0,0,0,0.6); color: var(--accent);
  border: 1px solid var(--accent); border-radius: 4px; cursor: pointer;
  opacity: 0; transition: opacity 0.12s;
}
figure.meme:hover .meme-del, .meme-del:focus-visible { opacity: 1; }
.meme-del:hover { background: var(--accent); color: #000; }

/* --- meme reactions (iMessage-style tapbacks) --- */
.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.reactions:empty { display: none; }
.rx { font-size: 12px; line-height: 1; padding: 3px 7px; border-radius: 11px;
      border: 1px solid #3a2e08; background: rgba(255,176,0,0.06); color: var(--fg); }
.rx.mine { border-color: var(--accent); background: rgba(255,117,24,0.20); }
/* hover-revealed tapback picker, pinned to the meme's top-right */
.tapbar { position: absolute; top: -10px; right: 0; display: none; gap: 1px;
          background: #140f04; border: 1px solid #3a2e08; border-radius: 16px;
          padding: 2px 5px; box-shadow: 0 2px 8px rgba(0,0,0,0.6); z-index: 2; }
figure.meme:hover .tapbar { display: flex; }
.tapbar button { background: none; border: none; font-size: 16px; line-height: 1;
                 padding: 2px 3px; cursor: pointer; filter: grayscale(0.3); }
.tapbar button:hover { filter: none; transform: scale(1.3); }

/* theme upload form (#82): per-image caption rows */
.upload-form { border: 1px solid #3a2e08; background: rgba(255,176,0,0.04);
               padding: 10px 12px; margin: 8px 0 14px; max-width: 560px; }
.upload-line { color: var(--dim); font-size: 12px; margin: 4px 0 10px; display: flex;
               align-items: center; gap: 6px; flex-wrap: wrap; }
.upload-form input[type="text"], .upload-id, .upload-cap {
  background: #140f04; color: var(--fg); border: 1px solid #3a2e08;
  font: inherit; font-size: 12px; padding: 3px 6px; }
.upload-id { width: 180px; }
.upload-img { display: flex; align-items: center; gap: 10px; margin: 7px 0; }
.upload-img img { width: 88px; height: 64px; object-fit: cover; border: 1px solid #2a2206;
                  background: #0d0a04; flex: 0 0 auto; }
.upload-cap { flex: 1 1 auto; min-width: 0; }

/* pick-mode strip (carousel of thumbnails) */
.strip { display: flex; gap: 8px; overflow-x: auto; padding: 6px 0 12px; }
.thumb { position: relative; margin: 0; flex: 0 0 auto; width: 150px; }
.thumb img { width: 150px; height: 110px; object-fit: cover; border: 1px solid #2a2206; }
.thumb .badge {
  position: absolute; top: 4px; left: 4px;
  background: var(--accent); color: #000; font-weight: bold;
  width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 4px;
}
.thumb figcaption { color: var(--dim); font-size: 10px; margin-top: 3px; }
/* :theme gallery — clickable thumbnails to add a theme; active ones highlighted. */
.thumb.theme { width: 120px; }
.thumb.theme img { width: 120px; height: 90px; }
.thumb.theme[title^="add"] { cursor: pointer; }
.thumb.theme[title^="add"]:hover img { border-color: var(--accent); }
.thumb.theme.active img { border-color: var(--accent); opacity: 0.65; }
.thumb.theme .noimg { width: 120px; height: 90px; border: 1px solid #2a2206;
  display: flex; align-items: center; justify-content: center; color: var(--dim);
  font-size: 11px; text-align: center; padding: 4px; box-sizing: border-box; }

form#promptForm {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-top: 1px solid #2a2206;
}
.sigil { color: var(--accent); }
#prompt {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--fg); font: inherit; caret-color: var(--accent);
  text-shadow: 0 0 4px rgba(255,176,0,0.5);
}
#prompt::placeholder { color: #5a4400; }