/* ===== Una MVP Responsive Overrides (frontend-only) ===== */
html, body { height: 100%; }
#root { min-height: 100%; }

/* Constrain and center the app shell */
[data-una-appshell] { max-width: 1200px; margin: 0 auto; width: 100%; padding: 8px; box-sizing: border-box; }

/* Chat panel becomes a column flexbox */
[data-una-chat-panel] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 70vh; /* safety height on desktops */
}

/* Scrollable messages area */
[data-una-feed] {
  flex: 1 1 auto;
  min-height: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Compose area sticks to bottom of panel */
[data-una-compose] {
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: transparent;
  padding-bottom: 4px;
}

/* Footer under compose */
#una-mvp-chat-footer {
  font-size: 12px;
  color: #2e3a2e;
  line-height: 1.45;
  text-align: left;
  margin-top: 6px;
  margin-bottom: 4px;
}

/* Make the left info column collapsible on smaller screens */
@media (max-width: 1000px) {
  [data-una-left] { display: none !important; }
  [data-una-chat-panel] { min-height: calc(100vh - 96px); }
  [data-una-appshell] { padding: 8px 8px 12px; }
}

/* Tighter layout for phones */
@media (max-width: 600px) {
  [data-una-chat-panel] { min-height: calc(100vh - 88px); gap: 6px; }
  #una-mvp-chat-footer { font-size: 11px; margin-top: 4px; }
}

/* Ensure send button remains pinned inside the compose field */
[data-una-compose] .una-send-button {
  position: absolute;
  right: 12px;
  bottom: 12px;
}

/* Prevent wide content from breaking layout */
[data-una-feed] img, [data-una-feed] iframe, [data-una-feed] .message-card {
  max-width: 100%;
  height: auto;
}

/* Trim popovers on narrow screens */
@media (max-width: 480px) {
  .MuiPopover-paper, .MuiMenu-paper { max-width: 90vw; }
}


/* ===== UNA MVP: Global reset & fluid layout (patch 2025-10-13) ===== */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: #0b1e0b url('/Una_MVP_Background.png') center / cover no-repeat fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@supports (-webkit-touch-callout: none) {
  body { background-attachment: scroll; } /* iOS Safari fallback */
}
#root { min-height: 100dvh; }

:root {
  --content-max: 1200px;
  --space: clamp(8px, 1.2vw, 16px);
  /*
   * Adjust the sidebar width so it consumes a smaller portion of the
   * viewport on mid‑sized screens. Previously the sidebar used
   * 28vw which left too little room for the chat panel at widths
   * around 1024px, causing the two columns to overlap. Reducing
   * the percentage here helps avoid that collision while still
   * allowing the sidebar to grow on very large screens.
   */
  --sidebar-w: clamp(240px, 24vw, 300px);
  --radius: 16px;
}

/* App shell wrapper */
[data-una-appshell] {
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
  padding: var(--space);
}

/* 2-col -> 1-col grid when a left sidebar exists */
[data-una-appshell][data-una-grid],
[data-una-appshell]:has([data-una-left]) {
  display: grid;
  grid-template-columns: minmax(0, var(--sidebar-w)) minmax(0, 1fr);
  gap: var(--space);
}
/*
 * Increase the breakpoint for collapsing the grid.  At widths
 * below 1160px the chat and sidebar compete for space; switching
 * to a single column avoids overlap.  Using this breakpoint
 * alongside the explicit sidebar hiding rule ensures both
 * columns collapse gracefully.
 */
@media (max-width: 1160px) {
  [data-una-appshell][data-una-grid],
  [data-una-appshell]:has([data-una-left]) {
    grid-template-columns: 1fr;
  }
}

/* Chat panel fills height; feed scrolls; composer sticks */
[data-una-chat-panel] {
  display: flex;
  flex-direction: column;
  gap: var(--space);
  /*
   * Fill the viewport minus the header height.  Avoid hard
   * maxima like 900px so tall screens (e.g. external monitors)
   * take advantage of the space and the chat never leaves
   * blank vertical bands.  The header height comes from
   * --header-h in :root above.
   */
  min-height: calc(100dvh - var(--header-h));
}

/* Critical for flex scrolling */
[data-una-feed] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

/* Sticky composer at the bottom */
[data-una-composer] {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  background: #fff;
  border-radius: var(--radius);
  padding: var(--space);
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
}

/* Prevent wide content from breaking layout */
[data-una-feed] img,
[data-una-feed] iframe,
[data-una-feed] video,
[data-una-feed] .message-card {
  max-width: 100%;
  height: auto;
}

/* Fluid typography & spacing */
html { font-size: 100%; }
body { font-size: clamp(14px, 1.05vw, 18px); line-height: 1.5; }
:root { --gap-s: clamp(6px, .6vw, 10px); --gap-m: clamp(10px, 1vw, 16px); }

/* Mobile correctness */
@media (max-width: 600px) {
  [data-una-appshell] { padding: calc(var(--space) * 0.8); }
  [data-una-chat-panel] { min-height: 84dvh; }
  #una-mvp-chat-footer { font-size: 11px; margin-top: 4px; }
}

/* Guardrails: avoid horizontal scroll on tiny phones */
@media (max-width: 400px) {
  [data-una-appshell], [data-una-appshell] * { min-width: 0 !important; }
}

/* Replace brittle 100vh with dvh where possible via override hooks */
[data-una-fullheight] { min-height: 100dvh !important; }


/* === UNA Patch 2: robustness for resize & chat feed === */
[data-una-appshell] > * { min-width: 0 !important; }        /* prevent grid/flex overflow */
[data-una-chat-panel] > * { min-width: 0 !important; }

/* Guarantee chat area stays large even after sending messages */
[data-una-chat-panel] { min-height: calc(100dvh - var(--header-h, 96px)); }
@media (max-width: 600px) {
  [data-una-chat-panel] { min-height: calc(100dvh - var(--header-h, 72px)); }
}
[data-una-feed] { min-height: 50dvh; }                      /* stay roomy on short pages */

/* Neutralize any app-level min-width >= 370px in the chat area */
[data-una-appshell] * { min-width: max(0px, min(100%, 360px)) !important; }
@media (max-width: 420px) {
  [data-una-appshell] * { min-width: 0 !important; }
}

/* Make sure menus/popovers fit small screens gracefully */
.MuiPopover-paper, .MuiMenu-paper { max-width: 92vw; }

/* === USER DOC: Base layout & chat fixes (verbatim import) === */

/* Base */
html, body, #root { height: 100%; }
body { margin: 0; overflow-x: hidden; }
#root { min-height: 100dvh; display: flex; flex-direction: column; }

/* App shell and 2-col layout */
:root {
  --space: clamp(8px, 1.2vw, 16px);
  /*
   * Keep the custom sidebar width consistent with the
   * definition above.  Using 24vw here reduces the fixed
   * percentage so the chat panel has more breathing room.
   */
  --sidebar-w: clamp(240px, 24vw, 300px);
  --header-h: 64px; /* adjust to your header */
}

[data-una-appshell] {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, var(--sidebar-w)) minmax(0, 1fr);
  gap: var(--space);
  padding: var(--space);
  min-width: 0;                /* critical in grid parent */
}

@media (max-width: 1024px) {
  [data-una-appshell] { grid-template-columns: 1fr; }
}

/* Chat column fills height and scrolls internally */
[data-una-chat-panel]{
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--header-h));
  min-width: 0;                /* prevents overflow pushing layout */
}

[data-una-feed]{
  flex: 1 1 auto;
  min-height: 0;               /* allows the child to shrink and scroll */
  overflow-y: auto;
  overscroll-behavior: contain;
}

[data-una-composer]{
  flex: 0 0 auto;
  padding: var(--space);
  background: #fff;
  border-radius: 14px;
}

/* Prevent any child from causing horizontal scroll */
[data-una-feed] img,
[data-una-feed] iframe,
[data-una-feed] .message-card { max-width: 100%; height: auto; }

/* textarea auto-grow but capped */
[data-una-composer] textarea{
  width: 100%;
  resize: none;
  max-height: 40dvh;        /* cap so it never eats the page */
  overflow-y: auto;
  line-height: 1.4;
}

/*
 * Override breakpoints to hide the left sidebar sooner.  The
 * original responsive rules only collapsed the layout at
 * 1000px/1024px, which still allowed the sidebar to render on
 * typical laptop widths (≈1024px) and overlap the chat panel.
 * By hiding the sidebar and forcing a single column below
 * ~1160px, the interface remains stable across common
 * resolutions without relying on browser zoom.  The 1160px value
 * corresponds to the minimum width required for both a 300px
 * sidebar and a comfortable chat panel with margins.
 */
@media (max-width: 1160px) {
  /* Collapse to one column and hide the left column entirely */
  [data-una-appshell] { grid-template-columns: 1fr !important; }
  [data-una-left] { display: none !important; }
}