/* ==========================================================
   JANTAZ SESSION ATTACHMENTS
========================================================== */

.attachment-input{
    display:none;
}

.attachment-list{
    display:grid;
    gap:10px;
    margin:12px 0 4px;
}

.attachment-list:empty{
    display:none;
}

.attachment-card{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    padding:11px 13px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#FAFAFF;
}

.attachment-card.is-uploading{
    border-color:#C7D2FE;
    background:#F5F7FF;
}

.attachment-card.is-ready{
    border-color:#C4B5FD;
    background:#F8F7FF;
}

.attachment-card.is-failed{
    border-color:#FECACA;
    background:#FEF2F2;
}

.attachment-card-icon{
    width:40px;
    height:40px;
    flex:0 0 40px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#ECEBFF;
    color:var(--primary);
    font-size:18px;
}

.attachment-card.is-failed .attachment-card-icon{
    background:#FEE2E2;
    color:#B91C1C;
}

.attachment-card-body{
    min-width:0;
    flex:1;
}

.attachment-card-name{
    display:block;
    overflow:hidden;
    color:var(--dark);
    font-size:13px;
    font-weight:800;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.attachment-card-meta{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin-top:4px;
    color:var(--muted);
    font-size:11px;
    line-height:1.4;
}

.attachment-card-meta .attachment-status{
    color:var(--primary);
    font-weight:800;
}

.attachment-card.is-failed .attachment-status{
    color:#B91C1C;
}

.attachment-remove-btn{
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:10px;
    background:#fff;
    color:var(--muted);
    cursor:pointer;
}

.attachment-remove-btn:hover{
    background:#FEE2E2;
    color:#B91C1C;
}

.attachment-spinner{
    display:inline-block;
    width:13px;
    height:13px;
    border:2px solid rgba(109,94,248,.22);
    border-top-color:var(--primary);
    border-radius:50%;
    animation:attachmentSpin .75s linear infinite;
}

.attachment-error-box{
    display:none;
    margin-top:10px;
    padding:10px 12px;
    border:1px solid #FECACA;
    border-radius:11px;
    background:#FEF2F2;
    color:#B91C1C;
    font-size:12px;
    line-height:1.45;
}

.attachment-error-box.is-visible{
    display:block;
}

.attachment-help{
    display:none;
    margin-top:8px;
    color:var(--muted);
    font-size:11px;
    line-height:1.4;
}

.attachment-help.is-visible{
    display:block;
}

@keyframes attachmentSpin{
    to{
        transform:rotate(360deg);
    }
}

@media(max-width:900px){

    .attachment-card{
        padding:10px;
    }

    .attachment-card-icon{
        width:36px;
        height:36px;
        flex-basis:36px;
    }

    .attachment-card-name{
        font-size:12px;
    }
}