/* ============================================================================
   keffals.gg chat — stylesheet
   Clean-room implementation. Written from scratch against the target design
   language: a dense, dark, IRC-style stream chat.
   ============================================================================ */

/* ── Design tokens ─────────────────────────────────────────────────────────
   Plain hex facts (a colour value is not protectable expression). Named the
   same way the design language thinks about them so the file stays legible. */
:root {
  --bg:                #080808;
  --input-bg:          #0a0a0a;

  --text-1:            #dedede;
  --text-2:            #b9b9b9;
  --text-3:            #838383;
  --text-muted:        #999999;
  --text-place:        #666666;
  --text-time:         #26383b;
  --text-disabled:     #494949;

  --surface-1:         #030303;
  --surface-2:         #121212;
  --surface-3:         #181818;
  --surface-4:         #333333;

  --sel:               #700000;
  --emphasize:         #151515;
  --tagged:            #232323;
  --highlight:         #002547;

  --link:              #02c2ff;
  --link-hover:        #0088cc;
  --link-visited:      #a66be5;
  --green:             #6ca528;

  --accent:            #4a8ecc;
  --accent-light:      #4fb1f4;
  --ok:                #6ca528;
  --warn:              #e9a631;
  --err:               #c11515;

  --chrome-font: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
  --lines-font:  "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs: 14px;
  --line-h: 24px;
  --gutter: 6px;
}

/* ── Reset / base ──────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: inherit; }

html { box-sizing: border-box; height: 100%; }

::selection {
  color: #fff;
  /* Blink forces transparency on selections; an alpha value keeps browsers
     consistent with each other. */
  background: rgba(112, 0, 0, 0.99);
}

html,
body {
  height: 100%;
  margin: 0;
  position: relative;
  color: var(--text-muted);
  background: var(--bg);
  overflow: hidden;
}

body,
textarea,
input,
button {
  font-family: var(--chrome-font);
  font-size: var(--fs);
  line-height: 1.42857143;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern";
}

.hidden { display: none !important; }
.dim    { color: var(--text-3); }

/* ── Shell layout ──────────────────────────────────────────────────────── */
#chat {
  display: grid;
  grid-template-rows: auto 1fr auto;
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 300px;
  overflow: hidden;
  background: var(--bg);
}

/* Tab strip across the top (the design language's "windows" row). */
#chat-windows-select {
  display: flex;
  align-items: flex-end;
  background: var(--surface-3);
  white-space: nowrap;
  z-index: 100;
  user-select: none;
}

#chat-windows-select .tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 16px;
  margin-top: 5px;
  padding: 0 10px;
  border-radius: 6px 6px 0 0;
  color: var(--text-3);
  font-size: var(--fs);
  line-height: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#chat-windows-select .tab.win-main {
  color: var(--text-1);
  background: var(--surface-1);
}

#chat-windows-select .tab.win-main .hash {
  color: var(--accent-light);
  font-weight: 700;
}

#chat-windows-select .spacer { flex: 1; }

/* Connection indicator */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-place);
  flex: 0 0 auto;
}
.dot.ok         { background: var(--ok); }
.dot.err        { background: var(--err); }
.dot.connecting { background: var(--warn); animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

#conn-label { font-size: 12px; color: var(--text-3); }

/* ── Output ────────────────────────────────────────────────────────────── */
#chat-output-frame {
  grid-row: 2;
  overflow: hidden;
  width: 100%;
}

#chat-output {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
  font-family: var(--lines-font);
  font-size: var(--fs);
  font-weight: 400;
  line-height: var(--line-h);
  padding-bottom: 2px;
}

/* Scrollbar — dark, unobtrusive, same feel as the chrome. */
#chat-output::-webkit-scrollbar,
.scrollable::-webkit-scrollbar { width: 10px; }
#chat-output::-webkit-scrollbar-track,
.scrollable::-webkit-scrollbar-track { background: transparent; }
#chat-output::-webkit-scrollbar-thumb,
.scrollable::-webkit-scrollbar-thumb {
  background: var(--surface-4);
  border-radius: 5px;
}
#chat-output::-webkit-scrollbar-thumb:hover,
.scrollable::-webkit-scrollbar-thumb:hover { background: #4a4a4a; }
#chat-output { scrollbar-width: thin; scrollbar-color: var(--surface-4) transparent; }

/* ── Message lines ─────────────────────────────────────────────────────── */
.line {
  clear: both;
  padding: 3px 12px 3px 7px;
  margin-top: 1px;
  margin-bottom: 6px;
  color: var(--text-2);
  word-wrap: break-word;
  overflow-wrap: break-word;
  transition: background-color 120ms linear;
}
.line:hover { background: var(--emphasize); }

.line .time {
  font-size: var(--fs);
  color: var(--text-time);
  margin-right: 5px;
  user-select: none;
}

.line .nick {
  font-family: Roboto, Helvetica, "Trebuchet MS", Verdana, sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: color 300ms cubic-bezier(0.25, 0.8, 0.25, 1);
}
.line .nick:hover { color: #fff; text-decoration: underline; }

.line .sep { color: var(--text-2); }

.line .text { color: var(--text-2); }

.line .text.greentext { color: var(--green); }

.line a { color: var(--link); text-decoration: none; }
.line a:visited { color: var(--link-visited); }
.line a:hover  { color: var(--link-hover); text-decoration: underline; }

/* /me actions read as italic body text with a leading role marker. */
.line.action .text { font-style: italic; }

/* System notices */
.line.system {
  color: var(--text-3);
  font-size: 12px;
  font-style: italic;
}

/* Flair chips */
.line .badge,
#userlist .badge {
  display: inline-block;
  margin-right: 4px;
  padding: 0 4px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 0.4px;
  vertical-align: 1px;
  color: #000;
  text-shadow: none;
  user-select: none;
}

/* ── Input ─────────────────────────────────────────────────────────────── */
#chat-input-frame {
  grid-row: 3;
  width: 100%;
  background: var(--input-bg);
  z-index: 230;
}

#chat-input-frame .container { width: 100%; }

#chat-input-frame .row {
  display: flex;
  align-items: flex-end;
  width: 100%;
}

#chat-input-frame .col { display: flex; align-items: flex-end; }
#chat-input-frame .col.grow { flex: 1 1 auto; min-width: 0; }

#chat-input-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 3.7em;
  max-height: 16em;
  display: flex;
}

#chat-input {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  margin: 0;
  padding: 5px;
  border: 0;
  border-top: 1px solid var(--sel);
  outline: none;
  resize: none;
  background: var(--input-bg);
  color: var(--text-2);
  font-size: var(--fs);
  line-height: 1.42857143;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

#chat-input::placeholder { color: var(--text-place); }
#chat-input:disabled { color: var(--text-disabled); cursor: not-allowed; }

#chat-tools-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px 6px 0;
  user-select: none;
}

.chat-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-3);
  font-size: 19px;
  cursor: pointer;
  transition: color 150ms linear, background-color 150ms linear;
}
.chat-tool-btn:hover { color: var(--text-1); background: var(--surface-3); }
.chat-tool-btn:disabled { color: var(--text-disabled); cursor: not-allowed; background: transparent; }

#auth-area {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 8px 0;
  white-space: nowrap;
}

#auth-area .pill {
  font-size: 12px;
  font-weight: 500;
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
button.primary,
button.ghost {
  font-family: var(--chrome-font);
  font-size: 13px;
  line-height: 1;
  padding: 8px 14px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 150ms linear, color 150ms linear,
              border-color 150ms linear;
}

button.primary {
  background: var(--accent);
  color: #fff;
}
button.primary:hover { background: var(--accent-light); }

button.ghost {
  background: transparent;
  color: var(--text-3);
  border-color: var(--surface-4);
}
button.ghost:hover { color: var(--text-1); border-color: #4a4a4a; }

/* Floating tool buttons, top-right of the chat surface. */
#chat-panel-tools {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 240;
  display: flex;
  padding: 4px 6px;
}

.fasfab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-3);
  font-size: 15px;
  cursor: pointer;
  transition: color 150ms linear, background-color 150ms linear;
}
.fasfab:hover { color: var(--text-1); background: var(--surface-3); }

/* ── Slide-in panels ───────────────────────────────────────────────────── */
.chat-menu {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  z-index: 220;
  background: var(--surface-3);
}
.chat-menu.right { right: 0; }
.chat-menu.left  { left: 0; }

#userlist-pane:not(.hidden) { animation: slide-in-right 160ms ease-out; }
#chat-settings:not(.hidden) { animation: slide-in-right 160ms ease-out; }
@keyframes slide-in-right {
  from { transform: translateX(100%); opacity: 0.4; }
  to   { transform: translateX(0);    opacity: 1; }
}

.chat-menu .list-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface-3);
}

.chat-menu .toolbar {
  position: relative;
  border-bottom: 1px solid var(--surface-4);
  flex: 0 0 auto;
}

.chat-menu .toolbar h5 {
  margin: 0;
  font-size: var(--fs);
  font-weight: normal;
  line-height: 35px;
  color: var(--text-muted);
  user-select: none;
}

.chat-menu .toolbar h5 span {
  display: inline-block;
  margin: 0 10px;
  line-height: 35px;
}

.chat-menu .menu-close {
  float: right;
  width: 35px;
  text-align: center;
  line-height: 35px;
  font-size: 16px;
  color: var(--text-3);
  cursor: pointer;
  background: none;
  border: 0;
}
.chat-menu .menu-close:hover { color: var(--text-1); }

.chat-menu .scrollable {
  flex: 1 1 auto;
  overflow-y: auto;
  outline: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-4) transparent;
}

.chat-menu .content { padding: 20px 0; }

/* User list */
#userlist {
  margin: 0;
  padding: 0;
  list-style: none;
}

#userlist li {
  display: block;
  position: relative;
  margin: 0;
  padding: 0 32px;
  line-height: 22px;
  cursor: pointer;
}
#userlist li:hover { background: var(--emphasize); }

#userlist .nick {
  font-family: Roboto, Helvetica, "Trebuchet MS", Verdana, sans-serif;
  font-weight: 500;
}

/* ── Emotes ────────────────────────────────────────────────────────────── */
/* The picker slides in from the LEFT (the users/settings panels come from the
   right), matching the tool button that opens it. */
#emote-pane:not(.hidden) { animation: slide-in-left 160ms ease-out; }

@keyframes slide-in-left {
  from { transform: translateX(-100%); opacity: 0.4; }
  to   { transform: translateX(0);     opacity: 1; }
}

.emote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 6px;
  padding: 0 20px;
}

.emote-grid .emote-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 2px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--surface-2);
  cursor: pointer;
  overflow: hidden;
}
.emote-grid .emote-btn:hover {
  border-color: var(--accent);
  background: var(--surface-4);
}
.emote-grid .emote-btn img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.emote-grid .emote-empty {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--text-3);
}

/* Emotes inside message lines. Capped against the line height so a tall emote
   stretches its own line instead of shunting the whole stream. */
img.emote {
  max-height: var(--line-h);
  max-width: 96px;
  margin: -2px 1px;
  vertical-align: middle;
  object-fit: contain;
}

/* ── Settings panel ────────────────────────────────────────────────────── */
#chat-settings-form { margin: 12px 20px 20px 20px; }

#chat-settings-form h4 {
  margin: 18px 0 8px 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-3);
}
#chat-settings-form h4:first-child { margin-top: 0; }

#chat-settings-form .row {
  display: block;
  margin: 0 0 12px 0;
  font-size: 13px;
  color: var(--text-2);
}

#chat-settings-form .row input[type="text"] {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 11px;
  border: 1px solid var(--surface-4);
  border-radius: 4px;
  background: var(--surface-1);
  color: var(--text-2);
  font-size: 13px;
  outline: none;
}
#chat-settings-form .row input[type="text"]:focus { border-color: var(--accent); }

#chat-settings-form .check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 9px 0;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}
#chat-settings-form .check input { accent-color: var(--accent); cursor: pointer; }

#chat-settings-form .hint {
  margin: 14px 0 16px 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-3);
}

#chat-settings-form button.primary { width: 100%; }

/* ── Loading ───────────────────────────────────────────────────────────── */
#chat-loading {
  position: absolute;
  inset: 0;
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.pulse-container {
  width: 120px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.pulse-bubble {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #d3d3d3;
}
.pulse-bubble-1 { animation: pulse 0.4s ease 0s   infinite alternate; }
.pulse-bubble-2 { animation: pulse 0.4s ease 0.2s infinite alternate; }
.pulse-bubble-3 { animation: pulse 0.4s ease 0.4s infinite alternate; }

@keyframes pulse {
  from { transform: scale(0.55); opacity: 0.35; }
  to   { transform: scale(1);    opacity: 1; }
}

.catch-feedback {
  width: 100%;
  margin-top: 14px;
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
  opacity: 0;
  animation: catch-feedback 12s linear forwards;
}
@keyframes catch-feedback { 0%, 98% { opacity: 0; } 100% { opacity: 1; } }

/* ── Overlays (auth / settings modals) ─────────────────────────────────── */
.modal {
  position: absolute;
  inset: 0;
  z-index: 260;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(3, 3, 3, 0.75);
  overscroll-behavior: contain;
}

.modal-box {
  width: 100%;
  max-width: 340px;
  background: var(--surface-3);
  border: 1px solid var(--surface-4);
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.modal-head {
  position: relative;
  border-bottom: 1px solid var(--surface-4);
}

.modal-head h3 {
  margin: 0;
  padding: 0 0 0 12px;
  font-size: var(--fs);
  font-weight: normal;
  line-height: 35px;
  color: var(--text-muted);
}

.modal-head .modal-close {
  float: right;
  width: 35px;
  height: 35px;
  border: 0;
  background: none;
  color: var(--text-3);
  font-size: 20px;
  line-height: 35px;
  text-align: center;
  cursor: pointer;
}
.modal-head .modal-close:hover { color: var(--text-1); }

/* Auth tabs read as the chrome's tab strip. */
.modal-head .tabs { display: flex; align-items: flex-end; }

.modal-head .tab {
  min-width: 16px;
  margin-top: 5px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px 6px 0 0;
  background: transparent;
  color: var(--text-3);
  font-size: var(--fs);
  line-height: 32px;
  cursor: pointer;
  transition: color 150ms linear, background-color 150ms linear;
}
.modal-head .tab:hover { color: var(--text-1); }
.modal-head .tab.active {
  color: var(--text-1);
  background: var(--surface-1);
}

/* ── Auth / settings forms ─────────────────────────────────────────────── */
.auth-form,
.settings-body {
  margin: 0;
  padding: 18px 20px 20px 20px;
}

.auth-form label,
.settings-body label.row {
  display: block;
  margin: 0 0 13px 0;
  font-size: 13px;
  color: var(--text-2);
}

.auth-form label input,
.settings-body label.row input[type="text"] {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 11px;
  border: 1px solid var(--surface-4);
  border-radius: 4px;
  background: var(--surface-1);
  color: var(--text-2);
  font-size: 13px;
  outline: none;
  transition: border-color 150ms linear;
}
.auth-form label input:focus,
.settings-body label.row input[type="text"]:focus { border-color: var(--accent); }

.auth-form button.primary { width: 100%; margin-top: 4px; }

.form-err {
  min-height: 1em;
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.45;
  color: #e56b77;
}

.settings-body .check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 9px 0;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}
.settings-body .check input { accent-color: var(--accent); cursor: pointer; }

.settings-body .hint {
  margin: 14px 0 16px 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-3);
}

.settings-body button.primary { width: 100%; }

/* ── Overlay mode (?t=overlay) ────────────────────────────────────────────
   obs.keffals.gg redirects to chat.keffals.gg/?t=overlay for an OBS browser
   source. Messages only: no tab strip, no composer, no tool buttons, no panels,
   and a transparent background so the chat sits directly on the scene.

   This is pure chrome removal — app.js adds `overlay` to <body> and nothing
   else changes, so the socket, backlog replay and auto-scroll behave exactly as
   in the normal view. Keep it that way: hiding is a CSS concern. */
body.overlay #chat-windows-select,
body.overlay #chat-input-frame,
body.overlay #chat-panel-tools,
body.overlay #userlist-pane,
body.overlay #chat-settings,
body.overlay #emote-pane,
body.overlay #auth-modal,
body.overlay #chat-loading {
  display: none !important;
}

/* 🔴 <html> paints the viewport canvas. `html, body { background: var(--bg) }`
   above sets it on BOTH, so clearing only <body> leaves the canvas opaque and a
   browser source renders a solid #080808 box instead of a transparent overlay.
   app.js adds `overlay` to documentElement as well as body for this rule. */
html.overlay,
body.overlay,
body.overlay #chat,
body.overlay #chat-output-frame {
  background: transparent;
}

/* The normal view tints the hovered line. On a stream that paints an opaque bar
   across the video, so drop it too. */
body.overlay .line:hover { background: transparent; }

/* Streams are layered over arbitrary video, so give each line its own halo
   rather than putting a panel behind the whole stream (which would hide the
   video). */
body.overlay #chat-output .line {
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.85);
}

/* A scrollbar on a stream overlay is just noise. */
body.overlay #chat-output { scrollbar-width: none; }
body.overlay #chat-output::-webkit-scrollbar { width: 0; }

/* ── Alerts mode (?t=alerts) ────────────────────────────────────────────
   Same transparent-canvas trick as overlay mode, but instead of chat lines it
   shows animated alert popups (donation / subscription). #chat is hidden and
   #alerts-overlay becomes the visible surface. */
html.alerts,
body.alerts {
  background: transparent;
}
body.alerts #chat {
  display: none !important;
}

#alerts-overlay {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px;
  pointer-events: none;
  font-family: var(--lines-font);
}
body.alerts #alerts-overlay {
  display: flex;
}

#alerts-overlay .alert {
  --accent: #02c2ff;
  background: rgba(8, 8, 8, 0.82);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  padding: 10px 16px;
  min-width: 220px;
  max-width: 440px;
  color: #e0e0e0;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.55);
  animation: alert-in 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28) both;
}
#alerts-overlay .alert.leaving {
  animation: alert-out 0.4s ease forwards;
}
#alerts-overlay .alert-head {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 2px;
}
#alerts-overlay .alert-body {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  word-wrap: break-word;
}
#alerts-overlay .alert-msg {
  font-size: 13px;
  font-style: italic;
  color: #b9b9b9;
  margin-top: 4px;
  word-wrap: break-word;
}
@keyframes alert-in {
  from { transform: translateX(-32px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes alert-out {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(-32px); opacity: 0; }
}

/* ── Small screens ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #auth-area .pill { max-width: 10ch; }
  .line { padding-right: 7px; }
}