/* Стили диалогов пулов карточек. Диалоги MudBlazor рендерятся через provider вне DOM-скоупа компонента,
   поэтому Isolated CSS до них не достаёт — держим их здесь и подключаем из wwwroot/index.html. */

/* Оболочка диалога редактора коллекции — тот же «премиальный» градиент, что и у диалога This or That,
   для визуальной согласованности редакторов. Диалог портируется вне DOM компонента, стили глобальные. */
.mud-dialog.pool-collection-editor-dialog {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(122, 92, 255, 0.16) 0%, transparent 55%),
        radial-gradient(110% 90% at 0% 0%, rgba(74, 140, 255, 0.14) 0%, transparent 50%),
        linear-gradient(165deg, rgba(43, 45, 62, 0.98) 0%, rgba(19, 20, 30, 0.99) 100%);
    box-shadow: 0 26px 64px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.mud-dialog.pool-collection-editor-dialog::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #4a8cff 0%, #7a5cff 50%, #b45cff 100%);
    z-index: 2;
}

.pool-collection-editor-dialog .mud-dialog-title {
    padding: 20px 24px 8px;
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: 0.2px;
    color: #f4f5fc;
}

.pool-collection-editor-dialog .mud-dialog-title .mud-dialog-close-button {
    color: #aab2d5;
}

.pool-collection-editor-dialog .mud-dialog-title .mud-dialog-close-button:hover {
    color: #fff;
}

.pool-collection-editor-dialog__root,
.pool-item-editor {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 280px;
}

/* Единая панель создания/редактирования пула карточек (как билдер в макете): пунктирная рамка, лёгкий тон. */
.pool-collection-editor {
    display: flex;
    flex-direction: column;
    gap: 14px;
    border: 1px dashed var(--mud-palette-primary, #7c6cff);
    border-radius: 14px;
    padding: 16px;
    background: rgba(124, 108, 255, 0.06);
}

/* Шапка — одна строка: заголовок сжимается первым, счётчик и статус не переносятся. */
.pool-collection-editor__head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pool-collection-editor__head h4 {
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
    font-size: 0.95rem;
    line-height: 1.2;
}

.pool-collection-editor__count {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    flex: 0 0 auto;
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary, #a2a7bd);
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 9px;
    border-radius: 999px;
}

/* Напоминание про минимум живёт в счётчике: отдельным алертом оно занимало три строки на мобилке. */
.pool-collection-editor__need {
    font-size: 0.68rem;
    font-weight: 700;
    color: #ffc48a;
}

/* Кнопки действий редактора набора («Назад» и «Готово»). */
.pool-collection-editor__actions,
/* Кнопка секции выбора набора («Новый набор карточек») — только в пустом состоянии: когда наборы есть,
   создание живёт последним слайдом карусели, а правка с удалением — иконками у выбранного набора. */
.pool-picker__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.pool-btn {
    flex: 1 1 190px;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 16px;
    border-radius: 12px;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.pool-btn .mud-icon-root {
    flex: 0 0 auto;
    font-size: 18px;
}

.pool-btn--primary {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #4a5cff 0%, #8a5cff 100%);
    box-shadow: 0 6px 16px rgba(74, 92, 255, 0.3);
}

.pool-btn--primary:hover:not(:disabled) {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 9px 22px rgba(74, 92, 255, 0.42);
}

/* Две ступени НИЖЕ градиента. Нужны потому, что сам по себе .pool-btn задаёт только габариты и
   типографику — кнопка без модификатора выходит голым текстом, и второстепенное действие рядом
   с градиентным «Готово» выглядит не тише его, а просто недоделанным.
   Язык взят у чипсов полосы (--ghost) и у раскрытого инструмента верстака (--soft): в диалоге уже
   есть ровно эти два тона, и заводить третий значило бы плодить диалекты. */
.pool-btn--ghost {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: #d5d2e8;
}

.pool-btn--ghost:hover:not(:disabled) {
    border-color: rgba(124, 108, 255, 0.7);
    background: rgba(124, 108, 255, 0.12);
    color: #efedff;
}

/* Главное действие СВОЕГО блока, но не диалога: тонированный акцент не спорит с «Готово» за внимание. */
.pool-btn--soft {
    border: 1px solid rgba(124, 108, 255, 0.55);
    background: rgba(124, 108, 255, 0.16);
    color: #e2dfff;
}

.pool-btn--soft:hover:not(:disabled) {
    border-color: rgba(124, 108, 255, 0.9);
    background: rgba(124, 108, 255, 0.26);
    color: #f4f2ff;
    transform: translateY(-1px);
}

.pool-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
}

.pool-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    filter: none;
}

/* Превью карточек выбранного пула в секции выбора набора. */
.pool-preview {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.pool-preview__card {
    width: 64px;
    text-align: center;
}

.pool-preview__img {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--mud-palette-lines-default, rgba(255, 255, 255, 0.12));
    display: grid;
    place-items: center;
    color: var(--mud-palette-text-disabled, #737893);
    overflow: hidden;
}

.pool-preview__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pool-preview__img--more {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary, #a2a7bd);
}

.pool-preview__name {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary, #a2a7bd);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Карусель наборов карточек ===== */
/* Набор — это картинки, поэтому и выбирается он по картинкам: лента обложек вместо строки списка.
   Лента одной высоты независимо от числа наборов, а поиск сверху убирает долгое листание. */
.pool-carousel {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

.pool-carousel::-webkit-scrollbar {
    height: 8px;
}

.pool-carousel::-webkit-scrollbar-thumb {
    background: rgba(124, 108, 255, 0.35);
    border-radius: 999px;
}

.pool-carousel::-webkit-scrollbar-thumb:hover {
    background: rgba(124, 108, 255, 0.55);
}

/* Строка поиска и создания над лентой. Создание живёт здесь, а не слайдом в конце ленты: при десятке
   наборов такой слайд уезжал бы за край, а нужен он как раз тогда, когда подходящего набора нет. */
.pool-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.pool-toolbar__search {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
}

/* Компактная кнопка в тулбаре: обычная .pool-btn тянется на всю строку и вытесняла бы поиск. */
.pool-btn--compact {
    flex: 0 0 auto;
    padding: 8px 14px;
    font-size: 0.8rem;
}

/* Обёртка ленты — система координат для стрелок, наложенных на её края. */
.pool-carousel__wrap {
    position: relative;
}

.pool-carousel__slide {
    position: relative;
    flex: 0 0 152px;
    /* Без этого слайд не может стать уже своего содержимого: длинное название с nowrap раздувало
       плитку шире flex-basis, и обложка внутри (width 100% + aspect-ratio) росла вместе с ней. */
    min-width: 0;
    scroll-snap-align: start;
    border-radius: 13px;
    border: 1px solid var(--mud-palette-lines-default, rgba(255, 255, 255, 0.09));
    background: rgba(255, 255, 255, 0.03);
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}

.pool-carousel__slide:hover {
    border-color: rgba(124, 108, 255, 0.6);
    background: rgba(124, 108, 255, 0.08);
    transform: translateY(-1px);
}

.pool-carousel__slide--active {
    border-color: transparent;
    background: linear-gradient(135deg, rgba(74, 92, 255, 0.24) 0%, rgba(138, 92, 255, 0.24) 100%);
    box-shadow: 0 8px 22px rgba(74, 92, 255, 0.3), inset 0 0 0 1px rgba(160, 150, 255, 0.6);
}

.pool-carousel__slide:focus-within {
    border-color: rgba(124, 108, 255, 0.8);
}

/* Кликабельная область слайда во всю плитку: сам слайд — контейнер, чтобы кнопки правки и удаления
   не оказались вложенными в кнопку выбора. */
.pool-carousel__pick {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
    padding: 8px;
    border: 0;
    background: transparent;
    color: #eef0fa;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.pool-carousel__pick:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Действия над выбранным набором — поверх его обложки: рядом с тем, к чему относятся. */
.pool-carousel__acts {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 3px;
}

.pool-carousel__act {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 7px;
    background: rgba(18, 18, 28, 0.85);
    color: rgba(255, 255, 255, 0.78);
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease;
}

.pool-carousel__act:hover:not(:disabled) {
    background: rgba(45, 45, 65, 0.95);
    color: #fff;
}

.pool-carousel__act--danger {
    color: #ff8a8f;
}

.pool-carousel__act--danger:hover:not(:disabled) {
    background: rgba(242, 84, 91, 0.24);
    color: #ff6b72;
}

.pool-carousel__act:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Стрелки листания наложены на края ленты: своей строки под лентой они не стоят.
   По вертикали — на уровне обложки, а не середины плитки: там они не спорят с подписями. */
.pool-carousel__arrow {
    position: absolute;
    top: 34%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(18, 18, 28, 0.88);
    color: #e6e3ff;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    transition: background 0.18s ease, border-color 0.18s ease;
}

.pool-carousel__arrow:hover {
    background: rgba(45, 45, 65, 0.95);
    border-color: rgba(124, 108, 255, 0.6);
}

.pool-carousel__arrow--prev {
    left: -6px;
}

.pool-carousel__arrow--next {
    right: -6px;
}

.pool-carousel__name {
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pool-carousel__meta {
    display: flex;
    gap: 4px;
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary, #a2a7bd);
    white-space: nowrap;
    overflow: hidden;
}

.pool-carousel__meta > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.pool-carousel__warn {
    color: #ffc48a;
    font-weight: 700;
    flex: 0 0 auto;
}

/* Обложка набора — мозаика из первых картинок. Раскладка зависит от того, сколько их пришло:
   неполный набор не должен оставлять в плитке пустые дыры. */
.pool-cover {
    display: grid;
    gap: 2px;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.22);
}

.pool-cover--0,
.pool-cover--1 {
    grid-template-columns: 1fr;
}

.pool-cover--2 {
    grid-template-columns: 1fr 1fr;
}

.pool-cover--3 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

/* Первая картинка занимает половину плитки целиком, две оставшиеся делят вторую половину. */
.pool-cover--3 .pool-cover__cell:first-child {
    grid-row: span 2;
}

.pool-cover--4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.pool-cover__cell {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pool-cover__empty {
    display: grid;
    place-items: center;
    color: var(--mud-palette-text-disabled, #737893);
}

/* Превью карточек выбранного набора: лентой в одну строку, чтобы длинный набор не растил секцию вниз. */
.pool-preview--scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
}

.pool-item-editor__image {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.pool-item-editor__preview {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.pool-item-editor__placeholder {
    width: 140px;
    height: 140px;
    border-radius: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.4);
}

/* ===== Диалог управления элементами коллекции ===== */

.pool-items {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 300px;
}

.pool-items__state,
.pool-items__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 32px 16px;
    text-align: center;
}

.pool-items__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pool-items__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.pool-items__card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.pool-items__thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
}

.pool-items__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pool-items__initial {
    font-size: 2rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
}

.pool-items__name {
    font-size: 0.9rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pool-items__actions {
    display: flex;
    justify-content: center;
    gap: 4px;
}

/* ===== Статус автосохранения ===== */
/* Редактор сохраняет всё сразу, а кнопка «Готово» ничего не отправляет — без явного статуса это
   читалось как несохранённая форма. */
.pool-save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #7fd8a8;
    background: rgba(60, 200, 130, 0.12);
    border: 1px solid rgba(60, 200, 130, 0.28);
}

.pool-save--busy {
    color: #c7cdea;
    background: rgba(124, 108, 255, 0.14);
    border-color: rgba(124, 108, 255, 0.3);
}

.pool-save .mud-progress-circular {
    width: 13px;
    height: 13px;
}

/* ===== Зона мультизагрузки ===== */
.pool-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 20px 16px;
    border: 1.5px dashed rgba(124, 108, 255, 0.5);
    border-radius: 14px;
    background: rgba(124, 108, 255, 0.05);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.12s ease;
}

.pool-drop:hover {
    border-color: rgba(124, 108, 255, 0.85);
    background: rgba(124, 108, 255, 0.12);
}

/* Класс вешает JS-хелпер на dragover — подсветка «сюда можно бросить». */
.pool-drop--over {
    border-style: solid;
    border-color: #7c6cff;
    background: rgba(124, 108, 255, 0.2);
    transform: scale(1.01);
}

.pool-drop--disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Когда карточки уже есть, зона схлопывается в одну строку: подробная инструкция нужна только
   на пустом наборе, дальше главный элемент экрана — сетка карточек. */
.pool-drop--compact {
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
}

.pool-drop--compact .pool-drop__icon {
    font-size: 20px;
}

.pool-drop--compact .pool-drop__title {
    font-size: 0.82rem;
}

.pool-drop--compact .pool-drop__hint {
    display: none;
}

.pool-drop__icon {
    font-size: 30px;
    color: #b9b2ff;
}

.pool-drop__title {
    font-weight: 800;
    font-size: 0.92rem;
    color: #e6e3ff;
}

.pool-drop__hint {
    font-size: 0.74rem;
    line-height: 1.35;
    max-width: 46ch;
    color: var(--mud-palette-text-secondary, #a2a7bd);
}

.pool-drop input[type="file"] {
    display: none;
}

/* ===== Верстак: свёрнутые инструменты наполнения ===== */
/* Зона загрузки и полоса подбора занимали верх редактора всегда — около 280px, — и сетке приходилось
   заводить СВОЙ скролл внутри скролла диалога. Оба инструмента нужны эпизодически: набрал карточки и
   дальше их правишь. Поэтому с первой карточкой они сворачиваются в эту строку кнопок. */
.pool-wb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pool-wb__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 170px;
    padding: 9px 13px;
    border-radius: 11px;
    border: 1px dashed rgba(124, 108, 255, 0.45);
    background: rgba(124, 108, 255, 0.05);
    color: #b9b2ff;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.pool-wb__btn:hover {
    border-color: rgba(124, 108, 255, 0.85);
    background: rgba(124, 108, 255, 0.11);
    color: #d7d2ff;
}

/* Раскрытый инструмент — сплошная рамка и залитый фон: строка кнопок и раскрытая панель должны
   читаться как одно целое, иначе панель выглядит прилетевшей ниоткуда. */
.pool-wb__btn--on {
    border-style: solid;
    border-color: rgba(124, 108, 255, 0.85);
    background: rgba(124, 108, 255, 0.16);
    color: #e2dfff;
}

.pool-wb__chev {
    transition: transform 0.18s ease;
}

.pool-wb__btn--on .pool-wb__chev {
    transform: rotate(180deg);
}

/* Короткая подпись живёт только на узком экране, полная — только на широком. */
.pool-wb__short {
    display: none;
}

/* Свёрнутый инструмент прячется КЛАССОМ, а не размонтированием: на зоне загрузки висят слушатели
   перетаскивания и вставки, а у полосы подбора копится оплаченный ответ модели и остаток квоты. */
.pool-collapsed {
    display: none !important;
}

.pool-upload {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pool-upload__label {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary, #a2a7bd);
    font-variant-numeric: tabular-nums;
}

/* ===== Сетка карточек ===== */
/* Пул из картинок правим в том же виде, в каком он отрисуется при голосовании, — плитками, а не строками. */
.pool-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
    gap: 10px;
    max-height: 46vh;
    overflow-y: auto;
    padding: 2px 6px 2px 2px;
}

.pool-cards::-webkit-scrollbar {
    width: 8px;
}

.pool-cards::-webkit-scrollbar-thumb {
    background: rgba(124, 108, 255, 0.35);
    border-radius: 999px;
}

.pool-cards::-webkit-scrollbar-thumb:hover {
    background: rgba(124, 108, 255, 0.55);
}

.pool-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.035);
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.pool-card:hover {
    border-color: rgba(124, 108, 255, 0.45);
    background: rgba(124, 108, 255, 0.06);
}

.pool-card:focus-within {
    border-color: rgba(124, 108, 255, 0.7);
    box-shadow: 0 0 0 3px rgba(124, 108, 255, 0.12);
}

.pool-card--draft {
    border-style: dashed;
    border-color: rgba(124, 108, 255, 0.4);
}

.pool-card__thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    display: grid;
    place-items: center;
    overflow: hidden;
    color: rgba(170, 160, 255, 0.75);
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.pool-card__thumb:hover {
    border-color: rgba(124, 108, 255, 0.7);
    background: rgba(124, 108, 255, 0.12);
    color: #b9b2ff;
}

.pool-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Когда картинка выбрана — рамка сплошная, чтобы её не путали с плейсхолдером-загрузкой. */
.pool-card__thumb:has(img) {
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.12);
}

/* Только file-input: в режиме ссылки внутри миниатюры живёт видимое поле для URL,
   и общий селектор по input прятал заодно и его. */
.pool-card__thumb input[type="file"] {
    display: none;
}

/* Режим «картинка по ссылке»: поле занимает место миниатюры, поэтому высота карточки не меняется
   и сетка не разъезжается. URL сюда почти всегда вставляют, а не набирают, — узкое поле терпимо. */
.pool-card__thumb--url {
    cursor: default;
    border-style: solid;
    border-color: rgba(124, 108, 255, 0.55);
    background: rgba(124, 108, 255, 0.1);
    padding: 8px;
    /* Колонкой, а не по центру: над полем — что это, под полем — что с ним делать. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    overflow: hidden;
}

.pool-card__url-cap {
    font-size: 0.6rem;
    line-height: 1.2;
    text-align: center;
    color: #b9b2ff;
}

.pool-card__url {
    display: block;
    font: inherit;
    font-size: 0.72rem;
    width: 100%;
    color: #ececf5;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 7px;
    padding: 6px 7px;
    text-overflow: ellipsis;
}

.pool-card__url::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.pool-card__url:focus {
    outline: none;
    border-color: #7c6cff;
    box-shadow: 0 0 0 2px rgba(124, 108, 255, 0.25);
}

/* У черновика действия видны всегда: это активная область работы, а на тач-экране наведения нет. */
.pool-card--draft .pool-card__actions {
    opacity: 1;
}

.pool-card__name {
    font: inherit;
    font-size: 0.82rem;
    color: #ececf5;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 6px 9px;
    width: 100%;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.pool-card__name::placeholder {
    color: rgba(255, 255, 255, 0.32);
}

.pool-card__name:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.35);
    border-color: #7c6cff;
    box-shadow: 0 0 0 3px rgba(124, 108, 255, 0.2);
}

.pool-card__name--error,
.pool-card__name--error:focus {
    border-color: #f2545b;
    box-shadow: 0 0 0 3px rgba(242, 84, 91, 0.18);
}

.pool-card__error {
    color: #f2545b;
    font-size: 0.7rem;
    line-height: 1.25;
}

/* Действия карточки поверх картинки — проявляются на наведении, чтобы не шуметь в сетке. */
.pool-card__actions {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 3px;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.pool-card:hover .pool-card__actions,
.pool-card:focus-within .pool-card__actions {
    opacity: 1;
}

.pool-card__act {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 8px;
    background: rgba(18, 18, 28, 0.85);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease;
}

.pool-card__act:hover {
    background: rgba(45, 45, 65, 0.95);
    color: #fff;
}

.pool-card__act--danger:hover {
    color: #ff6b72;
    background: rgba(242, 84, 91, 0.24);
}

/* Плитка «Карточка без картинки» — тот же размер, что и карточки, чтобы сетка не рвалась. */
.pool-card--add {
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 150px;
    border: 1.5px dashed rgba(124, 108, 255, 0.45);
    background: transparent;
    color: #b9b2ff;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}

.pool-card--add:hover {
    border-color: rgba(124, 108, 255, 0.85);
    background: rgba(124, 108, 255, 0.1);
    color: #d7d2ff;
}

/* ============================================================================
   Полоса предложений (AI-подбор карточек по теме).
   Свой префикс .pool-tray*, потому что диалоги MudBlazor рендерятся вне DOM-скоупа компонента
   и Isolated CSS до них не достаёт — как и у остального в этом файле.
   ============================================================================ */

.pool-tray {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 4px 0 12px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(124, 108, 255, 0.22);
    background: linear-gradient(160deg, rgba(124, 108, 255, 0.09) 0%, rgba(74, 140, 255, 0.05) 100%);
}

.pool-tray__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pool-tray__lead {
    font-size: 0.86rem;
    font-weight: 600;
    color: #cfc9ff;
    white-space: nowrap;
}

.pool-tray__input {
    flex: 1 1 180px;
    min-width: 0;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.24);
    color: #ececf5;
    font-size: 0.9rem;
}

.pool-tray__input:focus {
    outline: none;
    border-color: rgba(124, 108, 255, 0.7);
}

/* flex: 0 0 auto — рост подписи с «Предложить» (10 символов) до «Лимит исчерпан» (14) съедает
   ~30 px у поля ввода и ничего не ломает. «Сервис занят» короче, худший случай тот же. */
.pool-tray__go {
    flex: 0 0 auto;
}

.pool-tray__quota {
    font-size: 0.74rem;
    color: rgba(236, 236, 245, 0.55);
    white-space: nowrap;
}

.pool-tray__chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pool-tray__chips-label {
    font-size: 0.76rem;
    color: rgba(236, 236, 245, 0.5);
}

.pool-chip {
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: #d5d2e8;
    font-size: 0.78rem;
    cursor: pointer;
}

.pool-chip:hover:not(:disabled) {
    border-color: rgba(124, 108, 255, 0.7);
    background: rgba(124, 108, 255, 0.12);
}

.pool-chip--active {
    border-color: rgba(124, 108, 255, 0.85);
    background: rgba(124, 108, 255, 0.18);
    color: #efedff;
}

.pool-tray__notice {
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 176, 32, 0.1);
    color: #ffd79a;
    font-size: 0.82rem;
}

/* Общий кредит источников под полосой: Open Food Facts (CC-BY-SA) требует указания, ссылка на конкретный файл — у плитки.
   Приглушённый и мелкий — это атрибуция, а не часть основного потока действий. */
.pool-tray__credits {
    padding: 6px 2px 0;
    font-size: 0.72rem;
    line-height: 1.4;
    color: rgba(236, 236, 245, 0.45);
}

.pool-tray__credits a {
    color: rgba(160, 148, 255, 0.75);
    text-decoration: none;
}

.pool-tray__credits a:hover {
    text-decoration: underline;
}

.pool-tray__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pool-tray__title {
    flex: 1 1 auto;
    font-size: 0.8rem;
    color: rgba(236, 236, 245, 0.68);
}

/* Кнопки шапки полосы компактные: базовая .pool-btn растягивается от 190px и выдавливала бы подпись
   «Предложено N» на отдельную строку, оставляя шапку из трёх этажей на ровном месте.
   Радиус 10px — как у поля ввода и чипсов полосы; базовые 12px выбивались бы из её собственной шапки. */
.pool-tray__more,
.pool-tray__takeall {
    flex: 0 0 auto;
    padding: 7px 14px;
    font-size: 0.8rem;
    border-radius: 10px;
}

/* Горизонтальная прокрутка: полоса показывает одну тему за раз, взятые плитки из неё не исчезают —
   иначе раскладка прыгала бы под курсором. */
.pool-tray__strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}

.pool-tray__tile {
    flex: 0 0 auto;
    width: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
    color: #e6e4f2;
    cursor: pointer;
    transition: border-color 0.15s ease, opacity 0.15s ease;
}

.pool-tray__tile:hover:not(:disabled) {
    border-color: rgba(124, 108, 255, 0.75);
}

/* Погашенная плитка: кликнута (сохраняется или уже сохранена) либо недоступна. Разделять «в очереди»
   и «отправлена» пользователю незачем — выглядят одинаково, значит в коде это одно множество. */
.pool-tray__tile--taken {
    opacity: 0.38;
    cursor: default;
}

.pool-tray__tile:disabled {
    cursor: default;
}

.pool-tray__thumb {
    width: 84px;
    height: 84px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
}

.pool-tray__thumb img {
    width: 100%;
    height: 100%;
    /* object-fit задаётся инлайном из кода лицензии: cover для CC0/PD/CC BY, contain для ShareAlike/ND. */
}

.pool-tray__shimmer {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.04) 75%);
    background-size: 200% 100%;
    animation: pool-tray-shimmer 1.4s linear infinite;
}

@keyframes pool-tray-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* Плитка «добавляется»: НЕ затемняем (затемнение означает «уже в наборе»), лишь помечаем акцентной
   рамкой — основной сигнал ожидания даёт спиннер поверх превью. */
.pool-tray__tile--adding {
    border-color: rgba(124, 108, 255, 0.6);
    cursor: default;
}

.pool-tray__adding {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 9, 16, 0.45);
}

.pool-tray__spinner {
    width: 26px;
    height: 26px;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: #7c6cff;
    border-radius: 50%;
    animation: pool-tray-spin 0.8s linear infinite;
}

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

/* Зелёная галочка «добавлено». Кроет ровно область превью (плитка: padding 6px, превью 84px), но лежит
   на обёртке — поверх затемнённой плитки, чтобы читаться в полную силу. pointer-events сняты: клика тут нет. */
.pool-tray__check {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.pool-tray__check-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #3fae5a;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.pool-tray__name {
    width: 100%;
    font-size: 0.72rem;
    line-height: 1.15;
    text-align: center;
    /* Две строки — потолок: имена модели ограничены 60 символами именно по ширине этой плитки. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Кредиты: CC BY и CC BY-SA их требуют, а таких в наборе оказывается большинство. Сворачиваемый блок —
   TASL разрешено размещать «любым разумным способом, подходящим для носителя». */
.pool-credits {
    margin-top: 10px;
    font-size: 0.78rem;
    color: rgba(236, 236, 245, 0.6);
}

.pool-credits > summary {
    cursor: pointer;
    padding: 4px 0;
}

.pool-credits__list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pool-credits__row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pool-credits__name {
    color: rgba(236, 236, 245, 0.85);
}

.pool-credits__author {
    color: rgba(236, 236, 245, 0.6);
}

.pool-credits__link {
    color: #a79dff;
}

/* ============================================================================
   Каркас инлайн-редактора набора внутри диалога опроса/тирлиста.
   Класс вешается на ContentClass, пока открыт редактор (poolInlineEditing), и снимается при выходе:
   для остальных шагов диалога обычная прокрутка формы правильна.

   Скроллов было два: форма (.pw-form, max-height 68vh) и сетка карточек (.pool-cards, max-height 46vh).
   Колесо работало по-разному в зависимости от того, где курсор, а «Готово» уезжало за нижний край.
   Здесь прокрутка отдаётся ОДНОЙ сетке: цепочка от контента диалога до неё становится flex-колонкой,
   а высоту диалогу задаёт его собственный max-height. Отсюда min-height: 0 на каждом звене — без него
   flex-элемент не сжимается ниже своего содержимого, и сетка не получила бы остаток высоты.

   На время редактора диалог отдаёт редактору всю высоту: заголовок с крестиком снимается
   через SetTitleAsync(null), кнопки — через .pw-actions--hidden.
   ============================================================================ */
@media (min-width: 601px) {
    /* Двойной класс не для красоты: overflow здесь спорит с дефолтом MudBlazor (.mud-dialog-content
       задаёт overflow: auto) той же специфичности, и одиночный класс выигрывал бы только порядком
       подключения файлов в index.html. Ставка на очередь тут стоила бы возврата второго скролла. */
    .mud-dialog-content.pool-inline-shell {
        display: flex;
        flex-direction: column;
        min-height: 0;
        /* Прокрутку забирает сетка; здесь она означала бы второй скролл, ради устранения которого всё и делается. */
        overflow: hidden;
    }

    .pool-inline-shell .tierlist-editor-dialog__root,
    .pool-inline-shell .pairwise-poll-editor-dialog__root,
    .pool-inline-shell .pw-form,
    .pool-inline-shell .pw-form__section,
    .pool-inline-shell .pool-collection-editor {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    /* Собственный потолок формы снимаем: теперь высоту раздаёт диалог, а не эта строка. */
    .pool-inline-shell .pw-form {
        max-height: none;
        overflow: visible;
    }

    /* Всё, кроме сетки, держит свою высоту: сжиматься должна она одна. */
    .pool-inline-shell .pool-collection-editor > * {
        flex: 0 0 auto;
    }

    .pool-inline-shell .pool-cards {
        flex: 1 1 auto;
        max-height: none;
        /* Иначе на низком окне с раскрытым инструментом сетка сжимается в полоску и становится бесполезной. */
        min-height: 140px;
    }
}

/* Мобилки: диалог редактора набора — на весь экран, чтобы сетке карточек хватало ширины. */
@media (max-width: 600px) {
    .mud-dialog-container:has(> .pool-collection-editor-dialog) {
        padding: 0;
    }

    .mud-dialog.pool-collection-editor-dialog {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    /* У этого диалога переопределения content не было вовсе — он жил на дефолте MudBlazor
       (padding: 0 24px, margin: 8px 0), то есть отдавал 48px ширины из 390 внешнему полю при том,
       что у самой панели редактора есть своё. Селектор через класс диалога: дефолт MudBlazor
       той же специфичности, что ContentClass, и спорить с ним порядком файлов ненадёжно. */
    .pool-collection-editor-dialog .mud-dialog-content {
        padding: 4px 8px 12px;
        margin: 0;
    }

    .pool-collection-editor-dialog .mud-dialog-title {
        padding: 14px 14px 6px;
    }

    /* Сетка карточек своим скроллом внутри скролла диалога на тач-экране почти неуправляема:
       палец попадает то во внутреннюю область, то во внешнюю. Отдаём прокрутку целиком диалогу,
       а плитки делаем мельче — на 390px в строку влезает три, а не одна. */
    .pool-cards {
        max-height: none;
        overflow: visible;
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
        gap: 8px;
    }

    /* Панель редактора теснее: на 390px рамка с отступами съедала заметную долю ширины сетки. */
    .pool-collection-editor {
        gap: 10px;
        padding: 12px 10px;
    }

    /* Каркас с фиксированной высотой на телефон НЕ переносим, и это осознанно: при overflow: hidden
       браузеру нечем подтянуть поле ввода из-под клавиатуры, 100dvh меняется на ходу вместе с адресной
       строкой, а в ландшафте обвязка не оставила бы сетке и одного ряда. Скролл здесь и так один — общий
       на диалог. С телефона берётся только вторая половина решения: свёрнутый верстак.
       Он липкий, потому что иначе подняться к инструментам стоит прокрутки через весь набор. */
    .pool-wb {
        position: sticky;
        top: 0;
        z-index: 3;
        margin: 0 -10px;
        padding: 8px 10px;
        background: linear-gradient(180deg, #242639 0%, #242639 72%, rgba(36, 38, 57, 0) 100%);
    }

    /* На 390px две кнопки полными подписями переносятся на две строки — показываем короткие. */
    .pool-wb__text {
        display: none;
    }

    .pool-wb__short {
        display: inline;
    }

    .pool-collection-editor__head h4 {
        font-size: 0.86rem;
    }

    /* У статуса автосохранения остаётся только иконка — подпись занимала половину шапки. */
    .pool-save__text {
        display: none;
    }

    .pool-drop {
        padding: 16px 12px;
    }

    /* На 390px слайд в 152px оставлял от соседнего только край — уже видно два набора целиком. */
    .pool-carousel__slide {
        flex-basis: 132px;
    }

    /* Стрелки на тач-экране не нужны — лента листается пальцем, а кнопки закрывали бы края плиток. */
    .pool-carousel__arrow {
        display: none;
    }

    .pool-card--add {
        min-height: 120px;
    }

    /* Скролл теперь общий на весь диалог, и при полном наборе «Готово» уезжало бы на десятки карточек
       вниз — прижимаем его к низу видимой области. */
    .pool-collection-editor__actions {
        position: sticky;
        bottom: 0;
        z-index: 3;
        margin: 0 -10px -12px;
        padding: 10px;
        background: linear-gradient(180deg, rgba(19, 20, 30, 0) 0%, rgba(19, 20, 30, 0.94) 40%);
    }
}


/* ============================================================================
   Типографская карточка — замена изображения, когда свободной картинки не нашлось.

   Живёт в глобальном файле, а не в scoped-стилях компонента, намеренно: её показывают ДВА разных
   места из разных папок (полоса подбора и карточка голосования), а scoped-стили одного компонента
   в разметку другого не попадают. Размеры задаёт модификатор места, общее здесь — только раскладка
   и типографика.
   ========================================================================= */
.pool-typo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 6px;
    box-sizing: border-box;
    overflow: hidden;
    /* Базовый кегль, от которого компонент считает свои ступени в em. Место переопределяет его. */
    font-size: 20px;
}

.pool-typo__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
    text-align: center;
    font-weight: 700;
    line-height: 1.12;
    color: #f7f7fb;
    /* Тень, а не обводка: фон всегда тёмный (L=32%), и от неё нужна только уверенность на светлых тонах. */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    /* Длинные модели («Samsung Galaxy S24 Ultra») обязаны переноситься, иначе строка вылезает за плитку. */
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* Плитка полосы подбора: 84×84, скруглением совпадает с картинкой. */
.pool-typo--tile {
    border-radius: 10px;
    font-size: 19px;
}

/* Кружок аватара в карточке голосования: круглая маска и кегль под меньший диаметр. */
.pool-typo--avatar {
    border-radius: 50%;
    font-size: 17px;
}

/* Постер custom-пула (не игроки мафии): прямоугольная замена изображения под крупный медиа-бокс
   карточки голосования — скругление совпадает с ним, кегль крупнее под больший размер. */
.pool-typo--media {
    border-radius: 16px;
    font-size: 30px;
}

/* Постер-плитка тир-листа custom-пула: скругление под медиа-бокс чипа, кегль меньше (плитка ~70px). */
.pool-typo--tier {
    border-radius: 10px;
    font-size: 15px;
}

/* Обёртка плитки: нужна только затем, чтобы кнопка «обновить» легла поверх её угла. Сама плитка —
   button, а кнопка внутри кнопки невалидна и в части браузеров не получает клик вовсе. */
.pool-tray__tile-wrap {
    position: relative;
    flex: 0 0 auto;
}

.pool-tray__refresh,
.pool-tray__source {
    position: absolute;
    top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(12, 13, 22, 0.72);
    color: #cfd0e4;
    cursor: pointer;
    /* Появляется по наведению на плитку: шестнадцать постоянно висящих иконок спорят с картинками
       и читаются как «здесь что-то не так» на каждой карточке. На тач-устройствах медиазапрос ниже
       возвращает её насовсем — там наведения не существует. */
    opacity: 0;
    transition: opacity 0.12s ease, background 0.12s ease;
}

.pool-tray__refresh {
    right: 2px;
}

/* «?» — в противоположном углу от «обновить»: две иконки в одном углу перекрывали бы друг друга,
   а на 96 px разнести их больше некуда. */
.pool-tray__source {
    left: 2px;
    text-decoration: none;
}

.pool-tray__tile-wrap:hover .pool-tray__refresh,
.pool-tray__tile-wrap:hover .pool-tray__source,
.pool-tray__refresh:focus-visible,
.pool-tray__source:focus-visible {
    opacity: 1;
}

.pool-tray__refresh:hover:not(:disabled),
.pool-tray__source:hover {
    background: rgba(124, 108, 255, 0.9);
    color: #fff;
}

.pool-tray__refresh:disabled {
    cursor: default;
    opacity: 0.35;
}

@media (hover: none) {
    .pool-tray__refresh,
    .pool-tray__source {
        opacity: 1;
    }
}

/* Ассист-поиск: под кнопкой «обновить» на правом краю, чтобы не спорить с «?» слева и «обновить» сверху. */
.pool-tray__search-ext {
    position: absolute;
    right: 2px;
    top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(12, 13, 22, 0.72);
    color: #cfd0e4;
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.12s ease, background 0.12s ease;
}

.pool-tray__tile-wrap:hover .pool-tray__search-ext,
.pool-tray__search-ext:focus-visible {
    opacity: 1;
}

.pool-tray__search-ext:hover {
    background: rgba(124, 108, 255, 0.9);
    color: #fff;
}

@media (hover: none) {
    .pool-tray__search-ext {
        opacity: 1;
    }
}

/* Прикрепить своё: под «?» на левом краю — зеркально ассист-поиску справа. */
.pool-tray__attach {
    position: absolute;
    left: 2px;
    top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(12, 13, 22, 0.72);
    color: #cfd0e4;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s ease, background 0.12s ease;
}

.pool-tray__tile-wrap:hover .pool-tray__attach,
.pool-tray__attach:focus-visible {
    opacity: 1;
}

.pool-tray__attach:hover {
    background: rgba(124, 108, 255, 0.9);
    color: #fff;
}

@media (hover: none) {
    .pool-tray__attach {
        opacity: 1;
    }
}

/* Инлайн-панель «своя картинка» в полосе (БЕЗ диалога — полоса сама живёт внутри диалога создания). */
.pool-tray__attach-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 10px;
    border: 1px solid rgba(124, 108, 255, 0.35);
    background: rgba(124, 108, 255, 0.08);
    transition: border-color 0.18s ease, background 0.18s ease;
}

/* JS-хелпер вешает класс на dragover — «сюда можно бросить файл», как у зоны загрузки редактора. */
.pool-tray__attach-panel--over {
    border-style: dashed;
    border-color: #7c6cff;
    background: rgba(124, 108, 255, 0.2);
}

.pool-tray__attach-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.85rem;
    color: rgba(236, 236, 245, 0.85);
}

.pool-tray__attach-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: rgba(236, 236, 245, 0.6);
    cursor: pointer;
}

.pool-tray__attach-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.pool-tray__attach-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Кнопка-файл: сам <input type="file"> прячем, клик по label-кнопке открывает выбор. Стиль — общий
   .pool-btn--soft --compact, как у остальных кнопок диалога, чтобы блок не выбивался и влезал на мобилке. */
.pool-tray__attach-file input[type="file"] {
    display: none;
}

.pool-tray__attach-or {
    color: rgba(236, 236, 245, 0.5);
    font-size: 0.8rem;
}

.pool-tray__attach-url {
    flex: 1 1 200px;
    min-width: 0;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.25);
    color: #e6e4f2;
    font-size: 0.85rem;
}

.pool-tray__attach-preview {
    max-width: 100%;
    max-height: 160px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
}

.pool-tray__attach-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}