.slack-dispatch {
    --slack-purple: #8d5cff;
    --slack-deep: #3f0e40;
    --slack-green: #2eb67d;
    --slack-blue: #36c5f0;
    --slack-amber: #ecb22e;
    --slack-red: #e01e5a;
    --slack-ink: #f7f4fb;
    --slack-muted: #afa7ba;
    position: relative;
    overflow: hidden;
    padding: clamp(4.5rem, 8vw, 7rem) 1.25rem;
    color: var(--slack-ink);
    background:
        radial-gradient(circle at 12% 10%, rgba(141, 92, 255, .15), transparent 30rem),
        radial-gradient(circle at 88% 65%, rgba(46, 182, 125, .09), transparent 28rem),
        #08070a;
}

.slack-dispatch::before {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
    background-size: 44px 44px;
    content: "";
    pointer-events: none;
    mask-image: linear-gradient(to bottom, black, transparent 82%);
}

.slack-dispatch__container {
    position: relative;
    z-index: 1;
    width: min(1180px, 100%);
    margin-inline: auto;
}

.slack-dispatch__heading {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(260px, .85fr);
    gap: clamp(1.5rem, 4vw, 4.5rem);
    align-items: end;
    margin-bottom: 2.25rem;
}

.slack-dispatch__kicker {
    margin: 0 0 .8rem;
    color: #c9afff;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.slack-dispatch__heading h2,
.slack-dispatch__first-lot h3 {
    margin: 0;
    color: var(--slack-ink);
    font-weight: 650;
    letter-spacing: -.035em;
}

.slack-dispatch__heading h2 {
    max-width: 770px;
    font-size: clamp(2rem, 4vw, 3.65rem);
    line-height: 1.02;
}

.slack-dispatch__heading > p {
    max-width: 470px;
    margin: 0 0 .2rem;
    color: var(--slack-muted);
    font-size: .98rem;
    line-height: 1.7;
}

.slack-dispatch__console {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 1.35rem;
    background: #111014;
    box-shadow: 0 34px 100px rgba(0, 0, 0, .42), 0 0 0 1px rgba(141, 92, 255, .05) inset;
}

.slack-dispatch__topbar {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 1.25rem;
    align-items: center;
    min-height: 76px;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    background: linear-gradient(90deg, rgba(63, 14, 64, .88), rgba(25, 17, 30, .92));
}

.slack-dispatch__brand,
.slack-dispatch__brand > div,
.slack-dispatch__scope div,
.slack-dispatch__message,
.slack-dispatch__byline,
.slack-dispatch__verdict,
.slack-dispatch__receipt li,
.slack-dispatch__panel-title,
.slack-dispatch__app-health {
    display: flex;
}

.slack-dispatch__brand {
    gap: .8rem;
    align-items: center;
    min-width: 0;
}

.slack-dispatch__brand > div,
.slack-dispatch__scope div,
.slack-dispatch__panel-title,
.slack-dispatch__app-health {
    flex-direction: column;
}

.slack-dispatch__brand small,
.slack-dispatch__scope dt,
.slack-dispatch__panel-title span,
.slack-dispatch__verdict small,
.slack-dispatch__truth small {
    color: #bcb1c5;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.slack-dispatch__brand strong {
    overflow: hidden;
    color: #fff;
    font-size: .94rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.slack-dispatch__mark {
    position: relative;
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: repeat(2, 11px);
    gap: 3px;
    width: 30px;
    height: 30px;
    padding: 2px;
    transform: rotate(-4deg);
}

.slack-dispatch__mark i {
    display: block;
    border-radius: 999px;
}

.slack-dispatch__mark i:nth-child(1) { background: var(--slack-blue); }
.slack-dispatch__mark i:nth-child(2) { background: var(--slack-green); }
.slack-dispatch__mark i:nth-child(3) { background: var(--slack-red); }
.slack-dispatch__mark i:nth-child(4) { background: var(--slack-amber); }

.slack-dispatch__scope {
    display: flex;
    gap: 1.75rem;
    margin: 0;
}

.slack-dispatch__scope div {
    gap: .1rem;
}

.slack-dispatch__scope dd {
    margin: 0;
    color: #f0eaf5;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .72rem;
}

.slack-dispatch__ack {
    display: inline-flex;
    gap: .45rem;
    align-items: center;
    justify-self: end;
    padding: .5rem .72rem;
    border: 1px solid rgba(46, 182, 125, .35);
    border-radius: 999px;
    color: #bff6df;
    background: rgba(46, 182, 125, .1);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
}

.slack-dispatch__ack i,
.slack-dispatch__app-health strong i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--slack-green);
    box-shadow: 0 0 14px rgba(46, 182, 125, .8);
}

.slack-dispatch__workspace {
    display: grid;
    grid-template-columns: minmax(170px, .68fr) minmax(370px, 1.55fr) minmax(280px, 1fr);
    min-height: 515px;
}

.slack-dispatch__channels {
    padding: 1.25rem .9rem;
    border-right: 1px solid rgba(255, 255, 255, .09);
    background: linear-gradient(180deg, #2f1334, #251128);
}

.slack-dispatch__channels > p {
    display: flex;
    justify-content: space-between;
    margin: 0 .55rem .85rem;
    color: #cbbfd0;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.slack-dispatch__channels > p small {
    display: grid;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    place-items: center;
    color: #fff;
    background: rgba(255, 255, 255, .1);
}

.slack-dispatch__channels > a {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    gap: .55rem;
    align-items: center;
    margin-bottom: .25rem;
    padding: .65rem .55rem;
    border-radius: .55rem;
    color: #d8cedb;
    font-size: .77rem;
    text-decoration: none;
}

.slack-dispatch__channels > a:first-of-type {
    color: #fff;
    background: rgba(141, 92, 255, .32);
}

.slack-dispatch__channels > a i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.slack-dispatch__channels > a i.is-green { background: var(--slack-green); }
.slack-dispatch__channels > a i.is-amber { background: var(--slack-amber); }
.slack-dispatch__channels > a i.is-blue { background: var(--slack-blue); }
.slack-dispatch__channels > a i.is-purple { background: var(--slack-purple); }

.slack-dispatch__channels > a strong {
    overflow: hidden;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.slack-dispatch__channels > a small {
    display: grid;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    place-items: center;
    color: #fff;
    background: var(--slack-red);
    font-size: .6rem;
    font-weight: 800;
}

.slack-dispatch__app-health {
    gap: .35rem;
    margin-top: 2rem;
    padding: .9rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: .75rem;
    background: rgba(0, 0, 0, .16);
}

.slack-dispatch__app-health > span,
.slack-dispatch__app-health > small {
    color: #a999af;
    font-size: .62rem;
}

.slack-dispatch__app-health strong {
    display: flex;
    gap: .4rem;
    align-items: center;
    color: #e7f9f0;
    font-size: .72rem;
}

.slack-dispatch__thread {
    min-width: 0;
    padding: 1.25rem;
    background: #161419;
}

.slack-dispatch__thread-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.slack-dispatch__thread-head small {
    color: #a99eb1;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.slack-dispatch__thread-head h3 {
    margin: .15rem 0 0;
    color: #fff;
    font-size: .95rem;
}

.slack-dispatch__thread-head h3 span,
.slack-dispatch__thread-head > span {
    color: #8f8796;
    font-size: .65rem;
    font-weight: 500;
}

.slack-dispatch__message {
    gap: .8rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .075);
}

.slack-dispatch__message:last-child {
    border-bottom: 0;
}

.slack-dispatch__avatar {
    display: grid;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: .65rem;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--slack-purple), var(--slack-deep));
    font-size: .72rem;
    font-weight: 900;
}

.slack-dispatch__avatar.is-user {
    color: #17121a;
    background: linear-gradient(135deg, #f8c47d, #ef6f9a);
}

.slack-dispatch__message > div {
    min-width: 0;
    flex: 1;
}

.slack-dispatch__byline {
    gap: .45rem;
    align-items: center;
    margin: 0 0 .35rem;
}

.slack-dispatch__byline strong {
    color: #fff;
    font-size: .78rem;
}

.slack-dispatch__byline span {
    padding: .16rem .28rem;
    border-radius: .22rem;
    color: #ddd1e3;
    background: rgba(255, 255, 255, .1);
    font-size: .48rem;
    font-weight: 800;
}

.slack-dispatch__byline time {
    color: #77717c;
    font-size: .6rem;
}

.slack-dispatch__message p:not(.slack-dispatch__byline) {
    margin: 0;
    color: #d5cfd8;
    font-size: .74rem;
    line-height: 1.55;
}

.slack-dispatch__message p strong {
    color: #fff;
}

.slack-dispatch__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
    margin: .75rem 0;
}

.slack-dispatch__facts div {
    padding: .55rem .65rem;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: .5rem;
    background: rgba(255, 255, 255, .025);
}

.slack-dispatch__facts dt {
    color: #7f7785;
    font-size: .54rem;
    text-transform: uppercase;
}

.slack-dispatch__facts dd {
    margin: .12rem 0 0;
    color: #e5dfe8;
    font-size: .66rem;
}

.slack-dispatch__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.slack-dispatch__actions span {
    padding: .45rem .6rem;
    border: 1px solid rgba(141, 92, 255, .38);
    border-radius: .35rem;
    color: #d8c8fb;
    background: rgba(141, 92, 255, .08);
    font-size: .62rem;
    font-weight: 750;
}

.slack-dispatch__actions span:first-child {
    color: #0b2118;
    border-color: var(--slack-green);
    background: var(--slack-green);
}

.slack-dispatch__message.is-verdict {
    margin-top: .45rem;
    padding-inline: .7rem;
    border: 1px solid rgba(46, 182, 125, .18);
    border-radius: .75rem;
    background: rgba(46, 182, 125, .055);
}

.slack-dispatch__message code {
    display: block;
    overflow-wrap: anywhere;
    margin-top: .45rem;
    color: #92dcbc;
    font-size: .58rem;
}

.slack-dispatch__receipt {
    min-width: 0;
    padding: 1.25rem;
    border-left: 1px solid rgba(255, 255, 255, .09);
    background: #0e0d10;
}

.slack-dispatch__panel-title {
    gap: .22rem;
    margin-bottom: 1rem;
}

.slack-dispatch__panel-title h3 {
    margin: 0;
    color: #fff;
    font-size: 1rem;
}

.slack-dispatch__verdict {
    gap: .8rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: .85rem;
    border: 1px solid rgba(46, 182, 125, .28);
    border-radius: .75rem;
    background: linear-gradient(135deg, rgba(46, 182, 125, .13), rgba(46, 182, 125, .03));
}

.slack-dispatch__verdict > span {
    display: grid;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    place-items: center;
    color: #061810;
    background: var(--slack-green);
    font-size: 1rem;
    font-weight: 900;
}

.slack-dispatch__verdict > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.slack-dispatch__verdict strong {
    color: #c3f5dd;
    font-size: .9rem;
    letter-spacing: .06em;
}

.slack-dispatch__verdict code {
    color: #7fbb9e;
    font-size: .57rem;
}

.slack-dispatch__receipt ol {
    display: grid;
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.slack-dispatch__receipt li {
    gap: .6rem;
    align-items: center;
    padding: .6rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .065);
}

.slack-dispatch__receipt li > span {
    display: grid;
    flex: 0 0 auto;
    width: 25px;
    height: 25px;
    border-radius: .4rem;
    place-items: center;
    color: #ac8eef;
    background: rgba(141, 92, 255, .1);
    font-size: .53rem;
    font-weight: 850;
}

.slack-dispatch__receipt li div {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
}

.slack-dispatch__receipt li strong {
    color: #e8e2ea;
    font-size: .68rem;
}

.slack-dispatch__receipt li small {
    overflow: hidden;
    color: #817a86;
    font-size: .57rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.slack-dispatch__receipt li b {
    color: #72d4a7;
    font-size: .51rem;
    letter-spacing: .06em;
}

.slack-dispatch__truth {
    display: flex;
    flex-direction: column;
    gap: .18rem;
    margin-top: 1rem;
    padding: .85rem;
    border-left: 2px solid var(--slack-amber);
    background: rgba(236, 178, 46, .05);
}

.slack-dispatch__truth strong {
    color: #f3dc9c;
    font-size: .78rem;
}

.slack-dispatch__truth span {
    color: #9b8f75;
    font-size: .6rem;
    line-height: 1.45;
}

.slack-dispatch__rail {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, .09);
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    background: #0c0b0e;
    list-style: none;
}

.slack-dispatch__rail li {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .15rem;
    padding: .9rem 1rem;
    border-right: 1px solid rgba(255, 255, 255, .07);
}

.slack-dispatch__rail li:last-child { border-right: 0; }
.slack-dispatch__rail span { color: #ae8cf5; font: 700 .55rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.slack-dispatch__rail strong { color: #dfd9e2; font-size: .66rem; }
.slack-dispatch__rail small { overflow: hidden; color: #77717c; font-size: .56rem; text-overflow: ellipsis; white-space: nowrap; }

.slack-dispatch__rejects {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
    padding: 1rem;
    background: #111014;
}

.slack-dispatch__rejects article {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .15rem;
    padding: .8rem;
    border: 1px solid rgba(224, 30, 90, .14);
    border-radius: .7rem;
    background: rgba(224, 30, 90, .035);
}

.slack-dispatch__rejects span { color: #e8779b; font-size: .54rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.slack-dispatch__rejects strong { color: #eee8f0; font-size: .72rem; }
.slack-dispatch__rejects small { color: #827b86; font-size: .59rem; line-height: 1.4; }

.slack-dispatch__first-lot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: center;
    margin-top: 1.25rem;
    padding: clamp(1.4rem, 3vw, 2.2rem);
    border: 1px solid rgba(141, 92, 255, .22);
    border-radius: 1.1rem;
    background: linear-gradient(120deg, rgba(63, 14, 64, .72), rgba(17, 15, 20, .92) 68%);
}

.slack-dispatch__first-lot h3 {
    max-width: 720px;
    font-size: clamp(1.35rem, 2.5vw, 2rem);
    line-height: 1.12;
}

.slack-dispatch__first-lot p:last-child {
    max-width: 780px;
    margin: .7rem 0 0;
    color: var(--slack-muted);
    font-size: .87rem;
    line-height: 1.65;
}

.slack-dispatch__cta {
    display: inline-flex;
    gap: .65rem;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    padding: .9rem 1.1rem;
    border: 0;
    border-radius: .55rem;
    color: #130b18;
    background: linear-gradient(135deg, #b693ff, #7f5be7);
    box-shadow: 0 12px 36px rgba(141, 92, 255, .24);
    font-size: .78rem;
    font-weight: 850;
    text-decoration: none;
}

.slack-dispatch__cta:hover,
.slack-dispatch__cta:focus-visible {
    color: #08040b;
    background: linear-gradient(135deg, #cebaff, #9e7fff);
    transform: translateY(-1px);
}

.slack-dispatch__boundaries {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem;
    margin-top: .75rem;
}

.slack-dispatch__boundaries a {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .15rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: .8rem;
    color: inherit;
    background: rgba(255, 255, 255, .022);
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.slack-dispatch__boundaries a:hover,
.slack-dispatch__boundaries a:focus-visible {
    border-color: rgba(141, 92, 255, .45);
    background: rgba(141, 92, 255, .07);
    transform: translateY(-2px);
}

.slack-dispatch__boundaries span { color: #9d8eaa; font-size: .58rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.slack-dispatch__boundaries strong { color: #eee8f2; font-size: .76rem; }
.slack-dispatch__boundaries small { color: #7f7883; font-size: .59rem; line-height: 1.4; }

@media (max-width: 1080px) {
    .slack-dispatch__workspace {
        grid-template-columns: 170px minmax(360px, 1.45fr) minmax(260px, 1fr);
    }

    .slack-dispatch__scope div:last-child {
        display: none;
    }

    .slack-dispatch__boundaries {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .slack-dispatch__heading {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .slack-dispatch__heading > p {
        max-width: 760px;
    }

    .slack-dispatch__topbar {
        grid-template-columns: 1fr auto;
    }

    .slack-dispatch__scope {
        display: none;
    }

    .slack-dispatch__workspace {
        grid-template-columns: 160px minmax(0, 1fr);
    }

    .slack-dispatch__receipt {
        grid-column: 1 / -1;
        border-top: 1px solid rgba(255, 255, 255, .09);
        border-left: 0;
    }

    .slack-dispatch__receipt ol {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: .65rem;
    }

    .slack-dispatch__receipt li {
        align-items: flex-start;
        flex-direction: column;
        border: 1px solid rgba(255, 255, 255, .065);
        border-radius: .6rem;
        padding: .65rem;
    }

    .slack-dispatch__receipt li small {
        white-space: normal;
    }

    .slack-dispatch__first-lot {
        grid-template-columns: 1fr;
    }

    .slack-dispatch__cta {
        justify-self: start;
    }
}

@media (max-width: 700px) {
    .slack-dispatch {
        padding: 4rem .9rem;
    }

    .slack-dispatch__heading h2 {
        font-size: clamp(1.8rem, 9vw, 2.6rem);
    }

    .slack-dispatch__topbar {
        min-height: 68px;
        padding: .9rem;
    }

    .slack-dispatch__workspace {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .slack-dispatch__channels {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .25rem;
        padding: .8rem;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .09);
    }

    .slack-dispatch__channels > p,
    .slack-dispatch__app-health {
        grid-column: 1 / -1;
    }

    .slack-dispatch__app-health {
        margin-top: .4rem;
    }

    .slack-dispatch__thread,
    .slack-dispatch__receipt {
        padding: 1rem;
    }

    .slack-dispatch__receipt ol {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .slack-dispatch__rail {
        grid-template-columns: 1fr;
    }

    .slack-dispatch__rail li {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr);
        gap: .1rem .65rem;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
    }

    .slack-dispatch__rail li:last-child {
        border-bottom: 0;
    }

    .slack-dispatch__rail span {
        grid-row: 1 / 3;
    }

    .slack-dispatch__rejects {
        grid-template-columns: 1fr;
    }

    .slack-dispatch__boundaries {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 430px) {
    .slack-dispatch {
        padding-inline: .65rem;
    }

    .slack-dispatch__topbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .slack-dispatch__ack {
        justify-self: start;
    }

    .slack-dispatch__channels {
        grid-template-columns: 1fr;
    }

    .slack-dispatch__channels > p,
    .slack-dispatch__app-health {
        grid-column: auto;
    }

    .slack-dispatch__thread-head {
        align-items: flex-start;
        flex-direction: column;
        gap: .3rem;
    }

    .slack-dispatch__facts,
    .slack-dispatch__receipt ol {
        grid-template-columns: 1fr;
    }

    .slack-dispatch__message {
        gap: .55rem;
    }

    .slack-dispatch__avatar {
        width: 31px;
        height: 31px;
        font-size: .62rem;
    }

    .slack-dispatch__first-lot {
        padding: 1.15rem;
    }

    .slack-dispatch__cta {
        width: 100%;
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .slack-dispatch__cta,
    .slack-dispatch__boundaries a {
        transition: none;
    }
}