@keyframes vanish-distort {
  0%,
  35% {
    transform: scale(1);
  }

  55% {
    transform: scale(0.98, 0.95);
  }

  80% {
    transform: scale(0.5, 0.001);
  }

  100% {
    transform: scale(0, 0.001);
  }
}

@keyframes vanish-fade {
  0%,
  35% {
    opacity: 1;
  }
  55% {
    opacity: 0.95;
  }
  80% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
  }
}

@keyframes reality-twist {
  0% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(0.5deg);
  }
  100% {
    transform: rotate(-25deg); /* YESSSS */
  }
}

@keyframes background-fade {
  0% {
    background-color: var(--body-bg-color);
  }
  100% {
    background-color: var(
      --is-dark-mode,
      white
    ); /* flip to scheme-appropriate color */
  }
}

.vanishing {
  animation: vanish-distort 2000ms cubic-bezier(0.7, 0.03, 0, 0.98) forwards,
    vanish-fade 2000ms cubic-bezier(0.7, 0, 0.3, 1) forwards;
  transform-origin: top left;
}

body.transitioning {
  animation: reality-twist 2000ms cubic-bezier(0.2, 0, 0.8, 0.95) forwards,
    background-fade 2000ms cubic-bezier(0.4, 0, 0.8, 1) forwards;
  transform-origin: center;
}

/* Set the scheme-dependent target color */
@media (prefers-color-scheme: dark) {
  body.transitioning {
    --is-dark-mode: black;
  }
}
#chat {
  width: 100%;
  height: 100%;
  position: relative;
}

#chat #chat-canvas {
  /* just enough to separate the canvas from the palette */
  margin-bottom: 0.5rem;
}

#instructions {
  white-space: nowrap;
  padding-right: 1rem;
}

#chat-log {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}

.chat-message {
  min-height: 1rem;
  background-color: var(--assistant-message-bg-color);
  border: 1px solid var(--assistant-message-border-color);
  padding: 0.7rem 1rem;
  box-shadow: var(--box-shadow);
  border-radius: 0.375rem;
  white-space: pre-wrap;
  transition: opacity 2s ease-out;
}

.chat-message.user {
  background-color: var(--user-message-bg-color);
  border: 1px solid var(--user-message-border-color);
}

.chat-message.pulsing {
  animation: pulsing 2s infinite;
}

.chat-message.pulsing::after {
  content: ' '; /* Add a space to ensure the ::after pseudo-element is rendered up front, to ward off dimension shifting */
  opacity: 0;
  animation: fadeInDots 2s ease-in;
  animation-delay: 3s; /* Start fading in dots during final pulse */
}

.chat-message.loading::after {
  content: '. . .';
  animation: loadingDots 30s steps(17, end) forwards;
  color: var(--body-text-color);
  opacity: 0.5;
}

@keyframes pulsing {
  0% {
    opacity: 0.5;
    filter: blur(1px);
  }
  50% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 0.5;
    filter: blur(1px);
  }
}

@keyframes fadeInDots {
  0% {
    content: '. . .';
    opacity: 0;
  }
  100% {
    content: '. . .';
    opacity: 0.5;
  }
}

@keyframes loadingDots {
  0% {
    content: '. . .';
  }
  5.88% {
    content: '. . . .';
  }
  11.76% {
    content: '. . . . .';
  }
  17.64% {
    content: '. . . . . .';
  }
  23.52% {
    content: '. . . . . . .';
  }
  29.4% {
    content: '. . . . . . . .';
  }
  35.28% {
    content: '. . . . . . . . .';
  }
  41.16% {
    content: '. . . . . . . . . .';
  }
  47.04% {
    content: '. . . . . . . . . . .';
  }
  52.92% {
    content: '. . . . . . . . . . . .';
  }
  58.8% {
    content: '. . . . . . . . . . . . .';
  }
  64.68% {
    content: '. . . . . . . . . . . . . .';
  }
  70.56% {
    content: '. . . . . . . . . . . . . . .';
  }
  76.44% {
    content: '. . . . . . . . . . . . . . . .';
  }
  82.32% {
    content: '. . . . . . . . . . . . . . . . .';
  }
  88.2% {
    content: '. . . . . . . . . . . . . . . . . . .';
  }
  94.08%,
  100% {
    content: '. . . . . . . . . . . . . . . . . . . .';
  }
}

#text-input {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.5rem;
}

/* if we're on a device with a physical keyboard... */
@media (hover: hover) {
  #text-input:after {
    content: attr(data-submit-tip);
    position: absolute;
    right: 0;
    bottom: -1.7rem;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  #text-input.multiline:after {
    opacity: 0.5;
  }
}

#text-input.disabled {
  opacity: 0.5;
  filter: blur(1px);
  pointer-events: none;
}

#text-input.disabled textarea {
  border: 1px solid var(--text-input-disabled-border-color);
  background-color: var(--text-input-disabled-bg-color);
}

#text-input.disabled button {
  display: none;
}
:root {
  /* Light Mode Variables */
  --reader-body-bg-color: #fffbe7;
  --reader-body-text-color: #101010;
  --reader-user-message-bg-color: #f2a249;
  --reader-user-message-border-color: #d18a3a;
  --reader-text-input-active-bg-color: #fff2d9;
  --reader-text-input-active-border-color: #d18a3a;
  --reader-text-input-disabled-bg-color: #ffe9bf;
  --reader-text-input-disabled-border-color: #d18a3a;
  --reader-button-bg-color: #f2a249;
  --reader-button-border-color: #d18a3a;
  --reader-button-hover-bg-color: #f2a249;
  --reader-button-disabled-bg-color: #ffd8a8;
  --reader-button-disabled-hover-bg-color: var(
    --reader-button-disabled-bg-color
  );
  --reader-button-disabled-border-color: #d18a3a;
  --reader-button-disabled-text-color: var(--reader-body-text-color);
  --reader-assistant-message-bg-color: #f0ead6;
  --reader-assistant-message-border-color: #d4c59a;
  --reader-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  --reader-box-shadow-hover: 0 4px 6px rgba(0, 0, 0, 0.1);

  /* Dark Mode Variables */
  --reader-dark-body-bg-color: #1e1e1e;
  --reader-dark-body-text-color: #e0e0e0;
  --reader-dark-user-message-bg-color: #8a5529;
  --reader-dark-user-message-border-color: #a06838;
  --reader-dark-text-input-active-bg-color: #5a3921;
  --reader-dark-text-input-active-border-color: #a06838;
  --reader-dark-text-input-disabled-bg-color: #4b3320;
  --reader-dark-text-input-disabled-border-color: #a06838;
  --reader-dark-button-bg-color: #8a5529;
  --reader-dark-button-border-color: #a06838;
  --reader-dark-button-hover-bg-color: #a06838;
  --reader-dark-button-disabled-bg-color: #5a3921;
  --reader-dark-button-disabled-hover-bg-color: var(
    --reader-dark-button-disabled-bg-color
  );
  --reader-dark-button-disabled-border-color: #a06838;
  --reader-dark-button-disabled-text-color: var(--reader-dark-body-text-color);
  --reader-dark-assistant-message-bg-color: #4b433b;
  --reader-dark-assistant-message-border-color: #6a5c4d;
  --reader-dark-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.05);
  --reader-dark-box-shadow-hover: 0 4px 6px rgba(255, 255, 255, 0.1);
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  :root {
    --reader-body-bg-color: var(--reader-dark-body-bg-color);
    --reader-body-text-color: var(--reader-dark-body-text-color);
    --reader-user-message-bg-color: var(--reader-dark-user-message-bg-color);
    --reader-user-message-border-color: var(
      --reader-dark-user-message-border-color
    );
    --reader-text-input-active-bg-color: var(
      --reader-dark-text-input-active-bg-color
    );
    --reader-text-input-active-border-color: var(
      --reader-dark-text-input-active-border-color
    );
    --reader-text-input-disabled-bg-color: var(
      --reader-dark-text-input-disabled-bg-color
    );
    --reader-text-input-disabled-border-color: var(
      --reader-dark-text-input-disabled-border-color
    );
    --reader-button-bg-color: var(--reader-dark-button-bg-color);
    --reader-button-border-color: var(--reader-dark-button-border-color);
    --reader-button-hover-bg-color: var(--reader-dark-button-hover-bg-color);
    --reader-button-disabled-bg-color: var(
      --reader-dark-button-disabled-bg-color
    );
    --reader-button-disabled-hover-bg-color: var(
      --reader-dark-button-disabled-hover-bg-color
    );
    --reader-button-disabled-border-color: var(
      --reader-dark-button-disabled-border-color
    );
    --reader-button-disabled-text-color: var(
      --reader-dark-button-disabled-text-color
    );
    --reader-assistant-message-bg-color: var(
      --reader-dark-assistant-message-bg-color
    );
    --reader-assistant-message-border-color: var(
      --reader-dark-assistant-message-border-color
    );
    --reader-box-shadow: var(--reader-dark-box-shadow);
    --reader-box-shadow-hover: var(--reader-dark-box-shadow-hover);
  }
}
:root {
  /* Views Light Mode Variables */
  --views-body-bg-color: #f3f4f8;
  --views-body-text-color: #101010;
  --views-user-message-bg-color: #8b8fc7;
  --views-user-message-border-color: #7074b0;
  --views-text-input-active-bg-color: #e4e6f0;
  --views-text-input-active-border-color: #7074b0;
  --views-text-input-disabled-bg-color: #dddfe9;
  --views-text-input-disabled-border-color: #7074b0;
  --views-button-bg-color: #8b8fc7;
  --views-button-border-color: #7074b0;
  --views-button-hover-bg-color: #979bcf;
  --views-button-disabled-bg-color: #b4b8d8;
  --views-button-disabled-hover-bg-color: var(
    --views-button-disabled-bg-color
  );
  --views-button-disabled-border-color: #7074b0;
  --views-button-disabled-text-color: var(--views-body-text-color);
  --views-assistant-message-bg-color: #e4e6f0;
  --views-assistant-message-border-color: #c8cbdd;
  --views-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  --views-box-shadow-hover: 0 4px 6px rgba(0, 0, 0, 0.1);

  /* Views Dark Mode Variables */
  --views-dark-body-bg-color: #1e1f22;
  --views-dark-body-text-color: #e0e0e0;
  --views-dark-user-message-bg-color: #4f527a;
  --views-dark-user-message-border-color: #636794;
  --views-dark-text-input-active-bg-color: #3a3d54;
  --views-dark-text-input-active-border-color: #636794;
  --views-dark-text-input-disabled-bg-color: #2f3240;
  --views-dark-text-input-disabled-border-color: #636794;
  --views-dark-button-bg-color: #4f527a;
  --views-dark-button-border-color: #8b8fc7;
  --views-dark-button-hover-bg-color: #636794;
  --views-dark-button-disabled-bg-color: #3a3d54;
  --views-dark-button-disabled-hover-bg-color: var(
    --views-dark-button-disabled-bg-color
  );
  --views-dark-button-disabled-border-color: #636794;
  --views-dark-button-disabled-text-color: var(--views-dark-body-text-color);
  --views-dark-assistant-message-bg-color: #353843;
  --views-dark-assistant-message-border-color: #474a57;
  --views-dark-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.05);
  --views-dark-box-shadow-hover: 0 4px 6px rgba(255, 255, 255, 0.1);
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  :root {
    --views-body-bg-color: var(--views-dark-body-bg-color);
    --views-body-text-color: var(--views-dark-body-text-color);
    --views-user-message-bg-color: var(--views-dark-user-message-bg-color);
    --views-user-message-border-color: var(
      --views-dark-user-message-border-color
    );
    --views-text-input-active-bg-color: var(
      --views-dark-text-input-active-bg-color
    );
    --views-text-input-active-border-color: var(
      --views-dark-text-input-active-border-color
    );
    --views-text-input-disabled-bg-color: var(
      --views-dark-text-input-disabled-bg-color
    );
    --views-text-input-disabled-border-color: var(
      --views-dark-text-input-disabled-border-color
    );
    --views-button-bg-color: var(--views-dark-button-bg-color);
    --views-button-border-color: var(--views-dark-button-border-color);
    --views-button-hover-bg-color: var(--views-dark-button-hover-bg-color);
    --views-button-disabled-bg-color: var(
      --views-dark-button-disabled-bg-color
    );
    --views-button-disabled-hover-bg-color: var(
      --views-dark-button-disabled-hover-bg-color
    );
    --views-button-disabled-border-color: var(
      --views-dark-button-disabled-border-color
    );
    --views-button-disabled-text-color: var(
      --views-dark-button-disabled-text-color
    );
    --views-assistant-message-bg-color: var(
      --views-dark-assistant-message-bg-color
    );
    --views-assistant-message-border-color: var(
      --views-dark-assistant-message-border-color
    );
    --views-box-shadow: var(--views-dark-box-shadow);
    --views-box-shadow-hover: var(--views-dark-box-shadow-hover);
  }
}
:root {
  /* Writer Light Mode Variables */
  --writer-body-bg-color: #f0f7f4;
  --writer-body-text-color: #101010;
  --writer-user-message-bg-color: #6fc89f;
  --writer-user-message-border-color: #5dab87;
  --writer-text-input-active-bg-color: #dcece4;
  --writer-text-input-active-border-color: #5dab87;
  --writer-text-input-disabled-bg-color: #dce9e3;
  --writer-text-input-disabled-border-color: #5dab87;
  --writer-button-bg-color: #6fc89f;
  --writer-button-border-color: #5dab87;
  --writer-button-hover-bg-color: #7bd2a9;
  --writer-button-disabled-bg-color: #a8d5c4;
  --writer-button-disabled-hover-bg-color: var(
    --writer-button-disabled-bg-color
  );
  --writer-button-disabled-border-color: #5dab87;
  --writer-button-disabled-text-color: var(--writer-body-text-color);
  --writer-assistant-message-bg-color: #dcece4;
  --writer-assistant-message-border-color: #b8d5c7;
  --writer-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  --writer-box-shadow-hover: 0 4px 6px rgba(0, 0, 0, 0.1);

  /* Writer Dark Mode Variables */
  --writer-dark-body-bg-color: #1e2321;
  --writer-dark-body-text-color: #e0e0e0;
  --writer-dark-user-message-bg-color: #3f795c;
  --writer-dark-user-message-border-color: #5b9c7c;
  --writer-dark-text-input-active-bg-color: #43705d;
  --writer-dark-text-input-active-border-color: #5b9c7c;
  --writer-dark-text-input-disabled-bg-color: #2f4c40;
  --writer-dark-text-input-disabled-border-color: #5b9c7c;
  --writer-dark-button-bg-color: #3f795c;
  --writer-dark-button-border-color: #5b9c7c;
  --writer-dark-button-hover-bg-color: #5b9c7c;
  --writer-dark-button-disabled-bg-color: #43705d;
  --writer-dark-button-disabled-hover-bg-color: var(
    --writer-dark-button-disabled-bg-color
  );
  --writer-dark-button-disabled-border-color: #5b9c7c;
  --writer-dark-button-disabled-text-color: var(--writer-dark-body-text-color);
  --writer-dark-assistant-message-bg-color: #3b4c44;
  --writer-dark-assistant-message-border-color: #4d635a;
  --writer-dark-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.05);
  --writer-dark-box-shadow-hover: 0 4px 6px rgba(255, 255, 255, 0.1);
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  :root {
    --writer-body-bg-color: var(--writer-dark-body-bg-color);
    --writer-body-text-color: var(--writer-dark-body-text-color);
    --writer-user-message-bg-color: var(--writer-dark-user-message-bg-color);
    --writer-user-message-border-color: var(
      --writer-dark-user-message-border-color
    );
    --writer-text-input-active-bg-color: var(
      --writer-dark-text-input-active-bg-color
    );
    --writer-text-input-active-border-color: var(
      --writer-dark-text-input-active-border-color
    );
    --writer-text-input-disabled-bg-color: var(
      --writer-dark-text-input-disabled-bg-color
    );
    --writer-text-input-disabled-border-color: var(
      --writer-dark-text-input-disabled-border-color
    );
    --writer-button-bg-color: var(--writer-dark-button-bg-color);
    --writer-button-border-color: var(--writer-dark-button-border-color);
    --writer-button-hover-bg-color: var(--writer-dark-button-hover-bg-color);
    --writer-button-disabled-bg-color: var(
      --writer-dark-button-disabled-bg-color
    );
    --writer-button-disabled-hover-bg-color: var(
      --writer-dark-button-disabled-hover-bg-color
    );
    --writer-button-disabled-border-color: var(
      --writer-dark-button-disabled-border-color
    );
    --writer-button-disabled-text-color: var(
      --writer-dark-button-disabled-text-color
    );
    --writer-assistant-message-bg-color: var(
      --writer-dark-assistant-message-bg-color
    );
    --writer-assistant-message-border-color: var(
      --writer-dark-assistant-message-border-color
    );
    --writer-box-shadow: var(--writer-dark-box-shadow);
    --writer-box-shadow-hover: var(--writer-dark-box-shadow-hover);
  }
}
/* Default to reader if no class specified */
.reader {
  --body-bg-color: var(--reader-body-bg-color);
  --body-text-color: var(--reader-body-text-color);
  --user-message-bg-color: var(--reader-user-message-bg-color);
  --user-message-border-color: var(--reader-user-message-border-color);
  --text-input-active-bg-color: var(--reader-text-input-active-bg-color);
  --text-input-active-border-color: var(
    --reader-text-input-active-border-color
  );
  --text-input-disabled-bg-color: var(--reader-text-input-disabled-bg-color);
  --text-input-disabled-border-color: var(
    --reader-text-input-disabled-border-color
  );
  --button-bg-color: var(--reader-button-bg-color);
  --button-border-color: var(--reader-button-border-color);
  --button-hover-bg-color: var(--reader-button-hover-bg-color);
  --button-disabled-bg-color: var(--reader-button-disabled-bg-color);
  --button-disabled-hover-bg-color: var(
    --reader-button-disabled-hover-bg-color
  );
  --button-disabled-border-color: var(--reader-button-disabled-border-color);
  --button-disabled-text-color: var(--reader-button-disabled-text-color);
  --assistant-message-bg-color: var(--reader-assistant-message-bg-color);
  --assistant-message-border-color: var(
    --reader-assistant-message-border-color
  );
  --box-shadow: var(--reader-box-shadow);
  --box-shadow-hover: var(--reader-box-shadow-hover);
}

/* Writer mode */
.writer {
  --body-bg-color: var(--writer-body-bg-color);
  --body-text-color: var(--writer-body-text-color);
  --user-message-bg-color: var(--writer-user-message-bg-color);
  --user-message-border-color: var(--writer-user-message-border-color);
  --text-input-active-bg-color: var(--writer-text-input-active-bg-color);
  --text-input-active-border-color: var(
    --writer-text-input-active-border-color
  );
  --text-input-disabled-bg-color: var(--writer-text-input-disabled-bg-color);
  --text-input-disabled-border-color: var(
    --writer-text-input-disabled-border-color
  );
  --button-bg-color: var(--writer-button-bg-color);
  --button-border-color: var(--writer-button-border-color);
  --button-hover-bg-color: var(--writer-button-hover-bg-color);
  --button-disabled-bg-color: var(--writer-button-disabled-bg-color);
  --button-disabled-hover-bg-color: var(
    --writer-button-disabled-hover-bg-color
  );
  --button-disabled-border-color: var(--writer-button-disabled-border-color);
  --button-disabled-text-color: var(--writer-button-disabled-text-color);
  --assistant-message-bg-color: var(--writer-assistant-message-bg-color);
  --assistant-message-border-color: var(
    --writer-assistant-message-border-color
  );
  --box-shadow: var(--writer-box-shadow);
  --box-shadow-hover: var(--writer-box-shadow-hover);
}

/* Views mode */
.views {
  --body-bg-color: var(--views-body-bg-color);
  --body-text-color: var(--views-body-text-color);
  --user-message-bg-color: var(--views-user-message-bg-color);
  --user-message-border-color: var(--views-user-message-border-color);
  --text-input-active-bg-color: var(--views-text-input-active-bg-color);
  --text-input-active-border-color: var(
    --views-text-input-active-border-color
  );
  --text-input-disabled-bg-color: var(--views-text-input-disabled-bg-color);
  --text-input-disabled-border-color: var(
    --views-text-input-disabled-border-color
  );
  --button-bg-color: var(--views-button-bg-color);
  --button-border-color: var(--views-button-border-color);
  --button-hover-bg-color: var(--views-button-hover-bg-color);
  --button-disabled-bg-color: var(--views-button-disabled-bg-color);
  --button-disabled-hover-bg-color: var(
    --views-button-disabled-hover-bg-color
  );
  --button-disabled-border-color: var(--views-button-disabled-border-color);
  --button-disabled-text-color: var(--views-button-disabled-text-color);
  --assistant-message-bg-color: var(--views-assistant-message-bg-color);
  --assistant-message-border-color: var(
    --views-assistant-message-border-color
  );
  --box-shadow: var(--views-box-shadow);
  --box-shadow-hover: var(--views-box-shadow-hover);
}
.stack-vertical {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stack-vertical > * {
  margin: 0;
}

.stack-horizontal {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}
a,
button.text-button,
button.text-button:disabled,
button.text-button:disabled:hover {
  color: var(--body-text-color);
  text-decoration: underline;
  cursor: pointer;
  background-color: transparent;
  box-shadow: none;
  padding: 0;
  border: none;
}

a:hover,
button.text-button:hover {
  color: var(--button-border-color);
  background-color: transparent;
  box-shadow: none;
}

button.text-button:disabled,
button.text-button:disabled:hover {
  cursor: not-allowed;
  text-decoration: none;
}
body,
textarea,
input {
  font-size: 100%;
  font-family: 'Lightward Favorit';
  font-weight: 200;
  color: var(--body-text-color);
}

a {
  font-family: 'Lightward Favorit Lining';
  text-decoration: none;
}

h1,
h2,
h3 {
  margin: 0;
}

h1 {
  font-size: 2rem;
  font-weight: 200;
}

h2 {
  font-size: 1.65rem;
  font-weight: 200;
}

h3 {
  font-size: 1.3rem;
  font-weight: 200;
}
blockquote {
  border-left: 5px solid var(--user-message-border-color);
  margin: 0;
  padding: 0 0 0 1em;
}
body,
textarea,
input,
button,
prompt-button::part(button) {
  font-size: 100%;
  font-family: 'Lightward Favorit';
  font-weight: 200;
  color: var(--body-text-color);
}

button,
prompt-button::part(button),
input[type='button'],
input[type='submit'],
a.button {
  padding: 0.7rem 1rem;
  box-shadow: var(--box-shadow);
  border-radius: 0.375rem;
  background-color: var(--button-bg-color);
  border: 1px solid var(--button-border-color);
  color: var(--body-text-color);
  cursor: pointer;
  box-shadow: var(--box-shadow);
  text-decoration: none;
  font-family: 'Lightward Favorit';
  text-align: left;
}

button:hover,
prompt-button::part(button):hover,
input[type='button']:hover,
input[type='submit']:hover,
a.button:hover {
  background-color: var(--button-hover-bg-color);
  box-shadow: var(--box-shadow-hover);
  color: var(--body-text-color);
}

button:disabled,
prompt-button::part(button-disabled),
input[type='button']:disabled,
input[type='submit']:disabled,
a.button:disabled {
  background-color: var(--button-disabled-bg-color);
  border-color: var(--button-disabled-border-color);
  color: var(--button-disabled-text-color);
  cursor: not-allowed;
}

button:disabled:hover,
prompt-button::part(button-disabled):hover,
input[type='button']:disabled:hover,
input[type='submit']:disabled:hover,
a.button:disabled {
  background-color: var(--button-disabled-hover-bg-color);
  box-shadow: none;
}
dl dd + dt {
  margin-top: 1rem;
}

dd p + p {
  margin-top: 1rem;
}
form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
textarea,
input[type='password'],
input[type='text'] {
  position: relative;
  flex-grow: 1;

  color: var(--body-text-color);
  border: 1px solid var(--text-input-active-border-color);
  background-color: var(--text-input-active-bg-color);

  box-sizing: border-box; /* Ensures padding is included dimensions */
  resize: none; /* Disable manual resizing */
  overflow: hidden; /* Disable scrollbars; going for autoscrolling */

  padding: 0.7rem 1rem;
  box-shadow: var(--box-shadow);
  border-radius: 0.375rem;
}

textarea::placeholder {
  color: var(--body-text-color);
  opacity: 0.5;
}
p {
  margin: 0;
}
table {
  border: 1px solid var(--assistant-message-border-color);
  border-radius: 0.375rem;
  border-spacing: 0;
}

th {
  text-align: left;
}

table tbody:first-child tr:first-child td {
  border: 0;
}

td {
  border-top: 1px solid var(--assistant-message-border-color);
}

th,
td {
  padding: 0.5rem 1rem;
}



body {
  margin: 5vh 2vw;
  background-color: var(--body-bg-color);
  transition: background-color 0.3s ease;
  line-height: 1.44rem;
}

a {
  color: var(--body-text-color);
}

.container {
  max-width: 800px;
  margin: 1rem;
}

.container,
main,
.tools,
dl,
footer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: last baseline;
  row-gap: 0;
  column-gap: 1rem;
  flex-wrap: wrap;
  line-height: 2.4rem;
}

header h1 {
  font-size: 2rem;
  flex: 1;
}

dl {
  gap: 0.5rem;
}

dl,
dd {
  margin: 0;
}

dt {
  font-weight: 400;
}

footer {
  margin-top: 1rem;
  gap: 2rem;
}

/* should come last */
.hidden {
  display: none !important;
}