:root {
  --bg1:#f7fbff; --bg2:#e8f0ff; --ink:#1f2937; --muted:#64748b;
  --bubble:#ffffff; --user:#d1fae5; --para:#e0e7ff; --asst:#fff7ed; --brand:#7c3aed;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;color:var(--ink);background:linear-gradient(180deg,var(--bg1),var(--bg2));min-height:100vh}

.app-shell{display:flex;flex-direction:column;min-height:100vh}
.topbar{display:flex;gap:10px;justify-content:space-between;align-items:center;padding:10px 14px;background:#fff;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:50}
.topbar .brand{font-weight:700;color:var(--brand)}
.topbar .topnav{display:flex;gap:10px;align-items:center}
.navlink{color:#2563eb;text-decoration:none}
.menu-btn{display:none;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:6px 10px;font-size:18px}
.usage{color:var(--muted);font-size:.9rem}
.badge{padding:2px 8px;border-radius:999px;background:#fde68a;color:#92400e;margin-left:8px;font-size:.8rem}

.content{padding:12px;flex:1;display:flex;flex-direction:column}

/* ===== Desktop-first chat layout ===== */
.chat-layout{
  display:grid;
  grid-template-columns: 320px minmax(0,1fr);
  gap:14px;
  flex:1;
  min-height:calc(100vh - 90px);
}

.sidebar{
  position:sticky; top:12px;
  height:calc(100vh - 120px);
  overflow-y:auto;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
}
.sidebar-header{padding:12px;border-bottom:1px solid #e5e7eb;background:#fff;position:sticky;top:0;z-index:1}
.sidebar .conv-list{list-style:none;margin:0;padding:8px}
.sidebar .conv-list li{padding:10px;border-radius:10px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar .conv-list li:hover{background:#f3f4f6}

.chat-pane{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  min-height:0; /* allow children to size */
}
.thread{
  flex:1; min-height:0;
  overflow:auto;
  padding:16px;
  display:flex; flex-direction:column; gap:10px;
  scroll-behavior:smooth;
  background: #fafcff;
}
.composer{
  display:flex; gap:8px; padding:12px; border-top:1px solid #e5e7eb; background:#fff;
}
.composer input{flex:1;padding:12px;border-radius:12px;border:1px solid #e5e7eb;font-size:16px}
.composer button.primary{padding:12px 16px;border:none;border-radius:12px;background:var(--brand);color:#fff;cursor:pointer}

.bubble{max-width:85%;padding:12px 14px;border-radius:14px;box-shadow:0 1px 0 rgba(0,0,0,.03);line-height:1.55}
.bubble.user{align-self:flex-end;background:var(--user)}
.bubble.paraphrase{align-self:flex-start;background:var(--para)}
.bubble.assistant{align-self:flex-start;background:var(--asst)}
.bubble.assistant p{margin:6px 0;color:#374151}
.bubble.assistant strong{color:#2563eb}
.bubble.assistant em{color:#16a34a}
.bubble.assistant ul{margin:6px 0 6px 1.2rem; list-style:disc}
.bubble.assistant ol{margin:6px 0 6px 1.2rem; list-style:decimal}
.bubble.assistant code{background:#f3f4f6;padding:2px 4px;border-radius:6px;font-family:ui-monospace, SFMono-Regular, Menlo, monospace}
.image-wrap{display:inline-flex;flex-direction:column;gap:6px;align-items:flex-start}
.ai-image{max-width:256px;max-height:256px;border-radius:10px;border:1px solid #e5e7eb;box-shadow:0 1px 0 rgba(0,0,0,.05)}
.img-caption{font-size:.9rem;color:#6b7280}

/* ===== Mobile responsiveness ===== */
@media (max-width: 900px){
  .menu-btn{display:inline-block}
  .js .topbar .topnav{display:none}

  .chat-layout{grid-template-columns: 1fr; gap:10px; min-height:calc(100vh - 90px)}
  .sidebar{
    position:fixed; inset:auto auto 0 0; top:0; height:100vh; width:min(86vw,360px);
    transform:translateX(-105%); transition:transform .2s ease; border-radius:0; z-index:60; background:#fff;
  }
  .sidebar.open{ transform:translateX(0); }
  .drawer-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.25); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:55;
  }
  .drawer-overlay.show{ opacity:1; pointer-events:auto; }

  .chat-pane{min-height:70vh}
  .thread{padding-bottom: max(env(safe-area-inset-bottom), 10px);}
  .composer{position:sticky; bottom:0; padding-bottom:calc(env(safe-area-inset-bottom) + 10px)}
  .bubble{max-width:92%}
}

button, .sidebar .conv-list li{min-height:44px}

/* --- Sticky autoscroll base --- */
html, body { height: 100%; }
.app-shell { display:flex; flex-direction:column; min-height:100vh; }
.content   { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }

.chat-layout { flex:1 1 auto; min-height:0; }
.chat-pane   { display:flex; flex-direction:column; min-height:0; }
.thread      {
  flex:1 1 auto;
  min-height:0;              /* critical */
  overflow:auto;             /* must be scrollable */
  -webkit-overflow-scrolling: touch; /* iOS inertia */
  scroll-behavior:smooth;
}

/* Optional: avoid browser bounces triggering weird scroll positions */
html, body { overscroll-behavior-y: none; }
/* ---- Auto-scroll hotfix ---- */
/* Chat composer pinned to bottom */
.composer {
  position: sticky;
  bottom: 0;
  background: white;
  padding: 0.75rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  border-top: 1px solid #e5e7eb;
  z-index: 20;                     /* ensure it stays above chat bubbles */
}

/* Input grows, never shrinks off-screen */
.composer input {
  flex: 1 1 auto;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
}

/* Send button */
.composer button {
  flex: 0 0 auto;
  background: #7c3aed;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-weight: 600;
  cursor: pointer;
}

.composer button:hover {
  background: #6d28d9;
}

/* Desktop / wide: sticky composer (what you already had) */
.composer{
  position: sticky;
  bottom: 0;
  background: #fff;
  padding: .75rem;
  display: flex; gap: .5rem; align-items: center;
  border-top: 1px solid #e5e7eb;
  z-index: 20;
}
.composer input{ flex:1 1 auto; min-width:0; }
.composer button{ flex:0 0 auto; }

/* Ensure thread can shrink and scroll */
.chat-pane{ display:flex; flex-direction:column; min-height:0; }
.thread{ flex:1 1 auto; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch; }

/* Mobile fix: pin to viewport, reserve space with spacer */
@media (max-width: 900px){
  .composer{
    position: fixed;
    left: 0; right: 0;
    bottom: env(safe-area-inset-bottom, 0px);
    /* keep it above any toolbars */
    z-index: 1000;
    border-top: 1px solid #e5e7eb;
  }

  /* extra breathing room at bottom of thread */
  .thread{
    padding-bottom: calc(var(--composer-h, 80px) + 8px);
  }
}

/* Helpful base */
html, body{ height:100%; }