.attached-file-name { color: #2b6ac8 !important; font-weight: 600; }
.document-actions { display: flex; gap: 6px; justify-content: flex-end; }
.document-view { appearance: none; border: 1px solid #c9e7d6; border-radius: 6px; background: #f3fcf7; color: #227a50; padding: 6px 8px; white-space: nowrap; font-size: 10px; font-weight: 600; }
.document-view:hover { background: #e4f7eb; }
.document-remove { appearance: none; border: 1px solid #fbd5d5; border-radius: 6px; background: #fdf2f2; color: #c81e1e; padding: 6px 8px; white-space: nowrap; font-size: 10px; font-weight: 600; }
.document-remove:hover { background: #fde8e8; }
.file-preview-backdrop { display: none; position: fixed; inset: 0; z-index: 60; align-items: center; justify-content: center; padding: 22px; background: rgba(10, 29, 47, .62); }
.file-preview-backdrop.visible { display: flex; }
.file-preview-modal { width: min(940px, 100%); height: min(740px, calc(100vh - 44px)); display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 13px; box-shadow: 0 22px 65px rgba(3, 18, 32, .38); }
.file-preview-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 16px 20px; border-bottom: 1px solid #e8edf2; }
.file-preview-header span { color: #8090a1; font-size: 9px; letter-spacing: .8px; font-weight: 700; }
.file-preview-header h2 { margin: 3px 0 0; color: #243548; font: 700 14px "Manrope", sans-serif; }
.file-preview-header button { appearance: none; border: 0; background: #f3f6f8; border-radius: 6px; width: 32px; height: 32px; color: #687888; font-size: 23px; }
.file-preview-content { min-height: 0; flex: 1; background: #f3f6f9; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.file-preview-body { min-height: 0; display: flex; flex: 1; overflow: hidden; }
.file-preview-body .file-preview-content { min-width: 0; }
.file-preview-details { width: 245px; flex: 0 0 245px; padding: 18px; overflow: auto; color: #334155; background: #fff; border-left: 1px solid #e2e8f0; }
.file-preview-details[hidden] { display: none; }
.file-preview-details-heading { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid #e2e8f0; }
.file-preview-details-heading > div { min-width: 0; }
.file-preview-details-heading strong, .file-preview-details-heading small { display: block; }
.file-preview-details-heading strong { color: #1e293b; font-size: 13px; }
.file-preview-details-heading small { margin-top: 3px; color: #64748b; font-size: 9px; line-height: 1.4; }
.file-preview-details dl { display: grid; gap: 0; margin: 14px 0 0; }
.file-preview-details dl > div { min-width: 0; padding: 10px 0; border-bottom: 1px solid #eef2f7; }
.file-preview-details dt { color: #64748b; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.file-preview-details dd { margin: 4px 0 0; overflow: hidden; color: #1e293b; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.file-preview-details .file-preview-path dd { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.document-frame { width: 100%; height: 100%; border: 0; background: #fff; }
.document-image { max-width: 100%; max-height: 100%; object-fit: contain; }
.file-fallback { max-width: 390px; padding: 35px; text-align: center; }
.file-fallback .file-icon { margin: 0 auto 14px; width: 48px; height: 53px; }
.file-fallback h3 { margin: 0; font: 700 15px "Manrope", sans-serif; overflow-wrap: anywhere; }
.file-fallback p { color: #748292; font-size: 11px; line-height: 1.5; margin: 9px 0 20px; }
.file-fallback .primary-button { display: inline-grid; align-items: center; text-decoration: none; }
@media (max-width: 760px) { .file-preview-details { display: none; } }
@media (max-width: 480px) { .document-actions { grid-column: 2 / -1; justify-content: flex-start; }.file-preview-backdrop { padding: 10px; }.file-preview-modal { height: calc(100vh - 20px); } }