
.comment-message-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 20px;
    color: #fff;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    max-width: 360px;
    margin: 0 auto;

    .comment-header {
        margin-bottom: 16px;
        text-align: center;

        .comment-title {
            font-size: 16px;
            font-weight: 500;
        }
    }

    .comment-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;

        .star-rating {
            display: flex;
            gap: 8px;

            .star-item {
                cursor: pointer;
                transition: transform 0.2s ease;

                &:hover:not(.is-disabled) {
                    transform: scale(1.15);
                }

                &.is-disabled {
                    cursor: not-allowed;
                    opacity: 0.8;
                }
            }
        }

        .rating-desc {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.9);
            font-weight: 500;
        }

        .submitted-status {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
        }

        .no-permission {
            padding: 8px 16px;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 20px;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.7);
        }

        .submit-btn {
            padding: 10px 28px;
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.4);
            border-radius: 24px;
            color: #fff;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;

            &:hover:not(:disabled) {
                background: rgba(255, 255, 255, 0.3);
                transform: translateY(-1px);
            }

            &.is-active {
                background: rgba(255, 255, 255, 0.95);
                color: #667eea;
                border-color: transparent;

                &:hover:not(:disabled) {
                    background: #fff;
                }
            }

            &:disabled {
                cursor: not-allowed;
                opacity: 0.6;
            }
        }
    }
}