/* === PROMPT CARD — liste compacte, zéro conflit Bootstrap === */

/* Row cliquable */
.pcard {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .75rem;
    border: 1px solid #e9ecef;
    border-left: 3px solid transparent;
    border-radius: .45rem;
    cursor: pointer;
    background: #fff;
    transition: background .15s ease, box-shadow .15s ease, border-left-color .15s ease;
    text-decoration: none;
}

.pcard:hover {
    background: #f8f9fa;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

.pcard:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* Accent gauche par type */
.prompt-card-col[data-type="image"] .pcard { border-left-color: #198754; }
.prompt-card-col[data-type="text"]  .pcard { border-left-color: #0dcaf0; }
.prompt-card-col[data-type="code"]  .pcard { border-left-color: #fd7e14; }
.prompt-card-col[data-type="video"] .pcard { border-left-color: #dc3545; }

/* Miniature carrée */
.pcard-img {
    width: 68px;
    height: 68px;
    min-width: 68px;
    object-fit: cover;
    border-radius: .35rem;
    display: block;
}

/* Zone texte — prend tout l'espace dispo */
.pcard-content {
    flex: 1;
    min-width: 0;
}

/* Ligne haute : badges + titre */
.pcard-top {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    margin-bottom: .2rem;
}

/* Badges type et modèle */
.pcard-badge {
    font-size: .67rem;
    font-weight: 600;
    padding: .18em .5em;
    border-radius: .25rem;
    white-space: nowrap;
    color: #fff;
}

.pcard-badge--image { background: #198754; }
.pcard-badge--text  { background: #0dcaf0; color: #000; }
.pcard-badge--code  { background: #fd7e14; }
.pcard-badge--video { background: #dc3545; }
.pcard-badge--model { background: #343a40; }

/* Titre inline */
.pcard-name {
    font-size: .84rem;
    font-weight: 700;
    color: #212529;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Description 1 ligne */
.pcard-desc {
    font-size: .775rem;
    color: #6c757d;
    margin: 0 0 .2rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    line-height: 1.4;
}

/* Tags */
.pcard-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
}

.pcard-tag {
    font-size: .65rem;
    padding: .1em .42em;
    border-radius: 50px;
    background: #f1f3f5;
    color: #6c757d;
    border: 1px solid #dee2e6;
    line-height: 1.5;
}

/* Flèche à droite */
.pcard-arrow {
    color: #ced4da;
    flex-shrink: 0;
    transition: color .15s, transform .15s;
}

.pcard:hover .pcard-arrow {
    color: #6c757d;
    transform: translateX(2px);
}

/* === MODAL === */
.modal.show {
    background: rgba(0, 0, 0, 0.72);
}

.prompt-raw-content {
    background: #1e1e2e;
    color: #cdd6f4;
    font-family: 'Fira Code', monospace;
    font-size: .83rem;
    line-height: 1.7;
    padding: 1.25rem 1.5rem;
    white-space: pre-wrap;
    word-break: break-word;
    border-radius: 0 0 .375rem .375rem;
    min-height: 120px;
}

/* === DARK MODE === */
[data-theme="dark"] .pcard {
    background: #1e1e2e;
    border-color: #2d2d4e;
}

[data-theme="dark"] .pcard:hover { background: #25253e; }

[data-theme="dark"] .prompt-card-col[data-type="image"] .pcard { border-left-color: #198754; }
[data-theme="dark"] .prompt-card-col[data-type="text"]  .pcard { border-left-color: #0dcaf0; }
[data-theme="dark"] .prompt-card-col[data-type="code"]  .pcard { border-left-color: #fd7e14; }
[data-theme="dark"] .prompt-card-col[data-type="video"] .pcard { border-left-color: #dc3545; }

[data-theme="dark"] .pcard-name { color: #e2e8f0; }
[data-theme="dark"] .pcard-desc  { color: #94a3b8; }

[data-theme="dark"] .pcard-tag {
    background: #2d2d4e;
    color: #94a3b8;
    border-color: #3d3d5e;
}

[data-theme="dark"] .pcard-arrow { color: #3d3d5e; }
[data-theme="dark"] .pcard:hover .pcard-arrow { color: #94a3b8; }

/* Dark mode — recherche */
[data-theme="dark"] .input-group-text {
    background-color: #1e1e2e;
    border-color: #2d2d4e;
    color: #94a3b8;
}

[data-theme="dark"] #prompts-search {
    background-color: #1e1e2e;
    border-color: #2d2d4e;
    color: #e2e8f0;
}

[data-theme="dark"] #prompts-search::placeholder { color: #64748b; }

/* Dark mode — modal */
[data-theme="dark"] .modal-content {
    background-color: #1e1e2e;
    color: #e2e8f0;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: #2d2d4e;
}