/* ChatBase — Avatar maker (avatars.js) */

.av-modal { display: grid; place-items: center; }
.av-box {
    position: relative;
    width: min(540px, 94vw);
    max-height: 90vh;
    overflow: auto;
    padding: 22px;
    border-radius: 20px;
    background: #141829;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
    color: #e8ebff;
}
.av-x {
    position: absolute; top: 12px; right: 12px;
    width: 32px; height: 32px;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #e8ebff; font-size: 15px; cursor: pointer;
}
.av-box h2 { margin: 0 0 4px; font-size: 21px; }
.av-sub { margin: 0 0 14px; font-size: 13px; opacity: .7; }

.av-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.av-tab {
    flex: 1;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    color: #e8ebff; font: inherit; font-size: 13.5px; font-weight: 700;
    cursor: pointer;
}
.av-tab.on { background: var(--gradient-purple, linear-gradient(135deg, #5b8cff, #c14bff)); border-color: transparent; }

.av-styles { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.av-chip {
    padding: 5px 11px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    color: #e8ebff; font: inherit; font-size: 12px; cursor: pointer;
}
.av-chip.on { background: rgba(193, 75, 255, .28); border-color: rgba(193, 75, 255, .6); font-weight: 700; }

.av-seedrow { display: flex; gap: 8px; margin-bottom: 12px; }
.av-seed {
    flex: 1; min-width: 0;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    background: rgba(0, 0, 0, .25);
    color: #e8ebff; font: inherit; font-size: 13.5px;
}
.av-dice {
    width: 42px; border: 0; border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    color: #e8ebff; font-size: 16px; cursor: pointer;
}

.av-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
    margin-bottom: 14px;
}
.av-cell {
    padding: 0; border: 2px solid transparent; border-radius: 14px;
    background: rgba(255, 255, 255, .05);
    cursor: pointer; overflow: hidden; aspect-ratio: 1;
}
.av-cell img { width: 100%; height: 100%; display: block; object-fit: cover; }
.av-cell:hover { background: rgba(255, 255, 255, .1); }
.av-cell.on { border-color: #c14bff; box-shadow: 0 0 0 3px rgba(193, 75, 255, .25); }

.av-foot { display: flex; gap: 9px; }
.av-shuffle {
    padding: 11px 15px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 11px;
    background: rgba(255, 255, 255, .05); color: #e8ebff; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.av-save {
    flex: 1; padding: 11px 15px; border: 0; border-radius: 11px;
    background: var(--gradient-purple, linear-gradient(135deg, #5b8cff, #c14bff));
    color: #fff; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
}
.av-save[disabled] { opacity: .45; cursor: default; }

@media (max-width: 520px) {
    .av-grid { grid-template-columns: repeat(3, 1fr); }
    .av-box { padding: 18px 14px; }
}