/* LLM Panel Styles */

.llm-panel {
  --llm-font-scale: 1;
  --llm-fs-10: calc(10px * var(--llm-font-scale));
  --llm-fs-11: calc(11px * var(--llm-font-scale));
  --llm-fs-12: calc(12px * var(--llm-font-scale));
  --llm-fs-13: calc(13px * var(--llm-font-scale));
  --llm-fs-14: calc(14px * var(--llm-font-scale));
  --llm-fs-16: calc(16px * var(--llm-font-scale));
  --llm-fs-32: calc(32px * var(--llm-font-scale));
  --llm-message-line-height: 1.5;
  --llm-message-paragraph-spacing: 8px;
  --llm-message-word-spacing: 0px;
  --llm-message-font-family: inherit;
  --llm-screenshot-thumb-size: 56px;
  --llm-file-card-min-width: 184px;
  --llm-context-icon-text-color: var(--color-accent, #3584e4);
  --llm-context-icon-image-color: #06b6d4;
  --llm-context-icon-collection-color: #f59e0b;
  --llm-context-icon-tag-color: #14b8a6;
  --llm-context-icon-note-color: #eab308;
  --llm-context-icon-file-color: #64748b;
  --llm-context-icon-model-color: #a855f7;
  --llm-pin-border-color: color-mix(
    in srgb,
    var(--color-accent) 55%,
    var(--stroke-secondary)
  );
  --llm-pin-bg: color-mix(in srgb, var(--color-accent) 10%, transparent);
  --llm-mineru-color: #10b981;
  --llm-mineru-border-color: color-mix(
    in srgb,
    #10b981 55%,
    var(--stroke-secondary)
  );
  --llm-mineru-bg: color-mix(in srgb, #10b981 10%, transparent);
  --llm-pdf-color: #8b5cf6;
  --llm-pdf-border-color: color-mix(
    in srgb,
    #8b5cf6 55%,
    var(--stroke-secondary)
  );
  --llm-pdf-bg: color-mix(in srgb, #8b5cf6 10%, transparent);
  /* Shared design tokens for interactive "user-action required" surfaces
     (HITL review cards, progress cards, assignment rows, diff previews,
     launch forms). Using tokens here keeps the aesthetic consistent across
     every card that asks the user to do something. */
  --llm-action-surface-bg: color-mix(
    in srgb,
    var(--fill-quinary, var(--fill-quaternary)) 88%,
    transparent
  );
  --llm-action-surface-bg-strong: var(
    --material-sidepane,
    var(--material-background, rgba(120, 120, 120, 0.04))
  );
  --llm-action-surface-border: 1px solid
    var(--stroke-secondary, rgba(120, 120, 120, 0.22));
  --llm-action-surface-radius: 10px;
  --llm-action-surface-padding: 12px 14px;
  --llm-action-title-size: var(--llm-fs-13);
  --llm-action-title-weight: 600;
  --llm-action-label-size: var(--llm-fs-10);
  --llm-action-label-letter-spacing: 0.04em;
  --llm-codeblock-bg: color-mix(
    in srgb,
    var(--material-background, #ffffff) 92%,
    var(--fill-primary, #111827) 8%
  );
  --llm-codeblock-border: color-mix(
    in srgb,
    var(--stroke-secondary, rgba(120, 120, 120, 0.3)) 86%,
    transparent
  );
  --llm-codeblock-header-text: var(--fill-secondary, #4b5563);
  --llm-codeblock-copy: var(--fill-secondary, #4b5563);
  --llm-codeblock-copy-hover: var(--fill-primary, #111827);
  --llm-codeblock-text: var(--fill-primary, #1f2937);
  --llm-codeblock-comment: color-mix(
    in srgb,
    var(--fill-secondary, #64748b) 88%,
    transparent
  );
  --llm-codeblock-keyword: color-mix(
    in srgb,
    #8b5cf6 78%,
    var(--fill-primary, #111827) 22%
  );
  --llm-codeblock-title: color-mix(
    in srgb,
    #0ea5e9 78%,
    var(--fill-primary, #111827) 22%
  );
  --llm-codeblock-string: color-mix(
    in srgb,
    #10b981 78%,
    var(--fill-primary, #111827) 22%
  );
  --llm-codeblock-number: color-mix(
    in srgb,
    #f59e0b 78%,
    var(--fill-primary, #111827) 22%
  );
  --llm-codeblock-meta: color-mix(
    in srgb,
    #f43f5e 78%,
    var(--fill-primary, #111827) 22%
  );
  --llm-mermaid-canvas-bg: var(--material-background, #ffffff);
  --llm-mermaid-canvas-border: color-mix(
    in srgb,
    var(--stroke-secondary, rgba(120, 120, 120, 0.28)) 80%,
    transparent
  );
  --llm-mermaid-button-bg: transparent;
  --llm-mermaid-button-text: var(--fill-secondary, #4b5563);
  --llm-mermaid-button-border: transparent;
  --llm-mermaid-button-hover-bg: color-mix(
    in srgb,
    var(--fill-secondary, #4b5563) 12%,
    transparent
  );
  --llm-mermaid-button-hover-border: transparent;
  --llm-mermaid-viewer-backdrop: rgba(15, 23, 42, 0.64);
  --llm-mermaid-viewer-panel-bg: var(--llm-mermaid-canvas-bg);
  --llm-mermaid-viewer-toolbar-bg: transparent;
  --llm-mermaid-viewer-toolbar-border: transparent;
  --llm-mermaid-viewer-zoom-text: var(--fill-secondary, #4b5563);
  --llm-popup-surface-bg: color-mix(
    in srgb,
    var(--material-sidepane, var(--material-background, #ffffff)) 94%,
    black 6%
  );
  --llm-popup-surface-border: var(
    --stroke-secondary,
    rgba(120, 120, 120, 0.26)
  );
  --llm-popup-overlay-bg: rgba(0, 0, 0, 0.22);
  --llm-history-paper-chip-text: #1d4ed8;
  --llm-history-paper-chip-bg: rgba(59, 130, 246, 0.12);
  --llm-history-library-chip-text: #b45309;
  --llm-history-library-chip-bg: rgba(249, 115, 22, 0.12);
  --llm-history-orphan-chip-text: #b91c1c;
  --llm-history-orphan-chip-bg: rgba(239, 68, 68, 0.12);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--llm-fs-12);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  contain: inline-size;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  overflow-anchor: none;
  position: relative;
  padding: 2px;
  box-sizing: border-box;
  color: var(--fill-primary);
  background: var(--material-sidepane);
}

.llm-panel:focus,
.llm-panel:focus-visible,
.llm-panel:-moz-focusring {
  outline: none !important;
  box-shadow: none !important;
}

.window-is-dark .llm-panel,
:root[lwtheme-brighttext] .llm-panel,
:root[sizemode][lwtheme-brighttext] .llm-panel {
  --llm-codeblock-bg: #202020;
  --llm-codeblock-border: color-mix(in srgb, #fff 8%, transparent);
  --llm-codeblock-header-text: #d4d4d8;
  --llm-codeblock-copy: #d4d4d8;
  --llm-codeblock-copy-hover: #ffffff;
  --llm-codeblock-text: #f4f4f5;
  --llm-codeblock-comment: #a1a1aa;
  --llm-codeblock-keyword: #f0abfc;
  --llm-codeblock-title: #67e8f9;
  --llm-codeblock-string: #86efac;
  --llm-codeblock-number: #fde68a;
  --llm-codeblock-meta: #fda4af;
  --llm-mermaid-canvas-bg: #151515;
  --llm-mermaid-canvas-border: rgba(255, 255, 255, 0.12);
  --llm-mermaid-button-bg: transparent;
  --llm-mermaid-button-text: #d4d4d8;
  --llm-mermaid-button-border: transparent;
  --llm-mermaid-button-hover-bg: rgba(255, 255, 255, 0.1);
  --llm-mermaid-button-hover-border: transparent;
  --llm-mermaid-viewer-backdrop: rgba(0, 0, 0, 0.72);
  --llm-mermaid-viewer-panel-bg: #151515;
  --llm-mermaid-viewer-toolbar-bg: transparent;
  --llm-mermaid-viewer-toolbar-border: transparent;
  --llm-mermaid-viewer-zoom-text: #d4d4d8;
  --llm-popup-surface-bg: color-mix(
    in srgb,
    var(--material-sidepane, var(--material-background, #202020)) 92%,
    black 8%
  );
  --llm-popup-surface-border: rgba(255, 255, 255, 0.12);
  --llm-popup-overlay-bg: rgba(0, 0, 0, 0.48);
  --llm-history-paper-chip-text: #93c5fd;
  --llm-history-paper-chip-bg: rgba(59, 130, 246, 0.15);
  --llm-history-library-chip-text: #fdba74;
  --llm-history-library-chip-bg: rgba(249, 115, 22, 0.15);
  --llm-history-orphan-chip-text: #fca5a5;
  --llm-history-orphan-chip-bg: rgba(239, 68, 68, 0.16);
}

.window-is-dark .llm-mermaid-viewer,
:root[lwtheme-brighttext] .llm-mermaid-viewer,
:root[sizemode][lwtheme-brighttext] .llm-mermaid-viewer,
.llm-mermaid-theme-dark {
  --llm-mermaid-canvas-bg: #151515;
  --llm-mermaid-canvas-border: rgba(255, 255, 255, 0.12);
  --llm-mermaid-button-bg: transparent;
  --llm-mermaid-button-text: #d4d4d8;
  --llm-mermaid-button-border: transparent;
  --llm-mermaid-button-hover-bg: rgba(255, 255, 255, 0.1);
  --llm-mermaid-button-hover-border: transparent;
  --llm-mermaid-viewer-backdrop: rgba(0, 0, 0, 0.72);
  --llm-mermaid-viewer-panel-bg: #151515;
  --llm-mermaid-viewer-toolbar-bg: transparent;
  --llm-mermaid-viewer-toolbar-border: transparent;
  --llm-mermaid-viewer-zoom-text: #d4d4d8;
}

.llm-mermaid-theme-light {
  --llm-mermaid-canvas-bg: #ffffff;
  --llm-mermaid-canvas-border: rgba(148, 163, 184, 0.42);
  --llm-mermaid-button-bg: transparent;
  --llm-mermaid-button-text: #4b5563;
  --llm-mermaid-button-border: transparent;
  --llm-mermaid-button-hover-bg: rgba(15, 23, 42, 0.08);
  --llm-mermaid-button-hover-border: transparent;
  --llm-mermaid-viewer-backdrop: rgba(15, 23, 42, 0.22);
  --llm-mermaid-viewer-panel-bg: #ffffff;
  --llm-mermaid-viewer-toolbar-bg: transparent;
  --llm-mermaid-viewer-toolbar-border: transparent;
  --llm-mermaid-viewer-zoom-text: #4b5563;
}

/* Header */
.llm-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.llm-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.llm-header-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.llm-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.llm-header-icon {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  flex-shrink: 0;
}

.llm-title {
  font-size: var(--llm-fs-14);
  font-weight: 600;
  color: var(--fill-primary);
}

.llm-history-bar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px;
  min-height: 22px;
}

.llm-claude-context-gauge {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--stroke-secondary) 80%, transparent);
  background: transparent;
  position: relative;
  flex: 0 0 auto;
  display: none;
}

.llm-claude-context-gauge::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  background: var(--material-background);
  pointer-events: none;
}

.llm-claude-context-gauge[data-warning="true"] {
  border-color: #f39c12;
}

.llm-history-new,
.llm-history-toggle {
  appearance: none;
  -moz-appearance: none;
  border: none;
  background: transparent;
  color: var(--fill-primary);
  font: inherit;
  font-size: var(--llm-fs-12);
  line-height: 1.2;
  border-radius: 0;
  min-height: 22px;
  padding: 0;
  cursor: pointer;
}

.llm-history-new {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  font-size: 0;
  line-height: 0;
}

.llm-history-new::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  mask-image: url("icons/action-history-new.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("icons/action-history-new.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  pointer-events: none;
}

.llm-history-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  font-size: 0;
  line-height: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.llm-history-toggle::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  mask-image: url("icons/action-history-clock.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("icons/action-history-clock.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  pointer-events: none;
}

.llm-history-new-menu {
  position: absolute;
  z-index: 14;
  display: none;
  flex-direction: column;
  gap: 2px;
  min-width: 148px;
  background: color-mix(in srgb, var(--material-background) 94%, black 6%);
  border: 1px solid var(--stroke-secondary);
  border-radius: calc(8px * var(--llm-font-scale, 1));
  padding: calc(4px * var(--llm-font-scale, 1));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.llm-history-row-menu {
  position: absolute;
  z-index: 14;
  display: none;
  flex-direction: column;
  gap: 2px;
  min-width: 112px;
  background: color-mix(in srgb, var(--material-background) 94%, black 6%);
  border: 1px solid var(--stroke-secondary);
  border-radius: calc(8px * var(--llm-font-scale, 1));
  padding: calc(4px * var(--llm-font-scale, 1));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.llm-history-new-menu-item,
.llm-history-row-menu-item {
  appearance: none;
  -moz-appearance: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: none;
  background: transparent;
  color: var(--fill-primary);
  border-radius: calc(5px * var(--llm-font-scale, 1));
  font: inherit;
  font-size: var(--llm-fs-11);
  line-height: 1.25;
  min-height: calc(24px * var(--llm-font-scale, 1));
  padding: calc(4px * var(--llm-font-scale, 1))
    calc(8px * var(--llm-font-scale, 1));
  cursor: pointer;
}

.llm-history-new-menu-item:hover,
.llm-history-new-menu-item:focus-visible,
.llm-history-row-menu-item:hover,
.llm-history-row-menu-item:focus-visible {
  background: var(--fill-quinary);
}

.llm-history-new-menu-item:disabled,
.llm-history-row-menu-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.llm-history-new:hover,
.llm-history-toggle:hover {
  color: var(--color-accent);
}

.llm-history-new:disabled {
  color: var(--fill-tertiary);
  opacity: 0.55;
  cursor: not-allowed;
}

.llm-history-toggle:disabled {
  color: var(--fill-tertiary);
  opacity: 0.55;
  cursor: not-allowed;
}

.llm-history-new:disabled:hover {
  color: var(--fill-tertiary);
}

.llm-history-toggle:disabled:hover {
  color: var(--fill-tertiary);
}

.llm-history-new:focus-visible,
.llm-history-toggle:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---- Mode chip: single pill showing current mode ---- */

.llm-header-mode-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.llm-header-mode-controls > .llm-claude-context-gauge {
  align-self: center;
}

.llm-mode-switch {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start;
  gap: 5px;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  height: 22px;
}

.llm-mode-chip {
  appearance: none;
  -moz-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  width: auto;
  flex: 0 0 auto;
  border: 1px solid var(--stroke-secondary);
  background: var(--fill-quinary);
  cursor: pointer;
  font: inherit;
  font-size: var(--llm-fs-12);
  font-weight: 600;
  color: var(--fill-primary);
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: normal;
  height: 22px;
  min-height: 22px;
  vertical-align: middle;
  align-self: center;
  transition:
    background 0.15s,
    border-color 0.15s;
}

/* Hover only in standalone window where the chip is interactive */
[data-standalone="true"] .llm-mode-chip:hover {
  background: var(--fill-secondary);
  border-color: var(--stroke-secondary);
}

.llm-mode-chip:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.llm-mode-chip[data-webchat-static="true"],
.llm-mode-chip:disabled[data-webchat-static="true"] {
  cursor: default;
  opacity: 1;
}

[data-standalone="true"] .llm-mode-chip[data-webchat-static="true"]:hover {
  background: var(--fill-quinary);
  border-color: var(--stroke-secondary);
}

.llm-claude-system-toggle,
.llm-standalone-claude-toggle {
  appearance: none;
  -moz-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  border: none;
  background: transparent;
  color: var(--fill-primary);
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
}

.llm-claude-system-toggle[data-active="true"],
.llm-standalone-claude-toggle[data-active="true"] {
  color: #d77757;
}

.llm-claude-system-toggle:hover,
.llm-standalone-claude-toggle:hover {
  background: var(--fill-quinary);
}

.llm-claude-system-toggle:focus-visible,
.llm-standalone-claude-toggle:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 1px;
}

.llm-claude-system-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

.llm-codex-system-toggle-icon {
  display: inline-block;
  flex: none;
  position: relative;
  width: 16px;
  height: 16px;
}

.llm-codex-system-toggle-icon::before,
.llm-codex-system-toggle-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity 0.15s;
}

.llm-codex-system-toggle-icon::before {
  background-color: var(--fill-primary, #0d0d0d);
  mask-image: url("icons/codex-app-server.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("icons/codex-app-server.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  opacity: 0.62;
}

.llm-codex-system-toggle-icon::after {
  background-image: url("icons/codex-logo.svg");
  opacity: 0;
}

.llm-claude-system-toggle[data-active="true"]
  .llm-codex-system-toggle-icon::before,
.llm-standalone-claude-toggle[data-active="true"]
  .llm-codex-system-toggle-icon::before {
  opacity: 0;
}

.llm-claude-system-toggle[data-active="true"]
  .llm-codex-system-toggle-icon::after,
.llm-standalone-claude-toggle[data-active="true"]
  .llm-codex-system-toggle-icon::after {
  opacity: 1;
}

/* ---- Webchat connection dot ---- */
.llm-webchat-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
  flex-shrink: 0;
}
.llm-webchat-dot-connected {
  background: #4ade80;
  box-shadow: 0 0 3px #4ade8066;
}
.llm-webchat-dot-disconnected {
  background: #f87171;
  box-shadow: 0 0 3px #f8717166;
}

/* ---- Webchat preload overlay ---- */

.llm-webchat-preload {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--material-background, #fff);
  transition: opacity 0.4s ease;
}
.llm-webchat-preload-fade-out {
  opacity: 0;
  pointer-events: none;
}
.llm-webchat-preload-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 260px;
  gap: 6px;
}
.llm-webchat-preload-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--fill-primary);
  margin-bottom: 10px;
}
.llm-webchat-preload-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.llm-webchat-preload-step {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  transition: opacity 0.3s ease;
}
.llm-webchat-preload-icon {
  width: 16px;
  text-align: center;
  font-size: 13px;
  flex-shrink: 0;
  color: var(--fill-tertiary);
}
.llm-webchat-preload-icon.is-checking {
  animation: llm-preload-spin 0.9s linear infinite;
  color: var(--fill-secondary);
}
.llm-webchat-preload-icon.is-pass {
  color: #4ade80;
  animation: none;
}
.llm-webchat-preload-icon.is-fail {
  color: #f87171;
  animation: none;
}
.llm-webchat-preload-label {
  font-size: 12px;
  color: var(--fill-secondary);
}
.llm-webchat-preload-ready {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 600;
  color: #4ade80;
  animation: llm-preload-fade-in 0.3s ease;
}
.llm-webchat-preload-error {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: llm-preload-fade-in 0.3s ease;
}
.llm-webchat-preload-error-msg {
  font-size: 11px;
  color: #f87171;
  line-height: 1.4;
}
.llm-webchat-preload-retry {
  appearance: none;
  -moz-appearance: none;
  border: 1px solid var(--fill-quinary, #ddd);
  border-radius: 4px;
  background: transparent;
  color: var(--fill-primary);
  font-size: 11px;
  padding: 4px 14px;
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.15s;
}
.llm-webchat-preload-retry:hover {
  background: var(--fill-quinary, #f0f0f0);
}
@keyframes llm-preload-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes llm-preload-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---- Webchat status row (below timestamp) ---- */
.llm-message-webchat-status-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px 0;
}
.llm-message-webchat-status {
  font-size: var(--llm-fs-10, 10px);
  color: var(--fill-tertiary);
}
.llm-message-webchat-refresh {
  appearance: none;
  -moz-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  min-width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--fill-tertiary);
  font-size: 13px;
  cursor: pointer;
  flex: 0 0 18px;
}
.llm-message-webchat-refresh:hover {
  background: var(--fill-quinary, rgba(255, 255, 255, 0.08));
  color: var(--fill-primary);
}
.llm-message-webchat-refresh:disabled {
  opacity: 0.4;
  cursor: default;
}

.llm-subtitle {
  font-size: var(--llm-fs-11);
  color: var(--fill-secondary);
  margin-top: 2px;
}

.llm-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  line-height: 1;
  opacity: 0.7;
  transition:
    opacity 0.15s,
    background 0.15s;
}

.llm-btn-icon:hover {
  opacity: 1;
  background: var(--fill-quinary);
}

.llm-settings-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  font-size: 0;
  line-height: 0;
  padding: 0;
}

.llm-settings-btn::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  mask-image: url("icons/action-settings.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("icons/action-settings.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  pointer-events: none;
}

.llm-popout-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  font-size: 0;
  line-height: 0;
  padding: 0;
}

/* Hide popout button inside the standalone window */
[data-standalone="true"] .llm-popout-btn {
  display: none;
}

/* Hide inner header elements in standalone — replaced by topbar + sidebar */
[data-standalone="true"] .llm-header-top {
  display: none;
}

/* =========================================================================
   Standalone window layout — sidebar + topbar + content
   ========================================================================= */

/* Font-scale vars on standalone root so sidebar/tabs share the same scale
   as the embedded chat panel (whose .llm-panel defines the same vars).
   applyPanelFontScale() sets --llm-font-scale on both .llm-panel and this root. */
#llmforzotero-standalone-chat-root {
  --llm-font-scale: 1;
  --llm-fs-10: calc(10px * var(--llm-font-scale));
  --llm-fs-11: calc(11px * var(--llm-font-scale));
  --llm-fs-12: calc(12px * var(--llm-font-scale));
  --llm-fs-13: calc(13px * var(--llm-font-scale));
  --llm-fs-14: calc(14px * var(--llm-font-scale));
  --llm-message-line-height: 1.5;
  --llm-message-paragraph-spacing: 8px;
  --llm-message-word-spacing: 0px;
  --llm-message-font-family: inherit;
  --llm-popup-surface-bg: color-mix(
    in srgb,
    var(--material-sidepane, var(--material-background, #ffffff)) 94%,
    black 6%
  );
  --llm-popup-surface-border: var(
    --stroke-secondary,
    rgba(120, 120, 120, 0.26)
  );
  --llm-popup-overlay-bg: rgba(0, 0, 0, 0.22);
  --llm-history-paper-chip-text: #1d4ed8;
  --llm-history-paper-chip-bg: rgba(59, 130, 246, 0.12);
  --llm-history-library-chip-text: #b45309;
  --llm-history-library-chip-bg: rgba(249, 115, 22, 0.12);
  --llm-history-orphan-chip-text: #b91c1c;
  --llm-history-orphan-chip-bg: rgba(239, 68, 68, 0.12);
}

.window-is-dark #llmforzotero-standalone-chat-root,
:root[lwtheme-brighttext] #llmforzotero-standalone-chat-root,
:root[sizemode][lwtheme-brighttext] #llmforzotero-standalone-chat-root {
  --llm-popup-surface-bg: color-mix(
    in srgb,
    var(--material-sidepane, var(--material-background, #202020)) 92%,
    black 8%
  );
  --llm-popup-surface-border: rgba(255, 255, 255, 0.12);
  --llm-popup-overlay-bg: rgba(0, 0, 0, 0.48);
  --llm-history-paper-chip-text: #93c5fd;
  --llm-history-paper-chip-bg: rgba(59, 130, 246, 0.15);
  --llm-history-library-chip-text: #fdba74;
  --llm-history-library-chip-bg: rgba(249, 115, 22, 0.15);
  --llm-history-orphan-chip-text: #fca5a5;
  --llm-history-orphan-chip-bg: rgba(239, 68, 68, 0.16);
}

/* --- Lower area: sidebar + content side by side --- */

.llm-standalone-lower {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* --- Sidebar: icon strip + collapsible panel --- */

.llm-standalone-sidebar {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  border-right: 1px solid var(--stroke-secondary);
  background: color-mix(in srgb, var(--material-background) 96%, black 4%);
  overflow: hidden;
}

/* Icon strip — always visible vertical column with new-chat & history icons */
.llm-standalone-icon-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 48px;
  min-width: 48px;
  padding: 8px 0;
  gap: 4px;
  background: color-mix(in srgb, var(--material-background) 96%, black 4%);
  border-right: 1px solid var(--stroke-secondary);
}

/* Icon buttons — shared base style */
.llm-standalone-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--fill-secondary);
  cursor: pointer;
  padding: 0;
  transition:
    background 0.15s,
    color 0.15s;
}

.llm-standalone-icon-btn:hover {
  background: var(--fill-quinary);
  color: var(--fill-primary);
}

/* CSS-based icons using ::before + mask-image (reliable in XUL/XHTML) */
.llm-standalone-icon-btn::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

/* New chat "+" text button — no ::before icon */
.llm-standalone-icon-plus::before {
  display: none;
}
.llm-standalone-icon-plus {
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
}

/* Search icon — magnifying glass */
.llm-standalone-icon-search::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}

/* Sidebar toggle icon — panel-left */
.llm-standalone-topbar-toggle::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cline x1='9' y1='3' x2='9' y2='21'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cline x1='9' y1='3' x2='9' y2='21'/%3E%3C/svg%3E");
}

/* Settings icon — sliders (matches original interface) */
.llm-standalone-icon-settings::before {
  mask-image: url("icons/action-settings.svg");
  -webkit-mask-image: url("icons/action-settings.svg");
}

/* Skill icon — pen/edit */
.llm-standalone-icon-skill::before {
  mask-image: url("icons/action-skill.svg");
  -webkit-mask-image: url("icons/action-skill.svg");
}

/* Export icon — download */
.llm-standalone-icon-export::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
}

/* Clear icon — trash */
.llm-standalone-icon-clear::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
}

/* Exit button — webchat mode override for clear icon */
.llm-standalone-icon-exit::before {
  display: none;
}
.llm-standalone-icon-exit {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  width: auto;
  padding: 4px 8px;
  height: auto;
  min-height: 28px;
}

.llm-standalone-popup-item {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 7px 10px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--fill-primary);
  font-size: var(--llm-fs-12);
  text-align: left;
  cursor: pointer;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow: hidden;
  text-overflow: clip;
  line-height: 1.4;
}

.llm-standalone-popup-item:hover {
  background: color-mix(in srgb, var(--fill-quinary) 80%, transparent);
}

.llm-standalone-popup-item.active {
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
  color: var(--color-accent);
  font-weight: 500;
}

/* Export popup — floating menu from sidebar export icon */
.llm-standalone-export-popup {
  display: none;
  flex-direction: column;
  position: fixed;
  z-index: 20;
  min-width: 180px;
  max-width: 240px;
  background: color-mix(in srgb, var(--material-background) 94%, black 6%);
  border: 1px solid var(--stroke-secondary);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

/* --- Search popup (standalone window) --- */

.llm-standalone-search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--llm-popup-overlay-bg);
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}

.llm-standalone-search-overlay.llm-history-search-theme-light {
  --llm-history-paper-chip-text: #1d4ed8;
  --llm-history-paper-chip-bg: rgba(59, 130, 246, 0.12);
  --llm-history-library-chip-text: #b45309;
  --llm-history-library-chip-bg: rgba(249, 115, 22, 0.12);
  --llm-history-orphan-chip-text: #b91c1c;
  --llm-history-orphan-chip-bg: rgba(239, 68, 68, 0.12);
}

.llm-standalone-search-overlay.llm-history-search-theme-dark {
  --llm-history-paper-chip-text: #93c5fd;
  --llm-history-paper-chip-bg: rgba(59, 130, 246, 0.15);
  --llm-history-library-chip-text: #fdba74;
  --llm-history-library-chip-bg: rgba(249, 115, 22, 0.15);
  --llm-history-orphan-chip-text: #fca5a5;
  --llm-history-orphan-chip-bg: rgba(239, 68, 68, 0.16);
}

.llm-standalone-search-popup {
  display: flex;
  flex-direction: column;
  width: min(90%, 480px);
  max-height: 60vh;
  background: var(--llm-popup-surface-bg);
  border: 1px solid var(--llm-popup-surface-border);
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32);
  overflow: hidden;
}

.llm-standalone-search-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--llm-popup-surface-bg);
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.llm-standalone-search-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--llm-popup-surface-bg);
  pointer-events: none;
}

.llm-standalone-search-input {
  appearance: none;
  -moz-appearance: none;
  flex: 1;
  min-width: 0;
  border: 0 !important;
  border-bottom: 0 !important;
  background: transparent;
  color: var(--fill-primary);
  font: inherit;
  font-size: var(--llm-fs-13);
  line-height: 1.4;
  outline: none !important;
  box-shadow: none !important;
}

.llm-standalone-search-input::placeholder {
  color: var(--fill-tertiary);
}

.llm-standalone-search-close {
  appearance: none;
  -moz-appearance: none;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--fill-secondary);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}

.llm-standalone-search-close:hover {
  background: color-mix(in srgb, var(--fill-quinary) 80%, transparent);
  color: var(--fill-primary);
}

.llm-standalone-search-results {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 8px 12px;
  background: var(--llm-popup-surface-bg);
  border: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
}

.llm-standalone-search-empty {
  color: var(--fill-tertiary);
  font-size: var(--llm-fs-12);
  padding: 16px 8px;
  text-align: center;
}

.llm-standalone-search-day-label {
  font-size: var(--llm-fs-10);
  font-weight: 600;
  color: var(--fill-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 6px 3px;
  user-select: none;
}

.llm-standalone-search-item {
  appearance: none;
  -moz-appearance: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  width: 100%;
  padding: 7px 8px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--fill-primary);
  font: inherit;
  font-size: var(--llm-fs-12);
  text-align: left;
  cursor: pointer;
  line-height: 1.4;
  box-sizing: border-box;
}

.llm-standalone-search-text {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  width: 100%;
}

.llm-standalone-search-item:hover {
  background: color-mix(in srgb, var(--fill-quinary) 80%, transparent);
}

.llm-standalone-search-item:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 1px;
}

.llm-standalone-search-label,
.llm-history-item-scope-chip {
  flex-shrink: 0;
  font-size: var(--llm-fs-10);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 45%;
  padding: 1px 6px;
  border-radius: 4px;
  line-height: 1.5;
}

.llm-standalone-search-label[data-label-type="paper"],
.llm-history-item-scope-chip[data-label-type="paper"] {
  color: var(--llm-history-paper-chip-text);
  background: var(--llm-history-paper-chip-bg);
}

.llm-standalone-search-label[data-label-type="library"],
.llm-history-item-scope-chip[data-label-type="library"] {
  color: var(--llm-history-library-chip-text);
  background: var(--llm-history-library-chip-bg);
}

.llm-standalone-search-label[data-label-type="orphan"],
.llm-history-item-scope-chip[data-label-type="orphan"] {
  color: var(--llm-history-orphan-chip-text);
  background: var(--llm-history-orphan-chip-bg);
}

.llm-standalone-search-title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-standalone-search-delete {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  color: var(--fill-tertiary);
  font-size: 14px;
  margin-left: 4px;
}

.llm-standalone-search-delete::before {
  content: "\00D7";
}

.llm-standalone-search-item:hover .llm-standalone-search-delete,
.llm-standalone-search-item:focus-within .llm-standalone-search-delete {
  display: flex;
}

.llm-standalone-search-delete:hover,
.llm-standalone-search-delete:focus-visible {
  background: color-mix(in srgb, var(--fill-quaternary) 60%, transparent);
  color: #e74c3c;
}

.llm-standalone-search-meta,
.llm-standalone-search-preview {
  display: block;
  min-width: 0;
  width: 100%;
  color: var(--fill-secondary);
  font-size: var(--llm-fs-10);
  line-height: 1.28;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

/* ── Skills popup ─────────────────────────────────────────────── */
.llm-standalone-skill-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(0, 0, 0, 0.35);
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}

.llm-standalone-skill-popup {
  display: flex;
  flex-direction: column;
  width: min(90%, 520px);
  max-height: 60vh;
  background: color-mix(in srgb, var(--material-background) 96%, black 4%);
  border: 1px solid var(--stroke-secondary);
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32);
  overflow: hidden;
}

.llm-standalone-skill-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--stroke-secondary);
}

.llm-standalone-skill-title {
  flex: 1;
  font-size: var(--llm-fs-14, 14px);
  font-weight: 600;
  color: var(--fill-primary);
}

.llm-outline-btn {
  appearance: none;
  -moz-appearance: none;
  padding: 4px 10px;
  font-size: var(--llm-fs-12, 12px);
  font-weight: 500;
  background: transparent;
  color: var(--color-accent, #2563eb);
  border: 1px solid var(--color-accent, #2563eb);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
}

.llm-outline-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-accent, #2563eb) 12%, transparent);
}

.llm-outline-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.llm-standalone-skill-grid {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 12px;
}

.llm-standalone-skill-item {
  appearance: none;
  -moz-appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: var(--fill-primary);
  transition: background 0.12s;
}

.llm-standalone-skill-item:hover {
  background: var(--fill-quinary);
}

.llm-standalone-skill-label {
  font-size: var(--llm-fs-11, 11px);
  color: var(--fill-secondary);
  text-align: center;
  word-break: break-all;
  line-height: 1.3;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Document icon — CSS mask for grid items */
.llm-standalone-skill-doc-icon {
  display: block;
  width: 32px;
  height: 32px;
  background-color: var(--fill-secondary);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cline x1='10' y1='9' x2='8' y2='9'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cline x1='10' y1='9' x2='8' y2='9'/%3E%3C/svg%3E");
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

/* "+" add button — first grid item */
.llm-standalone-skill-add {
  border: 1px dashed var(--stroke-secondary);
}
.llm-standalone-skill-add:hover {
  border-color: var(--fill-tertiary);
}
.llm-standalone-skill-add-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 24px;
  font-weight: 300;
  color: var(--fill-tertiary);
  line-height: 1;
}

/* Context menu */
.llm-standalone-skill-ctx-menu {
  display: none;
  position: fixed;
  z-index: 40;
  flex-direction: column;
  min-width: 160px;
  background: color-mix(in srgb, var(--material-background) 96%, black 4%);
  border: 1px solid var(--stroke-secondary);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  padding: 4px 0;
  overflow: hidden;
}

.llm-standalone-skill-ctx-item {
  appearance: none;
  -moz-appearance: none;
  display: block;
  width: 100%;
  padding: 7px 12px;
  border: none;
  background: transparent;
  color: var(--fill-primary);
  font: inherit;
  font-size: var(--llm-fs-12, 12px);
  text-align: left;
  cursor: pointer;
}

.llm-standalone-skill-ctx-item:hover {
  background: var(--fill-quinary);
}

.llm-standalone-skill-ctx-delete {
  color: #d32f2f;
}

/* Confirmation dialog */
.llm-standalone-confirm-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 50;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.42);
}

.llm-standalone-confirm-dialog {
  width: min(92vw, 380px);
  box-sizing: border-box;
  padding: 16px;
  background: color-mix(in srgb, var(--material-background) 97%, black 3%);
  border: 1px solid var(--stroke-secondary);
  border-radius: 8px;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.36);
  color: var(--fill-primary);
}

.llm-standalone-confirm-title {
  font-size: var(--llm-fs-14, 14px);
  font-weight: 600;
  line-height: 1.35;
}

.llm-standalone-confirm-message {
  margin-top: 8px;
  color: var(--fill-secondary);
  font-size: var(--llm-fs-12, 12px);
  line-height: 1.45;
}

.llm-standalone-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.llm-standalone-confirm-btn {
  appearance: none;
  -moz-appearance: none;
  min-width: 74px;
  min-height: 30px;
  padding: 5px 12px;
  border: 1px solid var(--stroke-secondary);
  border-radius: 6px;
  font: inherit;
  font-size: var(--llm-fs-12, 12px);
  font-weight: 500;
  cursor: pointer;
}

.llm-standalone-confirm-btn:focus-visible {
  outline: 2px solid var(--color-accent, #2563eb);
  outline-offset: 2px;
}

.llm-standalone-confirm-cancel {
  background: transparent;
  color: var(--fill-primary);
}

.llm-standalone-confirm-cancel:hover {
  background: var(--fill-quinary);
}

.llm-standalone-confirm-primary {
  border-color: var(--color-accent, #2563eb);
  background: var(--color-accent, #2563eb);
  color: white;
}

.llm-standalone-confirm-primary:hover {
  filter: brightness(1.06);
}

.llm-standalone-confirm-destructive {
  border-color: #c2410c;
  background: #c2410c;
}

/* Panel — expandable conversation list */
.llm-standalone-sidebar-panel {
  display: flex;
  flex-direction: column;
  width: 220px;
  min-width: 0;
  background: color-mix(in srgb, var(--material-background) 96%, black 4%);
  overflow: hidden;
  transition:
    width 0.2s ease,
    opacity 0.15s ease;
}

/* Collapsed state — panel hidden, only icon strip visible */
.llm-standalone-sidebar[data-sidebar-state="collapsed"]
  .llm-standalone-sidebar-panel {
  width: 0;
  opacity: 0;
  pointer-events: none;
}

/* border-right is already on the icon strip; no extra rule needed for collapsed */

.llm-standalone-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
  gap: 8px;
}

.llm-standalone-sidebar-title {
  font-size: var(--llm-fs-13, 13px);
  font-weight: 600;
  color: var(--fill-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-standalone-sidebar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.llm-standalone-sidebar-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--stroke-secondary);
  border-radius: 7px;
  background: color-mix(in srgb, var(--material-background) 92%, black 8%);
  color: var(--fill-secondary);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    opacity 0.15s;
}

.llm-standalone-sidebar-refresh:hover:not(:disabled) {
  background: var(--fill-quinary);
  color: var(--fill-primary);
}

.llm-standalone-sidebar-refresh:disabled {
  opacity: 0.5;
  cursor: default;
}

.llm-standalone-sidebar-list {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 8px 12px;
}

.llm-standalone-sidebar-empty {
  color: var(--fill-tertiary);
  font-size: var(--llm-fs-12, 12px);
  padding: 16px 6px;
  text-align: center;
}

.llm-standalone-day-label {
  font-size: var(--llm-fs-11, 11px);
  font-weight: 600;
  color: var(--fill-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 6px 4px;
  user-select: none;
}

.llm-standalone-conv-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 7px 8px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--fill-primary);
  font-size: var(--llm-fs-12, 12px);
  text-align: left;
  cursor: pointer;
  line-height: 1.4;
}

.llm-standalone-conv-title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-standalone-conv-delete {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  color: var(--fill-tertiary);
  font-size: 14px;
  margin-left: 4px;
}

.llm-standalone-conv-delete::before {
  content: "\00D7"; /* × */
}

.llm-standalone-conv-item:hover .llm-standalone-conv-delete {
  display: flex;
}

.llm-standalone-conv-delete:hover {
  background: color-mix(in srgb, var(--fill-quaternary) 60%, transparent);
  color: #e74c3c;
}

.llm-standalone-conv-item:hover {
  background: color-mix(in srgb, var(--fill-quinary) 80%, transparent);
}

.llm-standalone-conv-item.active {
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
  color: var(--color-accent);
  font-weight: 500;
}

/* --- Main area (content) --- */

/* Tab row — centers the tab group at top of content area */
.llm-standalone-tab-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 36px;
  padding: 6px 12px;
  flex-shrink: 0;
}

.llm-standalone-tab-row > .llm-standalone-claude-toggle {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}

/* Segmented control container — the dark "track" */
.llm-standalone-tab-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--material-background) 80%, black 20%);
  border: 1px solid color-mix(in srgb, var(--stroke-secondary) 60%, transparent);
}

.llm-standalone-tab {
  padding: 4px 14px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--fill-secondary);
  font-size: var(--llm-fs-12, 12px);
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
  line-height: 1.3;
}

.llm-standalone-tab:hover {
  color: var(--fill-primary);
}

.llm-standalone-tab.active {
  background: var(--fill-quinary);
  color: var(--fill-primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.llm-standalone-content-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  background: var(--material-sidepane);
}

.llm-standalone-content-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  font-size: var(--llm-fs-12);
  line-height: 20px;
  font-weight: 500;
  color: var(--fill-primary);
  border-bottom: 1px solid var(--stroke-secondary);
  flex-shrink: 0;
  min-width: 0;
}

.llm-standalone-content-title-text {
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-standalone-content-title-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.llm-standalone-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

/* Override viewport-relative chat shell height for standalone window */
[data-standalone="true"] .llm-chat-shell {
  height: auto;
  flex: 1 1 0;
  min-height: 200px;
}

/* Centered responsive width for standalone chat content */
[data-standalone="true"].llm-panel {
  --llm-standalone-chat-max-width: clamp(820px, 82vw, 1280px);
  width: min(100%, var(--llm-standalone-chat-max-width));
  max-width: min(100%, var(--llm-standalone-chat-max-width));
  margin: 0 auto;
  padding: 5px 12px;
}

/* ---- Chat start page (shared layout for all modes) ---- */

/* Center welcome content inside the default-sized shell so .llm-chat-shell's
   native `resize: vertical` keeps working on the start page. Shrinking the
   shell (height: auto / overflow: visible) hides the user-agent resize grip. */
[data-start-page-active="true"] .llm-start-page {
  flex: 1;
  justify-content: center;
}

/* Hide the welcome HTML while an action card is present — otherwise it shares
   the messages flex-column with the card and the card shrinks to whatever
   space is left. Attribute toggled by setupHandlers (JS-based rather than
   :has() to stay compatible across Gecko versions). */
[data-has-action-card="true"][data-start-page-active="true"] .llm-start-page {
  display: none;
}

/* Only hide header in standalone (it has its own sidebar controls).
   In the sidepanel, the header provides the only access to history/new chat/settings. */
[data-standalone="true"][data-start-page-active="true"] .llm-header {
  display: none;
}

/* Standalone start page: fill available space and center vertically */
[data-standalone="true"][data-start-page-active="true"] .llm-chat-shell {
  margin-top: 0;
  flex: 1 1 auto;
}

.llm-standalone-start-page {
  flex: 1;
  justify-content: center;
}

/* Paper chat in standalone should match library chat layout */
[data-standalone="true"] .llm-start-page {
  flex: 1;
  justify-content: center;
}

[data-start-page-active="true"][data-conversation-kind="global"]
  .llm-shortcuts {
  display: none;
}

[data-start-page-active="true"] .llm-status-bar {
  display: none;
}

/* Start page content */
.llm-start-page,
.llm-standalone-start-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 20px 20px;
}

.llm-start-page-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--fill-primary);
  margin-bottom: 4px;
}

.llm-start-page-subtitle {
  font-size: 14px;
  color: var(--fill-tertiary);
  margin-bottom: 32px;
  font-style: italic;
}

.llm-start-page-recommendations {
  text-align: left;
  max-width: 500px;
  width: 100%;
}

.llm-start-page-rec-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--fill-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.llm-start-page-rec-list {
  margin: 0;
  padding-left: 20px;
  font-size: 12px;
  color: var(--fill-tertiary);
  line-height: 1.8;
}

.llm-start-page-rec-list li {
  margin-bottom: 4px;
}

.llm-start-page-rec-list li strong {
  color: var(--fill-secondary);
}

.llm-webchat-start-page .llm-start-page-subtitle {
  max-width: 560px;
  margin-bottom: 20px;
  font-style: normal;
}

.llm-webchat-start-page .llm-start-page-recommendations {
  max-width: 560px;
}

.llm-webchat-rec-title-spaced {
  margin-top: 18px;
}

.llm-webchat-warning-title {
  margin-top: 18px;
  color: #b45309;
}

.llm-rec-reason {
  opacity: 0.7;
  font-size: 11px;
}

.llm-start-page-desc {
  text-align: left;
  max-width: 500px;
  width: 100%;
  font-size: 12px;
  color: var(--fill-tertiary);
  line-height: 1.7;
}

.llm-start-page-desc p {
  margin: 0 0 8px;
}

.llm-start-page-desc strong {
  color: var(--fill-secondary);
}

/* Transition animation: start page → chat mode */
.llm-start-page-transitioning .llm-input-section {
  transition: all 0.4s ease;
}

.llm-start-page-transitioning .llm-chat-shell {
  transition:
    flex 0.4s ease,
    height 0.4s ease;
}

.llm-start-page-transitioning .llm-header {
  transition: opacity 0.3s ease;
}

.llm-start-page-transitioning .llm-status-bar {
  transition: opacity 0.3s ease;
}

.llm-popout-btn::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  mask-image: url("icons/action-popout.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("icons/action-popout.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  pointer-events: none;
}

/* Context Section */
.llm-context-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.llm-context-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.llm-context-label {
  font-size: var(--llm-fs-11);
  font-weight: 500;
  color: var(--fill-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.llm-context-status {
  font-size: var(--llm-fs-10);
  color: var(--fill-tertiary);
}

.llm-context {
  background: var(--fill-quinary);
  padding: 10px 12px;
  border-radius: 8px;
  line-height: 1.5;
  max-height: 120px;
  overflow: auto;
  border: 1px solid var(--stroke-secondary);
  font-size: var(--llm-fs-11);
  white-space: pre-wrap;
}

/* Messages Area */
.llm-chat-shell,
.llm-input {
  resize: vertical;
}

.llm-chat-shell {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 50vh;
  min-height: 320px;
  max-height: 100vh;
  overflow: hidden;
}

.llm-messages {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  contain: inline-size;
  overflow-y: auto;
  overflow-x: hidden;
  overflow-anchor: none;
  border: none;
  border-radius: 0;
  padding: 12px;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  user-select: text;
}

/* Shortcuts */
.llm-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 0;
}

.llm-shortcut-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 0;
  background: var(--fill-quinary);
  border: 1px solid var(--stroke-secondary);
  color: var(--fill-primary);
  font-size: var(--llm-fs-11);
  min-height: 30px;
  max-width: 100%;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    background 0.15s,
    border-color 0.15s,
    transform 0.12s ease,
    opacity 0.12s ease;
}

.llm-shortcut-btn:hover:not(:disabled) {
  background: var(--color-accent10);
  border-color: var(--color-accent);
}

.llm-shortcut-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.llm-shortcut-move-mode {
  justify-content: flex-start;
  gap: 6px;
}

.llm-shortcut-label {
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.llm-shortcut-drag-handle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  color: var(--fill-tertiary);
  font-weight: 700;
  line-height: 1;
  user-select: none;
  cursor: grab;
}

.llm-shortcut-drag-handle:active {
  cursor: grabbing;
}

.llm-shortcut-dragging {
  opacity: 0.45;
  cursor: grabbing;
}

.llm-shortcut-drop-target {
  background: var(--color-accent10);
  border-color: var(--color-accent);
}

.llm-shortcut-menu,
.llm-response-menu {
  position: absolute;
  z-index: 12;
  background: var(--material-background);
  border: 1px solid var(--stroke-secondary);
  border-radius: calc(6px * var(--llm-font-scale, 1));
  padding: calc(4px * var(--llm-font-scale, 1));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
  min-width: calc(64px * var(--llm-font-scale, 1));
  gap: 2px;
}

.llm-history-menu {
  --llm-history-row-gap: 4px;
  position: absolute;
  z-index: 13;
  display: none;
  flex-direction: column;
  gap: 8px;
  min-width: 240px;
  width: min(88vw, 360px);
  max-width: min(90vw, 360px);
  max-height: min(52vh, 340px);
  overflow-y: auto;
  background: color-mix(in srgb, var(--material-background) 94%, black 6%);
  border: 1px solid var(--stroke-secondary);
  border-radius: calc(8px * var(--llm-font-scale, 1));
  padding: calc(6px * var(--llm-font-scale, 1));
  box-sizing: border-box;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
  align-items: stretch;
}

/* --- Day-grouped history items (matches standalone sidebar style) --- */

.llm-history-items-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
}

.llm-history-day-label {
  font-size: var(--llm-fs-10);
  font-weight: 600;
  color: var(--fill-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 6px 3px;
  user-select: none;
  width: 100%;
  box-sizing: border-box;
}

.llm-history-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  padding: 6px 8px;
  border-radius: 6px;
  background: none;
  color: var(--fill-primary);
  font-size: var(--llm-fs-12);
  text-align: left;
  cursor: pointer;
  line-height: 1.4;
  overflow: hidden;
  box-sizing: border-box;
}

.llm-history-item:hover {
  background: color-mix(in srgb, var(--fill-quinary) 80%, transparent);
}

.llm-history-item:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 1px;
}

.llm-history-item.active {
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
  color: var(--color-accent);
  font-weight: 500;
}

.llm-history-item.pending-delete {
  opacity: 0.45;
}

/* Title row: title + delete side by side */
.llm-history-item-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

.llm-history-item-title {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-history-item-preview {
  display: block;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  color: var(--fill-secondary);
  font-size: var(--llm-fs-10);
  line-height: 1.28;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.llm-history-item-meta {
  display: block;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  color: var(--fill-tertiary);
  font-size: var(--llm-fs-10);
  line-height: 1.28;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.llm-history-item-preview mark,
.llm-history-item-title mark {
  white-space: nowrap;
}

.llm-history-item-delete {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  color: var(--fill-tertiary);
  font-size: 14px;
  margin-left: 4px;
}

.llm-history-item-delete::before {
  content: "\00D7";
}

.llm-history-item:hover .llm-history-item-delete {
  display: flex;
}

.llm-history-item-delete:hover {
  background: color-mix(in srgb, var(--fill-quaternary) 60%, transparent);
  color: #e74c3c;
}

/* --- Legacy section/card styles — retained for webchat history menu --- */

.llm-history-menu-section-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--stroke-secondary);
  border-radius: 8px;
  padding: 6px;
  background: transparent;
}

.llm-history-menu-search {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 2px;
}

.llm-history-menu-search-trigger {
  appearance: none;
  -moz-appearance: none;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--stroke-secondary);
  border-radius: 7px;
  background: transparent;
  color: var(--fill-secondary);
  font: inherit;
  font-size: var(--llm-fs-10);
  line-height: 1.25;
  padding: 7px 9px;
  box-sizing: border-box;
  text-align: left;
  cursor: pointer;
}

.llm-history-menu-search-trigger:hover,
.llm-history-menu-search-trigger:focus-visible {
  color: var(--fill-primary);
  border-color: color-mix(
    in srgb,
    var(--fill-secondary) 28%,
    var(--stroke-secondary)
  );
  background: color-mix(
    in srgb,
    var(--material-background) 84%,
    var(--fill-quinary)
  );
}

.llm-history-menu-search-input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--stroke-secondary);
  border-radius: 7px;
  background: color-mix(in srgb, var(--material-background) 86%, black 14%);
  color: var(--fill-primary);
  font: inherit;
  font-size: var(--llm-fs-10);
  line-height: 1.25;
  padding: 7px 9px;
  box-sizing: border-box;
}

.llm-history-menu-search-input::placeholder {
  color: var(--fill-secondary);
}

.llm-history-menu-search-input:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 1px;
}

.llm-history-menu-section {
  appearance: none;
  -moz-appearance: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  padding: 1px 2px 2px;
}

.llm-history-menu-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 10px;
  color: var(--fill-secondary);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.llm-history-menu-section:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 1px;
  border-radius: 6px;
}

.llm-history-menu-section-label {
  color: var(--fill-secondary);
  font-size: var(--llm-fs-10);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.llm-history-menu-section-viewport {
  display: block;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.llm-history-menu-section-viewport[data-scroll-limited="true"] {
  max-height: 320px;
}

.llm-history-menu-section-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.llm-history-menu-row {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 4px;
  width: 100%;
  border: 1px solid var(--stroke-secondary);
  border-radius: 7px;
  background: transparent;
  padding: 4px 0;
  margin: 0;
  overflow: hidden;
}

.llm-history-menu-row:hover {
  border-color: color-mix(
    in srgb,
    var(--fill-secondary) 28%,
    var(--stroke-secondary)
  );
  background: color-mix(
    in srgb,
    var(--material-background) 70%,
    var(--fill-quinary)
  );
}

.llm-history-menu-row.active {
  border-color: color-mix(
    in srgb,
    var(--fill-secondary) 28%,
    var(--stroke-secondary)
  );
  background: transparent;
}

.llm-history-menu-row.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: color-mix(in srgb, var(--color-accent) 84%, #ffffff 16%);
}

.llm-history-menu-row.pending-delete {
  opacity: 0.45;
}

.llm-history-menu-row-main {
  appearance: none;
  -moz-appearance: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  flex: 1 1 auto;
  min-width: 0;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  min-height: 44px;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--fill-primary);
  padding: 8px 8px;
  margin: 0;
  cursor: pointer;
  font: inherit;
  overflow: hidden;
}

.llm-history-menu-row-main:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 1px;
}

.llm-history-menu-row-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: 13px;
  line-height: 1.3;
}

.llm-history-menu-row-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: 11px;
  line-height: 1.3;
  opacity: 0.5;
}

.llm-history-row-title-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.llm-history-row-delete {
  appearance: none;
  -moz-appearance: none;
  flex: 0 0 auto;
  align-self: center;
  border: 1px solid transparent;
  background: transparent;
  color: #ef4444;
  font-size: 12px;
  line-height: 1;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  cursor: pointer;
  margin-right: 6px;
  display: grid;
  place-items: center;
  padding: 0;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 120ms ease,
    color 120ms ease,
    border-color 120ms ease,
    background 120ms ease,
    transform 120ms ease;
}

.llm-history-row-delete::before {
  content: "";
  width: 18px;
  height: 18px;
  display: block;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
}

.llm-history-menu-row:hover .llm-history-row-delete,
.llm-history-menu-row:focus-within .llm-history-row-delete,
.llm-history-row-delete:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.llm-history-row-delete:hover,
.llm-history-row-delete:focus-visible {
  color: #f87171;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
}

.llm-history-row-delete:active {
  transform: translateY(0.5px);
}

.llm-history-row-title {
  display: block;
  min-width: 0;
  flex: 0 0 auto;
  width: 100%;
  color: var(--fill-primary);
  font-size: var(--llm-fs-11);
  font-weight: 600;
  line-height: 1.28;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-history-row-title-line .llm-history-row-title {
  flex: 1 1 auto;
  width: auto;
}

.llm-history-row-preview {
  display: block;
  min-width: 0;
  color: var(--fill-secondary);
  font-size: var(--llm-fs-10);
  line-height: 1.28;
  white-space: normal;
  word-break: break-word;
  overflow: hidden;
  max-height: calc(1.28em * 2);
}

.llm-history-search-highlight {
  background: rgba(250, 204, 21, 0.72);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

.llm-history-row-meta {
  display: block;
  min-width: 0;
  flex: 0 0 auto;
  width: 100%;
  color: var(--fill-secondary);
  font-size: var(--llm-fs-10);
  line-height: 1.22;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-history-menu-empty {
  color: var(--fill-tertiary);
  font-size: var(--llm-fs-11);
  line-height: 1.35;
  padding: 8px;
}

.llm-history-undo {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--stroke-secondary);
  border-radius: 8px;
  background: color-mix(
    in srgb,
    var(--material-background) 86%,
    var(--fill-quinary)
  );
  padding: 6px 8px;
}

.llm-history-undo-text {
  min-width: 0;
  color: var(--fill-secondary);
  font-size: var(--llm-fs-11);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-history-undo-btn {
  appearance: none;
  -moz-appearance: none;
  border: 1px solid var(--stroke-secondary);
  border-radius: 999px;
  background: var(--fill-quinary);
  color: var(--fill-primary);
  font-size: var(--llm-fs-10);
  font-weight: 600;
  line-height: 1.2;
  padding: 3px 10px;
  cursor: pointer;
  flex: 0 0 auto;
}

.llm-history-undo-btn:hover,
.llm-history-undo-btn:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-accent10);
}

.llm-top-toast {
  display: none;
  align-items: center;
  justify-content: center;
  align-self: center;
  max-width: min(320px, 92%);
  min-height: 28px;
  box-sizing: border-box;
  border: 1px solid var(--stroke-secondary);
  border-radius: 8px;
  background: color-mix(
    in srgb,
    var(--material-background) 90%,
    var(--color-accent10)
  );
  color: var(--fill-primary);
  font-size: var(--llm-fs-11);
  line-height: 1.25;
  padding: 6px 10px;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-top-toast-visible {
  opacity: 1;
  transform: translateY(0);
}

.llm-shortcut-menu-item,
.llm-response-menu-item {
  appearance: none;
  -moz-appearance: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  width: 100%;
  min-height: calc(24px * var(--llm-font-scale, 1));
  margin: 0;
  background: none;
  border: none;
  color: var(--fill-primary);
  padding: calc(4px * var(--llm-font-scale, 1))
    calc(8px * var(--llm-font-scale, 1));
  font-size: var(--llm-fs-11);
  line-height: 1.2;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: calc(4px * var(--llm-font-scale, 1));
  white-space: nowrap;
}

.llm-shortcut-menu-item:hover,
.llm-response-menu-item:hover {
  background: var(--fill-quinary);
}

.llm-shortcut-menu-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.llm-response-menu-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.llm-assistant-selection-action {
  appearance: none;
  -moz-appearance: none;
  position: absolute;
  z-index: 8;
  background: var(--material-background);
  border-color: var(--stroke-secondary);
  color: var(--fill-primary);
  width: auto;
  max-width: none;
  margin: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  will-change: opacity, transform;
  transition:
    opacity 140ms ease,
    transform 140ms ease,
    visibility 140ms ease;
}

.llm-assistant-selection-action.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.llm-assistant-selection-action:hover:not(:disabled),
.llm-assistant-selection-action:active:not(:disabled),
.llm-assistant-selection-action:focus-visible {
  background: var(--material-background);
  border-color: var(--stroke-secondary);
  color: var(--fill-primary);
}

/* Welcome Message */
.llm-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: left;
  padding: 30px 20px;
  color: var(--fill-tertiary);
  flex: 1;
}

.llm-welcome-icon {
  font-size: var(--llm-fs-32);
  margin-bottom: 10px;
  opacity: 0.5;
}

.llm-welcome-icon.llm-context-svg-icon {
  width: 32px;
  height: 32px;
}

.llm-welcome-text {
  font-size: var(--llm-fs-12);
  line-height: 1.5;
  max-width: 420px;
}

.llm-welcome-title {
  margin-bottom: 10px;
  color: var(--fill-secondary);
}

.llm-welcome-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

.llm-welcome-list li {
  margin: 0;
}

/* Message Wrapper */
.llm-message-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
}

.llm-message-wrapper.user {
  align-items: flex-end;
}

.llm-message-wrapper.assistant {
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Message Bubbles */
.llm-bubble {
  padding: 10px 14px;
  border-radius: 12px;
  max-width: 95%;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
  line-height: 1.5;
  font-size: var(--llm-fs-12);
  user-select: text;
}

.llm-bubble.streaming {
  white-space: pre-wrap;
}

.llm-bubble.user {
  background: var(--color-accent);
  color: white;
  border-radius: 6px;
  border-bottom-right-radius: 2px;
  font-family: var(--llm-message-font-family, inherit);
  line-height: var(--llm-message-line-height, 1.5);
  word-spacing: var(--llm-message-word-spacing, normal);
}

/* Editable user bubble — shows a pointer and subtle hover feedback */
.llm-bubble-editable {
  cursor: pointer;
}
.llm-bubble-editable:hover {
  opacity: 0.88;
}

/* Inline edit widget — the full .llm-input-section is physically moved here */
.llm-inline-edit-wrapper {
  background: var(--material-background);
  border: 1px solid var(--color-accent);
  border-radius: 10px;
  padding: 0;
  max-width: 100%;
  width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: visible;
}

/* "Editing · Cancel" chip above the input section */
.llm-inline-edit-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 4px;
  justify-content: space-between;
}

.llm-inline-edit-header-label {
  font-size: var(--llm-fs-11, 11px);
  font-weight: 600;
  color: var(--color-accent);
  user-select: none;
}

.llm-inline-edit-header-cancel {
  appearance: none;
  -moz-appearance: none;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-size: var(--llm-fs-11, 11px);
  font-weight: 500;
  padding: 2px 10px;
  font-family: inherit;
  line-height: 1.5;
  background: var(--fill-quinary, var(--fill-quaternary));
  color: var(--fill-secondary);
}

.llm-inline-edit-header-cancel:hover {
  opacity: 0.8;
}

/* The borrowed input section sits flush inside the widget */
.llm-inline-edit-wrapper > .llm-input-section {
  border: none;
  border-radius: 0;
  margin: 0;
  box-shadow: none;
}

/* In inline edit, show context hover cards below the chip so the textarea/header
   do not occlude them. */
.llm-inline-edit-wrapper .llm-selected-context-expanded {
  top: calc(100% + 8px);
  bottom: auto;
}

.llm-user-selected-text {
  align-self: flex-end;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  width: clamp(140px, 46%, 320px);
  max-width: 100%;
  padding: 3px 8px;
  margin: 0;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--fill-secondary);
  text-align: left;
  cursor: pointer;
  font-size: var(--llm-fs-12);
  line-height: 1.25;
  overflow: hidden;
}

.llm-user-selected-text:hover {
  color: var(--fill-primary);
}

.llm-user-selected-text:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 1px;
}

.llm-user-selected-text-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  opacity: 0.9;
}

.llm-user-selected-text-icon.llm-context-glyph-icon {
  font-size: var(--llm-fs-12);
  line-height: 14px;
}

.llm-user-selected-text-content {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-user-selected-text.expanded {
  color: var(--fill-primary);
}

.llm-user-selected-text-expanded {
  align-self: flex-end;
  width: min(95%, 620px);
  max-height: 220px;
  overflow: auto;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--fill-primary);
  font-size: var(--llm-fs-12);
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.llm-user-context-badges {
  align-self: flex-end;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  width: auto;
  max-width: min(95%, 620px);
}

.llm-user-screenshots-bar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  max-width: 100%;
  padding: 3px 8px;
  margin: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--fill-secondary);
  text-align: left;
  cursor: pointer;
  font-size: var(--llm-fs-12);
  line-height: 1.25;
  overflow: hidden;
}

.llm-user-files-bar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  max-width: 100%;
  padding: 3px 8px;
  margin: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--fill-secondary);
  text-align: left;
  cursor: pointer;
  font-size: var(--llm-fs-12);
  line-height: 1.25;
  overflow: hidden;
}

.llm-user-files-bar:hover {
  color: var(--fill-primary);
}

.llm-user-files-bar:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 1px;
}

.llm-user-files-bar.expanded {
  color: var(--fill-primary);
}

.llm-user-files-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  opacity: 0.9;
}

.llm-user-files-label {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-user-files-expanded {
  align-self: flex-end;
  width: min(95%, 620px);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
}

.llm-user-files-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.llm-user-files-item {
  appearance: none;
  -moz-appearance: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0 10px;
  width: 100%;
  min-height: 50px;
  padding: 6px 8px;
  margin: 0;
  border: 1px solid var(--stroke-secondary);
  border-radius: 10px;
  background: color-mix(
    in srgb,
    var(--material-background) 84%,
    var(--fill-quinary)
  );
  text-align: left;
  color: inherit;
  font: inherit;
}

.llm-user-files-item-openable {
  cursor: pointer;
}

.llm-user-files-item-openable:hover {
  background: color-mix(
    in srgb,
    var(--color-accent) 12%,
    var(--material-background)
  );
}

.llm-user-files-item-openable:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 1px;
}

.llm-user-files-item-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  border-radius: 10px;
  background: color-mix(
    in srgb,
    var(--color-accent) 10%,
    var(--material-background)
  );
  color: var(--fill-primary);
  font-size: var(--llm-fs-12);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.llm-user-files-item-text {
  display: grid;
  gap: 2px;
  min-width: 0;
  width: 100%;
}

.llm-user-files-item-name {
  display: block;
  color: var(--fill-primary);
  font-size: var(--llm-fs-11);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-user-files-item-meta {
  display: block;
  color: var(--fill-tertiary);
  font-size: var(--llm-fs-10);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-user-papers-bar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  max-width: 100%;
  padding: 3px 8px;
  margin: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--fill-secondary);
  text-align: left;
  cursor: pointer;
  font-size: var(--llm-fs-12);
  line-height: 1.25;
  overflow: hidden;
}

.llm-user-papers-bar:hover {
  color: var(--fill-primary);
}

.llm-user-papers-bar:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 1px;
}

.llm-user-papers-bar.expanded {
  color: var(--fill-primary);
}

.llm-user-papers-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  opacity: 0.9;
}

.llm-user-papers-label {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-user-papers-expanded {
  align-self: flex-end;
  width: min(95%, 620px);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
}

.llm-user-papers-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.llm-user-papers-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px;
  padding: 7px 9px;
  border: 1px solid var(--stroke-secondary);
  border-radius: 10px;
  background: color-mix(
    in srgb,
    var(--material-background) 84%,
    var(--fill-quinary)
  );
}

.llm-user-papers-item-title {
  display: block;
  grid-column: 1;
  color: var(--fill-primary);
  font-size: var(--llm-fs-11);
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-user-papers-item-meta {
  display: block;
  grid-column: 1;
  color: var(--fill-tertiary);
  font-size: var(--llm-fs-10);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-user-papers-item-attachment {
  display: block;
  grid-column: 1;
  color: var(--fill-tertiary);
  font-size: var(--llm-fs-10);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-user-papers-item-badge {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: var(--llm-fs-10);
  line-height: 1.2;
}

.llm-user-papers-item-badge-pdf {
  background: color-mix(in srgb, #8b5cf6 18%, transparent);
  color: #8b5cf6;
}

.llm-user-papers-item-badge-text {
  background: color-mix(in srgb, var(--color-accent, #3584e4) 14%, transparent);
  color: var(--color-accent, #3584e4);
}

.llm-user-papers-item-badge-md {
  background: color-mix(in srgb, #10b981 18%, transparent);
  color: #10b981;
}

.llm-user-papers-item-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  border-radius: 6px;
  background: color-mix(
    in srgb,
    var(--color-accent) 10%,
    var(--material-background)
  );
  color: var(--fill-primary);
  font-size: var(--llm-fs-10);
  font-weight: 600;
  line-height: 1.2;
  padding: 2px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-user-screenshots-bar:hover {
  color: var(--fill-primary);
}

.llm-user-screenshots-bar:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 1px;
}

.llm-user-screenshots-bar.expanded {
  color: var(--fill-primary);
}

.llm-user-screenshots-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  opacity: 0.9;
}

.llm-user-screenshots-label {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-user-screenshots-expanded {
  align-self: flex-end;
  width: min(95%, 620px);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
}

.llm-message-wrapper.user.llm-user-context-aligned .llm-user-selected-text,
.llm-message-wrapper.user.llm-user-context-aligned
  .llm-user-selected-text-expanded,
.llm-message-wrapper.user.llm-user-context-aligned
  .llm-user-screenshots-expanded,
.llm-message-wrapper.user.llm-user-context-aligned .llm-user-files-expanded,
.llm-message-wrapper.user.llm-user-context-aligned .llm-user-papers-expanded {
  width: var(--llm-user-bubble-width, min(95%, 620px));
  max-width: var(--llm-user-bubble-width, min(95%, 620px));
  box-sizing: border-box;
}

.llm-message-wrapper.user.llm-user-context-aligned .llm-user-context-badges {
  width: var(--llm-user-bubble-width, min(95%, 620px));
  max-width: var(--llm-user-bubble-width, min(95%, 620px));
  box-sizing: border-box;
  justify-content: flex-start;
}

.llm-user-tag-context-chip .llm-tag-chip-label {
  color: var(--fill-secondary);
  padding-left: 0;
}

.llm-user-tag-context-chip .llm-tag-chip-header {
  padding-right: 0;
}

.llm-message-wrapper.user .llm-message-meta {
  margin-right: 8px;
}

.llm-user-screenshots-thumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
}

.llm-user-screenshot-thumb {
  appearance: none;
  -moz-appearance: none;
  display: block;
  flex: 0 0 var(--llm-screenshot-thumb-size);
  border: 1px solid var(--stroke-secondary);
  background: transparent;
  border-radius: 6px;
  padding: 0;
  width: var(--llm-screenshot-thumb-size);
  min-width: var(--llm-screenshot-thumb-size);
  max-width: var(--llm-screenshot-thumb-size);
  height: var(--llm-screenshot-thumb-size);
  min-height: var(--llm-screenshot-thumb-size);
  max-height: var(--llm-screenshot-thumb-size);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
  line-height: 0;
}

.llm-user-screenshot-thumb:hover {
  border-color: var(--color-accent);
}

.llm-user-screenshot-thumb.active {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

.llm-user-screenshot-thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.llm-user-screenshots-preview {
  width: 100%;
  max-width: 100%;
  border-radius: 8px;
  border: 1px solid var(--stroke-secondary);
  background: rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.llm-user-screenshots-preview-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.llm-bubble.assistant {
  background: transparent;
  color: var(--fill-primary);
  border-radius: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.llm-assistant-generated-images {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(100%, 620px);
  max-width: 100%;
  margin-top: 8px;
}

.llm-assistant-generated-image-frame {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--stroke-secondary);
  border-radius: 8px;
  background: color-mix(in srgb, var(--material-background) 86%, transparent);
}

.llm-assistant-generated-image-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--stroke-secondary) 75%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--material-background) 88%, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, #000 18%, transparent);
  opacity: 0;
  transform: translateY(-2px);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
  backdrop-filter: blur(8px);
}

.llm-assistant-generated-image-frame:hover
  .llm-assistant-generated-image-actions,
.llm-assistant-generated-image-frame:focus-within
  .llm-assistant-generated-image-actions {
  opacity: 1;
  transform: translateY(0);
}

.llm-generated-image-action {
  appearance: none;
  -moz-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--stroke-secondary) 85%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--material-background) 92%, transparent);
  color: var(--fill-secondary);
  cursor: pointer;
}

.llm-generated-image-action::before {
  content: "";
  width: 16px;
  height: 16px;
  display: block;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.llm-generated-image-action:hover:not(:disabled),
.llm-generated-image-action:focus-visible {
  color: var(--fill-primary);
  background: color-mix(
    in srgb,
    var(--material-background) 84%,
    var(--color-accent) 16%
  );
}

.llm-generated-image-action:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.llm-generated-image-action:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.llm-generated-image-action-copy::before {
  mask-image: url("icons/action-copy.svg");
  -webkit-mask-image: url("icons/action-copy.svg");
}

.llm-generated-image-action-save::before {
  mask-image: url("icons/action-save.svg");
  -webkit-mask-image: url("icons/action-save.svg");
}

.llm-generated-image-action-open::before {
  mask-image: url("icons/folder-open.svg");
  -webkit-mask-image: url("icons/folder-open.svg");
}

.llm-assistant-generated-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.llm-assistant-generated-image-caption {
  min-width: 0;
  padding: 6px 8px;
  border-top: 1px solid var(--stroke-secondary);
  color: var(--fill-tertiary);
  font-size: var(--llm-fs-11);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-model-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.llm-model-name {
  font-size: var(--llm-fs-10);
  line-height: 1.2;
  color: var(--fill-tertiary);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Message Meta */
.llm-message-meta {
  --llm-meta-action-gap: 8px;
  display: flex;
  align-items: center;
  gap: var(--llm-meta-action-gap);
  padding: 0 4px;
}

.llm-message-time {
  font-size: var(--llm-fs-10);
  color: var(--fill-tertiary);
}

.llm-message-actions {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.llm-edit-latest,
.llm-message-action {
  appearance: none;
  -moz-appearance: none;
  display: inline-flex;
  flex: 0 0 18px;
  align-items: center;
  justify-content: center;
  width: 18px;
  min-width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--fill-tertiary);
  font-size: var(--llm-fs-11);
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
  transition:
    color 120ms ease,
    background 120ms ease,
    opacity 120ms ease;
}

.llm-message-action::before {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

/* Footer action buttons are rebuilt with chat DOM refreshes, so their masks stay inline instead of using external chrome-resource SVG URLs. */
.llm-message-action-retry::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M20%2011a8%208%200%201%200-2.35%205.65%22%20%2F%3E%20%3Cpath%20d%3D%22M20%204v7h-7%22%20%2F%3E%20%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M20%2011a8%208%200%201%200-2.35%205.65%22%20%2F%3E%20%3Cpath%20d%3D%22M20%204v7h-7%22%20%2F%3E%20%3C%2Fsvg%3E");
}

.llm-message-action-copy::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%20%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8%207a3%203%200%200%201%203-3h7a3%203%200%200%201%203%203v7a3%203%200%200%201-3%203h-1v-2h1a1%201%200%200%200%201-1V7a1%201%200%200%200-1-1h-7a1%201%200%200%200-1%201v1H8V7Z%22%2F%3E%20%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M3%2011a3%203%200%200%201%203-3h7a3%203%200%200%201%203%203v7a3%203%200%200%201-3%203H6a3%203%200%200%201-3-3v-7Zm3-1a1%201%200%200%200-1%201v7a1%201%200%200%200%201%201h7a1%201%200%200%200%201-1v-7a1%201%200%200%200-1-1H6Z%22%2F%3E%20%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%20%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8%207a3%203%200%200%201%203-3h7a3%203%200%200%201%203%203v7a3%203%200%200%201-3%203h-1v-2h1a1%201%200%200%200%201-1V7a1%201%200%200%200-1-1h-7a1%201%200%200%200-1%201v1H8V7Z%22%2F%3E%20%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M3%2011a3%203%200%200%201%203-3h7a3%203%200%200%201%203%203v7a3%203%200%200%201-3%203H6a3%203%200%200%201-3-3v-7Zm3-1a1%201%200%200%200-1%201v7a1%201%200%200%200%201%201h7a1%201%200%200%200%201-1v-7a1%201%200%200%200-1-1H6Z%22%2F%3E%20%3C%2Fsvg%3E");
}

.llm-message-action-note::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M5.5%203.5h13v11.8l-5.2%205.2H5.5z%22%20%2F%3E%20%3Cpath%20d%3D%22M13.5%2020.5v-5.2h5%22%20%2F%3E%20%3Cpath%20d%3D%22M5.5%203.5h13v4.2h-13z%22%20fill%3D%22%23000%22%20stroke%3D%22none%22%20%2F%3E%20%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linejoin%3D%22round%22%20%3E%20%3Cpath%20d%3D%22M5.5%203.5h13v11.8l-5.2%205.2H5.5z%22%20%2F%3E%20%3Cpath%20d%3D%22M13.5%2020.5v-5.2h5%22%20%2F%3E%20%3Cpath%20d%3D%22M5.5%203.5h13v4.2h-13z%22%20fill%3D%22%23000%22%20stroke%3D%22none%22%20%2F%3E%20%3C%2Fsvg%3E");
}

.llm-message-action-fork::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M5.5%204.75V14.25%22%20stroke%3D%22%23111111%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M5.5%2010H8.25C10.4591%2010%2012.25%208.20914%2012.25%206V5.75%22%20stroke%3D%22%23111111%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Ccircle%20cx%3D%225.5%22%20cy%3D%224.75%22%20r%3D%222%22%20stroke%3D%22%23111111%22%20stroke-width%3D%221.6%22%2F%3E%20%3Ccircle%20cx%3D%225.5%22%20cy%3D%2214.25%22%20r%3D%222%22%20stroke%3D%22%23111111%22%20stroke-width%3D%221.6%22%2F%3E%20%3Ccircle%20cx%3D%2212.25%22%20cy%3D%224.75%22%20r%3D%222%22%20stroke%3D%22%23111111%22%20stroke-width%3D%221.6%22%2F%3E%20%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M5.5%204.75V14.25%22%20stroke%3D%22%23111111%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M5.5%2010H8.25C10.4591%2010%2012.25%208.20914%2012.25%206V5.75%22%20stroke%3D%22%23111111%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Ccircle%20cx%3D%225.5%22%20cy%3D%224.75%22%20r%3D%222%22%20stroke%3D%22%23111111%22%20stroke-width%3D%221.6%22%2F%3E%20%3Ccircle%20cx%3D%225.5%22%20cy%3D%2214.25%22%20r%3D%222%22%20stroke%3D%22%23111111%22%20stroke-width%3D%221.6%22%2F%3E%20%3Ccircle%20cx%3D%2212.25%22%20cy%3D%224.75%22%20r%3D%222%22%20stroke%3D%22%23111111%22%20stroke-width%3D%221.6%22%2F%3E%20%3C%2Fsvg%3E");
}

.llm-message-action-delete::before {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M3%206h18%22%20%2F%3E%20%3Cpath%20d%3D%22M8%206V4h8v2%22%20%2F%3E%20%3Cpath%20d%3D%22M19%206l-1%2014H6L5%206%22%20%2F%3E%20%3Cpath%20d%3D%22M10%2011v6%22%20%2F%3E%20%3Cpath%20d%3D%22M14%2011v6%22%20%2F%3E%20%3C%2Fsvg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M3%206h18%22%20%2F%3E%20%3Cpath%20d%3D%22M8%206V4h8v2%22%20%2F%3E%20%3Cpath%20d%3D%22M19%206l-1%2014H6L5%206%22%20%2F%3E%20%3Cpath%20d%3D%22M10%2011v6%22%20%2F%3E%20%3Cpath%20d%3D%22M14%2011v6%22%20%2F%3E%20%3C%2Fsvg%3E");
}

.llm-edit-latest:hover:not(:disabled),
.llm-edit-latest:focus-visible,
.llm-message-action:hover:not(:disabled),
.llm-message-action:focus-visible {
  color: var(--fill-primary);
  background: var(--fill-quaternary);
  opacity: 1;
}

.llm-edit-latest:disabled,
.llm-message-action:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.llm-copy-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  font-size: var(--llm-fs-11);
  opacity: 0.6;
  transition: opacity 0.15s;
}

.llm-copy-btn:hover {
  opacity: 1;
}

.llm-agent-activity {
  --llm-agent-surface-bg: rgba(0, 0, 0, 0.15);
  --llm-agent-surface-padding: 10px 12px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.llm-agent-activity-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.llm-agent-pending-action-shell {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--stroke-secondary);
  border-radius: 16px;
  background: var(--material-background);
}

.llm-agent-pending-action-shell > .llm-agent-hitl-card {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.llm-agent-reasoning {
  --llm-thinking-rail: color-mix(
    in srgb,
    var(--fill-tertiary) 50%,
    transparent
  );
  margin-top: 4px;
  margin-bottom: 2px;
}

.llm-agent-reasoning-summary {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  font-size: var(--llm-fs-11);
  font-weight: 600;
  color: var(--fill-secondary);
  padding: 2px 0;
  transition: color 120ms ease;
}

.llm-agent-reasoning-summary::-webkit-details-marker {
  display: none;
}

.llm-agent-reasoning-summary::before {
  content: "";
  display: inline-block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  mask-image: url("icons/action-reasoning-brain.svg");
  -webkit-mask-image: url("icons/action-reasoning-brain.svg");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: contain;
  -webkit-mask-size: contain;
}

.llm-agent-reasoning-summary::after {
  content: "▸";
  display: inline-block;
  margin-left: 1px;
  font-size: var(--llm-fs-11);
  line-height: 1;
  color: var(--fill-secondary);
  transform-origin: 45% 50%;
  transition:
    transform 120ms ease,
    color 120ms ease;
}

.llm-agent-reasoning-summary:hover,
.llm-agent-reasoning-summary:focus-visible {
  color: var(--fill-primary);
}

.llm-agent-reasoning[open] > .llm-agent-reasoning-summary::after {
  transform: rotate(90deg);
}

.llm-agent-reasoning-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0 6px 10px;
  border-left: 2px solid var(--llm-thinking-rail);
  margin-left: 4px;
  margin-top: 2px;
}

.llm-agent-reasoning-block {
  padding: 0;
  border-left: none;
}

.llm-agent-reasoning-label {
  font-size: var(--llm-fs-10);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fill-tertiary);
  margin-bottom: 4px;
}

.llm-agent-reasoning-text {
  font-size: var(--llm-fs-11);
  line-height: 1.5;
  color: var(--fill-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

.llm-agent-hitl-card {
  margin: 6px 0 0;
  padding: var(--llm-agent-surface-padding);
  border-radius: 6px;
  background: var(--llm-agent-surface-bg);
  color: var(--fill-secondary);
}

.llm-agent-process-message {
  color: var(--fill-primary);
  font-size: var(--llm-fs-11);
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.llm-agent-process-message-neutral {
  color: var(--fill-primary);
}

.llm-agent-process-message-success {
  color: var(--fill-primary);
}

.llm-agent-process-message-warning {
  color: var(--fill-primary);
}

.llm-agent-process-message-markdown {
  font-size: var(--llm-fs-12);
  line-height: 1.5;
}

.llm-agent-process-message-markdown > p:first-child {
  margin-top: 0;
}

.llm-agent-process-message-markdown > p:last-child {
  margin-bottom: 0;
}

.llm-agent-output-divider {
  height: 0;
  margin: 2px 0 0;
  border-top: 1px solid
    color-mix(in srgb, var(--stroke-secondary) 72%, transparent);
}

.llm-agent-inline-text {
  color: var(--fill-primary);
  font-size: var(--llm-fs-12);
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  padding-top: 2px;
}

.llm-agent-inline-text > p:first-child {
  margin-top: 0;
}
.llm-agent-inline-text > p:last-child {
  margin-bottom: 0;
}

.llm-agent-process-action {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.llm-agent-process-action-expandable {
  display: block;
}

.llm-agent-process-action-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  list-style: none;
}

.llm-agent-process-action-summary::-webkit-details-marker {
  display: none;
}

.llm-agent-process-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 18px;
}

.llm-agent-process-chip {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 8px;
  background: color-mix(
    in srgb,
    var(--material-background) 84%,
    var(--fill-quinary)
  );
  color: var(--fill-secondary);
  font-size: var(--llm-fs-10);
  line-height: 1.25;
  overflow: visible;
}

.llm-agent-process-chip-icon {
  flex: 0 0 auto;
  opacity: 0.92;
}

.llm-agent-process-chip-icon.llm-context-svg-icon {
  width: 12px;
  height: 12px;
}

.llm-agent-process-chip-icon:not(.llm-context-svg-icon) {
  font-size: var(--llm-fs-12);
  line-height: 1;
}

.llm-agent-process-chip-label {
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* ── Online Search Results (selectable paper cards from search_literature_online) ── */

.llm-search-results {
  width: 100%;
  box-sizing: border-box;
}

.llm-search-results-list {
  display: flex;
  flex-direction: column;
  border: var(--llm-action-surface-border);
  border-radius: var(--llm-action-surface-radius);
  background: var(--llm-action-surface-bg);
  overflow: hidden;
}

.llm-search-results-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid
    color-mix(in srgb, var(--stroke-secondary) 70%, transparent);
  cursor: default;
}

label.llm-search-results-item {
  cursor: pointer;
}

.llm-search-results-item:last-child {
  border-bottom: none;
}

label.llm-search-results-item:hover {
  background: color-mix(
    in srgb,
    var(--material-background) 50%,
    var(--fill-quinary)
  );
}

.llm-search-results-checkbox-wrap {
  flex: 0 0 auto;
  padding-top: 2px;
}

.llm-search-results-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.llm-search-results-title-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.llm-search-results-title {
  flex: 1;
  min-width: 0;
  font-size: var(--llm-action-title-size);
  font-weight: var(--llm-action-title-weight);
  color: var(--fill-primary);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.llm-search-results-open {
  flex: 0 0 auto;
  font-size: var(--llm-fs-10);
  color: var(--accent-blue);
  text-decoration: none;
  white-space: nowrap;
  padding-top: 1px;
  opacity: 0.85;
}

.llm-search-results-open:hover {
  text-decoration: underline;
  opacity: 1;
}

.llm-search-results-subtitle {
  font-size: var(--llm-fs-11);
  color: var(--fill-secondary);
  line-height: 1.3;
}

.llm-search-results-body {
  font-size: var(--llm-fs-11);
  color: var(--fill-tertiary);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.llm-search-results-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

/* Badge style shared with HITL card */
.llm-agent-hitl-badge {
  display: inline-block;
  font-size: var(--llm-fs-10);
  color: var(--fill-secondary);
  padding: 1px 6px;
  border-radius: 4px;
  background: color-mix(
    in srgb,
    var(--material-background) 84%,
    var(--fill-quinary)
  );
  line-height: 1.6;
}

.llm-at-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 6px;
  font-size: var(--llm-fs-11);
  line-height: 1.4;
  min-width: 0;
}

.llm-at-icon {
  flex: 0 0 12px;
  width: 12px;
  font-size: var(--llm-fs-11);
  font-weight: 600;
  line-height: 1.4;
  color: var(--fill-secondary);
  text-align: center;
  white-space: nowrap;
}

.llm-at-text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  color: var(--fill-secondary);
  font-size: var(--llm-fs-11);
  font-weight: 400;
}

.llm-agent-process-details {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 4px 0 2px 18px;
  padding-left: 8px;
  border-left: 1px solid
    color-mix(in srgb, var(--stroke-secondary) 80%, transparent);
}

.llm-agent-process-detail {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.llm-agent-process-detail-label {
  color: var(--fill-tertiary);
  font-size: var(--llm-fs-10);
  font-weight: 600;
  line-height: 1.25;
}

.llm-agent-process-detail-value {
  color: var(--fill-secondary);
  font-size: var(--llm-fs-11);
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
}

.llm-agent-process-detail-value-url {
  color: var(--color-accent);
}

.llm-agent-process-detail-value-code,
.llm-agent-process-detail-value-json {
  margin: 0;
  padding: 5px 8px;
  border: 1px solid var(--stroke-secondary);
  border-radius: 6px;
  background: color-mix(in srgb, var(--fill-quaternary) 80%, black 20%);
  color: var(--fill-primary);
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: var(--llm-fs-10);
}

.llm-agent-process-detail-value-code code,
.llm-agent-process-detail-value-json code {
  background: none;
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  white-space: inherit;
  overflow-wrap: inherit;
}

.llm-at-plan-text {
  color: var(--fill-secondary);
}

.llm-at-tool-text {
  color: var(--fill-secondary);
}

.llm-at-ok-text {
  color: var(--fill-secondary);
}

.llm-at-skip-text {
  color: var(--fill-tertiary);
}

.llm-at-done-text {
  color: var(--fill-secondary);
}

.llm-at-row-plan .llm-at-icon {
  color: var(--fill-secondary);
}

.llm-at-row-tool .llm-at-icon {
  color: var(--color-accent);
}

.llm-at-row-ok .llm-at-icon,
.llm-at-row-done .llm-at-icon {
  color: #4caf82;
}

.llm-at-row-skip .llm-at-icon {
  color: #f39c12;
}

.llm-at-code-block {
  margin: 3px 0 2px 20px;
  padding: 5px 10px;
  background: color-mix(in srgb, var(--fill-quaternary) 80%, black 20%);
  border: 1px solid var(--stroke-secondary);
  border-radius: 6px;
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: var(--llm-fs-10);
  line-height: 1.4;
  color: var(--fill-primary);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
}

.llm-at-code-block code {
  background: none;
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
}

.llm-agent-hitl-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
  position: relative;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--stroke-secondary);
  background: var(--material-background);
  color: var(--fill-primary);
}

.llm-agent-hitl-card[data-paged-review="true"] {
  container-type: inline-size;
}

.llm-agent-hitl-card-transition {
  min-height: 132px;
  justify-content: center;
}

.llm-agent-hitl-transition-typing {
  margin-top: 4px;
  justify-content: flex-start;
}

.llm-agent-hitl-header {
  font-size: var(--llm-action-label-size);
  font-weight: 700;
  letter-spacing: var(--llm-action-label-letter-spacing);
  text-transform: uppercase;
  color: var(--fill-tertiary);
}

.llm-agent-hitl-card[data-paged-review="true"] .llm-agent-hitl-header,
.llm-agent-hitl-card[data-paged-review="true"] .llm-agent-hitl-title,
.llm-agent-hitl-card[data-paged-review="true"] .llm-agent-hitl-description {
  padding-right: 38px;
}

.llm-agent-hitl-title {
  font-size: var(--llm-action-title-size);
  font-weight: var(--llm-action-title-weight);
  color: var(--fill-primary);
  line-height: 1.3;
}

.llm-agent-hitl-description {
  font-size: var(--llm-fs-11);
  line-height: 1.45;
  color: var(--fill-secondary);
}

.llm-agent-hitl-label {
  font-size: var(--llm-action-label-size);
  letter-spacing: var(--llm-action-label-letter-spacing);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fill-tertiary);
}

.llm-agent-hitl-page-input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: var(--llm-fs-12);
  line-height: 1.4;
  padding: 10px 12px;
  border-radius: var(--llm-action-surface-radius);
  border: var(--llm-action-surface-border);
  background: var(--llm-action-surface-bg);
  color: var(--fill-primary);
}

.llm-agent-hitl-page-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.llm-agent-hitl-page-input:disabled {
  opacity: 0.7;
}

.llm-agent-hitl-paged-top-controls:empty {
  display: none;
}

.llm-agent-hitl-paged-top-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 0;
}

.llm-agent-hitl-paged-top-field,
.llm-agent-hitl-paged-footer-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  min-width: 0;
}

.llm-agent-hitl-paged-top-field .llm-agent-hitl-label,
.llm-agent-hitl-paged-footer-field .llm-agent-hitl-label {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--llm-fs-10);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.llm-agent-hitl-paged-top-field .llm-agent-hitl-page-input,
.llm-agent-hitl-paged-footer-field .llm-agent-hitl-page-input {
  appearance: none;
  -moz-appearance: none;
  flex: 0 0 50px;
  width: 50px;
  min-width: 50px;
  max-width: 50px;
  min-height: 30px;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--fill-quaternary);
  text-align: center;
  text-align-last: center;
}

.llm-agent-hitl-refresh-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--stroke-secondary);
  border-radius: 999px;
  background: var(--fill-quaternary);
  color: var(--fill-secondary);
  cursor: pointer;
}

.llm-agent-hitl-refresh-btn::before {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  mask-image: url("icons/action-retry.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("icons/action-retry.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.llm-agent-hitl-refresh-btn:hover:not(:disabled),
.llm-agent-hitl-refresh-btn:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.llm-agent-hitl-refresh-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-accent) 38%, transparent);
  outline-offset: 2px;
}

.llm-agent-hitl-refresh-btn:disabled {
  cursor: default;
  opacity: 0.6;
}

.llm-agent-hitl-input {
  width: 100%;
  min-height: 108px;
  max-height: 260px;
  resize: vertical;
  box-sizing: border-box;
  font: inherit;
  font-size: var(--llm-fs-12);
  line-height: 1.45;
  padding: 10px 12px;
  border-radius: var(--llm-action-surface-radius);
  border: var(--llm-action-surface-border);
  background: var(--llm-action-surface-bg);
  color: var(--fill-primary);
}

.llm-agent-hitl-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.llm-agent-hitl-input:disabled {
  opacity: 0.7;
}

.llm-agent-hitl-input-code {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: var(--llm-fs-11);
  white-space: pre;
  background: color-mix(in srgb, var(--fill-quaternary) 92%, black 8%);
}

.llm-agent-hitl-code-preview {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--llm-action-surface-radius);
  border: var(--llm-action-surface-border);
  background: color-mix(in srgb, var(--fill-quaternary) 92%, black 8%);
  color: var(--fill-primary);
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: var(--llm-fs-11);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
  user-select: text;
}

.llm-agent-hitl-code-preview code {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  white-space: inherit;
  overflow-wrap: inherit;
}

/* Per-paper block used by review_table when a paper title is shown. */
.llm-agent-hitl-paper-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--llm-action-surface-padding);
  border-radius: var(--llm-action-surface-radius);
  border: var(--llm-action-surface-border);
  background: var(--llm-action-surface-bg);
  margin: 4px 0 10px;
}

.llm-agent-hitl-paper-block + .llm-agent-hitl-paper-block {
  margin-top: 6px;
}

.llm-agent-hitl-paper-block--plain {
  padding: 0;
  border: none;
  background: transparent;
  margin: 0;
}

.llm-agent-hitl-paper-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--llm-action-title-size);
  font-weight: var(--llm-action-title-weight);
  color: var(--fill-primary);
  line-height: 1.3;
}

.llm-agent-hitl-paper-title-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.llm-agent-hitl-paper-title-index {
  flex: 0 0 auto;
  font-size: var(--llm-fs-10);
  font-weight: 500;
  color: var(--fill-tertiary);
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fill-quaternary) 85%, transparent);
}

.llm-agent-hitl-review-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.llm-agent-hitl-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.llm-agent-hitl-preview-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.llm-agent-hitl-preview-image {
  width: 100%;
  aspect-ratio: 0.72;
  object-fit: cover;
  border-radius: 10px;
  background: var(--fill-quaternary);
  border: 1px solid var(--stroke-secondary);
}

.llm-agent-hitl-preview-label {
  font-size: var(--llm-fs-10);
  color: var(--fill-secondary);
}

.llm-agent-hitl-review-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.llm-agent-hitl-review-label {
  font-size: var(--llm-action-label-size);
  font-weight: 700;
  letter-spacing: var(--llm-action-label-letter-spacing);
  text-transform: uppercase;
  color: var(--fill-secondary);
}

.llm-agent-hitl-review-values {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 4px;
  align-items: stretch;
}

.llm-agent-hitl-review-column {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.llm-agent-hitl-review-arrow {
  align-self: end;
  padding-bottom: 10px;
  font-size: var(--llm-fs-12);
  color: var(--fill-tertiary);
  user-select: none;
}

.llm-agent-hitl-review-column-label {
  font-size: var(--llm-fs-10);
  color: var(--fill-tertiary);
  letter-spacing: 0.02em;
}

.llm-agent-hitl-review-value {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--fill-quaternary);
  color: var(--fill-secondary);
  font-size: var(--llm-fs-11);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-agent-hitl-review-value-multiline {
  white-space: pre-wrap;
  overflow: auto;
  text-overflow: initial;
  max-height: 144px;
}

.llm-agent-hitl-review-value-after {
  color: var(--fill-primary);
  font-weight: 500;
}

.llm-agent-hitl-review-value-empty {
  font-style: italic;
  color: var(--fill-tertiary);
}

.llm-agent-hitl-diff {
  border: 1px solid var(--stroke-secondary);
  border-radius: 10px;
  overflow: hidden;
  background: color-mix(in srgb, var(--fill-quaternary) 86%, black 14%);
}

.llm-agent-hitl-diff-body {
  display: flex;
  flex-direction: column;
}

.llm-agent-hitl-diff-line {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: stretch;
  min-width: 0;
  border-top: 1px solid
    color-mix(in srgb, var(--stroke-secondary) 70%, transparent);
}

.llm-agent-hitl-diff-line:first-child {
  border-top: 0;
}

.llm-agent-hitl-diff-line-context {
  background: color-mix(in srgb, var(--fill-quaternary) 92%, transparent);
}

.llm-agent-hitl-diff-line-add {
  background: rgba(34, 197, 94, 0.14);
}

.llm-agent-hitl-diff-line-remove {
  background: rgba(239, 68, 68, 0.14);
}

.llm-agent-hitl-diff-gutter {
  display: grid;
  grid-template-columns: 1fr 14px;
  gap: 2px;
  align-items: center;
  padding: 3px 4px 3px 6px;
  border-right: 1px solid
    color-mix(in srgb, var(--stroke-secondary) 70%, transparent);
  color: var(--fill-tertiary);
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: var(--llm-fs-9);
  line-height: 1.35;
}

.llm-agent-hitl-diff-line-number {
  text-align: right;
}

.llm-agent-hitl-diff-marker {
  text-align: center;
  font-weight: 700;
}

.llm-agent-hitl-diff-line-add .llm-agent-hitl-diff-marker,
.llm-agent-hitl-diff-line-add .llm-agent-hitl-diff-segment-add {
  color: #7ce4a1;
}

.llm-agent-hitl-diff-line-remove .llm-agent-hitl-diff-marker,
.llm-agent-hitl-diff-line-remove .llm-agent-hitl-diff-segment-remove {
  color: #ff9f9f;
}

.llm-agent-hitl-diff-content {
  margin: 0;
  padding: 3px 10px;
  min-width: 0;
  min-height: 1.35em;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: var(--llm-fs-10);
  line-height: 1.35;
  color: var(--fill-primary);
}

.llm-agent-hitl-diff-segment-add {
  background: rgba(34, 197, 94, 0.18);
  border-radius: 4px;
}

.llm-agent-hitl-diff-segment-remove {
  background: rgba(239, 68, 68, 0.18);
  border-radius: 4px;
}

.llm-agent-hitl-diff-gap,
.llm-agent-hitl-diff-empty {
  padding: 4px 10px;
  font-size: var(--llm-fs-10);
  color: var(--fill-tertiary);
  background: color-mix(in srgb, var(--fill-quaternary) 94%, transparent);
}

.llm-agent-hitl-diff-gap {
  text-align: center;
  border-top: 1px solid
    color-mix(in srgb, var(--stroke-secondary) 70%, transparent);
  border-bottom: 1px solid
    color-mix(in srgb, var(--stroke-secondary) 70%, transparent);
}

.llm-agent-hitl-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.llm-agent-hitl-checklist-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.llm-agent-hitl-checklist-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.llm-agent-hitl-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--llm-action-surface-padding);
  border-radius: var(--llm-action-surface-radius);
  background: var(--llm-action-surface-bg);
  border: var(--llm-action-surface-border);
}

.llm-agent-hitl-checklist-checkbox {
  margin-top: 3px;
  flex: 0 0 auto;
}

.llm-agent-hitl-checklist-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.llm-agent-hitl-checklist-title {
  font-size: var(--llm-action-title-size);
  font-weight: var(--llm-action-title-weight);
  color: var(--fill-primary);
  line-height: 1.3;
}

.llm-agent-hitl-checklist-description {
  font-size: var(--llm-fs-10);
  line-height: 1.4;
  color: var(--fill-secondary);
  white-space: pre-wrap;
}

.llm-agent-hitl-assignment-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.llm-agent-hitl-assignment-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(132px, 42%);
  gap: 12px;
  align-items: center;
  padding: var(--llm-action-surface-padding);
  border-radius: var(--llm-action-surface-radius);
  background: var(--llm-action-surface-bg);
  border: var(--llm-action-surface-border);
}

.llm-agent-hitl-assignment-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.llm-agent-hitl-assignment-title {
  font-size: var(--llm-action-title-size);
  font-weight: var(--llm-action-title-weight);
  color: var(--fill-primary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.llm-agent-hitl-assignment-description {
  font-size: var(--llm-fs-10);
  line-height: 1.4;
  color: var(--fill-secondary);
  white-space: pre-wrap;
}

.llm-agent-hitl-assignment-control {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.llm-agent-hitl-assignment-select-label {
  font-size: var(--llm-action-label-size);
  letter-spacing: var(--llm-action-label-letter-spacing);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fill-tertiary);
}

.llm-agent-hitl-assignment-select {
  width: 100%;
  min-width: 0;
}

.llm-agent-hitl-tag-input {
  width: 100%;
  min-width: 0;
}

.llm-agent-hitl-tag-editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.llm-agent-hitl-tag-chip-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.llm-agent-hitl-tag-chip {
  min-width: 0;
  max-width: 100%;
}

.llm-agent-hitl-tag-chip-header {
  gap: 0;
  padding-right: 4px;
  cursor: text;
}

.llm-agent-hitl-tag-chip-input {
  min-width: 44px;
  max-width: 100%;
  width: auto;
  border: none;
  background: transparent;
  color: var(--fill-primary);
  font: inherit;
  font-size: var(--llm-fs-12);
  line-height: 1.25;
  box-sizing: content-box;
  outline: none;
}

.llm-agent-hitl-tag-chip-input::placeholder {
  color: var(--fill-tertiary);
}

.llm-agent-hitl-tag-chip-remove {
  flex: 0 0 auto;
}

.llm-agent-hitl-tag-add {
  appearance: none;
  -moz-appearance: none;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  padding: 6px 12px;
  border: 1px dashed var(--stroke-secondary);
  border-radius: 999px;
  background: transparent;
  color: var(--fill-secondary);
  font: inherit;
  font-size: var(--llm-fs-12);
  line-height: 1.2;
  cursor: pointer;
}

.llm-agent-hitl-tag-add:hover,
.llm-agent-hitl-tag-add:focus-visible {
  border-color: var(--color-accent);
  color: var(--fill-primary);
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
}

.llm-agent-hitl-action-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.llm-agent-hitl-action-choices[hidden] {
  display: none;
}

.llm-agent-hitl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.llm-agent-hitl-paged-actions {
  display: grid;
  grid-template-areas:
    "confirm page cancel"
    "left items right";
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 10px;
  width: 100%;
  margin-top: 10px;
}

.llm-agent-hitl-paged-actions-slot {
  min-width: 0;
  display: flex;
  align-items: center;
}

.llm-agent-hitl-paged-actions .llm-agent-hitl-btn {
  position: static;
  flex: 0 0 auto;
}

.llm-agent-hitl-paged-actions-left {
  grid-area: left;
  justify-content: flex-start;
}

.llm-agent-hitl-paged-actions-center {
  display: contents;
}

.llm-agent-hitl-paged-actions-right {
  grid-area: right;
  justify-content: flex-end;
}

.llm-agent-hitl-paged-confirm-btn {
  grid-area: confirm;
  justify-self: start;
}

.llm-agent-hitl-paged-cancel-btn {
  grid-area: cancel;
  justify-self: end;
}

.llm-agent-hitl-page-indicator {
  grid-area: page;
  flex: 0 0 auto;
  justify-self: center;
  color: var(--fill-tertiary);
  font-size: var(--llm-fs-10);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.llm-agent-hitl-paged-footer-controls {
  grid-area: items;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@container (max-width: 420px) {
  .llm-agent-hitl-paged-actions {
    column-gap: 6px;
  }

  .llm-agent-hitl-paged-footer-field .llm-agent-hitl-label {
    display: none;
  }

  .llm-agent-hitl-paged-actions .llm-agent-hitl-btn {
    padding-inline: 8px;
  }
}

.llm-agent-hitl-btn {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: var(--llm-fs-10);
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: #fff;
}

.llm-agent-hitl-paged-nav-btn {
  white-space: nowrap;
}

.llm-agent-hitl-btn-alt {
  border-color: color-mix(in srgb, var(--color-accent) 70%, white 30%);
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
  color: var(--fill-primary);
}

.llm-agent-hitl-btn-secondary {
  border-color: var(--stroke-secondary);
  background: transparent;
  color: var(--fill-secondary);
}

.llm-agent-hitl-btn-active {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 22%, transparent);
}

.llm-agent-hitl-btn:disabled,
.llm-agent-hitl-btn-alt:disabled,
.llm-agent-hitl-btn-secondary:disabled {
  opacity: 0.6;
}

/* Sort controls in search results toolbar */
.llm-search-sort-separator {
  flex: 1;
}

/* Mode toggle tabs at the top of a multi-mode paper_result_list (e.g.
   Recommendations / References / Citations on discover_related). */
.llm-search-mode-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  margin-bottom: 8px;
  border-radius: var(--llm-action-surface-radius);
  background: var(--llm-action-surface-bg);
  border: var(--llm-action-surface-border);
}

.llm-search-mode-tab {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  flex: 1 1 auto;
  text-align: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: var(--llm-fs-11);
  font-weight: 500;
  color: var(--fill-secondary);
}

.llm-search-mode-tab:hover {
  background: color-mix(in srgb, var(--fill-quaternary) 60%, transparent);
  color: var(--fill-primary);
}

.llm-search-mode-tab-active {
  background: var(--color-accent, #3584e4);
  color: #fff;
}

.llm-search-mode-tab-active:hover {
  background: var(--color-accent, #3584e4);
  color: #fff;
  opacity: 0.9;
}

.llm-search-mode-tab:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* "Select all" single-checkbox (replaces the Select all / Deselect all
   button pair at the top of paper_result_list). */
.llm-search-select-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: var(--llm-fs-11);
  color: var(--fill-secondary);
  padding: 4px 8px 4px 2px;
}

.llm-search-select-all:hover {
  color: var(--fill-primary);
}

.llm-search-select-all-checkbox {
  margin: 0;
  flex: 0 0 auto;
}

.llm-search-select-all-checkbox:disabled + .llm-search-select-all-text {
  opacity: 0.55;
}

/* "Load more" button shown at the bottom of the list when the field has
   `loadMoreActionId`. Clicking it resolves the card with the load_more
   action, which the driving action handles by fetching an expanded result
   set and re-invoking requestConfirmation. */
.llm-search-load-more-wrap {
  display: flex;
  justify-content: center;
  padding: 10px 4px 2px;
}

.llm-search-load-more-btn {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  padding: 6px 18px;
  border-radius: 999px;
  font-size: var(--llm-fs-11);
  font-weight: 500;
  color: var(--fill-secondary);
  border: 1px solid color-mix(in srgb, var(--stroke-secondary) 80%, transparent);
  background: var(--llm-action-surface-bg);
}

.llm-search-load-more-btn:hover {
  color: var(--fill-primary);
  border-color: var(--color-accent, #3584e4);
  background: color-mix(in srgb, var(--color-accent, #3584e4) 10%, transparent);
}

.llm-search-load-more-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

/* Shown when the active mode has no results. */
.llm-search-results-empty {
  padding: 14px 16px;
  border: 1px dashed
    color-mix(in srgb, var(--stroke-secondary) 60%, transparent);
  border-radius: var(--llm-action-surface-radius);
  background: var(--llm-action-surface-bg);
  font-size: var(--llm-fs-11);
  color: var(--fill-tertiary);
  font-style: italic;
  text-align: center;
}

.llm-search-sort-group {
  display: flex;
  align-items: center;
  gap: 3px;
}

.llm-search-sort-label {
  font-size: var(--llm-fs-10);
  color: var(--fill-secondary);
  margin-right: 2px;
}

.llm-search-sort-btn {
  font-size: var(--llm-fs-10);
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--fill-secondary) 30%, transparent);
  background: transparent;
  color: var(--fill-secondary);
  cursor: pointer;
}

.llm-search-sort-btn:hover {
  background: color-mix(in srgb, var(--fill-secondary) 10%, transparent);
}

.llm-search-sort-btn.llm-search-sort-active {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
  color: var(--fill-primary);
}

/* Typing Indicator */
.llm-typing {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 12px 16px;
}

.llm-typing-text {
  color: var(--fill-secondary);
  font-size: var(--llm-fs-12);
  line-height: 1.35;
}

.llm-rose-loader {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #fff;
}

.llm-rose-loader-inline {
  width: 28px;
  height: 28px;
  color: rgb(0, 0, 0) !important;
}

.window-is-dark .llm-rose-loader-inline,
:root[lwtheme-brighttext] .llm-rose-loader-inline,
:root[sizemode][lwtheme-brighttext] .llm-rose-loader-inline {
  color: rgb(255, 255, 255) !important;
}

.llm-rose-loader-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

@media (prefers-color-scheme: dark) {
  .llm-rose-loader-inline {
    color: rgb(255, 255, 255) !important;
  }
}

.llm-typing-dot {
  width: 6px;
  height: 6px;
  background: var(--fill-tertiary);
  border-radius: 50%;
  animation: llm-typing-bounce 1.4s infinite ease-in-out both;
}

.llm-typing-dot:nth-child(1) {
  animation-delay: -0.32s;
}

.llm-typing-dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes llm-typing-bounce {
  0%,
  80%,
  100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Markdown Styles in Messages */
.llm-rendered-markdown h2,
.llm-rendered-markdown h3,
.llm-rendered-markdown h4 {
  margin: 12px 0 8px 0;
  font-weight: 600;
  line-height: 1.3;
}

.llm-rendered-markdown h2:first-child,
.llm-rendered-markdown h3:first-child,
.llm-rendered-markdown h4:first-child {
  margin-top: 0;
}

.llm-rendered-markdown h2 {
  font-size: var(--llm-fs-14);
}

.llm-rendered-markdown h3 {
  font-size: var(--llm-fs-13);
}

.llm-rendered-markdown h4 {
  font-size: var(--llm-fs-12);
}

.llm-rendered-markdown p {
  margin: 0 0 var(--llm-message-paragraph-spacing, 8px) 0;
}

.llm-rendered-markdown > p,
.llm-rendered-markdown li,
.llm-rendered-markdown > blockquote {
  font-family: var(--llm-message-font-family, inherit);
  line-height: var(--llm-message-line-height, 1.5);
  word-spacing: var(--llm-message-word-spacing, normal);
}

.llm-rendered-markdown p:last-child {
  margin-bottom: 0;
}

.llm-rendered-markdown ul,
.llm-rendered-markdown ol {
  margin: var(--llm-message-paragraph-spacing, 8px) 0;
}

.llm-rendered-markdown ul {
  padding-left: 1.6em;
}

.llm-rendered-markdown ol {
  padding-left: 2.35em;
}

.llm-rendered-markdown li {
  margin: 4px 0;
}

.llm-rendered-markdown code {
  background: rgba(0, 0, 0, 0.1);
  padding: 2px 5px;
  border-radius: 4px;
  font-family: monospace;
  font-size: var(--llm-fs-11);
  word-spacing: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.llm-rendered-markdown .llm-copyable {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
}

.llm-rendered-markdown .llm-copyable-inline {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  vertical-align: middle;
}

.llm-rendered-markdown .llm-copyable-code {
  margin: 8px 0;
  border-radius: 8px;
}

.llm-rendered-markdown .llm-render-copy-btn {
  appearance: none;
  -moz-appearance: none;
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--stroke-secondary) 85%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--material-background) 88%, transparent);
  color: var(--fill-secondary);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-2px);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    background 0.16s ease,
    color 0.16s ease,
    border-color 0.16s ease;
  backdrop-filter: blur(8px);
}

.llm-rendered-markdown .llm-render-copy-btn {
  box-shadow: 0 1px 4px color-mix(in srgb, #000 16%, transparent);
}

.llm-rendered-markdown .llm-copyable:hover > .llm-render-copy-btn,
.llm-rendered-markdown .llm-copyable:focus-within > .llm-render-copy-btn {
  opacity: 1;
  transform: translateY(0);
}

.llm-rendered-markdown
  .llm-copyable[data-copy-feedback="copied"]
  > .llm-render-copy-btn {
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
}

.llm-rendered-markdown .llm-render-copy-btn:hover {
  background: color-mix(
    in srgb,
    var(--material-background) 86%,
    var(--color-accent) 14%
  );
  color: var(--fill-primary);
}

.llm-rendered-markdown .llm-render-copy-btn:focus-visible {
  opacity: 1;
  transform: translateY(0);
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.llm-rendered-markdown .llm-copyable-inline > .llm-render-copy-btn {
  top: -10px;
  right: -10px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  font-size: 9px;
}

.llm-rendered-markdown .llm-copyable-code > .llm-render-copy-btn {
  top: 5px;
  right: 14px;
  min-width: 24px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--llm-codeblock-copy);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  font-weight: 600;
  opacity: 1;
  transform: translateY(0);
  box-shadow: none;
  backdrop-filter: none;
}

.llm-rendered-markdown .llm-copyable-code > .llm-render-copy-btn:hover {
  background: transparent;
  color: var(--llm-codeblock-copy-hover);
}

.llm-rendered-markdown
  .llm-copyable-code[data-copy-feedback="copied"]
  > .llm-render-code-copy-btn {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  color: #7dd3a8;
}

.llm-rendered-markdown
  .llm-copyable-code[data-copy-feedback="copied"]
  .llm-codeblock-header
  > .llm-render-code-copy-btn {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  color: #7dd3a8;
}

.llm-rendered-markdown pre {
  background: rgba(0, 0, 0, 0.15);
  padding: 10px 12px;
  border-radius: 6px;
  overflow-x: auto;
  margin: 8px 0;
  word-spacing: normal;
}

.llm-rendered-markdown pre code {
  background: none;
  padding: 0;
  font-size: var(--llm-fs-11);
  line-height: 1.4;
  overflow-wrap: normal;
  word-break: normal;
}

.llm-rendered-markdown .llm-codeblock-shell {
  overflow: hidden;
  border: 1px solid var(--llm-codeblock-border);
  border-radius: 8px;
  background: var(--llm-codeblock-bg);
  box-shadow: none;
}

.llm-rendered-markdown .llm-codeblock-header {
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  height: 34px;
  min-height: 0;
  padding: 0 14px 0 18px;
}

.llm-rendered-markdown .llm-codeblock-lang {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--llm-codeblock-header-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.llm-rendered-markdown .llm-codeblock-source-toggle {
  appearance: none;
  -moz-appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 24px;
  margin: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--llm-codeblock-copy);
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--llm-fs-11);
  font-weight: 600;
  line-height: 1;
  margin-left: auto;
  padding: 5px 7px;
}

.llm-rendered-markdown .llm-codeblock-source-toggle:hover {
  background: color-mix(in srgb, var(--fill-quinary) 75%, transparent);
  color: var(--llm-codeblock-copy-hover);
}

.llm-rendered-markdown .llm-codeblock-source-toggle:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 1px;
}

.llm-rendered-markdown .llm-codeblock-figure-copy {
  appearance: none;
  -moz-appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  min-width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--llm-codeblock-copy);
  cursor: pointer;
}

.llm-rendered-markdown .llm-codeblock-header > .llm-render-code-copy-btn {
  position: static;
  top: auto;
  right: auto;
  z-index: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  min-width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--llm-codeblock-copy);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  font-weight: 600;
  opacity: 1;
  transform: none;
  box-shadow: none;
  backdrop-filter: none;
}

.llm-rendered-markdown .llm-codeblock-header > .llm-render-code-copy-btn:hover {
  background: color-mix(in srgb, var(--fill-quinary) 75%, transparent);
  color: var(--llm-codeblock-copy-hover);
}

.llm-rendered-markdown .llm-codeblock-figure-copy::before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.llm-rendered-markdown .llm-codeblock-figure-copy:hover:not(:disabled),
.llm-rendered-markdown .llm-codeblock-figure-copy:focus-visible {
  background: color-mix(in srgb, var(--fill-quinary) 75%, transparent);
  color: var(--llm-codeblock-copy-hover);
}

.llm-rendered-markdown .llm-codeblock-figure-copy:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 1px;
}

.llm-rendered-markdown .llm-codeblock-figure-copy:disabled {
  cursor: default;
  opacity: 0.4;
}

.llm-rendered-markdown
  .llm-codeblock-figure-copy[data-figure-copy-state="copied"] {
  color: #7dd3a8;
  opacity: 1;
}

.llm-rendered-markdown
  .llm-codeblock-figure-copy[data-figure-copy-state="failed"],
.llm-rendered-markdown
  .llm-codeblock-figure-copy[data-figure-copy-state="unavailable"] {
  color: #f87171;
  opacity: 1;
}

.llm-rendered-markdown
  .llm-codeblock-shell[data-source-collapsed="true"]
  > .llm-codeblock-body {
  display: none;
}

.llm-rendered-markdown .llm-codeblock-body pre {
  margin: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 22px 18px 24px;
}

.llm-rendered-markdown .llm-codeblock-body pre code {
  display: block;
  min-width: max-content;
  color: var(--llm-codeblock-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.48;
}

.llm-rendered-markdown .llm-codeblock-body pre code span {
  color: var(--llm-codeblock-text);
}

.llm-rendered-markdown .llm-codeblock-body .hljs {
  background: transparent;
  color: var(--llm-codeblock-text);
}

.llm-rendered-markdown .llm-codeblock-body .hljs-keyword,
.llm-rendered-markdown .llm-codeblock-body .hljs-selector-tag,
.llm-rendered-markdown .llm-codeblock-body .hljs-built_in,
.llm-rendered-markdown .llm-codeblock-body .hljs-operator {
  color: var(--llm-codeblock-keyword);
}

.llm-rendered-markdown .llm-codeblock-body .hljs-title,
.llm-rendered-markdown .llm-codeblock-body .hljs-title.function_,
.llm-rendered-markdown .llm-codeblock-body .hljs-name,
.llm-rendered-markdown .llm-codeblock-body .hljs-tag,
.llm-rendered-markdown .llm-codeblock-body .hljs-class,
.llm-rendered-markdown .llm-codeblock-body .hljs-type {
  color: var(--llm-codeblock-title);
}

.llm-rendered-markdown .llm-codeblock-body .hljs-string,
.llm-rendered-markdown .llm-codeblock-body .hljs-attr,
.llm-rendered-markdown .llm-codeblock-body .hljs-attribute,
.llm-rendered-markdown .llm-codeblock-body .hljs-regexp,
.llm-rendered-markdown .llm-codeblock-body .hljs-link,
.llm-rendered-markdown .llm-codeblock-body .hljs-addition {
  color: var(--llm-codeblock-string);
}

.llm-rendered-markdown .llm-codeblock-body .hljs-number,
.llm-rendered-markdown .llm-codeblock-body .hljs-literal,
.llm-rendered-markdown .llm-codeblock-body .hljs-variable,
.llm-rendered-markdown .llm-codeblock-body .hljs-symbol {
  color: var(--llm-codeblock-number);
}

.llm-rendered-markdown .llm-codeblock-body .hljs-comment,
.llm-rendered-markdown .llm-codeblock-body .hljs-quote {
  color: var(--llm-codeblock-comment);
  font-style: italic;
}

.llm-rendered-markdown .llm-codeblock-body .hljs-meta,
.llm-rendered-markdown .llm-codeblock-body .hljs-doctag,
.llm-rendered-markdown .llm-codeblock-body .hljs-section,
.llm-rendered-markdown .llm-codeblock-body .hljs-deletion {
  color: var(--llm-codeblock-meta);
}

.llm-rendered-markdown .llm-svg-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 18px 10px;
  min-height: 140px;
  max-height: 260px;
  padding: 14px;
  overflow: auto;
  border-radius: 7px;
  background: var(--llm-mermaid-canvas-bg);
  border: 1px solid var(--llm-mermaid-canvas-border);
}

.llm-rendered-markdown .llm-svg-preview img {
  display: block;
  max-width: 100%;
  max-height: 230px;
  object-fit: contain;
}

.llm-rendered-markdown .llm-mermaid-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 18px 10px;
  min-height: 180px;
  max-height: 420px;
  padding: 16px;
  overflow: auto;
  border-radius: 7px;
  border: 1px solid var(--llm-mermaid-canvas-border);
  background: var(--llm-mermaid-canvas-bg);
  color: var(--fill-secondary, #4b5563);
}

.llm-rendered-markdown .llm-mermaid-preview[data-mermaid-state="rendered"] {
  display: block;
  max-height: none;
  padding: 0;
  overflow: auto;
}

.llm-rendered-markdown .llm-mermaid-static-viewport {
  box-sizing: border-box;
  width: 100%;
  min-height: 180px;
  max-height: 520px;
  padding: 16px;
  overflow: auto;
}

.llm-rendered-markdown .llm-mermaid-static-viewport svg {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: none;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}

.llm-rendered-markdown .llm-mermaid-open-btn {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 1;
}

.llm-rendered-markdown .llm-mermaid-open-btn,
.llm-mermaid-viewer .llm-mermaid-zoom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--llm-mermaid-button-bg);
  color: var(--llm-mermaid-button-text);
  font:
    600 17px/1 -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  cursor: pointer;
  box-shadow: none;
  opacity: 0.82;
  transition:
    opacity 0.12s ease,
    background 0.12s ease,
    color 0.12s ease;
}

.llm-rendered-markdown .llm-mermaid-open-btn:hover,
.llm-mermaid-viewer .llm-mermaid-zoom-btn:hover:not(:disabled) {
  border-color: var(--llm-mermaid-button-hover-border);
  background: var(--llm-mermaid-button-hover-bg);
  opacity: 1;
}

.llm-mermaid-viewer {
  --llm-mermaid-canvas-bg: #ffffff;
  --llm-mermaid-canvas-border: rgba(148, 163, 184, 0.42);
  --llm-mermaid-button-bg: transparent;
  --llm-mermaid-button-text: #4b5563;
  --llm-mermaid-button-border: transparent;
  --llm-mermaid-button-hover-bg: rgba(15, 23, 42, 0.08);
  --llm-mermaid-button-hover-border: transparent;
  --llm-mermaid-viewer-backdrop: rgba(15, 23, 42, 0.22);
  --llm-mermaid-viewer-panel-bg: #ffffff;
  --llm-mermaid-viewer-toolbar-bg: transparent;
  --llm-mermaid-viewer-toolbar-border: transparent;
  --llm-mermaid-viewer-zoom-text: #4b5563;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  background: var(--llm-mermaid-canvas-bg);
}

.llm-mermaid-viewer-panel {
  position: relative;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--llm-mermaid-viewer-panel-bg);
  box-shadow: none;
}

.llm-mermaid-viewer-toolbar {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--llm-mermaid-viewer-toolbar-bg);
  box-shadow: none;
}

.llm-mermaid-viewer .llm-mermaid-zoom-btn:disabled {
  cursor: default;
  opacity: 0.45;
}

.llm-mermaid-viewer .llm-mermaid-zoom-label {
  min-width: 42px;
  text-align: center;
  color: var(--llm-mermaid-viewer-zoom-text);
  font:
    600 12px/1 -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.llm-mermaid-viewer .llm-mermaid-viewer-close {
  margin-left: 2px;
}

.llm-mermaid-viewer-viewport {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 72px 32px 40px;
  overflow: auto;
  background: var(--llm-mermaid-canvas-bg);
}

.llm-mermaid-viewer-viewport svg {
  display: block;
  height: auto;
  margin: 0 auto;
  width: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

.llm-mermaid-window-root {
  --llm-mermaid-canvas-bg: #ffffff;
  --llm-mermaid-canvas-border: rgba(148, 163, 184, 0.42);
  --llm-mermaid-button-bg: transparent;
  --llm-mermaid-button-text: #4b5563;
  --llm-mermaid-button-border: transparent;
  --llm-mermaid-button-hover-bg: rgba(15, 23, 42, 0.08);
  --llm-mermaid-button-hover-border: transparent;
  --llm-mermaid-viewer-panel-bg: #ffffff;
  --llm-mermaid-viewer-zoom-text: #4b5563;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--llm-mermaid-canvas-bg);
  color: var(--llm-mermaid-viewer-zoom-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.llm-mermaid-window-root.llm-mermaid-theme-dark {
  --llm-mermaid-canvas-bg: #151515;
  --llm-mermaid-canvas-border: rgba(255, 255, 255, 0.12);
  --llm-mermaid-button-bg: transparent;
  --llm-mermaid-button-text: #d4d4d8;
  --llm-mermaid-button-border: transparent;
  --llm-mermaid-button-hover-bg: rgba(255, 255, 255, 0.1);
  --llm-mermaid-button-hover-border: transparent;
  --llm-mermaid-viewer-panel-bg: #151515;
  --llm-mermaid-viewer-zoom-text: #d4d4d8;
}

.llm-mermaid-window-toolbar {
  position: fixed;
  top: 18px;
  right: 22px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0;
  border: 0;
  background: transparent;
}

.llm-mermaid-window-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--llm-mermaid-button-bg);
  color: var(--llm-mermaid-button-text);
  font:
    600 17px/1 -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  cursor: pointer;
  opacity: 0.82;
  transition:
    opacity 0.12s ease,
    background 0.12s ease,
    color 0.12s ease;
}

.llm-mermaid-window-btn:hover:not(:disabled) {
  background: var(--llm-mermaid-button-hover-bg);
  opacity: 1;
}

.llm-mermaid-window-btn:disabled {
  cursor: default;
  opacity: 0.45;
}

.llm-mermaid-window-viewport {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 72px 40px 56px;
  background: var(--llm-mermaid-canvas-bg);
}

.llm-mermaid-window-stage {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
  min-width: 100%;
  min-height: 100%;
}

.llm-mermaid-window-svg {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  max-height: none;
  height: auto;
  object-fit: contain;
}

.llm-rendered-markdown .llm-mermaid-status {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  line-height: 1.4;
}

.llm-rendered-markdown .llm-mermaid-preview[data-mermaid-state="error"] {
  justify-content: flex-start;
  min-height: 0;
  background: #fff7ed;
  color: #9a3412;
}

.llm-rendered-markdown blockquote {
  border-left: 3px solid var(--color-accent);
  margin: var(--llm-message-paragraph-spacing, 8px) 0;
  padding-left: 12px;
  color: var(--fill-secondary);
  font-style: italic;
}

.llm-quote-citation-anchor {
  margin: 10px 0;
}

.llm-quote-card {
  --llm-quote-card-surface: color-mix(
    in srgb,
    var(--material-background) 96%,
    var(--fill-primary) 4%
  );
  --llm-quote-card-rail: var(--color-accent);
  border: none;
  border-radius: 6px;
  background: var(--llm-quote-card-surface);
  cursor: pointer;
  overflow: hidden;
}

.llm-quote-card[data-expanded="false"] {
  background: transparent;
}

.llm-quote-card[data-expanded="false"]:hover,
.llm-quote-card[data-expanded="false"]:focus-within {
  background: var(--llm-quote-card-surface);
}

.llm-quote-card-content {
  padding: 8px 10px 3px;
}

.llm-quote-card-content:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.llm-quote-card-preview {
  display: none;
  min-width: 0;
  border-left: 3px solid var(--llm-quote-card-rail);
  padding-left: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  color: var(--fill-secondary);
  font-size: var(--llm-fs-11);
  font-style: italic;
  line-height: 1.42;
  user-select: text;
}

.llm-quote-card[data-expanded="false"] .llm-quote-card-preview {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.llm-quote-card-citation {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
  padding: 0 9px 7px;
}

.llm-quote-card-body {
  border-left: 3px solid var(--llm-quote-card-rail);
  padding: 0 0 0 10px;
  color: var(--fill-secondary);
  font-style: italic;
  line-height: 1.5;
  white-space: pre-wrap;
  user-select: text;
}

.llm-quote-card[data-expanded="false"] .llm-quote-card-body {
  display: none;
}

.llm-rendered-markdown strong {
  font-weight: 600;
}

.llm-rendered-markdown em {
  font-style: italic;
}

.llm-rendered-markdown a {
  color: var(--color-accent);
  text-decoration: underline;
}

.llm-rendered-markdown img {
  max-width: 100%;
  border-radius: 4px;
  margin: 4px 0;
}

.llm-rendered-markdown .llm-citation-row-container {
  margin-top: 4px;
  display: block;
  max-width: 100%;
  padding-left: 0;
  overflow: visible;
}

.llm-citation-row,
.llm-citation-inline-wrap {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  vertical-align: baseline;
}

.llm-citation-text {
  color: var(--fill-secondary);
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  user-select: text;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

.llm-citation-text[role="button"] {
  cursor: pointer;
  border-radius: 3px;
}

.llm-citation-text[role="button"]:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.llm-citation-text[role="button"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.llm-citation-icon {
  appearance: none;
  -moz-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  min-width: 14px;
  height: 14px;
  padding: 0;
  margin: 0 0 0 1px;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: var(--fill-tertiary);
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}

.llm-citation-icon::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  mask-image: url("icons/citation-jump.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("icons/citation-jump.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  pointer-events: none;
}

.llm-citation-icon:hover {
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.llm-citation-icon:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-radius: 50%;
}

.llm-citation-icon[data-loading="true"] {
  opacity: 0.68;
  cursor: progress;
}

.llm-citation-icon-inline {
  width: 12px;
  min-width: 12px;
  height: 12px;
}

.llm-citation-icon-inline::before {
  width: 10px;
  height: 10px;
}

.llm-rendered-markdown hr {
  border: none;
  border-top: 1px solid var(--stroke-secondary);
  margin: 12px 0;
}

/* Math Rendering Styles (KaTeX) */

/* Display math block */
.llm-rendered-markdown .math-display {
  display: block;
  text-align: left;
  width: auto;
  max-width: 100%;
  min-width: 0;
  margin: 16px 0;
  padding: 12px 16px;
  padding-right: 44px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

/* Inline math */
.llm-rendered-markdown .math-inline {
  display: inline;
  vertical-align: baseline;
}

/* KaTeX specific styling */
.llm-rendered-markdown .katex {
  font-size: 1.1em;
}

.llm-rendered-markdown .math-display .katex {
  font-size: 1.2em;
}

.llm-rendered-markdown .katex-display {
  margin: 0 !important;
  width: auto;
  max-width: 100%;
  min-width: 0;
}

.llm-rendered-markdown .math-display > .katex-display {
  min-width: 0;
}

.llm-rendered-markdown .math-display > .katex-display > .katex {
  display: block;
  max-width: none;
  min-width: 0;
  overflow: visible;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.llm-rendered-markdown .math-display > .katex-display > .katex > .katex-html {
  box-sizing: border-box;
  min-width: 100%;
  padding-right: 3.25em;
}

.llm-rendered-markdown
  .math-display
  > .katex-display
  > .katex
  > .katex-html
  > .tag {
  right: 0;
}

/* Math error styling */
.llm-rendered-markdown .math-error {
  font-family: "Cambria Math", "Times New Roman", Georgia, serif;
  font-style: italic;
  color: #cc0000;
  background: rgba(204, 0, 0, 0.1);
  padding: 2px 4px;
  border-radius: 3px;
}

/* Fallback for blocks that failed to render */
.llm-rendered-markdown .render-fallback {
  font-family: ui-monospace, "SF Mono", Monaco, "Cascadia Code", monospace;
  font-size: 0.9em;
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(0, 0, 0, 0.04);
  padding: 8px 12px;
  border-radius: 6px;
  border-left: 3px solid rgba(0, 0, 0, 0.2);
}

/* Inline display math (within paragraphs) */
.llm-rendered-markdown .math-display-inline {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.llm-rendered-markdown .math-display-inline > .katex-display > .katex {
  display: inline-block;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.llm-rendered-markdown .llm-table-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.llm-rendered-markdown table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: var(--llm-fs-11);
  line-height: 1.5;
  word-spacing: normal;
}

.llm-rendered-markdown th,
.llm-rendered-markdown td {
  border: 1px solid var(--stroke-secondary);
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
  word-spacing: normal;
}

.llm-rendered-markdown thead th {
  background: var(--fill-quinary);
  font-weight: 600;
}

/* Input Section */
.llm-input-section {
  --llm-input-section-padding: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  min-width: 0;
  padding: var(--llm-input-section-padding);
  border-radius: 16px;
  border: 1px solid var(--stroke-secondary);
  background: var(--material-background);
}

.llm-input-section.llm-input-drop-active {
  border-color: var(--color-accent);
  background: color-mix(
    in srgb,
    var(--color-accent) 8%,
    var(--material-background)
  );
}

.llm-input.llm-input-drop-active {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
}

.llm-context-previews {
  --llm-context-preview-row-gap: 8px;
  --llm-context-preview-column-gap: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--llm-context-preview-row-gap) var(--llm-context-preview-column-gap);
  width: 100%;
  container-type: inline-size;
  position: relative;
}

.llm-agent-process-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#llm-runtime-mode-toggle {
  order: -1000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--stroke-secondary);
  background: var(--material-background);
  color: var(--fill-secondary);
  font-size: var(--llm-fs-12);
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
}

#llm-runtime-mode-toggle:hover:not(:disabled) {
  border-color: var(--stroke-primary);
  color: var(--fill-primary);
}

#llm-runtime-mode-toggle:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 1px;
}

#llm-runtime-mode-toggle:disabled {
  opacity: 0.6;
  cursor: default;
}

#llm-runtime-mode-toggle.llm-runtime-mode-static {
  cursor: default;
  border-color: var(--stroke-secondary);
  color: #d77757;
  font-weight: 700;
}

#llm-runtime-mode-toggle.llm-runtime-mode-static:hover:not(:disabled) {
  border-color: var(--stroke-secondary);
  color: #d77757;
}

#llm-runtime-mode-toggle.llm-runtime-mode-static[data-system="codex"] {
  color: var(--fill-primary, #0d0d0d);
}

#llm-runtime-mode-toggle.llm-runtime-mode-static[data-system="codex"]:hover:not(
    :disabled
  ) {
  color: var(--fill-primary, #0d0d0d);
}

#llm-runtime-mode-toggle.llm-runtime-mode-static .llm-agent-toggle-label {
  font-weight: 700;
}

.llm-context-previews > #llm-selected-context-list {
  display: contents;
}

.llm-context-previews > #llm-runtime-mode-toggle,
.llm-context-previews > #llm-selected-context-list > .llm-selected-context,
.llm-context-previews > .llm-image-preview,
.llm-context-previews > #llm-file-context-preview,
.llm-context-previews > #llm-paper-context-preview {
  flex: 0 0 auto;
  max-width: 100%;
  width: fit-content;
  margin: 0;
}

.llm-context-previews
  > #llm-selected-context-list
  > .llm-note-context-chip[data-note-chip-kind="selected"] {
  order: 1;
}

.llm-context-previews > #llm-runtime-mode-toggle,
.llm-context-previews
  > #llm-selected-context-list
  > .llm-selected-context.expanded,
.llm-context-previews > .llm-image-preview.expanded,
.llm-context-previews > #llm-file-context-preview.expanded,
.llm-context-previews > #llm-paper-context-preview.expanded {
  flex: 0 0 auto;
  width: fit-content;
}

.llm-compose-area {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.llm-paper-context-inline {
  display: none;
}

.llm-agent-toggle-label {
  min-width: 0;
}

.llm-agent-toggle-indicator {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border: 1px solid var(--fill-secondary);
  border-radius: 999px;
  box-sizing: border-box;
}

.llm-agent-toggle-indicator::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 999px;
  background: #9ca3af;
}

.llm-agent-toggle-enabled .llm-agent-toggle-indicator::after {
  background: #16a34a;
}

.llm-paper-context-inline-list {
  display: contents;
}

.llm-paper-context-chip {
  --llm-context-chip-icon-size: 18px;
  flex: 0 0 auto;
  max-width: 100%;
  width: fit-content;
}

/* Figure / other ref chip */
.llm-other-ref-chip {
  --llm-context-chip-icon-size: 18px;
  flex: 0 0 auto;
  max-width: 100%;
  width: fit-content;
}

.llm-other-ref-chip-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  padding: 3px 4px 3px 8px;
  border-radius: 8px;
  background: transparent;
  color: var(--fill-secondary);
  font-size: var(--llm-fs-12);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-other-ref-chip-icon {
  width: var(--llm-context-chip-icon-size);
  height: var(--llm-context-chip-icon-size);
  color: var(--llm-context-icon-image-color);
  opacity: 1;
}

.llm-other-ref-chip-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.llm-other-ref-chip:hover .llm-other-ref-chip-label {
  color: var(--fill-primary);
}

.llm-other-ref-chip-header {
  gap: 0;
  padding-right: 4px;
  cursor: default;
}

.llm-other-ref-chip-header .llm-other-ref-clear {
  display: grid;
  place-items: center;
  align-self: center;
  width: 14px;
  min-width: 14px;
  font-size: var(--llm-fs-12);
  line-height: 1;
  padding: 0;
  margin-left: -2px;
  transform: translateY(-1px);
}

/* Collection context chip */
.llm-collection-context-chip,
.llm-tag-context-chip {
  --llm-context-chip-icon-size: 18px;
  flex: 0 0 auto;
  max-width: 100%;
  width: fit-content;
}

.llm-collection-chip-label,
.llm-tag-chip-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  padding: 3px 4px 3px 8px;
  border-radius: 8px;
  background: transparent;
  color: var(--fill-secondary);
  font-size: var(--llm-fs-12);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-collection-chip-icon,
.llm-tag-chip-icon {
  width: var(--llm-context-chip-icon-size);
  height: var(--llm-context-chip-icon-size);
  opacity: 1;
}

.llm-collection-chip-icon {
  color: var(--llm-context-icon-collection-color);
}

.llm-tag-chip-icon {
  color: var(--llm-context-icon-tag-color);
}

.llm-collection-chip-title,
.llm-tag-chip-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.llm-collection-context-chip:hover .llm-collection-chip-label,
.llm-tag-context-chip:hover .llm-tag-chip-label {
  color: var(--fill-primary);
}

.llm-collection-chip-header,
.llm-tag-chip-header {
  gap: 0;
  padding-right: 4px;
  cursor: default;
}

.llm-collection-chip-header .llm-collection-clear,
.llm-tag-chip-header .llm-tag-clear {
  display: grid;
  place-items: center;
  align-self: center;
  width: 14px;
  min-width: 14px;
  font-size: var(--llm-fs-12);
  line-height: 1;
  padding: 0;
  margin-left: -2px;
  transform: translateY(-1px);
}

/* Picker item-type icon */
.llm-context-svg-icon,
.llm-paper-picker-item-icon {
  flex-shrink: 0;
  display: inline-block;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.llm-context-svg-icon {
  width: var(--llm-context-chip-icon-size, 18px);
  height: var(--llm-context-chip-icon-size, 18px);
}

.llm-context-glyph-icon {
  flex-shrink: 0;
  display: inline-block;
  color: currentColor;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.llm-paper-picker-item-icon {
  width: 14px;
  height: 14px;
  color: var(--fill-secondary);
}

.llm-context-icon-paper,
.llm-paper-picker-icon-paper {
  mask-image: url("icons/action-paper.svg");
  -webkit-mask-image: url("icons/action-paper.svg");
}

.llm-context-icon-pdf,
.llm-paper-picker-icon-pdf {
  mask-image: url("icons/action-pdf-page.svg");
  -webkit-mask-image: url("icons/action-pdf-page.svg");
}

.llm-context-icon-note,
.llm-paper-picker-icon-note {
  mask-image: url("icons/action-note.svg");
  -webkit-mask-image: url("icons/action-note.svg");
}

.llm-context-icon-note {
  color: var(--llm-context-icon-note-color);
}

.llm-context-icon-image,
.llm-paper-picker-icon-image {
  mask-image: url("icons/action-image.svg");
  -webkit-mask-image: url("icons/action-image.svg");
}

.llm-context-icon-image {
  color: var(--llm-context-icon-image-color);
}

.llm-context-icon-file,
.llm-paper-picker-icon-file {
  mask-image: url("icons/action-file.svg");
  -webkit-mask-image: url("icons/action-file.svg");
}

.llm-context-icon-file {
  color: var(--llm-context-icon-file-color);
}

.llm-context-icon-collection,
.llm-paper-picker-icon-collection {
  mask-image: url("icons/folder-closed.svg");
  -webkit-mask-image: url("icons/folder-closed.svg");
}

.llm-context-icon-collection {
  color: var(--llm-context-icon-collection-color);
}

.llm-context-icon-tag,
.llm-paper-picker-icon-tag {
  mask-image: url("icons/tag.svg");
  -webkit-mask-image: url("icons/tag.svg");
}

.llm-context-icon-tag {
  color: var(--llm-context-icon-tag-color);
}

.llm-context-icon-text {
  mask-image: url("icons/action-text-context.svg");
  -webkit-mask-image: url("icons/action-text-context.svg");
  color: var(--llm-context-icon-text-color);
}

.llm-context-icon-model {
  mask-image: url("icons/action-model-quote.svg");
  -webkit-mask-image: url("icons/action-model-quote.svg");
  color: var(--llm-context-icon-model-color);
}

.llm-context-icon-model-chip {
  mask-image: url("icons/action-model-chip.svg");
  -webkit-mask-image: url("icons/action-model-chip.svg");
}

.llm-paper-context-chip.llm-paper-context-chip-full
  .llm-paper-context-chip-header {
  border: 1px solid var(--llm-pin-border-color);
  border-radius: 8px;
  background: var(--llm-pin-bg);
  box-shadow: inset 0 0 0 1px var(--llm-pin-border-color);
}

.llm-paper-context-chip.llm-paper-context-chip-full
  .llm-paper-context-chip-label {
  color: var(--fill-secondary);
}

.llm-paper-context-chip.llm-paper-context-chip-full:hover
  .llm-paper-context-chip-label {
  color: var(--color-primary);
}

.llm-paper-context-chip.llm-paper-context-chip-full
  .llm-paper-context-chip-expanded
  .llm-paper-chip-menu-row {
  border-color: var(--llm-pin-border-color);
  background: var(--llm-pin-bg);
}

/* MinerU (green) — only when full-text mode; retrieval stays plain. */
.llm-paper-context-chip.llm-paper-context-chip-full.llm-paper-context-chip-mineru
  .llm-paper-context-chip-header {
  border: 1px solid var(--llm-mineru-border-color);
  border-radius: 8px;
  background: var(--llm-mineru-bg);
  box-shadow: inset 0 0 0 1px var(--llm-mineru-border-color);
}

.llm-paper-context-chip.llm-paper-context-chip-full.llm-paper-context-chip-mineru
  .llm-paper-context-chip-expanded
  .llm-paper-chip-menu-row {
  border-color: var(--llm-mineru-border-color);
  background: var(--llm-mineru-bg);
}

/* PDF mode chip styling (amber) — same blueprint as full/mineru, only colors differ. */
.llm-paper-context-chip.llm-paper-context-chip-pdf
  .llm-paper-context-chip-header {
  border: 1px solid var(--llm-pdf-border-color);
  border-radius: 8px;
  background: var(--llm-pdf-bg);
  box-shadow: inset 0 0 0 1px var(--llm-pdf-border-color);
}

.llm-paper-context-chip.llm-paper-context-chip-pdf
  .llm-paper-context-chip-expanded
  .llm-paper-chip-menu-row {
  border-color: var(--llm-pdf-border-color);
  background: var(--llm-pdf-bg);
}

.llm-paper-context-chip.llm-paper-context-chip-html
  .llm-paper-context-chip-header {
  border: 1px solid transparent;
  border-radius: 8px;
  background: color-mix(in srgb, #f97316 12%, transparent);
  box-shadow: none;
}

.llm-paper-context-chip.llm-paper-context-chip-html
  .llm-paper-context-chip-expanded
  .llm-paper-chip-menu-row,
.llm-paper-chip-menu
  .llm-paper-chip-menu-row.llm-paper-context-chip-html[aria-selected="true"] {
  border-color: transparent;
  background: color-mix(in srgb, #f97316 12%, transparent);
}

.llm-paper-context-chip-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  padding: 3px 4px 3px 8px;
  border-radius: 8px;
  background: transparent;
  color: var(--fill-secondary);
  font-size: var(--llm-fs-12);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-paper-context-chip-icon {
  width: var(--llm-context-chip-icon-size);
  height: var(--llm-context-chip-icon-size);
  color: currentColor;
  opacity: 1;
}

.llm-paper-context-chip.llm-paper-context-chip-text
  .llm-paper-context-chip-icon {
  color: var(--color-accent, #3584e4);
}

.llm-paper-context-chip.llm-paper-context-chip-mineru
  .llm-paper-context-chip-icon {
  color: var(--llm-mineru-color);
}

.llm-paper-context-chip.llm-paper-context-chip-pdf
  .llm-paper-context-chip-icon {
  color: var(--llm-pdf-color);
}

.llm-paper-context-chip.llm-paper-context-chip-html
  .llm-paper-context-chip-icon {
  color: #f97316;
}

.llm-paper-context-chip-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.llm-paper-context-chip:hover .llm-paper-context-chip-label {
  color: var(--fill-primary);
}

.llm-paper-context-chip-header {
  gap: 0;
  padding-right: 4px;
  cursor: pointer;
}

.llm-paper-context-chip.llm-paper-context-chip-static
  .llm-paper-context-chip-header {
  cursor: default;
}

.llm-paper-context-chip.llm-paper-context-chip-static:hover
  .llm-paper-context-chip-label {
  color: var(--fill-secondary);
}

.llm-paper-context-chip.llm-paper-context-chip-static
  .llm-paper-context-chip-expanded {
  display: none;
}

.llm-paper-context-chip-header .llm-paper-context-clear {
  display: grid;
  place-items: center;
  align-self: center;
  width: 14px;
  min-width: 14px;
  font-size: var(--llm-fs-12);
  line-height: 1;
  padding: 0;
  margin-left: -2px;
  transform: translateY(-1px);
}

.llm-paper-chip-menu {
  min-width: min(240px, calc(100vw - 24px));
  max-width: min(360px, calc(100vw - 24px));
  gap: 4px;
  padding: 6px;
}

.llm-paper-chip-cache-menu {
  min-width: 220px;
  max-width: min(280px, calc(100vw - 24px));
  gap: 0;
  padding: 4px;
}

.llm-paper-chip-cache-menu-item {
  all: unset;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  min-width: 0;
  padding: 7px 10px;
  border-radius: 5px;
  color: var(--fill-primary);
  font: inherit;
  font-size: var(--llm-fs-12, 12px);
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.llm-paper-chip-cache-menu-item:hover,
.llm-paper-chip-cache-menu-item:focus-visible {
  background: var(--fill-quinary);
}

.llm-paper-chip-menu-row .llm-paper-picker-title,
.llm-paper-chip-menu-row .llm-paper-picker-meta {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

.llm-paper-context-card-attachment {
  color: var(--fill-secondary);
}

.llm-paper-chip-disabled-reason {
  color: var(--fill-tertiary);
}

/* Paper chip inline expanded popup (same hover/sticky pattern as .llm-selected-context-expanded) */
.llm-paper-context-chip-expanded {
  padding: 6px;
}

/* The paper card fills the full popup width */
.llm-paper-context-chip-expanded .llm-paper-chip-menu-row {
  width: 100%;
  box-sizing: border-box;
}

.llm-paper-picker {
  display: none;
  position: absolute;
  left: var(--llm-input-section-padding, 10px);
  right: var(--llm-input-section-padding, 10px);
  top: auto;
  bottom: calc(100% + 8px);
  z-index: 30;
  height: auto;
  min-height: 0;
  max-height: var(--llm-paper-picker-max-height, min(82vh, 720px));
  overflow: hidden;
  border: 1px solid var(--stroke-secondary, rgba(120, 120, 120, 0.35));
  border-radius: 12px;
  background: var(--material-background, #fff);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
  scroll-padding-block: 6px;
}

.llm-paper-picker.llm-paper-picker-below {
  top: calc(100% + 8px);
  bottom: auto;
}

.llm-paper-picker-list {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 100%;
  max-height: inherit;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: row;
  gap: 3px;
  padding: 6px;
}

.llm-paper-picker-item {
  all: unset;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  min-width: 0;
  text-align: left;
  font: inherit;
  padding: 7px 9px;
  cursor: pointer;
  outline: none;
  scroll-margin-block: 6px;
}

.llm-paper-picker-item:hover {
  background: color-mix(
    in srgb,
    var(--material-background) 84%,
    var(--fill-quinary)
  );
  border-color: var(--stroke-secondary, rgba(120, 120, 120, 0.35));
}

.llm-paper-picker-item.llm-paper-chip-menu-row-disabled,
.llm-paper-picker-item.llm-paper-chip-menu-row-disabled:hover {
  cursor: default;
  opacity: 0.48;
  background: transparent;
  border-color: transparent;
}

.llm-paper-picker-item[aria-selected="true"] {
  background: var(--color-accent10, rgba(53, 132, 228, 0.14));
  border-color: var(--color-accent, #3584e4);
}

.llm-paper-picker-item:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 1px;
}

.llm-paper-picker-item:-moz-focusring {
  outline: none;
}

.llm-paper-picker-item::-moz-focus-inner {
  border: 0;
}

.llm-paper-picker-group-row {
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
}

.llm-paper-picker-selected {
  --llm-paper-picker-selection-gutter: 18px;
  opacity: 0.5;
}

.llm-paper-picker-selected::before {
  content: "\2713";
  position: absolute;
  left: var(--llm-paper-picker-depth-indent, 9px);
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  text-align: center;
  font-size: var(--llm-fs-12);
  color: var(--fill-secondary);
  pointer-events: none;
}

.llm-paper-picker-collection-add-btn {
  all: unset;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  font-size: var(--llm-fs-12);
  font-weight: 600;
  color: var(--fill-secondary);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.llm-paper-picker-collection-row:hover .llm-paper-picker-collection-add-btn,
.llm-paper-picker-collection-row.llm-paper-picker-selected
  .llm-paper-picker-collection-add-btn,
.llm-paper-picker-item[aria-selected="true"]
  .llm-paper-picker-collection-add-btn {
  opacity: 1;
}

.llm-paper-picker-collection-add-btn:hover {
  background: color-mix(
    in srgb,
    var(--material-background) 70%,
    var(--fill-quinary)
  );
  color: var(--fill-primary);
}

.llm-paper-picker-group-row-main {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}

.llm-paper-picker-group-title-line {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
}

.llm-paper-picker-group-meta {
  flex: 0 0 auto;
  color: var(--fill-tertiary);
  font-size: var(--llm-fs-10);
  line-height: 1.2;
}

.llm-paper-picker-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent, #3584e4) 14%, transparent);
  color: var(--fill-secondary);
  font-size: var(--llm-fs-10);
  line-height: 1.2;
}

/* Badge colors matching content source mode */
.llm-paper-context-chip-mineru .llm-paper-picker-badge {
  background: color-mix(in srgb, #10b981 18%, transparent);
  color: #10b981;
}

.llm-paper-context-chip-pdf .llm-paper-picker-badge {
  background: color-mix(in srgb, #8b5cf6 18%, transparent);
  color: #8b5cf6;
}

.llm-paper-context-chip-text .llm-paper-picker-badge {
  background: color-mix(in srgb, var(--color-accent, #3584e4) 14%, transparent);
  color: var(--color-accent, #3584e4);
}

.llm-paper-context-chip-html .llm-paper-picker-badge {
  background: color-mix(in srgb, #f97316 18%, transparent);
  color: #f97316;
}

.llm-paper-chip-menu-row-mineru-idle {
  opacity: 0.68;
}

.llm-paper-chip-menu-row-mineru-idle:hover {
  opacity: 1;
}

.llm-paper-chip-menu-row-mineru-idle .llm-paper-picker-badge {
  background: color-mix(in srgb, var(--fill-secondary, #888) 16%, transparent);
  color: var(--fill-secondary, #888);
}

.llm-paper-chip-menu-row-mineru-idle:hover .llm-paper-picker-badge {
  background: color-mix(in srgb, #10b981 18%, transparent);
  color: #10b981;
}

.llm-paper-chip-menu-row-mineru-processing .llm-paper-picker-badge {
  gap: 4px;
  background: color-mix(in srgb, #f59e0b 18%, transparent);
  color: #f59e0b;
}

.llm-paper-chip-menu-row-mineru-processing .llm-paper-picker-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: llm-compact-spin 900ms linear infinite;
}

.llm-paper-chip-menu-row-mineru-failed .llm-paper-picker-badge {
  gap: 4px;
  background: color-mix(in srgb, #ef4444 18%, transparent);
  color: #ef4444;
}

.llm-paper-chip-menu-row-mineru-failed .llm-paper-picker-badge::before {
  content: "";
  flex: 0 0 auto;
  display: inline-block;
  width: 8px;
  height: 8px;
  background: currentColor;
  mask:
    linear-gradient(#000 0 0) center / 8px 1.6px no-repeat,
    linear-gradient(#000 0 0) center / 1.6px 8px no-repeat;
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .llm-paper-chip-menu-row-mineru-processing .llm-paper-picker-badge::before {
    animation: none;
  }
}

.llm-paper-picker-group-chevron {
  flex: 0 0 auto;
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: var(--fill-tertiary);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.llm-paper-picker-group-chevron.llm-folder-closed {
  mask-image: url("icons/folder-closed.svg");
  -webkit-mask-image: url("icons/folder-closed.svg");
}

.llm-paper-picker-group-chevron.llm-folder-open {
  mask-image: url("icons/folder-open.svg");
  -webkit-mask-image: url("icons/folder-open.svg");
}

.llm-paper-picker-attachment-row {
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: start;
  padding-left: 9px;
}

.llm-paper-picker-attachment-main {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.llm-paper-picker-attachment-text {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
}

.llm-paper-picker-attachment-row .llm-paper-picker-title {
  font-weight: 500;
}

.llm-paper-picker-title {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
  color: var(--fill-primary);
  font-size: var(--llm-fs-11);
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-paper-picker-meta {
  display: block;
  min-width: 0;
  color: var(--fill-tertiary);
  font-size: var(--llm-fs-10);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-paper-picker-empty {
  display: block;
  color: var(--fill-tertiary);
  font-size: var(--llm-fs-11);
  line-height: 1.35;
  padding: 8px;
}

.llm-paper-picker-attachment-main .llm-paper-picker-item-icon {
  margin-top: 1px;
}

.llm-paper-picker-shell {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: inherit;
  min-height: 0;
  overflow: hidden;
}

.llm-paper-picker-folder-panel,
.llm-paper-picker-tag-panel,
.llm-paper-picker-main {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  display: grid;
  overflow: hidden;
  resize: none;
  transition:
    height 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    min-height 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.llm-paper-picker-folder-panel.llm-paper-picker-panel-resizing,
.llm-paper-picker-tag-panel.llm-paper-picker-panel-resizing,
.llm-paper-picker-main.llm-paper-picker-panel-resizing {
  transition: none;
}

.llm-paper-picker-folder-panel.llm-paper-picker-panel-collapsed,
.llm-paper-picker-tag-panel.llm-paper-picker-panel-collapsed,
.llm-paper-picker-main.llm-paper-picker-panel-collapsed {
  height: 28px;
  min-height: 28px;
  grid-template-rows: auto;
  resize: none;
}

.llm-paper-picker-folder-panel.llm-paper-picker-panel-collapsed,
.llm-paper-picker-tag-panel.llm-paper-picker-panel-collapsed {
  border-bottom: 0;
}

.llm-paper-picker-folder-panel {
  flex: 0 0 auto;
  height: 190px;
  min-height: 165px;
  max-height: 420px;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  background: color-mix(
    in srgb,
    var(--material-background, #fff) 94%,
    var(--fill-quinary, rgba(120, 120, 120, 0.12))
  );
}

.llm-paper-picker-tag-panel {
  flex: 0 0 auto;
  height: 180px;
  min-height: 150px;
  max-height: 300px;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  background: color-mix(
    in srgb,
    var(--material-background, #fff) 96%,
    var(--fill-quinary, rgba(120, 120, 120, 0.12))
  );
}

.llm-paper-picker-folder-pane {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 2px 4px 5px;
}

.llm-paper-picker-sidebar-row {
  box-sizing: border-box;
  min-width: 0;
  display: grid;
  grid-template-columns: 12px 14px minmax(0, 1fr) 36px 24px;
  align-items: center;
  column-gap: 5px;
  padding: 4px 5px;
  padding-left: calc(5px + var(--llm-paper-picker-sidebar-depth, 0) * 14px);
  border-radius: 6px;
  color: var(--fill-secondary);
  cursor: pointer;
  user-select: none;
}

.llm-paper-picker-sidebar-row:hover,
.llm-paper-picker-sidebar-row-active {
  background: var(--color-accent10, rgba(53, 132, 228, 0.14));
  color: var(--fill-primary);
}

.llm-paper-picker-sidebar-chevron {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fill-tertiary);
}

.llm-paper-picker-sidebar-chevron {
  width: 12px;
  height: 14px;
  font-size: var(--llm-fs-11);
  line-height: 1;
}

.llm-paper-picker-sidebar-folder-icon {
  width: 14px;
  height: 14px;
  color: var(--fill-tertiary);
}

.llm-paper-picker-sidebar-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--llm-fs-11);
  font-weight: 600;
  line-height: 1.25;
}

.llm-paper-picker-sidebar-count {
  color: var(--fill-tertiary);
  font-size: var(--llm-fs-10);
  justify-self: end;
}

.llm-paper-picker-folder-header,
.llm-paper-picker-tag-header,
.llm-paper-picker-item-header {
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  height: 28px;
  min-height: 28px;
  padding: 0 8px;
  font-size: var(--llm-fs-10);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}

.llm-paper-picker-folder-header:hover,
.llm-paper-picker-tag-header:hover,
.llm-paper-picker-item-header:hover {
  background: color-mix(in srgb, var(--fill-secondary) 8%, transparent);
}

.llm-paper-picker-panel-toggle {
  all: unset;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--fill-tertiary);
  font-size: var(--llm-fs-12);
  line-height: 1;
  cursor: pointer;
}

.llm-paper-picker-panel-toggle:hover {
  background: color-mix(in srgb, var(--fill-secondary) 12%, transparent);
  color: var(--fill-primary);
}

.llm-paper-picker-panel-separator {
  box-sizing: border-box;
  position: relative;
  height: 9px;
  margin: 0 18px;
  cursor: ns-resize;
  user-select: none;
  touch-action: none;
}

.llm-paper-picker-panel-separator::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--stroke-secondary, rgba(120, 120, 120, 0.32));
}

.llm-paper-picker-panel-separator:hover::before,
.llm-paper-picker-panel-separator:active::before {
  background: var(--stroke-secondary, rgba(120, 120, 120, 0.4));
}

.llm-paper-picker-folder-title,
.llm-paper-picker-tag-title,
.llm-paper-picker-item-title {
  flex: 1 1 auto;
  min-width: 0;
}

.llm-paper-picker-folder-count,
.llm-paper-picker-tag-count,
.llm-paper-picker-item-count {
  color: var(--fill-tertiary);
  font-weight: 500;
}

.llm-paper-picker-tag-scopes,
.llm-paper-picker-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
}

.llm-paper-picker-tag-scopes {
  gap: 4px;
  padding: 0 8px 5px;
}

.llm-paper-picker-tag-scope-wrap,
.llm-paper-picker-tag-chip-wrap {
  box-sizing: border-box;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.llm-paper-picker-tag-scope,
.llm-paper-picker-tag-chip,
.llm-paper-picker-scope-action {
  all: unset;
  box-sizing: border-box;
  max-width: 100%;
  border-radius: 5px;
  color: var(--fill-secondary);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-paper-picker-tag-scope {
  padding: 1px 4px;
  font-size: var(--llm-fs-10);
  line-height: 1.35;
}

.llm-paper-picker-tag-scope-active {
  background: color-mix(in srgb, var(--fill-primary) 14%, transparent);
  color: var(--fill-primary);
}

.llm-paper-picker-tag-cloud {
  min-height: 0;
  overflow: auto;
  gap: 4px 5px;
  padding: 2px 8px 7px;
}

.llm-paper-picker-tag-chip {
  padding: 1px 5px;
  font-size: var(--llm-fs-11);
  line-height: 1.35;
  color: var(--fill-primary);
}

.llm-paper-picker-tag-chip-label {
  min-width: 0;
}

.llm-paper-picker-tag-chip-colored {
  border-left: 3px solid var(--llm-paper-picker-tag-color);
  padding-left: 5px;
}

.llm-paper-picker-tag-chip-selected {
  background: color-mix(in srgb, var(--fill-primary) 52%, transparent);
  color: var(--material-background, #fff);
  font-weight: 600;
}

.llm-paper-picker-tag-chip-unavailable {
  color: var(--fill-tertiary);
  opacity: 0.62;
  cursor: default;
}

.llm-paper-picker-scope-action {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--fill-tertiary);
  font-size: var(--llm-fs-11);
  font-weight: 700;
  cursor: pointer;
  justify-self: center;
}

.llm-paper-picker-scope-action:hover {
  background: color-mix(in srgb, var(--fill-secondary) 12%, transparent);
  color: var(--fill-primary);
}

.llm-paper-picker-scope-action:disabled {
  opacity: 0.35;
  cursor: default;
}

.llm-paper-picker-tag-empty,
.llm-paper-picker-tag-summary {
  color: var(--fill-tertiary);
  font-size: var(--llm-fs-10);
  line-height: 1.35;
}

.llm-paper-picker-tag-summary {
  border-top: 1px solid var(--stroke-secondary, rgba(120, 120, 120, 0.18));
  padding: 5px 8px;
  color: var(--fill-secondary);
}

.llm-paper-picker-folder-filter-bar,
.llm-paper-picker-tag-filter-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 7px;
}

.llm-paper-picker-folder-filter,
.llm-paper-picker-tag-filter {
  flex: 1 1 auto;
  min-width: 0;
  height: 24px;
  border: 1px solid var(--stroke-secondary, rgba(120, 120, 120, 0.28));
  border-radius: 7px;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--material-background) 84%, transparent);
  color: var(--fill-primary);
  font: inherit;
  font-size: var(--llm-fs-11);
}

.llm-paper-picker-tag-menu-wrap {
  position: relative;
  flex: 0 0 auto;
}

.llm-paper-picker-tag-menu-button {
  all: unset;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  color: var(--fill-secondary);
  cursor: pointer;
}

.llm-paper-picker-tag-menu-button:hover {
  background: color-mix(in srgb, var(--fill-secondary) 12%, transparent);
  color: var(--fill-primary);
}

.llm-paper-picker-tag-menu {
  position: absolute;
  right: 0;
  bottom: 28px;
  z-index: 2;
  min-width: 154px;
  padding: 4px 0;
  border: 1px solid var(--stroke-secondary, rgba(120, 120, 120, 0.32));
  border-radius: 7px;
  background: var(--material-background, #fff);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}

.llm-paper-picker-tag-menu-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  font-size: var(--llm-fs-11);
  white-space: nowrap;
  cursor: pointer;
}

.llm-paper-picker-main {
  width: 100%;
  flex: 1 0 auto;
  height: 360px;
  min-height: 150px;
  max-height: 520px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.llm-paper-picker-main.llm-paper-picker-panel-collapsed {
  flex: 0 0 auto;
}

.llm-paper-picker-main-full {
  grid-template-rows: minmax(0, 1fr);
  min-height: 120px;
}

.llm-paper-picker-table-row {
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
  column-gap: 6px;
  min-width: 0;
}

.llm-paper-picker-table-header {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 6px 9px 5px;
  border-bottom: 1px solid var(--stroke-secondary, rgba(120, 120, 120, 0.22));
  background: var(--material-background, #fff);
  color: var(--fill-tertiary);
  font-size: var(--llm-fs-10);
  font-weight: 600;
}

.llm-paper-picker-row-host {
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 5px;
}

.llm-paper-picker-table-row {
  grid-template-columns: minmax(0, 1fr) 24px;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
}

.llm-paper-picker-table-row.llm-paper-picker-selected {
  --llm-paper-picker-selection-gutter: 0px;
  opacity: 0.64;
}

.llm-paper-picker-table-row.llm-paper-picker-selected::before {
  content: none;
}

.llm-paper-picker-cell-title,
.llm-paper-picker-cell-action {
  min-width: 0;
}

.llm-paper-picker-row-meta-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fill-tertiary);
  font-size: var(--llm-fs-10);
  line-height: 1.3;
}

.llm-paper-picker-cell-action {
  text-align: center;
}

.llm-paper-picker-row-action {
  justify-self: center;
}

/* ── Action picker ──────────────────────────────────────────────────────── */

.llm-action-picker {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  max-height: min(40vh, 280px);
  overflow-y: auto;
  border: 1px solid var(--stroke-secondary, rgba(120, 120, 120, 0.35));
  border-radius: 12px;
  background: var(--material-background, #fff);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}

.llm-action-picker-list {
  display: grid;
  grid-auto-flow: row;
  gap: 1px;
  padding: 4px;
}

.llm-action-picker-item {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  padding: 5px 8px;
  gap: 2px;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  min-width: 0;
}

.llm-action-picker-item:hover:not(:disabled) {
  background: color-mix(
    in srgb,
    var(--material-background) 84%,
    var(--fill-quinary)
  );
  border-color: var(--stroke-secondary, rgba(120, 120, 120, 0.35));
}

.llm-action-picker-item:disabled {
  cursor: default;
  opacity: 0.58;
}

.llm-action-picker-item[aria-selected="true"]:not(:disabled) {
  background: var(--color-accent10, rgba(53, 132, 228, 0.14));
  border-color: var(--color-accent, #3584e4);
}

.llm-action-picker-title {
  font-size: var(--llm-fs-12);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-action-picker-description {
  font-size: var(--llm-fs-11);
  font-weight: 400;
  color: var(--fill-secondary, #888);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 6px;
  flex: 1;
  min-width: 0;
}

.llm-action-picker-badge {
  font-size: calc(10px * var(--llm-font-scale, 1));
  font-weight: 500;
  color: var(--fill-tertiary, #aaa);
  white-space: nowrap;
  margin-left: auto;
  padding-left: 8px;
  flex-shrink: 0;
}

.llm-action-picker-empty {
  display: block;
  color: var(--fill-tertiary);
  font-size: var(--llm-fs-11);
  line-height: 1.35;
  padding: 8px;
}

/* ── Action HITL panel (legacy hidden container, kept for DOM compat) ──── */

.llm-action-hitl-panel {
  display: none;
}

/* ── Action inline card (rendered inside chatBox) ───────────────────────── */

.llm-action-inline-card {
  margin: 8px 0 4px;
  padding: var(--llm-action-surface-padding);
  border-radius: var(--llm-action-surface-radius);
  border: var(--llm-action-surface-border);
  background: var(--llm-action-surface-bg-strong);
  /* IMPORTANT: no max-height, min-height, or overflow here.
     `.llm-messages` is a flex column with overflow-y:auto — it handles all
     scrolling natively. Every time I've tried to constrain the card itself
     (max-height: 70vh, max-height: 100%, min-height: 0), I've broken a
     different layout (card blows out of window; card barely visible; card
     squeezed by sibling flex pressure). Leave it at natural size and let
     the messages container scroll. */
  flex: 0 0 auto;
}

.llm-action-inline-card-review,
.llm-action-inline-card-status {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--stroke-secondary);
  border-radius: 16px;
  background: var(--material-background);
}

.llm-action-inline-card-review > .llm-agent-hitl-card,
.llm-action-inline-card-status > .llm-agent-hitl-card {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* ── Action progress indicator (in-thread "working" card) ─────────────── */

.llm-action-progress-card {
  margin: 8px 0 4px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--stroke-secondary);
  background: var(--material-background);
  color: var(--fill-primary);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
}

.llm-action-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.llm-action-progress-title {
  font-size: var(--llm-action-title-size);
  font-weight: var(--llm-action-title-weight);
  color: var(--fill-primary);
  line-height: 1.3;
}

.llm-action-progress-typing {
  padding: 0;
}

.llm-action-progress-step {
  font-size: var(--llm-fs-11);
  color: var(--fill-secondary);
}

.llm-action-progress-summary {
  font-size: var(--llm-fs-10);
  color: var(--fill-tertiary);
  min-height: 0;
}

.llm-action-progress-summary:empty {
  display: none;
}

/* ── Action launch form ─────────────────────────────────────────────────── */

.llm-action-launch-form {
  display: grid;
  gap: 10px;
  padding: var(--llm-action-surface-padding);
}

.llm-action-launch-form-header {
  font-size: var(--llm-action-title-size);
  font-weight: var(--llm-action-title-weight);
  color: var(--fill-primary);
  line-height: 1.3;
}

.llm-action-launch-form-label {
  font-size: var(--llm-action-label-size);
  letter-spacing: var(--llm-action-label-letter-spacing);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fill-tertiary);
  line-height: 1.3;
}

.llm-action-launch-form-input {
  resize: vertical;
  min-height: 52px;
}

.llm-action-launch-form-btns {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.llm-action-launch-form-run-btn {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  padding: 5px 14px;
  border-radius: 8px;
  font-size: var(--llm-fs-12);
  font-weight: 500;
  background: var(--color-accent, #3584e4);
  color: #fff;
}

.llm-action-launch-form-run-btn:hover {
  opacity: 0.88;
}

.llm-action-launch-form-cancel-btn {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  padding: 5px 14px;
  border-radius: 8px;
  font-size: var(--llm-fs-12);
  font-weight: 500;
  color: var(--fill-secondary);
  border: 1px solid var(--stroke-secondary, rgba(120, 120, 120, 0.35));
}

.llm-action-launch-form-cancel-btn:hover {
  background: color-mix(
    in srgb,
    var(--material-background) 80%,
    var(--fill-quinary)
  );
}

.llm-selected-context {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  position: static;
}

.llm-selected-context.expanded .llm-selected-context-header {
  order: 2;
}

.llm-selected-context.expanded .llm-selected-context-expanded {
  order: 1;
}

.llm-selected-context-header {
  display: flex;
  align-items: center;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
}

.llm-selected-context.llm-selected-context-pinned .llm-selected-context-header {
  border: 1px solid var(--llm-pin-border-color);
  border-radius: 8px;
  background: var(--llm-pin-bg);
}

.llm-note-context-chip .llm-selected-context-header {
  border: 1px solid var(--stroke-secondary);
  border-radius: 8px;
  background: var(--material-background);
}

.llm-note-context-chip.llm-selected-context-pinned
  .llm-selected-context-header {
  border-color: var(--llm-pin-border-color);
  background: var(--llm-pin-bg);
}

.llm-image-preview-meta.llm-selected-context-meta.llm-selected-context-source-pdf::before {
  mask-image: url("icons/action-text-context.svg");
  -webkit-mask-image: url("icons/action-text-context.svg");
}

.llm-image-preview-meta.llm-selected-context-meta.llm-selected-context-source-model::before {
  mask-image: url("icons/action-model-quote.svg");
  -webkit-mask-image: url("icons/action-model-quote.svg");
}

.llm-image-preview-meta.llm-selected-context-meta.llm-selected-context-source-note::before {
  mask-image: url("icons/action-note.svg");
  -webkit-mask-image: url("icons/action-note.svg");
}

.llm-image-preview-meta.llm-selected-context-meta.llm-selected-context-source-note-edit::before {
  content: "✎";
  background-color: transparent;
  mask-image: none;
  -webkit-mask-image: none;
  color: currentColor;
  font-size: var(--llm-fs-12);
  font-weight: 600;
  line-height: 14px;
  text-align: center;
}

.llm-image-preview-meta.llm-selected-context-meta.llm-selected-context-source-note-edit {
  white-space: nowrap;
  font-weight: 600;
}

.llm-selected-context.llm-selected-context-source-note-edit
  .llm-selected-context-header {
  border: 1px solid var(--llm-pin-border-color);
  border-radius: 8px;
  background: var(--llm-pin-bg);
}

.llm-image-preview-meta.llm-selected-context-meta.llm-selected-context-meta-corrupted::after {
  content: "!";
  display: inline-grid;
  place-items: center;
  width: 12px;
  height: 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: #fbbf24;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

.llm-selected-context-expanded {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--stroke-secondary);
  border-radius: 10px;
  background: var(--material-background);
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 24;
  width: auto;
  max-height: min(68vh, 560px);
  overflow: auto;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  pointer-events: none;
  transition:
    opacity 0.14s ease,
    transform 0.14s ease,
    visibility 0.14s ease;
}

.llm-selected-context:hover .llm-selected-context-expanded,
.llm-selected-context.expanded .llm-selected-context-expanded {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.llm-selected-context:hover .llm-selected-context-expanded,
.llm-selected-context.expanded .llm-selected-context-expanded {
  pointer-events: auto;
}

.llm-paper-context-chip.llm-paper-context-chip-menu-open
  .llm-paper-context-chip-expanded,
.llm-paper-context-chip.llm-paper-context-chip-menu-open:hover
  .llm-paper-context-chip-expanded,
.llm-paper-context-chip.llm-paper-context-chip-menu-open.expanded
  .llm-paper-context-chip-expanded {
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  pointer-events: none;
}

/* Bridge the gap between expanded card and chip header so hover persists */
.llm-selected-context-expanded::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.llm-note-context-chip .llm-selected-context-expanded {
  max-height: min(20vh, 140px);
}

.llm-selected-context-text {
  font-size: var(--llm-fs-12);
  line-height: 1.4;
  color: var(--fill-primary);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-height: none;
  overflow: visible;
}

.llm-selected-context-warning {
  font-size: var(--llm-fs-11);
  line-height: 1.35;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.32);
  border-radius: 6px;
  padding: 5px 7px;
}

.llm-input {
  width: 100%;
  min-height: 60px;
  max-height: 220px;
  font: inherit;
  font-size: var(--llm-fs-12);
  padding: 12px 14px;
  box-sizing: border-box;
  border-radius: 14px;
  border: 1px solid var(--stroke-secondary);
  background: var(--fill-quaternary);
  color: var(--fill-primary);
  transition: border-color 0.15s;
}

.llm-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.llm-input:disabled {
  opacity: 0.6;
}

.llm-input::placeholder {
  color: var(--fill-tertiary);
}

.llm-queued-input-bar {
  display: none;
  align-items: stretch;
  min-height: 22px;
}

.llm-queued-input-rail {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.llm-queued-input-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.llm-queued-input-empty {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 2px;
  color: var(--fill-tertiary);
  font-size: var(--llm-fs-10);
  white-space: nowrap;
}

.llm-queued-input-item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.llm-queued-input-count {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  color: var(--fill-secondary);
  font-size: var(--llm-fs-10);
  font-weight: 600;
  white-space: nowrap;
}

.llm-queued-input-chip {
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--stroke-secondary) 70%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--fill-quaternary) 68%, transparent);
  color: var(--fill-secondary);
  font-size: var(--llm-fs-10);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.llm-queued-input-remove,
.llm-queued-input-cancel-mini {
  appearance: none;
  -moz-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--stroke-secondary) 75%, transparent);
  border-radius: 7px;
  background: transparent;
  color: var(--fill-tertiary);
  font-size: var(--llm-fs-10);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}

.llm-queued-input-remove {
  width: 24px;
  min-width: 24px;
  padding: 0;
  font-size: 14px;
}

.llm-queued-input-remove:hover,
.llm-queued-input-cancel-mini:hover {
  color: var(--fill-primary);
  background: color-mix(in srgb, var(--fill-quaternary) 72%, transparent);
}

/* Actions Bar */
.llm-actions {
  --llm-action-height: 36px;
  --llm-action-pill-padding: 0 14px;
  --llm-action-icon-size: 18px;
  --llm-action-icon-font-size: var(--llm-action-icon-size);
  --llm-action-font-size: var(--llm-fs-11);
  --llm-action-dropdown-icon-width: 56px;
  --llm-action-dropdown-icon-left-padding: 9px;
  --llm-action-dropdown-icon-right-padding: 23px;
  --llm-action-dropdown-slot-width: calc(1.2em + 12px);
  --llm-action-dropdown-icon-right: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  min-height: var(--llm-action-height);
  min-width: 0;
  width: 100%;
}

.llm-actions-left {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.llm-actions-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
}

.llm-action-slot.llm-model-dropdown {
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc(220px * var(--llm-font-scale));
}

.llm-action-slot.llm-reasoning-dropdown {
  flex: 0 1 auto;
  min-width: 0;
  max-width: calc(160px * var(--llm-font-scale));
}

.llm-action-slot.llm-model-dropdown > button,
.llm-action-slot.llm-reasoning-dropdown > button {
  width: auto;
  max-width: 100%;
}

.llm-action-slot.llm-model-dropdown.llm-model-dropdown-collapsed {
  flex: 0 0 auto;
  min-width: var(--llm-action-dropdown-icon-width);
  max-width: var(--llm-action-dropdown-icon-width);
}

.llm-action-slot.llm-reasoning-dropdown.llm-reasoning-dropdown-collapsed {
  flex: 0 0 auto;
  min-width: var(--llm-action-dropdown-icon-width);
  max-width: var(--llm-action-dropdown-icon-width);
}

.llm-actions button {
  width: auto;
  height: auto;
  min-height: var(--llm-action-height);
  line-height: 1;
  box-sizing: border-box;
}

.llm-actions .llm-shortcut-btn {
  min-height: var(--llm-action-height);
  padding: 0 14px;
}

.llm-actions .llm-select-text-btn,
.llm-actions .llm-screenshot-btn {
  padding-left: 8px;
  padding-right: 8px;
}

.llm-action-btn {
  min-width: 0;
  font-size: var(--llm-action-font-size);
}

.llm-action-btn-primary {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
  font-weight: 600;
}

.llm-action-btn-primary:hover:not(:disabled) {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

.llm-action-btn-primary:active:not(:disabled) {
  transform: scale(0.98);
}

.llm-action-btn-danger {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
  font-weight: 600;
}

.llm-action-btn-danger:hover:not(:disabled) {
  background: #b91c1c;
  border-color: #b91c1c;
}

.llm-action-btn-active {
  border-color: var(--color-accent);
  background: var(--color-accent10);
}

.llm-screenshot-btn {
  font-size: var(--llm-action-font-size);
}

.llm-select-text-btn,
.llm-screenshot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  height: var(--llm-action-height);
  min-height: var(--llm-action-height);
  padding: 0 2px;
  margin: 0;
  border-radius: 0;
  font-family: inherit;
  font-size: var(--llm-action-font-size);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.llm-upload-file-btn,
.llm-upload-file-btn.llm-action-icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-width: 36px;
  height: var(--llm-action-height);
  min-height: var(--llm-action-height);
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 0;
  font-weight: 600;
  line-height: 0;
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  border-radius: 0;
}

.llm-select-text-btn.llm-action-icon-only,
.llm-screenshot-btn.llm-action-icon-only {
  width: 36px;
  min-width: 36px;
  padding: 0;
  font-size: 0;
  line-height: 0;
}

.llm-upload-file-btn::before,
.llm-select-text-btn.llm-action-icon-only::before,
.llm-screenshot-btn.llm-action-icon-only::before,
.llm-action-slot.llm-model-dropdown
  > .llm-model-btn.llm-model-btn-collapsed::before,
.llm-action-slot.llm-reasoning-dropdown
  > .llm-reasoning-btn.llm-reasoning-btn-collapsed::before {
  content: "";
  display: block;
  width: var(--llm-action-icon-size);
  height: var(--llm-action-icon-size);
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  pointer-events: none;
}

.llm-upload-file-btn::before {
  mask-image: url("icons/action-slash.svg");
  -webkit-mask-image: url("icons/action-slash.svg");
}

.llm-slash-menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  max-height: min(30vh, 220px);
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 10px;
  border: 1px solid var(--stroke-secondary, rgba(120, 120, 120, 0.35));
  background: var(--material-background, #fff);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
  padding: 0;
  min-width: unset;
}

.llm-slash-menu-separator {
  height: 1px;
  background: var(--stroke-secondary, rgba(120, 120, 120, 0.25));
  margin: 4px 6px;
}

.llm-slash-menu-section {
  display: flex;
  align-items: center;
  min-height: calc(20px * var(--llm-font-scale, 1));
  padding: calc(3px * var(--llm-font-scale, 1))
    calc(8px * var(--llm-font-scale, 1));
  font-size: var(--llm-fs-10);
  line-height: 1.2;
  font-weight: 600;
  color: var(--fill-tertiary);
  user-select: none;
}

.llm-select-text-btn.llm-action-icon-only::before {
  mask-image: url("icons/action-add-text.svg");
  -webkit-mask-image: url("icons/action-add-text.svg");
}

.llm-screenshot-btn.llm-action-icon-only::before {
  mask-image: url("icons/action-screenshot.svg");
  -webkit-mask-image: url("icons/action-screenshot.svg");
}

.llm-select-text-btn:hover:not(:disabled),
.llm-screenshot-btn:hover:not(:disabled),
.llm-upload-file-btn:hover:not(:disabled),
.llm-model-btn:hover:not(:disabled),
.llm-runtime-mode-btn:hover:not(:disabled),
.llm-reasoning-btn:hover:not(:disabled),
.llm-select-text-btn:focus-visible,
.llm-screenshot-btn:focus-visible,
.llm-upload-file-btn:focus-visible,
.llm-model-btn:focus-visible,
.llm-runtime-mode-btn:focus-visible,
.llm-reasoning-btn:focus-visible {
  background: transparent;
  border-color: transparent;
}

.llm-send-btn {
  width: auto;
  min-width: 78px;
  height: var(--llm-action-height);
  min-height: var(--llm-action-height);
  padding: var(--llm-action-pill-padding);
  border-radius: 999px;
  font-size: var(--llm-action-font-size);
  font-weight: 600;
  line-height: 1;
}

.llm-send-btn.llm-action-icon-only {
  width: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: 999px;
  font-size: var(--llm-action-icon-font-size);
  font-weight: 700;
}

.llm-cancel-btn {
  width: auto;
  min-width: 82px;
  height: var(--llm-action-height);
  min-height: var(--llm-action-height);
  padding: var(--llm-action-pill-padding);
  font-size: var(--llm-action-font-size);
}

.llm-send-icon {
  font-size: var(--llm-fs-11);
}

/* Status */
/* ---- Command row above textarea (active skill/action badge) ---- */
.llm-command-row {
  display: none;
}

.llm-command-row[data-active] {
  display: flex;
  /* Align chip text with textarea cursor: textarea padding-left (14px)
     minus chip border (1px) and chip label padding-left (8px) = 5px. */
  padding-left: 5px;
}

.llm-command-row .llm-paper-context-chip-header {
  border: 1px solid color-mix(in srgb, #f59e0b 30%, var(--stroke-secondary));
  border-radius: 8px;
  background: color-mix(in srgb, #f59e0b 14%, var(--material-background));
}

.llm-command-row--skill .llm-paper-context-chip-header {
  border-color: color-mix(in srgb, #8b5cf6 30%, var(--stroke-secondary));
  background: color-mix(in srgb, #8b5cf6 14%, var(--material-background));
}

/* ---- Command badge in user chat bubble ---- */
.llm-command-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--fill-secondary) 12%, transparent);
  color: var(--fill-secondary);
  font-family:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
  font-weight: 500;
  line-height: 1.4;
  word-spacing: normal;
  white-space: nowrap;
  vertical-align: baseline;
}

.llm-status-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  grid-column: 1 / -1;
  min-width: 0;
  flex-shrink: 0;
  padding: 0 5px;
}

.llm-status {
  font-size: var(--llm-fs-11);
  color: var(--fill-tertiary);
  min-width: 0;
  overflow-wrap: anywhere;
}

.llm-status-ready {
  color: var(--color-accent);
}

.llm-status-sending {
  color: var(--fill-secondary);
}

.llm-status-error {
  color: #e74c3c;
}

.llm-status-warning {
  color: #f39c12;
}

.llm-status-context-missing {
  color: var(--fill-tertiary);
}

.llm-token-usage {
  font-size: var(--llm-fs-11);
  color: var(--fill-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
  display: none;
}

.llm-token-usage[data-warning="true"] {
  color: #f39c12;
}

.llm-message-wrapper.llm-compact-marker-wrapper {
  width: 100%;
  align-items: stretch;
}

.llm-message-wrapper.llm-compact-marker-wrapper .llm-message-meta {
  display: none;
}

.llm-bubble.llm-compact-marker {
  width: 100%;
  max-width: 100%;
  padding: 10px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--fill-secondary);
  display: grid;
  grid-template-columns: minmax(28px, 1fr) auto auto minmax(28px, 1fr);
  align-items: center;
  gap: 10px;
  font-size: var(--llm-fs-12);
  font-style: normal;
  font-weight: 600;
  line-height: 1.3;
  user-select: none;
}

.llm-compact-marker-rule {
  height: 1px;
  min-width: 28px;
  background: var(--fill-quaternary);
}

.llm-compact-marker-icon {
  position: relative;
  width: 16px;
  height: 16px;
  color: currentColor;
}

.llm-compact-marker-icon::before,
.llm-compact-marker-icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.llm-compact-marker-icon::before {
  left: 3px;
  top: 2px;
  width: 10px;
  height: 12px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}

.llm-compact-marker-icon::after {
  left: 6px;
  top: 5px;
  width: 7px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  border-radius: 1px;
  opacity: 0.7;
}

.llm-compact-marker-pending .llm-compact-marker-icon::before {
  left: 1px;
  top: 1px;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: llm-compact-spin 900ms linear infinite;
}

.llm-compact-marker-pending .llm-compact-marker-icon::after {
  display: none;
}

.llm-compact-marker-pending .llm-compact-marker-label {
  animation: llm-compact-pulse 1.2s ease-in-out infinite;
}

@keyframes llm-compact-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes llm-compact-pulse {
  0%,
  100% {
    opacity: 0.72;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .llm-compact-marker-pending .llm-compact-marker-icon::before,
  .llm-compact-marker-pending .llm-compact-marker-label {
    animation: none;
  }
}

.llm-message-wrapper.llm-fork-source-marker-wrapper {
  width: 100%;
  align-items: stretch;
}

.llm-bubble.llm-fork-source-marker {
  width: 100%;
  max-width: 100%;
  padding: 10px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--color-accent, #3584e4);
  display: grid;
  grid-template-columns: minmax(28px, 1fr) auto minmax(28px, 1fr);
  align-items: center;
  gap: 10px;
  font-size: var(--llm-fs-12);
  font-style: normal;
  font-weight: 600;
  line-height: 1.3;
  user-select: none;
}

.llm-fork-source-marker-rule {
  height: 1px;
  min-width: 28px;
  background: var(--fill-quaternary);
}

.llm-fork-source-marker-button {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
}

.llm-fork-source-marker-button:hover:not(:disabled),
.llm-fork-source-marker-button:focus-visible {
  text-decoration: underline;
}

.llm-fork-source-marker-button:disabled {
  opacity: 0.55;
  cursor: default;
}

.llm-fork-source-marker-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  background: currentColor;
  mask-image: url("icons/action-fork.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("icons/action-fork.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

/* Scrollbar Styling */
.llm-messages::-webkit-scrollbar,
.llm-context::-webkit-scrollbar {
  width: 6px;
}

.llm-messages::-webkit-scrollbar-track,
.llm-context::-webkit-scrollbar-track {
  background: transparent;
}

.llm-messages::-webkit-scrollbar-thumb,
.llm-context::-webkit-scrollbar-thumb {
  background: var(--fill-quaternary);
  border-radius: 3px;
}

.llm-messages::-webkit-scrollbar-thumb:hover,
.llm-context::-webkit-scrollbar-thumb:hover {
  background: var(--fill-tertiary);
}

/* Model / Reasoning toggles */
.llm-model-btn,
.llm-runtime-mode-btn,
.llm-reasoning-btn {
  font-size: var(--llm-action-font-size);
  font-weight: 600;
  min-height: var(--llm-action-height);
  padding: 0 26px;
}

.llm-model-btn,
.llm-runtime-mode-btn,
.llm-reasoning-btn {
  width: auto;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  line-height: 1;
  text-align: center;
  justify-content: center;
  align-items: center;
  padding-top: 6px;
  padding-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  background: transparent;
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
}

.llm-actions .llm-model-btn,
.llm-actions .llm-runtime-mode-btn,
.llm-actions .llm-reasoning-btn {
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 12px;
  padding-right: 12px;
  gap: 6px;
}

.llm-model-btn.llm-model-btn-wrap-2line:not(.llm-model-btn-collapsed) {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.1;
  max-height: calc(3.3em + 12px);
  text-overflow: clip;
}

.llm-action-slot.llm-model-dropdown > .llm-model-btn.llm-model-btn-collapsed {
  width: var(--llm-action-dropdown-icon-width);
  min-width: var(--llm-action-dropdown-icon-width);
  max-width: var(--llm-action-dropdown-icon-width);
  padding: 0 var(--llm-action-dropdown-icon-right-padding) 0
    var(--llm-action-dropdown-icon-left-padding);
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  white-space: nowrap;
  line-height: 1;
  max-height: none;
  overflow: hidden;
  text-overflow: clip;
  font-size: 0;
  line-height: 0;
}

.llm-action-slot.llm-reasoning-dropdown
  > .llm-reasoning-btn.llm-reasoning-btn-collapsed {
  width: var(--llm-action-dropdown-icon-width);
  min-width: var(--llm-action-dropdown-icon-width);
  max-width: var(--llm-action-dropdown-icon-width);
  padding: 0 var(--llm-action-dropdown-icon-right-padding) 0
    var(--llm-action-dropdown-icon-left-padding);
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  white-space: nowrap;
  line-height: 1;
  max-height: none;
  overflow: hidden;
  text-overflow: clip;
  font-size: 0;
  line-height: 0;
}

.llm-action-slot.llm-model-dropdown
  > .llm-model-btn.llm-model-btn-collapsed::before {
  mask-image: url("icons/action-model-chip.svg");
  -webkit-mask-image: url("icons/action-model-chip.svg");
}

.llm-action-slot.llm-reasoning-dropdown
  > .llm-reasoning-btn.llm-reasoning-btn-collapsed::before {
  mask-image: url("icons/action-reasoning-brain.svg");
  -webkit-mask-image: url("icons/action-reasoning-brain.svg");
}

.llm-model-btn::after,
.llm-reasoning-btn::after {
  content: "▾";
  position: static;
  width: auto;
  height: auto;
  border-right: none;
  border-bottom: none;
  transform: none;
  font-family: sans-serif;
  font-size: 12px;
  line-height: 1;
  opacity: 0.9;
  pointer-events: none;
  flex: 0 0 auto;
  margin-left: 2px;
}

.llm-model-btn.llm-model-btn-collapsed::after {
  display: block;
  right: 8px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.95;
  margin-left: 0;
}

.llm-reasoning-btn.llm-reasoning-btn-collapsed::after {
  display: block;
  right: 8px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.95;
  margin-left: 0;
}

.llm-reasoning-btn-unavailable {
  color: var(--fill-tertiary);
}

.llm-reasoning-btn-active {
  border-color: transparent;
  background: transparent;
  color: var(--color-accent);
}

.llm-reasoning-btn-active:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
}

.llm-action-slot.llm-reasoning-dropdown
  > .llm-reasoning-btn.llm-reasoning-btn-collapsed.llm-reasoning-btn-active::before {
  background-color: var(--color-accent);
}

.llm-action-slot {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  width: auto;
  flex: 0 0 auto;
}

.llm-action-slot > button {
  flex: 0 0 auto;
  min-width: 0;
}

.llm-model-menu,
.llm-reasoning-menu {
  position: absolute;
  z-index: 12;
  display: none;
  gap: 2px;
  box-sizing: border-box;
  min-width: calc(64px * var(--llm-font-scale, 1));
  max-width: min(88vw, 360px);
  max-height: 60vh;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--material-background);
  border: 1px solid var(--stroke-secondary);
  border-radius: calc(6px * var(--llm-font-scale, 1));
  padding: calc(4px * var(--llm-font-scale, 1));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

.llm-model-menu-open,
.llm-reasoning-menu-open {
  opacity: 1;
}

.llm-model-menu-hint,
.llm-reasoning-menu-hint {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: calc(24px * var(--llm-font-scale, 1));
  padding: calc(4px * var(--llm-font-scale, 1))
    calc(8px * var(--llm-font-scale, 1));
  margin: calc(-4px * var(--llm-font-scale, 1))
    calc(-4px * var(--llm-font-scale, 1)) 2px;
  font-size: var(--llm-fs-10);
  line-height: 1.2;
  font-weight: 600;
  color: var(--fill-tertiary);
  background: var(--material-background);
  border-bottom: 1px solid var(--stroke-secondary);
  pointer-events: none;
  user-select: none;
}

.llm-model-option,
.llm-reasoning-option {
  font-size: var(--llm-fs-11);
  line-height: 1.2;
  white-space: nowrap;
  text-align: left;
}

.llm-model-option {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-model-menu-divider {
  height: 1px;
  margin: 4px 0;
  background: var(--stroke-secondary);
}

.llm-model-menu-section,
.llm-reasoning-menu-section {
  display: flex;
  align-items: center;
  min-height: calc(24px * var(--llm-font-scale, 1));
  padding: calc(4px * var(--llm-font-scale, 1))
    calc(8px * var(--llm-font-scale, 1));
  font-size: var(--llm-fs-10);
  line-height: 1.2;
  font-weight: 600;
  color: var(--fill-tertiary);
  user-select: none;
}

.llm-model-menu-empty,
.llm-reasoning-menu-empty {
  padding: calc(4px * var(--llm-font-scale, 1))
    calc(8px * var(--llm-font-scale, 1));
  font-size: var(--llm-fs-11);
  line-height: 1.3;
  color: var(--fill-tertiary);
}

.llm-model-option:hover,
.llm-reasoning-option:hover {
  background: var(--fill-quinary);
}

.llm-reasoning-option-disabled,
.llm-reasoning-option:disabled {
  color: var(--fill-tertiary) !important;
  opacity: 0.45;
  background: transparent !important;
  text-decoration: none;
  pointer-events: none;
  cursor: not-allowed;
}

.llm-reasoning-option-disabled:hover,
.llm-reasoning-option:disabled:hover,
.llm-reasoning-option-disabled:focus,
.llm-reasoning-option:disabled:focus {
  background: transparent !important;
}

/* Image Preview */
.llm-image-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  margin: 0;
  position: static;
}

.llm-image-preview.expanded .llm-image-preview-header {
  order: 2;
}

.llm-image-preview.expanded .llm-image-preview-expanded {
  order: 1;
}

.llm-image-preview-header {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
}

.llm-image-preview-meta {
  --llm-context-chip-icon-size: 18px;
  appearance: none;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: var(--fill-secondary);
  font: inherit;
  font-size: var(--llm-fs-12);
  line-height: 1.25;
  padding: 3px 8px;
  width: fit-content;
  max-width: 100%;
  text-align: left;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.llm-image-preview-meta::before {
  content: "";
  flex: 0 0 auto;
  display: inline-block;
  width: var(--llm-context-chip-icon-size);
  height: var(--llm-context-chip-icon-size);
  background-color: currentColor;
  mask-image: url("icons/action-image.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url("icons/action-image.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  opacity: 1;
}

.llm-image-preview-meta.llm-selected-context-source-pdf::before {
  background-color: var(--llm-context-icon-text-color);
}

.llm-image-preview-meta.llm-selected-context-source-model::before {
  background-color: var(--llm-context-icon-model-color);
}

.llm-image-preview-meta.llm-selected-context-source-note::before {
  background-color: var(--llm-context-icon-note-color);
}

.llm-image-preview:not(.llm-selected-context-source-pdf)
  .llm-image-preview-meta::before,
.llm-image-preview-meta:not(.llm-file-context-meta):not(
    .llm-paper-context-meta
  ):not(.llm-selected-context-meta)::before {
  background-color: var(--llm-context-icon-image-color);
}

.llm-file-context-meta::before {
  mask-image: url("icons/action-file.svg");
  -webkit-mask-image: url("icons/action-file.svg");
  background-color: var(--llm-context-icon-file-color);
}

.llm-paper-context-meta::before {
  mask-image: url("icons/action-paper.svg");
  -webkit-mask-image: url("icons/action-paper.svg");
}

.llm-note-context-meta::before {
  content: none;
}

.llm-note-context-meta {
  min-width: 0;
  max-width: min(220px, 30vw);
  overflow: hidden;
  gap: 6px;
}

.llm-note-context-icon {
  flex: 0 0 auto;
  width: var(--llm-context-chip-icon-size, 18px);
  height: var(--llm-context-chip-icon-size, 18px);
  opacity: 1;
}

.llm-note-context-label {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.llm-image-preview-meta:hover {
  color: var(--fill-primary);
}

.llm-image-preview-meta:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 1px;
}

.llm-image-preview-meta.expanded {
  color: var(--fill-primary);
}

.llm-image-preview-expanded {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--stroke-secondary);
  border-radius: 10px;
  background: var(--material-background);
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 24;
  width: auto;
  max-height: min(68vh, 560px);
  overflow: auto;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  pointer-events: none;
  transition:
    opacity 0.14s ease,
    transform 0.14s ease,
    visibility 0.14s ease;
}

.llm-file-context-expanded {
  display: grid;
  grid-template-rows: auto;
}

.llm-file-context-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.llm-paper-context-expanded {
  display: grid;
  grid-template-rows: auto;
}

.llm-paper-context-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

#llm-main[data-llm-action-layout-mode="half"] .llm-user-files-list,
#llm-main[data-llm-action-layout-mode="half"] .llm-file-context-list,
#llm-main[data-llm-action-layout-mode="half"] .llm-paper-context-list,
#llm-main[data-llm-action-layout-mode="half"] .llm-user-papers-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#llm-main[data-llm-action-layout-mode="full"] .llm-user-files-list,
#llm-main[data-llm-action-layout-mode="full"] .llm-file-context-list,
#llm-main[data-llm-action-layout-mode="full"] .llm-paper-context-list,
#llm-main[data-llm-action-layout-mode="full"] .llm-user-papers-list {
  grid-template-columns: repeat(
    auto-fit,
    minmax(var(--llm-file-card-min-width), 1fr)
  );
}

/* User-message file cards should remain readable inside bubble-aligned width. */
#llm-main
  .llm-message-wrapper.user.llm-user-context-aligned
  .llm-user-files-list,
#llm-main
  .llm-message-wrapper.user.llm-user-context-aligned
  .llm-user-papers-list {
  grid-template-columns: minmax(0, 1fr);
}

.llm-file-context-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: center;
  min-height: 50px;
  padding: 6px 8px;
  border: 1px solid var(--stroke-secondary);
  border-radius: 10px;
  background: color-mix(
    in srgb,
    var(--material-background) 84%,
    var(--fill-quinary)
  );
}

.llm-file-context-item.llm-file-context-item-pinned {
  border-color: var(--llm-pin-border-color);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 28%, transparent);
  background: color-mix(
    in srgb,
    var(--material-background) 88%,
    var(--color-accent) 12%
  );
}

.llm-file-context-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  height: 34px;
  min-height: 34px;
  max-height: 34px;
  border-radius: 8px;
  background: color-mix(
    in srgb,
    var(--color-accent) 10%,
    var(--material-background)
  );
  color: var(--fill-primary);
  font-size: var(--llm-fs-11);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.llm-file-context-text {
  display: grid;
  gap: 1px;
  min-width: 0;
  width: 100%;
}

.llm-file-context-name {
  display: block;
  color: var(--fill-primary);
  font-size: var(--llm-fs-11);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-file-context-meta-info {
  display: block;
  color: var(--fill-tertiary);
  font-size: var(--llm-fs-10);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-file-context-remove {
  grid-column: 3;
  appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--fill-tertiary);
  font-size: var(--llm-fs-15);
  line-height: 1;
  cursor: pointer;
  justify-self: end;
  align-self: start;
}

.llm-file-context-remove:hover {
  background: var(--fill-quaternary);
  color: var(--fill-primary);
}

.llm-paper-context-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: start;
  min-height: 50px;
  padding: 7px 9px;
  border: 1px solid var(--stroke-secondary);
  border-radius: 10px;
  background: color-mix(
    in srgb,
    var(--material-background) 84%,
    var(--fill-quinary)
  );
}

.llm-paper-context-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.llm-paper-context-title {
  display: block;
  color: var(--fill-primary);
  font-size: var(--llm-fs-11);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-paper-context-meta-info {
  display: block;
  color: var(--fill-tertiary);
  font-size: var(--llm-fs-10);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-paper-context-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  border-radius: 6px;
  background: color-mix(
    in srgb,
    var(--color-accent) 10%,
    var(--material-background)
  );
  color: var(--fill-primary);
  font-size: var(--llm-fs-10);
  font-weight: 600;
  line-height: 1.2;
  padding: 2px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-paper-context-remove {
  grid-column: 2;
  appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--fill-tertiary);
  font-size: var(--llm-fs-15);
  line-height: 1;
  cursor: pointer;
  justify-self: end;
  align-self: start;
}

.llm-paper-context-remove:hover {
  background: var(--fill-quaternary);
  color: var(--fill-primary);
}

.llm-image-preview:hover .llm-image-preview-expanded,
.llm-image-preview.expanded .llm-image-preview-expanded {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.llm-image-preview.expanded .llm-image-preview-expanded {
  pointer-events: auto;
}

.llm-image-preview-strip {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  padding-top: 10px;
  padding-left: 10px;
  padding-bottom: 4px;
  gap: 8px;
  grid-row: 2;
}

.llm-preview-item {
  position: relative;
  overflow: visible;
  flex: 0 0 var(--llm-screenshot-thumb-size);
  width: var(--llm-screenshot-thumb-size);
  min-width: var(--llm-screenshot-thumb-size);
  max-width: var(--llm-screenshot-thumb-size);
  height: var(--llm-screenshot-thumb-size);
  min-height: var(--llm-screenshot-thumb-size);
  max-height: var(--llm-screenshot-thumb-size);
  aspect-ratio: 1 / 1;
}

.llm-preview-item.llm-preview-item-pinned .llm-preview-thumb {
  border-color: var(--llm-pin-border-color);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 32%, transparent);
  background: var(--llm-pin-bg);
}

.llm-preview-thumb {
  appearance: none;
  -moz-appearance: none;
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  border-radius: 7px;
  border: 1px solid var(--stroke-secondary);
  background: transparent;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  line-height: 0;
}

.llm-preview-thumb:hover {
  border-color: var(--color-accent);
}

.llm-preview-thumb.active {
  border-color: #ef4444;
  box-shadow: 0 0 0 1px #ef4444;
}

.llm-preview-img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  border: none;
  display: block;
}

.llm-preview-remove-one {
  appearance: none;
  -moz-appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-38%, -38%);
  z-index: 3;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #b91c1c;
  background: #dc2626;
  color: #fff;
  font-family: sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0 0 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.llm-preview-remove-one:hover {
  background: #ef4444;
  border-color: #ef4444;
}

.llm-image-preview:not(.expanded) .llm-preview-remove-one {
  display: none;
}

.llm-image-preview-selected {
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid var(--stroke-secondary);
  background: rgba(0, 0, 0, 0.24);
  overflow: hidden;
  grid-row: 1;
}

.llm-image-preview-selected-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(56vh, 420px);
  object-fit: contain;
  object-position: center top;
}

.llm-remove-img-btn {
  appearance: none;
  -moz-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--fill-tertiary);
  cursor: pointer;
  font-size: var(--llm-fs-14);
  font-weight: 700;
  padding: 0;
  line-height: 1;
  transition: background 0.15s;
}

.llm-remove-img-btn:hover {
  background: var(--fill-quaternary);
  color: var(--fill-primary);
}

.llm-remove-img-btn:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 1px;
}
