/* MindChat Canvas - Core Stylesheet */

:root {
  --bg-primary: #090d16;
  --bg-secondary: #121824;
  --bg-card: rgba(20, 27, 41, 0.75);
  --bg-card-user: rgba(22, 39, 70, 0.75);
  --bg-card-ai: rgba(30, 23, 50, 0.75);
  --border-color: rgba(255, 255, 255, 0.08);
  --border-color-hover: rgba(255, 255, 255, 0.18);
  --text-primary: #f0f4f8;
  --text-secondary: #90a0b5;
  --text-muted: #627285;
  
  --neon-blue: #3b82f6;
  --neon-purple: #a855f7;
  --neon-green: #10b981;
  --neon-red: #ef4444;
  --neon-orange: #f97316;
  
  --connection-line-color: rgba(144, 160, 181, 0.25);
  --connection-line-active: #a855f7;
  
  --sidebar-width: 320px;
  --card-width: 300px;
  
  --font-main: 'Inter', system-ui, -apple-system, sans-serif;
  --font-logo: 'Outfit', sans-serif;
  
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-glow-user: 0 0 15px rgba(59, 130, 246, 0.25);
  --shadow-glow-ai: 0 0 15px rgba(168, 85, 247, 0.25);
  
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset & Base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body, html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-main);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

/* App Container Layout */
.app-container {
  display: flex;
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-width);
  height: 100%;
  background-color: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  z-index: 10;
  transition: transform var(--transition-normal), width var(--transition-normal);
  flex-shrink: 0;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
}

.sidebar.collapsed {
  transform: translateX(-100%);
  width: 0;
  pointer-events: none;
}

.sidebar-header {
  padding: 24px;
  border-bottom: 1px solid var(--border-color);
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.lang-toggle-btn {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-main);
}

.lang-toggle-btn:hover {
  background-color: var(--neon-purple);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.4);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
}

.logo-icon {
  color: var(--neon-purple);
  filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.6));
}

.logo h1 {
  font-family: var(--font-logo);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, var(--text-primary) 30%, #b8c6db 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tagline {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 4px;
  margin-left: 34px;
}

.sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Hide scrollbar */
.sidebar-scroll::-webkit-scrollbar {
  width: 6px;
}
.sidebar-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
}
.sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.15);
}

.settings-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Canvas Library / Explorer styling */
.explorer-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 8px;
}

.explorer-title-row h3 {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.icon-btn {
  background: transparent;
  border: none;
  color: var(--neon-purple);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all var(--transition-fast);
  font-family: var(--font-main);
}

.icon-btn:hover {
  background-color: rgba(168, 85, 247, 0.15);
  color: #fff;
}

.explorer-tree {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 250px;
  overflow-y: auto;
  padding-right: 4px;
}

.explorer-tree::-webkit-scrollbar {
  width: 4px;
}
.explorer-tree::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
}

.folder-node {
  display: flex;
  flex-direction: column;
}

.folder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--transition-fast);
  user-select: none;
}

.folder-header:hover {
  background-color: rgba(255, 255, 255, 0.04);
}

.folder-title-container {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
}

.folder-arrow {
  font-size: 8px;
  color: var(--text-muted);
  transition: transform var(--transition-fast);
  width: 10px;
}

.folder-node.collapsed .folder-arrow {
  transform: rotate(-90deg);
}

.folder-icon {
  font-size: 13px;
}

.folder-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folder-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.folder-header:hover .folder-actions {
  opacity: 1;
}

.action-icon {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 10px;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.action-icon:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

.action-icon.delete:hover {
  background-color: rgba(239, 68, 68, 0.15);
  color: var(--neon-red);
}

.folder-canvases {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 14px;
  margin-top: 4px;
  border-left: 1px dashed rgba(255, 255, 255, 0.05);
  margin-left: 13px;
}

.folder-node.collapsed .folder-canvases {
  display: none;
}

.canvas-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
}

.canvas-node:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

.canvas-node.active {
  background-color: rgba(168, 85, 247, 0.1);
  border-left: 2px solid var(--neon-purple);
  padding-left: 6px; /* offset border */
}

.canvas-node.active .canvas-name-text {
  color: var(--neon-purple);
  font-weight: 500;
}

.canvas-title-container {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
}

.canvas-icon {
  font-size: 12px;
}

.canvas-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

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

.settings-section h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 8px;
}

.settings-section h3 .icon {
  font-size: 14px;
}

/* Forms */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 12px;
  color: var(--text-secondary);
}

select, input[type="text"], input[type="password"], textarea {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text-primary);
  font-family: var(--font-main);
  font-size: 13px;
  transition: all var(--transition-fast);
}

select:hover, input[type="text"]:hover, input[type="password"]:hover, textarea:hover {
  border-color: var(--border-color-hover);
  background-color: rgba(255, 255, 255, 0.06);
}

select:focus, input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
  outline: none;
  border-color: var(--neon-purple);
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2);
  background-color: rgba(255, 255, 255, 0.06);
}

.hidden-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-normal) ease-out;
}

.hidden-fields.show {
  max-height: 400px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-main);
}

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

.btn-primary {
  background-color: var(--neon-purple);
  color: #fff;
}
.btn-primary:hover {
  background-color: #9333ea;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.35);
}

.btn-secondary {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border-color: var(--border-color);
}
.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--border-color-hover);
}

.btn-outline {
  background-color: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}
.btn-outline:hover {
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--border-color-hover);
}

.btn-danger-outline {
  background-color: transparent;
  color: var(--neon-red);
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.btn-danger-outline:hover {
  background-color: rgba(239, 68, 68, 0.1);
  border-color: var(--neon-red);
}

.btn-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.btn-grid.compact {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.hidden {
  display: none !important;
}

/* Instructions box */
.instructions ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.instructions li {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  position: relative;
  padding-left: 6px;
}

/* Footer status */
.sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border-color);
  background-color: rgba(0, 0, 0, 0.15);
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: relative;
}

.status-dot.green {
  background-color: var(--neon-green);
  box-shadow: 0 0 8px var(--neon-green);
}
.status-dot.orange {
  background-color: var(--neon-orange);
  box-shadow: 0 0 8px var(--neon-orange);
}

/* Canvas Viewport */
.canvas-viewport {
  flex: 1;
  height: 100%;
  position: relative;
  overflow: hidden;
  cursor: grab;
}

.canvas-viewport:active {
  cursor: grabbing;
}

/* Transformable infinite grid */
.canvas-grid {
  width: 50000px;
  height: 50000px;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  background-size: 32px 32px;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1.5px);
  background-color: var(--bg-primary);
  will-change: transform;
}

/* Connection lines overlay */
.svg-connections {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.connections-3d {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform-style: preserve-3d;
  z-index: 1;
  display: none;
}

.connection-3d-line {
  position: absolute;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(144, 160, 181, 0.12), rgba(168, 85, 247, 0.58));
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.22);
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  pointer-events: none;
}

.connection-3d-line::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid rgba(168, 85, 247, 0.72);
  transform: translateY(-50%);
}

.connection-3d-line.active {
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.22), rgba(168, 85, 247, 0.9));
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.45);
}

.connection-path {
  fill: none;
  stroke: var(--connection-line-color);
  stroke-width: 2px;
  transition: stroke var(--transition-fast), stroke-width var(--transition-fast);
  marker-end: url(#arrow);
}

.connection-path.active {
  stroke: var(--connection-line-active);
  stroke-width: 2.5px;
  marker-end: url(#arrow-active);
  filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.4));
}

/* Cards overlay */
.cards-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Let pointer events fall through to the viewport for panning */
  z-index: 2;
}

/* The card element itself */
.chat-card {
  position: absolute;
  width: var(--card-width);
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto; /* Re-enable pointer events on the card */
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform 0.05s ease-out;
  backdrop-filter: blur(16px);
  z-index: 3;
}

.chat-card:hover {
  border-color: var(--border-color-hover);
  box-shadow: var(--shadow-md);
}

/* Card specific roles */
.chat-card.role-user {
  background-color: var(--bg-card-user);
  border-left: 4px solid var(--neon-blue);
}
.chat-card.role-user:focus-within, .chat-card.role-user.selected {
  border-color: var(--neon-blue);
  box-shadow: var(--shadow-glow-user), var(--shadow-md);
}

.chat-card.role-assistant, .chat-card.role-model {
  background-color: var(--bg-card-ai);
  border-left: 4px solid var(--neon-purple);
}
.chat-card.role-assistant:focus-within, .chat-card.role-assistant.selected,
.chat-card.role-model:focus-within, .chat-card.role-model.selected {
  border-color: var(--neon-purple);
  box-shadow: var(--shadow-glow-ai), var(--shadow-md);
}

.chat-card.role-dialogue {
  background-color: var(--bg-card);
  border-left: 4px solid #7c3aed;
}
.chat-card.role-dialogue:focus-within, .chat-card.role-dialogue.selected {
  border-color: #7c3aed;
  box-shadow: 0 0 15px rgba(124, 58, 237, 0.25), var(--shadow-md);
}

/* Combined Q&A Card internal styling */
.card-question-box {
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
}

.card-question-header, .card-reply-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-question-header {
  color: var(--neon-blue);
}

.card-reply-header {
  color: var(--neon-purple);
}

.card-question-text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  white-space: pre-wrap;
}

.card-divider {
  height: 1px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.08) 20%, rgba(255, 255, 255, 0.08) 80%, rgba(255, 255, 255, 0));
  margin: 10px 0;
}

/* Card Header */
.card-header {
  padding: 10px 14px;
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: move;
  user-select: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.card-role {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.role-user .card-role {
  color: var(--neon-blue);
}
.role-assistant .card-role, .role-model .card-role {
  color: var(--neon-purple);
}
.role-dialogue .card-role {
  color: #a78bfa;
}

.card-actions {
  display: flex;
  gap: 6px;
}

.card-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all var(--transition-fast);
}

.card-btn:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

.card-btn.delete-btn:hover {
  background-color: rgba(239, 68, 68, 0.15);
  color: var(--neon-red);
}

/* Card Body */
.card-body {
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Interactive Textarea inside card */
.card-textarea {
  width: 100%;
  min-height: 60px;
  max-height: 300px;
  background: transparent;
  border: none;
  resize: none;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
  outline: none;
  padding: 0;
  overflow-y: hidden;
  box-shadow: none !important;
}

/* Readonly static state when not editing */
.card-text-display {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
  min-height: 60px;
}

.card-text-display::-webkit-scrollbar {
  width: 4px;
}
.card-text-display::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
}

.card-text-display p {
  margin-bottom: 8px;
}
.card-text-display p:last-child {
  margin-bottom: 0;
}
.card-text-display code {
  font-family: monospace;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 12px;
  color: #e2e8f0;
}
.card-text-display pre {
  background-color: rgba(0, 0, 0, 0.4);
  padding: 8px;
  border-radius: 6px;
  overflow-x: auto;
  margin: 6px 0;
}
.card-text-display pre code {
  background-color: transparent;
  padding: 0;
  font-size: 11.5px;
}

/* Card Footer */
.card-footer {
  padding: 8px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  background-color: rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

.card-action-trigger {
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-action-trigger:hover {
  background-color: var(--neon-purple);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.3);
}

.role-user .card-action-trigger:hover {
  background-color: var(--neon-blue);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}
.role-dialogue .card-action-trigger:hover {
  background-color: #7c3aed;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}

/* Floating overlay controls */
.canvas-controls {
  position: absolute;
  bottom: 24px;
  right: 24px;
  background-color: rgba(18, 24, 36, 0.85);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(12px);
  z-index: 5;
}

.canvas-controls button {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.canvas-controls button:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

.canvas-controls .divider {
  width: 1px;
  height: 20px;
  background-color: var(--border-color);
  margin: 0 4px;
}

.canvas-controls .sidebar-toggle-btn {
  font-size: 11px;
  transition: transform var(--transition-normal);
}

/* Modal overlays */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 1;
  transition: opacity var(--transition-normal);
}

.modal-overlay.hidden {
  opacity: 0;
  pointer-events: none;
  display: none !important;
}

.modal-card {
  width: 100%;
  max-width: 600px;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(1);
  transition: transform var(--transition-normal);
}

.modal-overlay.hidden .modal-card {
  transform: scale(0.95);
}

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

.modal-header h2 {
  font-size: 18px;
  font-weight: 600;
  font-family: var(--font-logo);
}

.modal-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: all var(--transition-fast);
}

.modal-close:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

.modal-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: 60vh;
  overflow-y: auto;
}

.modal-info {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  background-color: rgba(59, 130, 246, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-radius: 8px;
  padding: 12px;
}

.modal-body textarea {
  min-height: 180px;
  resize: vertical;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.5;
}

.checkbox-group {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.checkbox-group input {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.checkbox-group label {
  cursor: pointer;
  user-select: none;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background-color: rgba(0, 0, 0, 0.15);
}

/* CSS Loading Animation for AI card */
.ai-typing-indicator {
  display: flex;
  gap: 4px;
  padding: 8px 0;
}

.ai-typing-indicator span {
  width: 6px;
  height: 6px;
  background-color: var(--neon-purple);
  border-radius: 50%;
  animation: typing-bounce 1.4s infinite ease-in-out both;
}

.ai-typing-indicator span:nth-child(1) {
  animation-delay: -0.32s;
}

.ai-typing-indicator span:nth-child(2) {
  animation-delay: -0.16s;
}

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

/* Animations */
@keyframes card-fade-in {
  from {
    opacity: 0;
    filter: blur(2px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

.new-card-anim {
  animation: card-fade-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Selection marquee styling */
.selection-marquee {
  position: absolute;
  border: 1px dashed var(--neon-purple);
  background-color: rgba(168, 85, 247, 0.08);
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.2);
  pointer-events: none;
  z-index: 9999;
}

/* Global Preview Popover */
.preview-popover {
  position: fixed;
  z-index: 1000;
  background-color: rgba(10, 15, 26, 0.95);
  border: 1px solid rgba(168, 85, 247, 0.4);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), 0 0 20px rgba(168, 85, 247, 0.25);
  backdrop-filter: blur(20px);
  padding: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.preview-popover.hidden {
  display: none !important;
}

.popover-content {
  flex: 1;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  padding-right: 4px;
}

/* Scrollbar inside popover */
.popover-content::-webkit-scrollbar {
  width: 6px;
}
.popover-content::-webkit-scrollbar-track {
  background: transparent;
}
.popover-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}
.popover-content::-webkit-scrollbar-thumb:hover {
  background: rgba(168, 85, 247, 0.5);
}

/* Markdown elements inside popover */
.popover-content p {
  margin-bottom: 12px;
}
.popover-content p:last-child {
  margin-bottom: 0;
}
.popover-content pre {
  background-color: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 10px;
  margin: 12px 0;
  overflow-x: auto;
}
.popover-content code {
  font-family: monospace;
  background-color: rgba(255, 255, 255, 0.08);
  padding: 2px 4px;
  border-radius: 4px;
}

/* Styles for preview trigger button inside Q&A headers */
.preview-trigger-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  transition: all var(--transition-fast);
  margin-left: auto; /* Push to the far right of the header */
}

.preview-trigger-btn:hover {
  background-color: rgba(168, 85, 247, 0.15);
  color: #fff;
  border-color: rgba(168, 85, 247, 0.3);
}

.card-question-header, .card-reply-header {
  display: flex;
  align-items: center;
  width: 100%;
}

/* Mode Toolbar */
.mode-toolbar {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  background-color: rgba(30, 41, 59, 0.7);
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  padding: 6px;
  gap: 6px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
  z-index: 100;
  transition: all var(--transition-normal);
}

.mode-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.mode-btn:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.05);
}

.mode-btn.active {
  color: #fff;
  background-color: var(--neon-purple);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.4);
}

/* Pan Mode active styling overrides */
.pan-mode-active .chat-card {
  cursor: grab !important;
}

.pan-mode-active .chat-card .card-header {
  cursor: grab !important;
}

.pan-mode-active .chat-card * {
  user-select: none;
}

/* 3D Perspective view */
.view-3d-active {
  perspective: 1200px;
  perspective-origin: 50% 50%;
}

.view-3d-active #canvas {
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out; /* minor smooth update on camera rotate */
  /* The grid plane sits at canvas Z=0. Cards on the "wave" can have negative Z,
     which placed them behind this opaque fill and made them invisible until the
     camera rotated. Drop the opaque fill in 3D (the dark body shows through) so
     recessed cards stay visible; the faint grid dots are kept. */
  background-color: transparent;
  /* The grid plane is in front (Z=0) of recessed cards and, even when
     transparent, would otherwise intercept their clicks. Ignore pointer events
     here so clicks reach the cards (which re-enable them) or fall through to the
     viewport for panning/rotation. */
  pointer-events: none;
}

.view-3d-active .svg-connections {
  display: none;
}

.view-3d-active .connections-3d {
  display: block;
}

.view-3d-active .cards-container,
.view-3d-active .connections-3d {
  transform-style: preserve-3d;
}

.view-3d-active .chat-card {
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out, box-shadow 0.2s ease;
  /* Add subtle 3D shadow */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* 3D Toggle button styles */
.canvas-controls .view-mode-btn {
  font-weight: 700;
  color: var(--neon-purple);
  transition: all var(--transition-normal);
}

.canvas-controls .view-mode-btn.active {
  background-color: var(--neon-purple);
  color: #fff;
  box-shadow: 0 0 10px var(--neon-purple);
}

.canvas-controls #card-layout-btn.active {
  background-color: var(--neon-purple);
  color: #fff;
  box-shadow: 0 0 10px var(--neon-purple);
}

/* Wide / flat card layout: cards stretch horizontally and clamp content to
   ~3 lines, so long messages read as a wide ribbon instead of a tall card. */
body.wide-card-mode {
  --card-width: 1320px; /* ~100 CJK chars per line at 13px */
}

body.wide-card-mode .card-text-display,
body.wide-card-mode .card-question-text {
  max-height: 4.8em; /* ~3 lines at line-height 1.6 */
  overflow: hidden;
  min-height: 0;
}

/* While editing, allow the textarea to show the full text. */
body.wide-card-mode .card-textarea {
  max-height: 220px;
}

body.wide-card-mode .card-image-container {
  max-height: 120px;
  overflow: hidden;
}

/* ---- Chat view: conversation rendered as a scrollable chat interface ---- */
.canvas-controls #chat-mode-btn.active {
  background-color: var(--neon-purple);
  color: #fff;
  box-shadow: 0 0 10px var(--neon-purple);
}

.chat-view {
  display: none;
  position: absolute;
  inset: 0;
  overflow-y: auto;
  background-color: var(--bg-primary);
  z-index: 4; /* above the canvas, below the controls (z-index 5) */
}

body.chat-mode .chat-view {
  display: block;
}

/* Hide canvas-only affordances while in chat view */
body.chat-mode #canvas,
body.chat-mode .mode-toolbar,
body.chat-mode #view-mode-btn,
body.chat-mode #flatten-btn,
body.chat-mode #card-layout-btn,
body.chat-mode #zoom-in-btn,
body.chat-mode #zoom-reset-btn,
body.chat-mode #zoom-out-btn {
  display: none;
}

.chat-view-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 20px 96px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chat-msg {
  display: flex;
}

.chat-msg-user {
  justify-content: flex-end;
}

.chat-msg-assistant {
  justify-content: flex-start;
}

.chat-bubble {
  max-width: 82%;
  padding: 12px 16px;
  border-radius: 14px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

.chat-msg-user .chat-bubble {
  background-color: rgba(168, 85, 247, 0.14);
  border-color: rgba(168, 85, 247, 0.3);
}

.chat-msg-meta {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.chat-msg-content {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-msg-content p {
  margin-bottom: 8px;
}

.chat-msg-content p:last-child {
  margin-bottom: 0;
}

.chat-msg-content code {
  font-family: monospace;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 2px 4px;
  border-radius: 4px;
}

.chat-msg-image {
  max-width: 100%;
  border-radius: 8px;
  margin-top: 8px;
  display: block;
}

.chat-msg-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.chat-action-btn {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.chat-action-btn:hover {
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.06);
}

.chat-action-followup {
  color: var(--neon-purple);
  border-color: rgba(168, 85, 247, 0.4);
}

.chat-action-followup:hover {
  background-color: rgba(168, 85, 247, 0.14);
  color: #fff;
}

/* Hover widget shown under an AI answer that has follow-up cards */
.chat-followup-peek {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 8px;
  border: 1px dashed rgba(168, 85, 247, 0.5);
  color: var(--neon-purple);
  background-color: rgba(168, 85, 247, 0.06);
  cursor: help;
  transition: all var(--transition-fast);
}

.chat-followup-peek:hover {
  background-color: rgba(168, 85, 247, 0.16);
}

.chat-empty {
  text-align: center;
  color: var(--text-secondary);
  padding: 60px 0;
}