/* Credits + Charge matrix, method status, platform pill, expand controls, and recent activity row layout. */

.matrix-filter-bar,
.matrix-helper-copy,
.method-status,
#alert-values > .section-heading,
#alert-value-list:not(.matrix-live) .value-group {
    display: none !important;
}

#credits .support-view-heading {
    --support-heading-side-max: 560px;
    align-items: stretch;
}

#credits .credit-charge-header-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 10px;
    width: 100%;
    min-width: 0;
}

#credits .credit-charge-header-card {
    display: block;
    min-height: 96px;
    padding: 13px 14px;
    border: 1px solid rgba(129, 255, 195, 0.28);
    border-radius: 14px;
    background:
        radial-gradient(circle at 8% 0%, rgba(129, 255, 195, 0.08), transparent 34%),
        linear-gradient(135deg, rgba(129, 255, 195, 0.060), rgba(8, 24, 45, 0.64));
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.38;
    box-shadow: inset 3px 0 0 rgba(129, 255, 195, 0.28), inset 0 1px 0 rgba(234, 247, 255, 0.04);
}

#credits .credit-charge-header-card.charge {
    border-color: rgba(126, 223, 255, 0.28);
    background:
        radial-gradient(circle at 8% 0%, rgba(126, 223, 255, 0.08), transparent 34%),
        linear-gradient(135deg, rgba(126, 223, 255, 0.055), rgba(8, 24, 45, 0.64));
    box-shadow: inset 3px 0 0 rgba(126, 223, 255, 0.28), inset 0 1px 0 rgba(234, 247, 255, 0.04);
}

#credits .credit-charge-header-card b {
    display: block;
    margin-bottom: 5px;
    color: rgba(129, 255, 195, 0.90);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.13em;
    line-height: 1.15;
    text-transform: uppercase;
}

#credits .credit-charge-header-card.charge b {
    color: rgba(126, 223, 255, 0.90);
}

#credits .credit-charge-header-card strong {
    display: block;
    margin-bottom: 5px;
    color: var(--text);
    font-size: 13px;
    font-weight: 950;
    line-height: 1.18;
}

#credits .credit-inline-command {
    display: inline-flex;
    align-items: center;
    width: auto;
    max-width: max-content;
    margin: 0 3px;
    padding: 2px 6px;
    border: 1px solid rgba(126, 223, 255, 0.24);
    border-radius: 999px;
    background: rgba(126, 223, 255, 0.07);
    color: var(--accent);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 10px;
    font-weight: 950;
    line-height: 1.1;
    white-space: nowrap;
    vertical-align: baseline;
}

#credits .two-column {
    align-items: start;
}

#credits .two-column > aside.panel {
    align-self: start;
    position: sticky;
    top: 148px;
}

.expand-control-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
}

#alert-values > .expand-control-row {
    margin: -2px 0 10px;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(126, 223, 255, .08);
}

.expand-control-row .mini-button {
    min-width: 94px;
    padding: 6px 10px;
    font-size: 11px;
    color: var(--muted);
}

.expand-control-row .mini-button:hover {
    color: var(--text);
    border-color: var(--border-hot);
}

.value-group {
    position: relative;
}

.matrix-filter-button {
    border: 1px solid rgba(93, 210, 255, .2);
    border-radius: 999px;
    background: rgba(5, 15, 31, .82);
    color: var(--muted);
    padding: 7px 11px;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    transition: border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease;
}

.matrix-filter-button:hover {
    color: var(--text);
    border-color: rgba(126, 223, 255, .55);
    transform: translateY(-1px);
}

.matrix-filter-button.active {
    color: var(--accent);
    border-color: rgba(126, 223, 255, .72);
    background: rgba(126, 223, 255, .12);
    box-shadow: 0 0 18px rgba(45, 184, 255, .12);
}

.value-row {
    min-width: 0;
}

.value-name,
.value-row span {
    overflow-wrap: anywhere;
}

.alert-value-list.matrix-enhanced .value-group[hidden] {
    display: none !important;
}

.alert-value-list.matrix-enhanced .value-group {
    --matrix-platform-color: var(--accent);
    --matrix-platform-soft: rgba(126, 223, 255, .12);
    border-color: color-mix(in srgb, var(--matrix-platform-color), transparent 56%);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--matrix-platform-color), transparent 92%), transparent 38%),
        rgba(5, 15, 31, .68);
}

.alert-value-list.matrix-enhanced .value-group[data-platform="twitch"] { --matrix-platform-color: var(--twitch); }
.alert-value-list.matrix-enhanced .value-group[data-platform="youtube"] { --matrix-platform-color: var(--youtube); }
.alert-value-list.matrix-enhanced .value-group[data-platform="kick"] { --matrix-platform-color: var(--kick); }
.alert-value-list.matrix-enhanced .value-group[data-platform="rumble"] { --matrix-platform-color: var(--rumble); }
.alert-value-list.matrix-enhanced .value-group[data-platform="facebook"] { --matrix-platform-color: var(--facebook); }
.alert-value-list.matrix-enhanced .value-group[data-platform="instagram"] { --matrix-platform-color: var(--instagram); }
.alert-value-list.matrix-enhanced .value-group[data-platform="streamlabs"],
.alert-value-list.matrix-enhanced .value-group[data-platform="tip"] { --matrix-platform-color: var(--streamlabs); }
.alert-value-list.matrix-enhanced .value-group[data-platform="patreon"] { --matrix-platform-color: var(--patreon); }
.alert-value-list.matrix-enhanced .value-group[data-platform="tiktok"] { --matrix-platform-color: #25f4ee; }
.alert-value-list.matrix-enhanced .value-group[data-platform="x"] { --matrix-platform-color: rgba(235, 242, 250, .92); }
.alert-value-list.matrix-enhanced .value-group[data-platform="bunker"] { --matrix-platform-color: var(--accent); }

.alert-value-list.matrix-enhanced .value-group summary {
    min-height: 48px;
    box-shadow: inset 4px 0 0 color-mix(in srgb, var(--matrix-platform-color), transparent 18%);
}

.alert-value-list.matrix-enhanced .value-group[open] summary,
.alert-value-list.matrix-enhanced .value-group summary:hover {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--matrix-platform-color), transparent 86%), transparent 50%),
        rgba(126, 223, 255, .04);
}

.alert-value-list.matrix-enhanced .value-group-body {
    gap: 7px;
    padding: 0 12px 12px;
}

.alert-value-list.matrix-enhanced .value-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(74px, 92px);
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 8px 10px;
    color: var(--text);
    text-decoration: none;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--matrix-platform-color), transparent 95%), transparent 45%),
        rgba(8, 24, 45, .58);
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease, opacity .16s ease;
}

.alert-value-list.matrix-enhanced .value-row.is-interactive {
    cursor: pointer;
}

.alert-value-list.matrix-enhanced .value-row.is-interactive:hover,
.alert-value-list.matrix-enhanced .value-row.is-interactive:focus-visible {
    border-color: color-mix(in srgb, var(--matrix-platform-color), white 20%);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--matrix-platform-color), transparent 86%), transparent 56%),
        rgba(18, 51, 84, .78);
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--matrix-platform-color), transparent 10%), 0 0 18px color-mix(in srgb, var(--matrix-platform-color), transparent 84%);
    transform: translateY(-1px);
    outline: none;
}

.alert-value-list.matrix-enhanced .value-row.credit-matrix-row-highlight {
    border-color: color-mix(in srgb, var(--matrix-platform-color), white 18%);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--matrix-platform-color), transparent 78%), transparent 62%),
        rgba(18, 51, 84, .82);
    box-shadow: inset 4px 0 0 color-mix(in srgb, var(--matrix-platform-color), transparent 6%), 0 0 24px color-mix(in srgb, var(--matrix-platform-color), transparent 78%);
    animation: creditMatrixRowHighlight 2400ms ease-out;
}

@keyframes creditMatrixRowHighlight {
    0% {
        filter: brightness(1.24);
        transform: translateY(-1px);
    }

    55% {
        filter: brightness(1.10);
    }

    100% {
        filter: brightness(1);
        transform: translateY(0);
    }
}

.alert-value-list.matrix-enhanced .value-row.is-complete {
    border-color: rgba(129, 255, 195, .32);
    background:
        linear-gradient(90deg, rgba(129, 255, 195, .12), transparent 54%),
        rgba(8, 28, 38, .62);
    box-shadow: inset 3px 0 0 rgba(129, 255, 195, .72);
}

.alert-value-list.matrix-enhanced .value-row.coming-soon {
    opacity: .56;
    filter: grayscale(.35);
}

.alert-value-list.matrix-enhanced .value-row > div:nth-child(2),
.alert-value-list.matrix-enhanced .value-row > div:nth-child(3) {
    border-left: 1px solid rgba(126, 223, 255, .11);
    padding-left: 12px;
    min-height: 32px;
    display: grid;
    align-content: center;
}

.alert-value-list.matrix-enhanced .value-row > div:nth-child(2) .value-credit,
.alert-value-list.matrix-enhanced .credit-note {
    color: var(--success);
}

.alert-value-list.matrix-enhanced .value-row > div:nth-child(3) .value-credit,
.alert-value-list.matrix-enhanced .charge-note {
    color: var(--accent);
}

.alert-value-list.matrix-enhanced .value-row > div.value-no-charge .value-credit,
.alert-value-list.matrix-enhanced .value-no-charge .value-charge-cell > span:first-child {
    color: var(--muted);
}

.alert-value-list.matrix-enhanced .value-row > div.value-coming-soon .value-credit,
.alert-value-list.matrix-enhanced .value-coming-soon .value-charge-cell > span:first-child {
    color: var(--warning);
    opacity: .86;
}

.alert-value-list.matrix-enhanced .value-name {
    font-size: 13px;
    line-height: 1.15;
}

.alert-value-list.matrix-enhanced .value-name-text {
    color: var(--text);
}

.alert-value-list.matrix-enhanced .value-name-row,
.alert-value-list.matrix-enhanced .value-charge-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.alert-value-list.matrix-enhanced .value-pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(126, 223, 255, 0.24);
    border-radius: 999px;
    background: rgba(126, 223, 255, 0.075);
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.03em;
    padding: 5px 7px;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
}

.alert-value-list.matrix-enhanced .value-pill.live-only {
    color: #ff9a9a;
    border-color: rgba(255, 120, 120, 0.34);
    background: rgba(255, 80, 80, 0.075);
}

.alert-value-list.matrix-enhanced .value-pill.live-alert {
    color: var(--accent);
    border-color: rgba(126, 223, 255, 0.36);
    background: rgba(126, 223, 255, 0.075);
}

.alert-value-list.matrix-enhanced .value-charge-cell > span:first-child {
    color: var(--accent);
}

.value-detail-note {
    display: block;
    font-size: 9.5px;
    line-height: 1.12;
    margin-top: 2px;
    font-weight: 950;
}

.value-row-status {
    justify-self: end;
    max-width: 92px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .05em;
    line-height: 1.08;
    text-align: right;
    text-transform: uppercase;
    white-space: normal;
}

.value-row-status.ready {
    color: color-mix(in srgb, var(--matrix-platform-color), white 28%);
}

.value-row-status.complete {
    color: var(--success);
}

.value-row-status.soon {
    color: var(--warning);
}

.coming-soon-pill {
    display: inline-flex;
    margin-left: 7px;
    padding: 3px 6px;
    border-radius: 999px;
    border: 1px solid rgba(255, 211, 126, .32);
    color: var(--warning);
    background: rgba(255, 211, 126, .06);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    vertical-align: middle;
}

.platform-pill.bunker {
    border-color: rgba(126, 223, 255, .42);
    color: var(--accent);
    background: rgba(126, 223, 255, .1);
}

.platform-pill.bunker img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 5px rgba(126, 223, 255, .36));
}

.alert-value-list.matrix-enhanced .value-group summary {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--matrix-platform-color), transparent 93%), transparent 48%),
        rgba(5, 15, 31, .28);
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.alert-value-list.matrix-enhanced .value-group summary::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 58px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--matrix-platform-color), white 16%), transparent);
    opacity: .46;
    pointer-events: none;
}

.alert-value-list.matrix-enhanced .value-group summary::after {
    display: inline-grid;
    place-items: center;
    width: 23px;
    height: 23px;
    border: 1px solid color-mix(in srgb, var(--matrix-platform-color), transparent 58%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--matrix-platform-color), transparent 91%);
    color: color-mix(in srgb, var(--matrix-platform-color), white 22%);
    line-height: 1;
    box-shadow: inset 0 0 10px color-mix(in srgb, var(--matrix-platform-color), transparent 92%);
}

.alert-value-list.matrix-enhanced .value-group[open] summary,
.alert-value-list.matrix-enhanced .value-group summary:hover {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--matrix-platform-color), transparent 86%), transparent 54%),
        linear-gradient(180deg, rgba(234, 247, 255, .028), transparent 56%),
        rgba(8, 24, 45, .50);
    box-shadow:
        inset 4px 0 0 color-mix(in srgb, var(--matrix-platform-color), transparent 14%),
        0 0 18px color-mix(in srgb, var(--matrix-platform-color), transparent 88%);
}

.alert-value-list.matrix-enhanced .value-group[open] summary::before,
.alert-value-list.matrix-enhanced .value-group summary:hover::before {
    opacity: .72;
}

.alert-value-list.matrix-enhanced .value-group summary .platform-pill {
    border-color: color-mix(in srgb, var(--matrix-platform-color), transparent 46%);
    background:
        radial-gradient(circle at 24% 24%, color-mix(in srgb, var(--matrix-platform-color), transparent 76%), transparent 62%),
        color-mix(in srgb, var(--matrix-platform-color), transparent 90%);
    color: color-mix(in srgb, var(--matrix-platform-color), white 22%);
    box-shadow: 0 0 12px color-mix(in srgb, var(--matrix-platform-color), transparent 86%), inset 0 0 10px color-mix(in srgb, var(--matrix-platform-color), transparent 94%);
}

.alert-value-list.matrix-enhanced .value-group summary .platform-pill img {
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--matrix-platform-color), transparent 54%));
}

.alert-value-list.matrix-enhanced .value-group[data-platform="x"] summary .platform-pill {
    border-color: rgba(235, 242, 250, .46);
    background:
        radial-gradient(circle at 24% 24%, rgba(235, 242, 250, .18), transparent 62%),
        rgba(235, 242, 250, .075);
    color: rgba(244, 248, 252, .88);
    box-shadow: 0 0 12px rgba(235, 242, 250, .12), inset 0 0 10px rgba(235, 242, 250, .045);
}

.alert-value-list.matrix-enhanced .value-group[data-platform="bunker"] summary .platform-pill {
    border-color: rgba(126, 223, 255, .50);
    color: var(--accent);
}

@media (max-width: 1000px) {
    #credits .support-view-heading {
        display: grid;
        align-items: start;
    }

    #credits .credit-charge-header-grid {
        width: 100%;
        min-width: 0;
    }

    #credits .two-column > aside.panel {
        position: static;
    }

    .alert-value-list.matrix-enhanced .value-row,
    .value-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(74px, 92px);
    }

    .value-action {
        grid-column: 1 / -1;
        justify-self: start;
        text-align: left;
    }
}

@media (max-width: 760px) {
    #credits .support-view-heading {
        gap: 10px;
    }

    #credits .credit-charge-header-grid {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    #credits .credit-charge-header-card {
        min-height: 0;
        padding: 10px;
        border-radius: 12px;
        font-size: 11px;
        line-height: 1.32;
    }

    #credits .credit-charge-header-card b {
        margin-bottom: 4px;
        font-size: 9.5px;
        letter-spacing: 0.11em;
    }

    #credits .credit-charge-header-card strong {
        margin-bottom: 4px;
        font-size: 12px;
        line-height: 1.12;
    }

    #credits .credit-inline-command {
        padding: 1px 5px;
        font-size: 9px;
    }

    #alert-values > .expand-control-row {
        margin: -4px 0 8px;
        padding-bottom: 0;
    }

    .expand-control-row {
        gap: 6px;
        margin-bottom: 8px;
    }

    .expand-control-row .mini-button {
        min-width: 78px;
        min-height: 30px;
        padding: 5px 8px;
        font-size: 9.5px;
    }

    details.value-group summary {
        grid-template-columns: minmax(0, 1fr) auto 24px !important;
        gap: 7px;
        min-height: 46px;
        padding: 9px 10px;
        border-radius: 12px;
    }

    details.value-group summary > span:nth-child(2) {
        display: inline-flex;
        justify-self: end;
        color: rgba(234, 247, 255, 0.74);
        font-size: 10px;
        font-weight: 950;
        letter-spacing: 0.02em;
        line-height: 1;
        white-space: nowrap;
    }

    .alert-value-list.matrix-enhanced .value-group summary::before {
        left: 14px;
        right: 44px;
    }

    .alert-value-list.matrix-enhanced .value-group summary::after {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }

    .alert-value-list.matrix-enhanced .value-group summary .platform-pill {
        min-height: 28px;
        padding: 5px 8px;
        font-size: 10px;
    }

    .alert-value-list.matrix-enhanced .value-group-body {
        gap: 6px;
        padding: 0 8px 9px;
    }

    .alert-value-list.matrix-enhanced .value-row,
    .value-row {
        grid-template-columns: minmax(82px, 0.88fr) minmax(0, 1.05fr) minmax(0, 0.98fr) !important;
        align-items: center;
        column-gap: 7px;
        row-gap: 3px;
        min-height: 0;
        padding: 9px 8px;
        border-radius: 11px;
    }

    .alert-value-list.matrix-enhanced .value-row > div:first-child {
        grid-column: 1;
        min-width: 0;
    }

    .alert-value-list.matrix-enhanced .value-row > div:nth-child(2) {
        grid-column: 2;
    }

    .alert-value-list.matrix-enhanced .value-row > div:nth-child(3) {
        grid-column: 3;
    }

    .alert-value-list.matrix-enhanced .value-row > div:nth-child(2),
    .alert-value-list.matrix-enhanced .value-row > div:nth-child(3) {
        min-height: 0;
        border-left: 0;
        padding-left: 0;
    }

    .alert-value-list.matrix-enhanced .value-name {
        font-size: 11.5px;
        line-height: 1.1;
    }

    .alert-value-list.matrix-enhanced .value-name-row {
        display: grid;
        align-items: start;
        justify-items: start;
        gap: 4px;
    }

    .alert-value-list.matrix-enhanced .value-charge-cell {
        display: grid;
        align-items: start;
        justify-items: start;
        gap: 4px;
    }

    .alert-value-list.matrix-enhanced .value-row > div:nth-child(2) .value-credit {
        font-size: clamp(13px, 3.7vw, 16px);
        line-height: 1.06;
        letter-spacing: -0.015em;
    }

    .alert-value-list.matrix-enhanced .value-row > div:nth-child(3) .value-credit,
    .alert-value-list.matrix-enhanced .value-charge-cell > span:first-child {
        font-size: clamp(10px, 3.1vw, 12.5px);
        line-height: 1.12;
        letter-spacing: -0.01em;
    }

    .alert-value-list.matrix-enhanced .value-pill,
    .coming-soon-pill {
        width: max-content;
        max-width: 100%;
        padding: 3px 5px;
        font-size: 8px;
        letter-spacing: 0.015em;
        line-height: 1;
    }

    .alert-value-list.matrix-enhanced .value-pill.live-only,
    .alert-value-list.matrix-enhanced .value-pill.live-alert {
        margin-top: 0;
    }

    .value-detail-note {
        font-size: 8.5px;
        line-height: 1.08;
        margin-top: 1px;
    }

    .value-row-status.ready,
    .value-row-status.soon {
        display: none;
    }

    .value-row-status.complete {
        grid-column: 1;
        justify-self: start;
        max-width: none;
        margin-top: 0;
        font-size: 8px;
        letter-spacing: 0.04em;
        line-height: 1;
        text-align: left;
    }

    .value-action {
        justify-content: start;
    }
}