/* ============================================================
   VARIABLES
   ============================================================ */

:root {

    --blue: #1565c0;
    --blue-dark: #0d47a1;

    --green: #2e7d32;

    --black: #111111;

    --white: #ffffff;

    --gray-50: #f7f7f7;
    --gray-100: #eeeeee;
    --gray-200: #dddddd;
    --gray-400: #999999;
    --gray-600: #666666;

}


/* ============================================================
   RESET
   ============================================================ */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html,
body {

    width: 100%;

    height: 100%;

}


body {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: var(--black);

}


/* ============================================================
   HELPERS
   ============================================================ */

.hidden {

    display: none !important;

}


/* ============================================================
   LOGIN
   ============================================================ */

.login-body {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--green)
        );

}


.auth-box {

    width: 100%;

    max-width: 420px;

    background: var(--white);

    border-radius: 18px;

    padding: 35px;

    box-shadow:
        0 20px 50px
        rgba(0,0,0,0.25);

}


.auth-logo {

    width: 70px;

    height: 70px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 20px;

    background: var(--blue);

    color: white;

    font-weight: bold;

    font-size: 20px;

}


.auth-box h1 {

    text-align: center;

    margin-bottom: 8px;

}


.auth-description {

    text-align: center;

    color: var(--gray-600);

    margin-bottom: 25px;

}


.auth-box label {

    display: block;

    font-weight: bold;

    margin-top: 15px;

    margin-bottom: 7px;

}


.auth-box input {

    width: 100%;

    padding: 13px;

    border: 2px solid var(--gray-200);

    border-radius: 10px;

    font-size: 16px;

    outline: none;

}


.auth-box input:focus {

    border-color: var(--blue);

}


.primary-button {

    width: 100%;

    margin-top: 22px;

    padding: 14px;

    border: none;

    border-radius: 10px;

    background: var(--blue);

    color: white;

    font-size: 16px;

    font-weight: bold;

    cursor: pointer;

}


.primary-button:hover {

    background: var(--blue-dark);

}


.switch-button {

    width: 100%;

    margin-top: 18px;

    padding: 10px;

    border: none;

    background: transparent;

    color: var(--blue);

    cursor: pointer;

    font-weight: bold;

}


.error-message {

    background: #ffebee;

    color: #b71c1c;

    padding: 12px;

    border-radius: 8px;

    margin-bottom: 15px;

    font-size: 14px;

}


/* ============================================================
   CHAT PAGE
   ============================================================ */

.chat-page {

    height: 100vh;

    overflow: hidden;

    background: var(--gray-100);

}


.chat-app {

    width: 100%;

    height: 100vh;

    display: flex;

    background: white;

}


/* ============================================================
   SIDEBAR
   ============================================================ */

.sidebar {

    width: 350px;

    min-width: 350px;

    height: 100%;

    display: flex;

    flex-direction: column;

    background: white;

    border-right: 1px solid var(--gray-200);

}


.sidebar-top {

    padding: 16px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom: 1px solid var(--gray-200);

}


.my-profile {

    display: flex;

    align-items: center;

    gap: 10px;

}


.my-profile-info {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.my-profile-info span {

    font-size: 12px;

    color: var(--gray-600);

}


.logout-button {

    color: #d32f2f;

    text-decoration: none;

    font-size: 13px;

    font-weight: bold;

}


/* ============================================================
   AVATAR
   ============================================================ */

.avatar {

    border-radius: 50%;

    object-fit: cover;

    background: var(--blue);

    flex-shrink: 0;

}


.avatar-medium {

    width: 48px;

    height: 48px;

}


/* ============================================================
   PROFILE UPLOAD
   ============================================================ */

.profile-upload {

    padding: 10px 16px;

    border-bottom: 1px solid var(--gray-200);

}


.profile-upload-button {

    display: block;

    text-align: center;

    padding: 8px;

    border-radius: 8px;

    background: var(--gray-100);

    cursor: pointer;

    font-size: 13px;

    font-weight: bold;

}


.profile-upload-button:hover {

    background: var(--gray-200);

}


/* ============================================================
   ADD CONTACT
   ============================================================ */

.add-contact-box {

    padding: 14px 16px;

    border-bottom: 1px solid var(--gray-200);

}


.section-title {

    font-size: 13px;

    font-weight: bold;

    color: var(--gray-600);

    margin-bottom: 8px;

}


.add-contact-row {

    display: flex;

    gap: 7px;

}


.add-contact-row input {

    flex: 1;

    min-width: 0;

    padding: 10px;

    border: 1px solid var(--gray-200);

    border-radius: 8px;

    outline: none;

}


.add-contact-row input:focus {

    border-color: var(--blue);

}


.add-contact-row button {

    width: 42px;

    border: none;

    border-radius: 8px;

    background: var(--green);

    color: white;

    font-size: 24px;

    cursor: pointer;

}


.contact-result {

    min-height: 18px;

    margin-top: 7px;

    font-size: 12px;

}


.contact-result.success {

    color: var(--green);

}


.contact-result.error {

    color: #d32f2f;

}


/* ============================================================
   CHAT LIST
   ============================================================ */

.chat-list-title {

    padding: 14px 16px 8px;

    font-size: 13px;

    font-weight: bold;

    color: var(--gray-600);

}


.chat-list {

    flex: 1;

    overflow-y: auto;

}


.chat-item {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 16px;

    cursor: pointer;

    border-bottom: 1px solid #f0f0f0;

}


.chat-item:hover {

    background: var(--gray-50);

}


.chat-item.active {

    background: #e8f0fe;

}


.chat-item-content {

    min-width: 0;

    flex: 1;

}


.chat-item-top {

    display: flex;

    justify-content: space-between;

    gap: 8px;

}


.chat-item-top strong {

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


.chat-time {

    font-size: 11px;

    color: var(--gray-400);

    flex-shrink: 0;

}


.chat-preview {

    margin-top: 5px;

    font-size: 13px;

    color: var(--gray-600);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


.no-chats {

    padding: 30px 20px;

    text-align: center;

    color: var(--gray-400);

    font-size: 14px;

}


/* ============================================================
   MAIN CHAT
   ============================================================ */

.main-chat {

    flex: 1;

    min-width: 0;

    height: 100%;

    position: relative;

}


.empty-chat {

    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 30px;

    color: var(--gray-600);

}


.empty-icon {

    font-size: 60px;

    margin-bottom: 20px;

}


.empty-chat h2 {

    color: var(--black);

    margin-bottom: 8px;

}


/* ============================================================
   ACTIVE CHAT
   ============================================================ */

.active-chat {

    height: 100%;

    display: flex;

    flex-direction: column;

}


.chat-header {

    height: 74px;

    min-height: 74px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px 18px;

    border-bottom: 1px solid var(--gray-200);

    background: white;

}


.chat-header-info {

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.chat-header-info span {

    font-size: 12px;

    color: var(--gray-600);

}


.mobile-back {

    display: none;

    border: none;

    background: transparent;

    font-size: 26px;

    cursor: pointer;

}


/* ============================================================
   MESSAGES
   ============================================================ */

.messages {

    flex: 1;

    overflow-y: auto;

    padding: 25px;

    display: flex;

    flex-direction: column;

    gap: 8px;

    background:
        #f5f7f9;

}


.message-wrapper {

    display: flex;

    width: 100%;

}


.message-bubble {

    max-width: min(70%, 550px);

    padding: 9px 12px;

    border-radius: 14px;

    word-break: break-word;

}


.message-bubble.sent {

    margin-left: auto;

    background: var(--green);

    color: white;

    border-bottom-right-radius: 4px;

}


.message-bubble.received {

    margin-right: auto;

    background: white;

    color: var(--black);

    border: 1px solid var(--gray-200);

    border-bottom-left-radius: 4px;

}


.message-text {

    white-space: pre-wrap;

    font-size: 15px;

    line-height: 1.4;

}


.message-time {

    text-align: right;

    font-size: 10px;

    margin-top: 4px;

    opacity: 0.65;

}


.message-image {

    display: block;

    max-width: 320px;

    max-height: 400px;

    border-radius: 10px;

    cursor: pointer;

    margin-bottom: 5px;

}


/* ============================================================
   MESSAGE INPUT
   ============================================================ */

.message-area {

    padding: 12px 15px;

    border-top: 1px solid var(--gray-200);

    background: white;

}


.message-input-row {

    display: flex;

    align-items: center;

    gap: 8px;

}


.message-input-row input[type="text"] {

    flex: 1;

    min-width: 0;

    padding: 13px 15px;

    border: 1px solid var(--gray-200);

    border-radius: 25px;

    outline: none;

    font-size: 15px;

}


.message-input-row input[type="text"]:focus {

    border-color: var(--blue);

}


.image-button {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    font-size: 22px;

}


.send-button {

    width: 44px;

    height: 44px;

    border: none;

    border-radius: 50%;

    background: var(--blue);

    color: white;

    font-size: 20px;

    cursor: pointer;

}


.send-button:hover {

    background: var(--blue-dark);

}


/* ============================================================
   IMAGE PREVIEW
   ============================================================ */

.image-preview {

    position: relative;

    display: inline-block;

    margin-bottom: 10px;

}


.image-preview img {

    width: 90px;

    height: 90px;

    object-fit: cover;

    border-radius: 10px;

}


.image-preview button {

    position: absolute;

    top: -8px;

    right: -8px;

    width: 25px;

    height: 25px;

    border: none;

    border-radius: 50%;

    background: #d32f2f;

    color: white;

    cursor: pointer;

    font-size: 18px;

}


/* ============================================================
   IMAGE OVERLAY
   ============================================================ */

.image-overlay {

    position: fixed;

    inset: 0;

    z-index: 9999;

    background: rgba(0,0,0,0.9);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

}


.image-overlay img {

    max-width: 95vw;

    max-height: 90vh;

    object-fit: contain;

}


.close-image {

    position: absolute;

    top: 20px;

    right: 25px;

    border: none;

    background: transparent;

    color: white;

    font-size: 40px;

    cursor: pointer;

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

    .chat-page {
        background: white;

        /*
         * Wichtig für mobile Browser:
         * Die tatsächliche sichtbare Höhe wird verwendet.
         */
        height: 100dvh;
        min-height: 100dvh;

        overflow: hidden;
    }


    .chat-app {
        position: relative;

        width: 100%;
        height: 100dvh;
        min-height: 100dvh;

        overflow: hidden;
    }


    .sidebar {
        width: 100%;

        min-width: 100%;

        height: 100%;

        border: none;
    }


    .main-chat {
        position: absolute;

        top: 0;
        left: 0;

        width: 100%;
        height: 100%;

        background: white;

        transform: translateX(100%);

        transition:
            transform 0.2s ease;

        z-index: 20;

        /*
         * Wichtig:
         * Das Chat-Fenster selbst ist ein Flex-Container.
         */
        display: flex;
        flex-direction: column;

        min-height: 0;

        overflow: hidden;
    }


    .mobile-chat-open .main-chat {
        transform: translateX(0);
    }


    .mobile-back {
        display: block;

        flex-shrink: 0;
    }


    .chat-header {
        height: 65px;

        min-height: 65px;

        flex-shrink: 0;

        padding: 8px 12px;
    }


    /*
     * Nachrichten dürfen scrollen.
     * Das Eingabefeld bleibt dadurch unten.
     */
    .messages {
        flex: 1;

        min-height: 0;

        padding: 15px 10px;

        overflow-y: auto;
        overflow-x: hidden;

        -webkit-overflow-scrolling: touch;
    }


    .message-bubble {
        max-width: 82%;
    }


    .message-image {
        max-width: 240px;

        max-height: 320px;

        object-fit: contain;
    }


    .sidebar-top {
        padding: 12px;
    }


    .profile-upload {
        padding: 8px 12px;
    }


    .add-contact-box {
        padding: 10px 12px;
    }


    .chat-list-title {
        padding-left: 12px;
    }


    .chat-item {
        padding: 12px;
    }


    /*
     * ========================================================
     * DAS IST DER WICHTIGE TEIL
     * ========================================================
     *
     * Das Eingabefeld wird NICHT fixed.
     * Es bleibt ganz normal am Ende des Flex-Layouts.
     *
     * safe-area berücksichtigt den unteren Bereich
     * bei iPhones.
     */
    .message-area {

        flex-shrink: 0;

        width: 100%;

        padding: 8px;

        padding-bottom:
            calc(
                8px +
                env(safe-area-inset-bottom)
            );

        background: white;

        position: relative;

        z-index: 30;
    }


    .message-input-row {
        width: 100%;

        min-width: 0;
    }


    .message-input-row input[type="text"] {
        min-width: 0;

        flex: 1;
    }


    .image-button {
        flex-shrink: 0;
    }


    .send-button {
        flex-shrink: 0;
    }


    .auth-box {
        padding: 25px 20px;
    }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 400px) {

    .my-profile-info {
        max-width: 120px;
    }


    .message-bubble {
        max-width: 88%;
    }


    .image-button {
        width: 35px;
    }


    .send-button {
        width: 40px;
        height: 40px;
    }


    .message-input-row input[type="text"] {
        padding: 11px;
    }

}