:root{
  --bg:#0b0f17;
  --panel:#111827;
  --panel2:#0f172a;
  --panel3:#1f2937;
  --line:#263244;
  --line2:#334155;
  --text:#f8fafc;
  --muted:#94a3b8;
  --soft:#cbd5e1;
  --accent:#3b82f6;
  --accent2:#2563eb;
  --green:#22c55e;
  --yellow:#f59e0b;
  --red:#ef4444;
  --bubble-me:#2563eb;
  --bubble-them:#1f2937;
}

*{
  box-sizing:border-box;
}

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

body{
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  overflow:hidden;
}

button,input,textarea{
  font:inherit;
}

button,a.btn{
  border:0;
  background:var(--accent);
  color:white;
  border-radius:10px;
  padding:10px 13px;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}

button:hover,a.btn:hover{
  background:var(--accent2);
}

button.ghost,a.ghost{
  background:transparent;
  color:var(--soft);
  border:1px solid var(--line);
}

button.ghost:hover,a.ghost:hover{
  background:#172033;
}

button.icon{
  width:40px;
  height:40px;
  padding:0;
}

button.userBtn{
  all:unset;
  display:block;
  cursor:pointer;
}

input,textarea{
  width:100%;
  background:#0b1220;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:10px;
  padding:11px 12px;
  outline:none;
}

input:focus,textarea:focus{
  border-color:var(--accent);
}

p{
  color:var(--muted);
  line-height:1.45;
}

small{
  color:var(--muted);
}

h1,h2,h3,p{
  margin-top:0;
}

::-webkit-scrollbar{
  width:8px;
}

::-webkit-scrollbar-thumb{
  background:#334155;
  border-radius:999px;
}

::-webkit-scrollbar-track{
  background:transparent;
}

/* login */

.authShell{
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 420px;
  gap:0;
  background:var(--bg);
}

.authHero{
  padding:64px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-right:1px solid var(--line);
  background:#0b0f17;
}

.brandMark{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--soft);
  font-weight:800;
  width:max-content;
}

.logoOrb{
  width:30px;
  height:30px;
  border-radius:8px;
  background:var(--accent);
  display:inline-grid;
  place-items:center;
}

.logoOrb::before{
  content:"I";
  font-weight:900;
  color:white;
}

.authHero h1{
  font-size:56px;
  line-height:.95;
  margin:24px 0 16px;
  max-width:780px;
  letter-spacing:-.04em;
}

.authHero .lead{
  font-size:18px;
  max-width:680px;
}

.authGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:26px;
  max-width:800px;
}

.feature{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
}

.feature b{
  display:block;
  margin-bottom:6px;
}

.feature p{
  font-size:13px;
  margin:0;
}

.authCard{
  padding:32px;
  background:var(--panel);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:22px 0;
}

.tabs button{
  background:#172033;
  color:var(--soft);
  border:1px solid var(--line);
}

.tabs button.active{
  background:var(--accent);
  color:white;
  border-color:var(--accent);
}

.form{
  display:grid;
  gap:11px;
}

.authNote{
  margin:10px 0 0;
  padding:11px;
  border:1px solid #1d3d2a;
  background:#0d1f17;
  border-radius:10px;
  color:#bbf7d0;
}

/* app */

.appShell{
  height:100vh;
  width:100vw;
  display:grid;
  grid-template-columns:330px 1fr;
  background:var(--bg);
}

.sidebar{
  min-height:0;
  display:grid;
  grid-template-rows:auto auto auto 1fr auto;
  background:var(--panel);
  border-right:1px solid var(--line);
}

.chatShell{
  min-height:0;
  display:grid;
  grid-template-rows:auto 1fr auto;
  background:#0b0f17;
}

.sideTop{
  padding:16px;
  border-bottom:1px solid var(--line);
}

.sideBrand{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.identityCard{
  margin-top:14px;
  padding:12px;
  background:#0b1220;
  border:1px solid var(--line);
  border-radius:12px;
}

.identityRow{
  display:flex;
  align-items:center;
  gap:11px;
}

.avatar{
  width:40px;
  height:40px;
  border-radius:12px;
  background:var(--accent);
  color:white;
  display:grid;
  place-items:center;
  font-weight:900;
  flex:0 0 auto;
}

.avatar.big{
  width:46px;
  height:46px;
  border-radius:13px;
  font-size:17px;
}

.avatar.offline{
  background:#475569;
}

.identityMeta,
.personInfo,
.chatTitle{
  min-width:0;
}

.identityMeta b,
.personInfo b,
.chatTitle b{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.identityMeta small,
.personInfo small,
.chatTitle small{
  display:block;
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sideActions{
  padding:12px 16px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  border-bottom:1px solid var(--line);
}

.searchWrap{
  padding:12px 16px;
  border-bottom:1px solid var(--line);
}

.searchBox{
  position:relative;
}

.searchIcon{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
}

.searchBox input{
  padding-left:36px;
}

.peopleList{
  overflow:auto;
  padding:8px;
}

.person{
  display:flex;
  align-items:center;
  gap:11px;
  padding:10px;
  border-radius:12px;
  border:1px solid transparent;
}

.person:hover{
  background:#172033;
}

.person.active{
  background:#13213a;
  border-color:#1d4ed8;
}

.statusDot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--red);
  flex:0 0 auto;
}

.statusDot.online{
  background:var(--green);
}

.sideFoot{
  padding:12px 16px;
  border-top:1px solid var(--line);
}

.privacyPill{
  display:flex;
  gap:9px;
  align-items:flex-start;
  background:#0d1f17;
  border:1px solid #1d3d2a;
  border-radius:12px;
  padding:10px;
}

.privacyPill b{
  color:#bbf7d0;
  display:block;
}

.privacyPill small{
  display:block;
  margin-top:2px;
  color:#86efac;
}

/* chat */

.chatHeader{
  min-height:72px;
  padding:13px 18px;
  border-bottom:1px solid var(--line);
  background:var(--panel2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.chatProfile{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
}

.connectionBadge{
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--soft);
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}

.connectionBadge.good{
  color:#86efac;
  border-color:#166534;
  background:#0d1f17;
}

.connectionBadge.warn{
  color:#fcd34d;
  border-color:#854d0e;
  background:#211707;
}

.messages{
  min-height:0;
  overflow:auto;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.dayLine{
  align-self:center;
  color:var(--muted);
  background:#111827;
  border:1px solid var(--line);
  font-size:12px;
  border-radius:999px;
  padding:5px 9px;
  margin:6px 0;
}

.msgRow{
  width:100%;
  display:flex;
}

.msgRow.me{
  justify-content:flex-end;
}

.bubble{
  max-width:min(680px,76%);
  padding:10px 12px 8px;
  border-radius:14px;
  background:var(--bubble-them);
  border:1px solid var(--line);
}

.msgRow.me .bubble{
  background:var(--bubble-me);
  border-color:var(--bubble-me);
  border-bottom-right-radius:4px;
}

.msgRow.them .bubble{
  border-bottom-left-radius:4px;
}

.bubble p{
  color:white;
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
}

.msgMeta{
  margin-top:6px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  flex-wrap:wrap;
  font-size:11px;
  color:#dbeafe;
}

.msgRow.them .msgMeta{
  color:var(--muted);
}

.statusTag{
  opacity:.9;
}

.statusTag.delivered{
  color:#bbf7d0;
}

.statusTag.pending_local,
.statusTag.connecting,
.statusTag.sent_p2p{
  color:#fde68a;
}

.msgMeta button{
  padding:3px 7px;
  font-size:11px;
  border-radius:7px;
  background:#1e3a8a;
}

.composerWrap{
  padding:12px;
  border-top:1px solid var(--line);
  background:var(--panel2);
}

.composer{
  display:grid;
  grid-template-columns:1fr auto;
  gap:9px;
}

.composer input{
  min-height:44px;
}

.emptyChat{
  height:100%;
  display:grid;
  place-items:center;
  padding:24px;
}

.emptyCard{
  max-width:480px;
  text-align:center;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px;
}

.emptyIcon{
  display:none;
}

.toast{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:50;
  max-width:420px;
  background:var(--panel);
  border:1px solid var(--line2);
  border-radius:12px;
  padding:11px 13px;
  color:var(--soft);
}

/* store */

.storeShell{
  min-height:100vh;
  padding:32px;
  overflow:auto;
  background:var(--bg);
}

.storeTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}

.storeHero{
  display:grid;
  grid-template-columns:1fr 360px;
  gap:16px;
}

.storePanel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px;
}

.storePanel h1{
  font-size:38px;
  line-height:1;
  letter-spacing:-.03em;
}

.downloadCard{
  display:grid;
  place-items:center;
  text-align:center;
}

.apkIcon{
  width:72px;
  height:72px;
  border-radius:18px;
  background:var(--accent);
  display:grid;
  place-items:center;
  font-size:30px;
  margin:0 auto 14px;
}

.statGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:18px;
}

.stat{
  border:1px solid var(--line);
  background:#0b1220;
  border-radius:12px;
  padding:12px;
}

.stat b{
  display:block;
  font-size:18px;
}

.stat small{
  display:block;
  margin-top:3px;
}

.noticeLine{
  margin-top:12px;
  background:#211707;
  border:1px solid #854d0e;
  color:#fde68a;
  border-radius:10px;
  padding:10px;
}

.hidden{
  display:none!important;
}

/* mobile */

@media(max-width:900px){
  body{
    overflow:auto;
  }

  .authShell{
    grid-template-columns:1fr;
  }

  .authHero{
    padding:26px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .authHero h1{
    font-size:38px;
  }

  .authGrid{
    grid-template-columns:1fr;
  }

  .authCard{
    padding:24px;
  }

  .appShell{
    height:100dvh;
    grid-template-columns:1fr;
    grid-template-rows:39% 61%;
  }

  .sidebar{
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .sideTop{
    padding:12px;
  }

  .identityCard{
    display:none;
  }

  .sideActions{
    padding:9px 12px;
  }

  .searchWrap{
    padding:9px 12px;
  }

  .peopleList{
    padding:6px;
  }

  .sideFoot{
    display:none;
  }

  .chatHeader{
    min-height:62px;
    padding:10px 12px;
  }

  .connectionBadge{
    display:none;
  }

  .messages{
    padding:12px;
  }

  .bubble{
    max-width:88%;
  }

  .composer{
    grid-template-columns:1fr auto;
  }

  .storeShell{
    padding:18px;
  }

  .storeHero{
    grid-template-columns:1fr;
  }

  .statGrid{
    grid-template-columns:1fr;
  }
}

@media(max-width:520px){
  .appShell{
    grid-template-rows:37% 63%;
  }

  .sideActions{
    grid-template-columns:1fr 1fr;
  }

  .sideActions button{
    padding:8px;
  }

  .person{
    padding:8px;
  }

  .avatar{
    width:34px;
    height:34px;
    border-radius:10px;
    font-size:13px;
  }

  .avatar.big{
    width:38px;
    height:38px;
  }

  .composerWrap{
    padding:9px;
  }

  .composer input{
    min-height:42px;
  }

  button,a.btn{
    padding:9px 11px;
  }
}