/*
 * 画布入口确认按钮（创作工作台）——「进入画布」
 *
 * 位置：底部输入面板模式切换器（.media-mode-switcher）「画布」按钮正下方
 * （见 static/create/index.html）。点击「画布」不会直接进入 /canvas/，
 * 而是让本按钮淡入（.is-visible）；点击本按钮才真正进入画布；再次点击
 * 「画布」或切换 图片/视频 模式时淡出。行为见
 * static/js/modules/create/canvas-entry.js。
 *
 * 视觉沿用创作页 TapNow 材质：近黑石墨 raised 面 + 白色发丝线 +
 * 内嵌顶部高光 + 12px 圆角（与 .media-mode-btn / .tab-item 同语言），
 * 通过比模式按钮更高的表面亮度区分「这是确认动作」。高度与各断点的
 * .media-mode-btn 完全一致（用固定 height，双行标签「进入/画布」约
 * 32px 高，在各断点内衬高度内居中，按钮不高于/低于旁边的模式按钮）。
 *
 * 出现/消失为渐变（opacity + 轻微位移），隐藏态用 visibility 保留占位：
 * 切换器列高度恒定，输入面板不抖动；tapnow 下切换器容器本身透明，
 * 隐藏态与现状视觉一致。
 */

.create-page .canvas-enter-btn {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 6px;
  border: 1px solid var(--tap-line-strong, rgba(255, 255, 255, 0.15));
  border-radius: 12px;
  background: var(--tap-surface-raised, #262626);
  box-shadow:
    var(--tap-inset, inset 0 0.5px 0 rgba(255, 255, 255, 0.16)),
    0 8px 20px rgba(0, 0, 0, 0.3);
  color: var(--tap-text, #f5f5f5);
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;

  /* 隐藏态：透明 + 轻微下沉，禁止交互；visibility 延迟收起以完成淡出 */
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0.22s,
    background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.create-page .canvas-enter-btn.is-visible {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s,
    background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.create-page .canvas-enter-btn.is-visible:hover {
  background: var(--tap-surface-hover, #2b2b2b);
  border-color: rgba(255, 255, 255, 0.32);
}

.create-page .canvas-enter-btn.is-visible:active {
  background: #232323;
  border-color: rgba(255, 255, 255, 0.24);
}

.create-page .canvas-enter-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--tap-focus, rgba(255, 255, 255, 0.35)),
    var(--tap-inset, inset 0 0.5px 0 rgba(255, 255, 255, 0.16));
}

/* 双行标签：进入 / 画布（约 32px 高，容纳于各断点按钮内衬高度） */
.create-page .canvas-enter-btn-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.04em;
}

/* ── 尺寸跟随 .media-mode-btn 的断点 ─────────────────────────── */

/* 行内模式（≤820px）：切换器是面板顶部横向一排（input.css 的 ≤900px 行内
   布局，create-responsive.css 在 ≥821px 改回列式）。本按钮成为排尾一项，
   高度用 auto + flex stretch 自动与同排模式按钮一致，无需固定高度；标签
   改单行以适配横向窄排。 */
@media (max-width: 820px) {
  .create-page .canvas-enter-btn {
    height: auto;
    padding: 0 10px;
  }
  .create-page .canvas-enter-btn-label {
    flex-direction: row;
    gap: 3px;
    font-size: 11px;
    line-height: 1.2;
  }
}

/* ≥821px 桌面密度档（create-responsive.css 同一组媒体查询） */
@media (min-width: 821px) {
  .create-page .canvas-enter-btn {
    height: 43px;
  }
}

@media (min-width: 821px) and (max-height: 960px) {
  .create-page .canvas-enter-btn {
    height: 38px;
  }
}

@media (min-width: 821px) and (max-height: 780px) {
  .create-page .canvas-enter-btn {
    height: 34px;
  }
  .create-page .canvas-enter-btn-label {
    font-size: 11px;
    gap: 1px;
  }
}

/* 用户偏好减少动效时：不位移，仅快速显隐 */
@media (prefers-reduced-motion: reduce) {
  .create-page .canvas-enter-btn,
  .create-page .canvas-enter-btn.is-visible {
    transform: none;
    transition:
      opacity 0.08s linear,
      visibility 0s linear 0.08s,
      background-color 0.15s,
      border-color 0.15s;
  }
  .create-page .canvas-enter-btn.is-visible {
    transition:
      opacity 0.08s linear,
      visibility 0s,
      background-color 0.15s,
      border-color 0.15s;
  }
}