:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f7f7f5;
  color: #20201e;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
button, textarea, input { font: inherit; }
.hidden { display: none !important; }

.app {
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  max-width: 760px;
  margin: auto;
  background: #f7f7f5;
}

header {
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e5e4df;
  background: rgba(247, 247, 245, .92);
  backdrop-filter: blur(18px);
}

header strong { display: block; font-size: 17px; }
header span { color: #77756e; font-size: 12px; }
.header-title { flex: 1; margin-left: 10px; }
button { border: 0; cursor: pointer; }
.ghost { padding: 8px 12px; border-radius: 10px; background: #e9e8e3; color: #33322e; }
.history-button {
  width: 36px; height: 36px; padding: 0; border-radius: 10px;
  background: #e9e8e3; color: #33322e; font-size: 19px;
}

.messages {
  overflow-y: auto;
  padding: 22px 14px 26px;
  overscroll-behavior: contain;
}

.welcome { text-align: center; margin: min(20vh, 140px) auto 0; color: #6c6a63; }
.welcome h1 { color: #292825; font-size: 25px; margin: 14px 0 6px; }
.welcome p { margin: 0; }
.logo {
  width: 42px; height: 42px; margin: auto; border-radius: 13px;
  display: grid; place-items: center; background: #20201e; color: white;
  font-weight: 700; letter-spacing: -.5px;
}

.message { display: flex; margin: 0 auto 22px; max-width: 680px; }
.message.user { justify-content: flex-end; }
.bubble {
  max-width: min(86%, 590px);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.58;
  font-size: 16px;
}
.user .bubble { background: #e5e3dc; border-radius: 18px 18px 4px 18px; padding: 10px 14px; }
.assistant .bubble { width: 100%; }
.assistant .bubble:empty::after {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #77756e; animation: pulse 1s infinite alternate;
}
@keyframes pulse { to { opacity: .25; } }

.composer {
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, #f7f7f5 18%);
}
.attachments {
  display: flex; gap: 7px; overflow-x: auto; max-width: 680px;
  margin: 0 auto 7px; scrollbar-width: none;
}
.attachment-chip {
  flex: 0 0 auto; max-width: 220px; display: flex; align-items: center; gap: 6px;
  padding: 7px 9px 7px 11px; border: 1px solid #d8d6cf; border-radius: 12px;
  background: white; font-size: 13px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.attachment-chip button {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  padding: 0; background: #eceae4; color: #55534d;
}
.composer-options {
  display: flex; align-items: center; justify-content: flex-end; gap: 7px;
  max-width: 680px; margin: 0 auto 7px; color: #77756e; font-size: 12px;
}
.composer-options select {
  border: 1px solid #d8d6cf; border-radius: 9px; padding: 4px 24px 4px 8px;
  background: white; color: #33322e; outline: none;
}
.input-wrap {
  display: flex; align-items: flex-end; gap: 8px; padding: 8px;
  background: white; border: 1px solid #dcdad3; border-radius: 22px;
  box-shadow: 0 4px 18px rgba(0,0,0,.07);
}
.attach {
  flex: 0 0 36px; height: 36px; border-radius: 50%; padding: 0;
  background: #efeee9; color: #33322e; font-size: 25px; line-height: 1;
}
textarea {
  flex: 1; border: 0; outline: 0; resize: none; max-height: 140px;
  padding: 7px 7px 6px; background: transparent; line-height: 1.4;
}
.send {
  flex: 0 0 36px; height: 36px; border-radius: 50%;
  background: #20201e; color: white; font-size: 22px; font-weight: 600;
}
.send:disabled { opacity: .35; }
.composer small { display: block; text-align: center; color: #929087; font-size: 10px; margin-top: 5px; }

.login { min-height: 100dvh; padding: 24px; display: grid; place-items: center; background: #f7f7f5; }
.login-card { width: min(100%, 360px); text-align: center; }
.login-card h1 { margin: 18px 0 6px; }
.login-card p { color: #77756e; margin: 0 0 24px; }
.login-card input {
  width: 100%; border: 1px solid #d7d5cf; border-radius: 14px;
  padding: 14px; outline: none; background: white;
}
.login-card button {
  width: 100%; margin-top: 12px; padding: 14px; border-radius: 14px;
  background: #20201e; color: white; font-weight: 600;
}
.error { min-height: 22px; margin-top: 10px; color: #b3261e; font-size: 14px; }
.history-panel { position: fixed; inset: 0; z-index: 10; }
.history-backdrop { position: absolute; inset: 0; width: 100%; background: rgba(0,0,0,.28); }
.history-panel aside {
  position: absolute; inset: 0 auto 0 0; width: min(86vw, 360px);
  padding: calc(16px + env(safe-area-inset-top)) 12px 16px;
  background: #f7f7f5; box-shadow: 8px 0 30px rgba(0,0,0,.14);
}
.history-head { display: flex; align-items: center; justify-content: space-between; padding: 0 5px 14px; }
.history-head button { width: 32px; height: 32px; border-radius: 9px; font-size: 22px; background: #e9e8e3; }
.session-list { display: grid; gap: 7px; overflow-y: auto; max-height: calc(100dvh - 80px); }
.session-row { display: flex; align-items: center; border-radius: 12px; background: #eeede8; }
.session-row.active { background: #dedcd4; }
.session-open { flex: 1; min-width: 0; padding: 11px 12px; text-align: left; background: transparent; }
.session-open strong, .session-open span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-open strong { font-size: 14px; }
.session-open span { margin-top: 3px; color: #817f77; font-size: 11px; }
.session-delete { flex: 0 0 32px; height: 32px; margin-right: 7px; border-radius: 9px; background: transparent; font-size: 20px; color: #77756e; }
.empty-history { color: #88867e; text-align: center; margin-top: 30px; }

@media (min-width: 900px) {
  body { background: #ecebe7; }
  .app {
    height: min(92vh, 920px);
    margin-top: 4vh;
    border: 1px solid #deddd8;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 18px 60px rgba(35, 34, 30, .10);
  }
  header { padding: 15px 20px; }
  .messages { padding: 30px 30px 34px; }
  .composer { padding: 10px 24px 18px; }
  .input-wrap { border-radius: 20px; }
  textarea { font-size: 16px; }
}