/* EJS编辑器移动端全局样式优化 */

/* Element Plus 组件移动端优化 */
@media screen and (max-width: 768px) {
  /* 分段器适配 */
  .el-segmented {
    width: 100%;
  }

  .el-segmented .el-segmented__item {
    flex: 1;
    font-size: 12px;
    padding: 4px 8px;
  }

  /* 对话框适配 */
  .el-dialog {
    width: 95% !important;
    margin: 20px auto !important;
  }

  .el-dialog__header {
    padding: 12px 16px !important;
  }

  .el-dialog__body {
    padding: 8px 16px !important;
  }

  .el-dialog__footer {
    padding: 8px 16px 12px !important;
  }

  /* 消息框适配 */
  .el-message-box {
    width: 90% !important;
  }

  .el-message-box__content {
    font-size: 14px !important;
  }

  /* 选择器优化 */
  .el-select .el-input {
    font-size: 14px;
  }

  .el-select-dropdown {
    max-width: 90vw;
  }

  /* 按钮组优化 */
  .el-button-group .el-button {
    padding: 6px 12px;
    font-size: 12px;
  }

  /* 标签页优化 */
  .el-tabs__header {
    margin-bottom: 8px;
  }

  .el-tabs__item {
    padding: 0 12px;
    font-size: 13px;
  }

  /* 输入框优化 */
  .el-input__inner,
  .el-textarea__inner {
    font-size: 14px;
  }

  /* 空状态优化 */
  .el-empty {
    padding: 20px 10px;
  }

  .el-empty__description {
    font-size: 12px;
  }
}

/* EJS编辑器页面特定优化 */
@media screen and (max-width: 768px) {
  /* 移动端特定的全屏样式 */
  .ejs-editor-page .el-segmented {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--el-bg-color);
    border-bottom: 1px solid var(--el-border-color-light);
    border-radius: 0;
  }

  /* 面板内容滚动优化 */
  .mobile-panel {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  /* 条件构建器移动端优化 */
  .condition-builder {
    background: var(--el-fill-color-extra-light);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
  }

  /* 代码显示优化 */
  .code-content,
  .result-content pre {
    -webkit-overflow-scrolling: touch;
    word-break: break-all;
    white-space: pre-wrap;
  }

  /* 拖拽元素优化（移动端禁用） */
  .stage-list {
    touch-action: pan-y;
  }

  .drag-handle {
    display: none;
  }
}

/* 平板端优化 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .el-segmented .el-segmented__item {
    font-size: 13px;
    padding: 6px 12px;
  }

  .el-dialog {
    width: 80% !important;
  }
}

/* 移动端内容区域优化 */
@media screen and (max-width: 768px) {
  /* EJS编辑器页面内容区域 */
  .ejs-editor-page .content-container {
    padding: 0 !important;
  }

  /* 工具栏按钮文字截断 */
  .toolbar-right .el-button span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60px;
  }

  /* 状态标签优化 */
  .el-tag {
    font-size: 11px;
    height: 20px;
    line-height: 18px;
    padding: 0 6px;
  }

  /* 输入组合优化 */
  .el-input-group {
    display: flex;
    width: 100%;
  }

  .el-input-group > .el-input {
    flex: 1;
    min-width: 0;
  }
}

/* 触摸友好的交互优化 */
@media (hover: none) and (pointer: coarse) {
  /* 增加按钮的点击区域 */
  .el-button {
    min-height: 32px;
    padding: 6px 12px;
  }

  .el-button.is-circle {
    min-width: 32px;
    min-height: 32px;
  }

  /* 增加选择器的点击区域 */
  .el-select {
    min-height: 32px;
  }

  /* 增加输入框的点击区域 */
  .el-input__inner {
    min-height: 32px;
    line-height: 32px;
  }

  /* 优化拖拽在触摸设备上的体验 */
  .sortable-ghost {
    opacity: 0.4;
  }

  .sortable-chosen {
    opacity: 0.8;
  }
}

/* 键盘弹出时的优化 */
@media screen and (max-height: 500px) and (max-width: 768px) {
  .mobile-panel {
    padding-bottom: 60px;
  }

  .el-dialog {
    margin-top: 10px !important;
  }

  .el-message-box {
    top: 10% !important;
  }
}