/* Minimal styles for molecular app */

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

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInFromRight {
  0% {
    opacity: 0;
    transform: translateX(30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
/* ===== Theme tokens ===== */
/* --s is the surface RGB channel: white (255,255,255) at night, black (0,0,0) by day.
   Use as: rgba(var(--s), 0.08)  — automatically flips with the theme. */
:root {
  --bg:          #000000;
  --bg-gradient: linear-gradient(135deg, #000000 0%, #0a0a0a 100%);
  --text:        #f5f5f7;
  --s:           255, 255, 255;
  --accent:      #ffffff;
  --accent-dim:  rgba(255, 255, 255, 0.7);
  --modal-bg:    rgba(10, 10, 10, 0.95);
  --topbar-bg:   rgba(0, 0, 0, 0.85);
}

html[data-theme="day"] {
  --bg:          #ffffff;
  --bg-gradient: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
  --text:        #0a0a0a;
  --s:           0, 0, 0;
  --accent:      #1a1a1a;
  --accent-dim:  #666666;
  --modal-bg:    rgba(240, 240, 240, 0.96);
  --topbar-bg:   rgba(245, 245, 247, 0.88);
}

html {
  margin: 0;
  padding: 0;
  background: var(--bg);
  height: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg-gradient);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, 'SF Pro Display', sans-serif;
  height: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  user-select: text;
  font-feature-settings: 'liga' 1, 'kern' 1, 'ss01' 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: 1.6;
  font-variation-settings: 'wght' 400;
}

#root {
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  background: var(--bg-gradient);
  position: relative;
}

/* ===== Minimal utility classes extracted from App.jsx ===== */
.app {
  background: var(--bg-gradient);
  color: var(--text);
  min-height: 100vh;
  width: 100vw;
  max-width: 100vw;
  overflow-x: clip;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, 'SF Pro Display', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.014em;
  user-select: text;
  font-feature-settings: 'liga' 1, 'kern' 1, 'ss01' 1;
  position: relative;
}

/* Split-screen desktop layout */
.split-screen-container {
  display: flex;
  height: 100vh;
  width: 100%;
  position: relative;
}

/* Sidebar toggle button */
.sidebar-toggle {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  background: rgba(var(--s), 0.06);
  border: 1px solid rgba(var(--s), 0.1);
  border-left: none;
  border-radius: 0 6px 6px 0;
  padding: 10px 4px;
  cursor: pointer;
  color: var(--text);
  min-height: auto;
  min-width: auto;
  width: auto;
  transition: background 0.2s, border-color 0.2s, left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.sidebar-toggle svg {
  width: 14px;
  height: 14px;
  display: block;
}

.sidebar-toggle:hover {
  background: rgba(var(--s), 0.12);
  border-color: rgba(var(--s), 0.15);
  transform: translateY(-50%);
  box-shadow: none;
}

/* Left sidebar */
.left-sidebar {
  height: 100vh;
  background: rgba(var(--s), 0.02);
  border-right: 1px solid rgba(var(--s), 0.06);
  padding: 24px 24px 24px 24px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Drag-to-resize handle on right edge of sidebar */
.sidebar-resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  cursor: col-resize;
  z-index: 10;
  transition: background 0.15s;
}

.sidebar-resize-handle:hover {
  background: rgba(var(--s), 0.15);
}

.left-sidebar.hidden {
  transform: translateX(-100%);
}

.left-sidebar.visible {
  transform: translateX(0);
}

.left-sidebar .app-title {
  font-size: 28px;
  font-weight: 200;
  color: var(--text);
  margin: 0 0 36px 0;
  opacity: 0.95;
  letter-spacing: -0.02em;
  font-feature-settings: 'liga' 1, 'kern' 1;
}

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

.app-title-small {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
}

.app-nav {
  display: flex;
  gap: 12px;
}

.nav-link {
  color: rgba(var(--s), 0.5);
  text-decoration: none;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 8px;
  transition: all 0.2s;
}

.nav-link:hover {
  color: rgba(var(--s), 0.9);
  background: rgba(var(--s), 0.08);
}

/* ===== Personal Tracker ===== */
.personal-tracker {
  border-bottom: 1px solid rgba(var(--s), 0.06);
  margin: 0;
}

.personal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.personal-header:hover { opacity: 1; }

.personal-title { flex: 1; text-align: left; }

.personal-chevron {
  transition: transform 0.2s;
}

.personal-chevron.open {
  transform: rotate(180deg);
}

.personal-body {
  padding: 0 12px 12px;
  animation: fadeIn 0.15s ease;
  max-height: 40vh;
  overflow-y: auto;
}

.personal-cat-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--s), 0.35);
  padding: 8px 4px 4px;
}

.personal-item {
  padding: 8px;
  border-radius: 8px;
  transition: background 0.15s;
}

.personal-item:hover {
  background: rgba(var(--s), 0.04);
}

.personal-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.personal-item-name {
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.personal-item-name:hover {
  text-decoration: underline;
  text-decoration-color: rgba(var(--s), 0.2);
  text-underline-offset: 2px;
}

.personal-item-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s;
  flex-shrink: 0;
}

.personal-item:hover .personal-item-actions {
  opacity: 1;
}

.personal-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  color: rgba(var(--s), 0.4);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s;
  padding: 0;
}

.personal-icon-btn:hover {
  background: rgba(var(--s), 0.08);
  color: rgba(var(--s), 0.7);
}

.personal-icon-btn.danger:hover {
  color: #e55;
  background: rgba(229, 85, 85, 0.1);
}

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

.personal-icon-btn.spinning svg {
  animation: spin 0.8s linear infinite;
}

.personal-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding-left: 0;
}

.personal-time {
  font-size: 11px;
  color: rgba(var(--s), 0.3);
}

.personal-auto-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 9px;
  border: 1px solid rgba(var(--s), 0.1);
  background: none;
  color: rgba(var(--s), 0.3);
  cursor: pointer;
  transition: all 0.15s;
}

.personal-auto-badge.active {
  border-color: rgba(100, 200, 100, 0.3);
  color: rgba(100, 200, 100, 0.7);
  background: rgba(100, 200, 100, 0.06);
}

.personal-result {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(var(--s), 0.55);
  padding: 8px;
  margin-top: 6px;
  background: rgba(var(--s), 0.03);
  border-radius: 6px;
  border: 1px solid rgba(var(--s), 0.05);
  animation: fadeIn 0.2s ease;
}

.personal-result.empty {
  font-style: italic;
  color: rgba(var(--s), 0.25);
}

.personal-input {
  width: 100%;
  padding: 6px 8px;
  font-size: 12px;
  border: 1px solid rgba(var(--s), 0.1);
  border-radius: 6px;
  background: rgba(var(--s), 0.03);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
  margin-bottom: 6px;
}

.personal-input:focus {
  border-color: rgba(var(--s), 0.25);
}

.personal-input::placeholder {
  color: rgba(var(--s), 0.25);
}

.personal-edit-form,
.personal-add-form {
  padding: 4px 0;
}

.personal-edit-actions {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}

.personal-btn {
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 5px;
  border: 1px solid rgba(var(--s), 0.1);
  background: none;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
}

.personal-btn.save {
  background: rgba(100, 200, 100, 0.1);
  border-color: rgba(100, 200, 100, 0.2);
  color: rgba(100, 200, 100, 0.8);
}

.personal-btn.save:hover {
  background: rgba(100, 200, 100, 0.2);
}

.personal-btn.cancel:hover {
  background: rgba(var(--s), 0.06);
}

.personal-model-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.personal-model-label {
  font-size: 11px;
  color: rgba(var(--s), 0.4);
  flex-shrink: 0;
}

.personal-select {
  flex: 1;
  padding: 4px 6px;
  font-size: 11px;
  border: 1px solid rgba(var(--s), 0.1);
  border-radius: 5px;
  background: rgba(var(--s), 0.03);
  color: var(--text);
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
}

.personal-select:focus {
  border-color: rgba(var(--s), 0.25);
}

.personal-model-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 9px;
  font-weight: 600;
  border-radius: 50%;
  border: 1px solid rgba(var(--s), 0.15);
  color: rgba(var(--s), 0.55);
  letter-spacing: 0;
}

.personal-model-badge.model-openai    { border-color: rgba(16, 163, 127, 0.4); color: rgba(16, 163, 127, 0.85); }
.personal-model-badge.model-anthropic { border-color: rgba(204, 120, 92, 0.4); color: rgba(204, 120, 92, 0.85); }
.personal-model-badge.model-google    { border-color: rgba(66, 133, 244, 0.4); color: rgba(66, 133, 244, 0.85); }
.personal-model-badge.model-xai       { border-color: rgba(180, 180, 180, 0.4); color: rgba(220, 220, 220, 0.85); }

.personal-add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px;
  margin-top: 4px;
  border: 1px dashed rgba(var(--s), 0.1);
  border-radius: 8px;
  background: none;
  color: rgba(var(--s), 0.35);
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s;
}

.personal-add-btn:hover {
  border-color: rgba(var(--s), 0.2);
  color: rgba(var(--s), 0.6);
  background: rgba(var(--s), 0.03);
}

.left-sidebar .input-section {
  margin-bottom: 0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Right content area */
.right-content {
  flex: 1;
  height: 100vh;
  overflow-y: auto;
  padding: 32px;
  position: relative;
}

.right-content .columns {
  padding-top: 0;
}

/* ==================== DESKTOP TREE LAYOUT ==================== */

.desktop-layout {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: row;
  position: relative;
  overflow: hidden;
}

/* Top bar: input + query tabs */
.top-bar {
  width: 100%;
  padding: 16px 32px;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100;
}

.desktop-layout.idle .top-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  padding: 0;
}

.desktop-layout.idle .top-bar-inner {
  flex-direction: column;
}

.desktop-layout.has-results .top-bar {
  position: sticky;
  top: 0;
  background: rgba(var(--bg-rgb, 0,0,0), 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(var(--s), 0.06);
}

.top-bar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/* History wheel: horizontal scroll of previous queries, to the left of input */
.history-wheel {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  flex-shrink: 1;
  min-width: 0;
  padding: 4px 0;
  scrollbar-width: none;
  direction: rtl; /* newest items appear closest to input */
}

.history-wheel::-webkit-scrollbar {
  display: none;
}

.history-item {
  direction: ltr;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(var(--s), 0.06);
  border: 1px solid rgba(var(--s), 0.08);
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.2s;
  padding: 0;
  min-height: auto;
  min-width: auto;
}

.history-item:hover {
  border-color: rgba(var(--s), 0.25);
  transform: none;
  box-shadow: none;
}

.history-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.history-text {
  font-size: 9px;
  color: rgba(var(--s), 0.5);
  text-align: center;
  line-height: 1.1;
  padding: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(var(--s), 0.5);
  animation: pulse 1.5s infinite;
}

.history-close {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(var(--s), 0.15);
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  color: rgba(var(--s), 0.85);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}

.history-item:hover .history-close {
  opacity: 1;
}

.history-close:hover {
  background: rgba(var(--s), 0.3);
}

.top-bar-input {
  flex: 1;
  min-width: 200px;
  position: relative;
}

/* Desktop: camera button fixed at top center of viewport */
.desktop-layout > .mode-camera {
  position: fixed;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  opacity: 0.25;
  transition: opacity 0.2s;
}

.desktop-layout > .mode-camera:hover,
.desktop-layout > .mode-camera.active {
  opacity: 1;
}

/* Prevent hover lift from breaking camera's fixed centering */
.desktop-layout > .mode-camera:hover {
  transform: translateX(-50%);
}

/* Desktop: other mode buttons appear inside input on hover only */
.top-bar-input > .mode-row {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease 0.12s;
  animation: none;
}

.top-bar-input:hover > .mode-row,
.top-bar-input > .mode-row:has(.active) {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

/* Idle empty state */
.idle-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 0 24px;
}

.idle-title {
  font-size: 30px;
  font-weight: 300;
  color: rgba(var(--s), 0.9);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.idle-hint {
  font-size: 14px;
  font-weight: 300;
  color: rgba(var(--s), 0.55);
  letter-spacing: 0.01em;
  max-width: 340px;
}

/* Tree content area */
.tree-content {
  flex: 1;
  padding: 32px;
}

/* Brain-split layout — visual left (right brain), text+controls right (left brain) */
.brain-split {
  flex: 1;
  display: flex;
  min-height: 0;
  height: 100%;
}

.viewport-left {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.panel-right {
  width: var(--pr-width, 380px);
  min-width: var(--pr-min-w, 320px);
  max-width: var(--pr-max-w, 800px);
  height: 100%;
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(var(--s), 0.06);
  background: rgba(var(--s), 0.02);
  flex-shrink: 0;
}

.panel-resizer {
  flex: 0 0 4px;
  cursor: col-resize;
  background: transparent;
  transition: background 0.15s;
  user-select: none;
  touch-action: none;
}
.panel-resizer:hover,
.panel-resizer:active {
  background: rgba(var(--s), 0.12);
}

.panel-right-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-sm, 8px);
  padding: var(--sp-md, 12px) var(--sp-lg, 16px);
  border-bottom: 1px solid rgba(var(--s), 0.06);
}

.panel-right-controls .top-bar-input {
  flex: 1;
  min-width: 0;
}

/* In the right panel, mode buttons are always visible and flow below input */
.panel-right-controls .top-bar-input > .mode-row {
  position: static;
  transform: none;
  opacity: 1;
  pointer-events: auto;
  margin-top: 8px;
}

.panel-right-rail {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.panel-right-rail .rail-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.panel-right-rail .rail-icon svg {
  width: 18px;
  height: 18px;
}

.panel-right-sidebar {
  border-bottom: 1px solid rgba(var(--s), 0.06);
  padding: var(--sp-sm, 8px) var(--sp-lg, 16px);
  max-height: var(--sb-max-h, 40vh);
  overflow-y: auto;
}

.panel-right-overlay {
  border-bottom: 1px solid rgba(var(--s), 0.06);
  padding: 12px;
  max-height: 50%;
  overflow-y: auto;
}

.panel-right-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: var(--sp-md, 12px);
}

/* Floating mode buttons */
.floating-modes {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
}

.floating-modes .mode-row {
  background: rgba(var(--bg-rgb, 0,0,0), 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 6px;
  border: 1px solid rgba(var(--s), 0.08);
}

/* Expanded mode panels */
.mode-panel {
  position: fixed;
  bottom: 80px;
  right: 24px;
  width: 320px;
  z-index: 99;
  background: rgba(var(--bg-rgb, 0,0,0), 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(var(--s), 0.1);
  border-radius: 16px;
  padding: 16px;
}

/* ==================== SIDEBAR ==================== */

.sidebar-rail {
  width: 40px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  background: rgba(var(--s), 0.02);
  border-right: 1px solid rgba(var(--s), 0.06);
  flex-shrink: 0;
  z-index: 101;
}

.rail-top, .rail-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.rail-top {
  flex: 1;
}

.rail-divider {
  width: 20px;
  height: 1px;
  background: rgba(var(--s), 0.1);
  margin: 6px 0;
}

.rail-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: rgba(var(--s), 0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  padding: 0;
  min-height: auto;
  min-width: auto;
}

.rail-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.25;
}

.rail-icon:hover {
  background: rgba(var(--s), 0.06);
  color: rgba(var(--s), 0.75);
  transform: none;
  box-shadow: none;
}

.rail-icon.active {
  background: rgba(0, 122, 255, 0.1);
  color: rgba(0, 122, 255, 0.85);
}

.sidebar-panel {
  height: 100vh;
  overflow: hidden;
  background: rgba(var(--s), 0.02);
  border-right: 1px solid rgba(var(--s), 0.06);
  flex-shrink: 0;
  position: relative;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-panel.open {
  overflow-y: auto;
}

.sidebar-panel .sidebar-resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  cursor: col-resize;
  z-index: 10;
  transition: background 0.15s;
}

.sidebar-panel .sidebar-resize-handle:hover {
  background: rgba(var(--s), 0.15);
}

.sidebar-panel-inner {
  min-width: 240px;
}

.sidebar-panel-section {
  padding: 16px;
}

.sidebar-panel-title {
  font-size: 11px;
  font-weight: 600;
  color: rgba(var(--s), 0.85);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 12px 0;
}

.sidebar-history-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-history-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--text);
  text-align: left;
  width: 100%;
  transition: background 0.15s;
  min-height: auto;
  min-width: auto;
}

.sidebar-history-item:hover {
  background: rgba(var(--s), 0.06);
  transform: none;
  box-shadow: none;
}

.sidebar-history-item.active {
  background: rgba(var(--s), 0.08);
}

.sidebar-history-img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

.sidebar-history-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(var(--s), 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-history-icon svg {
  color: rgba(var(--s), 0.3);
}

.sidebar-history-text {
  font-size: 13px;
  color: rgba(var(--s), 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.sidebar-history-close {
  opacity: 0;
  background: none;
  border: none;
  color: rgba(var(--s), 0.3);
  cursor: pointer;
  padding: 2px 4px;
  font-size: 14px;
  flex-shrink: 0;
  min-height: auto;
  min-width: auto;
  transition: opacity 0.15s;
}

.sidebar-history-item:hover .sidebar-history-close {
  opacity: 1;
}

.main-content {
  flex: 1;
  min-width: 0;
  height: 100vh;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

@keyframes agent-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ==================== TREE VISUALIZATION ==================== */

.tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
}

.tree-query-title {
  font-size: 13px;
  font-weight: 500;
  color: rgba(var(--s), 0.45);
  text-align: center;
  padding: 2px 0 4px;
  letter-spacing: 0.02em;
}

.tree-loading {
  padding: 16px;
}

.tree-level {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tree-level-parts {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.tree-part-node {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Tree node (image + label) */
.tree-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.tree-node-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border: none;
}

.tree-level-root .tree-node-img {
  width: 90px;
  height: 90px;
}

.tree-node-label {
  font-size: 11px;
  font-weight: 400;
  color: rgba(var(--s), 0.35);
  text-align: center;
}

.tree-node-fraction {
  opacity: 0.6;
}

/* Agent tree — text-primary nodes */
.tree-agents {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
}

.tree-agent-node {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 12px;
  background: transparent;
  border: none;
  border-left: 2px solid var(--agent-color, rgba(255,255,255,0.15));
  cursor: pointer;
  text-align: left;
  font-family: Menlo, Monaco, monospace;
  transition: background 0.15s;
}

.tree-agent-node:hover {
  background: rgba(255,255,255,0.04);
}

.tree-agent-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--agent-color, rgba(255,255,255,0.7));
}

.tree-agent-status {
  font-size: 10px;
  color: rgba(255,255,255,0.25);
  margin-left: auto;
}

.tree-agent-children {
  padding-left: 16px;
}

.tree-agent-children .tree-agent-node {
  padding: 4px 12px;
}

.tree-agent-children .tree-agent-name {
  font-size: 12px;
  font-weight: 400;
}

/* Connector lines */
.tree-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tree-vline {
  width: 1px;
  height: 10px;
  background: rgba(var(--s), 0.12);
}

/* ==================== AGENT TREE (name-first) ==================== */

.agent-tree .tree-level-parts {
  gap: 24px;
}

.agent-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 4px 8px;
  min-width: 80px;
}

.agent-card-small {
  padding: 2px 6px;
}

.agent-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.agent-dot {
  border-radius: 50%;
  flex-shrink: 0;
}

.agent-name {
  font-family: Menlo, Monaco, monospace;
  font-size: 13px;
  font-weight: 500;
  color: rgba(var(--s), 0.92);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.agent-name-root {
  font-size: 15px;
  font-weight: 600;
}

.agent-name-small {
  font-size: 12px;
  font-weight: 400;
  color: rgba(var(--s), 0.75);
}

.agent-status-line {
  font-family: Menlo, Monaco, monospace;
  font-size: 10px;
  color: rgba(var(--s), 0.45);
  padding-left: 14px;
  letter-spacing: 0.02em;
}

.agent-error {
  color: #ef5350;
  opacity: 0.85;
  margin-top: 1px;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Edges — promoted to first-class graph element */
.agent-edge {
  border-radius: 1px;
  transition: background 0.2s, opacity 0.2s, box-shadow 0.2s;
}

.agent-edge-down {
  width: 2px;
  height: 14px;
  margin-bottom: 2px;
  align-self: center;
}

.agent-tree .tree-vline.agent-edge {
  height: 14px;
}

.agent-branch {
  position: relative;
}

/* Full-width 3D section per part */
.tree-section {
  width: 100%;
  margin-top: 8px;
}

.tree-section-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 8px;
}

.tree-section-name {
  font-size: 13px;
  font-weight: 400;
  color: var(--accent-dim);
}

.tree-section-hint {
  font-size: 10px;
  color: rgba(var(--s), 0.3);
}

.tree-section .combined-viewer {
  min-height: 280px;
}

/* ==================== ETYMOLOGY TREE ==================== */

.etym-tree {
  margin: 8px 0 12px;
  padding: 10px 14px;
  border-left: 2px solid rgba(var(--s), 0.12);
}

.etym-header {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(var(--s), 0.3);
  margin-bottom: 8px;
}

.etym-node {
  position: relative;
  padding-left: calc(var(--etym-depth, 0) * 16px);
}

.etym-word-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.etym-word {
  font-size: 14px;
  font-weight: 600;
  color: rgba(var(--s), 0.85);
}

.etym-lang {
  font-size: 11px;
  color: rgba(var(--s), 0.45);
  font-style: italic;
}

.etym-period {
  font-size: 10px;
  color: rgba(var(--s), 0.3);
}

.etym-meaning {
  font-size: 12px;
  color: rgba(var(--s), 0.55);
  margin: 1px 0 0;
  padding-left: 1px;
}

.etym-children {
  position: relative;
  margin-top: 6px;
  padding-left: 12px;
}

.etym-vline {
  position: absolute;
  left: 4px;
  top: 0;
  bottom: 8px;
  width: 1px;
  background: rgba(var(--s), 0.1);
}

/* ==================== END TREE LAYOUT ==================== */

/* ==================== LANGUAGE DIRECTORY ==================== */

.lang-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding: 8px 4px 16px;
}

.lang-grid-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(var(--s), 0.4);
  margin-bottom: 8px;
}

.lang-grid-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.lang-grid-word {
  flex: 1;
  min-width: 160px;
  background: rgba(var(--s), 0.04);
  border: 1px solid rgba(var(--s), 0.15);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 15px;
  color: rgba(var(--s), 0.9);
}

.lang-grid-word:focus {
  outline: none;
  border-color: rgba(var(--s), 0.35);
}

.lang-select {
  min-width: 120px;
}

.lang-grid-hint {
  font-size: 11px;
  color: rgba(var(--s), 0.35);
  margin-top: 8px;
  line-height: 1.4;
}

.lang-columns {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 8px;
}

.lang-column {
  flex: 0 0 200px;
  min-width: 200px;
  background: rgba(var(--s), 0.03);
  border: 1px solid rgba(var(--s), 0.1);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lang-column[draggable='true'] {
  cursor: grab;
}

.lang-column-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lang-drag-handle {
  color: rgba(var(--s), 0.25);
  font-size: 12px;
  cursor: grab;
  user-select: none;
}

.lang-column-head .lang-select {
  flex: 1;
  min-width: 0;
}

.lang-column-remove {
  background: none;
  border: none;
  color: rgba(var(--s), 0.35);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.lang-column-remove:hover {
  color: rgba(var(--s), 0.7);
}

.lang-result {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lang-word {
  font-size: 20px;
  font-weight: 600;
  color: rgba(var(--s), 0.92);
  word-break: break-word;
}

.lang-romanization {
  font-size: 13px;
  font-style: italic;
  color: rgba(var(--s), 0.5);
}

.lang-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 4px;
}

.lang-pos {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(var(--s), 0.35);
}

.lang-meaning {
  font-size: 12px;
  color: rgba(var(--s), 0.6);
}

.lang-placeholder {
  color: rgba(var(--s), 0.2);
  font-size: 18px;
  text-align: center;
  padding: 12px 0;
}

.lang-loading {
  padding: 8px 0;
}

.lang-add-column {
  flex: 0 0 auto;
  align-self: stretch;
  min-width: 110px;
  background: none;
  border: 1px dashed rgba(var(--s), 0.2);
  border-radius: 10px;
  color: rgba(var(--s), 0.45);
  font-size: 13px;
  cursor: pointer;
  padding: 10px;
}

.lang-add-column:hover {
  border-color: rgba(var(--s), 0.4);
  color: rgba(var(--s), 0.7);
}

.lang-grid-footer {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--s), 0.08);
}

.lang-hotel-link {
  font-size: 12px;
  color: rgba(var(--s), 0.4);
  text-decoration: none;
}

.lang-hotel-link:hover {
  color: rgba(var(--s), 0.7);
  text-decoration: underline;
}

/* ==================== END LANGUAGE DIRECTORY ==================== */

.main {
  position: relative;
  padding: 32px;
  padding-top: 96px;
  user-select: text;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  animation: fadeInUp 0.6s ease-out;
}

@media (max-width: 768px) {
  .main {
    padding: 24px;
    padding-top: 72px;
  }
  
  /* Mobile reordered layout */
  .main.mobile-reordered {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 72px);
    padding-bottom: 0;
  }
  
  .input-section {
    margin-bottom: 40px;
  }
  
  /* Mobile: columns positioned at top after title */
  .columns.mobile-top {
    flex: 1;
    margin-bottom: 0;
    overflow-y: auto;
    padding-bottom: 20px;
  }
  
  /* Mobile: input section at bottom for thumb reach */
  .input-section.mobile-bottom {
    position: sticky;
    bottom: 0;
    background: var(--bg-gradient);
    padding: 20px 0 24px 0;
    margin: 0;
    border-top: 1px solid rgba(var(--s), 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10;
    flex-shrink: 0;
  }
  
  .settings-btn {
    top: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
  
  .column {
    min-width: 100%;
    margin-bottom: 24px;
  }
}

.columns {
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
  z-index: 1;
  user-select: text;
  width: 100%;
}

.columns > .column {
  animation: slideInFromRight 0.5s ease-out;
  animation-fill-mode: both;
}

.columns > .column:nth-child(1) { animation-delay: 0.1s; }
.columns > .column:nth-child(2) { animation-delay: 0.2s; }
.columns > .column:nth-child(3) { animation-delay: 0.3s; }

@media (min-width: 1200px) {
  .columns {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 16px;
    padding: 0 8px;
  }
  
  .columns > .column {
    animation: scaleIn 0.4s ease-out;
  }
}

.columns > * {
  flex: 0 0 auto;
}

.column {
  min-width: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  position: relative;
  z-index: 1;
  user-select: text;
  display: flex;
  flex-direction: column;
}

.input-base,
.app .input-base,
input.input-base {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  padding: 16px 20px;
  background: rgba(var(--s), 0.04);
  border: 1px solid rgba(var(--s), 0.08);
  border-radius: 12px;
  color: var(--text);
  caret-color: #007aff;
  font-size: 16px;
  line-height: 1.5;
  outline: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, 'SF Pro Display', sans-serif;
  font-weight: 400;
  min-height: 52px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.input-base::placeholder {
  color: rgba(var(--s), 0.85);
  font-weight: 400;
}

.input-base:focus {
  background: rgba(var(--s), 0.06);
  border-color: rgba(0, 122, 255, 0.4);
  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
}

.input-error {
  border: 1px solid rgba(255, 100, 100, 0.5) !important;
}

.btn-icon {
  background: linear-gradient(135deg, rgba(var(--s), 0.08) 0%, rgba(var(--s), 0.12) 100%);
  border: 1px solid rgba(var(--s), 0.1);
  border-radius: 14px;
  color: var(--text);
  padding: 0;
  cursor: pointer;
  font-size: 20px;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}

.btn-icon:hover {
  background: linear-gradient(135deg, rgba(var(--s), 0.12) 0%, rgba(var(--s), 0.18) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.btn-icon:active {
  transform: translateY(0);
}

.btn-ghost {
  background: rgba(var(--s), 0.08);
  border: none;
  color: rgba(var(--s), 0.9);
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.2s;
  font-weight: 500;
  min-height: 40px;
}

.btn-ghost.active {
  background: rgba(var(--s), 0.15);
  color: var(--text);
}

/* Force black around scrollable areas */
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar { background: var(--bg); height: 8px; width: 8px; }
::-webkit-scrollbar-thumb { background: rgba(var(--s), 0.2); border-radius: 4px; }

* {
  box-sizing: border-box;
  user-select: text;
}

/* Prevent body-level horizontal scrolling issues */
html, body { overflow-y: auto; }

/* No extraneous lines or borders per UI rules */
button {
  background: linear-gradient(135deg, rgba(var(--s), 0.08) 0%, rgba(var(--s), 0.12) 100%);
  border: 1px solid rgba(var(--s), 0.1);
  color: var(--text);
  cursor: pointer;
  padding: 16px 24px;
  user-select: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  outline: none;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}

button:hover {
  background: linear-gradient(135deg, rgba(var(--s), 0.12) 0%, rgba(var(--s), 0.18) 100%);
  border-color: rgba(var(--s), 0.15);
  transform: translateY(-1px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

button:active {
  transform: translateY(0);
  transition: transform 0.1s ease;
}

input {
  background: rgba(var(--s), 0.1);
  border: none;
  color: var(--text);
  padding: 14px 16px;
  border-radius: 8px;
  outline: none;
  font-size: 16px;
  min-height: 48px;
}

input::placeholder {
  color: rgba(var(--s), 0.7);
}

/* ==================== TEXT SELECTION FIX ==================== */

/* Ensure text elements allow proper selection */
p, div, span, pre, code {
  user-select: text !important;
}

/* Prevent selection on interactive elements */
button, input, canvas, video, svg {
  user-select: none !important;
}

/* ==================== MOLECULAR VIEWER ESSENTIAL STYLES ==================== */

/* 3Dmol.js integration */
.threeDmol-ui,
.threeDmol-ui *,
[class*="threeDmol"],
[class*="3Dmol"],
[class*="3dmol"] {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  user-select: none !important;
}


/* Main 3Dmol viewer container (legacy support) */
#gldiv {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding: 20px;
  background: var(--bg);
  min-height: 100px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Object column container (legacy support) */
.object-column {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  flex-shrink: 0;
}

@media (min-width: 1200px) {
  .object-column {
    min-width: 360px;
    width: auto;
  }
}

.object-title {
  color: rgba(var(--s), 0.9);
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  padding: 8px 12px;
  background: rgba(var(--s), 0.02);
  border-radius: 4px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.column-close {
  background: rgba(var(--s), 0.1);
  border: none;
  color: rgba(var(--s), 0.8);
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  outline: none;
}

.column-close:hover {
  color: var(--text);
  background: rgba(var(--s), 0.1);
}

/* (Removed unused viewer and layout classes per icons-only minimal UI) */

/* Ensure proper canvas alignment and visibility */
canvas[class*="3dmol"],
canvas[class*="threeDmol"] {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  position: relative !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Query sections — left sidebar section list */
.query-sections {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding: 4px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--s), 0.1) transparent;
}

.query-section {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: rgba(var(--s), 0.5);
  cursor: pointer;
  font-size: 13px;
  text-align: left;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  min-height: 0;
  font-family: inherit;
}

.query-section:hover {
  background: rgba(var(--s), 0.05);
  color: rgba(var(--s), 0.8);
}

.query-section.active {
  background: rgba(var(--s), 0.08);
  color: rgba(var(--s), 0.95);
}

.query-section-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(var(--s), 0.15);
  flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.query-section.active .query-section-indicator {
  background: #64b5f6;
  box-shadow: 0 0 8px rgba(100, 181, 246, 0.5);
}

.query-section.loading .query-section-indicator {
  background: #ffb74d;
  animation: pulse 1.5s ease-in-out infinite;
}

.query-section.failed .query-section-indicator {
  background: #ef5350;
}

.query-section-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
}

.query-section.active .query-section-label {
  font-weight: 500;
}

.query-section-status {
  font-size: 11px;
  color: #ffb74d;
  flex-shrink: 0;
}

.sidebar-object-image {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 8px;
  filter: drop-shadow(0 2px 8px rgba(var(--s), 0.3));
}

.query-section-thumb {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(var(--s), 0.2));
}

.query-section-remove {
  opacity: 0;
  background: none;
  border: none;
  color: rgba(var(--s), 0.3);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  flex-shrink: 0;
  min-height: 0;
  min-width: 0;
  transition: opacity 0.15s, color 0.15s;
}

.query-section:hover .query-section-remove {
  opacity: 1;
}

.query-section-remove:hover {
  color: rgba(var(--s), 0.7);
}

/* Empty right pane */
.empty-right-pane {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.empty-right-hint {
  font-size: 15px;
  color: rgba(var(--s), 0.15);
  font-weight: 300;
  letter-spacing: 0.02em;
}

/* Active section fills the right pane */
.active-section-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.active-section-view > .column {
  flex: 1;
  min-width: 0;
  animation: fadeInUp 0.35s ease-out;
}

/* ==================== NEURAL NET ICON & CONTACT SELECTOR ==================== */

.neural-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: rgba(var(--s), 0.65);
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s;
  flex-shrink: 0;
}

.neural-icon:hover {
  color: rgba(var(--s), 0.7);
  background: rgba(var(--s), 0.06);
}

.neural-icon.active {
  color: rgba(var(--s), 0.8);
  background: rgba(var(--s), 0.1);
}

.neural-icon.has-contact {
  color: rgba(var(--s), 0.7);
}

.contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 6px;
  border-radius: 12px;
  border: 1px solid;
  font-size: 11px;
  font-weight: 500;
  color: rgba(var(--s), 0.7);
  background: rgba(var(--s), 0.04);
  white-space: nowrap;
  flex-shrink: 0;
}

.contact-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.contact-selector {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-width: 340px;
  margin-top: 6px;
  background: rgba(var(--s), 0.03);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(var(--s), 0.1);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  z-index: 100;
  overflow: hidden;
  animation: fadeIn 0.15s ease-out;
}

.contact-selector.inline {
  position: static;
  max-width: none;
  margin-top: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  animation: none;
}

.contact-selector.inline .contact-list {
  max-height: none;
}

.contact-search {
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-bottom: 1px solid rgba(var(--s), 0.08);
  background: transparent;
  color: rgba(var(--s), 0.8);
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
}

.contact-search::placeholder {
  color: rgba(var(--s), 0.3);
}

.contact-list {
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: rgba(var(--s), 0.7);
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s;
  text-align: left;
  font-size: 13px;
}

.contact-item:hover {
  background: rgba(var(--s), 0.06);
}

.contact-item.active {
  background: rgba(var(--s), 0.1);
}

.contact-name {
  flex: 1;
  font-weight: 500;
}

.contact-type {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(var(--s), 0.85);
}

.contact-empty {
  padding: 16px;
  text-align: center;
  color: rgba(var(--s), 0.3);
  font-size: 12px;
}

.contact-group-label {
  padding: 6px 12px 2px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(var(--s), 0.3);
}

.contact-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.contact-connect-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  margin-top: 2px;
  border: none;
  border-top: 1px solid rgba(var(--s), 0.06);
  background: transparent;
  color: rgba(var(--s), 0.45);
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s;
}

.contact-connect-btn:hover {
  background: rgba(var(--s), 0.04);
  color: rgba(var(--s), 0.7);
}

.connect-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(var(--s), 0.08);
}

.connect-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(var(--s), 0.7);
}

.connect-form {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.connect-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.connect-preset {
  padding: 4px 10px;
  border: 1px solid rgba(var(--s), 0.1);
  border-radius: 12px;
  background: transparent;
  color: rgba(var(--s), 0.5);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
}

.connect-preset:hover {
  background: rgba(var(--s), 0.06);
  color: rgba(var(--s), 0.7);
}

.connect-preset.active {
  background: rgba(var(--s), 0.1);
  color: rgba(var(--s), 0.8);
  border-color: rgba(var(--s), 0.2);
}

.connect-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(var(--s), 0.1);
  border-radius: 8px;
  background: transparent;
  color: rgba(var(--s), 0.8);
  font-size: 12px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.connect-input:focus {
  border-color: rgba(var(--s), 0.25);
}

.connect-input::placeholder {
  color: rgba(var(--s), 0.3);
}

.connect-error {
  font-size: 11px;
  color: #ef5350;
}

.connect-submit {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: rgba(var(--s), 0.1);
  color: rgba(var(--s), 0.7);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.connect-submit:hover:not(:disabled) {
  background: rgba(var(--s), 0.15);
  color: rgba(var(--s), 0.9);
}

.connect-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.connect-tip {
  font-size: 11px;
  color: rgba(var(--s), 0.5);
  line-height: 1.4;
  padding: 4px 2px;
}

.connect-divider {
  text-align: center;
  font-size: 11px;
  color: rgba(var(--s), 0.25);
  padding: 4px 0;
}

.connect-drop-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border: 1.5px dashed rgba(var(--s), 0.12);
  border-radius: 8px;
  color: rgba(var(--s), 0.35);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
}

.connect-drop-zone:hover,
.connect-drop-zone.active {
  border-color: rgba(var(--s), 0.3);
  color: rgba(var(--s), 0.6);
  background: rgba(var(--s), 0.03);
}

.connect-form.dragging {
  background: rgba(var(--s), 0.02);
}

/* Used by ContactSelector's "back" button */
.chat-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: rgba(var(--s), 0.5);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s;
}

.chat-back-btn:hover {
  background: rgba(var(--s), 0.06);
  color: rgba(var(--s), 0.8);
}

@keyframes typingBounce {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}

/* ==================== THEME DOT ==================== */

.theme-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.3s;
  opacity: 0.5;
  padding: 0;
  margin-left: 4px;
}

.theme-dot:hover {
  opacity: 1;
  transform: scale(1.6);
}

.theme-dot.night {
  background: #5c6bc0;
  box-shadow: 0 0 0 0 transparent;
}

.theme-dot.day {
  background: #ffb74d;
  box-shadow: 0 0 0 0 transparent;
}

.theme-dot.auto {
  background: linear-gradient(135deg, #ffb74d 50%, #5c6bc0 50%);
}

.theme-dot:hover::after {
  content: attr(title);
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(var(--s), 0.08);
  backdrop-filter: blur(12px);
  color: rgba(var(--s), 0.6);
  font-size: 10px;
  white-space: nowrap;
  pointer-events: none;
}

.text-input-wrapper {
  position: relative;
}

.input-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 24px;
  animation: fadeInUp 0.5s ease-out;
}

@media (max-width: 768px) {
  .input-wrapper {
    padding-right: 0;
  }
}

.input-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.primary-cta {
  margin-top: 12px;
  width: 100%;
}


.error-text {
  color: #ff8888;
  font-size: 14px;
  font-weight: 500;
  margin-top: 12px;
  padding: 0 4px;
}

/* Error Banner */
.error-banner {
  background: linear-gradient(135deg, rgba(255, 68, 68, 0.12) 0%, rgba(255, 68, 68, 0.08) 100%);
  border: 1px solid rgba(255, 68, 68, 0.3);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  animation: fadeInUp 0.3s ease-out;
}

.error-banner-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.error-banner-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.error-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.error-message {
  flex: 1;
  color: #ff9999;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}

.error-dismiss {
  background: transparent;
  border: none;
  color: rgba(var(--s), 0.5);
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
  flex-shrink: 0;
}

.error-dismiss:hover {
  color: rgba(var(--s), 0.8);
}

.error-recovery {
  background: rgba(var(--s), 0.05);
  border-radius: 8px;
  padding: 12px;
  font-size: 14px;
  color: #ffcc99;
}

.error-details-section {
  border-top: 1px solid rgba(var(--s), 0.1);
  padding-top: 12px;
}

.error-details-toggle {
  background: transparent;
  border: none;
  color: rgba(var(--s), 0.7);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}

.error-details-toggle:hover {
  color: rgba(var(--s), 0.9);
}

.error-details-content {
  margin-top: 12px;
  font-size: 13px;
  color: rgba(var(--s), 0.85);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.error-details-content pre {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  padding: 8px;
  overflow-x: auto;
  font-size: 12px;
  margin: 4px 0 0 0;
}

.error-details-content strong {
  color: rgba(var(--s), 0.8);
}

/* Vertical right-edge mode menu */
.desktop-layout {
  padding-right: 42px;
  transition: padding-right 0.2s ease;
}
.desktop-layout:has(.mode-menu:not(.collapsed)) {
  padding-right: 140px;
}

.mode-menu {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 6px;
  background: rgba(var(--s), 0.04);
  border-left: 1px solid rgba(var(--s), 0.08);
  border-top: 1px solid rgba(var(--s), 0.08);
  border-bottom: 1px solid rgba(var(--s), 0.08);
  border-radius: 10px 0 0 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: width 0.2s ease;
  width: 140px;
}

.mode-menu.collapsed {
  width: 42px;
}

.mode-menu-toggle {
  background: transparent;
  border: none;
  color: rgba(var(--s), 0.6);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}

.mode-menu-toggle:hover {
  color: rgba(var(--s), 0.95);
  background: rgba(var(--s), 0.06);
}

.mode-menu-item {
  background: transparent;
  border: 1px solid transparent;
  color: rgba(var(--s), 0.75);
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  transition: all 0.15s;
  white-space: nowrap;
  overflow: hidden;
}

.mode-menu.collapsed .mode-menu-item {
  justify-content: center;
  padding: 8px;
}

.mode-menu-item:hover {
  background: rgba(var(--s), 0.06);
  color: rgba(var(--s), 0.95);
  border-color: rgba(var(--s), 0.08);
}

.mode-menu-item.active {
  background: linear-gradient(135deg, rgba(0, 122, 255, 0.15) 0%, rgba(0, 122, 255, 0.22) 100%);
  border-color: rgba(0, 122, 255, 0.3);
  color: var(--text);
}

.mode-menu-item svg {
  flex-shrink: 0;
}

.mode-menu-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Input-method row — sits beside TextInput, selects how input is provided */
.input-method-row {
  display: inline-flex;
  gap: 4px;
  margin-left: 6px;
  align-items: center;
}

.input-method-btn {
  background: transparent;
  border: 1px solid rgba(var(--s), 0.08);
  color: rgba(var(--s), 0.65);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  padding: 0;
}

.input-method-btn:hover {
  color: rgba(var(--s), 0.95);
  border-color: rgba(var(--s), 0.18);
  background: rgba(var(--s), 0.05);
}

.input-method-btn.active {
  background: rgba(0, 122, 255, 0.18);
  border-color: rgba(0, 122, 255, 0.35);
  color: var(--text);
}

/* Mode selector */
.mode-row {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  animation: fadeInUp 0.6s ease-out 0.1s both;
}


/* Input method panel — appears below top bar in main content */
.input-method-panel {
  padding: 16px 32px;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}

.mode-btn {
  background: linear-gradient(135deg, rgba(var(--s), 0.06) 0%, rgba(var(--s), 0.08) 100%);
  border: 1px solid rgba(var(--s), 0.08);
  color: rgba(var(--s), 0.9);
  padding: 0;
  width: 44px;
  height: 44px;
  min-height: 44px;
  min-width: 44px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}

.mode-btn svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  stroke-width: 2.25;
}

.mode-btn:hover {
  background: linear-gradient(135deg, rgba(var(--s), 0.08) 0%, rgba(var(--s), 0.12) 100%);
  border-color: rgba(var(--s), 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.mode-btn.active {
  background: linear-gradient(135deg, rgba(0, 122, 255, 0.15) 0%, rgba(0, 122, 255, 0.25) 100%);
  border-color: rgba(0, 122, 255, 0.3);
  color: var(--text);
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.1);
}

/* Mobile: show label text, buttons expand to fit */
.mode-label {
  font-size: 12px;
}

.mode-btn:has(.mode-label) {
  width: auto;
  padding: 0 12px;
}

.lookup-mode-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  animation: fadeInUp 0.6s ease-out 0.15s both;
}

.lookup-mode-btn {
  background: linear-gradient(135deg, rgba(var(--s), 0.04) 0%, rgba(var(--s), 0.06) 100%);
  border: 1px solid rgba(var(--s), 0.06);
  color: rgba(var(--s), 0.8);
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.lookup-mode-btn:hover {
  background: linear-gradient(135deg, rgba(var(--s), 0.06) 0%, rgba(var(--s), 0.08) 100%);
  border-color: rgba(var(--s), 0.1);
  color: rgba(var(--s), 0.95);
}

.lookup-mode-btn.active {
  background: linear-gradient(135deg, rgba(0, 122, 255, 0.12) 0%, rgba(0, 122, 255, 0.2) 100%);
  border-color: rgba(0, 122, 255, 0.25);
  color: var(--text);
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.08);
}

/* Camera section */
.camera-container {
  width: 100%;
}

.camera-box {
  position: relative;
  width: 100%;
  max-width: 600px;
  border-radius: 8px;
  overflow: hidden;
  cursor: crosshair;
  background: #000;
  aspect-ratio: 4 / 3;
  margin: 0 auto;
}

/* Responsive camera sizing */
@media (max-width: 768px) {
  .camera-box {
    max-width: 100%;
    border-radius: 12px;
  }
}

@media (min-width: 1200px) {
  .camera-box {
    max-width: 700px;
  }
}

.camera-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: crosshair;
}

.camera-controls {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  justify-content: center;
}

.switch-camera-btn {
  padding: 8px 16px;
  background: #34495e;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s ease;
}

.switch-camera-btn:hover {
  background: #2c3e50;
}

.camera-permission {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text);
  text-align: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 8px;
  font-size: 14px;
}

.click-outline {
  position: absolute;
  border: 2px solid #ffffff;
  background: transparent;
  pointer-events: none;
  z-index: 100;
  box-shadow: none;
  border-radius: 0;
  animation: none;
}

.camera-switch {
  position: absolute;
  top: 12px;
  right: 12px;
}

.camera-switch .btn-ghost {
  background: rgba(var(--s), 0.1);
  border: none;
  border-radius: 8px;
  color: var(--text);
  width: 44px;
  height: 44px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
}

.hidden {
  display: none !important;
}

/* Input section layout with automatic spacing */
.input-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 32px;
}

.btn-upload {
  width: 100%;
  padding: 12px;
  background: rgba(var(--s), 0.08);
  border: none;
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.dropzone {
  width: 100%;
  height: 220px;
  border: 2px dashed rgba(var(--s), 0.15);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(var(--s), 0.02);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  gap: 16px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  position: relative;
  overflow: hidden;
}

.dropzone:hover {
  border-color: rgba(0, 122, 255, 0.4);
  background: rgba(0, 122, 255, 0.04);
  transform: scale(1.02);
}

.dropzone.dragover {
  background: rgba(0, 122, 255, 0.08);
  border-color: rgba(0, 122, 255, 0.5);
  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
  transform: scale(1.02);
}

.dropzone svg {
  opacity: 0.6;
}

.preview-image {
  display: block;
  max-width: 100%;
  max-height: 180px;
  margin-top: 12px;
  border-radius: 4px;
}

.url-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.url-input {
  flex: 1;
}

.btn-icon:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.molecule-card {
  margin-bottom: 12px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.molecule-card:hover {
  transform: none;
}

.molecule-header-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 4px;
}

.molecule-amount {
  font-size: 22px;
  font-weight: 300;
  color: var(--accent);
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.molecule-name {
  font-size: 14px;
  font-weight: 400;
  color: rgba(var(--s), 0.45);
}

.molecule-name a {
  color: rgba(var(--s), 0.45);
  text-decoration: none;
  transition: color 0.15s;
}

.molecule-name a:hover {
  color: var(--accent);
}

.viewer {
  height: 240px;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(var(--s), 0.85);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.combined-viewer-card {
  background: transparent;
  border: none;
  padding: 0;
}

.combined-viewer {
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(var(--s), 0.85);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.spatial-layout {
  display: flex;
  gap: 16px;
}

.spatial-layout .combined-viewer-card {
  flex: 1;
  min-width: 0;
}

.chemical-list {
  width: 180px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
  overflow-y: auto;
}

.chemical-list-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.chemical-list-pct {
  font-size: 13px;
  font-weight: 300;
  color: var(--accent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: right;
}

.chemical-list-name {
  font-size: 12px;
  color: rgba(var(--s), 0.85);
  text-decoration: none;
  transition: color 0.15s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chemical-list-name:hover {
  color: var(--accent);
}

.chemical-list-detail {
  font-size: 10px;
  color: rgba(var(--s), 0.25);
  font-weight: 300;
  white-space: nowrap;
  margin-left: auto;
}

.column-header {
  display: none;
}

.column-context {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 4px;
  margin-bottom: 8px;
}

.column-object-size {
  font-size: 12px;
  color: rgba(var(--s), 0.3);
  font-weight: 300;
}

.column-sample-size {
  font-size: 12px;
  color: rgba(var(--s), 0.3);
  font-weight: 300;
}

.column-mode-toggle {
  cursor: pointer;
  user-select: none;
  border-bottom: 1px dotted rgba(var(--s), 0.2);
}

.column-mode-toggle:hover {
  color: rgba(var(--s), 0.85);
}

.column-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
}

.column-loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(var(--s), 0.3);
  animation: pulse 1.5s ease-in-out infinite;
}

.column-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: text;
  flex: 1;
}

.column-icon {
  opacity: 0.8;
  font-size: 16px;
  user-select: none;
  min-width: 16px;
}

.column-title {
  font-size: 16px;
  opacity: 0.9;
  color: var(--text);
  font-weight: 500;
}

.alert-warning {
  margin-bottom: 20px;
  padding: 16px 20px;
  background: rgba(255, 193, 7, 0.12);
  border: 1px solid rgba(255, 193, 7, 0.4);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 193, 7, 0.95);
}

.alert-info {
  margin-bottom: 20px;
  padding: 16px 20px;
  background: rgba(13, 110, 253, 0.12);
  border: 1px solid rgba(13, 110, 253, 0.4);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(13, 110, 253, 0.95);
}

/* Settings */
.settings-btn {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--s), 0.08) 0%, rgba(var(--s), 0.12) 100%);
  border: 1px solid rgba(var(--s), 0.1);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  z-index: 100;
  outline: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: scaleIn 0.4s ease-out 0.3s both;
}

.settings-btn:hover {
  background: linear-gradient(135deg, rgba(var(--s), 0.12) 0%, rgba(var(--s), 0.18) 100%);
  transform: scale(1.05) rotate(90deg);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.settings-modal {
  position: absolute;
  top: 68px;
  right: 12px;
  background: var(--modal-bg);
  border: 1px solid rgba(var(--s), 0.12);
  border-radius: 20px;
  padding: 24px;
  min-width: 320px;
  max-width: calc(100vw - 48px);
  z-index: 99;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 4px 16px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(var(--s), 0.08);
}

@media (max-width: 768px) {
  .settings-modal {
    position: fixed;
    top: 60px;
    right: 10px;
    left: 10px;
    max-width: none;
  }
}

.settings-title {
  margin: 0 0 15px 0;
  font-size: 16px;
  color: var(--text);
}

.settings-field { margin-bottom: 15px; }
.settings-hint { display: block; font-size: 12px; color: rgba(var(--s), 0.4); margin-top: 4px; }

.label {
  font-size: 14px;
  color: var(--text);
  margin-bottom: 8px;
  display: block;
}

.select {
  width: 100%;
  padding: 8px 12px;
  background: rgba(var(--s), 0.1);
  border: 1px solid rgba(var(--s), 0.2);
  border-radius: 4px;
  color: var(--text);
  font-size: 14px;
}

.select option {
  background: var(--bg);
  color: var(--text);
}

.checkbox-input {
  margin-right: 8px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  cursor: pointer;
}

.settings-close {
  background: rgba(var(--s), 0.1);
  border: 1px solid rgba(var(--s), 0.2);
  border-radius: 4px;
  color: var(--text);
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  width: 100%;
}

/* ==================== QUICK SETUP COMPONENT STYLES ==================== */

.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 40px 20px;
  background: var(--bg);
  min-height: 100vh;
}

.container header {
  text-align: center;
  margin-bottom: 40px;
}

.container h1 {
  font-size: 28px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px 0;
}

.subtitle {
  font-size: 16px;
  color: rgba(var(--s), 0.7);
  margin: 0 0 20px 0;
}

.back-link {
  display: inline-flex;
  align-items: center;
  color: rgba(var(--s), 0.8);
  text-decoration: none;
  font-size: 14px;
  padding: 8px 16px;
  background: rgba(var(--s), 0.08);
  border-radius: 6px;
  transition: all 0.2s;
}

.back-link:hover {
  background: rgba(var(--s), 0.12);
  color: var(--text);
}

.setup-container {
  background: rgba(var(--s), 0.05);
  border-radius: 12px;
  padding: 30px;
  border: 1px solid rgba(var(--s), 0.1);
}

/* Existing User Section */
.existing-user {
  text-align: center;
}

.user-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(var(--s), 0.08);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
}

.user-info {
  flex: 1;
  text-align: left;
}

.user-info h3 {
  margin: 0 0 8px 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
}

.user-info p {
  margin: 0 0 4px 0;
  color: rgba(var(--s), 0.8);
  font-size: 14px;
}

.usage {
  font-size: 13px !important;
  color: rgba(var(--s), 0.6) !important;
}

/* New User Setup */
.setup-info {
  text-align: center;
  margin-bottom: 30px;
}

.price-display {
  margin-bottom: 16px;
}

.price {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  margin-right: 8px;
}

.per {
  font-size: 16px;
  color: rgba(var(--s), 0.7);
}

.security-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(var(--s), 0.8);
  font-size: 14px;
}


.error-message {
  color: #ff6b6b;
  font-size: 13px;
  margin-top: 8px;
}

.autofill-note {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(var(--s), 0.85);
  font-size: 12px;
  margin-top: 8px;
}

.optional input {
  background: rgba(var(--s), 0.06);
  border: 1px solid rgba(var(--s), 0.15);
  border-radius: 8px;
  padding: 12px 16px;
  color: var(--text);
  font-size: 14px;
  width: 100%;
}

.optional input::placeholder {
  color: rgba(var(--s), 0.7);
}

/* Buttons */
.btn-primary {
  background: rgba(var(--s), 0.9);
  color: var(--bg);
  border: none;
  border-radius: 8px;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
}

.btn-primary:hover {
  background: rgba(var(--s), 1);
  transform: translateY(-1px);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-link {
  background: none;
  border: none;
  color: rgba(var(--s), 0.8);
  text-decoration: underline;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
}

.btn-link:hover {
  color: var(--text);
}

.setup-btn {
  width: 100%;
}

.btn-text-hidden {
  display: none;
}

.btn-loading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-loading-hidden {
  display: none;
}

.spinner {
  animation: spin 1s linear infinite;
}

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

/* Features Section */
.features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.feature {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(var(--s), 0.7);
  font-size: 14px;
}

/* Success State */
.setup-success {
  text-align: center;
  padding: 40px 20px;
}

.success-animation {
  margin-bottom: 20px;
}

.success-animation svg {
  color: #00ff88;
}

.setup-success h3 {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 12px 0;
}

.setup-success p {
  font-size: 16px;
  color: rgba(var(--s), 0.8);
  margin: 0 0 30px 0;
}

/* Responsive */
@media (max-width: 640px) {
  .container {
    padding: 20px 16px;
  }
  
  .setup-container {
    padding: 20px;
  }
  
  .user-card {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  
  .user-info {
    text-align: center;
  }
}

/* Top bar */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 20px;
  background: var(--topbar-bg);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 200;
}

.topbar-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

/* Bottom mobile CTA */
.bottom-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 12px;
  display: none;
  padding: 0 12px;
  z-index: 150;
}

.bottom-cta-btn { width: 100%; }

@media (max-width: 768px) {
  .bottom-cta { display: block; }
  .main { padding-bottom: 92px; }
}

/* ===== Settings drawer ===== */

.settings-backdrop {
  position: fixed;
  inset: 0;
  z-index: 499;
  background: rgba(0, 0, 0, 0.45);
  animation: fadeIn 0.2s ease-out;
}

.settings-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 320px;
  max-width: 90vw;
  background: var(--modal-bg);
  border-left: 1px solid rgba(var(--s), 0.12);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 500;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 32px 24px;
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.25);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.settings-drawer.open {
  transform: translateX(0);
}

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

/* Toggle button — rides the left edge of the drawer */
.settings-drawer-toggle {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 501;
  background: var(--modal-bg);
  border: 1px solid rgba(var(--s), 0.12);
  border-right: none;
  border-radius: 10px 0 0 10px;
  padding: 16px 14px;
  cursor: pointer;
  color: var(--text);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: auto;
  min-width: auto;
  width: auto;
  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s, color 0.4s, border-color 0.4s;
}

.settings-drawer-toggle:hover {
  background: rgba(var(--s), 0.1);
  transform: translateY(-50%);
  box-shadow: none;
}

.settings-drawer-toggle.drawer-open {
  right: 320px;
}

@media (max-width: 768px) {
  .settings-drawer-toggle.drawer-open {
    right: min(320px, 90vw);
  }
}

/* Sun re-detect button */
.settings-sun-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(var(--s), 0.06);
  border: 1px solid rgba(var(--s), 0.1);
  border-radius: 10px;
  padding: 12px 16px;
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  min-height: auto;
  width: 100%;
  justify-content: flex-start;
  transition: background 0.2s, color 0.4s, border-color 0.4s;
}

.settings-sun-btn:hover {
  background: rgba(var(--s), 0.1);
  transform: none;
  box-shadow: none;
}


/* ===== Theme transition ===== */
html, body, .app, .left-sidebar, .column, .input-base, button, .topbar, .settings-modal {
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

/* ===== Day-theme overrides for literal-white text that would vanish on white bg ===== */
html[data-theme="day"] .column-title,
html[data-theme="day"] .topbar-title,
html[data-theme="day"] .settings-title,
html[data-theme="day"] .label,
html[data-theme="day"] .container h1,
html[data-theme="day"] .user-info h3,
html[data-theme="day"] .price,
html[data-theme="day"] .setup-success h3,
html[data-theme="day"] .btn-link,
html[data-theme="day"] .btn-link:hover,
html[data-theme="day"] .column-close,
html[data-theme="day"] .btn-upload,
html[data-theme="day"] .optional input,
html[data-theme="day"] .security-note,
html[data-theme="day"] .autofill-note,
html[data-theme="day"] .subtitle,
html[data-theme="day"] .back-link,
html[data-theme="day"] .feature,
html[data-theme="day"] .user-info p,
html[data-theme="day"] .usage {
  color: var(--text);
}

html[data-theme="day"] .select {
  background: rgba(var(--s), 0.08);
  border-color: rgba(var(--s), 0.2);
  color: var(--text);
}

html[data-theme="day"] .select option {
  background: var(--bg);
  color: var(--text);
}

html[data-theme="day"] .topbar {
  color: var(--text);
}

/* ===== Material Image ===== */

@keyframes materialPulse {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

@keyframes materialShimmer {
  0% { opacity: 0.3; }
  50% { opacity: 0.7; }
  100% { opacity: 0.3; }
}

.material-image-3d {
  width: 100%;
  height: 260px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 6px;
}

.material-image-3d canvas {
  cursor: grab;
}

.material-image-3d canvas:active {
  cursor: grabbing;
}

.material-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  cursor: crosshair;
  background: transparent;
  margin-bottom: 6px;
}

.material-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 4px rgba(var(--s), 0.35));
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
}

.material-image img.cropped {
  /* transform is set inline via style prop */
}

.material-image-pulse {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid rgba(var(--s), 0.5);
  pointer-events: none;
  animation: materialPulse 0.8s ease-out forwards;
}

.material-image-loading {
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-top-color: rgba(var(--s), 0.4);
  border-radius: 8px;
  animation: materialShimmer 1.2s ease-in-out infinite;
  pointer-events: none;
}

.material-image-label {
  position: absolute;
  bottom: 6px;
  left: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  background: rgba(var(--s), 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(var(--s), 0.12);
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.02em;
}

.material-image-label:hover {
  background: rgba(var(--s), 0.15);
}

.material-image-reset {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(var(--s), 0.15);
  background: rgba(var(--s), 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.material-image-reset:hover {
  opacity: 1;
  background: rgba(var(--s), 0.12);
}

/* ===== Compact Chemical List ===== */

/* ===== Cross-Section Viewer ===== */

.cross-section-viewer {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}

.cross-section-title {
  font-size: 12px;
  color: rgba(var(--s), 0.85);
  padding: 6px 8px 2px;
  font-weight: 300;
}

/* ===== Parts Columns (Decomposed Objects) ===== */

.parts-columns {
  display: flex;
  gap: 2px;
  width: 100%;
  overflow-x: auto;
  align-items: flex-start;
}

.part-column {
  flex: 1;
  min-width: 140px;
  max-width: 260px;
}

.part-column-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 6px 8px;
  border-bottom: 1px solid rgba(var(--s), 0.08);
}

.part-column-image {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 6px;
  filter: drop-shadow(0 1px 3px rgba(var(--s), 0.2));
}

.part-column-name {
  font-size: 13px;
  font-weight: 500;
  color: rgba(var(--s), 0.8);
  text-align: center;
  line-height: 1.3;
}

.part-column-fraction {
  font-size: 11px;
  color: rgba(var(--s), 0.3);
  font-weight: 300;
  margin-top: 2px;
}

.part-chemicals {
  margin: 0;
  padding: 4px 0;
}

.part-chemical-entry {
  margin-bottom: 4px;
}

.part-chemical-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 2px 6px 6px;
}

.part-chemical-name {
  font-size: 12px;
  color: rgba(var(--s), 0.85);
}

.part-chemical-amount {
  font-size: 11px;
  color: var(--accent-dim);
  font-weight: 300;
  flex-shrink: 0;
  margin-left: 8px;
}

.chemical-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.chemical-list-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 6px 4px;
  border-bottom: 1px solid rgba(var(--s), 0.05);
}

.chemical-list-item:last-child {
  border-bottom: none;
}

.chemical-list-name {
  font-size: 14px;
  font-weight: 400;
  color: rgba(var(--s), 0.85);
  text-decoration: none;
  transition: color 0.15s;
}

.chemical-list-name:hover {
  color: rgba(var(--s), 0.9);
}

.chemical-list-amount {
  font-size: 12px;
  color: rgba(var(--s), 0.3);
  font-weight: 300;
  flex-shrink: 0;
  margin-left: 12px;
}

/* CLI mode: left terminal + right verb docs */
.cli-split {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 12px;
  padding: 0 12px 12px;
}

.cli-split-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.cli-terminal-wrap {
  flex: 1;
  min-height: 0;
  margin-top: 8px;
}

.cli-split-right {
  width: 320px;
  flex-shrink: 0;
  overflow-y: auto;
  border-left: 1px solid rgba(var(--s), 0.08);
  padding-left: 12px;
}

.verb-docs {
  color: rgba(var(--s), 0.9);
  font-size: 12px;
}

.verb-docs-title {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 4px;
  color: rgba(var(--s), 0.95);
}

.verb-docs-hint {
  font-size: 11px;
  color: rgba(var(--s), 0.5);
  margin: 0 0 12px;
  line-height: 1.4;
}

.verb-docs-empty {
  font-size: 11px;
  color: rgba(var(--s), 0.5);
  padding: 8px 0;
}

.verb-docs-error {
  color: #ff6b6b;
}

.verb-docs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.verb-docs-item {
  margin: 0;
}

.verb-docs-button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid rgba(var(--s), 0.06);
  border-radius: 6px;
  padding: 8px 10px;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}

.verb-docs-button:hover {
  background: rgba(var(--s), 0.04);
  border-color: rgba(var(--s), 0.15);
}

.verb-docs-name {
  display: block;
  font-family: Menlo, Monaco, "Courier New", monospace;
  font-size: 12px;
  font-weight: 600;
  color: rgba(var(--s), 0.95);
  margin-bottom: 2px;
}

.verb-docs-desc {
  display: block;
  font-size: 11px;
  color: rgba(var(--s), 0.55);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* ===== Seed Planter ===== */

.seed-planter {
  animation: fadeInUp 0.4s ease-out both;
  margin-top: 12px;
}

.seed-planter-header {
  text-align: center;
  margin-bottom: 16px;
}

.seed-planter-icon {
  width: 36px;
  height: 36px;
  color: #4ade80;
  margin: 0 auto 8px;
  display: block;
}

.seed-planter-title {
  font-size: 16px;
  font-weight: 600;
  color: rgba(var(--s), 0.95);
  margin: 0 0 4px;
}

.seed-planter-subtitle {
  font-size: 13px;
  color: rgba(var(--s), 0.5);
  margin: 0;
  line-height: 1.4;
}

.seed-planter-dropzone {
  border: 2px dashed rgba(74, 222, 128, 0.3);
  border-radius: 12px;
  padding: 32px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(var(--s), 0.5);
  font-size: 13px;
}

.seed-planter-dropzone:hover {
  border-color: rgba(74, 222, 128, 0.5);
  background: rgba(74, 222, 128, 0.04);
  color: rgba(var(--s), 0.7);
}

.seed-planter-dropzone svg {
  color: rgba(74, 222, 128, 0.5);
}

.seed-planter-previews {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.seed-planter-preview-img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(var(--s), 0.1);
}

.seed-planter-add-btn {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  border: 2px dashed rgba(var(--s), 0.15);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(var(--s), 0.3);
  transition: all 0.2s ease;
}

.seed-planter-add-btn:hover {
  border-color: rgba(74, 222, 128, 0.4);
  color: rgba(74, 222, 128, 0.6);
}

.seed-planter-location-found {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.15);
  border-radius: 8px;
  font-size: 13px;
  color: rgba(var(--s), 0.7);
  margin-bottom: 14px;
}

.seed-planter-location-input-group {
  margin-bottom: 14px;
}

.seed-planter-location-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  background: rgba(var(--s), 0.04);
  border: 1px solid rgba(var(--s), 0.1);
  border-radius: 8px;
  color: rgba(var(--s), 0.9);
  font-size: 14px;
  margin-top: 8px;
  outline: none;
  transition: border-color 0.2s ease;
}

.seed-planter-location-input:focus {
  border-color: rgba(74, 222, 128, 0.4);
}

.seed-planter-location-input::placeholder {
  color: rgba(var(--s), 0.3);
}

.seed-planter-detect-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 12px;
  background: rgba(var(--s), 0.06);
  border: 1px solid rgba(var(--s), 0.1);
  border-radius: 6px;
  color: rgba(var(--s), 0.6);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.seed-planter-detect-btn:hover {
  background: rgba(var(--s), 0.1);
  color: rgba(var(--s), 0.8);
}

.seed-planter-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 14px;
}

.seed-planter-back-btn {
  padding: 8px 16px;
  background: rgba(var(--s), 0.06);
  border: 1px solid rgba(var(--s), 0.1);
  border-radius: 8px;
  color: rgba(var(--s), 0.6);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.seed-planter-back-btn:hover {
  background: rgba(var(--s), 0.1);
}

.seed-planter-submit-btn {
  padding: 8px 20px;
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.15) 0%, rgba(74, 222, 128, 0.25) 100%);
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: 8px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.seed-planter-submit-btn:hover {
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.2) 0%, rgba(74, 222, 128, 0.35) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(74, 222, 128, 0.15);
}

.seed-planter-error {
  color: #f87171;
  font-size: 13px;
  margin-top: 8px;
}

/* Analyzing spinner */
.seed-planter-analyzing {
  text-align: center;
  padding: 40px 16px;
  color: rgba(var(--s), 0.6);
  font-size: 14px;
}

.seed-planter-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(74, 222, 128, 0.15);
  border-top-color: #4ade80;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 12px;
}

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

/* Plan results */
.seed-planter-diversity {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 14px;
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.15);
  border-radius: 20px;
  font-size: 13px;
}

.seed-planter-diversity-label {
  color: rgba(var(--s), 0.5);
}

.seed-planter-diversity-value {
  color: #4ade80;
  font-weight: 600;
}

.seed-planter-assessment,
.seed-planter-tips {
  padding: 12px 14px;
  background: rgba(var(--s), 0.03);
  border: 1px solid rgba(var(--s), 0.06);
  border-radius: 8px;
  margin-bottom: 14px;
}

.seed-planter-assessment h4,
.seed-planter-tips h4 {
  font-size: 13px;
  font-weight: 600;
  color: rgba(var(--s), 0.7);
  margin: 0 0 6px;
}

.seed-planter-assessment p,
.seed-planter-tips p {
  font-size: 13px;
  color: rgba(var(--s), 0.55);
  margin: 0;
  line-height: 1.5;
}

.seed-planter-plants {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.seed-planter-plant-card {
  padding: 12px 14px;
  background: rgba(var(--s), 0.03);
  border: 1px solid rgba(var(--s), 0.06);
  border-radius: 10px;
  transition: border-color 0.2s ease;
}

.seed-planter-plant-card:hover {
  border-color: rgba(74, 222, 128, 0.2);
}

.seed-planter-plant-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.seed-planter-plant-rank {
  font-size: 12px;
  font-weight: 700;
  color: rgba(74, 222, 128, 0.7);
  min-width: 24px;
  padding-top: 2px;
}

.seed-planter-plant-name {
  font-size: 14px;
  font-weight: 600;
  color: rgba(var(--s), 0.9);
  margin: 0;
}

.seed-planter-plant-scientific {
  font-size: 12px;
  color: rgba(var(--s), 0.4);
  font-style: italic;
}

.seed-planter-plant-score {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #facc15;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.seed-planter-plant-details {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.seed-planter-tag {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(var(--s), 0.05);
  border: 1px solid rgba(var(--s), 0.08);
  border-radius: 4px;
  font-size: 11px;
  color: rgba(var(--s), 0.5);
}

.seed-planter-plant-reason {
  font-size: 12px;
  color: rgba(var(--s), 0.5);
  margin: 4px 0 0;
  line-height: 1.4;
}

.seed-planter-plant-eco {
  font-size: 12px;
  color: rgba(var(--s), 0.45);
  margin: 4px 0 0;
  line-height: 1.4;
}

.seed-planter-plant-eco strong {
  color: rgba(var(--s), 0.6);
}

/* ==================== CHAT PANEL ==================== */

.chat-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
}

.chat-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(var(--s), 0.06);
  flex-shrink: 0;
}

.chat-panel-tabs {
  display: flex;
  gap: 2px;
  background: rgba(var(--s), 0.04);
  border-radius: 6px;
  padding: 2px;
}

.chat-panel-tab {
  border: none;
  background: transparent;
  color: rgba(var(--s), 0.5);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.chat-panel-tab:hover {
  color: rgba(var(--s), 0.8);
}

.chat-panel-tab.active {
  background: rgba(var(--s), 0.12);
  color: rgba(var(--s), 0.95);
}

.chat-panel-clear {
  border: none;
  background: transparent;
  color: rgba(var(--s), 0.4);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}

.chat-panel-clear:hover {
  background: rgba(var(--s), 0.06);
  color: rgba(var(--s), 0.7);
}

.chat-panel-history {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-panel-empty {
  color: rgba(var(--s), 0.3);
  font-size: 13px;
  padding: 24px 8px;
  text-align: center;
  line-height: 1.5;
}

.chat-panel-msg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 92%;
}

.chat-panel-msg-user {
  align-self: flex-end;
  align-items: flex-end;
}

.chat-panel-msg-assistant {
  align-self: flex-start;
  align-items: flex-start;
}

.chat-panel-msg-text {
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.chat-panel-msg-user .chat-panel-msg-text {
  background: rgba(79, 195, 247, 0.18);
  color: rgba(var(--s), 0.95);
  border: 1px solid rgba(79, 195, 247, 0.25);
}

.chat-panel-msg-assistant .chat-panel-msg-text {
  background: rgba(var(--s), 0.04);
  color: rgba(var(--s), 0.85);
  border: 1px solid rgba(var(--s), 0.06);
}

.chat-panel-msg.error .chat-panel-msg-text {
  background: rgba(239, 83, 80, 0.12);
  border-color: rgba(239, 83, 80, 0.3);
  color: rgba(239, 83, 80, 0.95);
}

.chat-panel-typing {
  display: inline-flex;
  gap: 4px;
  padding: 2px 0;
}

.chat-panel-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(var(--s), 0.3);
  animation: typingBounce 1.4s ease-in-out infinite;
}

.chat-panel-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-panel-typing span:nth-child(3) { animation-delay: 0.3s; }

.chat-panel-materials {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.chat-panel-material-chip {
  border: 1px solid rgba(var(--s), 0.12);
  background: rgba(var(--s), 0.03);
  color: rgba(var(--s), 0.8);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.chat-panel-material-chip:hover {
  background: rgba(var(--s), 0.1);
  border-color: rgba(var(--s), 0.25);
}

.chat-panel-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid rgba(var(--s), 0.06);
  flex-shrink: 0;
}

.chat-panel-input {
  flex: 1;
  resize: none;
  min-height: 32px;
  max-height: 120px;
  padding: 8px 10px;
  border: 1px solid rgba(var(--s), 0.12);
  border-radius: 8px;
  background: rgba(var(--s), 0.02);
  color: rgba(var(--s), 0.95);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.15s;
}

.chat-panel-input:focus {
  border-color: rgba(79, 195, 247, 0.4);
}

.chat-panel-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: rgba(79, 195, 247, 0.18);
  color: rgba(var(--s), 0.9);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.chat-panel-send:hover:not(:disabled) {
  background: rgba(79, 195, 247, 0.32);
}

.chat-panel-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.chat-panel-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  padding: 8px;
}

/* ==================== CHAT SPATIAL VIEWER (left side, driven by chat materials) ==================== */

.chat-spatial-viewer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 24px;
}

.chat-spatial-tree {
  flex-shrink: 0;
}

.chat-spatial-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 400px;
}

.chat-spatial-header {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(var(--s), 0.4);
}

/* Nested TreeView subtree (used when a chat tree appends a column branch) */
.tree-subtree {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px dashed rgba(var(--s), 0.08);
}

/* Live-typing ghost bubble + streaming cursor */
.chat-panel-msg.partial .chat-panel-msg-text {
  opacity: 0.85;
}

.chat-panel-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: currentColor;
  animation: chatCursorBlink 1s steps(2, start) infinite;
}

@keyframes chatCursorBlink {
  to { opacity: 0; }
}

.chat-panel-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-panel-partner {
  border: 1px solid rgba(var(--s), 0.12);
  background: transparent;
  color: rgba(var(--s), 0.7);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}

.chat-panel-partner:hover {
  border-color: rgba(var(--s), 0.3);
  color: rgba(var(--s), 0.95);
}

.chat-panel-model {
  color: rgba(var(--s), 0.5);
  font-size: 11px;
  font-family: inherit;
  white-space: nowrap;
}

/* Supervisor's view — visible to all participants in a conversation */
.chat-panel-supervisor {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 14px;
  border-bottom: 1px solid rgba(var(--s), 0.06);
  background: rgba(var(--s), 0.02);
  font-size: 11px;
  color: rgba(var(--s), 0.55);
  flex-shrink: 0;
}

.chat-panel-supervisor-cat {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(var(--s), 0.08);
  color: rgba(var(--s), 0.65);
  flex-shrink: 0;
}

.chat-panel-supervisor-text {
  flex: 1;
  min-width: 0;
  font-style: italic;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Release feed — the "Releases" special AI contact ──────────────────── */

.release-feed-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(var(--s), 0.9);
}

.release-feed-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4a9eff;
  box-shadow: 0 0 6px rgba(74, 158, 255, 0.7);
}

.release-feed-live {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(74, 158, 255, 0.16);
  color: #4a9eff;
}

.release-feed-interests {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(var(--s), 0.06);
  background: rgba(var(--s), 0.02);
  flex-shrink: 0;
}

.release-feed-interests-hint {
  font-size: 11px;
  color: rgba(var(--s), 0.4);
  font-style: italic;
}

.release-interest-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(var(--s), 0.12);
  background: rgba(var(--s), 0.05);
  color: rgba(var(--s), 0.8);
  font-size: 11px;
  font-family: inherit;
  padding: 3px 8px;
  border-radius: 999px;
}

/* ── Chat list (sidebar) ─────────────────────────────── */

.chat-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-list-new {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  margin-bottom: 6px;
  background: rgba(var(--s), 0.04);
  border: 1px dashed rgba(var(--s), 0.15);
  border-radius: 8px;
  color: rgba(var(--s), 0.7);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.release-interest-chip:hover {
  border-color: rgba(255, 90, 90, 0.5);
  color: rgba(var(--s), 0.95);
}

.release-interest-x {
  font-size: 13px;
  line-height: 1;
  color: rgba(var(--s), 0.45);
}

.release-feed-list {
  gap: 16px;
}

.release-feed-error {
  color: #e0644b;
}

.release-bell {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: rgba(var(--s), 0.45);
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.release-bell:hover:not(:disabled) {
  background: rgba(var(--s), 0.06);
  color: rgba(var(--s), 0.8);
}

.release-bell.on {
  color: #4a9eff;
}

.release-bell:disabled {
  opacity: 0.5;
  cursor: default;
}

.release-feed-push-error {
  padding: 6px 14px;
  font-size: 11px;
  color: #e0644b;
  background: rgba(224, 100, 75, 0.08);
  border-bottom: 1px solid rgba(var(--s), 0.06);
}

.release-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(var(--s), 0.1);
  border-radius: 10px;
  background: rgba(var(--s), 0.03);
}

.release-card.high {
  border-color: rgba(74, 158, 255, 0.4);
  background: rgba(74, 158, 255, 0.05);
}

.release-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;
  font-size: 11px;
}

.release-card-author {
  font-weight: 600;
  color: rgba(var(--s), 0.92);
}

.release-card-handle {
  color: rgba(var(--s), 0.45);
}

.release-card-type {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(var(--s), 0.08);
  color: rgba(var(--s), 0.6);
}

.release-card-time {
  margin-left: auto;
  color: rgba(var(--s), 0.4);
}

.release-card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(var(--s), 0.95);
}

.release-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

.release-card-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.release-card-thumb {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  position: relative;
  display: block;
  background: #000;
}

.release-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.release-card-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 18px;
  padding-left: 3px;
  transition: background 0.15s;
}

.release-card-thumb:hover .release-card-play {
  background: #4a9eff;
}

.release-card-clip {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
}

.release-card-tweet {
  display: flex;
  justify-content: center;
  min-height: 24px;
}

.release-card-tweet .twitter-tweet {
  margin: 0 !important;
  width: 100%;
}

.release-card-summary {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(var(--s), 0.7);
}

.release-card-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.release-card-link {
  font-size: 12px;
  font-weight: 600;
  color: #4a9eff;
  text-decoration: none;
}

.release-card-link:hover {
  text-decoration: underline;
}

.release-card-direct {
  font-size: 10px;
  color: rgba(var(--s), 0.4);
  margin-left: auto;
}

/* Smart-query pill — shown when arriving via /search?q=... */
.smart-query-pill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 6px 10px;
  margin-bottom: 8px;
  border: 1px solid rgba(var(--s), 0.18);
  border-radius: 999px;
  background: rgba(var(--s), 0.04);
  font-size: 12px;
  color: rgba(var(--s), 0.75);
}

.smart-query-pill__label em {
  font-style: normal;
  color: rgba(var(--s), 0.95);
}

.smart-query-pill__label strong {
  color: rgba(var(--s), 1);
}

.smart-query-pill__reason {
  color: rgba(var(--s), 0.45);
  font-size: 11px;
}

.smart-query-pill__switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  color: rgba(var(--s), 0.55);
}

.smart-query-pill__alt {
  appearance: none;
  border: 1px solid rgba(var(--s), 0.2);
  background: transparent;
  color: rgba(var(--s), 0.85);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  cursor: pointer;
}

.smart-query-pill__alt:hover {
  background: rgba(var(--s), 0.08);
  color: rgba(var(--s), 1);
}

.smart-query-pill__close {
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(var(--s), 0.5);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.smart-query-pill__close:hover {
  color: rgba(var(--s), 1);
}

.chat-list-new:hover {
  background: rgba(var(--s), 0.08);
  color: rgba(var(--s), 0.9);
}

.chat-list-empty {
  font-size: 12px;
  color: rgba(var(--s), 0.4);
  padding: 8px 10px;
}

.chat-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--text);
  text-align: left;
  width: 100%;
  transition: background 0.15s;
  min-height: auto;
  min-width: auto;
}

.chat-list-item:hover {
  background: rgba(var(--s), 0.06);
}

.chat-list-item.active {
  background: rgba(var(--s), 0.08);
}

.chat-list-dots {
  display: inline-flex;
  align-items: center;
  gap: -2px;
  flex-shrink: 0;
  min-width: 18px;
}

.chat-list-dots .contact-dot {
  margin-left: -4px;
  border: 1.5px solid var(--bg, #111);
}

.chat-list-dots .contact-dot:first-child {
  margin-left: 0;
}

.chat-list-text {
  font-size: 13px;
  color: rgba(var(--s), 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* ── Multi-participant chat thread ────────────────────── */

.chat-thread-participant {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 10px;
  background: rgba(var(--s), 0.04);
}

.chat-thread-add {
  background: transparent;
  border: 1px dashed rgba(var(--s), 0.25);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(var(--s), 0.5);
  padding: 0;
  min-height: auto;
  min-width: auto;
}

.chat-thread-add:hover {
  color: rgba(var(--s), 0.9);
  border-color: rgba(var(--s), 0.5);
}

.chat-thread-add-picker {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  margin: 4px 8px;
  border: 1px solid rgba(var(--s), 0.1);
  border-radius: 8px;
  background: rgba(var(--s), 0.02);
  max-height: 220px;
  overflow-y: auto;
}

.chat-msg-sender {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(var(--s), 0.55);
  margin: 0 0 2px 4px;
}