/* ==========================================================================
   GPT Public Wall — CSS complet et mis à jour
   Michel & ChatGPT — 2025
   ========================================================================== */

/* ==========================
   MODALE GPT PUBLIC WALL
   ========================== */

/* Modale masquée par défaut */
#gptpw-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
}

/* Visible quand JS ajoute la classe */
#gptpw-modal.gptpw-modal-visible {
    display: block;
}

/* Backdrop assombri */
.gptpw-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(3px);
}

/* Fenêtre de dialogue */
.gptpw-modal-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    padding: 1.3rem 1.6rem;
    width: 90%;
    max-width: 340px;
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
    border: 1px solid rgba(0,0,0,0.08);
    animation: gptpwModalFade .25s ease-out;
    box-sizing: border-box;
}

/* Texte */
#gptpw-modal-body {
    font-size: 1rem;
    line-height: 1.45;
    margin-bottom: 1rem;
}

/* Bouton OK (layout uniquement, styles visuels via bloc "boutons") */
.gptpw-modal-close {
    display: inline-flex;
}

/* Petite animation */
@keyframes gptpwModalFade {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* =========================================================
   STRUCTURE GÉNÉRALE
========================================================= */

.gptpw-wrapper {
    max-width: 800px;
    margin: 2rem auto;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* TITRES */
.gptpw-main-title {
    text-align: center;
    font-size: 1.75rem;
    font-weight: 800;
    margin: 0 0 1.5rem;
    letter-spacing: .04em;
    color: #111;
}
.gptpw-main-title::after {
    content: "";
    display: block;
    width: 90px;
    height: 2px;
    background: #ccc;
    margin: .7rem auto 0;
    border-radius: 2px;
}
.gptpw-section-title {
    text-align: center;
    font-size: 1.45rem;
    font-weight: 700;
    margin: 2.2rem 0 1.4rem;
    color: #222;
}
.gptpw-section-title::after {
    content:"";
    width:70px;height:2px;background:#ccc;
    display:block;margin:.6rem auto 0;border-radius:2px;
}

/* BOXS */
.gptpw-box,
.gptpw-intro-box,
#gptpw-list {
    margin: 1.2rem 0 2rem;
    padding: 1.3rem 1.5rem;
    border-radius: 12px;
    border: 1px solid #e6e6e6;
    background: linear-gradient(180deg,#fafafa,#f5f5f5);
    box-shadow: 0 4px 10px rgba(0,0,0,.03);
}

.gptpw-intro-box p { margin: .7rem 0; }
.gptpw-intro-signature { text-align: right; font-weight: 600; opacity: .7; }

/* =========================================================
   LIENS VERS LES IA
========================================================= */

.gptpw-ia-links {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:1.2rem;
    margin:1.5rem 0 2.2rem;
}
.gptpw-ia-link {
    display:flex;
    flex-direction:column;
    align-items:center;
    text-decoration:none;
    font-size:.8rem;
    color:#222;
}
.gptpw-ia-circle {
    width:58px;
    height:58px;
    border-radius:50%;
    background:#fff;
    border:1px solid #ddd;
    display:flex;
    align-items:center;
    justify-content:center;
}
.gptpw-ia-circle img {
    max-width:32px;
    max-height:32px;
}

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

.gptpw-field { margin-bottom:1rem; }
.gptpw-field label {
    display:block;
    margin-bottom:.25rem;
    font-size:.9rem;
    font-weight:500;
}
.gptpw-field input,
.gptpw-field select {
    width:100%;
    padding:.5rem .7rem;
    font-size:.95rem;
    border-radius:6px;
    border:1px solid #ddd;
    background:#fff;
}
.gptpw-field input:focus,
.gptpw-field select:focus {
    outline:none;
    border-color:#111;
    box-shadow:0 0 0 1px #111;
}

/* =========================================================
   FILTRES & RECHERCHE
========================================================= */

.gptpw-filters { margin-bottom:.25rem; }
.gptpw-filter {
    margin:0 .25rem .35rem 0; /* styles visuels gérés dans bloc "boutons" */
}

.gptpw-search-form {
    display:flex;
    gap:.5rem;
    margin-bottom:.2rem;
}
#gptpw-search-input {
    flex:1;
    padding:.4rem .6rem;
    border-radius:999px;
    border:1px solid #ddd;
}

/* =========================================================
   LISTE DES CONVERSATIONS
========================================================= */

.gptpw-list {
    list-style:none;
    margin:0;
    padding:0;
}
.gptpw-item {
    padding:1rem 0;
    border-bottom:1px solid #e5e5e5;
}
.gptpw-item:last-child { border-bottom:none; }

/* Titre de la ligne */
.gptpw-item-top {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:.5rem;
}
.gptpw-item-link {
    text-decoration:none;
    color:#111;
    font-weight:600;
    font-size:1.1rem;
}
.gptpw-item-link:hover { text-decoration:underline; }

/* Meta + boutons sur une seule ligne */
.gptpw-item-meta-wrapper {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:.35rem;
}

/* Meta (icône IA, vues, date, catégorie) */
.gptpw-item-meta {
    font-size:.8rem;
    opacity:.75;
    display:flex;
    align-items:center;
    gap:.25rem;
}

/* Icône IA miniature dans la liste */
.gptpw-ia-icon {
    width:18px;
    height:18px;
    max-width:18px;
    max-height:18px;
    object-fit:contain;
    flex-shrink:0;
    opacity:0.85;
    display:inline-block;
    margin-right:4px;
    vertical-align:middle;
}

/* Boutons de la ligne (Signaler / Effacer) */
.gptpw-item-buttons {
    display:flex;
    gap:.4rem;
    margin-left:auto;
}

/* =========================================================
   ⭐ RATING
========================================================= */

.gptpw-rating {
    display:flex;
    align-items:center;
    gap:.5rem;
    margin-top:.35rem;
}
.gptpw-star {
    background:none;
    border:none;
    padding:0;
    font-size:1.1rem;
    cursor:pointer;
    color:#ccc;
    margin-right:.1rem;
}
.gptpw-star-active { color:#f5a623; }
.gptpw-rating-text {
    font-size:.8rem;
    opacity:.8;
}

/* =========================================================
   COMMENTAIRES
========================================================= */

.gptpw-comments {
    margin-top:.5rem;
    border-radius:10px;
    background:#fafafa;
    padding:.6rem .8rem;
}
.gptpw-comment-item {
    padding:.4rem 0;
    border-bottom:1px solid #e5e5e5;
}
.gptpw-comment-item:last-child { border-bottom:none; }

.gptpw-comment-meta {
    font-size:.75rem;
    opacity:.75;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.gptpw-comment-author { font-weight:600; }

.gptpw-comment-field input,
.gptpw-comment-field textarea {
    width:100%;
    padding:.4rem .55rem;
    border-radius:6px;
    border:1px solid #ddd;
    font-size:.85rem;
}

.gptpw-comment-submit {
    margin-top:.6rem;
}

.gptpw-comments-toggle-row { margin-top:.35rem; }

/* Masquer toute autre image éventuelle dans l'item (préviews OG, etc.) */
.gptpw-item img:not(.gptpw-ia-icon) {
    display:none !important;
}

/* =========================================================
   SYSTÈME DE BOUTONS UNIFIÉ GPTPW
========================================================= */

/* Reset commun à tous les boutons GPTPW */
.gptpw-submit,
.gptpw-comment-submit,
.gptpw-modal-close,
.gptpw-search-form button,
.gptpw-btn-report,
.gptpw-btn-delete,
.gptpw-comment-report,
.gptpw-comments-toggle,
.gptpw-filter {
    font-family: inherit;
    border-radius: 999px;
    border-width: 1px;
    border-style: solid;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    transition:
        background-color .15s ease,
        color .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        transform .08s ease;
    cursor: pointer;
    text-decoration: none;
}

/* Boutons "primaires" : publier, commenter, rechercher, OK modale */
.gptpw-submit,
.gptpw-comment-submit,
.gptpw-modal-close,
.gptpw-search-form button {
    background: #111;
    color: #fff;
    border-color: #111;
    padding: .38rem 1.1rem;
    font-size: .85rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.gptpw-submit:hover,
.gptpw-comment-submit:hover,
.gptpw-modal-close:hover,
.gptpw-search-form button:hover {
    background: #fff;
    color: #111;
    box-shadow: 0 3px 10px rgba(0,0,0,.18);
    transform: translateY(-1px);
}

/* Boutons "pills" neutres : filtres, signaler, effacer, toggle commentaires */
.gptpw-filter,
.gptpw-btn-report,
.gptpw-btn-delete,
.gptpw-comment-report,
.gptpw-comments-toggle {
    background: #fff;
    color: #111;
    border-color: #ccc;
    padding: .25rem .7rem;
    font-size: .78rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

.gptpw-filter:hover,
.gptpw-btn-report:hover,
.gptpw-btn-delete:hover,
.gptpw-comment-report:hover,
.gptpw-comments-toggle:hover {
    background: #f5f5f5;
    border-color: #bbb;
}

/* Filtre actif : inversion noir / blanc */
.gptpw-filter.gptpw-filter-active {
    background: #111;
    color: #fff !important;
    border-color: #111;
    box-shadow: 0 2px 7px rgba(0,0,0,.18);
}

/* =========================================================
   RESPONSIVE — TABLETTE
========================================================= */

@media (max-width: 900px) {
    .gptpw-wrapper {
        max-width: 100%;
        padding: 0 1rem;
    }

    .gptpw-main-title {
        font-size: 1.55rem;
    }

    .gptpw-section-title {
        font-size: 1.3rem;
    }

    .gptpw-box,
    .gptpw-intro-box,
    #gptpw-list {
        padding: 1rem 1.1rem;
        border-radius: 10px;
    }

    .gptpw-ia-links {
        gap: 0.9rem;
    }

    .gptpw-ia-circle {
        width: 50px;
        height: 50px;
    }
}

/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 600px) {

    /* Titres un peu plus petits */
    .gptpw-main-title {
        font-size: 1.4rem;
        margin-bottom: 1.1rem;
    }

    .gptpw-section-title {
        font-size: 1.15rem;
        margin: 1.8rem 0 1.1rem;
    }

    /* Boîtes plus compactes */
    .gptpw-box,
    .gptpw-intro-box,
    #gptpw-list {
        margin: 1rem 0 1.6rem;
        padding: 0.9rem 1rem;
    }

    /* IA links plus serrés */
    .gptpw-ia-links {
        gap: 0.7rem;
    }
    .gptpw-ia-circle {
        width: 46px;
        height: 46px;
    }

    /* Boutons de filtres : wrap propre */
    .gptpw-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
    }
    .gptpw-filter {
        margin: 0;
        padding: 0.22rem 0.55rem;
        font-size: 0.75rem;
    }

    /* Barre de recherche en pleine largeur */
    .gptpw-search-form {
        flex-direction: row;
        align-items: stretch;
        gap: 0.4rem;
        margin-top: 0.5rem;
    }
    #gptpw-search-input {
        font-size: 0.85rem;
    }

    /* Boutons primaires plus compacts */
    .gptpw-submit,
    .gptpw-comment-submit,
    .gptpw-modal-close,
    .gptpw-search-form button {
        padding: .32rem .9rem;
        font-size: .8rem;
    }

    /* Boutons neutres plus compacts */
    .gptpw-btn-report,
    .gptpw-btn-delete,
    .gptpw-comment-report,
    .gptpw-comments-toggle {
        padding: .22rem .6rem;
        font-size: .76rem;
    }

    /* Item plus compact */
    .gptpw-item {
        padding: 0.8rem 0;
    }
    .gptpw-item-link {
        font-size: 1rem;
    }

    /* Meta au-dessus, boutons en dessous à droite */
    .gptpw-item-meta-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    .gptpw-item-buttons {
        align-self: flex-end;
        gap: 0.3rem;
        margin-left: 0;
    }

    /* Icône IA + meta plus serrés */
    .gptpw-item-meta {
        font-size: 0.78rem;
        gap: 0.18rem;
    }
    .gptpw-item .gptpw-ia-icon {
        width: 16px !important;
        height: 16px !important;
        margin-right: 3px;
    }

    /* Rating & bouton commentaires */
    .gptpw-rating {
        gap: 0.35rem;
    }
    .gptpw-star {
        font-size: 0.95rem;
    }
    .gptpw-rating-text {
        font-size: 0.78rem;
    }

    .gptpw-comments-toggle-row {
        margin-top: 0.35rem;
    }
    .gptpw-comments-toggle {
        width: 100%;
        text-align: center;
    }

    /* Bloc commentaires plus aéré */
    .gptpw-comments {
        margin-top: 0.45rem;
        padding: 0.5rem 0.6rem;
    }
    .gptpw-comment-field input,
    .gptpw-comment-field textarea {
        font-size: 0.8rem;
    }
}

/* =========================================================
   MODE SOMBRE
========================================================= */

@media (prefers-color-scheme: dark) {
    .gptpw-main-title { color:#f5f5f5; }
    .gptpw-ia-link { color:#eee; }

    .gptpw-box,
    .gptpw-intro-box,
    #gptpw-list {
        background:#181818;
        border-color:#333;
        box-shadow:0 4px 14px rgba(0,0,0,.6);
    }

    /* Filtres : thème sombre */
    .gptpw-filter {
        background:#111;
        border-color:#333;
        color:#eee;
        box-shadow:0 1px 3px rgba(0,0,0,.4);
    }

    .gptpw-filter.gptpw-filter-active {
        background:#f5f5f5;
        color:#000 !important;
        border-color:#f5f5f5;
        box-shadow:0 2px 7px rgba(0,0,0,.9);
    }

    .gptpw-item-link { color:#fff; }
    .gptpw-item-meta { color:#ddd; }

    .gptpw-comments {
        background:#111;
        border-color:#333;
    }

    /* Boutons neutres (report, delete, toggle, comment-report) un peu plus sombres */
    .gptpw-btn-report,
    .gptpw-btn-delete,
    .gptpw-comment-report,
    .gptpw-comments-toggle {
        background:#111;
        color:#eee;
        border-color:#333;
        box-shadow:0 1px 4px rgba(0,0,0,.7);
    }

    .gptpw-btn-report:hover,
    .gptpw-btn-delete:hover,
    .gptpw-comment-report:hover,
    .gptpw-comments-toggle:hover {
        background:#1c1c1c;
        border-color:#444;
    }
}