.photo-bank { --bank-purple: #7134db; box-sizing: border-box; width: min(920px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); margin: auto; padding: 22px; border: 1px solid #e8e2ee; border-radius: 22px; color: #241c30; background: #faf8fc; box-shadow: 0 24px 80px #160a3340; overflow: auto; overscroll-behavior: contain; font: 14px/1.45 system-ui, sans-serif; }
.photo-bank::backdrop { background: #10091b99; backdrop-filter: blur(4px); }
.photo-bank *, .photo-bank *::before, .photo-bank *::after { box-sizing: border-box; }
.photo-bank [hidden] { display: none !important; }
.photo-bank__header, .photo-bank__toolbar, .photo-bank__actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.photo-bank__header { align-items: flex-start; }
.photo-bank__heading { min-width: 0; }
.photo-bank h2 { font-size: 24px; line-height: 1.2; margin: 0; }
.photo-bank__brand { margin: 5px 0 0; color: #6d6179; overflow-wrap: anywhere; }
.photo-bank__toolbar { justify-content: flex-start; margin-top: 20px; }
.photo-bank__button { appearance: none; border: 1px solid #ded4e9; border-radius: 12px; padding: 10px 13px; min-height: 44px; font: inherit; font-weight: 650; color: inherit; background: white; cursor: pointer; }
.photo-bank__button:hover { background: #f0e9f9; }
.photo-bank__button:disabled { opacity: .55; cursor: wait; }
.photo-bank__button--primary { color: white; border-color: var(--bank-purple); background: var(--bank-purple); }
.photo-bank__button--primary:hover { background: #5e25c0; }
.photo-bank button:focus-visible { outline: 3px solid #a174eb; outline-offset: 3px; }
.photo-bank__status { margin: 16px 0; color: #6d6179; }
.photo-bank__error { color: #a12449; overflow-wrap: anywhere; }
.photo-bank__error:empty { display: none; }
.photo-bank__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.photo-bank__card { display: flex; flex-direction: column; min-width: 0; padding: 8px; background: white; border: 1px solid #e8e2ee; border-radius: 17px; }
.photo-bank__thumbnail { display: block; appearance: none; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 11px; background: #ebe7ee; overflow: hidden; cursor: zoom-in; }
.photo-bank__thumbnail img { display: block; width: 100%; height: 100%; object-fit: contain; color: #6d6179; font: 13px/1.4 system-ui, sans-serif; }
.photo-bank__caption { font-weight: 650; margin: 10px 2px 4px; overflow-wrap: anywhere; }
.photo-bank__date { display: block; margin: 0 2px 10px; color: #796d84; font-size: 12px; }
.photo-bank__card { position: relative; }
/* One action per card ("Użyj"); downloading lives in the full view. */
.photo-bank__card .photo-bank__actions { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 6px; margin-top: auto; }
/* × in the photo's top-right corner: a 44 × 44 target, a 26 px mark. */
.photo-bank__delete { position: absolute; z-index: 2; top: 8px; right: 8px; display: grid; place-items: start end; width: 44px; height: 44px; padding: 6px; border: 0; border-radius: 0 11px 0 0; background: transparent; color: #241c30; cursor: pointer; }
.photo-bank__delete-icon { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid #ded4e9; border-radius: 50%; background: #fffffff0; font: 400 20px/1 system-ui, sans-serif; }
.photo-bank__delete:hover .photo-bank__delete-icon { border-color: #a12449; color: #a12449; }
.photo-bank__delete:disabled { cursor: wait; }
.photo-bank__delete.mango-loading .photo-bank__delete-icon { font-size: 0; }
.photo-bank__delete.mango-loading .photo-bank__delete-icon::before { content: ""; width: 20px; height: 20px; background: var(--mango-loader-image, url("/assets/brand/cosmomango-loader.svg")) center / contain no-repeat; }
.photo-bank__delete:focus-visible { outline-offset: -3px; }
.photo-bank__card .photo-bank__button { min-width: 0; padding: 8px 3px; font-size: 12px; overflow-wrap: normal; }
.photo-bank__preview { text-align: center; }
.photo-bank__full-image { display: block; max-width: 100%; max-height: calc(100dvh - 280px); margin: 16px auto; object-fit: contain; border-radius: 12px; background: #ebe7ee; }
.photo-bank__preview .photo-bank__actions { justify-content: center; margin-top: 16px; }
@media (max-width: 480px) { .photo-bank { padding: 16px; border-radius: 18px; } .photo-bank__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .photo-bank__card { padding: 6px; } .photo-bank__delete { top: 6px; right: 6px; } .photo-bank__close { padding: 9px 11px; } }

@media (max-width: 360px) { .photo-bank { padding: 12px; } .photo-bank__card .photo-bank__button { font-size: 11px; } }

.photo-bank__more { display: block; margin: 20px auto 0; }
.photo-bank__image-error { color: #a12449; font-size: 12px; margin: 8px 2px; }

.photo-bank__pending { display: grid; gap: 10px; margin: 16px 0; }
.photo-bank__pending-card { padding: 14px; background: #fff6e4; border: 1px solid #e7cb90; border-radius: 14px; }
.photo-bank__pending-card p { margin: 4px 0 12px; }
.photo-bank__pending-card .photo-bank__actions { justify-content: flex-start; }

.chat-studio__photo-bank { position: relative; }
.chat-studio__photo-bank-count { position: absolute; right: -2px; top: -2px; display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 3px; border: 1.5px solid #fff; border-radius: 99px; background: #b22645; color: #fff; font: 700 10px/1 system-ui, sans-serif; pointer-events: none; }
.chat-studio__photo-bank-count[hidden] { display: none; }

.photo-bank__video-thumbnail { position: relative; color: #241c30; font: 700 14px/1.4 system-ui,sans-serif; }
.photo-bank__video-thumbnail { cursor: pointer; }
.photo-bank__video-thumbnail img { height: 100%; }
.photo-bank__play-icon { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #7134db; background: #fff; box-shadow: 0 3px 18px #241c3030; font-size: 21px; padding-left: 3px; }
.photo-bank__video-badge { position: absolute; bottom: 8px; right: 8px; padding: 3px 7px; border-radius: 5px; color: #241c30; background: #fffffff0; font-size: 12px; }
.photo-bank__video-stage { position: relative; width: min(100%, 350px); aspect-ratio: 9 / 16; max-height: calc(100dvh - 290px); margin: 16px auto; overflow: hidden; border-radius: 12px; background: #f0eaf7; }
.photo-bank__video-stage .photo-bank__full-image, .photo-bank__video-poster { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; margin: 0; object-fit: contain; }
.photo-bank__video-poster { pointer-events: none; }
.photo-bank__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: max-content; max-width: calc(100% - 24px); background: #fff; box-shadow: 0 3px 18px #241c3024; color: #7134db; }
.photo-bank__thumbnail img:not([src]) { visibility: hidden; }