/* SKY4R V16 responsive shell: keep the desktop design, adapt density by screen size. */
:root {
  --sky4r-page-pad: clamp(14px, 1.4vw, 28px);
  --sky4r-panel-radius: clamp(12px, 1vw, 20px);
}

html {
  font-size: clamp(14px, 0.82vw, 16px);
}

body {
  min-width: 320px;
  overflow-x: hidden;
}

#root {
  min-height: 100dvh;
}

#root > div > aside {
  max-height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, .55) transparent;
}

#root > div > aside::-webkit-scrollbar {
  width: 6px;
}

#root > div > aside::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, .45);
  border-radius: 999px;
}

main,
[class*="p-8"],
[class*="lg:p-6"],
[class*="lg:p-8"] {
  transition: padding .18s ease, gap .18s ease;
}

.rounded-2xl,
.rounded-xl {
  border-radius: var(--sky4r-panel-radius);
}

table {
  max-width: 100%;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

.overflow-auto,
[class*="overflow-auto"] {
  scrollbar-gutter: stable;
}

/* Large laptop screens */
@media (max-width: 1440px) {
  html { font-size: 15px; }

  main,
  [class*="p-8"] {
    padding: 1.25rem !important;
  }

  aside[class*="w-64"] {
    width: 14.5rem !important;
  }

  aside[class*="w-64"] + * {
    min-width: 0;
  }

  .sky4r-chat-panel {
    width: min(390px, calc(100vw - 34px)) !important;
    height: min(620px, calc(100dvh - 92px)) !important;
  }
}

/* Standard laptops and tablet landscape */
@media (max-width: 1180px) {
  html { font-size: 14.5px; }

  main,
  [class*="p-8"],
  [class*="lg:p-6"],
  [class*="lg:p-8"] {
    padding: 1rem !important;
  }

  aside[class*="w-64"] {
    width: 13.25rem !important;
  }

  header,
  section,
  .grid {
    min-width: 0;
  }

  header[class*="xl:flex-row"] {
    align-items: stretch !important;
  }

  header .grid[class*="min-w-"],
  header div[class*="min-w-"] {
    min-width: 0 !important;
    width: 100%;
  }

  [class*="gap-6"] { gap: 1rem !important; }
  [class*="gap-5"] { gap: .875rem !important; }
  [class*="gap-4"] { gap: .75rem !important; }

  [class*="max-h-[72vh]"] { max-height: 68dvh !important; }
  [class*="max-h-[68vh]"] { max-height: 64dvh !important; }
  [class*="max-h-[62vh]"] { max-height: 58dvh !important; }

  .sky4r-chat-panel {
    right: 12px !important;
    bottom: 58px !important;
    width: min(370px, calc(100vw - 24px)) !important;
  }

  .sky4r-chat-launch {
    right: 12px !important;
    bottom: 12px !important;
  }
}

/* Tablet portrait and narrow laptop split screen */
@media (max-width: 920px) {
  html { font-size: 14px; }

  body {
    overflow-x: auto;
  }

  #root > div {
    min-width: 760px;
  }

  aside[class*="w-64"] {
    width: 11.5rem !important;
  }

  aside[class*="w-64"] img,
  aside[class*="w-64"] svg {
    flex: 0 0 auto;
  }

  main,
  [class*="p-8"],
  [class*="lg:p-6"],
  [class*="lg:p-8"] {
    padding: .85rem !important;
  }

  .grid[class*="grid-cols-4"],
  .grid[class*="md:grid-cols-4"],
  .grid[class*="xl:grid-cols-4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .grid[class*="md:grid-cols-3"],
  .grid[class*="lg:grid-cols-3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  [class*="min-w-[1040px]"],
  [class*="min-w-[1000px]"],
  [class*="min-w-[960px]"] {
    min-width: 900px !important;
  }

  .sky4r-chat-panel {
    width: min(350px, calc(100vw - 20px)) !important;
    height: min(580px, calc(100dvh - 76px)) !important;
  }
}

/* Small tablet/mobile browser: preserve table usability with horizontal scroll. */
@media (max-width: 760px) {
  html { font-size: 13.5px; }

  #root > div {
    min-width: 700px;
  }

  aside[class*="w-64"] {
    width: 10.5rem !important;
  }

  [class*="text-3xl"] { font-size: 1.55rem !important; }
  [class*="text-2xl"] { font-size: 1.35rem !important; }

  [class*="px-6"] { padding-left: .95rem !important; padding-right: .95rem !important; }
  [class*="py-6"] { padding-top: .95rem !important; padding-bottom: .95rem !important; }

  button {
    min-height: 36px;
  }

  .sky4r-chat-panel {
    inset: auto 8px 58px auto !important;
    width: calc(100vw - 16px) !important;
    max-width: 420px !important;
    height: min(560px, calc(100dvh - 74px)) !important;
  }
}