.pm-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    min-height: 680px;
    border: 1px solid var(--as-inbox-border, var(--as-common-panel-border, var(--as-panel-border, rgba(120, 160, 190, .25))));
    background: var(--as-inbox-bg, var(--as-common-panel-bg, var(--as-panel-bg, rgba(8, 14, 20, .72))));
    color: var(--as-inbox-text, var(--as-common-panel-text, var(--as-panel-text, inherit)));
}

.pm-sidebar {
    border-right: 1px solid var(--as-inbox-border, var(--as-common-panel-border, var(--as-panel-border, rgba(120, 160, 190, .22))));
    overflow: hidden;
    background: var(--as-inbox-sidebar-bg, color-mix(in srgb, var(--as-inbox-bg, var(--as-common-panel-bg, var(--as-panel-bg, #08141c))) 92%, #000));
}

.pm-tabs {
    display: flex;
    gap: 6px;
    padding: 10px;
    border-bottom: 1px solid var(--as-inbox-border, var(--as-common-panel-border, var(--as-panel-border, rgba(120, 160, 190, .22))));
}

.pm-tabs a {
    padding: 7px 10px;
    text-decoration: none;
    border: 1px solid var(--as-inbox-border, var(--as-common-panel-border, var(--as-panel-border, rgba(120, 160, 190, .28))));
    color: var(--as-inbox-link, var(--as-accent, inherit));
    background: var(--as-inbox-tab-bg, transparent);
}

.pm-tabs a.active {
    background: var(--as-inbox-active-bg, var(--as-common-button-bg, var(--as-accent, rgba(60, 95, 130, .35))));
    color: var(--as-inbox-active-text, var(--as-common-button-text, var(--as-accent-text, inherit)));
}

.pm-list {
    max-height: 610px;
    overflow: auto;
}

.pm-thread-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--as-inbox-soft-border, color-mix(in srgb, var(--as-inbox-border, var(--as-common-panel-border, #789fbe)) 55%, transparent));
}

.pm-thread-check {
    padding: 13px 0 0 8px;
}

.pm-thread-link {
    display: block;
    flex: 1;
    padding: 12px 10px;
    text-decoration: none;
    color: var(--as-inbox-text, var(--as-common-panel-text, var(--as-panel-text, inherit)));
}

.pm-thread-link.active {
    background: var(--as-inbox-thread-active-bg, color-mix(in srgb, var(--as-accent, #4f87b9) 32%, transparent));
}

.pm-thread-link:hover {
    background: var(--as-inbox-thread-hover-bg, color-mix(in srgb, var(--as-accent, #4f87b9) 20%, transparent));
}

.pm-thread-title {
    font-weight: bold;
    margin-bottom: 4px;
}

.pm-thread-meta {
    font-size: 11px;
    opacity: .75;
}

.pm-thread-preview {
    font-size: 12px;
    opacity: .85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 5px;
}

.pm-unread {
    color: var(--as-inbox-unread, #ff5959);
    font-weight: bold;
    margin-left: 5px;
}

.pm-chat {
    display: flex;
    flex-direction: column;
    min-height: 680px;
    background: var(--as-inbox-chat-bg, transparent);
}

.pm-chat-head {
    padding: 12px 16px;
    border-bottom: 1px solid var(--as-inbox-border, var(--as-common-panel-border, var(--as-panel-border, rgba(120, 160, 190, .22))));
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    background: var(--as-inbox-head-bg, color-mix(in srgb, var(--as-inbox-bg, var(--as-common-panel-bg, var(--as-panel-bg, #08141c))) 90%, #000));
}

.pm-chat-body {
    flex: 1;
    overflow: auto;
    padding: 18px 16px;
}

.pm-empty {
    text-align: center;
    opacity: .75;
    padding-top: 60px;
}

.pm-bubble-wrap {
    display: flex;
    margin: 10px 0;
}

.pm-bubble-wrap.mine {
    justify-content: flex-end;
}

.pm-bubble {
    max-width: 72%;
    padding: 10px 12px;
    border: 1px solid var(--as-inbox-bubble-border, var(--as-inbox-border, var(--as-common-panel-border, rgba(120, 160, 190, .2))));
    background: var(--as-inbox-bubble-bg, color-mix(in srgb, var(--as-inbox-bg, var(--as-common-panel-bg, #26374e)) 82%, #fff));
    color: var(--as-inbox-bubble-text, var(--as-inbox-text, var(--as-common-panel-text, inherit)));
    box-sizing: border-box;
    overflow-wrap: anywhere;
}

.pm-bubble-wrap.mine .pm-bubble {
    background: var(--as-inbox-mine-bg, color-mix(in srgb, var(--as-accent, #1a5c5a) 42%, var(--as-inbox-bg, var(--as-common-panel-bg, #1a5c5a))));
    color: var(--as-inbox-mine-text, var(--as-inbox-text, var(--as-common-panel-text, inherit)));
}

.pm-bubble-head {
    font-size: 11px;
    opacity: .8;
    margin-bottom: 6px;
}

.pm-compose {
    border-top: 1px solid var(--as-inbox-border, var(--as-common-panel-border, var(--as-panel-border, rgba(120, 160, 190, .22))));
    padding: 12px;
    display: flex;
    gap: 8px;
    align-items: flex-end;
    background: var(--as-inbox-compose-bg, color-mix(in srgb, var(--as-inbox-bg, var(--as-common-panel-bg, var(--as-panel-bg, #08141c))) 88%, #000));
}

.pm-compose textarea {
    flex: 1;
    min-height: 44px;
    max-height: 110px;
    resize: vertical;
    background: var(--as-inbox-input-bg, var(--as-common-panel-bg, var(--as-panel-bg, #111)));
    color: var(--as-inbox-input-text, var(--as-common-panel-text, var(--as-panel-text, inherit)));
    border-color: var(--as-inbox-border, var(--as-common-panel-border, var(--as-panel-border, #777)));
}

.pm-compose input[type=text] {
    width: 220px;
}

.pm-pager {
    display: flex;
    gap: 6px;
    justify-content: center;
    padding: 8px;
    flex-wrap: wrap;
}

.pm-pager a,
.pm-pager b {
    padding: 4px 7px;
    border: 1px solid var(--as-inbox-border, var(--as-common-panel-border, var(--as-panel-border, rgba(120, 160, 190, .25))));
    text-decoration: none;
    color: var(--as-inbox-link, var(--as-accent, inherit));
}

.pm-pager b {
    background: var(--as-inbox-active-bg, var(--as-common-button-bg, var(--as-accent, transparent)));
    color: var(--as-inbox-active-text, var(--as-common-button-text, var(--as-accent-text, inherit)));
}

.pm-delete-selected {
    padding: 10px;
    text-align: center;
}

@media (max-width: 760px) {
    .pm-shell {
        grid-template-columns: 1fr;
    }

    .pm-sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--as-inbox-border, var(--as-common-panel-border, var(--as-panel-border, rgba(120, 160, 190, .22))));
    }

    .pm-list {
        max-height: 250px;
    }

    .pm-bubble {
        max-width: 92%;
    }

    .pm-compose {
        display: block;
    }

    .pm-compose textarea,
    .pm-compose input[type=text] {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 8px;
    }
}