/* ToonFlow 移动端自适应补丁 v2
   仅在 ≤768px 视口生效，不影响 PC 端任何样式 */

@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  /* ---------- 全局导航栏：改为覆盖式抽屉 + 悬浮开关 ---------- */
  .main {
    width: 100vw;
    max-width: 100vw;
    padding: 8px !important;
    overflow-x: hidden;
  }
  .menu {
    position: fixed !important;
    left: 8px;
    top: 8px;
    bottom: 8px;
    z-index: 900;
    margin: 0 !important;
    transform: translateX(-130%);
    transition: transform 0.22s ease;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  }
  body.menu-open .menu {
    transform: none;
  }
  .tf-menu-toggle {
    position: fixed;
    left: 10px;
    bottom: 14px;
    z-index: 950;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #0052d9;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
    cursor: pointer;
  }
  .view,
  .viewBox {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    margin: 0 !important;
    padding: 8px !important;
    overflow-x: hidden;
  }

  /* ---------- 媒体元素 ---------- */
  img, video {
    max-width: 100%;
    height: auto;
  }
  video {
    object-fit: contain;
    background: #000;
  }

  /* ---------- 表格：容器内横向滚动 ---------- */
  .t-table {
    display: block;
    max-width: 100% !important;
    overflow-x: auto !important;
  }
  .t-table__content,
  .t-table__inner {
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  /* ---------- 对话框：小屏全宽 ---------- */
  .t-dialog__card,
  .t-dialog {
    max-width: calc(100vw - 16px) !important;
    width: calc(100vw - 16px) !important;
  }
  .t-dialog__wrap,
  .t-dialog__position {
    padding: 8px !important;
  }
  .t-dialog__body {
    max-height: 68vh;
    overflow-y: auto;
  }
  .t-dialog__header {
    padding-right: 40px;
  }

  /* ---------- 抽屉：小屏全宽 ---------- */
  .t-drawer__content-wrapper {
    width: 100vw !important;
    max-width: 94vw !important;
  }
  .t-drawer__body {
    padding: 12px !important;
  }

  /* ---------- 工具栏/面板：换行收窄 ---------- */
  .toolbar,
  .panelContent,
  .paramSelect {
    flex-wrap: wrap;
    max-width: 100%;
    gap: 6px;
  }
  .toolbar .t-input__wrap,
  .toolbar .t-select__wrap,
  .panelContent .t-input__wrap {
    max-width: 100%;
  }

  /* ---------- 项目卡片：单列 ---------- */
  .gridContainer {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 10px !important;
  }
  .list {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }
  .list > * {
    width: 100% !important;
    max-width: 100% !important;
  }
  .card,
  .t-card {
    width: 100% !important;
    max-width: 100% !important;
  }
  .t-card__body {
    padding: 12px !important;
  }

  /* ---------- 表单 ---------- */
  .t-form__item {
    margin-bottom: 12px;
  }
  .t-form__controls {
    max-width: 100%;
  }
  .t-input__wrap,
  .t-select__wrap,
  .t-textarea__wrap {
    width: 100% !important;
    max-width: 100% !important;
  }
  .t-form__controls-content {
    flex-wrap: wrap;
    gap: 6px;
  }
  .t-radio-group {
    flex-wrap: wrap;
  }

  /* ---------- 按钮行换行 ---------- */
  .actionBtns,
  .bottomMenu,
  .ac,
  .f,
  .jb {
    flex-wrap: wrap;
    max-width: 100%;
  }
  .t-button {
    max-width: 100%;
  }

  /* ---------- 标签页横向滚动 ---------- */
  .t-tabs__nav-container {
    overflow-x: auto;
  }
  .t-tabs__operations {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* ---------- 制作工作台（视频生成页） ---------- */
  .vue-flow.flowMain {
    width: 100% !important;
  }
  .floatingWindow {
    max-width: 100% !important;
  }
  .episodesSelect {
    max-width: 100%;
    flex-wrap: wrap;
  }
  .rightChatBox {
    width: 100% !important;
    max-width: 100% !important;
  }
  .vue-flow__panel {
    max-width: calc(100vw - 24px);
  }
  /* 画布上的节点卡片略收窄，减少拖动距离 */
  .vue-flow__node .t-card.storyboard,
  .vue-flow__node .t-card.storyboardTable {
    width: 360px !important;
    max-width: 88vw !important;
  }
  .frameCard,
  .frameItem,
  .frameImage {
    max-width: 100%;
  }

  /* ---------- Markdown 编辑器工具栏换行 ---------- */
  .md-editor-toolbar {
    flex-wrap: wrap;
    height: auto !important;
    min-height: 36px;
  }
  .md-editor-toolbar-wrapper {
    height: auto !important;
  }
  .md-editor-toolbar-left,
  .md-editor-toolbar-right {
    flex-wrap: wrap;
  }

  /* ---------- 设置面板 ---------- */
  .settingMenu {
    max-width: 88vw !important;
  }
  .settingRight,
  .settingContent,
  .sectionTitle,
  .uiConfig {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* ---------- 上传区 ---------- */
  .coverUploadArea,
  .multiCoverUploadArea,
  .coverUploadTrigger,
  .nameAndCoverRow,
  .nameField,
  .coverField {
    width: 100% !important;
    max-width: 100% !important;
  }
  .nameAndCoverRow {
    flex-direction: column;
  }

  /* ---------- 通用溢出兜底 ---------- */
  [class*="Container"],
  [class*="container"] {
    max-width: 100%;
  }
}