/* JustiX v0.8.1.5 — Court Chat + Readability Fix */

/* Channel selector: make state obvious and keep labels readable on all widths. */
#courtChannel{min-width:172px;display:grid;grid-template-columns:1fr 1fr;gap:4px}
#courtChannel button{min-width:0;white-space:nowrap;touch-action:manipulation}
#courtChannel button.active{background:rgba(212,175,55,.15)!important;color:#f7e8ad!important;box-shadow:inset 0 0 0 1px rgba(212,175,55,.45),0 0 0 2px rgba(212,175,55,.08)!important}
#courtChannel[data-channel="chat"] button[data-channel="chat"],#courtChannel[data-channel="audio"] button[data-channel="audio"]{color:#f7e8ad}

/* Chat form gets a clear active state in Chat mode. */
.court-side.chat-mode .chat-form{background:linear-gradient(180deg,rgba(212,175,55,.045),rgba(3,15,28,.78));border-top-color:rgba(212,175,55,.22)}
.court-side.chat-mode .chat-form input{border-color:rgba(212,175,55,.28)!important;box-shadow:0 0 0 2px rgba(212,175,55,.045)}
.court-side.chat-mode .chat-form input:focus{border-color:rgba(240,217,137,.58)!important;box-shadow:0 0 0 3px rgba(212,175,55,.08)}
.chat-form input:disabled{opacity:.72;cursor:not-allowed}

/* Legacy 2D courtroom avatar labels: strong contrast over pastel avatar tiles. */
.judge-person .avatar,.lawyer-person .avatar{display:grid!important;place-items:center!important;font-weight:950!important;letter-spacing:.06em!important;text-shadow:none!important;line-height:1!important}
.judge-person .avatar{color:#071526!important}
.lawyer-person.left .avatar{background:linear-gradient(145deg,#F7E5A6,#D4AF37)!important;color:#071526!important;border:1px solid rgba(255,242,188,.62)}
.lawyer-person.right .avatar{background:linear-gradient(145deg,#E7DDFB,#9D81DF)!important;color:#071526!important;border:1px solid rgba(238,230,255,.65)}
.lawyer-person b,.judge-person b{color:#fff!important;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.lawyer-person>span:not(.avatar),.judge-person>span:not(.avatar){color:#c9d5e1!important;line-height:1.35!important;text-align:center!important;max-width:220px}

/* 3D name plates: improve hierarchy and prevent low-contrast metadata. */
.court-stage.mode-3d .actor-name{min-width:150px!important;padding:8px 10px!important;background:rgba(2,10,18,.90)!important;border-color:rgba(212,175,55,.20)!important;box-shadow:0 12px 28px rgba(0,0,0,.42)!important}
.court-stage.mode-3d .actor-name b{font-size:12px!important;line-height:1.25!important;color:#fff!important;white-space:nowrap!important}
.court-stage.mode-3d .actor-name span{font-size:10px!important;line-height:1.35!important;color:#c3d1dd!important;white-space:nowrap!important;display:block!important}
.court-stage.mode-3d .actor3d.speaking .actor-name{border-color:rgba(240,217,137,.48)!important;box-shadow:0 0 28px rgba(212,175,55,.12),0 12px 28px rgba(0,0,0,.42)!important}

/* Prevent metadata from visually colliding with stage furniture. */
.court-stage .lawyer-person,.court-stage .judge-person{isolation:isolate;z-index:7}
.court-stage .lawyer-person b,.court-stage .judge-person b{margin-top:2px}

@media(max-width:900px){
  #courtChannel{min-width:148px}
  .court-stage.mode-3d .actor-name{min-width:128px!important;padding:7px 8px!important}
  .court-stage.mode-3d .actor-name b{font-size:11px!important}
  .court-stage.mode-3d .actor-name span{font-size:9px!important}
}
@media(max-width:650px){
  #courtChannel{width:100%;min-width:0}
  .court-stage.mode-3d .actor-name{min-width:108px!important;max-width:132px!important}
  .court-stage.mode-3d .actor-name b{font-size:10px!important;overflow:hidden;text-overflow:ellipsis}
  .court-stage.mode-3d .actor-name span{font-size:8px!important;overflow:hidden;text-overflow:ellipsis}
  .lawyer-person>span:not(.avatar),.judge-person>span:not(.avatar){max-width:150px}
}