:root { --page:#f3efe8; --panel:#ffffff; --text:#1d1a2f; --muted:#6b6780; --line:#d9d3c7; --pink:#ff5d8f; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --page:#14121f; --panel:#201d33; --text:#f3efe8; --muted:#a29fb8; --line:#37334d; } }
  :root[data-theme="dark"] { --page:#14121f; --panel:#201d33; --text:#f3efe8; --muted:#a29fb8; --line:#37334d; }
  * { box-sizing:border-box; }
  :root { padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); }
  html { scroll-padding-top:env(safe-area-inset-top,0px); }
  body { margin:0; background:var(--page); color:var(--text); font-family:"Trebuchet MS","Segoe UI",sans-serif; }
  header { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; padding:16px 20px; }
  h1 { margin:0; font-size:1.2rem; }
  .tabs { display:flex; gap:6px; }
  .tabs button { font:inherit; padding:8px 14px; border-radius:999px; border:1.5px solid var(--line); background:var(--panel); color:var(--text); cursor:pointer; }
  .tabs button[aria-pressed="true"] { background:var(--text); color:var(--page); border-color:var(--text); }
  .hint { padding:0 20px 14px; margin:0; color:var(--muted); font-size:.92rem; }
  main { display:grid; gap:24px; padding:0 20px 28px; align-items:start; grid-template-columns:minmax(300px,360px) minmax(0,1fr); }
  body[data-view="guest"] main { grid-template-columns:minmax(300px,420px); justify-content:center; }
  body[data-view="wall"] main { grid-template-columns:minmax(0,1fr); }
  body[data-view="guest"] #wallCol, body[data-view="wall"] #guestCol { display:none; }
  @media (max-width:820px) { main { grid-template-columns:minmax(0,1fr) !important; } }
  .cap { margin:0 0 8px; color:var(--muted); font-size:.85rem; }

  :root { --bliss:url("/assets/partywall/bliss-wallpaper.svg"); }
  /* ---------- MSN Messenger window (shared by guest page and wall; sizes in em) ---------- */
  .msnwin { display:flex; flex-direction:column; overflow:hidden; font-family:Tahoma,Verdana,sans-serif; color:#000;
            background:#d5e7fb; border:.18em solid #0831d9; border-radius:.6em .6em .15em .15em; box-shadow:0 .4em 1.2em rgba(0,0,0,.5); }
  .tbar { display:flex; align-items:center; gap:.25em; padding:.3em .3em .3em .6em; color:#fff; font-weight:700; font-size:.9em; text-shadow:.07em .07em #0a246a;
          background:linear-gradient(180deg,#3d95ff 0%,#0058e6 14%,#0050d8 80%,#0a3bc9 100%); }
  .tbar span { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .xb { position:relative; flex:none; width:1.3em; height:1.3em; padding:0; border:.07em solid #fff; border-radius:.2em; background:linear-gradient(#6aa4f5,#2a63d6); font:inherit; cursor:pointer; }
  .xb::before { content:attr(data-glyph); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font:700 .8em/1 Tahoma,Arial,sans-serif; }
  .xb:hover { filter:brightness(1.18); }
  .xb:active { filter:brightness(.9); }
  .xb:focus-visible { outline:2px solid #fff; outline-offset:1px; }
  @keyframes swapin { from { opacity:0; transform:scale(.97); } to { opacity:1; transform:none; } }
  .swapin { animation:swapin .3s ease-out; }
  @media (prefers-reduced-motion:reduce) { .swapin { animation:none; } }
  .xb.x { background:linear-gradient(#f08a6a,#d6401e); }
  .menu { display:flex; gap:1.1em; padding:.25em .7em; background:#ece9d8; font-size:.8em; border-bottom:.08em solid #b9b5a0; }
  .toolbar { display:flex; align-items:flex-end; gap:.2em; padding:.3em .6em .2em; background:linear-gradient(#fff,#e1ebf9); border-bottom:.08em solid #a9bde0; }
  .toolbar .it { text-align:center; font-size:.75em; padding:0 .55em; color:#1b3d8a; }
  .toolbar .it i { display:block; font-style:normal; font-size:2.1em; line-height:1.2; }
  .toolbar .logo { margin-left:auto; padding:0 .3em .2em; font:italic 800 1.5em Georgia,serif; color:#2a63d6; }
  /* Party Wall toolbar: natural image ratio, flat background, no decorative borders. */
.party-wall-toolbar-image {
  display:block;
  min-width:0;
  width:100%;
  height:auto;
  min-height:0;
  max-height:none;
  box-sizing:border-box;
  padding:0;
  border:0;
  border-bottom:0;
  border-radius:10px;
  overflow:hidden;
  background:#d5e7fb;
  box-shadow:none;
}
.party-wall-toolbar-image img {
  display:block;
  flex:1 1 auto;
  min-width:0;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
  object-position:center;
}


/* Party link sits centered above the buddy avatar in the right rail. */
/* Center the avatar stack in the wall's available height. */
body[data-view="wall"] .wallwin .right { width:8em; justify-content:center; }
body[data-view="wall"] .wallwin .avatar-stack {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5em;
  width:100%;
}
.party-wall-qr {
  position:absolute;
  z-index:2;
  left:0;
  bottom:calc(100% + .3em);
  flex:none;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  color:#1b3d8a;
  font:inherit;
  text-decoration:none;
  white-space:nowrap;
}
.party-wall-qr img {
  display:block;
  flex:none;
  width:min(70px,5.5vw);
  max-width:70px;
  height:auto;
  aspect-ratio:1;
  image-rendering:pixelated;
}
.party-wall-qr span { display:block; font:700 clamp(6px,.68vw,9px)/1.1 Tahoma,Verdana,sans-serif; }

body[data-view="wall"] .party-wall-toolbar-image img {
  transform:translateX(-3rem);
}

@media (max-width:700px) {
  body[data-view="wall"] .party-wall-toolbar-image img {
    transform:translateX(-.5rem);
  }
}
  .to { background:#fff; border:.08em solid #7f9db9; padding:.35em .6em; font-size:.9em; }
  .status { padding:.3em .8em; font-size:.8em; color:#444; border-top:.08em solid #a9bde0; background:#e8effa; }
  .avbox { background:#fff; border:.08em solid #7f9db9; display:flex; align-items:center; justify-content:center; position:relative; }
  .avbox::after { content:""; position:absolute; right:.35em; bottom:.35em; border:.3em solid transparent; border-top-color:#333; }
  .avbox svg { width:78%; height:78%; }
  .avbox img { position:absolute; left:6%; top:6%; width:88%; height:88%; object-fit:contain; }
  .avbox.duck img { left:0; top:0; width:100%; height:100%; object-fit:cover; }
  .sys { color:#444; margin-bottom:.6em; padding-bottom:.5em; border-bottom:.08em dashed #aaa; }
  .m { margin-bottom:.7em; animation:in .5s ease-out; }
  .who { color:#6a6a6a; }
  .ts { margin-left:.6em; font-size:.85em; color:#9a9a9a; white-space:nowrap; }
  .tx { margin:.15em 0 0 .9em; overflow-wrap:anywhere; }
  @keyframes in { from { opacity:0; transform:translateY(.6em); } to { opacity:1; transform:none; } }
  @media (prefers-reduced-motion:reduce) { .m { animation:none; } .wallwin.nudge { animation:none !important; outline:4px solid #ffd54a; } .stage.wall-nudge { animation:none !important; filter:brightness(1.14); } }

  /* ---------- guest page: the MSN compose area on a phone ---------- */
  .phone { background:#3a7bd5 var(--bliss) center / cover no-repeat; border:10px solid #111; border-radius:34px; height:760px; display:flex; padding:12px 8px; overflow:hidden; }
  .gwin { flex:1; min-width:0; font-size:13px; }
  .gwin.nudge { animation:gshake .5s linear; }
  @keyframes gshake { 0%,100% { transform:none; } 20% { transform:translate(-6px,2px); } 40% { transform:translate(6px,-2px); } 60% { transform:translate(-4px,-2px); } 80% { transform:translate(4px,2px); } }
  .gbody { flex:1; min-height:0; padding:8px; display:flex; flex-direction:column; gap:8px; }
  .gfrom { display:flex; align-items:center; gap:8px; padding:3px .6em; }
  .gfrom input { flex:1; width:auto; padding:4px 7px; }
  .gwin .toolbar { width:100%; min-width:0; box-sizing:border-box; overflow:hidden; display:flex; align-items:center; justify-content:center; }
  .gwin .guest-toolbar-image img { display:block; width:100%; height:auto; max-width:100%; object-fit:contain; object-position:center; }
  .gwin .toolbar .it { padding:0 .3em; }
  .gwin .toolbar .logo { font-size:1.2em; padding-left:.1em; }
  .gwin .body { display:grid; grid-template-columns:minmax(0,1fr) 76px; grid-template-rows:auto auto minmax(0,1fr) auto; gap:6px; padding:6px; }
  .gwin .left, .gwin .right { display:contents; }
  .gwin .to { grid-column:1; grid-row:1; width:100%; box-sizing:border-box; }
  .gwin .gfrom { grid-column:1; grid-row:2; width:100%; box-sizing:border-box; }
  .gwin .gfrom input { min-width:0; box-sizing:border-box; }
  .gwin .gchat { grid-column:1 / 3; grid-row:3; min-height:0; }
  .gwin .compose2 { grid-column:1; grid-row:4; }
  .gwin .big { grid-column:2; grid-row:1 / 3; align-self:start; }
  .gwin .duck { grid-column:2; grid-row:4; align-self:end; }
  .gchat { min-height:110px; }
  .ghead { display:flex; gap:10px; align-items:flex-start; }
  .gfields { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
  .gfields label { font-size:.9em; }
  .gfields .intro { margin:0; font-size:.85em; line-height:1.3; color:#333; }
  .gwin input { width:100%; font:inherit; font-size:16px; padding:7px 8px; background:#fff; color:#000; border:1px solid #8fa8d0; border-radius:4px; }
  .gwin input:focus { outline:2px solid #3d95ff; outline-offset:-1px; }
  .duckbox { width:92px; height:92px; flex:none; border-radius:6px; border:1px solid #8fa8d0; }
  .duckbox img { width:86%; height:86%; object-fit:contain; }
  .compose2 { container-type:inline-size; position:relative; flex:none; display:flex; flex-direction:column; background:#fff; border:1px solid #8fa8d0; border-radius:6px; }
  @container (max-width:300px) { .ci .lbl { display:none; } }
  .compose2:focus-within { border-color:#3d95ff; box-shadow:0 0 0 2px rgba(61,149,255,.35); }
  .ctool { display:flex; align-items:center; flex-wrap:wrap; padding:3px 4px; background:linear-gradient(#fff,#e6eefa); border-bottom:1px solid #8fa8d0; border-radius:5px 5px 0 0; }
  .ci { display:flex; align-items:center; gap:3px; height:30px; padding:0 4px; font:inherit; font-size:.85em; color:#1b2d58; background:none; border:0; border-radius:3px; cursor:pointer; }
  .ci:hover { background:#dbe8fa; }
  .ci.locked { opacity:.55; cursor:not-allowed; }
  .ci:focus-visible, .cbtn:focus-visible, .picker button:focus-visible, .tab:focus-visible { outline:2px solid #3d95ff; outline-offset:1px; }
  .fa { font:700 22px/1 "Times New Roman",serif; color:#16307a; padding:0 4px; }
  .ic { width:20px; height:20px; } .ic.wide { width:28px; }
  .ar { border:3px solid transparent; border-top:4px solid #333; margin-top:4px; }
  .cmid { position:relative; flex:1; display:flex; }
  .cmid textarea { flex:1; width:100%; min-height:100px; border:0; border-radius:0; padding:8px 84px 8px 8px; font:inherit; font-size:16px; resize:none; background:#fff; color:#000; }
  .cmid textarea:focus { outline:none; }
  .gwin .cmid textarea { min-height:200px; }
  .cbtns { position:absolute; right:6px; top:6px; width:68px; display:flex; flex-direction:column; gap:6px; }
  .cbtn { min-height:46px; padding:0; font:inherit; font-weight:700; color:#1d4c9e; background:linear-gradient(#fff,#e4ecf7); border:1px solid #9fb3d1; border-radius:5px; box-shadow:inset 0 1px 0 #fff, 0 1px 2px rgba(60,90,150,.35); cursor:pointer; }
  .cbtn.sm { min-height:34px; }
  .cbtn:disabled { color:#8a9bbd; cursor:not-allowed; }
  .cbtn:not(:disabled):active { background:linear-gradient(#e4ecf7,#fff); }
  .cfoot { display:flex; justify-content:space-between; align-items:center; min-height:38px; padding:4px 8px; font-size:.8em; color:#444; background:linear-gradient(#eaf1fb,#d6e3f6); border-top:1px solid #8fa8d0; border-radius:0 0 5px 5px; }
  .cfoot > span { padding:0; }
  .tabs2 { display:flex; gap:6px; align-items:center; }
  .tab { display:flex; align-items:center; justify-content:center; width:40px; height:26px; padding:0; font:700 16px/1 "Times New Roman",serif; color:#16307a; background:#fff; border:1px solid #8fa8d0; border-radius:6px; opacity:.6; cursor:not-allowed; }
  .picker { position:absolute; left:6px; bottom:calc(100% + 4px); z-index:5; display:grid; grid-template-columns:repeat(6,1fr); gap:2px; width:min(270px,94%); padding:6px; background:#fff; border:1px solid #8fa8d0; border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,.3); }
  .picker[hidden] { display:none; }
  .picker button { font-size:24px; line-height:1; padding:6px 0; background:none; border:0; border-radius:4px; cursor:pointer; }
  .picker button:hover { background:#dbe8fa; }
  .m.nl { color:#6a6a6a; font-style:italic; }
  .attach { display:flex; align-items:center; gap:8px; padding:6px 8px; font-size:.85em; background:#eef4fc; border-bottom:1px solid #8fa8d0; }
  .attach[hidden] { display:none; }
  .attach img { width:52px; height:52px; object-fit:cover; border:1px solid #8fa8d0; border-radius:4px; background:#fff; }
  .attach span { flex:1; }
  .attach button { width:32px; height:32px; font:inherit; background:linear-gradient(#fff,#e4ecf7); border:1px solid #9fb3d1; border-radius:5px; cursor:pointer; }
  .ph { display:block; max-width:62%; max-height:7.2em; margin:.3em 0 0 .9em; padding:.15em; background:#fff; border:.1em solid #7f9db9; object-fit:contain; }

  /* ---------- party wall: the messenger conversation, no input field ---------- */
  .stage-wrap { container-type:inline-size; }
  .stage { position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:8px; border:1px solid var(--line);
           background:#3a7bd5 var(--bliss) center / cover no-repeat; }
  .stage.wall-nudge { animation: wall-vibrate .55s linear; }
  @keyframes wall-vibrate { 0%,100% { transform:translate3d(0,0,0); } 15% { transform:translate3d(-.45vw,.22vh,0); } 30% { transform:translate3d(.45vw,-.22vh,0); } 45% { transform:translate3d(-.4vw,-.18vh,0); } 60% { transform:translate3d(.4vw,.18vh,0); } 75% { transform:translate3d(-.2vw,0,0); } }
  .wallwin { position:absolute; left:3cqw; right:3cqw; top:3cqw; bottom:3cqw; font-size:1.8cqw; }
  .wallwin.nudge { animation:nudge .55s linear; }
  @keyframes nudge { 0%,100% { transform:none; } 15% { transform:translate(-.7cqw,.3cqw); } 30% { transform:translate(.7cqw,-.3cqw); } 45% { transform:translate(-.6cqw,-.3cqw); } 60% { transform:translate(.6cqw,.3cqw); } 75% { transform:translate(-.3cqw,0); } }
  .body { flex:1; min-height:0; display:flex; gap:.6em; padding:.6em; }
  .left { flex:1; min-width:0; display:flex; flex-direction:column; gap:.5em; }
  .chat { flex:1; min-height:0; overflow-y:auto; background:#fff; border:.08em solid #7f9db9; padding:.6em .8em; scroll-behavior:smooth; scrollbar-width:thin; font-size:1.05em; line-height:1.3; }
  .right { width:9em; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:.5em; }
  .right .big, .right .duck { flex:none; width:100%; aspect-ratio:1; }
  .tools { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
  .tools button { font:inherit; font-size:.9rem; padding:7px 12px; border-radius:8px; border:1.5px solid var(--line); background:var(--panel); color:var(--text); cursor:pointer; }
  /* ---------- scrolling through the whole history ---------- */
  .m.old { animation:none; }
  .chip { position:sticky; bottom:.4em; display:block; margin:.3em .2em 0 auto; padding:.4em .9em; font:inherit; font-size:.85em; color:#fff; background:linear-gradient(#3d95ff,#0058e6); border:.08em solid #fff; border-radius:2em; box-shadow:0 .2em .6em rgba(0,0,0,.4); cursor:pointer; }
  .chip[hidden] { display:none; }
  .ph.fake { display:flex; align-items:center; justify-content:center; width:9.6em; height:7.2em; max-width:none; }
  .ph.fake span { font-size:2.6em; }
  /* File menu */
  .menu { position:relative; }
  .menu [role="button"] { cursor:default; padding:0 .3em; }
  .menu [role="button"]:hover, .menu [role="button"]:focus-visible { background:#316ac5; color:#fff; outline:none; }
  .dd { position:absolute; left:.4em; top:100%; z-index:60; min-width:13em; background:#fff; border:.08em solid #7f9db9; box-shadow:.2em .3em .6em rgba(0,0,0,.35); }
  .dd[hidden] { display:none; }
  .dd button { display:block; width:100%; text-align:left; font:inherit; font-size:1.1em; padding:.45em .9em; color:#000; background:none; border:0; cursor:pointer; }
  .dd button:hover, .dd button:focus-visible { background:#316ac5; color:#fff; outline:none; }

  /* ---------- guestbook: the "Message History" window ---------- */
  body[data-view="book"] main { grid-template-columns:minmax(0,1100px); justify-content:center; }
  body[data-view="book"] #guestCol, body[data-view="book"] #wallCol, body:not([data-view="book"]) #bookCol { display:none; }
  .bookwin { font-size:14px; height:min(80vh,780px); }
  .bk-stats { display:flex; flex-wrap:wrap; gap:8px; padding:8px 10px 0; }
  .bk-stat { flex:1 1 110px; padding:6px 10px; background:#fff; border:1px solid #7f9db9; }
  .bk-stat b { display:block; font-size:1.5em; color:#1a3b8c; }
  .bk-stat span { font-size:.8em; color:#555; }
  .bk-tools { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:8px 10px; }
  .bk-tools input[type="search"], .bk-tools select { font:inherit; font-size:14px; padding:6px 8px; color:#000; background:#fff; border:1px solid #7f9db9; }
  .bk-tools input[type="search"] { flex:1 1 170px; min-width:0; }
  .seg { display:flex; }
  .seg button, .btn2 { font:inherit; font-size:.9em; padding:6px 10px; color:#1d4c9e; background:linear-gradient(#fff,#e4ecf7); border:1px solid #9fb3d1; cursor:pointer; }
  .seg button { border-radius:0; margin-left:-1px; } .seg button:first-child { border-radius:4px 0 0 4px; margin:0; } .seg button:last-child { border-radius:0 4px 4px 0; }
  .btn2 { border-radius:4px; }
  .seg button[aria-pressed="true"] { font-weight:700; background:linear-gradient(#cfdcf3,#fff); }
  .bk-main { flex:1; min-height:0; display:flex; gap:8px; padding:0 10px 8px; }
  .bk-nav { width:150px; flex:none; overflow-y:auto; display:flex; flex-direction:column; background:#fff; border:1px solid #7f9db9; }
  .bk-nav button { text-align:left; font:inherit; font-size:.85em; padding:6px 8px; color:#1a3b8c; background:none; border:0; border-bottom:1px solid #e6eefa; cursor:pointer; }
  .bk-nav button:hover { background:#e8effa; }
  .bk-list { flex:1; min-width:0; position:relative; overflow-y:auto; padding:0 10px 10px; background:#fff; border:1px solid #7f9db9; }
  .bk-h { position:sticky; top:0; z-index:1; margin:0 -10px 4px; padding:5px 10px; font-size:.9em; color:#1a3b8c; background:#e8effa; border-bottom:1px solid #b9c9e8; }
  .bk-row { display:flex; gap:8px; align-items:flex-start; padding:5px 0; border-bottom:1px dotted #d6dfef; }
  .bk-t { min-width:3.2em; padding-top:.2em; font-size:.8em; color:#888; }
  .bk-b { flex:1; min-width:0; overflow-wrap:anywhere; }
  .bk-b b { color:#1a3b8c; }
  .bk-ph { display:block; max-width:100%; max-height:7em; margin-top:.3em; border:1px solid #7f9db9; }
  .bk-ph.fake { display:flex; align-items:center; justify-content:center; width:9em; height:6.5em; }
  .bk-ph.fake span { font-size:2.4em; }
  .bk-list.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; align-content:start; }
  .bk-list.grid .bk-h { grid-column:1 / -1; }
  .tile { margin:0; font-size:.85em; }
  .tile .tile-ph { display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:4/3; object-fit:cover; border:1px solid #7f9db9; }
  .tile .tile-ph span { font-size:3em; }
  mark { background:#fff2a8; color:inherit; }
  .bk-empty { padding:2em 0; text-align:center; color:#666; }
  @media (max-width:700px) { .bk-main { flex-direction:column; } .bk-nav { width:auto; flex-direction:row; overflow-x:auto; overflow-y:hidden; } .bk-nav button { white-space:nowrap; border-bottom:0; border-right:1px solid #e6eefa; } }

  /* Consistent rounded boxes across the Party Wall and Guest Page windows. */
  .msnwin .to,
  .msnwin .chat,
  .msnwin .avbox,
  .msnwin .status,
  .gwin .gfrom input,
  .gwin .compose2,
  .gwin .ctool,
  .gwin .cfoot,
  .gwin .picker,
  .gwin .attach,
  .gwin .cbtn,
  .gwin .tab {
    border-radius:8px;
  }
  .gwin .ctool { border-bottom:0; }
  .gwin .cfoot { border-top:0; }
  .picker .msn-emo { display:flex; align-items:center; justify-content:center; min-width:0; min-height:36px; padding:3px; border:0; background:transparent; cursor:pointer; border-radius:4px; }
  .picker .msn-emo img { display:block; width:28px; height:28px; object-fit:contain; }
  .picker .msn-emo:hover, .picker .msn-emo:focus-visible { background:#dbe8fa; }
  .picker .msn-fallback { font:11px Tahoma,sans-serif; color:#163d6a; overflow-wrap:anywhere; }
  .inline-msn-emo { width:19px; height:19px; vertical-align:middle; display:inline-block; object-fit:contain; }
  .tx .inline-msn-emo { display:inline-block; width:22px; height:22px; object-fit:contain; vertical-align:middle; }
  .ci img.msn-toolbar-smile { width:19px; height:19px; object-fit:contain; display:block; }
  .ci img.msn-toolbar-nudge { width:28px; height:20px; object-fit:contain; display:block; }

  /* Approved Guest Page layout: no recipient field or avatar column; name field sits above compose. */
  .gwin .body { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr); }
  .gwin .to { display:none !important; }
  .gwin .gchat { grid-column:1; grid-row:1; align-self:start; max-height:min(38vh,280px); }
  .gwin .gfrom { grid-column:1; grid-row:2; width:100%; box-sizing:border-box; padding:3px 0; }
  .gwin .gfrom input { width:100%; min-width:0; box-sizing:border-box; }
  .gwin .compose2 { grid-column:1; grid-row:3; }
  .gwin .right { display:none !important; }


/* Production page layout */
.menu .fileMenu { color:inherit; text-decoration:none; cursor:pointer; }
.menu .fileMenu:hover { text-decoration:underline; }
body[data-view="guest"] main { padding:12px 20px 28px; }
body[data-view="wall"] { height:100dvh; overflow:hidden; background:#101b3d; }
body[data-view="wall"] main { display:block; width:100vw; height:100dvh; margin:0; padding:0; }
body[data-view="wall"] #wallCol,
body[data-view="wall"] .stage-wrap,
body[data-view="wall"] .stage { width:100%; height:100%; }
body[data-view="wall"] .stage { aspect-ratio:auto; border:0; border-radius:0; }
body[data-view="wall"] .wallwin { left:2cqw; right:2cqw; top:2cqw; bottom:2cqw; font-size:clamp(16px,1.45vw,28px); }
body[data-view="wall"] .wallwin .body { gap:.4em; padding:.4em; }
body[data-view="wall"] .wallwin .left { gap:.35em; }
body[data-view="wall"] .wallwin .right { width:8em; }
body[data-view="wall"] .wallwin .chat { font-size:.9em; line-height:1.1; padding:.35em .55em; }
body[data-view="wall"] .wallwin .m { margin-bottom:.35em; }
body[data-view="wall"] .wallwin .tx { margin-top:.2em; }
body[data-view="wall"] .wallwin .party-wall-toolbar-image { width:90%; margin-left:3%; margin-right:auto; }
body[data-view="wall"] .wall-status { padding:.18em .55em; font-size:.66em; line-height:1.15; }
body[data-view="book"] { min-height:100dvh; }
body[data-view="book"] main { display:block; width:min(100%,1280px); min-height:100dvh; margin:0 auto; padding:22px; }
body[data-view="book"] #bookCol { height:calc(100dvh - 44px); }
body[data-view="book"] .bookwin { width:100%; height:100%; }
body[data-view="book"] #list.bk-list { display:block; }
body[data-view="book"] #count.bk-stat { flex:1 1 140px; padding:6px 10px; }
body[data-view="book"] .item { display:flex; align-items:flex-start; gap:8px; padding:7px 2px; border:0; border-bottom:1px dotted #d6dfef; border-radius:0; background:transparent; box-shadow:none; }
body[data-view="book"] .meta { display:contents; }
body[data-view="book"] .name { color:#1a3b8c; }
body[data-view="book"] .item time { min-width:8em; padding-top:.2em; font-size:.8em; color:#888; }
body[data-view="book"] .message { flex:1; min-width:0; overflow-wrap:anywhere; font-size:.95em; }
body[data-view="book"] .photo { display:block; max-width:min(100%,420px); max-height:180px; margin-top:.35em; border:1px solid #7f9db9; border-radius:0; }
@media (max-width:700px) {
 body[data-view="book"] main { padding:8px; }
 body[data-view="book"] #bookCol { height:calc(100dvh - 16px); }
 body[data-view="book"] .item { flex-wrap:wrap; }
 body[data-view="book"] .item time { min-width:7em; }
}

/* Keep the guest phone window within the mobile viewport. */

@media (max-width:700px), (max-height:700px) {
  html.guest-page { height:100%; padding:0; overflow:hidden; }
  body[data-view="guest"] { height:100vh; height:100dvh; min-height:0; overflow:hidden; }
  body[data-view="guest"] main {
    height:100vh; height:100dvh; min-height:0;
    align-items:stretch; gap:0;
    padding:max(6px,env(safe-area-inset-top,0px)) 6px max(6px,env(safe-area-inset-bottom,0px));
  }
  body[data-view="guest"] #guestCol {
    width:min(100%,420px); height:100%; min-height:0; justify-self:center;
  }
  body[data-view="guest"] .phone {
    height:100%; min-height:0; padding:8px 5px;
    border-width:6px; border-radius:24px;
  }
  body[data-view="guest"] .gwin .gchat { max-height:min(30vh,240px); }
  body[data-view="guest"] .gwin .cmid textarea { min-height:min(200px,22vh); }
}

/* Keep shared photos readable on the projected Party Wall. */
body[data-view="wall"] .wallwin .ph {
  max-width:min(70%,800px);
  max-height:min(44vh,480px);
}