html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
* {
  box-sizing:border-box
}
html,body {
  height:100%
}
body {
  margin:0;font-family: 'Courier New', Courier, monospace;background:#0b1220;color:#ffffff
}
.screen {
  min-height:100%;display:flex;align-items:center;justify-content:center;padding:20px
}
.hidden {
  display:none
}
.card {
  width:min(720px,100%);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px;backdrop-filter:blur(10px)
}
.title {
  font-size:24px;font-weight:800;margin-bottom:4px;letter-spacing:.2px
}
.subtitle {
  opacity:.85;margin-bottom:14px
}
.label {
  font-size:12px;opacity:.8;margin-top:10px
}
.stack {
  display:flex;flex-direction:column;gap:10px
}
input {
  width:100%;min-width:0;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.25);color:#ffffff;font-size:16px;outline:none
}
button {
  padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.10);color:#ffffff;font-size:16px
}
button:active {
  transform:scale(.99)
}
.primary {
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08))
}
.ghost {
  background:transparent
}
.divider {
  height:1px;background:rgba(255,255,255,.10);margin:16px 0
}
.roomsHead {
  display:flex;justify-content:space-between;align-items:center;margin-bottom:10px
}
.roomsTitle {
  font-weight:700
}
.roomsList {
  display:flex;flex-direction:column;gap:8px
}
.roomBtn {
  display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left
}
.badge {
  font-size:12px;opacity:.85;border:1px solid rgba(255,255,255,.16);padding:4px 8px;border-radius:999px
}
.badge.lock {
  background:rgba(255,255,255,.06)
}
.chatShell {
  width:100%;max-width:860px;height:calc(100dvh - 24px);display:flex;flex-direction:column;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;backdrop-filter:blur(10px);overflow:hidden
}
.topbar {
  display:flex;justify-content:space-between;align-items:center;padding:14px 12px;padding-top:calc(14px + env(safe-area-inset-top));border-bottom:1px solid rgba(255,255,255,.10);background:#0b1220
}
.roomRow {
  display:flex;flex-direction:column;gap:2px
}
.room {
  font-weight:800
}
.me {
  opacity:.85;font-size:13px
}
.messages {
  flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(180deg, rgba(11,18,32,1), rgba(11,18,32,.9));-webkit-overflow-scrolling:touch
}
.msg {
  display:flex;gap:10px
}
.bubble {
  padding:10px 12px;border-radius:14px;max-width:min(300px, 75vw);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);display:flex;flex-direction:column;gap:8px;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;line-height:1.25;font-size:16px
}
.composer {
  display:flex;gap:10px;padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.10);background:#0b1220
}
.composer input {
  flex:1
}
#chat.screen {
  padding:0
}
#home.screen {
  padding:20px
}
.msg {
  display:flex;gap:10px
}
.msg.me {
  justify-content:flex-end
}
.msg.me .bubble {
  padding:10px 12px;border-radius:14px;max-width:min(300px, 75vw);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);display:flex;flex-direction:column;gap:8px;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;line-height:1.25;font-size:16px
}
  .msg.me
body {
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
* {
  font-family:'Courier New', Courier, monospace;
}
.bubble,.meta,input,button,label,.room,.me,.title,.subtitle {
  font-family:inherit;font-variant-numeric:inherit;
}
.msg {
  display:flex;flex-direction:column;align-items:flex-start;gap:6px
}
.msg.me {
  align-items:flex-end
}
#chat.screen {
  padding:20px
}
#chat.screen {
  min-height:100dvh;align-items:stretch;justify-content:center;padding:12px
}
.metaIn {
  font-size:11px;opacity:.7;text-align:left;margin-top:2px
}

input,button{-webkit-text-size-adjust:100%;text-size-adjust:100%}