.contacts-block-module {
    --contacts-block-accent: #3c7575;
    --contacts-block-accent-dark: #326565;
    --contacts-block-panel: #f0f3f6;
    --contacts-block-surface: #fff;
    --contacts-block-border: #d7dfe6;
    --contacts-block-ink: #34495e;
    margin: 10px 0 12px;
    color: var(--contacts-block-ink);
    font-size: 13px;
}

.contacts-block-placeholder {
    box-sizing: border-box;
    height: 42px;
    margin: 10px 0 12px;
}

.contacts-block-module,
.contacts-block-module * {
    box-sizing: border-box;
}

.contacts-block-module [hidden],
.contacts-block-module .disp-n {
    display: none !important;
}

.contacts-block-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    color: #fff;
    background: var(--contacts-block-accent);
    border: 0;
    border-radius: 2px;
    box-shadow: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .16s ease;
}

.contacts-block-toggle:hover,
.contacts-block-toggle:focus {
    color: #fff;
    background: var(--contacts-block-accent-dark);
}

.contacts-block-toggle[aria-expanded="true"] {
    border-radius: 2px 2px 0 0;
}

.contacts-block-toggle:focus,
.contacts-block-contact:focus,
.contacts-block-profile-action:focus,
.contacts-block-support:focus {
    outline: 0;
}

.contacts-block-toggle:focus-visible,
.contacts-block-contact:focus-visible,
.contacts-block-profile-action:focus-visible,
.contacts-block-support:focus-visible {
    outline: 2px solid #f0b429;
    outline-offset: 2px;
}

.contacts-block-toggle-icon {
    flex: 0 0 auto;
    margin-right: 9px;
    color: #dce7f1;
    font-size: 14px;
}

.contacts-block-toggle-title {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contacts-block-online-summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 7px;
    min-width: 62px;
    height: 26px;
    margin-left: 8px;
    padding: 0 8px;
    color: #536a6a;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(21, 53, 53, .24), inset 0 0 0 1px rgba(44, 91, 91, .06);
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}

.contacts-block-online-dot {
    flex: 0 0 9px;
    width: 9px;
    height: 9px;
    border: 0;
    border-radius: 50%;
}

.contacts-block-online-summary.is-active .contacts-block-online-dot {
    background: #25c763;
    box-shadow: 0 0 0 3px rgba(37, 199, 99, .18);
}

.contacts-block-online-summary.is-empty .contacts-block-online-dot {
    background: #eb4545;
    box-shadow: 0 0 0 3px rgba(235, 69, 69, .18);
}

.contacts-block-online-ratio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    height: 16px;
    font-variant-numeric: tabular-nums;
    line-height: 16px;
}

.contacts-block-online-ratio strong {
    min-width: 9px;
    font-size: 14px;
    font-weight: 700;
    line-height: 16px;
    text-align: right;
}

.contacts-block-online-summary.is-active .contacts-block-online-ratio strong {
    color: #16733b;
}

.contacts-block-online-summary.is-empty .contacts-block-online-ratio strong {
    color: #bd3030;
}

.contacts-block-online-divider {
    margin: 0 1px;
    color: #a3b0b0;
    font-size: 10px;
    font-weight: 400;
    line-height: 16px;
}

.contacts-block-online-total {
    color: #526767;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
}

.contacts-block-chevron {
    margin-left: 9px;
    color: #dce7f1;
    font-size: 9px;
    transition: transform .16s ease;
}

.contacts-block-toggle[aria-expanded="true"] .contacts-block-chevron {
    transform: rotate(180deg);
}

.contacts-block-panel {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--contacts-block-panel);
    border: 1px solid var(--contacts-block-border);
    border-top: 0;
    border-radius: 0 0 2px 2px;
    box-shadow: 0 1px 2px rgba(26, 39, 52, .08);
}

.contacts-block-content {
    padding: 5px;
}

.contacts-block-list {
    margin: 0;
    max-height: var(--contacts-block-max-height, 320px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #b7c1ca transparent;
}

.contacts-block-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-height: 58px;
    margin: 0 0 4px;
    padding: 5px;
    overflow: hidden;
    background: var(--contacts-block-surface);
    border: 1px solid #dce3e8;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(31, 48, 64, .035);
    transition: border-color .14s ease, background-color .14s ease;
}

.contacts-block-item:last-child {
    margin-bottom: 0;
}

.contacts-block-item:hover {
    background: #fbfcfd;
    border-color: #c9d5de;
}

.contacts-block-person {
    display: contents;
}

.contacts-block-avatar {
    position: relative;
    display: block;
    width: 38px;
    height: 38px;
}

.contacts-block-avatar img {
    display: block;
    width: 38px;
    height: 38px;
    max-width: none;
    padding: 2px;
    background: var(--contacts-block-accent);
    border: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
    object-fit: cover;
}

.contacts-block-status {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(42, 58, 70, .12);
}

.contacts-block-status.is-online {
    background: #25cf69;
    box-shadow: 0 0 0 1px rgba(26, 117, 63, .26), 0 0 5px rgba(37, 207, 105, .45);
}

.contacts-block-status.is-offline {
    background: #f05252;
    box-shadow: 0 0 0 1px rgba(145, 39, 39, .24), 0 0 5px rgba(240, 82, 82, .34);
}

.contacts-block-status.is-offline::after {
    position: absolute;
    top: 4px;
    left: 3px;
    width: 4px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
    content: '';
}

.contacts-block-info {
    min-width: 0;
    flex: 1 1 auto;
    line-height: 16px;
}

.contacts-block-name,
.contacts-block-name:hover,
.contacts-block-name:focus {
    display: block;
    overflow: hidden;
    color: #2f587f;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contacts-block-role {
    display: block;
    overflow: hidden;
    color: #667584;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contacts-block-server {
    display: block;
    overflow: hidden;
    color: #3c7575;
    font-size: 11px;
    font-weight: 600;
    line-height: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contacts-block-contacts {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 3px;
    max-width: 72px;
    margin: 0;
}

.contacts-block-contact,
.contacts-block-contact:hover,
.contacts-block-contact:focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    width: 22px;
    min-width: 22px;
    height: 22px;
    padding: 0;
    color: #fff;
    border: 0;
    border-radius: 3px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 22px;
    text-decoration: none;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .13);
    cursor: pointer;
}

.contacts-block-contact-vk {
    background: #45688e;
}

.contacts-block-contact-telegram {
    background: #2a9bd8;
}

.contacts-block-contact-discord {
    background: #5865f2;
}

.contacts-block-contact-profile {
    background: #557878;
}

.contacts-block-contact-fb {
    background: #365899;
}

.contacts-block-contact-skype {
    background: #00aff0;
}

.contacts-block-contact:hover {
    color: #fff;
    filter: brightness(1.08);
}

.contacts-block-contact-icon {
    display: block;
    width: 14px;
    height: 14px;
    pointer-events: none;
}

.contacts-block-contact.is-copied {
    color: #fff;
    background: #2f7d4c;
}

.contacts-block-profile-action {
    flex: 0 0 auto;
    color: #5f7080;
    font-size: 11px;
    text-decoration: none;
    white-space: nowrap;
}

.contacts-block-profile-action:hover,
.contacts-block-profile-action:focus {
    color: #617181;
    text-decoration: underline;
}

.contacts-block-empty {
    padding: 14px 10px;
    color: #748291;
    text-align: center;
}

.contacts-block-footer {
    padding: 7px;
    background: #f1f5f5;
    border-top: 1px solid #dfe5ea;
}

.contacts-block-support,
.contacts-block-support:hover,
.contacts-block-support:focus {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-height: 36px;
    padding: 6px 10px;
    color: #326565;
    background: #e4f0ef;
    border: 1px solid #b8d4d1;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    transition: color .14s ease, background-color .14s ease, border-color .14s ease;
}

.contacts-block-support:hover {
    color: #fff;
    background: var(--contacts-block-accent);
    border-color: var(--contacts-block-accent-dark);
    text-decoration: none;
}

.contacts-block-support-icon {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
}

.contacts-block-live {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(0 0 0 0);
}

.contacts-block-copy-helper {
    position: fixed;
    top: -1000px;
    left: -1000px;
}

@media (max-width: 767px) {
    .contacts-block-placeholder {
        height: 44px;
    }

    .contacts-block-toggle {
        min-height: 44px;
    }

    .contacts-block-contact,
    .contacts-block-profile-action,
    .contacts-block-support {
        min-height: 34px;
    }

    .contacts-block-contact {
        flex-basis: 34px;
        width: 34px;
        min-width: 34px;
        line-height: 32px;
    }

    .contacts-block-contacts {
        max-width: 108px;
    }

    .contacts-block-profile-action,
    .contacts-block-support {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 360px) {
    .contacts-block-toggle {
        padding-right: 9px;
        padding-left: 9px;
    }

    .contacts-block-toggle-icon {
        margin-right: 7px;
    }

    .contacts-block-online-summary {
        margin-left: 6px;
        min-width: 58px;
        padding-right: 6px;
        padding-left: 6px;
        gap: 6px;
    }

    .contacts-block-chevron {
        margin-left: 6px;
    }

    .contacts-block-item {
        grid-template-columns: 38px minmax(0, 1fr) auto;
    }

    .contacts-block-contact {
        flex-basis: 30px;
        width: 30px;
        min-width: 30px;
        height: 30px;
        line-height: 28px;
    }

    .contacts-block-contacts {
        max-width: 96px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contacts-block-toggle,
    .contacts-block-chevron,
    .contacts-block-item {
        transition: none;
    }
}