/* gtchat. Everything is scoped under #gtchat (ids are gtc-*) so it can be dropped into a
   Bootstrap page without either side's styles leaking into the other. */
#gtchat {
  --bg: #ffffff; --ink: #1a1a1a; --muted: #666; --line: #d9d9d9;
  --nick: #1a5555; --me: #7a4b00; --notice: #0b4f8a; --system: #777; --alert-bg: #fff3cd;
  --dm: #f3f7fb; --tab-bg: #eee; --input-bg: #fff;
  position: relative; display: flex; flex-direction: column; height: 300px; min-height: 96px;   /* the host page sets the height; it may be short */
  background: var(--bg); color: var(--ink); border: 1px solid #000; text-align: left;
  font: 12px/normal Verdana, Geneva, sans-serif;
}
#gtchat, #gtchat * { box-sizing: border-box; }
/* neutralise host-page (Bootstrap) element styles */
#gtchat form { margin: 0; } #gtchat label { font-weight: normal; margin: 0; max-width: none; }
#gtchat code { color: inherit; white-space: normal; } #gtchat table { margin: 0; max-width: none; }
#gtchat button, #gtchat input { line-height: normal; margin: 0; height: auto; box-shadow: none; border-radius: 0; text-transform: none; }
#gtchat a:focus, #gtchat button:focus { outline: none; }

#gtchat .msg .gtc-update { display: inline-block; background: var(--alert-bg); border: 1px solid #e0c060; padding: 2px 6px; font-weight: bold; }
#gtchat .msg .gtc-update a { color: #0645ad; text-decoration: underline; cursor: pointer; }

/* GeyserTimes login and entry dialogs */
#gtchat .gtc-modal-box.gtc-form { width: 380px; max-width: 94vw; gap: 7px; padding: 16px; max-height: 92vh; overflow-y: auto; }
#gtchat .gtc-form label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: #555; }
#gtchat .gtc-form input:not([type=checkbox]):not([type=radio]), #gtchat .gtc-form textarea { padding: 5px 6px; font: 12px Verdana, Geneva, sans-serif; color: #1a1a1a; background: #fff; border: 1px solid #999; width: 100%; }
#gtchat .gtc-form textarea { resize: vertical; }
#gtchat .gtc-form label.chk { flex-direction: row; align-items: center; gap: 5px; color: #1a1a1a; }
#gtchat .gtc-form .row2 { display: flex; gap: 8px; } #gtchat .gtc-form .row2 > label { flex: 1; min-width: 0; }
#gtchat .gtc-form .gtc-combo { position: relative; }
#gtchat .gtc-form .gtc-combo-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; margin: 0; padding: 0; list-style: none; max-height: 190px; overflow-y: auto; background: #fff; border: 1px solid #666; border-top: 0; box-shadow: 0 3px 8px rgba(0,0,0,.25); font: 12px Verdana, Geneva, sans-serif; color: #1a1a1a; }
#gtchat .gtc-form .gtc-combo-list li { padding: 3px 7px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#gtchat .gtc-form .gtc-combo-list li.on, #gtchat .gtc-form .gtc-combo-list li:hover { background: #2e7d32; color: #fff; }
#gtchat .gtc-form .gtc-group { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: #555; }
#gtchat .gtc-form .gtc-group b { font-weight: normal; }
#gtchat .gtc-form .gtc-opts { display: flex; flex-wrap: wrap; gap: 3px 12px; }
#gtchat .gtc-form [hidden] { display: none; }
#gtchat .gtc-form button.gtc-range { align-self: flex-start; font-size: 10.5px; color: #0645ad; }
#gtchat .gtc-form .gtc-actions { display: flex; gap: 8px; margin-top: 2px; }
#gtchat .gtc-form .gtc-actions button[type=submit] { background: #2e7d32; color: #fff; border-color: #2e7d32; padding: 6px 16px; }
#gtchat .gtc-form .gtc-actions button:disabled { opacity: .6; cursor: default; }
#gtchat .gtc-form .help-foot a { color: #0645ad; }
#gtchat .gtc-form input[type=checkbox], #gtchat .gtc-form input[type=radio] { width: auto; padding: 0; margin: 0; border: 0; }
#gtchat .gtc-sandbox { white-space: nowrap; margin-left: auto !important; background: #c00; color: #fff; font-size: 10px; font-weight: bold; padding: 1px 6px; border-radius: 3px; margin: 0 8px; }

/* left the chat (/quit): Join bar in place of the text box */
#gtchat .gtc-joinbar { display: none; align-items: center; gap: 10px; padding: 5px 8px; border-top: 1px solid var(--line); color: var(--muted); }
#gtchat .gtc-joinbar button { padding: 3px 12px; font: inherit; border: 1px solid #999; background: #f0f0f0; color: #1a1a1a; cursor: pointer; }
#gtchat.gtc-left .gtc-joinbar { display: flex; }
#gtchat.gtc-left .input-row { display: none; }
/* watching: the room stays fully readable; only the text box is swapped for the join bar */
#gtchat .gtc-leave { margin-left: 8px; color: var(--muted); text-decoration: underline; cursor: pointer; }
#gtchat.gtc-left .gtc-leave { display: none; }

/* bottom-edge resize grip */
#gtchat .gtc-grip { position: absolute; left: 0; right: 0; bottom: -4px; height: 8px; cursor: ns-resize; z-index: 15; touch-action: none; }
#gtchat .gtc-grip::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 36px; height: 3px; margin-left: -18px; border-radius: 2px; background: #9a9a9a; opacity: 0; transition: opacity .15s; }
#gtchat:hover .gtc-grip::after, #gtchat .gtc-grip:active::after { opacity: .9; }
body.gtc-page #gtchat .gtc-grip { display: none; }

/* standalone test page */
body.gtc-page { margin: 0; background: #e9e9e9; }
body.gtc-page #gtchat { max-width: 900px; margin: 16px auto; height: calc(100vh - 32px); min-height: 360px; }
/* chat-only and mobile pages: fill the window */
body.gtc-page.gtc-full { background: #fff; }
body.gtc-page.gtc-full #gtchat { max-width: none; margin: 0; border: none; height: 100vh; height: 100dvh; min-height: 0; }

#gtchat .tabrow { display: flex; align-items: flex-end; background: var(--tab-bg); border-bottom: 1px solid var(--line); padding: 3px 4px 0; }
#gtchat .tabs { display: flex; gap: 2px; overflow-x: auto; flex: 1; margin-bottom: -1px; }
#gtchat .tab { border: 1px solid var(--line); background: #e4e4e4; color: var(--muted); padding: 3px 10px; font: inherit; cursor: pointer; border-radius: 4px 4px 0 0; white-space: nowrap; }
#gtchat .tab.active { background: var(--bg); color: var(--ink); font-weight: bold; border-bottom-color: var(--bg); }
#gtchat .tabrow-right { font-size: 11px; color: var(--muted); padding: 0 4px 4px; white-space: nowrap; }
#gtchat .tab .gtc-badge { background: #c00; color: #fff; border-radius: 8px; padding: 0 5px; margin-left: 4px; font-size: 10px; }
#gtchat .tab .gtc-x { margin-left: 6px; color: var(--muted); }
#gtchat .chat-body { flex: 1; display: flex; min-height: 0; }
#gtchat .messages { flex: 1; overflow-y: auto; padding: 4px 6px; }
#gtchat .users { width: 150px; border-left: 1px solid var(--line); overflow-y: auto; padding: 4px; font-size: 11px; }
#gtchat .users div { padding: 2px 4px; cursor: pointer; border-radius: 3px; }
#gtchat .users div:hover { background: #eef; }
#gtchat .users div.you { cursor: default; font-weight: bold; }
#gtchat.room-dm .messages { background: var(--dm); }

#gtchat .msg { padding: 0; line-height: 1.25; margin: 1px 0; word-wrap: break-word; }
#gtchat .msg.hilite { background: #fff7d6; }
#gtchat .msg .mention { color: #0b6e3f; font-weight: bold; }
#gtchat .msg .t { color: var(--muted); font-size: 10px; margin-right: 4px; }
#gtchat .msg .n { color: var(--nick); font-weight: normal; }   /* as in the old chat (its camchat theme set nicknames to normal weight) */
#gtchat .msg.me { color: var(--me); font-style: italic; }
#gtchat .msg.notice { color: var(--notice); }
#gtchat .msg.system { color: var(--system); font-style: italic; }
#gtchat .msg.k-alert { background: var(--alert-bg); border: 1px solid #e0c060; padding: 4px 6px; margin: 3px 0; font-weight: bold; }
#gtchat .msg.local { color: var(--ink); }
#gtchat .msg.deleted { color: var(--muted); font-style: italic; }
#gtchat .msg .hl { color: #F7DC6F; font-weight: bold; }   /* outlier intervals, as on the old chat */
#gtchat .msg .gtwords { color: #3c763d; }                /* /gt text, as on the old chat */
#gtchat .msg a { color: #0645ad; }
#gtchat .msg a.g { color: #0b6e3f; text-decoration: none; border-bottom: 1px dotted #0b6e3f; }
#gtchat .msg .you { font-weight: bold; }
/* admin delete: nothing shows until the pointer is on that line, then a faint x; a first click only arms it ("delete?") */
#gtchat .msg .x { color: #999; cursor: pointer; margin-left: 6px; font-size: 10px; display: none; user-select: none; }
#gtchat.admin .msg:hover .x { display: inline; }
#gtchat.admin .msg .x:hover { color: #c00; }
#gtchat.admin .msg .x.arm { display: inline; color: #fff; background: #c00; padding: 0 4px; border-radius: 2px; }
#gtchat .msg:hover .x.own { display: inline; }
#gtchat .msg .x.own:hover { color: #c00; }
#gtchat .msg .x.own.arm { display: inline; color: #fff; background: #c00; padding: 0 4px; border-radius: 2px; }
#gtchat .msg.ghost { opacity: .6; border-left: 2px dashed #c00; padding-left: 4px; }
#gtchat .msg.ghost .gh { color: #c00; font-size: 10px; font-style: italic; margin-left: 6px; }
#gtchat .msg .em { font-size: inherit; line-height: 1; font-style: normal; }
#gtchat img.emoji { height: 1.25em; width: 1.25em; vertical-align: -0.25em; margin: 0 .04em; display: inline; }

#gtchat .input-row { position: relative; display: flex; border-top: 1px solid var(--line); }
#gtchat .input-row input { flex: 1; min-width: 0; border: none; padding: 7px 8px; font: inherit; font-family: "Twemoji Input", Verdana, Geneva, sans-serif; background: var(--input-bg); color: var(--ink); outline: none; }
#gtchat .input-row button { border: none; border-left: 1px solid var(--line); background: #f0f0f0; color: var(--ink); padding: 0 14px; font: inherit; cursor: pointer; }
#gtchat .input-row button.emoji-btn { padding: 0 8px; line-height: 0; display: flex; align-items: center; justify-content: center; align-self: stretch; background: var(--input-bg); border-left: none; }
#gtchat .input-row button.emoji-btn img { width: 20px; height: 20px; display: block; pointer-events: none; opacity: .75; }
#gtchat .input-row button.emoji-btn:hover img { opacity: 1; }
#gtchat .input-row button.off { background: #e8b4b4; color: #6b1a1a; cursor: default; }   /* not connected; hover shows why */
#gtchat .suggest { position: absolute; bottom: 100%; left: 0; background: var(--bg); border: 1px solid var(--line); box-shadow: 0 -2px 6px rgba(0,0,0,.15); min-width: 160px; z-index: 5; display: none; }
#gtchat .suggest div { padding: 3px 8px; cursor: pointer; }
#gtchat .suggest div.sel { background: #dde8f5; }
#gtchat .emoji-panel { position: absolute; bottom: 100%; right: 0; width: 318px; max-width: 100%; max-height: 300px; overflow-y: auto; background: var(--bg); border: 1px solid var(--line); box-shadow: 0 -2px 8px rgba(0,0,0,.18); padding: 6px; display: none; z-index: 6; }
#gtchat .emoji-panel.gtc-open { display: block; }
#gtchat .emoji-panel .sec { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 4px 2px 2px; }
#gtchat .emoji-panel .grid { display: flex; flex-wrap: wrap; gap: 1px; }
#gtchat .emoji-panel .grid span { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 4px; font-size: 20px; }
#gtchat .emoji-panel .grid span:hover { background: #dde8f5; }
#gtchat .emoji-panel img.emoji { height: 22px; width: 22px; vertical-align: middle; margin: 0; }

#gtchat .gtc-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.4); display: none; align-items: center; justify-content: center; z-index: 2000; }
#gtchat .gtc-modal.gtc-inside { position: absolute; z-index: 20; }      /* nickname prompt covers only the chat */
#gtchat .gtc-modal.gtc-open { display: flex; }
#gtchat .gtc-modal-box { background: #fff; color: #1a1a1a; padding: 14px; border: 1px solid #000; width: 280px; max-width: 94%; display: flex; flex-direction: column; gap: 6px; font: inherit; }
/* nickname prompt: one compact row so it fits even when the chat is only a few lines tall */
#gtchat .gtc-inside .gtc-modal-box { width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 8px 10px; gap: 6px; }
#gtchat .gtc-inside .gtc-modal-box input { width: 170px; padding: 4px 6px; }
#gtchat .gtc-inside .gtc-modal-box button { padding: 4px 12px; }
#gtchat .gtc-inside .error { flex-basis: 100%; min-height: 0; }
#gtchat .gtc-modal-box input { padding: 6px; font: inherit; border: 1px solid #999; }
#gtchat .gtc-modal-box button { padding: 6px; font: inherit; cursor: pointer; border: 1px solid #999; background: #f0f0f0; }
#gtchat .error { color: #c00; min-height: 14px; font-size: 11px; }
#gtchat .gtc-modal-box.help { width: 1120px; max-width: 94vw; max-height: 90vh; overflow-y: auto; gap: 10px; padding: 18px; }
#gtchat .help-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
#gtchat .gtc-modal-box button.linkbtn { background: none; border: none; color: #666; font: inherit; cursor: pointer; text-decoration: underline; padding: 0; }
/* help: rows flow into up to three columns when the popup is wide enough (one on phones) */
#gtchat .help-grid { columns: 3 290px; column-gap: 24px; font-size: 11.5px; min-width: 0; }   /* min-width: a flex item would otherwise refuse to shrink below one column */
#gtchat .help-grid .hsec { padding: 8px 4px 3px; color: #666; font-weight: bold; border-bottom: 1px solid #d9d9d9; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; break-after: avoid; break-inside: avoid; }
#gtchat .help-grid .hsec:first-child { padding-top: 0; }
#gtchat .help-grid .hrow { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 8px; padding: 4px; border-bottom: 1px solid #f0f0f0; break-inside: avoid; }
#gtchat .help-grid .hk { overflow-wrap: anywhere; }
#gtchat .help-grid code { background: #f3f3f3; padding: 1px 4px; border-radius: 3px; font-size: 11px; }
#gtchat .help-foot { color: #666; font-size: 10.5px; }

@media (max-width: 600px) { #gtchat .users { display: none; } body.gtc-page #gtchat { margin: 0; height: 100vh; border: none; } }

/* dark theme only where the host opts in (the standalone page); the dashboard is a light page */
@media (prefers-color-scheme: dark) {
  body.gtc-page { background: #0d0e10; }
  #gtchat.gtc-autotheme { --bg: #16181c; --ink: #e6e6e6; --muted: #9a9a9a; --line: #333; --nick: #7fd3d3; --me: #e0b068; --notice: #8cc4f0; --system: #999;
                          --alert-bg: #4a3a00; --dm: #1c2230; --tab-bg: #111; --input-bg: #1e2126; }
  #gtchat.gtc-autotheme .tab { background: #1c1e22; }
  #gtchat.gtc-autotheme .tab.active { background: var(--bg); border-bottom-color: var(--bg); }
  #gtchat.gtc-autotheme .msg a.g { color: #6cc79a; border-bottom-color: #6cc79a; }
  #gtchat.gtc-autotheme .users div:hover, #gtchat.gtc-autotheme .suggest div.sel, #gtchat.gtc-autotheme .emoji-panel .grid span:hover { background: #26303d; }
  #gtchat.gtc-autotheme .msg.hilite { background: #3a3414; }
  #gtchat.gtc-autotheme .input-row button { background: #26292e; }
  #gtchat.gtc-autotheme .input-row button.emoji-btn { background: var(--input-bg); }
}

/* The text box is a plain input, so it cannot hold images. It uses the Twemoji colour font
   for emoji characters only (unicode-range), so what you type matches what everyone sees. */
@font-face { font-family: "Twemoji Input"; src: url("twemoji/Twemoji.Mozilla.ttf") format("truetype"); font-display: swap; size-adjust: 125%;
  unicode-range: U+200D, U+20E3, U+2139, U+2194-21AA, U+231A-23FF, U+24C2, U+25AA-25FE, U+2600-27BF, U+2934-2935, U+2B05-2B55, U+3030, U+303D, U+3297-3299, U+FE0F, U+1F000-1FAFF, U+E0020-E007F; }

/* the chat's own emoji (private-use characters) for the text box; built by deploy/build-custom-emoji-font.py */
@font-face { font-family: "Twemoji Input"; src: url("custom/gtchat-emoji.ttf?v=1") format("truetype"); font-display: swap; size-adjust: 125%; unicode-range: U+E900-E9FF; }

/* name colour picker */
#gtchat .gtc-modal-box.gtc-colours { width: 340px; align-items: stretch; }
#gtchat .gtc-wheel { width: 220px; height: 220px; align-self: center; display: block; }
#gtchat .gtc-wheel [data-c] { cursor: pointer; stroke: #fff; stroke-width: 1; }
#gtchat .gtc-wheel [data-c]:hover { stroke: #000; stroke-width: 1.5; }
#gtchat .gtc-wheel [data-c].on { stroke: #000; stroke-width: 3; paint-order: stroke; }
#gtchat .gtc-colprev { font-size: 12px; color: #1a1a1a; text-align: center; }
#gtchat .gtc-colours .gtc-actions { justify-content: center; flex-wrap: wrap; }
#gtchat .users div.you { cursor: pointer; }

/* "what changed" dialog */
#gtchat .gtc-modal-box.gtc-changes { width: 460px; }
#gtchat .gtc-changes .gtc-relhead { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #666; margin-top: 4px; border-top: 1px solid #ddd; padding-top: 8px; }
#gtchat .gtc-changes .help-head + .gtc-relhead { border-top: 0; padding-top: 0; }
#gtchat .gtc-changes .gtc-rel b { font-size: 11px; }
#gtchat .gtc-changes .gtc-rel ul { margin: 3px 0 4px; padding-left: 18px; font-size: 12px; line-height: 1.45; color: #1a1a1a; }
#gtchat .gtc-changes .gtc-rel li { margin-bottom: 3px; }

/* chat admin shield in front of a name */
#gtchat .gtc-shield { width: 0.95em; height: 0.95em; vertical-align: -0.12em; margin-right: 2px; display: inline-block; }
#gtchat .gtc-gticon { width: 0.95em; height: 0.95em; vertical-align: -0.12em; margin-right: 3px; display: inline-block; border-radius: 50%; }

/* touch and trackpad: scrolling inside the chat does not carry on into the page */
#gtchat, #gtchat .messages, #gtchat .users, #gtchat .gtc-modal-box, #gtchat .gtc-combo-list, #gtchat #gtc-messages, #gtchat #gtc-users { overscroll-behavior: contain; }

/* ---- dark theme (/theme dark): the chat box only; the host page keeps its own colours ---- */
#gtchat.gtc-dark { --bg: #16181c; --ink: #e6e6e6; --muted: #9a9a9a; --line: #34373d; --nick: #7fd3d3; --me: #e0b068; --notice: #8cc4f0; --system: #9a9a9a;
                   --alert-bg: #3d3208; --dm: #1c2230; --tab-bg: #101114; --input-bg: #1e2126; border-color: #000; color-scheme: dark; }
#gtchat.gtc-dark .tab { background: #1f2227; color: var(--muted); }
#gtchat.gtc-dark .tab.active { background: var(--bg); color: var(--ink); border-bottom-color: var(--bg); }
#gtchat.gtc-dark .users div:hover, #gtchat.gtc-dark .suggest div.sel, #gtchat.gtc-dark .emoji-panel .grid span:hover { background: #26303d; }
#gtchat.gtc-dark .msg.hilite { background: #3a3414; }
#gtchat.gtc-dark .msg a, #gtchat.gtc-dark .msg .gtc-update a { color: #8ab4f8; }
#gtchat.gtc-dark .msg a.g { color: #6cc79a; border-bottom-color: #6cc79a; }
#gtchat.gtc-dark .msg .mention { color: #6cc79a; }
#gtchat.gtc-dark .msg .gtwords { color: #8fd18f; }
#gtchat.gtc-dark .msg .gtc-update, #gtchat.gtc-dark .msg.k-alert { border-color: #7a6420; }
#gtchat.gtc-dark .input-row button { background: #26292e; color: var(--ink); }
#gtchat.gtc-dark .input-row button.emoji-btn { background: var(--input-bg); }
#gtchat.gtc-dark .input-row button.off { background: #5a2626; color: #f0c0c0; }
#gtchat.gtc-dark .input-row input { color: var(--ink); }
#gtchat.gtc-dark .gtc-joinbar button { background: #26292e; color: var(--ink); border-color: #555; }
/* dialogs */
#gtchat.gtc-dark .gtc-modal-box { background: #1b1e23; color: var(--ink); border-color: #000; }
#gtchat.gtc-dark .gtc-modal-box input, #gtchat.gtc-dark .gtc-form input:not([type=checkbox]):not([type=radio]), #gtchat.gtc-dark .gtc-form textarea { background: #121417; color: var(--ink); border-color: #4a4e55; }
#gtchat.gtc-dark .gtc-modal-box button { background: #2a2e34; color: var(--ink); border-color: #4a4e55; }
#gtchat.gtc-dark .gtc-form .gtc-actions button[type=submit] { background: #2e7d32; border-color: #2e7d32; color: #fff; }
#gtchat.gtc-dark .gtc-modal-box button.linkbtn { background: none; color: var(--muted); }
#gtchat.gtc-dark .gtc-form label, #gtchat.gtc-dark .gtc-form .gtc-group, #gtchat.gtc-dark .help-foot, #gtchat.gtc-dark .help-grid .hsec, #gtchat.gtc-dark .gtc-changes .gtc-relhead { color: var(--muted); }
#gtchat.gtc-dark .gtc-form label.chk, #gtchat.gtc-dark .gtc-colprev, #gtchat.gtc-dark .gtc-changes .gtc-rel ul { color: var(--ink); }
#gtchat.gtc-dark .gtc-form .help-foot a, #gtchat.gtc-dark .gtc-form button.gtc-range { color: #8ab4f8; }
#gtchat.gtc-dark .gtc-form .gtc-combo-list { background: #121417; color: var(--ink); border-color: #4a4e55; }
#gtchat.gtc-dark .help-grid .hsec, #gtchat.gtc-dark .gtc-changes .gtc-relhead { border-color: #34373d; }
#gtchat.gtc-dark .help-grid .hrow { border-bottom-color: #26292e; }
#gtchat.gtc-dark .help-grid code { background: #2a2e34; color: var(--ink); }
#gtchat.gtc-dark .gtc-wheel [data-c] { stroke: #1b1e23; }
#gtchat.gtc-dark .gtc-wheel [data-c]:hover, #gtchat.gtc-dark .gtc-wheel [data-c].on { stroke: #fff; }

/* ---- Halloween theme (/theme halloween): black and orange, built on the dark theme ---- */
#gtchat.gtc-halloween { --bg: #0d0a07; --ink: #f4e7d6; --muted: #b29d86; --line: #4a2a0c; --nick: #ff9a3c; --me: #ffb347; --notice: #ffa95e; --system: #a8927a;
                        --alert-bg: #3a1e05; --dm: #1a1109; --tab-bg: #050403; --input-bg: #17110b; border-color: #ff7a1a; }
#gtchat.gtc-halloween .tab { background: #1a1109; color: var(--muted); border-color: #4a2a0c; }
#gtchat.gtc-halloween .tab.active { background: var(--bg); color: #ff7a1a; border-color: #ff7a1a; border-bottom-color: var(--bg); }
#gtchat.gtc-halloween .tabrow { border-bottom-color: #ff7a1a; }
#gtchat.gtc-halloween .users { border-left-color: #4a2a0c; }
#gtchat.gtc-halloween .msg a, #gtchat.gtc-halloween .msg .gtc-update a { color: #ffb347; }
#gtchat.gtc-halloween .msg a.g, #gtchat.gtc-halloween .msg .mention { color: #ff8c2a; border-bottom-color: #ff8c2a; }
#gtchat.gtc-halloween .msg .gtwords { color: #9fd36b; }
#gtchat.gtc-halloween .input-row { border-top-color: #ff7a1a; }
#gtchat.gtc-halloween .input-row button { background: #ff7a1a; color: #0d0a07; font-weight: bold; }
#gtchat.gtc-halloween .input-row button.emoji-btn { background: var(--input-bg); }
#gtchat.gtc-halloween .gtc-modal-box { background: #140e08; border-color: #ff7a1a; }
#gtchat.gtc-halloween .users div:hover, #gtchat.gtc-halloween .suggest div.sel, #gtchat.gtc-halloween .emoji-panel .grid span:hover { background: #3a1e05; }
/* the decorations: faint, never in the way of clicks */
#gtchat .gtc-spooky { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
#gtchat .gtc-spooky svg { position: absolute; overflow: visible; }
#gtchat .gtc-spooky .web { opacity: .42; }
#gtchat .gtc-spooky .moon { opacity: .22; }
#gtchat .gtc-spooky .bat { opacity: .8; animation: gtc-flap 1.6s ease-in-out infinite alternate; transform-origin: 50% 50%; }
#gtchat .gtc-spooky .bat.b2 { animation-duration: 1.2s; animation-delay: -.5s; }
#gtchat .gtc-spooky .bat.b3 { animation-duration: 1.9s; animation-delay: -1.1s; }
#gtchat .gtc-spooky .dangle { opacity: .75; animation: gtc-bob 4s ease-in-out infinite alternate; transform-origin: 50% 0; }
#gtchat .gtc-spooky .skel { opacity: .38; animation: gtc-sway 5s ease-in-out infinite alternate; transform-origin: 50% 0; }
@keyframes gtc-flap { from { transform: translateY(0) scaleY(1); } to { transform: translateY(-4px) scaleY(.75); } }
@keyframes gtc-bob { from { transform: translateY(-6px); } to { transform: translateY(8px); } }
@keyframes gtc-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { #gtchat .gtc-spooky .bat, #gtchat .gtc-spooky .dangle, #gtchat .gtc-spooky .skel { animation: none; } }

/* names in the room can be tapped to mention them */
#gtchat .msg .n[data-nick], #gtchat .msg .mn[data-nick] { cursor: pointer; }
#gtchat .msg .n[data-nick]:hover, #gtchat .msg .mn[data-nick]:hover { text-decoration: underline; }

#gtchat .gtc-joinbar button#gtc-join { background: #2e7d32; border-color: #2e7d32; color: #fff; font-weight: bold; }
#gtchat.gtc-halloween .gtc-joinbar button#gtc-join { background: #ff7a1a; border-color: #ff7a1a; color: #0d0a07; }

/* the help popup lists admin commands only to admins */
#gtchat:not(.admin) .gtc-adminonly { display: none; }

#gtchat .msg .gtc-quip { font-style: italic; color: var(--muted); }

/* a drawing on the video, posted from the dashboard's Draw tool: click to show it on your own video */
#gtchat .gtc-draw { font: inherit; font-size: 11px; line-height: 1.3; padding: 0 6px; margin: 0 2px; border: 1px solid #b4571a; border-radius: 9px; background: #fff4ec; color: #8a3f0f; cursor: pointer; }
#gtchat .gtc-draw:hover { background: #ffe6d3; }
#gtchat.gtc-dark .gtc-draw, #gtchat.gtc-halloween .gtc-draw { background: #3a2a1f; color: #ffb27a; border-color: #ff8c3a; }

/* polls: pinned as one line between the tab row and the room while open (poll.go) */
#gtchat { --poll-bg: #f4f8f8; --poll-line: #b9cfcf; --poll-bar: #cfe7e3; --poll-bar-mine: #9fd3c9; --poll-ink: #0b5e55; --poll-hover: #e6f1ef; }
#gtchat.gtc-dark, #gtchat.gtc-halloween { --poll-bg: #1a2224; --poll-line: #2f4a48; --poll-bar: #1f3d3a; --poll-bar-mine: #2b6a61; --poll-ink: #8fe0d2; --poll-hover: #213033; }
@media (prefers-color-scheme: dark) { #gtchat.gtc-autotheme { --poll-bg: #1a2224; --poll-line: #2f4a48; --poll-bar: #1f3d3a; --poll-bar-mine: #2b6a61; --poll-ink: #8fe0d2; --poll-hover: #213033; } }
#gtchat .gtc-poll { border-bottom: 1px solid var(--poll-line); background: var(--poll-bg); padding: 0 6px; flex: none; }
#gtchat .gtc-poll[hidden] { display: none; }
#gtchat .gtc-poll-strip { display: flex; align-items: center; gap: 4px; min-height: 26px; }
#gtchat .gtc-poll-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font: inherit; color: var(--ink); background: none; border: 0; padding: 4px 0; cursor: pointer; text-align: left; }
#gtchat .gtc-poll-ic img, #gtchat .gtc-poll-ic .emoji { width: 1.1em; height: 1.1em; vertical-align: -.2em; }
#gtchat .gtc-poll-q { font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#gtchat .gtc-poll-meta { margin-left: auto; color: var(--muted); font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
#gtchat .gtc-poll-chev { color: var(--poll-ink); font-size: 11px; white-space: nowrap; }
#gtchat .gtc-poll-x { font: inherit; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px 4px; }
#gtchat .gtc-poll-card { padding: 2px 0 8px; max-width: 460px; }
#gtchat .gtc-poll-by { color: var(--muted); font-size: 11px; margin-bottom: 5px; }
#gtchat .gtc-poll-opts { display: grid; gap: 4px; }
#gtchat .gtc-poll-opt { position: relative; display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); padding: 5px 7px; cursor: pointer; overflow: hidden; }
#gtchat .gtc-poll-opt:hover { background: var(--poll-hover); }
#gtchat .gtc-poll-opt:disabled { cursor: default; }
#gtchat .gtc-poll-opt:disabled:hover { background: var(--bg); }
#gtchat .gtc-poll-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--poll-bar); transition: width .35s ease; }
#gtchat .gtc-poll-opt.mine .gtc-poll-fill { background: var(--poll-bar-mine); }
#gtchat .gtc-poll-lab, #gtchat .gtc-poll-num { position: relative; }
#gtchat .gtc-poll-lab { flex: 1; min-width: 0; }
#gtchat .gtc-poll-opt.mine .gtc-poll-lab { font-weight: bold; color: var(--poll-ink); }
#gtchat .gtc-poll-lab small { font-weight: normal; font-size: 10.5px; }
#gtchat .gtc-poll-num { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
#gtchat .gtc-poll-foot { color: var(--muted); font-size: 10.5px; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { #gtchat .gtc-poll-fill { transition: none; } }

/* pasted pictures: a tiny thumbnail in the line; a click opens the full-screen viewer */
#gtchat .gtc-img { display: inline-block; vertical-align: middle; padding: 0; margin: 0 2px; border: 1px solid #9aa0a6; border-radius: 3px; background: #fff; cursor: zoom-in; line-height: 0; }
#gtchat .gtc-img img { height: 22px; width: auto; max-width: 44px; object-fit: cover; border-radius: 2px; display: block; }
#gtchat .gtc-img:hover { border-color: #2a6fb0; }
.gtc-lightbox { position: fixed; inset: 0; z-index: 2147483000; background: rgba(0, 0, 0, .9); display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.gtc-lightbox img { max-width: 96vw; max-height: 90vh; object-fit: contain; box-shadow: 0 4px 24px rgba(0, 0, 0, .6); background: #fff; }
.gtc-lightbox .gtc-lb-bar { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; color: #ddd; font: 13px/1.4 Verdana, Geneva, sans-serif; }
.gtc-lightbox .gtc-lb-bar a { color: #9cc9ff; }
.gtc-lightbox .gtc-lb-x { position: absolute; top: 10px; right: 14px; font-size: 22px; line-height: 1; color: #fff; background: rgba(255, 255, 255, .12); border: 0; border-radius: 50%; width: 38px; height: 38px; cursor: pointer; }
#gtchat .gtc-camview { margin-right: 8px; color: var(--muted); cursor: default; }
#gtchat .gtc-sarc { font-style: italic; }
#gtchat .gtc-tone { font-size: 10px; line-height: 1.3; padding: 0 5px; border: 1px solid #8a8f98; border-radius: 8px; color: #57606a; font-style: normal; white-space: nowrap; cursor: help; }
#gtchat.gtc-dark .gtc-tone, #gtchat.gtc-halloween .gtc-tone { border-color: #6e7681; color: #aab1ba; }