/* Two-pane Amazon Bedrock chats. Fills the content area so the
 * conversation list and thread each scroll on their own. */

.content:has(.chats-page) {
 overflow: hidden;
}

.chats-page {
 --page-title-size: 2rem;
 --page-title-line-height: 1.25;
 --page-title-leading: calc(
  var(--page-title-size) *
   var(--page-title-line-height)
 );
 display: flex;
 flex: 1;
 min-height: 0;
 width: 100%;
 height: 100%;
 background: var(--background);
}

.chats-gated {
 display: flex;
 flex-direction: column;
 gap: 12px;
 padding: calc(
   32px + var(--page-title-leading)
  )
  32px 32px;
 max-width: 32rem;
}

.chats-pane {
 display: flex;
 flex-direction: column;
 width: 260px;
 flex-shrink: 0;
 min-height: 0;
 border-right: 1px solid var(--border);
 background: var(--shell-surface);
 padding-top: calc(
  32px + var(--page-title-leading)
 );
}

.chats-pane-header {
 display: flex;
 padding: 0 12px 8px;
}

.chats-pane-title {
 display: flex;
 flex-direction: column;
 flex: 1;
 min-width: 0;
 width: 100%;
}

.chats-pane-header h1 {
 margin: 0;
 font-size: var(--page-title-size);
 line-height: var(
  --page-title-line-height
 );
 font-weight: 600;
}

.chats-pane-sub {
 flex: 1;
 min-width: 0;
 margin: 0;
 font-size: var(--text-sm);
}

.chats-new-row {
 display: flex;
 width: 100%;
 margin-top: 8px;
}

.chats-new-row .btn {
 width: 100%;
}

.chats-pane-sub-row {
 display: flex;
 align-items: center;
 gap: 6px;
 width: 100%;
 min-width: 0;
 margin-top: 8px;
}

.chats-pane-sub-row
 > .chats-filter-menu {
 flex-shrink: 0;
 margin-left: auto;
}

.chats-filter-trigger {
 position: relative;
 width: 28px;
 height: 28px;
 flex-shrink: 0;
}

.chats-filter-active {
 position: absolute;
 top: 4px;
 right: 4px;
 width: 6px;
 height: 6px;
 border: 1px solid var(--card);
 border-radius: 999px;
 background: var(--primary);
 opacity: 0;
}

.chats-filter-trigger.active
 .chats-filter-active {
 opacity: 1;
}

.chats-filter-option input {
 width: 14px;
 height: 14px;
 margin: 0;
 accent-color: var(--primary);
}

.chats-list {
 display: flex;
 flex-direction: column;
 gap: 4px;
 flex: 1;
 min-height: 0;
 overflow: auto;
 padding: 8px 12px 16px;
}

.chats-day-group {
 display: flex;
 flex-direction: column;
 gap: 4px;
}

.chats-day-group + .chats-day-group {
 margin-top: 8px;
}

.chats-day-heading {
 position: sticky;
 top: 0;
 z-index: 1;
 margin: 0;
 padding: 4px 12px 6px;
 font-size: var(--text-xs);
 font-weight: 600;
 line-height: 1.3;
 color: var(--muted-foreground);
 background: var(--shell-surface);
}

.chats-item {
 display: flex;
 flex-direction: column;
 gap: 2px;
 width: 100%;
 padding: 8px 12px;
 border: 0;
 border-radius: var(--radius-md);
 background: transparent;
 color: var(--foreground);
 font: inherit;
 text-align: left;
 cursor: pointer;
}

.chats-item:hover,
.chats-item.active {
 background: var(--sidebar-item-hover);
}

.chats-item-title {
 font-weight: 600;
 font-size: var(--text-sm);
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.chats-item-heading {
 display: flex;
 align-items: center;
 gap: 6px;
 min-width: 0;
}

.chats-item-running {
 flex-shrink: 0;
 width: 10px;
 height: 10px;
 box-sizing: border-box;
 border: 2px solid var(--ring);
 border-right-color: transparent;
 border-radius: 999px;
 animation: btn-spin 0.7s linear
  infinite;
}

.chats-item-archived {
 flex-shrink: 0;
 font-size: 10px;
 text-transform: uppercase;
 letter-spacing: 0.04em;
}

.chats-item-preview {
 font-size: var(--text-xs);
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.chats-item-location {
 max-width: 100%;
 margin-top: 2px;
 overflow: hidden;
 text-overflow: ellipsis;
}

.chats-skel {
 pointer-events: none;
}

.chats-empty {
 margin: 8px 4px;
 font-size: var(--text-sm);
}

.chats-thread {
 display: flex;
 flex-direction: column;
 flex: 1;
 min-width: 0;
 min-height: 0;
 padding-top: calc(
  32px + var(--page-title-leading)
 );
 background: var(--background);
}

.chats-thread-empty,
.chats-blank {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 12px;
 flex: 1;
 min-height: 0;
 padding: 24px 16px 32px;
 text-align: center;
}

.chats-blank h2,
.chats-thread-empty h2 {
 margin: 0;
 font-size: 1.25rem;
 font-weight: 600;
}

.chats-location-bar {
 display: flex;
 flex-shrink: 0;
 justify-content: center;
 align-self: center;
 width: min(24rem, 100%);
 padding: 0;
}

.chats-location-label {
 display: flex;
 align-items: center;
 gap: 8px;
 width: min(24rem, 100%);
 font-size: var(--text-sm);
 font-weight: 600;
}

.chats-location-select {
 flex: 1;
 width: auto;
 min-width: 0;
}

.chats-thread-header {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 12px;
 padding: 0 16px 12px;
 border-bottom: 1px solid var(--border);
 flex-shrink: 0;
}

.chats-thread-heading {
 min-width: 0;
 display: flex;
 flex-direction: column;
 flex: 1;
 gap: 6px;
}

.chats-thread-title {
 margin: 0;
 font-size: 1rem;
 font-weight: 600;
 min-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.chats-thread-actions {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 justify-content: flex-end;
 gap: 8px;
 flex-shrink: 0;
}

.chats-actions-trigger {
 width: 32px;
 height: 32px;
}

.chats-actions-menu
 .dropdown-item:disabled {
 opacity: 0.5;
 pointer-events: none;
}

.chats-people {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
}

.chats-person {
 font-size: var(--text-xs);
 color: var(--muted-foreground);
 background: var(--muted);
 border-radius: 999px;
 padding: 2px 8px;
}

.chats-model-picker {
 width: auto;
 min-width: 0;
 max-width: min(22rem, 70%);
}

.chats-image-model-picker {
 max-width: min(16rem, 42%);
}

.chats-image-model-trigger
 > svg:first-child {
 flex-shrink: 0;
 opacity: 0.75;
}

.chats-model-trigger {
 display: flex;
 align-items: center;
 gap: 4px;
 width: 100%;
 min-width: 0;
 padding: 5px 6px;
 border: 0;
 background: transparent;
 color: var(--muted-foreground);
 font: inherit;
 font-size: var(--text-sm);
 cursor: pointer;
}

.chats-model-trigger:hover,
.chats-model-trigger:focus-visible {
 color: var(--foreground);
}

.chats-model-trigger:focus-visible {
 outline: 2px solid var(--ring);
 outline-offset: 2px;
 border-radius: var(--radius-sm);
}

.chats-model-trigger:disabled {
 cursor: default;
}

.chats-model-label,
.chats-model-option-label {
 min-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.chats-model-trigger svg,
.chats-model-option-check {
 flex-shrink: 0;
}

.chats-model-menu {
 display: flex;
 flex-direction: column;
 max-height: var(
  --dropdown-available-height,
  calc(100dvh - 24px)
 );
 overflow: hidden;
 max-width: min(
  28rem,
  calc(100vw - 24px)
 );
}

.chats-model-filter-row {
 display: flex;
 align-items: center;
 gap: 6px;
 flex: none;
 padding: 2px 2px 6px;
}

.chats-model-filter {
 flex: 1;
 width: auto;
 min-width: 0;
 padding: 8px 10px;
 border: 1px solid var(--border);
 border-radius: var(--radius-sm);
 background: var(--background);
 color: var(--foreground);
 font: inherit;
 font-size: var(--text-sm);
 box-sizing: border-box;
}

.chats-model-filter:focus {
 border-color: var(--ring);
 outline: 2px solid
  color-mix(
   in srgb,
   var(--ring) 30%,
   transparent
  );
 outline-offset: 1px;
}

.chats-model-capability-menu {
 flex: none;
}

.chats-model-capability-trigger {
 position: relative;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 34px;
 height: 34px;
 padding: 0;
 border: 1px solid var(--border);
 border-radius: var(--radius-sm);
 background: var(--background);
 color: var(--muted-foreground);
 cursor: pointer;
}

.chats-model-capability-trigger:hover,
.chats-model-capability-trigger:focus-visible,
.chats-model-capability-trigger.active {
 border-color: var(--ring);
 color: var(--foreground);
}

.chats-model-capability-trigger:focus-visible {
 outline: 2px solid
  color-mix(
   in srgb,
   var(--ring) 30%,
   transparent
  );
 outline-offset: 1px;
}

.chats-model-capability-active {
 position: absolute;
 top: 4px;
 right: 4px;
 width: 6px;
 height: 6px;
 border: 1px solid var(--background);
 border-radius: 999px;
 background: var(--primary);
 opacity: 0;
}

.chats-model-capability-trigger.active
 .chats-model-capability-active {
 opacity: 1;
}

.chats-model-capability-submenu {
 z-index: 60;
 min-width: 13rem;
 max-height: var(
  --dropdown-available-height,
  min(22rem, 70dvh)
 );
 overflow-x: hidden;
 overflow-y: auto;
 margin-top: 0;
}

.chats-model-capability-heading {
 padding: 8px 10px 4px;
 color: var(--muted-foreground);
 font-size: var(--text-xs);
 font-weight: 650;
 letter-spacing: 0.02em;
 text-transform: uppercase;
}

.chats-model-capability-option {
 gap: 8px;
 white-space: nowrap;
}

.chats-model-capability-option input {
 width: 14px;
 height: 14px;
 margin: 0;
 accent-color: var(--primary);
}

.chats-model-options {
 flex: 1 1 auto;
 min-height: 0;
 overflow-y: auto;
 overscroll-behavior: contain;
}

.chats-model-option {
 gap: 8px;
}

.chats-model-option-label {
 flex: 1;
}

.chats-model-capabilities {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 flex-shrink: 0;
 margin-left: auto;
 color: var(--muted-foreground);
}

.chats-model-capability {
 position: relative;
 display: inline-flex;
 align-items: center;
}

.chats-model-capability-arrow {
 position: absolute;
 right: -4px;
 bottom: -5px;
 width: 8px;
 height: 8px;
 padding: 0;
 color: var(--foreground);
 background: var(--background);
 border-radius: 999px;
}

.chats-model-capability-input
 .chats-model-capability-arrow {
 color: var(--muted-foreground);
}

.chats-model-capability-output
 .chats-model-capability-arrow {
 color: var(--primary);
}

.chats-model-option[hidden] {
 display: none;
}

.chats-model-empty {
 margin: 0;
 padding: 12px 8px;
 font-size: var(--text-sm);
}

.chats-model-empty[hidden] {
 display: none;
}

.chats-model-option-check {
 margin-left: 2px;
 color: var(--primary);
}

.chats-model-option-check[hidden] {
 display: none;
}

.chats-log {
 display: flex;
 flex-direction: column;
 gap: 12px;
 flex: 1;
 min-height: 0;
 overflow: auto;
 padding: 16px;
}

.chats-msg {
 display: flex;
 flex-direction: column;
 max-width: min(42rem, 80%);
}

.chats-msg-user {
 align-self: flex-end;
 align-items: flex-end;
}

.chats-msg-assistant {
 align-self: flex-start;
 align-items: flex-start;
}

.chats-msg-assistant:has(
 .chats-slideshow
),
.chats-msg-assistant:has(
 .chat-presentation
) {
 max-width: min(52rem, 96%);
}

.chats-msg-error .chats-bubble {
 border-color: var(--destructive);
}

.chats-bubble {
 width: 100%;
 padding: 10px 12px;
 border-radius: var(--radius-md);
 background: var(--card);
 border: 1px solid var(--border);
}

.chats-bubble-assistant {
 align-self: stretch;
}

.chats-bubble-user {
 background: var(--primary);
 color: var(--primary-foreground);
 border-color: transparent;
}

.chats-bubble-user .chats-bubble-role {
 color: inherit;
 opacity: 0.8;
}

.chats-bubble-role {
 font-size: var(--text-xs);
 margin-bottom: 4px;
}

.chats-bubble-body {
 overflow-wrap: anywhere;
 font-size: var(--text-sm);
}

.chats-slideshow {
 display: flex;
 flex-direction: column;
 gap: 8px;
 margin-top: 8px;
 min-width: 0;
 outline: none;
}

.chats-slideshow:focus-visible {
 border-radius: var(--radius-md);
 box-shadow: 0 0 0 2px var(--ring);
}

.chats-slideshow-stage {
 position: relative;
 aspect-ratio: 16 / 9;
 min-height: 12rem;
 border: 1px solid
  color-mix(
   in srgb,
   currentColor 18%,
   transparent
  );
 border-radius: var(--radius-md);
 background: color-mix(
  in srgb,
  currentColor 6%,
  transparent
 );
 overflow: hidden;
 cursor: pointer;
}

.chats-slideshow-slide {
 box-sizing: border-box;
 height: 100%;
 padding: 16px 18px;
 display: flex;
 flex-direction: column;
 gap: 8px;
 overflow: auto;
}

.chats-slideshow-layout-center {
 align-items: center;
 justify-content: center;
 text-align: center;
}

.chats-slideshow-title {
 margin: 0;
 font-size: var(--text-lg);
 font-weight: 650;
 line-height: 1.25;
}

.chats-slideshow-body {
 margin: 0;
 white-space: pre-wrap;
 color: var(--muted-foreground);
}

.chats-slideshow-layout-center
 .chats-slideshow-body {
 color: inherit;
}

.chats-slideshow-image {
 margin-top: auto;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 8px 10px;
 border-radius: var(--radius-sm);
 background: color-mix(
  in srgb,
  currentColor 8%,
  transparent
 );
 font-size: var(--text-xs);
 color: var(--muted-foreground);
}

.chats-slideshow-photo {
 display: block;
 max-width: 100%;
 max-height: 11rem;
 object-fit: contain;
 margin-top: auto;
 border-radius: var(--radius-sm);
}

.chats-slideshow-markdown {
 font-size: var(--text-sm);
 width: 100%;
}

.chats-slideshow-markdown > * + * {
 margin-top: 0.4em;
}

.chats-slideshow-markdown h1,
.chats-slideshow-markdown h2,
.chats-slideshow-markdown h3 {
 margin: 0;
 line-height: 1.25;
}

.chats-slideshow-markdown h1 {
 font-size: 1.15em;
}

.chats-slideshow-markdown ul,
.chats-slideshow-markdown ol {
 margin: 0;
 padding-left: 1.2em;
 text-align: left;
}

.chats-slideshow-skeleton,
.chats-slideshow-image-pending {
 display: flex;
 flex-direction: column;
 gap: 8px;
 margin-top: 4px;
}

.chats-slideshow-retry {
 align-self: flex-start;
 border: 0;
 background: transparent;
 color: inherit;
 font: inherit;
 text-decoration: underline;
 cursor: pointer;
 padding: 0;
}

.chats-slideshow-nav {
 display: flex;
 align-items: center;
 gap: 8px;
}

.chats-slideshow-status {
 flex: 1;
 min-width: 0;
 text-align: center;
 font-size: var(--text-xs);
 color: var(--muted-foreground);
}

.chats-slideshow-dots {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 2px;
}

.chats-slideshow-dot {
 width: 18px;
 height: 18px;
 padding: 0;
 border: 0;
 border-radius: 999px;
 background: transparent;
 cursor: pointer;
 display: grid;
 place-items: center;
}

.chats-slideshow-dot::after {
 content: '';
 width: 8px;
 height: 8px;
 border-radius: 999px;
 background: color-mix(
  in srgb,
  currentColor 28%,
  transparent
 );
}

.chats-slideshow-dot[aria-current='true']::after {
 background: currentColor;
}

.chats-md-content > .chats-slideshow {
 margin-top: 0.6em;
}

.chats-response-spinner {
 display: block;
 width: 16px;
 height: 16px;
 margin: 3px 1px;
 border: 2px solid
  var(--muted-foreground);
 border-right-color: transparent;
 border-radius: 999px;
 animation: btn-spin 0.7s linear
  infinite;
}

.chats-thinking {
 position: relative;
 margin: 0;
 color: var(--muted-foreground);
 font-size: var(--text-xs);
 line-height: 1.4;
}

.chats-thinking + .chats-md-content,
.chats-thinking
 + .chats-response-spinner {
 margin-top: 0.75em;
}

.chats-thinking-summary {
 display: flex;
 align-items: center;
 gap: 6px;
 min-width: 0;
 cursor: pointer;
 list-style: none;
 user-select: none;
}

.chats-thinking-summary::-webkit-details-marker,
.chats-thinking-summary::marker {
 display: none;
}

.chats-thinking-summary svg {
 flex-shrink: 0;
 transform: rotate(-90deg);
 transition: transform 0.2s ease;
}

.chats-thinking[open]
 .chats-thinking-summary
 svg {
 transform: rotate(0deg);
}

.chats-thinking-current {
 flex: 1;
 min-width: 0;
 overflow: hidden;
 white-space: nowrap;
 font-style: italic;
 mask-image: linear-gradient(
  to right,
  currentColor,
  currentColor calc(100% - 16px),
  transparent
 );
}

.chats-thinking.is-done
 .chats-thinking-current,
.chats-thinking[open]
 .chats-thinking-current {
 display: none;
}

.chats-thinking.is-streaming:not([open])
 .chats-thinking-label {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border: 0;
}

.chats-thinking.is-streaming:not([open])
 .chats-thinking-current {
 animation: chats-thinking-fade 1.4s
  ease-in-out infinite;
}

.chats-thinking-full {
 margin-top: 6px;
 padding: 8px 10px;
 max-height: 12em;
 overflow: auto;
 white-space: pre-wrap;
 border-radius: var(--radius-sm);
 background: color-mix(
  in srgb,
  currentColor 8%,
  transparent
 );
}

@keyframes chats-thinking-fade {
 50% {
  opacity: 0.55;
 }
}

@media (prefers-reduced-motion: reduce) {
 .chats-thinking.is-streaming:not(
   [open]
  )
  .chats-thinking-current {
  animation: none;
 }
 .chats-thinking-summary svg,
 .chats-todos-toggle svg {
  transition: none;
 }
}

.chats-md-content > * + * {
 margin-top: 0.6em;
}

.chats-md-content p {
 margin: 0.6em 0;
}

.chats-md-content h1,
.chats-md-content h2,
.chats-md-content h3,
.chats-md-content h4,
.chats-md-content h5,
.chats-md-content h6 {
 margin: 0;
 font-size: 1em;
 font-weight: 650;
 line-height: 1.35;
}

.chats-md-content ul,
.chats-md-content ol {
 margin: 0;
 padding-left: 1.25em;
}

.chats-md-content li + li {
 margin-top: 0.2em;
}

.chats-md-content a {
 color: inherit;
 text-decoration: underline;
}

.chats-md-content code {
 font-size: 0.9em;
 padding: 0.1em 0.35em;
 border-radius: var(--radius-sm);
 background: color-mix(
  in srgb,
  currentColor 14%,
  transparent
 );
}

.chats-md-content pre {
 margin: 0;
 padding: 8px 10px;
 overflow: auto;
 border-radius: var(--radius-sm);
 background: color-mix(
  in srgb,
  currentColor 10%,
  transparent
 );
}

.chats-md-content pre code {
 padding: 0;
 background: transparent;
}

.chats-md-content blockquote {
 margin: 0;
 padding-left: 10px;
 border-left: 3px solid
  color-mix(
   in srgb,
   currentColor 28%,
   transparent
  );
}

.chats-md-content table {
 display: block;
 width: max-content;
 max-width: 100%;
 overflow-x: auto;
 margin-top: 0.6em;
 margin-bottom: 0.6em;
 border-spacing: 0;
 border-collapse: collapse;
 font-size: var(--text-xs);
}

.chats-md-content th,
.chats-md-content td {
 padding: 6px 8px;
 border: 1px solid
  color-mix(
   in srgb,
   currentColor 22%,
   transparent
  );
 text-align: left;
 white-space: nowrap;
}

.chats-md-content th {
 font-weight: 650;
 background: color-mix(
  in srgb,
  currentColor 8%,
  transparent
 );
}

.chats-msg-actions {
 display: flex;
 gap: 2px;
 margin-top: 4px;
}

.chats-copy,
.chats-diagnostics {
 width: 28px;
 height: 28px;
 padding: 0;
}

.dialog.chats-diagnostics-dialog {
 max-width: 42rem;
}

.chats-diagnostics-panel {
 display: flex;
 flex-direction: column;
 gap: 12px;
 min-width: 0;
}

.chats-diagnostics-meta,
.chats-diagnostics-call {
 display: flex;
 flex-direction: column;
 gap: 6px;
 min-width: 0;
}

.chats-diagnostics-meta-row {
 display: flex;
 flex-direction: column;
 gap: 2px;
}

.chats-diagnostics-meta-label,
.chats-diagnostics-kicker,
.chats-diagnostics-id {
 font-size: var(--text-xs);
}

.chats-diagnostics-call {
 padding-top: 8px;
 border-top: 1px solid var(--border);
}

.chats-diagnostics-call-title {
 display: flex;
 align-items: center;
 gap: 8px;
 margin: 0;
 color: var(--foreground);
 font-size: var(--text-sm);
 font-weight: 650;
}

.chats-diagnostics-kicker {
 margin: 4px 0 0;
 color: var(--foreground);
 font-size: var(--text-xs);
 font-weight: 650;
}

.chats-diagnostics-status.is-error {
 color: var(--destructive);
}

.chats-diagnostics-status.is-success {
 color: var(--muted-foreground);
}

.chats-diagnostics-pre {
 margin: 0;
 padding: 8px 10px;
 overflow: auto;
 max-height: 16rem;
 white-space: pre-wrap;
 overflow-wrap: anywhere;
 font-size: var(--text-xs);
 border-radius: var(--radius-md);
 background: color-mix(
  in srgb,
  currentColor 6%,
  transparent
 );
}

.chats-msg-user .chats-copy {
 opacity: 0;
}

.chats-msg-user:hover .chats-copy,
.chats-msg-user:focus-within
 .chats-copy {
 opacity: 1;
}

@media (hover: none) {
 .chats-msg-user .chats-copy {
  opacity: 1;
 }
}

.chats-compose-area {
 position: relative;
 flex-shrink: 0;
 min-width: 0;
}

.chats-todos {
 margin: 0 16px 8px;
 padding: 10px 12px;
 border: 1px solid var(--border);
 border-radius: var(--radius-lg);
 background: var(--card);
}

.chats-todos[hidden] {
 display: none;
}

.chats-blank .chats-todos {
 margin: 0 0 8px;
 text-align: left;
}

.chats-todos-bar {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 8px;
 margin: 0 0 8px;
}

.chats-todos.is-collapsed
 .chats-todos-bar {
 margin-bottom: 0;
}

.chats-todos-heading {
 display: flex;
 flex-direction: column;
 gap: 2px;
 min-width: 0;
 margin: 0;
}

.chats-todos-title {
 font-size: var(--text-sm);
 font-weight: 650;
}

.chats-todos-progress {
 font-size: var(--text-xs);
 font-weight: 400;
 color: var(--muted-foreground);
 overflow-wrap: anywhere;
}

.chats-todos-toggle {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 28px;
 height: 28px;
 margin: -4px -4px 0 0;
 padding: 0;
 border: 0;
 border-radius: var(--radius-sm);
 background: transparent;
 color: var(--muted-foreground);
 cursor: pointer;
 flex-shrink: 0;
}

.chats-todos-toggle:hover,
.chats-todos-toggle:focus-visible {
 background: var(--accent);
 color: var(--foreground);
}

.chats-todos-toggle svg {
 transition: transform 0.2s ease;
}

.chats-todos.is-collapsed
 .chats-todos-toggle
 svg {
 transform: rotate(180deg);
}

.chats-todos.is-collapsed
 .chats-todo-list {
 display: none;
}

.chats-todo-list {
 margin: 0;
 padding: 0;
 list-style: none;
 display: flex;
 flex-direction: column;
 gap: 6px;
}

.chats-todo {
 display: flex;
 align-items: flex-start;
 gap: 8px;
 font-size: var(--text-sm);
 line-height: 1.4;
}

.chats-todo-mark {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 16px;
 height: 16px;
 margin-top: 1px;
 flex-shrink: 0;
 border: 1px solid
  color-mix(
   in srgb,
   currentColor 28%,
   transparent
  );
 border-radius: 4px;
}

.chats-todo[data-status='completed']
 .chats-todo-mark,
.chats-todo[data-status='cancelled']
 .chats-todo-mark {
 border-color: transparent;
 background: color-mix(
  in srgb,
  currentColor 12%,
  transparent
 );
}

.chats-todo[data-status='in_progress']
 .chats-todo-mark {
 border-color: var(--ring);
}

.chats-todo-spinner {
 width: 10px;
 height: 10px;
 box-sizing: border-box;
 border: 2px solid var(--ring);
 border-right-color: transparent;
 border-radius: 999px;
}

.chats-todos.is-live
 .chats-todo-spinner {
 animation: btn-spin 0.7s linear
  infinite;
}

.chats-todo[data-status='in_progress']
 .chats-todo-text {
 font-weight: 600;
}

.chats-todo[data-status='completed']
 .chats-todo-text {
 text-decoration: line-through;
 opacity: 0.65;
}

.chats-todo[data-status='cancelled']
 .chats-todo-text {
 text-decoration: line-through;
 opacity: 0.5;
}

.chats-send-stop {
 display: block;
 width: 10px;
 height: 10px;
 border-radius: 2px;
 background: currentColor;
}

.chats-composer {
 position: relative;
 display: flex;
 flex-direction: column;
 gap: 6px;
 margin: 12px 16px 16px;
 padding: 8px;
 border: 1px solid var(--input);
 border-radius: 16px;
 background: var(--background);
 box-shadow: 0 1px 2px
  rgba(16, 23, 41, 0.05);
 transition:
  border-color 0.15s,
  box-shadow 0.15s;
}

.chats-mention-menu {
 position: absolute;
 z-index: 30;
 left: 0;
 right: 0;
 bottom: calc(100% + 6px);
 display: flex;
 flex-direction: column;
 gap: 2px;
 max-height: min(18rem, 46vh);
 overflow-x: hidden;
 overflow-y: auto;
 padding: 6px;
 border: 1px solid var(--border);
 border-radius: 12px;
 background: var(--popover);
 color: var(--popover-foreground);
 box-shadow: 0 12px 32px
  rgba(16, 23, 41, 0.16);
}

.chats-mention-menu[hidden] {
 display: none;
}

.chats-skill-option-title {
 flex: 1;
 min-width: 0;
}

.chats-skill-option-slug {
 margin-left: auto;
 font-size: 12px;
 font-family:
  ui-monospace, SFMono-Regular, Menlo,
  monospace;
}

.chats-skill-trigger .dropdown-item,
.dropdown-item.chats-skill-trigger {
 justify-content: flex-start;
}

.chats-skill-trigger svg:last-child,
.dropdown-item.chats-skill-trigger
 > svg:last-child {
 margin-left: auto;
}

.chats-skill-submenu {
 display: flex;
 flex-direction: column;
 gap: 6px;
 max-height: min(18rem, 46vh);
 padding: 8px;
 border: 1px solid var(--border);
 border-radius: 12px;
 background: var(--popover);
 color: var(--popover-foreground);
 box-shadow: 0 12px 32px
  rgba(16, 23, 41, 0.16);
}

.chats-skill-submenu[hidden] {
 display: none;
}

.chats-skill-filter {
 width: 100%;
}

.chats-skill-submenu-list {
 display: flex;
 flex-direction: column;
 gap: 2px;
 overflow: auto;
}

.chats-mention-status {
 margin: 0;
 padding: 8px 10px;
 font-size: var(--text-sm);
}

.chats-mention-skeleton {
 padding: 6px 10px;
}

.chats-mention-option {
 display: flex;
 align-items: center;
 gap: 10px;
 width: 100%;
 margin: 0;
 padding: 6px 8px;
 border: 0;
 border-radius: 8px;
 background: transparent;
 color: inherit;
 font: inherit;
 text-align: left;
 cursor: pointer;
}

.chats-mention-option.is-active {
 background: var(--accent);
 color: var(--accent-foreground);
}

.chats-mention-icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 32px;
 height: 32px;
 flex-shrink: 0;
 border-radius: 999px;
 background: var(--muted);
 color: var(--foreground);
}

.chats-mention-option.is-active
 .chats-mention-icon {
 background: var(--background);
}

.chats-mention-copy {
 display: flex;
 flex-direction: column;
 min-width: 0;
}

.chats-mention-name,
.chats-mention-meta {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.chats-mention-name {
 font-size: var(--text-sm);
 font-weight: 600;
}

.chats-mention-meta {
 font-size: var(--text-xs);
}

.chats-mention-match {
 background: transparent;
 color: inherit;
 font-weight: 700;
}

.chats-composer:focus-within {
 border-color: var(--ring);
 box-shadow: 0 0 0 3px
  color-mix(
   in srgb,
   var(--ring) 24%,
   transparent
  );
}

.chats-blank .chats-compose-area {
 width: min(36rem, 100%);
}

.chats-blank .chats-composer {
 width: 100%;
 margin: 0;
 text-align: left;
}

.chats-queue {
 display: flex;
 flex-direction: column;
 gap: 6px;
 max-height: min(14rem, 34vh);
 margin: 0 16px -4px;
 padding: 8px;
 overflow-y: auto;
 border: 1px solid var(--border);
 border-radius: var(--radius-lg);
 background: var(--card);
 box-shadow: 0 8px 24px
  rgba(16, 23, 41, 0.12);
}

.chats-queue[hidden] {
 display: none;
}

.chats-blank .chats-queue {
 margin: 0 0 8px;
 text-align: left;
}

.chats-queue-item {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 6px 8px;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 background: var(--background);
}

.chats-queue-copy {
 display: flex;
 flex: 1;
 flex-direction: column;
 min-width: 0;
}

.chats-queue-edit {
 width: 100%;
 min-height: 26px;
 max-height: 12rem;
 padding: 4px 2px;
 overflow: hidden;
 resize: none;
 border: 0;
 background: transparent;
 color: var(--foreground);
 font: inherit;
 font-size: var(--text-sm);
}

.chats-queue-edit.is-expanded {
 overflow: auto;
}

.chats-queue-edit:focus {
 outline: none;
}

.chats-queue-files {
 overflow: hidden;
 font-size: var(--text-xs);
 text-overflow: ellipsis;
 white-space: nowrap;
}

.chats-queue-actions {
 display: inline-flex;
 align-items: center;
 gap: 2px;
 flex-shrink: 0;
}

.chats-queue-remove,
.chats-queue-send {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 28px;
 height: 28px;
 flex-shrink: 0;
 padding: 0;
 border: 0;
 border-radius: 999px;
 background: transparent;
 color: var(--muted-foreground);
 cursor: pointer;
}

.chats-queue-send:hover,
.chats-queue-send:focus-visible {
 background: var(--muted);
 color: var(--foreground);
}

.chats-queue-remove:hover,
.chats-queue-remove:focus-visible {
 background: var(--muted);
 color: var(--destructive);
}

.chats-composer .textarea {
 min-height: 54px;
 padding: 8px;
 resize: none;
 border: 0;
 background: transparent;
}

.chats-composer
 .textarea:focus-visible {
 border-color: transparent;
 box-shadow: none;
}

.chats-composer-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 min-width: 0;
}

.chats-composer-leading {
 display: flex;
 align-items: center;
 gap: 2px;
 min-width: 0;
}

.chats-file-input {
 display: none;
}

.chats-attach,
.chats-more {
 width: 30px;
 height: 30px;
 flex-shrink: 0;
}

.chats-context-dialog {
 max-width: 40rem;
}

.chats-context-status {
 margin: 0;
}

.chats-context-pre {
 margin: 0;
 padding: 12px;
 max-height: min(60vh, 32rem);
 overflow: auto;
 white-space: pre-wrap;
 overflow-wrap: anywhere;
 font-family:
  ui-monospace, SFMono-Regular, Menlo,
  monospace;
 font-size: var(--text-xs);
 line-height: 1.45;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 background: var(--muted);
}

.chats-context-pre[hidden] {
 display: none;
}

.chats-composer-dragging {
 border-color: var(--primary);
 background: color-mix(
  in srgb,
  var(--primary) 6%,
  var(--background)
 );
}

.chats-pending-files {
 display: flex;
 flex-wrap: wrap;
 align-items: flex-start;
 gap: 6px;
}

.chats-pending-files[hidden] {
 display: none;
}

.chats-pending-file {
 display: flex;
 align-items: center;
 gap: 8px;
 flex: 0 1 auto;
 width: max-content;
 max-width: min(260px, 100%);
 min-width: 0;
 padding: 8px 8px 8px 12px;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 background: var(--muted);
 color: var(--foreground);
}

.chats-pending-file:has(
 .chats-pending-file-open
) {
 gap: 2px;
 padding: 4px;
}

.chats-pending-file-open {
 display: flex;
 align-items: center;
 gap: 8px;
 flex: 1 1 auto;
 min-width: 0;
 margin: 0;
 padding: 6px 8px 6px 10px;
 border: 0;
 border-radius: calc(
  var(--radius-md) - 2px
 );
 background: transparent;
 color: inherit;
 font: inherit;
 text-align: left;
 cursor: pointer;
}

.chats-pending-file-open:hover,
.chats-pending-file-open:focus-visible {
 background: color-mix(
  in srgb,
  currentColor 10%,
  transparent
 );
}

.chats-pending-file.error {
 border-color: var(--destructive);
}

.chats-pending-file-info {
 display: flex;
 flex-direction: column;
 min-width: 0;
 flex: 1;
}

.chats-pending-file-name {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 font-size: var(--text-xs);
 font-weight: 600;
}

.chats-pending-file-meta {
 font-size: 10px;
}

.chats-pending-file-remove {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 24px;
 height: 24px;
 flex-shrink: 0;
 padding: 0;
 border: 0;
 border-radius: 999px;
 background: transparent;
 color: inherit;
 cursor: pointer;
}

.chats-pending-file-remove:hover {
 background: color-mix(
  in srgb,
  currentColor 12%,
  transparent
 );
}

.chats-send {
 position: relative;
 width: 32px;
 height: 32px;
 border-radius: 999px;
}

.chats-send[data-loading='true']
 .btn-content {
 visibility: hidden;
}

.chats-send[data-loading='true']
 .btn-spinner {
 position: absolute;
 inset: 0;
 margin: auto;
}

@media (prefers-reduced-motion: reduce) {
 .chats-response-spinner,
 .chats-todo-spinner,
 .chats-item-running {
  animation: none;
 }
}

.chats-composer-model-error {
 padding: 0 8px 4px;
}

.chats-error {
 color: var(--destructive);
 font-size: var(--text-sm);
}

.chats-message-files {
 display: flex;
 flex-wrap: wrap;
 align-items: flex-start;
 gap: 6px;
 margin-top: 8px;
}

.chats-message-file {
 display: flex;
 align-items: center;
 gap: 4px;
 flex: 0 1 auto;
 width: max-content;
 max-width: min(260px, 100%);
 min-width: 0;
 overflow: hidden;
 padding: 4px;
 border: 1px solid
  color-mix(
   in srgb,
   currentColor 22%,
   transparent
  );
 border-radius: var(--radius-md);
 background: color-mix(
  in srgb,
  currentColor 5%,
  transparent
 );
}

button.chats-message-file {
 gap: 8px;
 margin: 0;
 padding: 10px 12px;
 appearance: none;
 font: inherit;
 color: inherit;
 text-align: left;
 cursor: pointer;
}

button.chats-message-file:hover,
button.chats-message-file:focus-visible {
 background: color-mix(
  in srgb,
  currentColor 12%,
  transparent
 );
}

.chats-pending-file > svg,
.chats-pending-file-open > svg,
.chats-message-file > svg,
.chats-message-file-open > svg {
 flex-shrink: 0;
}

.chats-message-file-open {
 display: flex;
 align-items: center;
 gap: 8px;
 flex: 1 1 auto;
 min-width: 0;
 margin: 0;
 padding: 6px 8px 6px 10px;
 border: 0;
 border-radius: calc(
  var(--radius-md) - 2px
 );
 background: transparent;
 color: inherit;
 font: inherit;
 text-align: left;
 cursor: pointer;
}

.chats-message-file-thumb {
 width: 36px;
 height: 36px;
 object-fit: cover;
 border-radius: 6px;
 flex-shrink: 0;
}

.chats-message-file-open:hover,
.chats-message-file-download:hover {
 background: color-mix(
  in srgb,
  currentColor 10%,
  transparent
 );
}

.chats-message-file-info {
 display: flex;
 flex-direction: column;
 min-width: 0;
 flex: 1;
}

.chats-message-file-name {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 font-size: var(--text-xs);
 font-weight: 650;
}

.chats-message-file-meta {
 font-size: 10px;
 opacity: 0.72;
}

.chats-message-file-download {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 32px;
 height: 32px;
 flex-shrink: 0;
 border-radius: 999px;
 color: inherit;
 text-decoration: none;
}

.chat-presentation {
 display: flex;
 flex-direction: column;
 gap: 10px;
 margin-top: 12px;
 overflow: hidden;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 background: var(--background);
 color: var(--foreground);
}

.chat-presentation-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 padding: 10px 12px 0;
}

.chat-presentation-heading {
 display: flex;
 flex-direction: column;
 min-width: 0;
 font-size: var(--text-sm);
}

.chat-presentation-heading strong,
.chat-presenter-title {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.chat-presentation-status,
.chat-presentation-count {
 font-size: var(--text-xs);
}

.chat-presentation-present,
.chat-presentation-retry,
.chat-presentation-nav,
.chat-presenter-action {
 border: 0;
 font: inherit;
 cursor: pointer;
}

.chat-presentation-present {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 flex-shrink: 0;
 padding: 6px 9px;
 border-radius: var(--radius-sm);
 background: var(--primary);
 color: var(--primary-foreground);
 font-size: var(--text-xs);
 font-weight: 650;
}

.chat-presentation-image-model {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 flex-shrink: 0;
 padding: 6px 9px;
 border: 1px solid var(--border);
 border-radius: var(--radius-sm);
 background: var(--background);
 color: var(--foreground);
 font: inherit;
 font-size: var(--text-xs);
 font-weight: 650;
 cursor: pointer;
}

.chat-presentation-status {
 display: inline-flex;
 align-items: center;
 gap: 8px;
}

.chat-presentation-spinner {
 width: 12px;
 height: 12px;
}

.chats-image-model-options {
 display: flex;
 flex-direction: column;
 gap: 4px;
}

.chat-slide-photo-pending {
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 72px;
 margin-top: auto;
 color: var(--muted-foreground);
}

.chat-presentation-stage {
 aspect-ratio: 16 / 9;
 margin: 0 12px;
 overflow: auto;
 border-radius: var(--radius-sm);
 background:
  radial-gradient(
   circle at top right,
   color-mix(
    in srgb,
    var(--primary) 18%,
    transparent
   ),
   transparent 45%
  ),
  var(--card);
 box-shadow: inset 0 0 0 1px
  color-mix(
   in srgb,
   var(--border) 80%,
   transparent
  );
}

.chat-slide-content {
 display: flex;
 flex-direction: column;
 min-width: 0;
 min-height: 100%;
 padding: clamp(18px, 5%, 38px);
 box-sizing: border-box;
}

.chat-slide-center {
 align-items: center;
 justify-content: center;
 text-align: center;
}

.chat-slide-standard {
 justify-content: center;
}

.chat-slide-markdown {
 width: 100%;
 font-size: clamp(
  0.75rem,
  1.8vw,
  1.05rem
 );
}

.chat-slide-markdown h1 {
 font-size: 1.85em;
}

.chat-slide-markdown h2 {
 font-size: 1.45em;
}

.chat-slide-markdown h3 {
 font-size: 1.2em;
}

/* Centered slides keep headings centered, but a list
   shrinks to its text and stays left-aligned inside
   that centered block. */
.chat-slide-center
 .chat-slide-markdown
 ul,
.chat-slide-center
 .chat-slide-markdown
 ol,
.chats-slideshow-layout-center
 .chats-slideshow-markdown
 ul,
.chats-slideshow-layout-center
 .chats-slideshow-markdown
 ol {
 width: fit-content;
 max-width: 100%;
 margin-left: auto;
 margin-right: auto;
 padding-left: 0.15em;
 list-style-position: inside;
 text-align: left;
}

.chat-slide-photo {
 display: block;
 max-width: 100%;
 max-height: 42%;
 object-fit: contain;
 margin-top: auto;
}

.chat-slide-pending {
 display: flex;
 flex-direction: column;
 justify-content: center;
 gap: 12px;
 width: 100%;
 min-height: 100%;
 text-align: center;
}

.chat-slide-skeleton {
 display: flex;
 flex-direction: column;
 gap: 9px;
 width: min(28rem, 80%);
 margin: 0 auto;
}

.chat-presentation-retry {
 align-self: center;
 padding: 6px 10px;
 border-radius: var(--radius-sm);
 background: var(--muted);
 color: var(--foreground);
 font-size: var(--text-xs);
}

.chat-presentation-controls {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 padding: 0 12px 10px;
}

.chat-presentation-nav,
.chat-presenter-action {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 34px;
 height: 34px;
 padding: 0;
 border-radius: 999px;
 background: transparent;
 color: inherit;
}

.chat-presentation-nav:hover,
.chat-presentation-nav:focus-visible,
.chat-presenter-action:hover,
.chat-presenter-action:focus-visible {
 background: color-mix(
  in srgb,
  currentColor 12%,
  transparent
 );
}

.chat-presentation-nav:disabled {
 opacity: 0.3;
 cursor: default;
}

.chat-presentation-previous-icon {
 transform: rotate(180deg);
}

.dialog-overlay:has(
 .chat-presentation-dialog
) {
 padding: 0;
 background: var(--background);
 z-index: 80;
}

.dialog.chat-presentation-dialog {
 width: 100vw;
 height: 100vh;
 height: 100dvh;
 max-width: none;
 max-height: none;
 padding: 0;
 border: 0;
 border-radius: 0;
 background: var(--background);
 color: var(--foreground);
 box-shadow: none;
}

.dialog.chat-presentation-dialog:fullscreen {
 width: 100vw;
 height: 100vh;
}

.chat-presenter {
 display: flex;
 flex-direction: column;
 width: 100%;
 height: 100%;
 min-width: 0;
 min-height: 0;
 background: var(--background);
 color: var(--foreground);
}

.chat-presenter-header,
.chat-presenter-footer {
 display: flex;
 align-items: center;
 flex-shrink: 0;
 min-height: 56px;
 padding: 8px 16px;
 background: color-mix(
  in srgb,
  var(--foreground) 6%,
  var(--background)
 );
}

.chat-presenter-header {
 justify-content: space-between;
 gap: 16px;
}

.chat-presenter-footer {
 justify-content: center;
 min-height: 42px;
}

.chat-presenter-body {
 display: grid;
 grid-template-columns:
  52px minmax(0, 1fr)
  52px;
 align-items: center;
 gap: 12px;
 flex: 1;
 min-width: 0;
 min-height: 0;
 padding: 16px;
}

.chat-presenter-stage {
 aspect-ratio: 16 / 9;
 width: min(
  100%,
  calc((100dvh - 146px) * 16 / 9)
 );
 max-height: calc(100dvh - 146px);
 margin: auto;
 overflow: auto;
 border-radius: 10px;
 background:
  radial-gradient(
   circle at top right,
   color-mix(
    in srgb,
    var(--primary) 18%,
    transparent
   ),
   transparent 45%
  ),
  var(--card);
 box-shadow:
  inset 0 0 0 1px
   color-mix(
    in srgb,
    var(--border) 80%,
    transparent
   ),
  0 18px 60px
   color-mix(
    in srgb,
    var(--foreground) 16%,
    transparent
   );
}

.chat-slide-content-presenter {
 padding: clamp(32px, 6vw, 92px);
}

.chat-slide-content-presenter
 .chat-slide-markdown {
 font-size: clamp(1rem, 2.2vw, 2rem);
 line-height: 1.35;
}

.chat-presenter-count {
 color: var(--muted-foreground);
 font-size: var(--text-sm);
}

.chat-presenter-close {
 color: var(--foreground);
}

.dialog-overlay:has(
 .chat-file-preview
) {
 padding: 0;
 background: rgba(15, 18, 24, 0.94);
 z-index: 80;
}

.dialog.chat-file-preview {
 width: 100vw;
 height: 100vh;
 height: 100dvh;
 max-width: none;
 max-height: none;
 padding: 0;
 border: 0;
 border-radius: 0;
 background: transparent;
 box-shadow: none;
 color: #fff;
}

.chat-file-preview-layout {
 display: flex;
 flex-direction: column;
 min-width: 0;
 min-height: 0;
 width: 100%;
 height: 100%;
}

.chat-file-preview-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 min-height: 64px;
 padding: 10px 16px;
 background: rgba(0, 0, 0, 0.32);
}

.chat-file-preview-heading {
 display: flex;
 flex-direction: column;
 min-width: 0;
}

.chat-file-preview-name {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 font-size: var(--text-sm);
}

.chat-file-preview-meta {
 font-size: var(--text-xs);
 color: rgba(255, 255, 255, 0.7);
}

.chat-file-preview-actions {
 display: flex;
 align-items: center;
 gap: 4px;
}

.chat-file-preview-mode {
 display: inline-flex;
 align-items: center;
 gap: 2px;
 margin-right: 8px;
 padding: 2px;
 border-radius: 999px;
 background: rgba(255, 255, 255, 0.12);
}

.chat-file-preview-mode-btn {
 margin: 0;
 padding: 6px 10px;
 border: 0;
 border-radius: 999px;
 background: transparent;
 color: rgba(255, 255, 255, 0.78);
 font: inherit;
 font-size: var(--text-xs);
 font-weight: 600;
 line-height: 1;
 cursor: pointer;
}

.chat-file-preview-mode-btn.active {
 background: #fff;
 color: #111;
}

.chat-file-preview-action {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 40px;
 height: 40px;
 padding: 0;
 border: 0;
 border-radius: 999px;
 background: transparent;
 color: #fff;
 cursor: pointer;
}

.chat-file-preview-action:hover,
.chat-file-preview-action:focus-visible {
 background: rgba(255, 255, 255, 0.12);
}

.chat-file-preview-content {
 display: flex;
 align-items: center;
 justify-content: center;
 min-width: 0;
 min-height: 0;
 flex: 1;
 padding: 20px;
}

.chat-file-preview-content.is-markdown {
 align-items: stretch;
 justify-content: center;
 padding: 12px 16px 20px;
}

.chat-file-preview-markdown {
 width: min(100%, 860px);
 height: 100%;
 min-width: 0;
 margin: 0 auto;
 overflow: auto;
 padding: 20px 24px 32px;
 border-radius: var(--radius-md);
 background: var(--background);
 color: var(--foreground);
}

.chat-file-preview-image {
 display: block;
 max-width: 100%;
 max-height: 100%;
 object-fit: contain;
}

.chat-file-preview-media {
 width: min(100%, 960px);
 max-height: 100%;
}

.chat-file-preview-audio {
 max-width: 560px;
}

.chat-file-preview-frame {
 width: min(100%, 1100px);
 height: 100%;
 border: 0;
 border-radius: var(--radius-md);
 background: #fff;
}

.chat-file-preview-unsupported {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 8px;
 max-width: 28rem;
 text-align: center;
}

.chat-file-preview-unsupported p {
 margin: 0;
}

.chat-dataset-preview
 .chat-file-preview-content {
 align-items: stretch;
 justify-content: center;
 padding: 12px 16px 20px;
}

.chat-dataset-preview-open {
 width: auto;
 gap: 6px;
 padding: 0 12px;
 font-size: var(--text-xs);
 white-space: nowrap;
 text-decoration: none;
}

.chat-dataset-preview-sheet {
 display: flex;
 flex-direction: column;
 gap: 16px;
 width: min(100%, 1100px);
 height: 100%;
 min-width: 0;
 min-height: 0;
 overflow: auto;
 padding: 16px 18px 24px;
 border-radius: var(--radius-md);
 background: var(--background);
 color: var(--foreground);
}

.chat-dataset-preview-description {
 margin: 0;
 font-size: var(--text-sm);
}

.chat-dataset-preview-table {
 display: flex;
 flex-direction: column;
 gap: 8px;
 min-width: 0;
}

.chat-dataset-preview-table h3 {
 margin: 0;
 font-size: var(--text-sm);
 font-weight: 650;
}

.chats-add-list {
 display: flex;
 flex-direction: column;
 gap: 8px;
}

.chats-add-filter {
 width: 100%;
}

.chats-add-empty {
 margin: 0;
 font-size: var(--text-sm);
}

.chats-add-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
}

.chats-add-row[hidden] {
 display: none;
}

.chats-add-meta {
 min-width: 0;
}

@media (max-width: 720px) {
 .chats-page {
  flex-direction: column;
 }
 .chats-pane {
  width: 100%;
  max-height: 38%;
  border-right: none;
  border-bottom: 1px solid var(--border);
  padding-top: calc(
   16px + var(--page-title-leading)
  );
 }
 .chats-gated {
  padding: calc(
    16px + var(--page-title-leading)
   )
   16px 16px;
 }

 .chat-presenter-body {
  grid-template-columns:
   40px minmax(0, 1fr)
   40px;
  gap: 4px;
  padding: 8px;
 }

 .chat-presenter-stage {
  width: 100%;
 }
}