@co0ontty/wand 0.3.0 → 0.4.0

package/dist/web-ui/content/styles.css

@@ -100,7 +100,6 @@
       /* ===== 布局尺寸 ===== */
       --sidebar-width: 300px;
       --file-panel-width: 320px;
-      --topbar-height: 52px;
 
       /* ===== 高级缓动函数 ===== */
       --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
@@ -121,6 +120,54 @@
       }
     }
 
+    /* ===== PWA 独立窗口模式 ===== */
+    @media (display-mode: standalone) {
+      .floating-sidebar-toggle {
+        top: max(10px, env(safe-area-inset-top, 10px));
+      }
+      .app-container {
+        --pwa-top-inset: env(safe-area-inset-top, 0px);
+        padding-top: env(safe-area-inset-top, 0px);
+        padding-bottom: env(safe-area-inset-bottom, 0px);
+      }
+      .sidebar-header {
+        padding-top: calc(14px + env(safe-area-inset-top, 0px));
+      }
+      .main-content {
+        padding-top: 0;
+      }
+    }
+
+    /* iOS Safari PWA fallback (navigator.standalone adds .is-pwa via JS) */
+    .is-pwa .floating-sidebar-toggle {
+      top: max(10px, env(safe-area-inset-top, 10px));
+    }
+    .is-pwa .app-container {
+      --pwa-top-inset: env(safe-area-inset-top, 0px);
+      padding-top: env(safe-area-inset-top, 0px);
+      padding-bottom: env(safe-area-inset-bottom, 0px);
+    }
+    .is-pwa .sidebar-header {
+      padding-top: calc(14px + env(safe-area-inset-top, 0px));
+    }
+
+    /* ===== PWA 窗口控件覆盖模式 (Window Controls Overlay) ===== */
+    @media (display-mode: window-controls-overlay) {
+      .floating-sidebar-toggle {
+        top: max(10px, env(titlebar-area-y, 10px));
+        left: max(10px, env(titlebar-area-x, 10px));
+      }
+    }
+
+    /* ===== 首帧过渡抑制 ===== */
+    html.no-transition,
+    html.no-transition *,
+    html.no-transition *::before,
+    html.no-transition *::after {
+      transition: none !important;
+      animation: none !important;
+    }
+
     /* ===== 全局重置 ===== */
     * { box-sizing: border-box; margin: 0; padding: 0; }
 
@@ -142,6 +189,8 @@
       color: var(--text-primary);
       min-height: 100vh;
       min-height: 100dvh;
+      height: 100vh;
+      height: 100dvh;
       line-height: var(--line-height-base);
       overflow: hidden;
     }
@@ -183,8 +232,6 @@
 
     /* ===== 应用容器 ===== */
     .app-container {
-      --layout-topbar-height: var(--topbar-height);
-      --layout-sidebar-offset: var(--layout-topbar-height);
       --layout-main-file-panel-width: var(--file-panel-width);
       display: flex;
       flex-direction: column;
@@ -195,107 +242,44 @@
       overflow: hidden;
     }
 
-    /* ===== 顶栏组件 ===== */
-    .topbar {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 12px;
-      min-height: var(--topbar-height);
-      padding: 0 16px;
-      background: rgba(255, 251, 245, 0.85);
-      border-bottom: 1px solid var(--border-subtle);
-      backdrop-filter: blur(24px) saturate(180%);
-      flex-shrink: 0;
-      position: sticky;
-      top: 0;
-      z-index: 100;
-      transition: border-color var(--transition-fast), background var(--transition-fast);
-    }
-
-    .topbar::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 1px;
-      background: linear-gradient(90deg, transparent, rgba(197, 101, 61, 0.1), transparent);
-      opacity: 0;
-      transition: opacity var(--transition-fast);
-    }
-
-    .topbar:hover::before {
-      opacity: 1;
-    }
-
-    /* ===== 顶栏左侧区域 ===== */
-    .topbar-left {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      min-width: 0;
-    }
-
-    .topbar-logo {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .topbar-logo-icon {
-      width: 28px;
-      height: 28px;
-      background: linear-gradient(145deg, #d4785a 0%, #b8573a 50%, #a04a2e 100%);
-      border-radius: var(--radius-xs);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 12px;
-      color: white;
-      font-weight: 800;
-      box-shadow: 0 2px 8px rgba(184, 92, 55, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
-      letter-spacing: -0.02em;
-      flex-shrink: 0;
-      transition: transform var(--transition-fast), box-shadow var(--transition-fast);
-    }
-
-    .topbar-logo-icon:hover {
-      transform: scale(1.05);
-      box-shadow: 0 4px 12px rgba(184, 92, 55, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
-    }
-
-    /* ===== 汉堡菜单按钮 ===== */
-    .sidebar-toggle-btn {
-      position: relative;
-      width: 32px;
-      height: 32px;
-      padding: 0 !important;
+    /* ===== 浮动侧栏切换按钮 ===== */
+    .floating-sidebar-toggle {
+      position: fixed;
+      top: max(10px, env(safe-area-inset-top, 10px));
+      left: 10px;
+      z-index: 200;
+      width: 34px;
+      height: 34px;
+      padding: 0;
       display: flex;
       align-items: center;
       justify-content: center;
-      background: transparent !important;
-      border: none !important;
-      border-radius: var(--radius-xs) !important;
+      background: rgba(255, 251, 245, 0.85);
+      border: 1px solid var(--border-subtle);
+      border-radius: var(--radius-sm);
       cursor: pointer;
+      backdrop-filter: blur(16px) saturate(180%);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
       transition: all var(--transition-fast);
     }
 
-    .sidebar-toggle-btn:hover {
-      background: rgba(150, 118, 85, 0.08) !important;
+    .floating-sidebar-toggle:hover {
+      background: rgba(255, 251, 245, 0.95);
+      box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
     }
 
-    .sidebar-toggle-btn.active {
-      background: rgba(197, 101, 61, 0.12) !important;
+    .floating-sidebar-toggle.active {
+      background: rgba(197, 101, 61, 0.1);
+      border-color: rgba(197, 101, 61, 0.2);
     }
 
-    .sidebar-toggle-btn:active {
-      transform: scale(0.95);
+    .floating-sidebar-toggle:active {
+      transform: scale(0.92);
     }
 
     .hamburger-icon {
-      width: 18px;
-      height: 14px;
+      width: 16px;
+      height: 12px;
       position: relative;
       display: flex;
       flex-direction: column;
@@ -308,188 +292,45 @@
       height: 2px;
       background: var(--text-secondary);
       border-radius: var(--radius-full);
-      transition: transform 0.3s var(--ease-out-expo), opacity 0.2s ease, background 0.15s ease, width 0.2s ease;
+      transition: transform 0.3s var(--ease-out-expo), opacity 0.2s ease, background 0.15s ease;
       transform-origin: center;
     }
 
-    .sidebar-toggle-btn:hover .hamburger-icon span {
+    .floating-sidebar-toggle:hover .hamburger-icon span {
       background: var(--text-primary);
     }
 
-    .sidebar-toggle-btn.active .hamburger-icon span:nth-child(1) {
-      transform: translateY(6px) rotate(45deg);
-      width: 100%;
+    .floating-sidebar-toggle.active .hamburger-icon span:nth-child(1) {
+      transform: translateY(5px) rotate(45deg);
     }
 
-    .sidebar-toggle-btn.active .hamburger-icon span:nth-child(2) {
+    .floating-sidebar-toggle.active .hamburger-icon span:nth-child(2) {
       opacity: 0;
       transform: scaleX(0);
-      width: 100%;
     }
 
-    .sidebar-toggle-btn.active .hamburger-icon span:nth-child(3) {
-      transform: translateY(-6px) rotate(-45deg);
-      width: 100%;
+    .floating-sidebar-toggle.active .hamburger-icon span:nth-child(3) {
+      transform: translateY(-5px) rotate(-45deg);
     }
 
-    .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
-    .status-dot.active { background: var(--success); box-shadow: 0 0 8px var(--success); }
-
-    /* Topbar center — session title */
-    .topbar-center {
-      flex: 1;
-      min-width: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 8px;
-      overflow: hidden;
-    }
-
-    .topbar-session-meta {
-      min-width: 0;
+    .topbar-logo-icon {
+      width: 22px;
+      height: 22px;
+      background: linear-gradient(145deg, #d4785a 0%, #b8573a 50%, #a04a2e 100%);
+      border-radius: var(--radius-xs);
       display: flex;
       align-items: center;
       justify-content: center;
-      gap: 8px;
-      overflow: hidden;
-    }
-
-    .topbar-title {
-      font-size: 0.75rem;
-      font-weight: 600;
-      color: var(--text-secondary);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      max-width: 300px;
-      font-family: var(--font-mono);
-    }
-
-    .topbar-terminal-info {
-      flex-shrink: 0;
-      white-space: nowrap;
-    }
-
-    .topbar-spacer {
-      height: 6px;
-      flex-shrink: 0;
-    }
-
-    @media (max-width: 768px) {
-      .topbar-session-meta {
-        max-width: 100%;
-      }
-
-      .topbar-terminal-info {
-        font-size: 0.5625rem;
-      }
-    }
-
-    @media (max-width: 640px) {
-      .topbar-center {
-        justify-content: flex-start;
-      }
-
-      .topbar-session-meta {
-        justify-content: flex-start;
-        gap: 6px;
-      }
-    }
-
-    @media (max-width: 390px) {
-      .topbar-terminal-info {
-        display: none;
-      }
-    }
-
-    .topbar-right {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      flex-shrink: 0;
-      min-width: 0;
-    }
-
-    /* ===== 顶栏新建会话按钮 ===== */
-    .topbar-new-btn {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      font-family: var(--font-sans);
-      font-size: 0.8125rem;
-      font-weight: 600;
+      font-size: 10px;
       color: white;
-      background: linear-gradient(135deg, var(--accent) 0%, #a95130 100%);
-      border: none;
-      border-radius: var(--radius-full);
-      padding: 0 16px;
-      height: 34px;
-      cursor: pointer;
-      transition: all 0.25s var(--ease-out-expo);
-      box-shadow: 0 2px 8px rgba(197, 101, 61, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
-      white-space: nowrap;
-      position: relative;
-      overflow: hidden;
-    }
-
-    .topbar-new-btn::before {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
-      opacity: 0;
-      transition: opacity 0.25s ease;
-    }
-
-    .topbar-new-btn::after {
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      width: 0;
-      height: 0;
-      border-radius: 50%;
-      background: rgba(255, 255, 255, 0.3);
-      transform: translate(-50%, -50%);
-      transition: width 0.6s ease, height 0.6s ease;
-    }
-
-    .topbar-new-btn:hover {
-      background: linear-gradient(135deg, var(--accent-hover) 0%, #b85c37 100%);
-      box-shadow: 0 4px 16px rgba(197, 101, 61, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
-      transform: translateY(-1px) scale(1.02);
-    }
-
-    .topbar-new-btn:hover::before {
-      opacity: 1;
-    }
-
-    .topbar-new-btn:active {
-      transform: translateY(0) scale(0.98);
-      box-shadow: 0 2px 6px rgba(197, 101, 61, 0.2);
-    }
-
-    .topbar-new-btn:active::after {
-      width: 200px;
-      height: 200px;
-    }
-
-    .topbar-new-btn:focus-visible {
-      outline: 2px solid var(--accent);
-      outline-offset: 3px;
-    }
-
-    .topbar-new-btn svg {
-      width: 14px;
-      height: 14px;
+      font-weight: 800;
+      box-shadow: 0 1px 4px rgba(184, 92, 55, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+      letter-spacing: -0.02em;
       flex-shrink: 0;
-      transition: transform 0.3s var(--ease-spring);
     }
 
-    .topbar-new-btn:hover svg {
-      transform: rotate(90deg) scale(1.1);
-    }
+    .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
+    .status-dot.active { background: var(--success); box-shadow: 0 0 8px var(--success); }
 
     .main-layout {
       display: flex;
@@ -499,14 +340,17 @@
       padding-left: 0;
       transition: padding-left var(--transition-normal);
     }
-    .main-layout.sidebar-open {
-      padding-left: min(var(--sidebar-width), calc(100vw - 20px));
+    /* .sidebar-open class toggled for semantic purposes only; sidebar overlays without resizing main layout */
+    .sidebar-open .input-panel {
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.2s ease;
     }
 
     /* ===== 抽屉背景遮罩 ===== */
     .drawer-backdrop {
       position: fixed;
-      top: var(--layout-sidebar-offset);
+      top: 0;
       left: 0;
       right: 0;
       bottom: 0;
@@ -527,7 +371,7 @@
     /* ===== 侧边栏组件 ===== */
     .sidebar {
       position: fixed;
-      top: var(--layout-sidebar-offset);
+      top: 0;
       left: 0;
       bottom: 0;
       z-index: 25;
@@ -574,6 +418,23 @@
       flex: 1;
     }
 
+    .sidebar-header-actions {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      flex-shrink: 0;
+    }
+
+    .sidebar-logout {
+      color: var(--text-muted);
+      opacity: 0.7;
+      transition: opacity var(--transition-fast), color var(--transition-fast);
+    }
+    .sidebar-logout:hover {
+      opacity: 1;
+      color: var(--text-secondary);
+    }
+
     .sidebar-title {
       font-size: 0.875rem;
       font-weight: 600;
@@ -879,7 +740,6 @@
     }
 
     .sidebar-intro {
-      padding: 12px 14px 0;
       font-size: 0.75rem;
       color: var(--text-secondary);
       flex-shrink: 0;
@@ -907,6 +767,65 @@
     .session-group { margin-bottom: 20px; }
     .session-group:last-child { margin-bottom: 0; }
 
+    .session-manage-bar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 12px;
+    }
+
+    .session-manage-bar.active {
+      flex-direction: column;
+      align-items: stretch;
+      gap: 8px;
+      padding: 10px 12px;
+      border: 1px solid var(--border-subtle);
+      border-radius: var(--radius-md);
+      background: var(--bg-surface);
+    }
+
+    .session-manage-summary {
+      font-size: 0.75rem;
+      color: var(--text-secondary);
+      font-weight: 600;
+    }
+
+    .session-manage-actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    .session-manage-toggle,
+    .session-manage-btn {
+      border: 1px solid var(--border-subtle);
+      background: var(--bg-surface);
+      color: var(--text-primary);
+      border-radius: var(--radius-md);
+      padding: 6px 10px;
+      font-size: 0.75rem;
+      font-weight: 600;
+      cursor: pointer;
+    }
+
+    .session-manage-btn.compact {
+      padding: 4px 8px;
+      font-size: 0.6875rem;
+      margin-left: 8px;
+    }
+
+    .session-manage-btn.danger,
+    .session-manage-toggle.danger {
+      color: #c84636;
+      border-color: rgba(200, 70, 54, 0.25);
+      background: rgba(200, 70, 54, 0.06);
+    }
+
+    .session-manage-btn:disabled {
+      opacity: 0.45;
+      cursor: not-allowed;
+    }
+
     .session-group-title {
       padding: 6px 8px 12px;
       font-size: 0.6875rem;
@@ -927,132 +846,297 @@
       border-radius: var(--radius-full);
     }
 
+    /* ===== Claude 历史会话 ===== */
+    .claude-history-toggle {
+      cursor: pointer;
+      user-select: none;
+      transition: color 0.15s ease;
+    }
+    .claude-history-toggle:hover {
+      color: var(--text-primary);
+    }
+    .claude-history-toggle .chevron {
+      display: inline-block;
+      transition: transform 0.2s ease;
+      font-size: 0.625rem;
+      margin-right: 2px;
+    }
+    .claude-history-toggle .history-count {
+      font-size: 0.625rem;
+      font-weight: 500;
+      color: var(--text-muted);
+      background: var(--bg-inset);
+      padding: 1px 6px;
+      border-radius: var(--radius-full);
+      margin-left: 4px;
+    }
+    .claude-history-loading {
+      padding: 12px 8px;
+      color: var(--text-muted);
+      font-size: 0.8125rem;
+      text-align: center;
+    }
+    .claude-history-directory-header {
+      margin-top: 6px;
+      cursor: pointer;
+      user-select: none;
+    }
+    .claude-history-directory-header .chevron {
+      font-size: 0.6rem;
+      margin-right: 2px;
+    }
+    .claude-history-directory-title {
+      font-size: 0.6rem;
+      padding: 4px 8px 4px;
+      opacity: 0.7;
+      justify-content: space-between;
+    }
+    .claude-history-directory-label {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .claude-history-directory-clear-btn {
+      opacity: 0.9;
+      flex-shrink: 0;
+    }
+    .claude-history-preview {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .claude-history-item {
+      opacity: 0.8;
+    }
+    .claude-history-item:hover {
+      opacity: 1;
+    }
+
     /* ===== 会话卡片项 ===== */
     .session-item {
       width: 100%;
       text-align: left;
       background: var(--bg-surface);
-      border: 1px solid var(--border-subtle);
-      border-radius: var(--radius-lg);
+      border: 1px solid transparent;
+      border-radius: var(--radius-md);
       color: var(--text-primary);
-      padding: 14px 16px;
+      padding: 10px 12px;
       cursor: pointer;
-      transition: all 0.3s var(--ease-out-expo);
+      transition: all 0.2s ease;
       font-family: var(--font-sans);
-      margin-bottom: 10px;
-      box-shadow: var(--shadow-xs);
+      margin-bottom: 4px;
       position: relative;
       overflow: hidden;
-      backdrop-filter: blur(8px);
     }
 
     .session-item::before {
       content: '';
       position: absolute;
       left: 0;
-      top: 0;
-      bottom: 0;
-      width: 4px;
-      background: linear-gradient(180deg, var(--accent), var(--accent-hover));
+      top: 4px;
+      bottom: 4px;
+      width: 3px;
+      background: var(--accent);
       opacity: 0;
       transform: scaleY(0);
-      transition: all 0.3s var(--ease-out-expo);
+      transition: all 0.2s ease;
       border-radius: var(--radius-full);
     }
 
-    .session-item::after {
-      content: '';
+    .session-item-row {
+      position: relative;
+      z-index: 1;
+    }
+
+    .session-item-content {
+      position: relative;
+      z-index: 2;
+      background: inherit;
+      transition: transform 0.3s var(--ease-out-expo);
+      will-change: transform;
+    }
+
+    .session-item.swiped .session-item-content {
+      transform: translateX(-72px);
+    }
+
+    .session-manage-check {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      width: 22px;
+      height: 22px;
+      margin-right: 8px;
+      position: relative;
+    }
+
+    .session-manage-check input {
       position: absolute;
       inset: 0;
-      background: radial-gradient(circle at 50% 0%, rgba(197, 101, 61, 0.06) 0%, transparent 70%);
       opacity: 0;
-      transition: opacity 0.3s ease;
+      cursor: pointer;
     }
 
-    .session-item:hover::after {
-      opacity: 1;
+    .session-manage-check span {
+      width: 18px;
+      height: 18px;
+      border-radius: 6px;
+      border: 1px solid var(--border-subtle);
+      background: var(--bg-surface);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .session-manage-check input:checked + span {
+      background: var(--accent);
+      border-color: var(--accent);
+    }
+
+    .session-manage-check input:checked + span::after {
+      content: "✓";
+      color: #fff;
+      font-size: 0.75rem;
+      font-weight: 700;
+    }
+
+    .session-item.selected {
+      border-color: rgba(197, 101, 61, 0.35);
+      background: rgba(197, 101, 61, 0.08);
+    }
+
+    .session-item.selected::before {
+      opacity: 0.7;
+      transform: scaleY(1);
     }
 
     .session-item-row {
       display: flex;
       align-items: flex-start;
-      justify-content: space-between;
-      gap: 12px;
-      position: relative;
-      z-index: 1;
+    }
+
+    .session-delete-zone {
+      display: none;
+    }
+
+    .session-delete-btn {
+      display: none;
+    }
+
+    @keyframes session-delete-collapse {
+      to {
+        max-height: 0;
+        opacity: 0;
+        margin-bottom: 0;
+        padding-top: 0;
+        padding-bottom: 0;
+        border-width: 0;
+      }
+    }
+
+    .session-item.deleting {
+      animation: session-delete-collapse 0.3s ease-out forwards;
+      overflow: hidden;
+      max-height: 120px;
+      pointer-events: none;
     }
 
     .session-main {
       min-width: 0;
-      flex: 1;
       display: flex;
       flex-direction: column;
-      gap: 6px;
+      gap: 3px;
+      padding-right: 64px;
     }
 
     /* ===== 会话操作按钮 ===== */
     .session-actions {
+      position: absolute;
+      right: 0;
+      top: 0;
       display: inline-flex;
       align-items: center;
-      gap: 6px;
+      gap: 2px;
       flex-shrink: 0;
-      opacity: 0;
-      transform: translateX(8px);
-      transition: all 0.25s var(--ease-out-expo);
-    }
-
-    .session-item:hover .session-actions {
-      opacity: 1;
-      transform: translateX(0);
     }
 
     .session-action-btn {
-      width: 32px;
-      height: 32px;
-      min-height: 32px;
-      min-width: 32px;
+      width: 28px;
+      height: 28px;
+      min-height: 28px;
+      min-width: 28px;
       padding: 0;
-      border-radius: var(--radius-md);
+      border-radius: var(--radius-full);
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 0.875rem;
-      background: var(--bg-surface);
-      border: 1px solid var(--border-subtle);
-      transition: all 0.25s var(--ease-spring);
-      color: var(--text-secondary);
+      font-size: 0.8125rem;
+      background: transparent;
+      border: none;
+      transition: all 0.2s ease;
+      color: var(--text-muted);
+      cursor: pointer;
     }
 
     .session-action-btn:hover {
-      background: var(--accent-muted);
-      border-color: var(--accent);
+      background: rgba(150, 118, 85, 0.1);
       color: var(--accent);
-      transform: scale(1.12);
-      box-shadow: 0 4px 12px rgba(197, 101, 61, 0.25);
     }
 
     .session-action-btn:active {
-      transform: scale(0.95);
+      transform: scale(0.9);
       transition-duration: 0.1s;
     }
 
+    .session-action-btn svg {
+      flex-shrink: 0;
+    }
+
+    /* Delete icon button in actions */
+    .session-action-btn.delete-btn:hover {
+      background: rgba(231, 76, 60, 0.08);
+      color: #d35244;
+    }
+
+    /* PC: hover to show action buttons */
+    @media (hover: hover) {
+      .session-item .session-actions {
+        opacity: 0;
+        transition: opacity 0.15s ease;
+      }
+      .session-item:hover .session-actions,
+      .session-item.active .session-actions,
+      .session-item.swiped .session-actions {
+        opacity: 1;
+      }
+      /* Running sessions always show resume */
+      .session-item .session-actions:has(.session-action-btn[data-action="resume"]) {
+        opacity: 1;
+      }
+    }
+
+    @media (hover: none) {
+      .session-item .session-actions {
+        opacity: 1;
+      }
+    }
+
     /* ===== 会话卡片交互效果 ===== */
     .session-item:hover {
-      background: rgba(255, 252, 248, 0.98);
-      border-color: var(--accent-soft);
-      transform: translateY(-3px);
-      box-shadow: var(--shadow-md);
+      background: rgba(150, 118, 85, 0.06);
+      border-color: var(--border-subtle);
     }
 
     .session-item:hover::before {
-      opacity: 1;
+      opacity: 0.5;
       transform: scaleY(1);
     }
 
     .session-item.active {
-      background: linear-gradient(135deg, rgba(241, 214, 194, 0.5) 0%, rgba(255, 247, 239, 0.9) 100%);
-      border-color: var(--accent);
-      box-shadow: 0 4px 16px rgba(197, 101, 61, 0.15);
+      background: rgba(197, 101, 61, 0.08);
+      border-color: rgba(197, 101, 61, 0.2);
     }
 
     .session-item.active::before {
@@ -1061,7 +1145,7 @@
     }
 
     .session-item:active {
-      transform: scale(0.98);
+      transform: scale(0.99);
       transition-duration: 0.1s;
     }
 
@@ -1148,6 +1232,27 @@
       background: rgba(255, 251, 245, 0.7);
     }
 
+    .sidebar-footer-actions {
+      display: flex;
+      justify-content: center;
+      gap: 4px;
+    }
+
+    .sidebar-footer-actions .btn {
+      flex: 1;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+      font-size: 0.75rem;
+      color: var(--text-secondary);
+    }
+
+    .sidebar-footer-actions .btn:hover {
+      color: var(--text-primary);
+      background: var(--bg-tertiary);
+    }
+
     .sidebar-meta {
       display: flex;
       flex-direction: row;
@@ -1467,30 +1572,43 @@
 
     .terminal-container.active {
       display: flex;
+      align-items: stretch;
     }
 
-    .terminal-container:focus-within {
-      border-color: rgba(197, 101, 61, 0.5);
-      box-shadow:
-        inset 0 1px 0 rgba(255, 255, 255, 0.08),
-        0 8px 32px rgba(0, 0, 0, 0.4),
-        0 0 0 2px rgba(197, 101, 61, 0.15);
+    .terminal-container > #output {
+      flex: 1;
+      min-height: 0;
+      position: relative;
     }
 
-    .terminal-container .xterm {
+    .terminal-container > #output .xterm {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
-      padding: 6px;
+    }
+
+    .terminal-container > #output .xterm-viewport {
+      background: transparent !important;
     }
 
     .terminal-container .xterm-viewport {
       background: transparent !important;
     }
 
-    /* ===== 终端缩放手柄 ===== */
+    .terminal-container .xterm {
+      padding: 0;
+    }
+
+    .terminal-container:focus-within {
+      border-color: rgba(197, 101, 61, 0.5);
+      box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.08),
+        0 8px 32px rgba(0, 0, 0, 0.4),
+        0 0 0 2px rgba(197, 101, 61, 0.15);
+    }
+
     .terminal-resize-handle {
       position: absolute;
       bottom: 3px;
@@ -1654,6 +1772,50 @@
       padding: 0 3px;
     }
 
+    .terminal-scale-overlay-divider {
+      width: 1px;
+      height: 14px;
+      background: rgba(245, 234, 220, 0.2);
+      margin: 0 2px;
+    }
+
+    .terminal-jump-bottom {
+      position: absolute;
+      right: 14px;
+      bottom: 18px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      min-width: 78px;
+      height: 32px;
+      padding: 0 12px;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 999px;
+      background: rgba(24, 20, 17, 0.72);
+      color: rgba(255, 247, 239, 0.92);
+      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
+      backdrop-filter: blur(10px);
+      cursor: pointer;
+      z-index: 13;
+      opacity: 0;
+      transform: translateY(8px);
+      pointer-events: none;
+      transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
+    }
+    .terminal-jump-bottom.visible {
+      opacity: 1;
+      transform: translateY(0);
+      pointer-events: auto;
+    }
+    .terminal-jump-bottom:hover {
+      background: rgba(38, 30, 24, 0.84);
+      border-color: rgba(214, 123, 82, 0.28);
+    }
+    .terminal-jump-bottom:active {
+      transform: translateY(1px);
+    }
+
     /* Terminal interactive mode indicator */
     .terminal-container.interactive {
       border-color: rgba(79, 122, 88, 0.5);
@@ -1812,151 +1974,93 @@
     }
 
     /* Keyboard toggle button and popup */
-    .keyboard-toggle-btn {
-      width: 36px;
-      height: 36px;
-      border-radius: 8px;
-      border: 1px solid rgba(125, 91, 57, 0.2);
-      background: rgba(255, 255, 255, 0.7);
-      color: var(--text-secondary);
-      cursor: pointer;
+    /* ===== 内联快捷键 ===== */
+    /* Desktop: show inline keys directly, hide toggle button and strip */
+    .inline-shortcuts-wrap {
       display: flex;
       align-items: center;
-      justify-content: center;
-      transition: all 0.15s ease;
-      flex-shrink: 0;
-      -webkit-tap-highlight-color: transparent;
-      user-select: none;
       position: relative;
+      flex-shrink: 0;
     }
-    .keyboard-toggle-btn:hover {
-      border-color: var(--accent-soft);
-      background: rgba(255, 255, 255, 0.9);
-      color: var(--text-primary);
-    }
-    .keyboard-toggle-btn:active {
-      background: var(--accent-soft);
-      border-color: var(--accent);
-      color: white;
-      transform: scale(0.95);
-    }
-    .keyboard-toggle-btn.active {
-      background: var(--accent-soft);
-      border-color: var(--accent);
-      color: white;
-    }
-    .keyboard-toggle-btn.hidden {
+    .shortcuts-toggle {
       display: none;
     }
-
-    /* Keyboard popup panel */
-    .keyboard-popup {
-      position: fixed;
-      bottom: calc(var(--keyboard-offset, 0px) + 160px);
-      right: 12px;
-      background: rgba(255, 252, 245, 0.98);
-      border: 1px solid rgba(125, 91, 57, 0.25);
-      border-radius: 12px;
-      padding: 10px;
-      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-      z-index: 2000;
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      min-width: 180px;
-    }
-    .keyboard-popup.hidden {
+    .inline-shortcuts-strip {
       display: none;
     }
-    .keyboard-popup-row {
+    .inline-shortcuts-inline {
       display: flex;
-      gap: 6px;
-      justify-content: center;
-    }
-    .keyboard-popup-row.modifiers {
-      justify-content: flex-start;
+      align-items: center;
+      gap: 3px;
+      flex-shrink: 0;
     }
-    .keyboard-popup-row.actions {
-      flex-wrap: wrap;
+
+    .shortcut-sep {
+      color: var(--text-muted);
+      font-size: 0.625rem;
+      opacity: 0.5;
+      margin: 0 1px;
+      user-select: none;
     }
 
-    /* Popup keyboard keys */
-    .kp-key {
-      min-width: 40px;
-      height: 32px;
-      border-radius: 6px;
-      border: 1px solid rgba(125, 91, 57, 0.25);
-      background: rgba(255, 255, 255, 0.85);
-      color: var(--text-secondary);
-      font-size: 0.8rem;
+    .shortcut-key {
+      height: 20px;
+      min-width: 20px;
+      border-radius: 3px;
+      border: 1px solid rgba(125, 91, 57, 0.12);
+      background: rgba(255, 255, 255, 0.5);
+      color: var(--text-muted);
+      font-size: 0.5625rem;
       font-family: var(--font-mono);
       font-weight: 500;
       cursor: pointer;
-      display: flex;
+      display: inline-flex;
       align-items: center;
       justify-content: center;
-      transition: all 0.15s ease;
-      padding: 0 8px;
+      transition: all 0.12s ease;
+      padding: 0 4px;
       flex-shrink: 0;
       -webkit-tap-highlight-color: transparent;
       user-select: none;
+      line-height: 1;
     }
-    .kp-key:hover {
-      border-color: var(--accent-soft);
-      background: rgba(255, 255, 255, 0.95);
-      color: var(--text-primary);
+
+    .shortcut-key:hover {
+      border-color: rgba(125, 91, 57, 0.3);
+      background: rgba(255, 255, 255, 0.85);
+      color: var(--text-secondary);
     }
-    .kp-key:active {
+
+    .shortcut-key:active {
       background: var(--accent-soft);
       border-color: var(--accent);
       color: white;
-      transform: scale(0.95);
+      transform: scale(0.93);
     }
-    .kp-key.active {
-      background: var(--accent-soft);
+
+    .shortcut-key.active {
+      background: rgba(197, 101, 61, 0.15);
       border-color: var(--accent);
-      color: white;
-      box-shadow: 0 0 0 2px rgba(197, 101, 61, 0.15);
-    }
-    .kp-action {
-      min-width: 50px;
-      flex: 1;
+      color: var(--accent);
     }
-    .kp-escape {
-      color: #c07070;
+
+    .shortcut-key.shortcut-dir {
+      min-width: 18px;
+      padding: 0 2px;
+      font-size: 0.625rem;
     }
-    .kp-escape:hover {
-      color: #a05050;
+
+    .shortcut-key[data-key="escape"] {
+      color: #b06060;
     }
-    .kp-key[data-key="enter"] {
+    .shortcut-key[data-key="enter"] {
       color: #4a7c59;
     }
-    .kp-key[data-key="ctrl_enter"] {
+    .shortcut-key[data-key="ctrl_enter"] {
       color: var(--accent);
       font-weight: 600;
     }
 
-    /* Direction keys grid layout - cross shape */
-    .kp-dir-grid {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 4px;
-    }
-    .kp-dir-up {
-      display: flex;
-      justify-content: center;
-    }
-    .kp-dir-lr {
-      display: flex;
-      gap: 4px;
-    }
-    .kp-dir {
-      min-width: 36px;
-      height: 36px;
-      font-size: 1rem;
-    }
-
     /* Mobile keyboard overlap compensation */
     @media (max-width: 640px) {
       .mini-keyboard {
@@ -1998,6 +2102,7 @@
       gap: 16px;
       padding: 20px 4px 12px;
       min-height: 0;
+      scrollbar-gutter: stable;
     }
 
     /* ===== 消息动画 ===== */
@@ -3151,7 +3256,7 @@
     .token-type { color: #d5a35b; }
 
     .input-panel {
-      padding: 8px 12px;
+      padding: 6px 10px;
       flex-shrink: 0;
       z-index: 26;
       overscroll-behavior: contain;
@@ -3161,7 +3266,7 @@
     .input-composer {
       background: rgba(255, 255, 255, 0.85);
       border: 1px solid var(--border-default);
-      border-radius: 16px;
+      border-radius: 14px;
       transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
       overflow: hidden;
       position: relative;
@@ -3169,34 +3274,125 @@
     }
     .input-composer:focus-within {
       border-color: var(--accent);
-      box-shadow: 0 0 0 3px var(--accent-muted), 0 0 24px rgba(197, 101, 61, 0.1);
+      box-shadow: 0 0 0 2px var(--accent-muted), 0 0 16px rgba(197, 101, 61, 0.08);
       background: rgba(255, 255, 255, 0.98);
     }
     .input-composer-bar {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 3px 5px 5px 8px;
-      gap: 6px;
+      padding: 2px 4px 3px 6px;
+      gap: 4px;
+    }
+    .input-composer-left {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      flex-wrap: nowrap;
+      flex-shrink: 0;
+    }
+
+    /* Permission actions inline in composer bar */
+    .permission-actions {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      animation: permission-fade-in 0.2s ease-out;
+    }
+    .permission-actions.hidden {
+      display: none;
+    }
+    .permission-actions-divider {
+      width: 1px;
+      height: 16px;
+      background: var(--border);
+      margin: 0 2px;
+    }
+    .permission-actions-label {
+      font-size: 0.7rem;
+      color: #d18b00;
+      max-width: 180px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .btn-permission {
+      font-size: 0.65rem;
+      padding: 1px 8px;
+      border-radius: 4px;
+      border: 1px solid transparent;
+      cursor: pointer;
+      line-height: 1.4;
+      font-weight: 500;
+      transition: background 0.15s, border-color 0.15s;
+    }
+    .btn-permission:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    .btn-permission-approve {
+      background: rgba(240, 165, 0, 0.15);
+      color: #d18b00;
+      border-color: rgba(240, 165, 0, 0.3);
+    }
+    .btn-permission-approve:hover:not(:disabled) {
+      background: rgba(240, 165, 0, 0.25);
+    }
+    .btn-permission-deny {
+      background: transparent;
+      color: var(--text-muted);
+      border-color: var(--border);
+    }
+    .btn-permission-deny:hover:not(:disabled) {
+      background: rgba(220, 50, 50, 0.08);
+      color: var(--danger);
+      border-color: rgba(220, 50, 50, 0.3);
+    }
+    @keyframes permission-fade-in {
+      from { opacity: 0; transform: translateX(-4px); }
+      to { opacity: 1; transform: translateX(0); }
+    }
+
+    .composer-interactive-toggle {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 22px;
+      height: 22px;
+      border: 1px solid var(--border-subtle);
+      border-radius: 4px;
+      background: transparent;
+      color: var(--text-muted);
+      font-size: 0.75rem;
+      cursor: pointer;
+      transition: all var(--transition-fast);
+      flex-shrink: 0;
+      padding: 0;
+    }
+    .composer-interactive-toggle:hover {
+      background: rgba(197, 101, 61, 0.08);
+      color: var(--text-secondary);
+      border-color: var(--accent);
     }
-    .input-composer-left {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      flex-wrap: wrap;
+    .composer-interactive-toggle.active {
+      background: rgba(197, 101, 61, 0.12);
+      color: var(--accent);
+      border-color: var(--accent);
     }
     .input-composer-right {
       display: flex;
       align-items: center;
-      gap: 6px;
+      gap: 4px;
       position: relative;
+      flex: 1;
+      justify-content: flex-end;
     }
     .queue-counter {
-      font-size: 0.6875rem;
+      font-size: 0.625rem;
       color: var(--accent);
       background: var(--accent-muted);
-      padding: 2px 8px;
-      border-radius: 10px;
+      padding: 1px 6px;
+      border-radius: 8px;
       white-space: nowrap;
       font-weight: 600;
       animation: queuePulse 1.5s ease-in-out infinite;
@@ -3208,27 +3404,28 @@
     }
 
     .input-hint {
-      font-size: 0.625rem;
+      font-size: 0.5625rem;
       color: var(--text-muted);
       white-space: nowrap;
       user-select: none;
+      opacity: 0.7;
     }
 
     /* Session info bar at bottom of input composer */
     .input-session-info-bar {
       display: flex;
       align-items: center;
-      gap: 6px;
-      padding: 6px 10px;
-      background: rgba(245, 240, 230, 0.6);
+      gap: 5px;
+      padding: 3px 8px;
+      background: rgba(245, 240, 230, 0.5);
       border-top: 1px solid var(--border-subtle);
-      font-size: 0.75rem;
+      font-size: 0.6875rem;
       color: var(--text-secondary);
     }
     .session-cwd-display {
       font-weight: 500;
       color: var(--text-primary);
-      max-width: 200px;
+      max-width: 180px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -3243,6 +3440,30 @@
       color: var(--border-default);
       opacity: 0.6;
     }
+    .claude-session-id-badge {
+      font-family: var(--font-mono);
+      font-size: 0.6875rem;
+      color: var(--text-muted);
+      background: rgba(150, 118, 85, 0.1);
+      padding: 2px 6px;
+      border-radius: 4px;
+      cursor: pointer;
+      user-select: none;
+      transition: all var(--transition-fast);
+      border: 1px solid transparent;
+    }
+    .claude-session-id-badge:hover {
+      color: var(--accent);
+      background: rgba(197, 101, 61, 0.1);
+      border-color: rgba(197, 101, 61, 0.2);
+    }
+    .claude-session-id-badge:active {
+      transform: scale(0.95);
+    }
+    .claude-session-id-badge.copied {
+      color: var(--success);
+      background: rgba(106, 165, 76, 0.1);
+    }
 
     .input-row { display: flex; gap: 8px; align-items: flex-end; max-width: 100%; }
     .input-field { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 100%; }
@@ -3782,14 +4003,14 @@
     .input-textarea {
       --input-max-height: 120px;
       font-family: var(--font-mono);
-      font-size: 0.875rem;
+      font-size: 0.8125rem;
       background: transparent;
       border: none;
       color: var(--text-primary);
-      padding: 10px 12px 4px;
+      padding: 8px 10px 3px;
       outline: none;
       resize: none;
-      min-height: 36px;
+      min-height: 32px;
       max-height: var(--input-max-height);
       width: 100%;
       overflow-y: hidden;
@@ -3832,26 +4053,25 @@
     /* Chat mode select pill */
     .chat-mode-select {
       font-family: var(--font-sans);
-      font-size: 0.6875rem;
+      font-size: 0.625rem;
       font-weight: 500;
-      padding: 2px 8px;
-      border-radius: 12px;
+      padding: 1px 16px 1px 6px;
+      border-radius: 10px;
       border: 1px solid var(--border-subtle);
       background: rgba(246, 241, 232, 0.7);
       color: var(--text-secondary);
       cursor: pointer;
       transition: all var(--transition-fast);
-      min-height: 24px;
-      max-width: 100px;
+      min-height: 22px;
+      max-width: 90px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       appearance: none;
       -webkit-appearance: none;
-      padding-right: 18px;
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239a8e82' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' fill='none'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%239a8e82' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
       background-repeat: no-repeat;
-      background-position: right 5px center;
+      background-position: right 4px center;
     }
     .chat-mode-select:hover {
       border-color: var(--accent);
@@ -3865,9 +4085,9 @@
 
     /* Circular action buttons */
     .btn-circle {
-      width: 34px;
-      height: 34px;
-      min-width: 34px;
+      width: 28px;
+      height: 28px;
+      min-width: 28px;
       border-radius: 50%;
       border: none;
       display: inline-flex;
@@ -3881,11 +4101,11 @@
     .btn-circle-send {
       background: linear-gradient(180deg, var(--accent) 0%, #a8522f 100%);
       color: white;
-      box-shadow: 0 2px 8px rgba(197, 101, 61, 0.3);
+      box-shadow: 0 1px 6px rgba(197, 101, 61, 0.25);
     }
     .btn-circle-send:hover {
       transform: scale(1.08);
-      box-shadow: 0 4px 12px rgba(197, 101, 61, 0.4);
+      box-shadow: 0 3px 10px rgba(197, 101, 61, 0.35);
     }
     .btn-circle-send:active {
       transform: scale(0.95);
@@ -4023,6 +4243,41 @@
         linear-gradient(180deg, rgba(255, 246, 235, 0.85), rgba(255, 251, 245, 0.85));
     }
 
+    .boot-loading {
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px;
+    }
+
+    .boot-loading-card {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 16px 18px;
+      border: 1px solid var(--border-subtle);
+      border-radius: 16px;
+      background: var(--surface-elevated);
+      box-shadow: var(--shadow-sm);
+      color: var(--text-secondary);
+    }
+
+    .boot-loading-spinner {
+      width: 18px;
+      height: 18px;
+      flex-shrink: 0;
+      border: 2px solid rgba(197, 101, 61, 0.16);
+      border-top-color: var(--accent);
+      border-radius: 999px;
+      animation: loginSpin 0.8s linear infinite;
+    }
+
+    .boot-loading-text {
+      font-size: 0.9375rem;
+      font-weight: 500;
+    }
+
     .login-logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 8px; }
 
     .login-logo-icon {
@@ -4036,10 +4291,10 @@
 
     .login-logo-text { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; }
     .login-subtitle { color: var(--text-muted); font-size: 0.875rem; }
-    .login-body { padding: 24px; }
-    .login-card-loading .login-body { padding-top: 20px; padding-bottom: 28px; }
-    .login-hint { font-size: 0.8125rem; color: var(--text-secondary); margin-bottom: 20px; line-height: 1.6; }
-    .login-muted { margin: 4px 0 0; font-size: 0.75rem; color: var(--text-muted); line-height: 1.5; }
+    .login-body { padding: 22px 24px 24px; }
+    .login-card-loading .login-body { padding-top: 18px; padding-bottom: 24px; }
+    .login-hint { font-size: 0.8125rem; color: var(--text-secondary); margin-bottom: 16px; line-height: 1.5; }
+    .login-muted { margin: 4px 0 0; font-size: 0.75rem; color: var(--text-muted); line-height: 1.45; }
     .login-status {
       display: flex;
       align-items: flex-start;
@@ -4056,16 +4311,6 @@
       border-radius: 999px;
       animation: loginSpin 0.8s linear infinite;
     }
-    .login-tip {
-      font-size: 0.75rem;
-      color: var(--warning);
-      background: rgba(255, 244, 230, 0.92);
-      border: 1px solid rgba(169, 106, 47, 0.18);
-      border-radius: var(--radius-md);
-      padding: 10px 12px;
-      margin-bottom: 18px;
-      line-height: 1.55;
-    }
     .password-field {
       position: relative;
       display: flex;
@@ -4125,56 +4370,55 @@
       line-height: 1.5;
     }
     .session-modal .modal-body {
-      padding-top: 18px;
+      padding-top: 16px;
     }
     .session-modal .field:last-of-type {
-      margin-bottom: 18px;
+      margin-bottom: 14px;
     }
     .mode-cards {
       display: flex;
       flex-wrap: wrap;
-      gap: 8px;
-      justify-content: center;
+      gap: 6px;
     }
     .mode-card {
-      flex: 0 1 calc(33.333% - 6px);
+      flex: 1 1 0;
+      min-width: 0;
       display: flex;
       flex-direction: column;
       align-items: center;
-      gap: 2px;
-      padding: 12px 6px;
+      gap: 1px;
+      padding: 8px 4px;
       border: 1.5px solid rgba(125, 91, 57, 0.15);
-      border-radius: 12px;
+      border-radius: 10px;
       background: rgba(255, 255, 255, 0.55);
       cursor: pointer;
-      transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
+      transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
       text-align: center;
       outline: none;
     }
     .mode-card:hover {
       border-color: rgba(197, 101, 61, 0.35);
       background: rgba(255, 255, 255, 0.8);
-      transform: translateY(-1px);
     }
     .mode-card.active {
       border-color: var(--accent);
       background: rgba(255, 247, 239, 0.95);
-      box-shadow: 0 0 0 2px var(--accent-muted), 0 2px 8px rgba(197, 101, 61, 0.1);
+      box-shadow: 0 0 0 1.5px var(--accent-muted);
     }
     .mode-card:focus-visible {
       border-color: var(--accent);
-      box-shadow: 0 0 0 2px var(--accent-muted);
+      box-shadow: 0 0 0 1.5px var(--accent-muted);
     }
     .mode-card-label {
-      font-size: 0.8125rem;
+      font-size: 0.75rem;
       font-weight: 600;
       color: var(--text-primary);
       line-height: 1.3;
     }
     .mode-card-desc {
-      font-size: 0.6875rem;
+      font-size: 0.625rem;
       color: var(--text-muted);
-      line-height: 1.4;
+      line-height: 1.3;
     }
     .mode-card.active .mode-card-label {
       color: var(--accent);
@@ -4256,6 +4500,9 @@
     .modal {
       width: 100%;
       max-width: 540px;
+      max-height: 90vh;
+      display: flex;
+      flex-direction: column;
       background: rgba(255, 251, 245, 0.98);
       border: 1px solid rgba(150, 118, 85, 0.22);
       border-radius: 20px;
@@ -4280,9 +4527,9 @@
     }
 
     .modal-title { font-size: 1.0625rem; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }
-    .modal-body { padding: 22px; overflow: hidden; }
-    .modal-body .field { margin-bottom: 18px; }
-    .modal-body .field:last-of-type { margin-bottom: 20px; }
+    .modal-body { padding: 22px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
+    .modal-body .field { margin-bottom: 14px; }
+    .modal-body .field:last-of-type { margin-bottom: 16px; }
     .field-hint {
       margin-top: 6px;
       font-size: 0.75rem;
@@ -4363,7 +4610,7 @@
       cursor: pointer;
     }
 
-    .suggestions-wrap { position: sticky; }
+    .suggestions-wrap { position: relative; }
 
     .suggestions {
       position: absolute;
@@ -4393,6 +4640,36 @@
     .suggestion-item:hover { background: rgba(232, 197, 174, 0.34); }
     .suggestion-item small { display: block; font-size: 0.6875rem; color: var(--text-muted); margin-top: 2px; }
 
+    .recent-paths-bubbles {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 5px;
+      margin-top: 6px;
+    }
+    .recent-paths-bubbles:empty { display: none; }
+    .recent-path-bubble {
+      display: inline-flex;
+      align-items: center;
+      padding: 2px 10px;
+      background: rgba(232, 197, 174, 0.18);
+      border: 1px solid var(--border-default);
+      border-radius: 999px;
+      color: var(--text-secondary);
+      font-family: var(--font-mono);
+      font-size: 0.6875rem;
+      cursor: pointer;
+      transition: background var(--transition-fast), border-color var(--transition-fast);
+      white-space: nowrap;
+      max-width: 180px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .recent-path-bubble:hover {
+      background: rgba(232, 197, 174, 0.4);
+      border-color: var(--border-hover, var(--border-default));
+      color: var(--text-primary);
+    }
+
     .error-message {
       font-size: 0.75rem;
       color: var(--danger);
@@ -4508,20 +4785,12 @@
     /* 平板适配 */
     @media (max-width: 768px) {
       .app-container {
-        --layout-topbar-height: 50px;
-        --layout-sidebar-offset: var(--layout-topbar-height);
         --layout-main-file-panel-width: 0px;
       }
 
-      .topbar {
-        padding: 6px 12px;
-        min-height: var(--layout-topbar-height);
-        gap: 8px;
-      }
-      .topbar-center { display: none; }
       .sidebar {
         width: min(300px, calc(100vw - 20px));
-        top: var(--layout-sidebar-offset);
+        top: 0;
       }
       .terminal-container { margin: 0 12px 12px; min-height: 0; }
       .btn { min-height: 40px; }
@@ -4535,8 +4804,8 @@
       .thinking-content { font-size: 0.8125rem; }
       .tool-picker { grid-template-columns: 1fr; }
       /* 平板触摸优化 - 44px触摸区域 */
-      .session-item { min-height: 52px; padding: 11px 12px; }
-      .session-action-btn { width: 34px; height: 34px; min-width: 34px; min-height: 34px; }
+      .session-item { min-height: 48px; padding: 10px 12px; }
+      .session-action-btn { width: 32px; height: 32px; min-width: 32px; min-height: 32px; }
       .tree-item { min-height: 44px; padding: 8px 12px; }
       .folder-picker-item { min-height: 44px; }
     }
@@ -4555,8 +4824,6 @@
       }
 
       .app-container {
-        --layout-topbar-height: 40px;
-        --layout-sidebar-offset: var(--layout-topbar-height);
         --layout-main-file-panel-width: 0px;
       }
 
@@ -4576,58 +4843,17 @@
         overflow: hidden;
       }
 
-      /* 移动端顶栏 - 紧凑版 */
-      .topbar {
-        position: sticky;
-        top: 0;
-        z-index: 30;
-        align-items: center;
-        gap: 4px;
-        min-height: var(--layout-topbar-height);
-        padding: 4px 8px;
-        padding-top: max(4px, env(safe-area-inset-top, 0px));
-      }
-
-      .topbar-left { display: flex; gap: 4px; }
-      .topbar-center { display: none; }
-      .topbar-right {
-        display: flex;
-        gap: 4px;
-        align-items: center;
-      }
-
-      .topbar-logo-icon { width: 22px; height: 22px; font-size: 10px; border-radius: 6px; }
-
-      /* 移动端按钮 - 紧凑触摸区域 */
-      .topbar .btn-sm,
-      .topbar .topbar-btn {
-        height: 36px;
-        min-height: 36px;
-        min-width: 36px;
-        padding: 0 8px;
-        font-size: 0.6875rem;
+      /* 移动端浮动按钮 */
+      .floating-sidebar-toggle {
+        width: 30px;
+        height: 30px;
+        top: max(8px, env(safe-area-inset-top, 8px));
+        left: 8px;
         border-radius: 6px;
       }
+      .floating-sidebar-toggle .hamburger-icon { width: 13px; height: 9px; }
 
-      /* 移动端 PWA 安装按钮 */
-      .topbar #pwa-install-button {
-        color: var(--accent);
-      }
-      .topbar #pwa-install-button svg {
-        width: 14px;
-        height: 14px;
-      }
-      .topbar .btn-icon,
-      .topbar .topbar-btn.square {
-        width: 36px;
-        height: 36px;
-        min-width: 36px;
-        min-height: 36px;
-        padding: 0;
-        border-radius: 6px;
-      }
-      .sidebar-toggle-btn { width: 36px; height: 36px; min-width: 36px; min-height: 36px; border-radius: 6px; }
-      .hamburger-icon { width: 14px; height: 10px; }
+      .sidebar { top: 0; }
 
       /* 移动端终端顶栏 - 紧凑 */
       .terminal-header { padding: 5px 8px; min-height: 32px; }
@@ -4687,7 +4913,7 @@
       }
 
       .sidebar {
-        top: var(--layout-sidebar-offset);
+        top: 0;
         width: min(260px, calc(100vw - 12px));
         max-height: none;
         border-bottom: none;
@@ -4742,8 +4968,8 @@
       /* 移动端输入面板 - 紧凑 */
       .input-panel {
         z-index: 30;
-        padding: 6px 8px;
-        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px) + var(--keyboard-offset, 0px));
+        padding: 4px 6px;
+        padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px) + var(--keyboard-offset, 0px));
         flex: 0 0 auto;
         margin-top: auto;
         background: linear-gradient(180deg, rgba(246, 241, 232, 0) 0%, rgba(246, 241, 232, 0.82) 20%, rgba(246, 241, 232, 0.94) 100%);
@@ -4751,33 +4977,33 @@
       }
 
       .input-textarea {
-        padding-bottom: 6px;
+        padding-bottom: 4px;
       }
 
       .input-session-info-bar {
-        padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
+        padding: 2px 6px;
+        padding-bottom: calc(3px + env(safe-area-inset-bottom, 0px));
+        font-size: 0.625rem;
       }
 
       .input-composer {
-        border-radius: 12px;
+        border-radius: 10px;
       }
 
       .input-composer-bar {
-        padding: 2px 4px 4px 6px;
-        gap: 4px;
+        padding: 1px 3px 2px 5px;
+        gap: 3px;
       }
 
       .input-composer-left { gap: 3px; }
-      .input-composer-right { gap: 4px; }
+      .input-composer-right { gap: 3px; }
 
       /* 移动端会话信息栏 */
       .input-session-info-bar {
-        padding: 4px 8px;
-        font-size: 0.6875rem;
         flex-wrap: wrap;
       }
       .session-cwd-display {
-        max-width: 120px;
+        max-width: 100px;
       }
 
       .input-row { flex-direction: column; align-items: stretch; gap: 6px; max-width: 100%; }
@@ -4808,13 +5034,13 @@
       }
 
       .btn-circle {
-        width: 32px;
-        height: 32px;
+        width: 26px;
+        height: 26px;
         border-radius: 50%;
       }
       .btn-circle-send svg, .btn-circle-stop svg {
-        width: 14px;
-        height: 14px;
+        width: 12px;
+        height: 12px;
       }
 
       /* 防止iOS自动缩放 */
@@ -4824,48 +5050,79 @@
       }
 
       .input-textarea {
-        min-height: 36px;
-        padding: 8px;
+        min-height: 32px;
+        padding: 6px 8px 3px;
         font-size: 16px;
         line-height: 1.35;
       }
 
       .chat-mode-select {
-        max-width: 70px;
+        max-width: 65px;
         font-size: 0.5625rem;
-        height: 28px;
-        min-height: 28px;
-        padding: 0 4px;
+        height: 22px;
+        min-height: 22px;
+        padding: 0 14px 0 4px;
         border-radius: 5px;
       }
       .input-hint {
         display: none;
       }
 
-      /* 键盘弹出按钮 - 紧凑 */
-      .keyboard-toggle-btn {
-        width: 28px;
-        height: 28px;
-        padding: 0;
-        border-radius: 5px;
+      /* 移动端内联快捷键 - 折叠为左右滑动条 */
+      .inline-shortcuts-inline {
+        display: none;
       }
-      .keyboard-toggle-btn svg {
-        width: 14px;
-        height: 14px;
+      .inline-shortcuts-wrap {
+        flex-shrink: 1;
+        min-width: 0;
+        overflow: hidden;
       }
-      .keyboard-popup {
-        padding: 6px;
-        gap: 4px;
-        border-radius: 8px;
-        right: 8px;
-        bottom: calc(var(--keyboard-offset, 0px) + 140px);
-        min-width: 160px;
+      .shortcuts-toggle {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 22px;
+        height: 22px;
+        border: none;
+        border-radius: 50%;
+        background: transparent;
+        color: var(--text-muted);
+        font-size: 1rem;
+        font-weight: 700;
+        cursor: pointer;
+        flex-shrink: 0;
+        transition: all 0.15s ease;
+        -webkit-tap-highlight-color: transparent;
+        line-height: 1;
       }
-      .kp-key {
-        min-width: 36px;
-        height: 32px;
-        font-size: 0.625rem;
-        border-radius: 5px;
+      .shortcuts-toggle.active {
+        color: var(--accent);
+      }
+      .inline-shortcuts-strip {
+        display: none;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        scrollbar-width: none;
+        align-items: center;
+        gap: 3px;
+        flex: 1;
+        min-width: 0;
+      }
+      .inline-shortcuts-strip::-webkit-scrollbar {
+        display: none;
+      }
+      .inline-shortcuts-wrap.expanded .inline-shortcuts-strip {
+        display: flex;
+      }
+      .inline-shortcuts-strip .shortcut-key {
+        height: 22px;
+        min-width: 22px;
+        font-size: 0.5625rem;
+        padding: 0 4px;
+        flex-shrink: 0;
+      }
+      .inline-shortcuts-strip .shortcut-key.shortcut-dir {
+        min-width: 20px;
       }
 
       /* 小键盘 FAB */
@@ -5045,10 +5302,6 @@
     /* iPhone 14/15 等标准屏幕 (390px - 420px) - 使用基础移动端样式，略微调整 */
     @media (min-width: 391px) and (max-width: 420px) {
       /* 继承 max-width: 640px 的样式，此处仅做微调 */
-      .topbar {
-        padding: 4px 10px;
-        min-height: 40px;
-      }
 
       .terminal-container {
         margin: 0 6px 6px;
@@ -5064,37 +5317,13 @@
     /* iPhone SE 等小屏幕 (<= 390px) */
     @media (max-width: 390px) {
       /* 继承 max-width: 640px 的样式，此处仅做小屏微调 */
-      .app-container {
-        --layout-topbar-height: 38px;
-        --layout-sidebar-offset: var(--layout-topbar-height);
+      .floating-sidebar-toggle {
+        width: 26px;
+        height: 26px;
+        top: max(6px, env(safe-area-inset-top, 6px));
+        left: 6px;
       }
-
-      .topbar {
-        padding: 3px 6px;
-        min-height: var(--layout-topbar-height);
-        gap: 3px;
-      }
-
-      .topbar-logo-icon { width: 20px; height: 20px; font-size: 9px; border-radius: 5px; }
-
-      .topbar .btn-sm,
-      .topbar .topbar-btn {
-        height: 32px;
-        min-height: 32px;
-        min-width: 32px;
-        padding: 0 6px;
-        font-size: 0.625rem;
-        border-radius: 5px;
-      }
-      .topbar .btn-icon,
-      .topbar .topbar-btn.square {
-        width: 32px;
-        height: 32px;
-        min-width: 32px;
-        min-height: 32px;
-        border-radius: 5px;
-      }
-      .sidebar-toggle-btn { width: 32px; height: 32px; min-width: 32px; min-height: 32px; }
+      .floating-sidebar-toggle .hamburger-icon { width: 11px; height: 8px; }
 
       .terminal-header { padding: 4px 6px; min-height: 28px; }
       .terminal-title-text { font-size: 0.6875rem; }
@@ -5113,10 +5342,10 @@
         padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
       }
 
-      .input-composer { border-radius: 10px; }
-      .input-textarea { min-height: 32px; padding: 6px; font-size: 15px; }
+      .input-composer { border-radius: 8px; }
+      .input-textarea { min-height: 28px; padding: 5px 6px 2px; font-size: 15px; }
 
-      .btn-circle { width: 28px; height: 28px; }
+      .btn-circle { width: 24px; height: 24px; min-width: 24px; }
 
       .session-item {
         padding: 6px 8px;
@@ -5124,7 +5353,7 @@
       }
       .session-action-btn { width: 28px; height: 28px; min-width: 28px; min-height: 28px; }
 
-      .sidebar { top: var(--layout-sidebar-offset); width: min(240px, calc(100vw - 10px)); }
+      .sidebar { top: 0; width: min(240px, calc(100vw - 10px)); }
 
       .modal { max-height: 80vh; }
       .modal-header { padding: 8px 10px; min-height: 36px; }
@@ -5136,26 +5365,16 @@
 
     /* iPad Mini 等平板 (641px - 768px) */
     @media (min-width: 641px) and (max-width: 768px) {
-      .app-container {
-        --layout-topbar-height: 52px;
-        --layout-sidebar-offset: var(--layout-topbar-height);
-      }
-
-      .topbar {
-        min-height: var(--layout-topbar-height);
-        padding: 8px 14px;
-      }
-
       .sidebar {
-        top: var(--layout-sidebar-offset);
+        top: 0;
         width: min(320px, calc(100vw - 40px));
       }
 
       .session-item {
-        min-height: 56px;
-        padding: 12px;
+        min-height: 52px;
+        padding: 11px 12px;
       }
-      .session-action-btn { width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
+      .session-action-btn { width: 34px; height: 34px; min-width: 34px; min-height: 34px; }
 
       .btn { min-height: 42px; }
       .btn-sm { min-height: 36px; }
@@ -5166,20 +5385,14 @@
 
     /* 横屏模式优化 */
     @media (max-height: 420px) and (orientation: landscape) {
-      .app-container {
-        --layout-topbar-height: 40px;
-        --layout-sidebar-offset: var(--layout-topbar-height);
-      }
-
-      .topbar {
-        min-height: var(--layout-topbar-height);
-        padding: 6px 10px;
+      .floating-sidebar-toggle {
+        width: 28px;
+        height: 28px;
+        top: 6px;
+        left: 6px;
       }
 
-      .sidebar { top: var(--layout-sidebar-offset); }
-
-      .topbar-logo-icon { width: 20px; height: 20px; font-size: 9px; }
-      .topbar-new-btn { height: 30px; padding: 0 12px; font-size: 0.72rem; }
+      .sidebar { top: 0; }
 
       .terminal-container {
         min-height: 55vh;