*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;background:#eef1f5;color:#17202a}button,input{font:inherit}button{border:0;cursor:pointer}.hidden{display:none!important}.screen{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#f7fafc,#e7edf5)}.login-card{width:min(390px,92vw);background:#fff;border-radius:24px;padding:38px;box-shadow:0 20px 70px #16233318;text-align:center}.brand-mark{width:92px;height:92px;display:block;margin:0 auto 14px;filter:drop-shadow(0 12px 22px rgba(11,107,255,.18))}.small-mark{width:78px;height:78px;margin:0 auto 12px}.brand-name{font-weight:900;font-size:31px;letter-spacing:-1.4px;color:#0A1730}.brand-name span{font-weight:500;background:linear-gradient(90deg,#0B6BFF,#00BFFF);-webkit-background-clip:text;background-clip:text;color:transparent}.login-card p{color:#697586}.auth-tabs{display:flex;gap:4px;padding:4px;background:#f1f4f7;border-radius:12px;margin-top:18px}.auth-tab{flex:1;padding:9px;border-radius:9px;background:transparent;color:#697586;font-weight:700}.auth-tab.active{background:#fff;color:#17202a;box-shadow:0 2px 7px #0000000d}.auth-form{display:grid;gap:8px;text-align:left;margin-top:14px}.auth-label{font-size:12px;font-weight:700;color:#566170;margin-top:3px}.auth-form input{width:100%;border:1px solid #dfe4e9;background:#f8fafb;border-radius:11px;padding:12px 13px;outline:none}.auth-form input:focus{border-color:#0B6BFF;background:#fff}.auth-form .primary{margin-top:7px}.auth-status{min-height:20px;margin-top:10px;font-size:12px;color:#c0392b}.primary:disabled{opacity:.65;cursor:wait}.primary{width:100%;padding:13px 18px;border-radius:12px;background:#17202a;color:#fff;margin-top:18px}.app{height:100vh;display:flex;max-width:1500px;margin:auto;background:#fff;box-shadow:0 0 40px #0000000b}.sidebar{width:360px;border-right:1px solid #e6e9ed;display:flex;flex-direction:column}.side-head,.chat-head{height:76px;display:flex;align-items:center;padding:0 18px;border-bottom:1px solid #e6e9ed}.side-head{justify-content:space-between}.side-head b{font-size:21px;letter-spacing:-.6px}.side-head b:first-letter{color:#0B6BFF}.side-head small{display:block;color:#87909d;font-size:12px;margin-top:3px}.icon,.call-actions button{background:transparent;font-size:22px;color:#566170;padding:9px;border-radius:10px}.icon:hover,.call-actions button:hover{background:#f1f3f6}.search{padding:12px;display:flex;gap:8px}.search input{flex:1;border:1px solid #e1e5ea;background:#f6f8fa;border-radius:11px;padding:11px 13px;outline:none}.search button{width:44px;border-radius:11px;background:#17202a;color:#fff}.chat-list{overflow:auto}.chat-item{
  display:flex;
  gap:12px;
  padding:13px 16px;
  border-bottom:1px solid #f0f2f4;
  cursor:pointer;
  transition:background .15s ease;
}

.chat-item:hover,
.chat-item.active{
  background:#f5f7f9;
}

.avatar{
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#dfe5eb;
  color:#263342;
  font-weight:800;
}

.chat-item-content{
  min-width:0;
  flex:1;
}

.chat-item-top{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.chat-item-top b{
  display:block;
  min-width:0;
  flex:1;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#17202a;
}

.chat-item-top time{
  flex:0 0 auto;
  color:#87909d;
  font-size:10px;
}

.chat-item-bottom{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:5px;
  min-width:0;
}

.chat-item-bottom small{
  flex:1;
  min-width:0;
  color:#7c8795;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.unread-badge{
  flex:0 0 auto;
  min-width:19px;
  height:19px;
  padding:0 5px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#0b6bff;
  color:#fff;
  font-size:10px;
  font-weight:700;
}.chat-pane{flex:1;display:flex;flex-direction:column;min-width:0}.chat-head{gap:12px}.chat-title{flex:1;min-width:0}.chat-title b,.chat-title small{display:block}.chat-title small{color:#7c8795;font-size:12px;margin-top:4px}.call-actions{display:flex}.messages{flex:1;overflow:auto;padding:28px clamp(14px,4vw,55px);background:#f7f8fa}.welcome{text-align:center;margin:auto;color:#75808d;max-width:420px}.welcome h2{color:#303a46;font-size:21px}.message{display:flex;margin:7px 0}.message.mine{justify-content:flex-end}.bubble{max-width:min(72%,520px);background:#fff;border:1px solid #e6e9ed;border-radius:16px 16px 16px 4px;padding:9px 12px;box-shadow:0 2px 7px #00000006}.mine .bubble{background:#17202a;color:#fff;border-radius:16px 16px 4px 16px}.bubble img,.bubble video{display:block;max-width:100%;max-height:330px;border-radius:11px}.bubble a{color:inherit}.meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:3px;
  margin-top:5px;
  font-size:10px;
  line-height:1;
  opacity:.65;
}

.message-time{
  white-space:nowrap;
}

.message-status{
  display:inline-flex;
  align-items:center;
  font-size:12px;
  line-height:1;
  letter-spacing:-3px;
  margin-right:1px;
}

.status-pending{
  font-size:12px;
  letter-spacing:0;
  opacity:.7;
}

.status-sent{
  letter-spacing:0;
}

.status-delivered{
  letter-spacing:-3px;
}

.status-read{
  letter-spacing:-3px;
  color:#4da3ff;
}

.message-error{
  color:#687585;
  font-size:13px;
}.composer{position:relative;display:flex;gap:7px;padding:11px 14px;border-top:1px solid #e6e9ed;background:#fff}.composer input[type=text],#textInput{flex:1;border:0;background:#f3f5f7;border-radius:20px;padding:11px 15px;outline:none}.send{width:44px;border-radius:50%;background:#17202a;color:#fff}.attach-menu{position:absolute;bottom:62px;left:10px;background:#fff;border:1px solid #e1e5ea;border-radius:14px;padding:7px;box-shadow:0 12px 35px #0002;display:grid;gap:3px}.attach-menu button{padding:10px 13px;background:#fff;text-align:left;border-radius:9px}.attach-menu button:hover{background:#f1f3f6}.call-overlay{position:fixed;inset:0;background:#10151bdd;z-index:20;display:grid;place-items:center}.call-card{width:min(850px,94vw);height:min(650px,92vh);background:#171b20;border-radius:20px;position:relative;overflow:hidden;color:#fff;display:flex;align-items:center;justify-content:center}.call-peer{position:absolute;top:20px;left:20px;z-index:2;font-weight:700}.call-card video#remoteVideo{width:100%;height:100%;object-fit:cover}.call-card video#localVideo{position:absolute;right:20px;bottom:90px;width:170px;height:120px;object-fit:cover;border-radius:12px;border:2px solid #fff}.call-label{position:absolute;bottom:25px}.hangup{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);width:58px;height:58px;border-radius:50%;background:#d83a3a;color:#fff}.mobile-only{display:none}#toast{position:fixed;left:50%;bottom:25px;transform:translateX(-50%);background:#17202a;color:#fff;padding:11px 16px;border-radius:12px;opacity:0;pointer-events:none;transition:.2s;z-index:30}#toast.show{opacity:1}.voice-player{width:230px}.location-card{padding:5px}.location-card strong{display:block;margin-bottom:5px}@media(max-width:720px){.sidebar{width:100%}.chat-pane{display:none}.app.chat-open .sidebar{display:none}.app.chat-open .chat-pane{display:flex}.mobile-only{display:block}.call-actions button{font-size:19px}.bubble{max-width:84%}.call-card{height:100vh;width:100%;border-radius:0}}
.e2e-box{margin:0 12px 8px;padding:9px 11px;border-radius:11px;background:#f0f7ff;color:#135bb5;font-size:12px;border:1px solid #d7eaff}.e2e-box small{display:block;margin-top:4px;word-break:break-all;color:#5d7188}.bubble{overflow-wrap:anywhere}

/* =========================================================
   TCHAT - REGISTER / USERNAME MODAL
   ========================================================= */

.register-only.hidden,
#loginPasswordField.hidden,
.username-modal.hidden,
.username-suggestions.hidden {
  display: none !important;
}

.password-wrap {
  position: relative;
  width: 100%;
}

.password-wrap input {
  width: 100%;
  padding-right: 48px;
  box-sizing: border-box;
}

.password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 17px;
  opacity: .65;
  padding: 6px;
}

.password-toggle:hover {
  opacity: 1;
}

.password-match {
  min-height: 18px;
  margin-top: 5px;
  font-size: 12px;
}

.password-match.ok {
  color: #16803c;
}

.password-match.error {
  color: #c62828;
}

.selected-username {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 16px;
  padding: 10px 12px;
  border: 1px solid #dce3eb;
  border-radius: 10px;
  background: #f7f9fb;
}

.selected-username span {
  font-size: 12px;
  color: #697586;
}

.selected-username strong {
  flex: 1;
  font-size: 13px;
  color: #17212b;
}

.selected-username button {
  border: 0;
  background: transparent;
  color: #0b6bff;
  font-weight: 600;
  cursor: pointer;
}

/* USERNAME MODAL */

.username-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, .45);
  backdrop-filter: blur(4px);
}

.username-modal-card {
  width: min(420px, 100%);
  background: #fff;
  border-radius: 20px;
  padding: 25px;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  position: relative;
  box-sizing: border-box;
}

.username-close {
  position: absolute;
  right: 14px;
  top: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #f1f3f5;
  color: #52606d;
  font-size: 23px;
  cursor: pointer;
}

.username-modal-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #eef5ff;
  color: #0b6bff;
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 14px;
}

.username-modal-card h2 {
  margin: 0 0 8px;
  font-size: 21px;
  color: #17212b;
}

.username-modal-card > p {
  margin: 0 0 18px;
  color: #697586;
  font-size: 13px;
  line-height: 1.5;
}

.username-input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid #d8e0e8;
  border-radius: 11px;
  background: #f8fafc;
  overflow: hidden;
}

.username-input-wrap:focus-within {
  border-color: #0b6bff;
  box-shadow: 0 0 0 3px rgba(11,107,255,.10);
}

.username-input-wrap > span {
  padding-left: 13px;
  font-weight: 700;
  color: #64748b;
}

.username-input-wrap input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 13px 12px 13px 5px;
  font-size: 15px;
}

.username-hint {
  display: block;
  margin-top: 7px;
  color: #8a96a3;
  font-size: 11px;
}

.username-status {
  min-height: 22px;
  margin-top: 10px;
  font-size: 12px;
}

.username-status.available {
  color: #16803c;
}

.username-status.taken {
  color: #c62828;
}

.username-status.checking {
  color: #697586;
}

.suggestion-title {
  margin-bottom: 7px;
  font-size: 12px;
  color: #697586;
}

.username-suggestion {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  margin-top: 7px;
  border: 1px solid #dce3eb;
  border-radius: 9px;
  background: #f8fafc;
  color: #17212b;
  cursor: pointer;
  font-weight: 600;
}

.username-suggestion:hover {
  border-color: #0b6bff;
  background: #eef5ff;
}

.username-use-btn {
  width: 100%;
  margin-top: 17px;
}

.username-use-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .username-modal {
    padding: 12px;
    align-items: flex-end;
  }

  .username-modal-card {
    border-radius: 20px 20px 14px 14px;
    padding: 22px 18px;
  }
}