:root {
  color-scheme: dark;
  --bg: #101113;
  --panel: #191b1f;
  --line: #2b2f36;
  --text: #f2f3f5;
  --muted: #a8adb7;
  --accent: #56b6c2;
  --debug: #8f96a3;
  --chat-font-size: 15px;
  --chat-max-width: none;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.app {
  display: grid;
  grid-template-rows: auto auto 1fr;
  height: 100vh;
}

/* Query-string switches: ?chrome=0&panel=0&avatar=0&time=1&compact=1&shadow=1 */
body.no-chrome .topbar,
body.no-panel .authPanel {
  display: none;
}

body.no-chrome .app,
body.no-panel .app {
  grid-template-rows: 1fr;
}

body.no-chrome:not(.no-panel) .app {
  grid-template-rows: auto 1fr;
}

body.bridge-mode .feed,
body.bridge-mode .authPanel,
body.bridge-mode .actions {
  display: none;
}

body.bridge-mode .app {
  grid-template-rows: auto;
}

body.no-avatars .avatar {
  display: none;
}

body.no-badges .badges {
  display: none;
}

body.shadowed .feed {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

body.compact .feed {
  gap: 6px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
}

p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.helpLink {
  color: var(--accent);
  font-size: 13px;
  text-decoration: none;
}

.helpLink:hover {
  text-decoration: underline;
}

.boostyState {
  font-variant-numeric: tabular-nums;
}

.boostyState[data-kind="connected"],
.boostyState[data-kind="subscribed"] {
  color: var(--accent);
}

.boostyState[data-kind="blocked"],
.boostyState[data-kind="error"],
.boostyState[data-kind="boosty-error"],
.boostyState[data-kind="warning"] {
  color: #e8a33d;
}

.primary {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.primary label {
  flex: 1;
}

.blogState {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.blogState[data-kind="connected"] {
  color: var(--accent);
}

.blogState[data-kind="error"] {
  color: #e8a33d;
}

.advanced {
  margin-top: 14px;
}

.advanced summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
}

.advanced .authGrid {
  margin-top: 12px;
}

.subscription[disabled] {
  opacity: 0.55;
  cursor: default;
}

button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #22262c;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

button:hover {
  border-color: var(--accent);
}

.feed {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: var(--chat-font-size);
}

.authPanel {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: #14161a;
}

.authGrid {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) minmax(180px, 0.8fr) minmax(160px, 0.7fr);
  gap: 10px;
}

label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

input,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0f1114;
  color: var(--text);
  font: 13px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 9px 10px;
  resize: vertical;
}

.authActions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

#authState {
  color: var(--muted);
  font-size: 13px;
}

.subscriptions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

.subscription {
  text-align: left;
}

.message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  max-width: var(--chat-max-width);
}

.time {
  display: none;
  margin-right: 0.4em;
  color: var(--muted);
  font-size: 0.8em;
  font-variant-numeric: tabular-nums;
}

body.show-time .time {
  display: inline;
}

.avatar {
  flex: 0 0 calc(var(--chat-font-size) * 2);
  width: calc(var(--chat-font-size) * 2);
  height: calc(var(--chat-font-size) * 2);
  border-radius: 50%;
  object-fit: cover;
  background: #2b2f36;
}

/* Users without an avatar get a coloured initial instead of a broken image. */
.avatar.placeholder {
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #101215;
}

.body {
  /* Grow into the row: without this the block shrinks to its longest
     unbreakable run and the text wraps far short of the available width. */
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.45;
  padding-top: 4px;
}

.author {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.author::after {
  content: ":";
  margin-right: 0.35em;
  color: var(--muted);
  font-weight: 400;
}

.badges {
  display: inline-flex;
  gap: 0.25em;
  margin-right: 0.35em;
  vertical-align: 1px;
}

/* Without this the empty span still pushes the nickname right. */
.badges:empty {
  display: none;
}

.badge {
  font-size: 0.9em;
  line-height: 1;
}

.mention {
  color: var(--accent);
  font-weight: 600;
}

.text {
  white-space: pre-wrap;
  /* `anywhere` would let the flex item collapse to one character wide. */
  overflow-wrap: break-word;
}

.smile {
  height: calc(var(--chat-font-size) * 1.5);
  width: auto;
  vertical-align: -5px;
  margin: 0 1px;
}

.attachment {
  display: block;
  max-width: 220px;
  max-height: 220px;
  margin-top: 4px;
  border-radius: 8px;
}

.text a {
  color: var(--accent);
}

.debug {
  color: var(--debug);
  font-size: 13px;
}

.debug .author {
  color: var(--debug);
}

@media (max-width: 820px) {
  .topbar,
  .authActions {
    align-items: stretch;
    flex-direction: column;
  }

  .authGrid {
    grid-template-columns: 1fr;
  }
}

/* --- Страница документации --------------------------------------------- */

body.doc {
  overflow-y: auto;
}

.docPage {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}

.docPage h1 {
  font-size: 28px;
  margin-bottom: 8px;
}

.docPage h2 {
  margin: 36px 0 10px;
  font-size: 18px;
}

.docPage .lead {
  font-size: 15px;
  color: var(--text);
}

.docPage p,
.docPage li,
.docPage dd {
  color: var(--muted);
}

.docPage a {
  color: var(--accent);
}

.docPage code {
  padding: 1px 5px;
  border-radius: 4px;
  background: #22262c;
  color: var(--text);
  font-size: 0.92em;
}

.docPage .hint {
  font-size: 13px;
}

.docPage dt {
  margin-top: 12px;
  color: var(--text);
  font-weight: 600;
}

.docPage dd {
  margin: 4px 0 0;
}

.docPage table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.docPage th,
.docPage td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  color: var(--muted);
}

.docPage th {
  color: var(--text);
}

.builder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 16px;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.builder label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--muted);
  font-size: 13px;
}

.builder label.check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.builder input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.result {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.result code {
  flex: 1 1 320px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  overflow-wrap: anywhere;
}