a {
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
}

aside {
  display: inline-block;
  font-size: 0.8em;
}

#log-input {
  width: 100%;
  min-height: 6em;
  max-height: 8lh;
  background: oklch(from var(--bg) calc(l - 4) c h);
  border-color: oklch(from var(--border) calc(l - 12) c h);
  font-family: monospace;
  font-size: 0.8rem;
  box-sizing: border-box;
  margin-bottom: 1em;

  &::placeholder {
    color: oklch(from var(--text) l c h / 0.5);
  }
}

.log-grid {
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  gap: 0 0.75em;
  font-family: monospace;
  font-size: 0.875rem;
}

.log-line {
  display: contents;
}

.log-time {
  color: oklch(from var(--text) l c h / 0.5);
  white-space: nowrap;
  user-select: none;
}

.log-nick {
  text-align: right;
  white-space: nowrap;
  color: var(--accent);
  font-weight: bold;
}

.log-text {
  word-break: break-word;
}

.log-join {
  & .log-nick,
  & .log-text {
    color: oklch(55% 0.1 145);
    font-style: italic;
  }
}

.log-action {
  & .log-nick,
  & .log-text {
    color: oklch(from var(--accent) calc(l + 10) c h);
    font-style: italic;
  }
}