.demo-mobile-nav{display:none}
@media(max-width:800px){
  #demo-nav.has-mobile-selector{display:none}
  .demo-mobile-nav{display:grid;gap:6px;padding:2px 0 8px;color:#d7e5f8;font-size:12px}
  .demo-mobile-nav select{width:100%;min-height:44px;border:1px solid #ffffff2b;border-radius:10px;background:#fff;color:#142947;padding:10px 38px 10px 12px;font-size:15px}
}
@media(max-width:620px){
  .record-labels{display:none}
  .record-row{display:flex;flex-wrap:wrap;gap:12px;padding:18px}
  .record-person{width:100%}
  .record-person .avatar{display:grid}
  .record-row>span:nth-child(2){margin-left:49px;font-size:13px}
  .record-row>span:nth-child(3){margin-left:auto}
  .record-row>span:last-child{display:block;width:100%;text-align:left;margin-left:49px;font-size:13px}
}


/* Keep controls and long content usable on narrow screens and with text zoom. */
.demo-body,.record-person>span,.message-row>span,.task-row>div{min-width:0}
.record-row,.message-row,.task-row,.attention-row,.demo-banner,.metric{overflow-wrap:anywhere}
.topbar-actions{flex-wrap:wrap}
.icon-button,.theme-toggle{width:44px;height:44px;flex-shrink:0}
.text-button,.toggle,.work-tabs button{min-height:44px}
@media(max-width:360px){.metrics,.overview{grid-template-columns:1fr}.demo-topbar,#demo-main,.demo-banner{padding-left:14px;padding-right:14px}.topbar-actions{gap:10px}}

.demo-dialog-status{margin:16px 20px 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--soft);color:var(--ink);overflow-wrap:anywhere}