<view class="comment">
    <view wx:if="{{featureState.topTicker && topNoticeVisible}}" class="top-notice-layer">
        <view class="top-notice-pill">
            <text class="top-notice-tag">LIVE</text>
            <text class="top-notice-text">{{topNoticeText}}</text>
        </view>
    </view>

    <scroll-view
        scroll-y="true"
        class="comment-container"
        id="scrollView"
        style="height: {{maxVisible * itemHeight + 24 * (maxVisible - 1)}}rpx"
        bindscroll="onScroll"
        scroll-with-animation="true"
        scroll-top="{{scrollTop}}"
    >
        <view id="list" class="list-wrapper">
            <view wx:for="{{displayList}}" wx:key="id">
                <view class="msg-item {{item.kind === 'system' ? 'is-system' : ''}}">
                    <text class="msg-item-name" wx:if="{{item.name}}">{{item.name}}</text>
                    <text class="msg-item-text" wx:if="{{item.msg || item.msg === ''}}">{{item.msg}}</text>
                </view>
            </view>
        </view>
    </scroll-view>

    <view
        wx:if="{{featureState.unreadReminder && unreadMessageCount > 0}}"
        class="unread-reminder"
        bindtap="handleUnreadReminderTap">
        <view class="unread-reminder-dot"></view>
        <text class="unread-reminder-text">{{unreadMessageCount}} 条新消息</text>
    </view>

    <view class="input-shell {{featureState.optimizedInput ? 'is-enhanced' : ''}} {{inputFocused ? 'is-focused' : ''}}">
        <view wx:if="{{featureState.optimizedInput}}" class="input-leading">
            <view class="input-leading-dot"></view>
        </view>

        <input
            value="{{inputValue}}"
            confirm-type="send"
            bindinput="handleInput"
            bindconfirm="handleSubmit"
            bindfocus="handleInputFocus"
            bindblur="handleInputBlur"
            class="msg-input"
            cursor-spacing="18"
            placeholder="说点什么吧~"
            placeholder-style="{{inputPlaceholderStyle}}"
        />

        <view
            wx:if="{{featureState.optimizedInput}}"
            class="input-send {{canSubmit ? 'is-ready' : ''}}"
            bindtap="submitCurrentInput"
        >
            发送
        </view>
    </view>

    <view class="action-bar">
        <view class="action-btn" hover-class="action-btn-hover" bindtap="openGuidePopup">
            <image class="action-icon" src="./icons/gallery.svg" mode="aspectFit" />
        </view>

        <button class="action-btn action-share" hover-class="action-btn-hover" open-type="share">
            <image class="action-icon" src="./icons/share.svg" mode="aspectFit" />
        </button>

        <view
            class="action-btn action-btn-heart {{heartButtonActive ? 'is-active' : ''}}"
            hover-class="action-btn-hover"
            bindtap="handleHeartTap"
        >
            <image class="action-icon action-icon-heart" src="./icons/heart.svg" mode="aspectFit" />
        </view>
    </view>

    <view class="heart-layer">
        <view
            wx:for="{{heartParticles}}"
            wx:key="id"
            class="heart-particle {{item.pathClass}}"
            style="right: {{item.right}}rpx; bottom: {{item.bottom}}rpx; animation-duration: {{item.duration}}ms; animation-delay: {{item.delay}}ms;"
        >
            <image class="heart-fly-icon {{item.pulseClass}}" src="./icons/heart.svg" mode="aspectFit" />
            <text
                class="heart-glyph {{item.pulseClass}}"
                style="font-size: {{item.size}}rpx; color: {{item.color}}; transform: rotate({{item.rotate}}deg);"
            >❤</text>
        </view>
    </view>

    <guide-popup
        show="{{showGuidePopup}}"
        title="{{guideTitle}}"
        subtitle="{{guideSubtitle}}"
        images="{{guideImages}}"
        bind:close="closeGuidePopup"
    />
</view>
