.cl-feed-media-viewer {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    overflow: hidden;
    background: #000;
    color: #fff;
}

.cl-feed-media-viewer.is-share-background {
    z-index: 10000;
}

.cl-feed-media-viewer.is-open {
    display: block;
}

.cl-feed-media-viewer.has-comments .cl-feed-media-viewer__actions {
    display: none;
}

.cl-feed-media-viewer__backdrop,
.cl-feed-media-viewer__viewport {
    position: absolute;
    inset: 0;
}

.cl-feed-media-viewer__viewport {
    z-index: 1;
    overflow: hidden;
    outline: 0;
    touch-action: none;
}

.cl-feed-media-viewer__track {
    width: 100%;
    height: 100%;
    transition: transform .28s ease;
    will-change: transform;
}

.cl-feed-media-viewer__group {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.cl-feed-media-viewer__group-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform .24s ease;
    will-change: transform;
}

.cl-feed-media-viewer.is-initializing .cl-feed-media-viewer__track,
.cl-feed-media-viewer.is-initializing .cl-feed-media-viewer__group-track {
    transition: none;
}

.cl-feed-media-viewer__slide {
    display: flex;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    flex: 0 0 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cl-feed-media-viewer__slide img,
.cl-feed-media-viewer__slide video {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
}

.cl-feed-media-viewer__slide img {
    cursor: zoom-in;
    transition: transform .18s ease;
}

.cl-feed-media-viewer__slide.is-zoomed img {
    cursor: zoom-out;
    transform: scale(var(--cl-feed-media-scale, 1.5));
}

.cl-feed-media-viewer__slide img.is-pending {
    visibility: hidden;
}

.cl-feed-media-viewer__nav,
.cl-feed-media-viewer__zoom {
    position: absolute;
    z-index: 3;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 0, 0, .58);
    line-height: 44px;
    text-align: center;
    cursor: pointer;
}

.cl-feed-media-viewer__nav {
    top: 50%;
    margin-top: -22px;
    font-size: 28px;
}

.cl-feed-media-viewer__nav--prev {
    left: 18px;
}

.cl-feed-media-viewer__nav--next {
    right: 18px;
}

.cl-feed-media-viewer__nav:disabled {
    opacity: .24;
    cursor: default;
}

.cl-feed-media-viewer__zoom {
    right: 68px;
    bottom: 20px;
    font-size: 24px;
}

.cl-feed-media-viewer__slide--collage img {
    object-fit: contain;
}

.cl-feed-media-viewer__slide video {
    width: 100%;
    height: 100%;
}

/* Keep the native video timeline clear of the viewer action rail. */
.cl-feed-media-viewer__slide--video video {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100% - 120px);
    object-fit: contain;
}

.cl-feed-media-viewer__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 0, 0, .58);
    font-size: 28px;
    line-height: 40px;
    cursor: pointer;
}

.cl-feed-media-viewer__top-controls {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cl-feed-media-viewer__top-controls .cl-feed-media-viewer__more-wrap {
    position: relative;
}

.cl-feed-media-viewer__top-controls .cl-feed-media-viewer__more-wrap > button,
.cl-feed-media-viewer__top-controls .cl-feed-media-viewer__close {
    position: static;
    width: 40px;
    min-width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    color: #fff !important;
    background: rgba(0, 0, 0, .62);
    font-size: 24px;
    line-height: 38px;
    text-align: center;
}

.cl-feed-media-viewer__top-controls [data-cl-feed-media-action-icon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
}

.cl-feed-media-viewer__top-controls .cl-feed-media-viewer__more-wrap > button:hover,
.cl-feed-media-viewer__top-controls .cl-feed-media-viewer__close:hover {
    background: rgba(255, 255, 255, .2);
}

.cl-feed-media-viewer__top-controls svg {
    width: 19px;
    height: 19px;
    color: #fff !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

.cl-feed-media-viewer__top-controls svg path,
.cl-feed-media-viewer__top-controls svg rect,
.cl-feed-media-viewer__top-controls svg circle {
    fill: currentColor !important;
    stroke: currentColor !important;
}

.cl-feed-media-viewer__counter {
    position: absolute;
    top: 24px;
    left: 20px;
    z-index: 3;
    padding: 4px 9px;
    border-radius: 12px;
    color: #fff;
    background: rgba(0, 0, 0, .5);
    font-size: 13px;
}

.cl-feed-media-viewer__post-meta {
    position: absolute;
    left: 20px;
    bottom: 74px;
    z-index: 4;
    width: min(540px, calc(100vw - 40px));
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 12px;
    color: #fff;
    background: rgba(0, 0, 0, .62);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .24);
    backdrop-filter: blur(10px);
}

.cl-feed-media-viewer__post-meta.is-video-post {
    top: 68px;
    bottom: auto;
}

.cl-feed-media-viewer__author-row {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.cl-feed-media-viewer__author-link {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
    color: inherit;
    text-decoration: none;
}

.cl-feed-media-viewer__author-avatar {
    display: block;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: 2px solid rgba(255, 255, 255, .82);
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    object-fit: cover;
}

.cl-feed-media-viewer__author-name {
    max-width: 250px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cl-feed-media-viewer__follow {
    min-width: 72px;
    height: 30px;
    margin-left: auto;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 15px;
    color: #fff;
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    line-height: 28px;
    cursor: pointer;
}

.cl-feed-media-viewer__follow.main-inline,
.cl-feed-media-viewer__follow.is-following {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .2);
}

.cl-feed-media-viewer__follow:disabled {
    opacity: .62;
    cursor: wait;
}

.cl-feed-media-viewer__post-text {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.48;
}

.cl-feed-media-viewer__post-text-body {
    max-height: 4.4em;
    overflow: hidden;
    color: rgba(255, 255, 255, .94);
    overflow-wrap: anywhere;
    white-space: normal;
}

.cl-feed-media-viewer__post-text.is-expanded .cl-feed-media-viewer__post-text-body {
    max-height: min(30vh, 240px);
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.cl-feed-media-viewer__post-text-body a {
    color: inherit;
    text-decoration: underline;
}

.cl-feed-media-viewer__post-text-toggle {
    display: block;
    margin-top: 3px;
    padding: 0;
    border: 0;
    color: rgba(255, 255, 255, .72);
    background: transparent;
    font-size: 12px;
    line-height: 1.35;
    cursor: pointer;
}

.cl-feed-media-viewer__post-text-toggle:hover {
    color: #fff;
}

.cl-feed-media-viewer__actions {
    position: absolute;
    left: 50%;
    bottom: 20px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    transform: translateX(-50%);
}

.cl-feed-media-viewer__actions button,
.cl-feed-media-viewer__more-wrap > button {
    display: inline-flex;
    min-width: 42px;
    height: 38px;
    padding: 0 10px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 19px;
    color: #fff;
    background: rgba(0, 0, 0, .62);
    cursor: pointer;
}

.cl-feed-media-viewer__actions button:hover,
.cl-feed-media-viewer__actions button.liked,
.cl-feed-media-viewer__actions button.reposted {
    background: rgba(255, 255, 255, .2);
}

.cl-feed-media-viewer__views {
    display: inline-flex;
    box-sizing: border-box;
    min-width: 42px;
    height: 38px;
    padding: 0 10px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 19px;
    color: #fff;
    background: rgba(0, 0, 0, .62);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
}

.cl-feed-media-viewer__views svg,
.post-data-layout__views-icon svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
    stroke: currentColor;
}

.post-data-layout__views {
    display: inline-flex;
    margin-top: 7px;
    align-items: center;
    gap: 4px;
    color: #8a8f98;
    font-size: 12px;
    line-height: 1;
}

.post-data-layout__views-icon {
    display: inline-flex;
    align-items: center;
}

.post-data-layout__controls .post-data-layout__views {
    min-width: 40px;
    height: 40px;
    margin: 0;
    gap: 2px;
    color: var(--cl-secondary-text-color, #8a8f98);
    font-size: 14px;
}

.post-data-layout__controls .post-data-layout__views-icon {
    width: 40px;
    height: 40px;
    justify-content: center;
    border-radius: 50%;
}

.post-data-layout__controls .post-data-layout__views-icon svg {
    width: 20px;
    height: 20px;
}

.post-data-layout__publisher > button.ctrls-item.dropleft {
    display: inline-flex;
    width: 32px;
    height: 32px;
    margin: 0 0 0 6px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    color: var(--cl-secondary-text-color, #8a8f98);
    background: transparent;
    cursor: pointer;
}

.post-data-layout__publisher > button.ctrls-item.dropleft:hover,
.post-data-layout__publisher > button.ctrls-item.dropleft:focus {
    color: var(--cl-primary-text-color, #222);
    background: var(--cl-secondary-bg-color, rgba(0, 0, 0, .06));
}

.post-data-layout__publisher > button.ctrls-item.dropleft .dropdown-toggle.ctrls-item__icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
}

.post-data-layout__publisher > button.ctrls-item.dropleft svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    stroke: currentColor;
}

@media (max-width: 767px) {
    /* The legacy feed rule aligns this row to the top on small screens. Keep the menu centered with the post time. */
    body .post-list-item .post-data-layout__publisher {
        align-items: center !important;
    }
}

.cl-feed-media-viewer__actions svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
}

.cl-feed-media-viewer__actions svg path,
.cl-feed-media-viewer__actions svg rect,
.cl-feed-media-viewer__actions svg circle {
    fill: currentColor !important;
    stroke: currentColor !important;
}

.cl-feed-media-viewer__more-wrap {
    position: relative;
}

.cl-feed-media-viewer__menu,
.cl-feed-media-viewer__more-wrap .dropdown-menu {
    right: 0;
    left: auto;
    max-height: min(70vh, 520px);
    overflow-y: auto;
}

.cl-feed-media-viewer__menu {
    position: fixed !important;
    width: min(290px, calc(100vw - 24px));
    min-width: 0;
    max-width: calc(100vw - 24px);
    margin: 0 !important;
    transform: none !important;
    z-index: 20000 !important;
}

.cl-feed-media-viewer__thread-menu {
    z-index: 20000 !important;
}

.cl-feed-media-viewer-reply-modal {
    z-index: 20000 !important;
}

.cl-feed-media-viewer-edit-modal {
    z-index: 20000 !important;
}

.cl-feed-media-viewer-edit-modal .modal-dialog {
    max-width: min(560px, calc(100vw - 24px));
    margin: 1.75rem auto;
}

.cl-feed-media-viewer-edit-modal .modal-content {
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}

body.cl-feed-media-viewer-edit-backdrop .modal-backdrop {
    z-index: 19990 !important;
}

/* The viewer is its own stacking context; keep it above the Bootstrap edit backdrop. */
body.cl-feed-media-viewer-edit-backdrop .cl-feed-media-viewer {
    z-index: 20000;
}

body.cl-feed-media-viewer-overlay-backdrop .cl-feed-media-viewer {
    z-index: 20000;
}

.cl-feed-media-viewer-external-modal {
    z-index: 20000 !important;
}

body.cl-feed-media-viewer-open .jq-toast-wrap {
    z-index: 21000 !important;
}

.cl-feed-media-viewer__comments {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    display: flex;
    width: min(420px, 92vw);
    flex-direction: column;
    background: #fff;
    border-left: 1px solid #e5e7eb;
    color: #212121;
    transition: transform .22s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}

.cl-feed-media-viewer__comments.is-dragging {
    transition: none;
}

.cl-feed-media-viewer__comments[hidden] {
    display: none;
}

.cl-feed-media-viewer__comments-head {
    position: relative;
    display: flex;
    min-height: 48px;
    padding: 0 52px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}

.cl-feed-media-viewer__comments-head > span {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    color: #222;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cl-feed-media-viewer__comments-head button {
    position: absolute;
    top: 7px;
    right: 12px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #4b5563;
    background: #f1f3f5;
    font-size: 24px;
    cursor: pointer;
}

.cl-feed-media-viewer__comments-head .cl-feed-media-viewer__comments-back {
    right: auto;
    left: 12px;
    font-size: 28px;
    line-height: 30px;
}

.cl-feed-media-viewer__comments-list {
    flex: 1 1 auto;
    padding: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #f7f8fa;
    touch-action: pan-y;
}

.cl-feed-media-viewer__comments-state {
    min-height: 34px;
    flex: 0 0 34px;
    border-bottom: 1px solid #e5e7eb;
    background: #f7f8fa;
}

.cl-feed-media-viewer__comments-state:not([hidden])::after {
    display: block;
    width: 16px;
    height: 16px;
    margin: 9px auto;
    border: 2px solid #d1d5db;
    border-top-color: #4b5563;
    border-radius: 50%;
    content: "";
    animation: cl-feed-media-viewer-spin .7s linear infinite;
}

.cl-feed-media-viewer__comments-state.is-error:not([hidden])::after {
    width: 8px;
    height: 8px;
    margin: 13px auto;
    border: 0;
    border-radius: 50%;
    background: #9ca3af;
    animation: none;
}

@keyframes cl-feed-media-viewer-spin {
    to { transform: rotate(360deg); }
}

.cl-feed-media-viewer__comments-list .post-list-item {
    margin-bottom: 8px;
    color: #222;
}

.cl-feed-media-viewer__comments-list .post-list-item,
.cl-feed-media-viewer__comments-list .post-list-item * {
    box-sizing: border-box;
}

.cl-feed-media-viewer__comments-list .post-list-item {
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 8px;
    background: #fff;
}

.cl-feed-media-viewer__comments-list .post-data {
    display: flex;
    gap: 9px;
}

.cl-feed-media-viewer__comments-list .post-data__avatar {
    flex: 0 0 34px;
}

.cl-feed-media-viewer__comments-list .avatar-holder,
.cl-feed-media-viewer__comments-list .avatar-holder img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
}

.cl-feed-media-viewer__comments-list .post-data__content {
    min-width: 0;
    flex: 1 1 auto;
}

.cl-feed-media-viewer__comments-list .post-data-layout__publisher {
    display: flex;
    min-width: 0;
    width: 100%;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.cl-feed-media-viewer__comments-list .post-data-layout__publisher .post-username,
.cl-feed-media-viewer__comments-list .post-data-layout__publisher .post-username a,
.cl-feed-media-viewer__comments-list .post-data-layout__publisher .post-username .user-name-holder,
.cl-feed-media-viewer__comments-list .post-data-layout__publisher .post-username .user-name-holder__name {
    color: #212121 !important;
    text-decoration: none;
}

.cl-feed-media-viewer__comments-list .thread-data .post-data-layout__publisher > button.dropleft {
    display: inline-flex;
    width: 30px;
    height: 30px;
    margin-left: auto;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    color: #606770;
    background: transparent;
}

.cl-feed-media-viewer__comments-list .thread-data .post-data-layout__publisher > button.dropleft .dropdown-toggle {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
}

.cl-feed-media-viewer__comments-list .publication-text {
    margin-top: 6px;
    color: #212121;
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.cl-feed-media-viewer__comments-list .post-data-layout__controls,
.cl-feed-media-viewer__comments-list .post-data-layout__content > .publication-image,
.cl-feed-media-viewer__comments-list .post-data-layout__content > .publication-images-collage,
.cl-feed-media-viewer__comments-list .post-data-layout__content > .publication-video {
    margin-top: 7px;
}

.cl-feed-media-viewer__comments-list .post-data-layout__controls {
    display: flex;
    gap: 8px;
}

.cl-feed-media-viewer__comments-list .ctrls-item {
    border: 0;
    background: transparent;
    color: #606770;
    font-size: 12px;
}

.pubbox-images__list-item {
    position: relative;
}

.pubbox-images__list-item .edit-preview,
.pubbox-images__list-item .delete-preview {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    width: 30px;
    height: 30px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(17, 24, 39, .16);
    border-radius: 8px;
    color: #1f2937;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
    cursor: pointer;
}

.pubbox-images__list-item .edit-preview:hover,
.pubbox-images__list-item .edit-preview:focus-visible {
    color: #111827;
    background: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
}

.pubbox-images__list-item .delete-preview {
    border-color: rgba(0, 0, 0, .22);
    border-radius: 50%;
    color: #fff;
    background: rgba(17, 24, 39, .78);
}

.pubbox-images__list-item .delete-preview {
    top: 6px;
    right: 6px;
}

.pubbox-images__list-item .edit-preview {
    right: 42px;
    bottom: 6px;
}

.pubbox-images__list-item .edit-preview svg,
.pubbox-images__list-item .delete-preview svg {
    width: 16px;
    height: 16px;
}

.pubbox-images__list-item .edit-preview svg {
    stroke: currentColor;
}

.pubbox-collage-button {
    display: inline-flex;
    min-height: 34px;
    margin-top: 8px;
    padding: 6px 12px;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--cl-primary-border-color, #dfe3e8);
    border-radius: 6px;
    color: var(--cl-primary-text-color, #212121);
    background: var(--cl-primary-bg-color, #fff);
    cursor: pointer;
}

.pubbox-collage-button svg {
    width: 18px;
    height: 18px;
}

.cl-image-editor {
    position: fixed;
    z-index: 30000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cl-image-editor__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .64);
}

.cl-image-editor__panel {
    position: relative;
    z-index: 1;
    display: flex;
    width: min(720px, calc(100vw - 24px));
    max-height: min(860px, calc(100vh - 24px));
    flex-direction: column;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    color: #212121;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}

.cl-image-editor__header,
.cl-image-editor__footer {
    display: flex;
    min-height: 48px;
    padding: 8px 14px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e5e7eb;
}

.cl-image-editor__footer {
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid #e5e7eb;
    border-bottom: 0;
}

.cl-image-editor__close {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #4b5563;
    background: #f1f3f5;
    font-size: 22px;
    cursor: pointer;
}

.cl-image-editor__canvas-wrap {
    display: flex;
    min-height: 280px;
    max-height: 56vh;
    padding: 16px;
    align-items: center;
    justify-content: center;
    overflow: auto;
    background: #111;
}

.cl-image-editor__canvas-wrap canvas {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 52vh;
    background: #222;
}

.cl-image-editor__canvas-stage {
    position: relative;
    display: inline-flex;
    max-width: 100%;
    max-height: 52vh;
    line-height: 0;
}

.cl-image-editor__crop-surface {
    position: absolute;
    inset: 0;
    cursor: crosshair;
    touch-action: none;
}

.cl-image-editor__crop-box {
    position: absolute;
    border: 2px solid #fff;
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .5);
    pointer-events: none;
}

.cl-image-editor__controls {
    display: flex;
    padding: 10px 14px;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
}

.cl-image-editor__control-group {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
}

.cl-image-editor__label {
    flex: 0 0 auto;
    min-width: 48px;
    color: #6b7280;
    font-size: 12px;
}

.image-editor-filter,
.image-editor-ratio {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid #dfe3e8;
    border-radius: 15px;
    color: #374151;
    background: #fff;
    font-size: 12px;
    cursor: pointer;
}

.image-editor-filter.is-active,
.image-editor-ratio.is-active {
    border-color: #111827;
    color: #fff;
    background: #111827;
}

.image-editor-icon-button {
    display: inline-flex;
    width: 34px;
    height: 34px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    color: #374151;
    background: #fff;
    cursor: pointer;
}

.image-editor-icon-button:hover,
.image-editor-icon-button:focus-visible,
.image-editor-icon-button.is-active {
    border-color: #111827;
    color: #111827;
    background: #f3f4f6;
}

.image-editor-icon-button svg {
    width: 19px;
    height: 19px;
    stroke: currentColor;
}

/* Keep the original thread page hierarchy and connector lines inside the drawer. */
.cl-feed-media-viewer__comments-list.is-thread-page {
    padding: 0;
    background: #fff;
}

.cl-feed-media-viewer__comments-list .thread-chain,
.cl-feed-media-viewer__comments-list .thread-data,
.cl-feed-media-viewer__comments-list .thread-replys {
    background: #fff;
}

.cl-feed-media-viewer__comments-list .thread-chain .post-list-item,
.cl-feed-media-viewer__comments-list .thread-replys .timeline-posts-ls-group-inner .post-list-item {
    position: relative;
    margin-bottom: 0;
    padding: 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.cl-feed-media-viewer__comments-list .thread-chain .post-list-item::after,
.cl-feed-media-viewer__comments-list .thread-replys .timeline-posts-ls-group-inner .post-list-item::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 58px;
    border-bottom: 1px solid #e5e7eb;
    content: "";
}

.cl-feed-media-viewer__comments-list .thread-chain .post-data__avatar,
.cl-feed-media-viewer__comments-list .thread-replys .timeline-posts-ls-group-inner .post-data__avatar {
    position: relative;
}

.cl-feed-media-viewer__comments-list .thread-chain .post-data__avatar::before,
.cl-feed-media-viewer__comments-list .thread-replys .timeline-posts-ls-group-inner .post-data__avatar::before {
    position: absolute;
    top: 34px;
    bottom: -12px;
    left: 16px;
    width: 2px;
    border-radius: 4px;
    background: #cbd5e1;
    content: "";
}

.cl-feed-media-viewer__comments-list .thread-chain .post-list-item:last-child::after,
.cl-feed-media-viewer__comments-list .thread-chain .post-list-item:last-child .post-data__avatar::before,
.cl-feed-media-viewer__comments-list .thread-replys .timeline-posts-ls-group-inner .post-list-item:last-child::after,
.cl-feed-media-viewer__comments-list .thread-replys .timeline-posts-ls-group-inner .post-list-item:last-child .post-data__avatar::before {
    display: none;
}

.cl-feed-media-viewer__comments-list .thread-data {
    border-bottom: 2px solid #dbe3ec;
}

.cl-feed-media-viewer__comments-list .thread-replys .timeline-posts-ls-group {
    border-top: 1px solid #e5e7eb;
}

.cl-feed-media-viewer__comments-list .thread-replys .timeline-posts-ls-group:first-child {
    border-top: 0;
}

.cl-feed-media-viewer__comments-list .timeline-placeholder {
    padding: 48px 20px;
    text-align: center;
}

.cl-feed-media-viewer__comments-list .timeline-placeholder .icon {
    display: flex;
    margin-bottom: 16px;
    justify-content: center;
}

.cl-feed-media-viewer__comments-list .timeline-placeholder .icon__bg {
    display: flex;
    width: 68px;
    height: 68px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f1f3f5;
}

.cl-feed-media-viewer__comments-list .timeline-placeholder .icon__bg svg {
    width: 30px;
    height: 30px;
}

.cl-feed-media-viewer__comments-list .timeline-placeholder .pl-message {
    display: flex;
    margin-bottom: 14px;
    align-items: center;
    flex-direction: column;
}

.cl-feed-media-viewer__comments-list .timeline-placeholder .pl-message h4 {
    margin: 0 0 10px;
    color: #212121;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.cl-feed-media-viewer__comments-list .timeline-placeholder .pl-message p {
    max-width: 92%;
    margin: 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.55;
    text-align: center;
    overflow-wrap: anywhere;
}

.cl-feed-media-viewer__comments-list .timeline-placeholder .pl-message p a {
    color: #2563eb;
    font-weight: 500;
    text-decoration: underline;
}

.cl-feed-media-viewer__comments-list .post-data-layout__target .post-reply {
    display: block;
    margin-top: 4px;
    line-height: 1.35;
}

.cl-feed-media-viewer__comments-list .post-data-layout__target .post-reply span {
    color: #6b7280;
    font-size: 12px;
    line-height: 1.35;
}

.cl-feed-media-viewer__comments-list .post-data-layout__target .post-reply span a {
    color: #2563eb;
}

.cl-feed-media-viewer__comments-list .thread-data .post-data-layout__date {
    display: flex;
    min-height: 28px;
    margin-top: 10px;
    align-items: center;
    gap: 8px;
}

.cl-feed-media-viewer__comments-list .thread-data .publication-date,
.cl-feed-media-viewer__comments-list .thread-data .publication-date span {
    color: #6b7280;
    font-size: 12px;
}

.cl-feed-media-viewer__comments-list .thread-data .publication-privacy {
    position: relative;
    margin-left: auto;
}

.cl-feed-media-viewer__comments-list .thread-data .privacy-settings {
    position: relative;
    padding: 0;
    border: 0;
    color: #6b7280;
    background: transparent;
    line-height: 1;
}

.cl-feed-media-viewer__comments-list .thread-data .privacy-settings .dropdown-toggle {
    display: inline-flex;
    min-height: 30px;
    padding: 0;
    align-items: center;
    background: transparent;
}

.cl-feed-media-viewer__comments-list .thread-data .privacy-settings .dropdown-toggle::before,
.cl-feed-media-viewer__comments-list .thread-data .privacy-settings .dropdown-toggle::after {
    display: none;
}

.cl-feed-media-viewer__comments-list .thread-data .privacy-settings .dropdown-toggle svg {
    width: 16px;
    height: 16px;
}

.cl-feed-media-viewer__comments-list .thread-data .privacy-settings .dropdown-toggle .label {
    margin-left: 5px;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.2;
}

.cl-feed-media-viewer__comments-list .thread-data .privacy-settings .dropdown-menu {
    position: absolute;
    z-index: 21000;
    top: 100%;
    right: 0;
    left: auto;
    display: none;
    width: 290px;
    min-width: 0;
    max-width: calc(100vw - 32px);
    padding: 5px 0;
    border: 0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}

.cl-feed-media-viewer__comments-list .thread-data .privacy-settings .dropdown-menu.show {
    display: block;
}

.cl-feed-media-viewer__comments-list .thread-data .privacy-settings .dropdown-item {
    display: flex;
    min-height: 42px;
    padding: 9px 14px;
    align-items: center;
    gap: 8px;
    color: #212121;
    font-size: 13px;
    line-height: 1.25;
    white-space: normal;
}

.cl-feed-media-viewer__comments-list .thread-data .privacy-settings .dropdown-item:hover,
.cl-feed-media-viewer__comments-list .thread-data .privacy-settings .dropdown-item:active {
    background: #f3f4f6;
}

.cl-feed-media-viewer__comments-list .thread-data .privacy-settings .dropdown-divider {
    margin: 2px 0;
    border-top: 1px solid #e5e7eb;
}

.cl-feed-media-viewer__comments-list .timeline-data-loader {
    border-top: 1px solid #e5e7eb;
    background: #fff;
}

.cl-feed-media-viewer__comments-list .timeline-data-loader__btn {
    display: block;
    width: 100%;
    padding: 12px;
    border: 0;
    color: #6b7280;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
}

@media (max-width: 767px) {
    .cl-feed-media-viewer__nav {
        display: none;
    }

    .cl-feed-media-viewer__zoom {
        display: none;
    }

    .cl-feed-media-viewer__slide--collage img {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: cover;
    }

    .cl-feed-media-viewer__close {
        top: 12px;
        right: 12px;
    }

    .cl-feed-media-viewer__top-controls {
        top: 12px;
        right: 12px;
        gap: 6px;
    }

    .cl-feed-media-viewer__top-controls .cl-feed-media-viewer__more-wrap > button,
    .cl-feed-media-viewer__top-controls .cl-feed-media-viewer__close {
        width: 36px;
        min-width: 36px;
        height: 36px;
        line-height: 34px;
    }

    .cl-feed-media-viewer__counter {
        top: 20px;
        left: 14px;
    }

    .cl-feed-media-viewer__post-meta {
        right: 12px;
        bottom: 58px;
        left: 12px;
        width: auto;
        padding: 8px 10px;
        border-radius: 10px;
    }

    .cl-feed-media-viewer__post-meta.is-video-post {
        top: 62px;
        bottom: auto;
    }

    .cl-feed-media-viewer__author-avatar {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .cl-feed-media-viewer__author-name {
        max-width: 170px;
        font-size: 13px;
    }

    .cl-feed-media-viewer__post-text {
        font-size: 12px;
    }

    .cl-feed-media-viewer__post-text.is-expanded .cl-feed-media-viewer__post-text-body {
        max-height: 28vh;
    }

    .cl-feed-media-viewer__actions {
        right: 12px;
        bottom: 12px;
        left: 12px;
        justify-content: center;
        transform: none;
    }

    .cl-feed-media-viewer__actions button,
    .cl-feed-media-viewer__more-wrap > button {
        min-width: 38px;
        height: 36px;
        padding: 0 8px;
    }

    .cl-feed-media-viewer__slide--video video {
        max-height: calc(100% - 100px);
    }

    .cl-feed-media-viewer__comments {
        top: auto;
        width: 100%;
        height: 62vh;
        max-height: calc(100dvh - 24px);
        overflow: hidden;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -10px 32px rgba(0, 0, 0, .18);
        border-top: 1px solid #e5e7eb;
        border-left: 0;
        touch-action: pan-y;
    }

    .cl-feed-media-viewer__comments-head {
        border-radius: 16px 16px 0 0;
    }

    .cl-feed-media-viewer__comments-head > span {
        font-size: 15px;
    }

    .cl-image-editor__panel {
        width: calc(100vw - 12px);
        max-height: calc(100vh - 12px);
        border-radius: 8px;
    }

    .cl-image-editor__canvas-wrap {
        min-height: 220px;
        max-height: 48vh;
    }

    .cl-image-editor__canvas-wrap canvas {
        max-height: 44vh;
    }

    .cl-image-editor__canvas-stage {
        max-height: 44vh;
    }

    .cl-feed-media-viewer__comments-list .timeline-placeholder {
        padding: 34px 14px;
    }

    .cl-feed-media-viewer__comments-list .timeline-placeholder .pl-message h4 {
        font-size: 17px;
    }

    .cl-feed-media-viewer__comments-list .timeline-placeholder .pl-message p {
        max-width: 100%;
        font-size: 13px;
    }

    .cl-feed-media-viewer__comments-list .thread-data .privacy-settings .dropdown-menu {
        width: min(290px, calc(100vw - 28px));
    }
}

@media (min-width: 768px) {
    .cl-feed-media-viewer__slide--collage img {
        max-width: 92vw;
        max-height: 88vh;
        object-fit: contain;
    }
}