div.overlay{justify-content:center;align-items:center;display:flex;position:fixed;inset:0;&.dimmed{background-color:var(--dimmed-overlay-background-color)}&.modal>div.modal-box{background-color:var(--background-color);max-width:min(var(--modal-max-width), 80vw);max-height:min(var(--modal-max-width), 80vh);border-radius:1rem;padding:1rem;display:flex;overflow:hidden;&.full-screen-mobile{@media screen and (width<=30rem){border-radius:0;width:100%;max-width:100%;height:100%;max-height:100%}}&>div.modal-box-inner{overflow:auto}}}div.lightbox{&>div.controls{top:calc(.5rem + var(--window-top-margin));z-index:1;display:flex;position:fixed;right:.5rem;&>button,&>a{color:var(--lightbox-button-color);width:3rem;height:3rem;&>svg{width:2rem;height:2rem}}}&>img{max-width:75%;max-height:75%;transition:rotate .2s}}div.emoji-picker,div.sticker-picker,div.gif-picker{background-color:var(--background-color);width:var(--image-picker-width);height:var(--image-picker-height);border:1px solid var(--border-color);box-shadow:0 0 1rem var(--modal-box-shadow-color);border-radius:1rem;flex-direction:column;display:flex;position:fixed;& div.emoji-search,& div.gif-search{border:1px solid var(--border-color);border-radius:.25rem;align-items:center;height:2rem;margin:.5rem;display:flex;&>input{border:none;border-radius:.25rem;outline:none;flex:1;padding:.5rem}&>button{border-top-left-radius:0;border-bottom-left-radius:0;width:2rem;height:2rem;padding:.25rem}}}div.gif-picker{width:32rem;&>div.gif-list{flex-wrap:wrap;flex:1;padding:0 1rem;display:flex;overflow-y:auto;&>div.gif-entry{cursor:var(--clickable-cursor);justify-content:center;max-width:10rem;display:flex;&:hover{background-color:var(--button-hover-color)}&>img{object-fit:contain;width:100%;padding:.5rem}}}& div.powered-by-footer{width:100%;margin-top:auto;margin-bottom:.5rem;&>img{max-width:100%}}}div.emoji-picker,div.sticker-picker{& div.emoji-category-bar{border-bottom:1px solid var(--border-color);max-height:calc(.5rem + 2.5rem * var(--image-picker-category-rows));flex-wrap:wrap;justify-content:center;padding-top:.5rem;display:flex;overflow:auto;&>button{box-sizing:border-box;border-bottom:2px solid #0000;border-bottom-right-radius:0;border-bottom-left-radius:0;width:2.125rem;height:2.5rem;padding-top:.25rem;&.visible{border-bottom:2px solid var(--primary-color)}&:hover{border-bottom:2px solid var(--primary-color-dark)}}}& div.emoji-list{flex-direction:column;flex:1;padding:0 1rem;display:flex;overflow-y:auto}& div.emoji-preview{border-top:1px solid var(--border-color);grid-template:"big name"1fr"big shortcode"1fr/5rem 1fr;height:4.5rem;display:grid;&>div.big-emoji{grid-area:big;justify-content:center;align-items:center;font-size:2.5rem;display:flex;&>img{object-fit:contain;width:3rem;height:3rem}}&>div.emoji-name{grid-area:name;align-items:end;font-weight:700;display:flex}&>div.emoji-shortcode{color:var(--semisecondary-text-color);text-wrap:nowrap;text-overflow:ellipsis;grid-area:shortcode;overflow:hidden}}& div.emoji-category{content-visibility:auto;contain:size;width:100%}& div.emoji-category-list{flex-wrap:wrap;width:100%;display:flex}& h4.emoji-category-name{align-items:center;margin:0;display:flex;&>span{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}&>button{margin-left:.25rem;padding:.25rem .5rem;font-size:.8rem}}& button.emoji-category-icon{display:block}& button.emoji-category-icon>img,& button.emoji>img{object-fit:contain;width:1.5rem;height:1.5rem}& button.emoji{content-visibility:auto;width:2.5rem;height:2.5rem;padding:0;font-size:1.25rem;&.selected{border:1px solid var(--emoji-selected-border-color);opacity:.8}}& button.sticker{width:5rem;height:5rem;&>img{object-fit:contain;box-sizing:border-box;width:100%;height:100%;padding:.5rem}}& button.freeform-react{width:100%;margin-top:auto;margin-bottom:.25rem;padding:.25rem}}@media screen and (width<=37.5rem){div.emoji-picker,div.gif-picker,div.sticker-picker{border-radius:0;width:100%;height:calc(100% - 3rem);inset:var(--window-top-margin) 0 3rem 0!important}div.gif-picker>div.gif-list>div.gif-entry{max-width:33%}}@media screen and (width<=30rem){div.gif-picker>div.gif-list>div.gif-entry{max-width:50%}}@media screen and (width<=20rem){div.gif-picker>div.gif-list>div.gif-entry{max-width:100%}}div.event-hover-menu{border:1px solid var(--border-color);border-radius:.5rem;padding:.125rem;position:absolute;top:-1.5rem;right:.5rem;&>button{width:2rem;height:2rem}}div.event-hover-menu,div.event-fixed-menu{background-color:var(--background-color);z-index:1;gap:.25rem;display:flex}div.event-fixed-menu{flex-direction:row-reverse;justify-content:right;padding:.25rem;overflow:auto hidden;&>div.vertical-line{background-color:var(--border-color);flex-shrink:0;width:1px}&>button{flex-shrink:0;width:3rem;height:3rem;&.redact-button{color:var(--error-color)}}}div.context-menu{background-color:var(--background-color);border:1px solid var(--border-color);box-shadow:0 0 1rem var(--modal-box-shadow-color);border-radius:.5rem;flex-direction:column;display:flex;position:fixed;&>hr{opacity:.2;margin:0}&>.context-menu-item,&>button{text-align:left;border-radius:0;justify-content:left;gap:.5rem;padding:.5rem .75rem;&>svg{width:1.5rem;height:1.5rem}&:first-child{border-radius:.5rem .5rem 0 0}&:last-child{border-radius:0 0 .5rem .5rem}&.redact-button{color:var(--error-color)}}&.event-context-menu,&.room-list-menu{width:10rem}}pre.json-view{white-space:pre-wrap;overflow-wrap:anywhere;margin:0;& ul,& ol{margin:0;&>li{list-style-type:none}}& span.json-collapsed{-webkit-user-select:none;user-select:none}& span.button{padding:0 .25rem;display:inline-flex;&:before{content:attr(data-symbol)}}@media screen and (width>=800px){& li.json-object-entry:has(>span.json-comma-container>span.json-string){display:flex;& span.json-object-key{white-space:nowrap}& span.json-object-entry-colon{white-space:pre}}}}div.space-list-menu{&>div.space-list-child{align-items:center;height:2.5rem;padding:0 .5rem;display:flex;&:hover,&:focus{background-color:var(--room-list-entry-hover-color)}&>img{clip-path:url(#squircle);border-radius:0;width:2rem;height:2rem}}}div.url-preview{background-color:var(--url-preview-background-color);border:1px solid var(--url-preview-background-color);border-radius:.5rem;flex-shrink:0;margin:.5rem 0;display:grid;&.loading{height:fit-content;display:inherit;padding:1.5rem}grid-template:"title actions""description description""media media"/1fr;& div.title{white-space:nowrap;text-overflow:ellipsis;grid-area:title;margin:.5rem;font-weight:700;overflow:hidden;&.with-description{margin-bottom:0}}& div.actions{grid-area:actions;justify-content:center;align-self:center;width:2rem;height:2rem;display:flex;&>button{width:2rem;height:2rem;margin-right:.25rem}}& div.load-preview-button{grid-area:description;&>button{border-top-left-radius:0;border-top-right-radius:0;& svg{margin-right:.5rem}width:100%;height:2.5rem}}& div.loading-preview-indicator{grid-area:description;margin:0 auto}& div.description{-webkit-line-clamp:3;color:var(--semisecondary-text-color);-webkit-box-orient:vertical;grid-area:description;margin:0 .5rem .5rem;display:-webkit-box;overflow:hidden}&>div.media-container{background-color:var(--background-color);border-radius:0 0 .5rem .5rem;grid-area:media}&.inline{grid-template:"media title actions""media description description"/min-content auto 2rem;width:100%;max-width:20rem;max-height:6rem;&>div.inline-media-wrapper{background-color:var(--background-color);border-radius:.5rem 0 0 .5rem;grid-area:media;justify-content:center;align-items:center;padding:.5rem;display:flex}&>div.description{-webkit-line-clamp:2}}}div.timeline-event>div.read-receipts{grid-area:status;justify-content:right;align-items:end;margin-bottom:.125rem;display:flex;&>div.overflow-count{color:var(--secondary-text-color);-webkit-user-select:none;user-select:none;margin-right:.125rem;font-size:.75rem}&>div.avatars{margin-left:.35rem;display:flex;&>img{border:1px solid var(--background-color);background-color:var(--background-color);margin-left:-.35rem}@media screen and (width<=45rem){margin-left:.25rem}}&+div.event-send-status{display:none}}button.with-tooltip{position:relative;& div.button-tooltip{z-index:5;background-color:var(--background-color);border:1px solid var(--border-color);text-wrap:wrap;border-radius:.25rem;width:max-content;padding:.25rem;display:none;position:absolute;&.button-tooltip-top{margin-bottom:.25rem;bottom:100%}&.button-tooltip-bottom{margin-top:.25rem;top:100%}&.button-tooltip-left{margin-right:.25rem;right:100%}&.button-tooltip-right{margin-left:.25rem;left:100%}}&:hover>div.button-tooltip{display:block}}div.render-error-body{color:var(--semisecondary-text-color);font-style:italic}div.decryption-error-body{align-items:center;display:flex;&>svg{height:20px;color:var(--error-color)}}div.redacted-body,div.decryption-pending-body{color:var(--secondary-text-color);align-items:center;display:flex;&>svg{height:20px}}div.member-body{& span.name,& span.reason{unicode-bidi:isolate}& img{margin-bottom:-.125rem}}div.room-avatar-body{align-items:center;gap:.25rem;display:flex}div.message-text{&.plaintext-body{white-space:pre-wrap}&.big-emoji-body{font-size:3rem}&.notice-message{opacity:.6}&.emote-message:before{content:"* " attr(data-event-sender) " "}}div.html-body{overflow:hidden;& a.hicli-matrix-uri-user:not(.hicli-matrix-uri-plaintext),& a.hicli-matrix-uri-room-alias:not(.hicli-matrix-uri-plaintext){background-color:var(--pill-background-color);color:inherit;text-wrap:nowrap;cursor:var(--clickable-cursor);text-overflow:ellipsis;vertical-align:bottom;border-radius:1rem;max-width:15rem;padding:0 .25rem;display:inline-block;overflow:hidden;text-decoration:none!important}& img.hicli-custom-emoji{vertical-align:bottom;width:auto;max-width:5rem;height:2rem}& img.hicli-sizeless-inline-img{width:auto;max-width:5rem;height:1.5rem}& span.spoiler-reason{color:var(--secondary-text-color);font-size:.8em;&:before{content:"("}&:after{content:") "}}& span.hicli-spoiler{filter:blur(4px);cursor:var(--clickable-cursor);transition:filter .5s;&.spoiler-revealed{filter:none;cursor:initial}&:not(.spoiler-revealed) a{pointer-events:none}}& table{overflow-wrap:initial}& blockquote{border-left:2px solid var(--blockquote-border-color);padding-left:.5rem}& pre{tab-size:4;width:100%;max-height:max(50vh,400px);padding-bottom:.5rem;overflow:auto;&.chroma{& span.line>span.ln{-webkit-user-select:initial;user-select:initial;&:before{content:attr(data-linenum)}}}}& code.hicli-inline-code{background-color:var(--code-background-color);border-radius:.25rem;padding:.125rem .25rem}& h1,& h2,& h3,& h4,& h5,& h6{margin:0 0 .5rem}& h1,& h2{font-size:1.5rem}& h3{font-size:1.25rem}& ul,& ol,& dl,& table,& pre,& blockquote{&:not(:last-child){margin:0 0 .25rem}&:last-child{margin:0}}& p{&:not(:last-child){margin:0 0 1rem}&:last-child{margin:0}}}div.media-container{max-width:100%;&>div.placeholder{width:100%;height:100%;position:relative;&>div.empty-placeholder{background-color:var(--media-placeholder-default-background);width:100%;height:100%}&>div.placeholder-reason,&>div.placeholder-spinner{text-align:center;min-width:min(90%,5rem);max-width:90%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}&>div.placeholder-reason{background-color:var(--media-placeholder-button-background);cursor:var(--clickable-cursor);-webkit-user-select:none;user-select:none;border-radius:.25rem;padding:.5rem}&:has(>div.empty-placeholder)+img{filter:blur(16px)}&+img{z-index:-1;position:absolute;top:0}}&>a{color:inherit;align-items:center;text-decoration:none;display:flex}&>img,&>video{max-width:100%;max-height:100%;&.errored:before{display:none}&.errored:after{text-align:center;height:100%;color:var(--error-color);content:"Failed to load image";background-color:var(--media-placeholder-default-background);justify-content:center;align-items:center;display:flex}}&>video{width:100%}}iframe.location-container.google{border:none;width:100%;max-width:50rem;height:25rem}div.location-container.leaflet{max-width:50rem;height:25rem;&>div{width:100%;height:25rem}}div.location-importer{justify-content:center;align-items:center;display:flex}blockquote.reply-body{border-left:2px solid var(--reply-border-color);margin:0 0 .25rem;padding:.25rem .5rem;&.sender-color-null{--reply-border-color:var(--blockquote-border-color)}&.sender-color-0{--reply-border-color:var(--sender-color-0)}&.sender-color-1{--reply-border-color:var(--sender-color-1)}&.sender-color-2{--reply-border-color:var(--sender-color-2)}&.sender-color-3{--reply-border-color:var(--sender-color-3)}&.sender-color-4{--reply-border-color:var(--sender-color-4)}&.sender-color-5{--reply-border-color:var(--sender-color-5)}&.sender-color-6{--reply-border-color:var(--sender-color-6)}&.sender-color-7{--reply-border-color:var(--sender-color-7)}&.sender-color-8{--reply-border-color:var(--sender-color-8)}&.sender-color-9{--reply-border-color:var(--sender-color-9)}&.small{font-size:var(--small-font-size);height:calc(var(--small-font-size) * 1.5);border-left:none;grid-area:reply;gap:.25rem;padding:0;display:flex;overflow:hidden;&>div.reply-spine{margin-top:calc(var(--small-font-size) * .75 - 1px);margin-left:calc(var(--timeline-avatar-size) / 2 - 1px);width:calc(var(--timeline-avatar-size)/2 + var(--timeline-avatar-gap));border-left:2px solid var(--reply-border-color);border-top:2px solid var(--reply-border-color);border-top-left-radius:.5rem;flex-shrink:0}&>div.message-text{-webkit-line-clamp:1;font-size:var(--small-font-size)}}&.timeline-thread-msg{border-left-width:4px;grid-area:content;margin:0}& pre{display:inline;&.chroma .line{display:inline}}&.composer{margin:.5rem .5rem 0}&:hover,&.composer,&.timeline-thread-msg{&>div.message-text{color:var(--text-color)}}&>div.message-text{-webkit-line-clamp:2;max-height:5rem;color:var(--semisecondary-text-color);-webkit-user-select:none;user-select:none;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;& h1,& h2,& h3,& h4,& h5,& h6{font-size:1em}& img{vertical-align:baseline;height:1em}}&>div.reply-sender{text-wrap:nowrap;align-items:center;display:flex;&>span.sender-extra{color:var(--secondary-text-color);-webkit-user-select:none;user-select:none;align-items:center;margin-left:.25rem;display:inline-flex;&.thread-logo{font-size:.75rem}&>svg{margin-right:.25em}}&>div.sender-avatar{width:1rem;height:1rem;margin-right:.25rem;&>img{width:100%;height:100%}}&>div.per-message-event-sender{color:var(--secondary-text-color);margin:0 .25rem;font-size:.75rem;&>span.via{margin-right:.25rem}}&>div.buttons{gap:.25rem;margin-left:auto;display:flex;&>button{border-radius:.25rem;align-items:center;padding:0;display:flex;&>svg{width:24px;height:24px}}}}&>div.event-reactions{margin-bottom:0}}div.timeline-event{box-sizing:border-box;width:100%;max-width:100%;padding:var(--timeline-vertical-padding) var(--timeline-horizontal-padding);grid-template:"cmc                          cmc                        cmc      empty" 0 "avatar                       gap                        sender   sender" auto "avatar                       gap                        content  status" auto / var(--timeline-avatar-size) var(--timeline-avatar-gap) 1fr var(--timeline-status-size);contain:layout;margin-top:var(--timeline-message-gap);display:grid;&.highlight{background-color:var(--timeline-highlight-bg-color)}&.jump-highlight{background-color:var(--timeline-jump-bg-color)}&.jump-highlight-fadeout{transition:background-color 1s}&.soft-failed{background-color:var(--timeline-soft-failed-bg-color)}&.policy-server-spammy{background-color:var(--timeline-policy-server-spammy-bg-color)}&:hover:not(.no-hover),&.focused-event{background-color:var(--timeline-hover-bg-color);&.highlight{background-color:var(--timeline-highlight-hover-bg-color)}&.jump-highlight{background-color:var(--timeline-jump-hover-bg-color)}}&>div.sender-avatar{width:var(--timeline-avatar-size);height:var(--timeline-avatar-size);grid-area:avatar;margin-top:2px;&>img.avatar:not(.small){width:100%;height:100%}}&>div.event-sender-and-time{margin-bottom:var(--timeline-sender-name-content-gap);align-items:center;gap:var(--timeline-sender-name-timestamp-gap);text-wrap:nowrap;grid-area:sender;display:flex;&>span.event-sender{-webkit-user-select:none;user-select:none;cursor:var(--clickable-cursor);font-weight:700}&>div.per-message-event-sender{color:var(--secondary-text-color);font-size:.75rem;&>span.via{margin-right:.25rem}&>span.event-sender{-webkit-user-select:none;user-select:none;cursor:var(--clickable-cursor);font-weight:700}}&>span.event-time{color:var(--secondary-text-color);font-size:.7rem}}&>div.event-time-only{color:var(--secondary-text-color);grid-area:timestamp;align-items:end;max-height:1.25rem;margin-left:.25rem;font-size:.7rem;display:none}&>div.event-content{overflow-wrap:anywhere;contain:content;grid-area:content;overflow:hidden;&>div.event-edited{color:var(--secondary-text-color);-webkit-user-select:none;user-select:none;cursor:var(--clickable-cursor);font-size:.7rem}}&>div.event-send-status{grid-area:status;justify-content:right;align-items:end;max-height:1.25rem;display:flex;&>svg{width:1rem;height:1rem}&.error{color:var(--sent-error-color)}&.sending,&.sent{color:var(--sent-ok-color)}}&>div.context-menu-container{grid-area:cmc;display:none;position:relative}&:hover>div.context-menu-container,&>div.context-menu-container.force-open{display:block}&.same-sender{grid-template:"cmc                                cmc     empty" 0 "timestamp                          content status" auto / var(--timeline-avatar-total-size) 1fr var(--timeline-status-size);margin-top:var(--timeline-message-gap-same-sender);&>div.sender-avatar,&>div.event-sender-and-time{display:none}&>div.event-time-only{display:flex}}&.small-event{grid-template:"cmc                                cmc    cmc     empty" 0 "timestamp                          avatar content status" auto / var(--timeline-avatar-total-size) 1.5rem 1fr var(--timeline-status-size);&>div.sender-avatar{width:1.5rem;height:1.5rem}&>div.event-sender-and-time{display:none}&>div.event-time-only{display:flex}&+div.timeline-event.small-event{margin-top:var(--timeline-message-gap-small-event)}}&.same-thread{margin-top:var(--timeline-message-gap-same-thread);&.same-sender>blockquote.reply-body{padding:0 .5rem .25rem}&.same-sender div.reply-sender{display:none}}&.reply-above{grid-template:"cmc                          cmc                        cmc      empty" 0 "reply                        reply                      reply    empty" auto "avatar                       gap                        sender   sender" auto "avatar                       gap                        content  status" auto / var(--timeline-avatar-size) var(--timeline-avatar-gap) 1fr var(--timeline-status-size)}& div.url-previews{flex-direction:row;gap:1rem;display:flex;overflow-x:auto}}div.pinned-event>div.timeline-event,div.notification-panel-content>div.timeline-event{--timeline-status-size:0;--timeline-horizontal-padding:0;&>div.event-send-status,&>div.read-receipts{display:none}}span.event-sender{text-overflow:ellipsis;overflow:hidden;&.sender-color-0{color:var(--sender-color-0)}&.sender-color-1{color:var(--sender-color-1)}&.sender-color-2{color:var(--sender-color-2)}&.sender-color-3{color:var(--sender-color-3)}&.sender-color-4{color:var(--sender-color-4)}&.sender-color-5{color:var(--sender-color-5)}&.sender-color-6{color:var(--sender-color-6)}&.sender-color-7{color:var(--sender-color-7)}&.sender-color-8{color:var(--sender-color-8)}&.sender-color-9{color:var(--sender-color-9)}}div.event-reactions{flex-wrap:wrap;gap:.25rem;margin:.25rem 0;display:flex;&>div.reaction{background-color:var(--background-color);border:1px solid var(--border-color);white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;max-width:20rem;cursor:var(--clickable-cursor);border-radius:2rem;align-items:center;gap:.25rem;padding:0 .5rem;display:flex;overflow:hidden;&:hover{background-color:var(--light-hover-color)}&>img.reaction-emoji{height:1.5rem}}}blockquote.reply-body.small>div.reply-sender>span.event-sender{max-width:10rem}div.small-event>div.sender-avatar,blockquote.reply-body>div.reply-sender>div.sender-avatar{flex-shrink:0;align-items:center;margin-top:0;display:flex}div.date-separator{padding:calc(var(--timeline-message-gap)/2) 0;align-items:center;gap:.5rem;display:flex;&>hr{opacity:.2;flex:1}}form.confirm-message-modal{flex-direction:column;gap:.5rem;width:min(40rem,80vw);max-height:min(40rem,80vh);display:flex;&>h3{margin:0}&>div.timeline-event-container{border-left:2px solid var(--border-color);margin:.5rem 0;padding-left:.5rem;overflow:auto;&>div.timeline-event{margin:0;padding:0}}&>input{border:1px solid var(--border-color);border-radius:.25rem;outline:none;padding:1rem}&>div.confirm-buttons{justify-content:right;display:flex;&>button{padding:.5rem 1rem}}&>div.output-preview{&>span.no-select{-webkit-user-select:none;user-select:none}&>code{word-break:break-word}}&>div.toggle-sheet{grid-template-columns:1fr auto;display:grid;&>label,&>input{align-self:center}}}input.toggle{--transition-duration:.3s;--disabled-color:var(--secondary-text-color);--enabled-color:var(--primary-color-dark);cursor:var(--clickable-cursor);appearance:none;background-color:var(--background-color);border:1px solid var(--disabled-color);box-sizing:border-box;width:3.5em;height:2em;transition:background-color var(--transition-duration), border-color var(--transition-duration);border-radius:1.5em;padding:calc(.25em - 1px);display:block;&:after{content:"";background-color:var(--disabled-color);width:1.5em;height:1.5em;transition:margin-left var(--transition-duration), background-color var(--transition-duration);border-radius:50%;display:block}&:checked{border-color:var(--enabled-color);background-color:var(--enabled-color);&:after{background-color:var(--background-color);margin-left:1.5em}}}div.event-reactions-modal{grid-template-columns:auto 1fr;gap:.25rem .75rem;display:grid;&>div.emoji{justify-content:center;align-items:center;display:flex;&>img.custom-emoji{max-width:5rem;height:2rem}&>span.unicode-emoji{text-wrap:nowrap;max-width:10rem;font-size:1.5rem;overflow:hidden;&.long{font-size:.75rem}}}&>div.senders{flex-wrap:wrap;align-items:center;gap:0 .25rem;max-width:40rem;display:flex;&>div.reaction-sender{align-items:center;display:flex;&>img.avatar{margin-left:.125rem;margin-right:.25rem}&>button.delete-button{color:var(--secondary-text-color);width:1.25rem;height:1.25rem;margin:-.125rem;padding:.125rem}}}}form.media-upload-modal{flex-direction:column;max-height:100%;display:flex;&>h3{margin:0 0 .5rem}&>div.attachment-preview{flex-shrink:1;display:flex;overflow:hidden;&>img,&>video{max-width:100%;max-height:100%}}&>div.attachment-meta{grid-template-columns:auto 1fr;gap:.25rem;display:grid;@media screen and (width>=50rem){grid-template-columns:auto 1fr auto 1fr;&>div.meta-value-long{grid-column:span 3}}&>div.meta-value{align-items:center;gap:.25rem;display:flex;overflow:hidden;&>input[type=text]{border:1px solid #0000;outline:none;flex-grow:1;padding:0;&:focus{border-color:var(--primary-color)}}&>input[type=range]{max-width:calc(100% - 70px)}}}&>div.confirm-buttons{justify-content:right;display:flex;&>button{padding:.5rem 1rem;&.confirm-button:hover{background-color:var(--primary-color);color:var(--inverted-text-color)}}}}div.voice-recorder-box{padding:.5rem;overflow:visible!important}div.voice-recorder{overflow:visible!important;&>div.progress{flex-direction:column;justify-content:center;margin-bottom:.75rem;display:flex;position:relative;&>div.bar{background-color:var(--primary-color);height:.25rem;position:absolute;bottom:-.25rem}}&>div.buttons{display:flex;@media screen and (width<=30rem){flex-direction:column}&>button{margin-bottom:.25rem;padding:.25rem 1rem .25rem .5rem;&>svg{width:2rem;height:2rem;margin-right:.25rem}&.cancel{color:var(--error-color)}}}}form.create-room-view{flex-direction:column;gap:1rem;width:100%;display:flex;& input,& select,& textarea,& .room-alias-container{box-sizing:border-box;border:1px solid var(--border-color);background-color:var(--background-color);border-radius:.25rem;width:100%;padding:.5rem;font-size:1em;&:hover{border-color:var(--primary-color)}&:focus{border-color:var(--primary-color-dark);outline:none}}& textarea{resize:vertical}& .room-alias-container{display:flex;&>input{border:none;border-radius:0;padding:0}}& div.form-fields{grid-template-columns:auto 1fr;align-items:center;gap:.5rem;display:grid;&>label{grid-column:1}&>input,&>select,&>textarea,&>.room-alias-container{grid-column:2;&#room-create-id{font-family:var(--monospace-font-stack)}}&>input[type=checkbox]{width:1.5rem;height:1.5rem;accent-color:var(--primary-color-dark);margin:0;padding:0}}& div.form-fields.item-list{grid-template-columns:1fr auto;gap:.25rem;&>div.item-list-header{grid-column:1/span 2;align-items:center;gap:.5rem;display:flex;&>button.item-list-add{padding:0 .5rem}}&>.item-list-item{grid-column:1}&>button.item-list-remove{grid-column:2;padding:.25rem}}& div.state-event-form{grid-template:"type stateKey""content content"1fr;gap:.25rem;margin-bottom:.5rem;display:grid;&>input{font-family:var(--monospace-font-stack)}&>input.state-event-type{grid-area:type}&>input.state-event-key{grid-area:stateKey}&>textarea.state-event-content{grid-area:content}}&>div.invite-user-ids{flex-direction:column;gap:.5rem;display:flex}&>button{padding:.5rem}&>div.error{border:2px solid var(--error-color);border-radius:.25rem;padding:.5rem}&>h2{margin:0}}div.create-room-view-modal{width:min(35rem,80vw);&>div.modal-box-inner{width:100%}}div.state-explorer-box{overflow:hidden!important}div.state-explorer{flex-direction:column;width:min(50rem,80vw);max-height:100%;display:flex;& h3,&>div.title-bar{margin:0 0 1rem}&>div.title-bar{align-items:center;gap:.25rem;display:flex;&>button{padding:.25rem .5rem;font-size:1.1rem;&:disabled{color:var(--text-color);font-weight:700}}}& input.search-field{border:1px solid var(--border-color);box-sizing:border-box;border-radius:.25rem;outline:none;width:100%;margin-bottom:1rem;padding:.5rem}& div.state-button-list{flex-wrap:wrap;gap:.5rem;display:flex;overflow:auto;&>button{border:1px solid var(--border-color);border-radius:.5rem;padding:.5rem}}&>div.nav-buttons{flex-wrap:wrap;gap:.5rem;margin-top:.5rem;display:flex;&>div.spacer{flex:1}&>label{align-items:center;display:flex}&>button{border:1px solid var(--border-color);border-radius:.5rem;padding:.5rem 1rem}}&.state-event-view{&>div.state-event-content{flex:1;overflow:auto;&>textarea{box-sizing:border-box;resize:vertical;border:1px solid var(--border-color);border-radius:.5rem;outline:none;width:100%;padding:.5rem;&:focus{border:1px solid var(--primary-color)}}}&>div.state-header>div.new-event-type{gap:.25rem;margin-bottom:.25rem;display:flex;&>input{border:1px solid var(--border-color);box-sizing:border-box;font-family:var(--monospace-font-stack);border-radius:.5rem;outline:none;flex:1;padding:.5rem;&:focus{border:1px solid var(--primary-color)}}}}}div.settings-view{& div.room-details{gap:.5rem;display:flex;& img.avatar{margin-top:.5rem}& div.room-name{text-overflow:ellipsis;text-wrap:nowrap;font-size:1.2rem;font-weight:700}& div.room-buttons{gap:.5rem;display:flex;& button{padding:.5rem 1rem;&.leave-room{&:hover,&:focus{background-color:var(--error-color);color:var(--inverted-text-color)}}}}}flex-direction:column;width:min(60rem,80vw);display:flex;& h2,& h3,& h4{margin:0}& summary>h3,& summary>h4{display:inline}& div.preference-table{grid-gap:.25rem;grid-template-columns:auto 1fr 1fr 1fr 1fr;display:grid;&>div.name{align-items:center;font-weight:700;display:flex}&>div.preference{align-items:center;max-width:10rem;display:flex;&.select-preference>select{min-width:0;padding:.25rem}&.string-preference>input,&.number-preference>input{border:1px solid var(--border-color);min-width:0;padding:.25rem}}}&>div.custom-css-input{flex-direction:column;gap:.5rem;margin-right:1rem;display:flex;&>div.header{gap:.5rem;display:flex}&>textarea{box-sizing:border-box;resize:vertical;border:1px solid var(--border-color);width:100%;height:10rem;min-height:3rem;font-family:var(--monospace-font-stack);outline:none}&>div.vscode-wrapper{inset:0;top:var(--window-top-margin);z-index:10;background-color:var(--background-color);position:fixed;&>div.loader{justify-content:center;align-items:center;display:flex;position:absolute;inset:0}}&>div.buttons{justify-content:right;gap:.5rem;display:flex;&>button{padding:.5rem 1rem;font-weight:700;&.delete:hover,&.delete:focus{background-color:var(--error-color);color:var(--inverted-text-color)}}}}&>div.key-export{flex-direction:column;gap:.5rem;max-width:25rem;margin:0 .5rem;display:flex;& button{box-sizing:border-box;width:100%;padding:.5rem}& hr{opacity:.2;width:100%;margin:0}& input{border:1px solid var(--border-color);border-radius:.5rem;padding:.5rem}&>div.export-buttons,&>form.import-buttons,&>div.key-backup-buttons{gap:.5rem;display:flex;&>form{width:100%}}}&>div.misc-buttons>button{padding:.5rem 1rem;display:block;&.logout{margin-top:2rem;&:hover,&:focus{background-color:var(--error-color);color:var(--inverted-text-color)}}}&>hr{opacity:.2;width:100%}}div.key-restore-modal-wrapper{width:100%;max-width:min(30rem,90vw)!important}div.key-restore-modal{flex-direction:column;gap:.25rem;width:100%;display:flex;& .status{font-weight:700}& .active-room-id{white-space:nowrap}& progress{box-sizing:border-box;width:100%}}div.event-context-loading{flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex}div.event-context-modal{--timeline-horizontal-padding:0;--timeline-status-size:2rem;width:100%;height:100%;&>div.modal-box-inner{width:100%;height:100%}& div.timeline-list{padding-bottom:0}}div.event-edit-history-wrapper{padding:0!important}div.event-edit-history-modal{--timeline-status-size:0;--timeline-horizontal-padding:0;box-sizing:border-box;min-width:20rem;padding:1rem;@media screen and (width<=30rem){min-width:100%;padding:.5rem}&>p{margin:0}}div.message-composer{margin:-1rem var(--timeline-horizontal-padding) 0;background-color:var(--composer-background-color);border:1px solid var(--border-color);z-index:1;min-height:2.25rem;box-shadow:0 0 1rem var(--modal-box-shadow-color);border-radius:.5rem;grid-area:input;overflow:hidden;& blockquote.reply-body>pre{text-wrap:auto!important}&.tombstoned,&.no-permission{min-height:unset;padding:.5rem;&>button{padding:.25rem}}&>div.input-area{align-items:center;margin-right:.25rem;display:flex;&>textarea{resize:none;line-height:1.25;font-family:var(--font-stack);border:none;outline:none;flex:1;height:auto;padding:.5rem}&>button{width:2rem;height:2rem;padding:.25rem;&>svg{width:1.5rem;height:1.5rem}}&>input[type=file]{display:none}@media screen and (width<=45rem){margin-right:0;&>textarea:not(:empty){padding:.5rem 0}}}&>div.composer-media,&>div.composer-location{justify-content:space-between;padding:.5rem .5rem 0;display:flex;&>button{width:2.5rem;height:2.5rem;padding:.5rem}}&>div.composer-location{height:15rem;&>div.location-container{width:100%;max-width:40rem;height:15rem;&>div{width:100%;height:15rem}}}&>div.url-previews{flex-direction:row;gap:1rem;margin:0 .5rem;display:flex;overflow-x:auto}&>label.mention-confirmations{align-items:center;margin:.5rem .5rem 0;display:flex;&>input[type=checkbox]{width:1rem;height:1rem;accent-color:var(--primary-color-dark);margin:0 .25rem 0 0}}}div.autocompletions-wrapper,div.command-argument-wrapper{grid-area:autocomplete;position:relative}div.autocompletions,div.command-arguments{bottom:1.25rem;left:var(--timeline-horizontal-padding);border:1px solid var(--border-color);box-shadow:0 0 1rem var(--modal-box-shadow-color);background-color:var(--background-color);border-radius:.5rem;max-width:30rem;max-height:20rem;padding:.5rem;position:absolute;overflow:auto;&.ac-command{max-width:calc(100% - 4rem);overflow-x:auto}&>.autocompletion-item{cursor:var(--clickable-cursor);contain-intrinsic-height:2rem;content-visibility:auto;border-radius:.25rem;align-items:center;gap:.25rem;height:2rem;padding:.25rem;display:flex;overflow:hidden;&.selected,&:hover{background-color:var(--light-hover-color)}&.ac-user{text-wrap:nowrap}&.ac-command{contain-intrinsic-height:unset;content-visibility:visible;height:auto;display:block;&>span,&>code{vertical-align:middle}&>img{vertical-align:middle;width:1.5rem;height:1.5rem;margin-right:.25rem}}&>img{object-fit:contain;width:1.5rem;height:1.5rem}}&.command-arguments{grid-gap:.25rem;grid-template-columns:auto auto;align-items:center;display:grid;& input[type=checkbox]{width:1.5rem;height:1.5rem;accent-color:var(--primary-color-dark);margin:0;padding:0}& input[type=text],& input[type=number]{border:1px solid var(--border-color);border-radius:.25rem;padding:.25rem;&:hover{border-color:var(--primary-color)}&:focus{border-color:var(--primary-color-dark);outline:none}}}}div.thread-view{--timeline-horizontal-padding:.5rem;--timeline-status-size:2rem;grid-template:"messageview"1fr"autocomplete"0"input""typing"/1fr;height:100%;display:grid;overflow:hidden;&>div.timeline-view{justify-content:unset}}div.right-panel{border-left:1px solid var(--border-color);padding-top:var(--window-top-margin);flex-direction:column;display:flex;overflow:hidden;&>div.right-panel-header{border-bottom:1px solid var(--border-color);box-sizing:border-box;height:3.5rem;vertical-align:center;justify-content:space-between;align-items:center;padding:0 .25rem;display:flex;& div.left-side{align-items:center;display:flex}& div.panel-name{margin-left:.25rem;font-weight:700}& button{width:2.5rem;height:2.5rem}}}div.right-panel-content{flex:1;overflow:auto}div.right-panel-content.pinned-messages{flex-direction:column-reverse;padding:.5rem;display:flex;&>div.pinned-event:not(:first-child){border-bottom:1px solid var(--border-color);padding-bottom:.5rem}&>div.empty{margin:auto}}div.right-panel-content.notifications{flex-direction:column;display:flex;overflow:hidden;&>div.controls{flex-shrink:0;padding:.5rem}&>div.notification-panel-content{flex-direction:column;height:100%;padding:.5rem;display:flex;overflow:auto;&.empty{justify-content:center;align-items:center}&.highlights-only{--timeline-highlight-bg-color:var(--background-color);--timeline-highlight-hover-bg-color:var(--timeline-hover-bg-color)}&>button.load-more{flex-shrink:0;height:3rem}}}div.right-panel-content.widgets{flex-direction:column;gap:.5rem;padding:.5rem;display:flex;&>button{width:100%;padding:.5rem}&>div.separator{flex:1}}div.right-panel-content.user{padding:1rem;& div.avatar-container{width:calc((var(--right-panel-width) - 4rem));height:calc((var(--right-panel-width) - 4rem));justify-content:center;align-items:center;margin:0 auto;padding:1rem;display:flex;&>img{width:100%;height:100%}}& div.displayname{text-align:center;-webkit-line-clamp:4;word-break:break-word;-webkit-box-orient:vertical;font-size:1.5rem;font-weight:700;display:-webkit-box;overflow:hidden}& div.userid{text-align:center;font-family:var(--monospace-font-stack);word-break:break-word;max-height:4rem;overflow:auto}& div.userid,& div.extended-profile,& div.devices,& div.user-moderation,& div.mutual-rooms,& div.errors{border-bottom:1px solid var(--border-color);margin-bottom:.5rem;padding-bottom:.5rem}& div.extended-profile{grid-template-columns:1fr 1fr;gap:.25rem;display:grid;&>input{box-sizing:border-box;border:0;border-bottom:1px solid var(--blockquote-border-color);width:100%;padding:0}&>button{grid-column:span 2;padding:.25rem}}& hr{opacity:.2;width:100%}& p{margin:.5rem 0}& h4{margin:0 0 .5rem}& h5{margin:0 0 .25rem}& button.show-more{width:100%;padding:.25rem 1rem}& .user-info-loader{justify-content:center;display:flex!important}& p.verified-message{gap:.25rem;font-weight:700;display:flex;&.verified{color:var(--primary-color-dark)}&.tofu-broken{color:#ff8c00}}& div.devices>details>summary>h4{display:inline-block}& button.action{justify-content:left;gap:.25rem;width:100%;padding:.5rem 1rem}& div.devices>details>ul{flex-direction:column;gap:.25rem;margin:0;padding:0;list-style-type:none;display:flex;& li.device{align-items:center;gap:.25rem;display:flex;&>.icon-wrapper{width:1.5rem;height:1.5rem;&.trust-blacklisted,&.trust-unverified.has-master-key{color:var(--error-color)}&.trust-cross-signed-untrusted,&.trust-unverified.no-master-key{color:#ff8c00}&.trust-verified,&.trust-cross-signed-verified{color:var(--primary-color)}&.trust-cross-signed-tofu{color:var(--primary-color-dark)}}}}& div.user-moderation{flex-direction:column;display:flex;& button.moderation-action{justify-content:left;gap:.5rem;width:100%;padding:.5rem;&.dangerous{color:var(--error-color)}&.positive{color:var(--primary-color)}}}& div.errors{flex-direction:column;gap:.5rem;display:flex;&>div.error{gap:.25rem;display:flex;&>p{margin:0}&>div.icon{color:var(--error-color);flex-shrink:0;margin-top:.125rem}}}}div.right-panel-content.thread{overflow:hidden}span.invited-indicator{opacity:.7;font-size:.7rem}div.right-panel-content.members{flex-direction:column;display:flex;overflow:hidden;&>input.member-filter{border:none;border-bottom:1px solid var(--border-color);box-sizing:border-box;outline:none;width:100%;padding:1rem}&>div.member-list{flex-direction:column;display:flex;overflow:auto;&>div.member{cursor:var(--clickable-cursor);content-visibility:auto;contain-intrinsic-height:3rem;grid-template:"avatar displayname"3rem/2.5rem 1fr;align-items:center;column-gap:.5rem;height:3rem;padding:.25rem;display:grid;&:hover{grid-template:"avatar displayname"1.75rem"avatar userid"1.25rem/2.5rem 1fr;&>div.user-id{align-self:start;display:block}&>div.displayname{align-self:end}}&>div.displayname,&>div.user-id{text-wrap:nowrap;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;overflow:hidden}&>div.displayname{grid-area:displayname}&>img.avatar{grid-area:avatar}&>div.user-id{font-family:var(--monospace-font-stack);opacity:.7;grid-area:userid;font-size:.75rem;display:none}&:hover,&:focus{background-color:var(--light-hover-color)}}&>button{border-radius:0;padding:.5rem}}}div.room-list-wrapper{contain:strict;background:var(--room-list-background);box-sizing:border-box;scrollbar-color:var(--room-list-scrollbar-color);grid-area:roomlist;grid-template:"spacebar search" var(--window-top-margin) "spacebar search" 3.5rem "spacebar roomlist" 1fr / 3rem 1fr;display:grid;overflow:hidden}div.room-list{background-color:var(--room-list-background-overlay);grid-area:roomlist;overflow-y:auto}div.space-bar{background-color:var(--space-list-background-overlay);scrollbar-width:none;padding-top:var(--window-top-margin);grid-area:spacebar;overflow:auto;&>div.space-entry{width:2rem;height:2rem;cursor:var(--clickable-cursor);border-radius:.25rem;margin:.25rem;padding:.25rem;&:hover,&:focus{background-color:var(--room-list-entry-hover-color)}&.active{background-color:var(--room-list-entry-selected-color)}&>svg{width:100%;height:100%}&>img.avatar{clip-path:url(#squircle);border-radius:0;width:100%;height:100%}&>div.room-entry-unreads{z-index:2;width:0;height:0;margin-left:auto;position:relative;&>div.unread-count{margin-top:.75rem;margin-right:.25rem;position:absolute}}}}div.room-search-wrapper{background-color:var(--room-list-search-background-overlay);width:100%;height:3.5rem;padding-top:var(--window-top-margin);grid-area:search;align-items:center;display:flex;&>input{box-sizing:border-box;background-color:#0000;border:none;outline:none;flex:1;height:3rem;padding:0 0 0 1rem}&>button{border-radius:0;width:2.5rem;height:2.5rem;color:var(--text-color)!important}}div.room-entry{-webkit-user-select:none;user-select:none;width:100%;cursor:var(--clickable-cursor);height:3rem;padding:var(--room-list-padding) 0;contain-intrinsic-height:calc(3rem + var(--room-list-padding) * 2);content-visibility:auto;contain:strict;gap:.25rem;display:flex;&:hover,&:focus{background-color:var(--room-list-entry-hover-color)}&.active{background-color:var(--room-list-entry-selected-color)}&>div.room-entry-left{width:3rem;height:3rem;&>img.room-avatar{margin:.25rem}}&>div.room-entry-right{flex-direction:column;justify-content:space-around;width:100%;display:flex;overflow:hidden;&>div.room-name{white-space:nowrap;text-overflow:ellipsis;font-weight:700;overflow:hidden}&>div.message-preview{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;&>span.sender-name{max-width:6rem;display:block;overflow:hidden}&>span.preview-text{display:block}}}}div.room-entry-unreads{justify-content:center;align-items:center;width:3rem;margin-right:.25rem;display:flex;&>div.unread-count{--unread-count-size:1rem;--unread-count-padding-inline:calc(var(--unread-count-size)/4);--unread-count-padding-block:calc(var(--unread-count-size)/8);border-radius:var(--unread-count-size);color:var(--unread-counter-text-color);-webkit-user-select:none;user-select:none;background-color:var(--unread-counter-message-bg);height:var(--unread-count-size);min-width:calc(var(--unread-count-size) - 2*(var(--unread-count-padding-inline) - var(--unread-count-padding-block)));padding-inline:var(--unread-count-padding-inline);padding-block:var(--unread-count-padding-block);justify-content:center;align-items:center;font-size:.75em;line-height:1;display:flex;&.big{--unread-count-size:1.5rem;font-size:1em;font-weight:700}&.marked-unread{background-color:var(--unread-counter-marked-unread-bg)}&.notified{background-color:var(--unread-counter-notification-bg)}&.highlighted{background-color:var(--unread-counter-highlight-bg)}&.space{--unread-count-size:.75rem;background-color:var(--space-unread-counter-message-bg);&.notified{background-color:var(--space-unread-counter-notification-bg)}&.highlighted{background-color:var(--space-unread-counter-highlight-bg)}}}}img.avatar{object-fit:cover;border-radius:50%;width:2.5rem;height:2.5rem;&.small{width:1rem;height:1rem}&.large{width:5rem;height:5rem}&.space{clip-path:url(#squircle);border-radius:0}}div.room-view.preview>div.preview-inner{flex-direction:column;align-items:center;gap:.5rem;width:100%;max-width:30rem;height:auto;max-height:100%;display:flex;&>img.avatar{border:1px solid var(--border-color);width:7.5rem;height:7.5rem}&>h2.room-name{max-height:6rem;margin:0;overflow-y:auto}&>div.mutual-rooms{width:100%;max-height:20rem;overflow:auto;&>h4{margin:.5rem 0 0}}&>div.error,&>div.member-count,&>div.inviter-info{align-items:center;gap:.25rem;display:flex}&>details.room-invite-meta{width:100%;&>table>tbody>tr>td:nth-of-type(2){font-family:var(--monospace-font-stack)}}&>div.room-topic{white-space:pre-wrap;max-height:15rem;overflow:auto;@media screen and (height<=50rem){max-height:7.5rem}}&>div.error>svg{flex-shrink:0;width:1.5rem;height:1.5rem}&>div.buttons{gap:.25rem;width:100%;margin-top:1rem;display:flex;&>button{width:100%;padding:.5rem;&.reject{border:2px solid var(--error-color);padding:.25rem .5rem}}}&>input.knock-reason{border:1px solid var(--border-color);box-sizing:border-box;border-radius:.25rem;width:100%;padding:.5rem;&:focus{outline:1px solid var(--primary-color);border-color:var(--primary-color)}}}div.typing-notifications{height:1.5rem;margin:0 var(--timeline-horizontal-padding);grid-area:typing;align-items:center;gap:.5rem;font-size:.9rem;display:flex;overflow:hidden;&>div.avatars{align-items:center;margin-left:.35rem;display:flex;&>img{margin-left:-.35rem}}&>div.description{text-wrap:nowrap;text-overflow:ellipsis;overflow:hidden}}div.timeline-view{flex-direction:column;justify-content:space-between;display:flex;overflow-y:scroll;&>div.timeline-edge{flex-shrink:0;justify-content:space-around;height:2.5rem;display:flex;&.beginning{margin-top:1rem}&>button{gap:.5rem;padding:0 1rem;display:flex}}&>div.timeline-list{padding-bottom:2rem}}div.room-header{border-bottom:1px solid var(--border-color);padding-left:.5rem;padding-top:var(--window-top-margin);grid-area:header;align-items:center;gap:.5rem;display:flex;overflow:hidden;container-type:inline-size;&>div.room-name-and-topic{flex-direction:column;flex:1;display:flex;overflow:hidden;&>div.room-name,&>div.room-topic{text-overflow:ellipsis;text-wrap:nowrap;overflow:hidden}&>div.room-name{font-weight:700}&>div.room-topic{color:var(--secondary-text-color);font-size:.85rem}}&>button.back{width:2.5rem;height:2.5rem}&>div.right-buttons{align-items:center;margin-right:.5rem;display:flex;&>button{width:2.5rem;height:2.5rem}&.small-screen{display:none}@container (width<30rem){&.small-screen{display:block}&.big-screen{display:none}}}}div.space-view{flex-direction:column;width:100%;max-width:40rem;margin:0 auto;display:flex;overflow:hidden}div.space-adder{margin:.5rem .5rem .5rem 0;display:flex;position:relative;&>input{border:1px solid var(--border-color);border-radius:.25rem;outline:none;width:100%;padding:.25rem .5rem}&>div.space-children{background-color:var(--background-color);border:1px solid var(--border-color);z-index:5;max-height:calc(100vh - 7rem);box-shadow:0 0 1rem var(--modal-box-shadow-color);border-radius:.25rem;width:100%;max-width:30rem;padding:.25rem;position:absolute;top:2.125rem;overflow-y:auto;&:empty{display:none}}}div.space-children{flex-direction:column;flex:1;grid-template-columns:1fr auto;grid-auto-rows:3rem;display:grid;overflow-y:auto;&>div.space-child{cursor:var(--clickable-cursor);border-radius:.25rem;gap:.25rem;padding:.25rem;display:flex;overflow:hidden;&.existing-edge:hover{background-color:var(--button-hover-color)}&>div.room-id-and-name{white-space:nowrap;flex-direction:column;justify-content:center;display:flex;overflow:hidden;&>span.room-id{font-family:var(--monospace-font-stack);opacity:.7;font-size:.75rem}&>span.room-name,&>span.room-id{text-overflow:ellipsis;overflow:hidden}}}&>div.buttons{justify-content:right;align-items:center;margin-right:.5rem;display:flex;&>button{padding:.5rem;&:disabled{padding:.5rem .25rem}}}}div.room-view{grid-area:roomview;grid-template:"header" var(--window-top-margin) "header" 3.5rem "messageview" 1fr "autocomplete" 0 "input" auto "typing" auto / 1fr;contain:strict;outline:none;height:100%;display:grid;overflow:hidden;&.preview{justify-content:center;align-items:center;display:flex}&>div.room-timeline-error,&>div.room-header-error{justify-content:center;align-items:center;height:100%;display:flex;&.room-timeline-error{grid-area:messageview}&.room-header-error{grid-area:header}}}div.mobile-event-menu-container{border-bottom:1px solid var(--border-color);overflow:hidden;&:empty{display:none}}div#mobile-event-menu-container{padding-top:var(--window-top-margin);grid-area:header;&:not(:empty)+div.room-header{display:none}}div#mobile-thread-event-menu-container{box-sizing:border-box;height:3.5rem;&:not(:empty)+div.right-panel-header{display:none}}div.resize-handle-outer{position:relative;&>div.resize-handle-inner{cursor:col-resize;position:absolute;inset:0 -.25rem}}main.matrix-main{--room-list-width:350px;--right-panel-width:300px;grid-template:" roomlist               rh1 roomview" 1fr / var(--room-list-width) 0 1fr;display:grid;position:fixed;inset:0;&.right-panel-open{grid-template:" roomlist               rh1 roomview rh2 rightpanel              " 1fr / var(--room-list-width) 0 1fr 0 var(--right-panel-width)}@media screen and (width<=45rem){&,&.right-panel-open{grid-template:"roomlist roomview rightpanel"1fr/100% 100% 100%}transition:all .3s;@media (prefers-reduced-motion:reduce){transition:none}&.room-selected{translate:-100%}&.right-panel-open{translate:-200%}}&>div.room-list-resizer{z-index:1;grid-area:rh1}&>div.right-panel-resizer{z-index:1;grid-area:rh2}&>div.choose-share-target{height:calc(5rem + env(safe-area-inset-bottom,0));padding-top:.5rem;padding-bottom:env(safe-area-inset-bottom,0);background-color:var(--primary-color);text-align:center;text-wrap:nowrap;font-weight:700;position:fixed;bottom:0;left:0;right:0}}div.sync-status{background-color:var(--background-color);border:1px solid var(--border-color);border-radius:.5rem;gap:1rem;padding:1.5rem;display:flex;position:fixed;top:1rem;left:50%;transform:translate(-50%);&.errored{border:2px solid var(--error-color);color:var(--error-color);font-weight:700}}main.matrix-login{box-sizing:border-box;width:100%;max-width:42rem;box-shadow:0 0 1rem var(--modal-box-shadow-color);margin:calc(2rem + var(--window-top-margin)) auto;padding:3rem 6rem;@media (width<800px){width:calc(100% - 4rem);max-width:38rem;padding:2rem 4rem}@media (width<500px){box-shadow:none;width:100%;padding:1rem;margin:0!important}& h1{margin:0 0 2rem}& h1,& h2,& h3{text-align:center}& div.buttons{gap:.5rem;display:flex}& button,& input{box-sizing:border-box;border-radius:.25rem;width:100%;margin-top:.5rem;padding:1rem;font-size:1rem;display:block}& input{border:1px solid var(--primary-color);&:hover{outline:1px solid var(--primary-color)}&:focus{outline:3px solid var(--primary-color)}}& form{margin:2rem 0}& button{font-weight:700}& div.error{border:2px solid var(--error-color);border-radius:.25rem;margin-top:.5rem;padding:1rem}}:root{color-scheme:light;--font-stack:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--monospace-font-stack:"Fira Code", monospace;--window-top-margin:env(safe-area-inset-top,0px);--background-color:#fff;--login-background-color:#eee;--text-color:#000;--inverted-text-color:var(--background-color);--secondary-text-color:#888;--semisecondary-text-color:#555;--link-text-color:#0467dd;--visited-link-text-color:var(--link-text-color);--small-font-size:.875rem;--modal-max-width:80rem;--code-background-color:#00000026;--media-placeholder-default-background:#0000001a;--media-placeholder-button-background:#ffffff80;--primary-color:#00c853;--primary-color-dark:#00b24a;--error-color:red;--border-color:#ccc;--pill-background-color:#ccc;--disabled-input-background-color:#ddd;--url-preview-background-color:#0000000d;--highlight-pill-background-color:#c00;--highlight-pill-text-color:#fff;--button-hover-color:#0003;--light-hover-color:#0000001a;--composer-background-color:#f0f0f0;--timeline-hover-bg-color:#eee;--timeline-highlight-bg-color:#ffff001a;--timeline-highlight-hover-bg-color:#eec;--timeline-jump-bg-color:#0f03;--timeline-jump-hover-bg-color:#cec;--timeline-soft-failed-bg-color:#ff00004d;--timeline-policy-server-spammy-bg-color:#ff004b33;--room-list-background:linear-gradient(in hsl longer hue, red 0 0, magenta);--room-list-background-overlay:#f5f5f5e6;--room-list-search-background-overlay:var(--room-list-background-overlay);--space-list-background-overlay:#f5f5f5cc;--room-list-scrollbar-color:#0006 #0000001a;--room-list-entry-hover-color:#00000013;--room-list-entry-selected-color:#00000020;--dimmed-overlay-background-color:#000000bf;--modal-box-shadow-color:#0000001a;--popout-widget-box-shadow-color:#00000080;--popout-header-size:2rem;--emoji-selected-border-color:#cec;--image-pack-editor-selected-color:#cec;--unread-counter-text-color:var(--inverted-text-color);--unread-counter-message-bg:#00000059;--unread-counter-notification-bg:#329600b3;--unread-counter-marked-unread-bg:var(--unread-counter-notification-bg);--unread-counter-highlight-bg:#c80000b3;--space-unread-counter-message-bg:#646464e6;--space-unread-counter-notification-bg:#329600;--space-unread-counter-highlight-bg:#c80000;--sender-color-0:#a4041d;--sender-color-1:#9b2200;--sender-color-2:#803f00;--sender-color-3:#005f00;--sender-color-4:#005c45;--sender-color-5:#00548c;--sender-color-6:#064ab1;--sender-color-7:#5d26cd;--sender-color-8:#822198;--sender-color-9:#9f0850;--sent-ok-color:var(--border-color);--sent-error-color:var(--error-color);--blockquote-border-color:var(--border-color);--lightbox-button-color:var(--border-color);--clickable-cursor:default;--room-list-padding:.125rem;--timeline-avatar-size:2.5rem;--timeline-avatar-gap:.5rem;--timeline-avatar-total-size:calc(var(--timeline-avatar-size) + var(--timeline-avatar-gap));--timeline-message-gap:.5rem;--timeline-message-gap-same-sender:calc(var(--timeline-message-gap) / 2);--timeline-message-gap-small-event:0;--timeline-message-gap-same-thread:0;--timeline-sender-name-timestamp-gap:.25rem;--timeline-sender-name-content-gap:0;--timeline-vertical-padding:0;--timeline-horizontal-padding:1.5rem;--timeline-status-size:4rem;--image-picker-width:22rem;--image-picker-height:34rem;--image-picker-category-rows:3;@media screen and (width<=45rem){--timeline-horizontal-padding:.5rem;--timeline-status-size:2.3rem}@media (prefers-color-scheme:dark){color-scheme:dark;--background-color:#000;--login-background-color:#111;--text-color:#ebeef2;--inverted-text-color:var(--background-color);--secondary-text-color:#888;--semisecondary-text-color:#bbb;--link-text-color:#4187eb;--code-background-color:#ffffff1a;--media-placeholder-default-background:#ffffff1a;--media-placeholder-button-background:#00000080;--primary-color:#00b24a;--primary-color-dark:#00c853;--error-color:red;--border-color:#222;--pill-background-color:#222;--disabled-input-background-color:#222;--url-preview-background-color:#222;--button-hover-color:#fff3;--light-hover-color:#ffffff1a;--composer-background-color:#0a0a0a;--timeline-hover-bg-color:#111;--timeline-highlight-bg-color:#ffff001a;--timeline-highlight-hover-bg-color:#331;--timeline-jump-bg-color:#0f03;--timeline-jump-hover-bg-color:#131;--room-list-background:#171717;--room-list-background-overlay:transparent;--space-list-background-overlay:#222;--room-list-scrollbar-color:#fff6 #ffffff1a;--room-list-entry-hover-color:#ffffff13;--room-list-entry-selected-color:#ffffff20;--modal-box-shadow-color:#ffffff0a;--popout-widget-box-shadow-color:#fff3;--emoji-selected-border-color:#131;--image-pack-editor-selected-color:#131;--unread-counter-message-bg:#ffffff80;--unread-counter-notification-bg:#96ff00b3;--unread-counter-highlight-bg:#ff3232b3;--space-unread-counter-message-bg:#c8c8c8cc;--space-unread-counter-notification-bg:#96ff00;--space-unread-counter-highlight-bg:#ff3232;--sender-color-0:#ff877c;--sender-color-1:#f6913d;--sender-color-2:#db9f00;--sender-color-3:#56c02c;--sender-color-4:#1fc090;--sender-color-5:#21bacd;--sender-color-6:#7aacf4;--sender-color-7:#ad9cfe;--sender-color-8:#d991de;--sender-color-9:#fe84a2;--sent-ok-color:#444;--blockquote-border-color:#444;--lightbox-button-color:#ccc}}body{font-family:var(--font-stack);background-color:var(--background-color);touch-action:none;color:var(--text-color);min-height:100vh;margin:0;padding:0;line-height:1.5}html{touch-action:none;background-color:var(--background-color);font-size:16px}#root{justify-content:center;display:flex}main{background-color:var(--background-color)}pre,code{font-family:var(--monospace-font-stack)}input,textarea{color:inherit;background-color:inherit;font-size:1em;font-family:var(--font-stack)}button,a.button,span.button{cursor:var(--clickable-cursor);color:inherit;font-size:1em;font-family:var(--font-stack);background:0 0;border:none;border-radius:.25rem;justify-content:center;align-items:center;padding:0;display:flex;&:hover,&:focus{background-color:var(--button-hover-color)}&:disabled{cursor:default;color:var(--secondary-text-color);background:0 0}&.primary-color-button:not(:disabled){background-color:var(--primary-color);color:var(--inverted-text-color);&:hover,&:focus{background-color:var(--primary-color-dark)}}}div.connection-error-wrapper{inset:var(--window-top-margin) 0 0;z-index:100;flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;&.post-connect{background-color:var(--dimmed-overlay-background-color)}&>div.connection-error-inner{background-color:var(--background-color);border:2px solid var(--error-color);border-radius:.5rem;flex-direction:column;align-items:center;gap:1rem;margin-top:2rem;padding:1rem;display:flex}}div.pre-main{inset:var(--window-top-margin) 0 0;background-color:var(--login-background-color);position:fixed;&.waiting-to-connect{text-align:center;padding-top:2rem}}a{color:var(--link-text-color);text-decoration:none;&:visited{color:var(--visited-link-text-color)}&:hover:not(.button){text-decoration:underline}}.hidden{display:none!important}