.content { display: flex; flex-direction: column; gap: 16px; padding: 16px 20px 4px; } .destination { font-size: 13px; color: var(--text-secondary, #a0a3a8); } .destination strong { color: var(--text-primary, #fff); font-weight: 600; } .previewGrid { display: flex; flex-wrap: wrap; gap: 10px; max-height: 320px; overflow-y: auto; } .preview { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px; width: 140px; background-color: var(--background-secondary, rgba(255, 255, 255, 0.03)); border: 1px solid var(--background-modifier-accent, rgba(255, 255, 255, 0.06)); border-radius: 8px; } .removeButton { position: absolute; top: 4px; right: 4px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; background-color: rgba(0, 0, 0, 0.7); border: none; border-radius: 4px; color: #fff; cursor: pointer; z-index: 1; transition: background-color 0.1s; } .removeButton:hover { background-color: var(--status-danger, #da373c); } .previewImage { width: 100%; height: 100px; object-fit: cover; border-radius: 6px; background-color: rgba(0, 0, 0, 0.3); } .previewIcon { display: flex; align-items: center; justify-content: center; width: 100%; height: 100px; background-color: rgba(88, 101, 242, 0.12); color: var(--brand-primary, #5865f2); border-radius: 6px; } .previewMeta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .previewName { font-size: 12px; font-weight: 500; color: var(--text-primary, #fff); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .previewSize { font-size: 11px; color: var(--text-primary-muted, #a0a3a8); } .captionLabel { display: flex; flex-direction: column; gap: 6px; } .captionLabelText { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-primary-muted, #a0a3a8); } .captionInput { width: 100%; padding: 10px 12px; background-color: var(--background-tertiary, rgba(0, 0, 0, 0.3)); border: 1px solid transparent; border-radius: 6px; color: var(--text-primary, #fff); font-size: 14px; font-family: inherit; outline: none; box-sizing: border-box; transition: border-color 0.1s; } .captionInput:focus { border-color: var(--brand-primary, #5865f2); } .errorBanner { padding: 10px 12px; background-color: rgba(234, 80, 80, 0.15); border: 1px solid rgba(234, 80, 80, 0.45); border-radius: 6px; color: var(--text-primary, #fff); font-size: 13px; line-height: 1.45; word-break: break-word; }