/* Keep the document central on phones, including a short landscape viewport. */
@media (max-width:620px), (max-width:1000px) and (max-height:500px) {
  .reviewbar{display:none}
  .workspace{height:100dvh;min-height:0}
  .room-header{height:56px;padding:0 8px;gap:8px}
  .room-header .brand{display:none}
  .room-heading{flex:1;min-width:0;padding:0;border:0}
  .room-heading h1{font-size:14px;max-width:none}
  .room-title-button{gap:5px}
  .save-state{font-size:10px;line-height:14px;margin-top:1px;max-width:100%;text-overflow:ellipsis}
  .header-actions{gap:2px}
  .header-actions .primary{min-width:48px;min-height:40px;padding:8px;font-size:12px}
  .header-actions .primary span{display:none}
  .header-actions .icon-button{min-width:40px;min-height:44px}
  .room-body{position:relative}
  .context-bar{height:40px;padding:0 8px;gap:4px}
  .context-summary{flex:1;min-height:36px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .context-summary .live-dot{display:none}
  .context-summary strong{font-size:12px;font-weight:500;margin:0}
  .context-summary small{display:inline;font-size:11px;margin:0;color:#687c70}
  .context-summary small::before{content:' · '}
  .context-bar>div:last-child{gap:3px}
  .context-bar .small{min-height:36px;padding:6px 8px;font-size:12px}
  .stage{scrollbar-width:thin;background:#fff}
  .stage-inner{padding:6px 6px 0}
  .stage .paper{background:#fff;box-shadow:none;border-color:transparent}
  .stage .zoom-strip{display:none}
  .writing-bar{width:100%;max-width:none;height:44px;min-height:44px;margin:0;padding:0 4px;gap:1px;border:0;border-top:1px solid var(--border);border-radius:0;box-shadow:none;flex-wrap:nowrap;justify-content:space-between}
  .writing-bar .tool-group{gap:0;flex-shrink:0}
  .writing-bar .tool{font-size:12px;padding:0 6px;min-width:36px;min-height:44px}
  .writing-bar .history-tools,.writing-bar .toolbar-divider{display:none}
  .writing-bar .scope-button{min-width:0;min-height:44px;padding:0 4px;font-size:11px;overflow:hidden;text-overflow:ellipsis}
  .scope-button span{margin-left:2px}
  .room-footer,.room-empty .room-footer{height:44px;padding:0 4px;gap:0;flex-wrap:nowrap}
  .room-footer .footer-left{display:grid;width:100%;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
  .room-empty .footer-left{display:flex;justify-content:space-around}
  .room-footer .footer-right,.room-footer [data-action=mic],.room-footer [data-action=camera],.room-footer .device-note{display:none}
  .room-footer .tool{font-size:12px;padding:0 8px;min-height:44px}
  .room-footer .mobile-only,.compact-only{display:inline-block}
  .materials-panel,.people-panel,.room-empty .people-panel{display:none;position:absolute;top:0;bottom:0;width:min(280px,90%);z-index:8}
  .materials-panel{left:0;box-shadow:10px 0 30px #304a3020}
  .people-panel{right:0}
  .materials-panel.mobile-open,.people-panel.mobile-open{display:flex}
  .people-panel [data-action=hidePanel]{display:inline-block}
  .state-banner{padding:6px 8px;font-size:11px}
  .state-banner button{min-height:36px}
  .dialog input,.dialog textarea{font-size:16px}
  .dialog .compact-only{display:block}
  .dialog .choice,.dialog .secondary{min-height:44px}
}

/* Keep status feedback in one existing slot; it must not reflow the workspace. */
.room-heading{flex:1;overflow:hidden}
.room-header .save-state{display:block;width:100%;height:20px;line-height:20px;padding:0;margin-top:2px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:3px}
.room-header .save-state:hover{background:transparent}
.sync-status-actions{display:flex;gap:8px;margin-top:16px}
.sync-status-actions button{flex:1;min-height:44px}
#sync-status-detail{min-height:42px}
@media (max-width:620px), (max-width:1000px) and (max-height:500px) {
  .room-header .save-state{height:20px;line-height:20px;margin-top:0;font-size:10px;max-width:100%}
  .room-footer .footer-left>.tool{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
}
/* The primary task remains centered, independent of the number of saved rooms. */
.home-shell{min-height:100vh;min-height:100dvh;padding:0 40px;display:grid;grid-template-rows:1fr auto 1fr}
.home-header{align-self:start;justify-content:space-between;gap:16px}
.home-header>[data-action=allRooms]{min-height:44px;white-space:nowrap;font-size:13px}
.home-hero{padding:0;align-self:center}
.home-actions{margin-top:24px}
.canvas-area{position:relative}
.canvas-area>.scan-room-actions{right:10px;bottom:calc(var(--writing-space, 62px) + 8px);z-index:3}
@media(max-width:620px){
  .home-shell{padding:0 24px}
  .home-header>[data-action=allRooms]{font-size:12px}
  .home-actions{margin-top:20px}
}
@media(max-height:420px){.home-header{height:64px}.home-shell{min-height:max(320px,100dvh)}}

/* Room identity, collaboration and saving share one fixed-height header. */
.room-header.unified-header{height:72px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:44px 24px;gap:0 20px;padding:2px 20px 1px;align-items:center}
.unified-header>.brand{grid-column:1;grid-row:1 / 3}
.unified-header .room-heading{grid-column:2;grid-row:1;min-width:0;padding:0;border:0}
.unified-header .room-heading h1{max-width:none;font-size:15px}
.unified-header .room-title-button{height:44px;padding:0;max-width:100%}
.unified-header .header-actions{grid-column:3;grid-row:1;margin:0;gap:6px}
.unified-header .header-actions button{height:40px;min-height:40px;padding:0 10px;font-size:12px;white-space:nowrap}
.unified-header .header-invite{width:52px}
.unified-header .header-present-slot{width:88px;height:40px;flex-shrink:0}
.unified-header .header-present-slot button{width:100%}
.unified-header .header-actions .icon-button{width:44px;min-width:44px;padding:0}
.unified-header .header-context{grid-column:2 / 4;grid-row:2;display:flex;align-items:center;gap:8px;min-width:0;height:24px}
.unified-header .context-summary,.unified-header .context-spacer{flex:1;min-width:0}
.unified-header .context-summary{height:24px;min-height:24px;line-height:24px;font-size:11px;color:#657a70;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0;text-align:left}
.unified-header .header-follow{flex:0 0 72px;padding:0;min-height:24px;line-height:24px;white-space:nowrap;font-size:11px;text-align:center}
.unified-header .save-state{flex:0 0 128px;width:128px;height:24px;min-height:24px;line-height:24px;padding:0;margin:0;text-align:right;font-size:11px}
@media (max-width:620px), (max-width:1000px) and (max-height:500px){
  .room-header.unified-header{grid-template-columns:minmax(0,1fr) auto;column-gap:6px;padding:2px 8px 1px}
  .unified-header>.brand{display:none}
  .unified-header .room-heading{grid-column:1}
  .unified-header .room-heading h1{font-size:14px}
  .unified-header .header-actions{grid-column:2;gap:4px}
  .unified-header .header-actions button{padding:0 6px}
  .unified-header .header-invite{width:44px}
  .unified-header .header-present-slot{width:80px}
  .unified-header .header-context{grid-column:1 / 3;gap:4px}
  .unified-header .header-follow{flex-basis:64px}
  .unified-header .save-state{flex-basis:112px;width:112px}
}
/* End unified room header. */