/* Contain intrinsic form widths; preserve all monitoring, customer and ad actions. */
@media(max-width:850px){
  *,*::before,*::after{box-sizing:border-box}
  body{margin:12px auto;padding:0 max(12px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));min-width:0}
  header{padding:0 0 8px}
  header h1{font-size:22px;line-height:1.35;margin:8px 0}
  header>a{display:inline-flex;align-items:center;min-height:44px}
  header p{font-size:14px;margin:4px 0}
  .embedded body{margin:0;padding:0 0 max(16px,env(safe-area-inset-bottom))}
  .embedded header{display:none}
  main,.card,.toolbar,.grid,.columns,.toolbar>*,.grid>*,.columns>*,form,label,details{min-width:0;max-width:100%}
  .card{padding:12px;margin:10px 0}
  button,input,textarea,select{font-size:16px;min-height:44px;max-width:100%;margin:4px 0}
  select{width:100%}
  input[type=checkbox],input[type=radio]{min-height:0;width:20px;height:20px;flex-shrink:0;vertical-align:middle}
  .toolbar{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:stretch;padding:12px}
  .toolbar label,.toolbar input#search{width:100%}
  .monitor-room{grid-column:1/-1}
  .monitor-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .monitor-actions button{margin:0;width:100%;padding:10px 6px}
  .monitor-auto{display:flex!important;align-items:center;gap:8px;min-height:44px}
  .monitor-more{border-top:1px solid #d7e7f8;padding-top:4px}
  summary{min-height:44px;line-height:1.5;padding:10px 0;font-size:14px;overflow-wrap:anywhere}
  .monitor-more>div{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:4px 0}
  #revoke{color:#b42332;border-color:#e4b7bd;margin-top:8px}
  #logout{margin-top:8px}
  .connection-detail,.count-help{margin:0}
  .live-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .live-summary small{margin-bottom:4px;line-height:1.4;font-size:12px}
  .live-summary strong{font-size:16px;line-height:1.45;overflow-wrap:anywhere}
  .live-actions{flex-wrap:wrap;margin-top:10px}
  #live-operations details{margin-top:4px}
  #live-operations p,#advertising p,#metrics,#profile,#viewers,#events,#notice{overflow-wrap:anywhere}
  #metrics{font-size:13px;line-height:1.6;padding:8px 12px}
  .columns,.grid{grid-template-columns:minmax(0,1fr);gap:0}
  .feed-heading{flex-wrap:wrap}
  .feed-heading select{width:auto;max-width:100%;min-width:0}
  #events{height:320px;max-height:60dvh;overscroll-behavior-y:contain}
  #events .nick,#viewers .nick{min-height:44px;display:inline-flex;align-items:center;text-align:left;overflow-wrap:anywhere}
  #events>div{padding:4px 0}
  #history-analysis form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #history-analysis form label{width:100%}
  #history-analysis form button{grid-column:1/-1}
  #live-operations table,#history-analysis table{table-layout:fixed;overflow-wrap:anywhere;font-size:12px}
  #client-settings{scroll-margin-top:12px}
  #client-popups{right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:calc(100% - 24px);max-width:calc(100% - 24px);max-height:70vh;max-height:70dvh}
  #client-popups .card{margin:8px 0}
  #login{padding:20px;margin:12px auto}
}
@media(min-width:851px){
  .monitor-actions,.monitor-more,.monitor-more>div{display:contents}
  .monitor-more>summary{display:none}
}
@media(max-width:850px){
  #desk{display:flex;flex-direction:column}
  #desk>.toolbar{order:0}
  #desk>.connection-detail{order:1}
  #desk>#live-operations{order:2}
  #desk>.card[aria-label="广告数据"]{order:3}
  #desk>#metrics{order:4}
  #desk>.columns{order:5}
  #desk>.count-help{order:6}
  #desk>#history-analysis{order:7}
  #desk>details.card{order:8}
  #desk>#room-settings{order:9}
  #desk>#client-settings{order:-1}
}
@media(min-width:851px){.operations-more{display:contents}.operations-more>summary{display:none}}
@media(max-width:850px){#desk>.card[aria-label="广告数据"]{order:6}#desk>.count-help{order:7}#desk>#history-analysis{order:8}#desk>details.card{order:9}#desk>#room-settings{order:10}#desk>#client-settings{order:-1}}
@media(max-width:850px){
  #desk>.toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .monitor-actions{grid-column:1/-1}
  .monitor-auto{font-size:14px}
  .monitor-more{border-top:0;padding-top:0}
  .monitor-more[open]{grid-column:1/-1}
  .monitor-more button[onclick]{order:-1}
}