@font-face {
  font-family: 'Annotation Mono';
  src: url('/AnnotationMono-VF.woff2') format('woff2-variations');
  font-weight: 100 900;
}

* {
    font-family: 'Annotation Mono', sans-serif;
}

:root {
    --accent-color: #007aff;
    --dark-box-shadow: 0 0 1px 0 hsl(0 0 0);
    --base-box-shadow: 0 0 1px 0 hsl(0 0 40);
    --hover-box-shadow: 0 0 5px 0 hsl(0 0 50);
    --active-box-shadow: 0 0 5px 0 black;
}

button {
    --bg: hsl(from var(--accent-color) h calc(s - 10) l);
    --text: white;
    color: var(--text);
    background: var(--bg);
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    box-shadow: var(--dark-box-shadow);
}
button:hover {
    box-shadow: var(--hover-box-shadow);
}
button:focus {
    box-shadow: var(--hover-box-shadow);
}
button:active {
    box-shadow: var(--active-box-shadow);
    background: hsl(from var(--bg) h s calc(l - 10));
}
button:disabled {
    background: hsl(from var(--bg) h s calc(l - 30));
}
button:focus-visible {
    outline: none;
    box-shadow: var(--active-box-shadow);
}
.util-button {
    background: hsl(0 0 70);
}

#prompt-text {
    --bg: hsl(0 0 96);
    background: var(--bg);
    box-shadow: var(--base-box-shadow);
    border: none;
    border-radius:  10px;
    font: inherit;
}
#prompt-text:focus-visible {
    outline: none;
    box-shadow: var(--hover-box-shadow);
}

.message-text > p {
    margin: 0;
    padding 0;
}