/*
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); - Entfernt, damit die Kachel nicht mehr springt */
}

.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 DER BUTTONS --- */

.ClientView .actions .footer {
    display: block !important; 
    text-align: center !important;
    margin-top: 20px !important;
    width: 100%;
    line-height: 1.8 !important; 
    color: #bdc3c7;
}

/* Reset der Button-Styles: Macht aus den grauen Kästen einfachen Text mit unsichtbarem Rahmen für ruckelfreien Hover */

.ClientView .actions .footer button.change        
{
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid transparent !important; 
    color: #bdc3c7 !important;
    padding: 0 2px !important;
    margin: 0 4px !important;
    font-family: inherit !important;
    font-size: inherit !important;
    cursor: pointer !important;
    display: inline !important;
    transition: all 0.2s ease !important;
}

.ClientView .actions .footer button.custom        
{
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid transparent !important; 
    color: #bdc3c7 !important;
    padding: 0 2px !important;
    margin: 0 4px !important;
    font-family: inherit !important;
    font-size: inherit !important;
    cursor: pointer !important;
    display: inline !important;
    transition: all 0.2s ease !important;
}

.ClientView .actions .footer .custom        
{
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid transparent !important; 
    color: #bdc3c7 !important;
    padding: 0 2px !important;
    margin: 0 4px !important;
    font-family: inherit !important;
    font-size: inherit !important;
    cursor: pointer !important;
    display: inline !important;
    transition: all 0.2s ease !important;
}

.ClientView .actions .footer .custom button        
{
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid transparent !important; 
    color: #bdc3c7 !important;
    padding: 0 2px !important;
    margin: 0 4px !important;
    font-family: inherit !important;
    font-size: inherit !important;
    cursor: pointer !important;
    display: inline !important;
    transition: all 0.2s ease !important;
}

.PreviewView > .footer button.change        
{
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid transparent !important; 
    color: #bdc3c7 !important;
    padding: 0 2px !important;
    margin: 0 4px !important;
    font-family: inherit !important;
    font-size: inherit !important;
    cursor: pointer !important;
    display: inline !important;
    transition: all 0.2s ease !important;
}

/* Der Hover-Effekt: Hellerer Text und lila Unterstrich */

.ClientView .actions .footer button.change:hover
{
    color: #f7f7fa !important; 
    border-bottom: 1px solid #bd93f9 !important; 
}

.ClientView .actions .footer button.custom:hover
{
    color: #f7f7fa !important; 
    border-bottom: 1px solid #bd93f9 !important; 
}

.ClientView .actions .footer .custom:hover
{
    color: #f7f7fa !important; 
    border-bottom: 1px solid #bd93f9 !important; 
}

.ClientView .actions .footer .custom button:hover
{
    color: #f7f7fa !important; 
    border-bottom: 1px solid #bd93f9 !important; 
}

.PreviewView > .footer button.change:hover
{
    color: #f7f7fa !important; 
    border-bottom: 1px solid #bd93f9 !important; 
}

/* Layout-Anpassung für die Custom-Web-Instance-Zeile, damit sie sauber umbricht */

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

/* --- MOBILE ANPASSUNGEN --- */

@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; }
}

.memberCount.hidden,
.topic.hidden {
    display: none !important;
}

.memberCount:has(p:empty),
.topic:empty {
    display: none !important;
}