/* Fraiha V4.3.2c — HARD FIXED SHELL
   Goal: browser/document NEVER scrolls.
   Sidebar and conversation are separate, fixed viewport panes.
   Branding/logo is intentionally untouched. */

html, body {
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  max-height:100% !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  overscroll-behavior:none !important;
}

body {
  position:fixed !important;
  inset:0 !important;
}

/* Kill document-level layout scrolling completely. */
.appShell {
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  min-height:100dvh !important;
  max-height:100dvh !important;
  overflow:hidden !important;
  display:block !important;
}

/* ---------------- LEFT PANE ---------------- */
.sidebar {
  position:fixed !important;
  top:0 !important;
  bottom:0 !important;
  left:0 !important;
  width:286px !important;
  height:100dvh !important;
  min-height:0 !important;
  max-height:100dvh !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  overscroll-behavior:none !important;
  z-index:70 !important;
}

/* Fixed sidebar controls. */
.sidebar > .brandRow,
.sidebar > .newChat,
.sidebar > .chatSearch,
.sidebar > .nav,
.sidebar > .sectionHead,
.sidebar > .sidebarBottom,
.sidebar > .credit,
.sidebar > .guestHint {
  flex:0 0 auto !important;
}

/* Small independent Projects scroll area. */
.sidebar > .projectList {
  flex:0 1 105px !important;
  min-height:0 !important;
  max-height:105px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain !important;
  -webkit-overflow-scrolling:touch !important;
}

/* ONLY chat history scrolls in the remaining sidebar space. */
.sidebar > .chatList {
  flex:1 1 0 !important;
  min-height:0 !important;
  max-height:none !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-gutter:stable !important;
}

/* ---------------- MAIN CHAT PANE ---------------- */
.main {
  position:fixed !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:286px !important;
  width:auto !important;
  height:100dvh !important;
  min-width:0 !important;
  min-height:0 !important;
  max-height:100dvh !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  overscroll-behavior:none !important;
}

/* Header never scrolls. */
.main > .topbar {
  position:relative !important;
  top:auto !important;
  flex:0 0 90px !important;
  height:90px !important;
  min-height:90px !important;
  max-height:90px !important;
  z-index:35 !important;
}

/* THIS is the conversation scrollbar. */
.main > .messages {
  position:relative !important;
  flex:1 1 0 !important;
  min-height:0 !important;
  max-height:none !important;
  width:100% !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-gutter:stable !important;
  scroll-behavior:smooth !important;
  padding-bottom:190px !important;
}

/* Composer is anchored to MAIN, never to page/document. */
.main > .composerDock {
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  bottom:0 !important;
  transform:translateX(-50%) !important;
  z-index:45 !important;
}

/* ---------------- ARTIFACT PANE ---------------- */
.artifactPane {
  position:fixed !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  height:100dvh !important;
  min-height:0 !important;
  overflow:hidden !important;
  z-index:80 !important;
}
.paneOpen .artifactPane {
  display:flex !important;
  flex-direction:column !important;
  width:min(42vw,680px) !important;
}
.paneOpen .main {
  right:min(42vw,680px) !important;
}
.artifactPane > .paneHead {
  flex:0 0 58px !important;
}
.artifactPane > .paneBody {
  flex:1 1 0 !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain !important;
}

/* ---------------- COLLAPSED SIDEBAR ---------------- */
.sidebarCollapsed .sidebar {
  width:72px !important;
}
.sidebarCollapsed .main {
  left:72px !important;
}

/* Never let wide response/code create document overflow. */
.msg, .bubble, .body, .codeWrap, .body pre, .body table {
  max-width:100% !important;
}
.body pre, .codeWrap, .body table {
  overflow-x:auto !important;
}

/* ---------------- MOBILE ---------------- */
@media (max-width:760px) {
  .main,
  .sidebarCollapsed .main {
    left:0 !important;
    right:0 !important;
    height:100dvh !important;
  }

  .main > .topbar {
    flex-basis:70px !important;
    height:70px !important;
    min-height:70px !important;
    max-height:70px !important;
  }

  .sidebar,
  .sidebarCollapsed .sidebar {
    width:286px !important;
    left:-286px !important;
    transition:left .2s ease !important;
  }

  .mobileSidebarOpen .sidebar {
    left:0 !important;
  }

  .paneOpen .main {
    right:0 !important;
  }

  .paneOpen .artifactPane {
    width:min(94vw,430px) !important;
  }
}