*{box-sizing:border-box}
:root{
  --blue:var(--cz-075bd7,#075bd7);
  --blue2:var(--cz-1b83ed,#1b83ed);
  --ink:var(--cz-06245f,#06245f);
  --line:var(--cz-a8cdf4,#a8cdf4);
  --glass:var(--cz-rgb-239-248-255-_88,rgba(239,248,255,.88));
  --panel:var(--cz-edf7ff,#edf7ff);
}
html,body{margin:0;width:100%;height:100%;font-family:Tahoma,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--cz-4c94d8,#4c94d8)}
button,input,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}

/* LOGIN */

.login-screen{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 50% 20%,var(--cz-dff3ff,#dff3ff) 0,var(--cz-a9d7fb,#a9d7fb) 32%,var(--cz-5ba3e5,#5ba3e5) 70%,var(--cz-327dc4,#327dc4) 100%);
}
.login-card{
  width:min(390px,100%);
  text-align:center;
  padding:28px;
  border:1px solid rgba(255,255,255,.8);
  border-radius:28px;
  background:var(--cz-rgb-241-249-255-_74,rgba(241,249,255,.74));
  box-shadow:0 20px 70px var(--cz-rgb-0-46-112-_3,rgba(0,46,112,.3)),inset 0 1px white;
  backdrop-filter:blur(18px)
}
.cz-logo{display:flex;align-items:center;justify-content:center;gap:12px;text-align:left}
.cz-logo strong{display:block;font-size:29px}
.cz-logo small{display:block}
.login-avatar{margin:35px 0 12px}
.login-card h1{margin:5px 0;font-size:38px}
.login-card p{font-family:"Segoe Script","Comic Sans MS",cursive;font-style:italic;font-size:20px;color:var(--cz-1552a5,#1552a5)}
.login-card input{
  width:100%;height:48px;border:1px solid var(--cz-9fc8f4,#9fc8f4);border-radius:10px;
  padding:0 15px;background:rgba(255,255,255,.8);outline:none
}
.login-card input:focus{border-color:var(--cz-2786ec,#2786ec);box-shadow:0 0 0 3px var(--cz-rgb-39-134-236-_13,rgba(39,134,236,.13))}
.login-card button{
  width:100%;height:48px;margin-top:13px;border:0;border-radius:10px;color:white;
  font-weight:bold;background:linear-gradient(var(--cz-3597fa,#3597fa),var(--cz-0759d9,#0759d9));box-shadow:inset 0 1px rgba(255,255,255,.7)
}
.login-error{min-height:20px;margin-top:10px;color:#c21b31;font-size:13px}

/* MSN PEOPLE LOGO */

.people-logo{position:relative;width:58px;height:48px}
.people-logo span{position:absolute;display:block;border-radius:50% 50% 42% 42%;box-shadow:inset 4px 4px 8px rgba(255,255,255,.75),0 2px 5px var(--cz-rgb-0-40-100-_35,rgba(0,40,100,.35))}
.people-logo span:first-child{width:30px;height:38px;background:linear-gradient(#7be96e,#13a72c);left:4px;top:8px}
.people-logo span:last-child{width:38px;height:45px;background:linear-gradient(var(--cz-8ee6ff,#8ee6ff),var(--cz-1687eb,#1687eb));left:22px;top:1px}
.people-logo.big{transform:scale(2);margin:auto}
.banner-logo{transform:scale(1.2)}

/* DESKTOP APP */

.app{
  height:100dvh;
  padding:12px;
  background:
    radial-gradient(circle at 50% -20%,var(--cz-e9f8ff,#e9f8ff) 0,var(--cz-a8d6f8,#a8d6f8) 38%,var(--cz-68aee8,#68aee8) 72%,var(--cz-438acb,#438acb) 100%);
}
.titlebar{
  height:88px;position:relative;padding:10px 18px 25px;border:1px solid var(--cz-86b8eb,#86b8eb);border-radius:13px 13px 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.95),var(--cz-rgb-206-232-255-_86,rgba(206,232,255,.86)));
  box-shadow:inset 0 1px white
}
.brand{display:flex;gap:8px;align-items:center}
.crown{font-size:28px;color:#f0a900;text-shadow:0 1px white}
.brand strong{display:block;font-size:23px;color:var(--cz-073b93,#073b93)}
.brand small{display:block;font-size:13px}
.desktop-menu{position:absolute;left:18px;bottom:6px;font-size:12px}
.title-slogan{position:absolute;right:70px;top:28px;font-style:italic}
.mobile-back{display:none}

.layout{
  height:calc(100dvh - 112px);
  display:grid;
  grid-template-columns:285px minmax(400px,1fr) 255px;
  gap:8px;padding:8px;
  border:1px solid var(--cz-87b9ec,#87b9ec);border-top:0;
  background:var(--cz-rgb-235-247-255-_65,rgba(235,247,255,.65))
}
.sidebar,.chat-panel,.right-panel{
  min-height:0;border:1px solid var(--cz-9dc8f2,#9dc8f2);border-radius:9px;background:var(--cz-rgb-244-250-255-_82,rgba(244,250,255,.82));
  box-shadow:inset 0 1px white
}
.sidebar{overflow:auto}
.my-profile{display:flex;gap:12px;padding:12px;border-bottom:1px solid var(--cz-bdd8f2,#bdd8f2)}
.avatar{display:grid;place-items:center;border-radius:9px;background:linear-gradient(var(--cz-e7f6ff,#e7f6ff),var(--cz-9bd0f7,#9bd0f7));border:1px solid var(--cz-7db8ec,#7db8ec)}
.avatar-large{width:54px;height:54px;font-size:31px}
.profile-copy{min-width:0;display:flex;flex-direction:column;gap:3px}
.profile-copy strong{font-size:18px}
.profile-copy small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-style:italic}
.online{font-size:12px;color:#119b2b}
.searchbox{display:flex;margin:9px;border:1px solid var(--cz-91bfea,#91bfea);border-radius:7px;background:white}
.searchbox input{width:100%;border:0;outline:0;padding:8px;background:transparent}
.searchbox span{padding:5px 9px;font-size:20px}
.side-section{border-top:1px solid var(--cz-c1daf2,#c1daf2)}
.side-section h3{margin:0;padding:8px 10px;font-size:14px;background:linear-gradient(#fff,var(--cz-dceeff,#dceeff))}
.channel-row,.person-row{
  display:flex;align-items:center;gap:9px;padding:7px 10px;cursor:pointer
}
.channel-row:hover,.person-row:hover{background:var(--cz-d7ebff,#d7ebff)}
.channel-row.active{background:linear-gradient(90deg,var(--cz-c7e3ff,#c7e3ff),var(--cz-eaf6ff,#eaf6ff))}
.channel-hash{font-size:20px;font-weight:bold;color:var(--cz-075bd7,#075bd7)}
.channel-name{font-weight:bold;flex:1}
.badge{padding:2px 6px;border-radius:8px;background:var(--cz-b9dcff,#b9dcff);color:var(--cz-0753bc,#0753bc);font-size:11px}
.person-dot{width:9px;height:9px;border-radius:50%;background:#22bd43}
.person-name{font-weight:bold}

.chat-panel{display:grid;grid-template-rows:auto auto 1fr auto;overflow:hidden}
.channel-head{
  min-height:64px;display:flex;align-items:center;gap:10px;padding:8px 12px;
  background:linear-gradient(#fff,var(--cz-d9edff,#d9edff));border-bottom:1px solid var(--cz-a7cdf2,#a7cdf2)
}
.channel-icon{font-size:31px}
.channel-head h2{margin:0;font-size:20px}
.channel-head p{margin:3px 0 0;font-size:12px}
.mobile-members{display:none;margin-left:auto}

.welcome-banner{
  min-height:104px;margin:8px;border:1px solid var(--cz-91c4f2,#91c4f2);border-radius:8px;
  display:flex;align-items:center;justify-content:center;gap:45px;
  font-family:"Segoe Script","Comic Sans MS",cursive;font-size:22px;font-style:italic;
  background:linear-gradient(150deg,var(--cz-f4fbff,#f4fbff),var(--cz-cbe8ff,#cbe8ff) 53%,#b6e9d6)
}

.messages{overflow:auto;padding:8px 16px 20px;scroll-behavior:smooth}
.message{display:grid;grid-template-columns:42px 1fr;gap:9px;padding:7px 0}
.message-avatar{
  width:38px;height:38px;display:grid;place-items:center;border-radius:7px;
  background:linear-gradient(var(--cz-dff3ff,#dff3ff),var(--cz-99cef3,#99cef3));border:1px solid var(--cz-83b8e5,#83b8e5)
}
.message-line{line-height:1.35}
.message-name{font-weight:bold;color:var(--cz-0757bd,#0757bd)}
.message.self .message-name{color:#13843a}
.message-time{margin-left:7px;color:var(--cz-6684a9,#6684a9);font-size:11px}
.message-text{margin-top:2px;color:var(--cz-08285d,#08285d);overflow-wrap:anywhere}
.system-message{text-align:center;color:var(--cz-6480a3,#6480a3);font-size:12px;padding:4px}

.composer{padding:7px;border-top:1px solid var(--cz-9ec7ee,#9ec7ee);background:linear-gradient(var(--cz-eef8ff,#eef8ff),var(--cz-cce7ff,#cce7ff))}
.composer-tools{height:28px;display:flex;gap:4px}
.composer-tools button{border:0;background:transparent;font-weight:bold;color:var(--cz-0758bd,#0758bd)}
.composer-row{display:flex;gap:7px}
.composer textarea{
  flex:1;resize:none;min-height:42px;max-height:110px;padding:11px;border:1px solid var(--cz-99c4ed,#99c4ed);
  border-radius:7px;outline:none;background:white
}
.send-button{
  min-width:90px;border:1px solid var(--cz-2675d6,#2675d6);border-radius:7px;color:var(--cz-073d8f,#073d8f);font-weight:bold;
  background:linear-gradient(#fff,var(--cz-bcdfff,#bcdfff))
}

.right-panel{overflow:auto}
.info-card,.member-card{padding:10px}
.info-card{border-bottom:1px solid var(--cz-b7d5f1,#b7d5f1)}
.info-card h3,.member-card h3{margin:0 -10px 10px;padding:8px 10px;background:linear-gradient(#fff,var(--cz-dceeff,#dceeff));font-size:14px}
.info-card h2{margin:8px 0 5px;font-size:18px}
.info-card p{font-size:12px;line-height:1.5}
.channel-stats{display:grid;gap:8px;margin-top:14px;font-size:12px}
.member-row{display:flex;align-items:center;gap:8px;padding:5px 2px}
.member-avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--cz-cbe7ff,#cbe7ff)}
.member-prefix{font-weight:bold;color:#e59b00}
.member-nick{font-weight:bold}
.member-modes{font-size:11px;color:var(--cz-6481a8,#6481a8)}

.mobile-nav,.mobile-drawer,.drawer-shade{display:none}

/* MOBILE */

@media(max-width:760px){
  body{background:var(--cz-d9efff,#d9efff)}
  .app{padding:0;background:linear-gradient(var(--cz-cbe9ff,#cbe9ff),var(--cz-eef8ff,#eef8ff))}
  .titlebar{
    height:58px;border-radius:0;padding:8px 12px;display:flex;align-items:center
  }
  .brand strong{font-size:18px}
  .brand small{font-size:10px}
  .crown,.desktop-menu,.title-slogan{display:none}

  .layout{
    display:block;height:calc(100dvh - 118px);padding:0;border:0;background:transparent
  }

  .sidebar,.right-panel{display:none}
  .chat-panel{height:100%;border:0;border-radius:0;grid-template-rows:auto auto 1fr auto}
  .channel-head{min-height:58px}
  .channel-head h2{font-size:18px}
  .channel-head p{font-size:11px}
  .mobile-members{display:block;border:0;background:transparent;color:var(--cz-0756b9,#0756b9);font-weight:bold}
  .welcome-banner{min-height:58px;margin:0;border-width:0 0 1px;border-radius:0;font-family:Tahoma,sans-serif;font-size:12px;gap:8px}
  .banner-logo{display:none}

  .messages{padding:10px;background:linear-gradient(var(--cz-e7f5ff,#e7f5ff),var(--cz-f7fbff,#f7fbff))}
  .message{display:flex;align-items:flex-end;gap:7px}
  .message-avatar{width:34px;height:34px;flex:0 0 34px;border-radius:50%}
  .message-body{
    max-width:78%;padding:8px 10px;border:1px solid var(--cz-d2dce8,#d2dce8);border-radius:5px 14px 14px 14px;
    background:rgba(255,255,255,.9);box-shadow:0 2px 5px var(--cz-rgb-15-67-125-_07,rgba(15,67,125,.07))
  }
  .message.self{flex-direction:row-reverse}
  .message.self .message-body{background:#d9f6e4;border-color:#b8e8ca;border-radius:14px 5px 14px 14px}
  .message-name{font-size:13px}
  .message-text{font-size:14px}
  .composer{padding:7px 8px;background:var(--cz-e2f2ff,#e2f2ff)}
  .composer-tools{display:none}
  .composer textarea{min-height:40px;border-radius:20px;padding:10px 14px}
  .send-button{min-width:48px;width:48px;border-radius:50%;font-size:0}
  .send-button:after{content:"➤";font-size:20px}

  .mobile-nav{
    height:60px;display:grid;grid-template-columns:repeat(4,1fr);
    position:fixed;bottom:0;left:0;right:0;z-index:20;
    padding-bottom:env(safe-area-inset-bottom);
    border-top:1px solid var(--cz-9cc7ed,#9cc7ed);background:var(--cz-rgb-239-248-255-_97,rgba(239,248,255,.97))
  }
  .mobile-nav button{border:0;background:transparent;color:var(--cz-174f9b,#174f9b);font-size:19px}
  .mobile-nav span{display:block;font-size:10px;margin-top:2px}
  .mobile-nav .active{color:var(--cz-0066df,#0066df)}

  .mobile-drawer{
    display:block;position:fixed;z-index:50;top:0;right:0;width:min(85vw,330px);height:100dvh;
    background:var(--cz-eff8ff,#eff8ff);box-shadow:-10px 0 30px var(--cz-rgb-0-45-100-_25,rgba(0,45,100,.25));
    transform:translateX(105%);transition:.22s ease;padding-bottom:20px
  }
  .mobile-drawer.open{transform:translateX(0)}
  .drawer-head{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 15px;background:linear-gradient(#fff,var(--cz-d5ebff,#d5ebff));border-bottom:1px solid var(--cz-9dc7ed,#9dc7ed)}
  .drawer-head button{border:0;background:transparent;font-size:28px;color:var(--cz-0758bb,#0758bb)}
  .mobile-drawer .member-list{padding:10px}
  .drawer-shade{position:fixed;z-index:49;inset:0;background:var(--cz-rgb-0-30-70-_3,rgba(0,30,70,.3))}
  .drawer-shade.open{display:block}

  .login-card{background:transparent;border:0;box-shadow:none;backdrop-filter:none}
}

@media(min-width:761px) and (max-width:1050px){
  .layout{grid-template-columns:245px minmax(360px,1fr)}
  .right-panel{display:none}
}
/* =========================================
   MSN STYLE CONNECTING SCREEN
   ========================================= */

.connecting-screen{
  position:fixed;
  inset:0;
  z-index:9999;

  display:grid;
  place-items:center;

  background:
    radial-gradient(
      circle at 50% 30%,
      var(--cz-f7fcff,#f7fcff) 0,
      var(--cz-d8efff,#d8efff) 32%,
      var(--cz-9dd0f7,#9dd0f7) 68%,
      var(--cz-559ad8,#559ad8) 100%
    );
}

.connecting-box{
  width:min(390px,calc(100vw - 32px));
  padding:38px 30px 32px;

  text-align:center;

  border:1px solid rgba(255,255,255,.95);
  border-radius:24px;

  background:var(--cz-rgb-242-249-255-_80,rgba(242,249,255,.80));

  box-shadow:
    0 25px 70px var(--cz-rgb-0-53-120-_28,rgba(0,53,120,.28)),
    inset 0 1px 0 white;

  backdrop-filter:blur(15px);
}

.connecting-logo{
  height:125px;
  display:grid;
  place-items:center;
}

.msn-orbit{
  position:relative;
  width:105px;
  height:105px;

  animation:
    msnOrbit 1.15s linear infinite;
}

.msn-person{
  position:absolute;

  width:48px;
  height:64px;

  border-radius:
    48% 48% 42% 42%;

  box-shadow:
    inset 7px 7px 12px rgba(255,255,255,.75),
    0 5px 12px var(--cz-rgb-0-61-130-_28,rgba(0,61,130,.28));
}

.msn-person::before{
  content:"";

  position:absolute;

  width:31px;
  height:31px;

  left:8px;
  top:-18px;

  border-radius:50%;

  background:inherit;

  box-shadow:
    inset 6px 6px 10px rgba(255,255,255,.75),
    0 3px 7px var(--cz-rgb-0-61-130-_25,rgba(0,61,130,.25));
}

.msn-blue{
  right:4px;
  top:29px;

  background:
    linear-gradient(
      135deg,
      var(--cz-a6eeff,#a6eeff),
      var(--cz-258eea,#258eea) 55%,
      var(--cz-0861c8,#0861c8)
    );
}

.msn-green{
  left:4px;
  top:14px;

  background:
    linear-gradient(
      135deg,
      #c2ff9c,
      #50c93f 55%,
      #15982c
    );
}

@keyframes msnOrbit{

  0%{
    transform:rotate(0deg);
  }

  100%{
    transform:rotate(360deg);
  }

}

.connecting-box h2{
  margin:8px 0 4px;

  font-size:30px;
  color:var(--cz-074598,#074598);
}

.connecting-title{
  margin-top:18px;

  font-size:17px;
  font-weight:bold;

  color:var(--cz-083d89,#083d89);
}

.connecting-status{
  margin-top:8px;

  font-size:13px;
  color:var(--cz-54769e,#54769e);
}

.connecting-dots{
  display:flex;
  justify-content:center;
  gap:7px;

  height:25px;

  margin-top:13px;
}

.connecting-dots span{
  width:8px;
  height:8px;

  border-radius:50%;

  background:var(--cz-1679df,#1679df);

  animation:
    connectingDot 1.2s infinite ease-in-out;
}

.connecting-dots span:nth-child(2){
  animation-delay:.18s;
}

.connecting-dots span:nth-child(3){
  animation-delay:.36s;
}

@keyframes connectingDot{

  0%,80%,100%{
    transform:scale(.65);
    opacity:.35;
  }

  40%{
    transform:scale(1.2);
    opacity:1;
  }

}

.connecting-box small{
  color:var(--cz-6885a6,#6885a6);
}

@media(max-width:760px){

  .connecting-screen{
    background:
      radial-gradient(
        circle at 50% 25%,
        var(--cz-f5fbff,#f5fbff),
        var(--cz-cce9ff,#cce9ff) 45%,
        var(--cz-7eb9ec,#7eb9ec) 100%
      );
  }

  .connecting-box{
    width:100%;
    height:100dvh;

    border:0;
    border-radius:0;

    box-shadow:none;
    background:transparent;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
  }

}

/* =====================================================
   ChatZone - MSN el ele dönen bağlantı animasyonu
   ===================================================== */

.connecting-logo {
    height: 150px;
    display: grid;
    place-items: center;
    overflow: visible;
}

.msn-buddies {
    position: relative;
    width: 150px;
    height: 125px;

    transform-origin: 50% 55%;

    animation:
        buddySpin 1.7s linear infinite,
        buddyFloat 0.85s ease-in-out infinite alternate;
}


/* =========================
   ORTAK KARAKTER YAPISI
   ========================= */

.msn-buddy {
    position: absolute;
    width: 58px;
    height: 92px;

    top: 17px;

    filter:
        drop-shadow(0 7px 7px var(--cz-rgb-0-70-140-_20,rgba(0, 70, 140, .20)));
}


/* YEŞİL */

.msn-buddy-green {
    left: 20px;
}


/* MAVİ */

.msn-buddy-blue {
    right: 20px;
}


/* =========================
   KAFA
   ========================= */

.buddy-head {
    position: absolute;

    width: 39px;
    height: 39px;

    top: 0;
    left: 9px;

    border-radius: 50%;

    z-index: 3;
}


.msn-buddy-green .buddy-head {
    background:
        radial-gradient(
            circle at 35% 28%,
            #efffdc 0%,
            #a7f16d 22%,
            #55ca38 58%,
            #159527 100%
        );

    box-shadow:
        inset -4px -5px 8px rgba(0, 90, 20, .20),
        inset 5px 5px 8px rgba(255,255,255,.60);
}


.msn-buddy-blue .buddy-head {
    background:
        radial-gradient(
            circle at 35% 28%,
            var(--cz-e9fbff,#e9fbff) 0%,
            var(--cz-7edaff,#7edaff) 22%,
            var(--cz-229ce8,#229ce8) 58%,
            var(--cz-0763bf,#0763bf) 100%
        );

    box-shadow:
        inset -4px -5px 8px var(--cz-rgb-0-70-150-_22,rgba(0,70,150,.22)),
        inset 5px 5px 8px rgba(255,255,255,.65);
}


/* =========================
   GÖVDE
   ========================= */

.buddy-body {
    position: absolute;

    width: 55px;
    height: 58px;

    left: 1px;
    top: 32px;

    border-radius:
        48% 48%
        38% 38% /
        35% 35%
        62% 62%;

    z-index: 2;
}


.msn-buddy-green .buddy-body {
    background:
        linear-gradient(
            135deg,
            #b7fa84 0%,
            #55ce3e 45%,
            #15982b 100%
        );

    box-shadow:
        inset 8px 5px 12px rgba(255,255,255,.48),
        inset -6px -6px 10px rgba(0,90,20,.18);
}


.msn-buddy-blue .buddy-body {
    background:
        linear-gradient(
            135deg,
            var(--cz-9eeaff,#9eeaff) 0%,
            var(--cz-2ca8ee,#2ca8ee) 45%,
            var(--cz-0866c6,#0866c6) 100%
        );

    box-shadow:
        inset 8px 5px 12px rgba(255,255,255,.52),
        inset -6px -6px 10px var(--cz-rgb-0-65-145-_20,rgba(0,65,145,.20));
}


/* =========================
   KOLLAR
   ========================= */

.buddy-arm {
    position: absolute;

    width: 39px;
    height: 15px;

    top: 48px;

    border-radius: 20px;

    z-index: 5;
}


/* Yeşilin sağ kolu ortaya uzanıyor */

.msn-buddy-green .buddy-arm-right {
    right: -24px;

    transform:
        rotate(15deg);

    transform-origin: left center;

    background:
        linear-gradient(
            90deg,
            #55cc3d,
            #79df58
        );
}


/* Mavinin sol kolu ortaya uzanıyor */

.msn-buddy-blue .buddy-arm-left {
    left: -24px;

    transform:
        rotate(-15deg);

    transform-origin: right center;

    background:
        linear-gradient(
            90deg,
            var(--cz-57c8f5,#57c8f5),
            var(--cz-218fdc,#218fdc)
        );
}


/* Ellerinin birleştiği nokta */

.buddy-hand {
    position: absolute;

    width: 17px;
    height: 17px;

    left: 66px;
    top: 61px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #75dc59 0%,
            var(--cz-48bfe9,#48bfe9) 100%
        );

    box-shadow:
        0 0 8px var(--cz-rgb-80-180-255-_45,rgba(80,180,255,.45));

    z-index: 7;
}


/* =========================
   DÖNÜŞ İZLERİ
   ========================= */

.orbit-trail {
    position: absolute;

    left: 4px;
    top: 48px;

    width: 140px;
    height: 47px;

    border-radius: 50%;

    pointer-events: none;
}


.orbit-trail-one {
    border-top:
        3px solid var(--cz-rgb-54-164-255-_50,rgba(54,164,255,.50));

    transform:
        rotate(-8deg);

    filter:
        drop-shadow(
            0 0 4px var(--cz-rgb-40-160-255-_55,rgba(40,160,255,.55))
        );
}


.orbit-trail-two {
    border-bottom:
        3px solid rgba(103,205,62,.45);

    transform:
        rotate(9deg);

    filter:
        drop-shadow(
            0 0 4px rgba(90,205,70,.50)
        );
}


/* =========================
   ANA DÖNÜŞ
   ========================= */

@keyframes buddySpin {

    0% {
        transform:
            rotateY(0deg)
            rotateZ(0deg);
    }

    25% {
        transform:
            rotateY(90deg)
            rotateZ(3deg);
    }

    50% {
        transform:
            rotateY(180deg)
            rotateZ(0deg);
    }

    75% {
        transform:
            rotateY(270deg)
            rotateZ(-3deg);
    }

    100% {
        transform:
            rotateY(360deg)
            rotateZ(0deg);
    }
}


/*
 * Hafif yukarı aşağı hareket.
 * Eski Messenger animasyonundaki
 * canlılık hissini artırıyor.
 */

@keyframes buddyFloat {

    from {
        margin-top: -3px;
    }

    to {
        margin-top: 4px;
    }
}


/* Dönüş sırasında hafif parıltı */

.msn-buddies::after {
    content: "";

    position: absolute;

    width: 105px;
    height: 18px;

    left: 22px;
    bottom: 3px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            var(--cz-rgb-53-156-236-_24,rgba(53,156,236,.24)),
            transparent 70%
        );

    filter: blur(5px);

    animation:
        buddyShadow 1.7s ease-in-out infinite;
}


@keyframes buddyShadow {

    0%, 100% {
        transform: scaleX(1);
        opacity: .65;
    }

    50% {
        transform: scaleX(.65);
        opacity: .30;
    }
}


/* MOBİL */

@media (max-width: 760px) {

    .connecting-logo {
        height: 165px;
    }

    .msn-buddies {
        transform-origin: center center;
    }

}


/* =========================================================
   CHATZONE EMOJI PICKER
   ========================================================= */

.composer {
    position: relative;
}


/* Emoji paneli */

.emoji-picker {
    display: none;

    position: absolute;

    left: 8px;
    bottom: 72px;

    width: 390px;
    height: 410px;

    background: var(--cz-f7fbff,#f7fbff);

    border: 1px solid var(--cz-8bbbea,#8bbbea);
    border-radius: 10px;

    box-shadow:
        0 8px 28px var(--cz-rgb-20-70-130-_24,rgba(20, 70, 130, .24)),
        inset 0 1px 0 rgba(255,255,255,.9);

    overflow: hidden;

    z-index: 500;
}


.emoji-picker.open {
    display: flex;
    flex-direction: column;
}


/* Arama */

.emoji-picker-search {
    height: 49px;

    display: flex;
    align-items: center;

    gap: 7px;

    padding: 7px 9px;

    background:
        linear-gradient(
            var(--cz-f8fcff,#f8fcff),
            var(--cz-e2f1ff,#e2f1ff)
        );

    border-bottom: 1px solid var(--cz-bdd8f2,#bdd8f2);
}


.emoji-picker-search span {
    font-size: 16px;
}


.emoji-picker-search input {
    flex: 1;

    height: 32px;

    border: 1px solid var(--cz-aecce8,#aecce8);
    border-radius: 16px;

    outline: none;

    padding: 0 13px;

    background: white;

    color: var(--cz-17365d,#17365d);
}


.emoji-picker-search input:focus {
    border-color: var(--cz-4b9dea,#4b9dea);

    box-shadow:
        0 0 0 2px var(--cz-rgb-70-150-230-_12,rgba(70,150,230,.12));
}


.emoji-picker-search button {
    width: 28px;
    height: 28px;

    border: 0;
    border-radius: 50%;

    background: transparent;

    color: var(--cz-52708e,#52708e);

    cursor: pointer;
}


.emoji-picker-search button:hover {
    background: var(--cz-d8ebfb,#d8ebfb);
}


/* Kategoriler */

.emoji-categories {
    display: flex;

    align-items: center;

    height: 45px;

    padding: 0 5px;

    background: var(--cz-edf7ff,#edf7ff);

    border-bottom: 1px solid var(--cz-c4dcf2,#c4dcf2);

    overflow-x: auto;
    overflow-y: hidden;
}


.emoji-categories button {
    position: relative;

    flex: 1 0 37px;

    height: 43px;

    border: 0;

    background: transparent;

    font-size: 19px;

    cursor: pointer;

    opacity: .65;

    transition:
        opacity .15s,
        background .15s;
}


.emoji-categories button:hover {
    opacity: 1;
    background: var(--cz-rgb-126-188-240-_12,rgba(126,188,240,.12));
}


.emoji-categories button.active {
    opacity: 1;
}


.emoji-categories button.active::after {
    content: "";

    position: absolute;

    left: 7px;
    right: 7px;
    bottom: 0;

    height: 3px;

    border-radius: 3px 3px 0 0;

    background: var(--cz-2785dc,#2785dc);
}


/* Başlık */

.emoji-picker-title {
    height: 32px;

    display: flex;
    align-items: center;

    padding: 0 12px;

    font-size: 12px;
    font-weight: bold;

    color: var(--cz-607b97,#607b97);

    background: var(--cz-f8fcff,#f8fcff);

    text-transform: uppercase;
}


/* Emoji alanı */

.emoji-grid {
    flex: 1;

    display: grid;

    grid-template-columns:
        repeat(9, minmax(32px, 1fr));

    align-content: start;

    gap: 2px;

    padding: 5px 8px 12px;

    overflow-y: auto;

    scrollbar-width: thin;
}


.emoji-item {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    aspect-ratio: 1;

    border: 0;
    border-radius: 7px;

    background: transparent;

    font-size: 25px;

    line-height: 1;

    cursor: pointer;

    transition:
        background .1s,
        transform .1s;
}


.emoji-item:hover {
    background: var(--cz-dcefff,#dcefff);

    transform: scale(1.15);
}


.emoji-item:active {
    transform: scale(.92);
}


/* Composer butonları */

.composer-tool {
    cursor: pointer;
}


.emoji-tool {
    font-size: 17px;
}


/* =========================================================
   MOBIL
   ========================================================= */

@media (max-width: 760px) {

    /*
     * Eski CSS'de composer-tools display:none.
     * Emoji butonunu mobilde geri getiriyoruz.
     */

    .composer-tools {
        display: flex;

        height: 30px;

        align-items: center;

        gap: 5px;
    }


    /*
     * Mobilde şimdilik yalnız emoji.
     * A ve dosya butonlarını sonra ayrı tasarlarız.
     */

    .composer-tools .composer-tool:not(.emoji-tool) {
        display: none;
    }


    .emoji-tool {
        display: flex;

        align-items: center;
        justify-content: center;

        width: 30px;
        height: 30px;

        font-size: 20px;
    }


    .emoji-picker {
        position: fixed;

        left: 0;
        right: 0;
        bottom: 60px;

        width: 100%;
        height: 43vh;

        max-height: 390px;

        border-left: 0;
        border-right: 0;

        border-radius: 14px 14px 0 0;

        box-shadow:
            0 -7px 25px var(--cz-rgb-20-70-120-_18,rgba(20,70,120,.18));

        z-index: 2000;
    }


    .emoji-grid {
        grid-template-columns:
            repeat(8, minmax(34px, 1fr));

        padding-left: 7px;
        padding-right: 7px;
    }


    .emoji-item {
        font-size: 25px;
    }


    .emoji-picker-search {
        padding-left: 12px;
        padding-right: 12px;
    }

}


/* Küçük telefon */

@media (max-width: 390px) {

    .emoji-grid {
        grid-template-columns:
            repeat(7, minmax(34px, 1fr));
    }

}

/* =========================================================
   CHATZONE EMOJI PICKER - MOBIL FIX
   ========================================================= */

@media (max-width: 760px) {

    /*
     * Composer her zaman emoji panelinin üzerinde/görünür
     * kalacak.
     */
    .composer {
        position: relative;
        z-index: 100;
        overflow: visible;
    }

    /*
     * Mobilde toolbar'ı ayrı satır yapmıyoruz.
     * Emoji butonunu mesaj satırının içine taşıyormuş
     * hissi veriyoruz.
     */
    .composer-tools {
        position: absolute;

        left: 13px;
        bottom: 12px;

        width: 32px;
        height: 32px;

        padding: 0;
        margin: 0;

        z-index: 105;

        display: flex;
        align-items: center;
        justify-content: center;

        pointer-events: none;
    }

    .composer-tools .emoji-tool {
        display: flex;

        width: 30px;
        height: 30px;

        align-items: center;
        justify-content: center;

        padding: 0;

        border: 0;
        border-radius: 50%;

        background: transparent;

        font-size: 20px;

        pointer-events: auto;
    }

    .composer-tools .composer-tool:not(.emoji-tool) {
        display: none;
    }

    /*
     * Emoji butonu için textarea'nın solunda boşluk.
     */
    .composer textarea {
        padding-left: 46px;
        padding-right: 14px;

        min-height: 42px;
        max-height: 100px;

        resize: none;
    }

    /*
     * Picker artık ekranın altına fixed değil.
     * Composer'ın hemen ÜSTÜNDE açılıyor.
     */
    .emoji-picker {
        position: absolute;

        left: 6px;
        right: 6px;

        bottom: calc(100% + 5px);

        width: auto;
        height: 330px;
        max-height: 42vh;

        border: 1px solid var(--cz-9ec8ec,#9ec8ec);
        border-radius: 14px;

        background: var(--cz-f7fbff,#f7fbff);

        box-shadow:
            0 -5px 22px var(--cz-rgb-25-70-120-_18,rgba(25, 70, 120, .18));

        z-index: 110;
    }

    .emoji-picker.open {
        display: flex;
    }

    .emoji-picker-search {
        flex: 0 0 46px;
    }

    .emoji-categories {
        flex: 0 0 43px;
    }

    .emoji-picker-title {
        flex: 0 0 30px;
    }

    .emoji-grid {
        min-height: 0;

        grid-template-columns:
            repeat(8, minmax(34px, 1fr));

        overflow-y: auto;

        overscroll-behavior: contain;

        -webkit-overflow-scrolling: touch;
    }

    .emoji-item {
        min-height: 38px;
        font-size: 25px;
    }
}


@media (max-width: 390px) {

    .emoji-picker {
        height: 300px;
    }

    .emoji-grid {
        grid-template-columns:
            repeat(7, minmax(34px, 1fr));
    }
}

/* =========================================================
   USER PROFILE / ACTION CARD
   ========================================================= */

.member-row,
.person-row {
  cursor: pointer;
}

.member-row:hover,
.person-row:hover {
  background: var(--cz-rgb-203-231-255-_75,rgba(203, 231, 255, .75));
}

.person-chat-icon {
  margin-left: auto;
  opacity: .55;
  font-size: 13px;
}

.person-row:hover .person-chat-icon {
  opacity: 1;
}

.user-card-shade {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 499;
  background: var(--cz-rgb-12-42-78-_25,rgba(12, 42, 78, .25));
  backdrop-filter: blur(2px);
}

.user-card-shade.open {
  display: block;
}

.user-card {
  display: none;

  position: fixed;
  z-index: 500;

  width: 330px;

  padding: 22px;

  border: 1px solid var(--cz-8dbbe8,#8dbbe8);
  border-radius: 15px;

  background:
    linear-gradient(
      160deg,
      #ffffff,
      var(--cz-e7f4ff,#e7f4ff)
    );

  box-shadow:
    0 18px 55px
    var(--cz-rgb-0-48-105-_28,rgba(0, 48, 105, .28));
}

.user-card.open {
  display: block;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%, -50%);
}

.user-card-close {
  position: absolute;

  right: 10px;
  top: 7px;

  width: 32px;
  height: 32px;

  border: 0;
  background: transparent;

  color: var(--cz-537ca7,#537ca7);
  font-size: 25px;
}

.user-card-avatar {
  width: 76px;
  height: 76px;

  margin: 4px auto 10px;

  display: grid;
  place-items: center;

  border: 1px solid var(--cz-82b9e9,#82b9e9);
  border-radius: 50%;

  background:
    linear-gradient(
      var(--cz-eff9ff,#eff9ff),
      var(--cz-a8d8fa,#a8d8fa)
    );

  font-size: 42px;

  box-shadow:
    inset 0 1px white,
    0 4px 12px
    var(--cz-rgb-0-66-130-_15,rgba(0, 66, 130, .15));
}

.user-card-info {
  text-align: center;
}

.user-card-info h2 {
  margin: 4px 0;
  color: var(--cz-063f91,#063f91);
}

.user-card-online {
  color: #16a33b;
  font-size: 12px;
}

.user-card-info p {
  margin: 7px 0 15px;
  color: var(--cz-6682a1,#6682a1);
  font-size: 12px;
}

.user-card-actions {
  display: grid;
  gap: 7px;
}

.user-card-actions button {
  min-height: 55px;

  display: flex;
  align-items: center;

  gap: 11px;

  padding: 8px 12px;

  text-align: left;

  border: 1px solid var(--cz-b0d0ee,#b0d0ee);
  border-radius: 9px;

  background:
    linear-gradient(
      #fff,
      var(--cz-e4f2ff,#e4f2ff)
    );

  color: var(--cz-0a4c9e,#0a4c9e);
}

.user-card-actions button:hover {
  border-color: var(--cz-6fa9df,#6fa9df);
  background:
    linear-gradient(
      #fff,
      var(--cz-d4ebff,#d4ebff)
    );
}

.user-card-actions button > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-card-actions small {
  color: var(--cz-7089a3,#7089a3);
  font-size: 11px;
}

@media (max-width: 760px) {

  .user-card.open {
    top: auto;
    left: 8px;
    right: 8px;
    bottom:
      calc(
        68px +
        env(safe-area-inset-bottom)
      );

    width: auto;

    transform: none;

    border-radius: 18px;
  }

  .user-card {
    padding:
      18px 16px 15px;
  }

  .user-card-avatar {
    width: 66px;
    height: 66px;
    font-size: 36px;
  }

}

/* =========================================
   PRIVATE MESSAGE MODE
   ========================================= */

/*
 * Özel mesaj açıldığında sağ panel tamamen
 * kaybolur.
 */
.right-panel.private-hidden {
  display: none;
}

/*
 * Normal:
 * sidebar | chat | right panel
 *
 * Özel:
 * sidebar | geniş chat
 */
.layout.private-chat {
  grid-template-columns:
    285px minmax(400px, 1fr);
}

/*
 * Özel mesajda orta sohbet alanı
 * kalan alanın tamamını kullansın.
 */
.layout.private-chat .chat-panel {
  width: 100%;
}


/* Tablet */
@media
(min-width: 761px)
and
(max-width: 1050px) {

  .layout.private-chat {
    grid-template-columns:
      245px minmax(360px, 1fr);
  }

}


/* Mobil zaten sağ panel kullanmıyor. */
@media (max-width: 760px) {

  .layout.private-chat {
    display: block;
  }

}

/* =====================================================
   PRIVATE CHAT LIST
   ===================================================== */

.private-chat-info {
  min-width: 0;
  flex: 1;

  display: flex;
  flex-direction: column;
}

.private-preview {
  overflow: hidden;

  color: var(--cz-7990a8,#7990a8);

  white-space: nowrap;
  text-overflow: ellipsis;

  font-size: 10px;
}

.private-unread,
.mobile-unread {
  min-width: 20px;
  height: 20px;

  padding: 0 6px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;

  background: var(--cz-0878d1,#0878d1);
  color: white;

  font-size: 10px;
  font-weight: bold;
}

.private-chat-row.active {
  background:
    linear-gradient(
      var(--cz-e5f5ff,#e5f5ff),
      var(--cz-c5e7ff,#c5e7ff)
    );
}

.empty-private-list {
  padding: 14px 8px;

  color: var(--cz-8195aa,#8195aa);

  text-align: center;
  font-size: 11px;
}


/* =====================================================
   MOBILE SECTIONS
   ===================================================== */

.mobile-section {
  display: none;
}

@media (max-width: 760px) {

  .mobile-section.open {
    position: fixed;

    z-index: 180;

    display: flex;
    flex-direction: column;

    left: 0;
    right: 0;
    top: 45px;

    bottom:
      calc(
        63px +
        env(safe-area-inset-bottom)
      );

    background:
      linear-gradient(
        var(--cz-f9fdff,#f9fdff),
        var(--cz-eaf6ff,#eaf6ff)
      );
  }

  .mobile-section-head {
    min-height: 66px;

    padding: 10px 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom:
      1px solid var(--cz-b8d8f1,#b8d8f1);

    background:
      linear-gradient(
        #fff,
        var(--cz-e5f3ff,#e5f3ff)
      );
  }

  .mobile-section-head small {
    display: block;

    color: var(--cz-7790aa,#7790aa);
    font-size: 10px;
  }

  .mobile-section-head h2 {
    margin: 2px 0 0;

    color: var(--cz-06458e,#06458e);
    font-size: 19px;
  }

  .mobile-section-head button {
    width: 36px;
    height: 36px;

    border: 0;
    background: transparent;

    color: var(--cz-507da9,#507da9);
    font-size: 26px;
  }

  .mobile-section-content {
    flex: 1;

    overflow-y: auto;

    padding: 8px;
  }

  .mobile-list-row {
    width: 100%;
    min-height: 62px;

    padding: 8px 10px;

    display: flex;
    align-items: center;

    gap: 10px;

    border: 0;
    border-bottom:
      1px solid var(--cz-d4e7f6,#d4e7f6);

    background: transparent;

    text-align: left;
  }

  .mobile-list-row:active {
    background: var(--cz-dcefff,#dcefff);
  }

  .mobile-list-avatar {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;
    place-items: center;

    border: 1px solid var(--cz-9ac5e8,#9ac5e8);
    border-radius: 50%;

    background:
      linear-gradient(
        #fff,
        var(--cz-c9e7fb,#c9e7fb)
      );

    font-size: 23px;
  }

  .mobile-channel-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background:
      linear-gradient(
        var(--cz-1885d8,#1885d8),
        var(--cz-0865ba,#0865ba)
      );

    color: white;

    font-size: 23px;
    font-weight: bold;
  }

  .mobile-list-main {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 3px;
  }

  .mobile-list-main b {
    overflow: hidden;

    color: var(--cz-164e86,#164e86);

    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 13px;
  }

  .mobile-list-main small {
    overflow: hidden;

    color: var(--cz-7890a8,#7890a8);

    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 11px;
  }

  .mobile-arrow {
    color: var(--cz-82a5c4,#82a5c4);
    font-size: 25px;
  }

  .online-dot {
    color: #28a745;
    font-size: 12px;
  }

  .mobile-empty {
    height: 70%;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 30px;

    color: var(--cz-7890a8,#7890a8);

    text-align: center;
  }

  .mobile-empty > div {
    font-size: 45px;
  }

  .mobile-empty b {
    color: var(--cz-315f8d,#315f8d);
  }

  .mobile-empty span {
    max-width: 260px;
    font-size: 11px;
  }

  .mobile-nav button {
    position: relative;
  }

  .mobile-nav-badge {
    position: absolute;

    top: 2px;
    left: calc(50% + 8px);

    min-width: 17px;
    height: 17px;

    padding: 0 4px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 2px solid var(--cz-eef8ff,#eef8ff);
    border-radius: 999px;

    background: #e53935;
    color: white;

    font-size: 9px;
  }


  /* AYARLAR */

  .mobile-settings-profile {
    margin-bottom: 8px;
    padding: 16px;

    display: flex;
    align-items: center;

    gap: 12px;

    border: 1px solid var(--cz-c1dff4,#c1dff4);
    border-radius: 12px;

    background: white;
  }

  .settings-avatar {
    width: 55px;
    height: 55px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--cz-d9efff,#d9efff);

    font-size: 30px;
  }

  .mobile-settings-profile > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .mobile-settings-profile small {
    color: #2ca34b;
  }

  .mobile-setting-row {
    width: 100%;
    min-height: 58px;

    padding: 9px 12px;

    display: flex;
    align-items: center;

    gap: 12px;

    border: 0;
    border-bottom:
      1px solid var(--cz-d7e8f5,#d7e8f5);

    background: white;

    text-align: left;
  }

  .mobile-setting-row > span {
    flex: 1;

    display: flex;
    flex-direction: column;
  }

  .mobile-setting-row b {
    color: var(--cz-315b85,#315b85);
  }

  .mobile-setting-row small {
    color: var(--cz-8497aa,#8497aa);
  }

  .mobile-setting-row i {
    color: var(--cz-91abc2,#91abc2);
    font-size: 22px;
    font-style: normal;
  }

}

.channel-badges {
  margin-left: auto;

  display: flex;
  align-items: center;
  gap: 5px;
}

.unread-badge {
  min-width: 19px;
  height: 19px;

  padding: 0 5px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  background: #ff3b30;
  color: #fff;

  font-size: 10px;
  font-weight: 700;

  box-shadow:
    0 1px 2px
    rgba(0, 0, 0, .15);
}

/* =====================================================
   CHATZONE MOBİL SOHBETLER ANA SAYFASI
   ===================================================== */

.mobile-home-search {
  display: flex;
  align-items: center;
  gap: 8px;

  margin: 8px 6px 10px;
  padding: 0 10px;

  height: 38px;

  background: rgba(255,255,255,.72);
  border: 1px solid var(--cz-82baf0,#82baf0);
  border-radius: 9px;
}

.mobile-home-search span {
  color: var(--cz-0758bd,#0758bd);
  font-size: 22px;
  line-height: 1;
}

.mobile-home-search input {
  width: 100%;

  border: 0;
  outline: 0;
  background: transparent;

  color: var(--cz-153f7d,#153f7d);
  font-size: 13px;
}


/* ÜST 3 SEKME */

.mobile-home-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;

  padding: 0 6px 9px;
}

.mobile-home-tabs button {
  min-height: 34px;

  border: 1px solid var(--cz-b6d6f5,#b6d6f5);
  border-radius: 7px;

  background:
    linear-gradient(
      var(--cz-f7fbff,#f7fbff),
      var(--cz-e2f1ff,#e2f1ff)
    );

  color: var(--cz-063f91,#063f91);
  font-weight: 600;
}

.mobile-home-tabs button.active {
  background:
    linear-gradient(
      #ffffff,
      var(--cz-d8edff,#d8edff)
    );

  border-color: var(--cz-7eb9ef,#7eb9ef);
  color: var(--cz-0053c7,#0053c7);
}


/* GRUPLAR */

.mobile-home-group {
  border-top: 1px solid var(--cz-c7dff3,#c7dff3);
  padding: 6px 6px 8px;
}

.mobile-home-group-title {
  display: flex;
  align-items: center;

  min-height: 30px;

  color: var(--cz-17437d,#17437d);
  font-size: 13px;
}

.mobile-group-icon {
  width: 26px;
  text-align: center;
  font-size: 17px;
}

.mobile-group-chevron {
  margin-left: auto;
  padding-right: 7px;

  color: var(--cz-0758bd,#0758bd);
  font-weight: 700;
}


/* NORMAL SATIR */

.mobile-home-row,
.mobile-home-special-row {
  width: 100%;

  display: flex;
  align-items: center;

  border: 0;
  background: transparent;

  padding: 7px 5px;

  text-align: left;
  cursor: pointer;

  color: var(--cz-103c78,#103c78);
}

.mobile-home-row.pinned {
  border-radius: 7px;

  background:
    linear-gradient(
      90deg,
      var(--cz-rgb-213-235-255-_9,rgba(213,235,255,.9)),
      var(--cz-rgb-235-247-255-_75,rgba(235,247,255,.75))
    );
}


/* # KANAL İKONU */

.mobile-home-icon {
  width: 38px;
  flex: 0 0 38px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-home-icon.channel {
  color: var(--cz-0758bd,#0758bd);
  font-size: 26px;
  font-weight: 800;
}


/* ARKADAŞ / ÖZEL MESAJ */

.mobile-home-big-icon {
  width: 40px;
  flex: 0 0 40px;

  font-size: 25px;
  text-align: center;
}


/* SATIR YAZILARI */

.mobile-home-row-main {
  min-width: 0;
  flex: 1;

  display: flex;
  flex-direction: column;

  padding-left: 3px;
}

.mobile-home-row-main b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: var(--cz-103d7d,#103d7d);
  font-size: 13px;
}

.mobile-home-row-main small {
  margin-top: 2px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: var(--cz-537aa9,#537aa9);
  font-size: 11px;
}


/* KİŞİ SAYISI */

.mobile-home-count {
  min-width: 25px;
  height: 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 6px;

  border-radius: 10px;

  background: var(--cz-d5eaff,#d5eaff);
  color: var(--cz-0758bd,#0758bd);

  font-size: 11px;
  font-weight: 700;
}


/* KANAL UNREAD */

.mobile-channel-unread {
  min-width: 20px;
  height: 20px;

  margin-right: 5px;
  padding: 0 5px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  background: #ff3b30;
  color: #fff;

  font-size: 10px;
  font-weight: 700;
}


/* ÖZEL MESAJ UNREAD */

.mobile-home-special-row .mobile-unread {
  margin-left: auto;
}


/* DAHA FAZLA */

.mobile-more-channels {
  border: 0;
  background: transparent;

  padding: 5px 8px;

  color: var(--cz-0758bd,#0758bd);
  font-size: 11px;

  cursor: pointer;
}

.mobile-home-empty-row {
  padding: 8px 38px;

  color: var(--cz-6c8caf,#6c8caf);
  font-size: 11px;
}

/* =====================================================
   CHATZONE MOBİL SOHBETLER - KOMPAKT DÜZELTME
   ===================================================== */

@media (max-width: 760px) {

  /* İç alan biraz daha sıkı */
  .mobile-section-content {
    padding: 7px 8px 72px;
  }

  /* Arama */
  .mobile-home-search {
    height: 34px;
    margin: 5px 5px 7px;
    padding: 0 9px;
    border-radius: 8px;
  }

  .mobile-home-search span {
    font-size: 16px;
  }

  .mobile-home-search input {
    font-size: 12px;
  }


  /* Sohbetler / Kanallar / Kişiler */
  .mobile-home-tabs {
    gap: 5px;
    padding: 0 5px 7px;
  }

  .mobile-home-tabs button {
    min-height: 31px;
    font-size: 12px;
    border-radius: 6px;
  }


  /* Grup alanları */
  .mobile-home-group {
    padding: 4px 5px 6px;
  }

  .mobile-home-group-title {
    min-height: 27px;
    font-size: 12px;
  }

  .mobile-group-icon {
    width: 22px;
    font-size: 14px;
  }

  .mobile-group-chevron {
    padding-right: 5px;
    font-size: 11px;
  }


  /* Kanal ve özel satırları */
  .mobile-home-row,
  .mobile-home-special-row {
    min-height: 43px;
    padding: 5px 4px;
  }


  /* # simgesi */
  .mobile-home-icon {
    width: 34px;
    flex: 0 0 34px;
  }

  .mobile-home-icon.channel {
    font-size: 21px;
  }


  /* Arkadaşlar / özel mesaj simgeleri */
  .mobile-home-big-icon {
    width: 34px;
    flex: 0 0 34px;
    font-size: 19px;
  }


  /* Yazılar */
  .mobile-home-row-main {
    padding-left: 2px;
  }

  .mobile-home-row-main b {
    font-size: 12px;
    line-height: 15px;
  }

  .mobile-home-row-main small {
    margin-top: 1px;
    font-size: 10px;
    line-height: 13px;
  }


  /* Sağdaki kişi sayısı */
  .mobile-home-count {
    min-width: 22px;
    height: 19px;
    padding: 0 5px;

    border-radius: 9px;

    font-size: 10px;
  }


  /* Okunmamış mesaj */
  .mobile-channel-unread,
  .mobile-unread {
    min-width: 18px;
    height: 18px;
    padding: 0 4px;

    border-radius: 9px;

    font-size: 9px;
  }


  /* Sağ ok */
  .mobile-arrow {
    font-size: 17px;
    padding-right: 4px;
  }


  /* Daha fazla kanal */
  .mobile-more-channels {
    padding: 4px 6px;
    font-size: 10px;
  }


  /* Sabitlenen kanal */
  .mobile-home-row.pinned {
    border-radius: 6px;
  }

}

@media (max-width: 760px) {

  .mobile-section-head {
    display: none !important;
  }

}
/* ChatZone — reference-inspired blue glass design. */
:root{--ink:var(--cz-103377,#103377);--blue:var(--cz-0864ee,#0864ee);--line:var(--cz-bdd9f7,#bdd9f7);--panel:var(--cz-edf7ff,#edf7ff)}
html,body{font-family:"Segoe UI",Tahoma,Arial,sans-serif;background:var(--cz-cce6fc,#cce6fc);color:var(--ink)}
button,input,textarea{-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--cz-126bef,#126bef);outline-offset:3px}
button{transition:background .15s,box-shadow .15s}
.login-screen{background:radial-gradient(ellipse at 22% 27%,#ffffffd9,transparent 32%),radial-gradient(ellipse at 87% 67%,var(--cz-f1fbffdb,#f1fbffdb),transparent 38%),linear-gradient(125deg,var(--cz-83bdf4,#83bdf4),var(--cz-d8f0ff,#d8f0ff) 48%,var(--cz-89c4f4,#89c4f4))}
.login-card{padding:36px 32px 24px;border-radius:30px;background:linear-gradient(135deg,#ffffff80,var(--cz-d8edff70,#d8edff70));border-color:#ffffffb8;box-shadow:0 24px 80px var(--cz-144b8930,#144b8930),inset 0 1px white}
.login-card>.cz-logo{display:none}
.login-avatar{height:154px;display:grid;place-items:center;margin:12px 0 8px}
.login-card h1{font-size:36px;letter-spacing:-1.4px;color:var(--cz-07368d,#07368d)}
.login-community{font-size:17px;color:var(--cz-254a8c,#254a8c)}
.login-card p{font-family:"Segoe Print","Segoe Script",cursive;font-size:24px;line-height:1.55;margin:22px 0 42px;color:var(--cz-153f93,#153f93)}
.login-label{display:block;text-align:left;font-size:12px;margin:0 0 7px 3px;color:var(--cz-315b95,#315b95)}
.login-card input{height:46px;border:1px solid white;box-shadow:0 0 0 1px var(--cz-9bc4ef80,#9bc4ef80);background:var(--cz-f5fbffbb,#f5fbffbb);color:var(--cz-153b7a,#153b7a);font-size:16px;border-radius:12px}
.login-card button{height:47px;border:1px solid var(--cz-1b71df,#1b71df);border-radius:12px;background:linear-gradient(var(--cz-399aff,#399aff),var(--cz-0952d2,#0952d2));box-shadow:inset 0 1px #ffffffa6,0 5px 14px var(--cz-1768d32b,#1768d32b);font-size:15px}
.login-footer{font-size:12px;color:var(--cz-345b95,#345b95);margin-top:8px}.login-orbs{display:flex;justify-content:center;gap:7px;margin-top:30px}.login-orbs i{width:11px;height:11px;border:1px solid var(--cz-5b9dde,#5b9dde);border-radius:50%;background:radial-gradient(circle at 30% 25%,white,var(--cz-63b4fa,#63b4fa) 65%,var(--cz-2776ce,#2776ce))}.login-orbs i:first-child{border-color:#67a954;background:radial-gradient(circle at 30% 25%,white,#8ed065 65%,#489639)}
.people-logo{width:60px;height:58px;flex-shrink:0}
.people-logo span{border:1px solid var(--cz-0860a7,#0860a7);box-shadow:inset 4px 1px 7px #ffffffb0,inset -4px -3px 5px var(--cz-00316b55,#00316b55),0 3px 3px var(--cz-15477635,#15477635);border-radius:48% 48% 35% 35%}
.people-logo span:first-child{width:28px;height:33px;left:30px;top:23px;background:radial-gradient(ellipse at 30% 20%,#e3ffb4,#79d333 45%,#379912);border-color:#398719}
.people-logo span:last-child{width:36px;height:40px;left:2px;top:18px;background:radial-gradient(ellipse at 30% 20%,var(--cz-adf1ff,#adf1ff),var(--cz-209cf0,#209cf0) 45%,var(--cz-0758bb,#0758bb))}
.people-logo span:before{content:"";position:absolute;width:23px;height:23px;left:1px;top:-20px;border-radius:50%;border:1px solid #317e23;background:radial-gradient(circle at 32% 24%,#f2ffdf,#8ddd47 40%,#429d15 80%);box-shadow:inset 1px 1px 3px white,0 2px 3px var(--cz-18477244,#18477244)}
.people-logo span:last-child:before{width:28px;height:28px;top:-24px;left:2px;border-color:var(--cz-125ca8,#125ca8);background:radial-gradient(circle at 32% 24%,white,var(--cz-45b7fc,#45b7fc) 35%,var(--cz-0871cf,#0871cf) 75%,var(--cz-06478f,#06478f))}
.people-logo.big{transform:scale(2.35)}
.app{padding:18px;background:radial-gradient(ellipse at 25% 0,var(--cz-e4f4ff,#e4f4ff),transparent 58%),linear-gradient(135deg,var(--cz-a5cffa,#a5cffa),var(--cz-dbedfd,#dbedfd) 60%,var(--cz-8fbeed,#8fbeed))}
.titlebar{height:82px;border:1px solid #ffffffbf;border-radius:18px 18px 0 0;background:linear-gradient(var(--cz-f6fbffba,#f6fbffba),var(--cz-cfe7ffb0,#cfe7ffb0));padding:10px 20px;box-shadow:none}
.brand{gap:12px}.brand-buddies{transform:scale(.8);transform-origin:center}.brand strong{font-size:24px;letter-spacing:-.6px}.brand small{font-size:11px;color:var(--cz-446a9f,#446a9f)}.desktop-menu{display:none}.title-slogan{right:28px;top:29px;font-family:"Segoe Print",cursive;color:var(--cz-356298,#356298);font-size:15px}
.layout{height:calc(100dvh - 118px);padding:0;gap:0;border:1px solid #ffffffbc;border-top:0;border-radius:0 0 18px 18px;overflow:hidden;grid-template-columns:280px minmax(0,1fr) 245px;background:var(--cz-eff8ffd9,#eff8ffd9);box-shadow:0 18px 48px var(--cz-31598820,#31598820)}
.sidebar,.chat-panel,.right-panel{border:0;border-radius:0;box-shadow:none;background:transparent}.sidebar{border-right:1px solid var(--cz-bfd8f0,#bfd8f0)}.right-panel{border-left:1px solid var(--cz-bfd8f0,#bfd8f0);background:var(--cz-f3f9ff80,#f3f9ff80)}
.my-profile{padding:18px 15px;background:linear-gradient(115deg,var(--cz-e0efff,#e0efff),var(--cz-f7fcff90,#f7fcff90));border-bottom:1px solid #ffffff}.avatar-large{border:2px solid white;box-shadow:0 0 0 1px var(--cz-b5d4f4,#b5d4f4),0 3px 8px var(--cz-477cb12b,#477cb12b);border-radius:12px}.profile-copy strong{font-size:18px}.profile-copy small{font-size:10px;color:var(--cz-6984a8,#6984a8)}.online{color:#22883e}
.searchbox{margin:14px 12px;border-radius:10px;border:1px solid var(--cz-b0cff0,#b0cff0);background:#ffffff99}.searchbox input{font-size:13px;padding:10px}.side-section{border-color:var(--cz-cfe1f4,#cfe1f4)}.side-section h3{padding:12px;font-size:12px;background:transparent;color:var(--cz-426699,#426699)}.channel-row,.person-row{margin:3px 7px;border-radius:10px;min-height:43px}.channel-row.active{background:linear-gradient(100deg,var(--cz-c9e2ff,#c9e2ff),var(--cz-dfedff,#dfedff));box-shadow:inset 0 1px #fff}.channel-name{font-size:13px}.badge{background:var(--cz-d0e7ff,#d0e7ff);color:var(--cz-155bb3,#155bb3)}.channel-head{padding:14px 18px;min-height:74px;background:linear-gradient(110deg,var(--cz-d9ebffbb,#d9ebffbb),var(--cz-f2f9ffcc,#f2f9ffcc));border-color:#ffffff}.channel-head h2{font-size:19px}.channel-head p{color:var(--cz-5c7da4,#5c7da4);font-size:11px}
.welcome-banner{min-height:64px;margin:10px 16px 2px;border:1px solid #ffffff;border-radius:12px;background:linear-gradient(110deg,var(--cz-cce4ff,#cce4ff),var(--cz-e1f1ff,#e1f1ff));font-size:16px;gap:22px;color:var(--cz-315b92,#315b92)}.banner-logo{transform:scale(.6);margin:-4px -8px}.messages{padding:16px 20px;background:radial-gradient(ellipse at 10% 35%,#ffffff85,transparent 70%)}
.message{display:flex;align-items:flex-end;gap:9px;padding:6px 0}.message-avatar{width:35px;height:38px;flex:0 0 35px;border-radius:10px;border:2px solid #fff;background:linear-gradient(145deg,var(--cz-eefaff,#eefaff),var(--cz-9cc8ee,#9cc8ee));font-size:20px;box-shadow:0 1px 4px var(--cz-497fad22,#497fad22)}.message-body{max-width:80%;padding:10px 13px;background:#ffffffde;border:1px solid #fff;border-radius:13px 13px 13px 4px;box-shadow:0 2px 5px var(--cz-3971a909,#3971a909)}.message-name{font-size:12px}.message-time{font-size:10px;color:var(--cz-7095ba,#7095ba)}.message-text{font-size:14px;line-height:1.5;color:var(--cz-173768,#173768)}.message.self{flex-direction:row-reverse}.message.self .message-body{background:linear-gradient(120deg,#d8f8e8,#c7f0dc);border-color:#effff5;border-radius:13px 13px 4px 13px}.message.self .message-name{color:#167761}.system-message{font-size:11px;color:var(--cz-6385a8,#6385a8);margin:5px 0}
.composer{position:relative;padding:10px 12px;background:var(--cz-e0f0ffb8,#e0f0ffb8);border-top:1px solid white}.composer-tools{position:absolute;left:20px;bottom:16px;z-index:105;height:30px;display:flex}.composer-tools .composer-tool:not(.emoji-tool){display:none}.composer-tools .emoji-tool{display:grid;place-items:center;width:30px;height:30px;background:transparent;border:0;font-size:21px}.composer-row{align-items:flex-end;gap:8px}.composer textarea{min-width:0;min-height:42px;max-height:100px;height:42px;padding:10px 14px 10px 43px;border:1px solid var(--cz-b9d8f6,#b9d8f6);border-radius:23px;background:#ffffffd9;color:var(--cz-163f79,#163f79);font-size:16px;line-height:20px}.send-button{min-width:42px;width:42px;height:42px;flex:0 0 42px;border-radius:50%;border:2px solid white;background:linear-gradient(var(--cz-5fb5ff,#5fb5ff),var(--cz-0871e7,#0871e7));color:white;font-size:0;box-shadow:0 1px 5px var(--cz-2867aa33,#2867aa33)}.send-button:after{content:'➤';font-size:21px}.info-card,.member-card{padding:14px}.info-card h3,.member-card h3{margin:-2px 0 14px;padding:8px 0;background:transparent;font-size:12px;color:var(--cz-55739c,#55739c)}.info-card h2{font-size:18px}.member-row{border-radius:9px;padding:9px 7px}.member-nick{font-size:12px}
.home-profile{display:flex;align-items:center;gap:10px;padding:10px 12px 15px}.home-profile>.avatar{width:43px;height:45px;font-size:25px}.home-profile b{font-size:15px;display:block}.home-profile small{display:block;color:var(--cz-446a96,#446a96);font-size:11px;margin-top:4px}.presence-dot{display:inline-block;width:8px;height:8px;background:#43c551;border:1px solid white;border-radius:50%;box-shadow:0 0 0 1px #a2dcb2}.home-profile-motto{margin-left:auto;font-family:"Segoe Print",cursive;font-size:11px;font-style:italic;color:var(--cz-557fae,#557fae)}
.user-card{border:1px solid white;border-radius:22px;background:linear-gradient(135deg,var(--cz-f5fbff,#f5fbff),var(--cz-dceeff,#dceeff));padding:28px}.user-card-avatar{border-radius:15px;border:3px solid white}.user-card-actions{gap:0;border:1px solid white;border-radius:12px;overflow:hidden}.user-card-actions button{border:0;border-radius:0;border-bottom:1px solid var(--cz-d7e7f7,#d7e7f7);min-height:60px;background:#ffffff66}.user-card-info h2{font-size:24px}.profile-motto{font-family:"Segoe Print",cursive;font-size:15px;line-height:1.6;color:var(--cz-3f6fa4,#3f6fa4);margin-top:12px}
.layout.private-chat{grid-template-columns:280px minmax(0,1fr)}
@media(min-width:761px) and (max-width:1050px){.layout,.layout.private-chat{grid-template-columns:235px minmax(0,1fr)}.title-slogan{font-size:12px}}
@media(max-width:760px){
 .app{padding:0}.titlebar{height:68px;border-radius:0;padding:7px 12px;border-width:0 0 1px;background:linear-gradient(110deg,var(--cz-c2dfff,#c2dfff),var(--cz-e3f1ff,#e3f1ff))}.brand{gap:3px}.brand-buddies{width:52px;transform:scale(.7)}.brand strong{font-size:20px}.brand small{font-size:10px}.title-slogan{display:none}
 .layout,.layout.private-chat{height:calc(100dvh - 134px - env(safe-area-inset-bottom));border:0;border-radius:0;display:block;box-shadow:none}.chat-panel{grid-template-rows:auto auto minmax(0,1fr) auto}.channel-head{min-height:62px;padding:9px 13px}.channel-head h2{font-size:17px}.channel-head p{font-size:10px}.channel-icon{font-size:27px}.welcome-banner{min-height:47px;margin:0 9px 4px;border-radius:0 0 11px 11px;font-family:"Segoe UI",sans-serif;font-size:12px;line-height:1.5}.banner-logo{display:none}
 .messages{padding:9px 11px 14px}.message{gap:7px;padding:5px 0}.message-body{padding:8px 10px;max-width:82%}.message-avatar{width:31px;height:35px;flex-basis:31px}.message-text{font-size:14px}.message-name{font-size:12px}.message.self .message-avatar{display:none}.composer{padding:8px 9px}.composer-tools{left:17px;bottom:14px}.composer textarea{font-size:16px;padding-left:43px}.mobile-nav{height:calc(66px + env(safe-area-inset-bottom));padding:4px 8px env(safe-area-inset-bottom);border-top:1px solid white;background:linear-gradient(var(--cz-f7fcfff5,#f7fcfff5),var(--cz-dfedfff5,#dfedfff5));backdrop-filter:blur(16px)}.mobile-nav button{border-radius:24px;color:var(--cz-376fae,#376fae);font-size:22px;margin:0 5px}.mobile-nav button.active{background:linear-gradient(var(--cz-d8ecff,#d8ecff),var(--cz-ecf7ff,#ecf7ff));box-shadow:inset 0 0 0 1px var(--cz-abcfff,#abcfff);color:var(--cz-075ddd,#075ddd)}.mobile-nav span{font-size:10px;margin-top:3px}
 .mobile-section.open{top:68px;bottom:calc(66px + env(safe-area-inset-bottom));background:radial-gradient(ellipse at 100% 0,var(--cz-cfe7ff9e,#cfe7ff9e),transparent 65%),linear-gradient(var(--cz-edf7ff,#edf7ff),var(--cz-f5fbff,#f5fbff))}.mobile-section-content{padding:8px 9px 16px}.mobile-home-search{height:39px;margin:0 5px 11px;border:1px solid var(--cz-aacdf3,#aacdf3);background:#ffffff8f;border-radius:10px}.mobile-home-search input{font-size:16px}.mobile-home-tabs{gap:6px;padding:0 5px 12px}.mobile-home-tabs button{height:34px;font-size:12px;border-radius:8px;font-weight:500}.mobile-home-group{padding:6px 5px 10px}.mobile-home-group-title{min-height:30px;font-size:12px}.mobile-home-row,.mobile-home-special-row{min-height:51px;padding:7px 5px}.mobile-home-row-main b{font-size:13px;line-height:17px}.mobile-home-row-main small{font-size:11px;line-height:15px}.mobile-home-icon.channel{font-size:27px}.mobile-home-big-icon{font-size:25px}.mobile-home-count{height:23px;min-width:25px;font-size:11px;background:var(--cz-d3e9ff,#d3e9ff)}.mobile-home-row.pinned{border-radius:9px;background:linear-gradient(100deg,var(--cz-cde4ff,#cde4ff),var(--cz-e1f0ff,#e1f0ff))}.mobile-home-row.pinned .mobile-home-count{background:var(--cz-126cf4,#126cf4);color:white;border-radius:7px}.mobile-more-channels{font-size:12px;padding:9px 7px}.mobile-list-main b{font-size:14px}.mobile-list-main small{font-size:12px}.mobile-list-row{border-radius:10px}.mobile-settings-profile{align-items:flex-start;padding:24px 20px;margin:4px 0 14px;min-height:190px;border:1px solid white;background:linear-gradient(125deg,var(--cz-d7eaff,#d7eaff),var(--cz-f8fcff,#f8fcff));border-radius:15px}.settings-avatar{width:76px;height:84px;border:3px solid white;border-radius:15px;background:linear-gradient(var(--cz-eff8ff,#eff8ff),var(--cz-a8d4f7,#a8d4f7));font-size:45px;box-shadow:0 3px 10px var(--cz-4b7bac26,#4b7bac26)}.mobile-settings-profile b{font-size:22px}.mobile-setting-row{background:#ffffff80;border-bottom:1px solid var(--cz-d5e6f7,#d5e6f7);min-height:64px;padding:12px 17px}.mobile-setting-row b{font-size:13px}.mobile-setting-row small{font-size:11px;margin-top:4px}.user-card.open{bottom:calc(76px + env(safe-area-inset-bottom));border-radius:20px}.login-card{background:transparent;box-shadow:none;border:0;max-width:370px;padding:24px}.login-avatar{margin-top:20px}.login-card p{margin-bottom:52px}.emoji-picker{max-height:42dvh}.searchbox input,.emoji-picker-search input{font-size:16px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Functional favorites / search and a single transform animation. */
[hidden]{display:none!important}
.conversation-row{display:flex;align-items:center;gap:3px;min-width:0}
.conversation-row>.mobile-home-row,.conversation-row>.mobile-list-row{flex:1;min-width:0;width:auto}
.favorite-button{flex:0 0 36px;width:36px;height:40px;border:0;background:transparent;color:var(--cz-6686a8,#6686a8);font-size:25px;line-height:1;border-radius:9px}
.favorite-button:hover{background:var(--cz-dcecff,#dcecff)}.favorite-button.is-favorite{color:#c38b09}
#desktopPinned .mobile-home-row-main{overflow:hidden}
#desktopPinned:empty:after{content:'Yıldızla sohbet sabitle';display:block;padding:12px;color:var(--cz-6e87a7,#6e87a7);font-size:12px}
.channel-row .favorite-button,.person-row .favorite-button{height:32px;flex-basis:30px;width:30px;font-size:23px}
.connecting-screen:not(.hidden) .msn-buddies{animation:msnSignInSpin 1.8s linear infinite}
@keyframes msnSignInSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.connecting-screen:not(.hidden) .msn-buddies{animation:none!important}}

/* Messenger sign-in: upright blue/green buddies orbit one another. */
.connecting-screen:not(.hidden) .msn-buddies{animation:none;transform:none}
.connecting-screen:not(.hidden) .msn-buddy{left:46px;right:auto;top:17px;animation:msnBuddyOrbit 1.8s linear infinite;will-change:transform}
.connecting-screen:not(.hidden) .msn-buddy-green{animation-delay:-.9s}
.connecting-screen .buddy-hand{display:none}
@keyframes msnBuddyOrbit{
  0%,100%{transform:translate(-35px,0) scale(1);z-index:3}
  25%{transform:translate(0,-10px) scale(.8);z-index:1}
  50%{transform:translate(35px,0) scale(1);z-index:3}
  75%{transform:translate(0,10px) scale(1.12);z-index:5}
}
@media(prefers-reduced-motion:reduce){
 .connecting-screen:not(.hidden) .msn-buddy{animation:none!important;will-change:auto}
 .connecting-screen:not(.hidden) .msn-buddy-blue{transform:translate(-25px,0)}
 .connecting-screen:not(.hidden) .msn-buddy-green{transform:translate(25px,0)}
}

/* Self-contained hand-holding logo: motion is owned by setConnecting(). */
#connectingScreen .connecting-logo{height:166px;display:grid;place-items:center;perspective:none}
#connectingScreen .msn-handhold{display:block;width:180px;height:160px;overflow:visible;filter:drop-shadow(0 5px 5px var(--cz-17629324,#17629324))}

/* Original user-supplied Windows Live Messenger logo throughout the app. */
.people-logo{background:none;object-fit:contain}
.people-logo>span{display:none!important}
.people-logo.big{width:90px;height:90px;transform:scale(1.6)}
.msn-ui-icon{display:inline-block;width:25px;height:25px;object-fit:contain;vertical-align:middle;flex-shrink:0}
.channel-icon .msn-ui-icon{width:43px;height:43px}
.mobile-nav .msn-ui-icon{width:29px;height:29px}
.mobile-members .msn-ui-icon{width:23px;height:23px}
#connectingScreen .connecting-logo{height:180px;position:relative}
#msnDanceCanvas{display:block;width:220px;height:180px}
#msnDanceFallback{object-fit:contain}

#msnDanceImage{display:block;width:220px;height:180px;object-fit:contain;border-radius:20px}