/* GENERATED by hl:web — ONE global stylesheet.
   Components author their Style rules per file; only the rules a View actually
   REFERENCES are emitted (dead rules are dropped and listed at boot). Class names
   follow the tag-prefix strip rule: rule `headerMain` referenced inside `header`
   emits class="main" under the TAG-QUALIFIED selector `header.main`; under any
   other tag it keeps `.headerMain`. */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

a {
  text-decoration: none;
  color: #569bd4;
}

input, button, textarea {
  border-radius: 0.25rem;
  padding: 0.5rem;
  border: 0 none;
  background: rgba(255, 255, 255, .12);
  color: rgb(220, 225, 230);
  font-size: inherit;
  font-weight: 400;
}

button {
  background: #569bd4;
  color: rgb(25, 30, 35);
  cursor: pointer;
}

input:focus-visible, button:focus-visible, textarea:focus-visible {
  outline: 2px solid #569bd4AA;
}

chat-form {
  margin: 1rem 0 0 0;
}

chat-form form {
  display: flex;
  gap: .5rem;
}

chat-setup {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 1rem 0 0 0;
}

picker {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

select {
  background: rgba(255, 255, 255, .12);
  color: inherit;
  border: 0 none;
  border-radius: .25rem;
  padding: .5rem;
}

option {
  background: #1d232a;
}

or-field {
  flex: 1 1 20rem;
  font-family: monospace;
  display: block;
}

or-options {
  display: block;
  max-height: 16rem;
  overflow-y: auto;
}

or-option {
  display: block;
  padding: .45rem .6rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  background: rgba(255, 255, 255, .06);
}

or-option small {
  display: block;
  font-family: inherit;
  font-size: .75rem;
  opacity: 0.55;
}

workdir-field {
  flex: 1 1 20rem;
  font-family: monospace;
  display: block;
}

system-prompt {
  display: block;
}

system-prompt summary {
  cursor: pointer;
  opacity: 0.7;
  font-size: .9rem;
}

textarea.system {
  width: 100%;
  min-height: 6rem;
  margin: .5rem 0 0 0;
  font-size: .9rem;
}

form-error-message {
  display: block;
  margin: 1rem 0 0 0;
  padding: .5rem 1rem;
  border-radius: .25rem;
  background: rgba(220, 60, 60, .25);
}

queued-message {
  display: block;
  margin: .5rem 0 0 1.5rem;
  padding: .5rem 1rem;
  border-radius: .25rem;
  background: rgba(86, 155, 212, .1);
  opacity: 0.7;
}

queued-message small {
  display: block;
  font-size: .7rem;
  opacity: 0.7;
}

textarea {
  flex: 1 0;
  min-height: 3rem;
  max-height: 12rem;
  resize: vertical;
  font-family: inherit;
  color: inherit;
}

header h2 {
  font-weight: 300;
  margin: 0;
  cursor: pointer;
}

input.title-edit {
  font-size: 1.5rem;
  font-weight: 300;
  width: 100%;
}

chat-meta {
  display: block;
  overflow-wrap: anywhere;
  font-family: monospace;
  font-size: .75rem;
  opacity: 0.5;
  margin: 0 0 1rem 0;
}

chat-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex-grow: 1;
  overflow-y: auto;
  margin: 0 -1rem;
  padding: 0 max(1rem, calc((100% - 60rem) / 2));
}

chat-message {
  padding: .75rem 1rem;
  background: rgba(255, 255, 255, .08);
  border-radius: .25rem;
  overflow-wrap: anywhere;
}

.user {
  margin-left: 1.5rem;
  background: rgba(86, 155, 212, .18);
}

.assistant {
  margin-right: 1.5rem;
}

thinking {
  display: block;
  white-space: pre-wrap;
  opacity: 0.55;
  font-style: italic;
  font-size: .9rem;
  margin: 0 0 .5rem 0;
}

step-text {
  display: block;
  white-space: pre-wrap;
  margin: 0 0 .5rem 0;
}

step-text:last-child {
  margin-bottom: 0;
}

tool-call {
  display: block;
  margin: 0 0 .5rem 0;
  border-left: 2px solid #569bd4;
  padding: 0 0 0 .5rem;
}

tool-name {
  display: block;
  white-space: pre-wrap;
  font-family: monospace;
  font-size: .8rem;
  color: #9cdcfe;
}

tool-result {
  display: block;
  white-space: pre-wrap;
  font-family: monospace;
  font-size: .75rem;
  opacity: 0.7;
  max-height: 14rem;
  overflow-y: auto;
  margin: .25rem 0 0 0;
}

msg-time {
  display: block;
  float: right;
  margin: 0 0 0 .75rem;
  font-size: .7rem;
  opacity: 0.45;
  font-family: monospace;
}

msg-actions {
  display: block;
  margin: .35rem 0 0 0;
  font-size: .75rem;
  opacity: 0.45;
}

msg-actions b {
  cursor: pointer;
  font-weight: 400;
}

stats {
  display: block;
  font-family: monospace;
  font-size: .7rem;
  opacity: 0.5;
  margin: .5rem 0 0 0;
}

streaming {
  display: flex;
  align-items: center;
  gap: .75rem;
  opacity: 0.7;
  font-size: .75rem;
}

stop-button {
  cursor: pointer;
  padding: .15rem .6rem;
  border-radius: .25rem;
  background: rgba(220, 60, 60, .35);
  color: #fff;
  user-select: none;
}

markdown-text {
  display: block;
  margin: 0 0 .5rem 0;
}

markdown-text p, markdown-text li {
  margin: 0 0 .5rem 0;
}

markdown-text ul, markdown-text ol {
  margin: 0 0 .5rem 1.5rem;
}

markdown-text h1, markdown-text h2, markdown-text h3, markdown-text h4, markdown-text h5, markdown-text h6 {
  margin: .75rem 0 .5rem 0;
  font-weight: 600;
}

markdown-text h1 {
  font-size: 1.3rem;
}

markdown-text h2 {
  font-size: 1.15rem;
}

markdown-text h3 {
  font-size: 1.05rem;
}

markdown-text ul ul, markdown-text ol ol, markdown-text ul ol, markdown-text ol ul {
  margin: .25rem 0 .25rem 1.25rem;
}

markdown-text blockquote {
  margin: 0 0 .5rem 0;
  padding: 0 0 0 .75rem;
  border-left: 3px solid rgba(255, 255, 255, .25);
  opacity: 0.85;
}

markdown-text hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, .2);
  margin: .75rem 0;
}

markdown-text table {
  border-collapse: collapse;
  margin: 0 0 .75rem 0;
  display: block;
  overflow-x: auto;
  max-width: 100%;
}

markdown-text th, markdown-text td {
  border: 1px solid rgba(255, 255, 255, .2);
  padding: .3rem .6rem;
  vertical-align: top;
}

markdown-text th {
  background: rgba(255, 255, 255, .08);
  font-weight: 600;
}

markdown-text code {
  font-family: monospace;
  font-size: .9em;
  background: rgba(255, 255, 255, .1);
  padding: 0 .25rem;
  border-radius: .2rem;
}

markdown-text pre {
  background: rgba(0, 0, 0, .3);
  padding: .5rem .75rem;
  border-radius: .25rem;
  overflow-x: auto;
  margin: 0 0 .5rem 0;
}

markdown-text pre code {
  background: transparent;
  padding: 0;
}

intro.q46o {
  margin: auto 0 0 0;
  opacity: 0.6;
}

body {
  font-family: "Segoe UI", system-ui, sans-serif;
  background: rgb(25, 30, 35);
  color: rgb(220, 225, 230);
  height: 100dvh;
  margin: 0;
  display: flex;
}

action-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3.25rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0 1rem;
  background: rgb(20, 25, 30);
  z-index: 20;
}

menu-toggle {
  font-size: 1.6rem;
  line-height: 1;
  width: 2rem;
  text-align: center;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}

backdrop {
  position: fixed;
  top: 3.25rem;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 12;
  display: none;
}

backdrop.active {
  display: block;
}

sidebar {
  position: fixed;
  top: 3.25rem;
  bottom: 0;
  left: -17rem;
  transition: left .2s;
  z-index: 15;
  width: 16rem;
  flex-shrink: 0;
  background: rgb(20, 25, 30);
  color: rgb(195, 200, 205);
  display: flex;
  flex-direction: column;
  padding: 1rem;
  gap: 1rem;
  overflow-y: auto;
}

brand {
  font-weight: 100;
  font-size: 1.75rem;
}

action-bar brand {
  font-size: 1.4rem;
}

nav {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  flex-grow: 1;
}

nav a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: .25rem 0;
}

nav-item {
  display: flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;
  padding: 0 .35rem;
  margin: 0 -.35rem;
  border-radius: .25rem;
}

nav-item a {
  flex: 1 1;
  min-width: 0;
}

nav-item.sub {
  margin-left: .9rem;
  font-size: .85rem;
  opacity: 0.85;
}

nav-item.sub2 {
  margin-left: 1.8rem;
}

sub-tag {
  opacity: 0.6;
  flex-shrink: 0;
}

live-dot {
  color: #4ec9b0;
  font-size: .6rem;
  flex-shrink: 0;
}

nav-actions {
  display: flex;
  gap: .35rem;
  visibility: hidden;
  flex-shrink: 0;
}

nav-actions b {
  cursor: pointer;
  font-weight: 400;
  opacity: 0.7;
  padding: 0 .15rem;
}

nav-item:hover nav-actions, nav-actions.confirming {
  visibility: visible;
}

input.rename {
  flex: 1 1;
  min-width: 0;
  padding: .2rem .4rem;
}

sidebar.active {
  left: 0;
}

main {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  padding: 4.25rem .75rem .75rem .75rem;
  min-width: 0;
  overflow: hidden;
}

sidebar-brand {
  display: none;
}

nav-actions.shown {
  visibility: visible;
}

login-form {
  margin: auto;
  min-width: 16rem;
  font-size: 1.125rem;
}

login-form form {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

error-message {
  padding: .25rem;
  background: #D00;
  color: #FFF;
  text-align: center;
  border-radius: .25rem;
}

@media (min-width: 960px) {
  .user {
    margin-left: 4rem;
  }
  .assistant {
    margin-right: 4rem;
  }
  action-bar {
    display: none;
  }
  backdrop {
    display: none;
  }
  sidebar {
    position: static;
    left: auto;
  top: auto;
  }
  main {
    padding: 1rem;
  }
  sidebar-brand {
    display: block;
  }
}