@import url("/assets/katex.min.css");

@font-face {
  font-family: "Anthropic Sans";
  src: url("assets/anthropic-sans.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

@media (prefers-reduced-motion: reduce) {
  .timeline-block-enter,
  .timeline-block-exit,
  .timeline-fade-in,
  .message-actions-enter,
  .message-row-enter,
  .stream-grapheme,
  .assistant-thought-detail,
  .search-results,
  .search-complete-icon,
  .citation-chip-enter,
  .citation-chip-affordance,
  .citation-chip-arrow,
  .assistant-progress.generating .thinking-sprite-strip,
  .assistant-thought.streaming .thinking-sprite-strip,
  .assistant-progress.generating .thinking-sprite,
  .assistant-thought.streaming .thinking-sprite,
  .assistant-progress.generating .thinking-status,
  .assistant-thought.streaming .assistant-thought-label,
  .chat-view.generating .stop-square,
  .conversation-files-panel {
    animation: none !important;
  }

  .conversation-artifact-visual {
    transition: none !important;
  }

  .message-actions,
  .user-message-actions,
  .thinking-status-morph {
    transition: none !important;
  }

  .timeline-quiet-dots > span {
    opacity: 1;
    animation: none !important;
  }
}

html[data-reduce-motion="true"] .timeline-block-enter,
html[data-reduce-motion="true"] .timeline-block-exit,
html[data-reduce-motion="true"] .timeline-fade-in,
html[data-reduce-motion="true"] .message-actions-enter,
html[data-reduce-motion="true"] .message-row-enter,
html[data-reduce-motion="true"] .stream-grapheme,
html[data-reduce-motion="true"] .assistant-thought-detail,
html[data-reduce-motion="true"] .search-results,
html[data-reduce-motion="true"] .search-complete-icon,
html[data-reduce-motion="true"] .citation-chip-enter,
html[data-reduce-motion="true"] .citation-chip-affordance,
html[data-reduce-motion="true"] .citation-chip-arrow,
html[data-reduce-motion="true"] .assistant-progress.generating .thinking-sprite-strip,
html[data-reduce-motion="true"] .assistant-thought.streaming .thinking-sprite-strip,
html[data-reduce-motion="true"] .assistant-progress.generating .thinking-sprite,
html[data-reduce-motion="true"] .assistant-thought.streaming .thinking-sprite,
html[data-reduce-motion="true"] .assistant-progress.generating .thinking-status,
html[data-reduce-motion="true"] .assistant-thought.streaming .assistant-thought-label,
html[data-reduce-motion="true"] .chat-view.generating .stop-square,
html[data-reduce-motion="true"] .conversation-files-panel {
  animation: none !important;
}

html[data-reduce-motion="true"] .conversation-artifact-visual {
  transition: none !important;
}

html[data-reduce-motion="true"] .message-actions,
html[data-reduce-motion="true"] .user-message-actions {
  transition: none !important;
}

html[data-reduce-motion="true"] .thinking-status-morph {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .assistant-progress.generating .thinking-status,
  .assistant-thought.streaming .assistant-thought-label {
    color: #777670 !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
  }
}

html[data-reduce-motion="true"] .assistant-progress.generating .thinking-status,
html[data-reduce-motion="true"] .assistant-thought.streaming .assistant-thought-label {
  color: #777670 !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

html[data-reduce-motion="true"] .timeline-quiet-dots > span {
  opacity: 1;
  animation: none !important;
}

@font-face {
  font-family: "Anthropic Serif";
  src: url("assets/anthropic-serif.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Anthropic Mono";
  src: url("assets/anthropic-mono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Anthropicons;
  src: url("assets/anthropicons.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-display: block;
}

:root {
  color-scheme: light;
  --page-bg: #f8f8f6;
  --text: #252523;
  --muted: #6f6e69;
  --line: rgba(31, 31, 30, 0.14);
  --shadow: 0 2px 12px rgba(25, 25, 24, 0.035);
  --font-claude-serif: "Anthropic Serif", "Anthropic Serif Fallback Georgia", "Anthropic Serif Fallback Times", "Anthropic Serif Fallback DejaVu", "Anthropic Serif Fallback Noto", Georgia, "Arial Hebrew", "Noto Sans Hebrew", "Times New Roman", Times, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", "Hiragino Sans", "Yu Gothic", Meiryo, "Noto Sans CJK JP", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", serif;
  --font-claude-mono: "Anthropic Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-family: "Anthropic Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* The current reference surface omits legacy product/account entry points. */
.share-button,
.side-primary .side-button[data-view="code"],
.side-primary .side-button[data-view="customize"],
.product-list .side-button[data-view="design"] {
  display: none !important;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100vh;
  overflow: hidden;
  background: var(--page-bg);
  color: var(--text);
  letter-spacing: 0;
}

button,
textarea,
input {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
textarea:focus-visible,
input:focus-visible {
  outline: 2px solid #8b8982;
  outline-offset: 2px;
}

.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;
}

.sidebar {
  position: fixed;
  z-index: 20;
  inset: 0 auto 0 0;
  width: 49px;
  border-right: 1px solid #e2e2de;
  background: var(--page-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0 14px;
  overflow: hidden;
  transition: width 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.side-primary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  margin-top: 16px;
  width: 100%;
  padding: 0 8px;
}

.sidebar-header {
  display: flex;
  align-items: center;
  width: 100%;
  height: 32px;
  padding: 0 8px;
}

.sidebar-home {
  display: none;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.sidebar-header .sidebar-search {
  display: none;
}

.sidebar-header .sidebar-toggle {
  margin: 0 auto;
}

.side-button,
.mobile-sidebar-toggle,
.icon-button,
.incognito,
.utility-capsule button {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.side-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 32px;
  padding: 0;
  border-radius: 7px;
  flex: 0 0 auto;
}

.side-button:hover {
  background: #ecece8;
}

.side-button.active {
  background: #e8e8e4;
}

.side-button.muted {
  color: #aaa9a4;
}

.anthropic-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  font-family: Anthropicons;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.anthropic-icon.icon-small,
.sidebar-toggle .anthropic-icon,
.mobile-sidebar-toggle .anthropic-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 16px;
}

.sidebar-icon-expanded {
  display: none;
}

.sidebar-toggle {
  width: 32px;
  height: 24px;
}

.sidebar-wordmark,
.side-label,
.profile-copy {
  display: none;
}

.discover {
  margin-top: 56px;
}

.side-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.account-switch {
  display: none;
  border: 0;
  background: transparent;
  color: #595955;
  cursor: pointer;
}

.profile-row {
  display: flex;
  align-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #3b3b38;
  color: #fff;
  font-weight: 600;
}

.profile-row:hover {
  background: #ecece8;
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  z-index: 59;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.mobile-sidebar-toggle {
  display: none;
  position: fixed;
  z-index: 21;
  top: 9px;
  left: 9px;
  width: 32px;
  height: 26px;
  padding: 4px;
}

.page-shell {
  width: 100%;
  height: 100vh;
  padding-left: 49px;
  padding-right: 10px;
  transition: padding-left 180ms ease;
}

body.sidebar-open .sidebar {
  width: 288px;
  align-items: stretch;
  border-color: #deded9;
  box-shadow: 6px 0 20px rgba(35, 35, 32, 0.06);
}

body.sidebar-open .sidebar {
  padding-bottom: 0;
}

body.sidebar-open .sidebar-header {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: 32px;
  padding: 0 12px 0 16px;
}

body.sidebar-open .sidebar-home {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: 68px;
  min-width: 0;
  height: 20px;
  margin-right: auto;
  padding: 0;
  color: #171715;
}

body.sidebar-open .sidebar-header .sidebar-search,
body.sidebar-open .sidebar-header .sidebar-toggle {
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border-radius: 6px;
  transform: translateY(-4px);
}

body.sidebar-open .sidebar-wordmark {
  display: block;
  font-family: var(--font-claude-serif);
  font-size: 20px;
  font-weight: 500;
}

body.sidebar-open .side-primary .side-button:not([data-action="new-chat"]) {
  width: calc(100% - 10px) !important;
}

body.sidebar-open [data-action="new-chat"].active {
  background: transparent;
}

body.sidebar-open [data-action="new-chat"] > .anthropic-icon {
  width: 24px;
  height: 24px;
  margin-left: -4px;
  border-radius: 50%;
  background: #ecece8;
}

body.sidebar-open [data-action="new-chat"] {
  margin-bottom: 1px;
}

body.sidebar-open .sidebar-icon-collapsed {
  display: none;
}

body.sidebar-open .sidebar-icon-expanded {
  display: grid;
}

body.sidebar-open .side-button:not(.sidebar-toggle):not(.sidebar-search) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  padding: 0 10px;
}

body.sidebar-open .side-label {
  display: block;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upgrade-badge {
  display: none;
}

body.sidebar-open .upgrade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  margin-left: auto;
  padding: 0 7px;
  border: 1px solid #b8cbe6;
  border-radius: 999px;
  background: #f7faff;
  color: #2863a0;
  font-size: 12px;
  line-height: 20px;
}

body.sidebar-open .discover {
  width: 261px !important;
  margin-inline: 8px;
}

body.sidebar-open .side-bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 64px;
  padding: 8px 12px;
  overflow: hidden;
  border-top: 1px solid #deded9;
  background: var(--page-bg);
}

body.sidebar-open .profile-row {
  order: 1;
  flex: 1 1 0;
  gap: 12px;
  width: auto;
  min-width: 0;
  height: 48px;
  padding: 6px 0;
  overflow: hidden;
}

body.sidebar-open .side-bottom .downloads-button {
  order: 2;
  display: grid;
  place-items: center;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px !important;
  height: 32px;
  padding: 0 !important;
  gap: 0;
  border: 1px solid #c9c9c4;
  border-radius: 8px;
  background: #fff;
}

body.sidebar-open .downloads-button .side-label {
  display: none;
}

.download-notification {
  display: none;
}

body.sidebar-open .downloads-button .download-notification {
  position: absolute;
  top: -2px;
  right: -2px;
  display: block;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--page-bg);
  border-radius: 50%;
  background: #2f78c4;
}

body.sidebar-open .account-switch {
  position: relative;
  order: 3;
  display: grid;
  place-items: center;
  flex: 0 0 16px;
  width: 16px;
  height: 32px;
  padding: 0;
}

body.sidebar-open .account-switch svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

body.sidebar-open .profile-copy {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  align-items: flex-start;
}

body.sidebar-open .profile-copy strong {
  max-width: 100%;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.sidebar-open .profile-copy small {
  color: var(--muted);
  font-size: 12px;
}

body.sidebar-open .sidebar [data-tooltip]::after {
  display: none;
}

.sidebar button:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 2px #8b8982;
}

.account-menu {
  position: absolute;
  z-index: 82;
  right: auto;
  bottom: 70px;
  left: 15px;
  width: 272px;
  padding: 4px;
  border: 1px solid #cfcfca;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 7px 22px rgba(31, 31, 29, 0.15), 0 1px 3px rgba(31, 31, 29, 0.08);
}

.account-menu[hidden],
.account-submenu[hidden] {
  display: none;
}

.account-menu-name {
  height: 22px;
  padding: 0 9px;
  overflow: hidden;
  color: #777670;
  font-size: 13px;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #222220;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.account-menu-item:hover,
.account-menu-item:focus-visible,
.account-menu-item[aria-expanded="true"] {
  background: #f0f0ed;
  outline: 0;
}

.account-menu-item > .anthropic-icon:first-child {
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 18px;
}

.account-menu-item kbd {
  color: #8b8a85;
  font: 12px/1 "Anthropic Sans", system-ui, sans-serif;
  white-space: nowrap;
}

.account-menu-chevron {
  width: 14px;
  height: 14px;
  color: #777670;
  font-size: 14px;
  line-height: 14px;
}

.account-menu-separator {
  height: 1px;
  margin: 4px 8px;
  background: #e2e2de;
}

.account-submenu {
  position: fixed;
  z-index: 93;
  width: 230px;
  padding: 4px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(11, 11, 11, 0.1), 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
}

.account-submenu::before {
  content: "";
  position: absolute;
  top: 0;
  right: 100%;
  width: 4px;
  height: 100%;
}

.account-submenu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 32px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #0b0b0b;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
}

.account-submenu button:hover,
.account-submenu button:focus-visible {
  background: #f1f1ee;
  outline: 0;
}

.account-submenu-check {
  visibility: hidden;
  width: 18px;
  height: 18px;
  color: #1677e8;
  font-size: 18px;
  line-height: 18px;
}

.account-language-menu button[aria-checked="true"] .account-submenu-check {
  visibility: visible;
}

.account-external-icon {
  width: 16px;
  height: 16px;
  color: #5f5e59;
  font-size: 16px;
  line-height: 16px;
}

.account-learn-menu {
  width: 222px;
}

.account-learn-menu .account-menu-separator {
  margin-block: 4px;
}

.account-learn-menu kbd {
  color: #898781;
  font: 13px/20px "Anthropic Sans", system-ui, sans-serif;
}

@media (max-width: 768px) {
  .modal-layer:has(.settings-dialog) {
    padding: 8px;
  }

  .account-submenu {
    width: min(230px, calc(100vw - 16px));
  }
}

/* Generated document runs and previews */
.document-run {
  margin: 0;
  padding: 6px 0 6px 8px;
  color: #7b7974;
  font-family: "Anthropic Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

.document-run-toggle {
  display: flex;
  width: 100%;
  height: 28px;
  min-height: 28px;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: #7b7974;
  cursor: pointer;
  text-align: left;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), outline-color 150ms cubic-bezier(0.4, 0, 0.2, 1), text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1), fill 150ms cubic-bezier(0.4, 0, 0.2, 1), stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.document-run-toggle:hover,
.document-run-toggle:focus-visible {
  color: #383835;
}

.document-run-toggle:focus-visible,
.document-run-step-button:focus-visible {
  outline: 2px solid rgb(37 106 191);
  outline-offset: 2px;
}

.document-run-spark {
  display: inline-flex;
  width: 0;
  height: 20px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin-right: -8px;
  overflow: hidden;
  opacity: 0;
  transition: width 150ms cubic-bezier(0.25, 0.9, 0.3, 1), margin-right 150ms cubic-bezier(0.25, 0.9, 0.3, 1), opacity 150ms ease;
}

.document-run-active .document-run-spark {
  width: 20px;
  margin-right: 0;
  opacity: 1;
}

.document-run-spark .mini-claude-mark {
  width: 20px;
  height: 20px;
  fill: #d97757;
}

.document-run-active .document-run-spark .mini-claude-mark {
  animation: thinking-spark-breathe 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.document-run-toggle .document-run-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-summary-affordance {
  display: inline-grid;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  place-items: center;
}

.timeline-summary-affordance > * {
  grid-area: 1 / 1;
}

.timeline-quiet-dots {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  opacity: 1;
  transition: opacity 150ms ease;
}

.timeline-quiet-dots > span {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #d97757;
  animation: timeline-quiet-dot 1.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.timeline-quiet-dots > span:nth-child(2) { animation-delay: 150ms; }
.timeline-quiet-dots > span:nth-child(3) { animation-delay: 300ms; }

.timeline-summary-chevron {
  opacity: 0 !important;
  transition: opacity 150ms ease, transform 200ms ease !important;
}

:is(.document-run-toggle, .assistant-thought-toggle):hover .timeline-quiet-dots,
:is(.document-run-toggle, .assistant-thought-toggle):focus-visible .timeline-quiet-dots,
:is(.document-run-toggle, .assistant-thought-toggle)[aria-expanded="true"] .timeline-quiet-dots {
  opacity: 0;
}

:is(.document-run-toggle, .assistant-thought-toggle):hover .timeline-summary-chevron,
:is(.document-run-toggle, .assistant-thought-toggle):focus-visible .timeline-summary-chevron,
:is(.document-run-toggle, .assistant-thought-toggle)[aria-expanded="true"] .timeline-summary-chevron {
  opacity: 1 !important;
}

@keyframes timeline-quiet-dot {
  0%, 70%, 100% { opacity: 0.28; }
  35% { opacity: 1; }
}

.document-run-chevron {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-left: 2px;
  font-size: 12px;
  font-weight: 577.8;
  line-height: 12px;
  opacity: 0;
  transform: rotate(-90deg);
  transition: opacity 180ms ease, transform 220ms ease;
}

.document-run-affordance .document-run-chevron {
  margin-left: 0;
}

.document-run-toggle:hover .document-run-chevron,
.document-run-toggle:focus-visible .document-run-chevron {
  opacity: 1;
}

.document-run-toggle[aria-expanded="true"] .document-run-chevron {
  opacity: 1;
  transform: rotate(0deg);
}

.document-run-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms ease-out;
}

.document-run-detail.expanded {
  grid-template-rows: 1fr;
}

.document-run-steps {
  min-width: 0;
  overflow: hidden;
  padding: 8px 0 0;
}

.document-run-step {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  min-height: 44px;
  border-radius: 8px;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.document-run-step-rail {
  display: flex;
  align-items: center;
  flex-direction: column;
  color: #85837d;
  padding-top: 4px;
}

.document-run-step-icon {
  display: grid;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  place-items: center;
  font-size: 16px;
  font-weight: 533.3;
  line-height: 16px;
  color: #7b7974;
}

.document-run-step-icon svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.document-run-step-line {
  width: 1px;
  min-height: 14px;
  flex: 1 1 auto;
  margin: 4px 0;
  background: rgba(31, 31, 30, 0.15);
}

.document-run-step:last-child .document-run-step-line {
  display: none;
}

.document-run-step-body {
  min-width: 0;
  padding: 0 0 8px;
}

.document-run-step-button {
  display: flex;
  width: 100%;
  height: 20px;
  min-height: 20px;
  align-items: center;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #777670;
  font: inherit;
  line-height: 20px;
  cursor: pointer;
  text-align: left;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1), background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.document-run-step-button:hover,
.document-run-step-button:focus-visible {
  color: #383835;
}

.document-run-step-label {
  display: block;
  min-height: 24px;
  padding: 2px 10px 0;
  color: #383835;
  font-size: 14px;
  font-weight: 430;
  line-height: 19.6px;
}

.document-run-step-detail {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0;
  opacity: 0;
  transition: grid-template-rows 300ms ease-out, opacity 180ms ease-out;
}

.document-run-step-detail.expanded {
  grid-template-rows: 1fr;
  margin-top: 4px;
  opacity: 1;
}

.document-run-step-detail > span {
  min-width: 0;
  overflow: hidden;
  color: #8a8882;
  font-size: 12px;
  line-height: 17px;
  overflow-wrap: anywhere;
}

.document-command-detail {
  display: grid;
  gap: 8px;
  max-height: 200px;
  margin: 0 10px 8px;
  padding: 8px;
  overflow-y: auto;
  border: 0.5px solid rgba(31, 31, 30, 0.12);
  border-radius: 8px;
  background: #fff;
}

.document-command-block {
  display: grid;
  gap: 12px;
  padding: 12px;
  border-radius: 6px;
  background: #f7f7f4;
}

.document-command-language {
  color: #7e7c76;
  font: 11px/14px "Anthropic Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: lowercase;
}

.document-command-code {
  display: block;
  overflow-wrap: anywhere;
  color: #3b3a35;
  font: 14px/22px "Anthropic Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
}

.document-command-verb {
  color: rgb(0 81 194);
}

.document-command-flag,
.document-command-path {
  color: rgb(0 128 0);
}

.document-command-operator {
  color: rgb(43 48 59);
}

.document-command-output {
  background: #f7f7f4;
}

.document-preview-copy[hidden],
.document-preview-download[hidden] {
  display: none;
}

.document-preview-docx-host {
  display: flex;
  width: 100%;
  align-items: center;
  flex-direction: column;
  gap: 20px;
}

.document-preview-docx-host > section.document-rendered-page {
  position: relative;
  max-width: 100%;
  box-shadow: 0 1px 5px rgba(11, 11, 11, 0.12);
}

.document-code-preview {
  width: 100%;
  margin: 0;
  padding: 16px 0;
  overflow: auto;
  background: #fff;
  color: #2e2d2a;
  font: 12px/20px "Anthropic Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.document-code-lines {
  min-width: max-content;
  margin: 0;
  padding: 0 20px 0 56px;
  counter-reset: document-code-line;
  list-style: none;
}

.document-code-lines > li {
  position: relative;
  min-height: 20px;
  padding: 0 14px;
  white-space: pre;
}

.document-code-lines > li::before {
  position: absolute;
  left: -36px;
  width: 28px;
  color: #aaa8a1;
  content: counter(document-code-line);
  counter-increment: document-code-line;
  text-align: right;
  user-select: none;
}

.document-skill-preview {
  width: min(768px, 100%);
  min-height: 100%;
  margin: 0 auto;
  padding: 24px 44px 48px;
  background: #fff;
  color: #0b0b0b;
  font-family: "Anthropic Serif", Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 24px;
}

.document-skill-preview h1,
.document-skill-preview h2,
.document-skill-preview h3 {
  margin: 12px 0 -4px;
  color: #0b0b0b;
  font-family: "Anthropic Serif", Georgia, serif;
  font-weight: 600;
  line-height: 26.4px;
  text-align: left;
}

.document-skill-preview h1 {
  display: block;
  align-items: initial;
  justify-content: initial;
  gap: 0;
  font-size: 22px;
  white-space: normal;
}
.document-skill-preview h2 { font-size: 18px; }
.document-skill-preview h3 { font-size: 16px; }
.skill-preview-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.skill-preview-body p { margin: 0; }
.document-skill-preview ul,
.document-skill-preview ol {
  margin: 0;
  padding-left: 24px;
}
.document-skill-preview code {
  padding: 1px 4px;
  border-radius: 6px;
  background: rgba(11, 11, 11, 0.05);
  color: #8e2626;
  font-family: "Anthropic Mono", ui-monospace, monospace;
  font-size: 0.9em;
}

.skill-preview-metadata {
  margin-bottom: 24px;
}

.document-skill-preview .skill-preview-metadata h3 {
  margin: 0;
  color: #898781;
  font-family: "Anthropic Sans", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
}

.skill-preview-metadata p {
  margin: 0;
  color: #0b0b0b;
  font-family: "Anthropic Serif", Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 24px;
}

.skill-preview-label {
  display: flex;
  align-items: center;
  gap: 5px;
}

.skill-preview-info {
  display: inline-grid;
  width: 13px;
  height: 13px;
  place-items: center;
  border: 1px solid #aaa8a2;
  border-radius: 50%;
  color: #898781;
  font-family: "Anthropic Sans", system-ui, sans-serif;
  font-size: 9px;
  font-style: normal;
  line-height: 1;
}

.skill-preview-description > p {
  margin-top: 15px;
}

.skill-preview-metadata-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  margin-top: 24px;
}

.skill-preview-metadata-row p {
  line-height: 26.4px;
}

.skill-preview-source-note {
  color: #77756f !important;
}

.skill-preview-body > :first-child {
  margin-top: 12px;
}

.skill-preview-mode,
.skill-preview-mode .document-preview-stage {
  background: #fff;
}

.skill-preview-mode .document-preview-header {
  min-height: 44px;
  flex-basis: 44px;
}

.skill-preview-mode .document-preview-stage {
  padding: 0;
  scrollbar-gutter: auto;
}

.document-skill-save {
  display: inline-flex;
  height: 28px;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #252523;
  font-family: "Anthropic Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}

.document-skill-save:hover,
.document-skill-save:focus-visible {
  background: #eeeeea;
}

@media (max-width: 767px) {
  .document-skill-preview {
    padding: 16px 24px 40px;
  }
}

.document-markdown-preview {
  width: min(720px, 100%);
  margin: 0 auto;
}

.document-output-card {
  position: relative;
  display: flex;
  width: calc(100% - 8px);
  min-height: 72px;
  align-items: stretch;
  justify-content: space-between;
  margin: 12px 0 12px 8px;
  overflow: hidden;
  border: 1px solid rgba(31, 31, 30, 0.16);
  border-radius: 8px;
  background: transparent;
  color: #20201e;
  font-family: "Anthropic Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  text-align: left;
  transition: border-color 300ms ease, background-color 300ms ease;
}

.document-output-card:hover,
.document-output-card:focus-within {
  border-color: rgba(31, 31, 30, 0.24);
  background: rgba(255, 255, 255, 0.5);
}

.document-output-open {
  position: absolute;
  z-index: 1;
  inset: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}

.document-output-main {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  gap: 8px;
  pointer-events: none;
}

.document-output-visual {
  position: relative;
  width: 68px;
  flex: 0 0 68px;
}

.document-output-sheet {
  position: absolute;
  right: 8px;
  bottom: -14px;
  display: grid;
  width: 52px;
  height: 71px;
  place-items: start center;
  padding-top: 16px;
  overflow: hidden;
  border: 1px solid rgba(31, 31, 30, 0.16);
  border-radius: 8px 8px 0 0;
  background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0.18));
  color: #85837d;
  transform: rotate(-5.7deg);
  transform-origin: 50% 85%;
  transition: transform 400ms cubic-bezier(0, 0.9, 0.5, 1.35);
}

.document-output-card:hover .document-output-sheet,
.document-output-card:focus-within .document-output-sheet {
  transform: rotate(-3.7deg) scale(1.035);
}

.document-output-sheet svg {
  width: 20px;
  height: 20px;
}

.document-output-copy {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 14px 0;
}

.document-output-title,
.document-output-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-output-title {
  color: #20201e;
  font-size: 14px;
  line-height: 18px;
}

.document-output-meta {
  color: #85837d;
  font-size: 12px;
  line-height: 16px;
}

.document-output-meta-separator {
  opacity: 0.5;
}

.document-output-download {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-self: center;
  align-items: center;
  justify-content: center;
  height: 32px;
  margin: 0 16px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: #30302d;
  box-shadow: 0 0 0 1px rgba(31, 31, 30, 0.13), 0 1px 2px rgba(11, 11, 11, 0.06);
  font: inherit;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

.document-output-download:hover,
.document-output-download:focus-visible {
  background: #f4f4f1;
}

.document-output-download[aria-disabled="true"] {
  cursor: wait;
  opacity: 0.55;
}

.conversation-files-panel[hidden],
.document-preview-panel[hidden] {
  display: none;
}

.conversation-files-panel {
  position: absolute;
  z-index: 46;
  top: 48px;
  right: 8px;
  bottom: 8px;
  display: flex;
  width: 384px;
  min-width: 340px;
  overflow: hidden;
  border: 1px solid rgba(31, 31, 30, 0.15);
  border-radius: 16px;
  background: #f8f8f6;
  animation: conversation-files-enter 300ms ease-in-out 100ms both;
}

.conversation-files-scroll {
  width: 100%;
  min-height: 0;
  padding: 20px 20px 40px;
  overflow-x: hidden;
  overflow-y: auto;
}

.conversation-files-section + .conversation-files-section {
  margin-top: 22px;
}

.conversation-files-section[hidden] {
  display: none;
}

.conversation-files-section-header {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.conversation-files-section-header h3 {
  margin: 0;
  color: #343431;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.conversation-files-download-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 4px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #343431;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.conversation-files-download-all[hidden] {
  display: none;
}

.conversation-files-download-all:hover,
.conversation-files-download-all:focus-visible {
  background: #ecece8;
}

.conversation-files-download-all .anthropic-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 18px;
}

.conversation-artifact-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.conversation-artifact-card {
  position: relative;
  display: grid;
  width: 100%;
  height: 72px;
  grid-template-columns: 68px minmax(0, 1fr) 32px;
  align-items: center;
  column-gap: 0;
  padding: 0 16px;
  overflow: hidden;
  border: 1px solid rgba(31, 31, 30, 0.15);
  border-radius: 8px;
  background: transparent;
  transition: background-color 300ms ease, border-color 300ms ease;
}

.conversation-artifact-card:hover {
  border-color: rgba(31, 31, 30, 0.2);
  background: rgba(255, 255, 255, 0.5);
}

.conversation-artifact-open {
  position: absolute;
  z-index: 1;
  inset: 0 42px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.conversation-artifact-open:focus-visible {
  outline: 2px solid #8b8982;
  outline-offset: -2px;
}

.conversation-artifact-visual {
  align-self: end;
  justify-self: center;
  display: grid;
  width: 52px;
  height: 71px;
  align-items: start;
  justify-items: center;
  padding-top: 16px;
  border: 1px solid rgba(30, 30, 29, 0.3);
  border-radius: 8px 8px 0 0;
  background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0));
  color: #aaa9a3;
  transform: translateY(13px) rotate(-5.73deg);
  transform-origin: center;
  transition: transform 300ms ease-out;
}

.conversation-artifact-card:hover .conversation-artifact-visual,
.conversation-artifact-card:focus-within .conversation-artifact-visual {
  transform: translateY(13px) rotate(-3.72deg) scale(1.035);
  transition-duration: 400ms;
  transition-timing-function: cubic-bezier(0, 0.9, 0.5, 1.35);
}

.conversation-artifact-visual svg {
  width: 20px;
  height: 20px;
}

.conversation-artifact-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  margin-left: 8px;
}

.conversation-artifact-title,
.conversation-artifact-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-artifact-title {
  color: #0b0b0b;
  font-size: 14px;
  font-weight: 400;
  line-height: 17.5px;
}

.conversation-artifact-meta {
  color: #7b7974;
  font-size: 12px;
  line-height: 16px;
}

.conversation-artifact-download {
  position: relative;
  z-index: 2;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 8px;
  color: #0b0b0b;
  text-decoration: none;
}

.conversation-artifact-download:hover,
.conversation-artifact-download:focus-visible {
  background: #eeeeea;
}

.conversation-artifact-download[aria-disabled="true"] {
  cursor: wait;
  opacity: 0.45;
}

.conversation-artifact-download .anthropic-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 18px;
}

.conversation-content-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.conversation-content-card {
  position: relative;
  display: flex;
  min-width: 0;
  height: 120px;
  gap: 10px;
  padding: 8px 10px;
  overflow: hidden;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  border: 1px solid rgba(31, 31, 30, 0.2);
  border-radius: 8px;
  background: #fff;
  color: #31312e;
  box-shadow: 0 1px 2px rgba(11, 11, 11, 0.06), 0 2px 8px rgba(11, 11, 11, 0.08);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.conversation-content-copy {
  display: flex;
  width: 100%;
  min-height: 0;
  flex-direction: column;
  gap: 4px;
}

.conversation-content-card:hover,
.conversation-content-card:focus-visible {
  border-color: rgba(31, 31, 30, 0.25);
  background: #fdfdfc;
}

.conversation-content-name {
  width: 100%;
  margin: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-content-lines {
  margin: 0;
  color: #7b7974;
  font-size: 10px;
  line-height: 15px;
}

.conversation-content-type {
  margin-top: auto;
  display: inline-flex;
  height: 18px;
  align-items: center;
  padding: 0 4px;
  border: 1px solid rgba(11, 11, 11, 0.2);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.7);
  color: #383835;
  font-size: 11px;
  font-weight: 500;
  line-height: 13px;
  backdrop-filter: blur(4px);
}

.chat-view.conversation-files-open .chat-scroll {
  right: 400px;
}

.chat-view.conversation-files-open .notify-bar,
.chat-view.conversation-files-open .chat-composer-shell {
  left: calc((100% - 400px) / 2);
  width: min(752px, calc(100% - 448px));
  transform: translateX(-50%);
}

@keyframes conversation-files-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.document-preview-panel {
  position: absolute;
  z-index: 48;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: 50%;
  min-width: 420px;
  flex-direction: column;
  border-left: 1px solid rgba(31, 31, 30, 0.16);
  background: #f2f3f5;
  box-shadow: -8px 0 24px rgba(25, 25, 24, 0.025);
  animation: document-panel-enter 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.document-preview-header {
  display: flex;
  min-height: 48px;
  flex: 0 0 48px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  background: #fff;
}

.document-preview-title {
  min-width: 0;
  flex: 1 1 auto;
  margin: 0;
  padding-left: 12px;
  overflow: hidden;
  color: #383835;
  font-family: "Anthropic Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-preview-title span {
  color: #85837d;
}

.document-preview-title > span:first-child {
  color: #383835;
}

.document-preview-title i {
  margin: 0 4px;
  opacity: 0.5;
  font-style: normal;
}

.document-preview-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}

.document-preview-actions button[hidden],
.document-preview-actions a[hidden] {
  display: none;
}

.document-preview-actions button,
.document-preview-actions a {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #4d4c48;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms ease, transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

.document-preview-actions button:hover,
.document-preview-actions button:focus-visible,
.document-preview-actions a:hover,
.document-preview-actions a:focus-visible {
  background: #eeeeea;
}

.document-preview-download {
  background: #f4f4f1 !important;
  box-shadow: 0 0 0 1px rgba(31, 31, 30, 0.1);
}

.document-preview-actions .anthropic-icon {
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 20px;
}

.document-preview-stage {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  padding: 14px 16px 44px;
  outline: 0;
  scrollbar-gutter: stable;
}

.document-preview-stage.is-html-preview {
  overflow: hidden;
  padding: 0;
  background: #fff;
  scrollbar-gutter: auto;
}

.document-html-preview {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.attachment-document-preview {
  display: flex;
  width: min(720px, 100%);
  min-height: 100%;
  margin: 0 auto;
  flex-direction: column;
  gap: 10px;
}

.attachment-document-preview-meta {
  display: flex;
  min-height: 20px;
  align-items: center;
  gap: 8px;
  color: #85837d;
  font-size: 12px;
  line-height: 18px;
}

.attachment-format-note {
  color: #9a9891;
}

.attachment-document-preview-page {
  width: 100%;
  min-height: calc(100vh - 106px);
  margin: 0;
  padding: 18px 16px 48px;
  border: 1px solid rgba(31, 31, 30, 0.14);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(31, 31, 30, 0.08);
  color: #282825;
  font: 14px/24px "Anthropic Sans", system-ui, "Segoe UI", sans-serif;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.document-preview-pages {
  display: flex;
  width: 100%;
  align-items: center;
  flex-direction: column;
  gap: 20px;
}

.document-preview-page {
  position: relative;
  width: min(515px, 100%);
  aspect-ratio: 210 / 297;
  min-height: 680px;
  padding: clamp(38px, 7.5%, 58px) clamp(38px, 8.5%, 62px) 52px;
  overflow: hidden;
  background: #fff;
  color: #181817;
  box-shadow: 0 1px 5px rgba(11, 11, 11, 0.12);
  font-family: "Songti SC", SimSun, "Times New Roman", serif;
  font-size: 11px;
  line-height: 1.72;
}

@media (min-width: 901px) {
  body:has(.chat-view.document-preview-open) {
    background: #0b0b0b;
  }

  body:has(.chat-view.document-preview-open) .sidebar {
    display: none;
  }

  body:has(.chat-view.document-preview-open) .page-shell {
    padding: 8px;
  }

  .chat-view.document-preview-open {
    height: calc(100vh - 16px);
    overflow: hidden;
    border-radius: 16px;
    background: var(--page-bg);
  }

  .chat-view.document-preview-open:not(.document-preview-expanded) .document-preview-page {
    width: calc(100% - 32px);
    max-width: 100%;
    min-height: 0;
  }
}

.document-preview-page h1 {
  display: block;
  margin: 0 0 12px;
  padding: 0;
  color: #2e74b5;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
}

.document-preview-page h2,
.document-preview-page h3 {
  margin: 12px 0 5px;
  color: #2e74b5;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  font-weight: 600;
  letter-spacing: 0;
}

.document-preview-page h2 {
  font-size: 13.5px;
}

.document-preview-page h3 {
  font-size: 12.5px;
}

.document-preview-page p {
  margin: 0 0 6px;
  text-align: justify;
  text-indent: 2em;
  overflow-wrap: anywhere;
}

.document-preview-page ul,
.document-preview-page ol {
  margin: 2px 0 8px;
  padding-left: 24px;
}

.document-preview-page li {
  margin: 0 0 3px;
}

.document-preview-page blockquote {
  margin: 8px 0;
  padding: 6px 10px;
  border-left: 3px solid #c8d9ea;
  background: #f5f8fb;
  color: #484844;
}

.document-preview-page blockquote p {
  margin: 0;
  text-indent: 0;
}

.document-preview-page-count {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 4px 7px;
  border-radius: 4px;
  background: rgba(55, 55, 52, 0.68);
  color: #fff;
  font-family: "Anthropic Sans", system-ui, sans-serif;
  font-size: 12px;
  line-height: 16px;
}

.chat-view.document-preview-open .chat-header,
.chat-view.document-preview-open .chat-scroll {
  right: 50%;
}

.chat-view.document-preview-open .notify-bar,
.chat-view.document-preview-open .chat-composer-shell {
  left: 25%;
  width: min(752px, calc(50% - 48px));
  transform: translateX(-50%);
}

.chat-view.document-preview-open .chat-feed {
  width: min(720px, calc(100% - 48px));
}

.chat-view.document-preview-expanded .document-preview-panel {
  width: 100%;
  min-width: 0;
}

.chat-view.document-preview-expanded .chat-header,
.chat-view.document-preview-expanded .chat-scroll,
.chat-view.document-preview-expanded .notify-bar,
.chat-view.document-preview-expanded .chat-composer-shell {
  visibility: hidden;
  pointer-events: none;
}

@keyframes document-panel-enter {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 900px) {
  .conversation-files-panel {
    right: 0;
    bottom: 0;
    width: 100%;
    min-width: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 0;
  }

  .chat-view.conversation-files-open .chat-scroll,
  .chat-view.conversation-files-open .notify-bar,
  .chat-view.conversation-files-open .chat-composer-shell {
    visibility: hidden;
    pointer-events: none;
  }

  .document-preview-panel {
    width: 100%;
    min-width: 0;
  }

  .chat-view.document-preview-open .chat-header,
  .chat-view.document-preview-open .chat-scroll,
  .chat-view.document-preview-open .notify-bar,
  .chat-view.document-preview-open .chat-composer-shell {
    visibility: hidden;
    pointer-events: none;
  }

  .document-preview-expand {
    display: none !important;
  }
}

@media (max-width: 520px) {
  .chat-view.document-preview-open {
    background: #141414;
  }

  .document-preview-panel {
    inset: 50px auto 8px 8px;
    width: calc(100vw - 16px);
    min-width: 0;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: none;
  }

  .chat-view.document-preview-open .chat-header {
    right: 0;
    visibility: visible;
    pointer-events: auto;
  }

  .conversation-files-scroll {
    padding-inline: 14px;
  }

  .conversation-content-grid {
    grid-template-columns: 1fr;
  }

  .document-output-card {
    width: calc(100% - 16px);
    margin-right: 8px;
  }

  .document-output-download {
    margin-inline: 10px;
  }

  .document-preview-stage {
    padding-inline: 10px;
    background: #fff;
  }

  .document-preview-page {
    min-height: 600px;
    padding-inline: 32px;
  }
}

.sidebar-search,
.side-section-title,
.chat-history-empty {
  display: none;
}

body.sidebar-open .sidebar-search {
  position: static;
  display: grid !important;
  place-items: center;
  width: 24px !important;
  height: 24px;
  padding: 0 !important;
}

body.sidebar-open .side-section-title {
  display: block;
  margin: 16px 10px 8px;
  color: #777670;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
}

.products-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.products-toggle .anthropic-icon {
  width: 14px;
  height: 14px;
  font-size: 14px;
  line-height: 14px;
  transform: rotate(90deg);
  transition: transform 140ms ease;
}

.products-toggle[aria-expanded="false"] .anthropic-icon {
  transform: rotate(0deg);
}

.product-list[hidden] {
  display: none;
}

body.sidebar-open .discover {
  margin-top: 0;
}

body.sidebar-open .chat-history-empty {
  display: block;
  margin: 45px 40px 0;
  color: #807f79;
  font-size: 14px;
  white-space: nowrap;
}

.chat-history-empty[hidden] {
  display: none !important;
}

.chat-history {
  display: none;
}

body.sidebar-open .recents-section {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  margin-top: 15px;
}

.recents-section {
  display: none;
}

.recents-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  padding: 0 10px 0 12px;
}

.recents-heading h2 {
  margin: 0;
}

.recents-toggle,
.group-by-button {
  border: 0;
  background: transparent;
  color: #777670;
  cursor: pointer;
}

.recents-toggle {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
}

.recents-toggle .anthropic-icon {
  width: 12px;
  height: 12px;
  font-size: 12px;
  line-height: 12px;
  transform: rotate(90deg);
  transition: transform 140ms ease;
}

.recents-section.collapsed .recents-toggle .anthropic-icon {
  transform: none;
}

.group-by-button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 7px;
}

.group-by-button:hover,
.group-by-button[aria-expanded="true"] {
  background: #ecece8;
}

.group-by-button:focus-visible {
  outline: 0;
}

.group-by-button .anthropic-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 16px;
}

body.sidebar-open .chat-history {
  display: block;
  min-height: 0;
  padding: 4px 8px 8px;
  overflow-y: auto;
}

.recents-section.collapsed .chat-history,
.recents-section.collapsed .chat-history-empty {
  display: none !important;
}

.chat-history-row {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 32px;
  border-radius: 8px;
}

.chat-history-row:hover,
.chat-history-row.active {
  background: #ecece8;
}

.chat-history-item {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 5px;
  width: auto;
  overflow: hidden;
  padding: 6px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font-size: 14px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.chat-history-item:hover,
.chat-history-item:focus-visible {
  background: transparent;
}

.chat-history-item.active,
.chat-history-item.active:hover,
.chat-history-item.active:focus-visible {
  background: transparent;
}

.chat-history-row.unread .chat-history-item {
  font-weight: 650;
}

.chat-history-row.unread::before {
  content: "";
  position: absolute;
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #2a78d6;
}

.chat-history-star {
  width: 14px;
  height: 14px;
  color: #777670;
  font-size: 14px;
  line-height: 14px;
}

.chat-history-options {
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  margin-right: 3px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #6f6e69;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
}

.chat-history-row:hover .chat-history-options,
.chat-history-row.active .chat-history-options,
.chat-history-options:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.chat-history-options:hover {
  background: #deded9;
}

.chat-history-options .anthropic-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 16px;
}

.chat-history-group-label {
  padding: 8px 8px 4px;
  color: #8a8983;
  font-size: 12px;
  font-weight: 600;
}

.sidebar-chat-menu,
.sidebar-project-menu,
.group-by-menu {
  position: fixed;
  z-index: 92;
  padding: 4px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(11, 11, 11, 0.1), 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
}

.sidebar-chat-menu {
  width: 191px;
}

.sidebar-project-menu {
  width: 181px;
}

.group-by-menu {
  width: 148px;
}

.sidebar-chat-menu[hidden],
.sidebar-project-menu[hidden],
.group-by-menu[hidden] {
  display: none;
}

.sidebar-chat-menu button,
.sidebar-project-menu button,
.group-by-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 32px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #0b0b0b;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
}

.sidebar-project-menu button > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-project-plus,
.sidebar-project-menu button > .anthropic-icon:first-child {
  display: grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 20px;
}

.chat-history-rename {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 32px;
  padding: 5px 7px;
  border: 1px solid #2a78d6;
  border-radius: 6px;
  outline: 0;
  background: #fff;
  color: #30302d;
  font: 14px/20px "Anthropic Sans", system-ui, sans-serif;
}

.chat-history-rename:focus-visible,
.chat-history-options:focus-visible,
.sidebar-chat-menu button:focus-visible,
.sidebar-project-menu button:focus-visible,
.group-by-menu button:focus-visible {
  outline: 0;
}

.sidebar-chat-menu button:hover,
.sidebar-project-menu button:hover,
.group-by-menu button:hover {
  background: #f1f1ee;
}

.sidebar-chat-menu button > .anthropic-icon:first-child {
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 20px;
}

.chat-action-label,
.group-by-menu button > span:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.sidebar-chat-menu kbd {
  color: #898781;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
}

.sidebar-chat-menu .chat-action-arrow {
  width: 16px;
  height: 16px;
  margin-right: -4px;
  color: #777670;
  font-size: 16px;
  line-height: 16px;
}

.sidebar-chat-menu button.danger {
  color: #b03a2e;
}

.sidebar-chat-menu button.danger:hover {
  background: #f1f1ee;
  color: #b03a2e;
}

.sidebar-menu-separator {
  height: 1px;
  margin: 4px 10px;
  background: rgba(11, 11, 11, 0.1);
}

.group-by-menu button .anthropic-icon {
  visibility: hidden;
  width: 16px;
  height: 16px;
  color: #2a78d6;
  font-size: 16px;
  line-height: 16px;
}

.group-by-menu button[aria-checked="true"] .anthropic-icon {
  visibility: visible;
}

@media (min-width: 769px) {
  body.sidebar-open .page-shell {
    padding-left: 288px;
  }
}

.composer-area {
  position: relative;
  width: min(672px, 100%);
  margin: 0 auto;
  padding-top: clamp(140px, 20vh, 180px);
}

.chat-view[hidden] {
  display: none;
}

.chat-view {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 0;
}

body.chat-mode .composer-area,
body.chat-mode:not(.incognito-mode) .incognito {
  display: none;
}

.chat-header {
  position: absolute;
  z-index: 35;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 8px 18px 8px 12px;
  background: linear-gradient(to bottom, rgba(248, 248, 246, 0.98), rgba(248, 248, 246, 0.88), rgba(248, 248, 246, 0));
}

.chat-header-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 2px;
}

.chat-title {
  display: inline-flex;
  align-items: center;
  max-width: min(420px, 48vw);
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #0b0b0b;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.chat-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-title:hover {
  background: #eeeeea;
}

.chat-options-button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #777670;
  cursor: pointer;
}

.chat-options-button:hover,
.chat-options-button[aria-expanded="true"] {
  background: #eeeeea;
}

.chat-options-button .anthropic-icon {
  width: 14px;
  height: 14px;
  font-size: 14px;
  line-height: 14px;
}

.chat-title-input {
  width: 24px;
  height: 20px;
  margin-left: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: #0b0b0b;
  font-size: 14px;
}

.chat-title-input:focus {
  box-shadow: none;
}

.chat-title[hidden],
.chat-options-button[hidden],
.chat-title-input[hidden] {
  display: none;
}

.share-button {
  height: 30px;
  padding: 0 12px;
  border: 1px solid #deded9;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  font-size: 14px;
  cursor: pointer;
}

.chat-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.conversation-files-toggle {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #4d4c48;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.conversation-files-toggle[hidden] {
  display: none;
}

.conversation-files-toggle:hover,
.conversation-files-toggle:focus-visible {
  background: #eeeeea;
}

.conversation-files-toggle:focus-visible {
  outline: 0;
}

.conversation-files-toggle[aria-pressed="true"] {
  border-color: #9dbbdb;
  background: #e9f2fb;
  color: #2d6598;
  box-shadow: 0 0 0 1px rgba(73, 124, 174, 0.08);
}

.conversation-files-toggle .anthropic-icon {
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 20px;
}

.chat-view.has-conversation-files .share-button {
  display: none;
}

.chat-scroll {
  position: absolute;
  inset: 48px 0 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.chat-feed {
  width: min(720px, calc(100% - 64px));
  min-height: 100%;
  margin: 0 auto;
  padding: 40px 0 190px;
  transform: translateX(2.5px);
}

.chat-turn {
  width: 100%;
}

.chat-turn:focus-visible {
  border-radius: 8px;
  outline: 0;
  box-shadow:
    inset 0 0 0 1px rgb(252, 252, 251),
    0 0 0 1px rgb(42, 120, 214),
    0 0 6px 1px rgb(205, 226, 251);
}

.user-turn {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  margin-bottom: 34px;
}

.user-turn.message-row-enter {
  transform-origin: right center;
  animation: message-row-enter 450ms cubic-bezier(0.34, 1.3, 0.64, 1) both;
}

.user-turn-content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: 85%;
}

.user-turn-content .user-bubble {
  max-width: 100%;
}

.user-attachments {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.user-bubble {
  max-width: 100%;
  padding: 13px 16px;
  border-radius: 14px;
  background: #eeeeeb;
  color: #20201e;
  font-size: 16px;
  line-height: 22px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.user-bubble code {
  padding: 2px 5px;
  border-radius: 4px;
  background: #e3e3df;
  color: #963c35;
  font-family: var(--font-claude-mono);
  font-size: 0.9em;
  white-space: normal;
}

.user-bubble.user-message-collapsible-card {
  display: flex;
  width: min(605px, 100%);
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 20px;
  overflow-wrap: break-word;
}

.user-turn-content.has-collapsible-message {
  width: min(605px, 100%);
  max-width: 100%;
}

.user-message-collapsible {
  flex: 0 0 200px;
  height: 200px;
  max-height: 200px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent);
}

.user-message-collapsible-card.is-expanded .user-message-collapsible {
  flex-basis: auto;
  height: auto;
  max-height: none;
  overflow: visible;
  mask-image: none;
}

.user-message-toggle {
  flex: 0 0 24px;
  align-self: flex-start;
  height: 24px;
  margin-inline-start: -8px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #20201e;
  font: inherit;
  line-height: 24px;
  cursor: pointer;
}

.user-message-toggle:hover {
  background: rgb(31 31 30 / 7%);
}

.user-message-toggle:focus-visible {
  outline: 2px solid #2a78d6;
  outline-offset: 1px;
}

.user-message-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  min-height: 24px;
  margin-top: 4px;
  color: #898781;
  opacity: 0;
  transition: opacity 60ms cubic-bezier(0.32, 0.72, 0, 1), scale 60ms cubic-bezier(0.32, 0.72, 0, 1);
}

.user-turn:hover .user-message-actions,
.user-turn:focus-within .user-message-actions,
.user-message-actions:hover,
.user-message-actions:focus-within {
  opacity: 1;
  transition-duration: 120ms;
  transition-delay: 100ms;
}

@media (pointer: coarse) {
  .user-message-actions {
    opacity: 1;
  }
}

.user-message-time {
  min-width: 30px;
  margin-right: 3px;
  color: #898781;
  font-size: 12px;
  line-height: 24px;
}

.user-message-actions button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #898781;
  cursor: pointer;
  transition: color 60ms cubic-bezier(0.4, 0, 0.2, 1), background-color 60ms cubic-bezier(0.4, 0, 0.2, 1), transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

.chat-view.generating .user-message-actions button[aria-label="Retry"] {
  display: none;
}

.user-message-actions button:hover,
.user-message-actions button:focus-visible {
  background: #ecece8;
  color: #30302d;
}

.user-message-actions .anthropic-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 16px;
}

.user-edit-box {
  width: min(560px, 72vw);
  padding: 10px;
  border: 0;
  border-radius: 12px;
  background: #eeeeeb;
  box-shadow: none;
}

.user-edit-input {
  display: block;
  width: 100%;
  min-height: 76px;
  padding: 8px 12px;
  resize: none;
  border: 0;
  border-radius: 8px;
  outline: 0;
  background: rgba(255, 255, 255, 0.56);
  color: #20201e;
  box-shadow: 0 0 0 1px rgba(31, 31, 30, 0.14);
  font: inherit;
  font-size: 15px;
  line-height: 24px;
}

.user-edit-input:focus {
  box-shadow: 0 0 0 2px rgba(74, 73, 69, 0.28);
}

.user-edit-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.user-edit-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 330px;
  color: #686762;
  font-size: 12px;
  line-height: 16px;
}

.user-edit-warning .anthropic-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  font-size: 16px;
  line-height: 16px;
}

.user-edit-actions {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 0;
}

.user-edit-actions button {
  min-width: 0;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: #f8f8f6;
  color: #3a3a37;
  box-shadow: 0 0 0 1px rgba(31, 31, 30, 0.12);
  font-size: 14px;
  cursor: pointer;
}

.user-edit-actions button.primary {
  background: #30302d;
  color: #fff;
  box-shadow: none;
}

.user-edit-actions button:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.assistant-turn {
  margin-bottom: 42px;
}

.assistant-turn,
.assistant-progress {
  width: 100%;
  margin-left: 0;
}

.assistant-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  color: #0b0b0b;
  font-family: var(--font-claude-serif);
  font-size: 16px;
  line-height: 24px;
}

.assistant-copy > * {
  min-width: 0;
}

.tts-word {
  color: #8a8983;
  transition: color 150ms ease;
}

.tts-word-read,
.tts-word-active {
  color: #0b0b0b;
}

.tts-word-active {
  background: rgba(217, 119, 87, 0.12);
  border-radius: 2px;
}

.assistant-response-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  color: #0b0b0b;
}

.assistant-streaming-spark {
  display: flex;
  align-items: center;
  width: calc(100% - 4px);
  height: 46px;
  margin: 24px 0 0 4px;
  transition: transform 300ms ease-out;
}

.assistant-streaming-spark-padding {
  box-sizing: content-box;
  padding: 4px;
  line-height: 0;
  transform: translateX(-1px);
}

.assistant-streaming-spark-holder {
  display: inline-flex;
  width: 32px;
  height: 32px;
}

.assistant-streaming-spark-icon.mini-claude-mark {
  display: block;
  width: 32px;
  height: 32px;
  fill: #d97757;
}

.assistant-end-mark {
  display: flex;
  align-items: center;
  min-height: 40px;
  margin: 24px 0 0 4px;
  transition: transform 300ms ease-out;
}

.assistant-end-icon-wrap {
  padding: 4px;
  line-height: 0;
  translate: -1px 0;
}

.assistant-end-mark .mini-claude-mark {
  display: block;
  width: 32px;
  height: 32px;
  fill: #d97757;
}

.link-preview-block {
  min-width: 0;
  padding: 16px 0 16px 8px;
}

.link-preview-list {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 12px;
  font-family: "Anthropic Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.link-preview-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 109px;
  flex-direction: column;
  padding: 16px;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  color: #0b0b0b;
  text-decoration: none;
}

.link-preview-title {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  color: #0b0b0b;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.link-preview-card:hover .link-preview-title,
.link-preview-card:focus-visible .link-preview-title {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.link-preview-snippet {
  display: -webkit-box;
  min-width: 0;
  padding-top: 8px;
  overflow: hidden;
  color: #52514e;
  font-size: 14px;
  line-height: 20px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.link-preview-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  padding-top: 12px;
  color: #898781;
  font-size: 13px;
  line-height: 17px;
}

.link-preview-favicon-slot {
  display: flex;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.link-preview-favicon {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.link-preview-domain {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-preview-border {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(11, 11, 11, 0.1);
  border-radius: 16px;
  pointer-events: none;
}

.assistant-copy p {
  margin: 0;
  padding: 0 32px 0 8px;
  overflow-wrap: break-word;
  white-space: normal;
}

.api-error-turn .assistant-copy {
  color: #9b3f35;
}

.assistant-copy h2 {
  margin: 12px 0 -4px;
  padding: 0 32px 0 8px;
  font-size: 22px;
  font-weight: 600;
  line-height: 26.4px;
  color: #131313;
}

.assistant-copy h3 {
  margin: 12px 0 -4px;
  padding: 0 32px 0 8px;
  font-size: 18px;
  font-weight: 600;
  line-height: 26.4px;
  color: #131313;
}

.assistant-copy strong {
  font-weight: 600;
}

.assistant-copy h4,
.assistant-copy h5 {
  margin: 8px 0 -4px;
  padding: 0 32px 0 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.assistant-copy h6 {
  margin: 8px 0 -4px;
  padding: 0 32px 0 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.assistant-copy h6[data-markdown-depth="6"] {
  font-weight: 580;
}

.assistant-copy ul,
.assistant-copy ol {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 12px;
  padding: 0 32px 0 32px;
}

.assistant-copy ul {
  list-style: disc outside;
}

.assistant-copy ol {
  list-style: decimal outside;
}

.assistant-copy li > ul,
.assistant-copy li > ol {
  margin: 4px 0 0;
}

.assistant-copy ul:not(.contains-task-list):not(:last-child) ul,
.assistant-copy ul:not(.contains-task-list):not(:last-child) ol,
.assistant-copy ol:not(:last-child) ul,
.assistant-copy ol:not(:last-child) ol {
  padding-bottom: 4px;
}

.assistant-copy li {
  min-width: 0;
  padding-left: 8px;
  font-size: 16px;
  line-height: 24px;
  overflow-wrap: break-word;
}

.assistant-copy ul.contains-task-list {
  display: block;
  margin: 0;
  padding: 0 32px 0 0;
  list-style: none;
}

.assistant-copy .task-list-item {
  padding: 0;
  font-size: 14px;
  line-height: 26.4px;
  list-style: none;
}

.assistant-copy .task-list-item > input[type="checkbox"] {
  width: 13px;
  height: 13px;
  margin: 0;
}

.assistant-copy blockquote {
  margin: 0 0 0 8px;
  padding: 0 32px 0 8px;
  border-left: 4px solid rgba(30, 30, 29, 0.1);
  color: #383835;
}

.assistant-copy blockquote p {
  padding: 0;
}

.assistant-copy a {
  color: inherit;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.assistant-copy a:hover,
.assistant-copy a:focus-visible {
  color: inherit;
  text-decoration-thickness: 1.5px;
}

.assistant-copy > .katex-display {
  min-width: 0;
  margin: 14px 0;
  padding: 0;
  overflow: visible;
}

.assistant-copy > .katex-display > .katex {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.assistant-copy > .katex-display > .katex:focus-visible {
  outline: 2px solid rgb(37, 106, 191);
  outline-offset: 2px;
}

.assistant-copy .math-fallback {
  padding: 0 32px 0 8px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.assistant-copy a.citation-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #0b0b0b;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  text-decoration: none;
  translate: 0 -1px;
  vertical-align: baseline;
}

.assistant-copy a.citation-link.citation-chip-enter {
  animation: citation-chip-enter 200ms ease-out both;
  animation-delay: var(--citation-reveal-delay, 0ms);
}

@keyframes citation-chip-enter {
  from {
    opacity: 0;
    scale: 0.95;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

.citation-chip-label {
  display: inline-flex;
  align-items: center;
  max-width: 180px;
  height: 18px;
  padding: 0 6px;
  overflow: hidden;
  border: 1px solid rgba(31, 31, 30, 0.1);
  border-radius: 999px;
  background: #f9f9f7;
  color: #52514e;
  font-family: "Anthropic Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  text-overflow: ellipsis;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
  white-space: nowrap;
}

.assistant-copy a.citation-link:hover .citation-chip-label {
  border-color: rgba(42, 120, 214, 0.32);
  background: #edf4fc;
  color: #343c48;
}

.citation-chip-affordance {
  position: absolute;
  top: 0.5px;
  right: 0.5px;
  display: flex;
  align-items: center;
  width: 24px;
  height: 17px;
  padding: 0 6px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(to right, rgba(237, 244, 252, 0), #edf4fc 30%, #edf4fc);
  opacity: 0;
  transition: opacity 150ms ease;
}

.citation-chip-arrow {
  position: relative;
  width: 10px;
  height: 10px;
  margin-left: auto;
  color: #2a78d6;
  opacity: 0;
  scale: 0.8;
  transition: opacity 500ms ease-in, scale 500ms ease-in;
}

.citation-chip-arrow::before {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
}

.citation-chip-arrow::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 1px;
  width: 8px;
  height: 1.5px;
  background: currentColor;
  transform: rotate(-45deg);
  transform-origin: right center;
}

.assistant-copy a.citation-link:hover .citation-chip-affordance,
.assistant-copy a.citation-link:focus-visible .citation-chip-affordance,
.assistant-copy a.citation-link:hover .citation-chip-arrow,
.assistant-copy a.citation-link:focus-visible .citation-chip-arrow {
  opacity: 1;
}

.assistant-copy a.citation-link:hover .citation-chip-arrow,
.assistant-copy a.citation-link:focus-visible .citation-chip-arrow {
  scale: 1;
  transition-timing-function: ease-out;
}

.assistant-copy hr {
  width: auto;
  height: 1px;
  margin: 12px 6px;
  border: 0;
  border-top: 1px solid rgba(31, 31, 30, 0.2);
  background: transparent;
  overflow: hidden;
}

.assistant-table-scroll {
  width: 100%;
  margin: 0 0 24px;
  padding: 0 8px;
  overflow-x: auto;
}

.assistant-copy > .assistant-table-scroll:last-child {
  margin-bottom: 0;
}

.assistant-table-scroll > table {
  width: 100%;
  min-width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 23.8px;
  white-space: normal;
}

.assistant-copy th,
.assistant-copy td {
  padding: 8px 16px 8px 0;
  border-radius: 0;
  background: transparent;
  vertical-align: top;
}

.assistant-copy th:not([align]),
.assistant-copy td:not([align]) {
  text-align: left;
}

.assistant-copy :is(th, td)[align="left"] {
  text-align: left;
}

.assistant-copy :is(th, td)[align="center"] {
  text-align: center;
}

.assistant-copy :is(th, td)[align="right"] {
  text-align: right;
}

.assistant-copy th {
  border-bottom: 1px solid rgba(30, 30, 29, 0.6);
  color: #131313;
  font-weight: 600;
}

.assistant-copy td {
  border-bottom: 1px solid rgba(30, 30, 29, 0.3);
}

.assistant-copy :not(pre) > code {
  padding: 1px 4px;
  border: 1px solid rgba(31, 31, 30, 0.15);
  border-radius: 6.4px;
  background: rgba(55, 55, 52, 0.05);
  color: #8d2525;
  font-family: var(--font-claude-mono);
  font-size: 14.4px;
  line-height: 21.6px;
  white-space: pre-wrap;
}

.assistant-thought {
  margin: 0 0 10px 8px;
  color: #7b7974;
  font-family: var(--font-claude-serif);
  font-size: 14px;
  line-height: 20px;
}

.assistant-thought-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: default;
}

.assistant-thought-label {
  min-width: 0;
  overflow: hidden;
  font-family: "Anthropic Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 430;
  line-height: 19.6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-thought.has-detail .assistant-thought-toggle {
  cursor: pointer;
}

.assistant-thought-toggle:focus-visible {
  outline: 0;
}

.assistant-thought.streaming .assistant-thought-toggle {
  cursor: default;
}

.assistant-thought.streaming.streaming-settled .assistant-thought-toggle {
  cursor: pointer;
}

.assistant-thought.streaming .thinking-claude-mark {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.assistant-thought.streaming.streaming-settled .assistant-thought-toggle::before {
  width: 0;
  height: 20px;
  margin-right: -8px;
  content: "";
}

.assistant-thought.streaming .assistant-thought-toggle > .anthropic-icon:last-child {
  display: none;
}

.assistant-thought-toggle .anthropic-icon {
  width: 12px;
  height: 12px;
  font-size: 12px;
  line-height: 12px;
  opacity: 0;
  transform: rotate(-90deg);
  transition: opacity 200ms ease, transform 200ms ease;
}

.assistant-thought-toggle:hover .anthropic-icon,
.assistant-thought-toggle:focus-visible .anthropic-icon {
  opacity: 1;
}

.assistant-thought-toggle[aria-expanded="true"] .anthropic-icon {
  transform: rotate(0deg);
}

.assistant-thought-detail {
  display: grid;
  grid-template-rows: 0fr;
  max-width: 660px;
  margin: 0;
  opacity: 0;
  color: #373734;
  font-family: "Anthropic Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 430;
  line-height: 19.6px;
  transition: grid-template-rows 300ms ease-out, margin 300ms ease-out, opacity 180ms ease-out;
}

.assistant-thought-detail.expanded {
  grid-template-rows: 1fr;
  margin: 4px 0 10px;
  opacity: 1;
}

.assistant-thought-detail-inner {
  min-width: 0;
  overflow: hidden;
}

.thought-timeline-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 10px;
  min-height: 36px;
  color: #383835;
  font-size: 14px;
  line-height: 19.6px;
}

.thought-timeline-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4px;
}

.thought-timeline-rail .anthropic-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: #7b7974;
  font-size: 16px;
  line-height: 16px;
}

.thought-timeline-line {
  width: 1px;
  min-height: 12px;
  flex: 1 1 auto;
  margin-top: 4px;
  background: rgba(30, 30, 29, 0.15);
}

.thought-timeline-copy {
  max-height: 200px;
  padding: 2px 0 8px;
  overflow: hidden;
  white-space: pre-wrap;
}

.thought-timeline-row.complete {
  min-height: 28px;
}

.thought-timeline-row.complete .thought-timeline-line {
  display: none;
}

.thought-timeline-row.complete .thought-timeline-copy {
  padding-bottom: 2px;
}

.search-process-detail {
  max-width: none;
}

.search-process-disclosure > .assistant-thought-toggle {
  width: 100%;
}

.search-complete-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 0;
  height: 20px;
  margin-right: -8px;
  overflow: hidden;
  opacity: 0;
  transition: width 150ms cubic-bezier(0.25, 0.9, 0.3, 1) 150ms,
    margin-right 150ms cubic-bezier(0.25, 0.9, 0.3, 1) 150ms,
    opacity 150ms ease 150ms;
}

.search-complete-mark {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.search-process-disclosure > .assistant-thought-toggle:hover .search-complete-icon,
.search-process-disclosure > .assistant-thought-toggle:focus-visible .search-complete-icon {
  width: 20px;
  margin-right: 0;
  opacity: 1;
  transition-delay: 0ms;
}

.search-process-detail .search-process-branch {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  min-width: 0;
  margin: 0;
  padding: 0;
}

.search-process-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100%;
  padding-top: 4px;
}

.search-process-rail .web-icon {
  flex: 0 0 auto;
}

.search-process-line {
  width: 1px;
  min-height: 12px;
  flex: 1 1 auto;
  margin-top: 4px;
  background: rgba(30, 30, 29, 0.15);
}

.search-process-content {
  min-width: 0;
}

.search-query-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: 20px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #52514e;
  font-family: "Anthropic Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  text-align: left;
  opacity: 1;
  cursor: default;
}

.search-query-row:disabled {
  color: #52514e;
  opacity: 1;
}

.search-query-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-process-detail .thought-timeline-row {
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 0;
  margin-top: 8px;
}

.search-process-detail .thought-timeline-copy {
  padding-left: 10px;
}

@keyframes thought-detail-enter {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.code-block {
  position: relative;
  overflow: visible;
  border: 1px solid rgba(31, 31, 30, 0.15);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  line-height: 26.4px;
}

.code-language {
  height: 31px;
  padding: 14px 14px 0;
  color: #7b7974;
  font-family: "Anthropic Sans", system-ui, sans-serif;
  font-size: 12px;
  line-height: 16.8px;
}

.code-copy-wrap {
  position: sticky;
  z-index: 2;
  top: 8px;
  float: right;
  width: 0;
  height: 48px;
  opacity: 0;
  transition: opacity 150ms ease;
}

.code-block:hover .code-copy-wrap,
.code-block:focus-within .code-copy-wrap {
  opacity: 1;
}

.code-copy-button {
  position: absolute;
  top: 0;
  right: 8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.76);
  color: #373734;
  backdrop-filter: blur(12px);
  cursor: pointer;
}

.code-copy-button:hover {
  background: #efefec;
}

.code-copy-button .anthropic-icon {
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 20px;
}

.code-scroll {
  overflow-x: auto;
}

.code-block__code {
  display: block;
  min-width: 100%;
  margin: 0;
  padding: 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #14181f;
  font-family: var(--font-claude-mono);
  font-size: 14px;
  font-weight: 400;
  line-height: 22.75px;
  tab-size: 4;
  white-space: pre;
}

.code-block__code code {
  font: inherit;
  white-space: pre;
}

.code-block__code code:not([class*="language-"]) {
  white-space: pre-wrap;
}

.code-block .hljs {
  padding: 0;
  background: transparent;
  color: #2b303b;
}

.code-block .hljs-tag,
.code-block .hljs-name,
.code-block .hljs-keyword,
.code-block .hljs-selector-tag,
.code-block .hljs-meta .hljs-keyword {
  color: #b80a18;
}

.code-block .hljs-attr,
.code-block .hljs-attribute,
.code-block .hljs-meta {
  color: #bd0f1e;
}

.code-block .hljs-string,
.code-block .hljs-quote,
.code-block .hljs-regexp {
  color: #008000;
}

.code-block .hljs-number,
.code-block .hljs-literal,
.code-block .hljs-built_in {
  color: #7b3fb2;
}

.code-block .hljs-comment {
  color: #7b7974;
  font-style: italic;
}

.message-actions {
  display: flex;
  align-items: center;
  gap: 0;
  height: 24px;
  width: fit-content;
  margin: 8px 0 0 2px;
  opacity: 0;
  transition: opacity 60ms cubic-bezier(0.32, 0.72, 0, 1), scale 60ms cubic-bezier(0.32, 0.72, 0, 1);
}

.assistant-message-time {
  margin-left: 4px;
  color: #898781;
  font-family: "Anthropic Sans", system-ui, sans-serif;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 24px;
  white-space: nowrap;
}

.user-message-time[data-tooltip]::after,
.assistant-message-time[data-tooltip]::after {
  top: auto;
  bottom: calc(100% + 7px);
}

.assistant-turn:hover .message-actions,
.assistant-turn:focus-within .message-actions,
.message-actions:hover,
.message-actions:focus-within {
  opacity: 1;
  transition-duration: 120ms;
  transition-delay: 100ms;
}

@media (pointer: coarse) {
  .message-actions {
    opacity: 1;
  }
}

.message-actions-enter {
  animation: timeline-fade-in 300ms ease-out both;
}

.timeline-fade-in {
  animation: timeline-fade-in 300ms ease-out both;
}

.message-actions button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #898781;
  cursor: pointer;
  transition: color 60ms cubic-bezier(0.4, 0, 0.2, 1), background-color 60ms cubic-bezier(0.4, 0, 0.2, 1), transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

.message-actions button:hover {
  background: #ecece8;
  color: #33332f;
}

.message-actions button[aria-pressed="true"] {
  background: rgba(217, 119, 87, 0.14);
  color: #b85f45;
}

.message-actions button:active,
.user-message-actions button:active,
.code-copy-button:active {
  transform: scale(0.92);
}

.message-actions button:disabled {
  opacity: 0.42;
  cursor: default;
}

.message-actions button:disabled:hover {
  background: transparent;
  color: #898781;
}

.version-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 0;
  color: #85847e;
  font-family: "Anthropic Sans", system-ui, sans-serif;
  font-size: 12px;
  line-height: 22px;
}

.version-controls > span {
  min-width: 30px;
  text-align: center;
}

.version-controls .version-arrow {
  width: 24px;
  color: #85847e;
  font-family: "Anthropic Sans", system-ui, sans-serif;
  font-size: 18px;
  line-height: 20px;
}

.message-actions .anthropic-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 16px;
}

.response-interrupted-status {
  display: flex;
  box-sizing: border-box;
  height: 44px;
  min-height: 44px;
  margin: 8px 0 0 4px;
  padding: 10px 12px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(31, 31, 30, 0.12);
  border-radius: 8px;
  background: #f7f7f5;
  color: #5f5e58;
  font-family: "Anthropic Sans", system-ui, sans-serif;
  font-size: 13px;
  line-height: 22px;
}

.response-interrupted-message {
  min-width: 0;
}

.response-interrupted-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
}

.response-interrupted-actions button {
  min-height: 24px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #56554f;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.response-interrupted-actions button:hover {
  color: #20201e;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.response-interrupted-actions button:active {
  transform: scale(0.96);
}

.response-interrupted-actions button:focus-visible {
  outline: 2px solid #6d6c66;
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .response-interrupted-status {
    height: auto;
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}

.icon-swap {
  position: relative;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
}

.icon-swap > .anthropic-icon {
  grid-area: 1 / 1;
  transition: opacity 150ms ease, transform 150ms ease;
}

.icon-swap-default {
  opacity: 1;
  transform: scale(1);
}

.icon-swap-confirmed {
  opacity: 0;
  transform: scale(0.5);
}

.copy-state-button.confirmed .icon-swap-default {
  opacity: 0;
  transform: scale(0.5);
}

.copy-state-button.confirmed .icon-swap-confirmed {
  opacity: 1;
  transform: scale(1);
}

.code-copy-button .icon-swap {
  width: 20px;
  height: 20px;
}

.thinking-line,
.process-line,
.search-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  color: #777670;
  font-size: 14px;
}

.thinking-line,
.tool-activity {
  width: fit-content;
}

.response-elapsed {
  color: #8a8983;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.response-elapsed[hidden] {
  display: none;
}

.thinking-status-morph {
  position: relative;
  display: inline-grid;
  align-items: center;
  width: auto;
  min-width: 0;
  transition: width 200ms ease;
}

.thinking-status-measure {
  visibility: hidden;
  grid-area: 1 / 1;
  white-space: nowrap;
}

.thinking-status-outgoing,
.thinking-status-morph > .thinking-status,
.thinking-status-morph > .assistant-thought-label {
  grid-area: 1 / 1;
  white-space: nowrap;
}

.thinking-status-outgoing {
  pointer-events: none;
}

.timeline-block-enter {
  transform-origin: left center;
  animation: timeline-block-enter 300ms ease-out both;
}

.timeline-block-exit {
  pointer-events: none;
  display: grid;
  overflow: hidden;
  animation: timeline-block-exit 200ms cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.stream-grapheme {
  animation: stream-grapheme-reveal 400ms linear both;
  animation-delay: var(--stream-reveal-delay, 0ms);
}

@keyframes timeline-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes message-row-enter {
  0% {
    opacity: 0;
    transform: translateY(4px) scale(0.94);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes timeline-block-enter {
  0% {
    opacity: 0;
    filter: blur(4px);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    transform: translateY(5px) scale(0.9);
  }
  30% {
    opacity: 0;
    filter: blur(4px);
    animation-timing-function: ease-out;
    transform: none;
  }
  100% {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

@keyframes timeline-block-exit {
  0% {
    opacity: 1;
    grid-template-rows: 1fr;
  }
  100% {
    opacity: 0;
    grid-template-rows: 0fr;
  }
}

@keyframes stream-grapheme-reveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.mini-claude-mark {
  width: 20px;
  height: 20px;
  fill: #d97757;
}

.thinking-sprite {
  display: inline-block;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  overflow: hidden;
  color: #d97757;
  line-height: 0;
  user-select: none;
}

.assistant-progress.generating .thinking-sprite,
.assistant-thought.streaming .thinking-sprite {
  animation: thinking-sprite-breathe 2s ease-in-out 3s infinite;
}

.thinking-sprite-strip {
  display: block;
  width: 20px;
  height: 180px;
  will-change: transform;
}

.thinking-sprite-svg {
  display: block;
  width: 20px;
  height: 180px;
  fill: currentColor;
}

.claude-sprite-strip-writing,
.claude-sprite-svg-writing {
  height: 160px;
}

.assistant-progress.generating .thinking-status,
.assistant-thought.streaming .assistant-thought-label {
  display: inline-block;
  color: transparent;
  font-family: "Anthropic Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 430;
  line-height: 19.6px;
  background-image: linear-gradient(
    to right,
    #898781 30%,
    rgb(255 255 255 / 0.7) 50%,
    #898781 80%
  );
  background-position: 100% 0;
  background-size: 400% 100%;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  will-change: background-position;
  animation: thinking-status-shimmer 2.25s linear infinite;
}

@keyframes thinking-status-shimmer {
  0% {
    background-position: 100% 0;
    animation-timing-function: ease;
  }
  65%, 100% {
    background-position: 0 0;
    animation-timing-function: ease;
  }
}

@keyframes thinking-sprite-breathe {
  0%, 100% { color: #d97757; opacity: 0.78; }
  50% { color: #e59a82; opacity: 1; }
}

.assistant-progress {
  margin-top: 2px;
  margin-bottom: 42px;
}

.tool-branch {
  position: relative;
  margin: 12px 0 18px 10px;
  padding-left: 20px;
  border-left: 1px solid #d9d9d4;
}

.tool-activity-label {
  white-space: nowrap;
}

.web-icon {
  position: relative;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border: 1px solid #888780;
  border-radius: 50%;
}

.web-icon::before,
.web-icon::after {
  content: "";
  position: absolute;
  background: #888780;
}

.web-icon::before {
  top: 2px;
  bottom: 2px;
  left: 5px;
  width: 1px;
}

.web-icon::after {
  top: 5px;
  right: 1px;
  left: 1px;
  height: 1px;
}

.search-heading {
  justify-content: space-between;
  width: 100%;
  margin-bottom: 7px;
  padding: 2px 4px 2px 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.search-heading:hover,
.search-heading:focus-visible {
  outline: 0;
  color: #393936;
}

.search-heading-main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-count {
  font-size: 12px;
  white-space: nowrap;
}

.search-heading-meta {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

.search-caret {
  width: 14px;
  height: 14px;
  font-size: 14px;
  line-height: 14px;
  transition: transform 200ms ease;
}

.search-heading[aria-expanded="true"] .search-caret {
  transform: rotate(180deg);
}

.search-results {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 150px;
  margin: 4px 10px 8px;
  padding: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0.5px solid rgba(11, 11, 11, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
  animation: search-results-enter 300ms ease-out both;
}

.search-results[hidden] {
  display: none;
}

@keyframes search-results-enter {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.search-results::-webkit-scrollbar {
  width: 7px;
}

.search-results::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #aaa9a4;
  background-clip: padding-box;
}

.search-result {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 29px;
  padding: 4px 8px;
  border-radius: 6px;
  color: inherit;
  font-family: "Anthropic Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 21px;
  text-decoration: none;
}

.search-result[href]:hover {
  background: rgba(55, 55, 52, 0.045);
}

.search-result-empty {
  display: flex;
  color: #85847e;
}

.result-favicon-slot {
  display: flex;
  flex: 0 0 12px;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
}

.result-favicon {
  display: block;
  width: 12px;
  height: 12px;
  object-fit: contain;
  opacity: 0;
  filter: blur(2px);
  transition: opacity 500ms ease, filter 500ms ease;
}

.result-favicon.loaded {
  opacity: 1;
  filter: none;
}

.result-title {
  width: 0;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: #52514e;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-domain {
  flex: 0 0 auto;
  overflow: hidden;
  color: #777670;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-status {
  margin-top: 18px;
}

.notify-bar,
.chat-composer-shell {
  position: absolute;
  left: 50%;
  width: min(752px, calc(100% - 48px));
  transform: translateX(calc(-50% - 5px));
}

.notify-bar {
  z-index: 39;
  bottom: 134px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 46px;
  padding: 13px 14px 0;
  border: 1px solid #d9d9d4;
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background: rgba(255, 255, 255, 0.94);
  color: #555550;
  font-size: 14px;
}

.notify-bar[hidden] {
  display: none;
}

.notify-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.notify-button {
  height: 28px;
  padding: 0 11px;
  border: 0;
  border-radius: 8px;
  background: #111;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.notify-dismiss {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #888780;
  cursor: pointer;
}

.notify-dismiss .anthropic-icon {
  width: 14px;
  height: 14px;
  font-size: 14px;
  line-height: 14px;
}

.chat-composer-shell {
  z-index: 40;
  bottom: 0;
  background: var(--page-bg);
}

.scroll-bottom-button {
  position: absolute;
  z-index: 2;
  top: -48px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 4px;
  border: 1px solid rgba(31, 31, 30, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  color: #252523;
  box-shadow: 0 2px 4px rgba(11, 11, 11, 0.07), 0 6px 16px rgba(11, 11, 11, 0.08);
  backdrop-filter: blur(10px);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 200ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.scroll-bottom-button.visible {
  opacity: 1;
  pointer-events: auto;
}

.scroll-bottom-button.visible:hover {
  background: #fff;
  box-shadow: 0 3px 6px rgba(11, 11, 11, 0.09), 0 8px 20px rgba(11, 11, 11, 0.1);
}

.scroll-bottom-button[hidden] {
  display: none;
}

.chat-disclaimer {
  height: 32px;
  margin: 0;
  padding-top: 8px;
  color: #898781;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}

.chat-disclaimer a {
  color: inherit;
  text-decoration: none;
}

.chat-disclaimer a:hover {
  text-decoration: underline;
}

.chat-composer {
  position: relative;
  min-height: 103px;
  padding: 15px 14px 10px;
  border: 1px solid #d7d7d2;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(25, 25, 24, 0.035);
}

.chat-composer.has-attachments {
  min-height: 239px;
}

#chat-prompt {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 6px;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: #20201e;
  font-size: 16px;
  line-height: 23px;
}

#chat-prompt::placeholder {
  color: #777670;
  opacity: 1;
}

.chat-composer-actions,
.chat-right-actions {
  display: flex;
  align-items: center;
}

.chat-composer-actions {
  justify-content: space-between;
  height: 32px;
}

.chat-right-actions {
  gap: 4px;
}

.chat-model-button {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 7px 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 14px;
  cursor: pointer;
}

.chat-model-button:hover {
  background: #f1f1ee;
}

.chat-model-button .model-chevron {
  width: 12px;
  height: 12px;
  font-size: 12px;
  line-height: 12px;
}

.chat-send-button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #1f1f1e;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.chat-send-button:active {
  transform: scale(0.94);
}

.send-arrow {
  display: none;
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 20px;
}

.voice-waveform {
  width: 20px;
  height: 20px;
}

.chat-composer.has-input .chat-send-button {
  background: #c76545;
  color: #fff;
}

.chat-composer.has-input .voice-waveform {
  display: none;
}

.chat-composer.has-input .send-arrow {
  display: block;
}

.stop-square {
  display: none;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: currentColor;
}

.chat-view.generating .send-arrow,
.chat-view.generating .voice-waveform {
  display: none;
}

.chat-view.generating .stop-square {
  display: block;
  animation: stop-control-enter 180ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.chat-view.generating .chat-send-button {
  border: 1px solid #d8d8d3;
  background: #fff;
  color: #33332f;
}

@keyframes stop-control-enter {
  from {
    opacity: 0;
    transform: scale(0.55) rotate(12deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: 0 0 31px;
  color: #343431;
  font-family: var(--font-claude-serif);
  font-size: 40px;
  font-weight: 330;
  line-height: 60px;
  white-space: nowrap;
}

.claude-mark {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  fill: #d97757;
}

.composer {
  position: relative;
  height: 125px;
  border: 1px solid transparent;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.075), 0 0 0 0.5px rgba(31, 31, 30, 0.3);
  padding: 21px 13px 13px 21px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.composer.has-attachments {
  height: 257px;
}

.attachment-strip {
  display: flex;
  gap: 12px;
  width: 100%;
  min-height: 128px;
  margin: -4px 0 10px -4px;
  padding: 4px;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
}

.attachment-strip::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.attachment-strip[hidden] {
  display: none;
}

.attachment-thumbnail {
  position: relative;
  flex: 0 0 120px;
  width: 120px;
  height: 120px;
}

.attachment-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  width: 120px;
  height: 120px;
  min-width: 120px;
  padding: 8px 10px;
  overflow: hidden;
  border: 1px solid rgba(11, 11, 11, 0.2);
  border-radius: 8px;
  background: #fff;
  color: #131313;
  box-shadow: 0 1px 2px rgba(11, 11, 11, 0.05);
  font-family: var(--font-claude-sans);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.attachment-card:hover,
.attachment-card:focus-visible {
  border-color: rgba(11, 11, 11, 0.34);
  outline: 0;
  box-shadow: 0 2px 6px rgba(11, 11, 11, 0.1);
}

.attachment-card.image-attachment,
.attachment-card.pdf-attachment {
  position: relative;
  display: block;
  padding: 0;
  background: #fff;
}

.attachment-card.image-attachment img,
.attachment-card.pdf-attachment img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #f1f1ee;
  opacity: 0;
  transition: opacity 400ms ease, filter 400ms ease;
}

.attachment-card.image-attachment img.loaded,
.attachment-card.pdf-attachment img.loaded {
  opacity: 1;
}

.attachment-type {
  display: inline-flex;
  min-width: 0;
  height: 18px;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  overflow: hidden;
  border: 1px solid rgba(11, 11, 11, 0.2);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.7);
  color: #383835;
  box-shadow: 0 1px 2px rgba(11, 11, 11, 0.05);
  font-size: 11px;
  font-weight: 500;
  line-height: 13px;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-copy {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: 4px;
}

.attachment-copy strong,
.attachment-copy small {
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
}

.attachment-copy strong {
  color: #131313;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  -webkit-line-clamp: 4;
}

.attachment-copy small {
  color: #7b7974;
  font-size: 10px;
  line-height: 15px;
  -webkit-line-clamp: 1;
}

.pasted-text-card {
  gap: 4px;
}

.pasted-text-excerpt {
  display: -webkit-box;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  color: #242422;
  font-family: "Anthropic Sans", system-ui, sans-serif;
  font-size: 8px;
  line-height: 12px;
  overflow-wrap: anywhere;
  word-break: break-all;
  white-space: pre-wrap;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}

.pasted-text-badges {
  flex: 0 0 auto;
}

.attachment-badges {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.attachment-card.image-attachment .attachment-badges,
.attachment-card.pdf-attachment .attachment-badges {
  position: absolute;
  right: 0;
  bottom: 8px;
  left: 0;
  padding: 0 10px;
}

.attachment-card.image-attachment .attachment-badges {
  justify-content: flex-end;
}

.attachment-warning,
.attachment-error-badge {
  display: inline-flex;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(151, 112, 0, 0.45);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.72);
  color: #8a6500;
  font-size: 11px;
  font-weight: 700;
  line-height: 12px;
  backdrop-filter: blur(4px);
}

.attachment-inline-icon {
  display: flex;
  width: 12px;
  height: 12px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.attachment-remove .attachment-inline-icon {
  width: 16px;
  height: 16px;
}

.attachment-inline-icon svg {
  display: block;
  flex-shrink: 0;
}

.attachment-error-badge {
  border-color: rgba(185, 65, 51, 0.45);
  color: #b04437;
}

.attachment-card.uploading {
  position: relative;
  background: #f4f4f1;
  cursor: default;
}

.attachment-loading-copy {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 4px;
}

.attachment-loading-copy i,
.attachment-loading-tag {
  position: relative;
  display: block;
  height: 12px;
  overflow: hidden;
  border-radius: 4px;
  background: #d9d9d4;
}

.attachment-loading-copy i:nth-child(2) {
  width: 66%;
}

.attachment-loading-tag {
  width: 48px;
  height: 18px;
}

.attachment-loading-copy i::after,
.attachment-loading-tag::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-100%);
  animation: attachment-skeleton 1.35s ease-in-out infinite;
}

@keyframes attachment-skeleton {
  to { transform: translateX(100%); }
}

.attachment-card.error {
  background: rgba(185, 65, 51, 0.05);
}

.attachment-remove {
  position: absolute;
  z-index: 2;
  top: -8px;
  left: -8px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(11, 11, 11, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #7b7974;
  font-size: 16px;
  line-height: 20px;
  cursor: pointer;
  opacity: 0;
  backdrop-filter: blur(4px);
  transition: opacity 160ms ease, color 160ms ease, background-color 160ms ease;
}

.attachment-thumbnail:hover .attachment-remove,
.attachment-thumbnail:focus-within .attachment-remove {
  opacity: 1;
}

.attachment-remove:hover {
  background: rgba(255, 255, 255, 0.98);
  color: #383835;
}

.attachment-retry {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  min-width: 58px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(185, 65, 51, 0.45);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
  color: #b04437;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.user-attachments {
  gap: 12px;
}

.user-attachments .attachment-thumbnail,
.user-attachments .attachment-card {
  width: 120px;
  height: 120px;
}

@media (max-width: 768px) {
  .user-turn-content {
    width: 100%;
    max-width: 100%;
  }

  .user-attachments {
    width: min(252px, 100%);
  }

  .user-turn-content .user-bubble {
    max-width: 100%;
  }
}

.composer.drag-active,
.chat-composer.drag-active {
  box-shadow: 0 0 0 2px #9b9992, var(--shadow);
}

.attachment-menu {
  position: absolute;
  z-index: 55;
  bottom: 48px;
  left: 8px;
  width: 245.391px;
  padding: 4px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(11, 11, 11, 0.1), 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
}

.home-attachment-menu {
  top: 115px;
  bottom: auto;
  left: 18px;
}

.chat-attachment-menu {
  bottom: 50px;
  left: 17px;
}

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

.attachment-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 32px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #0b0b0b;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
}

.attachment-menu button:hover,
.attachment-menu button:focus-visible {
  background: #f1f1ee;
  outline: 0;
}

.attachment-menu button small {
  flex: 0 0 auto;
  margin-left: 4px;
  color: #898781;
  font-size: 13px;
  line-height: 16px;
}

.attachment-menu-icon {
  display: grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}

.attachment-menu-icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

.attachment-menu-label {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-menu .attachment-menu-arrow {
  width: 16px;
  height: 16px;
  margin-right: -4px;
  color: #777670;
  font-size: 16px;
  font-weight: 533;
  line-height: 16px;
}

.attachment-menu .attachment-menu-check {
  width: 20px;
  height: 20px;
  margin-right: -4px;
  color: #2a78d6;
  font-size: 20px;
  font-weight: 567;
  line-height: 20px;
}

.attachment-menu [role="menuitemcheckbox"][aria-checked="false"] .attachment-menu-check {
  visibility: hidden;
}

.attachment-menu-separator {
  height: 1px;
  margin: 4px 10px;
  background: rgba(11, 11, 11, 0.1);
}

.attachment-submenu {
  position: absolute;
  z-index: 2;
  left: calc(100% + 2px);
  width: max-content;
  min-width: 145px;
  max-width: 260px;
  padding: 4px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(11, 11, 11, 0.1), 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
}

.attachment-submenu::before {
  content: "";
  position: absolute;
  top: 0;
  right: 100%;
  width: 4px;
  height: 100%;
}

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

.attachment-submenu .attachment-submenu-item {
  padding-inline: 10px;
  white-space: nowrap;
}

.attachment-submenu[data-kind="project"] {
  width: 181px;
}

.attachment-submenu[data-kind="skills"] {
  width: 224px;
  max-height: min(520px, calc(100vh - 32px));
  overflow-y: auto;
}

.attachment-submenu[data-kind="connector"] {
  width: 207px;
}

.attachment-submenu-icon {
  display: grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 20px;
}

.attachment-submenu-icon:not(.anthropic-icon) {
  font-family: "Anthropic Sans", system-ui, sans-serif;
  font-size: 20px;
}

.attachment-submenu-label {
  min-width: 0;
  flex: 1 1 auto;
}

.attachment-submenu .attachment-menu-separator {
  margin-block: 4px;
}

.composer:focus-within {
  border-color: transparent;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.075), 0 0 0 0.5px rgba(31, 31, 30, 0.3);
}

#prompt {
  display: block;
  width: 100%;
  height: 48px;
  max-height: 52px;
  padding: 0;
  resize: none;
  overflow-y: auto;
  border: 0;
  outline: 0;
  background: transparent;
  color: #20201e;
  font-size: 16px;
  line-height: 22px;
}

#prompt::placeholder {
  color: #74736e;
  opacity: 1;
}

.composer-actions,
.left-actions,
.right-actions {
  display: flex;
  align-items: center;
}

.composer-actions {
  height: 32px;
  justify-content: space-between;
  margin-right: 1px;
  margin-left: -5px;
  transform: translateY(8px);
}

.right-actions {
  gap: 5px;
}

.icon-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
}

.icon-button:hover,
.model-button:hover {
  background: #f2f2ef;
}

.icon-button svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.6;
}

.icon-button > .anthropic-icon {
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 20px;
}

.add-button svg,
.add-button > .anthropic-icon {
  width: 20px;
  height: 20px;
}

.model-button {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 32px;
  padding: 0 0 0 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 14px;
  cursor: pointer;
}

.model-button:focus,
.chat-model-button:focus {
  outline: none;
}

.model-button[aria-expanded="true"],
.chat-model-button[aria-expanded="true"] {
  background: #f1f1ee;
}

.model-level {
  color: #777671;
}

.model-button .model-chevron {
  display: none;
}

.settings-button {
  display: grid;
}

.settings-button:focus {
  outline: none;
}

.settings-button[aria-expanded="true"] {
  background: #f1f1ee;
}

.mic-button {
  display: grid;
}

.voice-bars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 22px;
  height: 20px;
}

.voice-bars b {
  width: 1px;
  height: 11px;
  background: #2f2f2c;
}

.voice-bars b:nth-child(2),
.voice-bars b:nth-child(4) {
  height: 16px;
}

.voice-bars b:nth-child(3) {
  height: 20px;
}

.prompt-categories {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}

.composer.has-input ~ .prompt-categories {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
}

.prompt-categories button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(11, 11, 11, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  cursor: pointer;
}

.prompt-categories li:nth-child(1) button {
  width: 78.4375px;
}

.prompt-categories li:nth-child(2) button {
  width: 79.5625px;
}

.prompt-categories li:nth-child(3) button {
  width: 77.609375px;
}

.prompt-categories li:nth-child(4) button {
  width: 102.265625px;
}

.prompt-categories li:nth-child(5) button {
  width: 144.578125px;
}

.prompt-categories button {
  padding-inline: 0;
}

.prompt-categories button:hover {
  background: #efefec;
}

.prompt-categories svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  color: #7b7974;
  margin-left: -5px;
}

.voice-button svg {
  width: 20px;
  height: 20px;
}

.home-send-icon {
  display: none;
}

.composer.has-input .voice-button {
  background: #c76545;
  color: #fff;
}

.composer.has-input .voice-button:hover {
  background: #b95d40;
}

.composer.has-input .voice-button .voice-waveform {
  display: none;
}

.composer.has-input .voice-button .home-send-icon {
  display: block;
}

.menu {
  position: absolute;
  z-index: 30;
  right: 95px;
  top: calc(clamp(140px, 20vh, 180px) + 206px);
  width: 225px;
  padding: 4px;
  border: 1px solid rgba(31, 31, 30, 0.12);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
}

.menu[hidden] {
  display: none;
}

.model-option {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 32px;
  padding: 6px 10px 7px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #252523;
  text-align: left;
  cursor: pointer;
}

.model-option[role="menuitemradio"] {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.model-option[role="menuitemradio"] > span:first-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.model-option-check,
.submenu-model-check {
  visibility: hidden;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: #1677e8;
  font-size: 16px;
  line-height: 16px;
}

.model-option[aria-checked="true"] .model-option-check,
.submenu-model-row[aria-checked="true"] .submenu-model-check {
  visibility: visible;
}

.model-option:hover,
.menu-row:hover,
.settings-menu button:hover {
  background: #f2f2ef;
}

.model-option strong {
  font-size: 14px;
  font-weight: 500;
  line-height: 19px;
}

.model-multiplier {
  font-weight: inherit;
}

.model-option small {
  color: var(--muted);
  font-size: 12px;
  line-height: 16px;
}

.model-option-line,
.menu-row,
.menu-row > span:last-child {
  display: flex;
  align-items: center;
}

.model-option-line {
  width: 100%;
  gap: 5px;
}

.plan-badge {
  padding: 0 4px;
  border-radius: 4px;
  background: #e4eef9;
  color: #2863a0;
  font-size: 11px;
  line-height: 16px;
}

.upgrade-pill {
  margin-left: auto;
  padding: 0 7px;
  border: 1px solid #b8cbe6;
  border-radius: 999px;
  color: #2863a0;
  font-size: 12px;
  line-height: 20px;
}

.menu-separator {
  height: 1px;
  margin: 4px 10px;
  background: #e1e1dc;
}

.menu-row {
  justify-content: space-between;
  width: 100%;
  height: 32px;
  padding: 6px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #252523;
  font-size: 14px;
  cursor: pointer;
}

.menu-row > span:last-child {
  gap: 4px;
  color: #777670;
}

.menu-row .anthropic-icon {
  width: 14px;
  height: 14px;
  font-size: 14px;
  line-height: 14px;
}

.settings-menu {
  right: 48px;
  width: 236px;
}

.settings-menu-title {
  padding: 7px 9px 5px;
  color: #777670;
  font-size: 12px;
  font-weight: 600;
}

.settings-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  padding: 6px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.settings-menu button > span:first-child {
  display: flex;
  flex-direction: column;
}

.settings-menu strong {
  font-size: 14px;
  font-weight: 500;
}

.settings-menu small {
  color: #777670;
  font-size: 12px;
}

.setting-check {
  visibility: hidden;
  width: 12px;
  height: 12px;
  color: #4e6e94;
}

.setting-check::before {
  content: "";
  display: block;
  width: 8px;
  height: 4px;
  border-bottom: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
  transform: rotate(-45deg) translateY(-1px);
}

.settings-menu [aria-checked="true"] .setting-check {
  visibility: visible;
}

.chat-model-menu {
  top: auto;
  right: 95px;
  bottom: 51px;
  width: 138px;
  padding: 4px;
  overflow: visible;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(31, 31, 30, 0.1), 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
}

.chat-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 32px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #0b0b0b;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
}

.chat-menu-item:hover,
.chat-menu-item:focus-visible,
.chat-menu-item[aria-expanded="true"] {
  background: rgba(11, 11, 11, 0.05);
}

.chat-menu-item > .anthropic-icon,
.chat-menu-value > .anthropic-icon {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  font-size: 14px;
  line-height: 14px;
}

.chat-menu-check {
  color: #1677e8;
}

.chat-menu-value {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #7b7974;
}

.chat-menu-separator,
.effort-separator {
  height: 1px;
  border: 0;
  background: rgba(11, 11, 11, 0.1);
}

.chat-menu-separator {
  margin: 4px 10px;
}

.chat-submenu {
  position: absolute;
  z-index: 2;
  right: calc(100% + 2px);
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(31, 31, 30, 0.1), 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
}

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

.chat-effort-menu {
  bottom: 44px;
  width: 320px;
  padding: 4px;
}

.home-effort-menu {
  right: calc(100% + 2px);
  bottom: 44px;
  width: 320px;
  padding: 4px;
}

.effort-explanation {
  height: 40px;
  margin: 0;
  padding: 4px 10px 2px;
  color: #7b7974;
  font-size: 13px;
  line-height: 17px;
}

.effort-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 32px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #171715;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
}

.effort-option:hover,
.effort-option:focus-visible {
  background: rgba(11, 11, 11, 0.05);
  color: #0b0b0b;
}

.default-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 0 4px;
  border-radius: 4px;
  background: #efefec;
  color: #66645f;
  font-size: 10px;
  font-weight: 500;
  line-height: 16px;
  vertical-align: 1px;
}

.effort-cost {
  color: #7b7974;
  font-size: 12px;
  font-weight: 400;
}

.effort-info {
  display: inline-grid;
  place-items: center;
  width: 10px;
  height: 10px;
  margin-left: 4px;
  border: 1px solid #8b8984;
  border-radius: 50%;
  color: #77756f;
  font: 7px/1 "Anthropic Sans", system-ui, sans-serif;
  vertical-align: 2px;
}

.effort-check {
  visibility: hidden;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: #1677e8;
  font-size: 16px;
  line-height: 16px;
}

.effort-option[aria-checked="true"] .effort-check,
.submenu-model-option[aria-checked="true"] .effort-check {
  visibility: visible;
}

.effort-separator {
  margin: 4px 10px;
}

.thinking-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 6px 10px;
  border-radius: 8px;
}

.thinking-setting > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.thinking-setting strong {
  color: #171715;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
}

.thinking-setting small {
  color: #898782;
  font-size: 13px;
  line-height: 18px;
}

.thinking-toggle {
  position: relative;
  flex: 0 0 36px;
  width: 36px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #a9a8a3;
  cursor: pointer;
  transition: background 140ms ease;
}

.thinking-toggle span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: transform 140ms ease;
}

.thinking-toggle[aria-checked="true"] {
  background: #347fd8;
}

.thinking-toggle[aria-checked="true"] span {
  transform: translateX(16px);
}

.chat-more-models-menu {
  right: calc(100% + 2px);
  bottom: 4px;
  width: 165px;
  padding: 4px;
}

.home-more-models-menu {
  right: calc(100% + 2px);
  bottom: 4px;
  width: 165px;
  padding: 4px;
}

@media (min-width: 769px) {
  .home-effort-menu::after,
  .home-more-models-menu::after {
    content: "";
    position: absolute;
    top: 0;
    right: -8px;
    width: 8px;
    height: 100%;
  }
}

@media (min-width: 769px) {
.chat-more-models-menu::after {
    content: "";
    position: absolute;
    top: 0;
    right: -8px;
    width: 8px;
    height: 100%;
  }
}

.submenu-model-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 32px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #0b0b0b;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
}

.model-option[hidden],
.submenu-model-choice[hidden] {
  display: none;
}

.submenu-model-row.locked {
  height: 32.8px;
}

.submenu-model-row:hover,
.submenu-model-row:focus-visible {
  background: rgba(11, 11, 11, 0.05);
}

.submenu-model-meta {
  display: flex;
  align-items: center;
  gap: 5px;
}

.model-info-icon {
  width: 12px;
  height: 12px;
  margin: 0 -1px;
  color: #184f95;
  font-size: 12px;
  line-height: 12px;
}

.model-pro-badge {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 4px;
  border-radius: 4px;
  background: #cde2fb;
  color: #184f95;
  font-size: 10px;
  font-weight: 500;
  line-height: 12.5px;
}

.model-upgrade-button {
  display: block;
  height: 21px;
  padding: 1px 6px;
  border: 1px solid rgba(31, 31, 30, 0.15);
  border-radius: 24px;
  background: transparent;
  color: #184e95;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
  cursor: pointer;
}

.model-upgrade-button:hover {
  border-color: rgba(31, 31, 30, 0.25);
}

.more-models-separator {
  height: 1px;
  margin: 4px 10px;
  background: rgba(11, 11, 11, 0.1);
}

.incognito {
  position: fixed;
  z-index: 36;
  top: 10px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 6px;
}

.incognito svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  stroke: none;
}

.incognito:hover .incognito-eyes {
  animation: look-around 2.4s ease-in-out infinite;
}

.incognito[aria-pressed="true"] {
  background: #ecece8;
  color: #30302d;
}

.incognito-note {
  color: #777670;
  font: 12px/16px "Anthropic Sans", system-ui, sans-serif;
  text-align: center;
}

.incognito-note[hidden] {
  display: none;
}

.incognito-note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.home-incognito-note {
  width: min(590px, calc(100vw - 40px));
  margin: 12px auto 0;
}

.chat-incognito-note {
  min-height: 32px;
  margin: 0;
  padding-top: 8px;
}

.voice-cancel-label {
  display: none;
  color: #555550;
  font: 500 14px/20px "Anthropic Sans", system-ui, sans-serif;
}

.voice-mode-active .voice-cancel-label {
  display: inline;
}

.voice-button.voice-mode-active,
.chat-send-button.voice-mode-active {
  width: auto;
  min-width: 56px;
  padding: 0 10px;
  border-radius: 8px;
  background: #efefec;
}

.voice-button.voice-mode-active .voice-waveform,
.voice-button.voice-mode-active .home-send-icon,
.chat-send-button.voice-mode-active .voice-waveform,
.chat-send-button.voice-mode-active .send-arrow,
.chat-send-button.voice-mode-active .stop-square {
  display: none;
}

.mic-button.recording,
.chat-mic-button.recording {
  color: #b95d40;
  animation: microphone-breathe 1.4s ease-in-out infinite;
}

@keyframes microphone-breathe {
  0%, 100% { background: transparent; box-shadow: 0 0 0 0 rgba(217, 119, 87, 0); }
  50% { background: rgba(217, 119, 87, 0.11); box-shadow: 0 0 0 4px rgba(217, 119, 87, 0.08); }
}

@keyframes look-around {
  0%, 16.6%, 100% { transform: translateX(-1.5px); }
  25%, 41.6% { transform: translateX(1.5px); }
  50%, 66.6% { transform: translateY(-1.5px); }
  75%, 91.6% { transform: translate(0); }
}

.utility-capsule {
  position: fixed;
  z-index: 50;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 52px;
  height: 230px;
  padding-top: 10px;
  border-radius: 25px 0 0 25px;
  background: #393939;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
}

.utility-capsule button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  color: #cacac7;
  border-radius: 8px;
}

.utility-capsule button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.utility-capsule svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.workspace-mode .composer-area,
body.workspace-mode .chat-view,
body.workspace-mode .incognito {
  display: none;
}

.workspace-view[hidden] {
  display: none;
}

.workspace-view {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 32px 76px 72px;
}

.workspace-header,
.workspace-content {
  width: min(844px, 100%);
  margin: 0 auto;
}

.workspace-header {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding-bottom: 8px;
}

.workspace-kicker {
  display: none;
  margin-bottom: 5px;
  color: #777670;
  font-size: 13px;
  font-weight: 500;
}

h1.workspace-title {
  display: block;
  margin: 0;
  color: #282826;
  font-family: var(--font-claude-sans);
  font-size: 26px;
  font-weight: 500;
  line-height: 34px;
  white-space: normal;
}

.workspace-primary,
.dialog-primary,
.view-action {
  min-height: 34px;
  padding: 0 13px;
  border: 0;
  border-radius: 8px;
  background: #262624;
  color: #fff;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.workspace-primary {
  flex: 0 0 auto;
  margin-left: 8px;
}

.workspace-primary:hover,
.dialog-primary:hover,
.view-action:hover {
  background: #111;
}

.workspace-content {
  padding-top: 16px;
}

.workspace-directory-toolbar {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.workspace-directory-search-shell {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.workspace-search-toggle,
.workspace-select-toggle,
.workspace-delete-selected,
.workspace-empty-action {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid #deded9;
  border-radius: 8px;
  background: #fff;
  color: #30302d;
  font: 14px/20px var(--font-claude-sans);
  cursor: pointer;
}

.workspace-search-toggle {
  display: grid;
  width: 34px;
  padding: 0;
  place-items: center;
}

.workspace-search-toggle .anthropic-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 18px;
}

.workspace-search-toggle:hover,
.workspace-select-toggle:hover,
.workspace-delete-selected:hover:not(:disabled),
.workspace-empty-action:hover {
  background: #f3f3f0;
}

.workspace-directory-search,
.workspace-directory-select {
  height: 34px;
  border: 1px solid #deded9;
  border-radius: 8px;
  background: #fff;
  color: #30302d;
  font: 14px/20px var(--font-claude-sans);
  outline: 0;
}

.workspace-directory-search {
  width: min(220px, 24vw);
  padding: 0 10px;
}

.workspace-directory-select {
  max-width: 176px;
  padding: 0 28px 0 10px;
}

.workspace-directory-search:focus,
.workspace-directory-select:focus,
.workspace-search-toggle:focus-visible,
.workspace-select-toggle:focus-visible,
.workspace-delete-selected:focus-visible,
.workspace-empty-action:focus-visible {
  border-color: #85847e;
  outline: 2px solid rgba(74, 73, 69, 0.2);
  outline-offset: 1px;
}

.workspace-selection-summary {
  min-width: 68px;
  color: #65645f;
  font-size: 13px;
  text-align: right;
}

.workspace-delete-selected {
  color: #a33e32;
}

.workspace-delete-selected:disabled {
  opacity: 0.45;
  cursor: default;
}

.workspace-empty-action {
  display: block;
  margin: 14px auto 0;
}

.empty-state > div > span:not(.anthropic-icon) {
  display: block;
  max-width: 420px;
  line-height: 20px;
}

.workspace-chat-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  color: #30302d;
  font-size: 14px;
}

.workspace-chat-table th,
.workspace-chat-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e5e5e0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-chat-table th {
  color: #777670;
  font-size: 12px;
  font-weight: 500;
}

.workspace-chat-table th:first-child,
.workspace-chat-table td:first-child {
  width: 42px;
  padding-left: 4px;
}

.workspace-chat-table th:nth-child(2) {
  width: 48%;
}

.workspace-chat-table th:last-child,
.workspace-chat-table td:last-child {
  width: 110px;
  text-align: right;
}

.workspace-chat-row:hover {
  background: rgba(235, 235, 231, 0.55);
}

.workspace-chat-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.workspace-chat-open strong,
.workspace-chat-open small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-chat-open strong {
  font-weight: 500;
}

.workspace-chat-open small {
  margin-top: 3px;
  color: #777670;
  font-size: 12px;
}

.view-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}

.view-search,
.view-input,
.view-textarea,
.dialog-input,
.dialog-textarea {
  width: 100%;
  border: 1px solid #d6d6d1;
  border-radius: 8px;
  background: #fff;
  color: #252523;
  font: inherit;
  font-size: 14px;
  outline: 0;
}

.view-search,
.view-input,
.dialog-input {
  height: 38px;
  padding: 0 11px;
}

.view-textarea,
.dialog-textarea {
  min-height: 94px;
  padding: 10px 11px;
  resize: vertical;
  line-height: 21px;
}

.view-search:focus,
.view-input:focus,
.view-textarea:focus,
.dialog-input:focus,
.dialog-textarea:focus {
  border-color: #a9a9a3;
  box-shadow: 0 0 0 2px rgba(80, 80, 75, 0.08);
}

.workspace-list {
  border-top: 1px solid #deded9;
}

.workspace-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 64px;
  padding: 10px 4px;
  border: 0;
  border-bottom: 1px solid #e4e4df;
  background: transparent;
  color: #282826;
  text-align: left;
  cursor: pointer;
}

.workspace-list-row:hover {
  background: rgba(235, 235, 231, 0.65);
}

.workspace-list-row strong,
.project-card strong,
.artifact-card strong {
  display: block;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-list-row small,
.project-card small,
.artifact-card small,
.view-muted {
  color: #777670;
  font-size: 12px;
}

.empty-state {
  display: grid;
  place-items: center;
  min-height: 330px;
  color: #777670;
  text-align: center;
}

.empty-state .anthropic-icon {
  width: 28px;
  height: 28px;
  margin-bottom: 10px;
  color: #8b8a85;
  font-size: 28px;
  line-height: 28px;
}

.empty-state strong {
  display: block;
  margin-bottom: 4px;
  color: #3a3a37;
  font-size: 15px;
  font-weight: 500;
}

.project-grid,
.artifact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.project-card,
.artifact-card {
  min-height: 112px;
  padding: 15px;
  border: 1px solid #dcdcd7;
  border-radius: 8px;
  background: #fff;
  text-align: left;
}

button.project-card,
button.artifact-card {
  cursor: pointer;
}

button.project-card:hover,
button.artifact-card:hover {
  border-color: #bdbdb7;
}

.project-card p,
.artifact-card p {
  display: -webkit-box;
  overflow: hidden;
  margin: 9px 0 0;
  color: #5f5e59;
  font-size: 13px;
  line-height: 19px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.segment-control {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 8px;
  background: #ecece8;
}

.segment-control button {
  height: 30px;
  padding: 0 11px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #65645f;
  font-size: 13px;
  cursor: pointer;
}

.segment-control button.active {
  background: #fff;
  color: #252523;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.code-shell {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  min-height: 430px;
  overflow: hidden;
  border: 1px solid #d9d9d4;
  border-radius: 8px;
  background: #fff;
}

.code-files {
  padding: 13px 10px;
  border-right: 1px solid #deded9;
  background: #f2f2ef;
}

.code-file {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #444440;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.code-file.active,
.code-file:hover {
  background: #e5e5e0;
}

.code-editor {
  display: grid;
  grid-template-rows: 36px minmax(0, 1fr) 110px;
  min-width: 0;
}

.code-editor-header,
.code-terminal-header {
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid #e1e1dc;
  color: #65645f;
  font-size: 12px;
}

.code-source,
.code-terminal {
  margin: 0;
  overflow: auto;
  background: #fbfbfa;
  color: #30302d;
  font-family: Consolas, "SFMono-Regular", monospace;
  font-size: 12px;
  line-height: 20px;
  white-space: pre;
}

.code-source {
  padding: 14px 16px;
}

.code-terminal {
  padding: 9px 12px;
  border-top: 1px solid #deded9;
  background: #252523;
  color: #d9d9d4;
}

.settings-list {
  border-top: 1px solid #deded9;
}

.settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  min-height: 68px;
  border-bottom: 1px solid #e3e3de;
}

.settings-row strong {
  display: block;
  margin-bottom: 3px;
  font-size: 14px;
  font-weight: 500;
}

.settings-row small {
  color: #777670;
  font-size: 12px;
}

.switch-control {
  position: relative;
  width: 38px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: #c8c8c2;
  cursor: pointer;
  transition: background 140ms ease;
}

.switch-control::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: transform 140ms ease;
}

.switch-control[aria-checked="true"] {
  background: #4e6e5a;
}

.switch-control[aria-checked="true"]::after {
  transform: translateX(16px);
}

.design-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 26px;
}

.design-form .view-textarea {
  min-height: 76px;
}

.design-preview {
  min-height: 330px;
  overflow: hidden;
  border: 1px solid #d8d8d3;
  border-radius: 8px;
  background: #fff;
}

.design-preview-empty {
  display: grid;
  place-items: center;
  min-height: 330px;
  color: #777670;
  font-size: 14px;
}

.generated-design {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  min-height: 330px;
}

.generated-design-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px;
}

.generated-design-copy h2 {
  margin: 0 0 10px;
  font-family: var(--font-claude-serif);
  font-size: 30px;
  font-weight: 400;
}

.generated-design-copy p {
  margin: 0;
  color: #65645f;
  line-height: 23px;
}

.generated-design-visual {
  display: grid;
  place-items: center;
  padding: 28px;
  background: #e7ece8;
}

.palette-swatch {
  width: min(210px, 100%);
  aspect-ratio: 1;
  border-radius: 8px;
  background: linear-gradient(135deg, #2f5143 0 35%, #d7ddd7 35% 66%, #d97757 66%);
  box-shadow: 0 18px 50px rgba(31, 31, 30, 0.16);
}

.downloads-page {
  position: fixed;
  z-index: 89;
  inset: 0;
  overflow-y: auto;
  background: #fff;
  color: #171715;
}

.downloads-page[hidden] {
  display: none;
}

body.downloads-open {
  overflow: hidden;
}

.downloads-close {
  position: fixed;
  z-index: 2;
  top: 18px;
  right: 22px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #4f4e49;
  cursor: pointer;
}

.downloads-close:hover,
.downloads-close:focus-visible {
  outline: 0;
  background: #f0f0ec;
}

.downloads-content {
  position: relative;
  left: 7.5px;
  width: min(826px, calc(100% - 40px));
  margin: 0 auto;
  padding: 90px 0 110px;
}

.downloads-content > h1 {
  position: relative;
  left: -5px;
  max-width: 593px;
  margin: 0 auto 72px;
  font-family: var(--font-claude-serif);
  font-size: 31px;
  font-weight: 400;
  line-height: 38px;
  text-align: center;
}

.downloads-section {
  min-width: 0;
}

.downloads-desktop {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 42px;
  align-items: start;
  margin-bottom: 126px;
}

.downloads-desktop .downloads-copy {
  padding-top: 12px;
}

.downloads-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 58px 89px;
}

.downloads-copy h2 {
  margin: 0 0 8px;
  font-family: "Anthropic Sans", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

.downloads-copy p {
  margin: 0;
  color: #676660;
  font-size: 14px;
  line-height: 20px;
}

.downloads-action {
  height: 34px;
  margin-top: 18px;
  padding: 0 13px;
  border: 1px solid #1d1d1b;
  border-radius: 8px;
  background: #1d1d1b;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.downloads-action.secondary {
  border-color: #d0d0cb;
  background: #fff;
  color: #30302d;
}

.downloads-demo {
  position: relative;
  overflow: hidden;
  height: 220px;
  margin-top: 22px;
  border: 1px solid #d9d9d3;
  border-radius: 8px;
  background: #f6f6f3;
}

.downloads-desktop .downloads-demo {
  height: 260px;
  margin-top: 0;
}

.desktop-demo {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  background: #f2f3f0;
}

.demo-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 14px;
  border-right: 1px solid #deded8;
  background: #e7e9e5;
}

.demo-sidebar span {
  height: 8px;
  border-radius: 4px;
  background: #b9bcb5;
}

.demo-chat {
  padding: 25px 24px;
}

.demo-chat b {
  font-family: var(--font-claude-serif);
  font-size: 22px;
  font-weight: 400;
}

.demo-chat p {
  margin: 22px 0;
  color: #75746e;
  font-size: 13px;
}

.demo-prompt {
  margin-top: 72px;
  padding: 13px;
  border: 1px solid #d4d4ce;
  border-radius: 8px;
  background: #fff;
  color: #4c4b46;
  font-size: 12px;
}

.sheet-demo {
  background: #eef3ec;
}

.sheet-toolbar {
  height: 36px;
  border-bottom: 1px solid #bac7b8;
  background: #dce8da;
}

.sheet-grid {
  position: absolute;
  inset: 36px 0 0;
  background-image: linear-gradient(#d8ddd5 1px, transparent 1px), linear-gradient(90deg, #d8ddd5 1px, transparent 1px);
  background-size: 34px 27px;
}

.sheet-assistant {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 8px 12px;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(31, 31, 30, 0.12);
  font-family: var(--font-claude-serif);
}

.design-demo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 18px;
  background: #f3efe9;
}

.design-demo div {
  border-radius: 6px;
  background: #d7674e;
}

.design-demo div:nth-child(2) {
  background: #315a50;
}

.design-demo div:nth-child(3) {
  grid-column: 1 / -1;
  background: #e5bd58;
}

.code-demo {
  display: grid;
  place-items: center;
  background: #20211f;
  color: #d9ead0;
}

.code-demo code {
  font: 14px/24px var(--font-claude-mono);
}

.mobile-demo {
  display: grid;
  place-items: center;
  background: #e8eef4;
}

.phone {
  width: 126px;
  height: 190px;
  padding: 18px 12px;
  border: 5px solid #272725;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 16px 30px rgba(31, 31, 30, 0.16);
}

.phone span {
  font-family: var(--font-claude-serif);
  font-size: 17px;
}

.phone p {
  margin-top: 55px;
  color: #777670;
  font-size: 11px;
}

.overlay-layer {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: start center;
  padding: 82px 18px 24px;
  background: rgba(31, 31, 30, 0.26);
  backdrop-filter: blur(2px);
}

.overlay-layer[hidden] {
  display: none;
}

.search-layer {
  padding-top: 25vh;
  background: rgba(31, 31, 30, 0.12);
  backdrop-filter: none;
}

.modal-layer {
  place-items: center;
  padding: 18px;
}

.search-dialog,
.app-dialog {
  width: min(620px, 100%);
  max-height: calc(100vh - 112px);
  overflow: hidden;
  border: 1px solid #d3d3ce;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(25, 25, 24, 0.2);
}

.search-dialog {
  display: flex;
  flex-direction: column;
  width: min(672px, 100%);
  height: min(506px, calc(100vh - 64px));
}

.app-dialog {
  width: min(520px, 100%);
}

.app-dialog.directory-dialog {
  width: min(860px, 100%);
  height: min(620px, calc(100vh - 112px));
}

.app-dialog.settings-dialog {
  position: relative;
  width: min(960px, calc(100vw - 32px));
  height: calc(100vh - 120px);
  max-height: none;
  transform: none;
  border-radius: 10px;
}

.app-dialog.attachment-preview-dialog {
  display: flex;
  width: min(920px, calc(100vw - 32px));
  height: min(760px, calc(100vh - 40px));
  max-height: none;
  flex-direction: column;
  border-color: rgba(11, 11, 11, 0.18);
  border-radius: 12px;
  background: #f7f7f5;
}

.app-dialog.attachment-preview-dialog:has(.is-text-preview) {
  width: min(768px, calc(100vw - 32px));
  height: min(384px, calc(100vh - 40px));
  padding: 24px;
  border-color: rgba(30, 30, 29, 0.15);
  border-radius: 16px;
  background: #f9f9f7;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.app-dialog.attachment-preview-dialog:has(.is-pasted-text-preview) {
  height: auto;
  max-height: calc(100vh - 32px);
  background: #fcfcfb;
}

.attachment-preview-dialog:has(.is-text-preview) .dialog-header {
  width: 100%;
  height: 32px;
  min-height: 32px;
  padding: 0;
  align-items: center;
  border: 0;
  background: transparent;
}

.attachment-preview-dialog:has(.is-text-preview) .dialog-header h2 {
  font-family: "Anthropic Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
}

.attachment-preview-dialog:has(.is-text-preview) .dialog-close {
  width: 32px;
  height: 32px;
  margin: 0 -8px 0 0;
  border-radius: 6px;
  color: #7b7974;
}

.attachment-preview-dialog:has(.is-text-preview) .dialog-close:focus-visible {
  outline-color: #256abf;
}

.attachment-preview-dialog:has(.is-text-preview) .app-dialog-content {
  padding: 0;
  overflow: hidden;
}

.is-text-preview {
  display: block;
}

.is-text-preview .attachment-preview-meta {
  height: 16px;
  margin: 2px 0 20px;
  transform: none;
  color: #7b7974;
  font-size: 12px;
  line-height: 16px;
}

.is-text-preview .attachment-preview-stage {
  display: block;
  padding: 0;
  overflow: visible;
}

.is-text-preview .attachment-preview-stage pre {
  width: 100%;
  min-height: 98px;
  max-height: 150px;
  padding: 16px;
  overflow: auto;
  border-color: rgba(30, 30, 29, 0.15);
  font-family: "Anthropic Mono", ui-monospace, monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 16px;
  box-shadow: 0 1px 2px rgba(11, 11, 11, 0.06), 0 2px 8px rgba(11, 11, 11, 0.08);
}

.is-pasted-text-preview .attachment-preview-stage {
  max-height: 70vh;
  overflow: auto;
}

.is-pasted-text-preview .attachment-preview-stage pre {
  min-height: 98px;
  max-height: none;
}

.attachment-preview-dialog .dialog-header {
  flex: 0 0 auto;
  border-bottom: 1px solid rgba(11, 11, 11, 0.1);
  background: rgba(255, 255, 255, 0.88);
}

.attachment-preview-dialog .app-dialog-content {
  min-height: 0;
  flex: 1 1 auto;
  padding: 0;
}

.attachment-preview-shell {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
}

.attachment-preview-stage {
  display: grid;
  min-height: 0;
  flex: 1 1 auto;
  place-items: center;
  overflow: auto;
  padding: 28px;
}

.attachment-preview-stage img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border: 1px solid rgba(11, 11, 11, 0.12);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 30px rgba(11, 11, 11, 0.1);
  object-fit: contain;
}

.attachment-preview-stage pre {
  width: min(760px, 100%);
  min-height: 100%;
  margin: 0;
  padding: 24px 28px;
  border: 1px solid rgba(11, 11, 11, 0.12);
  border-radius: 8px;
  background: #fff;
  color: #242422;
  font-family: var(--font-claude-mono);
  font-size: 13px;
  line-height: 20px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.attachment-preview-meta {
  margin: 0;
}

.attachment-preview-unavailable-message {
  display: grid;
  max-width: 440px;
  justify-items: center;
  gap: 16px;
  color: #5f5e59;
  text-align: center;
}

.attachment-preview-unavailable-message p {
  margin: 0;
  line-height: 22px;
}

.attachment-preview-footer {
  display: flex;
  min-height: 48px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-top: 1px solid rgba(11, 11, 11, 0.1);
  background: rgba(255, 255, 255, 0.88);
  color: #777670;
  font-size: 12px;
}

.attachment-preview-footer[hidden] {
  display: none;
}

.attachment-preview-download {
  height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(11, 11, 11, 0.18);
  border-radius: 7px;
  background: #fff;
  color: #383835;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.attachment-preview-download:hover {
  background: #f1f1ee;
}

.settings-dialog .dialog-header {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
}

.settings-dialog .dialog-header h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.settings-dialog .app-dialog-content {
  height: 100%;
  max-height: none;
  padding: 0;
}

.settings-shell {
  display: grid;
  grid-template-columns: 191px minmax(0, 1fr);
  height: 100%;
}

.settings-navigation {
  overflow-y: auto;
  padding: 12px 12px 18px;
  border-right: 1px solid #deded9;
  background: #fafaf8;
}

.settings-search {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #d7d7d2;
  border-radius: 8px;
  background: #fff;
}

.settings-search .anthropic-icon {
  width: 18px;
  height: 18px;
  color: #777670;
  font-size: 18px;
  line-height: 18px;
}

.settings-search input {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
}

.settings-nav-label {
  margin: 26px 8px 8px;
  color: #85847e;
  font-size: 12px;
}

.settings-nav-list {
  display: grid;
  gap: 1px;
}

.settings-nav-list button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #555550;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.settings-nav-list button:hover,
.settings-nav-list button.active {
  background: #e3e3df;
  color: #252523;
}

.settings-nav-list button[hidden] {
  display: none;
}

.settings-nav-list .anthropic-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 18px;
}

.settings-panel {
  overflow-y: auto;
  padding: 60px 18px 54px 24px;
}

.settings-panel h3 {
  margin: 0 0 12px;
  color: #30302d;
  font-family: "Anthropic Sans", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.settings-panel h3:not(:first-child) {
  margin-top: 52px;
}

.settings-form-section {
  border-top: 0;
}

.settings-panel > .settings-form-section:first-of-type {
  margin-top: 5px;
}

.settings-panel > .settings-form-section:first-of-type + h3 {
  margin-top: 42px;
}

.settings-field {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 224px;
  align-items: center;
  gap: 24px;
  min-height: 57px;
  padding: 10px 0;
  border-bottom: 1px solid #e4e4df;
}

.settings-field > span strong,
.settings-field > span small {
  display: block;
}

.settings-field > span strong {
  color: #3f3f3b;
  font-size: 14px;
  font-weight: 500;
}

.settings-field > span small {
  margin-top: 3px;
  color: #777670;
  font-size: 12px;
  line-height: 16px;
}

.settings-field input,
.settings-field select,
.settings-field textarea {
  width: 100%;
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid #cecec9;
  border-radius: 8px;
  outline: 0;
  background: #fff;
  color: #30302d;
  font: inherit;
  font-size: 14px;
}

.settings-field textarea {
  min-height: 90px;
  resize: vertical;
}

.settings-field select {
  border-color: transparent;
  background-color: transparent;
  text-align: right;
}

.settings-field-stacked {
  grid-template-columns: minmax(0, 1fr);
  gap: 15px;
  padding-top: 17px;
}

.settings-field-stacked > span,
.settings-field-stacked > textarea {
  grid-column: 1;
}

.settings-field-stacked > span small {
  max-width: none;
}

.settings-guidelines a {
  color: inherit;
  text-decoration: none;
}

.settings-guidelines a:hover {
  text-decoration: underline;
}

.settings-avatar-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #3b3b38;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  justify-self: end;
}

.settings-segments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-self: end;
  width: 92px;
  gap: 2px;
  padding: 3px;
  border-radius: 8px;
  background: #eeeeea;
}

.settings-segments button {
  display: grid;
  place-items: center;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #65645f;
  cursor: pointer;
}

.settings-segments .anthropic-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 16px;
}

.settings-segments.motion-segments {
  grid-template-columns: repeat(2, 1fr);
  width: 158px;
}

.settings-segments.motion-segments button {
  display: block;
  padding: 0 10px;
  font-size: 13px;
}

.settings-segments button.active {
  background: #fff;
  color: #252523;
  box-shadow: 0 1px 3px rgba(31, 31, 30, 0.1);
}

.settings-summary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 72px;
  border-bottom: 1px solid #deded9;
}

.settings-summary-row strong,
.settings-summary-row small {
  display: block;
}

.settings-summary-row small {
  margin-top: 4px;
  color: #777670;
}

.settings-summary-row > button {
  height: 32px;
  padding: 0 11px;
  border: 1px solid #cecec9;
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
}

.directory-dialog .app-dialog-content {
  height: calc(100% - 52px);
  max-height: none;
  padding: 0;
}

.directory-shell {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  height: 100%;
}

.directory-sidebar {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 10px;
  border-right: 1px solid #e1e1dc;
  background: #f7f7f5;
}

.directory-sidebar button {
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #4b4b47;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.directory-sidebar button:hover,
.directory-sidebar button.active {
  background: #e8e8e4;
  color: #252523;
}

.directory-main {
  min-width: 0;
  overflow-y: auto;
  padding: 18px;
}

.directory-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.directory-toolbar input {
  flex: 1 1 auto;
  height: 38px;
  padding: 0 11px;
  border: 1px solid #cecec9;
  border-radius: 8px;
  outline: 0;
  color: #30302d;
  font: inherit;
}

.directory-toolbar input:focus {
  border-color: #85847e;
  box-shadow: 0 0 0 2px rgba(74, 73, 69, 0.1);
}

.directory-filters {
  display: flex;
  padding: 3px;
  border-radius: 8px;
  background: #eeeeea;
}

.directory-filters button {
  height: 30px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #686762;
  cursor: pointer;
}

.directory-filters button.active {
  background: #fff;
  color: #252523;
  box-shadow: 0 1px 3px rgba(31, 31, 30, 0.1);
}

.directory-controls {
  display: flex;
  justify-content: space-between;
  margin: 18px 0 10px;
  color: #777670;
  font-size: 12px;
}

.directory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.directory-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 82px;
  padding: 12px;
  border: 1px solid #deded9;
  border-radius: 8px;
  background: #fff;
}

.directory-card-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #ecece8;
  color: #454541;
  font-weight: 600;
}

.directory-card strong,
.directory-card small {
  display: block;
}

.directory-card strong {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 500;
}

.directory-card small {
  display: -webkit-box;
  overflow: hidden;
  color: #777670;
  font-size: 12px;
  line-height: 16px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.directory-card button {
  height: 30px;
  padding: 0 10px;
  border: 1px solid #cecec9;
  border-radius: 7px;
  background: #fff;
  color: #3a3a37;
  cursor: pointer;
}

.directory-card button.added {
  border-color: #74736d;
  background: #30302d;
  color: #fff;
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 14px 0 18px;
  border-bottom: 1px solid #e2e2dd;
}

.dialog-header h2 {
  margin: 0;
  font-family: var(--font-claude-serif);
  font-size: 20px;
  font-weight: 400;
}

.app-dialog.confirm-dialog {
  width: min(400px, 100%);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(11, 11, 11, 0.1), 0 18px 55px rgba(0, 0, 0, 0.2);
}

.modal-layer:has(.confirm-dialog) {
  place-items: center;
  padding: 18px;
}

.confirm-dialog .dialog-header {
  height: auto;
  padding: 19px 24px 0;
  border: 0;
}

.confirm-dialog .dialog-header h2 {
  font-family: "Anthropic Sans", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
}

.confirm-dialog .dialog-close {
  display: none;
}

.confirm-dialog .app-dialog-content {
  padding: 2px 24px 22px;
}

.confirm-dialog .app-dialog-content p {
  margin: 0 0 16px;
  color: #555550;
  font-size: 14px;
  line-height: 20px;
}

.confirm-dialog .dialog-actions {
  margin: 0;
  gap: 8px;
}

.confirm-dialog .dialog-actions button {
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 14px;
}

.confirm-dialog .dialog-actions button.danger {
  border-color: #d84a45;
  background: #d84a45;
  color: #fff;
}

.app-dialog.external-link-dialog {
  width: min(426px, 100%);
  padding: 24px;
  border: 1px solid rgba(31, 31, 30, 0.16);
  border-radius: 16px;
  background: #fcfcfb;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  animation: external-link-dialog-enter 250ms ease-out both;
}

.modal-layer:has(.external-link-dialog) {
  place-items: center;
  padding: 16px;
}

.external-link-dialog .dialog-header {
  height: auto;
  padding: 0;
  border: 0;
}

.external-link-dialog .dialog-header h2 {
  font-family: "Anthropic Sans", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
}

.external-link-dialog .dialog-close {
  display: none;
}

.external-link-dialog .app-dialog-content {
  padding: 0;
}

.external-link-content > p {
  margin: 6px 0 0;
  color: #5c5b57;
  font-size: 14px;
  line-height: 20px;
}

.external-link-url {
  max-height: 160px;
  margin-top: 12px;
  padding: 12px 16px;
  overflow-y: auto;
  border: 1px solid rgba(31, 31, 30, 0.16);
  border-radius: 8px;
  background: #f7f7f5;
  color: #252522;
  font-size: 14px;
  line-height: 20px;
  overflow-wrap: anywhere;
}

.external-link-trust {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  color: #30302d;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}

.external-link-trust input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: #b45f43;
}

.external-link-trust code {
  font-family: var(--font-claude-mono);
  font-size: 13px;
}

.external-link-actions {
  justify-content: flex-end;
  margin-top: 16px;
}

.external-link-actions button {
  min-width: 80px;
  height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  font-weight: 600;
}

@keyframes external-link-dialog-enter {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.app-dialog.feedback-dialog {
  width: min(520px, 100%);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(11, 11, 11, 0.1), 0 4px 8px rgba(11, 11, 11, 0.08), 0 12px 28px -2px rgba(11, 11, 11, 0.08);
  animation: feedback-dialog-enter 150ms ease-out both;
}

.feedback-dialog .dialog-header {
  height: auto;
  padding: 23px 24px 0;
  border: 0;
}

.feedback-dialog .dialog-header h2 {
  font-family: "Anthropic Sans", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

.feedback-dialog .dialog-close {
  display: none;
}

.feedback-dialog .app-dialog-content {
  padding: 19px 24px 24px;
  overflow: visible;
}

.feedback-form {
  display: flex;
  flex-direction: column;
}

.feedback-field {
  position: relative;
  display: flex;
  flex-direction: column;
}

.feedback-field + .feedback-field {
  margin-top: 16px;
}

.feedback-field > label,
.feedback-field label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #383835;
  font-size: 14px;
  font-weight: 430;
  line-height: 20px;
}

.feedback-field textarea {
  width: 100%;
  height: 76px;
  padding: 8px 12px;
  resize: none;
  border: 0;
  border-radius: 8px;
  outline: 0;
  background: rgba(255, 255, 255, 0.5);
  color: #0b0b0b;
  box-shadow: 0 0 0 1px rgba(11, 11, 11, 0.16);
  font: 14px/20px "Anthropic Sans", system-ui, sans-serif;
  transition: box-shadow 60ms cubic-bezier(0.4, 0, 0.2, 1);
}

.feedback-field textarea:hover:not(:focus) {
  box-shadow: 0 0 0 1px rgba(11, 11, 11, 0.28);
}

.feedback-field textarea:focus {
  box-shadow: 0 0 0 2px rgba(74, 73, 69, 0.34);
}

.feedback-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 32px;
  margin-top: 8px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  outline: 0;
  background: rgba(255, 255, 255, 0.5);
  color: #0b0b0b;
  box-shadow: 0 0 0 1px rgba(11, 11, 11, 0.16);
  font: 14px/20px "Anthropic Sans", system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}

.feedback-select:focus-visible,
.feedback-select[aria-expanded="true"] {
  box-shadow: 0 0 0 2px rgba(74, 73, 69, 0.34);
}

.feedback-select .anthropic-icon {
  width: 14px;
  height: 14px;
  color: #7b7974;
  font-size: 14px;
  line-height: 14px;
  transition: transform 150ms ease;
}

.feedback-select[aria-expanded="true"] .anthropic-icon {
  transform: rotate(180deg);
}

.feedback-select-value.placeholder {
  color: #7b7974;
}

.feedback-options {
  position: absolute;
  z-index: 4;
  top: calc(100% + 5px);
  right: 0;
  left: 0;
  max-height: min(300px, 44vh);
  padding: 5px;
  overflow-y: auto;
  border: 1px solid rgba(31, 31, 30, 0.14);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(11, 11, 11, 0.14);
  animation: feedback-options-enter 120ms ease-out both;
}

.feedback-options[hidden] {
  display: none;
}

.feedback-options button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 32px;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #252523;
  font: 14px/20px "Anthropic Sans", system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}

.feedback-options button:hover,
.feedback-options button:focus-visible,
.feedback-options button[aria-selected="true"] {
  outline: 0;
  background: #efefec;
}

.feedback-notice {
  margin: 12px 0 0;
  color: #7b7974;
  font-size: 12px;
  font-style: italic;
  line-height: 15px;
}

.feedback-notice a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(123, 121, 116, 0.55);
  text-underline-offset: 3px;
}

.feedback-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

.feedback-actions button {
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: #efefec;
  color: #0b0b0b;
  box-shadow: 0 0 0 1px rgba(11, 11, 11, 0.1);
  font: 500 14px/20px "Anthropic Sans", system-ui, sans-serif;
  cursor: pointer;
}

.feedback-actions button.primary {
  background: #252523;
  color: #fff;
  box-shadow: none;
}

@keyframes feedback-dialog-enter {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes feedback-options-enter {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

.dialog-close {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #777670;
  cursor: pointer;
}

.dialog-close:hover {
  background: #efefeb;
}

.search-field {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 15px 12px 11px 16px;
  border: 0;
  border-bottom: 1px solid #e3e3df;
  border-radius: 0;
}

.global-search-input {
  height: 42px;
  padding: 0;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 15px;
}

.global-search-input:focus-visible {
  outline: 0;
}

.global-search-results {
  min-height: 0;
  flex: 1 1 auto;
  max-height: none;
  overflow-y: auto;
  padding: 6px 10px 8px;
}

.search-shortcuts {
  display: none;
  align-items: center;
  gap: 18px;
  min-height: 36px;
  padding: 5px 14px;
  border-top: 1px solid #e5e5e1;
  color: #898882;
  font-size: 11px;
}

.search-shortcuts span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.search-shortcuts kbd {
  min-width: 20px;
  padding: 2px 4px;
  border: 0;
  border-radius: 4px;
  background: #efefeb;
  color: #777670;
  font: inherit;
  text-align: center;
}

.sidebar-chat-menu kbd {
  min-width: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #898781;
  font: 13px/20px "Anthropic Sans", system-ui, sans-serif;
  text-align: right;
}

.search-result-button {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 4px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #30302d;
  text-align: left;
  cursor: pointer;
}

.search-result-button > .anthropic-icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 18px;
}

.search-result-shortcut {
  color: #898781;
  font-size: 12px;
  text-align: right;
}

.search-result-button:hover,
.search-result-button.active {
  background: #efefeb;
}

.search-result-button strong {
  display: block;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-button small {
  color: #777670;
  font-size: 12px;
}

.app-dialog-content {
  max-height: calc(100vh - 174px);
  overflow-y: auto;
  padding: 18px;
}

.dialog-form {
  display: grid;
  gap: 13px;
}

.dialog-form label > span {
  display: block;
  margin-bottom: 6px;
  color: #565651;
  font-size: 13px;
}

.dialog-form input,
.dialog-form textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #cecec9;
  border-radius: 8px;
  outline: 0;
  background: #fff;
  color: #30302d;
  font: inherit;
}

.dialog-form input:focus,
.dialog-form textarea:focus {
  border-color: #85847e;
  box-shadow: 0 0 0 2px rgba(74, 73, 69, 0.1);
}

.prompt-categories[hidden],
.utility-capsule[hidden] {
  display: none;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}

.dialog-actions button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid #d0d0cb;
  border-radius: 8px;
  background: #fff;
  color: #3a3a37;
  font-size: 14px;
  cursor: pointer;
}

.dialog-actions button.primary,
.dialog-actions button.dialog-primary {
  border-color: #30302d;
  background: #30302d;
  color: #fff;
}

.dialog-actions button.danger {
  border-color: #a33b31;
  background: #a33b31;
  color: #fff;
}

.dialog-secondary {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid #d0d0cb;
  border-radius: 8px;
  background: #fff;
  color: #3a3a37;
  font-size: 14px;
  cursor: pointer;
}

.dialog-list {
  border-top: 1px solid #deded9;
}

.dialog-list-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 60px;
  border-bottom: 1px solid #e4e4df;
}

.dialog-list-row strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
}

.dialog-list-row small {
  color: #777670;
  font-size: 12px;
}

.dialog-list-row button {
  height: 30px;
  padding: 0 10px;
  border: 1px solid #d0d0cb;
  border-radius: 7px;
  background: #fff;
  color: #3a3a37;
  font-size: 13px;
  cursor: pointer;
}

.dialog-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #3b3b38;
  color: #fff;
  font-weight: 600;
}

.shortcut-list {
  border-top: 1px solid #e2e2de;
}

.shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 0 2px;
  border-bottom: 1px solid #e8e8e4;
  color: #30302d;
  font-size: 14px;
}

.shortcut-row kbd {
  color: #777670;
  font: 13px/20px "Anthropic Sans", system-ui, sans-serif;
}

.toast {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 12px);
  padding: 8px 13px;
  border-radius: 7px;
  background: #30302d;
  color: #fff;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
}

.toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 200;
  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 7px;
  border-radius: 5px;
  background: #242422;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 100ms ease 400ms, visibility 0s linear 500ms;
}

[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transition-delay: 400ms, 400ms;
}

.utility-capsule [data-tooltip]::after {
  top: 50%;
  left: auto;
  right: calc(100% + 8px);
  transform: translateY(-50%);
}

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }

  body.sidebar-open .sidebar {
    display: flex;
    z-index: 70;
  }

  body.sidebar-open .mobile-sidebar-toggle {
    display: none;
  }

  body.sidebar-open .sidebar-backdrop {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-sidebar-toggle {
    display: grid;
    place-items: center;
  }

  .page-shell {
    padding-left: 0;
  }

  .composer-area {
    width: 100%;
    padding-top: 100px;
  }

  h1 {
    gap: 12px;
    margin-bottom: 32px;
    font-size: 31.45px;
    line-height: 48px;
  }

  .composer {
    width: min(648px, calc(100% - 22px));
    height: 125px;
    margin: 0 auto;
    padding-inline: 18px;
    transform: translateX(3px);
  }

  .prompt-categories {
    gap: 8px;
    margin-top: 16px;
    overflow-x: auto;
    justify-content: center;
    padding: 0;
    scrollbar-width: none;
  }

  .prompt-categories button {
    padding-inline: 0;
  }

  .settings-button {
    display: none;
  }

  .mic-button {
    display: grid;
  }

  .prompt-categories::-webkit-scrollbar {
    display: none;
  }

  .menu {
    top: 315px;
    right: 46px;
  }

  .settings-menu {
    right: 14px;
  }

  .chat-model-menu {
    top: auto;
    right: 86px;
    bottom: 52px;
  }

  .chat-effort-menu {
    right: -106px;
    bottom: calc(100% + 8px);
    width: min(322px, calc(100vw - 24px));
  }

  .chat-more-models-menu {
    right: -106px;
    bottom: calc(100% + 8px);
    width: min(165px, calc(100vw - 24px));
  }

  .home-more-models-menu {
    right: 0;
    bottom: calc(100% + 8px);
    width: min(165px, calc(100vw - 24px));
  }

  .home-effort-menu {
    right: 0;
    bottom: calc(100% + 8px);
    width: min(322px, calc(100vw - 24px));
  }

  .attachment-submenu {
    top: auto !important;
    right: 0;
    bottom: calc(100% + 8px);
    left: auto;
    width: min(232px, calc(100vw - 24px));
  }

  .directory-shell {
    grid-template-columns: 116px minmax(0, 1fr);
  }

  .directory-main {
    padding: 12px;
  }

  .directory-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .directory-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-dialog.settings-dialog {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    transform: none;
  }

  .settings-shell {
    grid-template-columns: 118px minmax(0, 1fr);
  }

  .settings-navigation {
    padding-inline: 7px;
  }

  .settings-nav-list button {
    gap: 6px;
    padding-inline: 6px;
    font-size: 12px;
  }

  .settings-panel {
    padding: 28px 18px 40px;
  }

  .settings-field {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}

@media (max-width: 520px) {
  .composer-area {
    padding-top: 92px;
  }

  h1 {
    gap: 8px;
    margin-bottom: 33px;
    padding-right: 52px;
    font-size: 22px;
    line-height: 36px;
  }

  .claude-mark {
    width: 24px;
    height: 24px;
  }

  .model-level,
  .settings-button {
    display: none;
  }

  .model-button {
    padding-inline: 6px;
  }

  .prompt-categories {
    justify-content: flex-start;
    padding-inline: 8px 42px;
  }
}

@media (max-width: 768px) {
  .downloads-content {
    left: 0;
    width: min(100% - 28px, 520px);
    padding-top: 72px;
  }

  .downloads-content > h1 {
    margin-bottom: 48px;
    padding-right: 0;
    font-size: 28px;
    line-height: 34px;
    white-space: normal;
  }

  .downloads-desktop,
  .downloads-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .downloads-desktop {
    gap: 22px;
    margin-bottom: 58px;
  }

  .downloads-desktop .downloads-copy {
    padding-top: 0;
  }

  .downloads-desktop .downloads-demo {
    height: 230px;
  }

  body.chat-mode .mobile-sidebar-toggle {
    z-index: 45;
  }

  .chat-header {
    padding-right: 62px;
    padding-left: 42px;
  }

  .chat-feed {
    width: auto;
    margin-right: 62px;
    margin-left: 12px;
    padding-top: 50px;
    padding-bottom: 184px;
    transform: none;
  }

  .notify-bar,
  .chat-composer-shell {
    right: 62px;
    left: 12px;
    width: auto;
    transform: none;
  }

  .notify-bar > span {
    max-width: calc(100% - 100px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 520px) {
  .chat-header {
    padding-right: 58px;
  }

  .chat-title {
    max-width: 150px;
  }

  .chat-title-input {
    width: min(190px, calc(100vw - 118px));
  }

  .share-button {
    display: none;
  }

  .user-bubble {
    max-width: 86%;
  }

  .user-edit-box {
    width: min(100%, calc(100vw - 86px));
  }

  .assistant-copy {
    font-size: 16px;
    line-height: 24px;
  }

  .search-result {
    grid-template-columns: 16px minmax(0, 1fr);
  }

  .result-domain {
    display: none;
  }

  .chat-model-button .model-level {
    display: none;
  }

  .chat-model-button {
    padding-inline: 6px;
  }
}

@media (max-width: 768px) {
  .workspace-view {
    padding: 54px 62px 48px 14px;
  }

  .workspace-header {
    flex-wrap: wrap;
    min-height: 58px;
    gap: 8px;
    padding-bottom: 16px;
  }

  .workspace-header > div:first-child {
    width: 100%;
  }

  .workspace-directory-toolbar {
    width: 100%;
    flex-wrap: wrap;
    margin-left: 0;
  }

  .workspace-primary {
    margin-left: 0;
  }

  .workspace-directory-search {
    width: min(180px, calc(100vw - 130px));
  }

  h1.workspace-title {
    font-size: 27px;
    line-height: 34px;
  }

  .workspace-primary {
    min-height: 32px;
    padding-inline: 10px;
  }

  .workspace-content {
    padding-top: 18px;
  }

  .view-toolbar,
  .design-form {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .project-grid,
  .artifact-grid {
    grid-template-columns: 1fr;
  }

  .code-shell {
    grid-template-columns: 1fr;
  }

  .code-files {
    display: none;
  }

  .generated-design {
    grid-template-columns: 1fr;
  }

  .generated-design-visual {
    min-height: 220px;
  }

  .overlay-layer {
    padding: 52px 62px 12px 8px;
  }

  .search-dialog,
  .app-dialog {
    max-height: calc(100vh - 64px);
  }
}

/* ===== Generated file jobs: multi-file cards, diff chips, previews ===== */

.document-output-group {
  display: flex;
  flex-direction: column;
}

.document-download-all {
  align-self: flex-start;
  margin: 2px 32px 12px 8px;
  padding: 8px 18px;
  border: 1px solid rgba(31, 31, 30, 0.2);
  border-radius: 8px;
  background: #20201e;
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.document-download-all:hover,
.document-download-all:focus-visible {
  background: #3d3d3a;
}

.document-run-step-diff {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.document-diff-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 1px solid rgba(31, 31, 30, 0.14);
  border-radius: 6px;
  background: rgba(31, 31, 30, 0.04);
  font-size: 12px;
  font-family: "Anthropic Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.document-diff-file {
  color: #20201e;
}

.document-diff-added {
  color: #1a7f37;
  font-weight: 600;
}

.document-diff-removed {
  color: #cf222e;
  font-weight: 600;
}

/* XLSX grid preview */
.xlsx-preview {
  display: grid;
  height: 100%;
  min-height: 0;
  grid-template-rows: 34px minmax(0, 1fr) 32px;
  background: #fff;
  color: #20201e;
  font-family: Arial, sans-serif;
  font-size: 12px;
}

.xlsx-formula-bar {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  border-bottom: 1px solid #d9dce1;
  background: #fff;
}

.xlsx-formula-icon {
  color: #777b82;
  font-family: Georgia, serif;
  font-size: 14px;
  font-style: italic;
  text-align: center;
}

.xlsx-formula-value {
  height: 22px;
  border-left: 1px solid #e3e5e8;
}

.xlsx-grid-viewport {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.xlsx-preview-table {
  width: max(100%, 1200px);
  border-collapse: collapse;
  table-layout: fixed;
  background: #fff;
  font-size: 12px;
}

.xlsx-preview-table th,
.xlsx-preview-table td {
  height: 22px;
  padding: 0 8px;
  border: 1px solid #e0e3e8;
  text-align: left;
  white-space: nowrap;
}

.xlsx-preview-table .xlsx-grid-corner,
.xlsx-preview-table .xlsx-row-header,
.xlsx-preview-table .xlsx-column-header {
  position: sticky;
  z-index: 2;
  padding: 0;
  background: #f4f5f6;
  color: #6f737a;
  font-size: 11px;
  font-weight: 400;
  text-align: center;
}

.xlsx-preview-table .xlsx-column-header {
  top: 0;
}

.xlsx-preview-table .xlsx-grid-corner,
.xlsx-preview-table .xlsx-row-header {
  left: 0;
  width: 28px;
}

.xlsx-preview-table .xlsx-grid-corner {
  z-index: 3;
}

.xlsx-preview-table .xlsx-data-cell {
  background: #fff;
  color: #20201e;
}

.xlsx-preview-table .xlsx-header-cell,
.xlsx-preview-table .xlsx-total-cell {
  font-weight: 600;
}

.xlsx-sheet-tabs {
  display: flex;
  align-items: stretch;
  border-top: 1px solid #d9dce1;
  background: #f7f7f8;
}

.xlsx-sheet-tab {
  min-width: 68px;
  padding: 0 14px;
  border: 0;
  border-right: 1px solid #d9dce1;
  border-bottom: 2px solid #6b6f75;
  background: #fff;
  color: #20201e;
  font-size: 12px;
  cursor: default;
}

.xlsx-preview-note {
  margin: 14px 2px 0;
  color: #6f6e69;
  font-size: 12px;
}

/* PPTX slide preview (rendered locally from the generation spec) */
.pptx-preview {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 20px 26px;
}

.pptx-preview-slide {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(31, 31, 30, 0.14);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(31, 31, 30, 0.08);
}

.pptx-preview-inner {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  padding: 8% 7%;
}

.pptx-slide-dark .pptx-preview-inner {
  justify-content: center;
}

.pptx-preview-title {
  margin: 0;
  font-size: clamp(16px, 3.2cqw, 30px);
  line-height: 1.25;
}

.pptx-slide-dark .pptx-preview-title {
  color: #fff;
  font-size: clamp(20px, 4cqw, 34px);
}

.pptx-preview-subtitle {
  margin: 0;
  font-size: clamp(11px, 1.7cqw, 15px);
  font-style: italic;
}

.pptx-preview-paragraph {
  margin: 0;
  color: #1f2937;
  font-size: clamp(11px, 1.6cqw, 14px);
}

.pptx-preview-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.pptx-preview-steps {
  flex-direction: row;
  gap: 12px;
}

.pptx-preview-item {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: 9px;
}

.pptx-preview-steps .pptx-preview-item {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pptx-preview-marker {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.pptx-preview-item-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: clamp(11px, 1.6cqw, 14px);
  color: #1f2937;
}

.pptx-slide-dark .pptx-preview-item-copy,
.pptx-slide-dark .pptx-preview-paragraph {
  color: #fff;
}

.pptx-preview-item-copy small {
  color: #6b7280;
  font-size: clamp(10px, 1.3cqw, 12px);
}

.pptx-slide-dark .pptx-preview-item-copy small {
  color: #9fb2c8;
}

.pptx-preview-footer {
  margin: auto 0 0;
  color: #9fb2c8;
  font-size: clamp(10px, 1.3cqw, 12px);
}

/* PDF page preview */
.pdf-preview-pages {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  padding: 18px 0 26px;
}

.pdf-preview-page {
  position: relative;
  width: min(760px, calc(100% - 32px));
  max-width: calc(100% - 32px);
  min-height: 0;
  aspect-ratio: auto;
  padding: 0;
  background: #fff;
  border: 1px solid rgba(31, 31, 30, 0.12);
  box-shadow: 0 6px 18px rgba(31, 31, 30, 0.08);
}

.pdf-preview-page canvas {
  display: block;
  width: 100%;
  height: auto;
}

.document-layout-preview {
  display: block;
  width: auto;
  max-width: calc(100% - 24px);
  max-height: calc(100vh - 112px);
  margin: 10px auto 28px;
  object-fit: contain;
}

/* Plain text / markdown / csv preview reuses the code viewer */
.plain-file-preview .document-code-lines li {
  white-space: pre-wrap;
}