/* 
 * Conversation View
 * Full conversation interface with project/convo/branch navigation
 */

/* ==========================================
   Convo Header
   ========================================== */

.convo-header {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  border-bottom: var(--border-width) solid var(--border-color);
  padding: var(--space-2) var(--space-4);
  background: var(--color-paper);
  flex-shrink: 0;
}

.convo-header-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1000px;
  gap: var(--space-2);
  align-items: center;
}

.convo-header-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.convo-total-tokens {
    display: none;
    font-size: var(--text-xs);
    color: var(--color-ink-light);
    padding: var(--space-1) var(--space-2);
    background: var(--color-paper-warm);
    border-radius: var(--radius-sm);
}

/* ==========================================
   Navigation Dropdowns
   ========================================== */

.convo-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
}

.nav-separator {
  color: var(--color-ink-lighter);
  font-size: var(--text-sm);
  padding: 0 var(--space-1);
}

.nav-dropdown-container {
  position: relative;
}

.nav-dropdown-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-ink);
  cursor: pointer;
  transition: all var(--transition-fast);
  max-width: 200px;
}

.nav-dropdown-btn:hover {
  background: var(--color-paper-cool);
  border-color: var(--border-color);
}

.nav-icon {
  flex-shrink: 0;
}

.nav-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--weight-medium);
}

.nav-arrow {
  font-size: var(--text-xs);
  color: var(--color-ink-light);
  flex-shrink: 0;
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  max-width: 320px;
  max-height: 400px;
  overflow-y: auto;
  background: var(--color-paper);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  margin-top: var(--space-1);
}

.dropdown-header {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-lighter);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-color);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.dropdown-item:hover {
  background: var(--color-paper-cool);
}

.dropdown-item.active {
  background: var(--color-accent-subtle);
}

.dropdown-item-icon {
  flex-shrink: 0;
}

.dropdown-item-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
}

.dropdown-item-meta {
  font-size: var(--text-xs);
  color: var(--color-ink-lighter);
  flex-shrink: 0;
}

.dropdown-item-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-ink-lighter);
  opacity: 0;
  transition: all var(--transition-fast);
  margin-left: auto;
}

.dropdown-item:hover .dropdown-item-delete {
  opacity: 1;
}

.dropdown-item-delete:hover {
  color: var(--color-error);
  background: var(--color-error-bg);
}

.dropdown-divider {
  height: 1px;
  background: var(--border-color);
  margin: var(--space-1) 0;
}

.dropdown-action {
  color: var(--color-accent);
}

.dropdown-action:hover {
  background: var(--color-accent-subtle);
}

.dropdown-empty {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-ink-lighter);
  font-size: var(--text-sm);
}

/* ==========================================
   Messages Container
   ========================================== */

.messages-container {
  flex: 1;
  width: 100%;
  overflow-y: auto;
  min-height: 0; /* Constraints to flex item */
  height: 0; /* Optimization to force shrink */
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  gap: var(--space-4);
  scroll-behavior: smooth;
}

/* ==========================================
   Empty States
   ========================================== */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-8);
  height: 100%;
  min-height: 300px;
}

@media (max-width: 500px) {
  .empty-state {
    padding: 1rem !important;
  }
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
  opacity: 0.6;
}

.empty-state-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}

.empty-state-desc {
  font-size: var(--text-sm);
  color: var(--color-ink-light);
  max-width: 400px;
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.empty-state-desc code {
  background: var(--color-paper-cool);
  padding: 0.125em 0.375em;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.875em;
}

.empty-state-btn {
  margin-top: var(--space-2);
}

/* ==========================================
   Convo Node (Message Unit)
   ========================================== */

.convo-node {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-4);
  background: var(--color-paper);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
  box-sizing: border-box;
}

.convo-node:hover {
  border-color: var(--color-ink-lighter);
}

.convo-node.loading {
  opacity: 0.9;
}

/* User Section */
.convo-node-user {
  display: flex;
  gap: var(--space-3);
}

.node-user-avatar {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-paper-cool);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.node-user-content {
  flex: 1;
  min-width: 0;
  width: 100%;
}

.node-user-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.node-user-name {
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--color-ink);
}

.node-user-time {
  font-size: var(--text-xs);
  color: var(--color-ink-lighter);
}

.node-user-message {
  font-size: var(--text-base);
  color: var(--color-ink);
  line-height: 1.6;
  overflow-x: auto;
}

/* Response Section */
.convo-node-response {
  display: flex;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border-color);
}

.node-response-avatar {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.node-response-content {
  flex: 1;
  min-width: 0;
  width: 100%;
}

.node-response-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.node-response-name {
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--color-ink);
}

.node-model-info {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-paper-cool);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--color-ink-lighter);
  transition: all var(--transition-fast);
}

.node-model-info svg {
  opacity: 0.7;
}

.node-response-model {
  display: none; /* Hidden in header, now in node-actions */
}

.node-response-tokens {
  font-size: var(--text-xs);
  color: var(--color-ink-lighter);
}

.node-response-cost {
  font-size: var(--text-xs);
  color: var(--color-ink-lighter);
  font-family: var(--font-mono);
}

.node-response-body {
  font-size: var(--text-base);
  color: var(--color-ink);
  line-height: var(--leading-relaxed);
  width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.node-no-response {
  font-size: var(--text-sm);
  color: var(--color-ink-lighter);
  font-style: italic;
}

/* Loading State */
.node-loading {
  display: flex;
  align-items: start;
  gap: var(--space-2);
  color: var(--color-ink-light);
  font-size: var(--text-sm);
  flex-wrap: wrap;
  flex-direction: column;
}

.loading-dots {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.loading-dots span {
  width: 6px;
  height: 6px;
  background: var(--color-ink-light);
  border-radius: 50%;
  animation: loadingDot 1.4s infinite ease-in-out both;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
.loading-dots span:nth-child(3) { animation-delay: 0; }

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

/* Step Feedback Message - Enhanced loading with assistant pipeline progress */
.loading-message {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-ink-light);
  font-size: var(--text-sm);
  animation: loading-message-fade 0.3s ease;
}

@keyframes loading-message-fade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.loading-icon {
  flex-shrink: 0;
  font-size: var(--text-base);
}

.loading-step-progress {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-full);
  margin-left: var(--space-2);
}

/* Branch Indicator */
.node-branch-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-accent-subtle);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-accent);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.node-branch-indicator:hover {
  background: var(--color-accent);
  color: white;
}

/* Node Actions */
.node-actions {
  display: flex;
  gap: var(--space-2);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.convo-node:hover .node-actions {
  opacity: 1;
}

.node-action-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-paper-cool);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--color-ink-light);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.node-action-btn:hover {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}

.node-action-btn.active {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}

.node-action-btn.node-action-danger:hover {
  background: var(--color-danger-subtle);
  color: var(--color-danger);
}

/* Hidden Node Styles (excluded from AI context but visible in UI) */
.convo-node.is-hidden-from-ai {
  opacity: 0.6;
  background: var(--color-paper-cool);
  border-style: dashed;
}

.convo-node.is-hidden-from-ai .convo-node-user,
.convo-node.is-hidden-from-ai .convo-node-response {
  opacity: 0.8;
}

.node-hidden-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-warning-subtle, #FFF8E1);
  color: var(--color-warning, #F57C00);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-md);
  margin-top: var(--space-2);
}

/* Other Author Styles (messages from other users in multi-user convos) */
.convo-node.other-author {
  background: var(--color-paper-warm, #FFFEF8);
  border-left: 3px solid var(--color-accent-subtle);
}

.convo-node.other-author:hover {
  border-left-color: var(--color-accent);
}

.node-user-name.other-user {
  color: var(--color-accent);
}

.node-user-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* Branching From Node Styles */
.convo-node.branching-from {
  border-color: var(--color-accent);
  border-width: 2px;
  box-shadow: 0 0 0 4px var(--color-accent-subtle);
  animation: branching-pulse 2s ease-in-out infinite;
}

.convo-node.branch-start-ghost {
  opacity: 0.5 !important;
  filter: grayscale(0.7);
  pointer-events: none;
  border-style: dashed !important;
  background: var(--color-paper-cool) !important;
  position: relative;
}

/* Ghost Node Badge - shows "Branched from here" indicator */
.ghost-node-badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  border: 1px dashed var(--color-accent);
}

.ghost-node-badge svg {
  flex-shrink: 0;
  opacity: 0.8;
}

/* Empty Branch State - shown after ghost node */
.empty-branch-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-8) var(--space-4);
  max-width: 400px;
  margin: var(--space-4) auto;
  background: var(--color-paper-warm);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-lg);
}

.empty-branch-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  border-radius: 50%;
  margin-bottom: var(--space-4);
}

.empty-branch-icon svg {
  width: 24px;
  height: 24px;
}

.empty-branch-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}

.empty-branch-desc {
  font-size: var(--text-sm);
  color: var(--color-ink-light);
  line-height: 1.6;
}

/* Ghost Branch Loading State */
.ghost-branch-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8);
  color: var(--color-ink-light);
  font-size: var(--text-sm);
}

@keyframes branching-pulse {
  0%, 100% {
    box-shadow: 0 0 0 4px var(--color-accent-subtle);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(var(--color-accent-rgb, 99, 102, 241), 0.1);
  }
}

.branching-from-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.branching-cancel-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--color-accent);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.branching-cancel-btn:hover {
  background: var(--color-accent);
  color: white;
}

/* No Response State (for "off" mode) */
.node-no-response {
  font-size: var(--text-sm);
  color: var(--color-ink-lighter);
  font-style: italic;
  padding: var(--space-2);
  background: var(--color-paper-cool);
  border-radius: var(--radius-sm);
}

/* ==========================================
   Response Content
   ========================================== */

.response-text {
  margin-bottom: var(--space-3);
}

.response-text:last-child {
  margin-bottom: 0;
}

.response-text strong {
  font-weight: var(--weight-semibold);
}

.response-text em {
  font-style: italic;
}

.response-text code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-paper-cool);
  padding: 0.125em 0.375em;
  border-radius: var(--radius-sm);
}

.response-error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-danger-subtle);
  border-radius: var(--radius-md);
  color: var(--color-danger);
  font-size: var(--text-sm);
}

/* ==========================================
   Create Modal
   ========================================== */

.create-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.create-modal-content {
  background: var(--color-paper);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 400px;
  margin: var(--space-4);
}

.create-modal-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-4);
}

.create-input {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  margin-bottom: var(--space-4);
}

.create-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

.create-modal-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

/* ==========================================
   Buttons
   ========================================== */

.btn-primary {
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-primary:hover {
  background: var(--color-accent-dark);
}

.btn-secondary {
  padding: var(--space-2) var(--space-4);
  background: var(--color-paper-cool);
  color: var(--color-ink);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-secondary:hover {
  background: var(--color-paper);
  border-color: var(--color-ink-lighter);
}

/* ==========================================
   Mobile Slide-out Navigation Panel
   ========================================== */

/* Mobile Nav Toggle Button - Only visible on mobile */
.mobile-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-base);
  flex-shrink: 0;
  color: var(--color-ink);
}

.mobile-nav-toggle:hover {
  background: var(--color-paper-cool);
}

.mobile-nav-toggle:active {
  background: var(--color-accent-subtle);
}

.mobile-nav-toggle svg {
  width: 24px;
  height: 24px;
}

/* Mobile Nav Panel Backdrop */
.mobile-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.3); /* Using --color-ink base */
  backdrop-filter: blur(2px);
  z-index: 150;
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.mobile-nav-backdrop.active {
  display: block;
  opacity: 1;
}

/* Mobile Nav Panel */
.mobile-nav-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 85%;
  max-width: 300px;
  background: var(--color-paper);
  z-index: 160;
  transform: translateX(-100%);
  transition: transform var(--transition-slow);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  border-right: var(--border-width) solid var(--border-color);
}

.mobile-nav-panel.active {
  transform: translateX(0);
}

/* Panel Header */
.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: var(--border-width) solid var(--border-color);
  background: var(--color-paper-warm);
}

.mobile-nav-title {
  display: flex;
  align-items: center;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.mobile-nav-title svg {
  color: var(--color-ink-light);
}

.mobile-nav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-ink-light);
  transition: all var(--transition-fast);
}

.mobile-nav-close:hover {
  background: var(--color-accent-subtle);
  color: var(--color-ink);
}

/* Panel Content */
.mobile-nav-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) 0;
}

/* New Project Button */
.mobile-nav-new-project {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: calc(100% - var(--space-8));
  margin: 0 var(--space-4) var(--space-6) var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--color-ink);
  color: var(--color-paper);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.mobile-nav-new-project:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.mobile-nav-new-project:active {
  transform: translateY(0);
}

/* Project Tab (Accordion) */
.mobile-nav-project {
  margin-bottom: var(--space-1);
}

.mobile-nav-project-header-container {
  display: flex;
  align-items: stretch;
  width: 100%;
  padding: 0 var(--space-2);
}

.mobile-nav-project-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: all var(--transition-fast);
  min-width: 0;
}

.mobile-nav-project-header:hover {
  background: var(--color-paper-cool);
}

.mobile-nav-project-header.active {
  background: var(--color-accent-subtle);
}

.mobile-nav-project-context-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  margin-left: var(--space-1);
  cursor: pointer;
  color: var(--color-ink-lighter);
  transition: all var(--transition-fast);
}

.mobile-nav-project-context-btn:hover {
  background: var(--color-paper-cool);
  color: var(--color-ink);
}

.mobile-nav-project-context-btn.active {
  color: var(--color-accent);
}

.project-context-btn {
  padding: 4px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-radius: var(--radius-md);
  margin-left: var(--space-1);
}

.project-context-btn:hover {
  background: var(--color-paper-cool);
}

.project-context-btn.active {
  color: var(--color-accent);
  background: var(--color-accent-subtle);
  border: 1px solid var(--color-accent);
}

.mobile-nav-project-arrow {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform var(--transition-base);
  color: var(--color-ink-lighter);
}

.mobile-nav-project.expanded .mobile-nav-project-arrow {
  transform: rotate(90deg);
}

.mobile-nav-project-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink-lighter);
  flex-shrink: 0;
}

.mobile-nav-project-info {
  flex: 1;
  min-width: 0;
}

.mobile-nav-project-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-nav-project-count {
  font-size: var(--text-xs);
  padding: 2px 6px;
  background: var(--color-paper-cool);
  border-radius: var(--radius-full);
  color: var(--color-ink-light);
  flex-shrink: 0;
}

/* Project Convos List */
.mobile-nav-convos {
  display: none;
  padding: var(--space-1) 0;
}

.mobile-nav-project.expanded .mobile-nav-convos {
  display: block;
}

.mobile-nav-convo-container {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 var(--space-2);
    margin-bottom: 2px;
}

.mobile-nav-convo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  padding: var(--space-2) var(--space-3);
  padding-left: var(--space-10);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: all var(--transition-fast);
  min-width: 0;
}

.mobile-nav-convo:hover {
  background: var(--color-paper-cool);
}

.mobile-nav-convo.active {
  background: var(--color-paper-cool);
}

.mobile-nav-convo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink-lighter);
  flex-shrink: 0;
}

.mobile-nav-convo-name {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--color-ink-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-nav-convo.active .mobile-nav-convo-name {
  color: var(--color-ink);
  font-weight: var(--weight-medium);
}

.mobile-nav-convo-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-ink-lighter);
    opacity: 0;
    transition: all var(--transition-fast);
}

.mobile-nav-convo-container:hover .mobile-nav-convo-delete {
    opacity: 1;
}

.mobile-nav-convo-delete:hover {
    color: var(--color-error);
    background: var(--color-error-bg);
}

/* New Convo Button (within project) */
.mobile-nav-new-convo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: calc(100% - var(--space-6));
  margin: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-8);
  background: transparent;
  color: var(--color-ink-lighter);
  border: 1px dashed var(--border-color-strong);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.mobile-nav-new-convo:hover {
  background: var(--color-paper-cool);
  border-color: var(--color-ink-light);
  color: var(--color-ink-light);
}

/* Mobile Header Convo Name Display */
.mobile-convo-current {
  display: none;
  flex: 1;
  min-width: 0;
  padding: 0 var(--space-2);
}

.mobile-convo-current-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-convo-current-project {
  font-size: var(--text-xs);
  color: var(--color-ink-lighter);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================
   Mobile Responsive
   ========================================== */

@media (max-width: 768px) {
  .convo-header {
    padding: var(--space-2);
  }
  
  /* Hide desktop nav on mobile */
  .convo-nav {
    display: none;
  }
  
  /* Show mobile nav toggle */
  .mobile-nav-toggle {
    display: flex;
  }
  
  /* Show mobile convo name display */
  .mobile-convo-current {
    display: block;
  }
  
  .convo-node {
    padding: var(--space-3) var(--space-2);
    border-radius: 0;
    margin-bottom: var(--space-2);
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box;
  }
  
  .node-user-avatar,
  .node-response-avatar {
    width: 28px;
    height: 28px;
    font-size: var(--text-sm);
  }

  .node-user-message,
  .node-response-body {
    font-size: var(--text-sm);
  }
  
  .node-actions {
    opacity: 1;
    margin-top: var(--space-2);
  }

  .convo-node-user,
  .convo-node-response {
    gap: var(--space-2);
  }
}

@media (max-width: 480px) {
  .messages-container {
    padding: var(--space-2);
  }

  .convo-node {
    padding: var(--space-3) var(--space-2);
  }

  .node-user-avatar,
  .node-response-avatar {
    width: 24px;
    height: 24px;
  }
}

/* ==========================================
   Legacy Styles (keeping for compatibility)
   ========================================== */

.message-node {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  max-width: 1000px;
  padding: var(--space-4) 0;
  align-self: center;
  border-bottom: 1px dotted var(--border-color);
}

.message-node:last-child {
  border-bottom: none;
}

.message-node-container {
  display: flex;
  flex-direction: column;
  align-self: center;
  gap: var(--space-2);
  max-width: 1000px;
  margin-inline: 1rem;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.message-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.message-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--color-paper-cool);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.message-role {
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--color-ink);
}

.message-time {
  font-size: var(--text-xs);
  color: var(--color-ink-lighter);
  margin-left: auto;
}

/* ==========================================
   Branch Tree Visualization
   ========================================== */

.branch-tree {
  padding: var(--space-2);
}

.branch-tree-node {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  position: relative;
}

.branch-tree-node::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 24px;
  bottom: 0;
  width: 2px;
  background: var(--border-color);
}

.branch-tree-node:last-child::before {
  display: none;
}

.branch-tree-connector {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
}

.branch-tree-connector::after {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--color-accent);
  border-radius: 50%;
}

.branch-tree-node.is-main .branch-tree-connector::after {
  background: var(--color-success);
}

.branch-tree-info {
  flex: 1;
  min-width: 0;
}

.branch-tree-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.branch-tree-name:hover {
  background: var(--color-paper-cool);
}

.branch-tree-node.active .branch-tree-name {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}

.branch-tree-meta {
  font-size: var(--text-xs);
  color: var(--color-ink-lighter);
  padding: 0 var(--space-2);
}

.branch-tree-children {
  margin-left: var(--space-4);
}

/* ==========================================
   Multi-User Node Display
   ========================================== */

.convo-node-multiuser .node-user-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.node-author-avatar {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.node-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.node-author-avatar.avatar-color-1 { background: #E3F2FD; color: #1565C0; }
.node-author-avatar.avatar-color-2 { background: #FCE4EC; color: #C2185B; }
.node-author-avatar.avatar-color-3 { background: #E8F5E9; color: #2E7D32; }
.node-author-avatar.avatar-color-4 { background: #FFF3E0; color: #EF6C00; }
.node-author-avatar.avatar-color-5 { background: #F3E5F5; color: #7B1FA2; }

.convo-contributors {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-paper-cool);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}

.contributors-avatars {
  display: flex;
}

.contributors-avatars .node-author-avatar {
  margin-left: -8px;
  border: 2px solid var(--color-paper);
}

.contributors-avatars .node-author-avatar:first-child {
  margin-left: 0;
}

.contributors-label {
  color: var(--color-ink-light);
}

.contributors-names {
  color: var(--color-ink);
  font-weight: var(--weight-medium);
}

/* ==========================================
   Enhanced Dropdown Items
   ========================================== */

.dropdown-item.has-meta {
  flex-wrap: wrap;
}

.dropdown-item-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

.dropdown-item-details {
  width: 100%;
  padding-left: calc(var(--space-2) + 20px);
  font-size: var(--text-xs);
  color: var(--color-ink-lighter);
}

.dropdown-item-badge {
  font-size: var(--text-xs);
  padding: 2px 6px;
  border-radius: var(--radius-full);
  background: var(--color-paper-cool);
}

.dropdown-item-badge.collaborative {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}

/* Manage Editors Button in Dropdown */
.dropdown-manage-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: var(--color-ink-light);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  border-top: 1px solid var(--border-color);
  margin-top: var(--space-1);
}

.dropdown-manage-btn:hover {
  background: var(--color-paper-cool);
  color: var(--color-ink);
}

/* ==========================================
   Editor Management Modal Styles
   ========================================== */

.editor-modal .modal-content {
  max-width: 600px;
}

.editor-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8);
  color: var(--color-ink-light);
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-color);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

.editor-section {
  margin-bottom: var(--space-6);
}

.editor-section:last-child {
  margin-bottom: 0;
}

.editor-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.editor-section-header h4 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  margin: 0;
}

.editor-section-hint {
  font-size: var(--text-xs);
  color: var(--color-ink-lighter);
}

.editor-count {
  font-size: var(--text-xs);
  padding: 2px 8px;
  background: var(--color-paper-cool);
  border-radius: var(--radius-full);
  color: var(--color-ink-light);
}

.editor-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.editor-empty {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-ink-lighter);
  font-size: var(--text-sm);
  background: var(--color-paper-cool);
  border-radius: var(--radius-md);
}

.editor-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-paper);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.editor-item:hover {
  border-color: var(--color-ink-lighter);
}

.editor-item.available {
  background: var(--color-paper-cool);
  border-style: dashed;
}

.editor-item.contributor {
  background: transparent;
  border: none;
  padding: var(--space-1) var(--space-2);
}

.editor-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
}

.editor-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

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

.editor-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-meta {
  display: flex;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-ink-lighter);
}

.editor-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-role {
  flex-shrink: 0;
}

.role-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-full);
  text-transform: capitalize;
}

.role-badge.role-admin {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}

.role-badge.role-editor {
  background: var(--color-paper-cool);
  color: var(--color-ink-light);
}

.editor-actions {
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
}

.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-icon:hover {
  background: var(--color-paper-cool);
  border-color: var(--color-ink-lighter);
}

.btn-icon.btn-danger:hover {
  background: var(--color-danger-subtle);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.btn-sm {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
}

/* Editor Add Form */
.editor-add-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.editor-search-group {
  display: flex;
  gap: var(--space-2);
}

.editor-search {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.editor-search:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

.editor-role-select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  background: var(--color-paper);
  cursor: pointer;
}

.editor-available-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 200px;
  overflow-y: auto;
}

.access-source {
  padding: 2px 6px;
  background: var(--color-paper);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
}

/* ==========================================
   Notifications Panel
   ========================================== */

.notifications-btn {
  position: relative;
}

.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--color-danger);
  color: white;
  font-size: 10px;
  font-weight: var(--weight-bold);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}

.notifications-dropdown {
  /* position: absolute; */
  /* top: 100%; */
  /* right: 0; */
  width: 300px;
  max-height: 480px;
  background: var(--color-paper);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: 200;
  display: flex;
  flex-direction: column;
}

.notifications-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-color);
}

.notifications-title {
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
}

.notifications-mark-all {
  font-size: var(--text-xs);
  color: var(--color-accent);
  cursor: pointer;
}

.notifications-list {
  flex: 1;
  overflow-y: auto;
}

.notification-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.notification-item:hover {
  background: var(--color-paper-cool);
}

.notification-item.unread {
  background: var(--color-accent-subtle);
}

.notification-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-paper-cool);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  margin-bottom: 2px;
}

.notification-message {
  font-size: var(--text-xs);
  color: var(--color-ink-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-time {
  font-size: var(--text-xs);
  color: var(--color-ink-lighter);
  margin-top: var(--space-1);
}

.notifications-empty {
  padding: var(--space-8);
  text-align: center;
  color: var(--color-ink-lighter);
  font-size: var(--text-sm);
}

/* ==========================================
   Presence Indicator (Who's Viewing)
   ========================================== */

.presence-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-paper-cool);
  border-radius: var(--radius-full);
  cursor: default;
  position: relative;
}

.presence-indicator:hover .presence-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.presence-avatars {
  display: flex;
  align-items: center;
}

.presence-avatar {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 2px solid var(--color-paper);
  margin-left: -8px;
  position: relative;
  flex-shrink: 0;
  background: var(--color-paper-cool);
}

.presence-avatar:first-child {
  margin-left: 0;
}

.presence-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.presence-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--color-accent-subtle);
  color: var(--color-ink-light);
  font-size: 10px;
  font-weight: var(--weight-semibold);
}

/* Online indicator dot */
.presence-avatar::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 8px;
  height: 8px;
  background: var(--color-success);
  border: 2px solid var(--color-paper);
  border-radius: var(--radius-full);
}

.presence-overflow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  margin-left: -8px;
  border: 2px solid var(--color-paper);
}

.presence-label {
  font-size: var(--text-xs);
  color: var(--color-ink-light);
  margin-left: var(--space-1);
}

/* Tooltip showing full list of viewers */
.presence-tooltip {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 180px;
  padding: var(--space-2);
  background: var(--color-paper);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-tooltip);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all var(--transition-fast);
}

.presence-tooltip-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-lighter);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--border-color);
}

.presence-tooltip-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.presence-tooltip-user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.presence-tooltip-avatar {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
}

.presence-tooltip-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.presence-tooltip-name {
  font-size: var(--text-sm);
  color: var(--color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.presence-tooltip-typing {
  font-size: var(--text-xs);
  color: var(--color-ink-lighter);
  font-style: italic;
}

/* ==========================================
   Typing Indicator
   ========================================== */

.typing-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  animation: typing-fade-in var(--transition-slow) ease;
}

@keyframes typing-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.typing-indicator-avatars {
  display: flex;
  align-items: center;
}

.typing-indicator-avatar {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 2px solid var(--color-paper);
  margin-left: -6px;
  flex-shrink: 0;
}

.typing-indicator-avatar:first-child {
  margin-left: 0;
}

.typing-indicator-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.typing-indicator-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--color-accent-subtle);
  color: var(--color-ink-light);
  font-size: 8px;
  font-weight: var(--weight-semibold);
}

.typing-indicator-content {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.typing-indicator-dots {
  display: flex;
  gap: 3px;
}

.typing-indicator-dots span {
  width: 5px;
  height: 5px;
  background: var(--color-ink-lighter);
  border-radius: 50%;
  animation: typing-dot 1.4s infinite ease-in-out both;
}

.typing-indicator-dots span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator-dots span:nth-child(2) { animation-delay: -0.16s; }
.typing-indicator-dots span:nth-child(3) { animation-delay: 0; }

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

.typing-indicator-text {
  font-size: var(--text-sm);
  color: var(--color-ink-light);
}

.typing-indicator-text strong {
  font-weight: var(--weight-medium);
  color: var(--color-ink);
}

/* ==========================================
   Convo Input Area (within convo mode window)
   ========================================== */

.convo-input-area {
  position: sticky;
  bottom: 0;
  width: 100%;
  background: var(--color-paper);
  border-top: var(--border-width) solid var(--border-color);
  padding: var(--space-3) var(--space-4);
  z-index: 10;
  /* Add subtle background for separation */
}

/* Mobile responsive */
@media (max-width: 768px) {
  .convo-input-area {
    padding: var(--space-2);
  }
}

/* ==========================================
   Vanish Mode Styles
   Ephemeral chat - messages disappear when leaving
   ========================================== */

/* Mode Toggle Button Styling */
.vanish-mode-btn {
  position: relative;
}

.vanish-mode-btn.active {
  color: var(--color-vanish) !important;
  background: var(--color-vanish-bg) !important;
}

.vanish-mode-btn.active::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--color-vanish-glow);
  z-index: -1;
  animation: vanish-pulse 2s ease-in-out infinite;
}

@keyframes vanish-pulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.05); }
}

/* Vanish Mode Container */
.vanish-mode {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, var(--color-vanish-bg) 0%, var(--color-paper) 100%);
  position: relative;
  overflow: hidden;
}

.vanish-mode::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-vanish), var(--color-vanish-dark));
}

/* Vanish Header */
.vanish-header {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-vanish-border);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
}

.vanish-header-content {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.vanish-header-icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-vanish-bg);
  border-radius: var(--radius-full);
  color: var(--color-vanish);
}

.vanish-header-text {
  display: flex;
  flex-direction: column;
}

.vanish-title {
  display: none;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  margin: 0;
}

.vanish-subtitle {
  font-size: var(--text-xs);
  color: var(--color-ink-lighter);
  margin: 0;
}

.vanish-header-actions {
  display: none;
  align-items: center;
  gap: var(--space-2);
}

.vanish-message-count {
  font-size: var(--text-xs);
  color: var(--color-vanish);
  padding: var(--space-1) var(--space-2);
  background: var(--color-vanish-bg);
  border-radius: var(--radius-full);
  font-weight: var(--weight-medium);
}

/* Messages Container */
.vanish-messages-container {
  flex: 1;
  width: 100%;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Empty State */
.vanish-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-8);
  height: 100%;
  min-height: 300px;
}

.vanish-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: var(--color-vanish-bg);
  border-radius: var(--radius-full);
  color: var(--color-vanish);
  margin-bottom: var(--space-4);
}

.vanish-empty-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}

.vanish-empty-desc {
  font-size: var(--text-sm);
  color: var(--color-ink-light);
  max-width: 400px;
  line-height: 1.6;
  margin-bottom: var(--space-6);
}

.vanish-empty-desc strong {
  color: var(--color-vanish);
}

.vanish-empty-hints {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.vanish-hint {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-paper);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-ink-light);
}

.vanish-hint-icon {
  font-size: var(--text-base);
}

/* Individual Message */
.vanish-message {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-4);
  background: var(--color-paper);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
  animation: vanish-message-in var(--transition-slow) ease;
  position: relative;
}

/* Delete Button */
.vanish-delete-btn {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-ink-lighter);
  opacity: 0;
  transition: all var(--transition-fast);
}

.vanish-message:hover .vanish-delete-btn {
  opacity: 1;
}

.vanish-delete-btn:hover {
  background: var(--color-danger-subtle);
  color: var(--color-danger);
}

.vanish-delete-btn svg {
  width: 16px;
  height: 16px;
}

@keyframes vanish-message-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.vanish-message:hover {
  border-color: var(--color-vanish-border);
  box-shadow: 0 2px 12px var(--color-vanish-glow);
}

.vanish-message.loading {
  opacity: 0.9;
}

/* User Message Section */
.vanish-message-user {
  display: flex;
  gap: var(--space-3);
}

/* Assistant Response Section */
.vanish-message-assistant {
  display: flex;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border-color);
}

/* Avatar */
.vanish-avatar {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-paper-cool);
  border-radius: var(--radius-full);
  flex-shrink: 0;
  font-size: var(--text-sm);
}

.vanish-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-full);
}

.vanish-message-assistant .vanish-avatar {
  background: var(--color-vanish);
  color: var(--color-paper);
}

/* Message Content */
.vanish-message-content {
  flex: 1;
  min-width: 0;
}

.vanish-message-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.vanish-message-name {
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--color-ink);
}

.vanish-message-time {
  font-size: var(--text-xs);
  color: var(--color-ink-lighter);
}

.vanish-message-text {
  font-size: var(--text-base);
  color: var(--color-ink);
  line-height: var(--leading-relaxed);
}

.vanish-message-text code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-paper-cool);
  padding: 0.125em 0.375em;
  border-radius: var(--radius-sm);
}

.vanish-message-text pre {
  background: var(--color-ink);
  color: var(--color-paper);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  margin: var(--space-2) 0;
}

.vanish-message-text pre code {
  background: transparent;
  padding: 0;
  color: inherit;
}

/* Message Meta */
.vanish-message-meta {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.vanish-model {
  font-size: var(--text-xs);
  color: var(--color-ink-lighter);
  padding: var(--space-1) var(--space-2);
  background: var(--color-paper-cool);
  border-radius: var(--radius-sm);
}

/* Loading State */
.vanish-loading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-vanish);
  font-size: var(--text-sm);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .vanish-header {
    padding: var(--space-3);
  }

  .vanish-header-icon {
    width: 32px;
    height: 32px;
  }

  .vanish-title {
    font-size: var(--text-base);
  }

  .vanish-messages-container {
    padding: var(--space-2);
  }

  .vanish-message {
    padding: var(--space-3);
  }

  .vanish-empty-hints {
    flex-direction: column;
  }
}

/* ==========================================
   Vanish Overlay (Full-screen ephemeral chat)
   ========================================== */

.vanish-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal-overlay);
  display: none;
  align-items: center;
  justify-content: center;
}

.vanish-overlay.active {
  display: flex;
}

.vanish-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.6);
  backdrop-filter: blur(4px);
  animation: vanish-backdrop-fade-in var(--transition-slow);
}

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

.vanish-overlay-content {
  position: relative;
  width: 90%;
  max-width: 900px;
  height: 80vh;
  background: var(--color-paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: vanish-content-slide-up var(--transition-slow);
  z-index: 1;
}

@keyframes vanish-content-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.vanish-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  background: var(--color-vanish-bg);
  border-bottom: var(--border-width) solid var(--color-vanish-border);
  flex-shrink: 0;
}

.vanish-overlay-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-vanish-dark);
}

.vanish-overlay-title svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.vanish-overlay-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-vanish);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.vanish-overlay-close:hover {
  background: var(--color-vanish-glow);
  color: var(--color-vanish-dark);
}

.vanish-overlay-close svg {
  width: 20px;
  height: 20px;
}

.vanish-overlay .vanish-messages-container {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
}

.vanish-overlay .vanish-input-area {
  padding: var(--space-4);
  border-top: var(--border-width) solid var(--border-color);
  background: var(--color-paper-warm);
  flex-shrink: 0;
}

/* Mobile responsive for overlay */
@media (max-width: 768px) {
  .vanish-overlay-content {
    width: 95%;
    height: 90vh;
  }

  .vanish-overlay-header {
    padding: var(--space-3);
  }

  .vanish-overlay .vanish-messages-container,
  .vanish-overlay .vanish-input-area {
    padding: var(--space-2);
  }
}

/* ==========================================
   Plan Panel (Omniscient Assistant)
   Displays execution plans before running
   ========================================== */

.plan-panel {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: var(--color-paper);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--space-4);
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--transition-slow), opacity var(--transition-slow), visibility var(--transition-slow);
  max-height: 400px;
  overflow-y: auto;
  z-index: 20;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

.plan-panel[data-state="showing"],
.plan-panel[data-state="executing"] {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

/* Plan Header */
.plan-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.plan-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.plan-icon svg {
  width: 18px;
  height: 18px;
}

.plan-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
}

.plan-label {
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  color: var(--color-ink);
}

.plan-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-ink-lighter);
  transition: all var(--transition-fast);
  margin-left: auto;
}

.plan-close:hover {
  background: var(--color-paper-cool);
  color: var(--color-ink);
}

/* Confidence Badge */
.plan-confidence {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.confidence-high {
  background: var(--color-success-bg, #E8F5E9);
  color: var(--color-success, #2E7D32);
}

.confidence-medium {
  background: var(--color-warning-bg, #FFF3E0);
  color: var(--color-warning, #F57C00);
}

.confidence-low {
  background: var(--color-danger-subtle);
  color: var(--color-danger);
}

/* Plan Summary */
.plan-summary {
  font-size: var(--text-sm);
  color: var(--color-ink);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  background: var(--color-paper-warm);
  border-radius: var(--radius-md);
}

/* Prerequisites Section */
.plan-prerequisites {
  display: none;
  margin-bottom: var(--space-3);
  padding: var(--space-3);
  background: var(--color-warning-bg, #FFF8E1);
  border: 1px solid var(--color-warning, #FFB74D);
  border-radius: var(--radius-md);
}

.plan-prerequisites[data-has-prerequisites="true"] {
  display: block;
}

.prerequisite-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-warning, #F57C00);
  margin-bottom: var(--space-2);
}

.prerequisite-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-ink);
  padding: var(--space-1) 0;
}

.prereq-type {
  font-weight: var(--weight-medium);
  color: var(--color-ink-light);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.prereq-name {
  font-weight: var(--weight-semibold);
}

.prereq-reason {
  font-size: var(--text-xs);
  color: var(--color-ink-lighter);
  margin-left: auto;
}

/* Plan Steps */
.plan-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.plan-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-paper-cool);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.plan-step[data-status="running"] {
  background: var(--color-accent-subtle);
  border: 1px solid var(--color-accent);
}

.plan-step[data-status="complete"] {
  background: var(--color-success-bg, #E8F5E9);
  border: 1px solid var(--color-success, #4CAF50);
}

.plan-step[data-status="error"] {
  background: var(--color-danger-subtle);
  border: 1px solid var(--color-danger);
}

.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}

.plan-step[data-status="complete"] .step-number {
  background: var(--color-success, #4CAF50);
}

.plan-step[data-status="error"] .step-number {
  background: var(--color-danger);
}

.plan-step[data-status="running"] .step-number {
  background: var(--color-accent);
  animation: step-pulse 1.5s ease-in-out infinite;
}

@keyframes step-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.step-content {
  flex: 1;
  min-width: 0;
}

.step-type {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-lighter);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.step-description {
  font-size: var(--text-sm);
  color: var(--color-ink);
  line-height: 1.4;
}

.step-estimate {
  font-size: var(--text-xs);
  color: var(--color-ink-lighter);
  margin-top: var(--space-1);
}

/* Step Spinner for running state */
.step-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-accent-subtle);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-left: auto;
  flex-shrink: 0;
}

/* Refinement Input */
.plan-refinement {
  margin-bottom: var(--space-3);
}

.plan-refinement-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  background: transparent;
  transition: all var(--transition-fast);
}

.plan-refinement-input:focus {
  outline: none;
  border-style: solid;
  border-color: var(--color-accent);
  background: var(--color-paper);
}

.plan-refinement-input::placeholder {
  color: var(--color-ink-lighter);
}

/* Plan Actions */
.plan-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-color);
}

.plan-action-cancel {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  color: var(--color-ink-light);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.plan-action-cancel:hover {
  background: var(--color-paper-cool);
  border-color: var(--color-ink-lighter);
}

.plan-action-execute {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.plan-action-execute:hover {
  background: var(--color-accent-dark, #4F46E5);
  transform: translateY(-1px);
}

.plan-action-execute:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.plan-action-execute svg,
.plan-action-cancel svg {
  width: 16px;
  height: 16px;
}

/* Progress Bar (during execution) */
.plan-progress {
  display: none;
  margin-bottom: var(--space-3);
}

.plan-panel[data-state="executing"] .plan-progress {
  display: block;
}

.plan-progress-bar {
  height: 4px;
  background: var(--color-paper-cool);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.plan-progress-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

.plan-progress-text {
  font-size: var(--text-xs);
  color: var(--color-ink-lighter);
  text-align: center;
  margin-top: var(--space-1);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .plan-panel {
    padding: var(--space-3);
    max-height: 50vh;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }

  .plan-header {
    flex-wrap: wrap;
  }

  .plan-actions {
    flex-direction: column;
  }

  .plan-action-cancel,
  .plan-action-execute {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================
   Attachment Indicator (Query Results)
   Shows attached card data from queries
   ========================================== */

.node-attachment-indicator {
  margin-top: var(--space-3);
}

/* Attachment Toggle Button */
.attachment-indicator-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-query-bg);
  color: var(--color-query);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  width: 100%;
  text-align: left;
}

.attachment-indicator-btn:hover {
  background: var(--color-query-bg);
  border-color: var(--color-query);
}

.attachment-indicator-btn.active {
  background: var(--color-query);
  color: var(--color-paper);
  border-color: var(--color-query);
}

.attachment-indicator-btn svg {
  flex-shrink: 0;
}

.attachment-count {
  flex: 1;
}

.attachment-chevron {
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

/* Attachment Panel (Expanded View) */
.attachment-panel {
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: var(--color-paper-warm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  animation: attachment-slide-down var(--transition-base) ease;
}

@keyframes attachment-slide-down {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Query Section within Panel */
.attachment-query-section {
  margin-bottom: var(--space-3);
}

.attachment-query-section:last-child {
  margin-bottom: 0;
}

.attachment-query-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-color);
}

.attachment-query-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
}

.attachment-query-meta {
  font-size: var(--text-xs);
  color: var(--color-ink-lighter);
  padding: 2px var(--space-2);
  background: var(--color-paper-cool);
  border-radius: var(--radius-full);
}

/* Cards List */
.attachment-cards-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Individual Card Item */
.attachment-card-item {
  padding: var(--space-2) var(--space-3);
  background: var(--color-paper);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.attachment-card-item:hover {
  border-color: var(--color-query);
  box-shadow: var(--shadow-sm);
  transform: translateX(2px);
}

.attachment-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.attachment-card-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-card-schema {
  font-size: var(--text-xs);
  color: var(--color-ink-lighter);
  padding: 2px 6px;
  background: var(--color-paper-cool);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.attachment-card-preview {
  font-size: var(--text-xs);
  color: var(--color-ink-light);
  line-height: var(--leading-normal);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-card-field {
  margin-right: var(--space-2);
}

.attachment-card-field strong {
  font-weight: var(--weight-medium);
  color: var(--color-ink-lighter);
}

/* Show More Button */
.attachment-cards-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--color-paper-cool);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
  color: var(--color-ink-light);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.attachment-cards-more:hover {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.attachment-cards-more svg {
  flex-shrink: 0;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .attachment-indicator-btn {
    padding: var(--space-2);
    font-size: var(--text-xs);
  }

  .attachment-panel {
    padding: var(--space-2);
  }

  .attachment-card-item {
    padding: var(--space-2);
  }

  .attachment-card-preview {
    display: none;
  }
}