/* =========================================================
   xdirecttchat
   Messagerie
   ========================================================= */


/* =========================================================
   Liste des conversations
   ========================================================= */

.messages-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;
}


.message-conversation {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    width:
        100%;

    padding:
        13px;

    background:
        var(--color-surface);

    border:
        1px solid var(--color-border-light);

    border-radius:
        var(--radius);

    color:
        var(--color-text);

    text-decoration:
        none;

    transition:
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}


.message-conversation:hover {

    background:
        var(--color-surface-soft);

    border-color:
        var(--color-border);

    box-shadow:
        var(--shadow-small);

    transform:
        translateY(-1px);
}


/* =========================================================
   Avatar conversation
   ========================================================= */

.message-avatar {

    flex-shrink:
        0;
}


.message-avatar img {

    width:
        58px;

    height:
        58px;

    border-radius:
        50%;

    object-fit:
        cover;

    border:
        1px solid var(--color-border);
}


/* =========================================================
   Contenu conversation
   ========================================================= */

.message-conversation-content {

    flex:
        1;

    min-width:
        0;

    text-align:
        left;
}


.message-conversation-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;
}


.message-conversation-header strong {

    color:
        var(--color-text);

    font-size:
        15px;

    font-weight:
        650;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.message-preview {

    margin-top:
        3px;

    color:
        var(--color-text-secondary);

    font-size:
        14px;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}


.message-date {

    margin-top:
        3px;

    color:
        var(--color-text-muted);

    font-size:
        12px;
}


/* =========================================================
   Nombre messages non lus
   ========================================================= */

.message-unread {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        22px;

    height:
        22px;

    padding:
        0 6px;

    border-radius:
        999px;

    background:
        var(--color-danger);

    color:
        #ffffff;

    font-size:
        11px;

    font-weight:
        700;

    line-height:
        1;

    flex-shrink:
        0;
}


/* =========================================================
   État vide
   ========================================================= */

.messages-empty {

    padding:
        35px 20px;

    color:
        var(--color-text-muted);

    text-align:
        center;

    font-size:
        14px;
}


/* =========================================================
   En-tête conversation
   ========================================================= */

.conversation-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin-bottom:
        18px;
}


.conversation-back {

    display:
        inline-flex;

    align-items:
        center;

    margin-bottom:
        8px;

    color:
        var(--color-text-secondary);

    font-size:
        14px;

    text-decoration:
        none;
}


.conversation-back:hover {

    color:
        var(--color-primary);
}


.conversation-user {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;
}


.conversation-user img {

    width:
        120px;

    height:
        120px;

    border-radius:
        50%;

    object-fit:
        cover;

    border:
        1px solid var(--color-border);
}


.conversation-user strong {

    color:
        var(--color-text);

    font-size:
        17px;
}


/* =========================================================
   Actions conversation
   ========================================================= */

.conversation-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;
}


.conversation-actions form {

    margin:
        0;
}


/* =========================================================
   Avertissement
   ========================================================= */

.message-warning {

    margin-bottom:
        18px;

    padding:
        12px 14px;

    background:
        #fff7ed;

    border:
        1px solid #fed7aa;

    border-radius:
        var(--radius);

    color:
        #9a3412;

    font-size:
        13px;

    line-height:
        1.5;

    text-align:
        left;
}


.message-warning strong:first-child {

    display:
        block;

    margin-bottom:
        4px;
}


/* =========================================================
   Zone des messages
   ========================================================= */

.messages-box {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

    max-height:
        600px;

    overflow-y:
        auto;

    padding:
        18px;

    background:
        var(--color-surface-soft);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius);

    scroll-behavior:
        smooth;
}


/* =========================================================
   Ligne message
   ========================================================= */

.message-line {

    display:
        flex;

    width:
        100%;
}


.message-mine {

    justify-content:
        flex-end;
}


.message-other {

    justify-content:
        flex-start;
}


/* =========================================================
   Bulle
   ========================================================= */

.message-bubble {

    max-width:
        75%;

    padding:
        10px 13px;

    background:
        var(--color-surface);

    border:
        1px solid var(--color-border);

    border-radius:
        14px;

    box-shadow:
        var(--shadow-small);
}


.message-mine .message-bubble {

    background:
        var(--color-primary-light);

    border-color:
        #d9d9ff;
}


.message-text {

    color:
        var(--color-text);

    word-break:
        break-word;

    overflow-wrap:
        anywhere;
}


.message-time {

    margin-top:
        5px;

    color:
        var(--color-text-muted);

    font-size:
        11px;

    text-align:
        right;
}


/* =========================================================
   Formulaire d'envoi
   ========================================================= */

.message-send-form {

    margin-top:
        15px;
}


.message-send-form textarea {

    min-height:
        90px;
}


.message-send-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-top:
        8px;
}


.message-send-footer small {

    color:
        var(--color-text-muted);

    font-size:
        12px;
}


/* =========================================================
   Emoji
   ========================================================= */

.message-emoji {

    margin-top:
        8px;

    margin-bottom:
        8px;
}


/* =========================================================
   Conversation bloquée
   ========================================================= */

.message-blocked {

    margin-top:
        15px;

    padding:
        14px 16px;

    background:
        #fef2f2;

    border:
        1px solid #fecaca;

    border-radius:
        var(--radius);

    color:
        #991b1b;

    font-size:
        13px;

    line-height:
        1.5;

    text-align:
        left;
}


.message-blocked strong {

    display:
        inline-block;

    margin-bottom:
        4px;
}


/* =========================================================
   Signalement
   ========================================================= */

.signalement-header {

    margin-bottom:
        20px;
}


.signalement-header h2 {

    margin:
        0;

    color:
        var(--color-text);

    font-size:
        21px;

    line-height:
        1.3;
}


/* =========================================================
   Membre signalé
   ========================================================= */

.signalement-user {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    padding:
        13px;

    margin-bottom:
        18px;

    background:
        var(--color-surface-soft);

    border:
        1px solid var(--color-border);

    border-radius:
        var(--radius);

    text-align:
        left;
}


.signalement-user img {

    width:
        64px;

    height:
        64px;

    flex-shrink:
        0;

    border-radius:
        50%;

    object-fit:
        cover;

    border:
        1px solid var(--color-border);
}


.signalement-user div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.signalement-user strong {

    color:
        var(--color-text);

    font-size:
        15px;
}


.signalement-user small {

    color:
        var(--color-text-muted);

    font-size:
        12px;
}


/* =========================================================
   Avertissement signalement
   ========================================================= */

.signalement-warning {

    padding:
        13px 15px;

    margin-bottom:
        20px;

    background:
        #fff7ed;

    border:
        1px solid #fed7aa;

    border-radius:
        var(--radius);

    color:
        #9a3412;

    font-size:
        13px;

    line-height:
        1.5;

    text-align:
        left;
}


.signalement-warning strong {

    display:
        block;

    margin-bottom:
        5px;
}


.signalement-warning p {

    margin:
        5px 0;
}


/* =========================================================
   Formulaire signalement
   ========================================================= */

.signalement-form {

    width:
        100%;
}


.form-group {

    margin-bottom:
        18px;
}


.form-group label {

    display:
        block;

    margin:
        0 0 7px;

    color:
        var(--color-text);

    font-size:
        14px;

    text-align:
        left;
}


.form-group label span {

    color:
        var(--color-text-muted);

    font-size:
        12px;
}


.form-help {

    display:
        block;

    margin-top:
        6px;

    color:
        var(--color-text-muted);

    font-size:
        11px;

    text-align:
        left;
}


.signalement-actions {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        10px;

    margin-top:
        20px;
}


/* =========================================================
   Messages système existants
   ========================================================= */

.poker-result-ok,
.poker-result-no {

    max-width:
        600px;

    margin:
        15px auto;

    padding:
        11px 14px;

    border-radius:
        var(--radius);

    text-align:
        center;

    font-size:
        14px;
}


.poker-result-ok {

    color:
        #166534;

    background:
        #f0fdf4;

    border:
        1px dashed #86efac;
}


.poker-result-no {

    color:
        #991b1b;

    background:
        #fef2f2;

    border:
        1px dashed #fca5a5;
}

/* =========================================================
CONVERSATION
========================================================= */

.conversation-page {
width: 100%;
}

.conversation-card {
max-width: 900px;
margin: 0 auto;
padding: 24px;
}

.conversation-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 20px;
padding-bottom: 18px;
border-bottom: 1px solid var(--color-border-light);
}

.conversation-header-user {
min-width: 0;
}

.conversation-back {
display: inline-flex;
align-items: center;
margin-bottom: 10px;
color: var(--color-text-secondary);
font-size: 13px;
font-weight: 500;
}

.conversation-back:hover {
color: var(--color-primary);
}

.conversation-user-info {
display: flex;
flex-direction: column;
min-width: 0;
font-family: 'New Rocker';
}

.conversation-user-info strong {
color: var(--color-text);
font-size: 17px;
font-weight: 700;
}

.conversation-user-info span {
margin-top: 2px;
color: var(--color-text-muted);
font-size: 12px;
}

.conversation-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}

.conversation-actions form {
margin: 0;
}

.conversation-actions .bouton {
min-height: 38px;
}

/* =========================================================
AVERTISSEMENT
========================================================= */

.message-warning {
margin-bottom: 18px;
padding: 12px 14px;
border: 1px solid #f3dfb2;
border-radius: var(--radius);
background: #fffaf0;
color: #765b1d;
font-size: 13px;
line-height: 1.55;
text-align: left;
}

.message-warning strong:first-child {
display: block;
margin-bottom: 4px;
color: #664c12;
}

/* =========================================================
ZONE DES MESSAGES
========================================================= */

.messages-box {
display: flex;
flex-direction: column;
gap: 10px;

min-height: 300px;
max-height: 600px;

overflow-y: auto;

padding: 18px;

border: 1px solid var(--color-border);
border-radius: var(--radius);

background: var(--color-surface-soft);
scroll-behavior: smooth;

}

.message-line {
display: flex;
width: 100%;
}

.message-mine {
justify-content: flex-end;
}

.message-other {
justify-content: flex-start;
}

.message-bubble {
max-width: 75%;
padding: 10px 13px;

border: 1px solid var(--color-border);
border-radius: 14px;

background: var(--color-surface);

box-shadow: var(--shadow-small);

}

.message-mine .message-bubble {
border-color: rgba(91, 91, 214, 0.18);
background: var(--color-primary-light);
}

.message-text {
color: var(--color-text);
word-break: break-word;
white-space: normal;
}

.message-time {
margin-top: 5px;
color: var(--color-text-muted);
font-size: 11px;
line-height: 1.3;
text-align: right;
}

.messages-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;

min-height: 260px;

color: var(--color-text-muted);
text-align: center;

}

.messages-empty-icon {
display: flex;
align-items: center;
justify-content: center;

width: 50px;
height: 50px;

border-radius: 50%;

background: var(--color-primary-light);

font-size: 22px;

}

/* =========================================================
ENVOI
========================================================= */

.message-send-form {
margin-top: 18px;
}

.message-send-form textarea {
min-height: 100px;
}

.message-send-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;

margin-top: 9px;

}

.message-send-footer small {
color: var(--color-text-muted);
font-size: 12px;
}

.message-emoji {
margin-top: 8px;
margin-bottom: 8px;
}

/* =========================================================
CONVERSATION BLOQUÉE
========================================================= */

.message-blocked {
margin-top: 18px;
padding: 15px 16px;

border: 1px solid #f0caca;
border-radius: var(--radius);

background: #fff6f6;
color: #8b3a3a;

font-size: 13px;
line-height: 1.55;
text-align: left;
```

}

.message-blocked-title {
margin-bottom: 4px;
color: #7f2929;
font-weight: 700;
}

/* =========================================================
ALERTES
========================================================= */

.poker-result-ok,
.poker-result-no {
margin: 0 0 18px;
padding: 11px 14px;

border-radius: var(--radius-small);

font-size: 13px;
text-align: center;

}

.poker-result-ok {
border: 1px solid #b7dfc0;
background: #f2fbf4;
color: #26733a;
}

.poker-result-no {
border: 1px solid #efc0c0;
background: #fff5f5;
color: #a33333;
}

/* =========================================================
   Page messages
   ========================================================= */

.messages-page {

    width:
        100%;
}


.messages-card {

    max-width:
        900px;

    margin:
        0 auto;
}


.messages-page-header {

    margin-bottom:
        25px;
}


.messages-page-header .page-title {

    margin:
        0;
}


.messages-page-header .page-subtitle {

    margin-top:
        7px;
}


/* =========================================================
   État vide
   ========================================================= */

.messages-empty-page {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        280px;

    padding:
        35px 20px;

    border:
        1px dashed var(--color-border);

    border-radius:
        var(--radius);

    background:
        var(--color-surface-soft);

    text-align:
        center;
}


.messages-empty-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        56px;

    height:
        56px;

    margin-bottom:
        12px;

    border-radius:
        50%;

    background:
        var(--color-primary-light);

    font-size:
        25px;
}


.messages-empty-page strong {

    color:
        var(--color-text);

    font-size:
        17px;
}


.messages-empty-page p {

    max-width:
        480px;

    margin:
        7px 0 20px;

    color:
        var(--color-text-secondary);

    font-size:
        14px;
}


/* =========================================================
   Auteur du dernier message
   ========================================================= */

.message-preview-author {

    color:
        var(--color-text);

    font-weight:
        600;
}


/* =========================================================
   Pagination
   ========================================================= */

.messages-pagination {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        28px;
}


.bouton-pagination {

    min-width:
        40px;
}


.pagination-current {

    cursor:
        default;

    pointer-events:
        none;
}


.pagination-separator {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        20px;

    color:
        var(--color-text-muted);

    font-size:
        14px;
}


.messages-pagination-info {

    margin-top:
        10px;

    color:
        var(--color-text-muted);

    font-size:
        12px;

    text-align:
        center;
}

/* =========================================================
PAGE SIGNALEMENT
========================================================= */

.signalement-page {
width: 100%;
}

.signalement-card {
max-width: 760px;
margin: 0 auto;
}

.signalement-header {
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid var(--color-border-light);
}

.signalement-header .conversation-back {
margin-bottom: 12px;
}

.signalement-header .page-subtitle {
max-width: 620px;
}

/* =========================================================
MEMBRE SIGNALÉ
========================================================= */

.signalement-user {
display: flex;
align-items: center;
gap: 14px;

margin-bottom: 20px;
padding: 14px 16px;

border: 1px solid var(--color-border);
border-radius: var(--radius);

background: var(--color-surface-soft);

}

.signalement-user img {
width: 100px;
height: 100px;
flex: 0 0 100px;

border-radius: 50%;
object-fit: cover;

border: 1px solid var(--color-border);
background: var(--color-surface);

}

.signalement-user div {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}

.signalement-user strong {
color: var(--color-text);
font-size: 16px;
}

.signalement-user small {
color: var(--color-text-muted);
font-size: 12px;
}

/* =========================================================
INFORMATION AVANT SIGNALEMENT
========================================================= */

.signalement-warning {
margin-bottom: 24px;
padding: 14px 16px;

border: 1px solid #f3dfb2;
border-radius: var(--radius);

background: #fffaf0;
color: #765b1d;

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

}

.signalement-warning strong {
display: block;
margin-bottom: 6px;
color: #664c12;
}

.signalement-warning p {
margin: 5px 0;
}

/* =========================================================
FORMULAIRE
========================================================= */

.signalement-form {
width: 100%;
}

.form-group {
margin-bottom: 20px;
}

.form-group label {
display: block;
margin-bottom: 7px;

color: var(--color-text);
font-size: 14px;

}

.form-group label strong {
font-weight: 600;
}

.form-group label span {
margin-left: 4px;

color: var(--color-text-muted);
font-size: 12px;
font-weight: 400;

}

.form-group select,
.form-group textarea {
width: 100%;
}

.form-help {
display: block;
margin-top: 6px;

color: var(--color-text-muted);
font-size: 11px;

}

/* =========================================================
ACTIONS
========================================================= */

.signalement-actions {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 10px;

margin-top: 24px;
padding-top: 20px;

border-top: 1px solid var(--color-border-light);

}

/* =========================================================
ALERTE
========================================================= */

.signalement-card .poker-result-no {
margin-bottom: 20px;
}


/* =========================================================
   UPLOAD IMAGE MESSAGE
   ========================================================= */

.message-image-upload {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.message-image-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border: 1px solid #d8dce3;
    border-radius: 8px;
    background: #f7f8fa;
    color: #444;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.message-image-button:hover {
    background: #eef0f4;
    border-color: #c5cad3;
}

.message-image-name {
    font-size: 13px;
    color: #777;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   IMAGE DANS UN MESSAGE
   ========================================================= */

.message-image {
    margin-bottom: 8px;
}

.message-image a {
    display: inline-block;
    text-decoration: none;
}

.message-image img {
    display: block;
    max-width: 280px;
    max-height: 350px;
    width: auto;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.message-image img:hover {
    opacity: 0.9;
}

/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width: 768px) {

    .message-bubble {

        max-width:
            85%;
    }


    .messages-box {

        padding:
            12px;
    }


    .conversation-header {

        align-items:
            flex-start;
    }

}

@media (max-width: 700px) {

.conversation-card {
    padding: 20px;
}

.conversation-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
}

.conversation-actions {
    width: 100%;
}

.conversation-actions .bouton {
    flex: 1;
    justify-content: center;
}

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

.messages-box {
    min-height: 280px;
    padding: 14px;
}

}

@media (max-width: 600px) {

.signalement-card {
    padding: 20px;
}

.signalement-actions {
    flex-direction: column-reverse;
    align-items: stretch;
}

.signalement-actions .bouton {
    width: 100%;
    justify-content: center;
}

    .message-image-upload {
        gap: 8px;
    }

    .message-image-button {
        padding: 7px 11px;
        font-size: 13px;
    }

    .message-image-name {
        max-width: 180px;
        font-size: 12px;
    }

    .message-image img {
        max-width: 220px;
        max-height: 300px;
    }
	
    .messages-page-header {

        margin-bottom:
            20px;
    }


    .messages-empty-page {

        min-height:
            240px;
    }


    .messages-pagination {

        gap:
            6px;
    }


    .messages-pagination > .bouton {

        font-size:
            13px;
    }

    .message-avatar img {

        width:
            48px;

        height:
            48px;
    }


    .conversation-user img {

        width:
            44px;

        height:
            44px;
    }


    .conversation-user strong {

        font-size:
            15px;
    }


    .conversation-actions {

        flex-wrap:
            wrap;

        justify-content:
            flex-end;
    }


    .signalement-actions {

        justify-content:
            stretch;

        flex-direction:
            column-reverse;

        align-items:
            stretch;
    }


    .signalement-actions .bouton {

        width:
            100%;
    }	

}

@media (max-width: 468px) {

.signalement-card {
    padding: 16px;
}

.signalement-user {
    padding: 12px;
}

.signalement-warning {
    padding: 12px 13px;
}

    .messages-card {

        padding:
            18px;
    }


    .messages-pagination {

        margin-top:
            20px;
    }
	
.conversation-card {
    padding: 16px;
    border-radius: var(--radius);
}

.conversation-user img {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
}

.conversation-user-info strong {
    font-size: 16px;
}

.conversation-actions {
    display: grid;
    grid-template-columns: 1fr auto;
}

.conversation-actions .bouton {
    min-height: 38px;
}

.message-bubble {
    max-width: 90%;
    padding: 9px 11px;
}

.messages-box {
    min-height: 240px;
    max-height: 500px;
    padding: 10px;
}

.message-send-footer {
    align-items: flex-end;
}

.message-send-footer small {
    max-width: 55%;
}

    .message-conversation {

        gap:
            10px;

        padding:
            10px;
    }


    .message-preview {

        font-size:
            13px;
    }


    .message-date {

        font-size:
            11px;
    }


    .conversation-header {

        flex-direction:
            column;

        align-items:
            stretch;
    }


    .conversation-actions {

        justify-content:
            flex-start;
    }


    .message-send-footer {

        align-items:
            stretch;

        flex-direction:
            column;
    }


    .message-send-footer .bouton {

        width:
            100%;
    }	

}