:root {
  color-scheme: only dark;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-size: 13pt;
  line-height: 1.1em;
}

@font-face {
  font-family: Inconsolata;
  src: url("https://nonk.dev/assets/Inconsolata.ttf") format("truetype");
}
* {
  font-family: Inconsolata, Consolas, monospace;
  box-sizing: border-box;
}

:root {
  --advanced-layout: true;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

#top_banner {
  display: none;
}

body,
#emojiTray {
  font-size: 12pt;
  color: #f7f7f7;
  background: #141414;
  padding: 8px;
}

.emoji {
  width: 12pt;
  height: 12pt;
}

#settings,
#emojiTrayToggle {
  filter: invert(1);
}

#main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  gap: 5px;
}

#background {
  flex-grow: 1;
  background: transparent;
  padding-top: 20px;
}

#input {
  color: #141414;
  background: #f7f7f7;
}

.msgWrapper {
  border-top: 1px dashed #f7f7f7;
  margin-block: 1em 0;
}

.allMessages {
  padding: 0;
  padding-left: 12px;
  padding-top: 3px;
  width: 100%;
}

.sent {
  padding-left: 4px;
  border-left: 8px solid #f7f7f7;
}

.allMessages.containsOnlyEmojis .emoji {
  aspect-ratio: 1;
  width: 36pt;
  height: 36pt;
}

.owner.badge {
  display: none;
}
.senderInfo:has(.owner.badge) {
  color: #12b012;
}

.senderInfo {
  display: block;
}
.senderInfo::before {
  content: "<";
}
.senderInfo::after {
  content: ">";
}

.msgBody {
  width: fit-content;
  margin-left: 2ch;
}