/* Desktop keeps its existing room layout. On phones the conversation and its
   composer share one viewport, rather than two competing scroll surfaces. */
.porch-banner,.porch-room-details,.porch-details-content,.porch-compose-main,.porch-compose-extra{display:contents}
.porch-compose-extra>.porch-reply-quote{order:-1}
.connected-root .porch-compose-extra>.porch-reply-draft{flex-basis:100%;margin-bottom:0;background:var(--live-soft);color:var(--live-ink)}
.porch-room-details>summary{display:none}
@media(max-width:860px),(max-width:1024px) and (max-height:500px) and (pointer:coarse){
  .connected-root[data-porch-fit]{position:fixed;inset:auto 0;top:var(--porch-viewport-top,0px);height:var(--porch-viewport-height,100dvh);display:flex;flex-direction:column;overflow:hidden;background:var(--bg,#faf7fc);padding-top:env(safe-area-inset-top);box-sizing:border-box}
  .connected-root[data-porch-fit]>.connected-strip,.connected-root[data-porch-fit] .workspace-footer{display:none}
  .connected-root[data-porch-fit]>.app-shell{display:flex;flex:1;min-height:0;width:100%;margin:0}
  .connected-root[data-porch-fit] .sidebar{display:none}
  .connected-root[data-porch-fit] .workspace{display:flex;flex-direction:column;min-height:0;padding-bottom:0}
  .connected-root[data-porch-fit] .topbar{flex:none;height:48px;min-height:48px;padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));gap:8px}
  .connected-root[data-porch-fit] .topbar .desktop-breadcrumb{min-width:0;max-width:none;font-size:11px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .connected-root[data-porch-fit] .live-top-actions{flex-shrink:0;gap:10px}
  .connected-root[data-porch-fit] .live-top-actions button{min-height:44px}
  .connected-root[data-porch-fit] .topbar .live-top-actions>button[data-live-action="rooms"]{display:none}
  .connected-root[data-porch-fit] #live-main{position:relative;display:flex;flex-direction:column;flex:1;min-height:0;width:100%;max-width:none;margin:0;padding:0 max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left));overflow:visible}
  /* The original artwork and its hotspot share one uncropped 12:5 coordinate plane.
     Keep this outside the disclosure, including with the keyboard open. */
  .connected-root[data-porch-fit] .porch-banner{--porch-art-height:120px;display:flex;justify-content:center;flex:none;height:var(--porch-art-height);overflow:hidden;border-radius:14px;background:#c5dfdf}
  .connected-root[data-porch-fit] .porch-banner .room-scene-porch{display:block;flex:none;width:calc(var(--porch-art-height) * 2.4);max-width:100%;height:100%;min-height:0;max-height:none;aspect-ratio:12/5;margin:0;border:0;border-radius:0;box-shadow:none;background-size:100% 100%;background-position:center}
  .connected-root[data-porch-fit] .porch-banner .porch-peg-chair{left:38%;top:61.5%;width:20.5%;height:53%;min-width:44px;min-height:44px;transform:translate(-50%,-50%)}
  .connected-root[data-porch-compact] .porch-banner{--porch-art-height:60px}
  .connected-root[data-porch-fit] .porch-room-details{display:block;position:relative;flex:none;z-index:4}
  .connected-root[data-porch-fit] .porch-room-details>summary{display:list-item;cursor:pointer;min-height:36px;padding:8px 4px;font-size:12px;color:var(--live-ink);box-sizing:border-box}
  .connected-root[data-porch-fit] .porch-details-content{display:block;position:absolute;top:36px;left:10px;right:10px;max-height:calc(var(--porch-viewport-height,100dvh) - 230px);overflow-y:auto;overscroll-behavior:contain;padding:16px;background:var(--live-paper,#fffaff);border:1px solid var(--live-line);border-radius:14px;box-shadow:0 10px 30px #34204730}
  .connected-root[data-porch-fit] .porch-room-details:not([open])>.porch-details-content{display:none}
  .connected-root[data-porch-fit] .porch-details-content .live-connection-actions{display:flex;flex-wrap:wrap}
  .connected-root[data-porch-fit] #live-room-content{display:flex;flex-direction:column;flex:1;min-height:0;gap:8px}
  .connected-root[data-porch-fit] .chat-panel{display:flex;flex-direction:column;flex:1;min-height:0;max-width:none;border-radius:14px}
  .connected-root[data-porch-fit] .chat-header{flex:none;padding:8px 12px}
  .connected-root[data-porch-fit] .chat-header b{font-size:13px}
  .connected-root[data-porch-fit] .chat-header small{font-size:11px;margin-top:0}
  .connected-root[data-porch-fit] .messages{flex:1;min-height:0;height:auto;max-height:none;overflow-y:auto;overscroll-behavior-y:contain;padding:14px;gap:18px;scroll-behavior:auto}
  .connected-root[data-porch-fit] .messages>[data-live-action="more"]{flex-shrink:0;min-height:44px;margin-top:0!important}
  .connected-root[data-porch-fit] .live-message-form{display:flex;flex-direction:column;gap:6px;flex:none;width:100%;max-width:none;margin:0;position:relative;align-items:stretch}
  .connected-root[data-porch-fit] .porch-compose-main{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;align-items:end;flex:none}
  .connected-root[data-porch-fit] .porch-compose-extra{display:flex;flex-direction:column;gap:6px;min-height:0;max-height:clamp(44px,calc(var(--porch-viewport-height,100dvh) - 290px - env(safe-area-inset-top)),180px);overflow-y:auto;overscroll-behavior:contain}
  .connected-root[data-porch-fit] .porch-compose-extra>*{flex:0 0 auto;width:100%;box-sizing:border-box}
  .connected-root[data-porch-fit] .porch-compose-extra:not(:has(> :not([hidden]):not(:empty):not(.porch-mention-help))){display:none}
  .connected-root[data-porch-fit] .live-message-form textarea{width:100%;height:64px;min-height:44px;max-height:90px;resize:none;padding:8px 10px;font-size:16px;line-height:1.4;box-sizing:border-box}
  .connected-root[data-porch-fit] .porch-compose-main>.primary-button,.connected-root[data-porch-fit] .porch-compose-main>.porch-photo-action{min-height:44px;margin:0;padding:8px 10px;font-size:13px}
  .connected-root[data-porch-fit] .porch-mention-tools{gap:6px}
  .connected-root[data-porch-fit] .porch-mention-tools button{min-height:44px;padding:6px 10px;font-size:12px}
  .connected-root[data-porch-fit] .porch-mention-help{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .connected-root[data-porch-fit] .porch-selected-mentions:empty{display:none}
  .connected-root[data-porch-fit] .porch-selected-mentions{max-height:64px;overflow-y:auto}
  .connected-root[data-porch-fit] .porch-mention-picker{position:relative;max-height:min(180px,calc(var(--porch-viewport-height,100dvh) / 2));overflow-y:auto;z-index:5}
  .connected-root[data-porch-fit] .porch-compose-extra>.porch-reply-quote{margin:0;max-height:70px;overflow-y:auto}
  .connected-root[data-porch-fit] .porch-compose-extra>.live-error,.connected-root[data-porch-fit] .porch-mention-status{max-height:60px;overflow-y:auto}
  .connected-root[data-porch-fit]>.mobile-nav{position:static;display:block;flex:none;width:100%;box-sizing:border-box}
  /* Keyboard / short landscape: retain bottom Change room and Group/Sign out in the top bar,
     recover space from duplicate chrome, never from the composer font size. */
  .connected-root[data-porch-compact] .porch-room-details{position:absolute;top:0;left:10px;right:10px;pointer-events:none}
  .connected-root[data-porch-compact] .porch-room-details>summary{pointer-events:auto;width:max-content;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:auto;padding:8px;font-size:11px;border-radius:10px;background:#fffaffeb}
  .connected-root[data-porch-compact] .porch-details-content{pointer-events:auto;top:60px;left:0;right:0;max-height:calc(var(--porch-viewport-height,100dvh) - 140px)}
  .connected-root[data-porch-compact] .chat-header{display:none}
  .connected-root[data-porch-compact] .messages{padding:6px;gap:10px}
  .connected-root[data-porch-compact]>.mobile-nav{padding-top:0;padding-bottom:env(safe-area-inset-bottom)}
  .connected-root[data-porch-compact] .room-picker-bar{min-height:44px;padding-block:0}
  .connected-root[data-porch-compact] .room-picker-bar small,.connected-root[data-porch-compact] .room-home{display:none}
  .connected-root[data-porch-compact] #live-main{padding-bottom:8px}
  .connected-root[data-porch-compact] .live-message-form textarea{height:44px}
}