/* ============================================================
   📱 INTERACT APP — MOBILE CSS
   Covers: post_interact_panel, comment styles, emoji/share menus
   Mobile only: max-width 767px
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   1. INTERACT BUTTONS ROW — compact on mobile
══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .interact-buttons-row {
        gap: 0 !important;
        padding: 2px 0 !important;
    }

    .interact-btn {
        padding: 6px 4px !important;
        font-size: 10px !important;
        gap: 2px !important;
        min-width: 0 !important;
    }

    .interact-btn i {
        font-size: 14px !important;
    }

    .interact-count {
        font-size: 10px !important;
        min-width: 12px !important;
    }

    .interact-stat {
        padding: 6px 4px !important;
        font-size: 10px !important;
    }

    /* Emoji & share wrappers full flex */
    .emoji-reaction-wrapper,
    .share-btn-wrapper {
        flex: 1 !important;
    }

    /* ── Emoji menu: position above, full-width friendly ── */
    .circular-emoji-menu {
        left: 50% !important;
        transform: translateX(-50%) !important;
        padding: 6px 8px !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
        max-width: 260px !important;
        border-radius: 16px !important;
    }

    .emoji-option {
        width: 32px !important;
        height: 32px !important;
        font-size: 18px !important;
    }

    /* ── Share menu: same ── */
    .circular-share-menu {
        left: 50% !important;
        transform: translateX(-50%) !important;
        padding: 6px 8px !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
        max-width: 220px !important;
        border-radius: 16px !important;
    }

    .share-option {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }

    /* ── Comment section ── */
    .comment-input-wrapper {
        padding: 0 6px !important;
    }

    .comment-user-avatar {
        width: 28px !important;
        height: 28px !important;
    }

    .comment-textarea {
        font-size: 13px !important;
    }

    .comment-input-group {
        padding: 6px 10px !important;
    }

    /* ── Comment action buttons ── */
    .comment-action-btn span,
    .reply-action-btn span {
        display: none !important;
    }

    .comment-action-btn,
    .reply-action-btn {
        padding: 4px 6px !important;
        font-size: 11px !important;
    }

    .comment-actions-row,
    .reply-actions-row {
        gap: 4px !important;
    }

    /* ── Reply input ── */
    .reply-input-wrapper {
        padding-left: 36px !important;
    }

    .reply-user-avatar {
        width: 24px !important;
        height: 24px !important;
    }

    /* ── Stacked emojis ── */
    .stacked-emojis {
        width: 24px !important;
    }

    .stacked-emoji {
        width: 14px !important;
        height: 14px !important;
        font-size: 10px !important;
    }

    .stacked-emoji.emoji-2 { left: 6px !important; }
    .stacked-emoji.emoji-3 { left: 12px !important; }
}

/* ══════════════════════════════════════════════════════════
   2. REACTION SUMMARY BAR — Facebook style (above interact row)
══════════════════════════════════════════════════════════ */
.reaction-summary-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px 2px;
    min-height: 24px;
}

.reaction-summary-left {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.reaction-summary-emojis {
    display: flex;
    align-items: center;
}

.reaction-summary-emoji-stack {
    display: flex;
    align-items: center;
}

.reaction-summary-emoji-item {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    margin-left: -4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    position: relative;
    z-index: 1;
}

.reaction-summary-emoji-item:first-child {
    margin-left: 0;
    z-index: 3;
}

.reaction-summary-emoji-item:nth-child(2) { z-index: 2; }

.reaction-summary-total {
    font-size: 12px;
    color: #65676b;
    margin-left: 4px;
    font-weight: 500;
    cursor: pointer;
}

.reaction-summary-total:hover {
    text-decoration: underline;
    color: #050505;
}

.reaction-summary-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.reaction-summary-stat {
    font-size: 12px;
    color: #65676b;
    cursor: pointer;
}

.reaction-summary-stat:hover {
    text-decoration: underline;
    color: #050505;
}

/* Boost row left side — reaction summary inline */
.boost-row-left .reaction-summary-bar {
    padding: 0;
    min-height: unset;
}

@media (max-width: 767px) {
    .reaction-summary-bar {
        padding: 3px 6px 1px !important;
    }

    .reaction-summary-total,
    .reaction-summary-stat {
        font-size: 11px !important;
    }

    .reaction-summary-emoji-item {
        width: 16px !important;
        height: 16px !important;
        font-size: 10px !important;
    }
}