/* Settings */

.smtcmp-settings-support-smart-composer {
  border-top: none;
}

.smtcmp-settings-section:not(:first-child) {
  margin-top: var(--size-4-10);
}

.smtcmp-settings-section--tight {
  margin-top: var(--size-4-4) !important;
}

.smtcmp-settings-section select option {
  padding-inline-start: 0 !important;
  padding-left: 0 !important;
  -webkit-padding-start: 0 !important;
  text-indent: 0 !important;
  margin-left: 0;
}

.smtcmp-settings-section select optgroup {
  padding-inline-start: 0 !important;
  padding-left: 0 !important;
  -webkit-padding-start: 0 !important;
  text-indent: 0 !important;
  margin-left: 0;
}

.smtcmp-settings-header {
  color: var(--text-normal);
  font-size: var(--h1-size);
  line-height: var(--line-height-tight);
  font-weight: var(--h1-weight);
  margin: var(--size-4-2) 0;
}

.smtcmp-settings-sub-header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.smtcmp-settings-trigger-callout-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-4-3);
}

.smtcmp-settings-sub-header {
  color: var(--text-normal);
  font-size: var(--h4-size);
  line-height: var(--line-height-tight);
  font-weight: var(--h4-weight);
  margin: var(--size-4-3) 0;
}

.smtcmp-settings-desc {
  color: var(--text-muted);
  font-size: var(--font-ui-small);
  line-height: var(--line-height-tight);
  margin: var(--size-4-1) 0;
}

.smtcmp-settings-callout {
  border: none;
  padding-inline-start: var(--size-4-2);
  border-inline-start: var(--blockquote-border-thickness) solid
    var(--blockquote-border-color);
}

.smtcmp-settings-callout + .setting-item {
  border-top: none !important;
  padding-top: 0 !important;
}

.smtcmp-settings-advanced-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--size-4-2);
  padding: 8px 0;
  color: var(--text-muted);
  font-size: 0.9em;
}

.smtcmp-settings-advanced-toggle-icon {
  transition: transform 0.2s;
  transform: rotate(0deg);
  transform-origin: center;
  will-change: transform;
}

.smtcmp-settings-advanced-toggle.is-expanded
  .smtcmp-settings-advanced-toggle-icon {
  transform: rotate(90deg);
}

.smtcmp-settings-required::after {
  color: var(--color-red);
  content: '*';
  display: inline-block;
  font-size: var(--font-ui-medium);
  font-weight: var(--font-bold);
  margin-left: var(--size-4-1);
}

.smtcmp-setting-name-row {
  display: inline-flex;
  align-items: center;
  gap: var(--size-4-2);
  flex-wrap: wrap;
}

.smtcmp-setting-name-extra {
  display: inline-flex;
  align-items: center;
}

.smtcmp-setting-size-badge {
  color: var(--text-muted);
  font-size: var(--font-ui-small);
  font-weight: var(--font-normal);
  line-height: 1;
}

/* Settings: Embedding DB Manage */

.smtcmp-settings-embedding-db-manage-root {
  padding: var(--size-4-2);
}

.smtcmp-settings-embedding-db-manage-header {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: var(--size-4-1);
  font-size: var(--font-ui-small);
  margin-bottom: var(--size-4-2);
}

.smtcmp-settings-embedding-db-manage-table {
  width: 100%;
  border-collapse: collapse;
}

.smtcmp-settings-embedding-db-manage-table tr {
  border-bottom: var(--border-width) solid var(--background-modifier-border);
}

.smtcmp-settings-embedding-db-manage-table th,
.smtcmp-settings-embedding-db-manage-table td {
  padding: var(--size-4-2);
  text-align: left;
}

.smtcmp-settings-embedding-db-manage-table th {
  font-weight: var(--font-medium);
  color: var(--text-muted);
  padding-bottom: var(--size-4-3);
}

.smtcmp-settings-embedding-db-manage-table td {
  padding-top: var(--size-4-3);
  padding-bottom: var(--size-4-3);
  vertical-align: middle;
}

.smtcmp-settings-embedding-db-manage-actions {
  display: flex;
  gap: var(--size-4-2);
}

.smtcmp-settings-embedding-db-manage-actions-loading {
  display: flex;
  align-items: center;
  gap: var(--size-2-2);
  font-size: var(--font-ui-smaller);
}

/* Settings: tables */

.smtcmp-settings-table-container {
  overflow-x: auto;
}

.smtcmp-settings-table {
  margin: var(--size-4-3) 0;
  width: 100%;
  border-collapse: collapse;
}

.smtcmp-settings-table th {
  padding: var(--size-4-1) var(--size-4-1) var(--size-4-2) var(--size-4-1);
  text-align: left;
  vertical-align: middle;
  font-weight: var(--font-medium);
  color: var(--text-muted);
}

.smtcmp-settings-table tbody td {
  height: var(--size-4-10);
  padding: var(--size-4-1);
  text-align: left;
  vertical-align: middle;
}

.smtcmp-settings-table tfoot td {
  padding: var(--size-4-1);
  text-align: right;
  vertical-align: middle;
}

.smtcmp-settings-table thead tr {
  border-bottom: var(--border-width) solid var(--background-modifier-border);
}

.smtcmp-settings-table tbody tr {
  border-bottom: var(--border-width) solid var(--background-modifier-border);
}

.smtcmp-settings-actions {
  display: flex;
  align-items: center;
  gap: var(--size-4-1);

  svg {
    height: var(--icon-l);
    width: var(--icon-l);
    stroke-width: var(--icon-stroke);
  }
}

.smtcmp-settings-kv-entry.setting-item .setting-item-info {
  display: none;
}

.smtcmp-settings-kv-entry.setting-item .setting-item-control {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-4-1);
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: 0;
  width: 100%;
}

.smtcmp-settings-kv-entry .setting-item-control input {
  flex: 1 1 160px;
  min-width: 140px;
}

.smtcmp-settings-kv-entry .setting-item-control .setting-item-button {
  margin-top: 0;
}

.smtcmp-settings-kv-entry--inline.setting-item .setting-item-control {
  flex-wrap: nowrap;
  align-items: center;
}

.smtcmp-settings-kv-entry--inline .setting-item-control input {
  min-width: 0;
}

.smtcmp-settings-kv-entry--inline .setting-item-control > div {
  min-width: 0;
}

.smtcmp-settings-kv-entry--inline .setting-item-control > div select {
  width: 100%;
}

.smtcmp-settings-kv-entry--inline .setting-item-control > :nth-child(1) {
  flex: 0 0 120px;
}

.smtcmp-settings-kv-entry--inline .setting-item-control > :nth-child(2) {
  flex: 0 0 120px;
}

.smtcmp-settings-kv-entry--inline .setting-item-control > :nth-child(3) {
  flex: 1 1 420px;
}

.smtcmp-provider-headers-entry .setting-item-control > :nth-child(1) {
  flex: 0 0 180px;
}

.smtcmp-provider-headers-entry .setting-item-control > :nth-child(2) {
  flex: 1 1 320px;
}

.smtcmp-provider-headers-entry .setting-item-control > :nth-child(3) {
  flex: 0 0 auto;
}

.smtcmp-provider-headers-entry .setting-item-control .setting-item-button {
  white-space: nowrap;
}

.smtcmp-provider-headers-entry.setting-item {
  align-items: center;
  padding-top: var(--size-4-2) !important;
  padding-bottom: var(--size-4-2) !important;
}

@media (max-width: 900px) {
  .smtcmp-settings-kv-entry--inline.setting-item .setting-item-control {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .smtcmp-settings-kv-entry--inline .setting-item-control > div {
    flex: 1 1 160px;
    min-width: 140px;
  }

  .smtcmp-settings-kv-entry--inline .setting-item-control > :nth-child(1),
  .smtcmp-settings-kv-entry--inline .setting-item-control > :nth-child(2),
  .smtcmp-settings-kv-entry--inline .setting-item-control > :nth-child(3) {
    flex: 1 1 160px;
  }

  .smtcmp-provider-headers-entry .setting-item-control > :nth-child(3) {
    flex: 0 0 auto;
  }
}

/* Drag handle for reorderable rows */

.smtcmp-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: grab;
  padding: 0 var(--size-4-1);
  user-select: none;
}

.smtcmp-drag-handle:hover {
  color: var(--text-normal);
}

.smtcmp-drag-handle svg {
  width: var(--icon-m);
  height: var(--icon-m);
  stroke-width: var(--icon-stroke);
}

.smtcmp-drag-handle {
  padding: 0; /* 去掉手柄内部左右留白 */
  transition:
    transform 120ms ease,
    color 120ms ease;
}

/* 紧凑化：手柄列（第一列）不占额外空间，仅按内容宽度布局 */

.smtcmp-settings-table th:first-child,
.smtcmp-settings-table td:first-child,
.smtcmp-models-table th:first-child,
.smtcmp-models-table td:first-child {
  padding-left: 0;
  padding-right: 0;
  width: 0; /* 让列宽收缩为内容宽度（图标本身宽度）*/
}

/* 覆盖 ChatModelsSubSection 中 colgroup 的第一列固定宽度 */

.smtcmp-settings-table col:first-child {
  width: 0 !important;
}

/* Plan A: 拖拽行与插入位置的视觉反馈（无布局抖动） */

.smtcmp-row-dragging {
  background-color: var(--background-modifier-hover);
  transform: translateX(2px) scale(0.995);
  opacity: 0.98;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition:
    transform 120ms ease,
    background-color 120ms ease,
    box-shadow 120ms ease,
    opacity 120ms ease;
  will-change: transform, opacity;
}

/* 使用 inset box-shadow 绘制顶部/底部插入线，避免改变 row 高度导致抖动 */

.smtcmp-row-drag-over-before {
  box-shadow: inset 0 2px 0 0 var(--interactive-accent);
  transition: box-shadow 120ms ease;
}

.smtcmp-row-drag-over-after {
  box-shadow: inset 0 -2px 0 0 var(--interactive-accent);
  transition: box-shadow 120ms ease;
}

/* 手柄抓取时的轻微强调 */

.smtcmp-drag-handle--active {
  color: var(--text-normal);
  transform: scale(1.05);
}

/* 放下成功后的瞬时反馈：高亮并轻微回弹（不改变布局尺寸） */

.smtcmp-row-drop-success {
  animation: smtcmp-drop-flash 650ms ease-out;
}

@keyframes smtcmp-drop-flash {
  0% {
    background-color: var(--background-modifier-hover);
    transform: translateX(2px) scale(0.995);
    opacity: 0.98;
  }
  40% {
    background-color: var(--background-modifier-hover);
    transform: translateX(0) scale(1.002);
    opacity: 1;
  }
  100% {
    background-color: transparent;
    transform: none;
    opacity: 1;
  }
}

.smtcmp-settings-table-api-key {
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--font-ui-small);
}

.smtcmp-settings-table-api-key:hover {
  text-decoration: underline;
}

.smtcmp-error-modal {
  min-width: 60vw;
}

.smtcmp-error-modal-content {
  max-height: 50vh;
  display: flex;
  flex-direction: column;
  user-select: text;
}

.smtcmp-error-modal-message {
  white-space: pre-line;
}

.smtcmp-error-modal-log {
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 1rem;
  flex-grow: 1;
  overflow-y: auto;
  user-select: text;
  cursor: text;
  font-size: var(--font-ui-small);
}

.smtcmp-error-modal-buttons {
  margin-top: 1rem;
}

.smtcmp-assistant-message-metadata {
  display: flex;
  flex-direction: column;
  --smtcmp-assistant-metadata-dot-size: 6px;
  --smtcmp-assistant-metadata-dot-gap: 8px;
  --smtcmp-assistant-metadata-line-offset: calc(
    var(--smtcmp-assistant-metadata-dot-size) / 2
  );
  margin-top: 2px;
  margin-bottom: var(--size-4-1);
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms ease;
}

.smtcmp-assistant-message-metadata.is-active {
  box-shadow: none;
}

.smtcmp-assistant-message-metadata--requesting {
  transform: translateY(0);
}

.smtcmp-assistant-message-metadata--thinking,
.smtcmp-assistant-message-metadata--generating {
  transform: translateY(-1px);
}

.smtcmp-assistant-message-metadata--settled {
  opacity: 0.96;
}

.smtcmp-assistant-message-metadata--generating
  .smtcmp-assistant-message-metadata-label-text,
.smtcmp-assistant-message-metadata--settled
  .smtcmp-assistant-message-metadata-label-text {
  color: color-mix(in srgb, var(--text-faint) 78%, var(--text-muted));
}

.smtcmp-assistant-message-metadata-content {
  color: var(--text-muted);
  min-height: 0;
  overflow: hidden;
  margin-left: var(--smtcmp-assistant-metadata-line-offset);
  padding: 0 0 0
    calc(var(--size-4-2) + var(--smtcmp-assistant-metadata-dot-gap));
  font-size: var(--font-ui-small);
  opacity: 0;
  transform: translateY(-4px);
  border-left: 1px solid transparent;
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    padding 220ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 180ms ease;
}

.smtcmp-assistant-message-metadata-content .markdown-rendered {
  color: inherit;
}

.smtcmp-assistant-message-metadata.is-expanded
  .smtcmp-assistant-message-metadata-content {
  padding-bottom: var(--size-4-2);
  opacity: 1;
  transform: translateY(0);
  border-left-color: color-mix(
    in srgb,
    var(--background-modifier-border) 80%,
    transparent
  );
}

.smtcmp-assistant-message-metadata-annotations {
  display: flex;
  flex-direction: column;
  gap: var(--size-2-1);
}

.smtcmp-assistant-message-metadata-body {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.smtcmp-assistant-message-metadata-preview {
  max-height: 0;
  overflow: hidden;
  margin-left: var(--smtcmp-assistant-metadata-line-offset);
  padding-left: calc(
    var(--size-4-2) + var(--smtcmp-assistant-metadata-dot-gap)
  );
  color: color-mix(in srgb, var(--text-faint) 72%, var(--text-muted));
  font-size: var(--font-ui-smaller);
  line-height: 1.4;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    max-height 240ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    margin-bottom 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.smtcmp-assistant-message-metadata-preview span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.smtcmp-assistant-message-metadata.has-preview
  .smtcmp-assistant-message-metadata-preview {
  max-height: 24px;
  margin-bottom: 2px;
  opacity: 1;
  transform: translateY(0);
}

.smtcmp-assistant-message-metadata.is-expanded
  .smtcmp-assistant-message-metadata-preview {
  max-height: 0;
  margin-bottom: 0;
  opacity: 0;
}

.smtcmp-assistant-message-metadata.is-expanded
  .smtcmp-assistant-message-metadata-body {
  grid-template-rows: 1fr;
}

.smtcmp-assistant-message-metadata-toggle {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-4-1);
  width: 100%;
  min-height: 0;
  font-size: var(--font-ui-small);
  color: var(--text-muted);
  background: transparent !important;
  background-color: transparent !important;
  cursor: pointer;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  padding: 0;
  user-select: none;
  text-align: left;
  transition:
    background-color 140ms ease,
    color 180ms ease;

  &:hover {
    background-color: transparent;
  }
}

.smtcmp-assistant-message-metadata-toggle.is-static {
  cursor: default;
}

.smtcmp-assistant-message-metadata-toggle.is-static:hover {
  background-color: transparent;
}

.smtcmp-assistant-message-metadata-toggle:disabled {
  opacity: 1;
  background: transparent !important;
  box-shadow: none !important;
}

.smtcmp-assistant-message-metadata-toggle:focus,
.smtcmp-assistant-message-metadata-toggle:focus-visible {
  outline: none;
  box-shadow: none;
}

.smtcmp-assistant-message-metadata-label {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}

.smtcmp-assistant-message-metadata-label-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: color-mix(in srgb, var(--text-muted) 92%, var(--text-normal));
  transition:
    opacity 160ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.smtcmp-assistant-message-metadata-status-dot {
  width: var(--smtcmp-assistant-metadata-dot-size);
  height: var(--smtcmp-assistant-metadata-dot-size);
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--interactive-accent);
  opacity: 0.92;
}

.smtcmp-assistant-message-metadata.is-active
  .smtcmp-assistant-message-metadata-status-dot {
  animation: smtcmp-assistant-message-status-pulse 1.4s ease-in-out infinite;
}

.smtcmp-assistant-message-metadata-loader {
  margin-left: 2px;
}

.smtcmp-assistant-message-metadata-loader.smtcmp-dot-loader-minimal {
  gap: 3px;
}

.smtcmp-assistant-message-metadata-loader.smtcmp-dot-loader-minimal span {
  width: 3px;
  height: 3px;
}

.smtcmp-assistant-message-metadata-toggle-icon {
  width: var(--size-4-4);
  height: var(--size-4-4);
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--text-faint) 84%, var(--text-muted));
  transition:
    color 180ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 160ms ease;
}

.smtcmp-assistant-message-metadata--generating
  .smtcmp-assistant-message-metadata-toggle-icon,
.smtcmp-assistant-message-metadata--settled
  .smtcmp-assistant-message-metadata-toggle-icon {
  opacity: 0.68;
}

@keyframes smtcmp-assistant-message-status-pulse {
  0% {
    opacity: 0.28;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.28;
  }
}

/* Overrides default .markdown-rendered class styles from Obsidian */

.smtcmp-markdown-rendered {
  &.markdown-rendered {
    --render-scale: 1;
    font-size: calc(var(--render-scale) * 1rem);
    line-height: 1.5;

    &.smtcmp-scale-xs {
      --render-scale: 0.8;
    }

    &.smtcmp-scale-sm {
      --render-scale: 0.85;
    }

    &.smtcmp-scale-base {
      --render-scale: 1;
    }

    /* override default variables */
    --p-spacing: calc(var(--render-scale) * 1rem);
    --heading-spacing: calc(var(--p-spacing) * 1.75);
    --checkbox-size: calc(var(--render-scale) * 1rem);
    --checkbox-radius: calc(var(--render-scale) * var(--radius-s));
    --icon-size: calc(var(--render-scale) * var(--icon-m));

    /* adjust list indent */
    --list-indent: 1.5em;

    blockquote {
      padding-inline-start: calc(var(--render-scale) * 1.5rem);
    }

    pre {
      padding: calc(var(--render-scale) * 0.75rem)
        calc(var(--render-scale) * 1rem);
    }

    hr {
      margin: calc(var(--render-scale) * 2rem) 0;
    }

    th,
    td {
      font-size: calc(var(--render-scale) * 1rem);
      padding: calc(var(--render-scale) * 0.25rem)
        calc(var(--render-scale) * 0.5rem);
    }

    .callout {
      padding: calc(var(--render-scale) * 0.75rem)
        calc(var(--render-scale) * 0.75rem) calc(var(--render-scale) * 0.75rem)
        calc(var(--render-scale) * 1.5rem);
    }

    .callout-icon {
      height: calc(var(--render-scale) * 1rem);
      width: calc(var(--render-scale) * 1rem);
    }

    .math {
      user-select: text;
      cursor: text;

      &::selection,
      *::selection {
        background: var(--text-selection);
      }

      mjx-math.smtcmp-latex-selected,
      &.smtcmp-latex-selected {
        background: var(--text-selection);
        border-radius: 0;
      }
    }
  }

  /* Show frontmatter which is hidden by default */
  .frontmatter {
    display: block !important;
    background-color: transparent;
    border-top: 1px solid var(--background-modifier-border);
    border-bottom: 1px solid var(--background-modifier-border);
  }
}

.smtcmp-stream-fresh-text {
  display: inline;
  animation: smtcmp-stream-fresh-text-fade 120ms ease-out;
  will-change: opacity, filter;
}

@keyframes smtcmp-stream-fresh-text-fade {
  0% {
    opacity: 0.18;
    filter: blur(0.18em);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}

.smtcmp-mention-popover {
  width: 360px;
  max-width: 360px;
}

.smtcmp-mention-popover-folder-path {
  margin-left: auto;
  padding-left: var(--size-4-2);
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: rtl;
  white-space: nowrap;
  color: var(--text-muted);
}

.smtcmp-settings-description-preserve-whitespace {
  .setting-item-description {
    white-space: pre-wrap;
  }
}

.smtcmp-settings-desc-copyable {
  .setting-item-description {
    user-select: text;
    cursor: text;
  }
}

.smtcmp-obsidian-code-block {
  pre {
    margin: 0;
  }
}

.smtcmp-syntax-highlighter {
  margin: 0;
  padding: var(--size-4-2);
  font-size: var(--font-ui-small);
  font-family: inherit;
}

.smtcmp-syntax-highlighter--standalone {
  border-radius: var(--radius-s);
}

.smtcmp-syntax-highlighter--with-filename {
  border-bottom-left-radius: var(--radius-s);
  border-bottom-right-radius: var(--radius-s);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.smtcmp-syntax-highlighter--markdown {
  font-family: var(--font-interface);
}

.smtcmp-syntax-highlighter-line-wrap {
  white-space: pre-wrap !important;
}

/* ============== Shared utility & overrides (audit fixes) ============== */

/* Typeahead menu container positioned via CSS variables */

.smtcmp-typeahead-menu {
  position: absolute;
  top: var(--smtcmp-top, 0);
  left: var(--smtcmp-left, 0);
  width: var(--smtcmp-width, auto);
  height: var(--smtcmp-height, auto);
  z-index: 1000;
}

/* Code block header button container spacing variant */

.smtcmp-code-block-header-button-container--spaced {
  gap: 8px;
}

/* Status icons */

.smtcmp-icon-error {
  color: var(--text-error);
}

.smtcmp-icon-success {
  color: var(--text-success);
}

/* Muted small text/note */

.smtcmp-muted-note {
  margin: 4px 0 8px 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}

.smtcmp-text-faint-small {
  color: var(--text-faint);
  font-size: 12px;
}

/* Simple flex helpers */

.smtcmp-flex-row-gap-8 {
  display: flex;
  gap: 8px;
}

.smtcmp-actions-right-gap-8 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.smtcmp-clickable {
  cursor: pointer;
}

/* List reset & scroll panel */

.smtcmp-list-reset {
  list-style: none;
  padding: 0;
  margin: 0;
}

.smtcmp-scroll-panel {
  max-height: 300px;
  overflow: auto;
}

/* Folder picker */

.smtcmp-folder-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.smtcmp-folder-empty {
  padding: 8px;
  opacity: 0.7;
}

.smtcmp-folder-row {
  cursor: pointer;
  border-radius: 0;
  box-shadow: none;
  border: 0;
}

.smtcmp-folder-row.is-file {
  cursor: default;
}

.smtcmp-folder-row.is-file:hover {
  background-color: transparent;
}

.smtcmp-folder-row.is-disabled {
  cursor: not-allowed;
}

.smtcmp-folder-row:not(.is-disabled):hover {
  background-color: var(--background-modifier-hover);
}

.smtcmp-icon-placeholder {
  display: inline-block;
  width: 16px;
}

.smtcmp-provider-expand-btn.no-children {
  visibility: hidden;
}

.smtcmp-folder-name {
  outline: none;
  box-shadow: none;
  border: none;
  background: transparent;
  padding: 0;
  text-align: left;
  color: var(--text-normal);
  border-radius: 0;
  pointer-events: none;
}

.smtcmp-folder-row.is-disabled .smtcmp-folder-name {
  color: var(--text-faint);
}

.smtcmp-tree-root,
.smtcmp-tree-children {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.smtcmp-tree-children {
  margin-left: 0;
}

.smtcmp-tree-item {
  margin: 0;
}

.smtcmp-tree-guides {
  display: flex;
  align-self: stretch;
  pointer-events: none;
  flex: 0 0 auto;
  margin-right: 4px;
}

.smtcmp-tree-guide {
  position: relative;
  width: 16px;
  flex: 0 0 16px;
}

.smtcmp-tree-guide::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-0.5px);
  border-left: 1px solid var(--background-modifier-border);
}

.smtcmp-tree-guide.is-empty::before {
  display: none;
}

.smtcmp-tree-guide-branch::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  transform: translate(-0.5px, -0.5px);
  border-top: 1px solid var(--background-modifier-border);
}

.smtcmp-tree-guide-branch::before {
  bottom: -12px;
}

.smtcmp-tree-guide-branch.is-last::before {
  bottom: 50%;
}

.smtcmp-tree-icon {
  display: flex;
  align-items: center;
  color: var(--text-muted);
}

.smtcmp-folder-row:not(.is-disabled):hover .smtcmp-tree-icon {
  color: var(--text-normal);
}

.smtcmp-folder-row.is-disabled .smtcmp-tree-icon {
  color: var(--text-faint);
}

/* Indent helpers using CSS variables for depth */

.smtcmp-depth {
  --smtcmp-depth: 0;
}

.smtcmp-depth-0 {
  --smtcmp-depth: 0;
}

.smtcmp-depth-1 {
  --smtcmp-depth: 1;
}

.smtcmp-depth-2 {
  --smtcmp-depth: 2;
}

.smtcmp-depth-3 {
  --smtcmp-depth: 3;
}

.smtcmp-depth-4 {
  --smtcmp-depth: 4;
}

.smtcmp-depth-5 {
  --smtcmp-depth: 5;
}

.smtcmp-depth-6 {
  --smtcmp-depth: 6;
}

.smtcmp-depth-7 {
  --smtcmp-depth: 7;
}

.smtcmp-depth-8 {
  --smtcmp-depth: 8;
}

.smtcmp-depth-9 {
  --smtcmp-depth: 9;
}

.smtcmp-depth-10 {
  --smtcmp-depth: 10;
}

/* Folder picker row indent (base 8px + depth*12px) */

.smtcmp-indent-folder {
  padding-left: calc(8px + var(--smtcmp-depth) * 12px);
}

/* RAG index list indent (base 16px + depth*12px) */

.smtcmp-indent-list {
  margin-left: calc(16px + var(--smtcmp-depth) * 12px);
}

.smtcmp-toolcall-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: transparent;
  border: none;
  border-radius: 0;

  .smtcmp-toolcall-border-top {
    border-top: none;
  }
}

.smtcmp-toolcall {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--size-2-2);
  padding: 2px 0;
  font-size: var(--font-ui-smaller);
}

.smtcmp-toolcall-header {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none;
  padding: 2px var(--size-2-3);
  display: flex;
  align-items: center;
  gap: var(--size-2-3);
  border-radius: var(--radius-xs);
  cursor: pointer;
  user-select: none;
  min-height: 24px;
  color: var(--text-muted);
  transition: color 120ms ease;

  &:focus-visible {
    outline: 2px solid
      color-mix(in srgb, var(--interactive-accent) 55%, transparent);
    outline-offset: 1px;
    box-shadow: none !important;
    background: transparent !important;
  }

  &:hover {
    background-color: transparent;
    color: var(--text-normal);
  }

  .smtcmp-toolcall-header-content {
    min-width: 0;
    flex: 1 1 auto;
  }

  .smtcmp-toolcall-header-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--text-faint);
  }

  .smtcmp-toolcall-header-icon--status-inline {
    color: var(--text-muted);
  }

  .smtcmp-toolcall-header-icon--expand {
    margin-left: auto;
    color: var(--text-faint);
    opacity: 0.9;
  }

  .smtcmp-toolcall-header-tool-name {
    display: flex;
    align-items: baseline;
    gap: 2px;
    min-width: 0;
    font-family: var(--font-ui);
    font-weight: var(--font-normal);
    font-size: var(--font-ui-smaller);
    line-height: 1.35;
  }

  .smtcmp-toolcall-header-title,
  .smtcmp-toolcall-header-separator {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .smtcmp-toolcall-header-summary {
    min-width: 0;
    flex: 0 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .smtcmp-toolcall-header-edit-deltas {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    margin-left: 6px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  .smtcmp-toolcall-header-edit-added {
    color: var(--text-success);
  }

  .smtcmp-toolcall-header-edit-removed {
    color: var(--text-error);
  }
}

.smtcmp-toolcall-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  font-size: var(--font-smallest);
  gap: var(--size-4-1);
  max-height: 600px;
  overflow: auto;
  padding: 0 var(--size-2-3) var(--size-2-2) 24px;
  margin-top: 2px;
  border-left: 1px solid
    color-mix(in srgb, var(--background-modifier-border) 85%, transparent);

  .smtcmp-toolcall-content-section {
    display: flex;
    flex-direction: column;
    gap: var(--size-2-3);
  }
}

.smtcmp-toolcall-compaction-pending {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 var(--size-2-3) 0 24px;
  color: var(--text-faint);
  font-size: var(--font-ui-smaller);
  line-height: 1.4;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.smtcmp-toolcall-compaction-pending--exiting {
  opacity: 0;
  transform: translateY(-4px);
}

.smtcmp-toolcall-compaction-pending-icon {
  animation: smtcmp-toolcall-spin 1s linear infinite;
}

@keyframes smtcmp-toolcall-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.smtcmp-toolcall-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-faint);
}

.smtcmp-toolcall-status-success-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.25px solid var(--interactive-accent);
  color: var(--interactive-accent);
  box-sizing: border-box;
}

.smtcmp-toolcall-status-success-check {
  stroke-width: 2.3;
}

.smtcmp-toolcall-footer {
  display: flex;
  justify-content: end;
  align-items: center;
  padding: var(--size-4-1);

  .smtcmp-toolcall-footer-actions {
    display: flex;
    align-items: center;
    gap: var(--size-4-1);

    button {
      background-color: var(--background-primary-alt);
      border: 1px solid var(--background-modifier-border);
      box-shadow: none;

      &:hover {
        background-color: var(--background-modifier-hover);
        border: 1px solid var(--background-modifier-border-hover);
        box-shadow: none;
      }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .smtcmp-toolcall-compaction-pending {
    transition: none;
  }
}

.smtcmp-split-button {
  display: flex;
  align-items: center;

  .smtcmp-split-button-primary {
    border-radius: var(--button-radius) 0 0 var(--button-radius) !important;
  }

  .smtcmp-split-button-toggle {
    padding: var(--size-4-1);
    border-radius: 0 var(--button-radius) var(--button-radius) 0 !important;
    border-left: none !important;
  }
}

/* Providers and Models Section Styles */

.smtcmp-models-block,
.smtcmp-providers-models-block,
.smtcmp-settings-block {
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--background-secondary) 86%, white 12%);
  padding: var(--size-4-3);
}

.smtcmp-models-block-head,
.smtcmp-settings-block-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--size-4-3);
  margin-bottom: var(--size-4-3);
}

.smtcmp-models-block-head-title-row,
.smtcmp-settings-block-head-title-row {
  min-width: 0;
}

.smtcmp-models-block-title,
.smtcmp-settings-block-title {
  margin: 0;
}

.smtcmp-models-block-desc,
.smtcmp-settings-block-desc {
  margin: var(--size-4-1) 0 0;
}

.smtcmp-models-block-action,
.smtcmp-settings-block-action {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.smtcmp-models-block-content,
.smtcmp-settings-block-content {
  min-width: 0;
}

.smtcmp-models-select-card.setting-item,
.smtcmp-settings-card.setting-item {
  border-radius: var(--radius-m);
  padding: var(--size-4-3) !important;
  margin-bottom: var(--size-4-3);
}

.smtcmp-models-select-card.setting-item {
  border: 1px solid var(--background-modifier-border) !important;
  background: var(--background-primary) !important;
}

.smtcmp-settings-card.setting-item {
  border: 1px solid
    color-mix(in srgb, var(--background-modifier-border) 45%, transparent) !important;
  background: color-mix(
    in srgb,
    var(--background-primary) 72%,
    var(--background-secondary) 28%
  ) !important;
}

.smtcmp-models-select-card.setting-item:last-of-type,
.smtcmp-settings-card.setting-item:last-of-type {
  margin-bottom: var(--size-4-3);
}

.smtcmp-models-select-card.setting-item .setting-item-control,
.smtcmp-models-select-card.setting-item .smtcmp-item-control,
.smtcmp-settings-card.setting-item .setting-item-control,
.smtcmp-settings-card.setting-item .smtcmp-item-control {
  align-self: center;
}

.smtcmp-models-textarea-card {
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  background: var(--background-primary);
  padding: var(--size-4-3);
  margin-bottom: var(--size-4-3);
}

.smtcmp-models-textarea-card:last-child {
  margin-bottom: 0;
}

.smtcmp-models-textarea-card .setting-item {
  border-top: none !important;
  background: transparent;
}

.smtcmp-models-textarea-card-header.setting-item {
  padding: 0 0 var(--size-4-2) 0 !important;
}

.smtcmp-models-textarea-card-body.setting-item {
  padding: 0 !important;
  margin-bottom: 0;
}

.smtcmp-models-textarea-card-body .setting-item-control,
.smtcmp-models-textarea-card-body .smtcmp-item-control,
.smtcmp-models-textarea-card-body .smtcmp-textarea-container {
  width: 100%;
}

.smtcmp-models-textarea-card-body textarea {
  width: 100%;
  min-height: 120px;
}

.smtcmp-providers-models-block-head {
  margin-bottom: var(--size-4-3);
}

.smtcmp-providers-models-container {
  display: flex;
  flex-direction: column;
  gap: var(--size-4-2);
}

.smtcmp-provider-section {
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  background: var(--background-primary);
  overflow: hidden;
  cursor: grab;
  transition:
    border-color 160ms ease,
    box-shadow 180ms ease,
    background-color 160ms ease;
}

.smtcmp-provider-section:active {
  cursor: grabbing;
}

/* Provider drag visual feedback */

.smtcmp-provider-dragging {
  background-color: var(--background-primary);
  transform: translateX(2px) scale(0.995);
  opacity: 0.98;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.smtcmp-provider-section:hover,
.smtcmp-provider-section:focus-within {
  border-color: var(--background-modifier-border);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.smtcmp-provider-drag-over-before {
  border-top: 2px solid var(--interactive-accent);
  transition: border-top 120ms ease;
}

.smtcmp-provider-drag-over-after {
  border-bottom: 2px solid var(--interactive-accent);
  transition: border-bottom 120ms ease;
}

.smtcmp-provider-drag-handle {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  cursor: grab;
  user-select: none;
  padding: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  transition:
    transform 120ms ease,
    color 120ms ease;
}

.smtcmp-provider-drag-handle:hover {
  color: var(--text-normal);
}

.smtcmp-provider-drag-handle:active {
  cursor: grabbing;
}

.smtcmp-provider-main-trigger {
  all: unset;
  flex: 0 0 auto;
  min-width: auto;
  display: flex;
  align-items: center;
  gap: var(--size-4-2);
  padding: 0;
  margin: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.smtcmp-provider-main-trigger:hover,
.smtcmp-provider-main-trigger:focus,
.smtcmp-provider-main-trigger:focus-visible,
.smtcmp-provider-main-trigger:active {
  background: transparent;
  border: none;
  box-shadow: none;
}

.smtcmp-provider-header > .smtcmp-provider-drag-handle,
.smtcmp-provider-header > .smtcmp-provider-main-trigger {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.smtcmp-provider-drag-handle svg {
  width: var(--icon-m);
  height: var(--icon-m);
  stroke-width: var(--icon-stroke);
}

/* Provider drop success animation - reuse existing drop-flash animation */

.smtcmp-provider-drop-success {
  animation: smtcmp-drop-flash 650ms ease-out;
}

.smtcmp-provider-header {
  display: flex;
  align-items: center;
  padding: var(--size-4-2) var(--size-4-3);
  background: var(--background-primary);
  gap: var(--size-4-2);
}

.smtcmp-provider-header > .smtcmp-provider-drag-handle,
.smtcmp-provider-header > .smtcmp-provider-main-trigger,
.smtcmp-provider-header > .smtcmp-provider-base-url-btn,
.smtcmp-provider-header > .smtcmp-provider-secondary-trigger {
  margin-block: calc(var(--size-4-2) * -1);
  padding-block: var(--size-4-2);
}

.smtcmp-provider-expand-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: var(--text-muted);
  transition: color 0.2s;
}

.smtcmp-provider-expand-btn:hover {
  color: var(--text-normal);
}

.smtcmp-provider-info {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.smtcmp-provider-id {
  font-weight: 600;
  min-width: 120px;
  color: var(--text-normal);
}

.smtcmp-provider-type {
  color: var(--text-muted);
  min-width: 100px;
  max-width: 260px;
  font-size: var(--font-ui-smaller);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smtcmp-provider-base-url-btn {
  all: unset;
  display: inline-flex;
  flex: 0 0 auto;
  min-width: auto;
  max-width: none;
  font-size: 12px;
  line-height: 1.2;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.smtcmp-provider-base-url-text {
  display: block;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smtcmp-provider-base-url-btn:hover,
.smtcmp-provider-base-url-btn:focus-visible {
  color: var(--text-normal);
  text-decoration-line: underline;
  text-underline-offset: 2px;
}

.smtcmp-provider-base-url-btn.is-disabled {
  cursor: default;
}

.smtcmp-provider-base-url-btn.is-disabled:hover,
.smtcmp-provider-base-url-btn.is-disabled:focus-visible {
  color: var(--text-muted);
  text-decoration: none;
}

.smtcmp-provider-header > .smtcmp-provider-base-url-btn {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.smtcmp-provider-model-counts {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--background-secondary) 82%, white 18%);
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
  white-space: nowrap;
}

.smtcmp-provider-secondary-trigger {
  all: unset;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
}

.smtcmp-provider-header > .smtcmp-provider-secondary-trigger {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.smtcmp-provider-api-key {
  color: var(--text-accent);
  cursor: pointer;
}

.smtcmp-provider-api-key:hover {
  text-decoration: underline;
}

.smtcmp-provider-actions {
  display: flex;
  gap: var(--size-4-1);
  flex-shrink: 0;
}

.smtcmp-provider-delete-confirm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-4-1);
  padding: 10px var(--size-4-3);
  border-top: 1px solid color-mix(in srgb, var(--text-error) 18%, transparent);
  background: color-mix(
    in srgb,
    var(--text-error) 8%,
    var(--background-primary)
  );
}

.smtcmp-provider-delete-confirm-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  margin-right: var(--size-4-2);
}

.smtcmp-provider-delete-confirm-title {
  color: var(--text-error);
  font-size: var(--font-ui-smaller);
  font-weight: var(--font-semibold);
  line-height: 1.2;
}

.smtcmp-provider-delete-confirm-meta {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.3;
  white-space: normal;
}

.smtcmp-provider-delete-confirm-actions {
  display: flex;
  align-items: center;
  gap: var(--size-4-1);
  flex-shrink: 0;
}

.smtcmp-provider-delete-cancel,
.smtcmp-provider-delete-confirm-btn {
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-s);
  padding: 4px 10px;
  font-size: var(--font-ui-smaller);
  line-height: 1.2;
  white-space: nowrap;
}

.smtcmp-provider-delete-cancel {
  background: var(--background-primary);
  color: var(--text-muted);
}

.smtcmp-provider-delete-cancel:hover,
.smtcmp-provider-delete-cancel:focus-visible {
  color: var(--text-normal);
  border-color: color-mix(
    in srgb,
    var(--background-modifier-border-hover) 72%,
    transparent
  );
}

.smtcmp-provider-delete-confirm-btn {
  border-color: color-mix(in srgb, var(--text-error) 32%, transparent);
  background: color-mix(
    in srgb,
    var(--text-error) 14%,
    var(--background-primary)
  );
  color: var(--text-error);
}

.smtcmp-provider-delete-confirm-btn:hover,
.smtcmp-provider-delete-confirm-btn:focus-visible {
  border-color: color-mix(in srgb, var(--text-error) 46%, transparent);
  background: color-mix(
    in srgb,
    var(--text-error) 18%,
    var(--background-primary)
  );
}

.smtcmp-provider-actions .clickable-icon {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-s);
}

.smtcmp-provider-actions .clickable-icon:hover,
.smtcmp-provider-actions .clickable-icon:focus-visible {
  background: color-mix(in srgb, var(--background-secondary) 88%, transparent);
}

.smtcmp-provider-actions .clickable-icon svg {
  width: 18px;
  height: 18px;
}

.smtcmp-provider-models {
  padding: var(--size-4-3);
  background: var(--background-primary);
  border-top: 1px solid var(--background-modifier-border);
}

.smtcmp-models-subsection {
  margin-bottom: var(--size-4-3);
}

.smtcmp-models-subsection:last-child {
  margin-bottom: 0;
}

.smtcmp-models-subsection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--size-4-2);
  font-weight: 500;
}

.smtcmp-add-model-btn {
  font-size: var(--font-ui-smaller);
  padding: var(--size-2-1) var(--size-4-2);
  background-color: var(--interactive-accent);
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--button-radius);
  cursor: pointer;
}

.smtcmp-add-model-btn:hover {
  background-color: var(--interactive-accent-hover);
}

.smtcmp-chatgpt-oauth-disconnect-btn {
  background-color: var(--background-secondary);
  color: var(--text-normal);
  border: 1px solid var(--background-modifier-border);
}

.smtcmp-chatgpt-oauth-disconnect-btn:hover {
  background-color: var(--background-modifier-hover);
}

.smtcmp-chatgpt-oauth-note {
  margin-top: calc(var(--size-4-1) * -1);
  padding: 0 var(--size-4-3);
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
  line-height: 1.5;
  text-align: center;
}

.smtcmp-models-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-ui-smaller);
}

.smtcmp-models-table .smtcmp-drag-handle {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: grab;
}

.smtcmp-models-table .smtcmp-drag-handle:hover,
.smtcmp-models-table .smtcmp-drag-handle:focus,
.smtcmp-models-table .smtcmp-drag-handle:focus-visible,
.smtcmp-models-table .smtcmp-drag-handle:active {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--text-normal);
}

.smtcmp-models-table .smtcmp-drag-handle:active {
  cursor: grabbing;
}

.smtcmp-models-table th {
  text-align: left;
  padding: var(--size-2-2) var(--size-4-2);
  border-bottom: 1px solid var(--background-modifier-border);
  font-weight: 500;
  color: var(--text-muted);
}

.smtcmp-models-table td {
  padding: var(--size-2-2) var(--size-4-2);
  border-bottom: 1px solid var(--background-modifier-border);
}

.smtcmp-models-table tr:last-child td {
  border-bottom: none;
}

.smtcmp-no-models {
  padding: var(--size-4-3);
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
}

/* Embedding models table column sizing */

/* Note: Embedding table uses <colgroup> with last two 60px columns to align with chat models */

@media (max-width: 720px) {
  .smtcmp-models-block,
  .smtcmp-providers-models-block {
    padding: var(--size-4-2);
  }

  .smtcmp-models-block-head {
    flex-direction: column;
    align-items: stretch;
    gap: var(--size-4-2);
  }

  .smtcmp-providers-models-block-head {
    margin-bottom: var(--size-4-2);
  }

  .smtcmp-models-block-action {
    justify-content: flex-end;
  }

  .smtcmp-provider-header {
    padding-inline: var(--size-4-2);
  }

  .smtcmp-provider-delete-confirm {
    flex-wrap: wrap;
    padding-inline: var(--size-4-2);
  }

  .smtcmp-provider-delete-confirm-copy {
    width: 100%;
    margin-right: 0;
  }

  .smtcmp-provider-delete-confirm-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

.smtcmp-chat-model-modal-form .setting-item:not(.smtcmp-settings-kv-entry) {
  align-items: flex-start;
  padding-top: var(--size-4-2) !important;
  padding-bottom: var(--size-4-2) !important;
}

.smtcmp-chat-model-modal-form
  .setting-item:not(.smtcmp-settings-kv-entry)
  .setting-item-description {
  margin-top: 6px;
}

.smtcmp-modality-field {
  display: flex;
  flex-direction: column;
  gap: var(--size-4-2);
  padding: var(--size-4-2) 0;
  border-top: 1px solid var(--background-modifier-border);
}

.smtcmp-modality-field-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.smtcmp-modality-field-label {
  font-size: var(--font-ui-small);
  font-weight: var(--font-semibold);
  color: var(--text-normal);
}

.smtcmp-modality-field-desc {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  line-height: 1.4;
}

.smtcmp-modality-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.smtcmp-modality-chip,
.smtcmp-modality-chip:hover,
.smtcmp-modality-chip:focus,
.smtcmp-modality-chip:focus-visible,
.smtcmp-modality-chip:active {
  box-shadow: none !important;
  outline: none !important;
}

.smtcmp-modality-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--background-modifier-border);
  background: var(--background-primary);
  color: var(--text-muted);
  font-size: var(--font-ui-small);
  cursor: pointer;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease;
}

.smtcmp-modality-chip:hover {
  border-color: var(--background-modifier-border-hover);
  color: var(--text-normal);
}

.smtcmp-modality-chip.is-active {
  border-color: var(--interactive-accent);
  background: color-mix(in srgb, var(--interactive-accent) 14%, transparent);
  color: var(--interactive-accent);
}

.smtcmp-modality-chip-label {
  font-weight: var(--font-medium);
}

.smtcmp-modality-chip-sub {
  font-family: var(--font-monospace);
  font-size: var(--font-ui-smaller);
  color: var(--text-faint);
}

.smtcmp-modality-chip.is-active .smtcmp-modality-chip-sub {
  color: color-mix(in srgb, var(--interactive-accent) 70%, transparent);
}

.smtcmp-provider-form .setting-item:not(.smtcmp-settings-kv-entry) {
  align-items: center;
  padding-top: var(--size-4-2) !important;
  padding-bottom: var(--size-4-2) !important;
}

.smtcmp-provider-form
  .setting-item:not(.smtcmp-settings-kv-entry)
  .setting-item-description {
  margin-top: 6px;
}

/* MCP Section Styles */

.smtcmp-mcp-servers-container {
  display: flex;
  flex-direction: column;
}

.smtcmp-mcp-servers-header {
  display: grid;
  grid-template-columns: 1fr 128px 64px 112px; /* Match columns with .smtcmp-mcp-server-row to ensure proper alignment */
  gap: var(--size-4-4);
  align-items: center;
  min-height: var(--size-4-10);
  border-bottom: var(--border-width) solid var(--background-modifier-border);
  font-weight: var(--font-medium);
  color: var(--text-muted);

  & > div {
    padding: var(--size-4-1);
  }
  & > div:nth-child(1) {
    text-align: left;
  }
  & > div:nth-child(2) {
    text-align: left;
  }
  & > div:nth-child(3) {
    text-align: center;
  }
  & > div:nth-child(4) {
    text-align: center;
  }
}

.smtcmp-mcp-servers-empty {
  padding: var(--size-4-4) 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-muted);
}

.smtcmp-mcp-server {
  border-bottom: var(--border-width) solid var(--background-modifier-border);
}

.smtcmp-mcp-server-row {
  display: grid;
  grid-template-columns: 1fr 128px 64px 112px; /* Match columns with .smtcmp-mcp-servers-header to ensure proper alignment */
  gap: var(--size-4-4);
  align-items: center;
  min-height: var(--size-4-10);

  & > div {
    padding: var(--size-4-1);
  }
}

.smtcmp-mcp-server-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.smtcmp-mcp-server-status {
  display: flex;
  justify-content: flex-start;
}

.smtcmp-mcp-server-toggle {
  display: flex;
  justify-content: center;
}

.smtcmp-mcp-server-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-4-1);

  svg {
    height: var(--icon-l);
    width: var(--icon-l);
    stroke-width: var(--icon-stroke);
  }
}

.smtcmp-server-expanded-info {
  margin-bottom: var(--size-4-4);
  padding-left: var(--size-4-4);
  border-left: var(--border-width) solid var(--background-modifier-border);
}

.smtcmp-server-expanded-info-header {
  font-weight: var(--font-medium);
  margin-bottom: var(--size-4-3);
}

.smtcmp-server-tools-container {
  display: flex;
  flex-direction: column;
  gap: var(--size-4-4);
}

.smtcmp-server-error-message {
  color: var(--text-error);
  font-weight: var(--font-medium);
  font-family: var(--font-monospace);
  font-size: var(--font-ui-small);
  user-select: text;
}

.smtcmp-mcp-server-status-badge {
  border-radius: 9999px;
  padding: var(--size-2-1) var(--size-4-2);
  display: flex;
  align-items: center;
  gap: var(--size-4-1);
  line-height: 1;
}

.smtcmp-mcp-server-status-badge-label {
  font-size: var(--font-ui-smaller);
}

.smtcmp-mcp-server-status-badge--connected {
  background-color: color-mix(in srgb, var(--text-success) 10%, transparent);
  color: var(--text-success);
}

.smtcmp-mcp-server-status-badge--connecting {
  background-color: color-mix(in srgb, var(--text-muted) 10%, transparent);
  color: var(--text-muted);
}

.smtcmp-mcp-server-status-badge--error {
  background-color: color-mix(in srgb, var(--text-error) 10%, transparent);
  color: var(--text-error);
}

.smtcmp-mcp-server-status-badge--disconnected {
  background-color: color-mix(in srgb, var(--text-muted) 10%, transparent);
  color: var(--text-muted);
}

.smtcmp-mcp-tool {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--size-4-4);
  align-items: center;
}

.smtcmp-mcp-tool-info {
  display: flex;
  flex-direction: column;
}

.smtcmp-mcp-tool-name {
  font-family: var(--font-monospace);
  font-size: var(--font-ui-smaller);
}

.smtcmp-mcp-tool-description {
  position: relative;
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
}

.smtcmp-mcp-tool-description-header {
  display: flex;
  align-items: center;
  gap: var(--size-2-1);
}

.smtcmp-mcp-tool-description-text.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.smtcmp-mcp-tool-description-text.is-expanded {
  white-space: pre-wrap;
}

.smtcmp-mcp-tool-description > button.smtcmp-mcp-tool-description-toggle {
  position: absolute;
  top: 0;
  right: 0;
}

.smtcmp-mcp-tool-description
  > button.smtcmp-mcp-tool-description-toggle
  ~ .smtcmp-mcp-tool-description-text {
  padding-right: var(--size-4-6);
}

button.smtcmp-mcp-tool-description-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  color: var(--text-muted);
  background: transparent;
  border: none;
  box-shadow: none;
  cursor: pointer;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

button.smtcmp-mcp-tool-description-toggle:hover {
  color: var(--text-normal);
  background: var(--background-modifier-hover);
}

button.smtcmp-mcp-tool-description-toggle.is-expanded {
  transform: rotate(180deg);
}

.smtcmp-mcp-tool-toggle {
  display: flex;
  align-items: center;
  gap: var(--size-4-2);
}

.smtcmp-mcp-tool-toggle-label {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
}

/* MCP Server Modal Styles */

.smtcmp-mcp-parameters-header {
  display: block;
}

.smtcmp-mcp-parameters-title-row {
  display: inline-flex;
  align-items: center;
  gap: var(--size-2-1);
}

.smtcmp-mcp-parameters-header .setting-item-description {
  margin-top: var(--size-2-1);
}

.smtcmp-mcp-parameters-info-icon {
  all: unset;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: none !important;
  box-shadow: none !important;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 0;
  color: var(--text-muted);
  background: transparent !important;

  &:hover {
    color: var(--text-normal);
    background: transparent !important;
  }

  &:focus-visible {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 1px;
  }
}

.smtcmp-mcp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.smtcmp-tooltip-content--wide {
  width: min(360px, calc(100vw - 24px));
  max-width: min(360px, calc(100vw - 24px));
  padding: var(--size-4-2) var(--size-4-3);
  border: 1px solid var(--background-modifier-border) !important;
  border-radius: var(--radius-s);
  background: var(--background-primary);
  z-index: 10000 !important;
}

.smtcmp-mcp-parameters-tooltip {
  display: flex;
  flex-direction: column;
  gap: var(--size-2-2);
}

.smtcmp-mcp-parameters-tooltip-title {
  font-size: var(--font-ui-small);
  font-weight: var(--font-medium);
  color: var(--text-normal);
  margin-bottom: var(--size-2-1);
}

.smtcmp-mcp-parameters-tooltip-line {
  font-size: var(--font-ui-smaller);
  line-height: 1.5;
  color: var(--text-normal);
  word-wrap: break-word;
}

.smtcmp-mcp-parameters-tooltip-keyword {
  color: var(--text-muted);
  margin-right: var(--size-2-1);
  font-weight: var(--font-medium);
}

.smtcmp-mcp-parameters-tooltip-tip {
  font-size: var(--font-ui-smaller);
  line-height: 1.5;
  color: var(--text-muted);
  margin-top: var(--size-2-2);
  padding-top: var(--size-2-2);
  border-top: 1px dashed var(--background-modifier-border);
}

.smtcmp-mcp-server-modal-textarea {
  width: 100%;
  font-family: var(--font-monospace);
  resize: none;
  word-break: break-all;
}

.smtcmp-mcp-server-modal-validation {
  font-family: var(--font-monospace);
  font-size: var(--font-ui-small);
  padding: var(--size-4-1) 0;
  white-space: pre-wrap;

  &.smtcmp-mcp-server-modal-validation--error {
    color: var(--text-error);
  }

  &.smtcmp-mcp-server-modal-validation--success {
    color: var(--text-success);
  }
}

.smtcmp-rag-layout {
  display: flex;
  flex-direction: column;
  gap: var(--size-4-4);
}

.smtcmp-rag-card {
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--background-secondary) 86%, white 12%);
  padding: var(--size-4-3);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.smtcmp-rag-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--size-4-3);
  margin-bottom: var(--size-4-3);
}

.smtcmp-rag-card-header-copy {
  min-width: 0;
}

.smtcmp-rag-card-title {
  color: var(--text-normal);
  font-size: var(--h3-size);
  line-height: var(--line-height-tight);
  font-weight: var(--h3-weight);
}

.smtcmp-rag-card-description {
  margin-top: var(--size-2-1);
  color: var(--text-muted);
  font-size: var(--font-ui-small);
  line-height: var(--line-height-normal);
}

.smtcmp-rag-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--size-4-2);
}

.smtcmp-rag-card-body > .setting-item:first-child {
  border-top: none;
  padding-top: 0;
}

.smtcmp-rag-card-body > .setting-item:last-child {
  padding-bottom: 0;
}

.smtcmp-rag-scope-group {
  border: 1px solid
    color-mix(in srgb, var(--background-modifier-border) 45%, transparent);
  border-radius: var(--radius-m);
  background: color-mix(
    in srgb,
    var(--background-primary) 72%,
    var(--background-secondary) 28%
  );
  margin-bottom: var(--size-4-3);
  overflow: hidden;
}

.smtcmp-rag-scope-group:last-of-type {
  margin-bottom: var(--size-4-3);
}

.smtcmp-rag-scope-group-setting.setting-item {
  border: none !important;
  background: transparent !important;
  margin-bottom: 0;
  padding: var(--size-4-3) !important;
}

.smtcmp-rag-scope-group-body {
  padding: 0 var(--size-4-3) var(--size-4-3);
}

.smtcmp-rag-resource-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-4-2);
  margin-bottom: var(--size-4-3);
}

.smtcmp-rag-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--background-modifier-border);
  background: color-mix(in srgb, var(--background-secondary) 90%, transparent);
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
  font-weight: var(--font-medium);
}

.smtcmp-rag-status-pill.is-ready {
  color: var(--text-success);
  border-color: color-mix(in srgb, var(--text-success) 25%, transparent);
  background: color-mix(in srgb, var(--text-success) 8%, transparent);
}

.smtcmp-rag-status-pill.is-warning {
  color: var(--text-warning);
  border-color: color-mix(in srgb, var(--text-warning) 25%, transparent);
  background: color-mix(in srgb, var(--text-warning) 10%, transparent);
}

.smtcmp-rag-status-pill.is-danger {
  color: var(--text-error);
  border-color: color-mix(in srgb, var(--text-error) 25%, transparent);
  background: color-mix(in srgb, var(--text-error) 10%, transparent);
}

.smtcmp-rag-inline-status {
  display: flex;
  flex-direction: column;
  gap: var(--size-2-2);
  margin-bottom: var(--size-4-3);
  padding: var(--size-4-2) var(--size-4-3);
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--background-secondary) 55%, transparent);
}

.smtcmp-rag-inline-status--error {
  border-color: color-mix(in srgb, var(--text-error) 25%, transparent);
  background: color-mix(in srgb, var(--text-error) 8%, transparent);
}

.smtcmp-rag-inline-status-title {
  color: var(--text-error);
  font-size: var(--font-ui-small);
  font-weight: var(--font-medium);
}

.smtcmp-rag-inline-status-text {
  color: var(--text-normal);
  font-size: var(--font-ui-small);
  line-height: var(--line-height-normal);
  word-break: break-word;
}

.smtcmp-rag-inline-progress {
  overflow: hidden;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--background-modifier-border) 65%,
    transparent
  );
}

.smtcmp-rag-inline-progress-bar {
  height: 100%;
  border-radius: inherit;
  background: var(--interactive-accent);
  transition: width 160ms ease;
}

/* RAG maintenance row: title + inline status + actions */

.smtcmp-rag-maintenance-setting .setting-item-info {
  flex: 1 1 auto;
  min-width: 0;
}

.smtcmp-rag-maintenance-setting .setting-item-name.smtcmp-setting-name-row {
  display: flex;
  align-items: center;
  gap: var(--size-4-3);
  width: 100%;
  min-width: 0;
}

.smtcmp-rag-maintenance-setting
  .setting-item-name.smtcmp-setting-name-row
  .smtcmp-setting-name-extra {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
}

.smtcmp-rag-maintenance-setting .setting-item-control {
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.smtcmp-index-inline-status {
  display: flex;
  align-items: center;
  gap: var(--size-2-3);
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

.smtcmp-rag-maintenance-actions {
  flex: 0 0 auto;
}

.smtcmp-index-ring {
  flex-shrink: 0;
}

.smtcmp-index-ring svg {
  display: block;
}

.smtcmp-index-ring-track {
  stroke: var(--background-modifier-border);
}

.smtcmp-index-ring-fill {
  stroke: var(--interactive-accent);
}

.smtcmp-index-current-file {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--size-2-2);
  font-size: var(--font-ui-smaller);
  color: var(--text-faint);
  font-family: var(--font-monospace);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.smtcmp-index-current-file-prefix {
  flex: 0 0 4ch;
  width: 4ch;
  text-align: right;
  color: var(--text-muted);
}

.smtcmp-index-current-file-viewport {
  position: relative;
  flex: 0 0 clamp(18ch, 24vw, 30ch);
  width: clamp(18ch, 24vw, 30ch);
  min-width: clamp(18ch, 24vw, 30ch);
  max-width: clamp(18ch, 24vw, 30ch);
  height: 1.35em;
  overflow: hidden;
}

.smtcmp-index-current-file-text {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smtcmp-index-current-file-text.is-entering,
.smtcmp-index-current-file-text.is-leaving {
  position: absolute;
  inset: 0;
}

.smtcmp-index-current-file-text.is-entering {
  animation: smtcmp-index-file-enter 120ms cubic-bezier(0.22, 1, 0.36, 1);
}

.smtcmp-index-current-file-text.is-leaving {
  animation: smtcmp-index-file-leave 120ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes smtcmp-index-file-enter {
  from {
    opacity: 0.35;
    transform: translateY(5px);
    filter: blur(1px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes smtcmp-index-file-leave {
  from {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }

  to {
    opacity: 0;
    transform: translateY(-5px);
    filter: blur(1px);
  }
}

@media (max-width: 900px) {
  .smtcmp-rag-card-header {
    flex-direction: column;
  }

  .smtcmp-rag-card-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .smtcmp-rag-maintenance-setting .setting-item {
    align-items: flex-start;
  }

  .smtcmp-rag-maintenance-setting .setting-item-name.smtcmp-setting-name-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .smtcmp-rag-maintenance-setting
    .setting-item-name.smtcmp-setting-name-row
    .smtcmp-setting-name-extra {
    width: 100%;
    justify-content: flex-start;
  }

  .smtcmp-index-current-file-viewport {
    flex: 1 1 auto;
    width: min(100%, 30ch);
    min-width: 0;
    max-width: min(100%, 30ch);
  }

  .smtcmp-rag-maintenance-setting .setting-item-control {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Template Section Styles */

.smtcmp-templates-container {
  display: flex;
  flex-direction: column;
}

.smtcmp-templates-header {
  display: grid;
  grid-template-columns: 1fr 112px; /* Name and Actions columns */
  gap: var(--size-4-4);
  align-items: center;
  min-height: var(--size-4-10);
  border-bottom: var(--border-width) solid var(--background-modifier-border);
  font-weight: var(--font-medium);
  color: var(--text-muted);

  & > div {
    padding: var(--size-4-1);
  }
  & > div:nth-child(1) {
    text-align: left;
  }
  & > div:nth-child(2) {
    text-align: center;
  }
}

.smtcmp-templates-empty {
  padding: var(--size-4-4) 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-muted);
}

.smtcmp-template {
  border-bottom: var(--border-width) solid var(--background-modifier-border);
}

.smtcmp-template-row {
  display: grid;
  grid-template-columns: 1fr 112px; /* Match columns with .smtcmp-templates-header */
  gap: var(--size-4-4);
  align-items: center;
  min-height: var(--size-4-10);

  & > div {
    padding: var(--size-4-1);
  }
}

.smtcmp-template-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.smtcmp-template-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-4-1);

  svg {
    height: var(--icon-l);
    width: var(--icon-l);
    stroke-width: var(--icon-stroke);
  }
}

.smtcmp-continue-response-button-container {
  display: flex;
  justify-content: center;
  padding: var(--size-4-1) 0;
}

.smtcmp-continue-response-button {
  display: flex;
  align-items: center;
  gap: var(--size-4-1);
}

/* Assistant selector styles - matched with model selector */

.smtcmp-chat-header-right button.smtcmp-assistant-selector-button {
  all: unset;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  font-size: var(--font-smallest) !important;
  font-weight: var(--font-medium) !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
  height: auto !important;
}

.smtcmp-chat-header-right button.smtcmp-assistant-selector-button:hover {
  color: var(--text-normal) !important;
  background-color: transparent !important;
}

.smtcmp-chat-header-right
  button.smtcmp-assistant-selector-button[data-state='open'] {
  color: var(--text-normal) !important;
}

.smtcmp-chat-header-right .smtcmp-assistant-selector-current {
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smtcmp-chat-header-right .smtcmp-assistant-selector-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.smtcmp-assistant-selector-current-icon {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(
    135deg,
    color-mix(
      in srgb,
      var(--h1-color, var(--interactive-accent)) 90%,
      transparent
    ),
    color-mix(
      in srgb,
      var(--h1-color, var(--interactive-accent)) 60%,
      #ffffff 12%
    )
  );
  color: var(--text-on-accent, #ffffff);
  box-shadow: 0 0 8px rgba(var(--interactive-accent-rgb, 128 90 213), 0.25);
}

.smtcmp-assistant-selector-current-icon svg {
  width: 12px;
  height: 12px;
}

.smtcmp-assistant-selector-content {
  padding: var(--size-2-1);
  min-width: 240px;
  max-width: 320px;
  border-radius: var(--radius-m);
  overflow: hidden;
}

.smtcmp-assistant-selector-content.smtcmp-assistant-selector-content--workspace-floating {
  width: auto;
  min-width: max(var(--radix-popover-trigger-width, 0px), 200px);
  max-width: 240px;
}

.smtcmp-assistant-selector-empty {
  padding: var(--size-4-2);
  color: var(--text-muted);
  text-align: center;
  font-size: var(--font-smallest);
}

.smtcmp-assistant-selector-list {
  max-height: 300px;
  overflow-y: auto;
  padding: var(--size-2-1);
  border-radius: var(--radius-s);
  scrollbar-width: thin;
}

.smtcmp-assistant-selector-row {
  list-style: none;
}

.smtcmp-assistant-selector-content .smtcmp-assistant-selector-row {
  margin: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
  max-height: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  display: block;
  overflow: visible;
  cursor: default;
  line-height: inherit;
  font-size: inherit;
  gap: 0;
}

.smtcmp-assistant-selector-content
  .smtcmp-assistant-selector-list::-webkit-scrollbar {
  width: 8px;
}

.smtcmp-assistant-selector-content
  .smtcmp-assistant-selector-list::-webkit-scrollbar-track {
  background: transparent;
  margin: 8px 0;
}

.smtcmp-assistant-selector-content
  .smtcmp-assistant-selector-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-muted) 30%, transparent);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.smtcmp-assistant-selector-content
  .smtcmp-assistant-selector-list::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--text-muted) 50%, transparent);
  background-clip: padding-box;
}

.smtcmp-assistant-selector-content .smtcmp-assistant-selector-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--size-4-2);
  padding: var(--size-4-1) var(--size-4-2);
  border-radius: var(--radius-m);
  text-align: left;
  font-family: inherit;
  font-size: var(--font-ui-smaller);
  line-height: var(--line-height-tight);
  appearance: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
  background-color: transparent;
  box-shadow: none;
  border: 0;
}

.smtcmp-assistant-selector-content .smtcmp-assistant-selector-item:hover {
  background-color: color-mix(
    in srgb,
    var(--background-modifier-hover) 90%,
    transparent
  );
}

.smtcmp-assistant-selector-content .smtcmp-assistant-selector-item.selected {
  background-color: color-mix(
    in srgb,
    var(--interactive-accent) 10%,
    transparent
  );
  border: 1px solid
    color-mix(in srgb, var(--interactive-accent) 60%, transparent);
}

.smtcmp-assistant-selector-content .smtcmp-assistant-selector-item:active {
  transform: translateY(1px);
}

.smtcmp-assistant-selector-content
  .smtcmp-assistant-selector-item[data-highlighted='true'] {
  background-color: color-mix(
    in srgb,
    var(--interactive-accent) 14%,
    transparent
  );
  box-shadow: 0 0 0 1px
    color-mix(in srgb, var(--interactive-accent) 40%, transparent);
}

.smtcmp-assistant-selector-item-icon {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-s);
  background: linear-gradient(
    140deg,
    color-mix(
      in srgb,
      var(--h1-color, var(--interactive-accent)) 85%,
      transparent
    ),
    color-mix(
      in srgb,
      var(--h1-color, var(--interactive-accent)) 55%,
      #ffffff 10%
    )
  );
  color: var(--text-on-accent, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
}

.smtcmp-assistant-selector-item-icon svg {
  width: 12px;
  height: 12px;
}

.smtcmp-assistant-selector-item-content {
  flex: 1;
  min-width: 0;
}

.smtcmp-assistant-selector-item-name {
  font-weight: var(--font-medium);
  color: var(--text-normal);
}

.smtcmp-assistant-selector-item-description {
  font-size: var(--font-smallest);
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.smtcmp-assistant-selector-item-current {
  font-size: var(--font-smallest);
  color: var(--interactive-accent);
  font-weight: var(--font-medium);
}

/* Folder Picker: flatten rows and remove container visuals */

.smtcmp-folder-picker .smtcmp-provider-header {
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 4px 8px;
  gap: 8px;
}

.smtcmp-folder-picker .smtcmp-provider-header:hover {
  background-color: var(--background-modifier-hover) !important;
}

.smtcmp-folder-picker .smtcmp-provider-header * {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

.smtcmp-folder-picker [role='button']:focus,
.smtcmp-folder-picker [role='button']:focus-visible,
.smtcmp-folder-picker [role='button']:active {
  outline: none !important;
  box-shadow: none !important;
}

.smtcmp-folder-picker .smtcmp-provider-expand-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
}

/* ===== Added for review fixes: move inline styles to CSS ===== */

/* Wide modal (instead of setting width via JS) */

.smtcmp-modal--wide {
  width: 720px;
}

/* Typeahead menu container (avoid inline display/position) */

.smtcmp-typeahead-menu {
  position: absolute;
  display: block;
}

/* ApplyView: diff content width */

.smtcmp-diff-block-content {
  width: 100%;
}

/* Assistants Section */

.smtcmp-settings-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.smtcmp-settings-header-row .smtcmp-settings-header {
  margin: 0;
}

.smtcmp-add-assistant-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 4px;
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.smtcmp-no-assistants {
  padding: 24px;
  text-align: center;
  background: var(--background-secondary);
  border-radius: 8px;
  border: 1px dashed var(--background-modifier-border);
  color: var(--text-muted);
  font-size: 15px;
}

.smtcmp-no-assistants-text {
  margin: 0;
}

/* Assistant Editor */

.smtcmp-assistant-editor {
  background: var(--background-secondary);
  border-radius: var(--radius-m);
  padding: 16px;
  margin: 8px 0;
  border: 1px solid var(--background-modifier-border);
}

.smtcmp-assistant-editor-inline {
  margin-top: 0;
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  animation: smtcmp-assistant-editor-slide-in 0.25s
    cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes smtcmp-assistant-editor-slide-in {
  0% {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  100% {
    opacity: 1;
    max-height: 800px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
}

.smtcmp-assistant-editor-new {
  animation: smtcmp-assistant-editor-fade-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes smtcmp-assistant-editor-fade-in {
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.smtcmp-assistant-editor-buttons {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}

/* Assistants List */

.smtcmp-assistants-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
}

/* Assistant Item */

.smtcmp-assistant-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  transition: all 0.2s ease;
  cursor: grab;
}

.smtcmp-assistant-item:hover {
  background: var(--background-secondary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.smtcmp-assistant-item.editing {
  border-color: var(--interactive-accent);
  box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.1);
  cursor: default;
}

.smtcmp-assistant-item.active {
  border-color: var(--interactive-accent);
  background: var(--background-primary-alt);
}

.smtcmp-assistant-item.disabled {
  opacity: 0.5;
}

.smtcmp-assistant-item.disabled .smtcmp-assistant-content {
  pointer-events: none;
}

.smtcmp-assistant-item.smtcmp-assistant-item-dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.smtcmp-assistant-item.smtcmp-assistant-item-drop-success {
  animation: smtcmp-assistant-drop-success 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes smtcmp-assistant-drop-success {
  0%,
  100% {
    transform: scale(1);
    background: var(--background-primary);
  }
  25% {
    transform: scale(0.98);
  }
  50% {
    background: rgba(var(--interactive-accent-rgb), 0.25);
    transform: scale(1.01);
  }
}

/* Drag Handle */

.smtcmp-assistant-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: var(--text-faint);
  transition: color 0.2s ease;
  flex-shrink: 0;
}

.smtcmp-assistant-drag-handle:hover {
  color: var(--text-muted);
}

.smtcmp-assistant-drag-handle .smtcmp-drag-handle {
  display: flex;
  padding: 2px;
}

.smtcmp-assistant-drag-handle .smtcmp-drag-handle.smtcmp-drag-handle--active {
  color: var(--interactive-accent);
}

/* Assistant Content */

.smtcmp-assistant-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.smtcmp-assistant-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.smtcmp-assistant-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-s);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  transition: all 0.2s ease;
}

.smtcmp-assistant-icon svg {
  width: 16px;
  height: 16px;
}

.smtcmp-assistant-info {
  flex: 1;
  min-width: 0;
}

.smtcmp-assistant-name {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-normal);
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}

.smtcmp-assistant-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--interactive-accent);
  background: rgba(var(--interactive-accent-rgb), 0.1);
  padding: 2px 8px;
  border-radius: var(--radius-s);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.smtcmp-assistant-description {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Assistant Controls */

.smtcmp-assistant-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
}

.smtcmp-assistant-controls button {
  padding: 6px;
  min-width: unset;
  height: auto;
}

.smtcmp-assistant-controls button:hover:not(:disabled) {
  background: var(--background-modifier-hover);
}

.smtcmp-assistant-controls button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.smtcmp-assistant-controls button svg {
  width: 16px;
  height: 16px;
}

/* Editor specific styles */

.smtcmp-assistant-editor .setting-item {
  margin-bottom: 12px;
}

.smtcmp-assistant-editor .setting-item:first-child {
  margin-top: 0;
}

.smtcmp-assistant-editor textarea {
  min-height: 100px;
}

/* ==================== Assistant Icon Picker Modal ==================== */

.smtcmp-icon-picker-modal {
  padding: var(--size-4-4);
}

.smtcmp-icon-picker-content h2 {
  margin: 0 0 var(--size-4-4) 0;
  font-size: var(--font-ui-medium);
  font-weight: 600;
  color: var(--text-normal);
}

.smtcmp-icon-picker-tabs {
  display: flex;
  gap: var(--size-2-1);
  margin-bottom: var(--size-4-4);
  border-bottom: 1px solid var(--background-modifier-border);
}

.smtcmp-icon-picker-tab {
  padding: var(--size-4-1) var(--size-4-3);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: var(--font-ui-small);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.smtcmp-icon-picker-tab:hover {
  color: var(--text-normal);
  background: var(--background-modifier-hover);
}

.smtcmp-icon-picker-tab.active {
  color: var(--interactive-accent);
  border-bottom-color: var(--interactive-accent);
}

.smtcmp-icon-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: var(--size-2-2);
  max-height: 400px;
  overflow-y: auto;
  padding: var(--size-2-1);
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
}

.smtcmp-icon-picker-item {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background-secondary);
  border: 2px solid transparent;
  border-radius: var(--radius-s);
  cursor: pointer;
  transition: all 0.15s ease;
}

.smtcmp-icon-picker-item:hover {
  background: var(--background-modifier-hover);
  border-color: var(--background-modifier-border-hover);
  transform: scale(1.05);
}

.smtcmp-icon-picker-item.selected {
  background: var(--interactive-accent-hover);
  border-color: var(--interactive-accent);
}

.smtcmp-icon-picker-item-preview {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-normal);
}

.smtcmp-icon-picker-custom-emoji {
  display: flex;
  gap: var(--size-4-2);
  margin-bottom: var(--size-4-4);
  align-items: center;
}

.smtcmp-icon-picker-emoji-input {
  flex: 1;
  padding: var(--size-4-2);
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-s);
  background: var(--background-primary);
  color: var(--text-normal);
  font-size: var(--font-ui-medium);
}

.smtcmp-icon-picker-emoji-input:focus {
  outline: none;
  border-color: var(--interactive-accent);
}

.smtcmp-icon-picker-confirm-btn {
  padding: var(--size-4-2) var(--size-4-4);
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--radius-s);
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

.smtcmp-icon-picker-confirm-btn:hover {
  background: var(--interactive-accent-hover);
}

/* ==================== Assistant Icon Selector in Settings ==================== */

/* ==================== Emoji Icon Styles (No Background) ==================== */

/* 助手选择器当前图标 - emoji 无背景 */

.smtcmp-assistant-selector-current-icon:has(.smtcmp-icon-emoji) {
  background: none;
  box-shadow: none;
}

/* 助手选择器列表项图标 - emoji 无背景 */

.smtcmp-assistant-selector-item-icon:has(.smtcmp-icon-emoji) {
  background: none;
}

/* 设置面板助手列表图标 - emoji 无背景 */

.smtcmp-assistant-icon:has(.smtcmp-icon-emoji) {
  background: none;
}

/* Emoji 图标字体大小调整 */

.smtcmp-icon-emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 16px;
}

.smtcmp-icon-emoji[data-size='14'] {
  font-size: 14px;
}

.smtcmp-icon-emoji[data-size='20'] {
  font-size: 20px;
}

.smtcmp-icon-emoji[data-size='16'] {
  font-size: 16px;
}

.smtcmp-icon-emoji[data-size='24'] {
  font-size: 24px;
}

/* ========================================
   Settings Tabs Styles
   ======================================== */

.smtcmp-settings-tabs-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  align-items: center;
}

.smtcmp-settings-tabs-nav {
  display: flex;
  gap: var(--size-2-2);
  padding: var(--size-2-2);
  border-radius: var(--radius-m);
  border: 1px solid var(--background-modifier-border);
  background: var(--background-secondary);
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--background-modifier-border) 40%, transparent);
  margin-bottom: var(--size-4-4);
  overflow-x: auto;
  scrollbar-width: thin;
  align-items: stretch;
  min-width: 0;
  max-width: 100%;
  width: max-content;
}

.smtcmp-settings-tabs-nav::-webkit-scrollbar {
  height: 6px;
}

.smtcmp-settings-tabs-nav::-webkit-scrollbar-track {
  background: transparent;
}

.smtcmp-settings-tabs-nav::-webkit-scrollbar-thumb {
  background: var(--background-modifier-border);
  border-radius: 3px;
}

/* Glider variant for smooth animated indicator */

.smtcmp-settings-tabs-nav--glider {
  position: relative;
  overflow: visible;
  gap: 0;
  --smtcmp-tab-count: 6;
  --smtcmp-tab-index: 0;
  --smtcmp-tab-padding: var(--size-2-2);
  --smtcmp-tab-glider-left: 0px;
  --smtcmp-tab-glider-width: 0px;
}

.smtcmp-settings-tabs-nav--glider .smtcmp-settings-tab-button {
  position: relative;
  z-index: 2;
}

.smtcmp-settings-tabs-nav--glider .smtcmp-settings-tab-button.is-active {
  border-color: transparent;
  box-shadow: none;
}

.smtcmp-settings-tabs-glider {
  position: absolute;
  top: var(--smtcmp-tab-padding);
  left: 0;
  width: var(--smtcmp-tab-glider-width);
  height: calc(100% - (var(--smtcmp-tab-padding) * 2));
  background: transparent;
  border: 2px solid var(--h1-color, var(--interactive-accent));
  border-radius: var(--radius-s);
  box-shadow: 0 2px 10px
    color-mix(in srgb, var(--interactive-accent) 18%, transparent);
  transform: translateX(var(--smtcmp-tab-glider-left));
  transition:
    transform 0.36s cubic-bezier(0.4, 1.2, 0.4, 1),
    width 0.36s cubic-bezier(0.4, 1.2, 0.4, 1);
  pointer-events: none;
  z-index: 1;
}

.smtcmp-settings-tab-button {
  flex: 0 0 auto;
  padding: 6px 12px;
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  color: var(--text-muted);
  font-size: var(--font-ui-small);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
}

.smtcmp-settings-tab-label {
  display: block;
  white-space: nowrap;
}

.smtcmp-settings-tab-button:hover {
  color: var(--text-normal);
  background: transparent !important;
}

.smtcmp-settings-tab-button.is-active {
  color: var(--text-normal);
  background: transparent !important;
  border: 2px solid var(--h1-color, var(--interactive-accent));
  box-shadow: 0 2px 10px
    color-mix(in srgb, var(--interactive-accent) 18%, transparent);
}

.smtcmp-settings-tabs-content {
  flex: 1;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding-right: var(--size-4-6);
  box-sizing: border-box;
  padding-bottom: var(--size-4-4);
  width: 100%;
  max-width: 100%;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text-muted) 35%, transparent)
    transparent;
}

.smtcmp-settings-tabs-content::-webkit-scrollbar {
  width: 8px;
}

.smtcmp-settings-tabs-content::-webkit-scrollbar-track {
  background: transparent;
}

.smtcmp-settings-tabs-content::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-muted) 30%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.smtcmp-settings-tabs-content::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--text-normal) 40%, transparent);
  background-clip: content-box;
}

/* Mobile responsive adjustments */

@media (max-width: 768px) {
  .smtcmp-settings-tabs-nav {
    padding: var(--size-2-2);
  }

  .smtcmp-settings-tab-button {
    padding: 6px 8px;
    font-size: var(--font-ui-smaller);
  }
}

.smtcmp-agent-section {
  display: flex;
  flex-direction: column;
  gap: var(--size-4-3);
}

.smtcmp-agent-intro {
  margin-top: calc(var(--size-4-1) * -1);
}

.smtcmp-agent-block {
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  background: var(--background-secondary);
  padding: var(--size-4-4);
}

.smtcmp-agent-block-head {
  margin-bottom: var(--size-4-3);
}

.yolo-agent-sub-card {
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  background: var(--background-primary);
  padding: var(--size-4-3) var(--size-4-4);
  margin-top: var(--size-4-3);
}

.yolo-agent-sub-card-head {
  font-size: var(--font-ui-medium);
  font-weight: var(--font-semibold);
  color: var(--text-normal);
  margin-bottom: var(--size-4-2);
}

/* Focus-sync card — pure white background like the Models block cards. */

.yolo-focus-sync-card.setting-item {
  background: var(--background-primary) !important;
  border: 1px solid var(--background-modifier-border) !important;
}

.smtcmp-agent-block-head-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-4-3);
  margin-bottom: var(--size-4-1);
}

.smtcmp-agent-block-head-title-row > div:last-child {
  margin-top: 4px;
}

.smtcmp-agent-cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--size-4-3);
}

.smtcmp-agent-cap-card {
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  background: var(--background-primary);
  padding: var(--size-4-3);
}

.smtcmp-agent-cap-title {
  display: inline-flex;
  align-items: center;
  gap: var(--size-2-2);
  color: var(--text-normal);
  font-size: var(--font-ui-small);
  font-weight: var(--font-medium);
}

.smtcmp-agent-tools-section-title {
  display: inline-flex;
  align-items: center;
  gap: var(--size-2-2);
}

.smtcmp-agent-cap-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-4-2);
}

.smtcmp-agent-cap-count {
  margin-top: var(--size-2-2);
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
}

.smtcmp-agent-cap-tags {
  margin-top: var(--size-4-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-2-2);
}

.smtcmp-agent-tools-trigger {
  white-space: nowrap;
}

.smtcmp-agent-tools-modal-content {
  margin-top: var(--size-4-2);
  max-height: 420px;
  overflow: auto;
}

.smtcmp-agent-tool-list {
  display: flex;
  flex-direction: column;
  gap: var(--size-4-2);
}

.smtcmp-agent-tool-row {
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-s);
  background: var(--background-secondary-alt);
  padding: var(--size-2-2) var(--size-4-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-4-2);
}

.smtcmp-agent-tool-main {
  min-width: 0;
}

.smtcmp-agent-tool-name {
  color: var(--text-normal);
  font-size: var(--font-ui-small);
}

.smtcmp-agent-tool-name--mono {
  font-family: var(--font-monospace);
}

.smtcmp-agent-tool-source {
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
}

.smtcmp-agent-tool-toggle {
  flex-shrink: 0;
}

.smtcmp-agent-tool-controls {
  display: inline-flex;
  align-items: center;
  gap: var(--size-4-2);
  flex-shrink: 0;
}

.smtcmp-agent-tool-approval {
  display: inline-flex;
  align-items: center;
}

.smtcmp-agent-tool-approval .smtcmp-simple-select__trigger {
  width: auto;
  min-width: 0;
  max-width: 104px;
  min-height: 28px;
  padding: 4px 8px 4px 10px;
  gap: 6px;
  box-shadow: none;
}

.smtcmp-agent-tool-approval .smtcmp-simple-select__trigger:hover,
.smtcmp-agent-tool-approval .smtcmp-simple-select__trigger:focus,
.smtcmp-agent-tool-approval .smtcmp-simple-select__trigger:focus-visible,
.smtcmp-agent-tool-approval .smtcmp-simple-select__trigger[data-state='open'] {
  box-shadow: none;
}

.smtcmp-simple-select__content.smtcmp-agent-tool-approval-menu {
  width: auto;
  min-width: max(var(--radix-dropdown-menu-trigger-width, 0px), 120px);
  max-width: 140px;
  box-shadow: none;
}

.smtcmp-agent-skill-controls {
  display: inline-flex;
  align-items: center;
  gap: var(--size-2-2);
  flex-shrink: 0;
}

.smtcmp-agent-skill-controls select {
  min-width: 108px;
}

.smtcmp-agent-skill-tokens {
  color: var(--text-faint);
  font-size: var(--font-ui-smaller);
  font-weight: normal;
  margin-left: var(--size-4-2);
}

.smtcmp-agent-skill-meta {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.smtcmp-agent-skill-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-2-2);
}

.smtcmp-agent-skills-toolbar {
  margin: var(--size-4-2) 0;
  display: flex;
  align-items: center;
  gap: var(--size-4-2);
}

.smtcmp-agent-skills-toolbar-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--size-2-2);
}

.smtcmp-agent-skills-modal-panel {
  margin-top: 0;
}

.smtcmp-agent-tools-empty {
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
}

.smtcmp-agent-tools-panel {
  margin-top: var(--size-4-3);
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--background-secondary) 86%, transparent);
  padding: var(--size-4-2);
  display: flex;
  flex-direction: column;
  gap: var(--size-4-3);
}

.smtcmp-agent-tools-panel.is-disabled {
  opacity: 0.64;
}

.smtcmp-agent-tools-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-4-2);
}

.smtcmp-agent-tools-panel-title {
  color: var(--text-normal);
  font-size: var(--font-ui-small);
  font-weight: var(--font-medium);
}

.smtcmp-agent-tools-panel-title-row {
  display: inline-flex;
  align-items: baseline;
  gap: var(--size-2-2);
  min-width: 0;
}

.smtcmp-agent-tools-panel-estimate {
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
  white-space: nowrap;
}

.smtcmp-agent-tools-panel-count {
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
  border: 1px solid var(--background-modifier-border);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}

.smtcmp-agent-tool-group {
  display: flex;
  flex-direction: column;
  gap: var(--size-2-2);
}

.smtcmp-agent-tool-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-2-2);
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
  letter-spacing: 0.01em;
}

.smtcmp-agent-tool-group-title-main {
  display: inline-flex;
  align-items: baseline;
  gap: var(--size-4-2);
}

.smtcmp-agent-tool-group-tokens {
  color: var(--text-faint);
  font-size: var(--font-ui-smaller);
}

.smtcmp-agent-tool-group-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--size-4-4);
  margin-right: var(--size-4-1);
}

.smtcmp-agent-tool-group-count {
  color: var(--text-faint);
  font-size: var(--font-ui-smaller);
}

button.smtcmp-agent-tool-group-bulk-toggle {
  padding: 0;
  height: auto;
  line-height: 1.4;
  border: none;
  background: transparent;
  box-shadow: none;
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
  text-decoration: underline;
  text-decoration-color: var(--background-modifier-border);
  text-underline-offset: 2px;
  cursor: pointer;
}

button.smtcmp-agent-tool-group-bulk-toggle:hover {
  color: var(--text-normal);
  text-decoration-color: currentColor;
  background: transparent;
}

.smtcmp-agent-tools-panel .smtcmp-agent-tool-list {
  gap: 0;
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  background: var(--background-primary);
  overflow: hidden;
}

.smtcmp-agent-tools-panel .smtcmp-agent-tool-row {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: var(--size-4-2);
}

.smtcmp-agent-tools-panel .smtcmp-agent-tool-row + .smtcmp-agent-tool-row {
  border-top: 1px solid var(--background-modifier-border);
}

.smtcmp-agent-tool-source--preview {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

@media (max-width: 720px) {
  .smtcmp-agent-tools-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .smtcmp-agent-tools-panel .smtcmp-agent-tool-row {
    align-items: flex-start;
  }

  .smtcmp-agent-tools-panel .smtcmp-agent-tool-controls {
    margin-top: 2px;
    width: 100%;
    justify-content: space-between;
  }

  .smtcmp-agent-tool-approval {
    flex: 1 1 auto;
  }

  .smtcmp-agent-model-control-top {
    grid-template-columns: 1fr;
  }

  .smtcmp-agent-model-number {
    width: 100%;
    text-align: left;
  }

  .smtcmp-agent-model-control-adjust {
    grid-template-columns: 1fr;
  }

  .smtcmp-agent-model-setting-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .smtcmp-agent-model-select-wrap {
    width: 100%;
    min-width: 0;
  }
}

.smtcmp-agent-chip {
  display: inline-block;
  max-width: 12em;
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-s);
  padding: 2px 6px;
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
  background: var(--background-secondary-alt);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.smtcmp-agent-chip--status {
  color: var(--text-success);
  border-color: color-mix(in srgb, var(--text-success) 30%, transparent);
}

button.smtcmp-agent-chip--more {
  cursor: pointer;
  font-family: inherit;
  line-height: inherit;
  box-shadow: none;
  height: auto;
}

button.smtcmp-agent-chip--more:hover {
  color: var(--text-normal);
  background: var(--background-modifier-hover);
}

.smtcmp-agent-model-setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--size-4-2);
  padding-top: 0.75em;
  padding-bottom: var(--size-4-2);
  border-top: 1px solid var(--background-modifier-border);
}

.smtcmp-agent-model-setting-info {
  min-width: 0;
}

.smtcmp-agent-model-setting-title {
  color: var(--text-normal);
  font-size: var(--font-ui-medium);
  font-weight: var(--font-medium);
  line-height: var(--line-height-tight);
}

.smtcmp-agent-model-setting-desc {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: var(--font-ui-small);
  line-height: var(--line-height-normal);
}

.smtcmp-agent-model-select-wrap {
  width: min(520px, 100%);
  min-width: 280px;
}

.smtcmp-agent-model-select-wrap > .smtcmp-simple-select__trigger {
  width: 100%;
}

.smtcmp-agent-model-select-content {
  max-height: min(360px, calc(100vh - 180px));
}

.smtcmp-agent-model-select-content .smtcmp-simple-select__list {
  max-height: min(340px, calc(100vh - 200px));
  overflow-y: auto;
  padding-bottom: 8px;
  box-sizing: border-box;
}

.smtcmp-agent-model-panel {
  gap: var(--size-4-2);
  margin-bottom: var(--size-4-2);
}

.smtcmp-agent-model-panel + .setting-item {
  border-top: 0;
}

.smtcmp-agent-model-panel-head {
  align-items: center;
}

.smtcmp-agent-model-reset {
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-s);
  background: var(--background-primary);
  color: var(--text-muted);
  padding: 4px 10px;
  font-size: var(--font-ui-smaller);
  cursor: pointer;
  transition:
    border-color 140ms ease,
    color 140ms ease,
    background-color 140ms ease;
}

.smtcmp-agent-model-reset:hover,
.smtcmp-agent-model-reset:focus-visible {
  color: var(--text-normal);
  border-color: color-mix(in srgb, var(--interactive-accent) 45%, transparent);
  background: color-mix(in srgb, var(--interactive-accent) 9%, transparent);
}

.smtcmp-agent-model-controls {
  display: flex;
  flex-direction: column;
  gap: var(--size-4-2);
}

.smtcmp-agent-model-control {
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  background: var(--background-primary);
  padding: var(--size-4-2);
  display: flex;
  flex-direction: column;
  gap: var(--size-2-2);
}

.smtcmp-agent-model-control.is-disabled {
  opacity: 0.72;
}

.smtcmp-agent-model-control-top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: var(--size-4-2);
}

.smtcmp-agent-model-control-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--size-4-2);
}

.smtcmp-agent-model-control-adjust {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--size-4-2);
}

.smtcmp-agent-model-control-meta {
  min-width: 0;
}

.smtcmp-agent-model-control-label {
  color: var(--text-normal);
  font-size: var(--font-ui-small);
  font-weight: var(--font-medium);
}

.smtcmp-agent-model-control-desc {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
}

.smtcmp-agent-model-number {
  width: 108px;
  min-height: 30px;
  text-align: right;
}

.smtcmp-agent-model-control input[type='range'] {
  width: 100%;
  margin: 0;
}

.smtcmp-agent-model-control input[type='range']:disabled,
.smtcmp-agent-model-number:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.smtcmp-builtin-tools-table-header,
.smtcmp-builtin-tools-table-row {
  grid-template-columns: minmax(140px, max-content) minmax(200px, max-content) 1fr auto;
}

.smtcmp-builtin-tools-table-header > div:last-child {
  text-align: right;
}

.smtcmp-builtin-tools-table-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--size-2-2);
}

.smtcmp-web-search-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(140px, 0.8fr) 80px 96px;
  gap: var(--size-4-3);
  align-items: center;
  padding: var(--size-2-3) var(--size-4-3);
  border-bottom: 1px solid var(--background-modifier-border);
}

.smtcmp-web-search-row:last-child {
  border-bottom: none;
}

.smtcmp-web-search-header {
  font-weight: var(--font-semibold);
  background: var(--background-secondary);
}

.smtcmp-web-search-add {
  display: flex;
  align-items: center;
  gap: var(--size-4-2);
}

.smtcmp-builtin-tools-table-description {
  min-width: 0;
}

.smtcmp-builtin-tools-table-description .smtcmp-mcp-tool-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.smtcmp-agent-empty {
  border: 1px dashed var(--background-modifier-border);
  border-radius: var(--radius-m);
  padding: var(--size-4-4);
  display: flex;
  align-items: center;
  gap: var(--size-4-2);
  color: var(--text-muted);
}

.smtcmp-agent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--size-4-3);
}

.smtcmp-agent-card {
  position: relative;
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--background-primary) 94%, transparent) 0%,
    color-mix(in srgb, var(--background-secondary) 88%, transparent) 100%
  );
  padding: var(--size-4-3);
  min-height: 136px;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 180ms ease;
}

.smtcmp-agent-create-card {
  border: 1px dashed
    color-mix(in srgb, var(--background-modifier-border) 88%, transparent);
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--background-secondary) 92%, transparent);
  min-height: 136px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--size-4-2);
  color: var(--text-muted);
  cursor: pointer;
  transition:
    border-color 160ms ease,
    color 160ms ease,
    background-color 160ms ease;
}

.smtcmp-agent-create-card:hover,
.smtcmp-agent-create-card:focus-visible {
  border-color: color-mix(in srgb, var(--interactive-accent) 55%, transparent);
  color: var(--interactive-accent);
  background: color-mix(
    in srgb,
    var(--interactive-accent) 7%,
    var(--background-secondary)
  );
}

.smtcmp-agent-create-card:focus-visible {
  outline: 2px solid
    color-mix(in srgb, var(--interactive-accent) 60%, transparent);
  outline-offset: 2px;
}

.smtcmp-agent-create-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.smtcmp-agent-create-card-text {
  font-size: var(--font-ui-medium);
  font-weight: var(--font-medium);
}

.smtcmp-agent-card:hover,
.smtcmp-agent-card:focus-within {
  border-color: color-mix(in srgb, var(--interactive-accent) 55%, transparent);
  background: color-mix(
    in srgb,
    var(--interactive-accent) 8%,
    var(--background-secondary)
  );
  box-shadow: 0 0 0 1px
    color-mix(in srgb, var(--interactive-accent) 14%, transparent);
}

.smtcmp-agent-card--clickable {
  cursor: pointer;
}

.smtcmp-agent-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--size-4-2);
}

.smtcmp-agent-card-top-main {
  display: flex;
  gap: var(--size-4-2);
  min-width: 0;
}

.smtcmp-agent-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--interactive-accent) 16%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--interactive-accent) 88%, white 12%);
  flex-shrink: 0;
}

.smtcmp-agent-main {
  min-width: 0;
}

.smtcmp-agent-name-row {
  display: flex;
  align-items: center;
  gap: var(--size-2-2);
}

.smtcmp-agent-name {
  color: var(--text-normal);
  font-size: var(--font-ui-medium);
  line-height: 1.18;
  font-weight: var(--font-semibold);
}

.smtcmp-agent-current-badge {
  border: 1px solid
    color-mix(in srgb, var(--interactive-accent) 60%, transparent);
  border-radius: var(--radius-s);
  color: var(--interactive-accent);
  font-size: var(--font-ui-smaller);
  padding: 1px 6px;
}

.smtcmp-agent-desc {
  margin-top: var(--size-2-2);
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
  line-height: var(--line-height-normal);
}

.smtcmp-agent-meta-row {
  margin-top: var(--size-4-2);
  padding-top: var(--size-4-1);
  border-top: 1px solid var(--background-modifier-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-4-2);
}

.smtcmp-agent-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
}

.smtcmp-agent-card-menu-trigger {
  width: 32px;
  height: 32px;
  border: none !important;
  border-radius: 8px;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  box-shadow: none !important;
  transition:
    opacity 120ms ease,
    color 120ms ease,
    background-color 120ms ease,
    transform 120ms ease;
}

.smtcmp-agent-card:hover .smtcmp-agent-card-menu-trigger,
.smtcmp-agent-card:focus-within .smtcmp-agent-card-menu-trigger,
.smtcmp-agent-card-menu-trigger:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.smtcmp-agent-card-menu-trigger:focus-visible {
  outline: 2px solid
    color-mix(in srgb, var(--interactive-accent) 60%, transparent);
  outline-offset: 2px;
}

.smtcmp-agent-card-menu-trigger-dots {
  display: inline-block;
  font-size: 16px !important;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 1.2px;
  transform: translateY(-3px);
}

.smtcmp-agent-card-menu-trigger:hover {
  transform: translateY(-1px);
  border: 1px solid
    color-mix(in srgb, var(--interactive-accent) 50%, transparent) !important;
  background: color-mix(
    in srgb,
    var(--interactive-accent) 96%,
    white 4%
  ) !important;
  background-color: color-mix(
    in srgb,
    var(--interactive-accent) 96%,
    white 4%
  ) !important;
  box-shadow:
    0 6px 14px -8px color-mix(in srgb, var(--interactive-accent) 55%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 20%, transparent) !important;
  color: var(--text-on-accent);
}

.smtcmp-agent-card-menu-popover {
  z-index: 1100;
  min-width: 140px;
  width: max-content;
  background: color-mix(in srgb, var(--background-secondary) 96%, transparent);
  border: 1px solid var(--background-modifier-border);
  border-radius: 10px;
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.22),
    0 0 0 1px
      color-mix(in srgb, var(--background-modifier-border) 35%, transparent);
  padding: 0;
}

.smtcmp-agent-card-menu-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.smtcmp-agent-card-menu-item {
  min-height: 38px;
  margin: 0;
  padding: 9px 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-normal);
  font-size: var(--font-ui-small);
  line-height: 1.1;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.smtcmp-agent-card-menu-item:hover,
.smtcmp-agent-card-menu-item[data-highlighted] {
  background: color-mix(
    in srgb,
    var(--background-modifier-hover) 92%,
    transparent
  );
}

.smtcmp-agent-card-menu-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.smtcmp-agent-card-menu-danger {
  color: var(--text-error);
}

.smtcmp-agent-card-menu-danger .smtcmp-agent-card-menu-icon,
.smtcmp-agent-card-menu-danger:hover {
  color: var(--text-error);
}

@media (hover: none) {
  .smtcmp-agent-card-menu-trigger {
    opacity: 1;
    pointer-events: auto;
  }
}

.smtcmp-agent-modal-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-4-2);
}

.smtcmp-modal--agent-direct-edit .modal-header {
  display: none;
}

/* Direct-edit modal owns its own flex layout: body grows, footer pinned at
 * the bottom. Avoid relying on `position: sticky` against the modal scroll
 * container — Obsidian's modal-content is not a stable sticky ancestor and
 * the footer drifts into the middle of the page when content overflows.
 */

.smtcmp-modal--agent-direct-edit .modal-content {
  padding-top: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.smtcmp-modal--agent-direct-edit .modal-content > .smtcmp-agent-editor-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.smtcmp-agent-editor-panel--direct .smtcmp-agent-editor-sheet {
  margin-top: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.smtcmp-agent-editor-panel--direct .smtcmp-agent-editor-sheet-header {
  padding-top: var(--size-4-2);
  flex: 0 0 auto;
}

.smtcmp-agent-editor-panel--direct .smtcmp-agent-editor-sheet-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--size-4-2) var(--size-4-3);
  flex: 0 0 auto;
}

.smtcmp-agent-editor-panel--direct
  .smtcmp-agent-editor-sheet-top
  > .smtcmp-agent-editor-sheet-header {
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 0;
}

.smtcmp-agent-editor-panel--direct
  .smtcmp-agent-editor-sheet-top
  > .smtcmp-agent-editor-tabs {
  flex: 0 1 auto;
  width: auto;
}

.smtcmp-agent-editor-panel--direct .smtcmp-agent-editor-tabs {
  flex: 0 0 auto;
}

.smtcmp-agent-editor-panel--direct .smtcmp-agent-editor-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

.smtcmp-agent-editor-direct-footer {
  flex: 0 0 auto;
  padding: var(--size-4-2) var(--size-4-3);
  border-top: 1px solid var(--background-modifier-border);
  background: var(--background-primary);
}

.smtcmp-agent-editor-direct-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--size-4-1);
}

.smtcmp-agent-modal-header-actions {
  display: flex;
  gap: var(--size-4-1);
}

.smtcmp-agent-editor-sheet {
  margin-top: var(--size-4-4);
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  background: var(--background-secondary);
  overflow: hidden;
}

.smtcmp-agent-editor-sheet-header {
  display: flex;
  justify-content: space-between;
  gap: var(--size-4-3);
  padding: var(--size-4-3);
}

.smtcmp-agent-editor-sheet-actions {
  display: flex;
  align-items: center;
  gap: var(--size-4-1);
}

.smtcmp-agent-editor-tabs {
  display: flex;
  align-items: stretch;
  gap: var(--size-2-2);
  margin: 0 var(--size-4-3) var(--size-2-2);
  padding: var(--size-2-2);
  border-radius: var(--radius-m);
  border: 1px solid var(--background-modifier-border);
  background: var(--background-secondary);
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--background-modifier-border) 40%, transparent);
  overflow-x: auto;
  scrollbar-width: thin;
  width: max-content;
  max-width: calc(100% - (var(--size-4-3) * 2));
}

.smtcmp-agent-editor-tabs--glider {
  position: relative;
  overflow: visible;
  gap: 0;
  --smtcmp-agent-tab-count: 4;
  --smtcmp-agent-tab-index: 0;
  --smtcmp-agent-tab-padding: var(--size-2-2);
  --smtcmp-agent-tab-glider-left: 0px;
  --smtcmp-agent-tab-glider-width: 0px;
}

.smtcmp-agent-editor-tabs--glider .smtcmp-agent-editor-tab {
  position: relative;
  z-index: 2;
}

.smtcmp-agent-editor-tabs--glider .smtcmp-agent-editor-tab.is-active {
  border-color: transparent;
  box-shadow: none;
}

.smtcmp-agent-editor-tabs-glider {
  position: absolute;
  top: var(--smtcmp-agent-tab-padding);
  left: 0;
  width: var(--smtcmp-agent-tab-glider-width);
  height: calc(100% - (var(--smtcmp-agent-tab-padding) * 2));
  background: transparent;
  border: 2px solid var(--h1-color, var(--interactive-accent));
  border-radius: var(--radius-s);
  box-shadow: 0 2px 10px
    color-mix(in srgb, var(--interactive-accent) 18%, transparent);
  transform: translateX(var(--smtcmp-agent-tab-glider-left));
  transition:
    transform 0.36s cubic-bezier(0.4, 1.2, 0.4, 1),
    width 0.36s cubic-bezier(0.4, 1.2, 0.4, 1);
  pointer-events: none;
  z-index: 1;
}

.smtcmp-agent-editor-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text-muted);
  font-size: var(--font-ui-small);
  font-weight: var(--font-medium);
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: none !important;
}

.smtcmp-agent-editor-tab-label {
  display: block;
  white-space: nowrap;
}

.smtcmp-agent-editor-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  line-height: 0;
}

.smtcmp-agent-editor-tab:hover {
  color: var(--text-normal);
  background: transparent !important;
}

.smtcmp-agent-editor-tab.is-active {
  color: var(--text-normal);
  background: transparent !important;
  border: 2px solid var(--h1-color, var(--interactive-accent));
  box-shadow: 0 2px 10px
    color-mix(in srgb, var(--interactive-accent) 18%, transparent);
}

.smtcmp-agent-editor-body {
  display: flex;
  flex-direction: column;
  gap: var(--size-4-2);
  padding: var(--size-4-3);
  min-height: 420px;
  max-height: calc(100vh - 320px);
  overflow-y: auto;
}

.smtcmp-agent-system-prompt-textarea {
  min-height: 200px !important;
  max-height: 360px;
  height: var(--smtcmp-textarea-auto-height, 200px);
  overflow-y: var(--smtcmp-textarea-auto-overflow-y, auto);
}

/* ================= Workspace scope editor ================= */

.smtcmp-agent-workspace {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.smtcmp-agent-workspace-toggle-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--background-modifier-border);
}

.smtcmp-agent-workspace-toggle-main {
  flex: 1;
  min-width: 0;
}

.smtcmp-agent-workspace-toggle-title {
  font-size: var(--font-ui-medium);
  font-weight: var(--font-medium);
  color: var(--text-normal);
}

.smtcmp-agent-workspace-toggle-desc {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.5;
}

.smtcmp-agent-workspace-group {
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--background-primary);
  transition: opacity 0.15s ease;
}

.smtcmp-agent-workspace-group.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}

.smtcmp-agent-workspace-group--include {
  border-color: color-mix(
    in srgb,
    var(--color-green) 35%,
    var(--background-modifier-border)
  );
}

.smtcmp-agent-workspace-group--exclude {
  border-color: color-mix(
    in srgb,
    var(--color-red) 35%,
    var(--background-modifier-border)
  );
}

.smtcmp-agent-workspace-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--background-secondary);
  border-bottom: 1px solid var(--background-modifier-border);
  flex-wrap: wrap;
}

.smtcmp-agent-workspace-group--include .smtcmp-agent-workspace-group-head {
  background: color-mix(
    in srgb,
    var(--color-green) 8%,
    var(--background-primary)
  );
  border-bottom-color: color-mix(
    in srgb,
    var(--color-green) 20%,
    var(--background-modifier-border)
  );
}

.smtcmp-agent-workspace-group--exclude .smtcmp-agent-workspace-group-head {
  background: color-mix(
    in srgb,
    var(--color-red) 8%,
    var(--background-primary)
  );
  border-bottom-color: color-mix(
    in srgb,
    var(--color-red) 20%,
    var(--background-modifier-border)
  );
}

.smtcmp-agent-workspace-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-monospace);
  font-size: var(--font-ui-smaller);
  font-weight: var(--font-medium);
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  letter-spacing: 0.04em;
}

.smtcmp-agent-workspace-group--include .smtcmp-agent-workspace-badge {
  color: var(--color-green);
  border-color: color-mix(
    in srgb,
    var(--color-green) 30%,
    var(--background-modifier-border)
  );
}

.smtcmp-agent-workspace-group--exclude .smtcmp-agent-workspace-badge {
  color: var(--color-red);
  border-color: color-mix(
    in srgb,
    var(--color-red) 30%,
    var(--background-modifier-border)
  );
}

.smtcmp-agent-workspace-group-title {
  font-size: var(--font-ui-small);
  font-weight: var(--font-medium);
  color: var(--text-normal);
}

.smtcmp-agent-workspace-group-desc {
  flex: 1;
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  min-width: 120px;
}

.smtcmp-agent-workspace-add {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  padding: 4px 10px !important;
  border-radius: var(--radius-s) !important;
  background: var(--background-primary) !important;
  background-color: var(--background-primary) !important;
  border: 1px solid var(--background-modifier-border) !important;
  box-shadow: none !important;
  color: var(--text-normal);
  font-size: var(--font-ui-smaller);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all 0.15s ease;
}

.smtcmp-agent-workspace-add:hover:not(:disabled) {
  background: var(--background-modifier-hover) !important;
  box-shadow: none !important;
}

.smtcmp-agent-workspace-add:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.smtcmp-agent-workspace-group--include .smtcmp-agent-workspace-add {
  color: var(--color-green);
  border-color: color-mix(
    in srgb,
    var(--color-green) 30%,
    var(--background-modifier-border)
  );
}

.smtcmp-agent-workspace-group--exclude .smtcmp-agent-workspace-add {
  color: var(--color-red);
  border-color: color-mix(
    in srgb,
    var(--color-red) 30%,
    var(--background-modifier-border)
  );
}

.smtcmp-agent-workspace-empty {
  padding: 16px 14px;
  text-align: center;
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  font-family: var(--font-monospace);
}

.smtcmp-agent-workspace-rows {
  display: flex;
  flex-direction: column;
}

.smtcmp-agent-workspace-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--background-modifier-border);
}

.smtcmp-agent-workspace-row:last-child {
  border-bottom: none;
}

.smtcmp-agent-workspace-row-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--text-muted);
}

.smtcmp-agent-workspace-group--include .smtcmp-agent-workspace-row-icon {
  color: var(--color-green);
}

.smtcmp-agent-workspace-group--exclude .smtcmp-agent-workspace-row-icon {
  color: var(--color-red);
}

.smtcmp-agent-workspace-row-path {
  flex: 1;
  min-width: 0;
  font-family: var(--font-monospace);
  font-size: var(--font-ui-small);
  color: var(--text-normal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.smtcmp-agent-workspace-row-kind {
  font-family: var(--font-monospace);
  font-size: 10px;
  color: var(--text-muted);
  padding: 2px 7px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 999px;
  background: var(--background-primary);
  flex: 0 0 auto;
}

.smtcmp-agent-workspace-row-remove {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0 !important;
  border-radius: var(--radius-s) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0.4;
  transition: all 0.15s ease;
  flex: 0 0 auto;
}

.smtcmp-agent-workspace-row:hover .smtcmp-agent-workspace-row-remove {
  opacity: 1;
}

.smtcmp-agent-workspace-row-remove:hover:not(:disabled) {
  background: var(--background-modifier-hover) !important;
  color: var(--color-red);
}

.smtcmp-agent-workspace-row-remove:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

.smtcmp-agent-workspace-row-remove svg {
  display: block;
  width: 14px;
  height: 14px;
}

/* Web search settings — V1 refined single-column layout */

.smtcmp-ws {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.smtcmp-ws-intro {
  color: var(--text-muted);
  font-size: var(--font-ui-small);
  line-height: 1.55;
  padding: 2px 2px 2px 12px;
  border-left: 2px solid
    color-mix(in srgb, var(--interactive-accent) 40%, transparent);
  margin-bottom: 16px;
}

.smtcmp-ws-section {
  padding: 0 2px;
}

.smtcmp-ws-section + .smtcmp-ws-section {
  margin-top: 20px;
}

.smtcmp-ws-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-4-2);
  padding-bottom: 10px;
}

.smtcmp-ws-section-label {
  color: var(--text-normal);
  font-size: var(--font-ui-small);
  font-weight: var(--font-semibold);
}

.smtcmp-ws-add-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 5px 10px !important;
  font-size: var(--font-ui-smaller) !important;
  font-weight: 500;
  background: var(--background-primary) !important;
  background-color: var(--background-primary) !important;
  color: var(--text-normal) !important;
  border: 1px solid var(--background-modifier-border) !important;
  border-radius: var(--radius-s) !important;
  cursor: pointer;
  box-shadow: none !important;
  line-height: 1;
  transition:
    border-color 140ms ease,
    background-color 140ms ease;
}

.smtcmp-ws-add-btn:hover:not(:disabled) {
  border-color: color-mix(
    in srgb,
    var(--interactive-accent) 45%,
    var(--background-modifier-border)
  );
  background: color-mix(
    in srgb,
    var(--interactive-accent) 6%,
    var(--background-primary)
  ) !important;
}

.smtcmp-ws-providers {
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--background-primary);
}

.smtcmp-ws-provider-row {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  cursor: pointer;
  background: var(--background-primary);
  transition: background-color 120ms ease;
}

.smtcmp-ws-provider-row + .smtcmp-ws-provider-row {
  border-top: 1px solid
    color-mix(in srgb, var(--background-modifier-border) 70%, transparent);
}

.smtcmp-ws-provider-row:hover {
  background: var(--background-secondary);
}

.smtcmp-ws-provider-row.is-default {
  background: color-mix(
    in srgb,
    var(--interactive-accent) 6%,
    var(--background-primary)
  );
}

.smtcmp-ws-provider-row.is-default:hover {
  background: color-mix(
    in srgb,
    var(--interactive-accent) 10%,
    var(--background-primary)
  );
}

.smtcmp-ws-radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--background-modifier-border);
  background: var(--background-primary);
  display: inline-grid;
  place-items: center;
  transition: border-color 140ms ease;
  flex-shrink: 0;
}

.smtcmp-ws-provider-row.is-default .smtcmp-ws-radio {
  border-color: var(--interactive-accent);
}

.smtcmp-ws-radio-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--interactive-accent);
}

.smtcmp-ws-provider-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.smtcmp-ws-monogram {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: #fff;
  display: inline-grid;
  place-items: center;
  font-family: var(--font-monospace);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.smtcmp-ws-monogram--tavily {
  background: var(--color-blue, #4c7cf5);
}

.smtcmp-ws-monogram--jina {
  background: var(--color-green, #3aa35c);
}

.smtcmp-ws-monogram--searxng {
  background: var(--color-orange, #d08752);
}

.smtcmp-ws-monogram--bing {
  background: var(--color-cyan, #3f9aa6);
}

.smtcmp-ws-monogram--gemini-grounding {
  background: var(--color-purple, #7c6ad6);
}

.smtcmp-ws-monogram--grok {
  background: color-mix(
    in srgb,
    var(--text-normal) 70%,
    var(--background-primary)
  );
}

.smtcmp-ws-monogram--zhipu {
  background: var(--color-red, #c8553d);
}

.smtcmp-ws-provider-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.smtcmp-ws-provider-name {
  color: var(--text-normal);
  font-size: var(--font-ui-small);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.smtcmp-ws-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: var(--font-ui-smaller);
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid transparent;
}

.smtcmp-ws-tag--default {
  background: color-mix(in srgb, var(--interactive-accent) 14%, transparent);
  color: var(--interactive-accent);
  border-color: color-mix(in srgb, var(--interactive-accent) 40%, transparent);
}

.smtcmp-ws-provider-actions {
  display: inline-flex;
  gap: 2px;
  opacity: 0.35;
  transition: opacity 140ms ease;
}

.smtcmp-ws-provider-row:hover .smtcmp-ws-provider-actions,
.smtcmp-ws-provider-row:focus-within .smtcmp-ws-provider-actions {
  opacity: 1;
}

.smtcmp-ws-icon-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: none !important;
  transition:
    background-color 120ms ease,
    color 120ms ease;
}

.smtcmp-ws-icon-btn:hover:not(:disabled) {
  background: var(--background-modifier-hover) !important;
  background-color: var(--background-modifier-hover) !important;
  color: var(--text-normal);
}

.smtcmp-ws-empty {
  border: 1px dashed var(--background-modifier-border);
  border-radius: var(--radius-m);
  padding: 20px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
}

/* Common settings field rows */

.smtcmp-ws-field-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 12px 0;
}

.smtcmp-ws-field-row + .smtcmp-ws-field-row {
  border-top: 1px solid
    color-mix(in srgb, var(--background-modifier-border) 70%, transparent);
}

.smtcmp-ws-field-label {
  color: var(--text-normal);
  font-size: var(--font-ui-small);
  font-weight: 500;
}

.smtcmp-ws-field-hint {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
  line-height: 1.5;
}

.smtcmp-ws-number {
  position: relative;
  width: 140px;
}

.smtcmp-ws-number input {
  width: 100%;
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-s);
  padding: 7px 44px 7px 10px;
  font-size: var(--font-ui-small);
  font-family: var(--font-monospace);
  color: var(--text-normal);
  text-align: right;
  background: var(--background-primary);
  outline: none;
  transition: border-color 140ms ease;
}

.smtcmp-ws-number input:focus,
.smtcmp-ws-number input:focus-visible {
  border-color: var(--background-modifier-border);
  box-shadow: none;
  outline: none;
}

.smtcmp-ws-number input::-webkit-inner-spin-button,
.smtcmp-ws-number input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.smtcmp-ws-number-unit {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-ui-smaller);
  color: var(--text-faint);
  font-family: var(--font-monospace);
  pointer-events: none;
}

.smtcmp-ws-info {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--background-secondary);
  border: 1px solid
    color-mix(in srgb, var(--background-modifier-border) 70%, transparent);
  border-radius: var(--radius-s);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  line-height: 1.55;
}

.smtcmp-ws-info-icon {
  flex-shrink: 0;
  color: var(--text-faint);
  margin-top: 1px;
}

.smtcmp-ws-footnote {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid
    color-mix(in srgb, var(--background-modifier-border) 70%, transparent);
  color: var(--text-faint);
  font-size: 11.5px;
}

/* Provider edit/new modal — label centered (no description rows here) */

.smtcmp-ws-edit-form .setting-item {
  align-items: center;
  padding-top: var(--size-4-2) !important;
  padding-bottom: var(--size-4-2) !important;
}

.smtcmp-ws-edit-form .setting-item .setting-item-description {
  margin-top: 6px;
}

.smtcmp-ws-system-prompt-textarea {
  min-height: 140px !important;
  max-height: 360px;
  height: var(--smtcmp-textarea-auto-height, 140px);
  overflow-y: var(--smtcmp-textarea-auto-overflow-y, auto);
}

/*
 * yolo-popover surface classes —— 项目所有弹窗 / 下拉的视觉地基。
 * 改这块代码 / 写新弹窗前，请通读以下约定（历史曾两次踩坑）。
 *
 * ─────────────────────────────────────────────
 * 1. consumer 必须用抽象组件，不要自己组 Portal + Content
 * ─────────────────────────────────────────────
 * 禁止在调用方写 `DropdownMenu.Portal + DropdownMenu.Content + className=...` 的
 * 组合。统一用 src/components/common/popover/ 下的 <YoloDropdownContent> /
 * <YoloPopoverContent>，所有视觉 variant 与尺寸通过 props 显式声明。
 * 参考迁移：ModelSelect.tsx、ReasoningSelect.tsx、ChatListDropdown.tsx。
 *
 * ─────────────────────────────────────────────
 * 2. 视觉 vs 尺寸：共用 class 只管视觉表面
 * ─────────────────────────────────────────────
 * 本文件里的 .yolo-popover-surface* class 只允许定义：
 *   background / border / box-shadow / animation / overflow / z-index
 * 严禁出现：
 *   min-width / max-width / max-height / width / margin
 * 尺寸是 consumer 的责任 —— 通过 minWidth/maxWidth/maxHeight props 传入，
 * 或一次性需求自带 `yolo-popover-<purpose>` class（例如聊天历史的 -64px 对齐）。
 * 违反这条会跨组件污染（历史踩坑详见 docs/plans/parsed-wiggling-shore.md）。
 *
 * ─────────────────────────────────────────────
 * 3. 变体规则按文件归属，禁止跨文件覆盖
 * ─────────────────────────────────────────────
 *   --default 变体的样式      → src/styles/chat/popover.css
 *   --smart-space 变体的样式  → src/styles/panels/smart-space.css
 * 不要在 smart-space.css 里写 `.yolo-popover-surface--default ...`，反之亦然。
 * 同一选择器跨文件出现时胜负只剩源码顺序，是最隐蔽的"屎山"来源。
 * 真正跨变体共享的样式（如 [data-state='checked']）写无前缀版本，
 * 但必须在注释里写明"有意跨变体共享"。
 *
 * ─────────────────────────────────────────────
 * 4. 慎用裸标签选择器
 * ─────────────────────────────────────────────
 * 避免 `.yolo-popover-surface ul / li / button` 这种命中所有后代标签的写法 ——
 * 等同于隐式全局副作用，未来任何弹窗内出现 ul/li 都会被牵连。要写就用 class 限定。
 *
 * ─────────────────────────────────────────────
 * 5. 新增弹窗 checklist
 * ─────────────────────────────────────────────
 *   [ ] consumer 用 <YoloDropdownContent> / <YoloPopoverContent>
 *   [ ] 显式传 minWidth / maxWidth / maxHeight，不依赖任何继承
 *   [ ] 非通用视觉需求自带 `yolo-popover-<purpose>` class，不复用别人的
 *   [ ] 新 class 一律 `yolo-` 前缀，不新增 `smtcmp-`
 *   [ ] 写 variant-scoped 规则时确认放在了对应变体的归属文件里
 */

.yolo-popover-surface {
  overflow: hidden;
}

/* Default variant — used by chat-input dropdowns, chat-history,
   AssistantSelector, ViewToggle. */

.yolo-popover-surface--default {
  z-index: 1000;
  background: var(--background-primary);
  border: 1px solid
    color-mix(in srgb, var(--background-modifier-border) 75%, transparent);
  border-radius: var(--radius-m);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.12),
    0 0 0 1px
      color-mix(in srgb, var(--background-modifier-border) 35%, transparent);
  animation: yolo-popover-fade-in 130ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* Smart-space variant — heavier shadow, blur backdrop, larger radius.
   Used by SmartSpace panel, QuickAsk panel, mention/slash menus. */

.yolo-popover-surface--smart-space {
  z-index: 10000;
  background: var(--background-primary);
  border: 1px solid
    color-mix(in srgb, var(--background-modifier-border) 65%, transparent);
  border-radius: 12px;
  box-shadow:
    0 0 0 3px
      color-mix(in srgb, var(--background-modifier-border) 20%, transparent),
    0 12px 32px -8px rgba(0, 0, 0, 0.2),
    0 4px 12px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(16px);
  animation: yolo-popover-smart-space-fade-in 0.25s
    cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes yolo-popover-fade-in {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes yolo-popover-smart-space-fade-in {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.smtcmp-chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--size-4-4);
  gap: var(--size-4-2);
  padding: var(--size-2-1) 0;
}

.smtcmp-chat-header--workspace {
  position: relative;
  z-index: 2;
  padding-bottom: var(--size-2-2);
  border-bottom: 1px solid
    color-mix(in srgb, var(--background-modifier-border) 78%, transparent);
}

.smtcmp-ghost-text {
  color: var(--text-muted);
  pointer-events: none;
  opacity: 0.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Chat input: outer wrapper to anchor settings button at top-right */

.smtcmp-chat-input-wrapper {
  position: relative;
  width: 100%;
}

.smtcmp-chat-input-settings-outer {
  position: absolute;
  top: 0px;
  right: -3px;
  left: auto !important; /* cancel any left: 0 from other rules */
  z-index: 3;
  background-color: transparent;
  border-radius: var(--radius-1);
  padding: var(--size-2-1);
  box-shadow: none;
}

.smtcmp-chat-input-settings-outer:focus-within {
  background-color: transparent;
  box-shadow: none;
}

.smtcmp-chat-header-right {
  display: flex;
  align-items: center;
  gap: var(--size-4-2);
}

.smtcmp-context-usage-ring {
  --smtcmp-context-usage-ring-color: var(--interactive-accent);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--smtcmp-context-usage-ring-color);
}

.smtcmp-chat-header-right > .smtcmp-context-usage-ring {
  margin-right: var(--size-2-1);
}

.smtcmp-context-usage-ring[data-tone='warning'] {
  --smtcmp-context-usage-ring-color: var(--text-warning);
}

.smtcmp-context-usage-ring[data-tone='danger'] {
  --smtcmp-context-usage-ring-color: var(--text-error);
}

.smtcmp-context-usage-ring__svg {
  width: 18px;
  height: 18px;
  transform: rotate(-90deg);
}

.smtcmp-context-usage-ring__track,
.smtcmp-context-usage-ring__progress {
  fill: none;
  stroke-width: 2;
}

.smtcmp-context-usage-ring__track {
  stroke: color-mix(
    in srgb,
    var(--background-modifier-border) 82%,
    transparent
  );
}

.smtcmp-context-usage-ring__progress {
  stroke: currentColor;
  stroke-linecap: round;
  transition:
    stroke-dashoffset 0.18s ease,
    stroke 0.18s ease;
}

.smtcmp-context-usage-ring__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.smtcmp-chat-header-title {
  font-size: var(--font-ui-medium);
  font-weight: var(--font-medium);
  margin: 0;
}

.smtcmp-chat-header-title-toggle {
  display: flex;
  align-items: center;
  gap: var(--size-2-1);
  padding: 0;
  background: transparent !important;
  border: none;
  border-radius: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}

.smtcmp-chat-header-title-toggle:focus-visible {
  outline: 1px solid var(--interactive-accent);
  outline-offset: 2px;
}

.smtcmp-chat-header-title-toggle:hover,
.smtcmp-chat-header-title-toggle:focus,
.smtcmp-chat-header-title-toggle:active {
  background: transparent;
  box-shadow: none;
}

.smtcmp-chat-header-title-toggle .smtcmp-chat-header-title {
  margin: 0;
}

.smtcmp-chat-header-title-icon {
  height: 14px;
  width: 14px;
  color: var(--text-muted);
  transition: color 0.15s ease;
}

.smtcmp-chat-header-title-toggle:hover .smtcmp-chat-header-title-icon {
  color: var(--text-normal);
}

.smtcmp-chat-header-buttons {
  display: flex;
  gap: var(--size-2-1);

  svg {
    height: var(--icon-l);
    width: var(--icon-l);
    stroke-width: var(--icon-stroke);
  }
}

.smtcmp-markdown {
  line-height: var(--line-height-normal);
  font-size: var(--font-ui-small);

  h1 {
    font-size: var(--font-ui-large);
  }

  h2 {
    font-size: var(--font-ui-medium);
  }

  h3 {
    font-size: var(--font-ui-small);
  }

  h4 {
    font-size: var(--font-ui-smaller);
  }

  h5 {
    font-size: var(--font-ui-smallest);
  }

  h6 {
    font-size: var(--font-ui-smallest);
  }

  p {
    font-size: var(--font-ui-small);
  }

  ul {
    font-size: var(--font-ui-small);
    padding-left: var(--size-4-4);
  }

  ol {
    font-size: var(--font-ui-small);
    padding-left: var(--size-4-4);
  }

  li {
    font-size: var(--font-ui-small);
  }

  blockquote {
    font-size: var(--font-ui-small);
    font-style: var(--blockquote-style);
    background-color: var(--blockquote-background-color);
    margin: 0;
    padding-left: var(--size-4-2);
    border-left: var(--blockquote-border-thickness) solid
      var(--blockquote-border-color);
  }

  code {
    font-size: var(--font-ui-small);
    border-radius: var(--code-radius);
    padding: 0.1em 0.25em;
    color: var(--code-normal);
    font-size: var(--code-size);
    background-color: var(--code-background);
    vertical-align: baseline;
  }

  table {
    font-size: var(--font-ui-small);
  }

  thead {
    font-size: var(--font-ui-small);
  }

  tbody {
    font-size: var(--font-ui-small);
  }

  tr {
    font-size: var(--font-ui-small);
  }

  td {
    font-size: var(--font-ui-small);
  }

  th {
    font-size: var(--font-ui-small);
  }
}

.smtcmp-chat-container {
  display: flex;
  position: relative;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.smtcmp-chat-container--sidebar {
  --smtcmp-chat-sidebar-inline-padding: calc(var(--size-4-6) / 2);
}

.smtcmp-chat-container--centered {
  --smtcmp-chat-content-max-width: min(720px, calc(100% - var(--size-4-6)));
  --smtcmp-chat-typeahead-max-width: 400px;
  --smtcmp-chat-host-inline-padding: var(--size-4-3);
}

.smtcmp-chat-container--sidebar > .smtcmp-chat-composer-wrapper,
.smtcmp-chat-container--sidebar > .smtcmp-chat-footer,
.smtcmp-chat-container--sidebar > .smtcmp-chat-user-input-files,
.smtcmp-chat-container--sidebar > .smtcmp-chat-input-wrapper {
  box-sizing: border-box;
  padding-inline: var(--smtcmp-chat-sidebar-inline-padding);
}

.smtcmp-chat-container--sidebar
  .smtcmp-chat-messages
  .smtcmp-chat-timeline-row {
  margin-inline: var(--smtcmp-chat-sidebar-inline-padding);
}

.smtcmp-chat-container--sidebar > .smtcmp-chat-messages {
  margin-inline-end: calc(var(--smtcmp-chat-sidebar-inline-padding) * -1);
}

.smtcmp-chat-container--sidebar > .smtcmp-chat-conversation-surface {
  margin-inline-end: calc(var(--smtcmp-chat-sidebar-inline-padding) * -1);
}

.smtcmp-chat-container--centered > .smtcmp-chat-footer,
.smtcmp-chat-container--centered > .smtcmp-chat-user-input-files,
.smtcmp-chat-container--centered > .smtcmp-chat-input-wrapper {
  width: min(100%, var(--smtcmp-chat-content-max-width));
  margin-left: auto;
  margin-right: auto;
}

.smtcmp-chat-container--centered
  .smtcmp-chat-messages
  .smtcmp-chat-timeline-row {
  width: min(100%, var(--smtcmp-chat-content-max-width));
  margin-left: auto;
  margin-right: auto;
}

.smtcmp-chat-container--centered > .smtcmp-chat-messages {
  margin-inline: calc(var(--smtcmp-chat-host-inline-padding) * -1);
}

.smtcmp-chat-container--centered > .smtcmp-chat-conversation-surface {
  margin-inline: calc(var(--smtcmp-chat-host-inline-padding) * -1);
}

.smtcmp-chat-container--workspace-wide-header {
  --smtcmp-chat-workspace-header-top: var(--size-2-2);
  --smtcmp-chat-workspace-header-side: var(--size-4-3);
  --smtcmp-chat-workspace-header-gap: var(--size-4-4);
  --smtcmp-chat-workspace-header-height: 0px;
}

.smtcmp-chat-container--workspace-wide-header > .smtcmp-chat-header--workspace {
  position: absolute;
  top: var(--smtcmp-chat-workspace-header-top);
  left: var(--smtcmp-chat-workspace-header-side);
  right: var(--smtcmp-chat-workspace-header-side);
  margin-bottom: 0;
  padding: 0;
  border-bottom: none;
  background: transparent;
  pointer-events: none;
}

.smtcmp-chat-container--workspace-wide-header
  > .smtcmp-chat-header--workspace
  .smtcmp-view-toggle,
.smtcmp-chat-container--workspace-wide-header
  > .smtcmp-chat-header--workspace
  .smtcmp-chat-header-right {
  pointer-events: auto;
}

.smtcmp-chat-container--workspace-wide-header
  > .smtcmp-chat-header--workspace
  .smtcmp-chat-header-right {
  background: color-mix(in srgb, var(--background-primary) 92%, transparent);
  border: 1px solid
    color-mix(in srgb, var(--background-modifier-border) 82%, transparent);
  box-shadow:
    0 10px 28px
      color-mix(in srgb, var(--background-modifier-box-shadow) 10%, transparent),
    0 1px 0 color-mix(in srgb, white 10%, transparent) inset;
  backdrop-filter: blur(12px);
}

.smtcmp-chat-container--workspace-wide-header
  > .smtcmp-chat-header--workspace
  .smtcmp-view-toggle {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.smtcmp-chat-container--workspace-wide-header
  > .smtcmp-chat-header--workspace
  .smtcmp-chat-header-right {
  padding: 6px 10px;
  border-radius: 999px;
}

.smtcmp-chat-container--workspace-wide-header
  > .smtcmp-chat-header--workspace
  .smtcmp-chat-header-buttons {
  padding-left: var(--size-2-1);
  margin-left: var(--size-2-1);
  border-left: 1px solid
    color-mix(in srgb, var(--background-modifier-border) 72%, transparent);
}

.smtcmp-chat-container--workspace-wide-header > .smtcmp-chat-messages {
  padding-top: calc(
    var(--smtcmp-chat-workspace-header-top) +
      var(--smtcmp-chat-workspace-header-height) +
      var(--smtcmp-chat-workspace-header-gap)
  );
}

.smtcmp-chat-container--workspace-wide-header > .smtcmp-chat-composer-wrapper {
  padding-top: calc(
    var(--smtcmp-chat-workspace-header-top) +
      var(--smtcmp-chat-workspace-header-height) +
      var(--smtcmp-chat-workspace-header-gap)
  );
}

.smtcmp-chat-container--workspace-wide-header > .smtcmp-chat-messages,
.smtcmp-chat-container--workspace-wide-header > .smtcmp-chat-composer-wrapper,
.smtcmp-chat-container--workspace-wide-header > .smtcmp-chat-footer,
.smtcmp-chat-container--workspace-wide-header > .smtcmp-chat-user-input-files,
.smtcmp-chat-container--workspace-wide-header > .smtcmp-chat-input-wrapper {
  position: relative;
  z-index: 1;
}

.smtcmp-chat-footer {
  position: relative;
}

.smtcmp-chat-floating-actions {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
  pointer-events: none;
  z-index: 3;
}

.smtcmp-stop-gen-btn,
.smtcmp-chat-scroll-to-bottom-button {
  pointer-events: auto;
}

.smtcmp-stop-gen-btn {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, calc(-100% - 12px));
  z-index: 2;
  width: max-content;
  max-width: calc(100% - var(--size-4-6));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-4-1);
}

.smtcmp-sidebar-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.smtcmp-sidebar-panels {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
}

.smtcmp-sidebar-pane {
  display: none;
  height: 100%;
  min-height: 0;
  width: 100%;
  flex: 1 1 auto;
  flex-direction: column;
}

.smtcmp-sidebar-pane.is-active {
  display: flex;
  width: 100%;
  flex: 1 1 auto;
  flex-direction: column;
}

.smtcmp-chat-composer-wrapper {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.smtcmp-composer-container {
  display: flex;
  flex-direction: column;
  gap: var(--size-4-4);
  height: 100%;
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--size-4-3) var(--size-4-3) var(--size-4-2);
}

.smtcmp-composer-tabs {
  display: flex;
  gap: var(--size-2-2);
  padding: var(--size-2-2);
  border-radius: var(--radius-m);
  border: 1px solid var(--background-modifier-border);
  background: var(--background-secondary);
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--background-modifier-border) 40%, transparent);
  width: 100%;
  align-self: stretch;
  margin: 0 calc(var(--size-4-3) * -1);
  width: calc(100% + (var(--size-4-3) * 2));
  min-width: 0;
}

.smtcmp-composer-tab {
  flex: 1 1 0;
  border: 1px solid transparent;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text-muted);
  font-size: var(--font-ui-small);
  padding: 6px 8px;
  border-radius: var(--radius-s);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  box-shadow: none !important;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.smtcmp-composer-tab-label {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smtcmp-composer-tabs--glider {
  position: relative;
  overflow: visible;
  gap: 0;
  --smtcmp-tab-count: 3;
  --smtcmp-tab-index: 0;
  --smtcmp-tab-padding: var(--size-2-2);
}

.smtcmp-composer-tabs--glider .smtcmp-composer-tab {
  position: relative;
  z-index: 2;
}

.smtcmp-composer-tabs--glider .smtcmp-composer-tab.is-active {
  border-color: transparent;
  box-shadow: none;
}

.smtcmp-composer-tabs-glider {
  position: absolute;
  top: var(--smtcmp-tab-padding);
  left: var(--smtcmp-tab-padding);
  width: calc(
    (100% - (var(--smtcmp-tab-padding) * 2)) / var(--smtcmp-tab-count)
  );
  height: calc(100% - (var(--smtcmp-tab-padding) * 2));
  background: transparent;
  border: 2px solid var(--h1-color, var(--interactive-accent));
  border-radius: var(--radius-s);
  box-shadow: 0 2px 10px
    color-mix(in srgb, var(--interactive-accent) 18%, transparent);
  transform: translateX(calc(100% * var(--smtcmp-tab-index)));
  transition: transform 0.36s cubic-bezier(0.4, 1.2, 0.4, 1);
  pointer-events: none;
  z-index: 1;
}

.smtcmp-composer-tab:hover {
  color: var(--text-normal);
  background: transparent !important;
}

.smtcmp-composer-tab.is-active {
  color: var(--text-normal);
  background: transparent !important;
  border: 2px solid var(--h1-color, var(--interactive-accent));
  box-shadow: 0 2px 10px
    color-mix(in srgb, var(--interactive-accent) 18%, transparent);
}

.smtcmp-composer-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--size-4-5);
  padding: 0;
  margin: 0 calc(var(--size-4-3) * -1);
  width: calc(100% + (var(--size-4-3) * 2));
  align-self: stretch;
}

.smtcmp-composer-section {
  display: flex;
  flex-direction: column;
  gap: var(--size-4-2);
  padding: var(--size-4-4);
  background: transparent !important;
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-l);
  box-shadow: none;
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  width: 100%;
}

.smtcmp-composer-heading {
  display: flex;
  flex-direction: column;
  gap: var(--size-2-2);
  margin-bottom: var(--size-2-4);
  position: relative;
  padding-bottom: 0;
}

.smtcmp-composer-heading-title {
  color: var(--text-normal);
  font-size: var(--font-ui-medium);
  line-height: var(--line-height-tight);
  font-weight: var(--font-semibold);
  display: flex;
  align-items: center;
  gap: var(--size-2-2);
}

.smtcmp-composer-heading-title::before {
  content: '';
  width: 4px;
  height: 18px;
  background: var(--h1-color, var(--text-accent));
  border-radius: 2px;
  flex-shrink: 0;
}

.smtcmp-composer-heading-desc {
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
  line-height: var(--line-height-tight);
}

.smtcmp-composer-option {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--size-4-3);
  padding: var(--size-4-3);
  border-radius: var(--radius-m);
  background: transparent;
  border: 1px solid var(--background-modifier-border);
  transition: all 0.2s ease;
  position: relative;
}

.smtcmp-composer-option:hover {
  border-color: var(--background-modifier-border-hover);
  box-shadow: none;
  transform: translateY(-1px);
}

.smtcmp-composer-option--model {
  flex-wrap: wrap;
  gap: var(--size-4-3);
}

.smtcmp-composer-option--table {
  align-items: stretch;
}

.smtcmp-composer-option-info {
  display: flex;
  flex-direction: column;
  gap: var(--size-2-1);
  flex: 1 1 auto;
  min-width: 0;
}

.smtcmp-composer-option-title {
  color: var(--text-normal);
  font-weight: var(--font-semibold);
  font-size: var(--font-ui-small);
  margin-bottom: var(--size-2-1);
}

.smtcmp-composer-option-desc {
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
  line-height: var(--line-height-tight);
}

.smtcmp-composer-option-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: var(--size-2-1);
  min-width: auto;
  margin-left: auto;
}

.smtcmp-composer-option-control--fluid {
  flex: 1 1 auto;
  justify-content: flex-start;
  min-width: 0;
  max-width: 100%;
}

.smtcmp-composer-option-control--stack {
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-left: 0;
}

.smtcmp-composer-option-control--full {
  width: 100%;
  justify-content: flex-start;
  margin-left: 0;
}

.smtcmp-composer-option-control--full textarea {
  width: 100%;
  min-height: 120px;
}

.smtcmp-composer-option-control--full .smtcmp-textarea-container,
.smtcmp-composer-option-control--full .smtcmp-textarea-container textarea {
  width: 100% !important;
}

.smtcmp-composer-option-control select {
  width: 100%;
  max-width: 100%;
}

/* Simple select (custom dropdown for Sparkle sidebar) */

.smtcmp-simple-select__trigger {
  width: 100%;
  min-height: 30px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-m);
  border: 1px solid var(--background-modifier-border);
  background: var(--background-secondary);
  color: var(--text-normal);
  font-size: var(--font-ui-smaller);
  font-weight: var(--font-medium);
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    color 0.16s ease;
  box-shadow: none;
  overflow: hidden;
}

.smtcmp-simple-select__trigger:hover,
.smtcmp-simple-select__trigger:focus,
.smtcmp-simple-select__trigger:focus-visible {
  border-color: var(--background-modifier-border);
  background: var(--background-modifier-hover);
  color: var(--text-normal);
  outline: none;
}

.smtcmp-simple-select__trigger[data-state='open'] {
  border-color: var(--background-modifier-border);
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}

.smtcmp-simple-select__trigger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

.smtcmp-simple-select__label {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smtcmp-simple-select__icon {
  display: flex;
  align-items: center;
  color: var(--text-muted);
}

.smtcmp-simple-select__content {
  z-index: 10000;
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
  padding: 4px;
  width: var(--radix-dropdown-menu-trigger-width);
  min-width: max(var(--radix-dropdown-menu-trigger-width, 0px), 180px);
  max-width: min(320px, calc(100vw - 24px));
  overflow: hidden;
  animation: smtcmp-simple-select-pop 0.16s cubic-bezier(0.2, 0, 0, 1);
}

@keyframes smtcmp-simple-select-pop {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.smtcmp-simple-select__list {
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.smtcmp-simple-select__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 6px 8px;
  border-radius: var(--radius-s);
  color: var(--text-normal);
  font-size: var(--font-ui-smaller);
  cursor: pointer;
  outline: none;
}

.smtcmp-simple-select__group-label {
  display: block;
  margin: 0;
  padding: 8px 8px 6px 8px;
  color: color-mix(in srgb, var(--text-muted) 85%, transparent);
  font-size: 10px;
  font-weight: var(--font-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  user-select: none;
  opacity: 0.8;
}

.smtcmp-simple-select__group-separator {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 4px,
    color-mix(in srgb, var(--background-modifier-border) 50%, transparent) 16px,
    color-mix(in srgb, var(--background-modifier-border) 50%, transparent)
      calc(100% - 16px),
    transparent calc(100% - 4px)
  );
  margin: 6px 0;
}

.smtcmp-simple-select__item[data-highlighted] {
  background: var(--background-modifier-hover);
}

.smtcmp-simple-select__item[data-state='checked'] {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
  font-weight: var(--font-semibold);
  box-shadow: inset 0 0 0 1px var(--background-modifier-border);
}

.smtcmp-simple-select__item-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.smtcmp-simple-select__item-label {
  font-weight: var(--font-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.smtcmp-simple-select__item-desc {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.smtcmp-simple-select__item-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--interactive-accent);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.smtcmp-simple-select__item[data-state='checked']
  .smtcmp-simple-select__item-indicator {
  opacity: 1;
}

.smtcmp-composer-option--model .smtcmp-composer-option-control {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 0;
  justify-content: flex-start;
}

.smtcmp-composer-option--model .smtcmp-composer-option-control > div,
.smtcmp-composer-option--model .smtcmp-composer-option-control select {
  width: 100%;
  max-width: 100%;
}

.smtcmp-composer-option-control .smtcmp-display-contents,
.smtcmp-composer-option-control .smtcmp-checkbox-container {
  margin-left: auto;
}

.smtcmp-composer-option-control .checkbox-component,
.smtcmp-composer-option-control .smtcmp-checkbox-container,
.smtcmp-composer-option-control .setting-item-control {
  margin-left: auto;
}

.smtcmp-composer-context-picker {
  margin-top: var(--size-4-2);
}

.smtcmp-composer-hint {
  margin-top: var(--size-4-2);
  padding: var(--size-2-3) var(--size-4-2);
  border-radius: var(--radius-m);
  background: var(--background-secondary);
  border: 1px dashed var(--background-modifier-border);
  color: var(--text-faint);
  font-size: var(--font-ui-smaller);
}

.smtcmp-composer-container .setting-item {
  border-top: none;
}

/* 特殊样式：模型选择区域 */

.smtcmp-composer-section--primary {
  background: transparent !important;
  border: 2px solid var(--interactive-accent);
  box-shadow: none;
}

.smtcmp-composer-section--primary .smtcmp-composer-heading-title::before {
  background: linear-gradient(
    135deg,
    var(--interactive-accent) 0%,
    var(--interactive-accent-hover) 100%
  );
  width: 6px;
  height: 20px;
}

/* 功能开关区域 */

.smtcmp-composer-section--toggles .smtcmp-composer-option {
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border-hover);
  border-radius: var(--radius-s);
  padding: var(--size-4-2) var(--size-4-3);
}

.smtcmp-composer-section--toggles .smtcmp-composer-option:hover {
  background: var(--background-modifier-hover);
  border-color: var(--background-modifier-border-hover);
}

/* 高级设置区域 */

.smtcmp-composer-section--advanced {
  background: transparent !important;
  border-style: dashed;
  opacity: 0.9;
}

/* 让高级设置标题样式与默认卡片标题完全一致 */

.smtcmp-composer-section--advanced .smtcmp-composer-heading-title::before {
  background: var(--h1-color, var(--text-accent));
  width: 4px;
  height: 18px;
}

/* 与 ObsidianToggle 组件配套的外层容器 hook：
   唯一作用是给 `.smtcmp-composer-option-control` 里右对齐规则提供命中目标
   （见本文件 949 行附近的 margin-left: auto）。
   以前这里有一整段覆写，把原本 opacity:0 的 <input> 强行画成紫色轨道 + 自定义白点，
   导致和 Obsidian 原生 .checkbox-container::after 叠在一起出现白点凸出/偏下，
   已移除。switch 外观完全沿用 Obsidian 原生实现。 */

.smtcmp-checkbox-container {
  position: relative;
  display: inline-flex;
  gap: var(--size-2-2);
}

/* 优先参考目录样式优化 */

.smtcmp-composer-hint {
  margin-top: var(--size-4-3);
  padding: var(--size-4-3);
  border-radius: var(--radius-m);
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
  position: relative;
  overflow: hidden;
}

.smtcmp-composer-hint::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--interactive-accent) 0%,
    var(--interactive-accent-hover) 100%
  );
}

.smtcmp-chat-conversation-surface {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow-y: hidden;
}

.smtcmp-chat-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  user-select: text;
  display: flex;
  flex-direction: column;
  gap: var(--size-4-1);
  padding-block: var(--size-4-1);
  padding-bottom: calc(var(--size-4-1) + 56px);
  margin-block: calc(var(--size-4-1) * -1);

  .smtcmp-chat-messages-user {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-end;
  }

  .smtcmp-chat-messages-assistant {
    display: flex;
    flex-direction: column;
  }

  .smtcmp-assistant-tool-message-group {
    padding-bottom: var(--size-4-2);
    display: flex;
    flex-direction: column;
    gap: var(--size-4-1);
  }
}

.smtcmp-chat-timeline-row {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  min-height: 0;
}

.smtcmp-chat-compaction-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: var(--size-4-3) 0 var(--size-4-2);
  color: var(--text-muted);
}

.smtcmp-chat-compaction-pending {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: var(--size-4-3) 0 var(--size-4-2);
  animation: smtcmp-chat-compaction-pending-enter 220ms
    cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.smtcmp-chat-compaction-pending__loader {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
}

.smtcmp-chat-compaction-pending__loader .smtcmp-thinking-loader {
  gap: 8px;
}

.smtcmp-chat-compaction-pending__loader .smtcmp-thinking-icon {
  width: 16px;
  height: 16px;
}

.smtcmp-chat-compaction-pending__loader .smtcmp-thinking-icon-svg {
  width: 14px;
  height: 14px;
}

.smtcmp-chat-compaction-pending__loader .smtcmp-thinking-text {
  font-size: var(--font-ui-small);
  font-weight: var(--font-medium);
  line-height: 1.35;
}

.smtcmp-chat-compaction-pending__description {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  line-height: 1.45;
  text-align: center;
}

.smtcmp-chat-compaction-divider.is-entering {
  animation: smtcmp-chat-compaction-divider-enter 220ms
    cubic-bezier(0.2, 0.8, 0.2, 1) both;

  .smtcmp-chat-compaction-divider__line {
    transform-origin: center;
    animation: smtcmp-chat-compaction-divider-line-enter 220ms
      cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
}

.smtcmp-chat-compaction-divider__title {
  font-size: var(--font-ui-small);
  font-weight: var(--font-medium);
  color: var(--text-normal);
  line-height: 1.35;
  margin-bottom: 8px;
  text-align: center;
}

.smtcmp-chat-compaction-divider__line {
  width: 100%;
  height: 1px;
  background: color-mix(
    in srgb,
    var(--background-modifier-border) 92%,
    transparent
  );
}

.smtcmp-chat-compaction-divider__content {
  text-align: center;
  margin-top: 8px;
  max-width: min(100%, 520px);
}

.smtcmp-chat-compaction-divider__description {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.45;
}

@keyframes smtcmp-chat-compaction-divider-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes smtcmp-chat-compaction-pending-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes smtcmp-chat-compaction-divider-line-enter {
  from {
    opacity: 0.4;
    transform: scaleX(0.92);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

.smtcmp-chat-bottom-anchor {
  height: 1px;
  margin-top: 1px;
  margin-bottom: 8px;
  pointer-events: none;
}

.smtcmp-chat-scroll-to-bottom-button {
  position: absolute;
  right: 8px;
  top: 0;
  transform: translateY(calc(-100% - 12px));
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid
    color-mix(in srgb, var(--interactive-accent) 22%, transparent);
  background: color-mix(in srgb, var(--background-primary) 90%, transparent);
  color: var(--text-normal);
  box-shadow: 0 10px 24px
    color-mix(in srgb, var(--background-modifier-box-shadow) 18%, transparent);
  backdrop-filter: blur(10px);
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.smtcmp-chat-scroll-to-bottom-button:hover {
  transform: translateY(calc(-100% - 13px));
  border-color: color-mix(in srgb, var(--interactive-accent) 40%, transparent);
  background: color-mix(in srgb, var(--background-primary) 82%, transparent);
}

.smtcmp-chat-scroll-to-bottom-button svg {
  color: var(--interactive-accent);
}

.smtcmp-assistant-message-selectable {
  position: relative;
}

.smtcmp-assistant-selection-quote-button {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-ui-small);
  padding: 6px 10px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--background-primary) 92%, transparent);
  color: var(--text-normal);
  box-shadow: 0 10px 24px
    color-mix(in srgb, var(--background-modifier-box-shadow) 16%, transparent);
  backdrop-filter: blur(8px);
  z-index: 8;
  opacity: 0;
  transform: translateY(-4px) scale(0.96);
  transition:
    opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.15s ease,
    background 0.15s ease;
}

.smtcmp-assistant-selection-quote-button.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.smtcmp-assistant-selection-quote-button:hover,
.smtcmp-assistant-selection-quote-button:focus,
.smtcmp-assistant-selection-quote-button:focus-visible {
  border-color: var(--background-modifier-border-hover);
  background: color-mix(
    in srgb,
    var(--background-primary-alt) 94%,
    transparent
  );
  transform: translateY(0) scale(1.03);
}

.smtcmp-chat-empty-state {
  margin: auto;
  width: min(560px, calc(100% - var(--size-4-4)));
  padding: var(--size-4-4);
  border-radius: var(--radius-l);
  background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--background-secondary) 90%, transparent) 0%,
    color-mix(in srgb, var(--background-primary-alt) 88%, transparent) 100%
  );
  box-shadow: 0 14px 34px
    color-mix(in srgb, var(--background-modifier-box-shadow) 12%, transparent);
  text-align: center;
}

.smtcmp-chat-empty-state-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--size-4-2);
  pointer-events: none;
}

.smtcmp-chat-empty-state-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-height: 100%;
  width: 100%;
  overflow-y: auto;
  pointer-events: none;
}

.smtcmp-update-banner {
  pointer-events: auto;
  width: min(560px, calc(100% - var(--size-4-4)));
  margin: 0 auto var(--size-4-3);
  padding: var(--size-4-3);
  border-radius: var(--radius-l);
  background: color-mix(
    in srgb,
    var(--interactive-accent) 8%,
    var(--background-secondary)
  );
  border: 1px solid
    color-mix(in srgb, var(--interactive-accent) 22%, transparent);
  box-shadow: 0 8px 24px
    color-mix(in srgb, var(--background-modifier-box-shadow) 10%, transparent);
  text-align: left;
}

.smtcmp-update-banner-row {
  display: flex;
  align-items: flex-start;
  gap: var(--size-4-2);
}

.smtcmp-update-banner-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--interactive-accent);
  background: color-mix(in srgb, var(--interactive-accent) 14%, transparent);
}

.smtcmp-update-banner-body {
  flex: 1;
  min-width: 0;
}

.smtcmp-update-banner-title {
  font-size: var(--font-ui-medium);
  font-weight: var(--font-semibold);
  color: var(--text-normal);
  margin-bottom: var(--size-2-1);
}

.smtcmp-update-banner-meta {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  margin-bottom: var(--size-2-2);
}

.smtcmp-update-banner-notes {
  font-size: var(--font-ui-small);
  color: var(--text-muted);
  line-height: 1.45;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.smtcmp-update-banner-dismiss {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: var(--radius-s);
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
  appearance: none;
  color: var(--text-muted);
  cursor: var(--cursor);
}

.smtcmp-update-banner-dismiss:hover {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-normal);
}

.smtcmp-update-banner-dismiss:focus,
.smtcmp-update-banner-dismiss:focus-visible,
.smtcmp-update-banner-dismiss:active {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.smtcmp-update-banner-actions {
  margin-top: var(--size-4-2);
  display: flex;
  justify-content: flex-end;
  gap: var(--size-4-2);
}

/* Installation incomplete — same layout as update banner, red / error emphasis */

.smtcmp-installation-incomplete-banner {
  pointer-events: auto;
  width: min(560px, calc(100% - var(--size-4-4)));
  margin: 0 auto var(--size-4-3);
  padding: var(--size-4-3);
  border-radius: var(--radius-l);
  background: color-mix(
    in srgb,
    var(--text-error) 10%,
    var(--background-secondary)
  );
  border: 1px solid color-mix(in srgb, var(--text-error) 28%, transparent);
  box-shadow: 0 8px 24px
    color-mix(in srgb, var(--background-modifier-box-shadow) 10%, transparent);
  text-align: left;
}

.smtcmp-installation-incomplete-banner-row {
  display: flex;
  align-items: flex-start;
  gap: var(--size-4-2);
}

.smtcmp-installation-incomplete-banner-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-error);
  background: color-mix(in srgb, var(--text-error) 16%, transparent);
}

.smtcmp-installation-incomplete-banner-body {
  flex: 1;
  min-width: 0;
}

.smtcmp-installation-incomplete-banner-title {
  font-size: var(--font-ui-medium);
  font-weight: var(--font-semibold);
  color: var(--text-normal);
  margin-bottom: var(--size-2-1);
}

.smtcmp-installation-incomplete-banner-meta {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  margin-bottom: var(--size-2-2);
}

.smtcmp-installation-incomplete-banner-notes {
  font-size: var(--font-ui-small);
  color: var(--text-muted);
  line-height: 1.45;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.smtcmp-installation-incomplete-banner-dismiss {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: var(--radius-s);
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
  appearance: none;
  color: var(--text-muted);
  cursor: var(--cursor);
}

.smtcmp-installation-incomplete-banner-dismiss:hover {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-normal);
}

.smtcmp-installation-incomplete-banner-dismiss:focus,
.smtcmp-installation-incomplete-banner-dismiss:focus-visible,
.smtcmp-installation-incomplete-banner-dismiss:active {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.smtcmp-installation-incomplete-banner-actions {
  margin-top: var(--size-4-2);
  display: flex;
  justify-content: flex-end;
  gap: var(--size-4-2);
}

.smtcmp-installation-incomplete-banner-cta.mod-cta {
  background-color: color-mix(
    in srgb,
    var(--text-error) 92%,
    var(--background-primary)
  ) !important;
  background-image: none !important;
  color: var(--background-primary) !important;
  border: none !important;
  box-shadow: none !important;
}

.smtcmp-installation-incomplete-banner-cta.mod-cta:hover {
  background-color: color-mix(
    in srgb,
    var(--text-error) 100%,
    var(--background-primary)
  ) !important;
  background-image: none !important;
  color: var(--background-primary) !important;
}

.smtcmp-chat-empty-state-icon {
  width: 34px;
  height: 34px;
  margin: 0 auto var(--size-2-2);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--interactive-accent);
  background: color-mix(in srgb, var(--interactive-accent) 14%, transparent);
  animation: smtcmp-chat-empty-icon-in 220ms ease-out;
}

.smtcmp-chat-empty-state-icon[data-mode='chat'] {
  background: color-mix(in srgb, var(--interactive-accent) 12%, transparent);
}

.smtcmp-chat-empty-state-icon[data-mode='agent'] {
  background: color-mix(
    in srgb,
    var(--interactive-accent-hover) 14%,
    transparent
  );
}

@keyframes smtcmp-chat-empty-icon-in {
  from {
    opacity: 0;
    transform: translateY(3px) scale(0.88);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.smtcmp-chat-empty-state-title {
  font-size: var(--font-ui-large);
  font-weight: var(--font-semibold);
  color: var(--text-normal);
  margin-bottom: var(--size-2-2);
}

.smtcmp-chat-empty-state-description {
  font-size: var(--font-ui-medium);
  color: var(--text-muted);
  margin-bottom: var(--size-4-2);
}

.smtcmp-obsidian-textarea {
  -webkit-app-region: no-drag;
  background: var(--background-modifier-form-field);
  color: var(--text-normal);
  font-family: inherit;
  padding: 0;
  font-size: var(--font-ui-small);
  outline: none;
  min-height: 80px;
  max-height: 200px;
  overflow-y: auto;
  font-size: var(--font-ui-small);
  padding: var(--size-2-1);
}

@media (hover: hover) {
  .smtcmp-obsidian-textarea:hover {
    border-color: var(--background-modifier-border-hover);
    transition:
      box-shadow 0.15s ease-in-out,
      border 0.15s ease-in-out;
  }
}

.smtcmp-obsidian-textarea:active {
  border-color: var(--background-modifier-border-focus);
  transition:
    box-shadow 0.15s ease-in-out,
    border 0.15s ease-in-out;
}

/* .smtcmp-obsidian-textarea::placeholder {
  color: var(--text-faint);
} */

.smtcmp-obsidian-textarea {
  line-height: var(--line-height-tight);
}

.smtcmp-chat-user-input-container {
  position: relative;
  display: flex;
  flex-direction: column;
  -webkit-app-region: no-drag;
  background: var(--background-modifier-form-field);
  border: var(--input-border-width) solid var(--background-modifier-border);
  color: var(--text-normal);
  font-family: inherit;
  padding: calc(var(--size-2-3) + 1px);
  font-size: var(--font-ui-small);
  border-radius: var(--radius-s);
  outline: none;
  --smtcmp-mention-max-width: 240px;
  --smtcmp-mention-badge-max-width: 180px;

  &:focus-within,
  &:focus,
  &:focus-visible,
  &:active {
    box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
    transition: box-shadow 0.15s ease-in-out;
  }
}

.smtcmp-chat-user-input-container[data-resizable='true']
  .smtcmp-obsidian-textarea,
.smtcmp-chat-user-input-container[data-resizable='true']
  .smtcmp-content-editable {
  min-height: var(--smtcmp-chat-user-input-height, 80px);
  max-height: var(--smtcmp-chat-user-input-height, 80px);
  height: var(--smtcmp-chat-user-input-height, 80px);
}

.smtcmp-chat-user-input-container[data-resizable='true'] {
  cursor: text;
}

.smtcmp-chat-user-input-container[data-resize-hotspot-active='true'] {
  cursor: ns-resize;
}

.smtcmp-chat-user-input-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--size-2-2);
  width: 100%;
}

.smtcmp-chat-user-input-resize-hitbox {
  position: absolute;
  top: -6px;
  left: 0;
  right: 44px;
  height: 12px;
  cursor: ns-resize;
  z-index: 2;
}

.smtcmp-chat-user-input-wrapper--compact {
  max-width: 85%;
  align-self: flex-end;
  width: fit-content;
}

.smtcmp-chat-user-input-wrapper--compact .smtcmp-chat-user-input-container {
  --smtcmp-chat-user-bubble-bg: color-mix(
    in srgb,
    var(--interactive-accent) 18%,
    var(--background-primary)
  );
  --smtcmp-chat-user-bubble-border: color-mix(
    in srgb,
    var(--interactive-accent) 36%,
    transparent
  );
  background: var(--smtcmp-chat-user-bubble-bg);
  border-radius: var(--radius-l);
  border: 1px solid var(--smtcmp-chat-user-bubble-border);
  box-shadow: none;
  padding: var(--size-2-3) var(--size-4-2);
  transition:
    background 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
  cursor: pointer;
  gap: var(--size-2-2);
}

.smtcmp-chat-user-input-wrapper--compact
  .smtcmp-chat-user-input-container:hover {
  background: color-mix(
    in srgb,
    var(--interactive-accent) 24%,
    var(--background-primary)
  );
  border-color: color-mix(in srgb, var(--interactive-accent) 48%, transparent);
  box-shadow: none;
}

/* Disable focus effects in compact mode */

.smtcmp-chat-user-input-wrapper--compact
  .smtcmp-chat-user-input-container:focus-within,
.smtcmp-chat-user-input-wrapper--compact
  .smtcmp-chat-user-input-container:focus,
.smtcmp-chat-user-input-wrapper--compact
  .smtcmp-chat-user-input-container:focus-visible,
.smtcmp-chat-user-input-wrapper--compact
  .smtcmp-chat-user-input-container:active {
  box-shadow: none;
}

.smtcmp-chat-user-input-wrapper--compact .smtcmp-chat-user-input-files {
  padding-bottom: 0;
  gap: var(--size-2-2);
}

/* Only add bottom margin if there are mentionables */

.smtcmp-chat-user-input-wrapper--compact
  .smtcmp-chat-user-input-files:not(:empty) {
  margin-bottom: var(--size-2-2);
}

.smtcmp-chat-user-input-wrapper--compact .smtcmp-chat-user-input-editor {
  line-height: var(--line-height-normal);
  pointer-events: none;
  min-height: unset;
}

.smtcmp-chat-user-input-wrapper--compact .smtcmp-obsidian-textarea,
.smtcmp-chat-user-input-wrapper--compact .smtcmp-content-editable {
  min-height: unset;
  max-height: none;
  height: auto;
  padding: 0;
  overflow: visible;
  background: transparent;
}

.smtcmp-chat-user-input-wrapper--compact
  .smtcmp-lexical-content-editable-paragraph {
  margin: 0;
  line-height: var(--line-height-normal);
}

.smtcmp-chat-user-input-wrapper--compact .smtcmp-chat-user-input-placeholder {
  color: var(--text-muted);
  opacity: 0.7;
  font-size: var(--font-ui-smaller);
  position: static;
  padding: 0;
}

/* Hide delete button in badges within compact mode */

.smtcmp-chat-user-input-wrapper--compact
  .smtcmp-chat-user-input-file-badge-delete {
  display: none;
}

/* Make badges non-interactive in compact mode */

.smtcmp-chat-user-input-wrapper--compact .smtcmp-chat-user-input-file-badge {
  cursor: default;
  pointer-events: none;
}

.smtcmp-user-message-card {
  display: flex;
  flex-direction: column;
  width: fit-content;
  min-height: 0;
  height: auto;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  overflow: visible;
  white-space: normal;
  align-items: stretch;
  justify-content: flex-start;
  appearance: none;
}

.smtcmp-user-message-card:focus,
.smtcmp-user-message-card:focus-visible {
  outline: none;
}

.smtcmp-user-message-card .smtcmp-chat-user-input-container {
  width: fit-content;
}

.smtcmp-user-message-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-2-1);
}

.smtcmp-user-message-card__badges .smtcmp-chat-user-input-file-badge {
  pointer-events: none;
}

.smtcmp-user-message-card__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: inherit;
  line-height: var(--line-height-normal);
  white-space: pre-wrap;
  word-break: break-word;
}

.smtcmp-user-message-card__line {
  min-height: 1.4em;
}

.smtcmp-user-message-card__placeholder {
  color: var(--text-muted);
}

.smtcmp-chat-user-input-tools-row {
  display: flex;
  align-items: center;
  gap: var(--size-4-1);
}

.smtcmp-chat-user-input-files {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: var(--size-4-1);
  flex-wrap: wrap;
  padding-bottom: var(--size-4-1);
}

.smtcmp-chat-user-input-editor {
  position: relative;
}

.smtcmp-chat-user-input-placeholder {
  position: absolute;
  left: var(--size-2-1);
  right: var(--size-2-1);
  top: calc(var(--size-2-1) + 1.4px);
  color: color-mix(in srgb, var(--text-muted) 78%, transparent);
  pointer-events: none;
  font-size: var(--font-ui-small);

  .smtcmp-placeholder-trigger {
    pointer-events: auto;
    display: inline-block;
    min-width: 1.4em;
    text-align: center;
    padding: 0 3px;
    border-radius: 3px;
    background-color: var(--tag-background);
    color: var(--tag-color);
    cursor: pointer;
    transition: opacity 80ms ease;

    &:hover {
      opacity: 0.75;
    }
  }
}

.smtcmp-chat-user-input-controls {
  display: flex;
  flex-direction: row;
  gap: var(--size-4-1);
  align-items: center;
  flex-wrap: nowrap;
  height: var(--size-4-4);

  .smtcmp-chat-user-input-controls__left {
    display: flex;
    align-items: center;
    gap: var(--size-4-3);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .smtcmp-chat-user-input-controls__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--size-4-2);
    flex: 0 1 auto;
    min-width: 0;
  }

  .smtcmp-chat-user-input-controls__model-select-container {
    flex: 1 1 180px;
    min-width: 0;
    overflow: hidden;
  }

  .smtcmp-chat-user-input-controls__buttons {
    flex-shrink: 0;
    display: flex;
    gap: var(--size-4-2);
    align-items: center;
  }
}

.smtcmp-chat-user-input-controls__left .smtcmp-chat-input-model-select {
  max-width: 160px;
  min-width: 0;
  flex-shrink: 1;
}

.smtcmp-chat-user-input-controls__left .smtcmp-reasoning-select {
  min-width: 72px;
  flex: 0 1 auto;
}

.smtcmp-chat-user-input-controls__left
  .smtcmp-chat-input-model-select__model-name {
  max-width: 120px;
}

.smtcmp-chat-user-input-controls__right .smtcmp-chat-user-input-submit-button {
  flex: 0 1 96px;
}

.smtcmp-chat-user-input-controls .smtcmp-chat-user-input-submit-button {
  display: flex;
  align-items: center;
  gap: var(--size-4-1);
  min-width: 0;
  font-size: var(--font-smallest);
  color: var(--text-muted);
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0 var(--size-2-1);
  cursor: pointer;
  transition: all 0.1s ease-in-out;

  &:hover {
    color: var(--text-normal);
  }

  .smtcmp-chat-user-input-submit-button-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
  }
}

.smtcmp-chat-user-input-submit-button-label {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smtcmp-chat-user-input-controls__left .smtcmp-chat-user-input-upload-button {
  width: var(--size-4-5);
  height: var(--size-4-5);
  padding: 0;
  gap: 0;
  border-radius: var(--radius-s);
  flex: 0 0 auto;
  justify-content: center;
  color: var(--text-muted);

  &:hover {
    color: var(--text-normal);
    background: var(--background-modifier-hover);
  }
}

.smtcmp-chat-input-model-select__label {
  min-width: 0;
  flex: 1 1 auto;
}

/* Circle submit button (ChatGPT style) */

.smtcmp-chat-user-input-submit-button-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--background-modifier-border);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.15s ease;
  flex-shrink: 0;

  &:hover {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    border-color: var(--interactive-accent);
  }
}

/* Chat Mode Select */

.smtcmp-chat-mode-select {
  flex-shrink: 0;
  gap: var(--size-4-1);
}

.smtcmp-chat-mode-select__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  margin-right: 2px;
}

.smtcmp-chat-mode-select__icon svg {
  width: 14px;
  height: 14px;
}

.smtcmp-chat-mode-select-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 10px !important;
}

.smtcmp-chat-mode-select-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  color: var(--text-muted);
}

.smtcmp-chat-mode-select-item__icon svg {
  width: 12px;
  height: 12px;
}

.smtcmp-chat-mode-select-item__content {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.smtcmp-chat-mode-select-item__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-normal);
}

.smtcmp-chat-mode-select-item__desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}

.smtcmp-chat-mode-select-item[data-state='checked']
  .smtcmp-chat-mode-select-item__icon,
.smtcmp-chat-mode-select-item[data-highlighted]
  .smtcmp-chat-mode-select-item__icon {
  color: var(--text-normal);
}

/* Reasoning Select */

.smtcmp-reasoning-select {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  flex-shrink: 1;
  gap: var(--size-4-1);
}

.smtcmp-reasoning-select .smtcmp-chat-input-model-select__label {
  flex: 0 1 auto;
  text-align: center;
}

@media (max-width: 520px) {
  .smtcmp-chat-user-input-controls__right
    .smtcmp-chat-user-input-submit-button {
    flex-basis: auto;
    padding-inline: 0;
  }

  .smtcmp-chat-user-input-controls__right
    .smtcmp-chat-user-input-submit-button-label {
    display: none;
  }

  .smtcmp-chat-user-input-controls__left .smtcmp-reasoning-select {
    flex-basis: auto;
  }
}

.smtcmp-reasoning-select__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  margin-right: 2px;
}

.smtcmp-reasoning-select__icon svg {
  width: 14px;
  height: 14px;
}

.smtcmp-reasoning-popover {
  padding: 12px 14px;
  /* Sizing is declared via <YoloDropdownContent> props in ReasoningSelect.tsx. */
}

.smtcmp-reasoning-popover__header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--text-normal);
}

.smtcmp-reasoning-popover__header-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.smtcmp-reasoning-popover__header-title {
  font-size: 12.5px;
  font-weight: 600;
}

.smtcmp-reasoning-popover__header-current {
  font-size: 11.5px;
  color: var(--text-muted);
  font-family: var(--font-monospace);
}

/* Pill variant of the shared segmented control: solid white slider with soft
   accent ring, paired with an absolutely positioned glider for the slide. */

.smtcmp-segmented.smtcmp-segmented--pill {
  display: flex;
  width: 100%;
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 8px;
  padding: 3px;
  gap: 0;
  position: relative;
  overflow: visible;
  isolation: isolate;
}

.smtcmp-segmented.smtcmp-segmented--pill > .smtcmp-segmented-glider {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc((100% - 6px) / var(--smtcmp-segment-count));
  height: calc(100% - 6px);
  background: var(--background-secondary);
  border: none;
  border-radius: 5px;
  box-shadow: 0 0 0 1.5px var(--interactive-accent);
  transform: translateX(calc(100% * var(--smtcmp-segment-index)));
  transition: transform 0.24s cubic-bezier(0.4, 1.1, 0.4, 1);
  pointer-events: none;
  z-index: 1;
}

.smtcmp-segmented.smtcmp-segmented--pill > button {
  flex: 1 1 0;
  position: relative;
  z-index: 2;
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none;
  padding: 6px 4px;
  border-radius: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted) !important;
  cursor: pointer;
  text-align: center;
  transform: none !important;
  transition:
    color 0.15s ease,
    font-weight 0.15s ease;
}

.smtcmp-segmented.smtcmp-segmented--pill > button:hover {
  background: transparent !important;
  color: var(--text-normal) !important;
  transform: none !important;
}

.smtcmp-segmented.smtcmp-segmented--pill > button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--background-modifier-border) !important;
}

/* When the active segment also has keyboard focus, suppress the neutral focus
   ring so the glider's accent ring remains the visual indicator. */

.smtcmp-segmented.smtcmp-segmented--pill > button.active:focus-visible {
  box-shadow: none !important;
}

.smtcmp-segmented.smtcmp-segmented--pill > button.active {
  background: transparent !important;
  color: var(--text-normal) !important;
  font-weight: 600;
  transform: none !important;
}

.smtcmp-reasoning-popover__desc {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 10px;
  line-height: 1.5;
}

.smtcmp-reasoning-popover__desc-label {
  color: var(--text-normal);
}

.smtcmp-reasoning-popover__desc-sep {
  color: var(--text-faint);
}

.smtcmp-chat-user-input-file-badge {
  display: flex;
  align-items: center;
  background-color: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-s);
  font-size: var(--font-smallest);
  padding: var(--size-2-1) var(--size-4-1);
  gap: var(--size-2-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: var(--smtcmp-mention-badge-max-width, 260px);
  cursor: pointer;

  &.smtcmp-chat-user-input-file-badge-focused {
    border: 1px solid var(--interactive-accent);
  }

  .smtcmp-excluded-content {
    text-decoration: line-through;
    font-style: italic;
  }

  svg {
    flex-shrink: 0;
  }
}

.smtcmp-chat-user-input-file-badge:hover {
  background-color: var(--background-modifier-hover);
}

button.smtcmp-chat-user-input-file-badge-delete,
.smtcmp-chat-user-input-file-badge-delete {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: 100%;
  display: flex;
  align-items: center;
  color: var(--text-muted);
  cursor: pointer;
}

button.smtcmp-chat-user-input-file-badge-delete:hover,
button.smtcmp-chat-user-input-file-badge-delete:focus,
button.smtcmp-chat-user-input-file-badge-delete:focus-visible,
.smtcmp-chat-user-input-file-badge-delete:hover,
.smtcmp-chat-user-input-file-badge-delete:focus,
.smtcmp-chat-user-input-file-badge-delete:focus-visible {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

.smtcmp-chat-user-input-file-badge-expand {
  height: 100%;
  display: flex;
  align-items: center;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 var(--size-2-1);
  border-radius: var(--radius-s);
}

.smtcmp-chat-user-input-file-badge-expand:hover {
  color: var(--text-normal);
  background-color: var(--background-modifier-hover);
}

.smtcmp-chat-user-input-file-badge-eye {
  height: 100%;
  display: flex;
  align-items: center;
  margin: 0 var(--size-2-1) 0 var(--size-4-1);
}

.smtcmp-chat-user-input-file-badge-name {
  display: flex;
  flex-direction: row;
  gap: var(--size-2-1);
  flex-grow: 1;
  overflow: hidden;
  align-items: center;
  min-width: 0;
}

.smtcmp-chat-user-input-file-badge-name-icon {
  color: var(--text-muted);
}

.smtcmp-chat-user-input-file-badge-name span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smtcmp-chat-user-input-file-badge-name-suffix {
  color: var(--text-faint);
  flex-grow: 0;
}

.smtcmp-chat-user-input-file-badge-current {
  color: var(--color-base-50);
}

.smtcmp-chat-user-input-file-content-preview {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: var(--size-4-1);
  background-color: var(--background-secondary);
  border-radius: var(--radius-s);
  border: 1px solid var(--background-modifier-border);
  max-height: 350px;
  overflow-y: auto;
  padding: 0 var(--size-4-2);
  z-index: 10;
  box-shadow: var(--shadow-s);

  img {
    max-width: 100%;
    max-height: 350px;
  }
}

.smtcmp-agent-mode-warning-modal {
  display: flex;
  flex-direction: column;
  gap: var(--size-4-3);
}

.smtcmp-agent-mode-warning-description {
  margin: 0;
  color: var(--text-normal);
  line-height: var(--line-height-normal);
}

.smtcmp-agent-mode-warning-list {
  margin: 0;
  padding-left: var(--size-4-4);
  display: flex;
  flex-direction: column;
  gap: var(--size-4-1);
  line-height: var(--line-height-normal);
}

.smtcmp-agent-mode-warning-list li::marker {
  color: var(--text-muted);
}

.smtcmp-agent-mode-warning-risk-title {
  font-weight: var(--font-semibold);
}

.smtcmp-agent-mode-warning-checkbox {
  display: flex;
  gap: var(--size-2-2);
  align-items: center;
}

.smtcmp-agent-mode-warning-checkbox input[type='checkbox'] {
  margin: 0;
  flex-shrink: 0;
}

.smtcmp-agent-mode-warning-actions {
  margin-top: var(--size-4-1);
}

.smtcmp-agent-mode-warning-confirm:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.smtcmp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* OpenAI-Style Thinking Loader - OpenAI 风格思考动画 */

.smtcmp-thinking-loader {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* 内联思考指示器 - 在编辑器中显示 */

.smtcmp-thinking-indicator-inline {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  vertical-align: baseline;
  line-height: 1;
}

/* 旋转的 Sparkles 图标 */

.smtcmp-thinking-icon {
  position: relative;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--interactive-accent) 15%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--interactive-accent) 20%, transparent),
    0 1px 4px color-mix(in srgb, var(--interactive-accent) 10%, transparent);
}

.smtcmp-thinking-icon-svg {
  color: var(--interactive-accent);
  animation: smtcmp-thinking-icon-spin 3s linear infinite;
}

@keyframes smtcmp-thinking-icon-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 高光流动的文字 */

.smtcmp-thinking-text {
  font-size: var(--font-ui-medium);
  font-weight: var(--font-normal);
  letter-spacing: 0.02em;
  background: linear-gradient(
    90deg,
    var(--text-muted) 0%,
    var(--text-muted) 30%,
    var(--text-normal) 50%,
    var(--text-muted) 70%,
    var(--text-muted) 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: smtcmp-thinking-text-shimmer 2s ease-in-out infinite;
}

.smtcmp-thinking-snippet {
  font-size: var(--font-ui-small);
  line-height: 1.2;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--interactive-accent) 10%, transparent);
  border: 1px solid
    color-mix(in srgb, var(--interactive-accent) 25%, transparent);
  padding: 2px 8px;
  border-radius: 999px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(6px);
}

@keyframes smtcmp-thinking-text-shimmer {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

.smtcmp-dot-loader-minimal {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  color: var(--text-muted);
}

.smtcmp-dot-loader-minimal span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  animation: smtcmp-dot-loader-pulse 1s ease-in-out infinite;
}

.smtcmp-dot-loader-minimal span:nth-child(2) {
  animation-delay: 0.15s;
}

.smtcmp-dot-loader-minimal span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes smtcmp-dot-loader-pulse {
  0%,
  80%,
  100% {
    transform: scale(0.6);
    opacity: 0.25;
  }
  40% {
    transform: scale(1);
    opacity: 0.9;
  }
}

/* 保留旧的 dot-loader 作为后备 */

.smtcmp-dot-loader {
  display: inline-block;
  text-align: left;
}

.smtcmp-dot-loader::after {
  content: '...';
  animation: dotFade 0.75s steps(4, end) infinite;
  color: var(--text-muted);
}

@keyframes dotFade {
  0%,
  100% {
    content: '';
  }
  25% {
    content: '.';
  }
  50% {
    content: '..';
  }
  75% {
    content: '...';
  }
}

.smtcmp-tooltip-content {
  background-color: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-s);
  padding: var(--size-4-1) var(--size-4-2);
  font-size: var(--font-smallest);
  animation: fadeIn 0.1s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.smtcmp-settings-textarea {
  display: block;
  border-top: none !important;
  padding: 0 !important;
  margin-bottom: var(--size-4-3);

  .smtcmp-item-control {
    width: 100%;
  }

  .setting-item-control {
    padding-bottom: 0;
  }

  textarea {
    width: 100%;
    min-height: 100px;
    resize: none;
  }
}

/* prevent setting-item:first-child overwriting padding-top and border-top */

.smtcmp-settings-textarea-header {
  padding-top: 0.75em !important;
  padding-bottom: 0 !important;
  border-top: 1px solid var(--background-modifier-border) !important;
}

.smtcmp-settings-model-container {
  margin: var(--size-4-2) 0;
  padding: var(--size-4-2) var(--size-4-4);
  border-left: 2px solid var(--interactive-accent);
  background-color: var(--background-secondary);
  border-radius: var(--radius-s);

  .setting-item {
    border-top: none;

    &:first-child {
      margin-top: var(--size-4-2);
    }
  }
}

.smtcmp-settings-plain.setting-item {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.smtcmp-settings-plain.setting-item .setting-item-info {
  display: none;
}

.smtcmp-settings-plain.setting-item .setting-item-control {
  padding: 0;
}

.smtcmp-dialog-content {
  position: fixed;
  left: calc(50% - var(--size-4-4));
  top: 50%;
  z-index: 50;
  display: grid;
  width: calc(100% - var(--size-4-8));
  max-width: 32rem;
  transform: translate(-50%, -50%);
  gap: var(--size-4-2);
  border: var(--border-width) solid var(--background-modifier-border);
  background-color: var(--background-secondary);
  padding: var(--size-4-5);
  transition-duration: 200ms;
  border-radius: var(--radius-m);
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  margin: var(--size-4-4);

  .smtcmp-dialog-header {
    margin-bottom: var(--size-4-2);
    display: grid;
    gap: var(--size-2-3);
  }

  .smtcmp-dialog-title {
    font-size: var(--font-ui-medium);
    font-weight: var(--font-semibold);
    line-height: var(--line-height-tight);
    margin: 0;
  }

  .smtcmp-dialog-input {
    display: grid;
    gap: var(--size-4-1);

    & label {
      font-size: var(--font-ui-smaller);
    }
  }

  .smtcmp-dialog-description {
    font-size: var(--font-ui-small);
    color: var(--text-muted);
    margin: 0;
  }

  .smtcmp-dialog-footer {
    margin-top: var(--size-4-2);
    display: flex;
    justify-content: flex-end;
  }

  .smtcmp-dialog-close {
    position: absolute;
    right: var(--size-4-4);
    top: var(--size-4-4);
    cursor: var(--cursor);
    opacity: 0.7;
    transition: opacity 0.2s;

    &:hover {
      opacity: 1;
    }
  }
}

.smtcmp-template-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-4-1);
  width: 100%;

  .smtcmp-template-menu-item-delete {
    display: flex;
    align-items: center;
    padding: var(--size-4-1);
    margin: calc(var(--size-4-1) * -1);
    opacity: 0.7;
    transition: opacity 0.2s;

    &:hover {
      opacity: 1;
    }
  }
}

.smtcmp-assistant-message-actions {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: var(--size-4-1);
  flex: 0 0 auto;
}

.smtcmp-assistant-message-action-btn {
  flex-shrink: 0;
}

.smtcmp-assistant-message-more-group {
  display: grid;
  grid-template-columns: 0fr auto;
  align-items: center;
  gap: var(--size-4-1);
  flex-shrink: 0;
  transition: grid-template-columns 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.smtcmp-assistant-message-actions.is-more-open
  .smtcmp-assistant-message-more-group {
  grid-template-columns: 1fr auto;
}

.smtcmp-assistant-message-inline-actions {
  min-width: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(6px);
  transform-origin: right center;
  pointer-events: none;
  transition:
    opacity 150ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.smtcmp-assistant-message-inline-actions.is-open {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.smtcmp-assistant-message-inline-actions-inner {
  display: flex;
  align-items: center;
  gap: var(--size-4-1);
  white-space: nowrap;
  padding: 2px 0;
}

.smtcmp-assistant-message-inline-actions-inner
  > .smtcmp-assistant-message-action-btn {
  opacity: 0;
  transform: translateX(5px) scale(0.96);
  transition:
    opacity 140ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.smtcmp-assistant-message-inline-actions.is-open
  .smtcmp-assistant-message-inline-actions-inner
  > .smtcmp-assistant-message-action-btn {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.smtcmp-assistant-message-inline-actions.is-open
  .smtcmp-assistant-message-inline-actions-inner
  > .smtcmp-assistant-message-action-btn:nth-child(1) {
  transition-delay: 30ms;
}

.smtcmp-assistant-message-inline-actions.is-open
  .smtcmp-assistant-message-inline-actions-inner
  > .smtcmp-assistant-message-action-btn:nth-child(2) {
  transition-delay: 55ms;
}

.smtcmp-assistant-message-inline-actions.is-open
  .smtcmp-assistant-message-inline-actions-inner
  > .smtcmp-assistant-message-action-btn:nth-child(3) {
  transition-delay: 80ms;
}

.smtcmp-assistant-message-more-button.is-open {
  visibility: visible;
  color: var(--text-normal);
  background: var(--background-modifier-hover);
  border-radius: var(--radius-s);
}

.smtcmp-assistant-message-more-button svg {
  transition:
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 120ms ease;
  transform-origin: center;
}

.smtcmp-assistant-message-more-button.is-open svg {
  transform: rotate(90deg) scale(0.96);
}

.yolo-user-message-actions {
  position: absolute;
  top: 100%;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--size-4-1);
  padding: 2px var(--size-2-2) 0;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transform: translateY(-2px);
  transition:
    opacity 140ms ease,
    transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.smtcmp-user-message-card:hover ~ .yolo-user-message-actions,
.yolo-user-message-actions:hover,
.smtcmp-chat-messages-user:focus-within .yolo-user-message-actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.yolo-user-message-action-btn {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .yolo-user-message-actions {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}

.smtcmp-assistant-message-editor {
  display: flex;
  flex-direction: column;
  gap: var(--size-2-2);
  margin-top: var(--size-2-2);
}

.smtcmp-assistant-message-editor-textarea {
  width: 100%;
  min-height: 120px;
  max-height: 320px;
  height: var(--smtcmp-assistant-editor-height, auto);
  padding: var(--size-2-2);
  border-radius: var(--radius-s);
  border: 1px solid var(--background-modifier-border);
  background: var(--background-modifier-form-field);
  color: var(--text-normal);
  font-family: inherit;
  font-size: var(--font-ui-small);
  line-height: var(--line-height-normal);
  resize: vertical;
  box-sizing: border-box;
  overflow: auto;
  overscroll-behavior: contain;
}

.smtcmp-assistant-message-editor-textarea:focus,
.smtcmp-assistant-message-editor-textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
}

.smtcmp-assistant-message-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-4-2);
  margin-top: var(--size-4-2);
}

.smtcmp-multi-model-tabs {
  display: inline-flex;
  align-items: center;
  gap: var(--size-2-2);
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
  overflow-x: auto;
  padding: 4px;
  margin-bottom: 2px;
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  background: color-mix(
    in srgb,
    var(--background-secondary) 88%,
    var(--background-primary)
  );
  scrollbar-width: thin;
}

.smtcmp-multi-model-tab {
  -webkit-appearance: none !important;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--size-2-2);
  min-width: 0;
  max-width: min(220px, 60vw);
  padding: 6px 10px;
  margin: 0;
  min-height: 0;
  height: auto;
  border: 1px solid transparent !important;
  border-radius: var(--radius-m);
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--text-muted);
  box-shadow: none !important;
  outline: none;
  cursor: pointer;
  flex: 0 0 auto;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}

.smtcmp-multi-model-tab:hover,
.smtcmp-multi-model-tab:focus,
.smtcmp-multi-model-tab:focus-visible {
  color: var(--text-normal);
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.smtcmp-multi-model-tab.is-active {
  color: var(--text-normal);
  border-color: var(--background-modifier-border) !important;
  background: var(--background-primary) !important;
  background-color: var(--background-primary) !important;
  background-image: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.smtcmp-multi-model-tab__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-ui-small);
  font-weight: var(--font-medium);
}

.smtcmp-multi-model-tab__status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  font-size: calc(var(--font-smallest) * 0.96);
  color: var(--text-faint);
}

.smtcmp-multi-model-tab__status.is-icon-only {
  color: var(--color-green);
}

.smtcmp-multi-model-tab--streaming .smtcmp-multi-model-tab__status {
  color: var(--interactive-accent);
}

.smtcmp-multi-model-tab--waiting-approval .smtcmp-multi-model-tab__status {
  color: var(--text-warning);
}

.smtcmp-multi-model-tab--error .smtcmp-multi-model-tab__status {
  color: var(--text-error);
}

.smtcmp-multi-model-tab--aborted .smtcmp-multi-model-tab__status {
  color: var(--text-muted);
}

.smtcmp-multi-model-tab__status-icon {
  flex: 0 0 auto;
}

.smtcmp-multi-model-tab__status-icon.is-spinning {
  animation: smtcmp-toolcall-spin 1s linear infinite;
}

.smtcmp-multi-model-tab__status-text {
  white-space: nowrap;
}

@media (max-width: 768px) {
  .smtcmp-multi-model-tab {
    max-width: 70vw;
  }
}

.smtcmp-agent-edit-summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
  padding: 8px 12px 6px;
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-l);
  background: color-mix(
    in srgb,
    var(--background-secondary) 82%,
    var(--background-primary)
  );
}

.smtcmp-agent-edit-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 0;
}

.smtcmp-agent-edit-summary-totals,
.smtcmp-agent-edit-summary-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: calc(var(--font-ui-small) * 0.92);
  line-height: 1.15;
}

.smtcmp-agent-edit-summary-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.smtcmp-agent-edit-summary-item {
  padding-top: 6px;
  padding-bottom: 2px;
  border-top: 1px solid
    color-mix(in srgb, var(--background-modifier-border) 75%, transparent);
}

.smtcmp-agent-edit-summary-item-trailing {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex: 0 0 auto;
  margin-left: auto;
  padding-right: 10px;
}

.smtcmp-agent-edit-summary-deltas {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  text-align: right;
}

.smtcmp-agent-edit-summary-item:last-child {
  padding-bottom: 0;
}

.smtcmp-agent-edit-summary-path {
  all: unset;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  appearance: none !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  color: var(--text-normal);
  text-decoration: none;
  cursor: pointer;
}

.smtcmp-agent-edit-summary-badge {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: calc(var(--font-ui-smaller) * 0.96);
  line-height: 1.4;
}

.smtcmp-agent-edit-summary-badge--create {
  border-color: color-mix(in srgb, var(--color-green) 24%, transparent);
  background: color-mix(in srgb, var(--color-green) 14%, transparent);
  color: color-mix(in srgb, var(--color-green) 78%, var(--text-normal));
}

.smtcmp-agent-edit-summary-badge--delete {
  border-color: color-mix(in srgb, var(--color-red) 24%, transparent);
  background: color-mix(in srgb, var(--color-red) 14%, transparent);
  color: color-mix(in srgb, var(--color-red) 78%, var(--text-normal));
}

.smtcmp-agent-edit-summary-path-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smtcmp-agent-edit-summary-path:hover,
.smtcmp-agent-edit-summary-path:focus-visible {
  color: var(--interactive-accent);
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  outline: none;
}

.smtcmp-agent-edit-summary-path:hover .smtcmp-agent-edit-summary-path-text,
.smtcmp-agent-edit-summary-path:focus-visible
  .smtcmp-agent-edit-summary-path-text {
  text-decoration-line: underline;
  text-underline-offset: 2px;
}

.smtcmp-agent-edit-summary-added {
  color: var(--color-green);
}

.smtcmp-agent-edit-summary-removed {
  color: var(--color-red);
}

.smtcmp-agent-edit-summary-neutral {
  color: var(--text-faint);
}

.smtcmp-agent-edit-summary-undo {
  display: inline-flex;
  align-items: center;
  gap: var(--size-2-2);
  padding: 3px 7px !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  border: 0 !important;
  border-radius: var(--radius-m) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  appearance: none !important;
  color: var(--text-muted);
  font-size: calc(var(--font-ui-small) * 0.92);
  line-height: 1.1;
  font-weight: var(--font-normal);
  text-decoration: none;
}

.smtcmp-agent-edit-summary-undo:hover:not(:disabled) {
  color: var(--text-normal);
  background: color-mix(
    in srgb,
    var(--background-modifier-hover) 72%,
    transparent
  ) !important;
  background-image: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

.smtcmp-agent-edit-summary-undo:focus,
.smtcmp-agent-edit-summary-undo:focus-visible {
  background: color-mix(
    in srgb,
    var(--background-modifier-hover) 72%,
    transparent
  ) !important;
  background-image: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  outline: none !important;
}

.smtcmp-agent-edit-summary-undo:disabled {
  opacity: 0.7;
}

.smtcmp-agent-edit-summary-undo-icon {
  flex: 0 0 auto;
  padding: 2px !important;
  gap: 0;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 120ms ease,
    color 120ms ease,
    background-color 120ms ease;
}

.smtcmp-agent-edit-summary-item:hover
  .smtcmp-agent-edit-summary-undo-icon:not(:disabled),
.smtcmp-agent-edit-summary-item:focus-within
  .smtcmp-agent-edit-summary-undo-icon:not(:disabled),
.smtcmp-agent-edit-summary-undo-icon.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.smtcmp-assistant-error-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--size-4-1);
  padding: 8px 12px 10px;
  border: 1px solid
    color-mix(in srgb, var(--color-red) 28%, var(--background-modifier-border));
  border-radius: var(--radius-l);
  background: color-mix(
    in srgb,
    var(--background-secondary) 88%,
    var(--background-primary)
  );
}

.smtcmp-assistant-error-card-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-normal);
  font-size: calc(var(--font-ui-small) * 0.96);
  line-height: 1.2;
  font-weight: var(--font-medium);
}

.smtcmp-assistant-error-card-header svg {
  flex: 0 0 auto;
  color: var(--color-red);
}

.smtcmp-assistant-error-card-body {
  color: var(--text-muted);
  font-size: calc(var(--font-ui-small) * 0.96);
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.smtcmp-assistant-tool-running-preview {
  margin-top: var(--size-4-1);
}

.smtcmp-assistant-tool-running-preview-header {
  cursor: default;
}

.smtcmp-assistant-tool-running-preview-header:hover {
  background-color: transparent;
  color: var(--text-muted);
}

.smtcmp-llm-inline-info {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
  font-size: calc(var(--font-smallest) * 0.9);
  color: var(--text-faint);
  padding-left: var(--size-4-2);
}

.smtcmp-llm-inline-info-content {
  display: inline-flex;
  align-items: center;
  gap: var(--size-4-2);
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.smtcmp-llm-inline-info-item {
  display: inline-flex;
  align-items: center;
  gap: var(--size-2-3);
  min-width: 0;
  flex: 0 1 auto;
}

/*
 * Off-screen "ghost" rows used only for measuring each compression level's
 * natural width. Mirrors the styles of the visible row so measurements are
 * accurate, but does not participate in layout.
 */

.smtcmp-llm-inline-info-ghosts {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.smtcmp-llm-inline-info-ghost {
  visibility: hidden;
  flex: 0 0 auto;
  overflow: visible;
  width: max-content;
}

/* Rich details shown in the hover tooltip — always full fidelity regardless
 * of how aggressively the inline row has been compressed.
 *
 * Design goal: a single calm tone. One row per metric, icon/label/value in the
 * same muted color family, only the numeric values tinted stronger. Cache
 * detail folds under Input as a tight sub-line. */

.smtcmp-llm-inline-info-tooltip-content {
  z-index: 1000;
  padding: var(--size-4-3) var(--size-4-4);
  min-width: 240px;
}

.smtcmp-llm-inline-info-tooltip {
  display: flex;
  flex-direction: column;
  gap: var(--size-2-3);
  font-size: var(--font-ui-small);
  color: var(--text-muted);
}

.smtcmp-llm-inline-info-tooltip-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--size-4-3);
}

.smtcmp-llm-inline-info-tooltip-row .smtcmp-llm-inline-info-icon {
  height: var(--size-4-3);
  width: var(--size-4-3);
  color: var(--text-muted);
  opacity: 0.85;
}

.smtcmp-llm-inline-info-tooltip-label {
  color: var(--text-muted);
}

.smtcmp-llm-inline-info-tooltip-value {
  font-variant-numeric: tabular-nums;
  color: var(--text-normal);
}

.smtcmp-llm-inline-info-tooltip-sub {
  padding-left: calc(var(--size-4-3) + var(--size-4-3));
  margin-top: calc(var(--size-2-3) * -1);
  font-size: var(--font-ui-smaller);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.smtcmp-llm-inline-info-icon {
  height: var(--size-4-3);
  width: var(--size-4-3);
}

.smtcmp-llm-inline-info-icon--input {
  color: inherit;
}

.smtcmp-llm-inline-info-icon--output {
  color: inherit;
}

.smtcmp-llm-inline-info-icon--speed {
  color: inherit;
}

.smtcmp-llm-inline-info-icon--time {
  color: inherit;
}

.smtcmp-popover-content {
  z-index: 1000;
  background-color: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-s);
  padding: var(--size-4-2);
  font-size: var(--font-smallest);
  animation: fadeIn 0.1s ease-in-out;
}

/* Conversation settings popover */

.smtcmp-chat-settings-content {
  /* width is set dynamically by inline style to 50% of input wrapper */
  min-width: 200px;
  max-width: 640px;
  padding: 10px 12px;
}

.smtcmp-chat-settings {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.smtcmp-chat-settings-section {
  display: grid;
  gap: 10px;
}

.smtcmp-chat-settings-section-title {
  font-size: var(--font-ui-small);
  font-weight: var(--font-medium);
  color: var(--text-normal);
  margin: 0;
}

/* Grid row: label + number pill (right), slider across entire row */

.smtcmp-chat-settings-row2 {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px 12px;
}

.smtcmp-chat-settings-row-inline {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px 12px;
}

.smtcmp-chat-settings-label {
  font-size: var(--font-ui-small);
  color: var(--text-normal);
}

.smtcmp-number-pill {
  width: 88px;
  height: 24px;
  line-height: 24px;
  text-align: right;
  padding: 0 8px;
  border-radius: 12px;
  border: 1px solid var(--background-modifier-border);
  background: var(--background-primary-alt);
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
}

/* Segmented control for Streaming */

.smtcmp-segmented {
  display: inline-flex;
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-s);
  overflow: hidden;
  position: relative;
}

.smtcmp-segmented > button {
  background: var(--background-secondary);
  color: var(--text-muted);
  border: none;
  padding: 2px 16px; /* make smaller */
  font-size: var(--font-smallest);
  line-height: 16px; /* tighter height */
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.smtcmp-segmented > button:hover {
  background: var(--background-modifier-hover);
}

/* 视图切换标签页样式 - 手风琴展开效果 */

.smtcmp-view-toggle {
  display: inline-flex;
  position: relative;
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 8px;
  padding: 4px;
  overflow: hidden;
  isolation: isolate;
  transition: all 0.2s ease;
  width: 200px;
  box-shadow:
    0 1px 3px
      color-mix(in srgb, var(--background-modifier-box-shadow) 15%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 5%, transparent);

  --smtcmp-total-width: 200px;
  --smtcmp-padding-inline: 8px;
  --smtcmp-collapsed-width: 50px;
  --smtcmp-expanded-width: calc(
    var(--smtcmp-total-width) - var(--smtcmp-padding-inline) -
      var(--smtcmp-collapsed-width)
  );
}

.smtcmp-view-toggle-button {
  position: relative;
  z-index: 2;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none;
  padding: 8px 6px;
  font-size: var(--font-ui-smaller);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 4px;
  text-align: center;
  white-space: nowrap;
  line-height: 1.4;
  box-shadow: none !important;
  outline: none;
  width: var(--smtcmp-collapsed-width);
  flex-shrink: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.smtcmp-view-toggle-button--expanded {
  width: var(--smtcmp-expanded-width);
  justify-content: center;
  gap: 6px;
}

.smtcmp-view-toggle-button-label {
  display: inline-block;
  transition:
    opacity 0.2s ease,
    max-width 0.3s ease;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.smtcmp-view-toggle-button--expanded .smtcmp-view-toggle-button-label {
  opacity: 1;
  max-width: 100px;
}

.smtcmp-view-toggle-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.smtcmp-view-toggle-button--active .smtcmp-view-toggle-button-icon {
  color: var(--h1-color, var(--interactive-accent));
}

.smtcmp-view-toggle-button-icon svg {
  width: 16px;
  height: 16px;
}

.smtcmp-view-toggle-button:hover:not(.smtcmp-view-toggle-button--active) {
  color: var(--text-normal);
  background: none !important;
  background-color: transparent !important;
}

.smtcmp-view-toggle-button--active {
  color: var(--h1-color, var(--interactive-accent));
  font-weight: var(--font-semibold);
  background-color: transparent !important;
}

.smtcmp-view-toggle-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.smtcmp-view-toggle-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  background: transparent;
  border: 2px solid var(--h1-color, var(--interactive-accent));
  border-radius: 4px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.smtcmp-view-toggle-indicator[data-active-view='chat'] {
  width: var(--smtcmp-collapsed-width);
  transform: translateX(0);
}

.smtcmp-view-toggle-indicator[data-active-view='composer'] {
  width: var(--smtcmp-collapsed-width);
  transform: translateX(var(--smtcmp-collapsed-width));
}

.smtcmp-view-toggle[data-expanded-view='chat'][data-active-expanded='true']
  .smtcmp-view-toggle-indicator[data-active-view='chat'] {
  width: var(--smtcmp-expanded-width);
  transform: translateX(0);
}

.smtcmp-view-toggle[data-expanded-view='composer'][data-active-expanded='true']
  .smtcmp-view-toggle-indicator[data-active-view='composer'] {
  width: var(--smtcmp-expanded-width);
  transform: translateX(var(--smtcmp-collapsed-width));
}

.smtcmp-view-toggle[data-expanded-view='chat'][data-active-expanded='false']
  .smtcmp-view-toggle-indicator[data-active-view='composer'] {
  width: var(--smtcmp-collapsed-width);
  transform: translateX(var(--smtcmp-expanded-width));
}

.smtcmp-chat-header .smtcmp-view-toggle {
  margin-right: auto;
}

.smtcmp-chat-header--workspace .smtcmp-view-toggle {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.smtcmp-view-toggle:hover {
  box-shadow:
    0 2px 8px
      color-mix(in srgb, var(--background-modifier-box-shadow) 20%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
}

.smtcmp-chat-header--workspace .smtcmp-view-toggle:hover {
  box-shadow: none;
}

.smtcmp-view-toggle--single {
  width: calc(var(--smtcmp-expanded-width) + 8px);
  min-width: calc(var(--smtcmp-expanded-width) + 8px);
}

.smtcmp-view-toggle--single .smtcmp-view-toggle-button--roller {
  width: var(--smtcmp-expanded-width);
  justify-content: center;
  gap: 6px;
}

.smtcmp-view-toggle--single .smtcmp-view-toggle-button-label {
  opacity: 1;
  max-width: 100px;
}

.smtcmp-view-toggle--single .smtcmp-roller-select-caret {
  width: 14px;
  margin-left: 4px;
  opacity: 0.92;
}

.smtcmp-view-toggle-indicator--single {
  width: calc(100% - 8px) !important;
  transform: translateX(0) !important;
}

/* Roller behavior on top of original accordion style */

.smtcmp-roller-select-window {
  height: 20px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  pointer-events: none;
}

.smtcmp-roller-select-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(0);
}

.smtcmp-roller-select-track.is-rolling {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: translateY(-20px);
}

.smtcmp-roller-select-item {
  height: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.smtcmp-roller-select-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  width: 0;
  height: 14px;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  transform: rotate(0deg);
  transition:
    opacity 0.18s ease,
    width 0.2s ease,
    margin-left 0.2s ease,
    transform 0.2s ease,
    color 0.18s ease;
}

.smtcmp-view-toggle-button--roller.smtcmp-view-toggle-button--expanded
  .smtcmp-roller-select-caret {
  width: 14px;
  margin-left: 4px;
  opacity: 0.92;
  color: var(--text-normal);
}

.smtcmp-view-toggle-button--roller.smtcmp-view-toggle-button--active
  .smtcmp-roller-select-caret {
  color: var(--h1-color, var(--interactive-accent));
}

.smtcmp-roller-select-trigger.is-open .smtcmp-roller-select-caret {
  transform: rotate(180deg);
  opacity: 1;
}

.smtcmp-roller-select-list {
  padding: 4px;
  max-height: 380px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.smtcmp-roller-select-list-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-s);
  color: var(--text-normal);
  cursor: pointer;
  outline: none;
  user-select: none;
}

/* 鼠标 hover 任意项都给视觉反馈；键盘 highlight 仅对非选中项给 bg。
   原因：弹窗打开时 Radix 会把当前选中项自动设为 [data-highlighted]，若在
   [data-state='checked'] 上叠加 bg 会让"被动选中"出现一块灰底，与 ✓ 图标重复
   且视觉上像 hover 状态，违和。 */

.smtcmp-roller-select-list-item:hover,
.smtcmp-roller-select-list-item:not([data-state='checked'])[data-highlighted] {
  background: color-mix(
    in srgb,
    var(--background-modifier-hover) 90%,
    transparent
  );
}

.smtcmp-roller-select-list-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  color: var(--text-muted);
}

.smtcmp-roller-select-list-item-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  /* 让 flex 子元素允许收缩到 0，配合下面 label/desc 的 ellipsis 才会生效 */
  min-width: 0;
}

.smtcmp-roller-select-list-item-label,
.smtcmp-roller-select-list-item-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smtcmp-roller-select-list-item-label {
  color: var(--text-normal);
  font-size: 12px;
  font-weight: 500;
}

.smtcmp-roller-select-list-item-desc {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.3;
}

.smtcmp-roller-select-list-item-check {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--h1-color, var(--interactive-accent));
}

@media (max-width: 400px) {
  .smtcmp-view-toggle {
    width: 160px;
    --smtcmp-total-width: 160px;
    --smtcmp-collapsed-width: 40px;
  }
  .smtcmp-view-toggle-button {
    padding: 6px 2px;
    font-size: var(--font-ui-smallest);
  }
  .smtcmp-view-toggle-button--expanded {
    width: var(--smtcmp-expanded-width);
  }
  .smtcmp-view-toggle-indicator[data-active-view='chat'] {
    width: var(--smtcmp-collapsed-width);
  }
  .smtcmp-view-toggle-indicator[data-active-view='composer'] {
    width: var(--smtcmp-collapsed-width);
    transform: translateX(var(--smtcmp-collapsed-width));
  }
}

.smtcmp-segmented > button.active {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--interactive-accent) 75%, black);
  transform: translateY(-1px);
}

.smtcmp-segmented--glider {
  background: var(--background-secondary);
  padding: 2px;
  gap: 0;
  --smtcmp-segment-count: 2;
  --smtcmp-segment-index: 0;
  overflow: visible;
}

.smtcmp-segmented--glider > button {
  flex: 1 1 0;
  background: transparent;
  position: relative;
  z-index: 2;
  border: none;
  box-shadow: none;
}

.smtcmp-segmented--glider > button:hover {
  background: transparent;
}

.smtcmp-segmented--glider > button.active {
  background: transparent;
  color: var(--h1-color, var(--interactive-accent));
  font-weight: var(--font-semibold);
  box-shadow: none;
  transform: none;
}

.smtcmp-segmented-glider {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc((100% - 4px) / var(--smtcmp-segment-count));
  height: calc(100% - 4px);
  background: transparent;
  border: 2px solid var(--h1-color, var(--interactive-accent));
  border-radius: calc(var(--radius-s) - 2px);
  box-shadow: 0 2px 10px
    color-mix(in srgb, var(--interactive-accent) 18%, transparent);
  transform: translateX(calc(100% * var(--smtcmp-segment-index)));
  transition: transform 0.36s cubic-bezier(0.4, 1.2, 0.4, 1);
  pointer-events: none;
  z-index: 1;
}

.smtcmp-similarity-search-results {
  display: flex;
  flex-direction: column;
  font-size: var(--font-smaller);
  padding-top: var(--size-4-1);
  padding-bottom: var(--size-4-1);
  user-select: none;

  .smtcmp-similarity-search-results__trigger {
    display: flex;
    align-items: center;
    gap: var(--size-4-1);
    padding: var(--size-4-1);
    border-radius: var(--radius-s);
    cursor: pointer;
    &:hover {
      background-color: var(--background-modifier-hover);
    }
  }

  .smtcmp-similarity-search-item {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: var(--size-4-2);
    padding: var(--size-4-1);
    border-radius: var(--radius-s);
    cursor: pointer;

    &:hover {
      background-color: var(--background-modifier-hover);
    }

    .smtcmp-similarity-search-item__similarity {
      flex-shrink: 0;
      font-size: var(--font-smallest);
      color: var(--text-muted);
    }

    .smtcmp-similarity-search-item__path {
      flex-shrink: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: var(--font-smallest);
    }

    .smtcmp-similarity-search-item__line-numbers {
      flex-shrink: 0;
      margin-left: auto;
      font-size: var(--font-smallest);
    }
  }
}

.smtcmp-llm-info-content {
  width: 320px;
  display: grid;
  gap: var(--size-4-3);
}

.smtcmp-llm-info-header {
  display: grid;
  gap: var(--size-2-2);
  font-size: var(--font-ui-small);
  font-weight: var(--font-semibold);
}

.smtcmp-llm-info-tokens {
  display: grid;
  gap: var(--size-4-2);
}

.smtcmp-llm-info-tokens-header {
  font-size: var(--font-ui-small);
  font-weight: var(--font-medium);
}

.smtcmp-llm-info-tokens-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--size-4-5);
  row-gap: var(--size-4-2);
  font-size: var(--font-ui-small);
}

.smtcmp-llm-info-token-row {
  display: flex;
  align-items: center;
  gap: var(--size-2-3);
}

.smtcmp-llm-info-token-value {
  margin-left: auto;
  color: var(--text-muted);
}

.smtcmp-llm-info-token-total {
  grid-column: span 2;
  font-weight: var(--font-medium);
}

.smtcmp-llm-info-footer-row {
  display: flex;
  align-items: center;
  gap: var(--size-2-3);
  font-size: var(--font-ui-small);
  font-weight: var(--font-medium);
}

.smtcmp-llm-info-footer-value {
  margin-left: auto;
}

.smtcmp-llm-info-model {
  color: var(--text-muted);
}

.smtcmp-llm-info-icon--input {
  height: var(--size-4-3);
  width: var(--size-4-3);
  color: var(--color-green);
}

.smtcmp-llm-info-icon--output {
  height: var(--size-4-3);
  width: var(--size-4-3);
  color: var(--color-blue);
}

.smtcmp-llm-info-icon--total {
  height: var(--size-4-3);
  width: var(--size-4-3);
  color: var(--text-normal);
}

.smtcmp-llm-info-icon--footer {
  height: var(--size-4-4);
  width: var(--size-4-4);
}

/**
 * ChatUserInput
 */

.smtcmp-lexical-content-editable-root .mention {
  background-color: var(--tag-background);
  color: var(--tag-color);
  padding: var(--size-2-1) calc(var(--size-2-1));
  border-radius: var(--radius-s);
  background-color: var(--tag-background);
  color: var(--tag-color);
  padding: 0 calc(var(--size-2-1));
  border-radius: var(--radius-s);
  word-break: break-all;
}

.smtcmp-lexical-content-editable-root .smtcmp-skill-mention {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
}

.smtcmp-lexical-content-editable-root .smtcmp-skill-mention::before {
  content: '';
  width: 0.9em;
  height: 0.9em;
  flex-shrink: 0;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.912 5.813a2 2 0 0 0 1.275 1.275L21 12l-5.813 1.912a2 2 0 0 0-1.275 1.275L12 21l-1.912-5.813a2 2 0 0 0-1.275-1.275L3 12l5.813-1.912a2 2 0 0 0 1.275-1.275L12 3Z'/%3E%3Cpath d='M5 3v4'/%3E%3Cpath d='M3 5h4'/%3E%3Cpath d='M19 17v2'/%3E%3Cpath d='M18 18h2'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.smtcmp-lexical-content-editable-paragraph {
  margin: 0;
  line-height: 1.6;
}

.yolo-popover-surface ul {
  padding: 0;
  list-style: none;
  margin: 0;
  max-height: 200px;
  overflow-y: scroll;
}

.yolo-popover-surface ul {
  padding: var(--size-4-1) 0;
}

/* default 变体下的 group-label / separator / list / item 样式集中在这里。
   --smart-space 变体的同名元素样式集中在 src/styles/panels/smart-space.css。
   两个文件按变体严格隔离，避免源码顺序决定胜者的"屎山"问题。 */

.yolo-popover-surface--default .smtcmp-popover-group-label {
  display: block;
  margin: 0;
  padding: 10px 14px 6px 12px;
  color: color-mix(in srgb, var(--text-muted) 75%, transparent);
  font-size: 10px;
  font-weight: var(--font-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  user-select: none;
  text-align: left;
  opacity: 0.8;
}

.yolo-popover-surface--default .smtcmp-popover-group-separator {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 4px,
    color-mix(in srgb, var(--background-modifier-border) 50%, transparent) 16px,
    color-mix(in srgb, var(--background-modifier-border) 50%, transparent)
      calc(100% - 16px),
    transparent calc(100% - 4px)
  );
  margin: 6px 0;
}

.yolo-popover-surface--default .smtcmp-model-select-list {
  padding: 4px 0;
  max-height: 380px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.yolo-popover-surface--default
  .smtcmp-model-select-list
  > .smtcmp-popover-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 10px 4px 12px;
  margin: 0;
  border-radius: var(--radius-s);
  color: var(--text-normal);
  font-size: var(--font-ui-smaller);
  line-height: var(--line-height-tight);
  cursor: pointer;
  outline: none;
}

.yolo-popover-surface--default
  .smtcmp-model-select-list
  > .smtcmp-popover-item:hover,
.yolo-popover-surface--default
  .smtcmp-model-select-list
  > .smtcmp-popover-item[data-highlighted] {
  background: color-mix(
    in srgb,
    var(--background-modifier-hover) 90%,
    transparent
  );
}

.yolo-popover-surface
  .smtcmp-model-select-list
  > .smtcmp-popover-item[data-state='checked'] {
  background: color-mix(
    in srgb,
    var(--background-modifier-hover) 45%,
    transparent
  );
  font-weight: var(--font-semibold);
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--background-modifier-border) 60%, transparent);
}

.smtcmp-popover-item__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smtcmp-popover-item__indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--interactive-accent);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.smtcmp-popover-item[data-state='checked'] .smtcmp-popover-item__indicator {
  opacity: 1;
}

.yolo-popover-surface ul li {
  margin: 0;
  min-width: 180px;
  font-size: var(--font-ui-smaller);
  outline: none;
  cursor: pointer;
  border-radius: 0;
  text-align: left;
  justify-content: flex-start;
}

.yolo-popover-surface ul li.selected {
  background: var(--background-modifier-hover);
}

.yolo-popover-surface li {
  z-index: 1000;
  max-height: 300px;
  overflow-y: auto;
  background-color: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  margin: 0 8px 0 8px;
  padding: var(--size-2-3) var(--size-4-2);
  color: var(--text-normal);
  cursor: pointer;
  line-height: var(--line-height-tight);
  font-size: var(--font-ui-smaller);
  display: flex;
  align-content: center;
  flex-direction: row;
  flex-shrink: 0;
  background-color: var(--background-primary);
  border-radius: 8px;
  border: 0;
  min-height: 20px;
  align-items: center;
  gap: var(--size-4-1);
  align-items: start;
}

.yolo-popover-surface li.active {
  display: flex;
  width: 20px;
  height: 20px;
  background-size: contain;
}

.yolo-popover-surface li:hover {
  background-color: var(--background-modifier-hover);
}

.smtcmp-popover-item-icon {
  display: flex;
  user-select: none;
  line-height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 14px;
  padding-top: 1px;
  align-items: center;
  color: var(--text-muted);
  min-width: fit-content;
}

.yolo-popover-surface li:hover {
  background-color: var(--background-modifier-hover);
  cursor: pointer;
}

.yolo-popover-surface li .smtcmp-chat-list-dropdown-item-icon,
.yolo-popover-surface li .smtcmp-chat-list-pin-button {
  visibility: visible;
  opacity: 0;
  transform: translateX(5px) scale(0.96);
  pointer-events: none;
  transition:
    opacity 140ms ease,
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    color 120ms ease,
    background-color 120ms ease;
}

.yolo-popover-surface
  li:is(:hover, :focus-within)
  .smtcmp-chat-list-dropdown-item-icon,
.yolo-popover-surface
  li:is(:hover, :focus-within)
  .smtcmp-chat-list-pin-button {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

.yolo-popover-surface li .smtcmp-chat-list-dropdown-item-icon:hover {
  background-color: var(--background-modifier-hover);
  border-radius: var(--radius-s);
}

.smtcmp-chat-list-dropdown-item-icon:disabled {
  cursor: default;
  opacity: 0.9;
}

.smtcmp-chat-list-dropdown-empty {
  background: transparent;
  cursor: default;
  color: var(--text-faint);
}

.smtcmp-chat-list-dropdown-content {
  display: inline-flex;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
  min-width: 0;
  /* 让弹层左侧与聊天面板外层布局对齐（仅聊天历史下拉需要）。 */
  margin-left: -64px;
}

.smtcmp-chat-list-search {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 6px 10px;
  background: var(--background-primary);
  border-bottom: 1px solid
    color-mix(in srgb, var(--background-modifier-border) 60%, transparent);
}

.smtcmp-chat-list-search-field {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
}

.smtcmp-chat-list-search-icon {
  color: var(--text-muted);
  margin-left: 4px;
}

.smtcmp-chat-list-search-input {
  flex: 1;
  min-width: 0;
  padding-left: 0;
  border: 0;
  box-shadow: none;
  outline: none;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  color: var(--text-normal);
  font-size: var(--font-ui-small);
}

.smtcmp-chat-list-search input.smtcmp-chat-list-search-input {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.smtcmp-chat-list-search-input::placeholder {
  color: var(--text-muted);
}

.smtcmp-chat-list-dropdown-content li,
.smtcmp-chat-list-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-l) !important;
  margin: 4px 0;
  width: auto;
  box-sizing: border-box;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.smtcmp-chat-list-dropdown-item-title {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.smtcmp-chat-list-dropdown-item-title-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 140ms ease,
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.smtcmp-chat-list-dropdown-item-title-skeleton {
  position: absolute;
  left: 0;
  top: 50%;
  width: min(72%, 220px);
  height: calc(var(--font-ui-small) * 0.82);
  border-radius: var(--radius-s);
  transform: translateY(-50%);
  opacity: 0;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--background-modifier-hover) 70%, transparent) 0%,
    color-mix(in srgb, var(--text-muted) 26%, transparent) 48%,
    color-mix(in srgb, var(--background-modifier-hover) 70%, transparent) 100%
  );
  background-size: 220% 100%;
  pointer-events: none;
  transition: opacity 140ms ease;
}

.smtcmp-chat-list-dropdown-item-status {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  box-sizing: border-box;
  opacity: 0.92;
}

.smtcmp-chat-list-dropdown-item-status.is-running {
  border: 2px solid
    color-mix(in srgb, var(--interactive-accent) 18%, transparent);
  border-top-color: color-mix(in srgb, var(--interactive-accent) 82%, white 8%);
  animation: smtcmp-chat-list-run-spin 0.9s linear infinite;
}

.smtcmp-chat-list-dropdown-item-status.is-waiting {
  border: 2px solid color-mix(in srgb, var(--color-orange) 20%, transparent);
  border-top-color: color-mix(in srgb, var(--color-orange) 82%, white 8%);
  animation: smtcmp-chat-list-run-spin 0.9s linear infinite;
}

.smtcmp-chat-list-dropdown-item-title.is-retrying
  .smtcmp-chat-list-dropdown-item-title-text {
  opacity: 0;
  transform: translateY(-2px);
}

.smtcmp-chat-list-dropdown-item-title.is-retrying
  .smtcmp-chat-list-dropdown-item-title-skeleton {
  opacity: 1;
  animation: smtcmp-chat-list-title-shimmer 1.1s linear infinite;
}

@keyframes smtcmp-chat-list-title-shimmer {
  from {
    background-position: 220% 50%;
  }
  to {
    background-position: -20% 50%;
  }
}

@keyframes smtcmp-chat-list-run-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.smtcmp-agent-status-bar,
.smtcmp-background-activity-status-bar {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.smtcmp-agent-status-bar-ring,
.smtcmp-background-activity-status-bar-ring {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid
    color-mix(in srgb, var(--interactive-accent) 18%, transparent);
  border-top-color: color-mix(in srgb, var(--interactive-accent) 82%, white 8%);
  box-sizing: border-box;
  opacity: 0.92;
  animation: smtcmp-chat-list-run-spin 0.9s linear infinite;
}

.smtcmp-background-activity-status-bar-ring.is-waiting {
  border-color: color-mix(in srgb, var(--color-orange) 20%, transparent);
  border-top-color: color-mix(in srgb, var(--color-orange) 82%, white 8%);
}

.smtcmp-background-activity-status-bar-ring.is-failed {
  border-color: color-mix(in srgb, var(--color-red) 22%, transparent);
  border-top-color: color-mix(in srgb, var(--color-red) 82%, white 8%);
}

.smtcmp-agent-status-bar-label,
.smtcmp-background-activity-status-bar-label {
  min-width: 0;
}

.smtcmp-agent-status-panel,
.smtcmp-background-activity-status-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(320px, calc(100vw - 24px));
  max-height: min(360px, 60vh);
  padding: 10px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--background-primary) 94%, black 6%);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.22),
    0 4px 12px rgba(0, 0, 0, 0.12);
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transform-origin: bottom right;
  transition:
    opacity 160ms ease,
    transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.smtcmp-agent-status-panel.is-open,
.smtcmp-background-activity-status-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.smtcmp-agent-status-panel-header,
.smtcmp-background-activity-status-panel-header {
  font-size: var(--font-ui-small);
  font-weight: 600;
  color: var(--text-muted);
}

.smtcmp-agent-status-panel-list,
.smtcmp-background-activity-status-panel-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.smtcmp-agent-status-panel-empty,
.smtcmp-background-activity-status-panel-empty {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
}

.smtcmp-agent-status-panel-item,
.smtcmp-background-activity-status-panel-item {
  padding: 8px 10px;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition:
    transform 140ms ease,
    background-color 140ms ease;
}

.smtcmp-agent-status-panel-item:hover,
.smtcmp-agent-status-panel-item:focus-visible,
.smtcmp-background-activity-status-panel-item:hover,
.smtcmp-background-activity-status-panel-item:focus-visible {
  outline: none;
  transform: translateY(-1px);
  background: var(--background-modifier-hover);
}

.smtcmp-agent-status-panel-item-row,
.smtcmp-background-activity-status-panel-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.smtcmp-background-activity-status-panel-item-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.smtcmp-agent-status-panel-item-title,
.smtcmp-background-activity-status-panel-item-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--font-ui-small);
  font-weight: 400;
  color: var(--text-normal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.smtcmp-background-activity-status-panel-item-detail {
  min-width: 0;
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.smtcmp-agent-status-panel-item-meta {
  flex-shrink: 0;
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
}

.smtcmp-agent-status-panel-item-indicator,
.smtcmp-background-activity-status-panel-item-indicator {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid
    color-mix(in srgb, var(--interactive-accent) 18%, transparent);
  border-top-color: color-mix(in srgb, var(--interactive-accent) 82%, white 8%);
  box-sizing: border-box;
  opacity: 0.92;
  animation: smtcmp-chat-list-run-spin 0.9s linear infinite;
}

.smtcmp-agent-status-panel-item-indicator.is-waiting-approval,
.smtcmp-background-activity-status-panel-item-indicator.is-waiting {
  border-color: color-mix(in srgb, var(--color-orange) 20%, transparent);
  border-top-color: color-mix(in srgb, var(--color-orange) 82%, white 8%);
}

.smtcmp-background-activity-status-panel-item-indicator.is-failed {
  border-color: color-mix(in srgb, var(--color-red) 22%, transparent);
  border-top-color: color-mix(in srgb, var(--color-red) 82%, white 8%);
}

input[type='text'].smtcmp-chat-list-dropdown-item-title-input {
  width: 100%;
  font-size: var(--font-ui-smaller);
}

.smtcmp-chat-list-dropdown-content li:hover {
  color: var(--text-normal) !important;
}

.smtcmp-chat-list-dropdown-content {
  transform-origin: var(--radix-popover-content-transform-origin);
}

.smtcmp-chat-list-dropdown-content[data-state='open'] {
  animation: smtcmp-chat-list-dropdown-fade-in 0.22s
    cubic-bezier(0.16, 1, 0.3, 1);
}

.smtcmp-chat-list-dropdown-content[data-state='closed'] {
  animation: smtcmp-chat-list-dropdown-fade-out 0.16s cubic-bezier(0.4, 0, 1, 1);
}

@keyframes smtcmp-chat-list-dropdown-fade-in {
  0% {
    opacity: 0;
    transform: translateY(7px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes smtcmp-chat-list-dropdown-fade-out {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(5px) scale(0.98);
  }
}

.smtcmp-chat-list-dropdown-item:hover,
.smtcmp-chat-list-dropdown-item:focus-within,
.smtcmp-chat-list-dropdown-content li:is(:hover, :focus-within, :has(:hover)) {
  background: color-mix(
    in srgb,
    var(--background-modifier-hover) 92%,
    transparent
  ) !important;
  outline: none;
  color: var(--text-normal) !important;
}

.smtcmp-chat-list-dropdown-item.selected,
.smtcmp-chat-list-dropdown-item[data-highlighted='true'],
.smtcmp-chat-list-dropdown-content li.selected,
.smtcmp-chat-list-dropdown-content li[data-highlighted='true'] {
  background: color-mix(
    in srgb,
    var(--background-modifier-hover) 96%,
    transparent
  ) !important;
  box-shadow: none;
  border: 0 !important;
  color: var(--text-normal) !important;
}

.smtcmp-chat-list-dropdown-archive-row {
  padding: 0 !important;
  margin-top: 2px;
  background: transparent !important;
  cursor: default !important;
}

.smtcmp-chat-list-dropdown-archive-row:hover {
  background: transparent !important;
}

button.smtcmp-chat-list-dropdown-archive-toggle {
  width: 100%;
  height: 28px;
  border: 0 !important;
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
  text-align: center;
  padding: 0 10px;
  cursor: pointer;
}

button.smtcmp-chat-list-dropdown-archive-toggle:hover {
  background: transparent;
}

.smtcmp-chat-list-dropdown-archive-toggle-label {
  display: inline-block;
  border-radius: var(--radius-s);
  padding: 2px 6px;
  transition:
    color 120ms ease,
    text-decoration-color 120ms ease;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
}

button.smtcmp-chat-list-dropdown-archive-toggle:hover
  .smtcmp-chat-list-dropdown-archive-toggle-label,
button.smtcmp-chat-list-dropdown-archive-toggle:focus-visible
  .smtcmp-chat-list-dropdown-archive-toggle-label {
  color: var(--text-normal);
  text-decoration-color: color-mix(
    in srgb,
    var(--text-normal) 60%,
    transparent
  );
}

.smtcmp-chat-list-dropdown-item-actions {
  display: flex;
  align-items: center;
  gap: var(--size-4-1);
  margin-left: auto;
  position: relative;

  svg {
    height: var(--icon-xs);
    width: var(--icon-xs);
    stroke-width: var(--icon-stroke);
  }
}

.smtcmp-chat-list-inline-actions {
  display: grid;
  grid-template-columns: 0fr;
  opacity: 0;
  transform: translateX(6px);
  transform-origin: right center;
  pointer-events: none;
  transition:
    grid-template-columns 220ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 150ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.smtcmp-chat-list-inline-actions.is-open {
  grid-template-columns: 1fr;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.smtcmp-chat-list-inline-actions-inner {
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--size-4-1);
}

.smtcmp-chat-list-inline-actions-inner > .smtcmp-chat-list-dropdown-item-icon {
  opacity: 0;
  transform: translateX(5px) scale(0.96);
  transition:
    opacity 140ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.smtcmp-chat-list-inline-actions.is-open
  .smtcmp-chat-list-inline-actions-inner
  > .smtcmp-chat-list-dropdown-item-icon {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.smtcmp-chat-list-inline-actions.is-open
  .smtcmp-chat-list-inline-actions-inner
  > .smtcmp-chat-list-dropdown-item-icon:nth-child(1) {
  transition-delay: 30ms;
}

.smtcmp-chat-list-inline-actions.is-open
  .smtcmp-chat-list-inline-actions-inner
  > .smtcmp-chat-list-dropdown-item-icon:nth-child(2) {
  transition-delay: 55ms;
}

.smtcmp-chat-list-inline-actions.is-open
  .smtcmp-chat-list-inline-actions-inner
  > .smtcmp-chat-list-dropdown-item-icon:nth-child(3) {
  transition-delay: 80ms;
}

.smtcmp-chat-list-dropdown-item-actions.is-more-open
  .smtcmp-chat-list-dropdown-item-icon,
.smtcmp-chat-list-dropdown-item-actions.is-more-open
  .smtcmp-chat-list-pin-button {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

.smtcmp-chat-list-more-button.is-open {
  visibility: visible;
  color: var(--text-normal);
  background: var(--background-modifier-hover);
  border-radius: var(--radius-s);
}

.smtcmp-chat-list-more-button svg {
  transition:
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 120ms ease;
  transform-origin: center;
}

.smtcmp-chat-list-more-button.is-open svg {
  transform: rotate(90deg) scale(0.96);
}

.smtcmp-chat-list-pin-button {
  color: var(--text-muted);
}

.smtcmp-chat-list-pin-button svg {
  fill: transparent;
}

.yolo-popover-surface li .smtcmp-chat-list-pin-button.is-pinned {
  color: var(--text-normal);
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

.yolo-popover-surface li .smtcmp-chat-list-pin-button.is-pinned svg {
  fill: currentColor;
}

.smtcmp-code-block {
  position: relative;
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-s);
}

.smtcmp-code-block code {
  padding: 0;
}

.smtcmp-code-block-header {
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-smallest);
  display: flex;
  border-bottom: 1px solid var(--background-modifier-border);
  background-color: var(--background-primary);
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  height: calc(var(--size-4-8) - var(--size-4-1));
}

.smtcmp-code-block-header-filename {
  appearance: none;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0;
  outline: none;
  background: transparent !important;
  color: inherit;
  margin: 0;
  padding: 0 var(--size-4-2);
  height: 100%;
  display: inline-flex;
  align-items: center;
  font-size: var(--font-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }
}

.smtcmp-code-block-header-button-container {
  margin-left: auto;
  min-width: fit-content;
  height: 100%;
  display: flex;
  gap: 0;
  overflow: hidden;

  .smtcmp-code-block-header-button {
    height: 100%;
    padding: 0 var(--size-4-2);
    display: flex;
    gap: var(--size-4-1);
    font-size: var(--font-small);
  }

  /* Override clickable-icon color */
  .smtcmp-code-block-header-button.clickable-icon {
    color: var(--text-color) !important;
  }
}

.smtcmp-code-block-content {
  margin: 0;
}

.smtcmp-code-block-obsidian-markdown {
  position: relative;
  padding: var(--size-4-3);
  overflow: hidden;
}

.smtcmp-code-block-obsidian-markdown.is-plan-transitioning {
  display: grid;
  align-items: start;
}

.smtcmp-plan-preview-panel {
  min-width: 0;
}

.smtcmp-code-block-obsidian-markdown.is-plan-transitioning
  .smtcmp-plan-preview-panel {
  grid-area: 1 / 1;
}

.smtcmp-plan-preview-panel--streaming {
  position: relative;
  z-index: 2;
}

.smtcmp-plan-preview-panel--streaming.is-exiting {
  pointer-events: none;
  animation: smtcmp-plan-streaming-preview-exit 220ms
    cubic-bezier(0.32, 0, 0.2, 1) forwards;
}

.smtcmp-plan-preview-panel--streaming.is-exiting
  .smtcmp-plan-streaming-preview-body {
  transform-origin: top left;
  animation: smtcmp-plan-streaming-preview-body-collapse 220ms
    cubic-bezier(0.32, 0, 0.2, 1) forwards;
}

.smtcmp-plan-preview-panel--resolved {
  position: relative;
  z-index: 1;
}

.smtcmp-plan-preview-panel--resolved.is-entering {
  border-radius: calc(var(--radius-s) - 2px);
  animation: smtcmp-plan-preview-content-enter 260ms
    cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.smtcmp-plan-streaming-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 0;
}

.smtcmp-plan-streaming-preview-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text-muted);
  font-size: var(--font-ui-small);
  font-weight: var(--font-medium);
  line-height: 1.35;
}

.smtcmp-plan-streaming-preview-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--interactive-accent) 72%, white 28%);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--interactive-accent) 10%, transparent);
}

.smtcmp-plan-streaming-preview-title {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.smtcmp-plan-streaming-preview-loader {
  margin-left: 1px;
}

.smtcmp-plan-streaming-preview-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 18px;
  opacity: 0.7;
}

.smtcmp-plan-streaming-preview-line {
  display: block;
  position: relative;
  height: 5px;
  width: 72%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted) 16%, transparent);
  animation: smtcmp-plan-streaming-preview-pulse 1.8s ease-in-out infinite;
}

.smtcmp-plan-streaming-preview-line.is-wide {
  width: 66%;
}

.smtcmp-plan-streaming-preview-line.is-short {
  width: 52%;
}

@keyframes smtcmp-plan-streaming-preview-pulse {
  0% {
    opacity: 0.35;
  }

  50% {
    opacity: 0.68;
  }

  100% {
    opacity: 0.35;
  }
}

@keyframes smtcmp-plan-streaming-preview-exit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }

  to {
    opacity: 0;
    transform: translateY(-6px) scale(0.985);
    filter: blur(1px);
  }
}

@keyframes smtcmp-plan-streaming-preview-body-collapse {
  from {
    opacity: 0.7;
    transform: scaleY(1);
  }

  to {
    opacity: 0;
    transform: scaleY(0.72);
  }
}

@keyframes smtcmp-plan-preview-content-enter {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.992);
    background: color-mix(
      in srgb,
      var(--background-secondary) 88%,
      transparent
    );
    box-shadow: 0 18px 30px -24px color-mix(in srgb, var(
            --background-modifier-box-shadow
          )
          90%, transparent);
  }

  55% {
    opacity: 1;
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    background: transparent;
    box-shadow: 0 0 0 0 transparent;
  }
}

.smtcmp-apply-overlay-host {
  position: relative;
}

.smtcmp-apply-overlay-root {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.smtcmp-apply-overlay {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  background: var(--background-primary);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.smtcmp-inline-review-widget {
  margin: 2px 0;
  position: relative;
  overflow: visible;
  width: 100%;
}

.smtcmp-inline-review-widget.is-resolved {
  animation: smtcmp-inline-review-resolve-in 180ms ease;
}

.smtcmp-inline-review-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.smtcmp-inline-review-resolved {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.smtcmp-inline-review-widget.is-resolved .smtcmp-inline-review-line {
  color: var(--text-normal);
}

@keyframes smtcmp-inline-review-resolve-in {
  from {
    opacity: 0.74;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.smtcmp-inline-review-line {
  white-space: pre-wrap;
  line-height: var(--line-height-normal);
}

.smtcmp-inline-review-widget .smtcmp-inline-diff {
  display: inline;
  padding: 0 3px;
  margin: 0 1px;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.smtcmp-inline-review-widget .smtcmp-inline-diff-del {
  color: color-mix(in srgb, var(--text-faint) 80%, var(--text-muted) 20%);
  background: color-mix(
    in srgb,
    var(--background-modifier-border) 60%,
    transparent
  );
  text-decoration-line: underline line-through;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--text-faint) 70%, transparent);
  text-underline-offset: 2px;
}

.smtcmp-inline-review-widget .smtcmp-inline-diff-add {
  color: var(--text-accent);
  background: color-mix(in srgb, var(--interactive-accent) 12%, transparent);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(
    in srgb,
    var(--interactive-accent) 60%,
    transparent
  );
  text-underline-offset: 2px;
}

.smtcmp-inline-review-floating-actions .smtcmp-apply-action {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text-muted) 40%, transparent);
  background: color-mix(in srgb, var(--background-primary) 92%, transparent);
  color: var(--text-normal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

.smtcmp-inline-review-floating-actions .smtcmp-apply-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  font-weight: 600;
  color: currentColor;
}

.smtcmp-inline-review-floating-actions .smtcmp-apply-action:hover {
  transform: translateY(-1px);
  color: var(--text-normal);
  background: color-mix(
    in srgb,
    var(--background-primary) 82%,
    var(--background-secondary) 18%
  );
  border-color: color-mix(in srgb, var(--text-muted) 55%, transparent);
}

.smtcmp-inline-review-floating-root {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 8;
}

.smtcmp-inline-review-floating-rail {
  position: absolute;
  width: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--interactive-accent) 65%, transparent);
  opacity: 0.95;
}

.smtcmp-inline-review-floating-actions {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: auto;
}

.smtcmp-inline-review-floating-actions .smtcmp-apply-action-accept {
  color: rgb(var(--smtcmp-incoming-color-rgb, 4, 120, 87));
}

.smtcmp-inline-review-floating-actions .smtcmp-apply-action-reject {
  color: rgb(var(--smtcmp-current-color-rgb, 185, 28, 28));
}

.smtcmp-inline-review-host .cm-cursorLayer,
.smtcmp-inline-review-host .cm-dropCursor {
  display: none !important;
}

.smtcmp-inline-review-host .cm-cursor,
.smtcmp-inline-review-host .cm-fat-cursor,
.smtcmp-inline-review-host .cm-fat-cursor-mark {
  display: none !important;
  opacity: 0 !important;
}

.smtcmp-inline-review-host .cm-content {
  caret-color: transparent !important;
}

:is(#smtcmp-apply-view, .smtcmp-apply-view-root) {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  font-family: var(--font-interface);
  position: relative;

  --smtcmp-current-color-rgb: 185, 28, 28; /* red-700 */
  --smtcmp-incoming-color-rgb: 4, 120, 87; /* emerald-700 */
  --smtcmp-apply-rail-offset: 6px;
  --smtcmp-apply-actions-offset: 36px;
  --smtcmp-apply-text-color: var(--text-normal);
  --smtcmp-inline-add-color: var(--text-accent);
  --smtcmp-inline-del-color: color-mix(
    in srgb,
    var(--text-faint) 80%,
    var(--text-muted) 20%
  );

  .view-content {
    padding: 0;
    flex: 1 1 auto;
  }

  .markdown-source-view.mod-cm6 {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .cm-editor {
    flex: 1 1 0;
    min-height: 0;
    position: relative !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column;
  }

  .cm-scroller {
    padding: var(--file-margins);
    display: flex !important;
    align-items: flex-start !important;
    line-height: 1.4;
    height: 100%;
    overflow-x: auto;
    position: relative;
    z-index: 0;
  }

  .cm-sizer {
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 488px;
  }

  .smtcmp-apply-content {
    width: 100%;
  }

  .smtcmp-apply-decision-status {
    width: min(100%, var(--file-line-width));
    margin: 0 auto;
    color: var(--text-muted);
    font-size: var(--font-ui-smaller);
    line-height: 1.5;
  }

  .smtcmp-apply-decision-status {
    margin-bottom: var(--size-4-1);
    font-weight: var(--font-medium);
  }

  .view-header {
    height: var(--header-height);
    display: flex;
    border-bottom: var(--file-header-border);
    background-color: var(--background-primary);
    z-index: 1;
    position: relative;
    gap: var(--size-4-2);
    padding: 0 var(--size-4-3);
  }

  .view-header-title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
  }

  .view-actions {
    button {
      color: var(--text-normal);
      font-weight: var(--font-medium);
      gap: 2px;
    }
  }

  .smtcmp-diff-block {
    display: block;
    padding: var(--size-4-1) 0;
    color: var(--smtcmp-apply-text-color);
    line-height: var(--line-height-normal);
    width: 100%;
  }

  .smtcmp-diff-block--resolved {
    animation: smtcmp-apply-resolve-in 180ms ease;
  }

  .smtcmp-diff-block--resolved .smtcmp-apply-markdown-preview {
    animation: smtcmp-apply-resolve-in 180ms ease;
  }

  .smtcmp-diff-block.added {
    background-color: rgba(var(--smtcmp-incoming-color-rgb), 0.12);
  }

  .smtcmp-diff-block.removed {
    background-color: rgba(var(--smtcmp-current-color-rgb), 0.12);
  }

  .smtcmp-diff-block-container {
    position: relative;
    scroll-margin-top: var(--size-4-8);
  }

  .smtcmp-diff-block-actions {
    position: absolute;
    right: calc(
      (100% - var(--file-line-width)) / 2 - var(--smtcmp-apply-actions-offset)
    );
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 1;
  }

  .smtcmp-apply-paragraph {
    pointer-events: auto;
    position: relative;
    width: 100%;
    --smtcmp-apply-side-gap: calc((100% - var(--file-line-width)) / 2);
  }

  .smtcmp-apply-paragraph.has-changes {
    padding-right: 0;
    margin-right: 0;
  }

  .smtcmp-apply-paragraph-indicator {
    position: absolute;
    right: calc(var(--smtcmp-apply-side-gap) - var(--smtcmp-apply-rail-offset));
    top: 4px;
    bottom: 4px;
    width: 2px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--interactive-accent) 28%, transparent);
    opacity: 0.6;
    transition:
      background 0.15s ease,
      opacity 0.15s ease;
  }

  .smtcmp-apply-paragraph.has-changes:hover .smtcmp-apply-paragraph-indicator,
  .smtcmp-apply-paragraph.has-changes:focus-within
    .smtcmp-apply-paragraph-indicator {
    background: color-mix(in srgb, var(--interactive-accent) 65%, transparent);
    opacity: 0.95;
  }

  .smtcmp-apply-paragraph.has-changes.is-active
    .smtcmp-apply-paragraph-indicator {
    background: color-mix(in srgb, var(--interactive-accent) 65%, transparent);
    opacity: 0.95;
  }

  .smtcmp-apply-paragraph.is-empty {
    min-height: 20px;
  }

  .smtcmp-apply-empty-line {
    height: 12px;
  }

  .smtcmp-apply-paragraph:hover .smtcmp-diff-block-actions,
  .smtcmp-apply-paragraph:focus-within .smtcmp-diff-block-actions {
    opacity: 1;
    pointer-events: auto;
  }

  .smtcmp-apply-paragraph.is-active .smtcmp-diff-block-actions {
    opacity: 1;
    pointer-events: auto;
  }

  .smtcmp-apply-action {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--text-muted) 40%, transparent);
    background: color-mix(in srgb, var(--background-primary) 92%, transparent);
    color: var(--text-normal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
    transition:
      background 0.15s ease,
      color 0.15s ease,
      border-color 0.15s ease,
      transform 0.15s ease;
  }

  .smtcmp-apply-action svg {
    width: 15px;
    height: 15px;
    stroke-width: 2.4;
    stroke: currentColor;
    fill: none;
    opacity: 0.95;
  }

  .smtcmp-apply-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
    font-weight: 600;
    color: currentColor;
  }

  .smtcmp-apply-action-icon--merge {
    font-size: 14px;
    font-weight: 500;
  }

  .smtcmp-apply-action:hover {
    transform: translateY(-1px);
    color: var(--text-normal);
    background: color-mix(
      in srgb,
      var(--background-primary) 82%,
      var(--background-secondary) 18%
    );
    border-color: color-mix(in srgb, var(--text-muted) 55%, transparent);
  }

  .smtcmp-apply-action-accept {
    color: rgb(var(--smtcmp-incoming-color-rgb));
  }

  .smtcmp-apply-action-reject {
    color: rgb(var(--smtcmp-current-color-rgb));
  }

  .smtcmp-accept {
    color: white;
    background: rgba(var(--smtcmp-incoming-color-rgb), 0.8);
    &:hover {
      background: rgba(var(--smtcmp-incoming-color-rgb), 1);
    }
  }

  .smtcmp-exclude {
    color: white;
    background: rgba(var(--smtcmp-current-color-rgb), 0.8);
    &:hover {
      background: rgba(var(--smtcmp-current-color-rgb), 1);
    }
  }

  /* Toolbar styles */
  .smtcmp-apply-toolbar {
    position: absolute;
    left: 50%;
    bottom: var(--size-4-3);
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    width: 100%;
    pointer-events: none;
    z-index: 3;
  }

  .smtcmp-apply-toolbar-pill {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: var(--size-4-3);
    padding: var(--size-4-2) var(--size-4-3);
    border-radius: 999px;
    max-width: calc(100% - var(--size-4-6));
    flex-wrap: wrap;
    justify-content: center;
    background: color-mix(
      in srgb,
      var(--background-secondary) 86%,
      transparent
    );
    border: 1px solid
      color-mix(in srgb, var(--background-modifier-border) 70%, transparent);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(12px);
  }

  .smtcmp-apply-toolbar-nav,
  .smtcmp-apply-toolbar-actions {
    display: flex;
    align-items: center;
    gap: var(--size-4-2);
  }

  .smtcmp-apply-progress {
    font-size: var(--font-ui-small);
    color: var(--text-muted);
    min-width: 52px;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  .smtcmp-toolbar-btn {
    padding: 6px var(--size-4-3);
    font-size: var(--font-ui-small);
    border-radius: 999px;
    cursor: pointer;
    border: 1px solid var(--background-modifier-border);
    background: color-mix(in srgb, var(--background-primary) 88%, transparent);
    color: var(--text-normal);

    &:hover {
      background: color-mix(
        in srgb,
        var(--background-modifier-hover) 88%,
        transparent
      );
    }
  }

  .smtcmp-toolbar-btn:disabled,
  .smtcmp-toolbar-icon-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .smtcmp-toolbar-icon-btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--background-modifier-border);
    background: color-mix(in srgb, var(--background-primary) 88%, transparent);
    color: var(--text-muted);
    cursor: pointer;

    &:hover {
      color: var(--text-normal);
      background: color-mix(
        in srgb,
        var(--background-modifier-hover) 88%,
        transparent
      );
    }
  }

  .smtcmp-toolbar-icon {
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
  }
}

:is(#smtcmp-apply-view, .smtcmp-apply-view-root)
  .smtcmp-apply-markdown.markdown-rendered {
  --render-scale: 1;
  color: var(--text-normal);
  font-family: var(--font-text, var(--font-interface));
  font-size: var(--font-text-size, 1rem);
  line-height: var(--line-height-normal);
  pointer-events: auto;
}

:is(#smtcmp-apply-view, .smtcmp-apply-view-root) .smtcmp-diff-block-content {
  max-width: var(--file-line-width);
  margin-left: auto;
  margin-right: auto;
}

:is(#smtcmp-apply-view, .smtcmp-apply-view-root) .smtcmp-inline-title {
  text-align: left;
  max-width: var(--file-line-width);
  margin-left: auto;
  margin-right: auto;
}

:is(#smtcmp-apply-view, .smtcmp-apply-view-root) .inline-title {
  text-align: left;
}

:is(#smtcmp-apply-view, .smtcmp-apply-view-root) .smtcmp-apply-markdown h1,
:is(#smtcmp-apply-view, .smtcmp-apply-view-root) .smtcmp-apply-markdown h2,
:is(#smtcmp-apply-view, .smtcmp-apply-view-root) .smtcmp-apply-markdown h3,
:is(#smtcmp-apply-view, .smtcmp-apply-view-root) .smtcmp-apply-markdown h4,
:is(#smtcmp-apply-view, .smtcmp-apply-view-root) .smtcmp-apply-markdown h5,
:is(#smtcmp-apply-view, .smtcmp-apply-view-root) .smtcmp-apply-markdown h6 {
  color: inherit;
}

:is(#smtcmp-apply-view, .smtcmp-apply-view-root)
  .smtcmp-apply-inline-markdown
  p {
  margin: 2px 0;
}

:is(#smtcmp-apply-view, .smtcmp-apply-view-root) .smtcmp-inline-diff {
  display: inline;
  padding: 0 3px;
  margin: 0 1px;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  text-decoration-skip-ink: none;
}

:is(#smtcmp-apply-view, .smtcmp-apply-view-root) .smtcmp-inline-diff-del {
  color: var(--smtcmp-inline-del-color);
  background: color-mix(
    in srgb,
    var(--background-modifier-border) 60%,
    transparent
  );
  text-decoration-line: underline line-through;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(
    in srgb,
    var(--smtcmp-inline-del-color) 70%,
    transparent
  );
  text-underline-offset: 2px;
}

:is(#smtcmp-apply-view, .smtcmp-apply-view-root) .smtcmp-inline-diff-add {
  color: var(--smtcmp-inline-add-color);
  background: color-mix(in srgb, var(--interactive-accent) 12%, transparent);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(
    in srgb,
    var(--interactive-accent) 60%,
    transparent
  );
  text-underline-offset: 2px;
}

.smtcmp-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes smtcmp-apply-resolve-in {
  from {
    opacity: 0.74;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .smtcmp-spinner,
  .smtcmp-chat-list-dropdown-content,
  .smtcmp-chat-list-dropdown-item-title-text,
  .smtcmp-chat-list-dropdown-item-title-skeleton,
  .smtcmp-inline-review-widget,
  .smtcmp-diff-block--resolved,
  .smtcmp-diff-block--resolved .smtcmp-apply-markdown-preview,
  .smtcmp-inline-review-floating-rail,
  .smtcmp-inline-review-floating-actions,
  .smtcmp-inline-review-floating-actions .smtcmp-apply-action,
  .smtcmp-plan-preview-panel--streaming.is-exiting,
  .smtcmp-plan-preview-panel--streaming.is-exiting
    .smtcmp-plan-streaming-preview-body,
  .smtcmp-plan-preview-panel--resolved.is-entering,
  .smtcmp-plan-streaming-preview-line {
    animation: none !important;
    transition: none !important;
  }
}

button.smtcmp-chat-input-model-select {
  background-color: transparent;
  box-shadow: none;
  border: 0;
  padding: 0;
  font-size: var(--font-smallest);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  cursor: pointer;
  height: auto;

  &:hover {
    color: var(--text-normal);
  }

  .smtcmp-chat-input-model-select__model-name {
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .smtcmp-chat-input-model-select__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.smtcmp-query-progress {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
}

.smtcmp-query-progress-detail {
  font-size: var(--font-smallest);
  color: var(--text-faint);
}

/* ViewToggle 模式切换下拉的 purpose 类——按 surface.css 头部约定一次性需求
   自带 yolo-popover-<purpose> class。这里只覆盖宽度（跟 trigger 按钮严格对齐），
   背景沿用 --default 变体的 --background-primary：在侧栏/独立窗口里都能跟周围
   bg 自然过渡，不会出现"独立窗口白底但 popover 灰底"的违和。 */

.yolo-popover-surface.yolo-popover-view-toggle-mode {
  width: var(--radix-dropdown-menu-trigger-width);
}

/* 外部 Agent 工具卡：终端样式
 * 布局：状态条 → Progress（始终展开+自动滚底） → Output → metadata chips
 * 同步派遣与异步派遣完成卡片共用此样式（异步走 ExternalAgentToolCard 适配层）。
 */

.yolo-external-agent-card {
  display: flex;
  flex-direction: column;
  gap: var(--size-4-2);
  font-size: var(--font-ui-small);
}

/* ── 状态条 ── */

.yolo-external-agent-card__status-row {
  display: flex;
  align-items: center;
  gap: var(--size-4-2);
  flex-wrap: wrap;
}

.yolo-external-agent-card__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--size-2-1);
  padding: 2px var(--size-2-2);
  border-radius: var(--radius-s);
  font-size: var(--font-ui-smaller);
  font-weight: var(--font-medium);
  line-height: 1;
}

.yolo-external-agent-card__badge--running {
  background: var(--background-modifier-active-hover);
  color: var(--text-accent);
}

.yolo-external-agent-card__badge--success {
  background: color-mix(in srgb, var(--color-green) 15%, transparent);
  color: var(--color-green);
}

.yolo-external-agent-card__badge--aborted {
  background: color-mix(in srgb, var(--color-yellow) 15%, transparent);
  color: var(--color-yellow);
}

.yolo-external-agent-card__badge--error {
  background: color-mix(in srgb, var(--color-red) 15%, transparent);
  color: var(--color-red);
}

.yolo-external-agent-card__meta-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--size-2-1);
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
}

.yolo-external-agent-card__meta-inline-sep {
  opacity: 0.5;
}

.yolo-external-agent-card__cwd {
  font-family: var(--font-monospace);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: rtl;
  text-align: left;
}

.yolo-external-agent-card__abort-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--size-2-1);
  margin-left: auto;
  padding: var(--size-2-1) var(--size-2-3);
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-s);
  background: var(--background-secondary);
  color: var(--text-normal);
  font-size: var(--font-ui-smaller);
  cursor: pointer;
  transition: background 0.12s ease;
}

.yolo-external-agent-card__abort-btn:hover {
  background: color-mix(in srgb, var(--color-red) 15%, transparent);
  border-color: var(--color-red);
  color: var(--color-red);
}

/* ── 输出块（Progress / Output 共用） ── */

.yolo-external-agent-card__stream-section {
  display: flex;
  flex-direction: column;
  gap: var(--size-2-2);
}

.yolo-external-agent-card__stream-label {
  font-size: var(--font-ui-smaller);
  font-weight: var(--font-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.yolo-external-agent-card__console {
  margin: 0;
  padding: var(--size-4-2) var(--size-4-3);
  background: var(--background-primary-alt);
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-s);
  font-family: var(--font-monospace);
  font-size: var(--font-ui-smaller);
  line-height: 1.5;
  color: var(--text-normal);
  white-space: pre-wrap;
  word-break: break-word;
}

.yolo-external-agent-card__console--progress {
  color: var(--text-muted);
}

/* progress 中按行渲染的容器（用于 claude 标签着色） */

.yolo-external-agent-card__line {
  display: block;
}

.yolo-external-agent-card__line--system {
  color: var(--text-faint);
}

.yolo-external-agent-card__line--thinking {
  color: var(--text-accent);
  font-style: italic;
}

.yolo-external-agent-card__line--tool {
  color: var(--color-blue);
}

.yolo-external-agent-card__line--tool-result {
  color: var(--color-green);
}

.yolo-external-agent-card__line--done {
  color: var(--text-success);
  font-weight: var(--font-medium);
}

.yolo-external-agent-card__line--section {
  color: var(--text-normal);
  font-weight: var(--font-semibold);
}

.yolo-external-agent-card__line--parse-error {
  color: var(--text-error);
  opacity: 0.7;
}

/* ── metadata chips（底部） ── */

.yolo-external-agent-card__meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-4-2);
  padding-top: var(--size-2-2);
  border-top: 1px solid var(--background-modifier-border);
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
}

.yolo-external-agent-card__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--size-2-1);
}

.yolo-external-agent-card__chip-icon {
  opacity: 0.7;
  flex-shrink: 0;
}

/* ── 截断/无输出提示 ── */

.yolo-external-agent-card__truncation-notice {
  font-size: var(--font-ui-smaller);
  color: var(--text-warning);
  padding: var(--size-2-1) 0;
}

.yolo-external-agent-card__no-output {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  font-style: italic;
}

/* Custom continue inline panel */

.smtcmp-smart-space-overlay-host {
  position: relative;
}

.smtcmp-smart-space-overlay-root {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.smtcmp-smart-space-overlay {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  animation: smtcmp-smart-space-fade-in 0.25s cubic-bezier(0.16, 1, 0.3, 1)
    forwards;
}

.smtcmp-smart-space-overlay.closing {
  animation: smtcmp-smart-space-fade-out 0.2s cubic-bezier(0.4, 0, 1, 1)
    forwards;
}

/* Smart Space 弹出动画 */

@keyframes smtcmp-smart-space-fade-in {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Smart Space 关闭动画 */

@keyframes smtcmp-smart-space-fade-out {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}

/* Smart Space 内部元素淡入动画 */

@keyframes smtcmp-smart-space-item-fade-in {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.smtcmp-smart-space-inline-anchor {
  display: inline-block;
  width: 0;
  height: 0;
  line-height: 0;
}

.smtcmp-smart-space-panel {
  position: relative;
  width: 100%;
  max-width: min(var(--file-line-width, 720px), 92vw);
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: min(440px, 70vh);
  pointer-events: none;
}

.smtcmp-smart-space-input-card {
  background: var(--background-primary);
  border: 1px solid var(--h1-color, var(--interactive-accent));
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-l, 0 4px 12px rgba(0, 0, 0, 0.08));
  overflow: visible;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  animation: smtcmp-smart-space-item-fade-in 0.3s cubic-bezier(0.16, 1, 0.3, 1)
    0.05s backwards;
  pointer-events: auto;
  position: relative;
}

.smtcmp-smart-space-input-card:focus-within {
  border-color: var(--h1-color, var(--interactive-accent));
  box-shadow:
    0 0 0 2px
      color-mix(
        in srgb,
        var(--h1-color, var(--interactive-accent)) 20%,
        transparent
      ),
    var(--shadow-l, 0 4px 12px rgba(0, 0, 0, 0.08));
}

.smtcmp-smart-space-input-card:hover {
  background: var(--background-primary) !important;
}

.smtcmp-smart-space-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  flex-wrap: nowrap;
  position: relative;
}

.smtcmp-smart-space-header.is-empty {
  align-items: center;
}

.smtcmp-smart-space-header:not(.is-empty) .smtcmp-smart-space-avatar,
.smtcmp-smart-space-header:not(.is-empty) .smtcmp-smart-space-controls {
  margin-top: 6px;
}

.smtcmp-smart-space-header:hover {
  background: transparent !important;
}

.smtcmp-smart-space-avatar {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--h1-color, var(--interactive-accent)) 16%,
    transparent
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--h1-color, var(--interactive-accent));
  flex-shrink: 0;
}

.smtcmp-smart-space-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  max-width: 100%;
}

.smtcmp-smart-space-input-wrapper:hover {
  background: transparent !important;
}

.smtcmp-smart-space-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-normal);
  font-family: var(--font-interface);
  font-size: var(--font-ui-medium);
  line-height: 1.5;
  min-height: 24px;
  max-height: 200px;
  box-shadow: none;
  position: relative;
  cursor: text;
  display: flex;
  align-items: flex-start;
  padding: 4px 0;
}

.smtcmp-smart-space-input.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.smtcmp-smart-space-input.is-empty {
  align-items: center;
}

.smtcmp-smart-space-input-placeholder {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.smtcmp-smart-space-input.is-multiline .smtcmp-smart-space-input-placeholder {
  top: 4px;
  transform: none;
}

.smtcmp-smart-space-content-editable {
  width: 100%;
  min-height: 24px;
  max-height: 200px;
  overflow-y: auto;
  outline: none;
  display: block;
  flex: 1;
  font-size: var(--font-ui-medium);
  line-height: 1.5;
}

.smtcmp-smart-space-input-hint {
  font-size: var(--font-ui-smaller);
  color: var(--text-faint);
  display: flex;
  align-items: center;
  gap: 4px;
  user-select: none;
  opacity: 0.8;
}

.smtcmp-smart-space-mention-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.smtcmp-smart-space-mention-popover {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: flex-start;
  pointer-events: none;
  z-index: 5;
}

.smtcmp-smart-space-mention-popover[data-placement='bottom'] {
  bottom: auto;
  top: calc(100% + 10px);
}

.smtcmp-smart-space-mention-dropdown {
  display: block;
  right: auto;
  width: min(100%, var(--smtcmp-chat-typeahead-max-width, 480px));
  min-width: 0;
  max-width: min(100%, var(--smtcmp-chat-typeahead-max-width, 480px));
  pointer-events: auto;
  padding: 0;
  /* 视觉表面由 .yolo-popover-surface--smart-space 提供；此处不再覆盖 background/border/box-shadow。
     宽度上限用 CSS 变量 --smtcmp-chat-typeahead-max-width 控制：
     默认 480px；centered 容器（input.css）会覆盖为 400px。 */
}

.smtcmp-smart-space-mention-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  background: transparent;
  border: none;
  padding: 8px;
}

.yolo-popover-surface--smart-space .smtcmp-smart-space-mention-list {
  max-height: min(320px, var(--smtcmp-typeahead-available-height, 320px));
  overflow-y: auto;
  scrollbar-width: thin;
  scroll-padding-top: 8px;
  scroll-padding-bottom: 8px;
}

.smtcmp-smart-space-mention-option {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border: none;
  background: transparent;
  color: var(--text-normal);
  cursor: pointer;
  text-align: left;
}

.smtcmp-smart-space-mention-option-icon {
  color: var(--h1-color, var(--interactive-accent));
  margin-top: 0;
  flex-shrink: 0;
}

.smtcmp-smart-space-mention-option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.smtcmp-smart-space-mention-option-text--inline-meta {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.smtcmp-smart-space-mention-option-name {
  font-weight: 600;
  font-size: var(--font-ui-small);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.smtcmp-smart-space-mention-option-text--inline-meta
  .smtcmp-smart-space-mention-option-name {
  min-width: 0;
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.smtcmp-smart-space-mention-option-text--inline-meta
  .smtcmp-smart-space-mention-option-path {
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
}

.smtcmp-smart-space-mention-option-path {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
}

.smtcmp-smart-space-mention-option-inline-meta {
  flex: 1;
  min-width: 0;
}

.yolo-popover-surface--smart-space
  .smtcmp-smart-space-mention-list
  > .smtcmp-smart-space-mention-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  white-space: normal;
  line-height: 1.35;
  background: transparent;
  border: none;
  margin: 0;
  box-shadow: none;
  border-radius: 8px;
  transform: none;
  scroll-margin-top: 8px;
  scroll-margin-bottom: 8px;
}

.yolo-popover-surface--smart-space
  .smtcmp-smart-space-mention-list
  > .smtcmp-smart-space-mention-option:focus-visible {
  outline: 1px solid
    color-mix(
      in srgb,
      var(--h1-color, var(--interactive-accent)) 70%,
      transparent
    );
}

.yolo-popover-surface--smart-space
  .smtcmp-smart-space-mention-list
  > .smtcmp-smart-space-mention-option::before {
  display: none;
}

.yolo-popover-surface--smart-space
  .smtcmp-smart-space-mention-list
  > .smtcmp-smart-space-mention-option:hover,
.yolo-popover-surface--smart-space
  .smtcmp-smart-space-mention-list
  > .smtcmp-smart-space-mention-option[data-highlighted='true'] {
  background: color-mix(
    in srgb,
    var(--h1-color, var(--interactive-accent)) 14%,
    transparent
  );
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px
    color-mix(
      in srgb,
      var(--h1-color, var(--interactive-accent)) 40%,
      transparent
    );
  border: none;
}

.smtcmp-smart-space-mention-empty {
  padding: 10px 12px;
  font-size: var(--font-ui-small);
  color: var(--text-muted);
}

.smtcmp-smart-space-mention-option-check {
  margin-left: auto;
  margin-top: 0;
  color: var(--text-accent, var(--interactive-accent));
}

.smtcmp-smart-space-mention-option-expand {
  margin-left: auto;
  color: var(--text-muted);
  opacity: 0.85;
}

.smtcmp-smart-space-section-card {
  flex: 1;
  min-height: 0;
  background: var(--background-primary);
  border: 1px solid var(--h1-color, var(--interactive-accent));
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s, 0 2px 8px rgba(0, 0, 0, 0.05));
  padding: 12px;
  display: flex;
  flex-direction: column;
  overflow: visible;
  width: min(420px, 100%);
  align-self: flex-start;
  animation: smtcmp-smart-space-item-fade-in 0.3s cubic-bezier(0.16, 1, 0.3, 1)
    0.1s backwards;
  pointer-events: auto;
}

.smtcmp-smart-space-section-card.is-floating {
  position: absolute;
  left: 0;
  flex: 0 0 auto;
  z-index: 1;
}

.smtcmp-smart-space-section-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 4px;
}

.smtcmp-smart-space-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.smtcmp-smart-space-section + .smtcmp-smart-space-section {
  padding-top: 10px;
  border-top: 1px solid var(--background-modifier-border);
}

.smtcmp-smart-space-section-title {
  font-size: var(--font-ui-smaller);
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.smtcmp-smart-space-section-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 2px;
  padding-right: 2px;
}

.smtcmp-smart-space-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: var(--radius-s);
  padding: 6px 8px;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
  animation: smtcmp-smart-space-item-fade-in 0.25s cubic-bezier(0.16, 1, 0.3, 1)
    backwards;
}

/* 为不同的选项添加渐进式延迟 */

.smtcmp-smart-space-item:nth-child(1) {
  animation-delay: 0.15s;
}

.smtcmp-smart-space-item:nth-child(2) {
  animation-delay: 0.18s;
}

.smtcmp-smart-space-item:nth-child(3) {
  animation-delay: 0.21s;
}

.smtcmp-smart-space-item:nth-child(4) {
  animation-delay: 0.24s;
}

.smtcmp-smart-space-item:nth-child(5) {
  animation-delay: 0.27s;
}

.smtcmp-smart-space-item:nth-child(6) {
  animation-delay: 0.3s;
}

.smtcmp-smart-space-item:nth-child(7) {
  animation-delay: 0.33s;
}

.smtcmp-smart-space-item:nth-child(8) {
  animation-delay: 0.36s;
}

.smtcmp-smart-space-item:hover,
.smtcmp-smart-space-item:focus,
.smtcmp-smart-space-item:focus-visible {
  background: color-mix(
    in srgb,
    var(--background-modifier-hover) 40%,
    transparent
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--interactive-accent) 55%,
    transparent
  ) !important;
  outline: none;
}

/* 键盘导航时禁用鼠标 hover 的视觉反馈，避免与焦点状态冲突 */

.smtcmp-smart-space-section-card.is-keyboard-nav
  .smtcmp-smart-space-item:hover:not(:focus-visible):not(:focus) {
  background: transparent !important;
  border-color: transparent !important;
}

.smtcmp-smart-space-item:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

.smtcmp-smart-space-item-icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--h1-color, var(--interactive-accent)) 12%,
    transparent
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--h1-color, var(--interactive-accent));
  flex-shrink: 0;
}

.smtcmp-smart-space-item-icon-svg {
  width: 14px;
  height: 14px;
}

.smtcmp-smart-space-item-label {
  flex: 1;
  font-size: var(--font-ui-small);
  color: var(--text-normal);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smtcmp-smart-space-status {
  display: flex;
  align-items: center;
  padding: 4px 0;
  margin-top: -6px;
  animation: smtcmp-status-fade-in 0.3s ease;
}

@keyframes smtcmp-status-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.smtcmp-smart-space-error {
  font-size: var(--font-ui-smaller);
  color: var(--text-error);
  padding-left: 8px;
}

/* Smart Space Controls Container */

.smtcmp-smart-space-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
  width: auto;
  justify-content: flex-end;
  flex-wrap: nowrap;
  margin-left: auto;
}

/* Smart Space Model Select - 精致的按钮设计 */

.smtcmp-smart-space-model-select {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
}

@media (max-width: 640px) {
  .smtcmp-smart-space-header {
    flex-wrap: wrap;
  }

  .smtcmp-smart-space-controls {
    flex: 1 1 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-left: 0;
  }

  .smtcmp-smart-space-model-select {
    flex: 1 1 160px;
  }
}

/* 多行输入时，将模型选择等控件移到底部一行，右对齐 */

.smtcmp-smart-space-header:not(.is-empty) {
  padding-bottom: 22px;
}

.smtcmp-smart-space-header:not(.is-empty) .smtcmp-smart-space-input-wrapper {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 0;
}

.smtcmp-smart-space-header:not(.is-empty) .smtcmp-smart-space-controls {
  position: absolute;
  right: 16px;
  bottom: 16px;
  flex: 0 0 auto;
  min-width: 0;
  width: auto;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  margin-left: 0;
}

.smtcmp-smart-space-model-select .smtcmp-chat-input-model-select {
  font-size: var(--font-ui-smaller);
  padding: 5px 9px 5px 10px;
  height: auto;
  min-height: 26px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-normal);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  box-shadow: none;
}

.smtcmp-smart-space-model-select .smtcmp-chat-input-model-select:hover,
.smtcmp-smart-space-model-select .smtcmp-chat-input-model-select:focus,
.smtcmp-smart-space-model-select .smtcmp-chat-input-model-select:focus-visible {
  background: color-mix(
    in srgb,
    var(--background-modifier-hover) 85%,
    transparent
  );
  border-color: color-mix(
    in srgb,
    var(--h1-color, var(--interactive-accent)) 35%,
    transparent
  );
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(-0.5px);
  outline: none;
}

.smtcmp-smart-space-model-select
  .smtcmp-chat-input-model-select[data-state='open'] {
  border-color: var(--h1-color, var(--interactive-accent));
  background: color-mix(
    in srgb,
    var(--background-modifier-hover) 90%,
    transparent
  );
  box-shadow:
    0 0 0 2px
      color-mix(
        in srgb,
        var(--h1-color, var(--interactive-accent)) 15%,
        transparent
      ),
    0 2px 8px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.smtcmp-smart-space-model-select .smtcmp-chat-input-model-select__model-name {
  font-size: var(--font-ui-smaller);
  font-weight: var(--font-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
  line-height: 1.3;
}

.smtcmp-smart-space-model-select .smtcmp-chat-input-model-select__icon {
  margin-left: 5px;
  display: flex;
  align-items: center;
  opacity: 0.5;
  transition: all 0.2s ease;
}

.smtcmp-smart-space-model-select
  .smtcmp-chat-input-model-select:hover
  .smtcmp-chat-input-model-select__icon,
.smtcmp-smart-space-model-select
  .smtcmp-chat-input-model-select:focus
  .smtcmp-chat-input-model-select__icon,
.smtcmp-smart-space-model-select
  .smtcmp-chat-input-model-select:focus-visible
  .smtcmp-chat-input-model-select__icon {
  opacity: 0.75;
}

.smtcmp-smart-space-model-select
  .smtcmp-chat-input-model-select[data-state='open']
  .smtcmp-chat-input-model-select__icon {
  opacity: 1;
  color: var(--h1-color, var(--interactive-accent));
}

.smtcmp-chat-sidebar-model-select {
  flex: 0 1 clamp(140px, 28vw, 280px);
  display: flex;
  margin-left: -6px;
  min-width: 0;
}

.smtcmp-chat-sidebar-model-select .smtcmp-chat-input-model-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px 10px 6px 6px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  color: var(--text-muted);
  gap: 8px;
  font-size: var(--font-ui-smaller);
  font-weight: var(--font-medium);
  min-height: 30px;
  transition: all 0.18s ease;
}

.smtcmp-chat-sidebar-model-select .smtcmp-chat-input-model-select:hover,
.smtcmp-chat-sidebar-model-select .smtcmp-chat-input-model-select:focus,
.smtcmp-chat-sidebar-model-select
  .smtcmp-chat-input-model-select:focus-visible {
  color: var(--text-normal);
}

.smtcmp-chat-sidebar-model-select .smtcmp-chat-input-model-select__model-name {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.smtcmp-chat-sidebar-model-select .smtcmp-chat-input-model-select__icon {
  margin-left: 6px;
  display: flex;
  align-items: center;
  opacity: 0.6;
  transition: opacity 0.18s ease;
}

.smtcmp-chat-sidebar-model-select
  .smtcmp-chat-input-model-select:hover
  .smtcmp-chat-input-model-select__icon,
.smtcmp-chat-sidebar-model-select
  .smtcmp-chat-input-model-select:focus
  .smtcmp-chat-input-model-select__icon,
.smtcmp-chat-sidebar-model-select
  .smtcmp-chat-input-model-select:focus-visible
  .smtcmp-chat-input-model-select__icon {
  opacity: 0.85;
}

/* --smart-space 变体下 model-select-list 的容器样式。
   --default 变体的对应规则在 src/styles/chat/popover.css。 */

.yolo-popover-surface--smart-space .smtcmp-model-select-list {
  max-height: 380px;
  overflow-y: auto;
  scrollbar-width: thin;
  padding: 8px;
}

.yolo-popover-surface--smart-space .smtcmp-model-select-list::-webkit-scrollbar,
.yolo-popover-surface--default .smtcmp-model-select-list::-webkit-scrollbar {
  width: 8px;
}

.yolo-popover-surface--smart-space
  .smtcmp-model-select-list::-webkit-scrollbar-track,
.yolo-popover-surface--default
  .smtcmp-model-select-list::-webkit-scrollbar-track {
  background: transparent;
  margin: 8px 0;
}

.yolo-popover-surface--smart-space
  .smtcmp-model-select-list::-webkit-scrollbar-thumb {
  background: color-mix(
    in srgb,
    var(--h1-color, var(--interactive-accent)) 25%,
    transparent
  );
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.yolo-popover-surface--default
  .smtcmp-model-select-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-muted) 30%, transparent);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.yolo-popover-surface--smart-space
  .smtcmp-model-select-list::-webkit-scrollbar-thumb:hover {
  background: color-mix(
    in srgb,
    var(--h1-color, var(--interactive-accent)) 40%,
    transparent
  );
  background-clip: padding-box;
}

.yolo-popover-surface--default
  .smtcmp-model-select-list::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--text-muted) 50%, transparent);
  background-clip: padding-box;
}

.yolo-popover-surface--smart-space .smtcmp-popover-group-label {
  display: block;
  margin: 0;
  padding: 8px 12px 6px 12px;
  font-size: 10px;
  font-weight: var(--font-bold);
  color: color-mix(in srgb, var(--text-muted) 85%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  user-select: none;
  opacity: 0.8;
}

.yolo-popover-surface--smart-space .smtcmp-popover-group-separator {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 4px,
    color-mix(in srgb, var(--background-modifier-border) 50%, transparent) 16px,
    color-mix(in srgb, var(--background-modifier-border) 50%, transparent)
      calc(100% - 16px),
    transparent calc(100% - 4px)
  );
  margin: 6px 0;
}

.yolo-popover-surface--smart-space
  .smtcmp-model-select-list
  > .smtcmp-popover-item {
  position: relative;
  padding: 8px 12px;
  margin: 2px 0;
  min-width: 0;
  font-size: var(--font-ui-small);
  color: var(--text-normal);
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  outline: none;
}

.yolo-popover-surface--smart-space
  .smtcmp-model-select-list
  > .smtcmp-popover-item:hover,
.yolo-popover-surface--smart-space
  .smtcmp-model-select-list
  > .smtcmp-popover-item[data-highlighted] {
  background: color-mix(
    in srgb,
    var(--background-modifier-hover) 80%,
    transparent
  );
  color: var(--text-normal);
}

.yolo-popover-surface--smart-space
  .smtcmp-model-select-list
  > .smtcmp-popover-item:active {
  transform: scale(0.98);
}

/* Smart Space Gemini Tools */

.smtcmp-smart-space-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.smtcmp-smart-space-tool-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--text-muted);
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  border-radius: var(--radius-s);
  cursor: pointer;
  transition: all 0.15s ease;
}

.smtcmp-smart-space-tool-button:hover,
.smtcmp-smart-space-tool-button:focus,
.smtcmp-smart-space-tool-button:focus-visible {
  color: var(--text-normal);
  background: color-mix(
    in srgb,
    var(--background-modifier-hover) 50%,
    transparent
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--interactive-accent) 50%,
    transparent
  ) !important;
  outline: none;
}

.smtcmp-smart-space-tool-button.active {
  color: var(--interactive-accent);
  background: transparent;
  border-color: var(--interactive-accent) !important;
}

.smtcmp-smart-space-tool-button.active:hover,
.smtcmp-smart-space-tool-button.active:focus,
.smtcmp-smart-space-tool-button.active:focus-visible {
  color: var(--interactive-accent-hover);
  background: color-mix(
    in srgb,
    var(--interactive-accent) 10%,
    transparent
  ) !important;
  border-color: var(--interactive-accent-hover) !important;
  outline: none;
}

/* Floating Panel */

.smtcmp-floating-panel-container {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
}

.smtcmp-floating-panel {
  position: fixed;
  max-width: 92vw;
  background: var(--background-primary);
  color: var(--text-normal);
  box-shadow: var(--shadow-s);
  border: 1px solid var(--background-modifier-border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.smtcmp-floating-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  cursor: move;
  user-select: none;
  border-bottom: 1px solid var(--background-modifier-border);
  background: var(--background-secondary);
}

.smtcmp-floating-panel-title {
  font-weight: 600;
}

.smtcmp-floating-panel-close {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.smtcmp-floating-panel-body {
  padding: 12px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.smtcmp-floating-panel-drag-handle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  cursor: move;
}

.smtcmp-floating-panel-resize-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  right: 6px;
  bottom: 6px;
  cursor: nwse-resize;
  border-right: 2px solid var(--background-modifier-border);
  border-bottom: 2px solid var(--background-modifier-border);
}

/* Textarea container and inputs */

.smtcmp-textarea-container {
  width: 100%;
  height: 100%;
}

.smtcmp-instruction-editor-container {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
}

.smtcmp-instruction-textarea {
  width: 100%;
  height: 100%;
  min-height: 160px;
  resize: none;
}

.smtcmp-modal-input-container {
  width: 100%;
  margin-bottom: 12px;
}

.smtcmp-prewrap {
  white-space: pre-wrap;
}

.smtcmp-display-contents {
  display: contents;
}

/* Folder selection list */

.smtcmp-folder-selection {
  width: 100%;
}

.smtcmp-folder-selection-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.smtcmp-folder-selection-title {
  font-weight: 600;
  opacity: 0.8;
}

.smtcmp-folder-selection-actions {
  display: flex;
  gap: 6px;
}

.smtcmp-folder-selection-btn {
  border: 1px solid var(--background-modifier-border);
  border-radius: 0;
  background: var(--background-primary);
  color: var(--text-muted);
  padding: 0 6px;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  cursor: pointer;
}

.smtcmp-folder-selection-picker {
  border: 1px solid var(--background-modifier-border);
  border-radius: 0;
  padding: 6px 8px;
  min-height: 32px;
  position: relative;
}

.smtcmp-folder-selection-empty {
  opacity: 0.7;
}

.smtcmp-folder-selection-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.smtcmp-folder-selection-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 0;
  background: var(--background-secondary);
  cursor: grab;
  user-select: none;
}

.smtcmp-folder-selection-chip-handle {
  opacity: 0.5;
  font-size: 12px;
}

.smtcmp-folder-selection-chip-path {
  font-family: var(--font-monospace);
  font-size: 12px;
}

.smtcmp-folder-selection-chip-remove {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1;
  user-select: none;
}

/* Floating panel positioning using CSS custom properties */

.smtcmp-floating-panel {
  position: fixed;
  top: var(--smtcmp-panel-top, 0px);
  left: var(--smtcmp-panel-left, 0px);
  width: var(--smtcmp-panel-width, 300px);
  height: var(--smtcmp-panel-height, 200px);
}

/* Removed attr() function usage due to browser compatibility issues */

/* LexicalMenu positioning - removed attr() usage for compatibility */

.smtcmp-typeahead-menu {
  position: fixed;
}

.smtcmp-typeahead-menu.smtcmp-menu-above {
  transform: translateY(-100%);
}

.smtcmp-typeahead-menu.smtcmp-menu-right-align {
  transform: translateX(-100%);
}

/* Other component styles */

.smtcmp-similarity-results-container {
  display: flex;
  flex-direction: column;
}

.smtcmp-url-citation-text {
  word-break: break-all;
}

.smtcmp-content-editable {
  background: transparent;
}

.smtcmp-fixed-position {
  position: fixed;
}

/* Smart Space Quick Actions Settings */

.smtcmp-smart-space-settings {
  margin-top: var(--size-4-3);
}

.smtcmp-smart-space-settings-row {
  display: flex;
  align-items: center;
  gap: var(--size-4-3);
  justify-content: space-between;
  flex-wrap: wrap;
}

.smtcmp-smart-space-settings-row .smtcmp-settings-desc {
  margin: 0;
  flex: 1 1 140px;
  min-width: 0;
}

.smtcmp-smart-space-settings-row .setting-item-control,
.smtcmp-smart-space-settings-row button {
  margin-left: auto;
}

.smtcmp-quick-action-editor {
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  padding: var(--size-4-3);
  margin: var(--size-4-3) 0;
  box-shadow: var(--shadow-s);
}

.smtcmp-quick-action-editor-inline {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: var(--radius-m);
  border-bottom-right-radius: var(--radius-m);
  margin-top: -1px;
  margin-bottom: var(--size-4-1);
  border-color: var(--background-modifier-border);
  animation: smtcmp-editor-expand 0.2s ease;
}

@keyframes smtcmp-editor-expand {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.smtcmp-quick-action-editor-new {
  margin-bottom: var(--size-4-3);
}

.smtcmp-quick-action-editor-buttons {
  display: flex;
  gap: var(--size-4-2);
  justify-content: flex-end;
  margin-top: var(--size-4-3);
  padding-top: var(--size-4-3);
  border-top: 1px solid var(--background-modifier-border);
}

.smtcmp-quick-actions-list {
  display: flex;
  flex-direction: column;
  gap: var(--size-4-1);
  margin-top: var(--size-4-3);
}

/* Group Header */

.smtcmp-quick-actions-group-header {
  font-size: var(--font-ui-small);
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  padding: var(--size-2-3) var(--size-4-1);
  margin-top: 0;
  margin-bottom: var(--size-4-1);
  text-transform: none;
  letter-spacing: 0.02em;
}

.smtcmp-quick-actions-group-header:first-child {
  margin-top: 0;
}

/* Group Divider */

.smtcmp-quick-actions-group-divider {
  height: 1px;
  background: transparent;
  border-top: 1px dashed var(--background-modifier-border);
  margin: var(--size-4-2) 0 var(--size-4-1) 0;
}

.smtcmp-quick-action-item {
  display: flex;
  align-items: stretch;
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  transition: all 0.15s ease;
  cursor: move;
  position: relative;
}

.smtcmp-quick-action-item:hover {
  border-color: var(--background-modifier-border-hover);
  box-shadow: var(--shadow-xs);
}

.smtcmp-quick-action-item.editing {
  border-color: var(--background-modifier-border);
  cursor: default;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
  background: color-mix(
    in srgb,
    var(--interactive-accent) 5%,
    var(--background-primary)
  );
}

.smtcmp-quick-action-item.disabled {
  opacity: 0.6;
}

.smtcmp-quick-action-item.disabled .smtcmp-quick-action-content {
  color: var(--text-muted);
}

.smtcmp-quick-action-item.smtcmp-quick-action-dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.smtcmp-quick-action-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: 0 0 48px;
  align-self: stretch;
  background: var(--background-secondary);
  border-right: 1px solid var(--background-modifier-border);
  cursor: grab;
  color: var(--text-faint);
  transition: color 0.15s ease;
}

.smtcmp-quick-action-drag-handle:hover {
  color: var(--text-muted);
}

.smtcmp-quick-action-drag-handle .smtcmp-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.smtcmp-quick-action-drag-handle
  .smtcmp-drag-handle.smtcmp-drag-handle--active {
  color: var(--interactive-accent);
}

.smtcmp-quick-action-content {
  flex: 1;
  padding: var(--size-4-3);
  min-width: 0;
  cursor: default;
}

.smtcmp-quick-action-header {
  display: flex;
  align-items: center;
  gap: var(--size-4-2);
  margin-bottom: var(--size-4-1);
}

.smtcmp-quick-action-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--h1-color, var(--interactive-accent));
  flex-shrink: 0;
}

.smtcmp-quick-action-icon svg {
  width: 16px;
  height: 16px;
}

.smtcmp-quick-action-label {
  font-size: var(--font-ui-small);
  font-weight: var(--font-medium);
  color: var(--text-normal);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smtcmp-quick-action-category {
  display: inline-block;
  font-size: var(--font-ui-smaller);
  padding: 2px 8px;
  border-radius: var(--radius-s);
  background: var(--background-modifier-border);
  color: var(--text-muted);
  white-space: nowrap;
}

.smtcmp-quick-action-category.category-suggestions {
  background: color-mix(in srgb, var(--interactive-accent) 15%, transparent);
  color: var(--interactive-accent);
}

.smtcmp-quick-action-category.category-writing {
  background: color-mix(in srgb, var(--color-green) 15%, transparent);
  color: var(--color-green);
}

.smtcmp-quick-action-category.category-thinking {
  background: color-mix(in srgb, var(--color-blue) 15%, transparent);
  color: var(--color-blue);
}

.smtcmp-quick-action-category.category-custom {
  background: color-mix(in srgb, var(--color-purple) 15%, transparent);
  color: var(--color-purple);
}

.smtcmp-quick-action-disabled-badge {
  display: inline-block;
  font-size: var(--font-ui-smaller);
  padding: 2px 6px;
  border-radius: var(--radius-s);
  background: var(--background-modifier-error);
  color: var(--text-error);
  margin-left: var(--size-4-1);
}

.smtcmp-quick-action-instruction {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  line-height: var(--line-height-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.smtcmp-quick-action-controls {
  display: flex;
  align-items: center;
  gap: var(--size-2-1);
  padding: var(--size-4-2);
  background: var(--background-secondary-alt);
  border-left: 1px solid var(--background-modifier-border);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  cursor: default;
}

.smtcmp-quick-action-controls button {
  padding: var(--size-2-2);
  background: transparent;
  border: none;
  border-radius: var(--radius-s);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.smtcmp-quick-action-controls button:hover:not(:disabled) {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}

.smtcmp-quick-action-controls button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.smtcmp-quick-action-controls button svg {
  width: 14px;
  height: 14px;
}

/* Override button styles for consistency with Obsidian */

.smtcmp-smart-space-settings .setting-item-control button {
  margin-left: 0;
}

.smtcmp-smart-space-settings .setting-item {
  flex-wrap: wrap;
  column-gap: var(--size-4-3);
  row-gap: var(--size-2-2);
}

.smtcmp-smart-space-settings .setting-item-info {
  min-width: 0;
  flex: 1 1 220px;
}

.smtcmp-smart-space-settings .setting-item-control {
  max-width: 100%;
  margin-left: auto;
}

.smtcmp-smart-space-trigger-setting .setting-item-control select {
  width: 220px;
}

/* Modal styles for quick action editor */

.smtcmp-quick-action-editor .setting-item {
  border-top: none;
  padding-top: var(--size-4-2);
}

.smtcmp-quick-action-editor .setting-item:first-child {
  padding-top: 0;
}

.smtcmp-quick-action-editor textarea {
  min-height: 80px;
  resize: vertical;
}

/* SearchableDropdown Component */

.smtcmp-searchable-dropdown {
  position: relative;
  width: 100%;
}

.smtcmp-obsidian-dropdown-optgroup,
.smtcmp-obsidian-dropdown-option {
  padding-inline-start: 0;
  padding-left: 0;
  margin-left: 0;
  text-indent: 0;
}

.smtcmp-searchable-dropdown__input {
  width: 100%;
  padding: var(--size-2-2) var(--size-4-2);
  background: var(--background-modifier-form-field);
  border: var(--input-border-width) solid var(--background-modifier-border);
  border-radius: var(--radius-s);
  color: var(--text-normal);
  font-family: inherit;
  font-size: var(--font-ui-small);
  line-height: var(--line-height-normal);
  transition: border-color 0.15s ease;
}

.smtcmp-searchable-dropdown__input:focus {
  outline: none;
  border-color: var(--interactive-accent);
}

.smtcmp-searchable-dropdown__input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--background-modifier-form-field);
}

.smtcmp-searchable-dropdown__input::placeholder {
  color: var(--text-faint);
}

.smtcmp-searchable-dropdown__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 300px;
  overflow-y: auto;
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
  z-index: 1000;
}

.smtcmp-searchable-dropdown__item {
  padding: var(--size-2-2) var(--size-4-2);
  cursor: pointer;
  font-size: var(--font-ui-small);
  color: var(--text-normal);
  transition: background-color 0.1s ease;
  text-align: left;
}

.smtcmp-searchable-dropdown__item:hover {
  background: var(--background-modifier-hover);
}

.smtcmp-searchable-dropdown__item--selected {
  background: var(--background-modifier-hover);
}

.smtcmp-searchable-dropdown__item--current {
  font-weight: var(--font-medium);
  color: var(--interactive-accent);
}

.smtcmp-searchable-dropdown__empty {
  padding: var(--size-4-2);
  text-align: center;
  color: var(--text-faint);
  font-size: var(--font-ui-smaller);
}

/* ==================== Quick Ask Panel - Cmd+K Style ==================== */

.smtcmp-quick-ask-overlay-host {
  position: relative;
}

.smtcmp-quick-ask-overlay-root {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--smtcmp-quick-ask-z-index, 900);
}

.smtcmp-quick-ask-overlay {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  -webkit-app-region: no-drag;
  animation: smtcmp-quick-ask-fade-in 0.2s cubic-bezier(0.16, 1, 0.3, 1)
    forwards;
}

.smtcmp-quick-ask-overlay.smtcmp-quick-ask-overlay--docking {
  transition:
    left 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    top 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    width 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.smtcmp-quick-ask-overlay.closing {
  animation: smtcmp-quick-ask-fade-out 0.15s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes smtcmp-quick-ask-fade-in {
  0% {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes smtcmp-quick-ask-fade-out {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-2px) scale(0.99);
  }
}

.smtcmp-quick-ask-inline-anchor {
  display: inline-block;
  width: 0;
  height: 0;
  line-height: 0;
}

/* Panel - compact by default, expands when has messages */

.smtcmp-quick-ask-panel {
  position: relative;
  -webkit-app-region: no-drag;
  --smtcmp-quick-ask-message-top-safe-area: 18px;
  min-width: min(420px, 83vw);
  max-width: min(560px, 90vw);
  width: min(420px, 83vw);
  margin: 0;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 8px;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.18),
    0 1px 0 color-mix(in srgb, white 2%, transparent);
  overflow: hidden;
}

.smtcmp-quick-ask-panel.has-messages {
  max-height: min(500px, 70vh);
}

.smtcmp-quick-ask-panel.has-messages .smtcmp-quick-ask-input-row {
  order: 2;
}

/* Input Row */

.smtcmp-quick-ask-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 32px 0 6px;
  margin-top: 4px;
  background: transparent;
  border-bottom: none;
  position: relative;
  min-height: 0;
  order: 0;
}

.smtcmp-quick-ask-assistant-trigger {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: transparent !important;
  border: none !important;
  border-radius: 6px;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  font-size: var(--font-ui-smaller);
  font-weight: var(--font-medium);
  color: var(--text-muted) !important;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  margin-left: -5px;
}

.smtcmp-quick-ask-assistant-trigger:hover,
.smtcmp-quick-ask-assistant-trigger:focus-visible {
  background: color-mix(
    in srgb,
    var(--background-modifier-hover) 32%,
    transparent
  );
  color: var(--interactive-accent) !important;
  outline: none;
}

.smtcmp-quick-ask-assistant-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.smtcmp-quick-ask-assistant-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smtcmp-quick-ask-model-select {
  display: flex;
  align-items: center;
  margin-left: 0px;
  min-width: 0;
}

.smtcmp-quick-ask-toolbar
  .smtcmp-quick-ask-model-select
  .smtcmp-chat-input-model-select {
  display: inline-flex;
  align-items: center;
  gap: 0px;
  padding: 6px 10px;
  min-height: 28px;
  min-width: 0;
  max-width: 220px;
  flex-shrink: 1;
  border: none !important;
  border-radius: 6px;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
  transition: all 0.15s ease;
}

.smtcmp-quick-ask-toolbar
  .smtcmp-quick-ask-model-select
  .smtcmp-chat-input-model-select:hover,
.smtcmp-quick-ask-toolbar
  .smtcmp-quick-ask-model-select
  .smtcmp-chat-input-model-select:focus,
.smtcmp-quick-ask-toolbar
  .smtcmp-quick-ask-model-select
  .smtcmp-chat-input-model-select:focus-visible,
.smtcmp-quick-ask-toolbar
  .smtcmp-quick-ask-model-select
  .smtcmp-chat-input-model-select[data-state='open'] {
  background: color-mix(
    in srgb,
    var(--background-modifier-hover) 32%,
    transparent
  );
  border: none !important;
  box-shadow: none !important;
  color: var(--interactive-accent);
  outline: none;
}

.smtcmp-quick-ask-toolbar
  .smtcmp-quick-ask-model-select
  .smtcmp-chat-input-model-select__model-name {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smtcmp-quick-ask-toolbar
  .smtcmp-quick-ask-model-select
  .smtcmp-chat-input-model-select__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  color: inherit;
}

.smtcmp-quick-ask-toolbar
  .smtcmp-quick-ask-model-select
  .smtcmp-chat-input-model-select[data-state='open']
  .smtcmp-chat-input-model-select__icon {
  color: inherit !important;
  opacity: 0.85;
}

.smtcmp-quick-ask-toolbar
  .smtcmp-quick-ask-model-select
  .smtcmp-chat-input-model-select__icon
  svg {
  width: 12px;
  height: 12px;
}

.smtcmp-quick-ask-model-popover {
  min-width: max(var(--radix-dropdown-menu-trigger-width, 0px), 220px);
  max-width: min(
    calc(var(--radix-dropdown-menu-trigger-width, 320px) + 80px),
    360px
  );
}

/* Mode Select */

.smtcmp-quick-ask-mode-select {
  display: flex;
  align-items: center;
  margin-left: 0px;
  min-width: 0;
}

.smtcmp-quick-ask-toolbar .smtcmp-quick-ask-mode-select .smtcmp-mode-select {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  min-height: 28px;
  min-width: 0;
  max-width: 180px;
  flex-shrink: 1;
  border: none !important;
  border-radius: 6px;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
  font-weight: var(--font-medium);
  transition: all 0.15s ease;
}

.smtcmp-quick-ask-toolbar
  .smtcmp-quick-ask-mode-select
  .smtcmp-chat-input-model-select__model-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smtcmp-quick-ask-toolbar
  .smtcmp-quick-ask-mode-select
  .smtcmp-mode-select:hover,
.smtcmp-quick-ask-toolbar
  .smtcmp-quick-ask-mode-select
  .smtcmp-mode-select:focus,
.smtcmp-quick-ask-toolbar
  .smtcmp-quick-ask-mode-select
  .smtcmp-mode-select:focus-visible,
.smtcmp-quick-ask-toolbar
  .smtcmp-quick-ask-mode-select
  .smtcmp-mode-select[data-state='open'] {
  background: color-mix(
    in srgb,
    var(--background-modifier-hover) 32%,
    transparent
  );
  border: none !important;
  box-shadow: none !important;
  color: var(--interactive-accent);
  outline: none;
}

.smtcmp-mode-select__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.smtcmp-mode-select__icon svg {
  width: 14px;
  height: 14px;
}

.smtcmp-quick-ask-mode-popover {
  min-width: 140px;
  max-width: 200px;
}

.smtcmp-mode-select-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 10px !important;
}

.smtcmp-mode-select-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  color: var(--text-muted);
}

.smtcmp-mode-select-item__icon svg {
  width: 12px;
  height: 12px;
}

.smtcmp-mode-select-item__content {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.smtcmp-mode-select-item__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-normal);
}

.smtcmp-mode-select-item__desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}

.smtcmp-mode-select-item[data-state='checked'] .smtcmp-mode-select-item__icon,
.smtcmp-mode-select-item[data-highlighted] .smtcmp-mode-select-item__icon {
  color: var(--text-normal);
}

/* Assistant Dropdown */

.smtcmp-quick-ask-assistant-dropdown {
  min-width: 200px;
  width: clamp(200px, 34vw, 300px);
  background: color-mix(in srgb, var(--background-primary) 96%, transparent);
  border: 1px solid
    color-mix(in srgb, var(--background-modifier-border) 84%, transparent);
  border-radius: 8px;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.24),
    0 1px 0 color-mix(in srgb, white 2%, transparent);
  animation: smtcmp-quick-ask-fade-in 0.12s ease forwards;
}

/* Assistant Menu */

.smtcmp-quick-ask-assistant-menu {
  display: flex;
  flex-direction: column;
  padding: 6px 0;
}

.smtcmp-quick-ask-assistant-menu.compact {
  padding: 4px 0;
}

.smtcmp-quick-ask-assistant-menu-title {
  padding: 6px 12px;
  font-size: var(--font-ui-smaller);
  font-weight: 600;
  color: var(--text-muted);
  user-select: none;
}

.smtcmp-quick-ask-assistant-list {
  list-style: none;
  margin: 0;
  padding: 0;
  outline: none;
  max-height: 240px;
  overflow-y: auto;
}

.smtcmp-quick-ask-assistant-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.1s ease;
}

.smtcmp-quick-ask-assistant-menu.compact .smtcmp-quick-ask-assistant-item {
  padding: 5px 10px;
}

.smtcmp-quick-ask-assistant-item:hover,
.smtcmp-quick-ask-assistant-item.selected {
  background: var(--background-modifier-hover);
}

.smtcmp-quick-ask-assistant-item.current {
  background: color-mix(in srgb, var(--interactive-accent) 12%, transparent);
}

.smtcmp-quick-ask-assistant-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--interactive-accent);
}

.smtcmp-quick-ask-assistant-item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.smtcmp-quick-ask-assistant-item-name {
  font-size: var(--font-ui-small);
  font-weight: 500;
  color: var(--text-normal);
}

.smtcmp-quick-ask-assistant-item-description {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smtcmp-quick-ask-assistant-item-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--interactive-accent);
}

.smtcmp-quick-ask-assistant-menu-hint {
  padding: 6px 12px;
  font-size: var(--font-ui-smaller);
  color: var(--text-faint);
  border-top: 1px solid var(--background-modifier-border);
  margin-top: 4px;
}

/* Input field */

.smtcmp-quick-ask-input {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 22px;
  max-height: 200px;
  overflow: hidden;
  padding: 0 0 0 0;
  box-sizing: border-box;
}

.smtcmp-quick-ask-input.is-disabled {
  opacity: 1;
  pointer-events: none;
  min-height: 34px;
}

.smtcmp-quick-ask-content-editable {
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
  margin-right: 0;
  min-height: 20px;
  max-height: 200px;
  padding: 8px 6px 1px 6px !important;
  background: transparent;
  border: none;
  font-size: var(--font-ui-small);
  line-height: 1.6 !important;
  outline: none;
  overflow-y: auto;
  scrollbar-gutter: stable; /* keep gutter on the right */
  color: var(--text-normal);
}

.smtcmp-quick-ask-content-editable .smtcmp-lexical-content-editable-paragraph {
  line-height: 1.6 !important;
  padding-top: 0 !important;
}

.smtcmp-quick-ask-content-editable::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.smtcmp-quick-ask-content-editable:focus {
  border-color: transparent;
  box-shadow: none;
}

.smtcmp-quick-ask-input-placeholder {
  position: absolute;
  left: 6px;
  top: 9px;
  transform: none;
  color: color-mix(in srgb, var(--text-muted) 78%, transparent);
  pointer-events: none;
  font-size: var(--font-ui-small);
}

.smtcmp-quick-ask-run-status {
  position: absolute;
  left: 6px;
  bottom: 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: color-mix(in srgb, var(--text-muted) 88%, transparent);
  font-size: var(--font-ui-smaller);
  line-height: 1.2;
  pointer-events: none;
}

.smtcmp-quick-ask-input.is-disabled .smtcmp-quick-ask-run-status {
  position: static;
  padding: 12px 6px 2px;
}

.smtcmp-quick-ask-run-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--interactive-accent);
  opacity: 0.9;
  animation: smtcmp-quick-ask-status-pulse 1.4s ease-in-out infinite;
}

@keyframes smtcmp-quick-ask-status-pulse {
  0% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.25;
  }
}

.smtcmp-quick-ask-close-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: 0;
  padding: 0;
  background: transparent !important;
  border: none !important;
  border-radius: 6px;
  box-shadow: none !important;
  cursor: pointer;
  color: color-mix(in srgb, var(--text-normal) 82%, transparent);
  transition: color 0.15s ease;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  outline: none !important;
  position: absolute;
  top: 7px;
  right: 6px;
  z-index: 3;
}

.smtcmp-quick-ask-close-button:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--text-normal);
}

/* Bottom Toolbar - Cursor style: [Assistant ▼] ... [Copy] [Insert] [Send] */

.smtcmp-quick-ask-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 8px 6px;
  border-top: none;
  background: color-mix(in srgb, var(--background-primary) 96%, transparent);
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  order: 3;
}

.smtcmp-quick-ask-panel.is-resized-empty .smtcmp-quick-ask-input-row {
  flex: 1 1 auto;
  align-items: stretch;
  margin-top: 6px;
}

.smtcmp-quick-ask-panel.is-resized-empty .smtcmp-quick-ask-toolbar {
  margin-top: 0;
}

.smtcmp-quick-ask-panel.is-resized-empty .smtcmp-quick-ask-input {
  min-height: 0;
  max-height: none;
}

.smtcmp-quick-ask-panel.is-resized-empty .smtcmp-quick-ask-content-editable {
  min-height: 0;
  max-height: none;
  height: 100%;
}

.smtcmp-quick-ask-toolbar-left {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.smtcmp-quick-ask-toolbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Toolbar action buttons */

.smtcmp-quick-ask-toolbar-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: color-mix(in srgb, var(--text-normal) 82%, transparent);
  transition: all 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}

.smtcmp-quick-ask-toolbar-button:hover {
  background: transparent;
  color: var(--text-normal);
}

/* Divider between action buttons and send */

.smtcmp-quick-ask-toolbar-divider {
  width: 1px;
  height: 12px;
  margin: 0 2px;
  background: color-mix(
    in srgb,
    var(--background-modifier-border) 75%,
    transparent
  );
}

/* Send button */

.smtcmp-quick-ask-send-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: color-mix(in srgb, var(--text-normal) 82%, transparent);
  transition: all 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}

.smtcmp-quick-ask-send-button:hover:not(:disabled) {
  background: transparent;
  color: var(--text-on-accent);
}

.smtcmp-quick-ask-send-button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.smtcmp-quick-ask-send-button.stop {
  background: color-mix(
    in srgb,
    var(--text-error) 24%,
    var(--background-secondary) 76%
  );
  color: var(--text-on-accent);
  border-color: color-mix(
    in srgb,
    var(--text-error) 30%,
    var(--background-modifier-border) 70%
  );
}

.smtcmp-quick-ask-send-button.stop:hover {
  background: color-mix(
    in srgb,
    var(--text-error) 58%,
    var(--background-secondary)
  );
}

/* Chat Area - only shown when there are messages */

.smtcmp-quick-ask-chat-shell {
  flex: 1 1 auto;
  min-height: 0;
  padding-top: var(--smtcmp-quick-ask-message-top-safe-area);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  order: 1;
}

.smtcmp-quick-ask-chat-area {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-anchor: none;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  user-select: text;
  pointer-events: auto;
}

.smtcmp-quick-ask-chat-area.smtcmp-quick-ask-chat-area--hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.smtcmp-quick-ask-chat-area.smtcmp-quick-ask-chat-area--hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.smtcmp-quick-ask-user-message {
  align-self: flex-end;
  width: auto;
  max-width: 85%;
  display: flex;
  justify-content: flex-end;
  padding: 0;
  background: transparent;
  color: inherit;
  border-radius: 0;
  font-size: var(--font-ui-small);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.smtcmp-quick-ask-user-message .smtcmp-user-message-card {
  width: auto;
  max-width: 100%;
}

.smtcmp-quick-ask-user-message .smtcmp-chat-user-input-wrapper {
  width: auto;
  max-width: 100%;
}

.smtcmp-quick-ask-user-message .smtcmp-chat-user-input-wrapper--compact {
  max-width: 100%;
}

.smtcmp-quick-ask-user-message--editing {
  max-width: min(440px, 92%);
  cursor: text;
}

.smtcmp-quick-ask-user-message--editing .smtcmp-chat-user-input-wrapper {
  width: min(440px, 100%);
  cursor: text;
}

.smtcmp-quick-ask-user-message--editing .smtcmp-chat-user-input-container {
  padding: var(--size-2-3);
  gap: var(--size-2-2);
  cursor: text;
}

.smtcmp-quick-ask-user-message--editing .smtcmp-chat-user-input-editor {
  min-height: 0;
  height: auto;
  cursor: text;
}

.smtcmp-quick-ask-user-message--editing .smtcmp-content-editable,
.smtcmp-quick-ask-user-message--editing .smtcmp-obsidian-textarea {
  min-height: 0;
  max-height: 120px;
  height: auto;
  padding: 0;
  line-height: 1.45;
  overflow-y: auto;
}

.smtcmp-quick-ask-user-message--editing .smtcmp-lexical-content-editable-root {
  min-height: 0;
}

.smtcmp-quick-ask-user-message--editing
  .smtcmp-lexical-content-editable-paragraph {
  margin: 0;
  line-height: 1.45;
}

.smtcmp-quick-ask-user-message--editing
  .smtcmp-chat-user-input-editor:has(.smtcmp-content-editable) {
  display: flex;
  align-items: flex-start;
}

.smtcmp-quick-ask-user-message--editing .smtcmp-chat-user-input-controls {
  height: auto;
  min-height: 28px;
  gap: var(--size-2-3);
  margin-top: 0;
  cursor: default;
}

.smtcmp-quick-ask-user-message--editing .smtcmp-chat-user-input-controls__left {
  gap: var(--size-2-3);
}

.smtcmp-quick-ask-user-message--editing
  .smtcmp-chat-user-input-controls__left
  .smtcmp-chat-input-model-select {
  max-width: 170px;
}

.smtcmp-quick-ask-user-message--editing
  .smtcmp-chat-user-input-controls__left
  .smtcmp-chat-input-model-select__model-name {
  max-width: 128px;
}

.smtcmp-quick-ask-user-message--editing
  .smtcmp-chat-user-input-controls
  .smtcmp-chat-input-model-select,
.smtcmp-quick-ask-user-message--editing
  .smtcmp-chat-user-input-controls
  .smtcmp-chat-input-model-select
  *,
.smtcmp-quick-ask-user-message--editing
  .smtcmp-chat-user-input-controls
  button {
  cursor: pointer;
}

.smtcmp-quick-ask-user-message--editing .smtcmp-chat-user-input-submit-button,
.smtcmp-quick-ask-user-message--editing
  .smtcmp-chat-user-input-submit-button-circle {
  transform: scale(0.95);
  transform-origin: center;
}

.smtcmp-quick-ask-chat-area--shared .smtcmp-chat-messages-assistant {
  max-width: 100%;
}

.smtcmp-quick-ask-chat-area--shared .smtcmp-code-block,
.smtcmp-quick-ask-chat-area--shared .smtcmp-toolcall {
  font-size: var(--font-ui-smaller);
}

.smtcmp-quick-ask-assistant-message {
  align-self: flex-start;
  max-width: 95%;
  padding: 0 0 var(--size-2-2);
  background: transparent;
  border-radius: 0;
  font-size: var(--font-ui-small);
  line-height: 1.5;
  user-select: text;
  pointer-events: auto;
}

.smtcmp-quick-ask-assistant-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: var(--size-2-2);
}

.smtcmp-quick-ask-assistant-message .markdown-rendered {
  font-size: var(--font-ui-small);
  user-select: text;
}

.smtcmp-quick-ask-assistant-block + .smtcmp-quick-ask-assistant-block {
  margin-top: 8px;
}

.smtcmp-quick-ask-assistant-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
}

.smtcmp-quick-ask-assistant-message .markdown-rendered p {
  margin: 0 0 0.5em 0;
}

.smtcmp-quick-ask-assistant-message .markdown-rendered p:last-child {
  margin-bottom: 0;
}

.smtcmp-quick-ask-assistant-message .markdown-rendered pre {
  margin: 0.5em 0;
  padding: 8px;
  border-radius: var(--radius-s);
  overflow-x: auto;
}

.smtcmp-quick-ask-assistant-message .markdown-rendered code {
  font-size: var(--font-ui-smaller);
}

/* Drag handle */

.smtcmp-quick-ask-drag-handle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  -webkit-app-region: no-drag;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  z-index: 20; /* Higher than resize handles */
  background: transparent;
  transition: background-color 0.15s ease;
}

.smtcmp-quick-ask-drag-handle:hover {
  background: color-mix(
    in srgb,
    var(--background-modifier-hover) 20%,
    transparent
  );
}

.smtcmp-quick-ask-drag-handle:active {
  cursor: grabbing;
}

.smtcmp-quick-ask-drag-indicator {
  width: 64px;
  height: 5px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--text-muted) 40%, transparent);
  transition: background-color 0.15s ease;
}

.smtcmp-quick-ask-drag-handle:hover .smtcmp-quick-ask-drag-indicator {
  background: color-mix(in srgb, var(--text-muted) 65%, transparent);
}

/* Resize handles */

.smtcmp-quick-ask-resize-handle {
  position: absolute;
  z-index: 10; /* Lower than drag handle */
  background: transparent;
}

.smtcmp-quick-ask-resize-handle-right {
  top: 8px; /* Start below drag handle */
  right: 0;
  width: 4px;
  height: calc(100% - 8px); /* Exclude drag handle area */
  cursor: ew-resize;
}

.smtcmp-quick-ask-resize-handle-bottom {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  cursor: ns-resize;
}

.smtcmp-quick-ask-resize-handle-bottom-left {
  bottom: 0;
  left: 0;
  width: 12px;
  height: 12px;
  cursor: nesw-resize;
}

.smtcmp-quick-ask-resize-handle-bottom-right {
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  cursor: nwse-resize;
}

/* Visual indicator for bottom-right corner */

.smtcmp-quick-ask-resize-handle-bottom-right::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 8px;
  height: 8px;
  border-right: 2px solid color-mix(in srgb, var(--text-muted) 35%, transparent);
  border-bottom: 2px solid
    color-mix(in srgb, var(--text-muted) 35%, transparent);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.smtcmp-quick-ask-resize-handle-bottom-left::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: -1px;
  width: 8px;
  height: 8px;
  border-left: 2px solid color-mix(in srgb, var(--text-muted) 35%, transparent);
  border-bottom: 2px solid
    color-mix(in srgb, var(--text-muted) 35%, transparent);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.smtcmp-quick-ask-panel:hover
  .smtcmp-quick-ask-resize-handle-bottom-right::after {
  opacity: 1;
}

.smtcmp-quick-ask-panel:hover
  .smtcmp-quick-ask-resize-handle-bottom-left::after {
  opacity: 1;
}

/* Panel states */

.smtcmp-quick-ask-panel.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.smtcmp-quick-ask-panel.is-resizing {
  user-select: none;
}

/* Global interaction state (drag/resize) */

body.smtcmp-quick-ask-global-interaction,
body.smtcmp-quick-ask-global-interaction * {
  cursor: var(--smtcmp-quick-ask-global-cursor, auto) !important;
  -webkit-user-select: var(
    --smtcmp-quick-ask-global-user-select,
    auto
  ) !important;
  user-select: var(--smtcmp-quick-ask-global-user-select, auto) !important;
}

.smtcmp-simple-select-wrapper {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 1 1 auto;
}

.smtcmp-simple-select-wrapper > .smtcmp-simple-select__trigger {
  width: 100%;
  max-width: 100%;
}

/* ============================================
   Selection Chat - Cursor-like text selection actions
   ============================================ */

/* Overlay root container */

.smtcmp-selection-chat-overlay-host {
  position: relative;
}

.smtcmp-selection-chat-overlay-root {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.smtcmp-selection-chat-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* Layer-based highlight (replaces Decoration.mark to avoid DOM mutation) */

.yolo-selection-persisted-layer {
  background: var(
    --text-selection,
    color-mix(in srgb, var(--interactive-accent) 18%, transparent)
  );
  border-radius: 2px;
  pointer-events: none;
}

.yolo-selection-persisted-layer.yolo-selection-persisted-layer-updated {
  animation: yolo-selection-highlight-updated-fade 3s ease-out forwards;
}

@keyframes yolo-selection-highlight-updated-fade {
  0% {
    background: color-mix(in srgb, var(--interactive-accent) 28%, transparent);
  }

  100% {
    background: var(
      --text-selection,
      color-mix(in srgb, var(--interactive-accent) 18%, transparent)
    );
  }
}

/* Selection Indicator - small floating capsule */

.smtcmp-selection-indicator {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  background: var(--background-primary);
  border: 1px solid var(--h1-color, var(--interactive-accent));
  box-shadow: var(--shadow-s);
  cursor: pointer;
  pointer-events: auto;
  z-index: 2;
  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.smtcmp-selection-indicator.visible {
  opacity: 1;
  transform: scale(1);
}

.smtcmp-selection-indicator:hover {
  background: var(--background-primary);
  border-color: var(--interactive-accent-hover);
  box-shadow: var(--shadow-s);
  transform: scale(1.05);
}

.smtcmp-selection-indicator svg {
  width: 14px;
  height: 14px;
  color: var(--h1-color, var(--interactive-accent));
}

/* Selection Actions Menu */

.smtcmp-selection-menu {
  position: absolute;
  min-width: 200px;
  max-width: 280px;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transform: translateY(-4px) scale(0.96);
  transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.smtcmp-selection-menu.visible {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.smtcmp-selection-menu-content {
  background: var(--background-primary);
  border: 1px solid
    color-mix(in srgb, var(--interactive-accent) 30%, transparent);
  border-radius: var(--radius-m);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--interactive-accent) 8%, transparent),
    0 8px 24px rgba(0, 0, 0, 0.15);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.smtcmp-selection-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: var(--radius-s);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
  width: 100%;
  text-align: left;
  color: var(--text-normal);
  font-size: var(--font-ui-small);
}

.smtcmp-selection-menu-item:hover,
.smtcmp-selection-menu-item:focus,
.smtcmp-selection-menu-item:focus-visible {
  background: color-mix(
    in srgb,
    var(--background-modifier-hover) 40%,
    transparent
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--interactive-accent) 55%,
    transparent
  ) !important;
  outline: none;
}

.smtcmp-selection-menu-item:active {
  transform: scale(0.97);
}

.smtcmp-selection-menu-item-icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--h1-color, var(--interactive-accent)) 12%,
    transparent
  );
  color: var(--h1-color, var(--interactive-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.smtcmp-selection-menu-item-icon svg {
  width: 14px;
  height: 14px;
}

.smtcmp-selection-menu-item-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================
   PDF Selection - Persistent highlight for PDF text layer (CSS Custom Highlight API)
   ============================================ */

/* Painted by pdfSelectionHighlightController via the CSS Custom Highlight API.
   Character-level granularity: only the selected characters are tinted, even
   when the selection lives inside a single PDF.js textLayer span.

   Note on color:
   PDF.js textLayer applies its own blend mode that wipes any alpha background.
   So we use a fully opaque accent color and let textLayer's blend produce the
   translucent-looking effect — same trick the previous class-based rule used. */

::highlight(yolo-pdf-selection) {
  background-color: var(--interactive-accent);
}

.yolo-tab-loading-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 1em;
  margin-left: 6px;
  vertical-align: middle;
  pointer-events: none;
  user-select: none;
}

.yolo-tab-loading-dots__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--text-muted);
  opacity: 0.35;
  animation: yolo-tab-loading-dots-pulse 1.2s ease-in-out infinite;
}

.yolo-tab-loading-dots__dot:nth-child(2) {
  animation-delay: 0.2s;
}

.yolo-tab-loading-dots__dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes yolo-tab-loading-dots-pulse {
  0%,
  80%,
  100% {
    opacity: 0.2;
    transform: scale(0.85);
  }
  40% {
    opacity: 0.55;
    transform: scale(1);
  }
}

/* PDF region screenshot overlay */

.yolo-pdf-region-overlay {
  position: absolute;
  inset: 0;
  z-index: 9999;
  cursor: crosshair;
  background: rgba(0, 0, 0, 0.25);
  user-select: none;
}

.yolo-pdf-region-hint {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--background-primary, #fff);
  color: var(--text-normal, #333);
  border: 1px solid var(--background-modifier-border, #ccc);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.yolo-pdf-region-selection {
  position: absolute;
  display: none;
  border: 2px solid var(--interactive-accent, #4a90e2);
  background: rgba(74, 144, 226, 0.1);
  pointer-events: none;
}

/* PDF toolbar button */

.yolo-pdf-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  margin-left: 2px;
}

.yolo-pdf-toolbar-btn:hover {
  color: var(--text-normal);
  background: var(--background-modifier-hover);
}