/*
 * 红客 AI 全系统手机 / 平板适配层
 * 目标：不改变桌面信息架构，在 1024px 及以下切换为触控优先布局。
 */

html,
body,
#root {
  width: 100%;
  height: 100%;
  min-height: 100dvh;
}

img,
video,
canvas,
svg,
iframe {
  max-width: 100%;
}

pre,
code {
  max-width: 100%;
}

pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1024px) {
  :root {
    --qm-safe-top: env(safe-area-inset-top, 0px);
    --qm-safe-right: env(safe-area-inset-right, 0px);
    --qm-safe-bottom: env(safe-area-inset-bottom, 0px);
    --qm-safe-left: env(safe-area-inset-left, 0px);
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    overscroll-behavior: none;
  }

  #root,
  .system-shell,
  .landing-shell,
  .system-shell [class~="h-screen"],
  .landing-shell [class~="h-screen"] {
    height: 100dvh !important;
    min-height: 100dvh !important;
  }

  .system-shell,
  .landing-shell,
  .system-shell > .flex-1,
  .landing-shell > .flex-1 {
    min-width: 0;
    max-width: 100vw;
  }

  /* 平板也使用与手机一致的导航抽屉。 */
  .system-shell > button[aria-label="打开菜单"] {
    display: flex !important;
    top: calc(0.75rem + var(--qm-safe-top));
    left: calc(0.75rem + var(--qm-safe-left));
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  .system-shell:has(> button[aria-label="打开菜单"]) > .flex-1 {
    padding-top: calc(3.75rem + var(--qm-safe-top));
  }

  .system-shell > div.fixed.inset-y-0.left-0.z-50 {
    width: min(360px, 88vw) !important;
    padding-top: var(--qm-safe-top);
    padding-bottom: var(--qm-safe-bottom);
  }

  /* 页面容器在平板上不再保留桌面级大留白。 */
  .system-shell [class~="px-12"],
  .system-shell [class~="px-10"],
  .system-shell [class~="px-8"] {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .system-shell [class~="p-12"],
  .system-shell [class~="p-10"],
  .system-shell [class~="p-8"] {
    padding: 1.5rem !important;
  }

  .system-shell [class~="max-w-7xl"],
  .system-shell [class~="max-w-6xl"],
  .system-shell [class~="max-w-5xl"],
  .system-shell [class~="max-w-4xl"] {
    width: 100%;
  }

  /* 固定宽弹窗与抽屉保持在可视区内。 */
  .system-shell [class*="w-[860px]"],
  .system-shell [class*="w-[540px]"],
  .system-shell [class*="w-[520px]"],
  .system-shell [class*="w-[480px]"],
  .system-shell [class*="w-[440px]"],
  .system-shell [class*="w-[380px]"],
  .system-shell [class*="w-[360px]"] {
    width: min(100%, calc(100vw - 2rem - var(--qm-safe-left) - var(--qm-safe-right))) !important;
    max-width: calc(100vw - 2rem - var(--qm-safe-left) - var(--qm-safe-right)) !important;
  }

  .system-shell [class*="h-[85vh]"],
  .system-shell [class*="max-h-[720px]"] {
    height: min(88dvh, 720px) !important;
    max-height: calc(100dvh - 1.5rem - var(--qm-safe-top) - var(--qm-safe-bottom)) !important;
  }

  .system-shell div[data-sonner-toaster] {
    left: calc(0.75rem + var(--qm-safe-left)) !important;
    right: calc(0.75rem + var(--qm-safe-right)) !important;
    bottom: calc(0.75rem + var(--qm-safe-bottom)) !important;
    width: auto !important;
  }

  .system-shell table {
    max-width: 100%;
  }

  .system-shell [class~="overflow-x-auto"] {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  .system-shell [class~="sticky"][class~="bottom-0"],
  .system-shell [class~="fixed"][class~="bottom-0"] {
    padding-bottom: max(0.75rem, var(--qm-safe-bottom));
  }

  /* 旧式固定侧栏工作台在平板上缩窄，给主内容保留空间。 */
  .system-shell [class*="w-[320px]"][class*="shrink-0"],
  .system-shell [class*="w-[300px]"][class*="shrink-0"],
  .system-shell [class*="w-[280px]"][class*="shrink-0"],
  .system-shell [class*="w-[270px]"][class*="shrink-0"],
  .system-shell [class*="w-[260px]"][class*="shrink-0"] {
    width: 240px !important;
    min-width: 240px !important;
  }

  .system-shell [class*="grid-cols-["] {
    min-width: 0;
  }

  .system-shell [class~="text-6xl"] {
    font-size: clamp(2.25rem, 6vw, 3.75rem) !important;
  }

  .system-shell [class~="text-5xl"] {
    font-size: clamp(2rem, 5vw, 3rem) !important;
  }

  .system-shell [class~="text-4xl"] {
    font-size: clamp(1.75rem, 4.5vw, 2.25rem) !important;
  }
}

@media (max-width: 767px) {
  .system-shell [class~="px-12"],
  .system-shell [class~="px-10"],
  .system-shell [class~="px-8"],
  .system-shell [class~="px-6"],
  .system-shell [class~="px-5"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .system-shell [class~="py-12"],
  .system-shell [class~="py-10"],
  .system-shell [class~="py-8"] {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }

  .system-shell [class~="p-12"],
  .system-shell [class~="p-10"],
  .system-shell [class~="p-8"],
  .system-shell [class~="p-6"] {
    padding: 1rem !important;
  }

  .system-shell [class~="gap-8"],
  .system-shell [class~="gap-6"] {
    gap: 1rem !important;
  }

  .system-shell [class*="grid-cols-["] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .system-shell [class~="grid-cols-8"],
  .system-shell [class~="grid-cols-7"],
  .system-shell [class~="grid-cols-6"],
  .system-shell [class~="grid-cols-5"],
  .system-shell [class~="grid-cols-4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .system-shell [class~="grid-cols-3"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* 带固定工具侧栏的旧工作台在手机上改为上下布局。 */
  .system-shell .flex:has(> [class*="w-[320px]"][class*="shrink-0"]),
  .system-shell .flex:has(> [class*="w-[300px]"][class*="shrink-0"]),
  .system-shell .flex:has(> [class*="w-[280px]"][class*="shrink-0"]),
  .system-shell .flex:has(> [class*="w-[270px]"][class*="shrink-0"]),
  .system-shell .flex:has(> [class*="w-[260px]"][class*="shrink-0"]) {
    flex-direction: column !important;
  }

  .system-shell .flex > [class*="w-[320px]"][class*="shrink-0"],
  .system-shell .flex > [class*="w-[300px]"][class*="shrink-0"],
  .system-shell .flex > [class*="w-[280px]"][class*="shrink-0"],
  .system-shell .flex > [class*="w-[270px]"][class*="shrink-0"],
  .system-shell .flex > [class*="w-[260px]"][class*="shrink-0"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: 36dvh;
    overflow: auto;
    border-right-width: 0 !important;
    border-left-width: 0 !important;
    border-bottom: 1px solid var(--pxs-border-default);
  }

  .system-shell [class*="min-w-[300px]"],
  .system-shell [class*="min-w-[260px]"],
  .system-shell [class*="min-w-[240px]"],
  .system-shell [class*="min-w-[220px]"],
  .system-shell [class*="min-w-[180px]"] {
    min-width: 0 !important;
  }

  .system-shell table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .system-shell iframe {
    width: 100% !important;
    min-height: 50dvh;
  }

  .system-shell [class~="rounded-3xl"] {
    border-radius: 1rem !important;
  }

  .system-shell [class~="text-3xl"] {
    font-size: clamp(1.5rem, 7vw, 1.875rem) !important;
  }
}

@media (max-width: 390px) {
  .system-shell [class~="grid-cols-4"],
  .system-shell [class~="grid-cols-3"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .system-shell [class~="px-4"] {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

@media (pointer: coarse) {
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  select {
    min-height: 44px;
    touch-action: manipulation;
  }

  input,
  textarea,
  select {
    font-size: 16px !important;
  }

  .card-hover:hover,
  .emoji-hover:hover {
    transform: none;
  }
}

@media (max-height: 600px) and (orientation: landscape) and (max-width: 1024px) {
  .system-shell:has(> button[aria-label="打开菜单"]) > .flex-1 {
    padding-top: calc(3.25rem + var(--qm-safe-top));
  }

  .system-shell > button[aria-label="打开菜单"] {
    top: calc(0.5rem + var(--qm-safe-top));
  }

  .system-shell .flex > [class*="w-[320px]"][class*="shrink-0"],
  .system-shell .flex > [class*="w-[300px]"][class*="shrink-0"],
  .system-shell .flex > [class*="w-[280px]"][class*="shrink-0"],
  .system-shell .flex > [class*="w-[270px]"][class*="shrink-0"],
  .system-shell .flex > [class*="w-[260px]"][class*="shrink-0"] {
    max-height: 44dvh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .system-shell *,
  .system-shell *::before,
  .system-shell *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}