:root{color-scheme:dark;--shell-bg:#0d1520;--shell-panel:#182332;--shell-text:#edf4ff;--shell-muted:#b3c2d7;--shell-line:rgba(185,210,242,.24);--shell-active:rgba(100,169,255,.22);--shell-glass:rgba(19,34,53,.42);--shell-shine:rgba(227,243,255,.08);--shell-input:rgba(7,17,30,.28);--shell-shadow:rgba(0,8,21,.28)}
body.local-light{color-scheme:light;--shell-bg:#eef2f7;--shell-panel:#f8fafc;--shell-text:#17283d;--shell-muted:#475f79;--shell-line:rgba(76,110,154,.22);--shell-active:rgba(83,147,233,.16);--shell-glass:rgba(248,252,255,.34);--shell-shine:rgba(255,255,255,.3);--shell-input:rgba(245,250,255,.48);--shell-shadow:rgba(47,74,111,.14)}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--shell-bg);color:var(--shell-text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Meiryo,sans-serif}
[hidden]{display:none!important}button,input{font:inherit}button{color:var(--shell-text);background:transparent;border:1px solid var(--shell-line);border-radius:999px;cursor:pointer;touch-action:manipulation}button:focus-visible,input:focus-visible{outline:2px solid #70a9f3;outline-offset:1px}button:hover{background:var(--shell-active)}
#multiroomShell{position:fixed;inset:0;height:auto;min-height:0;display:flex;flex-direction:column;padding:0;background:radial-gradient(ellipse at 20% 0%,rgba(86,160,235,.14),transparent 65%),var(--shell-bg)}
.tab-topbar{flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px;position:absolute;z-index:10;top:calc(env(safe-area-inset-top) + 3px + var(--for314-pwa-tab-shift,0px));left:8px;right:8px;height:31px;margin:0;border:1px solid var(--shell-line);border-radius:999px;background:linear-gradient(155deg,var(--shell-shine),transparent 60%),var(--shell-glass);box-shadow:inset 0 1px 0 var(--shell-shine),0 3px 12px var(--shell-shadow);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:1px 4px;min-width:0}
.tab-toolbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px;min-width:0}
.room-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(54px,1fr);gap:4px;min-width:0;max-width:100%;overflow:auto;scrollbar-width:none}.room-tab-wrap{display:flex;align-items:center;min-width:0;border:1px solid transparent;border-radius:999px}.room-tab-wrap.active{background:var(--shell-active);border-color:rgba(100,167,254,.6);box-shadow:inset 0 1px 0 var(--shell-shine)}.room-tab{flex:1;min-width:0;font-size:11px;padding:3px 6px;border:0;overflow:hidden;white-space:nowrap;display:flex;align-items:center;justify-content:center}.room-tab-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-tab-close{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:24px;padding:0;border:0;font-family:Arial,sans-serif;font-size:15px}.unread-count{display:inline-block;font-size:9px;background:#376cae;color:white;border-radius:9px;padding:0 4px;margin-left:3px}.room-tab-call-indicator{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;margin-left:3px;vertical-align:-2px;color:#34c759;filter:drop-shadow(0 0 3px rgba(52,199,89,.28))}.room-tab-call-indicator svg{display:block;width:12px;height:12px}.room-tab>.room-tab-call-indicator:first-child,#callRoom>.room-tab-call-indicator:first-child{margin-left:0;margin-right:1px}.room-tab.has-call{font-weight:650}#toggleTools{flex:none;border:0;font-size:19px;padding:0;width:26px;height:26px}#scrollTabsForward{flex:none;border:0;font-size:11px;font-weight:800;letter-spacing:-1px;padding:0;width:28px;height:26px}#callRoom{font-size:9px;color:var(--shell-text);max-width:90px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px 5px}
#roomTools{position:absolute;z-index:20;top:calc(env(safe-area-inset-top) + 39px + var(--for314-pwa-tab-shift,0px));right:8px;max-width:calc(100% - 16px);padding:13px;border:1px solid var(--shell-line);border-radius:20px;background:linear-gradient(145deg,var(--shell-shine),transparent 65%),var(--shell-glass);box-shadow:inset 0 1px 0 var(--shell-shine),0 12px 36px var(--shell-shadow);backdrop-filter:blur(20px) saturate(125%);-webkit-backdrop-filter:blur(20px) saturate(125%);display:flex;flex-wrap:wrap;gap:10px;width:330px}.room-tools-head{width:100%;display:flex;align-items:center;gap:12px}.room-tools-head h2{flex:1;margin:0;font-size:13px;font-weight:650;letter-spacing:.02em}#roomTools small{width:100%;font-size:10px;line-height:1.5;color:var(--shell-muted)}#roomTools button{padding:6px 10px;font-size:11px}#roomTools #closeRoomTools{display:flex;align-items:center;justify-content:center;width:27px;height:27px;padding:0;font-size:19px;background:var(--shell-input)}#openRoomForm{display:flex;gap:7px;width:100%}#newRoomId{flex:1;min-width:0;border:1px solid var(--shell-line);border-radius:13px;background:var(--shell-input);color:var(--shell-text);font-size:13px;padding:8px 10px}#newRoomId::placeholder{color:var(--shell-muted)}
.official-room-picker{width:100%;min-width:0}.official-room-picker-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 2px 5px}.official-room-picker-head h3{margin:0;font-size:11px;font-weight:700;letter-spacing:.02em}.official-room-picker-head span{font-size:9px;color:var(--shell-muted);white-space:nowrap}.official-room-list{width:100%;height:147px;max-height:147px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;border:1px solid var(--shell-line);border-radius:14px;background:var(--shell-input);padding:3px;scrollbar-width:thin}.official-room-list button.official-room-item{width:100%;height:39px;min-height:39px;display:flex;align-items:center;gap:9px;padding:5px 8px!important;border:0;border-radius:10px;text-align:left;font-size:11px!important;white-space:nowrap}.official-room-item+.official-room-item{margin-top:1px}.official-room-icon{width:24px;min-width:24px;text-align:center;font-size:14px}.official-room-name{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis}.official-room-item.is-open::after{content:"開いています";flex:none;font-size:8px;color:var(--shell-muted)}
#roomPanels{flex:1;min-height:0;position:relative;isolation:isolate}.room-panel{position:absolute;inset:0;contain:layout paint}.room-panel iframe{display:block;width:100%;height:100%;border:0;background:var(--shell-bg)}#emptyRooms{font-size:13px;text-align:center;color:var(--shell-muted);margin:40px 10px}#shellStatus{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 8px);left:50%;transform:translateX(-50%);max-width:90%;z-index:21;background:var(--shell-panel);border:1px solid var(--shell-line);border-radius:12px;padding:6px 12px;font-size:11px;pointer-events:none}#shellStatus:empty{display:none}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.tab-topbar,#roomTools{background:var(--shell-panel)}}
@media(prefers-reduced-transparency:reduce){.tab-topbar,#roomTools{background:var(--shell-panel);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(max-width:480px){.tab-topbar{grid-template-columns:minmax(0,1fr) auto;gap:3px;left:6px;right:6px}.room-tab{font-size:10px;padding-inline:4px}.room-tab-close{width:20px}.room-tab-wrap{min-width:0}.room-tab-wrap:not(.active) .room-tab-close{display:none}.tab-toolbar-actions{position:relative}#callRoom{display:none!important}}

/* Mobile input and browser zoom parity with the ordinary chat. */
html,body{touch-action:pan-x pan-y;-webkit-text-size-adjust:100%;overscroll-behavior:none}
#roomTools{top:calc(var(--multiroom-visible-top,0px) + env(safe-area-inset-top) + 39px + var(--for314-pwa-tab-shift,0px));max-height:max(90px,calc(var(--multiroom-visible-bottom,100dvh) - var(--multiroom-visible-top,0px) - env(safe-area-inset-top) - 55px));overflow-y:auto;overscroll-behavior:contain}
#shellStatus{bottom:calc(var(--multiroom-hidden-bottom,0px) + env(safe-area-inset-bottom) + 8px)}
@media(hover:none),(pointer:coarse){
  #newRoomId,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),textarea,select{font-size:max(16px,1em)!important}
}

/* v497 iOS standalone PWA full-canvas sizing
   The installed PWA can expose a root/layout height that is shorter than the
   physical standalone canvas. JS writes --for314-pwa-shell-height from the
   standalone screen geometry. Keep the tab bar at the same safe-area position,
   but let the room iframe run from y=0 to the true bottom of that canvas. */
html.for314-standalone-pwa,
html.for314-standalone-pwa body{
  height:var(--for314-pwa-shell-height,100dvh);
  min-height:var(--for314-pwa-shell-height,100dvh);
}
html.for314-standalone-pwa #multiroomShell{
  inset:0 0 auto 0;
  width:100%;
  height:var(--for314-pwa-shell-height,100dvh);
  min-height:0;
}
html.for314-standalone-pwa #roomPanels{
  position:absolute;
  inset:0;
  min-height:0;
}

/* v498: fixed chrome must not drag the iOS visual viewport while composing.
   The room-tab strip keeps horizontal panning, but a vertical swipe on the
   floating shell chrome is intentionally not a page-scroll gesture. */
.tab-topbar{touch-action:pan-x;overscroll-behavior:none}
.room-tabs{touch-action:pan-x;overscroll-behavior:contain}
html.for314-iphone-standalone-pwa{--for314-pwa-tab-shift:4px}


/* v503: up to 50 registered tabs. Five or fewer keep the original equal-width grid;
   six or more become a browser-like horizontal strip. */
.room-tabs.has-overflow-tabs{display:flex;grid-auto-flow:unset;grid-auto-columns:unset;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;touch-action:pan-x;overscroll-behavior-x:contain}
.room-tabs.has-overflow-tabs .room-tab-wrap{flex:0 0 clamp(82px,20vw,138px);scroll-snap-align:start}
.room-tabs.has-overflow-tabs::-webkit-scrollbar{display:none}

/* v579: a decorative SVG gravestone beside the cemetery tab label. */
.room-tab-graveyard-icon{display:inline-flex;flex:none;align-items:center;justify-content:center;width:14px;height:14px;margin-right:3px;color:inherit}
.room-tab-graveyard-icon svg{display:block;width:14px;height:14px}