div.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;&.dimmed{background-color:var(--dimmed-overlay-background-color)}&.modal>div.modal-box{background-color:var(--background-color);border-radius:1rem;padding:1rem;max-width:min(80rem,80vw);max-height:min(80rem,80vh);overflow:hidden;display:flex;&.full-screen-mobile{@media screen and (max-width: 30rem){max-width:100%;max-height:100%;width:100%;height:100%;border-radius:0}}>div.modal-box-inner{overflow:auto}}}div.lightbox{>div.controls{position:fixed;top:calc(.5rem + var(--window-top-margin));right:.5rem;display:flex;z-index:1;>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{position:fixed;background-color:var(--background-color);width:var(--image-picker-width);height:var(--image-picker-height);border-radius:1rem;border:1px solid var(--border-color);display:flex;flex-direction:column;box-shadow:0 0 1rem var(--modal-box-shadow-color);div.emoji-search,div.gif-search{display:flex;align-items:center;margin:.5rem;border:1px solid var(--border-color);border-radius:.25rem;height:2rem;>input{flex:1;padding:.5rem;border:none;outline:none;border-radius:.25rem}>button{width:2rem;height:2rem;padding:.25rem;border-bottom-left-radius:0;border-top-left-radius:0}}}div.gif-picker{width:32rem;>div.gif-list{overflow-y:auto;padding:0 1rem;flex:1;display:flex;flex-wrap:wrap;>div.gif-entry{cursor:var(--clickable-cursor);max-width:10rem;display:flex;justify-content:center;&:hover{background-color:var(--button-hover-color)}>img{object-fit:contain;width:100%;padding:.5rem}}}div.powered-by-footer{margin-top:auto;margin-bottom:.5rem;>img{max-width:100%}}}div.emoji-picker,div.sticker-picker{div.emoji-category-bar{display:flex;justify-content:center;flex-wrap:wrap;padding-top:.5rem;border-bottom:1px solid var(--border-color);max-height:calc(.5rem + 2.5rem * var(--image-picker-category-rows));overflow:auto;>button{padding-top:.25rem;width:2.125rem;height:2.5rem;box-sizing:border-box;border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:2px solid transparent;&.visible{border-bottom:2px solid var(--primary-color)}&:hover{border-bottom:2px solid var(--primary-color-dark)}}}div.emoji-list{overflow-y:auto;padding:0 1rem;flex:1;display:flex;flex-direction:column}div.emoji-preview{height:4.5rem;border-top:1px solid var(--border-color);display:grid;grid-template:"big name" 1fr "big shortcode" 1fr / 5rem 1fr;>div.big-emoji{grid-area:big;font-size:2.5rem;display:flex;justify-content:center;align-items:center;>img{width:3rem;height:3rem;object-fit:contain}}>div.emoji-name{grid-area:name;font-weight:700;display:flex;align-items:end}>div.emoji-shortcode{grid-area:shortcode;color:var(--semisecondary-text-color);text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}}div.emoji-category{width:100%;content-visibility:auto;contain:size}div.emoji-category-list{display:flex;flex-wrap:wrap;width:100%}h4.emoji-category-name{margin:0;display:flex;align-items:center;>span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}>button{margin-left:.25rem;font-size:.8rem;padding:.25rem .5rem}}button.emoji-category-icon{display:block}button.emoji-category-icon>img,button.emoji>img{width:1.5rem;height:1.5rem;object-fit:contain}button.emoji{font-size:1.25rem;padding:0;width:2.5rem;height:2.5rem;content-visibility:auto;&.selected{border:1px solid var(--emoji-selected-border-color);opacity:.8}}button.sticker{width:5rem;height:5rem;>img{object-fit:contain;width:100%;height:100%;box-sizing:border-box;padding:.5rem}}button.freeform-react{width:100%;padding:.25rem;margin-top:auto;margin-bottom:.25rem}}@media screen and (max-width: 37.5rem){div.emoji-picker,div.gif-picker,div.sticker-picker{inset:var(--window-top-margin) 0 3rem 0!important;width:100%;height:calc(100% - 3rem);border-radius:0}div.gif-picker>div.gif-list>div.gif-entry{max-width:33%}}@media screen and (max-width: 30rem){div.gif-picker>div.gif-list>div.gif-entry{max-width:50%}}@media screen and (max-width: 20rem){div.gif-picker>div.gif-list>div.gif-entry{max-width:100%}}div.event-hover-menu{position:absolute;right:.5rem;top:-1.5rem;border:1px solid var(--border-color);border-radius:.5rem;padding:.125rem;>button{width:2rem;height:2rem}}div.event-hover-menu,div.event-fixed-menu{display:flex;gap:.25rem;background-color:var(--background-color);z-index:1}div.event-fixed-menu{padding:.25rem;justify-content:right;flex-direction:row-reverse;overflow-x:auto;overflow-y:hidden;>div.vertical-line{width:1px;flex-shrink:0;background-color:var(--border-color)}>button{width:3rem;height:3rem;flex-shrink:0;&.redact-button{color:var(--error-color)}}}div.context-menu{position:fixed;background-color:var(--background-color);border-radius:.5rem;border:1px solid var(--border-color);box-shadow:0 0 1rem var(--modal-box-shadow-color);display:flex;flex-direction:column;>hr{margin:0;opacity:.2}>.context-menu-item,>button{border-radius:0;padding:.5rem .75rem;justify-content:left;text-align:left;gap:.5rem;>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 (min-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}}}}input.toggle{--transition-duration: .3s;--disabled-color: var(--secondary-text-color);--enabled-color: var(--primary-color-dark);cursor:var(--clickable-cursor);appearance:none;display:block;background-color:var(--background-color);border:1px solid var(--disabled-color);border-radius:1.5em;width:3.5em;height:2em;padding:calc(.25em - 1px);box-sizing:border-box;transition:background-color var(--transition-duration),border-color var(--transition-duration);&:after{content:"";display:block;height:1.5em;width:1.5em;border-radius:50%;background-color:var(--disabled-color);transition:margin-left var(--transition-duration),background-color var(--transition-duration)}&:checked{border-color:var(--enabled-color);background-color:var(--enabled-color);&:after{margin-left:1.5em;background-color:var(--background-color)}}}div.state-explorer-box{overflow:hidden!important}div.state-explorer{width:min(50rem,80vw);max-height:100%;display:flex;flex-direction:column;h3,>div.title-bar{margin:0 0 1rem}>div.title-bar{display:flex;align-items:center;gap:.25rem;>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);padding:.5rem;border-radius:.25rem;box-sizing:border-box;width:100%;outline:none;margin-bottom:1rem}div.state-button-list{display:flex;flex-wrap:wrap;gap:.5rem;overflow:auto;>button{padding:.5rem;border:1px solid var(--border-color);border-radius:.5rem}}>div.nav-buttons{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem;>div.spacer{flex:1}>label{display:flex;align-items:center}>button{padding:.5rem 1rem;border:1px solid var(--border-color);border-radius:.5rem}}&.state-event-view{>div.state-event-content{flex:1;overflow:auto;>textarea{width:100%;padding:.5rem;box-sizing:border-box;resize:vertical;border:1px solid var(--border-color);outline:none;border-radius:.5rem;&:focus{border:1px solid var(--primary-color)}}}>div.state-header>div.new-event-type{display:flex;gap:.25rem;margin-bottom:.25rem;>input{flex:1;padding:.5rem;border:1px solid var(--border-color);box-sizing:border-box;border-radius:.5rem;outline:none;font-family:var(--monospace-font-stack);&:focus{border:1px solid var(--primary-color)}}}}}div.settings-view{div.room-details{display:flex;gap:.5rem;img.avatar{margin-top:.5rem}div.room-name{font-size:1.2rem;font-weight:700;text-overflow:ellipsis;text-wrap:nowrap}div.room-buttons{display:flex;gap:.5rem;button{padding:.5rem 1rem;&.leave-room{&:hover,&:focus{background-color:var(--error-color);color:var(--inverted-text-color)}}}}}width:min(60rem,80vw);display:flex;flex-direction:column;h2,h3,h4{margin:0}summary>h3,summary>h4{display:inline}div.preference-table{display:grid;grid-template-columns:auto 1fr 1fr 1fr 1fr;grid-gap:.25rem;>div.name{font-weight:700;display:flex;align-items:center}>div.preference{display:flex;align-items:center;&.select-preference>select{padding:.25rem}&.string-preference>input{border:1px solid var(--border-color);padding:.25rem;width:8rem}}}>div.custom-css-input{display:flex;flex-direction:column;gap:.5rem;margin-right:1rem;>div.header{display:flex;gap:.5rem}>textarea{width:100%;box-sizing:border-box;resize:vertical;border:1px solid var(--border-color);outline:none;height:10rem;min-height:3rem;font-family:var(--monospace-font-stack)}>div.vscode-wrapper{position:fixed;inset:0;top:var(--window-top-margin);z-index:10;background-color:var(--background-color);>div.loader{position:absolute;inset:0;display:flex;justify-content:center;align-items:center}}>div.buttons{display:flex;justify-content:right;gap:.5rem;>button{padding:.5rem 1rem;font-weight:700;&.delete:hover,&.delete:focus{background-color:var(--error-color);color:var(--inverted-text-color)}}}}>div.key-export{display:flex;flex-direction:column;gap:.5rem;margin:0 .5rem;max-width:25rem;button{padding:.5rem;box-sizing:border-box;width:100%}hr{width:100%;opacity:.2;margin:0}input{border:1px solid var(--border-color);padding:.5rem;border-radius:.5rem}>div.export-buttons,>form.import-buttons,>div.key-backup-buttons{display:flex;gap:.5rem;>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{width:100%;opacity:.2}}div.key-restore-modal-wrapper{width:100%;max-width:min(30rem,90vw)!important}div.key-restore-modal{display:flex;flex-direction:column;gap:.25rem;width:100%;.status{font-weight:700}.active-room-id{white-space:nowrap}progress{width:100%;box-sizing:border-box}}div.space-list-menu{>div.space-list-child{display:flex;align-items:center;padding:0 .5rem;height:2.5rem;&:hover,&:focus{background-color:var(--room-list-entry-hover-color)}>img{width:2rem;height:2rem;border-radius:0;clip-path:url(#squircle)}}}div.url-preview{margin:.5rem 0;border-radius:.5rem;background-color:var(--url-preview-background-color);border:1px solid var(--url-preview-background-color);display:grid;flex-shrink:0;&.loading{padding:1.5rem;height:fit-content;display:inherit}grid-template:"title       actions" auto "description description" auto "media       media" auto / 1fr;div.title{grid-area:title;margin:.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:700;&.with-description{margin-bottom:0}}div.actions{grid-area:actions;width:2rem;height:2rem;display:flex;justify-content:center;align-self:center;>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{grid-area:description;margin:0 .5rem .5rem;display:-webkit-box;overflow:hidden;-webkit-line-clamp:3;-webkit-box-orient:vertical;color:var(--semisecondary-text-color)}>div.media-container{grid-area:media;border-radius:0 0 .5rem .5rem;background-color:var(--background-color)}&.inline{grid-template:"media        title       actions" auto "media        description description" auto / min-content auto 2rem;width:100%;max-width:20rem;max-height:6rem;>div.inline-media-wrapper{grid-area:media;display:flex;justify-content:center;align-items:center;background-color:var(--background-color);border-radius:.5rem 0 0 .5rem;padding:.5rem}>div.description{-webkit-line-clamp:2}}}div.event-context-loading{display:flex;justify-content:center;align-items:center;flex-direction:column;height:100%;width:100%}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;min-width:20rem;box-sizing:border-box;padding:1rem;@media screen and (max-width: 30rem){min-width:100%;padding:.5rem}>p{margin:0}}div.timeline-event>div.read-receipts{grid-area:status;display:flex;justify-content:right;align-items:end;overflow:hidden;margin-bottom:.125rem;>div.overflow-count{font-size:.75rem;color:var(--secondary-text-color);margin-right:.125rem;-webkit-user-select:none;user-select:none}>div.avatars{display:flex;margin-left:.35rem;>img{margin-left:-.35rem;border:1px solid var(--background-color);background-color:var(--background-color)}}+div.event-send-status{display:none}}button.with-tooltip{position:relative;div.button-tooltip{display:none;position:absolute;z-index:5;background-color:var(--background-color);border:1px solid var(--border-color);padding:.25rem;border-radius:.25rem;text-wrap:wrap;width:max-content;&.button-tooltip-top{bottom:100%;margin-bottom:.25rem}&.button-tooltip-bottom{top:100%;margin-top:.25rem}&.button-tooltip-left{right:100%;margin-right:.25rem}&.button-tooltip-right{left:100%;margin-left:.25rem}}&:hover>div.button-tooltip{display:block}}div.render-error-body{font-style:italic;color:var(--semisecondary-text-color)}div.decryption-error-body{display:flex;align-items:center;>svg{height:20px;color:var(--error-color)}}div.redacted-body,div.decryption-pending-body{display:flex;align-items:center;color:var(--secondary-text-color);>svg{height:20px}}div.member-body{span.name,span.reason{unicode-bidi:isolate}img{margin-bottom:-.125rem}}div.room-avatar-body{display:flex;align-items:center;gap:.25rem}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);border-radius:1rem;padding:0 .25rem;color:inherit;text-decoration:none!important;text-wrap:nowrap;cursor:var(--clickable-cursor);overflow:hidden;max-width:15rem;text-overflow:ellipsis;display:inline-block;vertical-align:bottom}img.hicli-custom-emoji{vertical-align:bottom;height:2rem;width:auto;max-width:5rem}img.hicli-sizeless-inline-img{height:1.5rem;width:auto;max-width:5rem}span.spoiler-reason{font-size:.8em;color:var(--secondary-text-color);&:before{content:"("}&:after{content:") "}}span.hicli-spoiler{filter:blur(4px);transition:filter .5s;cursor:var(--clickable-cursor);&.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{width:100%;max-height:max(50vh,400px);overflow:auto;padding-bottom:.5rem;&.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.5em}h3{font-size:1.25em}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{position:relative;width:100%;height:100%;>div.empty-placeholder{background-color:var(--media-placeholder-default-background);width:100%;height:100%}>div.placeholder-reason,>div.placeholder-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}>div.placeholder-reason{background-color:var(--media-placeholder-button-background);padding:.5rem;cursor:var(--clickable-cursor);-webkit-user-select:none;user-select:none;border-radius:.25rem}&:has(>div.empty-placeholder)+img{filter:blur(16px)}+img{position:absolute;top:0;z-index:-1}}>a{display:flex;align-items:center;text-decoration:none;color:inherit}>img,>video{max-width:100%;max-height:100%;&.errored:before{display:none}&.errored:after{display:flex;justify-content:center;align-items:center;text-align:center;height:100%;color:var(--error-color);content:"Failed to load image";background-color:var(--media-placeholder-default-background)}}}iframe.location-container.google{height:25rem;width:100%;max-width:50rem;border:none}div.location-container.leaflet{height:25rem;max-width:50rem;>div{height:25rem;width:100%}}div.location-importer{display:flex;justify-content:center;align-items:center}blockquote.reply-body{margin:0 0 .25rem;border-left:2px solid var(--reply-border-color);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{grid-area:reply;display:flex;gap:.25rem;font-size:var(--small-font-size);height:calc(var(--small-font-size) * 1.5);border-left:none;padding:0;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{grid-area:content;border-left-width:4px;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{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--semisecondary-text-color);-webkit-user-select:none;user-select:none;h1,h2,h3,h4,h5,h6{font-size:1em}img{vertical-align:baseline;height:1em}}>div.reply-sender{display:flex;align-items:center;text-wrap:nowrap;>span.sender-extra{display:inline-flex;align-items:center;color:var(--secondary-text-color);-webkit-user-select:none;user-select:none;margin-left:.25rem;&.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);font-size:.75rem;margin:0 .25rem;>span.via{margin-right:.25rem}}>div.buttons{margin-left:auto;display:flex;gap:.25rem;>button{display:flex;align-items:center;border-radius:.25rem;padding:0;>svg{height:24px;width:24px}}}}>div.event-reactions{margin-bottom:0}}div.timeline-event{width:100%;max-width:100%;box-sizing:border-box;padding:var(--timeline-vertical-padding) var(--timeline-horizontal-padding);display:grid;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);&.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{grid-area:avatar;width:var(--timeline-avatar-size);height:var(--timeline-avatar-size);margin-top:2px;>img.avatar:not(.small){width:100%;height:100%}}>div.event-sender-and-time{grid-area:sender;margin-bottom:var(--timeline-sender-name-content-gap);display:flex;align-items:center;gap:var(--timeline-sender-name-timestamp-gap);text-wrap:nowrap;>span.event-sender{font-weight:700;-webkit-user-select:none;user-select:none;cursor:var(--clickable-cursor)}>div.per-message-event-sender{color:var(--secondary-text-color);font-size:.75rem;>span.via{margin-right:.25rem}>span.event-sender{font-weight:700;-webkit-user-select:none;user-select:none;cursor:var(--clickable-cursor)}}>span.event-time{font-size:.7rem;color:var(--secondary-text-color)}}>div.event-time-only{grid-area:timestamp;display:none;align-items:end;font-size:.7rem;color:var(--secondary-text-color);max-height:1.25rem;margin-left:.25rem}>div.event-content{grid-area:content;overflow:hidden;overflow-wrap:anywhere;contain:content;>div.event-edited{font-size:.7rem;color:var(--secondary-text-color);-webkit-user-select:none;user-select:none;cursor:var(--clickable-cursor)}}>div.event-send-status{grid-area:status;display:flex;justify-content:right;align-items:end;max-height:1.25rem;>svg{height:1rem;width:1rem}&.error{color:var(--sent-error-color)}&.sending,&.sent{color:var(--sent-ok-color)}}>div.context-menu-container{grid-area:cmc;position:relative;display:none}&: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{display:flex;flex-direction:row;gap:1rem;overflow-x:auto}}div.pinned-event>div.timeline-event{--timeline-status-size: 0;--timeline-horizontal-padding: 0;>div.event-send-status{display:none}>div.read-receipts{display:none}}span.event-sender{overflow:hidden;text-overflow:ellipsis;&.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{display:flex;flex-wrap:wrap;gap:.25rem;margin:.25rem 0;>div.reaction{display:flex;align-items:center;gap:.25rem;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:2rem;padding:0 .5rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:20rem;-webkit-user-select:none;user-select:none;cursor:var(--clickable-cursor);&: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{margin-top:0;display:flex;align-items:center;flex-shrink:0}div.date-separator{display:flex;align-items:center;gap:.5rem;padding:calc(var(--timeline-message-gap)/2) 0;>hr{flex:1;opacity:.2}}form.confirm-message-modal{width:min(40rem,80vw);max-height:min(40rem,80vh);display:flex;flex-direction:column;gap:.5rem;>h3{margin:0}>div.timeline-event-container{margin:.5rem 0;padding-left:.5rem;border-left:2px solid var(--border-color);overflow:auto;>div.timeline-event{margin:0;padding:0}}>input{padding:1rem;outline:none;border-radius:.25rem;border:1px solid var(--border-color)}>div.confirm-buttons{display:flex;justify-content:right;>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{display:grid;grid-template-columns:1fr auto;>label,>input{align-self:center}}}div.message-composer{margin:-1rem var(--timeline-horizontal-padding) 0;background-color:var(--composer-background-color);border:1px solid var(--border-color);border-radius:.5rem;overflow:hidden;grid-area:input;min-height:2.25rem;z-index:1;box-shadow:0 0 1rem var(--modal-box-shadow-color);blockquote.reply-body>pre{text-wrap:auto!important}&.tombstoned,&.no-permission{min-height:unset;padding:.5rem;>button{padding:.25rem}}>div.input-area{display:flex;align-items:center;margin-right:.25rem;>textarea{line-height:1.25;flex:1;resize:none;font-family:var(--font-stack);height:auto;padding:.5rem;border:none;outline:none}>button{height:2rem;width:2rem;padding:.25rem;>svg{width:1.5rem;height:1.5rem}}>input[type=file]{display:none}@media screen and (max-width: 45rem){margin-right:0;>textarea:not(:empty){padding:.5rem 0}}}>div.composer-media,>div.composer-location{display:flex;padding:.5rem .5rem 0;justify-content:space-between;>button{height:2.5rem;width:2.5rem;padding:.5rem}}>div.composer-location{height:15rem;>div.location-container{height:15rem;max-width:40rem;width:100%;>div{height:15rem;width:100%}}}>div.url-previews{display:flex;flex-direction:row;gap:1rem;overflow-x:auto;margin:0 .5rem}}form.media-upload-modal{display:flex;flex-direction:column;max-height:100%;>h3{margin:0 0 .5rem}>div.attachment-preview{overflow:hidden;flex-shrink:1;display:flex;>img,>video{max-width:100%;max-height:100%}}>div.attachment-meta{display:grid;grid-template-columns:auto 1fr;gap:.25rem;@media screen and (min-width: 50rem){grid-template-columns:auto 1fr auto 1fr;>div.meta-value-long{grid-column:span 3}}>div.meta-value{display:flex;align-items:center;gap:.25rem;overflow:hidden;>input[type=text]{border:1px solid transparent;outline:none;padding:0;flex-grow:1;&:focus{border-color:var(--primary-color)}}>input[type=range]{max-width:calc(100% - 70px)}}}>div.confirm-buttons{display:flex;justify-content:right;>button{padding:.5rem 1rem;&.confirm-button:hover{background-color:var(--primary-color);color:var(--inverted-text-color)}}}}div.autocompletions-wrapper,div.command-argument-wrapper{position:relative;grid-area:autocomplete}div.autocompletions,div.command-arguments{position:absolute;bottom:1.25rem;left:var(--timeline-horizontal-padding);border:1px solid var(--border-color);border-radius:.5rem;box-shadow:0 0 1rem var(--modal-box-shadow-color);background-color:var(--background-color);padding:.5rem;max-height:20rem;max-width:30rem;overflow:auto;&.ac-command{max-width:calc(100% - 4rem);overflow-x:auto}>.autocompletion-item{padding:.25rem;border-radius:.25rem;display:flex;align-items:center;gap:.25rem;cursor:var(--clickable-cursor);overflow:hidden;height:2rem;contain-intrinsic-height:2rem;content-visibility:auto;&.selected,&:hover{background-color:var(--light-hover-color)}&.ac-user{text-wrap:nowrap}&.ac-command{height:auto;contain-intrinsic-height:unset;content-visibility:visible;display:block;>span,>code{vertical-align:middle}>img{vertical-align:middle;width:1.5rem;height:1.5rem;margin-right:.25rem}}>img{width:1.5rem;height:1.5rem;object-fit:contain}}&.command-arguments{display:grid;grid-template-columns:auto auto;grid-gap:.25rem;align-items:center;input[type=checkbox]{width:1.5rem;height:1.5rem;padding:0;margin:0;accent-color:var(--primary-color-dark)}input[type=text],input[type=number]{padding:.25rem;border:1px solid var(--border-color);border-radius:.25rem;&:hover{border-color:var(--primary-color)}&:focus{outline:none;border-color:var(--primary-color-dark)}}}}div.thread-view{--timeline-horizontal-padding: .5rem;--timeline-status-size: 2rem;overflow:hidden;display:grid;grid-template:"messageview" 1fr "autocomplete" 0 "input" auto "typing" auto / 1fr;height:100%;>div.timeline-view{justify-content:unset}}div.right-panel{border-left:1px solid var(--border-color);display:flex;flex-direction:column;overflow:hidden;padding-top:var(--window-top-margin);>div.right-panel-header{height:3.5rem;border-bottom:1px solid var(--border-color);box-sizing:border-box;display:flex;align-items:center;vertical-align:center;padding:0 .25rem;justify-content:space-between;div.left-side{display:flex;align-items:center}div.panel-name{margin-left:.25rem;font-weight:700}button{height:2.5rem;width:2.5rem}}}div.right-panel-content{flex:1;overflow:auto}div.right-panel-content.pinned-messages{padding:.5rem;display:flex;flex-direction:column-reverse;>div.pinned-event:not(:first-child){border-bottom:1px solid var(--border-color);padding-bottom:.5rem}>div.empty{margin:auto}}div.right-panel-content.widgets{display:flex;flex-direction:column;gap:.5rem;padding:.5rem;>button{padding:.5rem;width:100%}>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));display:flex;justify-content:center;align-items:center;padding:1rem;margin:0 auto;>img{width:100%;height:100%}}div.displayname{font-size:1.5rem;font-weight:700;text-align:center;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;word-break:break-word;overflow:hidden}div.userid{text-align:center;font-family:var(--monospace-font-stack);overflow:auto;word-break:break-word;max-height:4rem}div.userid,div.extended-profile,div.devices,div.user-moderation,div.mutual-rooms,div.errors{border-bottom:1px solid var(--border-color);padding-bottom:.5rem;margin-bottom:.5rem}div.extended-profile{display:grid;gap:.25rem;grid-template-columns:1fr 1fr;>input{border:0;padding:0;width:100%;box-sizing:border-box;border-bottom:1px solid var(--blockquote-border-color)}>button{grid-column:span 2;padding:.25rem}}hr{width:100%;opacity:.2}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{display:flex!important;justify-content:center}p.verified-message{display:flex;gap:.25rem;font-weight:700;&.verified{color:var(--primary-color-dark)}&.tofu-broken{color:#ff8c00}}div.devices>details>summary>h4{display:inline-block}button.action{padding:.5rem 1rem;width:100%;gap:.25rem;justify-content:left}div.devices>details>ul{list-style-type:none;padding:0;margin:0;gap:.25rem;display:flex;flex-direction:column;li.device{display:flex;align-items:center;gap:.25rem;>.icon-wrapper{height:1.5rem;width: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{display:flex;flex-direction:column;button.moderation-action{padding:.5rem;width:100%;gap:.5rem;justify-content:left;&.dangerous{color:var(--error-color)}&.positive{color:var(--primary-color)}}}div.errors{display:flex;flex-direction:column;gap:.5rem;>div.error{display:flex;gap:.25rem;>p{margin:0}>div.icon{margin-top:.125rem;color:var(--error-color);flex-shrink:0}}}}div.right-panel-content.thread{overflow:hidden}span.invited-indicator{opacity:.7;font-size:.7rem}div.right-panel-content.members{overflow:hidden;display:flex;flex-direction:column;>input.member-filter{border:none;outline:none;padding:1rem;border-bottom:1px solid var(--border-color);width:100%;box-sizing:border-box}>div.member-list{display:flex;flex-direction:column;overflow:auto;>div.member{display:grid;column-gap:.5rem;cursor:var(--clickable-cursor);content-visibility:auto;contain-intrinsic-height:3rem;height:3rem;padding:.25rem;align-items:center;grid-template:"avatar  displayname" 3rem / 2.5rem 1fr;&:hover{grid-template:"avatar  displayname" 1.75rem "avatar  userid" 1.25rem / 2.5rem 1fr;>div.user-id{display:block;align-self:start}>div.displayname{align-self:end}}>div.displayname,>div.user-id{overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}>div.displayname{grid-area:displayname}>img.avatar{grid-area:avatar}>div.user-id{grid-area:userid;font-family:var(--monospace-font-stack);font-size:.75rem;opacity:.7;display:none}&:hover,&:focus{background-color:var(--light-hover-color)}}>button{border-radius:0;padding:.5rem}}}form.create-room-view{display:flex;flex-direction:column;gap:1rem;width:100%;input,select,textarea,.room-alias-container{box-sizing:border-box;width:100%;padding:.5rem;border:1px solid var(--border-color);border-radius:.25rem;font-size:1em;background-color:var(--background-color);&:hover{border-color:var(--primary-color)}&:focus{outline:none;border-color:var(--primary-color-dark)}}textarea{resize:vertical}.room-alias-container{display:flex;>input{padding:0;border:none;border-radius:0}}div.form-fields{display:grid;grid-template-columns:auto 1fr;gap:.5rem;align-items:center;>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;padding:0;margin:0;accent-color:var(--primary-color-dark)}}div.form-fields.item-list{grid-template-columns:1fr auto;gap:.25rem;>div.item-list-header{display:flex;gap:.5rem;grid-column:1 / span 2;align-items:center;>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{display:grid;gap:.25rem;grid-template:"type stateKey" auto "content content" 1fr;margin-bottom:.5rem;>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{display:flex;flex-direction:column;gap:.5rem}>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.room-list-wrapper{contain:strict;grid-area:roomlist;background:var(--room-list-background);box-sizing:border-box;overflow:hidden;scrollbar-color:var(--room-list-scrollbar-color);display:grid;grid-template:"spacebar search" var(--window-top-margin) "spacebar search" 3.5rem "spacebar roomlist" 1fr / 3rem 1fr}div.room-list{background-color:var(--room-list-background-overlay);overflow-y:auto;grid-area:roomlist}div.space-bar{background-color:var(--space-list-background-overlay);grid-area:spacebar;overflow:auto;scrollbar-width:none;padding-top:var(--window-top-margin);>div.space-entry{width:2rem;height:2rem;padding:.25rem;margin:.25rem;border-radius:.25rem;cursor:var(--clickable-cursor);&: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{border-radius:0;clip-path:url(#squircle);width:100%;height:100%}>div.room-entry-unreads{z-index:2;height:0;width:0;margin-left:auto;position:relative;>div.unread-count{position:absolute;margin-top:.75rem;margin-right:.25rem}}}}div.room-search-wrapper{width:100%;display:flex;align-items:center;height:3.5rem;background-color:var(--room-list-search-background-overlay);grid-area:search;padding-top:var(--window-top-margin);>input{padding:0 0 0 1rem;height:3rem;box-sizing:border-box;border:none;outline:none;background-color:transparent;flex:1}>button{height:2.5rem;width:2.5rem;border-radius:0;color:var(--text-color)!important}}div.room-entry{width:100%;display:flex;gap:.25rem;-webkit-user-select:none;user-select:none;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;&:hover,&:focus{background-color:var(--room-list-entry-hover-color)}&.active{background-color:var(--room-list-entry-selected-color)}>div.room-entry-left{height:3rem;width:3rem;>img.room-avatar{margin:.25rem}}>div.room-entry-right{width:100%;display:flex;flex-direction:column;overflow:hidden;justify-content:space-around;>div.room-name{font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}>div.message-preview{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;>span.sender-name{display:block;max-width:6rem;overflow:hidden}>span.preview-text{display:block}}}}div.room-entry-unreads{display:flex;align-items:center;justify-content:center;width:3rem;margin-right:.25rem;>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);display:flex;align-items:center;justify-content:center;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)));line-height:1;font-size:.75em;padding-inline:var(--unread-count-padding-inline);padding-block:var(--unread-count-padding-block);&.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{width:2.5rem;height:2.5rem;border-radius:50%;object-fit:cover;&.small{width:1rem;height:1rem}&.large{width:5rem;height:5rem}}div.room-view.preview>div.preview-inner{width:100%;max-height:100%;height:auto;max-width:30rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;>img.avatar{width:7.5rem;height:7.5rem;border:1px solid var(--border-color)}>h2.room-name{margin:0;max-height:6rem;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{display:flex;align-items:center;gap:.25rem}>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 (max-height: 50rem){max-height:7.5rem}}>div.error>svg{flex-shrink:0;width:1.5rem;height:1.5rem}>div.buttons{width:100%;display:flex;gap:.25rem;margin-top:1rem;>button{padding:.5rem;width:100%;&.reject{border:2px solid var(--error-color);padding:.25rem .5rem}}}>input.knock-reason{padding:.5rem;border-radius:.25rem;border:1px solid var(--border-color);box-sizing:border-box;width:100%;&:focus{outline:1px solid var(--primary-color);border-color:var(--primary-color)}}}div.typing-notifications{grid-area:typing;height:1.5rem;margin:0 var(--timeline-horizontal-padding);display:flex;gap:.5rem;align-items:center;font-size:.9rem;overflow:hidden;>div.avatars{display:flex;align-items:center;margin-left:.35rem;>img{margin-left:-.35rem}}>div.description{text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}}div.timeline-view{overflow-y:scroll;display:flex;flex-direction:column;justify-content:space-between;>div.timeline-edge{display:flex;justify-content:space-around;flex-shrink:0;height:2.5rem;&.beginning{margin-top:1rem}>button{display:flex;padding:0 1rem;gap:.5rem}}>div.timeline-list{padding-bottom:2rem}}div.room-header{display:flex;align-items:center;gap:.5rem;padding-left:.5rem;border-bottom:1px solid var(--border-color);overflow:hidden;grid-area:header;container-type:inline-size;padding-top:var(--window-top-margin);>div.room-name-and-topic{flex:1;display:flex;flex-direction:column;overflow:hidden;>div.room-name,>div.room-topic{overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}>div.room-name{font-weight:700}>div.room-topic{font-size:.85rem;color:var(--secondary-text-color)}}>button.back{height:2.5rem;width:2.5rem}>div.right-buttons{display:flex;align-items:center;margin-right:.5rem;>button{width:2.5rem;height:2.5rem}&.small-screen{display:none}@container (width < 30rem){&.small-screen{display:block}&.big-screen{display:none}}}}div.room-view{grid-area:roomview;overflow:hidden;height:100%;display:grid;outline:none;grid-template:"header" var(--window-top-margin) "header" 3.5rem "messageview" 1fr "autocomplete" 0 "input" auto "typing" auto / 1fr;contain:strict;&.preview{display:flex;justify-content:center;align-items:center}>div.room-timeline-error,>div.room-header-error{display:flex;justify-content:center;align-items:center;height:100%;&.room-timeline-error{grid-area:messageview}&.room-header-error{grid-area:header}}}div.mobile-event-menu-container{overflow:hidden;border-bottom:1px solid var(--border-color);&:empty{display:none}}div#mobile-event-menu-container{grid-area:header;padding-top:var(--window-top-margin);&:not(:empty)+div.room-header{display:none}}div#mobile-thread-event-menu-container{height:3.5rem;box-sizing:border-box;&:not(:empty)+div.right-panel-header{display:none}}div.resize-handle-outer{position:relative;>div.resize-handle-inner{position:absolute;top:0;bottom:0;left:-.25rem;right:-.25rem;cursor:col-resize}}main.matrix-main{--room-list-width: 350px;--right-panel-width: 300px;position:fixed;inset:0;display:grid;grid-template:" roomlist               rh1 roomview" 1fr / var(--room-list-width) 0 1fr;&.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 (max-width: 45rem){&,&.right-panel-open{grid-template:"roomlist roomview rightpanel" 1fr / 100% 100% 100%}transition:.3s;@media (prefers-reduced-motion: reduce){transition:none}&.room-selected{translate:-100% 0}&.right-panel-open{translate:-200% 0}}>div.room-list-resizer{grid-area:rh1;z-index:1}>div.right-panel-resizer{grid-area:rh2;z-index:1}}div.sync-status{position:fixed;top:1rem;left:50%;transform:translate(-50%);padding:1.5rem;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:.5rem;display:flex;gap:1rem;&.errored{border:2px solid var(--error-color);color:var(--error-color);font-weight:700}}main.matrix-login{max-width:42rem;width:100%;padding:3rem 6rem;box-sizing:border-box;box-shadow:0 0 1rem var(--modal-box-shadow-color);margin:calc(2rem + var(--window-top-margin)) auto;@media (width < 800px){max-width:38rem;padding:2rem 4rem;width:calc(100% - 4rem)}@media (width < 500px){padding:1rem;box-shadow:none;margin:0!important;width:100%}h1{margin:0 0 2rem}h1,h2,h3{text-align:center}div.buttons{display:flex;gap:.5rem}button,input{margin-top:.5rem;padding:1rem;font-size:1rem;width:100%;display:block;border-radius:.25rem;box-sizing:border-box}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;padding:1rem;margin-top:.5rem}}: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;--code-background-color: rgba(0, 0, 0, .15);--media-placeholder-default-background: rgba(0, 0, 0, .1);--media-placeholder-button-background: rgba(255, 255, 255, .5);--primary-color: #00c853;--primary-color-dark: #00b24a;--error-color: red;--border-color: #ccc;--pill-background-color: #ccc;--url-preview-background-color: rgba(0, 0, 0, .05);--highlight-pill-background-color: #c00;--highlight-pill-text-color: #fff;--button-hover-color: rgba(0, 0, 0, .2);--light-hover-color: rgba(0, 0, 0, .1);--composer-background-color: #f0f0f0;--timeline-hover-bg-color: #eee;--timeline-highlight-bg-color: rgba(255, 255, 0, .1);--timeline-highlight-hover-bg-color: #eec;--timeline-jump-bg-color: rgba(0, 255, 0, .2);--timeline-jump-hover-bg-color: #cec;--timeline-soft-failed-bg-color: rgba(255, 0, 0, .3);--timeline-policy-server-spammy-bg-color: rgba(255, 0, 75, .2);--room-list-background: linear-gradient(in hsl longer hue, red 0 0, magenta);--room-list-background-overlay: hsla(0, 0%, 96%, .9);--room-list-search-background-overlay: var(--room-list-background-overlay);--space-list-background-overlay: hsla(0, 0%, 96%, .8);--room-list-scrollbar-color: rgba(0, 0, 0, .4) rgba(0, 0, 0, .1);--room-list-entry-hover-color: rgba(0, 0, 0, .075);--room-list-entry-selected-color: rgba(0, 0, 0, .125);--dimmed-overlay-background-color: rgba(0, 0, 0, .75);--modal-box-shadow-color: rgba(0, 0, 0, .1);--emoji-selected-border-color: #cec;--unread-counter-text-color: var(--inverted-text-color);--unread-counter-message-bg: rgba(0, 0, 0, .35);--unread-counter-notification-bg: rgba(50, 150, 0, .7);--unread-counter-marked-unread-bg: var(--unread-counter-notification-bg);--unread-counter-highlight-bg: rgba(200, 0, 0, .7);--space-unread-counter-message-bg: rgb(100, 100, 100, .9);--space-unread-counter-notification-bg: rgb(50, 150, 0);--space-unread-counter-highlight-bg: rgb(200, 0, 0);--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 (max-width: 45rem){--timeline-horizontal-padding: .5rem;--timeline-status-size: 2.25rem}@media (prefers-color-scheme: dark){color-scheme:dark;--background-color: #000;--login-background-color: #111;--text-color: #fff;--inverted-text-color: var(--background-color);--secondary-text-color: #888;--semisecondary-text-color: #bbb;--link-text-color: #4187eb;--code-background-color: rgba(255, 255, 255, .1);--media-placeholder-default-background: rgba(255, 255, 255, .1);--media-placeholder-button-background: rgba(0, 0, 0, .5);--primary-color: #00b24a;--primary-color-dark: #00c853;--error-color: red;--border-color: #222;--pill-background-color: #222;--url-preview-background-color: #222;--button-hover-color: rgba(255, 255, 255, .2);--light-hover-color: rgba(255, 255, 255, .1);--composer-background-color: #0a0a0a;--timeline-hover-bg-color: #111;--timeline-highlight-bg-color: rgba(255, 255, 0, .1);--timeline-highlight-hover-bg-color: #331;--timeline-jump-bg-color: rgba(0, 255, 0, .2);--timeline-jump-hover-bg-color: #131;--room-list-background-overlay: hsla(0, 0%, 4%, .8);--space-list-background-overlay: hsla(0, 0%, 4%, .7);--room-list-scrollbar-color: rgba(255, 255, 255, .4) rgba(255, 255, 255, .1);--room-list-entry-hover-color: rgba(255, 255, 255, .075);--room-list-entry-selected-color: rgba(255, 255, 255, .125);--modal-box-shadow-color: rgba(255, 255, 255, .04);--emoji-selected-border-color: #131;--unread-counter-message-bg: rgba(255, 255, 255, .5);--unread-counter-notification-bg: rgba(150, 255, 0, .7);--unread-counter-highlight-bg: rgba(255, 50, 50, .7);--space-unread-counter-message-bg: rgb(200, 200, 200, .8);--space-unread-counter-notification-bg: rgb(150, 255, 0);--space-unread-counter-highlight-bg: rgb(255, 50, 50);--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);margin:0;padding:0;background-color:var(--background-color);line-height:1.5;touch-action:none;color:var(--text-color);min-height:100vh}html{touch-action:none;background-color:var(--background-color);font-size:16px}#root{display:flex;justify-content:center}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);font-size:1em;background:none;border:none;border-radius:.25rem;padding:0;display:flex;justify-content:center;align-items:center;color:inherit;font-family:var(--font-stack);&:hover,&:focus{background-color:var(--button-hover-color)}&:disabled{cursor:default;color:var(--secondary-text-color);background:none}&.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{position:fixed;inset:var(--window-top-margin) 0 0;z-index:100;display:flex;align-items:center;flex-direction:column;justify-content:center;&.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;margin-top:2rem;padding:1rem;display:flex;flex-direction:column;align-items:center;gap:1rem}}div.pre-main{position:fixed;inset:var(--window-top-margin) 0 0;background-color:var(--login-background-color);&.waiting-to-connect{padding-top:2rem;text-align:center}}a{text-decoration:none;color:var(--link-text-color);&:visited{color:var(--visited-link-text-color)}&:hover:not(.button){text-decoration:underline}}.hidden{display:none!important}