/* Firestorm: App-Symbole in der Kopfleiste nur als Icons ohne Beschriftung, grösser (08.09.2026, User-Vorgabe) */
#header .app-menu-entry .app-menu-entry__icon, #header .app-menu-entry img, #header .app-menu__list .app-menu-entry img { width: 30px !important; height: 30px !important; }
#header .app-menu-entry { width: 56px !important; margin: 0 2px !important; }
#header .app-menu-entry__label, #header .app-menu-entry .app-menu-entry__label { display: none !important; }
#header .app-menu-entry__link, #header .app-menu-entry a { display: flex !important; align-items: center !important; justify-content: center !important; height: 100% !important; }
/* Symbole starr: keine Hoch-Bewegung beim Überfahren/aktiv (User-Vorgabe 08.09.2026) */
#header .app-menu-entry__icon, #header .app-menu-entry:hover .app-menu-entry__icon, #header .app-menu-entry:focus-within .app-menu-entry__icon, #header .app-menu-entry--active .app-menu-entry__icon { margin: 0 !important; transform: none !important; transition: none !important; }
/* OfficeMail: Terminpläne (Buchungsseiten) ausblenden, brauchen lokale Nextcloud-Kalender (08.09.2026) */
.appointment-config-list, .app-navigation-entry--appointments, #app-navigation-vue .appointment-config-list { display: none !important; }
.appointment-config-modal { display: none !important; }
/* OfficeMail: Verfügbarkeit/Terminvorschläge (Free-Busy) im Termin-Editor ausblenden, braucht Nextcloud-interne Kalender (08.09.2026) */
.availability, .free-busy-block, .blocking-event-free-busy, .freebusy-caption, .suggested, [class*='free-busy'], [class*='freebusy'] { display: none !important; }
/* OfficeMail: Besprechungsvorschläge (Meeting proposals) ausblenden, braucht Nextcloud-internes Frei/Belegt (08.09.2026) */
.proposal-list, .proposal-list__caption, [class*="proposal-"] { display: none !important; }
/* OfficeMail: Besitzübertragung (Files-Personal-Settings unter Einstellungen > Teilen) ausblenden (08.09.2026) */
#files-personal-settings, div.section:has(> #files-personal-settings), div.section:has(#files-personal-settings) { display: none !important; }
/* OfficeMail: Nextcloud-Werbeblock (Gründe/Facebook/Bluesky/Newsletter) unter Persönliche Informationen und Menüpunkt Sicherheit ausblenden (User-Vorgabe 08.09.2026) */
#body-settings .development-notice { display: none !important; }
#app-navigation-vue li:has(> a[href$="/settings/user/security"]), #app-navigation li:has(> a[href$="/settings/user/security"]), #app-navigation-vue a[href$="/settings/user/security"] { display: none !important; }
/* Mail-App: grosse Dialoge (Verfassen, Kontoeinstellungen) bildschirmfüllend, Kontaktspalte im Verfassen-Fenster ausblenden (10.09.2026) */
body:has(#content-vue.app-mail) .modal-wrapper--large .modal-container { max-width: 1400px !important; width: 92vw !important; height: 88vh !important; max-height: 92vh !important; }
.modal-content > .right-pane { display: none !important; }

/* fst-stern-rot: markierte Mails mit rotem statt gelbem Stern (User-Entscheid 10.09.2026, Ticket FST-2026-91954) */
.app-mail .favorite-icon-style svg, .app-mail .favorite-icon-style svg path { fill: #d61f1f !important; }
.app-mail .icon-starred:not([data-starred="false"]) { background-image: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27><path fill=%27%23d61f1f%27 d=%27M8 .9l2.2 4.6 5 .7-3.6 3.5.9 5L8 12.3l-4.5 2.4.9-5L.8 6.2l5-.7z%27/></svg>") !important; }
/* Office-Einstellungen: Abschnitt Dokumentsignatur ausblenden (Free-Stufe, User-Wunsch 10.09.2026) */
.docsign-section, .docsign-section + p { display: none !important; }
/* Persönliche Einstellungen: Menüpunkt und Seite "Office" (richdocuments) ausblenden (User-Entscheid 11.09.2026) */
#app-navigation a[href$="/settings/user/richdocuments"], #app-navigation li:has(> a[href$="/settings/user/richdocuments"]) { display: none !important; }
#richdocuments, .settings-section:has(#richdocuments-personal), form#richdocuments-personal { display: none !important; }

/* Persönliche Einstellungen: Menüpunkt und Seite "Verfügbarkeit" (Arbeitszeiten + Abwesenheit) ausblenden; Arbeitszeiten brauchen Nextcloud-internes Frei/Belegt, Abwesenheit läuft über die Kontoeinstellungen der E-Mail-App, Abschnitt Automatische Antworten (User-Entscheid 11.09.2026, Ticket FST-2026-39346) */
#app-navigation li[data-section-id="availability"], #app-navigation li:has(> a[href$="/settings/user/availability"]), #app-navigation-vue li:has(> a[href$="/settings/user/availability"]) { display: none !important; }
#settings-personal-availability, #availability.settings-section, #absence.settings-section { display: none !important; }
/* Mail-App: Auswahl "Der Autoresponder folgt den Systemeinstellungen" ausblenden, sie zeigt auf die versteckte Seite */
input#ooo-follow-system, label[for="ooo-follow-system"], .checkbox-radio-switch:has(> input#ooo-follow-system), span:has(> input#ooo-follow-system) { display: none !important; }

/* Persönliche Einstellungen: Menüpunkte "Teilen" und "Ablauf" ausblenden, für Kunden ohne Nutzen (User-Entscheid 11.09.2026); Seiten per URL bleiben für den Support erreichbar. "Mailserver-Kalender" bleibt sichtbar (User 11.09.2026), zeigt nur noch den Mailserver ohne Produktname */
#app-navigation li[data-section-id="sharing"], #app-navigation li[data-section-id="workflow"] { display: none !important; }

/* ===== fst-skin 2026-09-11: OfficeMail-Optik nach WHMCS-Vorlage (hell, eckig, Open Sans); hell/dunkel folgt weiterhin Nextcloud ===== */
@font-face{font-family:'Open Sans';font-style:normal;font-weight:300;font-display:swap;src:url(/office/themes/fst/fonts/open-sans-300.woff2) format('woff2')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/office/themes/fst/fonts/open-sans-regular.woff2) format('woff2')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/office/themes/fst/fonts/open-sans-600.woff2) format('woff2')}
/* Struktur (hell und dunkel): Schrift, keine Rundungen, kein schwebender Inhaltsrahmen */
:root,body{
  --font-face:'Open Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif !important;
  --body-container-margin:0px !important;
  --body-container-radius:0px !important;
  --border-radius:3px !important;
  --border-radius-large:4px !important;
  --border-radius-element:4px !important;
  --border-radius-container:4px !important;
  --border-radius-container-large:6px !important;
}
body{font-family:var(--font-face)}
/* Farben je Design. Nextcloud-Standarddesign folgt dem System per Media-Query OHNE data-theme-Attribut, gewählte Designs setzen body[data-theme-light|dark] */
/* Hell: neutrales Grau statt Hellblau, App-Symbole (weisse SVGs) invertiert, aktiv blau */
body[data-theme-light]{
  --color-primary-element-light:#eef1f4 !important;
  --color-primary-element-light-hover:#e3e7ec !important;
  --color-primary-element-light-text:#1d1d1b !important;
  --color-main-text:#1d1d1b !important;
  --color-border:#e3e6ea !important;
  --color-border-dark:#d5d9de !important;
  --color-background-hover:#f2f4f6 !important;
  --color-background-dark:#e9ecef !important;
  --color-background-darker:#dde1e6 !important;
}
body[data-theme-light]:not(#body-login){background:#f4f6f8 !important}
body[data-theme-light] #header .app-menu-icon__icon{filter:invert(100%) !important}
body[data-theme-light] #header .app-menu-entry--active .app-menu-icon__icon{filter:brightness(0) saturate(100%) invert(38%) sepia(93%) saturate(2400%) hue-rotate(190deg) brightness(96%) contrast(101%) !important}
body[data-theme-light] #header .app-menu-entry--active::before{background:#0083E1 !important}
body[data-theme-light] #app-navigation-vue{background:#f7f8fa !important;border-right:1px solid #e3e6ea}
@media (prefers-color-scheme: light){
  body:not([data-theme-dark]){
    --color-primary-element-light:#eef1f4 !important;
    --color-primary-element-light-hover:#e3e7ec !important;
    --color-primary-element-light-text:#1d1d1b !important;
    --color-main-text:#1d1d1b !important;
    --color-border:#e3e6ea !important;
    --color-border-dark:#d5d9de !important;
    --color-background-hover:#f2f4f6 !important;
    --color-background-dark:#e9ecef !important;
    --color-background-darker:#dde1e6 !important;
  }
  body:not([data-theme-dark]):not(#body-login){background:#f4f6f8 !important}
  body:not([data-theme-dark]) #header .app-menu-icon__icon{filter:invert(100%) !important}
  body:not([data-theme-dark]) #header .app-menu-entry--active .app-menu-icon__icon{filter:brightness(0) saturate(100%) invert(38%) sepia(93%) saturate(2400%) hue-rotate(190deg) brightness(96%) contrast(101%) !important}
  body:not([data-theme-dark]) #header .app-menu-entry--active::before{background:#0083E1 !important}
  body:not([data-theme-dark]) #app-navigation-vue{background:#f7f8fa !important;border-right:1px solid #e3e6ea}
}
/* Dunkel: Kopfleiste in Inhaltsfarbe (dunkel), Symbole weiss, aktiv hellblau */
body[data-theme-dark] #header .app-menu-icon__icon{filter:none !important}
body[data-theme-dark] #header .app-menu-entry--active .app-menu-icon__icon{filter:brightness(0) saturate(100%) invert(60%) sepia(55%) saturate(1600%) hue-rotate(185deg) brightness(104%) !important}
body[data-theme-dark] #header .app-menu-entry--active::before{background:#3ea0f0 !important}
body[data-theme-dark] #app-navigation-vue{background:var(--color-background-dark) !important;border-right:1px solid var(--color-border)}
@media (prefers-color-scheme: dark){
  body:not([data-theme-light]) #header .app-menu-icon__icon{filter:none !important}
  body:not([data-theme-light]) #header .app-menu-entry--active .app-menu-icon__icon{filter:brightness(0) saturate(100%) invert(60%) sepia(55%) saturate(1600%) hue-rotate(185deg) brightness(104%) !important}
  body:not([data-theme-light]) #header .app-menu-entry--active::before{background:#3ea0f0 !important}
  body:not([data-theme-light]) #app-navigation-vue{background:var(--color-background-dark) !important;border-right:1px solid var(--color-border)}
}
/* Kopfleiste: Hintergrund wie Inhalt, Trennlinie; Aktiv-Markierung bleibt auch beim Überfahren der Leiste sichtbar */
#header .app-menu-entry--active::before{opacity:1 !important}
#header{background:var(--color-main-background) !important;border-bottom:1px solid var(--color-border);box-shadow:none;color:var(--color-main-text) !important}
/* Logo: bleibt das Theming-Logo (Firestorm-Zeichen), keine Wortmarke (User 11.09.2026: Logo ist mit Plesk verbunden) */
#header .app-menu-entry__label,#header .header-end .button-vue,#header .header-end .header-menu__trigger,#header .header-end .header-menu__trigger svg{color:var(--color-main-text) !important}
#header .header-end .header-menu__trigger svg,#header .header-end .notifications-button__icon svg{fill:var(--color-main-text)}
#header .header-end .header-menu__trigger,#header .header-end .button-vue{filter:none !important}
#header #user-menu .avatardiv{box-shadow:0 0 0 1px var(--color-border-dark)}
#content-vue,#content{border-radius:0 !important;box-shadow:none}
/* Login-Seite nach WHMCS-Vorlage (immer hell) */
#body-login{background:
  radial-gradient(circle at 18% 28%,rgba(255,206,160,.55),transparent 38%),
  radial-gradient(circle at 82% 72%,rgba(150,190,255,.55),transparent 42%),
  radial-gradient(circle at 60% 15%,rgba(255,236,190,.5),transparent 32%),
  radial-gradient(circle at 35% 85%,rgba(255,180,200,.35),transparent 30%),
  linear-gradient(#f6f7fa,#e8ecf2) !important;
  background-attachment:fixed !important;
  font-family:var(--font-face);color:#333}
#body-login .wrapper{width:100%}
#body-login #header{background:transparent !important;border:none}
#body-login #header .logo{margin:0 auto 22px;filter:none !important}
#body-login .guest-box.login-box,#body-login .guest-box{background:#ffffff !important;border-radius:0 !important;box-shadow:0 2px 14px rgba(0,0,0,.14);color:#333 !important}
#body-login .login-box{padding:26px 20px 18px;max-width:400px;width:400px}
/* Ladeanzeige, solange Vue (core-common.js/core-login.js) noch nicht geladen hat: #login ist bis dahin ein leeres div.
   Reines CSS, kein JS noetig - verschwindet automatisch, sobald Vue den Inhalt einsetzt (dann greift :empty nicht mehr). */
#body-login #login:empty{display:block;background:#fff !important;box-shadow:0 2px 14px rgba(0,0,0,.14);max-width:400px;width:400px;margin:0 auto;padding:70px 20px;box-sizing:border-box}
#body-login #login:empty::after{content:"";display:block;width:32px;height:32px;margin:0 auto;border:3px solid #e3e6ea;border-top-color:#0083E1;border-radius:50%;animation:fst-login-spin .8s linear infinite}
@keyframes fst-login-spin{to{transform:rotate(360deg)}}
#body-login .login-form__headline{font-weight:400;font-size:24px;text-align:center;color:#333 !important;margin:0 0 18px}
#body-login .input-field__input{border-radius:3px !important;border:1px solid #cfd4da !important;background:#fff !important;color:#333 !important;box-shadow:none}
#body-login .input-field__input:focus{border-color:#0083E1 !important;box-shadow:0 0 0 2px rgba(0,131,225,.15)}
#body-login .input-field__label{color:#666 !important;background:#fff}
#body-login .input-field__trailing-button,#body-login .input-field__trailing-button svg{color:#666 !important}
#body-login .login-form .button-vue--vue-primary,#body-login .login-form button[type=submit]{background:#0083E1 !important;color:#fff !important;border-radius:3px !important;font-weight:600;text-transform:uppercase;letter-spacing:.3px;border-top:1px solid #e8e8e8}
#body-login .login-form .button-vue--vue-primary .material-design-icon{display:none}
#body-login .login-form__fieldset>a,#body-login .login-form a{color:#0083E1 !important;font-weight:400}
#body-login .checkbox-radio-switch__content,#body-login .checkbox-content__text{color:#333 !important}
#body-login .checkbox-radio-switch--checked .checkbox-radio-switch__icon,#body-login .checkbox-radio-switch__icon{color:#0083E1 !important}
#body-login footer.guest-box{display:none !important}
/* Login: nur "E-Mail-Adresse" als Feldname (4 Sprachen)
   Nicht mehr per font-size:0 auf dem Label selbst (das Label positioniert sich im Ruhezustand
   ueber "inset-block-start: calc((clickable-area - 1lh) / 2)" - mit font-size:0 wird 1lh ebenfalls 0,
   dadurch sass der Text zu tief. Stattdessen Original-Text nur unsichtbar machen (Farbe/Einzug),
   Ersatztext per ::after absolut ueber das (unveraendert grosse) Label legen. */
#body-login .login-form .input-field:has(#user) .input-field__label{color:transparent !important}
#body-login .login-form .input-field:has(#user) .input-field__label::after{content:"E-Mail-Adresse";position:absolute;inset-inline-start:0;inset-block-start:0;color:#666}
html[lang^="en"] #body-login .login-form .input-field:has(#user) .input-field__label::after{content:"Email address"}
html[lang^="fr"] #body-login .login-form .input-field:has(#user) .input-field__label::after{content:"Adresse e-mail"}
html[lang^="it"] #body-login .login-form .input-field:has(#user) .input-field__label::after{content:"Indirizzo e-mail"}
/* Einstellungen > Aussehen und Barrierefreiheit: nur System/Hell/Dunkel; keine Nextcloud-Vorschaubilder/-Texte, kein Primärfarbe/Hintergrund/Tastaturkürzel/Navigationsleiste (User 11.09.2026) */
#settings-personal-theming .settings-section.theming > p{display:none !important}
#settings-personal-theming .settings-section:not(.theming){display:none !important}
#settings-personal-theming .theming__preview-image{display:none !important}
#settings-personal-theming .theming__preview:not(.theming__preview--default):not(.theming__preview--light):not(.theming__preview--dark){display:none !important}
#settings-personal-theming .theming__preview{min-height:0;margin-bottom:12px}
/* Mail: leerer Lesebereich (Willkommen) ohne Nextcloud-Blauverlauf, gleicher weicher Verlauf wie die Login-Seite (User 11.09.2026) */
#content-vue .no-message-selected,#content-vue .no-message-selected--themed{background-image:radial-gradient(circle at 18% 28%,rgba(255,206,160,.55),transparent 38%),radial-gradient(circle at 82% 72%,rgba(150,190,255,.55),transparent 42%),radial-gradient(circle at 60% 15%,rgba(255,236,190,.5),transparent 32%),radial-gradient(circle at 35% 85%,rgba(255,180,200,.35),transparent 30%),linear-gradient(#f6f7fa,#e8ecf2) !important;background-size:cover !important;background-position:center !important}
body[data-theme-dark] #content-vue .no-message-selected{background-image:radial-gradient(circle at 18% 28%,rgba(120,90,60,.35),transparent 38%),radial-gradient(circle at 82% 72%,rgba(40,80,140,.45),transparent 42%),radial-gradient(circle at 60% 15%,rgba(90,80,50,.3),transparent 32%),linear-gradient(#202326,#171717) !important}
@media (prefers-color-scheme: dark){
  body:not([data-theme-light]) #content-vue .no-message-selected{background-image:radial-gradient(circle at 18% 28%,rgba(120,90,60,.35),transparent 38%),radial-gradient(circle at 82% 72%,rgba(40,80,140,.45),transparent 42%),radial-gradient(circle at 60% 15%,rgba(90,80,50,.3),transparent 32%),linear-gradient(#202326,#171717) !important}
}
/* Einstellungen: "Aussehen und Barrierefreiheit" heisst "Design" (Menü und Seitentitel; Wort in de/en/fr/it gleich) */
#app-navigation li[data-section-id="theming"] a span,#app-navigation-vue li[data-section-id="theming"] a span{font-size:0 !important}
#app-navigation li[data-section-id="theming"] a span::after,#app-navigation-vue li[data-section-id="theming"] a span::after{content:"Design";font-size:var(--default-font-size,15px)}
#settings-personal-theming .settings-section.theming > h2.settings-section__name{font-size:0 !important}
#settings-personal-theming .settings-section.theming > h2.settings-section__name::after{content:"Design";font-size:20px;font-weight:bold}
/* Globale Suche: Titel "Einheitliche Suche" und Platzhalter ohne Apps/Schlagworte (de/en/fr/it) */
#unified-search h2.dialog__name{font-size:0 !important}
#unified-search h2.dialog__name::after{content:"Globale Suche";font-size:21px;font-weight:bold}
html[lang^="en"] #unified-search h2.dialog__name::after{content:"Global search"}
html[lang^="fr"] #unified-search h2.dialog__name::after{content:"Recherche globale"}
html[lang^="it"] #unified-search h2.dialog__name::after{content:"Ricerca globale"}
#unified-search .unified-search-modal__header .input-field__label{font-size:0 !important}
#unified-search .unified-search-modal__header .input-field__label::after{content:"E-Mails, Kontakte, Termine und Dateien durchsuchen …";font-size:var(--default-font-size,15px)}
html[lang^="en"] #unified-search .unified-search-modal__header .input-field__label::after{content:"Search emails, contacts, events and files …"}
html[lang^="fr"] #unified-search .unified-search-modal__header .input-field__label::after{content:"Rechercher dans les e-mails, contacts, événements et fichiers …"}
html[lang^="it"] #unified-search .unified-search-modal__header .input-field__label::after{content:"Cerca in e-mail, contatti, eventi e file …"}
/* Benutzermenü oben rechts: "Aussehen und Barrierefreiheit" -> "Design" */
#header-menu-user-menu a#accessibility_settings .list-item-content__name{font-size:0 !important}
#header-menu-user-menu a#accessibility_settings .list-item-content__name::after{content:"Design";font-size:var(--default-font-size,15px)}
/* Persönliche Informationen: Nextcloud-E-Mail-Feld ausgeblendet (fstdav setzt die Postfachadresse automatisch, Passwort-Reset läuft über Plesk) */
#personal-settings section.section-emails{display:none !important}
/* Mail: Ziehbild beim Drag-and-drop. Die Mail-App hängt .draggable-envelope-ghost unpositioniert an den Body; ohne eigene Ebene nimmt Chrome den Seitenausschnitt oben links als Ziehbild (User 11.09.2026). Eigene Ebene, hinter der Seite. */
.draggable-envelope-ghost{position:fixed !important;top:0 !important;left:40px !important;z-index:-1 !important;pointer-events:none;isolation:isolate;background:transparent}
/* Einstellungen "Design": Farbpaletten-Symbol statt Barrierefreiheits-Männchen (Menü links und Benutzermenü), User 11.09.2026 */
#app-navigation li[data-section-id="theming"] a img,#app-navigation-vue li[data-section-id="theming"] a img,#header-menu-user-menu a#accessibility_settings img.account-menu-entry__icon{content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M17.5 12A1.5 1.5 0 0 1 16 10.5 1.5 1.5 0 0 1 17.5 9 1.5 1.5 0 0 1 19 10.5 1.5 1.5 0 0 1 17.5 12m-3-4A1.5 1.5 0 0 1 13 6.5 1.5 1.5 0 0 1 14.5 5 1.5 1.5 0 0 1 16 6.5 1.5 1.5 0 0 1 14.5 8m-5 0A1.5 1.5 0 0 1 8 6.5 1.5 1.5 0 0 1 9.5 5 1.5 1.5 0 0 1 11 6.5 1.5 1.5 0 0 1 9.5 8m-3 4A1.5 1.5 0 0 1 5 10.5 1.5 1.5 0 0 1 6.5 9 1.5 1.5 0 0 1 8 10.5 1.5 1.5 0 0 1 6.5 12M12 3a9 9 0 0 0-9 9 9 9 0 0 0 9 9 1.5 1.5 0 0 0 1.5-1.5c0-.39-.15-.74-.39-1-.23-.27-.38-.62-.38-1A1.5 1.5 0 0 1 14.23 16H16a5 5 0 0 0 5-5c0-4.42-4.03-8-9-8Z"/></svg>') !important}
/* fst-skin ende */

/* ===== fst-skin 2026-09-16: Kundenpunkte Mail-Liste und Handy (Ticket Zimmerer/malenta, User-Entscheid) ===== */
/* Ungelesene Mails deutlicher: heller Farbton, Balken links, Absender und Betreff fett. Vorher nur fette Betreffzeile und ein kleiner Punkt. Aktive (geöffnete) Zeile bleibt wie gehabt. */
.app-mail .envelope:not(.seen):not(.list-item__wrapper--active) .list-item{background:var(--color-primary-element-light);box-shadow:inset 3px 0 0 var(--color-primary-element)}
.app-mail .envelope:not(.seen):not(.list-item__wrapper--active) .list-item:hover,.app-mail .envelope:not(.seen):not(.list-item__wrapper--active) .list-item:focus-within{background:var(--color-background-hover)}
.app-mail .envelope:not(.seen) .list-item-content__name{font-weight:700;color:var(--color-main-text)}
.app-mail .envelope:not(.seen) .envelope__subtitle__subject__text{font-weight:700}
/* Absender und Datum überlappten sich bei langen Adressen (Absenderzeile durfte 78 % breit werden, das Datum liegt rechts auf derselben Höhe). Absender lässt dem Datum jetzt Platz. */
.app-mail .envelope .list-item-content__name{max-width:calc(100% - 104px) !important}
/* Handy: Verfassen-Fenster bildschirmfüllend (vorher 92vw/88vh mit Rändern), Sitzungsleiste unten ausgeblendet, solange das Fenster offen ist. */
@media (max-width:600px){
  body:has(#content-vue.app-mail) .modal-wrapper--large .modal-container,body:has(#content-vue.app-mail) .modal-wrapper--normal .modal-container{width:100vw !important;max-width:100vw !important;height:100vh !important;height:100dvh !important;max-height:100vh !important;max-height:100dvh !important;border-radius:0 !important}
  body:has(.modal-mask .message-composer) .composer-session{display:none !important}
}