/* =============================================
   layout.css — 主布局：三栏式自适应架构
   精致 SaaS · 留白充足 · 层次分明
   ============================================= */

/* ---------- 根容器 ---------- */
#app {
  display: flex;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* ---------- 左侧边栏 ---------- */
#sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  height: 100vh;
  background: var(--bg-secondary);
  border-right: var(--border-width-thin) solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  transition: margin-left var(--duration-slow) var(--ease-default),
              opacity var(--duration-slow) var(--ease-default);
  z-index: var(--z-sticky);
}

#sidebar.collapsed {
  margin-left: calc(var(--sidebar-width) * -1);
  opacity: 0;
}

/* ---------- 中间聊天区 ---------- */
#chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
  position: relative;
  background: transparent;
}

/* ---------- 右侧上下文面板 ---------- */
#context-panel {
  width: var(--context-panel-width);
  flex-shrink: 0;
  height: 100vh;
  background: var(--bg-secondary);
  border-left: var(--border-width-thin) solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  transition: margin-right var(--duration-slow) var(--ease-default),
              opacity var(--duration-slow) var(--ease-default);
  z-index: var(--z-sticky);
}

#context-panel.collapsed {
  margin-right: calc(var(--context-panel-width) * -1);
  opacity: 0;
}

/* ---------- 聊天头部（固定高度，不挤压） ---------- */
.chat-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding: 0 var(--padding-page);
  background: var(--gradient-header);
  backdrop-filter: var(--backdrop-blur-sm);
  -webkit-backdrop-filter: var(--backdrop-blur-sm);
  border-bottom: var(--border-width-thin) solid var(--border-subtle);
}

.chat-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

.chat-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

/* ---------- 消息容器 ---------- */
.messages-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-xl) var(--padding-page);
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* ---------- 输入区（固定底部） ---------- */
.input-area {
  flex-shrink: 0;
  padding: var(--space-sm) var(--padding-page) var(--space-md);
  background: linear-gradient(180deg, transparent 0%, var(--bg-primary) 38%);
}

/* ---------- 响应式：中屏（<= 1024px）---------- */
@media (max-width: 1024px) {
  :root {
    --context-panel-width: 280px;
  }
  #context-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: var(--z-fixed);
    box-shadow: var(--shadow-lg);
  }
}

/* ---------- 响应式：小屏（<= 768px）---------- */
@media (max-width: 768px) {
  :root {
    --sidebar-width: 250px;
  }

  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-overlay);
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    transition: transform var(--duration-slow) var(--ease-default);
  }

  #sidebar.mobile-open,
  #sidebar:not(.collapsed) {
    transform: translateX(0);
  }

  #chat-area {
    width: 100%;
  }

  .messages-container {
    padding: var(--space-md) var(--space-md);
  }

  .input-area {
    padding: var(--space-xs) var(--space-md) var(--space-sm);
  }

  #context-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100%;
    max-width: 100%;
    height: 60vh;
    max-height: 60vh;
    border-left: none;
    border-top: var(--border-width-thin) solid var(--border-subtle);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    transform: translateY(100%);
    transition: transform var(--duration-slow) var(--ease-spring);
    z-index: var(--z-overlay);
  }

  #context-panel.mobile-open,
  #context-panel:not(.collapsed) {
    transform: translateY(0);
  }

  .quick-actions-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--space-2xs);
  }

  .quick-actions-bar::-webkit-scrollbar {
    display: none;
  }
}

/* ---------- 超小屏（<= 480px）---------- */
@media (max-width: 480px) {
  :root {
    --sidebar-width: 230px;
    --padding-page: var(--space-md);
  }

  .messages-container {
    padding: var(--space-sm);
  }
}

/* ---------- 大屏优化（>= 1440px）---------- */
@media (min-width: 1440px) {
  :root {
    --sidebar-width: 272px;
    --context-panel-width: 312px;
  }
}

/* ---------- 超大屏优化（>= 1920px）---------- */
@media (min-width: 1920px) {
  :root {
    --sidebar-width: 290px;
    --context-panel-width: 340px;
    --chat-max-width: 880px;
  }
}

/* ---------- 遮罩层（移动端抽屉 / 弹出面板）---------- */
.sidebar-overlay,
.panel-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-scrim);
  backdrop-filter: var(--backdrop-blur-sm);
  -webkit-backdrop-filter: var(--backdrop-blur-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-default);
  z-index: calc(var(--z-overlay) - 1);
}

.sidebar-overlay.active,
.panel-overlay.active {
  opacity: 1;
  pointer-events: auto;
}