/* ===== 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);
  --sidebar-w: clamp(240px, 28vw, 320px);
  --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);
}
@media (max-width: 1024px) {
  [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);
  min-height: min(84dvh, 900px);
}

/* 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; }