/* ════════════════════════════════════════════════════════════════════════
   media.css — brush for the Media Library panel (zViews/zAccount/zCRM/
   zUI.Media.zolo). Opt in with zMeta.zBrush: [media]. Builds ON the canonical
   zc-* tokens from zC_Main.css and the same brand glow language as profile.css
   — one visual family across the CRM panels.
   ════════════════════════════════════════════════════════════════════════ */

.zc-media {
    position:      relative;
    width:         100%;
    margin:        0 0 2.5rem;
    padding:       2rem 2.25rem 2.5rem;
    background:    var(--zc-surface);
    border:        1px solid rgba(255, 255, 255, 0.10);
    border-radius: calc(var(--zc-radius) + 6px);
    box-shadow:    var(--zc-shadow-hover, 0 24px 56px rgba(0, 0, 0, 0.4));
    overflow:      hidden;
    isolation:     isolate;
}
.zc-media::before {
    content:        '';
    position:       absolute;
    inset:          -40% -10% auto -10%;
    height:         420px;
    z-index:        0;
    pointer-events: none;
    background:
        radial-gradient(50% 60% at 28% 25%, rgba(124, 58, 237, 0.22), transparent 68%),
        radial-gradient(45% 55% at 78% 10%, rgba(79, 70, 229, 0.14), transparent 70%);
}
.zc-media > * { position: relative; z-index: 1; }

/* ── Header — title block + upload action on one line ── */
.zc-media-header {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             1rem;
}
.zc-media-header h2 {
    margin:          0;
    font-size:       clamp(1.4rem, 2.6vw, 1.8rem);
    font-weight:     800;
    letter-spacing:  -0.02em;
    background:      var(--zc-text-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color:           transparent;
}
.zc-media-sub {
    margin:    0.35rem 0 0;
    color:     var(--text-gray);
    font-size: 0.9rem;
    max-width: 52ch;
}
/* Live file input — the _zClass lands on the <input type=file>; the pill look
   moves to the native file-selector button. */
input.zc-media-upload {
    max-width:  260px;
    color:      var(--text-gray);
    font-size:  0.8rem;
    background: transparent;
    border:     none;
}
input.zc-media-upload::file-selector-button {
    margin-right:  0.6rem;
    padding:       0.55rem 1.3rem;
    background:    rgba(124, 58, 237, 0.16);
    border:        1px solid rgba(196, 181, 253, 0.35);
    border-radius: 980px;
    color:         var(--text-light);
    font-size:     0.85rem;
    font-weight:   600;
    white-space:   nowrap;
    cursor:        pointer;
}
input.zc-media-upload::file-selector-button:hover {
    background: rgba(124, 58, 237, 0.28);
}

/* ── Stats strip — same recipe as the profile stats ── */
.zc-media-stats {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   0.75rem;
    margin-top:            1.5rem;
}
.zc-media-stat {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            0.15rem;
    padding:        0.85rem 0.5rem;
    background:     rgba(255, 255, 255, 0.035);
    border:         1px solid rgba(255, 255, 255, 0.07);
    border-radius:  14px;
}
.zc-media-stat-value {
    margin:      0;
    font-size:   1.3rem;
    font-weight: 800;
    color:       var(--text-light);
}
.zc-media-stat-label {
    margin:         0;
    color:          var(--text-gray);
    font-size:      0.68rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align:     center;
}

/* ── Gallery grid — one tile per media row ── */
.zc-media-gallery {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap:                   1rem;
    margin-top:            1.75rem;
}
.zc-media-tile {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
    padding:        0.75rem;
    background:     rgba(255, 255, 255, 0.03);
    border:         1px solid rgba(255, 255, 255, 0.08);
    border-radius:  14px;
    transition:     border-color 0.2s ease, transform 0.2s ease;
}
.zc-media-tile:hover {
    border-color: rgba(196, 181, 253, 0.4);
    transform:    translateY(-2px);
}
.zc-media-thumb img {
    display:       block;
    width:         100%;
    aspect-ratio:  1 / 1;
    object-fit:    cover;
    border-radius: 10px;
    background:    var(--primary-dark, #0A0E27);
}
.zc-media-tile-name {
    margin:        0;
    color:         var(--text-light);
    font-size:     0.8rem;
    font-weight:   600;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}
.zc-media-tile-metarow {
    display:     flex;
    align-items: center;
    gap:         0.55rem;
    flex-wrap:   wrap;
}
.zc-media-tile-meta {
    margin:         0;
    color:          var(--text-gray);
    font-size:      0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
/* kind badge — the avatar tile announces itself */
.zc-media-tile-kind {
    margin:         0;
    padding:        0.12rem 0.55rem;
    border-radius:  999px;
    font-size:      0.62rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background:     rgba(255, 255, 255, 0.06);
    border:         1px solid rgba(255, 255, 255, 0.12);
    color:          var(--text-gray);
}
.zc-media-kind-avatar {
    background:   rgba(124, 58, 237, 0.22);
    border-color: rgba(196, 181, 253, 0.45);
    color:        #c4b5fd;
}

/* ── Per-tile actions — Use-as-avatar (live confirm) + Delete (modal) ── */
.zc-media-tile-actions {
    display:     flex;
    gap:         0.5rem;
    align-items: center;
    margin-top:  auto;
}
.zc-media-use .zDialog-live { margin: 0; }
.zc-media-use button,
.zc-media-delete-btn {
    padding:       0.35rem 0.75rem;
    font-size:     0.72rem;
    border-radius: 8px;
}
.zc-media-delete-btn {
    background:   rgba(239, 68, 68, 0.10);
    border-color: rgba(248, 113, 113, 0.35);
    color:        #fca5a5;
}
.zc-media-delete-btn:hover { background: rgba(239, 68, 68, 0.22); }

@media (max-width: 640px) {
    .zc-media          { padding: 1.5rem 1.25rem 2rem; }
    .zc-media-header   { flex-direction: column; }
    .zc-media-stats    { grid-template-columns: repeat(3, 1fr); }
    .zc-media-gallery  { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}