:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #f3efe9;
  background: #12141c;
  --accent: #ebc489;
  --muted: #acacb9;
  --line: #ffffff19;
  --surface: #1d202b;
  --safe: max(env(safe-area-inset-bottom), 12px);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 270px; }
[hidden] { display: none !important; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.app {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at 50% 14%, #29263a 0%, transparent 57%), #12141c;
}
.header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(12px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
  background: #151721; border-bottom: 1px solid var(--line);
  z-index: 1; flex-shrink: 0;
}
.brand, .tools { display: flex; align-items: center; gap: 10px; }
.brand img { border-radius: 13px; }
.brand h1 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
.brand p { margin: 1px 0 0; color: var(--muted); font-size: 12px; white-space: nowrap; }
.status {
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  border: 1px solid var(--line); padding: 6px 9px; border-radius: 999px;
  color: var(--muted); font-size: 11px; font-weight: 650;
}
.status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #aaa4a2; }
.status[data-state='online'] { color: #b1e0be; }
.status[data-state='online']::before { background: #85dba2; }
.status[data-state='offline'] { color: #f1c7a0; }
.status[data-state='offline']::before { background: #e0a673; }
.menu { position: relative; }
.menu summary {
  display: grid; place-items: center; width: 44px; height: 44px; list-style: none;
  color: #f3efe9; font-size: 24px; line-height: 1; cursor: pointer;
  border: 1px solid var(--line); border-radius: 14px;
}
.menu summary::-webkit-details-marker { display: none; }
.menu-panel {
  position: absolute; right: 0; top: 50px; width: 220px; padding: 5px;
  border: 1px solid var(--line); border-radius: 15px; background: #222532;
  box-shadow: 0 10px 30px #0007;
}
.menu-panel button { background: none; border: 0; color: inherit; padding: 12px; width: 100%; text-align: left; border-radius: 10px; }
.menu-panel button:hover { background: #ffffff10; }
.lock { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; align-items: center; padding: 28px 18px var(--safe); }
.card {
  margin: auto 0 0; max-width: 400px; width: 100%; padding: 28px 24px 17px;
  border: 1px solid #ffffff22; border-radius: 26px;
  background: linear-gradient(160deg, #222534, #1a1d27); box-shadow: 0 22px 60px #0005;
  text-align: center;
}
.emblem { display: inline-flex; border: 1px solid #ebc48940; border-radius: 24px; padding: 4px; background: #161722; }
.emblem img, .welcome img { border-radius: 19px; }
.eyebrow { color: var(--accent); font-size: 11px; letter-spacing: .19em; font-weight: 720; margin: 16px 0 8px; }
h2 { margin: 0; letter-spacing: -.04em; font-size: clamp(27px, 7vw, 37px); }
.intro { color: var(--muted); margin: 10px auto 24px; max-width: 315px; line-height: 1.5; font-size: 15px; }
.card label { display: block; margin-bottom: 7px; text-align: left; color: #e7e2da; font-size: 13px; }
.card input {
  background: #13151e; border: 1px solid #ffffff27; border-radius: 13px; color: #fff9e9;
  width: 100%; min-height: 54px; text-align: center; font-size: 22px; font-weight: 650; letter-spacing: .15em;
}
.card input::placeholder { color: #8b8999; }
.primary, .send { border: 0; background: var(--accent); color: #1e1820; font-weight: 750; }
.primary { width: 100%; min-height: 49px; margin-top: 12px; border-radius: 13px; }
.primary:not(:disabled):hover, .send:not(:disabled):hover { background: #ffdb9f; }
.primary:disabled, .send:disabled { opacity: .48; }
.notice { color: #f4cba8; font-size: 13px; line-height: 1.35; margin: 10px 0 0; }
.notice:empty { margin: 0; }
.footnote, .hint { color: var(--muted); font-size: 12px; text-align: center; }
.footnote { margin: 16px 0 auto; }
.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.scroll { overflow: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; overscroll-behavior: contain; }
.welcome { margin: auto; text-align: center; padding: 24px 12px; }
.welcome p:last-child { color: var(--muted); margin: 9px 0 0; }
.messages, .typing, .composer { width: min(100%, 740px); margin-left: auto; margin-right: auto; }
.messages { display: flex; flex-direction: column; gap: 12px; padding: 18px max(16px, env(safe-area-inset-right)) 14px max(16px, env(safe-area-inset-left)); }
.messages:empty { display: none; }
.bubble {
  align-self: flex-start; border: 1px solid var(--line); border-radius: 17px 17px 17px 5px;
  background: var(--surface); color: #f4f1ee; max-width: min(94%, 620px); padding: 10px 13px;
  white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; font-size: 16px;
}
.bubble[data-role='user'] { align-self: flex-end; background: #3b3143; border-radius: 17px 17px 5px 17px; }
.typing { display: flex; align-items: center; gap: 5px; padding: 0 17px 13px; color: var(--muted); font-size: 13px; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: breathe 1.2s ease infinite alternate; }
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; margin-right: 4px; }
@keyframes breathe { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .typing i { animation: none; } }
.composer { padding: 8px max(16px, env(safe-area-inset-right)) var(--safe) max(16px, env(safe-area-inset-left)); }
.composer .notice { margin: 0 0 8px; }
.compose-form { display: flex; align-items: end; padding: 5px; border: 1px solid #ffffff25; border-radius: 19px; background: #1c1f2a; }
.compose-form:focus-within { border-color: #ebc4899e; }
.compose-form textarea {
  flex: 1; min-width: 0; height: 44px; max-height: 145px; padding: 11px 9px; resize: none;
  color: inherit; background: transparent; border: 0; outline: 0; line-height: 22px; font-size: 16px;
}
@supports (field-sizing: content) { .compose-form textarea { height: auto; min-height: 44px; field-sizing: content; } }
.compose-form textarea::placeholder { color: var(--muted); }
.send { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px; }
.compose-button {
  display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 44px;
  border: 0; border-radius: 12px; background: transparent; color: var(--accent); list-style: none; cursor: pointer;
}
.compose-button::-webkit-details-marker { display: none; }
.compose-button:not(:disabled):hover, .compose-button[aria-pressed='true'] { background: #ffffff12; }
.compose-button:disabled, .attach-menu[aria-disabled='true'] { opacity: .45; }
.attach-menu { position: relative; flex-shrink: 0; }
.attach-menu .menu-panel { left: 0; right: auto; top: auto; bottom: 49px; width: 142px; z-index: 2; }
.stop-icon, #record[aria-pressed='true'] .mic-icon { display: none; }
#record[aria-pressed='true'] .stop-icon { display: block; }
.drafts { display: flex; flex-direction: column; gap: 5px; margin: 0 0 8px; }
.draft-item, .recording {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 3px 8px 3px 11px;
  color: #e8dfec; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 13px;
}
.draft-item span, .recording span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.draft-item button, .recording button {
  min-height: 35px; padding: 4px 8px; color: var(--accent); background: none; border: 0; border-radius: 8px;
}
.draft-item audio { width: 100%; height: 35px; }
.draft-item img { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; }
.recording { margin: 0 0 8px; color: #f4cba8; }
.hint { margin: 7px 0 0; }
.noscript { color: var(--accent); text-align: center; }
@media (min-width: 760px) { .header { padding-left: 25px; padding-right: 25px; } }