/*
 * ===== Responsive Breakpoints =====
 * 1024px — tablet / desktop split (segment workspace)
 * 768px  — mobile / tablet split (main responsive)
 * 480px  — small phone (segment compact)
 */
@media (max-width: 768px) {
  body { flex-direction: column; overflow: auto; height: auto; min-height: 100vh; min-height: 100dvh; }

  /* 左侧工具栏 → 底部水平 tab bar（现位于 cp-body-row 内） */
  .toolbar-panel {
    width: 100%; min-width: 0; height: 60px; align-self: auto;
    flex-direction: row; border-right: none; border-top: 1px solid var(--border);
    padding: 0 6px; gap: 2px; order: 99; overflow-x: auto; overflow-y: hidden;
  }
  .tool-btn { width: 52px; min-height: 52px; height: auto; font-size: 18px; padding: 4px 2px; gap: 2px; flex-shrink: 0; }
  .tool-btn .tool-label { display: block !important; font-size: 9px; opacity: 1; max-width: 48px; }
  .tool-btn:hover .tool-label { opacity: 1; }

  /* cp-body-row 在移动端改为列方向，让 toolbar-panel 沉到底部 */
  .cp-body-row { flex-direction: column; }

  /* 侧边栏 → 左抽屉（不贴顶，留出顶部工具条+标签条） */
  .tool-sidebar {
    position: fixed; top: 80px; left: 0; width: 100%; min-width: 0;
    height: calc(100vh - 80px); z-index: var(--z-modal, 600); display: flex !important;
    transform: translateX(-100%); transition: transform .25s ease;
    border-right: none; box-shadow: 4px 0 20px rgba(0,0,0,0.4);
  }
  .tool-sidebar:not(.hidden) { transform: translateX(0); }

  /* 右面板 → 底部抽屉 */
  .right-panel {
    position: fixed; bottom: 0; left: 0; width: 100%; min-width: 0; align-self: auto;
    max-height: 80vh; z-index: var(--z-modal, 600);
    transform: translateY(100%); transition: transform .25s ease;
    border-left: none; border-top: 1px solid var(--border);
    border-radius: 14px 14px 0 0; box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
  }
  .right-panel.mobile-open { transform: translateY(0); }

  /* 主面板（toolbar-panel 已在 cp-body-row 内部，不再需要减 56px） */
  .center-panel { width: 100%; height: 100vh; }

  /* 遮罩层 */
  .mobile-overlay {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: var(--z-drawer, 500); opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
  }
  .mobile-overlay.show { opacity: 1; pointer-events: auto; }

  /* 手机端显示参数按钮 */
  .tool-btn-mobile-params { display: flex !important; }

  /* 触控优化：增大点击区 */
  .lp-pl-action-btn, .pl-cat-action-btn { min-width: 36px; min-height: 36px; }

  /* 手机端隐藏桌面端专用按钮 */
  .mobile-hide { display: none !important; }

  /* 手机端登录按钮 */
  .mobile-auth-btn {
    display: flex !important;
    padding: 6px 14px;
    background: linear-gradient(135deg, var(--green), #2ea043);
    border: none;
    border-radius: 20px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
  }

  /* 手机端隐藏生成队列面板 */
  .gen-panel, .gen-panel-minimized { display: none !important; }

  /* 手机端抽屉关闭按钮显示 */
  .mobile-drawer-close { display: flex; }

  /* 手机端新建标签按钮粘在右侧，不被挤出屏幕 */
  .tab-add { position: sticky; right: 0; z-index: 1; background: var(--bg-base); }

  /* 手机端参考图缩小，避免遮挡 */
  .ref-thumb-strip .rts-item { width: 36px; height: 36px; }
  .ref-add-btn { width: 36px; height: 36px; font-size: 14px; }

  /* 手机端底部栏：参考图 → 提示词 → 按钮 */
  .cp-bottom-bar {
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 0;
    padding-top: 2px;
  }
  .cp-bottom-btn-row {
    display: contents;
  }
  .cp-bottom-left {
    grid-row: 1;
    width: 100%;
    margin-left: 0;
    padding-left: 0;
    padding: 8px 10px 4px;
    position: relative;
    z-index: 1;
  }
  .cp-prompt-bar {
    grid-row: 2;
  }
  .cp-bottom-right {
    grid-row: 3;
    justify-content: flex-end;
    padding: 8px 10px 12px;
  }

  /* 手机端 chat 工作区适配 */
  .chat-sidebar { position:fixed; top:0; left:0; width:80%; max-width:280px; height:100%; z-index:var(--z-modal, 600); transform:translateX(-100%); transition:transform .25s ease; box-shadow:4px 0 20px rgba(0,0,0,0.4); }
  .chat-sidebar.open { transform:translateX(0); }
  .chat-sidebar-toggle { display:flex; }
  .chat-sidebar-overlay { display:none; position:fixed; inset:0; z-index:var(--z-drawer, 500); background:rgba(0,0,0,0.5); }
  .chat-sidebar-overlay.show { display:block; }
  .chat-header { padding: 8px 10px; }
  .chat-model-select { max-width: 130px; font-size: 11px; padding: 3px 6px; }
  .chat-header-btn { width: 32px; height: 32px; }
  .chat-messages { padding: 12px; gap: 12px; }
  .chat-msg { max-width: 92%; gap: 8px; }
  .chat-msg-avatar { width: 28px; height: 28px; font-size: 14px; }
  .chat-msg-content { padding: 8px 12px; font-size: 14px; }
  .chat-msg-image { width: 100px; height: 100px; }
  .chat-input-area { padding: 8px 10px 10px; gap: 6px; }
  .chat-input-composer { padding: 8px 10px; }
  .chat-input { font-size: 15px; min-height: 22px; }
  .chat-attach-btn, .chat-deep-toggle { height: 32px; }
  .chat-send-btn, .chat-stop-btn { width: 36px; height: 36px; }
  .chat-quick-cmd { font-size: 11px; padding: 3px 8px; }
  .chat-welcome-icon { font-size: 36px; }
  .chat-welcome-title { font-size: 17px; }
  .chat-welcome-tip { max-width: 280px; }
}