/* =========================================================
   PC Options Menu + Connected Users (PC only)
   - Déplace Accueil / Amis / Filtre / Profil / Reset dans ⚙️
   - Garde la logique JS existante
   - Affiche la liste des connectés dans la vraie sidebar droite
   - Ne touche pas au mobile
   ========================================================= */

@media (min-width: 769px){
  :root{
    --mk-pc-side-w: 280px;
    --mk-pc-menu-w: 272px;
    --mk-pc-blue: #4f83ff;
    --mk-pc-blue-2: #62bbff;
    --mk-pc-violet: rgba(155, 0, 255, .35);
    --mk-pc-panel-bg: rgba(8, 14, 31, .96);
    --mk-pc-panel-bg-2: rgba(13, 19, 39, .97);
    --mk-pc-card-bg: rgba(255,255,255,.035);
    --mk-pc-card-bd: rgba(255,255,255,.08);
    --mk-pc-glow: 0 0 14px rgba(79, 131, 255, .28), 0 0 26px rgba(155, 0, 255, .14);
  }

  /* =========================
     Liste salon flottante masquée sur PC
     ========================= */
  body:not(.home-active):not(.mp-active) #room-users-panel{
    display: none !important;
  }

  body:not(.mp-active) #chat-messages,
  body:not(.mp-active) .chat-messages{
    padding-right: 0 !important;
  }

  /* =========================
     Sidebar droite = connectés
     ========================= */
  #user-list{
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 var(--mk-pc-side-w) !important;
    width: var(--mk-pc-side-w) !important;
    min-width: var(--mk-pc-side-w) !important;
    max-width: var(--mk-pc-side-w) !important;

    padding: 12px 10px 12px !important;
    /* background: linear-gradient(180deg, rgba(42, 45, 54, .985), rgba(34, 37, 45, .99)) !important; */
    border-left: 1px solid rgba(79, 131, 255, .22) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
  }

  body.home-active #user-list,
  body.mp-active #user-list{
    display: none !important;
  }

  #user-list .texte-laser{
    display: block !important;
    margin: 0 0 10px !important;
    padding: 0 4px !important;
  }

  #user-list .texte-laser::before{
    content: none !important;
    display: none !important;
  }

  #user-list .texte-laser > *{
    display: block !important;
  }

  #user-list .mk-userlist-head{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
  }

  #user-list .mk-userlist-actions{
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    order: 1 !important;
  }

  #user-list .mk-userlist-title{
    order: 2 !important;
    flex: 0 0 auto !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: .2px !important;
    color: #fff !important;
    text-shadow:
      0 0 8px rgba(255,255,255,.12),
      0 0 10px rgba(79,131,255,.20),
      0 0 12px rgba(155,0,255,.10) !important;
    white-space: nowrap !important;
  }

  #user-list .mk-userlist-title{
    background: linear-gradient(45deg, rgba(0, 218, 222, 1), rgba(251, 0, 255, 1), rgba(0, 218, 222, 1), rgba(251, 0, 255, 1), rgba(251, 0, 255, 1)) !important;
    background-size: 400% 400% !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: laserTexteMenu 2s linear infinite !important;
  }

  #user-list .mk-userlist-action{
    min-width: 30px !important;
    height: 30px !important;
    padding: 0 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.040)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.04),
      0 4px 12px rgba(0,0,0,.16) !important;
    color: #f1f4fb !important;
    text-shadow: none !important;
    filter: none !important;
    font-size: 16px !important;
    line-height: 1 !important;
    cursor: default !important;
    user-select: none !important;
    transition: transform .10s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease !important;

    /* ✅ pas d'effet laser sur 📂 et 🎦 */
    animation: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
  }

  #user-list .mk-userlist-action:hover{
    transform: translateY(0) !important;
    border-color: rgba(120,145,220,.28) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      0 8px 18px rgba(0,0,0,.20),
      0 0 0 1px rgba(90,110,170,.06) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.090), rgba(255,255,255,.050)) !important;
    text-shadow: none !important;
    filter: none !important;
    color: #f1f4fb !important;
    -webkit-text-fill-color: currentColor !important;
  }

  #user-list .mk-userlist-action:active{
    transform: translateY(0) !important;
  }

  #user-list #local-webcam,
  #user-list .bg,
  #user-list .star-field,
  #user-list #starField,
  #user-list input[type="file"]{
    display: none !important;
  }

  #users-sidebar{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    list-style: none !important;
    padding: 4px 2px 4px !important;
    margin: 0 !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
  }

  #users-sidebar .user-item{
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border-radius: 13px !important;
    border: 1px solid var(--mk-pc-card-bd) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.025)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.03),
      0 4px 12px rgba(0,0,0,.14) !important;
    cursor: default !important;
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
  }

  #users-sidebar .user-item:hover{
    transform: translateY(0);
    border-color: rgba(79,131,255,.22) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.032)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.035),
      0 8px 20px rgba(0,0,0,.18),
      0 0 0 1px rgba(79,131,255,.06) !important;
  }

  /* ✅ On garde l'apparence d'origine du badge rôle / âge / pseudo */
  #users-sidebar .badge-wrapper{
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    margin: -10px !important;
    flex: 0 0 auto !important;
  }

  #users-sidebar .badge-icons{
    position: relative !important;
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    display: inline-block !important;
    overflow: visible !important;
  }

  #users-sidebar .badge-icons > img:not(.webcam-active-icon){
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    z-index: 1 !important;
  }

  #users-sidebar .badge-icons > img.webcam-active-icon{
    position: absolute !important;
    top: 1px !important;
    left: 0 !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    z-index: 3 !important;
    cursor: pointer !important;
  }

  #users-sidebar .gender-square{
    width: 20px !important;
    min-width: 20px !important;
    height: 18px !important;
    line-height: 19px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 3px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    color: #fff !important;
    user-select: none !important;
    box-shadow: none !important;
  }

  #users-sidebar .username-span{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 1.1em !important;
    font-weight: bold !important;
    line-height: normal !important;
    text-decoration: none !important;
  }

  #users-sidebar .username-span:hover{
    text-decoration: none !important;
    filter: none !important;
  }

  #users-sidebar .mk-avatar-diamond{
    margin-left: 6px !important;
  }

  /* =========================
     Bouton ⚙️ + menu top bar
     ========================= */
  #mk-pc-options-trigger{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #mk-pc-menu-wrap{
    position: fixed;
    top: 50px;
    right: 16px;
    z-index: 10060;
    display: none;
  }

  #mk-pc-menu-wrap.is-open{
    display: block;
  }

  #mk-pc-sidebar{
    position: relative;
    width: var(--mk-pc-menu-w);
    padding: 12px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(52, 55, 64, .985), rgba(43, 46, 55, .99));
    border: 1px solid rgba(120, 128, 150, .34);
    box-shadow:
      0 16px 34px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.05),
      0 0 0 1px rgba(90,110,170,.08);
    backdrop-filter: blur(10px);
    overflow: visible;
  }

  #mk-pc-sidebar .mk-pc-grid,
  #mk-pc-sidebar .mk-pc-quick-actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  #mk-pc-sidebar .mk-pc-quick-actions{
    margin-top: 10px;
  }

  #mk-pc-sidebar .mk-blocked-group{
    grid-column: 1 / -1;
  }


  #mk-pc-sidebar .mk-pc-colors-slot[hidden]{
    display: none !important;
  }

  #mk-pc-sidebar .mk-pc-colors-slot{
    width: 100%;
    margin-top: 10px;
    box-sizing: border-box;
  }

  #mk-pc-sidebar .mk-filter-group,
  #mk-pc-sidebar .mk-profile-group,
  #mk-pc-sidebar .mk-friends-group,
  #mk-pc-sidebar .mk-blocked-group,
  #mk-pc-sidebar .mk-home-group,
  #mk-pc-sidebar .mk-reset-group{
    min-width: 0;
    position: static;
  }

  #mk-pc-sidebar .mk-btn,
  #mk-pc-sidebar .mk-mini-action{
    width: 100%;
    min-height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.040));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.04),
      0 4px 12px rgba(0,0,0,.16);
    color: #f1f4fb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 10px;
    margin: 0;
    cursor: pointer;
    user-select: none;
    transition: transform .10s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  }

  #mk-pc-sidebar .mk-btn:hover,
  #mk-pc-sidebar .mk-mini-action:hover{
    transform: translateY(0);
    border-color: rgba(120,145,220,.28);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      0 8px 18px rgba(0,0,0,.20),
      0 0 0 1px rgba(90,110,170,.06);
    background: linear-gradient(180deg, rgba(255,255,255,.090), rgba(255,255,255,.050));
  }

  #mk-pc-sidebar .mk-btn:active,
  #mk-pc-sidebar .mk-mini-action:active{
    transform: translateY(0);
  }

  #mk-pc-sidebar .mk-btn .mk-laser,
  #mk-pc-sidebar .mk-mini-action .mk-laser{
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .1px;
    color: #7ecbff;
    text-shadow:
      0 0 6px rgba(79,131,255,.18),
      0 1px 0 rgba(0,0,0,.30);
    filter: none;
  }

  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    #mk-pc-sidebar .mk-btn .mk-laser,
    #mk-pc-sidebar .mk-mini-action .mk-laser{
      background: linear-gradient(180deg, #b9ecff 0%, #6fc2ff 52%, #7f8dff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      text-shadow: none;
      filter: drop-shadow(0 0 2px rgba(79,131,255,.18));
    }
  }

  /* =========================
     Panneaux du menu ⚙️
     ========================= */
  #mk-pc-sidebar .mk-filter-panel,
  #mk-pc-sidebar .mk-profile-panel,
  #mk-pc-sidebar .mk-friends-panel,
  #mk-pc-sidebar .mk-blocked-panel{
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    z-index: 10070;
    width: 100%;
  }

  #mk-pc-sidebar .mk-filter-panel[hidden],
  #mk-pc-sidebar .mk-profile-panel[hidden],
  #mk-pc-sidebar .mk-friends-panel[hidden],
  #mk-pc-sidebar .mk-blocked-panel[hidden]{
    display: none !important;
  }

  #mk-pc-sidebar .mk-filter-panel-inner{
    width: 100%;
    border: 1px solid rgba(79,131,255,.22);
    background: linear-gradient(180deg, rgba(42,45,54,.985), rgba(34,37,45,.99));
    padding: 10px 8px;
    border-radius: 13px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.03),
      0 8px 20px rgba(0,0,0,.18);
    box-sizing: border-box;
  }

  #mk-pc-sidebar .mk-filter-panel .mk-filter-toggle,
  #mk-pc-sidebar .mk-filter-panel .mk-filter-row{
    width: 100%;
    min-height: 38px;
    margin: 8px 0;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.040));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.04),
      0 4px 12px rgba(0,0,0,.16);
    color: #f1f4fb;
    box-sizing: border-box;
    transition: transform .10s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  }

  #mk-pc-sidebar .mk-filter-panel .mk-filter-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 10px;
    cursor: pointer;
    white-space: normal;
    line-height: 1.15;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .1px;
    color: #7ecbff;
    text-shadow:
      0 0 6px rgba(79,131,255,.18),
      0 1px 0 rgba(0,0,0,.30);
  }

  #mk-pc-sidebar .mk-filter-panel .mk-filter-toggle:hover,
  #mk-pc-sidebar .mk-filter-panel .mk-filter-row:hover{
    transform: translateY(0);
    border-color: rgba(120,145,220,.28);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      0 8px 18px rgba(0,0,0,.20),
      0 0 0 1px rgba(90,110,170,.06);
    background: linear-gradient(180deg, rgba(255,255,255,.090), rgba(255,255,255,.050));
  }

  #mk-pc-sidebar .mk-filter-panel .mk-filter-toggle:active{
    transform: translateY(0);
  }

  #mk-pc-sidebar .mk-filter-panel .mk-filter-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    padding: 8px 10px;
  }

  #mk-pc-sidebar .mk-filter-panel .mk-filter-row-label{
    display: inline-block;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .1px;
    color: #7ecbff;
    text-shadow:
      0 0 6px rgba(79,131,255,.18),
      0 1px 0 rgba(0,0,0,.30);
  }

  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    #mk-pc-sidebar .mk-filter-panel .mk-filter-row-label{
      background: linear-gradient(180deg, #b9ecff 0%, #6fc2ff 52%, #7f8dff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      text-shadow: none;
      filter: drop-shadow(0 0 2px rgba(79,131,255,.18));
    }
  }

  #mk-pc-sidebar .mk-filter-panel .mk-filter-num{
    width: 64px;
    height: 30px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    color: #f1f4fb;
    font-weight: 900;
    text-align: center;
  }

  #mk-pc-sidebar .mk-profile-panel{
    width: 100%;
  }

  #mk-pc-sidebar .mk-profile-panel-inner{
    width: 100%;
    border: 1px solid #000;
    background: #bdbdbd;
    padding: 6px;
    border-radius: 12px;
    box-shadow: 0 16px 28px rgba(0,0,0,.28);
    box-sizing: border-box;
  }

  #mk-pc-sidebar .mk-prof-top{
    display:flex;
    gap: 10px;
    align-items:flex-start;
  }

  #mk-pc-sidebar .mk-prof-inline{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    padding: 6px;
    background: rgba(0,0,0,.10);
    border-radius: 8px;
    min-height: 54px;
    box-sizing: border-box;
  }

  #mk-pc-sidebar .mk-prof-inline-avatar{
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border: 1px solid #000;
    background: #000;
    overflow: hidden;
    box-sizing: border-box;
  }

  #mk-pc-sidebar .mk-prof-inline-avatar img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  #mk-pc-sidebar .mk-prof-inline-actions{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    min-width: 24px;
  }

  #mk-pc-sidebar .mk-prof-emoji-btn{
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 8px rgba(0,0,0,.18);
    color: #f4f7ff;
    font-size: 15px;
    line-height: 1;
    cursor: default;
    user-select: none;
    transform: none !important;
    outline: none;
    -webkit-text-fill-color: currentColor;
    text-shadow: none;
  }

  #mk-pc-sidebar .mk-prof-emoji-btn:hover,
  #mk-pc-sidebar .mk-prof-emoji-btn:active,
  #mk-pc-sidebar .mk-prof-emoji-btn:focus,
  #mk-pc-sidebar .mk-prof-emoji-btn:focus-visible{
    transform: none !important;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 8px rgba(0,0,0,.18);
    border-color: rgba(255,255,255,.18);
    color: #f4f7ff;
    -webkit-text-fill-color: currentColor;
    text-shadow: none;
    filter: none;
  }

  #mk-pc-sidebar .mk-prof-inline-star.sprite-button{
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
  }

  #mk-pc-sidebar .mk-prof-msg.mk-prof-msg-inline{
    min-height: 0;
    margin: 0 0 0 auto;
    text-align: right;
    font-size: 11px;
    line-height: 1.15;
  }

  #mk-pc-sidebar .mk-prof-avatar{
    width: 150px;
    height: 150px;
    border: 1px solid #000;
    background: #000;
    overflow: hidden;
  }

  #mk-pc-sidebar .mk-prof-avatar img{
    width:100%;
    height:100%;
    object-fit: cover;
    display:block;
  }

  #mk-pc-sidebar .mk-prof-right{
    flex: 1 1 auto;
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    gap: 6px;
    color: #000;
  }

  #mk-pc-sidebar .mk-prof-file{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    opacity:0;
  }

  #mk-pc-sidebar .mk-prof-star.sprite-button{
    width: 24px;
    height: 24px;
    display: inline-block;
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
  }

  #mk-pc-sidebar .mk-prof-upload-label{
    display:inline-block;
    margin-top: 28px;
    color:#000;
    font-weight: 800;
    line-height: 1.05;
  }

  #mk-pc-sidebar .mk-prof-premium{
    margin-top: 6px;
    color:#000;
    font-weight: 900;
    font-size: 14px;
  }

  #mk-pc-sidebar .mk-prof-premium .mk-non{
    color:#a01515;
  }

  #mk-pc-sidebar .mk-prof-colors{
    margin: 0;
    padding: 6px;
    background: rgba(0,0,0,.10);
    border-radius: 2px;
  }

  #mk-pc-sidebar .mk-prof-title{
    margin: 0 0 6px;
    color:#000;
    font-weight: 900;
    font-size: 12px;
  }

  #mk-pc-sidebar .mk-color-grid{
    display:grid;
    grid-template-columns: repeat(10, 18px);
    gap: 4px;
  }

  #mk-pc-sidebar .mk-color{
    width:18px;
    height:18px;
    border:1px solid #000;
    padding:0;
    cursor:pointer;
    margin: 0;
    box-sizing: border-box;
    position: relative;
    transition: transform .09s ease, box-shadow .09s ease;
  }

  #mk-pc-sidebar .mk-color:hover{
    transform: scale(1.12);
  }

  #mk-pc-sidebar .mk-color.is-selected{
    box-shadow: inset 0 0 0 2px #000;
  }

  #mk-pc-sidebar .mk-prof-msg{
    min-height: 18px;
    margin-top: 6px;
    color:#000;
    font-size: 12px;
    font-weight: 700;
  }

  #mk-pc-sidebar .mk-friends-panel,
  #mk-pc-sidebar .mk-blocked-panel{
    width: 100%;
  }

  #mk-pc-sidebar .mk-amiz-panel-inner{
    width: 100%;
    border: 1px solid #000;
    background: linear-gradient(180deg, rgba(52, 55, 64, .985), rgba(43, 46, 55, .99));
    padding: 8px 8px 10px;
    min-height: 180px;
    border-radius: 12px;
    box-shadow: 0 16px 28px rgba(0,0,0,.28);
    box-sizing: border-box;
  }

  #mk-pc-sidebar .mk-amiz-list{
    width: 100%;
    max-height: 210px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #mk-pc-sidebar .mk-amiz-item{
    min-height: 20px;
    margin: 2px 0;
    display: flex;
    align-items: center;
    gap: 0;
  }

  #mk-pc-sidebar .mk-amiz-x{
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0 4px 0 0;
    font-weight: 900;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    color: #000;
  }

  #mk-pc-sidebar .mk-amiz-at{
    flex: 0 0 auto;
    margin-right: 4px;
    font-weight: 900;
    font-size: 13px;
    line-height: 1;
    user-select: none;
    color: #9a9a9a;
  }

  #mk-pc-sidebar .mk-amiz-name{
    flex: 1 1 auto;
    width: auto;
    display: block;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    text-align: left;
    cursor: pointer;
    font-weight: 800;
    font-size: 13px;
    color: #9a9a9a;
    user-select: none;
  }

  #mk-pc-sidebar .mk-amiz-name:disabled{
    opacity: 1;
  }

  #mk-pc-sidebar .mk-amiz-item.is-offline .mk-amiz-x,
  #mk-pc-sidebar .mk-amiz-item.is-offline .mk-amiz-at,
  #mk-pc-sidebar .mk-amiz-item.is-offline .mk-amiz-name{
    color: #9a9a9a !important;
  }

  #mk-pc-sidebar .mk-amiz-name:hover{
    filter: brightness(1.08);
  }
}

/* =========================================================
   PC — bloc "Créez un salon" au même rendu que les salons/connectés
   Catégories non modifiées
   ========================================================= */
@media (min-width: 769px){
  #channel-list li.create-channel-slot,
  #home-channel-list li.create-channel-slot{
    list-style: none !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
    border-radius: 13px !important;
    border: 1px solid var(--mk-pc-card-bd) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.025)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.03),
      0 4px 12px rgba(0,0,0,.14) !important;
  }

  #channel-list li.create-channel-slot:hover,
  #home-channel-list li.create-channel-slot:hover{
    border-color: rgba(79,131,255,.22) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.032)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.035),
      0 8px 20px rgba(0,0,0,.18),
      0 0 0 1px rgba(79,131,255,.06) !important;
  }

  #create-channel.in-channel-list{
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #create-channel.in-channel-list .create-channel-title{
    margin: 0 !important;
    padding: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #fff !important;
    opacity: 1 !important;
  }

  #create-channel.in-channel-list .create-channel-row{
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  #create-channel.in-channel-list .create-channel-input,
  #create-channel.in-channel-list input#new-channel-name{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 30px !important;
    padding: 0 10px !important;
    border-radius: 0 !important;
    border: 1px solid #5b5b5b !important;
    background: rgba(10,10,10,.92) !important;
    color: #fff !important;
    box-sizing: border-box !important;
  }

  #create-channel.in-channel-list .create-channel-btn,
  #create-channel.in-channel-list button#create-channel-button{
    flex: 0 0 auto !important;
    height: 30px !important;
    padding: 0 12px !important;
    border-radius: 0 !important;
    border: 1px solid #5b5b5b !important;
    background: #4a4a4a !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
  }

  #create-channel.in-channel-list .create-channel-options{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    color: #fff !important;
  }

  #create-channel.in-channel-list .create-opt{
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
}

/* =========================================================
   PC — liste des salons sous forme de boutons comme connectés
   (catégories non modifiées)
   ========================================================= */
@media (min-width: 769px){
  #channel-list li.channel,
  #home-channel-list li.channel{
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
    margin: 0 0 10px 0 !important;
    box-sizing: border-box !important;
    border-radius: 13px !important;
    border: 1px solid var(--mk-pc-card-bd) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.025)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.03),
      0 4px 12px rgba(0,0,0,.14) !important;
    transition:
      border-color .12s ease,
      box-shadow .12s ease,
      background .12s ease !important;
    animation: none !important;
    background-size: auto !important;
  }

  #channel-list li.channel:hover,
  #home-channel-list li.channel:hover,
  #channel-list li.channel.selected,
  #home-channel-list li.channel.selected,
  #channel-list li.channel.selected:hover,
  #home-channel-list li.channel.selected:hover{
    background: linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.032)) !important;
    border-radius: 13px !important;
    border-color: rgba(79,131,255,.22) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.035),
      0 8px 20px rgba(0,0,0,.18),
      0 0 0 1px rgba(79,131,255,.06) !important;
    animation: none !important;
    background-size: auto !important;
    color: #fff !important;
  }

  #channel-list li.channel .channel-left,
  #home-channel-list li.channel .channel-left{
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  #channel-list li.channel .user-count,
  #home-channel-list li.channel .user-count{
    margin-left: auto !important;
    flex: 0 0 28px !important;
    text-align: right !important;
  }

  #channel-list li.channel-group-title,
  #home-channel-list li.channel-group-title{
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
}