/*
Copyright 2020 The Matrix.org Foundation C.I.C.
Modified 2026 for Zeitfresser Matrix Community Look & Mobile Fixes
*/

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    border: 2px solid #1e1f29;
    box-sizing: border-box;
}

.spinner::before {
    content: "";
    display: block;
    width: inherit;
    height: inherit;
    border-radius: 100%;
    border-width: 2px;
    border-style: solid;
    border-color: transparent;
    border-top-color: #64748b;
    animation: rotate 0.8s linear infinite;
    box-sizing: border-box;
    margin: calc(-1 * 2px);
}

.ClientListView h2 {
    text-align: center;
    margin: 24px 0;
    font-weight: 600;
}

.ClientView {
    background: #1e1f29;
    border: 1px solid #2f313d;
    border-radius: 4px;
    margin: 16px 0;
    padding: 24px;
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
    display: block;
    text-align: left;
}

.ClientView:hover {
    background: #2f313d !important;
    border-left-color: #bd93f9 !important;
    transform: translateX(5px);
}

.ClientView.isPreferred {
    border-color: #bd93f9;
    background: rgba(189, 147, 249, 0.05);
}

.ClientView .hostedBanner {
    text-align: center;
    margin-bottom: 20px;
    padding: 6px 0;
    border-radius: 4px;
    font-weight: bold;
    font-size: 13px;
    background-color: #bd93f9;
    color: #1e1f29;
    text-transform: uppercase;
}

.ClientView .header { display: flex; align-items: flex-start; }

.ClientView .description { flex: 1 1; }

.ClientView h3 { margin: 0 0 8px 0; font-size: 18px; }

.ClientView .description p { margin: 0; font-size: 13px; color: #bdc3c7; }

.ClientView .clientIcon {
    border-radius: 4px;
    background-color: #ffffff;
    padding: 4px;
    width: 50px;
    height: 50px;
    margin-left: 16px;
    flex-shrink: 0;
}

.ClientView .platforms {
    margin-top: 12px;
    font-size: 12px;
    color: #64748b;
    opacity: 0.8;
}

.InstallClientView .instructions button.tick {
    filter: invert(1); /* Macht schwarze Icons weiß */
}

.ClientView .back {
    display: block;
    margin-top: 20px;
    font-size: 12px;
    color: #64748b;
}

.ClientView .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.ClientView .actions a.badge {
    height: auto !important;
    max-width: 100%;
    display: block;
}

.ClientView .actions img {
    max-width: 160px;
    height: auto;
    display: block;
    margin: 5px auto;
}

/* --- ANPASSUNG FÜR DEN DEZENTEN LOOK --- */

.ClientView .actions .footer {
    display: block !important; /* Kein Flex mehr, damit Links wie Text fließen */
    text-align: center !important;
    margin-top: 20px !important;
    width: 100%;
    line-height: 1.8 !important; /* Gibt den Zeilen etwas Platz */
    color: #bdc3c7;
}

/* Der "Use Custom Web Instance" Bereich bekommt eine eigene Zeile */

.ClientView .actions .footer .custom {
    display: block !important;
    margin-top: 6px !important;
}

/* Sicherstellen, dass der "Change" Button im Textfluss bleibt */

.ClientView .actions .footer button.change {
    display: inline !important;
    margin: 0 4px !important;
}

@media screen and (max-width: 480px) {
    .ClientView {
        padding: 15px;
        margin: 8px 0;
    }
    
    .ClientView .header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .ClientView .clientIcon {
        margin: 0 0 15px 0;
    }
}

.PreviewView {
    text-align: center;
    margin-bottom: 32px;
}

.PreviewView h1 {
    font-size: 26px;
    line-height: 1.2;
    margin-bottom: 8px;
    font-weight: 700;
}

.PreviewView .avatarContainer {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.PreviewView .avatar {
    border-radius: 8px; /* Eckig */
    width: 80px;
    height: 80px;
    border: 3px solid #2f313d;
    object-fit: cover;
}

.PreviewView .defaultAvatar {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    background-color: #383a59;
    background-image: url('images/chat-icon-864347221.svg');
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;
}

.PreviewView .identifier {
    color: #bd93f9;
    font-family: monospace;
    font-size: 13px;
    margin: 8px 0;
    letter-spacing: 0.5px;
}

.PreviewView .memberCount p:not(.placeholder) {
    padding: 6px 12px 6px 28px;
    border-radius: 4px;
    color: #f7f7fa;
    background-image: url(images/member-icon-3597093054.svg);
    background-repeat: no-repeat;
    background-position: 8px center;
    background-color: #383a59;
    display: inline-block;
    font-size: 12px;
}

.PreviewView .topic {
    font-size: 14px;
    line-height: 1.6;
    color: #bdc3c7;
    margin: 24px 0;
}

/* Dark Mode Placeholders */

.placeholder {
    border-radius: 4px;
    background: linear-gradient(120deg, #2f313d, #2f313d 10%, #383a59 calc(10% + 25px), #2f313d calc(10% + 50px));
    animation: flash 2s linear infinite;
    background-size: 200%;
}

@keyframes flash {
    0% { background-position-x: 0; }
    100% { background-position-x: -200%; }
}

.PreviewView h1, 
.PreviewView .identifier, 
.PreviewView .topic {
    word-wrap: break-word;   /* Bricht extrem lange Wörter/IDs um */
    overflow-wrap: break-word;
    max-width: 100%;
}

@media screen and (max-width: 480px) {
    .PreviewView .avatar, 
    .PreviewView .defaultAvatar {
        width: 64px;
        height: 64px;
    }
    
    .PreviewView h1 {
        font-size: 20px; /* Titel etwas dezenter mobil */
    }
}

.CreateLinkView h2 {
    padding: 0 40px;
    word-break: break-all;
    text-align: center;
}

.CreateLinkView form {
    margin-top: 36px;
}

.CreateLinkView form > *:not(:first-child) {
    margin-top: 24px;
}

/*
Copyright 2020 The Matrix.org Foundation C.I.C.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

.OpenLinkView .caption {
    color: #64748b;
    font-size: 12px;
}

.ServerConsentView .actions label {
    display: flex;
    align-items: center;
}

.ServerConsentView .actions {
    margin-top: 24px;
    display: flex;
    align-items: center;
}

.ServerConsentView input[type=submit] {
    flex: 1 1;
    margin-left: 32px;
}

.ServerOptions div {
    margin: 8px 0;
}

.ServerOptions label {
    display: flex;
    align-items: center;
}

.ServerOptions label > .line {
    flex: 1 1;
    border: none;
    border-bottom: 1px solid #64748b;
    padding: 4px 0;
}

/* Globaler Fix für Box-Berechnungen */

* {
    box-sizing: border-box;
}

:root {    /* Tief-Anthrazit */        /* Card Hintergrund */        /* Weiß */              /* Grau */              /* Dunkles Grau */            /* Matrix-Green */      /* Zeitfresser-Lila */
}

html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
}

body {
    background-color: #1e1f29;
    background-image: none !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #bdc3c7;
    padding: 80px 20px 0 20px;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

h1 { 
    color: #f7f7fa; 
    letter-spacing: -0.5px;
    word-wrap: break-word;
}

h2 { 
    color: #f7f7fa; 
    letter-spacing: -0.5px;
    word-wrap: break-word;
}

h3 { 
    color: #f7f7fa; 
    letter-spacing: -0.5px;
    word-wrap: break-word;
}

p { 
    line-height: 1.7; 
    word-wrap: break-word;
}

a { text-decoration: none; color: #f7f7fa; }

body, button, input, textarea {
    font-size: 14px;
    font-style: normal;
}

button, input[type=submit] {
    cursor: pointer;
}

/* Die zentrale Kachel */

.card {
    background-color: #282a36;
    border-radius: 4px;
    border-left: 4px solid #bd93f9;
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.3);
    padding: 2.5rem;
    width: 100%;
}

.RootView {
    margin: 0 auto;
    max-width: 480px;
    width: 100%;
}

/* --- GROSSE BUTTONS (z.B. Download, Continue) --- */

.primary, .secondary {
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    padding: 14px 20px;
    margin: 4px 0 !important; 
    display: block;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 100%; 
    
    /* Simplifizierung: Nur Farbe, keine Bewegung */
    transition: background-color 0.2s ease, filter 0.2s ease;
    transform: none !important;
    -webkit-font-smoothing: antialiased;
}

.primary {
    background: #f7f7fa;
    color: #1e1f29 !important;
    border-radius: 4px;
    border: none;
}

.primary:hover {
    filter: brightness(0.9);
}

.secondary {
    background: transparent;
    color: #f7f7fa;
    border: 1px solid #f7f7fa;
    border-radius: 4px;
}

.secondary:hover {
    background: rgba(255,255,255,0.05);
}

/* --- DEZENTE BUTTONS (Change, Custom Instance, Footer-Style) --- */

.ClientListView button.change {
    background: none !important;
    border: none !important;
    color: #64748b !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: pointer !important;
    display: inline !important; 
    width: auto !important;
    border-bottom: 1px solid rgba(189, 195, 199, 0.3) !important;
    transition: all 0.3s ease !important;
}

.PreviewView button.change {
    background: none !important;
    border: none !important;
    color: #64748b !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: pointer !important;
    display: inline !important; 
    width: auto !important;
    border-bottom: 1px solid rgba(189, 195, 199, 0.3) !important;
    transition: all 0.3s ease !important;
}

.ClientView button.custom {
    background: none !important;
    border: none !important;
    color: #64748b !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: pointer !important;
    display: inline !important; 
    width: auto !important;
    border-bottom: 1px solid rgba(189, 195, 199, 0.3) !important;
    transition: all 0.3s ease !important;
}

.ClientView .footer button {
    background: none !important;
    border: none !important;
    color: #64748b !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: pointer !important;
    display: inline !important; 
    width: auto !important;
    border-bottom: 1px solid rgba(189, 195, 199, 0.3) !important;
    transition: all 0.3s ease !important;
}

.CustomInstanceView .actions button.secondary {
    background: none !important;
    border: none !important;
    color: #64748b !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: pointer !important;
    display: inline !important; 
    width: auto !important;
    border-bottom: 1px solid rgba(189, 195, 199, 0.3) !important;
    transition: all 0.3s ease !important;
}

.footer button {
    background: none !important;
    border: none !important;
    color: #64748b !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: pointer !important;
    display: inline !important; 
    width: auto !important;
    border-bottom: 1px solid rgba(189, 195, 199, 0.3) !important;
    transition: all 0.3s ease !important;
}

.footer a {
    background: none !important;
    border: none !important;
    color: #64748b !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: pointer !important;
    display: inline !important; 
    width: auto !important;
    border-bottom: 1px solid rgba(189, 195, 199, 0.3) !important;
    transition: all 0.3s ease !important;
}

.ClientListView button.change:hover {
    color: #f7f7fa !important;
    border-bottom-color: #bd93f9 !important;
}

.PreviewView button.change:hover {
    color: #f7f7fa !important;
    border-bottom-color: #bd93f9 !important;
}

.ClientView button.custom:hover {
    color: #f7f7fa !important;
    border-bottom-color: #bd93f9 !important;
}

.ClientView .footer button:hover {
    color: #f7f7fa !important;
    border-bottom-color: #bd93f9 !important;
}

.CustomInstanceView .actions button.secondary:hover {
    color: #f7f7fa !important;
    border-bottom-color: #bd93f9 !important;
}

.footer button:hover {
    color: #f7f7fa !important;
    border-bottom-color: #bd93f9 !important;
}

.footer a:hover {
    color: #f7f7fa !important;
    border-bottom-color: #bd93f9 !important;
}

/* Fix für Button-Container */

.actions, 
.ClientView .actions, 
.ClientListView .actions,
.CustomInstanceView .actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 0px !important; 
}

.actions > *:last-child {
    margin-bottom: 0 !important;
}

/* Input Felder */

input[type='text'].large {
    width: 100%;
    padding: 14px;
    background: #1a1a1a !important;
    border: 1px solid #2f313d;
    border-radius: 4px;
    font-size: 14px;
    color: #f7f7fa;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.footer {
    margin-top: 60px;
    padding: 40px 20px;
    text-align: center;
    font-size: 0.85rem;
    color: #bdc3c7;
    opacity: 0.7;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    width: 100%;
}

.footer ul { list-style: none; padding: 0; margin: 0; }

.footer li { display: inline; margin: 0; }

@media screen and (max-width: 480px) {
    body { padding: 40px 10px 0 10px; }
    .card { padding: 1.5rem; border-radius: 2px; }
    h1 { font-size: 1.5rem; }
}

/* --- FIX FÜR NUTZERPROFILE (null-Werte verstecken) --- */

.PreviewView .members[data-count="null"],
.PreviewView .members:empty {
    display: none !important;
}

.PreviewView .topic:empty,
.PreviewView .topic:contains("null") {
    display: none !important;
}

.PreviewView p:empty, 
.PreviewView span:empty {
    display: none !important;
}

.PreviewView h2 + p {
    margin-bottom: 0 !important;
}