/* NavVault Side Panel Styles */
/* Minimal Glassmorphism Theme */

/* ============================================
   Design Tokens
   ============================================ */
@import './tokens.css';

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

html,
body,
#root {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sp-text-primary);
  background: var(--sp-body-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

/* Minimize Chrome's default side panel border */
#root {
  margin: -1px;
  padding: 1px;
}

/* ============================================
   Global Focus Styles (WCAG 2.4.7)
   ============================================ */
*:focus {
  outline: none;
}

*:focus-visible {
  outline: 2px solid var(--sp-accent) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* Exclude inputs with custom focus styles from global outline */
.sp-search-input:focus-visible,
.find-search-input:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

/* Ensure buttons and tabs get visible focus */
button:focus-visible,
.sp-tab:focus-visible,
.sp-icon-btn:focus-visible,
.sp-btn:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--sp-accent) !important;
  outline-offset: 2px !important;
  box-shadow: var(--sp-focus-ring);
}

/* High contrast mode overrides (class-based, works with both light and dark themes) */
:root.high-contrast button,
:root.high-contrast .sp-tab,
:root.high-contrast .sp-icon-btn,
:root.high-contrast .sp-message-item,
:root.high-contrast .sp-card {
  border: 1px solid var(--sp-border) !important;
  background: var(--sp-bg-secondary) !important;
}

:root.high-contrast .sp-tab.active,
:root.high-contrast .sp-icon-btn.active {
  background: var(--sp-accent) !important;
  color: var(--sp-bg-primary) !important;
}

/* High contrast fixes for prompt buttons - Dark theme */
:root[data-theme='dark'].high-contrast .prompt-add-btn,
:root[data-theme='dark'].high-contrast .prompt-action.primary {
  background: #ff7b7b !important;
  color: #000000 !important;
  border: 2px solid #ffffff !important;
}

:root[data-theme='dark'].high-contrast .prompt-add-btn svg,
:root[data-theme='dark'].high-contrast .prompt-action.primary svg {
  stroke: #000000 !important;
}

/* High contrast fixes for prompt buttons - Light theme */
:root[data-theme='light'].high-contrast .prompt-add-btn,
:root[data-theme='light'].high-contrast .prompt-action.primary {
  background: #cc3333 !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
}

:root[data-theme='light'].high-contrast .prompt-add-btn svg,
:root[data-theme='light'].high-contrast .prompt-action.primary svg {
  stroke: #ffffff !important;
}

/* High contrast fixes for action buttons with accent color - Dark theme */
:root[data-theme='dark'].high-contrast .ph-action-btn.primary,
:root[data-theme='dark'].high-contrast .ph-filter-btn.active,
:root[data-theme='dark'].high-contrast .ph-stats-btn.active,
:root[data-theme='dark'].high-contrast .ph-filter-btn-sm.active {
  background: var(--sp-accent) !important;
  color: #000000 !important;
  border: 2px solid #ffffff !important;
}

/* High contrast fixes for action buttons with accent color - Light theme */
:root[data-theme='light'].high-contrast .ph-action-btn.primary,
:root[data-theme='light'].high-contrast .ph-filter-btn.active,
:root[data-theme='light'].high-contrast .ph-stats-btn.active,
:root[data-theme='light'].high-contrast .ph-filter-btn-sm.active {
  background: var(--sp-accent) !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
}

/* High contrast fixes for conversation list selected state */
:root.high-contrast .sp-message-item.selected,
:root.high-contrast .chat-item.active {
  background: var(--sp-accent-light) !important;
  border: 2px solid var(--sp-accent) !important;
}

:root[data-theme='dark'].high-contrast .sp-message-item.selected,
:root[data-theme='dark'].high-contrast .chat-item.active {
  color: #ffffff !important;
}

:root[data-theme='light'].high-contrast .sp-message-item.selected,
:root[data-theme='light'].high-contrast .chat-item.active {
  color: #000000 !important;
}

/* High contrast fixes for index toggle buttons */
:root[data-theme='dark'].high-contrast .sp-index-toggle-btn.active {
  background: #ff7b7b !important;
  color: #000000 !important;
  border: 2px solid #ffffff !important;
}

:root[data-theme='dark'].high-contrast .sp-index-toggle-btn.active svg {
  stroke: #000000 !important;
}

:root[data-theme='light'].high-contrast .sp-index-toggle-btn.active {
  background: #cc3333 !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
}

:root[data-theme='light'].high-contrast .sp-index-toggle-btn.active svg {
  stroke: #ffffff !important;
}

/* ============================================
   Container
   ============================================ */
.sp-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* ============================================
   Topline (Header)
   ============================================ */
.sp-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 12px 12px;
  flex-shrink: 0;
}

.sp-agent-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sp-agent-avatar {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  /* background: var(--sp-avatar-bg); Removed background for raw icon look */
  /* box-shadow: var(--sp-avatar-shadow); Removed shadow */
  object-fit: cover;
}



.sp-agent-avatar svg {
  width: 22px;
  height: 22px;
}

.sp-agent-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sp-agent-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--sp-text-primary);
}

.sp-pro-pill {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: var(--sp-pro-gradient);
  color: #fff;
  box-shadow: var(--sp-pro-shadow);
}

.sp-agent-model {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--sp-text-tertiary);
  overflow: visible;
}

.sp-topline .sp-message-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--sp-text-tertiary);
}

/* Header stats container for message and token counts */
.sp-header-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.sp-token-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--sp-token-color);
  padding: 2px 8px;
  background: var(--sp-token-bg);
  border-radius: var(--sp-radius-sm);
}

.sp-token-count svg {
  opacity: 0.7;
}

/* ============================================
   Toolbar
   ============================================ */
.sp-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  margin: 0 12px 18px;
  border-radius: 16px;
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  box-shadow: var(--sp-glass-shadow);
}

.sp-toolbar-spacer {
  flex: 1;
}

.sp-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  background: var(--sp-icon-btn-bg);
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--sp-icon-btn-color);
  cursor: pointer;
  transition: all 0.25s ease;
  flex-shrink: 0;
  backdrop-filter: blur(12px);
}

.sp-icon-btn:hover {
  border-color: var(--sp-icon-btn-hover-border);
  color: var(--sp-icon-btn-hover-color);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(255, 123, 123, 0.25);
}

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

.sp-icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.sp-icon-btn.active {
  background: #ff7b7b;
  color: var(--sp-icon-btn-active-color);
  box-shadow: 0 12px 25px rgba(255, 123, 123, 0.4);
}

/* Artifacts button with badge */
.sp-artifacts-btn {
  position: relative;
}

.sp-artifacts-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--sp-accent);
  color: var(--sp-icon-btn-active-color);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 2px 10px var(--sp-accent-glow);
}

\n\n

/* Platform dot (used in topline agent-model) */
.sp-platform-dot {
  display: inline-block !important;
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;
  border-radius: 50%;
  background: #888;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}

.sp-platform-dot.connected {
  background: #22c55e !important;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

@keyframes pulse-glow {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.6;
    transform: scale(0.8);
  }
}

/* ============================================
   Tabs
   ============================================ */
.sp-tabs {
  display: flex;
  gap: 6px;
  padding: 0 12px;
  margin-bottom: 8px;
  flex-shrink: 0;
  overflow: visible;
  max-width: 100%;
}

.sp-tab {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 9px 6px;
  background: var(--sp-tab-bg);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--sp-tab-color);
  transition: all 0.2s ease;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.sp-tab:hover {
  color: var(--sp-tab-hover-color);
  background: var(--sp-tab-hover-bg);
}

.sp-tab.active {
  background: #ff7b7b;
  color: var(--sp-icon-btn-active-color);
  box-shadow: 0 12px 25px rgba(255, 123, 123, 0.35);
}

.sp-tab svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  transition: transform var(--sp-transition);
}

.sp-tab:hover svg {
  transform: scale(1.1);
}

/* ============================================
   Content
   ============================================ */
.sp-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  min-height: 0;
  background: transparent;
}

/* Graph view needs full height without scroll */
.sp-content:has(.knowledge-graph-container) {
  overflow: hidden;
  padding: 12px;
  display: flex;
  flex-direction: column;
}

.sp-content::-webkit-scrollbar {
  width: 6px;
}

.sp-content::-webkit-scrollbar-track {
  background: transparent;
}

.sp-content::-webkit-scrollbar-thumb {
  background: var(--sp-border);
  border-radius: 3px;
}

.sp-content::-webkit-scrollbar-thumb:hover {
  background: var(--sp-text-tertiary);
}

/* ============================================
   Search
   ============================================ */
.sp-search-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.sp-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.sp-search-icon {
  position: absolute;
  left: 12px;
  color: var(--sp-text-tertiary);
  pointer-events: none;
  display: flex;
}

.sp-search-input {
  width: 100%;
  padding: 10px 12px 10px 40px;
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  border-radius: var(--sp-radius-lg);
  font-family: inherit;
  font-size: 13px;
  color: var(--sp-text-primary);
  outline: none;
  transition: all 0.2s ease;
}

.sp-search-input::placeholder {
  color: var(--sp-text-tertiary);
}

.sp-search-input:focus {
  border-color: var(--sp-accent);
  background: var(--sp-glass-bg-strong);
  box-shadow: 0 0 0 3px var(--sp-accent-glow);
}

/* Override global focus-visible ring (already has custom focus styles) */
.sp-search-input:focus-visible {
  outline: none !important;
}

/* ============================================
   Message List
   ============================================ */
.sp-message-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Index View Toggle */
.sp-index-toggle {
  display: inline-flex;
  align-self: flex-start;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  margin-bottom: 10px;
  backdrop-filter: blur(10px);
}

.sp-index-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--sp-icon-btn-color);
  cursor: pointer;
  transition: all 0.2s ease;
}

.sp-index-toggle-btn svg {
  width: 14px;
  height: 14px;
}

.sp-index-toggle-btn:hover {
  color: var(--sp-tab-hover-color);
  background: var(--sp-tab-hover-bg);
}

.sp-index-toggle-btn.active {
  background: #ff7b7b;
  color: var(--sp-icon-btn-active-color);
  box-shadow: 0 8px 18px rgba(255, 123, 123, 0.35);
}

/* Structure View */
.sp-structure-view {
  display: flex;
  flex-direction: column;
}

/* Structure Search */
.sp-structure-search {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.sp-structure-search-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--sp-icon-btn-color);
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.sp-structure-search-input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  background: var(--sp-search-bg);
  border: 1px solid var(--sp-search-border);
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  color: var(--sp-text-primary);
  outline: none;
  transition: all 0.2s ease;
}

.sp-structure-search-input::placeholder {
  color: var(--sp-search-placeholder);
}

.sp-structure-search-input:focus {
  border-color: var(--sp-icon-btn-hover-border);
  background: var(--sp-glass-bg-strong);
}

.sp-structure-search-count {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--sp-icon-btn-color);
  pointer-events: none;
}

.sp-structure-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid var(--sp-glass-border);
  background: var(--sp-glass-bg);
}

/* Main title (first line of AI response) */
.sp-structure-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sp-text-primary);
  cursor: pointer;
  transition: color 0.2s ease;
}

/* Child items (### headings) */
.sp-structure-child {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 10px;
  background: var(--sp-tab-bg);
  font-size: 11px;
  transition: all 0.2s ease;
}

.sp-structure-child:hover {
  color: var(--sp-tab-hover-color);
  background: var(--sp-tab-hover-bg);
}

.sp-structure-child .sp-structure-text {
  color: var(--sp-tab-color);
  font-size: 11px;
}

.sp-structure-expand {
  font-size: 11px;
  color: var(--sp-icon-btn-color);
  cursor: pointer;
  transition: color 0.2s ease;
  flex-shrink: 0;
}

.sp-structure-text {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--sp-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-structure-h2 .sp-structure-text {
  color: var(--sp-structure-h2);
  font-size: 12px;
}

.sp-structure-h3 .sp-structure-text {
  color: var(--sp-structure-h3);
  font-size: 11px;
}

.sp-message-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--sp-glass-border);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: var(--sp-card-shadow);
}

.sp-message-item.user {
  background: var(--sp-user-gradient);
}

.sp-message-item.assistant {
  background: var(--sp-ai-gradient);
}

.sp-message-item:hover {
  transform: translateY(-3px);
  border-color: var(--sp-message-hover-border);
}

.sp-message-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  flex-shrink: 0;
  border: 1px solid var(--sp-glass-border);
  box-shadow: var(--sp-glass-shadow);
  position: relative;
  background: var(--sp-glass-bg);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.sp-message-icon::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute;
  bottom: -1px;
  right: -1px;
  border: 1.5px solid #fff;
  background: #ff7b7b;
}

.sp-message-item.user .sp-message-icon {
  color: var(--sp-text-primary);
}

.sp-message-item.assistant .sp-message-icon {
  color: var(--sp-text-primary);
}

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

.sp-message-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}

.sp-message-item.user .sp-message-label {
  color: var(--sp-message-user-label);
}

.sp-message-item.assistant .sp-message-label {
  color: var(--sp-message-assistant-label);
}

.sp-message-preview {
  font-size: 13px;
  color: var(--sp-message-preview);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-height: 1.5;
}

.sp-message-item.assistant .sp-message-preview {
  color: var(--sp-text-primary);
}

/* Starred message indicator */
.sp-message-item.starred {
  border-color: rgba(249, 177, 79, 0.6);
  box-shadow: 0 12px 30px rgba(249, 177, 79, 0.4);
}

/* Message indicators container - inline footer strip inside message */
.sp-message-indicators {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.sp-message-indicators>span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--sp-radius-sm);
  opacity: 0.85;
  transition: all 0.15s ease;
  cursor: default;
}

.sp-message-indicators>span:hover {
  opacity: 1;
  transform: scale(1.15);
  background: rgba(0, 0, 0, 0.05);
}

/* Clickable indicators */
.sp-message-indicators>span.clickable {
  cursor: pointer;
}

.sp-star-indicator {
  color: var(--sp-star);
}

.sp-star-indicator.clickable:hover {
  background: rgba(234, 179, 8, 0.15);
}

.sp-pin-indicator {
  color: var(--sp-primary);
}

.sp-pin-indicator.clickable:hover {
  background: rgba(124, 58, 237, 0.15);
}

.sp-bookmark-indicator {
  color: var(--sp-accent);
}

.sp-bookmark-indicator.clickable:hover {
  background: rgba(59, 130, 246, 0.15);
}

.sp-note-indicator {
  color: var(--sp-warning);
}

/* Clickable note indicator */
.sp-note-indicator.clickable {
  cursor: pointer;
}

.sp-note-indicator.clickable:hover,
.sp-note-indicator.clickable.active {
  background: rgba(245, 158, 11, 0.15);
}

/* Message attachments display */
.sp-message-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.sp-attachment-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--sp-radius-sm);
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  color: var(--sp-text-secondary);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-attachment-label.image {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.2);
  color: var(--sp-accent);
}

.sp-attachment-label.file {
  background: rgba(124, 58, 237, 0.1);
  border-color: rgba(124, 58, 237, 0.2);
  color: var(--sp-primary);
}

/* Note Tooltip */
.sp-note-tooltip-backdrop {
  position: fixed;
  inset: 0;
  z-index: 998;
}

.sp-note-tooltip {
  position: fixed;
  z-index: 999;
  max-width: 280px;
  min-width: 180px;
  background: var(--sp-glass-bg-strong);
  backdrop-filter: blur(var(--sp-blur-lg));
  -webkit-backdrop-filter: blur(var(--sp-blur-lg));
  border: 1px solid var(--sp-glass-border);
  border-radius: var(--sp-radius-lg);
  box-shadow: var(--sp-shadow-glass-lg);
  padding: 12px;
  animation: noteTooltipFadeIn 150ms ease;
}

@keyframes noteTooltipFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sp-note-tooltip-content {
  font-size: 13px;
  line-height: 1.5;
  color: var(--sp-text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 150px;
  overflow-y: auto;
}

.sp-note-tooltip-edit {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--sp-glass-border);
  border-radius: var(--sp-radius-md);
  font-size: 12px;
  color: var(--sp-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.sp-note-tooltip-edit:hover {
  background: var(--sp-bg-hover);
  color: var(--sp-text-primary);
  border-color: var(--sp-primary);
}

.sp-note-tooltip-edit svg {
  width: 12px;
  height: 12px;
}

.sp-message-item.pinned {
  border-color: rgba(var(--sp-primary-rgb), 0.5);
  box-shadow: 0 12px 30px rgba(var(--sp-primary-rgb), 0.3);
}

/* Ghost Note Modal */
.sp-ghost-note-modal {
  max-width: 450px;
}

.sp-ghost-note-hint {
  font-size: 13px;
  color: var(--sp-text-muted);
  margin-bottom: 12px;
}

.sp-ghost-note-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--sp-glass-border);
  border-radius: var(--sp-radius-md);
  background: var(--sp-glass-bg);
  color: var(--sp-text);
  font-size: 14px;
  resize: vertical;
  min-height: 100px;
}

.sp-ghost-note-textarea:focus {
  outline: none;
  border-color: var(--sp-primary);
  box-shadow: 0 0 0 3px rgba(var(--sp-primary-rgb), 0.15);
}

.sp-message-item {
  position: relative;
}

/* ============================================
   Context Menu
   ============================================ */
.sp-context-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
}

.sp-context-menu {
  position: fixed;
  z-index: 1000;
  min-width: 160px;
  background: var(--sp-glass-bg-strong);
  backdrop-filter: blur(var(--sp-blur-lg));
  -webkit-backdrop-filter: blur(var(--sp-blur-lg));
  border: 1px solid var(--sp-glass-border);
  border-radius: var(--sp-radius-lg);
  box-shadow: var(--sp-shadow-glass-lg);
  padding: 4px;
  animation: contextMenuFadeIn 150ms ease;
}

@keyframes contextMenuFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.sp-context-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-size: 13px;
  color: var(--sp-text-primary);
  border-radius: var(--sp-radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
}

.sp-context-menu-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

.sp-context-menu-item svg {
  color: var(--sp-text-tertiary);
  flex-shrink: 0;
}

.sp-context-menu-item:hover svg {
  color: var(--sp-text-secondary);
}

.sp-context-menu-item.star svg {
  color: var(--sp-star);
}

.sp-context-menu-divider {
  height: 1px;
  background: var(--sp-glass-border);
  margin: 4px 0;
}

/* ============================================
   Empty State
   ============================================ */
.sp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  height: 100%;
}

.sp-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  border-radius: var(--sp-radius-xl);
  color: var(--sp-text-tertiary);
  margin-bottom: 16px;
}

.sp-empty-icon.sp-locked {
  background: var(--sp-pro-bg);
  color: var(--sp-pro);
}

.sp-empty-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--sp-text-primary);
  margin-bottom: 4px;
}

.sp-empty-desc {
  font-size: 13px;
  color: var(--sp-text-tertiary);
  max-width: 220px;
}

.sp-upgrade-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 10px 20px;
  background: var(--sp-accent);
  color: white;
  border: none;
  border-radius: var(--sp-radius-md);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--sp-transition);
}

.sp-upgrade-btn:hover {
  background: var(--sp-accent-hover);
}

/* ============================================
   Loading State
   ============================================ */
.sp-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  color: var(--sp-text-tertiary);
}

.sp-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--sp-border);
  border-top-color: var(--sp-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* ============================================
   Copy Button
   ============================================ */
.sp-copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  border-radius: var(--sp-radius-sm);
  color: var(--sp-text-tertiary);
  cursor: pointer;
  opacity: 0;
  transition: all var(--sp-transition);
  flex-shrink: 0;
  margin-left: auto;
}

.sp-copy-btn svg {
  width: 12px;
  height: 12px;
}

.sp-message-item:hover .sp-copy-btn {
  opacity: 1;
}

.sp-copy-btn:hover {
  background: var(--sp-bg-hover);
  color: var(--sp-text-primary);
}

.sp-copy-btn.copied {
  opacity: 1;
  color: var(--sp-success);
}

.sp-copy-btn.copied:hover {
  color: var(--sp-success);
  background: var(--sp-success-light);
}

/* ============================================
   Message Navigation Buttons (Up/Down)
   ============================================ */
.sp-message-nav-buttons {
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--sp-transition);
  flex-shrink: 0;
  margin-left: auto;
}

.sp-message-item:hover .sp-message-nav-buttons {
  opacity: 1;
}

.sp-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 18px;
  background: transparent;
  border: none;
  border-radius: var(--sp-radius-xs);
  color: var(--sp-text-tertiary);
  cursor: pointer;
  transition: all var(--sp-transition);
}

.sp-nav-btn:hover {
  background: var(--sp-bg-hover);
  color: var(--sp-primary);
}

/* ============================================
   Folder Tree
   ============================================ */
.folder-tree-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 12px;
}

.folder-toolbar {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.folder-add-btn,
.folder-save-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  border-radius: 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--sp-icon-btn-color);
  cursor: pointer;
  transition: all 0.2s ease;
}

.folder-add-btn:hover,
.folder-save-btn:hover {
  color: var(--sp-tab-hover-color);
  border-color: var(--sp-icon-btn-hover-border);
  box-shadow: 0 10px 20px rgba(87, 65, 148, 0.2);
  transform: translateY(-1px);
}

.folder-save-btn {
  background: #ff7b7b;
  color: var(--sp-icon-btn-active-color);
  border-color: transparent;
}

.folder-save-btn:hover {
  background: #ff7b7b;
  color: var(--sp-icon-btn-active-color);
  box-shadow: 0 12px 25px rgba(255, 123, 123, 0.35);
}

.folder-create-form {
  display: flex;
  gap: 6px;
  flex: 1;
}

.folder-create-input {
  flex: 1;
  padding: 8px 12px;
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  border-radius: var(--sp-radius-lg);
  font-family: inherit;
  font-size: 12px;
  color: var(--sp-text-primary);
  outline: none;
  transition: all 0.2s ease;
}

.folder-create-input:focus {
  border-color: var(--sp-accent);
  background: var(--sp-glass-bg-strong);
  box-shadow: 0 0 0 3px var(--sp-accent-glow);
}

.folder-create-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--sp-accent);
  border: none;
  border-radius: var(--sp-radius-lg);
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
}

.folder-create-btn:hover {
  background: var(--sp-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.folder-create-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.folder-create-btn.cancel {
  background: var(--sp-glass-bg);
  color: var(--sp-text-secondary);
  box-shadow: none;
}

.folder-create-btn.cancel:hover {
  background: var(--sp-glass-bg-strong);
  color: var(--sp-text-primary);
  box-shadow: none;
}

.folder-tree {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.folder-node {
  user-select: none;
}

.folder-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--sp-text-primary);
}

.folder-row:hover {
  background: var(--sp-folder-hover-bg);
}

.folder-row.selected {
  background: var(--sp-folder-active-bg);
  box-shadow: inset 0 0 0 1px rgba(255, 123, 123, 0.35);
}

/* Drag and drop styles */
.folder-row.drop-target {
  background: var(--sp-accent-light);
  outline: 2px dashed var(--sp-accent);
  outline-offset: -2px;
}

.folder-chat-item.dragging {
  opacity: 0.5;
  background: var(--sp-bg-tertiary);
}

.folder-chat-item.selected {
  background: var(--sp-accent-alpha);
  border-color: var(--sp-accent);
}

.folder-chat-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  color: var(--sp-text-tertiary);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.folder-chat-checkbox:hover {
  color: var(--sp-accent);
}

.folder-chat-checkbox.checked {
  color: var(--sp-accent);
}

.folder-chat-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 4px;
}

.folder-chat-action-container {
  position: relative;
}

.folder-chat-drag-handle {
  cursor: grab;
  color: var(--sp-text-tertiary);
  font-size: 10px;
  letter-spacing: -1px;
  padding: 0 4px;
  user-select: none;
}

.folder-chat-drag-handle:hover {
  color: var(--sp-text-secondary);
}

.folder-chat-item:active .folder-chat-drag-handle {
  cursor: grabbing;
}

.folder-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  color: var(--sp-text-tertiary);
  cursor: pointer;
  flex-shrink: 0;
}

.folder-toggle:hover {
  color: var(--sp-text-primary);
}

.folder-icon {
  display: flex;
  flex-shrink: 0;
  color: var(--sp-folder-icon-color);
}

.folder-name {
  flex: 1;
  font-size: 13px;
  color: var(--sp-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.folder-edit-input {
  flex: 1;
  padding: 4px 8px;
  background: var(--sp-bg-primary);
  border: 1px solid var(--sp-accent);
  border-radius: var(--sp-radius-sm);
  font-family: inherit;
  font-size: 13px;
  color: var(--sp-text-primary);
  outline: none;
}

.folder-badge {
  padding: 2px 8px;
  background: var(--sp-tab-bg);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: var(--sp-icon-btn-color);
}

.folder-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.folder-row:hover .folder-actions,
.folder-row.selected .folder-actions {
  opacity: 1;
}

.folder-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--sp-icon-btn-bg);
  border: none;
  border-radius: 8px;
  color: var(--sp-icon-btn-color);
  cursor: pointer;
  transition: all 0.15s ease;
}

.folder-action-btn:hover {
  color: var(--sp-tab-hover-color);
  background: var(--sp-tab-hover-bg);
}

.folder-action-btn.danger:hover {
  color: #dc2626;
}



.folder-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
  color: var(--sp-text-tertiary);
}

.folder-empty-hint {
  font-size: 12px;
  margin-top: 4px;
}

.folder-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px;
  color: var(--sp-text-tertiary);
}

/* Chats in folder */
.folder-chats {
  border-top: 1px solid var(--sp-border);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.folder-chats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}

.folder-chats-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--sp-text-tertiary);
}

.folder-chats-empty {
  padding: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--sp-text-tertiary);
}

.folder-chats-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.folder-chat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--sp-bg-secondary);
  border-radius: var(--sp-radius-md);
}

.folder-chat-icon {
  display: flex;
  color: var(--sp-text-tertiary);
  flex-shrink: 0;
}

.folder-chat-title {
  flex: 1;
  font-size: 12px;
  color: var(--sp-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.folder-chat-title:hover {
  color: var(--sp-accent);
}

.folder-chat-platform {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.folder-chat-platform.chatgpt {
  background: #ecfdf5;
  color: #059669;
}

.folder-chat-platform.claude {
  background: #fef3c7;
  color: #d97706;
}

.folder-chat-platform.gemini {
  background: #eff6ff;
  color: #2563eb;
}

.folder-chat-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  border-radius: var(--sp-radius-sm);
  color: var(--sp-text-tertiary);
  cursor: pointer;
  opacity: 0;
  transition: all var(--sp-transition);
  flex-shrink: 0;
}

.folder-chat-item:hover .folder-chat-action {
  opacity: 1;
}

.folder-chat-action:hover {
  background: var(--sp-bg-tertiary);
  color: var(--sp-text-primary);
}

.folder-chat-action.danger:hover {
  background: var(--sp-error-light);
  color: var(--sp-error);
}

/* ============================================
   Modal
   ============================================ */
.sp-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(var(--sp-blur-sm));
  -webkit-backdrop-filter: blur(var(--sp-blur-sm));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
  animation: modalOverlayFadeIn 0.2s ease-out;
}

@keyframes modalOverlayFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.sp-modal {
  background: var(--sp-glass-bg-strong);
  backdrop-filter: blur(var(--sp-blur-lg));
  -webkit-backdrop-filter: blur(var(--sp-blur-lg));
  border-radius: var(--sp-radius-xl);
  border: 1px solid var(--sp-glass-border);
  width: 100%;
  max-width: 360px;
  box-shadow: var(--sp-shadow-glass-lg);
  overflow: hidden;
  animation: modalSlideIn 0.25s ease-out;
}

.sp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--sp-glass-border);
  background: transparent;
}

.sp-modal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--sp-text-primary);
}

.sp-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: var(--sp-radius-full);
  color: var(--sp-text-tertiary);
  cursor: pointer;
  transition: all var(--sp-transition);
}

.sp-modal-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--sp-text-primary);
  transform: scale(1.05);
}

.sp-modal-body {
  padding: 20px;
}

.sp-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid var(--sp-glass-border);
  background: rgba(0, 0, 0, 0.02);
}

/* Form Elements */
.sp-form-group {
  margin-bottom: 16px;
}

.sp-form-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sp-text-tertiary);
}

.sp-form-divider::before,
.sp-form-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--sp-glass-border);
}

.sp-form-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--sp-text-primary);
}

.sp-form-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--sp-accent);
  cursor: pointer;
}

.sp-form-checkbox-label input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sp-form-select {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--sp-radius-lg);
  border: 1px solid var(--sp-glass-border);
  background: var(--sp-glass-bg);
  color: var(--sp-text-primary);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sp-form-select:focus {
  outline: none;
  border-color: var(--sp-accent);
  background: var(--sp-glass-bg-strong);
  box-shadow: 0 0 0 3px var(--sp-accent-glow);
}

.sp-form-select:hover:not(:focus) {
  border-color: var(--sp-border);
  background: var(--sp-glass-bg-strong);
}

.sp-form-group:last-child {
  margin-bottom: 0;
}

.sp-form-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--sp-text-secondary);
  margin-bottom: 8px;
}

.sp-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sp-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--sp-text-primary);
}

.sp-radio input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--sp-accent);
  cursor: pointer;
}

.sp-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--sp-text-primary);
}

.sp-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--sp-accent);
  cursor: pointer;
}

/* Buttons */
.sp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--sp-radius-lg);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.sp-btn-primary {
  background: var(--sp-accent);
  color: white;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.sp-btn-primary:hover {
  background: var(--sp-accent-hover);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
  transform: translateY(-1px);
}

.sp-btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
}

.sp-btn-secondary {
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  color: var(--sp-text-primary);
}

.sp-btn-secondary:hover {
  background: var(--sp-glass-bg-strong);
  border-color: var(--sp-border);
  transform: translateY(-1px);
}

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

/* ============================================
   Prompt Library
   ============================================ */
.prompt-library {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 14px;
}

/* Library Header with Export/Import */
.prompt-library-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--sp-glass-border);
}

.prompt-library-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--sp-text-primary);
  margin: 0;
}

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

.import-status {
  font-size: 11px;
  color: var(--sp-success);
  padding: 4px 8px;
  background: rgba(34, 197, 94, 0.1);
  border-radius: var(--sp-radius-sm);
}

/* Export Modal specific styles */
.export-modal {
  max-width: 480px;
}

.export-modal-tabs {
  display: flex;
  gap: 4px;
  padding: 0 20px 16px;
  border-bottom: 1px solid var(--sp-glass-border);
}

.export-tab {
  flex: 1;
  padding: 8px 12px;
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  border-radius: var(--sp-radius-md);
  font-size: 12px;
  font-weight: 500;
  color: var(--sp-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.export-tab:hover {
  background: var(--sp-glass-bg-strong);
  color: var(--sp-text-primary);
}

.export-tab.active {
  background: #ff7b7b;
  border-color: #ff7b7b;
  color: white;
  box-shadow: 0 2px 8px rgba(255, 123, 123, 0.4);
}

.export-modal-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.export-modal-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--sp-text-secondary);
}

.export-modal-actions {
  display: flex;
  gap: 12px;
}

.export-action-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 11px;
  color: #ff7b7b;
  cursor: pointer;
}

.export-action-btn:hover {
  text-decoration: underline;
}

.export-modal-items {
  max-height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Custom scrollbar for export modal */
.export-modal-items::-webkit-scrollbar {
  width: 4px;
}

.export-modal-items::-webkit-scrollbar-track {
  background: transparent;
}

.export-modal-items::-webkit-scrollbar-thumb {
  background: rgba(255, 123, 123, 0.3);
  border-radius: 4px;
}

.export-modal-items::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 123, 123, 0.5);
}

.export-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  border-radius: var(--sp-radius-md);
  cursor: pointer;
  transition: background 0.15s ease;
}

.export-item:hover {
  background: var(--sp-glass-bg-strong);
}

.export-item input[type="checkbox"] {
  margin-top: 2px;
  accent-color: #ff7b7b;
}

.export-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.export-item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--sp-text-primary);
}

.export-item-preview {
  font-size: 11px;
  color: var(--sp-text-tertiary);
}

.export-empty {
  text-align: center;
  padding: 24px;
  color: var(--sp-text-tertiary);
  font-style: italic;
}

.prompt-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px;
  color: var(--sp-text-tertiary);
}

.prompt-toolbar {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.prompt-search {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.prompt-search-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--sp-icon-btn-color);
  display: flex;
  pointer-events: none;
}

.prompt-search-input {
  width: 100%;
  padding: 10px 12px 10px 38px;
  background: var(--sp-search-bg);
  border: 1px solid var(--sp-search-border);
  border-radius: 14px;
  font-family: inherit;
  font-size: 12px;
  color: var(--sp-text-primary);
  outline: none;
  transition: all 0.2s ease;
}

.prompt-search-input:focus {
  border-color: var(--sp-icon-btn-hover-border);
  box-shadow: 0 0 0 2px rgba(255, 123, 123, 0.25);
}

.prompt-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #ff7b7b;
  border: none;
  border-radius: 12px;
  color: var(--sp-icon-btn-active-color);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
  box-shadow: 0 12px 24px rgba(255, 123, 123, 0.3);
}

.prompt-add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(255, 123, 123, 0.4);
}

.prompt-categories {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.prompt-category {
  padding: 4px 12px;
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  border-radius: 999px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--sp-icon-btn-color);
  cursor: pointer;
  transition: all 0.2s ease;
}

.prompt-category:hover {
  background: var(--sp-tab-hover-bg);
  color: var(--sp-tab-hover-color);
}

.prompt-category.active {
  background: var(--sp-folder-active-bg);
  border-color: rgba(255, 123, 123, 0.45);
  color: #ff7b7b;
}

.prompt-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
  /* Extra space for hover lift effect */
}

/* Minimal scrollbar for prompt list */
.prompt-list::-webkit-scrollbar {
  width: 4px;
}

.prompt-list::-webkit-scrollbar-track {
  background: transparent;
}

.prompt-list::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 4px;
}

.prompt-list::-webkit-scrollbar-thumb:hover {
  background: var(--sp-text-tertiary);
}

.prompt-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
  color: var(--sp-text-tertiary);
}

.prompt-empty-hint {
  font-size: 12px;
  margin-top: 4px;
}

.prompt-item {
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  border-radius: 16px;
  padding: 14px;
  transition: all 0.2s ease;
  box-shadow: var(--sp-card-shadow);
}

.prompt-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 35px rgba(90, 65, 160, 0.25);
}

.prompt-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.prompt-favorite {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--sp-icon-btn-color);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s ease, color 0.15s ease;
}

.prompt-favorite:hover,
.prompt-favorite.active {
  color: #ffb347;
  transform: scale(1.1);
}

.prompt-item-title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--sp-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prompt-item-category {
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: var(--sp-radius-full);
  font-size: 10px;
  color: var(--sp-text-secondary);
  flex-shrink: 0;
}

.prompt-item-content {
  font-size: 12px;
  color: var(--sp-text-secondary);
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-bottom: 8px;
}

.prompt-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.prompt-item-usage {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--sp-text-tertiary);
}

.prompt-item-actions {
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

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

.prompt-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--sp-tab-bg);
  border: none;
  border-radius: 10px;
  color: var(--sp-icon-btn-color);
  cursor: pointer;
  transition: all 0.15s ease;
}

.prompt-action:hover {
  background: var(--sp-tab-hover-bg);
  color: var(--sp-tab-hover-color);
}

.prompt-action.primary {
  background: #ff7b7b;
  color: var(--sp-icon-btn-active-color);
}

.prompt-action.primary:hover {
  background: #ff7b7b;
  box-shadow: 0 8px 18px rgba(255, 123, 123, 0.35);
}

.prompt-action.danger:hover {
  background: var(--sp-error-light);
  color: var(--sp-error);
}

.prompt-action.success {
  color: var(--sp-success);
}

/* Prompt Form */
.prompt-form {
  background: var(--sp-bg-secondary);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
  overflow: hidden;
}

.prompt-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--sp-border);
}

.prompt-form-header h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--sp-text-primary);
}

.prompt-form-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  border-radius: var(--sp-radius-sm);
  color: var(--sp-text-tertiary);
  cursor: pointer;
}

.prompt-form-close:hover {
  background: var(--sp-bg-tertiary);
  color: var(--sp-text-primary);
}

.prompt-form-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.prompt-form-input,
.prompt-form-textarea,
.prompt-form-select {
  width: 100%;
  padding: 8px 12px;
  background: var(--sp-bg-primary);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
  font-family: inherit;
  font-size: 13px;
  color: var(--sp-text-primary);
  outline: none;
  transition: border-color var(--sp-transition);
}

.prompt-form-input:focus,
.prompt-form-textarea:focus,
.prompt-form-select:focus {
  border-color: var(--sp-accent);
}

.prompt-form-textarea {
  resize: vertical;
  min-height: 80px;
}

.prompt-form-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--sp-border);
}

/* ============================================
   Segmented Toggle (Prompts/Personas)
   ============================================ */
.prompt-segmented-toggle {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--sp-bg-secondary);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-lg);
}

.prompt-segment {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: var(--sp-radius-md);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--sp-text-secondary);
  cursor: pointer;
  transition: all var(--sp-transition);
}

.prompt-segment:hover {
  color: var(--sp-text-primary);
  background: var(--sp-bg-tertiary);
}

.prompt-segment.active {
  background: #ff7b7b;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(255, 123, 123, 0.4);
}

.prompt-segment svg {
  flex-shrink: 0;
}

/* ============================================
   Persona Specific Styles
   ============================================ */
.persona-item.active {
  border-color: var(--sp-accent);
  background: var(--sp-accent-light);
}

.persona-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--sp-bg-tertiary);
  border-radius: var(--sp-radius-sm);
  color: var(--sp-text-secondary);
  flex-shrink: 0;
}

.persona-item.active .persona-icon {
  background: var(--sp-accent);
  color: #ffffff;
}

.persona-active-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  background: var(--sp-success);
  color: #ffffff;
  border-radius: 4px;
}

.persona-description {
  font-size: 12px;
  color: var(--sp-text-secondary);
  margin-bottom: 4px;
  line-height: 1.4;
}

/* Persona Icon Picker */
.persona-icon-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.persona-icon-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--sp-text-secondary);
}

.persona-icon-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.persona-icon-option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--sp-bg-tertiary);
  border: 2px solid transparent;
  border-radius: var(--sp-radius-sm);
  color: var(--sp-text-secondary);
  cursor: pointer;
  transition: all var(--sp-transition);
}

.persona-icon-option:hover {
  background: var(--sp-bg-hover);
  color: var(--sp-text-primary);
}

.persona-icon-option.active {
  border-color: var(--sp-accent);
  background: var(--sp-accent-light);
  color: var(--sp-accent);
}

/* ============================================
   History Search
   ============================================ */
.history-search {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.history-search-input-container {
  position: relative;
}

.history-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sp-text-tertiary);
  display: flex;
}

.history-search-input {
  width: 100%;
  padding: 10px 12px 10px 38px;
  background: var(--sp-bg-secondary);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
  font-family: inherit;
  font-size: 14px;
  color: var(--sp-text-primary);
  outline: none;
  transition: all var(--sp-transition);
}

.history-search-input:focus {
  border-color: var(--sp-accent);
  background: var(--sp-bg-primary);
}

.history-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--sp-text-tertiary);
  padding: 0 4px;
}

.history-stats-spacer {
  flex: 1;
}

.history-clear-btn {
  background: none;
  border: none;
  color: var(--sp-text-tertiary);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--sp-radius-sm);
  display: flex;
  align-items: center;
  transition: all var(--sp-transition);
}

.history-clear-btn:hover {
  color: var(--sp-error);
  background: rgba(220, 38, 38, 0.1);
}

.history-clear-confirm {
  background: var(--sp-bg-secondary);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
  padding: 12px;
  text-align: center;
}

.history-clear-confirm p {
  margin: 0 0 12px 0;
  font-size: 13px;
  color: var(--sp-text-primary);
}

.history-clear-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.history-clear-yes,
.history-clear-no {
  padding: 6px 16px;
  border-radius: var(--sp-radius-sm);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--sp-transition);
}

.history-clear-yes {
  background: var(--sp-error);
  color: white;
  border: none;
}

.history-clear-yes:hover {
  opacity: 0.9;
}

.history-clear-no {
  background: var(--sp-bg-tertiary);
  color: var(--sp-text-primary);
  border: 1px solid var(--sp-border);
}

.history-clear-no:hover {
  background: var(--sp-bg-hover);
}

.history-section {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.history-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sp-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 8px 0;
  padding: 0 4px;
}

.history-empty-state {
  padding: 24px 12px;
  text-align: center;
}

.history-empty {
  font-size: 13px;
  color: var(--sp-text-tertiary);
  text-align: center;
  padding: 0;
  margin: 0 0 12px 0;
}

.history-empty-hint {
  font-size: 12px;
  color: var(--sp-text-tertiary);
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.history-empty-note {
  font-size: 11px;
  color: var(--sp-text-tertiary);
  opacity: 0.8;
  margin: 0;
  padding: 8px;
  background: var(--sp-bg-secondary);
  border-radius: var(--sp-radius-sm);
}

.history-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.history-item {
  background: var(--sp-bg-secondary);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
  padding: 12px;
  transition: all var(--sp-transition);
}

.history-item:hover {
  background: var(--sp-bg-tertiary);
}

.history-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.history-platform-badge {
  font-size: 10px;
  font-weight: 600;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.history-item-date {
  font-size: 11px;
  color: var(--sp-text-tertiary);
}

.history-item-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--sp-text-primary);
  margin: 0 0 4px 0;
  line-height: 1.3;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.history-item-match,
.history-item-preview {
  font-size: 12px;
  color: var(--sp-text-secondary);
  margin: 0 0 8px 0;
  line-height: 1.4;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

.history-action-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--sp-bg-primary);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-sm);
  font-size: 11px;
  color: var(--sp-text-secondary);
  cursor: pointer;
  transition: all var(--sp-transition);
}

.history-action-btn:hover {
  background: var(--sp-accent-light);
  color: var(--sp-accent);
  border-color: var(--sp-accent);
}

.history-action-delete:hover {
  background: rgba(220, 38, 38, 0.1);
  color: var(--sp-error);
  border-color: var(--sp-error);
}

/* Pin button styles */
.history-action-pin {
  color: var(--sp-text-tertiary);
}

.history-action-pin:hover {
  background: var(--sp-star-light);
  color: var(--sp-star);
  border-color: var(--sp-star);
}

.history-action-pin.active {
  background: var(--sp-star-light);
  color: var(--sp-star);
  border-color: var(--sp-star);
}

/* Pinned section */
.history-section-pinned {
  background: linear-gradient(to bottom, var(--sp-star-light), transparent);
  padding: 12px;
  margin: -12px -12px 12px -12px;
  border-radius: var(--sp-radius-md);
}

.history-section-pinned .history-section-title {
  color: var(--sp-star);
}

.history-item-pinned {
  border-left: 3px solid var(--sp-star);
}

/* History Filter Toggle */
.history-filter-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--sp-text-tertiary);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--sp-radius-sm);
  display: flex;
  align-items: center;
  transition: all var(--sp-transition);
}

.history-filter-toggle:hover {
  background: var(--sp-bg-hover);
  color: var(--sp-text-primary);
}

.history-filter-toggle.active {
  background: var(--sp-accent-light);
  color: var(--sp-accent);
}

/* Platform Filters */
.history-filters {
  background: var(--sp-bg-secondary);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
  padding: 10px 12px;
}

.history-filters-label {
  font-size: 11px;
  color: var(--sp-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  display: block;
}

.history-platform-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.history-platform-filter {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--sp-bg-primary);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-sm);
  font-size: 12px;
  color: var(--sp-text-secondary);
  cursor: pointer;
  transition: all var(--sp-transition);
}

.history-platform-filter:hover {
  background: var(--sp-bg-hover);
}

.history-platform-filter.active {
  font-weight: 500;
}

.history-clear-filters {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: none;
  border: none;
  font-size: 11px;
  color: var(--sp-text-tertiary);
  cursor: pointer;
  transition: all var(--sp-transition);
}

.history-clear-filters:hover {
  color: var(--sp-error);
}

/* Date Filters */
.history-date-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.history-date-filter {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--sp-bg-primary);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-sm);
  font-size: 12px;
  color: var(--sp-text-secondary);
  cursor: pointer;
  transition: all var(--sp-transition);
}

.history-date-filter:hover {
  background: var(--sp-bg-hover);
}

.history-date-filter.active {
  background: var(--sp-accent-light);
  color: var(--sp-accent);
  border-color: var(--sp-accent);
  font-weight: 500;
}

/* Sync Status Bar */
.history-sync-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--sp-bg-secondary);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
}

.history-sync-status {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.history-sync-count {
  font-size: 13px;
  font-weight: 500;
  color: var(--sp-text-primary);
}

.history-sync-time {
  font-size: 11px;
  color: var(--sp-text-tertiary);
}

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

.history-sync-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: var(--sp-bg-primary);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-sm);
  font-size: 12px;
  color: var(--sp-text-secondary);
  cursor: pointer;
  transition: all var(--sp-transition);
}

.history-sync-btn:hover:not(:disabled) {
  background: var(--sp-accent-light);
  color: var(--sp-accent);
  border-color: var(--sp-accent);
}

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

.history-sync-import {
  background: var(--sp-accent);
  color: white;
  border-color: var(--sp-accent);
}

.history-sync-import:hover:not(:disabled) {
  background: var(--sp-accent-hover);
  color: white;
}

/* Import Progress */
.history-import-progress {
  background: var(--sp-bg-secondary);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
  padding: 12px;
}

.history-import-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}

.history-import-status {
  font-size: 12px;
  color: var(--sp-text-secondary);
}

.history-import-current {
  font-size: 11px;
  color: var(--sp-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-import-bar {
  height: 4px;
  background: var(--sp-bg-tertiary);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 8px;
}

.history-import-fill {
  height: 100%;
  background: var(--sp-accent);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.history-import-cancel {
  background: none;
  border: none;
  font-size: 11px;
  color: var(--sp-text-tertiary);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--sp-radius-sm);
  transition: all var(--sp-transition);
}

.history-import-cancel:hover {
  background: rgba(220, 38, 38, 0.1);
  color: var(--sp-error);
}

/* Stats with platform breakdown */
.history-stat-item {
  font-size: 11px;
  font-weight: 500;
}

/* Platform Header */
.history-platform-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--sp-bg-secondary);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
  margin-bottom: 8px;
}

.history-platform-info {
  font-size: 12px;
  color: var(--sp-text-secondary);
  flex: 1;
}

.history-show-all-btn {
  background: none;
  border: none;
  font-size: 11px;
  color: var(--sp-accent);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--sp-radius-sm);
  transition: all var(--sp-transition);
}

.history-show-all-btn:hover {
  background: var(--sp-accent-light);
  text-decoration: underline;
}

/* ============================================
   Notion Sync
   ============================================ */
.sp-form-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--sp-bg-secondary);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
  font-family: inherit;
  font-size: 13px;
  color: var(--sp-text-primary);
  outline: none;
  transition: all var(--sp-transition);
}

.sp-form-input:focus {
  border-color: var(--sp-accent);
  background: var(--sp-bg-primary);
}

.sp-form-hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--sp-text-tertiary);
}

.sp-form-hint a {
  color: var(--sp-accent);
  text-decoration: none;
}

.sp-form-hint a:hover {
  text-decoration: underline;
}

.sp-notion-error {
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid var(--sp-error);
  border-radius: var(--sp-radius-md);
  padding: 10px 12px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--sp-error);
}

/* ============================================
   Continue In Modal
   ============================================ */
.sp-continue-in-modal {
  background: var(--sp-glass-bg-strong);
  backdrop-filter: blur(var(--sp-blur-lg));
  -webkit-backdrop-filter: blur(var(--sp-blur-lg));
  border-radius: var(--sp-radius-xl);
  border: 1px solid var(--sp-glass-border);
  width: 90%;
  max-width: 420px;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: var(--sp-shadow-glass-lg);
  display: flex;
  flex-direction: column;
  animation: modalSlideIn 0.25s ease-out;
  position: relative;
}

/* Transfer Loading Overlay - covers entire modal */
.sp-transfer-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sp-radius-xl);
}

.sp-transfer-overlay-text {
  color: var(--sp-text-primary);
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  padding: 0 1.5rem;
}

.sp-continue-in-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--sp-glass-border);
  background: transparent;
}

.sp-continue-in-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--sp-text-primary);
}

.sp-continue-in-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

/* Custom scrollbar for Continue In modal body */
.sp-continue-in-body::-webkit-scrollbar {
  width: 6px;
}

.sp-continue-in-body::-webkit-scrollbar-track {
  background: transparent;
}

.sp-continue-in-body::-webkit-scrollbar-thumb {
  background: var(--sp-border);
  border-radius: 3px;
}

.sp-continue-in-body::-webkit-scrollbar-thumb:hover {
  background: var(--sp-text-tertiary);
}

.sp-continue-in-description {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: var(--sp-text-secondary);
  line-height: 1.5;
}

.sp-continue-in-no-context {
  color: var(--sp-text-tertiary);
  font-style: italic;
}

.sp-continue-in-preview {
  background: var(--sp-glass-bg);
  backdrop-filter: blur(var(--sp-blur-sm));
  -webkit-backdrop-filter: blur(var(--sp-blur-sm));
  border: 1px solid var(--sp-glass-border);
  border-radius: var(--sp-radius-lg);
  overflow: hidden;
}

.sp-continue-in-preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid var(--sp-glass-border);
  font-size: 12px;
  font-weight: 500;
  color: var(--sp-text-secondary);
}

.sp-continue-in-preview-icon {
  display: flex;
  color: var(--sp-accent);
}

.sp-continue-in-preview-content {
  padding: 12px;
  max-height: 200px;
  overflow-y: auto;
}

/* Custom scrollbar for Continue In modal preview */
.sp-continue-in-preview-content::-webkit-scrollbar {
  width: 5px;
}

.sp-continue-in-preview-content::-webkit-scrollbar-track {
  background: transparent;
}

.sp-continue-in-preview-content::-webkit-scrollbar-thumb {
  background: var(--sp-border);
  border-radius: 3px;
}

.sp-continue-in-preview-content::-webkit-scrollbar-thumb:hover {
  background: var(--sp-text-tertiary);
}

.sp-continue-in-message {
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 13px;
  line-height: 1.4;
}

.sp-continue-in-message:last-child {
  border-bottom: none;
}

.sp-continue-in-message-role {
  font-weight: 500;
  color: var(--sp-text-primary);
  margin-right: 6px;
}

.sp-continue-in-message-user .sp-continue-in-message-role {
  color: var(--sp-accent);
}

.sp-continue-in-message-content {
  color: var(--sp-text-secondary);
}

.sp-continue-in-more {
  padding-top: 8px;
  font-size: 12px;
  color: var(--sp-text-tertiary);
  font-style: italic;
}

/* Transfer Mode Selector */
.sp-transfer-mode-selector {
  margin-bottom: 16px;
  padding: 12px;
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  border-radius: var(--sp-radius-lg);
}

.sp-transfer-mode-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--sp-text-secondary);
  margin-bottom: 10px;
}

.sp-transfer-mode-options {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.sp-transfer-mode-btn {
  flex: 1;
  padding: 8px 12px;
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  border-radius: var(--sp-radius-md);
  font-size: 11px;
  font-weight: 500;
  color: var(--sp-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  white-space: nowrap;
}

.sp-transfer-mode-btn:hover {
  background: var(--sp-glass-bg-hover);
  border-color: var(--sp-text-tertiary);
}

.sp-transfer-mode-btn.active {
  background: var(--sp-accent);
  border-color: var(--sp-accent);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 123, 123, 0.3);
}

.sp-transfer-mode-hint {
  display: block;
  font-size: 11px;
  color: var(--sp-text-tertiary);
  line-height: 1.4;
}

/* Context Stats Badges */
.sp-context-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.sp-stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(255, 123, 123, 0.1);
  border: 1px solid rgba(255, 123, 123, 0.2);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  color: var(--sp-accent);
}

.sp-stat-badge svg {
  width: 12px;
  height: 12px;
  opacity: 0.8;
}

.sp-continue-in-actions {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--sp-glass-border);
  background: rgba(0, 0, 0, 0.02);
  justify-content: flex-end;
}

/* ============================================
   Variable Modal Styles
   ============================================ */
.variable-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 150ms ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.variable-modal {
  background: var(--sp-bg-primary);
  border-radius: var(--sp-radius-lg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 480px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  animation: slideUp 200ms ease;
}

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

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.variable-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--sp-text-primary);
}

.variable-modal-close {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--sp-text-tertiary);
  border-radius: var(--sp-radius-sm);
  transition: all var(--sp-transition);
}

.variable-modal-close:hover {
  background: var(--sp-bg-hover);
  color: var(--sp-text-primary);
}

.variable-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.variable-input-group {
  margin-bottom: 16px;
}

.variable-input-group:last-child {
  margin-bottom: 0;
}

.variable-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--sp-text-secondary);
  margin-bottom: 6px;
}

.variable-label code {
  background: var(--sp-accent-light);
  color: var(--sp-accent);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'SF Mono', Monaco, 'Consolas', monospace;
  font-size: 12px;
}

.variable-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
  font-size: 14px;
  background: var(--sp-bg-secondary);
  color: var(--sp-text-primary);
  transition: all var(--sp-transition);
}

.variable-input:focus {
  outline: none;
  border-color: var(--sp-accent);
  background: var(--sp-bg-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.variable-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--sp-border);
}

/* ============================================
   Code Preview Styles
   ============================================ */
.code-preview-container {
  background: var(--sp-bg-primary);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.code-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--sp-bg-secondary);
  border-bottom: 1px solid var(--sp-border);
}

.code-preview-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--sp-text-primary);
}

.code-preview-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.code-preview-language {
  font-size: 11px;
  font-weight: 500;
  color: var(--sp-accent);
  background: var(--sp-accent-light);
  padding: 2px 8px;
  border-radius: 4px;
}

.code-preview-close {
  background: none;
  border: none;
  padding: 4px 8px;
  cursor: pointer;
  color: var(--sp-text-tertiary);
  font-size: 14px;
  border-radius: var(--sp-radius-sm);
  transition: all var(--sp-transition);
}

.code-preview-close:hover {
  background: var(--sp-bg-hover);
  color: var(--sp-text-primary);
}

.code-preview-content {
  position: relative;
  min-height: 200px;
}

.code-preview-loading,
.code-preview-error {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  color: var(--sp-text-secondary);
}

.code-preview-error {
  color: var(--sp-error);
  background: rgba(220, 38, 38, 0.05);
}

.code-preview-error-icon {
  font-size: 16px;
}

.code-preview-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--sp-border);
  border-top-color: var(--sp-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.code-preview-iframe {
  width: 100%;
  min-height: 200px;
  border: none;
  background: white;
}

/* ============================================
   Slash Command Picker Styles
   ============================================ */
.slash-command-picker {
  background: var(--sp-bg-primary);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  width: 320px;
  max-height: 400px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 150ms ease;
}

.slash-picker-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--sp-border);
  background: var(--sp-bg-secondary);
}

.slash-picker-icon {
  font-size: 16px;
  font-weight: 700;
  color: var(--sp-accent);
  font-family: 'SF Mono', Monaco, 'Consolas', monospace;
}

.slash-picker-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--sp-text-primary);
  flex: 1;
}

.slash-picker-query {
  font-size: 12px;
  color: var(--sp-text-tertiary);
  font-style: italic;
}

.slash-picker-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}

.slash-picker-loading,
.slash-picker-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  gap: 8px;
  color: var(--sp-text-tertiary);
  font-size: 13px;
}

.slash-picker-empty-icon {
  font-size: 24px;
  opacity: 0.5;
}

.slash-picker-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--sp-border);
  border-top-color: var(--sp-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.slash-picker-item {
  padding: 10px 12px;
  border-radius: var(--sp-radius-md);
  cursor: pointer;
  transition: all var(--sp-transition);
}

.slash-picker-item:hover,
.slash-picker-item.selected {
  background: var(--sp-bg-hover);
}

.slash-picker-item.selected {
  background: var(--sp-accent-light);
}

.slash-picker-item-main {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.slash-picker-item-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--sp-text-primary);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slash-picker-favorite {
  color: var(--sp-star);
  margin-right: 4px;
}

.slash-picker-item-category {
  font-size: 10px;
  font-weight: 500;
  color: var(--sp-text-tertiary);
  background: var(--sp-bg-tertiary);
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.slash-picker-item-preview {
  font-size: 12px;
  color: var(--sp-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slash-picker-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--sp-border);
  background: var(--sp-bg-secondary);
}

.slash-picker-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--sp-text-tertiary);
}

.slash-picker-hint kbd {
  background: var(--sp-bg-tertiary);
  border: 1px solid var(--sp-border);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: 'SF Mono', Monaco, 'Consolas', monospace;
  font-size: 10px;
  margin-right: 4px;
}

/* ============================================
   Bulk Action Bar
   ============================================ */

.bulk-action-bar {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(30, 30, 40, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 1000;
  animation: bulk-bar-slide-up 0.2s ease-out;
}

@keyframes bulk-bar-slide-up {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.bulk-action-count {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.bulk-count-number {
  font-size: 16px;
  font-weight: 700;
  color: var(--sp-accent);
}

.bulk-count-label {
  font-size: 12px;
  color: var(--sp-text-secondary);
}

.bulk-action-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.bulk-action-dropdown {
  position: relative;
}

.bulk-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: var(--sp-text-primary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.bulk-action-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
}

.bulk-action-btn.danger {
  color: #f87171;
}

.bulk-action-btn.danger:hover {
  background: rgba(248, 113, 113, 0.15);
  border-color: rgba(248, 113, 113, 0.3);
}

.bulk-dropdown-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 160px;
  background: rgba(30, 30, 40, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  z-index: 1001;
}

.bulk-dropdown-header {
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sp-text-tertiary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.bulk-dropdown-empty {
  padding: 12px;
  font-size: 12px;
  color: var(--sp-text-tertiary);
  text-align: center;
}

.bulk-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  color: var(--sp-text-primary);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.bulk-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.bulk-action-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.bulk-meta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--sp-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

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

/* Bulk Modal */
.bulk-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(4px);
}

.bulk-modal {
  width: 90%;
  max-width: 360px;
  background: rgba(30, 30, 40, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.bulk-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.bulk-modal-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--sp-text-primary);
}

.bulk-modal-body {
  padding: 20px;
}

.bulk-modal-body p {
  font-size: 14px;
  color: var(--sp-text-secondary);
  margin-bottom: 8px;
}

.bulk-modal-warning {
  color: #f87171 !important;
  font-size: 12px !important;
}

.bulk-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.bulk-modal-btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.bulk-modal-btn.cancel {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--sp-text-secondary);
}

.bulk-modal-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.05);
}

.bulk-modal-btn.danger {
  background: var(--sp-error);
  border: none;
  color: white;
}

.bulk-modal-btn.danger:hover {
  background: var(--sp-error);
  opacity: 0.92;
}

/* Selection Checkbox Styles */
.chat-item-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat-item-checkbox:hover {
  border-color: var(--sp-accent);
}

.chat-item-checkbox.checked {
  background: var(--sp-accent);
  border-color: var(--sp-accent);
}

.chat-item-checkbox.checked svg {
  color: white;
}

.chat-item-selectable {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ============================================
   Label Manager Styles
   ============================================ */

.label-manager {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: var(--sp-bg-secondary);
  border-radius: var(--sp-radius-lg);
  border: 1px solid var(--sp-border);
}

.label-manager-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px;
  color: var(--sp-text-secondary);
}

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

.label-manager-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sp-text-primary);
}

.label-manager-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  color: var(--sp-text-tertiary);
  cursor: pointer;
  border-radius: var(--sp-radius-sm);
  transition: all 0.15s ease;
}

.label-manager-close:hover {
  background: var(--sp-bg-tertiary);
  color: var(--sp-text-primary);
}

/* Label Form */
.label-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: var(--sp-bg-primary);
  border-radius: var(--sp-radius-md);
  border: 1px solid var(--sp-border);
}

.label-form-input {
  padding: 10px 12px;
  background: var(--sp-bg-tertiary);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-sm);
  font-family: inherit;
  font-size: 13px;
  color: var(--sp-text-primary);
  outline: none;
  transition: border-color 0.15s ease;
}

.label-form-input:focus {
  border-color: var(--sp-accent);
}

.label-color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.label-color-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.label-color-btn:hover {
  transform: scale(1.1);
}

.label-color-btn.selected {
  border-color: white;
  box-shadow: 0 0 0 2px var(--sp-bg-primary), 0 0 0 4px currentColor;
}

.label-form-error {
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--sp-radius-sm);
  font-size: 12px;
  color: #ef4444;
}

.label-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.label-form-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--sp-radius-sm);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.label-form-btn.cancel {
  background: var(--sp-bg-tertiary);
  border: 1px solid var(--sp-border);
  color: var(--sp-text-secondary);
}

.label-form-btn.cancel:hover {
  background: var(--sp-bg-secondary);
  color: var(--sp-text-primary);
}

.label-form-btn.save {
  background: var(--sp-accent);
  border: none;
  color: white;
}

.label-form-btn.save:hover {
  background: var(--sp-accent-hover);
}

/* Add Label Button */
.label-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  background: var(--sp-bg-tertiary);
  border: 1px dashed var(--sp-border);
  border-radius: var(--sp-radius-md);
  font-size: 13px;
  color: var(--sp-text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.label-add-btn:hover {
  background: var(--sp-bg-primary);
  border-color: var(--sp-accent);
  color: var(--sp-accent);
}

/* Labels List */
.label-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.label-list-empty {
  text-align: center;
  padding: 24px;
  color: var(--sp-text-tertiary);
}

.label-list-empty p:first-child {
  font-size: 13px;
  color: var(--sp-text-secondary);
}

.label-list-empty-hint {
  font-size: 12px;
  margin-top: 4px;
}

.label-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--sp-bg-primary);
  border-radius: var(--sp-radius-sm);
  transition: background 0.15s ease;
}

.label-item:hover {
  background: var(--sp-bg-tertiary);
}

.label-item.editing {
  background: var(--sp-accent-alpha);
}

.label-item-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.label-item-name {
  flex: 1;
  font-size: 13px;
  color: var(--sp-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.label-item-count {
  font-size: 11px;
  color: var(--sp-text-tertiary);
  padding: 2px 8px;
  background: var(--sp-bg-tertiary);
  border-radius: 10px;
}

.label-item-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

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

.label-item-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: none;
  border: none;
  color: var(--sp-text-tertiary);
  cursor: pointer;
  border-radius: var(--sp-radius-sm);
  transition: all 0.15s ease;
}

.label-item-btn:hover {
  background: var(--sp-bg-secondary);
  color: var(--sp-text-primary);
}

.label-item-btn.danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* Label Pills (used in chat items) */
.label-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.label-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
  color: white;
  white-space: nowrap;
}

.label-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Label Picker (dropdown for adding labels to chats) */
.label-picker {
  position: absolute;
  top: 100%;
  right: 0;
  width: 200px;
  background: var(--sp-bg-secondary);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
  box-shadow: var(--sp-shadow-lg);
  z-index: 100;
  overflow: hidden;
}

.label-picker-header {
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sp-text-secondary);
  border-bottom: 1px solid var(--sp-border);
}

.label-picker-list {
  max-height: 200px;
  overflow-y: auto;
}

.label-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.label-picker-item:hover {
  background: var(--sp-bg-tertiary);
}

.label-picker-item.selected {
  background: var(--sp-accent-alpha);
}

.label-picker-color {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.label-picker-name {
  flex: 1;
  font-size: 13px;
  color: var(--sp-text-primary);
}

.label-picker-check {
  color: var(--sp-accent);
}

.label-picker-empty {
  padding: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--sp-text-tertiary);
}

/* ============================================
   Analytics Dashboard - Professional Compact Design
   ============================================ */

/* Container - full height, no overflow */
.sp-analytics-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Loading & Error States */
.sp-analytics-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 12px;
  color: var(--sp-text-tertiary);
  font-size: 12px;
}

.sp-analytics-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--sp-glass-border);
  border-top-color: var(--sp-accent);
  border-radius: 50%;
  animation: sp-analytics-spin 0.7s linear infinite;
}

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

.sp-analytics-error-text {
  color: var(--sp-text-tertiary);
}

.sp-analytics-retry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  border-radius: 8px;
  color: var(--sp-text-secondary);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sp-analytics-retry:hover {
  background: var(--sp-accent);
  border-color: var(--sp-accent);
  color: white;
}

/* Sticky Header */
.sp-analytics-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--sp-glass-bg);
  border-bottom: 1px solid var(--sp-glass-border);
  flex-shrink: 0;
}

/* Platform Selector */
.sp-analytics-platform-select {
  position: relative;
}

.sp-analytics-platform-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--sp-glass-border);
  border-radius: 8px;
  color: var(--sp-text-primary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sp-analytics-platform-trigger:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--sp-text-tertiary);
}

.sp-analytics-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sp-analytics-platform-name {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-analytics-dropdown-overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
}

.sp-analytics-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 100;
  min-width: 140px;
  background: rgba(20, 25, 40, 0.98);
  border: 1px solid var(--sp-glass-border);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px);
}

.sp-analytics-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--sp-text-secondary);
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: all 0.12s ease;
}

.sp-analytics-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--sp-text-primary);
}

.sp-analytics-dropdown-item.active {
  background: var(--sp-accent);
  color: white;
}

/* Header Actions */
.sp-analytics-actions {
  display: flex;
  gap: 4px;
}

.sp-analytics-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--sp-text-tertiary);
  cursor: pointer;
  transition: all 0.15s ease;
}

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

/* Scrollable Content with Custom Scrollbar */
.sp-analytics-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sp-analytics-scroll::-webkit-scrollbar {
  width: 5px;
}

.sp-analytics-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.sp-analytics-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.sp-analytics-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Stats Row Layout */
.sp-analytics-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sp-analytics-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  border-radius: 8px;
  padding: 12px 14px;
  transition: all 0.15s ease;
}

.sp-analytics-stat:hover {
  border-color: var(--sp-text-tertiary);
}

.sp-analytics-stat-value {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--sp-text-primary);
  line-height: 1;
}

.sp-analytics-stat-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--sp-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.sp-analytics-stat-label svg {
  opacity: 0.7;
}

/* Trend Badges */
.sp-analytics-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.sp-analytics-trend.trend-up {
  color: #10b981;
  background: rgba(16, 185, 129, 0.15);
}

.sp-analytics-trend.trend-down {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
}

.sp-analytics-trend svg {
  flex-shrink: 0;
}

/* Card Container */
.sp-analytics-card {
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  border-radius: 12px;
  padding: 14px;
}

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

.sp-analytics-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sp-text-primary);
}

.sp-analytics-card-title svg {
  color: var(--sp-accent);
}

/* Toggle Buttons */
.sp-analytics-toggle {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
}

.sp-analytics-toggle-btn {
  padding: 4px 10px;
  background: none;
  border: none;
  border-radius: 4px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  color: var(--sp-text-tertiary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.sp-analytics-toggle-btn:hover {
  color: var(--sp-text-secondary);
}

.sp-analytics-toggle-btn.active {
  background: var(--sp-accent);
  color: white;
}

/* Bar Chart */
.sp-analytics-chart {
  height: 120px;
}

.sp-analytics-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 100%;
  gap: 4px;
  padding-bottom: 20px;
}

.sp-analytics-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  min-width: 0;
}

.sp-analytics-bar-track {
  flex: 1;
  width: 100%;
  max-width: 24px;
  display: flex;
  align-items: flex-end;
}

.sp-analytics-bar-fill {
  width: 100%;
  border-radius: 3px 3px 0 0;
  transition: height 0.3s ease, opacity 0.15s ease;
  opacity: 0.85;
}

.sp-analytics-bar-col:hover .sp-analytics-bar-fill {
  opacity: 1;
}

.sp-analytics-bar-label {
  margin-top: 6px;
  font-size: 9px;
  font-weight: 500;
  color: var(--sp-text-tertiary);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.sp-analytics-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--sp-text-tertiary);
  font-size: 11px;
}

/* Distribution List */
.sp-analytics-dist-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.sp-analytics-dist-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sp-analytics-dist-label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 80px;
  font-size: 11px;
  color: var(--sp-text-secondary);
}

.sp-analytics-dist-bar-track {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
}

.sp-analytics-dist-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.sp-analytics-dist-pct {
  min-width: 32px;
  font-size: 10px;
  font-weight: 600;
  color: var(--sp-text-tertiary);
  text-align: right;
}

/* Token List */
.sp-analytics-token-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.sp-analytics-token-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: var(--sp-bg-tertiary);
  border-radius: var(--sp-radius-sm);
  font-size: 11px;
  color: var(--sp-text-secondary);
}

.sp-analytics-token-value {
  font-weight: 600;
  color: var(--sp-text-primary);
}

.sp-analytics-disclaimer {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 6px 8px;
  background: var(--sp-warning-light);
  border-radius: var(--sp-radius-sm);
  font-size: 10px;
  color: var(--sp-text-tertiary);
}

.sp-analytics-disclaimer svg {
  color: var(--sp-warning);
  flex-shrink: 0;
}

/* Cost Estimator */
.sp-analytics-cost-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px;
  margin-top: 10px;
  background: linear-gradient(135deg, var(--sp-success-light), var(--sp-accent-light));
  border: 1px solid var(--sp-border-light);
  border-radius: var(--sp-radius-md);
}

.sp-analytics-cost-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--sp-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sp-analytics-cost-amount {
  font-size: 24px;
  font-weight: 700;
  color: var(--sp-success);
  text-shadow: 0 0 22px var(--sp-success-light);
}

.sp-analytics-cost-platforms {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--sp-border-light);
}

.sp-analytics-cost-platform-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: var(--sp-bg-tertiary);
  border-radius: var(--sp-radius-sm);
  font-size: 11px;
}

.sp-analytics-cost-platform-value {
  font-weight: 600;
  color: var(--sp-text-primary);
  font-variant-numeric: tabular-nums;
}

/* Keywords */
.sp-analytics-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.sp-analytics-keyword {
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 11px;
  color: var(--sp-text-secondary);
  cursor: default;
  transition: all 0.15s ease;
}

.sp-analytics-keyword:hover {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
  color: var(--sp-accent);
}

/* Obsidian/Logseq Export Buttons */
.sp-export-pkm-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--sp-glass-border);
  margin-top: 16px;
}

.sp-export-pkm-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--sp-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.sp-export-pkm-buttons {
  display: flex;
  gap: 10px;
}

.sp-export-pkm-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  border-radius: var(--sp-radius-lg);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--sp-text-primary);
  cursor: pointer;
  transition: all var(--sp-transition);
  backdrop-filter: blur(var(--sp-glass-blur));
}

.sp-export-pkm-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--sp-glass-shadow);
}

.sp-export-pkm-btn.obsidian {
  border-color: rgba(124, 58, 237, 0.3);
}

.sp-export-pkm-btn.obsidian:hover {
  border-color: #7c3aed;
  background: rgba(124, 58, 237, 0.15);
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.25);
}

.sp-export-pkm-btn.obsidian svg {
  color: #7c3aed;
}

.sp-export-pkm-btn.logseq {
  border-color: rgba(133, 200, 200, 0.3);
}

.sp-export-pkm-btn.logseq:hover {
  border-color: #85c8c8;
  background: rgba(133, 200, 200, 0.15);
  box-shadow: 0 8px 24px rgba(133, 200, 200, 0.25);
}

.sp-export-pkm-btn.logseq svg {
  color: #85c8c8;
}

/* ============================================
   Scroll Export Dialog (Gemini/Grok)
   ============================================ */
.sp-export-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp-export-option-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px;
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  border-radius: var(--sp-radius-lg);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: all var(--sp-transition);
}

.sp-export-option-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--sp-glass-shadow);
}

.sp-export-option-btn strong {
  font-size: 14px;
  color: var(--sp-text-primary);
}

.sp-export-option-btn span {
  font-size: 12px;
  color: var(--sp-text-tertiary);
}

.sp-export-option-btn.quick:hover {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.1);
}

.sp-export-option-btn.full:hover {
  border-color: var(--sp-accent);
  background: rgba(59, 130, 246, 0.1);
}

.sp-export-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
}

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

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

.sp-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--sp-glass-border);
  border-radius: 3px;
  overflow: hidden;
}

.sp-progress-fill {
  height: 100%;
  background: var(--sp-accent);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.sp-text-muted {
  color: var(--sp-text-tertiary);
  font-size: 12px;
}


/* ============================================
   More Tabs Dropdown
   ============================================ */
.sp-tab-more {
  position: relative;
  overflow: visible;
}

/* Invisible backdrop to capture outside clicks */
.sp-dropdown-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: transparent;
}

.sp-tab-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  min-width: 180px;
  background: var(--sp-glass-bg, rgba(255, 255, 255, 0.95));
  border: 1px solid var(--sp-glass-border, rgba(255, 255, 255, 0.18));
  border-radius: var(--sp-radius-lg, 12px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20px);
  z-index: 100;
  padding: 6px;
  animation: sp-dropdown-in 0.15s ease-out;
}

@keyframes sp-dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sp-tab-dropdown button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: var(--sp-radius-md, 8px);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--sp-text-secondary, #64748b);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.sp-tab-dropdown button:hover {
  background: var(--sp-hover, rgba(99, 102, 241, 0.1));
  color: var(--sp-accent, #6366f1);
}

.sp-tab-dropdown button svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.sp-tab-dropdown button:hover svg {
  opacity: 1;
}

.sp-tab-dropdown-divider {
  height: 1px;
  background: var(--sp-glass-border);
  margin: 6px 0;
}

/* ============================================
   Find Panel (Index Tab Style)
   ============================================ */
.find-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 6px;
}

.find-panel-search {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.find-panel-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--sp-icon-btn-color);
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.find-panel-input {
  width: 100%;
  padding: 10px 70px 10px 36px;
  background: var(--sp-search-bg);
  border: 1px solid var(--sp-search-border);
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  color: var(--sp-text-primary);
  outline: none;
  transition: all 0.2s ease;
}

.find-panel-input::placeholder {
  color: var(--sp-search-placeholder);
}

.find-panel-input:focus {
  border-color: var(--sp-icon-btn-hover-border);
  background: var(--sp-glass-bg-strong);
}

.find-panel-clear {
  position: absolute;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--sp-icon-btn-color);
  cursor: pointer;
  transition: all 0.15s;
}

.find-panel-clear:hover {
  color: var(--sp-text-primary);
  background: var(--sp-tab-hover-bg);
}

.find-panel-header {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  padding: 4px;
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  border-radius: 999px;
  backdrop-filter: blur(10px);
}

.find-panel-count {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--sp-text-secondary);
}

.find-panel-no-results {
  padding: 6px 12px;
  font-size: 11px;
  color: var(--sp-text-tertiary);
}

.find-panel-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.find-panel-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--sp-icon-btn-color);
  cursor: pointer;
  font-size: 10px;
  transition: all 0.2s ease;
}

.find-panel-nav-btn:hover:not(:disabled) {
  color: var(--sp-tab-hover-color);
  background: var(--sp-tab-hover-bg);
}

.find-panel-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.find-panel-pos {
  font-size: 11px;
  font-weight: 600;
  color: var(--sp-icon-btn-color);
  padding: 0 6px;
}

.find-panel-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 4px;
  padding-top: 4px;
  /* Extra space for hover lift effect */

  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.find-panel-list:hover {
  scrollbar-color: var(--sp-accent) transparent;
}

.find-panel-list::-webkit-scrollbar {
  width: 6px;
}

.find-panel-list::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 3px;
}

.find-panel-list::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
  transition: background 0.3s ease;
}

.find-panel-list:hover::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--sp-accent) 0%, rgba(99, 102, 241, 0.6) 100%);
}

.find-panel-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--sp-accent) 0%, rgba(99, 102, 241, 0.8) 100%);
}

.find-panel-list::-webkit-scrollbar-thumb:active {
  background: var(--sp-accent);
}

.find-panel-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--sp-glass-border);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: var(--sp-card-shadow);
}

.find-panel-item.user {
  background: var(--sp-user-gradient);
}

.find-panel-item.assistant {
  background: var(--sp-ai-gradient);
}

.find-panel-item:hover {
  transform: translateY(-3px);
  border-color: var(--sp-message-hover-border);
}

.find-panel-item.active {
  border-color: var(--sp-accent);
  box-shadow: 0 0 0 2px var(--sp-accent-glow);
}

.find-panel-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  flex-shrink: 0;
  border: 1px solid var(--sp-glass-border);
  box-shadow: var(--sp-glass-shadow);
  position: relative;
  background: var(--sp-glass-bg);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--sp-text-primary);
}

.find-panel-icon-box::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute;
  bottom: -1px;
  right: -1px;
  border: 1.5px solid #fff;
  background: #ff7b7b;
}

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

.find-panel-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}

.find-panel-item.user .find-panel-label {
  color: var(--sp-message-user-label);
}

.find-panel-item.assistant .find-panel-label {
  color: var(--sp-message-assistant-label);
}

.find-panel-item-text {
  font-size: 13px;
  color: var(--sp-message-preview);
  line-height: 1.5;
  word-break: break-word;
}

.find-panel-item.assistant .find-panel-item-text {
  color: var(--sp-text-primary);
}

.find-panel-context {
  color: var(--sp-text-tertiary);
}

.find-panel-match {
  background: var(--sp-warning-light);
  color: var(--sp-warning);
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 600;
}

.find-panel-msg-num {
  font-size: 10px;
  color: var(--sp-text-tertiary);
  font-weight: 500;
  margin-left: auto;
  padding: 2px 6px;
  background: var(--sp-glass-bg);
  border-radius: 10px;
}

.find-panel-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--sp-text-tertiary);
  text-align: center;
  padding: 40px 20px;
}

.find-panel-empty svg {
  opacity: 0.3;
}

.find-panel-empty p {
  margin: 0;
  font-size: 13px;
}

.find-panel-hint {
  font-size: 11px !important;
  opacity: 0.6;
}

.find-panel-hint kbd {
  display: inline-block;
  padding: 2px 6px;
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  border-radius: 4px;
  font-size: 10px;
  font-family: inherit;
  font-weight: 600;
  margin: 0 2px;
}

.find-results-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  padding-top: 4px;
  /* Extra space for hover lift effect */
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.find-results-list:hover {
  scrollbar-color: var(--sp-border) transparent;
}

.find-results-list::-webkit-scrollbar {
  width: 6px;
}

.find-results-list::-webkit-scrollbar-track {
  background: transparent;
}

.find-results-list::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
  transition: background 0.2s ease;
}

.find-results-list:hover::-webkit-scrollbar-thumb {
  background: var(--sp-border);
}

.find-results-list::-webkit-scrollbar-thumb:hover {
  background: var(--sp-text-tertiary);
}

/* Message Group Card - matches .sp-message-item style */
.find-message-group {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(118, 96, 197, 0.18);
  box-shadow: 0 12px 25px rgba(86, 64, 192, 0.1);
}

.find-message-group.user {
  background: linear-gradient(135deg, #eef2ff 0%, #dbeafe 100%);
}

:root[data-theme='dark'] .find-message-group.user {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(99, 102, 241, 0.12) 100%);
}

.find-message-group.assistant {
  background: var(--sp-ai-gradient);
}

.find-message-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--sp-border-light);
}

.find-message-role {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.find-message-role.user {
  color: #3b82f6;
}

.find-message-role.assistant {
  color: #10b981;
}

.find-message-role svg {
  width: 14px;
  height: 14px;
}

.find-message-info {
  font-size: 11px;
  font-weight: 500;
  color: var(--sp-text-tertiary);
  background: var(--sp-tab-bg);
  padding: 3px 10px;
  border-radius: 20px;
}

/* Match Items */
.find-matches {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;

  /* Invisible scrollbar - appears on hover */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.find-matches:hover {
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.find-matches::-webkit-scrollbar {
  width: 6px;
}

.find-matches::-webkit-scrollbar-track {
  background: transparent;
}

.find-matches::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
  transition: background 0.2s ease;
}

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

.find-matches::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

.find-match-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--sp-radius-md);
  cursor: pointer;
}

:root[data-theme='dark'] .find-match-item {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}

.find-match-item.active {
  background: rgba(59, 130, 246, 0.15);
  border-color: var(--sp-accent);
  box-shadow: 0 0 0 2px var(--sp-accent-glow);
}

.find-match-number {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  border-radius: var(--sp-radius-sm);
  font-size: 11px;
  font-weight: 700;
  color: var(--sp-text-secondary);
}

.find-match-item.active .find-match-number {
  background: var(--sp-accent);
  border-color: var(--sp-accent);
  color: white;
  box-shadow: 0 4px 12px var(--sp-accent-glow);
}

.find-match-context {
  flex: 1;
  display: block;
  font-size: 13px;
  color: var(--sp-text-primary);
  line-height: 1.6;
  word-break: break-word;
  min-height: 20px;
  overflow: visible;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.find-context-before,
.find-context-after {
  display: inline;
  color: var(--sp-text-tertiary);
  filter: none !important;
  opacity: 1 !important;
}

.find-highlight {
  display: inline-block;
  background: var(--sp-warning-light);
  color: var(--sp-warning);
  padding: 2px 4px;
  border-radius: var(--sp-radius-xs);
  font-weight: 600;
  border: 1px solid var(--sp-warning-light);
}

:root[data-theme='dark'] .find-highlight {
  background: var(--sp-warning-light);
  color: var(--sp-warning);
  border-color: var(--sp-warning-light);
}

/* Empty State - matches .sp-empty styles */
.find-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  flex: 1;
}

.find-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  border-radius: var(--sp-radius-xl);
  color: var(--sp-text-tertiary);
  margin-bottom: 16px;
}

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

.find-empty-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--sp-text-primary);
  margin-bottom: 8px;
}

.find-empty-desc {
  font-size: 13px;
  color: var(--sp-text-tertiary);
  max-width: 240px;
  line-height: 1.6;
}

.find-empty-desc kbd {
  display: inline-block;
  padding: 3px 8px;
  margin: 0 2px;
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  border-radius: var(--sp-radius-sm);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  color: var(--sp-text-secondary);
  box-shadow: 0 2px 0 var(--sp-border);
}

/* ============================================
   Phase 1: Settings Panel
   ============================================ */
.sp-settings-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--sp-bg);
  overflow-x: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

.sp-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--sp-glass-border);
}

.sp-settings-header h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--sp-text-primary);
}

.sp-settings-close {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--sp-text-tertiary);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--sp-radius-sm);
  transition: all 0.15s ease;
}

.sp-settings-close:hover {
  background: var(--sp-glass-bg);
  color: var(--sp-text-primary);
}

.sp-settings-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--sp-glass-border);
  overflow-x: hidden;
  flex-wrap: wrap;
}

.sp-settings-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--sp-text-tertiary);
  background: transparent;
  border: none;
  border-radius: var(--sp-radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.sp-settings-tab:hover {
  background: var(--sp-glass-bg);
  color: var(--sp-text-secondary);
}

.sp-settings-tab.active {
  background: var(--sp-accent-bg);
  color: var(--sp-accent);
}

.sp-settings-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 20px;
}

.sp-settings-section h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--sp-text-primary);
  margin: 16px 0 8px;
}

.sp-settings-section h3:first-child {
  margin-top: 0;
}

.sp-settings-desc {
  font-size: 12px;
  color: var(--sp-text-tertiary);
  margin-bottom: 12px;
  line-height: 1.5;
}

.sp-settings-hint {
  font-size: 11px;
  color: var(--sp-text-tertiary);
  margin-top: 8px;
  font-style: italic;
}

/* Theme Selector */
.sp-theme-selector {
  display: flex;
  gap: 8px;
}

.sp-theme-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  font-size: 12px;
  color: var(--sp-text-secondary);
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  border-radius: var(--sp-radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
}

.sp-theme-btn:hover {
  border-color: var(--sp-border-hover);
  background: var(--sp-glass-bg-hover);
}

.sp-theme-btn.active {
  background: var(--sp-accent-bg);
  border-color: var(--sp-accent);
  color: var(--sp-accent);
}

/* Toggle Switch */
.sp-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  margin-bottom: 12px;
}

.sp-toggle input {
  display: none;
}

.sp-toggle-slider {
  position: relative;
  width: 40px;
  height: 22px;
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  border-radius: 11px;
  transition: all 0.2s ease;
}

.sp-toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--sp-text-tertiary);
  border-radius: 50%;
  transition: all 0.2s ease;
}

.sp-toggle input:checked+.sp-toggle-slider {
  background: var(--sp-accent);
  border-color: var(--sp-accent);
}

.sp-toggle input:checked+.sp-toggle-slider::after {
  left: 20px;
  background: white;
}

.sp-toggle-label {
  font-size: 13px;
  color: var(--sp-text-secondary);
}

/* Settings Field */
.sp-settings-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
}

.sp-settings-field label {
  font-size: 12px;
  color: var(--sp-text-secondary);
}

.sp-settings-field select,
.sp-settings-field input[type="range"] {
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--sp-text-primary);
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  border-radius: var(--sp-radius-md);
  cursor: pointer;
}

.sp-settings-field input[type="range"] {
  padding: 0;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
}

.sp-settings-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--sp-accent);
  border-radius: 50%;
  cursor: pointer;
}

/* Custom CSS Editor */
.sp-custom-css-editor {
  width: 100%;
  min-height: 200px;
  padding: 12px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 12px;
  color: var(--sp-text-primary);
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  border-radius: var(--sp-radius-md);
  resize: vertical;
  line-height: 1.6;
}

.sp-custom-css-editor:focus {
  outline: none;
  border-color: var(--sp-accent);
}

/* Settings Footer */
.sp-settings-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid var(--sp-glass-border);
}

.sp-settings-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 12px;
  border-radius: var(--sp-radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
}

.sp-btn-secondary {
  color: var(--sp-text-secondary);
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
}

.sp-btn-secondary:hover {
  background: var(--sp-glass-bg-hover);
}

.sp-settings-status {
  font-size: 11px;
  color: var(--sp-text-tertiary);
}

/* ============================================
   Phase 1: Message Bookmarks
   ============================================ */
.sp-bookmarks {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sp-bookmarks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--sp-glass-border);
}

.sp-bookmarks-header h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sp-text-primary);
}

.sp-bookmarks-count {
  font-size: 11px;
  color: var(--sp-text-tertiary);
  background: var(--sp-glass-bg);
  padding: 2px 8px;
  border-radius: 10px;
}

.sp-bookmarks-search {
  position: relative;
  padding: 12px 16px;
}

.sp-bookmarks-search .sp-search-icon {
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sp-text-tertiary);
}

.sp-bookmarks-search input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  font-size: 13px;
  color: var(--sp-text-primary);
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  border-radius: var(--sp-radius-md);
}

.sp-bookmarks-search input:focus {
  outline: none;
  border-color: var(--sp-accent);
}

.sp-bookmarks-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 12px;
}

.sp-tag-btn {
  padding: 4px 10px;
  font-size: 11px;
  color: var(--sp-text-secondary);
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sp-tag-btn:hover {
  border-color: var(--sp-border-hover);
}

.sp-tag-btn.active {
  background: var(--sp-accent-bg);
  border-color: var(--sp-accent);
  color: var(--sp-accent);
}

.sp-bookmarks-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px 16px;
}

.sp-bookmarks-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
}

.sp-bookmarks-empty .sp-empty-icon {
  color: var(--sp-text-tertiary);
  margin-bottom: 12px;
}

.sp-bookmarks-empty p {
  font-size: 14px;
  color: var(--sp-text-secondary);
  margin-bottom: 4px;
}

.sp-bookmarks-empty .sp-empty-hint {
  font-size: 12px;
  color: var(--sp-text-tertiary);
}

.sp-bookmark-item {
  display: flex;
  gap: 10px;
  padding: 12px;
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  border-radius: var(--sp-radius-md);
  margin-bottom: 8px;
  transition: all 0.15s ease;
}

.sp-bookmark-item:hover {
  border-color: var(--sp-border-hover);
}

.sp-bookmark-role {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sp-radius-sm);
  flex-shrink: 0;
}

.sp-bookmark-role.user {
  background: var(--sp-accent-bg);
  color: var(--sp-accent);
}

.sp-bookmark-role.assistant {
  background: var(--sp-success-light);
  color: var(--sp-success);
}

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

.sp-bookmark-text {
  font-size: 13px;
  color: var(--sp-text-primary);
  line-height: 1.5;
  margin-bottom: 6px;
  word-break: break-word;
}

.sp-bookmark-note {
  font-size: 12px;
  color: var(--sp-accent);
  background: var(--sp-accent-bg);
  padding: 4px 8px;
  border-radius: var(--sp-radius-sm);
  margin-bottom: 6px;
  cursor: pointer;
}

.sp-bookmark-note-edit {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}

.sp-bookmark-note-edit input {
  flex: 1;
  padding: 4px 8px;
  font-size: 12px;
  background: var(--sp-bg);
  border: 1px solid var(--sp-accent);
  border-radius: var(--sp-radius-sm);
  color: var(--sp-text-primary);
}

.sp-bookmark-note-edit button {
  padding: 4px 8px;
  background: var(--sp-accent);
  border: none;
  border-radius: var(--sp-radius-sm);
  color: white;
  cursor: pointer;
}

.sp-bookmark-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}

.sp-bookmark-tag {
  font-size: 10px;
  color: var(--sp-text-secondary);
  background: var(--sp-glass-bg);
  padding: 2px 6px;
  border-radius: 8px;
}

.sp-bookmark-meta {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: var(--sp-text-tertiary);
}

.sp-bookmark-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sp-bookmark-btn {
  padding: 6px;
  background: transparent;
  border: none;
  border-radius: var(--sp-radius-sm);
  color: var(--sp-text-tertiary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.sp-bookmark-btn:hover {
  background: var(--sp-glass-bg);
  color: var(--sp-text-primary);
}

.sp-bookmark-btn.copied {
  color: var(--sp-success);
}

.sp-bookmark-btn.sp-btn-danger:hover {
  background: var(--sp-error-light);
  color: var(--sp-error);
}

/* ============================================
   Phase 1: Ghost Notes
   ============================================ */
.sp-ghost-note-add {
  padding: 4px;
  background: transparent;
  border: none;
  color: var(--sp-text-tertiary);
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s ease;
}

.sp-message-item:hover .sp-ghost-note-add {
  opacity: 1;
}

.sp-ghost-note-add:hover {
  color: var(--sp-accent);
}

.sp-ghost-note {
  position: relative;
}

.sp-ghost-note-indicator {
  position: relative;
  display: flex;
  align-items: center;
  padding: 4px;
  color: var(--sp-accent);
  cursor: pointer;
}

.sp-ghost-note-badge {
  font-size: 10px;
  position: absolute;
  top: -2px;
  right: -2px;
}

.sp-ghost-note-editor {
  padding: 8px;
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-accent);
  border-radius: var(--sp-radius-md);
  margin-top: 4px;
}

.sp-ghost-note-editor textarea {
  width: 100%;
  padding: 8px;
  font-size: 12px;
  color: var(--sp-text-primary);
  background: var(--sp-bg);
  border: 1px solid var(--sp-glass-border);
  border-radius: var(--sp-radius-sm);
  resize: vertical;
  min-height: 60px;
}

.sp-ghost-note-editor textarea:focus {
  outline: none;
  border-color: var(--sp-accent);
}

.sp-ghost-note-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.sp-ghost-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 11px;
  border-radius: var(--sp-radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.sp-ghost-btn.sp-btn-save {
  background: var(--sp-accent);
  border: none;
  color: white;
}

.sp-ghost-btn.sp-btn-cancel {
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  color: var(--sp-text-secondary);
}

.sp-ghost-btn.sp-btn-danger {
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  color: var(--sp-text-secondary);
}

.sp-ghost-btn.sp-btn-danger:hover {
  background: var(--sp-error-light);
  color: var(--sp-error);
  border-color: var(--sp-error);
}

.sp-ghost-note-content {
  padding: 8px;
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-accent);
  border-radius: var(--sp-radius-md);
  margin-top: 4px;
}

.sp-ghost-note-text {
  font-size: 12px;
  color: var(--sp-text-primary);
  line-height: 1.5;
  margin-bottom: 6px;
}

.sp-ghost-note-meta {
  font-size: 10px;
  color: var(--sp-text-tertiary);
  margin-bottom: 6px;
}

/* Ghost Notes List */
.sp-ghost-notes-list h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sp-text-primary);
  padding: 12px 16px;
  border-bottom: 1px solid var(--sp-glass-border);
}

.sp-ghost-notes-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  color: var(--sp-text-tertiary);
}

.sp-ghost-note-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--sp-glass-border);
}

/* ============================================
   Phase 1: Sticky Messages
   ============================================ */
.sp-sticky-header {
  background: linear-gradient(180deg, var(--sp-accent-bg), transparent);
  border-bottom: 1px solid var(--sp-accent);
  margin-bottom: 8px;
}

.sp-sticky-header.collapsed {
  background: var(--sp-glass-bg);
  border-bottom-color: var(--sp-glass-border);
}

.sp-sticky-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sp-accent);
  cursor: pointer;
  transition: all 0.15s ease;
}

.sp-sticky-header-title:hover {
  background: rgba(0, 0, 0, 0.05);
}

.sp-sticky-header-title span {
  flex: 1;
}

.sp-sticky-messages {
  padding: 0 12px 12px;
}

.sp-sticky-message {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px;
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  border-radius: var(--sp-radius-md);
  margin-bottom: 6px;
}

.sp-sticky-role {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sp-radius-sm);
  flex-shrink: 0;
}

.sp-sticky-role.user {
  background: var(--sp-accent-bg);
  color: var(--sp-accent);
}

.sp-sticky-role.assistant {
  background: var(--sp-success-light);
  color: var(--sp-success);
}

.sp-sticky-content {
  flex: 1;
  font-size: 12px;
  color: var(--sp-text-secondary);
  line-height: 1.4;
  cursor: pointer;
  word-break: break-word;
}

.sp-sticky-content:hover {
  color: var(--sp-text-primary);
}

.sp-sticky-actions {
  display: flex;
  gap: 2px;
}

.sp-sticky-btn {
  padding: 4px;
  background: transparent;
  border: none;
  border-radius: var(--sp-radius-sm);
  color: var(--sp-text-tertiary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.sp-sticky-btn:hover {
  background: var(--sp-glass-bg);
  color: var(--sp-text-primary);
}

.sp-sticky-btn.copied {
  color: var(--sp-success);
}

.sp-sticky-btn.sp-btn-unpin:hover {
  color: #ef4444;
}

/* Pin Button on Messages */
.sp-pin-btn {
  padding: 4px;
  background: transparent;
  border: none;
  color: var(--sp-text-tertiary);
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s ease;
}

.sp-message-item:hover .sp-pin-btn {
  opacity: 1;
}

.sp-pin-btn:hover {
  color: var(--sp-accent);
}

.sp-pin-btn.pinned {
  opacity: 1;
  color: var(--sp-accent);
}

/* ============================================
   Phase 1: Dyslexia Font
   ============================================ */
@font-face {
  font-family: 'OpenDyslexic';
  src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.sp-dyslexia-font,
.sp-dyslexia-font * {
  font-family: 'OpenDyslexic', sans-serif !important;
  letter-spacing: 0.05em;
  word-spacing: 0.1em;
}

/* ============================================
   Phase 3: Glossary Section
   ============================================ */
.nn-glossary-section {
  margin-top: 16px;
  border-top: 1px solid var(--sp-border);
  padding-top: 12px;
}

.nn-glossary-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: var(--sp-bg-secondary);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--sp-text-primary);
  cursor: pointer;
  transition: all var(--sp-transition);
}

.nn-glossary-toggle:hover {
  background: var(--sp-bg-tertiary);
  border-color: var(--sp-accent);
}

.nn-glossary-toggle svg:first-child {
  color: var(--sp-accent);
}

.nn-glossary-content {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nn-glossary-toolbar {
  display: flex;
  gap: 8px;
}

.nn-glossary-toolbar .nn-input {
  flex: 1;
}

.nn-glossary-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--sp-bg-secondary);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
}

.nn-glossary-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.nn-glossary-item {
  padding: 10px 12px;
  background: var(--sp-bg-secondary);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
  transition: all var(--sp-transition);
}

.nn-glossary-item:hover {
  border-color: var(--sp-accent-light);
}

.nn-glossary-term {
  font-size: 13px;
  font-weight: 600;
  color: var(--sp-accent);
  margin-bottom: 4px;
}

.nn-glossary-definition {
  font-size: 12px;
  color: var(--sp-text-secondary);
  line-height: 1.5;
}

.nn-glossary-actions {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  justify-content: flex-end;
}

.nn-glossary-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  border-radius: var(--sp-radius-sm);
  color: var(--sp-text-tertiary);
  cursor: pointer;
  transition: all var(--sp-transition);
}

.nn-glossary-actions button:hover {
  background: var(--sp-bg-tertiary);
  color: var(--sp-text-primary);
}

.nn-glossary-edit {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.nn-empty-sm {
  padding: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--sp-text-tertiary);
}

.nn-btn-sm {
  padding: 6px 10px;
  font-size: 11px;
}

.nn-input-sm {
  padding: 6px 10px;
  font-size: 12px;
}

.nn-textarea-sm {
  padding: 6px 10px;
  font-size: 12px;
  resize: vertical;
  min-height: 40px;
}

/* ============================================
   Memory Panel Styling - Dark Glassmorphism
   ============================================ */
.nn-panel.nn-memory-panel {
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-glass-border);
  border-radius: var(--sp-radius-lg);
  padding: 16px;
}

.nn-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--sp-border);
  font-size: 14px;
  font-weight: 600;
  color: var(--sp-text-primary);
}

.nn-panel-header svg {
  color: var(--sp-accent);
  opacity: 0.85;
}

.nn-search-bar {
  margin-bottom: 14px;
}

.nn-search-bar .nn-input {
  width: 100%;
  background: var(--sp-bg-tertiary);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
  color: var(--sp-text-primary);
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
}

.nn-search-bar .nn-input::placeholder {
  color: var(--sp-text-tertiary);
}

.nn-search-bar .nn-input:focus {
  border-color: var(--sp-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

.nn-memory-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
  margin-bottom: 16px;
}

.nn-memory-form .nn-textarea {
  width: 100%;
  background: var(--sp-bg-tertiary);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
  color: var(--sp-text-primary);
  padding: 12px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  min-height: 80px;
}

.nn-memory-form .nn-textarea::placeholder {
  color: var(--sp-text-tertiary);
}

.nn-memory-form .nn-textarea:focus {
  border-color: var(--sp-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

.nn-memory-form .nn-input-row {
  display: flex;
  gap: 10px;
}

.nn-memory-form .nn-input {
  flex: 1;
  background: var(--sp-bg-tertiary);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
  color: var(--sp-text-primary);
  padding: 10px 12px;
  font-size: 12px;
  font-family: inherit;
}

.nn-memory-form .nn-input::placeholder {
  color: var(--sp-text-tertiary);
}

.nn-memory-form .nn-select {
  background: var(--sp-bg-tertiary);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
  color: var(--sp-text-primary);
  padding: 10px 12px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}

.nn-memory-form .nn-select option {
  background: var(--sp-bg-secondary);
  color: var(--sp-text-primary);
}

.nn-memory-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 6px;
  padding-top: 4px;
  /* Extra space for hover lift effect */
  margin-right: -6px;
}

/* Custom Scrollbar for Memory List */
.nn-memory-list::-webkit-scrollbar {
  width: 6px;
}

.nn-memory-list::-webkit-scrollbar-track {
  background: transparent;
}

.nn-memory-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.nn-memory-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.18);
}

.nn-memory-item {
  background: #ffffff;
  border: 1px solid var(--sp-glass-border);
  border-radius: 16px;
  padding: 14px;
  transition: all 0.2s ease;
  box-shadow: var(--sp-card-shadow);
}

:root[data-theme='dark'] .nn-memory-item {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
}

.nn-memory-item:hover {
  border-color: var(--sp-accent);
  transform: translateY(-2px);
  box-shadow: 0 18px 35px rgba(90, 65, 160, 0.25);
}

.nn-memory-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.nn-memory-category {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(96, 165, 250, 0.15);
  color: var(--sp-accent);
}

.nn-memory-chat {
  font-size: 11px;
  color: var(--sp-text-secondary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 3px 10px;
  border-radius: 10px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
}

.nn-memory-date {
  font-size: 11px;
  color: var(--sp-text-tertiary);
  margin-left: auto;
}

.nn-memory-content {
  font-size: 13px;
  color: var(--sp-text-primary);
  line-height: 1.6;
  margin-bottom: 10px;
  word-break: break-word;
}

.nn-memory-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.nn-tag-sm {
  font-size: 10px;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--sp-text-secondary);
  border-radius: 6px;
}

.nn-memory-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.nn-memory-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--sp-radius-sm);
  color: var(--sp-text-tertiary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.nn-memory-actions button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--sp-text-primary);
}

.nn-empty {
  padding: 40px 24px;
  text-align: center;
  font-size: 13px;
  color: var(--sp-text-tertiary);
}

.nn-empty-state {
  padding: 40px 24px;
  text-align: center;
  font-size: 13px;
  color: var(--sp-text-tertiary);
}

.nn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--sp-radius-md);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--sp-text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.nn-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
}

.nn-btn-primary {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

.nn-btn-primary:hover {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

.nn-btn-primary svg {
  color: #ffffff;
}

/* ============================================
   Keyboard Shortcuts Modal (WCAG 2.1.1)
   ============================================ */
.keyboard-shortcuts-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

.keyboard-shortcuts-modal {
  background: var(--sp-bg-secondary);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-xl);
  width: 100%;
  max-width: 420px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.keyboard-shortcuts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--sp-border);
}

.keyboard-shortcuts-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--sp-text-primary);
}

.keyboard-shortcuts-title svg {
  color: var(--sp-accent);
}

.keyboard-shortcuts-close {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--sp-text-tertiary);
  border-radius: var(--sp-radius-sm);
  transition: all var(--sp-transition);
}

.keyboard-shortcuts-close:hover {
  background: var(--sp-bg-hover);
  color: var(--sp-text-primary);
}

.keyboard-shortcuts-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
}

.shortcuts-group {
  margin-bottom: 20px;
}

.shortcuts-group:last-child {
  margin-bottom: 0;
}

.shortcuts-group-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sp-text-tertiary);
  margin-bottom: 10px;
}

.shortcuts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.shortcut-keys {
  display: flex;
  align-items: center;
  gap: 4px;
}

.shortcut-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 26px;
  padding: 0 8px;
  background: var(--sp-bg-tertiary);
  border: 1px solid var(--sp-border);
  border-radius: 6px;
  font-family: 'SF Mono', Monaco, 'Consolas', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--sp-text-primary);
  box-shadow: 0 2px 0 var(--sp-border);
}

.shortcut-plus {
  font-size: 11px;
  color: var(--sp-text-tertiary);
}

.shortcut-description {
  font-size: 13px;
  color: var(--sp-text-secondary);
}

.keyboard-shortcuts-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--sp-border);
  text-align: center;
}

.shortcuts-hint {
  font-size: 12px;
  color: var(--sp-text-tertiary);
  margin: 0;
}

.shortcuts-hint kbd {
  background: var(--sp-bg-tertiary);
  border: 1px solid var(--sp-border);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: 'SF Mono', Monaco, 'Consolas', monospace;
  font-size: 11px;
}

/* ============================================
   Confirm Dialog (WCAG 3.3.4 Error Prevention)
   ============================================ */
.confirm-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  padding: 20px;
}

.confirm-dialog {
  background: var(--sp-bg-secondary);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-xl);
  width: 100%;
  max-width: 360px;
  padding: 24px;
  text-align: center;
  position: relative;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.confirm-dialog-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--sp-text-tertiary);
  border-radius: var(--sp-radius-sm);
  transition: all var(--sp-transition);
}

.confirm-dialog-close:hover {
  background: var(--sp-bg-hover);
  color: var(--sp-text-primary);
}

.confirm-dialog-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.confirm-dialog-danger .confirm-dialog-icon {
  background: var(--sp-error-light);
  color: var(--sp-error);
}

.confirm-dialog-warning .confirm-dialog-icon {
  background: var(--sp-warning-light);
  color: var(--sp-warning);
}

.confirm-dialog-info .confirm-dialog-icon {
  background: var(--sp-accent-light);
  color: var(--sp-accent);
}

.confirm-dialog-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--sp-text-primary);
  margin: 0 0 8px;
}

.confirm-dialog-message {
  font-size: 14px;
  color: var(--sp-text-secondary);
  margin: 0 0 24px;
  line-height: 1.5;
}

.confirm-dialog-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.confirm-dialog-btn {
  flex: 1;
  padding: 10px 16px;
  border-radius: var(--sp-radius-md);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--sp-transition);
}

.confirm-dialog-btn-secondary {
  background: var(--sp-bg-tertiary);
  border: 1px solid var(--sp-border);
  color: var(--sp-text-primary);
}

.confirm-dialog-btn-secondary:hover {
  background: var(--sp-bg-hover);
}

.confirm-dialog-btn-danger {
  background: var(--sp-error);
  border: none;
  color: #ffffff;
}

.confirm-dialog-btn-danger:hover {
  background: #dc2626;
}

.confirm-dialog-btn-warning {
  background: var(--sp-warning);
  border: none;
  color: #000000;
}

.confirm-dialog-btn-warning:hover {
  background: #d97706;
}

.confirm-dialog-btn-info {
  background: var(--sp-accent);
  border: none;
  color: #ffffff;
}

.confirm-dialog-btn-info:hover {
  background: var(--sp-accent-hover);
}

/* ============================================
   Draft Board / Web Clipper Styles
   ============================================ */

.draft-board {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 12px;
}

.draft-board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-lg);
}

.draft-board-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--sp-text-primary);
}

.draft-board-count {
  font-size: 11px;
  font-weight: 500;
  color: var(--sp-text-secondary);
  background: var(--sp-bg-tertiary);
  padding: 2px 8px;
  border-radius: 999px;
}

.draft-board-limit-warning {
  font-size: 10px;
  font-weight: 600;
  color: var(--sp-warning);
  background: rgba(245, 158, 11, 0.15);
  padding: 2px 8px;
  border-radius: 999px;
}

.draft-board-clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--sp-radius-md);
  color: var(--sp-text-tertiary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.draft-board-clear-btn:hover:not(:disabled) {
  background: var(--sp-error);
  color: white;
  border-color: var(--sp-error);
}

.draft-board-clear-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Clips List */
.draft-board-clips {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.draft-board-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  color: var(--sp-text-tertiary);
  font-size: 13px;
}

/* Clip Card */
.clip-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-lg);
  transition: all 0.2s ease;
}

.clip-card:hover {
  border-color: var(--sp-accent);
  background: var(--sp-glass-bg-strong);
}

.clip-card-grip {
  flex-shrink: 0;
  color: var(--sp-text-tertiary);
  cursor: grab;
  padding: 4px 0;
}

.clip-card-grip:active {
  cursor: grabbing;
}

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

.clip-card-text {
  font-size: 13px;
  color: var(--sp-text-primary);
  line-height: 1.5;
  word-break: break-word;
  margin-bottom: 6px;
}

.clip-card-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--sp-text-tertiary);
}

.clip-card-source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clip-card-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
  align-items: center;
}

.clip-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--sp-text-tertiary);
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.clip-action-btn svg {
  width: 12px;
  height: 12px;
}

.clip-action-btn:hover {
  background: var(--sp-bg-hover);
  color: var(--sp-text-primary);
}

.clip-action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.clip-action-btn.clip-action-delete:hover {
  background: rgba(239, 68, 68, 0.15);
  color: var(--sp-error);
}

.clip-action-btn.clip-action-send:hover {
  background: rgba(99, 102, 241, 0.15);
  color: var(--sp-accent);
}

/* Per-clip send dropdown */
.clip-send-wrapper {
  position: relative;
}

.clip-send-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 100px;
  background: var(--sp-bg-secondary);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
  box-shadow: var(--sp-shadow-lg);
  overflow: hidden;
  z-index: 100;
}

.clip-send-option {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--sp-text-primary);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.clip-send-option:hover {
  background: var(--sp-bg-hover);
}

.clip-send-option:not(:last-child) {
  border-bottom: 1px solid var(--sp-border);
}

/* Preview Section */
.draft-board-preview-section {
  display: flex;
  flex-direction: column;
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-lg);
  overflow: hidden;
}

.draft-board-preview-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--sp-text-secondary);
  cursor: pointer;
  transition: background 0.2s ease;
}

.draft-board-preview-toggle:hover {
  background: var(--sp-bg-hover);
}

.draft-board-preview {
  max-height: 200px;
  overflow-y: auto;
  padding: 12px;
  border-top: 1px solid var(--sp-border);
  background: var(--sp-bg-tertiary);
}

.draft-board-preview pre {
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 11px;
  color: var(--sp-text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  line-height: 1.6;
}

/* Actions Bar */
.draft-board-actions {
  display: flex;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--sp-border);
}

.draft-board-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  padding: 10px 16px;
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--sp-text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.draft-board-action-btn:hover:not(:disabled) {
  background: var(--sp-bg-hover);
  border-color: var(--sp-accent);
}

.draft-board-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.draft-board-action-btn.draft-board-action-primary {
  background: var(--sp-accent);
  border-color: var(--sp-accent);
  color: white;
}

.draft-board-action-btn.draft-board-action-primary:hover:not(:disabled) {
  background: var(--sp-accent-hover);
}

/* Send Menu Dropdown */
.draft-board-send-wrapper {
  position: relative;
  flex: 1;
}

.draft-board-send-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: 4px;
  background: var(--sp-bg-secondary);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
  box-shadow: var(--sp-shadow-lg);
  overflow: hidden;
  z-index: 100;
}

.draft-board-send-option {
  display: block;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--sp-text-primary);
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
}

.draft-board-send-option:hover {
  background: var(--sp-bg-hover);
}

.draft-board-send-option:not(:last-child) {
  border-bottom: 1px solid var(--sp-border);
}

/* Empty State */
.draft-board-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 32px;
  text-align: center;
}

.draft-board-empty-icon {
  color: var(--sp-text-tertiary);
  opacity: 0.5;
  margin-bottom: 16px;
}

.draft-board-empty h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--sp-text-primary);
  margin-bottom: 8px;
}

.draft-board-empty p {
  font-size: 13px;
  color: var(--sp-text-secondary);
  line-height: 1.6;
  margin-bottom: 12px;
}

.draft-board-shortcut {
  font-size: 12px;
  color: var(--sp-text-tertiary);
}

.draft-board-shortcut kbd {
  display: inline-block;
  padding: 2px 6px;
  background: var(--sp-bg-tertiary);
  border: 1px solid var(--sp-border);
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
}

/* Edit Modal */
.draft-board-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}

.draft-board-modal {
  width: 100%;
  max-width: 400px;
  background: var(--sp-bg-secondary);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-xl);
  box-shadow: var(--sp-shadow-xl);
  overflow: hidden;
}

.draft-board-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--sp-border);
}

.draft-board-modal-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--sp-text-primary);
}

.draft-board-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: var(--sp-radius-sm);
  color: var(--sp-text-tertiary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.draft-board-modal-close:hover {
  background: var(--sp-bg-hover);
  color: var(--sp-text-primary);
}

.draft-board-modal-textarea {
  width: 100%;
  padding: 16px;
  background: var(--sp-bg-primary);
  border: none;
  border-bottom: 1px solid var(--sp-border);
  font-family: inherit;
  font-size: 13px;
  color: var(--sp-text-primary);
  line-height: 1.6;
  resize: vertical;
  min-height: 150px;
}

.draft-board-modal-textarea:focus {
  outline: none;
  background: var(--sp-glass-bg-strong);
}

.draft-board-modal-actions {
  display: flex;
  gap: 8px;
  padding: 16px;
}

.draft-board-modal-btn {
  flex: 1;
  padding: 10px 16px;
  border-radius: var(--sp-radius-md);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.draft-board-modal-cancel {
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-border);
  color: var(--sp-text-primary);
}

.draft-board-modal-cancel:hover {
  background: var(--sp-bg-hover);
}

.draft-board-modal-save {
  background: var(--sp-accent);
  border: none;
  color: white;
}

.draft-board-modal-save:hover {
  background: var(--sp-accent-hover);
}

/* View Modal Content */
.draft-board-modal-content {
  padding: 16px;
  max-height: 300px;
  overflow-y: auto;
}

.draft-board-modal-content p {
  font-size: 13px;
  color: var(--sp-text-primary);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0 0 12px 0;
}

.draft-board-modal-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--sp-text-tertiary);
  padding-top: 8px;
  border-top: 1px solid var(--sp-border);
}

.draft-board-modal-meta svg {
  flex-shrink: 0;
}

/* Clickable clip card */
.clip-card-clickable {
  cursor: pointer;
}

.clip-card-clickable:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ============================================
   Date Picker Modal
   ============================================ */
.date-picker-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 12px;
}

.date-picker-modal {
  width: 100%;
  max-width: min(320px, calc(100vw - 24px));
  background: var(--sp-bg-secondary);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-xl);
  box-shadow: var(--sp-shadow-xl);
  overflow: visible;
  animation: date-picker-in 0.2s ease-out;
}

@keyframes date-picker-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.date-picker-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--sp-border);
}

.date-picker-modal-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--sp-text-primary);
  margin: 0;
}

.date-picker-modal-close {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: var(--sp-radius-sm);
  color: var(--sp-text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.date-picker-modal-close:hover {
  background: var(--sp-bg-hover);
  color: var(--sp-text-primary);
}

.date-picker-modal-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.date-picker-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--sp-text-secondary);
}

.date-picker-input {
  width: 100%;
  min-height: 44px;
  padding: 12px 14px;
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-md);
  font-family: inherit;
  font-size: 15px;
  color: var(--sp-text-primary);
  color-scheme: dark;
  outline: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.date-picker-input:focus {
  border-color: var(--sp-accent);
  box-shadow: 0 0 0 3px var(--sp-accent-glow);
}

/* Style the date picker calendar popup */
.date-picker-input::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
  padding: 4px;
  margin-left: 8px;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.date-picker-input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

.date-picker-preview {
  padding: 12px 14px;
  background: var(--sp-glass-bg);
  border-radius: var(--sp-radius-md);
  border: 1px dashed var(--sp-border);
}

.date-picker-preview-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sp-text-tertiary);
  margin-bottom: 6px;
}

.date-picker-preview-text {
  font-size: 13px;
  color: var(--sp-text-primary);
  font-style: italic;
  line-height: 1.4;
  word-break: break-word;
}

.date-picker-modal-actions {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--sp-border);
}

.date-picker-btn {
  flex: 1;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: var(--sp-radius-md);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.date-picker-btn-cancel {
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-border);
  color: var(--sp-text-primary);
}

.date-picker-btn-cancel:hover {
  background: var(--sp-bg-hover);
}

.date-picker-btn-insert {
  background: var(--sp-accent);
  border: none;
  color: white;
}

.date-picker-btn-insert:hover {
  background: var(--sp-accent-hover);
}

.date-picker-btn-insert:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Calendar wrapper */
.date-picker-calendar-wrapper {
  display: flex;
  justify-content: center;
  margin: 4px 0;
}

/* React DatePicker Custom Dark Theme */
.NavVault-calendar.react-datepicker {
  font-family: inherit;
  background: var(--sp-bg-tertiary, #1a1a2e);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.NavVault-calendar .react-datepicker__header {
  background: var(--sp-bg-secondary, #16161a);
  border-bottom: 1px solid var(--sp-border);
  padding: 12px 8px 8px;
}

.NavVault-calendar .react-datepicker__current-month {
  color: var(--sp-text-primary);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

.NavVault-calendar .react-datepicker__day-names {
  display: flex;
  justify-content: space-around;
  margin-top: 4px;
}

.NavVault-calendar .react-datepicker__day-name {
  color: var(--sp-text-tertiary);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  width: 32px;
  line-height: 32px;
  margin: 0;
}

.NavVault-calendar .react-datepicker__month {
  margin: 8px;
}

.NavVault-calendar .react-datepicker__week {
  display: flex;
  justify-content: space-around;
}

.NavVault-calendar .react-datepicker__day {
  color: var(--sp-text-primary);
  font-size: 13px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  margin: 2px;
  border-radius: 8px;
  transition: all 0.15s ease;
  cursor: pointer;
}

.NavVault-calendar .react-datepicker__day:hover {
  background: var(--sp-accent-subtle, rgba(255, 123, 123, 0.2));
  color: var(--sp-accent);
  transform: scale(1.1);
}

.NavVault-calendar .react-datepicker__day--selected {
  background: var(--sp-accent) !important;
  color: white !important;
  font-weight: 600;
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(255, 123, 123, 0.4);
}

.NavVault-calendar .react-datepicker__day--keyboard-selected {
  background: var(--sp-accent-subtle, rgba(255, 123, 123, 0.3));
  color: var(--sp-accent);
}

.NavVault-calendar .react-datepicker__day--today {
  font-weight: 700;
  color: var(--sp-accent);
  border: 1px solid var(--sp-accent);
}

.NavVault-calendar .react-datepicker__day--disabled {
  color: var(--sp-text-tertiary);
  opacity: 0.4;
  cursor: not-allowed;
}

.NavVault-calendar .react-datepicker__day--disabled:hover {
  background: transparent;
  transform: none;
}

.NavVault-calendar .react-datepicker__day--outside-month {
  color: var(--sp-text-tertiary);
  opacity: 0.5;
}

/* Navigation arrows */
.NavVault-calendar .react-datepicker__navigation {
  top: 12px;
  width: 28px;
  height: 28px;
  border: none;
  background: var(--sp-glass-bg);
  border-radius: 6px;
  transition: all 0.15s ease;
}

.NavVault-calendar .react-datepicker__navigation:hover {
  background: var(--sp-bg-hover);
}

.NavVault-calendar .react-datepicker__navigation--previous {
  left: 8px;
}

.NavVault-calendar .react-datepicker__navigation--next {
  right: 8px;
}

.NavVault-calendar .react-datepicker__navigation-icon::before {
  border-color: var(--sp-text-secondary);
  border-width: 2px 2px 0 0;
  height: 8px;
  width: 8px;
  top: 8px;
}

.NavVault-calendar .react-datepicker__navigation:hover .react-datepicker__navigation-icon::before {
  border-color: var(--sp-text-primary);
}

/* Month/Year dropdowns */
.NavVault-calendar .react-datepicker__month-dropdown-container,
.NavVault-calendar .react-datepicker__year-dropdown-container {
  margin: 0 4px;
}

.NavVault-calendar .react-datepicker__month-select,
.NavVault-calendar .react-datepicker__year-select {
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-border);
  border-radius: 6px;
  color: var(--sp-text-primary);
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.NavVault-calendar .react-datepicker__month-select:hover,
.NavVault-calendar .react-datepicker__year-select:hover {
  border-color: var(--sp-accent);
}

.NavVault-calendar .react-datepicker__month-select:focus,
.NavVault-calendar .react-datepicker__year-select:focus {
  outline: none;
  border-color: var(--sp-accent);
  box-shadow: 0 0 0 2px var(--sp-accent-glow);
}

/* ============================================
   Transfer Loading State
   ============================================ */
.sp-transfer-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--sp-glass-bg);
  border: 1px solid var(--sp-accent);
  border-radius: 8px;
  color: var(--sp-accent);
  font-size: 12px;
  flex-grow: 1;
}

.sp-transfer-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--sp-accent-glow);
  border-top-color: var(--sp-accent);
  border-radius: 50%;
  animation: sp-spin 0.8s linear infinite;
}

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

.sp-transfer-status {
  color: var(--sp-text-primary);
  font-weight: 500;
}

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

/* ============================================
   Index Tab - Partial Load Banner
   ============================================ */
.sp-index-banner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.05));
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 10px;
}

.sp-index-banner-text {
  color: var(--sp-text-secondary);
  font-size: 13px;
  line-height: 1.4;
}

.sp-index-banner-text strong {
  color: var(--sp-text-primary);
  font-weight: 600;
}

.sp-btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

/* ============================================
   Attachment Labels
   ============================================ */
.sp-message-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.sp-attachment-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 12px;
  background: var(--sp-bg-secondary);
  color: var(--sp-text-secondary);
  border: 1px solid var(--sp-border);
}

.sp-attachment-label.image {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  border-color: rgba(59, 130, 246, 0.3);
}

.sp-attachment-label.video {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
  border-color: rgba(168, 85, 247, 0.3);
}

.sp-attachment-label.file {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.3);
}