:root {
  color-scheme: light;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #202227;
  background: #f4f4f1;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
button, input, textarea { font: inherit; }
button, .file-button {
  min-height: 44px; border: 0; border-radius: 10px; padding: .7rem 1rem;
  background: #b82f36; color: #fff; font-weight: 650; cursor: pointer;
}
button:disabled { opacity: .55; cursor: default; }
button.secondary, .file-button { background: #e4e4df; color: #202227; }
input, textarea {
  width: 100%; border: 1px solid #c9cac5; border-radius: 10px; padding: .8rem;
  background: #fff; color: #202227; font-size: 16px;
}
textarea { resize: none; max-height: 9rem; }
label { display: block; margin: .8rem 0 .35rem; font-weight: 600; }
code { overflow-wrap: anywhere; }
.app-header {
  position: sticky; top: 0; z-index: 5; min-height: 58px; padding: .6rem max(1rem, env(safe-area-inset-right)) .6rem max(1rem, env(safe-area-inset-left));
  display: flex; align-items: center; justify-content: space-between; background: rgba(22,24,29,.96); color: white;
}
.app-header > div { display: flex; flex-direction: column; gap: .15rem; }
.connection { color: #b8babf; font-size: .75rem; font-weight: 500; }
.icon-button { min-height: 40px; padding: .5rem .7rem; background: #30333a; }
main { width: min(100%, 54rem); min-height: calc(100dvh - 58px); margin: 0 auto; }
.hidden { display: none !important; }
.card { margin: 1rem; padding: 1.1rem; border: 1px solid #deded8; border-radius: 14px; background: #fff; }
.card h1, .card h2 { margin-top: 0; }
.error { color: #a52028; }
.hint { color: #65686e; font-size: .85rem; }
.chat { height: calc(100dvh - 58px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); display: flex; flex-direction: column; overflow: hidden; }
.messages { flex: 1 1 auto; overflow-y: auto; padding-bottom: 8.5rem; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; list-style: none; margin: 0; padding: 1rem; display: flex; flex-direction: column; gap: .9rem; }
.messages { list-style: none; margin: 0; padding: 1rem; display: flex; flex-direction: column; gap: .9rem; }
.message { max-width: 88%; padding: .75rem .9rem; border-radius: 14px; background: #fff; overflow-wrap: anywhere; }
.message.user { align-self: flex-end; background: #25282e; color: white; border-bottom-right-radius: 4px; }
.message.assistant { align-self: flex-start; border: 1px solid #deded8; border-bottom-left-radius: 4px; }
.message.failed { border-color: #b82f36; }
.message > :first-child { margin-top: 0; }
.message > :last-child { margin-bottom: 0; }
.message pre { max-width: 100%; padding: .7rem; overflow-x: auto; border-radius: 6px; background: #eeeee9; }
.message img { max-width: 100%; height: auto; }
.run-state { margin: 0 1rem .5rem; color: #65686e; font-size: .85rem; }
.composer {
  position: fixed; z-index: 4; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 54rem);
  padding: .65rem max(1rem, env(safe-area-inset-right)) max(.65rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  border-top: 1px solid #d5d5cf; background: rgba(244,244,241,.97);
}
.composer-actions, .button-row, .section-heading { display: flex; align-items: center; gap: .55rem; }
.composer-actions { margin-top: .55rem; }
.composer-actions #send-button { margin-left: auto; }
#file { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-button { display: inline-flex; align-items: center; margin: 0; }
.attachment { margin-bottom: .55rem; padding: .55rem; border-radius: 8px; background: #e8e8e2; font-size: .85rem; }
.settings { padding: 1rem 0 2rem; }
.settings > .section-heading { padding: 0 1rem; justify-content: space-between; }
.settings h1, .settings h2 { margin-bottom: .5rem; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .78rem; }
th, td { padding: .5rem .35rem; text-align: left; border-bottom: 1px solid #e5e5e0; white-space: nowrap; }
.status-yes { color: #187446; font-weight: 700; }
.status-no { color: #76787d; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (min-width: 700px) {
  .messages { padding: 1.5rem 2rem 8.5rem; }
  .message { max-width: 76%; }
  .card { margin: 1.5rem 2rem; padding: 1.5rem; }
}