/* =====================================================
   FLANGO PRIVATE CHAT
   kleine Messenger-Fenster unten rechts
   ===================================================== */

.flango-private-chat{
    position:fixed;
    width:286px;
    height:390px;
    right:12px;
    bottom:12px;

    background:#ffffff;
    border:1px solid #b7d5ee;
    border-radius:16px 16px 0 0;

    box-shadow:0 10px 32px rgba(0,0,0,.28);
    overflow:hidden;
    z-index:99990;

    font-family:Arial,Helvetica,sans-serif;
    color:#222;

    display:flex;
    flex-direction:column;
}

/* Kopf */

.flango-chat-head{
    height:44px;
    min-height:44px;

    background:linear-gradient(
        to bottom,
        #58b4f4 0%,
        #3f96df 50%,
        #2f83cf 100%
    );

    color:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 10px;
    box-sizing:border-box;

    font-size:14px;
    font-weight:bold;
    cursor:pointer;

    border-bottom:1px solid #2679bd;
}

.flango-chat-title{
    max-width:185px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

/* Buttons oben */

.flango-chat-tools{
    display:flex;
    align-items:center;
    gap:6px;
}

.flango-chat-tools button{
    width:38px;
    height:38px;

    border:0;
    border-radius:50%;

    background:rgba(255,255,255,.25);
    color:#fff;

    font-size:28px;
    line-height:38px;
    font-weight:bold;

    text-align:center;
    cursor:pointer;

    padding:0;
    margin:0;

    box-shadow:0 2px 6px rgba(0,0,0,.18);
}

.flango-chat-tools button:hover{
    background:rgba(255,255,255,.40);
}

.flango-chat-close{
    font-size:30px !important;
}

/* Nachrichtenbereich */

.flango-chat-body{
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;

    padding:12px;
    background:#f5f7fb;

    box-sizing:border-box;
    scroll-behavior:smooth;
}

/* Statusmeldungen */

.flango-chat-empty,
.flango-chat-loading,
.flango-chat-error{
    padding:34px 10px;
    text-align:center;
    font-size:14px;
    line-height:1.4;
}

.flango-chat-empty,
.flango-chat-loading{
    color:#777;
}

.flango-chat-error{
    color:#d9534f;
    font-weight:bold;
}

/* Nachrichten */

.flango-chat-msg{
    max-width:82%;
    clear:both;

    margin:0 0 9px 0;
    padding:8px 10px;

    border-radius:14px;

    font-size:13px;
    line-height:1.35;

    word-wrap:break-word;
    overflow-wrap:break-word;

    box-shadow:0 2px 6px rgba(0,0,0,.08);
}

.flango-chat-msg.me{
    float:right;
    background:linear-gradient(#55a9f0,#2f83cf);
    color:#fff;
    border-bottom-right-radius:4px;
}

.flango-chat-msg.other{
    float:left;
    background:#ffffff;
    color:#222;
    border:1px solid #d8d8d8;
    border-bottom-left-radius:4px;
}

.flango-chat-text{
    white-space:normal;
}

.flango-chat-date{
    display:block;
    margin-top:5px;

    font-size:10px;
    line-height:1.2;

    opacity:.72;
}

/* Eingabe */

.flango-chat-form{
    height:78px;
    min-height:78px;

    display:flex;
    align-items:stretch;
    gap:7px;

    padding:8px;
    box-sizing:border-box;

    background:#ffffff;
    border-top:1px solid #d6d6d6;
}

.flango-chat-form textarea{
    flex:1;

    width:auto !important;
    height:60px !important;
    min-height:60px !important;
    max-height:60px !important;

    resize:none;

    padding:8px 9px;

    border:1px solid #b8c7d8;
    border-radius:11px;

    background:#fff;
    color:#222;

    font-family:Arial,Helvetica,sans-serif;
    font-size:13px;
    line-height:1.3;

    box-sizing:border-box;
    outline:none;
}

.flango-chat-form textarea:focus{
    border-color:#3f8fd6;
    box-shadow:0 0 0 3px rgba(63,143,214,.18);
}

.flango-chat-form button{
    width:74px;
    min-width:74px;

    border:0;
    border-radius:11px;

    background:linear-gradient(#55a9f0,#2f83cf);
    color:#fff;

    font-size:13px;
    font-weight:bold;

    cursor:pointer;
    box-shadow:0 2px 6px rgba(0,0,0,.15);
}

.flango-chat-form button:hover{
    background:linear-gradient(#66b5f4,#2679c5);
}

.flango-chat-form button:disabled{
    opacity:.65;
    cursor:not-allowed;
}

/* Minimiert */

.flango-private-chat.minimized{
    height:44px !important;
}

.flango-private-chat.minimized .flango-chat-body,
.flango-private-chat.minimized .flango-chat-form{
    display:none !important;
}

/* Mehrere Fenster */

.flango-private-chat:nth-of-type(1){
    z-index:99990;
}

.flango-private-chat:nth-of-type(2){
    z-index:99991;
}

.flango-private-chat:nth-of-type(3){
    z-index:99992;
}

/* Mobile */

@media(max-width:700px){

    .flango-private-chat{
        width:94% !important;
        height:360px;

        left:3% !important;
        right:auto !important;
        bottom:8px !important;

        border-radius:16px 16px 0 0;
    }

    .flango-chat-head{
        height:48px;
        min-height:48px;
        font-size:15px;
    }

    .flango-chat-title{
        max-width:210px;
    }

    .flango-chat-tools button{
        width:42px;
        height:42px;
        line-height:42px;
        font-size:30px;
    }

    .flango-chat-body{
        padding:11px;
    }

    .flango-chat-msg{
        max-width:86%;
        font-size:13px;
    }

    .flango-chat-form{
        height:78px;
        min-height:78px;
        padding:8px;
    }

    .flango-chat-form textarea{
        height:60px !important;
        min-height:60px !important;
        max-height:60px !important;
        font-size:14px;
    }

    .flango-chat-form button{
        width:78px;
        min-width:78px;
        font-size:14px;
    }

}

/* Sehr kleine Handys */

@media(max-width:380px){

    .flango-private-chat{
        width:96% !important;
        left:2% !important;
        height:350px;
    }

    .flango-chat-title{
        max-width:170px;
    }

    .flango-chat-form button{
        width:70px;
        min-width:70px;
        font-size:13px;
    }

}