:root {
  --bg: #ffffff;
  --page: #f2f2f5;
  --text: #131316;
  --muted: #8e8e93;
  --line: #dbdbe0;
  --in-bg: #efeff3;
  --ig-1: #7638fa;
  --ig-2: #d92e7f;
  --ig-3: #f9ce34;
  --grad: linear-gradient(135deg, var(--ig-1), var(--ig-2) 62%, #fa7e1e);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 400 15px/1.45 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

/* Phone shaped column on desktop, edge to edge on a real phone. */
.phone {
  width: min(480px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

/* ---------- avatar ---------- */
.ring {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--grad);
  padding: 2px;
}
.ring .av {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #262626;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  border: 1.5px solid #fff;
  background-clip: padding-box;
}
.ring .av { background: #f6f6f8; }
.ring.big { width: 86px; height: 86px; padding: 3px; }
.ring.big .av { font-size: 26px; }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  flex: none;
}
.back { color: #262626; display: grid; place-items: center; flex: none; }
.back svg { width: 21px; height: 21px; }
.who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.who strong {
  font-size: 14.5px; font-weight: 600; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.who small { font-size: 12px; color: var(--muted); }

.icon-btn {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  color: #262626;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s;
}
.icon-btn:hover { background: #f0f0f3; }
.icon-btn svg { width: 18px; height: 18px; }

/* ---------- scroll ---------- */
.scroll {
  flex: 1; min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 14px;
  scrollbar-width: thin;
  scrollbar-color: #c9c9d0 transparent;
}
.scroll::-webkit-scrollbar { width: 8px; }
.scroll::-webkit-scrollbar-thumb { background: #d3d3da; border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }

/* ---------- intro ---------- */
.intro { text-align: center; padding: 46px 6px 26px; }
.intro.hidden { display: none; }
.intro h1 { margin: 16px 0 3px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.handle { margin: 0; font-size: 13.5px; color: var(--muted); }
.sub { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.hint {
  margin: 26px 0 12px;
  font-size: 12px; font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.chips { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.chip {
  font: inherit; font-size: 14px; text-align: left;
  color: #262626;
  padding: 11px 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.chip:hover { background: #fafafa; border-color: #b9b9c2; }

/* ---------- messages ---------- */
.thread { padding: 8px 0 20px; display: flex; flex-direction: column; gap: 3px; }

.row { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
.row.them { justify-content: flex-start; }
.row.me { justify-content: flex-end; }
.row + .row { margin-top: 2px; }
.row.them + .row.me, .row.me + .row.them { margin-top: 10px; }

.row .ring { width: 26px; height: 26px; padding: 1.5px; margin-bottom: 1px; }
.row .ring .av { font-size: 9px; }
.row.me .spacer { display: none; }

.bubble {
  max-width: 76%;
  padding: 9px 14px;
  border-radius: 20px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  animation: pop .22s ease both;
  line-height: 1.42;
}
@keyframes pop { from { opacity: 0; transform: translateY(5px) scale(.98); } to { opacity: 1; transform: none; } }

.row.them .bubble {
  background: var(--in-bg);
  color: var(--text);
  border-bottom-left-radius: 6px;
}
.row.me .bubble {
  background: var(--grad);
  color: #fff;
  border-bottom-right-radius: 6px;
}
.bubble a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.row.them .bubble a { color: #0f6fd6; }

/* Typing indicator, Instagram style. */
.typing { display: inline-flex; gap: 4px; padding: 13px 15px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #a9a9b3; animation: bob 1.25s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .16s; }
.typing i:nth-child(3) { animation-delay: .32s; }
@keyframes bob { 0%,60%,100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

.note {
  align-self: center;
  margin: 12px 0 4px;
  padding: 6px 13px;
  font-size: 12px;
  color: var(--muted);
  background: #f6f6f8;
  border-radius: 99px;
  text-align: center;
}
.note.err { color: #b3261e; background: #fdecea; }

/* ---------- composer ---------- */
.composer-wrap { flex: none; padding: 8px 14px max(12px, env(safe-area-inset-bottom)); background: var(--bg); }
.composer {
  display: flex; align-items: flex-end; gap: 4px;
  padding: 4px 6px 4px 16px;
  border: 1px solid var(--line);
  border-radius: 22px;
  transition: border-color .15s;
}
.composer:focus-within { border-color: #a9a9b3; }

#input {
  flex: 1; min-width: 0;
  max-height: 130px;
  padding: 9px 0;
  font: inherit;
  color: var(--text);
  background: none;
  border: 0;
  outline: none;
  resize: none;
  line-height: 1.4;
}
#input::placeholder { color: var(--muted); }

#send {
  flex: none;
  min-width: 40px; height: 34px;
  display: grid; place-items: center;
  padding: 0 10px;
  font: inherit; font-size: 14px; font-weight: 600;
  color: #0095f6;
  background: none;
  border: 0;
  border-radius: 17px;
  cursor: pointer;
  transition: opacity .15s, color .15s;
}
#send:disabled { opacity: .32; cursor: default; }
#send .i-stop { display: none; width: 16px; height: 16px; }
body.streaming #send .i-send { display: none; }
body.streaming #send .i-stop { display: block; }
body.streaming #send { color: #8e8e93; opacity: 1; }

.disclaimer { margin: 9px 0 0; text-align: center; font-size: 11px; color: var(--muted); }

@media (max-width: 520px) {
  .phone { border: 0; }
  .bubble { max-width: 80%; }
  .intro { padding-top: 34px; }
}