/* Shared viewport and scrolling rules. Keep the conversation and lists independent. */
html,body{width:100%;min-width:0;overflow-x:hidden}
.app,.list-pane,.chat{min-width:0;min-height:0}
.list-pane{overflow:hidden}
.list-top,.list-foot,.pinned-spaces,.message-results{flex-shrink:0}
.rows,.message-scroll,.blog-home{min-height:0;overflow-y:auto;overscroll-behavior:contain}
.titlebar>div,.head-title,.row-info,.user-profile-card>div{min-width:0}
.titlebar h1,.head-title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row,.bubble,.modal-box,.panel,.item{min-width:0}
.bubble-wrap{min-width:0}
.album-grid,.space-media-grid,.favorites-grid{min-width:0}
.album-item .media-image img,.space-media-item .media-image img{min-width:0}
.modal-box{min-width:0;max-width:calc(100vw - 20px)}
.modal-box img,.modal-box video{max-width:100%}
.modal-box form,.modal-box label,.settings-form label{min-width:0}
.pinned-spaces{max-height:min(18dvh,170px)}
.message-results:not([hidden]){max-height:min(36dvh,320px)}
.message-results:not([hidden])~.rows{min-height:100px}
.pinned-message{flex:none;max-width:100%}
.media-viewer-content{overflow:hidden}
.media-viewer-bar>div:first-child{flex:1}
.media-viewer-actions{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;flex:none}
.favorite-card .open-media{width:100%;min-width:0}
.favorite-card .media-image img,.favorite-card .video-preview img{width:100%;height:140px;min-height:0;object-fit:cover}
.user-profile-card{min-width:0;overflow-wrap:anywhere}
.account-tools>*{max-width:100%}
.member>*{min-width:0}
.blocked-row span{min-width:0;overflow-wrap:anywhere}

/* The standard desktop view has room for readable navigation. */
@media(min-width:1101px){
  .app{grid-template-columns:clamp(200px,17vw,244px) clamp(290px,26vw,386px) minmax(0,1fr)}
  .rail{padding:22px 12px 15px;overflow-y:auto;overscroll-behavior:contain}
  .brand{justify-content:flex-start;padding:0 9px}
  .brand strong{font-size:18px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rail nav{margin-top:28px}
  .rail .nav{font-size:13px;text-align:left;padding:11px 9px}
  .rail .nav span{width:27px;font-size:20px}
  .rail .nav b,.rail-bottom p,.identity .person{display:initial}
  .rail-bottom p{display:block}
  .rail .theme-toggle{font-size:13px;text-align:left;padding:10px 12px}
  .rail .theme-toggle:before,#identity .admin-shortcut:before,#identity .signin-rail:before{content:none}
  #identity .identity{display:flex;justify-items:normal;padding:9px;gap:9px}
  #identity .identity .avatar{display:grid}
  #identity #account{display:inline-block;margin-left:auto;padding:4px 7px}
  #identity .admin-shortcut{font-size:11px;margin-left:43px}
  #identity .signin-rail{display:block;font-size:13px;padding:12px}
  :root[data-layout="compact"] .app{grid-template-columns:clamp(180px,15vw,210px) 292px minmax(0,1fr)}
  :root[data-layout="wide"] .app{grid-template-columns:clamp(200px,17vw,244px) 260px minmax(0,1fr)}
  :root[data-layout="cards"] .app{grid-template-columns:clamp(200px,17vw,244px) minmax(380px,440px) minmax(0,1fr)}
  :root[data-layout="focus"] .app.conversation-open{grid-template-columns:clamp(200px,17vw,244px) minmax(0,1fr)}
}

/* Tablet keeps the list or conversation visible at a useful width. */
@media(min-width:721px) and (max-width:900px){
  .rail{overflow-y:auto}
  .app:not(.conversation-open) .chat{display:none}
  .app.conversation-open .chat{min-width:0}
}
@media(max-width:720px){
  .app{height:100dvh;min-height:0}
  .rail{width:min(300px,calc(100vw - 44px))}
  .list-pane,.chat{height:100dvh;min-height:0}
  .list-top{padding:calc(12px + env(safe-area-inset-top)) 12px 0}
  .search{margin-top:12px}
  .tabs{margin-top:9px;overflow-x:auto;scrollbar-width:thin}
  .tabs button{flex:1 0 auto;min-width:58px;padding:10px 4px}
  .pinned-spaces{max-height:min(14dvh,110px)}
  .message-results:not([hidden]){max-height:min(29dvh,230px)}
  .list-foot{height:auto;min-height:49px;padding-bottom:env(safe-area-inset-bottom)}
  .chat-head{min-width:0;padding:0 8px}
  .chat-head .head-title{min-width:0}
  .chat-head .icon{flex:none}
  .messages{padding:16px 10px}
  .bubble-wrap{max-width:96%}
  .composer-wrap{padding:8px 9px max(9px,env(safe-area-inset-bottom))}
  .composer{gap:5px;padding:5px}
  .composer textarea{padding:10px 5px}
  .modal-overlay{padding:max(8px,env(safe-area-inset-top)) 9px max(8px,env(safe-area-inset-bottom))}
  .modal-box{width:100%;max-height:calc(100dvh - 18px);padding:15px}
  .media-viewer{grid-template-columns:36px minmax(0,1fr) 36px}
  .media-viewer-bar{padding:8px;gap:5px}
  .media-viewer-bar strong{font-size:12px}
  .media-viewer-actions{gap:4px}
  .media-viewer-actions #mediaFavoriteBtn,#mediaClose{width:40px;height:40px}
  .media-viewer-nav{width:34px;height:44px}
  .space-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-bars{overflow-x:auto;min-width:0}
  .stat-bars>div{min-width:13px}
}
@media(max-width:380px){
  .chat-head .avatar-trigger{min-width:36px}
  .chat-head .icon{min-width:36px;padding:3px}
  .favorites-grid{grid-template-columns:1fr}
  .space-media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .join-bar{flex-wrap:wrap}
}

/* Light theme controls and content that otherwise inherit pale dark-theme text. */
[data-theme="light"] .modal-box input,[data-theme="light"] .modal-box select,[data-theme="light"] .modal-box textarea{color:#20394e}
[data-theme="light"] .search input{color:#20394e}
[data-theme="light"] .row,[data-theme="light"] .member{color:#20394e}
[data-theme="light"] .sender-profile{color:#17618e}
[data-theme="light"] .pinned-spaces>strong{color:#17618e}
[data-theme="light"] .link-preview small{color:#315e7d}
[data-theme="light"] .stat-card{border-color:#b9cbd9}
[data-theme="light"] .favorite-card small{color:#38546a}

/* Media albums: use the available chat width instead of forcing two columns. */
.bubble-wrap.album-wrap{width:min(calc(100% - 48px),740px);max-width:min(calc(100% - 48px),740px)}
.album-wrap .album-bubble{width:100%;min-width:0}
.album-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:10px 0 7px}
.album-grid.count-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.album-grid.count-3.album-visual{grid-template-columns:1.1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));aspect-ratio:1.55}
.album-grid.count-3.album-visual .album-item:first-child{grid-row:span 2}
.album-grid.count-3.album-visual.album-landscape{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1.2fr 1fr;aspect-ratio:1.35}
.album-grid.count-3.album-visual.album-landscape .album-item:first-child{grid-column:span 2;grid-row:auto}
.album-grid.count-3:not(.album-visual){grid-template-columns:repeat(3,minmax(0,1fr))}
.album-grid.count-3:not(.album-visual) .album-item:first-child{grid-row:auto}
.album-grid.count-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.album-grid.count-5.album-visual{grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));aspect-ratio:1.9}
.album-grid.count-5.album-visual .album-item:first-child{grid-row:span 2}
.album-grid.count-6{grid-template-columns:repeat(3,minmax(0,1fr))}
.album-grid.count-7,.album-grid.count-8,.album-grid.count-9{grid-template-columns:repeat(4,minmax(0,1fr))}
.album-grid.count-7.album-visual,.album-grid.count-8.album-visual,.album-grid.count-9.album-visual{grid-template-rows:repeat(3,minmax(0,1fr));aspect-ratio:1.7;grid-auto-flow:dense}
.album-grid.count-7.album-visual .album-item,.album-grid.count-8.album-visual .album-item,.album-grid.count-9.album-visual .album-item{aspect-ratio:auto;height:100%}
.album-grid.count-7.album-visual .album-item:first-child,.album-grid.count-8.album-visual .album-item:first-child,.album-grid.count-9.album-visual .album-item:first-child{grid-column:span 2;grid-row:span 2}
.album-grid.count-7.album-visual .album-item:last-child{grid-column:span 3}
.album-grid.count-8.album-visual .album-item:last-child{grid-column:span 2}
.album-grid.count-10{grid-template-columns:repeat(4,minmax(0,1fr))}
.album-grid .album-item{aspect-ratio:1;min-height:0;isolation:isolate}
.album-grid.count-3.album-visual .album-item,.album-grid.count-5.album-visual .album-item{aspect-ratio:auto;height:100%}
.album-grid .media-image,.album-grid .media-video,.album-grid .video-preview{display:block;width:100%;height:100%;min-height:0;aspect-ratio:auto;border-radius:0}
.album-grid .media-image img,.album-grid .video-preview img{display:block;width:100%;height:100%;min-height:0;max-height:none;aspect-ratio:auto;object-fit:cover}
.album-grid .media-video .media-caption{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:20px 6px 5px;background:linear-gradient(transparent,#071321c9);color:white;font-size:11px;pointer-events:none}
.album-grid .video-play{width:42px;height:42px;font-size:20px}
.album-grid .media-audio,.album-grid .media-file{height:100%;min-height:0;min-width:0;padding:8px;overflow:hidden}
.album-grid .media-audio{align-content:center}
.album-grid .media-audio span,.album-grid .media-file span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.album-grid .media-audio audio{max-width:100%}
.album-grid .album-actions{top:4px;right:4px;left:auto;bottom:auto;z-index:3}
.album-grid .reaction-badge{max-width:calc(100% - 10px);overflow:hidden}
.bubble-actions,.album-grid .album-actions{display:none}
.bubble-wrap{position:relative}
.bubble-wrap>.outside-options{position:absolute;top:50%;right:-44px;transform:translateY(-50%);z-index:4;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:#92abc0;font-size:23px;line-height:1;cursor:pointer}
.bubble-wrap.own>.outside-options{right:auto;left:-44px}
.bubble-wrap>.outside-options:hover,.bubble-wrap>.outside-options:focus-visible{background:var(--site-selected,#315675);color:inherit;outline:none}
[data-theme="light"] .bubble-wrap>.outside-options{color:#536d80}
.album-caption{margin:8px 2px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.45}
.upload-selected-files{display:flex;flex-wrap:wrap;gap:6px;max-height:120px;overflow:auto}
.upload-selected-files span{max-width:100%;padding:6px 9px;border-radius:7px;background:var(--site-bubble,#294359);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.message-menu a[role="menuitem"]{display:block;margin:0;padding:10px 12px;border-radius:7px;font-size:14px;color:inherit;text-decoration:none}
.message-menu a[role="menuitem"]:hover,.message-menu a[role="menuitem"]:focus-visible{background:var(--site-selected,#315675);outline:none}
#spaceAssets .open-media,#mediaContent .viewer-image{touch-action:pan-y;-webkit-touch-callout:none}

/* Viewer: image and video occupy the remaining screen height; controls stay visible. */
.media-viewer{grid-template-columns:clamp(44px,6vw,76px) minmax(0,1fr) clamp(44px,6vw,76px);grid-template-rows:auto minmax(0,1fr);background:#080d16f7}
.media-viewer-bar{min-height:60px;max-width:100%;padding:10px clamp(12px,2vw,28px);background:#111d2bd9;border-bottom:1px solid #ffffff25}
.media-viewer-bar strong{max-width:100%}
.media-viewer-content{height:100%;min-height:0;padding:10px;overflow:hidden}
.media-viewer-content .viewer-image,.media-viewer-content video{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 92px - env(safe-area-inset-top) - env(safe-area-inset-bottom));object-fit:contain;border-radius:4px}
.media-viewer-content video{width:min(100%,1200px);background:#05090f}
.media-viewer-nav{width:44px;height:56px;background:#ffffff24!important;touch-action:manipulation}
.media-viewer-nav:hover,#mediaClose:hover,#mediaSaveBtn:hover,#mediaHeartBtn:hover{background:#ffffff3b!important}
.media-viewer-actions #mediaSaveBtn,.media-viewer-actions #mediaHeartBtn{min-width:42px;height:42px;font-size:25px;line-height:1;white-space:nowrap}
.media-viewer-actions #mediaHeartBtn span{font-size:12px;vertical-align:middle}
.media-viewer-actions #mediaHeartBtn.active{color:#ff819e;background:#8a36524a}
.media-viewer-actions #mediaSaveBtn.active{color:#ffd78b;background:#916e3452}
.media-viewer-content .media-download{z-index:2;bottom:14px;right:14px}
#mediaStatus{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(min-width:721px) and (max-width:1100px){
  .bubble-wrap.album-wrap{width:min(calc(100% - 48px),640px);max-width:min(calc(100% - 48px),640px)}
}
@media(max-width:720px){
  .bubble-wrap{max-width:calc(100% - 46px)}
  .bubble-wrap.album-wrap{width:min(calc(100% - 46px),620px);max-width:calc(100% - 46px)}
  .album-wrap .album-bubble{padding:8px}
  .album-grid{gap:3px;margin:8px 0 5px}
  .album-grid.count-7.album-visual,.album-grid.count-8.album-visual,.album-grid.count-9.album-visual{aspect-ratio:1.05}
  .album-grid.count-10{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bubble-wrap>.outside-options{right:-44px;width:44px;height:44px}
  .bubble-wrap.own>.outside-options{left:-44px}
  .album-grid .video-play{width:34px;height:34px;font-size:17px}
  .album-grid .media-video .media-caption{font-size:10px}
  .media-viewer{grid-template-columns:40px minmax(0,1fr) 40px}
  .media-viewer-bar{min-height:55px;padding:7px 9px}
  .media-viewer-actions #mediaSaveBtn,.media-viewer-actions #mediaHeartBtn{min-width:38px;width:38px;height:40px;font-size:23px}
  .media-viewer-content{padding:4px}
  .media-viewer-content .viewer-image,.media-viewer-content video{max-height:calc(100dvh - 76px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
  .media-viewer-nav{width:38px;height:48px}
  .media-viewer-content .media-download{bottom:8px;right:8px}
}
@media(max-width:380px){
  .album-grid.count-3.album-visual{aspect-ratio:1.25}
  .album-grid.count-5.album-visual{aspect-ratio:1.45}
  .album-grid .media-audio audio{height:32px}
  .media-viewer{grid-template-columns:34px minmax(0,1fr) 34px}
  .media-viewer-nav{width:32px}
}
/* Room features: inherit website palette unless the owner sets a color. */
#modal.open.above-media{z-index:90}#modal .modal-box{max-height:calc(100dvh - 30px);overflow-y:auto}.message-menu{max-height:calc(100dvh - 16px);overflow-y:auto}#mediaContextMenu,#spaceContextMenu{z-index:100}
#chat .message-scroll,.appearance-preview{background-color:var(--room-background,var(--site-chat,#192d3e))}
#chat .bubble,.appearance-preview .bubble{background-color:var(--room-bubble,var(--site-bubble,#294359));color:var(--room-text,inherit)}
#chat .own .bubble,.appearance-preview .own .bubble{background-color:var(--room-own-bubble,var(--site-selected,#31657a))}
[data-bubble-shape="round"] .bubble{border-radius:24px!important}[data-bubble-shape="square"] .bubble{border-radius:0!important}[data-bubble-shape="soft"] .bubble{border-radius:8px!important}
[data-sender-style="bold"] .sender-profile{font-weight:800}[data-sender-style="accent"] .sender-profile{color:var(--site-accent,#78bce9)}[data-sender-style="badge"] .sender-profile{border-radius:20px;padding:4px 10px;background:color-mix(in srgb,var(--site-accent,#78bce9) 18%,transparent)}
#chat[data-room-pattern="dots"] .message-scroll,.appearance-preview[data-room-pattern="dots"]{background-image:radial-gradient(#8098ab33 1px,transparent 1px);background-size:20px 20px}
#chat[data-room-pattern="grid"] .message-scroll,.appearance-preview[data-room-pattern="grid"]{background-image:linear-gradient(#8098ab22 1px,transparent 1px),linear-gradient(90deg,#8098ab22 1px,transparent 1px);background-size:24px 24px}
.system-notice{display:flex;align-items:center;gap:12px;align-self:stretch;text-align:center;font-size:12px;line-height:1.6;color:inherit;opacity:.75;margin:10px 0}.system-notice:before,.system-notice:after{content:'';flex:1;min-width:15px;border-top:1px solid currentColor;opacity:.3}.system-notice span{max-width:80%}
.forward-destinations,.public-user-spaces{display:grid;gap:8px;max-height:45dvh;overflow:auto}.forward-destination,.profile-space{display:flex!important;align-items:center;gap:12px;padding:12px;border:1px solid #8098ab44;border-radius:12px;background:transparent;color:inherit;text-align:left}.forward-destination input{width:auto!important}.forward-destination .avatar,.profile-space .avatar{flex:none;width:42px;height:42px}.forward-destination small,.profile-space small{display:block;opacity:.65;margin-top:4px}.forward-destination:has(input:checked){border-color:var(--site-accent,#78bce9);background:color-mix(in srgb,var(--site-accent,#78bce9) 12%,transparent)}
.appearance-colors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.color-controls{display:flex;gap:6px;align-items:center}.color-controls input[type=color]{width:40px!important;height:40px;padding:2px;flex:none}.color-controls input[name]{min-width:0}.clear-color{color:inherit;background:transparent;border:1px solid #8098ab44;border-radius:8px;padding:8px}.appearance-preview{padding:18px;border:1px solid #8098ab44;border-radius:12px;display:flex;flex-direction:column;gap:12px}.appearance-preview .bubble{max-width:85%}.appearance-preview .own{align-self:flex-end}.appearance-history{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:1px solid #8098ab33;font-size:12px}.danger{color:#f36f7b!important}.upload-draft{width:100%;margin-top:8px;color:inherit!important;white-space:normal}.composer [hidden]{display:none!important}
@media(max-width:600px){.appearance-colors{grid-template-columns:1fr}.forward-destination,.profile-space{min-height:58px}.appearance-history{flex-wrap:wrap}}
.return-location{display:flex;align-items:center;gap:5px;flex:none;width:auto;white-space:nowrap;font-size:13px}.return-location span{font-size:11px}@media(max-width:600px){.return-location{min-width:36px;padding:6px}.return-location span{display:none}}