/* ==========================================================================
   NexusAI Studio — 响应式增强层 (Responsive Enhancement Layer)
   --------------------------------------------------------------------------
   加载顺序：置于 Tailwind CDN 之后，用于补足 Tailwind 在移动端 / 平板 / 折叠屏
   上覆盖不到的部分（安全区、触控目标、iOS 输入缩放、溢出、弹层高度等）。
   所有规则均以「只增强、不改设计」为原则：不覆盖既有配色与字体体系。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 设计令牌：断点与节奏
   -------------------------------------------------------------------------- */
:root {
  --nx-safe-top: env(safe-area-inset-top, 0px);
  --nx-safe-right: env(safe-area-inset-right, 0px);
  --nx-safe-bottom: env(safe-area-inset-bottom, 0px);
  --nx-safe-left: env(safe-area-inset-left, 0px);
  --nx-header-h: 4rem; /* 与 header 的 h-16 对齐 */
  --nx-tap: 44px;      /* iOS HIG / Material 建议的最小触控尺寸 */
}

/* --------------------------------------------------------------------------
   1. 基础层：视口、滚动、点击反馈
   -------------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%; /* 横屏时禁止 iOS 自动放大字号 */
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  /* 用 dvh 处理移动端浏览器地址栏收放导致的 100vh 抖动 */
  min-height: 100vh !important;
  min-height: 100dvh !important;
  overscroll-behavior-y: none; /* 禁掉整页橡皮筋回弹，避免误触下拉刷新 */
  -webkit-tap-highlight-color: transparent;
}

/* 移动端点击反馈：用极淡的品牌色代替系统灰块 */
@media (hover: none) {
  button:active,
  [onclick]:active,
  label[for]:active {
    opacity: .72;
  }
}

/* 长英文 / URL / 代码不撑破容器 */
.break-anywhere {
  overflow-wrap: anywhere;
  word-break: break-word;
}
body,
p,
h1, h2, h3, h4,
li,
td, th {
  overflow-wrap: break-word;
}

/* flex / grid 子项默认 min-width:auto 会导致省略号失效、内容撑破 */
.flex > *,
.grid > * {
  min-width: 0;
}

/* 键盘可达性：页面里按钮普遍写了 focus:outline-none，键盘用户会失去焦点提示。
   这里只对「交互元素」补齐焦点环，输入框保留其原有的 focus:border-* 变色提示，避免双重描边。 */
button:focus-visible,
a:focus-visible,
[onclick]:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid #3f8a80 !important;
  outline-offset: 2px;
  border-radius: 8px;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
}

/* 尊重系统的「减弱动态效果」 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 细滚动条（桌面），触屏保留系统惯性滚动 */
@media (pointer: fine) {
  * {
    scrollbar-width: thin;
    scrollbar-color: #b6c5c2 transparent;
  }
  *::-webkit-scrollbar { width: 8px; height: 8px; }
  *::-webkit-scrollbar-track { background: transparent; }
  *::-webkit-scrollbar-thumb {
    background: #d5e1df;
    border: 2px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
  }
  *::-webkit-scrollbar-thumb:hover { background: #b6c5c2; background-clip: content-box; }
}

/* 隐藏滚动条但保留滚动能力（横向卡片流用） */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* 横向滑动容器：移动端卡片列表、代码块、宽表格 */
.nx-scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
.nx-scroll-x > * { scroll-snap-align: start; }

/* --------------------------------------------------------------------------
   2. 顶栏与侧栏：安全区 + 移动端抽屉
   -------------------------------------------------------------------------- */
header.sticky {
  padding-top: var(--nx-safe-top);
  padding-left: max(.75rem, var(--nx-safe-left));
  padding-right: max(.75rem, var(--nx-safe-right));
  height: auto;
  min-height: calc(var(--nx-header-h) + var(--nx-safe-top));
}

/* 移动端侧栏：更宽的可读区域 + 支持内部滚动 + 底部安全区 */
@media (max-width: 1023.98px) {
  #appSidebar {
    width: min(88vw, 20rem);
    padding-top: calc(var(--nx-header-h) + var(--nx-safe-top));
    padding-bottom: var(--nx-safe-bottom);
    max-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 24px 60px -22px rgba(31, 46, 43, .45);
    will-change: transform;
  }
  /* 抽屉打开时锁住背景滚动 */
  body.nx-drawer-open { overflow: hidden; }
}

/* 侧栏里的主导航按钮：移动端撑满触控高度 */
@media (max-width: 1023.98px) {
  #appSidebar button[onclick^="switchWorkspace"] {
    min-height: var(--nx-tap);
    padding-top: .625rem;
    padding-bottom: .625rem;
  }
}

/* 主内容区：避免移动端底部被安全区 / 手势条遮挡 */
main,
#workspace-agent {
  scroll-margin-top: calc(var(--nx-header-h) + var(--nx-safe-top));
}
body { padding-bottom: var(--nx-safe-bottom); }

/* --------------------------------------------------------------------------
   3. 表单控件：消除 iOS 聚焦缩放、放大触控热区
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  /* iOS Safari 在字号 < 16px 的输入框聚焦时会强制放大整个页面 */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px !important;
    line-height: 1.5;
  }

  /* 触控热区：按钮与可点标签至少 40px 高 */
  button,
  label[for],
  input[type="checkbox"],
  input[type="radio"] {
    touch-action: manipulation; /* 去掉 300ms 点击延迟 */
  }
  button:not([class*="h-"]):not([class*="p-0"]) { min-height: 40px; }

  /* 搜索框等固定宽度在窄屏会溢出，改为弹性 */
  #kbFilterInput { width: 100% !important; }
}

/* 复选框在浅色主题下的强调色（沿用品牌薄荷青） */
input[type="checkbox"],
input[type="radio"] { accent-color: #3f8a80; }

/* 文件选择按钮的隐藏 input 不参与布局 */
input[type="file"].hidden { display: none !important; }

/* --------------------------------------------------------------------------
   4. 弹层：小屏全高可滚，键盘弹出不被遮挡
   -------------------------------------------------------------------------- */
#apiConfigModal > div,
#voiceCallModal > div,
#authAccountModal > div,
#addHubSiteModal > div,
#newKbDocModal > div {
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

@media (max-width: 640px) {
  /* 小屏上弹层改为底部抽屉式贴边，视觉更稳、可达性更好 */
  #apiConfigModal,
  #voiceCallModal,
  #authAccountModal,
  #addHubSiteModal,
  #newKbDocModal {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  #apiConfigModal > div,
  #voiceCallModal > div,
  #authAccountModal > div,
  #addHubSiteModal > div,
  #newKbDocModal > div {
    width: 100%;
    max-width: 100%;
    border-radius: 1.25rem 1.25rem 0 0 !important;
    max-height: 90dvh;
    padding-bottom: calc(1.25rem + var(--nx-safe-bottom));
  }
}

/* --------------------------------------------------------------------------
   5. 提示条 Toast：移动端改为顶部居中，避免压住输入区
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  #toastContainer {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: calc(1rem + var(--nx-safe-bottom));
    width: max-content;
    max-width: calc(100vw - 2rem);
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   6. 各工作区：内容溢出与栅格收敛
   -------------------------------------------------------------------------- */

/* 知识库 / 写作 / 生图 / 生视频顶部面板：标题与操作在窄屏堆叠更清晰 */
@media (max-width: 639.98px) {
  #workspace-knowledge > div:first-child,
  #workspace-writing > div:first-child,
  #workspace-image > div:first-child,
  #workspace-video > div:first-child,
  #workspace-hub > div:first-child {
    padding: 1rem;
  }
  #workspace-knowledge h1,
  #workspace-writing h1,
  #workspace-image h1,
  #workspace-video h1,
  #workspace-hub h1 {
    font-size: 1.05rem;
    line-height: 1.4;
  }
  /* 顶部操作按钮组占满一行、等分排列，避免文字换行挤压 */
  #workspace-knowledge > div:first-child > div:last-child,
  #workspace-image > div:first-child > div:last-child {
    width: 100%;
  }
  #workspace-knowledge > div:first-child > div:last-child > *,
  #workspace-image > div:first-child > div:last-child > * {
    flex: 1 1 auto;
    justify-content: center;
  }
  /* 工作区左右内边距收窄，为内容让出宽度 */
  section[id^="workspace-"] { padding-left: .875rem; padding-right: .875rem; }
}

/* 图片主预览：小屏限制高度，避免把工具栏顶出视野 */
@media (max-width: 767.98px) {
  #activeImagePreview { max-height: 46dvh !important; }
}

/* 视频监视器画布：等比缩放，窄屏内不溢出 */
#videoPreviewCanvas {
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
}

/* 分镜 / 图库 / 风格栅格：手机端两列，超窄屏一列 */
@media (max-width: 359.98px) {
  #imgStyleGrid,
  #imageGalleryGrid,
  #videoStoryboardGrid { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
}

/* 对话气泡：移动端占宽放开，桌面端保持收窄以维持阅读节奏 */
@media (max-width: 639.98px) {
  #chatMessagesContainer .max-w-2xl,
  #chatMessagesContainer .max-w-3xl { max-width: 88% !important; }
}

/* 长代码块 / Markdown 表格在移动端横向滚动而非撑破气泡 */
.nx-prose pre,
.nx-prose table,
#chatMessagesContainer pre,
#chatMessagesContainer table {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   7. 折叠屏 / 超宽屏
   -------------------------------------------------------------------------- */
/* 折叠屏展开后（如 Surface Duo 720px 双屏）恰好落在断点缝隙，这里补一档 */
@media (min-width: 640px) and (max-width: 767.98px) {
  #aiHubCardsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 横屏手机：压缩顶栏与区块留白，把高度还给内容 */
@media (max-height: 480px) and (orientation: landscape) {
  header.sticky { min-height: 3.25rem; }
  section[id^="workspace-"] { padding-top: .75rem; padding-bottom: .75rem; }
  #activeImagePreview { max-height: 40dvh !important; }
}

/* --------------------------------------------------------------------------
   8. 运行时辅助类（由 nexus-api.js 动态挂载）
   -------------------------------------------------------------------------- */
/* 同步状态指示点 */
#nxSyncDot {
  width: .5rem; height: .5rem; border-radius: 999px;
  background: #95c4a8; display: inline-block;
  transition: background .3s ease;
}
#nxSyncDot[data-state="syncing"] { background: #d9bf8a; animation: nxPulse 1.1s ease-in-out infinite; }
#nxSyncDot[data-state="offline"] { background: #b6c5c2; }
#nxSyncDot[data-state="error"]   { background: #c28b82; }

@keyframes nxPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.8); }
}

/* 账户同步胶囊：窄屏只留图标 */
#nxSyncChip { white-space: nowrap; }

/* 打印：只保留正文，隐藏交互外壳 */
@media print {
  header.sticky, #appSidebar, #toastContainer, .nx-no-print { display: none !important; }
  body { background: #fff !important; }
  section[id^="workspace-"] { display: block !important; }
}