/* ChrisEmm Connect – ruhige, einheitliche Oberflächenschicht */

/* Registrierung und Anmeldung */
.password-control .password-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    appearance: none;
}
.password-control .password-toggle i {
    display: block;
    width: 1.1em;
    line-height: 1;
    text-align: center;
}
.view-register .auth-form .auth-consent {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    padding: 14px 15px;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 14px;
    background: rgba(5, 12, 25, .46);
    color: var(--text-soft);
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
}
.view-register .auth-form .auth-consent input[type="checkbox"] {
    display: block;
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    border-radius: 6px;
    accent-color: var(--primary);
    background: transparent;
    cursor: pointer;
}
.view-register .auth-consent span { min-width: 0; }
.view-register .auth-consent a { color: #b9c2ff; text-underline-offset: 3px; }

/* Gemeinsame Seitenstruktur */
body:not(.view-chat) .main-content > section:not(.auth-wrapper):not(.modern-profile-page),
body:not(.view-chat) .main-content > main {
    width: min(100%, 1440px);
    margin-inline: auto;
}
.admin-card,
.profile-modern-card,
.mailbox-card,
.user-center-card {
    border-color: rgba(148, 163, 184, .14) !important;
    background: linear-gradient(150deg, rgba(16, 27, 48, .96), rgba(9, 17, 32, .94)) !important;
    box-shadow: 0 18px 52px rgba(0, 0, 0, .18) !important;
}

/* Chat: Funktionen in eine eigene Werkzeugzeile aufteilen */
.view-chat .main-content { padding: 16px clamp(12px, 2.2vw, 30px) 22px; }
.chat-application {
    gap: 14px;
    max-width: 1840px;
    margin-inline: auto;
}
.chat-sidebar,
.chat-main {
    border-color: rgba(148, 163, 184, .14) !important;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .18);
}
.chat-header { min-height: 82px; padding-inline: clamp(16px, 2vw, 24px); }
.messages { padding: 22px clamp(12px, 2vw, 26px) 28px; }
.chat-composer {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
        "tools tools"
        "preview preview"
        "field send";
    gap: 9px 12px !important;
    padding: 12px 14px 14px !important;
    border-top: 1px solid rgba(148, 163, 184, .14);
    background: rgba(7, 14, 28, .96) !important;
}
.chat-composer-tools {
    grid-area: tools;
    display: flex !important;
    align-items: center;
    gap: 7px !important;
    min-width: 0;
    padding: 0 0 9px !important;
    border-bottom: 1px solid rgba(148, 163, 184, .11);
    overflow-x: auto;
    scrollbar-width: thin;
}
.chat-composer-tools::before {
    content: "Werkzeuge";
    flex: 0 0 auto;
    margin-right: 4px;
    color: #7f90ad;
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.chat-composer-tools .composer-tool {
    flex: 0 0 40px;
    width: 40px !important;
    height: 38px !important;
    min-height: 38px !important;
    border: 1px solid rgba(148, 163, 184, .15) !important;
    border-radius: 11px !important;
    background: rgba(20, 33, 57, .72) !important;
}
.chat-composer-tools .composer-tool:hover,
.chat-composer-tools .composer-tool:focus-visible {
    border-color: rgba(118, 132, 255, .58) !important;
    background: rgba(91, 105, 238, .16) !important;
}
.chat-image-preview { grid-area: preview; }
.composer-field { grid-area: field; min-width: 0; }
.chat-composer .send-button {
    grid-area: send;
    align-self: stretch;
    min-width: 112px;
    min-height: 48px;
    border-radius: 14px;
}
.chat-composer textarea {
    min-height: 48px !important;
    max-height: 132px;
    border: 1px solid rgba(148, 163, 184, .17) !important;
    border-radius: 14px !important;
    background: rgba(15, 26, 46, .74) !important;
}
.online-user { border-radius: 15px; }
.room-item { border-radius: 15px; }

/* Öffentliche Profile: kompakter, klarer und professioneller */
.modern-profile-page {
    width: min(100%, 1380px) !important;
    padding: 0 0 38px !important;
    background: transparent !important;
}
.modern-profile-hero {
    padding-bottom: 22px !important;
    border-radius: 26px !important;
    background: linear-gradient(150deg, rgba(10, 18, 34, .98), rgba(15, 28, 50, .96)) !important;
    box-shadow: 0 26px 80px rgba(0, 0, 0, .3) !important;
}
.modern-profile-cover { height: 238px !important; }
.modern-profile-headline {
    margin-top: -72px !important;
    padding: 0 clamp(18px, 3vw, 36px) 4px !important;
    gap: 18px !important;
}
.modern-profile-avatar {
    width: 142px !important;
    height: 142px !important;
    border-width: 6px !important;
    border-radius: 34px !important;
}
.modern-profile-title { align-items: center !important; min-width: 0; }
.modern-profile-title h1 {
    font-size: clamp(2.1rem, 4vw, 3.45rem) !important;
    line-height: 1 !important;
}
.profile-hero-motto { max-width: 720px; font-size: 1rem !important; }
.profile-hero-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-hero-stats a {
    min-width: 88px !important;
    padding: 9px 12px !important;
    border-radius: 13px !important;
}
.profile-homepage-nav {
    position: static !important;
    width: 100% !important;
    margin: 16px 0 !important;
    padding: 8px !important;
    border-radius: 17px !important;
    background: rgba(10, 18, 34, .9) !important;
    box-shadow: 0 12px 38px rgba(0, 0, 0, .2) !important;
}
.profile-homepage-nav a { flex: 1 1 auto; justify-content: center; text-align: center; }
.modern-profile-grid {
    grid-template-columns: minmax(0, 1.72fr) minmax(280px, .72fr) !important;
    gap: 16px !important;
}
.modern-profile-grid main,
.modern-profile-grid aside { gap: 16px !important; }
.modern-profile-page .profile-modern-card {
    padding: clamp(19px, 2.3vw, 27px) !important;
    border-radius: 20px !important;
    background: linear-gradient(150deg, rgba(14, 25, 46, .95), rgba(9, 17, 32, .94)) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .18) !important;
}
.modern-profile-page .profile-modern-card::after { opacity: .42; }
.profile-modern-card.profile-about-card {
    min-height: 0 !important;
    padding-left: clamp(88px, 8vw, 108px) !important;
}
.profile-dynamic-interest-grid section,
.profile-social-row,
.profile-activity-item {
    border-radius: 14px !important;
    background: rgba(3, 10, 22, .32) !important;
}

/* 24-Stunden-Status */
.status-composer {
    padding: 18px !important;
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 18px !important;
    background: rgba(3, 10, 22, .34) !important;
}
.status-composer-copy { display: grid; gap: 2px; }
.status-composer-copy small { color: #8fa0bb; }
.status-audience {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) minmax(150px, 210px);
    align-items: center;
    gap: 11px !important;
    padding: 11px 12px;
    border: 1px solid rgba(148, 163, 184, .13);
    border-radius: 14px;
    background: rgba(16, 29, 51, .7);
}
.status-audience > i {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(102, 115, 255, .14);
    color: #aab4ff;
}
.status-audience > span { display: grid; min-width: 0; }
.status-audience small { color: #8999b4; font-weight: 500; }
.status-audience select { width: 100%; min-height: 42px; }
.status-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
.status-card { padding: 18px !important; border-radius: 18px !important; }
.status-story-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 42px;
    margin: 8px 0 4px;
    border: 1px solid rgba(126, 140, 255, .28);
    border-radius: 13px;
    color: #dfe4ff;
    background: rgba(91, 103, 225, .12);
    font-weight: 750;
    cursor: pointer;
}
.status-story-open:hover { background: rgba(91, 103, 225, .22); }
.status-card .status-content-image,
.status-card .status-content-video { max-height: 620px; object-fit: contain; background: #050b16; }
.status-social-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.status-private-reply {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(148, 163, 184, .12);
}
.status-private-reply label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 0 13px;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 13px;
    background: rgba(7, 14, 28, .72);
}
.status-private-reply label i { color: #9ba8ff; }
.status-private-reply input {
    width: 100%;
    min-height: 46px;
    border: 0 !important;
    background: transparent !important;
    color: inherit;
    outline: 0;
}
.status-owner-insights {
    margin-top: 14px;
    border: 1px solid rgba(148, 163, 184, .13);
    border-radius: 14px;
    background: rgba(3, 10, 22, .3);
}
.status-owner-insights > summary {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
    font-weight: 800;
}
.status-owner-insights > summary span {
    margin-left: auto;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(102, 115, 255, .16);
    color: #b5bdff;
    font-size: .75rem;
}
.status-viewer-list,
.status-reply-list { display: grid; gap: 7px; padding: 0 12px 12px; }
.status-viewer-list a,
.status-reply-list article {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 9px;
    border-radius: 11px;
    background: rgba(18, 31, 53, .64);
    color: inherit;
    text-decoration: none;
}
.status-viewer-list img,
.status-reply-list img { width: 38px !important; height: 38px !important; border-radius: 11px; object-fit: cover; }
.status-viewer-list span,
.status-reply-list article > span { display: grid; min-width: 0; }
.status-viewer-list small,
.status-reply-list small { color: #8999b4; }
.status-reply-list p { margin: 4px 0 0; color: #d6deec; }

.status-story-dialog {
    width: min(520px, calc(100vw - 24px));
    max-width: none;
    height: min(880px, calc(100dvh - 24px));
    max-height: none;
    padding: 0;
    border: 0;
    border-radius: 24px;
    color: #f5f7ff;
    background: #050913;
    overflow: hidden;
    box-shadow: 0 30px 100px rgba(0, 0, 0, .72);
}
body.status-story-is-open { overflow: hidden !important; }
.status-story-dialog::backdrop { background: rgba(0, 3, 10, .88); backdrop-filter: blur(12px); }
.status-story-shell { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; height: 100%; }
.status-story-progress { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 12px 14px 7px; }
.status-story-progress span { height: 3px; border-radius: 99px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.status-story-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: #fff; }
.status-story-progress .is-complete i { width: 100%; }
.status-story-progress .is-active i { animation: status-story-progress 7s linear forwards; }
.status-story-dialog.is-paused .status-story-progress .is-active i { animation-play-state: paused; }
.status-story-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px 12px; }
.status-story-toolbar .status-author { margin: 0; }
.status-story-toolbar > div:last-child { display: flex; gap: 6px; }
.status-story-toolbar button,
.status-story-direction { display: grid; place-items: center; border: 0; color: #fff; background: rgba(255, 255, 255, .1); cursor: pointer; }
.status-story-toolbar button { width: 38px; height: 38px; border-radius: 50%; }
.status-story-stage { display: grid; place-items: center; min-height: 0; overflow: hidden; background: radial-gradient(circle at 50% 40%, #18213b 0, #080d19 64%, #04070d 100%); }
.status-story-stage img,
.status-story-stage video { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
.status-story-text-background { display: grid; place-items: center; width: 100%; height: 100%; font-size: clamp(64px, 16vw, 120px); color: rgba(255, 255, 255, .17); background: linear-gradient(145deg, #545bda, #9d4edd 55%, #e05e83); }
.status-story-caption { min-height: 62px; padding: 15px 56px 18px; text-align: center; background: linear-gradient(180deg, rgba(5, 9, 19, .78), #050913); }
.status-story-caption p { margin: 0; line-height: 1.55; overflow-wrap: anywhere; }
.status-story-direction { position: absolute; z-index: 2; top: 50%; width: 42px; height: 54px; border-radius: 13px; transform: translateY(-50%); }
.status-story-direction.is-previous { left: 10px; }
.status-story-direction.is-next { right: 10px; }
@keyframes status-story-progress { from { width: 0; } to { width: 100%; } }

/* Profilbearbeitung und Galerie */
.profile-center-shell { grid-template-columns: 230px minmax(0, 1fr) !important; gap: 18px !important; }
.profile-center-nav { border-radius: 18px !important; background: rgba(10, 19, 35, .94) !important; }
.profile-modern-form { gap: 16px !important; }
.profile-modern-form > .profile-modern-card { border-radius: 20px !important; box-shadow: 0 18px 52px rgba(0, 0, 0, .2) !important; }
.form-grid { gap: 14px !important; }

@media (max-width: 1050px) {
    .modern-profile-grid { grid-template-columns: 1fr !important; }
    .profile-center-shell { grid-template-columns: 1fr !important; }
}
@media (max-width: 760px) {
    .view-chat .main-content { padding: 0; }
    .chat-application { gap: 0; }
    .chat-composer {
        grid-template-columns: minmax(0, 1fr) auto !important;
        padding: 10px !important;
    }
    .chat-composer-tools::before { content: "Mehr"; }
    .chat-composer .send-button { min-width: 82px; }
    .modern-profile-cover { height: 190px !important; }
    .modern-profile-headline { margin-top: -54px !important; align-items: flex-start !important; }
    .modern-profile-avatar { width: 108px !important; height: 108px !important; border-radius: 26px !important; }
    .modern-profile-title { width: 100%; align-items: flex-start !important; }
    .modern-profile-title h1 { font-size: 2rem !important; }
    .profile-homepage-nav { overflow-x: auto; }
    .profile-homepage-nav a { flex: 0 0 auto; }
    .profile-modern-card.profile-about-card { padding: 76px 18px 20px !important; }
    .status-audience { grid-template-columns: 38px minmax(0, 1fr); }
    .status-audience select { grid-column: 1 / -1; }
}
@media (max-width: 430px) {
    .view-register .auth-form .auth-consent { padding: 12px; }
    .chat-composer-tools .composer-tool { flex-basis: 38px; width: 38px !important; }
    .chat-composer .send-button { min-width: 74px; padding-inline: 12px; }
    .status-private-reply { grid-template-columns: 1fr; }
    .status-private-reply .button { width: 100%; }
    .status-story-dialog { width: 100vw; height: 100dvh; border-radius: 0; }
    .status-story-direction { width: 38px; height: 48px; }
    .status-story-caption { padding-inline: 52px; }
}

@media (prefers-reduced-motion: reduce) {
    .status-story-progress .is-active i { animation: none; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .profile-modern-card,
    .profile-hero-stats a,
    .modern-profile-hero .button { transform: none !important; transition: none !important; }
}