/* TALKCHAT_R19C12R9R11_PC_UI_STANDARDIZATION
   Scope:
   - PC chat top status/header becomes vertically compact.
   - Desktop profile opens as a centered modal using the Rooms/Gift sizing language.
   - Repeated/list user avatars are normalized to 40x40; profile hero avatar remains intentionally large.
   - Common back-arrow controls use a consistent 34x34 / 18px icon rhythm.
   - Login card becomes more transparent and its background effect more visible.
   - DJ Panel text is enlarged and its existing X close control is made visible on both PC and mobile.
   No Core/API/DB behavior is changed.
*/

/* ------------------------------------------------------------
   1) PC CHAT HEADER / ROOM STATUS BAR
   ------------------------------------------------------------ */
@media (min-width:768px){
  .ref-shell .topbar{
    height:44px!important;
    min-height:44px!important;
    padding-left:12px!important;
  }
  .ref-shell .ref-brand{
    width:110px!important;
    margin-right:8px!important;
    font-size:16px!important;
  }
  .ref-shell .header-room{
    min-height:44px!important;
    padding:2px 10px!important;
    gap:6px!important;
  }
  .ref-shell .room-avatar{
    width:28px!important;
    height:28px!important;
    padding-right:6px!important;
  }
  .ref-shell .room-avatar .material-symbols-outlined{
    font-size:18px!important;
  }
  .ref-shell .header-room strong{
    font-size:13px!important;
    line-height:15px!important;
  }
  .ref-shell .header-room small{
    margin-top:0!important;
    font-size:10px!important;
    line-height:12px!important;
  }
  .ref-shell .header-extra button{
    height:22px!important;
    padding:0 18px!important;
    font-size:11px!important;
  }
  .ref-shell .header-extra .material-symbols-outlined{
    font-size:16px!important;
  }
  .ref-shell .header-rooms{
    padding:0 10px!important;
    font-size:11px!important;
  }
  .ref-shell .header-actions{
    width:330px!important;
  }
  .ref-shell .header-actions>.ref-icon{
    width:36px!important;
    height:36px!important;
  }
  .ref-shell .header-actions>.ref-icon:after{
    top:7px!important;
    height:22px!important;
  }
  .ref-shell .self-avatar{
    margin:0 7px!important;
  }
  .ref-shell .self-avatar .ref-avatar{
    width:30px!important;
    height:30px!important;
  }
}

/* ------------------------------------------------------------
   2) DESKTOP PROFILE = SAME MODAL FAMILY AS ROOMS
   ------------------------------------------------------------ */
@media (min-width:768px){
  #featureLayer:has(.msref-profile-host){
    background:rgba(3,8,14,.62)!important;
    backdrop-filter:blur(1.5px);
    -webkit-backdrop-filter:blur(1.5px);
  }
  #featureLayer .msref-profile-host{
    position:absolute!important;
    inset:0!important;
    display:grid!important;
    place-items:center!important;
    padding:40px!important;
  }
  #featureLayer .msref-profile-panel{
    position:relative!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    width:min(760px,calc(100vw - 80px))!important;
    max-width:none!important;
    height:min(720px,calc(100dvh - 80px))!important;
    max-height:none!important;
    border:1px solid var(--tc-border,#2b3745)!important;
    border-radius:10px!important;
    box-shadow:0 28px 80px rgba(0,0,0,.48)!important;
    overflow:hidden!important;
  }
  #featureLayer .msref-profile-head{
    min-height:54px!important;
    padding:9px 14px!important;
    border-bottom:1px solid var(--tc-border,#2b3745)!important;
  }
  #featureLayer .msref-profile-scroll{
    min-height:0!important;
    overflow-y:auto!important;
    scrollbar-width:thin;
  }
}

/* ------------------------------------------------------------
   3) REPEATED USER AVATAR STANDARD: 40x40
   Intentionally excludes the large profile hero portrait and topbar self avatar.
   ------------------------------------------------------------ */
:root{--tc-ui-avatar-size:40px}

.ref-shell .msg-avatar .ref-avatar,
.ref-shell .person-avatar .ref-avatar,
.pm-ref-avatar,
.pm-ref-avatar>.avatar,
.pm-ref-avatar img,
.pm-ref-avatar [class*=avatar],
.msref-user-row .msref-profile-avatar .ref-avatar,
.msref-menu-user-avatar .ref-avatar,
.team-ref-avatar,
.rank-ref-avatar,
.dj-ref-avatar,
.dj-ref-live-avatar{
  width:var(--tc-ui-avatar-size)!important;
  height:var(--tc-ui-avatar-size)!important;
  min-width:var(--tc-ui-avatar-size)!important;
  flex-basis:var(--tc-ui-avatar-size)!important;
  border-radius:50%!important;
  object-fit:cover!important;
}

.ref-shell .person{
  min-height:61px!important;
}
.ref-shell .person .online{
  width:10px!important;
  height:10px!important;
}
.pm-ref-status-dot{
  width:10px!important;
  height:10px!important;
}
.dj-ref-live-avatar>i{
  width:18px!important;
  height:18px!important;
}

/* ------------------------------------------------------------
   4) BACK / CLOSE CONTROL RHYTHM
   ------------------------------------------------------------ */
.msref-profile-head>button:first-child,
.pm-ref-back,
.hub-back,
.tc-rp-back{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  flex:0 0 34px!important;
  display:grid!important;
  place-items:center!important;
}

.msref-profile-head>button:first-child .material-symbols-outlined,
.pm-ref-back .material-symbols-outlined,
.tc-rp-back .material-symbols-outlined{
  font-size:18px!important;
}

.hub-back{
  font-size:24px!important;
}
.hub-back span{
  font-size:24px!important;
  line-height:1!important;
  transform:none!important;
}

/* ------------------------------------------------------------
   5) LOGIN TRANSPARENCY / BACKGROUND VISIBILITY
   ------------------------------------------------------------ */
.login .shade{
  background:
    radial-gradient(
      ellipse at 50% 38%,
      rgba(0,0,0,.03) 0%,
      rgba(0,0,0,.18) 48%,
      rgba(0,0,0,.52) 100%
    )!important;
}
.login-card{
  background:rgba(12,18,26,.38)!important;
  backdrop-filter:blur(8px) saturate(112%)!important;
  -webkit-backdrop-filter:blur(8px) saturate(112%)!important;
  border-color:rgba(255,255,255,.18)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.42)!important;
}
.login-card .input,
.tc-auto-voice-row{
  background:rgba(255,255,255,.09)!important;
}

/* ------------------------------------------------------------
   6) DJ PANEL: LARGER TYPE + VISIBLE X ON PC AND MOBILE
   Existing data-hub="close" behavior is preserved.
   ------------------------------------------------------------ */
.right-panel.hub-side-mode[data-hub-kind="djPanel"] .hub-side-head{
  display:flex!important;
  min-height:50px!important;
  padding:8px 12px!important;
  background:var(--tc-panel,#151f2b)!important;
  border-bottom:1px solid var(--tc-border,#2b3745)!important;
}
.right-panel.hub-side-mode[data-hub-kind="djPanel"] .hub-side-head h2{
  font-size:15px!important;
}
.right-panel.hub-side-mode[data-hub-kind="djPanel"] .hub-side-head p{
  display:none!important;
}
.right-panel.hub-side-mode[data-hub-kind="djPanel"] .hub-side-close{
  display:grid!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  border-radius:8px!important;
  font-size:24px!important;
  line-height:1!important;
  color:var(--tc-muted,#a9b6c5)!important;
}
.right-panel.hub-side-mode[data-hub-kind="djPanel"] .hub-side-close:hover{
  background:var(--tc-hover,#24313e)!important;
  color:var(--tc-text,#f1f5f9)!important;
}

.dj-ref-tabs button{
  font-size:12.5px!important;
}
.dj-ref-status>p{
  font-size:12px!important;
}
.dj-ref-live-copy>b{
  font-size:13px!important;
}
.dj-ref-live-copy>small{
  font-size:10px!important;
}
.dj-ref-live-time>b{
  font-size:12px!important;
}
.dj-ref-live-time>small{
  font-size:9px!important;
}
.dj-ref-controls button,
.dj-ref-download{
  font-size:11px!important;
}
.dj-ref-song-form input{
  font-size:12px!important;
}
.dj-ref-song-form button{
  font-size:11px!important;
}
.dj-ref-request-list>header>b{
  font-size:12px!important;
}
.dj-ref-request-list>header>span{
  font-size:9px!important;
}
.dj-ref-who>b,
.dj-ref-request-song>b{
  font-size:11px!important;
}
.dj-ref-who>small,
.dj-ref-request-song>small,
.dj-ref-request-song>time{
  font-size:9px!important;
}
.dj-ref-request-state{
  font-size:9px!important;
}
.dj-ref-request-actions button{
  font-size:9px!important;
}
.dj-ref-add h3,
.dj-ref-radio h3,
.dj-ref-studio h3{
  font-size:12px!important;
}
.dj-ref-add label,
.dj-ref-radio label,
.dj-ref-studio label,
.dj-volume,
.dj-monitor-check{
  font-size:10px!important;
}
.dj-ref-add input,
.dj-ref-add select,
.dj-ref-radio input,
.dj-ref-studio input{
  font-size:11px!important;
}
.dj-ref-provider-note{
  font-size:9px!important;
  line-height:1.45!important;
}

@media (max-width:767px){
  .right-panel.hub-side-mode[data-hub-kind="djPanel"] .hub-side-head{
    min-height:48px!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .right-panel.hub-side-mode[data-hub-kind="djPanel"] .hub-side-head h2{
    font-size:14px!important;
  }
}

/* TALKCHAT_R20A40R21_PEOPLE_LIST_SCALE_OWNER
   Scope: only the desktop Kisiler list in the main right panel.
   Existing global repeated-avatar standard remains untouched elsewhere. */
@media (min-width:768px){
  .ref-shell .right-panel .people-tabs-desktop ~ .panel-content .person{
    min-height:72px!important;
    gap:9px!important;
  }

  .ref-shell .right-panel .people-tabs-desktop ~ .panel-content .person .person-avatar{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    flex:0 0 44px!important;
  }

  .ref-shell .right-panel .people-tabs-desktop ~ .panel-content .person .person-avatar .ref-avatar{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    flex-basis:44px!important;
  }

  .ref-shell .right-panel .people-tabs-desktop ~ .panel-content .person .person-name strong{
    font-size:13px!important;
    line-height:16px!important;
  }

  .ref-shell .right-panel .people-tabs-desktop ~ .panel-content .person .person-name small{
    font-size:12px!important;
    line-height:14px!important;
  }

  .ref-shell .right-panel .people-tabs-desktop ~ .panel-content .person .role-stars{
    font-size:10px!important;
    line-height:12px!important;
    gap:1px!important;
  }
}