.message-response {
  position: relative;
  min-width: 0;
}

.message-response.is-collapsed {
  max-height: 440px;
  overflow: hidden;
}

.message-response.is-collapsed::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 96px;
  background: linear-gradient(transparent, #fff 82%);
  content: "";
  pointer-events: none;
}

.markdown-body {
  color: var(--ink, #151924);
  font-size: 14px;
  line-height: 1.58;
  overflow-wrap: anywhere;
}

.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child { margin-bottom: 0; }
.markdown-body p { margin: 0 0 11px; }
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
  margin: 22px 0 9px;
  color: #101828;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.018em;
}
.markdown-body h1 { font-size: 24px; }
.markdown-body h2 { font-size: 20px; }
.markdown-body h3 { font-size: 17px; }
.markdown-body h4 { font-size: 15px; }
.markdown-body ul,
.markdown-body ol { margin: 8px 0 14px; padding-left: 24px; }
.markdown-body li { margin: 5px 0; padding-left: 3px; }
.markdown-body .markdown-task { display: flex; align-items: flex-start; gap: 8px; margin-left: -21px; list-style: none; }
.markdown-body .markdown-task input { width: 15px; height: 15px; margin: 3px 0 0; accent-color: var(--purple, #6c45ee); }
.markdown-body blockquote {
  margin: 14px 0;
  padding: 11px 14px;
  border-left: 3px solid var(--purple, #6c45ee);
  border-radius: 0 7px 7px 0;
  background: #f7f5ff;
  color: #4e4764;
}
.markdown-body hr { height: 1px; margin: 20px 0; border: 0; background: var(--line, #e8e7eb); }
.markdown-body a { color: #5a35d6; font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.markdown-body code:not(.code-block code) {
  padding: 2px 5px;
  border: 1px solid #e5e7eb;
  border-radius: 5px;
  background: #f3f4f6;
  color: #334155;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .9em;
}

.markdown-table-wrap { max-width: 100%; margin: 14px 0; overflow-x: auto; border: 1px solid var(--line, #e8e7eb); border-radius: 8px; }
.markdown-table-wrap table { width: 100%; border-collapse: collapse; font-size: 13px; }
.markdown-table-wrap th,
.markdown-table-wrap td { padding: 9px 11px; border-bottom: 1px solid var(--line, #e8e7eb); text-align: left; vertical-align: top; }
.markdown-table-wrap th { background: #f7f7fa; color: #344054; font-weight: 700; }
.markdown-table-wrap tbody tr:last-child td { border-bottom: 0; }

.code-block { margin: 15px 0; border-color: #d8dee8; border-radius: 9px; box-shadow: 0 8px 24px rgb(15 23 42 / 8%); }
.code-heading { min-height: 38px; padding: 0 12px; }
.code-heading > span { font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.code-heading > div { display: flex; align-items: center; gap: 3px; }
.code-heading button { min-height: 30px; padding: 0 8px; border-radius: 5px; font-size: 11px; }
.code-heading button:hover,
.code-heading button[aria-pressed="true"] { background: #e8edf3; color: #172033; }
.code-block pre { max-height: 480px; padding: 16px; }
.code-block code { font-size: 12px; line-height: 1.62; }
.code-block.wrap-code code { white-space: pre-wrap; overflow-wrap: anywhere; }

.response-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #eeedf1;
}
.response-actions button {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #667085;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.response-actions button:hover,
.response-actions button:focus-visible { background: #f3f1f8; color: var(--purple, #6c45ee); outline: 0; }
.response-actions svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.response-activity {
  margin-top: 13px;
  overflow: hidden;
  border: 1px solid #e4e1eb;
  border-radius: 9px;
  background: #fbfafd;
}
.response-activity > summary {
  display: grid;
  min-height: 54px;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  cursor: pointer;
  list-style: none;
}
.response-activity > summary::-webkit-details-marker { display: none; }
.response-activity > summary > span:nth-child(2) { display: grid; gap: 2px; }
.response-activity > summary strong { color: #252237; font-size: 12px; line-height: 17px; }
.response-activity > summary small { color: #7b748b; font-size: 11px; line-height: 15px; }
.response-activity-mark { position: relative; width: 13px; height: 13px; border: 2px solid #8a7bb3; border-radius: 50%; }
.response-activity-mark.complete { border-color: #26a269; background: #26a269; box-shadow: inset 0 0 0 3px #fbfafd; }
.response-activity-mark.danger { border-color: #dc3848; background: #dc3848; box-shadow: inset 0 0 0 3px #fbfafd; }
.response-activity-mark.active { border-color: var(--purple, #6c45ee); border-right-color: transparent; animation: orchestra-spin .9s linear infinite; }
.response-activity-body { padding: 0 11px 11px 38px; border-top: 1px solid #ece9f1; }

.response-run-steps { display: grid; gap: 0; margin: 0; padding: 10px 0 6px; list-style: none; }
.run-step { position: relative; display: grid; min-height: 40px; grid-template-columns: 15px minmax(0, 1fr); gap: 9px; padding: 4px 0; }
.run-step:not(:last-child)::after { position: absolute; top: 20px; bottom: -4px; left: 6px; width: 1px; background: #ddd8e8; content: ""; }
.run-step > i { z-index: 1; width: 13px; height: 13px; margin-top: 2px; border: 2px solid #a39aae; border-radius: 50%; background: #fbfafd; }
.run-step.complete > i { border-color: #26a269; background: #26a269; box-shadow: inset 0 0 0 3px #fbfafd; }
.run-step.active > i { border-color: var(--purple, #6c45ee); border-right-color: transparent; animation: orchestra-spin .9s linear infinite; }
.run-step.danger > i { border-color: #dc3848; background: #dc3848; box-shadow: inset 0 0 0 3px #fbfafd; }
.run-step > div { display: grid; gap: 1px; }
.run-step strong { color: #353044; font-size: 12px; line-height: 16px; }
.run-step span { color: #80798e; font-size: 11px; line-height: 15px; }
.response-run-metrics { display: flex; flex-wrap: wrap; gap: 7px; padding: 8px 0; border-top: 1px solid #ece9f1; }
.response-run-metrics span { padding: 5px 8px; border-radius: 999px; background: #f0edf6; color: #6f687b; font-size: 11px; }
.response-run-metrics b { color: #292437; }
.response-files { padding-top: 5px; }
.response-files > summary { color: #595166; font-size: 11px; font-weight: 700; cursor: pointer; }
.response-files ul { display: grid; max-height: 180px; gap: 5px; margin: 8px 0 0; padding: 0; overflow: auto; list-style: none; }
.response-files li { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 6px; }
.response-files code { overflow: hidden; color: #585164; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.file-change-kind { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 5px; background: #e8e4f3; color: #5b42ad; font-size: 11px; font-weight: 800; }
.file-change-kind.add { background: #dff5e9; color: #16794b; }
.file-change-kind.delete { background: #fde7e9; color: #b42332; }

.agent-thinking { min-height: 38px; align-items: center; color: #5f586c; font-size: 13px; line-height: 19px; }
.agent-thinking-copy { display: grid; gap: 1px; }
.agent-thinking-copy strong { color: #312a43; font-size: 13px; }
.agent-thinking-copy small { color: #736c80; font-size: 11px; }
.thinking-dots { display: inline-flex; min-width: 34px; align-items: center; justify-content: center; gap: 4px; padding: 8px 7px; border-radius: 999px; background: #f0ecff; }
.agent-thinking .thinking-dots i { width: 6px; height: 6px; flex: 0 0 auto; margin: 0; border-radius: 50%; background: var(--purple, #6c45ee); animation: orchestra-thinking-dot 1.15s ease-in-out infinite; }
.agent-thinking .thinking-dots i:nth-child(2) { animation-delay: .14s; }
.agent-thinking .thinking-dots i:nth-child(3) { animation-delay: .28s; }
.message.agent.failed { border-color: #f2c7cc; background: #fffafa; }
.message.agent.failed .message-response p { margin: 0; color: #6f3037; }
.composer-hint { display: block; padding: 3px 8px 0; color: #8b8496; font-size: 11px; line-height: 15px; }

@keyframes orchestra-spin { to { transform: rotate(360deg); } }
@keyframes orchestra-thinking-dot {
  0%, 65%, 100% { opacity: .35; transform: translateY(0); }
  32% { opacity: 1; transform: translateY(-4px); }
}

@media (max-width: 700px) {
  .response-activity-body { padding-left: 12px; }
  .response-activity > summary { grid-template-columns: 18px minmax(0, 1fr); }
  .response-activity > summary > .state-badge { grid-column: 2; justify-self: start; }
  .response-actions button { flex: 1 1 auto; justify-content: center; }
  .code-heading [data-code-download] { display: none; }
  .markdown-body h1 { font-size: 21px; }
  .markdown-body h2 { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .response-activity-mark.active,
  .run-step.active > i,
  .agent-thinking .thinking-dots i { animation: none; border-right-color: var(--purple, #6c45ee); opacity: .75; transform: none; }
}