:root {
  color-scheme: dark;
  --bg: #090b10;
  --panel: #111722;
  --panel-soft: #151a25;
  --border: #2a3444;
  --gold: #d8aa50;
  --gold-bright: #f1ca75;
  --text: #f4f6fa;
  --muted: #939dae;
  --danger: #ff6565;
  --success: #55d68a;
}

* { box-sizing: border-box; }
html, body, #root { width: 100%; height: 100%; margin: 0; }
body {
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--text);
  background: var(--bg);
  font: 13px/1.35 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }

.chat-shell {
  position: relative;
  width: min(279px, 100vw);
  height: min(439px, 100dvh);
  overflow: hidden;
  border: 1px solid #b0883e;
  border-radius: 6px;
  background: var(--panel-soft);
  box-shadow:
    0 0 0 1px #2d1d07,
    0 0 11px rgba(216, 170, 80, .16),
    0 16px 38px rgba(0, 0, 0, .4),
    inset 0 0 0 1px rgba(241, 202, 117, .2),
    inset 0 0 8px rgba(94, 58, 10, .18);
}
.chat-frame { display: flex; height: 100%; min-height: 0; overflow: hidden; flex-direction: column; border-radius: 5px; }
.chat-header {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #151c28, #101620);
}
.chat-header > div { display: flex; min-width: 0; align-items: center; gap: 5px; }
.chat-header strong { color: var(--gold-bright); font-size: 11px; letter-spacing: .06em; white-space: nowrap; }
.chat-heading { flex: 0 1 auto; gap: 4px !important; }
.connection-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 7px var(--success); }
.viewer-count { display: inline-flex; min-width: 24px; align-items: center; gap: 3px; color: #b8c2d0; font-size: 9px; line-height: 1; white-space: nowrap; }
.viewer-count svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.sound-toggle { display: inline-grid; width: 19px; height: 19px; flex: 0 0 19px; place-items: center; padding: 0; border: 0; color: var(--gold-bright); background: transparent; }
.sound-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.sound-toggle:hover, .sound-toggle:focus-visible { color: #fff1c7; filter: drop-shadow(0 0 3px rgba(241, 202, 117, .28)); }
.account-actions { justify-content: flex-end; }
.account-name { max-width: 64px; overflow: hidden; color: #dce3ee; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.text-button {
  padding: 2px 4px;
  border: 0;
  color: var(--gold-bright);
  background: transparent;
  font-size: 10px;
}
.text-button:hover, .text-button:focus-visible { color: #fff1c7; text-decoration: underline; }

.message-output {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 7px 8px;
  background: linear-gradient(180deg, #0c1119, #090c12);
  scrollbar-color: #3b4657 transparent;
  scrollbar-width: thin;
}
.empty-state { margin: 28px 8px; color: var(--muted); text-align: center; font-size: 11px; }
.error-text, .form-error, .picker-error { color: var(--danger); }
.chat-message { padding: 5px 2px 6px; border-bottom: 1px solid rgba(84, 96, 116, .18); }
.message-heading { display: flex; min-width: 0; align-items: center; gap: 5px; }
.message-heading strong { overflow: hidden; color: var(--gold-bright); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.message-heading time {
  flex: 0 0 auto;
  margin-left: auto;
  color: #697487;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.chat-message p { margin: 2px 0 0; overflow-wrap: anywhere; color: #e5e9f0; font-size: 12px; white-space: pre-wrap; }
.message-gif { display: block; max-width: 100%; max-height: 145px; margin-top: 4px; border-radius: 4px; object-fit: contain; }
.trash-button {
  display: inline-grid;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  place-items: center;
  padding: 0;
  border: 0;
  color: #748095;
  background: transparent;
}
.trash-button:hover, .trash-button:focus-visible { color: var(--danger); }
.trash-button svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.chat-status {
  display: flex;
  height: 21px;
  min-height: 21px;
  align-items: center;
  overflow: hidden;
  padding: 0 8px;
  color: var(--muted);
  border-top: 1px solid var(--border);
  background: #10151e;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .012em;
  line-height: 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-status.is-connected { color: #b8c3d2; font-weight: 600; }
.composer { position: relative; flex: 0 0 auto; padding: 6px; background: #0e131c; }
.composer-tools { display: flex; align-items: center; gap: 4px; }
.composer textarea {
  min-width: 0;
  height: 32px;
  max-height: 64px;
  flex: 1;
  resize: none;
  padding: 7px 8px;
  color: var(--text);
  border: 1px solid #354052;
  border-radius: 5px;
  outline: none;
  background: #171e2a;
}
.composer textarea:focus { border-color: #8a7040; box-shadow: 0 0 0 1px rgba(216, 170, 80, .15); }
.tool-button, .send-button {
  height: 32px;
  padding: 0;
  border: 0;
  color: var(--gold-bright);
  background: transparent;
}
.tool-button { display: inline-grid; width: 29px; flex: 0 0 29px; place-items: center; }
.tool-button svg { display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.emoji-icon { width: 21px; height: 21px; stroke-width: 1.75; }
.emoji-icon .emoji-face { fill: currentColor; fill-opacity: .06; }
.emoji-icon .emoji-eye { fill: currentColor; stroke: none; }
.gif-icon { width: 27px; height: 19px; stroke-width: 1.25; }
.gif-icon .gif-letter { stroke-width: 1.45; }
.send-button { width: 24px; flex: 0 0 24px; font-size: 18px; }
.tool-button:hover:not(:disabled), .send-button:hover:not(:disabled) { color: #fff1c7; }

.picker-panel {
  position: absolute;
  right: 6px;
  bottom: calc(100% + 2px);
  left: 6px;
  z-index: 4;
  max-height: 220px;
  overflow: auto;
  padding: 9px;
  border: 1px solid #3a4659;
  border-radius: 6px;
  background: #121925;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .42);
}
.picker-close { position: absolute; top: 2px; right: 4px; border: 0; color: var(--muted); background: transparent; font-size: 18px; }
.emoji-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; padding-top: 8px; }
.emoji-grid button { height: 30px; padding: 0; border: 0; border-radius: 4px; background: transparent; font-size: 18px; }
.emoji-grid button:hover { background: #222c3b; }
.gif-picker form { display: flex; gap: 4px; padding: 9px 18px 7px 0; }
.gif-picker input { min-width: 0; flex: 1; padding: 6px; color: var(--text); border: 1px solid var(--border); border-radius: 4px; background: #0d131d; }
.gif-picker form button, .admin-actions button, .admin-users button { border: 1px solid #766035; border-radius: 4px; color: var(--gold-bright); background: #171e29; }
.gif-attribution { height: 13px; margin: 0 18px 7px 1px; }
.gif-attribution img { display: block; width: 105px; max-width: 100%; height: auto; }
.gif-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.gif-grid button { height: 58px; overflow: hidden; padding: 0; border: 0; border-radius: 3px; background: #080b10; }
.gif-grid img { width: 100%; height: 100%; object-fit: cover; }
.picker-error { margin: 2px 0 6px; font-size: 10px; }

.modal-layer { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 10px; background: rgba(4, 6, 9, .86); }
.modal-card { position: relative; width: 100%; max-height: 100%; overflow: auto; padding: 16px; border: 1px solid #3a4659; border-radius: 7px; background: #111824; box-shadow: 0 12px 35px #000; }
.modal-card h2 { margin: 0 0 12px; color: var(--gold-bright); font-size: 16px; }
.modal-card h3 { margin: 14px 0 6px; color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.icon-button { border: 0; color: var(--muted); background: transparent; }
.modal-close { position: absolute; top: 5px; right: 7px; z-index: 1; font-size: 20px; }
.auth-tabs { display: flex; gap: 5px; margin: 0 20px 13px 0; }
.auth-tabs button { padding: 4px 8px; border: 0; color: var(--muted); background: transparent; }
.auth-tabs button.active { color: var(--gold-bright); border-bottom: 1px solid var(--gold); }
.auth-card label { display: block; margin: 7px 0; color: var(--muted); font-size: 10px; }
.auth-card input { width: 100%; margin-top: 3px; padding: 7px; color: var(--text); border: 1px solid var(--border); border-radius: 4px; outline: 0; background: #0c1119; }
.auth-card input:focus { border-color: #8a7040; }
.form-note, .form-error { margin: 6px 0; font-size: 10px; }
.primary-button { width: 100%; margin-top: 8px; padding: 8px; border: 1px solid #8a7040; border-radius: 4px; color: #1d1607; background: var(--gold); font-weight: 700; }
.admin-actions { display: flex; gap: 6px; }
.admin-actions button { flex: 1; padding: 6px; }
.admin-actions .danger-button { border-color: #813b3b; color: #ff9c9c; }
.admin-users { max-height: 245px; overflow: auto; }
.admin-users > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(84, 96, 116, .2); }
.admin-users span { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.admin-users button { padding: 3px 6px; font-size: 10px; }

@media (max-width: 278px), (max-height: 438px) {
  .chat-shell { border: 0; border-radius: 0; box-shadow: none; }
  .chat-frame { border-radius: 0; }
  .chat-header { min-height: 38px; padding-block: 5px; }
  .message-output { padding-block: 5px; }
}