.pc-chat-button {
    position        : fixed;
    right           : 24px;
    bottom          : 80px;
    z-index         : 9999;
    width           : 52px;
    height          : 52px;
    border-radius   : var(--br-50, 50%);
    display         : flex;
    align-items     : center;
    justify-content : center;
    background      : var(--span);
    color           : var(--text-default);
    box-shadow      : var(--box-shadow-b-30, 0 8px 17px rgb(0 0 0 / 30%));
    transition      : var(--transition-ease-2, all .2s ease);
}

.pc-chat-button:hover {
    transform : scale(1.06);
}

.pc-chat-button--hidden {
    opacity        : 0;
    pointer-events : none;
    transform      : scale(.75);
}

.pc-chat-button svg {
    color : currentColor;
}

.pc-badge {
    position      : absolute;
    top           : 2px;
    right         : 2px;
    min-width     : 18px;
    height        : 18px;
    padding       : 0 4px;
    border-radius : 9px;
    background    : var(--red, #ef4444);
    color         : #fff;
    font-size     : var(--font-size-xs, 10px);
    font-weight   : var(--font-weight-7, 700);
    line-height   : 18px;
    text-align    : center;
}

.pc-overlay {
    position        : fixed;
    inset           : 0;
    z-index         : 9997;
    background      : rgba(0, 0, 0, .35);
    opacity         : 0;
    pointer-events  : none;
    transition      : var(--transition-ease-2, all .2s ease);
}

.pc-overlay--visible {
    opacity        : 1;
    pointer-events : auto;
}

.pc-panel {
    position       : fixed;
    top            : 0;
    right          : 0;
    bottom         : 0;
    z-index        : 9998;
    width          : 360px;
    max-width      : 100vw;
    display        : flex;
    flex-direction : column;
    overflow       : hidden;
    background     : var(--card);
    border-left    : 1px solid var(--transparent-5-w);
    color          : var(--text-default);
    font-size      : var(--font-size-m, 14px);
    transform      : translateX(100%);
    transition     : transform .28s ease;
}

.pc-panel--open {
    transform : translateX(0);
}

.pc-header {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : 12px;
    padding         : 14px 16px;
    border-bottom   : 1px solid var(--transparent-5-w);
    flex-shrink     : 0;
}

.pc-header__title {
    margin      : 0;
    font-size   : var(--font-size-default, 16px);
    font-weight : var(--font-weight-6, 600);
}

.pc-tabs {
    display       : flex;
    flex-shrink   : 0;
    border-bottom : 1px solid var(--transparent-5-w);
}

.pc-tab {
    flex          : 1;
    height        : auto;
    padding       : 10px 6px;
    border        : 0;
    border-bottom : 2px solid transparent;
    border-radius : 0;
    background    : transparent;
    color         : var(--text-secondary);
    font-size     : var(--font-size-s, 12px);
    font-weight   : var(--font-weight-5, 500);
}

.pc-tab:hover,
.pc-tab--active {
    background    : transparent;
    color         : var(--span);
    border-bottom : 2px solid var(--span);
}

.pc-tabs .pc-tab:focus {
    border        : 0;
    border-bottom : 2px solid transparent;
}

.pc-tabs .pc-tab:focus:hover,
.pc-tabs .pc-tab:focus.pc-tab--active {
    border-bottom : 2px solid var(--span);
}

.pc-pane {
    position       : relative;
    display        : none;
    flex           : 1;
    flex-direction : column;
    min-height     : 0;
    overflow       : hidden;
}

.pc-pane--active {
    display : flex;
}

.pc-messages,
.pc-promo-pane,
.pc-promo-list {
    overflow-y : auto;
}

.pc-messages {
    display        : flex;
    flex           : 1;
    flex-direction : column;
    gap            : 10px;
    min-height     : 0;
    padding        : 12px;
}

.pc-promo-pane {
    display        : flex;
    flex           : 1;
    flex-direction : column;
    min-height     : 0;
}

.pc-promo-list {
    flex    : 1;
    padding : 8px 12px;
}

.pc-ws-status {
    position    : absolute;
    top         : 50%;
    right       : 12px;
    left        : 12px;
    z-index     : 5;
    transform   : translateY(-50%);
    color       : var(--text-default);
    font-size   : var(--font-size-s, 12px);
    font-weight : var(--font-weight-6, 600);
    text-align  : center;
}

.pc-pane-chat--ws-unavailable .pc-messages,
.pc-pane-chat--ws-unavailable .pc-reply-bar,
.pc-pane-chat--ws-unavailable .pc-send-form {
    opacity        : .25;
    pointer-events : none;
}

.pc-message {
    position      : relative;
    display       : flex;
    align-items   : flex-start;
    gap           : 8px;
    padding-right : 22px;
}

.pc-message--mentioned {
    margin        : 0 -6px;
    padding       : 6px;
    padding-right : 28px;
    border-left   : 2px solid var(--span);
    border-radius : var(--br-6, 6px);
    background    : var(--transparent-3-w);
}

.pc-message__avatar-link {
    display     : block;
    flex-shrink : 0;
}

.pc-message__avatar {
    width         : 32px;
    height        : 32px;
    border-radius : var(--br-50, 50%);
    object-fit    : cover;
}

.pc-message__body {
    flex      : 1;
    min-width : 0;
}

.pc-message__actions {
    position       : absolute;
    top            : 0;
    right          : 0;
    display        : flex;
    flex-direction : column;
    gap            : 3px;
}

.pc-message__action,
.pc-message__action:hover,
.pc-message__action:focus {
    width         : 18px;
    min-width     : 18px;
    height        : 18px;
    min-height    : 18px;
    padding       : 0;
    border        : 0;
    border-radius : 0;
    background    : transparent;
    box-shadow    : none;
    color         : var(--text-secondary);
}

.pc-message__action:hover {
    color : var(--span);
}

.pc-message__action--delete:hover {
    color : var(--red, #ef4444);
}

.pc-message__action svg {
    width  : 14px;
    height : 14px;
}

.pc-message__meta {
    display       : flex;
    align-items   : baseline;
    gap           : 6px;
    margin-bottom : 3px;
}

.pc-message__name {
    overflow      : hidden;
    color         : var(--span);
    font-size     : var(--font-size-s, 12px);
    font-weight   : var(--font-weight-6, 600);
    white-space   : nowrap;
    text-overflow : ellipsis;
}

.pc-message__time {
    flex-shrink : 0;
    color       : var(--text-secondary);
    font-size   : var(--font-size-xs, 10px);
}

.pc-message__text {
    margin      : 0;
    color       : var(--text-default);
    font-size   : var(--font-size-s, 12px);
    line-height : 1.35;
    word-break  : break-word;
}

.pc-mention-link {
    color       : var(--span);
    font-weight : var(--font-weight-7, 700);
}

.pc-message__quote,
.pc-reply-bar {
    background  : var(--transparent-5-w);
    border-left : 2px solid var(--span);
}

.pc-message__quote {
    max-width     : 100%;
    margin-bottom : 4px;
    padding       : 3px 8px;
    overflow      : hidden;
    border-radius : var(--br-4, 4px);
    color         : var(--text-secondary);
    font-size     : var(--font-size-s, 12px);
    white-space   : nowrap;
    text-overflow : ellipsis;
}

.pc-message__quote-name {
    color       : var(--span);
    font-weight : var(--font-weight-6, 600);
}

.pc-reply-bar {
    display     : flex;
    align-items : center;
    gap         : 8px;
    flex-shrink : 0;
    padding     : 6px 12px;
}

.pc-reply-bar__preview {
    flex          : 1;
    overflow      : hidden;
    color         : var(--text-secondary);
    font-size     : var(--font-size-s, 12px);
    white-space   : nowrap;
    text-overflow : ellipsis;
}

.pc-send-form,
.pc-form-row {
    display     : flex;
    align-items : flex-end;
    gap         : 8px;
}

.pc-send-form {
    position    : relative;
    flex-shrink : 0;
    padding     : 10px 12px;
    border-top  : 1px solid var(--transparent-5-w);
}

.pc-send-form .inputs-inline,
.pc-form-row .inputs-inline {
    flex          : 1;
    margin-bottom : 0;
}

.pc-mention-list {
    position       : absolute;
    right          : 84px;
    bottom         : calc(100% + 6px);
    left           : 12px;
    z-index        : 6;
    display        : flex;
    flex-direction : column;
    max-height     : 220px;
    overflow-y     : auto;
    padding        : 6px;
    background     : var(--card);
    border         : 1px solid var(--transparent-5-w);
    border-radius  : var(--br-6, 6px);
    box-shadow     : var(--box-shadow-b-30, 0 8px 17px rgb(0 0 0 / 30%));
}

.pc-mention-item {
    display               : grid;
    grid-template-columns : 28px 1fr;
    grid-template-rows    : auto auto;
    column-gap            : 8px;
    row-gap               : 1px;
    align-items           : center;
    width                 : 100%;
    height                : auto;
    padding               : 6px;
    border                : 0;
    background            : transparent;
    text-align            : left;
}

.pc-mention-item:hover,
.pc-mention-item--active {
    background : var(--transparent-5-w);
}

.pc-mention-item img {
    grid-row      : 1 / 3;
    width         : 28px;
    height        : 28px;
    border-radius : var(--br-50, 50%);
    object-fit    : cover;
}

.pc-mention-item__text,
.pc-mention-item__steam {
    overflow      : hidden;
    white-space   : nowrap;
    text-overflow : ellipsis;
}

.pc-mention-item__text {
    color       : var(--text-default);
    font-size   : var(--font-size-s, 12px);
    font-weight : var(--font-weight-6, 600);
}

.pc-mention-item__steam {
    color     : var(--text-secondary);
    font-size : var(--font-size-xs, 10px);
}

.pc-empty-hint,
.pc-panel-auth-required {
    color      : var(--text-secondary);
    text-align : center;
}

.pc-empty-hint {
    margin    : auto;
    padding   : 24px;
    font-size : var(--font-size-s, 12px);
}

.pc-panel-auth-required {
    display         : flex;
    align-items     : center;
    justify-content : center;
    flex            : 1;
    padding         : 24px;
    font-size       : var(--font-size-default, 16px);
    font-weight     : var(--font-weight-6, 600);
    line-height     : 1.45;
}

.pc-promo-section {
    flex-shrink   : 0;
    padding       : 14px 12px;
    border-bottom : 1px solid var(--transparent-5-w);
}

.pc-section-title {
    margin-bottom    : 10px;
    color            : var(--text-secondary);
    font-size        : var(--font-size-s, 12px);
    font-weight      : var(--font-weight-6, 600);
    letter-spacing   : .06em;
    text-transform   : uppercase;
}

.pc-msg {
    margin        : 6px 0 0;
    padding       : 6px 10px;
    border-radius : var(--br-6, 6px);
    font-size     : var(--font-size-s, 12px);
    font-weight   : var(--font-weight-6, 600);
}

.pc-msg--ok {
    background : var(--green, #22c55e);
    color      : #fff;
}

.pc-msg--err {
    background : var(--red, #ef4444);
    color      : #fff;
}

.pc-promo-item,
.pc-my-promo-item {
    display       : flex;
    align-items   : center;
    gap           : 8px;
    margin-bottom : 6px;
    padding       : 8px 10px;
    border-radius : var(--br-6, 6px);
    background    : var(--transparent-5-w);
    font-size     : var(--font-size-s, 12px);
}

.pc-promo-item__code,
.pc-my-promo-item__code {
    color       : var(--span);
    font-weight : var(--font-weight-7, 700);
    word-break  : break-all;
}

.pc-promo-item__code {
    flex : 1;
}

.pc-promo-item__info,
.pc-promo-item__creator,
.pc-my-promo-item__meta {
    color     : var(--text-secondary);
    font-size : var(--font-size-s, 12px);
}

.pc-promo-item__info,
.pc-my-promo-item__meta {
    flex-shrink : 0;
    white-space : nowrap;
}

.pc-promo-item__creator {
    margin-right : auto;
}

.pc-my-promos-list {
    display        : flex;
    flex-direction : column;
    gap            : 6px;
    margin-top     : 6px;
}

.pc-my-promo-item {
    justify-content : space-between;
}

.pc-my-promo-item__code {
    filter      : blur(5px);
    cursor      : pointer;
    user-select : none;
    transition  : var(--transition-ease-2, all .2s ease);
}

.pc-my-promo-item:hover .pc-my-promo-item__code {
    filter : none;
}

@media (max-width: 768px) {
    .pc-send-form {
        margin-bottom : 63px;
    }

    .pc-promo-pane > :last-child {
        margin-bottom : 63px;
    }
}