:root{
  --bg:#171717; --panel:#151922; --text:#e6e8ee; --muted:#a7b0c0; --accent:#7aa2ff;
  --user:#2a63ff22; --bot:#ffffff12; --card:#0f1320; --chip:#1b2030; --chipb:#2a3347;
  --radius:14px; --pad:16px; --shadow:0 6px 20px rgba(0,0,0,.25);
  --composer-h:64px;         /* still used for JS sizing if you want */
  --chips-h:44px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}

/* === LAYOUT: header (auto) / chat (fills) / chips (auto) / composer (auto) === */
.wrap{
  /* was: min-height:100dvh; padding created overlay needs */
  height:100dvh;
  max-width:780px;
  margin:0 auto;
  padding:24px 16px 0;       /* keep your top/side padding */
  display:flex;
  flex-direction:column;
}

.site-header{ padding:8px 0 12px }
.logo{ margin:0; font-size:0; line-height:0 }
.logo img{ max-width:180px; height:auto; display:block }
.sub{ margin:.25rem 0 0; color:var(--muted); font-size:14px }

/* The scrollable middle panel */
.chat{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:12px;

  /* was: padding:12px 0 plus padding-bottom calc(...) */
  padding:12px 0;

  /* scroll container */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;

  /* avoid browser scroll anchoring weirdness; we’ll manage jumping ourselves */
  overflow-anchor:none;
  position:relative;
  padding-inline:0;          /* desktop media query adds side padding */
}

/* message bubbles */
.msg{ max-width:min(90%, 620px); padding:12px 14px; border-radius:var(--radius); box-shadow:var(--shadow) }
.msg.user{ align-self:flex-end; background:var(--user) }
.msg.bot{ align-self:flex-start; background:var(--bot) }

/* result cards block */
.msg.results{ background:transparent; box-shadow:none; padding:0; gap:12px; display:flex; flex-direction:column }
.card{ background:var(--card); border-radius:12px; padding:12px; box-shadow:var(--shadow) }
.card .small{ color:var(--muted); font-size:13px; margin:.35rem 0 .5rem }
.actions{ display:flex; gap:8px; flex-wrap:wrap }
.btn{ padding:8px 10px; border-radius:10px; border:1px solid transparent; cursor:pointer }
.btn-sm{ padding:6px 8px; font-size:14px }
.btn-primary{ background:var(--accent); color:#171717; border-color:transparent }
.btn-outline{ background:transparent; color:var(--text); border-color:#2a3347 }
a.btn{ text-decoration:none }
a.btn:hover{ text-decoration:none }

/* chips: now a normal flex child between chat and composer */
.chips{
  flex:0 0 auto;
  position:relative;         /* not sticky to composer anymore */
  z-index:5;

  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:max-content;
  gap:8px;

  margin:0 -16px;            /* full-bleed look */
  padding:8px 16px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;

  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(6px) saturate(1.2);
}
.chips[hidden]{ display:none !important }
.chips::-webkit-scrollbar{ display:none }
.chip{
  background:var(--chip); border:1px solid var(--chipb); color:var(--text);
  padding:8px 12px; border-radius:999px; cursor:pointer; font-size:14px; white-space:nowrap;
}

/* Jump button: sticky INSIDE the chat scroll area */
.jump{
  position:sticky;
  bottom:16px;               /* relative to .chat’s viewport */
  align-self:flex-end;
  margin-left:auto;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid #2a3347;
  background:#121722;
  color:var(--text);
  box-shadow:var(--shadow);
}

/* composer: plain footer, no overlay */
.composer{
  flex:0 0 auto;
  position:relative;         /* was: sticky */
  bottom:auto; left:auto; right:auto;
  padding:10px 0 calc(10px + var(--safe-bottom));
  background:#171717;        /* remove gradient overlay */
  backdrop-filter:none;
  border-top:1px solid #2a3347;
  z-index:6;
}

/* input + send */
.composer textarea{
  width:100%;
  min-height:38px; max-height:36dvh; resize:none;
  padding:12px 14px; font-size:16px; line-height:1.35;
  border-radius:12px; border:1px solid #2a3347; background:#111522; color:var(--text);
  outline:none; box-shadow:var(--shadow)
}
.composer button{
  margin-top:8px; width:100%; padding:12px 14px; font-size:16px; line-height:1.2;
  border-radius:12px; border:0; background:var(--accent);
  color:#171717; font-weight:600; cursor:pointer
}

/* keyboard cosmetics (kept, harmless with new layout) */
.kbd-open .composer{ padding-bottom:10px }

/* helpers */
.small{ font-size:13px; color:var(--muted) }
.sr-only{ position:absolute; clip:rect(1px,1px,1px,1px); padding:0; border:0; height:1px; width:1px; overflow:hidden }
.thinking::after{ content:'▮▮▮'; margin-left:.5ch; animation:blink 1s infinite steps(1) }
@keyframes blink { 50% { opacity:.25 } }

/* Go full-width on larger screens */
@media (min-width: 1024px) {
  .wrap{
    max-width:none;
    width:100%;
    margin:0;
    padding-left:0;
    padding-right:0;
  }
  .site-header{
    padding-left:24px;
    padding-right:24px;
  }
  .chat{
    padding-left:24px;
    padding-right:24px;
  }
  .msg{ max-width:1000px; }
  /* Or truly full-bleed:
  .msg{ max-width:none; }
  .msg.user,.msg.bot{ align-self:stretch; } */
}