/* ========== 手机端（m.html） ========== */
body.mobile { overflow: hidden; height: 100vh; height: 100dvh; }

/* 主容器：纵向布局 */
body.mobile #app {
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh; background: var(--bg);
}

/* 顶部栏 */
#m-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--border); background: var(--bg-soft);
  flex-shrink: 0;
}
.m-icon-btn {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--panel); color: var(--text); font-size: 17px; cursor: pointer; flex-shrink: 0;
}
.m-title { flex: 1; min-width: 0; }
#conv-title { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#conv-sub { font-size: 11px; color: var(--text-faint); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-mode { display: flex; gap: 3px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 3px; flex-shrink: 0; }
.m-mode .mode-btn { border: none; background: transparent; color: var(--text-dim); padding: 6px 10px; border-radius: 8px; font-size: 15px; cursor: pointer; }
.m-mode .mode-btn.active { background: var(--accent); }

/* 主内容区 */
body.mobile #main { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 0; }
body.mobile #messages { flex: 1; overflow-y: auto; padding: 12px 10px; -webkit-overflow-scrolling: touch; }
body.mobile .msg { max-width: 100%; margin: 0 0 14px; padding: 0; }
body.mobile .msg.user .bubble { max-width: 88%; }
body.mobile .msg.assistant .body { padding: 12px 14px; }
body.mobile #empty-state { margin: 8vh auto 0; }
body.mobile .reasoning .reasoning-body { max-height: 40vh; }

/* 底部输入区 */
body.mobile #composer {
  padding: 8px 10px; padding-bottom: calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border); background: var(--bg-soft); flex-shrink: 0;
}
body.mobile #composer-inner { max-width: 100%; }
body.mobile .composer-foot { margin-top: 6px; }

/* 抽屉（侧滑菜单） */
#drawer-mask {
  position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
#drawer-mask.show { opacity: 1; visibility: visible; }
#drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 78%; max-width: 300px; z-index: 100;
  background: var(--bg-soft); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; transform: translateX(-102%);
  transition: transform .25s ease; box-shadow: 8px 0 30px rgba(0,0,0,.4);
}
#drawer.open { transform: translateX(0); }
.drawer-head { padding: 14px 14px 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.drawer-head .logo { padding-bottom: 0; }
.m-new-chat {
  padding: 8px 12px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--panel); color: var(--text); font-size: 13px; cursor: pointer; flex-shrink: 0;
}
#drawer .user-info { padding: 8px 16px 4px; }
#drawer .quota-info { padding: 0 16px 8px; }
.m-sec-title {
  font-size: 12px; color: var(--text-faint); font-weight: 600; letter-spacing: .5px;
  padding: 10px 16px 4px; display: flex; align-items: center; justify-content: space-between;
}
#drawer .skills-list { padding: 2px 8px; max-height: 30vh; overflow-y: auto; }
#drawer .skill-item { padding: 9px 10px; }
#drawer .conv-item { padding: 11px 10px; }
#drawer #conv-list { flex: 1; overflow-y: auto; padding: 4px 8px 8px; }
.drawer-foot { padding: 10px 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.m-switch-link { text-align: center; font-size: 12px; color: var(--text-faint); text-decoration: none; padding: 6px 0; }
.m-switch-link:active { color: var(--accent); }

/* 手机端登录弹窗适配 */
body.mobile #auth-view { padding: 20px; }
body.mobile .auth-card { width: 100%; max-width: 380px; }

/* 代码块横向滚动 */
body.mobile .msg .md pre { max-width: 100%; }