.dash .inbox {
    --inbox-head-h: 56px;
    --inbox-gap: 0px;
    --inbox-rail-w: var(--dash-rail-w);
    height: 100%;
    display: grid;
    grid-template-columns: var(--inbox-rail-w) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
}

.dash .inbox--solo {
    grid-template-columns: minmax(0, 1fr);
}

.dash .inbox-rail {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--dash-side);
    box-shadow: inset -1px 0 0 var(--dash-separator);
    overflow: hidden;
}

.dash .inbox-pane {
    position: relative;
    grid-column: 2;
    grid-row: 1 / -1;
    min-width: 0;
    min-height: 0;
    display: flex;
}

.dash .inbox-pane:has(> .pane-ghost--overlay) > .pane:not(.pane-ghost) {
    opacity: .5;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease-out) 300ms;
}

.dash .pane.pane-ghost--overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
}

.dash .inbox--solo .inbox-pane {
    grid-column: 1;
}

.dash .inbox-empty {
    flex: 1;
    min-width: 0;
    display: flex;
}

.dash .inbox-empty .table-empty {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    gap: 8px;
    border: 0;
    border-radius: 0;
    background: var(--dash-surface);
}

.dash .btn-dark--sm {
    padding: 6px 13px;
    font-size: 13px;
    border-radius: 9px;
}

.dash .btn-dark--danger,
.dash .btn-dark--danger:hover {
    background: var(--dash-urgent);
    color: #ffffff;
    box-shadow: 0 0 0 3px rgba(217, 59, 64, .22);
}

.dash .btn-dark:disabled {
    opacity: .45;
    cursor: default;
    box-shadow: none;
}

.dash .pill-btn--sm {
    padding: 5px 11px;
    font-size: 13px;
    border-radius: 9px;
}

.dash .queue {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 4px 0 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .12) transparent;
}

.dash .queue-group + .queue-group {
    margin-top: 10px;
}

.dash .queue-switch-ghost {
    padding: 6px 12px 8px;
}

.dash .queue-head {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 18px;
    background: var(--dash-side);
}

.dash .queue-list {
    list-style: none;
    margin: 0;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dash .qrow {
    position: relative;
    display: flex;
    gap: 11px;
    padding: 9px 10px;
    border-radius: 10px;
    color: inherit;
    transition: background var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std);
}

.dash .qrow-body {
    flex: 1;
    min-width: 0;
}

.dash .qrow-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.dash .pane {
    container-type: inline-size;
    container-name: pane;
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
}

.dash .pane-col {
    container-type: inline-size;
    container-name: pane-col;
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.dash .pane:not(.pane--ticket) > .pane-col {
    background: var(--dash-surface);
    overflow: hidden;
}

.dash .pane-missing {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    text-align: center;
    font-size: 13px;
    color: var(--dash-muted);
    background: var(--dash-surface);
}

.dash .pane-head {
    position: relative;
    z-index: 3;
    min-height: var(--inbox-head-h);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px 6px 20px;
    background: var(--dash-surface);
    box-shadow: 0 1px 0 var(--dash-separator), 0 4px 10px -8px rgba(0, 0, 0, .6);
}

.dash .pane-back {
    display: none;
    width: 34px;
    height: 34px;
    border: 1px solid var(--dash-border);
    border-radius: 999px;
}

.dash .inbox--from .pane-back {
    display: flex;
}

.dash .queue-head .ghost {
    width: 64px;
    height: 12px;
}

.dash .qrow--ghost .ghost--mark {
    width: 34px;
    height: 34px;
    border-radius: 999px;
}

.dash .qrow--ghost .qrow-top {
    align-items: center;
}

.dash .qrow--ghost .ghost--line {
    margin-top: 8px;
}

.dash .pane-ghost .pane-head-body {
    align-items: center;
}

.dash .pane-ghost-name {
    width: 96px;
    height: 14px;
}

.dash .pane-ghost-meta {
    width: 180px;
    height: 11px;
}

.dash .pane-ghost-day {
    width: 40px;
    height: 10px;
}

.dash .pane-ghost .pane-scroll .ghost + .ghost {
    margin-top: 12px;
}

.dash .pane-ghost .tk-sec {
    padding-top: 16px;
}

.dash .pane-ghost .tk-sec .ghost + .ghost {
    margin-top: 10px;
}

.dash .pane-ghost.ghost-root {
    --ghost-delay: 300ms;
}

.dash .pane-failed {
    flex-direction: column;
    gap: 12px;
}

.dash .pane-failed p {
    margin: 0;
}

.dash .context-ghost-rows {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 6px 16px 0;
    padding: 15px 0;
    border-top: 1px solid var(--dash-separator);
    border-bottom: 1px solid var(--dash-separator);
}

.dash .pane-ghost .reply {
    min-height: 92px;
    border-radius: 16px;
    background: linear-gradient(180deg, #1b1b1b, #161616);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.dash .context-ghost-avatar {
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
    border-radius: 50%;
    background-color: var(--dash-raised);
    box-shadow: 0 0 0 6px var(--dash-side);
}

.dash .context-ghost-name {
    width: 132px;
    height: 18px;
}

.dash .context-ghost-mail {
    width: 172px;
    height: 12px;
    margin-top: 8px;
}

.dash .msg.msg--ghost:hover {
    background: none;
}

.dash .msg-ghost-avatar {
    width: 40px;
    height: 40px;
    margin-top: 2px;
    border-radius: 999px;
}

.dash .msg-ghost-meta {
    width: 132px;
    height: 12px;
    margin: 5px 0 6px;
}

.dash .msg-ghost-body {
    width: var(--ghost-w, 64%);
    height: 11px;
    margin: 6px 0;
}

.dash .pane-mark {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--dash-muted-2);
    pointer-events: none;
}

.dash .pane-mark-glyph {
    width: 16px;
    height: 16px;
}

.dash .pane-head-body {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.dash .pane-name {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-shrink: 0;
    max-width: 60%;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--dash-text);
}

.dash .pane-name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash .pane-meta {
    margin: 0;
    min-width: 0;
    display: flex;
    gap: .3em;
    padding-left: 12px;
    border-left: 1px solid var(--dash-border);
    font-size: 13px;
    line-height: 1.4;
    color: var(--dash-muted);
    white-space: nowrap;
}

.dash .pane-meta-mail,
.dash .pane-meta-state {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash .pane-meta-state {
    flex-shrink: 0;
    max-width: calc(100% - .3em);
}

.dash .pane-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.dash .pane-actions .pill-btn--sm,
.dash .pane-actions .btn-dark--sm:not(.btn-dark--danger) {
    height: 34px;
    padding: 0 11px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    box-shadow: none;
    color: var(--dash-text-2);
    font-weight: 500;
}

.dash .pane-actions .pill-btn--sm:hover,
.dash .pane-actions .btn-dark--sm:not(.btn-dark--danger):hover {
    background: rgba(255, 255, 255, .06);
    color: var(--dash-text);
}

.dash .pane-actions .btn-dark--sm:not(.btn-dark--danger):hover {
    background: var(--dash-danger-bg);
    color: var(--dash-danger);
}

.dash .pane-actions .btn-dark--danger {
    height: 34px;
    padding: 0 12px;
    border-radius: 9px;
    animation: confirm-in var(--dur-mid) var(--ease-out) backwards;
}

@keyframes confirm-in {
    from { opacity: 0; transform: scale(.96); }
}

.dash .pane-actions-sep {
    width: 1px;
    height: 20px;
    margin: 0 6px;
    background: var(--dash-border);
}

.dash .pane-details[aria-expanded="true"] {
    background: var(--accent-soft);
    border-color: transparent;
    color: var(--accent-text);
}

.dash .pane-locked {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    border-bottom: 1px solid var(--dash-warn-line);
    background: var(--dash-badge-trial-bg);
    color: var(--dash-warn-text);
    font-size: 13px;
    font-weight: 500;
}

.dash .pane-thread {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.dash .pane-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 0 18px;
    background: var(--dash-surface);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .14) transparent;
}

.dash .pane-scroll > .pill-btn {
    margin: 4px 20px 8px;
}

.dash .pane-jump {
    position: absolute;
    inset-inline: 0;
    bottom: 14px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    margin-inline: auto;
    padding: 7px 14px;
    border: 0;
    border-radius: var(--dash-radius-pill);
    background: var(--dash-dark);
    color: #ffffff;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 24px -10px rgba(31, 116, 199, .9), 0 0 0 1px rgba(255, 255, 255, .08);
    animation: rise-in 320ms var(--ease-expo) both;
}

.dash .pane-jump:hover { background: var(--dash-dark-hover); }

.dash .pane-jump-glyph {
    width: 14px;
    height: 14px;
}

.dash .pane-day {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 20px 6px;
}

.dash .pane-day::before,
.dash .pane-day::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--dash-separator);
}

.dash .pane-day-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--dash-muted);
}

.dash .pane-system {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
    margin: 6px 0;
    padding: 3px 22px 3px 20px;
    transition: background var(--dur-fast) var(--ease-std);
}

.dash .pane-system:hover {
    background: rgba(255, 255, 255, .025);
}

.dash .pane-system-mark {
    justify-self: center;
    display: flex;
    color: var(--dash-muted-2);
}

.dash .pane-system--join .pane-system-mark {
    color: var(--good);
}

.dash .pane-system--join .pane-system-mark .icon-sm {
    width: 18px;
    height: 18px;
    stroke-width: 2.6;
}

.dash .pane-system-text {
    margin: 0;
    font-size: 13px;
    line-height: 20px;
    color: var(--dash-muted);
}

.dash .pane-system-who {
    font-weight: 500;
    color: var(--dash-text-2);
}

.dash .pane-system-time {
    font-size: 12px;
    color: var(--dash-muted-2);
    white-space: nowrap;
}

.dash .msg {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 14px;
    padding: 1px 22px 1px 20px;
    transition: background var(--dur-fast) var(--ease-std);
}

.dash .msg:hover {
    background: rgba(255, 255, 255, .025);
}

.dash .msg--head {
    margin-top: 14px;
    padding-top: 4px;
    padding-bottom: 2px;
}

.dash .msg-avatar {
    width: 40px;
    height: 40px;
    margin-top: 2px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--dash-avatar-bg);
    color: var(--dash-avatar-text);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
    user-select: none;
}

.dash .bubble--agent .msg-avatar {
    background: var(--dash-dark);
    color: #ffffff;
}

.dash .bubble--bot .msg-avatar {
    background: var(--accent-soft);
    color: var(--accent-text);
}

.dash .msg-avatar-glyph {
    width: 20px;
    height: 20px;
}

.dash .msg-main {
    min-width: 0;
}

.dash .msg-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 1px;
    min-width: 0;
}

.dash .msg-author {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: -.005em;
    color: var(--dash-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash .bubble--agent .msg-author {
    color: var(--dash-badge-lead-text);
}

.dash .bubble--bot .msg-author {
    color: var(--dash-text-2);
}

.dash .msg-time {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--dash-muted-2);
    font-variant-numeric: tabular-nums;
}

.dash .msg-body {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 15px;
    line-height: 23px;
    color: var(--dash-text);
}

.dash .bubble--bot .msg-body {
    color: var(--dash-text-2);
}

.dash .msg-body--markdown {
    white-space: normal;
}

.dash .msg-body--markdown .prose-chat a {
    color: var(--dash-badge-lead-text);
}

.dash .msg-body--markdown .prose-chat a:hover {
    color: var(--accent-text);
}

.dash .msg-body--markdown .prose-chat code {
    background: var(--tone-muted-bg);
    color: var(--dash-text);
}

.dash .msg-gutter {
    align-self: start;
    justify-self: end;
    padding-top: 4px;
    font-size: 11px;
    line-height: 16px;
    color: var(--dash-muted-2);
    font-variant-numeric: tabular-nums;
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-std);
}

.dash .msg--cont:hover .msg-gutter {
    opacity: 1;
}

.dash .msg .att-list {
    margin-top: 8px;
}

.dash .msg--outgoing .msg-body,
.dash .msg--outgoing .att-list {
    opacity: .5;
}

.dash .msg--failed .msg-body {
    opacity: 1;
    color: var(--dash-danger);
}

.dash .msg-failed {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 6px 0 2px;
    font-size: 13px;
    line-height: 18px;
    color: var(--dash-danger);
}

.dash .msg-failed-glyph {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.dash .msg-failed-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.dash .msg-failed-action {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--dash-badge-lead-text);
    cursor: pointer;
}

.dash .msg-failed-action:hover {
    text-decoration: underline;
}

.dash .msg-failed-action--quiet {
    color: var(--dash-muted);
}

.dash .msg .att-grid--1 {
    --att-one-w: min(100%, 28rem);
    --att-one-h: 22rem;
}

.dash .msg .att-grid:not(.att-grid--1) {
    width: min(100%, 28rem);
    gap: 4px;
    grid-template-columns: repeat(var(--att-cols, 2), minmax(0, 1fr));
}

.dash .msg .att-grid:has(> .att-thumb:nth-child(4):last-child) {
    --att-cols: 2;
}

.dash .msg .att-grid:has(> .att-thumb:nth-child(3):last-child) {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.dash .msg .att-grid:has(> .att-thumb:nth-child(3):last-child) > .att-thumb:first-child {
    grid-row: span 2;
}

.dash .msg .att-thumb-link {
    border: 0;
    border-radius: 8px;
    background: var(--dash-raised);
}

.dash .msg .att-grid:not(.att-grid--1) .att-thumb-link {
    aspect-ratio: 1;
}

.dash .msg .att-grid:has(> .att-thumb:nth-child(3):last-child) > .att-thumb:first-child .att-thumb-link {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
}

@media (prefers-reduced-motion: no-preference) {
    .dash :is(.msg, .pane-system):not(.msg--ghost, .msg--settled, .is-loaded):nth-last-child(1 of .msg, .pane-system) {
        animation: msg-in 340ms var(--ease-expo) backwards;
    }

    @keyframes msg-in {
        from { opacity: 0; transform: translateY(4px); }
    }

    .dash .msg--settled {
        animation: msg-in 340ms var(--ease-expo) var(--msg-resume, 0ms) backwards;
    }

    .dash .msg--settled :is(.msg-body, .att-list) {
        animation: msg-firm var(--dur-mid) var(--ease-out) backwards;
    }

    @keyframes msg-firm {
        from { opacity: .5; }
    }
}

.dash .tk-sheet {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--dash-surface);
    overflow: hidden;
}

.dash .pane--ticket .pane-scroll {
    padding: 30px 44px 12px;
    background: var(--dash-surface);
}

.dash .tk-subject {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.015em;
    color: var(--text);
    overflow-wrap: anywhere;
}

.dash .tk-body {
    margin: 10px 0 0;
    max-width: 720px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-soft);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.dash .tk-body--quiet {
    font-style: italic;
    color: var(--text-dim);
}

.dash .tk-files {
    max-width: 720px;
    margin-top: 12px;
}

.dash .tk-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
}

.dash .tk-divider-label {
    min-width: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}

.dash .tk-divider-rule {
    flex: 1;
    min-width: 24px;
    height: 1px;
    background: var(--line);
}

.dash .tk-divider--ticket .tk-divider-label {
    color: var(--signal-800);
}

.dash .tk-divider--ticket .tk-divider-rule {
    background: var(--signal-100);
}

.dash .tk-divider-toggle {
    flex: none;
    padding: 2px 4px;
    border: none;
    border-radius: 6px;
    background: none;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--signal-700);
    cursor: pointer;
}

.dash .tk-divider-toggle:hover {
    color: var(--signal-800);
}

.dash .tk-divider-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.dash .tk-prechat {
    margin-top: 6px;
}

.dash .tk-prechat .msg--head {
    margin-top: 10px;
}

.dash .tk-prechat .msg-body {
    font-size: 14px;
    line-height: 21px;
    color: var(--dash-text-2);
}

.dash .tk-prechat .msg-author {
    font-size: 14px;
}

.dash .tk-divider--ticket + .msg {
    margin-top: 20px;
}

.dash .tk-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 56px auto 24px;
    max-width: 380px;
    text-align: center;
}

.dash .tk-empty-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--signal-50);
    color: var(--signal-700);
}

.dash .tk-empty-glyph {
    width: 20px;
    height: 20px;
}

.dash .tk-empty-title {
    margin: 14px 0 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.dash .tk-empty-text {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-dim);
}

.dash .tk-side {
    width: 320px;
    flex: none;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: var(--dash-side);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .12) transparent;
}

.dash .tk-side::after {
    content: "";
    flex: none;
    height: 18px;
}

.dash .tk-sec {
    position: relative;
    flex: none;
    border-top: 1px solid var(--dash-separator);
}

.dash .tk-sec:first-child {
    border-top: 0;
}

.dash .tk-sec-title {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    margin: 0;
    padding: 8px 18px 4px;
    background: var(--dash-side);
    color: var(--dash-text-2);
    font-size: 13px;
    font-weight: 600;
}

.dash .tk-sec-body {
    padding: 4px 18px 16px;
}

.dash .tk-status-wrap {
    position: relative;
    min-width: 0;
}

.dash .tk-status {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 8px 0 9px;
    border-radius: 999px;
    cursor: pointer;
}

.dash .tk-status:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.dash .tk-status select {
    appearance: none;
    -webkit-appearance: none;
    padding: 0 18px 0 0;
    border: none;
    outline: none;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: inherit;
    cursor: pointer;
}

.dash .tk-status select:disabled {
    opacity: 1;
    cursor: default;
}

.dash .tk-status select option {
    font-weight: 500;
    color: var(--dash-text);
}

.dash .tk-status-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.dash .tk-status-caret {
    position: absolute;
    right: 6px;
    width: 13px;
    height: 13px;
    pointer-events: none;
    color: currentColor;
}

.dash .tk-status.status--open {
    background: var(--dash-status-open-bg);
    color: var(--dash-status-open);
}

.dash .tk-status.status--progress {
    background: var(--dash-status-progress-bg);
    color: var(--dash-status-progress);
}

.dash .tk-status.status--done {
    background: var(--dash-status-done-bg);
    color: var(--dash-status-done);
}

.dash .wi-state--review {
    --wi-state: var(--wi-review);
}

.dash .wi-state--build {
    --wi-state: var(--wi-build);
}

.dash .wi-state--release {
    --wi-state: var(--wi-release);
}

.dash .wi-state--removed {
    --wi-state: var(--wi-muted);
}

.dash .wi-state--deleted {
    --wi-state: var(--wi-deleted);
}

.dash {
    --wi-graphite: #08090a;
    --wi-card: #0f1011;
    --wi-hover: rgba(255, 255, 255, .035);
    --wi-line: rgba(255, 255, 255, .065);
    --wi-line-2: rgba(255, 255, 255, .1);
    --wi-text: #f7f8f8;
    --wi-text-2: #d0d6e0;
    --wi-muted: #8a8f98;
    --wi-faint: #7c8088;
    --wi-iris: #8f93ff;
    --wi-iris-soft: #c3c5ff;
    --wi-iris-bg: rgba(143, 147, 255, .1);
    --wi-iris-line: rgba(143, 147, 255, .34);
    --wi-focus: #a5a9ff;
    --wi-lift: inset 0 1px 0 rgba(255, 255, 255, .03), 0 1px 2px rgba(0, 0, 0, .45);
    --wi-review: #a7adb8;
    --wi-build: #93b4f5;
    --wi-release: #82d3a5;
    --wi-deleted: #d9b26c;
}

.dash .wt-chip {
    --wt-tone: 200, 206, 216;
    display: inline-flex;
    align-items: center;
    height: 19px;
    padding: 0 7px;
    border-radius: 6px;
    background: rgba(var(--wt-tone), .12);
    box-shadow: inset 0 0 0 1px rgba(var(--wt-tone), .3);
    color: rgb(var(--wt-tone));
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.dash a.wt-chip:hover {
    background: rgba(var(--wt-tone), .2);
}

.dash a.wt-chip:focus-visible {
    outline: 2px solid var(--wi-focus);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
    .dash a.wt-chip {
        transition: background-color 120ms ease;
    }
}

.dash .ink-btn,
.dash .ghost-btn {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.dash .ink-btn {
    padding: 0 14px;
    background: #f2f2f3;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .14), 0 1px 2px rgba(0, 0, 0, .45);
    color: #0a0a0b;
    font-weight: 600;
    letter-spacing: -.005em;
}

.dash .ink-btn:hover:not(:disabled) {
    background: #ffffff;
}

.dash .ink-btn:active:not(:disabled) {
    transform: translateY(.5px);
}

.dash .ink-btn:disabled {
    cursor: not-allowed;
    opacity: .32;
}

.dash .ghost-btn {
    padding: 0 12px;
    background: rgba(255, 255, 255, .035);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
    color: #e7e8eb;
    font-weight: 500;
}

.dash .ghost-btn:hover {
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15);
}

.dash .ink-btn--sm,
.dash .ghost-btn--sm {
    height: 30px;
    padding: 0 12px;
    font-size: 12.5px;
}

.dash .ink-btn:focus-visible,
.dash .ghost-btn:focus-visible {
    outline: 2px solid var(--wi-focus);
    outline-offset: 2px;
}

.dash .kbd-keys {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.dash .kbd-keys kbd {
    display: inline-grid;
    place-items: center;
    box-sizing: border-box;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .055);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 -1px 0 rgba(255, 255, 255, .03);
    color: #a9adb5;
    font: 500 11px/1 Inter, sans-serif;
}

.dash .kbd-keys kbd .icon-sm {
    width: 12px;
    height: 12px;
}

@media (prefers-reduced-motion: no-preference) {
    .dash .ink-btn {
        transition: background-color 120ms ease, transform 120ms ease, opacity 120ms ease;
    }

    .dash .ghost-btn {
        transition: background-color 120ms ease, box-shadow 120ms ease;
    }
}

.dash .tk-confirm {
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid var(--dash-warn-line);
    border-radius: 12px;
    background: var(--dash-badge-trial-bg);
}

.dash .tk-confirm-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--dash-text-2);
}

.dash .tk-confirm-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.dash .tk-confirm-actions > button {
    white-space: nowrap;
}

.dash .tk-status-wrap--sm .tk-confirm {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: var(--z-content);
    width: 280px;
    margin: 0;
    background: var(--dash-surface);
    border-color: var(--dash-separator);
    box-shadow: var(--shadow-panel);
}

.dash .tk-select {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: -8px;
    padding-left: 8px;
    border-radius: 7px;
}

.dash .tk-select:hover {
    background: var(--dash-row-hover);
}

.dash .tk-select select {
    appearance: none;
    -webkit-appearance: none;
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 30px;
    padding: 0 24px 0 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    text-overflow: ellipsis;
    cursor: pointer;
    -webkit-mask-image: linear-gradient(to left, transparent 20px, #000 30px);
    mask-image: linear-gradient(to left, transparent 20px, #000 30px);
}

.dash .tk-select select:disabled {
    cursor: default;
}

.dash .tk-select:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.dash .tk-select select:focus {
    outline: none;
}

.dash .tk-select--unset select {
    font-weight: 500;
    color: var(--text-dim);
}

.dash .tk-select-caret {
    position: absolute;
    right: 8px;
    width: 13px;
    height: 13px;
    pointer-events: none;
    color: var(--dash-muted-2);
    opacity: 0;
    transition: opacity 140ms ease;
}

.dash .tk-select:is(:hover, :focus-within) .tk-select-caret {
    opacity: 1;
}

@supports (appearance: base-select) {
    .dash :is(.tk-select, .tk-status) select,
    .dash :is(.tk-select, .tk-status) select::picker(select) {
        appearance: base-select;
    }

    .dash :is(.tk-select, .tk-status) select {
        display: flex;
        align-items: center;
        white-space: nowrap;
        overflow: hidden;
    }

    .dash :is(.tk-select, .tk-status) select::picker-icon {
        display: none;
    }

    .dash :is(.tk-select, .tk-status) select::picker(select) {
        min-width: 12rem;
        max-height: min(20rem, 50vh);
        overflow-y: auto;
        margin-block: 6px;
        padding: 4px;
        border: 1px solid var(--dash-border);
        border-radius: 10px;
        background: var(--dash-surface);
        color: var(--dash-text);
        box-shadow: var(--shadow-panel);
        position-try-fallbacks: flip-block;
    }

    .dash :is(.tk-select, .tk-status) select option {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 32px;
        padding: 0 10px;
        border-radius: 7px;
        background: transparent;
        font-size: 13px;
        font-weight: 500;
        color: var(--dash-text-2);
        cursor: pointer;
    }

    .dash :is(.tk-select, .tk-status) select option:hover,
    .dash :is(.tk-select, .tk-status) select option:focus-visible {
        outline: none;
        background: var(--tone-muted-bg);
        color: var(--dash-text);
    }

    .dash :is(.tk-select, .tk-status) select option:checked {
        font-weight: 600;
        color: var(--dash-text);
    }

    .dash :is(.tk-select, .tk-status) select option::checkmark {
        order: 1;
        margin-left: auto;
        color: var(--accent);
    }

    .dash .tk-status select::picker(select) {
        margin-block: 11px;
        margin-inline-start: -24px;
    }

    .dash .tk-status select option::before {
        content: "";
        flex: none;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--dash-muted-2);
    }

    .dash .tk-status select option.status--open::before {
        background: var(--dash-status-open);
    }

    .dash .tk-status select option.status--progress::before {
        background: var(--dash-status-progress);
    }

    .dash .tk-status select option.status--done::before {
        background: var(--dash-status-done);
    }

    @media (prefers-reduced-motion: no-preference) {
        .dash :is(.tk-select, .tk-status) select::picker(select) {
            opacity: 0;
            translate: 0 -4px;
            transition: opacity 160ms var(--ease-std), translate 240ms var(--ease-expo),
                display 240ms allow-discrete, overlay 240ms allow-discrete;
        }

        .dash :is(.tk-select, .tk-status) select:open::picker(select) {
            opacity: 1;
            translate: 0 0;
        }

        .dash :is(.tk-select, .tk-status) select option {
            transition: background-color var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
        }

        @starting-style {
            .dash :is(.tk-select, .tk-status) select:open::picker(select) {
                opacity: 0;
                translate: 0 -4px;
            }
        }
    }
}


.dash .tk-capsule {
    flex: none;
    align-self: flex-end;
    margin: 14px 24px 6px 0;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 8px;
    background: var(--dash-surface);
    border: 1px solid var(--dash-separator);
    border-radius: 999px;
    box-shadow: var(--shadow-card);
}

.dash .tk--side-closed .tk-capsule {
    display: flex;
}

.dash .tk--side-closed .pane-scroll {
    padding-top: 22px;
}

.dash .tk-capsule-text {
    padding: 0 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-dim);
    white-space: nowrap;
}

.dash .tk-capsule-expand {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: var(--canvas);
    color: var(--dash-text-2);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.dash .tk-capsule-expand:hover {
    background: var(--dash-avatar-bg);
    color: var(--dash-text);
}

.dash .tk-capsule-expand .icon-sm {
    width: 15px;
    height: 15px;
}

@media (min-width: 641px) {
    @container pane (width <= 740px) {
        .dash .tk--side-auto .tk-capsule {
            display: flex;
        }

        .dash .tk--side-auto .pane-scroll {
            padding-top: 22px;
        }
    }
}

@container pane-col (max-width: 640px) {
    .dash .pane--ticket .pane-scroll {
        padding: 24px 20px 12px;
    }

    .dash .tk-capsule {
        margin: 12px 16px 0 0;
    }

    .dash .tk--side-closed .pane-scroll,
    .dash .tk--side-auto .pane-scroll {
        padding-top: 18px;
    }

    .dash .tk-capsule-text {
        display: none;
    }
}

.dash .pane-foot {
    padding: 0 20px 14px;
    background: var(--dash-surface);
}

.dash .pane-typing {
    flex-shrink: 0;
    background: var(--dash-surface);
}

.dash .pane-typing-row {
    display: grid;
    grid-template-columns: 40px auto;
    justify-content: start;
    align-items: center;
    column-gap: 14px;
    padding: 2px 22px 10px 20px;
}

.dash .pane-typing-row .msg-avatar {
    margin-top: 0;
}

.dash .pane-typing-bubble {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 34px;
    padding: 0 14px;
    border-radius: 17px;
    border-bottom-left-radius: 6px;
    background: var(--dash-raised);
    box-shadow: inset 0 0 0 1px var(--dash-separator);
}

.dash .pane-typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--dash-text-2);
    opacity: .6;
}

@media (prefers-reduced-motion: no-preference) {
    .dash .pane-typing-row {
        transform-origin: bottom left;
        animation: bubble-in 340ms var(--ease-expo) both;
    }

    .dash .pane-typing-dot {
        animation: wave 1.2s ease-in-out infinite;
    }

    .dash .pane-typing-dot:nth-child(2) { animation-delay: .15s; }
    .dash .pane-typing-dot:nth-child(3) { animation-delay: .3s; }

    .dash .pane-typing-row--leaving {
        animation: typing-out var(--dur-exit) var(--ease-in) forwards;
    }

    @keyframes typing-out {
        to { opacity: 0; }
    }
}

.dash .reply-wrap {
    position: relative;
}

.dash .reply-scrim {
    position: fixed;
    inset: 0;
    z-index: 5;
    border: none;
    background: transparent;
    cursor: default;
}

.dash .att-pending--dash {
    position: relative;
    z-index: 6;
}

.dash .reply-emoji,
.dash .tpl-pop {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 6;
    transform-origin: bottom left;
    border: 1px solid var(--dash-border);
    border-radius: 14px;
    background: var(--dash-surface);
    box-shadow: var(--shadow-panel);
}

.dash .reply-emoji {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    max-width: calc(100% - 8px);
    gap: 2px;
    padding: 10px;
}

.dash .reply-emoji-item {
    width: 100%;
    aspect-ratio: 1;
    min-width: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 17px;
    line-height: 1;
}

.dash .reply-emoji-item:hover {
    background: var(--dash-avatar-bg);
}

.dash .tpl-pop {
    width: 340px;
    max-width: calc(100% - 8px);
    max-height: var(--pop-room, none);
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dash .tpl-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.dash .tpl-head-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dash-muted);
}

.dash .tpl-new {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--dash-border);
    border-radius: 999px;
    background: var(--dash-surface);
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--dash-text);
}

.dash .tpl-new:hover {
    background: var(--dash-avatar-bg);
}

.dash .tpl-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 4px 8px;
}

.dash .tpl-empty-line {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--dash-muted);
}

.dash .tpl-starters {
    border: 1px solid var(--dash-border);
    border-radius: 999px;
    background: var(--dash-surface);
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-text);
}

.dash .tpl-starters:hover:not(:disabled) {
    background: var(--dash-avatar-bg);
}

.dash .tpl-starters:disabled {
    opacity: .6;
}

.dash .tpl-empty-note {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--dash-muted-2);
}

.dash .tpl-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dash .tpl-row {
    display: flex;
    align-items: center;
    gap: 2px;
    border-radius: 10px;
}

.dash .tpl-row:hover {
    background: var(--dash-avatar-bg);
}

.dash .tpl-pick {
    flex: 1;
    min-width: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    padding: 8px 10px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dash .tpl-title {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-text);
}

.dash .tpl-title-text {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dash .tpl-shared {
    border-radius: 999px;
    background: var(--dash-avatar-bg);
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--dash-muted);
}

.dash .tpl-preview {
    font-size: 12px;
    color: var(--dash-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash .tpl-tools {
    display: flex;
    gap: 2px;
    padding-right: 6px;
}

.dash .tpl-tool {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--dash-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dash .tpl-tool:hover {
    background: var(--dash-surface);
    color: var(--dash-text);
}

.dash .tpl-confirm {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    padding-right: 6px;
}

.dash .tpl-confirm-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--dash-text);
}

.dash .tpl-confirm-btn {
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--dash-border);
    border-radius: 7px;
    background: var(--dash-surface);
    color: var(--dash-text);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.dash .tpl-confirm-btn--danger {
    border-color: var(--dash-urgent);
    background: var(--dash-urgent);
    color: #ffffff;
}

.dash .tpl-input,
.dash .tpl-body {
    width: 100%;
    border: 1px solid var(--dash-border);
    border-radius: 10px;
    background: var(--dash-input-bg);
    padding: 8px 10px;
    font: inherit;
    font-size: 13px;
    color: var(--dash-text);
}

.dash .tpl-body {
    resize: none;
}

.dash .tpl-count {
    margin-top: -4px;
    text-align: right;
}

.dash .tpl-input:focus-visible,
.dash .tpl-body:focus-visible {
    outline: none;
    border-color: var(--dash-badge-lead-text);
    box-shadow: var(--dash-focus-ring);
    background: var(--dash-surface);
}

.dash .tpl-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--dash-text);
}

.dash .tpl-save {
    border: none;
    border-radius: 10px;
    background: var(--dash-dark);
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.dash .tpl-save:hover:not(:disabled) {
    background: var(--dash-dark-hover);
}

.dash .tpl-save:disabled {
    opacity: .6;
}

.dash .tpl-error {
    margin: 0;
    font-size: 12px;
    color: var(--dash-danger);
}

.dash .reply-count {
    margin: 6px 0 0;
    text-align: right;
}

@container pane-col (max-width: 760px) {
    .dash .pane-action-label {
        display: none;
    }

    .dash .pane-actions .pill-btn--sm,
    .dash .pane-actions .btn-dark--sm {
        padding-inline: 0;
        width: 36px;
        justify-content: center;
    }

    .dash .pane-actions .btn-dark--danger .pane-action-label {
        display: inline;
    }

    .dash .pane-actions .btn-dark--sm.btn-dark--danger {
        padding-inline: 12px;
        width: auto;
    }

    .dash .pane-ghost .pane-actions .ghost--ctl {
        width: 36px;
    }

    .dash .pane-head {
        gap: 8px;
        padding-right: 10px;
    }
}

@container pane-col (max-width: 960px) {
    .dash .pane-head-body {
        flex-direction: column;
        align-items: stretch;
        gap: 1px;
    }

    .dash .pane-ghost .pane-head-body {
        align-items: flex-start;
        gap: 6px;
    }

    .dash .pane-name {
        max-width: 100%;
        font-size: 15px;
        line-height: 20px;
    }

    .dash .pane-meta {
        padding-left: 0;
        border-left: 0;
        font-size: 12px;
        line-height: 16px;
    }
}

@container pane-col (max-width: 420px) {
    .dash .pane-mark,
    .dash .pane-actions-sep {
        display: none;
    }

    .dash .pane-actions {
        gap: 2px;
    }
}

.dash .pane-side {
    flex-shrink: 0;
    width: 320px;
    margin-left: 0;
    display: flex;
    overflow: hidden;
    background: var(--dash-side);
    box-shadow: inset 1px 0 0 var(--dash-separator);
}

.dash .pane-side:focus {
    outline: none;
}

.dash .pane-side--collapsed {
    width: 0;
    margin-left: 0;
    visibility: hidden;
}

@media (min-width: 641px) {
    @container pane (width <= 740px) {
        .dash .pane-side {
            position: absolute;
            inset-block: 0;
            right: 0;
            z-index: var(--z-content);
            box-shadow: inset 1px 0 0 var(--dash-separator), -24px 0 48px -16px rgba(0, 0, 0, .7);
        }

        .dash .pane-side--auto {
            width: 0;
            visibility: hidden;
        }
    }
}

@container pane (width > 740px) {
    .dash .pane-narrow-only {
        display: none;
    }
}

.dash .context {
    position: relative;
    width: 320px;
    box-sizing: border-box;
    flex: none;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: transparent;
    overflow: hidden;
    opacity: 1;
}

.dash .context-head {
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 10px;
    pointer-events: none;
}

.dash .context-collapse {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 9px;
    background: rgba(0, 0, 0, .45);
    color: #ffffff;
    cursor: pointer;
    pointer-events: auto;
    backdrop-filter: blur(6px);
    transition: background var(--dur-fast) var(--ease-std);
}

.dash .context-collapse:hover {
    background: rgba(0, 0, 0, .7);
}

.dash .context-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .12) transparent;
}

.dash .context-banner {
    position: relative;
    height: 88px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(120% 140% at 100% 100%, #04101b, transparent 60%),
        radial-gradient(90% 120% at 0% 0%, #0f4470, transparent 70%),
        #0a2d49;
}

.dash .context-banner::before,
.dash .context-banner::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
}

.dash .context-banner::before {
    top: -90px;
    left: -60px;
    width: 240px;
    height: 180px;
    background: radial-gradient(closest-side, rgba(36, 148, 242, .5), transparent);
}

.dash .context-banner::after {
    right: -50px;
    bottom: -100px;
    width: 220px;
    height: 170px;
    background: radial-gradient(closest-side, rgba(131, 190, 248, .28), transparent);
}

.dash .context-banner-mark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    background:
        linear-gradient(105deg, rgba(255, 255, 255, .07) 0 44%, rgba(255, 255, 255, .42) 50%,
            rgba(255, 255, 255, .07) 56% 100%) 100% 0 / 300% 100% no-repeat;
    mask-image: url(../images/winnolas-mark-white.svg);
    -webkit-mask-image: url(../images/winnolas-mark-white.svg);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-position: center;
    -webkit-mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

.dash .context-id {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin: -36px 12px 12px;
    padding: 0 4px;
}

.dash .context-id-avatar {
    flex: none;
    width: 64px;
    height: 64px;
    margin-bottom: 10px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--dash-avatar-bg);
    color: var(--dash-avatar-text);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 22px;
    box-shadow: 0 0 0 6px var(--dash-side);
}

.dash .context-id-main {
    min-width: 0;
    width: 100%;
}

.dash .context-id-name {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -.02em;
    color: var(--dash-text);
}

.dash .context-id-mail {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--dash-badge-lead-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash .context-id-mail:hover {
    color: var(--accent-text);
    text-decoration: underline;
}

.dash .context-id-mail--none {
    font-style: italic;
    color: var(--dash-muted);
}

.dash .context-id-rel {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--dash-muted);
}

.dash .context-none {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.5;
    font-style: italic;
    color: var(--dash-muted);
}

.dash .context-history {
    list-style: none;
    margin: 4px -8px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.dash .context-history > li {
    position: relative;
}

.dash .context-history > li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 25px;
    bottom: -9px;
    left: 11.5px;
    width: 1px;
    background: var(--dash-separator);
    pointer-events: none;
}

.dash .context-history-row {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr);
    column-gap: 12px;
    padding: 8px;
    border-radius: 8px;
    color: inherit;
}

.dash button.context-history-row {
    width: 100%;
    border: none;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.dash a.context-history-row:hover,
.dash button.context-history-row:hover {
    background: var(--dash-row-hover);
}

.dash button.context-history-row:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.dash .context-history-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 4px 0 0 12px;
    padding: 4px 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-text);
    cursor: pointer;
}

.dash .context-history-more:hover {
    background: var(--dash-row-hover);
}

.dash .context-history-more-chev {
    width: 13px;
    height: 13px;
    transition: transform var(--dur-mid) var(--ease-expo);
}

.dash .context-history-more[aria-expanded="true"] .context-history-more-chev {
    transform: rotate(180deg);
}

.dash .peek-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    justify-content: flex-end;
    background: var(--scrim);
}

.dash .peek {
    width: min(600px, 92vw);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--dash-surface);
    border-left: 1px solid var(--dash-border);
    box-shadow: -24px 0 48px -24px rgba(0, 0, 0, .7);
}

.dash .peek-head {
    height: var(--inbox-head-h);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px 0 20px;
    border-bottom: 1px solid var(--dash-separator);
}

.dash .peek-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
}

.dash .peek-none {
    margin: 0;
    padding: 16px 20px;
}

.dash .peek-subject {
    margin: 0 0 12px;
    padding: 0 22px 0 20px;
    overflow-wrap: anywhere;
    font-size: 14px;
    font-weight: 700;
}

.dash .context-history-row--locked {
    opacity: .6;
}

.dash .context-history-dot {
    position: relative;
    z-index: 1;
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 999px;
    background: var(--dash-muted-2);
}

.dash .context-history-dot.status--open { background: var(--dash-status-open); }
.dash .context-history-dot.status--progress { background: var(--dash-status-progress); }
.dash .context-history-dot.status--done { background: var(--dash-status-done); }
.dash .context-history-dot--live { background: var(--good); }

.dash .context-history-dot--ended {
    background: var(--dash-surface);
    box-shadow: inset 0 0 0 1.5px var(--dash-muted-2);
}

.dash .context-history-main {
    min-width: 0;
}

.dash .context-history-top {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.dash .context-history-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    color: var(--dash-text);
}

.dash .context-history-when {
    flex: none;
    font-size: 12px;
    color: var(--dash-muted-2);
    font-variant-numeric: tabular-nums;
}

.dash .context-history-meta,
.dash .context-history-lock {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--dash-muted);
    font-variant-numeric: tabular-nums;
}

.dash .context-history-lock {
    grid-column: 2;
}

@media (prefers-reduced-motion: no-preference) {
    .dash .peek-overlay {
        animation: peek-dim 180ms ease both;
    }

    .dash .peek {
        animation: peek-in 260ms var(--ease-out) both;
    }

    @keyframes peek-dim {
        from { opacity: 0; }
    }

    @keyframes peek-in {
        from { transform: translateX(100%); }
    }

    .dash .pane-details,
    .dash .pane-details .icon-sm {
        transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
    }

    .dash .pane-side {
        transition:
            width 320ms cubic-bezier(.22, 1, .36, 1),
            margin-left 320ms cubic-bezier(.22, 1, .36, 1),
            visibility 0s;
    }

    .dash .pane-side--collapsed {
        transition:
            width 320ms cubic-bezier(.22, 1, .36, 1),
            margin-left 320ms cubic-bezier(.22, 1, .36, 1),
            visibility 0s linear 320ms;
    }

    .dash .context,
    .dash .tk-side {
        transition:
            opacity 200ms ease 60ms,
            transform 320ms cubic-bezier(.22, 1, .36, 1);
    }

    .dash .pane-side--collapsed .context,
    .dash .pane-side--collapsed .tk-side {
        opacity: 0;
        transform: translateX(18px);
        transition:
            opacity 140ms ease,
            transform 240ms cubic-bezier(.4, 0, 1, 1);
    }

    @media (min-width: 641px) {
        @container pane (width <= 740px) {
            .dash .pane-side--auto {
                transition:
                    width 320ms cubic-bezier(.22, 1, .36, 1),
                    visibility 0s linear 320ms;
            }

            .dash .pane-side--auto .context,
            .dash .pane-side--auto .tk-side {
                opacity: 0;
                transform: translateX(18px);
                transition:
                    opacity 140ms ease,
                    transform 240ms cubic-bezier(.4, 0, 1, 1);
            }

            .dash .pane-side--auto .context-banner::before,
            .dash .pane-side--auto .context-banner::after,
            .dash .pane-side--auto .context-banner-mark {
                animation-play-state: paused;
            }
        }
    }

    .dash .tk-capsule-expand,
    .dash .tk-select,
    .dash .tk-divider-toggle {
        transition:
            background-color 140ms ease,
            color 140ms ease;
    }

    .dash .tk-prechat {
        animation: ctx-fade-in 240ms ease both;
    }

    .dash .context-banner::before {
        animation: context-banner-flow-a 4s ease-in-out;
    }

    .dash .context-banner::after {
        animation: context-banner-flow-b 4s ease-in-out;
    }

    @keyframes context-banner-flow-a {
        0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
        50% { transform: translate3d(170px, 40px, 0) scale(1.25); }
    }

    @keyframes context-banner-flow-b {
        0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
        50% { transform: translate3d(-190px, -50px, 0) scale(.85); }
    }

    .dash .context-banner-mark {
        animation: context-banner-glint 1.6s var(--ease-std) .4s backwards;
    }

    @keyframes context-banner-glint {
        0%, 55% { background-position: 100% 0; }
        85%, 100% { background-position: 0 0; }
    }

    .dash .pane-side--collapsed .context-banner::before,
    .dash .pane-side--collapsed .context-banner::after,
    .dash .pane-side--collapsed .context-banner-mark {
        animation-play-state: paused;
    }

    @keyframes ctx-fade-in {
        from { opacity: 0; }
    }

    .dash .reply-emoji-item {
        transition: background var(--dur-fast) var(--ease-std), scale var(--dur-fast) var(--ease-std);
    }

    .dash .reply-emoji-item:hover {
        scale: 1.2;
    }

    .dash .reply-emoji,
    .dash .tpl-pop {
        animation: reply-pop-in var(--dur-mid) var(--ease-expo) both;
    }

    @keyframes reply-pop-in {
        from { opacity: 0; transform: translateY(6px) scale(.97); }
    }
}

@media (pointer: coarse) {
    .dash .pane-actions .pill-btn--sm,
    .dash .pane-actions .btn-dark--sm,
    .dash .pane-actions .btn-dark--sm:not(.btn-dark--danger) {
        height: 44px;
    }

    .dash .pane-back {
        width: 44px;
        height: 44px;
    }

    .dash .ie-action {
        min-height: 44px;
    }

    .dash :is(.tk-status, .tk-status select, .tk-select select, .tk-divider-toggle,
        .context-history-more, .pane-jump, .ink-btn, .ghost-btn, .tpl-new, .tpl-starters, .tpl-save,
        .tpl-confirm-btn, .msg-failed-action) {
        min-height: 44px;
    }

    .dash .tk-capsule-expand,
    .dash .tpl-tool {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 1023px) {
    .dash .inbox {
        grid-template-columns: 1fr;
    }

    .dash .inbox-rail,
    .dash .inbox-pane {
        grid-column: 1;
        box-shadow: none;
    }

    .dash .inbox--open .inbox-rail {
        display: none;
    }

    .dash .inbox:not(.inbox--open):not(.inbox--solo) .inbox-pane {
        display: none;
    }

    .dash .inbox:not(.inbox--open):has(.inbox-empty--away) {
        grid-template-rows: auto minmax(0, 1fr);
    }

    .dash .inbox:not(.inbox--open):has(.inbox-empty--away) .inbox-pane {
        display: flex;
        grid-row: 1;
    }

    .dash .inbox:not(.inbox--open):has(.inbox-empty--away) .inbox-rail {
        grid-row: 2;
    }

    .dash .pane-back {
        display: flex;
    }
}

@media (max-width: 640px) {
    .dash .pane-head,
    .dash .pane-foot,
    .dash .pane-locked {
        padding-left: 14px;
        padding-right: 14px;
    }

    .dash .pane-head {
        padding-right: 8px;
    }

    .dash .pane-foot {
        padding-bottom: 10px;
    }

    .dash .msg,
    .dash .pane-system,
    .dash .pane-typing-row {
        column-gap: 10px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .dash .pane-day {
        margin-inline: 12px;
    }

    .dash .msg .att-grid--1 {
        --att-one-h: 18rem;
    }

    .dash .peek-subject {
        padding-left: 12px;
        padding-right: 12px;
    }

    .dash .pane--ticket {
        flex-direction: column;
        overflow-y: auto;
    }

    .dash .pane--ticket .pane-col {
        flex: none;
    }

    .dash .pane--ticket .pane-side {
        width: 100%;
        margin: 12px 0 0;
    }

    .dash .pane--ticket .pane-side--collapsed {
        width: 0;
        margin: 0;
    }

    .dash .tk-side {
        width: 100%;
    }

    .dash .pane:not(.pane--ticket) .pane-side {
        position: absolute;
        inset-block: 0;
        right: 0;
        z-index: var(--z-content);
        width: 100%;
        box-shadow: none;
    }

    .dash .pane:not(.pane--ticket) .pane-side--auto,
    .dash .pane:not(.pane--ticket) .pane-side--collapsed {
        width: 0;
        visibility: hidden;
    }

    .dash .pane-side--auto .context-banner::before,
    .dash .pane-side--auto .context-banner::after,
    .dash .pane-side--auto .context-banner-mark {
        animation-play-state: paused;
    }

    .dash .pane:not(.pane--ticket) .context {
        width: 100cqw;
    }
}

@media (pointer: coarse) {
    .dash .dialog-input,
    .dash .tpl-input,
    .dash .tpl-body {
        font-size: 16px;
    }

    .dash .context-collapse {
        width: 44px;
        height: 44px;
    }

    .dash .att-btn {
        width: 44px;
        height: 44px;
    }

    .dash .att-chip-remove {
        position: relative;
    }

    .dash .att-remove::after,
    .dash .att-chip-remove::after {
        content: "";
        position: absolute;
        inset: -10px;
    }
}

.dash .reply-offline {
    margin: 0 0 8px;
    border: 1px solid var(--dash-warn-line);
    border-radius: 10px;
    padding: 7px 12px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--dash-warn-text);
}

.dash .reply-offline[hidden] { display: none; }