/* ============================================================
   Timeline Editor - Full Width Layout
   Based on page-editor.css structure
   ============================================================ */

/* Full-width container */
.timeline-editor-fullwidth {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: transparent;
  margin: 0 calc(-50vw + 50%);
  width: 100vw;
}

/* Hide the fixed create button in timeline editor mode */
.timeline-editor-mode .btn-create-fixed {
  display: none !important;
}


/* ============================================================
   Top Metadata Bar (shared with page-editor)
   ============================================================ */

.editor-metadata-bar {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-md) var(--spacing-lg);
  background: transparent;
  border-top: 1px solid rgba(0, 168, 255, 0.2);
  border-bottom: 1px solid rgba(0, 168, 255, 0.2);
  flex-shrink: 0;
  gap: var(--spacing-md);
}

/* Metadata Rows */
.metadata-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  width: 100%;
}

.metadata-row-main {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.metadata-row-main .metadata-actions-group {
  align-self: center;
}

.metadata-row-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  overflow: visible;
  min-height: 40px;
}

/* Action buttons group - right aligned */
.metadata-actions-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-shrink: 0;
}

/* Auth-required buttons container */
.auth-required-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Topics section wrapper - left aligned */
.metadata-topics-section {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex: 1;
  min-width: 0;
  overflow: visible;
}

/* Pills row */
.metadata-row-pills {
  padding-top: 0;
  border-top: none;
}

.metadata-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex: 1;
}

.metadata-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.metadata-back:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

/* Title input - starts at ~25% width, grows with content */
.metadata-title-input {
  flex: 0 0 auto;
  width: auto;
  min-width: 120px;
  max-width: 40%;
  padding: var(--spacing-sm) var(--spacing-md);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

/* Description input - fills remaining space, shrinks when title grows */
.metadata-title-input.metadata-description-input {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
  flex: 1 1 200px;
  min-width: 150px;
  max-width: calc(100% - 400px);
}

.metadata-title-input:hover {
  border-color: var(--color-border-secondary);
}

.metadata-title-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-bg-secondary);
}

/* ============================================================
   Editor Action Buttons (unified style)
   ============================================================ */

.editor-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-xl);
  min-width: 120px;
  height: 40px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* White/Preview Button */
.editor-action-btn-white {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.editor-action-btn-white:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.editor-action-btn-white:active {
  transform: translateY(0);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.15);
}

/* Blue/Save Draft Button */
.editor-action-btn-blue {
  background: rgba(0, 168, 255, 0.25);
  border: 1px solid rgba(0, 168, 255, 0.5);
  color: #00a8ff;
  box-shadow: 0 0 12px rgba(0, 168, 255, 0.3);
}

.editor-action-btn-blue:hover {
  background: rgba(0, 168, 255, 0.35);
  border-color: rgba(0, 168, 255, 0.7);
  box-shadow: 0 0 20px rgba(0, 168, 255, 0.4);
  transform: translateY(-1px);
}

.editor-action-btn-blue:active {
  transform: translateY(0);
  box-shadow: 0 0 10px rgba(0, 168, 255, 0.3);
}

/* Green/Publish Button */
.editor-action-btn-green {
  background: rgba(16, 185, 129, 0.25);
  border: 1px solid rgba(16, 185, 129, 0.5);
  color: #10b981;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
}

.editor-action-btn-green:hover {
  background: rgba(16, 185, 129, 0.35);
  border-color: rgba(16, 185, 129, 0.7);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
  transform: translateY(-1px);
}

.editor-action-btn-green:active {
  transform: translateY(0);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

/* Icon-only Button Variant */
.editor-action-btn-icon {
  min-width: 40px;
  width: 40px;
  padding: var(--spacing-sm);
}

.editor-action-btn-icon svg {
  stroke: currentColor;
}

/* ============================================================
   Topics Selector in Metadata Bar
   ============================================================ */

.editor-metadata-bar .topics-selector-section {
  margin-top: 22px;
}

/* Selected Topic Pills */
.editor-metadata-bar .topic-selected-pills {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 100%;
  width: 100%;
  min-height: 32px;
}

.editor-metadata-bar .topic-selected-pills:empty {
  display: none;
}

/* Selected Topic Pill */
.editor-metadata-bar .topic-selected-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 8px;
  margin-top: 8px;
  margin-bottom: 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  font-size: 0.65rem;
  color: white;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.editor-metadata-bar .topic-selected-pill:hover {
  background: rgba(0, 168, 255, 0.2);
  border-color: rgba(0, 168, 255, 0.5);
  box-shadow: 0 0 12px rgba(0, 168, 255, 0.4);
}

.editor-metadata-bar .topic-selected-pill .topic-pill-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: none;
  border: none;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: var(--transition-fast);
  padding: 0;
  margin-top: 3px;
  margin-bottom: 5px;
}

.editor-metadata-bar .topic-selected-pill .topic-pill-remove:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

/* ============================================================
   Topic Selector Dropdown (Magnifying Glass Search)
   ============================================================ */

.editor-metadata-bar .topic-selector-search {
  position: relative;
  flex-shrink: 0;
  order: -1;
}

.editor-metadata-bar .topic-selector-search.active {
  z-index: 1001;
}

.editor-metadata-bar .topic-selector-search-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  height: 30px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: white;
  background: rgba(0, 168, 255, 0.25);
  border: 1px solid rgba(0, 168, 255, 0.5);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 12px rgba(0, 168, 255, 0.4);
}

.editor-metadata-bar .topic-selector-search-btn:hover {
  background: rgba(0, 168, 255, 0.35);
  border-color: rgba(0, 168, 255, 0.6);
  box-shadow: 0 0 16px rgba(0, 168, 255, 0.5);
}

.editor-metadata-bar .topic-selector-search-btn svg {
  width: 12px;
  height: 12px;
}

.editor-metadata-bar .topic-selector-search.active .topic-selector-search-btn {
  background: rgba(0, 168, 255, 0.4);
  border-color: rgba(0, 168, 255, 0.7);
  box-shadow: 0 0 20px rgba(0, 168, 255, 0.6);
}

.editor-metadata-bar .topic-selector-dropdown {
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 0;
  width: 280px;
  max-height: 350px;
  background: rgba(20, 30, 48, 0.99);
  border: 1px solid rgba(0, 168, 255, 0.3);
  border-radius: var(--radius-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  z-index: 9999;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  overflow: visible;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  isolation: isolate;
}

.editor-metadata-bar .topic-selector-search.active .topic-selector-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.editor-metadata-bar .topic-selector-input-wrapper {
  padding: 0.5rem;
  border-bottom: 1px solid rgba(0, 168, 255, 0.2);
  flex-shrink: 0;
}

.editor-metadata-bar .topic-selector-input {
  width: 100%;
  padding: 0.4rem 0.6rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  color: white;
  font-size: 0.8rem;
  outline: none;
  transition: all 0.2s ease;
}

.editor-metadata-bar .topic-selector-input:focus {
  border-color: rgba(0, 168, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
}

.editor-metadata-bar .topic-selector-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.editor-metadata-bar .topic-selector-results {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.25rem 0;
  max-height: 280px;
  min-height: 50px;
}

.editor-metadata-bar .topic-selector-results::-webkit-scrollbar {
  width: 6px;
}

.editor-metadata-bar .topic-selector-results::-webkit-scrollbar-track {
  background: transparent;
}

.editor-metadata-bar .topic-selector-results::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.editor-metadata-bar .topic-selector-results::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.editor-metadata-bar .topic-selector-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

.editor-metadata-bar .topic-selector-item:hover {
  background: rgba(0, 168, 255, 0.15);
  color: white;
}

.editor-metadata-bar .topic-selector-item.selected {
  background: rgba(0, 168, 255, 0.2);
  color: var(--color-primary);
}

.editor-metadata-bar .topic-selector-item-check {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.editor-metadata-bar .topic-selector-item.selected .topic-selector-item-check {
  opacity: 1;
}

.editor-metadata-bar .topic-selector-create {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  margin: 0.25rem 0.5rem;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
  color: #22c55e;
  font-size: 0.8rem;
  font-weight: var(--font-weight-medium);
}

.editor-metadata-bar .topic-selector-create:hover {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.5);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.2);
}

.editor-metadata-bar .topic-selector-empty {
  padding: 1rem;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-style: italic;
}

/* ============================================================
   Main Editor Area - Two Panel Layout
   ============================================================ */

.editor-main-area {
  display: block;
  position: relative;
  min-height: calc(100vh - 300px);
}

.editor-main-area.timeline-editor-layout {
  display: flex;
  flex-direction: row;
  gap: 0;
}

/* ============================================================
   Left Sidebar - Post Selector
   ============================================================ */

.timeline-post-sidebar {
  position: relative;
  width: 600px;
  min-width: 200px;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  /* Transparent background to match timeline area */
  background: transparent;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  height: calc(100vh - 140px);
  position: sticky;
  top: 0;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
}

/* Sidebar Resize Handle */
.sidebar-resize-handle {
  position: absolute;
  top: 0;
  right: -4px;
  width: 8px;
  height: 100%;
  cursor: ew-resize;
  z-index: 100;
  background: transparent;
  transition: background 0.2s ease;
}

.sidebar-resize-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.sidebar-resize-handle:hover::after,
.timeline-post-sidebar.resizing .sidebar-resize-handle::after {
  opacity: 1;
  background: rgba(0, 168, 255, 0.5);
}

.sidebar-resize-handle:hover,
.timeline-post-sidebar.resizing .sidebar-resize-handle {
  background: rgba(0, 168, 255, 0.1);
}

.timeline-post-sidebar.resizing {
  border-right-color: rgba(0, 168, 255, 0.5);
  user-select: none;
}

.timeline-post-sidebar.sidebar-highlight {
  border-right-color: rgba(0, 168, 255, 0.4);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3), inset -2px 0 30px rgba(0, 168, 255, 0.1);
}

/* Sidebar Tabs */
.sidebar-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.sidebar-tab {
  flex: 1;
  padding: 0.5rem 0.25rem;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.sidebar-tab:hover {
  color: var(--color-text-secondary);
  background: rgba(255, 255, 255, 0.03);
}

.sidebar-tab:focus {
  outline: none;
}

.sidebar-tab.active {
  color: var(--color-primary);
  border-bottom-color: transparent;
  outline: none;
}

/* Library Tab Content */
.sidebar-library-content {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.sidebar-library-content.active {
  display: flex;
}

/* Library List */
.sidebar-library-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

/* Library Item - matches sidebar-post-item */
.sidebar-library-item {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  margin-bottom: 0.5rem;
  cursor: grab;
  transition: all 0.15s ease;
}

.sidebar-library-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}

.sidebar-library-item.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.sidebar-library-item.loading {
  opacity: 0.6;
  pointer-events: none;
}

.sidebar-library-item-thumb {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-library-item-thumb img,
.sidebar-library-item-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-library-item-thumb svg {
  color: rgba(255, 255, 255, 0.3);
}

.sidebar-library-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sidebar-library-item-title {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.sidebar-library-item-meta {
  margin-top: 2px;
}

.sidebar-library-item-type {
  font-size: 0.625rem;
  text-transform: uppercase;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}

.sidebar-library-item-type.twitter { background: rgba(29, 161, 242, 0.2); color: #1da1f2; }
.sidebar-library-item-type.youtube { background: rgba(255, 0, 0, 0.2); color: #ff4444; }
.sidebar-library-item-type.tiktok { background: rgba(0, 242, 234, 0.2); color: #00f2ea; }
.sidebar-library-item-type.instagram { background: rgba(228, 64, 95, 0.2); color: #e4405f; }
.sidebar-library-item-type.uploaded_media { background: rgba(0, 168, 255, 0.2); color: #00a8ff; }

/* Library Empty State */
.sidebar-library-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 2rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  gap: 0.75rem;
}

.sidebar-library-empty svg {
  color: rgba(255, 255, 255, 0.3);
}

.sidebar-library-empty span {
  font-size: 0.8rem;
}

.sidebar-library-upload-link {
  font-size: 0.75rem;
  color: var(--color-primary, #00a8ff);
  text-decoration: none;
}

.sidebar-library-upload-link:hover {
  text-decoration: underline;
}

/* Library Loading */
.sidebar-library-loading {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 2rem;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
}

/* Login Prompt for unauthenticated users */
.sidebar-login-prompt {
  display: none;
  flex: 1;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  padding: 2rem;
  text-align: center;
}

.sidebar-login-prompt.active {
  display: flex;
}

/* Sidebar Filter Bar - Uses discovery-bar.css styling */
.sidebar-filter-bar {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

/* Sidebar Discovery Bar - Matches main discovery bar */
.sidebar-discovery-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md, 8px);
  min-width: 0;
  overflow: hidden;
}

/* Override discovery-links-wrapper for sidebar */
.sidebar-discovery-bar .discovery-links-wrapper {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.sidebar-discovery-bar .discovery-links {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0;
  flex-wrap: nowrap;
}

.sidebar-discovery-bar .discovery-links::-webkit-scrollbar {
  display: none;
}

/* Use the standard discovery-link styling from discovery-bar.css */
.sidebar-discovery-bar .discovery-link {
  font-size: 0.6rem;
  padding: 0.1rem 0.35rem;
}

/* Search pill in sidebar */
.sidebar-discovery-bar .discovery-search-pill {
  flex-shrink: 0;
  margin-left: 0.25rem;
}

.sidebar-discovery-bar .discovery-search-pill .discovery-search-input {
  width: 0;
  opacity: 0;
  transition: width 0.2s ease, opacity 0.2s ease;
}

.sidebar-discovery-bar .discovery-search-pill.expanded .discovery-search-input {
  width: 70px;
  opacity: 1;
  margin-left: 0.25rem;
}

/* Post Search Bar - Matches nav-search-input styling */
.sidebar-post-search {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 0.75rem 0.5rem;
}

.sidebar-post-search svg {
  position: absolute;
  left: 0.5rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  pointer-events: none;
}

.sidebar-post-search-input {
  width: 100%;
  height: 28px !important;
  padding: 0 0.5rem 0 1.75rem !important;
  font-size: 0.75rem;
  line-height: 1 !important;
  color: var(--color-text-primary);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box !important;
  margin: 0 !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.sidebar-post-search-input::placeholder {
  color: var(--color-text-muted);
}

.sidebar-post-search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 12px rgba(0, 168, 255, 0.2);
}

/* Active Filters - Matches discovery-bar.css active-filters-row styling */
.sidebar-active-filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.sidebar-active-filters-label {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--color-text-muted, #666);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.sidebar-active-filters-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  flex: 1;
}

.sidebar-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.4rem;
  font-size: 0.65rem;
  font-weight: 500;
  background: rgba(0, 168, 255, 0.15);
  border: 1px solid rgba(0, 168, 255, 0.3);
  border-radius: var(--radius-sm, 4px);
  color: white;
}

.sidebar-filter-pill-remove {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
  transition: color 0.2s ease;
}

.sidebar-filter-pill-remove:hover {
  color: white;
}

.sidebar-clear-filters-btn {
  font-size: 0.6rem;
  color: var(--color-text-muted, #666);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.15rem 0.3rem;
  transition: color 0.2s ease;
  flex-shrink: 0;
}

.sidebar-clear-filters-btn:hover {
  color: white;
}

/* Post List */
.sidebar-post-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-sm);
}

/* Hide sidebar elements when .sidebar-hidden class is applied (overrides all !important rules) */
.sidebar-hidden {
  display: none !important;
}

.sidebar-loading,
.sidebar-empty,
.sidebar-login-message {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Login message takes full space in the post list area */
.sidebar-login-message {
  width: 100%;
  height: 100%;
  min-height: 150px;
}

/* Post Item in Sidebar */
.sidebar-post-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-radius: var(--radius-md);
  cursor: grab;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
  margin-bottom: var(--spacing-xs);
}

.sidebar-post-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.sidebar-post-item.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.sidebar-post-item.loading {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}

.sidebar-post-item.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: rgba(0, 168, 255, 0.6);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.sidebar-post-item-thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.sidebar-post-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-post-item-thumb svg {
  color: var(--color-text-muted);
}

.sidebar-post-item-info {
  flex: 1;
  min-width: 0;
}

.sidebar-post-item-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.sidebar-post-item-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: 10px;
  color: var(--color-text-muted);
}

.sidebar-post-item-type {
  text-transform: capitalize;
  padding: 1px 6px;
  background: rgba(255, 255, 255, 0.08);
}

/* ============================================================
   Sidebar Featured Embed (for page/collection/timeline)
   Uses same container structure as tweet embeds for consistent grid sizing
   ============================================================ */

/* Featured embed - fills the .sidebar-post-content-embed container */
.sidebar-featured-embed {
  position: relative;
  width: 100%;
  height: 100%;
  display: block !important;
  align-items: unset !important;
  justify-content: unset !important;
}

/* Background image */
.sidebar-featured-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: #1a1a2e;
}

/* Gradient overlay */
.sidebar-featured-gradient {
  position: absolute;
  inset: -2px;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
}

/* Type pill (top left) */
.sidebar-featured-type {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 5px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  border-radius: 3px;
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  z-index: 5;
}

.sidebar-featured-type svg {
  width: 9px;
  height: 9px;
}

/* Bottom content area */
.sidebar-featured-bottom {
  position: absolute;
  bottom: 6px;
  left: 6px;
  right: 6px;
  z-index: 5;
}

.sidebar-featured-title {
  font-size: 13px;
  font-weight: 600;
  color: white;
  line-height: 1.25;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.sidebar-featured-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.3;
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Author (bottom right) */
.sidebar-featured-author {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 5;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
}

.sidebar-featured-author img {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  max-width: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  object-fit: cover;
}

.sidebar-featured-author span {
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   Content Preview Mode (Explore-page style grid)
   ============================================================ */

/* Post list in content preview mode - fixed 2-column grid like explore page */
.sidebar-post-list.content-preview-mode {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 4px !important;
  padding: 4px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* Reset flex properties from base .sidebar-post-list */
  flex: unset !important;
  flex-direction: unset !important;
  flex-wrap: unset !important;
  align-items: unset !important;
  /* Ensure grid alignment - start so rows don't stretch */
  align-content: start !important;
}

/* Content preview item - completely override all base .sidebar-post-item styles
   Using .sidebar-post-item.sidebar-post-item-content to ensure higher specificity
   than the base .sidebar-post-item rule which sets margin-bottom */
.sidebar-post-list.content-preview-mode > .sidebar-post-item.sidebar-post-item-content {
  /* Use padding-bottom trick for reliable square aspect ratio in grid */
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 0 !important;
  padding-bottom: 100% !important; /* Creates 1:1 aspect ratio */

  /* Reset ALL flex-related properties from .sidebar-post-item */
  flex: unset !important;
  flex-direction: unset !important;
  flex-grow: unset !important;
  flex-shrink: unset !important;
  flex-basis: unset !important;
  align-items: unset !important;
  justify-content: unset !important;
  align-self: unset !important;

  /* Reset spacing */
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  gap: unset !important;

  /* Visual styling */
  background: var(--color-bg-card, #1a1a2e) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-sm, 4px) !important;
  box-sizing: border-box !important;
}

.sidebar-post-list.content-preview-mode > .sidebar-post-item.sidebar-post-item-content:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
  z-index: 10 !important;
}

/* Instagram posts need taller containers to show full embed */
.sidebar-post-list.content-preview-mode > .sidebar-post-item.sidebar-post-item-content[data-platform="instagram"] {
  padding-bottom: 170% !important; /* Taller aspect ratio for Instagram */
}

/* Embed container fills entire card */
.sidebar-post-list.content-preview-mode > .sidebar-post-item.sidebar-post-item-content > .sidebar-post-content-embed {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.1) !important;
  overflow: hidden !important;
}

.sidebar-post-content-embed .embed-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Thumbnail image fills card */
.sidebar-content-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder for posts without thumbnails */
.sidebar-content-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  text-align: center;
  background: linear-gradient(135deg,
    rgba(var(--color-bg-card-rgb, 26, 26, 46), 0.98) 0%,
    rgba(var(--color-bg-base-rgb, 15, 15, 30), 0.95) 100%);
}

.sidebar-content-type {
  font-size: 0.55rem;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 2px 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.sidebar-content-title {
  font-size: 0.6rem;
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
}

.sidebar-content-error {
  font-size: 0.55rem;
  color: var(--color-text-muted);
  padding: 8px;
}

/* YouTube preview - thumbnail with play button */
.sidebar-youtube-embed {
  position: relative;
  width: 100%;
  height: 100%;
}

.sidebar-youtube-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-youtube-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.sidebar-youtube-play svg {
  width: 14px;
  height: 14px;
}

/* Twitter/X preview */
.sidebar-twitter-embed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  background: linear-gradient(135deg, rgba(29, 161, 242, 0.15), rgba(0, 0, 0, 0.4));
  width: 100%;
  height: 100%;
}

.sidebar-twitter-icon {
  color: #1da1f2;
}

.sidebar-twitter-icon svg {
  width: 20px;
  height: 20px;
}

.sidebar-twitter-author {
  font-size: 0.55rem;
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Instagram embed container */
.sidebar-instagram-embed {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 4px;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  pointer-events: none; /* Allow clicks to pass through to parent sidebar item */
}

.sidebar-instagram-embed .instagram-media {
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  width: 326px !important;
  pointer-events: none !important;
}

.sidebar-instagram-embed iframe {
  border: none !important;
  margin: 0 !important;
  pointer-events: none !important;
}

.sidebar-instagram-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
  z-index: 1;
}

.sidebar-instagram-spinner {
  width: 32px;
  height: 32px;
  color: #fff;
  animation: instagram-pulse 1.5s ease-in-out infinite;
}

@keyframes instagram-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1); }
}

/* Instagram card fallback - branded design for when embed fails */
.sidebar-instagram-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 8%;
  background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
  overflow: hidden;
  border-radius: 4px;
  container-type: inline-size;
  container-name: instagram-card;
}

.sidebar-instagram-card-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sidebar-instagram-card-icon {
  width: 40%;
  height: auto;
  color: #fff;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.sidebar-instagram-card-type {
  font-size: 0.65rem;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Container query based scaling for Instagram cards */
@container instagram-card (min-width: 50px) {
  .sidebar-instagram-card-icon {
    width: 35%;
  }
  .sidebar-instagram-card-type {
    font-size: 7cqw;
  }
  .sidebar-instagram-card-center {
    gap: 5%;
  }
}

/* TikTok preview */
.sidebar-tiktok-embed {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #000000, #25f4ee, #fe2c55);
  color: white;
}

.sidebar-tiktok-embed svg {
  width: 28px;
  height: 28px;
}

/* YouTube responsive iframe wrapper (actual embed) */
.sidebar-youtube-responsive {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.sidebar-youtube-responsive .sidebar-youtube-thumb-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.sidebar-youtube-responsive iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  z-index: 1;
}

/* YouTube preview (thumbnail + play button, no iframe for draggability) */
.sidebar-youtube-preview {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
}

.sidebar-youtube-preview .sidebar-youtube-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-youtube-preview .sidebar-youtube-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.sidebar-youtube-preview .sidebar-youtube-play-overlay svg {
  opacity: 0.9;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* Video embed (uploaded media) */
.sidebar-video-embed {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Pseudo-tweet card for grid cells */
.sidebar-tweet-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: linear-gradient(135deg, #15202b 0%, #1a1a2e 100%);
  overflow: hidden;
  border-radius: 4px;
}

.sidebar-tweet-card-header {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
  position: relative;
}

.sidebar-tweet-card-avatar {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #38444d;
}

.sidebar-tweet-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.sidebar-tweet-card-avatar .avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.45rem;
  font-weight: 600;
  color: #fff;
  background: #1da1f2;
}

.sidebar-tweet-card-author {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  gap: 0;
}

.sidebar-tweet-card-name {
  font-size: 0.5rem;
  font-weight: 600;
  color: #e7e9ea;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.sidebar-tweet-card-handle {
  font-size: 0.45rem;
  color: #8899a6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.sidebar-tweet-card-logo {
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  color: #e7e9ea;
  flex-shrink: 0;
}

.sidebar-tweet-card-text {
  font-size: 0.5rem;
  line-height: 1.25;
  color: #e7e9ea;
  overflow: hidden;
  flex: 1;
}

/* Responsive tweet card scaling based on card size */
/* Make card a container for container queries */
.sidebar-post-item-content {
  container-type: size;
  container-name: tweet-card;
}

/* Container query based scaling for tweet cards */
@container tweet-card (min-width: 50px) {
  .sidebar-tweet-card {
    padding: 5%;
  }
  .sidebar-tweet-card-avatar {
    width: 15%;
    height: auto;
    aspect-ratio: 1;
  }
  .sidebar-tweet-card-avatar .avatar-fallback {
    font-size: 4cqw;
  }
  .sidebar-tweet-card-name {
    font-size: 5.5cqw;
  }
  .sidebar-tweet-card-handle {
    font-size: 4.5cqw;
  }
  .sidebar-tweet-card-logo {
    width: 10%;
    height: 10%;
  }
  .sidebar-tweet-card-text {
    font-size: 5.5cqw;
  }
  .sidebar-tweet-card-header {
    gap: 3%;
    margin-bottom: 3%;
  }
}

/* Take/text content preview */
.sidebar-take-embed {
  position: absolute;
  inset: 0;
  padding: 8px;
  font-size: 0.6rem;
  line-height: 1.4;
  overflow: hidden;
  color: var(--color-text-primary);
  background: linear-gradient(135deg,
    rgba(var(--color-bg-card-rgb, 26, 26, 46), 0.98) 0%,
    rgba(var(--color-bg-base-rgb, 15, 15, 30), 0.95) 100%);
}

/* Chart preview */
.sidebar-chart-embed {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-card);
  color: var(--color-text-secondary);
}

.sidebar-chart-embed svg {
  width: 32px;
  height: 32px;
  opacity: 0.6;
}

/* Data table preview */
.sidebar-table-embed {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-card);
  color: var(--color-text-secondary);
}

.sidebar-table-embed svg {
  width: 32px;
  height: 32px;
  opacity: 0.6;
}

/* Page/Timeline/Collection preview - matches explore page featured style */
.sidebar-page-embed {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 4px;
}

/* Background media layer - matches explore page .page-preview-media */
.sidebar-page-embed-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-bg-card, #1a1a2e);
}

/* Gradient overlay via pseudo-element - matches explore page .page-preview-media::after */
.sidebar-page-embed-media::after {
  content: '';
  position: absolute;
  inset: -10px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.4) 40%,
    rgba(0, 0, 0, 0.1) 70%,
    transparent 100%
  );
  pointer-events: none;
}

/* Deprecated separate overlay div - now hidden like explore page */
.sidebar-page-embed-overlay {
  display: none;
}

/* Content layer - matches explore page .page-preview-content */
.sidebar-page-embed-info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem;
  box-sizing: border-box;
  z-index: 3;
}

.sidebar-page-embed-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.sidebar-page-embed-description {
  margin: 0.25rem 0 0 0;
  font-size: 0.7rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Type indicator badge - matches explore page .page-type-indicator */
.sidebar-page-type-indicator {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 10;
  width: auto;
  height: auto;
  padding: 3px 6px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sidebar-page-type-indicator svg {
  width: 10px;
  height: 10px;
  color: white;
}

.sidebar-post-item:hover .sidebar-page-type-indicator {
  transform: scale(1.1);
  box-shadow: 0 0 8px rgba(0, 168, 255, 0.5);
}

/* Topic pill (top left) - matching profile grid style */
.sidebar-page-topic-pill {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 3px 6px;
  font-size: 9px;
  font-weight: 600;
  color: white;
  background: rgba(0, 168, 255, 0.15);
  border: 1px solid rgba(0, 168, 255, 0.5);
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(0, 168, 255, 0.3);
  text-transform: capitalize;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  max-width: calc(100% - 48px); /* Leave room for type indicator */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-page-topic-pill:hover {
  background: rgba(0, 168, 255, 0.25);
  border-color: rgba(0, 168, 255, 0.6);
  box-shadow: 0 0 12px rgba(0, 168, 255, 0.4);
  transform: scale(1.05);
  color: white;
}

/* No thumbnail variant - styled card background */
.sidebar-page-embed-no-thumb {
  background: linear-gradient(135deg,
    rgba(0, 168, 255, 0.3) 0%,
    rgba(0, 80, 120, 0.5) 100%);
}

.sidebar-page-embed-no-thumb .sidebar-page-embed-media::after {
  display: none;
}

.sidebar-page-embed-info-centered {
  justify-content: center;
  text-align: center;
}

.sidebar-page-embed-info-centered .sidebar-page-embed-title {
  -webkit-line-clamp: 3;
}

.sidebar-page-embed-info-centered .sidebar-page-embed-description {
  -webkit-line-clamp: 2;
}

/* Container query scaling for page embeds in grid cells */
@container tweet-card (max-width: 120px) {
  .sidebar-page-embed-info {
    padding: 0.5rem;
  }
  .sidebar-page-embed-title {
    font-size: 0.6rem;
    -webkit-line-clamp: 2;
  }
  .sidebar-page-embed-description {
    font-size: 0.5rem;
    -webkit-line-clamp: 1;
  }
  .sidebar-page-type-indicator {
    padding: 2px 4px;
    bottom: 4px;
    right: 4px;
    font-size: 0.45rem;
    gap: 2px;
  }
  .sidebar-page-type-indicator svg {
    width: 8px;
    height: 8px;
  }
  .sidebar-page-topic-pill {
    display: none; /* Hide on very small cards */
  }
  /* Scale X logo smaller for small cards */
  .sidebar-tweet-card-logo {
    width: 8%;
    height: 8%;
    min-width: 8px;
    min-height: 8px;
  }
}

@container tweet-card (min-width: 121px) and (max-width: 180px) {
  .sidebar-page-embed-info {
    padding: 0.65rem;
  }
  .sidebar-page-embed-title {
    font-size: 0.7rem;
  }
  .sidebar-page-embed-description {
    font-size: 0.55rem;
  }
  .sidebar-page-type-indicator {
    padding: 2px 5px;
    bottom: 5px;
    right: 5px;
    font-size: 0.5rem;
    gap: 2px;
  }
  .sidebar-page-type-indicator svg {
    width: 9px;
    height: 9px;
  }
  .sidebar-page-topic-pill {
    top: 5px;
    left: 5px;
    padding: 2px 4px;
    font-size: 7px;
    max-width: calc(100% - 36px);
  }
  /* Scale X logo for medium cards */
  .sidebar-tweet-card-logo {
    width: 10%;
    height: 10%;
    min-width: 10px;
    min-height: 10px;
  }
}

@container tweet-card (min-width: 181px) and (max-width: 250px) {
  .sidebar-page-embed-info {
    padding: 0.75rem;
  }
  .sidebar-page-embed-title {
    font-size: 0.8rem;
  }
  .sidebar-page-embed-description {
    font-size: 0.65rem;
  }
  .sidebar-page-type-indicator {
    padding: 3px 5px;
    bottom: 6px;
    right: 6px;
    font-size: 0.55rem;
    gap: 3px;
  }
  .sidebar-page-type-indicator svg {
    width: 10px;
    height: 10px;
  }
  .sidebar-page-topic-pill {
    top: 6px;
    left: 6px;
    padding: 2px 5px;
    font-size: 8px;
    max-width: calc(100% - 40px);
  }
  /* Scale X logo for larger cards */
  .sidebar-tweet-card-logo {
    width: 12%;
    height: 12%;
    min-width: 14px;
    min-height: 14px;
  }
}

/* Scale X logo for extra large cards */
@container tweet-card (min-width: 251px) {
  .sidebar-tweet-card-logo {
    width: 14%;
    height: 14%;
    min-width: 18px;
    min-height: 18px;
  }
}

/* Platform badge overlay */
.sidebar-content-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.sidebar-content-badge svg {
  width: 10px;
  height: 10px;
}

/* Small loading spinner for content previews */
.loading-spinner-small {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Horizontal mode adjustments for content preview */
.timeline-editor-fullwidth.horizontal-view .sidebar-post-list.content-preview-mode {
  display: flex !important;
  flex-wrap: nowrap !important;
  grid-template-columns: unset !important;
  gap: 4px !important;
  padding: 4px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

.timeline-editor-fullwidth.horizontal-view .sidebar-post-list.content-preview-mode > .sidebar-post-item-content {
  /* Use CSS variable set by JS for dynamic sizing based on sidebar height */
  /* Default to 200px (300px sidebar - 100px overhead) if variable not set */
  width: var(--sidebar-item-size, 200px) !important;
  min-width: 60px !important; /* Minimum usable size */
  max-width: 320px !important; /* 420px max sidebar - 100px overhead */
  height: var(--sidebar-item-size, 200px) !important;
  padding-bottom: 0 !important; /* Override the aspect-ratio trick from vertical mode */
  aspect-ratio: 1 / 1 !important;
  flex-shrink: 0 !important;
}

/* Instagram posts need taller containers in horizontal mode */
.timeline-editor-fullwidth.horizontal-view .sidebar-post-list.content-preview-mode > .sidebar-post-item-content[data-platform="instagram"] {
  height: calc(var(--sidebar-item-size, 200px) * 1.7) !important;
  aspect-ratio: auto !important;
}

/* Narrower sidebar adjustments - 2 columns */
@container (max-width: 250px) {
  .sidebar-post-list.content-preview-mode {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Post item type badge */
.sidebar-post-item-type {
  border-radius: var(--radius-xs);
}

/* Add button on post item */
.sidebar-post-item-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  opacity: 0;
}

.sidebar-post-item:hover .sidebar-post-item-add {
  opacity: 1;
}

.sidebar-post-item-add:hover {
  background: rgba(0, 168, 255, 0.2);
  border-color: rgba(0, 168, 255, 0.6);
  color: rgba(0, 168, 255, 1);
}

/* ============================================================
   Right Side - Timeline Items Area
   ============================================================ */

.timeline-items-area {
  position: relative;
  padding: var(--spacing-xl);
  flex: 1;
  max-width: none;
  margin: 0 auto;
  transition: all 0.2s ease;
  overflow-y: auto;
  overflow-x: hidden;
}

/* When zoomed, allow horizontal scroll if content exceeds viewport */
.timeline-items-area.zoomed {
  overflow-x: auto;
}

/* Timeline items container - needs to support zoom transform */
.timeline-items-container {
  transition: transform 0.15s ease-out;
  transform-origin: top center;
}

/* In horizontal view, use top left origin since we scroll horizontally */
.timeline-editor-fullwidth.horizontal-view .timeline-items-container {
  transform-origin: top left;
}

/* ============================================================
   Timeline Zoom Indicator
   ============================================================ */

.timeline-zoom-indicator {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.15),
    0 1px 2px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.95);
  transition: all 0.2s ease;
  pointer-events: none;
}

.timeline-zoom-indicator.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.timeline-zoom-indicator .zoom-level-text {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  user-select: none;
  letter-spacing: 0.02em;
}

/* Drop zone indicator for timeline area - removed per user request */
/* No visual highlight on the entire timeline area during drag */
.timeline-items-area.drag-over {
  /* Intentionally empty - no highlight on timeline area */
}

/* Sidebar drop zone (for removing items) */
.timeline-post-sidebar.drag-over {
  background: rgba(239, 68, 68, 0.05);
  border-right-color: rgba(239, 68, 68, 0.4);
  box-shadow: inset -20px 0 40px rgba(239, 68, 68, 0.1);
}

.timeline-post-sidebar.drag-over::after {
  content: 'Drop to remove';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 24px;
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: var(--radius-md);
  color: #ef4444;
  font-size: 14px;
  font-weight: 500;
  pointer-events: none;
  z-index: 100;
}

/* ============================================================
   Timeline Items Container (Vertical View)
   ============================================================ */

.timeline-items-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

/* ============================================================
   Timeline Items List - Fixed 45-slot Grid (Vertical View)
   ============================================================ */

.timeline-items-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: var(--spacing-lg);
  width: 100%;
  box-sizing: border-box;
}

/* ============================================================
   Timeline Slot Wrapper (contains slot + floating caption)
   Fixed 380px width centered in vertical view
   ============================================================ */

.timeline-slot-wrapper {
  position: relative;
  width: 380px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md, 16px);
  padding-top: 32px;
}

/* ============================================================
   Timeline Slots (Fixed Grid System)
   ============================================================ */

.timeline-slot {
  position: relative;
  width: 100%;
  min-height: 320px;
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all var(--transition-fast);
}

/* Empty slot */
.timeline-slot.empty {
  background: rgba(255, 255, 255, 0.02);
  border: 2px dashed rgba(255, 255, 255, 0.1);
  cursor: pointer;
}

.timeline-slot.empty:hover {
  background: rgba(0, 168, 255, 0.05);
  border-color: rgba(0, 168, 255, 0.3);
}

.empty-slot-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 8px;
  color: rgba(255, 255, 255, 0.3);
}

.empty-slot-content svg {
  opacity: 0.5;
}

.empty-slot-hint {
  font-size: 0.7rem;
  opacity: 0.6;
}

/* ============================================================
   Inline Quick Add (integrated into empty slot)
   ============================================================ */

.inline-quick-add {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  width: 100%;
  height: 100%;
}

.timeline-slot.quick-add-active {
  border-color: rgba(0, 168, 255, 0.5);
  background: rgba(0, 168, 255, 0.05);
}

.inline-quick-add-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 320px;
}

.inline-quick-add-input {
  flex: 1;
  padding: 10px 14px;
  background: var(--color-bg-base, #2a2c34);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: var(--color-text-primary, #fff);
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.inline-quick-add-input:focus {
  border-color: rgba(0, 168, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.1);
}

.inline-quick-add-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.inline-quick-add-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.2s ease;
}

.inline-quick-add-close:hover {
  background: rgba(239, 68, 68, 0.4);
  color: #fff;
  border-color: rgba(239, 68, 68, 0.6);
}

.inline-quick-add-close svg {
  width: 14px;
  height: 14px;
}

.inline-quick-add-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}

.inline-quick-add-hint .hint-platforms {
  display: flex;
  align-items: center;
  gap: 4px;
}

.inline-quick-add-hint .hint-platforms svg {
  opacity: 0.5;
}

.inline-quick-add-loading {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
}

.inline-quick-add-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--color-accent-primary, #00a8ff);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.inline-quick-add-error {
  display: none;
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 6px;
  color: #ef4444;
  font-size: 0.8rem;
  text-align: center;
  max-width: 280px;
}

/* Filled slot */
.timeline-slot.filled {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  min-height: auto;
  overflow: visible;
  cursor: grab;
}

.timeline-slot.filled:hover {
  border-color: rgba(0, 168, 255, 0.4);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.timeline-slot.filled:active {
  cursor: grabbing;
}

.timeline-slot.selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(0, 168, 255, 0.3);
}

/* Slot delete button - matches collection editor styling */
.timeline-slot-wrapper {
  position: relative;
}

.slot-delete-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  opacity: 0;
  transition: all 0.2s ease;
  z-index: 10;
  padding: 0;
}

.slot-delete-btn svg {
  width: 14px;
  height: 14px;
  display: block;
}

.timeline-slot.filled:hover .slot-delete-btn {
  opacity: 1;
}

.slot-delete-btn:hover {
  background: #ef4444;
  transform: scale(1.1);
}

/* Dragging state */
.timeline-slot.dragging {
  opacity: 0.5;
  transform: scale(0.98);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Drop target highlight */
.timeline-slot.drag-over {
  border-color: var(--color-primary) !important;
  background: rgba(0, 168, 255, 0.15) !important;
  box-shadow: 0 0 20px rgba(0, 168, 255, 0.3);
}

/* Drag overlay - visual effect only, must NOT capture events */
.timeline-slot::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  background: transparent;
  /* CRITICAL: Events must pass through to the actual slot element for drag/drop to work */
  pointer-events: none;
}

/* Slot content area - allows content to expand */
.timeline-slot-content {
  position: relative;
  width: 100%;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.05);
  overflow: hidden;
  border-radius: var(--radius-md);
  /* CRITICAL: Disable pointer events so drag events reach the parent slot */
  pointer-events: none;
}

/* All content within slots should not capture pointer events */
.timeline-slot-content iframe,
.timeline-slot-content img,
.timeline-slot-content video,
.timeline-slot-content .tweet-container,
.timeline-slot-content .youtube-responsive-wrapper,
.timeline-slot-content .chart-embed-wrapper,
.timeline-slot-content .timeline-image-wrapper,
.timeline-slot-content .timeline-video-wrapper {
  pointer-events: none;
}

/* Generic media sizing - but NOT iframes (Twitter/Instagram set their own sizes) */
.timeline-slot-content img,
.timeline-slot-content video {
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* YouTube iframe sizing (YouTube needs explicit sizing) */
.timeline-slot-youtube .timeline-slot-content iframe {
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* Twitter embed in slot - full width block layout (matches view page) */
.timeline-slot-content .tweet-container {
  display: block;
  width: 100%;
  padding: 0;
  background: transparent;
}

.timeline-slot-content .tweet-container .twitter-tweet,
.timeline-slot-content .tweet-container .twitter-tweet-rendered {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.timeline-slot-content .tweet-container iframe {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 12px !important;
  color-scheme: light !important;
}

/* Tweet slots - remove background, top-align, allow full tweet visibility */
/* Using .timeline-slot-twitter class (added by JS) instead of :has() for better browser support */
.timeline-slot.filled.timeline-slot-twitter {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  overflow: visible !important; /* Allow tweet to extend beyond slot bounds */
  min-height: auto !important; /* Let tweet determine height */
}

/* Twitter slots - preserve hover, selected, and drag-over states */
.timeline-slot.filled.timeline-slot-twitter:hover {
  background: transparent;
  border-color: rgba(0, 168, 255, 0.4);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.timeline-slot.filled.timeline-slot-twitter.selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(0, 168, 255, 0.3);
}

.timeline-slot.filled.timeline-slot-twitter.drag-over {
  border-color: var(--color-primary) !important;
  background: rgba(0, 168, 255, 0.15) !important;
  box-shadow: 0 0 20px rgba(0, 168, 255, 0.3);
}

.timeline-slot.filled.timeline-slot-twitter.dragging {
  opacity: 0.5;
  transform: scale(0.98);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Content area - transparent, block layout (matches view page) */
.timeline-slot-twitter .timeline-slot-content {
  background: transparent !important;
  display: block;
  width: 100%;
  overflow: visible !important;
}

/* Tweet container styling - full width (matches view page) */
.timeline-slot-twitter .tweet-container {
  display: block;
  width: 100%;
  padding: 0;
  background: transparent;
}

/* Override Twitter widget styling - force full width (matches view page) */
.timeline-slot-twitter .tweet-container .twitter-tweet,
.timeline-slot-twitter .tweet-container .twitter-tweet-rendered {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Tweet iframe - full width without scaling (matches view page) */
.timeline-slot-twitter .tweet-container iframe {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 12px !important;
  /* Critical: color-scheme: light prevents the browser from applying dark mode
     to the iframe content, which causes white background corners in Twitter embeds */
  color-scheme: light !important;
}

/* YouTube embed in slot */
.timeline-slot-content .youtube-responsive-wrapper {
  width: 100%;
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.timeline-slot-content .youtube-responsive-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Instagram embed in slot - allow full height like Twitter */
.timeline-slot.filled.timeline-slot-instagram {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  overflow: visible !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
}

.timeline-slot.filled.timeline-slot-instagram:hover {
  background: transparent;
  border-color: rgba(0, 168, 255, 0.4);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.timeline-slot.filled.timeline-slot-instagram.selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(0, 168, 255, 0.3);
}

/* Content area - transparent, top-aligned flexbox (matches Twitter) */
.timeline-slot-instagram .timeline-slot-content {
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: auto !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

/* Style the official Instagram blockquote/embed */
.timeline-slot-instagram .timeline-slot-content .instagram-media {
  margin: 0 !important;
  min-width: 326px;
  max-width: 540px;
  width: 100%;
}

/* Instagram iframe - let Instagram control height, just constrain width */
.timeline-slot-instagram .timeline-slot-content iframe {
  max-width: 540px !important;
  border: none !important;
  border-radius: 12px !important;
}

/* Chart embed in slot */
.timeline-slot-content .chart-embed-wrapper {
  width: 100%;
  min-height: 250px;
  padding: 16px;
}

/* Image wrapper in slot */
.timeline-slot-content .timeline-image-wrapper {
  width: 100%;
}

.timeline-slot-content .timeline-image-wrapper img {
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: contain;
  border-radius: var(--radius-md);
}

/* Video wrapper in slot */
.timeline-slot-content .timeline-video-wrapper {
  width: 100%;
}

.timeline-slot-content .timeline-video-wrapper video {
  width: 100%;
  height: auto;
  max-height: 500px;
  border-radius: var(--radius-md);
}

/* Embed placeholder */
.timeline-slot-content .embed-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

/* Loading state */
.timeline-slot-content .embed-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 200px;
}

/* ============================================================
   Floating Caption Box - Positioned to the right of the slot
   ============================================================ */

.timeline-slot-caption-wrapper {
  position: absolute;
  top: 32px; /* Align with top of slot (below date indicator padding) */
  left: calc(100% + 16px); /* Position to the right of the slot with 16px gap */
  width: 200px;
  height: 320px; /* Default height, JS will adjust based on actual slot content */
  z-index: 10;
  pointer-events: auto;
}

.timeline-slot-caption-wrapper .timeline-caption-input {
  width: 100%;
  height: 100%;
  padding: 8px 0;
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  background: transparent;
  border: none;
  border-radius: 0;
  resize: none;
  outline: none;
  transition: color 0.2s ease;
}

.timeline-slot-caption-wrapper .timeline-caption-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.timeline-slot-caption-wrapper .timeline-caption-input:hover {
  color: rgba(255, 255, 255, 0.8);
}

.timeline-slot-caption-wrapper .timeline-caption-input:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  color: var(--color-text-primary);
}

/* Drag states */
.timeline-slot.dragging {
  opacity: 0.5;
  transform: scale(0.95);
}

.timeline-slot.drag-over {
  border-color: var(--color-primary);
  background: rgba(0, 168, 255, 0.1);
}

/* ============================================================
   Insert Slots (Legacy - kept for backwards compatibility)
   ============================================================ */

.timeline-insert-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: var(--spacing-sm) 0;
  opacity: 0;
  transition: opacity var(--transition-fast);
  cursor: pointer;
  /* Minimal background to capture drag events even when invisible */
  background: rgba(0, 0, 0, 0.01);
}

/* Overlay to capture drag events on slots */
.timeline-insert-slot::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  /* Nearly invisible but captures pointer events */
  background: rgba(0, 0, 0, 0.01);
  border-radius: var(--radius-lg);
}

/* Show slots on hover over the container */
.timeline-items-list:hover .timeline-insert-slot {
  opacity: 1;
}

/* Show slots during drag operations */
.timeline-items-list.dragging-active .timeline-insert-slot {
  opacity: 1;
}

/* First slot is always visible when there are no items */
.timeline-insert-slot-first.visible-empty {
  opacity: 1;
  min-height: 100px;
}

/* Hide the line elements - not used in rectangle design */
.timeline-insert-slot-line {
  display: none;
}

/* Slot button - now a dotted rectangle */
.timeline-insert-slot-btn {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  border-radius: var(--radius-lg);
  border: 2px dotted rgba(0, 168, 255, 0.3);
  /* Minimal background to capture drag events */
  background: rgba(0, 0, 0, 0.01);
  color: rgba(0, 168, 255, 0.4);
  cursor: pointer;
  transition: all var(--transition-fast);
  /* Let drag events pass through to parent slot */
  pointer-events: none;
}

.timeline-insert-slot-btn:hover,
.timeline-insert-slot.drag-over .timeline-insert-slot-btn {
  border-color: rgba(0, 168, 255, 0.6);
  background: rgba(0, 168, 255, 0.05);
  color: rgba(0, 168, 255, 0.8);
  box-shadow:
    0 0 20px rgba(0, 168, 255, 0.15),
    inset 0 0 20px rgba(0, 168, 255, 0.05);
}

/* Drag-over state for insert slots */
.timeline-insert-slot.drag-over {
  opacity: 1;
}

.timeline-insert-slot-btn svg {
  width: 20px;
  height: 20px;
}

/* First slot when empty - larger and more prominent */
.timeline-insert-slot-first.visible-empty .timeline-insert-slot-btn {
  height: 80px;
  border-width: 2px;
  border-color: rgba(0, 168, 255, 0.4);
  color: rgba(0, 168, 255, 0.5);
}

.timeline-insert-slot-first.visible-empty .timeline-insert-slot-btn:hover {
  border-color: rgba(0, 168, 255, 0.8);
  color: rgba(0, 168, 255, 1);
  box-shadow:
    0 0 30px rgba(0, 168, 255, 0.2),
    inset 0 0 30px rgba(0, 168, 255, 0.08);
}

.timeline-insert-slot-first.visible-empty .timeline-insert-slot-btn svg {
  width: 28px;
  height: 28px;
}

/* Timeline Item - Content-First Style (no card wrapper) */
.timeline-item {
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all var(--transition-fast);
  cursor: grab;
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  /* CRITICAL: Must have a background to capture pointer events for drag-drop */
  background: rgba(0, 0, 0, 0.01);
}

/* Overlay to capture drag events - covers entire item */
.timeline-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  /* Nearly invisible but captures pointer events for drag-drop */
  background: rgba(0, 0, 0, 0.001);
  border-radius: inherit;
}

/* Disable pointer events on content so drag events reach the parent */
.timeline-item .timeline-item-content {
  pointer-events: none;
  position: relative;
  z-index: 1;
}

/* Also disable on iframes specifically */
.timeline-item iframe,
.timeline-item .tweet-container,
.timeline-item .youtube-responsive-wrapper {
  pointer-events: none;
}

.timeline-item:hover {
  border-color: rgba(255, 255, 255, 0.1);
}

.timeline-item.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

/* Selected state for keyboard navigation */
.timeline-item.selected {
  border-color: rgba(0, 168, 255, 0.6);
  box-shadow: 0 0 20px rgba(0, 168, 255, 0.2);
}

.timeline-item.selected:hover {
  border-color: rgba(0, 168, 255, 0.8);
}

/* Drag-over state for drop targets */
.timeline-item.drag-over {
  border-color: rgba(16, 185, 129, 0.6);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
}

/* Hover Controls - Hidden (functionality moved to drag-drop and keyboard shortcuts) */
.timeline-item-controls {
  display: none;
}


/* Drag Handle */
.timeline-item-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(15, 20, 35, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: grab;
  transition: all var(--transition-fast);
}

.timeline-item-drag-handle:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--color-text-primary);
}

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

/* Delete Button */
.timeline-item-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(15, 20, 35, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.timeline-item-delete-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
  color: #ef4444;
}

/* Content Container - shows the actual embed */
.timeline-item-content {
  min-height: 50px;
}

/* ============================================================
   Timeline Item Wrapper (contains item + caption)
   ============================================================ */

.timeline-item-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md, 16px);
}

/* ============================================================
   Timeline Item Caption - Glassmorphism Floating Box
   ============================================================ */

.timeline-item-caption-wrapper {
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

.timeline-caption-input {
  width: 100%;
  min-height: 24px;
  max-height: 150px;
  padding: 4px 0;
  background: transparent;
  border: none;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--font-size-sm);
  font-family: inherit;
  line-height: 1.5;
  resize: none;
  transition: color 0.2s ease;
}

.timeline-caption-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.timeline-caption-input:hover {
  color: rgba(255, 255, 255, 0.8);
}

.timeline-caption-input:focus {
  outline: none;
  color: var(--color-text-primary);
}

/* Horizontal view caption styling */
.timeline-editor-fullwidth.horizontal-view .timeline-item-wrapper {
  gap: var(--spacing-sm, 8px);
}

.timeline-editor-fullwidth.horizontal-view .timeline-caption-input {
  min-height: 20px;
  padding: 2px 0;
  font-size: 0.75rem;
}

/* Loading State */
.embed-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: rgba(0, 168, 255, 0.6);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* Embed Placeholder */
.embed-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  color: var(--color-text-muted);
  text-align: center;
  gap: var(--spacing-sm);
}

.embed-placeholder svg {
  opacity: 0.5;
}

.embed-placeholder span {
  font-size: var(--font-size-sm);
}

.embed-placeholder a {
  color: var(--color-primary);
  text-decoration: none;
}

.embed-placeholder a:hover {
  text-decoration: underline;
}

/* Twitter Embed Styles */
.timeline-item-twitter .timeline-item-content {
  display: flex;
  justify-content: center;
}

.tweet-container {
  max-width: 100%;
}

.tweet-container iframe {
  border-radius: var(--radius-md) !important;
}

/* YouTube Embed Styles */
.youtube-responsive-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.youtube-responsive-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: var(--radius-md);
}

/* Image Wrapper */
.timeline-image-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.timeline-image-wrapper img {
  max-width: 100%;
  max-height: 400px;
  border-radius: var(--radius-md);
  object-fit: contain;
}

/* Video Wrapper */
.timeline-video-wrapper {
  display: flex;
  justify-content: center;
}

.timeline-video-wrapper video {
  max-width: 100%;
  max-height: 400px;
  border-radius: var(--radius-md);
}

/* Data Table Styles */
.timeline-data-table-wrapper {
  overflow-x: auto;
  max-height: 300px;
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.2);
}

.timeline-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.timeline-data-table th,
.timeline-data-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.timeline-data-table th {
  background: rgba(255, 255, 255, 0.05);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  position: sticky;
  top: 0;
}

.timeline-data-table td {
  color: var(--color-text-secondary);
}

.timeline-data-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

.table-more-rows {
  padding: 8px 12px;
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.03);
}

/* Legacy styles for compatibility */
.timeline-item-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.timeline-item-type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(0, 168, 255, 0.1);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  text-transform: capitalize;
}

.timeline-item-date {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ============================================================
   Add Item Button
   ============================================================ */

.timeline-add-item-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  width: 100%;
  padding: var(--spacing-lg);
  background: transparent;
  border: 2px dashed rgba(0, 168, 255, 0.3);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.timeline-add-item-btn:hover {
  border-color: rgba(0, 168, 255, 0.6);
  color: var(--color-primary);
  background: rgba(0, 168, 255, 0.05);
}

.timeline-add-item-btn svg {
  opacity: 0.7;
}

.timeline-add-item-btn:hover svg {
  opacity: 1;
}

/* Old Post Search Modal & Grid View - DEPRECATED (replaced by Add Post Popup) */

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

@media (max-width: 768px) {
  .editor-metadata-bar {
    padding: var(--spacing-sm);
    gap: var(--spacing-sm);
  }

  .metadata-row-main {
    flex-wrap: wrap;
  }

  .metadata-left {
    flex-basis: 100%;
    min-width: auto;
  }

  .metadata-row-actions {
    flex-wrap: wrap;
    justify-content: center;
  }

  .metadata-actions-group {
    justify-content: center;
    flex-wrap: wrap;
  }

  .editor-action-btn {
    min-width: 100px;
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .timeline-items-area {
    padding: var(--spacing-md);
  }

  .timeline-item {
    flex-direction: column;
  }

  .timeline-item-thumbnail {
    width: 100%;
    height: 120px;
  }

  .timeline-item-drag-handle {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
  }
}

/* ============================================================
   Add Post Popup Window (matches page editor)
   ============================================================ */

.canvas-popup-window {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 500px;
  min-width: 500px;
  min-height: 350px;
  background: rgba(15, 20, 30, 0.98);
  border: 1px solid rgba(0, 168, 255, 0.3);
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.7),
              0 0 40px rgba(0, 168, 255, 0.15);
  display: none;
  flex-direction: column;
  z-index: 10000;
  overflow: hidden;
  backdrop-filter: blur(20px);
}

.canvas-popup-window.active {
  display: flex;
}

.canvas-popup-window.dragging {
  cursor: grabbing;
  user-select: none;
}

.canvas-popup-window.resizing {
  user-select: none;
}

/* Move Handle */
.popup-move-handle {
  position: absolute;
  top: 0;
  left: 0;
  right: 40px;
  height: 32px;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
  z-index: 10;
}

.popup-move-handle:hover {
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.03);
}

.popup-move-handle:active {
  cursor: grabbing;
}

.popup-move-handle svg {
  opacity: 0.6;
}

/* Close Button */
.canvas-popup-window .popup-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 20px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
  z-index: 11;
}

.canvas-popup-window .popup-close:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

/* Resize Handle */
.popup-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  cursor: nwse-resize;
  z-index: 11;
}

.popup-resize-handle::before {
  content: '';
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.popup-resize-handle:hover::before {
  border-color: rgba(0, 168, 255, 0.5);
}

/* Main Content Layout */
.canvas-popup-window .popup-content {
  display: flex;
  flex: 1;
  overflow: hidden;
  margin-top: 32px;
}

/* Left Section - Post List */
.popup-list-section {
  width: 45%;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
}

/* Filter Bar */
.popup-filter-bar {
  padding: var(--spacing-sm);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.popup-discovery-bar-wrapper {
  overflow: hidden;
}

.popup-discovery-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}

.popup-discovery-bar::-webkit-scrollbar {
  display: none;
}

/* Discovery Links */
.popup-discovery-bar .discovery-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.popup-discovery-bar .discovery-link:hover {
  background: rgba(0, 168, 255, 0.1);
  border-color: rgba(0, 168, 255, 0.3);
  color: rgba(255, 255, 255, 0.9);
}

.popup-discovery-bar .discovery-link.active {
  background: rgba(0, 168, 255, 0.2);
  border-color: rgba(0, 168, 255, 0.5);
  color: #00a8ff;
}

/* Search Pill */
.popup-discovery-bar .discovery-search-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  min-width: 32px;
  transition: all 0.2s ease;
}

.popup-discovery-bar .discovery-search-pill.expanded {
  min-width: 140px;
  background: rgba(0, 168, 255, 0.1);
  border-color: rgba(0, 168, 255, 0.4);
}

.popup-discovery-bar .discovery-search-input {
  width: 0;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  color: white;
  font-size: 11px;
  transition: width 0.2s ease;
}

.popup-discovery-bar .discovery-search-pill.expanded .discovery-search-input {
  width: 100px;
  padding-left: 4px;
}

.popup-discovery-bar .discovery-search-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* Discovery Links Wrapper */
.popup-discovery-bar .discovery-links-wrapper {
  display: flex;
  overflow: hidden;
}

.popup-discovery-bar .discovery-links {
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: nowrap;
}

.popup-discovery-bar .discovery-no-results {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  font-style: italic;
  padding: 4px 8px;
}

/* Active Filters Row */
.popup-active-filters-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: rgba(0, 168, 255, 0.05);
  border-bottom: 1px solid rgba(0, 168, 255, 0.1);
}

.popup-active-filters-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.popup-active-filters-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
}

.popup-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(0, 168, 255, 0.15);
  border: 1px solid rgba(0, 168, 255, 0.3);
  border-radius: 10px;
  font-size: 10px;
  color: #00a8ff;
}

.popup-filter-pill-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.popup-filter-pill-remove:hover {
  background: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.popup-clear-all-filters-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.popup-clear-all-filters-btn:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* Post List */
.popup-post-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-xs);
}

.popup-post-list::-webkit-scrollbar {
  width: 6px;
}

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

.popup-post-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.popup-post-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Post Item */
.popup-post-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}

.popup-post-item:hover {
  background: rgba(0, 168, 255, 0.08);
  border-color: rgba(0, 168, 255, 0.2);
}

.popup-post-item.selected {
  background: rgba(0, 168, 255, 0.15);
  border-color: rgba(0, 168, 255, 0.4);
}

.popup-post-thumb {
  width: 48px;
  height: 36px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.popup-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.popup-post-thumb svg {
  color: rgba(255, 255, 255, 0.3);
}

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

.popup-post-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.popup-post-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.popup-post-type {
  display: inline-flex;
  padding: 1px 6px;
  background: rgba(0, 168, 255, 0.1);
  border-radius: 8px;
  color: var(--color-primary);
  text-transform: capitalize;
}

/* Loading & Empty States */
.popup-loading,
.popup-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  color: var(--color-text-muted);
  font-size: 13px;
}

/* Right Section - Preview */
.popup-preview-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.15);
  position: relative;
}

.popup-preview-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
}

.popup-preview-placeholder svg {
  opacity: 0.4;
  margin-bottom: var(--spacing-md);
}

.popup-preview-placeholder p {
  font-size: 13px;
  margin: 0;
}

.popup-preview-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
  overflow: hidden;
}

.popup-preview-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Preview Actions */
.popup-preview-actions {
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
}

.popup-add-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-xl);
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.5);
  border-radius: var(--radius-md);
  color: #10b981;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.2);
}

.popup-add-btn:hover {
  background: rgba(16, 185, 129, 0.3);
  border-color: rgba(16, 185, 129, 0.7);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
  transform: translateY(-1px);
}

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

/* Preview Card Styling */
.popup-carousel-card {
  width: 100%;
  max-width: 340px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(0, 168, 255, 0.2);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.popup-carousel-card .post-embed-container {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-carousel-card .carousel-card-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: var(--spacing-sm);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.popup-carousel-card .carousel-topic-pill {
  display: inline-flex;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
}

.popup-carousel-card .carousel-topic-more {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  padding: 2px 6px;
}

/* Embed Styles */
.embed-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 2px solid rgba(0, 168, 255, 0.2);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.embed-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  padding: var(--spacing-md);
}

.embed-placeholder svg {
  opacity: 0.4;
  margin-bottom: var(--spacing-sm);
}

.embed-placeholder span {
  font-size: 12px;
}

.embed-image {
  max-width: 100%;
  max-height: 280px;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.embed-video {
  max-width: 100%;
  max-height: 280px;
  border-radius: var(--radius-md);
}

/* YouTube Embed */
.youtube-responsive-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.youtube-responsive-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Chart Embed */
.chart-embed-wrapper {
  width: 100%;
  height: 200px;
  padding: var(--spacing-sm);
}

.chart-canvas {
  width: 100% !important;
  height: 100% !important;
}

.chart-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: var(--spacing-sm);
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

/* Data Table Embed */
.data-table-embed {
  width: 100%;
  padding: var(--spacing-sm);
}

.data-table-embed-wrapper {
  overflow-x: auto;
}

.data-table-embed-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.data-table-embed-table th,
.data-table-embed-table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.data-table-embed-table th {
  background: rgba(0, 168, 255, 0.1);
  color: var(--color-primary);
  font-weight: 600;
  white-space: nowrap;
}

.data-table-embed-table td {
  color: rgba(255, 255, 255, 0.8);
}

.data-table-more-rows {
  text-align: center;
  padding: var(--spacing-sm);
  color: var(--color-text-muted);
  font-size: 11px;
}

/* Timeline Preview Embed */
.popup-timeline-embed {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
}

.popup-timeline-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs);
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-sm);
}

.popup-timeline-thumb {
  width: 36px;
  height: 24px;
  object-fit: cover;
  border-radius: 4px;
}

.popup-timeline-title {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.popup-timeline-more {
  text-align: center;
  font-size: 11px;
  color: var(--color-text-muted);
  padding-top: var(--spacing-xs);
}

/* Twitter Embed - general tweet container */
.tweet-container {
  display: block;
  width: 100%;
  padding: 0;
  background: transparent;
}

.tweet-container iframe {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 12px !important;
  color-scheme: light !important;
}

.twitter-fallback {
  text-align: center;
}

.twitter-fallback a {
  color: var(--color-primary);
  text-decoration: none;
}

.twitter-fallback a:hover {
  text-decoration: underline;
}

/* Create Post Popup */
.create-post-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 10001;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.create-post-popup-overlay.active {
  display: flex;
}

.create-post-popup-window {
  width: 90%;
  max-width: 900px;
  height: 85vh;
  background: var(--color-bg-primary);
  border: 1px solid rgba(0, 168, 255, 0.3);
  border-radius: var(--radius-xl);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.7);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.create-post-popup-window .popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.6);
  font-size: 20px;
  cursor: pointer;
  z-index: 10;
  transition: all 0.15s ease;
}

.create-post-popup-window .popup-close:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.create-popup-content {
  flex: 1;
  overflow: hidden;
}

.create-popup-content iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ============================================================
   Toast Notifications
   ============================================================ */

.timeline-toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timeline-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-bg-secondary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  animation: toastSlideIn 0.3s ease;
}

.timeline-toast.hiding {
  animation: toastSlideOut 0.3s ease forwards;
}

.timeline-toast .toast-message {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.timeline-toast .toast-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline-toast .toast-close:hover {
  color: rgba(255, 255, 255, 0.8);
}

.timeline-toast.toast-success {
  border-color: rgba(34, 197, 94, 0.3);
}

.timeline-toast.toast-error {
  border-color: rgba(239, 68, 68, 0.3);
}

.timeline-toast.toast-warning {
  border-color: rgba(251, 191, 36, 0.3);
}

@keyframes toastSlideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toastSlideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* ============================================================
   Gray Action Button (Settings)
   ============================================================ */

.editor-action-btn-gray {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text-primary);
}

.editor-action-btn-gray:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ============================================================
   Sidebar Hover Preview - Overlay on first empty slot
   (Matches collection editor preview behavior)
   ============================================================ */

.timeline-preview-overlay {
  position: relative;
  width: 100%;
  z-index: 100;
  overflow: visible;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
  background: transparent;
}

.timeline-preview-overlay.visible {
  opacity: 1;
  transform: scale(1);
}

/* Hide empty slot when preview is shown - preview takes its place in flow */
.timeline-slot-wrapper:has(.timeline-preview-overlay.visible) .timeline-slot.empty {
  display: none;
}

/* Preview date indicator - matches .timeline-date-indicator styling */
.timeline-preview-date-indicator {
  position: absolute;
  top: 4px; /* Same offset as actual date indicator (32px wrapper padding is already accounted for) */
  left: 0;
  transform: translateX(-100%) translateX(-42px);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: transparent;
  border-radius: 4px;
  z-index: 10;
}

.timeline-preview-date-indicator .date-text {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
}

/* The inner slot inside preview - inherits actual slot styling */
.timeline-preview-overlay .timeline-slot.preview-slot {
  width: 100%;
  border: none;
  border-radius: 0;
  margin: 0;
  min-height: auto;
  overflow: visible;
}

/* Twitter preview slot - match actual .timeline-slot.filled.timeline-slot-twitter styling */
.timeline-preview-overlay .timeline-slot-twitter.preview-slot {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  min-height: auto !important;
  height: auto !important;
  overflow: visible !important;
}

/* The slot content inside preview - matches actual slot styling */
.timeline-preview-overlay .timeline-slot-content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 10px;
  background: transparent !important;
}

/* Twitter embeds in preview - match actual .timeline-slot-twitter styling */
.timeline-preview-overlay .timeline-slot-twitter .timeline-slot-content {
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: auto !important;
  overflow: visible !important;
}

.timeline-preview-overlay .preview-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 8px;
  background: rgba(0, 168, 255, 0.9);
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  animation: pulse-preview 1.5s ease-in-out infinite;
  z-index: 10;
}

@keyframes pulse-preview {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

/* Twitter embed in preview - matches view page styling */
.timeline-preview-overlay .timeline-slot-twitter .tweet-container {
  display: block;
  width: 100%;
  padding: 0;
  background: transparent;
}

/* Twitter widget in preview - full width (matches view page) */
.timeline-preview-overlay .timeline-slot-twitter .tweet-container .twitter-tweet,
.timeline-preview-overlay .timeline-slot-twitter .tweet-container .twitter-tweet-rendered {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Twitter iframe in preview - full width without scaling (matches view page) */
.timeline-preview-overlay .timeline-slot-twitter .tweet-container iframe {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 12px !important;
  color-scheme: light !important;
}

.timeline-preview-overlay .timeline-slot-content .youtube-responsive-wrapper,
.timeline-preview-overlay .timeline-slot-content .chart-container {
  width: 100%;
  height: 100%;
}

/* Generic iframe sizing for preview (YouTube, etc.) */
.timeline-preview-overlay .timeline-slot-content iframe {
  width: 100%;
  height: 100%;
}

/* Image/video fill for preview */
.timeline-preview-overlay .timeline-slot-content img,
.timeline-preview-overlay .timeline-slot-content video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Take embed styling in preview */
.timeline-preview-overlay .timeline-slot-content .timeline-take-embed {
  padding: 1rem;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  text-align: center;
}

/* Page/Timeline/Collection embed in preview */
.timeline-preview-overlay .sidebar-page-embed,
.timeline-preview-overlay .timeline-featured-card {
  width: 100%;
  height: 100%;
}

/* ============================================================
   Featured Card Style for Page/Collection/Timeline
   (Matches explore page featured cards exactly)
   ============================================================ */

.timeline-featured-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-featured-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(0, 168, 255, 0.15);
}

/* Background image */
.timeline-featured-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(0, 168, 255, 0.1);
  transition: transform 0.4s ease;
}

.timeline-featured-card:hover .timeline-featured-media {
  transform: scale(1.05);
}

/* Gradient overlay for text readability */
.timeline-featured-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
  pointer-events: none;
}

/* Type indicator (top left) - matches canonical featured-embed-type */
.timeline-featured-type-indicator {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  width: auto;
  height: auto;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 6px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.timeline-featured-type-indicator svg {
  width: 14px;
  height: 14px;
}

.timeline-featured-card:hover .timeline-featured-type-indicator {
  transform: scale(1.05);
}

/* Author attribution (bottom right - matches explore page) */
.timeline-featured-attribution {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
  z-index: 10;
}

.timeline-featured-attribution .attribution-author {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease, text-shadow 0.2s ease;
  pointer-events: auto;
}

.timeline-featured-attribution .attribution-author:hover {
  color: #33c4ff;
}

.timeline-featured-attribution .attribution-author:hover .attribution-username {
  text-shadow: 0 0 10px rgba(0, 168, 255, 0.6), 0 0 20px rgba(0, 168, 255, 0.4);
  text-decoration: none;
}

.timeline-featured-attribution .attribution-avatar {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px;
  max-width: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  object-fit: cover;
}

.timeline-featured-attribution .attribution-author:hover .attribution-avatar {
  border-color: rgba(0, 168, 255, 0.6);
  box-shadow: 0 0 10px rgba(0, 168, 255, 0.5), 0 0 20px rgba(0, 168, 255, 0.3);
}

.timeline-featured-attribution .attribution-username {
  font-weight: 600;
  color: inherit;
}

/* Content overlay */
.timeline-featured-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.25rem;
  box-sizing: border-box;
  z-index: 3;
  pointer-events: none;
}

/* Topic pill (top left) */
.timeline-featured-topic-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  font-size: 0.7rem;
  font-weight: 500;
  color: white;
  background: rgba(0, 168, 255, 0.15);
  border: 1px solid rgba(0, 168, 255, 0.5);
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(0, 168, 255, 0.3);
  text-transform: capitalize;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  z-index: 4;
  pointer-events: auto;
}

.timeline-featured-topic-pill:hover {
  background: rgba(0, 168, 255, 0.25);
  border-color: rgba(0, 168, 255, 0.6);
  color: white;
  transform: scale(1.08);
  box-shadow: 0 0 12px rgba(0, 168, 255, 0.4);
}

/* Info section (bottom) */
.timeline-featured-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.timeline-featured-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: white;
  line-height: 1.25;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.timeline-featured-description {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.45;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Author attribution */
.timeline-featured-attribution {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.65rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}

.timeline-featured-attribution .attribution-label {
  color: rgba(255, 255, 255, 0.5);
}

.timeline-featured-attribution .attribution-author {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: color 0.2s ease, text-shadow 0.2s ease;
  pointer-events: auto;
}

.timeline-featured-attribution .attribution-author:hover {
  color: #33c4ff;
}

.timeline-featured-attribution .attribution-author:hover .attribution-username {
  text-shadow: 0 0 10px rgba(0, 168, 255, 0.6), 0 0 20px rgba(0, 168, 255, 0.4);
  text-decoration: none;
}

.timeline-featured-attribution .attribution-avatar {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px;
  max-width: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  object-fit: cover;
}

.timeline-featured-attribution .attribution-author:hover .attribution-avatar {
  border-color: rgba(0, 168, 255, 0.6);
  box-shadow: 0 0 10px rgba(0, 168, 255, 0.5), 0 0 20px rgba(0, 168, 255, 0.3);
}

.timeline-featured-attribution .attribution-username {
  font-weight: 500;
  color: inherit;
}

/* Featured card inside slot content - ensure it fills container */
.timeline-slot-content:has(.timeline-featured-card) {
  display: block; /* Override flex to allow absolute positioning */
}

.timeline-slot-content .timeline-featured-card {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

/* Ensure attribution avatar inside featured card is not affected by generic img rules */
.timeline-slot-content .timeline-featured-card .attribution-avatar {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px;
  max-width: 28px;
  flex-shrink: 0;
  object-fit: cover;
}

/* ============================================================
   Horizontal View Layout
   ============================================================ */

/* Main layout changes for horizontal view */
.timeline-editor-fullwidth.horizontal-view .editor-main-area.timeline-editor-layout {
  flex-direction: column;
  min-height: calc(100vh - 80px);
  overflow: visible; /* Allow children to scroll */
}

/* Ensure the fullwidth container doesn't clip scroll */
.timeline-editor-fullwidth.horizontal-view {
  overflow: visible;
}

/* Timeline area takes up most of the space - SCROLLABLE */
.timeline-editor-fullwidth.horizontal-view .timeline-items-area {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100vw;
  padding: var(--spacing-lg);
  padding-top: 80px; /* Extra space above timeline slots */
  padding-bottom: 460px; /* Space for fixed bottom bar (420px max + 40px buffer) */
  overflow-x: scroll !important; /* Force horizontal scroll */
  overflow-y: auto !important;
  display: block;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  position: relative;
}

/* Horizontal scrollbar styling */
.timeline-editor-fullwidth.horizontal-view .timeline-items-area::-webkit-scrollbar {
  height: 10px;
}

.timeline-editor-fullwidth.horizontal-view .timeline-items-area::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 5px;
}

.timeline-editor-fullwidth.horizontal-view .timeline-items-area::-webkit-scrollbar-thumb {
  background: rgba(0, 168, 255, 0.4);
  border-radius: 5px;
}

.timeline-editor-fullwidth.horizontal-view .timeline-items-area::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 168, 255, 0.6);
}

/* Timeline items container - must expand to fit content */
.timeline-editor-fullwidth.horizontal-view .timeline-items-container {
  display: inline-flex; /* Use inline-flex to allow natural width expansion */
  flex-direction: row;
  gap: 0;
  min-width: 100%;
  width: max-content; /* Expand to fit all children */
  padding: 0 var(--spacing-xl);
  align-items: flex-start;
}

/* Timeline items list - horizontal layout with explicit width */
.timeline-editor-fullwidth.horizontal-view .timeline-items-list {
  display: inline-flex !important; /* Override grid with inline-flex */
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 24px !important;
  padding: var(--spacing-lg) !important;
  align-items: flex-start !important;
  /* 45 slots × 380px + 44 gaps × 24px = ~18,200px minimum */
  width: max-content !important;
  min-width: calc(45 * 380px + 44 * 24px) !important;
}

/* Slot wrappers in horizontal mode - fixed width, no shrink */
.timeline-editor-fullwidth.horizontal-view .timeline-slot-wrapper {
  flex: 0 0 380px !important; /* Don't grow, don't shrink, basis 380px */
  width: 380px !important;
  min-width: 320px;
  max-width: 450px;
}

/* Slots in horizontal mode - auto height to fit content */
.timeline-editor-fullwidth.horizontal-view .timeline-slot {
  width: 100%;
  min-height: 300px;
  height: auto;
  max-height: calc(100vh - 520px);
  overflow: hidden;
}

/* Empty slots in horizontal mode */
.timeline-editor-fullwidth.horizontal-view .timeline-slot.empty {
  height: 300px;
  min-height: 300px;
}

/* Twitter slots wider */
.timeline-editor-fullwidth.horizontal-view .timeline-slot-wrapper:has(.timeline-slot-twitter) {
  width: 420px;
}

/* YouTube slots wider */
.timeline-editor-fullwidth.horizontal-view .timeline-slot-wrapper:has(.timeline-slot-youtube) {
  width: 450px;
}

/* Instagram slots in horizontal view */
.timeline-editor-fullwidth.horizontal-view .timeline-slot.timeline-slot-instagram {
  max-height: none;
  overflow: visible;
}

.timeline-editor-fullwidth.horizontal-view .timeline-slot-wrapper:has(.timeline-slot-instagram) {
  width: 560px;
}

/* Legacy timeline items in horizontal mode */
.timeline-editor-fullwidth.horizontal-view .timeline-item {
  flex-shrink: 0;
  width: 400px;
  min-width: 300px;
  max-width: 500px;
  height: auto;
  max-height: calc(100vh - 520px);
}

.timeline-editor-fullwidth.horizontal-view .timeline-item-twitter {
  width: 450px;
}

.timeline-editor-fullwidth.horizontal-view .timeline-item-youtube {
  width: 480px;
}

/* Insert slots in horizontal mode */
.timeline-editor-fullwidth.horizontal-view .timeline-insert-slot {
  flex-shrink: 0;
  width: 80px;
  min-width: 60px;
  min-height: auto;
  height: calc(100vh - 540px);
  padding: 0 var(--spacing-sm);
  flex-direction: column;
}

.timeline-editor-fullwidth.horizontal-view .timeline-insert-slot-btn {
  width: 40px;
  height: 100px;
  writing-mode: vertical-lr;
  text-orientation: mixed;
}

.timeline-editor-fullwidth.horizontal-view .timeline-insert-slot.drag-over {
  width: 100px;
}

.timeline-editor-fullwidth.horizontal-view .timeline-insert-slot.drag-over .timeline-insert-slot-btn {
  width: 60px;
}

/* ============================================================
   Sidebar as Bottom Bar (Horizontal View)
   ============================================================ */

.timeline-editor-fullwidth.horizontal-view .timeline-post-sidebar {
  /* Fixed position at bottom of viewport with spacing from edge */
  position: fixed !important;
  top: auto !important;
  bottom: 12px !important;
  left: 12px !important;
  right: 12px !important;
  /* Override base dimensions */
  width: calc(100% - 24px) !important;
  max-width: none !important;
  min-width: 0 !important;
  border-radius: 12px !important;
  /* Height set by JS, default to 300px */
  height: 300px;
  min-height: 220px;
  max-height: 420px;
  /* Layout - flex column so post-list can fill remaining space */
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 0 !important;
  /* Override base borders */
  border-right: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  /* Transparent to show page gradient background */
  background: transparent !important;
  /* Stacking - high z-index to stay above content */
  z-index: 1000;
  /* Reset any transforms */
  transform: none !important;
  overflow: visible !important;
}

/* Sidebar tabs in horizontal mode - inline row */
.timeline-editor-fullwidth.horizontal-view .sidebar-tabs {
  display: flex !important;
  flex-direction: row !important;
  flex-shrink: 0;
  padding: 0 var(--spacing-md);
  height: 44px;
  min-height: 44px;
  gap: 0; /* Remove gap, use individual padding */
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  align-items: center;
}

.timeline-editor-fullwidth.horizontal-view .sidebar-tab {
  flex: 0 0 auto;
  padding: 0.5rem 0.5rem;
  font-size: 0.65rem;
}

/* Filter bar in horizontal mode - inline after tabs */
.timeline-editor-fullwidth.horizontal-view .sidebar-filter-bar {
  display: flex !important;
  position: absolute !important;
  top: 0;
  /* Use fixed left value - tabs need more space with padding */
  left: 320px;
  right: 250px; /* Leave room for search box (220px + padding) */
  height: 44px;
  padding: 0 var(--spacing-sm);
  border-bottom: none !important;
  background: transparent;
  align-items: center;
  gap: var(--spacing-xs);
  overflow-x: auto;
  overflow-y: hidden;
  z-index: 5; /* Ensure filter bar is above tabs background */
}

/* Hide scrollbar but allow scrolling */
.timeline-editor-fullwidth.horizontal-view .sidebar-filter-bar::-webkit-scrollbar {
  display: none;
}

.timeline-editor-fullwidth.horizontal-view .sidebar-filter-bar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Hide the filter label in horizontal mode for compactness */
.timeline-editor-fullwidth.horizontal-view .sidebar-filter-bar .filter-bar-label {
  display: none;
}

/* Compact topic chips in horizontal mode */
.timeline-editor-fullwidth.horizontal-view .sidebar-filter-bar .filter-bar-chips,
.timeline-editor-fullwidth.horizontal-view .sidebar-filter-bar .sidebar-discovery-bar,
.timeline-editor-fullwidth.horizontal-view .sidebar-filter-bar .discovery-links-wrapper,
.timeline-editor-fullwidth.horizontal-view .sidebar-filter-bar .discovery-links {
  display: flex !important;
  gap: 6px;
  flex-wrap: nowrap;
  align-items: center;
  height: 100%;
  flex: 1;
  min-width: 0;
}

/* Keep discovery-bar box styling in horizontal mode - compact for 44px header */
.timeline-editor-fullwidth.horizontal-view .sidebar-filter-bar .sidebar-discovery-bar {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm, 4px);
  padding: 0.15rem 0.35rem;
  height: 32px;
}

.timeline-editor-fullwidth.horizontal-view .sidebar-filter-bar .topic-chip,
.timeline-editor-fullwidth.horizontal-view .sidebar-filter-bar .discovery-link {
  padding: 2px 6px;
  font-size: 0.55rem;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Show the search pill in horizontal mode - compact size to match header */
.timeline-editor-fullwidth.horizontal-view .sidebar-filter-bar .discovery-search-pill {
  display: flex;
  align-items: center;
  height: 20px;
  min-width: 28px;
  padding: 0 6px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.timeline-editor-fullwidth.horizontal-view .sidebar-filter-bar .discovery-search-pill svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.timeline-editor-fullwidth.horizontal-view .sidebar-filter-bar .discovery-search-pill .discovery-search-input {
  width: 0;
  opacity: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: white;
  font-size: 0.55rem;
  transition: width 0.2s ease, opacity 0.2s ease;
}

.timeline-editor-fullwidth.horizontal-view .sidebar-filter-bar .discovery-search-pill.expanded {
  min-width: 100px;
  background: rgba(0, 168, 255, 0.15);
  border-color: rgba(0, 168, 255, 0.4);
}

.timeline-editor-fullwidth.horizontal-view .sidebar-filter-bar .discovery-search-pill.expanded .discovery-search-input {
  width: 60px;
  opacity: 1;
  margin-left: 4px;
}

/* Search bar in horizontal mode - fixed at right, vertically centered in 44px header */
.timeline-editor-fullwidth.horizontal-view .sidebar-post-search {
  position: absolute !important;
  top: 6px;
  right: var(--spacing-md);
  left: auto !important;
  width: 220px;
  height: 32px;
  padding: 0 var(--spacing-sm);
  display: flex !important;
}

.timeline-editor-fullwidth.horizontal-view .sidebar-post-search svg {
  left: 0.75rem;
}

.timeline-editor-fullwidth.horizontal-view .sidebar-post-search-input {
  font-size: 0.65rem;
}

/* ============================================================
   POST LIST & CARDS IN HORIZONTAL MODE

   Simple approach: JS sets card heights directly via inline style.
   CSS just needs to make cards flex containers so thumb can grow.
   ============================================================ */

.timeline-editor-fullwidth.horizontal-view .sidebar-post-list {
  /* Horizontal scrolling row */
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: var(--spacing-md);
  padding: 8px var(--spacing-md);
  overflow-x: auto !important;
  overflow-y: hidden !important;
  flex: 1 !important;
}

/* Custom scrollbar for horizontal scroll */
.timeline-editor-fullwidth.horizontal-view .sidebar-post-list::-webkit-scrollbar {
  height: 6px;
}

.timeline-editor-fullwidth.horizontal-view .sidebar-post-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.timeline-editor-fullwidth.horizontal-view .sidebar-post-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.timeline-editor-fullwidth.horizontal-view .sidebar-post-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Sidebar post items - height controlled by --sidebar-item-size CSS variable */
.timeline-editor-fullwidth.horizontal-view .sidebar-post-item {
  flex: 0 0 140px !important;
  width: 140px !important;
  /* Height from CSS variable set by JS during resize, default 200px (300px sidebar - 100px overhead) */
  height: var(--sidebar-item-size, 200px) !important;
  /* Flex column so thumbnail can grow */
  display: flex !important;
  flex-direction: column !important;
  padding: var(--spacing-sm) !important;
  gap: var(--spacing-xs) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* Thumbnail grows to fill remaining card space */
.timeline-editor-fullwidth.horizontal-view .sidebar-post-item-thumb {
  width: 100% !important;
  height: auto !important; /* Override base 48px fixed height */
  flex: 1 1 auto !important;
  min-height: 40px !important;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

/* Info section stays fixed height at bottom */
.timeline-editor-fullwidth.horizontal-view .sidebar-post-item-info {
  width: 100% !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}

.timeline-editor-fullwidth.horizontal-view .sidebar-post-item-title {
  font-size: 0.65rem !important;
  line-height: 1.2 !important;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.timeline-editor-fullwidth.horizontal-view .sidebar-post-item-meta {
  margin-top: 2px;
}

.timeline-editor-fullwidth.horizontal-view .sidebar-post-item-type {
  font-size: 0.55rem !important;
}

/* Hide vertical resize handle in horizontal mode */
.timeline-editor-fullwidth.horizontal-view .sidebar-resize-handle {
  display: none !important;
}

/* Active filters row in horizontal mode - compact */
.timeline-editor-fullwidth.horizontal-view .sidebar-active-filters {
  display: flex !important;
  padding: 0.2rem var(--spacing-md);
  background: rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}

.timeline-editor-fullwidth.horizontal-view .sidebar-active-filters-label {
  font-size: 0.55rem;
}

.timeline-editor-fullwidth.horizontal-view .sidebar-active-filters-pills {
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 0.25rem;
}

.timeline-editor-fullwidth.horizontal-view .sidebar-active-filters .filter-pill,
.timeline-editor-fullwidth.horizontal-view .sidebar-active-filters .sidebar-filter-pill {
  padding: 2px 6px;
  font-size: 0.55rem;
  flex-shrink: 0;
}

.timeline-editor-fullwidth.horizontal-view .sidebar-clear-filters-btn {
  font-size: 0.55rem;
  padding: 2px 6px;
}

/* ============================================================
   Horizontal Mode Resize Handle (Top Edge)
   ============================================================ */

/* Hide horizontal resize handle in vertical mode */
.sidebar-resize-handle-horizontal {
  display: none;
}

/* Show horizontal resize handle in horizontal mode */
.timeline-editor-fullwidth.horizontal-view .sidebar-resize-handle-horizontal {
  display: block;
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  height: 8px;
  cursor: ns-resize;
  z-index: 100;
  background: transparent;
  transition: background 0.2s ease;
}

.timeline-editor-fullwidth.horizontal-view .sidebar-resize-handle-horizontal::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.timeline-editor-fullwidth.horizontal-view .sidebar-resize-handle-horizontal:hover::after,
.timeline-editor-fullwidth.horizontal-view .timeline-post-sidebar.resizing .sidebar-resize-handle-horizontal::after {
  opacity: 1;
  background: rgba(0, 168, 255, 0.5);
}

.timeline-editor-fullwidth.horizontal-view .sidebar-resize-handle-horizontal:hover,
.timeline-editor-fullwidth.horizontal-view .timeline-post-sidebar.resizing .sidebar-resize-handle-horizontal {
  background: rgba(0, 168, 255, 0.1);
}

.timeline-editor-fullwidth.horizontal-view .timeline-post-sidebar.resizing {
  border-top-color: rgba(0, 168, 255, 0.5) !important;
  user-select: none;
}

/* Sidebar library and login content - only show when active */
.timeline-editor-fullwidth.horizontal-view .sidebar-library-content,
.timeline-editor-fullwidth.horizontal-view .sidebar-login-prompt {
  display: none;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex: 1;
  height: auto;
  width: 100%;
}

.timeline-editor-fullwidth.horizontal-view .sidebar-library-content.active,
.timeline-editor-fullwidth.horizontal-view .sidebar-login-prompt.active {
  display: flex;
  width: 100%;
}

/* Drop to remove indicator in horizontal mode */
.timeline-editor-fullwidth.horizontal-view .timeline-post-sidebar.drag-over {
  background: rgba(239, 68, 68, 0.1);
  border-top-color: rgba(239, 68, 68, 0.4);
  border-right: none;
  box-shadow: inset 0 20px 40px rgba(239, 68, 68, 0.1);
}

.timeline-editor-fullwidth.horizontal-view .timeline-post-sidebar.drag-over::after {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Preview overlay positioning in horizontal mode */
.timeline-editor-fullwidth.horizontal-view .timeline-preview-overlay {
  /* In horizontal mode, the overlay still uses absolute positioning
     relative to the slot it's overlaying */
}

/* ============================================================
   Horizontal View - Drag Over States
   ============================================================ */

.timeline-editor-fullwidth.horizontal-view .timeline-items-area.drag-over {
  /* Intentionally empty - no highlight on timeline area */
}

.timeline-editor-fullwidth.horizontal-view .timeline-item.drag-over {
  box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.5), 0 0 30px rgba(0, 168, 255, 0.3);
}

/* ============================================================
   Horizontal View - Timeline Item Embeds
   ============================================================ */

.timeline-editor-fullwidth.horizontal-view .timeline-item-content {
  max-height: calc(100vh - 320px);
  overflow: hidden;
}

.timeline-editor-fullwidth.horizontal-view .youtube-responsive-wrapper {
  padding-bottom: 56.25%;
}

.timeline-editor-fullwidth.horizontal-view .timeline-data-table-wrapper {
  max-height: calc(100vh - 340px);
  overflow: auto;
}

/* ============================================================
   Horizontal View - Bottom Bar Spacing
   ============================================================ */

/* Bottom padding no longer needed since sidebar is in document flow */

/* Empty state in horizontal mode */
.timeline-editor-fullwidth.horizontal-view .timeline-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   Horizontal View - Responsive Adjustments
   ============================================================ */

@media (max-width: 1200px) {
  .timeline-editor-fullwidth.horizontal-view .timeline-item {
    width: 350px;
    min-width: 280px;
  }

  .timeline-editor-fullwidth.horizontal-view .sidebar-post-item {
    width: 140px;
    min-width: 120px;
  }

  .timeline-editor-fullwidth.horizontal-view .sidebar-post-item-thumb {
    height: 60px;
  }
}

@media (max-width: 768px) {
  .timeline-editor-fullwidth.horizontal-view .timeline-item {
    width: 300px;
    min-width: 250px;
  }

  .timeline-editor-fullwidth.horizontal-view .timeline-post-sidebar {
    height: 140px;
  }

  .timeline-editor-fullwidth.horizontal-view .sidebar-post-item {
    width: 120px;
    min-width: 100px;
  }

  .timeline-editor-fullwidth.horizontal-view .sidebar-post-item-thumb {
    height: 50px;
  }

  .timeline-editor-fullwidth.horizontal-view .sidebar-post-item-title {
    font-size: 0.65rem;
    -webkit-line-clamp: 1;
  }
}

/* ============================================================
   Nested Timeline Expand/Collapse
   For timeline cards within a timeline, allows preview of nested content
   ============================================================ */

/* Slot wrapper needs relative positioning for nested expand */
.timeline-slot-wrapper {
  position: relative;
}

/* The expandable container - in document flow, below the slot */
.nested-timeline-expand {
  position: relative;
  z-index: 100;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease;
  background: transparent;
  margin-top: var(--spacing-sm);
  margin-left: 64px; /* Separation from base timeline bar */
}

/* Expanded state - fully expand to push content down */
.nested-timeline-expand.expanded {
  max-height: none;
  opacity: 1;
  overflow: visible;
}

/* Pinned state - visual indicator on the featured card itself (white glow matches card edges) */
.timeline-slot-wrapper.nested-timeline-pinned .timeline-featured-card {
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

/* Content wrapper inside expand - outline only (matches viewer) */
.nested-timeline-content {
  padding: var(--spacing-md, 16px);
  padding-top: var(--spacing-sm, 8px);
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md, 8px);
}

/* Nested timeline header row */
.nested-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm, 8px);
  padding-bottom: var(--spacing-sm, 8px);
  margin-bottom: var(--spacing-md, 16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Author info (left side) */
.nested-timeline-author {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.nested-timeline-author-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.nested-timeline-title {
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* View timeline link (right side) */
.nested-timeline-view-link {
  font-size: 0.65rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.nested-timeline-view-link:hover {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

/* Items vertical layout with timeline bar */
.nested-timeline-items {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md, 16px);
  width: 100%;
  padding-left: 32px;
}

/* Vertical timeline bar for nested timeline */
.nested-timeline-items::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 12px;
  width: 2px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 1px;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.1);
}

/* Individual nested item */
.nested-timeline-item {
  position: relative;
  width: 100%;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md, 8px);
  overflow: visible;
  transition: all 0.2s ease;
}

/* Clip content inside the item */
.nested-timeline-item-embed {
  overflow: hidden;
  border-radius: var(--radius-md, 8px);
}

/* Horizontal tick connecting item to timeline bar */
.nested-timeline-item::before {
  content: '';
  position: absolute;
  top: 24px;
  left: -20px;
  width: 12px;
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 1px;
  z-index: 1;
}

.nested-timeline-item:hover {
  border-color: rgba(0, 168, 255, 0.3);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Embed container inside nested item */
.nested-timeline-item-embed {
  width: 100%;
  min-height: 100px;
}

/* Caption below the embed - hidden in embedded timelines */
.nested-timeline-item-caption {
  display: none;
}

/* Featured card style for page/collection/timeline types */
.nested-featured-card {
  position: relative;
  aspect-ratio: 16/9;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.nested-featured-card-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
}

.nested-featured-card-overlay {
  position: absolute;
  inset: -2px;
  padding: var(--spacing-md);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9) 80%, rgba(0, 0, 0, 1));
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nested-featured-card-type {
  font-size: 0.65rem;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.nested-featured-card-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: white;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nested-featured-card-author {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* Featured card style for page/collection/timeline types in nested timelines */
/* Override the absolute positioning from main slot context */
.nested-timeline-item .timeline-featured-card {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  min-height: 180px;
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}

/* Scaled down text for nested cards */
.nested-timeline-item .timeline-featured-title {
  font-size: 0.9rem;
  -webkit-line-clamp: 2;
}

.nested-timeline-item .timeline-featured-description {
  font-size: 0.7rem;
  -webkit-line-clamp: 2;
}

.nested-timeline-item .timeline-featured-content {
  padding: 1rem;
}

.nested-timeline-item .timeline-featured-info {
  gap: 0.35rem;
}

/* Type indicator - top left, same position as main card, just smaller */
.nested-timeline-item .timeline-featured-type-indicator {
  top: 6px;
  left: 6px;
  padding: 2px 5px;
  font-size: 0.5rem;
  gap: 2px;
}

.nested-timeline-item .timeline-featured-type-indicator svg {
  width: 8px;
  height: 8px;
}

/* Attribution - bottom right, same position as main card, just smaller */
.nested-timeline-item .timeline-featured-attribution {
  bottom: 12px;
  right: 10px;
  font-size: 0.7rem;
  gap: 0.3rem;
}

.nested-timeline-item .timeline-featured-attribution .attribution-avatar {
  width: 18px;
  height: 18px;
}

/* YouTube embed in nested timeline */
.nested-timeline-item .youtube-responsive-wrapper {
  border-radius: 0;
}

/* Twitter embed in nested timeline - remove container styling */
.nested-timeline-item:has(.twitter-tweet) {
  background: transparent;
  border: none;
  box-shadow: none;
}

.nested-timeline-item:has(.twitter-tweet):hover {
  background: transparent;
  border: none;
  box-shadow: none;
}

.nested-timeline-item .twitter-tweet {
  margin: 0 auto !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

.nested-timeline-item .twitter-tweet iframe {
  max-height: 100% !important;
  width: 100% !important;
  border-radius: 12px !important;
  color-scheme: light !important;
}

/* Image wrapper in nested timeline */
.nested-timeline-item .timeline-image-wrapper {
  display: flex;
  justify-content: center;
  padding: var(--spacing-sm);
}

.nested-timeline-item .timeline-image-wrapper img {
  max-width: 100%;
  max-height: 400px;
  border-radius: var(--radius-sm);
}

/* Loading state */
.nested-timeline-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  gap: var(--spacing-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.nested-timeline-loading .loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(0, 168, 255, 0.2);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Empty state */
.nested-timeline-empty {
  text-align: center;
  padding: var(--spacing-xl);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Error state */
.nested-timeline-error {
  text-align: center;
  padding: var(--spacing-xl);
  color: #ef4444;
  font-size: var(--font-size-sm);
}

/* Hint text for interaction */
.nested-timeline-hint {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  text-align: center;
  padding-top: var(--spacing-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: var(--spacing-md);
}

/* Scrollbar styling for nested content */
.nested-timeline-expand::-webkit-scrollbar {
  width: 6px;
}

.nested-timeline-expand::-webkit-scrollbar-track {
  background: transparent;
}

.nested-timeline-expand::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.nested-timeline-expand::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ============================================================
   Nested Timeline - Horizontal View Adjustments
   ============================================================ */

.timeline-editor-fullwidth.horizontal-view .nested-timeline-expand {
  /* In horizontal view, still expand downward but with adjusted sizing */
  width: 100%;
}

.timeline-editor-fullwidth.horizontal-view .nested-timeline-items {
  /* Keep vertical stack in horizontal view */
  flex-direction: column;
}

/* ============================================================================
   Quick Add Popup
   ============================================================================ */

.quick-add-popup {
  position: absolute;
  z-index: 100;
  width: 360px;
  max-width: calc(100vw - 32px);
}

.quick-add-popup-content {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.quick-add-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}

.quick-add-popup-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.quick-add-popup-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.quick-add-popup-close:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.quick-add-popup-body {
  padding: var(--spacing-md);
}

/* Input State */
.quick-add-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.quick-add-input {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: 0.875rem;
  transition: border-color var(--transition-fast);
}

.quick-add-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.quick-add-input::placeholder {
  color: var(--color-text-tertiary);
}

.quick-add-input-hint {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}

.hint-platforms {
  display: flex;
  align-items: center;
  gap: 4px;
}

.hint-platforms svg {
  opacity: 0.5;
}

/* Loading State */
.quick-add-loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

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

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

/* Preview State */
.quick-add-preview-state {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.quick-add-preview {
  background: var(--color-bg-base);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* External media preview */
.quick-add-preview-external {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
}

.quick-add-preview-thumb {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-bg-elevated);
}

.quick-add-preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quick-add-preview-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-add-preview-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.quick-add-preview-platform {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: var(--color-bg-elevated);
  border-radius: var(--radius-sm);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  width: fit-content;
}

.quick-add-preview-platform.twitter { color: #1DA1F2; }
.quick-add-preview-platform.youtube { color: #FF0000; }
.quick-add-preview-platform.tiktok { color: #00f2ea; }
.quick-add-preview-platform.instagram { color: #E4405F; }
.quick-add-preview-platform.timeline { color: var(--color-primary); }
.quick-add-preview-platform.page { color: #10B981; }
.quick-add-preview-platform.collection { color: #8B5CF6; }

.quick-add-preview-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.quick-add-preview-author {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}

/* Featured card preview (for timeline/page/collection) */
.quick-add-preview-featured {
  position: relative;
  aspect-ratio: 16 / 9;
}

.quick-add-preview-featured-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.quick-add-preview-featured-overlay {
  position: absolute;
  inset: -2px;
  background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.8));
}

.quick-add-preview-featured-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--spacing-md);
}

.quick-add-preview-featured-type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: var(--radius-sm);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  color: white;
  margin-bottom: var(--spacing-xs);
}

.quick-add-preview-featured-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: white;
  margin-bottom: 2px;
}

.quick-add-preview-featured-author {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Actions */
.quick-add-actions {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
}

.quick-add-btn-cancel {
  padding: var(--spacing-xs) var(--spacing-md);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.quick-add-btn-cancel:hover {
  border-color: var(--color-text-tertiary);
  color: var(--color-text-primary);
}

.quick-add-btn-add {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-md);
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.quick-add-btn-add:hover {
  background: var(--color-primary-hover);
}

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

/* Error State */
.quick-add-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  text-align: center;
}

.quick-add-error-message {
  font-size: 0.875rem;
  color: var(--color-error);
}

.quick-add-btn-retry {
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.quick-add-btn-retry:hover {
  border-color: var(--color-text-tertiary);
}

/* Popup is now centered on slot - no arrow needed */

/* ============================================================
   Date Indicator Styles
   ============================================================ */

/* Both date label and "Add date" button - positioned on left side of timeline bar, near top of slot */
.timeline-date-indicator {
  position: absolute;
  top: calc(32px + 4px); /* 32px wrapper padding + 4px from top of slot */
  left: 0;
  transform: translateX(-100%) translateX(-42px); /* Close to timeline bar, matching "Add date" button */
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: transparent;
  border-radius: 4px;
  z-index: 10;
}

.timeline-date-indicator .date-text {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
}

.timeline-date-indicator .date-edit-btn {
  opacity: 0;
  transition: opacity 0.15s;
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--color-text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline-item:hover .date-edit-btn,
.timeline-slot:hover .date-edit-btn,
.timeline-slot-wrapper:hover .date-edit-btn {
  opacity: 1;
}

.date-edit-btn:hover {
  color: var(--color-accent-primary, #00a8ff);
}

/* Empty date indicator - "Add date" button */
.timeline-date-indicator.empty {
  padding: 0;
}

.timeline-date-indicator .date-add-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: var(--color-bg-tertiary, rgba(255, 255, 255, 0.05));
  border: 1px dashed var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: 4px;
  color: var(--color-text-tertiary, rgba(255, 255, 255, 0.4));
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
  opacity: 0;
  white-space: nowrap;
}

.timeline-slot:hover .date-add-btn,
.timeline-slot-wrapper:hover .date-add-btn {
  opacity: 1;
}

.timeline-date-indicator .date-add-btn:hover {
  background: var(--color-bg-secondary, rgba(255, 255, 255, 0.08));
  border-color: var(--color-accent-primary, #00a8ff);
  color: var(--color-accent-primary, #00a8ff);
}

.timeline-date-indicator .date-add-btn svg {
  flex-shrink: 0;
}

/* ============================================================
   Settings Dialog Tabs
   ============================================================ */

.settings-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0 24px;
}

.settings-tab {
  padding: 12px 20px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: -1px;
}

.settings-tab:hover {
  color: rgba(255, 255, 255, 0.8);
}

.settings-tab.active {
  color: #00a8ff;
  border-bottom-color: #00a8ff;
}

.settings-tab-panel {
  display: none;
}

.settings-tab-panel.active {
  display: block;
}

/* ============================================================
   Popup Topic Bar - Timeline Settings
   ============================================================ */

.popup-topic-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.popup-topic-pills {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  margin-top: 20px;
}

.popup-topic-pills::-webkit-scrollbar {
  display: none;
}

.popup-topic-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.08rem 0.3rem;
  font-size: clamp(0.5rem, 0.8vw, 0.55rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
  height: 24px;
  box-sizing: border-box;
}

.popup-topic-pill:hover {
  color: #00a8ff;
  background: rgba(0, 168, 255, 0.15);
  border-color: rgba(0, 168, 255, 0.4);
}

.popup-topic-empty {
  color: rgba(255, 255, 255, 0.4);
  cursor: default;
}

.popup-topic-empty:hover {
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}

/* AI-suggested topics container (below selected topics) */
.publish-ai-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  min-height: 0;
}

.publish-ai-suggestions:empty {
  display: none;
}

/* ============================================================
   Date Settings Modal
   ============================================================ */

.timeline-settings-modal,
.timeline-date-edit-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.settings-panel,
.date-edit-panel {
  background: var(--color-bg-elevated, #1a1a2e);
  border-radius: 12px;
  padding: 24px;
  min-width: 360px;
  max-width: 90vw;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.settings-panel h3,
.date-edit-panel h3 {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.date-edit-inherited-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--color-bg-tertiary, rgba(255, 255, 255, 0.05));
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 13px;
}

.date-edit-inherited-info .inherited-label {
  color: var(--color-text-tertiary);
}

.date-edit-inherited-info .inherited-value {
  color: var(--color-text-primary);
  font-weight: 500;
}

.setting-group,
.date-edit-group {
  margin-bottom: 16px;
}

.setting-group label,
.date-edit-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--color-text-secondary);
}

.setting-group select,
.date-edit-group select,
.date-edit-group input[type="text"],
.date-edit-group input[type="datetime-local"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  background: var(--color-bg-primary, #0d0d14);
  color: var(--color-text-primary);
  font-size: 14px;
}

.setting-group select:focus,
.date-edit-group select:focus,
.date-edit-group input:focus {
  outline: none;
  border-color: var(--color-accent-primary, #00a8ff);
  box-shadow: 0 0 0 2px rgba(0, 168, 255, 0.2);
}

.setting-group input[type="checkbox"] {
  margin-right: 8px;
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent-primary, #00a8ff);
}

.setting-actions,
.date-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
}

.setting-actions button,
.date-edit-actions button {
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}

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

.btn-cancel:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--color-text-tertiary);
}

.btn-save {
  background: var(--color-accent-primary, #00a8ff);
  border: none;
  color: white;
}

.btn-save:hover {
  background: var(--color-accent-primary-hover, #0090dd);
}

/* ============================================================
   Sidebar Chart and Data Table Previews
   ============================================================ */

/* Chart canvas wrapper for sidebar */
.sidebar-chart-canvas-wrapper {
  width: 100%;
  height: 100%;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 35, 45, 0.6);
  border-radius: 8px;
  box-sizing: border-box;
}

.sidebar-chart-canvas-wrapper canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
}

/* Data table preview for sidebar */
.sidebar-data-table-preview {
  width: 100%;
  height: 100%;
  padding: 6px;
  overflow: hidden;
  background: rgba(30, 35, 45, 0.6);
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.sidebar-mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.85);
  table-layout: fixed;
}

.sidebar-mini-table th {
  padding: 4px 6px;
  background: rgba(0, 168, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(0, 168, 255, 0.9);
}

.sidebar-mini-table td {
  padding: 3px 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}

.sidebar-mini-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

.sidebar-mini-table tbody tr:hover {
  background: rgba(0, 168, 255, 0.05);
}

.sidebar-mini-table .more-rows td {
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
  background: transparent;
}

/* ============================================================
   Sidebar Position Toggle Button
   ============================================================ */

.sidebar-position-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 100;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(30, 35, 45, 0.9);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.sidebar-position-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text-secondary);
}

/* ============================================================
   Sidebar Left Position Mode (in Horizontal View)
   ============================================================ */

/* Override column layout to row-reverse for sidebar-right mode (sidebar on right, timeline on left) */
.timeline-editor-fullwidth.horizontal-view.sidebar-left .editor-main-area.timeline-editor-layout {
  flex-direction: row-reverse !important;
  align-items: flex-start;
}

.timeline-editor-fullwidth.horizontal-view.sidebar-left .timeline-post-sidebar {
  /* Use sticky positioning - sidebar sticks when scrolled to top */
  position: sticky !important;
  top: 0 !important;
  right: 0 !important;
  /* Height fills viewport minus a small buffer */
  height: 100vh !important;
  min-height: auto !important;
  max-height: 100vh !important;
  /* Width settings - needs !important to override bottom bar rule */
  width: 320px !important;
  min-width: 300px !important;
  max-width: 600px !important;
  /* Layout */
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 0 !important;
  /* Borders - separator on left edge since sidebar is on right */
  border-top: none !important;
  border-right: none !important;
  border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  /* Transparent to show page gradient background */
  background: transparent !important;
  /* Ensure it's above other content */
  z-index: 100;
}

/* Resize handle for left sidebar - on right edge */
.timeline-editor-fullwidth.horizontal-view.sidebar-left .sidebar-resize-handle-horizontal {
  display: none !important;
}

.timeline-editor-fullwidth.horizontal-view.sidebar-left .sidebar-resize-handle {
  display: block !important;
  position: absolute;
  top: 0;
  left: -4px;
  width: 8px;
  height: 100%;
  cursor: ew-resize;
  z-index: 100;
  background: transparent;
}

/* Post list in left sidebar - vertical scroll, hidden scrollbar */
.timeline-editor-fullwidth.horizontal-view.sidebar-left .sidebar-post-list {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: var(--spacing-sm) !important;
  gap: var(--spacing-sm) !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.timeline-editor-fullwidth.horizontal-view.sidebar-left .sidebar-post-list::-webkit-scrollbar {
  display: none;
}

/* Post items in left sidebar - scale proportionally with sidebar width */
.timeline-editor-fullwidth.horizontal-view.sidebar-left .sidebar-post-item {
  flex: none !important;
  width: 100% !important;
  height: auto !important;
  /* Min-height scales with sidebar width: base 90px at 320px width */
  min-height: calc(var(--sidebar-width, 320) / 320 * 90px) !important;
  flex-direction: row !important;
  padding: var(--spacing-sm) !important;
  gap: var(--spacing-sm) !important;
}

.timeline-editor-fullwidth.horizontal-view.sidebar-left .sidebar-post-item-thumb {
  /* Thumbnail scales proportionally: base 100px width at 320px sidebar */
  width: calc(var(--sidebar-width, 320) / 320 * 100px) !important;
  min-width: calc(var(--sidebar-width, 320) / 320 * 100px) !important;
  height: calc(var(--sidebar-width, 320) / 320 * 80px) !important;
  flex-shrink: 0 !important;
}

.timeline-editor-fullwidth.horizontal-view.sidebar-left .sidebar-post-item-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.timeline-editor-fullwidth.horizontal-view.sidebar-left .sidebar-post-item-title {
  /* Font size scales slightly with sidebar width */
  font-size: calc(0.7rem + var(--sidebar-width, 320) / 320 * 0.05rem) !important;
  -webkit-line-clamp: 2 !important;
}

/* Content preview items in left sidebar */
.timeline-editor-fullwidth.horizontal-view.sidebar-left .sidebar-post-list.content-preview-mode > .sidebar-post-item-content {
  width: 100% !important;
  min-width: 100% !important;
  /* Height scales with sidebar width: base 180px at 320px */
  height: calc(var(--sidebar-width, 320) / 320 * 180px) !important;
  aspect-ratio: auto !important;
}

/* Instagram posts need taller containers in left sidebar mode */
.timeline-editor-fullwidth.horizontal-view.sidebar-left .sidebar-post-list.content-preview-mode > .sidebar-post-item-content[data-platform="instagram"] {
  height: calc(var(--sidebar-width, 320) / 320 * 300px) !important;
}

/* Timeline area in left sidebar mode - takes remaining space */
.timeline-editor-fullwidth.horizontal-view.sidebar-left .timeline-items-area {
  flex: 1 !important;
  padding-left: 0 !important;
  padding-bottom: 32px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: 100vh !important;
  /* Hide scrollbar while allowing scroll */
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.timeline-editor-fullwidth.horizontal-view.sidebar-left .timeline-items-area::-webkit-scrollbar {
  display: none;
}

/* Timeline items container - vertical layout for left sidebar */
.timeline-editor-fullwidth.horizontal-view.sidebar-left .timeline-items-container {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 var(--spacing-lg) !important;
  /* Center transform origin so zoom keeps timeline centered */
  transform-origin: top center !important;
}

/* Timeline items list - single column for left sidebar */
.timeline-editor-fullwidth.horizontal-view.sidebar-left .timeline-items-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: 500px !important;
  min-width: 0 !important;
  padding: var(--spacing-lg) !important;
  padding-left: 48px !important;
  margin: 0 auto !important;
  position: relative !important;
}

/* Vertical timeline bar - glowing line on left */
.timeline-editor-fullwidth.horizontal-view.sidebar-left .timeline-items-list::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 20px;
  width: 2px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 1px;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.15);
  z-index: 1;
}

/* Slot wrappers in left sidebar - with timeline tick */
.timeline-editor-fullwidth.horizontal-view.sidebar-left .timeline-slot-wrapper {
  flex: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  position: relative !important;
}

/* Timeline tick for each slot */
.timeline-editor-fullwidth.horizontal-view.sidebar-left .timeline-slot-wrapper::before {
  content: '';
  position: absolute;
  top: 50px;
  left: -27px;
  width: 16px;
  height: 3px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 1px;
  z-index: 2;
  transition: all 0.2s ease;
}

/* Active/selected slot - brighter tick */
.timeline-editor-fullwidth.horizontal-view.sidebar-left .timeline-slot-wrapper:has(.timeline-slot.selected)::before,
.timeline-editor-fullwidth.horizontal-view.sidebar-left .timeline-slot-wrapper:hover::before {
  background: #ffffff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
  width: 20px;
}

/* Filled slot - white tick */
.timeline-editor-fullwidth.horizontal-view.sidebar-left .timeline-slot-wrapper:has(.timeline-slot.filled)::before {
  background: rgba(255, 255, 255, 0.5);
}

/* Empty slot - dimmer tick */
.timeline-editor-fullwidth.horizontal-view.sidebar-left .timeline-slot-wrapper:has(.timeline-slot.empty)::before {
  background: rgba(255, 255, 255, 0.15);
}

/* Slots in left sidebar - auto height */
.timeline-editor-fullwidth.horizontal-view.sidebar-left .timeline-slot {
  width: 100% !important;
  min-height: 250px !important;
  max-height: none !important;
}

/* Filter bar in left sidebar - reset absolute positioning, flow below tabs */
.timeline-editor-fullwidth.horizontal-view.sidebar-left .sidebar-filter-bar {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  height: auto !important;
  flex-direction: column !important;
  padding: var(--spacing-sm) !important;
  flex-shrink: 0 !important;
}

/* Search bar in left sidebar - reset absolute positioning, flow below filter bar */
.timeline-editor-fullwidth.horizontal-view.sidebar-left .sidebar-post-search {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  width: 100% !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 var(--spacing-sm) !important;
  flex-shrink: 0 !important;
}

.timeline-editor-fullwidth.horizontal-view.sidebar-left .sidebar-discovery-bar {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  width: 100% !important;
  flex: none !important;
  height: auto !important;
  padding: 6px 0 !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.timeline-editor-fullwidth.horizontal-view.sidebar-left .sidebar-discovery-bar::-webkit-scrollbar {
  display: none;
}

.timeline-editor-fullwidth.horizontal-view.sidebar-left .discovery-links-wrapper::-webkit-scrollbar {
  display: none;
}

.timeline-editor-fullwidth.horizontal-view.sidebar-left .discovery-links-wrapper {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.timeline-editor-fullwidth.horizontal-view.sidebar-left .discovery-search-pill {
  flex-shrink: 0 !important;
  order: -1 !important;
}

.timeline-editor-fullwidth.horizontal-view.sidebar-left .discovery-links-wrapper {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  overflow: visible !important;
  height: auto !important;
}

.timeline-editor-fullwidth.horizontal-view.sidebar-left .discovery-links {
  flex-wrap: nowrap !important;
  gap: 4px !important;
  justify-content: flex-start !important;
}

.timeline-editor-fullwidth.horizontal-view.sidebar-left .discovery-link {
  flex-shrink: 0 !important;
}

/* Toggle icon visibility based on sidebar position */
.timeline-editor-fullwidth.horizontal-view .sidebar-position-toggle .icon-to-left {
  display: block;
}
.timeline-editor-fullwidth.horizontal-view .sidebar-position-toggle .icon-to-bottom {
  display: none;
}
.timeline-editor-fullwidth.horizontal-view.sidebar-left .sidebar-position-toggle .icon-to-left {
  display: none;
}
.timeline-editor-fullwidth.horizontal-view.sidebar-left .sidebar-position-toggle .icon-to-bottom {
  display: block;
}


/* ============================================================
   Login Popup Modal
   ============================================================ */

.login-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.login-popup {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 20px;
  padding: 32px;
  background: var(--color-bg-elevated, #2a2c34);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.login-popup-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.2s ease;
}

.login-popup-close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.login-popup-header {
  text-align: center;
  margin-bottom: 24px;
}

.login-popup-header h2 {
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text-primary, #fff);
}

.login-popup-header p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-secondary, rgba(255, 255, 255, 0.6));
}

.login-popup-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-popup-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-popup-field label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
}

.login-popup-field input {
  padding: 12px 14px;
  background: var(--color-bg-base, #1e1f24);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: var(--color-text-primary, #fff);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.login-popup-field input:focus {
  border-color: rgba(0, 168, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.1);
}

.login-popup-field input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.login-popup-error {
  padding: 10px 12px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  color: #ef4444;
  font-size: 0.85rem;
  text-align: center;
  display: none;
}

.login-popup-error:not(:empty) {
  display: block;
}

.login-popup-submit {
  padding: 14px 20px;
  background: transparent;
  border: 2px solid rgba(0, 168, 255, 0.6);
  border-radius: 8px;
  color: #00a8ff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 15px rgba(0, 168, 255, 0.2), inset 0 0 15px rgba(0, 168, 255, 0.05);
}

.login-popup-submit:hover:not(:disabled) {
  background: rgba(0, 168, 255, 0.1);
  border-color: rgba(0, 168, 255, 0.8);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 0 25px rgba(0, 168, 255, 0.4), inset 0 0 20px rgba(0, 168, 255, 0.1);
}

.login-popup-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.login-popup-footer {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.login-popup-footer p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-secondary, rgba(255, 255, 255, 0.6));
}

.login-popup-footer a {
  color: var(--color-accent-primary, #00a8ff);
  text-decoration: none;
  font-weight: 500;
}

.login-popup-footer a:hover {
  text-decoration: underline;
}

/* ============================================================
   Timeline Legend (Left Side Navigation)
   ============================================================ */

/* Base legend styles - hidden by default */
.timeline-legend {
  display: none;
}

.timeline-legend::-webkit-scrollbar {
  display: none;
}

.timeline-legend-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
}

/* Individual legend item */
.timeline-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s ease, opacity 0.15s ease;
  position: relative;
  user-select: none;
}

.timeline-legend-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.timeline-legend-item.active {
  background: rgba(0, 168, 255, 0.12);
}

.timeline-legend-item.dragging {
  opacity: 0.5;
  background: rgba(0, 168, 255, 0.1);
}

.timeline-legend-item.drag-over {
  background: rgba(0, 168, 255, 0.15);
  box-shadow: inset 0 -2px 0 rgba(0, 168, 255, 0.5);
}

/* Post type icon */
.timeline-legend-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
}

.timeline-legend-icon svg {
  width: 14px;
  height: 14px;
}

/* Title text */
.timeline-legend-title {
  flex: 1;
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.timeline-legend-item:hover .timeline-legend-title {
  color: rgba(255, 255, 255, 0.9);
}

.timeline-legend-item.active .timeline-legend-title {
  color: rgba(0, 168, 255, 0.9);
}

/* Connector line */
.timeline-legend-line {
  width: 20px;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
  transition: background 0.15s ease, width 0.15s ease;
}

.timeline-legend-item:hover .timeline-legend-line {
  background: rgba(255, 255, 255, 0.3);
  width: 28px;
}

.timeline-legend-item.active .timeline-legend-line {
  background: rgba(0, 168, 255, 0.5);
  width: 28px;
}

/* Slot number indicator */
.timeline-legend-slot {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 500;
  min-width: 14px;
  text-align: right;
  flex-shrink: 0;
}

/* Edit button */
.timeline-legend-edit-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  margin-left: 4px;
  background: transparent;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
}

.timeline-legend-edit-btn svg {
  width: 12px;
  height: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.timeline-legend-item:hover .timeline-legend-edit-btn {
  display: flex;
  opacity: 1;
}

.timeline-legend-edit-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.timeline-legend-edit-btn:hover svg {
  color: rgba(255, 255, 255, 0.9);
}

/* Inline title input */
.timeline-legend-title-input {
  flex: 1;
  font-size: 11px;
  font-weight: 400;
  color: white;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  padding: 2px 6px;
  outline: none;
  min-width: 0;
}

.timeline-legend-title-input:focus {
  border-color: rgba(0, 168, 255, 0.5);
  background: rgba(255, 255, 255, 0.15);
}

.timeline-legend-title-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}

/* Editing state */
.timeline-legend-item.editing {
  background: rgba(255, 255, 255, 0.05);
}

.timeline-legend-item.editing .timeline-legend-edit-btn {
  display: none;
}

.timeline-legend-item.editing .timeline-legend-line {
  display: none;
}

/* Custom name indicator */
.timeline-legend-item.has-custom-name .timeline-legend-title {
  color: rgba(255, 255, 255, 0.85);
}

/* Legend visible in sidebar-left mode */
.timeline-editor-fullwidth.horizontal-view.sidebar-left .timeline-items-area {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 0 !important;
}

.timeline-editor-fullwidth.horizontal-view.sidebar-left .timeline-legend {
  display: block !important;
  position: sticky;
  top: 20px;
  flex-shrink: 0;
  width: 220px;
  min-width: 220px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0;
  padding-left: 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.timeline-editor-fullwidth.horizontal-view.sidebar-left .timeline-legend::-webkit-scrollbar {
  display: none;
}

.timeline-editor-fullwidth.horizontal-view.sidebar-left .timeline-items-container {
  flex: 1 !important;
  min-width: 0 !important;
  width: auto !important;
  display: block !important;
}

/* Legend empty state */
.timeline-legend-empty {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  padding: 8px 10px;
  font-style: italic;
}

/* Responsive - hide on smaller screens */
@media (max-width: 1100px) {
  .timeline-editor-fullwidth.horizontal-view.sidebar-left .timeline-legend {
    display: none !important;
  }

  .timeline-editor-fullwidth.horizontal-view.sidebar-left .timeline-items-area {
    display: block !important;
  }
}