/* TogetherVideo 4.1 — readable room / playlist typography */
@media (min-width:821px){
  .watch-layout{grid-template-columns:minmax(0,1fr) 370px}
}
@media (min-width:1500px){
  .watch-layout{grid-template-columns:minmax(0,1fr) 390px}
}

.sidebar-tabs{height:50px}
.room-sidebar{grid-template-rows:50px minmax(0,1fr)}
.sidebar-tab{font-size:15px;font-weight:720}
.sidebar-tab span{font-size:12px;margin-left:4px}

.room-summary{padding:15px 14px}
.room-summary-head{margin-bottom:12px}
.room-summary-head strong{font-size:14px}
.room-summary-head span{font-size:11px}
.member-strip{gap:8px}
.member-compact{grid-template-columns:36px minmax(0,1fr) auto;gap:9px;padding:9px}
.member-avatar{width:36px;height:36px;font-size:11px}
.member-copy{gap:3px}
.member-copy strong{font-size:13px}
.member-copy strong em{font-size:9px;padding:2px 4px}
.member-copy span{font-size:11px}
.status-dot{width:8px;height:8px}

.room-control-grid{gap:9px;margin-top:10px}
.sync-status-row{grid-template-columns:31px minmax(0,1fr);gap:9px;padding:9px 10px}
.sync-icon{width:28px;height:28px;font-size:12px}
.sync-status-row strong{font-size:13px}
.sync-status-row span{font-size:11px}
.buffer-mini-grid{gap:8px}
.buffer-mini-grid>div{padding:8px 10px}
.buffer-mini-grid span{font-size:12px}
.buffer-mini-grid small{font-size:11px}
.room-actions{gap:8px}
.room-actions button{height:38px;font-size:13px}
.speed-row{gap:10px;font-size:12px}
.speed-row select{height:37px;padding:6px 10px;font-size:13px}

.chat-header{height:42px;flex-basis:42px;padding:0 14px}
.chat-header span{font-size:14px}
.chat-header small{font-size:11px}
.chat-messages{padding:13px 12px 16px;gap:13px}
.chat-empty{font-size:12px}
.chat-message{gap:9px}
.chat-avatar{width:31px;height:31px;flex-basis:31px;font-size:10px}
.chat-message-main{max-width:82%;gap:4px}
.chat-meta{gap:6px;font-size:10px}
.chat-bubble{padding:9px 11px;border-radius:9px;font-size:13px;line-height:1.55}
.chat-composer{height:60px;flex-basis:60px;gap:8px;padding:9px 10px}
.chat-composer input{height:41px;padding:0 12px;font-size:13px}
.chat-composer button{height:41px;padding:0 16px;font-size:13px}

.playlist-head{height:58px;flex-basis:58px;padding:0 14px}
.playlist-head>div{gap:3px}
.playlist-head strong{font-size:15px}
.playlist-head span{font-size:11px}
.playlist-head button{height:34px;padding:0 10px;font-size:12px}
.breadcrumbs{gap:5px;padding:10px 11px}
.breadcrumbs button{padding:6px 8px;font-size:12px}
.library-list{gap:3px;padding:9px}
.library-item{grid-template-columns:38px minmax(0,1fr) auto;gap:10px;padding:9px 10px}
.file-icon{width:36px;height:36px;font-size:11px}
.library-item strong{font-size:13px}
.library-item small{font-size:11px}

.danger-button{min-height:38px;padding:0 14px;border:1px solid color-mix(in srgb,var(--danger) 48%,var(--line));border-radius:7px;background:color-mix(in srgb,var(--danger) 8%,var(--surface));color:var(--danger);font-size:13px;font-weight:750}
.danger-button:hover{background:color-mix(in srgb,var(--danger) 14%,var(--surface));border-color:var(--danger)}

@media (max-width:820px){
  .sidebar-tab{font-size:14px}
  .sidebar-tab span{font-size:11px}
  .room-summary-head strong{font-size:14px}
  .member-copy strong{font-size:13px}
  .member-copy span{font-size:11px}
  .chat-bubble{font-size:13px}
  .chat-composer input,.chat-composer button{font-size:13px}
  .library-item strong{font-size:13px}
  .library-item small{font-size:11px}
}