/* TUSMO24 CH-Quality V10 — canonical post-reaction component.
   Same component in feed, thread root, comments and nested replies.
   Each action is a natural (icon + optional count) group; equal spacing
   applies to GROUPS, not fixed icon origins. No arbitrary slot widths.

   Legacy master.styles.css uses deeply nested selectors. Explicit component-
   scoped overrides are required for conflicting theme geometry; nothing
   outside .tusmo-feed-actions is modified. */
body .tusmo-feed-actions {
    --tusmo-action-gap: var(--tusmo-group-gap, 16px);
    --tusmo-icon-count-gap: var(--tusmo-count-gap, 6px);
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center;
    justify-content: flex-start !important;
    column-gap: var(--tusmo-action-gap);
    row-gap: 0;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin-inline: 0 !important;
    padding-inline: 0;
}
body .tusmo-feed-actions > :is(button, a).ctrls-item {
    display: inline-flex;
    flex: 0 0 auto !important;
    align-items: center;
    justify-content: flex-start;
    gap: var(--tusmo-icon-count-gap);
    min-width: 44px;
    min-height: 44px !important;
    width: max-content;
    margin: 0 !important;
    padding: 0;
    border: 0;
    background: transparent;
    box-sizing: border-box;
    color: var(--cl-secondary-text-color, #858e98);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
body .tusmo-feed-actions > :is(button, a).ctrls-item:focus-visible {
    outline: 2px solid var(--cl-primary-color, #087cff) !important;
    outline-offset: 2px;
    border-radius: 4px;
}
body .tusmo-feed-actions > :is(button, a).ctrls-item .ctrls-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    width: 20px !important;
    height: 20px !important;
    padding: 0;
    margin: 0 !important;
}
body .tusmo-feed-actions .tusmo-action-svg {
    display: block;
    width: 20px !important;
    height: 20px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.15px;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: #858e98 !important;
}
body .tusmo-feed-actions .tusmo-action-svg :is(path, circle, line, polyline, polygon, rect, ellipse) {
    fill: none !important;
    stroke: currentColor !important;
}
body .tusmo-feed-actions > :is(button, a).ctrls-item .num {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    width: auto;
    height: 20px;
    padding: 0;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
body .tusmo-feed-actions > button.ctrls-item.liked .tusmo-action-svg,
body .tusmo-feed-actions > button.ctrls-item.liked .num {
    color: #087cff !important;
    stroke: #087cff !important;
}
body .tusmo-feed-actions > button.ctrls-item.liked .tusmo-action-svg path {
    fill: #087cff !important;
}
body .tusmo-feed-actions > :is(button, a).ctrls-item:disabled {
    cursor: not-allowed;
}
/* The native dropdown button is the full touch target and keyboard trigger.
   Its parent is only a positioning wrapper and takes all remaining free space
   via auto margin; this does not change the action-group gaps. */
body .tusmo-feed-actions > .ctrls-item.dropleft {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end !important;
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    margin: 0 0 0 auto !important;
    padding: 0;
    box-sizing: border-box;
}
body .tusmo-feed-actions > .ctrls-item.dropleft > button.dropdown-toggle.ctrls-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    max-width: 44px;
    max-height: 44px;
    margin: 0 !important;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    border-radius: 4px;
    cursor: pointer;
}
body .tusmo-feed-actions > .ctrls-item.dropleft > button.dropdown-toggle::before,
body .tusmo-feed-actions > .ctrls-item.dropleft > button.dropdown-toggle::after {
    display: none !important;
}
body .tusmo-feed-actions > .ctrls-item.dropleft > button.dropdown-toggle:focus-visible {
    outline: 2px solid var(--cl-primary-color, #087cff) !important;
    outline-offset: 2px;
}
body .tusmo-feed-actions > .ctrls-item.dropleft > button.dropdown-toggle svg {
    width: 20px !important;
    height: 20px !important;
}
/* V10 | Original three-dot hover treatment, adapted to the semantic V9 button.
   The visible pale disc is only 26px; the interactive target remains 44px.
   A background gradient (not a pseudo-element) keeps Bootstrap's dropdown
   caret suppression intact. Do not alter action-row geometry. */
body .tusmo-feed-actions > .ctrls-item.dropleft > button.dropdown-toggle.ctrls-item__icon svg {
    opacity: 0.7;
}
/* Fine-pointer hover matches the original restrained light-gray round hover. */
@media (hover: hover) and (pointer: fine) {
    body .tusmo-feed-actions > .ctrls-item.dropleft > button.dropdown-toggle.ctrls-item__icon:hover {
        background: radial-gradient(circle 13px at center, var(--cl-secondary-bg-color, #f7f9f9) 99%, transparent 100%) !important;
    }
    body .tusmo-feed-actions > .ctrls-item.dropleft > button.dropdown-toggle.ctrls-item__icon:hover svg {
        opacity: 1;
    }
}
/* Press, visible keyboard focus, and expanded menu preserve user feedback. */
body .tusmo-feed-actions > .ctrls-item.dropleft > button.dropdown-toggle.ctrls-item__icon:is(:active, :focus-visible, [aria-expanded="true"]) {
    background: radial-gradient(circle 13px at center, var(--cl-secondary-bg-color, #f7f9f9) 99%, transparent 100%) !important;
}
body .tusmo-feed-actions > .ctrls-item.dropleft > button.dropdown-toggle.ctrls-item__icon:is(:active, :focus-visible, [aria-expanded="true"]) svg {
    opacity: 1;
}
@keyframes tusmo-thumb-feedback-v5 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}
body .tusmo-feed-actions button.ctrls-item .ctrls-item__icon.tusmo-thumb-feedback .tusmo-action-svg {
    animation: tusmo-thumb-feedback-v5 220ms ease-out both;
}
@media (prefers-reduced-motion: reduce) {
    body .tusmo-feed-actions button.ctrls-item .ctrls-item__icon.tusmo-thumb-feedback .tusmo-action-svg {
        animation: none !important;
    }
}
/* Narrow nested discussions wrap gracefully instead of hiding the menu
   or shifting the action icons. Only the gap changes, never group geometry. */


/* ===========================================================================
   TUSMO24 CH-V6 | Post geometry, canonical design tokens.
   Scope: real post components in feed, thread root, reply roots and child replies.
   Single content rail per post. No viewport-specific pixel offset or transforms.
   Keep the app's deliberate hierarchy: a feed post has an avatar column, the
   thread root does not, replies have their own nested column.
   =========================================================================== */
body .tusmo-post {
    --tusmo-post-inline: 18px;
    --tusmo-post-top: 14px;
    --tusmo-post-bottom: 12px;
    --tusmo-avatar-to-rail: 12px;
    --tusmo-header-to-content: 10px;
    --tusmo-content-stack: 12px;
    --tusmo-media-to-actions: 6px;
    --tusmo-group-gap: 16px;
    --tusmo-count-gap: 6px;
    min-width: 0;
}

/* The original stylesheet carries deeply nested 10+ class selectors and
   spacing rules. The following component-scoped important declarations are
   necessary until that legacy stylesheet can be reduced in a separate release.
   No generic .post-list-item, body, or unrelated layout is modified. */
body main .timeline-posts-ls .tusmo-post > .post-list-item__content {
    padding: var(--tusmo-post-top) var(--tusmo-post-inline) var(--tusmo-post-bottom) !important;
    box-sizing: border-box;
}
body .tusmo-post .post-data,
body .tusmo-post .post-data__content,
body .tusmo-post .post-data__content-inner,
body .tusmo-post .post-data-layout,
body .tusmo-post .post-data-layout__content {
    min-width: 0;
    box-sizing: border-box;
}
body main .tusmo-post .post-data__content {
    padding-inline-start: var(--tusmo-avatar-to-rail) !important;
}
body main .tusmo-post--thread-root .post-data__content {
    padding-inline-start: 0 !important;
}
body main .tusmo-post .post-data-layout__content {
    margin-block-start: var(--tusmo-header-to-content) !important;
    margin-inline: 0;
    padding-inline: 0;
    width: 100%;
}
body main .tusmo-post .post-data-layout__content > .publication-text {
    margin: 0 !important;
    overflow-wrap: anywhere;
}
body main .tusmo-post .post-data-layout__content > .publication-title {
    margin-block-end: var(--tusmo-content-stack) !important;
}
body main .tusmo-post .post-data-layout__content > .publication-text + :is(
    .lozad-media, .publication-images-collage, .publication-audio,
    .publication-og, .publication-poll, .publication-funding
) {
    margin-block-start: var(--tusmo-content-stack) !important;
}
/* Preserve media aspect ratio and fit; use the entire available rail in each
   context, never center or right-align a narrower media box with auto margins. */
body main .tusmo-post .post-data-layout__content > :is(.lozad-media, .publication-images-collage) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-inline: 0 !important;
}
body main .tusmo-post .post-data-layout__content :is(
    .publication-image.tusmo-single-image, .publication-video,
    .publication-images-collage .tusmo-gallery
) {
    width: 100%;
    max-width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
    margin-inline: 0 !important;
}
body main .tusmo-post .post-data-layout__content :is(
    .publication-image.tusmo-single-image, .publication-video
) {
    aspect-ratio: 4 / 3;
}
body main .tusmo-post .post-data-layout__controls.tusmo-feed-actions {
    margin: var(--tusmo-media-to-actions) 0 0 !important;
    padding: 0 !important;
    width: 100%;
    min-width: 0;
    justify-content: flex-start !important;
    column-gap: var(--tusmo-group-gap);
    align-items: center;
    box-sizing: border-box;
}
/* Root and reply action rows inherit exactly the same horizontal content rail.
   Menu remains a 44x44 target, right-aligned within that rail. */
body main .tusmo-post .tusmo-feed-actions > .ctrls-item.dropleft {
    margin-inline-start: auto !important;
}
/* CH-V9: Preserve the production thread's avatar/name rhythm without
   copying its older action bar. The original alignment was a 52px reply
   indent for a 40px avatar + 15px text gap on wide screens (3px to the left
   of the parent's name), and 42px for a 32px avatar + 10px text gap on mobile.
   Derive it from the SAME tokens that determine the parent's name position:
   responsive avatar changes cannot silently desynchronise reply alignment.
   Only thread replies are affected; feed and root post geometry stay intact. */
body [data-app="thread"] {
    --tusmo-reply-align-leading: 0px;
    --tusmo-reply-indent: calc(var(--cl-primary-avatar-size) + var(--cl-primary-offset-size) - var(--tusmo-reply-align-leading));
}
@media (min-width: 1200px) {
    body [data-app="thread"] { --tusmo-reply-align-leading: 3px; }
}
/* Keep the parent name directly tied to the original theme's avatar/text gap;
   changing it only on thread replies avoids any feed regression. */
body [data-app="thread"] [data-an="replys-list"] .tusmo-post {
    --tusmo-avatar-to-rail: var(--cl-primary-offset-size);
}
body [data-app="thread"] .tusmo-discussion > .tusmo-replies {
    padding-inline-start: var(--tusmo-reply-indent);
    margin-inline: 0;
    min-width: 0;
    box-sizing: border-box;
    border-inline-start: none;
}
body [data-app="thread"] .tusmo-discussion > .tusmo-replies > .tusmo-reply {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    border-inline-start: none;
}
body [data-app="thread"] .tusmo-discussion::before,
body [data-app="thread"] .tusmo-discussion > .tusmo-replies > .tusmo-reply::before {
    content: none !important;
}
/* CH-V8: Hierarchical thread separators. One blue boundary belongs to the
   thread root. Each NEXT top-level .tusmo-discussion begins with exactly one
   subtle gray divider; descendants within .tusmo-replies have no divider.
   The adjacent-sibling selector also handles appended AJAX reply groups without
   JS bookkeeping, duplicate pseudo-elements or trailing separators. */
body [data-app="thread"] {
    --tusmo-discussion-gap: 14px;
    --tusmo-nested-reply-gap: 4px;
}
body [data-app="thread"] [data-an="replys-list"] > .tusmo-discussion {
    padding-block: 0;
    border-block: 0;
}
body [data-app="thread"] [data-an="replys-list"] > .tusmo-discussion + .tusmo-discussion {
    margin-block-start: 0;
    padding-block-start: var(--tusmo-discussion-gap);
    border-block-start: 1px solid var(--cl-primary-border-color, #dfe5ec);
}
/* Restore the original theme's blue main-post boundary, always 3px.
   Keep its border on .thread-data itself, not on individual root post content.
   Legacy reply-content dividers stay disabled to prevent double rules. */
body.cl-app-thread main .timeline-container[data-app="thread"] .timeline-posts-ls.thread-data {
    border-block-end: 3px solid var(--cl-primary-color, #087cff) !important;
}
body.cl-app-thread main .timeline-container[data-app="thread"] .timeline-posts-ls.thread-data .tusmo-post--thread-root > .post-list-item__content {
    border-block-end: 0 !important;
}
body.cl-app-thread main .timeline-container[data-app="thread"] .timeline-posts-ls.thread-replys {
    padding-block-start: 8px;
}
body.cl-app-thread main .timeline-container[data-app="thread"] .timeline-posts-ls.thread-replys .tusmo-post > .post-list-item__content {
    border-block-start: 0 !important;
    border-block-end: 0 !important;
}
body.cl-app-thread main .timeline-container[data-app="thread"] .timeline-posts-ls.thread-replys .timeline-posts-ls-group {
    border-block-start: 0 !important;
}
body.cl-app-thread main .timeline-container[data-app="thread"] .timeline-posts-ls.thread-replys .timeline-posts-ls-group .post-list-item::after {
    content: none !important;
    display: none !important;
}
body [data-app="thread"] [data-an="replys-list"] > .tusmo-discussion :is(
    .tusmo-post, .post-list-item__content
) {
    border-block-start: none;
}
body [data-app="thread"] .tusmo-replies > .tusmo-reply > .tusmo-post > .post-list-item__content {
    --tusmo-post-top: 9px;
    --tusmo-post-bottom: 8px;
}
body [data-app="thread"] .tusmo-replies > .tusmo-reply + .tusmo-reply {
    margin-block-start: var(--tusmo-nested-reply-gap);
}
@media (max-width: 767px) {
    body [data-app="thread"] {
        --tusmo-discussion-gap: 10px;
    }
    body .tusmo-post {
        --tusmo-post-inline: 12px;
        --tusmo-post-top: 12px;
        --tusmo-avatar-to-rail: 10px;
        --tusmo-content-stack: 10px;
        --tusmo-group-gap: 10px;
    }
}
@media (max-width: 359px) {
    /* Small-screen guard: save a few text pixels without losing hierarchy. */
    body [data-app="thread"] { --tusmo-reply-align-leading: 3px; }
    body .tusmo-post {
        --tusmo-post-inline: 10px;
        --tusmo-avatar-to-rail: 8px;
        --tusmo-group-gap: 8px;
    }
}