/* Attachments styles */

/* Modal list section */
.attachments-modal-list {
    margin-bottom: var(--izi-space-lg);
    max-height: 200px;
    overflow-y: auto;
}

.attachments-empty {
    padding: var(--izi-space-lg);
    text-align: center;
    color: var(--izi-text-secondary);
    font-style: italic;
}

/* Attachment item */
.attachment-item {
    display: flex;
    align-items: center;
    gap: var(--izi-space-sm);
    padding: var(--izi-space-sm) var(--izi-space-md);
    background: var(--izi-bg-tertiary);
    border-radius: var(--izi-radius-sm);
    margin-bottom: var(--izi-space-sm);
}

.attachment-item:last-child {
    margin-bottom: 0;
}

.attachment-item-icon {
    font-size: var(--izi-font-size-lg);
    flex-shrink: 0;
}

.attachment-item-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.attachment-item-name {
    font-weight: 500;
    font-size: var(--izi-font-size-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachment-item-meta {
    font-size: var(--izi-font-size-xs);
    color: var(--izi-text-secondary);
}

.attachment-item-type {
    font-size: var(--izi-font-size-xs);
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 500;
    flex-shrink: 0;
}

.attachment-item-type.included {
    background: var(--izi-attachment-info-bg);
    color: var(--izi-attachment-info-fg);
}

.attachment-item-type.to-include {
    background: var(--izi-attachment-warning-bg);
    color: var(--izi-attachment-warning-fg);
}

.btn-icon-sm {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    font-size: var(--izi-font-size-sm);
    color: var(--izi-text-secondary);
    border-radius: 3px;
    flex-shrink: 0;
}

.btn-icon-sm:hover {
    background: var(--izi-bg-hover);
    color: var(--izi-error);
}

/* Add section */
.attachments-add-section {
    padding-top: var(--izi-space-lg);
    border-top: 1px solid var(--izi-border);
}

.attachments-add-header {
    font-weight: 600;
    font-size: var(--izi-font-size-sm);
    margin-bottom: var(--izi-space-md);
    color: var(--izi-text);
}

/* Type selector */
.attachment-type-selector {
    display: flex;
    gap: var(--izi-space-lg);
    margin-bottom: var(--izi-space-sm);
}

.attachment-type-selector .radio-label {
    display: flex;
    align-items: center;
    gap: var(--izi-space-sm);
    cursor: pointer;
}

/* Ce que le type coché veut dire — une ligne, sous les deux intitulés.
   Appariement maison du texte d'appoint (`.tag-empty-hint`, base.css) : `xs` +
   `--izi-text-muted`. En `sm` + `--izi-text-secondary` la ligne pesait autant
   que les intitulés qu'elle explique. `--izi-text-muted` reste AA sur les
   panneaux surélevés — atténuée, pas effacée. */
.attachment-type-hint {
    margin-bottom: var(--izi-space-lg);
    color: var(--izi-text-muted);
    font-size: var(--izi-font-size-xs);
    line-height: 1.4;
}

/* File preview */
.attachment-file-preview {
    display: flex;
    align-items: center;
    gap: var(--izi-space-sm);
    padding: var(--izi-space-sm);
    background: var(--izi-bg-tertiary);
    border-radius: var(--izi-radius-sm);
    margin-bottom: var(--izi-space-sm);
}

#attachmentFileName {
    font-weight: 500;
}

#attachmentFileSize {
    color: var(--izi-text-secondary);
    font-size: var(--izi-font-size-sm);
}

/* ===== Section in Properties tab ===== */
.attachments-section {
    margin-top: var(--izi-space-md);
}

.attachments-section-label {
    display: flex;
    align-items: center;
    gap: var(--izi-space-sm);
}

.attachments-section-icon {
    font-size: var(--izi-font-size-lg);
}

.attachments-section .attachment-count-badge {
    display: inline-block;
    min-width: 20px;
    padding: 0 6px;
    margin-left: var(--izi-space-xs);
    background: var(--izi-primary);
    color: white;
    border-radius: 10px;
    font-size: var(--izi-font-size-xs);
    font-weight: bold;
    line-height: 18px;
    text-align: center;
}

.attachments-section-list {
    margin-bottom: var(--izi-space-sm);
}

.attachments-section-list .attachment-item {
    margin-bottom: var(--izi-space-xs);
}

.attachments-section-empty {
    padding: var(--izi-space-md);
    background: var(--izi-bg-tertiary);
    border: 1px dashed var(--izi-border);
    border-radius: var(--izi-radius-sm);
    color: var(--izi-text-secondary);
    font-style: italic;
    text-align: center;
    font-size: var(--izi-font-size-sm);
}

.attachments-section-add {
    display: inline-flex;
    align-items: center;
    gap: var(--izi-space-xs);
}

.attachments-section-add-icon {
    font-weight: bold;
    font-size: var(--izi-font-size-md);
}

/* Types acceptés : le dropdown des filtres de tags (`tag-multiselect.css`),
   étiré sur la largeur du formulaire comme les autres champs. Il a remplacé une
   grille de vingt cases à cocher — d'où la disparition de
   `.attachment-types-checkboxes` et de `.checkbox-inline`, sans autre porteur. */
.attachments-add-section .tag-ms {
    display: block;
    width: 100%;
}

/* ==========================================================================
   Livraison des pièces jointes (dialogue d'instanciation, §5.8)

   Les octets ne sont plus dans le texte du prompt : le rendu les annonce à côté,
   et cette section dit ce qu'ils pèsent et par quel chemin ils partent — dans le
   texte copié, ou en vrais fichiers à glisser / télécharger. Réutilise
   `.attachment-item` : une pièce se présente partout de la même façon.
   ========================================================================== */

.izi-delivery-count {
    display: inline-block;
    min-width: 18px;
    padding: 0 6px;
    margin-left: var(--izi-space-xs);
    border-radius: 9px;
    background: var(--izi-bg-tertiary);
    color: var(--izi-text-secondary);
    font-size: var(--izi-font-size-xs);
    text-align: center;
}

.izi-delivery-modes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--izi-space-md);
    margin-bottom: var(--izi-space-xs);
}

.izi-delivery-mode {
    display: inline-flex;
    align-items: center;
    gap: var(--izi-space-xs);
    cursor: pointer;
    font-size: var(--izi-font-size-sm);
}

.izi-delivery-hint {
    margin: 0 0 var(--izi-space-sm);
    color: var(--izi-text-secondary);
    font-size: var(--izi-font-size-xs);
}

/* Une puce glissable l'annonce : sans ce signe, rien ne distingue une pièce
   déposable d'une simple ligne d'information. */
.izi-deliverable[draggable="true"] {
    cursor: grab;
}

.izi-deliverable[draggable="true"]:hover {
    background: var(--izi-bg-hover);
}

.izi-delivery-total {
    margin: var(--izi-space-sm) 0;
    color: var(--izi-text-secondary);
    font-size: var(--izi-font-size-xs);
}

/* Coût élevé : signalé, jamais opposé — les tokens sont l'affaire de
   l'utilisateur (aucun plafond n'est imposé). */
.izi-delivery-total-warning {
    color: var(--izi-attachment-warning-fg);
}

/* ==========================================================================
   Aperçu d'une pièce jointe (index-attachment-preview.js)

   Voir le contenu sur place : le navigateur rend le PDF, l'image, le son, la
   vidéo ; le texte est décodé et montré tel quel. Les octets ne sont plus dans le
   texte du prompt, il faut donc un endroit pour les regarder.
   ========================================================================== */

.izi-preview-body {
    /* Le contenu commande la hauteur, mais jamais au-delà de l'écran : un PDF de
       200 pages ne doit pas faire grandir la modale indéfiniment. */
    display: flex;
    flex-direction: column;
    min-height: 200px;
    max-height: 70vh;
    overflow: auto;
    padding: 0;
}

.izi-preview-frame {
    flex: 1;
    width: 100%;
    min-height: 65vh;
    border: 0;
    background: var(--izi-bg-secondary);
}

.izi-preview-image {
    max-width: 100%;
    max-height: 68vh;
    margin: auto;
    object-fit: contain;
}

.izi-preview-media {
    width: 100%;
    margin: auto;
}

.izi-preview-text {
    margin: 0;
    padding: var(--izi-space-md);
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--izi-font-mono, monospace);
    font-size: var(--izi-font-size-sm);
    color: var(--izi-text-primary);
    background: var(--izi-bg-secondary);
}

.izi-preview-loading,
.izi-preview-empty {
    margin: auto;
    padding: var(--izi-space-lg);
    color: var(--izi-text-secondary);
    font-style: italic;
    text-align: center;
}

.izi-preview-note {
    padding: var(--izi-space-sm) var(--izi-space-md);
    color: var(--izi-attachment-warning-fg);
    background: var(--izi-attachment-warning-bg);
    font-size: var(--izi-font-size-xs);
}

.izi-preview-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--izi-space-md);
}

/* Nom de fichier, type MIME, taille, empreinte : de quoi savoir CE qu'on regarde
   (une pièce remplacée se reconnaît à son empreinte). */
.izi-preview-meta {
    color: var(--izi-text-secondary);
    font-size: var(--izi-font-size-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.izi-preview-actions {
    display: inline-flex;
    gap: var(--izi-space-sm);
    flex-shrink: 0;
}

/* Plein écran de l'aperçu : un contrat de trois pages dans 70 % de hauteur se lit
   mal. `:fullscreen` couvre le vrai plein écran du navigateur ;
   `.izi-preview-pleine-fenetre` est le repli quand il est refusé. */
.izi-preview-modal:fullscreen,
.izi-preview-modal.izi-preview-pleine-fenetre {
    width: 100vw;
    max-width: 100vw;
    /* `dvh` suit la hauteur RÉELLE : la barre d'adresse qui se rétracte et le
       clavier virtuel qui s'ouvre. `vh`, lui, vaut la hauteur barre masquée —
       le bas de l'élément passe alors sous la barre. Le repli `vh` est écrit
       d'abord pour les navigateurs qui ignorent `dvh` ; sur un écran fixe les
       deux valent la même chose. */
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    background: var(--izi-bg-primary);
}

.izi-preview-modal:fullscreen .izi-preview-body,
.izi-preview-modal.izi-preview-pleine-fenetre .izi-preview-body {
    flex: 1;
    max-height: none;
}

.izi-preview-modal:fullscreen .izi-preview-frame,
.izi-preview-modal.izi-preview-pleine-fenetre .izi-preview-frame {
    min-height: 0;   /* la hauteur vient du flex, pas d'un minimum en vh */
}

.izi-preview-modal:fullscreen .izi-preview-image,
.izi-preview-modal.izi-preview-pleine-fenetre .izi-preview-image {
    max-height: none;
}

.izi-preview-full {
    margin-left: auto;
    font-size: var(--izi-font-size-md);
}