/* Split Layout - Theme-agnostic split pane system
 * Works with any WordPress theme by wrapping content at runtime
 * ============================================= */

/* CSS Variables (configurable via admin settings) */
:root {
  --split-panel-width: 420px;
  --split-panel-min-width: 250px;
  --split-panel-max-width: 800px;
  --split-divider-width: 6px;
  --split-header-height: 56px;
  --split-admin-bar-height: 0px;
  --split-mobile-height: 50vh;
  --split-transition-duration: 300ms;
  --split-border-color: #e9ecef;
  --split-divider-color: #e9ecef;
  --split-divider-hover-color: #007bff;
  --split-panel-bg: #ffffff;
  --split-shadow: -2px 0 12px rgba(0, 0, 0, 0.08);
}

/* Admin bar compensation - 只需要考虑 admin bar 的高度 */
body.admin-bar {
  --split-admin-bar-height: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar {
    --split-admin-bar-height: 46px;
  }
}

/* =========================================
   1. Split Layout Wrapper (Desktop - CSS Grid)
   ========================================= */
@media screen and (min-width: 769px) {
  .split-layout-wrapper {
    display: grid;
    grid-template-columns: 1fr var(--split-divider-width) var(--split-panel-width);
    grid-template-rows: 1fr;
    min-height: calc(100vh - var(--split-admin-bar-height));
    width: 100%;
    position: relative;
    transition: grid-template-columns var(--split-transition-duration) ease;
  }

  /* Collapsed state - panel hidden */
  .split-layout-wrapper.split-layout-collapsed {
    grid-template-columns: 1fr 0 0;
  }

  .split-layout-wrapper.split-layout-collapsed .split-divider,
  .split-layout-wrapper.split-layout-collapsed .split-panel-container {
    display: none;
    width: 0;
    overflow: hidden;
  }

  /* Content pane */
  .split-layout-content {
    grid-column: 1;
    grid-row: 1;
    min-width: 0; /* Prevent grid blowout */
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Preserve original content styles */
  .split-layout-content > * {
    max-width: 100%;
  }

  /* Divider / Resize handle */
  .split-divider {
    grid-column: 2;
    grid-row: 1;
    width: var(--split-divider-width);
    background: var(--split-divider-color);
    cursor: col-resize;
    position: relative;
    transition: background-color 0.2s ease;
    user-select: none;
    touch-action: none;
  }

  .split-divider:hover,
  .split-divider.dragging {
    background: var(--split-divider-hover-color);
  }

  /* Divider visual indicator */
  .split-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 40px;
    background: currentColor;
    opacity: 0.3;
    border-radius: 2px;
    transition: opacity 0.2s;
  }

  .split-divider:hover::before,
  .split-divider.dragging::before {
    opacity: 0.6;
  }

  /* Expand hit area for easier dragging */
  .split-divider::after {
    content: '';
    position: absolute;
    top: 0;
    left: -8px;
    right: -8px;
    bottom: 0;
    cursor: col-resize;
  }

  /* Panel container - 从 admin bar 下方开始，与主题 header 平齐 */
  .split-panel-container {
    grid-column: 3;
    grid-row: 1;
    position: sticky;
    top: var(--split-admin-bar-height);
    height: calc(100vh - var(--split-admin-bar-height));
    overflow: hidden;
    background: var(--split-panel-bg);
    box-shadow: var(--split-shadow);
    display: flex;
    flex-direction: column;
  }

  /* Panel fills container */
  .split-panel-container .post-ai-chat-panel {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 100% !important;
    z-index: auto !important;
    box-shadow: none !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column;
  }

  /* Hide backdrop in desktop split mode */
  .split-layout-wrapper .post-ai-chat-backdrop {
    display: none !important;
  }
}

/* =========================================
   2. Mobile Layout (Flexbox Column)
   ========================================= */
@media screen and (max-width: 768px) {
  .split-layout-wrapper {
    display: flex;
    flex-direction: column;
    min-height: auto;
    width: 100%;
  }

  /* Content pane - above */
  .split-layout-content {
    order: 1;
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Hide divider on mobile - no drag resize */
  .split-divider {
    display: none !important;
  }

  /* Panel container - below content */
  .split-panel-container {
    order: 2;
    position: relative;
    top: auto;
    height: var(--split-mobile-height);
    max-height: 400px;
    min-height: 200px;
    overflow: hidden;
    background: var(--split-panel-bg);
    border-top: 1px solid var(--split-border-color);
    display: flex;
    flex-direction: column;
  }

  /* Collapsed state - hide panel */
  .split-layout-wrapper.split-layout-collapsed .split-panel-container {
    display: none;
  }

  /* Panel fills container on mobile */
  .split-panel-container .post-ai-chat-panel {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 100% !important;
    z-index: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column;
  }

  /* Mobile open state - override collapsed */
  body.split-layout-mobile-open .split-layout-wrapper .split-panel-container {
    display: flex !important;
  }

  body.split-layout-mobile-open .split-layout-wrapper .split-panel-container .post-ai-chat-panel {
    display: flex !important;
  }

  /* Hide backdrop in mobile stacked mode */
  .split-layout-wrapper .post-ai-chat-backdrop {
    display: none !important;
  }
}

/* =========================================
   3. Drag Resize States
   ========================================= */
/* During drag - prevent content selection */
body.split-resizing {
  cursor: col-resize !important;
  user-select: none !important;
}

body.split-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

body.split-resizing iframe {
  pointer-events: none !important;
}

/* Performance hint during drag */
.split-layout-wrapper.resizing {
  will-change: grid-template-columns;
}

/* =========================================
   4. Toggle Button (in collapsed state)
   ========================================= */
.split-toggle-btn {
  position: fixed;
  right: 16px;
  bottom: 80px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--split-divider-hover-color, #007bff);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, background-color 0.2s;
}

.split-toggle-btn:hover {
  transform: scale(1.05);
  background: #0056b3;
}

/* Hide toggle when panel is open */
.split-layout-wrapper:not(.split-layout-collapsed) ~ .split-toggle-btn,
body.split-layout-mobile-open .split-toggle-btn {
  display: none;
}

/* Also hide when floating toolbar exists */
body:has(.floating-toolbar) .split-toggle-btn {
  display: none;
}

/* =========================================
   5. Animation & Transitions
   ========================================= */
@media (prefers-reduced-motion: reduce) {
  .split-layout-wrapper,
  .split-divider,
  .split-panel-container,
  .split-toggle-btn {
    transition: none !important;
  }
}

/* Smooth panel open/close animation */
.split-panel-container {
  transition: opacity var(--split-transition-duration) ease;
}

.split-layout-collapsed .split-panel-container {
  opacity: 0;
}

/* =========================================
   6. Print Styles
   ========================================= */
@media print {
  .split-layout-wrapper {
    display: block !important;
  }

  .split-divider,
  .split-panel-container,
  .split-toggle-btn {
    display: none !important;
  }

  .split-layout-content {
    width: 100% !important;
  }
}

/* =========================================
   7. Floating Toolbar Position Adjustment
   ========================================= */
/* When split panel is open, move floating toolbar to the left of the panel */
@media screen and (min-width: 769px) {
  .split-layout-wrapper:not(.split-layout-collapsed) ~ .floating-toolbar,
  body:has(.split-layout-wrapper:not(.split-layout-collapsed)) .floating-toolbar {
    right: calc(var(--split-panel-width, 420px) + var(--split-divider-width, 6px) + 30px);
    transition: right var(--split-transition-duration, 0.3s) ease;
  }
}

/* =========================================
   8. Header Alignment - No longer needed
   ========================================= */
/*
 * Header 现在已被包装进 split-layout-content 中，
 * 会自动跟随内容区域宽度变化，无需额外的 CSS 调整。
 */