:root, :host {
  --rounded: 6px;
  --bg: light-dark(#5552, #aaa2);
  --bg2: light-dark(#7772, #9992);
  --fg: light-dark(#000, #fff);
  --fg2: light-dark(#555, #aaa);
  --fg3: light-dark(#777, #888);
  --brand: light-dark(#e098b7, #914264);
  --urgent: light-dark(#914264, #f7e499);
}

* {
  scrollbar-color: var(--fg2) transparent;
}

body {
  height: 100vh;
  height: 100dvh;
}

main {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  justify-content: center;
  height: 100%;
}

.chat {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  width: 100%;
  max-width: 720px;
}

.message-logs {
  max-height: calc(100% - 5.75rem);
}
.message-log {
  height: 100%;
  overflow-y: auto;
  white-space: pre-wrap;
}

.message-log::-webkit-scrollbar-button {
  display: none;
}

.entry {
  border-width: 2px;
  resize: none;
  overflow-y: hidden;
  margin-bottom: 0;
}
/* override pico defaults */
.entry:is(:focus) {
  border-color: var(--brand);
  box-shadow: none;
}

.message {
  color: var(--fg);
}
.message.system {
  color: var(--fg2);
}

.nav-items {
  display: flex;
  flex-flow: column nowrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.nav-item {
  color: var(--fg2);
  background-color: var(--bg2);
  text-align: center;
  padding: 0.25rem 0.5rem;
  border-radius: var(--rounded);
  border: 2px solid transparent;
}
.nav-item.notif {
  border-color: var(--brand);
}
.nav-item.mention {
  border-color: var(--urgent);
}
.nav-item.active {
  color: var(--fg);
  background-color: var(--bg);
  border-color: var(--fg2);
}