/* ===== 草稿纸（Sketchpad）手机端适配 =====
 * 仅负责手机端（max-width: 767px）的样式覆盖，桌面端外观保持不变。
 * 需在 index.html 中 style.css 之后引入（由主 agent 统一添加）：
 *   <link rel="stylesheet" href="/css/mobile-sketchpad.css">
 * 配套 JS：public/js/sketchpad.js（浮动关闭按钮 #sketchpad-mobile-close 由 JS 创建）
 */

/* 手机端浮动关闭按钮：桌面端始终隐藏（此为基础规则，非覆盖） */
#sketchpad-mobile-close {
  display: none;
}

@media (max-width: 767px) {
  /* ── 画线时禁止页面滚动/下拉刷新 ── */
  #sketchpad-canvas {
    touch-action: none;
  }

  /* ── 工具栏：贴底全宽横条，按钮可横向滚动，触控目标 ≥44px ── */
  #sketchpad-toolbar {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    box-sizing: border-box;
    border-radius: 0;
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
    touch-action: manipulation; /* 防止双击缩放 */
  }
  #sketchpad-toolbar .sketch-tools {
    flex: 1;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox 隐藏滚动条 */
    gap: 8px;
  }
  #sketchpad-toolbar .sketch-tools::-webkit-scrollbar {
    display: none;
  }
  #sketchpad-toolbar .sketch-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 8px 14px;
    font-size: 1rem;
    flex-shrink: 0;
    box-sizing: border-box;
  }
  #sketchpad-toolbar .sketch-btn-text {
    font-size: 0.9rem;
    white-space: nowrap;
  }
  #sketchpad-toolbar .sketch-btn-icon {
    min-width: 44px;
  }
  #sketchpad-toolbar .sketch-size-indicator {
    width: 36px;
    height: 44px;
    flex-shrink: 0;
  }
  #sketchpad-toolbar .sketch-sep {
    flex-shrink: 0;
  }

  /* ── 工具栏「✖ 关闭」：吸住可视区右端，横向滚动也不会被挤没 ── */
  #sketch-close {
    position: sticky;
    right: 0;
    margin-left: auto;
    min-width: 72px;
    min-height: 44px;
    font-size: 0.95rem;
    font-weight: 600;
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
    box-shadow: -8px 0 10px -4px rgba(255, 255, 255, 0.95); /* 遮住滚动经过的内容 */
    z-index: 1;
  }
  /* active 态是工具按钮专用，关闭按钮保持红色 */
  #sketch-close.active {
    background: #ef4444;
    border-color: #ef4444;
    box-shadow: -8px 0 10px -4px rgba(255, 255, 255, 0.95);
  }

  /* ── 右下角浮动圆形关闭按钮（JS 创建，随 overlay 显示/隐藏） ── */
  #sketchpad-mobile-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 16px;
    /* 位于贴底工具栏上方，留出间距 */
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: #ef4444;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    z-index: 10002;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  #sketchpad-mobile-close:active {
    transform: scale(0.92);
    background: #dc2626;
  }

  /* ── toast 避免被贴底工具栏挡住 ── */
  #sketch-toast {
    bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
  }
}