/* VOODOO green-terminal skin for gamja. Loaded after gamja's stylesheet so
   these win. Aesthetic per CLAUDE.md: #33FF66 on #0A0A0A, monospace, text-only
   austerity (the rainbow nick palette is flattened to a single green). */

:root,
:root[data-theme] {
  --main-background: #0A0A0A;
  --main-color: #33FF66;
  --sidebar-background: #0d160d;
  --expander-background: #142914;
  --expander-background-hover: #1c3a1c;
  --expander-border: #2f7a3f;
  --button-color: #0A0A0A;
  --button-background: #33FF66;
  --button-background-hover: #5aff85;
  --button-border: #33FF66;
  --green: #33FF66;
  --gray: #1f9e42;      /* dim green for secondary text */
  --red: #ff5f5b;       /* errors stay legible as errors */
}

/* honor the dark media query too (gamja re-sets vars there) */
@media (prefers-color-scheme: dark) {
  :root {
    --main-background: #0A0A0A;
    --main-color: #33FF66;
    --sidebar-background: #0d160d;
    --button-background: #33FF66;
    --button-background-hover: #5aff85;
    --button-border: #33FF66;
    --green: #33FF66;
    --gray: #1f9e42;
    --red: #ff5f5b;
  }
}

/* no images, no rainbow — flatten the 16-color nick palette to one green */
#buffer .nick-1,  #buffer .nick-2,  #buffer .nick-3,  #buffer .nick-4,
#buffer .nick-5,  #buffer .nick-6,  #buffer .nick-7,  #buffer .nick-8,
#buffer .nick-9,  #buffer .nick-10, #buffer .nick-11, #buffer .nick-12,
#buffer .nick-13, #buffer .nick-14, #buffer .nick-15, #buffer .nick-16,
a.nick { color: #33FF66; }

a.timestamp, #buffer .date-separator { color: #17612d; }

/* the MOTD is the welcome — keep it bright */
#buffer .motd { color: #33FF66; }

/* highlight (someone says your name) — invert instead of the default purple */
#buffer .highlight .nick { color: #0A0A0A; background-color: #33FF66; }

body { font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; }
::selection { background: #33FF66; color: #0A0A0A; }

/* email is off by design (nick + password only) — hide the dead optional
   e-mail field in gamja's register form so it isn't misleading */
input[type="email"],
label:has(input[type="email"]) { display: none !important; }

/* inputs don't inherit color — the composer was black-on-black. Force green
   text + caret across the composer and all form fields. */
#composer input,
input, textarea {
  color: #33FF66 !important;
  caret-color: #33FF66;
}
::placeholder { color: #1f9e42; opacity: 1; }

/* command bar is mobile-only (shown in the 640px query below) */
.vd-cmdbar { display: none; }

/* keep any exposed strip (mobile address-bar gap / overscroll / footer) on
   the terminal black instead of the default white page background */
html, body { background: #0A0A0A; overscroll-behavior: none; }

/* breathing room in the message log — the fandom is on phones, and the
   default log packs messages edge to edge. */
#buffer .logline-list { padding: 12px; }
#buffer .logline { line-height: 1.5; }

@media (max-width: 640px) {
  #buffer .logline { margin-bottom: .5rem; }          /* gap between messages */
  #buffer .logline-list { padding: 12px 12px 20px; }
  /* stop long messages/URLs from forcing horizontal overflow (clipped on the
     right, since html/body overflow is hidden). Let the middle grid column
     shrink below its content, and break long unbreakable tokens. */
  #buffer, #buffer-header, #composer, #buffer .logline-list { min-width: 0; }
  #buffer { touch-action: manipulation; }        /* double-tap toggles rooms, not zoom */
  #buffer .logline, #buffer .talk, #buffer .me-tell, #buffer .motd {
    overflow: visible; overflow-wrap: anywhere; word-break: break-word;
  }
  a.timestamp { display: none; }                       /* no clock on mobile */
  #composer input { height: 46px; font-size: 16px; }   /* comfy tap target; 16px stops iOS zoom-on-focus */
  #buffer-header .title { padding: 8px 12px; }

  /* command bar — tap common commands instead of thumb-typing them */
  #composer { display: flex; flex-direction: column; }
  .vd-cmdbar {
    display: flex; gap: .4rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: .45rem .5rem; border-bottom: 1px solid rgba(51, 255, 102, .18);
    scrollbar-width: none;
  }
  .vd-cmdbar::-webkit-scrollbar { display: none; }
  .vd-cmdbar button {
    flex: 0 0 auto; background: #0d160d; color: #33FF66;
    border: 1px solid #1f9e42; border-radius: 3px; font: inherit; font-size: .82rem;
    padding: .42rem .7rem; white-space: nowrap; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .vd-cmdbar button:active { background: #33FF66; color: #0A0A0A; }

  /* Navigation: gamja collapses the room list behind a ~10px edge sliver that
     is nearly impossible to tap. Turn the expanders into obvious finger-sized
     bars with clear icons. Left = rooms (☰), right = people (⋮). */
  #buffer-list .expander,
  #member-list .expander {
    width: 34px !important;
    background: #0d160d !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  #buffer-list .expander { border-right: 1px solid rgba(51, 255, 102, .5); }
  #member-list .expander { border-left: 1px solid rgba(51, 255, 102, .5); }
  .expander span { display: none !important; }         /* drop the faint texture lines */
  #buffer-list .expander::before { content: "\2630"; color: #33FF66; font-size: 1.3rem; }
  #member-list .expander::before { content: "\22EE"; color: #33FF66; font-size: 1.3rem; }

  /* double-tap toggles this: hide the side bars so the chat is full-width */
  html.vd-hide-nav #buffer-list .expander,
  html.vd-hide-nav #member-list .expander { display: none !important; }
}