/* Styles ported from legacy JS uploader */
.file-upload-manager {
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  padding: 1rem;
  background-color: #f8f9fa;
}

.file-drop-zone {
  border: 2px dashed #6c757d;
  border-radius: 0.375rem;
  padding: 1rem 1rem;
  text-align: center;
  background-color: white;
  transition: all 0.3s ease;
  cursor: pointer;
}
.file-drop-zone:hover { border-color: #0d6efd; background-color: #f0f8ff; }
.file-drop-zone:focus { outline: 2px solid #0d6efd; outline-offset: 2px; }
.file-drop-zone.drag-over { border-color: #0d6efd; background-color: #e7f3ff; transform: scale(1.02); }
.file-drop-zone .drop-zone-icon { width: 48px; height: 48px; color: #6c757d; display: inline-block; margin-bottom: 0.75rem; }

.drop-zone-content>*{
  margin:0px;
}

.upload-mini-status { margin-top: 1rem; }
.status-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; max-width: 560px; margin: 0 auto; }
.status-col { background: #ffffff; border: 1px dashed #e5e7eb; border-radius: .375rem; padding: .5rem .75rem; }
.status-label { font-size: .8rem; color: #6c757d; }
.status-value { font-weight: 600; }

.file-actions-bar { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .75rem; }

.file-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.file-metadata-loading { margin-top: .75rem; color: #6c757d; display: flex; align-items: center; font-size: .95rem; }

.file-item { display: flex; flex-direction: column; background-color: white; border: 1px solid #dee2e6; border-radius: 0.375rem; overflow: hidden; transition: box-shadow 0.2s ease; }
.file-item:hover { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

.file-preview { position: relative; height: 160px; background: #f8f9fa; border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: center; }
.file-preview .file-thumb { pointer-events: none; }

.file-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; font-size: 2rem; }
.file-thumb { width: 100%; height: 100%; object-fit: cover; }

.file-info { padding: .35rem; gap: .35rem;align-items: center; margin: 0px;}
.file-name { font-weight: 500; margin-bottom: 0.25rem; }
.file-details { font-size: 0.875rem; color: #6c757d; }
.file-progress { margin-top: 0.5rem; }
.file-progress .progress { height: 8px; }

.file-action-bar { position: absolute; top: .5rem; right: .5rem; display: inline-flex; gap: .5rem; z-index: 10; }
.file-action-bar .file-action-btn { background: rgba(255,255,255,0.95); border: 1px solid #dee2e6; border-radius: .375rem; padding: .5rem .6rem; transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease; }
.file-action-bar .file-action-btn:hover, .file-action-bar .file-action-btn:focus { background: #ffffff; border-color: #adb5bd; box-shadow: 0 2px 6px rgba(0,0,0,0.15); transform: translateY(-1px); }
.file-action-bar .file-action-btn i { pointer-events: none; }

.preview-loading-overlay { position: absolute; bottom: .5rem; left: .5rem; background: rgba(255,255,255,0.9); border: 1px solid #dee2e6; border-radius: .375rem; padding: .25rem .5rem; font-size: .8rem; color: #6c757d; display: inline-flex; align-items: center; gap: .35rem; }

.file-status { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0px; }
.status-uploading { color: #0d6efd; }
.status-uploaded { color: #198754; }
.status-error { color: #dc3545; }
.status-deleting { color: #fd7e14; }

.append-submit-bar { margin-top: .75rem; }
.file-disclaimer { font-size: 0.875rem; color: #6c757d; margin: .5rem 0 0.5rem; }
.file-drop-zone.submitted-success { border-color: #198754; background-color: #f0fff4; cursor: default; }

#upz_filesuploadcontainer_name,tr :has(#upz_filesuploadcontainer_name) { display: none; }

/* Notes Timeline */
.upz-timeline-list { display: flex; flex-direction: column; gap: .5rem; }
.upz-timeline-item { border: 1px solid #e9ecef; }
.upz-composer textarea { resize: vertical !important; height: auto !important; min-height: 9em !important; }
.upz-note-text { white-space: pre-wrap; }


.upz-timeline-item .card-body{
    border-radius: 4px;
}

/* Role-aware alignment for notes: left for agent, right for user, width 90% */
.upz-timeline-list { align-items: stretch; }
.upz-timeline-item { width: 90%; }
.upz-timeline-item-agent { align-self: flex-start; }
.upz-timeline-item-user { align-self: flex-end; }
.upz-timeline-item-user .card-body{ background: var(--portalThemeColor3);color: var(--portalThemeOnColor3);}


    

/* Icon-only action buttons for timeline items */
.upz-icon-btn { 
  background: #ffffff; 
  border: 1px solid #e3e6ea; 
  border-radius: .5rem; 
  padding: .35rem .45rem; 
  line-height: 1; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center;
}
.upz-icon-btn:hover, .upz-icon-btn:focus { 
  background: #fff; 
  border-color: #cfd4da; 
  box-shadow: 0 2px 5px rgba(0,0,0,.08);
}
.upz-icon-btn i { pointer-events: none; }