:root{
  color-scheme:light dark;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --teams:#5b5fc7;
  --teams-dark:#464775;
  --teams-soft:#ececff;
  --bg:#f5f5f5;
  --surface:#fff;
  --text:#242424;
  --secondary:#616161;
  --muted:#8a8a8a;
  --line:#e5e5e5;
  --green:#13a10e;
  --red:#c50f1f;
  --bubble:#f1f1f1;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{overscroll-behavior:none}
button,input,textarea{font:inherit}
button{cursor:pointer}
.shell{max-width:760px;margin:0 auto;min-height:100vh;background:var(--surface)}
.view{min-height:100vh;background:var(--surface)}
.hidden{display:none!important}

.teamsHeader{
  position:sticky;top:0;z-index:20;
  height:calc(64px + env(safe-area-inset-top));
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
  display:flex;align-items:center;gap:12px;
  background:var(--teams);color:#fff;
}
.profileButton,.modalLogo{
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;flex:none;
  background:#fff;color:var(--teams);font-weight:800;font-size:18px;
}
.headerTitle{min-width:0;flex:1;display:flex;flex-direction:column}
.headerTitle>strong{font-size:20px;line-height:1.05}
.connectionRow{display:flex;align-items:center;gap:5px;font-size:11px;color:rgba(255,255,255,.82);margin-top:5px}
.statusDot{width:7px;height:7px;border-radius:50%;background:#f2c811}
.statusDot.online{background:#92c353}
.statusDot.offline{background:#e74856}
.headerAction{
  width:38px;height:38px;border:0;border-radius:9px;
  background:rgba(255,255,255,.12);color:#fff;font-size:20px;
}

.searchWrap{
  margin:12px 14px 6px;
  height:40px;border-radius:8px;
  display:flex;align-items:center;gap:8px;
  background:#f0f0f0;padding:0 12px;
}
.searchIcon{font-size:20px;color:#666}
.searchWrap input{flex:1;border:0;outline:0;background:transparent;color:#242424;font-size:15px;min-width:0}
.searchWrap input::placeholder{color:#777}
.listSectionTitle{
  height:38px;padding:0 16px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line);
}
.listSectionTitle strong{font-size:13px;color:#555;font-weight:650}
.listSectionTitle span{font-size:11px;color:var(--muted)}

.chatList{background:var(--surface)}
.chatRow{
  min-height:74px;display:flex;align-items:center;gap:12px;
  padding:10px 14px;border-bottom:1px solid var(--line);
  cursor:pointer;
}
.chatRow:active{background:#f5f5f5}
.chatAvatar{
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;flex:none;
  background:var(--teams-soft);color:var(--teams-dark);
  font-size:16px;font-weight:750;
}
.chatMain{min-width:0;flex:1}
.chatTop{display:flex;align-items:center;gap:8px}
.chatName{min-width:0;flex:1;font-size:15px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chatTime{font-size:11px;color:var(--muted);white-space:nowrap}
.chatPreviewRow{margin-top:4px;display:flex;align-items:center;gap:6px}
.chatPreview{min-width:0;flex:1;font-size:13px;color:var(--secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.unreadBadge{
  min-width:18px;height:18px;border-radius:9px;
  display:grid;place-items:center;padding:0 5px;
  background:var(--teams);color:#fff;font-size:10px;font-weight:700;
}

.emptyState{
  min-height:50vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:var(--secondary);padding:30px;
}
.emptyTeamsIcon{
  width:58px;height:58px;border-radius:14px;display:grid;place-items:center;
  background:var(--teams);color:#fff;font-size:28px;font-weight:800;margin-bottom:14px;
}
.emptyState strong{font-size:16px;color:var(--text)}
.emptyState span{font-size:13px;margin-top:5px}

.conversationHeader{
  position:sticky;top:0;z-index:20;
  height:calc(62px + env(safe-area-inset-top));
  padding:calc(9px + env(safe-area-inset-top)) 12px 9px;
  display:flex;align-items:center;gap:10px;
  background:var(--surface);border-bottom:1px solid var(--line);
}
.backButton{width:30px;border:0;background:transparent;color:var(--teams);font-size:36px;line-height:1;padding:0}
.conversationIdentity{min-width:0;display:flex;flex-direction:column}
.conversationIdentity strong{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conversationIdentity span{font-size:11px;color:var(--secondary);margin-top:2px}

.conversationMessages{
  min-height:calc(100vh - 142px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  padding:18px 14px 100px;
  background:#f5f5f5;
  overflow:auto;
}
.messageBlock{margin:0 0 14px;display:flex;align-items:flex-start;gap:8px}
.messageMiniAvatar{
  width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--teams-soft);color:var(--teams-dark);font-size:11px;font-weight:700;
}
.messageContent{max-width:82%}
.messageSender{font-size:11px;color:var(--secondary);margin:0 0 4px 2px}
.messageBubble{
  background:var(--surface);border-radius:4px 12px 12px 12px;
  padding:9px 11px;font-size:14px;line-height:1.4;word-break:break-word;
  box-shadow:0 1px 1px rgba(0,0,0,.04);
}
.messageStamp{font-size:10px;color:var(--muted);margin:4px 2px 0}

.composerBar{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);
  width:min(760px,100%);z-index:25;
  padding:9px 10px calc(9px + env(safe-area-inset-bottom));
  display:grid;grid-template-columns:1fr 40px;gap:8px;
  background:var(--surface);border-top:1px solid var(--line);
}
.composerBar textarea{
  resize:none;min-height:40px;max-height:100px;border:1px solid #d6d6d6;border-radius:6px;
  padding:9px 10px;background:#fff;color:#242424;outline:none;line-height:1.35;
}
.composerBar textarea:focus{border-color:var(--teams)}
.sendButton{
  width:40px;height:40px;border:0;border-radius:6px;
  background:var(--teams);color:#fff;font-size:17px;
}
.sendButton:disabled{opacity:.45}
.replyState{grid-column:1/-1;font-size:11px;color:var(--secondary);min-height:0}

.modalBackdrop,.sheetBackdrop{
  position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(0,0,0,.36);backdrop-filter:blur(5px);
}
.modalCard{
  width:min(420px,100%);background:var(--surface);border-radius:14px;
  padding:24px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.22);
}
.modalLogo{margin:0 auto 14px;background:var(--teams);color:#fff}
.modalCard h2{margin:0;font-size:20px}
.modalCard>p{font-size:13px;color:var(--secondary);margin:7px 0 18px}
#pairForm{display:grid;gap:10px}
#pairCode{
  width:100%;height:46px;border:1px solid #cfcfcf;border-radius:7px;
  text-align:center;font-size:21px;font-weight:700;letter-spacing:7px;outline:none;
}
#pairCode:focus{border-color:var(--teams)}
.primaryButton,.purpleButton{
  border:0;border-radius:7px;background:var(--teams);color:#fff;font-weight:650;padding:11px 14px;
}
.errorText{color:var(--red)!important;font-size:12px!important;margin:9px 0 0!important;min-height:14px}

.sheetBackdrop{align-items:flex-end;padding:0}
.sheet{
  width:min(760px,100%);background:var(--surface);
  border-radius:18px 18px 0 0;padding:8px 16px calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -12px 40px rgba(0,0,0,.18);
}
.sheetHandle{width:42px;height:4px;border-radius:2px;background:#c7c7c7;margin:0 auto 10px}
.sheetHeader{display:flex;align-items:center;justify-content:space-between;padding:4px 0 10px}
.sheetHeader>strong{font-size:18px}
.textButton,.quietButton{border:0;background:transparent;color:var(--teams);padding:8px;font-weight:600}
.settingRow{
  display:flex;align-items:center;justify-content:space-between;gap:15px;
  min-height:66px;border-top:1px solid var(--line);
}
.settingRow>div{display:flex;flex-direction:column;gap:3px}
.settingRow>div strong{font-size:14px}
.settingRow>div span{font-size:12px;color:var(--secondary)}

@media(prefers-color-scheme:dark){
  :root{
    --bg:#1f1f1f;--surface:#292929;--text:#f5f5f5;--secondary:#c7c7c7;
    --muted:#aaa;--line:#3b3b3b;--bubble:#333;
  }
  .searchWrap{background:#3a3a3a}
  .searchWrap input{color:#fff}
  .conversationMessages{background:#1f1f1f}
  .composerBar textarea{background:#333;color:#fff;border-color:#4a4a4a}
  .chatRow:active{background:#333}
}