/* Modern file upload button + chips for chat attachments */

.file-upload-container {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* hide native input but keep it accessible */
.file-input {
    position: absolute;
    inset: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* visible rounded attach button */
.file-upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 1px 2px rgba(16,24,40,0.04);
    color: #374151;
    cursor: pointer;
    transition: background .12s ease, transform .06s ease;
    margin-left: 8px;
}
.file-upload-btn:hover { background: #f8fafc; transform: translateY(-1px); }
.file-upload-btn i { font-size: 1.05rem; }

/* attached files container (wraps chips) */
.attached-files-container {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 10px 0 6px 0;
}

/* individual chip */
.attached-file-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: #f7f9fc;
    border: 1px solid rgba(15,23,42,0.04);
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(15,23,42,0.03);
    max-width: 260px;
    align-items: center;
}

/* file meta area */
.file-meta {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    overflow: hidden;
}

/* icon + text */
.file-icon { font-size: 1.05rem; color: #475569; }
.file-info { display: flex; flex-direction: column; min-width: 0; }
.file-name {
    font-size: 0.875rem;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 160px;
}
.file-size { font-size: 0.75rem; color: #6b7280; }

/* remove button */
.btn-remove-file {
    background: transparent;
    border: none;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
}
.btn-remove-file:hover { color: #ef4444; background: rgba(239,68,68,0.06); }

/* responsive adjustments */
@media (max-width: 640px) {
    .attached-file-item { max-width: 100%; padding: 8px; }
    .file-name { max-width: 120px; font-size: 0.85rem; }
    .file-upload-btn { width: 36px; height: 36px; }
}