Something went wrong. Try again.
ATProto-based AI Assistant Chat interface.
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449/* A stand-in theme over the barebones UI. Colors follow the system light or dark mode. */
:root { color-scheme: light dark; --bg: light-dark(#ffffff, #212121); --sidebar: light-dark(#f9f9f9, #171717); --surface: light-dark(#f4f4f4, #2f2f2f); --hover: light-dark(#ececec, #3a3a3a); --border: light-dark(#e3e3e3, #3d3d3d); --text: light-dark(#0d0d0d, #ececec); --muted: light-dark(#6b6b6b, #a4a4a4); --accent: light-dark(#0d0d0d, #ececec); --on-accent: light-dark(#ffffff, #0d0d0d); --danger: light-dark(#c62828, #f28b82); --radius: 0.75rem; --column: 48rem; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; font-size: 15px; line-height: 1.6;}
* { box-sizing: border-box;}
body { margin: 0; background: var(--bg); color: var(--text);}
a { color: inherit;}
h1,h2,h3 { line-height: 1.3;}
button,input,select,textarea { font: inherit; color: inherit;}
button { background: transparent; border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.3rem 0.7rem; cursor: pointer;}
button:hover:not(:disabled) { background: var(--hover);}
button:disabled { opacity: 0.4; cursor: default;}
button[type="submit"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent);}
button[type="submit"]:hover:not(:disabled) { background: var(--accent); opacity: 0.85;}
input:not([type="checkbox"], [type="file"]),select,textarea { background: var(--bg); border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.35rem 0.6rem;}
input::file-selector-button { font: inherit; color: inherit; background: transparent; border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.3rem 0.7rem; margin-right: 0.5rem; cursor: pointer;}
:focus-visible { outline: 2px solid var(--muted); outline-offset: 1px;}
[role="alert"] { color: var(--danger);}
pre { background: var(--surface); border-radius: 0.5rem; padding: 0.75rem; overflow-x: auto; white-space: pre-wrap; font-size: 0.85em;}
details { color: var(--muted); margin: 0.5rem 0;}
summary { cursor: pointer;}
/* Layout: a fixed sidebar, and a main column that scrolls on its own. */
.layout { gap: 0; height: 100vh; min-height: 0;}
.layout > main { overflow-y: auto; display: flex; flex-direction: column;}
.chat-list { flex-basis: 16rem; display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem; background: var(--sidebar); border-right: 1px solid var(--border); overflow-y: auto;}
.chat-list ul { list-style: none; margin: 0.5rem 0; padding: 0; flex: 1;}
.chat-list a { display: block; padding: 0.4rem 0.6rem; border-radius: 0.5rem; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.chat-list a:hover { background: var(--hover);}
.chat-list > button { text-align: left;}
.banner { margin: 0.75rem auto 0; padding: 0.5rem 0.75rem; background: var(--surface); border-radius: 0.5rem;}
main > p { margin: auto; color: var(--muted);}
/* Conversation */
.conversation { width: 100%; max-width: var(--column); margin: 0 auto; padding: 0 1rem; flex: 1; display: flex; flex-direction: column;}
.conversation > header { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.75rem 0; background: var(--bg);}
.conversation > header h2 { font-size: 1rem; font-weight: 600; margin: 0 auto 0 0;}
.conversation > header h2 button { font-size: 0.8rem; font-weight: normal; border: none; color: var(--muted);}
.conversation > header form { display: flex; gap: 0.5rem; margin-right: auto;}
.conversation fieldset { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem;}
.conversation fieldset input { flex: 1; min-width: 12rem;}
/* Messages: the user's in a bubble on the right, the assistant's as plain text. */
.message { margin: 1rem 0;}
.message > header strong { display: none;}
.message > header { font-size: 0.8rem; color: var(--muted);}
.message.user { align-self: flex-end; max-width: 80%; display: flex; flex-direction: column; align-items: flex-end;}
.message.user > .text { background: var(--surface); border-radius: 1.25rem; padding: 0.6rem 1rem; margin: 0;}
.siblings { display: inline-flex; align-items: center; gap: 0.25rem;}
.siblings button,.message > footer button { border: none; color: var(--muted); font-size: 0.8rem; padding: 0.15rem 0.4rem;}
.message > footer { display: flex; align-items: center; gap: 0.25rem; opacity: 0; transition: opacity 0.15s;}
.message:hover > footer,.message > footer:focus-within { opacity: 1;}
.message > footer select { font-size: 0.8rem; padding: 0.1rem 0.3rem; border: none; color: var(--muted);}
.message > ul { font-size: 0.85rem; padding-left: 1.25rem;}
/* Composer: one rounded box pinned to the bottom of the column. */
.composer { position: sticky; bottom: 0; margin-top: auto; padding-bottom: 1rem; background: linear-gradient(transparent, var(--bg) 1rem);}
.composer textarea { display: block; width: 100%; min-height: 3.5rem; max-height: 40vh; resize: vertical; border: 1px solid var(--border); border-bottom: none; border-radius: 1.5rem 1.5rem 0 0; padding: 1rem 1.25rem 0.25rem; background: var(--surface);}
.composer textarea:focus-visible { outline: none;}
.composer > div { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: var(--surface); border: 1px solid var(--border); border-top: none; border-radius: 0 0 1.5rem 1.5rem; font-size: 0.85rem;}
.composer > div select { background: transparent; border: none; color: var(--muted);}
.composer input[type="file"] { color: var(--muted); max-width: 14rem;}
.composer > div > span { color: var(--muted);}
.composer button[type="submit"] { margin-left: auto; border-radius: 1rem; padding: 0.3rem 1rem;}
/* Login and settings */
.login { max-width: 22rem; margin: 20vh auto 0; padding: 0 1rem; text-align: center;}
.login form { display: flex; flex-direction: column; gap: 0.75rem;}
.login label { display: flex; flex-direction: column; gap: 0.25rem; text-align: left;}
.login button { padding: 0.5rem;}
.settings { max-width: 60rem; margin: 0 auto; padding: 1.5rem 1rem 4rem;}
.settings section,.settings > form { margin: 1.5rem 0; padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius);}
.settings h2 { margin-top: 0; font-size: 1.1rem;}
.settings form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;}
.settings label { display: flex; flex-direction: column; gap: 0.25rem; flex-basis: 100%;}
.settings label:has(> input[type="checkbox"]) { flex-direction: row; align-items: center; gap: 0.5rem;}
.settings form > input,.settings form > select { flex: 1 1 12rem;}
.settings ul { padding-left: 1.25rem;}