/* @title Main Comment Indent */
/* @help This controls how far the MAIN LEVEL comments on an item is indented */
.comment-level-0 {
    margin-left: 0;
}

/* @title Comment Level 1 */
/* @help This controls how far FIRST LEVEL comment replies on an item are indented */
.comment-level-1 {
    margin-left: 25px !important;
}

/* @title Comment Level 2 */
/* @help This controls how far SECOND LEVEL comment replies on an item are indented */
.comment-level-2 {
    margin-left: 50px !important;
}

/* @title Comment Level 3 */
/* @help This controls how far THIRD LEVEL comment replies on an item are indented */
.comment-level-3 {
    margin-left: 75px !important;
}

/* @title Comment Level 4 */
/* @help This controls how far FOURTH LEVEL comment replies on an item are indented */
.comment-level-4 {
    margin-left: 100px !important;
}

/* @title Comment Level 5 */
/* @help This controls how far FIFTH LEVEL comment replies on an item are indented */
.comment-level-5 {
    margin-left: 125px !important;
}

/* @title Comment Level 6 */
/* @help This controls how far SIXTH LEVEL comment replies on an item are indented */
.comment-level-6 {
    margin-left: 150px !important;
}

/* @title Comment Level 7 */
/* @help This controls how far SEVENTH LEVEL comment replies on an item are indented */
.comment-level-7 {
    margin-left: 175px !important;
}

/* @title Comment Level 8 */
/* @help This controls how far EIGHTH LEVEL and HIGHER comment replies on an item are indented */
.comment-level-last {
    margin-left: 200px !important;
}

/* @title Comment Reply Tag */
/* @help Controls the text of the "Reply" text shown on a comment when threading is enabled */
.comment-reply {
    display: inline-block;
    margin-top: 6px;
    font-size: 11px;
    text-transform: uppercase;
}

.amComment_upload_attachment {
    margin-top: -32px;
    text-align: right;
    width: 100%;
}

.amComment_upload_attachment li.qq-upload-success {
    text-align: left;
}

.amComment_upload_attachment .qq-uploader {
    float: right;
}

.amComment-form-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--am-space-2, 8px);
    margin-top: var(--am-space-2, 8px);
    width: 100%;
    box-sizing: border-box;
}

.amComment-form-footer__actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--am-space-1, 4px);
    margin-left: auto;
}

/*
 * Optional layout: pass detail_stack_footer="1" from {amComment_form …}.
 * Footer sits below the avatar + textarea row, inset to the body column (col10).
 */
#comment_form_section .amComment-comment-form--stack-footer .amComment-stack-footer-row {
    margin-top: 0;
}

#comment_form_section .amComment-comment-form--stack-footer .amComment-stack-footer__gutter {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 0;
}

#comment_form_section .amComment-comment-form--stack-footer .amComment-stack-footer__main {
    min-width: 0;
}
#comment_form_section .amComment-comment-form--stack-footer .amComment-form-footer--stack-below {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--am-space-2, 8px);
    width: 100%;
    margin-top: var(--am-space-1, 4px);
    margin-left: 0;
    padding-top: 0;
    border-top: none;
    box-sizing: border-box;
}

#comment_form_section .amComment-comment-form--stack-footer .amComment-form-footer--stack-below .amComment-form-footer__attach {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: min(100%, 28rem);
    margin-left: 0;
}

#comment_form_section .amComment-comment-form--stack-footer .amComment-form-footer--stack-below .amComment_upload_attachment {
    margin-top: 0;
    text-align: left;
    width: auto;
    max-width: 100%;
    float: none;
}

#comment_form_section .amComment-comment-form--stack-footer .amComment-form-footer--stack-below .amComment_upload_attachment .qq-uploader {
    float: none;
}

#comment_form_section .amComment-comment-form--stack-footer .amComment-form-footer--stack-below .amComment-form-footer__actions {
    order: 2;
    flex: 0 0 auto;
    margin-left: auto;
    margin-top: 0;
    width: auto;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--am-space-2, 8px);
}

#comment_form_section .amComment-comment-form--stack-footer .amComment-form-footer--stack-below .amComment-form-footer__actions input[type="submit"].am-btn,
#comment_form_section .amComment-comment-form--stack-footer .amComment-form-footer--stack-below .amComment-form-footer__actions .am-btn--primary {
    flex: none;
    width: auto;
    max-width: 100%;
    min-width: 0;
    margin-top: 0;
    margin-left: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--am-space-2, 8px);
    padding: var(--am-space-2) var(--am-space-4);
    font-size: var(--am-font-sm);
    font-weight: 500;
    line-height: 1;
    min-height: 0;
    white-space: nowrap;
}

.amComment-form-footer .amComment_upload_attachment {
    margin-top: 0;
    text-align: left;
    width: auto;
    flex: 0 1 auto;
    min-width: 0;
}

.amComment-form-footer .amComment_upload_attachment .qq-uploader {
    float: none;
}

#comment_form_holder {
    margin: 0 0 var(--am-space-2);
    padding: 0;
}

#comment_form_holder .form_editor_holder {
    width: 100%;
}

#comment_form_section {
    margin: 0;
    padding: 0;
}

/* Composer shell — flush layout; field chrome lives on the textarea/editor only */
#comment_form_section .amComment-form-table.item {
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    box-sizing: border-box;
}

#comment_form_section #comment_reply_to.item.success {
    margin: 0 0 var(--am-space-2);
    padding: var(--am-space-2) var(--am-space-3);
    border: none;
    border-radius: var(--am-radius-md);
    background: var(--am-bg-subtle);
    font-size: var(--am-font-sm);
}

#comment_form_section .item.error {
    margin: 0 0 var(--am-space-2);
    padding: var(--am-space-2) var(--am-space-3);
    border-radius: var(--am-radius-md);
    font-size: var(--am-font-sm);
}

/* Override skin .form_textarea min-height for a comfortable composer */
#comment_text,
.amComment-comment-form textarea#comment_text.form_textarea {
    box-sizing: border-box;
    min-height: var(--am-touch-min, 44px);
    height: auto;
    max-height: 160px;
    width: 100%;
    font-family: var(--am-font-sans);
    font-size: var(--am-font-sm);
    line-height: var(--am-line-height-normal, 1.45);
    padding: var(--am-space-2) var(--am-space-3);
    border: 1px solid var(--am-border-default);
    border-radius: var(--am-radius-md);
    background: var(--am-bg-base);
    color: var(--am-text-primary);
    resize: vertical;
    transition: border-color var(--am-trans-fast), box-shadow var(--am-trans-fast);
}

#comment_text:focus,
.amComment-comment-form textarea#comment_text.form_textarea:focus {
    outline: none;
    border-color: var(--am-primary);
    box-shadow: 0 0 0 3px var(--am-primary-light);
}

#comment_text::placeholder,
.amComment-comment-form textarea#comment_text.form_textarea::placeholder {
    color: var(--am-text-disabled);
}

/* Compact composer + list avatars (jrImage xxsmall + display cap) */
.amComment-avatar-wrap {
    padding: 2px;
    border: none;
    background: transparent;
    box-sizing: border-box;
}

.amComment-avatar-img {
    max-width: 28px;
    max-height: 28px;
    width: auto;
    height: auto;
    vertical-align: middle;
    border-radius: 50%;
}

.amComment-thread-body-col {
    position: relative;
}

/*
 * Skin 1140 grid gives .col2/.col1 a percentage width, so a 28px avatar leaves a huge dead gap.
 * Flex row: avatar column shrink-wraps; body takes the rest.
 */
.amComment-form-table .row,
.amComment-comment-block .row,
.amComment-thread-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--am-space-2, 8px);
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    overflow: visible;
}

/* Footer row under composer: align to top so blank avatar gutter does not vertically center the bar */
.amComment-comment-form--stack-footer .amComment-stack-footer-row.amComment-thread-row {
    align-items: flex-start;
}

.amComment-form-table .row::after,
.amComment-comment-block .row::after,
.amComment-thread-row::after {
    display: none;
}

.amComment-form-table .row > [class*="col"],
.amComment-comment-block .row > [class*="col"],
.amComment-thread-row > [class*="col"] {
    float: none;
    width: auto;
    margin-right: 0;
    margin-left: 0;
}

.amComment-form-table .row > .col10,
.amComment-form-table .row > .col11,
.amComment-comment-block .row > .col10,
.amComment-comment-block .row > .col11,
.amComment-thread-row > .col10,
.amComment-thread-row > .col11 {
    flex: 1 1 auto;
    min-width: 0;
}

.amComment-form-table .row > .col2,
.amComment-form-table .row > .col1,
.amComment-comment-block .row > .col2,
.amComment-comment-block .row > .col1,
.amComment-thread-row > .col2,
.amComment-thread-row > .col1 {
    flex: 0 0 auto;
    max-width: 40px;
}

/* Vertically center avatar relative to the comment/composer body column */
.amComment-thread-avatar-col {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.amComment-comment-block.item {
    margin: 6px 0;
    padding: var(--am-space-2, 8px) var(--am-space-2, 8px);
}

/*
 * Skins (arcitech, MIS, …) use `.comment_page_section > div { display: table }` for legacy
 * jrComment rows. amComment uses flex (`.amComment-thread-row`); `display: table` on each
 * `.item.amComment-comment-block` breaks that layout and keeps action clusters from behaving.
 */
.comment_page_section > .amComment-comment-block {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.amComment-item-inner,
.amComment-itemlist-inner {
    margin-left: 0;
    padding: 0;
    clear: both;
}

.amComment-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--am-space-1, 4px);
    margin-bottom: var(--am-space-1, 4px);
    font-size: var(--am-font-xs, 12px);
    line-height: 1.35;
}

.amComment-meta-time {
    text-transform: lowercase;
    color: var(--am-text-tertiary, #a3a3a3);
}

.amComment-meta-sep::before {
    content: "\00b7";
    margin: 0 0.2em;
    color: var(--am-text-tertiary, #a3a3a3);
}

.amComment-item-text {
    font-size: var(--am-font-sm, 0.9375rem);
    line-height: 1.45;
    margin: 0;
}

.amComment-comment-block .comment-reply {
    margin-top: 0;
    font-size: var(--am-font-xs, 11px);
}

.amComment-thread-expand {
    margin-top: var(--am-space-1, 4px);
    font-size: var(--am-font-xs, 12px);
}

.amComment-form-main-compact {
    padding: 0;
    margin: 0;
}

#comment_form_section .amComment-form-cell-main {
    padding: 0;
}

#comment_form_section .amComment-comment-form .amComment-form-footer__actions {
    margin-top: 0;
}

#comment_form_section .amComment-comment-form .am-btn--primary,
#comment_form_section .amComment-comment-form input[type="submit"] {
    margin-top: 0;
    padding: var(--am-space-2) var(--am-space-4);
    font-size: var(--am-font-sm);
    line-height: 1;
    min-height: var(--am-touch-min, 44px);
    border-radius: var(--am-radius-md);
}

#comment_form_section .amComment-comment-form textarea + br {
    display: none;
}

#comment_form_holder .form_editor_holder,
#comment_form_section .form_editor_holder {
    min-height: 0;
}

#comment_form_section .mce-tinymce,
#comment_form_section .tox-tinymce {
    border: 1px solid var(--am-border-default) !important;
    border-radius: var(--am-radius-md) !important;
    overflow: hidden;
    box-sizing: border-box;
}

/* Scoped: TinyMCE sets iframe height inline; this caps default chrome for a short composer */
#comment_form_section .mce-edit-area iframe,
#comment_form_section .tox-edit-area iframe {
    min-height: 96px;
    max-height: 200px;
}

/* Icon-only attach / submit controls (detail_stack_footer + amCore_icon params) */
#comment_form_section .attachment_upload_button .qq-upload-button {
    box-sizing: border-box;
    min-width: var(--am-touch-min, 44px);
    min-height: var(--am-touch-min, 44px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--am-space-1);
    line-height: 0;
    border: none;
    border-radius: var(--am-radius-md);
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    transition: background var(--am-trans-fast), color var(--am-trans-fast);
}

#comment_form_section .attachment_upload_button .qq-upload-button:hover,
#comment_form_section .attachment_upload_button .qq-upload-button:active {
    border: none;
    box-shadow: none;
    background: var(--am-bg-subtle);
}

#comment_form_section .attachment_upload_button .qq-upload-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--am-primary-light);
}

#comment_form_section .attachment_upload_button .qq-upload-button img.am-icon {
    display: block;
    width: 22px;
    height: 22px;
}

.amComment-submit--amcore-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: var(--am-touch-min, 44px);
    min-height: var(--am-touch-min, 44px);
    padding: var(--am-space-1);
    line-height: 0;
    border-radius: var(--am-radius-md);
    box-sizing: border-box;
}

.amComment-submit--amcore-icon.am-btn--primary {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--am-text-secondary);
}

.amComment-submit--amcore-icon.am-btn--primary:hover,
.amComment-submit--amcore-icon.am-btn--primary:focus-visible {
    background: var(--am-bg-subtle) !important;
    background-color: var(--am-bg-subtle) !important;
    color: var(--am-primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--am-primary-light);
}

.amComment-submit--amcore-icon img.am-icon {
    display: block;
    width: 22px;
    height: 22px;
}

/* Reactions: compact inline icons, no pill/box background */
.amComment-reaction-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--am-space-1, 4px);
}

.amComment-react-btn {
    margin: 0;
    padding: 2px;
    border: 0;
    background: transparent;
    line-height: 0;
    cursor: pointer;
    border-radius: var(--am-radius-sm, 4px);
    min-width: 0;
    min-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.amComment-react-btn:hover {
    background: transparent;
    opacity: 0.8;
}

.amComment-react-btn:focus-visible {
    outline: 2px solid var(--am-primary, #0369a1);
    outline-offset: 2px;
    opacity: 1;
}

.amComment-react-icon {
    width: var(--am-icon-sm, 16px);
    height: var(--am-icon-sm, 16px);
    display: block;
    object-fit: contain;
    object-position: center;
    -webkit-user-drag: none;
    image-rendering: -webkit-optimize-contrast;
}

/* Action modal: less dead space above the composer (overrides jrAction #action_modal.media .action_wrap) */
#action_modal #comment_wrap {
    padding-top: 4px;
    margin-top: 0;
}

#action_modal.media #scroller .action_wrap {
    padding: 8px 12px 2px;
}

/* Layout: match comment list — skin grid .container > .row > .col2 + .col10 (avatar left, form right) */
.amComment-form-table {
    width: 100%;
}

.amComment-form-table .container {
    width: 100%;
}

.amComment-form-cell-main {
    min-width: 0;
}

.amComment-form-submit-row {
    vertical-align: middle;
}

.amComment-form-footer--modal .amComment-form-footer__actions.amComment-form-submit-btn-modal input.form_button {
    margin-top: 0;
}

.amComment-index-meta {
    margin-left: 24px;
}

.amComment-index-info {
    display: inline-block;
}

.amComment-thread-row .amComment-itemlist-avatar-wrap {
    margin-right: 0;
}

.amComment-itemlist-col {
    position: relative;
}

.amComment-itemlist-head {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--am-space-2, 8px);
    width: 100%;
    box-sizing: border-box;
    margin-bottom: var(--am-space-1, 4px);
    position: relative;
    z-index: 1;
    isolation: isolate;
}

.amComment-itemlist-head__start {
    flex: 1 1 auto;
    min-width: 0;
}

.amComment-itemlist-head__start .amComment-reaction-bar {
    margin-bottom: var(--am-space-1, 4px);
}

.amComment-itemlist-head__start .amComment-itemlist-info {
    display: block;
}

.amComment-itemlist-info {
    display: inline-block;
}

.amComment-at-lower {
    text-transform: lowercase;
}

.amComment-itemlist-blockcfg {
    position: static;
    float: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    align-self: flex-start;
    gap: var(--am-space-1, 4px);
    flex: 0 0 auto;
    margin: 0;
    max-width: min(100%, 14rem);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Per-comment edit/delete/quote: always visible (skins may float .block_config or other rules). */
.comment_page_section .amComment-comment-block .amComment-itemlist-blockcfg.block_config {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

@media (min-width: 480px) {
    .amComment-itemlist-blockcfg {
        max-width: min(100%, 18rem);
    }
}

/* amCore M-01: flex thread rows + responsive tweak */
@media (max-width: 768px) {
    .amComment-thread-row {
        gap: var(--am-space-1, 6px);
    }
}