/* ============================================================================
 * 布局（Layout）
 *
 * 这里是整个"滚不动 / 输入框跑出屏幕"问题的根因所在。
 *
 * 规则：在一个 flex / grid 链条里，只要某一环要"内部滚动"，那么从根到这个
 * 可滚动元素之间的**每一环**都必须能收缩 —— 即 min-height: 0（纵向）
 * 和 min-width: 0（横向）。
 *
 * 因为 flex/grid 子项默认 min-height: auto，意思是"不许小于内容高度"，
 * 于是消息一多就把容器撑高、超出视口，而 body 又是 overflow: hidden，
 * 最终表现为：不能滚、底部输入框被推到屏幕外。
 * ==========================================================================*/

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;                 /* 只允许内部区域滚动 */
  background: var(--bg-app);
  color: var(--fg);
  font: 14px/1.55 -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei',
        'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background .18s var(--ease), color .18s var(--ease);
}

/* ---------- 外壳：三栏 ---------- */
.app {
  height: 100%;
  min-height: 0;                    /* ← 关键 1 */
  display: grid;
  grid-template-columns: var(--rail-w) var(--panel-w) minmax(0, 1fr);
  /*                                           ↑ 关键 2：minmax(0,1fr)
     用 1fr 时，列的最小宽度是 auto（= 内容宽度），长消息会把列撑宽；
     minmax(0,1fr) 才允许它收缩。 */
  grid-template-rows: minmax(0, 1fr);
}

.rail,
.panel,
.chat {
  min-height: 0;                    /* ← 关键 3：每栏都可压缩 */
  min-width: 0;
}

/* ---------- 最左图标栏 ---------- */
.rail {
  background: var(--bg-rail);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 0 14px;
  gap: 6px;
}

/* ---------- 左二列表 ---------- */
.panel {
  background: var(--bg-panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

.panel-scroll {
  flex: 1 1 0;                      /* basis 0 才肯收缩 */
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ---------- 右侧对话 ---------- */
.chat {
  background: var(--bg-app);
  display: flex;
  flex-direction: column;
  overflow: hidden;                 /* 兜底：任何溢出都在内部消化 */
  position: relative;
}

.chat-head { flex: none; height: var(--head-h); }

/* 消息区：唯一允许纵向滚动的区域 */
.timeline {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;      /* 滚到头不要带动外层 */
  scroll-behavior: auto;             /* 自己控制滚动时机，别用平滑 */
}

.composer { flex: none; }

/* ---------- 移动端 ---------- */
@media (max-width: 760px) {
  .app { grid-template-columns: var(--rail-w) minmax(0, 1fr); }

  .panel {
    position: absolute;
    top: 0; bottom: 0; left: var(--rail-w);
    width: var(--panel-w);
    z-index: var(--z-pop);
    transform: translateX(-100%);
    transition: transform .18s var(--ease);
    box-shadow: 2px 0 12px rgba(0, 0, 0, .2);
  }
  .panel.is-open { transform: none; }
}