#rightheader #receiver-text{
  display:inline-grid !important;
  grid-template-rows:auto 16px;
  align-items:end;
}

#rightheader #receiver-text:not(:has(#participantsLine)) #typingIndicator{
  margin-top:-3px !important;
}

:root{
  --sidebar-panel-bg: linear-gradient(180deg, rgba(255,255,255,0.80) 0%, rgba(255,255,255,0.62) 100%);
  --sidebar-panel-bg-dark: linear-gradient(180deg, rgba(35,46,60,0.62) 0%, rgba(35,46,60,0.44) 100%);
}

.header{
  position:relative;
  width:100%;
  display:flex;
  align-items:stretch;
  padding:0;
  height:74px;
  box-sizing:border-box;
  background:transparent;
  box-shadow:none;
}

.header-bottom-line{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background-color:#bebebe;
  pointer-events:none;
}

.left-header,
.right-header,
.left-header1{
  display:flex;
  align-items:center;
  box-sizing:border-box;
  position:relative;
  height:100%;
  padding:10px;
}

.left-header,
.left-header1{
  flex:0 0 var(--sidebarWidth, 35.05%);
  min-width:0;
}


.left-header,
.left-header1,
.right-header,
.chat-list{
  background:var(--sidebar-panel-bg);
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-position:left top;
}

.layout:has(.chat-list.dark) .left-header,
.layout:has(.chat-list.dark) .left-header1,
.layout:has(.chat-list.dark) .chat-list{
  background:var(--sidebar-panel-bg-dark);
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-position:left top;
}

@media (min-width: 738px){
  .left-header,
  .left-header1{
    border-right:1px solid rgba(255,255,255,0.22);
  }

  .header.sidebar-open{
    padding-right:var(--groupSidebarW);
    box-sizing:border-box;
  }

  .header.sidebar-open #chatavatar-wrapper{
    left:64px;
  }

  .header.sidebar-open .header-text{
    left:75px;
  }

  .right-header,
  .chat-area{
    flex:1 1 auto;
    min-width:0;
  }
}

.header-text{
  font-size:24px;
  font-weight:bold;
  color:#ffffff;
  position:relative;
  left:10px;
  top:0;
}

.header.is-group .header-text{
  top:-8.5px;
}

.profile-button{
  background-color:transparent;
  border:none;
  cursor:pointer;
  font-size:20px;
  padding:10px;
  color:var(--color-white);
  transition:transform 0.2s;
  margin-top:5px;
}

.profile-button i{
  font-size:26px;
}

.title{
  font-weight:700;
  letter-spacing:0.2px;
  font-size:30px;
  line-height:1.15;
  padding-bottom:2px;
  opacity:0.92;
  width:100%;
  text-align:center;
  justify-self:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#303a49;
}

.left-header{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
}

.left-header .title{
  position:absolute;
  left:50%;
  top:50%;
  width:auto;
  margin:0;
  text-align:center;
  pointer-events:none;
  transform:translate(-50%, calc(-50% - 8px));
}

.left-header #userCount{
  position:absolute;
  left:51%;
  top:calc(52% + 16px);
  margin:0;
  font-weight:700;
  font-size:19px;
  line-height:1;
  color:rgba(48,58,73,0.75);
  white-space:nowrap;
  pointer-events:none;
  transform:translate(-50%, calc(1.4px - 8px));
}

.left-header #profileButton{
  margin-left:auto;
  margin-right:12px;
}

.settings-btn{
  width:42px;
  height:42px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:rgba(39,53,74,0.85);
  margin-top:0;
}

.settings-btn i{ display:none; }

.settings-btn .icon{
  width:24px;
  height:24px;
}

.settings-btn:active{
  transform:scale(0.98);
}

.invert-btn{
  width:42px;
  height:42px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:rgba(39,53,74,0.85);
  margin-top:0;
}

.invert-btn i{
  font-size:22px;
}

.invert-btn .icon{
  width:24px;
  height:24px;
  display:block;
  transform:translateY(0px) scaleY(1.05);
  transform-origin:50% 50%;
}

.invert-btn:active{
  transform:scale(0.98);
}

@media (max-width: 737px){
  :root{ --header-h:74px; --input-h:0px; }

  .header{
    position:sticky;
    top:0;
    z-index:1000;
    padding-top:env(safe-area-inset-top, 0px);
    justify-content:space-between;
  }

  .left-header,
  .left-header1,
  .right-header{
    flex:1 1 auto;
    width:auto;
    padding-right:0;
    border-right:0;
  }

  .left-header1.hidden{
    display:none !important;
  }

  .right-header{
    display:none;
  }

  .header.chat-open .left-header,
  .header.chat-open .left-header1{
    display:none;
  }

  .header.chat-open .right-header{
    display:flex;
    flex:1 1 auto;
    min-width:0;
  }

  .profile-button{
    margin-left:8px;
  }

  .header-text{
    top:-7px;
  }
}

.header,
.container{
  display:flex;
}
@media (min-width: 738px){
  .header.sidebar-open{
    padding-right: 0;
  }

  .header.sidebar-open .right-header{
    margin-right: var(--groupSidebarW);
  }

  .header.sidebar-open ~ .container .chat-area{
    margin-right: var(--groupSidebarW);
  }
}

#receiver-text{
  color:#3f4857;
}

#participantsLine,
#typingIndicator{
  grid-row:2;
  height:16px;
  margin-top:0;
  align-self:start;
  color: #afb4b2;
}

.back-button{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  height:42px;
  width:42px;
  display:grid;
  place-items:center;
  background:transparent;
  border:none;
  color:#303a49;
  font-size:20px;
  z-index:10;
}
:root{ --sat: env(safe-area-inset-top, 0px); }

@media (max-width: 737px){
  .header{
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 74px;
    padding-top: var(--sat);
    box-sizing: border-box;
    background: var(--sidebar-panel-bg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: left top;
  }

  .layout:has(.chat-list.dark) .header{
    background: var(--sidebar-panel-bg-dark);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: left top;
  }

  .header::before{
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: var(--sat);
    background: var(--sidebar-panel-bg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: left top;
    pointer-events: none;
    z-index: 999;
  }

  .layout:has(.chat-list.dark) .header::before{
    background: var(--sidebar-panel-bg-dark);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: left top;
  }
}
:root{
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --headerBase: 74px;
  --headerH: calc(var(--headerBase) + var(--sat));
  --tabsH: 56px;
  --tabsGap: 24px;
}

@media (max-width: 737px){
  .header{
    height: var(--headerH);
    padding-top: var(--sat);
    box-sizing: border-box;
  }

  .left-header,
  .left-header1,
  .right-header{
    height: var(--headerBase);
  }

  .container{
    height: calc(100dvh - var(--headerH));
    min-height: 0;
  }

  .chat-list{
    height: 100%;
    padding-bottom: calc(var(--tabsH) + var(--tabsGap) + var(--sab));
  }
}

@media (max-width: 737px){
  .back-button{
    top: calc(var(--sat) + (var(--headerBase) / 2));
    transform: translateY(-50%);
  }
}
@media (max-width: 737px){
  .header{
    background: var(--sidebar-panel-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background-attachment: scroll;
  }

  .layout:has(.chat-list.dark) .header{
    background: var(--sidebar-panel-bg-dark);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background-attachment: scroll;
  }

  .left-header,
  .left-header1,
  .right-header{
    background: transparent;
    background-attachment: scroll;
  }

  .header::before{
    background: inherit;
    backdrop-filter: inherit;
    -webkit-backdrop-filter: inherit;
    background-attachment: scroll;
  }
}
.header-bottom-line{ display:none !important; }

@media (max-width: 737px){
  .header{
    background: var(--sidebar-panel-bg) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-position: left top !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .layout:has(.chat-list.dark) .header{
    background: var(--sidebar-panel-bg-dark) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-position: left top !important;
  }

  .header::before{
    background: var(--sidebar-panel-bg) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-position: left top !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .layout:has(.chat-list.dark) .header::before{
    background: var(--sidebar-panel-bg-dark) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-position: left top !important;
  }
}
:root{
  --sb: 28px;
  --hdrExtra: 8px;
  --headerBase: 74px;
  --headerPad: calc(var(--sb) + var(--hdrExtra));
  --headerH: calc(var(--headerBase) + var(--headerPad));
}

@media (max-width: 737px){
  .header{
    height: var(--headerH) !important;
    padding-top: var(--headerPad) !important;
    box-sizing: border-box !important;

    background: var(--sidebar-panel-bg) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-position: left top !important;
  }

  .layout:has(.chat-list.dark) .header{
    background: var(--sidebar-panel-bg-dark) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-position: left top !important;
  }

  .header::before{
    content: none !important;
    display: none !important;
  }

  .left-header,
  .left-header1,
  .right-header{
    height: var(--headerBase) !important;
    background: transparent !important;
  }

  .container{
    height: calc(100dvh - var(--headerH)) !important;
    min-height: 0 !important;
  }

  .back-button{
    top: calc(var(--headerPad) + (var(--headerBase) / 2)) !important;
    transform: translateY(-50%) !important;
  }
}

#archive{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 12px;
}
#archive .icon{
  width:18px;
  height:18px;
  min-width:18px;
  stroke-width:2;
  flex-shrink:0;
  transform: translate(3.5px, -1.2px) scale(0.92, 0.98);
}


#archive .icon path{
  vector-effect: non-scaling-stroke;
}


#archive .mute-label{
  line-height:1;
}

#archive .icon{
  stroke-linecap:round;
  stroke-linejoin:round;
}

.online-indicator-big{
    position:absolute;
    bottom:4px;
    right:-4px;
    width:16px;
    height:16px;

    border-radius:50%;
    box-sizing:border-box;

    background:linear-gradient(
        135deg,
        #4f63ff,
        #7a5cff
    );

    border:2px solid #eef1ff;
    outline:2px solid rgba(79,99,255,0.45);

    box-shadow:0 6px 14px rgba(79,99,255,0.35);
}

.chat-list.dark .online-indicator-big{
    border-color:#1e2a38;
    outline-color:rgba(255,255,255,0.22);
}


.round-image {
    width: 62px; 
    height: 62px; 
    display: none; 
    border-radius: 50%; 
    object-fit: cover; 
    margin-left: -40px; 
    margin-top: 3.2px; 
    border: none; 
    background-color: transparent; 
    box-shadow:0 0 0 2.2px #ffffff;
}

.round-image[src] {
  display: block; 
}

@media (max-width: 737px){
  .round-image{
    width:62px;
    height:62px;
    display:none;
    border-radius:50%;
    object-fit:cover;
    margin-left:10px;
    margin-top:3.2px;
    border:none;
    background-color:transparent;
    box-shadow:0 0 0 2.2px #ffffff;
  }

  .round-image[src]{ display:block; }
}