/* akong-chat-layout · Web 样式 · 用 var(--ak-*) 接 @akong/tokens
 *
 * 布局: flex-col · height: 100dvh · header (顶) + main (滚) + footer (底)
 * 不用 sticky · 用 flex 自然 layout · 避免跟 children sticky (如 ChatInput) 嵌套撞
 */

.ak-chat-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  background: var(--ak-bg);
  color: var(--ak-fg);
  font-family: var(--ak-font-sans);
  overflow: hidden;
}

.ak-chat-layout__header {
  flex: 0 0 auto;
  z-index: 10;
  background: var(--ak-bg);
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid var(--ak-border-subtle, var(--ak-border, rgba(0, 0, 0, 0.08)));
}

.ak-chat-layout__main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.ak-chat-layout__top-sentinel {
  height: 1px;
  width: 100%;
}

.ak-chat-layout__loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ak-space-2);
  padding: var(--ak-space-3);
  font-size: var(--ak-text-sm);
  color: var(--ak-fg-muted, var(--ak-fg-subtle));
}

.ak-chat-layout__spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: ak-chat-layout-spin 0.7s linear infinite;
}

@keyframes ak-chat-layout-spin {
  to {
    transform: rotate(360deg);
  }
}

.ak-chat-layout__footer {
  flex: 0 0 auto;
  z-index: 10;
  background: var(--ak-bg);
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--ak-border-subtle, var(--ak-border, rgba(0, 0, 0, 0.08)));
}