#footer-comments-outlet {
    margin-top: 20px;

    .wysiwyg.toolbar {
        position: relative;
        align-items: center;
        display: flex;
        height: auto;
        background-color: var(--ds-surface, #FFFFFF);
        box-shadow: none;
        padding: var(--ds-space-100, 8px) var(--ds-space-100, 8px) 0;
        border-radius: 6px 6px 0 0;
    }

    .wysiwyg.content {
        min-width: 0;
    }
}

#comments {
    top: 0;
    width: 100%;
    position: relative;
    margin: 0 auto;

    .status {
        &.status-neutral {
            background-color: #dddee1;
            border-color: #dddee1;
        }

        &.status-purple {
            background-color: #d8a0f7;
            border-color: #d8a0f7;
        }

        &.status-blue {
            background-color: #8fb8f6;
            border-color: #8fb8f6;
        }

        &.status-red {
            background-color: #fd9891;
            border-color: #fd9891;
        }

        &.status-yellow {
            background-color: #f9c84e;
            border-color: #f9c84e;
        }

        &.status-green {
            background-color: #b3df72;
            border-color: #b3df72;
        }
    }
}

.comments-header {
    box-sizing: border-box;
    border-top: var(--ds-border-width, 1px) solid var(--ds-border, #0B120E24);
    height: 64px;
    width: 100%;
    display: flex;
    padding: var(--ds-space-200, 16px);
    justify-content: space-between;
    align-items: center;
}

.comments-header-title {
    font-size: 20px;
    color: var(--ds-text-subtle, #505258);
}

.hidden {
    display: none !important;
}

body:has(dialog[open]) {
    overflow: hidden;
}

.comment-thread {
    box-sizing: border-box;

    &.replies-collapsed > .comment-node > .thread-replies > .comment-node {
        display: none;
    }

    &.selected {
        background: var(--ds-background-input-hovered, #F8F8F8);
    }
}

.comment-node {
    min-height: 85px;
}

.thread-replies {
    padding-left: 28px;
}

.comment-thread:has(.comment-element.editing, .add-comment-form.reply-form) > .thread-footer .thread-action:is([data-action="reply-to-root"], [data-action="toggle-replies"]) {
    display: none;
}

.comment-element,
.add-comment-form.reply-form,
.add-comment-form.edit-form {
    box-sizing: border-box;
    border: none;
    list-style: none;
    position: relative;
    padding-left: var(--ds-space-200, 16px);
    padding-right: 20px;
    padding-top: var(--ds-space-100, 8px);
    display: flex;
    flex-direction: column;
}

.comment-element {
    &::after {
        content: "";
        position: absolute;
        left: 28px;
        top: 50px;
        width: 1px;
        height: var(--thread-height, 0);
        background: var(--ds-background-accent-gray-subtlest-hovered, #dddee1);
        pointer-events: none;
    }

    &:hover .comment-actions,
    &:focus-within .comment-actions,
    &:has([aria-expanded="true"]) .comment-actions {
        visibility: visible;
    }

    &.editing .comment-actions {
        display: none;
    }
}

.thread-replies > .comment-node > .comment-element::before,
.thread-replies > .add-comment-form.reply-form::before,
.comment-thread > .add-comment-form.reply-form::before,
.show-replies-placeholder::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 12px;
    height: 32px;
    border-bottom: 1.5px solid var(--ds-background-accent-gray-subtlest-hovered, #dddee1);
    border-bottom-left-radius: 8px;
    pointer-events: none;
}

.show-replies-placeholder::before {
    left: -12px;
    height: 20px;
}

.comment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 8px;
}

.comment-author-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.comment-author-identity {
    display: inline-flex;
    flex-direction: column;
    min-width: 0;
}

.comment-author-name-row {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
}

.comment-author-name,
.comment-author-email {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.comment-author-name {
    flex-shrink: 0;
    max-width: 200px;
}

.comment-author-email {
    flex-shrink: 1;

    .external-link {
        color: var(--ds-link, #1868db) !important;
    }
}

.icon-button[data-action="resolve"][aria-pressed="true"] {
    color: var(--ds-icon-success, #6A9A23);

    > svg {
        width: 16px;
        height: 16px;
    }
}

.comment-resolved-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--ds-icon-success, #6A9A23);
}

.comment-original-selection {
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 72px);
    font-size: 12px;
    appearance: none;
    border-image: initial;
    border-width: var(--ds-border-width, 1px);
    border-style: solid;
    border-color: var(--ds-border, #0B120E24);
    border-radius: var(--ds-radius-small, 3px);
    padding: var(--ds-space-200, 16px);
    width: 100%;
    margin: 8px 16px 4px 56px;
    background-color: var(--ds-surface, #FFFFFF);
    margin-bottom: var(--ds-space-150, 12px);
}

.show-more-replies-placeholder {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 4px;
    padding: 6px 12px;
    padding-left: 24px;
    cursor: pointer;
    color: var(--ds-text-subtle, #505258);
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
    width: fit-content;

    &:hover {
        background-color: var(--ds-background-neutral-subtle-hovered, #0515240f);
    }

    &:active {
        background-color: var(--ds-background-neutral-subtle-pressed, #0b120e24);
    }
}

.show-more-replies-icon {
    width: 24px;
    height: 24px;
}

.thread-replies > .show-more-replies-placeholder::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 12px;
    height: 18px;
    border-bottom: 1.5px solid var(--ds-background-accent-gray-subtlest-hovered, #dddee1);
    border-bottom-left-radius: 8px;
    pointer-events: none;
}

.comment-node.panel-hidden {
    display: none;
}

.comment-title-date,
.comment-resolution {
    color: var(--ds-text-subtlest, #6b6e76);
    font-size: 12px;
    flex-shrink: 0;
    white-space: nowrap;
}

.comment-title-date.utc-date-time:not(.formatted),
.comment-edited.utc-date-time:not(.formatted),
.comment-resolution.utc-date-time:not(.formatted) {
    visibility: hidden;
}

.comment-page-icon {
    display: none;
    align-items: center;
    color: var(--ds-icon-subtle, #6b6e76);
}

#comments-panel .comment-thread > .comment-node > .comment-element .comment-page-icon {
    display: inline-flex;
}


.comment-icon {
    margin: 2px;
    height: 24px;
    width: 24px;
}

.comment-icon-element {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.comment-content,
.comment-edited {
    margin-left: 12px;
    margin-top: 8px;
    padding-left: 24px;
    padding-right: 4px;
}

.comment-edited {
    color: var(--ds-text-subtlest, #6b6e76);
    font-size: 12px;
    padding-top: 6px;
    width: 100px;
}

.comment-description {
    > p:has(strong.authorHeader) {
        display: none;
    }

    p:first-child {
        margin: 0;
    }
}

.comment-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    visibility: hidden;
}

.show-replies-placeholder {
    margin-left: 40px;
    margin-right: 20px;
    margin-top: 8px;
    box-sizing: border-box;
    position: relative;
    color: var(--ds-text-subtle, #505258);
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    border-radius: 4px;
    width: fit-content;
    font-weight: 500;

    &:hover {
        background: var(--ds-background-neutral-subtle-hovered, #0515240f);
    }

    &:active {
        background-color: var(--ds-background-neutral-subtle-pressed, #0b120e24);
    }

    .comment-icon {
        margin: 0;
    }
}

.show-replies-label {
    color: var(--ds-text-subtle, #505258);
    font-size: 14px;
}

.thread-footer {
    box-sizing: border-box;
    appearance: none;
    border: none;
    margin-top: var(--ds-space-0, 0px);
    margin-left: var(--ds-space-150, 12px);
    padding-left: 32px;
    padding-right: 20px;
    padding-top: var(--ds-space-050, 4px);
    padding-bottom: var(--ds-space-100, 8px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-150, 12px);
}

.thread-action {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--ds-text-subtle, #505258);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    border-radius: 3px;
    padding-block: 6px;
    padding-inline: 12px;
    height: 32px;

    &:hover {
        background: var(--ds-background-neutral-subtle-hovered, #0515240f);
    }

    &:active {
        background-color: var(--ds-background-neutral-subtle-pressed, #0b120e24);
    }
}

.icon-button {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 0;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
    color: var(--ds-text-subtle, #505258);
    display: inline-flex;
    align-items: center;
    justify-content: center;

    > svg {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }

    &:hover {
        background-color: var(--ds-background-neutral-subtle-hovered, #0515240f);
    }

    &:active {
        background-color: var(--ds-background-neutral-subtle-pressed, #0b120e24);
    }

    &[data-action="more"][aria-expanded="true"] {
        color: var(--ds-text-selected, #1868db);
        background-color: var(--ds-background-selected, #e9f2fe);
        border-color: var(--ds-text-selected, #1868db);

        &:hover {
            background-color: var(--ds-background-selected-hovered, #cfe1fd);
        }

        &:active {
            background-color: var(--ds-background-selected-pressed, #8fb8f6);
        }
    }
}

.more-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 100px;
    background-color: var(--ds-surface-overlay, #fff);
    border-radius: 4px;
    box-shadow: var(--ds-shadow-overlay, 0 8px 9pt #1e1f2126, 0 0 1px #1e1f214f);
    padding: 4px 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
}

.more-menu-item {
    appearance: none;
    background: transparent;
    border: none;
    text-align: left;
    padding: 8px 16px;
    min-height: 40px;
    font-size: 14px;
    color: var(--ds-text, #172b4d);
    cursor: pointer;
    position: relative;

    &:hover:not(.disabled),
    &:active:not(.disabled) {
        background-color: var(--ds-background-neutral-subtle-hovered, #0515240f);
    }

    &.disabled {
        color: var(--ds-text-disabled, #b3b9c4);
        cursor: not-allowed;
    }
}

.user-info-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    flex-wrap: wrap;
}

.user-info-static {
    align-items: baseline;
}

.user-info-name {
    font-weight: 500;
    color: var(--ds-text, #172B4D);
    flex-shrink: 0;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-info-email {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
}

.user-info-inputs {
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}

.user-info-input {
    flex: 1 1 140px;
    min-width: 0;
}

.add-comment-form {
    &.reply-form {
        margin-top: 0 !important;
        margin-left: 0;
        padding-left: 16px;

        > .comment-content {
            margin-left: 0;
            padding-left: 4px;
        }
    }

    &.edit-form {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        padding: 8px 4px;
        margin-left: 0;
        margin-top: 8px;
    }

    .button.primary,
    .button.subtle {
        align-items: baseline;
        border-width: 0;
        border-radius: 3px;
        box-sizing: border-box;
        display: inline-flex;
        font-size: inherit;
        font-style: normal;
        font-family: inherit;
        font-weight: var(--ds-font-weight-medium, 500);
        max-width: 100%;
        position: relative;
        text-align: center;
        text-decoration: none;
        transition: background 0.1s ease-out, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);
        white-space: nowrap;
        cursor: pointer;
        height: 2.28571em;
        line-height: 2.28571em;
        padding: 0 10px;
        vertical-align: middle;
        width: auto;
        justify-content: center;
    }

    .button.primary {
        background: var(--ds-background-brand-bold, #1868DB);
        color: var(--ds-text-inverse, #FFFFFF);

        &:hover {
            background: var(--ds-background-brand-bold-hovered, #1558BC);
        }

        &:active {
            background: var(--ds-background-brand-bold-pressed, #144794);
        }
    }

    .button.subtle {
        background: transparent;
        color: var(--ds-text-subtle, #505258) !important;

        &:hover {
            background: var(--ds-background-neutral-subtle-hovered, #0515240F);
        }

        &:active {
            background: var(--ds-background-neutral-subtle-pressed, #0B120E24);
        }
    }

    .confluence-input {
        background-color: var(--ds-background-input, #FFFFFF);
        border: var(--ds-border-width, 1px) solid var(--ds-border-input, #8C8F97);
        border-radius: 6px;
        padding: 6px 8px;
        color: var(--ds-text, #172B4D);
        font-size: 14px;

        &:focus,
        &:active {
            outline: none;
            border-color: var(--ds-border-focused, #1868DB);
        }
    }
}

.comment-thread > .add-comment-form.reply-form {
    margin-left: 28px;
}

.page-comment-editor-container {
    display: flex;
    flex-direction: column;
    min-width: 272px;
    height: auto;
    background-color: var(--ds-background-input, #FFFFFF);
    border: var(--ds-border-width, 1px) solid var(--ds-border-input, #8C8F97);
    box-sizing: border-box;
    border-radius: 6px;
    max-width: inherit;
    overflow-wrap: break-word;
    min-height: 150px;

    .wysiwyg.content {
        margin: 0;
        max-width: none;
    }
}

.comment-form-error {
    display: block;
    margin-top: var(--ds-space-150, 12px);
}

.comment-form-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: var(--ds-space-200, 16px);
    background-color: var(--ds-background-warning, #FFF5DB);
    border-radius: var(--ds-border-radius, 3px);
}

.comment-form-warning-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--ds-icon-warning, #E06C00);
}

.comment-form-warning-text {
    flex: 1;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.comment-form-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: start;
    padding-top: 12px;
}

.add-root-body {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.add-root-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.add-root-user-info {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.add-root-form {
    .form-avatar,
    .form-avatar .comment-icon-element {
        width: 32px;
        height: 32px;
    }
}

.add-comment-sticky {
    position: sticky;
    bottom: var(--ds-space-0, 0px);
    z-index: 1;
    border-top: var(--ds-border-width, 1px) solid var(--ds-border, #0B120E24);
    background-color: var(--ds-surface, #ffffff);

    > .add-comment-form {
        padding: 16px;
        margin: 0 !important;
    }
}

.add-comment-sticky-button {
    padding: 16px;
    display: flex;
    align-items: center;
}

.add-comment-button {
    appearance: none;
    background-color: var(--ds-background-neutral-subtle, #00000000);
    border: none;
    border-radius: 4px;
    color: var(--ds-text-subtle, #505258);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    padding-inline: 12px;
    padding-top: 0;
    min-height: 32px;
    cursor: pointer;

    &:hover {
        background-color: var(--ds-background-neutral-subtle-hovered, #0515240f);
    }
}

.add-comment-button-content {
    display: flex;
    gap: 8px;
    align-items: center;
}

.add-comment-button-icon {
    height: 24px;
    width: 24px;
}

#confirm-delete-dialog {
    border: none;
    border-radius: 6px;
    padding: 24px;
    max-width: 400px;

    &::backdrop {
        background: rgba(9, 30, 66, 0.54);
    }
}

.confirmation-modal-title {
    margin-bottom: 20px;
    font-weight: bold;
}

.confirmation-modal-actions {
    margin-top: 20px;
    display: flex;
    justify-content: right;
    gap: 5px;
}

#inline-comment-sidebar {
    right: 70px;
    position: absolute;
    display: none;
    flex-direction: column;
    left: 100vw;
    border: var(--ds-border-width, 1px) solid var(--ds-border, #0b120e24);
    background-color: var(--ds-surface, #fff);
    border-radius: 3px;
    box-shadow: var(--ds-shadow-overflow, 0 0 8px #1e1f2128, 0 0 1px #1e1f211e);
    width: 280px;
    z-index: 1000;
}

#inline-comment-list {
    flex: 1;
    min-height: 0;
}

.inline-comment-sidebar-thread {
    overflow: visible;
    box-sizing: border-box;
}

#inline-comment-sidebar .comment-node {
    min-height: 0;
}

.inline-comment-sidebar-thread .comment-author-identity {
    flex: 1;
    min-width: 0;
}

.inline-comment-sidebar-thread .comment-author-name {
    flex-shrink: 0;
    max-width: 100%;
}

.inline-comment-sidebar-thread .comment-author-email {
    flex-shrink: 1;
    min-width: 0;
}

.inline-comment-sidebar-thread .comment-header,
#comments-panel .comment-header {
    position: relative;
}

.inline-comment-sidebar-thread .comment-actions,
#comments-panel .comment-actions {
    position: absolute;
    top: 8px;
    inset-inline-end: 0;
    background: var(--ds-surface, #FFFFFF);
}

.inline-comment-sidebar-thread .icon-button[aria-label]:after,
.inline-comment-sidebar-thread .comment-actions [aria-label]:after {
    left: auto;
    right: 0;
    transform: none;
}

.inline-comment-sidebar-thread .comment-author-name-row[aria-label]:after,
.inline-comment-sidebar-thread .comment-edited[aria-label-top]:after {
    left: 0;
    transform: none;
    white-space: normal;
    width: max-content;
    max-width: 200px;
    word-break: break-word;
}


#inline-comment-sidebar .comment-thread.selected {
    background: transparent;
}


.inline-comment-sidebar-thread .comment-thread > .comment-node > .add-comment-form,
.inline-comment-sidebar-thread .comment-element.editing ~ .edit-form,
#comments-panel .comment-thread > .comment-node > .add-comment-form,
#comments-panel .comment-element.editing ~ .edit-form,
.inline-comment-sidebar-thread .comment-element > .edit-form,
#comments-panel .comment-element > .edit-form {
    padding-left: 24px;
    margin-left: 12px;
}

.inline-comment-sidebar-thread .add-comment-form [data-editor],
#comments-panel .add-comment-form [data-editor] {
    min-height: 80px;
    background-color: var(--ds-background-input, #fff);
    border: var(--ds-border-width-selected, 2px) solid var(--ds-border-brand, #1868db);
    border-radius: 3px;
    padding: 6px 8px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

#comments-panel .comment-form-actions {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.inline-comment-sidebar-thread .comment-form-actions {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.comment-element.editing .comment-edited {
    display: none;
}

.more-menu-item[data-action="delete"]:not(.disabled)[aria-label]:hover:after,
.more-menu-item[data-action="delete"]:not(.disabled)[aria-label]:focus:after {
    display: none;
}

.inline-comment-sidebar-thread .more-menu-item[aria-label]:after {
    left: auto;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    white-space: normal;
    width: 100px;
    line-height: 1.4;
    padding: 6px 8px;
}

.inline-comment-sidebar-thread .comment-thread {
    width: 100%;
    box-sizing: border-box;
}

#inline-comment-sidebar .comment-thread,
#inline-comment-sidebar .comment-element,
#inline-comment-sidebar .comment-content,
#inline-comment-sidebar .comment-description {
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-break: break-word;
}

#inline-comment-sidebar .comment-description img,
#inline-comment-sidebar .comment-description video,
#inline-comment-sidebar .comment-description iframe,
#inline-comment-sidebar .comment-description table {
    max-width: 100%;
    height: auto;
}

#inline-comment-sidebar .comment-description,
#inline-comment-sidebar .comment-description * {
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
}

#inline-comment-list .thread-footer,
#inline-comment-list .show-replies-placeholder,
#inline-comment-list .show-more-replies-placeholder {
    display: none !important;
}

#inline-comment-list .comment-thread.replies-collapsed > .comment-node > .thread-replies > .comment-node {
    display: block !important;
}

#inline-comment-sidebar:not(:has(#inline-comment-new-reply-container)) #inline-comment-list {
    padding-bottom: 12px;
}

.inline-comment-sidebar-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--ds-surface, #fff);
    color: var(--ds-text-subtle, #505258);
    flex-shrink: 0;
}

.inline-comment-sidebar-header::before {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: inset(0 0 -8px 0);
    box-shadow: var(--ds-shadow-overflow, 0 0 8px #1E1F2128, 0 0 1px #1E1F211E);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease-out;
}

#inline-comment-sidebar.scrolled .inline-comment-sidebar-header::before {
    opacity: 1;
}

#inline-comment-sidebar.adding-new .inline-comment-sidebar-header {
    padding: 0;
}

.inline-comment-navigation {
    display: flex;
    gap: 4px;
}

.inline-comment-sidebar-actions {
    display: flex;
    gap: 4px;
}

.inline-comment-marker.visible {
    border-bottom: var(--ds-border-width-selected, 2px) solid transparent;
    border-bottom-color: var(--ds-border-accent-yellow, #B38600);
    background: var(--ds-background-accent-yellow-subtlest, #FEF7C8);
    cursor: pointer;
    padding: 1px 0 var(--ds-space-025, 2px);
}

.inline-comment-marker.highlited,
.inline-comment-marker.adding-new {
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    border-bottom-color: var(--ds-border-accent-yellow, #B38600);
    box-shadow: var(--ds-shadow-overlay, 0 8px 12px #1E1F2126, 0 0 1px #1E1F214F);
    padding: 1px 0 2px;
    background: var(--ds-background-accent-yellow-subtlest-pressed, #EFDD4E);
}

.inline-comment-marker.resolved {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    cursor: auto !important;
    padding: 0 !important;
    color: inherit !important;
}

.showed {
    left: calc(100vw - 350px) !important;
}

.inline-comment-new-reply-container {
    padding: 12px 16px;
}

#inline-comment-reply-trigger {
    height: 32px;
    padding: 4px 8px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 3px;
    border: 1px solid var(--ds-border-input, #8C8F97);
    background-color: var(--ds-background-input, #FFFFFF);
    color: var(--ds-text-subtlest, #6B6E76);
    cursor: text;

    &:hover {
        background-color: var(--ds-background-input-hovered, #F8F8F8);
        border-color: var(--ds-border-input, #8C8F97);
    }

    &:focus {
        outline: none;
        border-color: var(--ds-border-focused, #1868DB);
    }
}

.add-inline-comment-form {
    flex-direction: column;
}

.add-inline-comment-form.replying #cancel-inline-comment-addition {
    display: none !important;
}

.add-inline-comment-form.adding-new #cancel-inline-comment-reply {
    display: none;
}

.inline-comment-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.inline-comment-form-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inline-comment-form-header > .comment-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin: 0;
}

.inline-comment-form-header > .comment-icon > .comment-icon-element {
    width: 24px;
    height: 24px;
    display: block;
}

.inline-comment-form-identity {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.inline-comment-form-identity-static {
    flex-wrap: wrap;
}

.inline-comment-form-identity-inputs {
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.inline-comment-form-name {
    font-weight: 500;
    color: var(--ds-text, #172B4D);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
    max-width: 180px;
    font-size: 14px;
}

.inline-comment-form-email {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex-shrink: 1;
    font-size: 14px;
}

.inline-comment-form-value-input {
    flex: 1 1 120px;
    min-width: 0;
    font-weight: 500;
}

#inline-comment-editor {
    min-height: 150px;
    overflow-y: hidden;
    max-width: 246px;
    background-color: var(--ds-background-input, #fff);
    border: var(--ds-border-width-selected, 2px) solid var(--ds-border-brand, #1868db);
    border-radius: 3px;
}

.highlight-actions-popup-buttons {
    display: flex;
    align-items: center;
    padding: var(--ds-space-025, 2px);

    > button {
        display: flex;
        font-family: inherit;
        align-items: center;
        border-width: 0;
        background-color: var(--ds-background-neutral-subtle, #00000000);
        border-radius: 4px;
        color: var(--ds-text-subtle, #505258);
        gap: 6px;
        min-height: 28px;
        height: 28px;
        padding-right: 8px;
        padding-left: 8px;
        font-size: 14px;

        &:hover {
            background-color: var(--ds-background-neutral-subtle-hovered, #0515240f);
        }

        &:active {
            background-color: var(--ds-background-neutral-subtle-pressed, #0b120e24);
        }
    }
}

.highlight-actions-popup-container {
    position: absolute;
    transition: top 100ms ease-out 0s, left 100ms ease-out 0s;
}

.highlight-actions-popup {
    position: absolute;
    display: none;
    opacity: 0;
    transition: opacity 0.1s linear 0s;
    transform: translate(calc(-50% - 5px), calc(-100% - 20px));
    background-color: var(--ds-surface-overlay, #fff);
    border-radius: 6px;
    height: 36px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 16px;
    margin-right: 16px;
    box-shadow: var(--ds-shadow-overlay, 0 8px 9pt #1e1f2126, 0 0 1px #1e1f214f);
}


main.main-content:has(#comments-panel.open) #main-content-container {
    padding-right: 400px;
}

#comments-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 0;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(--ds-background-input, #fff);
    pointer-events: auto;

    &.open {
        width: 400px;
        border-left: 1px solid var(--ds-background-neutral-hovered, #0b120e24);
    }

    [aria-label]:hover:after,
    [aria-label-top]:hover:after,
    [aria-label-right]:hover:after,
    [aria-label-left]:hover:after {
        line-height: 1.3;
        white-space: normal;
    }
}

#comments-panel .panel-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.comments-panel-filter-wrapper {
    position: relative;
}

#comments-panel-filter-trigger.modified {
    color: var(--ds-icon-selected, #1868DB);
}

#comments-panel-filter-trigger[aria-expanded="true"] {
    color: var(--ds-text-selected, #1868db);
    background-color: var(--ds-background-selected, #e9f2fe);
    border: 1px solid var(--ds-border-selected, #1868db);
}

#comments-panel-filter-trigger[aria-expanded="true"]:hover {
    background-color: var(--ds-background-selected-hovered, #cfe1fd);
}

#comments-panel-filter-trigger[aria-expanded="true"]:active {
    background-color: var(--ds-background-selected-pressed, #8fb8f6);
}

#comments-panel .comment-actions[data-resolved-actions="true"] {
    visibility: visible;
}

.comment-thread[data-resolved="true"] > .thread-footer {
    display: none;
}

.comments-panel-filter-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 200px;
    border-radius: 4px;

    padding: 4px 0;
    z-index: 10;
    display: flex;
    flex-direction: column;

    background-color: var(--ds-surface-overlay, #fff);
    box-shadow: var(--ds-shadow-overlay, 0 8px 9pt #1e1f2126, 0 0 1px #1e1f214f);
}

.comments-panel-filter-section {
    display: flex;
    flex-direction: column;
    padding: 4px 0;
    border-bottom: 1px solid var(--ds-border, #0b120e14);

    &:last-child {
        border-bottom: none;
    }
}

.comments-panel-filter-heading {
    padding-left: 16px;
    padding-right: 16px;
    padding-inline-end: 16px;
    padding-inline-start: 16px;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 14px;
    margin-bottom: 6px;
    height: 16px;
    font-weight: 650;
    font-size: 12px;
    color: var(--ds-text-subtle, #505258);
}

.comments-panel-filter-item {
    position: relative;
    appearance: none;
    background: transparent;
    border: none;
    text-align: left;
    padding: 8px 16px;
    font-size: 14px;
    color: var(--ds-text, #172b4d);
    cursor: pointer;
    font-family: inherit;
}

.comments-panel-filter-item:not([aria-current="true"]):not([aria-checked="true"]):hover,
.comments-panel-filter-item:not([aria-current="true"]):not([aria-checked="true"]):active {
    background-color: var(--ds-background-neutral-subtle-hovered, #0515240f);
}

.comments-panel-filter-item[aria-current="true"],
.comments-panel-filter-item[aria-checked="true"] {
    color: var(--ds-text-selected, #1868db);
    background-color: var(--ds-background-selected, #e9f2fe);
}

.comments-panel-filter-item[aria-current="true"]:hover,
.comments-panel-filter-item[aria-checked="true"]:hover {
    background-color: var(--ds-background-selected-hovered, #cfe1fd);
}

.comments-panel-filter-item[aria-current="true"]:active,
.comments-panel-filter-item[aria-checked="true"]:active {
    background-color: var(--ds-background-selected-pressed, #8fb8f6);
}

.comments-panel-filter-item[aria-current="true"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--ds-border-selected, #1868db);
}

.comments-panel-filter-item-arrow {
    display: flex;
    align-items: center;
    gap: 6px;
}

.comments-panel-filter-arrow {
    display: inline-flex;
    align-items: center;
    color: var(--ds-icon-subtle, #6b6e76);
}

.comments-panel-filter-item-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
}

.comments-panel-filter-checkbox {
    display: inline-flex;
    align-items: center;
    color: var(--ds-icon-subtle, #6b6e76);
}

.comments-panel-filter-item-checkbox[aria-checked="true"] .comments-panel-filter-checkbox {
    color: var(--ds-icon-selected, #1868db);
}

.comments-panel-filter-checkbox-checked {
    display: none;
}

.comments-panel-filter-checkbox-unchecked {
    display: inline-flex;
}

.comments-panel-filter-item-checkbox[aria-checked="true"] .comments-panel-filter-checkbox-checked {
    display: inline-flex;
}

.comments-panel-filter-item-checkbox[aria-checked="true"] .comments-panel-filter-checkbox-unchecked {
    display: none;
}

#comments-panel:has([data-filter="RESOLVED"][aria-current="true"]) .comments-panel-section {
    border-bottom: none;
}

.comments-panel-empty {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: stretch;
    align-items: center;
    gap: var(--ds-space-200, 16px);
    position: relative;
    top: 19%;
    padding: 0 24px;
    text-align: center;
}

.comments-panel-empty[data-section-hidden="true"] {
    display: none;
}

.comments-panel-section:not(:has(.comment-thread:not([data-filter-hidden="true"]))) .comments-panel-section-title {
    display: none;
}

.comments-panel-empty-title {
    font-size: 16px;
    font-weight: 650;
    margin: 0;
}

.comments-panel-empty-text {
    font-size: 14px;
}

#comments-panel .comment-header [aria-label]:after,
#comments-panel .comment-actions [aria-label]:after {
    left: auto;
    right: 0;
    transform: none;
}

.comments-panel-section-title {
    box-sizing: border-box;
    -webkit-box-align: center;
    align-items: center;
    display: flex;
    gap: var(--ds-space-050, 4px);
    padding-top: var(--ds-space-300, 24px);
    padding-right: var(--ds-space-300, 24px);
    padding-bottom: var(--ds-space-150, 12px);
    padding-left: var(--ds-space-200, 16px);
    border-top: var(--ds-border-width, 1px) solid var(--ds-border, #0B120E24);
    font-weight: 500;
    color: var(--ds-text-subtlest, #6B6E76);
}

.comments-panel-section-icon {
    display: inline-flex;
    align-items: center;
    color: var(--ds-icon-subtle, #6b6e76);
}

.comments-panel-section[data-section-hidden="true"] {
    display: none;
}

.comments-panel-footer {
    position: sticky;
    bottom: 0;
    padding: 12px 16px;
    border-top: 1px solid var(--ds-border, #0b120e24);
    background-color: var(--ds-surface, #fff);
}

#comments-panel:not(:has(.comments-panel-footer)) .comment-thread {
    padding-bottom: 12px;
}

#comments-panel-add-trigger {
    width: 100%;
    justify-content: center;
    min-height: 36px;
}

#comments-panel #comments-panel-inline-list .comment-thread,
#comments-panel #comments-panel-general-list .comment-thread {
    cursor: pointer;
}

#comments-panel .comment-thread[data-filter-hidden="true"] {
    display: none;
}

#comments-panel .comment-thread.selected {
    background: var(--ds-background-input-hovered, #F8F8F8);
}

span.inline-comment-marker.marker-pulsing {
    animation: marker-pulse 1.5s ease-out;
}

@keyframes marker-pulse {
    0% {
        background-color: var(--ds-background-warning, #fff3d6);
    }
    100% {
        background-color: transparent;
    }
}