/* Base Reset and Variables */
:root {
  --primary-color: #ffffff;
  --primary-light: #a78bfa;
  --secondary-color: #3b82f6;
  --success-color: #34d399;
  --warning-color: #fbbf24;
  --danger-color: #ef4444;
  --bg-dark: rgba(10, 10, 10, 0.95);
  --bg-card: rgba(20, 20, 20, 0.8);
  --bg-hover: rgba(40, 40, 40, 0.9);
  --text-primary: #e4e4e7;
  --text-secondary: #71717a;
  --border-color: rgba(255, 255, 255, 0.1);
  --border-color-light: rgba(255, 255, 255, 0.2);
  --backdrop-blur: blur(20px);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100vh;
  height: 100dvh; /* dynamic viewport: keeps chat input above mobile browser chrome */
  overflow: hidden;
  margin: 0;
  padding: 0;
  min-width: 375px;
  min-height: 400px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg-dark);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  color: var(--text-primary);
  display: flex;
  flex-direction: row;
  user-select: text;
}
/* Enhanced transparency when typing */
body.typing-mode {
  background: rgba(10, 10, 10, 0.9);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
}

/* Enhanced fade mode for better readability */
body.fade-mode {
  background: rgba(10, 10, 10, 0.9);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
}

.header {
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  -webkit-app-region: drag;
  border-right: 1px solid var(--border-color);
  width: 0;
  height: 100vh;
  flex-shrink: 0;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  padding: 12px 0;
  padding-top: 12px;
  transition: width 0.3s ease;
  overflow: hidden;
}

.header.sidebar-open {
  width: 60px;
}

.title {
  font-size: 15px;
  font-weight: 600;
  color: white;
  display: flex;
  align-items: center;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s ease, top 0.15s ease;
  user-select: none;
  position: fixed;
  left: 5px;
  top: 12px;
  z-index: 2000;
  width: 50px;
  height: 50px;
  justify-content: center;
  padding: 0;
}

.title:hover {
  background: rgba(255, 255, 255, 0.1);
}

.title::before {
  font-size: 16px;
}

.text-wrapper {
  display: none;
}

.learner-ai-group {
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}

.learner-ai-group small {
  font-size: 10px;
  margin-left: 0;
}

/* Ensure consistent spacing */
.text-wrapper > span:not(:last-child)::after {
  content: " ";
  white-space: pre;
}

.header-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  height: auto;
  -webkit-app-region: no-drag;
}

/* Platform-specific styles */
.platform-windows .window-controls {
  order: 1;
}

.platform-mac .window-controls {
  order: -1;
}

/* Maximized state styles */
.maximized {
  border-radius: 0 !important;
}

.maximized .header {
  border-radius: 0 !important;
}

.maximized .content {
  border-radius: 0 !important;
}

.maximized .chat-input-container {
  border-radius: 0 !important;
}

.content-block.file-block:hover {
  border-color: rgba(139, 92, 246, 0.5);
  background: rgba(139, 92, 246, 0.08);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.15);
}

.content-block.file-block {
  overflow: visible;
}

/* Legacy Content Block Styles */
.content-block {
  background: var(--bg-card);
  border: 1px solid var(--border-color-light);
  border-radius: 12px;
  margin: 10px 0;
  overflow: hidden;
  transition: all 0.3s ease;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: rgba(139, 92, 246, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.block-header:hover {
  background: rgba(139, 92, 246, 0.15);
}

.block-header.collapsed {
  border-bottom: none;
}

.block-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.block-icon {
  font-size: 24px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(139, 92, 246, 0.2);
  border-radius: 8px;
}

.block-details {
  flex: 1;
}

.filename {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  font-family: "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", monospace;
}

.file-block .filename {
  color: var(--text-primary);
}

.block-details h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.block-meta {
  display: flex;
  gap: 15px;
  margin-top: 4px;
  font-size: 12px;
  color: #6b7280;
}

.file-block .block-meta {
  color: var(--text-secondary);
}

.block-meta span {
  padding: 2px 8px;
  background: rgba(139, 92, 246, 0.1);
  border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, 0.2);
}

/* Linked files info */
.linked-files-info {
  margin-top: 6px;
  padding: 4px 8px;
  background: rgba(34, 197, 94, 0.1);
  border-radius: 6px;
  font-size: 11px;
  color: #10b981;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.block-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.block-btn {
  padding: 8px 12px;
  border: 1px solid rgb(255 255 255 / 20%);
  background: rgba(139, 92, 246, 0.1);
  color: #ffffff;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}

.block-btn:hover {
  background: rgba(139, 92, 246, 0.2);
  border-color: rgba(139, 92, 246, 0.5);
  transform: translateY(-1px);
}

.block-btn.primary {
  background: linear-gradient(45deg, #4facfe, #00f2fe);
  color: white;
}

.block-btn.primary:hover {
  background: linear-gradient(45deg, #3c8ece, #00c2cc);
  transform: translateY(-1px);
}

.block-btn.danger {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: var(--danger-color);
}

.block-btn.danger:hover {
  background: rgba(239, 68, 68, 0.3);
}

.collapse-indicator {
  font-size: 14px;
  color: #6b7280;
  margin-left: 8px;
  transition: transform 0.3s ease;
}

.block-header.collapsed .collapse-indicator {
  transform: rotate(-90deg);
}

.block-content {
  max-height: 500px;
  overflow: hidden;
  transition: all 0.3s ease;
  background: #f8fafc;
}

.file-block .block-content {
  background: rgba(15, 15, 15, 0.7);
}

.block-content.collapsed {
  max-height: 0;
}

.preview-content {
  padding: 20px;
}

.code-preview {
  max-height: 400px;
  overflow-y: auto;
}

.preview-content pre {
  margin: 0;
  background: #1e293b;
  color: #e2e8f0;
  padding: 20px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  overflow-x: auto;
  font-family: "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", monospace;
}

.preview-content code {
  font-family: "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", monospace;
}

/* Message Files Container */
.message-files {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid rgba(139, 92, 246, 0.2);
}

.message-files .content-block.file-block:first-child {
  margin-top: 0;
}

/* ── Workspace: chat + side preview panel ── */
/* ═══════════════════════════════════════════════════════════════════════
   Message Navigator — DeepSeek-style hover panel, vertically centred
   ═══════════════════════════════════════════════════════════════════════ */

/* Toggle pill — fixed right edge, vertically centred */
#msg-nav-toggle {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1200;
  width: 20px;
  height: 56px;
  border-radius: 6px 0 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-right: none;
  background: var(--bg-secondary, #1a1a2e);
  color: var(--text-muted, #aaa);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition:
    background 0.15s,
    color 0.15s,
    width 0.15s,
    top 0.15s ease;
}
#msg-nav-toggle:hover {
  width: 24px;
  background: rgba(167, 139, 250, 0.15);
  color: var(--primary-light, #a78bfa);
}
#msg-nav-toggle svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Floating panel — vertically centred, slides in from right on hover */
#msg-nav {
  position: fixed;
  right: 20px; /* sits just left of the toggle pill */
  top: 50%;
  transform: translateY(-50%) translateX(calc(100% + 20px));
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
  opacity: 0;
  pointer-events: none;
  z-index: 1199;
  width: 240px;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-dark, #13131f);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
#msg-nav.open {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* Header */
#msg-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
#msg-nav-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted, #666);
}
#msg-nav-close {
  display: none;
} /* no close btn — mouse-leave hides it */

/* Scrollable list */
#msg-nav-list {
  flex: 1;
  overflow-y: auto;
  padding: 15px 0 15px 24px;
  scrollbar-width: none;
}
#msg-nav-list::-webkit-scrollbar {
  display: none;
}

/* ── DeepSeek-style rows ─────────────────────────────────────────────── */

/* Row: right-aligned, label hidden until hover */
.msgnav-row {
  cursor: pointer;
  height: 30px;
  justify-content: flex-end;
  align-items: center;
  width: calc(100% - 6px);
  margin-right: 8px;
  line-height: 20px;
  display: flex;
}

/* Label: invisible by default, fades in on hover/active */
.msgnav-label {
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 12px;
  transition: color 0.2s;
  overflow: hidden;
  color: #888;
}
.msgnav-row:hover .msgnav-label {
  color: #000;
}
.msgnav-row.active .msgnav-label {
  color: #bbb;
}

/* Bar container */
.msgnav-track {
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 20px;
  display: flex;
}

/* Bar pill: 8×2px horizontal — matches DeepSeek exactly */
.msgnav-fill {
  background-color: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  flex-shrink: 0;
  width: 8px;
  height: 2px;
  transition:
    background-color 0.2s,
    width 0.15s;
}
.msgnav-row:hover .msgnav-fill {
  background-color: rgba(255, 255, 255, 0.45);
  width: 10px;
}
.msgnav-row.active .msgnav-fill {
  background-color: var(--primary-light, #a78bfa);
  width: 10px;
}

/* User messages get blue accent when active */
.msgnav-user.active .msgnav-fill {
  background-color: #60a5fa;
}
.msgnav-user.active .msgnav-label {
  color: #93c5fd;
}

#workspace {
  flex: 1;
  display: flex;
  flex-direction: row;
  min-height: 0;
  overflow: hidden;
  margin-left: 0;
  transition: margin-left 0.3s ease;
}

#workspace .container {
  flex: 1;
  min-width: 0;
  transition: flex 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Drag divider between chat and preview panel */
#preview-divider {
  display: none;
  width: 5px;
  flex: none;
  cursor: col-resize;
  background: transparent;
  position: relative;
  z-index: 10;
  transition: background 0.15s ease;
  user-select: none;
}

#preview-divider::after {
  content: "";
  position: absolute;
  inset: 0 -3px; /* widen the hit area */
}

#preview-divider:hover,
#preview-divider.dragging {
  background: rgba(90, 106, 240, 0.5);
}

#workspace.preview-active #preview-divider {
  display: block;
}

/* Side preview panel — hidden by default */
#preview-panel {
  width: 0;
  flex: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.3s ease;
  border-left: 1px solid transparent;
  background: var(--bg-dark);
}

/* When preview is active, shrink chat and expand panel */
#workspace.preview-active .container {
  flex: 0 0 42%;
  max-width: 42%;
  transition: none; /* disabled during drag — JS sets explicit widths */
}

#workspace.preview-active #preview-panel {
  flex: 1;
  width: auto;
  border-left-color: rgba(255, 255, 255, 0.08);
  transition: none;
}

/* preview-panel uses the same header/content structure */
#preview-panel .preview-header {
  border-radius: 0 !important;
}

#preview-panel .preview-content-container {
  flex: 1 !important;
  border-radius: 0 !important;
  height: 0 !important; /* let flex handle height, not calc(100vh) */
}

/* Legacy fullscreen-preview — kept only for fallback, not normally used */
.fullscreen-preview {
  display: none !important;
}

.fullscreen-preview * {
  box-sizing: border-box;
}

.preview-header {
  background: rgba(30, 30, 30, 0.95) !important;
  color: white !important;
  padding: 16px 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  position: relative !important;
  z-index: 2147483646 !important;
  flex-shrink: 0 !important;
  min-height: 60px;
  max-height: 60px;
  backdrop-filter: blur(10px);
}

.preview-title {
  font-size: 18px !important;
  font-weight: 600 !important;
  user-select: none !important;
  color: white !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Fira Code", "Monaco", "Menlo", monospace;
}

.preview-controls {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
}

.preview-btn {
  background: rgba(30, 30, 30, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
  position: relative !important;
  z-index: 2147483645 !important;
  font-family:
    system-ui,
    -apple-system,
    sans-serif !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  outline: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  backdrop-filter: blur(5px);
}

.preview-btn:hover {
  background: rgba(30, 30, 30, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.preview-btn:active {
  transform: translateY(0) !important;
}

.close-preview {
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  border-radius: 8px !important;
  color: #ef4444 !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  line-height: 1 !important;
  padding: 0 !important;
  transition: all 0.15s ease !important;
  user-select: none !important;
  flex-shrink: 0 !important;
}

.close-preview:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
  transform: scale(1.05) !important;
}

.close-preview:active {
  transform: scale(0.95) !important;
}

.preview-content-container {
  flex: 1 !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  background: #2d3748 !important;
  width: 100%;
  height: calc(100vh - 60px);
}

.preview-iframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  background: white !important;
  display: block !important;
  position: relative !important;
  max-width: 100% !important;
  max-height: 100% !important;
  transition: opacity 0.3s ease !important;
  contain: layout style paint;
}

.code-view {
  background: #1a1a1a !important;
  overflow: auto !important;
  height: 100% !important;
  width: 100% !important;
  position: relative !important;
}

.code-view pre {
  margin: 0 !important;
  padding: 20px !important;
  color: #e2e8f0 !important;
  font-family: "Courier New", "Monaco", "Menlo", monospace !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  background: transparent !important;
  border: none !important;
}

/* Enhanced Code View with VS Code-like styling */
.code-view-enhanced {
  flex: 1 !important;
  font-family: "Fira Code", "Monaco", "Menlo", "Consolas", monospace !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  overflow: auto !important;
  background: #1e1e1e !important;
  color: #d4d4d4 !important;
  position: relative !important;
  height: 100% !important;
  width: 100% !important;
}

.code-view-enhanced pre {
  margin: 0 !important;
  padding: 20px 20px 20px 80px !important;
  background: transparent !important;
  color: inherit !important;
  overflow-x: auto !important;
  min-height: 100% !important;
  position: relative !important;
}

.code-view-enhanced code {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

/* FIX - Ensure code is visible and not red */
.code-view-enhanced pre,
.code-view-enhanced code,
.code-view-enhanced {
  color: #d4d4d4 !important; /* Default VS Code text color */
  background: #1e1e1e !important;
}

/* FIX - Ensure all text in code view is visible */
.code-view-enhanced * {
  color: inherit;
}

/* FIX - Ensure tokens get their colors */
.code-view-enhanced .token {
  color: inherit !important;
}

/* FIX - Make sure code lines are visible */
.code-line {
  color: #d4d4d4 !important;
  display: block !important;
  white-space: pre !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
  counter-increment: line-number !important;
}

/* Line Numbers */
.code-view-enhanced pre::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 60px !important;
  background: #252526 !important;
  border-right: 1px solid #3e3e42 !important;
}

.code-line::before {
  content: counter(line-number) !important;
  position: absolute !important;
  left: -70px !important;
  width: 50px !important;
  text-align: right !important;
  color: #858585 !important;
  font-size: 12px !important;
  line-height: inherit !important;
  padding-right: 10px !important;
  user-select: none !important;
}

/* Code Folding Styles */
.foldable-code-container {
  padding: 20px 20px 20px 80px !important;
  font-family: "Fira Code", "Monaco", "Menlo", "Consolas", monospace !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  background: #1e1e1e !important;
  color: #d4d4d4 !important;
  min-height: 100% !important;
  counter-reset: line-number !important;
}

.foldable-block {
  margin: 0 !important;
  position: relative !important;
  border-left: 2px solid #444 !important;
  margin: 2px 0 !important;
}

.fold-header {
  cursor: pointer !important;
  user-select: none !important;
  padding: 4px 8px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-left: 3px solid #007acc !important;
  margin: 2px 0 !important;
  color: #d4d4d4 !important;
  border-radius: 4px !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.2s ease !important;
  font-size: 13px !important;
}

.fold-header:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.fold-header.collapsed {
  background: rgba(128, 128, 128, 0.1) !important;
  border-color: rgba(128, 128, 128, 0.3) !important;
  color: #9ca3af !important;
}

.fold-icon {
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  margin-right: 8px !important;
  text-align: center !important;
  transition: transform 0.2s ease !important;
  font-size: 12px !important;
  line-height: 16px !important;
  color: #608b4e !important;
  font-weight: bold !important;
}

.fold-icon.collapsed {
  transform: rotate(-90deg) !important;
}

.fold-preview {
  flex: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: #d4d4d4 !important;
}

.fold-content {
  margin-left: 20px !important;
  padding-left: 10px !important;
  border-left: 1px solid #444 !important;
  margin-top: 4px !important;
  margin-bottom: 8px !important;
  transition: all 0.3s ease !important;
}

.fold-content.collapsed {
  display: none !important;
}

.fold-content[style*="display: none"] + .fold-header {
  opacity: 0.7;
}

/* Enhanced VS Code Dark+ Theme Token Styling */
.code-view-enhanced .token.comment,
.code-view-enhanced .token.prolog,
.code-view-enhanced .token.doctype,
.code-view-enhanced .token.cdata {
  color: #6a9955 !important;
  font-style: italic !important;
}

.code-view-enhanced .token.punctuation {
  color: #d4d4d4 !important;
}

.code-view-enhanced .token.property,
.code-view-enhanced .token.tag,
.code-view-enhanced .token.constant,
.code-view-enhanced .token.symbol,
.code-view-enhanced .token.deleted {
  color: #9cdcfe !important;
}

.code-view-enhanced .token.boolean,
.code-view-enhanced .token.number {
  color: #b5cea8 !important;
}

.code-view-enhanced .token.selector,
.code-view-enhanced .token.attr-name,
.code-view-enhanced .token.string,
.code-view-enhanced .token.char,
.code-view-enhanced .token.builtin,
.code-view-enhanced .token.inserted {
  color: #ce9178 !important;
}

.code-view-enhanced .token.operator,
.code-view-enhanced .token.entity,
.code-view-enhanced .token.url,
.code-view-enhanced .language-css .token.string,
.code-view-enhanced .style .token.string {
  color: #d4d4d4 !important;
}

.code-view-enhanced .token.atrule,
.code-view-enhanced .token.attr-value,
.code-view-enhanced .token.keyword {
  color: #569cd6 !important;
  font-weight: normal !important;
}

.code-view-enhanced .token.function {
  color: #dcdcaa !important;
  font-weight: normal !important;
}

.code-view-enhanced .token.class-name {
  color: #4ec9b0 !important;
  font-weight: normal !important;
}

.code-view-enhanced .token.regex,
.code-view-enhanced .token.important {
  color: #646695 !important;
}

.code-view-enhanced .token.variable {
  color: #9cdcfe !important;
}

.code-view-enhanced .token.important,
.code-view-enhanced .token.bold {
  font-weight: bold !important;
}

.code-view-enhanced .token.italic {
  font-style: italic !important;
}

.code-view-enhanced .token.entity {
  cursor: help !important;
}

/* Language-specific highlighting */
.code-view-enhanced .language-html .token.tag {
  color: #569cd6 !important;
}

.code-view-enhanced .language-html .token.attr-name {
  color: #9cdcfe !important;
}

.code-view-enhanced .language-css .token.selector {
  color: #d7ba7d !important;
}

.code-view-enhanced .language-css .token.property {
  color: #9cdcfe !important;
}

.code-view-enhanced .language-javascript .token.function {
  color: #dcdcaa !important;
}

.code-view-enhanced .language-python .token.function {
  color: #dcdcaa !important;
}

.code-view-enhanced .language-python .token.decorator {
  color: #569cd6 !important;
}

/* Additional VS Code specific colors */
.code-view-enhanced .token.namespace {
  color: #4ec9b0 !important;
}

.code-view-enhanced .token.parameter {
  color: #9cdcfe !important;
}

.code-view-enhanced .token.interpolation {
  color: #569cd6 !important;
}

.code-view-enhanced .token.property-access {
  color: #9cdcfe !important;
}

.code-view-enhanced .token.decorator {
  color: #dcdcaa !important;
}

.code-view-enhanced .token.method,
.code-view-enhanced .token.function-call {
  color: #dcdcaa !important;
}

.code-view-enhanced .token.control,
.code-view-enhanced .token.directive,
.code-view-enhanced .token.unit {
  color: #c586c0 !important;
}

/* FIX - Prevent language colors from overriding token colors */
.code-view-enhanced .language-html,
.code-view-enhanced .language-css,
.code-view-enhanced .language-javascript,
.code-view-enhanced .language-typescript,
.code-view-enhanced .language-json,
.code-view-enhanced .language-python,
.code-view-enhanced .language-markdown,
.code-view-enhanced .language-sql,
.code-view-enhanced .language-php,
.code-view-enhanced .language-java,
.code-view-enhanced .language-c,
.code-view-enhanced .language-cpp,
.code-view-enhanced .language-csharp,
.code-view-enhanced .language-go,
.code-view-enhanced .language-rust,
.code-view-enhanced .language-bash {
  color: inherit !important;
}

/* body.preview-open — no longer needed (panel is inline, not overlay) */
body.preview-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
}

/* File Type Specific Styles */
.file-block[data-type="web"] {
  border: 1px solid;
  border-image: linear-gradient(45deg, rgba(79, 172, 254, 0.3), rgba(0, 242, 254, 0.3)) 1;
  background: rgba(5, 5, 5, 0.1);
}

.file-block[data-type="web"] .block-header {
  background: rgba(5, 5, 5, 0.1);
  border-bottom: 1px solid;
  border-image: linear-gradient(45deg, rgba(79, 172, 254, 0.2), rgba(0, 242, 254, 0.2)) 1;
}

.file-block[data-type="code"] {
  border: 1px solid;
  border-image: linear-gradient(45deg, rgba(79, 172, 254, 0.3), rgba(0, 242, 254, 0.3)) 1;
  background: rgba(5, 5, 5, 0.1);
}

.file-block[data-type="code"] .block-header {
  background: rgba(5, 5, 5, 0.1);
  border-bottom: 1px solid;
  border-image: linear-gradient(45deg, rgba(79, 172, 254, 0.2), rgba(0, 242, 254, 0.2)) 1;
}

.file-block[data-type="data"] {
  border: 1px solid;
  border-image: linear-gradient(45deg, rgba(79, 172, 254, 0.3), rgba(0, 242, 254, 0.3)) 1;
  background: rgba(5, 5, 5, 0.1);
}

.file-block[data-type="data"] .block-header {
  background: rgba(5, 5, 5, 0.1);
  border-bottom: 1px solid;
  border-image: linear-gradient(45deg, rgba(79, 172, 254, 0.2), rgba(0, 242, 254, 0.2)) 1;
}

.file-block-xlsx,
.file-block-xls,
.file-block-csv {
  border-color: rgba(16, 185, 129, 0.4) !important;
}

.file-block-xlsx .block-header,
.file-block-xls .block-header,
.file-block-csv .block-header {
  background: rgba(16, 185, 129, 0.12) !important;
  border-bottom-color: rgba(16, 185, 129, 0.25) !important;
}

.file-block-xlsx .block-content,
.file-block-xls .block-content,
.file-block-csv .block-content {
  max-height: none;
  overflow: auto;
}

.file-block[data-type="document"] {
  border: 1px solid;
  border-image: linear-gradient(45deg, rgba(79, 172, 254, 0.3), rgba(0, 242, 254, 0.3)) 1;
  background: rgba(5, 5, 5, 0.1);
}

.file-block[data-type="document"] .block-header {
  background: rgba(5, 5, 5, 0.1);
  border-bottom: 1px solid;
  border-image: linear-gradient(45deg, rgba(79, 172, 254, 0.2), rgba(0, 242, 254, 0.2)) 1;
}

.history-menu-button {
  padding: 6px;
  background: none;
  border: none;
  border-radius: 55px;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
}

.history-menu-button:hover {
  background: rgba(251, 251, 251, 0.3);
  transform: translateY(-1px);
}

.history-menu-button:hover .chat-bubble-icon {
  fill: linear-gradient(45deg, #4facfe, #00f2fe); /* Slightly darker blue on hover */
}

.ai-dropdown-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 12px;
}

.ai-dropdown-button:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.ai-dropdown-button.active {
  background: rgba(59, 130, 246, 0.3);
  border-color: rgba(59, 130, 246, 0.5);
}

.model-name {
  font-weight: 500;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chevron {
  font-size: 10px;
  transition: transform 0.2s ease;
}

.ai-dropdown-button.active .chevron {
  transform: rotate(180deg);
}

.sign-in-button {
  padding: 8px 16px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sign-in-button:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* AI Dropdown Menu */
.ai-dropdown-container {
  position: relative;
}

.ai-dropdown-menu {
  position: absolute;
  bottom: 100%; /* ← CHANGED: Opens above button */
  right: 0;
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px 8px 4px 4px; /* ← CHANGED: Rounded top corners */
  min-width: 250px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px); /* ← CHANGED: Positive for upward animation */
  transition: all 0.3s ease;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3); /* ← CHANGED: Negative Y for upward shadow */
  margin-bottom: 8px; /* ← ADDED: Spacing from button */
}

.ai-dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ai-category {
  padding: 8px 0;
}

.ai-category-title {
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 600;
  color: #71717a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ai-model-item {
  padding: 10px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.ai-model-item > span:first-child {
  flex: 1;
}

.ai-model-item .check {
  margin-left: auto;
}

.ai-model-item:hover {
  background: rgba(59, 130, 246, 0.1);
}

.ai-model-item.selected {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

.check {
  opacity: 0;
  color: #10b981;
  font-weight: bold;
}

.ai-model-item.selected .check {
  opacity: 1;
}

.model-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid rgba(59, 130, 246, 0.3);
  flex-shrink: 0;
}

.ai-model-item:hover .model-badge {
  background: rgba(59, 130, 246, 0.3);
}

.ai-model-item.selected .model-badge {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.3);
}

.dropdown-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 8px 0;
}

.debug-button,
.settings-button {
  padding: 10px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 13px;
  color: #a1a1aa;
}

.debug-button:hover,
.settings-button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #e4e4e7;
}

/* History Panel Styles - CONSOLIDATED */
.history-panel {
  position: fixed !important;
  left: -350px !important;
  top: 0 !important;
  width: 350px !important;
  height: 100vh !important;
  background: rgba(10, 10, 10, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: left 0.3s ease !important;
  z-index: 1000 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.history-panel.show {
  left: 60px !important;
  pointer-events: auto !important;
}

body.sidebar-open .history-panel.show {
  left: 60px !important;
}

.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  background: rgba(20, 20, 20, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.history-title {
  font-size: 16px;
  font-weight: 600;
  color: #e4e4e7;
}

.close-history {
  background: none;
  border: none;
  color: #71717a;
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.close-history:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #e4e4e7;
}

.history-search {
  padding: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.search-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 10px 12px;
  color: #e4e4e7;
  font-size: 14px;
  outline: none;
  transition: all 0.2s ease;
}

/* Search field wrapper: magnifier icon left, clear button right */
.search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.search-field-icon {
  position: absolute;
  left: 10px;
  color: #71717a;
  pointer-events: none;
}

.history-search .search-input {
  padding-left: 32px;
  padding-right: 30px;
}

.search-clear-btn {
  position: absolute;
  right: 7px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #a1a1aa;
  cursor: pointer;
  transition: all 0.15s ease;
}

.search-input-wrap.has-text .search-clear-btn {
  display: flex;
}

.search-clear-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #e4e4e7;
}

/* Claude-style search results */
/* Search modal: centered Claude-style popup */
.search-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
}

.search-modal-overlay.show {
  display: flex;
}

.search-modal {
  width: min(660px, 92vw);
  margin-top: 9vh;
  background: rgba(18, 18, 18, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.search-modal .history-search {
  padding: 14px 16px;
}

.search-modal .search-input {
  font-size: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  background: transparent;
  border-color: transparent;
}

.search-results-list {
  max-height: 62vh;
  overflow-y: auto;
  padding: 8px;
}

.search-results-list .topic-item {
  margin: 0;
}

.search-results-list .topic-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  margin: 0;
  background: transparent;
  border-radius: 8px;
}

.search-results-list .topic-header:hover {
  background: rgba(255, 255, 255, 0.06);
}

.search-result-icon {
  flex: none;
  width: 32px;
  height: 32px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a1a1aa;
}

.search-result-main {
  flex: 1;
  min-width: 0;
}

.search-result-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.search-result-title {
  font-size: 14px;
  font-weight: 600;
  color: #e4e4e7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-date {
  flex: none;
  font-size: 12px;
  color: #71717a;
}

.search-result-snippet {
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.35;
  color: #a1a1aa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-snippet mark {
  background: transparent;
  color: #e4e4e7;
  font-weight: 700;
}

.search-input::placeholder {
  color: #71717a;
}

.history-content {
  position: relative; /* anchor for the pull-to-refresh indicator */
  height: calc(100vh - 140px);
  overflow-y: auto;
  padding: 15px;
}

.history-actions {
  padding: 10px 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: flex-end;
}

/* Topic and Subtopic Styles - MERGED */
.topic-group {
  margin-bottom: 20px;
}

.topic-header {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  background: rgba(139, 92, 246, 0.1);
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  margin-bottom: 8px;
  transition: all 0.2s;
  user-select: none;
}

.topic-header:hover {
  background: rgba(139, 92, 246, 0.2);
}

.topic-header.expanded {
  background: rgba(139, 92, 246, 0.2);
  margin-bottom: 4px;
}

.topic-header .chevron {
  font-size: 10px;
  transition: transform 0.2s;
  color: #a78bfa;
}

.topic-header.expanded .chevron {
  transform: rotate(90deg);
}

.topic-title {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
}

.topic-count {
  font-size: 11px;
  color: var(--text-secondary);
}

.subtopic-list {
  padding-left: 20px;
  display: none;
  overflow: hidden;
  transition: all 0.3s ease;
}

.subtopic-list.show {
  display: block;
}

.subtopic-item {
  padding: 10px 16px;
  margin: 4px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.subtopic-item:hover {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.3);
  transform: translateX(4px);
}

.subtopic-content {
  flex: 1;
  overflow: hidden;
}

.subtopic-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.subtopic-title {
  font-weight: 500;
  color: #e4e4e7;
  font-size: 13px;
}

.subtopic-count {
  font-size: 11px;
  padding: 2px 6px;
  background: rgba(139, 92, 246, 0.2);
  border-radius: 10px;
  color: #a78bfa;
}

.subtopic-meta {
  font-size: 11px;
  color: #71717a;
}

.delete-subtopic-btn {
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
  font-size: 16px;
  padding: 4px 8px;
  border-radius: 4px;
}

.subtopic-item:hover .delete-subtopic-btn {
  opacity: 0.6;
}

.delete-subtopic-btn:hover {
  opacity: 1 !important;
  background: rgba(239, 68, 68, 0.2);
}

/* Delete conversation button */
.delete-conv-btn {
  background: none;
  border: none;
  color: #71717a;
  cursor: pointer;
  font-size: 16px;
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
  position: absolute;
  right: 8px;
  top: 8px;
  line-height: 1;
}
.topic-item:hover .delete-conv-btn {
  opacity: 0.6;
}
.delete-conv-btn:hover {
  opacity: 1 !important;
  background: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.topic-header.no-subtopics {
  cursor: pointer;
}

.topic-header.no-subtopics:hover {
  background: rgba(139, 92, 246, 0.15);
}

.subtopic-list.single-topic {
  display: none;
}

.subtopic-item.single {
  text-align: center;
  font-size: 12px;
  color: #71717a;
  padding: 8px;
}

/* Empty state for history */
.empty-state {
  text-align: center;
  color: #52525b;
  font-size: 14px;
  margin-top: 50px;
  padding: 20px;
}

/* Main Content Styles */
.container {
  flex: 1; /* Takes remaining space between header and input */
  display: flex;
  flex-direction: column;
  min-height: 0; /* Critical for flexbox to work */
  /*overflow: hidden; MIGHT NEED THIS */
}

.content {
  flex: 1; /* Takes remaining space in container */
  padding: 15px;
  width: 100%;
  overflow-y: auto; /* ONLY this scrolls */
  overflow-x: hidden;
  min-height: 0; /* Critical for flexbox */
  display: flex;
  flex-direction: column;
  position: relative; /* anchor for the pull-to-refresh indicator */
}

/* Pull-to-refresh indicator — slides down from the top of .content */
.ptr-indicator {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 50;
  transform: translateY(-100%);
  margin-left: -90px;
  width: 180px;
  padding: 8px 12px;
  background: rgb(54, 73, 74);
  color: #fff;
  font-size: 13px;
  text-align: center;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.ptr-indicator.ptr-animate {
  transition: transform 0.25s ease;
}

.ptr-indicator.ptr-armed {
  background: rgb(70, 95, 96);
}

.web-notice {
  background: rgba(255, 165, 0, 0.2);
  border: 1px solid rgba(255, 165, 0, 0.3);
  color: var(--warning-color);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 11px;
  margin-bottom: 15px;
  text-align: center;
}

/* Message Styles */
.message {
  margin-bottom: 20px;
  width: 100%;
  height: fit-content;
  flex-shrink: 0; /* never squeeze messages in the scroll column — a streaming
                     message has overflow:hidden, which zeroes its flex min-height
                     and lets it shrink below content (clips live widgets) */
  padding: 16px;
  border-radius: 12px;
  animation: slideIn 0.3s ease-out;
  position: relative;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ai-response {
}

.ai-message-controls {
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.button-row {
  display: flex;
  flex-direction: row;
  justify-content: end;
  gap: 8px; /* Optional: adds space between buttons */
}

.ai-message-controls button {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}

.ai-message-controls button:hover {
  background-color: rgba(255, 255, 255, 0.1); /* Optional hover effect */
}

.ai-warning {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 8px;
}

.ai-text {
  font-size: 7px;
}

.message-wrapper {
  background: rgba(255, 255, 255, 0.1);
  border-left: 4px solid #ffffff;
  border-radius: 10px;
  padding: 10px;
}

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

.message-type {
  font-size: 12px;
  font-weight: 600;
  color: #4facfe;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.model-label {
  color: #a855f7;
}

.message-content {
  font-size: 16px;
  line-height: 1.6;
  color: #e4e4e7;
}

/* Hide message-files container if it contains no real file-blocks (only code-blocks) */
.message-files:not(:has(.file-block)) {
  display: none !important;
}

.message-content strong {
  color: var(--primary-color);
  display: block;
  margin-top: 8px;
  margin-bottom: 4px;
}

.table-wrapper {
  margin: 12px 0;
  border: 1px solid rgba(100, 100, 100, 0.3);
  border-radius: 6px;
  overflow: hidden;
}

.table-controls {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  background-color: rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(100, 100, 100, 0.2);
}

.table-copy-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid rgba(100, 150, 200, 0.4);
  border-radius: 4px;
  color: inherit;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s ease;
}

.table-copy-btn:hover {
  background-color: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.6);
  color: #3b82f6;
}

.message-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 0;
}

.message-content table th,
.message-content table td {
  border-bottom: 1px solid #444;
  padding: 8px 12px;
  text-align: left;
  position: relative;
}

.message-content table th {
  border-bottom: 2px solid #666;
  background-color: rgba(59, 130, 246, 0.1);
}

.message-content table td.title-cell {
  text-align: center;
  font-weight: 500;
  background-color: rgba(59, 130, 246, 0.08);
  border-bottom: 1px solid #555;
}

.message-content table td {
  transition: background-color 0.15s ease;
}

.message-content table td:hover {
  background-color: rgba(59, 130, 246, 0.15);
}

.table-cell-copy-btn {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  background: rgba(59, 130, 246, 0.8);
  border: none;
  border-radius: 3px;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  opacity: 0;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.message-content table td:hover .table-cell-copy-btn,
.message-content table th:hover .table-cell-copy-btn {
  opacity: 1;
}

.table-cell-copy-btn:hover {
  background: rgba(59, 130, 246, 1);
}

.hoverable-segment {
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.hoverable-segment:hover {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

/* Message Footer and Edit Controls */
.message-footer {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-top: 10px;
  min-height: 24px;
  gap: 5px;
}

/* Replace the existing .message-edit-btn styles with these */

.message-edit-btn {
  opacity: 0.5; /* Semi-visible by default */
  transition: opacity 0.2s ease;
  background: none;
  border: none;
  color: #71717a;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.message:hover .message-edit-btn {
  opacity: 1; /* Fully visible on hover */
}

.message-edit-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #e4e4e7;
}
/* Version Navigation */
.version-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #71717a;
  user-select: none;
}

.version-nav-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #a1a1aa;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  line-height: 1;
}

.version-nav-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: #e4e4e7;
}

.version-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.version-indicator {
  font-family: monospace;
  color: #a1a1aa;
}

/* Edit Mode Styles */
.message-edit-container {
  width: 100%;
}

.message-edit-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 10px 14px;
  color: #e4e4e7;
  font-size: 14px;
  font-family: inherit;
  resize: none;
  outline: none;
  transition: all 0.2s ease;
  min-height: 60px;
  max-height: 300px;
  overflow-y: auto;
}

.message-edit-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.edit-save-btn,
.edit-cancel-btn {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.edit-save-btn {
  background: linear-gradient(45deg, #4facfe, #00f2fe);
  border: none;
  border-radius: 8px;
  color: white;
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.edit-save-btn svg {
  width: 18px;
  height: 18px;
}

.edit-save-btn:hover {
  background: linear-gradient(45deg, #3c8ece, #00c2cc);
  transform: translateY(-1px);
}

.edit-cancel-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e4e4e7;
  padding: 6px;
}

.edit-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.edit-attachments-notice {
  font-size: 12px;
  color: #71717a;
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(245, 158, 11, 0.1);
  border-radius: 6px;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

/* Hidden messages (for edit history) */
.message[style*="display: none"] {
  animation: none;
}
/* Thinking Animation */
.thinking {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
}

.think-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(167, 139, 250, 0.25);
  border-top-color: var(--primary-light, #a78bfa);
  border-radius: 50%;
  animation: thinkSpin 0.7s linear infinite;
  flex-shrink: 0;
}

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

.think-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--primary-light, #a78bfa);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Chat Input Styles */
.chat-input-container {
  padding: 0px 12px 12px 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  position: relative;
  width: 100%;
  flex-shrink: 0;
  width: 100%;
  max-height: 450px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

/* Adjust chat input wrapper for Context+ bubble */
.chat-input-wrapper {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  max-width: 750px;
  width: 100%;
  min-height: 56px;
  /* NEW: Chat box styling moved to wrapper */
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 12px 0px 12px 16px;
  transition: all 0.2s ease;
}
/* Simple CSS for thumbs button transitions */
.thumbs-up-btn svg,
.thumbs-down-btn svg {
  transition: fill 0.2s ease;
}

.opus-badge {
  position: absolute;
  top: -25px;
  right: 10px;
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 10;
}

.opus-badge.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.chat-input {
  flex: 1;
  background: transparent; /* CHANGED */
  border: none; /* CHANGED */
  padding: 0; /* CHANGED */
  padding-right: 15px;
  margin-bottom: 45px;
  color: #e4e4e7;
  font-size: 14px;
  font-family: inherit;
  resize: none;
  outline: none;
  transition: none; /* CHANGED */
  min-height: 44px;
  max-height: 300px; /* match uiManager.js desktop auto-resize cap — was 120px, which clipped text with overflow hidden */
  overflow-y: auto;
  line-height: 1.4;
}

.chat-input::placeholder {
  color: #71717a;
}

.chat-input-wrapper.drag-over {
  border-color: rgba(167, 139, 250, 0.5);
  background: rgba(167, 139, 250, 0.05);
}

.send-button {
  background: linear-gradient(45deg, #4facfe, #00f2fe);
  border: none;
  border-radius: 8px;
  color: white;
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.stop-icon {
  display: none;
}

.spinner {
  display: none;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s linear infinite;
}

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

/* Processing state */
.send-button.processing .send-icon {
  display: none;
}

.send-button.processing .stop-icon {
  display: block;
}

.send-button.processing .spinner {
  display: block;
}

.send-button:hover {
  background: linear-gradient(45deg, #3c8ece, #00c2cc);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.send-button svg {
  width: 18px;
  height: 18px;
}

.large-content-previews::-webkit-scrollbar {
  height: 4px;
}

.large-content-previews::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
}

.large-content-previews::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

.large-content-previews::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.large-content-preview:hover,
.image-content-preview:hover {
  border-color: rgba(167, 139, 250, 0.4);
  background: rgba(167, 139, 250, 0.08);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.preview-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
  text-align: center;
  position: relative;
}

.preview-icon-large {
  font-size: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  margin-bottom: 6px;
}

.preview-filename {
  font-size: 11px;
  font-weight: 500;
  color: #e4e4e7;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.preview-stats {
  font-size: 10px;
  color: #71717a;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-item {
  margin-right: 12px;
  font-size: 9px;
  color: #94a3b8;
  line-height: 1.2;
}

.preview-type {
  font-size: 8px;
  padding: 2px 6px;
  background: rgba(139, 92, 246, 0.2);
  border-radius: 4px;
  color: #a855f7;
  font-weight: 500;
  margin-bottom: 4px;
}

.preview-actions {
  display: flex;
  gap: 4px;
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.large-content-preview:hover .preview-actions,
.image-content-preview:hover .preview-actions {
  opacity: 1;
}

.preview-image-container {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.typing-preview {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  animation: slideIn 0.15s ease-out;
}

.typing-preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #f59e0b;
}

.convert-btn {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 10px;
  color: #f59e0b;
}

.convert-btn:hover {
  background: rgba(245, 158, 11, 0.3);
}

/* Code Folding Loading State */
.code-view-enhanced.loading {
  opacity: 0.5 !important;
  pointer-events: none !important;
}

.code-view-enhanced.loading::after {
  content: "Loading syntax highlighting..." !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: rgba(0, 0, 0, 0.8) !important;
  color: #ffffff !important;
  padding: 12px 24px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
}

.copy-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}
.copy-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* ── Per-code-block copy button ─────────────────────────────────────── */
.message-content pre {
  position: relative;
}
.pre-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: black;
  color: black;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition:
    opacity 0.15s,
    background 0.15s,
    color 0.15s;
  z-index: 10;
}
.message-content pre:hover .pre-copy-btn {
  opacity: 1;
}
.pre-copy-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.pre-copy-btn.copied {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.4);
  color: #10b981;
  opacity: 1;
}

/* Copy Button Success State */
.preview-btn.copied {
  background: rgba(34, 197, 94, 0.2) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
  color: #10b981 !important;
}

/* Scrollbar Styling for Code View */
.code-view-enhanced::-webkit-scrollbar {
  width: 14px !important;
  height: 14px !important;
}

.code-view-enhanced::-webkit-scrollbar-thumb {
  background: rgba(121, 121, 121, 0.4) !important;
  border: 3px solid #1e1e1e !important;
  border-radius: 7px !important;
}

.code-view-enhanced::-webkit-scrollbar-thumb:hover {
  background: rgba(121, 121, 121, 0.7) !important;
}

.code-view-enhanced::-webkit-scrollbar-track {
  background: #1e1e1e !important;
}

.code-view-enhanced::-webkit-scrollbar-corner {
  background: #1e1e1e !important;
}

/* Selection styling for code view */
.code-view-enhanced ::selection {
  background: rgba(0, 122, 204, 0.3) !important;
}

.code-view-enhanced ::-moz-selection {
  background: rgba(0, 122, 204, 0.3) !important;
}

/* Animation for fold/unfold */
@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 1000px;
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    max-height: 1000px;
  }
  to {
    opacity: 0;
    max-height: 0;
  }
}

.fold-content:not(.collapsed) {
  animation: slideDown 0.3s ease-out !important;
}

.btn-icon {
  font-size: 14px !important;
}

/* Utility Styles */
.resize-handle {
  width: 16px;
  height: 16px;
  -webkit-app-region: no-drag;
  cursor: nwse-resize;
  opacity: 0.5;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  border-radius: 50%;
}

/* Scrollbar Styles */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
  /* Mobile body/layout fixes */
  html, body {
    height: 100vh !important;
    height: 100dvh !important; /* dynamic viewport: keeps chat input above mobile browser chrome */
    overflow: hidden !important;
  }

  body {
    flex-direction: column !important;
  }

  /* Mobile header adjustments - minimal sidebar, buttons moved to top-actions */
  .header {
    padding-top: 12px !important;
    height: 100vh !important;
    height: 100dvh !important;
    width: 0 !important;
    padding-bottom: 8px !important;
  }

  .header.sidebar-open {
    width: 60px !important;
  }

  .title {
    position: fixed !important;
    top: calc(5px + env(safe-area-inset-top)) !important; /* keep clear of the iOS status bar */
    left: 5px !important;
    width: 45px !important;
    height: 45px !important;
    padding: 0 !important;
    z-index: 2000 !important;
  }

  .header-controls {
    margin-top: 4px !important;
    gap: 4px !important;
  }

  /* Workspace takes remaining height */
  #workspace {
    flex: 1 !important;
    min-height: 0 !important;
  }

  .content {
    padding: 4px 4px 2px 4px !important;
    max-width: 100% !important;
  }

  .welcome-features-wrapper {
    max-width: 100% !important;
    padding: 10px 8px 0 !important;
  }

  .welcome-features {
    gap: 6px !important;
  }

  .feature-card {
    padding: 10px 6px !important;
  }

  .feature-label {
    font-size: 12px !important;
  }

  .feature-desc {
    font-size: 10px !important;
  }

  .center-ring {
    width: 56px !important;
    height: 56px !important;
  }

  #msg-nav-toggle {
    width: 16px !important;
    height: 44px !important;
  }

  .message {
    margin-bottom: 8px !important;
    padding: 8px !important;
  }

  .chat-input-container {
    padding: 6px 12px 8px 12px !important;
    max-height: none !important;
    flex-shrink: 0 !important;
  }

  .chat-input-wrapper {
    max-width: 100% !important;
    padding: 10px 12px !important;
  }

  .chat-input {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100% !important;
    margin-bottom: 30px !important;
    max-height: 160px !important; /* match the taller mobile auto-resize cap in chatInputManager.js */
  }

  input, textarea, select {
    font-size: 16px !important;
  }

  /* On mobile, preview panel stacks below chat (full-width) */
  #workspace {
    flex-direction: column !important;
  }

  #workspace.preview-active .container {
    flex: none !important;
    max-width: 100% !important;
    height: 40% !important;
  }

  #workspace.preview-active #preview-panel {
    flex: 1 !important;
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  #preview-divider {
    display: none !important;
  }

  .history-panel {
    width: 100%;
    left: 0;
    transform: translateX(-100%);
  }

  .ai-dropdown-menu {
    min-width: 200px;
  }

  .message {
    padding: 12px;
  }

  .large-content-preview,
  .image-content-preview {
    width: 100px;
    height: 100px;
  }

  .block-header {
    padding: 12px 15px;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  .block-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .block-meta {
    flex-direction: column;
    gap: 5px;
  }

  .preview-header {
    padding: 12px 16px !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
  }

  .preview-controls {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .code-view-enhanced {
    font-size: 12px !important;
  }

  .code-view-enhanced pre {
    padding: 16px 16px 16px 60px !important;
  }

  .foldable-code-container {
    padding: 16px 16px 16px 60px !important;
    font-size: 12px !important;
  }

  .code-line::before {
    left: -50px !important;
    width: 40px !important;
    font-size: 11px !important;
  }

  .content-block {
    margin: 8px 0;
  }

  .block-content {
    padding: 12px;
  }

  .preview-content {
    font-size: 11px;
    max-height: 300px;
  }

  .fullscreen-preview .preview-header {
    padding: 10px 15px !important;
  }

  .preview-btn {
    padding: 6px 8px !important;
    font-size: 11px !important;
  }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  body {
    background: rgba(0, 0, 0, 0.95);
  }

  .btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
  }

  .status-dot {
    border: 1px solid #fff;
  }
}

/* FIXED: Disable ALL transitions during window operations */
body.window-moving,
body.window-moving * {
  transition: none !important;
  animation: none !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

/* FIXED: Simplified maximized state */
.maximized {
  border-radius: 0 !important;
  transition: none !important;
}

.maximized .header {
  border-radius: 0 !important;
  transition: none !important;
}

.maximized .content {
  border-radius: 0 !important;
  transition: none !important;
}

.executable-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 12px;
  font-size: 11px;
  color: #ffc107;
  font-weight: 500;
  margin-left: 8px;
}

.executable-badge:hover {
  background: rgba(255, 193, 7, 0.2);
  border-color: rgba(255, 193, 7, 0.5);
}
/* Top action buttons bar (home, new chat, search, settings) */
.top-actions {
  position: fixed;
  left: 62px;
  top: 12px;
  z-index: 2001;
  display: flex;
  align-items: center;
  gap: 4px;
  -webkit-app-region: no-drag;
}

.top-action-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  background: #ffffff;
  color: #555;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  text-decoration: none;
  font-size: 16px;
  line-height: 1;
}

.top-action-btn:hover {
  background: #f5f5f5;
  color: #1a1a1a;
  border-color: #d0d0d0;
}

.top-action-btn.active {
  background: #1a1a1a;
  color: #ffffff;
  border-color: #1a1a1a;
}

/* On mobile: move to top-right, search hidden by default */
@media (max-width: 768px) {
  .top-actions {
    left: auto;
    right: 12px;
    top: 10px;
  }
  .top-action-btn#searchToggleButton {
    display: none;
  }
  .top-actions.menu-open .top-action-btn#searchToggleButton {
    display: flex;
  }
}

.ai_chat_box_row {
  position: absolute;
  bottom: 8px;
  left: 0px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  pointer-events: none; /* pass clicks through to textarea below */
}

.ai_chat_box_row .left-controls {
  pointer-events: auto;
}

/* Add this to your ai.css file for smooth input box resizing */

#chatInput {
  transition: height 0.15s ease-out !important;
  resize: none !important;
  min-height: 40px !important;
  max-height: 300px !important; /* match uiManager.js desktop cap; mobile overrides to 160px below */
  line-height: 1.4 !important;
}

/* Custom scrollbar for when text exceeds max height */
#chatInput::-webkit-scrollbar {
  width: 6px;
}

#chatInput::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

#chatInput::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

#chatInput::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}
/* Minimize animation states */
body.minimizing {
  animation: minimizeToControl 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  pointer-events: none;
}

body.restoring {
  animation: restoreFromControl 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes minimizeToControl {
  0% {
    transform: scale(1) translate(0, 0);
    opacity: 1;
  }
  60% {
    transform: scale(0.6) translate(200px, 300px);
    opacity: 0.8;
  }
  100% {
    transform: scale(0.1) translate(400px, 400px);
    opacity: 0;
  }
}

@keyframes restoreFromControl {
  0% {
    transform: scale(0.1) translate(400px, 400px);
    opacity: 0;
  }
  40% {
    transform: scale(0.6) translate(200px, 300px);
    opacity: 0.8;
  }
  100% {
    transform: scale(1) translate(0, 0);
    opacity: 1;
  }
}

/* Minimize notification */
.minimize-notification {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(59, 130, 246, 0.9);
  color: white;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.minimize-notification.show {
  opacity: 1;
}

.minimizing {
  animation: minimizeAnimation 0.3s ease-out forwards !important;
  pointer-events: none !important;
}

.restoring {
  animation: restoreAnimation 0.3s ease-out forwards !important;
}

@keyframes minimizeAnimation {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.8) translateY(-20px);
  }
}

@keyframes restoreAnimation {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
/* Add this CSS to your ai.css file for the subtle system notifications */

.system-notification {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 15px 0;
  opacity: 1;
  transition: opacity 0.3s ease;
  animation: systemNotificationSlide 0.3s ease-out;
}

.system-notification-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.system-notification-content::before,
.system-notification-content::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(113, 113, 122, 0.3), rgba(113, 113, 122, 0.3), transparent);
}

.system-notification-content::before {
  margin-right: 15px;
}

.system-notification-content::after {
  margin-left: 15px;
}

.system-notification-text {
  font-size: 12px;
  color: #71717a;
  background: var(--bg-dark);
  padding: 4px 12px;
  border-radius: 12px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid rgba(113, 113, 122, 0.2);
  backdrop-filter: blur(10px);
  text-align: center;
  min-width: fit-content;
}

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

/* Mobile responsive */
@media (max-width: 768px) {
  .system-notification-content::before,
  .system-notification-content::after {
    display: none;
  }

  .system-notification-text {
    font-size: 11px;
    padding: 3px 10px;
  }
}

/* Add these styles to your existing ai.css file */

/* Maximized state styles */
body.maximized {
  border-radius: 0 !important;
}

body.maximized .header {
  border-radius: 0 !important;
}

body.maximized .container {
  border-radius: 0 !important;
}

body.maximized .content {
  border-radius: 0 !important;
}

/* Enhanced window control button hover states */
.window-control-btn {
  transition: all 0.2s ease;
  position: relative;
}

.window-control-btn:hover {
  transform: scale(1.1);
}

/* Mac-style controls */
.minimize-btn {
  background: #fbbf24;
}

.maximize-btn {
  background: #10b981;
}

.close-btn {
  background: #ef4444;
}

.window-control-btn:hover::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
}

/* Smooth transitions for maximize/restore */
.header {
  transition: border-radius 0.2s ease;
}

.content {
  transition: border-radius 0.2s ease;
}

/* Enhanced Window State Management CSS */

/* AI Window States */
body.minimizing {
  opacity: 0.3 !important;
  transition: opacity 0.3s ease-out !important;
  pointer-events: none !important;
}

body.restoring {
  opacity: 1 !important;
  transition: opacity 0.4s ease-in !important;
  transform: scale(1) !important;
  animation: restoreWindow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

@keyframes restoreWindow {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.02) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Control Panel AI Button States */
.ai-btn {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.8), rgba(147, 51, 234, 0.8));
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
  padding: 6px 12px;
  font-size: 11px;
  display: none;
  position: relative;
  border: none;
  border-radius: 20px;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.ai-btn:hover {
  background: linear-gradient(135deg, rgba(168, 85, 247, 1), rgba(147, 51, 234, 1));
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(168, 85, 247, 0.4);
}

.ai-btn.show {
  display: block !important;
  animation: slideInFromRight 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ai-btn.receiving {
  animation: buttonReceiving 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Button animations */
@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(50px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes buttonReceiving {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(0.8) translateX(-10px);
  }
  60% {
    transform: scale(1.1) translateX(5px);
  }
  100% {
    transform: scale(1) translateX(0);
  }
}

/* Notification indicator on AI button */
.ai-btn::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  border: 2px solid rgba(10, 10, 10, 0.9);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ai-btn.has-notification::after {
  opacity: 1;
  animation: notificationPulse 2s infinite;
}

@keyframes notificationPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.7;
  }
}

/* Button loading state for restore operations */
.ai-btn.loading {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(29, 78, 216, 0.8));
  animation: buttonLoading 1.5s infinite;
}

@keyframes buttonLoading {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}

/* Button pressed state */
.ai-btn:active {
  transform: scale(0.95) translateY(0);
  transition: transform 0.1s ease;
}

/* Enhanced button hover effects */
.ai-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.ai-btn:hover::before {
  left: 100%;
}

/* Success ripple effect for successful operations */
.success-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 2px solid #10b981;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.success-ripple.animate {
  animation: successRipple 0.6s ease-out;
}

@keyframes successRipple {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.3);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2);
  }
}

/* Minimize notification */
.minimize-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 10000;
  opacity: 0;
  transform: translateX(100px);
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.minimize-notification.show {
  opacity: 1;
  transform: translateX(0);
}

/* Force visibility utilities */
.force-visible {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.force-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Debug indicators */
.debug-state-indicator {
  position: fixed;
  bottom: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.8);
  color: #00ff00;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 10px;
  z-index: 9999;
  opacity: 0.7;
}

body.restoring {
  border-color: rgba(168, 85, 247, 0.5);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
}

/* Control panel specific enhancements */
.control-panel {
  position: relative;
  z-index: 1000;
}

/* Ensure buttons are always clickable */
.ai-btn,
.btn {
  position: relative;
  z-index: 10;
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* Emergency restore button (for debugging) */
.emergency-restore {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 99999 !important;
  background: #ff4444 !important;
  color: white !important;
  border: none !important;
  padding: 20px !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  display: none !important;
}

.emergency-restore.show {
  display: block !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .ai-btn {
    padding: 4px 8px;
    font-size: 10px;
  }

  .minimize-notification {
    top: 10px;
    right: 10px;
    padding: 8px 16px;
    font-size: 12px;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .ai-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.6);
  }

  .ai-btn.has-notification::after {
    border: 2px solid #000;
    background: #ff0000;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .ai-btn,
  .success-ripple,
  .minimize-notification,
  body.restoring,
  body.minimizing {
    animation: none !important;
    transition: none !important;
  }
}

/* Print styles (hide interactive elements) */
@media print {
  .ai-btn,
  .minimize-notification,
  .debug-state-indicator {
    display: none !important;
  }
}
/* Enhanced Window Controls - Replace the existing window control styles with these */

/* Window Controls */
.window-controls {
  display: flex;
  align-items: center;
  height: 100%;
  -webkit-app-region: no-drag;
}

.window-control-btn {
  width: 50px;
  height: 51px;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
  position: relative;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Segoe UI Symbol", sans-serif;
  font-size: 15px;
  color: #ffffff;
}

.window-control-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.minimize-btn::before {
  content: "—";
  font-size: 12px;
  font-weight: normal;
  line-height: 1;
}

.maximize-btn::before {
  font-size: 10px;
  font-weight: normal;
  line-height: 1;
}

.close-btn::before {
  content: "";
  font-size: 10px;
  font-weight: normal;
  line-height: 1;
}

.close-btn:hover {
  background: #c42b1c;
  color: #ffffff;
}

/* Platform-specific styles */
.platform-windows .window-controls {
  order: 1;
}

.platform-mac .window-controls {
  order: -1;
}

.platform-windows .minimize-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.platform-windows .minimize-btn::before {
  content: "";
  font-size: 12px;
}

.platform-windows .maximize-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.platform-windows .close-btn:hover {
  background: rgba(239, 68, 68, 0.8);
}

.platform-windows .close-btn::before {
  content: "";
  font-size: 15px;
}

/* Hide Mac-style controls on Windows */
.platform-windows .window-control-btn:hover::after {
  display: none;
}

/* Maximized state styles */
.maximized {
  border-radius: 0 !important;
}

.maximized .header {
  border-radius: 0 !important;
}

.maximized .content {
  border-radius: 0 !important;
}

.window-control-btn:hover {
  transform: scale(1.1);
}

.window-control-btn:hover::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
}

/* Minimize animation states */
body.minimizing {
  animation: minimizeToControl 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  pointer-events: none;
}

body.restoring {
  animation: restoreFromControl 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes minimizeToControl {
  0% {
    transform: scale(1) translate(0, 0);
    opacity: 1;
  }
  60% {
    transform: scale(0.6) translate(200px, 300px);
    opacity: 0.8;
  }
  100% {
    transform: scale(0.1) translate(400px, 400px);
    opacity: 0;
  }
}

@keyframes restoreFromControl {
  0% {
    transform: scale(0.1) translate(400px, 400px);
    opacity: 0;
  }
  40% {
    transform: scale(0.6) translate(200px, 300px);
    opacity: 0.8;
  }
  100% {
    transform: scale(1) translate(0, 0);
    opacity: 1;
  }
}

/* Even more transparent when window is not focused */
body.inactive {
  background: rgba(10, 10, 10, 0.3);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}

body.fade-mode .header {
  background: rgba(20, 20, 20, 0.4);
}

body.inactive .header {
  background: rgba(20, 20, 20, 0.3);
}

/* Activity indicator */
.activity-indicator {
  position: absolute;
  top: 10px;
  right: 50px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.activity-indicator.active {
  opacity: 1;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.2);
  }
}

/* Minimize notification */
.minimize-notification {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(59, 130, 246, 0.9);
  color: white;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.minimize-notification.show {
  opacity: 1;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Streaming Message Styles */
.message.streaming {
  position: relative;
  overflow: hidden;
}

.message.streaming::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(45deg, #3c8ece, #00c2cc);
  animation: streamingProgress 2s linear infinite;
}

.display_none {
  display: none !important;
}

@keyframes streamingProgress {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.streaming-indicator {
  font-size: 12px;
  color: #a78bfa;
  animation: pulse 1.5s ease-in-out infinite;
}

/* Add to your styles */
.file-block.streaming {
  opacity: 0.9;
}

.file-block.streaming .block-actions {
  pointer-events: AUTO;
}

.streaming-preview {
  position: relative;
  min-height: 60px;
}

.streaming-preview .loading-dots {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
}

.streaming-preview .loading-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a78bfa;
  animation: pulse 1.4s infinite ease-in-out both;
}

.streaming-preview .loading-dots span:nth-child(1) {
  animation-delay: -0.32s;
}

.streaming-preview .loading-dots span:nth-child(2) {
  animation-delay: -0.16s;
}

.streaming-code {
  margin-top: 30px;
  opacity: 0.7;
}

@keyframes pulse {
  0%,
  80%,
  100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.streaming-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: rgba(139, 92, 246, 0.2);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 12px;
  font-size: 11px;
  color: #a78bfa;
  font-weight: 500;
  animation: pulse 1.5s ease-in-out infinite;
}

/* Streaming Code Animation */
.streaming-code {
  position: relative;
}

.streaming-code::after {
  content: "▊";
  animation: blink 1s step-end infinite;
  color: #a78bfa;
  font-weight: bold;
}

@keyframes blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}

/* Smooth text appearance */
.message-content.streaming-text {
  overflow: hidden;
}

.message-content.streaming-text > * {
  animation: fadeInWord 0.3s ease-out;
}

@keyframes fadeInWord {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Progress indicators for Context+ */
.context-memory-indicator.streaming {
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.8) 0%, rgba(167, 139, 250, 0.9) 50%, rgba(139, 92, 246, 0.8) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
}

/* File progress bar */
.file-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #8b5cf6, #a78bfa);
  border-radius: 0 0 12px 0;
  transition: width 0.3s ease;
  width: var(--progress, 0%);
}

/* Disable interactions during streaming */
.block-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(139, 92, 246, 0.1);
}

/* Add subtle pulsing to file icons during generation */
.file-block.streaming .block-icon {
  animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}

.screenshot-preview {
  padding: 10px;
}

.screenshot-preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  color: #666;
}

.screenshot-preview-image {
  max-height: 200px;
  overflow: hidden;
  border-radius: 4px;
}

.screenshot-preview-image img {
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
  display: block;
}

/* NEW: Enhanced Chat Input Layout */
.chat-input-section {
  position: relative;
  flex: 1;
}

.chat-controls {
  position: absolute;
  right: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.chat-controls > * {
  pointer-events: auto;
}

.send-button.has-attachment::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  border: 2px solid var(--bg-dark);
}

.chat-input-wrapper.pasting {
  border-color: rgba(139, 92, 246, 0.5) !important;
  background: rgba(139, 92, 246, 0.05) !important;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2) !important;
}

/* NEW: Document Preview Styles */
.document-preview-container {
  background: rgba(139, 92, 246, 0.05);
  border: 2px solid rgba(139, 92, 246, 0.3);
  border-radius: 12px;
  overflow: hidden;
  animation: slideIn 0.3s ease-out;
  transition: all 0.3s ease;
}

.document-preview-container:hover {
  border-color: rgba(139, 92, 246, 0.5);
  background: rgba(139, 92, 246, 0.08);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.15);
}

/* Attachment Enlargement Styles - ADD THESE TO ai.css */

/* Fullscreen preview overlay for attachments */
.attachment-fullscreen-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 auto;
  z-index: 10000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(17, 17, 24, 0.72) !important;
  backdrop-filter: blur(3px) !important;
  animation: fadeIn 0.15s ease-out !important;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Preview content container */
.fullscreen-preview-content {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  max-width: 85vw !important;
  max-height: 85vh !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45) !important;
}

/* Header bar: filename + meta + close */
.fullscreen-file-info {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: #ffffff !important;
  color: #111827 !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.fullscreen-file-name {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.fullscreen-file-meta {
  flex-shrink: 0 !important;
  font-weight: 400 !important;
  font-size: 12.5px !important;
  color: #6b7280 !important;
}

/* Close button: quiet x inside the header */
.fullscreen-close-btn {
  margin-left: auto !important;
  flex-shrink: 0 !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #6b7280 !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.fullscreen-close-btn:hover {
  background: #f3f4f6 !important;
  color: #111827 !important;
}

.fullscreen-close-btn svg {
  width: 14px !important;
  height: 14px !important;
}

/* Image preview */
.fullscreen-image-preview {
  display: block !important;
  max-width: 100% !important;
  max-height: calc(85vh - 56px) !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 auto !important;
  padding: 12px !important;
  box-sizing: border-box !important;
}

/* Text/code preview */
.fullscreen-text-preview {
  padding: 16px 20px !important;
  background: #f8f9fa !important;
  color: #1f2937 !important;
  max-height: calc(85vh - 56px) !important;
  overflow: auto !important;
  font-family: "Consolas", "Monaco", "Courier New", monospace !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
}

/* Generic file preview */
.fullscreen-generic-preview {
  padding: 48px 40px !important;
  text-align: center !important;
  background: #ffffff !important;
  min-height: 260px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.fullscreen-generic-preview .file-icon {
  margin-bottom: 16px !important;
  opacity: 0.55 !important;
}

.fullscreen-generic-preview .file-icon svg {
  width: 48px !important;
  height: 48px !important;
}

.fullscreen-generic-preview .file-details {
  font-size: 14px !important;
  color: #6b7280 !important;
  line-height: 1.7 !important;
}

.fullscreen-generic-preview .file-details .file-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  margin-bottom: 6px !important;
}

/* Make attachment previews clickable with hover hint */
.attachment-preview {
  cursor: pointer !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
  border-radius: 8px !important;
  position: relative !important;
  overflow: hidden !important;
}

.attachment-preview:hover::after {
  opacity: 1 !important;
}

/* UPDATED: Consistent Attachment Preview Sizing */
.attachment-previews {
  display: none;
  flex-direction: row;
  gap: 15px;
  margin-bottom: 15px;
  max-height: 280px;
  overflow-x: auto;
  overflow-y: hidden;
  margin-left: 15px;
  max-width: 750px;
  padding-top: 20px;
  width: 100%;
  margin-right: 15px;
}

.attachment-previews:empty {
  display: none;
}

#edit-target-indicator {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto 8px;
  background: linear-gradient(135deg, #f5f0ff 0%, #eef2ff 50%, #f0f7ff 100%);
  border: 1px solid rgba(90, 106, 240, 0.2);
  border-radius: 12px;
  font-size: 13px;
  color: #444;
  position: relative;
  box-shadow: 0 2px 12px rgba(90, 106, 240, 0.06);
  transition: all 0.2s ease;
  box-sizing: border-box;
}
#edit-target-indicator:hover {
  border-color: rgba(90, 106, 240, 0.35);
  box-shadow: 0 4px 20px rgba(90, 106, 240, 0.1);
}
#edit-target-indicator::before {
  content: '✦ Edit target';
  position: absolute;
  top: -9px;
  left: 14px;
  font-size: 10px;
  font-weight: 600;
  color: #5a6af0;
  background: #fff;
  padding: 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-radius: 3px;
}
#edit-target-indicator .edit-target-label {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  flex: 1;
}
#edit-target-indicator .edit-target-label::before {
  content: '↩';
  font-size: 14px;
  color: #5a6af0;
  opacity: 0.7;
}
#edit-target-indicator .edit-target-label strong {
  color: #1a1a1a;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
#edit-target-indicator .edit-target-label .reply-arrow {
  display: none;
}
#edit-target-indicator .edit-target-cancel {
  background: rgba(0, 0, 0, 0.04);
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: #888;
  padding: 4px 8px;
  border-radius: 6px;
  margin-left: auto;
  transition: all 0.15s;
  flex-shrink: 0;
}
#edit-target-indicator .edit-target-cancel:hover {
  background: rgba(217, 48, 37, 0.1);
  color: #d93025;
}

.script-run-output-container {
  display: none !important;
}

/* FIXED: Universal attachment sizing - ALL types same size */
.attachment-item,
.screenshot-preview-container,
.large-content-preview,
.image-content-preview,
.content-preview,
.image-preview,
.generic-preview {
  width: 120px !important;
  height: 120px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 3px;
  left: 12px;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  font-size: 10px;
}

/* UPDATED: Enhanced hover effects for all attachment types */
.attachment-item:hover,
.screenshot-preview-container:hover,
.large-content-preview:hover,
.image-content-preview:hover {
  border-color: rgba(139, 92, 246, 0.4);
  background: rgba(139, 92, 246, 0.08);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
}

/* FIXED: Image attachment preview - compact size */
.attachment-item.image .attachment-content,
.image-preview .attachment-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* FIXED: Content attachment preview - same compact size */
.attachment-item.large_content .attachment-content,
.content-preview .attachment-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.attachment-content.img {
  width: 120px !important;
  height: 120px !important;
}

/* UPDATED: Compact content preview styling */
.attachment-item.large_content pre,
.content-preview pre {
  font-size: 8px !important; /* INCREASED from 10px */
  background: rgba(30, 30, 30, 0.8);
  padding: 8px !important; /* INCREASED from 6px */
  border-radius: 4px;
  overflow: hidden;
  margin: 0;
  flex: 1;
  line-height: 1.4 !important; /* IMPROVED readability */
  max-height: 160px; /* INCREASED from 100px */
}

/* UPDATED: Remove button - consistent positioning for all types - HIDDEN BY DEFAULT */
.remove-attachment,
.remove-screenshot-btn {
  position: absolute !important;
  top: -12px !important; /* INCREASED negative space */
  right: -12px !important; /* INCREASED negative space */
  width: 26px !important; /* SLIGHTLY LARGER */
  height: 26px !important; /* SLIGHTLY LARGER */
  border-radius: 50% !important;
  background: #ff4444 !important;
  color: white !important;
  border: 3px solid white !important; /* THICKER border for visibility */
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: bold !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important; /* STRONGER shadow */
  z-index: 1002 !important; /* HIGHER z-index */
  line-height: 1 !important;
  margin: 0 !important;
  /* NEW: Hidden by default */
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.2s ease !important;
}

.copy-attachment,
.copy-screenshot-btn {
  position: absolute !important;
  top: -12px !important; /* INCREASED negative space */
  left: -12px !important; /* INCREASED negative space */
  width: 26px !important; /* SLIGHTLY LARGER */
  height: 26px !important; /* SLIGHTLY LARGER */
  border-radius: 50% !important;
  background: white !important;
  color: black !important;
  border: 3px solid white !important; /* THICKER border for visibility */
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: bold !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important; /* STRONGER shadow */
  z-index: 1002 !important; /* HIGHER z-index */
  line-height: 1 !important;
  margin: 0 !important;
  /* NEW: Hidden by default */
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.2s ease !important;
}

/* NEW: Show remove button only on attachment item hover */
.attachment-item:hover .remove-attachment,
.screenshot-preview-container:hover .remove-screenshot-btn,
.large-content-preview:hover .remove-attachment,
.image-content-preview:hover .remove-attachment,
.attachment-item:hover .copy-attachment,
.screenshot-preview-container:hover .copy-screenshot-btn,
.large-content-preview:hover .copy-attachment,
.image-content-preview:hover .copy-attachment {
  opacity: 1 !important;
  visibility: visible !important;
}

.remove-attachment:hover,
.remove-screenshot-btn:hover {
  background: #dc2626 !important;
  transform: scale(1.1) !important;
}

.copy-attachment:hover,
.copy-screenshot-btn:hover {
  transform: scale(1.1) !important;
}

/* UPDATED: View full button - compact positioning */
.view-full-btn {
  position: absolute !important;
  bottom: 4px !important;
  right: 4px !important;
  padding: 2px 6px !important;
  background: rgba(0, 0, 0, 0.7) !important;
  color: white !important;
  border: none !important;
  border-radius: 3px !important;
  font-size: 9px !important; /* Smaller font */
  cursor: pointer !important;
  z-index: 10 !important;
}

/* Add horizontal scrollbar styling */
.attachment-previews::-webkit-scrollbar {
  height: 4px;
}

.attachment-previews::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
}

.attachment-previews::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
} /* RESPONSIVE: Smaller sizes on mobile */
@media (max-width: 768px) {
  .attachment-item,
  .screenshot-preview-container,
  .large-content-preview,
  .image-content-preview,
  .content-preview,
  .image-preview,
  .generic-preview {
    width: 100px !important;
    height: 100px !important;
  }

  .remove-attachment,
  .remove-screenshot-btn {
    width: 24px !important; /* INCREASED size */
    height: 24px !important;
    top: -12px !important; /* ADDED proper positioning */
    right: -12px !important;
    font-size: 13px !important; /* INCREASED font */
  }

  .copy-attachment {
    width: 24px !important; /* INCREASED size */
    height: 24px !important;
    top: -12px !important; /* ADDED proper positioning */
    left: -12px !important;
    font-size: 13px !important; /* INCREASED font */
  }

  #chatInput {
    max-height: 160px !important; /* match mobile auto-resize cap in uiManager.js / chatInputManager.js */
  }
}

@media (max-width: 400px) {
  .attachment-item,
  .screenshot-preview-container,
  .large-content-preview,
  .image-content-preview,
  .content-preview,
  .image-preview,
  .generic-preview {
    width: 70px !important;
    height: 70px !important;
  }
  #chatInput {
    max-height: 160px !important; /* match mobile auto-resize cap in uiManager.js / chatInputManager.js */
  }
}

/* Context+ Toggle Styles - Neutral Default with Blue Active */
.context-plus-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  background: rgba(156, 163, 175, 0.1);
  border: 1px solid rgba(156, 163, 175, 0.3);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
  position: relative;
  margin: 0 8px;
  min-width: fit-content;
  height: 36px;
  font-size: 13px;
  color: #9ca3af;
  white-space: nowrap;
}

.context-plus-toggle:hover {
  background: rgba(156, 163, 175, 0.2);
  border-color: rgba(156, 163, 175, 0.5);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(156, 163, 175, 0.2);
}

.context-plus-toggle.active {
  background: rgba(79, 172, 254, 0.2);
  border-color: rgba(79, 172, 254, 0.5);
  color: #4facfe;
  box-shadow: 0 0 0 2px rgba(79, 172, 254, 0.2);
}

.context-plus-icon {
  font-size: 16px;
  display: flex;
  align-items: center;
  transition: transform 0.3s ease;
}

.context-plus-toggle.active .context-plus-icon {
  transform: scale(1.1);
}

.context-plus-label {
  font-weight: 500;
  letter-spacing: 0.3px;
}

/* Context+ Loading Animation */
.context-plus-toggle.loading .context-plus-icon {
  animation: contextPulse 1.5s ease-in-out infinite;
}

@keyframes contextPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
}

/* Context+ Memory Indicator */
.context-memory-indicator {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(139, 92, 246, 0.9);
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.context-memory-indicator.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-5px);
}

/* Context+ Tooltip */
.context-plus-toggle::before {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-5px);
  background: rgba(30, 30, 30, 0.95);
  color: #e4e4e7;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 1000;
}

.context-plus-toggle:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-10px);
}

/* Attachment Button - Neutral Default with Blue Hover */
.attachment-button {
  background: rgba(156, 163, 175, 0.1);
  border: 1px solid rgba(156, 163, 175, 0.3);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #9ca3af;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
}

.attachment-button:hover {
  background: rgba(79, 172, 254, 0.2);
  border-color: rgba(79, 172, 254, 0.5);
  color: #4facfe;
  transform: translateY(-1px);
}

.attachment-button:active {
  transform: translateY(0);
}

.attachment-icon {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.attachment-input {
  display: none;
}

.left-controls {
  display: flex;
  align-items: center;
  position: relative; /* anchor for #attachmentMenu */
}

.view-full-btn {
  padding: 4px 10px !important;
  background: rgba(0, 0, 0, 0.8) !important;
  color: white !important;
  border: none !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  transition: background 0.2s ease !important;
}

.view-full-btn:hover {
  background: rgba(0, 0, 0, 0.9) !important;
}

.preview-btn.view-btn {
  padding: 6px 12px !important;
  font-size: 13px !important;
  font-weight: bold !important;
  min-width: 80px !important;
}
.view-full-btn {
  padding: 4px 10px !important;
  background: rgba(0, 0, 0, 0.8) !important;
  color: white !important;
  border: none !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  transition: background 0.2s ease !important;
}

.view-full-btn:hover {
  background: rgba(0, 0, 0, 0.9) !important;
}

.preview-btn.view-btn {
  padding: 6px 12px !important;
  font-size: 13px !important;
  font-weight: bold !important;
  min-width: 80px !important;
}
/* Live Preview Modal Styles */
.live-preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.live-preview-container {
  background: #1e1e1e;
  border-radius: 12px;
  width: 90%;
  height: 85%;
  max-width: 1400px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.live-preview-header {
  background: #2d2d2d;
  padding: 15px 20px;
  border-radius: 12px 12px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #3e3e3e;
}

.preview-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
}

.preview-icon {
  font-size: 16px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.preview-label {
  background: #dc2626;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  animation: pulse 2s infinite;
}

.preview-filename {
  font-size: 16px;
  font-weight: 500;
}

.preview-status {
  font-size: 14px;
  color: #ef4444;
  margin-left: 10px;
}

.preview-actions {
  display: flex;
  gap: 10px;
}

.preview-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.preview-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.preview-btn.close {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.3);
}

.preview-btn.close:hover {
  background: rgba(239, 68, 68, 0.3);
}

.live-preview-content,
.live-code-content {
  flex: 1;
  overflow: hidden;
  position: relative;
  background: #ffffff;
  border-radius: 0 0 12px 12px;
}

.live-code-content {
  background: #1e1e1e;
  overflow: auto;
}

.live-preview-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: white;
}

.live-code-pre {
  margin: 0;
  height: 100%;
  background: #1e1e1e;
  overflow: auto;
}

.live-code-pre code {
  display: block;
  padding: 20px;
  font-family: "Consolas", "Monaco", "Courier New", monospace;
  font-size: 14px;
  line-height: 1.5;
  color: #d4d4d4;
}

/* Enhanced button states during streaming */
.file-block.streaming .live-preview-btn {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
  animation: liveGlow 2s infinite;
}

@keyframes liveGlow {
  0%,
  100% {
    box-shadow: 0 0 5px rgba(239, 68, 68, 0.3);
  }
  50% {
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
  }
}

.file-block.streaming .live-preview-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.6);
}

/* Streaming indicator in iframe */
.streaming-indicator {
  position: fixed;
  top: 10px;
  right: 10px;
  background: rgba(255, 0, 0, 0.1);
  color: #dc2626;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 0, 0, 0.2);
}

/* Loading animation for code blocks during streaming */
.streaming-code::after {
  content: "|";
  animation: blink 1s infinite;
  color: #ef4444;
  font-weight: bold;
}

@keyframes blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .live-preview-container {
    width: 95%;
    height: 90%;
  }

  .preview-actions {
    flex-wrap: wrap;
  }

  .preview-btn {
    padding: 6px 12px;
    font-size: 12px;
  }
}
.welcome-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  gap: 24px;
}

.welcome-header h1 {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #f5f5f7;
  margin: 0;
}

/* ── Feature cards with center circle ── */

.welcome-features-wrapper {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 20px 24px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.welcome-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
}

.feature-card {
  background: #181a2b;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 20px 14px;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: center;
}

.feature-card:hover {
  background: #1e2035;
  border-color: rgba(255,255,255,0.1);
  transform: translateY(-1px);
}

.feature-card:active {
  transform: translateY(0);
}

.feature-icon {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-icon svg {
  width: 20px;
  height: 20px;
  stroke: #fff;
  stroke-width: 1.5;
  fill: none;
}

.feature-label {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 3px;
}

.feature-desc {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,0.5);
  line-height: 1.3;
}

/* ── Center ring cut into all four cards ── */

.center-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  z-index: 5;
  cursor: pointer;
  transition: all 0.25s ease;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.center-ring:hover {
  background: rgba(255,255,255,0.15);
  transform: translate(-50%, -50%) scale(1.1);
}

.center-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0.5;
}

.center-icon svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
  stroke-width: 1.5;
  fill: none;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6));
}
.message.stopped {
  border-left: 3px solid #ff6b6b;
  opacity: 0.9;
}

.message-stopped {
  color: #666;
  font-style: italic;
  margin-top: 10px;
  padding: 8px;
  background: #f5f5f5;
  border-radius: 4px;
  border-left: 3px solid #ff6b6b;
}

.file-block.stopped {
  border-left: 3px solid #ff6b6b;
}

.file-block.stopped .streaming-badge {
  background: #ff6b6b !important;
  color: white !important;
}

.send-button.stop-mode {
  background: #ffffff !important;
  color: rgb(0, 0, 0) !important;
}

.send-button.stop-mode:hover {
  background: #d3d3d3 !important;
}
.update-notification {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(5px);
}

.update-notification.hidden {
  display: none;
}

.update-content {
  background: var(--bg-primary);
  border-radius: 12px;
  padding: 20px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

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

.update-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.2em;
}

.update-body {
  margin-bottom: 20px;
}

.release-notes {
  background: var(--bg-secondary);
  padding: 10px;
  border-radius: 6px;
  margin: 10px 0;
  font-size: 0.9em;
  max-height: 150px;
  overflow-y: auto;
}

.download-section,
.install-section,
.restart-section {
  margin: 15px 0;
}

.progress-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4caf50, #45a049);
  border-radius: 4px;
  width: 0%;
  transition: width 0.3s ease;
}

.progress-fill.installing {
  background: linear-gradient(90deg, #2196f3, #1976d2);
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

.download-stats {
  font-size: 0.8em;
  color: var(--text-secondary);
  text-align: center;
}

.update-footer {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.hidden {
  display: none !important;
}

/* ── Clarify card ── */
.clarify-card {
  background: var(--bg-card);
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: 12px;
  padding: 18px 20px;
  max-width: 580px;
  margin: 0 0 20px 0;
  animation: slideIn 0.3s ease-out;
}
.clarify-progress {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--primary-light);
  margin-bottom: 16px;
}
.clarify-question {
  margin-bottom: 20px;
}
.clarify-question p {
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 10px;
  font-weight: 500;
}
.option-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.option-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-hover);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  width: 100%;
}
.option-btn:hover {
  border-color: var(--primary-light);
  background: rgba(167, 139, 250, 0.1);
}
.option-btn.selected {
  border-color: var(--primary-light);
  background: rgba(167, 139, 250, 0.15);
  color: #fff;
}
.option-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  font-weight: 600;
}
.option-btn.selected .option-num {
  background: var(--primary-light);
}

.option-btn-wrapper {
  display: flex;
  align-items: stretch;
  gap: 4px;
  width: 100%;
}

.option-btn-wrapper .option-btn {
  flex: 1;
  margin: 0;
}

.option-help-btn {
  padding: 8px 10px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
}

.option-help-btn:hover {
  border-color: var(--primary-light);
  color: var(--primary-light);
  background: rgba(167, 139, 250, 0.08);
}

/* Option Explanation Modal */
.option-explain-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.2s ease-out;
}

.option-explain-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
}

.option-explain-bubble {
  position: relative;
  z-index: 10001;
  background: var(--bg-card);
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: 12px;
  padding: 0;
  max-width: 500px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease-out;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.option-explain-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.option-explain-header strong {
  color: var(--primary-light);
  font-size: 14px;
}

.option-explain-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}

.option-explain-close:hover {
  color: var(--text-primary);
  transform: scale(1.1);
}

.option-explain-content {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
}

.explain-loading {
  color: var(--text-secondary);
  font-style: italic;
}

.explain-text {
  color: var(--text-primary);
}

.explain-error {
  color: var(--danger-color);
  font-style: italic;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.other-input {
  display: none;
  margin-top: 6px;
}
.other-input.visible {
  display: block;
}
.other-input input {
  width: 100%;
  background: var(--bg-hover);
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: 6px;
  color: var(--text-primary);
  padding: 7px 10px;
  font-size: 13px;
  outline: none;
}
.other-input input:focus {
  border-color: var(--primary-light);
}
.other-input-hint {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 6px;
  padding: 6px 8px;
  background: rgba(167, 139, 250, 0.06);
  border-radius: 5px;
  border-left: 2px solid rgba(167, 139, 250, 0.3);
}
.other-input-hint-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  width: 100%;
  margin-bottom: 2px;
}
.other-input-hint-item {
  font-size: 11px;
  color: var(--text-secondary, #aaa);
  white-space: nowrap;
}
.clarify-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
}
.btn-submit {
  padding: 8px 20px;
  background: var(--primary-light);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.btn-submit:hover {
  opacity: 0.85;
}
.btn-skip {
  padding: 8px 16px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-skip:hover {
  color: var(--text-primary);
  border-color: var(--border-color-light);
}
.btn-dismiss {
  margin-left: auto;
  padding: 8px 16px;
  background: transparent;
  color: var(--danger-color);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-dismiss:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: var(--danger-color);
}
.btn-back {
  padding: 8px 14px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-back:hover {
  color: var(--text-primary);
  border-color: var(--border-color-light);
}
.clarify-type-hint {
  display: block;
  font-size: 11px;
  color: var(--primary-light);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
  min-height: 16px;
}

/* ── Upgrade card (limit reached, tied to chat box) ── */
.limit-upgrade-card {
  font-family: "Inter", -apple-system, sans-serif;
  position: relative;
  max-width: 420px;
  margin: 8px 0 12px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  font-size: 13px;
  color: var(--text-primary);
}
.limit-upgrade-card .limit-upgrade-title {
  font-weight: 600;
  margin-bottom: 10px;
  padding-right: 24px;
}
.limit-upgrade-card .limit-upgrade-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  opacity: 0.8;
}
.limit-upgrade-card .limit-upgrade-reset {
  font-size: 12px;
  opacity: 0.6;
  margin: 2px 0 6px;
}
.limit-upgrade-card .limit-upgrade-copy {
  margin: 8px 0 12px;
  line-height: 1.45;
}
.limit-upgrade-card .limit-upgrade-actions {
  display: flex;
  gap: 8px;
}
.limit-upgrade-card .limit-upgrade-btn {
  flex: 1;
  text-align: center;
  text-decoration: none;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.limit-upgrade-card .limit-upgrade-usage {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.limit-upgrade-card .limit-upgrade-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  transition: background 0.15s, opacity 0.15s;
}
.limit-upgrade-card .limit-upgrade-close:hover { opacity: 1; }
.limit-upgrade-card .limit-upgrade-btn:hover { opacity: .85; }
.limit-upgrade-card .limit-upgrade-close:hover { background: #e8e8e8; }
/* ── Rank (drag-to-reorder) ── */
.rank-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rank-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--bg-hover);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 13px;
  cursor: grab;
  transition:
    background 0.15s,
    border-color 0.15s,
    opacity 0.15s;
  user-select: none;
}
.rank-item:active {
  cursor: grabbing;
}
.rank-item.dragging {
  opacity: 0.4;
}
.rank-item.drag-over {
  border-color: var(--primary-light);
  background: rgba(167, 139, 250, 0.12);
}
.rank-handle {
  font-size: 16px;
  color: var(--text-muted, var(--text-secondary));
  flex-shrink: 0;
  line-height: 1;
}
.rank-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary-light);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.rank-label {
  flex: 1;
}

/* ── Hierarchical questions (mindmap, tree, radial) ── */
.hierarchical-label {
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 12px;
  font-weight: 600;
}

.hierarchical-summary {
  font-size: 12px;
  color: var(--text-primary);
  padding: 8px 12px;
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 6px;
  margin-bottom: 12px;
  margin-top: 6px;
}

.hierarchical-back-btn {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  margin-bottom: 12px;
  transition: all 0.15s;
}

.hierarchical-back-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-color-light);
  background: var(--bg-hover);
}

/* ── Radial/Bubble Style ── */
.hierarchical-radial {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hierarchical-mains-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.hierarchical-subs-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hierarchical-option {
  padding: 10px 14px;
  background: var(--bg-hover);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  font-weight: 500;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hierarchical-option:hover {
  border-color: var(--primary-light);
  background: rgba(167, 139, 250, 0.12);
}

.hierarchical-option.selected {
  border-color: var(--primary-light);
  background: rgba(167, 139, 250, 0.2);
  color: #fff;
}

/* ── Tree Style ── */
.hierarchical-tree {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tree-node {
  border-left: 2px solid rgba(167, 139, 250, 0.2);
  padding-left: 12px;
}

.tree-main-btn {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-hover);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.tree-main-btn:hover {
  border-color: var(--primary-light);
  background: rgba(167, 139, 250, 0.08);
}

.tree-main-btn.has-selections {
  border-color: var(--primary-light);
  background: rgba(167, 139, 250, 0.12);
}

.tree-expand {
  display: inline-block;
  font-size: 11px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.tree-subs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding-left: 12px;
  border-left: 2px solid rgba(167, 139, 250, 0.15);
}

.tree-sub-btn {
  padding: 8px 12px;
  background: transparent;
  border: 1px solid rgba(167, 139, 250, 0.25);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}

.tree-sub-btn:hover {
  border-color: var(--primary-light);
  background: rgba(167, 139, 250, 0.1);
}

.tree-sub-btn.selected {
  border-color: var(--primary-light);
  background: rgba(167, 139, 250, 0.15);
  color: #fff;
  font-weight: 600;
}

/* ── Mindmap Style ── */
.hierarchical-mindmap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mindmap-mains {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
}

.mindmap-main-bubble {
  padding: 16px 12px;
  aspect-ratio: 1;
  background: var(--bg-hover);
  border: 2px solid var(--border-color);
  border-radius: 50%;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
  min-height: 100px;
}

.mindmap-main-bubble:hover {
  border-color: var(--primary-light);
  background: rgba(167, 139, 250, 0.15);
  transform: scale(1.05);
}

.mindmap-main-bubble.selected {
  border-color: var(--primary-light);
  background: rgba(167, 139, 250, 0.2);
  color: #fff;
}

.mindmap-main-bubble span {
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.mindmap-center-label {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-light);
  padding: 12px 0;
  border-bottom: 2px solid rgba(167, 139, 250, 0.2);
  margin-bottom: 8px;
}

.mindmap-branches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
}

.mindmap-branch {
  padding: 12px 10px;
  background: var(--bg-hover);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  font-weight: 500;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mindmap-branch:hover {
  border-color: var(--primary-light);
  background: rgba(167, 139, 250, 0.12);
}

.mindmap-branch.selected {
  border-color: var(--primary-light);
  background: rgba(167, 139, 250, 0.2);
  color: #fff;
}

/* ── File version bar ── */
.file-version-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--bg-hover);
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
}
.version-bar-label {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-right: 2px;
}
.version-pill {
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.version-pill:hover {
  border-color: var(--primary-light);
  color: var(--primary-light);
}
.version-pill.active {
  background: var(--primary-light);
  border-color: var(--primary-light);
  color: #fff;
}
.btn-diff-toggle {
  margin-left: auto;
  padding: 2px 10px;
  font-size: 11px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.btn-diff-toggle:hover {
  border-color: var(--primary-light);
  color: var(--primary-light);
}

/* ── Diff view ── */
.diff-view {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  line-height: 1.55;
  background: var(--bg-secondary, var(--bg-hover));
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
  max-height: 340px;
  overflow-y: auto;
}
.diff-line {
  padding: 1px 14px;
  white-space: pre;
}
.diff-added {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
}
.diff-removed {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}
.diff-context {
  color: var(--text-secondary);
}
.diff-separator {
  padding: 2px 14px;
  color: var(--text-muted, var(--text-secondary));
  font-size: 11px;
  background: var(--bg-hover);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

/* ── Brain tool badges ─────────────────────────────────────────────────────── */
.brain-tool-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 4px;
}
.brain-tool-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-family: monospace;
  white-space: nowrap;
}
.brain-tool-reading,
.brain-tool-writing {
  background: rgba(124, 106, 247, 0.15);
  border: 1px solid rgba(124, 106, 247, 0.35);
  color: #a78bfa;
}
.brain-tool-done {
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.3);
  color: #34d399;
}
.brain-tool-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
}

/* ── Tool approval card ────────────────────────────────────────────────────── */
.brain-tool-approval-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color-light);
  border-left: 3px solid var(--primary-light);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 8px 0;
  font-size: 13px;
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.brain-tool-approval-card.brain-approval-done {
  opacity: 0;
  transform: translateY(-4px);
}
.brain-approval-title {
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--primary-light);
}
.brain-approval-body {
  color: var(--text-secondary);
  font-size: 12px;
  margin-bottom: 8px;
  line-height: 1.45;
  max-height: 2.9em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.brain-approval-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.brain-approve-btn {
  padding: 4px 12px;
  border-radius: 6px;
  border: none;
  background: var(--primary-light);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
}
.brain-approve-btn:hover {
  filter: brightness(0.92);
}
.brain-deny-btn {
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-color-light);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 12px;
}
.brain-yolo-btn {
  padding: 5px 14px;
  border-radius: 6px;
  border: 1px solid rgba(217, 119, 87, 0.6);
  background: transparent;
  color: #d97757;
  cursor: pointer;
  font-size: 12px;
}
.brain-yolo-btn:hover {
  background: rgba(217, 119, 87, 0.15);
}

/* ── Browser-use credential card ───────────────────────────────────────────── */
/* Compact sign-in form. Overrides the generic approval-body 2-line clamp so the
   whole form (title, hint, fields, mode picker, buttons) is visible with NO
   internal scrolling. Colours/radius mirror .brain-tool-approval-card. */
.browser-credential-card {
  max-width: 380px;
  width: 100%;
  padding: 10px 12px;
}
.browser-cred-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
}
.browser-cred-icon {
  flex-shrink: 0;
  display: block;
  color: var(--primary-light);
}
.browser-cred-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Kill the generic approval-body clamp — the form must never scroll internally. */
.browser-credential-card .browser-cred-body {
  max-height: none;
  overflow: visible;
  display: block;
  -webkit-line-clamp: unset;
  margin-bottom: 8px;
}
.browser-cred-hint {
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.browser-cred-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.browser-cred-fields input {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border-color-light);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
}
.browser-cred-fields input::placeholder {
  color: var(--text-secondary);
}
.browser-cred-fields input:focus {
  border-color: var(--primary-light);
  background: rgba(255, 255, 255, 0.06);
}
.browser-cred-autofill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.browser-cred-autofill-spin {
  flex-shrink: 0;
}
.browser-cred-saved-btn {
  margin-bottom: 8px;
}
.browser-cred-vault-note {
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-secondary);
  margin-top: 8px;
}

/* Save-mode picker — mirrors the composer's model picker (rounded button,
   chevron, subtle border) with an absolutely-positioned dropdown. */
.browser-cred-mode {
  position: relative;
  margin-top: 8px;
}
.browser-cred-mode-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-color-light);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.browser-cred-mode-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}
.browser-cred-mode-btn.active {
  border-color: var(--primary-light);
  color: var(--text-primary);
}
.browser-cred-mode-label {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-cred-mode-chevron {
  flex-shrink: 0;
  font-size: 9px;
  opacity: 0.7;
  transition: transform 0.2s ease;
}
.browser-cred-mode-btn.active .browser-cred-mode-chevron {
  transform: rotate(180deg);
}
.browser-cred-mode-menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 20;
  padding: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-color-light);
  border-radius: 8px;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.browser-cred-mode-menu[hidden] {
  display: none;
}
.browser-cred-mode-item {
  padding: 7px 10px;
  border-radius: 5px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-secondary);
  cursor: pointer;
}
.browser-cred-mode-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}
.browser-cred-mode-item.selected {
  background: rgba(124, 106, 247, 0.2);
  color: var(--primary-light);
}

/* Full width on narrow screens. */
@media (max-width: 480px) {
  .browser-credential-card {
    max-width: none;
  }
}

/* ── Write approval file previews ──────────────────────────────────────────── */
.brain-write-approval-card .brain-approval-body.brain-write-files-body {
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}
.brain-write-file-preview {
  margin-bottom: 12px;
}
.brain-write-file-path {
  font-size: 11px;
  font-weight: 600;
  color: #a78bfa;
  margin-bottom: 4px;
  word-break: break-all;
}
.brain-write-file-content {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.5;
  color: #ccc;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  max-height: 160px;
  overflow-y: auto;
}

/* ── Skill edit approval card ─────────────────────────────────────────────── */
.skill-edit-approval {
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 8px 0;
  font-size: 13px;
}
.skill-edit-header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: #a5b4fc;
  margin-bottom: 6px;
}
.skill-edit-icon {
  font-size: 15px;
}
.skill-edit-title code {
  font-size: 12px;
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 5px;
  border-radius: 3px;
  color: #c4b5fd;
}
.skill-edit-description {
  color: #cbd5e1;
  margin-bottom: 8px;
  line-height: 1.4;
}
.skill-edit-ops {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.skill-edit-op {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  color: #94a3b8;
}
.skill-edit-op-type {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
}
.skill-edit-op-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 360px;
  color: #64748b;
  font-style: italic;
}
.skill-edit-actions {
  display: flex;
  gap: 8px;
}
.skill-edit-btn {
  padding: 5px 14px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: opacity 0.15s;
}
.skill-edit-btn:hover {
  opacity: 0.85;
}
.skill-edit-approve {
  background: rgba(99, 102, 241, 0.75);
  color: #fff;
}
.skill-edit-reject {
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}
.skill-edit-result {
  font-size: 13px;
  padding: 6px 0;
}
.skill-edit-success {
  color: #4ade80;
}
.skill-edit-error {
  color: #f87171;
}
.skill-edit-dismissed {
  color: #64748b;
}

/* Diff Viewer Styles */
.skill-diff-toggle {
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 3px;
  background: rgba(167, 139, 250, 0.1);
  color: var(--primary-light);
  border: 1px solid rgba(167, 139, 250, 0.2);
  cursor: pointer;
  transition: all 0.2s ease;
}

.skill-diff-toggle:hover {
  background: rgba(167, 139, 250, 0.2);
  border-color: rgba(167, 139, 250, 0.4);
}

.skill-diff-preview {
  margin: 8px 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(167, 139, 250, 0.15);
  max-height: 400px;
  overflow-y: auto;
}

.skill-diff-container {
  padding: 4px 0;
}

.skill-diff-viewer {
  font-family: "JetBrains Mono", "Monaco", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

.edit-operation {
  margin-bottom: 12px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  border-left: 3px solid rgba(167, 139, 250, 0.3);
}

.edit-label {
  font-size: 11px;
  font-weight: 600;
  color: #a78bfa;
  text-transform: uppercase;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.diff-line {
  padding: 3px 12px;
  display: flex;
  align-items: center;
  min-height: 20px;
  font-size: 12px;
  margin: 2px 0;
}

.diff-line.diff-added {
  background: rgba(52, 211, 153, 0.1);
  color: #4ade80;
  border-left: 3px solid #22c55e;
}

.diff-line.diff-removed {
  background: rgba(239, 68, 68, 0.1);
  color: #ff6b6b;
  border-left: 3px solid #ef4444;
}

.diff-line.diff-context {
  background: rgba(100, 116, 139, 0.05);
  color: #cbd5e1;
  border-left: 3px solid rgba(100, 116, 139, 0.2);
}

/* Side-by-side diff view (like VS Code) */
.diff-side-by-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  overflow: hidden;
  max-height: 400px;
}

.diff-column {
  overflow-y: auto;
  background: var(--bg-secondary, #1a1a2e);
}

.diff-column.diff-old {
  border-right: 1px solid rgba(100, 116, 139, 0.2);
}

.diff-column-header {
  position: sticky;
  top: 0;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(100, 116, 139, 0.2);
  font-size: 11px;
  font-weight: 600;
  color: #a78bfa;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 10;
}

.diff-column-content {
  padding: 4px 0;
}

.diff-lineno {
  display: inline-block;
  width: 40px;
  text-align: right;
  padding-right: 12px;
  color: rgba(167, 139, 250, 0.4);
  font-size: 11px;
  user-select: none;
}

/* Task Status Indicator - Status bar in message header */
.task-status-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px 0;
  font-size: 13px;
  color: var(--primary-light);
  align-items: center;
  min-height: 24px;
}

.task-item {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 4px 8px;
  background: rgba(167, 139, 250, 0.1);
  border-radius: 4px;
  border: 1px solid rgba(167, 139, 250, 0.2);
}

.task-item.task-current {
  color: var(--primary-light);
  animation: taskGlow 1.5s ease-in-out infinite;
}

.task-item.task-complete {
  color: var(--success-color);
  background: rgba(52, 211, 153, 0.1);
  border-color: rgba(52, 211, 153, 0.2);
  opacity: 0.7;
}

.task-spinner {
  display: inline-block;
  animation: taskSpin 1s linear infinite;
  font-size: 14px;
}

.task-checkmark {
  display: inline-block;
  animation: checkmarkPop 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
  font-size: 14px;
  color: var(--success-color);
}

@keyframes taskSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes taskGlow {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes checkmarkPop {
  0% {
    transform: scale(0) rotate(-45deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(10deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Execution result collapsible widget — shows collapsed by default */
.exec-result-widget {
  margin: 6px 0 6px 0;
  font-size: 13px;
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 6px;
  overflow: hidden;
}
.exec-result-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  cursor: pointer;
  user-select: none;
  background: rgba(167, 139, 250, 0.06);
  transition: background 0.15s;
}
.exec-result-header:hover {
  background: rgba(167, 139, 250, 0.12);
}
.exec-result-chevron {
  font-size: 10px;
  color: var(--primary-light, #a78bfa);
  transition: transform 0.2s;
}
.exec-result-label {
  color: var(--text-muted, #888);
  font-size: 12px;
  font-weight: 500;
}
.exec-result-body {
  padding: 6px 10px;
  border-top: 1px solid rgba(167, 139, 250, 0.1);
}
.exec-cmd-entry {
  margin-bottom: 6px;
}
.exec-cmd-entry:last-child {
  margin-bottom: 0;
}
.exec-cmd-line {
  line-height: 1.6;
  color: var(--text-color, #333);
  font-size: 12px;
}
.exec-cmd-line code {
  background: rgba(0,0,0,0.06);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 12px;
  word-break: break-all;
}
.exec-cmd-output {
  margin: 3px 0 0 0;
  padding: 5px 8px;
  background: rgba(0,0,0,0.03);
  border-radius: 4px;
  font-size: 12px;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.4;
}
.exec-cmd-output code {
  background: none;
  padding: 0;
  font-size: 12px;
}
}

/* Compact Skill Edit UI */
.skill-edit-compact {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(59, 130, 246, 0.1) 100%);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skill-edit-compact-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.skill-edit-compact-title {
  font-weight: 600;
  font-size: 13px;
  color: #a78bfa;
  word-break: break-word;
}

.skill-edit-compact-desc {
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-edit-compact-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.skill-edit-compact-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgba(139, 92, 246, 0.2);
  color: #a78bfa;
}

.skill-edit-compact-btn:hover {
  background: rgba(139, 92, 246, 0.3);
  transform: translateY(-1px);
}

.skill-edit-compact-approve {
  background: #166534;
  color: #bbf7d0;
  border: 1px solid rgba(74, 222, 128, 0.35);
}

.skill-edit-compact-approve:hover {
  background: #15803d;
  color: #dcfce7;
}

.skill-edit-compact-reject {
  background: #7f1d1d;
  color: #fecaca;
  border: 1px solid rgba(248, 113, 113, 0.35);
}

.skill-edit-compact-reject:hover {
  background: #991b1b;
  color: #fee2e2;
}

.skill-edit-compact-success,
.skill-edit-compact-error,
.skill-edit-compact-dismissed {
  font-size: 12px;
  font-weight: 500;
  display: inline-block;
}

.skill-edit-compact-success {
  color: #6ee7b7;
}

.skill-edit-compact-error {
  color: #fca5a5;
}

/* File Not Found Warning Card */
.file-not-found-warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(239, 68, 68, 0.08) 100%);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fnf-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fnf-header-left {
  display: flex;
  align-items: center;
  gap: 7px;
}

.fnf-icon {
  font-size: 14px;
  line-height: 1;
}

.fnf-title {
  font-weight: 600;
  font-size: 13px;
  color: #fbbf24;
}

.fnf-dismiss {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 5px;
  border-radius: 4px;
  line-height: 1;
}

.fnf-dismiss:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #9ca3af;
}

.fnf-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.fnf-body p {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-secondary, #9ca3af);
  line-height: 1.5;
}

.fnf-filename {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 11.5px;
  font-family: "JetBrains Mono", "Monaco", monospace;
  word-break: break-all;
}

.fnf-note {
  color: #6b7280 !important;
  font-size: 11.5px !important;
}

.fnf-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.fnf-accept-edit,
.fnf-accept-all,
.fnf-dismiss-action {
  padding: 6px 10px;
  border-radius: 4px;
  border: none;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-weight: 500;
}

.fnf-accept-edit,
.fnf-accept-all {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.fnf-accept-edit:hover,
.fnf-accept-all:hover {
  background: rgba(34, 197, 94, 0.3);
  border-color: rgba(34, 197, 94, 0.6);
}

.fnf-dismiss-action {
  background: rgba(107, 114, 128, 0.2);
  color: #d1d5db;
  border: 1px solid rgba(107, 114, 128, 0.4);
}

.fnf-dismiss-action:hover {
  background: rgba(107, 114, 128, 0.3);
  border-color: rgba(107, 114, 128, 0.6);
}

.skill-edit-compact-dismissed {
  color: var(--text-secondary);
}

/* ── Skill questionnaire overlay ─────────────────────────────────────────── */
.sq-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.sq-card {
  background: #0f0f1a;
  border: 1px solid rgba(124, 106, 247, 0.4);
  border-radius: 12px;
  padding: 24px;
  max-width: 480px;
  width: 90%;
  color: #e4e4e7;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}

.sq-step-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #7c6af7;
  margin-bottom: 10px;
}

.sq-skill-name {
  font-size: 12px;
  color: #888;
  margin-bottom: 14px;
}

.sq-skill-name strong {
  color: #e4e4e7;
}

.sq-question {
  font-size: 15px;
  font-weight: 600;
  color: #e4e4e7;
  margin: 0 0 18px;
  line-height: 1.4;
}

.sq-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}

.sq-option-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 13px;
  border-radius: 7px;
  border: 1px solid rgba(124, 106, 247, 0.25);
  background: rgba(124, 106, 247, 0.05);
  color: #ccc;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s ease;
}

.sq-option-btn:hover {
  border-color: rgba(124, 106, 247, 0.5);
  background: rgba(124, 106, 247, 0.1);
  color: #e4e4e7;
}

.sq-option-btn.selected {
  border-color: #7c6af7;
  background: rgba(124, 106, 247, 0.2);
  color: #fff;
}

.sq-text-input {
  width: 100%;
  padding: 9px 13px;
  border-radius: 7px;
  border: 1px solid rgba(124, 106, 247, 0.3);
  background: rgba(0, 0, 0, 0.3);
  color: #e4e4e7;
  font-size: 13px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s ease;
}

.sq-text-input:focus {
  border-color: #7c6af7;
}

.sq-text-input::placeholder {
  color: #555;
}

.sq-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  justify-content: flex-end;
}

.sq-btn-dismiss {
  padding: 7px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: #888;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s ease;
}

.sq-btn-dismiss:hover {
  border-color: rgba(255, 255, 255, 0.25);
  color: #aaa;
}

.sq-btn-next {
  padding: 7px 16px;
  border-radius: 6px;
  border: none;
  background: #7c6af7;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
}

.sq-btn-next:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.sq-btn-next:not(:disabled):hover {
  background: #6d5de8;
}

/* ── Skill save card ──────────────────────────────────────────────────────── */
.skill-save-card {
  background: rgba(20, 20, 30, 0.9);
  border: 1px solid rgba(124, 106, 247, 0.4);
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 12px;
  font-size: 13px;
  color: #e4e4e7;
}

.skill-save-card-title {
  font-weight: 600;
  color: #a78bfa;
  margin-bottom: 4px;
}

.skill-save-card-name {
  font-size: 13px;
  color: #e4e4e7;
  font-weight: 600;
  margin-bottom: 10px;
}

.skill-save-index-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #7c6af7;
  margin-bottom: 4px;
}

.skill-save-index-value {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  color: #ccc;
  margin-bottom: 10px;
  line-height: 1.5;
}

.skill-save-preview summary {
  cursor: pointer;
  font-size: 12px;
  color: #666;
  margin-bottom: 6px;
  user-select: none;
}

.skill-save-preview summary:hover {
  color: #999;
}

.skill-save-preview pre {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11px;
  color: #aaa;
  overflow: auto;
  max-height: 160px;
  white-space: pre-wrap;
  margin: 0;
}

.skill-save-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.skill-save-success {
  color: #6ee7b7;
  font-size: 13px;
  line-height: 1.5;
}

.skill-save-success span {
  color: #888;
  font-size: 12px;
}

.skill-save-error {
  color: #f87171;
  font-size: 12px;
  margin-top: 6px;
}

/* Command Indicators - Inline visual elements for detected commands */
.cmd-indicator {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 0 4px;
  min-height: 24px;
  vertical-align: middle;
}

.cmd-indicator-line {
  display: block;
  width: 2px;
  height: 8px;
  background: linear-gradient(180deg, #a78bfa 0%, rgba(167, 139, 250, 0.5) 100%);
  border-radius: 1px;
}

.cmd-indicator-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(167, 139, 250, 0.2);
  border: 1.5px solid #a78bfa;
  color: #a78bfa;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  animation: indicatorPulse 2s ease-in-out infinite;
}

@keyframes indicatorPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.4);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.1);
  }
}

/* When command is completed, change to past tense */
.cmd-indicator.completed .cmd-indicator-circle {
  animation: none;
  border-color: #6ee7b7;
  background: rgba(52, 211, 153, 0.2);
  color: #6ee7b7;
}

/* ========================================================================
   SafeHighlightOverlay - Non-destructive absolute position overlay highlights
   Renders red/green highlights for changed lines without modifying code-line divs
   ======================================================================== */

/* SafeHighlightOverlay container - positioned absolutely over code block */
.safe-highlight-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 10;
  background: transparent;
  overflow: hidden;
}

/* Individual highlight line - positioned at correct line index */
.highlight-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5em;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Added line - green highlight with subtle gradient and border */
.highlight-line.added {
  background: linear-gradient(90deg, rgba(52, 211, 153, 0.15), transparent);
  border-left: 3px solid rgba(52, 211, 153, 0.4);
}

/* Removed line - red highlight with subtle gradient and border */
.highlight-line.removed {
  background: linear-gradient(90deg, rgba(248, 113, 113, 0.15), transparent);
  border-left: 3px solid rgba(248, 113, 113, 0.4);
}

/* Modified line - blue highlight (changed line) */
.highlight-line.modified {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.15), transparent);
  border-left: 3px solid rgba(59, 130, 246, 0.4);
}

/* ========================================================================
   INTERACTIVE VISUALIZATION STYLES
   Renders charts, graphs, 3D visualizations directly in chat
   ======================================================================== */

.visualization-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 0;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e0e7ff;
  font-family: var(--font-family-base);
  overflow-x: auto;
}

/* Chart.js visualizations */
.visualization-container.viz-chartjs {
  max-width: 100%;
  height: auto;
  min-height: 300px;
  background: linear-gradient(135deg, #f8f9fa 0%, #f0f4f8 100%);
}

.visualization-container.viz-chartjs canvas {
  max-height: 400px;
}

/* D3.js visualizations (graphs, trees) */
.visualization-container.viz-d3 {
  width: 100%;
  min-height: 500px;
  background: #ffffff;
  border: 1px solid #d1d5db;
}

.visualization-container.viz-d3 svg {
  width: 100%;
  height: 100%;
}

/* Three.js 3D visualizations */
.visualization-container.viz-threejs {
  width: 100%;
  min-height: 500px;
  background: #ffffff;
  border: 1px solid #d1d5db;
  overflow: hidden;
}

.visualization-container.viz-threejs canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Plotly visualizations */
.visualization-container.viz-plotly {
  width: 100%;
  min-height: 400px;
  background: #ffffff;
  border: 1px solid #d1d5db;
}

.visualization-container.viz-plotly > div {
  width: 100%;
  height: 100%;
}

/* Animation visualizations */
.visualization-container.viz-animation {
  width: 100%;
  min-height: 400px;
  background: #ffffff;
  border: 1px solid #d1d5db;
  justify-content: flex-start;
}

.visualization-container.viz-animation svg {
  width: 100%;
  height: 100%;
}

/* Error state for visualizations */
.visualization-error,
.viz-error {
  padding: 12px 16px;
  background: #fee;
  border: 1px solid #fcc;
  border-radius: 6px;
  color: #c33;
  font-size: 13px;
  font-family: monospace;
  word-break: break-word;
  white-space: pre-wrap;
}

/* Hover states for interactive elements */
.visualization-container circle,
.visualization-container path {
  transition: opacity 0.2s ease;
}

.visualization-container circle:hover {
  opacity: 0.8;
  cursor: pointer;
}

/* Responsive adjustments for visualizations */
@media (max-width: 768px) {
  .visualization-container {
    margin: 8px 0;
    padding: 12px;
    min-height: 250px;
  }

  .visualization-container.viz-d3,
  .visualization-container.viz-threejs,
  .visualization-container.viz-animation {
    min-height: 350px;
  }

  .visualization-container.viz-chartjs {
    min-height: 250px;
  }
}

/* ========================================================================
   HIERARCHICAL NETWORK DIAGRAM STYLES
   Interactive D3.js flow diagram for clarification questions
   ======================================================================== */

.hierarchical-network {
  width: 100%;
  padding: 20px 0;
}

.hierarchical-network svg {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  border-radius: 8px;
  margin-bottom: 12px;
}

.hierarchical-network circle {
  transition: all 0.3s ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.hierarchical-network circle:hover {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
  transform-origin: center;
}

.hierarchical-network text {
  font-family: var(--font-family-base);
  user-select: none;
  transition: all 0.3s ease;
}

.hierarchical-network line {
  transition: stroke 0.3s ease;
}

.hierarchical-network g:hover circle {
  opacity: 1 !important;
}

/* Selection path display */
.hierarchical-network > div:first-child {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(6, 182, 212, 0.05));
  border-left: 4px solid #3b82f6;
  border-radius: 4px;
  margin-bottom: 16px;
  color: #1f2937;
  font-size: 14px;
  line-height: 1.6;
}

.hierarchical-network strong {
  color: #111827;
  font-weight: 600;
}

.hierarchical-network em {
  color: #6b7280;
  font-style: italic;
}

/* Responsive network diagram */
@media (max-width: 768px) {
  .hierarchical-network svg {
    height: 300px;
  }

  .hierarchical-network circle {
    stroke-width: 2px;
  }

  .hierarchical-network text {
    font-size: 11px;
  }
}

/* ========================================================================
   MERMAID DIAGRAM STYLES
   Interactive flowcharts, diagrams, and visualizations
   ======================================================================== */

.mermaid-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 16px 0;
  padding: 12px;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow-x: auto;
}

.mermaid-container .mermaid {
  display: flex;
  justify-content: center;
  width: 100%;
}

.mermaid-container svg {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Mermaid text and styling */
.mermaid text {
  font-family: var(--font-family-base);
  font-size: 13px;
}

.mermaid .labelBkg {
  background-color: #ffffff;
  opacity: 0.9;
}

/* Mermaid node styling */
.mermaid .node {
  stroke: #3b82f6;
  stroke-width: 2;
}

.mermaid .cluster {
  stroke: #cbd5e1;
  fill: #f8fafc;
}

/* Responsive mermaid */
@media (max-width: 768px) {
  .mermaid-container {
    padding: 8px;
    margin: 8px 0;
  }

  .mermaid text {
    font-size: 11px;
  }
}

/* Keyboard open on mobile — JS adds .keyboard-open class on input focus */
body.keyboard-open .welcome-header {
  display: none !important;
}

/* Reasoning Section Styles */
.reasoning-section {
  margin: 0 16px 8px;
  border-left: 3px solid var(--secondary-color);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(59, 130, 246, 0.05);
}

.reasoning-section.streaming {
  border-left-color: var(--primary-light, #a78bfa);
}

.reasoning-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  transition: color 0.2s;
}

.reasoning-toggle:hover {
  color: var(--text-primary);
}

.reasoning-toggle-icon {
  font-size: 10px;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.reasoning-toggle.open .reasoning-toggle-icon {
  transform: rotate(0deg);
}

/* Pulsing brand dot while reasoning streams (DeepSeek-style) */
.reasoning-dot {
  display: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary-light, #a78bfa);
  flex-shrink: 0;
}

.reasoning-section.streaming .reasoning-dot {
  display: inline-block;
  animation: reasoningDot 1.5s linear infinite;
}

@keyframes reasoningDot {
  0% { transform: scale(1); }
  40% { transform: scale(1.3); }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* Shimmer sweep across the "Thinking" label while reasoning streams */
.reasoning-section.streaming .reasoning-toggle-text {
  background-image: linear-gradient(
    90deg,
    var(--text-secondary) 0%,
    var(--text-secondary) 40%,
    var(--primary-light, #a78bfa) 50%,
    var(--text-secondary) 60%,
    var(--text-secondary) 100%
  );
  background-size: 250% 100%;
  background-position: 200% 0;
  /* !important + higher specificity needed to beat web-theme.css's
     "* { -webkit-text-fill-color: unset !important; background-clip: unset !important }" */
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: reasoningShimmer 2s ease-out infinite;
}

@keyframes reasoningShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}

.reasoning-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* Fixed-height reasoning box: about a quarter of the screen, scrolls inside */
.reasoning-content.open {
  max-height: 25vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 120, 135, 0.5) transparent;
}

.reasoning-content.open::-webkit-scrollbar {
  width: 6px;
}

.reasoning-content.open::-webkit-scrollbar-thumb {
  background: rgba(120, 120, 135, 0.45);
  border-radius: 3px;
}

.reasoning-text {
  padding: 4px 12px 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: inherit;
}

body.keyboard-open .title {
  top: calc(4px + env(safe-area-inset-top)) !important; /* keep clear of the iOS status bar */
}

.settings-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10001;
  display: none;
  align-items: center;
  justify-content: center;
}
.settings-modal.open {
  display: flex;
}
.settings-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}
.settings-modal-content {
  position: relative;
  z-index: 10002;
  background: #1a1a2e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  width: 680px;
  max-width: 94vw;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  animation: settingsSlideUp 0.25s ease-out;
}
@keyframes settingsSlideUp {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.settings-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.settings-modal-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #e4e4e7;
}
.settings-modal-close {
  background: none;
  border: none;
  color: #71717a;
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
  transition: all 0.15s;
}
.settings-modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #e4e4e7;
}
.settings-modal-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 400px;
}

.settings-nav {
  width: 200px;
  flex-shrink: 0;
  padding: 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}
.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #a1a1aa;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  width: 100%;
}
.settings-nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #d4d4d8;
}
.settings-nav-item.active {
  background: rgba(255, 255, 255, 0.08);
  color: #e4e4e7;
}
.settings-nav-item svg {
  flex-shrink: 0;
}

.settings-panels {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.settings-panel {
  display: none;
  padding: 12px 24px 24px;
}
.settings-panel.active {
  display: block;
}
.settings-panel-section {
  padding: 16px 0;
}
.settings-panel-section + .settings-panel-section {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.settings-panel-section-title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #71717a;
}

.settings-theme-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.settings-theme-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: #a1a1aa;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.settings-theme-card:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #d4d4d8;
}
.settings-theme-card.selected {
  background: rgba(79, 172, 254, 0.15);
  border-color: rgba(79, 172, 254, 0.4);
  color: #4facfe;
}
.settings-theme-card.selected svg {  stroke: #4facfe;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  gap: 16px;
  min-height: 44px;
}
.settings-row + .settings-row {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.settings-row-label {
  font-size: 13px;
  font-weight: 500;
  color: #e4e4e7;
  flex-shrink: 0;
}
.settings-row-label-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-row-desc {
  font-size: 11px;
  color: #71717a;
}
.settings-row-value {
  font-size: 13px;
  color: #a1a1aa;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 50%;
}
.settings-row-placeholder {
  color: #52525b;
}

/* iOS Home Screen install guide (Settings → General → Notifications) */
.settings-ios-install-guide {
  margin: 4px 0 12px;
  padding: 12px 14px;
  border: 1px solid rgba(79, 172, 254, 0.25);
  border-radius: 10px;
  background: rgba(79, 172, 254, 0.08);
}
.settings-ios-install-title {
  font-size: 13px;
  font-weight: 600;
  color: #e4e4e7;
  margin-bottom: 4px;
}
.settings-ios-install-desc {
  font-size: 12px;
  color: #a1a1aa;
  margin-bottom: 8px;
}
.settings-ios-install-steps {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: #d4d4d8;
}
.ios-share-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v11'/%3E%3Cpath d='M8 7l4-4 4 4'/%3E%3Cpath d='M6 11v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v11'/%3E%3Cpath d='M8 7l4-4 4 4'/%3E%3Cpath d='M6 11v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-8'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* iOS status-bar safe area: the clock/battery bar is drawn over the top of
   the page — push app content below it. This must NOT be gated on standalone
   mode: iOS Chrome (and any iOS browser with viewport-fit=cover) also
   renders under the status bar, where display-mode stays "browser" and no
   class is ever applied. Everywhere env() is 0 (desktop, Android, Safari
   top chrome) these rules are exact no-ops, so they apply unconditionally. */
body {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top);
}
.header {
  box-sizing: border-box;
  padding-top: calc(12px + env(safe-area-inset-top));
}
.title {
  top: calc(12px + env(safe-area-inset-top));
}
.top-actions {
  top: calc(12px + env(safe-area-inset-top));
}
@media (max-width: 768px) {
  .top-actions {
    top: calc(10px + env(safe-area-inset-top));
  }
}

.settings-select {
  appearance: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #e4e4e7;
  font-size: 13px;
  padding: 8px 32px 8px 12px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.settings-select:focus {
  outline: none;
  border-color: rgba(79, 172, 254, 0.5);
}

.settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
  background: transparent;
  color: #e4e4e7;
  white-space: nowrap;
}
.settings-btn-sm {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 6px;
}
.settings-btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.12);
  color: #d4d4d8;
}
.settings-btn-outline:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}
.settings-btn-danger-outline {
  background: transparent;
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
  width: 100%;
  margin-top: 8px;
}
.settings-btn-danger-outline:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.5);
}
.settings-btn-danger {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}
.settings-btn-danger:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
}

.settings-toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  cursor: pointer;
}
.settings-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.settings-toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  transition: all 0.2s;
}
.settings-toggle-slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background: #a1a1aa;
  border-radius: 50%;
  transition: all 0.2s;
}
.settings-toggle input:checked + .settings-toggle-slider {
  background: rgba(79, 172, 254, 0.5);
}
.settings-toggle input:checked + .settings-toggle-slider::before {
  transform: translateX(18px);
  background: #4facfe;
}

@media (max-width: 600px) {
  .settings-nav {
    width: 56px;
    padding: 6px;
  }
  .settings-nav-item span {
    display: none;
  }
  .settings-nav-item {
    justify-content: center;
    padding: 10px;
  }
  .settings-theme-cards {
    grid-template-columns: 1fr;
  }
  .settings-modal-content {
    max-height: 90vh;
  }
}

/* ── More Models collapsible ───────────────────────────────────── */
.more-models-toggle {
  cursor: pointer;
  user-select: none;
}
.more-models-toggle:hover {
  opacity: 0.8;
}
.more-models-arrow {
  display: inline-block;
  font-size: 10px;
  margin-right: 4px;
  transition: transform 0.2s;
}
.more-models-body {
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* ── Model lock + hover tooltip ───────────────────────────────── */
.ai-model-item.locked {
  opacity: 0.55;
  cursor: not-allowed;
  position: relative;
}
.ai-model-item.locked .lock-icon {
  margin-left: auto;
  font-size: 13px;
  line-height: 1;
}
.ai-model-item.locked:hover {
  opacity: 0.8;
  background: rgba(239,68,68,0.06);
}
.locked-tooltip-float {
  position: fixed;
  z-index: 99999;
  background: #18181b;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.2);
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: auto;
}
.locked-tooltip-float.show {
  opacity: 1;
}
.locked-tooltip-float::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #18181b;
}
.locked-tooltip-float .locked-tooltip-text {
  font-size: 13px;
  color: #d4d4d4;
  font-weight: 450;
}
.locked-tooltip-float .locked-tooltip-link {
  font-size: 13px;
  color: #a78bfa;
  text-decoration: none;
  font-weight: 600;
}
.locked-tooltip-float .locked-tooltip-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* ── Tool call cards (Claude Code / ChatGPT style) ──────────────────── */
.tool-call-card {
  display: inline-block;
  background: var(--bg-secondary, #1e1e2e);
  border: 1px solid var(--border-color, #313244);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 6px 0;
  max-width: 100%;
}
.tool-call-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tool-call-icon {
  font-size: 14px;
  flex-shrink: 0;
}
.tool-call-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #cdd6f4);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.tool-call-desc {
  font-size: 12px;
  color: var(--text-secondary, #a6adc8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.tool-call-body {
  margin-top: 6px;
}
.tool-code-snippet {
  background: var(--bg-tertiary, #11111b);
  border-radius: 4px;
  padding: 6px 8px;
  margin: 0;
  font-size: 11px;
  overflow-x: auto;
  max-height: 80px;
}
.tool-code-snippet code {
  color: var(--text-code, #cdd6f4);
}
.tool-clarify-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tool-clarify-item {
  font-size: 12px;
  color: var(--text-primary, #cdd6f4);
  padding: 4px 8px;
  background: var(--bg-tertiary, #11111b);
  border-radius: 4px;
  border-left: 3px solid var(--primary-light, #a78bfa);
}


/* -- Claude-style skill loading timeline ------------------------------- */
.skill-timeline {
  margin: 6px 0 10px;
  font-size: 0.855rem;
  line-height: 1.45;
}

.skill-timeline-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  color: var(--text-secondary);
  padding: 4px 8px 4px 6px;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}

.skill-timeline-toggle:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.skill-timeline-spark {
  display: inline-flex;
  align-items: center;
  color: #d97757;
  flex-shrink: 0;
}

.skill-timeline-title {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.skill-timeline-chevron {
  font-size: 13px;
  opacity: 0.6;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.skill-timeline.open .skill-timeline-chevron {
  transform: rotate(90deg);
}

.skill-timeline-body {
  display: none;
}

/* No fade-in here. The widget root is detached and re-inserted on every
   streaming tick (updateMessageContentOptimized), which restarts any CSS
   animation on this element. The 0.2s opacity 0->1 fade therefore replayed
   continuously while the model streamed text, strobing the whole panel body
   between invisible and fully opaque — the flicker users saw. Appearing
   instantly keeps it solid. */
.skill-timeline.open .skill-timeline-body {
  display: block;
}

.skill-tl-row {
  display: flex;
  align-items: stretch;
}

.skill-tl-rail {
  width: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.skill-tl-node {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1;
  padding-top: 3px;
}

.skill-tl-node.skill-tl-doc {
  padding-top: 1px;
  display: inline-flex;
}

.skill-tl-node.skill-tl-check {
  color: var(--success-color, #34d399);
  font-weight: 700;
}

.skill-tl-node.skill-tl-fail {
  color: var(--error-color, #ef4444);
  font-weight: 700;
}

.skill-tl-line {
  width: 1px;
  flex: 1;
  min-height: 8px;
  background: var(--border-color);
  margin-top: 4px;
}

.skill-tl-text {
  padding: 0 10px 14px;
  color: var(--text-secondary);
}

.skill-tl-text.skill-tl-done {
  padding-bottom: 2px;
}

/* -- Live activity state (building spreadsheet / pptx / image / code) -- */
.live-activity-bar {
  padding: 2px 0;
}

.skill-timeline.live-activity {
  margin: 4px 0 6px;
}

.skill-tl-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: #d97757;
  border-radius: 50%;
  display: inline-block;
  /* Rotation is JS-driven (messageManager._ensureSpinDriver) from wall-clock
     time — a CSS animation restarts on every streaming detach/reattach. */
  will-change: transform;
}

.skill-timeline.working .skill-timeline-title {
  color: var(--text-primary);
  animation: skillTlPulse 1.6s ease-in-out infinite;
}

/* Only the newest working activity spins — older ones wait with a static ring */
.skill-timeline.live-activity.waiting .skill-tl-spinner {
  border-top-color: rgba(255, 255, 255, 0.35);
}

.skill-timeline.live-activity.waiting .skill-timeline-title {
  animation: none;
  color: var(--text-secondary);
}

@keyframes skillTlPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* -- Browser-use live panel (little computer window inside the timeline) -- */
.browser-tl-cell {
  flex: 1;
  min-width: 0;
}

.browser-window {
  overflow: hidden;
  margin-bottom: 6px;
}

.browser-window-viewport {
  position: relative;
  /* Fixed stage sized to the frame's own aspect ratio (16:10) so the image
     fills the box edge-to-edge — no "black sides" from object-fit:contain.
     The height is derived from width via aspect-ratio, so the box never
     changes height per-frame; that stability is what removes the jump. */
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #0b0b12;
}

.browser-window-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* No crossfade/animation: a single persistent <img> with an in-place src
     update. The old crossfade left two semi-transparent frames overlapping at
     ~1fps, letting the dark stage bleed through as a haze — the perceived
     flicker. A plain decode keeps the frame solid and steady. */
  display: block;
}

.browser-window-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary);
}

/* Browser "current action" line — the live view already shows what the agent is
   doing, so only the MOST RECENT per-click explanation is shown here; each new
   one replaces the previous instead of stacking into a growing list. The fixed
   height + 2-line clamp keep the panel from jumping (no flicker) as the text
   changes frame to frame. */
.browser-current-action {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin-top: 6px;
  padding: 6px 9px;
  border: 1px solid var(--border-color-light);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-secondary);
  box-sizing: border-box;
  height: 42px;
  overflow: hidden;
}
.browser-current-node {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 16px;
  color: var(--text-secondary);
}
.browser-current-action.is-done .browser-current-node { color: var(--success-color, #34d399); }
.browser-current-action.is-failed .browser-current-node { color: var(--danger-color, #f87171); }
.browser-current-text {
  flex: 1 1 auto;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.skill-timeline.done .skill-timeline-spark {
  color: var(--success-color, #34d399);
  font-weight: 700;
  font-size: 12px;
}

.skill-timeline.failed .skill-timeline-spark {
  color: var(--error-color, #ef4444);
}

.skill-timeline.failed .skill-timeline-title {
  color: var(--text-secondary);
}

.skill-tl-file {
  margin-left: 8px;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 400;
  opacity: 0.85;
}


/* Attachment Menu (+ button popup) */
.attachment-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  min-width: 220px;
  padding: 4px 0;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.2s ease;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3);
  margin-bottom: 8px;
}

.attachment-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.attachment-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: #d4d4d8;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease;
  text-align: left;
}

.attachment-menu-item:hover {
  background: rgba(59, 130, 246, 0.1);
}

.attachment-menu-item svg {
  flex-shrink: 0;
  color: #9ca3af;
}

@media (max-width: 768px) {
  .attachment-menu {
    min-width: 200px;
    max-width: calc(100vw - 24px);
  }
}

/* MCP Connectors Modal */
.mcp-modal-content {
  width: 680px;
  max-height: 82vh;
}

.mcp-modal-body {
  padding: 10px 20px 16px;
  overflow-y: auto;
}

.mcp-intro {
  margin: 0 0 12px;
  font-size: 13px;
  color: #a1a1aa;
  line-height: 1.5;
}

.mcp-empty {
  padding: 16px 0;
  font-size: 13px;
  color: #71717a;
  text-align: center;
}

.mcp-server-row .settings-row-label-group {
  flex: 1;
  min-width: 0;
}

.mcp-server-row .settings-row-label,
.mcp-server-row .settings-row-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* .settings-btn-danger-outline defaults to width:100% (standalone buttons in
   settings panels) - inside a server row it would squeeze the name/host label
   group to zero width. */
.mcp-server-row .settings-btn-danger-outline {
  width: auto;
  margin-top: 0;
  flex-shrink: 0;
}

.mcp-add-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.mcp-input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #e4e4e7;
  font-size: 13px;
  padding: 8px 12px;
  width: 100%;
  box-sizing: border-box;
}

.mcp-input:focus {
  outline: none;
  border-color: rgba(79, 172, 254, 0.5);
}

.mcp-input::placeholder {
  color: #52525b;
}

.mcp-status {
  display: none;
  font-size: 12px;
  line-height: 1.4;
}

.mcp-status.show {
  display: block;
}

.mcp-status.error {
  color: #ef4444;
}

.mcp-status.success {
  color: #34d399;
}

/* MCP connector directory (Browse tab) - Claude-style list */
.mcp-modal-content .settings-modal-header {
  padding: 14px 20px 12px;
}

.mcp-tabs {
  display: flex;
  gap: 18px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.mcp-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 2px;
  margin-bottom: -1px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #8b8b93;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.mcp-tab:hover {
  color: #d4d4d8;
}
.mcp-tab.active {
  color: #e4e4e7;
  border-bottom-color: #d4d4d8;
}
.mcp-tab-count {
  font-size: 11px;
  font-weight: 500;
  color: #8b8b93;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  padding: 0 6px;
  line-height: 16px;
}

.mcp-tab-panel {
  display: flex;
  flex-direction: column;
}
.mcp-tab-panel[hidden] {
  display: none;
}

.mcp-search {
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.07);
}

.mcp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 2px;
}
.mcp-chip {
  padding: 3px 10px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: #8b8b93;
  font-size: 12px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.mcp-chip:hover {
  color: #d4d4d8;
  background: rgba(255, 255, 255, 0.05);
}
.mcp-chip.active {
  color: #e4e4e7;
  background: rgba(255, 255, 255, 0.08);
}

.mcp-rows {
  overflow-y: auto;
  max-height: 48vh;
  margin: 2px -20px 0;
  padding: 0 20px;
}
.mcp-item + .mcp-item {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.mcp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: 8px;
}
.mcp-row:hover {
  background: rgba(255, 255, 255, 0.03);
}
.mcp-row-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mcp-row-icon svg {
  display: block;
}
.mcp-row-text {
  flex: 1;
  min-width: 0;
}
.mcp-row-name {
  font-size: 14px;
  font-weight: 600;
  color: #e4e4e7;
}
.mcp-row-desc {
  font-size: 13px;
  color: #8b8b93;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mcp-row-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.mcp-row-badge {
  font-size: 12px;
  color: #71717a;
  white-space: nowrap;
}
.mcp-vault-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #34d399;
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.35);
  border-radius: 999px;
  padding: 1px 7px;
}
.mcp-plain-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 999px;
  padding: 1px 7px;
}
.mcp-row-btn {
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: #e4e4e7;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.mcp-row-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}
.mcp-row-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.mcp-row-btn.added {
  border-color: transparent;
  color: #34d399;
  opacity: 1;
}
.mcp-item-disabled .mcp-row {
  opacity: 0.55;
}

.mcp-row-expand {
  margin: 0 0 12px 52px;
  padding: 12px 10px 4px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mcp-row-hint {
  font-size: 12px;
  color: #8b8b93;
  line-height: 1.5;
}
.mcp-row-hint a {
  color: #4facfe;
  text-decoration: none;
}
.mcp-row-hint a:hover {
  text-decoration: underline;
}
.mcp-row-expand-row {
  display: flex;
  justify-content: flex-end;
}

.mcp-text-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: #8b8b93;
  cursor: pointer;
}
.mcp-text-btn:hover {
  color: #d4d4d8;
}
.mcp-text-btn.danger:hover {
  color: #ef4444;
}
.mcp-text-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* My connectors tab reuses the same row look */
#mcpServerList {
  margin: 0 -20px;
  padding: 0 20px;
}
.mcp-server-item + .mcp-server-item {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.mcp-server-row .settings-toggle {
  flex-shrink: 0;
}

.mcp-custom {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.mcp-custom-toggle {
  background: none;
  border: none;
  color: #8b8b93;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mcp-custom-toggle:hover {
  color: #e4e4e7;
}
.mcp-custom-caret {
  display: inline-block;
  transition: transform 0.15s;
}
.mcp-custom-toggle.open .mcp-custom-caret {
  transform: rotate(90deg);
}

@media (max-width: 768px) {
  .mcp-modal-content {
    width: calc(100vw - 16px);
  }
  .mcp-row-desc {
    display: none;
  }
  .mcp-row-expand {
    margin-left: 0;
    padding-right: 0;
  }
  .mcp-rows {
    max-height: 56vh;
  }
}
/* ── Scheduled-task confirmation card ─────────────────────────────────────── */
.schedule-task-card {
  max-width: 720px;
  margin: 10px auto;
}
.schedule-task-card .schedule-task-title {
  font-weight: 600;
  color: #e4e4e7;
  margin-bottom: 4px;
}
.schedule-task-card .schedule-task-cron {
  font-size: 12px;
  color: #aaa;
  margin-bottom: 8px;
}
.schedule-task-card .schedule-task-cron code {
  background: rgba(124, 106, 247, 0.15);
  border-radius: 4px;
  padding: 1px 6px;
  color: #a78bfa;
}
.schedule-task-card .schedule-task-prompt {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.5;
  color: #ccc;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  max-height: 120px;
  overflow-y: auto;
}

/* ── Scheduled-run badge in the history panel ─────────────────────────────── */
.topic-item.topic-item-scheduled .topic-title {
  color: #c4b5fd;
}

.mcp-add-form[hidden] {
  display: none;
}

.mcp-vault-note {
  font-size: 11px;
  line-height: 1.4;
  color: #a1a1aa;
  background: rgba(52, 211, 153, 0.06);
  border: 1px solid rgba(52, 211, 153, 0.2);
  border-radius: 8px;
  padding: 7px 10px;
}

/* ── Settings: Scheduled tasks panel ──────────────────────────────────────── */
.settings-sched-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(124, 106, 247, 0.25);
  border-radius: 8px;
  margin-bottom: 8px;
}
.settings-sched-title {
  font-size: 13px;
  font-weight: 600;
}
.settings-sched-meta {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 2px;
}
.settings-sched-paused {
  font-size: 11px;
  font-weight: 500;
  color: #d97706;
  border: 1px solid rgba(217, 119, 6, 0.4);
  border-radius: 4px;
  padding: 0 5px;
  margin-left: 4px;
}
.settings-sched-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.settings-sched-actions .settings-btn {
  padding: 5px 10px;
  font-size: 12px;
}

.settings-sched-done {
  font-size: 11px;
  font-weight: 500;
  color: #059669;
  border: 1px solid rgba(5, 150, 105, 0.4);
  border-radius: 4px;
  padding: 0 5px;
  margin-left: 4px;
}

.schedule-task-card .schedule-task-precheck {
  font-size: 11px;
  color: #7c6af7;
  margin-bottom: 8px;
}

/* ── Top-actions consolidation (2026-08-01) ─────────────────────
   7 buttons was too many for the bar. Desktop (>=769px) keeps
   New Chat / Search / Settings + a "⋯" overflow menu holding
   Home, Share, Bug Report. Mobile (<=768px)
   collapses everything into a single "☰" menu button whose panel
   lists all seven actions. Panels are proxy items (see index.html
   #topActionsMenu) — the original buttons keep their handlers and
   are only shown/hidden here. */
.top-actions-menu {
  position: relative;
  display: flex;
  align-items: center;
}

#overflowMenuButton,
#mobileMenuButton {
  display: none;
}

.top-actions-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #ffffff;
  border: 1px solid #e8e8ec;
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.12);
  min-width: 220px;
  padding: 6px;
  display: none;
  z-index: 2100;
}

.top-actions-panel.open {
  display: block;
}

.top-actions-panel .tap-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: none;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: #1a1a1a;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}

.top-actions-panel .tap-item:hover {
  background: #f5f5f5;
}

.top-actions-panel .tap-item svg {
  color: #555;
  flex: 0 0 auto;
}

.top-actions-panel .tap-sep {
  height: 1px;
  background: #ececf1;
  margin: 6px 8px;
}

.top-actions-panel .tap-hint {
  font-size: 11.5px;
  color: #999;
  padding: 6px 12px 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Desktop: primaries + "⋯" overflow */
@media (min-width: 769px) {
  .top-action-btn#homeButton,
  .top-action-btn#shareChatButton,
  .top-action-btn#bugReportButton {
    display: none;
  }

  #overflowMenuButton {
    display: inline-flex;
  }

  #topActionsMobilePanel {
    display: none !important;
  }
}

/* Mobile: everything behind "☰" */
@media (max-width: 768px) {
  .top-actions > .top-action-btn {
    display: none !important;
  }

  #mobileMenuButton {
    display: inline-flex !important;
  }

  #topActionsOverflowPanel {
    display: none !important;
  }
}


/* Approval ask-mode segmented control (Settings > General > Approvals) */
.settings-askmode-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.settings-askmode-btn {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: #a1a1aa;
  transition: all 0.15s;
}
.settings-askmode-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #d4d4d8;
  border-color: rgba(255, 255, 255, 0.2);
}
.settings-askmode-btn.active {
  background: rgba(79, 172, 254, 0.15);
  border-color: rgba(79, 172, 254, 0.4);
  color: #4facfe;
}