/* ==========================================================================
 * Demo Page - Common Styles (shared by both A/B variants)
 * ==========================================================================
 * Styles for the app mockup shell (window chrome, title bar, status bar),
 * right-click context menu, cycle button, and other shared demo elements.
 * ========================================================================== */

/* ---------- Demo section layout ---------- */
.demo-section {
  padding: var(--spacing-xl) 0;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- App Mockup Shell ---------- */
.demo-mockup {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  background: var(--background-primary);
  border: 1px solid var(--border-color);
}

/* Title bar (window chrome) */
.demo-mockup__titlebar {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 10px 16px;
  background: var(--gray-100);
  border-bottom: 1px solid var(--border-color);
  user-select: none;
  flex-shrink: 0; /* never shrink in fullscreen flex column */
}

.demo-mockup__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.demo-mockup__dot--close {
  background: var(--accent-red);
}

.demo-mockup__dot--minimize {
  background: var(--accent-yellow);
}

.demo-mockup__dot--maximize {
  background: var(--primary-green);
}

.demo-mockup__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 500;
  pointer-events: none;
  white-space: nowrap;
}

/* Main body area where variant content goes */
.demo-mockup__body {
  position: relative;
  min-height: 500px;
}

/* Variant wrapper fills the body */
[data-demo-variant] {
  display: contents;
}

[data-demo-variant][hidden] {
  display: none;
}

/* Status bar */
.demo-mockup__statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 16px;
  background: var(--gray-100);
  border-top: 1px solid var(--border-color);
  font-size: 0.7rem;
  color: var(--text-secondary);
  flex-shrink: 0; /* never shrink in fullscreen flex column */
}

/* ---------- Right-click Context Menu ---------- */
.demo-context-menu {
  display: none;
  position: absolute;
  min-width: 140px;
  background: var(--background-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  padding: 3px 0;
  z-index: 100;
  font-size: 0.78rem;
}

.demo-context-menu.is-visible {
  display: block;
}

.demo-context-menu__item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  cursor: pointer;
  color: var(--text-primary);
  transition: background var(--transition-fast);
}

.demo-context-menu__item:hover {
  background: var(--gray-100);
}

.demo-context-menu__group {
  padding: 1px 0;
}

.demo-context-menu__item--sub {
  padding-left: 24px;
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.demo-context-menu__item[disabled] {
  opacity: 0.4;
  pointer-events: none;
}

.demo-context-menu__item i {
  width: 14px;
  text-align: center;
  font-size: 0.72rem;
}

.demo-context-menu__separator {
  height: 1px;
  background: var(--border-color);
  margin: 2px 0;
}

/* ---------- Decorative link spans (non-navigable) ---------- */
.demo-msg__link {
  color: var(--secondary-blue);
  text-decoration: none;
  cursor: pointer;
}

/* Anchor links without href (used for data-doc-link, data-room-link, etc.) */
.demo-msg__bubble a:not([href]) {
  cursor: pointer;
}

/* ---------- Mode-based layout overrides ---------- */
body[data-demo-mode="focus"] .demo-sidebar {
  display: none;
}

body[data-demo-mode="focus"] .demo-content {
  flex: 1;
}

/* ---------- Cycle Button (Mode Switching) ---------- */
.demo-cycle-btn {
  margin: auto 0 8px;
  align-self: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--gray-300);
  background: var(--gray-50);
  color: var(--text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
  z-index: 50;
  flex-shrink: 0;
}

/* Focus mode — calm sage green (accent on border only, icon stays neutral) */
.demo-cycle-btn.mode-focus {
  border: 2px solid #8fbc9f;
  box-shadow: 0 0 0 3px rgba(143, 188, 159, 0.15);
}

.demo-cycle-btn.mode-focus i {
  color: #8fbc9f;
}

/* Icon transition for mode changes */
.demo-cycle-btn i {
  transition: color 0.25s ease;
}

/* Split mode — warm muted amber */
.demo-cycle-btn.mode-split {
  border: 2px solid #c9b06b;
  box-shadow: 0 0 0 3px rgba(201, 176, 107, 0.15);
}

.demo-cycle-btn.mode-split i {
  color: #c9b06b;
}

.demo-cycle-btn:hover {
  opacity: 0.85;
}

/* Icon morph animation: shrink out then grow in */
.demo-cycle-btn.is-morphing-out,
.demo-cycle-btn.is-morphing-out:hover {
  animation: cycle-morph-out 0.2s ease forwards;
  opacity: 1;
}

.demo-cycle-btn.is-morphing-in,
.demo-cycle-btn.is-morphing-in:hover {
  animation: cycle-morph-in 0.25s ease forwards;
  opacity: 1;
}

@keyframes cycle-morph-out {
  from { transform: scale(1) rotate(0deg); opacity: 1; }
  to   { transform: scale(0) rotate(-90deg); opacity: 0; }
}

@keyframes cycle-morph-in {
  from { transform: scale(0) rotate(90deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Legacy spin kept for backwards compat */
.demo-cycle-btn.is-spinning,
.demo-cycle-btn.is-spinning:hover {
  animation: cycle-spin 0.35s ease forwards;
  opacity: 1;
}

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

/* ---------- Variant Switch Button (title bar) ---------- */
.demo-variant-switch {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--gray-50);
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  letter-spacing: 0.02em;
}

.demo-variant-switch:hover {
  background: var(--gray-200);
  color: var(--text-primary);
  border-color: var(--gray-400);
}

.demo-mockup__titlebar {
  position: relative;
}

/* ---------- Search Overlay (macOS Spotlight style, Variant B only) ---------- */
.demo-search-overlay {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  max-width: 480px;
  z-index: 200;
  animation: search-overlay-in 0.2s ease forwards;
}

.demo-search-overlay[hidden] {
  display: none;
}

.demo-search-overlay__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--background-primary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(12px);
}

.demo-search-overlay__icon {
  color: var(--text-secondary);
  font-size: 0.9rem;
  flex-shrink: 0;
}

.demo-search-overlay__input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 0.85rem;
  color: var(--text-primary);
  outline: none;
}

.demo-search-overlay__input::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}

.demo-search-overlay__hints {
  display: flex;
  gap: 8px;
  font-size: 0.65rem;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.demo-search-overlay__hints kbd {
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background: var(--gray-100);
  font-family: inherit;
  font-size: 0.6rem;
}

@keyframes search-overlay-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* ---------- Remove green focus outline from demo interactive elements ---------- */
.demo-section a:focus:not(:focus-visible),
.demo-section a:active,
.demo-section button:focus:not(:focus-visible),
.demo-mockup a:focus:not(:focus-visible),
.demo-mockup a:active {
  outline: none;
  box-shadow: none;
}

/* ---------- Collapsible sidebar labels ---------- */
.demo-sidebar__label i {
  transition: transform 0.2s ease;
}

/* ---------- Side Module: empty state ---------- */
.demo-side-module__empty {
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-align: center;
  padding: 16px 8px;
  opacity: 0.7;
}

/* ---------- Side Module: clickable card hover ---------- */
.demo-side-module__card--clickable {
  cursor: pointer;
}
.demo-side-module__card--clickable:hover .demo-side-module__card-name {
  text-decoration: underline;
}