/* Shared conversation surface used by Code chat and other host-owned chats. */
.agent-conversation {
  position: relative;
}

.agent-conversation__error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid hsl(var(--destructive) / 0.24);
  border-radius: var(--radius);
  background: hsl(var(--destructive) / 0.08);
  color: hsl(var(--destructive-foreground));
  font-size: 12px;
}

.agent-conversation__empty {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: hsl(var(--muted-foreground));
  font-size: 12px;
}

.agent-conversation__empty span {
  color: hsl(var(--muted-foreground));
}

.agent-conversation__scroll-bottom {
  position: absolute;
  inset-inline-end: 18px;
  bottom: 92px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  background: hsl(var(--popover));
  color: hsl(var(--foreground));
  box-shadow: 0 10px 30px hsl(var(--background) / 0.28);
  cursor: pointer;
}

.agent-conversation-message {
  display: flex;
  width: 100%;
}

.agent-conversation-message--user {
  justify-content: flex-end;
}

.agent-conversation-message--assistant,
.agent-conversation-message--system {
  justify-content: flex-start;
}

.agent-conversation-message__body {
  min-width: 0;
  max-width: min(100%, 880px);
}

.agent-conversation-message--user .agent-conversation-message__body {
  max-width: min(78%, 720px);
  padding: 9px 11px;
  border-radius: calc(var(--radius) + 4px);
  background: hsl(var(--muted));
}

.agent-conversation-message--pending .agent-conversation-message__body {
  opacity: 0.72;
}

.agent-conversation-message__part + .agent-conversation-message__part {
  margin-top: 10px;
}

.agent-conversation-message__part--tool,
.agent-conversation-message__part--notice,
.agent-conversation-message__part--artifact {
  display: block;
}

.agent-conversation-markdown {
  color: hsl(var(--foreground) / 0.82);
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.agent-conversation-message--user .agent-conversation-markdown {
  color: hsl(var(--foreground) / 0.92);
}

.agent-conversation-markdown > :first-child {
  margin-top: 0;
}

.agent-conversation-markdown > :last-child {
  margin-bottom: 0;
}

.agent-conversation-markdown p,
.agent-conversation-markdown ul,
.agent-conversation-markdown ol,
.agent-conversation-markdown pre {
  margin: 0 0 10px;
}

.agent-conversation-markdown ul,
.agent-conversation-markdown ol {
  padding-inline-start: 20px;
}

.agent-conversation-markdown li {
  margin: 3px 0;
  padding-inline-start: 2px;
}

.agent-conversation-markdown li > p {
  margin: 0;
}

.agent-conversation-markdown strong {
  color: hsl(var(--foreground) / 0.92);
  font-weight: 650;
}

.agent-conversation-markdown a {
  color: #60a5fa;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.agent-conversation-markdown a:hover {
  color: #93c5fd;
}

.agent-conversation-markdown code {
  border-radius: 4px;
  background: hsl(var(--muted));
  padding: 1px 4px;
  font-size: 12px;
}

.agent-conversation-markdown pre {
  max-width: 100%;
  overflow: auto;
  padding: 10px;
  border-radius: var(--radius);
  background: hsl(var(--muted) / 0.72);
}

.agent-conversation-markdown pre code {
  display: block;
  padding: 0;
  background: transparent;
  white-space: pre;
}

.agent-conversation-shiki {
  margin: 0 0 10px;
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 12px;
}

.agent-conversation-shiki pre {
  margin: 0;
  padding: 10px 12px;
  overflow-x: auto;
  background: var(--shiki-light-bg, hsl(var(--muted) / 0.72));
  color: var(--shiki-light, hsl(var(--foreground)));
}

.agent-conversation-shiki pre code {
  background: transparent;
  padding: 0;
  font-size: inherit;
  color: inherit;
  white-space: pre;
}

.agent-conversation-shiki pre span {
  color: var(--shiki-light);
  background: var(--shiki-light-bg);
}

.dark .agent-conversation-shiki pre {
  background: var(--shiki-dark-bg, hsl(var(--muted) / 0.72));
  color: var(--shiki-dark, hsl(var(--foreground)));
}

.dark .agent-conversation-shiki pre span {
  color: var(--shiki-dark);
  background: var(--shiki-dark-bg);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) .agent-conversation-shiki pre {
    background: var(--shiki-dark-bg, hsl(var(--muted) / 0.72));
    color: var(--shiki-dark, hsl(var(--foreground)));
  }
  :root:not(.light) .agent-conversation-shiki pre span {
    color: var(--shiki-dark);
    background: var(--shiki-dark-bg);
  }
}

.agent-conversation-tool {
  width: 100%;
  border: 1px solid hsl(var(--border) / 0.9);
  border-radius: var(--radius);
  background: hsl(var(--card) / 0.58);
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  box-sizing: border-box;
}

.agent-conversation-tool summary,
.agent-conversation-tool:not(details) {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 10px;
}

.agent-conversation-tool summary {
  cursor: pointer;
}

.agent-conversation-tool__icon {
  display: inline-flex;
  color: hsl(var(--foreground) / 0.7);
}

.agent-conversation-tool__name {
  color: hsl(var(--foreground) / 0.82);
  font-weight: 500;
}

.agent-conversation-tool__summary {
  margin-inline-start: auto;
  font-size: 11px;
}

.agent-conversation-tool__chevron {
  transition: transform 140ms ease;
}

.agent-conversation-tool[open] .agent-conversation-tool__chevron {
  transform: rotate(180deg);
}

.agent-conversation-tool__details {
  display: grid;
  gap: 8px;
  padding: 0 10px 10px;
}

.agent-conversation-tool__details pre {
  max-height: 220px;
  overflow: auto;
  margin: 0;
  padding: 8px;
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--muted));
  color: hsl(var(--foreground) / 0.72);
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.agent-conversation-tool__details strong {
  display: block;
  margin-bottom: 5px;
  color: hsl(var(--foreground) / 0.86);
  font-size: 10px;
}

.agent-mcp-app {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 220px;
  border: 1px solid hsl(var(--border) / 0.9);
  border-radius: var(--radius);
  background: hsl(var(--background));
  box-sizing: border-box;
}

.agent-mcp-app--flush {
  border-color: transparent;
  background: transparent;
}

.agent-mcp-app iframe {
  display: block;
  width: 100%;
  min-height: 220px;
  border: 0;
  background: transparent;
}

.agent-mcp-app__loading,
.agent-mcp-app__error {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  background: hsl(var(--background) / 0.92);
  color: hsl(var(--muted-foreground));
  font-size: 12px;
}

.agent-mcp-app__error {
  flex-direction: column;
  text-align: center;
}

.agent-mcp-app__open {
  min-height: 28px;
  border: 1px solid hsl(var(--destructive) / 0.35);
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 0 10px;
}

.agent-mcp-app__open:hover {
  background: hsl(var(--muted));
}

.agent-mcp-app__error,
.agent-mcp-app--error {
  color: hsl(var(--destructive));
}

.agent-mcp-app--error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 64px;
  padding: 12px;
}

.agent-conversation-notice,
.agent-conversation-artifact {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: min(100%, 760px);
  padding: 9px 10px;
  border-radius: var(--radius);
  font-size: 12px;
}

.agent-conversation-notice {
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.55);
  color: hsl(var(--foreground) / 0.78);
}

.agent-conversation-notice--warning {
  border-color: hsl(45 90% 50% / 0.22);
  background: hsl(45 90% 50% / 0.07);
}

.agent-conversation-notice--error {
  border-color: hsl(var(--destructive) / 0.24);
  background: hsl(var(--destructive) / 0.08);
}

.agent-conversation-notice strong {
  display: block;
  margin-bottom: 2px;
  color: hsl(var(--foreground) / 0.88);
}

.agent-conversation-artifact {
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card) / 0.58);
  color: hsl(var(--muted-foreground));
}

.agent-conversation-artifact code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-conversation-artifact a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-inline-start: auto;
  color: hsl(var(--muted-foreground));
  text-decoration: none;
}

.agent-conversation-message__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.agent-conversation-attachment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--muted));
  font-size: 11px;
  color: hsl(var(--muted-foreground));
  max-width: 220px;
  overflow: hidden;
}

.agent-conversation-attachment--image {
  flex-direction: column;
  align-items: flex-start;
  padding: 4px;
  gap: 4px;
}

.agent-conversation-attachment__image {
  display: block;
  max-width: 200px;
  max-height: 140px;
  border-radius: calc(var(--radius) - 4px);
  object-fit: contain;
}

.agent-conversation-attachment__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.agent-conversation-attachment--image .agent-conversation-attachment__name {
  padding: 0 4px 2px;
}

.agent-conversation-attachment__size {
  flex-shrink: 0;
  color: hsl(var(--muted-foreground) / 0.7);
}

.agent-conversation-spin {
  animation: agent-conversation-spin 1s linear infinite;
}

@keyframes agent-conversation-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ─── ReasoningCell streaming tail clamp ────────────────────────────────────── */
/* While a reasoning cell is actively streaming and open, clamp the body to
   roughly the last ~6 lines instead of letting it grow and push the rest of
   the transcript around (the Claude Code "tail view" behavior). The reversed
   column anchors the box to its bottom edge, so overflow is clipped off the
   top while the newest lines stay pinned in view — pure CSS, no scroll/rAF
   tracking needed. A soft fade masks the clipped edge in both themes since
   it only touches alpha, not color. */
.reasoning-cell-tail {
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
  max-height: 8rem;
  mask-image: linear-gradient(to bottom, transparent, black 1.5rem);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 1.5rem);
}

.agent-chat-collapse {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition:
    grid-template-rows 200ms var(--ease-collapse),
    opacity 150ms ease-out;
}

@starting-style {
  .agent-chat-collapse[data-state="open"] {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}

.agent-chat-collapse[data-state="closed"] {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
}

.agent-chat-collapse__content {
  min-height: 0;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .agent-chat-collapse {
    transition-duration: 0.01ms;
  }
}

/* ─── Agent-Markdown (AssistantChat react-markdown render surface) ─────────── */
/* These classes are applied by the SmoothMarkdownText/MarkdownText components  */
/* in the AssistantChat/AssistantChatInner tree. The shiki dual-theme rules      */
/* follow the same .dark / @media pattern used above for agent-conversation.     */

.agent-markdown > :first-child {
  margin-top: 0;
}

.agent-markdown > :last-child {
  margin-bottom: 0;
}

.agent-markdown p {
  margin: 0.5em 0;
}

.agent-markdown ul,
.agent-markdown ol {
  margin: 0.5em 0;
  padding-inline-start: 1.5em;
}

.agent-markdown li {
  margin: 0.2em 0;
}

.agent-markdown li > p {
  margin: 0;
}

.agent-markdown h1 {
  font-size: 1.25em;
  font-weight: 600;
  margin: 0.75em 0 0.25em;
}

.agent-markdown h2 {
  font-size: 1.125em;
  font-weight: 600;
  margin: 0.75em 0 0.25em;
}

.agent-markdown h3 {
  font-size: 1em;
  font-weight: 600;
  margin: 0.75em 0 0.25em;
}

.agent-markdown strong {
  font-weight: 600;
}

.agent-markdown em {
  font-style: italic;
}

.agent-markdown code {
  font-size: 0.875em;
  padding: 0.15em 0.35em;
  border-radius: 0.25em;
  background: hsl(var(--muted, 0 0% 15%));
  color: hsl(var(--foreground, 0 0% 90%));
  border: 1px solid hsl(var(--border, 0 0% 80%));
}

.agent-markdown pre {
  margin: 0.5em 0;
  padding: 0.75em 1em;
  border-radius: 0.375em;
  background: hsl(var(--muted, 0 0% 15%));
  color: hsl(var(--foreground, 0 0% 90%));
  overflow-x: auto;
  border: 1px solid hsl(var(--border, 0 0% 80%));
}

.agent-markdown pre code {
  padding: 0;
  background: transparent;
  font-size: 0.8125em;
  color: inherit;
  border: none;
}

.agent-markdown hr {
  border: none;
  border-top: 1px solid hsl(var(--border, 0 0% 20%));
  margin: 0.75em 0 1em;
}

.agent-markdown a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.agent-markdown a.agent-markdown-cta {
  text-decoration: none;
}

.agent-markdown blockquote {
  border-inline-start: 2px solid hsl(var(--border, 0 0% 20%));
  padding-inline-start: 0.75em;
  margin: 0.5em 0;
  opacity: 0.8;
}

.agent-markdown table {
  border-collapse: collapse;
  margin: 0.5em 0;
  font-size: 0.875em;
}

.agent-markdown th,
.agent-markdown td {
  border: 1px solid hsl(var(--border, 0 0% 20%));
  padding: 0.35em 0.65em;
  text-align: start;
}

.agent-markdown th {
  font-weight: 600;
  background: hsl(var(--muted, 0 0% 15%));
  color: hsl(var(--foreground, 0 0% 90%));
}

/* Streaming caret appended after last non-code paragraph while text is live. */
.agent-markdown[data-streaming="true"]
  > :last-child:not(pre):not(table)::after {
  content: "";
  display: inline-block;
  width: 0.42em;
  height: 1em;
  margin-inline-start: 0.12em;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.35;
  transform: translateY(0.16em);
  animation: agent-markdown-stream-caret 1.15s ease-in-out infinite;
}

@keyframes agent-markdown-stream-caret {
  0%,
  100% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.58;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agent-markdown[data-streaming="true"]
    > :last-child:not(pre):not(table)::after {
    animation: none;
    opacity: 0.28;
  }
}

/* Shiki-highlighted code blocks inside agent-markdown replies. */
.agent-markdown-shiki {
  margin: 0.5em 0;
  border-radius: 0.375em;
  overflow: hidden;
  font-size: 0.8125em;
}

.agent-markdown-shiki pre {
  margin: 0;
  padding: 0.75em 1em;
  overflow-x: auto;
  background: var(--shiki-light-bg);
  color: var(--shiki-light);
}

.agent-markdown-shiki pre code {
  background: transparent;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

.agent-markdown-shiki pre span {
  color: var(--shiki-light);
  background: var(--shiki-light-bg);
}

.dark .agent-markdown-shiki pre {
  background: var(--shiki-dark-bg);
  color: var(--shiki-dark);
}

.dark .agent-markdown-shiki pre span {
  color: var(--shiki-dark);
  background: var(--shiki-dark-bg);
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) .agent-markdown-shiki pre {
    background: var(--shiki-dark-bg);
    color: var(--shiki-dark);
  }

  :root:not(.light) .agent-markdown-shiki pre span {
    color: var(--shiki-dark);
    background: var(--shiki-dark-bg);
  }
}

/* Tool-code viewer that uses shiki inside the Codex-style gray box. */
.agent-tool-code .agent-markdown-shiki {
  margin: 0;
  border-radius: 0;
  min-width: max-content;
}

.agent-tool-code .agent-markdown-shiki pre {
  padding: 0.75rem;
  border: 0;
  background: transparent;
}

.agent-tool-code .agent-markdown-shiki pre span {
  background: transparent;
}

.agent-tool-code pre {
  margin: 0;
  min-width: max-content;
  padding: 0.75rem;
  background: transparent;
  color: inherit;
}

.agent-tool-code mark {
  border-radius: 0.1875rem;
  background: rgba(245, 158, 11, 0.25);
  color: inherit;
}