:root{
  --bg:#111214;
  --panel:rgba(43,45,49,.74);
  --panel-2: rgb(0 0 0 / 40%);
  --text:#f2f3f5;
  --muted:#b5bac1;
  --muted-2:#949ba4;
  --accent:#5865f2;
  --danger:#da373c;
  --ok:#57f287;
  --radius-xl:2rem;
  --radius-lg:1.25rem;
  --radius-pill:999rem;
  --transition:180ms ease;
  --hero-size:18rem;
}
*{box-sizing:border-box}
html,body{
  margin:0;height:100%;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:transparent;
}
body{overflow:hidden;position:relative}
body::before{content:'';position:fixed;inset:0;background:linear-gradient(rgba(17,18,20,.34), rgba(17,18,20,.46)), url('/bg.jpg') center center / cover no-repeat;z-index:-1;pointer-events:none;transform:translateZ(0);}
button,input,select,textarea{font:inherit}
a{color:inherit}

.app{
  width:min(100%,56rem);
  height:100dvh;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:.75rem;
  padding:.75rem;
  overflow:hidden;
  backdrop-filter: blur(.1rem);
}
.hero{flex:0 0 auto;padding:.25rem 0}
.mobileTabs{display:none}
.onlineRow{
  text-align:center;color:#e5e7eb;font-size:.875rem;font-weight:600;margin-bottom:.625rem;
  text-shadow:0 .05rem .15rem rgba(0,0,0,.25);
  display:flex;align-items:center;justify-content:center;gap:.45rem;
}
.circleArea{position:relative;width:min(100%,22rem);margin:0 auto;padding:1.1rem 0 1.1rem}
.floatingBtn{
  position:absolute;width:2.75rem;height:2.75rem;border:0;border-radius:50%;background:var(--panel);color:var(--text);
  display:grid;place-items:center;cursor:pointer;
  transition:transform var(--transition), background var(--transition), color var(--transition);
  font-size:1rem;backdrop-filter: blur(.8rem);-webkit-backdrop-filter: blur(.8rem);
}
.floatingBtn:hover{transform:translateY(-.0625rem);background:rgba(43,45,49,.9)}
.floatingBtn:active{transform:translateY(0)}
.floatingBtn.left{left:0}.floatingBtn.right{right:0}.floatingBtn.top{top:0}.floatingBtn.bottom{bottom:0}

.callCircle{
  width:min(100%,var(--hero-size));aspect-ratio:1/1;margin:0 auto;border-radius:50%;
  background:var(--panel);backdrop-filter: blur(1rem);-webkit-backdrop-filter: blur(1rem);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;text-align:center;padding:1.5rem;
  transition:background var(--transition), transform var(--transition);user-select:none;cursor:pointer;
}
.callCircle.live{background:rgba(35,36,40,.76)}
.callCircle.recording{background:rgba(88,101,242,.84)}
.logoImg{width:4.8rem;height:4.8rem;object-fit:contain;display:block}
.timer{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:800;letter-spacing:-.04em;line-height:1;display:none}
.callLabel{font-size:1rem;font-weight:700;letter-spacing:.04em}
.callLabel.muted{color:var(--muted);font-weight:600}
.participantMini{font-size:.8rem;color:var(--muted)}

.chat{
  flex:1 1 auto;min-height:0;background:var(--panel);border-radius:var(--radius-xl);padding:.75rem;
  display:grid;grid-template-rows:auto 1fr auto;gap:.625rem;overflow:hidden;
  backdrop-filter: blur(1rem);-webkit-backdrop-filter: blur(1rem);
}
.chatTop{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.5rem;align-items:center}
.chatSearch{
  width:100%;height:2.7rem;border:0;outline:none;border-radius:var(--radius-pill);background:var(--panel-2);
  color:var(--text);padding:0 .95rem;backdrop-filter: blur(.8rem);-webkit-backdrop-filter: blur(.8rem);
}
.chatSearch::placeholder{color:var(--muted-2)}
.messages{
  min-height:0;height:100%;overflow:auto;display:flex;flex-direction:column;gap:.625rem;padding:.25rem;
  scrollbar-width:thin;scrollbar-color:#1a1b1e transparent;
}
.messages::-webkit-scrollbar{width:.5rem}
.messages::-webkit-scrollbar-track{background:transparent}
.messages::-webkit-scrollbar-thumb{background:#1a1b1e;border-radius:999rem}
.sys{
  align-self:center;background:var(--panel-2);color:var(--muted-2);border-radius:var(--radius-pill);
  padding:.5rem .75rem;font-size:.75rem;max-width:100%;text-align:center;
  backdrop-filter: blur(.8rem);-webkit-backdrop-filter: blur(.8rem)
}
.msg{max-width:88%;display:flex;flex-direction:column;gap:.25rem}
.msg.self{align-self:flex-end;align-items:flex-end}
.msg.other{align-self:flex-start;align-items:flex-start}
.meta{font-size:.75rem;color: #d1d5db70;padding:0 .5rem;text-shadow:0 .05rem .15rem rgba(0,0,0,.2)}
.bubble{
  background: rgb(0 0 0 / 32%);
  border-radius:1.125rem;
  padding:.75rem .875rem;
  line-height:1.45;
  font-size:.9375rem;
  word-break:break-word;
  backdrop-filter: blur(.8rem);
  -webkit-backdrop-filter: blur(.8rem);
  color: rgb(213 213 213);
}
.msg.self .bubble{background: rgb(0 0 0 / 32%);color: rgb(213 213 213);}
.bubble.match{outline:.12rem solid rgba(255,255,255,.28)}

.attachmentCard{display:grid;gap:.55rem;background:rgba(255,255,255,.03);border-radius:1rem;padding:.6rem}
.attachmentPreview{max-width:16rem;border-radius:.8rem;display:block}
.fileLink{
  display:inline-flex;align-items:center;gap:.5rem;color:inherit;text-decoration:none;padding:.45rem .6rem;
  background:rgba(255,255,255,.05);border-radius:.8rem
}

/* Telegram-like audio card */
.voiceCard{
  min-width:16.25rem;
  max-width:20.25rem;
  width:100%;
  color:#fff;
  border-radius:1.2rem;
  padding:.7rem .8rem;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:.7rem;
}
.msg.self .voiceCard{background:rgba(30,31,34,.92)}
.msg.other .voiceCard{background: rgb(0 0 0 / 40%);}
.voicePlayBtn{
  width:2.45rem;
  height:2.45rem;
  border-radius:50%;
  border:0;
  background: rgb(184 145 103 / 38%);
  color:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:.92rem;
  padding-top: 4px;
}
.voiceCenter{display:grid;gap:.38rem;min-width:0;width:100%;overflow:hidden}
.voiceWave{
  width:100%;
  height:18px;
  display:block;
}
.voiceWaveSvg{
  width:100%;
  height:18px;
  display:block;
  overflow:visible;
}
.voiceWaveSvg line{
  stroke: rgb(184 145 103);
  stroke-width:3;
  stroke-linecap:round;
}
.voiceWaveSvg line.active{
  stroke: rgb(181 177 173);
}
.voiceMeta{
  display:flex;
  justify-content:space-between;
  gap:.6rem;
  font-size:.74rem;
  color: rgb(255 255 255 / 47%);
}

.composer{display:grid;grid-template-columns:auto auto 1fr auto;gap:.5rem;align-items:center}
.composerBtn{
  width:3rem;
  height:3rem;
  border:0;
  border-radius:50%;
  background:var(--panel-2);
  color:var(--text);
  cursor:pointer;
  display:grid;
  place-items:center;
  /* backdrop-filter: blur(.8rem); */
  -webkit-backdrop-filter: blur(.8rem);
  color: #b9a999;
}
.composerInputWrap{
  display:flex;
  align-items:center;
  gap:.5rem;
  min-width:0;
  background: var(--panel-2);
  border-radius:var(--radius-pill);
  padding:0 .5rem 0 .15rem;
  /* backdrop-filter: blur(.8rem); */
  -webkit-backdrop-filter: blur(.8rem);
  background: #8d8d8d38;
}
.composer input{width:100%;height:3rem;border:0;outline:none;background:transparent;color:var(--text);padding: 0 .55rem 0 .85rem;min-width:0}
.composer input::placeholder{color:var(--muted-2)}
.sendBtn{height:3rem;border:0;border-radius:var(--radius-pill);background: rgb(0 0 0 / 40%);color:white;padding:0 1rem;font-weight:700;cursor:pointer}

.emojiPanel,.confirmOverlay,.settingsOverlay{position:fixed;z-index:30}
.emojiPanel{
  left:50%;bottom:5rem;transform:translateX(-50%);display:none;width:min(100vw - 1.5rem, 20rem);
  background:rgba(30,31,34,.94);border-radius:1.2rem;padding:.75rem;gap:.5rem;grid-template-columns:repeat(7, 1fr);
  backdrop-filter: blur(1rem);-webkit-backdrop-filter: blur(1rem)
}
.emojiPanel.show{display:grid}
.emojiBtn{
  height:2.4rem;border:0;border-radius:.8rem;background:rgba(255,255,255,.05);color:#fff;cursor:pointer;font-size:1.15rem
}

.toast{
  position:fixed;left:50%;bottom:1rem;transform:translateX(-50%) translateY(.5rem);background:rgba(30,31,34,.86);color:var(--text);
  border-radius:var(--radius-pill);padding:.75rem 1rem;font-size:.8125rem;opacity:0;pointer-events:none;
  transition:opacity var(--transition), transform var(--transition);white-space:nowrap;max-width:calc(100vw - 2rem);overflow:hidden;
  text-overflow:ellipsis;backdrop-filter: blur(.8rem);-webkit-backdrop-filter: blur(.8rem);z-index:40
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.confirmOverlay,.settingsOverlay{
  inset:0;display:none;align-items:center;justify-content:center;padding:1rem;background:rgba(0,0,0,.32);
  backdrop-filter: blur(.2rem);-webkit-backdrop-filter: blur(.2rem)
}
.confirmOverlay.show,.settingsOverlay.show{display:flex}
.confirmBox,.settingsBox{
  width:min(100%,22rem);background:rgba(30,31,34,.9);border-radius:1.5rem;padding:1rem;display:flex;flex-direction:column;
  gap:.875rem;backdrop-filter: blur(1rem);-webkit-backdrop-filter: blur(1rem)
}
.settingsBox{width:min(100%,28rem)}
.confirmTitle,.settingsTitle{font-size:1rem;font-weight:700}
.confirmText{color:var(--muted);font-size:.875rem;line-height:1.45}
.confirmActions,.settingsActions{display:grid;grid-template-columns:1fr 1fr;gap:.625rem}
.confirmActions button,.settingsActions button{
  height:2.875rem;border:0;border-radius:999rem;cursor:pointer;font-weight:700
}
.confirmCancel,.settingsClose{background:rgba(255,255,255,.09);color:var(--text)}
.confirmClear{background:rgba(218,55,60,.92);color:#fff}
.settingsSave{background: rgb(129 102 73);color:#fff}
.settingsGrid{display:grid;gap:.75rem}
.settingItem{display:grid;gap:.45rem}
.settingLabel{font-size:.8125rem;color:var(--muted)}
.settingSelect,.settingRangeWrap{
  background:var(--panel-2);border-radius:1rem;padding:.85rem .9rem;color:var(--text);border:0;outline:none;width:100%
}
.settingRangeWrap{display:grid;gap:.55rem}
.rangeRow{display:grid;grid-template-columns:1fr auto;gap:.75rem;align-items:center;font-size:.875rem;color:var(--text)}
.rangeRow input[type="range"]{width:100%;accent-color: rgb(129 102 73);margin:0}

@media (max-width:640px){
  :root{--hero-size:15rem}
  .app{width:100%;height:100dvh;padding:.625rem;gap:.625rem}
  .chat{border-radius:1.5rem}
  .circleArea{width:min(100%,18rem);padding:1rem 0 1rem}
  .floatingBtn{width:2.5rem;height:2.5rem}
  .callCircle{width:min(100%,var(--hero-size));padding:1.2rem}
  .logoImg{width:4.1rem;height:4.1rem}
  .msg{max-width:92%}
  .voiceCard{min-width:13.5rem;max-width:16rem}
  .composer{grid-template-columns:auto auto 1fr}
  .sendBtn{grid-column:1 / -1}
  .settingsActions,.confirmActions{grid-template-columns:1fr}
}


.bubble.voiceBubble{
  background:transparent !important;
  padding:0 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}


.voiceCard.pendingAuto{
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
  animation: voicePendingPulse 1.2s ease-in-out infinite;
}
.voiceCard.needsTap{
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.26);
}
.voiceCard.needsTap .voicePlayBtn{
  background:rgba(255,255,255,.22);
}
@keyframes voicePendingPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.015)}
}


.autoplayToggle{
  height:2.7rem;
  padding:0 .95rem;
  border-radius:999rem;
  background:var(--panel-2);
  color:var(--text);
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
  backdrop-filter: blur(.8rem);
  -webkit-backdrop-filter: blur(.8rem);
}
.switchToggle{
  justify-content:space-between;
  min-width:9.4rem;
}
.switchText{
  font-size:.84rem;
  color:var(--text);
}
.switchTrack{
  position:relative;
  width:42px;
  height:24px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  transition:background var(--transition);
  flex:0 0 auto;
}
.switchTrack input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  margin:0;
}
.switchThumb{
  position:absolute;
  top:3px;
  left:3px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  transition:left var(--transition), transform var(--transition), background var(--transition);
}
.switchTrack:has(input:checked){
  background:rgba(88,101,242,.88);
}
.switchTrack input:checked + .switchThumb{
  left:21px;
}
.voiceCard.needsTap{
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.24);
}
.voiceCard.pendingAuto{
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.16);
}
@media (max-width:640px){
  .chatTop{
    grid-template-columns:auto minmax(0,1fr) auto !important;
  }
  .autoplayToggle{
    width:100%;
    justify-content:center;
  }
}

.switchTrack.active{background:rgba(88,101,242,.88)}
.switchTrack.active .switchThumb{left:21px}






@media (max-width:640px){
  .mobileTabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.45rem;
    flex:0 0 auto;
  }
  .mobileTab{
    height:2.8rem;
    border:0;
    border-radius:999rem;
    background:rgba(30,31,34,.82);
    color:rgba(255,255,255,.72);
    font-weight:700;
    cursor:pointer;
  }
  .mobileTab.active{
    background: rgb(129 102 73);
    color: #fff;
  }

  .app.mobile-audio-view .hero{
    display:block;
  }
  .app.mobile-audio-view .chat{
    display:none;
  }

  .app.mobile-chat-view .hero{
    display:none;
  }
  .app.mobile-chat-view .chat{
    display:grid;
    flex:1 1 auto;
    min-height:0;
    height:100%;
  }

  .chat{
    min-height:0;
  }
  .messages{
    min-height:0;
  }

  .composer{
    display:grid !important;
    grid-template-columns:3rem 3rem minmax(0,1fr);
    grid-template-areas:
      "input input input"
      "emoji add send";
    gap:.5rem;
    align-items:center;
  }
  .composerInputWrap{
    grid-area:input;
    width:100%;
    min-height:3rem;
  }
  #emojiToggleBtn{
    grid-area:emoji;
  }
  #attachComposerBtn{
    grid-area:add;
    margin-left:0 !important;
    justify-self:start;
  }
  .sendBtn{
    grid-area:send;
    width:100%;
    height:3rem;
    background:rgba(30,31,34,.92);
  }

  .chatTop{
    grid-template-columns:minmax(0,1fr) auto;
  }
  .switchToggle .switchText{
    display:none;
  }
  .autoplayToggle{
    width:3.5rem;
    min-width:3.5rem;
    justify-content:center;
    padding:0 .35rem;
  }
}


*{
  -webkit-tap-highlight-color: transparent;
}
button,
a,
input,
textarea,
label,
div{
  -webkit-tap-highlight-color: transparent;
}


.switchTrack{
  background:rgba(255,255,255,.10) !important;
}
.switchTrack:has(input:checked),
.switchTrack.active{
  background:rgba(255,255,255,.18) !important;
}
.switchThumb{
  background: rgb(151 129 106) !important;
}

@media (max-width:640px){

  .heroMobileToggleRow{
    display:flex;
  }

  .app.mobile-audio-view .heroMobileToggleRow{
    display:flex;
  }

  .app.mobile-chat-view .heroMobileToggleRow{
    display:none;
  }

  .chatTop{
    grid-template-columns:minmax(0,1fr) !important;
  }

  .chatTop .autoplayToggle{
    display:none !important;
  }

  
  .composer{
    display:grid !important;
    grid-template-columns:3rem 3rem minmax(0,1fr) !important;
    grid-template-areas:
      "input input input"
      "emoji add send" !important;
    gap:.55rem !important;
    align-items:center !important;
  }

  .composerInputWrap{
    grid-area:input !important;
    width:100% !important;
    min-height:3.25rem !important;
    padding:0 .8rem !important;
  }

  .composer input{
    width:100% !important;
    height:3.25rem !important;
    min-width:0 !important;
    font-size:1rem !important;
    padding:0 !important;
  }

  #emojiToggleBtn{
    grid-area:emoji !important;
    width:3rem !important;
    height:3rem !important;
    justify-self:start !important;
  }

  #attachComposerBtn{
    grid-area:add !important;
    width:3rem !important;
    height:3rem !important;
    justify-self:start !important;
    margin-left:0 !important;
  }

  .sendBtn{
    grid-area:send !important;
    width:100% !important;
    height:3rem !important;
    background:rgba(30,31,34,.92) !important;
  }
}


  40%{transform:translateY(-0.18rem);opacity:1}
}

@media (max-width:640px){
  .messages{
    scrollbar-width:none !important;
  }
  .messages::-webkit-scrollbar{
    width:0 !important;
    height:0 !important;
    display:none !important;
  }
  .composer{
    display:grid !important;
    grid-template-columns:3rem minmax(0,1fr) 3rem !important;
    grid-template-areas:
      "input input input"
      "add send emoji" !important;
    gap:.55rem !important;
    align-items:center !important;
  }
  #attachComposerBtn{
    grid-area:add !important;
    justify-self:start !important;
  }
  .sendBtn{
    grid-area:send !important;
    justify-self:stretch !important;
    width:100% !important;
    text-align:center !important;
  }
  #emojiToggleBtn{
    grid-area:emoji !important;
    justify-self:end !important;
  }
}


.heroMobileToggleRow{
  display:none;
  justify-content:center;
  margin-top:.2rem;
}
.mobileAudioToggle{
  min-width:10.8rem;
  padding:0 .8rem;
  justify-content:space-between;
  background:rgba(43,45,49,.42) !important;
}
.mobileAudioToggle .switchText{
  display:block !important;
  font-size:.82rem;
  color:rgba(255,255,255,.86);
}
.mobileAudioToggle .switchTrack{
  background:rgba(255,255,255,.09) !important;
}
.mobileAudioToggle .switchTrack:has(input:checked),
.mobileAudioToggle .switchTrack.active{
  background:rgba(255,255,255,.18) !important;
}

@media (max-width:640px){
  .heroMobileToggleRow{
    display:flex;
  }
  .app.mobile-chat-view .heroMobileToggleRow{
    display:none;
  }
}


.settingSelect,
.settingRangeWrap,
.settingsBox input[type="text"],
.settingsBox select{
  background:rgba(62,65,72,.72) !important;
  color:var(--text) !important;
}
.settingLabel{
  color:#d2d6dd !important;
}

.topIconBtn{
  width:2.7rem;
  height:2.7rem;
  border:0;
  border-radius:999rem;
  background:var(--panel-2);
  color:var(--text);
  display:grid;
  place-items:center;
  cursor:pointer;
  backdrop-filter: blur(.8rem);
  -webkit-backdrop-filter: blur(.8rem);
}

.incomingCallOverlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:1rem;
  background:rgba(0,0,0,.36);
  z-index:45;
  backdrop-filter: blur(.2rem);
  -webkit-backdrop-filter: blur(.2rem);
}
.incomingCallOverlay.show{display:flex}
.incomingCallBox{
  width:min(100%,22rem);
  background:rgba(30,31,34,.95);
  border-radius:1.5rem;
  padding:1rem;
  display:grid;
  gap:.85rem;
}
.incomingCallTitle{
  font-size:1rem;
  font-weight:700;
}
.incomingCallText{
  color:var(--muted);
  font-size:.92rem;
}
.incomingCallActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.65rem;
}
.incomingCallActions button{
  height:2.9rem;
  border:0;
  border-radius:999rem;
  font-weight:700;
  cursor:pointer;
}
.incomingDeclineBtn{background:rgba(218,55,60,.92);color:#fff}
.incomingAcceptBtn{background:rgba(88,101,242,.88);color:#fff}

@media (max-width:640px){
  .composer{
    display:grid !important;
    grid-template-columns:3rem minmax(0,1fr) 3rem !important;
    grid-template-areas:
      "input input input"
      "add send emoji" !important;
    gap:.55rem !important;
    align-items:center !important;
  }
  .composerInputWrap{grid-area:input !important; width:100% !important; min-height:3.25rem !important; padding:0 .8rem !important;}
  .composer input{width:100% !important; height:3.25rem !important; font-size:1rem !important; padding:0 !important;}
  #attachComposerBtn{grid-area:add !important; justify-self:start !important; margin-left:0 !important;}
  .sendBtn{grid-area:send !important; width:100% !important; text-align:center !important; background:rgba(30,31,34,.92) !important;}
  #emojiToggleBtn{grid-area:emoji !important; justify-self:end !important;}
  .messages{scrollbar-width:none !important; -ms-overflow-style:none !important;}
  .messages::-webkit-scrollbar{display:none !important; width:0 !important; height:0 !important;}
}


@media (max-width:640px){
  .chatTop{
    grid-template-columns:auto minmax(0,1fr) auto !important;
  }
}


@media (max-width:640px){
  .emojiPanel{
    bottom:6.1rem !important;
  }
}


@media (max-width:640px){
  .emojiPanel{
    bottom:5.75rem !important;
    max-height:11.25rem;
    overflow:auto;
  }
}


.chatSearch{
  background:rgba(255,255,255,.045) !important;
}

.searchTypingDots{
  letter-spacing:.08rem;
}

.chatSearchWrap{
  position:relative;
  min-width:0;
}
.chatSearch{
  position:relative;
  z-index:1;
}
.searchStatus{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  padding:0 .95rem;
  color:var(--muted-2);
  z-index:2;
  pointer-events:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.searchStatus.hidden{
  opacity:0;
}
.chatSearch:not(:placeholder-shown) + .searchStatus{
  opacity:0;
}


.chatSearch.typing-active::placeholder{
  color:transparent !important;
}


  50%{opacity:.58}
}

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

@media (max-width:640px){
  .composer{
    grid-template-columns:auto auto auto 1fr !important;
  }
  .sendBtn{
    grid-column:1 / -1;
  }
}


  50%{opacity:.58}
}

.sendIconBtn{
  width:3rem !important;
  min-width:3rem !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
}
.sendIconBtn i{
  font-size:1rem;
}

/* ПК: все в одну линию */
.composer{
  display:grid !important;
  grid-template-columns:auto auto minmax(0,1fr) auto auto !important;
  gap:.5rem !important;
  align-items:center !important;
}
.composerInputWrap{
  width:100% !important;
  min-height:3rem !important;
}
#attachComposerBtn,
#emojiToggleBtn,
#voiceMessageBtn,
.sendIconBtn{
  width:3rem;
  height:3rem;
  background: rgb(0 0 0 / 32%);
}
.sendBtn{
  height:3rem !important;
  border-radius:50% !important;
}

/* Моб: сверху только поле, снизу + смайлик отправить микрофон */
@media (max-width:640px){
  .composer{
    display:grid !important;
    grid-template-columns:3rem 3rem minmax(0,1fr) 3rem !important;
    grid-template-areas:
      "input input input input"
      "add emoji send mic" !important;
    gap:.55rem !important;
    align-items:center !important;
  }
  .composerInputWrap{
    grid-area:input !important;
    width:100% !important;
    min-height:3.2rem !important;
    padding:0 .8rem !important;
  }
  .composer input{
    width:100% !important;
    height:3.2rem !important;
    min-width:0 !important;
    font-size:1rem !important;
    padding:0 !important;
  }
  #attachComposerBtn{
    grid-area:add !important;
    justify-self:start !important;
    margin-left:0 !important;
  }
  #emojiToggleBtn{
    grid-area:emoji !important;
    justify-self:start !important;
  }
  .sendIconBtn{
    grid-area:send !important;
    width:100% !important;
    min-width:0 !important;
    border-radius:999rem !important;
    justify-self:stretch !important;
  }
  #voiceMessageBtn{
    grid-area:mic !important;
    justify-self:end !important;
  }
}

.voiceRecordBtn{
  transition: background .18s ease, color .18s ease;
}

.voiceRecordBtn{
  transition: background 0.18s ease, color 0.18s ease;
}


/* ПК иконка, телефон слово */
.sendIconBtn{
  width:3rem !important;
  min-width:3rem !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  border-radius:50% !important;
  background: rgb(0 0 0 / 32%);
  color: #b9a999;
}
.sendIconBtn i{
  display:block !important;
  font-size:1rem;
}
@media (max-width:640px){
  .sendIconBtn{
    width:100% !important;
    min-width:0 !important;
    border-radius:999rem !important;
    background: rgb(0 0 0 / 40%)  !important;
    background: #8d8d8d33  !important;
    color: #9c8d7d;
    background: rgb(0 0 0 / 32%) !important;
  }
  .sendIconBtn i{
    display:none !important;
  }
  .sendIconBtn::after{
    content:"Отправить";
    font-size:1rem;
    font-weight:700;
  }
}

/* В строке поиска показываем только один текст */
.chatSearch{
  color:transparent !important;
  caret-color:var(--text);
}
.chatSearch::placeholder{
  color:transparent !important;
}
.searchStatus{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  padding:0 .95rem;
  color:var(--muted-2);
  z-index:2;
  pointer-events:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chatSearchWrap.typing-mode .searchStatus{
  opacity:1 !important;
}
.chatSearchWrap:not(.typing-mode) .searchStatus{
  opacity:1 !important;
}

/* более округлые палочки */
.voiceWaveSvg line{
  stroke-linecap:round;
  stroke-width:3px;
}