/* v3 styles (same as v2 + messages) */
.media-picker-preview { position: relative; max-width: 30rem; display: block; margin-bottom: 1rem; }
.media-picker-thumb { display: block; height: auto; max-width: 100%; object-fit:cover; margin:auto; border: 1px solid #ccc; border-radius: 3px; background:#fff; }
.media-picker-overlay {
  position: absolute;
  padding: 0.5rem;
  bottom: 1px; left: 1px; right: 1px; background: rgba(255,255,255,0.5);
  display: flex; align-items: center; justify-content: center; gap: 1rem;

}

.media-picker-overlay button {
    font-size: 0px;
  border: none; padding: 0px; background: transparent;

}
.media-picker-overlay button:hover { background: transparent;}

.media-picker-wrap { display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap; margin:6px 0; }
.media-picker-inline { min-width: 190px; }
.media-picker-status { color:#444; font-size:12px; margin-top:4px; }
.media-picker-error { color:#b00020; font-size:12px; margin-top:4px; }
.media-picker-overlay .btn-change:before { content: 'Ƌ'; font-size: 3rem; font-family: use-web; display: inline-block; line-height: 1; }
.media-picker-overlay .btn-delete:before { color: #ef181e; content: 'ı'; font-size: 3rem; font-family: use-web; display: inline-block; line-height: 1; }
.media-picker-wait { text-align:center; width: 100%; padding: 1rem; background: linear-gradient( 90deg, #eee 25%, #f5f5f5 37%, #eee 63% ); background-size: 400% 100%; animation: mp-shimmer 1.2s infinite ease-in-out;  position: relative; }

.media-picker-preview[data-kind="video"]:before { content: ']'; font-family: use-web-arrows; font-size: 3rem; color: #fff; z-index: 1; position: absolute; left: 50%; top: 50%; -moz-transform: translate(-50%,-50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%,-50%); transform: translate(-50%, -50%); }
                                                  
                                               


/* малък спинър в средата */
.media-picker-wait::before { content: ""; width: 3rem; height: 3rem; display: block; margin: 0 auto; margin-bottom: 1rem; border: 3px solid #bbb; border-top-color: transparent; border-radius: 50%; animation: mp-spin 0.8s linear infinite; position: relative; }

@keyframes mp-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes mp-spin {
    to { transform: rotate(360deg); }
}