@m6d/cortex-react 1.0.0

package/dist/styles.css

@@ -0,0 +1,2652 @@
+@charset "UTF-8";
+:root {
+  --cortex-color-surface: light-dark(#ffffff, #0a0a0a);
+  --cortex-color-surface-subtle: light-dark(#f8fafc, #141414);
+  --cortex-color-surface-muted: light-dark(#f1f5f9, #1f1f1f);
+  --cortex-color-border: light-dark(#e2e8f0, #2e2e2e);
+  --cortex-color-border-strong: light-dark(#cbd5e1, #444444);
+  --cortex-color-text-heading: light-dark(#1e293b, #fafafa);
+  --cortex-color-text-strong: light-dark(#334155, #e5e5e5);
+  --cortex-color-text: light-dark(#475569, #d4d4d4);
+  --cortex-color-text-secondary: light-dark(#64748b, #a3a3a3);
+  --cortex-color-text-muted: light-dark(#94a3b8, #737373);
+  --cortex-color-primary: light-dark(#1e293b, #fafafa);
+  --cortex-color-primary-foreground: light-dark(#ffffff, #0a0a0a);
+  --cortex-color-accent: light-dark(#4f46e5, #818cf8);
+  --cortex-color-accent-surface: light-dark(#e0e7ff, #312e81);
+  --cortex-color-link: light-dark(#2563eb, #60a5fa);
+  --cortex-color-hover: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.06));
+  --cortex-color-user-surface: var(--cortex-color-surface-subtle);
+  --cortex-color-user-border: var(--cortex-color-border);
+  --cortex-color-success: light-dark(#059669, #34d399);
+  --cortex-color-success-surface: light-dark(#ecfdf5, #064e3b);
+  --cortex-color-success-border: light-dark(#d1fae5, #065f46);
+  --cortex-color-danger: light-dark(#dc2626, #f87171);
+  --cortex-color-danger-surface: light-dark(#fef2f2, #450a0a);
+  --cortex-color-danger-border: light-dark(#fecaca, #7f1d1d);
+  --cortex-radius: 0.5rem;
+  --cortex-font-mono: var(
+    --default-mono-font-family,
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    monospace
+  );
+  --cortex-font-size: 0.8125rem;
+}
+
+.cortex-widget {
+  color-scheme: light;
+}
+.cortex-widget[data-cortex-theme=dark] {
+  color-scheme: dark;
+}
+.cortex-widget[data-cortex-theme=system] {
+  color-scheme: light dark;
+}
+
+@layer cortex-preflight {
+  :where(.cortex-widget),
+  :where(.cortex-widget) *,
+  :where(.cortex-widget) ::before,
+  :where(.cortex-widget) ::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+  :where(.cortex-widget) {
+    tab-size: 4;
+  }
+  :where(.cortex-widget) hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  :where(.cortex-widget) :is(h1, h2, h3, h4, h5, h6) {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  :where(.cortex-widget) a {
+    color: inherit;
+    text-decoration: inherit;
+  }
+  :where(.cortex-widget) :is(b, strong) {
+    font-weight: bolder;
+  }
+  :where(.cortex-widget) :is(code, kbd, samp, pre) {
+    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    font-feature-settings: var(--default-mono-font-feature-settings, normal);
+    font-variation-settings: var(--default-mono-font-variation-settings, normal);
+    font-size: 1em;
+  }
+  :where(.cortex-widget) small {
+    font-size: 80%;
+  }
+  :where(.cortex-widget) :is(sub, sup) {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  :where(.cortex-widget) sub {
+    bottom: -0.25em;
+  }
+  :where(.cortex-widget) sup {
+    top: -0.5em;
+  }
+  :where(.cortex-widget) table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  :where(.cortex-widget) :is(ol, ul, menu) {
+    list-style: none;
+  }
+  :where(.cortex-widget) :is(img, svg, video, canvas, audio, iframe, embed, object) {
+    display: block;
+    vertical-align: middle;
+  }
+  :where(.cortex-widget) :is(img, video) {
+    max-width: 100%;
+    height: auto;
+  }
+  :where(.cortex-widget) :is(button, input, select, optgroup, textarea) {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
+  }
+  :where(.cortex-widget) ::placeholder {
+    opacity: 1;
+    color: color-mix(in oklab, currentcolor 50%, transparent);
+  }
+  :where(.cortex-widget) textarea {
+    resize: vertical;
+  }
+}
+.cortex-widget .hljs {
+  color: light-dark(#24292e, #c9d1d9);
+  background: transparent;
+}
+.cortex-widget .hljs-doctag,
+.cortex-widget .hljs-keyword,
+.cortex-widget .hljs-meta .hljs-keyword,
+.cortex-widget .hljs-template-tag,
+.cortex-widget .hljs-template-variable,
+.cortex-widget .hljs-type,
+.cortex-widget .hljs-variable.language_ {
+  color: light-dark(#d73a49, #ff7b72);
+}
+.cortex-widget .hljs-title,
+.cortex-widget .hljs-title.class_,
+.cortex-widget .hljs-title.class_.inherited__,
+.cortex-widget .hljs-title.function_ {
+  color: light-dark(#6f42c1, #d2a8ff);
+}
+.cortex-widget .hljs-attr,
+.cortex-widget .hljs-attribute,
+.cortex-widget .hljs-literal,
+.cortex-widget .hljs-meta,
+.cortex-widget .hljs-number,
+.cortex-widget .hljs-operator,
+.cortex-widget .hljs-selector-attr,
+.cortex-widget .hljs-selector-class,
+.cortex-widget .hljs-selector-id,
+.cortex-widget .hljs-variable {
+  color: light-dark(#005cc5, #79c0ff);
+}
+.cortex-widget .hljs-meta .hljs-string,
+.cortex-widget .hljs-regexp,
+.cortex-widget .hljs-string {
+  color: light-dark(#032f62, #a5d6ff);
+}
+.cortex-widget .hljs-built_in,
+.cortex-widget .hljs-symbol {
+  color: light-dark(#e36209, #ffa657);
+}
+.cortex-widget .hljs-code,
+.cortex-widget .hljs-comment,
+.cortex-widget .hljs-formula {
+  color: light-dark(#6a737d, #8b949e);
+}
+.cortex-widget .hljs-name,
+.cortex-widget .hljs-quote,
+.cortex-widget .hljs-selector-pseudo,
+.cortex-widget .hljs-selector-tag {
+  color: light-dark(#22863a, #7ee787);
+}
+.cortex-widget .hljs-subst {
+  color: light-dark(#24292e, #c9d1d9);
+}
+.cortex-widget .hljs-section {
+  color: light-dark(#005cc5, #1f6feb);
+  font-weight: bold;
+}
+.cortex-widget .hljs-bullet {
+  color: light-dark(#735c0f, #f2cc60);
+}
+.cortex-widget .hljs-emphasis {
+  font-style: italic;
+}
+.cortex-widget .hljs-strong {
+  font-weight: bold;
+}
+.cortex-widget .hljs-addition {
+  color: light-dark(#22863a, #aff5b4);
+  background-color: light-dark(#f0fff4, #033a16);
+}
+.cortex-widget .hljs-deletion {
+  color: light-dark(#b31d28, #ffdcd7);
+  background-color: light-dark(#ffeef0, #67060c);
+}
+
+.cortex-widget {
+  display: block;
+}
+
+.cortex-widget__container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.cortex-widget__screen {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  transition: transform 0.3s ease-out;
+}
+
+.cortex-widget__screen--active {
+  transform: translateX(0);
+}
+
+.cortex-widget__screen--left {
+  transform: translateX(-100%);
+}
+[dir=rtl] .cortex-widget__screen--left {
+  transform: translateX(100%);
+}
+
+.cortex-widget__screen--right {
+  transform: translateX(100%);
+}
+[dir=rtl] .cortex-widget__screen--right {
+  transform: translateX(-100%);
+}
+
+@keyframes cortex-skeleton-shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+.cortex-skeleton {
+  background: linear-gradient(90deg, var(--cortex-color-border) 0%, var(--cortex-color-surface-muted) 40%, var(--cortex-color-border) 80%);
+  background-size: 200% 100%;
+  animation: cortex-skeleton-shimmer 1.8s ease-in-out infinite;
+  border-radius: 6px;
+}
+
+.cortex-widget__chat-header {
+  flex-shrink: 0;
+  height: 3rem;
+  padding: 0 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  border-bottom: 1px solid var(--cortex-color-border);
+  background: var(--cortex-color-surface);
+}
+
+.cortex-widget__back-btn {
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  border-radius: calc(var(--cortex-radius) * 0.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  transition: color 0.15s, background-color 0.15s;
+  color: var(--cortex-color-text-muted);
+}
+.cortex-widget__back-btn:hover {
+  color: var(--cortex-color-text);
+  background: var(--cortex-color-surface-muted);
+}
+
+[dir=rtl] .cortex-widget__back-icon {
+  transform: rotate(180deg);
+}
+
+.cortex-widget__chat-title-wrap {
+  min-width: 0;
+  flex: 1;
+}
+
+.cortex-widget__chat-title {
+  font-family: var(--cortex-font-display, inherit);
+  font-size: var(--cortex-font-size);
+  font-weight: 500;
+  color: var(--cortex-color-text-strong);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin: 0;
+}
+
+.cortex-widget__debug-btn {
+  flex-shrink: 0;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  padding: 0.25rem 0.625rem;
+  border-radius: calc(var(--cortex-radius) * 0.75);
+  border: 0;
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+.cortex-widget__debug-btn--on {
+  background: light-dark(#fef3c7, #78350f);
+  color: light-dark(#d97706, #fbbf24);
+}
+.cortex-widget__debug-btn--on:hover {
+  background: light-dark(#fde68a, #92400e);
+}
+.cortex-widget__debug-btn--off {
+  background: var(--cortex-color-surface-muted);
+  color: var(--cortex-color-text-muted);
+}
+.cortex-widget__debug-btn--off:hover {
+  background: var(--cortex-color-border);
+}
+
+.cortex-widget__messages-skeleton {
+  flex: 1;
+  overflow: hidden;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.cortex-widget__msg-skel {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.cortex-widget__msg-skel--user {
+  align-items: flex-end;
+}
+.cortex-widget__msg-skel--assistant {
+  align-items: flex-start;
+}
+
+.cortex-widget__msg-skel-bubble {
+  max-width: 80%;
+  padding: 1rem;
+  border-radius: calc(var(--cortex-radius) * 2);
+  border: 1px solid var(--cortex-color-border);
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.cortex-widget__msg-skel-bubble--user {
+  background: var(--cortex-color-surface-subtle);
+  border-bottom-right-radius: 0;
+}
+.cortex-widget__msg-skel-bubble--assistant {
+  background: var(--cortex-color-surface-muted);
+  border-bottom-left-radius: 0;
+}
+
+.cortex-widget__msg-skel-line {
+  height: 0.75rem;
+}
+
+.cortex-widget__messages {
+  flex: 1;
+  overflow: hidden;
+}
+
+@keyframes cortex-working-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes cortex-dot-wave {
+  0%, 60%, 100% {
+    transform: translateY(0) scale(1);
+    opacity: 0.45;
+  }
+  30% {
+    transform: translateY(-5px) scale(1.2);
+    opacity: 1;
+  }
+}
+@keyframes cortex-working-shimmer {
+  0% {
+    background-position: -200% center;
+  }
+  100% {
+    background-position: 200% center;
+  }
+}
+.cortex-widget__working {
+  flex-shrink: 0;
+  padding: 0.5rem 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  animation: cortex-working-slide-in 0.25s ease-out both;
+}
+
+.cortex-widget__working-dots {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.cortex-working-dot {
+  display: block;
+  width: 6px;
+  height: 6px;
+  border-radius: 9999px;
+  background: var(--cortex-color-success);
+  animation: cortex-dot-wave 1.4s ease-in-out infinite;
+}
+.cortex-working-dot:nth-child(2) {
+  animation-delay: 0.15s;
+}
+.cortex-working-dot:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+.cortex-widget__working-text {
+  font-size: 0.75rem;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  color: var(--cortex-color-success);
+}
+
+cortex-chat-composer {
+  display: contents;
+}
+
+.cortex-widget__input-area {
+  flex-shrink: 0;
+  padding: 0.75rem;
+  background: var(--cortex-color-surface);
+  border-top: 1px solid var(--cortex-color-border);
+}
+
+.cortex-widget__input-box {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.5rem;
+  border-radius: calc(var(--cortex-radius) * 1.5);
+  border: 1px solid var(--cortex-color-border);
+  padding: 0.375rem;
+  transition: border-color 0.15s, background-color 0.15s;
+}
+.cortex-widget__input-box--disabled {
+  background: var(--cortex-color-surface-muted);
+}
+.cortex-widget__input-box--enabled {
+  background: color-mix(in oklab, var(--cortex-color-surface-subtle) 45%, var(--cortex-color-surface));
+}
+.cortex-widget__input-box--enabled:focus-within {
+  border-color: var(--cortex-color-border-strong);
+  background: var(--cortex-color-surface);
+}
+.cortex-widget__input-box--dragging {
+  border-color: var(--cortex-color-text-heading);
+  border-style: dashed;
+  background: var(--cortex-color-surface-muted);
+}
+
+.cortex-widget__textarea {
+  flex: 1;
+  background: transparent;
+  resize: none;
+  border: 0;
+  outline: none;
+  font-size: var(--cortex-font-size);
+  padding: 0.375rem 0.5rem;
+  min-height: 28px;
+  max-height: 120px;
+  line-height: 1.375;
+  color: var(--cortex-color-text-strong);
+}
+.cortex-widget__textarea::placeholder {
+  color: var(--cortex-color-text-muted);
+}
+.cortex-widget__textarea--disabled {
+  color: var(--cortex-color-text-muted);
+  cursor: not-allowed;
+}
+.cortex-widget__textarea:disabled {
+  cursor: not-allowed;
+  border: 0;
+}
+
+.cortex-widget__input-actions {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+@keyframes cortex-stop-pulse-ring {
+  0% {
+    opacity: 0.45;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.15;
+    transform: scale(1.12);
+  }
+  100% {
+    opacity: 0.45;
+    transform: scale(1);
+  }
+}
+@keyframes cortex-stop-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.7);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+.cortex-stop-btn {
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--cortex-radius);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  position: relative;
+  background: var(--cortex-color-danger);
+  color: white;
+  border: 0;
+  animation: cortex-stop-fade-in 0.2s ease-out both;
+  transition: background 0.15s ease;
+}
+.cortex-stop-btn:hover {
+  background: color-mix(in oklab, var(--cortex-color-danger) 85%, black);
+}
+.cortex-stop-btn:active {
+  transform: scale(0.92);
+}
+
+.cortex-stop-btn__ring {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--cortex-radius);
+  background: var(--cortex-color-danger);
+  animation: cortex-stop-pulse-ring 2s ease-in-out infinite;
+  pointer-events: none;
+}
+
+.cortex-stop-btn__icon {
+  position: relative;
+  z-index: 1;
+}
+
+.cortex-widget__attach-btn {
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--cortex-radius);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  transition: color 0.15s, background-color 0.15s;
+  color: var(--cortex-color-text-muted);
+}
+.cortex-widget__attach-btn:hover {
+  color: var(--cortex-color-text);
+  background: var(--cortex-color-hover);
+}
+
+.cortex-widget__file-input {
+  display: none;
+}
+
+.cortex-widget__send-btn {
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--cortex-radius);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  transition: background-color 0.15s;
+  cursor: default;
+}
+.cortex-widget__send-btn--empty {
+  background: var(--cortex-color-border);
+  color: var(--cortex-color-text-muted);
+}
+.cortex-widget__send-btn--ready {
+  background: var(--cortex-color-primary);
+  color: var(--cortex-color-primary-foreground);
+  cursor: pointer;
+}
+.cortex-widget__send-btn--ready:hover {
+  background: color-mix(in oklab, var(--cortex-color-primary) 85%, var(--cortex-color-primary-foreground));
+}
+
+[dir=rtl] .cortex-widget__send-icon {
+  transform: rotate(180deg);
+}
+
+.cortex-widget__container--full {
+  display: flex;
+  flex-direction: row;
+}
+.cortex-widget__container--full > .cortex-widget__screen {
+  position: relative;
+  inset: auto;
+  transition: none;
+}
+.cortex-widget__container--full > .cortex-widget__screen.cortex-widget__screen--active, .cortex-widget__container--full > .cortex-widget__screen.cortex-widget__screen--left, .cortex-widget__container--full > .cortex-widget__screen.cortex-widget__screen--right {
+  transform: none;
+}
+.cortex-widget__container--full > .cortex-widget__screen:first-child {
+  width: 280px;
+  min-width: 280px;
+  flex-shrink: 0;
+  border-right: 1px solid var(--cortex-color-border);
+  background: var(--cortex-color-surface-subtle);
+}
+[dir=rtl] .cortex-widget__container--full > .cortex-widget__screen:first-child {
+  border-right: 0;
+  border-left: 1px solid var(--cortex-color-border);
+}
+.cortex-widget__container--full > .cortex-widget__screen:nth-child(2) {
+  flex: 1;
+  min-width: 0;
+}
+.cortex-widget__container--full .cortex-widget__back-btn {
+  display: none;
+}
+.cortex-widget__container--full .cortex-widget__chat-title {
+  font-size: 0.875rem;
+}
+.cortex-widget__container--full .cortex-widget__chat-header {
+  background: var(--cortex-color-surface);
+}
+.cortex-widget__container--full .cortex-message-list {
+  padding: 1.5rem 2rem;
+}
+.cortex-widget__container--full .cortex-widget__messages-skeleton {
+  padding: 1.5rem 2rem;
+}
+.cortex-widget__container--full .cortex-widget__input-area {
+  padding: 0.75rem 2rem 1.25rem;
+}
+.cortex-widget__container--full .cortex-widget__working {
+  padding: 0.5rem 2rem;
+}
+@media (max-width: 768px) {
+  .cortex-widget__container--full > .cortex-widget__screen:first-child {
+    position: fixed;
+    inset: 0;
+    width: 280px;
+    min-width: 280px;
+    z-index: 110;
+    transform: translateX(-100%);
+    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  [dir=rtl] .cortex-widget__container--full > .cortex-widget__screen:first-child {
+    transform: translateX(100%);
+    border-left: 1px solid var(--cortex-color-border);
+    border-right: 0;
+  }
+  .cortex-widget__container--full > .cortex-widget__screen:nth-child(2) {
+    flex: 1;
+    min-width: 0;
+  }
+  .cortex-widget__container--full .cortex-widget__sidebar-toggle-btn {
+    flex-shrink: 0;
+    width: 2rem;
+    height: 2rem;
+    border-radius: calc(var(--cortex-radius) * 0.75);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+    transition: color 0.15s, background-color 0.15s;
+    color: var(--cortex-color-text-secondary);
+  }
+  .cortex-widget__container--full .cortex-widget__sidebar-toggle-btn:hover {
+    color: var(--cortex-color-text-strong);
+    background: var(--cortex-color-surface-muted);
+  }
+  .cortex-widget__container--full .cortex-widget__sidebar-toggle-btn:active {
+    background: var(--cortex-color-border);
+  }
+  .cortex-widget__container--full .cortex-message-list {
+    padding: 1rem;
+  }
+  .cortex-widget__container--full .cortex-widget__messages-skeleton {
+    padding: 1rem;
+  }
+  .cortex-widget__container--full .cortex-widget__input-area {
+    padding: 0.75rem;
+  }
+  .cortex-widget__container--full .cortex-widget__working {
+    padding: 0.5rem 1rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .cortex-widget__container--full.cortex-widget__container--sidebar-open > .cortex-widget__screen:first-child {
+    transform: translateX(0);
+  }
+  .cortex-widget__container--full.cortex-widget__container--sidebar-open .cortex-widget__sidebar-backdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 100;
+    background: rgba(15, 23, 42, 0.35);
+    backdrop-filter: blur(2px);
+    animation: cortex-sidebar-backdrop-in 0.2s ease-out both;
+  }
+}
+
+@keyframes cortex-sidebar-backdrop-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.cortex-widget__threads-header {
+  flex-shrink: 0;
+  padding: 1.25rem 1.25rem 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.cortex-widget__threads-title {
+  font-family: var(--cortex-font-display, inherit);
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--cortex-color-text-heading);
+  letter-spacing: -0.01em;
+  margin: 0;
+}
+
+.cortex-widget__threads-count {
+  font-size: 0.6875rem;
+  color: var(--cortex-color-text-muted);
+  margin-top: 0.125rem;
+  margin-bottom: 0;
+}
+
+.cortex-widget__new-chat-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--cortex-color-primary-foreground);
+  background: var(--cortex-color-primary);
+  padding: 0.375rem 0.75rem;
+  border-radius: calc(var(--cortex-radius) * 0.75);
+  border: 0;
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+.cortex-widget__new-chat-btn:hover {
+  background: color-mix(in oklab, var(--cortex-color-primary) 85%, var(--cortex-color-primary-foreground));
+}
+.cortex-widget__new-chat-btn:active {
+  background: var(--cortex-color-primary);
+}
+.cortex-widget__new-chat-btn--empty-state {
+  margin-top: 0.75rem;
+}
+
+.cortex-widget__threads-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 0.75rem 0.75rem;
+}
+
+.cortex-widget__thread-skeleton {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  margin-bottom: 0.375rem;
+  border-radius: var(--cortex-radius);
+  border: 1px solid var(--cortex-color-border);
+  background: var(--cortex-color-surface);
+}
+
+.cortex-widget__thread-skeleton-icon {
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+}
+
+.cortex-widget__thread-skeleton-lines {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.cortex-widget__thread-skeleton-line {
+  height: 0.875rem;
+}
+
+.cortex-widget__thread-item {
+  width: 100%;
+  text-align: start;
+  padding: 0.75rem;
+  border-radius: var(--cortex-radius);
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  transition: background-color 0.15s, border-color 0.15s;
+  cursor: pointer;
+  margin-bottom: 0.375rem;
+  border: 1px solid var(--cortex-color-border);
+  background: var(--cortex-color-surface);
+  color: var(--cortex-color-text);
+}
+.cortex-widget__thread-item:hover {
+  background: var(--cortex-color-surface-muted);
+  border-color: var(--cortex-color-border-strong);
+}
+.cortex-widget__thread-item:active {
+  background: color-mix(in oklab, var(--cortex-color-surface-muted) 50%, var(--cortex-color-border));
+}
+.cortex-widget__thread-item--active {
+  background: color-mix(in oklab, var(--cortex-color-surface-muted) 50%, var(--cortex-color-border));
+  border-color: var(--cortex-color-border-strong);
+  color: var(--cortex-color-text-heading);
+}
+.cortex-widget__thread-item--active:hover {
+  background: var(--cortex-color-border);
+}
+.cortex-widget__thread-item--active:active {
+  background: color-mix(in oklab, var(--cortex-color-border) 50%, var(--cortex-color-border-strong));
+}
+
+.cortex-widget__thread-icon {
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  border-radius: calc(var(--cortex-radius) * 0.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  background: var(--cortex-color-accent-surface);
+  color: var(--cortex-color-accent);
+}
+[dir=rtl] .cortex-widget__thread-icon {
+  transform: scaleX(-1);
+}
+.cortex-widget__thread-icon--active {
+  background: color-mix(in oklab, var(--cortex-color-accent-surface) 85%, var(--cortex-color-accent));
+}
+
+.cortex-widget__thread-info {
+  min-width: 0;
+  flex: 1;
+}
+
+.cortex-widget__thread-title-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.cortex-widget__thread-title {
+  font-size: var(--cortex-font-size);
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.25;
+  margin: 0;
+  color: var(--cortex-color-text-strong);
+}
+.cortex-widget__thread-title--active {
+  color: var(--cortex-color-text-heading);
+  font-weight: 600;
+}
+
+.cortex-widget__thread-time {
+  font-size: 0.6875rem;
+  color: var(--cortex-color-text-muted);
+  margin-top: 0.125rem;
+  margin-bottom: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cortex-widget__thread-running {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3125rem;
+  padding: 0.2rem 0.45rem;
+  border-radius: 999px;
+  background: var(--cortex-color-success-surface);
+  color: var(--cortex-color-success);
+  font-size: 0.625rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.cortex-widget__thread-running-dot {
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: 999px;
+  background: currentColor;
+  box-shadow: 0 0 0.45rem currentColor;
+  animation: cortex-thread-running-pulse 1.4s ease-in-out infinite;
+}
+
+@keyframes cortex-thread-running-pulse {
+  0%, 100% {
+    opacity: 0.45;
+    transform: scale(0.9);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+.cortex-widget__thread-delete {
+  flex-shrink: 0;
+  opacity: 0;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: calc(var(--cortex-radius) * 0.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: opacity 0.15s;
+  background: transparent;
+  border: 0;
+  color: var(--cortex-color-text-muted);
+}
+.cortex-widget__thread-item:hover > .cortex-widget__thread-delete {
+  opacity: 1;
+}
+.cortex-widget__thread-delete:hover {
+  background: var(--cortex-color-border);
+}
+.cortex-widget__thread-delete--active {
+  color: var(--cortex-color-text-secondary);
+}
+.cortex-widget__thread-delete--active:hover {
+  color: var(--cortex-color-text);
+}
+
+.cortex-widget__thread-arrow {
+  flex-shrink: 0;
+  transition: color 0.15s;
+  color: var(--cortex-color-border-strong);
+}
+[dir=rtl] .cortex-widget__thread-arrow {
+  transform: rotate(180deg);
+}
+.cortex-widget__thread-item:hover > .cortex-widget__thread-arrow {
+  color: var(--cortex-color-text-muted);
+}
+.cortex-widget__thread-arrow--active {
+  color: var(--cortex-color-text-muted);
+}
+.cortex-widget__thread-item:hover > .cortex-widget__thread-arrow--active {
+  color: var(--cortex-color-text-secondary);
+}
+
+.cortex-widget__threads-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 4rem 0;
+  text-align: center;
+}
+
+.cortex-widget__threads-empty-icon {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--cortex-radius);
+  background: var(--cortex-color-accent-surface);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 0.75rem;
+}
+
+.cortex-widget__threads-empty-svg {
+  color: var(--cortex-color-accent);
+}
+
+.cortex-widget__threads-empty-title {
+  font-family: var(--cortex-font-display, inherit);
+  font-size: var(--cortex-font-size);
+  color: var(--cortex-color-text-muted);
+  font-weight: 500;
+  margin: 0;
+}
+
+.cortex-widget__threads-empty-subtitle {
+  font-size: 0.6875rem;
+  color: var(--cortex-color-text-muted);
+  margin-top: 0.25rem;
+  margin-bottom: 0;
+}
+
+.cortex-widget__sidebar-toggle-btn {
+  display: none;
+}
+
+.cortex-widget__sidebar-backdrop {
+  display: none;
+}
+
+.cortex-message-list {
+  height: 100%;
+  overflow-y: auto;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+}
+
+.cortex-message:empty {
+  display: none;
+}
+
+.cortex-message-parts {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.cortex-message-debug-zone {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding-top: 0.375rem;
+  margin-top: 0.125rem;
+  border-top: 1px dashed var(--cortex-color-border);
+}
+
+.cortex-message-part {
+  display: block;
+}
+.cortex-message-part:empty {
+  display: none;
+}
+
+.cortex-message-part--animated {
+  animation: cortex-part-fade-in-up 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+
+@keyframes cortex-part-fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.cortex-unhandled-type {
+  text-align: center;
+  font-size: 0.75rem;
+  color: var(--cortex-color-text-muted);
+}
+
+.cortex-text-part {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.cortex-text-part--assistant {
+  align-items: flex-start;
+}
+.cortex-text-part--user {
+  align-items: flex-end;
+}
+[dir=rtl] .cortex-text-part--assistant {
+  align-items: flex-start;
+}
+[dir=rtl] .cortex-text-part--user {
+  align-items: flex-end;
+}
+
+.cortex-text-bubble {
+  max-width: 80%;
+  font-size: var(--cortex-font-size);
+  line-height: 1.625;
+  padding: 1rem;
+  border-radius: calc(var(--cortex-radius) * 2);
+  border: 1px solid var(--cortex-color-border);
+  color: var(--cortex-color-text-strong);
+}
+.cortex-text-bubble--assistant {
+  background: var(--cortex-color-surface-muted);
+  border-bottom-left-radius: 0;
+}
+[dir=rtl] .cortex-text-bubble--assistant {
+  border-bottom-left-radius: calc(var(--cortex-radius) * 2);
+  border-bottom-right-radius: 0;
+}
+.cortex-text-bubble--user {
+  background: var(--cortex-color-user-surface);
+  border-color: var(--cortex-color-user-border);
+  border-bottom-right-radius: 0;
+}
+[dir=rtl] .cortex-text-bubble--user {
+  border-bottom-right-radius: calc(var(--cortex-radius) * 2);
+  border-bottom-left-radius: 0;
+}
+.cortex-text-bubble h1,
+.cortex-text-bubble h2,
+.cortex-text-bubble h3,
+.cortex-text-bubble h4,
+.cortex-text-bubble h5,
+.cortex-text-bubble h6 {
+  margin-top: 1.25em;
+  margin-bottom: 0.5em;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--cortex-color-text-heading);
+}
+.cortex-text-bubble h1:first-child,
+.cortex-text-bubble h2:first-child,
+.cortex-text-bubble h3:first-child,
+.cortex-text-bubble h4:first-child,
+.cortex-text-bubble h5:first-child,
+.cortex-text-bubble h6:first-child {
+  margin-top: 0;
+}
+.cortex-text-bubble h1 {
+  font-size: 1.25em;
+}
+.cortex-text-bubble h2 {
+  font-size: 1.125em;
+}
+.cortex-text-bubble h3 {
+  font-size: 1em;
+}
+.cortex-text-bubble p {
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+}
+.cortex-text-bubble p:first-child {
+  margin-top: 0;
+}
+.cortex-text-bubble p:last-child {
+  margin-bottom: 0;
+}
+.cortex-text-bubble ul,
+.cortex-text-bubble ol {
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+  padding-inline-start: 1.5em;
+}
+.cortex-text-bubble ul {
+  list-style-type: disc;
+}
+.cortex-text-bubble ol {
+  list-style-type: decimal;
+}
+.cortex-text-bubble li {
+  margin-top: 0.25em;
+  margin-bottom: 0.25em;
+}
+.cortex-text-bubble code {
+  font-family: var(--cortex-font-mono);
+  font-size: 0.875em;
+  background: var(--cortex-color-border);
+  padding: 0.125em 0.375em;
+  border-radius: calc(var(--cortex-radius) * 0.5);
+}
+.cortex-text-bubble pre {
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+  padding: 0.75em 1em;
+  background: var(--cortex-color-text-heading);
+  border-radius: var(--cortex-radius);
+  overflow-x: auto;
+  font-size: 0.8125em;
+  line-height: 1.6;
+}
+.cortex-text-bubble pre code {
+  background: transparent;
+  padding: 0;
+  color: var(--cortex-color-border);
+}
+.cortex-text-bubble blockquote {
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+  padding-inline-start: 1em;
+  border-inline-start: 3px solid var(--cortex-color-border-strong);
+  color: var(--cortex-color-text-secondary);
+  font-style: italic;
+}
+.cortex-text-bubble a {
+  color: var(--cortex-color-link);
+  text-decoration: underline;
+}
+.cortex-text-bubble a:hover {
+  color: color-mix(in oklab, var(--cortex-color-link) 80%, var(--cortex-color-text-heading));
+}
+.cortex-text-bubble table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+  font-size: 0.875em;
+}
+.cortex-text-bubble th,
+.cortex-text-bubble td {
+  border: 1px solid var(--cortex-color-border);
+  padding: 0.375em 0.75em;
+  text-align: start;
+}
+.cortex-text-bubble th {
+  background: var(--cortex-color-surface-subtle);
+  font-weight: 600;
+}
+.cortex-text-bubble hr {
+  margin-top: 1.5em;
+  margin-bottom: 1.5em;
+  border: none;
+  border-top: 1px solid var(--cortex-color-border);
+}
+.cortex-text-bubble img {
+  max-width: 100%;
+  height: auto;
+  border-radius: calc(var(--cortex-radius) * 0.75);
+}
+
+.cortex-reasoning-details {
+  width: 100%;
+  border-radius: var(--cortex-radius);
+  border: 1px solid var(--cortex-color-border);
+  background: var(--cortex-color-surface-subtle);
+  overflow: hidden;
+}
+
+.cortex-reasoning-details__summary {
+  list-style: none;
+  cursor: pointer;
+  user-select: none;
+  padding: 0.75rem 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.cortex-reasoning-details__summary::-webkit-details-marker {
+  display: none;
+}
+
+.cortex-reasoning-details__header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+  flex: 1;
+}
+
+.cortex-reasoning-details__icon {
+  display: inline-flex;
+  height: 1.5rem;
+  width: 1.5rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: calc(var(--cortex-radius) * 0.5);
+  background: var(--cortex-color-accent-surface);
+  color: var(--cortex-color-accent);
+}
+
+.cortex-reasoning-details__title-group {
+  min-width: 0;
+}
+
+.cortex-reasoning-details__title-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.cortex-reasoning-details__title {
+  font-weight: 500;
+  color: var(--cortex-color-text-strong);
+  font-size: 0.875rem;
+}
+
+.cortex-reasoning-details__badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: calc(var(--cortex-radius) * 0.5);
+  padding: 0.125rem 0.375rem;
+  font-size: 0.6875rem;
+  font-weight: 500;
+}
+.cortex-reasoning-details__badge--streaming {
+  background: light-dark(#fef3c7, #78350f);
+  color: light-dark(#b45309, #fcd34d);
+}
+.cortex-reasoning-details__badge--done {
+  background: var(--cortex-color-success-border);
+  color: var(--cortex-color-success);
+}
+
+.cortex-reasoning-details__chevron {
+  margin-inline-start: auto;
+  display: inline-flex;
+  height: 1.5rem;
+  width: 1.5rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: calc(var(--cortex-radius) * 0.5);
+  color: var(--cortex-color-text-muted);
+  transition: transform 0.2s;
+}
+details[open] > summary > .cortex-reasoning-details__chevron {
+  transform: rotate(180deg);
+}
+
+.cortex-reasoning-details__body {
+  padding: 0 1rem 1rem;
+}
+
+.cortex-reasoning-details__content {
+  margin-top: 0.25rem;
+  border-radius: calc(var(--cortex-radius) * 0.5);
+  background: var(--cortex-color-surface);
+  border: 1px solid var(--cortex-color-border);
+  padding: 0.75rem;
+}
+
+.cortex-reasoning-details__pre {
+  margin: 0;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  font-family: var(--cortex-font-mono);
+  font-size: 0.75rem;
+  line-height: 1.625;
+  color: var(--cortex-color-text-strong);
+}
+
+@keyframes cortex-aborted-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.cortex-aborted-flag {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.25rem 0;
+  animation: cortex-aborted-fade-in 0.3s ease-out both;
+  user-select: none;
+}
+
+.cortex-aborted-flag__line {
+  flex: 1;
+  height: 1px;
+  background: repeating-linear-gradient(90deg, #e2a36f 0px, #e2a36f 4px, transparent 4px, transparent 8px);
+  opacity: 0.5;
+}
+
+.cortex-aborted-flag__label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3125rem;
+  font-family: var(--cortex-font-mono);
+  font-size: 0.625rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: light-dark(#c2824a, #e2a36f);
+}
+
+.cortex-aborted-flag__icon {
+  color: light-dark(#c2824a, #e2a36f);
+  flex-shrink: 0;
+}
+
+.cortex-message-attachments {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 0.375rem;
+}
+
+.cortex-message-attachment {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  max-width: 14rem;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid var(--cortex-color-border);
+  border-radius: var(--cortex-radius);
+  background: var(--cortex-color-surface-subtle);
+  font-size: 0.75rem;
+  color: var(--cortex-color-text-strong);
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.cortex-message-attachment:hover {
+  background: var(--cortex-color-surface-muted);
+}
+
+.cortex-message-attachment__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cortex-message-attachment__icon,
+.cortex-message-attachment__dl-icon {
+  flex-shrink: 0;
+  width: 0.875rem;
+  height: 0.875rem;
+  color: var(--cortex-color-text-muted);
+}
+
+/* ─── Debug Tool Call Card ─────────────────────────────────────────── */
+.dbg-tool {
+  --_accent: var(--cortex-color-border-strong);
+  position: relative;
+  width: 100%;
+  border-radius: 10px;
+  background: var(--cortex-color-surface-subtle);
+  overflow: hidden;
+  /* Colored left accent bar */
+}
+.dbg-tool::before {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  width: 3px;
+  background: var(--_accent);
+  z-index: 1;
+  transition: background 200ms;
+}
+.dbg-tool {
+  /* State accent colors */
+}
+.dbg-tool[data-state=complete] {
+  --_accent: var(--cortex-color-success);
+}
+.dbg-tool[data-state=error] {
+  --_accent: var(--cortex-color-danger);
+}
+.dbg-tool[data-state=awaiting-input], .dbg-tool[data-state=input-streaming], .dbg-tool[data-state=input-complete] {
+  --_accent: light-dark(#d97706, #fbbf24);
+}
+.dbg-tool[data-state=approval-requested], .dbg-tool[data-state=approval-responded] {
+  --_accent: light-dark(#7c3aed, #a78bfa);
+}
+
+/* ─── Summary / Header ─────────────────────────────────────────────── */
+.dbg-tool__summary {
+  list-style: none;
+  cursor: pointer;
+  user-select: none;
+  padding: 0.625rem 0.875rem 0.625rem 1.125rem;
+}
+.dbg-tool__summary::-webkit-details-marker {
+  display: none;
+}
+
+.dbg-tool__header {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+
+.dbg-tool__meta {
+  flex: 1;
+  min-width: 0;
+}
+
+.dbg-tool__title-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.dbg-tool__name {
+  font-weight: 600;
+  font-size: 0.8125rem;
+  color: var(--cortex-color-text-heading);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  letter-spacing: -0.01em;
+}
+
+.dbg-tool__id-row {
+  margin-top: 2px;
+  font-size: 0.625rem;
+  color: var(--cortex-color-text-muted);
+  font-family: ui-monospace, "SF Mono", "Cascadia Code", monospace;
+  word-break: break-all;
+}
+
+/* ─── Status & Chevron ─────────────────────────────────────────────── */
+.dbg-tool__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  flex-shrink: 0;
+}
+
+.dbg-tool__state {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  padding: 2px 8px;
+  border-radius: 4px;
+  white-space: nowrap;
+  font-family: system-ui, -apple-system, sans-serif;
+}
+.dbg-tool__state--success {
+  color: var(--cortex-color-success);
+  background: var(--cortex-color-success-surface);
+}
+.dbg-tool__state--error {
+  color: var(--cortex-color-danger);
+  background: light-dark(#fef2f2, #450a0a);
+}
+.dbg-tool__state--approval {
+  color: light-dark(#7c3aed, #a78bfa);
+  background: light-dark(#f5f3ff, #2e1065);
+}
+.dbg-tool__state--pending {
+  color: light-dark(#b45309, #fcd34d);
+  background: light-dark(#fffbeb, #451a03);
+}
+
+.dbg-tool__pulse {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: light-dark(#d97706, #fbbf24);
+  animation: dbg-pulse 2s ease-in-out infinite;
+}
+.dbg-tool__pulse--violet {
+  background: #8b5cf6;
+}
+
+@keyframes dbg-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+  }
+}
+.dbg-tool__chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 4px;
+  color: var(--cortex-color-text-muted);
+  transition: transform 200ms;
+}
+details[open] > summary .dbg-tool__chevron {
+  transform: rotate(180deg);
+}
+
+/* ─── Body ─────────────────────────────────────────────────────────── */
+.dbg-tool__body {
+  padding: 0 0.875rem 0.75rem 1.125rem;
+}
+
+/* ─── Sections (flat, divided by thin rules) ───────────────────────── */
+.dbg-tool__section:not(:first-child) {
+  border-top: 1px solid var(--cortex-color-border);
+  padding-top: 0.625rem;
+  margin-top: 0.625rem;
+}
+
+.dbg-tool__section-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin-bottom: 0.375rem;
+}
+
+.dbg-tool__section-label {
+  font-size: 0.625rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--cortex-color-text-muted);
+  font-family: system-ui, -apple-system, sans-serif;
+}
+.dbg-tool__section-label--success {
+  color: var(--cortex-color-success);
+}
+.dbg-tool__section-label--error {
+  color: var(--cortex-color-danger);
+}
+.dbg-tool__section-label--approval {
+  color: light-dark(#7c3aed, #a78bfa);
+}
+
+.dbg-tool__section-lang {
+  font-size: 0.5625rem;
+  color: var(--cortex-color-border-strong);
+  font-family: ui-monospace, "SF Mono", monospace;
+  text-transform: lowercase;
+}
+
+/* ─── Content containers ───────────────────────────────────────────── */
+.dbg-tool__pre {
+  margin: 0;
+  max-height: 20rem;
+  overflow: auto;
+  padding: 0.625rem 0.75rem;
+  border-radius: 6px;
+  background: var(--cortex-color-surface);
+  font-size: 0.75rem;
+  line-height: 1.3rem;
+  font-family: ui-monospace, "SF Mono", "Cascadia Code", monospace;
+  white-space: pre;
+  overflow-wrap: break-word;
+}
+
+.dbg-tool__tree {
+  max-height: 16rem;
+  overflow: auto;
+  padding: 0.625rem 0.75rem;
+  border-radius: 6px;
+  background: var(--cortex-color-surface);
+}
+
+.dbg-tool__error-pre {
+  margin: 0;
+  max-height: 16rem;
+  overflow: auto;
+  padding: 0.625rem 0.75rem;
+  border-radius: 6px;
+  background: light-dark(#fef2f2, #450a0a);
+  color: light-dark(#991b1b, #fca5a5);
+  font-size: 0.75rem;
+  line-height: 1.3rem;
+  font-family: ui-monospace, "SF Mono", "Cascadia Code", monospace;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.dbg-tool__message {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+  color: var(--cortex-color-text-secondary);
+  border-radius: 6px;
+  background: var(--cortex-color-surface);
+}
+.dbg-tool__message--approval {
+  color: light-dark(#5b21b6, #c4b5fd);
+  background: light-dark(#faf5ff, #3b0764);
+}
+
+/* ─── Section variants ─────────────────────────────────────────────── */
+.dbg-tool__section--success .dbg-tool__tree {
+  background: light-dark(#f0fdf4, #052e16);
+}
+
+.dbg-tool__section--error .dbg-tool__tree {
+  background: light-dark(#fef2f2, #450a0a);
+}
+
+.cortex-tool-call-animated {
+  display: block;
+}
+
+.cortex-tool-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0;
+  max-width: 100%;
+}
+
+.cortex-tool-pill__icon {
+  position: relative;
+  width: 0.75rem;
+  height: 0.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.cortex-tool-pill__spinner {
+  position: absolute;
+  width: 0.625rem;
+  height: 0.625rem;
+  border: 1.5px solid var(--cortex-color-border-strong);
+  border-top-color: var(--cortex-color-text-muted);
+  border-radius: 9999px;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+.cortex-tool-pill__spinner--visible {
+  opacity: 1;
+  animation: cortex-tool-spin 0.8s linear infinite;
+}
+
+@keyframes cortex-tool-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.cortex-tool-pill__svg {
+  position: absolute;
+  width: 0.75rem;
+  height: 0.75rem;
+  opacity: 0;
+  transform: scale(0.6);
+  transition: opacity 0.2s, transform 0.2s;
+}
+.cortex-tool-pill__svg--visible {
+  opacity: 1;
+  transform: scale(1);
+}
+.cortex-tool-pill__svg--check {
+  color: var(--cortex-color-success);
+}
+.cortex-tool-pill__svg--error {
+  color: var(--cortex-color-danger);
+}
+
+.cortex-tool-pill__title {
+  font-size: 0.75rem;
+  color: var(--cortex-color-text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: color 0.3s;
+}
+.cortex-tool-pill__title--error {
+  color: var(--cortex-color-danger);
+}
+
+.cortex-reasoning-animated {
+  display: block;
+}
+
+.cortex-subtle-activity {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0;
+  width: fit-content;
+}
+
+.cortex-subtle-activity__dots {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+
+.cortex-subtle-activity__dot {
+  width: 3px;
+  height: 3px;
+  border-radius: 9999px;
+  background: var(--cortex-color-accent);
+  animation: cortex-subtle-dot-pulse 1.4s ease-in-out infinite;
+}
+.cortex-subtle-activity__dot--d1 {
+  animation-delay: 200ms;
+}
+.cortex-subtle-activity__dot--d2 {
+  animation-delay: 400ms;
+}
+
+@keyframes cortex-subtle-dot-pulse {
+  0%, 100% {
+    opacity: 0.3;
+    transform: scale(0.8);
+  }
+  40% {
+    opacity: 1;
+    transform: scale(1.3);
+  }
+}
+.cortex-subtle-activity__label-mask {
+  overflow: hidden;
+  position: relative;
+  height: 1.1em;
+}
+
+.cortex-subtle-activity__label {
+  display: block;
+  font-size: 0.75rem;
+  color: var(--cortex-color-text-muted);
+  white-space: nowrap;
+  line-height: 1.1em;
+}
+
+.cortex-subtle-activity__label--idle,
+.cortex-subtle-activity__label--entering {
+  opacity: 1;
+  transform: translateY(0);
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.cortex-subtle-activity__label--exiting {
+  opacity: 0;
+  transform: translateY(-6px);
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.cortex-subtle-activity__label--enter-start {
+  opacity: 0;
+  transform: translateY(6px);
+  transition: none;
+}
+
+.cortex-attachment-queue {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  margin-bottom: 0.5rem;
+}
+
+.cortex-attachment-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  max-width: 14rem;
+  padding-block: 0.25rem;
+  padding-inline: 0.5rem 0.375rem;
+  border: 1px solid var(--cortex-color-border);
+  border-radius: var(--cortex-radius);
+  background: var(--cortex-color-surface-subtle);
+  font-size: 0.75rem;
+  color: var(--cortex-color-text-strong);
+}
+.cortex-attachment-chip--error {
+  border-color: var(--cortex-color-danger-border);
+  background: var(--cortex-color-danger-surface);
+  color: var(--cortex-color-danger);
+}
+
+.cortex-attachment-chip__icon,
+.cortex-attachment-chip__spinner {
+  flex-shrink: 0;
+  width: 0.875rem;
+  height: 0.875rem;
+  color: var(--cortex-color-text-muted);
+}
+
+.cortex-attachment-chip__spinner {
+  animation: cortex-attachment-spin 0.8s linear infinite;
+}
+
+.cortex-attachment-chip__spinner-track {
+  opacity: 0.25;
+}
+
+@keyframes cortex-attachment-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.cortex-attachment-chip__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cortex-attachment-chip__remove {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  padding: 0;
+  border: 0;
+  border-radius: 3px;
+  background: transparent;
+  color: currentColor;
+  opacity: 0.6;
+  cursor: pointer;
+}
+.cortex-attachment-chip__remove:hover {
+  opacity: 1;
+  background: var(--cortex-color-hover);
+}
+.cortex-attachment-chip__remove svg {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+/* ─── Token Usage Component ────────────────────────────────────────── */
+.cortex-token-usage {
+  direction: ltr;
+  display: flex;
+  flex-direction: column;
+  margin-top: 0.375rem;
+  font-family: var(--cortex-font-mono);
+  font-size: 0.6875rem;
+  line-height: 1.4;
+  color: var(--cortex-color-text-muted);
+  user-select: none;
+}
+
+/* ─── Summary row ──────────────────────────────────────────────────── */
+html[dir=rtl] .cortex-token-usage__summary {
+  align-self: end;
+}
+html[dir=ltr] .cortex-token-usage__summary {
+  align-self: start;
+}
+.cortex-token-usage__summary {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.3125rem 0.625rem;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  cursor: pointer;
+  transition: background 150ms ease, border-color 150ms ease;
+  font: inherit;
+  color: inherit;
+  letter-spacing: 0.01em;
+}
+.cortex-token-usage__summary:hover {
+  background: var(--cortex-color-surface-subtle);
+  border-color: var(--cortex-color-border);
+}
+
+.cortex-token-usage__total-number {
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--cortex-color-text-secondary);
+}
+
+.cortex-token-usage__total-label {
+  margin-inline-start: 3px;
+  color: var(--cortex-color-text-muted);
+  font-weight: 400;
+  letter-spacing: 0.03em;
+}
+
+.cortex-token-usage__model {
+  color: var(--cortex-color-border-strong);
+  font-weight: 400;
+  font-size: 0.5625rem;
+  letter-spacing: 0.02em;
+}
+
+/* ─── Inline pills ─────────────────────────────────────────────────── */
+.cortex-token-usage__pills {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.cortex-token-usage__pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-variant-numeric: tabular-nums;
+  color: var(--cortex-color-text-muted);
+}
+
+.cortex-token-usage__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.cortex-token-usage__dot--input {
+  background: light-dark(#ea580c, #fb923c);
+  box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.1);
+}
+.cortex-token-usage__dot--output {
+  background: light-dark(#4f46e5, #818cf8);
+  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
+}
+
+/* ─── Cache badge (summary) ────────────────────────────────────────── */
+.cortex-token-usage__cache-badge {
+  font-size: 0.5625rem;
+  font-weight: 600;
+  color: var(--cortex-color-success);
+  background: var(--cortex-color-success-surface);
+  padding: 1px 6px;
+  border-radius: 3px;
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+/* ─── Chevron ──────────────────────────────────────────────────────── */
+.cortex-token-usage__chevron {
+  color: var(--cortex-color-border-strong);
+  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  flex-shrink: 0;
+}
+
+.cortex-token-usage--expanded .cortex-token-usage__chevron {
+  transform: rotate(180deg);
+}
+
+/* ─── Expandable detail panel ──────────────────────────────────────── */
+.cortex-token-usage__details {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease, margin 200ms ease;
+  opacity: 0;
+  margin-top: 0;
+}
+
+.cortex-token-usage__details-inner {
+  overflow: hidden;
+}
+
+.cortex-token-usage--expanded .cortex-token-usage__details {
+  grid-template-rows: 1fr;
+  opacity: 1;
+  margin-top: 0.375rem;
+}
+
+/* ─── Two-column layout ────────────────────────────────────────────── */
+.cortex-token-usage__columns {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1px;
+  background: var(--cortex-color-border);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.cortex-token-usage__col {
+  background: var(--cortex-color-surface-subtle);
+  padding: 0.5rem 0.625rem;
+}
+
+.cortex-token-usage__col-header {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin-bottom: 0.375rem;
+}
+
+.cortex-token-usage__col-label {
+  font-weight: 600;
+  font-size: 0.5625rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--cortex-color-text-secondary);
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+.cortex-token-usage__col-total {
+  margin-inline-start: auto;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  color: var(--cortex-color-text-secondary);
+}
+
+/* ─── Data rows ────────────────────────────────────────────────────── */
+.cortex-token-usage__rows {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.cortex-token-usage__row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  padding: 2px 0;
+  padding-inline-start: calc(6px + 0.375rem);
+}
+
+.cortex-token-usage__row-label {
+  color: var(--cortex-color-text-muted);
+  font-size: 0.625rem;
+}
+
+.cortex-token-usage__row-value {
+  font-variant-numeric: tabular-nums;
+  color: var(--cortex-color-text-secondary);
+  font-weight: 500;
+}
+
+/* ─── Cache ratio bar ──────────────────────────────────────────────── */
+.cortex-token-usage__cache-bar-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+  padding-inline-start: calc(6px + 0.375rem);
+}
+
+.cortex-token-usage__cache-bar {
+  flex: 1;
+  height: 3px;
+  border-radius: 2px;
+  background: var(--cortex-color-border);
+  overflow: hidden;
+}
+
+.cortex-token-usage__cache-fill {
+  height: 100%;
+  border-radius: 2px;
+  background: linear-gradient(90deg, #10b981, var(--cortex-color-success));
+  transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.cortex-token-usage__cache-label {
+  font-size: 0.5625rem;
+  font-weight: 600;
+  color: var(--cortex-color-success);
+  white-space: nowrap;
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+/* ─── LLM Inspector ────────────────────────────────────────────────── */
+.cortex-llm-inspector {
+  direction: ltr;
+  display: flex;
+  flex-direction: column;
+  margin-top: 0.375rem;
+  font-family: var(--cortex-font-mono);
+  font-size: 0.6875rem;
+  line-height: 1.4;
+  color: var(--cortex-color-text-muted);
+  user-select: none;
+}
+
+/* ─── Trigger button ───────────────────────────────────────────────── */
+html[dir=rtl] .cortex-llm-inspector__trigger {
+  align-self: end;
+}
+html[dir=ltr] .cortex-llm-inspector__trigger {
+  align-self: start;
+}
+.cortex-llm-inspector__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.3125rem 0.625rem;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  cursor: pointer;
+  transition: background 150ms ease, border-color 150ms ease;
+  font: inherit;
+  color: inherit;
+  letter-spacing: 0.01em;
+}
+.cortex-llm-inspector__trigger:hover {
+  background: var(--cortex-color-surface-subtle);
+  border-color: var(--cortex-color-border);
+}
+
+.cortex-llm-inspector__icon {
+  color: var(--cortex-color-text-muted);
+  flex-shrink: 0;
+}
+
+.cortex-llm-inspector__loading {
+  color: var(--cortex-color-border-strong);
+  font-style: italic;
+}
+
+.cortex-llm-inspector__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.35rem;
+  border-radius: 9999px;
+  background: var(--cortex-color-border);
+  color: var(--cortex-color-text-secondary);
+  font-size: 0.5625rem;
+  font-weight: 700;
+}
+
+.cortex-llm-inspector__chevron {
+  color: var(--cortex-color-border-strong);
+  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  flex-shrink: 0;
+}
+
+.cortex-llm-inspector--open .cortex-llm-inspector__chevron {
+  transform: rotate(180deg);
+}
+
+/* ─── Expandable panel wrapper ─────────────────────────────────────── */
+.cortex-llm-inspector__panel-wrapper {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease, margin 200ms ease;
+  opacity: 0;
+  margin-top: 0;
+}
+
+.cortex-llm-inspector__panel-inner {
+  overflow: hidden;
+}
+
+.cortex-llm-inspector--open .cortex-llm-inspector__panel-wrapper {
+  grid-template-rows: 1fr;
+  opacity: 1;
+  margin-top: 0.375rem;
+}
+
+/* ─── Panel ────────────────────────────────────────────────────────── */
+.cortex-llm-inspector__panel {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.cortex-llm-inspector__empty {
+  padding: 0.625rem;
+  color: var(--cortex-color-text-muted);
+  font-style: italic;
+}
+
+/* ─── Step card ────────────────────────────────────────────────────── */
+.cortex-llm-inspector__step {
+  border-radius: 8px;
+  background: var(--cortex-color-surface-subtle);
+  overflow: hidden;
+  transition: box-shadow 200ms ease;
+}
+.cortex-llm-inspector__step--expanded {
+  box-shadow: 0 0 0 1px var(--cortex-color-border);
+}
+
+.cortex-llm-inspector__step-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.5rem 0.625rem;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  text-align: start;
+  transition: background 150ms ease;
+}
+.cortex-llm-inspector__step-header:hover {
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.cortex-llm-inspector__step-label {
+  font-weight: 600;
+  color: var(--cortex-color-text-secondary);
+  white-space: nowrap;
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+.cortex-llm-inspector__step-metrics {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+  margin-inline-start: auto;
+  font-variant-numeric: tabular-nums;
+}
+
+.cortex-llm-inspector__metric {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+}
+
+.cortex-llm-inspector__dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.cortex-llm-inspector__dot--input {
+  background: light-dark(#ea580c, #fb923c);
+  box-shadow: 0 0 0 1.5px rgba(234, 88, 12, 0.12);
+}
+.cortex-llm-inspector__dot--output {
+  background: light-dark(#4f46e5, #818cf8);
+  box-shadow: 0 0 0 1.5px rgba(79, 70, 229, 0.12);
+}
+
+.cortex-llm-inspector__cache-pct {
+  font-size: 0.5625rem;
+  font-weight: 600;
+  color: var(--cortex-color-success);
+  background: var(--cortex-color-success-surface);
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+.cortex-llm-inspector__step-chevron {
+  color: var(--cortex-color-border-strong);
+  transition: transform 200ms ease;
+  flex-shrink: 0;
+}
+
+.cortex-llm-inspector__step--expanded .cortex-llm-inspector__step-chevron {
+  transform: rotate(180deg);
+}
+
+/* ─── Step body (expandable) ───────────────────────────────────────── */
+.cortex-llm-inspector__step-body-wrapper {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease;
+  opacity: 0;
+}
+
+.cortex-llm-inspector__step-body-inner {
+  overflow: hidden;
+}
+
+.cortex-llm-inspector__step--expanded .cortex-llm-inspector__step-body-wrapper {
+  grid-template-rows: 1fr;
+  opacity: 1;
+}
+
+.cortex-llm-inspector__step-body {
+  padding: 0 0.625rem 0.625rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* ─── Usage rows (compact, replaces 4x2 grid) ─────────────────────── */
+.cortex-llm-inspector__usage-rows {
+  display: flex;
+  flex-direction: column;
+  border-radius: 6px;
+  overflow: hidden;
+  background: var(--cortex-color-border);
+  gap: 1px;
+}
+
+.cortex-llm-inspector__usage-row {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  padding: 0.375rem 0.625rem;
+  background: var(--cortex-color-surface);
+  flex-wrap: wrap;
+}
+
+.cortex-llm-inspector__usage-row--total {
+  background: light-dark(#fafbfc, #141414);
+}
+
+.cortex-llm-inspector__usage-lbl {
+  font-size: 0.5625rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--cortex-color-text-muted);
+  font-weight: 600;
+  width: 3.25rem;
+  flex-shrink: 0;
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+.cortex-llm-inspector__usage-val {
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  color: var(--cortex-color-text-secondary);
+  min-width: 3rem;
+}
+
+.cortex-llm-inspector__usage-row--total .cortex-llm-inspector__usage-val {
+  font-weight: 700;
+  color: var(--cortex-color-text-heading);
+}
+
+.cortex-llm-inspector__usage-detail {
+  color: var(--cortex-color-border-strong);
+  font-size: 0.5625rem;
+  margin-inline-start: auto;
+}
+
+/* ─── Tabs (underline style) ───────────────────────────────────────── */
+.cortex-llm-inspector__tabs {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid var(--cortex-color-border);
+}
+
+.cortex-llm-inspector__tab {
+  padding: 0.375rem 0.75rem;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  color: var(--cortex-color-text-muted);
+  font-weight: 500;
+  position: relative;
+  transition: color 150ms ease;
+  font-family: system-ui, -apple-system, sans-serif;
+}
+.cortex-llm-inspector__tab:hover {
+  color: var(--cortex-color-text-secondary);
+}
+.cortex-llm-inspector__tab--active {
+  color: var(--cortex-color-text-heading);
+  font-weight: 600;
+}
+.cortex-llm-inspector__tab--active::after {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  bottom: -1px;
+  height: 2px;
+  background: var(--cortex-color-text-heading);
+  border-radius: 1px 1px 0 0;
+}
+
+/* ─── JSON pane ────────────────────────────────────────────────────── */
+.cortex-llm-inspector__json-pane {
+  position: relative;
+  max-height: 24rem;
+  overflow: auto;
+  padding: 0.625rem;
+  background: var(--cortex-color-surface);
+  border-radius: 6px;
+}
+
+.cortex-llm-inspector__json-copy {
+  position: sticky;
+  top: 0;
+  float: inline-end;
+  z-index: 1;
+}
+
+.cortex-json-tree {
+  display: block;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  user-select: text;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.jt-indent {
+  padding-inline-start: 1.25em;
+  border-inline-start: 1px solid var(--cortex-color-border);
+  margin-inline-start: 0.3em;
+}
+
+.jt-line {
+  position: relative;
+}
+
+.jt-toggle {
+  cursor: pointer;
+  user-select: none;
+}
+.jt-toggle:hover .jt-arrow {
+  color: var(--cortex-color-text);
+}
+
+.jt-arrow {
+  display: inline-block;
+  width: 1em;
+  text-align: center;
+  color: var(--cortex-color-text-muted);
+  font-size: 0.525rem;
+  transition: transform 0.15s ease;
+  vertical-align: middle;
+}
+.jt-arrow--collapsed {
+  transform: rotate(-90deg);
+}
+
+.jt-bracket {
+  color: var(--cortex-color-text-secondary);
+}
+
+.jt-key {
+  color: light-dark(#6366f1, #818cf8);
+}
+
+.jt-colon {
+  color: var(--cortex-color-text-secondary);
+}
+
+.jt-comma {
+  color: var(--cortex-color-text-muted);
+}
+
+.jt-string {
+  color: var(--cortex-color-success);
+}
+
+.jt-number {
+  color: light-dark(#2563eb, #60a5fa);
+}
+
+.jt-boolean {
+  color: light-dark(#d97706, #fbbf24);
+}
+
+.jt-null {
+  color: var(--cortex-color-text-muted);
+  font-style: italic;
+}
+
+.jt-collapsed-hint {
+  display: inline-block;
+  padding: 0 0.4em;
+  margin: 0 0.15em;
+  font-size: 0.625rem;
+  line-height: 1.5;
+  color: var(--cortex-color-text-muted);
+  background: var(--cortex-color-surface-subtle);
+  border: 1px solid var(--cortex-color-border);
+  border-radius: 3px;
+  font-style: italic;
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+}
+.jt-collapsed-hint:hover {
+  color: var(--cortex-color-text-secondary);
+  border-color: var(--cortex-color-border-strong);
+  background: var(--cortex-color-surface-muted);
+}
+
+.cortex-copy-btn {
+  display: inline-flex;
+  align-items: center;
+}
+
+.cortex-copy-btn__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.375rem;
+  height: 1.375rem;
+  padding: 0;
+  border: none;
+  border-radius: 3px;
+  background: transparent;
+  color: var(--cortex-color-text-muted);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 150ms ease, color 150ms ease, background 150ms ease;
+}
+:hover > cortex-copy-button .cortex-copy-btn__button, :hover > .cortex-copy-btn .cortex-copy-btn__button, .cortex-copy-btn__button:hover, .cortex-copy-btn__button:focus-visible {
+  opacity: 1;
+}
+.cortex-copy-btn__button:hover {
+  background: var(--cortex-color-hover);
+  color: var(--cortex-color-text);
+}
+.cortex-copy-btn__button--copied {
+  opacity: 1;
+  color: var(--cortex-color-success);
+  pointer-events: none;
+}
+.cortex-copy-btn__button--copied:hover {
+  color: var(--cortex-color-success);
+  background: transparent;
+}
+
+.cortex-copy-btn__icon {
+  flex-shrink: 0;
+}
+.cortex-copy-btn__icon--check {
+  animation: cortex-copy-pop 250ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+}
+
+@keyframes cortex-copy-pop {
+  0% {
+    transform: scale(0.6);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .cortex-widget *,
+  .cortex-widget *::before,
+  .cortex-widget *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}