/* ===== 豆图工坊 v2.1 移动端布局（浅色卡片版） =====
 * 参考拼豆App风格：浅色背景、白色卡片、橙色主题
 * 两种模式：全屏模式(默认) / 极简模式
 * 仅在 max-width: 1024px 生效，绝对不影响电脑端
 */

/* ========== 桌面端：隐藏所有移动端专属元素 ========== */
#editor-page .editor-top-actions #btn-layout-mode,
.mobile-bottom-panel,
.mobile-panel-overlay,
.mobile-fab,
.mobile-undo-fab,
.minimal-toolbar,
.minimal-exit-btn {
  display: none !important;
}

/* ========== 手机端 (≤767px) ========== */
@media (max-width: 767px) {

  /* ----- 全局：浅色背景 ----- */
  html, body {
    background: #f5f6f8 !important;
    overflow-x: hidden !important;
  }

  body.douTu-editor-active {
    overflow: hidden !important;
  }

  /* ----- 编辑器页面 ----- */
  body.douTu-editor-active #editor-page {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: #f5f6f8 !important;
    z-index: auto !important;
  }

  /* ----- 顶部栏：白色 ----- */
  #editor-page .editor-topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    background: #fff !important;
    border-bottom: 1px solid rgba(31,41,55,.06) !important;
    min-height: calc(52px + env(safe-area-inset-top)) !important;
    height: calc(52px + env(safe-area-inset-top)) !important;
    padding: calc(6px + env(safe-area-inset-top)) 10px 6px !important;
    gap: 6px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.04) !important;
  }

  .editor-brand {
    display: none !important;
  }

  .editor-top-status {
    display: none !important;
  }

  .editor-top-actions {
    width: 100% !important;
    justify-content: space-between !important;
    gap: 6px !important;
    margin-left: 0 !important;
    flex-wrap: nowrap !important;
  }

  /* 顶部按钮：浅色风格 */
  .editor-top-btn {
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 12px !important;
    border-radius: 11px !important;
    background: #f5f6f8 !important;
    color: #566071 !important;
    border: 1px solid rgba(31,41,55,.08) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
  }

  .editor-top-btn .txt {
    display: inline !important;
  }

  /* 只显示图标的按钮 */
  .editor-top-btn.icon-only,
  #btn-layout-mode {
    width: 40px !important;
    padding: 0 !important;
    font-size: 0 !important;
  }

  .editor-top-btn.icon-only .txt,
  #btn-layout-mode .txt {
    display: none !important;
  }

  /* 修复SVG图标 */
  .editor-top-btn .svg-icon {
    width: 20px !important;
    height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .editor-top-btn .svg-icon svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
  }

  /* 橙色主按钮 */
  .editor-top-btn.primary,
  .editor-top-btn.mode-btn {
    background: linear-gradient(135deg,#ff9b3f,#ff7a18) !important;
    border-color: transparent !important;
    color: #fff !important;
  }

  /* ----- 画布区域：白色卡片 ----- */
  #editor-page .canvas-area {
    position: fixed !important;
    top: calc(52px + env(safe-area-inset-top)) !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 80px !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    z-index: 1 !important;
    display: block !important;
    overflow: visible !important;
  }

  #editor-page .canvas-wrapper {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 20px !important;
    border: 1px solid rgba(31,41,55,.07) !important;
    background: #fff !important;
    box-shadow: 0 8px 30px rgba(37,48,64,.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: hidden !important;
    position: relative !important;
  }

  #editor-page .canvas-container {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
  }

  #editor-page .canvas-main {
    width: 100% !important;
    height: 100% !important;
  }

  /* ----- 隐藏所有占文档流的面板 ----- */
  #panel-left,
  #panel-right,
  #bottom-area,
  .mobile-tab-bar {
    display: none !important;
  }

  /* ----- 右上角画布控制按钮 ----- */
  .view-toggle-btn,
  .change-image-btn {
    top: 12px !important;
    right: 12px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.9) !important;
    border: 1px solid rgba(31,41,55,.08) !important;
    color: #566071 !important;
    font-size: 18px !important;
    z-index: 50 !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.08) !important;
  }

  .change-image-btn {
    top: 58px !important;
  }

  .view-toggle-btn:hover,
  .change-image-btn:hover {
    background: linear-gradient(135deg,#ff9b3f,#ff7a18) !important;
    border-color: transparent !important;
    color: #fff !important;
  }

  /* ----- 右侧橙色浮动按钮 ----- */
  .mobile-fab {
    display: flex !important;
    position: fixed !important;
    right: 16px !important;
    bottom: calc(100px + env(safe-area-inset-bottom)) !important;
    z-index: 90 !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    border: none !important;
    background: linear-gradient(135deg,#ff9b3f,#ff7a18) !important;
    color: #fff !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 24px rgba(255,122,24,.35) !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .mobile-fab svg {
    width: 24px !important;
    height: 24px !important;
  }

  .mobile-fab:active {
    transform: scale(.92) !important;
  }

  /* ----- 撤销浮动按钮 ----- */
  .mobile-undo-fab {
    display: flex !important;
    position: fixed !important;
    right: 16px !important;
    bottom: calc(164px + env(safe-area-inset-bottom)) !important;
    z-index: 90 !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(31,41,55,.08) !important;
    background: rgba(255,255,255,.95) !important;
    color: #566071 !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.1) !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .mobile-undo-fab svg {
    width: 22px !important;
    height: 22px !important;
  }

  .mobile-undo-fab:active {
    transform: scale(.92) !important;
  }

  /* ----- 底部滑出面板 ----- */
  .mobile-panel-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.4) !important;
    z-index: 95 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .25s !important;
  }

  .mobile-panel-overlay.open {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .mobile-bottom-panel {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    background: #fff !important;
    border-radius: 24px 24px 0 0 !important;
    box-shadow: 0 -8px 40px rgba(0,0,0,.12) !important;
    max-height: 75vh !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateY(100%) !important;
    transition: transform .3s cubic-bezier(.4,0,.2,1) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  .mobile-bottom-panel.open {
    transform: translateY(0) !important;
  }

  /* 面板拖拽手柄 */
  .mobile-panel-handle {
    display: flex !important;
    justify-content: center !important;
    padding: 10px 0 6px !important;
    cursor: grab !important;
    flex-shrink: 0 !important;
  }

  .mobile-panel-handle-bar {
    width: 40px !important;
    height: 4px !important;
    border-radius: 2px !important;
    background: #d1d5db !important;
  }

  /* 面板标签页 */
  .mobile-panel-tabs {
    display: flex !important;
    gap: 6px !important;
    padding: 6px 16px 10px !important;
    border-bottom: 1px solid rgba(31,41,55,.06) !important;
    flex-shrink: 0 !important;
  }

  .mobile-panel-tab {
    flex: 1 !important;
    height: 36px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(31,41,55,.08) !important;
    background: #f5f6f8 !important;
    color: #566071 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all .15s !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .mobile-panel-tab.active {
    background: linear-gradient(135deg,#ff9b3f,#ff7a18) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(255,122,24,.25) !important;
  }

  /* 面板内容区 */
  .mobile-panel-content {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px 16px 20px !important;
  }

  .mobile-panel-section {
    display: none !important;
  }

  .mobile-panel-section.active {
    display: block !important;
  }

  /* 面板内卡片样式 */
  .mobile-panel-section .section {
    background: #fafbfc !important;
    border: 1px solid rgba(31,41,55,.06) !important;
    border-radius: 16px !important;
    padding: 14px !important;
    margin-bottom: 10px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .mobile-panel-section .section-title {
    font-size: 14px !important;
    color: #273142 !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
  }

  .mobile-panel-section .btn {
    background: #f5f6f8 !important;
    color: #566071 !important;
    border: 1px solid rgba(31,41,55,.08) !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    min-height: 40px !important;
  }

  .mobile-panel-section .btn.active,
  .mobile-panel-section .btn.primary {
    background: linear-gradient(135deg,#ff9b3f,#ff7a18) !important;
    border-color: transparent !important;
    color: #fff !important;
  }

  .mobile-panel-section input,
  .mobile-panel-section select {
    background: #fff !important;
    color: #273142 !important;
    border: 1px solid rgba(31,41,55,.1) !important;
    border-radius: 9px !important;
    font-size: 14px !important;
  }

  /* 色板网格 */
  .mobile-panel-section .palette-grid {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 6px !important;
    max-height: none !important;
  }

  .mobile-panel-section .color-swatch {
    min-height: 42px !important;
    border-radius: 10px !important;
  }

  /* 工具按钮组 */
  .mobile-panel-section .tool-group {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  .mobile-panel-section .tool-group .btn {
    min-height: 48px !important;
    flex-direction: column !important;
    gap: 4px !important;
    font-size: 12px !important;
  }

  /* 标尺 */
  .ruler-top { height: 16px !important; }
  .ruler-left { width: 18px !important; }

  /* 颜色提示 */
  .color-tooltip {
    z-index: 200 !important;
    font-size: 11px !important;
    padding: 6px 10px !important;
  }

  /* ========== 极简模式 ========== */
  body.minimal-mode .editor-topbar {
    display: none !important;
  }

  body.minimal-mode .canvas-area {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }

  body.minimal-mode .canvas-wrapper {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  body.minimal-mode .view-toggle-btn,
  body.minimal-mode .change-image-btn,
  body.minimal-mode .mobile-fab,
  body.minimal-mode .mobile-undo-fab,
  body.minimal-mode .color-tooltip {
    display: none !important;
  }

  /* 极简模式退出按钮 */
  .minimal-exit-btn {
    display: flex !important;
    position: fixed !important;
    top: calc(14px + env(safe-area-inset-top)) !important;
    right: 14px !important;
    z-index: 100 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(31,41,55,.08) !important;
    background: rgba(255,255,255,.95) !important;
    color: #566071 !important;
    font-size: 20px !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.1) !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* 极简模式工具栏 */
  .minimal-toolbar {
    display: flex !important;
    position: fixed !important;
    bottom: calc(28px + env(safe-area-inset-bottom)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 100 !important;
    background: rgba(255,255,255,.98) !important;
    border: 1px solid rgba(31,41,55,.06) !important;
    border-radius: 24px !important;
    padding: 9px !important;
    gap: 9px !important;
    box-shadow: 0 14px 44px rgba(0,0,0,.12) !important;
    max-width: calc(100vw - 20px) !important;
  }

  .minimal-toolbar button {
    width: 56px !important;
    height: 56px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(31,41,55,.08) !important;
    background: #f5f6f8 !important;
    color: #566071 !important;
    font-size: 26px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all .2s !important;
    flex-shrink: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .minimal-toolbar button:active {
    transform: scale(.92) !important;
  }

  .minimal-toolbar button.active {
    background: linear-gradient(135deg,#ff9b3f,#ff7a18) !important;
    border-color: transparent !important;
    color: #fff !important;
    transform: scale(1.06) !important;
    box-shadow: 0 6px 18px rgba(255,122,24,.4) !important;
  }

  .minimal-toolbar .minimal-color-btn {
    width: 56px !important;
    height: 56px !important;
    border-radius: 18px !important;
    border: 4px solid #fff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.1) !important;
    cursor: pointer !important;
    background: #faf4c8 !important;
    flex-shrink: 0 !important;
  }
}

/* ========== 平板端 (768px-1024px) ========== */
@media (min-width: 768px) and (max-width: 1024px) {

  /* 显示布局切换按钮 */
  #editor-page .editor-top-actions #btn-layout-mode {
    display: inline-flex !important;
  }

  /* 显示移动端浮动元素 */
  .mobile-fab,
  .mobile-undo-fab {
    display: none;
  }

  /* 平板全屏/极简模式 */
  body.pro-fullscreen-mode.douTu-editor-active #editor-page,
  body.minimal-mode.douTu-editor-active #editor-page {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: #f5f6f8 !important;
  }

  body.pro-fullscreen-mode #editor-page .canvas-area,
  body.minimal-mode #editor-page .canvas-area {
    position: fixed !important;
    top: 60px !important;
    left: 20px !important;
    right: 20px !important;
    bottom: 100px !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    z-index: 1 !important;
  }

  body.pro-fullscreen-mode #panel-left,
  body.pro-fullscreen-mode #panel-right,
  body.pro-fullscreen-mode #bottom-area,
  body.pro-fullscreen-mode .mobile-tab-bar,
  body.minimal-mode #panel-left,
  body.minimal-mode #panel-right,
  body.minimal-mode #bottom-area,
  body.minimal-mode .mobile-tab-bar {
    display: none !important;
  }

  body.pro-fullscreen-mode .mobile-fab,
  body.pro-fullscreen-mode .mobile-undo-fab,
  body.minimal-mode .mobile-fab,
  body.minimal-mode .mobile-undo-fab {
    display: flex !important;
  }

  body.pro-fullscreen-mode .mobile-bottom-panel,
  body.minimal-mode .mobile-bottom-panel {
    display: flex !important;
  }

  /* 平板极简模式 */
  body.minimal-mode .editor-topbar {
    display: none !important;
  }

  body.minimal-mode .canvas-area {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }

  body.minimal-mode .minimal-exit-btn {
    display: flex !important;
  }

  body.minimal-mode .minimal-toolbar {
    display: flex !important;
  }
}

/* ========== 性能优化 ========== */
.mobile-fab,
.mobile-undo-fab,
.minimal-toolbar,
.minimal-exit-btn {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}