/* 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;
  }
}

/* TALKCHAT_R31R26_DJ_BLUE_HOVER_OWNER: DJ blue buttons keep readable foreground */
.right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-ref-studio button.primary:not(:disabled),
.right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-ref-studio button.primary:not(:disabled):hover,
.right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-ref-studio button.primary:not(:disabled):focus,
.right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-ref-studio button.primary:not(:disabled):focus-visible,
.right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-ref-studio button.primary:not(:disabled):active {
  color: #fff !important;
}
.right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-ref-studio button.primary:not(:disabled) i,
.right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-ref-studio button.primary:not(:disabled):hover i,
.right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-ref-studio button.primary:not(:disabled):focus-visible i,
.right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-ref-studio button.primary:not(:disabled):active i {
  color: inherit !important;
}
.right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-ref-studio button.primary:disabled {
  color: #fff !important;
  opacity: .65;
}

/* TALKCHAT_R31R56_DJ_MOBILE_STUDIO_OWNER
   DJ studio responsive layout on mobile and desktop. Existing Radio/LiveKit JS is unchanged. */
@media screen {
  .right-panel.hub-side-mode[data-hub-kind="djPanel"] section.dj-ref-studio {
    box-sizing: border-box;
    min-width: 0;
    margin: 12px 9px 10px;
    padding: 13px 12px 14px;
    border: 1px solid #dde6f0;
    border-radius: 14px;
    background: #f8fafc;
  }
  .right-panel.hub-side-mode[data-hub-kind="djPanel"] section.dj-ref-studio > h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    color: #24354b;
    font-size: 13px !important;
    line-height: 1.35;
    font-weight: 800;
  }
  .right-panel.hub-side-mode[data-hub-kind="djPanel"] section.dj-ref-studio > h3 i {
    color: #2563eb;
  }
  .right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-live-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 9px;
    align-items: stretch;
    min-width: 0;
  }
  .right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-live-grid > .dj-file {
    grid-column: 1 / -1;
    box-sizing: border-box;
    display: grid !important;
    gap: 7px !important;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid #dbe4f0;
    border-radius: 11px;
    background: #ffffff;
    color: #334155;
    cursor: pointer;
  }
  .right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-file > span {
    font-size: 11px;
    font-weight: 750;
    color: #475569;
  }
  .right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-file > input[type="file"] {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0 !important;
    margin: 0;
    border: 0 !important;
    background: transparent !important;
    color: transparent;
    font-size: 0 !important;
    cursor: pointer;
    overflow: hidden;
  }
  .right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-file > input[type="file"]::file-selector-button {
    box-sizing: border-box;
    min-height: 36px;
    max-width: 100%;
    margin: 0;
    padding: 8px 13px;
    border: 1px solid #bfdbfe;
    border-radius: 9px;
    background: #eff6ff;
    color: #1d4ed8;
    line-height: 1.3;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
  }
  .right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-file > input[type="file"]:hover::file-selector-button {
    background: #dbeafe;
    color: #1e40af;
  }
  .right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-file:focus-within {
    border-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(59,130,246,.12);
  }
  .right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-file > small {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    color: #64748b;
  }
  .right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-live-grid > button {
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 8px 7px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    color: #334155;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.3;
    cursor: pointer;
  }
  .right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-live-grid > button i {
    flex: 0 0 auto;
    font-size: 13px;
    color: inherit;
  }
  .right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-live-grid > button[data-hub="radioMusicPlay"]:not(:disabled) {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
  }
  .right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-live-grid > button[data-hub="radioMusicPlay"]:not(:disabled):hover {
    background: #dbeafe;
  }
  .right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-live-grid > button[data-hub="radioMusicPlay"]:disabled {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #94a3b8;
    opacity: 1;
    cursor: not-allowed;
  }
  .right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-live-grid > button[data-hub="radioMic"]:not(.on) {
    border-color: #fecdd3;
    background: #fff1f2;
    color: #be123c;
  }
  .right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-live-grid > button[data-hub="radioMic"].on {
    border-color: #86efac;
    background: #f0fdf4;
    color: #15803d;
  }
  .right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-volume {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 8px;
    align-items: center;
    margin: 13px 0 10px;
    color: #334155;
    font-size: 11px !important;
    font-weight: 750;
  }
  .right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-volume > b {
    grid-column: 2;
    grid-row: 1;
    color: #2563eb;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
  }
  .right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-volume > input[type="range"] {
    grid-column: 1 / -1;
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 7px;
    margin: 5px 0;
    padding: 0 !important;
    accent-color: #218af2;
    cursor: pointer;
  }
  .right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-monitor-check {
    display: flex !important;
    align-items: center;
    gap: 9px;
    margin: 7px 0 13px;
    color: #475569;
    font-size: 11px !important;
    cursor: pointer;
  }
  .right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-monitor-check input[type="checkbox"] {
    appearance: auto;
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 0;
    padding: 0;
    accent-color: #218af2;
  }
  .right-panel.hub-side-mode[data-hub-kind="djPanel"] section.dj-ref-studio > label:not(.dj-volume):not(.dj-monitor-check):not(.dj-file) {
    display: grid !important;
    gap: 6px !important;
    color: #334155;
    font-size: 11px !important;
    font-weight: 750;
    margin-bottom: 10px;
  }
  .right-panel.hub-side-mode[data-hub-kind="djPanel"] section.dj-ref-studio input[data-radio-title] {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 39px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    padding: 9px 11px;
    background: #ffffff;
    color: #1f2937;
    font-size: 12px !important;
    font-weight: 500;
  }
  .right-panel.hub-side-mode[data-hub-kind="djPanel"] section.dj-ref-studio input[data-radio-title]:focus {
    outline: 0;
    border-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(59,130,246,.12);
  }
  .right-panel.hub-side-mode[data-hub-kind="djPanel"] section.dj-ref-studio > button[data-hub="radioTitleSave"].primary {
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 43px;
    border: 1px solid #218af2;
    border-radius: 10px;
    padding: 10px 12px;
    background: #218af2;
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
  }
  .right-panel.hub-side-mode[data-hub-kind="djPanel"] section.dj-ref-studio > button[data-hub="radioTitleSave"].primary:hover {
    background: #1d75d4;
    border-color: #1d75d4;
    color: #ffffff !important;
  }
  html.dark .right-panel.hub-side-mode[data-hub-kind="djPanel"] section.dj-ref-studio {
    background: #151f2b !important;
    border-color: #334155;
  }
  html.dark .right-panel.hub-side-mode[data-hub-kind="djPanel"] section.dj-ref-studio > h3,
  html.dark .right-panel.hub-side-mode[data-hub-kind="djPanel"] section.dj-ref-studio > label,
  html.dark .right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-volume { color: #e2e8f0; }
  html.dark .right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-live-grid > .dj-file {
    background: #202d3d !important;
    border-color: #405169 !important;
  }
  html.dark .right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-file > span,
  html.dark .right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-monitor-check { color: #e2e8f0 !important; }
  html.dark .right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-file > small { color: #94a3b8; }
  html.dark .right-panel.hub-side-mode[data-hub-kind="djPanel"] .dj-live-grid > button[data-hub="radioMusicPlay"]:disabled {
    background: #27354a;
    color: #94a3b8;
    border-color: #475569;
  }
  html.dark .right-panel.hub-side-mode[data-hub-kind="djPanel"] section.dj-ref-studio input[data-radio-title] {
    background: #202d3d !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
  }
}
/* END TALKCHAT_R31R56_DJ_MOBILE_STUDIO_OWNER */