my-vault/.obsidian/plugins/claudian/styles.css

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


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


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

  50% {
    opacity: 1;
  }
}

/* Spinner rotation */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Context path icon glow */
@keyframes context-path-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 2px rgba(217, 119, 87, 0.4));
  }

  50% {
    filter: drop-shadow(0 0 6px rgba(217, 119, 87, 0.8));
  }
}

/* MCP selector icon glow */
@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));
  }
}

/* Inline edit spinner */
@keyframes claudian-inline-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Instruction modal spinner */
@keyframes claudian-instruction-spin {
  to {
    transform: rotate(360deg);
  }
}

/* MCP test spinner */
@keyframes claudian-mcp-spin {
  to {
    transform: rotate(360deg);
  }
}



/* ============================================
   components/header.css
   ============================================ */
/* Header */
.claudian-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 12px 12px;
}

.claudian-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

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

.claudian-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

/* Header actions (right side) */
.claudian-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Header icon buttons (history, new, etc.) */
.claudian-header-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.15s ease, color 0.15s ease;
}

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

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


/* ============================================
   components/history.css
   ============================================ */
/* History dropdown container */
.claudian-history-container {
  position: relative;
}

/* History dropdown menu */
.claudian-history-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 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;
  width: 280px;
}

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

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

/* History item */
.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-left: 2px solid var(--interactive-accent);
  padding-left: 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-left: 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);
}

/* Rename input */
.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 area */
.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;
}

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

.claudian-message-user {
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-on-accent);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

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

.claudian-message-user ::-moz-selection {
  background: rgba(255, 255, 255, 0.35);
  color: inherit;
}

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

/* Message content */
.claudian-message-content {
  line-height: 1.5;
  user-select: text;
  -webkit-user-select: text;
}

/* Interrupted message */
.claudian-interrupted {
  color: #d45d5d;
}

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

/* Text blocks within message content */
.claudian-text-block {
  margin: 0;
}

.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-left: 20px;
}

/* Scrollbar styling */
.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);
}


/* ============================================
   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: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  padding: 8px 12px;
  border-radius: 6px;
  overflow-x: auto;
  margin: 0;
}

/* 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;
  right: 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;
  right: 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
   ============================================ */
/* Thinking indicator */
.claudian-thinking {
  color: #D97757;
  font-style: italic;
  padding: 4px 0;
  text-align: left;
  animation: thinking-pulse 1.5s ease-in-out infinite;
}

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

/* Thinking block (extended thinking) */
.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;
}

/* Thinking block header - transparent */
.claudian-thinking-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
}

.claudian-thinking-label {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: #D97757;
}

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

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

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

/* Thinking content code blocks - inherits from wrapper, adjust spacing */
.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
   ============================================ */
/* Tool call container - transparent, no border */
.claudian-tool-call {
  margin: 8px 0;
}

/* Tool call header - transparent */
.claudian-tool-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
}

.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-label {
  flex: 1;
  font-family: var(--font-monospace);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-normal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

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

/* Spinner animation */
.claudian-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--background-modifier-border);
  border-top-color: var(--text-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Tool call content - tree-branch style */
.claudian-tool-content {
  padding: 4px 0 4px 24px;
}

/* Tree-branch result row */
.claudian-tool-result-row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.claudian-tool-branch {
  font-family: monospace;
  color: var(--text-faint);
  flex-shrink: 0;
  line-height: 1.4;
}

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

/* Result items - regular text lines */
.claudian-tool-result-item {
  display: block;
  margin-bottom: 2px;
}

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

/* Bulleted items (WebSearch) - hanging indent for wrapped lines */
.claudian-tool-result-bullet {
  display: block;
  padding-left: 0.8em;
  text-indent: -0.8em;
  margin-bottom: 2px;
}

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


/* ============================================
   components/todo-panel.css
   ============================================ */
/* Todo Panel - persistent bottom panel for todos */

/* Main container - no border/background, flows seamlessly */
.claudian-todo-panel {
  padding: 0;
}

/* Todos container */
.claudian-todo-panel-todos {
  margin-top: 4px;
}

/* Header (collapsed view) - subtle hover only */
.claudian-todo-panel-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s ease;
}

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

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

/* List icon */
.claudian-todo-panel-icon {
  display: flex;
  align-items: center;
  color: var(--interactive-accent);
  flex-shrink: 0;
}

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

/* Label */
.claudian-todo-panel-label {
  font-family: var(--font-monospace);
  font-size: 13px;
  font-weight: 500;
  color: var(--interactive-accent);
}

/* Current task preview (collapsed state) */
.claudian-todo-panel-current {
  font-family: var(--font-monospace);
  font-size: 13px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

/* Content (expanded list) */
.claudian-todo-panel-content {
  padding: 4px 0 4px 18px;
}

/* Individual todo item - reuses existing styles */
.claudian-todo-panel-content .claudian-todo-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
}

.claudian-todo-panel-content .claudian-todo-item:first-child {
  padding-top: 0;
}

.claudian-todo-panel-content .claudian-todo-item:last-child {
  padding-bottom: 0;
}

.claudian-todo-panel-content .claudian-todo-status-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

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

.claudian-todo-panel-content .claudian-todo-text {
  font-family: var(--font-monospace);
  font-size: 13px;
  line-height: 1.4;
  flex: 1;
}

/* Status-specific styling */
.claudian-todo-panel-content .claudian-todo-pending .claudian-todo-status-icon {
  color: var(--text-muted);
}

.claudian-todo-panel-content .claudian-todo-pending .claudian-todo-text {
  color: var(--text-muted);
}

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

.claudian-todo-panel-content .claudian-todo-in_progress .claudian-todo-text {
  color: var(--text-normal);
  font-weight: 500;
}

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

.claudian-todo-panel-content .claudian-todo-completed .claudian-todo-text {
  color: var(--text-muted);
}


/* ============================================
   components/subagent.css
   ============================================ */
/* Subagent List (Task tool) - follows TodoList pattern */
.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;
}

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

.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-size: 13px;
  font-weight: 500;
  color: var(--text-normal);
}

.claudian-subagent-count {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}

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

/* Subagent content */
.claudian-subagent-content {
  padding: 4px 0 4px 24px;
}

/* Tree branch indicator */
.claudian-subagent-branch {
  font-family: monospace;
  color: var(--text-faint);
  flex-shrink: 0;
  line-height: 1.4;
}

/* Individual tool item container */
.claudian-subagent-tool-item {
  display: flex;
  flex-direction: column;
  padding: 2px 0;
}

/* Tool row (branch + label) */
.claudian-subagent-tool-row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.claudian-subagent-tool-text {
  font-size: 13px;
  line-height: 1.4;
  flex: 1;
  color: var(--text-normal);
}

/* Tool result area nested under tool (max 2 lines) */
.claudian-subagent-tool-result {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 2px 0 0 20px;
}

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

/* DONE indicator */
.claudian-subagent-done {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 2px 0;
}

.claudian-subagent-done-text {
  font-size: 12px;
  color: var(--text-faint);
  font-weight: 500;
}

/* Async Subagent (Task tool with run_in_background=true) */

/* Status text display (e.g., "pending", "running agent_123", etc.) */
.claudian-subagent-status-text {
  font-size: 11px;
  font-family: var(--font-monospace);
  color: var(--text-muted);
  margin-left: auto;
  padding-left: 8px;
}

/* Async-specific status styling */
.claudian-subagent-list.async.pending .claudian-subagent-icon {
  color: var(--text-muted);
}

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

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

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

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

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

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

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

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

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

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

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


/* ============================================
   components/ask-user-question.css
   ============================================ */
/**
 * AskUserQuestion styles - minimal design.
 */

/* ============================================
 * Question Panel (replaces input area)
 * ============================================ */

.claudian-ask-panel {
  padding: 12px 0;
  outline: none;
}

.claudian-ask-panel:focus {
  outline: none;
}

/* Tab navigation row */
.claudian-ask-panel-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 13px;
}

.claudian-ask-panel-nav {
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

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

.claudian-ask-panel-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font-monospace);
  /* Completely reset button appearance */
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;
  text-shadow: none !important;
}

.claudian-ask-panel-tab:hover {
  color: var(--text-normal);
  background: none !important;
  box-shadow: none !important;
  border: none !important;
}

.claudian-ask-panel-tab:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.claudian-ask-panel-tab.active {
  color: var(--interactive-accent);
  background: none !important;
  border: none !important;
}

.claudian-ask-panel-tab-check {
  font-family: monospace;
}

/* Green dot for answered tabs */
.claudian-ask-panel-tab.answered .claudian-ask-panel-tab-check {
  color: var(--color-green);
}


/* Question content */
.claudian-ask-panel-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.claudian-ask-panel-question {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-normal);
  margin-bottom: 8px;
}

/* Options list */
.claudian-ask-panel-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-monospace);
  font-size: 13px;
}

.claudian-ask-panel-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
  color: var(--text-normal);
}

.claudian-ask-panel-option:hover {
  color: var(--interactive-accent);
}

.claudian-ask-panel-option.focused {
  color: var(--interactive-accent);
}

.claudian-ask-panel-option.selected {
  color: var(--interactive-accent);
}

/* Caret indicator (> or space) */
.claudian-ask-panel-caret {
  width: 12px;
  flex-shrink: 0;
  color: var(--interactive-accent);
  font-weight: bold;
}

/* Number/checkbox indicator */
.claudian-ask-panel-indicator {
  flex-shrink: 0;
  color: var(--text-muted);
  white-space: nowrap;
}

.claudian-ask-panel-option.focused .claudian-ask-panel-caret {
  color: var(--interactive-accent);
}

.claudian-ask-panel-option.focused .claudian-ask-panel-indicator {
  color: var(--interactive-accent);
}

/* Green checkmark for selected items */
.claudian-ask-panel-option.selected .claudian-ask-panel-indicator {
  color: var(--color-green);
}

.claudian-ask-panel-option-text {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.claudian-ask-panel-label-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.claudian-ask-panel-option-label {
  font-weight: 500;
}

/* Checkmark after label for single-select */
.claudian-ask-panel-checkmark {
  color: var(--color-green);
  font-weight: bold;
}

.claudian-ask-panel-option-desc {
  color: var(--text-muted);
  font-weight: normal;
}

/* Other option */
.claudian-ask-panel-other {
  flex-wrap: wrap;
}

.claudian-ask-panel-other-input {
  flex: 1;
  min-width: 150px;
  padding: 2px 4px;
  border: none;
  border-bottom: 1px solid var(--background-modifier-border);
  background: transparent;
  color: var(--text-normal);
  font-family: var(--font-monospace);
  font-size: 13px;
}

.claudian-ask-panel-other-input:focus {
  outline: none;
  border-bottom-color: var(--interactive-accent);
}

.claudian-ask-panel-other-input::placeholder {
  color: var(--text-faint);
}

/* Keyboard hint */
.claudian-ask-panel-hint {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Submit review panel */
.claudian-ask-panel-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  font-family: var(--font-monospace);
  font-size: 13px;
}

.claudian-ask-panel-summary-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.claudian-ask-panel-summary-question {
  color: var(--text-normal);
}

.claudian-ask-panel-summary-answer {
  color: var(--color-green);
  padding-left: 8px;
}

.claudian-ask-panel-summary-answer.unanswered {
  color: var(--text-muted);
  font-style: italic;
}

.claudian-ask-panel-submit-prompt {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* ============================================
 * Tool Call Result Block - matches toolcalls.css style
 * ============================================ */

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

.claudian-ask-question-block.claudian-ask-question-pending {
  display: none;
}

/* Header - transparent like other tool calls */
.claudian-ask-question-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
}

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

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

.claudian-ask-question-label {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-normal);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.claudian-ask-question-count {
  font-size: 12px;
  color: var(--text-muted);
}

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

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

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

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

/* Content - indented to align under label */
.claudian-ask-question-content {
  padding: 4px 0 4px 24px;
}

/* Q&A pairs */
.claudian-ask-question-qa {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 0;
}

.claudian-ask-question-qa + .claudian-ask-question-qa {
  border-top: 1px solid var(--background-modifier-border);
  padding-top: 10px;
}

.claudian-ask-question-q-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.claudian-ask-question-answer {
  font-size: 13px;
  color: var(--text-normal);
  padding-left: 8px;
  border-left: 2px solid var(--interactive-accent);
}

.claudian-ask-question-error {
  font-size: 12px;
  color: var(--color-red);
  font-style: italic;
}

/* Q&A list - tree symbol + aligned container */
.claudian-ask-question-list {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
}

.claudian-ask-question-tree {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.claudian-ask-question-aligned {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.claudian-ask-question-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.claudian-ask-question-q {
  font-size: 13px;
  color: var(--text-muted);
  /* Hanging indent: wrapped lines align with text after "Q: " */
  padding-left: 1.5em;
  text-indent: -1.5em;
}

.claudian-ask-question-a {
  font-size: 13px;
  color: var(--color-green);
  /* Hanging indent: wrapped lines align with text after "A: " */
  padding-left: 1.5em;
  text-indent: -1.5em;
}


/* ============================================
   components/plan-approval.css
   ============================================ */
/**
 * PlanApproval panel styles.
 * Panel shows approval options (plan content is displayed in chat).
 */

/* ============================================
 * Plan Approval Panel (replaces input area)
 * ============================================ */

.claudian-plan-approval-panel {
  /* Match input wrapper padding structure */
  padding: 10px;  /* Same as .claudian-input */
  min-height: 60px;  /* Same as .claudian-input min-height */
  outline: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.claudian-plan-approval-panel:focus {
  outline: none;
}

/* Header: "Would you like to proceed?" */
.claudian-plan-approval-header {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* Options list - tighter spacing */
.claudian-plan-approval-options {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-family: var(--font-monospace);
  font-size: 13px;
}

.claudian-plan-approval-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  cursor: pointer;
  color: var(--text-normal);
  line-height: 1.4;
}

.claudian-plan-approval-option:hover {
  color: var(--interactive-accent);
}

.claudian-plan-approval-option.focused {
  color: var(--interactive-accent);
}

/* Caret - narrower */
.claudian-plan-approval-caret {
  width: 10px;
  flex-shrink: 0;
  color: var(--interactive-accent);
  font-weight: bold;
}

.claudian-plan-approval-number {
  flex-shrink: 0;
  color: var(--text-muted);
  white-space: nowrap;
}

.claudian-plan-approval-option.focused .claudian-plan-approval-caret,
.claudian-plan-approval-option.focused .claudian-plan-approval-number {
  color: var(--interactive-accent);
}

.claudian-plan-approval-option-label {
  font-weight: 500;
}

/* Placeholder text for revise option (muted) */
.claudian-plan-approval-placeholder {
  color: var(--text-muted);
  font-style: italic;
}

/* Inline revise input - must blend perfectly with option text */
.claudian-plan-approval-revise-inline {
  flex: 1;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-normal);
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  outline: none;
  padding: 0 !important;
  margin: 0 !important;
  line-height: inherit;
  letter-spacing: inherit;
  text-indent: 0;
  min-width: 0;
  height: auto;
}

.claudian-plan-approval-revise-inline::placeholder {
  color: var(--text-muted);
  font-style: italic;
  font-weight: 400;
}

/* ============================================
 * Plan Message (distinct styling in chat)
 * ============================================ */

.claudian-message-plan {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  /* Match plan banner horizontal margin (0 12px 8px 12px) */
  margin: 8px 12px;
  padding: 10px 16px;
  /* Override assistant message width/max-width to respect margins */
  width: auto;
  max-width: none;
  /* Match plan banner font styling */
  font-size: 13px;
  line-height: 1.5;
}

/* ============================================
 * Approval Indicator (user's choice display)
 * ============================================ */

.claudian-approval-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 8px 12px;
  font-size: 13px;
}

.claudian-approval-indicator-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

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

/* Text always muted */
.claudian-approval-indicator-text {
  color: var(--text-muted);
  margin-left: 2px;
}

/* Green check for approve (icon only) */
.claudian-approval-indicator-approve .claudian-approval-indicator-icon {
  color: var(--color-green);
}

/* Red x for revise (icon only) */
.claudian-approval-indicator-revise .claudian-approval-indicator-icon {
  color: var(--color-red);
}


/* ============================================
   components/plan-banner.css
   ============================================ */
/**
 * PlanBanner styles.
 * Collapsible banner below header showing approved plan.
 */

.claudian-plan-banner {
  margin: 0 12px 8px 12px;
  border-radius: 6px;
  background: rgba(0, 168, 157, 0.08);
  border: 1px solid rgba(0, 168, 157, 0.2);
  overflow: hidden;
}

.claudian-plan-banner.expanded {
  background: rgba(0, 168, 157, 0.05);
}

/* Header - clickable disclosure */
.claudian-plan-banner-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}

.claudian-plan-banner-header:hover {
  background: rgba(0, 168, 157, 0.1);
}

.claudian-plan-banner-chevron {
  font-size: 10px;
  color: #00A89D;
  transition: transform 0.15s ease;
}

.claudian-plan-banner.expanded .claudian-plan-banner-chevron {
  transform: rotate(0deg);
}

.claudian-plan-banner-title {
  font-size: 12px;
  font-weight: 500;
  color: #00A89D;
}

/* Content area */
.claudian-plan-banner-content {
  padding: 0 12px 12px 12px;
  max-height: 250px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.5;
  border-top: 1px solid rgba(0, 168, 157, 0.15);
}

.claudian-plan-banner-content h1,
.claudian-plan-banner-content h2,
.claudian-plan-banner-content h3 {
  margin-top: 0.8em;
  margin-bottom: 0.4em;
  font-size: 14px;
}

.claudian-plan-banner-content h1:first-child,
.claudian-plan-banner-content h2:first-child,
.claudian-plan-banner-content h3:first-child {
  margin-top: 0.5em;
}

.claudian-plan-banner-content p {
  margin: 0.5em 0;
}

.claudian-plan-banner-content ul,
.claudian-plan-banner-content ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

.claudian-plan-banner-content code {
  font-size: 12px;
  padding: 2px 4px;
  background: var(--background-primary);
  border-radius: 3px;
}

.claudian-plan-banner-content pre {
  padding: 8px;
  background: var(--background-primary);
  border-radius: 4px;
  overflow-x: auto;
  font-size: 12px;
}


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

/* Input wrapper (border container) */
.claudian-input-wrapper {
  position: relative;
  border: 1px solid var(--background-modifier-border);
  border-radius: 6px;
  background: var(--background-primary);
}

/* Selection indicator (shown when text is selected in editor) */
.claudian-selection-indicator {
  position: absolute;
  top: 4px;
  right: 8px;
  color: #7abaff;
  font-size: 11px;
  opacity: 0.9;
  pointer-events: none;
  white-space: nowrap;
  z-index: 1;
  background: var(--background-primary);
  padding: 2px 6px;
  border-radius: 4px;
}

.claudian-input {
  width: 100%;
  min-height: 60px;
  max-height: 200px;
  resize: none;
  padding: 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;
}

.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;
  padding: 4px 6px 6px 6px;
}

/* File indicator (attached files) */
.claudian-file-indicator {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0;
  margin-bottom: 8px;
}

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

/* Message Queue Indicator (shown below flavor text in thinking indicator) */
.claudian-queue-indicator {
  display: none;
  font-size: 12px;
  color: var(--text-muted);
  font-style: normal;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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


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

.claudian-context-meter {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 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: #D97757;
  transition: stroke-dashoffset 0.3s ease, stroke 0.3s ease;
}

.claudian-context-meter-percent {
  font-size: 11px;
  color: #D97757;
  min-width: 24px;
  text-align: right;
  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(--text-muted);
  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-option {
  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(217, 119, 87, 0.15);
  color: #D97757;
  font-weight: 500;
}


/* ============================================
   toolbar/thinking-selector.css
   ============================================ */
/* Thinking budget selector */
.claudian-thinking-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
}

.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: #D97757;
  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(217, 119, 87, 0.15);
  color: #D97757;
  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-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(217, 119, 87, 0.3);
}

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

/* Plan mode state */
.claudian-permission-toggle.plan-mode {
  cursor: pointer;
}

.claudian-permission-toggle.plan-mode .claudian-permission-label {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #00A89D;
  font-weight: 500;
  min-width: auto;
}

.claudian-permission-toggle.plan-mode .claudian-toggle-switch {
  display: none;
}

.claudian-plan-mode-icon {
  display: flex;
  align-items: center;
  font-size: 10px;
  letter-spacing: 2px;
  transform: scaleX(1.3);
  margin-right: 2px;
}

.claudian-permission-toggle.plan-mode:hover .claudian-permission-label {
  opacity: 0.8;
}


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

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

.claudian-context-path-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  color: var(--text-muted);
  opacity: 0.5;
  transition: all 0.2s ease;
}

.claudian-context-path-icon-wrapper:hover .claudian-context-path-icon {
  background: var(--background-modifier-hover);
  opacity: 0.8;
}

.claudian-context-path-icon.active {
  color: #D97757;
  opacity: 1;
  animation: context-path-glow 2s ease-in-out infinite;
}

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

.claudian-context-path-badge {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 9px;
  font-weight: 600;
  color: #D97757;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

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

.claudian-context-path-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-context-path-selector:hover .claudian-context-path-dropdown {
  opacity: 1;
  visibility: visible;
}

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

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

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

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

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

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

.claudian-context-path-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-context-path-remove:hover {
  background: rgba(220, 53, 69, 0.15);
  color: #dc3545;
  opacity: 1;
}

.claudian-context-path-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;
  border-radius: 4px;
  color: var(--text-muted);
  opacity: 0.5;
  transition: all 0.2s ease;
}

.claudian-mcp-selector-icon-wrapper:hover .claudian-mcp-selector-icon {
  background: var(--background-modifier-hover);
  opacity: 0.8;
}

.claudian-mcp-selector-icon.active {
  color: #D97757;
  opacity: 1;
  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: #D97757;
  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(217, 119, 87, 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: #D97757;
}

.claudian-mcp-selector-item.enabled .claudian-mcp-selector-check {
  background: rgba(217, 119, 87, 0.2);
  border-color: #D97757;
}

.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(217, 119, 87, 0.2);
  color: #D97757;
  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-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: #D97757;
}

/* Context folder filter items in @-mention dropdown */
.claudian-mention-item.context-folder .claudian-mention-icon {
  color: #D97757;
}

.claudian-mention-name-folder {
  color: #D97757;
  font-weight: 600;
}

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



/* ============================================
   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 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

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

/* Drop overlay - inside input wrapper */
.claudian-drop-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(217, 119, 87, 0.08);
  border: 2px dashed #D97757;
  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: #D97757;
}

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

/* 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 30px 4px 8px;
  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 right */
.claudian-inline-spinner {
  position: absolute;
  right: 8px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid var(--background-modifier-border);
  border-top-color: #D97757;
  border-radius: 50%;
  box-sizing: border-box;
  animation: claudian-inline-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-left: 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;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.claudian-write-edit-block::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.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: 6px;
  padding: 4px 0;
  cursor: pointer;
  user-select: none;
  background: transparent;
}

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

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

.claudian-write-edit-label {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-normal);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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-running .claudian-spinner {
  width: 14px;
  height: 14px;
}

.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;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.claudian-write-edit-content::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.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;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.claudian-write-edit-diff::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.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: 13px;
  font-weight: 600;
  color: var(--text-normal);
  font-family: var(--font-monospace);
}

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

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

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


/* ============================================
   modals/approval.css
   ============================================ */
/* Approval Modal */
.claudian-approval-modal {
  padding: 16px;
}

.claudian-approval-info {
  margin-bottom: 12px;
}

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

.claudian-approval-icon {
  color: #D97757;
}

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

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

.claudian-approval-buttons {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.claudian-approval-btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.claudian-deny-btn {
  background: var(--background-modifier-error);
  color: var(--text-on-accent);
  border: none;
}

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

.claudian-allow-btn {
  background: var(--background-secondary);
  color: var(--text-normal);
  border: 1px solid var(--background-modifier-border);
}

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

.claudian-always-btn {
  background: #D97757;
  color: white;
  border: none;
}

.claudian-always-btn:hover {
  background: #c56a4a;
}


/* ============================================
   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-instruction-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-mcp-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;
}

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


/* ============================================
   settings/base.css
   ============================================ */
/* 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-slash-settings-desc,
.claudian-mcp-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);
}

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


/* ============================================
   settings/approved-actions.css
   ============================================ */
/* Settings - Approved Actions List */
.claudian-approved-desc {
  margin-bottom: 12px;
}

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

.claudian-approved-list {
  margin-bottom: 16px;
}

.claudian-approved-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: var(--background-secondary);
  border-radius: 6px;
  margin-bottom: 8px;
}

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

.claudian-approved-item-tool {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(217, 119, 87, 0.15);
  color: #D97757;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  margin-right: 8px;
}

.claudian-approved-item-pattern {
  font-family: var(--font-monospace);
  font-size: 12px;
  color: var(--text-normal);
  margin-top: 4px;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
}

.claudian-approved-item-date {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 8px;
}

.claudian-approved-remove-btn {
  padding: 4px 12px;
  font-size: 12px;
  background: var(--background-modifier-error);
  color: var(--text-on-accent);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 12px;
}

.claudian-approved-remove-btn:hover {
  opacity: 0.9;
}


/* ============================================
   settings/env-snippets.css
   ============================================ */
/* 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;
}


/* ============================================
   settings/slash-settings.css
   ============================================ */
/* Slash Command Settings */
.claudian-slash-settings-desc {
  margin-bottom: 12px;
}

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

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

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

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

.claudian-add-slash-btn:hover {
  opacity: 0.9;
}

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

.claudian-export-btn:hover,
.claudian-import-btn:hover {
  background: var(--background-modifier-border-hover);
}

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

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

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

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

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

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

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

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

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

.claudian-slash-item-preview {
  font-size: 12px;
  color: var(--text-faint);
  font-family: var(--font-monospace);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.claudian-edit-slash-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-slash-btn:hover {
  background: var(--background-modifier-border-hover);
}

.claudian-delete-slash-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-slash-btn:hover {
  opacity: 0.9;
}

/* Slash Command Modal */
.claudian-slash-modal .modal-content {
  max-width: 600px;
  width: auto;
}

.claudian-slash-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-slash-content-area:focus {
  outline: none;
  border-color: var(--interactive-accent);
}

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


/* ============================================
   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);
}


/* ============================================
   accessibility.css
   ============================================ */
/* Accessibility - Focus Visible Styles */

/* Collapsible headers - keyboard focus indicators */
.claudian-tool-header:focus-visible,
.claudian-thinking-header:focus-visible,
.claudian-subagent-header:focus-visible {
  outline: 2px solid var(--interactive-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Header buttons focus indicators */
.claudian-header-btn:focus-visible {
  outline: 2px solid var(--interactive-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Action buttons in history dropdown */
.claudian-action-btn:focus-visible {
  outline: 2px solid var(--interactive-accent);
  outline-offset: 2px;
}

/* History items focus indicator */
.claudian-history-item-content:focus-visible {
  outline: 2px solid var(--interactive-accent);
  outline-offset: -2px;
  border-radius: 4px;
}

/* Approval modal buttons */
.claudian-approval-btn:focus-visible {
  outline: 2px solid var(--interactive-accent);
  outline-offset: 2px;
}

/* Toggle switch focus indicator */
.claudian-toggle-switch:focus-visible {
  outline: 2px solid var(--interactive-accent);
  outline-offset: 2px;
}

/* Model selector button */
.claudian-model-btn:focus-visible {
  outline: 2px solid var(--interactive-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Thinking budget selector */
.claudian-thinking-current:focus-visible {
  outline: 2px solid var(--interactive-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* File chips focus indicator */
.claudian-file-chip:focus-visible {
  outline: 2px solid var(--interactive-accent);
  outline-offset: 2px;
}

/* Image chips focus indicator */
.claudian-image-chip:focus-visible {
  outline: 2px solid var(--interactive-accent);
  outline-offset: 2px;
}

/* Remove buttons focus indicator */
.claudian-file-chip-remove:focus-visible,
.claudian-image-remove:focus-visible,
.claudian-image-modal-close:focus-visible {
  outline: 2px solid var(--interactive-accent);
  outline-offset: 2px;
}

/* Settings buttons */
.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 {
  outline: 2px solid var(--interactive-accent);
  outline-offset: 2px;
}

/* Code language label (copy button) */
.claudian-code-lang-label:focus-visible {
  outline: 2px solid var(--interactive-accent);
  outline-offset: 2px;
}