client/src/css/_responsive.scss

// 响应式样式模块
// 依赖统一的断点配置（见 _breakpoints.scss）
@use "breakpoints" as *;

// ==================== Mixins ====================

// 公共容器样式：100%宽度，border-box，可见溢出
@mixin full-width-container {
  width: 100%;
  box-sizing: border-box;
}

// 移动端滚动容器：使用 body 滚动条，禁止横向滚动
@mixin mobile-scroll-container {
  overflow: visible;  // 确保不使用自己的滚动条
  overflow-x: hidden;  // 禁止横向滚动
  overflow-y: visible;  // 允许垂直滚动，使用body的滚动条
}

// 全宽自适应容器：100%宽度，不超过父容器
@mixin full-width-adaptive {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

// 平板及以上（≥768px）- 桌面端样式
@media (min-width: $breakpoint-tablet) {
  // 桌面端：html 和 body 使用固定高度
  html {
    height: 100%;  // 确保html高度为100%
  }
  
  body {
    height: 100vh;  // 使用100vh确保填满视口，消除底部空白
    min-height: 100vh;  // 同时设置min-height作为备用
  }
  
  .main_frame {
    position: fixed;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;  // 使用100%而不是100vh，基于body的高度，消除底部空白
    min-height: 100vh;  // 确保至少填满视口
    display: flex;  // 保持flex布局用于左右面板
    overflow: hidden;
  }

  // 左侧内容区域
  .left_panel {
    flex: 0 0 1200px;  // 设置一个合理的默认值，会被JS动态覆盖
    min-width: 10vw;   // 最小宽度为屏幕宽度的10%
    max-width: 90vw;    // 最大宽度为屏幕宽度的90%
    padding: 20px;
    overflow-y: auto;
    overflow-x: hidden;  // 防止水平滚动，确保内容不会被遮挡
    border-right: 1px solid var(--border-color);
    background-color: var(--bg-color);
    box-sizing: border-box;  // 确保padding包含在宽度计算中
    transition: background-color 0.3s ease, border-color 0.3s ease;
    
    // 确保所有直接子元素都能正确适配
    > * {
      max-width: 100%;  // 确保子元素不超过容器宽度
      box-sizing: border-box;  // 确保宽度计算正确
    }
  }

  // 分割线样式
  .resizer {
    width: 8px;
    background: var(--resizer-bg);
    cursor: col-resize;
    position: relative;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
  }

  .resizer::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-color);
    transform: translateX(-50%);
    transition: background-color 0.3s ease;
  }

  .resizer:hover::before {
    background: var(--resizer-hover);
  }

  // 右侧可视化结果区域
  .right_panel {
    flex: 1;  // 占据剩余空间
    padding: 0;  // 移除 padding，让 LMF 层填充整个区域
    overflow-y: auto;
    overflow-x: hidden;  // 禁止横向滚动，但允许内容溢出以显示发光效果
    background: var(--panel-bg);
    transition: background-color 0.3s ease;
    position: relative;  // 为绝对定位的子元素提供定位上下文
  }

  // 确保 #results 容器不裁剪发光效果，并填充整个 right_panel
  #results {
    @include full-width-container;
    overflow: visible;  // 确保发光效果不被裁剪
    position: relative;  // 相对定位，让内容自然扩展
    min-height: 100%;  // 至少填充整个 right_panel
    margin: 0;  // 移除 margin-top
  }

  // GLTR 文本容器桌面端布局样式
  .LMF {
    @include full-width-container;
    min-height: 100%;  // 至少填充整个 #results 容器
    // 添加 padding 为发光效果留出空间（drop-shadow 最大约 16px）
    padding: 20px;  // 为发光效果留出足够空间，略大于最大阴影范围
    // 桌面端：容器高度通常超过350px，不需要额外的底部padding
    // 只在容器高度不足时，min-height会生效保证至少350px（在基础样式中定义）
    overflow: visible;  // 确保发光效果不被裁剪，不使用自己的滚动条
  }

  .floating_content {
    @include full-width-adaptive;
  }
}

// 移动端响应式样式（≤767px）
@media (max-width: $breakpoint-mobile) {
  // 重置 html 和 body，避免默认 margin/padding 和高度问题
  html {
    margin: 0;
    padding: 0;
    height: auto;  // 不使用固定高度，避免100vh问题
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    touch-action: pan-y;
  }
  
  body {
    margin: 0;
    padding: 0;
    overflow-y: auto;  // 允许垂直滚动
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    height: auto;  // 不使用100vh，让高度自适应内容
    min-height: 0;  // 移除最小高度限制
    touch-action: pan-y;  // 允许垂直触摸滑动
    -webkit-overflow-scrolling: touch;  // iOS平滑滚动
  }
  
  // 主框架移动端样式
  .main_frame {
    position: relative;  // 覆盖桌面端的固定定位
    height: auto;  // 覆盖桌面端的100vh，避免移动浏览器UI高度不一致
    min-height: 0;  // 移除最小高度限制
    flex-direction: column;
    overflow-x: hidden;  // 禁止横向滚动
    overflow-y: visible;  // 允许内容溢出，由body滚动
    overflow: visible;  // 确保完全不阻止滚动
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    touch-action: pan-y;  // 允许垂直触摸滑动
  }
  
  // 左侧面板：全宽显示，不使用自己的滚动条，使用顶层滚动条
  .left_panel {
    flex: 0 0 auto;  // 不固定高度，根据内容自适应
    @include full-width-adaptive;
    min-width: 100%;  // 覆盖桌面端的 min-width: 10vw
    padding: 15px;  // 减小内边距以适应小屏幕
    border-right: none;  // 移除右边框
    border-bottom: 1px solid var(--border-color);  // 添加底部分隔线
    @include mobile-scroll-container;
    // 移动端：限制触摸滑动只能垂直方向
    touch-action: pan-y;  // 只允许垂直方向的触摸滑动
  }
  
  // 隐藏分割线（移动端不需要）
  .resizer {
    display: none;
  }
  
  // 右侧面板，确保不使用固定高度
  .right_panel {
    flex: 1 1 auto;
    @include full-width-adaptive;
    padding: 0;
    overflow-x: hidden;
    overflow-y: hidden;  // 窄屏模式下禁用滚动条，使用body滚动
    overflow: hidden;  // 彻底禁用滚动条，防止出现多余的滚动条
    background: var(--panel-bg);
    min-height: 0;  // 移除最小高度，让内容自然展开
    height: auto;  // 高度自适应内容
    position: relative;
    touch-action: pan-y;
  }
  
  // 右侧面板的结果容器，移除强制高度，不使用自己的滚动条
  #results {
    padding: 0;
    margin: 0;
    position: relative;
    @include full-width-container;
    @include mobile-scroll-container;
    min-height: 0;  // 移除100%高度限制，让内容自然展开
    height: auto;  // 高度自适应内容
  }

  // 文本可视化容器，移除强制高度，不使用自己的滚动条，使用顶层滚动条
  .LMF {
    position: relative;
    @include full-width-container;
    @include mobile-scroll-container;
    min-height: 350px;  // 确保至少350px高度以容纳tooltip（内容不足时生效）
    height: auto;  // 高度自适应内容
    padding: 15px 12px;  // 基础padding
    // 移除固定的大padding-bottom，min-height已保证最小高度
    font-size: 12pt;  // 比body的9pt大，使文本更易读
    word-wrap: break-word;
    overflow-wrap: break-word;
    
    // 启用 minimap 时，右侧增加 minimap 宽度
    &.minimap-enabled {
      padding-right: calc(12px + var(--minimap-width));
    }
  }
  
  // 加载遮罩层，移除强制高度
  .text-loading-overlay {
    min-height: 0;  // 移除100%高度限制
    height: auto;  // 由于使用绝对定位和top/bottom:0，会自动填充，但确保不强制最小高度
  }
  
  // 容器在移动端调整padding
  .container {
    padding: 10px;  // 减小padding以适应小屏幕
    box-sizing: border-box;  // 复用 border-box，但不需要 full-width-container（可能有特定宽度需求）
  }
  
  // 调整浮动内容宽度，不使用自己的滚动条
  .floating_content {
    @include full-width-adaptive;
    @include mobile-scroll-container;
  }
  
  // 调整统计图容器
  #stats {
    order: 2;
    padding: 0 5px;  // 增加左右padding，避免直方图被遮挡
    @include full-width-adaptive;
    
    svg {
      @include full-width-adaptive;
      height: auto;
      // 确保SVG可以按比例缩小
      display: block;
    }
  }
  
  // 确保直方图容器不会超出，不使用自己的滚动条
  #all_result {
    @include full-width-container;
    @include mobile-scroll-container;
    padding: 0;
  }
  
  // 调整结果区域顺序
  #res {
    order: 1;
  }
  
  // 移动端：调整首页标题栏的 negative margin，保留顶部间距避免被遮挡
  .dark-mode-toggle-wrapper {
    margin: 0 -15px 10px -15px;  // 移动端的 left_panel padding 是 15px，顶部不使用负margin
    // 添加安全区域支持（iOS刘海屏等）
    padding-top: max(10px, env(safe-area-inset-top));
  }
  
  
  // 调整按钮大小
  button {
    padding: 8px 12px;
    font-size: 11pt;
  }
  
  // 调整表单控件字体，防止 iOS 自动缩放
  textarea {
    min-height: 80px;
    font-size: 16px;  // 设置为至少 16px，防止 iOS 自动缩放
  }

  input[type="text"],
  input[type="url"],
  input[type="search"],
  input[type="email"],
  input[type="number"],
  input[type="tel"],
  input[type="password"],
  select {
    font-size: 16px;  // 所有文本类输入控件在移动端统一使用 16px
  }
}