/* --- Mobile-first fixes for HAIL app --- */

/* sensible defaults */
:root {
  --pad: 12px;
  --gap: 10px;
  --radius: 10px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
}

/* constrain overall width on large screens, let it breathe on small */
.main, .container, .page, .wrap, .content {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* top bar */
.topbar, .header, .nav, .app-top, .app-header {
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex-wrap: wrap;      /* allow wrapping on small screens */
}
.topbar .meta, .app-top .meta, .header .meta {
  opacity: .85;
  font-size: .875rem;
}

/* buttons look good full-width on mobile */
button, .btn {
  line-height: 1.2;
  border-radius: var(--radius);
  padding: 10px 14px;
  width: auto;
}

/* common panels/cards */
.panel, .card, .box, .section {
  border-radius: var(--radius);
  padding: var(--pad);
}

/* chat list + prompt boxes */
textarea, input[type="text"], .input, .prompt {
  width: 100%;
  min-height: 44px;
}

/* message bubbles should not overflow */
.message, .bubble {
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* tables in “status / shortcuts” panels */
table { width: 100%; }

/* --------- responsive breakpoints --------- */
@media (max-width: 900px) {
  .desktop-only { display: none !important; }
}

/* phones & narrow tablets */
@media (max-width: 640px) {

  /* shrink fonts slightly */
  body { font-size: 15px; }

  /* top bar becomes a neat grid:
     row 1: back/home + title
     row 2: meta (model/signed-in) + logout button on the right  */
  .topbar, .header, .app-top, .app-header {
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 6px;
  }

  /* long meta text wraps nicely and can be truncated */
  .topbar .meta, .app-top .meta, .header .meta {
    grid-column: 1 / -1;
    font-size: .82rem;
    line-height: 1.25;
  }

  /* primary actions */
  .controls, .actions, .cta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
  }
  .controls .btn, .actions .btn, .cta-row .btn { width: 100%; }

  /* make “Send” button sit under the textarea when tight */
  .prompt-row, .composer, .input-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap);
  }

  /* chat list and quick-prompts stack full width */
  .sidebar, .left-col, .right-col, .split {
    width: 100% !important;
    float: none !important;
  }

  /* buttons inside lists fill the row */
  .chat-list button,
  .quick-prompts button,
  .panel .btn-block {
    width: 100%;
    justify-content: center;
  }

  /* reduce padding to gain space */
  .panel, .card, .box, .section { padding: 10px; }

  /* avoid double scrollbars */
  .scroll, .scroll-y { max-height: none; overflow: visible; }

  /* utility: hide secondary noise on phones */
  .sm-hide,
  .small-hide,
  .meta .detail,
  .stats,
  .foot-notes {
    display: none !important;
  }
}

/* very small phones */
@media (max-width: 380px) {
  body { font-size: 14px; }
  .topbar .meta, .app-top .meta { display: none; } /* keep it ultra clean */
  .controls, .actions, .cta-row { grid-template-columns: 1fr; } /* single column */
}