/* Claudian Plugin Styles */
/* Built from src/style/ modules */


/* ============================================
   base/variables.css
   ============================================ */
/* Brand & semantic color tokens */
.claudian-container {
  --claudian-brand: #D97757;
  --claudian-brand-rgb: 217, 119, 87;
  --claudian-brand-claude: #D97757;
  --claudian-brand-claude-rgb: 217, 119, 87;
  --claudian-brand-codex: #d0d0d0;
  --claudian-brand-codex-rgb: 208, 208, 208;
  --claudian-brand-opencode: #B8B8B8;
  --claudian-brand-opencode-rgb: 184, 184, 184;
  --claudian-error: #dc3545;
  --claudian-error-rgb: 220, 53, 69;
  --claudian-compact: #5bc0de;
}

body.theme-light .claudian-container {
  --claudian-brand-codex: #000000;
  --claudian-brand-codex-rgb: 0, 0, 0;
  --claudian-brand-opencode: #707070;
  --claudian-brand-opencode-rgb: 112, 112, 112;
}

/* Active-provider alias for single-provider surfaces. */
.claudian-container[data-provider="claude"] {
  --claudian-brand: var(--claudian-brand-claude);
  --claudian-brand-rgb: var(--claudian-brand-claude-rgb);
}

.claudian-container[data-provider="codex"] {
  --claudian-brand: var(--claudian-brand-codex);
  --claudian-brand-rgb: var(--claudian-brand-codex-rgb);
}

.claudian-container[data-provider="opencode"] {
  --claudian-brand: var(--claudian-brand-opencode);
  --claudian-brand-rgb: var(--claudian-brand-opencode-rgb);
}


/* ============================================
   base/container.css
   ============================================ */
.claudian-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  overflow: hidden;
  font-family: var(--font-text);
}

.claudian-provider-icon-variant--dark {
  display: none;
}

body.theme-dark .claudian-provider-icon-variant--light {
  display: none;
}

body.theme-dark .claudian-provider-icon-variant--dark {
  display: inline;
}


/* ============================================
   base/animations.css
   ============================================ */
@keyframes thinking-pulse {
  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes external-context-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 2px rgba(var(--claudian-brand-rgb), 0.4));
  }

  50% {
    filter: drop-shadow(0 0 6px rgba(var(--claudian-brand-rgb), 0.8));
  }
}

@keyframes mcp-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 2px rgba(124, 58, 237, 0.4));
  }

  50% {
    filter: drop-shadow(0 0 8px rgba(124, 58, 237, 0.9));
  }
}

@keyframes claudian-spin {
  to {
    transform: rotate(360deg);
  }
}


/* ============================================
   components/header.css
   ============================================ */
/* Header - logo, title/tabs slot, and actions */
.claudian-header {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 12px 12px 12px;
}

/* Title slot: contains logo + title (or tabs in header mode) */
.claudian-title-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;  /* Allow flex item to shrink below content size */
}

/* Legacy class for backwards compatibility */
.claudian-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.claudian-title-text {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.claudian-logo {
  display: flex;
  align-items: center;
  color: var(--claudian-brand);
}

/* Header actions (end side - always stays at end via margin-inline-start: auto) */
.claudian-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-inline-start: auto;
}

.claudian-header-actions-slot {
  /* No margin-inline-start: auto here; it's set by the base .claudian-header-actions */
}

.claudian-header .claudian-tab-bar-container {
  display: flex;
  gap: 4px;
}

.claudian-header-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-faint);
  transition: color 0.15s ease;
}

.claudian-header-btn:hover {
  color: var(--text-normal);
}

.claudian-header-btn svg {
  width: 16px;
  height: 16px;
}

.claudian-new-tab-btn svg {
  width: 16.8px;
  height: 16.8px;
}

/* ============================================
   components/tabs.css
   ============================================ */
.claudian-tab-bar-container {
  display: flex;
  align-items: center;
  gap: 4px;
}

.claudian-tab-badges {
  display: flex;
  align-items: center;
  gap: 4px;
}

.claudian-tab-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 2px solid var(--background-modifier-border);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-muted);
  background: var(--background-primary);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.claudian-tab-badge:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}

.claudian-tab-badge-active {
  border-color: var(--interactive-accent);
  color: var(--text-normal);
}

.claudian-tab-badge-streaming {
  border-color: var(--claudian-brand, #da7756);
}

.claudian-tab-badge-streaming[data-provider="claude"] {
  border-color: var(--claudian-brand-claude, #D97757);
}

.claudian-tab-badge-streaming[data-provider="codex"] {
  border-color: var(--claudian-brand-codex, #d0d0d0);
}

.claudian-tab-badge-streaming[data-provider="opencode"] {
  border-color: var(--claudian-brand-opencode, #C8C8C8);
}

.claudian-tab-badge-attention {
  border-color: var(--text-error);
}

.claudian-tab-badge-idle {
  border-color: var(--background-modifier-border);
}

.claudian-tab-content-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.claudian-tab-content {
  position: relative; /* For scroll-to-bottom button positioning */
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}


/* ============================================
   components/history.css
   ============================================ */
.claudian-history-container {
  position: static;
}

/* History dropup menu (opens upward since it's at bottom of view) */
.claudian-history-menu {
  display: none;
  position: absolute;
  bottom: 100%;
  margin-bottom: 4px;
  background: var(--background-secondary);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
  z-index: 1000;
  max-height: 400px;
  overflow: hidden;
  inset-inline-start: 0;
  inset-inline-end: 0;
}

.claudian-history-menu.visible {
  display: block;
}

/* Header mode: dropdown instead of dropup */
.claudian-container--header-mode .claudian-history-menu {
  bottom: auto;
  top: 100%;
  margin-bottom: 0;
  margin-top: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.claudian-history-header {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--background-modifier-border);
}

.claudian-history-list {
  max-height: 350px;
  overflow-y: auto;
}

.claudian-history-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.claudian-history-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--background-modifier-border);
  transition: background 0.15s ease;
}

.claudian-history-item-icon {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  flex-shrink: 0;
}

.claudian-history-item-icon svg {
  width: 16px;
  height: 16px;
}

.claudian-history-item:last-child {
  border-bottom: none;
}

.claudian-history-item:hover {
  background: var(--background-modifier-hover);
}

.claudian-history-item.active {
  background: var(--background-secondary);
  border-inline-start: 2px solid var(--interactive-accent);
  padding-inline-start: 10px;
}

.claudian-history-item.active .claudian-history-item-icon {
  color: var(--interactive-accent);
}

.claudian-history-item.active .claudian-history-item-content {
  cursor: default;
}

.claudian-history-item.active .claudian-history-item-date {
  color: var(--text-faint);
}

.claudian-history-item-content {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.claudian-history-item-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-normal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.claudian-history-item-date {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
}

.claudian-history-item-actions {
  display: flex;
  gap: 4px;
  margin-inline-start: 8px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.claudian-history-item:hover .claudian-history-item-actions {
  opacity: 1;
}

.claudian-action-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  color: var(--text-muted);
  transition: background 0.15s ease, color 0.15s ease;
}

.claudian-action-btn:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}

.claudian-action-btn svg {
  width: 14px;
  height: 14px;
}

.claudian-delete-btn:hover {
  color: var(--color-red);
}

.claudian-rename-input {
  width: 100%;
  padding: 2px 4px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--interactive-accent);
  border-radius: 4px;
  background: var(--background-primary);
  color: var(--text-normal);
}

.claudian-rename-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--interactive-accent-hover);
}

/* Loading indicator for title generation */
.claudian-action-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: spin 1s linear infinite;
  opacity: 0.6;
  cursor: default;
}


/* ============================================
   components/messages.css
   ============================================ */
/* Messages wrapper (for scroll-to-bottom button positioning) */
.claudian-messages-wrapper {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.claudian-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Focusable messages panel for vim-style navigation */
.claudian-messages-focusable:focus {
  outline: none;
}

/* Welcome message - claude.ai style */
.claudian-welcome {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  min-height: 200px;
}

.claudian-welcome-greeting {
  font-family: 'Copernicus', 'Tiempos Headline', 'Tiempos', Georgia, 'Times New Roman', serif;
  font-size: 28px;
  font-weight: 300;
  color: var(--text-muted);
  letter-spacing: -0.01em;
}

.claudian-message {
  padding: 10px 14px;
  border-radius: 8px;
  max-width: 95%;
  word-wrap: break-word;
}

.claudian-message-user {
  position: relative;
  background: rgba(0, 0, 0, 0.3);
  align-self: flex-end;
  border-end-end-radius: 4px;
}

/* Text selection in user messages - visible highlight */
.claudian-message-user ::selection {
  background: rgba(255, 255, 255, 0.35);
  color: inherit;
}

.claudian-message-assistant {
  background: transparent;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  border-end-start-radius: 4px;
  text-align: start;
}

.claudian-message-content {
  line-height: 1.5;
  user-select: text;
  -webkit-user-select: text;
  unicode-bidi: plaintext; /* Proper BiDi text handling for mixed RTL/LTR */
}

.claudian-interrupted {
  color: #d45d5d;
}

.claudian-interrupted-hint {
  color: var(--text-muted);
}

.claudian-text-block {
  position: relative;
  margin: 0;
}

.claudian-text-copy-btn {
  position: absolute;
  bottom: 0;
  inset-inline-end: 0;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
}

.claudian-text-copy-btn svg {
  width: 16px;
  height: 16px;
}

.claudian-text-block:hover .claudian-text-copy-btn {
  opacity: 1;
}

.claudian-text-copy-btn:hover {
  color: var(--text-normal);
}

.claudian-text-copy-btn.copied {
  color: var(--text-accent);
  font-size: 11px;
  font-family: var(--font-monospace);
}

.claudian-text-block+.claudian-tool-call {
  margin-top: 8px;
}

.claudian-tool-call+.claudian-text-block {
  margin-top: 8px;
}

.claudian-message-content p {
  margin: 0 0 8px 0;
}

.claudian-message-content p:last-child {
  margin-bottom: 0;
}

.claudian-message-content ul,
.claudian-message-content ol {
  margin: 8px 0;
  padding-inline-start: 20px;
}

/* Full-width tables */
.claudian-message-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
}

.claudian-message-content th,
.claudian-message-content td {
  border: 1px solid var(--background-modifier-border);
  padding: 6px 10px;
  text-align: start;
}

.claudian-message-content th {
  background: var(--background-secondary);
  font-weight: 600;
}

.claudian-message-content tr:hover {
  background: var(--background-secondary-alt);
}

.claudian-messages::-webkit-scrollbar {
  width: 6px;
}

.claudian-messages::-webkit-scrollbar-track {
  background: transparent;
}

.claudian-messages::-webkit-scrollbar-thumb {
  background: var(--background-modifier-border);
  border-radius: 3px;
}

.claudian-messages::-webkit-scrollbar-thumb:hover {
  background: var(--background-modifier-border-hover);
}

/* Response duration footer - styled as another line of content */
.claudian-response-footer {
  margin-top: 8px;
}

.claudian-baked-duration {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  font-style: italic;
}

/* Action buttons toolbar below user messages */
.claudian-user-msg-actions {
  position: absolute;
  bottom: -20px;
  right: 0;
  display: flex;
  gap: 12px;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 1;
}

.claudian-message-user:hover .claudian-user-msg-actions {
  opacity: 1;
}

.claudian-user-msg-actions span {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  transition: color 0.15s;
}

.claudian-user-msg-actions span svg {
  width: 16px;
  height: 16px;
}

.claudian-user-msg-actions span:hover {
  color: var(--text-normal);
}

.claudian-user-msg-actions span.copied {
  color: var(--text-accent);
  font-size: 11px;
  font-family: var(--font-monospace);
}

/* Compact boundary indicator */
.claudian-compact-boundary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}

.claudian-compact-boundary::before,
.claudian-compact-boundary::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--background-modifier-border);
}

.claudian-compact-boundary-label {
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
}


/* ============================================
   components/nav-sidebar.css
   ============================================ */
/* Navigation Sidebar */
.claudian-nav-sidebar {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.claudian-nav-sidebar.visible {
    opacity: 0.15;
    pointer-events: auto;
}

.claudian-nav-sidebar.visible:hover {
    opacity: 1;
}

.claudian-nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.claudian-nav-btn:hover {
    background: var(--background-secondary);
    color: var(--text-normal);
    transform: scale(1.05);
}

.claudian-nav-btn svg {
    width: 18px;
    height: 18px;
}

/* Specific button spacing/grouping if needed */
.claudian-nav-btn-top {
    margin-bottom: 4px;
}

.claudian-nav-btn-bottom {
    margin-top: 4px;
}


/* ============================================
   components/code.css
   ============================================ */
/* Code block wrapper - contains pre + button outside scroll area */
.claudian-code-wrapper {
  position: relative;
  margin: 8px 0;
}

/* Code blocks in chat messages */
.claudian-code-wrapper pre,
.claudian-message-content pre {
  background: rgba(0, 0, 0, 0.2);
  padding: 8px 12px;
  border-radius: 6px;
  overflow-x: auto;
  margin: 0;
}

/* Light mode: use a lighter background so hljs comment colors stay readable */
body.theme-light .claudian-code-wrapper pre,
body.theme-light .claudian-message-content pre {
  background: rgba(0, 0, 0, 0.08);
}

/* Code blocks without language - wrap content */
.claudian-code-wrapper:not(.has-language) pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-x: hidden;
}

/* Unwrapped pre still needs margin */
.claudian-message-content>pre {
  margin: 8px 0;
}

.claudian-message-content code {
  font-family: var(--font-monospace);
  font-size: 13px;
}

/* Clickable language label - positioned outside scroll area */
.claudian-code-wrapper .claudian-code-lang-label {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  padding: 2px 8px;
  font-size: 12px;
  font-family: var(--font-monospace);
  color: var(--text-faint);
  background: var(--background-primary);
  border-radius: 3px;
  cursor: pointer;
  z-index: 2;
  transition: color 0.15s ease, background 0.15s ease;
}

.claudian-code-wrapper .claudian-code-lang-label:hover {
  color: var(--text-normal);
  background: var(--background-modifier-hover);
}

/* Hide default copy button when language label exists */
.claudian-code-wrapper.has-language .copy-code-button {
  display: none;
}

/* Copy button - positioned outside scroll area */
.claudian-code-wrapper .copy-code-button {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  padding: 4px 8px;
  font-size: 11px;
  background: var(--background-primary);
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
  border-radius: 3px;
  z-index: 2;
}

/* If copy button uses an icon (svg) */
.claudian-code-wrapper .copy-code-button svg {
  width: 14px;
  height: 14px;
}

/* Show copy button on hover */
.claudian-code-wrapper:not(.has-language):hover .copy-code-button {
  opacity: 1;
}

.claudian-code-wrapper .copy-code-button:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}

/* ============================================
   components/thinking.css
   ============================================ */
.claudian-thinking {
  color: var(--claudian-brand);
  font-style: italic;
  padding: 4px 0;
  text-align: start;
  animation: thinking-pulse 1.5s ease-in-out infinite;
}

.claudian-thinking.claudian-thinking--compact {
  color: var(--claudian-compact);
}

.claudian-thinking-hint {
  color: var(--text-muted);
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.claudian-thinking-block {
  margin: 8px 0;
}

.claudian-text-block+.claudian-thinking-block {
  margin-top: 8px;
}

.claudian-thinking-block+.claudian-text-block {
  margin-top: 8px;
}

.claudian-thinking-block+.claudian-tool-call {
  margin-top: 8px;
}

.claudian-tool-call+.claudian-thinking-block {
  margin-top: 8px;
}

.claudian-thinking-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
  overflow: hidden;
}

.claudian-thinking-label {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--claudian-brand);
}

/* Thinking block content - tree-branch style */
.claudian-thinking-content {
  padding: 4px 0;
  padding-inline-start: 24px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  max-height: 400px;
  overflow-y: auto;
  border-inline-start: 2px solid var(--background-modifier-border);
  margin-inline-start: 7px;
}

.claudian-thinking-content p {
  margin: 0 0 8px 0;
}

.claudian-thinking-content p:last-child {
  margin-bottom: 0;
}

.claudian-thinking-content .claudian-code-wrapper {
  margin: 8px 0;
}

.claudian-thinking-content .claudian-code-wrapper pre {
  padding: 8px 10px;
  border-radius: 4px;
}

.claudian-thinking-content code {
  font-family: var(--font-monospace);
  font-size: 12px;
}


/* ============================================
   components/toolcalls.css
   ============================================ */
.claudian-tool-call {
  margin: 8px 0;
}

.claudian-tool-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
  overflow: hidden;
}

.claudian-tool-header:hover {
  opacity: 0.85;
}

.claudian-tool-icon {
  display: flex;
  align-items: center;
  color: var(--text-accent);
  flex-shrink: 0;
}

.claudian-tool-icon svg {
  width: 16px;
  height: 16px;
}

.claudian-tool-name {
  font-family: var(--font-monospace);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-normal);
  white-space: nowrap;
  flex-shrink: 0;
}

.claudian-tool-summary {
  font-family: var(--font-monospace);
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.claudian-tool-summary:empty {
  display: none;
}

.claudian-tool-call-bash.expanded .claudian-tool-summary {
  display: none;
}

.claudian-tool-bash-command {
  font-family: var(--font-monospace);
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-normal);
  white-space: pre-wrap;
  word-break: break-word;
  padding: 2px 0 4px;
}

/* Legacy: StatusPanel bash entries still use claudian-tool-label */
.claudian-tool-label {
  font-family: var(--font-monospace);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-normal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.claudian-tool-current {
  font-family: var(--font-monospace);
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}

.claudian-tool-current:empty {
  display: none;
}

.claudian-tool-status {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
}

.claudian-tool-status svg {
  width: 14px;
  height: 14px;
}

.claudian-tool-status.status-running {
  color: var(--text-accent);
}

.claudian-tool-status.status-completed {
  color: var(--color-green);
}

.claudian-tool-status.status-error {
  color: var(--color-red);
}

.claudian-tool-status.status-blocked {
  color: var(--color-orange);
}

/* Tool call content - border style (like thinking block) */
.claudian-tool-content {
  padding: 4px 0;
  padding-inline-start: 16px;
  margin-inline-start: 7px;
  border-inline-start: 2px solid var(--background-modifier-border);
}

/* Tool content variants that render inline widgets instead of bordered results */
.claudian-tool-content-todo,
.claudian-tool-content-ask {
  border-inline-start: none;
  margin-inline-start: 0;
  padding-inline-start: 0;
}

/* Expanded content: per-line rendering */
.claudian-tool-lines {
  font-family: var(--font-monospace);
  font-size: 12px;
  line-height: 1.4;
  overflow-x: auto;
}

.claudian-tool-line {
  padding: 1px 0;
  color: var(--text-muted);
  white-space: pre;
}

/* Hover highlight for file search results */
.claudian-tool-line.hoverable:hover {
  background: var(--background-modifier-hover);
}

/* Truncation indicator: "... N more lines" */
.claudian-tool-truncated {
  color: var(--text-faint);
  font-style: italic;
  padding: 4px 0;
  font-family: var(--font-monospace);
  font-size: 12px;
}

/* ToolSearch expanded: icon + tool name rows */
.claudian-tool-search-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
  font-family: var(--font-monospace);
  font-size: 12px;
  color: var(--text-muted);
}

.claudian-tool-search-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--text-faint);
}

.claudian-tool-search-icon svg {
  width: 14px;
  height: 14px;
}

/* Web search links */
.claudian-tool-link {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 3px 0;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-monospace);
  font-size: 12px;
  line-height: 1.4;
}

.claudian-tool-link:hover {
  color: var(--text-accent);
}

.claudian-tool-link-icon {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-top: 2px;
  color: var(--text-faint);
}

.claudian-tool-link-icon svg {
  width: 12px;
  height: 12px;
}

.claudian-tool-link-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Web search summary section */
.claudian-tool-web-summary {
  font-family: var(--font-monospace);
  font-size: 12px;
  color: var(--text-muted);
  padding-top: 4px;
  border-top: 1px solid var(--background-modifier-border);
  margin-top: 4px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
}

/* Empty state for file search */
.claudian-tool-empty {
  color: var(--text-faint);
  font-style: italic;
  font-family: var(--font-monospace);
  font-size: 12px;
  padding: 4px 0;
}

.claudian-tool-result-row {
  display: flex;
  align-items: flex-start;
}

.claudian-tool-result-text {
  font-family: var(--font-monospace);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
  white-space: pre-wrap;
  overflow: hidden;
  flex: 1;
}

.claudian-tool-result-item {
  display: block;
  margin-bottom: 2px;
}

.claudian-tool-patch-section + .claudian-tool-patch-section {
  margin-top: 10px;
}

.claudian-tool-patch-header {
  font-family: var(--font-monospace);
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.claudian-tool-result-item:last-child {
  margin-bottom: 0;
}


/* ============================================
   components/status-panel.css
   ============================================ */
/* Status Panel - persistent bottom panel for todos and command output */

.claudian-status-panel-container {
  flex-shrink: 0;
  padding: 0 14px;
}

.claudian-status-panel {
  padding-top: 12px;
}

/* Todo Section */

.claudian-status-panel-todos {
  margin-top: 4px;
}

.claudian-status-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s ease;
  overflow: hidden;
}

.claudian-status-panel-header:hover {
  background: var(--background-modifier-hover);
}

.claudian-status-panel-header:focus-visible {
  outline: 2px solid var(--interactive-accent);
  outline-offset: 2px;
}

.claudian-status-panel-icon {
  display: flex;
  align-items: center;
  color: var(--text-accent);
  flex-shrink: 0;
}

.claudian-status-panel-icon svg {
  width: 16px;
  height: 16px;
}

.claudian-status-panel-label {
  font-family: var(--font-monospace);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-normal);
}

.claudian-status-panel-current {
  flex: 1;
  font-family: var(--font-monospace);
  font-size: 13px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.claudian-status-panel-status {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.claudian-status-panel-status svg {
  width: 14px;
  height: 14px;
}

.claudian-status-panel-status.status-completed {
  color: var(--color-green);
}

.claudian-status-panel-content {
  padding: 2px 0;
}

/* Individual todo item - shared by status panel and inline tool via .claudian-todo-list-container */
.claudian-todo-list-container .claudian-todo-item {
  display: flex;
  align-items: flex-start;
  padding: 1px 0;
}

.claudian-todo-list-container .claudian-todo-status-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.claudian-todo-list-container .claudian-todo-status-icon svg {
  width: 12px;
  height: 12px;
}

.claudian-todo-list-container .claudian-todo-text {
  font-family: var(--font-monospace);
  font-size: 12px;
  line-height: 1.4;
  flex: 1;
  padding-left: 12px;
}

.claudian-todo-list-container .claudian-todo-pending .claudian-todo-status-icon {
  color: var(--text-normal);
}

.claudian-todo-list-container .claudian-todo-pending .claudian-todo-status-icon svg {
  transform: scale(2);
}

.claudian-todo-list-container .claudian-todo-pending .claudian-todo-text {
  color: var(--text-normal);
}

.claudian-todo-list-container .claudian-todo-in_progress .claudian-todo-status-icon {
  color: var(--interactive-accent);
}

.claudian-todo-list-container .claudian-todo-in_progress .claudian-todo-status-icon svg {
  transform: scale(2);
}

.claudian-todo-list-container .claudian-todo-in_progress .claudian-todo-text {
  color: var(--text-normal);
}

.claudian-todo-list-container .claudian-todo-completed .claudian-todo-status-icon {
  color: var(--color-green);
}

.claudian-todo-list-container .claudian-todo-completed .claudian-todo-text {
  color: var(--text-muted);
}

/* Bash Output Section */

.claudian-status-panel-bash {
  margin-bottom: 4px;
}

.claudian-status-panel-bash-header {
  padding: 4px 0;
}

.claudian-status-panel-bash-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.claudian-status-panel-bash-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  color: var(--text-muted);
}

.claudian-status-panel-bash-action:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}

.claudian-status-panel-bash-content {
  padding-top: 2px;
  max-height: 320px;
  max-height: min(40vh, 320px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.claudian-status-panel-bash-entry {
  margin: 4px 0;
}

.claudian-status-panel-bash-entry .claudian-tool-icon svg {
  width: 14px;
  height: 14px;
  position: relative;
  top: -1px;
}

.claudian-status-panel-bash-entry .claudian-tool-call {
  margin: 0;
}

/* Keep bash output blocks from growing without bound */
.claudian-status-panel-bash-entry .claudian-tool-result-text {
  max-height: 200px;
  overflow-y: auto;
  word-break: break-word;
}


/* ============================================
   components/subagent.css
   ============================================ */
.claudian-subagent-list {
  margin: 8px 0;
}

.claudian-text-block+.claudian-subagent-list {
  margin-top: 8px;
}

.claudian-subagent-list+.claudian-text-block {
  margin-top: 8px;
}

.claudian-tool-call+.claudian-subagent-list {
  margin-top: 8px;
}

.claudian-subagent-list+.claudian-tool-call {
  margin-top: 8px;
}

.claudian-subagent-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
  overflow: hidden;
}

.claudian-subagent-icon {
  display: flex;
  align-items: center;
  color: var(--interactive-accent);
  flex-shrink: 0;
}

.claudian-subagent-icon svg {
  width: 16px;
  height: 16px;
}

.claudian-subagent-label {
  flex: 1;
  font-family: var(--font-monospace);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-normal);
}

.claudian-subagent-status {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.claudian-subagent-status svg {
  width: 14px;
  height: 14px;
}

.claudian-subagent-status.status-running {
  color: var(--text-accent);
}

.claudian-subagent-status.status-completed {
  color: var(--color-green);
}

.claudian-subagent-status.status-error {
  color: var(--color-red);
}

.claudian-subagent-content {
  padding: 4px 0;
  padding-inline-start: 16px;
  margin-inline-start: 7px;
  border-inline-start: 2px solid var(--background-modifier-border);
}

.claudian-subagent-section {
  margin: 2px 0 6px;
}

.claudian-subagent-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  font-family: var(--font-monospace);
  font-size: 12px;
  color: var(--text-muted);
  padding: 2px 0;
}

.claudian-subagent-section-header:hover {
  color: var(--text-normal);
}

.claudian-subagent-section-title {
  flex: 1;
  min-width: 0;
}

.claudian-subagent-section-body {
  padding-inline-start: 6px;
}

.claudian-subagent-prompt-text,
.claudian-subagent-result-output {
  font-family: var(--font-monospace);
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
  white-space: pre-wrap;
  word-break: break-word;
}

.claudian-subagent-result-output {
  max-height: 220px;
  overflow-y: auto;
}

.claudian-subagent-tools {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.claudian-subagent-tool-item {
  display: block;
}

.claudian-subagent-tool-header {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  overflow: hidden;
  padding: 2px 0;
}

.claudian-subagent-tool-header:hover {
  opacity: 0.85;
}

.claudian-subagent-tool-icon {
  display: flex;
  align-items: center;
  color: var(--text-accent);
  flex-shrink: 0;
}

.claudian-subagent-tool-icon svg {
  width: 13px;
  height: 13px;
}

.claudian-subagent-tool-name {
  font-family: var(--font-monospace);
  font-size: 12px;
  color: var(--text-normal);
  white-space: nowrap;
  flex-shrink: 0;
}

.claudian-subagent-tool-summary {
  font-family: var(--font-monospace);
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.claudian-subagent-tool-status {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.claudian-subagent-tool-status svg {
  width: 12px;
  height: 12px;
}

.claudian-subagent-tool-status.status-running {
  color: var(--text-accent);
}

.claudian-subagent-tool-status.status-completed {
  color: var(--color-green);
}

.claudian-subagent-tool-status.status-error,
.claudian-subagent-tool-status.status-blocked {
  color: var(--color-red);
}

.claudian-subagent-tool-content {
  padding: 2px 0 2px 16px;
}

.claudian-subagent-tool-empty {
  color: var(--text-faint);
  font-style: italic;
  font-family: var(--font-monospace);
  font-size: 12px;
  padding: 2px 0;
}

.claudian-subagent-status-text {
  font-size: 11px;
  font-family: var(--font-monospace);
  color: var(--text-muted);
  margin-inline-start: auto;
  padding-inline-start: 8px;
}

.claudian-subagent-list.async .claudian-subagent-icon {
  color: var(--interactive-accent);
}

.claudian-subagent-list.async.pending .claudian-subagent-status-text {
  color: var(--text-muted);
}

.claudian-subagent-list.async.running .claudian-subagent-status-text {
  color: var(--text-accent);
}

.claudian-subagent-list.async.awaiting .claudian-subagent-status-text {
  color: var(--color-yellow);
}

.claudian-subagent-list.async.completed .claudian-subagent-status-text {
  color: var(--color-green);
}

.claudian-subagent-list.async.error .claudian-subagent-status-text {
  color: var(--color-red);
}

.claudian-subagent-list.async.orphaned .claudian-subagent-status-text {
  color: var(--color-orange);
}


/* ============================================
   components/input.css
   ============================================ */
/* Input area */
.claudian-input-container {
  position: relative;
  padding: 12px 0 0 0;
}

/* Input wrapper (border container) - flex column so textarea expands when no chips */
/* Height calculation: context row (36px) + textarea min (60px) + toolbar (38px) + border (2px) = 136px */
.claudian-input-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 140px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  background: var(--background-primary);
}

/* Context row (file chip start, selection indicator end) - inside input wrapper at top */
/* Collapsed by default; expanded via .has-content class; textarea fills remaining space */
.claudian-context-row {
  display: none;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  padding: 6px 10px 0 10px;
  gap: 8px;
}

/* Show context row when it has visible content */
.claudian-context-row.has-content {
  display: flex;
}

/* Nav row (tab badges start, header icons end) - above input wrapper */
.claudian-input-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 8px 0;
  min-height: 0;
}

/* Header mode: hide nav row above input (content moved to header) */
.claudian-container--header-mode .claudian-input-nav-row {
  display: none;
}

/* Selection indicator (shown when text is selected in editor) */
/* Match file chip height (24px): chip has 16px remove button + 6px padding + 2px border */
/* Indicator: 12px text + 10px padding (5+5) + 2px border = 24px */
.claudian-selection-indicator,
.claudian-browser-selection-indicator,
.claudian-canvas-indicator {
  color: #7abaff;
  font-size: 12px;
  line-height: 1;
  opacity: 0.9;
  pointer-events: none;
  white-space: nowrap;
  padding: 5px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  margin-inline-start: auto;
  flex-shrink: 0;
  order: 4;
  max-width: min(100%, clamp(220px, 64vw, 560px));
  overflow: hidden;
  text-overflow: ellipsis;
}

.claudian-input {
  width: 100%;
  flex: 1 1 0;
  min-height: 60px;
  /* max-height dynamically set by JS: max(150px, 55% of view height) */
  resize: none;
  padding: 8px 10px 10px 10px;
  border: none !important;
  border-radius: 6px;
  background: transparent !important;
  color: var(--text-normal);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: none !important;
  overflow-y: auto;
  unicode-bidi: plaintext; /* Proper BiDi text handling for mixed RTL/LTR */
}

.claudian-input:hover,
.claudian-input:focus {
  outline: none !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.claudian-input::placeholder {
  color: var(--text-muted);
}

/* Input toolbar */
.claudian-input-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  padding: 4px 6px 6px 6px;
}

/* File indicator (attached files) */
.claudian-file-indicator {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
}

.claudian-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 8px;
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 12px;
  font-size: 12px;
  line-height: 1;
  max-width: 200px;
  cursor: pointer;
}

.claudian-file-chip-icon {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  flex-shrink: 0;
}

.claudian-file-chip-icon svg {
  width: 12px;
  height: 12px;
}

.claudian-file-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-normal);
}

.claudian-file-chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}

.claudian-file-chip-remove:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}

.claudian-file-chip:hover {
  background: var(--background-modifier-hover);
}

/* Composer queue status row (queued follow-up preview + steer action) */
.claudian-input-queue-row {
  display: none;
  font-size: 12px;
  color: var(--text-muted);
  font-style: normal;
  align-items: center;
  gap: 8px;
  padding: 0 2px 8px 2px;
}

.claudian-queue-indicator-text {
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.claudian-queue-indicator-action {
  flex: 0 0 auto;
  padding: 1px 8px;
  border: 0;
  background: transparent;
  color: var(--interactive-accent);
  font: inherit;
  cursor: pointer;
}

.claudian-queue-indicator-action:hover {
  text-decoration: underline;
}

.claudian-queue-indicator-action[disabled] {
  color: var(--text-faint);
  cursor: default;
  text-decoration: none;
}

/* Light blue border when instruction mode is active */
.claudian-input-instruction-mode {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 1px #60a5fa;
}

/* Pink border when bash mode is active */
.claudian-input-bang-bash-mode {
  border-color: #f472b6 !important;
  box-shadow: 0 0 0 1px #f472b6;
}

/* Monospace input while in bash mode */
.claudian-input-wrapper.claudian-input-bang-bash-mode .claudian-input {
  font-family: var(--font-monospace);
}


/* ============================================
   components/context-footer.css
   ============================================ */
/* Context usage meter (inline in toolbar) */

.claudian-context-meter {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: 8px;
  cursor: default;
}

/* Custom tooltip */
.claudian-context-meter::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 6px;
  padding: 4px 8px;
  font-size: 11px;
  color: var(--text-normal);
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  pointer-events: none;
  z-index: 100;
}

.claudian-context-meter:hover::after {
  opacity: 1;
  visibility: visible;
}

.claudian-context-meter-gauge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.claudian-context-meter-gauge svg {
  width: 16px;
  height: 16px;
}

.claudian-meter-bg {
  stroke: var(--background-modifier-border);
}

.claudian-meter-fill {
  stroke: var(--claudian-brand);
  transition: stroke-dashoffset 0.3s ease, stroke 0.3s ease;
}

.claudian-context-meter-percent {
  font-size: 11px;
  color: var(--claudian-brand);
  min-width: 24px;
  text-align: end;
  transition: color 0.3s ease;
}

/* Warning state (> 80%) - pale red */
.claudian-context-meter.warning .claudian-meter-fill {
  stroke: #E57373;
}

.claudian-context-meter.warning .claudian-context-meter-percent {
  color: #E57373;
}


/* ============================================
   toolbar/model-selector.css
   ============================================ */
/* Model selector */
.claudian-model-selector {
  position: relative;
}

.claudian-model-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--claudian-brand);
  font-size: 12px;
}

.claudian-model-label {
  font-weight: 500;
}

.claudian-model-chevron {
  display: flex;
  align-items: center;
}

.claudian-model-chevron svg {
  width: 12px;
  height: 12px;
}

.claudian-model-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  width: max-content;
  padding: 4px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

.claudian-model-selector:hover .claudian-model-dropdown {
  opacity: 1;
  visibility: visible;
}

.claudian-model-group {
  padding: 3px 8px;
  font-size: 8px;
  font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  pointer-events: none;
}

.claudian-model-group:not(:first-child) {
  margin-top: 4px;
  border-top: 1px solid var(--background-modifier-border);
  padding-top: 6px;
}

.claudian-model-provider-icon {
  flex-shrink: 0;
  opacity: 0.7;
}

.claudian-model-option {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-muted);
  border-radius: 3px;
  transition: background 0.1s ease, color 0.1s ease;
  white-space: nowrap;
}

.claudian-model-option:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}

.claudian-model-option.selected {
  background: rgba(var(--claudian-brand-rgb), 0.15);
  color: var(--claudian-brand);
  font-weight: 500;
}


/* ============================================
   toolbar/mode-selector.css
   ============================================ */
.claudian-mode-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding-left: 12px;
  padding-right: 8px;
}

.claudian-mode-label {
  font-size: 11px;
  color: var(--text-muted);
  min-width: 32px;
}

.claudian-mode-label.active {
  color: var(--claudian-brand);
  font-weight: 600;
}


/* ============================================
   toolbar/thinking-selector.css
   ============================================ */
/* Thinking selector (effort for adaptive models, token budget for custom) */
.claudian-thinking-selector {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Effort / budget container (shared layout) */
.claudian-thinking-effort,
.claudian-thinking-budget {
  display: flex;
  align-items: center;
  gap: 6px;
}

.claudian-thinking-label-text {
  font-size: 11px;
  color: var(--text-muted);
}

.claudian-thinking-gears {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 4px;
}

/* Current selection (visible when collapsed) */
.claudian-thinking-current {
  padding: 3px 8px;
  font-size: 11px;
  color: var(--claudian-brand);
  font-weight: 500;
  cursor: pointer;
  border-radius: 3px;
  white-space: nowrap;
  background: transparent;
}

/* Options container - expands vertically upward */
.claudian-thinking-options {
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  padding: 4px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* Expand on hover */
.claudian-thinking-gears:hover .claudian-thinking-options {
  opacity: 1;
  visibility: visible;
}

.claudian-thinking-gear {
  padding: 3px 8px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.1s ease, color 0.1s ease;
  white-space: nowrap;
}

.claudian-thinking-gear:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}

.claudian-thinking-gear.selected {
  background: rgba(var(--claudian-brand-rgb), 0.15);
  color: var(--claudian-brand);
  font-weight: 500;
}


/* ============================================
   toolbar/permission-toggle.css
   ============================================ */
/* Permission Mode Toggle */
.claudian-permission-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding-left: 12px;
  padding-right: 8px;
}

.claudian-permission-label {
  font-size: 11px;
  color: var(--text-muted);
  min-width: 28px;
}

.claudian-permission-label.plan-active {
  color: rgb(92, 148, 140);
  font-weight: 600;
}

.claudian-toggle-switch {
  width: 32px;
  height: 18px;
  border-radius: 9px;
  background: var(--background-modifier-border);
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.claudian-toggle-switch::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-muted);
  top: 2px;
  left: 2px;
  transition: transform 0.2s ease, background 0.2s ease;
}

.claudian-toggle-switch:hover {
  background: var(--background-modifier-hover);
}

.claudian-toggle-switch.active {
  background: rgba(var(--claudian-brand-rgb), 0.3);
}

.claudian-toggle-switch.active::after {
  transform: translateX(14px);
  background: var(--claudian-brand);
}


/* ============================================
   toolbar/service-tier-toggle.css
   ============================================ */
/* Codex fast-mode / service-tier toggle */
.claudian-service-tier-toggle {
  display: flex;
  align-items: center;
  padding-left: 2px;
}

.claudian-service-tier-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
}

.claudian-service-tier-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.claudian-service-tier-icon svg {
  width: 14px;
  height: 14px;
}

.claudian-service-tier-button:hover {
  background: var(--background-modifier-hover);
}

.claudian-service-tier-button.active {
  color: var(--claudian-brand);
}


/* ============================================
   toolbar/external-context.css
   ============================================ */
/* External Context Selector */
.claudian-external-context-selector {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 8px;
}

.claudian-external-context-icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.claudian-external-context-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--text-faint);
  transition: color 0.15s ease;
}

.claudian-external-context-icon-wrapper:hover .claudian-external-context-icon {
  color: var(--text-normal);
}

.claudian-external-context-icon.active {
  color: var(--claudian-brand);
  animation: external-context-glow 2s ease-in-out infinite;
}

.claudian-external-context-icon svg {
  width: 16px;
  height: 16px;
}

.claudian-external-context-badge {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 9px;
  font-weight: 600;
  color: var(--claudian-brand);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.claudian-external-context-badge.visible {
  opacity: 1;
}

.claudian-external-context-dropdown {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 100%;
  margin-bottom: 4px;
  min-width: 260px;
  max-width: 320px;
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 100;
}

.claudian-external-context-selector:hover .claudian-external-context-dropdown {
  opacity: 1;
  visibility: visible;
}

.claudian-external-context-header {
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--background-modifier-border);
}

.claudian-external-context-list {
  max-height: 200px;
  overflow-y: auto;
}

.claudian-external-context-empty {
  padding: 16px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
}

.claudian-external-context-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  gap: 8px;
  border-bottom: 1px solid var(--background-modifier-border-focus);
}

.claudian-external-context-item:last-child {
  border-bottom: none;
}

.claudian-external-context-text {
  flex: 1;
  font-size: 12px;
  font-family: var(--font-monospace);
  color: var(--text-normal);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.claudian-external-context-lock {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-muted);
  opacity: 0.4;
  transition: all 0.15s ease;
}

.claudian-external-context-lock:hover {
  background: var(--background-modifier-hover);
  opacity: 0.8;
}

.claudian-external-context-lock.locked {
  color: var(--claudian-brand);
  opacity: 0.9;
}

.claudian-external-context-lock.locked:hover {
  opacity: 1;
}

.claudian-external-context-lock svg {
  width: 12px;
  height: 12px;
}

.claudian-external-context-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-muted);
  opacity: 0.6;
  transition: all 0.15s ease;
}

.claudian-external-context-remove:hover {
  background: rgba(var(--claudian-error-rgb), 0.15);
  color: var(--claudian-error);
  opacity: 1;
}

.claudian-external-context-remove svg {
  width: 14px;
  height: 14px;
}


/* ============================================
   toolbar/mcp-selector.css
   ============================================ */
/* MCP Server Selector */
.claudian-mcp-selector {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 8px;
}

.claudian-mcp-selector-icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.claudian-mcp-selector-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--text-faint);
  transition: color 0.15s ease;
}

.claudian-mcp-selector-icon-wrapper:hover .claudian-mcp-selector-icon {
  color: var(--text-normal);
}

.claudian-mcp-selector-icon.active {
  color: var(--claudian-brand);
  animation: mcp-glow 2s ease-in-out infinite;
}

.claudian-mcp-selector-icon svg {
  width: 16px;
  height: 16px;
}

.claudian-mcp-selector-badge {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 9px;
  font-weight: 600;
  color: var(--claudian-brand);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.claudian-mcp-selector-badge.visible {
  opacity: 1;
}

.claudian-mcp-selector-dropdown {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 100%;
  margin-bottom: 4px;
  min-width: 200px;
  max-width: 280px;
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 100;
}

/* Bridge the gap between icon and dropdown to prevent hover breaks */
.claudian-mcp-selector-dropdown::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 8px;
}

.claudian-mcp-selector-dropdown.visible,
.claudian-mcp-selector:hover .claudian-mcp-selector-dropdown {
  opacity: 1;
  visibility: visible;
}

.claudian-mcp-selector-header {
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--background-modifier-border);
}

.claudian-mcp-selector-list {
  max-height: 200px;
  overflow-y: auto;
}

.claudian-mcp-selector-empty {
  padding: 16px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
}

.claudian-mcp-selector-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  gap: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.claudian-mcp-selector-item:hover {
  background: var(--background-modifier-hover);
}

.claudian-mcp-selector-item.enabled {
  background: rgba(var(--claudian-brand-rgb), 0.1);
}

.claudian-mcp-selector-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 3px;
  color: var(--claudian-brand);
}

.claudian-mcp-selector-item.enabled .claudian-mcp-selector-check {
  background: rgba(var(--claudian-brand-rgb), 0.2);
  border-color: var(--claudian-brand);
}

.claudian-mcp-selector-check svg {
  width: 12px;
  height: 12px;
}

.claudian-mcp-selector-item-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex: 1;
  overflow: hidden;
}

.claudian-mcp-selector-item-name {
  font-size: 12px;
  color: var(--text-normal);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.claudian-mcp-selector-cs-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(var(--claudian-brand-rgb), 0.2);
  color: var(--claudian-brand);
  flex-shrink: 0;
  margin-left: auto;
}


/* ============================================
   features/file-context.css
   ============================================ */
/* @ Mention dropdown */
.claudian-mention-dropdown {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: 4px;
  background: var(--background-secondary);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  max-height: 250px;
  overflow-y: auto;
}

.claudian-mention-dropdown.visible {
  display: block;
}

/* Fixed positioning for inline editor */
.claudian-mention-dropdown-fixed {
  position: fixed;
  z-index: 10001;
}

.claudian-mention-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.1s ease;
}

.claudian-mention-item:hover,
.claudian-mention-item.selected {
  background: var(--background-modifier-hover);
}

.claudian-mention-icon {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  flex-shrink: 0;
}

.claudian-mention-icon svg {
  width: 14px;
  height: 14px;
}

.claudian-mention-path {
  font-size: 13px;
  color: var(--text-normal);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.claudian-mention-empty {
  padding: 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* Scrollbar for mention dropdown */
.claudian-mention-dropdown::-webkit-scrollbar {
  width: 6px;
}

.claudian-mention-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.claudian-mention-dropdown::-webkit-scrollbar-thumb {
  background: var(--background-modifier-border);
  border-radius: 3px;
}

/* MCP items in @-mention dropdown */
.claudian-mention-item.mcp-server .claudian-mention-icon {
  color: var(--interactive-accent);
}

.claudian-mention-item.vault-folder .claudian-mention-icon {
  color: var(--text-muted);
}

.claudian-mention-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.claudian-mention-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--interactive-accent);
}

.claudian-mention-desc {
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Context file items in @-mention dropdown */
.claudian-mention-item.context-file .claudian-mention-icon {
  color: var(--claudian-brand);
}

.claudian-mention-item.context-file .claudian-mention-text {
  flex-direction: row;
  overflow: hidden;
  white-space: nowrap;
}

.claudian-mention-item.context-file .claudian-mention-name-context {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Context folder filter items in @-mention dropdown */
.claudian-mention-item.context-folder .claudian-mention-icon {
  color: var(--text-muted);
}

.claudian-mention-name-folder {
  color: var(--text-normal);
  font-weight: 500;
}

.claudian-mention-name-context {
  color: var(--text-normal);
}

/* Agent folder items in @-mention dropdown */
.claudian-mention-item.agent-folder .claudian-mention-icon {
  color: var(--link-color);
}

.claudian-mention-name-agent-folder {
  color: var(--link-color);
  font-weight: 600;
}

/* Agent items in @-mention dropdown (inside @Agents/) */
.claudian-mention-item.agent .claudian-mention-icon {
  color: var(--link-color);
}

.claudian-mention-item.agent .claudian-mention-text {
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
}

.claudian-mention-item.agent .claudian-mention-name-agent {
  color: var(--text-normal);
  font-size: 13px;
  flex-shrink: 0;
}

.claudian-mention-item.agent .claudian-mention-agent-desc {
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}


/* ============================================
   features/file-link.css
   ============================================ */
/* Clickable file links that open files in Obsidian */
.claudian-file-link {
  color: var(--text-accent);
  text-decoration: none;
  cursor: pointer;
  border-radius: 3px;
  transition: color 0.15s ease;
}

.claudian-file-link:hover {
  color: var(--text-accent-hover);
  text-decoration: underline;
}

/* File link inside inline code */
code .claudian-file-link {
  color: var(--text-accent);
}

code .claudian-file-link:hover {
  color: var(--text-accent-hover);
}


/* ============================================
   features/image-context.css
   ============================================ */
/* Image Context - Preview & Attachments */

/* Image preview container (in input area) */
.claudian-image-preview {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
  margin-bottom: 4px;
}

/* Individual image preview chip */
.claudian-image-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 8px;
  max-width: 200px;
}

.claudian-image-chip:hover {
  border-color: var(--interactive-accent);
}

/* Image thumbnail */
.claudian-image-thumb {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
}

.claudian-image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Image info */
.claudian-image-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.claudian-image-name {
  font-size: 12px;
  color: var(--text-normal);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.claudian-image-size {
  font-size: 10px;
  color: var(--text-muted);
}

/* Remove button */
.claudian-image-remove {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease;
  flex-shrink: 0;
  font-size: 0; /* Hide text character */
}

.claudian-image-remove::before,
.claudian-image-remove::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  background: var(--text-muted);
  border-radius: 1px;
  transition: background 0.15s ease;
}

.claudian-image-remove::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.claudian-image-remove::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.claudian-image-remove:hover {
  background: var(--background-modifier-error);
}

.claudian-image-remove:hover::before,
.claudian-image-remove:hover::after {
  background: var(--text-on-accent);
}

/* Drop overlay - inside input wrapper */
.claudian-drop-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(var(--claudian-brand-rgb), 0.08);
  border: 2px dashed var(--claudian-brand);
  border-radius: 6px;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  pointer-events: none;
}

.claudian-drop-overlay.visible {
  display: flex;
}

.claudian-drop-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--claudian-brand);
}

.claudian-drop-content svg {
  opacity: 0.7;
}

.claudian-drop-content span {
  font-size: 12px;
  font-weight: 500;
}

/* Images in Messages (displayed above user bubble) */

/* Images container - right-aligned above user message */
.claudian-message-images {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  margin-bottom: 6px;
  padding-right: 4px;
}

/* Individual image in message - standardized size */
.claudian-message-image {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
}

.claudian-message-image:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.claudian-message-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ============================================
   features/image-embed.css
   ============================================ */
/* Image embed styles - displays ![[image.png]] wikilinks as actual images */

.claudian-embedded-image {
  display: inline-block;
  max-width: 100%;
  margin: 0.5em 0;
  vertical-align: middle;
}

.claudian-embedded-image img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-s);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.claudian-embedded-image img:hover {
  opacity: 0.9;
}

/* When image is inline with text */
.claudian-text-block p .claudian-embedded-image {
  margin: 0.25em 0;
}

/* Block-level image (standalone on its own line) */
.claudian-text-block p > .claudian-embedded-image:only-child {
  display: block;
  margin: 0.75em 0;
}

/* Fallback when image file not found */
.claudian-embedded-image-fallback {
  color: var(--text-muted);
  font-style: italic;
  background: var(--background-modifier-hover);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-s);
}


/* ============================================
   features/image-modal.css
   ============================================ */
/* Full-size Image Modal */
.claudian-image-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  cursor: pointer;
}

.claudian-image-modal {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  cursor: default;
}

.claudian-image-modal img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.claudian-image-modal-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background-secondary);
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  color: var(--text-muted);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: background 0.15s ease, color 0.15s ease;
}

.claudian-image-modal-close:hover {
  background: var(--background-modifier-error);
  color: var(--text-on-accent);
}


/* ============================================
   features/inline-edit.css
   ============================================ */
/* Inline Edit (CM6 decorations) */

/* Selection highlight (shared by inline edit and chat) */
.cm-line .claudian-selection-highlight,
.claudian-selection-highlight {
  background: var(--text-selection) !important;
  border-radius: 2px;
  padding: 3px 0;
  margin: -3px 0;
}

/* Preview mode selection highlight via CSS Custom Highlight API */
::highlight(claudian-selection) {
  background: var(--text-selection);
}

/* CM6 widget container - ensure transparent background */
.cm-widgetBuffer,
.cm-line:has(.claudian-inline-input-container) {
  background: transparent !important;
}

/* Input container - fully transparent */
.claudian-inline-input-container {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 2px 0;
  background: transparent !important;
}

/* Input wrapper - contains input and spinner */
.claudian-inline-input-wrap {
  flex: 1;
  position: relative;
  background: transparent !important;
  overflow: visible;
}

/* Input - fully transparent */
.claudian-inline-input {
  width: 100%;
  padding: 4px 8px;
  padding-inline-end: 30px;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--background-modifier-border) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--text-normal);
  font-family: var(--font-interface, -apple-system, BlinkMacSystemFont, sans-serif) !important;
  font-size: var(--font-ui-small, 13px) !important;
}

.claudian-inline-input:focus,
.claudian-inline-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.claudian-inline-input::placeholder {
  color: var(--text-faint);
}

.claudian-inline-input:disabled {
  opacity: 0.6;
}

/* Spinner - inside input box on end side */
.claudian-inline-spinner {
  position: absolute;
  inset-inline-end: 8px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid var(--background-modifier-border);
  border-top-color: var(--claudian-brand);
  border-radius: 50%;
  box-sizing: border-box;
  animation: claudian-spin 0.8s linear infinite;
}

/* Agent reply - shown when agent asks clarifying question */
.claudian-inline-agent-reply {
  padding: 8px;
  margin-bottom: 4px;
  background: transparent;
  border-width: 1px;
  border-style: solid;
  border-color: var(--background-modifier-border);
  border-radius: 8px;
  font-family: var(--font-interface, -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: var(--font-ui-small, 13px);
  line-height: 1.4;
  color: var(--text-muted);
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Inline Diff - replaces selection in place */
.claudian-inline-diff-replace {
  /* Inherit all font properties from document */
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  font-weight: inherit;
}

/* Deleted text - red strikethrough */
.claudian-diff-del {
  background: rgba(255, 80, 80, 0.2);
  text-decoration: line-through;
  color: var(--text-muted);
}

/* Inserted text - green background */
.claudian-diff-ins {
  background: rgba(80, 200, 80, 0.2);
}

/* Accept/Reject buttons inline with diff */
.claudian-inline-diff-buttons {
  display: inline-flex;
  gap: 8px;
  margin-inline-start: 6px;
  background: none !important;
}

.claudian-inline-diff-btn {
  padding: 4px 6px;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  outline: none !important;
  font-size: 16px;
  cursor: pointer;
}

.claudian-inline-diff-btn.reject {
  color: var(--color-red);
}

.claudian-inline-diff-btn.accept {
  color: var(--color-green);
}


/* ============================================
   features/diff.css
   ============================================ */
/* Write/Edit Diff Block - Subagent style */
.claudian-write-edit-block {
  margin: 4px 0;
  background: transparent;
  overflow: hidden;
}

.claudian-text-block+.claudian-write-edit-block {
  margin-top: 8px;
}

.claudian-write-edit-block+.claudian-text-block {
  margin-top: 8px;
}

.claudian-write-edit-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
  user-select: none;
  background: transparent;
  overflow: hidden;
}

.claudian-write-edit-icon {
  width: 16px;
  height: 16px;
  color: var(--text-accent);
  flex-shrink: 0;
}

.claudian-write-edit-icon svg {
  width: 16px;
  height: 16px;
}

/* Two-part header: name (fixed) + summary (flexible) */
.claudian-write-edit-name {
  font-family: var(--font-monospace);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-normal);
  white-space: nowrap;
  flex-shrink: 0;
}

.claudian-write-edit-summary {
  font-family: var(--font-monospace);
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.claudian-write-edit-stats {
  font-family: var(--font-monospace);
  font-size: 11px;
  flex-shrink: 0;
}

.claudian-write-edit-stats .added {
  color: var(--color-green);
}

.claudian-write-edit-stats .removed {
  color: var(--color-red);
  margin-left: 4px;
}

.claudian-write-edit-status {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Hide empty status on successful completion so stats align to right edge */
.claudian-write-edit-block.done .claudian-write-edit-status:empty {
  display: none;
}

.claudian-write-edit-status svg {
  width: 16px;
  height: 16px;
}

.claudian-write-edit-status.status-completed {
  color: var(--color-green);
}

.claudian-write-edit-status.status-error,
.claudian-write-edit-status.status-blocked {
  color: var(--color-red);
}

.claudian-write-edit-content {
  padding: 0;
  background: transparent;
  overflow: hidden;
}

.claudian-write-edit-diff-row {
  display: flex;
}

.claudian-write-edit-diff {
  flex: 1;
  font-family: var(--font-monospace);
  font-size: 12px;
  line-height: 1.5;
  background: transparent;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: auto;
}

.claudian-write-edit-loading,
.claudian-write-edit-binary,
.claudian-write-edit-error,
.claudian-write-edit-done-text {
  font-family: var(--font-monospace);
  font-size: 12px;
  color: var(--text-muted);
}

.claudian-write-edit-error {
  color: var(--color-red);
}

/* Diff line styling */
.claudian-diff-hunk {
  margin-bottom: 4px;
}

.claudian-diff-line {
  display: flex;
  white-space: pre-wrap;
  word-break: break-all;
}

.claudian-diff-prefix {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  color: var(--text-muted);
  user-select: none;
}

.claudian-diff-text {
  flex: 1;
  min-width: 0;
}

/* Diff colors - NO strikethrough for Write/Edit blocks */
.claudian-diff-equal {
  color: var(--text-muted);
}

.claudian-diff-delete {
  background: rgba(255, 80, 80, 0.25);
  color: var(--text-normal);
}

.claudian-diff-delete .claudian-diff-prefix {
  color: var(--color-red);
}

.claudian-diff-insert {
  background: rgba(80, 200, 80, 0.25);
  color: var(--text-normal);
}

.claudian-diff-insert .claudian-diff-prefix {
  color: var(--color-green);
}

/* Hunk separator */
.claudian-diff-separator {
  color: var(--text-muted);
  text-align: center;
  padding: 4px 0;
  font-style: italic;
  border-top: 1px dashed var(--background-modifier-border);
  border-bottom: 1px dashed var(--background-modifier-border);
  margin: 8px 0;
  font-size: 11px;
}

.claudian-diff-no-changes {
  color: var(--text-muted);
  font-style: italic;
  padding: 8px;
}


/* ============================================
   features/slash-commands.css
   ============================================ */
/* Slash Command Dropdown */
.claudian-slash-dropdown {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: 4px;
  background: var(--background-secondary);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  max-height: 300px;
  overflow-y: auto;
}

.claudian-slash-dropdown.visible {
  display: block;
}

/* Fixed positioning for inline editor */
.claudian-slash-dropdown-fixed {
  position: fixed;
  z-index: 10001;
}

.claudian-slash-item {
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.1s ease;
  border-bottom: 1px solid var(--background-modifier-border);
}

.claudian-slash-item:last-child {
  border-bottom: none;
}

.claudian-slash-item:hover,
.claudian-slash-item.selected {
  background: var(--background-modifier-hover);
}

.claudian-slash-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-normal);
  font-family: var(--font-monospace);
}

.claudian-slash-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 8px;
}

.claudian-slash-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.claudian-slash-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* Scrollbar */
.claudian-slash-dropdown::-webkit-scrollbar {
  width: 6px;
}

.claudian-slash-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.claudian-slash-dropdown::-webkit-scrollbar-thumb {
  background: var(--background-modifier-border);
  border-radius: 3px;
}


/* ============================================
   features/resume-session.css
   ============================================ */
/* Resume Session Dropdown */
.claudian-resume-dropdown {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: 4px;
  background: var(--background-secondary);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  max-height: 400px;
  overflow: hidden;
}

.claudian-resume-dropdown.visible {
  display: block;
}

.claudian-resume-header {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--background-modifier-border);
}

.claudian-resume-list {
  max-height: 350px;
  overflow-y: auto;
}

.claudian-resume-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.claudian-resume-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--background-modifier-border);
  transition: background 0.1s ease;
}

.claudian-resume-item:last-child {
  border-bottom: none;
}

.claudian-resume-item:hover,
.claudian-resume-item.selected {
  background: var(--background-modifier-hover);
}

.claudian-resume-item.current {
  background: var(--background-secondary);
  border-inline-start: 2px solid var(--interactive-accent);
  padding-inline-start: 10px;
}

.claudian-resume-item-icon {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  flex-shrink: 0;
}

.claudian-resume-item-icon svg {
  width: 16px;
  height: 16px;
}

.claudian-resume-item.current .claudian-resume-item-icon {
  color: var(--interactive-accent);
}

.claudian-resume-item-content {
  flex: 1;
  min-width: 0;
}

.claudian-resume-item-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-normal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.claudian-resume-item-date {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
}

/* Scrollbar */
.claudian-resume-list::-webkit-scrollbar {
  width: 6px;
}

.claudian-resume-list::-webkit-scrollbar-track {
  background: transparent;
}

.claudian-resume-list::-webkit-scrollbar-thumb {
  background: var(--background-modifier-border);
  border-radius: 3px;
}


/* ============================================
   features/ask-user-question.css
   ============================================ */
/* AskUserQuestion - inline widget rendered in chat panel */

.claudian-ask-question-inline {
  font-family: var(--font-monospace);
  font-size: 12px;
  outline: none;
}

.claudian-ask-inline-title {
  font-weight: 700;
  color: var(--text-muted);
  padding: 6px 10px 0;
}

/* ── Tab bar ─────────────────────────────────── */

.claudian-ask-tab-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-bottom: 1px solid var(--background-modifier-border);
  line-height: 1.4;
}

.claudian-ask-tab {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
  color: var(--text-muted);
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.claudian-ask-tab:hover {
  color: var(--text-normal);
}

.claudian-ask-tab.is-active {
  background: hsla(55, 30%, 50%, 0.18);
  color: var(--text-normal);
}

.claudian-ask-tab-label {
  font-weight: 600;
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.claudian-ask-tab-tick {
  color: var(--color-green);
  font-weight: 700;
}

.claudian-ask-tab-submit-check {
  color: var(--color-green);
  white-space: pre;
}

/* ── Content area ────────────────────────────── */

.claudian-ask-content {
  padding: 8px 10px;
}

.claudian-ask-question-text {
  font-weight: 700;
  color: var(--text-normal);
  margin-bottom: 8px;
  line-height: 1.4;
}

/* ── Item list ───────────────────────────────── */

.claudian-ask-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}

.claudian-ask-item {
  display: flex;
  align-items: flex-start;
  padding: 3px 4px;
  cursor: pointer;
  line-height: 1.4;
  color: var(--text-normal);
  border-radius: 3px;
}

.claudian-ask-item:hover {
  background: var(--background-modifier-hover);
}

.claudian-ask-cursor {
  display: inline-block;
  width: 2ch;
  flex-shrink: 0;
  color: var(--text-accent);
  font-weight: 700;
}

.claudian-ask-item-num {
  color: var(--text-muted);
  flex-shrink: 0;
}

.claudian-ask-item-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.claudian-ask-label-row {
  display: flex;
  align-items: baseline;
}

.claudian-ask-item-label {
  font-weight: 600;
}

.claudian-ask-item-desc {
  color: var(--text-muted);
  font-weight: 400;
  line-height: 1.4;
  margin-top: 1px;
}

/* Selected items: green text */
.claudian-ask-item.is-selected .claudian-ask-item-label {
  color: var(--color-green);
}

/* Disabled items: muted text */
.claudian-ask-item.is-disabled .claudian-ask-item-label {
  color: var(--text-faint);
}

/* ── Multi-select brackets ───────────────────── */

.claudian-ask-check {
  color: var(--text-faint);
  flex-shrink: 0;
  white-space: pre;
}

.claudian-ask-check.is-checked {
  color: var(--color-green);
}

/* ── Single-select check mark ────────────────── */

.claudian-ask-check-mark {
  color: var(--color-green);
  font-weight: 700;
}

/* ── Custom input ────────────────────────────── */

.claudian-ask-item input.claudian-ask-custom-text,
.claudian-ask-item input.claudian-ask-custom-text:hover,
.claudian-ask-item input.claudian-ask-custom-text:focus {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--font-monospace);
  font-size: inherit;
  color: var(--text-normal);
  outline: none;
  padding: 0;
  width: 0;
  height: auto;
  min-height: 0;
  line-height: 1.4;
  flex: 1 1 0;
  min-width: 0;
}

.claudian-ask-custom-text::placeholder {
  color: var(--text-faint);
}

/* ── Submit review tab ───────────────────────── */

.claudian-ask-review-title {
  font-weight: 700;
  color: var(--text-normal);
  margin-bottom: 6px;
}

.claudian-ask-review {
  font-family: var(--font-monospace);
  margin-bottom: 16px;
}

.claudian-tool-content .claudian-ask-review {
  font-size: 12px;
}

.claudian-ask-review:last-child {
  margin-bottom: 0;
}

.claudian-ask-review-pair {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}

.claudian-ask-review-pair:last-child {
  margin-bottom: 0;
}

.claudian-ask-review-num {
  color: var(--text-muted);
  flex-shrink: 0;
}

.claudian-ask-review-body {
  min-width: 0;
}

.claudian-ask-review-q-text {
  color: var(--text-muted);
}

.claudian-ask-review-a-text {
  color: var(--text-normal);
}

.claudian-ask-review-empty {
  color: var(--text-faint);
  font-style: italic;
}

.claudian-ask-review-prompt {
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* ── Hints ───────────────────────────────────── */

.claudian-ask-hints {
  color: var(--text-faint);
  padding-top: 6px;
  border-top: 1px solid var(--background-modifier-border);
}

/* ── Approval header (inline permission request) ── */

.claudian-ask-approval-info {
  padding: 8px 10px;
}

.claudian-ask-approval-tool {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--background-secondary);
  border-radius: 6px;
  margin-bottom: 8px;
}

.claudian-ask-approval-icon {
  color: var(--claudian-brand);
}

.claudian-ask-approval-tool-name {
  font-weight: 600;
  color: var(--text-normal);
}

.claudian-ask-approval-reason {
  color: var(--text-muted);
  font-size: 12px;
  margin-bottom: 6px;
}

.claudian-ask-approval-blocked-path {
  font-family: var(--font-monospace);
  font-size: 11px;
  color: var(--text-muted);
  padding: 3px 6px;
  background: var(--background-primary-alt);
  border-radius: 4px;
  margin-bottom: 6px;
  word-break: break-all;
}

.claudian-ask-approval-agent {
  color: var(--text-muted);
  font-size: 12px;
  margin-bottom: 6px;
}

.claudian-ask-approval-desc {
  padding: 8px 10px;
  background: var(--background-primary-alt);
  border-radius: 6px;
  font-family: var(--font-monospace);
  font-size: 12px;
  color: var(--text-normal);
  word-break: break-all;
}


/* ============================================
   features/plan-mode.css
   ============================================ */
/* Plan Mode - inline cards for EnterPlanMode / ExitPlanMode */

.claudian-plan-approval-inline {
  font-family: var(--font-monospace);
  font-size: 12px;
  outline: none;
}

.claudian-plan-inline-title {
  font-weight: 700;
  color: var(--text-muted);
  padding: 6px 10px 0;
}

/* ── Plan content preview ────────────────────────── */

.claudian-plan-content-preview {
  max-height: 300px;
  overflow-y: auto;
  margin: 6px 10px 8px;
  padding: 8px 10px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  background: var(--background-primary);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-normal);
}

.claudian-plan-content-preview::-webkit-scrollbar {
  width: 4px;
}

.claudian-plan-content-preview::-webkit-scrollbar-thumb {
  background: var(--background-modifier-border);
  border-radius: 2px;
}

.claudian-plan-content-preview p {
  margin: 0 0 6px;
}

.claudian-plan-content-preview p:last-child {
  margin-bottom: 0;
}

.claudian-plan-content-preview h1,
.claudian-plan-content-preview h2,
.claudian-plan-content-preview h3,
.claudian-plan-content-preview h4 {
  margin: 8px 0 4px;
  font-size: 13px;
}

.claudian-plan-content-preview ul,
.claudian-plan-content-preview ol {
  margin: 2px 0 6px;
  padding-left: 18px;
}

.claudian-plan-content-preview li {
  margin: 0;
}

.claudian-plan-content-preview code {
  font-size: 11px;
}

.claudian-plan-content-text {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-monospace);
}

/* ── Permissions list ──────────────────────────── */

.claudian-plan-permissions {
  padding: 4px 10px 8px;
}

.claudian-plan-permissions-label {
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 4px;
}

.claudian-plan-permissions-list {
  margin: 0;
  padding-left: 18px;
  color: var(--text-normal);
  line-height: 1.5;
}

.claudian-plan-permissions-list li {
  margin: 0;
}

/* ── Plan mode input border ──────────────────────── */

.claudian-input-wrapper.claudian-input-plan-mode {
  border-color: rgb(92, 148, 140) !important;
  box-shadow: 0 0 0 1px rgb(92, 148, 140);
}


/* ============================================
   modals/instruction.css
   ============================================ */
/* Instruction Mode */

/* Instruction Confirm Modal */
.claudian-instruction-modal {
  max-width: 500px;
}

.claudian-instruction-section {
  margin-bottom: 16px;
}

.claudian-instruction-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.claudian-instruction-original {
  padding: 10px 12px;
  background: var(--background-secondary);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  white-space: pre-wrap;
}

.claudian-instruction-refined {
  padding: 12px;
  background: var(--background-primary-alt);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  font-size: 14px;
  color: var(--text-normal);
  line-height: 1.5;
  white-space: pre-wrap;
}

.claudian-instruction-clarification {
  padding: 12px;
  background: var(--background-primary-alt);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  font-size: 14px;
  color: var(--text-normal);
  line-height: 1.5;
  white-space: pre-wrap;
}

.claudian-instruction-edit-container {
  margin-top: 6px;
}

.claudian-instruction-edit-textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  background: var(--background-primary);
  color: var(--text-normal);
  resize: vertical;
  min-height: 80px;
}

.claudian-instruction-edit-textarea:focus {
  outline: none;
  border-color: var(--interactive-accent);
}

.claudian-instruction-response-textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  background: var(--background-primary);
  color: var(--text-normal);
  resize: vertical;
  min-height: 60px;
}

.claudian-instruction-response-textarea:focus {
  outline: none;
  border-color: var(--interactive-accent);
}

.claudian-instruction-buttons {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}

.claudian-instruction-btn {
  padding: 8px 16px;
  font-size: 13px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}

.claudian-instruction-reject-btn {
  background: var(--background-modifier-border);
  color: var(--text-normal);
}

.claudian-instruction-reject-btn:hover {
  background: var(--background-modifier-border-hover);
}

.claudian-instruction-edit-btn {
  background: var(--background-modifier-border);
  color: var(--text-normal);
}

.claudian-instruction-edit-btn:hover {
  background: var(--background-modifier-border-hover);
}

.claudian-instruction-accept-btn {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
}

.claudian-instruction-accept-btn:hover {
  opacity: 0.9;
}

/* Instruction loading state */
.claudian-instruction-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  color: var(--text-muted);
}

.claudian-instruction-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--background-modifier-border);
  border-top-color: var(--interactive-accent);
  border-radius: 50%;
  animation: claudian-spin 0.8s linear infinite;
}

/* Instruction modal content sections */
.claudian-instruction-content-section {
  margin: 8px 0;
}

.claudian-instruction-clarification-section,
.claudian-instruction-confirmation-section {
  margin-top: 8px;
}


/* ============================================
   modals/mcp-modal.css
   ============================================ */
/* MCP Server Modal */
.claudian-mcp-modal .modal-content {
  width: 480px;
  max-width: 90vw;
}

.claudian-mcp-type-fields {
  margin: 12px 0;
  padding: 12px;
  background: var(--background-secondary);
  border-radius: 6px;
}

.claudian-mcp-type-fields .setting-item {
  padding: 8px 0;
  border-top: none;
}

.claudian-mcp-type-fields .setting-item:first-child {
  padding-top: 0;
}

.claudian-mcp-cmd-setting,
.claudian-mcp-env-setting {
  flex-direction: column;
  align-items: flex-start;
}

.claudian-mcp-cmd-setting .setting-item-control,
.claudian-mcp-env-setting .setting-item-control {
  width: 100%;
  margin-top: 8px;
}

.claudian-mcp-cmd-textarea,
.claudian-mcp-env-textarea {
  width: 100%;
  min-height: 50px;
  resize: vertical;
  font-family: var(--font-monospace);
  font-size: 12px;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid var(--background-modifier-border);
  background: var(--background-primary);
}

.claudian-mcp-cmd-textarea:focus,
.claudian-mcp-env-textarea:focus {
  border-color: var(--interactive-accent);
  outline: none;
}

.claudian-mcp-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

/* MCP Test Modal */
.claudian-mcp-test-modal {
  width: 500px;
  max-width: 90vw;
}

.claudian-mcp-test-modal .modal-content {
  padding: 0 20px 20px 20px;
}

.claudian-mcp-test-modal .modal-title {
  padding: 20px 20px 12px 20px;
  margin: 0 -20px;
}

.claudian-mcp-test-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px;
  color: var(--text-muted);
}

.claudian-mcp-test-spinner {
  width: 20px;
  height: 20px;
  animation: claudian-spin 1s linear infinite;
}

.claudian-mcp-test-spinner svg {
  width: 100%;
  height: 100%;
}

.claudian-mcp-test-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--background-secondary);
  border-radius: 6px;
  margin-bottom: 12px;
}

.claudian-mcp-test-icon {
  display: flex;
  align-items: center;
}

.claudian-mcp-test-icon svg {
  width: 20px;
  height: 20px;
}

.claudian-mcp-test-icon.success {
  color: var(--color-green);
}

.claudian-mcp-test-icon.error {
  color: var(--text-error);
}

.claudian-mcp-test-text {
  font-weight: 500;
}

.claudian-mcp-test-error {
  padding: 10px 12px;
  background: rgba(var(--color-red-rgb), 0.1);
  border: 1px solid var(--text-error);
  border-radius: 6px;
  color: var(--text-error);
  font-size: 12px;
  margin-bottom: 12px;
}

.claudian-mcp-test-tools {
  margin-bottom: 16px;
}

.claudian-mcp-test-tools-header {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 8px;
  color: var(--text-muted);
}

.claudian-mcp-test-tools-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.claudian-mcp-test-tool {
  padding: 10px 12px;
  background: var(--background-secondary);
  border-radius: 6px;
}

.claudian-mcp-test-tool-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.claudian-mcp-test-tool-icon {
  display: flex;
  align-items: center;
  color: var(--text-muted);
}

.claudian-mcp-test-tool-icon svg {
  width: 14px;
  height: 14px;
}

.claudian-mcp-test-tool-name {
  font-weight: 500;
  font-size: 13px;
}

.claudian-mcp-test-tool-toggle {
  margin-left: auto;
}

.claudian-mcp-test-tool-toggle .checkbox-container {
  display: flex;
  align-items: center;
}

.claudian-mcp-test-tool-disabled {
  opacity: 0.75;
}

.claudian-mcp-test-tool-disabled .claudian-mcp-test-tool-name {
  text-decoration: line-through;
  color: var(--text-muted);
}

.claudian-mcp-toggle-all-btn {
  margin-right: 8px;
}

.claudian-mcp-toggle-all-btn.is-destructive {
  background: rgba(var(--color-red-rgb), 0.1);
  border-color: rgba(var(--color-red-rgb), 0.3);
  color: var(--text-error);
}

.claudian-mcp-toggle-all-btn.is-destructive:hover {
  background: rgba(var(--color-red-rgb), 0.2);
}

.claudian-mcp-test-tool-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.claudian-mcp-test-no-tools {
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  background: var(--background-secondary);
  border-radius: 6px;
  margin-bottom: 16px;
}

.claudian-mcp-test-buttons {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}


/* ============================================
   modals/fork-target.css
   ============================================ */
/* Fork Target Modal */
.claudian-fork-target-modal {
  max-width: 340px;
}

.claudian-fork-target-list {
  display: flex;
  flex-direction: column;
}

.claudian-fork-target-option {
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-normal);
  font-size: 14px;
}

.claudian-fork-target-option:hover {
  background: var(--background-modifier-hover);
}


/* ============================================
   settings/base.css
   ============================================ */
/* ── Settings tab navigation ── */

.claudian-settings-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--background-modifier-border);
  margin-bottom: 16px;
}

.claudian-settings-tab {
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--font-ui-small);
  font-weight: var(--font-medium);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  margin-bottom: -1px;
}

.claudian-settings-tab:hover {
  color: var(--text-normal);
}

.claudian-settings-tab--active {
  color: var(--text-normal);
  border-bottom-color: var(--interactive-accent);
}

.claudian-settings-tab-content {
  display: none;
}

.claudian-settings-tab-content--active {
  display: block;
}

/* Codex placeholder */
.claudian-settings-codex-placeholder {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-ui-small);
}

/* Settings page - remove separator lines from setting items */
.claudian-settings .setting-item {
  border-top: none;
}

/* Settings section headings (via setHeading()) */
.claudian-settings .setting-item-heading {
  padding-top: 18px;
  margin-top: 12px;
  border-top: 1px solid var(--background-modifier-border);
}

.claudian-settings .setting-item-heading:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

.claudian-settings .setting-item-heading .setting-item-name {
  font-size: var(--font-ui-medium);
  font-weight: var(--font-semibold);
  color: var(--text-normal);
}

/* Custom section descriptions - align with items */
.claudian-sp-settings-desc,
.claudian-mcp-settings-desc,
.claudian-plugin-settings-desc,
.claudian-approved-desc {
  padding: 0 12px;
}

/* Unified icon action buttons for settings */
.claudian-settings-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.15s ease, color 0.15s ease;
}

.claudian-settings-action-btn:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}

.claudian-settings-action-btn svg {
  width: 14px;
  height: 14px;
}

.claudian-settings-delete-btn:hover {
  color: var(--text-error);
}

/* Hotkey grid - 3 columns */
.claudian-hotkey-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 12px;
  padding: 4px 0;
}

.claudian-hotkey-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 6px;
}

.claudian-hotkey-item:hover {
  background: var(--background-modifier-hover);
}

.claudian-hotkey-name {
  flex: 1;
  color: var(--text-normal);
  font-size: var(--font-ui-small);
}

.claudian-hotkey-badge {
  color: var(--text-muted);
  font-size: var(--font-ui-smaller);
  background: var(--background-modifier-hover);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-monospace);
}

/* Media folder input width */
.claudian-settings-media-input {
  width: 200px;
}

/* ── Shared settings panel layout (used by slash-settings + agent-settings) ── */

.claudian-sp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 0 12px;
}

.claudian-sp-label {
  font-size: var(--font-ui-small);
  color: var(--text-muted);
  font-weight: var(--font-medium);
}

.claudian-sp-header-actions {
  display: flex;
  gap: 4px;
}

.claudian-sp-empty-state {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  background: var(--background-secondary);
  border-radius: 6px;
  margin-top: 8px;
}

.claudian-sp-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.claudian-sp-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px;
  background: var(--background-secondary);
  border-radius: 6px;
}

.claudian-sp-item:hover {
  background: var(--background-modifier-hover);
}

.claudian-sp-info {
  flex: 1;
  min-width: 0;
}

.claudian-sp-item-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.claudian-sp-item-name {
  font-weight: 600;
  font-family: var(--font-monospace);
  color: var(--text-normal);
}

.claudian-sp-item-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

.claudian-sp-item-actions {
  display: flex;
  gap: 4px;
  margin-left: 16px;
  flex-shrink: 0;
}

.claudian-sp-advanced-section {
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  padding: 0 12px;
  margin: 8px 0;
}

.claudian-sp-advanced-summary {
  cursor: pointer;
  padding: 8px 0;
  font-size: var(--font-ui-small);
  color: var(--text-muted);
  font-weight: var(--font-medium);
}

.claudian-sp-advanced-section[open] .claudian-sp-advanced-summary {
  margin-bottom: 4px;
}

.claudian-sp-modal .modal-content {
  max-width: 600px;
  width: auto;
}

.claudian-sp-content-area {
  width: 100%;
  font-family: var(--font-monospace);
  font-size: 13px;
  padding: 8px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  background: var(--background-primary);
  color: var(--text-normal);
  resize: vertical;
  margin-top: 8px;
}

.claudian-sp-content-area:focus {
  outline: none;
  border-color: var(--interactive-accent);
}

.claudian-sp-modal-buttons {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  justify-content: flex-end;
}


/* ============================================
   settings/env-snippets.css
   ============================================ */
/* Context Limits Styles */
.claudian-context-limits-container {
  margin-top: 16px;
}

.claudian-context-limits-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  margin-top: 16px;
  padding: 0 12px;
}

.claudian-context-limits-label {
  font-size: var(--font-ui-small);
  color: var(--text-muted);
  font-weight: var(--font-medium);
}

.claudian-context-limits-desc {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  padding: 0 12px;
  margin-bottom: 8px;
}

.claudian-context-limits-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.claudian-context-limits-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: var(--background-secondary);
  border-radius: 6px;
  transition: background-color 0.2s;
}

.claudian-context-limits-item:hover {
  background: var(--background-modifier-hover);
}

.claudian-context-limits-model {
  font-family: var(--font-monospace);
  font-size: var(--font-ui-small);
  color: var(--text-normal);
  flex: 1;
  min-width: 0;
  word-break: break-all;
}

.claudian-context-limits-input-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: 16px;
  flex-shrink: 0;
}

.claudian-context-limits-input {
  width: 80px;
  padding: 4px 8px;
  font-size: var(--font-ui-small);
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  background: var(--background-primary);
  color: var(--text-normal);
}

.claudian-context-limits-input:focus {
  border-color: var(--interactive-accent);
  outline: none;
}

.claudian-context-limits-input.claudian-input-error {
  border-color: var(--text-error);
}

.claudian-context-limit-validation {
  display: none;
  font-size: var(--font-ui-smaller);
  color: var(--text-error);
  margin-top: 4px;
}

/* Environment Snippets Styles */
.claudian-env-snippets-container {
  margin-top: 16px;
}

.claudian-snippet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  margin-top: 16px;
  padding: 0 12px;
}

.claudian-snippet-label {
  font-size: var(--font-ui-small);
  color: var(--text-muted);
  font-weight: var(--font-medium);
}

.claudian-save-env-btn {
  padding: 6px 16px;
  font-size: 13px;
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.claudian-save-env-btn:hover {
  opacity: 0.9;
}

.claudian-snippet-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  background: var(--background-secondary);
  border-radius: 6px;
  margin-top: 8px;
}

.claudian-snippet-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.claudian-snippet-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: var(--background-secondary);
  border-radius: 6px;
  transition: background-color 0.2s;
}

.claudian-snippet-item:hover {
  background: var(--background-modifier-hover);
}

.claudian-snippet-info {
  flex: 1;
  min-width: 0;
}

.claudian-snippet-name {
  font-weight: 600;
  margin-bottom: 4px;
  word-break: break-word;
}

.claudian-snippet-description {
  font-size: 13px;
  color: var(--text-muted);
}

.claudian-snippet-actions {
  display: flex;
  gap: 4px;
  margin-left: 16px;
  flex-shrink: 0;
}

.claudian-restore-snippet-btn {
  padding: 4px 12px;
  font-size: 12px;
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.claudian-restore-snippet-btn:hover {
  opacity: 0.9;
}

.claudian-edit-snippet-btn {
  padding: 4px 12px;
  font-size: 12px;
  background: var(--background-modifier-border);
  color: var(--text-normal);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.claudian-edit-snippet-btn:hover {
  background: var(--background-modifier-border-hover);
}

.claudian-delete-snippet-btn {
  padding: 4px 12px;
  font-size: 12px;
  background: var(--background-modifier-error);
  color: var(--text-on-accent);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.claudian-delete-snippet-btn:hover {
  opacity: 0.9;
}

/* Env Snippet Modal */
.claudian-env-snippet-modal .modal-content {
  max-width: 550px;
  width: 550px;
  padding: 16px;
}

.claudian-env-snippet-modal h2 {
  margin: 0 0 16px 0;
}

.claudian-env-snippet-modal .setting-item {
  padding: 8px 0;
  margin: 0;
}

.claudian-env-snippet-modal .setting-item-info {
  margin-bottom: 4px;
}

/* Full-width env vars textarea setting */
.claudian-env-snippet-setting {
  flex-direction: column;
  align-items: flex-start;
}

.claudian-env-snippet-setting .setting-item-info {
  width: 100%;
  margin-bottom: 8px;
}

.claudian-env-snippet-control {
  width: 100%;
}

.claudian-env-snippet-control textarea {
  width: 100%;
  min-width: 100%;
  font-family: var(--font-monospace);
  font-size: 12px;
  resize: vertical;
}

.claudian-snippet-preview {
  margin: 8px 0;
  padding: 6px;
  background: var(--background-secondary);
  border-radius: 6px;
}

.claudian-env-preview {
  background: var(--background-primary);
  padding: 6px;
  border-radius: 4px;
  font-family: var(--font-monospace);
  font-size: 11px;
  line-height: 1.3;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--text-muted);
  max-height: 120px;
  overflow-y: auto;
  margin: 0;
}

.claudian-snippet-buttons {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  justify-content: flex-end;
}

.claudian-cancel-btn,
.claudian-save-btn {
  padding: 6px 16px;
  font-size: 13px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.claudian-cancel-btn {
  background: var(--background-modifier-border);
  color: var(--text-normal);
}

.claudian-cancel-btn:hover {
  background: var(--background-modifier-border-hover);
}

.claudian-save-btn {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
}

.claudian-save-btn:hover {
  opacity: 0.9;
}

/* Context limits section in snippet modal */
.claudian-snippet-context-limits {
  margin-top: 1em;
}

.claudian-snippet-context-limits .setting-item-description {
  margin-bottom: 0.5em;
}

.claudian-snippet-limit-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.25em;
}

.claudian-snippet-limit-model {
  font-family: var(--font-monospace);
  font-size: var(--font-ui-small);
}

.claudian-snippet-limit-spacer {
  flex: 1;
}

.claudian-snippet-limit-input {
  width: 80px;
}


/* ============================================
   settings/slash-settings.css
   ============================================ */
/* Slash Command Settings — unique rules only (shared layout in base.css .claudian-sp-*) */

.claudian-slash-item-hint {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

.claudian-slash-item-badge {
  font-size: 10px;
  padding: 2px 6px;
  background: var(--background-modifier-border);
  border-radius: 4px;
  color: var(--text-muted);
  text-transform: uppercase;
}


/* ============================================
   settings/mcp-settings.css
   ============================================ */
/* MCP Server Settings */
.claudian-mcp-settings-desc {
  margin-bottom: 12px;
}

.claudian-mcp-container {
  margin-top: 8px;
}

.claudian-mcp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 0 12px;
}

.claudian-mcp-label {
  font-size: var(--font-ui-small);
  color: var(--text-muted);
  font-weight: var(--font-medium);
}

.claudian-mcp-add-container {
  position: relative;
}

.claudian-add-mcp-btn {
  padding: 4px 12px;
  border-radius: 4px;
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  font-size: 12px;
  cursor: pointer;
  border: none;
}

.claudian-add-mcp-btn:hover {
  background: var(--interactive-accent-hover);
}

.claudian-mcp-add-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 180px;
  background-color: var(--modal-background, var(--background-primary));
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 100;
  overflow: hidden;
}

.claudian-mcp-add-dropdown.is-visible {
  display: block;
}

.claudian-mcp-add-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-normal);
}

.claudian-mcp-add-option:hover {
  background: var(--background-modifier-hover);
}

.claudian-mcp-add-option-icon {
  display: flex;
  align-items: center;
  color: var(--text-muted);
}

.claudian-mcp-add-option-icon svg {
  width: 16px;
  height: 16px;
}

.claudian-mcp-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  background: var(--background-secondary);
  border-radius: 6px;
}

.claudian-mcp-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.claudian-mcp-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--background-secondary);
  border-radius: 6px;
  transition: background 0.15s ease;
}

.claudian-mcp-item:hover {
  background: var(--background-modifier-hover);
}

.claudian-mcp-item-disabled {
  opacity: 0.6;
}

.claudian-mcp-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}

.claudian-mcp-status-enabled {
  background: var(--color-green);
}

.claudian-mcp-status-disabled {
  background: var(--text-muted);
}

.claudian-mcp-info {
  flex: 1;
  min-width: 0;
}

.claudian-mcp-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.claudian-mcp-name {
  font-weight: 600;
}

.claudian-mcp-type-badge {
  font-size: 10px;
  padding: 2px 6px;
  background: var(--background-modifier-border);
  border-radius: 4px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.claudian-mcp-context-saving-badge {
  font-size: 11px;
  padding: 2px 6px;
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border-radius: 4px;
  font-weight: 600;
}

.claudian-mcp-preview {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.claudian-mcp-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.claudian-mcp-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.15s ease, color 0.15s ease;
}

.claudian-mcp-action-btn:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}

.claudian-mcp-action-btn svg {
  width: 14px;
  height: 14px;
}

.claudian-mcp-delete-btn:hover {
  color: var(--text-error);
}


/* ============================================
   settings/plugin-settings.css
   ============================================ */
/* Plugin Settings */
.claudian-plugin-settings-desc {
  margin-bottom: 12px;
}

.claudian-plugins-container {
  margin-top: 8px;
}

.claudian-plugin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 0 12px;
}

.claudian-plugin-label {
  font-size: var(--font-ui-small);
  color: var(--text-muted);
  font-weight: var(--font-medium);
}

.claudian-plugin-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  background: var(--background-secondary);
  border-radius: 6px;
}

.claudian-plugin-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.claudian-plugin-section-header {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 8px 12px 4px;
  font-weight: 600;
}

.claudian-plugin-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--background-secondary);
  border-radius: 6px;
  transition: background 0.15s ease;
}

.claudian-plugin-item:hover {
  background: var(--background-modifier-hover);
}

.claudian-plugin-item-disabled {
  opacity: 0.6;
}

.claudian-plugin-item-error {
  opacity: 0.8;
}

.claudian-plugin-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}

.claudian-plugin-status-enabled {
  background: var(--color-green);
}

.claudian-plugin-status-disabled {
  background: var(--text-muted);
}

.claudian-plugin-status-error {
  background: var(--text-error);
}

.claudian-plugin-info {
  flex: 1;
  min-width: 0;
}

.claudian-plugin-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.claudian-plugin-name {
  font-weight: 600;
}

.claudian-plugin-version-badge {
  font-size: 10px;
  padding: 2px 6px;
  background: var(--background-modifier-border);
  border-radius: 4px;
  color: var(--text-muted);
}

.claudian-plugin-error-badge {
  font-size: 10px;
  padding: 2px 6px;
  background: var(--text-error);
  color: var(--text-on-accent);
  border-radius: 4px;
  text-transform: uppercase;
}

.claudian-plugin-preview {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.claudian-plugin-preview-error {
  color: var(--text-error);
}

.claudian-plugin-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.claudian-plugin-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.15s ease, color 0.15s ease;
}

.claudian-plugin-action-btn:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}

.claudian-plugin-action-btn svg {
  width: 14px;
  height: 14px;
}


/* ============================================
   settings/agent-settings.css
   ============================================ */
/* Agent Settings — all structural rules live in base.css .claudian-sp-* */
/* This file is kept as a placeholder for future agent-specific overrides. */


/* ============================================
   settings/opencode-model-picker.css
   ============================================ */
/* OpenCode model picker */

.claudian-opencode-model-picker {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.claudian-opencode-model-picker-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: var(--font-ui-small);
  color: var(--text-muted);
}

.claudian-opencode-model-picker-summary-value {
  color: var(--text-normal);
  font-weight: var(--font-medium);
}

.claudian-opencode-model-picker-selected {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--background-secondary);
  border-radius: 6px;
}

.claudian-opencode-model-picker-selected-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.claudian-opencode-model-picker-selected-label {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.claudian-opencode-model-picker-selected-clear {
  padding: 2px 8px;
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  cursor: pointer;
}

.claudian-opencode-model-picker-selected-clear:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}

.claudian-opencode-model-picker-selected-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.claudian-opencode-model-picker-selected-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: var(--background-primary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
}

.claudian-opencode-model-picker-selected-row--unavailable {
  border-style: dashed;
}

.claudian-opencode-model-picker-selected-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.claudian-opencode-model-picker-selected-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.claudian-opencode-model-picker-selected-badge {
  font-size: var(--font-ui-smaller);
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--background-modifier-hover);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.claudian-opencode-model-picker-selected-name {
  color: var(--text-normal);
  font-weight: var(--font-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.claudian-opencode-model-picker-selected-id {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  font-family: var(--font-monospace);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.claudian-opencode-model-picker-selected-unavailable {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  font-style: italic;
}

.claudian-opencode-model-picker-selected-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.claudian-opencode-model-picker-selected-alias {
  width: 180px;
  padding: 4px 8px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 4px;
  background: var(--background-primary);
  color: var(--text-normal);
  font-size: var(--font-ui-small);
}

.claudian-opencode-model-picker-selected-alias:focus {
  outline: none;
  border-color: var(--interactive-accent);
}

.claudian-opencode-model-picker-selected-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  font-size: 16px;
}

.claudian-opencode-model-picker-selected-remove:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}

.claudian-opencode-model-picker-catalog {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--background-secondary);
  border-radius: 6px;
}

.claudian-opencode-model-picker-catalog-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.claudian-opencode-model-picker-catalog-summary::-webkit-details-marker {
  display: none;
}

.claudian-opencode-model-picker-catalog-caret {
  font-size: 16px;
  color: var(--text-muted);
  transition: transform 0.12s ease;
  display: inline-flex;
  width: 18px;
  justify-content: center;
  line-height: 1;
}

.claudian-opencode-model-picker-catalog[open] .claudian-opencode-model-picker-catalog-caret {
  transform: rotate(90deg);
}

.claudian-opencode-model-picker-catalog-title {
  color: var(--text-normal);
  font-weight: var(--font-medium);
  font-size: var(--font-ui-small);
}

.claudian-opencode-model-picker-catalog-count {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  margin-left: auto;
}

.claudian-opencode-model-picker-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.claudian-opencode-model-picker-search {
  flex: 1 1 220px;
  min-width: 180px;
  padding: 6px 10px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  background: var(--background-primary);
  color: var(--text-normal);
  font-size: var(--font-ui-small);
}

.claudian-opencode-model-picker-search:focus {
  outline: none;
  border-color: var(--interactive-accent);
}

.claudian-opencode-model-picker-provider {
  padding: 6px 10px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  background: var(--background-primary);
  color: var(--text-normal);
  font-size: var(--font-ui-small);
}

.claudian-opencode-model-picker-list {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  background: var(--background-primary);
  max-height: 360px;
  overflow-y: auto;
}

.claudian-opencode-model-picker-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--background-modifier-border);
  cursor: pointer;
}

.claudian-opencode-model-picker-row:last-child {
  border-bottom: none;
}

.claudian-opencode-model-picker-row:hover {
  background: var(--background-modifier-hover);
}

.claudian-opencode-model-picker-row--selected {
  background: var(--background-modifier-hover);
}

.claudian-opencode-model-picker-row input[type="checkbox"] {
  margin-top: 3px;
}

.claudian-opencode-model-picker-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.claudian-opencode-model-picker-row-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.claudian-opencode-model-picker-row-name {
  color: var(--text-normal);
  font-weight: var(--font-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.claudian-opencode-model-picker-row-badge {
  font-size: var(--font-ui-smaller);
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--background-modifier-hover);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.claudian-opencode-model-picker-row-badge--unavailable {
  background: var(--background-modifier-error);
  color: var(--text-on-accent);
}

.claudian-opencode-model-picker-row-meta {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
  font-family: var(--font-monospace);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.claudian-opencode-model-picker-row-desc {
  font-size: var(--font-ui-smaller);
  color: var(--text-muted);
}

.claudian-opencode-model-picker-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-ui-small);
}


/* ============================================
   accessibility.css
   ============================================ */
/* Accessibility - Focus Visible Styles */

/* outline + offset + border-radius */
.claudian-tool-header:focus-visible,
.claudian-thinking-header:focus-visible,
.claudian-subagent-header:focus-visible,
.claudian-header-btn:focus-visible,
.claudian-model-btn:focus-visible,
.claudian-thinking-current:focus-visible {
  outline: 2px solid var(--interactive-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* outline + offset only */
.claudian-action-btn:focus-visible,
.claudian-toggle-switch:focus-visible,
.claudian-file-chip:focus-visible,
.claudian-image-chip:focus-visible,
.claudian-file-chip-remove:focus-visible,
.claudian-image-remove:focus-visible,
.claudian-image-modal-close:focus-visible,
.claudian-approved-remove-btn:focus-visible,
.claudian-save-env-btn:focus-visible,
.claudian-restore-snippet-btn:focus-visible,
.claudian-edit-snippet-btn:focus-visible,
.claudian-delete-snippet-btn:focus-visible,
.claudian-cancel-btn:focus-visible,
.claudian-save-btn:focus-visible,
.claudian-code-lang-label:focus-visible {
  outline: 2px solid var(--interactive-accent);
  outline-offset: 2px;
}

/* outline + negative offset + border-radius */
.claudian-history-item-content:focus-visible {
  outline: 2px solid var(--interactive-accent);
  outline-offset: -2px;
  border-radius: 4px;
}