/* Front Porch only: the real conversation and all existing actions keep their hooks.
   Artwork has its own uncropped coordinate plane; the chair hit target travels with it. */
.connected-root[data-room="porch"]{--live-bg:#edf5ff;--live-paper:#fff;--live-soft:#e2efff;--live-line:#cbddf1;--live-input-line:#93bce6;--live-ink:#233e62;--live-muted:#547399;--live-title:#0d4f7c;--live-accent:#2776ab;--porch-ink:#190c40;--porch-purple:#764498}
.connected-root[data-room="porch"] .workspace{background:radial-gradient(ellipse at 12% 20%,#fff 0,transparent 42%),linear-gradient(150deg,#f4f8ff,#e6f1ff)}
.connected-root[data-room="porch"] .topbar{background:#ffffffed;border:0;box-shadow:0 3px 12px #5f8dbb0d}
.connected-root[data-room="porch"] .live-top-actions button[data-live-action="members"]{padding:10px 15px;border:1px solid #bfdcff;border-radius:18px;background:linear-gradient(145deg,#ecf7ff,#daebff);box-shadow:inset 0 1px 0 #fff,0 3px 8px #538ac72b;font-weight:750;font-size:13px;color:#095280}
.connected-root[data-room="porch"] .live-top-actions button[data-live-action="sign-out"]{color:#547399;font-size:12px}
.connected-root[data-room="porch"] #live-main{max-width:960px}
.connected-root[data-room="porch"] .porch-banner{--porch-scene-height:300px;position:relative;display:block;isolation:isolate;width:100%;height:var(--porch-scene-height);margin:0 0 16px;overflow:hidden;border:0;border-radius:25px;background:#efecdf;box-shadow:0 5px 18px #477aaa0d}
.connected-root[data-room="porch"] .porch-banner .room-scene-porch{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;min-height:0;max-height:none;aspect-ratio:auto;margin:0;border:0;border-radius:0;box-shadow:none;background:none;container-type:normal;overflow:hidden}
.connected-root[data-room="porch"] .porch-art-plane{position:absolute;right:0;top:0;height:100%;width:calc(var(--porch-scene-height) * 1681 / 936);aspect-ratio:1681/936;background:url('porch-sunset-scene.png') center/100% 100% no-repeat}
.connected-root[data-room="porch"] .porch-banner::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#fffdf4ec 0%,#fffaf0db 23%,#fffaf06b 36%,#fffaf000 55%)}
.connected-root[data-room="porch"] .porch-hero-heading{position:absolute;top:26px;left:24px;z-index:2;display:flex;align-items:flex-start;gap:13px;pointer-events:none}
.connected-root[data-room="porch"] .porch-hero-icon{display:block;width:52px;height:52px;flex:none;margin-top:2px;border-radius:50%;background:url('room-picker-reference.jpg') 7.782516% 55.172414%/1190.697674% 1786.046512% no-repeat;box-shadow:0 3px 8px #5b799b12}
.connected-root[data-room="porch"] .porch-hero-heading h1{margin:0;color:var(--porch-ink);font-family:var(--getaway-ui,system-ui,sans-serif);font-weight:850;font-size:44px;letter-spacing:-1.8px;line-height:1.01;text-shadow:0 1px 7px #fffc;transform:none}
.connected-root[data-room="porch"] .porch-hero-heading p{margin:7px 0 0;color:#3c6389;font-size:17px;line-height:1.2}
.connected-root[data-room="porch"] .porch-hero-welcome{position:absolute;left:25px;bottom:20px;z-index:2;margin:0;color:#3c3e64;font-size:14px;line-height:1.3;pointer-events:none;text-shadow:0 1px 5px #fff}
/* Cream chair bounds in the clean 1681 × 936 illustration. Never position relative to a cropped outer box. */
.connected-root[data-room="porch"] .porch-banner .porch-art-plane>.porch-peg-chair{left:47.5%;top:clamp(22px,70.5%,calc(100% - 22px));width:23%;height:49%;min-width:44px;min-height:44px;transform:translate(-50%,-50%);border-radius:25%;z-index:3}
.connected-root[data-room="porch"] .porch-peg-chair:focus-visible{outline:3px solid #245d8e;outline-offset:-3px;background:#fff3}
.connected-root[data-room="porch"] .porch-connection-warning{margin:0 0 8px;padding:7px 11px;font-size:12px;flex:none;max-height:80px;overflow:auto}
.connected-root[data-room="porch"] .porch-connection-warning button{min-height:44px;margin-left:10px;color:#164f7a;text-decoration:underline}
.connected-root[data-room="porch"] .chat-panel{border:6px solid #fff;border-radius:25px;background:#fff;box-shadow:0 7px 18px #5b8abd19;overflow:hidden}
.connected-root[data-room="porch"] .chat-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 10px;background:#fff;border:0}
.connected-root[data-room="porch"] .chat-header b{font:700 12px/1.3 var(--getaway-ui,system-ui,sans-serif);color:#204f7b}
.connected-root[data-room="porch"] .chat-header small{font-size:10px;line-height:1.4;margin-top:1px;color:#5c7697}
.connected-root[data-room="porch"] .chat-header .porch-refresh{align-self:center;min-height:44px;padding:4px 8px;color:#416c94;font-size:11px;text-decoration:underline;text-underline-offset:3px}
.connected-root[data-room="porch"] .messages{padding:14px 10px 18px;gap:18px;background:linear-gradient(135deg,#fff 0%,#fcfaff 100%);scrollbar-color:#b9d2ef transparent}
.connected-root[data-room="porch"] .porch-conversation-context{flex:none;font-size:11px}
.connected-root[data-room="porch"] .porch-retention-note{margin:0;color:#5b7596;font-size:10px;line-height:1.5;text-align:center}
.connected-root[data-room="porch"] .message{align-self:stretch;max-width:none;width:100%;min-width:0;flex:none;margin:0;text-align:left}
.connected-root[data-room="porch"] .message>div{position:relative;min-width:0;max-width:none;width:100%;box-sizing:border-box;padding:12px 12px 12px 62px;border:1px solid #e8d8f6;border-radius:22px;background:linear-gradient(135deg,#f5edfc,#eee3f7)}
.connected-root[data-room="porch"] .message-self>div{padding:4px 4px 6px 58px;border-color:transparent;background:none}
.connected-root[data-room="porch"] .message-author{margin:0 0 7px;text-align:left;color:var(--porch-ink);font-size:13px;font-weight:750;line-height:1.4}
.connected-root[data-room="porch"] .message-author .live-author-identity{display:inline-flex;align-items:center;min-height:20px}
.connected-root[data-room="porch"] .message-author .live-avatar{position:absolute;top:16px;left:11px;width:40px;height:40px;min-width:40px;flex-basis:40px;border:1px solid #d7c5e8;font-size:12px;background:#dcefff;color:#224f7a}
.connected-root[data-room="porch"] .message-self .message-author .live-avatar{top:8px;left:3px;width:42px;height:42px;min-width:42px}
.connected-root[data-room="porch"] .message .bubble{width:100%;max-width:none;box-sizing:border-box;padding:12px 13px;border:1px solid #e2cdef;border-radius:17px;background:linear-gradient(120deg,#f1e6fb,#eadcf5);box-shadow:none;color:var(--porch-ink);font-family:var(--getaway-ui,system-ui,sans-serif);font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.connected-root[data-room="porch"] .message-self .bubble{border:1px solid #2a78b0;border-radius:19px;background:linear-gradient(125deg,#327dab,#246b9f);box-shadow:inset 0 1px 0 #97c7e544,0 5px 10px #397db829;color:#fff}
.connected-root[data-room="porch"] .message time{display:block;margin:7px 1px 5px;text-align:right;color:#557397;font-size:10px;line-height:1.4}
.connected-root[data-room="porch"] .message .porch-message-photo{margin-top:10px}
.connected-root[data-room="porch"] .message .porch-message-photo img{border-radius:15px}
.connected-root[data-room="porch"] .message :is(.porch-reply-action,.live-delete-button,[data-live-action="edit-own"]){display:inline-flex;align-items:center;min-height:44px;padding:8px 6px;margin:0;color:#315d84;font-size:12px;text-decoration:underline;text-underline-offset:3px;vertical-align:middle}
.connected-root[data-room="porch"] .message .live-reactions{display:inline-flex;flex-wrap:wrap;gap:8px;max-width:100%;margin:3px 5px 4px 0;vertical-align:middle}
.connected-root[data-room="porch"] .message .live-reactions>button.reaction-choice{min-width:59px;min-height:44px;gap:7px;padding:7px 10px;border:1px solid #b7cfee;border-radius:999px;background:linear-gradient(#fff,#fbfcff);color:#235c88;box-shadow:0 4px 0 #bed3ee,0 6px 10px #4178ad1c;font-size:13px}
.connected-root[data-room="porch"] .message .live-reactions>button.reaction-choice.is-selected{background:#e0efff;border-color:#337fba;box-shadow:0 4px 0 #78a6d1,inset 0 0 0 1px #5796c8}
.connected-root[data-room="porch"] .message .reaction-symbol{font-size:23px;line-height:1}
.connected-root[data-room="porch"] .message .live-reactions>button.reaction-choice:not(:disabled):active{transform:translateY(3px) scale(.97);box-shadow:0 1px 0 #bed3ee}
.connected-root[data-room="porch"] .live-message-form{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin:14px 0 0}
.connected-root[data-room="porch"] .porch-compose-main{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:end;gap:9px}
.connected-root[data-room="porch"] .live-message-form textarea{height:55px;min-height:48px;max-height:90px;padding:12px 14px;border:1.5px solid #8fbbe7;border-radius:19px;background:#fff;box-shadow:0 4px 9px #4b87be16;color:#243d64;font:16px/1.5 var(--getaway-ui,system-ui,sans-serif)}
.connected-root[data-room="porch"] .live-message-form textarea::placeholder{color:#6885aa}
.connected-root[data-room="porch"] #live-main .porch-compose-main>.primary-button{min-height:50px;margin:0;padding:10px 14px;border:1px solid #246c9d;border-radius:18px;background:linear-gradient(140deg,#348dc1,#226491);box-shadow:inset 0 2px 0 #8cc9e555,0 4px 0 #1b527d,0 7px 11px #3977ab24;color:white;font:750 13px/1.3 var(--getaway-ui,system-ui,sans-serif)}
.connected-root[data-room="porch"] #live-main .porch-compose-main>.porch-photo-action{min-height:50px;margin:0;padding:10px 12px;border:1.5px solid #a6c9ef;border-radius:18px;background:linear-gradient(#fff,#edf4ff);box-shadow:0 4px 0 #c0d7f1;color:#12537f;font:750 12px/1.3 var(--getaway-ui,system-ui,sans-serif)}
.connected-root[data-room="porch"] .porch-compose-extra{display:flex;flex-direction:column;gap:8px}
.connected-root[data-room="porch"] .porch-mention-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:0}
.connected-root[data-room="porch"] .porch-mention-tools button{min-height:44px;margin:0;padding:9px 13px;border:1px solid #d9bbef;border-radius:16px;background:linear-gradient(#f5eaff,#eeddfb);box-shadow:inset 0 1px 0 #fff,0 3px 7px #9463b51b;color:#714291;font:650 12px/1.3 var(--getaway-ui,system-ui,sans-serif)}
.connected-root[data-room="porch"] .porch-mention-tools .porch-mention-open{font-size:13px}
.connected-root[data-room="porch"] .porch-mention-help{font-size:10px;color:#5b7596}
.connected-root[data-room="porch"] .porch-compose-extra>.live-error:empty{display:none}
.connected-root[data-room="porch"]>.mobile-nav{background:linear-gradient(135deg,#f9fcff,#e3eeff);border:0;border-radius:27px 27px 0 0;box-shadow:0 -6px 20px #5a8abc15;padding-top:8px}
.connected-root[data-room="porch"] .room-picker-bar{gap:12px;padding:3px 4px 6px;min-height:60px}
.connected-root[data-room="porch"] .room-picker-bar .room-home{display:grid;place-items:center;flex:none;width:43px;height:43px;background:#e3f1ff;border:1px solid #bedcff;border-radius:15px;box-shadow:inset 0 1px 0 #fff}
.connected-root[data-room="porch"] .mobile-nav .room-picker-bar .room-home>.room-current-symbol{width:34px;height:34px}
.connected-root[data-room="porch"] .room-picker-bar b{font:800 15px/1.25 var(--getaway-ui,system-ui,sans-serif);color:#104f7e;letter-spacing:-.3px}
.connected-root[data-room="porch"] .room-picker-bar .porch-current-subtitle{display:block;margin:3px 0 0;font-size:11px;font-weight:400;line-height:1.2;text-transform:none;letter-spacing:0;color:#557aa5}
@media(max-width:860px),(max-width:1024px) and (max-height:500px) and (pointer:coarse){
 .connected-root[data-porch-fit]{background:#edf5ff}
 .connected-root[data-room="porch"][data-porch-fit] .topbar{height:58px;min-height:58px;padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right))}
 .connected-root[data-room="porch"][data-porch-fit] .topbar .getaway-top-brand{display:flex;max-width:none}
 .connected-root[data-room="porch"][data-porch-fit] .live-top-actions{gap:7px}
 .connected-root[data-room="porch"][data-porch-fit] .live-top-actions button[data-live-action="members"]{padding:9px 11px;border-radius:15px}
 .connected-root[data-room="porch"][data-porch-fit] #live-main{max-width:none;gap:10px;padding-top:0;padding-bottom:8px}
 .connected-root[data-room="porch"][data-porch-fit] .porch-banner{--porch-scene-height:min(220px,calc((100vw - 20px) * .5568),26dvh);flex:none;height:var(--porch-scene-height);margin:0;border-radius:20px}
 .connected-root[data-room="porch"][data-porch-fit] .porch-hero-heading{top:18px;left:14px;gap:9px}
 .connected-root[data-room="porch"][data-porch-fit] .porch-hero-icon{width:39px;height:39px}
 .connected-root[data-room="porch"][data-porch-fit] .porch-hero-heading h1{font-size:clamp(25px,7.5vw,34px);letter-spacing:-1.3px}
 .connected-root[data-room="porch"][data-porch-fit] .porch-hero-heading p{font-size:13px;margin-top:6px}
 .connected-root[data-room="porch"][data-porch-fit] .porch-hero-welcome{left:15px;bottom:15px;font-size:clamp(10px,2.7vw,12px);line-height:1.26}
 .connected-root[data-room="porch"][data-porch-fit] #live-room-content{gap:10px}
 .connected-root[data-room="porch"][data-porch-fit] .chat-panel{border-width:5px;border-radius:22px}
 .connected-root[data-room="porch"][data-porch-fit] .chat-header{padding:1px 7px}
 .connected-root[data-room="porch"][data-porch-fit] .messages{height:auto;max-height:none;min-height:0;padding:9px 4px 14px;gap:15px}
 .connected-root[data-room="porch"][data-porch-fit] .live-message-form{gap:9px;margin:0;flex:none}
 .connected-root[data-room="porch"][data-porch-fit] .porch-compose-main{gap:7px}
 .connected-root[data-room="porch"][data-porch-fit] .live-message-form textarea{height:51px;min-height:44px;padding:10px 11px;font-size:16px}
 .connected-root[data-room="porch"][data-porch-fit] .porch-compose-extra{gap:6px;max-height:clamp(44px,calc(var(--porch-viewport-height,100dvh) - 310px - env(safe-area-inset-top)),180px)}
 .connected-root[data-room="porch"][data-porch-fit] .porch-compose-main>.primary-button{min-height:48px;padding-inline:12px}
 .connected-root[data-room="porch"][data-porch-fit] .porch-compose-main>.porch-photo-action{min-height:48px;padding-inline:10px}
 .connected-root[data-room="porch"][data-porch-fit] .porch-mention-tools{flex-wrap:nowrap;gap:5px;padding-bottom:3px}
 .connected-root[data-room="porch"][data-porch-fit] .porch-mention-tools button{padding-inline:11px;font-size:11px}
 .connected-root[data-room="porch"][data-porch-fit] .porch-connection-warning{margin:0}
 .connected-root[data-room="porch"][data-porch-fit] .room-picker-bar{gap:9px;min-height:58px}
 .connected-root[data-room="porch"][data-porch-fit]>.mobile-nav{padding-inline:max(13px,env(safe-area-inset-left)) max(13px,env(safe-area-inset-right))}
 .connected-root[data-room="porch"][data-porch-fit] .room-picker-bar>.change-room{gap:9px;font-size:12px}
}
@media(max-width:360px){
 .connected-root[data-room="porch"][data-porch-fit] .topbar{padding-inline:9px;gap:5px}
 .connected-root[data-room="porch"][data-porch-fit] .live-top-actions{gap:3px}
 .connected-root[data-room="porch"][data-porch-fit] .live-top-actions button{padding-inline:7px;font-size:11px}
 .connected-root[data-room="porch"][data-porch-fit] .porch-hero-heading{top:14px;left:12px;gap:7px}
 .connected-root[data-room="porch"][data-porch-fit] .porch-hero-icon{width:34px;height:34px}
 .connected-root[data-room="porch"] .message>div{padding-left:54px;padding-right:9px}
 .connected-root[data-room="porch"] .message-author .live-avatar{width:34px;height:34px;min-width:34px;left:9px}
 .connected-root[data-room="porch"] .message-self>div{padding-left:49px}
 .connected-root[data-room="porch"] .message-self .message-author .live-avatar{width:36px;height:36px;min-width:36px;left:2px}
 .connected-root[data-room="porch"] .room-picker-bar .room-home{width:36px;height:36px;border-radius:12px}
 .connected-root[data-room="porch"] .mobile-nav .room-picker-bar .room-home>.room-current-symbol{width:30px;height:30px}
 .connected-root[data-room="porch"] .room-picker-bar b{font-size:13px}
 .connected-root[data-room="porch"] .room-picker-bar .porch-current-subtitle{font-size:10px}
 .connected-root[data-room="porch"][data-porch-fit] .room-picker-bar{gap:7px;padding-inline:0}
}
/* Preserve the existing visualViewport contract when the keyboard opens.
   The composer, 44px chair target and room switcher always stay in the flex layout. */
.connected-root[data-room="porch"][data-porch-compact] .topbar{height:44px;min-height:44px}
.connected-root[data-room="porch"][data-porch-compact] #live-main{gap:4px;padding-bottom:4px}
.connected-root[data-room="porch"][data-porch-compact] .porch-banner{--porch-scene-height:clamp(44px,calc(var(--porch-viewport-height,100dvh) - 280px),60px);height:var(--porch-scene-height);border-radius:13px}
.connected-root[data-room="porch"][data-porch-compact] .porch-hero-heading{top:6px;left:12px;align-items:center;gap:8px}
.connected-root[data-room="porch"][data-porch-compact] .porch-hero-icon{width:31px;height:31px;margin:0}
.connected-root[data-room="porch"][data-porch-compact] .porch-hero-heading h1{font-size:20px;letter-spacing:-.6px;line-height:1.15}
.connected-root[data-room="porch"][data-porch-compact] .porch-hero-heading h1 br{display:none}
.connected-root[data-room="porch"][data-porch-compact] .porch-hero-heading h1 br::after{content:" "}
.connected-root[data-room="porch"][data-porch-compact] .porch-hero-heading p{font-size:10px;margin-top:2px}
.connected-root[data-room="porch"][data-porch-compact] .porch-hero-welcome{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.connected-root[data-room="porch"][data-porch-compact] .chat-header{display:none}
.connected-root[data-room="porch"][data-porch-compact] #live-room-content{gap:4px}
.connected-root[data-room="porch"][data-porch-compact] .messages{padding:4px;gap:10px}
.connected-root[data-room="porch"][data-porch-compact] .live-message-form{gap:4px}
.connected-root[data-room="porch"][data-porch-compact] .live-message-form textarea{height:44px;padding:7px 10px}
.connected-root[data-room="porch"][data-porch-compact] .porch-compose-main>:is(.primary-button,.porch-photo-action){min-height:44px}
.connected-root[data-room="porch"][data-porch-compact] .porch-compose-extra{max-height:clamp(44px,calc(var(--porch-viewport-height,100dvh) - 260px),100px)}
.connected-root[data-room="porch"][data-porch-compact]>.mobile-nav{padding-top:0;padding-bottom:env(safe-area-inset-bottom)}
.connected-root[data-room="porch"][data-porch-compact] .room-picker-bar{min-height:44px;padding-block:0}
.connected-root[data-room="porch"][data-porch-compact] .room-picker-bar .room-home{display:none}
.connected-root[data-room="porch"][data-porch-compact] .room-picker-bar .porch-current-subtitle{display:none}
.connected-root[data-room="porch"][data-porch-compact] .mobile-nav .room-picker-bar>.change-room{min-height:42px}
@media(prefers-reduced-motion:reduce){.connected-root[data-room="porch"] .message .live-reactions>button.reaction-choice{transition:none}.connected-root[data-room="porch"] .message .live-reactions>button.reaction-choice:not(:disabled):active{transform:none}}
@media(forced-colors:active){
 .connected-root[data-room="porch"] .porch-banner{background:Canvas;border:1px solid CanvasText}
 .connected-root[data-room="porch"] .porch-banner::after{display:none}
 .connected-root[data-room="porch"] .porch-art-plane{width:50%;background:none}
 .connected-root[data-room="porch"] .porch-hero-heading :is(h1,p),.connected-root[data-room="porch"] .porch-hero-welcome{color:CanvasText;text-shadow:none}
 .connected-root[data-room="porch"] .porch-banner .porch-art-plane>.porch-peg-chair{left:50%;top:50%;width:80%;height:70%;background:ButtonFace;color:ButtonText;border:2px solid ButtonText;line-height:1.3}
 .connected-root[data-room="porch"] .porch-banner .porch-peg-chair::after{content:"Play peg game";font-size:12px}
 .connected-root[data-room="porch"] .message>div,.connected-root[data-room="porch"] .message .bubble{background:Canvas;color:CanvasText;border-color:CanvasText;box-shadow:none}
 .connected-root[data-room="porch"] .message .live-reactions>button.reaction-choice,.connected-root[data-room="porch"] .porch-mention-tools button,.connected-root[data-room="porch"] .porch-compose-main>:is(.primary-button,.porch-photo-action){background:ButtonFace;color:ButtonText;border:1px solid ButtonText;box-shadow:none}
}

.connected-root[data-room="porch"][data-porch-compact] .chat-panel{border-width:3px}
.connected-root[data-room="porch"][data-porch-compact] .porch-mention-tools{padding-bottom:0}
/* A connection warning must not push the keyboard-visible composer out of view.
   In compact mode it overlays only the hero copy, leaving the chair at the right free. */
.connected-root[data-room="porch"][data-porch-compact] .porch-connection-warning{position:absolute;z-index:5;top:3px;left:14px;right:122px;max-height:50px;padding:5px 8px;background:#fff3f7f5;border:1px solid #e5bad1;border-radius:10px;font-size:10px;line-height:1.3;overflow:auto}
.connected-root[data-room="porch"][data-porch-compact] .porch-connection-warning button{display:block;margin:0;font-size:11px}