:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: #1c1c1c;
  background: #fff;
  --border: #e5e5e5;
  --muted: #707070;
  --panel: #f6f6f4;
  --accent: #222;
}

* { box-sizing: border-box; }
body { margin: 0; }
button, textarea { font: inherit; }
button { cursor: pointer; }
.app { display: grid; grid-template-columns: 270px 1fr; height: 100dvh; }
aside { background: var(--panel); border-right: 1px solid var(--border); overflow: auto; padding: 16px 12px; }
.sidebar-head { align-items: center; display: flex; justify-content: space-between; margin-bottom: 16px; padding: 0 4px; }
.sidebar-head button, #menu { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; }
#sessions { display: grid; gap: 4px; }
.session { align-items: center; border-radius: 8px; display: grid; grid-template-columns: 1fr auto; min-width: 0; }
.session.active { background: #e8e8e4; }
.session-title { align-items: start; background: transparent; border: 0; display: grid; gap: 5px; min-width: 0; overflow: hidden; padding: 10px; text-align: left; }
.session-title > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.delete { background: transparent; border: 0; color: var(--muted); font-size: 18px; opacity: 0; padding: 8px; }
.session:hover .delete, .session:focus-within .delete { opacity: 1; }
main { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }
header { align-items: center; border-bottom: 1px solid var(--border); display: flex; gap: 12px; height: 64px; padding: 0 24px; }
h1 { font-size: 16px; margin: 0; }
#model, .model-chip { background: #e8e8e4; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); display: inline-block; font-size: 10px; line-height: 1.3; max-width: 100%; overflow: hidden; padding: 2px 7px; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; }
#model { font-size: 11px; margin-top: 3px; }
#menu { display: none; }
#messages { margin: 0 auto; max-width: 800px; overflow-y: auto; padding: 32px 24px; width: 100%; }
.empty { color: var(--muted); padding-top: 25vh; text-align: center; }
.message { display: flex; margin: 0 0 24px; }
.message.user { justify-content: flex-end; }
.message-body { display: grid; gap: 6px; justify-items: start; max-width: min(85%, 680px); }
.user .message-body { justify-items: end; }
.bubble { line-height: 1.55; max-width: 100%; overflow-wrap: anywhere; white-space: pre-wrap; }
.user .bubble { background: #ededeb; border-radius: 18px; padding: 10px 14px; }
.assistant .bubble { padding: 4px 0; }
#composer { align-items: end; border: 1px solid #ccc; border-radius: 18px; display: flex; gap: 8px; margin: 0 auto 20px; max-width: 760px; padding: 8px; width: calc(100% - 32px); }
textarea { background: transparent; border: 0; color: inherit; max-height: 180px; min-height: 40px; outline: 0; padding: 9px 10px; resize: none; width: 100%; }
#send { background: var(--accent); border: 0; border-radius: 11px; color: #fff; padding: 10px 16px; }
#send:disabled { opacity: .45; }

@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; color: #eee; background: #181818; --border: #363636; --muted: #a0a0a0; --panel: #212121; --accent: #eee; }
  .sidebar-head button, #menu { background: #292929; }
  .session.active, #model, .model-chip { background: #333; }
  .user .bubble { background: #333; }
  #send { color: #171717; }
}

@media (max-width: 720px) {
  .app { display: block; }
  aside { bottom: 0; left: 0; position: fixed; top: 0; transform: translateX(-100%); transition: transform .2s; width: 280px; z-index: 2; }
  aside.open { box-shadow: 10px 0 30px #0003; transform: translateX(0); }
  main { height: 100dvh; }
  #menu { display: block; }
  header { padding: 0 14px; }
  #messages { padding: 24px 16px; }
}