/* Copyright Ayers Electronics Inc. All rights reserved. */

.chat,
.chat-threads {
  box-sizing: border-box;
  color: var(--chat-text);
  background: var(--chat-surface);
  font: inherit;
  font-size: var(--chat-type-body);
}

.chat *,
.chat-threads * {
  box-sizing: border-box;
}
.chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
}
.chat-transcript {
  position: relative;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--chat-space-4);
}
.chat-turn {
  margin: 0 0 var(--chat-space-5);
  min-width: 0;
}
.chat-turn[data-role="user"] {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.chat-bubble {
  max-width: 100%;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.chat-turn[data-role="user"] > .chat-bubble {
  padding: var(--chat-space-2) var(--chat-space-3);
  border-radius: var(--chat-radius-3);
  background: var(--chat-panel);
}
.chat-who,
.chat-answer-label {
  font-size: var(--chat-type-label);
  font-weight: 600;
  margin-bottom: var(--chat-space-2);
}
.chat-answer-label {
  color: var(--chat-accent-text);
}
.chat-line {
  white-space: pre-wrap;
}
/* A markdown answer is blocks. The line breaks between them are the renderer's and paint nothing;
   a paragraph keeps the breaks its writer made. */
.chat-markdown {
  white-space: normal;
}
.chat-markdown p {
  white-space: pre-wrap;
}
.chat-line > :first-child {
  margin-top: 0;
}
.chat-line > :last-child {
  margin-bottom: 0;
}
.chat-line p,
.chat-line ul,
.chat-line ol,
.chat-line blockquote {
  margin: var(--chat-space-3) 0;
}
.chat-line li {
  margin: var(--chat-space-1) 0;
}
.chat-line h1,
.chat-line h2,
.chat-line h3 {
  font-size: var(--chat-type-heading);
  margin: var(--chat-space-4) 0 var(--chat-space-2);
}
.chat-line blockquote {
  border-left: 2px solid var(--chat-border);
  padding-left: var(--chat-space-3);
  color: var(--chat-muted);
}
.chat-line a {
  color: var(--chat-accent-text);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.chat-line pre {
  overflow: auto;
  padding: var(--chat-space-3);
  background: var(--chat-panel);
  border-radius: var(--chat-radius-2);
}
.chat-line code {
  font-size: 0.9em;
}
.chat-line table {
  display: block;
  max-width: 100%;
  overflow: auto;
  border-collapse: collapse;
  white-space: normal;
}
.chat-line th,
.chat-line td {
  padding: var(--chat-space-2);
  border-bottom: 1px solid var(--chat-border-soft);
  text-align: start;
}
.chat-line th {
  font-weight: 600;
}
.chat-line input[type="checkbox"] {
  margin-inline-end: var(--chat-space-2);
}
.chat-part {
  min-width: 0;
  margin-top: var(--chat-space-2);
}
.chat-caret {
  display: inline-block;
  width: 0.45em;
  height: 1em;
  background: currentColor;
  vertical-align: text-bottom;
  animation: chat-caret 1s step-end infinite;
}
@keyframes chat-caret {
  50% {
    opacity: 0;
  }
}
.chat-error {
  display: block;
  padding: var(--chat-space-2) 0;
  color: var(--chat-text);
  border-top: 1px solid var(--chat-border);
  font-size: var(--chat-type-label);
}
.chat-actions,
.chat-branches {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--chat-space-2);
}
.chat-actions > * + *,
.chat-branches > * + * {
  margin-inline-start: var(--chat-space-1);
}
.chat-branches {
  font-size: var(--chat-type-micro);
  color: var(--chat-muted);
}
.chat button,
.chat-threads button,
.chat-edit button {
  min-height: var(--chat-target-min);
  font: inherit;
  color: var(--chat-text);
  border: 1px solid transparent;
  border-radius: var(--chat-radius-2);
  background: transparent;
  cursor: pointer;
  transition:
    background-color var(--chat-ease),
    color var(--chat-ease);
}
.chat .chat-tool,
.chat-threads .chat-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--chat-target-min);
  padding: var(--chat-space-1);
  border-radius: var(--chat-radius-1);
  color: var(--chat-muted);
}
.chat-icon {
  display: block;
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chat button:hover:not(:disabled),
.chat-threads button:hover:not(:disabled) {
  background: var(--chat-raised);
}
.chat button:disabled,
.chat-threads button:disabled {
  cursor: default;
  opacity: 0.5;
}
.chat :focus,
.chat-threads :focus {
  outline: none;
  box-shadow: var(--chat-focus-ring);
}
.chat[data-tv] :focus {
  outline: none;
  box-shadow: var(--chat-focus-ring);
}
.chat-jump {
  position: sticky;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: var(--chat-space-2);
  margin-inline-start: auto;
  background: var(--chat-panel);
  border-color: var(--chat-border);
  min-width: var(--chat-target-min);
}
/* The library disables the arrow whenever the newest message is in view, an empty conversation
   among them. It is drawn only where it does something; it keeps its place, so nothing moves when
   it comes and goes. */
.chat-jump:disabled {
  visibility: hidden;
}
.chat-empty,
.chat-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--chat-space-5);
  color: var(--chat-muted);
}
.chat-empty {
  min-height: 100%;
}
.chat-empty h2 {
  color: var(--chat-text);
  font-size: var(--chat-type-heading);
  margin: 0;
}
.chat-empty p {
  margin: var(--chat-space-2) 0 0;
  line-height: 1.5;
}
.chat-deck {
  flex-shrink: 0;
  border-top: 1px solid var(--chat-border-soft);
  padding: var(--chat-space-3);
}
.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  margin: calc(-1 * var(--chat-space-1));
  padding: 0 0 var(--chat-space-2);
  border: 0;
}
.chat .chat-suggestion {
  margin: var(--chat-space-1);
  padding: var(--chat-space-2) var(--chat-space-3);
  border: 1px solid var(--chat-border);
  border-radius: var(--chat-radius-pill);
  font-size: var(--chat-type-label);
  text-align: start;
}
.chat-compose,
.chat-edit {
  display: flex;
  align-items: flex-end;
  min-width: 0;
  border: 1px solid var(--chat-border);
  border-radius: var(--chat-radius-2);
  padding: var(--chat-space-2);
  background: var(--chat-panel);
}
.chat-input {
  display: block;
  flex: 1;
  min-width: 0;
  min-height: var(--chat-target-min);
  max-height: 12em;
  padding: var(--chat-space-2);
  font: inherit;
  color: var(--chat-text);
  caret-color: var(--chat-accent-text);
  background: transparent;
  border: 0;
  border-radius: var(--chat-radius-1);
  resize: none;
}
.chat-input::placeholder {
  color: var(--chat-muted);
  opacity: 1;
}
.chat .chat-submit,
.chat-threads .chat-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--chat-target-min);
  padding: var(--chat-space-2);
  color: var(--chat-on-accent);
  background: var(--chat-accent);
}
.chat-threads {
  padding: var(--chat-space-2);
}
.chat-thread-row {
  display: flex;
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid var(--chat-border-soft);
}
.chat-thread-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: start;
  padding: var(--chat-space-2);
}
.chat-thread-row[data-active="true"] {
  background: var(--chat-selected);
}
.chat-threads h3 {
  margin: var(--chat-space-4) var(--chat-space-2) var(--chat-space-1);
  color: var(--chat-muted);
  font-size: var(--chat-type-label);
}
.chat[data-still] *,
.chat[data-still] *::before,
.chat[data-still] *::after {
  animation: none;
  transition: none;
  scroll-behavior: auto;
}
@media (prefers-reduced-motion: reduce) {
  .chat *,
  .chat *::before,
  .chat *::after,
  .chat-threads * {
    animation: none;
    transition: none;
    scroll-behavior: auto;
  }
}