:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #080b10;
  color: #f4f7ef;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html, body { margin: 0; width: 100%; min-height: 100%; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior: none;
  background:
    radial-gradient(circle at 72% 18%, rgba(112, 255, 100, 0.07), transparent 24rem),
    #080b10;
}

button, input, textarea { font: inherit; }
button { color: inherit; }

.shell { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 17.5rem 1fr; }

.rail {
  min-height: 100vh;
  padding: 1.3rem 1rem;
  border-right: 1px solid #20252c;
  background: rgba(11, 15, 21, 0.86);
  display: flex;
  flex-direction: column;
}

.brand { display: flex; align-items: center; gap: .7rem; padding: .35rem .45rem 1.45rem; }
.rail-close { display: none; margin-left: auto; border: 0; background: transparent; color: #89939d; font-size: 1.35rem; cursor: pointer; }
.brand-mark, .gate-emblem {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .55rem;
  background: #a7ff6a; color: #0b0f13; font-size: .7rem; font-weight: 900; letter-spacing: -.04em;
}
.brand-name { font-size: .94rem; font-weight: 700; letter-spacing: .01em; }

.new-chat {
  width: 100%; border: 1px solid #2a313a; background: #131920; border-radius: .65rem;
  padding: .72rem .8rem; display: flex; justify-content: space-between; cursor: pointer;
}
.new-chat span { color: #727b86; font-size: .75rem; }
.history-label { margin: 1.5rem .55rem .55rem; color: #69727d; font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; }
.history-list { display: grid; gap: .3rem; overflow-y: auto; }
.history-item { width: 100%; border: 1px solid transparent; border-radius: .55rem; background: transparent; color: #aab2bb; text-align: left; padding: .7rem .75rem; display: flex; flex-direction: column; gap: .15rem; cursor: pointer; }
.history-item:hover { background: #12181f; }
.history-item.active { background: #171d24; border-color: #252d36; color: #f4f7ef; }
.history-item small { color: #707984; }
.rail-foot { margin-top: auto; padding: .8rem .5rem .25rem; color: #8b949e; font-size: .78rem; display: flex; align-items: center; gap: .55rem; }
.status-dot { width: .48rem; height: .48rem; border-radius: 50%; background: #f1c75b; box-shadow: 0 0 0 .25rem rgba(241, 199, 91, .1); }

.chat { min-width: 0; height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto 1fr auto auto; }
.topbar { height: 4.5rem; border-bottom: 1px solid #1c2229; display: flex; align-items: center; justify-content: space-between; padding: 0 1.6rem; }
.topbar-title { display: flex; flex-direction: column; gap: .16rem; min-width: 0; }
.topbar strong { font-size: .92rem; }
.topbar-title span { color: #6f7883; font-size: .73rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: .45rem; }
.settings-button, .sessions-button { background: transparent; border: 1px solid #2b323b; border-radius: .55rem; color: #a1aab3; padding: .45rem .68rem; font-size: .74rem; cursor: pointer; }
.sessions-button { display: none; }
.logout-button { background: transparent; border: 1px solid #2b323b; border-radius: .55rem; color: #8c959f; padding: .45rem .68rem; font-size: .74rem; cursor: pointer; }
.logout-button:hover { color: #fff; border-color: #4a545f; }

.conversation { overflow-y: auto; display: grid; place-items: center; padding: 2rem; }
.conversation.has-messages { display: block; }
.welcome { max-width: 42rem; text-align: center; }
.pulse-mark { margin: 0 auto 1.5rem; width: 4rem; height: 4rem; border: 1px solid #303842; border-radius: 1.15rem; display: grid; place-items: center; transform: rotate(8deg); background: linear-gradient(145deg, #151b22, #0d1117); }
.pulse-mark span { width: 1.15rem; height: 1.15rem; border: .28rem solid #a7ff6a; border-left-color: transparent; border-radius: 50%; transform: rotate(37deg); }
.eyebrow { color: #9eaa94 !important; font: 700 .68rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; }
h1 { font-size: clamp(2rem, 5vw, 3.8rem); margin: .35rem 0 1rem; letter-spacing: -.055em; line-height: 1.02; }
.lede { color: #8d96a0; margin: 0 auto; max-width: 31rem; line-height: 1.65; font-size: 1rem; }

.composer {
  width: min(48rem, calc(100% - 2rem)); margin: 0 auto; border: 1px solid #303842; border-radius: 1rem; background: #11171e;
  padding: .85rem; box-shadow: 0 1.4rem 4rem rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.025);
}
.composer textarea { width: 100%; resize: none; min-height: 3.25rem; max-height: 12rem; border: 0; outline: 0; background: transparent; color: #f4f7ef; line-height: 1.55; font-size: 1rem; }
.composer textarea::placeholder { color: #68717b; }
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.attachment-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.attachment-row:not(:empty) { margin-bottom: .75rem; }
.attachment-chip { display: inline-flex; align-items: center; gap: .4rem; max-width: 15rem; border: 1px solid #303842; background: #171e26; border-radius: .55rem; padding: .38rem .48rem .38rem .58rem; color: #a8b1bb; font-size: .72rem; }
.attachment-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-chip button { border: 0; background: transparent; color: #737d87; cursor: pointer; padding: 0 .15rem; }
.composer-actions { display: flex; align-items: center; justify-content: space-between; }
.composer-actions > div { display: flex; align-items: center; gap: .65rem; color: #737d87; font-size: .72rem; }
.attach, .send { border: 1px solid #303842; display: grid; place-items: center; cursor: pointer; }
.attach { width: 2rem; height: 2rem; border-radius: .55rem; background: #151c24; }
.send { width: 2.35rem; height: 2.35rem; border-radius: .7rem; background: #a7ff6a; border-color: #a7ff6a; color: #10150c; font-size: 1.2rem; font-weight: 800; }
.fine-print { text-align: center; color: #555e69; font-size: .69rem; margin: .65rem 1rem 1rem; }

.gate { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 1.25rem; background: rgba(5, 7, 10, .82); backdrop-filter: blur(18px); }
.gate::before { content: ""; position: absolute; width: 25rem; height: 25rem; border-radius: 50%; background: rgba(167,255,106,.055); filter: blur(5rem); }
.gate-card { position: relative; width: min(29rem, 100%); padding: 2.25rem; border: 1px solid #303842; border-radius: 1.2rem; background: linear-gradient(160deg, rgba(23,29,36,.98), rgba(11,15,20,.98)); box-shadow: 0 2rem 7rem rgba(0,0,0,.52); }
.gate-emblem { width: 2.6rem; height: 2.6rem; margin-bottom: 2rem; }
.gate-card h2 { margin: .4rem 0 .6rem; font-size: 1.85rem; letter-spacing: -.035em; }
.gate-card > p:not(.eyebrow) { color: #8b949e; margin: 0 0 1.7rem; line-height: 1.55; }
.gate-form label { display: block; margin: 0 0 .55rem; color: #aab2bb; font-size: .78rem; }
.invite-field { display: flex; gap: .55rem; }
.invite-field input { min-width: 0; flex: 1; height: 3.25rem; border: 1px solid #39424c; border-radius: .7rem; background: #0b1016; color: #fff; padding: 0 .9rem; outline: none; letter-spacing: .13em; }
.invite-field input:focus { border-color: #a7ff6a; box-shadow: 0 0 0 .2rem rgba(167,255,106,.08); }
.invite-field button { border: 0; border-radius: .7rem; background: #a7ff6a; color: #0a0e0b; font-weight: 800; padding: 0 1rem; cursor: pointer; }
.trust-line { margin-top: 1.3rem; color: #626b75; font-size: .7rem; display: flex; align-items: center; gap: .45rem; }
.trust-line span { width: .42rem; height: .42rem; border-radius: 50%; background: #6d7680; }
.gate-error { min-height: 1.2rem; margin: .7rem 0 0 !important; color: #ff9c8f !important; font-size: .76rem; }
.gate.is-hidden { display: none; }

.message-list { width: min(48rem, 100%); margin: 0 auto; padding: 1.5rem 0 4rem; }
.message { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .8rem; margin: 0 0 1.55rem; }
.message-avatar { width: 2rem; height: 2rem; border: 1px solid #303842; border-radius: .55rem; display: grid; place-items: center; background: #141a21; color: #a7ff6a; font: 800 .68rem/1 ui-monospace, monospace; }
.message.user .message-avatar { color: #0a0f0a; background: #a7ff6a; border-color: #a7ff6a; }
.message-content { min-width: 0; padding-top: .22rem; }
.message-meta { display: flex; align-items: center; gap: .6rem; margin-bottom: .42rem; color: #727b86; font-size: .71rem; }
.message-meta strong { color: #c8cfd6; font-size: .78rem; }
.message-text { color: #dce1e5; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; font-size: .96rem; }
.usage-note { margin-top: .7rem; color: #66717b; font-size: .68rem; line-height: 1.55; }
.usage-note span { display: block; }
.message.user .message-text { color: #f3f5f0; }
.message-status { display: inline-flex; align-items: center; gap: .5rem; color: #8d96a0; font-size: .8rem; }
.message-status::before { content: ""; width: .55rem; height: .55rem; border: 2px solid #424c56; border-top-color: #a7ff6a; border-radius: 50%; animation: spin .8s linear infinite; }
.message-files { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .65rem; margin-top: .9rem; }
.file-card { min-width: 0; border: 1px solid #2d353e; border-radius: .75rem; background: #11171e; overflow: hidden; }
.file-card img { display: block; width: 100%; max-height: 16rem; object-fit: contain; background: #090d12; }
.file-card a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .72rem .8rem; color: #c9d0d6; text-decoration: none; font-size: .76rem; }
.file-card a span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-card a span:last-child { color: #a7ff6a; }
.status-dot.is-online { background: #79e763; box-shadow: 0 0 0 .25rem rgba(121, 231, 99, .1); }
.status-dot.is-offline { background: #ff7868; box-shadow: 0 0 0 .25rem rgba(255, 120, 104, .1); }
.drop-zone { position: fixed; inset: 1rem; z-index: 20; display: none; place-items: center; border: 2px dashed #a7ff6a; border-radius: 1.2rem; background: rgba(8, 11, 16, .9); color: #dfffc8; font-size: 1.05rem; font-weight: 700; backdrop-filter: blur(8px); }
.drop-zone.is-visible { display: grid; }
body.is-busy .send { opacity: .48; cursor: wait; }
.settings-modal { position: fixed; inset: 0; z-index: 30; display: none; place-items: center; padding: 1rem; background: rgba(5,7,10,.8); backdrop-filter: blur(16px); }
.settings-modal.is-visible { display: grid; }
.settings-card { width: min(35rem, 100%); max-height: min(44rem, calc(100dvh - 2rem)); overflow-y: auto; border: 1px solid #303842; border-radius: 1.15rem; padding: 1.35rem; background: linear-gradient(160deg, #171d24, #0c1117); box-shadow: 0 2rem 7rem rgba(0,0,0,.55); }
.settings-card > header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.25rem; }
.settings-card h2 { margin: .15rem 0 0; font-size: 1.65rem; }
.settings-close { border: 0; background: transparent; color: #84909a; font-size: 1.5rem; cursor: pointer; }
.settings-card section, .add-profile-form { border-top: 1px solid #252d35; padding-top: 1rem; margin-top: 1rem; }
.model-setting, .section-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.model-setting > div, .section-title { min-width: 0; }
.model-setting > div { display: flex; flex-direction: column; gap: .22rem; }
.model-setting span, .section-title span { color: #74808a; font-size: .7rem; }
.model-pill { flex: none; border: 1px solid rgba(167,255,106,.25); border-radius: 999px; background: rgba(167,255,106,.08); color: #baff8b !important; padding: .42rem .65rem; }
.saved-profile-list, .gate-saved-profiles { display: grid; gap: .45rem; margin-top: .75rem; }
.profile-row { display: flex; align-items: center; gap: .55rem; border: 1px solid #2b343d; border-radius: .7rem; padding: .65rem .7rem; background: #10161c; }
.profile-row strong { min-width: 0; flex: 1; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-row em { color: #82d756; font: normal .67rem/1 ui-monospace, monospace; }
.profile-row button { border: 1px solid #323c46; border-radius: .5rem; background: #171e25; color: #aeb6be; padding: .35rem .55rem; font-size: .7rem; cursor: pointer; }
.profile-row .profile-remove { color: #9b7470; }
.add-profile-form label { display: block; margin-bottom: .55rem; color: #aab3bc; font-size: .76rem; }
.settings-error { min-height: 1.1rem; margin: .55rem 0 0; color: #ff9c8f; font-size: .72rem; }
.privacy-note { color: #626c76; font-size: .68rem; line-height: 1.55; margin: 1rem 0 0; }
.gate-saved-wrap { display: none; border-top: 1px solid #29313a; margin-top: 1rem; padding-top: .85rem; }
.gate-saved-wrap.has-profiles { display: block; }
.gate-saved-wrap > p { margin: 0; color: #737e88; font-size: .7rem; }
.gate-saved-profiles .profile-row { padding: .52rem .6rem; }
.rail-backdrop { display: none; position: fixed; inset: 0; z-index: 24; border: 0; background: rgba(3,5,8,.65); }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .rail { position: fixed; inset: 0 auto 0 0; z-index: 25; display: flex; width: min(19rem, 86vw); transform: translateX(-105%); transition: transform .2s ease; box-shadow: 1.5rem 0 4rem rgba(0,0,0,.4); }
  .rail.is-mobile-open { transform: translateX(0); }
  .rail-close, .sessions-button { display: block; }
  .rail-backdrop.is-visible { display: block; }
  .topbar {
    height: calc(4.2rem + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) max(1rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left));
  }
  .conversation { padding: 1rem max(1rem, env(safe-area-inset-right)) 1.25rem max(1rem, env(safe-area-inset-left)); }
  .composer { width: calc(100% - 1rem - env(safe-area-inset-left) - env(safe-area-inset-right)); }
  .composer-actions > div span { display: none; }
  .gate-card { padding: 1.5rem; }
  .settings-modal { padding: max(.5rem, env(safe-area-inset-top)) max(.5rem, env(safe-area-inset-right)) max(.5rem, env(safe-area-inset-bottom)) max(.5rem, env(safe-area-inset-left)); }
  .settings-card { max-height: calc(100dvh - max(1rem, env(safe-area-inset-top) + env(safe-area-inset-bottom))); }
  .fine-print { margin-bottom: max(.65rem, env(safe-area-inset-bottom)); }
  .message-list { padding-top: .75rem; padding-bottom: 2rem; }
  h1 { font-size: clamp(2rem, 10vw, 3rem); }
}

@media (prefers-reduced-motion: no-preference) {
  .pulse-mark { animation: float 4s ease-in-out infinite; }
  @keyframes float { 0%, 100% { transform: translateY(0) rotate(8deg); } 50% { transform: translateY(-8px) rotate(4deg); } }
}