.pc-chat-button {
    position        : fixed;
    bottom          : 80px;
    right           : 24px;
    z-index         : 9999;
    width           : 52px;
    height          : 52px;
    border-radius   : 50%;
    background      : var(--span);
    display         : flex;
    align-items     : center;
    justify-content : center;
    cursor          : pointer;
    transition      : transform 0.2s ease, opacity 0.2s ease;
    user-select     : none;
    box-shadow      : 0 4px 16px rgba(0, 0, 0, 0.4);
}

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

.pc-chat-button:active {
    transform : scale(0.93);
}

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

.pc-chat-button svg {
    flex-shrink : 0;
    color       : #fff;
}

.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     : 10px;
    font-weight   : 700;
    line-height   : 18px;
    text-align    : center;
}

.pc-overlay {
    position   : fixed;
    inset      : 0;
    z-index    : 9997;
    background : rgba(0, 0, 0, 0.35);
    opacity    : 0;
    pointer-events : none;
    transition : opacity 0.25s 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;
    background      : var(--card);
    border-left     : 1px solid var(--transparent-5-w);
    display         : flex;
    flex-direction  : column;
    overflow        : hidden;
    color           : var(--text-default);
    font-size       : 14px;
    transform       : translateX(100%);
    transition      : transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

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

.pc-header__close {
    width           : 32px;
    height          : 32px;
    border-radius   : 50%;
    border          : none;
    background      : var(--transparent-5-w);
    color           : var(--text-secondary);
    display         : flex;
    align-items     : center;
    justify-content : center;
    cursor          : pointer;
    transition      : background 0.15s;
    flex-shrink     : 0;
    padding         : 0;
}

.pc-header__close:hover {
    background : var(--transparent-10-w);
    color      : var(--text-default);
}

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

.pc-tab {
    flex            : 1;
    padding         : 10px 6px;
    text-align      : center;
    font-size       : 13px;
    font-weight     : 500;
    color           : var(--text-secondary);
    cursor          : pointer;
    border-bottom   : 2px solid transparent;
    transition      : color 0.15s, border-color 0.15s;
    user-select     : none;
}

.pc-tab--active {
    color        : var(--span);
    border-color : var(--span);
}

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

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

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

.pc-messages::-webkit-scrollbar {
    width : 4px;
}

.pc-messages::-webkit-scrollbar-track {
    background : transparent;
}

.pc-messages::-webkit-scrollbar-thumb {
    background    : var(--transparent-10-w);
    border-radius : 4px;
}

.pc-message {
    display : flex;
    gap     : 8px;
    align-items : flex-start;
}

.pc-message__avatar {
    width         : 32px;
    height        : 32px;
    border-radius : 50%;
    flex-shrink   : 0;
    object-fit    : cover;
}

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

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

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

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

.pc-message__text {
    font-size     : 13px;
    color         : var(--text-default);
    word-break    : break-word;
    line-height   : 0.1;
}


.pc-empty-hint {
    text-align  : center;
    color       : var(--text-secondary);
    font-size   : 13px;
    margin      : auto;
    padding     : 24px;
}

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

.pc-send-form input {
    flex          : 1;
    padding       : 8px 12px;
    border-radius : 8px;
    border        : 1px solid var(--transparent-5-w);
    background    : var(--input-form);
    color         : var(--text-default);
    font-size     : 13px;
    outline       : none;
    transition    : border-color 0.15s;
}

.pc-send-form input::placeholder {
    color : var(--text-secondary);
}

.pc-send-form input:focus {
    border-color : var(--span);
}

.pc-send-form button {
    padding       : 8px 14px;
    border-radius : 8px;
    border        : none;
    background    : var(--span);
    color         : #fff;
    font-size     : 13px;
    font-weight   : 600;
    cursor        : pointer;
    white-space   : nowrap;
    transition    : opacity 0.15s;
}

.pc-send-form button:hover {
    opacity : 0.85;
}

.pc-auth-hint {
    text-align : center;
    color      : var(--text-secondary);
    font-size  : 13px;
    padding    : 12px;
    border-top : 1px solid var(--transparent-5-w);
    flex-shrink: 0;
}

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

.pc-promo-section + .pc-promo-section {
    border-top : none;
}

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

.pc-promo-row {
    display : flex;
    gap     : 8px;
}

.pc-promo-row input,
.pc-promo-grid input {
    flex          : 1;
    padding       : 8px 12px;
    border-radius : 8px;
    border        : 1px solid var(--transparent-5-w);
    background    : var(--input-form);
    color         : var(--text-default);
    font-size     : 13px;
    outline       : none;
    transition    : border-color 0.15s;
}

.pc-promo-row input::placeholder,
.pc-promo-grid input::placeholder {
    color : var(--text-secondary);
}

.pc-promo-row input:focus,
.pc-promo-grid input:focus {
    border-color : var(--span);
}

.pc-promo-row button {
    padding       : 8px 14px;
    border-radius : 8px;
    border        : none;
    background    : var(--span);
    color         : #fff;
    font-size     : 13px;
    font-weight   : 600;
    cursor        : pointer;
    white-space   : nowrap;
    transition    : opacity 0.15s;
}

.pc-promo-row button:hover {
    opacity : 0.85;
}

.pc-promo-grid {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 8px;
    margin-bottom         : 8px;
}

.pc-promo-grid label {
    display     : block;
    font-size   : 11px;
    color       : var(--text-secondary);
    margin-bottom : 3px;
}

.pc-promo-grid input {
    width  : 100%;
    flex   : unset;
}

.pc-promo-submit {
    width         : 100%;
    padding       : 9px;
    border-radius : 8px;
    border        : none;
    background    : var(--span);
    color         : #fff;
    font-size     : 13px;
    font-weight   : 600;
    cursor        : pointer;
    transition    : opacity 0.15s;
}

.pc-promo-submit:hover {
    opacity : 0.85;
}

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

.pc-promo-pane::-webkit-scrollbar {
    width : 4px;
}

.pc-promo-pane::-webkit-scrollbar-thumb {
    background    : var(--transparent-10-w);
    border-radius : 4px;
}

.pc-msg {
    margin    : 0;
    padding   : 6px 10px;
    border-radius : 6px;
    font-size : 12px;
    font-weight : 600;
}

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

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

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

.pc-promo-list::-webkit-scrollbar {
    width : 4px;
}

.pc-promo-list::-webkit-scrollbar-thumb {
    background    : var(--transparent-10-w);
    border-radius : 4px;
}

.pc-promo-item {
    display         : flex;
    align-items     : center;
    gap             : 8px;
    padding         : 8px 10px;
    border-radius   : 8px;
    background      : var(--card);
    margin-bottom   : 6px;
    font-size       : 13px;
}

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

.pc-promo-item__info {
    color       : var(--text-secondary);
    font-size   : 12px;
    white-space : nowrap;
}


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

.pc-message__name {
    color           : var(--span);
    font-weight     : 600;
    font-size       : 13px;
    text-decoration : none;
}

.pc-message__name:hover {
    text-decoration : underline;
}


.pc-message__quote {
    background    : var(--transparent-5-w, rgba(255,255,255,.05));
    border-left   : 2px solid var(--span);
    padding       : 3px 8px;
    border-radius : 4px;
    margin-bottom : 4px;
    font-size     : 12px;
    max-width     : 100%;
    overflow      : hidden;
    white-space   : nowrap;
    text-overflow : ellipsis;
}

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

.pc-message__quote-text {
    color : var(--text-secondary, #888);
}

.pc-reply-bar {
    display         : flex;
    align-items     : center;
    gap             : 8px;
    padding         : 6px 12px;
    background      : var(--transparent-5-w, rgba(255,255,255,.05));
    border-left     : 2px solid var(--span);
    flex-shrink     : 0;
}

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


.pc-promo-item__creator {
    font-size       : 11px;
    color           : var(--text-secondary, #888);
    text-decoration : none;
    margin-right    : auto;
}

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

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

.pc-my-promo-item {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : 8px;
    padding         : 6px 10px;
    background      : var(--transparent-5-w, rgba(255,255,255,.05));
    border-radius   : 6px;
    font-size       : 13px;
}

.pc-my-promo-item__code {
    font-weight : 700;
    letter-spacing : 0.5px;
    color       : var(--span);
    filter      : blur(5px);
    transition  : filter 0.2s ease;
    cursor      : pointer;
    user-select : none;
}

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

.pc-my-promo-item__meta {
    color     : var(--text-secondary, #888);
    font-size : 12px;
    flex-shrink: 0;
}

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