/* Compact live workflow and restrained, NOSIBLE-styled scrollbars. */
.messages {
  padding-right: clamp(12px, 1vw, 18px);
  scrollbar-color: #4c4c50 #0d0d0f;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.messages::-webkit-scrollbar,
.composer textarea::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.messages::-webkit-scrollbar-track,
.composer textarea::-webkit-scrollbar-track {
  background: #0d0d0f;
}

.messages::-webkit-scrollbar-thumb,
.composer textarea::-webkit-scrollbar-thumb {
  min-height: 40px;
  background: #4c4c50;
  border-radius: 0;
}

.messages:hover::-webkit-scrollbar-thumb,
.composer textarea:hover::-webkit-scrollbar-thumb {
  background-color: #66666a;
}

.messages::-webkit-scrollbar-button,
.composer textarea::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.message.assistant > .message-label {
  margin-bottom: 13px;
}

.message-workflow {
  display: block;
  min-width: 0;
}

.message-workflow summary {
  display: flex;
  align-items: center;
  min-height: 25px;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.message-workflow summary::-webkit-details-marker {
  display: none;
}

.workflow-mark {
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  overflow: hidden;
}

.workflow-mark img {
  display: block;
  width: 82px;
  height: 18px;
  max-width: none;
}

.workflow-title,
.workflow-label {
  font: 8px/1 var(--body);
  letter-spacing: .11em;
}

.workflow-title {
  color: #999;
}

.workflow-expand {
  position: relative;
  width: 18px;
  height: 18px;
  margin-left: auto;
}

.workflow-expand::before,
.workflow-expand::after {
  position: absolute;
  top: 8px;
  left: 3px;
  width: 12px;
  height: 1px;
  content: "";
  background: #9a9a9d;
}

.workflow-expand::after {
  transform: rotate(90deg);
}

.message-workflow[open] .workflow-expand::after {
  transform: none;
}

.workflow-details {
  padding: 12px 0 5px;
}

.workflow-rows {
  display: grid;
  gap: 10px;
}

.workflow-row {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr);
  gap: 9px;
}

.workflow-marker {
  display: block;
  width: 5px;
  height: 5px;
  margin-top: 4px;
  background: #515155;
}

.workflow-marker.active {
  background: var(--green);
  animation: workflow-pulse 1.1s ease-in-out infinite;
}

.workflow-marker.blocked {
  background: #e29a91;
}

.workflow-label {
  display: block;
  color: #888;
}

.workflow-marker.active + div .workflow-label {
  color: var(--green);
}

.workflow-marker.blocked + div .workflow-label {
  color: #e29a91;
}

.workflow-detail {
  display: block;
  margin-top: 3px;
  color: #a6a6a9;
  font: 10px/1.45 var(--body);
}

.message.assistant > p {
  margin-top: 17px;
}

@keyframes workflow-pulse {
  50% { opacity: .3; }
}

@media (max-width: 780px) {
  .messages { padding-right: 14px; }
  .messages::-webkit-scrollbar,
  .composer textarea::-webkit-scrollbar { width: 6px; }
}