* { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif; overflow: hidden; height: 100vh; height: 100dvh; background: var(--color-background); color: var(--color-text); }
  .app-shell { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }
  .topbar { height: var(--topbar); min-height: var(--topbar); background: var(--control-bg); backdrop-filter: var(--control-backdrop-filter); -webkit-backdrop-filter: var(--control-backdrop-filter); border-bottom: 1px solid var(--control-border-default); display: flex; align-items: center; padding: 0 16px; gap: 12px; flex-shrink: 0; }
  .chat-container { flex: 1; overflow-y: auto; scrollbar-gutter: stable; padding: 24px; min-height: 0; }
  .input-bar { padding: 16px 24px; background: var(--control-bg); backdrop-filter: var(--control-backdrop-filter); -webkit-backdrop-filter: var(--control-backdrop-filter); border-top: 1px solid var(--control-border-default); flex-shrink: 0; }
  ::-webkit-scrollbar { width: 8px; }
  ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-bg); border-radius: var(--control-radius-xs); }
  ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover-bg); }

  /* === 统一基础：sidebar fixed + transform === */
  .sidebar { background: var(--control-bg); backdrop-filter: var(--control-backdrop-filter); -webkit-backdrop-filter: var(--control-backdrop-filter); border-right: 1px solid var(--control-border-default); display: flex; flex-direction: column; position: fixed; left: 0; top: 0; width: var(--panel-drawer); height: 100vh; height: 100dvh; z-index: 100; overflow: hidden; transform: translateX(-100%); transition: transform var(--sys-motion-normal) ease; box-shadow: none; }
  .sidebar.open { transform: translateX(0); box-shadow: var(--control-shadow-floating); }
  .main-area { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: visible; height: 100vh; height: 100dvh; margin-left: 0; }

  /* === 桌面布局（UA=desktop）：三栏展开 === */
  body.desktop-layout .sidebar { width: var(--sidebar); transform: translateX(0); box-shadow: none; }
  body.desktop-layout .sidebar.collapsed { transform: translateX(-100%); }
  body.desktop-layout .main-area { margin-left: var(--sidebar); transition: margin-left 0.2s ease; }
  body.desktop-layout .main-area.sidebar-closed { margin-left: 0; }
  body.desktop-layout #sidebarToggleBtn { display: none !important; }
  body.desktop-layout #sidebarCloseBtn { display: inline-flex !important; }
  body.desktop-layout.sidebar-closed #sidebarToggleBtn { display: inline-flex !important; }
  body.desktop-layout.sidebar-closed #sidebarCloseBtn { display: none !important; }
  body.desktop-layout .drawer-overlay { display: none !important; }

  /* === 移动布局（UA=mobile）：drawer 模式 === */
  body.mobile-layout #sidebarToggleBtn { display: inline-flex !important; }
  body.mobile-layout #sidebarCloseBtn { display: inline-flex !important; }

  /* no-transition 保护：防止首次加载闪动 */
  .no-transition * { transition: none !important; animation: none !important; }
  body.mobile-layout .chat-container { padding: 12px 12px 10px; -webkit-overflow-scrolling: touch; }
  body.mobile-layout .topbar { padding: 0 8px; font-size: 12px; }
  body.mobile-layout .input-bar { padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
  body.mobile-layout .sidebar { background: var(--color-grouped); backdrop-filter: none; -webkit-backdrop-filter: none; }
  body.mobile-layout .sidebar-titlebar { background: var(--color-grouped); backdrop-filter: none; -webkit-backdrop-filter: none; }
  body.mobile-layout .sidebar-footer { background: var(--color-grouped); backdrop-filter: none; -webkit-backdrop-filter: none; padding: 8px; }
  body.mobile-layout .input-bar { background: var(--color-grouped); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .sidebar-header { padding: 0; flex-shrink: 0; }
  .sidebar-titlebar { height: var(--topbar); min-height: var(--topbar); padding: 0 14px; border-bottom: 1px solid var(--control-border-default); display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--control-bg); backdrop-filter: var(--control-backdrop-filter); -webkit-backdrop-filter: var(--control-backdrop-filter); }
  .sidebar-brand-title { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0; min-width: 0; font-size: 15px; font-weight: 400; line-height: 1.2; color: var(--control-color-muted); }
  .sidebar-header-actions { display: flex; align-items: center; gap: 4px; }
  .sidebar-new-btn { width: calc(100% - (var(--sidebar-content-pad) * 2) - var(--sidebar-scrollbar-gutter)); height: 28px; margin: 12px calc(var(--sidebar-content-pad) + var(--sidebar-scrollbar-gutter)) 10px var(--sidebar-content-pad); display: flex; align-items: center; justify-content: center; gap: 6px; }
  .session-search-wrap { padding: 0 calc(var(--sidebar-content-pad) + var(--sidebar-scrollbar-gutter)) 10px var(--sidebar-content-pad); }
  .session-search { width: 100%; height: 28px; border: 1px solid var(--input-border); border-radius: var(--input-radius); background: var(--input-bg-soft); color: var(--input-color); font: inherit; font-size: 13px; outline: none; padding: 0 12px; transition: var(--control-transition); }
  .session-search::placeholder { color: var(--input-placeholder); }
  .session-search:focus { background: var(--control-bg-raised); border-color: var(--input-border-focus); box-shadow: var(--input-focus-ring); }
  .sidebar-header + .session-list { padding-top: 10px; }
  .sidebar-footer { padding: 16px 14px; border-top: 1px solid var(--control-border-default); font-size: 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-shrink: 0; min-height: 61px; background: var(--control-bg); backdrop-filter: var(--control-backdrop-filter); -webkit-backdrop-filter: var(--control-backdrop-filter); }
  .sidebar-footer #modelStatus { display: flex; align-items: center; justify-content: flex-start; box-sizing: border-box; height: 28px; line-height: 1; cursor: pointer; border-radius: 8px; padding: 0 4px; transition: background .15s, color .15s; min-width: 0; flex: 1 1 auto; white-space: nowrap; overflow: hidden; }
  .sidebar-footer #modelStatus > span { display: inline-flex; align-items: center; height: 100%; line-height: 1; }
  .sidebar-footer #modelStatus .model-status-model { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar-footer #modelStatus .model-status-separator, .sidebar-footer #modelStatus .model-status-state { flex: 0 0 auto; white-space: nowrap; }
  .sidebar-footer #modelStatus:hover { background: var(--control-bg-hover); color: var(--control-color) !important; }
  .sidebar-footer-actions { display: flex; align-items: center; height: 28px; gap: 6px; flex-shrink: 0; }
  .sidebar-footer-actions .btn-xs { box-sizing: border-box; height: 28px; margin: 0; padding-top: 0; padding-bottom: 0; align-items: center; justify-content: center; line-height: 1; font-family: inherit; }
  #sidebarCloseBtn { display: none; }
  .sidebar-header h1 { font-size: 16px; font-weight: 700; color: var(--color-text); }
  .session-list { flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--sidebar-content-pad); scrollbar-gutter: stable; }
  .session-list-actions { padding: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; }
  .session-list-actions .btn-xs { height: 28px; padding-top: 0; padding-bottom: 0; line-height: 1; }
  .session-item { padding: 11px 12px; border-radius: var(--session-card-radius); cursor: pointer; font-size: 13px; margin-bottom: 6px; transition: background .15s, border-color .15s; position: relative; color: var(--control-text); background: var(--control-surface-soft); border: 1px solid var(--control-border); }
  .session-item:hover { background: var(--control-surface-raised); border-color: var(--control-border-strong); }
  .session-item.active { background: var(--control-active-bg); border: 1px solid var(--control-border-strong); color: var(--control-primary); }
  .session-item .meta { font-size: 11px; line-height: 16px; color: var(--color-muted); margin-top: 2px; }
  .session-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; }
  .session-meta-row > span:first-child { display: inline-flex; align-items: center; min-width: 0; height: 20px; }
  .session-inline-actions { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; height: 20px; }
  .session-item .meta .session-flag { font-weight: 500; color: inherit; }
  .session-item .meta .session-flag-storm { color: inherit; }
  .session-conflict-badge { display: inline-flex; align-items: center; justify-content: center; height: 16px; padding: 0 6px; border-radius: var(--conflict-badge-radius); background: var(--conflict-badge-bg); color: var(--conflict-badge-color); border: 1px solid var(--conflict-badge-border); font-size: 10px; font-weight: 700; margin-right: 4px; vertical-align: middle; }
  .session-item.active .meta { color: var(--control-primary); opacity: 0.7; }
  .session-item .star-btn, .session-item .session-sync-btn, .session-item .rename-btn, .session-item .delete-btn { width: 20px; height: 20px; border-radius: 50%; border: none; background: transparent; color: var(--session-icon-color); cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; transform: none; }
  .session-item .delete-btn { position: relative; font-size: 14px; font-weight: 400; line-height: 20px; opacity: var(--session-icon-inactive-opacity); }
  .session-item .star-btn { font-size: 12px; line-height: 20px; opacity: var(--session-icon-inactive-opacity); }
  .session-item .star-btn.starred { display: flex; opacity: 1; color: var(--session-icon-active-color); background: var(--session-icon-active-bg); -webkit-text-fill-color: var(--session-icon-active-color); }
  .session-item .session-sync-btn { font-family: inherit; font-size: 14px; font-weight: 400; line-height: 20px; opacity: var(--session-icon-inactive-opacity); background: transparent; color: var(--session-icon-color); text-shadow: none; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0.8px currentColor; }
  .session-item .session-sync-btn.synced { opacity: 1; background: var(--session-icon-active-bg); color: var(--session-icon-active-color); -webkit-text-fill-color: var(--session-icon-active-color); -webkit-text-stroke: 0; }
  .session-item .session-sync-btn:disabled { opacity: 0.28; cursor: not-allowed; }
  .session-item .rename-btn { font-size: 11px; font-weight: 700; line-height: 20px; opacity: 0.7; }
  .session-item:hover .star-btn, .session-item:hover .session-sync-btn, .session-item:hover .rename-btn, .session-item:hover .delete-btn { opacity: 1; }
  /* 触摸设备（手机/平板）：始终显示操作按钮 */
  @media (hover: none) {
    .session-item .star-btn, .session-item .session-sync-btn, .session-item .rename-btn, .session-item .delete-btn { opacity: 0.5; }
    .session-item .star-btn.starred { opacity: 1; }
    .session-item .star-btn:hover { opacity: 1; }
    .session-item .session-sync-btn:hover { opacity: 1; }
    .session-item .rename-btn:hover { opacity: 1; }
    .session-item .delete-btn:hover { opacity: 1; }
    .session-item.active .star-btn { opacity: 1; background: var(--control-active-bg); }
    .session-item.active .star-btn.starred { background: var(--session-icon-active-bg); }
    .session-item.active .session-sync-btn { opacity: 1; }
    .session-item.active .session-sync-btn.synced { background: var(--session-icon-active-bg); }
    .session-item.active .rename-btn { opacity: 1; background: var(--control-active-bg); color: var(--control-primary); }
    .session-item.active .delete-btn { opacity: 1; background: var(--control-active-bg); color: var(--control-primary); }
  }
  .session-item .star-btn:hover { background: var(--session-icon-hover-bg); color: var(--session-icon-active-color); }
  .session-item .session-sync-btn:hover { background: var(--session-icon-hover-bg); color: var(--session-icon-active-color); }
  .session-item .rename-btn:hover { background: var(--control-bg-hover); color: var(--control-color); }
  .session-item .delete-btn:hover { background: var(--semantic-danger); color: #fff; }